cloud-ide-core 2.0.73 → 2.0.75

package/fesm2022/cloud-ide-core.mjs

@@ -22,7 +22,6 @@ const coreRoutes = [
         title: 'Menu Management',
         canActivate: [authGuard],
         data: {
-            reuseTab: true,
             sypg_page_code: "core_menu_list"
         }
     },
@@ -32,7 +31,6 @@ const coreRoutes = [
         title: 'Department Management',
         canActivate: [authGuard],
         data: {
-            reuseTab: true,
             sypg_page_code: "core_department_list"
         }
     },
@@ -42,7 +40,6 @@ const coreRoutes = [
         title: 'Designation Management',
         canActivate: [authGuard],
         data: {
-            reuseTab: true,
             sypg_page_code: "core_designation_list"
         }
     },
@@ -52,7 +49,6 @@ const coreRoutes = [
         title: 'Grade Level Management',
         canActivate: [authGuard],
         data: {
-            reuseTab: true,
             sypg_page_code: "core_grade_level_list"
         }
     },
@@ -62,27 +58,24 @@ const coreRoutes = [
         title: 'Page Management',
         canActivate: [authGuard],
         data: {
-            reuseTab: true,
             sypg_page_code: "core_page_management"
         }
     },
     {
         path: 'page-form',
-        loadComponent: () => import('./cloud-ide-core-page-form.component-Bebmm1_Z.mjs').then(c => c.CideCorePageFormComponent),
+        loadComponent: () => import('./cloud-ide-core-page-form.component-DMiL9oSs.mjs').then(c => c.CideCorePageFormComponent),
         title: 'Page Form',
         canActivate: [authGuard],
         data: {
-            reuseTab: true,
             sypg_page_code: "core_page_management"
         }
     },
     {
         path: 'page-form/:query',
-        loadComponent: () => import('./cloud-ide-core-page-form.component-Bebmm1_Z.mjs').then(c => c.CideCorePageFormComponent),
+        loadComponent: () => import('./cloud-ide-core-page-form.component-DMiL9oSs.mjs').then(c => c.CideCorePageFormComponent),
         title: 'Page Form',
         canActivate: [authGuard],
         data: {
-            reuseTab: true,
             sypg_page_code: "core_page_management"
         }
     },
@@ -92,7 +85,6 @@ const coreRoutes = [
         title: 'Page Theme Management',
         canActivate: [authGuard],
         data: {
-            reuseTab: true,
             sypg_page_code: "core_page_theme"
         }
     },
@@ -102,7 +94,6 @@ const coreRoutes = [
         title: 'Page Theme Management',
         canActivate: [authGuard],
         data: {
-            reuseTab: true,
             sypg_page_code: "core_page_theme"
         }
     },
@@ -112,7 +103,6 @@ const coreRoutes = [
         title: 'Page Controls Management',
         canActivate: [authGuard],
         data: {
-            reuseTab: true,
             sypg_page_code: "core_page_controls"
         }
     },
@@ -122,7 +112,6 @@ const coreRoutes = [
         title: 'Page Controls Management',
         canActivate: [authGuard],
         data: {
-            reuseTab: true,
             sypg_page_code: "core_page_controls"
         }
     },
@@ -132,7 +121,6 @@ const coreRoutes = [
         title: 'General Master Entry',
         canActivate: [authGuard],
         data: {
-            reuseTab: true,
             sypg_page_code: "core_general_master"
         }
     },
@@ -142,7 +130,6 @@ const coreRoutes = [
         title: 'General Master Entry',
         canActivate: [authGuard],
         data: {
-            reuseTab: true,
             sypg_page_code: "core_general_master"
         }
     },
@@ -152,7 +139,6 @@ const coreRoutes = [
         title: 'General Type Entry',
         canActivate: [authGuard],
         data: {
-            reuseTab: true,
             sypg_page_code: "core_general_master_type"
         }
     },
@@ -162,7 +148,6 @@ const coreRoutes = [
         title: 'General Type Entry',
         canActivate: [authGuard],
         data: {
-            reuseTab: true,
             sypg_page_code: "core_general_master_type"
         }
     },
@@ -173,7 +158,6 @@ const coreRoutes = [
         title: 'User Management',
         canActivate: [authGuard],
         data: {
-            reuseTab: true,
             sypg_page_code: "auth_user_mst"
         }
     },
@@ -183,7 +167,6 @@ const coreRoutes = [
         title: 'Create User',
         canActivate: [authGuard],
         data: {
-            reuseTab: true,
             sypg_page_code: "core_user_management_create"
         }
     },
@@ -193,7 +176,6 @@ const coreRoutes = [
         title: 'Edit User',
         canActivate: [authGuard],
         data: {
-            reuseTab: true,
             sypg_page_code: "core_user_management_create"
         }
     },
@@ -203,7 +185,6 @@ const coreRoutes = [
         title: 'View User',
         canActivate: [authGuard],
         data: {
-            reuseTab: true,
             sypg_page_code: "core_user_management_create"
         }
     },
@@ -212,7 +193,6 @@ const coreRoutes = [
         loadComponent: () => Promise.resolve().then(function () { return entityList_component; }).then(c => c.CideCoreEntityListComponent),
         canActivate: [authGuard],
         data: {
-            reuseTab: true,
             sypg_page_code: "admin_entity_list"
         }
     },
@@ -221,7 +201,6 @@ const coreRoutes = [
         loadComponent: () => Promise.resolve().then(function () { return entityCreate_component; }).then(c => c.CideCoreEntityCreateComponent),
         canActivate: [authGuard],
         data: {
-            reuseTab: true,
             sypg_page_code: "core_entity_form"
         }
     },
@@ -230,7 +209,6 @@ const coreRoutes = [
         loadComponent: () => Promise.resolve().then(function () { return entityCreate_component; }).then(c => c.CideCoreEntityCreateComponent),
         canActivate: [authGuard],
         data: {
-            reuseTab: true,
             sypg_page_code: "core_entity_form"
         }
     },
@@ -240,7 +218,6 @@ const coreRoutes = [
         title: 'Organization Structure',
         canActivate: [authGuard],
         data: {
-            reuseTab: true,
             sypg_page_code: "core_org_structure"
         }
     },
@@ -251,7 +228,6 @@ const coreRoutes = [
         title: 'User Role Management',
         canActivate: [authGuard],
         data: {
-            reuseTab: true,
             sypg_page_code: "core_user_role"
         }
     },
@@ -261,7 +237,6 @@ const coreRoutes = [
         title: 'Create User Role',
         canActivate: [authGuard],
         data: {
-            reuseTab: true,
             sypg_page_code: "core_user_role"
         }
     },
@@ -271,7 +246,6 @@ const coreRoutes = [
         title: 'Edit User Role',
         canActivate: [authGuard],
         data: {
-            reuseTab: true,
             sypg_page_code: "core_user_role"
         }
     },
@@ -281,7 +255,6 @@ const coreRoutes = [
         title: 'View User Role',
         canActivate: [authGuard],
         data: {
-            reuseTab: true,
             sypg_page_code: "core_user_role_view"
         }
     }
@@ -892,12 +865,106 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                 }]
         }], ctorParameters: () => [] });
 
+class CideCorePageManagementService {
+    http;
+    constructor(http) {
+        this.http = http;
+    }
+    /**
+     * Get page list from API
+     */
+    getPageList(body) {
+        const query = generateStringFromObject(body);
+        return this.http?.get(cidePath?.join([hostManagerRoutesUrl?.cideSuiteHost, coreRoutesUrl?.module, coreRoutesUrl?.page, query]))
+            .pipe(catchError(error => {
+            console.error('CideCorePageManagementService API error:', error);
+            return this.handleError(error);
+        }));
+    }
+    /**
+     * Create or update page using single API endpoint
+     */
+    createOrUpdatePage(payload) {
+        const url = cidePath?.join([hostManagerRoutesUrl?.cideSuiteHost, coreRoutesUrl?.module, coreRoutesUrl?.page]);
+        return this.http.post(url, payload)
+            .pipe(catchError(this.handleError));
+    }
+    /**
+     * Get page by ID
+     */
+    getPageById(id) {
+        console.log('Getting page by ID:', id);
+        const payload = { sypg_id: id };
+        const query = generateStringFromObject(payload);
+        const url = cidePath?.join([hostManagerRoutesUrl?.cideSuiteHost, coreRoutesUrl?.module, coreRoutesUrl?.page, 'byId', query]);
+        return this.http.get(url)
+            .pipe(catchError(this.handleError));
+    }
+    /**
+     * Delete page
+     */
+    deletePage(id) {
+        const payload = { sypg_id: id };
+        const query = generateStringFromObject(payload);
+        const url = cidePath?.join([hostManagerRoutesUrl?.cideSuiteHost, coreRoutesUrl?.module, coreRoutesUrl?.page, query]);
+        return this.http.delete(url)
+            .pipe(catchError(this.handleError));
+    }
+    /**
+     * Toggle page active status
+     */
+    togglePageStatus(payload) {
+        const query = generateStringFromObject(payload);
+        const url = cidePath?.join([hostManagerRoutesUrl?.cideSuiteHost, coreRoutesUrl?.module, coreRoutesUrl?.page, query]);
+        return this.http.put(url, {})
+            .pipe(catchError(this.handleError));
+    }
+    /**
+     * Find page by ID using API
+     */
+    findPageById(payload) {
+        const query = generateStringFromObject(payload);
+        const url = cidePath?.join([hostManagerRoutesUrl?.cideSuiteHost, coreRoutesUrl?.module, coreRoutesUrl?.page, 'checkCodeExists', query]);
+        return this.http.get(url)
+            .pipe(catchError(this.handleError));
+    }
+    /**
+     * Check if page code already exists
+     */
+    checkPageCodeExists(payload) {
+        return this.findPageById(payload).pipe(map((response) => response.success || false));
+    }
+    /**
+     * Handle errors
+     */
+    handleError(error) {
+        let errorMessage = 'An error occurred';
+        if (error instanceof Error) {
+            errorMessage = error.message;
+        }
+        else if (typeof error === 'string') {
+            errorMessage = error;
+        }
+        console.error('Page Management Service Error:', errorMessage);
+        return throwError(() => new Error(errorMessage));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCorePageManagementService, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCorePageManagementService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCorePageManagementService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: i1.HttpClient }] });
+
 class MenuListComponent {
     // Dependency injection
     destroyRef = inject(DestroyRef);
     menuService = inject(MenuManagementService);
     generalMasterService = inject(CideCoreGeneralMasterService);
     generalMasterTypeService = inject(CideCoreGeneralMasterTypeService);
+    pageService = inject(CideCorePageManagementService);
     notificationService = inject(NotificationService);
     fb = inject(NonNullableFormBuilder);
     router = inject(Router);
@@ -914,6 +981,8 @@ class MenuListComponent {
     error = signal(null, ...(ngDevMode ? [{ debugName: "error" }] : []));
     selectedItems = signal([], ...(ngDevMode ? [{ debugName: "selectedItems" }] : []));
     permissions = signal([], ...(ngDevMode ? [{ debugName: "permissions" }] : []));
+    pages = signal([], ...(ngDevMode ? [{ debugName: "pages" }] : []));
+    pagesLoading = signal(false, ...(ngDevMode ? [{ debugName: "pagesLoading" }] : []));
     userRightsTypeId = signal(null, ...(ngDevMode ? [{ debugName: "userRightsTypeId" }] : []));
     searchTerm = signal('', ...(ngDevMode ? [{ debugName: "searchTerm" }] : []));
     // Modern reactive forms with signals
@@ -940,7 +1009,8 @@ class MenuListComponent {
         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)]),
-        syme_permissions_id_sygms: this.fb.control([])
+        syme_permissions_id_sygms: this.fb.control([]),
+        syme_pages_id_sypg: this.fb.control([])
     });
     // Menu type options for quick add - dynamic based on parent selection
     menuTypeOptions = computed(() => {
@@ -967,6 +1037,13 @@ class MenuListComponent {
             label: permission.sygms_title || permission.sygms_code || 'Unknown'
         }));
     }, ...(ngDevMode ? [{ debugName: "permissionOptions" }] : []));
+    // Page options for multi-select
+    pageOptions = computed(() => {
+        return this.pages().map(page => ({
+            value: page._id || '',
+            label: page.sypg_title || page.sypg_page_code || 'Unknown'
+        }));
+    }, ...(ngDevMode ? [{ debugName: "pageOptions" }] : []));
     // Grid configuration signal
     gridConfig = signal({
         id: 'menu-list-grid',
@@ -1143,6 +1220,7 @@ class MenuListComponent {
         console.log('MenuListComponent initialized with modern Angular patterns');
         this.loadUserRightsTypeId();
         this.loadMenuItems();
+        this.loadPages();
         this.setupEventListeners();
         this.exposeGlobalFunctions();
     }
@@ -1231,6 +1309,48 @@ class MenuListComponent {
             }
         });
     }
+    /**
+     * Load pages from service
+     */
+    loadPages() {
+        console.log('🚀 MenuListComponent.loadPages() called');
+        this.pagesLoading.set(true);
+        // Check if service exists
+        if (!this.pageService) {
+            console.error('❌ PageService is not available');
+            this.pagesLoading.set(false);
+            return;
+        }
+        const requestBody = {
+            pageSize: 1000, // Load all pages
+            pageIndex: 1,
+            query: '', // Empty query to get all pages
+            sort: { order: 'asc', key: 'sypg_title' }
+        };
+        this.pageService.getPageList(requestBody)
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe({
+            next: (response) => {
+                console.log('📥 MenuListComponent received pages response:', response);
+                if (response?.success && response.data) {
+                    console.log('✅ Pages loaded successfully:', response.data);
+                    // Filter to only active pages if needed
+                    const activePages = response.data.filter(page => page.sypg_isactive !== false);
+                    this.pages.set(activePages);
+                }
+                else {
+                    console.error('❌ Failed to load pages:', response);
+                }
+            },
+            error: (err) => {
+                console.error('❌ MenuListComponent error loading pages:', err);
+            },
+            complete: () => {
+                console.log('MenuListComponent loadPages completed');
+                this.pagesLoading.set(false);
+            }
+        });
+    }
     /**
      * Handle click outside dropdown
      */
@@ -1599,6 +1719,7 @@ class MenuListComponent {
             syme_icon: menuItem.syme_icon || '',
             syme_link: menuItem.syme_link || '',
             syme_permissions_id_sygms: menuItem.syme_permissions_id_sygms || [],
+            syme_pages_id_sypg: menuItem.syme_pages_id_sypg || [],
             syme_isactive: menuItem.syme_isactive ?? true,
             syme_order_by: menuItem.syme_order_by || 1
         });
@@ -1793,7 +1914,8 @@ class MenuListComponent {
             syme_link: formValue.syme_link || '',
             syme_order_by: formValue.syme_order_by,
             syme_isactive: formValue.syme_isactive,
-            syme_permissions_id_sygms: formValue.syme_permissions_id_sygms || []
+            syme_permissions_id_sygms: formValue.syme_permissions_id_sygms || [],
+            syme_pages_id_sypg: formValue.syme_pages_id_sypg || []
         };
         // Check if we're in edit mode
         if (this.isEditMode() && this.retrievedMenuItem()) {
@@ -1857,7 +1979,8 @@ class MenuListComponent {
             syme_link: '',
             syme_isactive: true,
             syme_order_by: 1,
-            syme_permissions_id_sygms: []
+            syme_permissions_id_sygms: [],
+            syme_pages_id_sypg: []
         });
     }
     /**
@@ -2187,7 +2310,7 @@ class MenuListComponent {
         }
     }
     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: "permissionsRendererTemplate", first: true, predicate: ["permissionsRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "actionsDropdownRendererTemplate", first: true, predicate: ["actionsDropdownRendererTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Menu List Container -->\r\n<div class=\"tw-table tw-w-full tw-h-full\">\r\n\r\n  <!-- Quick Add Form Section -->\r\n  <div class=\"tw-table-row tw-h-0\">\r\n    <div class=\"tw-table-cell tw-px-6 tw-py-4 tw-border-b tw-border-gray-200 tw-bg-white\">\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 Menu Item' : 'Quick Add Menu Item' }}</h6>\r\n      </div>\r\n      @if (selectedParentItem()) {\r\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\">\r\n          <cide-ele-icon class=\"tw-text-blue-600 tw-w-4 tw-h-4\">account_tree</cide-ele-icon>\r\n          <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\n            <span class=\"tw-text-sm tw-text-blue-600 tw-font-medium\">{{ isEditMode() ? 'Parent:' : 'Creating child under:' }}</span>\r\n            <span class=\"tw-text-sm tw-text-blue-800 tw-font-semibold\">{{ selectedParentItem()?.syme_title }}</span>\r\n          </div>\r\n          <button \r\n            cideEleButton \r\n            variant=\"ghost\" \r\n            size=\"xs\" \r\n            type=\"button\" \r\n            (click)=\"clearSelectedParent()\" \r\n            class=\"tw-text-blue-400 hover:tw-text-blue-600\">\r\n            <svg class=\"tw-w-4 tw-h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\"/>\r\n            </svg>\r\n          </button>\r\n        </div>\r\n      }\r\n    </div>\r\n    \r\n    <form [formGroup]=\"quickAddForm\" (ngSubmit)=\"quickAddMenuItem()\">\r\n    <!-- First Row -->\r\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\">\r\n      <!-- Menu Title -->\r\n      <div>\r\n        <cide-ele-input \r\n          id=\"syme_title\" \r\n          label=\"Title\" \r\n          formControlName=\"syme_title\"\r\n          size=\"sm\">\r\n        </cide-ele-input>\r\n      </div>\r\n      \r\n      <!-- Menu Type -->\r\n      <div>\r\n        <cide-ele-select \r\n          label=\"Type*\" \r\n          [options]=\"menuTypeOptions()\" \r\n          formControlName=\"syme_type\"\r\n          placeholder=\"Select type\"\r\n          size=\"sm\"\r\n          (ngModelChange)=\"onMenuTypeChange()\">\r\n        </cide-ele-select>\r\n      </div>\r\n      \r\n      <!-- Path -->\r\n      <div>\r\n        <cide-ele-input \r\n          id=\"quickPath\" \r\n          type=\"text\"\r\n          label=\"Path\" \r\n          formControlName=\"syme_path\"\r\n          placeholder=\"/path/to/route\"\r\n          size=\"sm\">\r\n        </cide-ele-input>\r\n      </div>\r\n      \r\n      <!-- Icon -->\r\n      <div>\r\n        <cide-ele-input \r\n          id=\"quickIcon\" \r\n          type=\"text\"\r\n          label=\"Icon\" \r\n          formControlName=\"syme_icon\"\r\n          placeholder=\"Icon name\"\r\n          size=\"sm\">\r\n        </cide-ele-input>\r\n      </div>\r\n      \r\n      <!-- Empty div for spacing -->\r\n      <div></div>\r\n    </div>\r\n    \r\n    <!-- Second Row -->\r\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\">\r\n      <!-- Description -->\r\n      <div>\r\n        <cide-ele-textarea \r\n          id=\"syme_desc\" \r\n          label=\"Description\" \r\n          formControlName=\"syme_desc\"\r\n          placeholder=\"Menu description\"\r\n          rows=\"2\"\r\n          size=\"sm\">\r\n        </cide-ele-textarea>\r\n      </div>\r\n      \r\n      <!-- Permissions (only show for menu and title types) -->\r\n      @if (quickAddForm.get('syme_type')?.value === 'menu') {\r\n      <div>\r\n          <cide-ele-select \r\n            label=\"Permissions\" \r\n            [options]=\"permissionOptions()\" \r\n            formControlName=\"syme_permissions_id_sygms\"\r\n            placeholder=\"Select permissions for this menu\"\r\n            [multiple]=\"true\"\r\n            size=\"sm\">\r\n          </cide-ele-select>\r\n        </div>\r\n      }\r\n      \r\n      <!-- Link -->\r\n      <div>\r\n        <cide-ele-input \r\n          id=\"quickLink\" \r\n          type=\"text\"\r\n          label=\"Link\" \r\n          formControlName=\"syme_link\"\r\n          placeholder=\"External link\"\r\n          size=\"sm\">\r\n        </cide-ele-input>\r\n      </div>\r\n      \r\n      <!-- Active Status and Action Buttons -->\r\n      <div class=\"tw-flex tw-flex-col tw-justify-end\">\r\n        <div class=\"tw-flex tw-items-center tw-space-x-3\">\r\n          <!-- Active Checkbox -->\r\n          <cide-ele-input \r\n            id=\"quickIsActive\"\r\n            type=\"checkbox\"\r\n            label=\"Active\"\r\n            formControlName=\"syme_isactive\"\r\n            size=\"sm\">\r\n          </cide-ele-input>\r\n          \r\n          <!-- Action Buttons -->\r\n          <button \r\n            cideEleButton \r\n            variant=\"primary\" \r\n            size=\"sm\" \r\n            type=\"submit\"\r\n            [disabled]=\"quickAddForm.invalid\"\r\n            class=\"tw-px-2 tw-py-1 tw-w-20\">\r\n            <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\r\n            {{ isEditMode() ? 'Update' : 'Add' }}\r\n          </button>\r\n          <button \r\n            cideEleButton \r\n            variant=\"outline\" \r\n            size=\"sm\" \r\n            type=\"button\"\r\n            (click)=\"resetQuickAddForm()\"\r\n            class=\"tw-px-2 tw-py-1 tw-w-16\">\r\n            <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">refresh</cide-ele-icon>\r\n            Reset\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    </form>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Main Content Area -->\r\n  <div class=\"tw-table-row\">\r\n    <div class=\"tw-table-cell tw-h-full tw-relative tw-p-0\">\r\n  <!-- Data Grid Component -->\r\n  <div class=\"tw-h-full tw-w-full tw-overflow-auto\">\r\n    \r\n    <cide-ele-data-grid \r\n      [config]=\"gridConfig()\" \r\n      [templateRenderers]=\"getTemplateRenderers()\"\r\n      [actionHandlers]=\"actionHandlers\"\r\n      [dragDropEnabled]=\"true\" \r\n      (gridEvent)=\"onGridEvent($event)\">\r\n    </cide-ele-data-grid>\r\n  </div>\r\n\r\n\r\n    </div>\r\n  </div>\r\n\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\r\n\r\n<!-- Menu Details Renderer Template -->\r\n<ng-template #menuDetailsRendererTemplate let-row=\"row\" let-value=\"value\">\r\n  <div class=\"tw-flex tw-items-center tw-min-w-0\">\r\n    <!-- Menu Icon -->\r\n    <div class=\"tw-flex-shrink-0\">\r\n      <cide-ele-icon \r\n        class=\"tw-text-gray-400\" \r\n        size=\"xs\">\r\n        {{ row.syme_icon || 'folder_open' }}\r\n      </cide-ele-icon>\r\n    </div>\r\n    \r\n    <!-- Menu Details -->\r\n    <div class=\"tw-ml-3 tw-min-w-0 tw-flex-1\">\r\n      <div class=\"tw-text-xs tw-font-medium tw-text-gray-900 tw-truncate\" \r\n           [title]=\"row.syme_title\">\r\n        {{ row.syme_title || 'Untitled' }}\r\n      </div>\r\n      @if (row.syme_desc) {\r\n        <div class=\"tw-text-xs tw-text-gray-500 tw-truncate\" \r\n             [title]=\"row.syme_desc\">\r\n          {{ row.syme_desc }}\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- Menu Type Renderer Template -->\r\n<ng-template #menuTypeRendererTemplate 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]=\"getMenuTypeClass(row.syme_type)\">\r\n    {{ getMenuTypeLabel(row.syme_type) }}\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]=\"getDropdownItems(row)\"\r\n    [config]=\"{ triggerIcon: 'more_vert', triggerSize: 'sm' }\"\r\n    (itemClick)=\"onDropdownItemClick($event, row)\">\r\n  </cide-ele-dropdown>\r\n</ng-template>\r\n\r\n<!-- Permissions Renderer Template -->\r\n<ng-template #permissionsRendererTemplate let-row=\"row\" let-value=\"value\">\r\n  <div class=\"tw-flex tw-flex-wrap tw-gap-1 tw-max-w-full tw-items-center\">\r\n    @if (row.syme_type === 'menu') {\r\n      @if (row.syme_permissions_id_sygms && row.syme_permissions_id_sygms.length > 0) {\r\n        @for (permissionId of row.syme_permissions_id_sygms.slice(0, 3); track permissionId) {\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-bg-blue-100 tw-text-blue-800 tw-whitespace-nowrap tw-h-5\">\r\n            {{ getPermissionById(permissionId)?.sygms_title || getPermissionById(permissionId)?.sygms_code || 'Unknown' }}\r\n          </span>\r\n        }\r\n        @if (row.syme_permissions_id_sygms.length > 3) {\r\n          <span \r\n            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-bg-gray-100 tw-text-gray-600 tw-whitespace-nowrap tw-cursor-help tw-h-5\"\r\n            [title]=\"getAllPermissionNames(row.syme_permissions_id_sygms)\">\r\n            +{{ row.syme_permissions_id_sygms.length - 3 }} more\r\n          </span>\r\n        }\r\n      } @else {\r\n        <span class=\"tw-text-xs tw-text-gray-500 tw-h-5 tw-flex tw-items-center\">No permissions</span>\r\n      }\r\n    } @else {\r\n      <!-- Show N/A for module, section, and title types -->\r\n      <span class=\"tw-text-xs tw-text-gray-400 tw-h-5 tw-flex tw-items-center\">N/A</span>\r\n    }\r\n  </div>\r\n</ng-template>\r\n\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: CideEleDataGridComponent, selector: "cide-ele-data-grid", inputs: ["config", "templateRenderers", "customFormatters", "actionHandlers", "serverSidePagination", "totalServerItems", "currentServerPage", "currentServerPageSize", "dragDropEnabled"], outputs: ["gridEvent"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: 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", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput", "options", "multiple", "searchable", "showSearchInput", "loading", "valueKey", "labelKey", "treeView"], 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 ɵ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: "permissionsRendererTemplate", first: true, predicate: ["permissionsRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "actionsDropdownRendererTemplate", first: true, predicate: ["actionsDropdownRendererTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Menu List Container -->\r\n<div class=\"tw-table tw-w-full tw-h-full\">\r\n\r\n  <!-- Quick Add Form Section -->\r\n  <div class=\"tw-table-row tw-h-0\">\r\n    <div class=\"tw-table-cell tw-px-6 tw-py-4 tw-border-b tw-border-gray-200 tw-bg-white\">\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 Menu Item' : 'Quick Add Menu Item' }}</h6>\r\n      </div>\r\n      @if (selectedParentItem()) {\r\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\">\r\n          <cide-ele-icon class=\"tw-text-blue-600 tw-w-4 tw-h-4\">account_tree</cide-ele-icon>\r\n          <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\n            <span class=\"tw-text-sm tw-text-blue-600 tw-font-medium\">{{ isEditMode() ? 'Parent:' : 'Creating child under:' }}</span>\r\n            <span class=\"tw-text-sm tw-text-blue-800 tw-font-semibold\">{{ selectedParentItem()?.syme_title }}</span>\r\n          </div>\r\n          <button \r\n            cideEleButton \r\n            variant=\"ghost\" \r\n            size=\"xs\" \r\n            type=\"button\" \r\n            (click)=\"clearSelectedParent()\" \r\n            class=\"tw-text-blue-400 hover:tw-text-blue-600\">\r\n            <svg class=\"tw-w-4 tw-h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\"/>\r\n            </svg>\r\n          </button>\r\n        </div>\r\n      }\r\n    </div>\r\n    \r\n    <form [formGroup]=\"quickAddForm\" (ngSubmit)=\"quickAddMenuItem()\">\r\n    <!-- First Row -->\r\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\">\r\n      <!-- Menu Title -->\r\n      <div>\r\n        <cide-ele-input \r\n          id=\"syme_title\" \r\n          label=\"Title\" \r\n          formControlName=\"syme_title\"\r\n          size=\"sm\">\r\n        </cide-ele-input>\r\n      </div>\r\n      \r\n      <!-- Menu Type -->\r\n      <div>\r\n        <cide-ele-select \r\n          label=\"Type*\" \r\n          [options]=\"menuTypeOptions()\" \r\n          formControlName=\"syme_type\"\r\n          placeholder=\"Select type\"\r\n          size=\"sm\"\r\n          (ngModelChange)=\"onMenuTypeChange()\">\r\n        </cide-ele-select>\r\n      </div>\r\n      \r\n      <!-- Path -->\r\n      <div>\r\n        <cide-ele-input \r\n          id=\"quickPath\" \r\n          type=\"text\"\r\n          label=\"Path\" \r\n          formControlName=\"syme_path\"\r\n          placeholder=\"/path/to/route\"\r\n          size=\"sm\">\r\n        </cide-ele-input>\r\n      </div>\r\n      \r\n      <!-- Icon -->\r\n      <div>\r\n        <cide-ele-input \r\n          id=\"quickIcon\" \r\n          type=\"text\"\r\n          label=\"Icon\" \r\n          formControlName=\"syme_icon\"\r\n          placeholder=\"Icon name\"\r\n          size=\"sm\">\r\n        </cide-ele-input>\r\n      </div>\r\n      \r\n      <!-- Empty div for spacing -->\r\n      <div></div>\r\n    </div>\r\n    \r\n    <!-- Second Row -->\r\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\">\r\n      <!-- Description -->\r\n      <div>\r\n        <cide-ele-textarea \r\n          id=\"syme_desc\" \r\n          label=\"Description\" \r\n          formControlName=\"syme_desc\"\r\n          placeholder=\"Menu description\"\r\n          rows=\"2\"\r\n          size=\"sm\">\r\n        </cide-ele-textarea>\r\n      </div>\r\n      \r\n      <!-- Permissions (only show for menu and title types) -->\r\n      @if (quickAddForm.get('syme_type')?.value === 'menu') {\r\n      <div>\r\n          <cide-ele-select \r\n            label=\"Permissions\" \r\n            [options]=\"permissionOptions()\" \r\n            formControlName=\"syme_permissions_id_sygms\"\r\n            placeholder=\"Select permissions for this menu\"\r\n            [multiple]=\"true\"\r\n            size=\"sm\">\r\n          </cide-ele-select>\r\n        </div>\r\n      }\r\n      \r\n      <!-- Pages (multiselect) -->\r\n      <div>\r\n        <cide-ele-select \r\n          label=\"Pages\" \r\n          [options]=\"pageOptions()\" \r\n          formControlName=\"syme_pages_id_sypg\"\r\n          placeholder=\"Select pages to connect\"\r\n          [multiple]=\"true\"\r\n          [loading]=\"pagesLoading()\"\r\n          size=\"sm\">\r\n        </cide-ele-select>\r\n      </div>\r\n      \r\n      <!-- Link -->\r\n      <div>\r\n        <cide-ele-input \r\n          id=\"quickLink\" \r\n          type=\"text\"\r\n          label=\"Link\" \r\n          formControlName=\"syme_link\"\r\n          placeholder=\"External link\"\r\n          size=\"sm\">\r\n        </cide-ele-input>\r\n      </div>\r\n      \r\n      <!-- Active Status and Action Buttons -->\r\n      <div class=\"tw-flex tw-flex-col tw-justify-end\">\r\n        <div class=\"tw-flex tw-items-center tw-space-x-3\">\r\n          <!-- Active Checkbox -->\r\n          <cide-ele-input \r\n            id=\"quickIsActive\"\r\n            type=\"checkbox\"\r\n            label=\"Active\"\r\n            formControlName=\"syme_isactive\"\r\n            size=\"sm\">\r\n          </cide-ele-input>\r\n          \r\n          <!-- Action Buttons -->\r\n          <button \r\n            cideEleButton \r\n            variant=\"primary\" \r\n            size=\"sm\" \r\n            type=\"submit\"\r\n            [disabled]=\"quickAddForm.invalid\"\r\n            class=\"tw-px-2 tw-py-1 tw-w-20\">\r\n            <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\r\n            {{ isEditMode() ? 'Update' : 'Add' }}\r\n          </button>\r\n          <button \r\n            cideEleButton \r\n            variant=\"outline\" \r\n            size=\"sm\" \r\n            type=\"button\"\r\n            (click)=\"resetQuickAddForm()\"\r\n            class=\"tw-px-2 tw-py-1 tw-w-16\">\r\n            <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">refresh</cide-ele-icon>\r\n            Reset\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    </form>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Main Content Area -->\r\n  <div class=\"tw-table-row\">\r\n    <div class=\"tw-table-cell tw-h-full tw-relative tw-p-0\">\r\n  <!-- Data Grid Component -->\r\n  <div class=\"tw-h-full tw-w-full tw-overflow-auto\">\r\n    \r\n    <cide-ele-data-grid \r\n      [config]=\"gridConfig()\" \r\n      [templateRenderers]=\"getTemplateRenderers()\"\r\n      [actionHandlers]=\"actionHandlers\"\r\n      [dragDropEnabled]=\"true\" \r\n      (gridEvent)=\"onGridEvent($event)\">\r\n    </cide-ele-data-grid>\r\n  </div>\r\n\r\n\r\n    </div>\r\n  </div>\r\n\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\r\n\r\n<!-- Menu Details Renderer Template -->\r\n<ng-template #menuDetailsRendererTemplate let-row=\"row\" let-value=\"value\">\r\n  <div class=\"tw-flex tw-items-center tw-min-w-0\">\r\n    <!-- Menu Icon -->\r\n    <div class=\"tw-flex-shrink-0\">\r\n      <cide-ele-icon \r\n        class=\"tw-text-gray-400\" \r\n        size=\"xs\">\r\n        {{ row.syme_icon || 'folder_open' }}\r\n      </cide-ele-icon>\r\n    </div>\r\n    \r\n    <!-- Menu Details -->\r\n    <div class=\"tw-ml-3 tw-min-w-0 tw-flex-1\">\r\n      <div class=\"tw-text-xs tw-font-medium tw-text-gray-900 tw-truncate\" \r\n           [title]=\"row.syme_title\">\r\n        {{ row.syme_title || 'Untitled' }}\r\n      </div>\r\n      @if (row.syme_desc) {\r\n        <div class=\"tw-text-xs tw-text-gray-500 tw-truncate\" \r\n             [title]=\"row.syme_desc\">\r\n          {{ row.syme_desc }}\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- Menu Type Renderer Template -->\r\n<ng-template #menuTypeRendererTemplate 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]=\"getMenuTypeClass(row.syme_type)\">\r\n    {{ getMenuTypeLabel(row.syme_type) }}\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]=\"getDropdownItems(row)\"\r\n    [config]=\"{ triggerIcon: 'more_vert', triggerSize: 'sm' }\"\r\n    (itemClick)=\"onDropdownItemClick($event, row)\">\r\n  </cide-ele-dropdown>\r\n</ng-template>\r\n\r\n<!-- Permissions Renderer Template -->\r\n<ng-template #permissionsRendererTemplate let-row=\"row\" let-value=\"value\">\r\n  <div class=\"tw-flex tw-flex-wrap tw-gap-1 tw-max-w-full tw-items-center\">\r\n    @if (row.syme_type === 'menu') {\r\n      @if (row.syme_permissions_id_sygms && row.syme_permissions_id_sygms.length > 0) {\r\n        @for (permissionId of row.syme_permissions_id_sygms.slice(0, 3); track permissionId) {\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-bg-blue-100 tw-text-blue-800 tw-whitespace-nowrap tw-h-5\">\r\n            {{ getPermissionById(permissionId)?.sygms_title || getPermissionById(permissionId)?.sygms_code || 'Unknown' }}\r\n          </span>\r\n        }\r\n        @if (row.syme_permissions_id_sygms.length > 3) {\r\n          <span \r\n            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-bg-gray-100 tw-text-gray-600 tw-whitespace-nowrap tw-cursor-help tw-h-5\"\r\n            [title]=\"getAllPermissionNames(row.syme_permissions_id_sygms)\">\r\n            +{{ row.syme_permissions_id_sygms.length - 3 }} more\r\n          </span>\r\n        }\r\n      } @else {\r\n        <span class=\"tw-text-xs tw-text-gray-500 tw-h-5 tw-flex tw-items-center\">No permissions</span>\r\n      }\r\n    } @else {\r\n      <!-- Show N/A for module, section, and title types -->\r\n      <span class=\"tw-text-xs tw-text-gray-400 tw-h-5 tw-flex tw-items-center\">N/A</span>\r\n    }\r\n  </div>\r\n</ng-template>\r\n\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: CideEleDataGridComponent, selector: "cide-ele-data-grid", inputs: ["config", "templateRenderers", "customFormatters", "actionHandlers", "serverSidePagination", "totalServerItems", "currentServerPage", "currentServerPageSize", "dragDropEnabled"], outputs: ["gridEvent"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: 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", "step", "size"], outputs: ["ngModelChange"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput", "options", "multiple", "searchable", "showSearchInput", "loading", "valueKey", "labelKey", "treeView"], 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: "20.1.7", ngImport: i0, type: MenuListComponent, decorators: [{
             type: Component,
@@ -2202,7 +2325,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                         CideTextareaComponent,
                         CideIconComponent,
                         CideEleDropdownComponent
-                    ], template: "<!-- Menu List Container -->\r\n<div class=\"tw-table tw-w-full tw-h-full\">\r\n\r\n  <!-- Quick Add Form Section -->\r\n  <div class=\"tw-table-row tw-h-0\">\r\n    <div class=\"tw-table-cell tw-px-6 tw-py-4 tw-border-b tw-border-gray-200 tw-bg-white\">\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 Menu Item' : 'Quick Add Menu Item' }}</h6>\r\n      </div>\r\n      @if (selectedParentItem()) {\r\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\">\r\n          <cide-ele-icon class=\"tw-text-blue-600 tw-w-4 tw-h-4\">account_tree</cide-ele-icon>\r\n          <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\n            <span class=\"tw-text-sm tw-text-blue-600 tw-font-medium\">{{ isEditMode() ? 'Parent:' : 'Creating child under:' }}</span>\r\n            <span class=\"tw-text-sm tw-text-blue-800 tw-font-semibold\">{{ selectedParentItem()?.syme_title }}</span>\r\n          </div>\r\n          <button \r\n            cideEleButton \r\n            variant=\"ghost\" \r\n            size=\"xs\" \r\n            type=\"button\" \r\n            (click)=\"clearSelectedParent()\" \r\n            class=\"tw-text-blue-400 hover:tw-text-blue-600\">\r\n            <svg class=\"tw-w-4 tw-h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\"/>\r\n            </svg>\r\n          </button>\r\n        </div>\r\n      }\r\n    </div>\r\n    \r\n    <form [formGroup]=\"quickAddForm\" (ngSubmit)=\"quickAddMenuItem()\">\r\n    <!-- First Row -->\r\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\">\r\n      <!-- Menu Title -->\r\n      <div>\r\n        <cide-ele-input \r\n          id=\"syme_title\" \r\n          label=\"Title\" \r\n          formControlName=\"syme_title\"\r\n          size=\"sm\">\r\n        </cide-ele-input>\r\n      </div>\r\n      \r\n      <!-- Menu Type -->\r\n      <div>\r\n        <cide-ele-select \r\n          label=\"Type*\" \r\n          [options]=\"menuTypeOptions()\" \r\n          formControlName=\"syme_type\"\r\n          placeholder=\"Select type\"\r\n          size=\"sm\"\r\n          (ngModelChange)=\"onMenuTypeChange()\">\r\n        </cide-ele-select>\r\n      </div>\r\n      \r\n      <!-- Path -->\r\n      <div>\r\n        <cide-ele-input \r\n          id=\"quickPath\" \r\n          type=\"text\"\r\n          label=\"Path\" \r\n          formControlName=\"syme_path\"\r\n          placeholder=\"/path/to/route\"\r\n          size=\"sm\">\r\n        </cide-ele-input>\r\n      </div>\r\n      \r\n      <!-- Icon -->\r\n      <div>\r\n        <cide-ele-input \r\n          id=\"quickIcon\" \r\n          type=\"text\"\r\n          label=\"Icon\" \r\n          formControlName=\"syme_icon\"\r\n          placeholder=\"Icon name\"\r\n          size=\"sm\">\r\n        </cide-ele-input>\r\n      </div>\r\n      \r\n      <!-- Empty div for spacing -->\r\n      <div></div>\r\n    </div>\r\n    \r\n    <!-- Second Row -->\r\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\">\r\n      <!-- Description -->\r\n      <div>\r\n        <cide-ele-textarea \r\n          id=\"syme_desc\" \r\n          label=\"Description\" \r\n          formControlName=\"syme_desc\"\r\n          placeholder=\"Menu description\"\r\n          rows=\"2\"\r\n          size=\"sm\">\r\n        </cide-ele-textarea>\r\n      </div>\r\n      \r\n      <!-- Permissions (only show for menu and title types) -->\r\n      @if (quickAddForm.get('syme_type')?.value === 'menu') {\r\n      <div>\r\n          <cide-ele-select \r\n            label=\"Permissions\" \r\n            [options]=\"permissionOptions()\" \r\n            formControlName=\"syme_permissions_id_sygms\"\r\n            placeholder=\"Select permissions for this menu\"\r\n            [multiple]=\"true\"\r\n            size=\"sm\">\r\n          </cide-ele-select>\r\n        </div>\r\n      }\r\n      \r\n      <!-- Link -->\r\n      <div>\r\n        <cide-ele-input \r\n          id=\"quickLink\" \r\n          type=\"text\"\r\n          label=\"Link\" \r\n          formControlName=\"syme_link\"\r\n          placeholder=\"External link\"\r\n          size=\"sm\">\r\n        </cide-ele-input>\r\n      </div>\r\n      \r\n      <!-- Active Status and Action Buttons -->\r\n      <div class=\"tw-flex tw-flex-col tw-justify-end\">\r\n        <div class=\"tw-flex tw-items-center tw-space-x-3\">\r\n          <!-- Active Checkbox -->\r\n          <cide-ele-input \r\n            id=\"quickIsActive\"\r\n            type=\"checkbox\"\r\n            label=\"Active\"\r\n            formControlName=\"syme_isactive\"\r\n            size=\"sm\">\r\n          </cide-ele-input>\r\n          \r\n          <!-- Action Buttons -->\r\n          <button \r\n            cideEleButton \r\n            variant=\"primary\" \r\n            size=\"sm\" \r\n            type=\"submit\"\r\n            [disabled]=\"quickAddForm.invalid\"\r\n            class=\"tw-px-2 tw-py-1 tw-w-20\">\r\n            <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\r\n            {{ isEditMode() ? 'Update' : 'Add' }}\r\n          </button>\r\n          <button \r\n            cideEleButton \r\n            variant=\"outline\" \r\n            size=\"sm\" \r\n            type=\"button\"\r\n            (click)=\"resetQuickAddForm()\"\r\n            class=\"tw-px-2 tw-py-1 tw-w-16\">\r\n            <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">refresh</cide-ele-icon>\r\n            Reset\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    </form>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Main Content Area -->\r\n  <div class=\"tw-table-row\">\r\n    <div class=\"tw-table-cell tw-h-full tw-relative tw-p-0\">\r\n  <!-- Data Grid Component -->\r\n  <div class=\"tw-h-full tw-w-full tw-overflow-auto\">\r\n    \r\n    <cide-ele-data-grid \r\n      [config]=\"gridConfig()\" \r\n      [templateRenderers]=\"getTemplateRenderers()\"\r\n      [actionHandlers]=\"actionHandlers\"\r\n      [dragDropEnabled]=\"true\" \r\n      (gridEvent)=\"onGridEvent($event)\">\r\n    </cide-ele-data-grid>\r\n  </div>\r\n\r\n\r\n    </div>\r\n  </div>\r\n\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\r\n\r\n<!-- Menu Details Renderer Template -->\r\n<ng-template #menuDetailsRendererTemplate let-row=\"row\" let-value=\"value\">\r\n  <div class=\"tw-flex tw-items-center tw-min-w-0\">\r\n    <!-- Menu Icon -->\r\n    <div class=\"tw-flex-shrink-0\">\r\n      <cide-ele-icon \r\n        class=\"tw-text-gray-400\" \r\n        size=\"xs\">\r\n        {{ row.syme_icon || 'folder_open' }}\r\n      </cide-ele-icon>\r\n    </div>\r\n    \r\n    <!-- Menu Details -->\r\n    <div class=\"tw-ml-3 tw-min-w-0 tw-flex-1\">\r\n      <div class=\"tw-text-xs tw-font-medium tw-text-gray-900 tw-truncate\" \r\n           [title]=\"row.syme_title\">\r\n        {{ row.syme_title || 'Untitled' }}\r\n      </div>\r\n      @if (row.syme_desc) {\r\n        <div class=\"tw-text-xs tw-text-gray-500 tw-truncate\" \r\n             [title]=\"row.syme_desc\">\r\n          {{ row.syme_desc }}\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- Menu Type Renderer Template -->\r\n<ng-template #menuTypeRendererTemplate 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]=\"getMenuTypeClass(row.syme_type)\">\r\n    {{ getMenuTypeLabel(row.syme_type) }}\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]=\"getDropdownItems(row)\"\r\n    [config]=\"{ triggerIcon: 'more_vert', triggerSize: 'sm' }\"\r\n    (itemClick)=\"onDropdownItemClick($event, row)\">\r\n  </cide-ele-dropdown>\r\n</ng-template>\r\n\r\n<!-- Permissions Renderer Template -->\r\n<ng-template #permissionsRendererTemplate let-row=\"row\" let-value=\"value\">\r\n  <div class=\"tw-flex tw-flex-wrap tw-gap-1 tw-max-w-full tw-items-center\">\r\n    @if (row.syme_type === 'menu') {\r\n      @if (row.syme_permissions_id_sygms && row.syme_permissions_id_sygms.length > 0) {\r\n        @for (permissionId of row.syme_permissions_id_sygms.slice(0, 3); track permissionId) {\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-bg-blue-100 tw-text-blue-800 tw-whitespace-nowrap tw-h-5\">\r\n            {{ getPermissionById(permissionId)?.sygms_title || getPermissionById(permissionId)?.sygms_code || 'Unknown' }}\r\n          </span>\r\n        }\r\n        @if (row.syme_permissions_id_sygms.length > 3) {\r\n          <span \r\n            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-bg-gray-100 tw-text-gray-600 tw-whitespace-nowrap tw-cursor-help tw-h-5\"\r\n            [title]=\"getAllPermissionNames(row.syme_permissions_id_sygms)\">\r\n            +{{ row.syme_permissions_id_sygms.length - 3 }} more\r\n          </span>\r\n        }\r\n      } @else {\r\n        <span class=\"tw-text-xs tw-text-gray-500 tw-h-5 tw-flex tw-items-center\">No permissions</span>\r\n      }\r\n    } @else {\r\n      <!-- Show N/A for module, section, and title types -->\r\n      <span class=\"tw-text-xs tw-text-gray-400 tw-h-5 tw-flex tw-items-center\">N/A</span>\r\n    }\r\n  </div>\r\n</ng-template>\r\n\r\n" }]
+                    ], template: "<!-- Menu List Container -->\r\n<div class=\"tw-table tw-w-full tw-h-full\">\r\n\r\n  <!-- Quick Add Form Section -->\r\n  <div class=\"tw-table-row tw-h-0\">\r\n    <div class=\"tw-table-cell tw-px-6 tw-py-4 tw-border-b tw-border-gray-200 tw-bg-white\">\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 Menu Item' : 'Quick Add Menu Item' }}</h6>\r\n      </div>\r\n      @if (selectedParentItem()) {\r\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\">\r\n          <cide-ele-icon class=\"tw-text-blue-600 tw-w-4 tw-h-4\">account_tree</cide-ele-icon>\r\n          <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\n            <span class=\"tw-text-sm tw-text-blue-600 tw-font-medium\">{{ isEditMode() ? 'Parent:' : 'Creating child under:' }}</span>\r\n            <span class=\"tw-text-sm tw-text-blue-800 tw-font-semibold\">{{ selectedParentItem()?.syme_title }}</span>\r\n          </div>\r\n          <button \r\n            cideEleButton \r\n            variant=\"ghost\" \r\n            size=\"xs\" \r\n            type=\"button\" \r\n            (click)=\"clearSelectedParent()\" \r\n            class=\"tw-text-blue-400 hover:tw-text-blue-600\">\r\n            <svg class=\"tw-w-4 tw-h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\"/>\r\n            </svg>\r\n          </button>\r\n        </div>\r\n      }\r\n    </div>\r\n    \r\n    <form [formGroup]=\"quickAddForm\" (ngSubmit)=\"quickAddMenuItem()\">\r\n    <!-- First Row -->\r\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\">\r\n      <!-- Menu Title -->\r\n      <div>\r\n        <cide-ele-input \r\n          id=\"syme_title\" \r\n          label=\"Title\" \r\n          formControlName=\"syme_title\"\r\n          size=\"sm\">\r\n        </cide-ele-input>\r\n      </div>\r\n      \r\n      <!-- Menu Type -->\r\n      <div>\r\n        <cide-ele-select \r\n          label=\"Type*\" \r\n          [options]=\"menuTypeOptions()\" \r\n          formControlName=\"syme_type\"\r\n          placeholder=\"Select type\"\r\n          size=\"sm\"\r\n          (ngModelChange)=\"onMenuTypeChange()\">\r\n        </cide-ele-select>\r\n      </div>\r\n      \r\n      <!-- Path -->\r\n      <div>\r\n        <cide-ele-input \r\n          id=\"quickPath\" \r\n          type=\"text\"\r\n          label=\"Path\" \r\n          formControlName=\"syme_path\"\r\n          placeholder=\"/path/to/route\"\r\n          size=\"sm\">\r\n        </cide-ele-input>\r\n      </div>\r\n      \r\n      <!-- Icon -->\r\n      <div>\r\n        <cide-ele-input \r\n          id=\"quickIcon\" \r\n          type=\"text\"\r\n          label=\"Icon\" \r\n          formControlName=\"syme_icon\"\r\n          placeholder=\"Icon name\"\r\n          size=\"sm\">\r\n        </cide-ele-input>\r\n      </div>\r\n      \r\n      <!-- Empty div for spacing -->\r\n      <div></div>\r\n    </div>\r\n    \r\n    <!-- Second Row -->\r\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\">\r\n      <!-- Description -->\r\n      <div>\r\n        <cide-ele-textarea \r\n          id=\"syme_desc\" \r\n          label=\"Description\" \r\n          formControlName=\"syme_desc\"\r\n          placeholder=\"Menu description\"\r\n          rows=\"2\"\r\n          size=\"sm\">\r\n        </cide-ele-textarea>\r\n      </div>\r\n      \r\n      <!-- Permissions (only show for menu and title types) -->\r\n      @if (quickAddForm.get('syme_type')?.value === 'menu') {\r\n      <div>\r\n          <cide-ele-select \r\n            label=\"Permissions\" \r\n            [options]=\"permissionOptions()\" \r\n            formControlName=\"syme_permissions_id_sygms\"\r\n            placeholder=\"Select permissions for this menu\"\r\n            [multiple]=\"true\"\r\n            size=\"sm\">\r\n          </cide-ele-select>\r\n        </div>\r\n      }\r\n      \r\n      <!-- Pages (multiselect) -->\r\n      <div>\r\n        <cide-ele-select \r\n          label=\"Pages\" \r\n          [options]=\"pageOptions()\" \r\n          formControlName=\"syme_pages_id_sypg\"\r\n          placeholder=\"Select pages to connect\"\r\n          [multiple]=\"true\"\r\n          [loading]=\"pagesLoading()\"\r\n          size=\"sm\">\r\n        </cide-ele-select>\r\n      </div>\r\n      \r\n      <!-- Link -->\r\n      <div>\r\n        <cide-ele-input \r\n          id=\"quickLink\" \r\n          type=\"text\"\r\n          label=\"Link\" \r\n          formControlName=\"syme_link\"\r\n          placeholder=\"External link\"\r\n          size=\"sm\">\r\n        </cide-ele-input>\r\n      </div>\r\n      \r\n      <!-- Active Status and Action Buttons -->\r\n      <div class=\"tw-flex tw-flex-col tw-justify-end\">\r\n        <div class=\"tw-flex tw-items-center tw-space-x-3\">\r\n          <!-- Active Checkbox -->\r\n          <cide-ele-input \r\n            id=\"quickIsActive\"\r\n            type=\"checkbox\"\r\n            label=\"Active\"\r\n            formControlName=\"syme_isactive\"\r\n            size=\"sm\">\r\n          </cide-ele-input>\r\n          \r\n          <!-- Action Buttons -->\r\n          <button \r\n            cideEleButton \r\n            variant=\"primary\" \r\n            size=\"sm\" \r\n            type=\"submit\"\r\n            [disabled]=\"quickAddForm.invalid\"\r\n            class=\"tw-px-2 tw-py-1 tw-w-20\">\r\n            <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\r\n            {{ isEditMode() ? 'Update' : 'Add' }}\r\n          </button>\r\n          <button \r\n            cideEleButton \r\n            variant=\"outline\" \r\n            size=\"sm\" \r\n            type=\"button\"\r\n            (click)=\"resetQuickAddForm()\"\r\n            class=\"tw-px-2 tw-py-1 tw-w-16\">\r\n            <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">refresh</cide-ele-icon>\r\n            Reset\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    </form>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Main Content Area -->\r\n  <div class=\"tw-table-row\">\r\n    <div class=\"tw-table-cell tw-h-full tw-relative tw-p-0\">\r\n  <!-- Data Grid Component -->\r\n  <div class=\"tw-h-full tw-w-full tw-overflow-auto\">\r\n    \r\n    <cide-ele-data-grid \r\n      [config]=\"gridConfig()\" \r\n      [templateRenderers]=\"getTemplateRenderers()\"\r\n      [actionHandlers]=\"actionHandlers\"\r\n      [dragDropEnabled]=\"true\" \r\n      (gridEvent)=\"onGridEvent($event)\">\r\n    </cide-ele-data-grid>\r\n  </div>\r\n\r\n\r\n    </div>\r\n  </div>\r\n\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\r\n\r\n<!-- Menu Details Renderer Template -->\r\n<ng-template #menuDetailsRendererTemplate let-row=\"row\" let-value=\"value\">\r\n  <div class=\"tw-flex tw-items-center tw-min-w-0\">\r\n    <!-- Menu Icon -->\r\n    <div class=\"tw-flex-shrink-0\">\r\n      <cide-ele-icon \r\n        class=\"tw-text-gray-400\" \r\n        size=\"xs\">\r\n        {{ row.syme_icon || 'folder_open' }}\r\n      </cide-ele-icon>\r\n    </div>\r\n    \r\n    <!-- Menu Details -->\r\n    <div class=\"tw-ml-3 tw-min-w-0 tw-flex-1\">\r\n      <div class=\"tw-text-xs tw-font-medium tw-text-gray-900 tw-truncate\" \r\n           [title]=\"row.syme_title\">\r\n        {{ row.syme_title || 'Untitled' }}\r\n      </div>\r\n      @if (row.syme_desc) {\r\n        <div class=\"tw-text-xs tw-text-gray-500 tw-truncate\" \r\n             [title]=\"row.syme_desc\">\r\n          {{ row.syme_desc }}\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- Menu Type Renderer Template -->\r\n<ng-template #menuTypeRendererTemplate 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]=\"getMenuTypeClass(row.syme_type)\">\r\n    {{ getMenuTypeLabel(row.syme_type) }}\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]=\"getDropdownItems(row)\"\r\n    [config]=\"{ triggerIcon: 'more_vert', triggerSize: 'sm' }\"\r\n    (itemClick)=\"onDropdownItemClick($event, row)\">\r\n  </cide-ele-dropdown>\r\n</ng-template>\r\n\r\n<!-- Permissions Renderer Template -->\r\n<ng-template #permissionsRendererTemplate let-row=\"row\" let-value=\"value\">\r\n  <div class=\"tw-flex tw-flex-wrap tw-gap-1 tw-max-w-full tw-items-center\">\r\n    @if (row.syme_type === 'menu') {\r\n      @if (row.syme_permissions_id_sygms && row.syme_permissions_id_sygms.length > 0) {\r\n        @for (permissionId of row.syme_permissions_id_sygms.slice(0, 3); track permissionId) {\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-bg-blue-100 tw-text-blue-800 tw-whitespace-nowrap tw-h-5\">\r\n            {{ getPermissionById(permissionId)?.sygms_title || getPermissionById(permissionId)?.sygms_code || 'Unknown' }}\r\n          </span>\r\n        }\r\n        @if (row.syme_permissions_id_sygms.length > 3) {\r\n          <span \r\n            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-bg-gray-100 tw-text-gray-600 tw-whitespace-nowrap tw-cursor-help tw-h-5\"\r\n            [title]=\"getAllPermissionNames(row.syme_permissions_id_sygms)\">\r\n            +{{ row.syme_permissions_id_sygms.length - 3 }} more\r\n          </span>\r\n        }\r\n      } @else {\r\n        <span class=\"tw-text-xs tw-text-gray-500 tw-h-5 tw-flex tw-items-center\">No permissions</span>\r\n      }\r\n    } @else {\r\n      <!-- Show N/A for module, section, and title types -->\r\n      <span class=\"tw-text-xs tw-text-gray-400 tw-h-5 tw-flex tw-items-center\">N/A</span>\r\n    }\r\n  </div>\r\n</ng-template>\r\n\r\n" }]
         }], ctorParameters: () => [] });
 
 var menuList_component = /*#__PURE__*/Object.freeze({
@@ -3136,7 +3259,7 @@ class CideCoreDepartmentListComponent {
         return item._id || '';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCoreDepartmentListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideCoreDepartmentListComponent, isStandalone: true, selector: "cide-core-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 with Shared Wrapper -->\r\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'core_department_list' }\">\r\n  <div class=\"tw-table tw-w-full tw-h-full\">\r\n\r\n<!-- Global Notifications -->\r\n<cide-ele-global-notifications></cide-ele-global-notifications>\r\n\r\n  <!-- Quick Add Form Section -->\r\n  <div class=\"tw-table-row tw-h-0\">\r\n    <div class=\"tw-table-cell tw-px-6 tw-py-4 tw-border-b tw-border-gray-200 tw-bg-white\">\r\n    <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-0\">\r\n      <div class=\"tw-flex tw-items-center tw-space-x-3 tw-mb-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 Department' : 'Quick Add Department' }}</h6>\r\n      </div>\r\n      @if (selectedParentDepartment()) {\r\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\">\r\n          <cide-ele-icon class=\"tw-text-blue-600 tw-w-4 tw-h-4\">account_tree</cide-ele-icon>\r\n          <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\n            <span class=\"tw-text-sm tw-text-blue-600 tw-font-medium\">{{ isEditMode() ? 'Parent:' : 'Creating child under:' }}</span>\r\n            <span class=\"tw-text-sm tw-text-blue-800 tw-font-semibold\">{{ selectedParentDepartment()?.sydept_name }}</span>\r\n          </div>\r\n          <button \r\n            cideEleButton \r\n            variant=\"ghost\" \r\n            size=\"xs\" \r\n            type=\"button\" \r\n            (click)=\"clearSelectedParent()\" \r\n            class=\"tw-text-blue-400 hover:tw-text-blue-600\">\r\n            <svg class=\"tw-w-4 tw-h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\"/>\r\n            </svg>\r\n          </button>\r\n        </div>\r\n      }\r\n    </div>\r\n    \r\n    <form [formGroup]=\"quickAddForm\" (ngSubmit)=\"quickAddDepartment()\">\r\n    <!-- First Row -->\r\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\">\r\n      <!-- Department Code -->\r\n      <div>\r\n        <cide-ele-input \r\n          id=\"sydept_code\" \r\n          label=\"Code*\" \r\n          formControlName=\"sydept_code\"\r\n          placeholder=\"DEPT001\"\r\n          size=\"sm\">\r\n        </cide-ele-input>\r\n      </div>\r\n      \r\n      <!-- Department Name -->\r\n      <div>\r\n        <cide-ele-input \r\n          id=\"sydept_name\" \r\n          label=\"Name*\" \r\n          formControlName=\"sydept_name\"\r\n          placeholder=\"Department name\"\r\n          size=\"sm\">\r\n        </cide-ele-input>\r\n      </div>\r\n      \r\n\r\n      \r\n      <!-- Active Status -->\r\n      <div class=\"tw-flex tw-flex-col tw-justify-end\">\r\n        <cide-ele-input \r\n          id=\"sydept_isactive\"\r\n          type=\"checkbox\"\r\n          label=\"Active\"\r\n          formControlName=\"sydept_isactive\"\r\n          size=\"sm\">\r\n        </cide-ele-input>\r\n      </div>\r\n    </div>\r\n    \r\n    <!-- Second Row -->\r\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\">\r\n      <!-- Description -->\r\n      <div>\r\n        <cide-ele-textarea \r\n          id=\"sydept_description\" \r\n          label=\"Description\" \r\n          formControlName=\"sydept_description\"\r\n          placeholder=\"Department description\"\r\n          rows=\"2\"\r\n          size=\"sm\">\r\n        </cide-ele-textarea>\r\n      </div>\r\n      \r\n\r\n      \r\n      <!-- Action Buttons -->\r\n      <div class=\"tw-flex tw-flex-col tw-justify-end\">\r\n        <div class=\"tw-flex tw-space-x-2\">\r\n          <button \r\n            cideEleButton \r\n            variant=\"primary\" \r\n            size=\"sm\" \r\n            type=\"submit\"\r\n            [disabled]=\"quickAddForm.invalid\"\r\n            class=\"tw-px-2 tw-py-1 tw-w-20\">\r\n            <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\r\n            {{ isEditMode() ? 'Update' : 'Add' }}\r\n          </button>\r\n          <button \r\n            cideEleButton \r\n            variant=\"outline\" \r\n            size=\"sm\" \r\n            type=\"button\"\r\n            (click)=\"resetQuickAddForm()\"\r\n            class=\"tw-px-2 tw-py-1 tw-w-16\">\r\n            <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">refresh</cide-ele-icon>\r\n            Reset\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    </form>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Header Section with Filters -->\r\n  <div class=\"tw-table-row tw-h-0\">\r\n    <div class=\"tw-table-cell tw-px-6 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\r\n    <div\r\n      class=\"tw-flex tw-flex-col sm:tw-flex-row tw-justify-between tw-items-start sm:tw-items-center tw-space-y-3 sm:tw-space-y-0\">\r\n\r\n      <!-- Actions -->\r\n      <div\r\n        class=\"tw-flex tw-flex-col sm:tw-flex-row tw-items-start sm:tw-items-center tw-space-y-3 sm:tw-space-y-0 sm:tw-space-x-3\">\r\n        <!-- Search functionality is handled by the data grid -->\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  </div>\r\n\r\n  <!-- Main Content Area -->\r\n  <div class=\"tw-table-row\">\r\n    <div class=\"tw-table-cell tw-h-full tw-relative\">\r\n  \r\n  <!-- Data Grid Component -->\r\n  <div class=\"tw-h-full tw-overflow-auto\">\r\n    \r\n    <cide-ele-data-grid \r\n      [config]=\"gridConfig()\" \r\n      [templateRenderers]=\"getTemplateRenderers()\"\r\n      [actionHandlers]=\"actionHandlers\"\r\n      [serverSidePagination]=\"true\" \r\n      [totalServerItems]=\"totalItems()\" \r\n      [currentServerPage]=\"currentPage()\"\r\n      [currentServerPageSize]=\"pageSize()\" \r\n      (gridEvent)=\"onGridEvent($event)\">\r\n    </cide-ele-data-grid>\r\n  </div>\r\n\r\n    </div>\r\n  </div>\r\n\r\n</div>\r\n\r\n<!-- Department Details Renderer Template -->\r\n<ng-template #departmentDetailsRendererTemplate let-row=\"row\" let-value=\"value\">\r\n  <div class=\"tw-flex tw-items-center tw-min-w-0\">\r\n    <!-- Department Icon -->\r\n    <div class=\"tw-flex-shrink-0\">\r\n      <cide-ele-icon \r\n        class=\"tw-text-gray-400\" \r\n        size=\"xs\">\r\n        business\r\n      </cide-ele-icon>\r\n    </div>\r\n    \r\n    <!-- Department 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.sydept_name\">\r\n        {{ row.sydept_name || 'Untitled' }}\r\n      </div>\r\n      @if (row.sydept_description) {\r\n        <div class=\"tw-text-xs tw-text-gray-500 tw-truncate\" \r\n             [title]=\"row.sydept_description\">\r\n          {{ row.sydept_description }}\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- Department Status Renderer Template -->\r\n<ng-template #departmentStatusRendererTemplate 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]=\"getStatusClass(row.sydept_isactive)\">\r\n    {{ getStatusDisplay(row.sydept_isactive) }}\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]=\"getDropdownItems(row)\"\r\n    [config]=\"{ triggerIcon: 'more_vert', triggerSize: 'sm' }\"\r\n    (itemClick)=\"onDropdownItemClick($event, row)\">\r\n  </cide-ele-dropdown>\r\n</ng-template>\r\n</cide-lyt-shared-wrapper> ", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: CideEleDataGridComponent, selector: "cide-ele-data-grid", inputs: ["config", "templateRenderers", "customFormatters", "actionHandlers", "serverSidePagination", "totalServerItems", "currentServerPage", "currentServerPageSize", "dragDropEnabled"], outputs: ["gridEvent"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: 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" }, { kind: "component", type: CideLytSharedWrapperComponent, selector: "cide-lyt-shared-wrapper", inputs: ["shared_wrapper_setup_param", "breadcrumb_data"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideCoreDepartmentListComponent, isStandalone: true, selector: "cide-core-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 with Shared Wrapper -->\r\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'core_department_list' }\">\r\n  <div class=\"tw-table tw-w-full tw-h-full\">\r\n\r\n<!-- Global Notifications -->\r\n<cide-ele-global-notifications></cide-ele-global-notifications>\r\n\r\n  <!-- Quick Add Form Section -->\r\n  <div class=\"tw-table-row tw-h-0\">\r\n    <div class=\"tw-table-cell tw-px-6 tw-py-4 tw-border-b tw-border-gray-200 tw-bg-white\">\r\n    <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-0\">\r\n      <div class=\"tw-flex tw-items-center tw-space-x-3 tw-mb-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 Department' : 'Quick Add Department' }}</h6>\r\n      </div>\r\n      @if (selectedParentDepartment()) {\r\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\">\r\n          <cide-ele-icon class=\"tw-text-blue-600 tw-w-4 tw-h-4\">account_tree</cide-ele-icon>\r\n          <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\n            <span class=\"tw-text-sm tw-text-blue-600 tw-font-medium\">{{ isEditMode() ? 'Parent:' : 'Creating child under:' }}</span>\r\n            <span class=\"tw-text-sm tw-text-blue-800 tw-font-semibold\">{{ selectedParentDepartment()?.sydept_name }}</span>\r\n          </div>\r\n          <button \r\n            cideEleButton \r\n            variant=\"ghost\" \r\n            size=\"xs\" \r\n            type=\"button\" \r\n            (click)=\"clearSelectedParent()\" \r\n            class=\"tw-text-blue-400 hover:tw-text-blue-600\">\r\n            <svg class=\"tw-w-4 tw-h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\"/>\r\n            </svg>\r\n          </button>\r\n        </div>\r\n      }\r\n    </div>\r\n    \r\n    <form [formGroup]=\"quickAddForm\" (ngSubmit)=\"quickAddDepartment()\">\r\n    <!-- First Row -->\r\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\">\r\n      <!-- Department Code -->\r\n      <div>\r\n        <cide-ele-input \r\n          id=\"sydept_code\" \r\n          label=\"Code*\" \r\n          formControlName=\"sydept_code\"\r\n          placeholder=\"DEPT001\"\r\n          size=\"sm\">\r\n        </cide-ele-input>\r\n      </div>\r\n      \r\n      <!-- Department Name -->\r\n      <div>\r\n        <cide-ele-input \r\n          id=\"sydept_name\" \r\n          label=\"Name*\" \r\n          formControlName=\"sydept_name\"\r\n          placeholder=\"Department name\"\r\n          size=\"sm\">\r\n        </cide-ele-input>\r\n      </div>\r\n      \r\n\r\n      \r\n      <!-- Active Status -->\r\n      <div class=\"tw-flex tw-flex-col tw-justify-end\">\r\n        <cide-ele-input \r\n          id=\"sydept_isactive\"\r\n          type=\"checkbox\"\r\n          label=\"Active\"\r\n          formControlName=\"sydept_isactive\"\r\n          size=\"sm\">\r\n        </cide-ele-input>\r\n      </div>\r\n    </div>\r\n    \r\n    <!-- Second Row -->\r\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\">\r\n      <!-- Description -->\r\n      <div>\r\n        <cide-ele-textarea \r\n          id=\"sydept_description\" \r\n          label=\"Description\" \r\n          formControlName=\"sydept_description\"\r\n          placeholder=\"Department description\"\r\n          rows=\"2\"\r\n          size=\"sm\">\r\n        </cide-ele-textarea>\r\n      </div>\r\n      \r\n\r\n      \r\n      <!-- Action Buttons -->\r\n      <div class=\"tw-flex tw-flex-col tw-justify-end\">\r\n        <div class=\"tw-flex tw-space-x-2\">\r\n          <button \r\n            cideEleButton \r\n            variant=\"primary\" \r\n            size=\"sm\" \r\n            type=\"submit\"\r\n            [disabled]=\"quickAddForm.invalid\"\r\n            class=\"tw-px-2 tw-py-1 tw-w-20\">\r\n            <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\r\n            {{ isEditMode() ? 'Update' : 'Add' }}\r\n          </button>\r\n          <button \r\n            cideEleButton \r\n            variant=\"outline\" \r\n            size=\"sm\" \r\n            type=\"button\"\r\n            (click)=\"resetQuickAddForm()\"\r\n            class=\"tw-px-2 tw-py-1 tw-w-16\">\r\n            <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">refresh</cide-ele-icon>\r\n            Reset\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    </form>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Header Section with Filters -->\r\n  <div class=\"tw-table-row tw-h-0\">\r\n    <div class=\"tw-table-cell tw-px-6 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\r\n    <div\r\n      class=\"tw-flex tw-flex-col sm:tw-flex-row tw-justify-between tw-items-start sm:tw-items-center tw-space-y-3 sm:tw-space-y-0\">\r\n\r\n      <!-- Actions -->\r\n      <div\r\n        class=\"tw-flex tw-flex-col sm:tw-flex-row tw-items-start sm:tw-items-center tw-space-y-3 sm:tw-space-y-0 sm:tw-space-x-3\">\r\n        <!-- Search functionality is handled by the data grid -->\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  </div>\r\n\r\n  <!-- Main Content Area -->\r\n  <div class=\"tw-table-row\">\r\n    <div class=\"tw-table-cell tw-h-full tw-relative\">\r\n  \r\n  <!-- Data Grid Component -->\r\n  <div class=\"tw-h-full tw-overflow-auto\">\r\n    \r\n    <cide-ele-data-grid \r\n      [config]=\"gridConfig()\" \r\n      [templateRenderers]=\"getTemplateRenderers()\"\r\n      [actionHandlers]=\"actionHandlers\"\r\n      [serverSidePagination]=\"true\" \r\n      [totalServerItems]=\"totalItems()\" \r\n      [currentServerPage]=\"currentPage()\"\r\n      [currentServerPageSize]=\"pageSize()\" \r\n      (gridEvent)=\"onGridEvent($event)\">\r\n    </cide-ele-data-grid>\r\n  </div>\r\n\r\n    </div>\r\n  </div>\r\n\r\n</div>\r\n\r\n<!-- Department Details Renderer Template -->\r\n<ng-template #departmentDetailsRendererTemplate let-row=\"row\" let-value=\"value\">\r\n  <div class=\"tw-flex tw-items-center tw-min-w-0\">\r\n    <!-- Department Icon -->\r\n    <div class=\"tw-flex-shrink-0\">\r\n      <cide-ele-icon \r\n        class=\"tw-text-gray-400\" \r\n        size=\"xs\">\r\n        business\r\n      </cide-ele-icon>\r\n    </div>\r\n    \r\n    <!-- Department 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.sydept_name\">\r\n        {{ row.sydept_name || 'Untitled' }}\r\n      </div>\r\n      @if (row.sydept_description) {\r\n        <div class=\"tw-text-xs tw-text-gray-500 tw-truncate\" \r\n             [title]=\"row.sydept_description\">\r\n          {{ row.sydept_description }}\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- Department Status Renderer Template -->\r\n<ng-template #departmentStatusRendererTemplate 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]=\"getStatusClass(row.sydept_isactive)\">\r\n    {{ getStatusDisplay(row.sydept_isactive) }}\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]=\"getDropdownItems(row)\"\r\n    [config]=\"{ triggerIcon: 'more_vert', triggerSize: 'sm' }\"\r\n    (itemClick)=\"onDropdownItemClick($event, row)\">\r\n  </cide-ele-dropdown>\r\n</ng-template>\r\n</cide-lyt-shared-wrapper> ", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: CideEleDataGridComponent, selector: "cide-ele-data-grid", inputs: ["config", "templateRenderers", "customFormatters", "actionHandlers", "serverSidePagination", "totalServerItems", "currentServerPage", "currentServerPageSize", "dragDropEnabled"], outputs: ["gridEvent"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: 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", "step", "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" }, { kind: "component", type: CideLytSharedWrapperComponent, selector: "cide-lyt-shared-wrapper", inputs: ["shared_wrapper_setup_param", "breadcrumb_data"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCoreDepartmentListComponent, decorators: [{
             type: Component,
@@ -4899,7 +5022,7 @@ class CideCoreDesignationListComponent {
         return item._id || '';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCoreDesignationListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideCoreDesignationListComponent, isStandalone: true, selector: "cide-core-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 with Shared Wrapper -->\r\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'core_designation_list' }\">\r\n  <div class=\"tw-table tw-w-full tw-h-full\">\r\n\r\n    <!-- Quick Add Form Section -->\r\n    <div class=\"tw-table-row tw-h-0\">\r\n      <div class=\"tw-table-cell tw-px-6 tw-py-4 tw-border-b tw-border-gray-200 tw-bg-white\">\r\n        <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-0\">\r\n          <div class=\"tw-flex tw-items-center tw-space-x-3 tw-mb-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 Designation' : 'Quick Add Designation' }}</h6>\r\n          </div>\r\n          @if (selectedParentDesignation()) {\r\n          <div\r\n            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\">\r\n            <cide-ele-icon class=\"tw-text-blue-600 tw-w-4 tw-h-4\">account_tree</cide-ele-icon>\r\n            <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\n              <span class=\"tw-text-sm tw-text-blue-600 tw-font-medium\">{{ isEditMode() ? 'Parent:' : 'Creating child under:' }}</span>\r\n              <span class=\"tw-text-sm tw-text-blue-800 tw-font-semibold\">{{ selectedParentDesignation()?.sydsg_name\r\n                }}</span>\r\n            </div>\r\n            <button cideEleButton variant=\"ghost\" size=\"xs\" type=\"button\" (click)=\"clearSelectedParent()\"\r\n              class=\"tw-text-blue-400 hover:tw-text-blue-600\">\r\n              <svg class=\"tw-w-4 tw-h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\" />\r\n              </svg>\r\n            </button>\r\n          </div>\r\n          }\r\n          @if (selectedParentDepartment()) {\r\n          <div\r\n            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\">\r\n            <cide-ele-icon class=\"tw-text-green-600 tw-w-4 tw-h-4\">business</cide-ele-icon>\r\n            <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\n              <span class=\"tw-text-sm tw-text-green-600 tw-font-medium\">{{ isEditMode() ? 'Department:' : 'Department:'\r\n                }}</span>\r\n              <span class=\"tw-text-sm tw-text-green-800 tw-font-semibold\">{{ selectedParentDepartment()?.sydept_name\r\n                }}</span>\r\n            </div>\r\n            <button cideEleButton variant=\"ghost\" size=\"xs\" type=\"button\" (click)=\"clearSelectedParentDepartment()\"\r\n              class=\"tw-text-green-400 hover:tw-text-green-600\">\r\n              <svg class=\"tw-w-4 tw-h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\" />\r\n              </svg>\r\n            </button>\r\n          </div>\r\n          }\r\n        </div>\r\n\r\n        <form [formGroup]=\"quickAddForm\" (ngSubmit)=\"quickAddDesignation()\">\r\n          <!-- First Row -->\r\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\">\r\n            <!-- Designation Name -->\r\n            <div>\r\n              <cide-ele-input id=\"sydsg_name\" label=\"Name*\" formControlName=\"sydsg_name\" placeholder=\"Designation name\"\r\n                size=\"sm\">\r\n              </cide-ele-input>\r\n            </div>\r\n\r\n            <!-- Designation Code -->\r\n            <div>\r\n              <cide-ele-input id=\"sydsg_code\" label=\"Code*\" formControlName=\"sydsg_code\" placeholder=\"DESG001\"\r\n                size=\"sm\">\r\n              </cide-ele-input>\r\n            </div>\r\n\r\n            <!-- Grade Level -->\r\n            <div>\r\n              <cide-ele-select id=\"sydsg_grade_level_id_sydsgl\" label=\"Grade Level*\" [options]=\"gradeLevelOptions()\"\r\n                formControlName=\"sydsg_grade_level_id_sydsgl\" placeholder=\"Select grade level\" size=\"sm\">\r\n              </cide-ele-select>\r\n            </div>\r\n\r\n            <!-- Department -->\r\n            <div>\r\n              <cide-ele-select id=\"sydsg_department_id_sydpt\" label=\"Department*\" [options]=\"departmentOptions()\"\r\n                formControlName=\"sydsg_department_id_sydpt\" placeholder=\"Select department\" size=\"sm\">\r\n              </cide-ele-select>\r\n            </div>\r\n\r\n            <!-- Active Status -->\r\n            <div class=\"tw-flex tw-flex-col tw-justify-end\">\r\n              <cide-ele-input id=\"sydsg_isactive\" type=\"checkbox\" label=\"Active\" formControlName=\"sydsg_isactive\"\r\n                size=\"sm\">\r\n              </cide-ele-input>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Second Row -->\r\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\">\r\n            <!-- Description -->\r\n            <div>\r\n              <cide-ele-textarea id=\"sydsg_description\" label=\"Description\" formControlName=\"sydsg_description\"\r\n                placeholder=\"Designation description\" rows=\"2\" size=\"sm\">\r\n              </cide-ele-textarea>\r\n            </div>\r\n\r\n            <!-- Entity ID (Hidden) -->\r\n            <div class=\"tw-hidden\">\r\n              <cide-ele-input id=\"desg_entity_id_syen\" label=\"Entity ID*\" formControlName=\"desg_entity_id_syen\"\r\n                placeholder=\"Entity ID\" size=\"sm\">\r\n              </cide-ele-input>\r\n            </div>\r\n\r\n            <!-- Action Buttons -->\r\n            <div class=\"tw-flex tw-flex-col tw-justify-end\">\r\n              <div class=\"tw-flex tw-space-x-2\">\r\n                <button cideEleButton variant=\"primary\" size=\"sm\" type=\"submit\" [disabled]=\"quickAddForm.invalid\"\r\n                  class=\"tw-px-2 tw-py-1 tw-w-20\">\r\n                  <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">{{ isEditMode() ? 'edit' : 'add'\r\n                    }}</cide-ele-icon>\r\n                  {{ isEditMode() ? 'Update' : 'Add' }}\r\n                </button>\r\n                <button cideEleButton variant=\"outline\" size=\"sm\" type=\"button\" (click)=\"resetQuickAddForm()\"\r\n                  class=\"tw-px-2 tw-py-1 tw-w-16\">\r\n                  <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">refresh</cide-ele-icon>\r\n                  Reset\r\n                </button>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </form>\r\n      </div>\r\n    </div>\r\n\r\n\r\n\r\n    <!-- Header Section with Filters -->\r\n    <div class=\"tw-table-row tw-h-0\">\r\n      <div class=\"tw-table-cell tw-px-6 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\r\n        <div\r\n          class=\"tw-flex tw-flex-col sm:tw-flex-row tw-justify-between tw-items-start sm:tw-items-center tw-space-y-3 sm:tw-space-y-0\">\r\n\r\n          <!-- Actions -->\r\n          <div\r\n            class=\"tw-flex tw-flex-col sm:tw-flex-row tw-items-start sm:tw-items-center tw-space-y-3 sm:tw-space-y-0 sm:tw-space-x-3\">\r\n            <!-- Search functionality is handled by the data grid -->\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\"\r\n              class=\"tw-text-red-400 tw-w-5 tw-h-5 tw-mt-0.5 tw-flex-shrink-0\"></cide-ele-icon>\r\n            <div class=\"tw-ml-3\">\r\n              <h3 class=\"tw-text-sm tw-font-medium tw-text-red-800 tw-m-0\">Error</h3>\r\n              <p class=\"tw-text-sm tw-text-red-700 tw-mt-1 tw-m-0\">{{ error() }}</p>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        }\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Main Content Area -->\r\n    <div class=\"tw-table-row\">\r\n      <div class=\"tw-table-cell tw-h-full tw-relative\">\r\n\r\n        <!-- Data Grid Component -->\r\n        <div class=\"tw-h-full tw-overflow-auto\">\r\n\r\n          <cide-ele-data-grid [config]=\"gridConfig()\" [templateRenderers]=\"getTemplateRenderers()\"\r\n            [actionHandlers]=\"actionHandlers\" [serverSidePagination]=\"true\" [totalServerItems]=\"totalItems()\"\r\n            [currentServerPage]=\"currentPage()\" [currentServerPageSize]=\"pageSize()\" (gridEvent)=\"onGridEvent($event)\">\r\n          </cide-ele-data-grid>\r\n        </div>\r\n\r\n      </div>\r\n    </div>\r\n\r\n  </div>\r\n\r\n  <!-- Designation Details Renderer Template -->\r\n  <ng-template #designationDetailsRendererTemplate let-row=\"row\" let-value=\"value\">\r\n    <div class=\"tw-flex tw-items-center tw-min-w-0\">\r\n      <!-- Dynamic Icon based on type -->\r\n      <div class=\"tw-flex-shrink-0\">\r\n        <cide-ele-icon [class]=\"row.type === 'department' ? 'tw-text-green-500' : 'tw-text-blue-500'\" size=\"xs\">\r\n          {{ row.type === 'department' ? 'business' : 'work' }}\r\n        </cide-ele-icon>\r\n      </div>\r\n\r\n      <!-- Details -->\r\n      <div class=\"tw-ml-3 tw-min-w-0 tw-flex-1\">\r\n        <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\n          <div class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-truncate\" [title]=\"row.name\">\r\n            {{ row.name || 'Untitled' }}\r\n          </div>\r\n          @if (row.type === 'department') {\r\n          <span\r\n            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\">\r\n            Department\r\n          </span>\r\n          }\r\n        </div>\r\n        @if (row.description) {\r\n        <div class=\"tw-text-xs tw-text-gray-500 tw-truncate\" [title]=\"row.description\">\r\n          {{ row.description }}\r\n        </div>\r\n        }\r\n      </div>\r\n    </div>\r\n  </ng-template>\r\n\r\n  <!-- Designation Status Renderer Template -->\r\n  <ng-template #designationStatusRendererTemplate let-row=\"row\" let-value=\"value\">\r\n    <span\r\n      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]=\"getStatusClass(row.status)\">\r\n      {{ getStatusDisplay(row.status) }}\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 [items]=\"getDropdownItems(row)\" [config]=\"{ triggerIcon: 'more_vert', triggerSize: 'sm' }\"\r\n      (itemClick)=\"onDropdownItemClick($event, row)\">\r\n    </cide-ele-dropdown>\r\n  </ng-template>\r\n</cide-lyt-shared-wrapper>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: CideEleDataGridComponent, selector: "cide-ele-data-grid", inputs: ["config", "templateRenderers", "customFormatters", "actionHandlers", "serverSidePagination", "totalServerItems", "currentServerPage", "currentServerPageSize", "dragDropEnabled"], outputs: ["gridEvent"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: 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", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput", "options", "multiple", "searchable", "showSearchInput", "loading", "valueKey", "labelKey", "treeView"], 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: CideLytSharedWrapperComponent, selector: "cide-lyt-shared-wrapper", inputs: ["shared_wrapper_setup_param", "breadcrumb_data"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideCoreDesignationListComponent, isStandalone: true, selector: "cide-core-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 with Shared Wrapper -->\r\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'core_designation_list' }\">\r\n  <div class=\"tw-table tw-w-full tw-h-full\">\r\n\r\n    <!-- Quick Add Form Section -->\r\n    <div class=\"tw-table-row tw-h-0\">\r\n      <div class=\"tw-table-cell tw-px-6 tw-py-4 tw-border-b tw-border-gray-200 tw-bg-white\">\r\n        <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-0\">\r\n          <div class=\"tw-flex tw-items-center tw-space-x-3 tw-mb-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 Designation' : 'Quick Add Designation' }}</h6>\r\n          </div>\r\n          @if (selectedParentDesignation()) {\r\n          <div\r\n            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\">\r\n            <cide-ele-icon class=\"tw-text-blue-600 tw-w-4 tw-h-4\">account_tree</cide-ele-icon>\r\n            <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\n              <span class=\"tw-text-sm tw-text-blue-600 tw-font-medium\">{{ isEditMode() ? 'Parent:' : 'Creating child under:' }}</span>\r\n              <span class=\"tw-text-sm tw-text-blue-800 tw-font-semibold\">{{ selectedParentDesignation()?.sydsg_name\r\n                }}</span>\r\n            </div>\r\n            <button cideEleButton variant=\"ghost\" size=\"xs\" type=\"button\" (click)=\"clearSelectedParent()\"\r\n              class=\"tw-text-blue-400 hover:tw-text-blue-600\">\r\n              <svg class=\"tw-w-4 tw-h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\" />\r\n              </svg>\r\n            </button>\r\n          </div>\r\n          }\r\n          @if (selectedParentDepartment()) {\r\n          <div\r\n            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\">\r\n            <cide-ele-icon class=\"tw-text-green-600 tw-w-4 tw-h-4\">business</cide-ele-icon>\r\n            <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\n              <span class=\"tw-text-sm tw-text-green-600 tw-font-medium\">{{ isEditMode() ? 'Department:' : 'Department:'\r\n                }}</span>\r\n              <span class=\"tw-text-sm tw-text-green-800 tw-font-semibold\">{{ selectedParentDepartment()?.sydept_name\r\n                }}</span>\r\n            </div>\r\n            <button cideEleButton variant=\"ghost\" size=\"xs\" type=\"button\" (click)=\"clearSelectedParentDepartment()\"\r\n              class=\"tw-text-green-400 hover:tw-text-green-600\">\r\n              <svg class=\"tw-w-4 tw-h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\" />\r\n              </svg>\r\n            </button>\r\n          </div>\r\n          }\r\n        </div>\r\n\r\n        <form [formGroup]=\"quickAddForm\" (ngSubmit)=\"quickAddDesignation()\">\r\n          <!-- First Row -->\r\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\">\r\n            <!-- Designation Name -->\r\n            <div>\r\n              <cide-ele-input id=\"sydsg_name\" label=\"Name*\" formControlName=\"sydsg_name\" placeholder=\"Designation name\"\r\n                size=\"sm\">\r\n              </cide-ele-input>\r\n            </div>\r\n\r\n            <!-- Designation Code -->\r\n            <div>\r\n              <cide-ele-input id=\"sydsg_code\" label=\"Code*\" formControlName=\"sydsg_code\" placeholder=\"DESG001\"\r\n                size=\"sm\">\r\n              </cide-ele-input>\r\n            </div>\r\n\r\n            <!-- Grade Level -->\r\n            <div>\r\n              <cide-ele-select id=\"sydsg_grade_level_id_sydsgl\" label=\"Grade Level*\" [options]=\"gradeLevelOptions()\"\r\n                formControlName=\"sydsg_grade_level_id_sydsgl\" placeholder=\"Select grade level\" size=\"sm\">\r\n              </cide-ele-select>\r\n            </div>\r\n\r\n            <!-- Department -->\r\n            <div>\r\n              <cide-ele-select id=\"sydsg_department_id_sydpt\" label=\"Department*\" [options]=\"departmentOptions()\"\r\n                formControlName=\"sydsg_department_id_sydpt\" placeholder=\"Select department\" size=\"sm\">\r\n              </cide-ele-select>\r\n            </div>\r\n\r\n            <!-- Active Status -->\r\n            <div class=\"tw-flex tw-flex-col tw-justify-end\">\r\n              <cide-ele-input id=\"sydsg_isactive\" type=\"checkbox\" label=\"Active\" formControlName=\"sydsg_isactive\"\r\n                size=\"sm\">\r\n              </cide-ele-input>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Second Row -->\r\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\">\r\n            <!-- Description -->\r\n            <div>\r\n              <cide-ele-textarea id=\"sydsg_description\" label=\"Description\" formControlName=\"sydsg_description\"\r\n                placeholder=\"Designation description\" rows=\"2\" size=\"sm\">\r\n              </cide-ele-textarea>\r\n            </div>\r\n\r\n            <!-- Entity ID (Hidden) -->\r\n            <div class=\"tw-hidden\">\r\n              <cide-ele-input id=\"desg_entity_id_syen\" label=\"Entity ID*\" formControlName=\"desg_entity_id_syen\"\r\n                placeholder=\"Entity ID\" size=\"sm\">\r\n              </cide-ele-input>\r\n            </div>\r\n\r\n            <!-- Action Buttons -->\r\n            <div class=\"tw-flex tw-flex-col tw-justify-end\">\r\n              <div class=\"tw-flex tw-space-x-2\">\r\n                <button cideEleButton variant=\"primary\" size=\"sm\" type=\"submit\" [disabled]=\"quickAddForm.invalid\"\r\n                  class=\"tw-px-2 tw-py-1 tw-w-20\">\r\n                  <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">{{ isEditMode() ? 'edit' : 'add'\r\n                    }}</cide-ele-icon>\r\n                  {{ isEditMode() ? 'Update' : 'Add' }}\r\n                </button>\r\n                <button cideEleButton variant=\"outline\" size=\"sm\" type=\"button\" (click)=\"resetQuickAddForm()\"\r\n                  class=\"tw-px-2 tw-py-1 tw-w-16\">\r\n                  <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">refresh</cide-ele-icon>\r\n                  Reset\r\n                </button>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </form>\r\n      </div>\r\n    </div>\r\n\r\n\r\n\r\n    <!-- Header Section with Filters -->\r\n    <div class=\"tw-table-row tw-h-0\">\r\n      <div class=\"tw-table-cell tw-px-6 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\r\n        <div\r\n          class=\"tw-flex tw-flex-col sm:tw-flex-row tw-justify-between tw-items-start sm:tw-items-center tw-space-y-3 sm:tw-space-y-0\">\r\n\r\n          <!-- Actions -->\r\n          <div\r\n            class=\"tw-flex tw-flex-col sm:tw-flex-row tw-items-start sm:tw-items-center tw-space-y-3 sm:tw-space-y-0 sm:tw-space-x-3\">\r\n            <!-- Search functionality is handled by the data grid -->\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\"\r\n              class=\"tw-text-red-400 tw-w-5 tw-h-5 tw-mt-0.5 tw-flex-shrink-0\"></cide-ele-icon>\r\n            <div class=\"tw-ml-3\">\r\n              <h3 class=\"tw-text-sm tw-font-medium tw-text-red-800 tw-m-0\">Error</h3>\r\n              <p class=\"tw-text-sm tw-text-red-700 tw-mt-1 tw-m-0\">{{ error() }}</p>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        }\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Main Content Area -->\r\n    <div class=\"tw-table-row\">\r\n      <div class=\"tw-table-cell tw-h-full tw-relative\">\r\n\r\n        <!-- Data Grid Component -->\r\n        <div class=\"tw-h-full tw-overflow-auto\">\r\n\r\n          <cide-ele-data-grid [config]=\"gridConfig()\" [templateRenderers]=\"getTemplateRenderers()\"\r\n            [actionHandlers]=\"actionHandlers\" [serverSidePagination]=\"true\" [totalServerItems]=\"totalItems()\"\r\n            [currentServerPage]=\"currentPage()\" [currentServerPageSize]=\"pageSize()\" (gridEvent)=\"onGridEvent($event)\">\r\n          </cide-ele-data-grid>\r\n        </div>\r\n\r\n      </div>\r\n    </div>\r\n\r\n  </div>\r\n\r\n  <!-- Designation Details Renderer Template -->\r\n  <ng-template #designationDetailsRendererTemplate let-row=\"row\" let-value=\"value\">\r\n    <div class=\"tw-flex tw-items-center tw-min-w-0\">\r\n      <!-- Dynamic Icon based on type -->\r\n      <div class=\"tw-flex-shrink-0\">\r\n        <cide-ele-icon [class]=\"row.type === 'department' ? 'tw-text-green-500' : 'tw-text-blue-500'\" size=\"xs\">\r\n          {{ row.type === 'department' ? 'business' : 'work' }}\r\n        </cide-ele-icon>\r\n      </div>\r\n\r\n      <!-- Details -->\r\n      <div class=\"tw-ml-3 tw-min-w-0 tw-flex-1\">\r\n        <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\n          <div class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-truncate\" [title]=\"row.name\">\r\n            {{ row.name || 'Untitled' }}\r\n          </div>\r\n          @if (row.type === 'department') {\r\n          <span\r\n            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\">\r\n            Department\r\n          </span>\r\n          }\r\n        </div>\r\n        @if (row.description) {\r\n        <div class=\"tw-text-xs tw-text-gray-500 tw-truncate\" [title]=\"row.description\">\r\n          {{ row.description }}\r\n        </div>\r\n        }\r\n      </div>\r\n    </div>\r\n  </ng-template>\r\n\r\n  <!-- Designation Status Renderer Template -->\r\n  <ng-template #designationStatusRendererTemplate let-row=\"row\" let-value=\"value\">\r\n    <span\r\n      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]=\"getStatusClass(row.status)\">\r\n      {{ getStatusDisplay(row.status) }}\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 [items]=\"getDropdownItems(row)\" [config]=\"{ triggerIcon: 'more_vert', triggerSize: 'sm' }\"\r\n      (itemClick)=\"onDropdownItemClick($event, row)\">\r\n    </cide-ele-dropdown>\r\n  </ng-template>\r\n</cide-lyt-shared-wrapper>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: CideEleDataGridComponent, selector: "cide-ele-data-grid", inputs: ["config", "templateRenderers", "customFormatters", "actionHandlers", "serverSidePagination", "totalServerItems", "currentServerPage", "currentServerPageSize", "dragDropEnabled"], outputs: ["gridEvent"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: 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", "step", "size"], outputs: ["ngModelChange"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput", "options", "multiple", "searchable", "showSearchInput", "loading", "valueKey", "labelKey", "treeView"], 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: CideLytSharedWrapperComponent, selector: "cide-lyt-shared-wrapper", inputs: ["shared_wrapper_setup_param", "breadcrumb_data"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCoreDesignationListComponent, decorators: [{
             type: Component,
@@ -5758,7 +5881,7 @@ class CideCoreGradeLevelListComponent {
         return item._id || '';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCoreGradeLevelListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideCoreGradeLevelListComponent, isStandalone: true, selector: "cide-core-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 with Shared Wrapper -->\r\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'core_grade_level_list' }\">\r\n<div class=\"tw-table tw-w-full tw-h-full\">\r\n\r\n  <!-- Quick Add Form Section -->\r\n  <div class=\"tw-table-row tw-h-0\">\r\n    <div class=\"tw-table-cell tw-px-6 tw-py-4 tw-border-b tw-border-gray-200 tw-bg-white\">\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 Grade Level' : 'Quick Add Grade Level' }}</h6>\r\n      </div>\r\n    </div>\r\n    \r\n    <form [formGroup]=\"quickAddForm\" (ngSubmit)=\"quickAddGradeLevel()\">\r\n    <!-- First Row -->\r\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\">\r\n      <!-- Grade Level Name -->\r\n      <div>\r\n        <cide-ele-input \r\n          id=\"sydsgl_name\" \r\n          label=\"Name*\" \r\n          formControlName=\"sydsgl_name\"\r\n          placeholder=\"Grade level name\"\r\n          size=\"sm\">\r\n        </cide-ele-input>\r\n      </div>\r\n      \r\n      <!-- Active Status -->\r\n      <div class=\"tw-flex tw-flex-col tw-justify-end\">\r\n        <cide-ele-input \r\n          id=\"sydsgl_isactive\"\r\n          type=\"checkbox\"\r\n          label=\"Active\"\r\n          formControlName=\"sydsgl_isactive\"\r\n          size=\"sm\">\r\n        </cide-ele-input>\r\n      </div>\r\n    </div>\r\n    \r\n    <!-- Second Row -->\r\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\">\r\n      <!-- Description -->\r\n      <div>\r\n        <cide-ele-textarea \r\n          id=\"sydsgl_description\" \r\n          label=\"Description\" \r\n          formControlName=\"sydsgl_description\"\r\n          placeholder=\"Grade level description\"\r\n          rows=\"2\"\r\n          size=\"sm\">\r\n        </cide-ele-textarea>\r\n      </div>\r\n      \r\n      <!-- Entity ID (Hidden) -->\r\n      <div class=\"tw-hidden\">\r\n        <cide-ele-input \r\n          id=\"sydsgl_entity_id_syen\" \r\n          label=\"Entity ID*\" \r\n          formControlName=\"sydsgl_entity_id_syen\"\r\n          placeholder=\"Entity ID\"\r\n          size=\"sm\">\r\n        </cide-ele-input>\r\n      </div>\r\n      \r\n      <!-- Action Buttons -->\r\n      <div class=\"tw-flex tw-flex-col tw-justify-end\">\r\n        <div class=\"tw-flex tw-space-x-2\">\r\n          <button \r\n            cideEleButton \r\n            variant=\"primary\" \r\n            size=\"sm\" \r\n            type=\"submit\"\r\n            [disabled]=\"quickAddForm.invalid\"\r\n            class=\"tw-px-2 tw-py-1 tw-w-20\">\r\n            <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\r\n            {{ isEditMode() ? 'Update' : 'Add' }}\r\n          </button>\r\n          <button \r\n            cideEleButton \r\n            variant=\"outline\" \r\n            size=\"sm\" \r\n            type=\"button\"\r\n            (click)=\"resetQuickAddForm()\"\r\n            class=\"tw-px-2 tw-py-1 tw-w-16\">\r\n            <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">refresh</cide-ele-icon>\r\n            Reset\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    </form>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Main Content Area -->\r\n  <div class=\"tw-table-row\">\r\n    <div class=\"tw-table-cell tw-h-full tw-relative\">\r\n  \r\n  <!-- Data Grid Component -->\r\n  <div class=\"tw-h-full tw-overflow-auto\">\r\n    \r\n    <cide-ele-data-grid \r\n      [config]=\"gridConfig()\" \r\n      [templateRenderers]=\"getTemplateRenderers()\"\r\n      [actionHandlers]=\"actionHandlers\"\r\n      [serverSidePagination]=\"true\" \r\n      [totalServerItems]=\"totalItems()\" \r\n      [currentServerPage]=\"currentPage()\"\r\n      [currentServerPageSize]=\"pageSize()\" \r\n      [dragDropEnabled]=\"true\"\r\n      (gridEvent)=\"onGridEvent($event)\">\r\n    </cide-ele-data-grid>\r\n  </div>\r\n\r\n    </div>\r\n  </div>\r\n\r\n</div>\r\n\r\n<!-- Drag Handle Renderer Template -->\r\n<ng-template #dragHandleRendererTemplate let-row=\"row\" let-value=\"value\">\r\n  <div class=\"tw-flex tw-items-center tw-justify-center tw-w-full tw-h-full tw-cursor-move drag-handle\">\r\n    <cide-ele-icon \r\n      class=\"tw-text-gray-400 hover:tw-text-gray-600 tw-transition-colors\" \r\n      size=\"xs\">\r\n      drag_indicator\r\n    </cide-ele-icon>\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- Grade Level Details Renderer Template -->\r\n<ng-template #gradeLevelDetailsRendererTemplate let-row=\"row\" let-value=\"value\">\r\n  <div class=\"tw-flex tw-items-center tw-min-w-0\">\r\n    <!-- Grade Level Icon -->\r\n    <div class=\"tw-flex-shrink-0\">\r\n      <cide-ele-icon \r\n        class=\"tw-text-gray-400\" \r\n        size=\"xs\">\r\n        school\r\n      </cide-ele-icon>\r\n    </div>\r\n    \r\n    <!-- Grade Level 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.sydsgl_name\">\r\n        {{ row.sydsgl_name || 'Untitled' }}\r\n      </div>\r\n      @if (row.sydsgl_description) {\r\n        <div class=\"tw-text-xs tw-text-gray-500 tw-truncate\" \r\n             [title]=\"row.sydsgl_description\">\r\n          {{ row.sydsgl_description }}\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- Grade Level Status Renderer Template -->\r\n<ng-template #gradeLevelStatusRendererTemplate 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]=\"getStatusClass(row.sydsgl_isactive)\">\r\n    {{ getStatusDisplay(row.sydsgl_isactive) }}\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]=\"getDropdownItems(row)\"\r\n    [config]=\"{ triggerIcon: 'more_vert', triggerSize: 'sm' }\"\r\n    (itemClick)=\"onDropdownItemClick($event, row)\">\r\n  </cide-ele-dropdown>\r\n</ng-template>\r\n\r\n<!-- Confirmation Modal -->\r\n</cide-lyt-shared-wrapper>\r\n<cide-ele-confirmation-modal></cide-ele-confirmation-modal> ", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: CideEleDataGridComponent, selector: "cide-ele-data-grid", inputs: ["config", "templateRenderers", "customFormatters", "actionHandlers", "serverSidePagination", "totalServerItems", "currentServerPage", "currentServerPageSize", "dragDropEnabled"], outputs: ["gridEvent"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: 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: CideLytSharedWrapperComponent, selector: "cide-lyt-shared-wrapper", inputs: ["shared_wrapper_setup_param", "breadcrumb_data"] }, { kind: "component", type: CideEleConfirmationModalComponent, selector: "cide-ele-confirmation-modal" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideCoreGradeLevelListComponent, isStandalone: true, selector: "cide-core-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 with Shared Wrapper -->\r\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'core_grade_level_list' }\">\r\n<div class=\"tw-table tw-w-full tw-h-full\">\r\n\r\n  <!-- Quick Add Form Section -->\r\n  <div class=\"tw-table-row tw-h-0\">\r\n    <div class=\"tw-table-cell tw-px-6 tw-py-4 tw-border-b tw-border-gray-200 tw-bg-white\">\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 Grade Level' : 'Quick Add Grade Level' }}</h6>\r\n      </div>\r\n    </div>\r\n    \r\n    <form [formGroup]=\"quickAddForm\" (ngSubmit)=\"quickAddGradeLevel()\">\r\n    <!-- First Row -->\r\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\">\r\n      <!-- Grade Level Name -->\r\n      <div>\r\n        <cide-ele-input \r\n          id=\"sydsgl_name\" \r\n          label=\"Name*\" \r\n          formControlName=\"sydsgl_name\"\r\n          placeholder=\"Grade level name\"\r\n          size=\"sm\">\r\n        </cide-ele-input>\r\n      </div>\r\n      \r\n      <!-- Active Status -->\r\n      <div class=\"tw-flex tw-flex-col tw-justify-end\">\r\n        <cide-ele-input \r\n          id=\"sydsgl_isactive\"\r\n          type=\"checkbox\"\r\n          label=\"Active\"\r\n          formControlName=\"sydsgl_isactive\"\r\n          size=\"sm\">\r\n        </cide-ele-input>\r\n      </div>\r\n    </div>\r\n    \r\n    <!-- Second Row -->\r\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\">\r\n      <!-- Description -->\r\n      <div>\r\n        <cide-ele-textarea \r\n          id=\"sydsgl_description\" \r\n          label=\"Description\" \r\n          formControlName=\"sydsgl_description\"\r\n          placeholder=\"Grade level description\"\r\n          rows=\"2\"\r\n          size=\"sm\">\r\n        </cide-ele-textarea>\r\n      </div>\r\n      \r\n      <!-- Entity ID (Hidden) -->\r\n      <div class=\"tw-hidden\">\r\n        <cide-ele-input \r\n          id=\"sydsgl_entity_id_syen\" \r\n          label=\"Entity ID*\" \r\n          formControlName=\"sydsgl_entity_id_syen\"\r\n          placeholder=\"Entity ID\"\r\n          size=\"sm\">\r\n        </cide-ele-input>\r\n      </div>\r\n      \r\n      <!-- Action Buttons -->\r\n      <div class=\"tw-flex tw-flex-col tw-justify-end\">\r\n        <div class=\"tw-flex tw-space-x-2\">\r\n          <button \r\n            cideEleButton \r\n            variant=\"primary\" \r\n            size=\"sm\" \r\n            type=\"submit\"\r\n            [disabled]=\"quickAddForm.invalid\"\r\n            class=\"tw-px-2 tw-py-1 tw-w-20\">\r\n            <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\r\n            {{ isEditMode() ? 'Update' : 'Add' }}\r\n          </button>\r\n          <button \r\n            cideEleButton \r\n            variant=\"outline\" \r\n            size=\"sm\" \r\n            type=\"button\"\r\n            (click)=\"resetQuickAddForm()\"\r\n            class=\"tw-px-2 tw-py-1 tw-w-16\">\r\n            <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">refresh</cide-ele-icon>\r\n            Reset\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    </form>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Main Content Area -->\r\n  <div class=\"tw-table-row\">\r\n    <div class=\"tw-table-cell tw-h-full tw-relative\">\r\n  \r\n  <!-- Data Grid Component -->\r\n  <div class=\"tw-h-full tw-overflow-auto\">\r\n    \r\n    <cide-ele-data-grid \r\n      [config]=\"gridConfig()\" \r\n      [templateRenderers]=\"getTemplateRenderers()\"\r\n      [actionHandlers]=\"actionHandlers\"\r\n      [serverSidePagination]=\"true\" \r\n      [totalServerItems]=\"totalItems()\" \r\n      [currentServerPage]=\"currentPage()\"\r\n      [currentServerPageSize]=\"pageSize()\" \r\n      [dragDropEnabled]=\"true\"\r\n      (gridEvent)=\"onGridEvent($event)\">\r\n    </cide-ele-data-grid>\r\n  </div>\r\n\r\n    </div>\r\n  </div>\r\n\r\n</div>\r\n\r\n<!-- Drag Handle Renderer Template -->\r\n<ng-template #dragHandleRendererTemplate let-row=\"row\" let-value=\"value\">\r\n  <div class=\"tw-flex tw-items-center tw-justify-center tw-w-full tw-h-full tw-cursor-move drag-handle\">\r\n    <cide-ele-icon \r\n      class=\"tw-text-gray-400 hover:tw-text-gray-600 tw-transition-colors\" \r\n      size=\"xs\">\r\n      drag_indicator\r\n    </cide-ele-icon>\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- Grade Level Details Renderer Template -->\r\n<ng-template #gradeLevelDetailsRendererTemplate let-row=\"row\" let-value=\"value\">\r\n  <div class=\"tw-flex tw-items-center tw-min-w-0\">\r\n    <!-- Grade Level Icon -->\r\n    <div class=\"tw-flex-shrink-0\">\r\n      <cide-ele-icon \r\n        class=\"tw-text-gray-400\" \r\n        size=\"xs\">\r\n        school\r\n      </cide-ele-icon>\r\n    </div>\r\n    \r\n    <!-- Grade Level 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.sydsgl_name\">\r\n        {{ row.sydsgl_name || 'Untitled' }}\r\n      </div>\r\n      @if (row.sydsgl_description) {\r\n        <div class=\"tw-text-xs tw-text-gray-500 tw-truncate\" \r\n             [title]=\"row.sydsgl_description\">\r\n          {{ row.sydsgl_description }}\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- Grade Level Status Renderer Template -->\r\n<ng-template #gradeLevelStatusRendererTemplate 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]=\"getStatusClass(row.sydsgl_isactive)\">\r\n    {{ getStatusDisplay(row.sydsgl_isactive) }}\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]=\"getDropdownItems(row)\"\r\n    [config]=\"{ triggerIcon: 'more_vert', triggerSize: 'sm' }\"\r\n    (itemClick)=\"onDropdownItemClick($event, row)\">\r\n  </cide-ele-dropdown>\r\n</ng-template>\r\n\r\n<!-- Confirmation Modal -->\r\n</cide-lyt-shared-wrapper>\r\n<cide-ele-confirmation-modal></cide-ele-confirmation-modal> ", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: CideEleDataGridComponent, selector: "cide-ele-data-grid", inputs: ["config", "templateRenderers", "customFormatters", "actionHandlers", "serverSidePagination", "totalServerItems", "currentServerPage", "currentServerPageSize", "dragDropEnabled"], outputs: ["gridEvent"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: 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", "step", "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: CideLytSharedWrapperComponent, selector: "cide-lyt-shared-wrapper", inputs: ["shared_wrapper_setup_param", "breadcrumb_data"] }, { kind: "component", type: CideEleConfirmationModalComponent, selector: "cide-ele-confirmation-modal" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCoreGradeLevelListComponent, decorators: [{
             type: Component,
@@ -5784,99 +5907,6 @@ var gradeLevelList_component = /*#__PURE__*/Object.freeze({
 
 // Grade Level Management Components
 
-class CideCorePageManagementService {
-    http;
-    constructor(http) {
-        this.http = http;
-    }
-    /**
-     * Get page list from API
-     */
-    getPageList(body) {
-        const query = generateStringFromObject(body);
-        return this.http?.get(cidePath?.join([hostManagerRoutesUrl?.cideSuiteHost, coreRoutesUrl?.module, coreRoutesUrl?.page, query]))
-            .pipe(catchError(error => {
-            console.error('CideCorePageManagementService API error:', error);
-            return this.handleError(error);
-        }));
-    }
-    /**
-     * Create or update page using single API endpoint
-     */
-    createOrUpdatePage(payload) {
-        const url = cidePath?.join([hostManagerRoutesUrl?.cideSuiteHost, coreRoutesUrl?.module, coreRoutesUrl?.page]);
-        return this.http.post(url, payload)
-            .pipe(catchError(this.handleError));
-    }
-    /**
-     * Get page by ID
-     */
-    getPageById(id) {
-        console.log('Getting page by ID:', id);
-        const payload = { sypg_id: id };
-        const query = generateStringFromObject(payload);
-        const url = cidePath?.join([hostManagerRoutesUrl?.cideSuiteHost, coreRoutesUrl?.module, coreRoutesUrl?.page, 'byId', query]);
-        return this.http.get(url)
-            .pipe(catchError(this.handleError));
-    }
-    /**
-     * Delete page
-     */
-    deletePage(id) {
-        const payload = { sypg_id: id };
-        const query = generateStringFromObject(payload);
-        const url = cidePath?.join([hostManagerRoutesUrl?.cideSuiteHost, coreRoutesUrl?.module, coreRoutesUrl?.page, query]);
-        return this.http.delete(url)
-            .pipe(catchError(this.handleError));
-    }
-    /**
-     * Toggle page active status
-     */
-    togglePageStatus(payload) {
-        const query = generateStringFromObject(payload);
-        const url = cidePath?.join([hostManagerRoutesUrl?.cideSuiteHost, coreRoutesUrl?.module, coreRoutesUrl?.page, query]);
-        return this.http.put(url, {})
-            .pipe(catchError(this.handleError));
-    }
-    /**
-     * Find page by ID using API
-     */
-    findPageById(payload) {
-        const query = generateStringFromObject(payload);
-        const url = cidePath?.join([hostManagerRoutesUrl?.cideSuiteHost, coreRoutesUrl?.module, coreRoutesUrl?.page, 'checkCodeExists', query]);
-        return this.http.get(url)
-            .pipe(catchError(this.handleError));
-    }
-    /**
-     * Check if page code already exists
-     */
-    checkPageCodeExists(payload) {
-        return this.findPageById(payload).pipe(map((response) => response.success || false));
-    }
-    /**
-     * Handle errors
-     */
-    handleError(error) {
-        let errorMessage = 'An error occurred';
-        if (error instanceof Error) {
-            errorMessage = error.message;
-        }
-        else if (typeof error === 'string') {
-            errorMessage = error;
-        }
-        console.error('Page Management Service Error:', errorMessage);
-        return throwError(() => new Error(errorMessage));
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCorePageManagementService, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCorePageManagementService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCorePageManagementService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: () => [{ type: i1.HttpClient }] });
-
 class CideCorePageListComponent {
     // Dependency injection
     destroyRef = inject(DestroyRef);
@@ -7122,7 +7152,7 @@ class CideCorePageThemeComponent {
         console.log('Preview image upload progress:', progress + '%');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCorePageThemeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideCorePageThemeComponent, isStandalone: true, selector: "cide-core-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-2 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-2 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-3 tw-bg-white tw-overflow-auto\">\r\n    <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-2\">\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 lg:tw-grid-cols-[1fr_200px] tw-gap-4\">\r\n        <!-- Left Side: All Input Fields -->\r\n        <div class=\"tw-space-y-4\">\r\n          <!-- Row 1: Theme Title and Theme Code -->\r\n          <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\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            <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          </div>\r\n          \r\n          <!-- Row 2: Sub Title and Active Status -->\r\n          <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\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            <div class=\"tw-space-y-2 tw-flex tw-items-center\">\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          </div>\r\n          \r\n          <!-- Row 3: Description -->\r\n          <div class=\"tw-space-y-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        </div>\r\n        \r\n        <!-- Right Side: File Upload -->\r\n        <div class=\"tw-flex tw-flex-col tw-justify-start tw-items-center tw-p-0\">\r\n            <cide-ele-file-input \r\n              id=\"sytm_preview_id_fm\" \r\n              formControlName=\"sytm_preview_id_fm\"\r\n              accept=\"image/*\"\r\n              [showPreview]=\"true\"\r\n              [previewBoxMode]=\"true\"\r\n              [showFileName]=\"false\"\r\n              previewWidth=\"180px\"\r\n              previewHeight=\"120px\"\r\n              placeholderText=\"Upload Preview Image\"\r\n              placeholderIcon=\"image\"\r\n              [autoUpload]=\"true\"\r\n              [uploadData]=\"getPreviewImageUploadData()\"\r\n              (uploadSuccess)=\"onPreviewImageUploadSuccess($event)\"\r\n              (uploadError)=\"onPreviewImageUploadError($event)\"\r\n              (uploadProgressChange)=\"onPreviewImageUploadProgress($event)\">\r\n            </cide-ele-file-input>\r\n        </div>\r\n      </div>\r\n      \r\n      <!-- Configuration JSON -->\r\n      <div class=\"tw-space-y-2\">\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 -->\r\n      <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-2 tw-gap-6\">\r\n        <div class=\"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        \r\n        <!-- Drawer Configuration -->\r\n        <div class=\"tw-space-y-2\">\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 (theme.sytm_preview_id_fm) {\r\n                <img \r\n                  cideEleFileImage \r\n                  [fileId]=\"theme.sytm_preview_id_fm\" \r\n                  [altText]=\"'Theme Preview'\"\r\n                  class=\"tw-w-full tw-h-full tw-object-cover\" />\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: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1$2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: 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", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput", "options", "multiple", "searchable", "showSearchInput", "loading", "valueKey", "labelKey", "treeView"], 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"] }, { kind: "component", type: CideEleFileInputComponent, selector: "cide-ele-file-input", inputs: ["label", "accept", "multiple", "disabled", "required", "helperText", "errorText", "showPreview", "previewWidth", "previewHeight", "previewBoxMode", "showFileName", "placeholderText", "placeholderIcon", "autoUpload", "uploadData", "showFloatingUploader", "floatingUploaderGroupId"], outputs: ["fileChange", "uploadSuccess", "uploadError", "uploadProgressChange"] }, { kind: "directive", type: CideEleFileImageDirective, selector: "[cideEleFileImage]", inputs: ["fileId", "altText"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideCorePageThemeComponent, isStandalone: true, selector: "cide-core-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-2 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-2 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-3 tw-bg-white tw-overflow-auto\">\r\n    <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-2\">\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 lg:tw-grid-cols-[1fr_200px] tw-gap-4\">\r\n        <!-- Left Side: All Input Fields -->\r\n        <div class=\"tw-space-y-4\">\r\n          <!-- Row 1: Theme Title and Theme Code -->\r\n          <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\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            <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          </div>\r\n          \r\n          <!-- Row 2: Sub Title and Active Status -->\r\n          <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\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            <div class=\"tw-space-y-2 tw-flex tw-items-center\">\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          </div>\r\n          \r\n          <!-- Row 3: Description -->\r\n          <div class=\"tw-space-y-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        </div>\r\n        \r\n        <!-- Right Side: File Upload -->\r\n        <div class=\"tw-flex tw-flex-col tw-justify-start tw-items-center tw-p-0\">\r\n            <cide-ele-file-input \r\n              id=\"sytm_preview_id_fm\" \r\n              formControlName=\"sytm_preview_id_fm\"\r\n              accept=\"image/*\"\r\n              [showPreview]=\"true\"\r\n              [previewBoxMode]=\"true\"\r\n              [showFileName]=\"false\"\r\n              previewWidth=\"180px\"\r\n              previewHeight=\"120px\"\r\n              placeholderText=\"Upload Preview Image\"\r\n              placeholderIcon=\"image\"\r\n              [autoUpload]=\"true\"\r\n              [uploadData]=\"getPreviewImageUploadData()\"\r\n              (uploadSuccess)=\"onPreviewImageUploadSuccess($event)\"\r\n              (uploadError)=\"onPreviewImageUploadError($event)\"\r\n              (uploadProgressChange)=\"onPreviewImageUploadProgress($event)\">\r\n            </cide-ele-file-input>\r\n        </div>\r\n      </div>\r\n      \r\n      <!-- Configuration JSON -->\r\n      <div class=\"tw-space-y-2\">\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 -->\r\n      <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-2 tw-gap-6\">\r\n        <div class=\"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        \r\n        <!-- Drawer Configuration -->\r\n        <div class=\"tw-space-y-2\">\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 (theme.sytm_preview_id_fm) {\r\n                <img \r\n                  cideEleFileImage \r\n                  [fileId]=\"theme.sytm_preview_id_fm\" \r\n                  [altText]=\"'Theme Preview'\"\r\n                  class=\"tw-w-full tw-h-full tw-object-cover\" />\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: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1$2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: 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", "step", "size"], outputs: ["ngModelChange"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput", "options", "multiple", "searchable", "showSearchInput", "loading", "valueKey", "labelKey", "treeView"], 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"] }, { kind: "component", type: CideEleFileInputComponent, selector: "cide-ele-file-input", inputs: ["label", "accept", "multiple", "disabled", "required", "helperText", "errorText", "showPreview", "previewWidth", "previewHeight", "previewBoxMode", "showFileName", "placeholderText", "placeholderIcon", "autoUpload", "uploadData", "showFloatingUploader", "floatingUploaderGroupId"], outputs: ["fileChange", "uploadSuccess", "uploadError", "uploadProgressChange"] }, { kind: "directive", type: CideEleFileImageDirective, selector: "[cideEleFileImage]", inputs: ["fileId", "altText"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCorePageThemeComponent, decorators: [{
             type: Component,
@@ -7731,7 +7761,7 @@ class CideCorePageControlsComponent {
         return control._id || '';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCorePageControlsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.7", type: CideCorePageControlsComponent, isStandalone: true, selector: "cide-core-page-controls", ngImport: i0, template: "<!-- Page Controls Container -->\r\n<div class=\"tw-flex tw-flex-col tw-h-full tw-bg-gray-50\">\r\n  <!-- Header Section -->\r\n  <div class=\"tw-bg-white tw-border-b tw-border-gray-200 tw-px-6 tw-py-4\">\r\n    <div class=\"tw-flex tw-items-center tw-justify-between\">\r\n      <div class=\"tw-flex tw-items-center tw-space-x-4\">\r\n        <button \r\n          cideEleButton\r\n          variant=\"ghost\"\r\n          size=\"sm\"\r\n          (click)=\"goBack()\"\r\n          class=\"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\">\r\n          <cide-ele-icon>arrow_back</cide-ele-icon>\r\n        </button>\r\n        <div class=\"tw-flex tw-items-center tw-space-x-3\">\r\n          <cide-ele-icon class=\"tw-text-blue-600 tw-text-xl\">settings</cide-ele-icon>\r\n          <div>\r\n            <h1 class=\"tw-text-xl tw-font-semibold tw-text-gray-900 tw-mb-0\">Control Management</h1>\r\n            <p class=\"tw-text-sm tw-text-gray-500 tw-mb-0\">Page: {{ pageTitle() }}</p>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Error Message -->\r\n  <div class=\"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\" *ngIf=\"error()\">\r\n    <cide-ele-icon class=\"tw-text-red-500 tw-flex-shrink-0 tw-mt-0.5\">error</cide-ele-icon>\r\n    <div>\r\n      <h3 class=\"tw-text-red-800 tw-font-medium tw-mb-1\">Error</h3>\r\n      <p class=\"tw-text-red-700 tw-text-sm tw-mb-0\">{{ error() }}</p>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Main Content Area -->\r\n  <div class=\"tw-flex tw-flex-1 tw-gap-6 tw-p-6 tw-overflow-hidden lg:tw-flex-row tw-flex-col\">\r\n    <!-- Form Section -->\r\n    <div class=\"tw-w-full lg:tw-w-3/5 tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-flex tw-flex-col\">\r\n      <div class=\"tw-flex tw-items-center tw-space-x-3 tw-p-6 tw-border-b tw-border-gray-200\">\r\n        <cide-ele-icon class=\"tw-text-blue-600\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\r\n        <h3 class=\"tw-text-lg tw-font-medium tw-text-gray-900 tw-mb-0\">{{ isEditMode() ? 'Edit Control' : 'Quick Add Control' }}</h3>\r\n      </div>\r\n\r\n      <!-- Form -->\r\n      <form [formGroup]=\"controlForm\" (ngSubmit)=\"saveControl()\" class=\"tw-flex tw-flex-col tw-flex-1 tw-p-6 tw-overflow-y-auto\">\r\n        <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-2 tw-gap-4 tw-mb-6\">\r\n          \r\n          <!-- Basic Information Section -->\r\n          <!-- Control Key -->\r\n          <div class=\"tw-space-y-1\">\r\n            <cide-ele-input\r\n              id=\"sype_key\"\r\n              formControlName=\"sype_key\"\r\n              placeholder=\"Enter control key\"\r\n              label=\"Control Key\"\r\n              size=\"sm\">\r\n            </cide-ele-input>\r\n          </div>\r\n\r\n          <!-- Control Label -->\r\n          <div class=\"tw-space-y-1\">\r\n            <cide-ele-input\r\n              id=\"sype_label\"\r\n              formControlName=\"sype_label\"\r\n              placeholder=\"Enter control label\"\r\n              label=\"Control Label\"\r\n              size=\"sm\">\r\n            </cide-ele-input>\r\n          </div>\r\n\r\n          <!-- Control Type -->\r\n          <div class=\"tw-space-y-1\">\r\n            <cide-ele-select\r\n              id=\"sype_type\"\r\n              formControlName=\"sype_type\"\r\n              [options]=\"[\r\n                { value: 'text', label: 'Text Input' },\r\n                { value: 'textarea', label: 'Text Area' },\r\n                { value: 'select', label: 'Select' },\r\n                { value: 'checkbox', label: 'Checkbox' },\r\n                { value: 'radio', label: 'Radio' },\r\n                { value: 'date', label: 'Date' },\r\n                { value: 'number', label: 'Number' },\r\n                { value: 'email', label: 'Email' },\r\n                { value: 'password', label: 'Password' },\r\n                { value: 'file', label: 'File Upload' }\r\n              ]\"\r\n              label=\"Control Type\"\r\n              size=\"sm\">\r\n            </cide-ele-select>\r\n          </div>\r\n\r\n          <!-- Status - Checkbox aligned properly -->\r\n          <div class=\"tw-space-y-1\">\r\n            <cide-ele-input\r\n              id=\"sype_isactive\"\r\n              type=\"checkbox\"\r\n              formControlName=\"sype_isactive\"\r\n              label=\"Active Status\"\r\n              size=\"sm\">\r\n            </cide-ele-input>\r\n          </div>\r\n\r\n          <!-- Placeholder -->\r\n          <div class=\"tw-space-y-1\">\r\n            <cide-ele-input\r\n              id=\"sype_placeholder\"\r\n              formControlName=\"sype_placeholder\"\r\n              placeholder=\"Enter placeholder text\"\r\n              label=\"Placeholder\"\r\n              size=\"sm\">\r\n            </cide-ele-input>\r\n          </div>\r\n\r\n          <!-- Auto Complete - Checkbox aligned properly -->\r\n          <div class=\"tw-space-y-1\">\r\n            <cide-ele-input\r\n              id=\"sype_auto_complete\"\r\n              type=\"checkbox\"\r\n              formControlName=\"sype_auto_complete\"\r\n              label=\"Auto Complete\"\r\n              size=\"sm\">\r\n            </cide-ele-input>\r\n          </div>\r\n\r\n          <!-- Tooltip -->\r\n          <div class=\"tw-space-y-1\">\r\n            <cide-ele-input\r\n              id=\"sype_tooltip\"\r\n              formControlName=\"sype_tooltip\"\r\n              placeholder=\"Enter tooltip text\"\r\n              label=\"Tooltip\"\r\n              size=\"sm\">\r\n            </cide-ele-input>\r\n          </div>\r\n\r\n          <!-- Validation & Sizing Section -->\r\n          <!-- Min/Max Length - Side by side -->\r\n          <div class=\"tw-col-span-2 tw-flex tw-gap-4\">\r\n            <div class=\"tw-flex-1 tw-space-y-1\">\r\n              <cide-ele-input\r\n                id=\"sype_min_length\"\r\n                type=\"number\"\r\n                formControlName=\"sype_min_length\"\r\n                placeholder=\"0\"\r\n                label=\"Min Length\"\r\n                size=\"xs\">\r\n              </cide-ele-input>\r\n            </div>\r\n            <div class=\"tw-flex-1 tw-space-y-1\">\r\n              <cide-ele-input\r\n                id=\"sype_max_length\"\r\n                type=\"number\"\r\n                formControlName=\"sype_max_length\"\r\n                placeholder=\"20\"\r\n                label=\"Max Length\"\r\n                size=\"xs\">\r\n              </cide-ele-input>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Size & Label Placement - Side by side -->\r\n          <div class=\"tw-col-span-2 tw-flex tw-gap-4\">\r\n            <div class=\"tw-flex-1 tw-space-y-1\">\r\n              <cide-ele-select\r\n                id=\"sype_size\"\r\n                formControlName=\"sype_size\"\r\n                label=\"Size\"\r\n                size=\"xs\"\r\n                [options]=\"[\r\n                  { value: 'xs', label: 'XS' },\r\n                  { value: 'sm', label: 'SM' },\r\n                  { value: 'md', label: 'MD' },\r\n                  { value: 'lg', label: 'LG' },\r\n                  { value: 'xl', label: 'XL' },\r\n                  { value: 'xxl', label: 'XXL' }\r\n                ]\">\r\n              </cide-ele-select>\r\n            </div>\r\n            <div class=\"tw-flex-1 tw-space-y-1\">\r\n              <cide-ele-select\r\n                id=\"sype_label_placement\"\r\n                formControlName=\"sype_label_placement\"\r\n                label=\"Label Placement\"\r\n                size=\"xs\"\r\n                [options]=\"[\r\n                  { value: 'left', label: 'Left' },\r\n                  { value: 'floating', label: 'Floating' },\r\n                  { value: 'fixed', label: 'Fixed' }\r\n                ]\">\r\n              </cide-ele-select>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Width & Height - Side by side -->\r\n          <div class=\"tw-col-span-2 tw-flex tw-gap-4\">\r\n            <div class=\"tw-flex-1 tw-space-y-1\">\r\n              <cide-ele-input\r\n                id=\"sype_width\"\r\n                type=\"text\"\r\n                formControlName=\"sype_width\"\r\n                placeholder=\"20px\"\r\n                label=\"Width\"\r\n                size=\"xs\">\r\n              </cide-ele-input>\r\n            </div>\r\n            <div class=\"tw-flex-1 tw-space-y-1\">\r\n              <cide-ele-input\r\n                id=\"sype_height\"\r\n                type=\"text\"\r\n                formControlName=\"sype_height\"\r\n                placeholder=\"20px\"\r\n                label=\"Height\"\r\n                size=\"xs\">\r\n              </cide-ele-input>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Leading Icon -->\r\n          <div class=\"tw-space-y-1\">\r\n            <cide-ele-input\r\n              id=\"sype_leading_icon\"\r\n              formControlName=\"sype_leading_icon\"\r\n              placeholder=\"Enter icon name\"\r\n              label=\"Leading Icon\"\r\n              size=\"sm\">\r\n            </cide-ele-input>\r\n          </div>\r\n\r\n          <!-- Default Value -->\r\n          <div class=\"tw-space-y-1\">\r\n            <cide-ele-input\r\n              id=\"sype_default\"\r\n              formControlName=\"sype_default\"\r\n              placeholder=\"Enter default value\"\r\n              label=\"Default Value\"\r\n              size=\"sm\">\r\n            </cide-ele-input>\r\n          </div>\r\n\r\n          <!-- Regex Pattern -->\r\n          <div class=\"tw-space-y-1\">\r\n            <cide-ele-input\r\n              id=\"sype_regex\"\r\n              formControlName=\"sype_regex\"\r\n              placeholder=\"Enter regex pattern\"\r\n              label=\"Regex Pattern\"\r\n              size=\"sm\">\r\n            </cide-ele-input>\r\n          </div>\r\n\r\n          <!-- Option Key -->\r\n          <div class=\"tw-space-y-1\">\r\n            <cide-ele-input\r\n              id=\"sype_option_key\"\r\n              formControlName=\"sype_option_key\"\r\n              placeholder=\"Enter option key\"\r\n              label=\"Option Key\"\r\n              size=\"sm\">\r\n            </cide-ele-input>\r\n          </div>\r\n\r\n          <!-- Entity ID (Auto-assigned from AppState) - Hidden -->\r\n          <div class=\"tw-space-y-1\" style=\"display: none;\">\r\n            <cide-ele-input\r\n              id=\"sype_entity_id_syen\"\r\n              formControlName=\"sype_entity_id_syen\"\r\n              placeholder=\"Auto-assigned from system\"\r\n              label=\"Entity ID (Auto-assigned)\"\r\n              size=\"sm\"\r\n              readonly>\r\n            </cide-ele-input>\r\n          </div>\r\n\r\n          <!-- Control Options -->\r\n          <div class=\"tw-col-span-2 tw-space-y-1\">\r\n            <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-mb-3\">Control Options</h6>\r\n            <div class=\"tw-grid tw-grid-cols-1 sm:tw-grid-cols-2 lg:tw-grid-cols-3 tw-gap-3\">\r\n              \r\n              <!-- Required -->\r\n              <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\n                <cide-ele-input\r\n                  id=\"sype_required\"\r\n                  type=\"checkbox\"\r\n                  formControlName=\"sype_required\"\r\n                  label=\"Required\"\r\n                  size=\"xs\">\r\n                </cide-ele-input>\r\n              </div>\r\n\r\n              <!-- Disabled -->\r\n              <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\n                <cide-ele-input\r\n                  id=\"sype_disabled\"\r\n                  type=\"checkbox\"\r\n                  formControlName=\"sype_disabled\"\r\n                  label=\"Disabled\"\r\n                  size=\"xs\">\r\n                </cide-ele-input>\r\n              </div>\r\n\r\n              <!-- Hide Label -->\r\n              <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\n                <cide-ele-input\r\n                  id=\"sype_label_hide\"\r\n                  type=\"checkbox\"\r\n                  formControlName=\"sype_label_hide\"\r\n                  label=\"Hide Label\"\r\n                  size=\"xs\">\r\n                </cide-ele-input>\r\n              </div>\r\n\r\n              <!-- Hide Helper Text -->\r\n              <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\n                <cide-ele-input\r\n                  id=\"sype_hide_helper_and_error_text\"\r\n                  type=\"checkbox\"\r\n                  formControlName=\"sype_hide_helper_and_error_text\"\r\n                  label=\"Hide Helper Text\"\r\n                  size=\"xs\">\r\n                </cide-ele-input>\r\n              </div>\r\n\r\n              <!-- Helper Text Collapse -->\r\n              <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\n                <cide-ele-input\r\n                  id=\"sype_helper_text_collapse\"\r\n                  type=\"checkbox\"\r\n                  formControlName=\"sype_helper_text_collapse\"\r\n                  label=\"Collapse Helper\"\r\n                  size=\"xs\">\r\n                </cide-ele-input>\r\n              </div>\r\n\r\n            </div>\r\n          </div>\r\n\r\n        </div>\r\n\r\n        <!-- Form Actions -->\r\n        <div class=\"tw-flex tw-justify-between tw-items-center tw-pt-4 tw-border-t tw-border-gray-200 tw-mt-auto\">\r\n          <!-- Error Message (Left Side) -->\r\n          <cide-form-field-error [formGroup]=\"controlForm\"></cide-form-field-error>\r\n          \r\n          <!-- Action Buttons (Right Side) -->\r\n          <div class=\"tw-flex tw-gap-3\">\r\n            <button \r\n              cideEleButton\r\n              type=\"button\"\r\n              variant=\"outline\"\r\n              (click)=\"cancelForm()\"\r\n              [disabled]=\"loading()\">\r\n              Cancel\r\n            </button>\r\n            <button \r\n              cideEleButton\r\n              type=\"submit\"\r\n              variant=\"primary\"\r\n              [disabled]=\"loading()\">\r\n              {{ isEditMode() ? 'Update Control' : 'Create Control' }}\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </form>\r\n    </div>\r\n\r\n    <!-- Controls List Section -->\r\n    <div class=\"tw-w-full lg:tw-w-2/5 tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-flex tw-flex-col lg:tw-max-h-none tw-max-h-96\">\r\n      <div class=\"tw-p-6 tw-border-b tw-border-gray-200\">\r\n        <h3 class=\"tw-text-lg tw-font-medium tw-text-gray-900 tw-mb-1\">Page Controls</h3>\r\n        <p class=\"tw-text-sm tw-text-gray-500 tw-mb-0\">Controls connected to this page</p>\r\n      </div>\r\n      \r\n      <div class=\"tw-flex-1 tw-overflow-y-auto tw-p-4\" *ngIf=\"!loading() && controls().length > 0\">\r\n        <div \r\n          class=\"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 hover:tw-shadow-md hover:tw-border-gray-300 focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-blue-500 focus:tw-ring-offset-2\" \r\n          *ngFor=\"let control of controls(); trackBy: trackByControlId\"\r\n          [class.tw-bg-blue-50]=\"selectedControlId() === control._id\"\r\n          [class.tw-border-blue-300]=\"selectedControlId() === control._id\"\r\n          [class.tw-shadow-md]=\"selectedControlId() === control._id\"\r\n          (click)=\"selectControl(control)\"\r\n          (keyup.enter)=\"selectControl(control)\"\r\n          (keyup.space)=\"selectControl(control)\"\r\n          tabindex=\"0\"\r\n          role=\"button\"\r\n          [attr.aria-label]=\"'Select control ' + (control.sype_label || control.sype_key)\">\r\n          <div class=\"tw-flex tw-items-start tw-space-x-3\">\r\n            <div class=\"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\">\r\n              <cide-ele-icon class=\"tw-text-blue-600\">settings_input_component</cide-ele-icon>\r\n            </div>\r\n            <div class=\"tw-flex-1 tw-min-w-0\">\r\n              <h4 class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-mb-1 tw-truncate\">{{ control.sype_label || control.sype_key }}</h4>\r\n              <p class=\"tw-text-xs tw-text-gray-500 tw-mb-2 tw-truncate\">{{ control.sype_tooltip || 'No tooltip' }}</p>\r\n              <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\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-gray-100 tw-text-gray-800\">{{ control.sype_type }}</span>\r\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\" \r\n                      [class.tw-bg-red-100]=\"!control.sype_isactive\"\r\n                      [class.tw-text-red-800]=\"!control.sype_isactive\"\r\n                      [class.tw-bg-green-100]=\"control.sype_isactive\"\r\n                      [class.tw-text-green-800]=\"control.sype_isactive\">\r\n                  {{ control.sype_isactive ? 'Active' : 'Inactive' }}\r\n                </span>\r\n              </div>\r\n            </div>\r\n            <div class=\"tw-flex tw-items-center tw-space-x-1 tw-opacity-0 tw-transition-opacity tw-duration-200 group-hover:tw-opacity-100\" \r\n                 [class.tw-opacity-100]=\"selectedControlId() === control._id\">\r\n              <button \r\n                cideEleButton\r\n                variant=\"ghost\"\r\n                size=\"sm\"\r\n                (click)=\"editControl(control); $event.stopPropagation()\">\r\n                <cide-ele-icon>edit</cide-ele-icon>\r\n              </button>\r\n              <button \r\n                cideEleButton\r\n                variant=\"ghost\"\r\n                size=\"sm\"\r\n                (click)=\"deleteControl(control); $event.stopPropagation()\">\r\n                <cide-ele-icon>delete</cide-ele-icon>\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"tw-flex tw-flex-col tw-items-center tw-justify-center tw-py-12 tw-text-center\" *ngIf=\"!loading() && controls().length === 0\">\r\n        <cide-ele-icon class=\"tw-text-4xl tw-text-gray-300 tw-mb-4\">settings_input_component</cide-ele-icon>\r\n        <p class=\"tw-text-gray-500 tw-font-medium tw-mb-1\">No controls available</p>\r\n        <small class=\"tw-text-gray-400\">Create controls using the form on the left</small>\r\n      </div>\r\n\r\n      <div class=\"tw-flex tw-flex-col tw-items-center tw-justify-center tw-py-12 tw-text-center\" *ngIf=\"loading()\">\r\n        <cide-ele-icon class=\"tw-text-2xl tw-text-blue-500 tw-mb-4 tw-animate-spin\">refresh</cide-ele-icon>\r\n        <p class=\"tw-text-gray-500\">Loading controls...</p>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n ", styles: [".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}@media (max-width: 640px){.main-content{padding:1rem;gap:1rem}}\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: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: 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", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput", "options", "multiple", "searchable", "showSearchInput", "loading", "valueKey", "labelKey", "treeView"], outputs: ["ngModelChange", "change", "searchChange"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideFormFieldErrorComponent, selector: "cide-form-field-error", inputs: ["control", "formGroup", "fieldName", "customMessages"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.7", type: CideCorePageControlsComponent, isStandalone: true, selector: "cide-core-page-controls", ngImport: i0, template: "<!-- Page Controls Container -->\r\n<div class=\"tw-flex tw-flex-col tw-h-full tw-bg-gray-50\">\r\n  <!-- Header Section -->\r\n  <div class=\"tw-bg-white tw-border-b tw-border-gray-200 tw-px-6 tw-py-4\">\r\n    <div class=\"tw-flex tw-items-center tw-justify-between\">\r\n      <div class=\"tw-flex tw-items-center tw-space-x-4\">\r\n        <button \r\n          cideEleButton\r\n          variant=\"ghost\"\r\n          size=\"sm\"\r\n          (click)=\"goBack()\"\r\n          class=\"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\">\r\n          <cide-ele-icon>arrow_back</cide-ele-icon>\r\n        </button>\r\n        <div class=\"tw-flex tw-items-center tw-space-x-3\">\r\n          <cide-ele-icon class=\"tw-text-blue-600 tw-text-xl\">settings</cide-ele-icon>\r\n          <div>\r\n            <h1 class=\"tw-text-xl tw-font-semibold tw-text-gray-900 tw-mb-0\">Control Management</h1>\r\n            <p class=\"tw-text-sm tw-text-gray-500 tw-mb-0\">Page: {{ pageTitle() }}</p>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Error Message -->\r\n  <div class=\"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\" *ngIf=\"error()\">\r\n    <cide-ele-icon class=\"tw-text-red-500 tw-flex-shrink-0 tw-mt-0.5\">error</cide-ele-icon>\r\n    <div>\r\n      <h3 class=\"tw-text-red-800 tw-font-medium tw-mb-1\">Error</h3>\r\n      <p class=\"tw-text-red-700 tw-text-sm tw-mb-0\">{{ error() }}</p>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Main Content Area -->\r\n  <div class=\"tw-flex tw-flex-1 tw-gap-6 tw-p-6 tw-overflow-hidden lg:tw-flex-row tw-flex-col\">\r\n    <!-- Form Section -->\r\n    <div class=\"tw-w-full lg:tw-w-3/5 tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-flex tw-flex-col\">\r\n      <div class=\"tw-flex tw-items-center tw-space-x-3 tw-p-6 tw-border-b tw-border-gray-200\">\r\n        <cide-ele-icon class=\"tw-text-blue-600\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\r\n        <h3 class=\"tw-text-lg tw-font-medium tw-text-gray-900 tw-mb-0\">{{ isEditMode() ? 'Edit Control' : 'Quick Add Control' }}</h3>\r\n      </div>\r\n\r\n      <!-- Form -->\r\n      <form [formGroup]=\"controlForm\" (ngSubmit)=\"saveControl()\" class=\"tw-flex tw-flex-col tw-flex-1 tw-p-6 tw-overflow-y-auto\">\r\n        <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-2 tw-gap-4 tw-mb-6\">\r\n          \r\n          <!-- Basic Information Section -->\r\n          <!-- Control Key -->\r\n          <div class=\"tw-space-y-1\">\r\n            <cide-ele-input\r\n              id=\"sype_key\"\r\n              formControlName=\"sype_key\"\r\n              placeholder=\"Enter control key\"\r\n              label=\"Control Key\"\r\n              size=\"sm\">\r\n            </cide-ele-input>\r\n          </div>\r\n\r\n          <!-- Control Label -->\r\n          <div class=\"tw-space-y-1\">\r\n            <cide-ele-input\r\n              id=\"sype_label\"\r\n              formControlName=\"sype_label\"\r\n              placeholder=\"Enter control label\"\r\n              label=\"Control Label\"\r\n              size=\"sm\">\r\n            </cide-ele-input>\r\n          </div>\r\n\r\n          <!-- Control Type -->\r\n          <div class=\"tw-space-y-1\">\r\n            <cide-ele-select\r\n              id=\"sype_type\"\r\n              formControlName=\"sype_type\"\r\n              [options]=\"[\r\n                { value: 'text', label: 'Text Input' },\r\n                { value: 'textarea', label: 'Text Area' },\r\n                { value: 'select', label: 'Select' },\r\n                { value: 'checkbox', label: 'Checkbox' },\r\n                { value: 'radio', label: 'Radio' },\r\n                { value: 'date', label: 'Date' },\r\n                { value: 'number', label: 'Number' },\r\n                { value: 'email', label: 'Email' },\r\n                { value: 'password', label: 'Password' },\r\n                { value: 'file', label: 'File Upload' }\r\n              ]\"\r\n              label=\"Control Type\"\r\n              size=\"sm\">\r\n            </cide-ele-select>\r\n          </div>\r\n\r\n          <!-- Status - Checkbox aligned properly -->\r\n          <div class=\"tw-space-y-1\">\r\n            <cide-ele-input\r\n              id=\"sype_isactive\"\r\n              type=\"checkbox\"\r\n              formControlName=\"sype_isactive\"\r\n              label=\"Active Status\"\r\n              size=\"sm\">\r\n            </cide-ele-input>\r\n          </div>\r\n\r\n          <!-- Placeholder -->\r\n          <div class=\"tw-space-y-1\">\r\n            <cide-ele-input\r\n              id=\"sype_placeholder\"\r\n              formControlName=\"sype_placeholder\"\r\n              placeholder=\"Enter placeholder text\"\r\n              label=\"Placeholder\"\r\n              size=\"sm\">\r\n            </cide-ele-input>\r\n          </div>\r\n\r\n          <!-- Auto Complete - Checkbox aligned properly -->\r\n          <div class=\"tw-space-y-1\">\r\n            <cide-ele-input\r\n              id=\"sype_auto_complete\"\r\n              type=\"checkbox\"\r\n              formControlName=\"sype_auto_complete\"\r\n              label=\"Auto Complete\"\r\n              size=\"sm\">\r\n            </cide-ele-input>\r\n          </div>\r\n\r\n          <!-- Tooltip -->\r\n          <div class=\"tw-space-y-1\">\r\n            <cide-ele-input\r\n              id=\"sype_tooltip\"\r\n              formControlName=\"sype_tooltip\"\r\n              placeholder=\"Enter tooltip text\"\r\n              label=\"Tooltip\"\r\n              size=\"sm\">\r\n            </cide-ele-input>\r\n          </div>\r\n\r\n          <!-- Validation & Sizing Section -->\r\n          <!-- Min/Max Length - Side by side -->\r\n          <div class=\"tw-col-span-2 tw-flex tw-gap-4\">\r\n            <div class=\"tw-flex-1 tw-space-y-1\">\r\n              <cide-ele-input\r\n                id=\"sype_min_length\"\r\n                type=\"number\"\r\n                formControlName=\"sype_min_length\"\r\n                placeholder=\"0\"\r\n                label=\"Min Length\"\r\n                size=\"xs\">\r\n              </cide-ele-input>\r\n            </div>\r\n            <div class=\"tw-flex-1 tw-space-y-1\">\r\n              <cide-ele-input\r\n                id=\"sype_max_length\"\r\n                type=\"number\"\r\n                formControlName=\"sype_max_length\"\r\n                placeholder=\"20\"\r\n                label=\"Max Length\"\r\n                size=\"xs\">\r\n              </cide-ele-input>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Size & Label Placement - Side by side -->\r\n          <div class=\"tw-col-span-2 tw-flex tw-gap-4\">\r\n            <div class=\"tw-flex-1 tw-space-y-1\">\r\n              <cide-ele-select\r\n                id=\"sype_size\"\r\n                formControlName=\"sype_size\"\r\n                label=\"Size\"\r\n                size=\"xs\"\r\n                [options]=\"[\r\n                  { value: 'xs', label: 'XS' },\r\n                  { value: 'sm', label: 'SM' },\r\n                  { value: 'md', label: 'MD' },\r\n                  { value: 'lg', label: 'LG' },\r\n                  { value: 'xl', label: 'XL' },\r\n                  { value: 'xxl', label: 'XXL' }\r\n                ]\">\r\n              </cide-ele-select>\r\n            </div>\r\n            <div class=\"tw-flex-1 tw-space-y-1\">\r\n              <cide-ele-select\r\n                id=\"sype_label_placement\"\r\n                formControlName=\"sype_label_placement\"\r\n                label=\"Label Placement\"\r\n                size=\"xs\"\r\n                [options]=\"[\r\n                  { value: 'left', label: 'Left' },\r\n                  { value: 'floating', label: 'Floating' },\r\n                  { value: 'fixed', label: 'Fixed' }\r\n                ]\">\r\n              </cide-ele-select>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Width & Height - Side by side -->\r\n          <div class=\"tw-col-span-2 tw-flex tw-gap-4\">\r\n            <div class=\"tw-flex-1 tw-space-y-1\">\r\n              <cide-ele-input\r\n                id=\"sype_width\"\r\n                type=\"text\"\r\n                formControlName=\"sype_width\"\r\n                placeholder=\"20px\"\r\n                label=\"Width\"\r\n                size=\"xs\">\r\n              </cide-ele-input>\r\n            </div>\r\n            <div class=\"tw-flex-1 tw-space-y-1\">\r\n              <cide-ele-input\r\n                id=\"sype_height\"\r\n                type=\"text\"\r\n                formControlName=\"sype_height\"\r\n                placeholder=\"20px\"\r\n                label=\"Height\"\r\n                size=\"xs\">\r\n              </cide-ele-input>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Leading Icon -->\r\n          <div class=\"tw-space-y-1\">\r\n            <cide-ele-input\r\n              id=\"sype_leading_icon\"\r\n              formControlName=\"sype_leading_icon\"\r\n              placeholder=\"Enter icon name\"\r\n              label=\"Leading Icon\"\r\n              size=\"sm\">\r\n            </cide-ele-input>\r\n          </div>\r\n\r\n          <!-- Default Value -->\r\n          <div class=\"tw-space-y-1\">\r\n            <cide-ele-input\r\n              id=\"sype_default\"\r\n              formControlName=\"sype_default\"\r\n              placeholder=\"Enter default value\"\r\n              label=\"Default Value\"\r\n              size=\"sm\">\r\n            </cide-ele-input>\r\n          </div>\r\n\r\n          <!-- Regex Pattern -->\r\n          <div class=\"tw-space-y-1\">\r\n            <cide-ele-input\r\n              id=\"sype_regex\"\r\n              formControlName=\"sype_regex\"\r\n              placeholder=\"Enter regex pattern\"\r\n              label=\"Regex Pattern\"\r\n              size=\"sm\">\r\n            </cide-ele-input>\r\n          </div>\r\n\r\n          <!-- Option Key -->\r\n          <div class=\"tw-space-y-1\">\r\n            <cide-ele-input\r\n              id=\"sype_option_key\"\r\n              formControlName=\"sype_option_key\"\r\n              placeholder=\"Enter option key\"\r\n              label=\"Option Key\"\r\n              size=\"sm\">\r\n            </cide-ele-input>\r\n          </div>\r\n\r\n          <!-- Entity ID (Auto-assigned from AppState) - Hidden -->\r\n          <div class=\"tw-space-y-1\" style=\"display: none;\">\r\n            <cide-ele-input\r\n              id=\"sype_entity_id_syen\"\r\n              formControlName=\"sype_entity_id_syen\"\r\n              placeholder=\"Auto-assigned from system\"\r\n              label=\"Entity ID (Auto-assigned)\"\r\n              size=\"sm\"\r\n              readonly>\r\n            </cide-ele-input>\r\n          </div>\r\n\r\n          <!-- Control Options -->\r\n          <div class=\"tw-col-span-2 tw-space-y-1\">\r\n            <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-mb-3\">Control Options</h6>\r\n            <div class=\"tw-grid tw-grid-cols-1 sm:tw-grid-cols-2 lg:tw-grid-cols-3 tw-gap-3\">\r\n              \r\n              <!-- Required -->\r\n              <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\n                <cide-ele-input\r\n                  id=\"sype_required\"\r\n                  type=\"checkbox\"\r\n                  formControlName=\"sype_required\"\r\n                  label=\"Required\"\r\n                  size=\"xs\">\r\n                </cide-ele-input>\r\n              </div>\r\n\r\n              <!-- Disabled -->\r\n              <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\n                <cide-ele-input\r\n                  id=\"sype_disabled\"\r\n                  type=\"checkbox\"\r\n                  formControlName=\"sype_disabled\"\r\n                  label=\"Disabled\"\r\n                  size=\"xs\">\r\n                </cide-ele-input>\r\n              </div>\r\n\r\n              <!-- Hide Label -->\r\n              <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\n                <cide-ele-input\r\n                  id=\"sype_label_hide\"\r\n                  type=\"checkbox\"\r\n                  formControlName=\"sype_label_hide\"\r\n                  label=\"Hide Label\"\r\n                  size=\"xs\">\r\n                </cide-ele-input>\r\n              </div>\r\n\r\n              <!-- Hide Helper Text -->\r\n              <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\n                <cide-ele-input\r\n                  id=\"sype_hide_helper_and_error_text\"\r\n                  type=\"checkbox\"\r\n                  formControlName=\"sype_hide_helper_and_error_text\"\r\n                  label=\"Hide Helper Text\"\r\n                  size=\"xs\">\r\n                </cide-ele-input>\r\n              </div>\r\n\r\n              <!-- Helper Text Collapse -->\r\n              <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\n                <cide-ele-input\r\n                  id=\"sype_helper_text_collapse\"\r\n                  type=\"checkbox\"\r\n                  formControlName=\"sype_helper_text_collapse\"\r\n                  label=\"Collapse Helper\"\r\n                  size=\"xs\">\r\n                </cide-ele-input>\r\n              </div>\r\n\r\n            </div>\r\n          </div>\r\n\r\n        </div>\r\n\r\n        <!-- Form Actions -->\r\n        <div class=\"tw-flex tw-justify-between tw-items-center tw-pt-4 tw-border-t tw-border-gray-200 tw-mt-auto\">\r\n          <!-- Error Message (Left Side) -->\r\n          <cide-form-field-error [formGroup]=\"controlForm\"></cide-form-field-error>\r\n          \r\n          <!-- Action Buttons (Right Side) -->\r\n          <div class=\"tw-flex tw-gap-3\">\r\n            <button \r\n              cideEleButton\r\n              type=\"button\"\r\n              variant=\"outline\"\r\n              (click)=\"cancelForm()\"\r\n              [disabled]=\"loading()\">\r\n              Cancel\r\n            </button>\r\n            <button \r\n              cideEleButton\r\n              type=\"submit\"\r\n              variant=\"primary\"\r\n              [disabled]=\"loading()\">\r\n              {{ isEditMode() ? 'Update Control' : 'Create Control' }}\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </form>\r\n    </div>\r\n\r\n    <!-- Controls List Section -->\r\n    <div class=\"tw-w-full lg:tw-w-2/5 tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-flex tw-flex-col lg:tw-max-h-none tw-max-h-96\">\r\n      <div class=\"tw-p-6 tw-border-b tw-border-gray-200\">\r\n        <h3 class=\"tw-text-lg tw-font-medium tw-text-gray-900 tw-mb-1\">Page Controls</h3>\r\n        <p class=\"tw-text-sm tw-text-gray-500 tw-mb-0\">Controls connected to this page</p>\r\n      </div>\r\n      \r\n      <div class=\"tw-flex-1 tw-overflow-y-auto tw-p-4\" *ngIf=\"!loading() && controls().length > 0\">\r\n        <div \r\n          class=\"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 hover:tw-shadow-md hover:tw-border-gray-300 focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-blue-500 focus:tw-ring-offset-2\" \r\n          *ngFor=\"let control of controls(); trackBy: trackByControlId\"\r\n          [class.tw-bg-blue-50]=\"selectedControlId() === control._id\"\r\n          [class.tw-border-blue-300]=\"selectedControlId() === control._id\"\r\n          [class.tw-shadow-md]=\"selectedControlId() === control._id\"\r\n          (click)=\"selectControl(control)\"\r\n          (keyup.enter)=\"selectControl(control)\"\r\n          (keyup.space)=\"selectControl(control)\"\r\n          tabindex=\"0\"\r\n          role=\"button\"\r\n          [attr.aria-label]=\"'Select control ' + (control.sype_label || control.sype_key)\">\r\n          <div class=\"tw-flex tw-items-start tw-space-x-3\">\r\n            <div class=\"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\">\r\n              <cide-ele-icon class=\"tw-text-blue-600\">settings_input_component</cide-ele-icon>\r\n            </div>\r\n            <div class=\"tw-flex-1 tw-min-w-0\">\r\n              <h4 class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-mb-1 tw-truncate\">{{ control.sype_label || control.sype_key }}</h4>\r\n              <p class=\"tw-text-xs tw-text-gray-500 tw-mb-2 tw-truncate\">{{ control.sype_tooltip || 'No tooltip' }}</p>\r\n              <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\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-gray-100 tw-text-gray-800\">{{ control.sype_type }}</span>\r\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\" \r\n                      [class.tw-bg-red-100]=\"!control.sype_isactive\"\r\n                      [class.tw-text-red-800]=\"!control.sype_isactive\"\r\n                      [class.tw-bg-green-100]=\"control.sype_isactive\"\r\n                      [class.tw-text-green-800]=\"control.sype_isactive\">\r\n                  {{ control.sype_isactive ? 'Active' : 'Inactive' }}\r\n                </span>\r\n              </div>\r\n            </div>\r\n            <div class=\"tw-flex tw-items-center tw-space-x-1 tw-opacity-0 tw-transition-opacity tw-duration-200 group-hover:tw-opacity-100\" \r\n                 [class.tw-opacity-100]=\"selectedControlId() === control._id\">\r\n              <button \r\n                cideEleButton\r\n                variant=\"ghost\"\r\n                size=\"sm\"\r\n                (click)=\"editControl(control); $event.stopPropagation()\">\r\n                <cide-ele-icon>edit</cide-ele-icon>\r\n              </button>\r\n              <button \r\n                cideEleButton\r\n                variant=\"ghost\"\r\n                size=\"sm\"\r\n                (click)=\"deleteControl(control); $event.stopPropagation()\">\r\n                <cide-ele-icon>delete</cide-ele-icon>\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"tw-flex tw-flex-col tw-items-center tw-justify-center tw-py-12 tw-text-center\" *ngIf=\"!loading() && controls().length === 0\">\r\n        <cide-ele-icon class=\"tw-text-4xl tw-text-gray-300 tw-mb-4\">settings_input_component</cide-ele-icon>\r\n        <p class=\"tw-text-gray-500 tw-font-medium tw-mb-1\">No controls available</p>\r\n        <small class=\"tw-text-gray-400\">Create controls using the form on the left</small>\r\n      </div>\r\n\r\n      <div class=\"tw-flex tw-flex-col tw-items-center tw-justify-center tw-py-12 tw-text-center\" *ngIf=\"loading()\">\r\n        <cide-ele-icon class=\"tw-text-2xl tw-text-blue-500 tw-mb-4 tw-animate-spin\">refresh</cide-ele-icon>\r\n        <p class=\"tw-text-gray-500\">Loading controls...</p>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n ", styles: [".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}@media (max-width: 640px){.main-content{padding:1rem;gap:1rem}}\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: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: 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", "step", "size"], outputs: ["ngModelChange"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput", "options", "multiple", "searchable", "showSearchInput", "loading", "valueKey", "labelKey", "treeView"], outputs: ["ngModelChange", "change", "searchChange"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideFormFieldErrorComponent, selector: "cide-form-field-error", inputs: ["control", "formGroup", "fieldName", "customMessages"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCorePageControlsComponent, decorators: [{
             type: Component,
@@ -8110,6 +8140,8 @@ class CideCoreGeneralMasterTypeComponent {
     typeService = inject(CideCoreGeneralMasterTypeService);
     fb = inject(NonNullableFormBuilder);
     router = inject(Router);
+    confirmationService = inject(ConfirmationService);
+    notificationService = inject(NotificationService);
     // Modern ViewChild signals for template renderers (Angular 20 approach)
     typeDetailsRendererTemplate = viewChild.required('typeDetailsRendererTemplate');
     typeStatusRendererTemplate = viewChild.required('typeStatusRendererTemplate');
@@ -8446,28 +8478,33 @@ class CideCoreGeneralMasterTypeComponent {
      * Delete type
      */
     deleteType(type) {
-        if (confirm(`Are you sure you want to delete the type "${type.sygmt_title}"?`)) {
-            this.loading.set(true);
-            this.typeService.deleteType(type._id || "")
-                .pipe(takeUntilDestroyed(this.destroyRef))
-                .subscribe({
-                next: (response) => {
-                    if (response.success) {
-                        this.loadTypes();
-                        console.log('✅ Type deleted successfully');
-                    }
-                    else {
-                        console.error('❌ Failed to delete type:', response.message);
+        this.confirmationService.confirmDelete(type.sygmt_title)
+            .then((confirmed) => {
+            if (confirmed) {
+                this.loading.set(true);
+                this.typeService.deleteType(type._id || "")
+                    .pipe(takeUntilDestroyed(this.destroyRef))
+                    .subscribe({
+                    next: (response) => {
+                        if (response.success) {
+                            this.loadTypes();
+                            this.notificationService.success(`Type "${type.sygmt_title}" has been deleted successfully.`);
+                            console.log('✅ Type deleted successfully');
+                        }
+                        else {
+                            console.error('❌ Failed to delete type:', response.message);
+                            this.notificationService.error(response.message || 'Failed to delete type');
+                        }
+                        this.loading.set(false);
+                    },
+                    error: (error) => {
+                        console.error('Error deleting type:', error);
+                        this.notificationService.error('Failed to delete type. Please try again.');
+                        this.loading.set(false);
                     }
-                    this.loading.set(false);
-                },
-                error: (error) => {
-                    console.error('Error deleting type:', error);
-                    console.error('❌ Failed to delete type. Please try again.');
-                    this.loading.set(false);
-                }
-            });
-        }
+                });
+            }
+        });
     }
     /**
      * Toggle type status
@@ -8686,7 +8723,7 @@ class CideCoreGeneralMasterTypeComponent {
         document.dispatchEvent(event);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCoreGeneralMasterTypeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideCoreGeneralMasterTypeComponent, isStandalone: true, selector: "cide-core-general-master-type", viewQueries: [{ propertyName: "typeDetailsRendererTemplate", first: true, predicate: ["typeDetailsRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "typeStatusRendererTemplate", first: true, predicate: ["typeStatusRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "actionsDropdownRendererTemplate", first: true, predicate: ["actionsDropdownRendererTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- General Master Type Container -->\r\n<div class=\"tw-table tw-w-full tw-h-full\">\r\n\r\n  <!-- Quick Add Form Section -->\r\n  <div class=\"tw-table-row tw-h-0\">\r\n    <div class=\"tw-table-cell tw-px-4 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-white\">\r\n      <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-0\">\r\n        <div class=\"tw-flex tw-items-center tw-space-x-3 tw-mb-3\">\r\n          <cide-ele-icon class=\"tw-text-blue-600 tw-w-4 tw-h-4\">{{ 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 Type' : 'General Master\r\n            Type Management' }}</h6>\r\n        </div>\r\n\r\n        <!-- Parent Type Info (shown when adding child) -->\r\n        @if (typeForm.get('sygmt_id_sygmt')?.value) {\r\n        <div\r\n          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\">\r\n          <cide-ele-icon class=\"tw-text-blue-600 tw-w-4 tw-h-4\">account_tree</cide-ele-icon>\r\n          <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\n            <span class=\"tw-text-sm tw-text-blue-600 tw-font-medium\">{{ isEditMode() ? 'Parent:' : 'Creating child\r\n              under:' }}</span>\r\n            <span class=\"tw-text-sm tw-text-blue-800 tw-font-semibold\">{{ getParentTypeDisplay() }}</span>\r\n          </div>\r\n          <button cideEleButton variant=\"ghost\" size=\"xs\" type=\"button\" (click)=\"clearParentType()\"\r\n            class=\"tw-text-blue-400 hover:tw-text-blue-600\">\r\n            <svg class=\"tw-w-4 tw-h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\" />\r\n            </svg>\r\n          </button>\r\n        </div>\r\n        }\r\n      </div>\r\n\r\n      <form [formGroup]=\"typeForm\" (ngSubmit)=\"onSubmit($event)\" class=\"tw-space-y-2 tw-relative\">\r\n        <!-- Hidden field for parent type ID -->\r\n        <input type=\"hidden\" formControlName=\"sygmt_id_sygmt\">\r\n\r\n        <!-- First Row - Basic fields -->\r\n        <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-6 tw-gap-2\">\r\n          <!-- Type Code -->\r\n          <div class=\"lg:tw-col-span-1\">\r\n            <cide-ele-input formControlName=\"sygmt_code\" label=\"Type Code*\" placeholder=\"Enter type code\" size=\"sm\"\r\n              [maxlength]=\"40\">\r\n            </cide-ele-input>\r\n          </div>\r\n\r\n          <!-- Type Title -->\r\n          <div class=\"lg:tw-col-span-2\">\r\n            <cide-ele-input formControlName=\"sygmt_title\" label=\"Type Title*\" placeholder=\"Enter type title\" size=\"sm\"\r\n              [maxlength]=\"100\">\r\n            </cide-ele-input>\r\n          </div>\r\n\r\n          <!-- Active Status -->\r\n          <div class=\"lg:tw-col-span-1 tw-flex tw-items-center tw-pt-0\">\r\n            <cide-ele-input formControlName=\"sygmt_isactive\" type=\"checkbox\" label=\"Active\" size=\"sm\">\r\n            </cide-ele-input>\r\n          </div>\r\n        </div>\r\n        <!-- Second Row - JSON Configuration and Description/Save side by side -->\r\n        <div class=\"tw-flex tw-gap-4\">\r\n          <!-- JSON Configuration (60% width) -->\r\n          <div class=\"tw-w-3/5\">\r\n            <cide-ele-json-editor formControlName=\"sygmt_configuration\" label=\"Configuration*\" size=\"sm\">\r\n            </cide-ele-json-editor>\r\n          </div>\r\n\r\n          <!-- Description and Save Button (40% width) -->\r\n          <div class=\"tw-w-2/5 tw-flex tw-flex-col tw-space-y-4\">\r\n            <!-- Description -->\r\n            <div class=\"tw-flex-1\">\r\n              <cide-ele-textarea formControlName=\"sygmt_desc\" label=\"Description\" placeholder=\"Enter description\"\r\n                size=\"sm\" [maxlength]=\"255\" [rows]=\"4\">\r\n              </cide-ele-textarea>\r\n            </div>\r\n\r\n            <!-- Action Buttons -->\r\n            <div class=\"tw-flex tw-justify-end tw-space-x-2\">\r\n              <button cideEleButton variant=\"outline\" size=\"sm\" type=\"button\" (click)=\"cancelForm()\"\r\n                [disabled]=\"loading()\" class=\"tw-px-4 tw-py-2\">\r\n                Cancel\r\n              </button>\r\n              <button cideEleButton variant=\"primary\" size=\"sm\" type=\"submit\" [disabled]=\"loading()\"\r\n                class=\"tw-px-4 tw-py-2\" [leftIcon]=\"isEditMode() ? 'edit' : 'add'\">\r\n                {{ isEditMode() ? 'Update' : 'Save' }}\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </form>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Header Section with Filters -->\r\n  <div class=\"tw-table-row tw-h-0\">\r\n    <div class=\"tw-table-cell tw-px-4 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\r\n\r\n      <!-- Error Message -->\r\n      @if (error()) {\r\n      <div class=\"tw-mt-3 tw-p-3 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-4 tw-h-4 tw-mt-0.5 tw-flex-shrink-0\"></cide-ele-icon>\r\n          <div class=\"tw-ml-2\">\r\n            <h3 class=\"tw-text-xs tw-font-medium tw-text-red-800 tw-m-0\">Error</h3>\r\n            <p class=\"tw-text-xs 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  </div>\r\n\r\n  <!-- Main Content Area -->\r\n  <div class=\"tw-table-row\">\r\n    <div class=\"tw-table-cell tw-h-full tw-relative\">\r\n\r\n      <!-- Data Grid Component -->\r\n      <div class=\"tw-h-full tw-overflow-auto\">\r\n        <cide-ele-data-grid [config]=\"gridConfig()\" [templateRenderers]=\"templateRenderers()\"\r\n          (gridEvent)=\"onGridEvent($event)\">\r\n        </cide-ele-data-grid>\r\n      </div>\r\n\r\n    </div>\r\n  </div>\r\n\r\n</div>\r\n\r\n<!-- Template Renderers -->\r\n<ng-template #typeDetailsRendererTemplate let-row=\"row\">\r\n  <div class=\"tw-flex tw-flex-col\">\r\n    <div class=\"tw-font-medium tw-text-gray-900\">{{ row.sygmt_title || 'N/A' }}</div>\r\n    <div class=\"tw-text-sm tw-text-gray-500 tw-truncate tw-max-w-xs\" title=\"{{ row.sygmt_desc || 'No description' }}\">{{\r\n      row.sygmt_desc || 'No description' }}</div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #typeStatusRendererTemplate let-row=\"row\">\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\"\r\n    [class.tw-bg-green-100]=\"row.sygmt_isactive\" [class.tw-text-green-800]=\"row.sygmt_isactive\"\r\n    [class.tw-bg-red-100]=\"!row.sygmt_isactive\" [class.tw-text-red-800]=\"!row.sygmt_isactive\">\r\n    {{ row.sygmt_isactive ? 'Active' : 'Inactive' }}\r\n  </span>\r\n</ng-template>\r\n\r\n\r\n\r\n<ng-template #actionsDropdownRendererTemplate let-row=\"row\">\r\n  <cide-ele-dropdown [items]=\"getActionDropdownItems(row)\" [config]=\"getDropdownConfig()\"\r\n    (itemClick)=\"onDropdownItemClick($event, row)\">\r\n  </cide-ele-dropdown>\r\n</ng-template>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: CideEleDataGridComponent, selector: "cide-ele-data-grid", inputs: ["config", "templateRenderers", "customFormatters", "actionHandlers", "serverSidePagination", "totalServerItems", "currentServerPage", "currentServerPageSize", "dragDropEnabled"], outputs: ["gridEvent"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: 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: CideEleJsonEditorComponent, selector: "cide-ele-json-editor", inputs: ["label", "helperText", "required", "disabled", "showCharacterCount", "config"], outputs: ["valueChange", "objectChange", "errorsChange", "validChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideCoreGeneralMasterTypeComponent, isStandalone: true, selector: "cide-core-general-master-type", viewQueries: [{ propertyName: "typeDetailsRendererTemplate", first: true, predicate: ["typeDetailsRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "typeStatusRendererTemplate", first: true, predicate: ["typeStatusRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "actionsDropdownRendererTemplate", first: true, predicate: ["actionsDropdownRendererTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- General Master Type Container -->\r\n<div class=\"tw-table tw-w-full tw-h-full\">\r\n\r\n  <!-- Quick Add Form Section -->\r\n  <div class=\"tw-table-row tw-h-0\">\r\n    <div class=\"tw-table-cell tw-px-4 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-white\">\r\n      <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-0\">\r\n        <div class=\"tw-flex tw-items-center tw-space-x-3 tw-mb-3\">\r\n          <cide-ele-icon class=\"tw-text-blue-600 tw-w-4 tw-h-4\">{{ 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 Type' : 'General Master\r\n            Type Management' }}</h6>\r\n        </div>\r\n\r\n        <!-- Parent Type Info (shown when adding child) -->\r\n        @if (typeForm.get('sygmt_id_sygmt')?.value) {\r\n        <div\r\n          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\">\r\n          <cide-ele-icon class=\"tw-text-blue-600 tw-w-4 tw-h-4\">account_tree</cide-ele-icon>\r\n          <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\n            <span class=\"tw-text-sm tw-text-blue-600 tw-font-medium\">{{ isEditMode() ? 'Parent:' : 'Creating child\r\n              under:' }}</span>\r\n            <span class=\"tw-text-sm tw-text-blue-800 tw-font-semibold\">{{ getParentTypeDisplay() }}</span>\r\n          </div>\r\n          <button cideEleButton variant=\"ghost\" size=\"xs\" type=\"button\" (click)=\"clearParentType()\"\r\n            class=\"tw-text-blue-400 hover:tw-text-blue-600\">\r\n            <svg class=\"tw-w-4 tw-h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\" />\r\n            </svg>\r\n          </button>\r\n        </div>\r\n        }\r\n      </div>\r\n\r\n      <form [formGroup]=\"typeForm\" (ngSubmit)=\"onSubmit($event)\" class=\"tw-space-y-2 tw-relative\">\r\n        <!-- Hidden field for parent type ID -->\r\n        <input type=\"hidden\" formControlName=\"sygmt_id_sygmt\">\r\n\r\n        <!-- First Row - Basic fields -->\r\n        <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-6 tw-gap-2\">\r\n          <!-- Type Code -->\r\n          <div class=\"lg:tw-col-span-1\">\r\n            <cide-ele-input formControlName=\"sygmt_code\" label=\"Type Code*\" placeholder=\"Enter type code\" size=\"sm\"\r\n              [maxlength]=\"40\">\r\n            </cide-ele-input>\r\n          </div>\r\n\r\n          <!-- Type Title -->\r\n          <div class=\"lg:tw-col-span-2\">\r\n            <cide-ele-input formControlName=\"sygmt_title\" label=\"Type Title*\" placeholder=\"Enter type title\" size=\"sm\"\r\n              [maxlength]=\"100\">\r\n            </cide-ele-input>\r\n          </div>\r\n\r\n          <!-- Active Status -->\r\n          <div class=\"lg:tw-col-span-1 tw-flex tw-items-center tw-pt-0\">\r\n            <cide-ele-input formControlName=\"sygmt_isactive\" type=\"checkbox\" label=\"Active\" size=\"sm\">\r\n            </cide-ele-input>\r\n          </div>\r\n        </div>\r\n        <!-- Second Row - JSON Configuration and Description/Save side by side -->\r\n        <div class=\"tw-flex tw-gap-4\">\r\n          <!-- JSON Configuration (60% width) -->\r\n          <div class=\"tw-w-3/5\">\r\n            <cide-ele-json-editor formControlName=\"sygmt_configuration\" label=\"Configuration*\" size=\"sm\">\r\n            </cide-ele-json-editor>\r\n          </div>\r\n\r\n          <!-- Description and Save Button (40% width) -->\r\n          <div class=\"tw-w-2/5 tw-flex tw-flex-col tw-space-y-4\">\r\n            <!-- Description -->\r\n            <div class=\"tw-flex-1\">\r\n              <cide-ele-textarea formControlName=\"sygmt_desc\" label=\"Description\" placeholder=\"Enter description\"\r\n                size=\"sm\" [maxlength]=\"255\" [rows]=\"4\">\r\n              </cide-ele-textarea>\r\n            </div>\r\n\r\n            <!-- Action Buttons -->\r\n            <div class=\"tw-flex tw-justify-end tw-space-x-2\">\r\n              <button cideEleButton variant=\"outline\" size=\"sm\" type=\"button\" (click)=\"cancelForm()\"\r\n                [disabled]=\"loading()\" class=\"tw-px-4 tw-py-2\">\r\n                Cancel\r\n              </button>\r\n              <button cideEleButton variant=\"primary\" size=\"sm\" type=\"submit\" [disabled]=\"loading()\"\r\n                class=\"tw-px-4 tw-py-2\" [leftIcon]=\"isEditMode() ? 'edit' : 'add'\">\r\n                {{ isEditMode() ? 'Update' : 'Save' }}\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </form>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Header Section with Filters -->\r\n  <div class=\"tw-table-row tw-h-0\">\r\n    <div class=\"tw-table-cell tw-px-4 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\r\n\r\n      <!-- Error Message -->\r\n      @if (error()) {\r\n      <div class=\"tw-mt-3 tw-p-3 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-4 tw-h-4 tw-mt-0.5 tw-flex-shrink-0\"></cide-ele-icon>\r\n          <div class=\"tw-ml-2\">\r\n            <h3 class=\"tw-text-xs tw-font-medium tw-text-red-800 tw-m-0\">Error</h3>\r\n            <p class=\"tw-text-xs 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  </div>\r\n\r\n  <!-- Main Content Area -->\r\n  <div class=\"tw-table-row\">\r\n    <div class=\"tw-table-cell tw-h-full tw-relative\">\r\n\r\n      <!-- Data Grid Component -->\r\n      <div class=\"tw-h-full tw-overflow-auto\">\r\n        <cide-ele-data-grid [config]=\"gridConfig()\" [templateRenderers]=\"templateRenderers()\"\r\n          (gridEvent)=\"onGridEvent($event)\">\r\n        </cide-ele-data-grid>\r\n      </div>\r\n\r\n    </div>\r\n  </div>\r\n\r\n</div>\r\n\r\n<!-- Template Renderers -->\r\n<ng-template #typeDetailsRendererTemplate let-row=\"row\">\r\n  <div class=\"tw-flex tw-flex-col\">\r\n    <div class=\"tw-font-medium tw-text-gray-900\">{{ row.sygmt_title || 'N/A' }}</div>\r\n    <div class=\"tw-text-sm tw-text-gray-500 tw-truncate tw-max-w-xs\" title=\"{{ row.sygmt_desc || 'No description' }}\">{{\r\n      row.sygmt_desc || 'No description' }}</div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #typeStatusRendererTemplate let-row=\"row\">\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\"\r\n    [class.tw-bg-green-100]=\"row.sygmt_isactive\" [class.tw-text-green-800]=\"row.sygmt_isactive\"\r\n    [class.tw-bg-red-100]=\"!row.sygmt_isactive\" [class.tw-text-red-800]=\"!row.sygmt_isactive\">\r\n    {{ row.sygmt_isactive ? 'Active' : 'Inactive' }}\r\n  </span>\r\n</ng-template>\r\n\r\n\r\n\r\n<ng-template #actionsDropdownRendererTemplate let-row=\"row\">\r\n  <cide-ele-dropdown [items]=\"getActionDropdownItems(row)\" [config]=\"getDropdownConfig()\"\r\n    (itemClick)=\"onDropdownItemClick($event, row)\">\r\n  </cide-ele-dropdown>\r\n</ng-template>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: CideEleDataGridComponent, selector: "cide-ele-data-grid", inputs: ["config", "templateRenderers", "customFormatters", "actionHandlers", "serverSidePagination", "totalServerItems", "currentServerPage", "currentServerPageSize", "dragDropEnabled"], outputs: ["gridEvent"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: 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", "step", "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: 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: "20.1.7", ngImport: i0, type: CideCoreGeneralMasterTypeComponent, decorators: [{
             type: Component,
@@ -9092,6 +9129,14 @@ class CideCoreGeneralMasterComponent {
             return;
         }
         const formValue = this.masterForm.getRawValue();
+        // Helper to convert empty strings to null for FK fields
+        const toNullIfEmpty = (value) => {
+            if (value === null || value === undefined)
+                return value;
+            if (typeof value === 'string' && value.trim() === '')
+                return null;
+            return value;
+        };
         const newMaster = {
             _id: '',
             sygms_code: formValue.sygms_code,
@@ -9099,8 +9144,8 @@ class CideCoreGeneralMasterComponent {
             sygms_title: formValue.sygms_title,
             sygms_desc: formValue.sygms_desc,
             sygms_configuration: JSON.parse(formValue.sygms_configuration),
-            sygms_id_sygms: formValue.sygms_id_sygms || undefined,
-            sygms_entity_id_syen: this.appState.getActiveEntityId() || undefined,
+            sygms_id_sygms: toNullIfEmpty(formValue.sygms_id_sygms),
+            sygms_entity_id_syen: toNullIfEmpty(this.appState.getActiveEntityId()),
             sygms_isactive: formValue.sygms_isactive
         };
         this.loading.set(true);
@@ -9135,6 +9180,14 @@ class CideCoreGeneralMasterComponent {
             return;
         }
         const formValue = this.masterForm.getRawValue();
+        // Helper to convert empty strings to null for FK fields
+        const toNullIfEmpty = (value) => {
+            if (value === null || value === undefined)
+                return value;
+            if (typeof value === 'string' && value.trim() === '')
+                return null;
+            return value;
+        };
         const updatedMaster = {
             _id: this.editingMasterId(),
             sygms_code: formValue.sygms_code,
@@ -9142,8 +9195,8 @@ class CideCoreGeneralMasterComponent {
             sygms_title: formValue.sygms_title,
             sygms_desc: formValue.sygms_desc,
             sygms_configuration: JSON.parse(formValue.sygms_configuration),
-            sygms_id_sygms: formValue.sygms_id_sygms || undefined,
-            sygms_entity_id_syen: this.appState.getActiveEntityId() || undefined,
+            sygms_id_sygms: toNullIfEmpty(formValue.sygms_id_sygms),
+            sygms_entity_id_syen: toNullIfEmpty(this.appState.getActiveEntityId()),
             sygms_isactive: formValue.sygms_isactive
         };
         this.loading.set(true);
@@ -9185,6 +9238,52 @@ class CideCoreGeneralMasterComponent {
             sygms_isactive: master.sygms_isactive
         });
         this.masterForm.markAsPristine();
+        // Scroll to form section
+        setTimeout(() => {
+            const formElement = document.querySelector('.tw-table-row.tw-h-0');
+            if (formElement) {
+                formElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
+            }
+        }, 100);
+    }
+    /**
+     * Copy master - opens form with same data for creating a new record
+     */
+    copyMaster(master) {
+        // Set to create mode (not edit mode)
+        this.isEditMode.set(false);
+        this.editingMasterId.set(null);
+        this.retrievedMaster.set(null);
+        // Generate copy suffix for code and title
+        const copySuffix = ' (Copy)';
+        const originalCode = master.sygms_code || '';
+        const originalTitle = master.sygms_title || '';
+        // Append "(Copy)" to code and title, but remove it if it already exists
+        const newCode = originalCode.endsWith(copySuffix)
+            ? originalCode
+            : originalCode + copySuffix;
+        const newTitle = originalTitle.endsWith(copySuffix)
+            ? originalTitle
+            : originalTitle + copySuffix;
+        // Patch form with master data, but with modified code and title
+        this.masterForm.patchValue({
+            sygms_code: newCode,
+            sygms_title: newTitle,
+            sygms_desc: master.sygms_desc || '',
+            sygms_configuration: JSON.stringify(master.sygms_configuration || {}, null, 2),
+            sygms_id_sygms: master.sygms_id_sygms || '',
+            sygms_entity_id_syen: master.sygms_entity_id_syen || this.appState.getActiveEntityId(),
+            sygms_isactive: master.sygms_isactive ?? true
+        });
+        // Mark form as dirty so user knows they need to save
+        this.masterForm.markAsDirty();
+        // Scroll to form section
+        setTimeout(() => {
+            const formElement = document.querySelector('.tw-table-row.tw-h-0');
+            if (formElement) {
+                formElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
+            }
+        }, 100);
     }
     /**
      * Delete master
@@ -9333,6 +9432,12 @@ class CideCoreGeneralMasterComponent {
                 icon: 'edit',
                 disabled: false
             },
+            {
+                id: 'copy',
+                label: 'Copy',
+                icon: 'content_copy',
+                disabled: false
+            },
             {
                 id: 'addChild',
                 label: 'Add Child',
@@ -9373,6 +9478,10 @@ class CideCoreGeneralMasterComponent {
                 console.log('🔵 Calling editMaster with:', row);
                 this.editMaster(row);
                 break;
+            case 'copy':
+                console.log('🔵 Calling copyMaster with:', row);
+                this.copyMaster(row);
+                break;
             case 'addChild':
                 console.log('🔵 Calling onAddChild with:', row);
                 this.onAddChild(row);
@@ -9444,7 +9553,7 @@ class CideCoreGeneralMasterComponent {
         document.dispatchEvent(event);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCoreGeneralMasterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideCoreGeneralMasterComponent, isStandalone: true, selector: "cide-core-general-master", viewQueries: [{ propertyName: "masterDetailsRendererTemplate", first: true, predicate: ["masterDetailsRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "masterStatusRendererTemplate", first: true, predicate: ["masterStatusRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "actionsDropdownRendererTemplate", first: true, predicate: ["actionsDropdownRendererTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- General Master with Shared Wrapper -->\r\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'core_general_master' }\">\r\n<div class=\"tw-table tw-w-full tw-h-full\">\r\n\r\n  <!-- Quick Add Form Section -->\r\n  <div class=\"tw-table-row tw-h-0\">\r\n    <div class=\"tw-table-cell tw-px-4 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-white\">\r\n      <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-0\">\r\n        <div class=\"tw-flex tw-items-center tw-space-x-3 tw-mb-3\">\r\n          <cide-ele-icon class=\"tw-text-blue-600 tw-w-4 tw-h-4\">{{ 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 Master' : 'Quick Add Master' }}</h6>\r\n        </div>\r\n        \r\n        <!-- Parent Master Info Box -->\r\n        @if (masterForm.get('sygms_id_sygms')?.value) {\r\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\">\r\n            <cide-ele-icon class=\"tw-text-blue-600 tw-w-4 tw-h-4\">account_tree</cide-ele-icon>\r\n            <span class=\"tw-text-sm tw-font-medium tw-text-blue-800\">Adding Child</span>\r\n            <span class=\"tw-text-xs tw-text-blue-700\">\r\n              Parent: <span class=\"tw-font-medium\">{{ getParentMasterDisplay() }}</span>\r\n            </span>\r\n            <button \r\n              type=\"button\"\r\n              (click)=\"clearParentMaster()\"\r\n              class=\"tw-text-sm tw-text-blue-600 hover:tw-text-blue-800 hover:tw-bg-blue-100 tw-rounded tw-px-1\">\r\n              \u00D7\r\n            </button>\r\n          </div>\r\n        }\r\n      </div>\r\n      \r\n      <form [formGroup]=\"masterForm\" class=\"tw-space-y-2\">\r\n        \r\n        <!-- First Row - Basic fields -->\r\n        <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-6 tw-gap-2\">\r\n          <!-- Master Code -->\r\n          <div class=\"lg:tw-col-span-1\">\r\n            <cide-ele-input \r\n              formControlName=\"sygms_code\" \r\n              label=\"Master Code*\" \r\n              placeholder=\"Enter master code\"\r\n              size=\"sm\"\r\n              [required]=\"true\" \r\n              [maxlength]=\"40\">\r\n            </cide-ele-input>\r\n          </div>\r\n          \r\n          <!-- Master Title -->\r\n          <div class=\"lg:tw-col-span-3\">\r\n            <cide-ele-input \r\n              formControlName=\"sygms_title\" \r\n              label=\"Master Title*\" \r\n              placeholder=\"Enter master title\"\r\n              size=\"sm\"\r\n              [required]=\"true\" \r\n              [maxlength]=\"150\">\r\n            </cide-ele-input>\r\n          </div>\r\n          \r\n          <!-- Active Status -->\r\n          <div class=\"lg:tw-col-span-1 tw-flex tw-items-center tw-pt-0\">\r\n            <cide-ele-input \r\n              formControlName=\"sygms_isactive\"\r\n              type=\"checkbox\"\r\n              label=\"Active\"\r\n              size=\"sm\">\r\n            </cide-ele-input>\r\n          </div>\r\n        </div>\r\n        \r\n        <!-- Third Row - JSON Configuration and Description/Save side by side -->\r\n        <div class=\"tw-flex tw-gap-4\">\r\n          <!-- JSON Configuration (60% width) -->\r\n          <div class=\"tw-w-3/5\">\r\n            <cide-ele-json-editor \r\n              formControlName=\"sygms_configuration\" \r\n              label=\"Configuration*\" \r\n              size=\"sm\"\r\n              [required]=\"true\">\r\n            </cide-ele-json-editor>\r\n          </div>\r\n          \r\n          <!-- Description and Save Button (40% width) -->\r\n          <div class=\"tw-w-2/5 tw-flex tw-flex-col tw-space-y-4\">\r\n            <!-- Description -->\r\n            <div class=\"tw-flex-1\">\r\n              <cide-ele-textarea \r\n                formControlName=\"sygms_desc\" \r\n                label=\"Description\" \r\n                placeholder=\"Enter description\"\r\n                size=\"sm\"\r\n                [maxlength]=\"500\" \r\n                [rows]=\"4\">\r\n              </cide-ele-textarea>\r\n            </div>\r\n            \r\n            <!-- Action Buttons -->\r\n            <div class=\"tw-flex tw-justify-end tw-space-x-2\">\r\n              <button \r\n                cideEleButton \r\n                variant=\"outline\" \r\n                size=\"sm\" \r\n                type=\"button\" \r\n                (click)=\"resetForm()\"\r\n                [disabled]=\"loading()\"\r\n                class=\"tw-px-4 tw-py-2\">\r\n                Reset\r\n              </button>\r\n              @if (isEditMode()) {\r\n                <button \r\n                  cideEleButton \r\n                  variant=\"outline\" \r\n                  size=\"sm\" \r\n                  type=\"button\" \r\n                  (click)=\"cancelForm()\"\r\n                  [disabled]=\"loading()\"\r\n                  class=\"tw-px-4 tw-py-2\">\r\n                  Cancel\r\n                </button>\r\n              }\r\n              <button \r\n                cideEleButton \r\n                variant=\"primary\" \r\n                size=\"sm\" \r\n                type=\"submit\"\r\n                (click)=\"saveMaster()\"\r\n                [disabled]=\"!masterForm.valid || loading()\"\r\n                class=\"tw-px-4 tw-py-2\">\r\n                <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\r\n                {{ isEditMode() ? 'Update' : 'Save' }}\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </form>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Header Section with Filters -->\r\n  <div class=\"tw-table-row tw-h-0\">\r\n    <div class=\"tw-table-cell tw-px-4 tw-py-2 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-2 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-3\">\r\n          <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\n            @if (typeTitle()) {\r\n              <div>\r\n                <p class=\"tw-text-xs tw-text-gray-500 tw-m-0\">Type: {{ typeTitle() }}</p>\r\n              </div>\r\n            }\r\n          </div>\r\n        </div>\r\n\r\n        <!-- Actions -->\r\n        <div class=\"tw-flex tw-flex-col sm:tw-flex-row tw-items-start sm:tw-items-center tw-space-y-2 sm:tw-space-y-0 sm:tw-space-x-3\">\r\n          <!-- Actions can be added here in the future -->\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Error Message -->\r\n      @if (error()) {\r\n        <div class=\"tw-mt-3 tw-p-3 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-4 tw-h-4 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  </div>\r\n\r\n  <!-- Main Content Area -->\r\n  <div class=\"tw-table-row tw-h-0\">\r\n    <div class=\"tw-table-cell tw-h-full tw-relative tw-p-0\">\r\n      \r\n      <!-- Data Grid Component -->\r\n      <div class=\"tw-h-full tw-overflow-hidden\">\r\n        <cide-ele-data-grid \r\n          class=\"tw-h-full\"\r\n          [config]=\"gridConfig()\" \r\n          [templateRenderers]=\"templateRenderers()\"\r\n          (gridEvent)=\"onGridEvent($event)\">\r\n        </cide-ele-data-grid>\r\n      </div>\r\n\r\n    </div>\r\n  </div>\r\n\r\n</div>\r\n\r\n<!-- Template Renderers -->\r\n<ng-template #masterDetailsRendererTemplate let-row=\"row\">\r\n  <div class=\"tw-flex tw-flex-col tw-w-full\">\r\n    <div class=\"tw-font-medium tw-text-gray-900\">{{ row.sygms_title || 'N/A' }}</div>\r\n    <div class=\"tw-text-sm tw-text-gray-500 tw-truncate\">{{ row.sygms_desc || 'No description' }}</div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #masterStatusRendererTemplate let-row=\"row\">\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\"\r\n        [class.tw-bg-green-100]=\"row.sygms_isactive\"\r\n        [class.tw-text-green-800]=\"row.sygms_isactive\"\r\n        [class.tw-bg-red-100]=\"!row.sygms_isactive\"\r\n        [class.tw-text-red-800]=\"!row.sygms_isactive\">\r\n    {{ row.sygms_isactive ? 'Active' : 'Inactive' }}\r\n  </span>\r\n</ng-template>\r\n\r\n<ng-template #actionsDropdownRendererTemplate let-row=\"row\">\r\n  <cide-ele-dropdown\r\n    [items]=\"getActionDropdownItems(row)\"\r\n    [config]=\"getDropdownConfig()\"\r\n    (itemClick)=\"onDropdownItemClick($event, row)\">\r\n  </cide-ele-dropdown>\r\n</ng-template>\r\n</cide-lyt-shared-wrapper> ", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideEleDataGridComponent, selector: "cide-ele-data-grid", inputs: ["config", "templateRenderers", "customFormatters", "actionHandlers", "serverSidePagination", "totalServerItems", "currentServerPage", "currentServerPageSize", "dragDropEnabled"], outputs: ["gridEvent"] }, { 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: CideEleJsonEditorComponent, selector: "cide-ele-json-editor", inputs: ["label", "helperText", "required", "disabled", "showCharacterCount", "config"], outputs: ["valueChange", "objectChange", "errorsChange", "validChange"] }, { kind: "component", type: CideLytSharedWrapperComponent, selector: "cide-lyt-shared-wrapper", inputs: ["shared_wrapper_setup_param", "breadcrumb_data"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideCoreGeneralMasterComponent, isStandalone: true, selector: "cide-core-general-master", viewQueries: [{ propertyName: "masterDetailsRendererTemplate", first: true, predicate: ["masterDetailsRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "masterStatusRendererTemplate", first: true, predicate: ["masterStatusRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "actionsDropdownRendererTemplate", first: true, predicate: ["actionsDropdownRendererTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- General Master with Shared Wrapper -->\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'core_general_master' }\">\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-4 tw-py-3 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-4 tw-h-4\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\n          <div class=\"tw-flex tw-flex-col\">\n            <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-m-0\">{{ isEditMode() ? 'Edit Master' : 'Quick Add Master' }}</h6>\n            @if (typeTitle()) {\n              <p class=\"tw-text-xs tw-text-gray-500 tw-m-0 tw-mt-0.5\">Type: <span class=\"tw-font-medium tw-text-gray-700\">{{ typeTitle() }}</span></p>\n            }\n          </div>\n        </div>\n        \n        <!-- Parent Master Info Box -->\n        @if (masterForm.get('sygms_id_sygms')?.value) {\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            <span class=\"tw-text-sm tw-font-medium tw-text-blue-800\">Adding Child</span>\n            <span class=\"tw-text-xs tw-text-blue-700\">\n              Parent: <span class=\"tw-font-medium\">{{ getParentMasterDisplay() }}</span>\n            </span>\n            <button \n              type=\"button\"\n              (click)=\"clearParentMaster()\"\n              class=\"tw-text-sm tw-text-blue-600 hover:tw-text-blue-800 hover:tw-bg-blue-100 tw-rounded tw-px-1\">\n              \u00D7\n            </button>\n          </div>\n        }\n      </div>\n      \n      <form [formGroup]=\"masterForm\" class=\"tw-space-y-2\">\n        \n        <!-- First Row - Basic fields -->\n        <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-6 tw-gap-2\">\n          <!-- Master Code -->\n          <div class=\"lg:tw-col-span-1\">\n            <cide-ele-input \n              formControlName=\"sygms_code\" \n              label=\"Master Code*\" \n              placeholder=\"Enter master code\"\n              size=\"sm\"\n              [required]=\"true\" \n              [maxlength]=\"40\">\n            </cide-ele-input>\n          </div>\n          \n          <!-- Master Title -->\n          <div class=\"lg:tw-col-span-3\">\n            <cide-ele-input \n              formControlName=\"sygms_title\" \n              label=\"Master Title*\" \n              placeholder=\"Enter master title\"\n              size=\"sm\"\n              [required]=\"true\" \n              [maxlength]=\"150\">\n            </cide-ele-input>\n          </div>\n          \n          <!-- Active Status -->\n          <div class=\"lg:tw-col-span-1 tw-flex tw-items-center tw-pt-0\">\n            <cide-ele-input \n              formControlName=\"sygms_isactive\"\n              type=\"checkbox\"\n              label=\"Active\"\n              size=\"sm\">\n            </cide-ele-input>\n          </div>\n        </div>\n        \n        <!-- Third Row - JSON Configuration and Description/Save side by side -->\n        <div class=\"tw-flex tw-gap-4\">\n          <!-- JSON Configuration (60% width) -->\n          <div class=\"tw-w-3/5\">\n            <cide-ele-json-editor \n              formControlName=\"sygms_configuration\" \n              label=\"Configuration*\" \n              size=\"sm\"\n              [required]=\"true\">\n            </cide-ele-json-editor>\n          </div>\n          \n          <!-- Description and Save Button (40% width) -->\n          <div class=\"tw-w-2/5 tw-flex tw-flex-col tw-space-y-4\">\n            <!-- Description -->\n            <div class=\"tw-flex-1\">\n              <cide-ele-textarea \n                formControlName=\"sygms_desc\" \n                label=\"Description\" \n                placeholder=\"Enter description\"\n                size=\"sm\"\n                [maxlength]=\"500\" \n                [rows]=\"4\">\n              </cide-ele-textarea>\n            </div>\n            \n            <!-- Action Buttons -->\n            <div class=\"tw-flex tw-justify-end tw-space-x-2\">\n              <button \n                cideEleButton \n                variant=\"outline\" \n                size=\"sm\" \n                type=\"button\" \n                (click)=\"resetForm()\"\n                [disabled]=\"loading()\"\n                class=\"tw-px-4 tw-py-2\">\n                Reset\n              </button>\n              @if (isEditMode()) {\n                <button \n                  cideEleButton \n                  variant=\"outline\" \n                  size=\"sm\" \n                  type=\"button\" \n                  (click)=\"cancelForm()\"\n                  [disabled]=\"loading()\"\n                  class=\"tw-px-4 tw-py-2\">\n                  Cancel\n                </button>\n              }\n              <button \n                cideEleButton \n                variant=\"primary\" \n                size=\"sm\" \n                type=\"submit\"\n                (click)=\"saveMaster()\"\n                [disabled]=\"!masterForm.valid || loading()\"\n                class=\"tw-px-4 tw-py-2\">\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' : 'Save' }}\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-4 tw-py-2 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-2 sm:tw-space-y-0\">\n        \n        <!-- Title and Back Button -->\n        <div class=\"tw-flex tw-items-center tw-space-x-3\">\n          <div class=\"tw-flex tw-items-center tw-space-x-2\">\n            @if (typeTitle()) {\n              <div>\n                <p class=\"tw-text-xs tw-text-gray-500 tw-m-0\">Type: {{ typeTitle() }}</p>\n              </div>\n            }\n          </div>\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-2 sm:tw-space-y-0 sm:tw-space-x-3\">\n          <!-- Actions can be added here in the future -->\n        </div>\n      </div>\n\n      <!-- Error Message -->\n      @if (error()) {\n        <div class=\"tw-mt-3 tw-p-3 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-4 tw-h-4 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 tw-h-0\">\n    <div class=\"tw-table-cell tw-h-full tw-relative tw-p-0\">\n      \n      <!-- Data Grid Component -->\n      <div class=\"tw-h-full tw-overflow-hidden\">\n        <cide-ele-data-grid \n          class=\"tw-h-full\"\n          [config]=\"gridConfig()\" \n          [templateRenderers]=\"templateRenderers()\"\n          (gridEvent)=\"onGridEvent($event)\">\n        </cide-ele-data-grid>\n      </div>\n\n    </div>\n  </div>\n\n</div>\n\n<!-- Template Renderers -->\n<ng-template #masterDetailsRendererTemplate let-row=\"row\">\n  <div class=\"tw-flex tw-flex-col tw-w-full\">\n    <div class=\"tw-font-medium tw-text-gray-900\">{{ row.sygms_title || 'N/A' }}</div>\n    <div class=\"tw-text-sm tw-text-gray-500 tw-truncate\">{{ row.sygms_desc || 'No description' }}</div>\n  </div>\n</ng-template>\n\n<ng-template #masterStatusRendererTemplate let-row=\"row\">\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\"\n        [class.tw-bg-green-100]=\"row.sygms_isactive\"\n        [class.tw-text-green-800]=\"row.sygms_isactive\"\n        [class.tw-bg-red-100]=\"!row.sygms_isactive\"\n        [class.tw-text-red-800]=\"!row.sygms_isactive\">\n    {{ row.sygms_isactive ? 'Active' : 'Inactive' }}\n  </span>\n</ng-template>\n\n<ng-template #actionsDropdownRendererTemplate let-row=\"row\">\n  <cide-ele-dropdown\n    [items]=\"getActionDropdownItems(row)\"\n    [config]=\"getDropdownConfig()\"\n    (itemClick)=\"onDropdownItemClick($event, row)\">\n  </cide-ele-dropdown>\n</ng-template>\n</cide-lyt-shared-wrapper> ", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideEleDataGridComponent, selector: "cide-ele-data-grid", inputs: ["config", "templateRenderers", "customFormatters", "actionHandlers", "serverSidePagination", "totalServerItems", "currentServerPage", "currentServerPageSize", "dragDropEnabled"], outputs: ["gridEvent"] }, { 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", "step", "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: CideEleJsonEditorComponent, selector: "cide-ele-json-editor", inputs: ["label", "helperText", "required", "disabled", "showCharacterCount", "config"], outputs: ["valueChange", "objectChange", "errorsChange", "validChange"] }, { kind: "component", type: CideLytSharedWrapperComponent, selector: "cide-lyt-shared-wrapper", inputs: ["shared_wrapper_setup_param", "breadcrumb_data"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCoreGeneralMasterComponent, decorators: [{
             type: Component,
@@ -9460,7 +9569,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                         CideEleDropdownComponent,
                         CideEleJsonEditorComponent,
                         CideLytSharedWrapperComponent
-                    ], template: "<!-- General Master with Shared Wrapper -->\r\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'core_general_master' }\">\r\n<div class=\"tw-table tw-w-full tw-h-full\">\r\n\r\n  <!-- Quick Add Form Section -->\r\n  <div class=\"tw-table-row tw-h-0\">\r\n    <div class=\"tw-table-cell tw-px-4 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-white\">\r\n      <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-0\">\r\n        <div class=\"tw-flex tw-items-center tw-space-x-3 tw-mb-3\">\r\n          <cide-ele-icon class=\"tw-text-blue-600 tw-w-4 tw-h-4\">{{ 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 Master' : 'Quick Add Master' }}</h6>\r\n        </div>\r\n        \r\n        <!-- Parent Master Info Box -->\r\n        @if (masterForm.get('sygms_id_sygms')?.value) {\r\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\">\r\n            <cide-ele-icon class=\"tw-text-blue-600 tw-w-4 tw-h-4\">account_tree</cide-ele-icon>\r\n            <span class=\"tw-text-sm tw-font-medium tw-text-blue-800\">Adding Child</span>\r\n            <span class=\"tw-text-xs tw-text-blue-700\">\r\n              Parent: <span class=\"tw-font-medium\">{{ getParentMasterDisplay() }}</span>\r\n            </span>\r\n            <button \r\n              type=\"button\"\r\n              (click)=\"clearParentMaster()\"\r\n              class=\"tw-text-sm tw-text-blue-600 hover:tw-text-blue-800 hover:tw-bg-blue-100 tw-rounded tw-px-1\">\r\n              \u00D7\r\n            </button>\r\n          </div>\r\n        }\r\n      </div>\r\n      \r\n      <form [formGroup]=\"masterForm\" class=\"tw-space-y-2\">\r\n        \r\n        <!-- First Row - Basic fields -->\r\n        <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-6 tw-gap-2\">\r\n          <!-- Master Code -->\r\n          <div class=\"lg:tw-col-span-1\">\r\n            <cide-ele-input \r\n              formControlName=\"sygms_code\" \r\n              label=\"Master Code*\" \r\n              placeholder=\"Enter master code\"\r\n              size=\"sm\"\r\n              [required]=\"true\" \r\n              [maxlength]=\"40\">\r\n            </cide-ele-input>\r\n          </div>\r\n          \r\n          <!-- Master Title -->\r\n          <div class=\"lg:tw-col-span-3\">\r\n            <cide-ele-input \r\n              formControlName=\"sygms_title\" \r\n              label=\"Master Title*\" \r\n              placeholder=\"Enter master title\"\r\n              size=\"sm\"\r\n              [required]=\"true\" \r\n              [maxlength]=\"150\">\r\n            </cide-ele-input>\r\n          </div>\r\n          \r\n          <!-- Active Status -->\r\n          <div class=\"lg:tw-col-span-1 tw-flex tw-items-center tw-pt-0\">\r\n            <cide-ele-input \r\n              formControlName=\"sygms_isactive\"\r\n              type=\"checkbox\"\r\n              label=\"Active\"\r\n              size=\"sm\">\r\n            </cide-ele-input>\r\n          </div>\r\n        </div>\r\n        \r\n        <!-- Third Row - JSON Configuration and Description/Save side by side -->\r\n        <div class=\"tw-flex tw-gap-4\">\r\n          <!-- JSON Configuration (60% width) -->\r\n          <div class=\"tw-w-3/5\">\r\n            <cide-ele-json-editor \r\n              formControlName=\"sygms_configuration\" \r\n              label=\"Configuration*\" \r\n              size=\"sm\"\r\n              [required]=\"true\">\r\n            </cide-ele-json-editor>\r\n          </div>\r\n          \r\n          <!-- Description and Save Button (40% width) -->\r\n          <div class=\"tw-w-2/5 tw-flex tw-flex-col tw-space-y-4\">\r\n            <!-- Description -->\r\n            <div class=\"tw-flex-1\">\r\n              <cide-ele-textarea \r\n                formControlName=\"sygms_desc\" \r\n                label=\"Description\" \r\n                placeholder=\"Enter description\"\r\n                size=\"sm\"\r\n                [maxlength]=\"500\" \r\n                [rows]=\"4\">\r\n              </cide-ele-textarea>\r\n            </div>\r\n            \r\n            <!-- Action Buttons -->\r\n            <div class=\"tw-flex tw-justify-end tw-space-x-2\">\r\n              <button \r\n                cideEleButton \r\n                variant=\"outline\" \r\n                size=\"sm\" \r\n                type=\"button\" \r\n                (click)=\"resetForm()\"\r\n                [disabled]=\"loading()\"\r\n                class=\"tw-px-4 tw-py-2\">\r\n                Reset\r\n              </button>\r\n              @if (isEditMode()) {\r\n                <button \r\n                  cideEleButton \r\n                  variant=\"outline\" \r\n                  size=\"sm\" \r\n                  type=\"button\" \r\n                  (click)=\"cancelForm()\"\r\n                  [disabled]=\"loading()\"\r\n                  class=\"tw-px-4 tw-py-2\">\r\n                  Cancel\r\n                </button>\r\n              }\r\n              <button \r\n                cideEleButton \r\n                variant=\"primary\" \r\n                size=\"sm\" \r\n                type=\"submit\"\r\n                (click)=\"saveMaster()\"\r\n                [disabled]=\"!masterForm.valid || loading()\"\r\n                class=\"tw-px-4 tw-py-2\">\r\n                <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\r\n                {{ isEditMode() ? 'Update' : 'Save' }}\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </form>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Header Section with Filters -->\r\n  <div class=\"tw-table-row tw-h-0\">\r\n    <div class=\"tw-table-cell tw-px-4 tw-py-2 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-2 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-3\">\r\n          <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\n            @if (typeTitle()) {\r\n              <div>\r\n                <p class=\"tw-text-xs tw-text-gray-500 tw-m-0\">Type: {{ typeTitle() }}</p>\r\n              </div>\r\n            }\r\n          </div>\r\n        </div>\r\n\r\n        <!-- Actions -->\r\n        <div class=\"tw-flex tw-flex-col sm:tw-flex-row tw-items-start sm:tw-items-center tw-space-y-2 sm:tw-space-y-0 sm:tw-space-x-3\">\r\n          <!-- Actions can be added here in the future -->\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Error Message -->\r\n      @if (error()) {\r\n        <div class=\"tw-mt-3 tw-p-3 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-4 tw-h-4 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  </div>\r\n\r\n  <!-- Main Content Area -->\r\n  <div class=\"tw-table-row tw-h-0\">\r\n    <div class=\"tw-table-cell tw-h-full tw-relative tw-p-0\">\r\n      \r\n      <!-- Data Grid Component -->\r\n      <div class=\"tw-h-full tw-overflow-hidden\">\r\n        <cide-ele-data-grid \r\n          class=\"tw-h-full\"\r\n          [config]=\"gridConfig()\" \r\n          [templateRenderers]=\"templateRenderers()\"\r\n          (gridEvent)=\"onGridEvent($event)\">\r\n        </cide-ele-data-grid>\r\n      </div>\r\n\r\n    </div>\r\n  </div>\r\n\r\n</div>\r\n\r\n<!-- Template Renderers -->\r\n<ng-template #masterDetailsRendererTemplate let-row=\"row\">\r\n  <div class=\"tw-flex tw-flex-col tw-w-full\">\r\n    <div class=\"tw-font-medium tw-text-gray-900\">{{ row.sygms_title || 'N/A' }}</div>\r\n    <div class=\"tw-text-sm tw-text-gray-500 tw-truncate\">{{ row.sygms_desc || 'No description' }}</div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #masterStatusRendererTemplate let-row=\"row\">\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\"\r\n        [class.tw-bg-green-100]=\"row.sygms_isactive\"\r\n        [class.tw-text-green-800]=\"row.sygms_isactive\"\r\n        [class.tw-bg-red-100]=\"!row.sygms_isactive\"\r\n        [class.tw-text-red-800]=\"!row.sygms_isactive\">\r\n    {{ row.sygms_isactive ? 'Active' : 'Inactive' }}\r\n  </span>\r\n</ng-template>\r\n\r\n<ng-template #actionsDropdownRendererTemplate let-row=\"row\">\r\n  <cide-ele-dropdown\r\n    [items]=\"getActionDropdownItems(row)\"\r\n    [config]=\"getDropdownConfig()\"\r\n    (itemClick)=\"onDropdownItemClick($event, row)\">\r\n  </cide-ele-dropdown>\r\n</ng-template>\r\n</cide-lyt-shared-wrapper> " }]
+                    ], template: "<!-- General Master with Shared Wrapper -->\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'core_general_master' }\">\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-4 tw-py-3 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-4 tw-h-4\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\n          <div class=\"tw-flex tw-flex-col\">\n            <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-m-0\">{{ isEditMode() ? 'Edit Master' : 'Quick Add Master' }}</h6>\n            @if (typeTitle()) {\n              <p class=\"tw-text-xs tw-text-gray-500 tw-m-0 tw-mt-0.5\">Type: <span class=\"tw-font-medium tw-text-gray-700\">{{ typeTitle() }}</span></p>\n            }\n          </div>\n        </div>\n        \n        <!-- Parent Master Info Box -->\n        @if (masterForm.get('sygms_id_sygms')?.value) {\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            <span class=\"tw-text-sm tw-font-medium tw-text-blue-800\">Adding Child</span>\n            <span class=\"tw-text-xs tw-text-blue-700\">\n              Parent: <span class=\"tw-font-medium\">{{ getParentMasterDisplay() }}</span>\n            </span>\n            <button \n              type=\"button\"\n              (click)=\"clearParentMaster()\"\n              class=\"tw-text-sm tw-text-blue-600 hover:tw-text-blue-800 hover:tw-bg-blue-100 tw-rounded tw-px-1\">\n              \u00D7\n            </button>\n          </div>\n        }\n      </div>\n      \n      <form [formGroup]=\"masterForm\" class=\"tw-space-y-2\">\n        \n        <!-- First Row - Basic fields -->\n        <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-6 tw-gap-2\">\n          <!-- Master Code -->\n          <div class=\"lg:tw-col-span-1\">\n            <cide-ele-input \n              formControlName=\"sygms_code\" \n              label=\"Master Code*\" \n              placeholder=\"Enter master code\"\n              size=\"sm\"\n              [required]=\"true\" \n              [maxlength]=\"40\">\n            </cide-ele-input>\n          </div>\n          \n          <!-- Master Title -->\n          <div class=\"lg:tw-col-span-3\">\n            <cide-ele-input \n              formControlName=\"sygms_title\" \n              label=\"Master Title*\" \n              placeholder=\"Enter master title\"\n              size=\"sm\"\n              [required]=\"true\" \n              [maxlength]=\"150\">\n            </cide-ele-input>\n          </div>\n          \n          <!-- Active Status -->\n          <div class=\"lg:tw-col-span-1 tw-flex tw-items-center tw-pt-0\">\n            <cide-ele-input \n              formControlName=\"sygms_isactive\"\n              type=\"checkbox\"\n              label=\"Active\"\n              size=\"sm\">\n            </cide-ele-input>\n          </div>\n        </div>\n        \n        <!-- Third Row - JSON Configuration and Description/Save side by side -->\n        <div class=\"tw-flex tw-gap-4\">\n          <!-- JSON Configuration (60% width) -->\n          <div class=\"tw-w-3/5\">\n            <cide-ele-json-editor \n              formControlName=\"sygms_configuration\" \n              label=\"Configuration*\" \n              size=\"sm\"\n              [required]=\"true\">\n            </cide-ele-json-editor>\n          </div>\n          \n          <!-- Description and Save Button (40% width) -->\n          <div class=\"tw-w-2/5 tw-flex tw-flex-col tw-space-y-4\">\n            <!-- Description -->\n            <div class=\"tw-flex-1\">\n              <cide-ele-textarea \n                formControlName=\"sygms_desc\" \n                label=\"Description\" \n                placeholder=\"Enter description\"\n                size=\"sm\"\n                [maxlength]=\"500\" \n                [rows]=\"4\">\n              </cide-ele-textarea>\n            </div>\n            \n            <!-- Action Buttons -->\n            <div class=\"tw-flex tw-justify-end tw-space-x-2\">\n              <button \n                cideEleButton \n                variant=\"outline\" \n                size=\"sm\" \n                type=\"button\" \n                (click)=\"resetForm()\"\n                [disabled]=\"loading()\"\n                class=\"tw-px-4 tw-py-2\">\n                Reset\n              </button>\n              @if (isEditMode()) {\n                <button \n                  cideEleButton \n                  variant=\"outline\" \n                  size=\"sm\" \n                  type=\"button\" \n                  (click)=\"cancelForm()\"\n                  [disabled]=\"loading()\"\n                  class=\"tw-px-4 tw-py-2\">\n                  Cancel\n                </button>\n              }\n              <button \n                cideEleButton \n                variant=\"primary\" \n                size=\"sm\" \n                type=\"submit\"\n                (click)=\"saveMaster()\"\n                [disabled]=\"!masterForm.valid || loading()\"\n                class=\"tw-px-4 tw-py-2\">\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' : 'Save' }}\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-4 tw-py-2 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-2 sm:tw-space-y-0\">\n        \n        <!-- Title and Back Button -->\n        <div class=\"tw-flex tw-items-center tw-space-x-3\">\n          <div class=\"tw-flex tw-items-center tw-space-x-2\">\n            @if (typeTitle()) {\n              <div>\n                <p class=\"tw-text-xs tw-text-gray-500 tw-m-0\">Type: {{ typeTitle() }}</p>\n              </div>\n            }\n          </div>\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-2 sm:tw-space-y-0 sm:tw-space-x-3\">\n          <!-- Actions can be added here in the future -->\n        </div>\n      </div>\n\n      <!-- Error Message -->\n      @if (error()) {\n        <div class=\"tw-mt-3 tw-p-3 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-4 tw-h-4 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 tw-h-0\">\n    <div class=\"tw-table-cell tw-h-full tw-relative tw-p-0\">\n      \n      <!-- Data Grid Component -->\n      <div class=\"tw-h-full tw-overflow-hidden\">\n        <cide-ele-data-grid \n          class=\"tw-h-full\"\n          [config]=\"gridConfig()\" \n          [templateRenderers]=\"templateRenderers()\"\n          (gridEvent)=\"onGridEvent($event)\">\n        </cide-ele-data-grid>\n      </div>\n\n    </div>\n  </div>\n\n</div>\n\n<!-- Template Renderers -->\n<ng-template #masterDetailsRendererTemplate let-row=\"row\">\n  <div class=\"tw-flex tw-flex-col tw-w-full\">\n    <div class=\"tw-font-medium tw-text-gray-900\">{{ row.sygms_title || 'N/A' }}</div>\n    <div class=\"tw-text-sm tw-text-gray-500 tw-truncate\">{{ row.sygms_desc || 'No description' }}</div>\n  </div>\n</ng-template>\n\n<ng-template #masterStatusRendererTemplate let-row=\"row\">\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\"\n        [class.tw-bg-green-100]=\"row.sygms_isactive\"\n        [class.tw-text-green-800]=\"row.sygms_isactive\"\n        [class.tw-bg-red-100]=\"!row.sygms_isactive\"\n        [class.tw-text-red-800]=\"!row.sygms_isactive\">\n    {{ row.sygms_isactive ? 'Active' : 'Inactive' }}\n  </span>\n</ng-template>\n\n<ng-template #actionsDropdownRendererTemplate let-row=\"row\">\n  <cide-ele-dropdown\n    [items]=\"getActionDropdownItems(row)\"\n    [config]=\"getDropdownConfig()\"\n    (itemClick)=\"onDropdownItemClick($event, row)\">\n  </cide-ele-dropdown>\n</ng-template>\n</cide-lyt-shared-wrapper> " }]
         }] });
 
 var generalMaster_component = /*#__PURE__*/Object.freeze({
@@ -10900,7 +11009,7 @@ class CideCoreEntityCreateComponent {
         this.router.navigate(['/control-panel/entity-list']);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCoreEntityCreateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideCoreEntityCreateComponent, isStandalone: true, selector: "cide-core-entity-create", viewQueries: [{ propertyName: "userCellRendererTemplate", first: true, predicate: ["userCell"], descendants: true, isSignal: true }, { propertyName: "actionsCellRendererTemplate", first: true, predicate: ["actionsCell"], descendants: true, isSignal: true }], ngImport: i0, template: "<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'core_entity_form' }\"\r\n  [breadcrumb_data]=\"breadcrumbData()\">\r\n  <!-- Modern Entity Create Form -->\r\n  <div class=\"tw-min-h-screen\">\r\n    <div class=\"tw-mx-auto\">\r\n\r\n      <form [formGroup]=\"entityForm\" [class.tw-opacity-60]=\"loading()\" [class.tw-pointer-events-none]=\"loading()\"\r\n        (ngSubmit)=\"onSubmit()\">\r\n\r\n        <!-- Breadcrumb is now rendered by shared wrapper; inline breadcrumb removed -->\r\n\r\n        <!-- Basic Information Section -->\r\n        <div class=\"tw-p-2 tw-pb-0\">\r\n          <div class=\"tw-space-y-6\">\r\n            <!-- Top Section: Image on Right, Form Fields on Left -->\r\n            <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-[1fr_200px] tw-gap-4\">\r\n              <!-- Left Side: Form Fields -->\r\n              <div class=\"tw-space-y-6\">\r\n                <!-- Institution Name, Entity Type & Active Status -->\r\n                <div\r\n                  class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-[1fr_250px_120px] tw-gap-4 tw-items-end\">\r\n                  <cide-ele-input id=\"syen_name\" type=\"text\" label=\"Institution Name\" formControlName=\"syen_name\"\r\n                    placeholder=\"Enter institution name\" size=\"sm\">\r\n                  </cide-ele-input>\r\n\r\n                  <cide-ele-select label=\"Entity Type\" labelPlacement=\"floating\" [options]=\"entityTypes()\"\r\n                    formControlName=\"syen_entity_type_sygms\" placeholder=\"Select institution type\" size=\"sm\">\r\n                  </cide-ele-select>\r\n\r\n                  <div class=\"tw-flex tw-items-center tw-justify-center tw-gap-1 tw-h-full\">\r\n                    <cide-ele-input type=\"checkbox\" formControlName=\"syen_isactive\" size=\"sm\" label=\"Is Active\">\r\n                    </cide-ele-input>\r\n                  </div>\r\n                </div>\r\n\r\n                <!-- UDISE, Affiliation & Institution Code -->\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                  <cide-ele-input label=\"UDISE Number\" formControlName=\"syen_udise_no\" placeholder=\"Enter UDISE number\"\r\n                    size=\"sm\">\r\n                  </cide-ele-input>\r\n\r\n                  <cide-ele-input label=\"Affiliation Number\" formControlName=\"syen_affiliation_no\"\r\n                    placeholder=\"Enter affiliation number\" size=\"sm\">\r\n                  </cide-ele-input>\r\n\r\n                  <cide-ele-input label=\"Institution Code\" formControlName=\"syen_entity_code\"\r\n                    placeholder=\"Enter unique code\" size=\"sm\">\r\n                  </cide-ele-input>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- Right Side: Entity Image Upload -->\r\n              <div class=\"tw-flex tw-items-start tw-justify-center tw-pt-0\">\r\n                <cide-ele-file-input id=\"entity_image_upload\" formControlName=\"syen_photo_id_cyfm\" accept=\"image/*\"\r\n                  [showPreview]=\"true\" [previewBoxMode]=\"true\" [showFileName]=\"false\" previewWidth=\"180px\"\r\n                  previewHeight=\"120px\" [required]=\"true\" placeholderText=\"Upload Logo\" placeholderIcon=\"cloud_upload\"\r\n                  [autoUpload]=\"true\" [uploadData]=\"getUploadData()\" (uploadSuccess)=\"onImageUploadSuccess($event)\"\r\n                  (uploadError)=\"onImageUploadError($event)\" (uploadProgressChange)=\"onImageUploadProgress($event)\">\r\n                </cide-ele-file-input>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- Tab Navigation -->\r\n        <div class=\"tw-px-4 !tw-mt-0\">\r\n          <cide-ele-tab [tabs]=\"entityTabs()\" [activeTabId]=\"activeTab()\" size=\"sm\" variant=\"default\"\r\n            (tabChange)=\"onTabChange($event)\">\r\n          </cide-ele-tab>\r\n        </div>\r\n\r\n        <!-- Tab Content -->\r\n        <div class=\"tw-transition-all tw-duration-300 tw-ease-in-out !tw-mt-2\" [class.tw-opacity-60]=\"loading()\"\r\n          [class.tw-pointer-events-none]=\"loading()\">\r\n          @switch (activeTab()) {\r\n\r\n          @case ('corporate') {\r\n          <div class=\"tw-p-4\">\r\n            <div class=\"tw-space-y-6\">\r\n              <!-- Corporate Address - Full Width -->\r\n              <div class=\"tw-w-full\">\r\n                <cide-ele-textarea label=\"Corporate Address\" formControlName=\"syen_corporate_address\"\r\n                  placeholder=\"Enter complete corporate address\" [rows]=\"4\">\r\n                </cide-ele-textarea>\r\n              </div>\r\n\r\n              <!-- Postal Code, City, State & Country - Four Columns -->\r\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-[220px_0.8fr_0.7fr_240px] tw-gap-6\">\r\n                <cide-ele-select label=\"Postal Code\" [options]=\"postalCodes()\"\r\n                  formControlName=\"syen_corporate_pin_sypin\" placeholder=\"Select postal code\" [searchable]=\"true\"\r\n                  [loading]=\"postalCodesLoading()\" (searchChange)=\"onPostalCodeSearch($event)\" size=\"sm\">\r\n                </cide-ele-select>\r\n\r\n                <cide-ele-input label=\"City\" formControlName=\"syen_corporate_city_sypin\" placeholder=\"Enter city name\">\r\n                </cide-ele-input>\r\n\r\n                <cide-ele-input label=\"State\" formControlName=\"syen_corporate_state_sypin\"\r\n                  placeholder=\"Enter state name\">\r\n                </cide-ele-input>\r\n\r\n                <cide-ele-select label=\"Country\" [options]=\"corporateCountries()\"\r\n                  formControlName=\"syen_corporate_country_syctr\" placeholder=\"Select country\" [searchable]=\"true\"\r\n                  (searchChange)=\"onCorporateCountrySearch($event)\" [loading]=\"corporateCountriesLoading()\" size=\"sm\">\r\n                </cide-ele-select>\r\n              </div>\r\n\r\n              <!-- Contact Person, Phone, Email & Fax - Four Columns -->\r\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-[1fr_200px_1fr_150px] tw-gap-6\">\r\n                <cide-ele-select label=\"Contact Person\" [options]=\"users()\"\r\n                  formControlName=\"syen_corporate_contact_person_user\" placeholder=\"Select contact person\"\r\n                  [searchable]=\"true\" [loading]=\"usersLoading()\" (searchChange)=\"onUserSearch($event)\">\r\n                </cide-ele-select>\r\n\r\n                <cide-ele-input label=\"Phone\" formControlName=\"syen_corporate_phone\" type=\"tel\"\r\n                  placeholder=\"Enter phone number\" size=\"sm\">\r\n                </cide-ele-input>\r\n\r\n                <cide-ele-input label=\"Email\" formControlName=\"syen_corporate_email\" type=\"email\"\r\n                  placeholder=\"Enter email address\">\r\n                </cide-ele-input>\r\n\r\n                <cide-ele-input label=\"Fax\" formControlName=\"syen_corporate_fax\" placeholder=\"Enter fax number\"\r\n                  size=\"sm\">\r\n                </cide-ele-input>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          }\r\n\r\n          @case ('contact') {\r\n          <div class=\"tw-p-4\">\r\n            <div class=\"tw-space-y-6\">\r\n              <!-- Currency Selection -->\r\n              <div class=\"tw-w-full\">\r\n                <cide-ele-select label=\"Currency\" [options]=\"currencies()\" formControlName=\"syen_currency_sycr\"\r\n                  placeholder=\"Select currency\">\r\n                </cide-ele-select>\r\n              </div>\r\n\r\n              <!-- Alternate Phone & Website - Two Columns -->\r\n              <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-2 tw-gap-6\">\r\n                <cide-ele-input label=\"Alternate Phone\" formControlName=\"syen_corporate_phone_alt\" type=\"tel\"\r\n                  placeholder=\"Enter alternate phone number\">\r\n                </cide-ele-input>\r\n\r\n                <cide-ele-input label=\"Website URL\" formControlName=\"syen_website\" type=\"url\"\r\n                  placeholder=\"https://example.com\" autocomplete=\"url\" leadingIcon=\"language\"\r\n                  helperText=\"Enter a valid website URL starting with http:// or https://\">\r\n                </cide-ele-input>\r\n              </div>\r\n\r\n              <!-- Alternate Email - Full Width -->\r\n              <div class=\"tw-w-full\">\r\n                <cide-ele-input label=\"Alternate Email\" formControlName=\"syen_corporate_email_alt\" type=\"email\"\r\n                  placeholder=\"Enter alternate email address\">\r\n                </cide-ele-input>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          }\r\n\r\n          @case ('registered') {\r\n          <div class=\"tw-p-4\">\r\n            <div class=\"tw-space-y-6\">\r\n              <!-- Registered Address - Full Width -->\r\n              <div class=\"tw-w-full\">\r\n                <cide-ele-textarea label=\"Registered Address\" formControlName=\"syen_registered_address\"\r\n                  placeholder=\"Enter complete registered address\" [rows]=\"4\">\r\n                </cide-ele-textarea>\r\n              </div>\r\n\r\n              <!-- Postal Code, City, State & Country - Four Columns -->\r\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-[220px_0.8fr_0.7fr_240px] tw-gap-6\">\r\n                <cide-ele-select label=\"Postal Code\" [options]=\"postalCodes()\"\r\n                  formControlName=\"syen_registered_pin_sypin\" placeholder=\"Select postal code\" [searchable]=\"true\"\r\n                  [loading]=\"postalCodesLoading()\" (searchChange)=\"onPostalCodeSearch($event)\" size=\"sm\">\r\n                </cide-ele-select>\r\n\r\n                <cide-ele-input label=\"City\" formControlName=\"syen_registered_city_sypin\" placeholder=\"Enter city name\">\r\n                </cide-ele-input>\r\n\r\n                <cide-ele-input label=\"State\" formControlName=\"syen_registered_state_sypin\"\r\n                  placeholder=\"Enter state name\">\r\n                </cide-ele-input>\r\n\r\n                <cide-ele-select label=\"Country\" [options]=\"registeredCountries()\"\r\n                  formControlName=\"syen_registered_country_syctr\" placeholder=\"Select country\" [searchable]=\"true\"\r\n                  (searchChange)=\"onRegisteredCountrySearch($event)\" [loading]=\"registeredCountriesLoading()\" size=\"sm\">\r\n                </cide-ele-select>\r\n              </div>\r\n\r\n              <!-- Contact Person, Phone, Email & Fax - Four Columns -->\r\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-[1fr_200px_1fr_150px] tw-gap-6\">\r\n                <cide-ele-select label=\"Contact Person\" [options]=\"users()\"\r\n                  formControlName=\"syen_registered_contact_person_user\" placeholder=\"Select contact person\"\r\n                  [searchable]=\"true\" [loading]=\"usersLoading()\" (searchChange)=\"onUserSearch($event)\">\r\n                </cide-ele-select>\r\n\r\n                <cide-ele-input label=\"Phone\" formControlName=\"syen_registered_phone\" type=\"tel\"\r\n                  placeholder=\"Enter phone number\" size=\"sm\">\r\n                </cide-ele-input>\r\n\r\n                <cide-ele-input label=\"Email\" formControlName=\"syen_registered_email\" type=\"email\"\r\n                  placeholder=\"Enter email address\">\r\n                </cide-ele-input>\r\n\r\n                <cide-ele-input label=\"Fax\" formControlName=\"syen_registered_fax\" placeholder=\"Enter fax number\"\r\n                  size=\"sm\">\r\n                </cide-ele-input>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          }\r\n\r\n          @case ('user-mapping') {\r\n          <div class=\"tw-p-2\">\r\n            <div class=\"tw-space-y-4\">\r\n              <!-- Add User Mapping Form -->\r\n              <div class=\"tw-bg-white tw-p-4 tw-rounded-lg tw-border tw-shadow-sm\">\r\n                <div class=\"tw-flex tw-items-center tw-gap-2 tw-mb-3\">\r\n                  <cide-ele-icon class=\"tw-text-blue-600 tw-text-sm\">person_add</cide-ele-icon>\r\n                  <h3 class=\"tw-text-sm tw-font-semibold tw-text-gray-800\">Add User to Entity</h3>\r\n                </div>\r\n\r\n                <form [formGroup]=\"userMappingForm\" (ngSubmit)=\"addUserMapping()\">\r\n                  <div class=\"tw-flex tw-items-end tw-gap-3\">\r\n                    <div class=\"tw-flex-1\">\r\n                      <cide-ele-select label=\"Select User\" [options]=\"availableUsers()\" formControlName=\"syenm_id_user\"\r\n                        placeholder=\"Choose user to add to entity\" [searchable]=\"true\"\r\n                        [loading]=\"availableUsersLoading()\" size=\"md\">\r\n                      </cide-ele-select>\r\n                    </div>\r\n\r\n                    <!-- Add Button -->\r\n                    <div class=\"tw-flex tw-items-end\">\r\n                      <button cideEleButton type=\"submit\" variant=\"primary\" size=\"sm\"\r\n                        [disabled]=\"userMappingForm.invalid || availableUsersLoading()\"\r\n                        class=\"tw-shadow-sm tw-h-8 tw-px-3\">\r\n                        <cide-ele-icon class=\"tw-mr-1 tw-text-xs\">add</cide-ele-icon>\r\n                        <span class=\"tw-text-xs\">Add</span>\r\n                      </button>\r\n                    </div>\r\n                  </div>\r\n                </form>\r\n              </div>\r\n\r\n              <!-- User Mappings Grid -->\r\n              <div class=\"tw-bg-white tw-rounded-md tw-border tw-overflow-hidden tw-shadow-sm\">\r\n                @if (userEntityMappingsLoading()) {\r\n                <div class=\"tw-p-4 tw-text-center\">\r\n                  <div class=\"tw-inline-flex tw-items-center tw-gap-2 tw-text-gray-500\">\r\n                    <div class=\"tw-animate-spin tw-rounded-full tw-h-3 tw-w-3 tw-border-b-2 tw-border-gray-500\"></div>\r\n                    <span class=\"tw-text-xs\">Loading...</span>\r\n                  </div>\r\n                </div>\r\n                } @else if (userEntityMappings().length === 0) {\r\n                <div class=\"tw-p-4 tw-text-center tw-text-gray-500\">\r\n                  <cide-ele-icon class=\"tw-text-2xl tw-mb-1 tw-text-gray-300\">people_outline</cide-ele-icon>\r\n                  <p class=\"tw-text-sm tw-font-medium tw-mb-1\">No users mapped yet</p>\r\n                  <p class=\"tw-text-xs tw-text-gray-400\">Add users above to grant them access to this entity</p>\r\n                </div>\r\n                } @else {\r\n                <cide-ele-data-grid [config]=\"userMappingsGridConfig\" [templateRenderers]=\"getUserMappingsTemplateRenderers()\">\r\n\r\n                  <!-- Custom user cell template -->\r\n                  <ng-template #userCell let-row=\"row\">\r\n                    <div class=\"tw-flex tw-items-center tw-gap-2\">\r\n                      <div\r\n                        class=\"tw-w-6 tw-h-6 tw-bg-gradient-to-br tw-from-blue-100 tw-to-indigo-100 tw-rounded-full tw-flex tw-items-center tw-justify-center tw-shadow-sm\">\r\n                        <cide-ele-icon class=\"tw-text-blue-600 tw-text-xs\">person</cide-ele-icon>\r\n                      </div>\r\n                      <div class=\"tw-flex tw-flex-col\">\r\n                        <span class=\"tw-font-medium tw-text-gray-900 tw-text-xs\">\r\n                          {{ row?._displayUserName }}\r\n                        </span>\r\n                      </div>\r\n                    </div>\r\n                  </ng-template>\r\n\r\n                  <!-- Custom actions cell template -->\r\n                  <ng-template #actionsCell let-row=\"row\">\r\n                    <div class=\"tw-flex tw-items-center tw-gap-1 tw-justify-center\">\r\n                      <button\r\n                        (click)=\"updateUserMapping(row._id!, { syenm_isactive: !row.syenm_isactive })\"\r\n                        class=\"tw-w-8 tw-h-8 tw-flex tw-items-center tw-justify-center tw-rounded-md tw-transition-colors tw-border tw-border-transparent hover:tw-border-gray-300\"\r\n                        [class.tw-bg-green-100]=\"row.syenm_isactive\"\r\n                        [class.tw-text-green-700]=\"row.syenm_isactive\"\r\n                        [class.tw-bg-gray-100]=\"!row.syenm_isactive\"\r\n                        [class.tw-text-gray-600]=\"!row.syenm_isactive\"\r\n                        [title]=\"row.syenm_isactive ? 'Deactivate' : 'Activate'\">\r\n                        <cide-ele-icon class=\"tw-text-sm\">\r\n                          {{ row.syenm_isactive ? 'pause' : 'play_arrow' }}\r\n                        </cide-ele-icon>\r\n                      </button>\r\n\r\n                      <button (click)=\"removeUserMapping(row._id!)\"\r\n                        class=\"tw-w-8 tw-h-8 tw-flex tw-items-center tw-justify-center tw-rounded-md tw-bg-red-100 tw-text-red-600 hover:tw-bg-red-200 tw-transition-colors tw-border tw-border-transparent hover:tw-border-red-300\"\r\n                        title=\"Remove User\">\r\n                        <cide-ele-icon class=\"tw-text-sm\">delete</cide-ele-icon>\r\n                      </button>\r\n                    </div>\r\n                  </ng-template>\r\n                </cide-ele-data-grid>\r\n                }\r\n              </div>\r\n            </div>\r\n          </div>\r\n          }\r\n\r\n          }\r\n\r\n          <!-- Form Actions -->\r\n          <div class=\"tw-p-4\">\r\n            <div class=\"tw-flex tw-items-center tw-justify-between tw-gap-3\">\r\n              <!-- Error Message (Left Side) -->\r\n              <cide-form-field-error [formGroup]=\"entityForm\"></cide-form-field-error>\r\n\r\n              <!-- Action Buttons (Right Side) -->\r\n              <div class=\"tw-flex tw-gap-3\">\r\n                <button cideEleButton type=\"button\" variant=\"outline\" size=\"md\" (click)=\"onBack()\"\r\n                  [disabled]=\"loading()\">\r\n                  <cide-ele-icon>arrow_back</cide-ele-icon>\r\n                  Back\r\n                </button>\r\n\r\n                <button cideEleButton type=\"button\" variant=\"secondary\" size=\"md\" (click)=\"onReset()\"\r\n                  [disabled]=\"loading()\">\r\n                  <cide-ele-icon>refresh</cide-ele-icon>\r\n                  Reset Form\r\n                </button>\r\n\r\n                <button cideEleButton type=\"submit\" variant=\"primary\" size=\"md\"\r\n                  [disabled]=\"loading() || entityForm.invalid\" [loading]=\"loading()\">\r\n                  <cide-ele-icon>{{ isEditMode() ? 'save' : 'add' }}</cide-ele-icon>\r\n                  {{ isEditMode() ? 'Update Entity' : 'Create Entity' }}\r\n                </button>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </form>\r\n    </div>\r\n  </div>\r\n</cide-lyt-shared-wrapper>", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: CideLytSharedWrapperComponent, selector: "cide-lyt-shared-wrapper", inputs: ["shared_wrapper_setup_param", "breadcrumb_data"] }, { 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", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput", "options", "multiple", "searchable", "showSearchInput", "loading", "valueKey", "labelKey", "treeView"], 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: CideEleFileInputComponent, selector: "cide-ele-file-input", inputs: ["label", "accept", "multiple", "disabled", "required", "helperText", "errorText", "showPreview", "previewWidth", "previewHeight", "previewBoxMode", "showFileName", "placeholderText", "placeholderIcon", "autoUpload", "uploadData", "showFloatingUploader", "floatingUploaderGroupId"], outputs: ["fileChange", "uploadSuccess", "uploadError", "uploadProgressChange"] }, { kind: "component", type: CideEleTabComponent, selector: "cide-ele-tab", inputs: ["tabs", "activeTabId", "size", "variant", "fullWidth", "disabled"], outputs: ["tabChange"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideFormFieldErrorComponent, selector: "cide-form-field-error", inputs: ["control", "formGroup", "fieldName", "customMessages"] }, { kind: "component", type: CideEleDataGridComponent, selector: "cide-ele-data-grid", inputs: ["config", "templateRenderers", "customFormatters", "actionHandlers", "serverSidePagination", "totalServerItems", "currentServerPage", "currentServerPageSize", "dragDropEnabled"], outputs: ["gridEvent"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideCoreEntityCreateComponent, isStandalone: true, selector: "cide-core-entity-create", viewQueries: [{ propertyName: "userCellRendererTemplate", first: true, predicate: ["userCell"], descendants: true, isSignal: true }, { propertyName: "actionsCellRendererTemplate", first: true, predicate: ["actionsCell"], descendants: true, isSignal: true }], ngImport: i0, template: "<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'core_entity_form' }\"\r\n  [breadcrumb_data]=\"breadcrumbData()\">\r\n  <!-- Modern Entity Create Form -->\r\n  <div class=\"tw-min-h-screen\">\r\n    <div class=\"tw-mx-auto\">\r\n\r\n      <form [formGroup]=\"entityForm\" [class.tw-opacity-60]=\"loading()\" [class.tw-pointer-events-none]=\"loading()\"\r\n        (ngSubmit)=\"onSubmit()\">\r\n\r\n        <!-- Breadcrumb is now rendered by shared wrapper; inline breadcrumb removed -->\r\n\r\n        <!-- Basic Information Section -->\r\n        <div class=\"tw-p-2 tw-pb-0\">\r\n          <div class=\"tw-space-y-6\">\r\n            <!-- Top Section: Image on Right, Form Fields on Left -->\r\n            <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-[1fr_200px] tw-gap-4\">\r\n              <!-- Left Side: Form Fields -->\r\n              <div class=\"tw-space-y-6\">\r\n                <!-- Institution Name, Entity Type & Active Status -->\r\n                <div\r\n                  class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-[1fr_250px_120px] tw-gap-4 tw-items-end\">\r\n                  <cide-ele-input id=\"syen_name\" type=\"text\" label=\"Institution Name\" formControlName=\"syen_name\"\r\n                    placeholder=\"Enter institution name\" size=\"sm\">\r\n                  </cide-ele-input>\r\n\r\n                  <cide-ele-select label=\"Entity Type\" labelPlacement=\"floating\" [options]=\"entityTypes()\"\r\n                    formControlName=\"syen_entity_type_sygms\" placeholder=\"Select institution type\" size=\"sm\">\r\n                  </cide-ele-select>\r\n\r\n                  <div class=\"tw-flex tw-items-center tw-justify-center tw-gap-1 tw-h-full\">\r\n                    <cide-ele-input type=\"checkbox\" formControlName=\"syen_isactive\" size=\"sm\" label=\"Is Active\">\r\n                    </cide-ele-input>\r\n                  </div>\r\n                </div>\r\n\r\n                <!-- UDISE, Affiliation & Institution Code -->\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                  <cide-ele-input label=\"UDISE Number\" formControlName=\"syen_udise_no\" placeholder=\"Enter UDISE number\"\r\n                    size=\"sm\">\r\n                  </cide-ele-input>\r\n\r\n                  <cide-ele-input label=\"Affiliation Number\" formControlName=\"syen_affiliation_no\"\r\n                    placeholder=\"Enter affiliation number\" size=\"sm\">\r\n                  </cide-ele-input>\r\n\r\n                  <cide-ele-input label=\"Institution Code\" formControlName=\"syen_entity_code\"\r\n                    placeholder=\"Enter unique code\" size=\"sm\">\r\n                  </cide-ele-input>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- Right Side: Entity Image Upload -->\r\n              <div class=\"tw-flex tw-items-start tw-justify-center tw-pt-0\">\r\n                <cide-ele-file-input id=\"entity_image_upload\" formControlName=\"syen_photo_id_cyfm\" accept=\"image/*\"\r\n                  [showPreview]=\"true\" [previewBoxMode]=\"true\" [showFileName]=\"false\" previewWidth=\"180px\"\r\n                  previewHeight=\"120px\" [required]=\"true\" placeholderText=\"Upload Logo\" placeholderIcon=\"cloud_upload\"\r\n                  [autoUpload]=\"true\" [uploadData]=\"getUploadData()\" (uploadSuccess)=\"onImageUploadSuccess($event)\"\r\n                  (uploadError)=\"onImageUploadError($event)\" (uploadProgressChange)=\"onImageUploadProgress($event)\">\r\n                </cide-ele-file-input>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- Tab Navigation -->\r\n        <div class=\"tw-px-4 !tw-mt-0\">\r\n          <cide-ele-tab [tabs]=\"entityTabs()\" [activeTabId]=\"activeTab()\" size=\"sm\" variant=\"default\"\r\n            (tabChange)=\"onTabChange($event)\">\r\n          </cide-ele-tab>\r\n        </div>\r\n\r\n        <!-- Tab Content -->\r\n        <div class=\"tw-transition-all tw-duration-300 tw-ease-in-out !tw-mt-2\" [class.tw-opacity-60]=\"loading()\"\r\n          [class.tw-pointer-events-none]=\"loading()\">\r\n          @switch (activeTab()) {\r\n\r\n          @case ('corporate') {\r\n          <div class=\"tw-p-4\">\r\n            <div class=\"tw-space-y-6\">\r\n              <!-- Corporate Address - Full Width -->\r\n              <div class=\"tw-w-full\">\r\n                <cide-ele-textarea label=\"Corporate Address\" formControlName=\"syen_corporate_address\"\r\n                  placeholder=\"Enter complete corporate address\" [rows]=\"4\">\r\n                </cide-ele-textarea>\r\n              </div>\r\n\r\n              <!-- Postal Code, City, State & Country - Four Columns -->\r\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-[220px_0.8fr_0.7fr_240px] tw-gap-6\">\r\n                <cide-ele-select label=\"Postal Code\" [options]=\"postalCodes()\"\r\n                  formControlName=\"syen_corporate_pin_sypin\" placeholder=\"Select postal code\" [searchable]=\"true\"\r\n                  [loading]=\"postalCodesLoading()\" (searchChange)=\"onPostalCodeSearch($event)\" size=\"sm\">\r\n                </cide-ele-select>\r\n\r\n                <cide-ele-input label=\"City\" formControlName=\"syen_corporate_city_sypin\" placeholder=\"Enter city name\">\r\n                </cide-ele-input>\r\n\r\n                <cide-ele-input label=\"State\" formControlName=\"syen_corporate_state_sypin\"\r\n                  placeholder=\"Enter state name\">\r\n                </cide-ele-input>\r\n\r\n                <cide-ele-select label=\"Country\" [options]=\"corporateCountries()\"\r\n                  formControlName=\"syen_corporate_country_syctr\" placeholder=\"Select country\" [searchable]=\"true\"\r\n                  (searchChange)=\"onCorporateCountrySearch($event)\" [loading]=\"corporateCountriesLoading()\" size=\"sm\">\r\n                </cide-ele-select>\r\n              </div>\r\n\r\n              <!-- Contact Person, Phone, Email & Fax - Four Columns -->\r\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-[1fr_200px_1fr_150px] tw-gap-6\">\r\n                <cide-ele-select label=\"Contact Person\" [options]=\"users()\"\r\n                  formControlName=\"syen_corporate_contact_person_user\" placeholder=\"Select contact person\"\r\n                  [searchable]=\"true\" [loading]=\"usersLoading()\" (searchChange)=\"onUserSearch($event)\">\r\n                </cide-ele-select>\r\n\r\n                <cide-ele-input label=\"Phone\" formControlName=\"syen_corporate_phone\" type=\"tel\"\r\n                  placeholder=\"Enter phone number\" size=\"sm\">\r\n                </cide-ele-input>\r\n\r\n                <cide-ele-input label=\"Email\" formControlName=\"syen_corporate_email\" type=\"email\"\r\n                  placeholder=\"Enter email address\">\r\n                </cide-ele-input>\r\n\r\n                <cide-ele-input label=\"Fax\" formControlName=\"syen_corporate_fax\" placeholder=\"Enter fax number\"\r\n                  size=\"sm\">\r\n                </cide-ele-input>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          }\r\n\r\n          @case ('contact') {\r\n          <div class=\"tw-p-4\">\r\n            <div class=\"tw-space-y-6\">\r\n              <!-- Currency Selection -->\r\n              <div class=\"tw-w-full\">\r\n                <cide-ele-select label=\"Currency\" [options]=\"currencies()\" formControlName=\"syen_currency_sycr\"\r\n                  placeholder=\"Select currency\">\r\n                </cide-ele-select>\r\n              </div>\r\n\r\n              <!-- Alternate Phone & Website - Two Columns -->\r\n              <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-2 tw-gap-6\">\r\n                <cide-ele-input label=\"Alternate Phone\" formControlName=\"syen_corporate_phone_alt\" type=\"tel\"\r\n                  placeholder=\"Enter alternate phone number\">\r\n                </cide-ele-input>\r\n\r\n                <cide-ele-input label=\"Website URL\" formControlName=\"syen_website\" type=\"url\"\r\n                  placeholder=\"https://example.com\" autocomplete=\"url\" leadingIcon=\"language\"\r\n                  helperText=\"Enter a valid website URL starting with http:// or https://\">\r\n                </cide-ele-input>\r\n              </div>\r\n\r\n              <!-- Alternate Email - Full Width -->\r\n              <div class=\"tw-w-full\">\r\n                <cide-ele-input label=\"Alternate Email\" formControlName=\"syen_corporate_email_alt\" type=\"email\"\r\n                  placeholder=\"Enter alternate email address\">\r\n                </cide-ele-input>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          }\r\n\r\n          @case ('registered') {\r\n          <div class=\"tw-p-4\">\r\n            <div class=\"tw-space-y-6\">\r\n              <!-- Registered Address - Full Width -->\r\n              <div class=\"tw-w-full\">\r\n                <cide-ele-textarea label=\"Registered Address\" formControlName=\"syen_registered_address\"\r\n                  placeholder=\"Enter complete registered address\" [rows]=\"4\">\r\n                </cide-ele-textarea>\r\n              </div>\r\n\r\n              <!-- Postal Code, City, State & Country - Four Columns -->\r\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-[220px_0.8fr_0.7fr_240px] tw-gap-6\">\r\n                <cide-ele-select label=\"Postal Code\" [options]=\"postalCodes()\"\r\n                  formControlName=\"syen_registered_pin_sypin\" placeholder=\"Select postal code\" [searchable]=\"true\"\r\n                  [loading]=\"postalCodesLoading()\" (searchChange)=\"onPostalCodeSearch($event)\" size=\"sm\">\r\n                </cide-ele-select>\r\n\r\n                <cide-ele-input label=\"City\" formControlName=\"syen_registered_city_sypin\" placeholder=\"Enter city name\">\r\n                </cide-ele-input>\r\n\r\n                <cide-ele-input label=\"State\" formControlName=\"syen_registered_state_sypin\"\r\n                  placeholder=\"Enter state name\">\r\n                </cide-ele-input>\r\n\r\n                <cide-ele-select label=\"Country\" [options]=\"registeredCountries()\"\r\n                  formControlName=\"syen_registered_country_syctr\" placeholder=\"Select country\" [searchable]=\"true\"\r\n                  (searchChange)=\"onRegisteredCountrySearch($event)\" [loading]=\"registeredCountriesLoading()\" size=\"sm\">\r\n                </cide-ele-select>\r\n              </div>\r\n\r\n              <!-- Contact Person, Phone, Email & Fax - Four Columns -->\r\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-[1fr_200px_1fr_150px] tw-gap-6\">\r\n                <cide-ele-select label=\"Contact Person\" [options]=\"users()\"\r\n                  formControlName=\"syen_registered_contact_person_user\" placeholder=\"Select contact person\"\r\n                  [searchable]=\"true\" [loading]=\"usersLoading()\" (searchChange)=\"onUserSearch($event)\">\r\n                </cide-ele-select>\r\n\r\n                <cide-ele-input label=\"Phone\" formControlName=\"syen_registered_phone\" type=\"tel\"\r\n                  placeholder=\"Enter phone number\" size=\"sm\">\r\n                </cide-ele-input>\r\n\r\n                <cide-ele-input label=\"Email\" formControlName=\"syen_registered_email\" type=\"email\"\r\n                  placeholder=\"Enter email address\">\r\n                </cide-ele-input>\r\n\r\n                <cide-ele-input label=\"Fax\" formControlName=\"syen_registered_fax\" placeholder=\"Enter fax number\"\r\n                  size=\"sm\">\r\n                </cide-ele-input>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          }\r\n\r\n          @case ('user-mapping') {\r\n          <div class=\"tw-p-2\">\r\n            <div class=\"tw-space-y-4\">\r\n              <!-- Add User Mapping Form -->\r\n              <div class=\"tw-bg-white tw-p-4 tw-rounded-lg tw-border tw-shadow-sm\">\r\n                <div class=\"tw-flex tw-items-center tw-gap-2 tw-mb-3\">\r\n                  <cide-ele-icon class=\"tw-text-blue-600 tw-text-sm\">person_add</cide-ele-icon>\r\n                  <h3 class=\"tw-text-sm tw-font-semibold tw-text-gray-800\">Add User to Entity</h3>\r\n                </div>\r\n\r\n                <form [formGroup]=\"userMappingForm\" (ngSubmit)=\"addUserMapping()\">\r\n                  <div class=\"tw-flex tw-items-end tw-gap-3\">\r\n                    <div class=\"tw-flex-1\">\r\n                      <cide-ele-select label=\"Select User\" [options]=\"availableUsers()\" formControlName=\"syenm_id_user\"\r\n                        placeholder=\"Choose user to add to entity\" [searchable]=\"true\"\r\n                        [loading]=\"availableUsersLoading()\" size=\"md\">\r\n                      </cide-ele-select>\r\n                    </div>\r\n\r\n                    <!-- Add Button -->\r\n                    <div class=\"tw-flex tw-items-end\">\r\n                      <button cideEleButton type=\"submit\" variant=\"primary\" size=\"sm\"\r\n                        [disabled]=\"userMappingForm.invalid || availableUsersLoading()\"\r\n                        class=\"tw-shadow-sm tw-h-8 tw-px-3\">\r\n                        <cide-ele-icon class=\"tw-mr-1 tw-text-xs\">add</cide-ele-icon>\r\n                        <span class=\"tw-text-xs\">Add</span>\r\n                      </button>\r\n                    </div>\r\n                  </div>\r\n                </form>\r\n              </div>\r\n\r\n              <!-- User Mappings Grid -->\r\n              <div class=\"tw-bg-white tw-rounded-md tw-border tw-overflow-hidden tw-shadow-sm\">\r\n                @if (userEntityMappingsLoading()) {\r\n                <div class=\"tw-p-4 tw-text-center\">\r\n                  <div class=\"tw-inline-flex tw-items-center tw-gap-2 tw-text-gray-500\">\r\n                    <div class=\"tw-animate-spin tw-rounded-full tw-h-3 tw-w-3 tw-border-b-2 tw-border-gray-500\"></div>\r\n                    <span class=\"tw-text-xs\">Loading...</span>\r\n                  </div>\r\n                </div>\r\n                } @else if (userEntityMappings().length === 0) {\r\n                <div class=\"tw-p-4 tw-text-center tw-text-gray-500\">\r\n                  <cide-ele-icon class=\"tw-text-2xl tw-mb-1 tw-text-gray-300\">people_outline</cide-ele-icon>\r\n                  <p class=\"tw-text-sm tw-font-medium tw-mb-1\">No users mapped yet</p>\r\n                  <p class=\"tw-text-xs tw-text-gray-400\">Add users above to grant them access to this entity</p>\r\n                </div>\r\n                } @else {\r\n                <cide-ele-data-grid [config]=\"userMappingsGridConfig\" [templateRenderers]=\"getUserMappingsTemplateRenderers()\">\r\n\r\n                  <!-- Custom user cell template -->\r\n                  <ng-template #userCell let-row=\"row\">\r\n                    <div class=\"tw-flex tw-items-center tw-gap-2\">\r\n                      <div\r\n                        class=\"tw-w-6 tw-h-6 tw-bg-gradient-to-br tw-from-blue-100 tw-to-indigo-100 tw-rounded-full tw-flex tw-items-center tw-justify-center tw-shadow-sm\">\r\n                        <cide-ele-icon class=\"tw-text-blue-600 tw-text-xs\">person</cide-ele-icon>\r\n                      </div>\r\n                      <div class=\"tw-flex tw-flex-col\">\r\n                        <span class=\"tw-font-medium tw-text-gray-900 tw-text-xs\">\r\n                          {{ row?._displayUserName }}\r\n                        </span>\r\n                      </div>\r\n                    </div>\r\n                  </ng-template>\r\n\r\n                  <!-- Custom actions cell template -->\r\n                  <ng-template #actionsCell let-row=\"row\">\r\n                    <div class=\"tw-flex tw-items-center tw-gap-1 tw-justify-center\">\r\n                      <button\r\n                        (click)=\"updateUserMapping(row._id!, { syenm_isactive: !row.syenm_isactive })\"\r\n                        class=\"tw-w-8 tw-h-8 tw-flex tw-items-center tw-justify-center tw-rounded-md tw-transition-colors tw-border tw-border-transparent hover:tw-border-gray-300\"\r\n                        [class.tw-bg-green-100]=\"row.syenm_isactive\"\r\n                        [class.tw-text-green-700]=\"row.syenm_isactive\"\r\n                        [class.tw-bg-gray-100]=\"!row.syenm_isactive\"\r\n                        [class.tw-text-gray-600]=\"!row.syenm_isactive\"\r\n                        [title]=\"row.syenm_isactive ? 'Deactivate' : 'Activate'\">\r\n                        <cide-ele-icon class=\"tw-text-sm\">\r\n                          {{ row.syenm_isactive ? 'pause' : 'play_arrow' }}\r\n                        </cide-ele-icon>\r\n                      </button>\r\n\r\n                      <button (click)=\"removeUserMapping(row._id!)\"\r\n                        class=\"tw-w-8 tw-h-8 tw-flex tw-items-center tw-justify-center tw-rounded-md tw-bg-red-100 tw-text-red-600 hover:tw-bg-red-200 tw-transition-colors tw-border tw-border-transparent hover:tw-border-red-300\"\r\n                        title=\"Remove User\">\r\n                        <cide-ele-icon class=\"tw-text-sm\">delete</cide-ele-icon>\r\n                      </button>\r\n                    </div>\r\n                  </ng-template>\r\n                </cide-ele-data-grid>\r\n                }\r\n              </div>\r\n            </div>\r\n          </div>\r\n          }\r\n\r\n          }\r\n\r\n          <!-- Form Actions -->\r\n          <div class=\"tw-p-4\">\r\n            <div class=\"tw-flex tw-items-center tw-justify-between tw-gap-3\">\r\n              <!-- Error Message (Left Side) -->\r\n              <cide-form-field-error [formGroup]=\"entityForm\"></cide-form-field-error>\r\n\r\n              <!-- Action Buttons (Right Side) -->\r\n              <div class=\"tw-flex tw-gap-3\">\r\n                <button cideEleButton type=\"button\" variant=\"outline\" size=\"md\" (click)=\"onBack()\"\r\n                  [disabled]=\"loading()\">\r\n                  <cide-ele-icon>arrow_back</cide-ele-icon>\r\n                  Back\r\n                </button>\r\n\r\n                <button cideEleButton type=\"button\" variant=\"secondary\" size=\"md\" (click)=\"onReset()\"\r\n                  [disabled]=\"loading()\">\r\n                  <cide-ele-icon>refresh</cide-ele-icon>\r\n                  Reset Form\r\n                </button>\r\n\r\n                <button cideEleButton type=\"submit\" variant=\"primary\" size=\"md\"\r\n                  [disabled]=\"loading() || entityForm.invalid\" [loading]=\"loading()\">\r\n                  <cide-ele-icon>{{ isEditMode() ? 'save' : 'add' }}</cide-ele-icon>\r\n                  {{ isEditMode() ? 'Update Entity' : 'Create Entity' }}\r\n                </button>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </form>\r\n    </div>\r\n  </div>\r\n</cide-lyt-shared-wrapper>", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: CideLytSharedWrapperComponent, selector: "cide-lyt-shared-wrapper", inputs: ["shared_wrapper_setup_param", "breadcrumb_data"] }, { 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", "step", "size"], outputs: ["ngModelChange"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput", "options", "multiple", "searchable", "showSearchInput", "loading", "valueKey", "labelKey", "treeView"], 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: CideEleFileInputComponent, selector: "cide-ele-file-input", inputs: ["label", "accept", "multiple", "disabled", "required", "helperText", "errorText", "showPreview", "previewWidth", "previewHeight", "previewBoxMode", "showFileName", "placeholderText", "placeholderIcon", "autoUpload", "uploadData", "showFloatingUploader", "floatingUploaderGroupId"], outputs: ["fileChange", "uploadSuccess", "uploadError", "uploadProgressChange"] }, { kind: "component", type: CideEleTabComponent, selector: "cide-ele-tab", inputs: ["tabs", "activeTabId", "size", "variant", "fullWidth", "disabled"], outputs: ["tabChange"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideFormFieldErrorComponent, selector: "cide-form-field-error", inputs: ["control", "formGroup", "fieldName", "customMessages"] }, { kind: "component", type: CideEleDataGridComponent, selector: "cide-ele-data-grid", inputs: ["config", "templateRenderers", "customFormatters", "actionHandlers", "serverSidePagination", "totalServerItems", "currentServerPage", "currentServerPageSize", "dragDropEnabled"], outputs: ["gridEvent"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCoreEntityCreateComponent, decorators: [{
             type: Component,
@@ -11499,7 +11608,7 @@ class CideCoreEntityListComponent {
         this.router.navigate(['/control-panel/org-structure']);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCoreEntityListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideCoreEntityListComponent, isStandalone: true, selector: "cide-core-entity-list", viewQueries: [{ propertyName: "gridComponent", first: true, predicate: CideEleDataGridComponent, descendants: true, isSignal: true }, { propertyName: "entityDetailsRenderer", first: true, predicate: ["entityDetailsRenderer"], descendants: true, isSignal: true }, { propertyName: "entityTypeRenderer", first: true, predicate: ["entityTypeRenderer"], descendants: true, isSignal: true }, { propertyName: "actionsDropdownRenderer", first: true, predicate: ["actionsDropdownRenderer"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Entity List Container -->\r\n<div class=\"entity-list-container tw-bg-white tw-shadow-lg tw-rounded-lg tw-overflow-hidden\">\r\n  \r\n  <!-- Header Section with Filters -->\r\n  <div class=\"tw-px-6 tw-py-4 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-4 sm:tw-space-y-0\">\r\n      \r\n      <!-- Title -->\r\n      <div class=\"tw-flex tw-items-center tw-space-x-3\">\r\n        <cide-ele-icon class=\"tw-text-blue-600\">apartment</cide-ele-icon>\r\n        <div>\r\n          <h5 class=\"tw-text-sm tw-font-semibold tw-text-gray-900\">Entity Management</h5>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Actions -->\r\n      <div class=\"tw-flex tw-items-center tw-space-x-3\">\r\n        <!-- Entity Type Filter -->\r\n        <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\n          <label for=\"entityTypeFilter\" class=\"tw-text-sm tw-font-medium tw-text-gray-700\">Type:</label>\r\n          <cide-ele-select\r\n            id=\"entityTypeFilter\"\r\n            [options]=\"entityTypeOptions()\"\r\n            [ngModel]=\"selectedEntityTypeValue\"\r\n            (ngModelChange)=\"onEntityTypeChange($event)\"\r\n            class=\"tw-min-w-40\">\r\n          </cide-ele-select>\r\n        </div>\r\n\r\n        <!-- Org Structure Button -->\r\n        <button\r\n          cideEleButton\r\n          variant=\"secondary\"\r\n          size=\"sm\"\r\n          (click)=\"onOrgStructure()\"\r\n          class=\"tw-whitespace-nowrap tw-flex tw-items-center tw-gap-2\">\r\n          <cide-ele-icon size=\"xs\" class=\"tw-w-6 tw-h-5\">account_tree</cide-ele-icon>\r\n          Org Structure\r\n        </button>\r\n\r\n        <!-- Add Entity Button -->\r\n        <button\r\n          cideEleButton\r\n          variant=\"primary\"\r\n          size=\"sm\"\r\n          (click)=\"router.navigate(['control-panel', 'entity-create'])\"\r\n          class=\"tw-whitespace-nowrap tw-flex tw-items-center tw-gap-2\">\r\n          <cide-ele-icon size=\"xs\" class=\"tw-w-6 tw-h-5\">add</cide-ele-icon>\r\n          Add Entity\r\n        </button>\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\">\r\n          <cide-ele-icon name=\"exclamation-triangle\" class=\"tw-text-red-400\"></cide-ele-icon>\r\n          <div class=\"tw-ml-3\">\r\n            <h3 class=\"tw-text-sm tw-font-medium tw-text-red-800\">Error</h3>\r\n            <p class=\"tw-text-sm tw-text-red-700 tw-mt-1\">{{ error() }}</p>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    }\r\n  </div>\r\n\r\n  <!-- Data Grid Component -->\r\n  <cide-ele-data-grid\r\n    [config]=\"gridConfig()\"\r\n    [templateRenderers]=\"templateRenderers()\"\r\n    [actionHandlers]=\"actionHandlers\"\r\n    (gridEvent)=\"onGridEvent($event)\">\r\n  </cide-ele-data-grid>\r\n\r\n</div>\r\n\r\n<!-- Custom Renderer Templates -->\r\n\r\n<!-- Entity Details Renderer Template -->\r\n<!-- Context: { $implicit: unknown, row: entityResponseData, value: unknown, column: GridColumn } -->\r\n<ng-template #entityDetailsRenderer let-value=\"value\" let-entity=\"row\">\r\n  <div class=\"tw-flex tw-items-center tw-space-x-3\">\r\n    <div class=\"tw-flex-shrink-0 tw-w-10 tw-h-10 tw-bg-blue-100 tw-rounded-full tw-flex tw-items-center tw-justify-center\">\r\n      <span class=\"tw-text-blue-600 tw-font-semibold tw-text-sm\">\r\n        {{ (entity.syen_entity_code || 'NA').substring(0, 2).toUpperCase() }}\r\n      </span>\r\n    </div>\r\n    <div class=\"tw-flex-1 tw-min-w-0\">\r\n      <p class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-truncate\" [title]=\"entity.syen_name || 'Unknown Entity'\">\r\n        {{ entity.syen_name || 'Unknown Entity' }}\r\n      </p>\r\n      <p class=\"tw-text-sm tw-text-gray-500 tw-truncate\" [title]=\"entity.syen_entity_code || 'N/A'\">\r\n        Code: {{ entity.syen_entity_code || 'N/A' }}\r\n      </p>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n\r\n<!-- Entity Type Renderer Template -->\r\n<!-- Context: { $implicit: unknown, row: entityResponseData, value: unknown, column: GridColumn } -->\r\n<ng-template #entityTypeRenderer let-value=\"value\" let-entity=\"row\">\r\n  <div class=\"tw-flex tw-flex-col tw-items-center tw-space-y-1\">\r\n    <span class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-truncate\" [title]=\"getEntityTypeName(entity)\">\r\n      {{ getEntityTypeName(entity) }}\r\n    </span>\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- Actions Dropdown Renderer Template -->\r\n<!-- Context: { $implicit: unknown, row: entityResponseData, value: unknown, column: GridColumn } -->\r\n<ng-template #actionsDropdownRenderer let-value=\"value\" let-entity=\"row\">\r\n  <cide-ele-dropdown \r\n    [items]=\"getDropdownItems(entity)\"\r\n    [config]=\"getDropdownConfig()\"\r\n    (itemClick)=\"onDropdownItemClick($event, entity)\">\r\n  </cide-ele-dropdown>\r\n</ng-template>\r\n\r\n", styles: ["", ":host{height:100%;display:flex;flex-direction:column}.entity-list-container{height:100%;display:flex;flex-direction:column;overflow:hidden}.tw-overflow-auto{flex:1;min-height:0}cide-ele-data-grid{flex:1;min-height:0;display:flex;flex-direction:column}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput", "options", "multiple", "searchable", "showSearchInput", "loading", "valueKey", "labelKey", "treeView"], outputs: ["ngModelChange", "change", "searchChange"] }, { kind: "component", type: CideEleDataGridComponent, selector: "cide-ele-data-grid", inputs: ["config", "templateRenderers", "customFormatters", "actionHandlers", "serverSidePagination", "totalServerItems", "currentServerPage", "currentServerPageSize", "dragDropEnabled"], outputs: ["gridEvent"] }, { kind: "component", type: CideEleDropdownComponent, selector: "cide-ele-dropdown", inputs: ["items", "config", "triggerTemplate", "menuTemplate"], outputs: ["itemClick", "dropdownToggle"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideCoreEntityListComponent, isStandalone: true, selector: "cide-core-entity-list", viewQueries: [{ propertyName: "gridComponent", first: true, predicate: CideEleDataGridComponent, descendants: true, isSignal: true }, { propertyName: "entityDetailsRenderer", first: true, predicate: ["entityDetailsRenderer"], descendants: true, isSignal: true }, { propertyName: "entityTypeRenderer", first: true, predicate: ["entityTypeRenderer"], descendants: true, isSignal: true }, { propertyName: "actionsDropdownRenderer", first: true, predicate: ["actionsDropdownRenderer"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Entity List Container -->\n<div class=\"entity-list-container tw-bg-white tw-shadow-lg tw-rounded-lg tw-overflow-hidden\">\n  \n  <!-- Header Section with Filters -->\n  <div class=\"tw-px-6 tw-py-4 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-4 sm:tw-space-y-0\">\n      \n      <!-- Title -->\n      <div class=\"tw-flex tw-items-center tw-space-x-3\">\n        <cide-ele-icon class=\"tw-text-blue-600\">apartment</cide-ele-icon>\n        <div>\n          <h5 class=\"tw-text-sm tw-font-semibold tw-text-gray-900\">Entity Management</h5>\n        </div>\n      </div>\n\n      <!-- Actions -->\n      <div class=\"tw-flex tw-items-center tw-space-x-3\">\n        <!-- Entity Type Filter -->\n        <div class=\"tw-flex tw-items-center tw-space-x-2\">\n          <label for=\"entityTypeFilter\" class=\"tw-text-sm tw-font-medium tw-text-gray-700\">Type:</label>\n          <cide-ele-select\n            id=\"entityTypeFilter\"\n            [options]=\"entityTypeOptions()\"\n            [ngModel]=\"selectedEntityTypeValue\"\n            (ngModelChange)=\"onEntityTypeChange($event)\"\n            class=\"tw-min-w-40\">\n          </cide-ele-select>\n        </div>\n\n        <!-- Org Structure Button -->\n        <button\n          cideEleButton\n          variant=\"secondary\"\n          size=\"sm\"\n          (click)=\"onOrgStructure()\"\n          class=\"tw-whitespace-nowrap tw-flex tw-items-center tw-gap-2\">\n          <cide-ele-icon size=\"xs\" class=\"tw-w-6 tw-h-5\">account_tree</cide-ele-icon>\n          Org Structure\n        </button>\n\n        <!-- Add Entity Button -->\n        <button\n          cideEleButton\n          variant=\"primary\"\n          size=\"sm\"\n          (click)=\"router.navigate(['control-panel', 'entity-create'])\"\n          class=\"tw-whitespace-nowrap tw-flex tw-items-center tw-gap-2\">\n          <cide-ele-icon size=\"xs\" class=\"tw-w-6 tw-h-5\">add</cide-ele-icon>\n          Add Entity\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\">\n          <cide-ele-icon name=\"exclamation-triangle\" class=\"tw-text-red-400\"></cide-ele-icon>\n          <div class=\"tw-ml-3\">\n            <h3 class=\"tw-text-sm tw-font-medium tw-text-red-800\">Error</h3>\n            <p class=\"tw-text-sm tw-text-red-700 tw-mt-1\">{{ error() }}</p>\n          </div>\n        </div>\n      </div>\n    }\n  </div>\n\n  <!-- Data Grid Component -->\n  <cide-ele-data-grid\n    [config]=\"gridConfig()\"\n    [templateRenderers]=\"templateRenderers()\"\n    [actionHandlers]=\"actionHandlers\"\n    (gridEvent)=\"onGridEvent($event)\">\n  </cide-ele-data-grid>\n\n</div>\n\n<!-- Custom Renderer Templates -->\n\n<!-- Entity Details Renderer Template -->\n<!-- Context: { $implicit: unknown, row: entityResponseData, value: unknown, column: GridColumn } -->\n<ng-template #entityDetailsRenderer let-value=\"value\" let-entity=\"row\">\n  <div class=\"tw-flex tw-items-center tw-space-x-3\">\n    <div class=\"tw-flex-shrink-0 tw-w-10 tw-h-10 tw-bg-blue-100 tw-rounded-full tw-flex tw-items-center tw-justify-center\">\n      <span class=\"tw-text-blue-600 tw-font-semibold tw-text-sm\">\n        {{ (entity.syen_entity_code || 'NA').substring(0, 2).toUpperCase() }}\n      </span>\n    </div>\n    <div class=\"tw-flex-1 tw-min-w-0\">\n      <p class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-truncate\" [title]=\"entity.syen_name || 'Unknown Entity'\">\n        {{ entity.syen_name || 'Unknown Entity' }}\n      </p>\n      <p class=\"tw-text-sm tw-text-gray-500 tw-truncate\" [title]=\"entity.syen_entity_code || 'N/A'\">\n        Code: {{ entity.syen_entity_code || 'N/A' }}\n      </p>\n    </div>\n  </div>\n</ng-template>\n\n\n<!-- Entity Type Renderer Template -->\n<!-- Context: { $implicit: unknown, row: entityResponseData, value: unknown, column: GridColumn } -->\n<ng-template #entityTypeRenderer let-value=\"value\" let-entity=\"row\">\n  <div class=\"tw-flex tw-flex-col tw-items-center tw-space-y-1\">\n    <span class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-truncate\" [title]=\"getEntityTypeName(entity)\">\n      {{ getEntityTypeName(entity) }}\n    </span>\n  </div>\n</ng-template>\n\n<!-- Actions Dropdown Renderer Template -->\n<!-- Context: { $implicit: unknown, row: entityResponseData, value: unknown, column: GridColumn } -->\n<ng-template #actionsDropdownRenderer let-value=\"value\" let-entity=\"row\">\n  <cide-ele-dropdown \n    [items]=\"getDropdownItems(entity)\"\n    [config]=\"getDropdownConfig()\"\n    (itemClick)=\"onDropdownItemClick($event, entity)\">\n  </cide-ele-dropdown>\n</ng-template>\n\n", styles: ["", ":host{height:100%;display:flex;flex-direction:column}.entity-list-container{height:100%;display:flex;flex-direction:column;overflow:hidden}.tw-overflow-auto{flex:1;min-height:0}cide-ele-data-grid{flex:1;min-height:0;display:flex;flex-direction:column}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput", "options", "multiple", "searchable", "showSearchInput", "loading", "valueKey", "labelKey", "treeView"], outputs: ["ngModelChange", "change", "searchChange"] }, { kind: "component", type: CideEleDataGridComponent, selector: "cide-ele-data-grid", inputs: ["config", "templateRenderers", "customFormatters", "actionHandlers", "serverSidePagination", "totalServerItems", "currentServerPage", "currentServerPageSize", "dragDropEnabled"], outputs: ["gridEvent"] }, { kind: "component", type: CideEleDropdownComponent, selector: "cide-ele-dropdown", inputs: ["items", "config", "triggerTemplate", "menuTemplate"], outputs: ["itemClick", "dropdownToggle"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCoreEntityListComponent, decorators: [{
             type: Component,
@@ -11511,7 +11620,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                         CideSelectComponent,
                         CideEleDataGridComponent,
                         CideEleDropdownComponent
-                    ], template: "<!-- Entity List Container -->\r\n<div class=\"entity-list-container tw-bg-white tw-shadow-lg tw-rounded-lg tw-overflow-hidden\">\r\n  \r\n  <!-- Header Section with Filters -->\r\n  <div class=\"tw-px-6 tw-py-4 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-4 sm:tw-space-y-0\">\r\n      \r\n      <!-- Title -->\r\n      <div class=\"tw-flex tw-items-center tw-space-x-3\">\r\n        <cide-ele-icon class=\"tw-text-blue-600\">apartment</cide-ele-icon>\r\n        <div>\r\n          <h5 class=\"tw-text-sm tw-font-semibold tw-text-gray-900\">Entity Management</h5>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Actions -->\r\n      <div class=\"tw-flex tw-items-center tw-space-x-3\">\r\n        <!-- Entity Type Filter -->\r\n        <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\n          <label for=\"entityTypeFilter\" class=\"tw-text-sm tw-font-medium tw-text-gray-700\">Type:</label>\r\n          <cide-ele-select\r\n            id=\"entityTypeFilter\"\r\n            [options]=\"entityTypeOptions()\"\r\n            [ngModel]=\"selectedEntityTypeValue\"\r\n            (ngModelChange)=\"onEntityTypeChange($event)\"\r\n            class=\"tw-min-w-40\">\r\n          </cide-ele-select>\r\n        </div>\r\n\r\n        <!-- Org Structure Button -->\r\n        <button\r\n          cideEleButton\r\n          variant=\"secondary\"\r\n          size=\"sm\"\r\n          (click)=\"onOrgStructure()\"\r\n          class=\"tw-whitespace-nowrap tw-flex tw-items-center tw-gap-2\">\r\n          <cide-ele-icon size=\"xs\" class=\"tw-w-6 tw-h-5\">account_tree</cide-ele-icon>\r\n          Org Structure\r\n        </button>\r\n\r\n        <!-- Add Entity Button -->\r\n        <button\r\n          cideEleButton\r\n          variant=\"primary\"\r\n          size=\"sm\"\r\n          (click)=\"router.navigate(['control-panel', 'entity-create'])\"\r\n          class=\"tw-whitespace-nowrap tw-flex tw-items-center tw-gap-2\">\r\n          <cide-ele-icon size=\"xs\" class=\"tw-w-6 tw-h-5\">add</cide-ele-icon>\r\n          Add Entity\r\n        </button>\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\">\r\n          <cide-ele-icon name=\"exclamation-triangle\" class=\"tw-text-red-400\"></cide-ele-icon>\r\n          <div class=\"tw-ml-3\">\r\n            <h3 class=\"tw-text-sm tw-font-medium tw-text-red-800\">Error</h3>\r\n            <p class=\"tw-text-sm tw-text-red-700 tw-mt-1\">{{ error() }}</p>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    }\r\n  </div>\r\n\r\n  <!-- Data Grid Component -->\r\n  <cide-ele-data-grid\r\n    [config]=\"gridConfig()\"\r\n    [templateRenderers]=\"templateRenderers()\"\r\n    [actionHandlers]=\"actionHandlers\"\r\n    (gridEvent)=\"onGridEvent($event)\">\r\n  </cide-ele-data-grid>\r\n\r\n</div>\r\n\r\n<!-- Custom Renderer Templates -->\r\n\r\n<!-- Entity Details Renderer Template -->\r\n<!-- Context: { $implicit: unknown, row: entityResponseData, value: unknown, column: GridColumn } -->\r\n<ng-template #entityDetailsRenderer let-value=\"value\" let-entity=\"row\">\r\n  <div class=\"tw-flex tw-items-center tw-space-x-3\">\r\n    <div class=\"tw-flex-shrink-0 tw-w-10 tw-h-10 tw-bg-blue-100 tw-rounded-full tw-flex tw-items-center tw-justify-center\">\r\n      <span class=\"tw-text-blue-600 tw-font-semibold tw-text-sm\">\r\n        {{ (entity.syen_entity_code || 'NA').substring(0, 2).toUpperCase() }}\r\n      </span>\r\n    </div>\r\n    <div class=\"tw-flex-1 tw-min-w-0\">\r\n      <p class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-truncate\" [title]=\"entity.syen_name || 'Unknown Entity'\">\r\n        {{ entity.syen_name || 'Unknown Entity' }}\r\n      </p>\r\n      <p class=\"tw-text-sm tw-text-gray-500 tw-truncate\" [title]=\"entity.syen_entity_code || 'N/A'\">\r\n        Code: {{ entity.syen_entity_code || 'N/A' }}\r\n      </p>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n\r\n<!-- Entity Type Renderer Template -->\r\n<!-- Context: { $implicit: unknown, row: entityResponseData, value: unknown, column: GridColumn } -->\r\n<ng-template #entityTypeRenderer let-value=\"value\" let-entity=\"row\">\r\n  <div class=\"tw-flex tw-flex-col tw-items-center tw-space-y-1\">\r\n    <span class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-truncate\" [title]=\"getEntityTypeName(entity)\">\r\n      {{ getEntityTypeName(entity) }}\r\n    </span>\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- Actions Dropdown Renderer Template -->\r\n<!-- Context: { $implicit: unknown, row: entityResponseData, value: unknown, column: GridColumn } -->\r\n<ng-template #actionsDropdownRenderer let-value=\"value\" let-entity=\"row\">\r\n  <cide-ele-dropdown \r\n    [items]=\"getDropdownItems(entity)\"\r\n    [config]=\"getDropdownConfig()\"\r\n    (itemClick)=\"onDropdownItemClick($event, entity)\">\r\n  </cide-ele-dropdown>\r\n</ng-template>\r\n\r\n", styles: [":host{height:100%;display:flex;flex-direction:column}.entity-list-container{height:100%;display:flex;flex-direction:column;overflow:hidden}.tw-overflow-auto{flex:1;min-height:0}cide-ele-data-grid{flex:1;min-height:0;display:flex;flex-direction:column}\n"] }]
+                    ], template: "<!-- Entity List Container -->\n<div class=\"entity-list-container tw-bg-white tw-shadow-lg tw-rounded-lg tw-overflow-hidden\">\n  \n  <!-- Header Section with Filters -->\n  <div class=\"tw-px-6 tw-py-4 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-4 sm:tw-space-y-0\">\n      \n      <!-- Title -->\n      <div class=\"tw-flex tw-items-center tw-space-x-3\">\n        <cide-ele-icon class=\"tw-text-blue-600\">apartment</cide-ele-icon>\n        <div>\n          <h5 class=\"tw-text-sm tw-font-semibold tw-text-gray-900\">Entity Management</h5>\n        </div>\n      </div>\n\n      <!-- Actions -->\n      <div class=\"tw-flex tw-items-center tw-space-x-3\">\n        <!-- Entity Type Filter -->\n        <div class=\"tw-flex tw-items-center tw-space-x-2\">\n          <label for=\"entityTypeFilter\" class=\"tw-text-sm tw-font-medium tw-text-gray-700\">Type:</label>\n          <cide-ele-select\n            id=\"entityTypeFilter\"\n            [options]=\"entityTypeOptions()\"\n            [ngModel]=\"selectedEntityTypeValue\"\n            (ngModelChange)=\"onEntityTypeChange($event)\"\n            class=\"tw-min-w-40\">\n          </cide-ele-select>\n        </div>\n\n        <!-- Org Structure Button -->\n        <button\n          cideEleButton\n          variant=\"secondary\"\n          size=\"sm\"\n          (click)=\"onOrgStructure()\"\n          class=\"tw-whitespace-nowrap tw-flex tw-items-center tw-gap-2\">\n          <cide-ele-icon size=\"xs\" class=\"tw-w-6 tw-h-5\">account_tree</cide-ele-icon>\n          Org Structure\n        </button>\n\n        <!-- Add Entity Button -->\n        <button\n          cideEleButton\n          variant=\"primary\"\n          size=\"sm\"\n          (click)=\"router.navigate(['control-panel', 'entity-create'])\"\n          class=\"tw-whitespace-nowrap tw-flex tw-items-center tw-gap-2\">\n          <cide-ele-icon size=\"xs\" class=\"tw-w-6 tw-h-5\">add</cide-ele-icon>\n          Add Entity\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\">\n          <cide-ele-icon name=\"exclamation-triangle\" class=\"tw-text-red-400\"></cide-ele-icon>\n          <div class=\"tw-ml-3\">\n            <h3 class=\"tw-text-sm tw-font-medium tw-text-red-800\">Error</h3>\n            <p class=\"tw-text-sm tw-text-red-700 tw-mt-1\">{{ error() }}</p>\n          </div>\n        </div>\n      </div>\n    }\n  </div>\n\n  <!-- Data Grid Component -->\n  <cide-ele-data-grid\n    [config]=\"gridConfig()\"\n    [templateRenderers]=\"templateRenderers()\"\n    [actionHandlers]=\"actionHandlers\"\n    (gridEvent)=\"onGridEvent($event)\">\n  </cide-ele-data-grid>\n\n</div>\n\n<!-- Custom Renderer Templates -->\n\n<!-- Entity Details Renderer Template -->\n<!-- Context: { $implicit: unknown, row: entityResponseData, value: unknown, column: GridColumn } -->\n<ng-template #entityDetailsRenderer let-value=\"value\" let-entity=\"row\">\n  <div class=\"tw-flex tw-items-center tw-space-x-3\">\n    <div class=\"tw-flex-shrink-0 tw-w-10 tw-h-10 tw-bg-blue-100 tw-rounded-full tw-flex tw-items-center tw-justify-center\">\n      <span class=\"tw-text-blue-600 tw-font-semibold tw-text-sm\">\n        {{ (entity.syen_entity_code || 'NA').substring(0, 2).toUpperCase() }}\n      </span>\n    </div>\n    <div class=\"tw-flex-1 tw-min-w-0\">\n      <p class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-truncate\" [title]=\"entity.syen_name || 'Unknown Entity'\">\n        {{ entity.syen_name || 'Unknown Entity' }}\n      </p>\n      <p class=\"tw-text-sm tw-text-gray-500 tw-truncate\" [title]=\"entity.syen_entity_code || 'N/A'\">\n        Code: {{ entity.syen_entity_code || 'N/A' }}\n      </p>\n    </div>\n  </div>\n</ng-template>\n\n\n<!-- Entity Type Renderer Template -->\n<!-- Context: { $implicit: unknown, row: entityResponseData, value: unknown, column: GridColumn } -->\n<ng-template #entityTypeRenderer let-value=\"value\" let-entity=\"row\">\n  <div class=\"tw-flex tw-flex-col tw-items-center tw-space-y-1\">\n    <span class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-truncate\" [title]=\"getEntityTypeName(entity)\">\n      {{ getEntityTypeName(entity) }}\n    </span>\n  </div>\n</ng-template>\n\n<!-- Actions Dropdown Renderer Template -->\n<!-- Context: { $implicit: unknown, row: entityResponseData, value: unknown, column: GridColumn } -->\n<ng-template #actionsDropdownRenderer let-value=\"value\" let-entity=\"row\">\n  <cide-ele-dropdown \n    [items]=\"getDropdownItems(entity)\"\n    [config]=\"getDropdownConfig()\"\n    (itemClick)=\"onDropdownItemClick($event, entity)\">\n  </cide-ele-dropdown>\n</ng-template>\n\n", styles: [":host{height:100%;display:flex;flex-direction:column}.entity-list-container{height:100%;display:flex;flex-direction:column;overflow:hidden}.tw-overflow-auto{flex:1;min-height:0}cide-ele-data-grid{flex:1;min-height:0;display:flex;flex-direction:column}\n"] }]
         }] });
 
 var entityList_component = /*#__PURE__*/Object.freeze({
@@ -15326,7 +15435,7 @@ class CideCoreUserCreateComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCoreUserCreateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideCoreUserCreateComponent, isStandalone: true, selector: "cide-core-user-create", viewQueries: [{ propertyName: "menuDetailsRendererTemplate", first: true, predicate: ["menuDetailsRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "permissionsCheckboxRendererTemplate", first: true, predicate: ["permissionsCheckboxRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "menuTypeRendererTemplate", first: true, predicate: ["menuTypeRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "menuRightsPermissionsRendererTemplate", first: true, predicate: ["menuRightsPermissionsRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "permissionsRendererTemplate", first: true, predicate: ["permissionsRendererTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- \r\n  ENTERPRISE USER MASTER FORM\r\n  \r\n  Enterprise-Level Styling with Tailwind CSS\r\n  Features: Responsive grids, proper typography, enhanced user experience\r\n-->\r\n\r\n<div class=\"tw-w-full tw-h-full tw-p-1 tw-pt-2\">\r\n  <!-- Toast Notifications -->\r\n  <cide-ele-toast-notification></cide-ele-toast-notification>\r\n  \r\n  <form class=\"tw-max-w-7xl tw-mx-auto tw-bg-transparent\" [formGroup]=\"userMasterForm\" [class.tw-opacity-60]=\"loading()\"\r\n    (ngSubmit)=\"onSubmit()\">\r\n\r\n\r\n    <!-- User Context Header -->\r\n    <div\r\n      class=\"tw-bg-gradient-to-r tw-from-blue-50 tw-to-indigo-50 tw-border tw-border-blue-200 tw-rounded-md tw-p-1 tw-mb-2 tw-shadow-sm\">\r\n      <div class=\"tw-flex tw-items-center tw-justify-between tw-flex-wrap tw-gap-2\">\r\n        <!-- User Basic Info Display -->\r\n        <div class=\"tw-flex tw-items-center tw-gap-3 tw-flex-wrap\">\r\n          <!-- Profile Photo Preview -->\r\n          <div class=\"tw-flex tw-items-center tw-gap-2\">\r\n            <div\r\n              class=\"tw-w-8 tw-h-8 tw-rounded-full tw-bg-blue-100 tw-border tw-border-blue-200 tw-flex tw-items-center tw-justify-center tw-overflow-hidden\">\r\n              @if (userMasterForm.get('user_photo_id_cyfm')?.value) {\r\n              <img cideEleFileImage [fileId]=\"userMasterForm.get('user_photo_id_cyfm')?.value\"\r\n                [altText]=\"'Profile Photo'\" class=\"tw-w-full tw-h-full tw-object-cover\">\r\n              } @else {\r\n              <cide-ele-icon name=\"person\" class=\"tw-w-5 tw-h-5 tw-text-blue-600\">\r\n              </cide-ele-icon>\r\n              }\r\n            </div>\r\n            <div class=\"tw-flex tw-flex-col\">\r\n              <span class=\"tw-text-xs tw-font-medium tw-text-blue-900\">\r\n                {{ getUserFullName() || 'New User' }}\r\n              </span>\r\n              <span class=\"tw-text-xs tw-text-blue-600\">\r\n                {{ getUserUsername() || 'Username not set' }}\r\n              </span>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Contact Info -->\r\n          <div class=\"tw-flex tw-items-center tw-gap-3\">\r\n            <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-xs tw-text-gray-700\">\r\n              <cide-ele-icon variant=\"gray\" size=\"xs\">email</cide-ele-icon>\r\n              <span>{{ getUserEmail() || 'Email not set' }}</span>\r\n            </div>\r\n            <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-xs tw-text-gray-700\">\r\n              <cide-ele-icon variant=\"gray\" size=\"xs\">phone</cide-ele-icon>\r\n              <span>{{ getUserMobile() || 'Mobile not set' }}</span>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Active Status -->\r\n          <div class=\"tw-flex tw-items-center tw-gap-1\">\r\n            @if (getUserActiveStatus()) {\r\n            <span\r\n              class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded tw-text-xs tw-font-medium tw-bg-green-100 tw-text-green-700\">\r\n              <cide-ele-icon variant=\"green\" size=\"xs\" class=\"tw-mr-1\">check_circle</cide-ele-icon>\r\n              Active\r\n            </span>\r\n            } @else {\r\n            <span\r\n              class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded tw-text-xs tw-font-medium tw-bg-red-100 tw-text-red-700\">\r\n              <cide-ele-icon variant=\"red\" size=\"xs\" class=\"tw-mr-1\">cancel</cide-ele-icon>\r\n              Inactive\r\n            </span>\r\n            }\r\n          </div>\r\n        </div>\r\n\r\n        <!-- Entity Info -->\r\n        <div class=\"tw-flex tw-items-center tw-gap-2\">\r\n          @if (hasDefaultEntity()) {\r\n          <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-xs tw-text-blue-700\">\r\n            <cide-ele-icon variant=\"blue\" size=\"xs\">business</cide-ele-icon>\r\n            <span class=\"tw-font-medium\">{{ getDefaultEntityName() }}</span>\r\n          </div>\r\n          } @else {\r\n          <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-xs tw-text-gray-500\">\r\n            <cide-ele-icon variant=\"gray\" size=\"xs\">business</cide-ele-icon>\r\n            <span class=\"tw-italic\">No entity</span>\r\n          </div>\r\n          }\r\n\r\n          <span class=\"tw-text-xs tw-text-gray-600 tw-px-2 tw-py-1 tw-bg-gray-100 tw-rounded\">\r\n            {{ getEntityMappingCount() }} mapping(s)\r\n          </span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Tab Navigation -->\r\n    <div class=\"tw-p-0 tw-mb-2 tw-border-b tw-border-gray-200\">\r\n      <cide-ele-tab [tabs]=\"userTabs()\" [activeTabId]=\"activeTab()\" size=\"md\" variant=\"default\"\r\n        (tabChange)=\"onTabChange($event)\">\r\n      </cide-ele-tab>\r\n    </div>\r\n\r\n    <!-- Tab Content -->\r\n    <div class=\"tw-transition-opacity tw-duration-300\" [class.tw-opacity-60]=\"loading()\">\r\n      @switch (activeTab()) {\r\n\r\n      @case ('basic') {\r\n      <!-- User Basic Information Section -->\r\n      <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\r\n\r\n        <!-- Top Section: Form Fields on Left, Profile Photo on Right -->\r\n        <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-[1fr_200px] tw-gap-4 tw-mb-4\">\r\n          <!-- Left Side: Form Fields -->\r\n          <div class=\"tw-space-y-4\">\r\n            <!-- Name Fields - All in One Row -->\r\n            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-4\">\r\n              <cide-ele-input id=\"user_firstname\" label=\"First Name *\" formControlName=\"user_firstname\"\r\n                placeholder=\"Enter first name\" [maxlength]=\"20\" size=\"md\" (ngModelChange)=\"onNameFieldChange()\">\r\n              </cide-ele-input>\r\n\r\n              <cide-ele-input id=\"user_middlename\" label=\"Middle Name\" formControlName=\"user_middlename\"\r\n                placeholder=\"Enter middle name\" [maxlength]=\"20\" size=\"md\" (ngModelChange)=\"onNameFieldChange()\">\r\n              </cide-ele-input>\r\n\r\n              <cide-ele-input id=\"user_lastname\" label=\"Last Name *\" formControlName=\"user_lastname\"\r\n                placeholder=\"Enter last name\" [maxlength]=\"20\" size=\"md\" (ngModelChange)=\"onNameFieldChange()\">\r\n              </cide-ele-input>\r\n\r\n              <cide-ele-input id=\"user_fullname\" label=\"Full Name * (Auto-generated)\" formControlName=\"user_fullname\"\r\n                placeholder=\"Auto-generated from name fields or enter manually\" [maxlength]=\"62\" size=\"md\">\r\n              </cide-ele-input>\r\n            </div>\r\n\r\n            <!-- Contact Information - All in One Row -->\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              <cide-ele-input id=\"user_username\" label=\"Username *\" formControlName=\"user_username\"\r\n                placeholder=\"Enter unique username\" [maxlength]=\"20\" size=\"md\">\r\n              </cide-ele-input>\r\n\r\n              <cide-ele-input id=\"user_emailid\" label=\"Email ID *\" formControlName=\"user_emailid\" type=\"email\"\r\n                placeholder=\"Enter valid email address\" [maxlength]=\"320\" size=\"md\">\r\n              </cide-ele-input>\r\n\r\n              <cide-ele-input id=\"user_mobileno\" label=\"Mobile Number *\" formControlName=\"user_mobileno\" type=\"tel\"\r\n                placeholder=\"Enter mobile number\" [maxlength]=\"15\" size=\"md\">\r\n              </cide-ele-input>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Right Side: Profile Photo Upload -->\r\n          <div class=\"tw-flex tw-items-start tw-justify-center tw-p-0\">\r\n            <cide-ele-file-input id=\"user_photo_id_cyfm\" formControlName=\"user_photo_id_cyfm\" accept=\"image/*\"\r\n              [showPreview]=\"true\" [previewBoxMode]=\"true\" [showFileName]=\"false\" previewWidth=\"180px\"\r\n              previewHeight=\"120px\" placeholderText=\"Upload Photo\" placeholderIcon=\"cloud_upload\" [autoUpload]=\"true\"\r\n              [uploadData]=\"getProfilePhotoUploadData()\" (uploadSuccess)=\"onProfilePhotoUploadSuccess($event)\"\r\n              (uploadError)=\"onProfilePhotoUploadError($event)\"\r\n              (uploadProgressChange)=\"onProfilePhotoUploadProgress($event)\">\r\n            </cide-ele-file-input>\r\n          </div>\r\n        </div>\r\n\r\n\r\n\r\n        <!-- Status Control -->\r\n        <div class=\"tw-grid tw-grid-cols-1 tw-mb-2\">\r\n          <div class=\"tw-p-2 tw-bg-blue-50 tw-border tw-border-blue-100 tw-rounded-lg\">\r\n            <label\r\n              class=\"tw-flex tw-flex-col tw-cursor-pointer tw-py-2 tw-bg-transparent tw-border-none tw-rounded-none tw-transition-all tw-duration-200 hover:tw-bg-blue-75\">\r\n              <cide-ele-input type=\"checkbox\" label=\"Active User Status\" formControlName=\"user_isactive\"\r\n                class=\"tw-h-5 tw-accent-blue-500 tw-rounded tw-mb-1\" />\r\n              <span class=\"tw-font-semibold tw-text-gray-700 tw-text-base\"></span>\r\n              <span class=\"tw-text-sm tw-text-gray-600 tw-mt-1 tw-leading-relaxed\">Enable this user account for system\r\n                access and operations</span>\r\n            </label>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      }\r\n\r\n      @case ('auth') {\r\n      <!-- Authentication Section -->\r\n      <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\r\n        <!-- Password Fields -->\r\n        @if (shouldShowPasswordFields()) {\r\n        <div class=\"tw-mb-4\">\r\n          <!-- Password Fields Header for Edit Mode -->\r\n          @if (isEditMode()) {\r\n          <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\r\n            <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-800\">Update Password</h6>\r\n            <button type=\"button\"\r\n              class=\"tw-px-3 tw-py-1 tw-bg-gray-100 tw-text-gray-600 tw-border tw-border-gray-300 tw-rounded-md tw-text-xs tw-font-medium hover:tw-bg-gray-200 tw-transition-colors\"\r\n              (click)=\"cancelPasswordUpdate()\">\r\n              Cancel Password Update\r\n            </button>\r\n          </div>\r\n          }\r\n\r\n          <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-2 md:tw-grid-cols-1 tw-gap-6\">\r\n            <cide-ele-input id=\"user_password\" [label]=\"getPasswordFieldLabel()\" formControlName=\"user_password\"\r\n              type=\"password\" placeholder=\"Enter secure password (min 8 characters)\" size=\"md\">\r\n            </cide-ele-input>\r\n\r\n            <cide-ele-input id=\"user_confirm_password\" [label]=\"getPasswordConfirmLabel()\"\r\n              formControlName=\"user_confirm_password\" type=\"password\" placeholder=\"Confirm your password\" size=\"md\">\r\n            </cide-ele-input>\r\n          </div>\r\n        </div>\r\n        }\r\n\r\n        <!-- Password Update Option for Edit Mode -->\r\n        @if (isEditMode() && !shouldShowPasswordFields()) {\r\n        <div class=\"tw-mb-4\">\r\n          <div class=\"tw-p-2 tw-bg-blue-50 tw-border tw-border-blue-200 tw-rounded-lg\">\r\n            <h6 class=\"tw-text-sm tw-font-semibold tw-text-blue-800 tw-mb-2\">Password Update</h6>\r\n            <p class=\"tw-text-sm tw-text-blue-600 tw-mb-3\">Current password will be kept. Click below to change\r\n              password.</p>\r\n\r\n            @if (hasPasswordInput()) {\r\n            <div\r\n              class=\"tw-mb-3 tw-p-2 tw-bg-yellow-50 tw-border tw-border-yellow-200 tw-rounded tw-text-sm tw-text-yellow-700\">\r\n              <cide-ele-icon variant=\"yellow\" size=\"xs\" class=\"tw-mr-1\">warning</cide-ele-icon>\r\n              Password fields contain text. Click \"Change Password\" to manage existing input.\r\n            </div>\r\n            }\r\n\r\n            <button type=\"button\"\r\n              class=\"tw-px-4 tw-py-2 tw-bg-blue-100 tw-text-blue-700 tw-border tw-border-blue-300 tw-rounded-md tw-text-sm tw-font-medium hover:tw-bg-blue-200 tw-transition-colors\"\r\n              (click)=\"triggerPasswordUpdate()\">\r\n              @if (hasPasswordInput()) {\r\n              Manage Password Fields\r\n              } @else {\r\n              Change Password\r\n              }\r\n            </button>\r\n          </div>\r\n        </div>\r\n        }\r\n\r\n        <!-- Password Options -->\r\n        <div class=\"tw-grid tw-grid-cols-1 tw-gap-4 tw-mb-4\">\r\n          <div class=\"tw-p-2 tw-bg-yellow-50 tw-border tw-border-yellow-100 tw-rounded-lg\">\r\n            <label\r\n              class=\"tw-flex tw-flex-col tw-gap-2 tw-cursor-pointer tw-py-2 tw-bg-transparent tw-border-none tw-rounded-none tw-transition-all tw-duration-200\">\r\n              <cide-ele-input type=\"checkbox\" label=\"Force Password Change on Login\"\r\n                formControlName=\"user_passwordchangeonlogin\" class=\"tw-h-5 tw-accent-yellow-500 tw-rounded tw-mb-1\" />\r\n              <span class=\"tw-text-sm tw-text-gray-600 tw-mt-1 tw-leading-relaxed\">User will be required to change\r\n                password on next login</span>\r\n            </label>\r\n          </div>\r\n        </div>\r\n\r\n      </div>\r\n      }\r\n\r\n      @case ('roles') {\r\n      <!-- Entity, Roles & Permissions Mapping Section -->\r\n      <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\r\n\r\n\r\n\r\n        <!-- Important Note -->\r\n        <div class=\"tw-bg-amber-50 tw-border tw-border-amber-200 tw-rounded-lg tw-p-2 tw-mb-4\">\r\n          <div class=\"tw-flex tw-items-start tw-gap-3\">\r\n            <cide-ele-icon variant=\"amber\" size=\"lg\">info</cide-ele-icon>\r\n            <div class=\"tw-flex-1\">\r\n              <h4 class=\"tw-text-sm tw-font-semibold tw-text-amber-800 tw-mb-1\">Entity-Role Based Access</h4>\r\n              <p class=\"tw-text-sm tw-text-amber-700 tw-mb-2\">User access is completely managed through entity-role\r\n                mappings below. At least one entity mapping is required for user access.</p>\r\n              @if (hasDefaultEntity()) {\r\n              <div class=\"tw-flex tw-items-center tw-gap-2 tw-mt-2 tw-p-2 tw-bg-amber-100 tw-rounded\">\r\n                <cide-ele-icon variant=\"amber\" size=\"sm\">star</cide-ele-icon>\r\n                <span class=\"tw-text-sm tw-text-amber-800\">\r\n                  <strong>Default Entity:</strong> {{ getDefaultEntityName() }}\r\n                </span>\r\n              </div>\r\n              } @else {\r\n              <div class=\"tw-text-sm tw-text-amber-600 tw-mt-2 tw-italic\">\r\n                \u26A0\uFE0F No default entity selected. Please set one entity as default.\r\n              </div>\r\n              }\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- Entity-Role Mapping Section -->\r\n        <div class=\"tw-flex tw-text-center tw-justify-between tw-items-center tw-mb-4\">\r\n          <div>\r\n            <h4 class=\"tw-text-sm tw-text-left tw-font-semibold tw-text-blue-900 tw-mb-1\">Entity-Role Mapping</h4>\r\n            <p class=\"tw-text-sm tw-text-blue-700\">Map user to entities with specific roles and permissions</p>\r\n          </div>\r\n          <div class=\"tw-flex tw-flex-col tw-items-end\">\r\n            <button cideEleButton variant=\"primary\" size=\"md\" type=\"button\" (click)=\"addEntityMapping()\"\r\n              leftIcon=\"add\" [disabled]=\"isAllEntitiesMapped()\">\r\n              Add Entity Mapping\r\n            </button>\r\n\r\n            @if (isAllEntitiesMapped()) {\r\n            <div class=\"tw-mt-2 tw-p-2 tw-bg-blue-50 tw-border tw-border-blue-200 tw-rounded-md tw-max-w-xs\">\r\n              <p class=\"tw-text-xs tw-text-blue-700\">\r\n                <cide-ele-icon variant=\"info\" size=\"xs\" class=\"tw-mr-1\">info</cide-ele-icon>\r\n                All available entities are already mapped.\r\n              </p>\r\n            </div>\r\n            }\r\n          </div>\r\n        </div>\r\n\r\n        <div formArrayName=\"core_entity_mapping\">\r\n            @for (mapping of entityMappings(); track $index; let i = $index) {\r\n            <div class=\"tw-bg-white tw-border tw-border-blue-200 tw-rounded-xl tw-mb-6 tw-overflow-hidden tw-shadow-sm\"\r\n              [formGroupName]=\"i\">\r\n              <div\r\n                class=\"tw-bg-gradient-to-r tw-from-blue-50 tw-to-blue-100 tw-px-6 tw-py-3 tw-flex tw-justify-between tw-items-center tw-border-b tw-border-blue-200\">\r\n                <div class=\"tw-flex tw-items-center tw-gap-2\">\r\n                  <h5 class=\"tw-m-0 tw-text-blue-800 tw-text-sm tw-font-semibold\">Entity Mapping {{ i + 1 }}</h5>\r\n                  @if (mapping.syenm_isdefault) {\r\n                  <span\r\n                    class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded-full tw-text-xs tw-font-medium tw-bg-green-100 tw-text-green-800\">\r\n                    <cide-ele-icon variant=\"green\" size=\"xs\" class=\"tw-mr-1\">star</cide-ele-icon>\r\n                    Default\r\n                  </span>\r\n                  }\r\n                </div>\r\n                @if (!mapping?._id) {\r\n                <button cideEleButton variant=\"danger\" size=\"sm\" type=\"button\" (click)=\"removeEntityMapping(i)\"\r\n                  leftIcon=\"delete\">\r\n                  Remove\r\n                </button>\r\n                }\r\n              </div>\r\n\r\n              <div>\r\n                <!-- Entity and Role Selection -->\r\n                <div class=\"tw-grid tw-px-3 tw-py-1 tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4 tw-mb-4\">\r\n                  <div>\r\n                    <cide-ele-select label=\"Entity *\" [options]=\"getFilteredEntityOptions(i)\"\r\n                      formControlName=\"syenm_entity_id_syen\" valueKey=\"_id\" labelKey=\"syen_name\"\r\n                      placeholder=\"Select entity\" size=\"md\" (change)=\"onEntityChange(i, $event)\">\r\n                    </cide-ele-select>\r\n\r\n                    @if (isAllEntitiesSelected(i)) {\r\n                    <div class=\"tw-mt-2 tw-p-2 tw-bg-yellow-50 tw-border tw-border-yellow-200 tw-rounded-md\">\r\n                      <p class=\"tw-text-xs tw-text-yellow-700\">\r\n                        <cide-ele-icon variant=\"warning\" size=\"xs\" class=\"tw-mr-1\">info</cide-ele-icon>\r\n                        All entities are already mapped. Remove another mapping to add this one.\r\n                      </p>\r\n                    </div>\r\n                    }\r\n                  </div>\r\n                  <cide-ele-select label=\"Role for this Entity\" [options]=\"getRoleOptionsForEntity(i)\"\r\n                    formControlName=\"syenm_role_id_syusrol\" valueKey=\"_id\" labelKey=\"syusrol_role_name\"\r\n                    placeholder=\"Select role for this entity\" size=\"md\" (change)=\"onRoleChange(i, $event)\">\r\n                  </cide-ele-select>\r\n                </div>\r\n\r\n\r\n                <!-- Entity-Specific Details and Active Period - All in One Row -->\r\n                <div class=\"tw-grid tw-px-3 tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-4 tw-mb-4\">\r\n                  <cide-ele-select label=\"Department for this Entity\" [options]=\"getDepartmentOptionsForEntity(i)\"\r\n                    formControlName=\"syenm_department_id_sydept\" (change)=\"onDepartmentChange($event)\" valueKey=\"_id\"\r\n                    labelKey=\"sydept_name\" placeholder=\"Select department\" size=\"md\">\r\n                  </cide-ele-select>\r\n\r\n                  <cide-ele-select label=\"Designation for this Entity\" [options]=\"getDesignationOptionsForEntity(i)\"\r\n                    valueKey=\"_id\" labelKey=\"sydsg_name\" formControlName=\"syenm_designation_id_sydsg\"\r\n                    placeholder=\"Select designation\" size=\"md\">\r\n                  </cide-ele-select>\r\n\r\n                  <cide-ele-input label=\"Active From *\" [id]=\"'syenm_activefrom['+i+']'\"\r\n                    formControlName=\"syenm_activefrom\" type=\"date\" size=\"md\">\r\n                  </cide-ele-input>\r\n\r\n                  <cide-ele-input label=\"Active Until\" [id]=\"'syenm_activeupto['+i+']'\"\r\n                    formControlName=\"syenm_activeupto\" type=\"date\" size=\"md\">\r\n                  </cide-ele-input>\r\n                </div>\r\n\r\n                <!-- Mapping Settings -->\r\n                <div class=\"tw-grid tw-px-3 tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-4 tw-mb-4\">\r\n                  <div class=\"tw-p-2 tw-bg-green-50 tw-border tw-border-green-200 tw-rounded-lg\">\r\n                    <cide-ele-input type=\"checkbox\" label=\"Default Entity\" formControlName=\"syenm_isdefault\"\r\n                      (change)=\"onDefaultEntityChange(i, $event)\" class=\"tw-h-5 tw-accent-green-500\" />\r\n                    <span class=\"tw-text-xs tw-text-green-600 tw-block tw-mt-1\">Set as user's default entity (only one\r\n                      allowed)</span>\r\n                  </div>\r\n\r\n                  <div class=\"tw-p-2 tw-bg-blue-50 tw-border tw-border-blue-200 tw-rounded-lg\">\r\n                    <cide-ele-input type=\"checkbox\" label=\"Active Mapping\" formControlName=\"syenm_isactive\"\r\n                      class=\"tw-h-5 tw-accent-blue-500\" />\r\n                    <span class=\"tw-text-xs tw-text-blue-600 tw-block tw-mt-1\">Enable this entity mapping</span>\r\n                  </div>\r\n                </div>\r\n\r\n                <!-- Menu Rights Grid for this Entity-Role -->\r\n                <div class=\"tw-border-t tw-border-gray-200\">\r\n\r\n                  @if (getMenuRightsForMapping(i).length > 0) {\r\n                  <!-- Menu Rights Tree Grid -->\r\n\r\n                  <cide-ele-data-grid [config]=\"getMenuRightsGridConfig(i)\"\r\n                    [templateRenderers]=\"getMenuRightsTemplateRenderers(i)\"\r\n                    (gridEvent)=\"onMenuRightsGridEvent($event, i)\" class=\"tw-h-96 tw-w-full\">\r\n                  </cide-ele-data-grid>\r\n\r\n                  } @else {\r\n                  <div class=\"tw-text-center tw-py-8 tw-bg-gray-50 tw-border tw-border-gray-200 tw-rounded-lg\">\r\n                    <div class=\"tw-text-gray-400 tw-mb-3\">\r\n                      <cide-ele-icon variant=\"gray\" size=\"lg\">menu</cide-ele-icon>\r\n                    </div>\r\n                    <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-600 tw-mb-2\">No Menu Rights Available</h6>\r\n                    <p class=\"tw-text-xs tw-text-gray-500 tw-mb-3 tw-text-center\">Select both entity and role to\r\n                      automatically load\r\n                      menu rights for this mapping.</p>\r\n                  </div>\r\n                  }\r\n                </div>\r\n              </div>\r\n            </div>\r\n            }\r\n          </div>\r\n\r\n          @if (entityMappings().length === 0) {\r\n          <div class=\"tw-text-center tw-py-8 tw-bg-white tw-border tw-border-blue-200 tw-rounded-lg\">\r\n            <div class=\"tw-text-blue-400 tw-mb-3\">\r\n              <cide-ele-icon variant=\"blue\" size=\"lg\">business</cide-ele-icon>\r\n            </div>\r\n            <h4 class=\"tw-text-sm tw-font-medium tw-text-blue-800 tw-mb-2\">No Entity Mappings</h4>\r\n            <p class=\"tw-text-blue-600 tw-mb-4 tw-text-center\">Add entity mappings to assign specific roles and\r\n              permissions for different entities.</p>\r\n            <button class=\"tw-mx-auto\" cideEleButton variant=\"primary\" size=\"md\" type=\"button\"\r\n              (click)=\"addEntityMapping()\" leftIcon=\"add\">\r\n              Add First Entity Mapping\r\n            </button>\r\n          </div>\r\n          }\r\n        </div>\r\n      }\r\n\r\n      @case ('addresses') {\r\n      <!-- Contact Addresses Section -->\r\n      <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\r\n        <div class=\"tw-flex tw-justify-end\">\r\n          <div class=\"tw-flex tw-justify-between tw-items-end tw-mb-2 tw-gap-4\">\r\n            <button cideEleButton variant=\"primary\" size=\"md\" type=\"button\" (click)=\"addContactAddress()\"\r\n              leftIcon=\"add\" [disabled]=\"!hasAddContactAddressRights()\">\r\n              Add New Address\r\n            </button>\r\n          </div>\r\n        </div>\r\n\r\n        <div formArrayName=\"core_user_contact_addresses\">\r\n          @for (address of contactAddresses(); track $index; let i = $index) {\r\n          <div [formGroupName]=\"i\"\r\n            class=\"tw-bg-white tw-border tw-border-gray-200 tw-rounded-xl tw-mb-8 tw-overflow-hidden tw-transition-all tw-duration-300 hover:tw-shadow-lg tw-shadow-sm\">\r\n            <div\r\n              class=\"tw-bg-gradient-to-r tw-from-gray-50 tw-to-gray-100 tw-px-4 tw-py-2 tw-flex tw-justify-between tw-items-center tw-border-b tw-border-gray-200\">\r\n              <!-- Use address type as header instead of generic \"Address X\" -->\r\n              <h4 class=\"tw-m-0 tw-text-gray-700 tw-text-sm tw-font-semibold tw-tracking-tight\">\r\n                {{ getAddressTypeLabel(i) || ('Address ' + (i + 1)) }}\r\n              </h4>\r\n              <div class=\"tw-flex tw-items-center tw-gap-2\">\r\n                @if (isAddressOwner(i)) {\r\n                <button cideEleButton variant=\"secondary\" size=\"xs\" type=\"button\" (click)=\"shareAddress(i)\"\r\n                  leftIcon=\"share\" class=\"tw-text-blue-600 hover:tw-text-blue-700\">\r\n                  Share\r\n                </button>\r\n                }\r\n                @if (!address?._id) {\r\n                <button cideEleButton variant=\"danger\" size=\"sm\" type=\"button\" (click)=\"removeContactAddress(i)\"\r\n                  leftIcon=\"delete\">\r\n                  Remove\r\n                </button>\r\n                }\r\n              </div>\r\n            </div>\r\n            <div class=\"tw-p-4\">\r\n              <!-- Main Layout: Inputs on Left, Address Textarea on Right -->\r\n              <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-4 tw-gap-3 tw-mb-3\">\r\n                \r\n                <!-- Left Side: Input Fields (3/4 width) -->\r\n                <div class=\"lg:tw-col-span-3\">\r\n                  <!-- Row 1: Address Type, Contact Person -->\r\n                  <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3 tw-mb-3\">\r\n                    <cide-ele-select label=\"Address Type\" [options]=\"addressTypeOptions()\" id=\"sycad_address_type_id_sygms\"\r\n                      formControlName=\"sycad_address_type_id_sygms\" placeholder=\"Select type\" size=\"sm\"\r\n                      valueKey=\"_id\" labelKey=\"sygms_title\" (change)=\"onAddressTypeChange(i)\">\r\n                    </cide-ele-select>\r\n\r\n                    <cide-ele-input label=\"Contact Person\" formControlName=\"sycad_contact_person_name\"\r\n                      placeholder=\"Enter contact person\" size=\"sm\">\r\n                    </cide-ele-input>\r\n                  </div>\r\n\r\n                  <!-- Row 2: Postal Code, City, State, Country -->\r\n                  <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-4 tw-gap-3\">\r\n                    <cide-ele-select label=\"Postal Code\" [options]=\"addressPostalCodes()[i] || []\"\r\n                      formControlName=\"sycad_contact_pin_sypin\" placeholder=\"Select postal code\" [searchable]=\"true\"\r\n                      [loading]=\"addressPostalCodesLoading()[i] || false\" (searchChange)=\"onPostalCodeSearch($event, i)\"\r\n                      (change)=\"onPostalCodeSelection($event, i)\" size=\"sm\">\r\n                    </cide-ele-select>\r\n\r\n                    <cide-ele-input label=\"City\" formControlName=\"sycad_contact_city_sypin\" placeholder=\"Enter city\"\r\n                      size=\"sm\">\r\n                    </cide-ele-input>\r\n\r\n                    <cide-ele-input label=\"State\" formControlName=\"sycad_contact_state_sypin\" placeholder=\"Enter state\"\r\n                      size=\"sm\">\r\n                    </cide-ele-input>\r\n\r\n                    <cide-ele-select label=\"Country\" [options]=\"addressCountries()[i] || []\"\r\n                      formControlName=\"sycad_contact_country_syctr\" placeholder=\"Select country\" valueKey=\"_id\"\r\n                      labelKey=\"syctr_country_iso_name\" [searchable]=\"true\" (searchChange)=\"onCountrySearch($event, i)\"\r\n                      [loading]=\"addressCountriesLoading()[i] || false\" size=\"sm\">\r\n                    </cide-ele-select>\r\n                  </div>\r\n                </div>\r\n\r\n                <!-- Right Side: Address Textarea (1/4 width, spans 2 rows) -->\r\n                <div class=\"lg:tw-col-span-1 lg:tw-row-span-2 tw-flex tw-flex-col\">\r\n                  <cide-ele-textarea label=\"Complete Address\" formControlName=\"sycad_contact_address\"\r\n                    placeholder=\"Enter complete address with area, city, and landmarks\" [rows]=\"4\" size=\"sm\"\r\n                    class=\"tw-h-full\">\r\n                  </cide-ele-textarea>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- Contact Details: Primary Phone, Alt Phone, Fax, Primary Email in 4 columns -->\r\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-4 tw-gap-3 tw-mb-3\">\r\n                <cide-ele-input label=\"Primary Phone\" formControlName=\"sycad_contact_phone\" type=\"tel\"\r\n                  placeholder=\"Primary phone\" size=\"sm\">\r\n                </cide-ele-input>\r\n\r\n                <cide-ele-input label=\"Alternate Phone\" formControlName=\"sycad_contact_phone_alt\" type=\"tel\"\r\n                  placeholder=\"Alternate phone\" size=\"sm\">\r\n                </cide-ele-input>\r\n\r\n                <cide-ele-input label=\"Fax Number\" formControlName=\"sycad_contact_fax\" placeholder=\"Fax number\"\r\n                  size=\"sm\">\r\n                </cide-ele-input>\r\n\r\n                <cide-ele-input label=\"Primary Email\" formControlName=\"sycad_contact_email\" type=\"email\"\r\n                  placeholder=\"Primary email\" size=\"sm\">\r\n                </cide-ele-input>\r\n              </div>\r\n\r\n              <!-- Alternate Email in single row -->\r\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3\">\r\n                <cide-ele-input label=\"Alternate Email\" formControlName=\"sycad_contact_email_alt\" type=\"email\"\r\n                  placeholder=\"Alternate email address\" size=\"sm\">\r\n                </cide-ele-input>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          }\r\n        </div>\r\n      </div>\r\n      }\r\n\r\n      @case ('documents') {\r\n      <!-- Documents Section -->\r\n      <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\r\n        <div class=\"tw-flex tw-justify-end tw-items-end tw-mb-2 tw-gap-4\">\r\n          <button cideEleButton variant=\"primary\" size=\"md\" type=\"button\" (click)=\"addDocument()\" leftIcon=\"add\" [disabled]=\"!hasAddDocumentRights()\">\r\n            Add Document\r\n          </button>\r\n        </div>\r\n        <div formArrayName=\"core_user_documents\">\r\n          @for (doc of documents(); track $index; let i = $index) {\r\n          <div [formGroupName]=\"i\"\r\n            class=\"tw-bg-white tw-border tw-border-gray-200 tw-rounded-xl tw-mb-8 tw-overflow-hidden tw-transition-all tw-duration-300 hover:tw-shadow-lg tw-shadow-sm\">\r\n            <div\r\n              class=\"tw-bg-gradient-to-r tw-from-gray-50 tw-to-gray-100 tw-px-4 tw-py-2 tw-flex tw-justify-between tw-items-center tw-border-b tw-border-gray-200\">\r\n              <h4 class=\"tw-m-0 tw-text-gray-700 tw-text-sm tw-font-semibold tw-tracking-tight\">\r\n                {{ getDocumentTypeLabel(i) || ('Document ' + (i + 1)) }}\r\n              </h4>\r\n              <div class=\"tw-flex tw-gap-2\">\r\n                @if (doc?._id) {\r\n                <button cideEleButton variant=\"secondary\" size=\"sm\" type=\"button\" (click)=\"shareDocumentRights(i)\"\r\n                  leftIcon=\"share\">\r\n                  Share\r\n                </button>\r\n                }\r\n              </div>\r\n            </div>\r\n            <div class=\"tw-p-4\">\r\n              <!-- Main Layout: Inputs on Left, File Upload on Right -->\r\n              <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-3 tw-gap-4\">\r\n                \r\n                <!-- Left Side: Document Information (2/3 width) -->\r\n                <div class=\"lg:tw-col-span-2\">\r\n                  <!-- Row 1: Document Type, Document Number, Name as per Document -->\r\n                  <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-3 tw-mb-3\">\r\n                    <cide-ele-select label=\"Document Type\" [options]=\"documentTypeOptions()\"\r\n                      formControlName=\"syusd_document_type_id_sygms\" placeholder=\"Select type\" size=\"sm\"\r\n                      valueKey=\"_id\" labelKey=\"sygms_title\" (change)=\"onDocumentTypeChange(i)\">\r\n                    </cide-ele-select>\r\n\r\n                    <cide-ele-input label=\"Document Number\" formControlName=\"syusd_doc_number\"\r\n                      placeholder=\"Document number\" size=\"sm\">\r\n                    </cide-ele-input>\r\n\r\n                    <cide-ele-input label=\"Name as per Document\" formControlName=\"syusd_doc_name_as_per_doc\"\r\n                      placeholder=\"Name on document\" size=\"sm\">\r\n                    </cide-ele-input>\r\n                  </div>\r\n\r\n                  <!-- Row 2: Issue Date, Expiry Date, Photo Group -->\r\n                  <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-3 tw-mb-3\">\r\n                    <cide-ele-input label=\"Issue Date\" formControlName=\"syusd_doc_issue_date\"\r\n                      [id]=\"'syusd_doc_issue_date['+i+']'\" type=\"date\" size=\"sm\">\r\n                    </cide-ele-input>\r\n\r\n                    <cide-ele-input label=\"Expiry Date\" formControlName=\"syusd_doc_expiry_date\"\r\n                      [id]=\"'syusd_doc_expiry_date['+i+']'\" type=\"date\" size=\"sm\">\r\n                    </cide-ele-input>\r\n                  </div>\r\n\r\n                  <!-- Row 3: Verification Status, KYC Status -->\r\n                  <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3\">\r\n                    <cide-ele-select label=\"Verification Status\" [options]=\"documentVerificationStatusOptions()\"\r\n                      formControlName=\"syusd_doc_verification_status_id_sygms\" placeholder=\"Select status\"\r\n                      size=\"sm\" valueKey=\"_id\" labelKey=\"sygms_title\">\r\n                    </cide-ele-select>\r\n\r\n                    <cide-ele-select label=\"KYC Status\" [options]=\"documentKycStatusOptions()\"\r\n                      formControlName=\"syusd_doc_kyc_status_id_sygms\" placeholder=\"Select KYC status\" size=\"sm\"\r\n                      valueKey=\"_id\" labelKey=\"sygms_title\">\r\n                    </cide-ele-select>\r\n                  </div>\r\n                </div>\r\n\r\n                <!-- Right Side: File Upload (1/3 width) -->\r\n                <div class=\"lg:tw-col-span-1\">\r\n                  <div class=\"tw-bg-gray-50 tw-border tw-border-gray-200 tw-rounded-lg tw-p-3 tw-h-full\">\r\n                    \r\n                    <!-- File Upload Input -->\r\n                    <cide-ele-file-input\r\n                      [id]=\"'document-files-' + i\"\r\n                      [multiple]=\"true\"\r\n                      formControlName=\"syusd_photo_group_id_cyfm\"\r\n                      [accept]=\"'.pdf,.jpg,.jpeg,.png,.doc,.docx'\"\r\n                      [autoUpload]=\"true\"\r\n                      [uploadData]=\"getDocumentUploadData(i)\"\r\n                      (change)=\"onDocumentFilesSelected($event, i)\"\r\n                      (uploadSuccess)=\"onDocumentUploadSuccess($event, i)\"\r\n                      (uploadError)=\"onDocumentUploadError($event, i)\"\r\n                      (uploadProgressChange)=\"onDocumentUploadProgress($event, i)\"\r\n                      class=\"tw-mb-3\"\r\n                      size=\"sm\">\r\n                    </cide-ele-file-input>\r\n\r\n                    <!-- Upload Status -->\r\n                    <!-- Upload status is now handled by the file input component itself -->\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          }\r\n        </div>\r\n      </div>\r\n      }\r\n\r\n      @case ('family') {\r\n      <!-- Family Details Section - Compact Design -->\r\n      <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\r\n        <div class=\"tw-flex tw-justify-end tw-items-end tw-mb-3 tw-gap-4\">\r\n          <button cideEleButton variant=\"primary\" size=\"sm\" type=\"button\" (click)=\"addFamilyDetail()\" leftIcon=\"add\" [disabled]=\"!hasAddFamilyDetailRights()\">\r\n            Add Family Member\r\n          </button>\r\n        </div>\r\n\r\n        <div formArrayName=\"core_user_family_details\">\r\n          @for (family of familyDetails(); track $index; let i = $index) {\r\n          <div [formGroupName]=\"i\"\r\n            class=\"tw-bg-white tw-border tw-border-gray-200 tw-rounded-lg tw-mb-4 tw-overflow-hidden tw-transition-all tw-duration-200 hover:tw-shadow-md tw-shadow-sm\">\r\n            \r\n            <!-- Compact Header -->\r\n            <div class=\"tw-bg-gray-50 tw-px-4 tw-py-2 tw-flex tw-justify-between tw-items-center tw-border-b tw-border-gray-200\">\r\n              <h4 class=\"tw-m-0 tw-text-gray-700 tw-text-sm tw-font-medium\">Family Member {{ i + 1 }}</h4>\r\n              <div class=\"tw-flex tw-gap-2\">\r\n                @if (family?._id) {\r\n                <button cideEleButton variant=\"secondary\" size=\"xs\" type=\"button\" (click)=\"shareFamilyDetailRights(i)\"\r\n                  leftIcon=\"share\">\r\n                  Share\r\n                </button>\r\n                }\r\n                @if (!family?._id) {\r\n                <button cideEleButton variant=\"danger\" size=\"xs\" type=\"button\" (click)=\"removeFamilyDetail(i)\" leftIcon=\"delete\">\r\n                  Remove\r\n                </button>\r\n                }\r\n              </div>\r\n            </div>\r\n            \r\n            <!-- Compact Form Content - 3 inputs per row -->\r\n            <div class=\"tw-p-4\">\r\n              <!-- Row 1: Name, User, and Combined Relationship/Active Status (33.33% each) -->\r\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-3 tw-mb-3\">\r\n                <cide-ele-input label=\"Family Member Name\" formControlName=\"syfdl_family_member_name\"\r\n                  placeholder=\"Enter family member full name\" size=\"sm\">\r\n                </cide-ele-input>\r\n\r\n                <cide-ele-select label=\"Family Member User\" [options]=\"userOptions(i)\"\r\n                  formControlName=\"syfdl_family_member_id_user\" placeholder=\"Select family member user\" size=\"sm\"\r\n                  valueKey=\"_id\" labelKey=\"user_fullname\" [searchable]=\"true\"\r\n                  [loading]=\"userSearchLoading()[i] || false\" (searchChange)=\"onUserSearchChange($event, i)\"\r\n                  (change)=\"onUserSelectionChange($event, i)\">\r\n                </cide-ele-select>\r\n\r\n                <!-- Combined Relationship and Active Status (33.33%) -->\r\n                <div class=\"tw-flex tw-flex-row tw-gap-2 tw-items-end\">\r\n                  <div class=\"tw-flex-1\">\r\n                    <cide-ele-select label=\"Relationship\" [options]=\"relationshipOptions()\"\r\n                      formControlName=\"syfdl_relationship_id_sygms\" placeholder=\"Select relationship\" size=\"sm\"\r\n                      valueKey=\"_id\" labelKey=\"sygms_title\">\r\n                    </cide-ele-select>\r\n                  </div>\r\n\r\n                  <div class=\"tw-flex tw-items-center tw-pt-1 tw-flex-shrink-0\">\r\n                    <cide-ele-input formControlName=\"syfdl_isactive\" type=\"checkbox\" label=\"Active\" size=\"sm\">\r\n                    </cide-ele-input>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- Row 2: Blood Group, DOB, and Phone -->\r\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 xl:tw-grid-cols-3 tw-gap-3 tw-mb-3\">\r\n                <cide-ele-select label=\"Blood Group\" [options]=\"bloodGroupOptions()\"\r\n                  formControlName=\"syfdl_blood_group_sygms\" placeholder=\"Select blood group\" size=\"sm\" valueKey=\"_id\"\r\n                  labelKey=\"sygms_title\">\r\n                </cide-ele-select>\r\n\r\n                <cide-ele-input label=\"Date of Birth\" formControlName=\"syfdl_family_member_dob\" type=\"date\" size=\"sm\"\r\n                  [id]=\"'syfdl_family_member_dob['+i+']'\">\r\n                </cide-ele-input>\r\n\r\n                <cide-ele-input label=\"Contact Phone\" formControlName=\"syfdl_contact_phone\" type=\"tel\"\r\n                  placeholder=\"Enter contact phone\" size=\"sm\">\r\n                </cide-ele-input>\r\n              </div>\r\n\r\n              <!-- Row 3: Email, Email ID, and Contact Number -->\r\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 xl:tw-grid-cols-3 tw-gap-3 tw-mb-3\">\r\n                <cide-ele-input label=\"Contact Email\" formControlName=\"syfdl_contact_email\" type=\"email\"\r\n                  placeholder=\"Enter contact email\" size=\"sm\">\r\n                </cide-ele-input>\r\n\r\n                <cide-ele-input label=\"Contact Email ID\" formControlName=\"syfdl_contact_email_id\" type=\"email\"\r\n                  placeholder=\"Enter contact email ID\" size=\"sm\">\r\n                </cide-ele-input>\r\n\r\n                <cide-ele-input label=\"Contact Number\" formControlName=\"syfdl_contact_number\" type=\"tel\"\r\n                  placeholder=\"Enter contact number\" size=\"sm\">\r\n                </cide-ele-input>\r\n              </div>\r\n\r\n            </div>\r\n          </div>\r\n          }\r\n        </div>\r\n      </div>\r\n      }\r\n      }\r\n    </div>\r\n\r\n    <!-- Form Actions -->\r\n    <div\r\n      class=\"tw-flex tw-justify-end tw-gap-4 tw-py-2 tw-bg-white tw-border-t tw-border-gray-200 tw-sticky tw-bottom-0 tw-z-10\">\r\n      <button cideEleButton type=\"button\" variant=\"secondary\" (click)=\"resetForm()\" leftIcon=\"refresh\"\r\n        [disabled]=\"loading()\">\r\n        Reset Form\r\n      </button>\r\n\r\n      <button cideEleButton type=\"submit\" variant=\"primary\" [disabled]=\"loading() || userMasterForm.invalid\"\r\n        [loading]=\"loading()\" leftIcon=\"save\">\r\n        Save User Master\r\n      </button>\r\n    </div>\r\n  </form>\r\n</div>\r\n\r\n<!-- Template Renderers for Role Permissions Grid -->\r\n<ng-template #menuDetailsRendererTemplate let-row=\"row\">\r\n  <div class=\"tw-flex tw-items-center tw-space-x-3 tw-min-w-0\">\r\n    <!-- Menu Icon -->\r\n    <div class=\"tw-flex-shrink-0\">\r\n      @if (row.syme_type === 'module') {\r\n      <cide-ele-icon class=\"tw-text-blue-600 tw-w-4 tw-h-4\">folder</cide-ele-icon>\r\n      } @else if (row.syme_type === 'section') {\r\n      <cide-ele-icon class=\"tw-text-green-600 tw-w-4 tw-h-4\">folder_open</cide-ele-icon>\r\n      } @else if (row.syme_type === 'menu') {\r\n      <cide-ele-icon class=\"tw-text-purple-600 tw-w-4 tw-h-4\">menu</cide-ele-icon>\r\n      } @else {\r\n      <cide-ele-icon class=\"tw-text-gray-600 tw-w-4 tw-h-4\">description</cide-ele-icon>\r\n      }\r\n    </div>\r\n\r\n    <!-- Menu Details -->\r\n    <div class=\"tw-ml-3 tw-min-w-0 tw-flex-1\">\r\n      <div class=\"tw-flex tw-items-center tw-gap-2\">\r\n        <div class=\"tw-text-xs tw-font-medium tw-text-gray-900 tw-truncate\" [title]=\"row.syme_title\">\r\n          {{ row.syme_title || row.menu?.syme_title || row.menu?.syme_menu_name || 'Untitled' }}\r\n        </div>\r\n        <!-- Green pill indicator for parent menus with child permissions -->\r\n        @if (row.syme_type === 'module' || row.syme_type === 'section') {\r\n        @if (hasChildMenusWithPermissions(row._id)) {\r\n        <span\r\n          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 tw-whitespace-nowrap\">\r\n          Assigned\r\n        </span>\r\n        }\r\n        }\r\n      </div>\r\n      @if (row.permission?.sygms_name) {\r\n      <div class=\"tw-text-xs tw-text-blue-500 tw-truncate\" [title]=\"row.permission?.sygms_name\">\r\n        {{ row.permission?.sygms_name }}\r\n      </div>\r\n      }\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- Menu Type Renderer Template -->\r\n<ng-template #menuTypeRendererTemplate let-row=\"row\" let-value=\"value\">\r\n  <div class=\"tw-flex tw-items-center tw-justify-center\">\r\n    @if (row.syme_type === 'module') {\r\n    <span\r\n      class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded-full tw-text-xs tw-font-medium tw-bg-blue-100 tw-text-blue-800\">\r\n      Module\r\n    </span>\r\n    } @else if (row.syme_type === 'section') {\r\n    <span\r\n      class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded-full tw-text-xs tw-font-medium tw-bg-green-100 tw-text-green-800\">\r\n      Section\r\n    </span>\r\n    } @else if (row.syme_type === 'menu') {\r\n    <span\r\n      class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded-full tw-text-xs tw-font-medium tw-bg-purple-100 tw-text-purple-800\">\r\n      Menu\r\n    </span>\r\n    } @else {\r\n    <span\r\n      class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded-full tw-text-xs tw-font-medium tw-bg-gray-100 tw-text-gray-800\">\r\n      {{ row.syme_type || 'Unknown' }}\r\n    </span>\r\n    }\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- Permissions Checkbox Renderer Template -->\r\n<ng-template #permissionsCheckboxRendererTemplate let-row=\"row\" let-value=\"value\">\r\n  <div class=\"tw-flex tw-flex-wrap tw-gap-2 tw-max-w-full\">\r\n    @if (row.syme_type === 'menu' && row?.syme_permissions_id_sygms && row?.syme_permissions_id_sygms.length > 0) {\r\n    @for (permissionId of row?.syme_permissions_id_sygms || []; track permissionId) {\r\n    <div class=\"tw-flex tw-items-center tw-space-x-1\">\r\n      <div class=\"tw-flex tw-items-center tw-space-x-1\">\r\n        <input type=\"checkbox\" [checked]=\"isPermissionSelected(row._id, permissionId)\" [disabled]=\"true\"\r\n          class=\"tw-h-4 tw-w-4 tw-text-blue-600 tw-bg-gray-100 tw-border-gray-300 tw-rounded focus:tw-ring-blue-500\">\r\n        <label class=\"tw-text-xs tw-text-gray-700\">\r\n          {{ getPermissionById(permissionId)?.sygms_title || 'Unknown' }}\r\n        </label>\r\n      </div>\r\n    </div>\r\n    }\r\n    } @else {\r\n    <!-- Show green checkmark for parent menus with child permissions -->\r\n    @if (row.syme_type === 'module' || row.syme_type === 'section' || row.syme_type === 'title') {\r\n    @if (hasChildMenusWithPermissions(row._id)) {\r\n    <div class=\"tw-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-bg-green-100 tw-rounded-full\">\r\n      <cide-ele-icon class=\"tw-text-green-600\" size=\"xs\">\r\n        check\r\n      </cide-ele-icon>\r\n    </div>\r\n    } @else {\r\n    <span class=\"tw-text-xs tw-text-gray-400\">N/A</span>\r\n    }\r\n    } @else {\r\n    <span class=\"tw-text-xs tw-text-gray-400\">N/A</span>\r\n    }\r\n    }\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- Menu Rights Permissions Renderer Template -->\r\n<ng-template #menuRightsPermissionsRendererTemplate let-row=\"row\" let-value=\"value\">\r\n  <div class=\"tw-flex tw-flex-wrap tw-gap-2 tw-max-w-full\">\r\n    <!-- Role Rights Display -->\r\n    @if (row.role_rights && row.role_rights.length > 0) {\r\n    <div class=\"tw-mb-2\">\r\n      <div class=\"tw-text-xs tw-text-gray-500 tw-mb-1\">Role Rights:</div>\r\n      <div class=\"tw-flex tw-flex-wrap tw-gap-1\">\r\n        @for (right of row.role_rights; track $index) {\r\n        <span class=\"tw-inline-block tw-px-2 tw-py-1 tw-text-xs tw-bg-blue-100 tw-text-blue-800 tw-rounded\">\r\n          {{ right }}\r\n        </span>\r\n        }\r\n      </div>\r\n    </div>\r\n    }\r\n\r\n\r\n    <!-- Exception Indicator -->\r\n    @if (row.hasException) {\r\n    <div class=\"tw-mt-2\">\r\n      <span class=\"tw-inline-block tw-px-2 tw-py-1 tw-text-xs tw-bg-yellow-100 tw-text-yellow-800 tw-rounded\">\r\n        Override\r\n      </span>\r\n    </div>\r\n    } @else {\r\n    <div class=\"tw-mt-2\">\r\n      <span class=\"tw-text-xs tw-text-gray-400\">Default</span>\r\n    </div>\r\n    }\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- Permissions Renderer Template -->\r\n<ng-template #permissionsRendererTemplate let-row=\"row\" let-value=\"value\">\r\n  <div class=\"tw-flex tw-flex-wrap tw-gap-2 tw-max-w-full\">\r\n    @if (row._permissionValues && Object.keys(row._permissionValues).length > 0) {\r\n    @for (permissionId of Object.keys(row._permissionValues); track permissionId) {\r\n    <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\n      <cide-ele-input type=\"checkbox\" [ngModel]=\"row._permissionValues[permissionId].checked\"\r\n        (ngModelChange)=\"onPermissionChangeSafe($event, row, permissionId)\"\r\n        [id]=\"'permission-' + row._id + '-' + permissionId\" class=\"tw-h-4 tw-w-4\">\r\n      </cide-ele-input>\r\n      <label [for]=\"'permission-' + row._id + '-' + permissionId\" \r\n        class=\"tw-text-xs tw-cursor-pointer\"\r\n        [ngClass]=\"{\r\n          'tw-text-gray-700': row._permissionValues[permissionId].modified === row._permissionValues[permissionId].actual,\r\n          'tw-text-blue-600 tw-font-semibold': row._permissionValues[permissionId].modified !== row._permissionValues[permissionId].actual\r\n        }\">\r\n        {{ row._permissionValues[permissionId].permission?.sygms_title }}\r\n        @if (row._permissionValues[permissionId].modified !== row._permissionValues[permissionId].actual) {\r\n        <span class=\"tw-text-xs tw-text-orange-500 tw-ml-1\" title=\"Modified from role permission\">\r\n          ({{ row._permissionValues[permissionId].actual ? '\u2713' : '\u2717' }})\r\n        </span>\r\n        }\r\n      </label>\r\n    </div>\r\n    }\r\n    } @else {\r\n    <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\n      <cide-ele-icon class=\"tw-text-gray-400 tw-animate-spin\" size=\"xs\">refresh</cide-ele-icon>\r\n      <span class=\"tw-text-xs tw-text-gray-400\">Loading permissions...</span>\r\n    </div>\r\n    }\r\n  </div>\r\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: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1$2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput", "options", "multiple", "searchable", "showSearchInput", "loading", "valueKey", "labelKey", "treeView"], 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: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideEleTabComponent, selector: "cide-ele-tab", inputs: ["tabs", "activeTabId", "size", "variant", "fullWidth", "disabled"], outputs: ["tabChange"] }, { kind: "component", type: CideEleFileInputComponent, selector: "cide-ele-file-input", inputs: ["label", "accept", "multiple", "disabled", "required", "helperText", "errorText", "showPreview", "previewWidth", "previewHeight", "previewBoxMode", "showFileName", "placeholderText", "placeholderIcon", "autoUpload", "uploadData", "showFloatingUploader", "floatingUploaderGroupId"], outputs: ["fileChange", "uploadSuccess", "uploadError", "uploadProgressChange"] }, { kind: "directive", type: CideEleFileImageDirective, selector: "[cideEleFileImage]", inputs: ["fileId", "altText"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideEleDataGridComponent, selector: "cide-ele-data-grid", inputs: ["config", "templateRenderers", "customFormatters", "actionHandlers", "serverSidePagination", "totalServerItems", "currentServerPage", "currentServerPageSize", "dragDropEnabled"], outputs: ["gridEvent"] }, { kind: "component", type: CideEleToastNotificationComponent, selector: "cide-ele-toast-notification" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideCoreUserCreateComponent, isStandalone: true, selector: "cide-core-user-create", viewQueries: [{ propertyName: "menuDetailsRendererTemplate", first: true, predicate: ["menuDetailsRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "permissionsCheckboxRendererTemplate", first: true, predicate: ["permissionsCheckboxRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "menuTypeRendererTemplate", first: true, predicate: ["menuTypeRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "menuRightsPermissionsRendererTemplate", first: true, predicate: ["menuRightsPermissionsRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "permissionsRendererTemplate", first: true, predicate: ["permissionsRendererTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- \r\n  ENTERPRISE USER MASTER FORM\r\n  \r\n  Enterprise-Level Styling with Tailwind CSS\r\n  Features: Responsive grids, proper typography, enhanced user experience\r\n-->\r\n\r\n<div class=\"tw-w-full tw-h-full tw-p-1 tw-pt-2\">\r\n  <!-- Toast Notifications -->\r\n  <cide-ele-toast-notification></cide-ele-toast-notification>\r\n  \r\n  <form class=\"tw-max-w-7xl tw-mx-auto tw-bg-transparent\" [formGroup]=\"userMasterForm\" [class.tw-opacity-60]=\"loading()\"\r\n    (ngSubmit)=\"onSubmit()\">\r\n\r\n\r\n    <!-- User Context Header -->\r\n    <div\r\n      class=\"tw-bg-gradient-to-r tw-from-blue-50 tw-to-indigo-50 tw-border tw-border-blue-200 tw-rounded-md tw-p-1 tw-mb-2 tw-shadow-sm\">\r\n      <div class=\"tw-flex tw-items-center tw-justify-between tw-flex-wrap tw-gap-2\">\r\n        <!-- User Basic Info Display -->\r\n        <div class=\"tw-flex tw-items-center tw-gap-3 tw-flex-wrap\">\r\n          <!-- Profile Photo Preview -->\r\n          <div class=\"tw-flex tw-items-center tw-gap-2\">\r\n            <div\r\n              class=\"tw-w-8 tw-h-8 tw-rounded-full tw-bg-blue-100 tw-border tw-border-blue-200 tw-flex tw-items-center tw-justify-center tw-overflow-hidden\">\r\n              @if (userMasterForm.get('user_photo_id_cyfm')?.value) {\r\n              <img cideEleFileImage [fileId]=\"userMasterForm.get('user_photo_id_cyfm')?.value\"\r\n                [altText]=\"'Profile Photo'\" class=\"tw-w-full tw-h-full tw-object-cover\">\r\n              } @else {\r\n              <cide-ele-icon name=\"person\" class=\"tw-w-5 tw-h-5 tw-text-blue-600\">\r\n              </cide-ele-icon>\r\n              }\r\n            </div>\r\n            <div class=\"tw-flex tw-flex-col\">\r\n              <span class=\"tw-text-xs tw-font-medium tw-text-blue-900\">\r\n                {{ getUserFullName() || 'New User' }}\r\n              </span>\r\n              <span class=\"tw-text-xs tw-text-blue-600\">\r\n                {{ getUserUsername() || 'Username not set' }}\r\n              </span>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Contact Info -->\r\n          <div class=\"tw-flex tw-items-center tw-gap-3\">\r\n            <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-xs tw-text-gray-700\">\r\n              <cide-ele-icon variant=\"gray\" size=\"xs\">email</cide-ele-icon>\r\n              <span>{{ getUserEmail() || 'Email not set' }}</span>\r\n            </div>\r\n            <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-xs tw-text-gray-700\">\r\n              <cide-ele-icon variant=\"gray\" size=\"xs\">phone</cide-ele-icon>\r\n              <span>{{ getUserMobile() || 'Mobile not set' }}</span>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Active Status -->\r\n          <div class=\"tw-flex tw-items-center tw-gap-1\">\r\n            @if (getUserActiveStatus()) {\r\n            <span\r\n              class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded tw-text-xs tw-font-medium tw-bg-green-100 tw-text-green-700\">\r\n              <cide-ele-icon variant=\"green\" size=\"xs\" class=\"tw-mr-1\">check_circle</cide-ele-icon>\r\n              Active\r\n            </span>\r\n            } @else {\r\n            <span\r\n              class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded tw-text-xs tw-font-medium tw-bg-red-100 tw-text-red-700\">\r\n              <cide-ele-icon variant=\"red\" size=\"xs\" class=\"tw-mr-1\">cancel</cide-ele-icon>\r\n              Inactive\r\n            </span>\r\n            }\r\n          </div>\r\n        </div>\r\n\r\n        <!-- Entity Info -->\r\n        <div class=\"tw-flex tw-items-center tw-gap-2\">\r\n          @if (hasDefaultEntity()) {\r\n          <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-xs tw-text-blue-700\">\r\n            <cide-ele-icon variant=\"blue\" size=\"xs\">business</cide-ele-icon>\r\n            <span class=\"tw-font-medium\">{{ getDefaultEntityName() }}</span>\r\n          </div>\r\n          } @else {\r\n          <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-xs tw-text-gray-500\">\r\n            <cide-ele-icon variant=\"gray\" size=\"xs\">business</cide-ele-icon>\r\n            <span class=\"tw-italic\">No entity</span>\r\n          </div>\r\n          }\r\n\r\n          <span class=\"tw-text-xs tw-text-gray-600 tw-px-2 tw-py-1 tw-bg-gray-100 tw-rounded\">\r\n            {{ getEntityMappingCount() }} mapping(s)\r\n          </span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Tab Navigation -->\r\n    <div class=\"tw-p-0 tw-mb-2 tw-border-b tw-border-gray-200\">\r\n      <cide-ele-tab [tabs]=\"userTabs()\" [activeTabId]=\"activeTab()\" size=\"md\" variant=\"default\"\r\n        (tabChange)=\"onTabChange($event)\">\r\n      </cide-ele-tab>\r\n    </div>\r\n\r\n    <!-- Tab Content -->\r\n    <div class=\"tw-transition-opacity tw-duration-300\" [class.tw-opacity-60]=\"loading()\">\r\n      @switch (activeTab()) {\r\n\r\n      @case ('basic') {\r\n      <!-- User Basic Information Section -->\r\n      <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\r\n\r\n        <!-- Top Section: Form Fields on Left, Profile Photo on Right -->\r\n        <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-[1fr_200px] tw-gap-4 tw-mb-4\">\r\n          <!-- Left Side: Form Fields -->\r\n          <div class=\"tw-space-y-4\">\r\n            <!-- Name Fields - All in One Row -->\r\n            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-4\">\r\n              <cide-ele-input id=\"user_firstname\" label=\"First Name *\" formControlName=\"user_firstname\"\r\n                placeholder=\"Enter first name\" [maxlength]=\"20\" size=\"md\" (ngModelChange)=\"onNameFieldChange()\">\r\n              </cide-ele-input>\r\n\r\n              <cide-ele-input id=\"user_middlename\" label=\"Middle Name\" formControlName=\"user_middlename\"\r\n                placeholder=\"Enter middle name\" [maxlength]=\"20\" size=\"md\" (ngModelChange)=\"onNameFieldChange()\">\r\n              </cide-ele-input>\r\n\r\n              <cide-ele-input id=\"user_lastname\" label=\"Last Name *\" formControlName=\"user_lastname\"\r\n                placeholder=\"Enter last name\" [maxlength]=\"20\" size=\"md\" (ngModelChange)=\"onNameFieldChange()\">\r\n              </cide-ele-input>\r\n\r\n              <cide-ele-input id=\"user_fullname\" label=\"Full Name * (Auto-generated)\" formControlName=\"user_fullname\"\r\n                placeholder=\"Auto-generated from name fields or enter manually\" [maxlength]=\"62\" size=\"md\">\r\n              </cide-ele-input>\r\n            </div>\r\n\r\n            <!-- Contact Information - All in One Row -->\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              <cide-ele-input id=\"user_username\" label=\"Username *\" formControlName=\"user_username\"\r\n                placeholder=\"Enter unique username\" [maxlength]=\"20\" size=\"md\">\r\n              </cide-ele-input>\r\n\r\n              <cide-ele-input id=\"user_emailid\" label=\"Email ID *\" formControlName=\"user_emailid\" type=\"email\"\r\n                placeholder=\"Enter valid email address\" [maxlength]=\"320\" size=\"md\">\r\n              </cide-ele-input>\r\n\r\n              <cide-ele-input id=\"user_mobileno\" label=\"Mobile Number *\" formControlName=\"user_mobileno\" type=\"tel\"\r\n                placeholder=\"Enter mobile number\" [maxlength]=\"15\" size=\"md\">\r\n              </cide-ele-input>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Right Side: Profile Photo Upload -->\r\n          <div class=\"tw-flex tw-items-start tw-justify-center tw-p-0\">\r\n            <cide-ele-file-input id=\"user_photo_id_cyfm\" formControlName=\"user_photo_id_cyfm\" accept=\"image/*\"\r\n              [showPreview]=\"true\" [previewBoxMode]=\"true\" [showFileName]=\"false\" previewWidth=\"180px\"\r\n              previewHeight=\"120px\" placeholderText=\"Upload Photo\" placeholderIcon=\"cloud_upload\" [autoUpload]=\"true\"\r\n              [uploadData]=\"getProfilePhotoUploadData()\" (uploadSuccess)=\"onProfilePhotoUploadSuccess($event)\"\r\n              (uploadError)=\"onProfilePhotoUploadError($event)\"\r\n              (uploadProgressChange)=\"onProfilePhotoUploadProgress($event)\">\r\n            </cide-ele-file-input>\r\n          </div>\r\n        </div>\r\n\r\n\r\n\r\n        <!-- Status Control -->\r\n        <div class=\"tw-grid tw-grid-cols-1 tw-mb-2\">\r\n          <div class=\"tw-p-2 tw-bg-blue-50 tw-border tw-border-blue-100 tw-rounded-lg\">\r\n            <label\r\n              class=\"tw-flex tw-flex-col tw-cursor-pointer tw-py-2 tw-bg-transparent tw-border-none tw-rounded-none tw-transition-all tw-duration-200 hover:tw-bg-blue-75\">\r\n              <cide-ele-input type=\"checkbox\" label=\"Active User Status\" formControlName=\"user_isactive\"\r\n                class=\"tw-h-5 tw-accent-blue-500 tw-rounded tw-mb-1\" />\r\n              <span class=\"tw-font-semibold tw-text-gray-700 tw-text-base\"></span>\r\n              <span class=\"tw-text-sm tw-text-gray-600 tw-mt-1 tw-leading-relaxed\">Enable this user account for system\r\n                access and operations</span>\r\n            </label>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      }\r\n\r\n      @case ('auth') {\r\n      <!-- Authentication Section -->\r\n      <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\r\n        <!-- Password Fields -->\r\n        @if (shouldShowPasswordFields()) {\r\n        <div class=\"tw-mb-4\">\r\n          <!-- Password Fields Header for Edit Mode -->\r\n          @if (isEditMode()) {\r\n          <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\r\n            <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-800\">Update Password</h6>\r\n            <button type=\"button\"\r\n              class=\"tw-px-3 tw-py-1 tw-bg-gray-100 tw-text-gray-600 tw-border tw-border-gray-300 tw-rounded-md tw-text-xs tw-font-medium hover:tw-bg-gray-200 tw-transition-colors\"\r\n              (click)=\"cancelPasswordUpdate()\">\r\n              Cancel Password Update\r\n            </button>\r\n          </div>\r\n          }\r\n\r\n          <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-2 md:tw-grid-cols-1 tw-gap-6\">\r\n            <cide-ele-input id=\"user_password\" [label]=\"getPasswordFieldLabel()\" formControlName=\"user_password\"\r\n              type=\"password\" placeholder=\"Enter secure password (min 8 characters)\" size=\"md\">\r\n            </cide-ele-input>\r\n\r\n            <cide-ele-input id=\"user_confirm_password\" [label]=\"getPasswordConfirmLabel()\"\r\n              formControlName=\"user_confirm_password\" type=\"password\" placeholder=\"Confirm your password\" size=\"md\">\r\n            </cide-ele-input>\r\n          </div>\r\n        </div>\r\n        }\r\n\r\n        <!-- Password Update Option for Edit Mode -->\r\n        @if (isEditMode() && !shouldShowPasswordFields()) {\r\n        <div class=\"tw-mb-4\">\r\n          <div class=\"tw-p-2 tw-bg-blue-50 tw-border tw-border-blue-200 tw-rounded-lg\">\r\n            <h6 class=\"tw-text-sm tw-font-semibold tw-text-blue-800 tw-mb-2\">Password Update</h6>\r\n            <p class=\"tw-text-sm tw-text-blue-600 tw-mb-3\">Current password will be kept. Click below to change\r\n              password.</p>\r\n\r\n            @if (hasPasswordInput()) {\r\n            <div\r\n              class=\"tw-mb-3 tw-p-2 tw-bg-yellow-50 tw-border tw-border-yellow-200 tw-rounded tw-text-sm tw-text-yellow-700\">\r\n              <cide-ele-icon variant=\"yellow\" size=\"xs\" class=\"tw-mr-1\">warning</cide-ele-icon>\r\n              Password fields contain text. Click \"Change Password\" to manage existing input.\r\n            </div>\r\n            }\r\n\r\n            <button type=\"button\"\r\n              class=\"tw-px-4 tw-py-2 tw-bg-blue-100 tw-text-blue-700 tw-border tw-border-blue-300 tw-rounded-md tw-text-sm tw-font-medium hover:tw-bg-blue-200 tw-transition-colors\"\r\n              (click)=\"triggerPasswordUpdate()\">\r\n              @if (hasPasswordInput()) {\r\n              Manage Password Fields\r\n              } @else {\r\n              Change Password\r\n              }\r\n            </button>\r\n          </div>\r\n        </div>\r\n        }\r\n\r\n        <!-- Password Options -->\r\n        <div class=\"tw-grid tw-grid-cols-1 tw-gap-4 tw-mb-4\">\r\n          <div class=\"tw-p-2 tw-bg-yellow-50 tw-border tw-border-yellow-100 tw-rounded-lg\">\r\n            <label\r\n              class=\"tw-flex tw-flex-col tw-gap-2 tw-cursor-pointer tw-py-2 tw-bg-transparent tw-border-none tw-rounded-none tw-transition-all tw-duration-200\">\r\n              <cide-ele-input type=\"checkbox\" label=\"Force Password Change on Login\"\r\n                formControlName=\"user_passwordchangeonlogin\" class=\"tw-h-5 tw-accent-yellow-500 tw-rounded tw-mb-1\" />\r\n              <span class=\"tw-text-sm tw-text-gray-600 tw-mt-1 tw-leading-relaxed\">User will be required to change\r\n                password on next login</span>\r\n            </label>\r\n          </div>\r\n        </div>\r\n\r\n      </div>\r\n      }\r\n\r\n      @case ('roles') {\r\n      <!-- Entity, Roles & Permissions Mapping Section -->\r\n      <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\r\n\r\n\r\n\r\n        <!-- Important Note -->\r\n        <div class=\"tw-bg-amber-50 tw-border tw-border-amber-200 tw-rounded-lg tw-p-2 tw-mb-4\">\r\n          <div class=\"tw-flex tw-items-start tw-gap-3\">\r\n            <cide-ele-icon variant=\"amber\" size=\"lg\">info</cide-ele-icon>\r\n            <div class=\"tw-flex-1\">\r\n              <h4 class=\"tw-text-sm tw-font-semibold tw-text-amber-800 tw-mb-1\">Entity-Role Based Access</h4>\r\n              <p class=\"tw-text-sm tw-text-amber-700 tw-mb-2\">User access is completely managed through entity-role\r\n                mappings below. At least one entity mapping is required for user access.</p>\r\n              @if (hasDefaultEntity()) {\r\n              <div class=\"tw-flex tw-items-center tw-gap-2 tw-mt-2 tw-p-2 tw-bg-amber-100 tw-rounded\">\r\n                <cide-ele-icon variant=\"amber\" size=\"sm\">star</cide-ele-icon>\r\n                <span class=\"tw-text-sm tw-text-amber-800\">\r\n                  <strong>Default Entity:</strong> {{ getDefaultEntityName() }}\r\n                </span>\r\n              </div>\r\n              } @else {\r\n              <div class=\"tw-text-sm tw-text-amber-600 tw-mt-2 tw-italic\">\r\n                \u26A0\uFE0F No default entity selected. Please set one entity as default.\r\n              </div>\r\n              }\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- Entity-Role Mapping Section -->\r\n        <div class=\"tw-flex tw-text-center tw-justify-between tw-items-center tw-mb-4\">\r\n          <div>\r\n            <h4 class=\"tw-text-sm tw-text-left tw-font-semibold tw-text-blue-900 tw-mb-1\">Entity-Role Mapping</h4>\r\n            <p class=\"tw-text-sm tw-text-blue-700\">Map user to entities with specific roles and permissions</p>\r\n          </div>\r\n          <div class=\"tw-flex tw-flex-col tw-items-end\">\r\n            <button cideEleButton variant=\"primary\" size=\"md\" type=\"button\" (click)=\"addEntityMapping()\"\r\n              leftIcon=\"add\" [disabled]=\"isAllEntitiesMapped()\">\r\n              Add Entity Mapping\r\n            </button>\r\n\r\n            @if (isAllEntitiesMapped()) {\r\n            <div class=\"tw-mt-2 tw-p-2 tw-bg-blue-50 tw-border tw-border-blue-200 tw-rounded-md tw-max-w-xs\">\r\n              <p class=\"tw-text-xs tw-text-blue-700\">\r\n                <cide-ele-icon variant=\"info\" size=\"xs\" class=\"tw-mr-1\">info</cide-ele-icon>\r\n                All available entities are already mapped.\r\n              </p>\r\n            </div>\r\n            }\r\n          </div>\r\n        </div>\r\n\r\n        <div formArrayName=\"core_entity_mapping\">\r\n            @for (mapping of entityMappings(); track $index; let i = $index) {\r\n            <div class=\"tw-bg-white tw-border tw-border-blue-200 tw-rounded-xl tw-mb-6 tw-overflow-hidden tw-shadow-sm\"\r\n              [formGroupName]=\"i\">\r\n              <div\r\n                class=\"tw-bg-gradient-to-r tw-from-blue-50 tw-to-blue-100 tw-px-6 tw-py-3 tw-flex tw-justify-between tw-items-center tw-border-b tw-border-blue-200\">\r\n                <div class=\"tw-flex tw-items-center tw-gap-2\">\r\n                  <h5 class=\"tw-m-0 tw-text-blue-800 tw-text-sm tw-font-semibold\">Entity Mapping {{ i + 1 }}</h5>\r\n                  @if (mapping.syenm_isdefault) {\r\n                  <span\r\n                    class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded-full tw-text-xs tw-font-medium tw-bg-green-100 tw-text-green-800\">\r\n                    <cide-ele-icon variant=\"green\" size=\"xs\" class=\"tw-mr-1\">star</cide-ele-icon>\r\n                    Default\r\n                  </span>\r\n                  }\r\n                </div>\r\n                @if (!mapping?._id) {\r\n                <button cideEleButton variant=\"danger\" size=\"sm\" type=\"button\" (click)=\"removeEntityMapping(i)\"\r\n                  leftIcon=\"delete\">\r\n                  Remove\r\n                </button>\r\n                }\r\n              </div>\r\n\r\n              <div>\r\n                <!-- Entity and Role Selection -->\r\n                <div class=\"tw-grid tw-px-3 tw-py-1 tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4 tw-mb-4\">\r\n                  <div>\r\n                    <cide-ele-select label=\"Entity *\" [options]=\"getFilteredEntityOptions(i)\"\r\n                      formControlName=\"syenm_entity_id_syen\" valueKey=\"_id\" labelKey=\"syen_name\"\r\n                      placeholder=\"Select entity\" size=\"md\" (change)=\"onEntityChange(i, $event)\">\r\n                    </cide-ele-select>\r\n\r\n                    @if (isAllEntitiesSelected(i)) {\r\n                    <div class=\"tw-mt-2 tw-p-2 tw-bg-yellow-50 tw-border tw-border-yellow-200 tw-rounded-md\">\r\n                      <p class=\"tw-text-xs tw-text-yellow-700\">\r\n                        <cide-ele-icon variant=\"warning\" size=\"xs\" class=\"tw-mr-1\">info</cide-ele-icon>\r\n                        All entities are already mapped. Remove another mapping to add this one.\r\n                      </p>\r\n                    </div>\r\n                    }\r\n                  </div>\r\n                  <cide-ele-select label=\"Role for this Entity\" [options]=\"getRoleOptionsForEntity(i)\"\r\n                    formControlName=\"syenm_role_id_syusrol\" valueKey=\"_id\" labelKey=\"syusrol_role_name\"\r\n                    placeholder=\"Select role for this entity\" size=\"md\" (change)=\"onRoleChange(i, $event)\">\r\n                  </cide-ele-select>\r\n                </div>\r\n\r\n\r\n                <!-- Entity-Specific Details and Active Period - All in One Row -->\r\n                <div class=\"tw-grid tw-px-3 tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-4 tw-mb-4\">\r\n                  <cide-ele-select label=\"Department for this Entity\" [options]=\"getDepartmentOptionsForEntity(i)\"\r\n                    formControlName=\"syenm_department_id_sydept\" (change)=\"onDepartmentChange($event)\" valueKey=\"_id\"\r\n                    labelKey=\"sydept_name\" placeholder=\"Select department\" size=\"md\">\r\n                  </cide-ele-select>\r\n\r\n                  <cide-ele-select label=\"Designation for this Entity\" [options]=\"getDesignationOptionsForEntity(i)\"\r\n                    valueKey=\"_id\" labelKey=\"sydsg_name\" formControlName=\"syenm_designation_id_sydsg\"\r\n                    placeholder=\"Select designation\" size=\"md\">\r\n                  </cide-ele-select>\r\n\r\n                  <cide-ele-input label=\"Active From *\" [id]=\"'syenm_activefrom['+i+']'\"\r\n                    formControlName=\"syenm_activefrom\" type=\"date\" size=\"md\">\r\n                  </cide-ele-input>\r\n\r\n                  <cide-ele-input label=\"Active Until\" [id]=\"'syenm_activeupto['+i+']'\"\r\n                    formControlName=\"syenm_activeupto\" type=\"date\" size=\"md\">\r\n                  </cide-ele-input>\r\n                </div>\r\n\r\n                <!-- Mapping Settings -->\r\n                <div class=\"tw-grid tw-px-3 tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-4 tw-mb-4\">\r\n                  <div class=\"tw-p-2 tw-bg-green-50 tw-border tw-border-green-200 tw-rounded-lg\">\r\n                    <cide-ele-input type=\"checkbox\" label=\"Default Entity\" formControlName=\"syenm_isdefault\"\r\n                      (change)=\"onDefaultEntityChange(i, $event)\" class=\"tw-h-5 tw-accent-green-500\" />\r\n                    <span class=\"tw-text-xs tw-text-green-600 tw-block tw-mt-1\">Set as user's default entity (only one\r\n                      allowed)</span>\r\n                  </div>\r\n\r\n                  <div class=\"tw-p-2 tw-bg-blue-50 tw-border tw-border-blue-200 tw-rounded-lg\">\r\n                    <cide-ele-input type=\"checkbox\" label=\"Active Mapping\" formControlName=\"syenm_isactive\"\r\n                      class=\"tw-h-5 tw-accent-blue-500\" />\r\n                    <span class=\"tw-text-xs tw-text-blue-600 tw-block tw-mt-1\">Enable this entity mapping</span>\r\n                  </div>\r\n                </div>\r\n\r\n                <!-- Menu Rights Grid for this Entity-Role -->\r\n                <div class=\"tw-border-t tw-border-gray-200\">\r\n\r\n                  @if (getMenuRightsForMapping(i).length > 0) {\r\n                  <!-- Menu Rights Tree Grid -->\r\n\r\n                  <cide-ele-data-grid [config]=\"getMenuRightsGridConfig(i)\"\r\n                    [templateRenderers]=\"getMenuRightsTemplateRenderers(i)\"\r\n                    (gridEvent)=\"onMenuRightsGridEvent($event, i)\" class=\"tw-h-96 tw-w-full\">\r\n                  </cide-ele-data-grid>\r\n\r\n                  } @else {\r\n                  <div class=\"tw-text-center tw-py-8 tw-bg-gray-50 tw-border tw-border-gray-200 tw-rounded-lg\">\r\n                    <div class=\"tw-text-gray-400 tw-mb-3\">\r\n                      <cide-ele-icon variant=\"gray\" size=\"lg\">menu</cide-ele-icon>\r\n                    </div>\r\n                    <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-600 tw-mb-2\">No Menu Rights Available</h6>\r\n                    <p class=\"tw-text-xs tw-text-gray-500 tw-mb-3 tw-text-center\">Select both entity and role to\r\n                      automatically load\r\n                      menu rights for this mapping.</p>\r\n                  </div>\r\n                  }\r\n                </div>\r\n              </div>\r\n            </div>\r\n            }\r\n          </div>\r\n\r\n          @if (entityMappings().length === 0) {\r\n          <div class=\"tw-text-center tw-py-8 tw-bg-white tw-border tw-border-blue-200 tw-rounded-lg\">\r\n            <div class=\"tw-text-blue-400 tw-mb-3\">\r\n              <cide-ele-icon variant=\"blue\" size=\"lg\">business</cide-ele-icon>\r\n            </div>\r\n            <h4 class=\"tw-text-sm tw-font-medium tw-text-blue-800 tw-mb-2\">No Entity Mappings</h4>\r\n            <p class=\"tw-text-blue-600 tw-mb-4 tw-text-center\">Add entity mappings to assign specific roles and\r\n              permissions for different entities.</p>\r\n            <button class=\"tw-mx-auto\" cideEleButton variant=\"primary\" size=\"md\" type=\"button\"\r\n              (click)=\"addEntityMapping()\" leftIcon=\"add\">\r\n              Add First Entity Mapping\r\n            </button>\r\n          </div>\r\n          }\r\n        </div>\r\n      }\r\n\r\n      @case ('addresses') {\r\n      <!-- Contact Addresses Section -->\r\n      <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\r\n        <div class=\"tw-flex tw-justify-end\">\r\n          <div class=\"tw-flex tw-justify-between tw-items-end tw-mb-2 tw-gap-4\">\r\n            <button cideEleButton variant=\"primary\" size=\"md\" type=\"button\" (click)=\"addContactAddress()\"\r\n              leftIcon=\"add\" [disabled]=\"!hasAddContactAddressRights()\">\r\n              Add New Address\r\n            </button>\r\n          </div>\r\n        </div>\r\n\r\n        <div formArrayName=\"core_user_contact_addresses\">\r\n          @for (address of contactAddresses(); track $index; let i = $index) {\r\n          <div [formGroupName]=\"i\"\r\n            class=\"tw-bg-white tw-border tw-border-gray-200 tw-rounded-xl tw-mb-8 tw-overflow-hidden tw-transition-all tw-duration-300 hover:tw-shadow-lg tw-shadow-sm\">\r\n            <div\r\n              class=\"tw-bg-gradient-to-r tw-from-gray-50 tw-to-gray-100 tw-px-4 tw-py-2 tw-flex tw-justify-between tw-items-center tw-border-b tw-border-gray-200\">\r\n              <!-- Use address type as header instead of generic \"Address X\" -->\r\n              <h4 class=\"tw-m-0 tw-text-gray-700 tw-text-sm tw-font-semibold tw-tracking-tight\">\r\n                {{ getAddressTypeLabel(i) || ('Address ' + (i + 1)) }}\r\n              </h4>\r\n              <div class=\"tw-flex tw-items-center tw-gap-2\">\r\n                @if (isAddressOwner(i)) {\r\n                <button cideEleButton variant=\"secondary\" size=\"xs\" type=\"button\" (click)=\"shareAddress(i)\"\r\n                  leftIcon=\"share\" class=\"tw-text-blue-600 hover:tw-text-blue-700\">\r\n                  Share\r\n                </button>\r\n                }\r\n                @if (!address?._id) {\r\n                <button cideEleButton variant=\"danger\" size=\"sm\" type=\"button\" (click)=\"removeContactAddress(i)\"\r\n                  leftIcon=\"delete\">\r\n                  Remove\r\n                </button>\r\n                }\r\n              </div>\r\n            </div>\r\n            <div class=\"tw-p-4\">\r\n              <!-- Main Layout: Inputs on Left, Address Textarea on Right -->\r\n              <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-4 tw-gap-3 tw-mb-3\">\r\n                \r\n                <!-- Left Side: Input Fields (3/4 width) -->\r\n                <div class=\"lg:tw-col-span-3\">\r\n                  <!-- Row 1: Address Type, Contact Person -->\r\n                  <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3 tw-mb-3\">\r\n                    <cide-ele-select label=\"Address Type\" [options]=\"addressTypeOptions()\" id=\"sycad_address_type_id_sygms\"\r\n                      formControlName=\"sycad_address_type_id_sygms\" placeholder=\"Select type\" size=\"sm\"\r\n                      valueKey=\"_id\" labelKey=\"sygms_title\" (change)=\"onAddressTypeChange(i)\">\r\n                    </cide-ele-select>\r\n\r\n                    <cide-ele-input label=\"Contact Person\" formControlName=\"sycad_contact_person_name\"\r\n                      placeholder=\"Enter contact person\" size=\"sm\">\r\n                    </cide-ele-input>\r\n                  </div>\r\n\r\n                  <!-- Row 2: Postal Code, City, State, Country -->\r\n                  <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-4 tw-gap-3\">\r\n                    <cide-ele-select label=\"Postal Code\" [options]=\"addressPostalCodes()[i] || []\"\r\n                      formControlName=\"sycad_contact_pin_sypin\" placeholder=\"Select postal code\" [searchable]=\"true\"\r\n                      [loading]=\"addressPostalCodesLoading()[i] || false\" (searchChange)=\"onPostalCodeSearch($event, i)\"\r\n                      (change)=\"onPostalCodeSelection($event, i)\" size=\"sm\">\r\n                    </cide-ele-select>\r\n\r\n                    <cide-ele-input label=\"City\" formControlName=\"sycad_contact_city_sypin\" placeholder=\"Enter city\"\r\n                      size=\"sm\">\r\n                    </cide-ele-input>\r\n\r\n                    <cide-ele-input label=\"State\" formControlName=\"sycad_contact_state_sypin\" placeholder=\"Enter state\"\r\n                      size=\"sm\">\r\n                    </cide-ele-input>\r\n\r\n                    <cide-ele-select label=\"Country\" [options]=\"addressCountries()[i] || []\"\r\n                      formControlName=\"sycad_contact_country_syctr\" placeholder=\"Select country\" valueKey=\"_id\"\r\n                      labelKey=\"syctr_country_iso_name\" [searchable]=\"true\" (searchChange)=\"onCountrySearch($event, i)\"\r\n                      [loading]=\"addressCountriesLoading()[i] || false\" size=\"sm\">\r\n                    </cide-ele-select>\r\n                  </div>\r\n                </div>\r\n\r\n                <!-- Right Side: Address Textarea (1/4 width, spans 2 rows) -->\r\n                <div class=\"lg:tw-col-span-1 lg:tw-row-span-2 tw-flex tw-flex-col\">\r\n                  <cide-ele-textarea label=\"Complete Address\" formControlName=\"sycad_contact_address\"\r\n                    placeholder=\"Enter complete address with area, city, and landmarks\" [rows]=\"4\" size=\"sm\"\r\n                    class=\"tw-h-full\">\r\n                  </cide-ele-textarea>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- Contact Details: Primary Phone, Alt Phone, Fax, Primary Email in 4 columns -->\r\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-4 tw-gap-3 tw-mb-3\">\r\n                <cide-ele-input label=\"Primary Phone\" formControlName=\"sycad_contact_phone\" type=\"tel\"\r\n                  placeholder=\"Primary phone\" size=\"sm\">\r\n                </cide-ele-input>\r\n\r\n                <cide-ele-input label=\"Alternate Phone\" formControlName=\"sycad_contact_phone_alt\" type=\"tel\"\r\n                  placeholder=\"Alternate phone\" size=\"sm\">\r\n                </cide-ele-input>\r\n\r\n                <cide-ele-input label=\"Fax Number\" formControlName=\"sycad_contact_fax\" placeholder=\"Fax number\"\r\n                  size=\"sm\">\r\n                </cide-ele-input>\r\n\r\n                <cide-ele-input label=\"Primary Email\" formControlName=\"sycad_contact_email\" type=\"email\"\r\n                  placeholder=\"Primary email\" size=\"sm\">\r\n                </cide-ele-input>\r\n              </div>\r\n\r\n              <!-- Alternate Email in single row -->\r\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3\">\r\n                <cide-ele-input label=\"Alternate Email\" formControlName=\"sycad_contact_email_alt\" type=\"email\"\r\n                  placeholder=\"Alternate email address\" size=\"sm\">\r\n                </cide-ele-input>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          }\r\n        </div>\r\n      </div>\r\n      }\r\n\r\n      @case ('documents') {\r\n      <!-- Documents Section -->\r\n      <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\r\n        <div class=\"tw-flex tw-justify-end tw-items-end tw-mb-2 tw-gap-4\">\r\n          <button cideEleButton variant=\"primary\" size=\"md\" type=\"button\" (click)=\"addDocument()\" leftIcon=\"add\" [disabled]=\"!hasAddDocumentRights()\">\r\n            Add Document\r\n          </button>\r\n        </div>\r\n        <div formArrayName=\"core_user_documents\">\r\n          @for (doc of documents(); track $index; let i = $index) {\r\n          <div [formGroupName]=\"i\"\r\n            class=\"tw-bg-white tw-border tw-border-gray-200 tw-rounded-xl tw-mb-8 tw-overflow-hidden tw-transition-all tw-duration-300 hover:tw-shadow-lg tw-shadow-sm\">\r\n            <div\r\n              class=\"tw-bg-gradient-to-r tw-from-gray-50 tw-to-gray-100 tw-px-4 tw-py-2 tw-flex tw-justify-between tw-items-center tw-border-b tw-border-gray-200\">\r\n              <h4 class=\"tw-m-0 tw-text-gray-700 tw-text-sm tw-font-semibold tw-tracking-tight\">\r\n                {{ getDocumentTypeLabel(i) || ('Document ' + (i + 1)) }}\r\n              </h4>\r\n              <div class=\"tw-flex tw-gap-2\">\r\n                @if (doc?._id) {\r\n                <button cideEleButton variant=\"secondary\" size=\"sm\" type=\"button\" (click)=\"shareDocumentRights(i)\"\r\n                  leftIcon=\"share\">\r\n                  Share\r\n                </button>\r\n                }\r\n              </div>\r\n            </div>\r\n            <div class=\"tw-p-4\">\r\n              <!-- Main Layout: Inputs on Left, File Upload on Right -->\r\n              <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-3 tw-gap-4\">\r\n                \r\n                <!-- Left Side: Document Information (2/3 width) -->\r\n                <div class=\"lg:tw-col-span-2\">\r\n                  <!-- Row 1: Document Type, Document Number, Name as per Document -->\r\n                  <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-3 tw-mb-3\">\r\n                    <cide-ele-select label=\"Document Type\" [options]=\"documentTypeOptions()\"\r\n                      formControlName=\"syusd_document_type_id_sygms\" placeholder=\"Select type\" size=\"sm\"\r\n                      valueKey=\"_id\" labelKey=\"sygms_title\" (change)=\"onDocumentTypeChange(i)\">\r\n                    </cide-ele-select>\r\n\r\n                    <cide-ele-input label=\"Document Number\" formControlName=\"syusd_doc_number\"\r\n                      placeholder=\"Document number\" size=\"sm\">\r\n                    </cide-ele-input>\r\n\r\n                    <cide-ele-input label=\"Name as per Document\" formControlName=\"syusd_doc_name_as_per_doc\"\r\n                      placeholder=\"Name on document\" size=\"sm\">\r\n                    </cide-ele-input>\r\n                  </div>\r\n\r\n                  <!-- Row 2: Issue Date, Expiry Date, Photo Group -->\r\n                  <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-3 tw-mb-3\">\r\n                    <cide-ele-input label=\"Issue Date\" formControlName=\"syusd_doc_issue_date\"\r\n                      [id]=\"'syusd_doc_issue_date['+i+']'\" type=\"date\" size=\"sm\">\r\n                    </cide-ele-input>\r\n\r\n                    <cide-ele-input label=\"Expiry Date\" formControlName=\"syusd_doc_expiry_date\"\r\n                      [id]=\"'syusd_doc_expiry_date['+i+']'\" type=\"date\" size=\"sm\">\r\n                    </cide-ele-input>\r\n                  </div>\r\n\r\n                  <!-- Row 3: Verification Status, KYC Status -->\r\n                  <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3\">\r\n                    <cide-ele-select label=\"Verification Status\" [options]=\"documentVerificationStatusOptions()\"\r\n                      formControlName=\"syusd_doc_verification_status_id_sygms\" placeholder=\"Select status\"\r\n                      size=\"sm\" valueKey=\"_id\" labelKey=\"sygms_title\">\r\n                    </cide-ele-select>\r\n\r\n                    <cide-ele-select label=\"KYC Status\" [options]=\"documentKycStatusOptions()\"\r\n                      formControlName=\"syusd_doc_kyc_status_id_sygms\" placeholder=\"Select KYC status\" size=\"sm\"\r\n                      valueKey=\"_id\" labelKey=\"sygms_title\">\r\n                    </cide-ele-select>\r\n                  </div>\r\n                </div>\r\n\r\n                <!-- Right Side: File Upload (1/3 width) -->\r\n                <div class=\"lg:tw-col-span-1\">\r\n                  <div class=\"tw-bg-gray-50 tw-border tw-border-gray-200 tw-rounded-lg tw-p-3 tw-h-full\">\r\n                    \r\n                    <!-- File Upload Input -->\r\n                    <cide-ele-file-input\r\n                      [id]=\"'document-files-' + i\"\r\n                      [multiple]=\"true\"\r\n                      formControlName=\"syusd_photo_group_id_cyfm\"\r\n                      [accept]=\"'.pdf,.jpg,.jpeg,.png,.doc,.docx'\"\r\n                      [autoUpload]=\"true\"\r\n                      [uploadData]=\"getDocumentUploadData(i)\"\r\n                      (change)=\"onDocumentFilesSelected($event, i)\"\r\n                      (uploadSuccess)=\"onDocumentUploadSuccess($event, i)\"\r\n                      (uploadError)=\"onDocumentUploadError($event, i)\"\r\n                      (uploadProgressChange)=\"onDocumentUploadProgress($event, i)\"\r\n                      class=\"tw-mb-3\"\r\n                      size=\"sm\">\r\n                    </cide-ele-file-input>\r\n\r\n                    <!-- Upload Status -->\r\n                    <!-- Upload status is now handled by the file input component itself -->\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          }\r\n        </div>\r\n      </div>\r\n      }\r\n\r\n      @case ('family') {\r\n      <!-- Family Details Section - Compact Design -->\r\n      <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\r\n        <div class=\"tw-flex tw-justify-end tw-items-end tw-mb-3 tw-gap-4\">\r\n          <button cideEleButton variant=\"primary\" size=\"sm\" type=\"button\" (click)=\"addFamilyDetail()\" leftIcon=\"add\" [disabled]=\"!hasAddFamilyDetailRights()\">\r\n            Add Family Member\r\n          </button>\r\n        </div>\r\n\r\n        <div formArrayName=\"core_user_family_details\">\r\n          @for (family of familyDetails(); track $index; let i = $index) {\r\n          <div [formGroupName]=\"i\"\r\n            class=\"tw-bg-white tw-border tw-border-gray-200 tw-rounded-lg tw-mb-4 tw-overflow-hidden tw-transition-all tw-duration-200 hover:tw-shadow-md tw-shadow-sm\">\r\n            \r\n            <!-- Compact Header -->\r\n            <div class=\"tw-bg-gray-50 tw-px-4 tw-py-2 tw-flex tw-justify-between tw-items-center tw-border-b tw-border-gray-200\">\r\n              <h4 class=\"tw-m-0 tw-text-gray-700 tw-text-sm tw-font-medium\">Family Member {{ i + 1 }}</h4>\r\n              <div class=\"tw-flex tw-gap-2\">\r\n                @if (family?._id) {\r\n                <button cideEleButton variant=\"secondary\" size=\"xs\" type=\"button\" (click)=\"shareFamilyDetailRights(i)\"\r\n                  leftIcon=\"share\">\r\n                  Share\r\n                </button>\r\n                }\r\n                @if (!family?._id) {\r\n                <button cideEleButton variant=\"danger\" size=\"xs\" type=\"button\" (click)=\"removeFamilyDetail(i)\" leftIcon=\"delete\">\r\n                  Remove\r\n                </button>\r\n                }\r\n              </div>\r\n            </div>\r\n            \r\n            <!-- Compact Form Content - 3 inputs per row -->\r\n            <div class=\"tw-p-4\">\r\n              <!-- Row 1: Name, User, and Combined Relationship/Active Status (33.33% each) -->\r\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-3 tw-mb-3\">\r\n                <cide-ele-input label=\"Family Member Name\" formControlName=\"syfdl_family_member_name\"\r\n                  placeholder=\"Enter family member full name\" size=\"sm\">\r\n                </cide-ele-input>\r\n\r\n                <cide-ele-select label=\"Family Member User\" [options]=\"userOptions(i)\"\r\n                  formControlName=\"syfdl_family_member_id_user\" placeholder=\"Select family member user\" size=\"sm\"\r\n                  valueKey=\"_id\" labelKey=\"user_fullname\" [searchable]=\"true\"\r\n                  [loading]=\"userSearchLoading()[i] || false\" (searchChange)=\"onUserSearchChange($event, i)\"\r\n                  (change)=\"onUserSelectionChange($event, i)\">\r\n                </cide-ele-select>\r\n\r\n                <!-- Combined Relationship and Active Status (33.33%) -->\r\n                <div class=\"tw-flex tw-flex-row tw-gap-2 tw-items-end\">\r\n                  <div class=\"tw-flex-1\">\r\n                    <cide-ele-select label=\"Relationship\" [options]=\"relationshipOptions()\"\r\n                      formControlName=\"syfdl_relationship_id_sygms\" placeholder=\"Select relationship\" size=\"sm\"\r\n                      valueKey=\"_id\" labelKey=\"sygms_title\">\r\n                    </cide-ele-select>\r\n                  </div>\r\n\r\n                  <div class=\"tw-flex tw-items-center tw-pt-1 tw-flex-shrink-0\">\r\n                    <cide-ele-input formControlName=\"syfdl_isactive\" type=\"checkbox\" label=\"Active\" size=\"sm\">\r\n                    </cide-ele-input>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- Row 2: Blood Group, DOB, and Phone -->\r\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 xl:tw-grid-cols-3 tw-gap-3 tw-mb-3\">\r\n                <cide-ele-select label=\"Blood Group\" [options]=\"bloodGroupOptions()\"\r\n                  formControlName=\"syfdl_blood_group_sygms\" placeholder=\"Select blood group\" size=\"sm\" valueKey=\"_id\"\r\n                  labelKey=\"sygms_title\">\r\n                </cide-ele-select>\r\n\r\n                <cide-ele-input label=\"Date of Birth\" formControlName=\"syfdl_family_member_dob\" type=\"date\" size=\"sm\"\r\n                  [id]=\"'syfdl_family_member_dob['+i+']'\">\r\n                </cide-ele-input>\r\n\r\n                <cide-ele-input label=\"Contact Phone\" formControlName=\"syfdl_contact_phone\" type=\"tel\"\r\n                  placeholder=\"Enter contact phone\" size=\"sm\">\r\n                </cide-ele-input>\r\n              </div>\r\n\r\n              <!-- Row 3: Email, Email ID, and Contact Number -->\r\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 xl:tw-grid-cols-3 tw-gap-3 tw-mb-3\">\r\n                <cide-ele-input label=\"Contact Email\" formControlName=\"syfdl_contact_email\" type=\"email\"\r\n                  placeholder=\"Enter contact email\" size=\"sm\">\r\n                </cide-ele-input>\r\n\r\n                <cide-ele-input label=\"Contact Email ID\" formControlName=\"syfdl_contact_email_id\" type=\"email\"\r\n                  placeholder=\"Enter contact email ID\" size=\"sm\">\r\n                </cide-ele-input>\r\n\r\n                <cide-ele-input label=\"Contact Number\" formControlName=\"syfdl_contact_number\" type=\"tel\"\r\n                  placeholder=\"Enter contact number\" size=\"sm\">\r\n                </cide-ele-input>\r\n              </div>\r\n\r\n            </div>\r\n          </div>\r\n          }\r\n        </div>\r\n      </div>\r\n      }\r\n      }\r\n    </div>\r\n\r\n    <!-- Form Actions -->\r\n    <div\r\n      class=\"tw-flex tw-justify-end tw-gap-4 tw-py-2 tw-bg-white tw-border-t tw-border-gray-200 tw-sticky tw-bottom-0 tw-z-10\">\r\n      <button cideEleButton type=\"button\" variant=\"secondary\" (click)=\"resetForm()\" leftIcon=\"refresh\"\r\n        [disabled]=\"loading()\">\r\n        Reset Form\r\n      </button>\r\n\r\n      <button cideEleButton type=\"submit\" variant=\"primary\" [disabled]=\"loading() || userMasterForm.invalid\"\r\n        [loading]=\"loading()\" leftIcon=\"save\">\r\n        Save User Master\r\n      </button>\r\n    </div>\r\n  </form>\r\n</div>\r\n\r\n<!-- Template Renderers for Role Permissions Grid -->\r\n<ng-template #menuDetailsRendererTemplate let-row=\"row\">\r\n  <div class=\"tw-flex tw-items-center tw-space-x-3 tw-min-w-0\">\r\n    <!-- Menu Icon -->\r\n    <div class=\"tw-flex-shrink-0\">\r\n      @if (row.syme_type === 'module') {\r\n      <cide-ele-icon class=\"tw-text-blue-600 tw-w-4 tw-h-4\">folder</cide-ele-icon>\r\n      } @else if (row.syme_type === 'section') {\r\n      <cide-ele-icon class=\"tw-text-green-600 tw-w-4 tw-h-4\">folder_open</cide-ele-icon>\r\n      } @else if (row.syme_type === 'menu') {\r\n      <cide-ele-icon class=\"tw-text-purple-600 tw-w-4 tw-h-4\">menu</cide-ele-icon>\r\n      } @else {\r\n      <cide-ele-icon class=\"tw-text-gray-600 tw-w-4 tw-h-4\">description</cide-ele-icon>\r\n      }\r\n    </div>\r\n\r\n    <!-- Menu Details -->\r\n    <div class=\"tw-ml-3 tw-min-w-0 tw-flex-1\">\r\n      <div class=\"tw-flex tw-items-center tw-gap-2\">\r\n        <div class=\"tw-text-xs tw-font-medium tw-text-gray-900 tw-truncate\" [title]=\"row.syme_title\">\r\n          {{ row.syme_title || row.menu?.syme_title || row.menu?.syme_menu_name || 'Untitled' }}\r\n        </div>\r\n        <!-- Green pill indicator for parent menus with child permissions -->\r\n        @if (row.syme_type === 'module' || row.syme_type === 'section') {\r\n        @if (hasChildMenusWithPermissions(row._id)) {\r\n        <span\r\n          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 tw-whitespace-nowrap\">\r\n          Assigned\r\n        </span>\r\n        }\r\n        }\r\n      </div>\r\n      @if (row.permission?.sygms_name) {\r\n      <div class=\"tw-text-xs tw-text-blue-500 tw-truncate\" [title]=\"row.permission?.sygms_name\">\r\n        {{ row.permission?.sygms_name }}\r\n      </div>\r\n      }\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- Menu Type Renderer Template -->\r\n<ng-template #menuTypeRendererTemplate let-row=\"row\" let-value=\"value\">\r\n  <div class=\"tw-flex tw-items-center tw-justify-center\">\r\n    @if (row.syme_type === 'module') {\r\n    <span\r\n      class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded-full tw-text-xs tw-font-medium tw-bg-blue-100 tw-text-blue-800\">\r\n      Module\r\n    </span>\r\n    } @else if (row.syme_type === 'section') {\r\n    <span\r\n      class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded-full tw-text-xs tw-font-medium tw-bg-green-100 tw-text-green-800\">\r\n      Section\r\n    </span>\r\n    } @else if (row.syme_type === 'menu') {\r\n    <span\r\n      class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded-full tw-text-xs tw-font-medium tw-bg-purple-100 tw-text-purple-800\">\r\n      Menu\r\n    </span>\r\n    } @else {\r\n    <span\r\n      class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded-full tw-text-xs tw-font-medium tw-bg-gray-100 tw-text-gray-800\">\r\n      {{ row.syme_type || 'Unknown' }}\r\n    </span>\r\n    }\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- Permissions Checkbox Renderer Template -->\r\n<ng-template #permissionsCheckboxRendererTemplate let-row=\"row\" let-value=\"value\">\r\n  <div class=\"tw-flex tw-flex-wrap tw-gap-2 tw-max-w-full\">\r\n    @if (row.syme_type === 'menu' && row?.syme_permissions_id_sygms && row?.syme_permissions_id_sygms.length > 0) {\r\n    @for (permissionId of row?.syme_permissions_id_sygms || []; track permissionId) {\r\n    <div class=\"tw-flex tw-items-center tw-space-x-1\">\r\n      <div class=\"tw-flex tw-items-center tw-space-x-1\">\r\n        <input type=\"checkbox\" [checked]=\"isPermissionSelected(row._id, permissionId)\" [disabled]=\"true\"\r\n          class=\"tw-h-4 tw-w-4 tw-text-blue-600 tw-bg-gray-100 tw-border-gray-300 tw-rounded focus:tw-ring-blue-500\">\r\n        <label class=\"tw-text-xs tw-text-gray-700\">\r\n          {{ getPermissionById(permissionId)?.sygms_title || 'Unknown' }}\r\n        </label>\r\n      </div>\r\n    </div>\r\n    }\r\n    } @else {\r\n    <!-- Show green checkmark for parent menus with child permissions -->\r\n    @if (row.syme_type === 'module' || row.syme_type === 'section' || row.syme_type === 'title') {\r\n    @if (hasChildMenusWithPermissions(row._id)) {\r\n    <div class=\"tw-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-bg-green-100 tw-rounded-full\">\r\n      <cide-ele-icon class=\"tw-text-green-600\" size=\"xs\">\r\n        check\r\n      </cide-ele-icon>\r\n    </div>\r\n    } @else {\r\n    <span class=\"tw-text-xs tw-text-gray-400\">N/A</span>\r\n    }\r\n    } @else {\r\n    <span class=\"tw-text-xs tw-text-gray-400\">N/A</span>\r\n    }\r\n    }\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- Menu Rights Permissions Renderer Template -->\r\n<ng-template #menuRightsPermissionsRendererTemplate let-row=\"row\" let-value=\"value\">\r\n  <div class=\"tw-flex tw-flex-wrap tw-gap-2 tw-max-w-full\">\r\n    <!-- Role Rights Display -->\r\n    @if (row.role_rights && row.role_rights.length > 0) {\r\n    <div class=\"tw-mb-2\">\r\n      <div class=\"tw-text-xs tw-text-gray-500 tw-mb-1\">Role Rights:</div>\r\n      <div class=\"tw-flex tw-flex-wrap tw-gap-1\">\r\n        @for (right of row.role_rights; track $index) {\r\n        <span class=\"tw-inline-block tw-px-2 tw-py-1 tw-text-xs tw-bg-blue-100 tw-text-blue-800 tw-rounded\">\r\n          {{ right }}\r\n        </span>\r\n        }\r\n      </div>\r\n    </div>\r\n    }\r\n\r\n\r\n    <!-- Exception Indicator -->\r\n    @if (row.hasException) {\r\n    <div class=\"tw-mt-2\">\r\n      <span class=\"tw-inline-block tw-px-2 tw-py-1 tw-text-xs tw-bg-yellow-100 tw-text-yellow-800 tw-rounded\">\r\n        Override\r\n      </span>\r\n    </div>\r\n    } @else {\r\n    <div class=\"tw-mt-2\">\r\n      <span class=\"tw-text-xs tw-text-gray-400\">Default</span>\r\n    </div>\r\n    }\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- Permissions Renderer Template -->\r\n<ng-template #permissionsRendererTemplate let-row=\"row\" let-value=\"value\">\r\n  <div class=\"tw-flex tw-flex-wrap tw-gap-2 tw-max-w-full\">\r\n    @if (row._permissionValues && Object.keys(row._permissionValues).length > 0) {\r\n    @for (permissionId of Object.keys(row._permissionValues); track permissionId) {\r\n    <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\n      <cide-ele-input type=\"checkbox\" [ngModel]=\"row._permissionValues[permissionId].checked\"\r\n        (ngModelChange)=\"onPermissionChangeSafe($event, row, permissionId)\"\r\n        [id]=\"'permission-' + row._id + '-' + permissionId\" class=\"tw-h-4 tw-w-4\">\r\n      </cide-ele-input>\r\n      <label [for]=\"'permission-' + row._id + '-' + permissionId\" \r\n        class=\"tw-text-xs tw-cursor-pointer\"\r\n        [ngClass]=\"{\r\n          'tw-text-gray-700': row._permissionValues[permissionId].modified === row._permissionValues[permissionId].actual,\r\n          'tw-text-blue-600 tw-font-semibold': row._permissionValues[permissionId].modified !== row._permissionValues[permissionId].actual\r\n        }\">\r\n        {{ row._permissionValues[permissionId].permission?.sygms_title }}\r\n        @if (row._permissionValues[permissionId].modified !== row._permissionValues[permissionId].actual) {\r\n        <span class=\"tw-text-xs tw-text-orange-500 tw-ml-1\" title=\"Modified from role permission\">\r\n          ({{ row._permissionValues[permissionId].actual ? '\u2713' : '\u2717' }})\r\n        </span>\r\n        }\r\n      </label>\r\n    </div>\r\n    }\r\n    } @else {\r\n    <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\n      <cide-ele-icon class=\"tw-text-gray-400 tw-animate-spin\" size=\"xs\">refresh</cide-ele-icon>\r\n      <span class=\"tw-text-xs tw-text-gray-400\">Loading permissions...</span>\r\n    </div>\r\n    }\r\n  </div>\r\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: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1$2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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", "step", "size"], outputs: ["ngModelChange"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput", "options", "multiple", "searchable", "showSearchInput", "loading", "valueKey", "labelKey", "treeView"], 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: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideEleTabComponent, selector: "cide-ele-tab", inputs: ["tabs", "activeTabId", "size", "variant", "fullWidth", "disabled"], outputs: ["tabChange"] }, { kind: "component", type: CideEleFileInputComponent, selector: "cide-ele-file-input", inputs: ["label", "accept", "multiple", "disabled", "required", "helperText", "errorText", "showPreview", "previewWidth", "previewHeight", "previewBoxMode", "showFileName", "placeholderText", "placeholderIcon", "autoUpload", "uploadData", "showFloatingUploader", "floatingUploaderGroupId"], outputs: ["fileChange", "uploadSuccess", "uploadError", "uploadProgressChange"] }, { kind: "directive", type: CideEleFileImageDirective, selector: "[cideEleFileImage]", inputs: ["fileId", "altText"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideEleDataGridComponent, selector: "cide-ele-data-grid", inputs: ["config", "templateRenderers", "customFormatters", "actionHandlers", "serverSidePagination", "totalServerItems", "currentServerPage", "currentServerPageSize", "dragDropEnabled"], outputs: ["gridEvent"] }, { kind: "component", type: CideEleToastNotificationComponent, selector: "cide-ele-toast-notification" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCoreUserCreateComponent, decorators: [{
             type: Component,
@@ -19406,7 +19515,7 @@ class CideCoreUserRoleFormComponent {
         }, 100);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCoreUserRoleFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideCoreUserRoleFormComponent, isStandalone: true, selector: "cide-core-user-role-form", viewQueries: [{ propertyName: "menuDetailsRendererTemplate", first: true, predicate: ["menuDetailsRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "permissionsCheckboxRendererTemplate", first: true, predicate: ["permissionsCheckboxRendererTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- User Role Form Container -->\r\n<div class=\"tw-w-full tw-h-full\">\r\n  <form class=\"tw-max-w-7xl  tw-mx-auto tw-bg-transparent tw-h-full tw-flex tw-flex-col\" [formGroup]=\"userRoleForm\" [class.tw-opacity-60]=\"loading()\" (ngSubmit)=\"onSubmit()\">\r\n\r\n    <!-- Error Message -->\r\n    @if (error()) {\r\n      <div class=\"tw-mb-6 tw-p-4 tw-bg-red-50 tw-border tw-border-red-200 tw-rounded-md\">\r\n        <div class=\"tw-flex tw-items-start\">\r\n          <cide-ele-icon name=\"error\" 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    <!-- User Role Basic Information Section -->\r\n    <div class=\"tw-py-2 tw-border-b-0 tw-mb-0  tw-p-3\">\r\n\r\n      <!-- Basic Fields -->\r\n      <div class=\"tw-grid tw-grid-cols-1 xl:tw-grid-cols-2 lg:tw-grid-cols-2 md:tw-grid-cols-1 tw-gap-6 tw-mb-0\">\r\n        <!-- Left Column: Role Name -->\r\n        <div>\r\n          <cide-ele-input \r\n            id=\"syusrol_role_name\" \r\n            label=\"Role Name *\" \r\n            formControlName=\"syusrol_role_name\"\r\n            placeholder=\"Enter role name\" \r\n            [maxlength]=\"50\" \r\n            size=\"md\"\r\n            [disabled]=\"isViewMode()\">\r\n          </cide-ele-input>\r\n        </div>\r\n\r\n        <!-- Right Column: Description -->\r\n        <div>\r\n          <cide-ele-textarea \r\n            id=\"syusrol_role_description\" \r\n            label=\"Description *\" \r\n            formControlName=\"syusrol_role_description\"\r\n            placeholder=\"Enter role description\" \r\n            rows=\"3\"\r\n            [maxlength]=\"200\"\r\n            [disabled]=\"isViewMode()\">\r\n          </cide-ele-textarea>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Active Status Row -->\r\n      <div class=\"tw-mb-0\">\r\n        <cide-ele-input \r\n          id=\"syusrol_isactive\" \r\n          label=\"Active Status\" \r\n          formControlName=\"syusrol_isactive\"\r\n          type=\"checkbox\" \r\n          size=\"md\"\r\n          [disabled]=\"isViewMode()\">\r\n        </cide-ele-input>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Role Rights Section -->\r\n    <div class=\"tw-pt-2 tw-border-b-0 tw-mb-0 tw-flex-1 tw-flex tw-flex-col tw-min-h-0\">\r\n\r\n      <!-- Role Rights Grid -->\r\n      <div class=\"tw-flex-1 tw-min-h-0 tw-w-full\" style=\"height: 400px; max-height: 900px;\">\r\n        <cide-ele-data-grid \r\n          [config]=\"roleRightsGridConfig()\" \r\n          [templateRenderers]=\"templateRenderers()\"\r\n          (gridEvent)=\"onRoleRightsGridEvent($event)\"\r\n          class=\"tw-h-full tw-w-full\">\r\n        </cide-ele-data-grid>\r\n      </div>\r\n\r\n      <!-- Role Rights Form (Hidden but functional) -->\r\n      <div [formGroup]=\"roleRightsForm\" class=\"tw-hidden\">\r\n        <div formArrayName=\"roleRights\">\r\n        @for (right of roleRightsArray.controls; track $index; let i = $index) {\r\n          <div [formGroupName]=\"i\">\r\n            <cide-ele-select formControlName=\"syusrgt_menu_id_syme\">\r\n              <option value=\"\">Select Menu</option>\r\n              @for (menu of menus(); track menu._id) {\r\n                <option [value]=\"menu._id\">{{ menu.syme_title }}</option>\r\n              }\r\n            </cide-ele-select>\r\n            <cide-ele-select formControlName=\"syusrgt_role_permissions_id_sygms\">\r\n              <option value=\"\">Select Permission</option>\r\n              @for (permission of permissions(); track permission._id) {\r\n                <option [value]=\"permission._id\">{{ permission.sygms_name }}</option>\r\n              }\r\n            </cide-ele-select>\r\n            <cide-ele-input formControlName=\"syusrgt_isactive\" type=\"checkbox\"></cide-ele-input>\r\n          </div>\r\n        }\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Form Actions -->\r\n    <div class=\"tw-flex tw-justify-between tw-items-center tw-p-3 tw-gap-4 tw-py-2 tw-bg-white tw-border-t tw-border-gray-200 tw-sticky tw-bottom-0 tw-z-10\">\r\n      <!-- Error Message (Left Side) -->\r\n      <cide-form-field-error [formGroup]=\"userRoleForm\"></cide-form-field-error>\r\n      \r\n      <!-- Action Buttons (Right Side) -->\r\n      <div class=\"tw-flex tw-gap-4\">\r\n        <button cideEleButton type=\"button\" variant=\"secondary\" (click)=\"onCancel()\" leftIcon=\"arrow_back\"\r\n          [disabled]=\"loading()\">\r\n          {{ isViewMode() ? 'Close' : 'Cancel' }}\r\n        </button>\r\n\r\n        @if (!isViewMode()) {\r\n          <button cideEleButton type=\"submit\" variant=\"primary\" [disabled]=\"loading() || !isFormReadyToSave\"\r\n            [loading]=\"loading()\" leftIcon=\"save\">\r\n            {{ submitButtonText }}\r\n          </button>\r\n        }\r\n      </div>\r\n    </div>\r\n  </form>\r\n</div>\r\n\r\n<!-- Template Renderers for Role Rights Grid -->\r\n<ng-template #menuDetailsRendererTemplate let-row=\"row\" let-value=\"value\">\r\n  <div class=\"tw-flex tw-items-center tw-min-w-0\">\r\n    <!-- Menu Icon -->\r\n    <div class=\"tw-flex-shrink-0\">\r\n      <cide-ele-icon \r\n        class=\"tw-text-gray-400\" \r\n        size=\"xs\">\r\n        {{ row.syme_icon || 'folder_open' }}\r\n      </cide-ele-icon>\r\n    </div>\r\n    \r\n    <!-- Menu Details -->\r\n    <div class=\"tw-ml-3 tw-min-w-0 tw-flex-1\">\r\n      <div class=\"tw-flex tw-items-center tw-gap-2\">\r\n        <div class=\"tw-text-xs tw-font-medium tw-text-gray-900 tw-truncate\" \r\n             [title]=\"row.syme_title\">\r\n          {{ row.syme_title || row.menu?.syme_title || row.menu?.syme_menu_name || 'Untitled' }}\r\n        </div>\r\n        <!-- Green pill indicator for parent menus with child permissions -->\r\n        @if (row.syme_type === 'module' || row.syme_type === 'section') {\r\n          @if (hasChildMenusWithPermissions(row._id)) {\r\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 tw-whitespace-nowrap\">\r\n              Assigned\r\n            </span>\r\n          }\r\n        }\r\n      </div>\r\n      @if (row.permission?.sygms_name) {\r\n        <div class=\"tw-text-xs tw-text-blue-500 tw-truncate\" \r\n             [title]=\"row.permission?.sygms_name\">\r\n          {{ row.permission?.sygms_name }}\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n\r\n<!-- Permissions Checkbox Renderer Template -->\r\n<ng-template #permissionsCheckboxRendererTemplate let-row=\"row\" let-value=\"value\">\r\n  <div class=\"tw-flex tw-flex-wrap tw-gap-2 tw-max-w-full\">\r\n    @if (row.syme_type === 'menu' && row?.syme_permissions_id_sygms && row?.syme_permissions_id_sygms.length > 0) {\r\n      @for (permissionId of row?.syme_permissions_id_sygms || []; track permissionId) {\r\n         <div class=\"tw-flex tw-items-center tw-space-x-1\">\r\n           <cide-ele-input \r\n             type=\"checkbox\"\r\n             [label]=\"getPermissionById(permissionId)?.sygms_name || 'Unknown'\"\r\n             [ngModel]=\"isPermissionSelected(row._id, permissionId)\"\r\n             (ngModelChange)=\"onPermissionCheckboxChange(row._id, permissionId, $event)\"\r\n             size=\"xs\"\r\n             [disabled]=\"isViewMode()\">\r\n           </cide-ele-input>\r\n         </div>\r\n      }\r\n    } @else {\r\n      <!-- Show green checkmark for parent menus with child permissions -->\r\n      @if (row.syme_type === 'module' || row.syme_type === 'section' || row.syme_type === 'title') {\r\n        @if (hasChildMenusWithPermissions(row._id)) {\r\n          <div class=\"tw-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-bg-green-100 tw-rounded-full\" \r\n               [title]=\"hasParentViewRight(row._id) ? 'View right automatically enabled' : 'Child permissions assigned'\">\r\n            <cide-ele-icon \r\n              class=\"tw-text-green-600\" \r\n              size=\"xs\">\r\n              check\r\n            </cide-ele-icon>\r\n          </div>\r\n        } @else if (hasParentViewRight(row._id)) {\r\n          <!-- Show green checkmark for parent with view right -->\r\n          <cide-ele-icon \r\n            class=\"tw-text-green-600\" \r\n            size=\"xs\"\r\n            title=\"View right automatically enabled\">\r\n            check\r\n          </cide-ele-icon>\r\n        } @else {\r\n          <span class=\"tw-text-xs tw-text-gray-400\">N/A</span>\r\n        }\r\n      } @else {\r\n        <span class=\"tw-text-xs tw-text-gray-400\">N/A</span>\r\n      }\r\n    }\r\n  </div>\r\n</ng-template>", styles: [":host{@apply tw-w-full tw-h-full tw-flex tw-flex-col;}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1$2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: 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", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput", "options", "multiple", "searchable", "showSearchInput", "loading", "valueKey", "labelKey", "treeView"], 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: CideEleDataGridComponent, selector: "cide-ele-data-grid", inputs: ["config", "templateRenderers", "customFormatters", "actionHandlers", "serverSidePagination", "totalServerItems", "currentServerPage", "currentServerPageSize", "dragDropEnabled"], outputs: ["gridEvent"] }, { kind: "component", type: CideFormFieldErrorComponent, selector: "cide-form-field-error", inputs: ["control", "formGroup", "fieldName", "customMessages"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideCoreUserRoleFormComponent, isStandalone: true, selector: "cide-core-user-role-form", viewQueries: [{ propertyName: "menuDetailsRendererTemplate", first: true, predicate: ["menuDetailsRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "permissionsCheckboxRendererTemplate", first: true, predicate: ["permissionsCheckboxRendererTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- User Role Form Container -->\r\n<div class=\"tw-w-full tw-h-full\">\r\n  <form class=\"tw-max-w-7xl  tw-mx-auto tw-bg-transparent tw-h-full tw-flex tw-flex-col\" [formGroup]=\"userRoleForm\" [class.tw-opacity-60]=\"loading()\" (ngSubmit)=\"onSubmit()\">\r\n\r\n    <!-- Error Message -->\r\n    @if (error()) {\r\n      <div class=\"tw-mb-6 tw-p-4 tw-bg-red-50 tw-border tw-border-red-200 tw-rounded-md\">\r\n        <div class=\"tw-flex tw-items-start\">\r\n          <cide-ele-icon name=\"error\" 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    <!-- User Role Basic Information Section -->\r\n    <div class=\"tw-py-2 tw-border-b-0 tw-mb-0  tw-p-3\">\r\n\r\n      <!-- Basic Fields -->\r\n      <div class=\"tw-grid tw-grid-cols-1 xl:tw-grid-cols-2 lg:tw-grid-cols-2 md:tw-grid-cols-1 tw-gap-6 tw-mb-0\">\r\n        <!-- Left Column: Role Name -->\r\n        <div>\r\n          <cide-ele-input \r\n            id=\"syusrol_role_name\" \r\n            label=\"Role Name *\" \r\n            formControlName=\"syusrol_role_name\"\r\n            placeholder=\"Enter role name\" \r\n            [maxlength]=\"50\" \r\n            size=\"md\"\r\n            [disabled]=\"isViewMode()\">\r\n          </cide-ele-input>\r\n        </div>\r\n\r\n        <!-- Right Column: Description -->\r\n        <div>\r\n          <cide-ele-textarea \r\n            id=\"syusrol_role_description\" \r\n            label=\"Description *\" \r\n            formControlName=\"syusrol_role_description\"\r\n            placeholder=\"Enter role description\" \r\n            rows=\"3\"\r\n            [maxlength]=\"200\"\r\n            [disabled]=\"isViewMode()\">\r\n          </cide-ele-textarea>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Active Status Row -->\r\n      <div class=\"tw-mb-0\">\r\n        <cide-ele-input \r\n          id=\"syusrol_isactive\" \r\n          label=\"Active Status\" \r\n          formControlName=\"syusrol_isactive\"\r\n          type=\"checkbox\" \r\n          size=\"md\"\r\n          [disabled]=\"isViewMode()\">\r\n        </cide-ele-input>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Role Rights Section -->\r\n    <div class=\"tw-pt-2 tw-border-b-0 tw-mb-0 tw-flex-1 tw-flex tw-flex-col tw-min-h-0\">\r\n\r\n      <!-- Role Rights Grid -->\r\n      <div class=\"tw-flex-1 tw-min-h-0 tw-w-full\" style=\"height: 400px; max-height: 900px;\">\r\n        <cide-ele-data-grid \r\n          [config]=\"roleRightsGridConfig()\" \r\n          [templateRenderers]=\"templateRenderers()\"\r\n          (gridEvent)=\"onRoleRightsGridEvent($event)\"\r\n          class=\"tw-h-full tw-w-full\">\r\n        </cide-ele-data-grid>\r\n      </div>\r\n\r\n      <!-- Role Rights Form (Hidden but functional) -->\r\n      <div [formGroup]=\"roleRightsForm\" class=\"tw-hidden\">\r\n        <div formArrayName=\"roleRights\">\r\n        @for (right of roleRightsArray.controls; track $index; let i = $index) {\r\n          <div [formGroupName]=\"i\">\r\n            <cide-ele-select formControlName=\"syusrgt_menu_id_syme\">\r\n              <option value=\"\">Select Menu</option>\r\n              @for (menu of menus(); track menu._id) {\r\n                <option [value]=\"menu._id\">{{ menu.syme_title }}</option>\r\n              }\r\n            </cide-ele-select>\r\n            <cide-ele-select formControlName=\"syusrgt_role_permissions_id_sygms\">\r\n              <option value=\"\">Select Permission</option>\r\n              @for (permission of permissions(); track permission._id) {\r\n                <option [value]=\"permission._id\">{{ permission.sygms_name }}</option>\r\n              }\r\n            </cide-ele-select>\r\n            <cide-ele-input formControlName=\"syusrgt_isactive\" type=\"checkbox\"></cide-ele-input>\r\n          </div>\r\n        }\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Form Actions -->\r\n    <div class=\"tw-flex tw-justify-between tw-items-center tw-p-3 tw-gap-4 tw-py-2 tw-bg-white tw-border-t tw-border-gray-200 tw-sticky tw-bottom-0 tw-z-10\">\r\n      <!-- Error Message (Left Side) -->\r\n      <cide-form-field-error [formGroup]=\"userRoleForm\"></cide-form-field-error>\r\n      \r\n      <!-- Action Buttons (Right Side) -->\r\n      <div class=\"tw-flex tw-gap-4\">\r\n        <button cideEleButton type=\"button\" variant=\"secondary\" (click)=\"onCancel()\" leftIcon=\"arrow_back\"\r\n          [disabled]=\"loading()\">\r\n          {{ isViewMode() ? 'Close' : 'Cancel' }}\r\n        </button>\r\n\r\n        @if (!isViewMode()) {\r\n          <button cideEleButton type=\"submit\" variant=\"primary\" [disabled]=\"loading() || !isFormReadyToSave\"\r\n            [loading]=\"loading()\" leftIcon=\"save\">\r\n            {{ submitButtonText }}\r\n          </button>\r\n        }\r\n      </div>\r\n    </div>\r\n  </form>\r\n</div>\r\n\r\n<!-- Template Renderers for Role Rights Grid -->\r\n<ng-template #menuDetailsRendererTemplate let-row=\"row\" let-value=\"value\">\r\n  <div class=\"tw-flex tw-items-center tw-min-w-0\">\r\n    <!-- Menu Icon -->\r\n    <div class=\"tw-flex-shrink-0\">\r\n      <cide-ele-icon \r\n        class=\"tw-text-gray-400\" \r\n        size=\"xs\">\r\n        {{ row.syme_icon || 'folder_open' }}\r\n      </cide-ele-icon>\r\n    </div>\r\n    \r\n    <!-- Menu Details -->\r\n    <div class=\"tw-ml-3 tw-min-w-0 tw-flex-1\">\r\n      <div class=\"tw-flex tw-items-center tw-gap-2\">\r\n        <div class=\"tw-text-xs tw-font-medium tw-text-gray-900 tw-truncate\" \r\n             [title]=\"row.syme_title\">\r\n          {{ row.syme_title || row.menu?.syme_title || row.menu?.syme_menu_name || 'Untitled' }}\r\n        </div>\r\n        <!-- Green pill indicator for parent menus with child permissions -->\r\n        @if (row.syme_type === 'module' || row.syme_type === 'section') {\r\n          @if (hasChildMenusWithPermissions(row._id)) {\r\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 tw-whitespace-nowrap\">\r\n              Assigned\r\n            </span>\r\n          }\r\n        }\r\n      </div>\r\n      @if (row.permission?.sygms_name) {\r\n        <div class=\"tw-text-xs tw-text-blue-500 tw-truncate\" \r\n             [title]=\"row.permission?.sygms_name\">\r\n          {{ row.permission?.sygms_name }}\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n\r\n<!-- Permissions Checkbox Renderer Template -->\r\n<ng-template #permissionsCheckboxRendererTemplate let-row=\"row\" let-value=\"value\">\r\n  <div class=\"tw-flex tw-flex-wrap tw-gap-2 tw-max-w-full\">\r\n    @if (row.syme_type === 'menu' && row?.syme_permissions_id_sygms && row?.syme_permissions_id_sygms.length > 0) {\r\n      @for (permissionId of row?.syme_permissions_id_sygms || []; track permissionId) {\r\n         <div class=\"tw-flex tw-items-center tw-space-x-1\">\r\n           <cide-ele-input \r\n             type=\"checkbox\"\r\n             [label]=\"getPermissionById(permissionId)?.sygms_name || 'Unknown'\"\r\n             [ngModel]=\"isPermissionSelected(row._id, permissionId)\"\r\n             (ngModelChange)=\"onPermissionCheckboxChange(row._id, permissionId, $event)\"\r\n             size=\"xs\"\r\n             [disabled]=\"isViewMode()\">\r\n           </cide-ele-input>\r\n         </div>\r\n      }\r\n    } @else {\r\n      <!-- Show green checkmark for parent menus with child permissions -->\r\n      @if (row.syme_type === 'module' || row.syme_type === 'section' || row.syme_type === 'title') {\r\n        @if (hasChildMenusWithPermissions(row._id)) {\r\n          <div class=\"tw-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-bg-green-100 tw-rounded-full\" \r\n               [title]=\"hasParentViewRight(row._id) ? 'View right automatically enabled' : 'Child permissions assigned'\">\r\n            <cide-ele-icon \r\n              class=\"tw-text-green-600\" \r\n              size=\"xs\">\r\n              check\r\n            </cide-ele-icon>\r\n          </div>\r\n        } @else if (hasParentViewRight(row._id)) {\r\n          <!-- Show green checkmark for parent with view right -->\r\n          <cide-ele-icon \r\n            class=\"tw-text-green-600\" \r\n            size=\"xs\"\r\n            title=\"View right automatically enabled\">\r\n            check\r\n          </cide-ele-icon>\r\n        } @else {\r\n          <span class=\"tw-text-xs tw-text-gray-400\">N/A</span>\r\n        }\r\n      } @else {\r\n        <span class=\"tw-text-xs tw-text-gray-400\">N/A</span>\r\n      }\r\n    }\r\n  </div>\r\n</ng-template>", styles: [":host{@apply tw-w-full tw-h-full tw-flex tw-flex-col;}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1$2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: 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", "step", "size"], outputs: ["ngModelChange"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput", "options", "multiple", "searchable", "showSearchInput", "loading", "valueKey", "labelKey", "treeView"], 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: CideEleDataGridComponent, selector: "cide-ele-data-grid", inputs: ["config", "templateRenderers", "customFormatters", "actionHandlers", "serverSidePagination", "totalServerItems", "currentServerPage", "currentServerPageSize", "dragDropEnabled"], outputs: ["gridEvent"] }, { kind: "component", type: CideFormFieldErrorComponent, selector: "cide-form-field-error", inputs: ["control", "formGroup", "fieldName", "customMessages"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCoreUserRoleFormComponent, decorators: [{
             type: Component,
@@ -19556,5 +19665,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { CideCoreClassProgramMasterService, CideCoreCountryService, CideCoreDepartmentListComponent, CideCoreDepartmentManagementService, CideCoreDesignationListComponent, CideCoreDesignationManagementService, CideCoreEntityCreateComponent, CideCoreEntityListComponent, CideCoreEntityManagementService, CideCoreGeneralMasterComponent, CideCoreGeneralMasterService, CideCoreGeneralMasterTypeComponent, CideCoreGeneralMasterTypeService, CideCoreGradeLevelListComponent, CideCoreGradeLevelManagementService, CideCoreNationalityService, CideCoreOrgStructureComponent, CideCorePageControlsComponent, CideCorePageControlsService, CideCorePageListComponent, CideCorePageManagementService, CideCorePageThemeComponent, CideCorePageThemeService, CideCorePinCodeService, CideCoreRoleSelectService, CideCoreUserAttributesComponent, CideCoreUserContactAddressesComponent, CideCoreUserCreateComponent, CideCoreUserDocumentsComponent, CideCoreUserEntityAccessComponent, CideCoreUserFamilyDetailsComponent, CideCoreUserListComponent, CideCoreUserMasterService, CideCoreUserRoleFormComponent, CideCoreUserRoleListComponent, CideCoreUserRoleService, CloudIdeCoreComponent, CloudIdeCoreService, MenuListComponent, MenuManagementService, coreRoutes };
+export { CideCoreClassProgramMasterService, CideCoreCountryService, CideCoreCurrencyService, CideCoreDepartmentListComponent, CideCoreDepartmentManagementService, CideCoreDesignationListComponent, CideCoreDesignationManagementService, CideCoreEntityCreateComponent, CideCoreEntityListComponent, CideCoreEntityManagementService, CideCoreGeneralMasterComponent, CideCoreGeneralMasterService, CideCoreGeneralMasterTypeComponent, CideCoreGeneralMasterTypeService, CideCoreGradeLevelListComponent, CideCoreGradeLevelManagementService, CideCoreNationalityService, CideCoreOrgStructureComponent, CideCorePageControlsComponent, CideCorePageControlsService, CideCorePageListComponent, CideCorePageManagementService, CideCorePageThemeComponent, CideCorePageThemeService, CideCorePinCodeService, CideCoreRoleSelectService, CideCoreUserAttributesComponent, CideCoreUserContactAddressesComponent, CideCoreUserCreateComponent, CideCoreUserDocumentsComponent, CideCoreUserEntityAccessComponent, CideCoreUserFamilyDetailsComponent, CideCoreUserListComponent, CideCoreUserMasterService, CideCoreUserRoleFormComponent, CideCoreUserRoleListComponent, CideCoreUserRoleService, CloudIdeCoreComponent, CloudIdeCoreService, MenuListComponent, MenuManagementService, coreRoutes };
 //# sourceMappingURL=cloud-ide-core.mjs.map