cloud-ide-core 0.0.1 → 1.0.2

package/fesm2022/cloud-ide-core.mjs

@@ -13,12 +13,149 @@ import * as i1 from '@angular/common/http';
 import { CideEleDataGridComponent, CideEleButtonComponent, CideInputComponent, CideSelectComponent, CideTextareaComponent, CideIconComponent, CideEleDropdownComponent, ConfirmationService, NotificationService, CideEleGlobalNotificationsComponent, CideEleJsonEditorComponent, CideSelectOptionComponent } from 'cloud-ide-element';
 import { AppStateHelperService } from 'cloud-ide-layout';
 
+const coreRoutes = [
+    {
+        path: 'menu-management',
+        loadComponent: () => Promise.resolve().then(function () { return menuList_component; }).then(c => c.MenuListComponent),
+        title: 'Menu Management',
+        data: {
+            reuseTab: true,
+            sypg_page_code: "core_menu_list"
+        }
+    }, {
+        path: 'department',
+        loadComponent: () => Promise.resolve().then(function () { return departmentList_component; }).then(c => c.DepartmentListComponent),
+        title: 'Department Management',
+        data: {
+            reuseTab: true,
+            sypg_page_code: "core_department_list"
+        }
+    },
+    {
+        path: 'designation',
+        loadComponent: () => Promise.resolve().then(function () { return designationList_component; }).then(c => c.DesignationListComponent),
+        title: 'Designation Management',
+        data: {
+            reuseTab: true,
+            sypg_page_code: "core_designation_list"
+        }
+    },
+    {
+        path: 'grade-level',
+        loadComponent: () => Promise.resolve().then(function () { return gradeLevelList_component; }).then(c => c.GradeLevelListComponent),
+        title: 'Grade Level Management',
+        data: {
+            reuseTab: true,
+            sypg_page_code: "core_grade_level_list"
+        }
+    },
+    {
+        path: 'page',
+        loadComponent: () => Promise.resolve().then(function () { return pageList_component; }).then(c => c.PageListComponent),
+        title: 'Page Management',
+        data: {
+            reuseTab: true,
+            sypg_page_code: "core_page_management"
+        }
+    },
+    {
+        path: 'page-form',
+        loadComponent: () => import('./cloud-ide-core-page-form.component-vfE-LkTS.mjs').then(c => c.PageFormComponent),
+        title: 'Page Form',
+        data: {
+            reuseTab: true,
+            sypg_page_code: "core_page_management"
+        }
+    },
+    {
+        path: 'page-form/:query',
+        loadComponent: () => import('./cloud-ide-core-page-form.component-vfE-LkTS.mjs').then(c => c.PageFormComponent),
+        title: 'Page Form',
+        data: {
+            reuseTab: true,
+            sypg_page_code: "core_page_management"
+        }
+    },
+    {
+        path: 'page-theme',
+        loadComponent: () => Promise.resolve().then(function () { return pageTheme_component; }).then(c => c.PageThemeComponent),
+        title: 'Page Theme Management',
+        data: {
+            reuseTab: true,
+            sypg_page_code: "core_page_theme"
+        }
+    },
+    {
+        path: 'page-theme/:query',
+        loadComponent: () => Promise.resolve().then(function () { return pageTheme_component; }).then(c => c.PageThemeComponent),
+        title: 'Page Theme Management',
+        data: {
+            reuseTab: true,
+            sypg_page_code: "core_page_theme"
+        }
+    },
+    {
+        path: 'page-controls',
+        loadComponent: () => Promise.resolve().then(function () { return pageControls_component; }).then(c => c.PageControlsComponent),
+        title: 'Page Controls Management',
+        data: {
+            reuseTab: true,
+            sypg_page_code: "core_page_controls"
+        }
+    },
+    {
+        path: 'page-controls/:query',
+        loadComponent: () => Promise.resolve().then(function () { return pageControls_component; }).then(c => c.PageControlsComponent),
+        title: 'Page Controls Management',
+        data: {
+            reuseTab: true,
+            sypg_page_code: "core_page_controls"
+        }
+    },
+    {
+        path: 'general_master_entry',
+        loadComponent: () => import('./cloud-ide-core-general-master.component-CFGGHinl.mjs').then(c => c.GeneralMasterComponent),
+        title: 'General Master Entry',
+        data: {
+            reuseTab: true,
+            sypg_page_code: "core_general_master"
+        }
+    },
+    {
+        path: 'general_master_entry/:query',
+        loadComponent: () => import('./cloud-ide-core-general-master.component-CFGGHinl.mjs').then(c => c.GeneralMasterComponent),
+        title: 'General Master Entry',
+        data: {
+            reuseTab: true,
+            sypg_page_code: "core_general_master"
+        }
+    },
+    {
+        path: 'general_type_entry',
+        loadComponent: () => import('./cloud-ide-core-general-master-type.component-BNYoP_bS.mjs').then(c => c.GeneralMasterTypeComponent),
+        title: 'General Type Entry',
+        data: {
+            reuseTab: true,
+            sypg_page_code: "core_general_master_type"
+        }
+    },
+    {
+        path: 'general_type_entry/:query',
+        loadComponent: () => import('./cloud-ide-core-general-master-type.component-BNYoP_bS.mjs').then(c => c.GeneralMasterTypeComponent),
+        title: 'General Type Entry',
+        data: {
+            reuseTab: true,
+            sypg_page_code: "core_general_master_type"
+        }
+    }
+];
+
 class CloudIdeCoreService {
     constructor() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CloudIdeCoreService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CloudIdeCoreService, providedIn: 'root' }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CloudIdeCoreService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CloudIdeCoreService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CloudIdeCoreService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CloudIdeCoreService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -26,14 +163,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
         }], ctorParameters: () => [] });
 
 class CloudIdeCoreComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CloudIdeCoreComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: CloudIdeCoreComponent, isStandalone: true, selector: "cide-core", ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CloudIdeCoreComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.7", type: CloudIdeCoreComponent, isStandalone: true, selector: "cide-core", ngImport: i0, template: `
     <p>
       cloud-ide-core works!
     </p>
-  `, isInline: true, styles: [""] }); }
+  `, isInline: true, styles: [""] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CloudIdeCoreComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CloudIdeCoreComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cide-core', standalone: true, imports: [], template: `
     <p>
@@ -359,11 +496,12 @@ var mockMenuData = {
 };
 
 class MenuManagementService {
+    http;
+    apiUrl = `${coreRoutesUrl?.getSidebarMenues}`;
+    menuListSubject = new BehaviorSubject([]);
+    menuList$ = this.menuListSubject.asObservable();
     constructor(http) {
         this.http = http;
-        this.apiUrl = `${coreRoutesUrl?.getSidebarMenues}`;
-        this.menuListSubject = new BehaviorSubject([]);
-        this.menuList$ = this.menuListSubject.asObservable();
         console.log('MenuManagementService initialized - using real API');
     }
     /**
@@ -571,10 +709,10 @@ class MenuManagementService {
         console.error('Menu Management Service Error:', errorMessage);
         return throwError(() => new Error(errorMessage));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: MenuManagementService, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: MenuManagementService, providedIn: 'root' }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: MenuManagementService, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: MenuManagementService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: MenuManagementService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: MenuManagementService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -582,6 +720,188 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
         }], ctorParameters: () => [{ type: i1.HttpClient }] });
 
 class MenuListComponent {
+    // Dependency injection
+    destroyRef = inject(DestroyRef);
+    menuService = inject(MenuManagementService);
+    fb = inject(NonNullableFormBuilder);
+    router = inject(Router);
+    // Modern ViewChild signals for template renderers (Angular 20 approach)
+    menuDetailsRendererTemplate = viewChild.required('menuDetailsRendererTemplate');
+    menuTypeRendererTemplate = viewChild.required('menuTypeRendererTemplate');
+    actionsDropdownRendererTemplate = viewChild.required('actionsDropdownRendererTemplate');
+    // Make Math available in template
+    Math = Math;
+    // Signals for reactive state management
+    menuItems = signal([], ...(ngDevMode ? [{ debugName: "menuItems" }] : []));
+    loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+    error = signal(null, ...(ngDevMode ? [{ debugName: "error" }] : []));
+    selectedItems = signal([], ...(ngDevMode ? [{ debugName: "selectedItems" }] : []));
+    searchTerm = signal('', ...(ngDevMode ? [{ debugName: "searchTerm" }] : []));
+    // Modern reactive forms with signals
+    selectedParentItem = signal(null, ...(ngDevMode ? [{ debugName: "selectedParentItem" }] : []));
+    // Retrieved menu item data
+    retrievedMenuItem = signal(null, ...(ngDevMode ? [{ debugName: "retrievedMenuItem" }] : []));
+    // Edit mode flag
+    isEditMode = signal(false, ...(ngDevMode ? [{ debugName: "isEditMode" }] : []));
+    // Drag order management
+    originalOrder = signal([], ...(ngDevMode ? [{ debugName: "originalOrder" }] : []));
+    hasOrderChanged = signal(false, ...(ngDevMode ? [{ debugName: "hasOrderChanged" }] : []));
+    // Server-side pagination state
+    currentPage = signal(1, ...(ngDevMode ? [{ debugName: "currentPage" }] : []));
+    pageSize = signal(10, ...(ngDevMode ? [{ debugName: "pageSize" }] : []));
+    totalItems = signal(0, ...(ngDevMode ? [{ debugName: "totalItems" }] : []));
+    // Modern reactive form with typed controls
+    quickAddForm = this.fb.group({
+        syme_title: this.fb.control('', [Validators.required, Validators.minLength(2), Validators.maxLength(100)]),
+        syme_desc: this.fb.control('', [Validators.maxLength(255)]),
+        syme_type: this.fb.control('module', [Validators.required]),
+        syme_id_syme: this.fb.control(''),
+        syme_path: this.fb.control('', [Validators.maxLength(255)]),
+        syme_icon: this.fb.control('', [Validators.maxLength(50)]),
+        syme_link: this.fb.control('', [Validators.maxLength(255)]),
+        syme_isactive: this.fb.control(true, [Validators.required]),
+        syme_order_by: this.fb.control(1, [Validators.required, Validators.min(1)])
+    });
+    // Menu type options for quick add - dynamic based on parent selection
+    menuTypeOptions = computed(() => {
+        if (this.selectedParentItem()) {
+            // When parent is selected, allow creating child types only
+            return [
+                { value: 'section', label: 'Section' },
+                { value: 'menu', label: 'Menu Item' },
+                { value: 'title', label: 'Title' }
+            ];
+        }
+        else {
+            // When no parent is selected, only allow module creation
+            return [
+                { value: 'module', label: 'Module' }
+            ];
+        }
+    }, ...(ngDevMode ? [{ debugName: "menuTypeOptions" }] : []));
+    // Grid configuration signal
+    gridConfig = signal({
+        id: 'menu-list-grid',
+        title: '',
+        subtitle: '',
+        columns: [
+            {
+                key: 'details',
+                header: 'Menu Item',
+                type: 'custom',
+                width: 'auto',
+                truncate: true,
+                align: 'left',
+                renderer: 'menuDetailsRenderer'
+            },
+            {
+                key: 'syme_type',
+                header: 'Type',
+                type: 'custom',
+                width: '120px',
+                truncate: false,
+                align: 'center',
+                renderer: 'menuTypeRenderer'
+            },
+            {
+                key: 'syme_path',
+                header: 'Path',
+                type: 'text',
+                width: '200px',
+                truncate: true,
+                align: 'left'
+            },
+            {
+                key: 'syme_order_by',
+                header: 'Order',
+                type: 'order',
+                width: '80px',
+                truncate: false,
+                align: 'center'
+            },
+            {
+                key: 'syme_isactive',
+                header: 'Status',
+                type: 'status',
+                width: '100px',
+                truncate: false,
+                align: 'center',
+                statusConfig: {
+                    activeValue: true,
+                    activeLabel: 'Active',
+                    inactiveLabel: 'Inactive',
+                    activeClass: 'tw-bg-green-100 tw-text-green-800',
+                    inactiveClass: 'tw-bg-red-100 tw-text-red-800'
+                }
+            },
+            {
+                key: 'actions',
+                header: '',
+                type: 'custom',
+                width: '60px',
+                truncate: false,
+                align: 'center',
+                renderer: 'actionsDropdownRenderer'
+            }
+        ],
+        data: [],
+        trackBy: '_id',
+        pagination: {
+            enabled: true,
+            pageSize: 10,
+            pageSizeOptions: [10, 25, 50, 100],
+            showQuickJump: true,
+            showPageInfo: true,
+            showRefresh: true
+        },
+        search: {
+            enabled: true,
+            placeholder: 'Search menu items...',
+            searchableColumns: ['syme_title', 'syme_desc', 'syme_path'],
+            debounceMs: 300
+        },
+        loading: {
+            useDefer: true,
+            skeletonRows: 5,
+            showOverlay: false
+        },
+        scroll: {
+            enabled: true,
+            maxHeight: '',
+            minHeight: '',
+            stickyHeader: true,
+            virtualScroll: false,
+            rowHeight: 50
+        },
+        dragDrop: {
+            enabled: true,
+            orderField: 'syme_order_by',
+            dragClass: 'tw-opacity-50 tw-bg-blue-50',
+            dropClass: 'tw-bg-green-50'
+        },
+        responsive: true,
+        striped: false,
+        bordered: true,
+        compact: false,
+        tableClass: 'tw-table-fixed tw-w-full tw-rounded-none',
+        onRefresh: 'onMenuItemRefresh',
+        onRowReorder: 'onRowReorder',
+        tree: {
+            enabled: true,
+            primaryKey: '_id',
+            foreignKey: 'syme_id_syme',
+            childrenKey: 'children',
+            levelKey: 'level',
+            expandedKey: 'isExpanded',
+            hasChildrenKey: 'hasChildren'
+        }
+    }, ...(ngDevMode ? [{ debugName: "gridConfig" }] : []));
+    // Template renderers using Angular best practices
+    templateRenderers = computed(() => ({
+        menuDetailsRenderer: this.menuDetailsRendererTemplate(),
+        menuTypeRenderer: this.menuTypeRendererTemplate(),
+        actionsDropdownRenderer: this.actionsDropdownRendererTemplate()
+    }), ...(ngDevMode ? [{ debugName: "templateRenderers" }] : []));
     /**
      * Get template renderers for data grid
      * These templates are available for enhanced data grid components
@@ -589,6 +909,10 @@ class MenuListComponent {
     getTemplateRenderers() {
         return this.templateRenderers();
     }
+    // Mixed renderers (templates + string functions)
+    customRenderers = computed(() => ({
+        ...this.templateRenderers()
+    }), ...(ngDevMode ? [{ debugName: "customRenderers" }] : []));
     /**
      * Get custom renderers adapted for current data grid compatibility
      * Uses template-based renderers converted to string functions
@@ -597,216 +921,24 @@ class MenuListComponent {
         // This method is no longer needed since we're using templates directly
         return {};
     }
+    // Action handlers for grid actions
+    actionHandlers = {
+        onEditMenuItem: (row) => this.editMenuItem(row._id || ''),
+        onToggleMenuItem: (row) => this.toggleItemStatus(row._id || ''),
+        onDeleteMenuItem: (row) => this.deleteMenuItem(row._id || ''),
+        onMenuItemRowClick: (row) => this.onMenuItemRowClick(row),
+        onMenuItemRefresh: () => this.onMenuItemRefresh(),
+        onAddChild: (row) => this.onAddChild(row),
+        resetOrder: () => this.resetDragOrder(),
+        saveOrder: () => this.saveMenuOrder()
+    };
+    hasSelection = computed(() => this.selectedItems().length > 0, ...(ngDevMode ? [{ debugName: "hasSelection" }] : []));
+    // Pagination computed properties
+    totalPages = computed(() => Math.ceil(this.totalItems() / this.pageSize()), ...(ngDevMode ? [{ debugName: "totalPages" }] : []));
+    hasNextPage = computed(() => this.currentPage() < this.totalPages(), ...(ngDevMode ? [{ debugName: "hasNextPage" }] : []));
+    hasPreviousPage = computed(() => this.currentPage() > 1, ...(ngDevMode ? [{ debugName: "hasPreviousPage" }] : []));
     // Modern constructor with effects for initialization
     constructor() {
-        // Dependency injection
-        this.destroyRef = inject(DestroyRef);
-        this.menuService = inject(MenuManagementService);
-        this.fb = inject(NonNullableFormBuilder);
-        this.router = inject(Router);
-        // Modern ViewChild signals for template renderers (Angular 20 approach)
-        this.menuDetailsRendererTemplate = viewChild.required('menuDetailsRendererTemplate');
-        this.menuTypeRendererTemplate = viewChild.required('menuTypeRendererTemplate');
-        this.actionsDropdownRendererTemplate = viewChild.required('actionsDropdownRendererTemplate');
-        // Make Math available in template
-        this.Math = Math;
-        // Signals for reactive state management
-        this.menuItems = signal([]);
-        this.loading = signal(false);
-        this.error = signal(null);
-        this.selectedItems = signal([]);
-        this.searchTerm = signal('');
-        // Modern reactive forms with signals
-        this.selectedParentItem = signal(null);
-        // Retrieved menu item data
-        this.retrievedMenuItem = signal(null);
-        // Edit mode flag
-        this.isEditMode = signal(false);
-        // Drag order management
-        this.originalOrder = signal([]);
-        this.hasOrderChanged = signal(false);
-        // Server-side pagination state
-        this.currentPage = signal(1);
-        this.pageSize = signal(10);
-        this.totalItems = signal(0);
-        // Modern reactive form with typed controls
-        this.quickAddForm = this.fb.group({
-            syme_title: this.fb.control('', [Validators.required, Validators.minLength(2), Validators.maxLength(100)]),
-            syme_desc: this.fb.control('', [Validators.maxLength(255)]),
-            syme_type: this.fb.control('module', [Validators.required]),
-            syme_id_syme: this.fb.control(''),
-            syme_path: this.fb.control('', [Validators.maxLength(255)]),
-            syme_icon: this.fb.control('', [Validators.maxLength(50)]),
-            syme_link: this.fb.control('', [Validators.maxLength(255)]),
-            syme_isactive: this.fb.control(true, [Validators.required]),
-            syme_order_by: this.fb.control(1, [Validators.required, Validators.min(1)])
-        });
-        // Menu type options for quick add - dynamic based on parent selection
-        this.menuTypeOptions = computed(() => {
-            if (this.selectedParentItem()) {
-                // When parent is selected, allow creating child types only
-                return [
-                    { value: 'section', label: 'Section' },
-                    { value: 'menu', label: 'Menu Item' },
-                    { value: 'title', label: 'Title' }
-                ];
-            }
-            else {
-                // When no parent is selected, only allow module creation
-                return [
-                    { value: 'module', label: 'Module' }
-                ];
-            }
-        });
-        // Grid configuration signal
-        this.gridConfig = signal({
-            id: 'menu-list-grid',
-            title: '',
-            subtitle: '',
-            columns: [
-                {
-                    key: 'details',
-                    header: 'Menu Item',
-                    type: 'custom',
-                    width: 'auto',
-                    truncate: true,
-                    align: 'left',
-                    renderer: 'menuDetailsRenderer'
-                },
-                {
-                    key: 'syme_type',
-                    header: 'Type',
-                    type: 'custom',
-                    width: '120px',
-                    truncate: false,
-                    align: 'center',
-                    renderer: 'menuTypeRenderer'
-                },
-                {
-                    key: 'syme_path',
-                    header: 'Path',
-                    type: 'text',
-                    width: '200px',
-                    truncate: true,
-                    align: 'left'
-                },
-                {
-                    key: 'syme_order_by',
-                    header: 'Order',
-                    type: 'order',
-                    width: '80px',
-                    truncate: false,
-                    align: 'center'
-                },
-                {
-                    key: 'syme_isactive',
-                    header: 'Status',
-                    type: 'status',
-                    width: '100px',
-                    truncate: false,
-                    align: 'center',
-                    statusConfig: {
-                        activeValue: true,
-                        activeLabel: 'Active',
-                        inactiveLabel: 'Inactive',
-                        activeClass: 'tw-bg-green-100 tw-text-green-800',
-                        inactiveClass: 'tw-bg-red-100 tw-text-red-800'
-                    }
-                },
-                {
-                    key: 'actions',
-                    header: '',
-                    type: 'custom',
-                    width: '60px',
-                    truncate: false,
-                    align: 'center',
-                    renderer: 'actionsDropdownRenderer'
-                }
-            ],
-            data: [],
-            trackBy: '_id',
-            pagination: {
-                enabled: true,
-                pageSize: 10,
-                pageSizeOptions: [10, 25, 50, 100],
-                showQuickJump: true,
-                showPageInfo: true,
-                showRefresh: true
-            },
-            search: {
-                enabled: true,
-                placeholder: 'Search menu items...',
-                searchableColumns: ['syme_title', 'syme_desc', 'syme_path'],
-                debounceMs: 300
-            },
-            loading: {
-                useDefer: true,
-                skeletonRows: 5,
-                showOverlay: false
-            },
-            scroll: {
-                enabled: true,
-                maxHeight: '',
-                minHeight: '',
-                stickyHeader: true,
-                virtualScroll: false,
-                rowHeight: 50
-            },
-            dragDrop: {
-                enabled: true,
-                orderField: 'syme_order_by',
-                dragClass: 'tw-opacity-50 tw-bg-blue-50',
-                dropClass: 'tw-bg-green-50'
-            },
-            responsive: true,
-            striped: false,
-            bordered: true,
-            compact: false,
-            tableClass: 'tw-table-fixed tw-w-full tw-rounded-none',
-            onRefresh: 'onMenuItemRefresh',
-            onRowReorder: 'onRowReorder',
-            tree: {
-                enabled: true,
-                primaryKey: '_id',
-                foreignKey: 'syme_id_syme',
-                childrenKey: 'children',
-                levelKey: 'level',
-                expandedKey: 'isExpanded',
-                hasChildrenKey: 'hasChildren'
-            }
-        });
-        // Template renderers using Angular best practices
-        this.templateRenderers = computed(() => ({
-            menuDetailsRenderer: this.menuDetailsRendererTemplate(),
-            menuTypeRenderer: this.menuTypeRendererTemplate(),
-            actionsDropdownRenderer: this.actionsDropdownRendererTemplate()
-        }));
-        // Mixed renderers (templates + string functions)
-        this.customRenderers = computed(() => ({
-            ...this.templateRenderers()
-        }));
-        // Action handlers for grid actions
-        this.actionHandlers = {
-            onEditMenuItem: (row) => this.editMenuItem(row._id || ''),
-            onToggleMenuItem: (row) => this.toggleItemStatus(row._id || ''),
-            onDeleteMenuItem: (row) => this.deleteMenuItem(row._id || ''),
-            onMenuItemRowClick: (row) => this.onMenuItemRowClick(row),
-            onMenuItemRefresh: () => this.onMenuItemRefresh(),
-            onAddChild: (row) => this.onAddChild(row),
-            resetOrder: () => this.resetDragOrder(),
-            saveOrder: () => this.saveMenuOrder()
-        };
-        this.hasSelection = computed(() => this.selectedItems().length > 0);
-        // Pagination computed properties
-        this.totalPages = computed(() => Math.ceil(this.totalItems() / this.pageSize()));
-        this.hasNextPage = computed(() => this.currentPage() < this.totalPages());
-        this.hasPreviousPage = computed(() => this.currentPage() > 1);
-        /**
-         * Get default type based on parent selection (computed for reactivity)
-         */
-        this.getDefaultType = computed(() => {
-            return this.selectedParentItem() ? 'section' : 'module';
-        });
         // Initialize component once on construction
         this.initializeComponent();
         // Cleanup effect for event listeners
@@ -847,6 +979,12 @@ class MenuListComponent {
             window.handleMenuAction = this.handleMenuAction.bind(this);
         }
     }
+    /**
+     * Get default type based on parent selection (computed for reactivity)
+     */
+    getDefaultType = computed(() => {
+        return this.selectedParentItem() ? 'section' : 'module';
+    }, ...(ngDevMode ? [{ debugName: "getDefaultType" }] : []));
     /**
      * Load menu items from service
      */
@@ -1687,10 +1825,10 @@ class MenuListComponent {
         this.updateGridData(testData);
         console.log('✅ Test data loaded successfully');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: MenuListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: MenuListComponent, isStandalone: true, selector: "cide-core-app-menu-list", viewQueries: [{ propertyName: "menuDetailsRendererTemplate", first: true, predicate: ["menuDetailsRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "menuTypeRendererTemplate", first: true, predicate: ["menuTypeRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "actionsDropdownRendererTemplate", first: true, predicate: ["actionsDropdownRendererTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Menu List Container -->\n<div class=\"tw-table tw-w-full tw-h-full\">\n\n  <!-- Quick Add Form Section -->\n  <div class=\"tw-table-row tw-h-0\">\n    <div class=\"tw-table-cell tw-px-6 tw-py-4 tw-border-b tw-border-gray-200 tw-bg-white\">\n    <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\n      <div class=\"tw-flex tw-items-center tw-space-x-3\">\n        <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\n        <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-m-0\">{{ isEditMode() ? 'Edit Menu Item' : 'Quick Add Menu Item' }}</h6>\n      </div>\n      @if (selectedParentItem()) {\n        <div class=\"tw-flex tw-items-center tw-space-x-3 tw-bg-blue-50 tw-border tw-border-blue-200 tw-px-4 tw-py-2 tw-rounded-lg\">\n          <cide-ele-icon class=\"tw-text-blue-600 tw-w-4 tw-h-4\">account_tree</cide-ele-icon>\n          <div class=\"tw-flex tw-items-center tw-space-x-2\">\n            <span class=\"tw-text-sm tw-text-blue-600 tw-font-medium\">{{ isEditMode() ? 'Parent:' : 'Creating child under:' }}</span>\n            <span class=\"tw-text-sm tw-text-blue-800 tw-font-semibold\">{{ selectedParentItem()?.syme_title }}</span>\n          </div>\n          <button \n            cideEleButton \n            variant=\"ghost\" \n            size=\"xs\" \n            type=\"button\" \n            (click)=\"clearSelectedParent()\" \n            class=\"tw-text-blue-400 hover:tw-text-blue-600\">\n            <svg class=\"tw-w-4 tw-h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\"/>\n            </svg>\n          </button>\n        </div>\n      }\n    </div>\n    \n    <form [formGroup]=\"quickAddForm\" (ngSubmit)=\"quickAddMenuItem()\">\n    <!-- First Row -->\n    <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-3 tw-mb-3\">\n      <!-- Menu Title -->\n      <div>\n        <cide-ele-input \n          id=\"syme_title\" \n          label=\"Title\" \n          formControlName=\"syme_title\"\n          size=\"sm\">\n        </cide-ele-input>\n      </div>\n      \n      <!-- Menu Type -->\n      <div>\n        <cide-ele-select \n          label=\"Type*\" \n          [options]=\"menuTypeOptions()\" \n          formControlName=\"syme_type\"\n          placeholder=\"Select type\"\n          size=\"sm\">\n        </cide-ele-select>\n      </div>\n      \n      <!-- Icon -->\n      <div>\n        <cide-ele-input \n          id=\"quickIcon\" \n          type=\"text\"\n          label=\"Icon\" \n          formControlName=\"syme_icon\"\n          placeholder=\"Icon name\"\n          size=\"sm\">\n        </cide-ele-input>\n      </div>\n      \n      <!-- Active Status -->\n      <div class=\"tw-flex tw-flex-col tw-justify-end\">\n        <cide-ele-input \n          id=\"quickIsActive\"\n          type=\"checkbox\"\n          label=\"Active\"\n          formControlName=\"syme_isactive\"\n          size=\"sm\">\n        </cide-ele-input>\n      </div>\n    </div>\n    \n    <!-- Second Row -->\n    <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-3 tw-items-end\">\n      <!-- Description -->\n      <div>\n        <cide-ele-textarea \n          id=\"syme_desc\" \n          label=\"Description\" \n          formControlName=\"syme_desc\"\n          placeholder=\"Menu description\"\n          rows=\"2\"\n          size=\"sm\">\n        </cide-ele-textarea>\n      </div>\n      \n      <!-- Path -->\n      <div>\n        <cide-ele-input \n          id=\"quickPath\" \n          type=\"text\"\n          label=\"Path\" \n          formControlName=\"syme_path\"\n          placeholder=\"/path/to/route\"\n          size=\"sm\">\n        </cide-ele-input>\n      </div>\n      \n      <!-- Link -->\n      <div>\n        <cide-ele-input \n          id=\"quickLink\" \n          type=\"text\"\n          label=\"Link\" \n          formControlName=\"syme_link\"\n          placeholder=\"External link\"\n          size=\"sm\">\n        </cide-ele-input>\n      </div>\n      \n      <!-- Action Buttons -->\n      <div class=\"tw-flex tw-flex-col tw-justify-end\">\n        <div class=\"tw-flex tw-space-x-2\">\n          <button \n            cideEleButton \n            variant=\"primary\" \n            size=\"sm\" \n            type=\"submit\"\n            [disabled]=\"quickAddForm.invalid\"\n            class=\"tw-px-2 tw-py-1 tw-w-20\">\n            <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\n            {{ isEditMode() ? 'Update' : 'Add' }}\n          </button>\n          <button \n            cideEleButton \n            variant=\"outline\" \n            size=\"sm\" \n            type=\"button\"\n            (click)=\"resetQuickAddForm()\"\n            class=\"tw-px-2 tw-py-1 tw-w-16\">\n            <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">refresh</cide-ele-icon>\n            Reset\n          </button>\n        </div>\n      </div>\n    </div>\n    </form>\n    </div>\n  </div>\n\n  <!-- Header Section with Filters -->\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\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\">\n\n      <!-- Title -->\n      <div class=\"tw-flex tw-items-center tw-space-x-2\">\n        <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">menu</cide-ele-icon>\n        <h5 class=\"tw-text-base tw-font-medium tw-text-gray-900 tw-m-0\">Menu Management</h5>\n      </div>\n\n      <!-- Actions -->\n      <div\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\">\n        <!-- Actions can be added here if needed -->\n      </div>\n    </div>\n\n    <!-- Error Message -->\n    @if (error()) {\n    <div class=\"tw-mt-4 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\" 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    </div>\n  </div>\n\n  <!-- Main Content Area -->\n  <div class=\"tw-table-row\">\n    <div class=\"tw-table-cell tw-h-full tw-relative\">\n\n  <!-- Debug Information: Uncomment for development -->\n  <!--\n  <div class=\"tw-p-2 tw-bg-yellow-100 tw-text-xs tw-border-b tw-flex tw-justify-between tw-items-center\">\n    <span>Debug: Loading: {{ loading() }} | Items Count: {{ menuItems().length }} | Total: {{ totalItems() }} | Error: {{ error() }}</span>\n    <button cideEleButton variant=\"outline\" size=\"xs\" (click)=\"loadTestData()\" class=\"tw-ml-2\">\n      Load Test Data\n    </button>\n  </div>\n  -->\n  \n  <!-- Data Grid Component -->\n  <div class=\"tw-h-full tw-overflow-auto\">\n    \n    <cide-ele-data-grid \n      [config]=\"gridConfig()\" \n      [templateRenderers]=\"getTemplateRenderers()\"\n      [actionHandlers]=\"actionHandlers\"\n      [serverSidePagination]=\"true\" \n      [totalServerItems]=\"totalItems()\" \n      [currentServerPage]=\"currentPage()\"\n      [currentServerPageSize]=\"pageSize()\" \n      [dragDropEnabled]=\"true\" \n      (gridEvent)=\"onGridEvent($event)\">\n    </cide-ele-data-grid>\n  </div>\n\n\n    </div>\n  </div>\n\n</div>\n\n<!-- \n  Angular Template References for Grid Renderers (Best Practice)\n  \n  These ng-template elements represent the Angular best practice for custom rendering.\n  They provide:\n  - Type safety with template context\n  - Component lifecycle integration\n  - Change detection optimization\n  - Proper event handling\n  - Accessibility features\n  \n  Note: Current data grid uses string renderers for compatibility.\n  Templates are maintained for future component enhancement.\n-->\n\n\n\n<!-- Menu Details Renderer Template -->\n<ng-template #menuDetailsRendererTemplate let-row=\"row\" let-value=\"value\">\n  <div class=\"tw-flex tw-items-center tw-min-w-0\">\n    <!-- Menu Icon -->\n    <div class=\"tw-flex-shrink-0\">\n      <cide-ele-icon \n        class=\"tw-text-gray-400\" \n        size=\"xs\">\n        {{ row.syme_icon || 'folder_open' }}\n      </cide-ele-icon>\n    </div>\n    \n    <!-- Menu Details -->\n    <div class=\"tw-ml-3 tw-min-w-0 tw-flex-1\">\n      <div class=\"tw-text-xs tw-font-medium tw-text-gray-900 tw-truncate\" \n           [title]=\"row.syme_title\">\n        {{ row.syme_title || 'Untitled' }}\n      </div>\n      @if (row.syme_desc) {\n        <div class=\"tw-text-xs tw-text-gray-500 tw-truncate\" \n             [title]=\"row.syme_desc\">\n          {{ row.syme_desc }}\n        </div>\n      }\n    </div>\n  </div>\n</ng-template>\n\n<!-- Menu Type Renderer Template -->\n<ng-template #menuTypeRendererTemplate let-row=\"row\" let-value=\"value\">\n  <span class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-whitespace-nowrap\"\n        [ngClass]=\"getMenuTypeClass(row.syme_type)\">\n    {{ getMenuTypeLabel(row.syme_type) }}\n  </span>\n</ng-template>\n\n<!-- Actions Dropdown Renderer Template -->\n<ng-template #actionsDropdownRendererTemplate let-row=\"row\" let-value=\"value\">\n  <cide-ele-dropdown \n    [items]=\"getDropdownItems(row)\"\n    [config]=\"{ triggerIcon: 'more_vert', triggerSize: 'sm' }\"\n    (itemClick)=\"onDropdownItemClick($event, row)\">\n  </cide-ele-dropdown>\n</ng-template>\n\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: CideEleDataGridComponent, selector: "cide-ele-data-grid", inputs: ["config", "customRenderers", "templateRenderers", "customFormatters", "actionHandlers", "serverSidePagination", "totalServerItems", "currentServerPage", "currentServerPageSize", "dragDropEnabled"], outputs: ["gridEvent"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton]", 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: 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: 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"], outputs: ["ngModelChange", "change", "searchChange"] }, { kind: "component", type: CideTextareaComponent, selector: "cide-ele-textarea", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "minlength", "maxlength", "rows", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput"], outputs: ["ngModelChange"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideEleDropdownComponent, selector: "cide-ele-dropdown", inputs: ["items", "config", "triggerTemplate", "menuTemplate"], outputs: ["itemClick", "dropdownToggle"] }] }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: MenuListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: MenuListComponent, isStandalone: true, selector: "cide-core-app-menu-list", viewQueries: [{ propertyName: "menuDetailsRendererTemplate", first: true, predicate: ["menuDetailsRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "menuTypeRendererTemplate", first: true, predicate: ["menuTypeRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "actionsDropdownRendererTemplate", first: true, predicate: ["actionsDropdownRendererTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Menu List Container -->\n<div class=\"tw-table tw-w-full tw-h-full\">\n\n  <!-- Quick Add Form Section -->\n  <div class=\"tw-table-row tw-h-0\">\n    <div class=\"tw-table-cell tw-px-6 tw-py-4 tw-border-b tw-border-gray-200 tw-bg-white\">\n    <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\n      <div class=\"tw-flex tw-items-center tw-space-x-3\">\n        <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\n        <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-m-0\">{{ isEditMode() ? 'Edit Menu Item' : 'Quick Add Menu Item' }}</h6>\n      </div>\n      @if (selectedParentItem()) {\n        <div class=\"tw-flex tw-items-center tw-space-x-3 tw-bg-blue-50 tw-border tw-border-blue-200 tw-px-4 tw-py-2 tw-rounded-lg\">\n          <cide-ele-icon class=\"tw-text-blue-600 tw-w-4 tw-h-4\">account_tree</cide-ele-icon>\n          <div class=\"tw-flex tw-items-center tw-space-x-2\">\n            <span class=\"tw-text-sm tw-text-blue-600 tw-font-medium\">{{ isEditMode() ? 'Parent:' : 'Creating child under:' }}</span>\n            <span class=\"tw-text-sm tw-text-blue-800 tw-font-semibold\">{{ selectedParentItem()?.syme_title }}</span>\n          </div>\n          <button \n            cideEleButton \n            variant=\"ghost\" \n            size=\"xs\" \n            type=\"button\" \n            (click)=\"clearSelectedParent()\" \n            class=\"tw-text-blue-400 hover:tw-text-blue-600\">\n            <svg class=\"tw-w-4 tw-h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\"/>\n            </svg>\n          </button>\n        </div>\n      }\n    </div>\n    \n    <form [formGroup]=\"quickAddForm\" (ngSubmit)=\"quickAddMenuItem()\">\n    <!-- First Row -->\n    <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-3 tw-mb-3\">\n      <!-- Menu Title -->\n      <div>\n        <cide-ele-input \n          id=\"syme_title\" \n          label=\"Title\" \n          formControlName=\"syme_title\"\n          size=\"sm\">\n        </cide-ele-input>\n      </div>\n      \n      <!-- Menu Type -->\n      <div>\n        <cide-ele-select \n          label=\"Type*\" \n          [options]=\"menuTypeOptions()\" \n          formControlName=\"syme_type\"\n          placeholder=\"Select type\"\n          size=\"sm\">\n        </cide-ele-select>\n      </div>\n      \n      <!-- Icon -->\n      <div>\n        <cide-ele-input \n          id=\"quickIcon\" \n          type=\"text\"\n          label=\"Icon\" \n          formControlName=\"syme_icon\"\n          placeholder=\"Icon name\"\n          size=\"sm\">\n        </cide-ele-input>\n      </div>\n      \n      <!-- Active Status -->\n      <div class=\"tw-flex tw-flex-col tw-justify-end\">\n        <cide-ele-input \n          id=\"quickIsActive\"\n          type=\"checkbox\"\n          label=\"Active\"\n          formControlName=\"syme_isactive\"\n          size=\"sm\">\n        </cide-ele-input>\n      </div>\n    </div>\n    \n    <!-- Second Row -->\n    <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-3 tw-items-end\">\n      <!-- Description -->\n      <div>\n        <cide-ele-textarea \n          id=\"syme_desc\" \n          label=\"Description\" \n          formControlName=\"syme_desc\"\n          placeholder=\"Menu description\"\n          rows=\"2\"\n          size=\"sm\">\n        </cide-ele-textarea>\n      </div>\n      \n      <!-- Path -->\n      <div>\n        <cide-ele-input \n          id=\"quickPath\" \n          type=\"text\"\n          label=\"Path\" \n          formControlName=\"syme_path\"\n          placeholder=\"/path/to/route\"\n          size=\"sm\">\n        </cide-ele-input>\n      </div>\n      \n      <!-- Link -->\n      <div>\n        <cide-ele-input \n          id=\"quickLink\" \n          type=\"text\"\n          label=\"Link\" \n          formControlName=\"syme_link\"\n          placeholder=\"External link\"\n          size=\"sm\">\n        </cide-ele-input>\n      </div>\n      \n      <!-- Action Buttons -->\n      <div class=\"tw-flex tw-flex-col tw-justify-end\">\n        <div class=\"tw-flex tw-space-x-2\">\n          <button \n            cideEleButton \n            variant=\"primary\" \n            size=\"sm\" \n            type=\"submit\"\n            [disabled]=\"quickAddForm.invalid\"\n            class=\"tw-px-2 tw-py-1 tw-w-20\">\n            <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\n            {{ isEditMode() ? 'Update' : 'Add' }}\n          </button>\n          <button \n            cideEleButton \n            variant=\"outline\" \n            size=\"sm\" \n            type=\"button\"\n            (click)=\"resetQuickAddForm()\"\n            class=\"tw-px-2 tw-py-1 tw-w-16\">\n            <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">refresh</cide-ele-icon>\n            Reset\n          </button>\n        </div>\n      </div>\n    </div>\n    </form>\n    </div>\n  </div>\n\n  <!-- Header Section with Filters -->\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\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\">\n\n      <!-- Title -->\n      <div class=\"tw-flex tw-items-center tw-space-x-2\">\n        <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">menu</cide-ele-icon>\n        <h5 class=\"tw-text-base tw-font-medium tw-text-gray-900 tw-m-0\">Menu Management</h5>\n      </div>\n\n      <!-- Actions -->\n      <div\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\">\n        <!-- Actions can be added here if needed -->\n      </div>\n    </div>\n\n    <!-- Error Message -->\n    @if (error()) {\n    <div class=\"tw-mt-4 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\" 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    </div>\n  </div>\n\n  <!-- Main Content Area -->\n  <div class=\"tw-table-row\">\n    <div class=\"tw-table-cell tw-h-full tw-relative\">\n\n  <!-- Debug Information: Uncomment for development -->\n  <!--\n  <div class=\"tw-p-2 tw-bg-yellow-100 tw-text-xs tw-border-b tw-flex tw-justify-between tw-items-center\">\n    <span>Debug: Loading: {{ loading() }} | Items Count: {{ menuItems().length }} | Total: {{ totalItems() }} | Error: {{ error() }}</span>\n    <button cideEleButton variant=\"outline\" size=\"xs\" (click)=\"loadTestData()\" class=\"tw-ml-2\">\n      Load Test Data\n    </button>\n  </div>\n  -->\n  \n  <!-- Data Grid Component -->\n  <div class=\"tw-h-full tw-overflow-auto\">\n    \n    <cide-ele-data-grid \n      [config]=\"gridConfig()\" \n      [templateRenderers]=\"getTemplateRenderers()\"\n      [actionHandlers]=\"actionHandlers\"\n      [serverSidePagination]=\"true\" \n      [totalServerItems]=\"totalItems()\" \n      [currentServerPage]=\"currentPage()\"\n      [currentServerPageSize]=\"pageSize()\" \n      [dragDropEnabled]=\"true\" \n      (gridEvent)=\"onGridEvent($event)\">\n    </cide-ele-data-grid>\n  </div>\n\n\n    </div>\n  </div>\n\n</div>\n\n<!-- \n  Angular Template References for Grid Renderers (Best Practice)\n  \n  These ng-template elements represent the Angular best practice for custom rendering.\n  They provide:\n  - Type safety with template context\n  - Component lifecycle integration\n  - Change detection optimization\n  - Proper event handling\n  - Accessibility features\n  \n  Note: Current data grid uses string renderers for compatibility.\n  Templates are maintained for future component enhancement.\n-->\n\n\n\n<!-- Menu Details Renderer Template -->\n<ng-template #menuDetailsRendererTemplate let-row=\"row\" let-value=\"value\">\n  <div class=\"tw-flex tw-items-center tw-min-w-0\">\n    <!-- Menu Icon -->\n    <div class=\"tw-flex-shrink-0\">\n      <cide-ele-icon \n        class=\"tw-text-gray-400\" \n        size=\"xs\">\n        {{ row.syme_icon || 'folder_open' }}\n      </cide-ele-icon>\n    </div>\n    \n    <!-- Menu Details -->\n    <div class=\"tw-ml-3 tw-min-w-0 tw-flex-1\">\n      <div class=\"tw-text-xs tw-font-medium tw-text-gray-900 tw-truncate\" \n           [title]=\"row.syme_title\">\n        {{ row.syme_title || 'Untitled' }}\n      </div>\n      @if (row.syme_desc) {\n        <div class=\"tw-text-xs tw-text-gray-500 tw-truncate\" \n             [title]=\"row.syme_desc\">\n          {{ row.syme_desc }}\n        </div>\n      }\n    </div>\n  </div>\n</ng-template>\n\n<!-- Menu Type Renderer Template -->\n<ng-template #menuTypeRendererTemplate let-row=\"row\" let-value=\"value\">\n  <span class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-whitespace-nowrap\"\n        [ngClass]=\"getMenuTypeClass(row.syme_type)\">\n    {{ getMenuTypeLabel(row.syme_type) }}\n  </span>\n</ng-template>\n\n<!-- Actions Dropdown Renderer Template -->\n<ng-template #actionsDropdownRendererTemplate let-row=\"row\" let-value=\"value\">\n  <cide-ele-dropdown \n    [items]=\"getDropdownItems(row)\"\n    [config]=\"{ triggerIcon: 'more_vert', triggerSize: 'sm' }\"\n    (itemClick)=\"onDropdownItemClick($event, row)\">\n  </cide-ele-dropdown>\n</ng-template>\n\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: CideEleDataGridComponent, selector: "cide-ele-data-grid", inputs: ["config", "customRenderers", "templateRenderers", "customFormatters", "actionHandlers", "serverSidePagination", "totalServerItems", "currentServerPage", "currentServerPageSize", "dragDropEnabled"], outputs: ["gridEvent"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton]", 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: 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: 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"], outputs: ["ngModelChange", "change", "searchChange"] }, { kind: "component", type: CideTextareaComponent, selector: "cide-ele-textarea", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "minlength", "maxlength", "rows", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput"], outputs: ["ngModelChange"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideEleDropdownComponent, selector: "cide-ele-dropdown", inputs: ["items", "config", "triggerTemplate", "menuTemplate"], outputs: ["itemClick", "dropdownToggle"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: MenuListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: MenuListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cide-core-app-menu-list', standalone: true, imports: [
                         CommonModule,
@@ -1706,6 +1844,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                     ], template: "<!-- Menu List Container -->\n<div class=\"tw-table tw-w-full tw-h-full\">\n\n  <!-- Quick Add Form Section -->\n  <div class=\"tw-table-row tw-h-0\">\n    <div class=\"tw-table-cell tw-px-6 tw-py-4 tw-border-b tw-border-gray-200 tw-bg-white\">\n    <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\n      <div class=\"tw-flex tw-items-center tw-space-x-3\">\n        <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\n        <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-m-0\">{{ isEditMode() ? 'Edit Menu Item' : 'Quick Add Menu Item' }}</h6>\n      </div>\n      @if (selectedParentItem()) {\n        <div class=\"tw-flex tw-items-center tw-space-x-3 tw-bg-blue-50 tw-border tw-border-blue-200 tw-px-4 tw-py-2 tw-rounded-lg\">\n          <cide-ele-icon class=\"tw-text-blue-600 tw-w-4 tw-h-4\">account_tree</cide-ele-icon>\n          <div class=\"tw-flex tw-items-center tw-space-x-2\">\n            <span class=\"tw-text-sm tw-text-blue-600 tw-font-medium\">{{ isEditMode() ? 'Parent:' : 'Creating child under:' }}</span>\n            <span class=\"tw-text-sm tw-text-blue-800 tw-font-semibold\">{{ selectedParentItem()?.syme_title }}</span>\n          </div>\n          <button \n            cideEleButton \n            variant=\"ghost\" \n            size=\"xs\" \n            type=\"button\" \n            (click)=\"clearSelectedParent()\" \n            class=\"tw-text-blue-400 hover:tw-text-blue-600\">\n            <svg class=\"tw-w-4 tw-h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\"/>\n            </svg>\n          </button>\n        </div>\n      }\n    </div>\n    \n    <form [formGroup]=\"quickAddForm\" (ngSubmit)=\"quickAddMenuItem()\">\n    <!-- First Row -->\n    <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-3 tw-mb-3\">\n      <!-- Menu Title -->\n      <div>\n        <cide-ele-input \n          id=\"syme_title\" \n          label=\"Title\" \n          formControlName=\"syme_title\"\n          size=\"sm\">\n        </cide-ele-input>\n      </div>\n      \n      <!-- Menu Type -->\n      <div>\n        <cide-ele-select \n          label=\"Type*\" \n          [options]=\"menuTypeOptions()\" \n          formControlName=\"syme_type\"\n          placeholder=\"Select type\"\n          size=\"sm\">\n        </cide-ele-select>\n      </div>\n      \n      <!-- Icon -->\n      <div>\n        <cide-ele-input \n          id=\"quickIcon\" \n          type=\"text\"\n          label=\"Icon\" \n          formControlName=\"syme_icon\"\n          placeholder=\"Icon name\"\n          size=\"sm\">\n        </cide-ele-input>\n      </div>\n      \n      <!-- Active Status -->\n      <div class=\"tw-flex tw-flex-col tw-justify-end\">\n        <cide-ele-input \n          id=\"quickIsActive\"\n          type=\"checkbox\"\n          label=\"Active\"\n          formControlName=\"syme_isactive\"\n          size=\"sm\">\n        </cide-ele-input>\n      </div>\n    </div>\n    \n    <!-- Second Row -->\n    <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-3 tw-items-end\">\n      <!-- Description -->\n      <div>\n        <cide-ele-textarea \n          id=\"syme_desc\" \n          label=\"Description\" \n          formControlName=\"syme_desc\"\n          placeholder=\"Menu description\"\n          rows=\"2\"\n          size=\"sm\">\n        </cide-ele-textarea>\n      </div>\n      \n      <!-- Path -->\n      <div>\n        <cide-ele-input \n          id=\"quickPath\" \n          type=\"text\"\n          label=\"Path\" \n          formControlName=\"syme_path\"\n          placeholder=\"/path/to/route\"\n          size=\"sm\">\n        </cide-ele-input>\n      </div>\n      \n      <!-- Link -->\n      <div>\n        <cide-ele-input \n          id=\"quickLink\" \n          type=\"text\"\n          label=\"Link\" \n          formControlName=\"syme_link\"\n          placeholder=\"External link\"\n          size=\"sm\">\n        </cide-ele-input>\n      </div>\n      \n      <!-- Action Buttons -->\n      <div class=\"tw-flex tw-flex-col tw-justify-end\">\n        <div class=\"tw-flex tw-space-x-2\">\n          <button \n            cideEleButton \n            variant=\"primary\" \n            size=\"sm\" \n            type=\"submit\"\n            [disabled]=\"quickAddForm.invalid\"\n            class=\"tw-px-2 tw-py-1 tw-w-20\">\n            <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\n            {{ isEditMode() ? 'Update' : 'Add' }}\n          </button>\n          <button \n            cideEleButton \n            variant=\"outline\" \n            size=\"sm\" \n            type=\"button\"\n            (click)=\"resetQuickAddForm()\"\n            class=\"tw-px-2 tw-py-1 tw-w-16\">\n            <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">refresh</cide-ele-icon>\n            Reset\n          </button>\n        </div>\n      </div>\n    </div>\n    </form>\n    </div>\n  </div>\n\n  <!-- Header Section with Filters -->\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\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\">\n\n      <!-- Title -->\n      <div class=\"tw-flex tw-items-center tw-space-x-2\">\n        <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">menu</cide-ele-icon>\n        <h5 class=\"tw-text-base tw-font-medium tw-text-gray-900 tw-m-0\">Menu Management</h5>\n      </div>\n\n      <!-- Actions -->\n      <div\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\">\n        <!-- Actions can be added here if needed -->\n      </div>\n    </div>\n\n    <!-- Error Message -->\n    @if (error()) {\n    <div class=\"tw-mt-4 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\" 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    </div>\n  </div>\n\n  <!-- Main Content Area -->\n  <div class=\"tw-table-row\">\n    <div class=\"tw-table-cell tw-h-full tw-relative\">\n\n  <!-- Debug Information: Uncomment for development -->\n  <!--\n  <div class=\"tw-p-2 tw-bg-yellow-100 tw-text-xs tw-border-b tw-flex tw-justify-between tw-items-center\">\n    <span>Debug: Loading: {{ loading() }} | Items Count: {{ menuItems().length }} | Total: {{ totalItems() }} | Error: {{ error() }}</span>\n    <button cideEleButton variant=\"outline\" size=\"xs\" (click)=\"loadTestData()\" class=\"tw-ml-2\">\n      Load Test Data\n    </button>\n  </div>\n  -->\n  \n  <!-- Data Grid Component -->\n  <div class=\"tw-h-full tw-overflow-auto\">\n    \n    <cide-ele-data-grid \n      [config]=\"gridConfig()\" \n      [templateRenderers]=\"getTemplateRenderers()\"\n      [actionHandlers]=\"actionHandlers\"\n      [serverSidePagination]=\"true\" \n      [totalServerItems]=\"totalItems()\" \n      [currentServerPage]=\"currentPage()\"\n      [currentServerPageSize]=\"pageSize()\" \n      [dragDropEnabled]=\"true\" \n      (gridEvent)=\"onGridEvent($event)\">\n    </cide-ele-data-grid>\n  </div>\n\n\n    </div>\n  </div>\n\n</div>\n\n<!-- \n  Angular Template References for Grid Renderers (Best Practice)\n  \n  These ng-template elements represent the Angular best practice for custom rendering.\n  They provide:\n  - Type safety with template context\n  - Component lifecycle integration\n  - Change detection optimization\n  - Proper event handling\n  - Accessibility features\n  \n  Note: Current data grid uses string renderers for compatibility.\n  Templates are maintained for future component enhancement.\n-->\n\n\n\n<!-- Menu Details Renderer Template -->\n<ng-template #menuDetailsRendererTemplate let-row=\"row\" let-value=\"value\">\n  <div class=\"tw-flex tw-items-center tw-min-w-0\">\n    <!-- Menu Icon -->\n    <div class=\"tw-flex-shrink-0\">\n      <cide-ele-icon \n        class=\"tw-text-gray-400\" \n        size=\"xs\">\n        {{ row.syme_icon || 'folder_open' }}\n      </cide-ele-icon>\n    </div>\n    \n    <!-- Menu Details -->\n    <div class=\"tw-ml-3 tw-min-w-0 tw-flex-1\">\n      <div class=\"tw-text-xs tw-font-medium tw-text-gray-900 tw-truncate\" \n           [title]=\"row.syme_title\">\n        {{ row.syme_title || 'Untitled' }}\n      </div>\n      @if (row.syme_desc) {\n        <div class=\"tw-text-xs tw-text-gray-500 tw-truncate\" \n             [title]=\"row.syme_desc\">\n          {{ row.syme_desc }}\n        </div>\n      }\n    </div>\n  </div>\n</ng-template>\n\n<!-- Menu Type Renderer Template -->\n<ng-template #menuTypeRendererTemplate let-row=\"row\" let-value=\"value\">\n  <span class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-whitespace-nowrap\"\n        [ngClass]=\"getMenuTypeClass(row.syme_type)\">\n    {{ getMenuTypeLabel(row.syme_type) }}\n  </span>\n</ng-template>\n\n<!-- Actions Dropdown Renderer Template -->\n<ng-template #actionsDropdownRendererTemplate let-row=\"row\" let-value=\"value\">\n  <cide-ele-dropdown \n    [items]=\"getDropdownItems(row)\"\n    [config]=\"{ triggerIcon: 'more_vert', triggerSize: 'sm' }\"\n    (itemClick)=\"onDropdownItemClick($event, row)\">\n  </cide-ele-dropdown>\n</ng-template>\n\n" }]
         }], ctorParameters: () => [] });
 
+var menuList_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    MenuListComponent: MenuListComponent
+});
+
 /**
  * Menu Type Options
  * Available menu types for selection
@@ -1723,10 +1866,11 @@ const MENU_TYPES = [
 // Components
 
 class DepartmentManagementService {
+    http;
+    departmentListSubject = new BehaviorSubject([]);
+    departmentList$ = this.departmentListSubject.asObservable();
     constructor(http) {
         this.http = http;
-        this.departmentListSubject = new BehaviorSubject([]);
-        this.departmentList$ = this.departmentListSubject.asObservable();
         console.log('DepartmentManagementService initialized - using real API');
     }
     /**
@@ -1893,10 +2037,10 @@ class DepartmentManagementService {
         console.error('Department Management Service Error:', errorMessage);
         return throwError(() => new Error(errorMessage));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DepartmentManagementService, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DepartmentManagementService, providedIn: 'root' }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: DepartmentManagementService, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: DepartmentManagementService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DepartmentManagementService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: DepartmentManagementService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -1904,182 +2048,182 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
         }], ctorParameters: () => [{ type: i1.HttpClient }] });
 
 class DepartmentListComponent {
+    // Dependency injection
+    destroyRef = inject(DestroyRef);
+    departmentService = inject(DepartmentManagementService);
+    appState = inject(AppStateHelperService);
+    fb = inject(NonNullableFormBuilder);
+    router = inject(Router);
+    confirmationService = inject(ConfirmationService);
+    notificationService = inject(NotificationService);
+    // Modern ViewChild signals for template renderers (Angular 20 approach)
+    departmentDetailsRendererTemplate = viewChild.required('departmentDetailsRendererTemplate');
+    departmentStatusRendererTemplate = viewChild.required('departmentStatusRendererTemplate');
+    actionsDropdownRendererTemplate = viewChild.required('actionsDropdownRendererTemplate');
+    // Make Math available in template
+    Math = Math;
+    // Signals for reactive state management
+    departments = signal([], ...(ngDevMode ? [{ debugName: "departments" }] : []));
+    loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+    error = signal(null, ...(ngDevMode ? [{ debugName: "error" }] : []));
+    selectedItems = signal([], ...(ngDevMode ? [{ debugName: "selectedItems" }] : []));
+    searchTerm = signal('', ...(ngDevMode ? [{ debugName: "searchTerm" }] : []));
+    // Modern reactive forms with signals
+    selectedParentDepartment = signal(null, ...(ngDevMode ? [{ debugName: "selectedParentDepartment" }] : []));
+    // Retrieved department data
+    retrievedDepartment = signal(null, ...(ngDevMode ? [{ debugName: "retrievedDepartment" }] : []));
+    // Edit mode flag
+    isEditMode = signal(false, ...(ngDevMode ? [{ debugName: "isEditMode" }] : []));
+    // Server-side pagination state
+    currentPage = signal(1, ...(ngDevMode ? [{ debugName: "currentPage" }] : []));
+    pageSize = signal(10, ...(ngDevMode ? [{ debugName: "pageSize" }] : []));
+    totalItems = signal(0, ...(ngDevMode ? [{ debugName: "totalItems" }] : []));
+    // Modern reactive form with typed controls
+    quickAddForm = this.fb.group({
+        sydept_code: this.fb.control('', []),
+        sydept_name: this.fb.control('', []),
+        sydept_description: this.fb.control('', []),
+        sydept_isactive: this.fb.control(true, []),
+        sydept_department_id_sydept: this.fb.control(''),
+        sydept_entity_id_syen: this.fb.control(this.appState.getActiveEntityId() || '', [])
+    });
+    // Grid configuration signal
+    gridConfig = signal({
+        id: 'department-list-grid',
+        title: '',
+        subtitle: '',
+        columns: [
+            {
+                key: 'details',
+                header: 'Department',
+                type: 'custom',
+                width: 'auto',
+                truncate: true,
+                align: 'left',
+                renderer: 'departmentDetailsRenderer'
+            },
+            {
+                key: 'sydept_code',
+                header: 'Code',
+                type: 'text',
+                width: '120px',
+                truncate: true,
+                align: 'left'
+            },
+            {
+                key: 'sydept_isactive',
+                header: 'Status',
+                type: 'custom',
+                width: '100px',
+                truncate: false,
+                align: 'center',
+                renderer: 'departmentStatusRenderer'
+            },
+            {
+                key: 'actions',
+                header: '',
+                type: 'custom',
+                width: '60px',
+                truncate: false,
+                align: 'center',
+                renderer: 'actionsDropdownRenderer'
+            }
+        ],
+        data: [],
+        tree: {
+            enabled: true,
+            primaryKey: '_id',
+            foreignKey: 'sydept_department_id_sydept',
+            childrenKey: 'children',
+            levelKey: 'level',
+            expandedKey: 'expanded',
+            hasChildrenKey: 'hasChildren'
+        },
+        trackBy: '_id',
+        pagination: {
+            enabled: false,
+            pageSize: 10,
+            pageSizeOptions: [10, 25, 50, 100],
+            showQuickJump: true,
+            showPageInfo: true,
+            showRefresh: true
+        },
+        search: {
+            enabled: true,
+            placeholder: 'Search departments...',
+            searchableColumns: ['sydept_name', 'sydept_code', 'sydept_description'],
+            debounceMs: 300
+        },
+        loading: {
+            useDefer: true,
+            skeletonRows: 5,
+            showOverlay: false
+        },
+        scroll: {
+            enabled: true,
+            maxHeight: '',
+            minHeight: '',
+            stickyHeader: true,
+            virtualScroll: false,
+            rowHeight: 50
+        },
+        responsive: true,
+        striped: false,
+        bordered: true,
+        compact: false,
+        tableClass: 'tw-table-fixed tw-w-full tw-rounded-none',
+        onRefresh: 'onDepartmentRefresh'
+    }, ...(ngDevMode ? [{ debugName: "gridConfig" }] : []));
+    // Template renderers using Angular best practices
+    templateRenderers = computed(() => ({
+        departmentDetailsRenderer: this.departmentDetailsRendererTemplate(),
+        departmentStatusRenderer: this.departmentStatusRendererTemplate(),
+        actionsDropdownRenderer: this.actionsDropdownRendererTemplate()
+    }), ...(ngDevMode ? [{ debugName: "templateRenderers" }] : []));
     /**
      * Get template renderers for data grid
      */
     getTemplateRenderers() {
         return this.templateRenderers();
     }
+    // Mixed renderers (templates + string functions)
+    customRenderers = computed(() => ({
+        ...this.templateRenderers()
+    }), ...(ngDevMode ? [{ debugName: "customRenderers" }] : []));
     /**
      * Get custom renderers adapted for current data grid compatibility
      */
     getCustomRenderers() {
         return {};
     }
+    // Action handlers for grid actions
+    actionHandlers = {
+        onEditDepartment: (row) => this.editDepartment(row._id || ''),
+        onToggleDepartment: (row) => this.toggleDepartmentStatus(row._id || ''),
+        onDeleteDepartment: (row) => this.deleteDepartment(row._id || ''),
+        onDepartmentRowClick: (row) => this.onDepartmentRowClick(row),
+        onDepartmentRefresh: () => this.onDepartmentRefresh(),
+        onAddChild: (row) => this.onAddChild(row)
+    };
+    // Computed properties
+    filteredItems = computed(() => {
+        const items = this.departments();
+        const search = this.searchTerm()?.toLowerCase();
+        if (!search)
+            return items;
+        return items.filter(item => {
+            return item.sydept_name?.toLowerCase().includes(search) ||
+                item.sydept_code?.toLowerCase().includes(search) ||
+                item.sydept_description?.toLowerCase().includes(search);
+        });
+    }, ...(ngDevMode ? [{ debugName: "filteredItems" }] : []));
+    hasSelection = computed(() => this.selectedItems().length > 0, ...(ngDevMode ? [{ debugName: "hasSelection" }] : []));
+    // Pagination computed properties
+    totalPages = computed(() => Math.ceil(this.totalItems() / this.pageSize()), ...(ngDevMode ? [{ debugName: "totalPages" }] : []));
+    hasNextPage = computed(() => this.currentPage() < this.totalPages(), ...(ngDevMode ? [{ debugName: "hasNextPage" }] : []));
+    hasPreviousPage = computed(() => this.currentPage() > 1, ...(ngDevMode ? [{ debugName: "hasPreviousPage" }] : []));
     // Modern constructor with effects for initialization
     constructor() {
-        // Dependency injection
-        this.destroyRef = inject(DestroyRef);
-        this.departmentService = inject(DepartmentManagementService);
-        this.appState = inject(AppStateHelperService);
-        this.fb = inject(NonNullableFormBuilder);
-        this.router = inject(Router);
-        this.confirmationService = inject(ConfirmationService);
-        this.notificationService = inject(NotificationService);
-        // Modern ViewChild signals for template renderers (Angular 20 approach)
-        this.departmentDetailsRendererTemplate = viewChild.required('departmentDetailsRendererTemplate');
-        this.departmentStatusRendererTemplate = viewChild.required('departmentStatusRendererTemplate');
-        this.actionsDropdownRendererTemplate = viewChild.required('actionsDropdownRendererTemplate');
-        // Make Math available in template
-        this.Math = Math;
-        // Signals for reactive state management
-        this.departments = signal([]);
-        this.loading = signal(false);
-        this.error = signal(null);
-        this.selectedItems = signal([]);
-        this.searchTerm = signal('');
-        // Modern reactive forms with signals
-        this.selectedParentDepartment = signal(null);
-        // Retrieved department data
-        this.retrievedDepartment = signal(null);
-        // Edit mode flag
-        this.isEditMode = signal(false);
-        // Server-side pagination state
-        this.currentPage = signal(1);
-        this.pageSize = signal(10);
-        this.totalItems = signal(0);
-        // Modern reactive form with typed controls
-        this.quickAddForm = this.fb.group({
-            sydept_code: this.fb.control('', []),
-            sydept_name: this.fb.control('', []),
-            sydept_description: this.fb.control('', []),
-            sydept_isactive: this.fb.control(true, []),
-            sydept_department_id_sydept: this.fb.control(''),
-            sydept_entity_id_syen: this.fb.control(this.appState.getActiveEntityId() || '', [])
-        });
-        // Grid configuration signal
-        this.gridConfig = signal({
-            id: 'department-list-grid',
-            title: '',
-            subtitle: '',
-            columns: [
-                {
-                    key: 'details',
-                    header: 'Department',
-                    type: 'custom',
-                    width: 'auto',
-                    truncate: true,
-                    align: 'left',
-                    renderer: 'departmentDetailsRenderer'
-                },
-                {
-                    key: 'sydept_code',
-                    header: 'Code',
-                    type: 'text',
-                    width: '120px',
-                    truncate: true,
-                    align: 'left'
-                },
-                {
-                    key: 'sydept_isactive',
-                    header: 'Status',
-                    type: 'custom',
-                    width: '100px',
-                    truncate: false,
-                    align: 'center',
-                    renderer: 'departmentStatusRenderer'
-                },
-                {
-                    key: 'actions',
-                    header: '',
-                    type: 'custom',
-                    width: '60px',
-                    truncate: false,
-                    align: 'center',
-                    renderer: 'actionsDropdownRenderer'
-                }
-            ],
-            data: [],
-            tree: {
-                enabled: true,
-                primaryKey: '_id',
-                foreignKey: 'sydept_department_id_sydept',
-                childrenKey: 'children',
-                levelKey: 'level',
-                expandedKey: 'expanded',
-                hasChildrenKey: 'hasChildren'
-            },
-            trackBy: '_id',
-            pagination: {
-                enabled: false,
-                pageSize: 10,
-                pageSizeOptions: [10, 25, 50, 100],
-                showQuickJump: true,
-                showPageInfo: true,
-                showRefresh: true
-            },
-            search: {
-                enabled: true,
-                placeholder: 'Search departments...',
-                searchableColumns: ['sydept_name', 'sydept_code', 'sydept_description'],
-                debounceMs: 300
-            },
-            loading: {
-                useDefer: true,
-                skeletonRows: 5,
-                showOverlay: false
-            },
-            scroll: {
-                enabled: true,
-                maxHeight: '',
-                minHeight: '',
-                stickyHeader: true,
-                virtualScroll: false,
-                rowHeight: 50
-            },
-            responsive: true,
-            striped: false,
-            bordered: true,
-            compact: false,
-            tableClass: 'tw-table-fixed tw-w-full tw-rounded-none',
-            onRefresh: 'onDepartmentRefresh'
-        });
-        // Template renderers using Angular best practices
-        this.templateRenderers = computed(() => ({
-            departmentDetailsRenderer: this.departmentDetailsRendererTemplate(),
-            departmentStatusRenderer: this.departmentStatusRendererTemplate(),
-            actionsDropdownRenderer: this.actionsDropdownRendererTemplate()
-        }));
-        // Mixed renderers (templates + string functions)
-        this.customRenderers = computed(() => ({
-            ...this.templateRenderers()
-        }));
-        // Action handlers for grid actions
-        this.actionHandlers = {
-            onEditDepartment: (row) => this.editDepartment(row._id || ''),
-            onToggleDepartment: (row) => this.toggleDepartmentStatus(row._id || ''),
-            onDeleteDepartment: (row) => this.deleteDepartment(row._id || ''),
-            onDepartmentRowClick: (row) => this.onDepartmentRowClick(row),
-            onDepartmentRefresh: () => this.onDepartmentRefresh(),
-            onAddChild: (row) => this.onAddChild(row)
-        };
-        // Computed properties
-        this.filteredItems = computed(() => {
-            const items = this.departments();
-            const search = this.searchTerm()?.toLowerCase();
-            if (!search)
-                return items;
-            return items.filter(item => {
-                return item.sydept_name?.toLowerCase().includes(search) ||
-                    item.sydept_code?.toLowerCase().includes(search) ||
-                    item.sydept_description?.toLowerCase().includes(search);
-            });
-        });
-        this.hasSelection = computed(() => this.selectedItems().length > 0);
-        // Pagination computed properties
-        this.totalPages = computed(() => Math.ceil(this.totalItems() / this.pageSize()));
-        this.hasNextPage = computed(() => this.currentPage() < this.totalPages());
-        this.hasPreviousPage = computed(() => this.currentPage() > 1);
         this.initializeComponent();
         this.destroyRef.onDestroy(() => {
             this.cleanupEventListeners();
@@ -2641,10 +2785,10 @@ class DepartmentListComponent {
     trackByItemId(index, item) {
         return item._id || '';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DepartmentListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: DepartmentListComponent, isStandalone: true, selector: "cide-core-app-department-list", viewQueries: [{ propertyName: "departmentDetailsRendererTemplate", first: true, predicate: ["departmentDetailsRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "departmentStatusRendererTemplate", first: true, predicate: ["departmentStatusRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "actionsDropdownRendererTemplate", first: true, predicate: ["actionsDropdownRendererTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Department List Container -->\n<div class=\"tw-table tw-w-full tw-h-full\">\n\n<!-- Global Notifications -->\n<cide-ele-global-notifications></cide-ele-global-notifications>\n\n  <!-- Quick Add Form Section -->\n  <div class=\"tw-table-row tw-h-0\">\n    <div class=\"tw-table-cell tw-px-6 tw-py-4 tw-border-b tw-border-gray-200 tw-bg-white\">\n    <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-0\">\n      <div class=\"tw-flex tw-items-center tw-space-x-3 tw-mb-3\">\n        <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\n        <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-m-0\">{{ isEditMode() ? 'Edit Department' : 'Quick Add Department' }}</h6>\n      </div>\n      @if (selectedParentDepartment()) {\n        <div class=\"tw-flex tw-items-center tw-space-x-3 tw-bg-blue-50 tw-border tw-border-blue-200 tw-px-4 tw-py-1 tw-rounded-lg\">\n          <cide-ele-icon class=\"tw-text-blue-600 tw-w-4 tw-h-4\">account_tree</cide-ele-icon>\n          <div class=\"tw-flex tw-items-center tw-space-x-2\">\n            <span class=\"tw-text-sm tw-text-blue-600 tw-font-medium\">{{ isEditMode() ? 'Parent:' : 'Creating child under:' }}</span>\n            <span class=\"tw-text-sm tw-text-blue-800 tw-font-semibold\">{{ selectedParentDepartment()?.sydept_name }}</span>\n          </div>\n          <button \n            cideEleButton \n            variant=\"ghost\" \n            size=\"xs\" \n            type=\"button\" \n            (click)=\"clearSelectedParent()\" \n            class=\"tw-text-blue-400 hover:tw-text-blue-600\">\n            <svg class=\"tw-w-4 tw-h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\"/>\n            </svg>\n          </button>\n        </div>\n      }\n    </div>\n    \n    <form [formGroup]=\"quickAddForm\" (ngSubmit)=\"quickAddDepartment()\">\n    <!-- First Row -->\n    <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-3 tw-mb-3\">\n      <!-- Department Code -->\n      <div>\n        <cide-ele-input \n          id=\"sydept_code\" \n          label=\"Code*\" \n          formControlName=\"sydept_code\"\n          placeholder=\"DEPT001\"\n          size=\"sm\">\n        </cide-ele-input>\n      </div>\n      \n      <!-- Department Name -->\n      <div>\n        <cide-ele-input \n          id=\"sydept_name\" \n          label=\"Name*\" \n          formControlName=\"sydept_name\"\n          placeholder=\"Department name\"\n          size=\"sm\">\n        </cide-ele-input>\n      </div>\n      \n\n      \n      <!-- Active Status -->\n      <div class=\"tw-flex tw-flex-col tw-justify-end\">\n        <cide-ele-input \n          id=\"sydept_isactive\"\n          type=\"checkbox\"\n          label=\"Active\"\n          formControlName=\"sydept_isactive\"\n          size=\"sm\">\n        </cide-ele-input>\n      </div>\n    </div>\n    \n    <!-- Second Row -->\n    <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-3 tw-items-end\">\n      <!-- Description -->\n      <div>\n        <cide-ele-textarea \n          id=\"sydept_description\" \n          label=\"Description\" \n          formControlName=\"sydept_description\"\n          placeholder=\"Department description\"\n          rows=\"2\"\n          size=\"sm\">\n        </cide-ele-textarea>\n      </div>\n      \n\n      \n      <!-- Action Buttons -->\n      <div class=\"tw-flex tw-flex-col tw-justify-end\">\n        <div class=\"tw-flex tw-space-x-2\">\n          <button \n            cideEleButton \n            variant=\"primary\" \n            size=\"sm\" \n            type=\"submit\"\n            [disabled]=\"quickAddForm.invalid\"\n            class=\"tw-px-2 tw-py-1 tw-w-20\">\n            <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\n            {{ isEditMode() ? 'Update' : 'Add' }}\n          </button>\n          <button \n            cideEleButton \n            variant=\"outline\" \n            size=\"sm\" \n            type=\"button\"\n            (click)=\"resetQuickAddForm()\"\n            class=\"tw-px-2 tw-py-1 tw-w-16\">\n            <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">refresh</cide-ele-icon>\n            Reset\n          </button>\n        </div>\n      </div>\n    </div>\n    </form>\n    </div>\n  </div>\n\n  <!-- Header Section with Filters -->\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\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\">\n\n      <!-- Title -->\n      <div class=\"tw-flex tw-items-center tw-space-x-2\">\n        <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">business</cide-ele-icon>\n        <h5 class=\"tw-text-base tw-font-medium tw-text-gray-900 tw-m-0\">Department Management</h5>\n      </div>\n\n      <!-- Actions -->\n      <div\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\">\n        <!-- Search functionality is handled by the data grid -->\n      </div>\n    </div>\n\n    <!-- Error Message -->\n    @if (error()) {\n    <div class=\"tw-mt-4 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\" 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    </div>\n  </div>\n\n  <!-- Main Content Area -->\n  <div class=\"tw-table-row\">\n    <div class=\"tw-table-cell tw-h-full tw-relative\">\n  \n  <!-- Data Grid Component -->\n  <div class=\"tw-h-full tw-overflow-auto\">\n    \n    <cide-ele-data-grid \n      [config]=\"gridConfig()\" \n      [templateRenderers]=\"getTemplateRenderers()\"\n      [actionHandlers]=\"actionHandlers\"\n      [serverSidePagination]=\"true\" \n      [totalServerItems]=\"totalItems()\" \n      [currentServerPage]=\"currentPage()\"\n      [currentServerPageSize]=\"pageSize()\" \n      (gridEvent)=\"onGridEvent($event)\">\n    </cide-ele-data-grid>\n  </div>\n\n    </div>\n  </div>\n\n</div>\n\n<!-- Department Details Renderer Template -->\n<ng-template #departmentDetailsRendererTemplate let-row=\"row\" let-value=\"value\">\n  <div class=\"tw-flex tw-items-center tw-min-w-0\">\n    <!-- Department Icon -->\n    <div class=\"tw-flex-shrink-0\">\n      <cide-ele-icon \n        class=\"tw-text-gray-400\" \n        size=\"xs\">\n        business\n      </cide-ele-icon>\n    </div>\n    \n    <!-- Department Details -->\n    <div class=\"tw-ml-3 tw-min-w-0 tw-flex-1\">\n      <div class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-truncate\" \n           [title]=\"row.sydept_name\">\n        {{ row.sydept_name || 'Untitled' }}\n      </div>\n      @if (row.sydept_description) {\n        <div class=\"tw-text-xs tw-text-gray-500 tw-truncate\" \n             [title]=\"row.sydept_description\">\n          {{ row.sydept_description }}\n        </div>\n      }\n    </div>\n  </div>\n</ng-template>\n\n<!-- Department Status Renderer Template -->\n<ng-template #departmentStatusRendererTemplate let-row=\"row\" let-value=\"value\">\n  <span class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-whitespace-nowrap\"\n        [ngClass]=\"getStatusClass(row.sydept_isactive)\">\n    {{ getStatusDisplay(row.sydept_isactive) }}\n  </span>\n</ng-template>\n\n<!-- Actions Dropdown Renderer Template -->\n<ng-template #actionsDropdownRendererTemplate let-row=\"row\" let-value=\"value\">\n  <cide-ele-dropdown \n    [items]=\"getDropdownItems(row)\"\n    [config]=\"{ triggerIcon: 'more_vert', triggerSize: 'sm' }\"\n    (itemClick)=\"onDropdownItemClick($event, row)\">\n  </cide-ele-dropdown>\n</ng-template> ", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: CideEleDataGridComponent, selector: "cide-ele-data-grid", inputs: ["config", "customRenderers", "templateRenderers", "customFormatters", "actionHandlers", "serverSidePagination", "totalServerItems", "currentServerPage", "currentServerPageSize", "dragDropEnabled"], outputs: ["gridEvent"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton]", 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: 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: CideTextareaComponent, selector: "cide-ele-textarea", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "minlength", "maxlength", "rows", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput"], outputs: ["ngModelChange"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideEleDropdownComponent, selector: "cide-ele-dropdown", inputs: ["items", "config", "triggerTemplate", "menuTemplate"], outputs: ["itemClick", "dropdownToggle"] }, { kind: "component", type: CideEleGlobalNotificationsComponent, selector: "cide-ele-global-notifications" }] }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: DepartmentListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: DepartmentListComponent, isStandalone: true, selector: "cide-core-app-department-list", viewQueries: [{ propertyName: "departmentDetailsRendererTemplate", first: true, predicate: ["departmentDetailsRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "departmentStatusRendererTemplate", first: true, predicate: ["departmentStatusRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "actionsDropdownRendererTemplate", first: true, predicate: ["actionsDropdownRendererTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Department List Container -->\n<div class=\"tw-table tw-w-full tw-h-full\">\n\n<!-- Global Notifications -->\n<cide-ele-global-notifications></cide-ele-global-notifications>\n\n  <!-- Quick Add Form Section -->\n  <div class=\"tw-table-row tw-h-0\">\n    <div class=\"tw-table-cell tw-px-6 tw-py-4 tw-border-b tw-border-gray-200 tw-bg-white\">\n    <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-0\">\n      <div class=\"tw-flex tw-items-center tw-space-x-3 tw-mb-3\">\n        <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\n        <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-m-0\">{{ isEditMode() ? 'Edit Department' : 'Quick Add Department' }}</h6>\n      </div>\n      @if (selectedParentDepartment()) {\n        <div class=\"tw-flex tw-items-center tw-space-x-3 tw-bg-blue-50 tw-border tw-border-blue-200 tw-px-4 tw-py-1 tw-rounded-lg\">\n          <cide-ele-icon class=\"tw-text-blue-600 tw-w-4 tw-h-4\">account_tree</cide-ele-icon>\n          <div class=\"tw-flex tw-items-center tw-space-x-2\">\n            <span class=\"tw-text-sm tw-text-blue-600 tw-font-medium\">{{ isEditMode() ? 'Parent:' : 'Creating child under:' }}</span>\n            <span class=\"tw-text-sm tw-text-blue-800 tw-font-semibold\">{{ selectedParentDepartment()?.sydept_name }}</span>\n          </div>\n          <button \n            cideEleButton \n            variant=\"ghost\" \n            size=\"xs\" \n            type=\"button\" \n            (click)=\"clearSelectedParent()\" \n            class=\"tw-text-blue-400 hover:tw-text-blue-600\">\n            <svg class=\"tw-w-4 tw-h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\"/>\n            </svg>\n          </button>\n        </div>\n      }\n    </div>\n    \n    <form [formGroup]=\"quickAddForm\" (ngSubmit)=\"quickAddDepartment()\">\n    <!-- First Row -->\n    <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-3 tw-mb-3\">\n      <!-- Department Code -->\n      <div>\n        <cide-ele-input \n          id=\"sydept_code\" \n          label=\"Code*\" \n          formControlName=\"sydept_code\"\n          placeholder=\"DEPT001\"\n          size=\"sm\">\n        </cide-ele-input>\n      </div>\n      \n      <!-- Department Name -->\n      <div>\n        <cide-ele-input \n          id=\"sydept_name\" \n          label=\"Name*\" \n          formControlName=\"sydept_name\"\n          placeholder=\"Department name\"\n          size=\"sm\">\n        </cide-ele-input>\n      </div>\n      \n\n      \n      <!-- Active Status -->\n      <div class=\"tw-flex tw-flex-col tw-justify-end\">\n        <cide-ele-input \n          id=\"sydept_isactive\"\n          type=\"checkbox\"\n          label=\"Active\"\n          formControlName=\"sydept_isactive\"\n          size=\"sm\">\n        </cide-ele-input>\n      </div>\n    </div>\n    \n    <!-- Second Row -->\n    <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-3 tw-items-end\">\n      <!-- Description -->\n      <div>\n        <cide-ele-textarea \n          id=\"sydept_description\" \n          label=\"Description\" \n          formControlName=\"sydept_description\"\n          placeholder=\"Department description\"\n          rows=\"2\"\n          size=\"sm\">\n        </cide-ele-textarea>\n      </div>\n      \n\n      \n      <!-- Action Buttons -->\n      <div class=\"tw-flex tw-flex-col tw-justify-end\">\n        <div class=\"tw-flex tw-space-x-2\">\n          <button \n            cideEleButton \n            variant=\"primary\" \n            size=\"sm\" \n            type=\"submit\"\n            [disabled]=\"quickAddForm.invalid\"\n            class=\"tw-px-2 tw-py-1 tw-w-20\">\n            <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\n            {{ isEditMode() ? 'Update' : 'Add' }}\n          </button>\n          <button \n            cideEleButton \n            variant=\"outline\" \n            size=\"sm\" \n            type=\"button\"\n            (click)=\"resetQuickAddForm()\"\n            class=\"tw-px-2 tw-py-1 tw-w-16\">\n            <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">refresh</cide-ele-icon>\n            Reset\n          </button>\n        </div>\n      </div>\n    </div>\n    </form>\n    </div>\n  </div>\n\n  <!-- Header Section with Filters -->\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\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\">\n\n      <!-- Title -->\n      <div class=\"tw-flex tw-items-center tw-space-x-2\">\n        <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">business</cide-ele-icon>\n        <h5 class=\"tw-text-base tw-font-medium tw-text-gray-900 tw-m-0\">Department Management</h5>\n      </div>\n\n      <!-- Actions -->\n      <div\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\">\n        <!-- Search functionality is handled by the data grid -->\n      </div>\n    </div>\n\n    <!-- Error Message -->\n    @if (error()) {\n    <div class=\"tw-mt-4 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\" 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    </div>\n  </div>\n\n  <!-- Main Content Area -->\n  <div class=\"tw-table-row\">\n    <div class=\"tw-table-cell tw-h-full tw-relative\">\n  \n  <!-- Data Grid Component -->\n  <div class=\"tw-h-full tw-overflow-auto\">\n    \n    <cide-ele-data-grid \n      [config]=\"gridConfig()\" \n      [templateRenderers]=\"getTemplateRenderers()\"\n      [actionHandlers]=\"actionHandlers\"\n      [serverSidePagination]=\"true\" \n      [totalServerItems]=\"totalItems()\" \n      [currentServerPage]=\"currentPage()\"\n      [currentServerPageSize]=\"pageSize()\" \n      (gridEvent)=\"onGridEvent($event)\">\n    </cide-ele-data-grid>\n  </div>\n\n    </div>\n  </div>\n\n</div>\n\n<!-- Department Details Renderer Template -->\n<ng-template #departmentDetailsRendererTemplate let-row=\"row\" let-value=\"value\">\n  <div class=\"tw-flex tw-items-center tw-min-w-0\">\n    <!-- Department Icon -->\n    <div class=\"tw-flex-shrink-0\">\n      <cide-ele-icon \n        class=\"tw-text-gray-400\" \n        size=\"xs\">\n        business\n      </cide-ele-icon>\n    </div>\n    \n    <!-- Department Details -->\n    <div class=\"tw-ml-3 tw-min-w-0 tw-flex-1\">\n      <div class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-truncate\" \n           [title]=\"row.sydept_name\">\n        {{ row.sydept_name || 'Untitled' }}\n      </div>\n      @if (row.sydept_description) {\n        <div class=\"tw-text-xs tw-text-gray-500 tw-truncate\" \n             [title]=\"row.sydept_description\">\n          {{ row.sydept_description }}\n        </div>\n      }\n    </div>\n  </div>\n</ng-template>\n\n<!-- Department Status Renderer Template -->\n<ng-template #departmentStatusRendererTemplate let-row=\"row\" let-value=\"value\">\n  <span class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-whitespace-nowrap\"\n        [ngClass]=\"getStatusClass(row.sydept_isactive)\">\n    {{ getStatusDisplay(row.sydept_isactive) }}\n  </span>\n</ng-template>\n\n<!-- Actions Dropdown Renderer Template -->\n<ng-template #actionsDropdownRendererTemplate let-row=\"row\" let-value=\"value\">\n  <cide-ele-dropdown \n    [items]=\"getDropdownItems(row)\"\n    [config]=\"{ triggerIcon: 'more_vert', triggerSize: 'sm' }\"\n    (itemClick)=\"onDropdownItemClick($event, row)\">\n  </cide-ele-dropdown>\n</ng-template> ", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: CideEleDataGridComponent, selector: "cide-ele-data-grid", inputs: ["config", "customRenderers", "templateRenderers", "customFormatters", "actionHandlers", "serverSidePagination", "totalServerItems", "currentServerPage", "currentServerPageSize", "dragDropEnabled"], outputs: ["gridEvent"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton]", 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: 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: CideTextareaComponent, selector: "cide-ele-textarea", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "minlength", "maxlength", "rows", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput"], outputs: ["ngModelChange"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideEleDropdownComponent, selector: "cide-ele-dropdown", inputs: ["items", "config", "triggerTemplate", "menuTemplate"], outputs: ["itemClick", "dropdownToggle"] }, { kind: "component", type: CideEleGlobalNotificationsComponent, selector: "cide-ele-global-notifications" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DepartmentListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: DepartmentListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cide-core-app-department-list', standalone: true, imports: [
                         CommonModule,
@@ -2660,14 +2804,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                     ], template: "<!-- Department List Container -->\n<div class=\"tw-table tw-w-full tw-h-full\">\n\n<!-- Global Notifications -->\n<cide-ele-global-notifications></cide-ele-global-notifications>\n\n  <!-- Quick Add Form Section -->\n  <div class=\"tw-table-row tw-h-0\">\n    <div class=\"tw-table-cell tw-px-6 tw-py-4 tw-border-b tw-border-gray-200 tw-bg-white\">\n    <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-0\">\n      <div class=\"tw-flex tw-items-center tw-space-x-3 tw-mb-3\">\n        <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\n        <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-m-0\">{{ isEditMode() ? 'Edit Department' : 'Quick Add Department' }}</h6>\n      </div>\n      @if (selectedParentDepartment()) {\n        <div class=\"tw-flex tw-items-center tw-space-x-3 tw-bg-blue-50 tw-border tw-border-blue-200 tw-px-4 tw-py-1 tw-rounded-lg\">\n          <cide-ele-icon class=\"tw-text-blue-600 tw-w-4 tw-h-4\">account_tree</cide-ele-icon>\n          <div class=\"tw-flex tw-items-center tw-space-x-2\">\n            <span class=\"tw-text-sm tw-text-blue-600 tw-font-medium\">{{ isEditMode() ? 'Parent:' : 'Creating child under:' }}</span>\n            <span class=\"tw-text-sm tw-text-blue-800 tw-font-semibold\">{{ selectedParentDepartment()?.sydept_name }}</span>\n          </div>\n          <button \n            cideEleButton \n            variant=\"ghost\" \n            size=\"xs\" \n            type=\"button\" \n            (click)=\"clearSelectedParent()\" \n            class=\"tw-text-blue-400 hover:tw-text-blue-600\">\n            <svg class=\"tw-w-4 tw-h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\"/>\n            </svg>\n          </button>\n        </div>\n      }\n    </div>\n    \n    <form [formGroup]=\"quickAddForm\" (ngSubmit)=\"quickAddDepartment()\">\n    <!-- First Row -->\n    <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-3 tw-mb-3\">\n      <!-- Department Code -->\n      <div>\n        <cide-ele-input \n          id=\"sydept_code\" \n          label=\"Code*\" \n          formControlName=\"sydept_code\"\n          placeholder=\"DEPT001\"\n          size=\"sm\">\n        </cide-ele-input>\n      </div>\n      \n      <!-- Department Name -->\n      <div>\n        <cide-ele-input \n          id=\"sydept_name\" \n          label=\"Name*\" \n          formControlName=\"sydept_name\"\n          placeholder=\"Department name\"\n          size=\"sm\">\n        </cide-ele-input>\n      </div>\n      \n\n      \n      <!-- Active Status -->\n      <div class=\"tw-flex tw-flex-col tw-justify-end\">\n        <cide-ele-input \n          id=\"sydept_isactive\"\n          type=\"checkbox\"\n          label=\"Active\"\n          formControlName=\"sydept_isactive\"\n          size=\"sm\">\n        </cide-ele-input>\n      </div>\n    </div>\n    \n    <!-- Second Row -->\n    <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-3 tw-items-end\">\n      <!-- Description -->\n      <div>\n        <cide-ele-textarea \n          id=\"sydept_description\" \n          label=\"Description\" \n          formControlName=\"sydept_description\"\n          placeholder=\"Department description\"\n          rows=\"2\"\n          size=\"sm\">\n        </cide-ele-textarea>\n      </div>\n      \n\n      \n      <!-- Action Buttons -->\n      <div class=\"tw-flex tw-flex-col tw-justify-end\">\n        <div class=\"tw-flex tw-space-x-2\">\n          <button \n            cideEleButton \n            variant=\"primary\" \n            size=\"sm\" \n            type=\"submit\"\n            [disabled]=\"quickAddForm.invalid\"\n            class=\"tw-px-2 tw-py-1 tw-w-20\">\n            <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\n            {{ isEditMode() ? 'Update' : 'Add' }}\n          </button>\n          <button \n            cideEleButton \n            variant=\"outline\" \n            size=\"sm\" \n            type=\"button\"\n            (click)=\"resetQuickAddForm()\"\n            class=\"tw-px-2 tw-py-1 tw-w-16\">\n            <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">refresh</cide-ele-icon>\n            Reset\n          </button>\n        </div>\n      </div>\n    </div>\n    </form>\n    </div>\n  </div>\n\n  <!-- Header Section with Filters -->\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\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\">\n\n      <!-- Title -->\n      <div class=\"tw-flex tw-items-center tw-space-x-2\">\n        <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">business</cide-ele-icon>\n        <h5 class=\"tw-text-base tw-font-medium tw-text-gray-900 tw-m-0\">Department Management</h5>\n      </div>\n\n      <!-- Actions -->\n      <div\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\">\n        <!-- Search functionality is handled by the data grid -->\n      </div>\n    </div>\n\n    <!-- Error Message -->\n    @if (error()) {\n    <div class=\"tw-mt-4 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\" 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    </div>\n  </div>\n\n  <!-- Main Content Area -->\n  <div class=\"tw-table-row\">\n    <div class=\"tw-table-cell tw-h-full tw-relative\">\n  \n  <!-- Data Grid Component -->\n  <div class=\"tw-h-full tw-overflow-auto\">\n    \n    <cide-ele-data-grid \n      [config]=\"gridConfig()\" \n      [templateRenderers]=\"getTemplateRenderers()\"\n      [actionHandlers]=\"actionHandlers\"\n      [serverSidePagination]=\"true\" \n      [totalServerItems]=\"totalItems()\" \n      [currentServerPage]=\"currentPage()\"\n      [currentServerPageSize]=\"pageSize()\" \n      (gridEvent)=\"onGridEvent($event)\">\n    </cide-ele-data-grid>\n  </div>\n\n    </div>\n  </div>\n\n</div>\n\n<!-- Department Details Renderer Template -->\n<ng-template #departmentDetailsRendererTemplate let-row=\"row\" let-value=\"value\">\n  <div class=\"tw-flex tw-items-center tw-min-w-0\">\n    <!-- Department Icon -->\n    <div class=\"tw-flex-shrink-0\">\n      <cide-ele-icon \n        class=\"tw-text-gray-400\" \n        size=\"xs\">\n        business\n      </cide-ele-icon>\n    </div>\n    \n    <!-- Department Details -->\n    <div class=\"tw-ml-3 tw-min-w-0 tw-flex-1\">\n      <div class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-truncate\" \n           [title]=\"row.sydept_name\">\n        {{ row.sydept_name || 'Untitled' }}\n      </div>\n      @if (row.sydept_description) {\n        <div class=\"tw-text-xs tw-text-gray-500 tw-truncate\" \n             [title]=\"row.sydept_description\">\n          {{ row.sydept_description }}\n        </div>\n      }\n    </div>\n  </div>\n</ng-template>\n\n<!-- Department Status Renderer Template -->\n<ng-template #departmentStatusRendererTemplate let-row=\"row\" let-value=\"value\">\n  <span class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-whitespace-nowrap\"\n        [ngClass]=\"getStatusClass(row.sydept_isactive)\">\n    {{ getStatusDisplay(row.sydept_isactive) }}\n  </span>\n</ng-template>\n\n<!-- Actions Dropdown Renderer Template -->\n<ng-template #actionsDropdownRendererTemplate let-row=\"row\" let-value=\"value\">\n  <cide-ele-dropdown \n    [items]=\"getDropdownItems(row)\"\n    [config]=\"{ triggerIcon: 'more_vert', triggerSize: 'sm' }\"\n    (itemClick)=\"onDropdownItemClick($event, row)\">\n  </cide-ele-dropdown>\n</ng-template> " }]
         }], ctorParameters: () => [] });
 
+var departmentList_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    DepartmentListComponent: DepartmentListComponent
+});
+
 // Department Management Components
 
 class DesignationManagementService {
+    http;
+    apiUrl = `${coreRoutesUrl?.designation}`;
+    designationListSubject = new BehaviorSubject([]);
+    designationList$ = this.designationListSubject.asObservable();
     constructor(http) {
         this.http = http;
-        this.apiUrl = `${coreRoutesUrl?.designation}`;
-        this.designationListSubject = new BehaviorSubject([]);
-        this.designationList$ = this.designationListSubject.asObservable();
         console.log('DesignationManagementService initialized - using real API');
     }
     /**
@@ -2840,10 +2990,10 @@ class DesignationManagementService {
         console.error('Designation Management Service Error:', errorMessage);
         return throwError(() => new Error(errorMessage));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DesignationManagementService, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DesignationManagementService, providedIn: 'root' }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: DesignationManagementService, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: DesignationManagementService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DesignationManagementService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: DesignationManagementService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -2851,11 +3001,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
         }], ctorParameters: () => [{ type: i1.HttpClient }] });
 
 class GradeLevelManagementService {
+    http;
+    apiUrl = `${coreRoutesUrl?.gradeLevel}`;
+    gradeLevelListSubject = new BehaviorSubject([]);
+    gradeLevelList$ = this.gradeLevelListSubject.asObservable();
     constructor(http) {
         this.http = http;
-        this.apiUrl = `${coreRoutesUrl?.gradeLevel}`;
-        this.gradeLevelListSubject = new BehaviorSubject([]);
-        this.gradeLevelList$ = this.gradeLevelListSubject.asObservable();
         console.log('GradeLevelManagementService initialized - using real API');
     }
     /**
@@ -3006,10 +3157,10 @@ class GradeLevelManagementService {
         console.error('Grade Level Management Service Error:', errorMessage);
         return throwError(() => new Error(errorMessage));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: GradeLevelManagementService, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: GradeLevelManagementService, providedIn: 'root' }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: GradeLevelManagementService, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: GradeLevelManagementService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: GradeLevelManagementService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: GradeLevelManagementService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -3017,209 +3168,209 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
         }], ctorParameters: () => [{ type: i1.HttpClient }] });
 
 class DesignationListComponent {
+    // Dependency injection
+    destroyRef = inject(DestroyRef);
+    designationService = inject(DesignationManagementService);
+    gradeLevelService = inject(GradeLevelManagementService);
+    departmentService = inject(DepartmentManagementService);
+    appState = inject(AppStateHelperService);
+    fb = inject(NonNullableFormBuilder);
+    router = inject(Router);
+    // Modern ViewChild signals for template renderers (Angular 20 approach)
+    designationDetailsRendererTemplate = viewChild.required('designationDetailsRendererTemplate');
+    designationStatusRendererTemplate = viewChild.required('designationStatusRendererTemplate');
+    actionsDropdownRendererTemplate = viewChild.required('actionsDropdownRendererTemplate');
+    // Make Math available in template
+    Math = Math;
+    // Signals for reactive state management
+    designations = signal([], ...(ngDevMode ? [{ debugName: "designations" }] : []));
+    departments = signal([], ...(ngDevMode ? [{ debugName: "departments" }] : []));
+    gradeLevels = signal([], ...(ngDevMode ? [{ debugName: "gradeLevels" }] : []));
+    loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+    error = signal(null, ...(ngDevMode ? [{ debugName: "error" }] : []));
+    selectedItems = signal([], ...(ngDevMode ? [{ debugName: "selectedItems" }] : []));
+    searchTerm = signal('', ...(ngDevMode ? [{ debugName: "searchTerm" }] : []));
+    // Modern reactive forms with signals
+    selectedParentDesignation = signal(null, ...(ngDevMode ? [{ debugName: "selectedParentDesignation" }] : []));
+    selectedParentDepartment = signal(null, ...(ngDevMode ? [{ debugName: "selectedParentDepartment" }] : []));
+    // Retrieved designation data
+    retrievedDesignation = signal(null, ...(ngDevMode ? [{ debugName: "retrievedDesignation" }] : []));
+    // Edit mode flag
+    isEditMode = signal(false, ...(ngDevMode ? [{ debugName: "isEditMode" }] : []));
+    // Server-side pagination state
+    currentPage = signal(1, ...(ngDevMode ? [{ debugName: "currentPage" }] : []));
+    pageSize = signal(10, ...(ngDevMode ? [{ debugName: "pageSize" }] : []));
+    totalItems = signal(0, ...(ngDevMode ? [{ debugName: "totalItems" }] : []));
+    // Modern reactive form with typed controls
+    quickAddForm = this.fb.group({
+        sydsg_name: this.fb.control('', [Validators.required, Validators.minLength(1), Validators.maxLength(100)]),
+        sydsg_code: this.fb.control('', [Validators.required, Validators.minLength(1), Validators.maxLength(20)]),
+        sydsg_description: this.fb.control('', [Validators.maxLength(400)]),
+        sydsg_prent_id_desg: this.fb.control(''),
+        sydsg_department_id_sydpt: this.fb.control('', [Validators.required]),
+        sydsg_grade_level_id_sydsgl: this.fb.control('', [Validators.required]),
+        sydsg_isactive: this.fb.control(true, [Validators.required]),
+        desg_entity_id_syen: this.fb.control(this.appState.getActiveEntityId() || '', [Validators.required])
+    });
+    // Grid configuration signal
+    gridConfig = signal({
+        id: 'designation-list-grid',
+        title: '',
+        subtitle: '',
+        columns: [
+            {
+                key: 'details',
+                header: 'Department/Designation',
+                type: 'custom',
+                width: 'auto',
+                truncate: true,
+                align: 'left',
+                renderer: 'designationDetailsRenderer'
+            },
+            {
+                key: 'code',
+                header: 'Code',
+                type: 'text',
+                width: '120px',
+                truncate: true,
+                align: 'left'
+            },
+            {
+                key: 'grade_level',
+                header: 'Grade Level',
+                type: 'text',
+                width: '120px',
+                truncate: true,
+                align: 'left'
+            },
+            {
+                key: 'status',
+                header: 'Status',
+                type: 'custom',
+                width: '100px',
+                truncate: false,
+                align: 'center',
+                renderer: 'designationStatusRenderer'
+            },
+            {
+                key: 'actions',
+                header: '',
+                type: 'custom',
+                width: '60px',
+                truncate: false,
+                align: 'center',
+                renderer: 'actionsDropdownRenderer'
+            }
+        ],
+        data: [],
+        trackBy: '_id',
+        tree: {
+            enabled: true,
+            primaryKey: '_id',
+            foreignKey: 'parentId',
+            childrenKey: 'children',
+            levelKey: 'level',
+            expandedKey: 'expanded',
+            hasChildrenKey: 'hasChildren'
+        },
+        pagination: {
+            enabled: true,
+            pageSize: 10,
+            pageSizeOptions: [10, 25, 50, 100],
+            showQuickJump: true,
+            showPageInfo: true,
+            showRefresh: true
+        },
+        search: {
+            enabled: true,
+            placeholder: 'Search departments and designations...',
+            searchableColumns: ['name', 'code', 'description'],
+            debounceMs: 300
+        },
+        loading: {
+            useDefer: true,
+            skeletonRows: 5,
+            showOverlay: false
+        },
+        scroll: {
+            enabled: true,
+            maxHeight: '',
+            minHeight: '',
+            stickyHeader: true,
+            virtualScroll: false,
+            rowHeight: 50
+        },
+        responsive: true,
+        striped: false,
+        bordered: true,
+        compact: false,
+        tableClass: 'tw-table-fixed tw-w-full tw-rounded-none',
+        onRefresh: 'onDesignationRefresh'
+    }, ...(ngDevMode ? [{ debugName: "gridConfig" }] : []));
+    // Template renderers using Angular best practices
+    templateRenderers = computed(() => ({
+        designationDetailsRenderer: this.designationDetailsRendererTemplate(),
+        designationStatusRenderer: this.designationStatusRendererTemplate(),
+        actionsDropdownRenderer: this.actionsDropdownRendererTemplate()
+    }), ...(ngDevMode ? [{ debugName: "templateRenderers" }] : []));
     /**
      * Get template renderers for data grid
      */
     getTemplateRenderers() {
         return this.templateRenderers();
     }
+    // Mixed renderers (templates + string functions)
+    customRenderers = computed(() => ({
+        ...this.templateRenderers()
+    }), ...(ngDevMode ? [{ debugName: "customRenderers" }] : []));
     /**
      * Get custom renderers adapted for current data grid compatibility
      */
     getCustomRenderers() {
         return {};
     }
-    // Modern constructor with effects for initialization
-    constructor() {
-        // Dependency injection
-        this.destroyRef = inject(DestroyRef);
-        this.designationService = inject(DesignationManagementService);
-        this.gradeLevelService = inject(GradeLevelManagementService);
-        this.departmentService = inject(DepartmentManagementService);
-        this.appState = inject(AppStateHelperService);
-        this.fb = inject(NonNullableFormBuilder);
-        this.router = inject(Router);
-        // Modern ViewChild signals for template renderers (Angular 20 approach)
-        this.designationDetailsRendererTemplate = viewChild.required('designationDetailsRendererTemplate');
-        this.designationStatusRendererTemplate = viewChild.required('designationStatusRendererTemplate');
-        this.actionsDropdownRendererTemplate = viewChild.required('actionsDropdownRendererTemplate');
-        // Make Math available in template
-        this.Math = Math;
-        // Signals for reactive state management
-        this.designations = signal([]);
-        this.departments = signal([]);
-        this.gradeLevels = signal([]);
-        this.loading = signal(false);
-        this.error = signal(null);
-        this.selectedItems = signal([]);
-        this.searchTerm = signal('');
-        // Modern reactive forms with signals
-        this.selectedParentDesignation = signal(null);
-        this.selectedParentDepartment = signal(null);
-        // Retrieved designation data
-        this.retrievedDesignation = signal(null);
-        // Edit mode flag
-        this.isEditMode = signal(false);
-        // Server-side pagination state
-        this.currentPage = signal(1);
-        this.pageSize = signal(10);
-        this.totalItems = signal(0);
-        // Modern reactive form with typed controls
-        this.quickAddForm = this.fb.group({
-            sydsg_name: this.fb.control('', [Validators.required, Validators.minLength(1), Validators.maxLength(100)]),
-            sydsg_code: this.fb.control('', [Validators.required, Validators.minLength(1), Validators.maxLength(20)]),
-            sydsg_description: this.fb.control('', [Validators.maxLength(400)]),
-            sydsg_prent_id_desg: this.fb.control(''),
-            sydsg_department_id_sydpt: this.fb.control('', [Validators.required]),
-            sydsg_grade_level_id_sydsgl: this.fb.control('', [Validators.required]),
-            sydsg_isactive: this.fb.control(true, [Validators.required]),
-            desg_entity_id_syen: this.fb.control(this.appState.getActiveEntityId() || '', [Validators.required])
-        });
-        // Grid configuration signal
-        this.gridConfig = signal({
-            id: 'designation-list-grid',
-            title: '',
-            subtitle: '',
-            columns: [
-                {
-                    key: 'details',
-                    header: 'Department/Designation',
-                    type: 'custom',
-                    width: 'auto',
-                    truncate: true,
-                    align: 'left',
-                    renderer: 'designationDetailsRenderer'
-                },
-                {
-                    key: 'code',
-                    header: 'Code',
-                    type: 'text',
-                    width: '120px',
-                    truncate: true,
-                    align: 'left'
-                },
-                {
-                    key: 'grade_level',
-                    header: 'Grade Level',
-                    type: 'text',
-                    width: '120px',
-                    truncate: true,
-                    align: 'left'
-                },
-                {
-                    key: 'status',
-                    header: 'Status',
-                    type: 'custom',
-                    width: '100px',
-                    truncate: false,
-                    align: 'center',
-                    renderer: 'designationStatusRenderer'
-                },
-                {
-                    key: 'actions',
-                    header: '',
-                    type: 'custom',
-                    width: '60px',
-                    truncate: false,
-                    align: 'center',
-                    renderer: 'actionsDropdownRenderer'
-                }
-            ],
-            data: [],
-            trackBy: '_id',
-            tree: {
-                enabled: true,
-                primaryKey: '_id',
-                foreignKey: 'parentId',
-                childrenKey: 'children',
-                levelKey: 'level',
-                expandedKey: 'expanded',
-                hasChildrenKey: 'hasChildren'
-            },
-            pagination: {
-                enabled: true,
-                pageSize: 10,
-                pageSizeOptions: [10, 25, 50, 100],
-                showQuickJump: true,
-                showPageInfo: true,
-                showRefresh: true
-            },
-            search: {
-                enabled: true,
-                placeholder: 'Search departments and designations...',
-                searchableColumns: ['name', 'code', 'description'],
-                debounceMs: 300
-            },
-            loading: {
-                useDefer: true,
-                skeletonRows: 5,
-                showOverlay: false
-            },
-            scroll: {
-                enabled: true,
-                maxHeight: '',
-                minHeight: '',
-                stickyHeader: true,
-                virtualScroll: false,
-                rowHeight: 50
-            },
-            responsive: true,
-            striped: false,
-            bordered: true,
-            compact: false,
-            tableClass: 'tw-table-fixed tw-w-full tw-rounded-none',
-            onRefresh: 'onDesignationRefresh'
+    // Action handlers for grid actions
+    actionHandlers = {
+        onEditDesignation: (row) => this.editDesignation(row._id || ''),
+        onToggleDesignation: (row) => this.toggleDesignationStatus(row._id || ''),
+        onDeleteDesignation: (row) => this.deleteDesignation(row._id || ''),
+        onDesignationRowClick: (row) => this.onDesignationRowClick(row),
+        onDesignationRefresh: () => this.onDesignationRefresh(),
+        onAddChild: (row) => this.onAddChild(row)
+    };
+    // Computed properties
+    filteredItems = computed(() => {
+        const items = this.designations();
+        const search = this.searchTerm()?.toLowerCase();
+        if (!search)
+            return items;
+        return items.filter(item => {
+            return item.sydsg_name?.toLowerCase().includes(search) ||
+                item.sydsg_code?.toLowerCase().includes(search) ||
+                item.sydsg_description?.toLowerCase().includes(search);
         });
-        // Template renderers using Angular best practices
-        this.templateRenderers = computed(() => ({
-            designationDetailsRenderer: this.designationDetailsRendererTemplate(),
-            designationStatusRenderer: this.designationStatusRendererTemplate(),
-            actionsDropdownRenderer: this.actionsDropdownRendererTemplate()
+    }, ...(ngDevMode ? [{ debugName: "filteredItems" }] : []));
+    hasSelection = computed(() => this.selectedItems().length > 0, ...(ngDevMode ? [{ debugName: "hasSelection" }] : []));
+    // Pagination computed properties
+    totalPages = computed(() => Math.ceil(this.totalItems() / this.pageSize()), ...(ngDevMode ? [{ debugName: "totalPages" }] : []));
+    hasNextPage = computed(() => this.currentPage() < this.totalPages(), ...(ngDevMode ? [{ debugName: "hasNextPage" }] : []));
+    hasPreviousPage = computed(() => this.currentPage() > 1, ...(ngDevMode ? [{ debugName: "hasPreviousPage" }] : []));
+    // Grade level options for dropdown
+    gradeLevelOptions = computed(() => {
+        return this.gradeLevels().map(gradeLevel => ({
+            value: gradeLevel._id || '',
+            label: gradeLevel.sydsgl_name || 'Unknown'
         }));
-        // Mixed renderers (templates + string functions)
-        this.customRenderers = computed(() => ({
-            ...this.templateRenderers()
+    }, ...(ngDevMode ? [{ debugName: "gradeLevelOptions" }] : []));
+    // Department options for dropdown
+    departmentOptions = computed(() => {
+        return this.departments().map(department => ({
+            value: department._id || '',
+            label: department.sydept_name || 'Unknown'
         }));
-        // Action handlers for grid actions
-        this.actionHandlers = {
-            onEditDesignation: (row) => this.editDesignation(row._id || ''),
-            onToggleDesignation: (row) => this.toggleDesignationStatus(row._id || ''),
-            onDeleteDesignation: (row) => this.deleteDesignation(row._id || ''),
-            onDesignationRowClick: (row) => this.onDesignationRowClick(row),
-            onDesignationRefresh: () => this.onDesignationRefresh(),
-            onAddChild: (row) => this.onAddChild(row)
-        };
-        // Computed properties
-        this.filteredItems = computed(() => {
-            const items = this.designations();
-            const search = this.searchTerm()?.toLowerCase();
-            if (!search)
-                return items;
-            return items.filter(item => {
-                return item.sydsg_name?.toLowerCase().includes(search) ||
-                    item.sydsg_code?.toLowerCase().includes(search) ||
-                    item.sydsg_description?.toLowerCase().includes(search);
-            });
-        });
-        this.hasSelection = computed(() => this.selectedItems().length > 0);
-        // Pagination computed properties
-        this.totalPages = computed(() => Math.ceil(this.totalItems() / this.pageSize()));
-        this.hasNextPage = computed(() => this.currentPage() < this.totalPages());
-        this.hasPreviousPage = computed(() => this.currentPage() > 1);
-        // Grade level options for dropdown
-        this.gradeLevelOptions = computed(() => {
-            return this.gradeLevels().map(gradeLevel => ({
-                value: gradeLevel._id || '',
-                label: gradeLevel.sydsgl_name || 'Unknown'
-            }));
-        });
-        // Department options for dropdown
-        this.departmentOptions = computed(() => {
-            return this.departments().map(department => ({
-                value: department._id || '',
-                label: department.sydept_name || 'Unknown'
-            }));
-        });
+    }, ...(ngDevMode ? [{ debugName: "departmentOptions" }] : []));
+    // Modern constructor with effects for initialization
+    constructor() {
         this.initializeComponent();
         this.destroyRef.onDestroy(() => {
             this.cleanupEventListeners();
@@ -4106,10 +4257,10 @@ class DesignationListComponent {
     trackByItemId(index, item) {
         return item._id || '';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DesignationListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: DesignationListComponent, isStandalone: true, selector: "cide-core-app-designation-list", viewQueries: [{ propertyName: "designationDetailsRendererTemplate", first: true, predicate: ["designationDetailsRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "designationStatusRendererTemplate", first: true, predicate: ["designationStatusRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "actionsDropdownRendererTemplate", first: true, predicate: ["actionsDropdownRendererTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Designation List Container -->\n<div class=\"tw-table tw-w-full tw-h-full\">\n\n  <!-- Quick Add Form Section -->\n  <div class=\"tw-table-row tw-h-0\">\n    <div class=\"tw-table-cell tw-px-6 tw-py-4 tw-border-b tw-border-gray-200 tw-bg-white\">\n    <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-0\">\n      <div class=\"tw-flex tw-items-center tw-space-x-3 tw-mb-3\">\n        <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\n        <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-m-0\">{{ isEditMode() ? 'Edit Designation' : 'Quick Add Designation' }}</h6>\n      </div>\n      @if (selectedParentDesignation()) {\n        <div class=\"tw-flex tw-items-center tw-space-x-3 tw-bg-blue-50 tw-border tw-border-blue-200 tw-px-4 tw-py-1 tw-rounded-lg\">\n          <cide-ele-icon class=\"tw-text-blue-600 tw-w-4 tw-h-4\">account_tree</cide-ele-icon>\n          <div class=\"tw-flex tw-items-center tw-space-x-2\">\n            <span class=\"tw-text-sm tw-text-blue-600 tw-font-medium\">{{ isEditMode() ? 'Parent:' : 'Creating child under:' }}</span>\n            <span class=\"tw-text-sm tw-text-blue-800 tw-font-semibold\">{{ selectedParentDesignation()?.sydsg_name }}</span>\n          </div>\n          <button \n            cideEleButton \n            variant=\"ghost\" \n            size=\"xs\" \n            type=\"button\" \n            (click)=\"clearSelectedParent()\" \n            class=\"tw-text-blue-400 hover:tw-text-blue-600\">\n            <svg class=\"tw-w-4 tw-h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\"/>\n            </svg>\n          </button>\n        </div>\n      }\n      @if (selectedParentDepartment()) {\n        <div class=\"tw-flex tw-items-center tw-space-x-3 tw-bg-green-50 tw-border tw-border-green-200 tw-px-4 tw-py-1 tw-rounded-lg\">\n          <cide-ele-icon class=\"tw-text-green-600 tw-w-4 tw-h-4\">business</cide-ele-icon>\n          <div class=\"tw-flex tw-items-center tw-space-x-2\">\n            <span class=\"tw-text-sm tw-text-green-600 tw-font-medium\">{{ isEditMode() ? 'Department:' : 'Department:' }}</span>\n            <span class=\"tw-text-sm tw-text-green-800 tw-font-semibold\">{{ selectedParentDepartment()?.sydept_name }}</span>\n          </div>\n          <button \n            cideEleButton \n            variant=\"ghost\" \n            size=\"xs\" \n            type=\"button\" \n            (click)=\"clearSelectedParentDepartment()\" \n            class=\"tw-text-green-400 hover:tw-text-green-600\">\n            <svg class=\"tw-w-4 tw-h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\"/>\n            </svg>\n          </button>\n        </div>\n      }\n    </div>\n    \n    <form [formGroup]=\"quickAddForm\" (ngSubmit)=\"quickAddDesignation()\">\n    <!-- First Row -->\n    <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-5 tw-gap-3 tw-mb-3\">\n      <!-- Designation Name -->\n      <div>\n        <cide-ele-input \n          id=\"sydsg_name\" \n          label=\"Name*\" \n          formControlName=\"sydsg_name\"\n          placeholder=\"Designation name\"\n          size=\"sm\">\n        </cide-ele-input>\n      </div>\n      \n      <!-- Designation Code -->\n      <div>\n        <cide-ele-input \n          id=\"sydsg_code\" \n          label=\"Code*\" \n          formControlName=\"sydsg_code\"\n          placeholder=\"DESG001\"\n          size=\"sm\">\n        </cide-ele-input>\n      </div>\n      \n      <!-- Grade Level -->\n      <div>\n        <cide-ele-select \n          id=\"sydsg_grade_level_id_sydsgl\"\n          label=\"Grade Level*\" \n          [options]=\"gradeLevelOptions()\" \n          formControlName=\"sydsg_grade_level_id_sydsgl\"\n          placeholder=\"Select grade level\"\n          size=\"sm\">\n        </cide-ele-select>\n      </div>\n      \n      <!-- Department -->\n      <div>\n        <cide-ele-select \n          id=\"sydsg_department_id_sydpt\"\n          label=\"Department*\" \n          [options]=\"departmentOptions()\" \n          formControlName=\"sydsg_department_id_sydpt\"\n          placeholder=\"Select department\"\n          size=\"sm\">\n        </cide-ele-select>\n      </div>\n      \n      <!-- Active Status -->\n      <div class=\"tw-flex tw-flex-col tw-justify-end\">\n        <cide-ele-input \n          id=\"sydsg_isactive\"\n          type=\"checkbox\"\n          label=\"Active\"\n          formControlName=\"sydsg_isactive\"\n          size=\"sm\">\n        </cide-ele-input>\n      </div>\n    </div>\n    \n    <!-- Second Row -->\n    <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-3 tw-items-end\">\n      <!-- Description -->\n      <div>\n        <cide-ele-textarea \n          id=\"sydsg_description\" \n          label=\"Description\" \n          formControlName=\"sydsg_description\"\n          placeholder=\"Designation description\"\n          rows=\"2\"\n          size=\"sm\">\n        </cide-ele-textarea>\n      </div>\n      \n      <!-- Entity ID (Hidden) -->\n      <div class=\"tw-hidden\">\n        <cide-ele-input \n          id=\"desg_entity_id_syen\" \n          label=\"Entity ID*\" \n          formControlName=\"desg_entity_id_syen\"\n          placeholder=\"Entity ID\"\n          size=\"sm\">\n        </cide-ele-input>\n      </div>\n      \n      <!-- Action Buttons -->\n      <div class=\"tw-flex tw-flex-col tw-justify-end\">\n        <div class=\"tw-flex tw-space-x-2\">\n          <button \n            cideEleButton \n            variant=\"primary\" \n            size=\"sm\" \n            type=\"submit\"\n            [disabled]=\"quickAddForm.invalid\"\n            class=\"tw-px-2 tw-py-1 tw-w-20\">\n            <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\n            {{ isEditMode() ? 'Update' : 'Add' }}\n          </button>\n          <button \n            cideEleButton \n            variant=\"outline\" \n            size=\"sm\" \n            type=\"button\"\n            (click)=\"resetQuickAddForm()\"\n            class=\"tw-px-2 tw-py-1 tw-w-16\">\n            <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">refresh</cide-ele-icon>\n            Reset\n          </button>\n        </div>\n      </div>\n    </div>\n    </form>\n    </div>\n  </div>\n\n\n\n  <!-- Header Section with Filters -->\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\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\">\n\n      <!-- Title -->\n      <div class=\"tw-flex tw-items-center tw-space-x-2\">\n        <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">work</cide-ele-icon>\n        <h5 class=\"tw-text-base tw-font-medium tw-text-gray-900 tw-m-0\">Designation Management</h5>\n      </div>\n\n      <!-- Actions -->\n      <div\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\">\n        <!-- Search functionality is handled by the data grid -->\n      </div>\n    </div>\n\n    <!-- Error Message -->\n    @if (error()) {\n    <div class=\"tw-mt-4 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\" 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    </div>\n  </div>\n\n  <!-- Main Content Area -->\n  <div class=\"tw-table-row\">\n    <div class=\"tw-table-cell tw-h-full tw-relative\">\n  \n  <!-- Data Grid Component -->\n  <div class=\"tw-h-full tw-overflow-auto\">\n    \n    <cide-ele-data-grid \n      [config]=\"gridConfig()\" \n      [templateRenderers]=\"getTemplateRenderers()\"\n      [actionHandlers]=\"actionHandlers\"\n      [serverSidePagination]=\"true\" \n      [totalServerItems]=\"totalItems()\" \n      [currentServerPage]=\"currentPage()\"\n      [currentServerPageSize]=\"pageSize()\" \n      (gridEvent)=\"onGridEvent($event)\">\n    </cide-ele-data-grid>\n  </div>\n\n    </div>\n  </div>\n\n</div>\n\n<!-- Designation Details Renderer Template -->\n<ng-template #designationDetailsRendererTemplate let-row=\"row\" let-value=\"value\">\n  <div class=\"tw-flex tw-items-center tw-min-w-0\">\n    <!-- Dynamic Icon based on type -->\n    <div class=\"tw-flex-shrink-0\">\n      <cide-ele-icon \n        [class]=\"row.type === 'department' ? 'tw-text-green-500' : 'tw-text-blue-500'\" \n        size=\"xs\">\n        {{ row.type === 'department' ? 'business' : 'work' }}\n      </cide-ele-icon>\n    </div>\n    \n    <!-- Details -->\n    <div class=\"tw-ml-3 tw-min-w-0 tw-flex-1\">\n      <div class=\"tw-flex tw-items-center tw-space-x-2\">\n        <div class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-truncate\" \n             [title]=\"row.name\">\n          {{ row.name || 'Untitled' }}\n        </div>\n        @if (row.type === 'department') {\n          <span class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-green-100 tw-text-green-800\">\n            Department\n          </span>\n        }\n      </div>\n      @if (row.description) {\n        <div class=\"tw-text-xs tw-text-gray-500 tw-truncate\" \n             [title]=\"row.description\">\n          {{ row.description }}\n        </div>\n      }\n    </div>\n  </div>\n</ng-template>\n\n<!-- Designation Status Renderer Template -->\n<ng-template #designationStatusRendererTemplate let-row=\"row\" let-value=\"value\">\n  <span class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-whitespace-nowrap\"\n        [ngClass]=\"getStatusClass(row.status)\">\n    {{ getStatusDisplay(row.status) }}\n  </span>\n</ng-template>\n\n<!-- Actions Dropdown Renderer Template -->\n<ng-template #actionsDropdownRendererTemplate let-row=\"row\" let-value=\"value\">\n  <cide-ele-dropdown \n    [items]=\"getDropdownItems(row)\"\n    [config]=\"{ triggerIcon: 'more_vert', triggerSize: 'sm' }\"\n    (itemClick)=\"onDropdownItemClick($event, row)\">\n  </cide-ele-dropdown>\n</ng-template> ", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: CideEleDataGridComponent, selector: "cide-ele-data-grid", inputs: ["config", "customRenderers", "templateRenderers", "customFormatters", "actionHandlers", "serverSidePagination", "totalServerItems", "currentServerPage", "currentServerPageSize", "dragDropEnabled"], outputs: ["gridEvent"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton]", 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: 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: 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"], outputs: ["ngModelChange", "change", "searchChange"] }, { kind: "component", type: CideTextareaComponent, selector: "cide-ele-textarea", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "minlength", "maxlength", "rows", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput"], outputs: ["ngModelChange"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideEleDropdownComponent, selector: "cide-ele-dropdown", inputs: ["items", "config", "triggerTemplate", "menuTemplate"], outputs: ["itemClick", "dropdownToggle"] }] }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: DesignationListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: DesignationListComponent, isStandalone: true, selector: "cide-core-app-designation-list", viewQueries: [{ propertyName: "designationDetailsRendererTemplate", first: true, predicate: ["designationDetailsRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "designationStatusRendererTemplate", first: true, predicate: ["designationStatusRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "actionsDropdownRendererTemplate", first: true, predicate: ["actionsDropdownRendererTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Designation List Container -->\n<div class=\"tw-table tw-w-full tw-h-full\">\n\n  <!-- Quick Add Form Section -->\n  <div class=\"tw-table-row tw-h-0\">\n    <div class=\"tw-table-cell tw-px-6 tw-py-4 tw-border-b tw-border-gray-200 tw-bg-white\">\n    <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-0\">\n      <div class=\"tw-flex tw-items-center tw-space-x-3 tw-mb-3\">\n        <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\n        <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-m-0\">{{ isEditMode() ? 'Edit Designation' : 'Quick Add Designation' }}</h6>\n      </div>\n      @if (selectedParentDesignation()) {\n        <div class=\"tw-flex tw-items-center tw-space-x-3 tw-bg-blue-50 tw-border tw-border-blue-200 tw-px-4 tw-py-1 tw-rounded-lg\">\n          <cide-ele-icon class=\"tw-text-blue-600 tw-w-4 tw-h-4\">account_tree</cide-ele-icon>\n          <div class=\"tw-flex tw-items-center tw-space-x-2\">\n            <span class=\"tw-text-sm tw-text-blue-600 tw-font-medium\">{{ isEditMode() ? 'Parent:' : 'Creating child under:' }}</span>\n            <span class=\"tw-text-sm tw-text-blue-800 tw-font-semibold\">{{ selectedParentDesignation()?.sydsg_name }}</span>\n          </div>\n          <button \n            cideEleButton \n            variant=\"ghost\" \n            size=\"xs\" \n            type=\"button\" \n            (click)=\"clearSelectedParent()\" \n            class=\"tw-text-blue-400 hover:tw-text-blue-600\">\n            <svg class=\"tw-w-4 tw-h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\"/>\n            </svg>\n          </button>\n        </div>\n      }\n      @if (selectedParentDepartment()) {\n        <div class=\"tw-flex tw-items-center tw-space-x-3 tw-bg-green-50 tw-border tw-border-green-200 tw-px-4 tw-py-1 tw-rounded-lg\">\n          <cide-ele-icon class=\"tw-text-green-600 tw-w-4 tw-h-4\">business</cide-ele-icon>\n          <div class=\"tw-flex tw-items-center tw-space-x-2\">\n            <span class=\"tw-text-sm tw-text-green-600 tw-font-medium\">{{ isEditMode() ? 'Department:' : 'Department:' }}</span>\n            <span class=\"tw-text-sm tw-text-green-800 tw-font-semibold\">{{ selectedParentDepartment()?.sydept_name }}</span>\n          </div>\n          <button \n            cideEleButton \n            variant=\"ghost\" \n            size=\"xs\" \n            type=\"button\" \n            (click)=\"clearSelectedParentDepartment()\" \n            class=\"tw-text-green-400 hover:tw-text-green-600\">\n            <svg class=\"tw-w-4 tw-h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\"/>\n            </svg>\n          </button>\n        </div>\n      }\n    </div>\n    \n    <form [formGroup]=\"quickAddForm\" (ngSubmit)=\"quickAddDesignation()\">\n    <!-- First Row -->\n    <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-5 tw-gap-3 tw-mb-3\">\n      <!-- Designation Name -->\n      <div>\n        <cide-ele-input \n          id=\"sydsg_name\" \n          label=\"Name*\" \n          formControlName=\"sydsg_name\"\n          placeholder=\"Designation name\"\n          size=\"sm\">\n        </cide-ele-input>\n      </div>\n      \n      <!-- Designation Code -->\n      <div>\n        <cide-ele-input \n          id=\"sydsg_code\" \n          label=\"Code*\" \n          formControlName=\"sydsg_code\"\n          placeholder=\"DESG001\"\n          size=\"sm\">\n        </cide-ele-input>\n      </div>\n      \n      <!-- Grade Level -->\n      <div>\n        <cide-ele-select \n          id=\"sydsg_grade_level_id_sydsgl\"\n          label=\"Grade Level*\" \n          [options]=\"gradeLevelOptions()\" \n          formControlName=\"sydsg_grade_level_id_sydsgl\"\n          placeholder=\"Select grade level\"\n          size=\"sm\">\n        </cide-ele-select>\n      </div>\n      \n      <!-- Department -->\n      <div>\n        <cide-ele-select \n          id=\"sydsg_department_id_sydpt\"\n          label=\"Department*\" \n          [options]=\"departmentOptions()\" \n          formControlName=\"sydsg_department_id_sydpt\"\n          placeholder=\"Select department\"\n          size=\"sm\">\n        </cide-ele-select>\n      </div>\n      \n      <!-- Active Status -->\n      <div class=\"tw-flex tw-flex-col tw-justify-end\">\n        <cide-ele-input \n          id=\"sydsg_isactive\"\n          type=\"checkbox\"\n          label=\"Active\"\n          formControlName=\"sydsg_isactive\"\n          size=\"sm\">\n        </cide-ele-input>\n      </div>\n    </div>\n    \n    <!-- Second Row -->\n    <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-3 tw-items-end\">\n      <!-- Description -->\n      <div>\n        <cide-ele-textarea \n          id=\"sydsg_description\" \n          label=\"Description\" \n          formControlName=\"sydsg_description\"\n          placeholder=\"Designation description\"\n          rows=\"2\"\n          size=\"sm\">\n        </cide-ele-textarea>\n      </div>\n      \n      <!-- Entity ID (Hidden) -->\n      <div class=\"tw-hidden\">\n        <cide-ele-input \n          id=\"desg_entity_id_syen\" \n          label=\"Entity ID*\" \n          formControlName=\"desg_entity_id_syen\"\n          placeholder=\"Entity ID\"\n          size=\"sm\">\n        </cide-ele-input>\n      </div>\n      \n      <!-- Action Buttons -->\n      <div class=\"tw-flex tw-flex-col tw-justify-end\">\n        <div class=\"tw-flex tw-space-x-2\">\n          <button \n            cideEleButton \n            variant=\"primary\" \n            size=\"sm\" \n            type=\"submit\"\n            [disabled]=\"quickAddForm.invalid\"\n            class=\"tw-px-2 tw-py-1 tw-w-20\">\n            <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\n            {{ isEditMode() ? 'Update' : 'Add' }}\n          </button>\n          <button \n            cideEleButton \n            variant=\"outline\" \n            size=\"sm\" \n            type=\"button\"\n            (click)=\"resetQuickAddForm()\"\n            class=\"tw-px-2 tw-py-1 tw-w-16\">\n            <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">refresh</cide-ele-icon>\n            Reset\n          </button>\n        </div>\n      </div>\n    </div>\n    </form>\n    </div>\n  </div>\n\n\n\n  <!-- Header Section with Filters -->\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\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\">\n\n      <!-- Title -->\n      <div class=\"tw-flex tw-items-center tw-space-x-2\">\n        <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">work</cide-ele-icon>\n        <h5 class=\"tw-text-base tw-font-medium tw-text-gray-900 tw-m-0\">Designation Management</h5>\n      </div>\n\n      <!-- Actions -->\n      <div\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\">\n        <!-- Search functionality is handled by the data grid -->\n      </div>\n    </div>\n\n    <!-- Error Message -->\n    @if (error()) {\n    <div class=\"tw-mt-4 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\" 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    </div>\n  </div>\n\n  <!-- Main Content Area -->\n  <div class=\"tw-table-row\">\n    <div class=\"tw-table-cell tw-h-full tw-relative\">\n  \n  <!-- Data Grid Component -->\n  <div class=\"tw-h-full tw-overflow-auto\">\n    \n    <cide-ele-data-grid \n      [config]=\"gridConfig()\" \n      [templateRenderers]=\"getTemplateRenderers()\"\n      [actionHandlers]=\"actionHandlers\"\n      [serverSidePagination]=\"true\" \n      [totalServerItems]=\"totalItems()\" \n      [currentServerPage]=\"currentPage()\"\n      [currentServerPageSize]=\"pageSize()\" \n      (gridEvent)=\"onGridEvent($event)\">\n    </cide-ele-data-grid>\n  </div>\n\n    </div>\n  </div>\n\n</div>\n\n<!-- Designation Details Renderer Template -->\n<ng-template #designationDetailsRendererTemplate let-row=\"row\" let-value=\"value\">\n  <div class=\"tw-flex tw-items-center tw-min-w-0\">\n    <!-- Dynamic Icon based on type -->\n    <div class=\"tw-flex-shrink-0\">\n      <cide-ele-icon \n        [class]=\"row.type === 'department' ? 'tw-text-green-500' : 'tw-text-blue-500'\" \n        size=\"xs\">\n        {{ row.type === 'department' ? 'business' : 'work' }}\n      </cide-ele-icon>\n    </div>\n    \n    <!-- Details -->\n    <div class=\"tw-ml-3 tw-min-w-0 tw-flex-1\">\n      <div class=\"tw-flex tw-items-center tw-space-x-2\">\n        <div class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-truncate\" \n             [title]=\"row.name\">\n          {{ row.name || 'Untitled' }}\n        </div>\n        @if (row.type === 'department') {\n          <span class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-green-100 tw-text-green-800\">\n            Department\n          </span>\n        }\n      </div>\n      @if (row.description) {\n        <div class=\"tw-text-xs tw-text-gray-500 tw-truncate\" \n             [title]=\"row.description\">\n          {{ row.description }}\n        </div>\n      }\n    </div>\n  </div>\n</ng-template>\n\n<!-- Designation Status Renderer Template -->\n<ng-template #designationStatusRendererTemplate let-row=\"row\" let-value=\"value\">\n  <span class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-whitespace-nowrap\"\n        [ngClass]=\"getStatusClass(row.status)\">\n    {{ getStatusDisplay(row.status) }}\n  </span>\n</ng-template>\n\n<!-- Actions Dropdown Renderer Template -->\n<ng-template #actionsDropdownRendererTemplate let-row=\"row\" let-value=\"value\">\n  <cide-ele-dropdown \n    [items]=\"getDropdownItems(row)\"\n    [config]=\"{ triggerIcon: 'more_vert', triggerSize: 'sm' }\"\n    (itemClick)=\"onDropdownItemClick($event, row)\">\n  </cide-ele-dropdown>\n</ng-template> ", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: CideEleDataGridComponent, selector: "cide-ele-data-grid", inputs: ["config", "customRenderers", "templateRenderers", "customFormatters", "actionHandlers", "serverSidePagination", "totalServerItems", "currentServerPage", "currentServerPageSize", "dragDropEnabled"], outputs: ["gridEvent"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton]", 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: 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: 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"], outputs: ["ngModelChange", "change", "searchChange"] }, { kind: "component", type: CideTextareaComponent, selector: "cide-ele-textarea", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "minlength", "maxlength", "rows", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput"], outputs: ["ngModelChange"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideEleDropdownComponent, selector: "cide-ele-dropdown", inputs: ["items", "config", "triggerTemplate", "menuTemplate"], outputs: ["itemClick", "dropdownToggle"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: DesignationListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: DesignationListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cide-core-app-designation-list', standalone: true, imports: [
                         CommonModule,
@@ -4125,185 +4276,190 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                     ], template: "<!-- Designation List Container -->\n<div class=\"tw-table tw-w-full tw-h-full\">\n\n  <!-- Quick Add Form Section -->\n  <div class=\"tw-table-row tw-h-0\">\n    <div class=\"tw-table-cell tw-px-6 tw-py-4 tw-border-b tw-border-gray-200 tw-bg-white\">\n    <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-0\">\n      <div class=\"tw-flex tw-items-center tw-space-x-3 tw-mb-3\">\n        <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\n        <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-m-0\">{{ isEditMode() ? 'Edit Designation' : 'Quick Add Designation' }}</h6>\n      </div>\n      @if (selectedParentDesignation()) {\n        <div class=\"tw-flex tw-items-center tw-space-x-3 tw-bg-blue-50 tw-border tw-border-blue-200 tw-px-4 tw-py-1 tw-rounded-lg\">\n          <cide-ele-icon class=\"tw-text-blue-600 tw-w-4 tw-h-4\">account_tree</cide-ele-icon>\n          <div class=\"tw-flex tw-items-center tw-space-x-2\">\n            <span class=\"tw-text-sm tw-text-blue-600 tw-font-medium\">{{ isEditMode() ? 'Parent:' : 'Creating child under:' }}</span>\n            <span class=\"tw-text-sm tw-text-blue-800 tw-font-semibold\">{{ selectedParentDesignation()?.sydsg_name }}</span>\n          </div>\n          <button \n            cideEleButton \n            variant=\"ghost\" \n            size=\"xs\" \n            type=\"button\" \n            (click)=\"clearSelectedParent()\" \n            class=\"tw-text-blue-400 hover:tw-text-blue-600\">\n            <svg class=\"tw-w-4 tw-h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\"/>\n            </svg>\n          </button>\n        </div>\n      }\n      @if (selectedParentDepartment()) {\n        <div class=\"tw-flex tw-items-center tw-space-x-3 tw-bg-green-50 tw-border tw-border-green-200 tw-px-4 tw-py-1 tw-rounded-lg\">\n          <cide-ele-icon class=\"tw-text-green-600 tw-w-4 tw-h-4\">business</cide-ele-icon>\n          <div class=\"tw-flex tw-items-center tw-space-x-2\">\n            <span class=\"tw-text-sm tw-text-green-600 tw-font-medium\">{{ isEditMode() ? 'Department:' : 'Department:' }}</span>\n            <span class=\"tw-text-sm tw-text-green-800 tw-font-semibold\">{{ selectedParentDepartment()?.sydept_name }}</span>\n          </div>\n          <button \n            cideEleButton \n            variant=\"ghost\" \n            size=\"xs\" \n            type=\"button\" \n            (click)=\"clearSelectedParentDepartment()\" \n            class=\"tw-text-green-400 hover:tw-text-green-600\">\n            <svg class=\"tw-w-4 tw-h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\"/>\n            </svg>\n          </button>\n        </div>\n      }\n    </div>\n    \n    <form [formGroup]=\"quickAddForm\" (ngSubmit)=\"quickAddDesignation()\">\n    <!-- First Row -->\n    <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-5 tw-gap-3 tw-mb-3\">\n      <!-- Designation Name -->\n      <div>\n        <cide-ele-input \n          id=\"sydsg_name\" \n          label=\"Name*\" \n          formControlName=\"sydsg_name\"\n          placeholder=\"Designation name\"\n          size=\"sm\">\n        </cide-ele-input>\n      </div>\n      \n      <!-- Designation Code -->\n      <div>\n        <cide-ele-input \n          id=\"sydsg_code\" \n          label=\"Code*\" \n          formControlName=\"sydsg_code\"\n          placeholder=\"DESG001\"\n          size=\"sm\">\n        </cide-ele-input>\n      </div>\n      \n      <!-- Grade Level -->\n      <div>\n        <cide-ele-select \n          id=\"sydsg_grade_level_id_sydsgl\"\n          label=\"Grade Level*\" \n          [options]=\"gradeLevelOptions()\" \n          formControlName=\"sydsg_grade_level_id_sydsgl\"\n          placeholder=\"Select grade level\"\n          size=\"sm\">\n        </cide-ele-select>\n      </div>\n      \n      <!-- Department -->\n      <div>\n        <cide-ele-select \n          id=\"sydsg_department_id_sydpt\"\n          label=\"Department*\" \n          [options]=\"departmentOptions()\" \n          formControlName=\"sydsg_department_id_sydpt\"\n          placeholder=\"Select department\"\n          size=\"sm\">\n        </cide-ele-select>\n      </div>\n      \n      <!-- Active Status -->\n      <div class=\"tw-flex tw-flex-col tw-justify-end\">\n        <cide-ele-input \n          id=\"sydsg_isactive\"\n          type=\"checkbox\"\n          label=\"Active\"\n          formControlName=\"sydsg_isactive\"\n          size=\"sm\">\n        </cide-ele-input>\n      </div>\n    </div>\n    \n    <!-- Second Row -->\n    <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-3 tw-items-end\">\n      <!-- Description -->\n      <div>\n        <cide-ele-textarea \n          id=\"sydsg_description\" \n          label=\"Description\" \n          formControlName=\"sydsg_description\"\n          placeholder=\"Designation description\"\n          rows=\"2\"\n          size=\"sm\">\n        </cide-ele-textarea>\n      </div>\n      \n      <!-- Entity ID (Hidden) -->\n      <div class=\"tw-hidden\">\n        <cide-ele-input \n          id=\"desg_entity_id_syen\" \n          label=\"Entity ID*\" \n          formControlName=\"desg_entity_id_syen\"\n          placeholder=\"Entity ID\"\n          size=\"sm\">\n        </cide-ele-input>\n      </div>\n      \n      <!-- Action Buttons -->\n      <div class=\"tw-flex tw-flex-col tw-justify-end\">\n        <div class=\"tw-flex tw-space-x-2\">\n          <button \n            cideEleButton \n            variant=\"primary\" \n            size=\"sm\" \n            type=\"submit\"\n            [disabled]=\"quickAddForm.invalid\"\n            class=\"tw-px-2 tw-py-1 tw-w-20\">\n            <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\n            {{ isEditMode() ? 'Update' : 'Add' }}\n          </button>\n          <button \n            cideEleButton \n            variant=\"outline\" \n            size=\"sm\" \n            type=\"button\"\n            (click)=\"resetQuickAddForm()\"\n            class=\"tw-px-2 tw-py-1 tw-w-16\">\n            <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">refresh</cide-ele-icon>\n            Reset\n          </button>\n        </div>\n      </div>\n    </div>\n    </form>\n    </div>\n  </div>\n\n\n\n  <!-- Header Section with Filters -->\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\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\">\n\n      <!-- Title -->\n      <div class=\"tw-flex tw-items-center tw-space-x-2\">\n        <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">work</cide-ele-icon>\n        <h5 class=\"tw-text-base tw-font-medium tw-text-gray-900 tw-m-0\">Designation Management</h5>\n      </div>\n\n      <!-- Actions -->\n      <div\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\">\n        <!-- Search functionality is handled by the data grid -->\n      </div>\n    </div>\n\n    <!-- Error Message -->\n    @if (error()) {\n    <div class=\"tw-mt-4 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\" 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    </div>\n  </div>\n\n  <!-- Main Content Area -->\n  <div class=\"tw-table-row\">\n    <div class=\"tw-table-cell tw-h-full tw-relative\">\n  \n  <!-- Data Grid Component -->\n  <div class=\"tw-h-full tw-overflow-auto\">\n    \n    <cide-ele-data-grid \n      [config]=\"gridConfig()\" \n      [templateRenderers]=\"getTemplateRenderers()\"\n      [actionHandlers]=\"actionHandlers\"\n      [serverSidePagination]=\"true\" \n      [totalServerItems]=\"totalItems()\" \n      [currentServerPage]=\"currentPage()\"\n      [currentServerPageSize]=\"pageSize()\" \n      (gridEvent)=\"onGridEvent($event)\">\n    </cide-ele-data-grid>\n  </div>\n\n    </div>\n  </div>\n\n</div>\n\n<!-- Designation Details Renderer Template -->\n<ng-template #designationDetailsRendererTemplate let-row=\"row\" let-value=\"value\">\n  <div class=\"tw-flex tw-items-center tw-min-w-0\">\n    <!-- Dynamic Icon based on type -->\n    <div class=\"tw-flex-shrink-0\">\n      <cide-ele-icon \n        [class]=\"row.type === 'department' ? 'tw-text-green-500' : 'tw-text-blue-500'\" \n        size=\"xs\">\n        {{ row.type === 'department' ? 'business' : 'work' }}\n      </cide-ele-icon>\n    </div>\n    \n    <!-- Details -->\n    <div class=\"tw-ml-3 tw-min-w-0 tw-flex-1\">\n      <div class=\"tw-flex tw-items-center tw-space-x-2\">\n        <div class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-truncate\" \n             [title]=\"row.name\">\n          {{ row.name || 'Untitled' }}\n        </div>\n        @if (row.type === 'department') {\n          <span class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-green-100 tw-text-green-800\">\n            Department\n          </span>\n        }\n      </div>\n      @if (row.description) {\n        <div class=\"tw-text-xs tw-text-gray-500 tw-truncate\" \n             [title]=\"row.description\">\n          {{ row.description }}\n        </div>\n      }\n    </div>\n  </div>\n</ng-template>\n\n<!-- Designation Status Renderer Template -->\n<ng-template #designationStatusRendererTemplate let-row=\"row\" let-value=\"value\">\n  <span class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-whitespace-nowrap\"\n        [ngClass]=\"getStatusClass(row.status)\">\n    {{ getStatusDisplay(row.status) }}\n  </span>\n</ng-template>\n\n<!-- Actions Dropdown Renderer Template -->\n<ng-template #actionsDropdownRendererTemplate let-row=\"row\" let-value=\"value\">\n  <cide-ele-dropdown \n    [items]=\"getDropdownItems(row)\"\n    [config]=\"{ triggerIcon: 'more_vert', triggerSize: 'sm' }\"\n    (itemClick)=\"onDropdownItemClick($event, row)\">\n  </cide-ele-dropdown>\n</ng-template> " }]
         }], ctorParameters: () => [] });
 
+var designationList_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    DesignationListComponent: DesignationListComponent
+});
+
 // Designation Management Components
 
 class GradeLevelListComponent {
+    // Dependency injection
+    destroyRef = inject(DestroyRef);
+    gradeLevelService = inject(GradeLevelManagementService);
+    appState = inject(AppStateHelperService);
+    fb = inject(NonNullableFormBuilder);
+    router = inject(Router);
+    // Modern ViewChild signals for template renderers (Angular 20 approach)
+    dragHandleRendererTemplate = viewChild.required('dragHandleRendererTemplate');
+    gradeLevelDetailsRendererTemplate = viewChild.required('gradeLevelDetailsRendererTemplate');
+    gradeLevelStatusRendererTemplate = viewChild.required('gradeLevelStatusRendererTemplate');
+    actionsDropdownRendererTemplate = viewChild.required('actionsDropdownRendererTemplate');
+    // Make Math available in template
+    Math = Math;
+    // Signals for reactive state management
+    gradeLevels = signal([], ...(ngDevMode ? [{ debugName: "gradeLevels" }] : []));
+    loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+    error = signal(null, ...(ngDevMode ? [{ debugName: "error" }] : []));
+    selectedItems = signal([], ...(ngDevMode ? [{ debugName: "selectedItems" }] : []));
+    searchTerm = signal('', ...(ngDevMode ? [{ debugName: "searchTerm" }] : []));
+    // Retrieved grade level data
+    retrievedGradeLevel = signal(null, ...(ngDevMode ? [{ debugName: "retrievedGradeLevel" }] : []));
+    // Edit mode flag
+    isEditMode = signal(false, ...(ngDevMode ? [{ debugName: "isEditMode" }] : []));
+    // Drag order management
+    originalOrder = signal([], ...(ngDevMode ? [{ debugName: "originalOrder" }] : []));
+    hasOrderChanged = signal(false, ...(ngDevMode ? [{ debugName: "hasOrderChanged" }] : []));
+    // Server-side pagination state
+    currentPage = signal(1, ...(ngDevMode ? [{ debugName: "currentPage" }] : []));
+    pageSize = signal(10, ...(ngDevMode ? [{ debugName: "pageSize" }] : []));
+    totalItems = signal(0, ...(ngDevMode ? [{ debugName: "totalItems" }] : []));
+    // Modern reactive form with typed controls
+    quickAddForm = this.fb.group({
+        sydsgl_name: this.fb.control('', [Validators.required, Validators.minLength(1), Validators.maxLength(20)]),
+        sydsgl_description: this.fb.control('', [Validators.maxLength(400)]),
+        sydsgl_order: this.fb.control(1, [Validators.required, Validators.min(1), Validators.max(100)]),
+        sydsgl_isactive: this.fb.control(true, [Validators.required]),
+        sydsgl_entity_id_syen: this.fb.control(this.appState.getActiveEntityId() || '', [Validators.required])
+    });
+    // Grid configuration signal
+    gridConfig = signal({
+        id: 'grade-level-list-grid',
+        title: '',
+        subtitle: '',
+        columns: [
+            {
+                key: 'dragHandle',
+                header: '',
+                type: 'custom',
+                width: '40px',
+                truncate: false,
+                align: 'center',
+                renderer: 'dragHandleRenderer'
+            },
+            {
+                key: 'details',
+                header: 'Grade Level',
+                type: 'custom',
+                width: 'auto',
+                truncate: true,
+                align: 'left',
+                renderer: 'gradeLevelDetailsRenderer'
+            },
+            {
+                key: 'sydsgl_isactive',
+                header: 'Status',
+                type: 'custom',
+                width: '100px',
+                truncate: false,
+                align: 'center',
+                renderer: 'gradeLevelStatusRenderer'
+            },
+            {
+                key: 'actions',
+                header: '',
+                type: 'custom',
+                width: '60px',
+                truncate: false,
+                align: 'center',
+                renderer: 'actionsDropdownRenderer'
+            }
+        ],
+        data: [],
+        trackBy: '_id',
+        dragDrop: {
+            enabled: true,
+            orderField: 'sydsgl_order',
+            dragClass: 'tw-opacity-50 tw-bg-blue-50',
+            dropClass: 'tw-bg-green-50'
+        },
+        pagination: {
+            enabled: true,
+            pageSize: 10,
+            pageSizeOptions: [10, 25, 50, 100],
+            showQuickJump: true,
+            showPageInfo: true,
+            showRefresh: true
+        },
+        search: {
+            enabled: true,
+            placeholder: 'Search grade levels...',
+            searchableColumns: ['sydsgl_name', 'sydsgl_description'],
+            debounceMs: 300
+        },
+        loading: {
+            useDefer: true,
+            skeletonRows: 5,
+            showOverlay: false
+        },
+        scroll: {
+            enabled: true,
+            maxHeight: '',
+            minHeight: '',
+            stickyHeader: true,
+            virtualScroll: false,
+            rowHeight: 50
+        },
+        responsive: true,
+        striped: false,
+        bordered: true,
+        compact: false,
+        tableClass: 'tw-table-fixed tw-w-full tw-rounded-none',
+        onRefresh: 'onGradeLevelRefresh'
+    }, ...(ngDevMode ? [{ debugName: "gridConfig" }] : []));
+    // Template renderers using Angular best practices
+    templateRenderers = computed(() => ({
+        dragHandleRenderer: this.dragHandleRendererTemplate(),
+        gradeLevelDetailsRenderer: this.gradeLevelDetailsRendererTemplate(),
+        gradeLevelStatusRenderer: this.gradeLevelStatusRendererTemplate(),
+        actionsDropdownRenderer: this.actionsDropdownRendererTemplate()
+    }), ...(ngDevMode ? [{ debugName: "templateRenderers" }] : []));
     /**
      * Get template renderers for data grid
      */
     getTemplateRenderers() {
         return this.templateRenderers();
     }
+    // Mixed renderers (templates + string functions)
+    customRenderers = computed(() => ({
+        ...this.templateRenderers()
+    }), ...(ngDevMode ? [{ debugName: "customRenderers" }] : []));
     /**
      * Get custom renderers adapted for current data grid compatibility
      */
     getCustomRenderers() {
         return {};
     }
+    // Action handlers for grid actions
+    actionHandlers = {
+        onEditGradeLevel: (row) => this.editGradeLevel(row._id || ''),
+        onToggleGradeLevel: (row) => this.toggleGradeLevelStatus(row._id || ''),
+        onDeleteGradeLevel: (row) => this.deleteGradeLevel(row._id || ''),
+        onGradeLevelRowClick: (row) => this.onGradeLevelRowClick(row),
+        onGradeLevelRefresh: () => this.onGradeLevelRefresh(),
+        resetOrder: () => this.resetDragOrder(),
+        saveOrder: () => this.saveGradeLevelOrder()
+    };
+    // Computed properties
+    filteredItems = computed(() => {
+        const items = this.gradeLevels();
+        const search = this.searchTerm()?.toLowerCase();
+        if (!search)
+            return items;
+        return items.filter(item => {
+            return item.sydsgl_name?.toLowerCase().includes(search) ||
+                item.sydsgl_description?.toLowerCase().includes(search);
+        });
+    }, ...(ngDevMode ? [{ debugName: "filteredItems" }] : []));
+    hasSelection = computed(() => this.selectedItems().length > 0, ...(ngDevMode ? [{ debugName: "hasSelection" }] : []));
+    // Pagination computed properties
+    totalPages = computed(() => Math.ceil(this.totalItems() / this.pageSize()), ...(ngDevMode ? [{ debugName: "totalPages" }] : []));
+    hasNextPage = computed(() => this.currentPage() < this.totalPages(), ...(ngDevMode ? [{ debugName: "hasNextPage" }] : []));
+    hasPreviousPage = computed(() => this.currentPage() > 1, ...(ngDevMode ? [{ debugName: "hasPreviousPage" }] : []));
+    // Computed property for next order
+    nextOrder = computed(() => this.calculateNextOrder(), ...(ngDevMode ? [{ debugName: "nextOrder" }] : []));
     // Modern constructor with effects for initialization
     constructor() {
-        // Dependency injection
-        this.destroyRef = inject(DestroyRef);
-        this.gradeLevelService = inject(GradeLevelManagementService);
-        this.appState = inject(AppStateHelperService);
-        this.fb = inject(NonNullableFormBuilder);
-        this.router = inject(Router);
-        // Modern ViewChild signals for template renderers (Angular 20 approach)
-        this.dragHandleRendererTemplate = viewChild.required('dragHandleRendererTemplate');
-        this.gradeLevelDetailsRendererTemplate = viewChild.required('gradeLevelDetailsRendererTemplate');
-        this.gradeLevelStatusRendererTemplate = viewChild.required('gradeLevelStatusRendererTemplate');
-        this.actionsDropdownRendererTemplate = viewChild.required('actionsDropdownRendererTemplate');
-        // Make Math available in template
-        this.Math = Math;
-        // Signals for reactive state management
-        this.gradeLevels = signal([]);
-        this.loading = signal(false);
-        this.error = signal(null);
-        this.selectedItems = signal([]);
-        this.searchTerm = signal('');
-        // Retrieved grade level data
-        this.retrievedGradeLevel = signal(null);
-        // Edit mode flag
-        this.isEditMode = signal(false);
-        // Drag order management
-        this.originalOrder = signal([]);
-        this.hasOrderChanged = signal(false);
-        // Server-side pagination state
-        this.currentPage = signal(1);
-        this.pageSize = signal(10);
-        this.totalItems = signal(0);
-        // Modern reactive form with typed controls
-        this.quickAddForm = this.fb.group({
-            sydsgl_name: this.fb.control('', [Validators.required, Validators.minLength(1), Validators.maxLength(20)]),
-            sydsgl_description: this.fb.control('', [Validators.maxLength(400)]),
-            sydsgl_order: this.fb.control(1, [Validators.required, Validators.min(1), Validators.max(100)]),
-            sydsgl_isactive: this.fb.control(true, [Validators.required]),
-            sydsgl_entity_id_syen: this.fb.control(this.appState.getActiveEntityId() || '', [Validators.required])
-        });
-        // Grid configuration signal
-        this.gridConfig = signal({
-            id: 'grade-level-list-grid',
-            title: '',
-            subtitle: '',
-            columns: [
-                {
-                    key: 'dragHandle',
-                    header: '',
-                    type: 'custom',
-                    width: '40px',
-                    truncate: false,
-                    align: 'center',
-                    renderer: 'dragHandleRenderer'
-                },
-                {
-                    key: 'details',
-                    header: 'Grade Level',
-                    type: 'custom',
-                    width: 'auto',
-                    truncate: true,
-                    align: 'left',
-                    renderer: 'gradeLevelDetailsRenderer'
-                },
-                {
-                    key: 'sydsgl_isactive',
-                    header: 'Status',
-                    type: 'custom',
-                    width: '100px',
-                    truncate: false,
-                    align: 'center',
-                    renderer: 'gradeLevelStatusRenderer'
-                },
-                {
-                    key: 'actions',
-                    header: '',
-                    type: 'custom',
-                    width: '60px',
-                    truncate: false,
-                    align: 'center',
-                    renderer: 'actionsDropdownRenderer'
-                }
-            ],
-            data: [],
-            trackBy: '_id',
-            dragDrop: {
-                enabled: true,
-                orderField: 'sydsgl_order',
-                dragClass: 'tw-opacity-50 tw-bg-blue-50',
-                dropClass: 'tw-bg-green-50'
-            },
-            pagination: {
-                enabled: true,
-                pageSize: 10,
-                pageSizeOptions: [10, 25, 50, 100],
-                showQuickJump: true,
-                showPageInfo: true,
-                showRefresh: true
-            },
-            search: {
-                enabled: true,
-                placeholder: 'Search grade levels...',
-                searchableColumns: ['sydsgl_name', 'sydsgl_description'],
-                debounceMs: 300
-            },
-            loading: {
-                useDefer: true,
-                skeletonRows: 5,
-                showOverlay: false
-            },
-            scroll: {
-                enabled: true,
-                maxHeight: '',
-                minHeight: '',
-                stickyHeader: true,
-                virtualScroll: false,
-                rowHeight: 50
-            },
-            responsive: true,
-            striped: false,
-            bordered: true,
-            compact: false,
-            tableClass: 'tw-table-fixed tw-w-full tw-rounded-none',
-            onRefresh: 'onGradeLevelRefresh'
-        });
-        // Template renderers using Angular best practices
-        this.templateRenderers = computed(() => ({
-            dragHandleRenderer: this.dragHandleRendererTemplate(),
-            gradeLevelDetailsRenderer: this.gradeLevelDetailsRendererTemplate(),
-            gradeLevelStatusRenderer: this.gradeLevelStatusRendererTemplate(),
-            actionsDropdownRenderer: this.actionsDropdownRendererTemplate()
-        }));
-        // Mixed renderers (templates + string functions)
-        this.customRenderers = computed(() => ({
-            ...this.templateRenderers()
-        }));
-        // Action handlers for grid actions
-        this.actionHandlers = {
-            onEditGradeLevel: (row) => this.editGradeLevel(row._id || ''),
-            onToggleGradeLevel: (row) => this.toggleGradeLevelStatus(row._id || ''),
-            onDeleteGradeLevel: (row) => this.deleteGradeLevel(row._id || ''),
-            onGradeLevelRowClick: (row) => this.onGradeLevelRowClick(row),
-            onGradeLevelRefresh: () => this.onGradeLevelRefresh(),
-            resetOrder: () => this.resetDragOrder(),
-            saveOrder: () => this.saveGradeLevelOrder()
-        };
-        // Computed properties
-        this.filteredItems = computed(() => {
-            const items = this.gradeLevels();
-            const search = this.searchTerm()?.toLowerCase();
-            if (!search)
-                return items;
-            return items.filter(item => {
-                return item.sydsgl_name?.toLowerCase().includes(search) ||
-                    item.sydsgl_description?.toLowerCase().includes(search);
-            });
-        });
-        this.hasSelection = computed(() => this.selectedItems().length > 0);
-        // Pagination computed properties
-        this.totalPages = computed(() => Math.ceil(this.totalItems() / this.pageSize()));
-        this.hasNextPage = computed(() => this.currentPage() < this.totalPages());
-        this.hasPreviousPage = computed(() => this.currentPage() > 1);
-        // Computed property for next order
-        this.nextOrder = computed(() => this.calculateNextOrder());
         this.initializeComponent();
         this.destroyRef.onDestroy(() => {
             this.cleanupEventListeners();
@@ -4891,10 +5047,10 @@ class GradeLevelListComponent {
     trackByItemId(index, item) {
         return item._id || '';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: GradeLevelListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: GradeLevelListComponent, isStandalone: true, selector: "cide-core-app-grade-level-list", viewQueries: [{ propertyName: "dragHandleRendererTemplate", first: true, predicate: ["dragHandleRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "gradeLevelDetailsRendererTemplate", first: true, predicate: ["gradeLevelDetailsRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "gradeLevelStatusRendererTemplate", first: true, predicate: ["gradeLevelStatusRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "actionsDropdownRendererTemplate", first: true, predicate: ["actionsDropdownRendererTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Grade Level List Container -->\n<div class=\"tw-table tw-w-full tw-h-full\">\n\n  <!-- Quick Add Form Section -->\n  <div class=\"tw-table-row tw-h-0\">\n    <div class=\"tw-table-cell tw-px-6 tw-py-4 tw-border-b tw-border-gray-200 tw-bg-white\">\n    <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\n      <div class=\"tw-flex tw-items-center tw-space-x-3\">\n        <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\n        <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-m-0\">{{ isEditMode() ? 'Edit Grade Level' : 'Quick Add Grade Level' }}</h6>\n      </div>\n    </div>\n    \n    <form [formGroup]=\"quickAddForm\" (ngSubmit)=\"quickAddGradeLevel()\">\n    <!-- First Row -->\n    <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-3 tw-mb-3\">\n      <!-- Grade Level Name -->\n      <div>\n        <cide-ele-input \n          id=\"sydsgl_name\" \n          label=\"Name*\" \n          formControlName=\"sydsgl_name\"\n          placeholder=\"Grade level name\"\n          size=\"sm\">\n        </cide-ele-input>\n      </div>\n      \n      <!-- Active Status -->\n      <div class=\"tw-flex tw-flex-col tw-justify-end\">\n        <cide-ele-input \n          id=\"sydsgl_isactive\"\n          type=\"checkbox\"\n          label=\"Active\"\n          formControlName=\"sydsgl_isactive\"\n          size=\"sm\">\n        </cide-ele-input>\n      </div>\n    </div>\n    \n    <!-- Second Row -->\n    <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-3 tw-items-end\">\n      <!-- Description -->\n      <div>\n        <cide-ele-textarea \n          id=\"sydsgl_description\" \n          label=\"Description\" \n          formControlName=\"sydsgl_description\"\n          placeholder=\"Grade level description\"\n          rows=\"2\"\n          size=\"sm\">\n        </cide-ele-textarea>\n      </div>\n      \n      <!-- Entity ID (Hidden) -->\n      <div class=\"tw-hidden\">\n        <cide-ele-input \n          id=\"sydsgl_entity_id_syen\" \n          label=\"Entity ID*\" \n          formControlName=\"sydsgl_entity_id_syen\"\n          placeholder=\"Entity ID\"\n          size=\"sm\">\n        </cide-ele-input>\n      </div>\n      \n      <!-- Action Buttons -->\n      <div class=\"tw-flex tw-flex-col tw-justify-end\">\n        <div class=\"tw-flex tw-space-x-2\">\n          <button \n            cideEleButton \n            variant=\"primary\" \n            size=\"sm\" \n            type=\"submit\"\n            [disabled]=\"quickAddForm.invalid\"\n            class=\"tw-px-2 tw-py-1 tw-w-20\">\n            <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\n            {{ isEditMode() ? 'Update' : 'Add' }}\n          </button>\n          <button \n            cideEleButton \n            variant=\"outline\" \n            size=\"sm\" \n            type=\"button\"\n            (click)=\"resetQuickAddForm()\"\n            class=\"tw-px-2 tw-py-1 tw-w-16\">\n            <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">refresh</cide-ele-icon>\n            Reset\n          </button>\n        </div>\n      </div>\n    </div>\n    </form>\n    </div>\n  </div>\n\n  <!-- Header Section with Filters -->\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\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\">\n\n      <!-- Title -->\n      <div class=\"tw-flex tw-items-center tw-space-x-2\">\n        <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">school</cide-ele-icon>\n        <h5 class=\"tw-text-base tw-font-medium tw-text-gray-900 tw-m-0\">Grade Level Management</h5>\n      </div>\n\n      <!-- Actions -->\n      <div\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\">\n        <!-- Search functionality is handled by the data grid -->\n      </div>\n    </div>\n\n    <!-- Error Message -->\n    @if (error()) {\n    <div class=\"tw-mt-4 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\" 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    </div>\n  </div>\n\n  <!-- Main Content Area -->\n  <div class=\"tw-table-row\">\n    <div class=\"tw-table-cell tw-h-full tw-relative\">\n  \n  <!-- Data Grid Component -->\n  <div class=\"tw-h-full tw-overflow-auto\">\n    \n    <cide-ele-data-grid \n      [config]=\"gridConfig()\" \n      [templateRenderers]=\"getTemplateRenderers()\"\n      [actionHandlers]=\"actionHandlers\"\n      [serverSidePagination]=\"true\" \n      [totalServerItems]=\"totalItems()\" \n      [currentServerPage]=\"currentPage()\"\n      [currentServerPageSize]=\"pageSize()\" \n      [dragDropEnabled]=\"true\"\n      (gridEvent)=\"onGridEvent($event)\">\n    </cide-ele-data-grid>\n  </div>\n\n    </div>\n  </div>\n\n</div>\n\n<!-- Drag Handle Renderer Template -->\n<ng-template #dragHandleRendererTemplate let-row=\"row\" let-value=\"value\">\n  <div class=\"tw-flex tw-items-center tw-justify-center tw-w-full tw-h-full tw-cursor-move drag-handle\">\n    <cide-ele-icon \n      class=\"tw-text-gray-400 hover:tw-text-gray-600 tw-transition-colors\" \n      size=\"xs\">\n      drag_indicator\n    </cide-ele-icon>\n  </div>\n</ng-template>\n\n<!-- Grade Level Details Renderer Template -->\n<ng-template #gradeLevelDetailsRendererTemplate let-row=\"row\" let-value=\"value\">\n  <div class=\"tw-flex tw-items-center tw-min-w-0\">\n    <!-- Grade Level Icon -->\n    <div class=\"tw-flex-shrink-0\">\n      <cide-ele-icon \n        class=\"tw-text-gray-400\" \n        size=\"xs\">\n        school\n      </cide-ele-icon>\n    </div>\n    \n    <!-- Grade Level Details -->\n    <div class=\"tw-ml-3 tw-min-w-0 tw-flex-1\">\n      <div class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-truncate\" \n           [title]=\"row.sydsgl_name\">\n        {{ row.sydsgl_name || 'Untitled' }}\n      </div>\n      @if (row.sydsgl_description) {\n        <div class=\"tw-text-xs tw-text-gray-500 tw-truncate\" \n             [title]=\"row.sydsgl_description\">\n          {{ row.sydsgl_description }}\n        </div>\n      }\n    </div>\n  </div>\n</ng-template>\n\n<!-- Grade Level Status Renderer Template -->\n<ng-template #gradeLevelStatusRendererTemplate let-row=\"row\" let-value=\"value\">\n  <span class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-whitespace-nowrap\"\n        [ngClass]=\"getStatusClass(row.sydsgl_isactive)\">\n    {{ getStatusDisplay(row.sydsgl_isactive) }}\n  </span>\n</ng-template>\n\n<!-- Actions Dropdown Renderer Template -->\n<ng-template #actionsDropdownRendererTemplate let-row=\"row\" let-value=\"value\">\n  <cide-ele-dropdown \n    [items]=\"getDropdownItems(row)\"\n    [config]=\"{ triggerIcon: 'more_vert', triggerSize: 'sm' }\"\n    (itemClick)=\"onDropdownItemClick($event, row)\">\n  </cide-ele-dropdown>\n</ng-template> ", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: CideEleDataGridComponent, selector: "cide-ele-data-grid", inputs: ["config", "customRenderers", "templateRenderers", "customFormatters", "actionHandlers", "serverSidePagination", "totalServerItems", "currentServerPage", "currentServerPageSize", "dragDropEnabled"], outputs: ["gridEvent"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton]", 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: 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: CideTextareaComponent, selector: "cide-ele-textarea", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "minlength", "maxlength", "rows", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput"], outputs: ["ngModelChange"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideEleDropdownComponent, selector: "cide-ele-dropdown", inputs: ["items", "config", "triggerTemplate", "menuTemplate"], outputs: ["itemClick", "dropdownToggle"] }] }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: GradeLevelListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: GradeLevelListComponent, isStandalone: true, selector: "cide-core-app-grade-level-list", viewQueries: [{ propertyName: "dragHandleRendererTemplate", first: true, predicate: ["dragHandleRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "gradeLevelDetailsRendererTemplate", first: true, predicate: ["gradeLevelDetailsRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "gradeLevelStatusRendererTemplate", first: true, predicate: ["gradeLevelStatusRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "actionsDropdownRendererTemplate", first: true, predicate: ["actionsDropdownRendererTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Grade Level List Container -->\n<div class=\"tw-table tw-w-full tw-h-full\">\n\n  <!-- Quick Add Form Section -->\n  <div class=\"tw-table-row tw-h-0\">\n    <div class=\"tw-table-cell tw-px-6 tw-py-4 tw-border-b tw-border-gray-200 tw-bg-white\">\n    <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\n      <div class=\"tw-flex tw-items-center tw-space-x-3\">\n        <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\n        <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-m-0\">{{ isEditMode() ? 'Edit Grade Level' : 'Quick Add Grade Level' }}</h6>\n      </div>\n    </div>\n    \n    <form [formGroup]=\"quickAddForm\" (ngSubmit)=\"quickAddGradeLevel()\">\n    <!-- First Row -->\n    <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-3 tw-mb-3\">\n      <!-- Grade Level Name -->\n      <div>\n        <cide-ele-input \n          id=\"sydsgl_name\" \n          label=\"Name*\" \n          formControlName=\"sydsgl_name\"\n          placeholder=\"Grade level name\"\n          size=\"sm\">\n        </cide-ele-input>\n      </div>\n      \n      <!-- Active Status -->\n      <div class=\"tw-flex tw-flex-col tw-justify-end\">\n        <cide-ele-input \n          id=\"sydsgl_isactive\"\n          type=\"checkbox\"\n          label=\"Active\"\n          formControlName=\"sydsgl_isactive\"\n          size=\"sm\">\n        </cide-ele-input>\n      </div>\n    </div>\n    \n    <!-- Second Row -->\n    <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-3 tw-items-end\">\n      <!-- Description -->\n      <div>\n        <cide-ele-textarea \n          id=\"sydsgl_description\" \n          label=\"Description\" \n          formControlName=\"sydsgl_description\"\n          placeholder=\"Grade level description\"\n          rows=\"2\"\n          size=\"sm\">\n        </cide-ele-textarea>\n      </div>\n      \n      <!-- Entity ID (Hidden) -->\n      <div class=\"tw-hidden\">\n        <cide-ele-input \n          id=\"sydsgl_entity_id_syen\" \n          label=\"Entity ID*\" \n          formControlName=\"sydsgl_entity_id_syen\"\n          placeholder=\"Entity ID\"\n          size=\"sm\">\n        </cide-ele-input>\n      </div>\n      \n      <!-- Action Buttons -->\n      <div class=\"tw-flex tw-flex-col tw-justify-end\">\n        <div class=\"tw-flex tw-space-x-2\">\n          <button \n            cideEleButton \n            variant=\"primary\" \n            size=\"sm\" \n            type=\"submit\"\n            [disabled]=\"quickAddForm.invalid\"\n            class=\"tw-px-2 tw-py-1 tw-w-20\">\n            <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\n            {{ isEditMode() ? 'Update' : 'Add' }}\n          </button>\n          <button \n            cideEleButton \n            variant=\"outline\" \n            size=\"sm\" \n            type=\"button\"\n            (click)=\"resetQuickAddForm()\"\n            class=\"tw-px-2 tw-py-1 tw-w-16\">\n            <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">refresh</cide-ele-icon>\n            Reset\n          </button>\n        </div>\n      </div>\n    </div>\n    </form>\n    </div>\n  </div>\n\n  <!-- Header Section with Filters -->\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\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\">\n\n      <!-- Title -->\n      <div class=\"tw-flex tw-items-center tw-space-x-2\">\n        <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">school</cide-ele-icon>\n        <h5 class=\"tw-text-base tw-font-medium tw-text-gray-900 tw-m-0\">Grade Level Management</h5>\n      </div>\n\n      <!-- Actions -->\n      <div\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\">\n        <!-- Search functionality is handled by the data grid -->\n      </div>\n    </div>\n\n    <!-- Error Message -->\n    @if (error()) {\n    <div class=\"tw-mt-4 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\" 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    </div>\n  </div>\n\n  <!-- Main Content Area -->\n  <div class=\"tw-table-row\">\n    <div class=\"tw-table-cell tw-h-full tw-relative\">\n  \n  <!-- Data Grid Component -->\n  <div class=\"tw-h-full tw-overflow-auto\">\n    \n    <cide-ele-data-grid \n      [config]=\"gridConfig()\" \n      [templateRenderers]=\"getTemplateRenderers()\"\n      [actionHandlers]=\"actionHandlers\"\n      [serverSidePagination]=\"true\" \n      [totalServerItems]=\"totalItems()\" \n      [currentServerPage]=\"currentPage()\"\n      [currentServerPageSize]=\"pageSize()\" \n      [dragDropEnabled]=\"true\"\n      (gridEvent)=\"onGridEvent($event)\">\n    </cide-ele-data-grid>\n  </div>\n\n    </div>\n  </div>\n\n</div>\n\n<!-- Drag Handle Renderer Template -->\n<ng-template #dragHandleRendererTemplate let-row=\"row\" let-value=\"value\">\n  <div class=\"tw-flex tw-items-center tw-justify-center tw-w-full tw-h-full tw-cursor-move drag-handle\">\n    <cide-ele-icon \n      class=\"tw-text-gray-400 hover:tw-text-gray-600 tw-transition-colors\" \n      size=\"xs\">\n      drag_indicator\n    </cide-ele-icon>\n  </div>\n</ng-template>\n\n<!-- Grade Level Details Renderer Template -->\n<ng-template #gradeLevelDetailsRendererTemplate let-row=\"row\" let-value=\"value\">\n  <div class=\"tw-flex tw-items-center tw-min-w-0\">\n    <!-- Grade Level Icon -->\n    <div class=\"tw-flex-shrink-0\">\n      <cide-ele-icon \n        class=\"tw-text-gray-400\" \n        size=\"xs\">\n        school\n      </cide-ele-icon>\n    </div>\n    \n    <!-- Grade Level Details -->\n    <div class=\"tw-ml-3 tw-min-w-0 tw-flex-1\">\n      <div class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-truncate\" \n           [title]=\"row.sydsgl_name\">\n        {{ row.sydsgl_name || 'Untitled' }}\n      </div>\n      @if (row.sydsgl_description) {\n        <div class=\"tw-text-xs tw-text-gray-500 tw-truncate\" \n             [title]=\"row.sydsgl_description\">\n          {{ row.sydsgl_description }}\n        </div>\n      }\n    </div>\n  </div>\n</ng-template>\n\n<!-- Grade Level Status Renderer Template -->\n<ng-template #gradeLevelStatusRendererTemplate let-row=\"row\" let-value=\"value\">\n  <span class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-whitespace-nowrap\"\n        [ngClass]=\"getStatusClass(row.sydsgl_isactive)\">\n    {{ getStatusDisplay(row.sydsgl_isactive) }}\n  </span>\n</ng-template>\n\n<!-- Actions Dropdown Renderer Template -->\n<ng-template #actionsDropdownRendererTemplate let-row=\"row\" let-value=\"value\">\n  <cide-ele-dropdown \n    [items]=\"getDropdownItems(row)\"\n    [config]=\"{ triggerIcon: 'more_vert', triggerSize: 'sm' }\"\n    (itemClick)=\"onDropdownItemClick($event, row)\">\n  </cide-ele-dropdown>\n</ng-template> ", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: CideEleDataGridComponent, selector: "cide-ele-data-grid", inputs: ["config", "customRenderers", "templateRenderers", "customFormatters", "actionHandlers", "serverSidePagination", "totalServerItems", "currentServerPage", "currentServerPageSize", "dragDropEnabled"], outputs: ["gridEvent"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton]", 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: 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: CideTextareaComponent, selector: "cide-ele-textarea", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "minlength", "maxlength", "rows", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput"], outputs: ["ngModelChange"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideEleDropdownComponent, selector: "cide-ele-dropdown", inputs: ["items", "config", "triggerTemplate", "menuTemplate"], outputs: ["itemClick", "dropdownToggle"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: GradeLevelListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: GradeLevelListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cide-core-app-grade-level-list', standalone: true, imports: [
                         CommonModule,
@@ -4910,9 +5066,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                     ], template: "<!-- Grade Level List Container -->\n<div class=\"tw-table tw-w-full tw-h-full\">\n\n  <!-- Quick Add Form Section -->\n  <div class=\"tw-table-row tw-h-0\">\n    <div class=\"tw-table-cell tw-px-6 tw-py-4 tw-border-b tw-border-gray-200 tw-bg-white\">\n    <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\n      <div class=\"tw-flex tw-items-center tw-space-x-3\">\n        <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\n        <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-m-0\">{{ isEditMode() ? 'Edit Grade Level' : 'Quick Add Grade Level' }}</h6>\n      </div>\n    </div>\n    \n    <form [formGroup]=\"quickAddForm\" (ngSubmit)=\"quickAddGradeLevel()\">\n    <!-- First Row -->\n    <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-3 tw-mb-3\">\n      <!-- Grade Level Name -->\n      <div>\n        <cide-ele-input \n          id=\"sydsgl_name\" \n          label=\"Name*\" \n          formControlName=\"sydsgl_name\"\n          placeholder=\"Grade level name\"\n          size=\"sm\">\n        </cide-ele-input>\n      </div>\n      \n      <!-- Active Status -->\n      <div class=\"tw-flex tw-flex-col tw-justify-end\">\n        <cide-ele-input \n          id=\"sydsgl_isactive\"\n          type=\"checkbox\"\n          label=\"Active\"\n          formControlName=\"sydsgl_isactive\"\n          size=\"sm\">\n        </cide-ele-input>\n      </div>\n    </div>\n    \n    <!-- Second Row -->\n    <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-3 tw-items-end\">\n      <!-- Description -->\n      <div>\n        <cide-ele-textarea \n          id=\"sydsgl_description\" \n          label=\"Description\" \n          formControlName=\"sydsgl_description\"\n          placeholder=\"Grade level description\"\n          rows=\"2\"\n          size=\"sm\">\n        </cide-ele-textarea>\n      </div>\n      \n      <!-- Entity ID (Hidden) -->\n      <div class=\"tw-hidden\">\n        <cide-ele-input \n          id=\"sydsgl_entity_id_syen\" \n          label=\"Entity ID*\" \n          formControlName=\"sydsgl_entity_id_syen\"\n          placeholder=\"Entity ID\"\n          size=\"sm\">\n        </cide-ele-input>\n      </div>\n      \n      <!-- Action Buttons -->\n      <div class=\"tw-flex tw-flex-col tw-justify-end\">\n        <div class=\"tw-flex tw-space-x-2\">\n          <button \n            cideEleButton \n            variant=\"primary\" \n            size=\"sm\" \n            type=\"submit\"\n            [disabled]=\"quickAddForm.invalid\"\n            class=\"tw-px-2 tw-py-1 tw-w-20\">\n            <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\n            {{ isEditMode() ? 'Update' : 'Add' }}\n          </button>\n          <button \n            cideEleButton \n            variant=\"outline\" \n            size=\"sm\" \n            type=\"button\"\n            (click)=\"resetQuickAddForm()\"\n            class=\"tw-px-2 tw-py-1 tw-w-16\">\n            <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">refresh</cide-ele-icon>\n            Reset\n          </button>\n        </div>\n      </div>\n    </div>\n    </form>\n    </div>\n  </div>\n\n  <!-- Header Section with Filters -->\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\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\">\n\n      <!-- Title -->\n      <div class=\"tw-flex tw-items-center tw-space-x-2\">\n        <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">school</cide-ele-icon>\n        <h5 class=\"tw-text-base tw-font-medium tw-text-gray-900 tw-m-0\">Grade Level Management</h5>\n      </div>\n\n      <!-- Actions -->\n      <div\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\">\n        <!-- Search functionality is handled by the data grid -->\n      </div>\n    </div>\n\n    <!-- Error Message -->\n    @if (error()) {\n    <div class=\"tw-mt-4 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\" 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    </div>\n  </div>\n\n  <!-- Main Content Area -->\n  <div class=\"tw-table-row\">\n    <div class=\"tw-table-cell tw-h-full tw-relative\">\n  \n  <!-- Data Grid Component -->\n  <div class=\"tw-h-full tw-overflow-auto\">\n    \n    <cide-ele-data-grid \n      [config]=\"gridConfig()\" \n      [templateRenderers]=\"getTemplateRenderers()\"\n      [actionHandlers]=\"actionHandlers\"\n      [serverSidePagination]=\"true\" \n      [totalServerItems]=\"totalItems()\" \n      [currentServerPage]=\"currentPage()\"\n      [currentServerPageSize]=\"pageSize()\" \n      [dragDropEnabled]=\"true\"\n      (gridEvent)=\"onGridEvent($event)\">\n    </cide-ele-data-grid>\n  </div>\n\n    </div>\n  </div>\n\n</div>\n\n<!-- Drag Handle Renderer Template -->\n<ng-template #dragHandleRendererTemplate let-row=\"row\" let-value=\"value\">\n  <div class=\"tw-flex tw-items-center tw-justify-center tw-w-full tw-h-full tw-cursor-move drag-handle\">\n    <cide-ele-icon \n      class=\"tw-text-gray-400 hover:tw-text-gray-600 tw-transition-colors\" \n      size=\"xs\">\n      drag_indicator\n    </cide-ele-icon>\n  </div>\n</ng-template>\n\n<!-- Grade Level Details Renderer Template -->\n<ng-template #gradeLevelDetailsRendererTemplate let-row=\"row\" let-value=\"value\">\n  <div class=\"tw-flex tw-items-center tw-min-w-0\">\n    <!-- Grade Level Icon -->\n    <div class=\"tw-flex-shrink-0\">\n      <cide-ele-icon \n        class=\"tw-text-gray-400\" \n        size=\"xs\">\n        school\n      </cide-ele-icon>\n    </div>\n    \n    <!-- Grade Level Details -->\n    <div class=\"tw-ml-3 tw-min-w-0 tw-flex-1\">\n      <div class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-truncate\" \n           [title]=\"row.sydsgl_name\">\n        {{ row.sydsgl_name || 'Untitled' }}\n      </div>\n      @if (row.sydsgl_description) {\n        <div class=\"tw-text-xs tw-text-gray-500 tw-truncate\" \n             [title]=\"row.sydsgl_description\">\n          {{ row.sydsgl_description }}\n        </div>\n      }\n    </div>\n  </div>\n</ng-template>\n\n<!-- Grade Level Status Renderer Template -->\n<ng-template #gradeLevelStatusRendererTemplate let-row=\"row\" let-value=\"value\">\n  <span class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-whitespace-nowrap\"\n        [ngClass]=\"getStatusClass(row.sydsgl_isactive)\">\n    {{ getStatusDisplay(row.sydsgl_isactive) }}\n  </span>\n</ng-template>\n\n<!-- Actions Dropdown Renderer Template -->\n<ng-template #actionsDropdownRendererTemplate let-row=\"row\" let-value=\"value\">\n  <cide-ele-dropdown \n    [items]=\"getDropdownItems(row)\"\n    [config]=\"{ triggerIcon: 'more_vert', triggerSize: 'sm' }\"\n    (itemClick)=\"onDropdownItemClick($event, row)\">\n  </cide-ele-dropdown>\n</ng-template> " }]
         }], ctorParameters: () => [] });
 
+var gradeLevelList_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    GradeLevelListComponent: GradeLevelListComponent
+});
+
 // Grade Level Management Components
 
 class PageManagementService {
+    http;
     constructor(http) {
         this.http = http;
     }
@@ -4994,10 +5156,10 @@ class PageManagementService {
         console.error('Page Management Service Error:', errorMessage);
         return throwError(() => new Error(errorMessage));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PageManagementService, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PageManagementService, providedIn: 'root' }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: PageManagementService, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: PageManagementService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PageManagementService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: PageManagementService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -5005,110 +5167,110 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
         }], ctorParameters: () => [{ type: i1.HttpClient }] });
 
 class PageListComponent {
-    constructor() {
-        // Dependency injection
-        this.destroyRef = inject(DestroyRef);
-        this.pageService = inject(PageManagementService);
-        this.appState = inject(AppStateHelperService);
-        this.router = inject(Router);
-        // Modern ViewChild signals for template renderers (Angular 20 approach)
-        this.pageDetailsRendererTemplate = viewChild.required('pageDetailsRendererTemplate');
-        this.pageStatusRendererTemplate = viewChild.required('pageStatusRendererTemplate');
-        this.actionsDropdownRendererTemplate = viewChild.required('actionsDropdownRendererTemplate');
-        // Make Math available in template
-        this.Math = Math;
-        // Signals for reactive state management
-        this.pages = signal([]);
-        this.loading = signal(false);
-        this.error = signal(null);
-        this.selectedItems = signal([]);
-        this.searchTerm = signal('');
-        // Pagination signals
-        this.currentPage = signal(1);
-        this.pageSize = signal(10);
-        this.totalItems = signal(0);
-        // Grid configuration signal
-        this.gridConfig = signal({
-            id: 'page-list-grid',
-            columns: [
-                {
-                    key: 'details',
-                    header: 'Page Details',
-                    type: 'custom',
-                    width: 'auto',
-                    truncate: true,
-                    align: 'left',
-                    renderer: 'pageDetailsRenderer'
-                },
-                {
-                    key: 'sypg_page_code',
-                    header: 'Page Code',
-                    type: 'text',
-                    width: '150px',
-                    truncate: true,
-                    align: 'left'
-                },
-                {
-                    key: 'sypg_isactive',
-                    header: 'Status',
-                    type: 'custom',
-                    width: '100px',
-                    truncate: false,
-                    align: 'center',
-                    renderer: 'pageStatusRenderer'
-                },
-                {
-                    key: 'actions',
-                    header: '',
-                    type: 'custom',
-                    width: '120px',
-                    truncate: false,
-                    align: 'center',
-                    renderer: 'actionsDropdownRenderer'
-                }
-            ],
-            data: [],
-            trackBy: '_id',
-            pagination: {
-                enabled: true,
-                pageSize: 10,
-                pageSizeOptions: [10, 25, 50, 100],
-                showQuickJump: true,
-                showPageInfo: true,
-                showRefresh: true
-            },
-            search: {
-                enabled: true,
-                placeholder: 'Search pages...',
-                searchableColumns: ['sypg_title', 'sypg_desc', 'sypg_page_code'],
-                debounceMs: 300
+    // Dependency injection
+    destroyRef = inject(DestroyRef);
+    pageService = inject(PageManagementService);
+    appState = inject(AppStateHelperService);
+    router = inject(Router);
+    // Modern ViewChild signals for template renderers (Angular 20 approach)
+    pageDetailsRendererTemplate = viewChild.required('pageDetailsRendererTemplate');
+    pageStatusRendererTemplate = viewChild.required('pageStatusRendererTemplate');
+    actionsDropdownRendererTemplate = viewChild.required('actionsDropdownRendererTemplate');
+    // Make Math available in template
+    Math = Math;
+    // Signals for reactive state management
+    pages = signal([], ...(ngDevMode ? [{ debugName: "pages" }] : []));
+    loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+    error = signal(null, ...(ngDevMode ? [{ debugName: "error" }] : []));
+    selectedItems = signal([], ...(ngDevMode ? [{ debugName: "selectedItems" }] : []));
+    searchTerm = signal('', ...(ngDevMode ? [{ debugName: "searchTerm" }] : []));
+    // Pagination signals
+    currentPage = signal(1, ...(ngDevMode ? [{ debugName: "currentPage" }] : []));
+    pageSize = signal(10, ...(ngDevMode ? [{ debugName: "pageSize" }] : []));
+    totalItems = signal(0, ...(ngDevMode ? [{ debugName: "totalItems" }] : []));
+    // Grid configuration signal
+    gridConfig = signal({
+        id: 'page-list-grid',
+        columns: [
+            {
+                key: 'details',
+                header: 'Page Details',
+                type: 'custom',
+                width: 'auto',
+                truncate: true,
+                align: 'left',
+                renderer: 'pageDetailsRenderer'
             },
-            loading: {
-                useDefer: true,
-                skeletonRows: 5,
-                showOverlay: false
+            {
+                key: 'sypg_page_code',
+                header: 'Page Code',
+                type: 'text',
+                width: '150px',
+                truncate: true,
+                align: 'left'
             },
-            scroll: {
-                enabled: true,
-                maxHeight: '',
-                minHeight: '',
-                stickyHeader: true,
-                virtualScroll: false,
-                rowHeight: 50
+            {
+                key: 'sypg_isactive',
+                header: 'Status',
+                type: 'custom',
+                width: '100px',
+                truncate: false,
+                align: 'center',
+                renderer: 'pageStatusRenderer'
             },
-            responsive: true,
-            striped: false,
-            bordered: true,
-            compact: false
-        });
-        // Action handlers for grid
-        this.actionHandlers = {
-            onEdit: (item) => this.editPage(item),
-            onDelete: (item) => this.deletePage(item),
-            onToggleStatus: (item) => this.togglePageStatus(item),
-            onManageThemes: (item) => this.manageThemes(item),
-            onManageControls: (item) => this.manageControls(item)
-        };
+            {
+                key: 'actions',
+                header: '',
+                type: 'custom',
+                width: '120px',
+                truncate: false,
+                align: 'center',
+                renderer: 'actionsDropdownRenderer'
+            }
+        ],
+        data: [],
+        trackBy: '_id',
+        pagination: {
+            enabled: true,
+            pageSize: 10,
+            pageSizeOptions: [10, 25, 50, 100],
+            showQuickJump: true,
+            showPageInfo: true,
+            showRefresh: true
+        },
+        search: {
+            enabled: true,
+            placeholder: 'Search pages...',
+            searchableColumns: ['sypg_title', 'sypg_desc', 'sypg_page_code'],
+            debounceMs: 300
+        },
+        loading: {
+            useDefer: true,
+            skeletonRows: 5,
+            showOverlay: false
+        },
+        scroll: {
+            enabled: true,
+            maxHeight: '',
+            minHeight: '',
+            stickyHeader: true,
+            virtualScroll: false,
+            rowHeight: 50
+        },
+        responsive: true,
+        striped: false,
+        bordered: true,
+        compact: false
+    }, ...(ngDevMode ? [{ debugName: "gridConfig" }] : []));
+    // Action handlers for grid
+    actionHandlers = {
+        onEdit: (item) => this.editPage(item),
+        onDelete: (item) => this.deletePage(item),
+        onToggleStatus: (item) => this.togglePageStatus(item),
+        onManageThemes: (item) => this.manageThemes(item),
+        onManageControls: (item) => this.manageControls(item)
+    };
+    constructor() {
         this.initializeComponent();
     }
     /**
@@ -5373,10 +5535,10 @@ class PageListComponent {
         const event = new MouseEvent('click', { bubbles: true });
         document.dispatchEvent(event);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PageListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: PageListComponent, isStandalone: true, selector: "cide-core-app-page-list", viewQueries: [{ propertyName: "pageDetailsRendererTemplate", first: true, predicate: ["pageDetailsRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "pageStatusRendererTemplate", first: true, predicate: ["pageStatusRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "actionsDropdownRendererTemplate", first: true, predicate: ["actionsDropdownRendererTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Page List Container -->\n<div class=\"tw-table tw-w-full tw-h-full\">\n\n  <!-- Header Section with Filters -->\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-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\">\n\n        <!-- Title -->\n        <div class=\"tw-flex tw-items-center tw-space-x-2\">\n          <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">web</cide-ele-icon>\n          <h5 class=\"tw-text-base tw-font-medium tw-text-gray-900 tw-m-0\">Page Management</h5>\n        </div>\n\n        <!-- Actions -->\n        <div 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\">\n          <!-- Add Page Button -->\n          <button\n            cideEleButton\n            variant=\"primary\"\n            size=\"sm\"\n            (click)=\"createPage()\"\n            leftIcon=\"add\"\n            class=\"tw-whitespace-nowrap tw-flex tw-items-center tw-gap-2\">\n            Create New Page\n          </button>\n        </div>\n      </div>\n\n      <!-- Error Message -->\n      @if (error()) {\n        <div class=\"tw-mt-4 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 class=\"tw-text-red-400 tw-w-5 tw-h-5 tw-mt-0.5 tw-flex-shrink-0\">error</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    </div>\n  </div>\n\n  <!-- Main Content Area -->\n  <div class=\"tw-table-row\">\n    <div class=\"tw-table-cell tw-h-full tw-relative\">\n      \n      <!-- Data Grid Component -->\n      <div class=\"tw-h-full tw-overflow-auto\">\n        <cide-ele-data-grid\n          [config]=\"gridConfig()\"\n          [templateRenderers]=\"getTemplateRenderers()\"\n          [actionHandlers]=\"actionHandlers\"\n          [serverSidePagination]=\"true\"\n          [totalServerItems]=\"totalItems()\"\n          [currentServerPage]=\"currentPage()\"\n          [currentServerPageSize]=\"pageSize()\"\n          (gridEvent)=\"onGridEvent($event)\">\n        </cide-ele-data-grid>\n      </div>\n\n    </div>\n  </div>\n\n</div>\n\n<!-- Page Details Renderer Template -->\n<ng-template #pageDetailsRendererTemplate let-row=\"row\" let-value=\"value\">\n  <div class=\"tw-flex tw-items-center tw-min-w-0\">\n    <!-- Page Icon -->\n    <div class=\"tw-flex-shrink-0\">\n      <cide-ele-icon class=\"tw-text-gray-400 tw-w-4 tw-h-4\">web</cide-ele-icon>\n    </div>\n    \n    <!-- Page Details -->\n    <div class=\"tw-ml-3 tw-min-w-0 tw-flex-1\">\n      <div class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-truncate\" \n           [title]=\"row.sypg_title\">\n        {{ row.sypg_title || 'Untitled' }}\n      </div>\n      @if (row.sypg_desc) {\n        <div class=\"tw-text-xs tw-text-gray-500 tw-truncate\" \n             [title]=\"row.sypg_desc\">\n          {{ row.sypg_desc }}\n        </div>\n      }\n    </div>\n  </div>\n</ng-template>\n\n<!-- Page Status Renderer Template -->\n<ng-template #pageStatusRendererTemplate let-row=\"row\" let-value=\"value\">\n  <span class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-whitespace-nowrap\"\n        [ngClass]=\"row.sypg_isactive ? 'tw-bg-green-100 tw-text-green-800' : 'tw-bg-red-100 tw-text-red-800'\">\n    {{ row.sypg_isactive ? 'Active' : 'Inactive' }}\n  </span>\n</ng-template>\n\n<!-- Actions Dropdown Renderer Template -->\n<ng-template #actionsDropdownRendererTemplate let-row=\"row\" let-value=\"value\">\n  <cide-ele-dropdown\n    [items]=\"getActionDropdownItems(row)\"\n    [config]=\"{ triggerIcon: 'more_vert', triggerSize: 'sm' }\"\n    (itemClick)=\"onDropdownItemClick($event, row)\">\n  </cide-ele-dropdown>\n</ng-template> ", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: CideEleDataGridComponent, selector: "cide-ele-data-grid", inputs: ["config", "customRenderers", "templateRenderers", "customFormatters", "actionHandlers", "serverSidePagination", "totalServerItems", "currentServerPage", "currentServerPageSize", "dragDropEnabled"], outputs: ["gridEvent"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton]", 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: CideEleDropdownComponent, selector: "cide-ele-dropdown", inputs: ["items", "config", "triggerTemplate", "menuTemplate"], outputs: ["itemClick", "dropdownToggle"] }] }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: PageListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: PageListComponent, isStandalone: true, selector: "cide-core-app-page-list", viewQueries: [{ propertyName: "pageDetailsRendererTemplate", first: true, predicate: ["pageDetailsRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "pageStatusRendererTemplate", first: true, predicate: ["pageStatusRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "actionsDropdownRendererTemplate", first: true, predicate: ["actionsDropdownRendererTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Page List Container -->\n<div class=\"tw-table tw-w-full tw-h-full\">\n\n  <!-- Header Section with Filters -->\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-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\">\n\n        <!-- Title -->\n        <div class=\"tw-flex tw-items-center tw-space-x-2\">\n          <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">web</cide-ele-icon>\n          <h5 class=\"tw-text-base tw-font-medium tw-text-gray-900 tw-m-0\">Page Management</h5>\n        </div>\n\n        <!-- Actions -->\n        <div 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\">\n          <!-- Add Page Button -->\n          <button\n            cideEleButton\n            variant=\"primary\"\n            size=\"sm\"\n            (click)=\"createPage()\"\n            leftIcon=\"add\"\n            class=\"tw-whitespace-nowrap tw-flex tw-items-center tw-gap-2\">\n            Create New Page\n          </button>\n        </div>\n      </div>\n\n      <!-- Error Message -->\n      @if (error()) {\n        <div class=\"tw-mt-4 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 class=\"tw-text-red-400 tw-w-5 tw-h-5 tw-mt-0.5 tw-flex-shrink-0\">error</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    </div>\n  </div>\n\n  <!-- Main Content Area -->\n  <div class=\"tw-table-row\">\n    <div class=\"tw-table-cell tw-h-full tw-relative\">\n      \n      <!-- Data Grid Component -->\n      <div class=\"tw-h-full tw-overflow-auto\">\n        <cide-ele-data-grid\n          [config]=\"gridConfig()\"\n          [templateRenderers]=\"getTemplateRenderers()\"\n          [actionHandlers]=\"actionHandlers\"\n          [serverSidePagination]=\"true\"\n          [totalServerItems]=\"totalItems()\"\n          [currentServerPage]=\"currentPage()\"\n          [currentServerPageSize]=\"pageSize()\"\n          (gridEvent)=\"onGridEvent($event)\">\n        </cide-ele-data-grid>\n      </div>\n\n    </div>\n  </div>\n\n</div>\n\n<!-- Page Details Renderer Template -->\n<ng-template #pageDetailsRendererTemplate let-row=\"row\" let-value=\"value\">\n  <div class=\"tw-flex tw-items-center tw-min-w-0\">\n    <!-- Page Icon -->\n    <div class=\"tw-flex-shrink-0\">\n      <cide-ele-icon class=\"tw-text-gray-400 tw-w-4 tw-h-4\">web</cide-ele-icon>\n    </div>\n    \n    <!-- Page Details -->\n    <div class=\"tw-ml-3 tw-min-w-0 tw-flex-1\">\n      <div class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-truncate\" \n           [title]=\"row.sypg_title\">\n        {{ row.sypg_title || 'Untitled' }}\n      </div>\n      @if (row.sypg_desc) {\n        <div class=\"tw-text-xs tw-text-gray-500 tw-truncate\" \n             [title]=\"row.sypg_desc\">\n          {{ row.sypg_desc }}\n        </div>\n      }\n    </div>\n  </div>\n</ng-template>\n\n<!-- Page Status Renderer Template -->\n<ng-template #pageStatusRendererTemplate let-row=\"row\" let-value=\"value\">\n  <span class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-whitespace-nowrap\"\n        [ngClass]=\"row.sypg_isactive ? 'tw-bg-green-100 tw-text-green-800' : 'tw-bg-red-100 tw-text-red-800'\">\n    {{ row.sypg_isactive ? 'Active' : 'Inactive' }}\n  </span>\n</ng-template>\n\n<!-- Actions Dropdown Renderer Template -->\n<ng-template #actionsDropdownRendererTemplate let-row=\"row\" let-value=\"value\">\n  <cide-ele-dropdown\n    [items]=\"getActionDropdownItems(row)\"\n    [config]=\"{ triggerIcon: 'more_vert', triggerSize: 'sm' }\"\n    (itemClick)=\"onDropdownItemClick($event, row)\">\n  </cide-ele-dropdown>\n</ng-template> ", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: CideEleDataGridComponent, selector: "cide-ele-data-grid", inputs: ["config", "customRenderers", "templateRenderers", "customFormatters", "actionHandlers", "serverSidePagination", "totalServerItems", "currentServerPage", "currentServerPageSize", "dragDropEnabled"], outputs: ["gridEvent"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton]", 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: CideEleDropdownComponent, selector: "cide-ele-dropdown", inputs: ["items", "config", "triggerTemplate", "menuTemplate"], outputs: ["itemClick", "dropdownToggle"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PageListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: PageListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cide-core-app-page-list', standalone: true, imports: [
                         CommonModule,
@@ -5387,10 +5549,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                     ], template: "<!-- Page List Container -->\n<div class=\"tw-table tw-w-full tw-h-full\">\n\n  <!-- Header Section with Filters -->\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-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\">\n\n        <!-- Title -->\n        <div class=\"tw-flex tw-items-center tw-space-x-2\">\n          <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">web</cide-ele-icon>\n          <h5 class=\"tw-text-base tw-font-medium tw-text-gray-900 tw-m-0\">Page Management</h5>\n        </div>\n\n        <!-- Actions -->\n        <div 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\">\n          <!-- Add Page Button -->\n          <button\n            cideEleButton\n            variant=\"primary\"\n            size=\"sm\"\n            (click)=\"createPage()\"\n            leftIcon=\"add\"\n            class=\"tw-whitespace-nowrap tw-flex tw-items-center tw-gap-2\">\n            Create New Page\n          </button>\n        </div>\n      </div>\n\n      <!-- Error Message -->\n      @if (error()) {\n        <div class=\"tw-mt-4 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 class=\"tw-text-red-400 tw-w-5 tw-h-5 tw-mt-0.5 tw-flex-shrink-0\">error</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    </div>\n  </div>\n\n  <!-- Main Content Area -->\n  <div class=\"tw-table-row\">\n    <div class=\"tw-table-cell tw-h-full tw-relative\">\n      \n      <!-- Data Grid Component -->\n      <div class=\"tw-h-full tw-overflow-auto\">\n        <cide-ele-data-grid\n          [config]=\"gridConfig()\"\n          [templateRenderers]=\"getTemplateRenderers()\"\n          [actionHandlers]=\"actionHandlers\"\n          [serverSidePagination]=\"true\"\n          [totalServerItems]=\"totalItems()\"\n          [currentServerPage]=\"currentPage()\"\n          [currentServerPageSize]=\"pageSize()\"\n          (gridEvent)=\"onGridEvent($event)\">\n        </cide-ele-data-grid>\n      </div>\n\n    </div>\n  </div>\n\n</div>\n\n<!-- Page Details Renderer Template -->\n<ng-template #pageDetailsRendererTemplate let-row=\"row\" let-value=\"value\">\n  <div class=\"tw-flex tw-items-center tw-min-w-0\">\n    <!-- Page Icon -->\n    <div class=\"tw-flex-shrink-0\">\n      <cide-ele-icon class=\"tw-text-gray-400 tw-w-4 tw-h-4\">web</cide-ele-icon>\n    </div>\n    \n    <!-- Page Details -->\n    <div class=\"tw-ml-3 tw-min-w-0 tw-flex-1\">\n      <div class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-truncate\" \n           [title]=\"row.sypg_title\">\n        {{ row.sypg_title || 'Untitled' }}\n      </div>\n      @if (row.sypg_desc) {\n        <div class=\"tw-text-xs tw-text-gray-500 tw-truncate\" \n             [title]=\"row.sypg_desc\">\n          {{ row.sypg_desc }}\n        </div>\n      }\n    </div>\n  </div>\n</ng-template>\n\n<!-- Page Status Renderer Template -->\n<ng-template #pageStatusRendererTemplate let-row=\"row\" let-value=\"value\">\n  <span class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-whitespace-nowrap\"\n        [ngClass]=\"row.sypg_isactive ? 'tw-bg-green-100 tw-text-green-800' : 'tw-bg-red-100 tw-text-red-800'\">\n    {{ row.sypg_isactive ? 'Active' : 'Inactive' }}\n  </span>\n</ng-template>\n\n<!-- Actions Dropdown Renderer Template -->\n<ng-template #actionsDropdownRendererTemplate let-row=\"row\" let-value=\"value\">\n  <cide-ele-dropdown\n    [items]=\"getActionDropdownItems(row)\"\n    [config]=\"{ triggerIcon: 'more_vert', triggerSize: 'sm' }\"\n    (itemClick)=\"onDropdownItemClick($event, row)\">\n  </cide-ele-dropdown>\n</ng-template> " }]
         }], ctorParameters: () => [] });
 
+var pageList_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    PageListComponent: PageListComponent
+});
+
 class PageThemeService {
+    http;
+    apiUrl = `${coreRoutesUrl?.pageTheme}`;
     constructor(http) {
         this.http = http;
-        this.apiUrl = `${coreRoutesUrl?.pageTheme}`;
         console.log('PageThemeService initialized - using real API');
     }
     /**
@@ -5478,10 +5646,10 @@ class PageThemeService {
         console.error('Page Theme Service Error:', errorMessage);
         return throwError(() => new Error(errorMessage));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PageThemeService, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PageThemeService, providedIn: 'root' }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: PageThemeService, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: PageThemeService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PageThemeService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: PageThemeService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -5489,171 +5657,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
         }], ctorParameters: () => [{ type: i1.HttpClient }] });
 
 class PageThemeComponent {
-    constructor() {
-        // Dependency injection
-        this.destroyRef = inject(DestroyRef);
-        this.themeService = inject(PageThemeService);
-        this.appState = inject(AppStateHelperService);
-        this.fb = inject(NonNullableFormBuilder);
-        this.router = inject(Router);
-        this.route = inject(ActivatedRoute);
-        // Modern ViewChild signals for template renderers (Angular 20 approach)
-        this.themeDetailsRendererTemplate = viewChild.required('themeDetailsRendererTemplate');
-        this.themeStatusRendererTemplate = viewChild.required('themeStatusRendererTemplate');
-        this.actionsDropdownRendererTemplate = viewChild.required('actionsDropdownRendererTemplate');
-        // Make Math available in template
-        this.Math = Math;
-        // Signals for reactive state management
-        this.themes = signal([]);
-        this.loading = signal(false);
-        this.error = signal(null);
-        this.selectedItems = signal([]);
-        this.searchTerm = signal('');
-        // Derived list filtered by searchTerm
-        this.filteredThemes = computed(() => {
-            const q = (this.searchTerm() || '').toLowerCase().trim();
-            const items = this.themes() || [];
-            if (!q)
-                return items;
-            return items.filter(t => {
-                const title = (t.sytm_title || '').toLowerCase();
-                const code = (t.sytm_theme_code || '').toLowerCase();
-                const desc = (t.sytm_desc || '').toLowerCase();
-                return title.includes(q) || code.includes(q) || desc.includes(q);
-            });
-        });
-        // Page information
-        this.pageId = signal('');
-        this.pageTitle = signal('');
-        // Form state
-        this.isEditMode = signal(false);
-        this.editingThemeId = signal(null);
-        this.retrievedTheme = signal(null);
-        // Pagination signals
-        this.currentPage = signal(1);
-        this.pageSize = signal(10);
-        this.totalItems = signal(0);
-        // Modern reactive forms with signals
-        this.themeForm = this.fb.group({
-            sytm_title: ['', [Validators.required]],
-            sytm_desc: [''],
-            sytm_theme_code: ['', [Validators.required]],
-            sytm_preview_id_fm: [''],
-            sytm_sub_title: [''],
-            sytm_configuration: ['{}'],
-            sytm_entity_id_syen: [''],
-            sytm_isselected: [false],
-            sytm_layout: this.fb.group({
-                sytm_layout_sidebar: this.fb.group({ status: [true] }),
-                sytm_layout_header: this.fb.group({ status: [true] }),
-                sytm_layout_footer: this.fb.group({ status: [false] }),
-                sytm_layout_breadcrumb: this.fb.group({ status: [true] }),
-                sytm_layout_console: this.fb.group({ status: [false] }),
-                sytm_layout_request: this.fb.group({ status: [false] }),
-                sytm_layout_drawer: this.fb.array([])
-            }),
-            sytm_isactive: [true]
-        });
-        // Computed values
-        this.isFormDirty = computed(() => this.themeForm.dirty);
-        // Multi-select options for layout sections
-        this.layoutOptions = [
-            { value: 'sidebar', label: 'Sidebar' },
-            { value: 'header', label: 'Header' },
-            { value: 'footer', label: 'Footer' },
-            { value: 'breadcrumb', label: 'Breadcrumb' },
-            { value: 'console', label: 'Console' },
-            { value: 'request', label: 'Request' }
-        ];
-        // Grid configuration signal
-        this.gridConfig = signal({
-            id: 'theme-list-grid',
-            title: '',
-            subtitle: '',
-            columns: [
-                {
-                    key: 'details',
-                    header: 'Theme Details',
-                    type: 'custom',
-                    width: 'auto',
-                    truncate: true,
-                    align: 'left',
-                    renderer: 'themeDetailsRenderer'
-                },
-                {
-                    key: 'sytm_theme_code',
-                    header: 'Theme Code',
-                    type: 'text',
-                    width: '150px',
-                    truncate: true,
-                    align: 'left'
-                },
-                {
-                    key: 'sytm_isactive',
-                    header: 'Status',
-                    type: 'custom',
-                    width: '100px',
-                    truncate: false,
-                    align: 'center',
-                    renderer: 'themeStatusRenderer'
-                },
-                {
-                    key: 'actions',
-                    header: '',
-                    type: 'custom',
-                    width: '120px',
-                    truncate: false,
-                    align: 'center',
-                    renderer: 'actionsDropdownRenderer'
-                }
-            ],
-            data: [],
-            trackBy: '_id',
-            pagination: {
-                enabled: true,
-                pageSize: 10,
-                pageSizeOptions: [10, 25, 50, 100],
-                showQuickJump: true,
-                showPageInfo: true,
-                showRefresh: true
-            },
-            search: {
-                enabled: true,
-                placeholder: 'Search themes...',
-                searchableColumns: ['sytm_title', 'sytm_desc', 'sytm_theme_code'],
-                debounceMs: 300
-            },
-            loading: {
-                useDefer: true,
-                skeletonRows: 5,
-                showOverlay: false
-            },
-            scroll: {
-                enabled: true,
-                maxHeight: '',
-                minHeight: '',
-                stickyHeader: true,
-                virtualScroll: false,
-                rowHeight: 50
-            },
-            responsive: true,
-            striped: false,
-            bordered: true,
-            compact: false,
-            tableClass: 'tw-table-fixed tw-w-full tw-rounded-none'
+    // Dependency injection
+    destroyRef = inject(DestroyRef);
+    themeService = inject(PageThemeService);
+    appState = inject(AppStateHelperService);
+    fb = inject(NonNullableFormBuilder);
+    router = inject(Router);
+    route = inject(ActivatedRoute);
+    // Modern ViewChild signals for template renderers (Angular 20 approach)
+    themeDetailsRendererTemplate = viewChild.required('themeDetailsRendererTemplate');
+    themeStatusRendererTemplate = viewChild.required('themeStatusRendererTemplate');
+    actionsDropdownRendererTemplate = viewChild.required('actionsDropdownRendererTemplate');
+    // Make Math available in template
+    Math = Math;
+    // Signals for reactive state management
+    themes = signal([], ...(ngDevMode ? [{ debugName: "themes" }] : []));
+    loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+    error = signal(null, ...(ngDevMode ? [{ debugName: "error" }] : []));
+    selectedItems = signal([], ...(ngDevMode ? [{ debugName: "selectedItems" }] : []));
+    searchTerm = signal('', ...(ngDevMode ? [{ debugName: "searchTerm" }] : []));
+    // Derived list filtered by searchTerm
+    filteredThemes = computed(() => {
+        const q = (this.searchTerm() || '').toLowerCase().trim();
+        const items = this.themes() || [];
+        if (!q)
+            return items;
+        return items.filter(t => {
+            const title = (t.sytm_title || '').toLowerCase();
+            const code = (t.sytm_theme_code || '').toLowerCase();
+            const desc = (t.sytm_desc || '').toLowerCase();
+            return title.includes(q) || code.includes(q) || desc.includes(q);
         });
-        // Action handlers for grid
-        this.actionHandlers = {
-            onEdit: (item) => this.editTheme(item),
-            onDelete: (item) => this.deleteTheme(item),
-            onToggleStatus: (item) => this.toggleThemeStatus(item)
-        };
-        // ===== Drawer (sytm_layout_drawer) helpers =====
-        this.drawerConfigOptions = [
-            { value: 'drawer_notes', label: 'Drawer Notes' },
-            { value: 'drawer_theme', label: 'Drawer Theme' }
-        ];
-    }
+    }, ...(ngDevMode ? [{ debugName: "filteredThemes" }] : []));
     // Helper to resolve preview image URL safely
     getPreviewUrl(theme) {
         const id = theme?.sytm_preview_id_fm || '';
@@ -5673,6 +5708,49 @@ class PageThemeComponent {
         const target = event.target;
         this.searchTerm.set(target?.value ?? '');
     }
+    // Page information
+    pageId = signal('', ...(ngDevMode ? [{ debugName: "pageId" }] : []));
+    pageTitle = signal('', ...(ngDevMode ? [{ debugName: "pageTitle" }] : []));
+    // Form state
+    isEditMode = signal(false, ...(ngDevMode ? [{ debugName: "isEditMode" }] : []));
+    editingThemeId = signal(null, ...(ngDevMode ? [{ debugName: "editingThemeId" }] : []));
+    retrievedTheme = signal(null, ...(ngDevMode ? [{ debugName: "retrievedTheme" }] : []));
+    // Pagination signals
+    currentPage = signal(1, ...(ngDevMode ? [{ debugName: "currentPage" }] : []));
+    pageSize = signal(10, ...(ngDevMode ? [{ debugName: "pageSize" }] : []));
+    totalItems = signal(0, ...(ngDevMode ? [{ debugName: "totalItems" }] : []));
+    // Modern reactive forms with signals
+    themeForm = this.fb.group({
+        sytm_title: ['', [Validators.required]],
+        sytm_desc: [''],
+        sytm_theme_code: ['', [Validators.required]],
+        sytm_preview_id_fm: [''],
+        sytm_sub_title: [''],
+        sytm_configuration: ['{}'],
+        sytm_entity_id_syen: [''],
+        sytm_isselected: [false],
+        sytm_layout: this.fb.group({
+            sytm_layout_sidebar: this.fb.group({ status: [true] }),
+            sytm_layout_header: this.fb.group({ status: [true] }),
+            sytm_layout_footer: this.fb.group({ status: [false] }),
+            sytm_layout_breadcrumb: this.fb.group({ status: [true] }),
+            sytm_layout_console: this.fb.group({ status: [false] }),
+            sytm_layout_request: this.fb.group({ status: [false] }),
+            sytm_layout_drawer: this.fb.array([])
+        }),
+        sytm_isactive: [true]
+    });
+    // Computed values
+    isFormDirty = computed(() => this.themeForm.dirty, ...(ngDevMode ? [{ debugName: "isFormDirty" }] : []));
+    // Multi-select options for layout sections
+    layoutOptions = [
+        { value: 'sidebar', label: 'Sidebar' },
+        { value: 'header', label: 'Header' },
+        { value: 'footer', label: 'Footer' },
+        { value: 'breadcrumb', label: 'Breadcrumb' },
+        { value: 'console', label: 'Console' },
+        { value: 'request', label: 'Request' }
+    ];
     // Read enabled selections from form values
     enabledLayoutSelections() {
         const layout = this.themeForm.get('sytm_layout');
@@ -5705,6 +5783,89 @@ class PageThemeComponent {
         setBool('sytm_layout.sytm_layout_console.status', selected.has('console'));
         setBool('sytm_layout.sytm_layout_request.status', selected.has('request'));
     }
+    // Grid configuration signal
+    gridConfig = signal({
+        id: 'theme-list-grid',
+        title: '',
+        subtitle: '',
+        columns: [
+            {
+                key: 'details',
+                header: 'Theme Details',
+                type: 'custom',
+                width: 'auto',
+                truncate: true,
+                align: 'left',
+                renderer: 'themeDetailsRenderer'
+            },
+            {
+                key: 'sytm_theme_code',
+                header: 'Theme Code',
+                type: 'text',
+                width: '150px',
+                truncate: true,
+                align: 'left'
+            },
+            {
+                key: 'sytm_isactive',
+                header: 'Status',
+                type: 'custom',
+                width: '100px',
+                truncate: false,
+                align: 'center',
+                renderer: 'themeStatusRenderer'
+            },
+            {
+                key: 'actions',
+                header: '',
+                type: 'custom',
+                width: '120px',
+                truncate: false,
+                align: 'center',
+                renderer: 'actionsDropdownRenderer'
+            }
+        ],
+        data: [],
+        trackBy: '_id',
+        pagination: {
+            enabled: true,
+            pageSize: 10,
+            pageSizeOptions: [10, 25, 50, 100],
+            showQuickJump: true,
+            showPageInfo: true,
+            showRefresh: true
+        },
+        search: {
+            enabled: true,
+            placeholder: 'Search themes...',
+            searchableColumns: ['sytm_title', 'sytm_desc', 'sytm_theme_code'],
+            debounceMs: 300
+        },
+        loading: {
+            useDefer: true,
+            skeletonRows: 5,
+            showOverlay: false
+        },
+        scroll: {
+            enabled: true,
+            maxHeight: '',
+            minHeight: '',
+            stickyHeader: true,
+            virtualScroll: false,
+            rowHeight: 50
+        },
+        responsive: true,
+        striped: false,
+        bordered: true,
+        compact: false,
+        tableClass: 'tw-table-fixed tw-w-full tw-rounded-none'
+    }, ...(ngDevMode ? [{ debugName: "gridConfig" }] : []));
+    // Action handlers for grid
+    actionHandlers = {
+        onEdit: (item) => this.editTheme(item),
+        onDelete: (item) => this.deleteTheme(item),
+        onToggleStatus: (item) => this.toggleThemeStatus(item)
+    };
     ngOnInit() {
         this.initializeComponent();
     }
@@ -6155,6 +6316,11 @@ class PageThemeComponent {
         const event = new MouseEvent('click', { bubbles: true });
         document.dispatchEvent(event);
     }
+    // ===== Drawer (sytm_layout_drawer) helpers =====
+    drawerConfigOptions = [
+        { value: 'drawer_notes', label: 'Drawer Notes' },
+        { value: 'drawer_theme', label: 'Drawer Theme' }
+    ];
     get drawerArray() {
         return this.themeForm.get('sytm_layout.sytm_layout_drawer');
     }
@@ -6222,10 +6388,10 @@ class PageThemeComponent {
             error: () => { this.loading.set(false); }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PageThemeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: PageThemeComponent, isStandalone: true, selector: "cide-core-app-page-theme", viewQueries: [{ propertyName: "themeDetailsRendererTemplate", first: true, predicate: ["themeDetailsRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "themeStatusRendererTemplate", first: true, predicate: ["themeStatusRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "actionsDropdownRendererTemplate", first: true, predicate: ["actionsDropdownRendererTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Page Theme Container -->\r\n<div class=\"tw-flex tw-h-full tw-w-full\">\r\n  \r\n  <!-- Left: Form and header (60%) -->\r\n  <div class=\"tw-w-full lg:tw-w-3/5 tw-flex tw-flex-col tw-border-r tw-border-gray-200\">\r\n\r\n  <!-- Header Section -->\r\n    <div class=\"tw-px-6 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\r\n      <div 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\r\n      <!-- Title and Back Button -->\r\n      <div class=\"tw-flex tw-items-center tw-space-x-4\">\r\n          <button cideEleButton variant=\"ghost\" size=\"sm\" (click)=\"goBack()\" class=\"tw-text-gray-600 hover:tw-text-gray-900\">\r\n          <cide-ele-icon class=\"tw-w-4 tw-h-4\">arrow_back</cide-ele-icon>\r\n        </button>\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\">palette</cide-ele-icon>\r\n          <div>\r\n            <h5 class=\"tw-text-base tw-font-medium tw-text-gray-900 tw-m-0\">Theme Management</h5>\r\n            <p class=\"tw-text-sm tw-text-gray-500 tw-m-0\">Page: {{ pageTitle() }}</p>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Error Message -->\r\n    @if (error()) {\r\n    <div class=\"tw-mt-4 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\" 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  </div>\r\n\r\n    <!-- Quick Add/Edit Form Section -->\r\n    <div class=\"tw-px-6 tw-py-4 tw-bg-white tw-overflow-auto\">\r\n    <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\r\n      <div class=\"tw-flex tw-items-center tw-space-x-3\">\r\n        <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\r\n        <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-m-0\">{{ isEditMode() ? 'Edit Theme' : 'Quick Add Theme' }}</h6>\r\n      </div>\r\n    </div>\r\n\r\n      <!-- Form (kept as-is) -->\r\n    <form [formGroup]=\"themeForm\" (ngSubmit)=\"saveTheme()\" class=\"tw-space-y-4\">\r\n      <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-3 tw-gap-4\">\r\n        <!-- Theme Title -->\r\n        <div class=\"tw-space-y-2\">\r\n            <cide-ele-input id=\"sytm_title\" formControlName=\"sytm_title\" placeholder=\"Enter theme title\" label=\"Theme Title*\" size=\"sm\"></cide-ele-input>\r\n        </div>\r\n        <!-- Theme Code -->\r\n        <div class=\"tw-space-y-2\">\r\n            <cide-ele-input id=\"sytm_theme_code\" formControlName=\"sytm_theme_code\" placeholder=\"Enter theme code\" label=\"Theme Code*\" size=\"sm\"></cide-ele-input>\r\n        </div>\r\n        <!-- Status -->\r\n        <div class=\"tw-space-y-2\">\r\n            <cide-ele-input\r\n              id=\"sytm_isactive_cb\"\r\n              type=\"checkbox\"\r\n              label=\"Active\"\r\n            size=\"sm\"\r\n              formControlName=\"sytm_isactive\">\r\n            </cide-ele-input>\r\n        </div>\r\n        <!-- Sub Title -->\r\n        <div class=\"tw-space-y-2\">\r\n            <cide-ele-input id=\"sytm_sub_title\" formControlName=\"sytm_sub_title\" placeholder=\"Enter sub title\" label=\"Sub Title\" size=\"sm\"></cide-ele-input>\r\n        </div>\r\n        <!-- Preview ID -->\r\n        <div class=\"tw-space-y-2\">\r\n            <cide-ele-input id=\"sytm_preview_id_fm\" formControlName=\"sytm_preview_id_fm\" placeholder=\"Enter preview image ID\" label=\"Preview Image ID\" size=\"sm\"></cide-ele-input>\r\n        </div>\r\n        <!-- Description -->\r\n        <div class=\"tw-space-y-2 md:tw-col-span-2\">\r\n            <cide-ele-textarea id=\"sytm_desc\" formControlName=\"sytm_desc\" placeholder=\"Enter theme description\" rows=\"2\" label=\"Description\" size=\"sm\"></cide-ele-textarea>\r\n        </div>\r\n                 <!-- Configuration JSON -->\r\n         <div class=\"tw-space-y-2 md:tw-col-span-3\">\r\n            <cide-ele-json-editor label=\"Configuration JSON\" formControlName=\"sytm_configuration\" [required]=\"true\" [config]=\"{\r\n               showLineNumbers: true,\r\n               autoFormat: true,\r\n               validateOnChange: true,\r\n               minHeight: 150,\r\n               maxHeight: 300,\r\n               placeholder: 'Enter theme configuration JSON...'\r\n              }\" helperText=\"Enter valid JSON configuration for the theme\"></cide-ele-json-editor>\r\n         </div>\r\n          <!-- Layout Configuration + Selection: right-side checkbox list -->\r\n          <div class=\"lg:tw-col-span-1 tw-space-y-2\">\r\n            <div class=\"tw-text-sm tw-font-medium tw-text-gray-700\">Layout & Selection</div>\r\n            <!-- Selected toggle -->\r\n            <div class=\"tw-bg-white tw-border tw-border-gray-200 tw-rounded-md tw-px-3 tw-py-2\">\r\n              <cide-ele-input\r\n                id=\"sytm_isselected\"\r\n                type=\"checkbox\"\r\n                label=\"Selected (Default)\"\r\n                  size=\"sm\"\r\n                formControlName=\"sytm_isselected\">\r\n              </cide-ele-input>\r\n              </div>\r\n            <div formGroupName=\"sytm_layout\" class=\"tw-bg-white tw-border tw-border-gray-200 tw-rounded-md tw-divide-y tw-overflow-hidden\">\r\n              <!-- Sidebar -->\r\n              <div class=\"tw-px-3 tw-py-2\" formGroupName=\"sytm_layout_sidebar\">\r\n                <cide-ele-input id=\"layout_sidebar_status\" type=\"checkbox\" label=\"Sidebar\" size=\"sm\" formControlName=\"status\"></cide-ele-input>\r\n            </div>\r\n            <!-- Header -->\r\n              <div class=\"tw-px-3 tw-py-2\" formGroupName=\"sytm_layout_header\">\r\n                <cide-ele-input id=\"layout_header_status\" type=\"checkbox\" label=\"Header\" size=\"sm\" formControlName=\"status\"></cide-ele-input>\r\n              </div>\r\n              <!-- Footer -->\r\n              <div class=\"tw-px-3 tw-py-2\" formGroupName=\"sytm_layout_footer\">\r\n                <cide-ele-input id=\"layout_footer_status\" type=\"checkbox\" label=\"Footer\" size=\"sm\" formControlName=\"status\"></cide-ele-input>\r\n              </div>\r\n              <!-- Breadcrumb -->\r\n              <div class=\"tw-px-3 tw-py-2\" formGroupName=\"sytm_layout_breadcrumb\">\r\n                <cide-ele-input id=\"layout_breadcrumb_status\" type=\"checkbox\" label=\"Breadcrumb\" size=\"sm\" formControlName=\"status\"></cide-ele-input>\r\n              </div>\r\n              <!-- Console -->\r\n              <div class=\"tw-px-3 tw-py-2\" formGroupName=\"sytm_layout_console\">\r\n                <cide-ele-input id=\"layout_console_status\" type=\"checkbox\" label=\"Console\" size=\"sm\" formControlName=\"status\"></cide-ele-input>\r\n            </div>\r\n              <!-- Request -->\r\n              <div class=\"tw-px-3 tw-py-2\" formGroupName=\"sytm_layout_request\">\r\n                <cide-ele-input id=\"layout_request_status\" type=\"checkbox\" label=\"Request\" size=\"sm\" formControlName=\"status\"></cide-ele-input>\r\n              </div>\r\n            </div>\r\n            <p class=\"tw-text-xs tw-text-gray-500 tw-pt-1\">Toggle active sections. Only one theme can be selected as default. More options can be added here later.</p>\r\n              </div>\r\n          <!-- Drawer Configuration -->\r\n          <div class=\"tw-space-y-2 md:tw-col-span-3\">\r\n            <div class=\"tw-flex tw-items-center tw-justify-between\">\r\n              <div class=\"tw-text-sm tw-font-medium tw-text-gray-700\">Drawers</div>\r\n              <button cideEleButton type=\"button\" size=\"xs\" variant=\"outline\" (click)=\"addDrawer()\">\r\n                Add Drawer\r\n              </button>\r\n            </div>\r\n\r\n            <div formGroupName=\"sytm_layout\">\r\n              <div class=\"tw-space-y-2\" formArrayName=\"sytm_layout_drawer\">\r\n                <div *ngFor=\"let drawerGrp of drawerArray.controls; let i = index\" [formGroupName]=\"i\" class=\"tw-border tw-border-gray-200 tw-rounded-md tw-p-3 tw-flex tw-items-center tw-gap-3\">\r\n                  <cide-ele-input id=\"drawer_active_{{i}}\" type=\"checkbox\" label=\"Active\" size=\"sm\" formControlName=\"syth_status\"></cide-ele-input>\r\n                  <div class=\"tw-flex-1\">\r\n                <cide-ele-select\r\n                      id=\"drawer_config_{{i}}\"\r\n                      label=\"Drawer For\"\r\n                  size=\"sm\"\r\n                      [options]=\"drawerConfigOptions\"\r\n                      formControlName=\"syth_config_syco_for\">\r\n                </cide-ele-select>\r\n              </div>\r\n                  <button cideEleButton type=\"button\" size=\"xs\" variant=\"ghost\" (click)=\"removeDrawer(i)\">\r\n                    <cide-ele-icon class=\"tw-w-4 tw-h-4\">delete</cide-ele-icon>\r\n                  </button>\r\n            </div>\r\n                <p class=\"tw-text-xs tw-text-gray-500\">Configure multiple drawers as needed.</p>\r\n              </div>\r\n            </div>\r\n          </div>\r\n      </div>\r\n\r\n      <!-- Form Actions -->\r\n        <div class=\"tw-flex tw-flex-col tw-gap-2 tw-pt-4 tw-border-t tw-border-gray-200\">\r\n          <div class=\"tw-flex tw-items-center tw-justify-end tw-space-x-3\">\r\n            <button cideEleButton type=\"button\" variant=\"outline\" (click)=\"cancelForm()\" [disabled]=\"loading()\">Cancel</button>\r\n            <button cideEleButton type=\"submit\" variant=\"primary\" leftIcon=\"add\" [disabled]=\"!themeForm.valid || loading()\" [loading]=\"loading()\">\r\n          {{ isEditMode() ? 'Update Theme' : 'Create Theme' }}\r\n        </button>\r\n          </div>\r\n      </div>\r\n    </form>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Right: Theme gallery (40%) -->\r\n  <div class=\"tw-hidden lg:tw-flex tw-w-2/5 tw-flex-col\">\r\n    <!-- (Header consolidated above) -->\r\n\r\n    <!-- Gallery list -->\r\n    <div class=\"tw-flex-1 tw-overflow-auto tw-bg-gray-50\">\r\n      <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3 tw-p-4\">\r\n        @for (theme of filteredThemes(); track theme._id) {\r\n          <div class=\"tw-rounded-md tw-transition tw-cursor-pointer tw-relative\"\r\n               [ngClass]=\"theme.sytm_isselected\r\n                 ? 'tw-border tw-border-blue-500 tw-ring-2 tw-ring-blue-200 tw-bg-blue-50/50'\r\n                 : 'tw-bg-white tw-border tw-border-gray-200 hover:tw-shadow-sm'\"\r\n               (click)=\"editTheme(theme)\"\r\n               role=\"button\"\r\n               tabindex=\"0\"\r\n               [attr.aria-selected]=\"theme.sytm_isselected ? 'true' : 'false'\"\r\n               [attr.aria-label]=\"'Edit theme ' + (theme.sytm_title || theme.sytm_theme_code)\"\r\n               (keydown.enter)=\"editTheme(theme)\"\r\n               (keydown.space)=\"$event.preventDefault(); editTheme(theme)\">\r\n\r\n            <!-- Selected badge -->\r\n            <div *ngIf=\"theme.sytm_isselected\"\r\n                 class=\"tw-absolute tw-top-2 tw-right-2 tw-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-rounded-full tw-bg-blue-600 tw-text-white\">\r\n              <cide-ele-icon class=\"tw-w-4 tw-h-4\">check</cide-ele-icon>\r\n            </div>\r\n \r\n            <div class=\"tw-aspect-[16/9] tw-bg-gray-100 tw-rounded-t-md tw-overflow-hidden tw-flex tw-items-center tw-justify-center\">\r\n              @if (getPreviewUrl(theme)) {\r\n                <img [src]=\"getPreviewUrl(theme)\" class=\"tw-w-full tw-h-full tw-object-cover\" alt=\"Preview\" />\r\n              } @else {\r\n                <div class=\"tw-text-gray-400 tw-text-xs\">No preview</div>\r\n              }\r\n            </div>\r\n            <div class=\"tw-p-3 tw-space-y-1\">\r\n              <div class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-truncate\" [title]=\"theme.sytm_title\">{{ theme.sytm_title || 'Untitled Theme' }}</div>\r\n              <div class=\"tw-text-xs tw-text-gray-500 tw-truncate\" [title]=\"theme.sytm_theme_code\">{{ theme.sytm_theme_code }}</div>\r\n              <div class=\"tw-flex tw-items-center tw-justify-between tw-pt-1\">\r\n                <span class=\"tw-inline-flex tw-items-center tw-gap-1 tw-text-xs\" [ngClass]=\"theme.sytm_isactive ? 'tw-text-green-700' : 'tw-text-red-700'\">\r\n                  <span class=\"tw-w-1.5 tw-h-1.5 tw-rounded-full\" [ngClass]=\"theme.sytm_isactive ? 'tw-bg-green-500' : 'tw-bg-red-500'\"></span>\r\n                  {{ theme.sytm_isactive ? 'Active' : 'Inactive' }}\r\n                </span>\r\n                <div class=\"tw-flex tw-items-center tw-gap-1\">\r\n                  <!-- Set Selected Button - Clear and Simple -->\r\n                  @if (theme.sytm_isselected) {\r\n                    <span class=\"tw-inline-flex tw-items-center tw-gap-1 tw-px-2 tw-py-1 tw-bg-green-100 tw-text-green-800 tw-rounded-md tw-text-xs tw-font-medium\">\r\n                      <cide-ele-icon class=\"tw-w-3 tw-h-3\">check</cide-ele-icon>\r\n                      Selected\r\n                    </span>\r\n                  } @else {\r\n                    <button cideEleButton \r\n                            variant=\"outline\" \r\n                            size=\"xs\"\r\n                            (click)=\"$event.stopPropagation(); setSelectedTheme(theme)\"\r\n                            [attr.aria-label]=\"'Select ' + (theme.sytm_title || theme.sytm_theme_code) + ' theme'\"\r\n                            class=\"tw-text-xs\">\r\n                      Select\r\n                    </button>\r\n                  }\r\n                  <button cideEleButton variant=\"ghost\" size=\"xs\" (click)=\"$event.stopPropagation(); editTheme(theme)\"\r\n                          [attr.aria-label]=\"'Edit theme ' + (theme.sytm_title || theme.sytm_theme_code)\">\r\n                    <cide-ele-icon class=\"tw-w-4 tw-h-4\">edit</cide-ele-icon>\r\n                  </button>\r\n                  <button cideEleButton variant=\"ghost\" size=\"xs\" (click)=\"$event.stopPropagation(); deleteTheme(theme)\"\r\n                          [attr.aria-label]=\"'Delete theme ' + (theme.sytm_title || theme.sytm_theme_code)\">\r\n                    <cide-ele-icon class=\"tw-w-4 tw-h-4\">delete</cide-ele-icon>\r\n                  </button>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        }\r\n\r\n        @if (!loading() && filteredThemes().length === 0) {\r\n          <div class=\"tw-col-span-full tw-text-center tw-text-xs tw-text-gray-500 tw-py-8\">No themes found</div>\r\n        }\r\n  </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<!-- \r\n  Angular Template References for Grid Renderers (Best Practice)\r\n  \r\n  These ng-template elements represent the Angular best practice for custom rendering.\r\n  They provide:\r\n  - Type safety with template context\r\n  - Component lifecycle integration\r\n  - Change detection optimization\r\n  - Proper event handling\r\n  - Accessibility features\r\n  \r\n  Note: Current data grid uses string renderers for compatibility.\r\n  Templates are maintained for future component enhancement.\r\n-->\r\n\r\n<!-- Theme Details Renderer Template -->\r\n<ng-template #themeDetailsRendererTemplate let-row=\"row\" let-value=\"value\">\r\n  <div class=\"tw-flex tw-items-center tw-min-w-0\">\r\n    <!-- Theme Icon -->\r\n    <div class=\"tw-flex-shrink-0\">\r\n      <cide-ele-icon \r\n        class=\"tw-text-purple-600\" \r\n        size=\"xs\">\r\n        palette\r\n      </cide-ele-icon>\r\n    </div>\r\n    \r\n    <!-- Theme Details -->\r\n    <div class=\"tw-ml-3 tw-min-w-0 tw-flex-1\">\r\n      <div class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-truncate\" \r\n           [title]=\"row.sytm_title\">\r\n        {{ row.sytm_title || 'Untitled' }}\r\n      </div>\r\n      @if (row.sytm_desc) {\r\n        <div class=\"tw-text-xs tw-text-gray-500 tw-truncate\" \r\n             [title]=\"row.sytm_desc\">\r\n          {{ row.sytm_desc }}\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- Theme Status Renderer Template -->\r\n<ng-template #themeStatusRendererTemplate let-row=\"row\" let-value=\"value\">\r\n  <span class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-whitespace-nowrap\"\r\n        [ngClass]=\"row.sytm_isactive ? 'tw-bg-green-100 tw-text-green-800' : 'tw-bg-red-100 tw-text-red-800'\">\r\n    {{ row.sytm_isactive ? 'Active' : 'Inactive' }}\r\n  </span>\r\n</ng-template>\r\n\r\n<!-- Actions Dropdown Renderer Template -->\r\n<ng-template #actionsDropdownRendererTemplate let-row=\"row\" let-value=\"value\">\r\n  <cide-ele-dropdown \r\n    [items]=\"getActionDropdownItems(row)\"\r\n    [config]=\"{ triggerIcon: 'more_vert', triggerSize: 'sm' }\"\r\n    (itemClick)=\"onDropdownItemClick($event, row)\">\r\n  </cide-ele-dropdown>\r\n</ng-template> ", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton]", 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: 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: 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"], outputs: ["ngModelChange", "change", "searchChange"] }, { kind: "component", type: CideTextareaComponent, selector: "cide-ele-textarea", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "minlength", "maxlength", "rows", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput"], outputs: ["ngModelChange"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideEleDropdownComponent, selector: "cide-ele-dropdown", inputs: ["items", "config", "triggerTemplate", "menuTemplate"], outputs: ["itemClick", "dropdownToggle"] }, { kind: "component", type: CideEleJsonEditorComponent, selector: "cide-ele-json-editor", inputs: ["label", "helperText", "required", "disabled", "showCharacterCount", "config"], outputs: ["valueChange", "objectChange", "errorsChange", "validChange"] }] }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: PageThemeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: PageThemeComponent, isStandalone: true, selector: "cide-core-app-page-theme", viewQueries: [{ propertyName: "themeDetailsRendererTemplate", first: true, predicate: ["themeDetailsRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "themeStatusRendererTemplate", first: true, predicate: ["themeStatusRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "actionsDropdownRendererTemplate", first: true, predicate: ["actionsDropdownRendererTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Page Theme Container -->\r\n<div class=\"tw-flex tw-h-full tw-w-full\">\r\n  \r\n  <!-- Left: Form and header (60%) -->\r\n  <div class=\"tw-w-full lg:tw-w-3/5 tw-flex tw-flex-col tw-border-r tw-border-gray-200\">\r\n\r\n  <!-- Header Section -->\r\n    <div class=\"tw-px-6 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\r\n      <div 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\r\n      <!-- Title and Back Button -->\r\n      <div class=\"tw-flex tw-items-center tw-space-x-4\">\r\n          <button cideEleButton variant=\"ghost\" size=\"sm\" (click)=\"goBack()\" class=\"tw-text-gray-600 hover:tw-text-gray-900\">\r\n          <cide-ele-icon class=\"tw-w-4 tw-h-4\">arrow_back</cide-ele-icon>\r\n        </button>\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\">palette</cide-ele-icon>\r\n          <div>\r\n            <h5 class=\"tw-text-base tw-font-medium tw-text-gray-900 tw-m-0\">Theme Management</h5>\r\n            <p class=\"tw-text-sm tw-text-gray-500 tw-m-0\">Page: {{ pageTitle() }}</p>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Error Message -->\r\n    @if (error()) {\r\n    <div class=\"tw-mt-4 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\" 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  </div>\r\n\r\n    <!-- Quick Add/Edit Form Section -->\r\n    <div class=\"tw-px-6 tw-py-4 tw-bg-white tw-overflow-auto\">\r\n    <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\r\n      <div class=\"tw-flex tw-items-center tw-space-x-3\">\r\n        <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\r\n        <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-m-0\">{{ isEditMode() ? 'Edit Theme' : 'Quick Add Theme' }}</h6>\r\n      </div>\r\n    </div>\r\n\r\n      <!-- Form (kept as-is) -->\r\n    <form [formGroup]=\"themeForm\" (ngSubmit)=\"saveTheme()\" class=\"tw-space-y-4\">\r\n      <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-3 tw-gap-4\">\r\n        <!-- Theme Title -->\r\n        <div class=\"tw-space-y-2\">\r\n            <cide-ele-input id=\"sytm_title\" formControlName=\"sytm_title\" placeholder=\"Enter theme title\" label=\"Theme Title*\" size=\"sm\"></cide-ele-input>\r\n        </div>\r\n        <!-- Theme Code -->\r\n        <div class=\"tw-space-y-2\">\r\n            <cide-ele-input id=\"sytm_theme_code\" formControlName=\"sytm_theme_code\" placeholder=\"Enter theme code\" label=\"Theme Code*\" size=\"sm\"></cide-ele-input>\r\n        </div>\r\n        <!-- Status -->\r\n        <div class=\"tw-space-y-2\">\r\n            <cide-ele-input\r\n              id=\"sytm_isactive_cb\"\r\n              type=\"checkbox\"\r\n              label=\"Active\"\r\n            size=\"sm\"\r\n              formControlName=\"sytm_isactive\">\r\n            </cide-ele-input>\r\n        </div>\r\n        <!-- Sub Title -->\r\n        <div class=\"tw-space-y-2\">\r\n            <cide-ele-input id=\"sytm_sub_title\" formControlName=\"sytm_sub_title\" placeholder=\"Enter sub title\" label=\"Sub Title\" size=\"sm\"></cide-ele-input>\r\n        </div>\r\n        <!-- Preview ID -->\r\n        <div class=\"tw-space-y-2\">\r\n            <cide-ele-input id=\"sytm_preview_id_fm\" formControlName=\"sytm_preview_id_fm\" placeholder=\"Enter preview image ID\" label=\"Preview Image ID\" size=\"sm\"></cide-ele-input>\r\n        </div>\r\n        <!-- Description -->\r\n        <div class=\"tw-space-y-2 md:tw-col-span-2\">\r\n            <cide-ele-textarea id=\"sytm_desc\" formControlName=\"sytm_desc\" placeholder=\"Enter theme description\" rows=\"2\" label=\"Description\" size=\"sm\"></cide-ele-textarea>\r\n        </div>\r\n                 <!-- Configuration JSON -->\r\n         <div class=\"tw-space-y-2 md:tw-col-span-3\">\r\n            <cide-ele-json-editor label=\"Configuration JSON\" formControlName=\"sytm_configuration\" [required]=\"true\" [config]=\"{\r\n               showLineNumbers: true,\r\n               autoFormat: true,\r\n               validateOnChange: true,\r\n               minHeight: 150,\r\n               maxHeight: 300,\r\n               placeholder: 'Enter theme configuration JSON...'\r\n              }\" helperText=\"Enter valid JSON configuration for the theme\"></cide-ele-json-editor>\r\n         </div>\r\n          <!-- Layout Configuration + Selection: right-side checkbox list -->\r\n          <div class=\"lg:tw-col-span-1 tw-space-y-2\">\r\n            <div class=\"tw-text-sm tw-font-medium tw-text-gray-700\">Layout & Selection</div>\r\n            <!-- Selected toggle -->\r\n            <div class=\"tw-bg-white tw-border tw-border-gray-200 tw-rounded-md tw-px-3 tw-py-2\">\r\n              <cide-ele-input\r\n                id=\"sytm_isselected\"\r\n                type=\"checkbox\"\r\n                label=\"Selected (Default)\"\r\n                  size=\"sm\"\r\n                formControlName=\"sytm_isselected\">\r\n              </cide-ele-input>\r\n              </div>\r\n            <div formGroupName=\"sytm_layout\" class=\"tw-bg-white tw-border tw-border-gray-200 tw-rounded-md tw-divide-y tw-overflow-hidden\">\r\n              <!-- Sidebar -->\r\n              <div class=\"tw-px-3 tw-py-2\" formGroupName=\"sytm_layout_sidebar\">\r\n                <cide-ele-input id=\"layout_sidebar_status\" type=\"checkbox\" label=\"Sidebar\" size=\"sm\" formControlName=\"status\"></cide-ele-input>\r\n            </div>\r\n            <!-- Header -->\r\n              <div class=\"tw-px-3 tw-py-2\" formGroupName=\"sytm_layout_header\">\r\n                <cide-ele-input id=\"layout_header_status\" type=\"checkbox\" label=\"Header\" size=\"sm\" formControlName=\"status\"></cide-ele-input>\r\n              </div>\r\n              <!-- Footer -->\r\n              <div class=\"tw-px-3 tw-py-2\" formGroupName=\"sytm_layout_footer\">\r\n                <cide-ele-input id=\"layout_footer_status\" type=\"checkbox\" label=\"Footer\" size=\"sm\" formControlName=\"status\"></cide-ele-input>\r\n              </div>\r\n              <!-- Breadcrumb -->\r\n              <div class=\"tw-px-3 tw-py-2\" formGroupName=\"sytm_layout_breadcrumb\">\r\n                <cide-ele-input id=\"layout_breadcrumb_status\" type=\"checkbox\" label=\"Breadcrumb\" size=\"sm\" formControlName=\"status\"></cide-ele-input>\r\n              </div>\r\n              <!-- Console -->\r\n              <div class=\"tw-px-3 tw-py-2\" formGroupName=\"sytm_layout_console\">\r\n                <cide-ele-input id=\"layout_console_status\" type=\"checkbox\" label=\"Console\" size=\"sm\" formControlName=\"status\"></cide-ele-input>\r\n            </div>\r\n              <!-- Request -->\r\n              <div class=\"tw-px-3 tw-py-2\" formGroupName=\"sytm_layout_request\">\r\n                <cide-ele-input id=\"layout_request_status\" type=\"checkbox\" label=\"Request\" size=\"sm\" formControlName=\"status\"></cide-ele-input>\r\n              </div>\r\n            </div>\r\n            <p class=\"tw-text-xs tw-text-gray-500 tw-pt-1\">Toggle active sections. Only one theme can be selected as default. More options can be added here later.</p>\r\n              </div>\r\n          <!-- Drawer Configuration -->\r\n          <div class=\"tw-space-y-2 md:tw-col-span-3\">\r\n            <div class=\"tw-flex tw-items-center tw-justify-between\">\r\n              <div class=\"tw-text-sm tw-font-medium tw-text-gray-700\">Drawers</div>\r\n              <button cideEleButton type=\"button\" size=\"xs\" variant=\"outline\" (click)=\"addDrawer()\">\r\n                Add Drawer\r\n              </button>\r\n            </div>\r\n\r\n            <div formGroupName=\"sytm_layout\">\r\n              <div class=\"tw-space-y-2\" formArrayName=\"sytm_layout_drawer\">\r\n                <div *ngFor=\"let drawerGrp of drawerArray.controls; let i = index\" [formGroupName]=\"i\" class=\"tw-border tw-border-gray-200 tw-rounded-md tw-p-3 tw-flex tw-items-center tw-gap-3\">\r\n                  <cide-ele-input id=\"drawer_active_{{i}}\" type=\"checkbox\" label=\"Active\" size=\"sm\" formControlName=\"syth_status\"></cide-ele-input>\r\n                  <div class=\"tw-flex-1\">\r\n                <cide-ele-select\r\n                      id=\"drawer_config_{{i}}\"\r\n                      label=\"Drawer For\"\r\n                  size=\"sm\"\r\n                      [options]=\"drawerConfigOptions\"\r\n                      formControlName=\"syth_config_syco_for\">\r\n                </cide-ele-select>\r\n              </div>\r\n                  <button cideEleButton type=\"button\" size=\"xs\" variant=\"ghost\" (click)=\"removeDrawer(i)\">\r\n                    <cide-ele-icon class=\"tw-w-4 tw-h-4\">delete</cide-ele-icon>\r\n                  </button>\r\n            </div>\r\n                <p class=\"tw-text-xs tw-text-gray-500\">Configure multiple drawers as needed.</p>\r\n              </div>\r\n            </div>\r\n          </div>\r\n      </div>\r\n\r\n      <!-- Form Actions -->\r\n        <div class=\"tw-flex tw-flex-col tw-gap-2 tw-pt-4 tw-border-t tw-border-gray-200\">\r\n          <div class=\"tw-flex tw-items-center tw-justify-end tw-space-x-3\">\r\n            <button cideEleButton type=\"button\" variant=\"outline\" (click)=\"cancelForm()\" [disabled]=\"loading()\">Cancel</button>\r\n            <button cideEleButton type=\"submit\" variant=\"primary\" leftIcon=\"add\" [disabled]=\"!themeForm.valid || loading()\" [loading]=\"loading()\">\r\n          {{ isEditMode() ? 'Update Theme' : 'Create Theme' }}\r\n        </button>\r\n          </div>\r\n      </div>\r\n    </form>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Right: Theme gallery (40%) -->\r\n  <div class=\"tw-hidden lg:tw-flex tw-w-2/5 tw-flex-col\">\r\n    <!-- (Header consolidated above) -->\r\n\r\n    <!-- Gallery list -->\r\n    <div class=\"tw-flex-1 tw-overflow-auto tw-bg-gray-50\">\r\n      <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3 tw-p-4\">\r\n        @for (theme of filteredThemes(); track theme._id) {\r\n          <div class=\"tw-rounded-md tw-transition tw-cursor-pointer tw-relative\"\r\n               [ngClass]=\"theme.sytm_isselected\r\n                 ? 'tw-border tw-border-blue-500 tw-ring-2 tw-ring-blue-200 tw-bg-blue-50/50'\r\n                 : 'tw-bg-white tw-border tw-border-gray-200 hover:tw-shadow-sm'\"\r\n               (click)=\"editTheme(theme)\"\r\n               role=\"button\"\r\n               tabindex=\"0\"\r\n               [attr.aria-selected]=\"theme.sytm_isselected ? 'true' : 'false'\"\r\n               [attr.aria-label]=\"'Edit theme ' + (theme.sytm_title || theme.sytm_theme_code)\"\r\n               (keydown.enter)=\"editTheme(theme)\"\r\n               (keydown.space)=\"$event.preventDefault(); editTheme(theme)\">\r\n\r\n            <!-- Selected badge -->\r\n            <div *ngIf=\"theme.sytm_isselected\"\r\n                 class=\"tw-absolute tw-top-2 tw-right-2 tw-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-rounded-full tw-bg-blue-600 tw-text-white\">\r\n              <cide-ele-icon class=\"tw-w-4 tw-h-4\">check</cide-ele-icon>\r\n            </div>\r\n \r\n            <div class=\"tw-aspect-[16/9] tw-bg-gray-100 tw-rounded-t-md tw-overflow-hidden tw-flex tw-items-center tw-justify-center\">\r\n              @if (getPreviewUrl(theme)) {\r\n                <img [src]=\"getPreviewUrl(theme)\" class=\"tw-w-full tw-h-full tw-object-cover\" alt=\"Preview\" />\r\n              } @else {\r\n                <div class=\"tw-text-gray-400 tw-text-xs\">No preview</div>\r\n              }\r\n            </div>\r\n            <div class=\"tw-p-3 tw-space-y-1\">\r\n              <div class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-truncate\" [title]=\"theme.sytm_title\">{{ theme.sytm_title || 'Untitled Theme' }}</div>\r\n              <div class=\"tw-text-xs tw-text-gray-500 tw-truncate\" [title]=\"theme.sytm_theme_code\">{{ theme.sytm_theme_code }}</div>\r\n              <div class=\"tw-flex tw-items-center tw-justify-between tw-pt-1\">\r\n                <span class=\"tw-inline-flex tw-items-center tw-gap-1 tw-text-xs\" [ngClass]=\"theme.sytm_isactive ? 'tw-text-green-700' : 'tw-text-red-700'\">\r\n                  <span class=\"tw-w-1.5 tw-h-1.5 tw-rounded-full\" [ngClass]=\"theme.sytm_isactive ? 'tw-bg-green-500' : 'tw-bg-red-500'\"></span>\r\n                  {{ theme.sytm_isactive ? 'Active' : 'Inactive' }}\r\n                </span>\r\n                <div class=\"tw-flex tw-items-center tw-gap-1\">\r\n                  <!-- Set Selected Button - Clear and Simple -->\r\n                  @if (theme.sytm_isselected) {\r\n                    <span class=\"tw-inline-flex tw-items-center tw-gap-1 tw-px-2 tw-py-1 tw-bg-green-100 tw-text-green-800 tw-rounded-md tw-text-xs tw-font-medium\">\r\n                      <cide-ele-icon class=\"tw-w-3 tw-h-3\">check</cide-ele-icon>\r\n                      Selected\r\n                    </span>\r\n                  } @else {\r\n                    <button cideEleButton \r\n                            variant=\"outline\" \r\n                            size=\"xs\"\r\n                            (click)=\"$event.stopPropagation(); setSelectedTheme(theme)\"\r\n                            [attr.aria-label]=\"'Select ' + (theme.sytm_title || theme.sytm_theme_code) + ' theme'\"\r\n                            class=\"tw-text-xs\">\r\n                      Select\r\n                    </button>\r\n                  }\r\n                  <button cideEleButton variant=\"ghost\" size=\"xs\" (click)=\"$event.stopPropagation(); editTheme(theme)\"\r\n                          [attr.aria-label]=\"'Edit theme ' + (theme.sytm_title || theme.sytm_theme_code)\">\r\n                    <cide-ele-icon class=\"tw-w-4 tw-h-4\">edit</cide-ele-icon>\r\n                  </button>\r\n                  <button cideEleButton variant=\"ghost\" size=\"xs\" (click)=\"$event.stopPropagation(); deleteTheme(theme)\"\r\n                          [attr.aria-label]=\"'Delete theme ' + (theme.sytm_title || theme.sytm_theme_code)\">\r\n                    <cide-ele-icon class=\"tw-w-4 tw-h-4\">delete</cide-ele-icon>\r\n                  </button>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        }\r\n\r\n        @if (!loading() && filteredThemes().length === 0) {\r\n          <div class=\"tw-col-span-full tw-text-center tw-text-xs tw-text-gray-500 tw-py-8\">No themes found</div>\r\n        }\r\n  </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<!-- \r\n  Angular Template References for Grid Renderers (Best Practice)\r\n  \r\n  These ng-template elements represent the Angular best practice for custom rendering.\r\n  They provide:\r\n  - Type safety with template context\r\n  - Component lifecycle integration\r\n  - Change detection optimization\r\n  - Proper event handling\r\n  - Accessibility features\r\n  \r\n  Note: Current data grid uses string renderers for compatibility.\r\n  Templates are maintained for future component enhancement.\r\n-->\r\n\r\n<!-- Theme Details Renderer Template -->\r\n<ng-template #themeDetailsRendererTemplate let-row=\"row\" let-value=\"value\">\r\n  <div class=\"tw-flex tw-items-center tw-min-w-0\">\r\n    <!-- Theme Icon -->\r\n    <div class=\"tw-flex-shrink-0\">\r\n      <cide-ele-icon \r\n        class=\"tw-text-purple-600\" \r\n        size=\"xs\">\r\n        palette\r\n      </cide-ele-icon>\r\n    </div>\r\n    \r\n    <!-- Theme Details -->\r\n    <div class=\"tw-ml-3 tw-min-w-0 tw-flex-1\">\r\n      <div class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-truncate\" \r\n           [title]=\"row.sytm_title\">\r\n        {{ row.sytm_title || 'Untitled' }}\r\n      </div>\r\n      @if (row.sytm_desc) {\r\n        <div class=\"tw-text-xs tw-text-gray-500 tw-truncate\" \r\n             [title]=\"row.sytm_desc\">\r\n          {{ row.sytm_desc }}\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- Theme Status Renderer Template -->\r\n<ng-template #themeStatusRendererTemplate let-row=\"row\" let-value=\"value\">\r\n  <span class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-whitespace-nowrap\"\r\n        [ngClass]=\"row.sytm_isactive ? 'tw-bg-green-100 tw-text-green-800' : 'tw-bg-red-100 tw-text-red-800'\">\r\n    {{ row.sytm_isactive ? 'Active' : 'Inactive' }}\r\n  </span>\r\n</ng-template>\r\n\r\n<!-- Actions Dropdown Renderer Template -->\r\n<ng-template #actionsDropdownRendererTemplate let-row=\"row\" let-value=\"value\">\r\n  <cide-ele-dropdown \r\n    [items]=\"getActionDropdownItems(row)\"\r\n    [config]=\"{ triggerIcon: 'more_vert', triggerSize: 'sm' }\"\r\n    (itemClick)=\"onDropdownItemClick($event, row)\">\r\n  </cide-ele-dropdown>\r\n</ng-template> ", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton]", 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: 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: 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"], outputs: ["ngModelChange", "change", "searchChange"] }, { kind: "component", type: CideTextareaComponent, selector: "cide-ele-textarea", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "minlength", "maxlength", "rows", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput"], outputs: ["ngModelChange"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideEleDropdownComponent, selector: "cide-ele-dropdown", inputs: ["items", "config", "triggerTemplate", "menuTemplate"], outputs: ["itemClick", "dropdownToggle"] }, { kind: "component", type: CideEleJsonEditorComponent, selector: "cide-ele-json-editor", inputs: ["label", "helperText", "required", "disabled", "showCharacterCount", "config"], outputs: ["valueChange", "objectChange", "errorsChange", "validChange"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PageThemeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: PageThemeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cide-core-app-page-theme', standalone: true, imports: [
                         CommonModule,
@@ -6243,7 +6409,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                     ], template: "<!-- Page Theme Container -->\r\n<div class=\"tw-flex tw-h-full tw-w-full\">\r\n  \r\n  <!-- Left: Form and header (60%) -->\r\n  <div class=\"tw-w-full lg:tw-w-3/5 tw-flex tw-flex-col tw-border-r tw-border-gray-200\">\r\n\r\n  <!-- Header Section -->\r\n    <div class=\"tw-px-6 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\r\n      <div 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\r\n      <!-- Title and Back Button -->\r\n      <div class=\"tw-flex tw-items-center tw-space-x-4\">\r\n          <button cideEleButton variant=\"ghost\" size=\"sm\" (click)=\"goBack()\" class=\"tw-text-gray-600 hover:tw-text-gray-900\">\r\n          <cide-ele-icon class=\"tw-w-4 tw-h-4\">arrow_back</cide-ele-icon>\r\n        </button>\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\">palette</cide-ele-icon>\r\n          <div>\r\n            <h5 class=\"tw-text-base tw-font-medium tw-text-gray-900 tw-m-0\">Theme Management</h5>\r\n            <p class=\"tw-text-sm tw-text-gray-500 tw-m-0\">Page: {{ pageTitle() }}</p>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Error Message -->\r\n    @if (error()) {\r\n    <div class=\"tw-mt-4 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\" 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  </div>\r\n\r\n    <!-- Quick Add/Edit Form Section -->\r\n    <div class=\"tw-px-6 tw-py-4 tw-bg-white tw-overflow-auto\">\r\n    <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\r\n      <div class=\"tw-flex tw-items-center tw-space-x-3\">\r\n        <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\r\n        <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-m-0\">{{ isEditMode() ? 'Edit Theme' : 'Quick Add Theme' }}</h6>\r\n      </div>\r\n    </div>\r\n\r\n      <!-- Form (kept as-is) -->\r\n    <form [formGroup]=\"themeForm\" (ngSubmit)=\"saveTheme()\" class=\"tw-space-y-4\">\r\n      <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-3 tw-gap-4\">\r\n        <!-- Theme Title -->\r\n        <div class=\"tw-space-y-2\">\r\n            <cide-ele-input id=\"sytm_title\" formControlName=\"sytm_title\" placeholder=\"Enter theme title\" label=\"Theme Title*\" size=\"sm\"></cide-ele-input>\r\n        </div>\r\n        <!-- Theme Code -->\r\n        <div class=\"tw-space-y-2\">\r\n            <cide-ele-input id=\"sytm_theme_code\" formControlName=\"sytm_theme_code\" placeholder=\"Enter theme code\" label=\"Theme Code*\" size=\"sm\"></cide-ele-input>\r\n        </div>\r\n        <!-- Status -->\r\n        <div class=\"tw-space-y-2\">\r\n            <cide-ele-input\r\n              id=\"sytm_isactive_cb\"\r\n              type=\"checkbox\"\r\n              label=\"Active\"\r\n            size=\"sm\"\r\n              formControlName=\"sytm_isactive\">\r\n            </cide-ele-input>\r\n        </div>\r\n        <!-- Sub Title -->\r\n        <div class=\"tw-space-y-2\">\r\n            <cide-ele-input id=\"sytm_sub_title\" formControlName=\"sytm_sub_title\" placeholder=\"Enter sub title\" label=\"Sub Title\" size=\"sm\"></cide-ele-input>\r\n        </div>\r\n        <!-- Preview ID -->\r\n        <div class=\"tw-space-y-2\">\r\n            <cide-ele-input id=\"sytm_preview_id_fm\" formControlName=\"sytm_preview_id_fm\" placeholder=\"Enter preview image ID\" label=\"Preview Image ID\" size=\"sm\"></cide-ele-input>\r\n        </div>\r\n        <!-- Description -->\r\n        <div class=\"tw-space-y-2 md:tw-col-span-2\">\r\n            <cide-ele-textarea id=\"sytm_desc\" formControlName=\"sytm_desc\" placeholder=\"Enter theme description\" rows=\"2\" label=\"Description\" size=\"sm\"></cide-ele-textarea>\r\n        </div>\r\n                 <!-- Configuration JSON -->\r\n         <div class=\"tw-space-y-2 md:tw-col-span-3\">\r\n            <cide-ele-json-editor label=\"Configuration JSON\" formControlName=\"sytm_configuration\" [required]=\"true\" [config]=\"{\r\n               showLineNumbers: true,\r\n               autoFormat: true,\r\n               validateOnChange: true,\r\n               minHeight: 150,\r\n               maxHeight: 300,\r\n               placeholder: 'Enter theme configuration JSON...'\r\n              }\" helperText=\"Enter valid JSON configuration for the theme\"></cide-ele-json-editor>\r\n         </div>\r\n          <!-- Layout Configuration + Selection: right-side checkbox list -->\r\n          <div class=\"lg:tw-col-span-1 tw-space-y-2\">\r\n            <div class=\"tw-text-sm tw-font-medium tw-text-gray-700\">Layout & Selection</div>\r\n            <!-- Selected toggle -->\r\n            <div class=\"tw-bg-white tw-border tw-border-gray-200 tw-rounded-md tw-px-3 tw-py-2\">\r\n              <cide-ele-input\r\n                id=\"sytm_isselected\"\r\n                type=\"checkbox\"\r\n                label=\"Selected (Default)\"\r\n                  size=\"sm\"\r\n                formControlName=\"sytm_isselected\">\r\n              </cide-ele-input>\r\n              </div>\r\n            <div formGroupName=\"sytm_layout\" class=\"tw-bg-white tw-border tw-border-gray-200 tw-rounded-md tw-divide-y tw-overflow-hidden\">\r\n              <!-- Sidebar -->\r\n              <div class=\"tw-px-3 tw-py-2\" formGroupName=\"sytm_layout_sidebar\">\r\n                <cide-ele-input id=\"layout_sidebar_status\" type=\"checkbox\" label=\"Sidebar\" size=\"sm\" formControlName=\"status\"></cide-ele-input>\r\n            </div>\r\n            <!-- Header -->\r\n              <div class=\"tw-px-3 tw-py-2\" formGroupName=\"sytm_layout_header\">\r\n                <cide-ele-input id=\"layout_header_status\" type=\"checkbox\" label=\"Header\" size=\"sm\" formControlName=\"status\"></cide-ele-input>\r\n              </div>\r\n              <!-- Footer -->\r\n              <div class=\"tw-px-3 tw-py-2\" formGroupName=\"sytm_layout_footer\">\r\n                <cide-ele-input id=\"layout_footer_status\" type=\"checkbox\" label=\"Footer\" size=\"sm\" formControlName=\"status\"></cide-ele-input>\r\n              </div>\r\n              <!-- Breadcrumb -->\r\n              <div class=\"tw-px-3 tw-py-2\" formGroupName=\"sytm_layout_breadcrumb\">\r\n                <cide-ele-input id=\"layout_breadcrumb_status\" type=\"checkbox\" label=\"Breadcrumb\" size=\"sm\" formControlName=\"status\"></cide-ele-input>\r\n              </div>\r\n              <!-- Console -->\r\n              <div class=\"tw-px-3 tw-py-2\" formGroupName=\"sytm_layout_console\">\r\n                <cide-ele-input id=\"layout_console_status\" type=\"checkbox\" label=\"Console\" size=\"sm\" formControlName=\"status\"></cide-ele-input>\r\n            </div>\r\n              <!-- Request -->\r\n              <div class=\"tw-px-3 tw-py-2\" formGroupName=\"sytm_layout_request\">\r\n                <cide-ele-input id=\"layout_request_status\" type=\"checkbox\" label=\"Request\" size=\"sm\" formControlName=\"status\"></cide-ele-input>\r\n              </div>\r\n            </div>\r\n            <p class=\"tw-text-xs tw-text-gray-500 tw-pt-1\">Toggle active sections. Only one theme can be selected as default. More options can be added here later.</p>\r\n              </div>\r\n          <!-- Drawer Configuration -->\r\n          <div class=\"tw-space-y-2 md:tw-col-span-3\">\r\n            <div class=\"tw-flex tw-items-center tw-justify-between\">\r\n              <div class=\"tw-text-sm tw-font-medium tw-text-gray-700\">Drawers</div>\r\n              <button cideEleButton type=\"button\" size=\"xs\" variant=\"outline\" (click)=\"addDrawer()\">\r\n                Add Drawer\r\n              </button>\r\n            </div>\r\n\r\n            <div formGroupName=\"sytm_layout\">\r\n              <div class=\"tw-space-y-2\" formArrayName=\"sytm_layout_drawer\">\r\n                <div *ngFor=\"let drawerGrp of drawerArray.controls; let i = index\" [formGroupName]=\"i\" class=\"tw-border tw-border-gray-200 tw-rounded-md tw-p-3 tw-flex tw-items-center tw-gap-3\">\r\n                  <cide-ele-input id=\"drawer_active_{{i}}\" type=\"checkbox\" label=\"Active\" size=\"sm\" formControlName=\"syth_status\"></cide-ele-input>\r\n                  <div class=\"tw-flex-1\">\r\n                <cide-ele-select\r\n                      id=\"drawer_config_{{i}}\"\r\n                      label=\"Drawer For\"\r\n                  size=\"sm\"\r\n                      [options]=\"drawerConfigOptions\"\r\n                      formControlName=\"syth_config_syco_for\">\r\n                </cide-ele-select>\r\n              </div>\r\n                  <button cideEleButton type=\"button\" size=\"xs\" variant=\"ghost\" (click)=\"removeDrawer(i)\">\r\n                    <cide-ele-icon class=\"tw-w-4 tw-h-4\">delete</cide-ele-icon>\r\n                  </button>\r\n            </div>\r\n                <p class=\"tw-text-xs tw-text-gray-500\">Configure multiple drawers as needed.</p>\r\n              </div>\r\n            </div>\r\n          </div>\r\n      </div>\r\n\r\n      <!-- Form Actions -->\r\n        <div class=\"tw-flex tw-flex-col tw-gap-2 tw-pt-4 tw-border-t tw-border-gray-200\">\r\n          <div class=\"tw-flex tw-items-center tw-justify-end tw-space-x-3\">\r\n            <button cideEleButton type=\"button\" variant=\"outline\" (click)=\"cancelForm()\" [disabled]=\"loading()\">Cancel</button>\r\n            <button cideEleButton type=\"submit\" variant=\"primary\" leftIcon=\"add\" [disabled]=\"!themeForm.valid || loading()\" [loading]=\"loading()\">\r\n          {{ isEditMode() ? 'Update Theme' : 'Create Theme' }}\r\n        </button>\r\n          </div>\r\n      </div>\r\n    </form>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Right: Theme gallery (40%) -->\r\n  <div class=\"tw-hidden lg:tw-flex tw-w-2/5 tw-flex-col\">\r\n    <!-- (Header consolidated above) -->\r\n\r\n    <!-- Gallery list -->\r\n    <div class=\"tw-flex-1 tw-overflow-auto tw-bg-gray-50\">\r\n      <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3 tw-p-4\">\r\n        @for (theme of filteredThemes(); track theme._id) {\r\n          <div class=\"tw-rounded-md tw-transition tw-cursor-pointer tw-relative\"\r\n               [ngClass]=\"theme.sytm_isselected\r\n                 ? 'tw-border tw-border-blue-500 tw-ring-2 tw-ring-blue-200 tw-bg-blue-50/50'\r\n                 : 'tw-bg-white tw-border tw-border-gray-200 hover:tw-shadow-sm'\"\r\n               (click)=\"editTheme(theme)\"\r\n               role=\"button\"\r\n               tabindex=\"0\"\r\n               [attr.aria-selected]=\"theme.sytm_isselected ? 'true' : 'false'\"\r\n               [attr.aria-label]=\"'Edit theme ' + (theme.sytm_title || theme.sytm_theme_code)\"\r\n               (keydown.enter)=\"editTheme(theme)\"\r\n               (keydown.space)=\"$event.preventDefault(); editTheme(theme)\">\r\n\r\n            <!-- Selected badge -->\r\n            <div *ngIf=\"theme.sytm_isselected\"\r\n                 class=\"tw-absolute tw-top-2 tw-right-2 tw-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-rounded-full tw-bg-blue-600 tw-text-white\">\r\n              <cide-ele-icon class=\"tw-w-4 tw-h-4\">check</cide-ele-icon>\r\n            </div>\r\n \r\n            <div class=\"tw-aspect-[16/9] tw-bg-gray-100 tw-rounded-t-md tw-overflow-hidden tw-flex tw-items-center tw-justify-center\">\r\n              @if (getPreviewUrl(theme)) {\r\n                <img [src]=\"getPreviewUrl(theme)\" class=\"tw-w-full tw-h-full tw-object-cover\" alt=\"Preview\" />\r\n              } @else {\r\n                <div class=\"tw-text-gray-400 tw-text-xs\">No preview</div>\r\n              }\r\n            </div>\r\n            <div class=\"tw-p-3 tw-space-y-1\">\r\n              <div class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-truncate\" [title]=\"theme.sytm_title\">{{ theme.sytm_title || 'Untitled Theme' }}</div>\r\n              <div class=\"tw-text-xs tw-text-gray-500 tw-truncate\" [title]=\"theme.sytm_theme_code\">{{ theme.sytm_theme_code }}</div>\r\n              <div class=\"tw-flex tw-items-center tw-justify-between tw-pt-1\">\r\n                <span class=\"tw-inline-flex tw-items-center tw-gap-1 tw-text-xs\" [ngClass]=\"theme.sytm_isactive ? 'tw-text-green-700' : 'tw-text-red-700'\">\r\n                  <span class=\"tw-w-1.5 tw-h-1.5 tw-rounded-full\" [ngClass]=\"theme.sytm_isactive ? 'tw-bg-green-500' : 'tw-bg-red-500'\"></span>\r\n                  {{ theme.sytm_isactive ? 'Active' : 'Inactive' }}\r\n                </span>\r\n                <div class=\"tw-flex tw-items-center tw-gap-1\">\r\n                  <!-- Set Selected Button - Clear and Simple -->\r\n                  @if (theme.sytm_isselected) {\r\n                    <span class=\"tw-inline-flex tw-items-center tw-gap-1 tw-px-2 tw-py-1 tw-bg-green-100 tw-text-green-800 tw-rounded-md tw-text-xs tw-font-medium\">\r\n                      <cide-ele-icon class=\"tw-w-3 tw-h-3\">check</cide-ele-icon>\r\n                      Selected\r\n                    </span>\r\n                  } @else {\r\n                    <button cideEleButton \r\n                            variant=\"outline\" \r\n                            size=\"xs\"\r\n                            (click)=\"$event.stopPropagation(); setSelectedTheme(theme)\"\r\n                            [attr.aria-label]=\"'Select ' + (theme.sytm_title || theme.sytm_theme_code) + ' theme'\"\r\n                            class=\"tw-text-xs\">\r\n                      Select\r\n                    </button>\r\n                  }\r\n                  <button cideEleButton variant=\"ghost\" size=\"xs\" (click)=\"$event.stopPropagation(); editTheme(theme)\"\r\n                          [attr.aria-label]=\"'Edit theme ' + (theme.sytm_title || theme.sytm_theme_code)\">\r\n                    <cide-ele-icon class=\"tw-w-4 tw-h-4\">edit</cide-ele-icon>\r\n                  </button>\r\n                  <button cideEleButton variant=\"ghost\" size=\"xs\" (click)=\"$event.stopPropagation(); deleteTheme(theme)\"\r\n                          [attr.aria-label]=\"'Delete theme ' + (theme.sytm_title || theme.sytm_theme_code)\">\r\n                    <cide-ele-icon class=\"tw-w-4 tw-h-4\">delete</cide-ele-icon>\r\n                  </button>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        }\r\n\r\n        @if (!loading() && filteredThemes().length === 0) {\r\n          <div class=\"tw-col-span-full tw-text-center tw-text-xs tw-text-gray-500 tw-py-8\">No themes found</div>\r\n        }\r\n  </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<!-- \r\n  Angular Template References for Grid Renderers (Best Practice)\r\n  \r\n  These ng-template elements represent the Angular best practice for custom rendering.\r\n  They provide:\r\n  - Type safety with template context\r\n  - Component lifecycle integration\r\n  - Change detection optimization\r\n  - Proper event handling\r\n  - Accessibility features\r\n  \r\n  Note: Current data grid uses string renderers for compatibility.\r\n  Templates are maintained for future component enhancement.\r\n-->\r\n\r\n<!-- Theme Details Renderer Template -->\r\n<ng-template #themeDetailsRendererTemplate let-row=\"row\" let-value=\"value\">\r\n  <div class=\"tw-flex tw-items-center tw-min-w-0\">\r\n    <!-- Theme Icon -->\r\n    <div class=\"tw-flex-shrink-0\">\r\n      <cide-ele-icon \r\n        class=\"tw-text-purple-600\" \r\n        size=\"xs\">\r\n        palette\r\n      </cide-ele-icon>\r\n    </div>\r\n    \r\n    <!-- Theme Details -->\r\n    <div class=\"tw-ml-3 tw-min-w-0 tw-flex-1\">\r\n      <div class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-truncate\" \r\n           [title]=\"row.sytm_title\">\r\n        {{ row.sytm_title || 'Untitled' }}\r\n      </div>\r\n      @if (row.sytm_desc) {\r\n        <div class=\"tw-text-xs tw-text-gray-500 tw-truncate\" \r\n             [title]=\"row.sytm_desc\">\r\n          {{ row.sytm_desc }}\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- Theme Status Renderer Template -->\r\n<ng-template #themeStatusRendererTemplate let-row=\"row\" let-value=\"value\">\r\n  <span class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-whitespace-nowrap\"\r\n        [ngClass]=\"row.sytm_isactive ? 'tw-bg-green-100 tw-text-green-800' : 'tw-bg-red-100 tw-text-red-800'\">\r\n    {{ row.sytm_isactive ? 'Active' : 'Inactive' }}\r\n  </span>\r\n</ng-template>\r\n\r\n<!-- Actions Dropdown Renderer Template -->\r\n<ng-template #actionsDropdownRendererTemplate let-row=\"row\" let-value=\"value\">\r\n  <cide-ele-dropdown \r\n    [items]=\"getActionDropdownItems(row)\"\r\n    [config]=\"{ triggerIcon: 'more_vert', triggerSize: 'sm' }\"\r\n    (itemClick)=\"onDropdownItemClick($event, row)\">\r\n  </cide-ele-dropdown>\r\n</ng-template> " }]
         }] });
 
+var pageTheme_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    PageThemeComponent: PageThemeComponent
+});
+
 class PageControlsService {
+    http;
     constructor(http) {
         this.http = http;
         console.log('PageControlsService initialized - using real API');
@@ -6363,10 +6535,10 @@ class PageControlsService {
         console.error('Page Controls Service Error:', errorMessage);
         return throwError(() => new Error(errorMessage));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PageControlsService, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PageControlsService, providedIn: 'root' }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: PageControlsService, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: PageControlsService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PageControlsService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: PageControlsService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -6374,64 +6546,62 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
         }], ctorParameters: () => [{ type: i1.HttpClient }] });
 
 class PageControlsComponent {
-    constructor() {
-        // Dependency injection
-        this.destroyRef = inject(DestroyRef);
-        this.controlsService = inject(PageControlsService);
-        this.appState = inject(AppStateHelperService);
-        this.fb = inject(NonNullableFormBuilder);
-        this.router = inject(Router);
-        this.route = inject(ActivatedRoute);
-        // Make Math available in template
-        this.Math = Math;
-        // Signals for reactive state management
-        this.controls = signal([]);
-        this.loading = signal(false);
-        this.error = signal(null);
-        this.selectedItems = signal([]);
-        this.searchTerm = signal('');
-        // Page information
-        this.pageId = signal('');
-        this.pageTitle = signal('');
-        // Form state
-        this.isEditMode = signal(false);
-        this.editingControlId = signal(null);
-        this.retrievedControl = signal(null);
-        // Control selection for new layout
-        this.selectedControlId = signal(null);
-        // Pagination signals
-        this.currentPage = signal(1);
-        this.pageSize = signal(10);
-        this.totalItems = signal(0);
-        // Modern reactive forms with signals - No validators for simplicity
-        this.controlForm = this.fb.group({
-            sype_key: [''],
-            sype_label: [''],
-            sype_label_hide: [false],
-            sype_auto_complete: [false], // Changed to boolean for checkbox
-            sype_hide_helper_and_error_text: [false],
-            sype_type: [''], // controlType
-            sype_option_key: [''],
-            sype_placeholder: [''],
-            sype_min_length: [0],
-            sype_max_length: [20],
-            sype_regex: [''],
-            sype_required: [false],
-            sype_disabled: [false],
-            sype_width: [''], // Changed to string for px values like "20px"
-            sype_height: [''], // Changed to string for px values like "20px"
-            sype_label_placement: ['left'],
-            sype_helper_text_collapse: [false],
-            sype_default: [''],
-            sype_tooltip: [''],
-            sype_size: ['sm'], // Changed default to small
-            sype_leading_icon: [''],
-            sype_isactive: [true],
-            sype_entity_id_syen: ['']
-        });
-        // Computed values
-        this.isFormDirty = computed(() => this.controlForm.dirty);
-    }
+    // Dependency injection
+    destroyRef = inject(DestroyRef);
+    controlsService = inject(PageControlsService);
+    appState = inject(AppStateHelperService);
+    fb = inject(NonNullableFormBuilder);
+    router = inject(Router);
+    route = inject(ActivatedRoute);
+    // Make Math available in template
+    Math = Math;
+    // Signals for reactive state management
+    controls = signal([], ...(ngDevMode ? [{ debugName: "controls" }] : []));
+    loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+    error = signal(null, ...(ngDevMode ? [{ debugName: "error" }] : []));
+    selectedItems = signal([], ...(ngDevMode ? [{ debugName: "selectedItems" }] : []));
+    searchTerm = signal('', ...(ngDevMode ? [{ debugName: "searchTerm" }] : []));
+    // Page information
+    pageId = signal('', ...(ngDevMode ? [{ debugName: "pageId" }] : []));
+    pageTitle = signal('', ...(ngDevMode ? [{ debugName: "pageTitle" }] : []));
+    // Form state
+    isEditMode = signal(false, ...(ngDevMode ? [{ debugName: "isEditMode" }] : []));
+    editingControlId = signal(null, ...(ngDevMode ? [{ debugName: "editingControlId" }] : []));
+    retrievedControl = signal(null, ...(ngDevMode ? [{ debugName: "retrievedControl" }] : []));
+    // Control selection for new layout
+    selectedControlId = signal(null, ...(ngDevMode ? [{ debugName: "selectedControlId" }] : []));
+    // Pagination signals
+    currentPage = signal(1, ...(ngDevMode ? [{ debugName: "currentPage" }] : []));
+    pageSize = signal(10, ...(ngDevMode ? [{ debugName: "pageSize" }] : []));
+    totalItems = signal(0, ...(ngDevMode ? [{ debugName: "totalItems" }] : []));
+    // Modern reactive forms with signals - No validators for simplicity
+    controlForm = this.fb.group({
+        sype_key: [''],
+        sype_label: [''],
+        sype_label_hide: [false],
+        sype_auto_complete: [false], // Changed to boolean for checkbox
+        sype_hide_helper_and_error_text: [false],
+        sype_type: [''], // controlType
+        sype_option_key: [''],
+        sype_placeholder: [''],
+        sype_min_length: [0],
+        sype_max_length: [20],
+        sype_regex: [''],
+        sype_required: [false],
+        sype_disabled: [false],
+        sype_width: [''], // Changed to string for px values like "20px"
+        sype_height: [''], // Changed to string for px values like "20px"
+        sype_label_placement: ['left'],
+        sype_helper_text_collapse: [false],
+        sype_default: [''],
+        sype_tooltip: [''],
+        sype_size: ['sm'], // Changed default to small
+        sype_leading_icon: [''],
+        sype_isactive: [true],
+        sype_entity_id_syen: ['']
+    });
+    // Computed values
+    isFormDirty = computed(() => this.controlForm.dirty, ...(ngDevMode ? [{ debugName: "isFormDirty" }] : []));
     ngOnInit() {
         this.initializeComponent();
     }
@@ -6827,10 +6997,10 @@ class PageControlsComponent {
     trackByControlId(index, control) {
         return control._id || '';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PageControlsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: PageControlsComponent, isStandalone: true, selector: "cide-core-app-page-controls", ngImport: i0, template: "<!-- Page Controls Container -->\n<div class=\"page-controls-container\">\n  <!-- Header Section -->\n  <div class=\"header\">\n    <div class=\"header-content\">\n      <div class=\"header-left\">\n        <button \n          cideEleButton\n          variant=\"ghost\"\n          size=\"sm\"\n          (click)=\"goBack()\"\n          class=\"back-button\">\n          <cide-ele-icon>arrow_back</cide-ele-icon>\n        </button>\n        <div class=\"title-section\">\n          <cide-ele-icon class=\"title-icon\">settings</cide-ele-icon>\n          <div>\n            <h1 class=\"title\">Control Management</h1>\n            <p class=\"subtitle\">Page: {{ pageTitle() }}</p>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Error Message -->\n  <div class=\"error-message\" *ngIf=\"error()\">\n    <cide-ele-icon>error</cide-ele-icon>\n    <div>\n      <h3>Error</h3>\n      <p>{{ error() }}</p>\n    </div>\n  </div>\n\n  <!-- Main Content Area -->\n  <div class=\"main-content\">\n    <!-- Form Section -->\n    <div class=\"form-section\">\n      <div class=\"form-header\">\n        <cide-ele-icon>{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\n        <h3>{{ isEditMode() ? 'Edit Control' : 'Quick Add Control' }}</h3>\n      </div>\n\n      <!-- Form -->\n      <form [formGroup]=\"controlForm\" (ngSubmit)=\"saveControl()\" class=\"control-form tw-overflow-y-auto\">\n        <div class=\"form-grid\">\n          \n          <!-- Basic Information Section -->\n          <!-- Control Key -->\n          <div class=\"form-group\">\n            <cide-ele-input\n              id=\"sype_key\"\n              formControlName=\"sype_key\"\n              placeholder=\"Enter control key\"\n              label=\"Control Key\"\n              size=\"sm\">\n            </cide-ele-input>\n          </div>\n\n          <!-- Control Label -->\n          <div class=\"form-group\">\n            <cide-ele-input\n              id=\"sype_label\"\n              formControlName=\"sype_label\"\n              placeholder=\"Enter control label\"\n              label=\"Control Label\"\n              size=\"sm\">\n            </cide-ele-input>\n          </div>\n\n          <!-- Control Type -->\n          <div class=\"form-group\">\n            <cide-ele-select\n              id=\"sype_type\"\n              formControlName=\"sype_type\"\n              [options]=\"[\n                { value: 'text', label: 'Text Input' },\n                { value: 'textarea', label: 'Text Area' },\n                { value: 'select', label: 'Select' },\n                { value: 'checkbox', label: 'Checkbox' },\n                { value: 'radio', label: 'Radio' },\n                { value: 'date', label: 'Date' },\n                { value: 'number', label: 'Number' },\n                { value: 'email', label: 'Email' },\n                { value: 'password', label: 'Password' },\n                { value: 'file', label: 'File Upload' }\n              ]\"\n              label=\"Control Type\"\n              size=\"sm\">\n            </cide-ele-select>\n          </div>\n\n          <!-- Status - Checkbox aligned properly -->\n          <div class=\"form-group\">\n            <cide-ele-input\n              id=\"sype_isactive\"\n              type=\"checkbox\"\n              formControlName=\"sype_isactive\"\n              label=\"Active Status\"\n              size=\"sm\">\n            </cide-ele-input>\n          </div>\n\n          <!-- Placeholder -->\n          <div class=\"form-group\">\n            <cide-ele-input\n              id=\"sype_placeholder\"\n              formControlName=\"sype_placeholder\"\n              placeholder=\"Enter placeholder text\"\n              label=\"Placeholder\"\n              size=\"sm\">\n            </cide-ele-input>\n          </div>\n\n          <!-- Auto Complete - Checkbox aligned properly -->\n          <div class=\"form-group\">\n            <cide-ele-input\n              id=\"sype_auto_complete\"\n              type=\"checkbox\"\n              formControlName=\"sype_auto_complete\"\n              label=\"Auto Complete\"\n              size=\"sm\">\n            </cide-ele-input>\n          </div>\n\n          <!-- Tooltip -->\n          <div class=\"form-group\">\n            <cide-ele-input\n              id=\"sype_tooltip\"\n              formControlName=\"sype_tooltip\"\n              placeholder=\"Enter tooltip text\"\n              label=\"Tooltip\"\n              size=\"sm\">\n            </cide-ele-input>\n          </div>\n\n          <!-- Validation & Sizing Section -->\n          <!-- Min/Max Length - Side by side -->\n          <div class=\"form-group form-group-row\">\n            <div class=\"form-group-half\">\n              <cide-ele-input\n                id=\"sype_min_length\"\n                type=\"number\"\n                formControlName=\"sype_min_length\"\n                placeholder=\"0\"\n                label=\"Min Length\"\n                size=\"xs\">\n              </cide-ele-input>\n            </div>\n            <div class=\"form-group-half\">\n              <cide-ele-input\n                id=\"sype_max_length\"\n                type=\"number\"\n                formControlName=\"sype_max_length\"\n                placeholder=\"20\"\n                label=\"Max Length\"\n                size=\"xs\">\n              </cide-ele-input>\n            </div>\n          </div>\n\n          <!-- Size & Label Placement - Side by side -->\n          <div class=\"form-group form-group-row\">\n            <div class=\"form-group-half\">\n              <cide-ele-select\n                id=\"sype_size\"\n                formControlName=\"sype_size\"\n                label=\"Size\"\n                size=\"xs\"\n                [options]=\"[\n                  { value: 'xs', label: 'XS' },\n                  { value: 'sm', label: 'SM' },\n                  { value: 'md', label: 'MD' },\n                  { value: 'lg', label: 'LG' },\n                  { value: 'xl', label: 'XL' },\n                  { value: 'xxl', label: 'XXL' }\n                ]\">\n              </cide-ele-select>\n            </div>\n            <div class=\"form-group-half\">\n              <cide-ele-select\n                id=\"sype_label_placement\"\n                formControlName=\"sype_label_placement\"\n                label=\"Label Placement\"\n                size=\"xs\"\n                [options]=\"[\n                  { value: 'left', label: 'Left' },\n                  { value: 'floating', label: 'Floating' },\n                  { value: 'fixed', label: 'Fixed' }\n                ]\">\n              </cide-ele-select>\n            </div>\n          </div>\n\n          <!-- Width & Height - Side by side -->\n          <div class=\"form-group form-group-row\">\n            <div class=\"form-group-half\">\n              <cide-ele-input\n                id=\"sype_width\"\n                type=\"text\"\n                formControlName=\"sype_width\"\n                placeholder=\"20px\"\n                label=\"Width\"\n                size=\"xs\">\n              </cide-ele-input>\n            </div>\n            <div class=\"form-group-half\">\n              <cide-ele-input\n                id=\"sype_height\"\n                type=\"text\"\n                formControlName=\"sype_height\"\n                placeholder=\"20px\"\n                label=\"Height\"\n                size=\"xs\">\n              </cide-ele-input>\n            </div>\n          </div>\n\n          <!-- Leading Icon -->\n          <div class=\"form-group\">\n            <cide-ele-input\n              id=\"sype_leading_icon\"\n              formControlName=\"sype_leading_icon\"\n              placeholder=\"Enter icon name\"\n              label=\"Leading Icon\"\n              size=\"sm\">\n            </cide-ele-input>\n          </div>\n\n          <!-- Default Value -->\n          <div class=\"form-group\">\n            <cide-ele-input\n              id=\"sype_default\"\n              formControlName=\"sype_default\"\n              placeholder=\"Enter default value\"\n              label=\"Default Value\"\n              size=\"sm\">\n            </cide-ele-input>\n          </div>\n\n          <!-- Regex Pattern -->\n          <div class=\"form-group\">\n            <cide-ele-input\n              id=\"sype_regex\"\n              formControlName=\"sype_regex\"\n              placeholder=\"Enter regex pattern\"\n              label=\"Regex Pattern\"\n              size=\"sm\">\n            </cide-ele-input>\n          </div>\n\n          <!-- Option Key -->\n          <div class=\"form-group\">\n            <cide-ele-input\n              id=\"sype_option_key\"\n              formControlName=\"sype_option_key\"\n              placeholder=\"Enter option key\"\n              label=\"Option Key\"\n              size=\"sm\">\n            </cide-ele-input>\n          </div>\n\n          <!-- Entity ID (Auto-assigned from AppState) - Hidden -->\n          <div class=\"form-group\" style=\"display: none;\">\n            <cide-ele-input\n              id=\"sype_entity_id_syen\"\n              formControlName=\"sype_entity_id_syen\"\n              placeholder=\"Auto-assigned from system\"\n              label=\"Entity ID (Auto-assigned)\"\n              size=\"sm\"\n              readonly>\n            </cide-ele-input>\n          </div>\n\n          <!-- Control Options -->\n          <div class=\"form-group full-width\">\n            <h6 class=\"options-title\">Control Options</h6>\n            <div class=\"options-grid\">\n              \n              <!-- Required -->\n              <div class=\"option-item\">\n                <cide-ele-input\n                  id=\"sype_required\"\n                  type=\"checkbox\"\n                  formControlName=\"sype_required\"\n                  label=\"Required\"\n                  size=\"xs\">\n                </cide-ele-input>\n              </div>\n\n              <!-- Disabled -->\n              <div class=\"option-item\">\n                <cide-ele-input\n                  id=\"sype_disabled\"\n                  type=\"checkbox\"\n                  formControlName=\"sype_disabled\"\n                  label=\"Disabled\"\n                  size=\"xs\">\n                </cide-ele-input>\n              </div>\n\n              <!-- Hide Label -->\n              <div class=\"option-item\">\n                <cide-ele-input\n                  id=\"sype_label_hide\"\n                  type=\"checkbox\"\n                  formControlName=\"sype_label_hide\"\n                  label=\"Hide Label\"\n                  size=\"xs\">\n                </cide-ele-input>\n              </div>\n\n              <!-- Hide Helper Text -->\n              <div class=\"option-item\">\n                <cide-ele-input\n                  id=\"sype_hide_helper_and_error_text\"\n                  type=\"checkbox\"\n                  formControlName=\"sype_hide_helper_and_error_text\"\n                  label=\"Hide Helper Text\"\n                  size=\"xs\">\n                </cide-ele-input>\n              </div>\n\n              <!-- Helper Text Collapse -->\n              <div class=\"option-item\">\n                <cide-ele-input\n                  id=\"sype_helper_text_collapse\"\n                  type=\"checkbox\"\n                  formControlName=\"sype_helper_text_collapse\"\n                  label=\"Collapse Helper\"\n                  size=\"xs\">\n                </cide-ele-input>\n              </div>\n\n            </div>\n          </div>\n\n        </div>\n\n        <!-- Form Actions -->\n        <div class=\"form-actions\">\n          <button \n            cideEleButton\n            type=\"button\"\n            variant=\"outline\"\n            (click)=\"cancelForm()\"\n            [disabled]=\"loading()\">\n            Cancel\n          </button>\n          <button \n            cideEleButton\n            type=\"submit\"\n            variant=\"primary\"\n            [disabled]=\"loading()\">\n            {{ isEditMode() ? 'Update Control' : 'Create Control' }}\n          </button>\n        </div>\n      </form>\n    </div>\n\n    <!-- Controls List Section -->\n    <div class=\"controls-list-section\">\n      <div class=\"controls-header\">\n        <h3>Page Controls</h3>\n        <p>Controls connected to this page</p>\n      </div>\n      \n             <div class=\"controls-list\" *ngIf=\"!loading() && controls().length > 0\">\n         <div \n           class=\"control-item\" \n           *ngFor=\"let control of controls(); trackBy: trackByControlId\"\n           [class.selected]=\"selectedControlId() === control._id\"\n           (click)=\"selectControl(control)\"\n           (keyup.enter)=\"selectControl(control)\"\n           (keyup.space)=\"selectControl(control)\"\n           tabindex=\"0\"\n           role=\"button\"\n           [attr.aria-label]=\"'Select control ' + (control.sype_label || control.sype_key)\">\n          <div class=\"control-header\">\n            <div class=\"control-icon\">\n              <cide-ele-icon>settings_input_component</cide-ele-icon>\n            </div>\n            <div class=\"control-info\">\n              <h4>{{ control.sype_label || control.sype_key }}</h4>\n              <p>{{ control.sype_tooltip || 'No tooltip' }}</p>\n              <div class=\"control-meta\">\n                <span class=\"control-type\">{{ control.sype_type }}</span>\n                <span class=\"control-status\" [class.active]=\"control.sype_isactive\">\n                  {{ control.sype_isactive ? 'Active' : 'Inactive' }}\n                </span>\n              </div>\n            </div>\n            <div class=\"control-actions\">\n              <button \n                cideEleButton\n                variant=\"ghost\"\n                size=\"sm\"\n                (click)=\"editControl(control); $event.stopPropagation()\">\n                <cide-ele-icon>edit</cide-ele-icon>\n              </button>\n              <button \n                cideEleButton\n                variant=\"ghost\"\n                size=\"sm\"\n                (click)=\"deleteControl(control); $event.stopPropagation()\">\n                <cide-ele-icon>delete</cide-ele-icon>\n              </button>\n            </div>\n          </div>\n          \n          \n        </div>\n      </div>\n\n      <div class=\"controls-list-empty\" *ngIf=\"!loading() && controls().length === 0\">\n        <cide-ele-icon>settings_input_component</cide-ele-icon>\n        <p>No controls available</p>\n        <small>Create controls using the form on the left</small>\n      </div>\n\n      <div class=\"controls-list-loading\" *ngIf=\"loading()\">\n        <cide-ele-icon class=\"spinning\">refresh</cide-ele-icon>\n        <p>Loading controls...</p>\n      </div>\n    </div>\n  </div>\n</div>\n\n ", styles: [".page-controls-container{@apply tw-flex tw-flex-col tw-h-full tw-bg-gray-50;}.header{@apply tw-bg-white tw-border-b tw-border-gray-200 tw-px-6 tw-py-4;}.header-content{@apply tw-flex tw-items-center tw-justify-between;}.header-left{@apply tw-flex tw-items-center tw-space-x-4;}.back-button{@apply tw-flex tw-items-center tw-justify-center tw-w-8 tw-h-8 tw-text-gray-600 hover:tw-text-gray-900 hover:tw-bg-gray-100 tw-rounded-md tw-transition-colors;}.title-section{@apply tw-flex tw-items-center tw-space-x-3;}.title-icon{@apply tw-text-blue-600 tw-text-xl;}.title{@apply tw-text-xl tw-font-semibold tw-text-gray-900 tw-mb-0;}.subtitle{@apply tw-text-sm tw-text-gray-500 tw-mb-0;}.error-message{@apply tw-bg-red-50 tw-border tw-border-red-200 tw-rounded-md tw-p-4 tw-mx-6 tw-mt-4 tw-flex tw-items-start tw-space-x-3;}.error-message cide-ele-icon{@apply tw-text-red-500 tw-flex-shrink-0 tw-mt-0.5;}.error-message h3{@apply tw-text-red-800 tw-font-medium tw-mb-1;}.error-message p{@apply tw-text-red-700 tw-text-sm tw-mb-0;}.main-content{@apply tw-flex tw-flex-1 tw-gap-6 tw-p-6 tw-overflow-hidden;}.form-section{@apply tw-w-3/5 tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-flex tw-flex-col;}.form-header{@apply tw-flex tw-items-center tw-space-x-3 tw-p-6 tw-border-b tw-border-gray-200;}.form-header cide-ele-icon{@apply tw-text-blue-600;}.form-header h3{@apply tw-text-lg tw-font-medium tw-text-gray-900 tw-mb-0;}.control-form{@apply tw-flex tw-flex-col tw-flex-1 tw-p-6;}.form-grid{@apply tw-grid tw-grid-cols-2 tw-gap-4 tw-mb-6;}.form-group{@apply tw-space-y-1;}.form-group.full-width{@apply tw-col-span-2;}.form-group.compact-number,.form-group.compact-select,.form-group.compact-dimension{@apply tw-max-w-32;}.form-group.compact-number{@apply tw-min-w-20;}.form-group.compact-dimension{@apply tw-min-w-24;}.form-group.compact-select{@apply tw-min-w-28;}.form-group.form-group-row{@apply tw-col-span-2 tw-flex tw-gap-4;}.form-group-half{@apply tw-flex-1 tw-space-y-1;}.checkbox-field{margin:.25rem 0}.checkbox-label{display:flex;flex-direction:column;gap:.25rem;cursor:pointer;padding:.75rem 0;background:transparent;border:none;border-radius:0;transition:all .2s ease}.checkbox-label:hover{background:#667eea05}.checkbox-label .checkbox-input{width:1rem;height:1rem;accent-color:#667eea;border-radius:3px;margin-bottom:.125rem}.checkbox-label .checkbox-text{font-weight:600;color:#374151;font-size:.875rem}.checkbox-label .checkbox-description{font-size:.75rem;color:#6b7280;margin-top:.125rem}.options-title{@apply tw-text-sm tw-font-medium tw-text-gray-900 tw-mb-3;}.options-grid{@apply tw-grid tw-grid-cols-3 tw-gap-3;}.option-item{@apply tw-flex tw-items-center tw-space-x-2;}.option-checkbox{@apply tw-rounded tw-border-gray-300 tw-text-blue-600 focus:tw-ring-blue-500 focus:tw-border-blue-500;}.option-item label{@apply tw-text-sm tw-text-gray-700 tw-cursor-pointer;}.form-actions{@apply tw-flex tw-justify-end tw-space-x-3 tw-pt-4 tw-border-t tw-border-gray-200 tw-mt-auto;}.controls-list-section{@apply tw-w-2/5 tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-flex tw-flex-col;}.controls-header{@apply tw-p-6 tw-border-b tw-border-gray-200;}.controls-header h3{@apply tw-text-lg tw-font-medium tw-text-gray-900 tw-mb-1;}.controls-header p{@apply tw-text-sm tw-text-gray-500 tw-mb-0;}.controls-list{@apply tw-flex-1 tw-overflow-y-auto tw-p-4;}.control-item{@apply tw-bg-gray-50 tw-border tw-border-gray-200 tw-rounded-lg tw-p-4 tw-mb-3 tw-cursor-pointer tw-transition-all tw-duration-200;}.control-item:hover{@apply tw-shadow-md tw-border-gray-300;}.control-item.selected{@apply tw-bg-blue-50 tw-border-blue-300 tw-shadow-md;}.control-item:focus{@apply tw-outline-none tw-ring-2 tw-ring-blue-500 tw-ring-offset-2;}.control-item:last-child{@apply tw-mb-0;}.control-header{@apply tw-flex tw-items-start tw-space-x-3;}.control-icon{@apply tw-flex-shrink-0 tw-w-10 tw-h-10 tw-bg-blue-100 tw-rounded-lg tw-flex tw-items-center tw-justify-center;}.control-icon cide-ele-icon{@apply tw-text-blue-600;}.control-info{@apply tw-flex-1 tw-min-w-0;}.control-info h4{@apply tw-text-sm tw-font-medium tw-text-gray-900 tw-mb-1 tw-truncate;}.control-info p{@apply tw-text-xs tw-text-gray-500 tw-mb-2 tw-truncate;}.control-meta{@apply tw-flex tw-items-center tw-space-x-2;}.control-type{@apply tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-gray-100 tw-text-gray-800;}.control-status{@apply tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-red-100 tw-text-red-800;}.control-status.active{@apply tw-bg-green-100 tw-text-green-800;}.control-actions{@apply tw-flex tw-items-center tw-space-x-1 tw-opacity-0 tw-transition-opacity tw-duration-200;}.control-item:hover .control-actions,.control-item.selected .control-actions{@apply tw-opacity-100;}.controls-list-empty{@apply tw-flex tw-flex-col tw-items-center tw-justify-center tw-py-12 tw-text-center;}.controls-list-empty cide-ele-icon{@apply tw-text-4xl tw-text-gray-300 tw-mb-4;}.controls-list-empty p{@apply tw-text-gray-500 tw-font-medium tw-mb-1;}.controls-list-empty small{@apply tw-text-gray-400;}.controls-list-loading{@apply tw-flex tw-flex-col tw-items-center tw-justify-center tw-py-12 tw-text-center;}.controls-list-loading cide-ele-icon{@apply tw-text-2xl tw-text-blue-500 tw-mb-4;}.controls-list-loading p{@apply tw-text-gray-500;}.spinning{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (max-width: 1024px){.main-content{@apply tw-flex-col;}.form-section{@apply tw-w-full;}.controls-list-section{@apply tw-w-full tw-max-h-96;}.form-grid{@apply tw-grid-cols-1;}.options-grid{@apply tw-grid-cols-2;}}@media (max-width: 640px){.main-content{@apply tw-p-4 tw-gap-4;}.form-grid{@apply tw-gap-3;}.form-actions{@apply tw-flex-col tw-space-x-0 tw-space-y-2;}.options-grid{@apply tw-grid-cols-1;}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton]", 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: 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: 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"], outputs: ["ngModelChange", "change", "searchChange"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }] }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: PageControlsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.7", type: PageControlsComponent, isStandalone: true, selector: "cide-core-app-page-controls", ngImport: i0, template: "<!-- Page Controls Container -->\n<div class=\"page-controls-container\">\n  <!-- Header Section -->\n  <div class=\"header\">\n    <div class=\"header-content\">\n      <div class=\"header-left\">\n        <button \n          cideEleButton\n          variant=\"ghost\"\n          size=\"sm\"\n          (click)=\"goBack()\"\n          class=\"back-button\">\n          <cide-ele-icon>arrow_back</cide-ele-icon>\n        </button>\n        <div class=\"title-section\">\n          <cide-ele-icon class=\"title-icon\">settings</cide-ele-icon>\n          <div>\n            <h1 class=\"title\">Control Management</h1>\n            <p class=\"subtitle\">Page: {{ pageTitle() }}</p>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Error Message -->\n  <div class=\"error-message\" *ngIf=\"error()\">\n    <cide-ele-icon>error</cide-ele-icon>\n    <div>\n      <h3>Error</h3>\n      <p>{{ error() }}</p>\n    </div>\n  </div>\n\n  <!-- Main Content Area -->\n  <div class=\"main-content\">\n    <!-- Form Section -->\n    <div class=\"form-section\">\n      <div class=\"form-header\">\n        <cide-ele-icon>{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\n        <h3>{{ isEditMode() ? 'Edit Control' : 'Quick Add Control' }}</h3>\n      </div>\n\n      <!-- Form -->\n      <form [formGroup]=\"controlForm\" (ngSubmit)=\"saveControl()\" class=\"control-form tw-overflow-y-auto\">\n        <div class=\"form-grid\">\n          \n          <!-- Basic Information Section -->\n          <!-- Control Key -->\n          <div class=\"form-group\">\n            <cide-ele-input\n              id=\"sype_key\"\n              formControlName=\"sype_key\"\n              placeholder=\"Enter control key\"\n              label=\"Control Key\"\n              size=\"sm\">\n            </cide-ele-input>\n          </div>\n\n          <!-- Control Label -->\n          <div class=\"form-group\">\n            <cide-ele-input\n              id=\"sype_label\"\n              formControlName=\"sype_label\"\n              placeholder=\"Enter control label\"\n              label=\"Control Label\"\n              size=\"sm\">\n            </cide-ele-input>\n          </div>\n\n          <!-- Control Type -->\n          <div class=\"form-group\">\n            <cide-ele-select\n              id=\"sype_type\"\n              formControlName=\"sype_type\"\n              [options]=\"[\n                { value: 'text', label: 'Text Input' },\n                { value: 'textarea', label: 'Text Area' },\n                { value: 'select', label: 'Select' },\n                { value: 'checkbox', label: 'Checkbox' },\n                { value: 'radio', label: 'Radio' },\n                { value: 'date', label: 'Date' },\n                { value: 'number', label: 'Number' },\n                { value: 'email', label: 'Email' },\n                { value: 'password', label: 'Password' },\n                { value: 'file', label: 'File Upload' }\n              ]\"\n              label=\"Control Type\"\n              size=\"sm\">\n            </cide-ele-select>\n          </div>\n\n          <!-- Status - Checkbox aligned properly -->\n          <div class=\"form-group\">\n            <cide-ele-input\n              id=\"sype_isactive\"\n              type=\"checkbox\"\n              formControlName=\"sype_isactive\"\n              label=\"Active Status\"\n              size=\"sm\">\n            </cide-ele-input>\n          </div>\n\n          <!-- Placeholder -->\n          <div class=\"form-group\">\n            <cide-ele-input\n              id=\"sype_placeholder\"\n              formControlName=\"sype_placeholder\"\n              placeholder=\"Enter placeholder text\"\n              label=\"Placeholder\"\n              size=\"sm\">\n            </cide-ele-input>\n          </div>\n\n          <!-- Auto Complete - Checkbox aligned properly -->\n          <div class=\"form-group\">\n            <cide-ele-input\n              id=\"sype_auto_complete\"\n              type=\"checkbox\"\n              formControlName=\"sype_auto_complete\"\n              label=\"Auto Complete\"\n              size=\"sm\">\n            </cide-ele-input>\n          </div>\n\n          <!-- Tooltip -->\n          <div class=\"form-group\">\n            <cide-ele-input\n              id=\"sype_tooltip\"\n              formControlName=\"sype_tooltip\"\n              placeholder=\"Enter tooltip text\"\n              label=\"Tooltip\"\n              size=\"sm\">\n            </cide-ele-input>\n          </div>\n\n          <!-- Validation & Sizing Section -->\n          <!-- Min/Max Length - Side by side -->\n          <div class=\"form-group form-group-row\">\n            <div class=\"form-group-half\">\n              <cide-ele-input\n                id=\"sype_min_length\"\n                type=\"number\"\n                formControlName=\"sype_min_length\"\n                placeholder=\"0\"\n                label=\"Min Length\"\n                size=\"xs\">\n              </cide-ele-input>\n            </div>\n            <div class=\"form-group-half\">\n              <cide-ele-input\n                id=\"sype_max_length\"\n                type=\"number\"\n                formControlName=\"sype_max_length\"\n                placeholder=\"20\"\n                label=\"Max Length\"\n                size=\"xs\">\n              </cide-ele-input>\n            </div>\n          </div>\n\n          <!-- Size & Label Placement - Side by side -->\n          <div class=\"form-group form-group-row\">\n            <div class=\"form-group-half\">\n              <cide-ele-select\n                id=\"sype_size\"\n                formControlName=\"sype_size\"\n                label=\"Size\"\n                size=\"xs\"\n                [options]=\"[\n                  { value: 'xs', label: 'XS' },\n                  { value: 'sm', label: 'SM' },\n                  { value: 'md', label: 'MD' },\n                  { value: 'lg', label: 'LG' },\n                  { value: 'xl', label: 'XL' },\n                  { value: 'xxl', label: 'XXL' }\n                ]\">\n              </cide-ele-select>\n            </div>\n            <div class=\"form-group-half\">\n              <cide-ele-select\n                id=\"sype_label_placement\"\n                formControlName=\"sype_label_placement\"\n                label=\"Label Placement\"\n                size=\"xs\"\n                [options]=\"[\n                  { value: 'left', label: 'Left' },\n                  { value: 'floating', label: 'Floating' },\n                  { value: 'fixed', label: 'Fixed' }\n                ]\">\n              </cide-ele-select>\n            </div>\n          </div>\n\n          <!-- Width & Height - Side by side -->\n          <div class=\"form-group form-group-row\">\n            <div class=\"form-group-half\">\n              <cide-ele-input\n                id=\"sype_width\"\n                type=\"text\"\n                formControlName=\"sype_width\"\n                placeholder=\"20px\"\n                label=\"Width\"\n                size=\"xs\">\n              </cide-ele-input>\n            </div>\n            <div class=\"form-group-half\">\n              <cide-ele-input\n                id=\"sype_height\"\n                type=\"text\"\n                formControlName=\"sype_height\"\n                placeholder=\"20px\"\n                label=\"Height\"\n                size=\"xs\">\n              </cide-ele-input>\n            </div>\n          </div>\n\n          <!-- Leading Icon -->\n          <div class=\"form-group\">\n            <cide-ele-input\n              id=\"sype_leading_icon\"\n              formControlName=\"sype_leading_icon\"\n              placeholder=\"Enter icon name\"\n              label=\"Leading Icon\"\n              size=\"sm\">\n            </cide-ele-input>\n          </div>\n\n          <!-- Default Value -->\n          <div class=\"form-group\">\n            <cide-ele-input\n              id=\"sype_default\"\n              formControlName=\"sype_default\"\n              placeholder=\"Enter default value\"\n              label=\"Default Value\"\n              size=\"sm\">\n            </cide-ele-input>\n          </div>\n\n          <!-- Regex Pattern -->\n          <div class=\"form-group\">\n            <cide-ele-input\n              id=\"sype_regex\"\n              formControlName=\"sype_regex\"\n              placeholder=\"Enter regex pattern\"\n              label=\"Regex Pattern\"\n              size=\"sm\">\n            </cide-ele-input>\n          </div>\n\n          <!-- Option Key -->\n          <div class=\"form-group\">\n            <cide-ele-input\n              id=\"sype_option_key\"\n              formControlName=\"sype_option_key\"\n              placeholder=\"Enter option key\"\n              label=\"Option Key\"\n              size=\"sm\">\n            </cide-ele-input>\n          </div>\n\n          <!-- Entity ID (Auto-assigned from AppState) - Hidden -->\n          <div class=\"form-group\" style=\"display: none;\">\n            <cide-ele-input\n              id=\"sype_entity_id_syen\"\n              formControlName=\"sype_entity_id_syen\"\n              placeholder=\"Auto-assigned from system\"\n              label=\"Entity ID (Auto-assigned)\"\n              size=\"sm\"\n              readonly>\n            </cide-ele-input>\n          </div>\n\n          <!-- Control Options -->\n          <div class=\"form-group full-width\">\n            <h6 class=\"options-title\">Control Options</h6>\n            <div class=\"options-grid\">\n              \n              <!-- Required -->\n              <div class=\"option-item\">\n                <cide-ele-input\n                  id=\"sype_required\"\n                  type=\"checkbox\"\n                  formControlName=\"sype_required\"\n                  label=\"Required\"\n                  size=\"xs\">\n                </cide-ele-input>\n              </div>\n\n              <!-- Disabled -->\n              <div class=\"option-item\">\n                <cide-ele-input\n                  id=\"sype_disabled\"\n                  type=\"checkbox\"\n                  formControlName=\"sype_disabled\"\n                  label=\"Disabled\"\n                  size=\"xs\">\n                </cide-ele-input>\n              </div>\n\n              <!-- Hide Label -->\n              <div class=\"option-item\">\n                <cide-ele-input\n                  id=\"sype_label_hide\"\n                  type=\"checkbox\"\n                  formControlName=\"sype_label_hide\"\n                  label=\"Hide Label\"\n                  size=\"xs\">\n                </cide-ele-input>\n              </div>\n\n              <!-- Hide Helper Text -->\n              <div class=\"option-item\">\n                <cide-ele-input\n                  id=\"sype_hide_helper_and_error_text\"\n                  type=\"checkbox\"\n                  formControlName=\"sype_hide_helper_and_error_text\"\n                  label=\"Hide Helper Text\"\n                  size=\"xs\">\n                </cide-ele-input>\n              </div>\n\n              <!-- Helper Text Collapse -->\n              <div class=\"option-item\">\n                <cide-ele-input\n                  id=\"sype_helper_text_collapse\"\n                  type=\"checkbox\"\n                  formControlName=\"sype_helper_text_collapse\"\n                  label=\"Collapse Helper\"\n                  size=\"xs\">\n                </cide-ele-input>\n              </div>\n\n            </div>\n          </div>\n\n        </div>\n\n        <!-- Form Actions -->\n        <div class=\"form-actions\">\n          <button \n            cideEleButton\n            type=\"button\"\n            variant=\"outline\"\n            (click)=\"cancelForm()\"\n            [disabled]=\"loading()\">\n            Cancel\n          </button>\n          <button \n            cideEleButton\n            type=\"submit\"\n            variant=\"primary\"\n            [disabled]=\"loading()\">\n            {{ isEditMode() ? 'Update Control' : 'Create Control' }}\n          </button>\n        </div>\n      </form>\n    </div>\n\n    <!-- Controls List Section -->\n    <div class=\"controls-list-section\">\n      <div class=\"controls-header\">\n        <h3>Page Controls</h3>\n        <p>Controls connected to this page</p>\n      </div>\n      \n             <div class=\"controls-list\" *ngIf=\"!loading() && controls().length > 0\">\n         <div \n           class=\"control-item\" \n           *ngFor=\"let control of controls(); trackBy: trackByControlId\"\n           [class.selected]=\"selectedControlId() === control._id\"\n           (click)=\"selectControl(control)\"\n           (keyup.enter)=\"selectControl(control)\"\n           (keyup.space)=\"selectControl(control)\"\n           tabindex=\"0\"\n           role=\"button\"\n           [attr.aria-label]=\"'Select control ' + (control.sype_label || control.sype_key)\">\n          <div class=\"control-header\">\n            <div class=\"control-icon\">\n              <cide-ele-icon>settings_input_component</cide-ele-icon>\n            </div>\n            <div class=\"control-info\">\n              <h4>{{ control.sype_label || control.sype_key }}</h4>\n              <p>{{ control.sype_tooltip || 'No tooltip' }}</p>\n              <div class=\"control-meta\">\n                <span class=\"control-type\">{{ control.sype_type }}</span>\n                <span class=\"control-status\" [class.active]=\"control.sype_isactive\">\n                  {{ control.sype_isactive ? 'Active' : 'Inactive' }}\n                </span>\n              </div>\n            </div>\n            <div class=\"control-actions\">\n              <button \n                cideEleButton\n                variant=\"ghost\"\n                size=\"sm\"\n                (click)=\"editControl(control); $event.stopPropagation()\">\n                <cide-ele-icon>edit</cide-ele-icon>\n              </button>\n              <button \n                cideEleButton\n                variant=\"ghost\"\n                size=\"sm\"\n                (click)=\"deleteControl(control); $event.stopPropagation()\">\n                <cide-ele-icon>delete</cide-ele-icon>\n              </button>\n            </div>\n          </div>\n          \n          \n        </div>\n      </div>\n\n      <div class=\"controls-list-empty\" *ngIf=\"!loading() && controls().length === 0\">\n        <cide-ele-icon>settings_input_component</cide-ele-icon>\n        <p>No controls available</p>\n        <small>Create controls using the form on the left</small>\n      </div>\n\n      <div class=\"controls-list-loading\" *ngIf=\"loading()\">\n        <cide-ele-icon class=\"spinning\">refresh</cide-ele-icon>\n        <p>Loading controls...</p>\n      </div>\n    </div>\n  </div>\n</div>\n\n ", styles: [".page-controls-container{@apply tw-flex tw-flex-col tw-h-full tw-bg-gray-50;}.header{@apply tw-bg-white tw-border-b tw-border-gray-200 tw-px-6 tw-py-4;}.header-content{@apply tw-flex tw-items-center tw-justify-between;}.header-left{@apply tw-flex tw-items-center tw-space-x-4;}.back-button{@apply tw-flex tw-items-center tw-justify-center tw-w-8 tw-h-8 tw-text-gray-600 hover:tw-text-gray-900 hover:tw-bg-gray-100 tw-rounded-md tw-transition-colors;}.title-section{@apply tw-flex tw-items-center tw-space-x-3;}.title-icon{@apply tw-text-blue-600 tw-text-xl;}.title{@apply tw-text-xl tw-font-semibold tw-text-gray-900 tw-mb-0;}.subtitle{@apply tw-text-sm tw-text-gray-500 tw-mb-0;}.error-message{@apply tw-bg-red-50 tw-border tw-border-red-200 tw-rounded-md tw-p-4 tw-mx-6 tw-mt-4 tw-flex tw-items-start tw-space-x-3;}.error-message cide-ele-icon{@apply tw-text-red-500 tw-flex-shrink-0 tw-mt-0.5;}.error-message h3{@apply tw-text-red-800 tw-font-medium tw-mb-1;}.error-message p{@apply tw-text-red-700 tw-text-sm tw-mb-0;}.main-content{@apply tw-flex tw-flex-1 tw-gap-6 tw-p-6 tw-overflow-hidden;}.form-section{@apply tw-w-3/5 tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-flex tw-flex-col;}.form-header{@apply tw-flex tw-items-center tw-space-x-3 tw-p-6 tw-border-b tw-border-gray-200;}.form-header cide-ele-icon{@apply tw-text-blue-600;}.form-header h3{@apply tw-text-lg tw-font-medium tw-text-gray-900 tw-mb-0;}.control-form{@apply tw-flex tw-flex-col tw-flex-1 tw-p-6;}.form-grid{@apply tw-grid tw-grid-cols-2 tw-gap-4 tw-mb-6;}.form-group{@apply tw-space-y-1;}.form-group.full-width{@apply tw-col-span-2;}.form-group.compact-number,.form-group.compact-select,.form-group.compact-dimension{@apply tw-max-w-32;}.form-group.compact-number{@apply tw-min-w-20;}.form-group.compact-dimension{@apply tw-min-w-24;}.form-group.compact-select{@apply tw-min-w-28;}.form-group.form-group-row{@apply tw-col-span-2 tw-flex tw-gap-4;}.form-group-half{@apply tw-flex-1 tw-space-y-1;}.checkbox-field{margin:.25rem 0}.checkbox-label{display:flex;flex-direction:column;gap:.25rem;cursor:pointer;padding:.75rem 0;background:transparent;border:none;border-radius:0;transition:all .2s ease}.checkbox-label:hover{background:#667eea05}.checkbox-label .checkbox-input{width:1rem;height:1rem;accent-color:#667eea;border-radius:3px;margin-bottom:.125rem}.checkbox-label .checkbox-text{font-weight:600;color:#374151;font-size:.875rem}.checkbox-label .checkbox-description{font-size:.75rem;color:#6b7280;margin-top:.125rem}.options-title{@apply tw-text-sm tw-font-medium tw-text-gray-900 tw-mb-3;}.options-grid{@apply tw-grid tw-grid-cols-3 tw-gap-3;}.option-item{@apply tw-flex tw-items-center tw-space-x-2;}.option-checkbox{@apply tw-rounded tw-border-gray-300 tw-text-blue-600 focus:tw-ring-blue-500 focus:tw-border-blue-500;}.option-item label{@apply tw-text-sm tw-text-gray-700 tw-cursor-pointer;}.form-actions{@apply tw-flex tw-justify-end tw-space-x-3 tw-pt-4 tw-border-t tw-border-gray-200 tw-mt-auto;}.controls-list-section{@apply tw-w-2/5 tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-flex tw-flex-col;}.controls-header{@apply tw-p-6 tw-border-b tw-border-gray-200;}.controls-header h3{@apply tw-text-lg tw-font-medium tw-text-gray-900 tw-mb-1;}.controls-header p{@apply tw-text-sm tw-text-gray-500 tw-mb-0;}.controls-list{@apply tw-flex-1 tw-overflow-y-auto tw-p-4;}.control-item{@apply tw-bg-gray-50 tw-border tw-border-gray-200 tw-rounded-lg tw-p-4 tw-mb-3 tw-cursor-pointer tw-transition-all tw-duration-200;}.control-item:hover{@apply tw-shadow-md tw-border-gray-300;}.control-item.selected{@apply tw-bg-blue-50 tw-border-blue-300 tw-shadow-md;}.control-item:focus{@apply tw-outline-none tw-ring-2 tw-ring-blue-500 tw-ring-offset-2;}.control-item:last-child{@apply tw-mb-0;}.control-header{@apply tw-flex tw-items-start tw-space-x-3;}.control-icon{@apply tw-flex-shrink-0 tw-w-10 tw-h-10 tw-bg-blue-100 tw-rounded-lg tw-flex tw-items-center tw-justify-center;}.control-icon cide-ele-icon{@apply tw-text-blue-600;}.control-info{@apply tw-flex-1 tw-min-w-0;}.control-info h4{@apply tw-text-sm tw-font-medium tw-text-gray-900 tw-mb-1 tw-truncate;}.control-info p{@apply tw-text-xs tw-text-gray-500 tw-mb-2 tw-truncate;}.control-meta{@apply tw-flex tw-items-center tw-space-x-2;}.control-type{@apply tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-gray-100 tw-text-gray-800;}.control-status{@apply tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-red-100 tw-text-red-800;}.control-status.active{@apply tw-bg-green-100 tw-text-green-800;}.control-actions{@apply tw-flex tw-items-center tw-space-x-1 tw-opacity-0 tw-transition-opacity tw-duration-200;}.control-item:hover .control-actions,.control-item.selected .control-actions{@apply tw-opacity-100;}.controls-list-empty{@apply tw-flex tw-flex-col tw-items-center tw-justify-center tw-py-12 tw-text-center;}.controls-list-empty cide-ele-icon{@apply tw-text-4xl tw-text-gray-300 tw-mb-4;}.controls-list-empty p{@apply tw-text-gray-500 tw-font-medium tw-mb-1;}.controls-list-empty small{@apply tw-text-gray-400;}.controls-list-loading{@apply tw-flex tw-flex-col tw-items-center tw-justify-center tw-py-12 tw-text-center;}.controls-list-loading cide-ele-icon{@apply tw-text-2xl tw-text-blue-500 tw-mb-4;}.controls-list-loading p{@apply tw-text-gray-500;}.spinning{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (max-width: 1024px){.main-content{@apply tw-flex-col;}.form-section{@apply tw-w-full;}.controls-list-section{@apply tw-w-full tw-max-h-96;}.form-grid{@apply tw-grid-cols-1;}.options-grid{@apply tw-grid-cols-2;}}@media (max-width: 640px){.main-content{@apply tw-p-4 tw-gap-4;}.form-grid{@apply tw-gap-3;}.form-actions{@apply tw-flex-col tw-space-x-0 tw-space-y-2;}.options-grid{@apply tw-grid-cols-1;}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton]", 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: 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: 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"], outputs: ["ngModelChange", "change", "searchChange"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: PageControlsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: PageControlsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cide-core-app-page-controls', standalone: true, imports: [
                         CommonModule,
@@ -6844,6 +7014,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                     ], template: "<!-- Page Controls Container -->\n<div class=\"page-controls-container\">\n  <!-- Header Section -->\n  <div class=\"header\">\n    <div class=\"header-content\">\n      <div class=\"header-left\">\n        <button \n          cideEleButton\n          variant=\"ghost\"\n          size=\"sm\"\n          (click)=\"goBack()\"\n          class=\"back-button\">\n          <cide-ele-icon>arrow_back</cide-ele-icon>\n        </button>\n        <div class=\"title-section\">\n          <cide-ele-icon class=\"title-icon\">settings</cide-ele-icon>\n          <div>\n            <h1 class=\"title\">Control Management</h1>\n            <p class=\"subtitle\">Page: {{ pageTitle() }}</p>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Error Message -->\n  <div class=\"error-message\" *ngIf=\"error()\">\n    <cide-ele-icon>error</cide-ele-icon>\n    <div>\n      <h3>Error</h3>\n      <p>{{ error() }}</p>\n    </div>\n  </div>\n\n  <!-- Main Content Area -->\n  <div class=\"main-content\">\n    <!-- Form Section -->\n    <div class=\"form-section\">\n      <div class=\"form-header\">\n        <cide-ele-icon>{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\n        <h3>{{ isEditMode() ? 'Edit Control' : 'Quick Add Control' }}</h3>\n      </div>\n\n      <!-- Form -->\n      <form [formGroup]=\"controlForm\" (ngSubmit)=\"saveControl()\" class=\"control-form tw-overflow-y-auto\">\n        <div class=\"form-grid\">\n          \n          <!-- Basic Information Section -->\n          <!-- Control Key -->\n          <div class=\"form-group\">\n            <cide-ele-input\n              id=\"sype_key\"\n              formControlName=\"sype_key\"\n              placeholder=\"Enter control key\"\n              label=\"Control Key\"\n              size=\"sm\">\n            </cide-ele-input>\n          </div>\n\n          <!-- Control Label -->\n          <div class=\"form-group\">\n            <cide-ele-input\n              id=\"sype_label\"\n              formControlName=\"sype_label\"\n              placeholder=\"Enter control label\"\n              label=\"Control Label\"\n              size=\"sm\">\n            </cide-ele-input>\n          </div>\n\n          <!-- Control Type -->\n          <div class=\"form-group\">\n            <cide-ele-select\n              id=\"sype_type\"\n              formControlName=\"sype_type\"\n              [options]=\"[\n                { value: 'text', label: 'Text Input' },\n                { value: 'textarea', label: 'Text Area' },\n                { value: 'select', label: 'Select' },\n                { value: 'checkbox', label: 'Checkbox' },\n                { value: 'radio', label: 'Radio' },\n                { value: 'date', label: 'Date' },\n                { value: 'number', label: 'Number' },\n                { value: 'email', label: 'Email' },\n                { value: 'password', label: 'Password' },\n                { value: 'file', label: 'File Upload' }\n              ]\"\n              label=\"Control Type\"\n              size=\"sm\">\n            </cide-ele-select>\n          </div>\n\n          <!-- Status - Checkbox aligned properly -->\n          <div class=\"form-group\">\n            <cide-ele-input\n              id=\"sype_isactive\"\n              type=\"checkbox\"\n              formControlName=\"sype_isactive\"\n              label=\"Active Status\"\n              size=\"sm\">\n            </cide-ele-input>\n          </div>\n\n          <!-- Placeholder -->\n          <div class=\"form-group\">\n            <cide-ele-input\n              id=\"sype_placeholder\"\n              formControlName=\"sype_placeholder\"\n              placeholder=\"Enter placeholder text\"\n              label=\"Placeholder\"\n              size=\"sm\">\n            </cide-ele-input>\n          </div>\n\n          <!-- Auto Complete - Checkbox aligned properly -->\n          <div class=\"form-group\">\n            <cide-ele-input\n              id=\"sype_auto_complete\"\n              type=\"checkbox\"\n              formControlName=\"sype_auto_complete\"\n              label=\"Auto Complete\"\n              size=\"sm\">\n            </cide-ele-input>\n          </div>\n\n          <!-- Tooltip -->\n          <div class=\"form-group\">\n            <cide-ele-input\n              id=\"sype_tooltip\"\n              formControlName=\"sype_tooltip\"\n              placeholder=\"Enter tooltip text\"\n              label=\"Tooltip\"\n              size=\"sm\">\n            </cide-ele-input>\n          </div>\n\n          <!-- Validation & Sizing Section -->\n          <!-- Min/Max Length - Side by side -->\n          <div class=\"form-group form-group-row\">\n            <div class=\"form-group-half\">\n              <cide-ele-input\n                id=\"sype_min_length\"\n                type=\"number\"\n                formControlName=\"sype_min_length\"\n                placeholder=\"0\"\n                label=\"Min Length\"\n                size=\"xs\">\n              </cide-ele-input>\n            </div>\n            <div class=\"form-group-half\">\n              <cide-ele-input\n                id=\"sype_max_length\"\n                type=\"number\"\n                formControlName=\"sype_max_length\"\n                placeholder=\"20\"\n                label=\"Max Length\"\n                size=\"xs\">\n              </cide-ele-input>\n            </div>\n          </div>\n\n          <!-- Size & Label Placement - Side by side -->\n          <div class=\"form-group form-group-row\">\n            <div class=\"form-group-half\">\n              <cide-ele-select\n                id=\"sype_size\"\n                formControlName=\"sype_size\"\n                label=\"Size\"\n                size=\"xs\"\n                [options]=\"[\n                  { value: 'xs', label: 'XS' },\n                  { value: 'sm', label: 'SM' },\n                  { value: 'md', label: 'MD' },\n                  { value: 'lg', label: 'LG' },\n                  { value: 'xl', label: 'XL' },\n                  { value: 'xxl', label: 'XXL' }\n                ]\">\n              </cide-ele-select>\n            </div>\n            <div class=\"form-group-half\">\n              <cide-ele-select\n                id=\"sype_label_placement\"\n                formControlName=\"sype_label_placement\"\n                label=\"Label Placement\"\n                size=\"xs\"\n                [options]=\"[\n                  { value: 'left', label: 'Left' },\n                  { value: 'floating', label: 'Floating' },\n                  { value: 'fixed', label: 'Fixed' }\n                ]\">\n              </cide-ele-select>\n            </div>\n          </div>\n\n          <!-- Width & Height - Side by side -->\n          <div class=\"form-group form-group-row\">\n            <div class=\"form-group-half\">\n              <cide-ele-input\n                id=\"sype_width\"\n                type=\"text\"\n                formControlName=\"sype_width\"\n                placeholder=\"20px\"\n                label=\"Width\"\n                size=\"xs\">\n              </cide-ele-input>\n            </div>\n            <div class=\"form-group-half\">\n              <cide-ele-input\n                id=\"sype_height\"\n                type=\"text\"\n                formControlName=\"sype_height\"\n                placeholder=\"20px\"\n                label=\"Height\"\n                size=\"xs\">\n              </cide-ele-input>\n            </div>\n          </div>\n\n          <!-- Leading Icon -->\n          <div class=\"form-group\">\n            <cide-ele-input\n              id=\"sype_leading_icon\"\n              formControlName=\"sype_leading_icon\"\n              placeholder=\"Enter icon name\"\n              label=\"Leading Icon\"\n              size=\"sm\">\n            </cide-ele-input>\n          </div>\n\n          <!-- Default Value -->\n          <div class=\"form-group\">\n            <cide-ele-input\n              id=\"sype_default\"\n              formControlName=\"sype_default\"\n              placeholder=\"Enter default value\"\n              label=\"Default Value\"\n              size=\"sm\">\n            </cide-ele-input>\n          </div>\n\n          <!-- Regex Pattern -->\n          <div class=\"form-group\">\n            <cide-ele-input\n              id=\"sype_regex\"\n              formControlName=\"sype_regex\"\n              placeholder=\"Enter regex pattern\"\n              label=\"Regex Pattern\"\n              size=\"sm\">\n            </cide-ele-input>\n          </div>\n\n          <!-- Option Key -->\n          <div class=\"form-group\">\n            <cide-ele-input\n              id=\"sype_option_key\"\n              formControlName=\"sype_option_key\"\n              placeholder=\"Enter option key\"\n              label=\"Option Key\"\n              size=\"sm\">\n            </cide-ele-input>\n          </div>\n\n          <!-- Entity ID (Auto-assigned from AppState) - Hidden -->\n          <div class=\"form-group\" style=\"display: none;\">\n            <cide-ele-input\n              id=\"sype_entity_id_syen\"\n              formControlName=\"sype_entity_id_syen\"\n              placeholder=\"Auto-assigned from system\"\n              label=\"Entity ID (Auto-assigned)\"\n              size=\"sm\"\n              readonly>\n            </cide-ele-input>\n          </div>\n\n          <!-- Control Options -->\n          <div class=\"form-group full-width\">\n            <h6 class=\"options-title\">Control Options</h6>\n            <div class=\"options-grid\">\n              \n              <!-- Required -->\n              <div class=\"option-item\">\n                <cide-ele-input\n                  id=\"sype_required\"\n                  type=\"checkbox\"\n                  formControlName=\"sype_required\"\n                  label=\"Required\"\n                  size=\"xs\">\n                </cide-ele-input>\n              </div>\n\n              <!-- Disabled -->\n              <div class=\"option-item\">\n                <cide-ele-input\n                  id=\"sype_disabled\"\n                  type=\"checkbox\"\n                  formControlName=\"sype_disabled\"\n                  label=\"Disabled\"\n                  size=\"xs\">\n                </cide-ele-input>\n              </div>\n\n              <!-- Hide Label -->\n              <div class=\"option-item\">\n                <cide-ele-input\n                  id=\"sype_label_hide\"\n                  type=\"checkbox\"\n                  formControlName=\"sype_label_hide\"\n                  label=\"Hide Label\"\n                  size=\"xs\">\n                </cide-ele-input>\n              </div>\n\n              <!-- Hide Helper Text -->\n              <div class=\"option-item\">\n                <cide-ele-input\n                  id=\"sype_hide_helper_and_error_text\"\n                  type=\"checkbox\"\n                  formControlName=\"sype_hide_helper_and_error_text\"\n                  label=\"Hide Helper Text\"\n                  size=\"xs\">\n                </cide-ele-input>\n              </div>\n\n              <!-- Helper Text Collapse -->\n              <div class=\"option-item\">\n                <cide-ele-input\n                  id=\"sype_helper_text_collapse\"\n                  type=\"checkbox\"\n                  formControlName=\"sype_helper_text_collapse\"\n                  label=\"Collapse Helper\"\n                  size=\"xs\">\n                </cide-ele-input>\n              </div>\n\n            </div>\n          </div>\n\n        </div>\n\n        <!-- Form Actions -->\n        <div class=\"form-actions\">\n          <button \n            cideEleButton\n            type=\"button\"\n            variant=\"outline\"\n            (click)=\"cancelForm()\"\n            [disabled]=\"loading()\">\n            Cancel\n          </button>\n          <button \n            cideEleButton\n            type=\"submit\"\n            variant=\"primary\"\n            [disabled]=\"loading()\">\n            {{ isEditMode() ? 'Update Control' : 'Create Control' }}\n          </button>\n        </div>\n      </form>\n    </div>\n\n    <!-- Controls List Section -->\n    <div class=\"controls-list-section\">\n      <div class=\"controls-header\">\n        <h3>Page Controls</h3>\n        <p>Controls connected to this page</p>\n      </div>\n      \n             <div class=\"controls-list\" *ngIf=\"!loading() && controls().length > 0\">\n         <div \n           class=\"control-item\" \n           *ngFor=\"let control of controls(); trackBy: trackByControlId\"\n           [class.selected]=\"selectedControlId() === control._id\"\n           (click)=\"selectControl(control)\"\n           (keyup.enter)=\"selectControl(control)\"\n           (keyup.space)=\"selectControl(control)\"\n           tabindex=\"0\"\n           role=\"button\"\n           [attr.aria-label]=\"'Select control ' + (control.sype_label || control.sype_key)\">\n          <div class=\"control-header\">\n            <div class=\"control-icon\">\n              <cide-ele-icon>settings_input_component</cide-ele-icon>\n            </div>\n            <div class=\"control-info\">\n              <h4>{{ control.sype_label || control.sype_key }}</h4>\n              <p>{{ control.sype_tooltip || 'No tooltip' }}</p>\n              <div class=\"control-meta\">\n                <span class=\"control-type\">{{ control.sype_type }}</span>\n                <span class=\"control-status\" [class.active]=\"control.sype_isactive\">\n                  {{ control.sype_isactive ? 'Active' : 'Inactive' }}\n                </span>\n              </div>\n            </div>\n            <div class=\"control-actions\">\n              <button \n                cideEleButton\n                variant=\"ghost\"\n                size=\"sm\"\n                (click)=\"editControl(control); $event.stopPropagation()\">\n                <cide-ele-icon>edit</cide-ele-icon>\n              </button>\n              <button \n                cideEleButton\n                variant=\"ghost\"\n                size=\"sm\"\n                (click)=\"deleteControl(control); $event.stopPropagation()\">\n                <cide-ele-icon>delete</cide-ele-icon>\n              </button>\n            </div>\n          </div>\n          \n          \n        </div>\n      </div>\n\n      <div class=\"controls-list-empty\" *ngIf=\"!loading() && controls().length === 0\">\n        <cide-ele-icon>settings_input_component</cide-ele-icon>\n        <p>No controls available</p>\n        <small>Create controls using the form on the left</small>\n      </div>\n\n      <div class=\"controls-list-loading\" *ngIf=\"loading()\">\n        <cide-ele-icon class=\"spinning\">refresh</cide-ele-icon>\n        <p>Loading controls...</p>\n      </div>\n    </div>\n  </div>\n</div>\n\n ", styles: [".page-controls-container{@apply tw-flex tw-flex-col tw-h-full tw-bg-gray-50;}.header{@apply tw-bg-white tw-border-b tw-border-gray-200 tw-px-6 tw-py-4;}.header-content{@apply tw-flex tw-items-center tw-justify-between;}.header-left{@apply tw-flex tw-items-center tw-space-x-4;}.back-button{@apply tw-flex tw-items-center tw-justify-center tw-w-8 tw-h-8 tw-text-gray-600 hover:tw-text-gray-900 hover:tw-bg-gray-100 tw-rounded-md tw-transition-colors;}.title-section{@apply tw-flex tw-items-center tw-space-x-3;}.title-icon{@apply tw-text-blue-600 tw-text-xl;}.title{@apply tw-text-xl tw-font-semibold tw-text-gray-900 tw-mb-0;}.subtitle{@apply tw-text-sm tw-text-gray-500 tw-mb-0;}.error-message{@apply tw-bg-red-50 tw-border tw-border-red-200 tw-rounded-md tw-p-4 tw-mx-6 tw-mt-4 tw-flex tw-items-start tw-space-x-3;}.error-message cide-ele-icon{@apply tw-text-red-500 tw-flex-shrink-0 tw-mt-0.5;}.error-message h3{@apply tw-text-red-800 tw-font-medium tw-mb-1;}.error-message p{@apply tw-text-red-700 tw-text-sm tw-mb-0;}.main-content{@apply tw-flex tw-flex-1 tw-gap-6 tw-p-6 tw-overflow-hidden;}.form-section{@apply tw-w-3/5 tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-flex tw-flex-col;}.form-header{@apply tw-flex tw-items-center tw-space-x-3 tw-p-6 tw-border-b tw-border-gray-200;}.form-header cide-ele-icon{@apply tw-text-blue-600;}.form-header h3{@apply tw-text-lg tw-font-medium tw-text-gray-900 tw-mb-0;}.control-form{@apply tw-flex tw-flex-col tw-flex-1 tw-p-6;}.form-grid{@apply tw-grid tw-grid-cols-2 tw-gap-4 tw-mb-6;}.form-group{@apply tw-space-y-1;}.form-group.full-width{@apply tw-col-span-2;}.form-group.compact-number,.form-group.compact-select,.form-group.compact-dimension{@apply tw-max-w-32;}.form-group.compact-number{@apply tw-min-w-20;}.form-group.compact-dimension{@apply tw-min-w-24;}.form-group.compact-select{@apply tw-min-w-28;}.form-group.form-group-row{@apply tw-col-span-2 tw-flex tw-gap-4;}.form-group-half{@apply tw-flex-1 tw-space-y-1;}.checkbox-field{margin:.25rem 0}.checkbox-label{display:flex;flex-direction:column;gap:.25rem;cursor:pointer;padding:.75rem 0;background:transparent;border:none;border-radius:0;transition:all .2s ease}.checkbox-label:hover{background:#667eea05}.checkbox-label .checkbox-input{width:1rem;height:1rem;accent-color:#667eea;border-radius:3px;margin-bottom:.125rem}.checkbox-label .checkbox-text{font-weight:600;color:#374151;font-size:.875rem}.checkbox-label .checkbox-description{font-size:.75rem;color:#6b7280;margin-top:.125rem}.options-title{@apply tw-text-sm tw-font-medium tw-text-gray-900 tw-mb-3;}.options-grid{@apply tw-grid tw-grid-cols-3 tw-gap-3;}.option-item{@apply tw-flex tw-items-center tw-space-x-2;}.option-checkbox{@apply tw-rounded tw-border-gray-300 tw-text-blue-600 focus:tw-ring-blue-500 focus:tw-border-blue-500;}.option-item label{@apply tw-text-sm tw-text-gray-700 tw-cursor-pointer;}.form-actions{@apply tw-flex tw-justify-end tw-space-x-3 tw-pt-4 tw-border-t tw-border-gray-200 tw-mt-auto;}.controls-list-section{@apply tw-w-2/5 tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-flex tw-flex-col;}.controls-header{@apply tw-p-6 tw-border-b tw-border-gray-200;}.controls-header h3{@apply tw-text-lg tw-font-medium tw-text-gray-900 tw-mb-1;}.controls-header p{@apply tw-text-sm tw-text-gray-500 tw-mb-0;}.controls-list{@apply tw-flex-1 tw-overflow-y-auto tw-p-4;}.control-item{@apply tw-bg-gray-50 tw-border tw-border-gray-200 tw-rounded-lg tw-p-4 tw-mb-3 tw-cursor-pointer tw-transition-all tw-duration-200;}.control-item:hover{@apply tw-shadow-md tw-border-gray-300;}.control-item.selected{@apply tw-bg-blue-50 tw-border-blue-300 tw-shadow-md;}.control-item:focus{@apply tw-outline-none tw-ring-2 tw-ring-blue-500 tw-ring-offset-2;}.control-item:last-child{@apply tw-mb-0;}.control-header{@apply tw-flex tw-items-start tw-space-x-3;}.control-icon{@apply tw-flex-shrink-0 tw-w-10 tw-h-10 tw-bg-blue-100 tw-rounded-lg tw-flex tw-items-center tw-justify-center;}.control-icon cide-ele-icon{@apply tw-text-blue-600;}.control-info{@apply tw-flex-1 tw-min-w-0;}.control-info h4{@apply tw-text-sm tw-font-medium tw-text-gray-900 tw-mb-1 tw-truncate;}.control-info p{@apply tw-text-xs tw-text-gray-500 tw-mb-2 tw-truncate;}.control-meta{@apply tw-flex tw-items-center tw-space-x-2;}.control-type{@apply tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-gray-100 tw-text-gray-800;}.control-status{@apply tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-red-100 tw-text-red-800;}.control-status.active{@apply tw-bg-green-100 tw-text-green-800;}.control-actions{@apply tw-flex tw-items-center tw-space-x-1 tw-opacity-0 tw-transition-opacity tw-duration-200;}.control-item:hover .control-actions,.control-item.selected .control-actions{@apply tw-opacity-100;}.controls-list-empty{@apply tw-flex tw-flex-col tw-items-center tw-justify-center tw-py-12 tw-text-center;}.controls-list-empty cide-ele-icon{@apply tw-text-4xl tw-text-gray-300 tw-mb-4;}.controls-list-empty p{@apply tw-text-gray-500 tw-font-medium tw-mb-1;}.controls-list-empty small{@apply tw-text-gray-400;}.controls-list-loading{@apply tw-flex tw-flex-col tw-items-center tw-justify-center tw-py-12 tw-text-center;}.controls-list-loading cide-ele-icon{@apply tw-text-2xl tw-text-blue-500 tw-mb-4;}.controls-list-loading p{@apply tw-text-gray-500;}.spinning{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (max-width: 1024px){.main-content{@apply tw-flex-col;}.form-section{@apply tw-w-full;}.controls-list-section{@apply tw-w-full tw-max-h-96;}.form-grid{@apply tw-grid-cols-1;}.options-grid{@apply tw-grid-cols-2;}}@media (max-width: 640px){.main-content{@apply tw-p-4 tw-gap-4;}.form-grid{@apply tw-gap-3;}.form-actions{@apply tw-flex-col tw-space-x-0 tw-space-y-2;}.options-grid{@apply tw-grid-cols-1;}}\n"] }]
         }] });
 
+var pageControls_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    PageControlsComponent: PageControlsComponent
+});
+
 // Page Management Components
 // Page Management Interfaces - Now using model interfaces from cloud-ide-lms-model
 
@@ -6855,5 +7030,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { CloudIdeCoreComponent, CloudIdeCoreService, DepartmentListComponent, DepartmentManagementService, DesignationListComponent, DesignationManagementService, GradeLevelListComponent, GradeLevelManagementService, MENU_TYPES, MenuListComponent, MenuManagementService, PageControlsComponent, PageControlsService, PageListComponent, PageManagementService, PageThemeComponent, PageThemeService };
+export { CloudIdeCoreComponent, CloudIdeCoreService, DepartmentListComponent, DepartmentManagementService, DesignationListComponent, DesignationManagementService, GradeLevelListComponent, GradeLevelManagementService, MENU_TYPES, MenuListComponent, MenuManagementService, PageControlsComponent, PageControlsService, PageListComponent, PageManagementService, PageThemeComponent, PageThemeService, coreRoutes };
 //# sourceMappingURL=cloud-ide-core.mjs.map