cloud-ide-core 2.0.135 → 2.0.142

package/fesm2022/cloud-ide-core.mjs

@@ -1,6 +1,6 @@
-import { authGuard, SharedObjectIdService, CideSharedOrgStructureComponent } from 'cloud-ide-shared';
+import { authGuard, SharedObjectIdService, CideSharedOrgStructureComponent, ENTITY_SERVICE_TOKEN } from 'cloud-ide-shared';
 import * as i0 from '@angular/core';
-import { Injectable, Component, inject, DestroyRef, viewChild, signal, computed, input, output, ChangeDetectorRef, effect, ViewChild } from '@angular/core';
+import { Injectable, Component, inject, DestroyRef, viewChild, signal, computed, effect, input, output, ChangeDetectorRef, ViewChild } from '@angular/core';
 import * as i1$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i1$2 from '@angular/forms';
@@ -63,7 +63,7 @@ const coreRoutes = [
     },
     {
         path: 'page-form',
-        loadComponent: () => import('./cloud-ide-core-page-form.component-B9tSopSN.mjs').then(c => c.CideCorePageFormComponent),
+        loadComponent: () => import('./cloud-ide-core-page-form.component-DXbHvMOC.mjs').then(c => c.CideCorePageFormComponent),
         title: 'Page Form',
         canActivate: [authGuard],
         data: {
@@ -72,7 +72,7 @@ const coreRoutes = [
     },
     {
         path: 'page-form/:query',
-        loadComponent: () => import('./cloud-ide-core-page-form.component-B9tSopSN.mjs').then(c => c.CideCorePageFormComponent),
+        loadComponent: () => import('./cloud-ide-core-page-form.component-DXbHvMOC.mjs').then(c => c.CideCorePageFormComponent),
         title: 'Page Form',
         canActivate: [authGuard],
         data: {
@@ -261,7 +261,7 @@ const coreRoutes = [
     // Workflow Management Routes
     {
         path: 'workflow-registry',
-        loadComponent: () => import('./cloud-ide-core-workflow-registry-list.component-HrnKDaiv.mjs').then(c => c.CideCoreWorkflowRegistryListComponent),
+        loadComponent: () => import('./cloud-ide-core-workflow-registry-list.component-zwz2r0iS.mjs').then(c => c.CideCoreWorkflowRegistryListComponent),
         title: 'Workflow Registry',
         canActivate: [authGuard],
         data: {
@@ -272,10 +272,10 @@ const coreRoutes = [
 
 class CloudIdeCoreService {
     constructor() { }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CloudIdeCoreService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CloudIdeCoreService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CloudIdeCoreService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CloudIdeCoreService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CloudIdeCoreService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CloudIdeCoreService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -283,14 +283,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
         }], ctorParameters: () => [] });
 
 class CloudIdeCoreComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CloudIdeCoreComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.7", type: CloudIdeCoreComponent, isStandalone: true, selector: "cide-core", ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CloudIdeCoreComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: CloudIdeCoreComponent, isStandalone: true, selector: "cide-core", ngImport: i0, template: `
     <p>
       cloud-ide-core works!
     </p>
   `, isInline: true, styles: [""] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CloudIdeCoreComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CloudIdeCoreComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cide-core', standalone: true, imports: [], template: `
     <p>
@@ -508,10 +508,10 @@ class MenuManagementService {
         console.error('Menu Management Service Error:', errorMessage);
         return throwError(() => new Error(errorMessage));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: MenuManagementService, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: MenuManagementService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MenuManagementService, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MenuManagementService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: MenuManagementService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MenuManagementService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -668,10 +668,10 @@ class CideCoreGeneralMasterService {
         console.error('General Master Service Error:', errorMessage);
         return throwError(() => new Error(errorMessage));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCoreGeneralMasterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCoreGeneralMasterService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideCoreGeneralMasterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideCoreGeneralMasterService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCoreGeneralMasterService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideCoreGeneralMasterService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -865,10 +865,10 @@ class CideCoreGeneralMasterTypeService {
         console.error('General Master Type Service Error:', errorMessage);
         return throwError(() => new Error(errorMessage));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCoreGeneralMasterTypeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCoreGeneralMasterTypeService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideCoreGeneralMasterTypeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideCoreGeneralMasterTypeService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCoreGeneralMasterTypeService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideCoreGeneralMasterTypeService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -958,10 +958,10 @@ class CideCorePageManagementService {
         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' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideCorePageManagementService, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideCorePageManagementService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCorePageManagementService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideCorePageManagementService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -2345,10 +2345,10 @@ class MenuListComponent {
                 break;
         }
     }
-    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 with Shared Wrapper -->\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'core_menu_list' }\">\n<div class=\"tw-table tw-w-full tw-h-full\">\n\n  <!-- Quick Add Form Section -->\n  <div class=\"tw-table-row tw-h-0\">\n    <div class=\"tw-table-cell tw-px-6 tw-py-4 tw-border-b tw-border-gray-200 tw-bg-white\">\n    <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\n      <div class=\"tw-flex tw-items-center tw-space-x-3\">\n        <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\n        <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-m-0\">{{ isEditMode() ? 'Edit Menu Item' : 'Quick Add Menu Item' }}</h6>\n      </div>\n      @if (selectedParentItem()) {\n        <div class=\"tw-flex tw-items-center tw-space-x-3 tw-bg-blue-50 tw-border tw-border-blue-200 tw-px-4 tw-py-2 tw-rounded-lg\">\n          <cide-ele-icon class=\"tw-text-blue-600 tw-w-4 tw-h-4\">account_tree</cide-ele-icon>\n          <div class=\"tw-flex tw-items-center tw-space-x-2\">\n            <span class=\"tw-text-sm tw-text-blue-600 tw-font-medium\">{{ isEditMode() ? 'Parent:' : 'Creating child under:' }}</span>\n            <span class=\"tw-text-sm tw-text-blue-800 tw-font-semibold\">{{ selectedParentItem()?.syme_title }}</span>\n          </div>\n          <button \n            cideEleButton \n            variant=\"ghost\" \n            size=\"xs\" \n            type=\"button\" \n            (click)=\"clearSelectedParent()\" \n            class=\"tw-text-blue-400 hover:tw-text-blue-600\">\n            <svg class=\"tw-w-4 tw-h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\"/>\n            </svg>\n          </button>\n        </div>\n      }\n    </div>\n    \n    <form [formGroup]=\"quickAddForm\" (ngSubmit)=\"quickAddMenuItem()\">\n    <!-- First Row -->\n    <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-3 tw-mb-3\">\n      <!-- Menu Title -->\n      <div>\n        <cide-ele-input \n          id=\"syme_title\" \n          label=\"Title\" \n          formControlName=\"syme_title\"\n          size=\"sm\">\n        </cide-ele-input>\n      </div>\n      \n      <!-- Menu Type -->\n      <div>\n        <cide-ele-select \n          label=\"Type\" \n          [options]=\"menuTypeOptions()\" \n          formControlName=\"syme_type\"\n          placeholder=\"Select type\"\n          size=\"sm\"\n          (ngModelChange)=\"onMenuTypeChange()\">\n        </cide-ele-select>\n      </div>\n      \n      <!-- Path -->\n      <div>\n        <cide-ele-input \n          id=\"quickPath\" \n          type=\"text\"\n          label=\"Path\" \n          formControlName=\"syme_path\"\n          placeholder=\"/path/to/route\"\n          size=\"sm\">\n        </cide-ele-input>\n      </div>\n      \n      <!-- Icon -->\n      <div>\n        <cide-ele-input \n          id=\"quickIcon\" \n          type=\"text\"\n          label=\"Icon\" \n          formControlName=\"syme_icon\"\n          placeholder=\"Icon name\"\n          size=\"sm\">\n        </cide-ele-input>\n      </div>\n      \n      <!-- Empty div for spacing -->\n      <div></div>\n    </div>\n    \n    <!-- Second Row -->\n    <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-3 tw-items-end\">\n      <!-- Description -->\n      <div>\n        <cide-ele-textarea \n          id=\"syme_desc\" \n          label=\"Description\" \n          formControlName=\"syme_desc\"\n          placeholder=\"Menu description\"\n          rows=\"2\"\n          size=\"sm\">\n        </cide-ele-textarea>\n      </div>\n      \n      <!-- Permissions (only show for menu and title types) -->\n      @if (quickAddForm.get('syme_type')?.value === 'menu') {\n      <div>\n          <cide-ele-select \n            label=\"Permissions\" \n            [options]=\"permissionOptions()\" \n            formControlName=\"syme_permissions_id_sygms\"\n            placeholder=\"Select permissions for this menu\"\n            [multiple]=\"true\"\n            size=\"sm\">\n          </cide-ele-select>\n        </div>\n      }\n      \n      <!-- Pages (multiselect) -->\n      <div>\n        <cide-ele-select \n          label=\"Pages\" \n          [options]=\"pageOptions()\" \n          formControlName=\"syme_pages_id_sypg\"\n          placeholder=\"Select pages to connect\"\n          [multiple]=\"true\"\n          [loading]=\"pagesLoading()\"\n          [searchable]=\"true\"\n          size=\"sm\">\n        </cide-ele-select>\n      </div>\n      \n      <!-- Link -->\n      <div>\n        <cide-ele-input \n          id=\"quickLink\" \n          type=\"text\"\n          label=\"Link\" \n          formControlName=\"syme_link\"\n          placeholder=\"External link\"\n          size=\"sm\">\n        </cide-ele-input>\n      </div>\n      \n      <!-- Active Status and Action Buttons -->\n      <div class=\"tw-flex tw-flex-col tw-justify-end\">\n        <div class=\"tw-flex tw-items-center tw-space-x-3\">\n          <!-- Active Checkbox -->\n          <cide-ele-input \n            id=\"quickIsActive\"\n            type=\"checkbox\"\n            label=\"Active\"\n            formControlName=\"syme_isactive\"\n            size=\"sm\">\n          </cide-ele-input>\n          \n          <!-- Action Buttons -->\n          <button \n            cideEleButton \n            variant=\"primary\" \n            size=\"sm\" \n            type=\"submit\"\n            [disabled]=\"quickAddForm.invalid\"\n            class=\"tw-px-2 tw-py-1 tw-w-20\">\n            <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\n            {{ isEditMode() ? 'Update' : 'Add' }}\n          </button>\n          <button \n            cideEleButton \n            variant=\"outline\" \n            size=\"sm\" \n            type=\"button\"\n            (click)=\"resetQuickAddForm()\"\n            class=\"tw-px-2 tw-py-1 tw-w-16\">\n            <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">refresh</cide-ele-icon>\n            Reset\n          </button>\n        </div>\n      </div>\n    </div>\n    </form>\n    </div>\n  </div>\n\n  <!-- Main Content Area -->\n  <div class=\"tw-table-row\">\n    <div class=\"tw-table-cell tw-h-full tw-relative tw-p-0\">\n  <!-- Data Grid Component -->\n  <div class=\"tw-h-full tw-w-full tw-overflow-auto\">\n    \n    <cide-ele-data-grid \n      [config]=\"gridConfig()\" \n      [templateRenderers]=\"getTemplateRenderers()\"\n      [actionHandlers]=\"actionHandlers\"\n      [dragDropEnabled]=\"true\" \n      (gridEvent)=\"onGridEvent($event)\">\n    </cide-ele-data-grid>\n  </div>\n\n\n    </div>\n  </div>\n\n</div>\n\n<!-- \n  Angular Template References for Grid Renderers (Best Practice)\n  \n  These ng-template elements represent the Angular best practice for custom rendering.\n  They provide:\n  - Type safety with template context\n  - Component lifecycle integration\n  - Change detection optimization\n  - Proper event handling\n  - Accessibility features\n  \n  Note: Current data grid uses string renderers for compatibility.\n  Templates are maintained for future component enhancement.\n-->\n\n\n\n<!-- Menu Details Renderer Template -->\n<ng-template #menuDetailsRendererTemplate let-row=\"row\" let-value=\"value\">\n  <div class=\"tw-flex tw-items-center tw-min-w-0\">\n    <!-- Menu Icon -->\n    <div class=\"tw-flex-shrink-0\">\n      <cide-ele-icon \n        class=\"tw-text-gray-400\" \n        size=\"xs\">\n        {{ row.syme_icon || 'folder_open' }}\n      </cide-ele-icon>\n    </div>\n    \n    <!-- Menu Details -->\n    <div class=\"tw-ml-3 tw-min-w-0 tw-flex-1\">\n      <div class=\"tw-text-xs tw-font-medium tw-text-gray-900 tw-truncate\" \n           [title]=\"row.syme_title\">\n        {{ row.syme_title || 'Untitled' }}\n      </div>\n      @if (row.syme_desc) {\n        <div class=\"tw-text-xs tw-text-gray-500 tw-truncate\" \n             [title]=\"row.syme_desc\">\n          {{ row.syme_desc }}\n        </div>\n      }\n    </div>\n  </div>\n</ng-template>\n\n<!-- Menu Type Renderer Template -->\n<ng-template #menuTypeRendererTemplate let-row=\"row\" let-value=\"value\">\n  <span class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-whitespace-nowrap\"\n        [ngClass]=\"getMenuTypeClass(row.syme_type)\">\n    {{ getMenuTypeLabel(row.syme_type) }}\n  </span>\n</ng-template>\n\n<!-- Actions Dropdown Renderer Template -->\n<ng-template #actionsDropdownRendererTemplate let-row=\"row\" let-value=\"value\">\n  <cide-ele-dropdown \n    [items]=\"getDropdownItems(row)\"\n    [config]=\"{ triggerIcon: 'more_vert', triggerSize: 'sm' }\"\n    (itemClick)=\"onDropdownItemClick($event, row)\">\n  </cide-ele-dropdown>\n</ng-template>\n\n<!-- Permissions Renderer Template -->\n<ng-template #permissionsRendererTemplate let-row=\"row\" let-value=\"value\">\n  <div class=\"tw-flex tw-flex-wrap tw-gap-1 tw-max-w-full tw-items-center\">\n    @if (row.syme_type === 'menu') {\n      @if (row.syme_permissions_id_sygms && row.syme_permissions_id_sygms.length > 0) {\n        @for (permissionId of row.syme_permissions_id_sygms.slice(0, 3); track permissionId) {\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\">\n            {{ getPermissionById(permissionId)?.sygms_title || getPermissionById(permissionId)?.sygms_code || 'Unknown' }}\n          </span>\n        }\n        @if (row.syme_permissions_id_sygms.length > 3) {\n          <span \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\"\n            [title]=\"getAllPermissionNames(row.syme_permissions_id_sygms)\">\n            +{{ row.syme_permissions_id_sygms.length - 3 }} more\n          </span>\n        }\n      } @else {\n        <span class=\"tw-text-xs tw-text-gray-500 tw-h-5 tw-flex tw-items-center\">No permissions</span>\n      }\n    } @else {\n      <!-- Show N/A for module, section, and title types -->\n      <span class=\"tw-text-xs tw-text-gray-400 tw-h-5 tw-flex tw-items-center\">N/A</span>\n    }\n  </div>\n</ng-template>\n</cide-lyt-shared-wrapper>\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", "ngModel", "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 ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MenuListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", 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 with Shared Wrapper -->\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'core_menu_list' }\">\n<div class=\"tw-table tw-w-full tw-h-full\">\n\n  <!-- Quick Add Form Section -->\n  <div class=\"tw-table-row tw-h-0\">\n    <div class=\"tw-table-cell tw-px-6 tw-py-4 tw-border-b tw-border-gray-200 tw-bg-white\">\n    <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\n      <div class=\"tw-flex tw-items-center tw-space-x-3\">\n        <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\n        <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-m-0\">{{ isEditMode() ? 'Edit Menu Item' : 'Quick Add Menu Item' }}</h6>\n      </div>\n      @if (selectedParentItem()) {\n        <div class=\"tw-flex tw-items-center tw-space-x-3 tw-bg-blue-50 tw-border tw-border-blue-200 tw-px-4 tw-py-2 tw-rounded-lg\">\n          <cide-ele-icon class=\"tw-text-blue-600 tw-w-4 tw-h-4\">account_tree</cide-ele-icon>\n          <div class=\"tw-flex tw-items-center tw-space-x-2\">\n            <span class=\"tw-text-sm tw-text-blue-600 tw-font-medium\">{{ isEditMode() ? 'Parent:' : 'Creating child under:' }}</span>\n            <span class=\"tw-text-sm tw-text-blue-800 tw-font-semibold\">{{ selectedParentItem()?.syme_title }}</span>\n          </div>\n          <button \n            cideEleButton \n            variant=\"ghost\" \n            size=\"xs\" \n            type=\"button\" \n            (click)=\"clearSelectedParent()\" \n            class=\"tw-text-blue-400 hover:tw-text-blue-600\">\n            <svg class=\"tw-w-4 tw-h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\"/>\n            </svg>\n          </button>\n        </div>\n      }\n    </div>\n    \n    <form [formGroup]=\"quickAddForm\" (ngSubmit)=\"quickAddMenuItem()\">\n    <!-- First Row -->\n    <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-3 tw-mb-3\">\n      <!-- Menu Title -->\n      <div>\n        <cide-ele-input \n          id=\"syme_title\" \n          label=\"Title\" \n          formControlName=\"syme_title\"\n          size=\"sm\">\n        </cide-ele-input>\n      </div>\n      \n      <!-- Menu Type -->\n      <div>\n        <cide-ele-select \n          label=\"Type\" \n          [options]=\"menuTypeOptions()\" \n          formControlName=\"syme_type\"\n          placeholder=\"Select type\"\n          size=\"sm\"\n          (ngModelChange)=\"onMenuTypeChange()\">\n        </cide-ele-select>\n      </div>\n      \n      <!-- Path -->\n      <div>\n        <cide-ele-input \n          id=\"quickPath\" \n          type=\"text\"\n          label=\"Path\" \n          formControlName=\"syme_path\"\n          placeholder=\"/path/to/route\"\n          size=\"sm\">\n        </cide-ele-input>\n      </div>\n      \n      <!-- Icon -->\n      <div>\n        <cide-ele-input \n          id=\"quickIcon\" \n          type=\"text\"\n          label=\"Icon\" \n          formControlName=\"syme_icon\"\n          placeholder=\"Icon name\"\n          size=\"sm\">\n        </cide-ele-input>\n      </div>\n      \n      <!-- Empty div for spacing -->\n      <div></div>\n    </div>\n    \n    <!-- Second Row -->\n    <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-3 tw-items-end\">\n      <!-- Description -->\n      <div>\n        <cide-ele-textarea \n          id=\"syme_desc\" \n          label=\"Description\" \n          formControlName=\"syme_desc\"\n          placeholder=\"Menu description\"\n          rows=\"2\"\n          size=\"sm\">\n        </cide-ele-textarea>\n      </div>\n      \n      <!-- Permissions (only show for menu and title types) -->\n      @if (quickAddForm.get('syme_type')?.value === 'menu') {\n      <div>\n          <cide-ele-select \n            label=\"Permissions\" \n            [options]=\"permissionOptions()\" \n            formControlName=\"syme_permissions_id_sygms\"\n            placeholder=\"Select permissions for this menu\"\n            [multiple]=\"true\"\n            size=\"sm\">\n          </cide-ele-select>\n        </div>\n      }\n      \n      <!-- Pages (multiselect) -->\n      <div>\n        <cide-ele-select \n          label=\"Pages\" \n          [options]=\"pageOptions()\" \n          formControlName=\"syme_pages_id_sypg\"\n          placeholder=\"Select pages to connect\"\n          [multiple]=\"true\"\n          [loading]=\"pagesLoading()\"\n          [searchable]=\"true\"\n          size=\"sm\">\n        </cide-ele-select>\n      </div>\n      \n      <!-- Link -->\n      <div>\n        <cide-ele-input \n          id=\"quickLink\" \n          type=\"text\"\n          label=\"Link\" \n          formControlName=\"syme_link\"\n          placeholder=\"External link\"\n          size=\"sm\">\n        </cide-ele-input>\n      </div>\n      \n      <!-- Active Status and Action Buttons -->\n      <div class=\"tw-flex tw-flex-col tw-justify-end\">\n        <div class=\"tw-flex tw-items-center tw-space-x-3\">\n          <!-- Active Checkbox -->\n          <cide-ele-input \n            id=\"quickIsActive\"\n            type=\"checkbox\"\n            label=\"Active\"\n            formControlName=\"syme_isactive\"\n            size=\"sm\">\n          </cide-ele-input>\n          \n          <!-- Action Buttons -->\n          <button \n            cideEleButton \n            variant=\"primary\" \n            size=\"sm\" \n            type=\"submit\"\n            [disabled]=\"quickAddForm.invalid\"\n            class=\"tw-px-2 tw-py-1 tw-w-20\">\n            <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\n            {{ isEditMode() ? 'Update' : 'Add' }}\n          </button>\n          <button \n            cideEleButton \n            variant=\"outline\" \n            size=\"sm\" \n            type=\"button\"\n            (click)=\"resetQuickAddForm()\"\n            class=\"tw-px-2 tw-py-1 tw-w-16\">\n            <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">refresh</cide-ele-icon>\n            Reset\n          </button>\n        </div>\n      </div>\n    </div>\n    </form>\n    </div>\n  </div>\n\n  <!-- Main Content Area -->\n  <div class=\"tw-table-row\">\n    <div class=\"tw-table-cell tw-h-full tw-relative tw-p-0\">\n  <!-- Data Grid Component -->\n  <div class=\"tw-h-full tw-w-full tw-overflow-auto\">\n    \n    <cide-ele-data-grid \n      [config]=\"gridConfig()\" \n      [templateRenderers]=\"getTemplateRenderers()\"\n      [actionHandlers]=\"actionHandlers\"\n      [dragDropEnabled]=\"true\" \n      (gridEvent)=\"onGridEvent($event)\">\n    </cide-ele-data-grid>\n  </div>\n\n\n    </div>\n  </div>\n\n</div>\n\n<!-- \n  Angular Template References for Grid Renderers (Best Practice)\n  \n  These ng-template elements represent the Angular best practice for custom rendering.\n  They provide:\n  - Type safety with template context\n  - Component lifecycle integration\n  - Change detection optimization\n  - Proper event handling\n  - Accessibility features\n  \n  Note: Current data grid uses string renderers for compatibility.\n  Templates are maintained for future component enhancement.\n-->\n\n\n\n<!-- Menu Details Renderer Template -->\n<ng-template #menuDetailsRendererTemplate let-row=\"row\" let-value=\"value\">\n  <div class=\"tw-flex tw-items-center tw-min-w-0\">\n    <!-- Menu Icon -->\n    <div class=\"tw-flex-shrink-0\">\n      <cide-ele-icon \n        class=\"tw-text-gray-400\" \n        size=\"xs\">\n        {{ row.syme_icon || 'folder_open' }}\n      </cide-ele-icon>\n    </div>\n    \n    <!-- Menu Details -->\n    <div class=\"tw-ml-3 tw-min-w-0 tw-flex-1\">\n      <div class=\"tw-text-xs tw-font-medium tw-text-gray-900 tw-truncate\" \n           [title]=\"row.syme_title\">\n        {{ row.syme_title || 'Untitled' }}\n      </div>\n      @if (row.syme_desc) {\n        <div class=\"tw-text-xs tw-text-gray-500 tw-truncate\" \n             [title]=\"row.syme_desc\">\n          {{ row.syme_desc }}\n        </div>\n      }\n    </div>\n  </div>\n</ng-template>\n\n<!-- Menu Type Renderer Template -->\n<ng-template #menuTypeRendererTemplate let-row=\"row\" let-value=\"value\">\n  <span class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-whitespace-nowrap\"\n        [ngClass]=\"getMenuTypeClass(row.syme_type)\">\n    {{ getMenuTypeLabel(row.syme_type) }}\n  </span>\n</ng-template>\n\n<!-- Actions Dropdown Renderer Template -->\n<ng-template #actionsDropdownRendererTemplate let-row=\"row\" let-value=\"value\">\n  <cide-ele-dropdown \n    [items]=\"getDropdownItems(row)\"\n    [config]=\"{ triggerIcon: 'more_vert', triggerSize: 'sm' }\"\n    (itemClick)=\"onDropdownItemClick($event, row)\">\n  </cide-ele-dropdown>\n</ng-template>\n\n<!-- Permissions Renderer Template -->\n<ng-template #permissionsRendererTemplate let-row=\"row\" let-value=\"value\">\n  <div class=\"tw-flex tw-flex-wrap tw-gap-1 tw-max-w-full tw-items-center\">\n    @if (row.syme_type === 'menu') {\n      @if (row.syme_permissions_id_sygms && row.syme_permissions_id_sygms.length > 0) {\n        @for (permissionId of row.syme_permissions_id_sygms.slice(0, 3); track permissionId) {\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\">\n            {{ getPermissionById(permissionId)?.sygms_title || getPermissionById(permissionId)?.sygms_code || 'Unknown' }}\n          </span>\n        }\n        @if (row.syme_permissions_id_sygms.length > 3) {\n          <span \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\"\n            [title]=\"getAllPermissionNames(row.syme_permissions_id_sygms)\">\n            +{{ row.syme_permissions_id_sygms.length - 3 }} more\n          </span>\n        }\n      } @else {\n        <span class=\"tw-text-xs tw-text-gray-500 tw-h-5 tw-flex tw-items-center\">No permissions</span>\n      }\n    } @else {\n      <!-- Show N/A for module, section, and title types -->\n      <span class=\"tw-text-xs tw-text-gray-400 tw-h-5 tw-flex tw-items-center\">N/A</span>\n    }\n  </div>\n</ng-template>\n</cide-lyt-shared-wrapper>\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", "ngModel", "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: MenuListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MenuListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cide-core-app-menu-list', standalone: true, imports: [
                         CommonModule,
@@ -2363,7 +2363,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                         CideEleDropdownComponent,
                         CideLytSharedWrapperComponent
                     ], template: "<!-- Menu List with Shared Wrapper -->\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'core_menu_list' }\">\n<div class=\"tw-table tw-w-full tw-h-full\">\n\n  <!-- Quick Add Form Section -->\n  <div class=\"tw-table-row tw-h-0\">\n    <div class=\"tw-table-cell tw-px-6 tw-py-4 tw-border-b tw-border-gray-200 tw-bg-white\">\n    <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\n      <div class=\"tw-flex tw-items-center tw-space-x-3\">\n        <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\n        <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-m-0\">{{ isEditMode() ? 'Edit Menu Item' : 'Quick Add Menu Item' }}</h6>\n      </div>\n      @if (selectedParentItem()) {\n        <div class=\"tw-flex tw-items-center tw-space-x-3 tw-bg-blue-50 tw-border tw-border-blue-200 tw-px-4 tw-py-2 tw-rounded-lg\">\n          <cide-ele-icon class=\"tw-text-blue-600 tw-w-4 tw-h-4\">account_tree</cide-ele-icon>\n          <div class=\"tw-flex tw-items-center tw-space-x-2\">\n            <span class=\"tw-text-sm tw-text-blue-600 tw-font-medium\">{{ isEditMode() ? 'Parent:' : 'Creating child under:' }}</span>\n            <span class=\"tw-text-sm tw-text-blue-800 tw-font-semibold\">{{ selectedParentItem()?.syme_title }}</span>\n          </div>\n          <button \n            cideEleButton \n            variant=\"ghost\" \n            size=\"xs\" \n            type=\"button\" \n            (click)=\"clearSelectedParent()\" \n            class=\"tw-text-blue-400 hover:tw-text-blue-600\">\n            <svg class=\"tw-w-4 tw-h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\"/>\n            </svg>\n          </button>\n        </div>\n      }\n    </div>\n    \n    <form [formGroup]=\"quickAddForm\" (ngSubmit)=\"quickAddMenuItem()\">\n    <!-- First Row -->\n    <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-3 tw-mb-3\">\n      <!-- Menu Title -->\n      <div>\n        <cide-ele-input \n          id=\"syme_title\" \n          label=\"Title\" \n          formControlName=\"syme_title\"\n          size=\"sm\">\n        </cide-ele-input>\n      </div>\n      \n      <!-- Menu Type -->\n      <div>\n        <cide-ele-select \n          label=\"Type\" \n          [options]=\"menuTypeOptions()\" \n          formControlName=\"syme_type\"\n          placeholder=\"Select type\"\n          size=\"sm\"\n          (ngModelChange)=\"onMenuTypeChange()\">\n        </cide-ele-select>\n      </div>\n      \n      <!-- Path -->\n      <div>\n        <cide-ele-input \n          id=\"quickPath\" \n          type=\"text\"\n          label=\"Path\" \n          formControlName=\"syme_path\"\n          placeholder=\"/path/to/route\"\n          size=\"sm\">\n        </cide-ele-input>\n      </div>\n      \n      <!-- Icon -->\n      <div>\n        <cide-ele-input \n          id=\"quickIcon\" \n          type=\"text\"\n          label=\"Icon\" \n          formControlName=\"syme_icon\"\n          placeholder=\"Icon name\"\n          size=\"sm\">\n        </cide-ele-input>\n      </div>\n      \n      <!-- Empty div for spacing -->\n      <div></div>\n    </div>\n    \n    <!-- Second Row -->\n    <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-3 tw-items-end\">\n      <!-- Description -->\n      <div>\n        <cide-ele-textarea \n          id=\"syme_desc\" \n          label=\"Description\" \n          formControlName=\"syme_desc\"\n          placeholder=\"Menu description\"\n          rows=\"2\"\n          size=\"sm\">\n        </cide-ele-textarea>\n      </div>\n      \n      <!-- Permissions (only show for menu and title types) -->\n      @if (quickAddForm.get('syme_type')?.value === 'menu') {\n      <div>\n          <cide-ele-select \n            label=\"Permissions\" \n            [options]=\"permissionOptions()\" \n            formControlName=\"syme_permissions_id_sygms\"\n            placeholder=\"Select permissions for this menu\"\n            [multiple]=\"true\"\n            size=\"sm\">\n          </cide-ele-select>\n        </div>\n      }\n      \n      <!-- Pages (multiselect) -->\n      <div>\n        <cide-ele-select \n          label=\"Pages\" \n          [options]=\"pageOptions()\" \n          formControlName=\"syme_pages_id_sypg\"\n          placeholder=\"Select pages to connect\"\n          [multiple]=\"true\"\n          [loading]=\"pagesLoading()\"\n          [searchable]=\"true\"\n          size=\"sm\">\n        </cide-ele-select>\n      </div>\n      \n      <!-- Link -->\n      <div>\n        <cide-ele-input \n          id=\"quickLink\" \n          type=\"text\"\n          label=\"Link\" \n          formControlName=\"syme_link\"\n          placeholder=\"External link\"\n          size=\"sm\">\n        </cide-ele-input>\n      </div>\n      \n      <!-- Active Status and Action Buttons -->\n      <div class=\"tw-flex tw-flex-col tw-justify-end\">\n        <div class=\"tw-flex tw-items-center tw-space-x-3\">\n          <!-- Active Checkbox -->\n          <cide-ele-input \n            id=\"quickIsActive\"\n            type=\"checkbox\"\n            label=\"Active\"\n            formControlName=\"syme_isactive\"\n            size=\"sm\">\n          </cide-ele-input>\n          \n          <!-- Action Buttons -->\n          <button \n            cideEleButton \n            variant=\"primary\" \n            size=\"sm\" \n            type=\"submit\"\n            [disabled]=\"quickAddForm.invalid\"\n            class=\"tw-px-2 tw-py-1 tw-w-20\">\n            <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\n            {{ isEditMode() ? 'Update' : 'Add' }}\n          </button>\n          <button \n            cideEleButton \n            variant=\"outline\" \n            size=\"sm\" \n            type=\"button\"\n            (click)=\"resetQuickAddForm()\"\n            class=\"tw-px-2 tw-py-1 tw-w-16\">\n            <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">refresh</cide-ele-icon>\n            Reset\n          </button>\n        </div>\n      </div>\n    </div>\n    </form>\n    </div>\n  </div>\n\n  <!-- Main Content Area -->\n  <div class=\"tw-table-row\">\n    <div class=\"tw-table-cell tw-h-full tw-relative tw-p-0\">\n  <!-- Data Grid Component -->\n  <div class=\"tw-h-full tw-w-full tw-overflow-auto\">\n    \n    <cide-ele-data-grid \n      [config]=\"gridConfig()\" \n      [templateRenderers]=\"getTemplateRenderers()\"\n      [actionHandlers]=\"actionHandlers\"\n      [dragDropEnabled]=\"true\" \n      (gridEvent)=\"onGridEvent($event)\">\n    </cide-ele-data-grid>\n  </div>\n\n\n    </div>\n  </div>\n\n</div>\n\n<!-- \n  Angular Template References for Grid Renderers (Best Practice)\n  \n  These ng-template elements represent the Angular best practice for custom rendering.\n  They provide:\n  - Type safety with template context\n  - Component lifecycle integration\n  - Change detection optimization\n  - Proper event handling\n  - Accessibility features\n  \n  Note: Current data grid uses string renderers for compatibility.\n  Templates are maintained for future component enhancement.\n-->\n\n\n\n<!-- Menu Details Renderer Template -->\n<ng-template #menuDetailsRendererTemplate let-row=\"row\" let-value=\"value\">\n  <div class=\"tw-flex tw-items-center tw-min-w-0\">\n    <!-- Menu Icon -->\n    <div class=\"tw-flex-shrink-0\">\n      <cide-ele-icon \n        class=\"tw-text-gray-400\" \n        size=\"xs\">\n        {{ row.syme_icon || 'folder_open' }}\n      </cide-ele-icon>\n    </div>\n    \n    <!-- Menu Details -->\n    <div class=\"tw-ml-3 tw-min-w-0 tw-flex-1\">\n      <div class=\"tw-text-xs tw-font-medium tw-text-gray-900 tw-truncate\" \n           [title]=\"row.syme_title\">\n        {{ row.syme_title || 'Untitled' }}\n      </div>\n      @if (row.syme_desc) {\n        <div class=\"tw-text-xs tw-text-gray-500 tw-truncate\" \n             [title]=\"row.syme_desc\">\n          {{ row.syme_desc }}\n        </div>\n      }\n    </div>\n  </div>\n</ng-template>\n\n<!-- Menu Type Renderer Template -->\n<ng-template #menuTypeRendererTemplate let-row=\"row\" let-value=\"value\">\n  <span class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-whitespace-nowrap\"\n        [ngClass]=\"getMenuTypeClass(row.syme_type)\">\n    {{ getMenuTypeLabel(row.syme_type) }}\n  </span>\n</ng-template>\n\n<!-- Actions Dropdown Renderer Template -->\n<ng-template #actionsDropdownRendererTemplate let-row=\"row\" let-value=\"value\">\n  <cide-ele-dropdown \n    [items]=\"getDropdownItems(row)\"\n    [config]=\"{ triggerIcon: 'more_vert', triggerSize: 'sm' }\"\n    (itemClick)=\"onDropdownItemClick($event, row)\">\n  </cide-ele-dropdown>\n</ng-template>\n\n<!-- Permissions Renderer Template -->\n<ng-template #permissionsRendererTemplate let-row=\"row\" let-value=\"value\">\n  <div class=\"tw-flex tw-flex-wrap tw-gap-1 tw-max-w-full tw-items-center\">\n    @if (row.syme_type === 'menu') {\n      @if (row.syme_permissions_id_sygms && row.syme_permissions_id_sygms.length > 0) {\n        @for (permissionId of row.syme_permissions_id_sygms.slice(0, 3); track permissionId) {\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\">\n            {{ getPermissionById(permissionId)?.sygms_title || getPermissionById(permissionId)?.sygms_code || 'Unknown' }}\n          </span>\n        }\n        @if (row.syme_permissions_id_sygms.length > 3) {\n          <span \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\"\n            [title]=\"getAllPermissionNames(row.syme_permissions_id_sygms)\">\n            +{{ row.syme_permissions_id_sygms.length - 3 }} more\n          </span>\n        }\n      } @else {\n        <span class=\"tw-text-xs tw-text-gray-500 tw-h-5 tw-flex tw-items-center\">No permissions</span>\n      }\n    } @else {\n      <!-- Show N/A for module, section, and title types -->\n      <span class=\"tw-text-xs tw-text-gray-400 tw-h-5 tw-flex tw-items-center\">N/A</span>\n    }\n  </div>\n</ng-template>\n</cide-lyt-shared-wrapper>\n" }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { menuDetailsRendererTemplate: [{ type: i0.ViewChild, args: ['menuDetailsRendererTemplate', { isSignal: true }] }], menuTypeRendererTemplate: [{ type: i0.ViewChild, args: ['menuTypeRendererTemplate', { isSignal: true }] }], permissionsRendererTemplate: [{ type: i0.ViewChild, args: ['permissionsRendererTemplate', { isSignal: true }] }], actionsDropdownRendererTemplate: [{ type: i0.ViewChild, args: ['actionsDropdownRendererTemplate', { isSignal: true }] }] } });
 
 var menuList_component = /*#__PURE__*/Object.freeze({
     __proto__: null,
@@ -2547,10 +2547,10 @@ class CideCoreDepartmentManagementService {
         console.error('Department Management Service Error:', errorMessage);
         return throwError(() => new Error(errorMessage));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCoreDepartmentManagementService, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCoreDepartmentManagementService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideCoreDepartmentManagementService, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideCoreDepartmentManagementService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCoreDepartmentManagementService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideCoreDepartmentManagementService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -2566,6 +2566,7 @@ class CideCoreDepartmentListComponent {
     router = inject(Router);
     confirmationService = inject(ConfirmationService);
     notificationService = inject(NotificationService);
+    rightsService = inject(RightsService);
     // Modern ViewChild signals for template renderers (Angular 20 approach)
     departmentDetailsRendererTemplate = viewChild.required('departmentDetailsRendererTemplate');
     departmentStatusRendererTemplate = viewChild.required('departmentStatusRendererTemplate');
@@ -2732,6 +2733,11 @@ class CideCoreDepartmentListComponent {
     totalPages = computed(() => Math.ceil(this.totalItems() / this.pageSize()), ...(ngDevMode ? [{ debugName: "totalPages" }] : []));
     hasNextPage = computed(() => this.currentPage() < this.totalPages(), ...(ngDevMode ? [{ debugName: "hasNextPage" }] : []));
     hasPreviousPage = computed(() => this.currentPage() > 1, ...(ngDevMode ? [{ debugName: "hasPreviousPage" }] : []));
+    // Rights computed signals
+    canCreate = computed(() => this.rightsService.hasRight('CREATE'), ...(ngDevMode ? [{ debugName: "canCreate" }] : []));
+    canEdit = computed(() => this.rightsService.hasRight('EDIT'), ...(ngDevMode ? [{ debugName: "canEdit" }] : []));
+    canDelete = computed(() => this.rightsService.hasRight('DELETE'), ...(ngDevMode ? [{ debugName: "canDelete" }] : []));
+    canView = computed(() => this.rightsService.hasRight('VIEW'), ...(ngDevMode ? [{ debugName: "canView" }] : []));
     // Modern constructor with effects for initialization
     constructor() {
         this.initializeComponent();
@@ -2744,6 +2750,8 @@ class CideCoreDepartmentListComponent {
      */
     initializeComponent() {
         console.log('CideCoreDepartmentListComponent initialized with modern Angular patterns');
+        // Initialize rights for department management
+        this.rightsService.initializeRights('core_department_list');
         this.loadDepartments();
         this.setupEventListeners();
         this.exposeGlobalFunctions();
@@ -3232,40 +3240,48 @@ class CideCoreDepartmentListComponent {
      * Generate dropdown items for department actions
      */
     getDropdownItems(row) {
-        return [
-            {
+        const items = [];
+        if (this.canEdit()) {
+            items.push({
                 id: 'edit',
                 label: 'Edit',
                 icon: 'edit',
                 iconColor: 'tw-text-gray-400',
                 textColor: 'tw-text-gray-700',
                 hoverBgColor: 'hover:tw-bg-gray-100'
-            },
-            {
+            });
+        }
+        if (this.canCreate()) {
+            items.push({
                 id: 'addChild',
                 label: 'Add Child',
                 icon: 'add',
                 iconColor: 'tw-text-blue-400',
                 textColor: 'tw-text-blue-600',
                 hoverBgColor: 'hover:tw-bg-blue-50'
-            },
-            {
+            });
+        }
+        if (this.canEdit()) {
+            items.push({
                 id: 'toggle',
                 label: row.sydept_isactive ? 'Deactivate' : 'Activate',
                 icon: 'power_settings_new',
-                iconColor: 'tw-text-gray-400',
-                textColor: 'tw-text-gray-700',
-                hoverBgColor: 'hover:tw-bg-gray-100'
-            },
-            {
+                iconColor: 'tw-text-orange-400',
+                textColor: 'tw-text-orange-600',
+                hoverBgColor: 'hover:tw-bg-orange-50'
+            });
+        }
+        if (this.canDelete()) {
+            items.push({
                 id: 'delete',
                 label: 'Delete',
                 icon: 'delete',
                 iconColor: 'tw-text-red-400',
                 textColor: 'tw-text-red-600',
                 hoverBgColor: 'hover:tw-bg-red-50'
-            }
-        ];
+            });
+        }
+        return items;
     }
     /**
      * Handle dropdown item click
@@ -3303,10 +3319,10 @@ class CideCoreDepartmentListComponent {
     trackByItemId(index, item) {
         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 -->\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'core_department_list' }\">\n  <div class=\"tw-table tw-w-full tw-h-full\">\n\n<!-- Global Notifications -->\n<cide-ele-global-notifications></cide-ele-global-notifications>\n\n  <!-- Quick Add Form Section -->\n  <div class=\"tw-table-row tw-h-0\">\n    <div class=\"tw-table-cell tw-px-6 tw-py-4 tw-border-b tw-border-gray-200 tw-bg-white\">\n    <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-0\">\n      <div class=\"tw-flex tw-items-center tw-space-x-3 tw-mb-3\">\n        <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\n        <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-m-0\">{{ isEditMode() ? 'Edit Department' : 'Quick Add Department' }}</h6>\n      </div>\n      @if (selectedParentDepartment()) {\n        <div class=\"tw-flex tw-items-center tw-space-x-3 tw-bg-blue-50 tw-border tw-border-blue-200 tw-px-4 tw-py-1 tw-rounded-lg\">\n          <cide-ele-icon class=\"tw-text-blue-600 tw-w-4 tw-h-4\">account_tree</cide-ele-icon>\n          <div class=\"tw-flex tw-items-center tw-space-x-2\">\n            <span class=\"tw-text-sm tw-text-blue-600 tw-font-medium\">{{ isEditMode() ? 'Parent:' : 'Creating child under:' }}</span>\n            <span class=\"tw-text-sm tw-text-blue-800 tw-font-semibold\">{{ selectedParentDepartment()?.sydept_name }}</span>\n          </div>\n          <button \n            cideEleButton \n            variant=\"ghost\" \n            size=\"xs\" \n            type=\"button\" \n            (click)=\"clearSelectedParent()\" \n            class=\"tw-text-blue-400 hover:tw-text-blue-600\">\n            <svg class=\"tw-w-4 tw-h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\"/>\n            </svg>\n          </button>\n        </div>\n      }\n    </div>\n    \n    <form [formGroup]=\"quickAddForm\" (ngSubmit)=\"quickAddDepartment()\">\n    <!-- First Row -->\n    <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-3 tw-mb-3\">\n      <!-- Department Code -->\n      <div>\n        <cide-ele-input \n          id=\"sydept_code\" \n          label=\"Code\" \n          formControlName=\"sydept_code\"\n          placeholder=\"DEPT001\"\n          size=\"sm\">\n        </cide-ele-input>\n      </div>\n      \n      <!-- Department Name -->\n      <div>\n        <cide-ele-input \n          id=\"sydept_name\" \n          label=\"Name\" \n          formControlName=\"sydept_name\"\n          placeholder=\"Department name\"\n          size=\"sm\">\n        </cide-ele-input>\n      </div>\n      \n\n      \n      <!-- Active Status -->\n      <div class=\"tw-flex tw-flex-col tw-justify-end\">\n        <cide-ele-input \n          id=\"sydept_isactive\"\n          type=\"checkbox\"\n          label=\"Active\"\n          formControlName=\"sydept_isactive\"\n          size=\"sm\">\n        </cide-ele-input>\n      </div>\n    </div>\n    \n    <!-- Second Row -->\n    <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-3 tw-items-end\">\n      <!-- Description -->\n      <div>\n        <cide-ele-textarea \n          id=\"sydept_description\" \n          label=\"Description\" \n          formControlName=\"sydept_description\"\n          placeholder=\"Department description\"\n          rows=\"2\"\n          size=\"sm\">\n        </cide-ele-textarea>\n      </div>\n      \n\n      \n      <!-- Action Buttons -->\n      <div class=\"tw-flex tw-flex-col tw-justify-end\">\n        <div class=\"tw-flex tw-space-x-2\">\n          <button \n            cideEleButton \n            variant=\"primary\" \n            size=\"sm\" \n            type=\"submit\"\n            [disabled]=\"quickAddForm.invalid\"\n            class=\"tw-px-2 tw-py-1 tw-w-20\">\n            <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\n            {{ isEditMode() ? 'Update' : 'Add' }}\n          </button>\n          <button \n            cideEleButton \n            variant=\"outline\" \n            size=\"sm\" \n            type=\"button\"\n            (click)=\"resetQuickAddForm()\"\n            class=\"tw-px-2 tw-py-1 tw-w-16\">\n            <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">refresh</cide-ele-icon>\n            Reset\n          </button>\n        </div>\n      </div>\n    </div>\n    </form>\n    </div>\n  </div>\n\n  <!-- Header Section with Filters -->\n  <div class=\"tw-table-row tw-h-0\">\n    <div class=\"tw-table-cell tw-px-6 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\n    <div\n      class=\"tw-flex tw-flex-col sm:tw-flex-row tw-justify-between tw-items-start sm:tw-items-center tw-space-y-3 sm:tw-space-y-0\">\n\n      <!-- Actions -->\n      <div\n        class=\"tw-flex tw-flex-col sm:tw-flex-row tw-items-start sm:tw-items-center tw-space-y-3 sm:tw-space-y-0 sm:tw-space-x-3\">\n        <!-- Search functionality is handled by the data grid -->\n      </div>\n    </div>\n\n    <!-- Error Message -->\n    @if (error()) {\n    <div class=\"tw-mt-4 tw-p-4 tw-bg-red-50 tw-border tw-border-red-200 tw-rounded-md\">\n      <div class=\"tw-flex tw-items-start\">\n        <cide-ele-icon name=\"error\" class=\"tw-text-red-400 tw-w-5 tw-h-5 tw-mt-0.5 tw-flex-shrink-0\"></cide-ele-icon>\n        <div class=\"tw-ml-3\">\n          <h3 class=\"tw-text-sm tw-font-medium tw-text-red-800 tw-m-0\">Error</h3>\n          <p class=\"tw-text-sm tw-text-red-700 tw-mt-1 tw-m-0\">{{ error() }}</p>\n        </div>\n      </div>\n    </div>\n    }\n    </div>\n  </div>\n\n  <!-- Main Content Area -->\n  <div class=\"tw-table-row\">\n    <div class=\"tw-table-cell tw-h-full tw-relative\">\n  \n  <!-- Data Grid Component -->\n  <div class=\"tw-h-full tw-overflow-auto\">\n    \n    <cide-ele-data-grid \n      [config]=\"gridConfig()\" \n      [templateRenderers]=\"getTemplateRenderers()\"\n      [actionHandlers]=\"actionHandlers\"\n      [serverSidePagination]=\"true\" \n      [totalServerItems]=\"totalItems()\" \n      [currentServerPage]=\"currentPage()\"\n      [currentServerPageSize]=\"pageSize()\" \n      (gridEvent)=\"onGridEvent($event)\">\n    </cide-ele-data-grid>\n  </div>\n\n    </div>\n  </div>\n\n</div>\n\n<!-- Department Details Renderer Template -->\n<ng-template #departmentDetailsRendererTemplate let-row=\"row\" let-value=\"value\">\n  <div class=\"tw-flex tw-items-center tw-min-w-0\">\n    <!-- Department Icon -->\n    <div class=\"tw-flex-shrink-0\">\n      <cide-ele-icon \n        class=\"tw-text-gray-400\" \n        size=\"xs\">\n        business\n      </cide-ele-icon>\n    </div>\n    \n    <!-- Department Details -->\n    <div class=\"tw-ml-3 tw-min-w-0 tw-flex-1\">\n      <div class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-truncate\" \n           [title]=\"row.sydept_name\">\n        {{ row.sydept_name || 'Untitled' }}\n      </div>\n      @if (row.sydept_description) {\n        <div class=\"tw-text-xs tw-text-gray-500 tw-truncate\" \n             [title]=\"row.sydept_description\">\n          {{ row.sydept_description }}\n        </div>\n      }\n    </div>\n  </div>\n</ng-template>\n\n<!-- Department Status Renderer Template -->\n<ng-template #departmentStatusRendererTemplate let-row=\"row\" let-value=\"value\">\n  <span class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-whitespace-nowrap\"\n        [ngClass]=\"getStatusClass(row.sydept_isactive)\">\n    {{ getStatusDisplay(row.sydept_isactive) }}\n  </span>\n</ng-template>\n\n<!-- Actions Dropdown Renderer Template -->\n<ng-template #actionsDropdownRendererTemplate let-row=\"row\" let-value=\"value\">\n  <cide-ele-dropdown \n    [items]=\"getDropdownItems(row)\"\n    [config]=\"{ triggerIcon: 'more_vert', triggerSize: 'sm' }\"\n    (itemClick)=\"onDropdownItemClick($event, row)\">\n  </cide-ele-dropdown>\n</ng-template>\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"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideCoreDepartmentListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", 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 -->\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'core_department_list' }\">\n  <div class=\"tw-table tw-w-full tw-h-full\">\n\n    <!-- Global Notifications -->\n    <cide-ele-global-notifications></cide-ele-global-notifications>\n\n    <!-- Quick Add Form Section - Show if user has VIEW, CREATE, or EDIT rights -->\n    @if (canView() || canCreate() || canEdit()) {\n    <div class=\"tw-table-row tw-h-0\">\n      <div class=\"tw-table-cell tw-px-6 tw-py-4 tw-border-b tw-border-gray-200 tw-bg-white\">\n        <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-0\">\n          <div class=\"tw-flex tw-items-center tw-space-x-3 tw-mb-3\">\n            <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\n            <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-m-0\">{{ isEditMode() ? 'Edit Department' : 'Quick\n              Add Department' }}</h6>\n          </div>\n          @if (selectedParentDepartment()) {\n          <div\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\">\n            <cide-ele-icon class=\"tw-text-blue-600 tw-w-4 tw-h-4\">account_tree</cide-ele-icon>\n            <div class=\"tw-flex tw-items-center tw-space-x-2\">\n              <span class=\"tw-text-sm tw-text-blue-600 tw-font-medium\">{{ isEditMode() ? 'Parent:' : 'Creating child\n                under:' }}</span>\n              <span class=\"tw-text-sm tw-text-blue-800 tw-font-semibold\">{{ selectedParentDepartment()?.sydept_name\n                }}</span>\n            </div>\n            <button cideEleButton variant=\"ghost\" size=\"xs\" type=\"button\" (click)=\"clearSelectedParent()\"\n              [disabled]=\"canView() && !canCreate() && !canEdit()\" class=\"tw-text-blue-400 hover:tw-text-blue-600\">\n              <svg class=\"tw-w-4 tw-h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\" />\n              </svg>\n            </button>\n          </div>\n          }\n        </div>\n\n        <form [formGroup]=\"quickAddForm\" (ngSubmit)=\"quickAddDepartment()\">\n          <!-- First Row -->\n          <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-3 tw-mb-3\">\n            <!-- Department Code -->\n            <div>\n              <cide-ele-input id=\"sydept_code\" label=\"Code\" formControlName=\"sydept_code\" placeholder=\"DEPT001\"\n                [disabled]=\"canView() && !canCreate() && !canEdit()\" size=\"sm\">\n              </cide-ele-input>\n            </div>\n\n            <!-- Department Name -->\n            <div>\n              <cide-ele-input id=\"sydept_name\" label=\"Name\" formControlName=\"sydept_name\" placeholder=\"Department name\"\n                [disabled]=\"canView() && !canCreate() && !canEdit()\" size=\"sm\">\n              </cide-ele-input>\n            </div>\n\n\n\n            <!-- Active Status -->\n            <div class=\"tw-flex tw-flex-col tw-justify-end\">\n              <cide-ele-input id=\"sydept_isactive\" type=\"checkbox\" label=\"Active\" formControlName=\"sydept_isactive\"\n                [disabled]=\"canView() && !canCreate() && !canEdit()\" size=\"sm\">\n              </cide-ele-input>\n            </div>\n          </div>\n\n          <!-- Second Row -->\n          <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-3 tw-items-end\">\n            <!-- Description -->\n            <div>\n              <cide-ele-textarea id=\"sydept_description\" label=\"Description\" formControlName=\"sydept_description\"\n                placeholder=\"Department description\" rows=\"2\" [disabled]=\"canView() && !canCreate() && !canEdit()\"\n                size=\"sm\">\n              </cide-ele-textarea>\n            </div>\n\n\n\n            <!-- Action Buttons -->\n            @if (canCreate() || canEdit()) {\n            <div class=\"tw-flex tw-flex-col tw-justify-end\">\n              <div class=\"tw-flex tw-space-x-2\">\n                @if (isEditMode() ? canEdit() : canCreate()) {\n                <button cideEleButton variant=\"primary\" size=\"sm\" type=\"submit\" [disabled]=\"quickAddForm.invalid\"\n                  class=\"tw-px-2 tw-py-1 tw-w-20\">\n                  <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">{{ isEditMode() ? 'edit' : 'add'\n                    }}</cide-ele-icon>\n                  {{ isEditMode() ? 'Update' : 'Add' }}\n                </button>\n                }\n                <button cideEleButton variant=\"outline\" size=\"sm\" type=\"button\" (click)=\"resetQuickAddForm()\"\n                  [disabled]=\"canView() && !canCreate() && !canEdit()\" class=\"tw-px-2 tw-py-1 tw-w-16\">\n                  <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">refresh</cide-ele-icon>\n                  Reset\n                </button>\n              </div>\n            </div>\n            }\n          </div>\n        </form>\n      </div>\n    </div>\n    }\n\n    <!-- Header Section with Filters -->\n\n\n    <!-- Main Content Area -->\n    <div class=\"tw-table-row\">\n      <div class=\"tw-table-cell tw-h-full tw-relative\">\n\n        <!-- Data Grid Component -->\n        <div class=\"tw-h-full tw-overflow-auto\">\n\n          <cide-ele-data-grid [config]=\"gridConfig()\" [templateRenderers]=\"getTemplateRenderers()\"\n            [actionHandlers]=\"actionHandlers\" [serverSidePagination]=\"true\" [totalServerItems]=\"totalItems()\"\n            [currentServerPage]=\"currentPage()\" [currentServerPageSize]=\"pageSize()\" (gridEvent)=\"onGridEvent($event)\">\n          </cide-ele-data-grid>\n        </div>\n\n      </div>\n    </div>\n\n  </div>\n\n  <!-- Department Details Renderer Template -->\n  <ng-template #departmentDetailsRendererTemplate let-row=\"row\" let-value=\"value\">\n    <div class=\"tw-flex tw-items-center tw-min-w-0\">\n      <!-- Department Icon -->\n      <div class=\"tw-flex-shrink-0\">\n        <cide-ele-icon class=\"tw-text-gray-400\" size=\"xs\">\n          business\n        </cide-ele-icon>\n      </div>\n\n      <!-- Department Details -->\n      <div class=\"tw-ml-3 tw-min-w-0 tw-flex-1\">\n        <div class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-truncate\" [title]=\"row.sydept_name\">\n          {{ row.sydept_name || 'Untitled' }}\n        </div>\n        @if (row.sydept_description) {\n        <div class=\"tw-text-xs tw-text-gray-500 tw-truncate\" [title]=\"row.sydept_description\">\n          {{ row.sydept_description }}\n        </div>\n        }\n      </div>\n    </div>\n  </ng-template>\n\n  <!-- Department Status Renderer Template -->\n  <ng-template #departmentStatusRendererTemplate let-row=\"row\" let-value=\"value\">\n    <span\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\"\n      [ngClass]=\"getStatusClass(row.sydept_isactive)\">\n      {{ getStatusDisplay(row.sydept_isactive) }}\n    </span>\n  </ng-template>\n\n  <!-- Actions Dropdown Renderer Template -->\n  <ng-template #actionsDropdownRendererTemplate let-row=\"row\" let-value=\"value\">\n    <cide-ele-dropdown [items]=\"getDropdownItems(row)\" [config]=\"{ triggerIcon: 'more_vert', triggerSize: 'sm' }\"\n      (itemClick)=\"onDropdownItemClick($event, row)\">\n    </cide-ele-dropdown>\n  </ng-template>\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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideCoreDepartmentListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cide-core-department-list', standalone: true, imports: [
                         CommonModule,
@@ -3320,8 +3336,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                         CideEleDropdownComponent,
                         CideEleGlobalNotificationsComponent,
                         CideLytSharedWrapperComponent
-                    ], template: "<!-- Department List with Shared Wrapper -->\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'core_department_list' }\">\n  <div class=\"tw-table tw-w-full tw-h-full\">\n\n<!-- Global Notifications -->\n<cide-ele-global-notifications></cide-ele-global-notifications>\n\n  <!-- Quick Add Form Section -->\n  <div class=\"tw-table-row tw-h-0\">\n    <div class=\"tw-table-cell tw-px-6 tw-py-4 tw-border-b tw-border-gray-200 tw-bg-white\">\n    <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-0\">\n      <div class=\"tw-flex tw-items-center tw-space-x-3 tw-mb-3\">\n        <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\n        <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-m-0\">{{ isEditMode() ? 'Edit Department' : 'Quick Add Department' }}</h6>\n      </div>\n      @if (selectedParentDepartment()) {\n        <div class=\"tw-flex tw-items-center tw-space-x-3 tw-bg-blue-50 tw-border tw-border-blue-200 tw-px-4 tw-py-1 tw-rounded-lg\">\n          <cide-ele-icon class=\"tw-text-blue-600 tw-w-4 tw-h-4\">account_tree</cide-ele-icon>\n          <div class=\"tw-flex tw-items-center tw-space-x-2\">\n            <span class=\"tw-text-sm tw-text-blue-600 tw-font-medium\">{{ isEditMode() ? 'Parent:' : 'Creating child under:' }}</span>\n            <span class=\"tw-text-sm tw-text-blue-800 tw-font-semibold\">{{ selectedParentDepartment()?.sydept_name }}</span>\n          </div>\n          <button \n            cideEleButton \n            variant=\"ghost\" \n            size=\"xs\" \n            type=\"button\" \n            (click)=\"clearSelectedParent()\" \n            class=\"tw-text-blue-400 hover:tw-text-blue-600\">\n            <svg class=\"tw-w-4 tw-h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\"/>\n            </svg>\n          </button>\n        </div>\n      }\n    </div>\n    \n    <form [formGroup]=\"quickAddForm\" (ngSubmit)=\"quickAddDepartment()\">\n    <!-- First Row -->\n    <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-3 tw-mb-3\">\n      <!-- Department Code -->\n      <div>\n        <cide-ele-input \n          id=\"sydept_code\" \n          label=\"Code\" \n          formControlName=\"sydept_code\"\n          placeholder=\"DEPT001\"\n          size=\"sm\">\n        </cide-ele-input>\n      </div>\n      \n      <!-- Department Name -->\n      <div>\n        <cide-ele-input \n          id=\"sydept_name\" \n          label=\"Name\" \n          formControlName=\"sydept_name\"\n          placeholder=\"Department name\"\n          size=\"sm\">\n        </cide-ele-input>\n      </div>\n      \n\n      \n      <!-- Active Status -->\n      <div class=\"tw-flex tw-flex-col tw-justify-end\">\n        <cide-ele-input \n          id=\"sydept_isactive\"\n          type=\"checkbox\"\n          label=\"Active\"\n          formControlName=\"sydept_isactive\"\n          size=\"sm\">\n        </cide-ele-input>\n      </div>\n    </div>\n    \n    <!-- Second Row -->\n    <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-3 tw-items-end\">\n      <!-- Description -->\n      <div>\n        <cide-ele-textarea \n          id=\"sydept_description\" \n          label=\"Description\" \n          formControlName=\"sydept_description\"\n          placeholder=\"Department description\"\n          rows=\"2\"\n          size=\"sm\">\n        </cide-ele-textarea>\n      </div>\n      \n\n      \n      <!-- Action Buttons -->\n      <div class=\"tw-flex tw-flex-col tw-justify-end\">\n        <div class=\"tw-flex tw-space-x-2\">\n          <button \n            cideEleButton \n            variant=\"primary\" \n            size=\"sm\" \n            type=\"submit\"\n            [disabled]=\"quickAddForm.invalid\"\n            class=\"tw-px-2 tw-py-1 tw-w-20\">\n            <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\n            {{ isEditMode() ? 'Update' : 'Add' }}\n          </button>\n          <button \n            cideEleButton \n            variant=\"outline\" \n            size=\"sm\" \n            type=\"button\"\n            (click)=\"resetQuickAddForm()\"\n            class=\"tw-px-2 tw-py-1 tw-w-16\">\n            <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">refresh</cide-ele-icon>\n            Reset\n          </button>\n        </div>\n      </div>\n    </div>\n    </form>\n    </div>\n  </div>\n\n  <!-- Header Section with Filters -->\n  <div class=\"tw-table-row tw-h-0\">\n    <div class=\"tw-table-cell tw-px-6 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\n    <div\n      class=\"tw-flex tw-flex-col sm:tw-flex-row tw-justify-between tw-items-start sm:tw-items-center tw-space-y-3 sm:tw-space-y-0\">\n\n      <!-- Actions -->\n      <div\n        class=\"tw-flex tw-flex-col sm:tw-flex-row tw-items-start sm:tw-items-center tw-space-y-3 sm:tw-space-y-0 sm:tw-space-x-3\">\n        <!-- Search functionality is handled by the data grid -->\n      </div>\n    </div>\n\n    <!-- Error Message -->\n    @if (error()) {\n    <div class=\"tw-mt-4 tw-p-4 tw-bg-red-50 tw-border tw-border-red-200 tw-rounded-md\">\n      <div class=\"tw-flex tw-items-start\">\n        <cide-ele-icon name=\"error\" class=\"tw-text-red-400 tw-w-5 tw-h-5 tw-mt-0.5 tw-flex-shrink-0\"></cide-ele-icon>\n        <div class=\"tw-ml-3\">\n          <h3 class=\"tw-text-sm tw-font-medium tw-text-red-800 tw-m-0\">Error</h3>\n          <p class=\"tw-text-sm tw-text-red-700 tw-mt-1 tw-m-0\">{{ error() }}</p>\n        </div>\n      </div>\n    </div>\n    }\n    </div>\n  </div>\n\n  <!-- Main Content Area -->\n  <div class=\"tw-table-row\">\n    <div class=\"tw-table-cell tw-h-full tw-relative\">\n  \n  <!-- Data Grid Component -->\n  <div class=\"tw-h-full tw-overflow-auto\">\n    \n    <cide-ele-data-grid \n      [config]=\"gridConfig()\" \n      [templateRenderers]=\"getTemplateRenderers()\"\n      [actionHandlers]=\"actionHandlers\"\n      [serverSidePagination]=\"true\" \n      [totalServerItems]=\"totalItems()\" \n      [currentServerPage]=\"currentPage()\"\n      [currentServerPageSize]=\"pageSize()\" \n      (gridEvent)=\"onGridEvent($event)\">\n    </cide-ele-data-grid>\n  </div>\n\n    </div>\n  </div>\n\n</div>\n\n<!-- Department Details Renderer Template -->\n<ng-template #departmentDetailsRendererTemplate let-row=\"row\" let-value=\"value\">\n  <div class=\"tw-flex tw-items-center tw-min-w-0\">\n    <!-- Department Icon -->\n    <div class=\"tw-flex-shrink-0\">\n      <cide-ele-icon \n        class=\"tw-text-gray-400\" \n        size=\"xs\">\n        business\n      </cide-ele-icon>\n    </div>\n    \n    <!-- Department Details -->\n    <div class=\"tw-ml-3 tw-min-w-0 tw-flex-1\">\n      <div class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-truncate\" \n           [title]=\"row.sydept_name\">\n        {{ row.sydept_name || 'Untitled' }}\n      </div>\n      @if (row.sydept_description) {\n        <div class=\"tw-text-xs tw-text-gray-500 tw-truncate\" \n             [title]=\"row.sydept_description\">\n          {{ row.sydept_description }}\n        </div>\n      }\n    </div>\n  </div>\n</ng-template>\n\n<!-- Department Status Renderer Template -->\n<ng-template #departmentStatusRendererTemplate let-row=\"row\" let-value=\"value\">\n  <span class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-whitespace-nowrap\"\n        [ngClass]=\"getStatusClass(row.sydept_isactive)\">\n    {{ getStatusDisplay(row.sydept_isactive) }}\n  </span>\n</ng-template>\n\n<!-- Actions Dropdown Renderer Template -->\n<ng-template #actionsDropdownRendererTemplate let-row=\"row\" let-value=\"value\">\n  <cide-ele-dropdown \n    [items]=\"getDropdownItems(row)\"\n    [config]=\"{ triggerIcon: 'more_vert', triggerSize: 'sm' }\"\n    (itemClick)=\"onDropdownItemClick($event, row)\">\n  </cide-ele-dropdown>\n</ng-template>\n</cide-lyt-shared-wrapper> " }]
-        }], ctorParameters: () => [] });
+                    ], template: "<!-- Department List with Shared Wrapper -->\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'core_department_list' }\">\n  <div class=\"tw-table tw-w-full tw-h-full\">\n\n    <!-- Global Notifications -->\n    <cide-ele-global-notifications></cide-ele-global-notifications>\n\n    <!-- Quick Add Form Section - Show if user has VIEW, CREATE, or EDIT rights -->\n    @if (canView() || canCreate() || canEdit()) {\n    <div class=\"tw-table-row tw-h-0\">\n      <div class=\"tw-table-cell tw-px-6 tw-py-4 tw-border-b tw-border-gray-200 tw-bg-white\">\n        <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-0\">\n          <div class=\"tw-flex tw-items-center tw-space-x-3 tw-mb-3\">\n            <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\n            <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-m-0\">{{ isEditMode() ? 'Edit Department' : 'Quick\n              Add Department' }}</h6>\n          </div>\n          @if (selectedParentDepartment()) {\n          <div\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\">\n            <cide-ele-icon class=\"tw-text-blue-600 tw-w-4 tw-h-4\">account_tree</cide-ele-icon>\n            <div class=\"tw-flex tw-items-center tw-space-x-2\">\n              <span class=\"tw-text-sm tw-text-blue-600 tw-font-medium\">{{ isEditMode() ? 'Parent:' : 'Creating child\n                under:' }}</span>\n              <span class=\"tw-text-sm tw-text-blue-800 tw-font-semibold\">{{ selectedParentDepartment()?.sydept_name\n                }}</span>\n            </div>\n            <button cideEleButton variant=\"ghost\" size=\"xs\" type=\"button\" (click)=\"clearSelectedParent()\"\n              [disabled]=\"canView() && !canCreate() && !canEdit()\" class=\"tw-text-blue-400 hover:tw-text-blue-600\">\n              <svg class=\"tw-w-4 tw-h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\" />\n              </svg>\n            </button>\n          </div>\n          }\n        </div>\n\n        <form [formGroup]=\"quickAddForm\" (ngSubmit)=\"quickAddDepartment()\">\n          <!-- First Row -->\n          <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-3 tw-mb-3\">\n            <!-- Department Code -->\n            <div>\n              <cide-ele-input id=\"sydept_code\" label=\"Code\" formControlName=\"sydept_code\" placeholder=\"DEPT001\"\n                [disabled]=\"canView() && !canCreate() && !canEdit()\" size=\"sm\">\n              </cide-ele-input>\n            </div>\n\n            <!-- Department Name -->\n            <div>\n              <cide-ele-input id=\"sydept_name\" label=\"Name\" formControlName=\"sydept_name\" placeholder=\"Department name\"\n                [disabled]=\"canView() && !canCreate() && !canEdit()\" size=\"sm\">\n              </cide-ele-input>\n            </div>\n\n\n\n            <!-- Active Status -->\n            <div class=\"tw-flex tw-flex-col tw-justify-end\">\n              <cide-ele-input id=\"sydept_isactive\" type=\"checkbox\" label=\"Active\" formControlName=\"sydept_isactive\"\n                [disabled]=\"canView() && !canCreate() && !canEdit()\" size=\"sm\">\n              </cide-ele-input>\n            </div>\n          </div>\n\n          <!-- Second Row -->\n          <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-3 tw-items-end\">\n            <!-- Description -->\n            <div>\n              <cide-ele-textarea id=\"sydept_description\" label=\"Description\" formControlName=\"sydept_description\"\n                placeholder=\"Department description\" rows=\"2\" [disabled]=\"canView() && !canCreate() && !canEdit()\"\n                size=\"sm\">\n              </cide-ele-textarea>\n            </div>\n\n\n\n            <!-- Action Buttons -->\n            @if (canCreate() || canEdit()) {\n            <div class=\"tw-flex tw-flex-col tw-justify-end\">\n              <div class=\"tw-flex tw-space-x-2\">\n                @if (isEditMode() ? canEdit() : canCreate()) {\n                <button cideEleButton variant=\"primary\" size=\"sm\" type=\"submit\" [disabled]=\"quickAddForm.invalid\"\n                  class=\"tw-px-2 tw-py-1 tw-w-20\">\n                  <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">{{ isEditMode() ? 'edit' : 'add'\n                    }}</cide-ele-icon>\n                  {{ isEditMode() ? 'Update' : 'Add' }}\n                </button>\n                }\n                <button cideEleButton variant=\"outline\" size=\"sm\" type=\"button\" (click)=\"resetQuickAddForm()\"\n                  [disabled]=\"canView() && !canCreate() && !canEdit()\" class=\"tw-px-2 tw-py-1 tw-w-16\">\n                  <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">refresh</cide-ele-icon>\n                  Reset\n                </button>\n              </div>\n            </div>\n            }\n          </div>\n        </form>\n      </div>\n    </div>\n    }\n\n    <!-- Header Section with Filters -->\n\n\n    <!-- Main Content Area -->\n    <div class=\"tw-table-row\">\n      <div class=\"tw-table-cell tw-h-full tw-relative\">\n\n        <!-- Data Grid Component -->\n        <div class=\"tw-h-full tw-overflow-auto\">\n\n          <cide-ele-data-grid [config]=\"gridConfig()\" [templateRenderers]=\"getTemplateRenderers()\"\n            [actionHandlers]=\"actionHandlers\" [serverSidePagination]=\"true\" [totalServerItems]=\"totalItems()\"\n            [currentServerPage]=\"currentPage()\" [currentServerPageSize]=\"pageSize()\" (gridEvent)=\"onGridEvent($event)\">\n          </cide-ele-data-grid>\n        </div>\n\n      </div>\n    </div>\n\n  </div>\n\n  <!-- Department Details Renderer Template -->\n  <ng-template #departmentDetailsRendererTemplate let-row=\"row\" let-value=\"value\">\n    <div class=\"tw-flex tw-items-center tw-min-w-0\">\n      <!-- Department Icon -->\n      <div class=\"tw-flex-shrink-0\">\n        <cide-ele-icon class=\"tw-text-gray-400\" size=\"xs\">\n          business\n        </cide-ele-icon>\n      </div>\n\n      <!-- Department Details -->\n      <div class=\"tw-ml-3 tw-min-w-0 tw-flex-1\">\n        <div class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-truncate\" [title]=\"row.sydept_name\">\n          {{ row.sydept_name || 'Untitled' }}\n        </div>\n        @if (row.sydept_description) {\n        <div class=\"tw-text-xs tw-text-gray-500 tw-truncate\" [title]=\"row.sydept_description\">\n          {{ row.sydept_description }}\n        </div>\n        }\n      </div>\n    </div>\n  </ng-template>\n\n  <!-- Department Status Renderer Template -->\n  <ng-template #departmentStatusRendererTemplate let-row=\"row\" let-value=\"value\">\n    <span\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\"\n      [ngClass]=\"getStatusClass(row.sydept_isactive)\">\n      {{ getStatusDisplay(row.sydept_isactive) }}\n    </span>\n  </ng-template>\n\n  <!-- Actions Dropdown Renderer Template -->\n  <ng-template #actionsDropdownRendererTemplate let-row=\"row\" let-value=\"value\">\n    <cide-ele-dropdown [items]=\"getDropdownItems(row)\" [config]=\"{ triggerIcon: 'more_vert', triggerSize: 'sm' }\"\n      (itemClick)=\"onDropdownItemClick($event, row)\">\n    </cide-ele-dropdown>\n  </ng-template>\n</cide-lyt-shared-wrapper>" }]
+        }], ctorParameters: () => [], propDecorators: { departmentDetailsRendererTemplate: [{ type: i0.ViewChild, args: ['departmentDetailsRendererTemplate', { isSignal: true }] }], departmentStatusRendererTemplate: [{ type: i0.ViewChild, args: ['departmentStatusRendererTemplate', { isSignal: true }] }], actionsDropdownRendererTemplate: [{ type: i0.ViewChild, args: ['actionsDropdownRendererTemplate', { isSignal: true }] }] } });
 
 var departmentList_component = /*#__PURE__*/Object.freeze({
     __proto__: null,
@@ -3509,10 +3525,10 @@ class CideCoreDesignationManagementService {
         console.error('Designation Management Service Error:', errorMessage);
         return throwError(() => new Error(errorMessage));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCoreDesignationManagementService, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCoreDesignationManagementService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideCoreDesignationManagementService, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideCoreDesignationManagementService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCoreDesignationManagementService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideCoreDesignationManagementService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -3688,10 +3704,10 @@ class CideCoreGradeLevelManagementService {
         console.error('Grade Level Management Service Error:', errorMessage);
         return throwError(() => new Error(errorMessage));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCoreGradeLevelManagementService, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCoreGradeLevelManagementService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideCoreGradeLevelManagementService, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideCoreGradeLevelManagementService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCoreGradeLevelManagementService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideCoreGradeLevelManagementService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -3709,6 +3725,7 @@ class CideCoreDesignationListComponent {
     router = inject(Router);
     notificationService = inject(NotificationService);
     confirmationService = inject(ConfirmationService);
+    rightsService = inject(RightsService);
     // Modern ViewChild signals for template renderers (Angular 20 approach)
     designationDetailsRendererTemplate = viewChild.required('designationDetailsRendererTemplate');
     designationStatusRendererTemplate = viewChild.required('designationStatusRendererTemplate');
@@ -3888,6 +3905,11 @@ class CideCoreDesignationListComponent {
     totalPages = computed(() => Math.ceil(this.totalItems() / this.pageSize()), ...(ngDevMode ? [{ debugName: "totalPages" }] : []));
     hasNextPage = computed(() => this.currentPage() < this.totalPages(), ...(ngDevMode ? [{ debugName: "hasNextPage" }] : []));
     hasPreviousPage = computed(() => this.currentPage() > 1, ...(ngDevMode ? [{ debugName: "hasPreviousPage" }] : []));
+    // Rights computed signals
+    canCreate = computed(() => this.rightsService.hasRight('CREATE'), ...(ngDevMode ? [{ debugName: "canCreate" }] : []));
+    canEdit = computed(() => this.rightsService.hasRight('EDIT'), ...(ngDevMode ? [{ debugName: "canEdit" }] : []));
+    canDelete = computed(() => this.rightsService.hasRight('DELETE'), ...(ngDevMode ? [{ debugName: "canDelete" }] : []));
+    canView = computed(() => this.rightsService.hasRight('VIEW'), ...(ngDevMode ? [{ debugName: "canView" }] : []));
     // Grade level options for dropdown
     gradeLevelOptions = computed(() => {
         const options = this.gradeLevels()
@@ -3918,6 +3940,8 @@ class CideCoreDesignationListComponent {
      */
     initializeComponent() {
         console.log('CideCoreDesignationListComponent initialized with modern Angular patterns');
+        // Initialize rights for designation management
+        this.rightsService.initializeRights('core_designation_list');
         // Load departments and grade levels first for dropdown options
         this.loadDepartments();
         this.loadGradeLevels();
@@ -4962,56 +4986,64 @@ class CideCoreDesignationListComponent {
      * Generate dropdown items for designation actions
      */
     getDropdownItems(row) {
+        const items = [];
         // Handle hierarchical data structure
         if (row.type === 'department') {
-            return [
-                {
+            if (this.canCreate()) {
+                items.push({
                     id: 'addDesignation',
                     label: 'Add Designation',
                     icon: 'add',
                     iconColor: 'tw-text-blue-400',
                     textColor: 'tw-text-blue-600',
                     hoverBgColor: 'hover:tw-bg-blue-50'
-                }
-            ];
+                });
+            }
         }
         else {
             // For designations
-            return [
-                {
+            if (this.canEdit()) {
+                items.push({
                     id: 'edit',
                     label: 'Edit',
                     icon: 'edit',
                     iconColor: 'tw-text-gray-400',
                     textColor: 'tw-text-gray-700',
                     hoverBgColor: 'hover:tw-bg-gray-100'
-                },
-                {
+                });
+            }
+            if (this.canCreate()) {
+                items.push({
                     id: 'addChild',
                     label: 'Add Child',
                     icon: 'add',
                     iconColor: 'tw-text-blue-400',
                     textColor: 'tw-text-blue-600',
                     hoverBgColor: 'hover:tw-bg-blue-50'
-                },
-                {
+                });
+            }
+            if (this.canEdit()) {
+                items.push({
                     id: 'toggle',
                     label: row.status ? 'Deactivate' : 'Activate',
                     icon: 'power_settings_new',
-                    iconColor: 'tw-text-gray-400',
-                    textColor: 'tw-text-gray-700',
-                    hoverBgColor: 'hover:tw-bg-gray-100'
-                },
-                {
+                    iconColor: 'tw-text-orange-400',
+                    textColor: 'tw-text-orange-600',
+                    hoverBgColor: 'hover:tw-bg-orange-50'
+                });
+            }
+            if (this.canDelete()) {
+                items.push({
                     id: 'delete',
                     label: 'Delete',
                     icon: 'delete',
                     iconColor: 'tw-text-red-400',
                     textColor: 'tw-text-red-600',
                     hoverBgColor: 'hover:tw-bg-red-50'
-                }
-            ];
+                });
+            }
         }
+        return items;
     }
     /**
      * Handle dropdown item click
@@ -5077,10 +5109,10 @@ class CideCoreDesignationListComponent {
     trackByItemId(index, item) {
         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 -->\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'core_designation_list' }\">\n  <div class=\"tw-table tw-w-full tw-h-full\">\n\n    <!-- Quick Add Form Section -->\n    <div class=\"tw-table-row tw-h-0\">\n      <div class=\"tw-table-cell tw-px-6 tw-py-4 tw-border-b tw-border-gray-200 tw-bg-white\">\n        <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-0\">\n          <div class=\"tw-flex tw-items-center tw-space-x-3 tw-mb-3\">\n            <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\n            <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-m-0\">{{ isEditMode() ? 'Edit Designation' : 'Quick Add Designation' }}</h6>\n          </div>\n          @if (selectedParentDesignation()) {\n          <div\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\">\n            <cide-ele-icon class=\"tw-text-blue-600 tw-w-4 tw-h-4\">account_tree</cide-ele-icon>\n            <div class=\"tw-flex tw-items-center tw-space-x-2\">\n              <span class=\"tw-text-sm tw-text-blue-600 tw-font-medium\">{{ isEditMode() ? 'Parent:' : 'Creating child under:' }}</span>\n              <span class=\"tw-text-sm tw-text-blue-800 tw-font-semibold\">{{ selectedParentDesignation()?.sydsg_name\n                }}</span>\n            </div>\n            <button cideEleButton variant=\"ghost\" size=\"xs\" type=\"button\" (click)=\"clearSelectedParent()\"\n              class=\"tw-text-blue-400 hover:tw-text-blue-600\">\n              <svg class=\"tw-w-4 tw-h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\" />\n              </svg>\n            </button>\n          </div>\n          }\n          @if (selectedParentDepartment()) {\n          <div\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\">\n            <cide-ele-icon class=\"tw-text-green-600 tw-w-4 tw-h-4\">business</cide-ele-icon>\n            <div class=\"tw-flex tw-items-center tw-space-x-2\">\n              <span class=\"tw-text-sm tw-text-green-600 tw-font-medium\">{{ isEditMode() ? 'Department:' : 'Department:'\n                }}</span>\n              <span class=\"tw-text-sm tw-text-green-800 tw-font-semibold\">{{ selectedParentDepartment()?.sydept_name\n                }}</span>\n            </div>\n            <button cideEleButton variant=\"ghost\" size=\"xs\" type=\"button\" (click)=\"clearSelectedParentDepartment()\"\n              class=\"tw-text-green-400 hover:tw-text-green-600\">\n              <svg class=\"tw-w-4 tw-h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\" />\n              </svg>\n            </button>\n          </div>\n          }\n        </div>\n\n        <form [formGroup]=\"quickAddForm\" (ngSubmit)=\"quickAddDesignation()\">\n          <!-- First Row -->\n          <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-5 tw-gap-3 tw-mb-3\">\n            <!-- Designation Name -->\n            <div>\n              <cide-ele-input id=\"sydsg_name\" label=\"Name\" formControlName=\"sydsg_name\" placeholder=\"Designation name\"\n                size=\"sm\">\n              </cide-ele-input>\n            </div>\n\n            <!-- Designation Code -->\n            <div>\n              <cide-ele-input id=\"sydsg_code\" label=\"Code\" formControlName=\"sydsg_code\" placeholder=\"DESG001\"\n                size=\"sm\">\n              </cide-ele-input>\n            </div>\n            <!-- Grade Level -->\n            <div>\n              <cide-ele-select id=\"sydsg_grade_level_id_sydsgl\" label=\"Grade Level\" [options]=\"gradeLevelOptions()\"\n                formControlName=\"sydsg_grade_level_id_sydsgl\" placeholder=\"Select grade level\" size=\"sm\">\n              </cide-ele-select>\n            </div>\n\n            <!-- Department -->\n            <div>\n              <cide-ele-select id=\"sydsg_department_id_sydpt\" label=\"Department\" [options]=\"departmentOptions()\"\n                formControlName=\"sydsg_department_id_sydpt\" placeholder=\"Select department\" size=\"sm\">\n              </cide-ele-select>\n            </div>\n\n            <!-- Active Status -->\n            <div class=\"tw-flex tw-flex-col tw-justify-end\">\n              <cide-ele-input id=\"sydsg_isactive\" type=\"checkbox\" label=\"Active\" formControlName=\"sydsg_isactive\"\n                size=\"sm\">\n              </cide-ele-input>\n            </div>\n          </div>\n\n          <!-- Second Row -->\n          <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-3 tw-items-end\">\n            <!-- Description -->\n            <div>\n              <cide-ele-textarea id=\"sydsg_description\" label=\"Description\" formControlName=\"sydsg_description\"\n                placeholder=\"Designation description\" rows=\"2\" size=\"sm\">\n              </cide-ele-textarea>\n            </div>\n\n            <!-- Entity ID (Hidden) -->\n            <div class=\"tw-hidden\">\n              <cide-ele-input id=\"desg_entity_id_syen\" label=\"Entity ID\" formControlName=\"desg_entity_id_syen\"\n                placeholder=\"Entity ID\" size=\"sm\">\n              </cide-ele-input>\n            </div>\n\n            <!-- Action Buttons -->\n            <div class=\"tw-flex tw-flex-col tw-justify-end\">\n              <div class=\"tw-flex tw-space-x-2\">\n                <button cideEleButton variant=\"primary\" size=\"sm\" type=\"submit\" [disabled]=\"quickAddForm.invalid\"\n                  class=\"tw-px-2 tw-py-1 tw-w-20\">\n                  <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">{{ isEditMode() ? 'edit' : 'add'\n                    }}</cide-ele-icon>\n                  {{ isEditMode() ? 'Update' : 'Add' }}\n                </button>\n                <button cideEleButton variant=\"outline\" size=\"sm\" type=\"button\" (click)=\"resetQuickAddForm()\"\n                  class=\"tw-px-2 tw-py-1 tw-w-16\">\n                  <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">refresh</cide-ele-icon>\n                  Reset\n                </button>\n              </div>\n            </div>\n          </div>\n        </form>\n      </div>\n    </div>\n\n\n\n    <!-- Header Section with Filters -->\n    <div class=\"tw-table-row tw-h-0\">\n      <div class=\"tw-table-cell tw-px-6 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\n        <div\n          class=\"tw-flex tw-flex-col sm:tw-flex-row tw-justify-between tw-items-start sm:tw-items-center tw-space-y-3 sm:tw-space-y-0\">\n\n          <!-- Actions -->\n          <div\n            class=\"tw-flex tw-flex-col sm:tw-flex-row tw-items-start sm:tw-items-center tw-space-y-3 sm:tw-space-y-0 sm:tw-space-x-3\">\n            <!-- Search functionality is handled by the data grid -->\n          </div>\n        </div>\n\n        <!-- Error Message -->\n        @if (error()) {\n        <div class=\"tw-mt-4 tw-p-4 tw-bg-red-50 tw-border tw-border-red-200 tw-rounded-md\">\n          <div class=\"tw-flex tw-items-start\">\n            <cide-ele-icon name=\"error\"\n              class=\"tw-text-red-400 tw-w-5 tw-h-5 tw-mt-0.5 tw-flex-shrink-0\"></cide-ele-icon>\n            <div class=\"tw-ml-3\">\n              <h3 class=\"tw-text-sm tw-font-medium tw-text-red-800 tw-m-0\">Error</h3>\n              <p class=\"tw-text-sm tw-text-red-700 tw-mt-1 tw-m-0\">{{ error() }}</p>\n            </div>\n          </div>\n        </div>\n        }\n      </div>\n    </div>\n\n    <!-- Main Content Area -->\n    <div class=\"tw-table-row\">\n      <div class=\"tw-table-cell tw-h-full tw-relative\">\n\n        <!-- Data Grid Component -->\n        <div class=\"tw-h-full tw-overflow-auto\">\n\n          <cide-ele-data-grid [config]=\"gridConfig()\" [templateRenderers]=\"getTemplateRenderers()\"\n            [actionHandlers]=\"actionHandlers\" [serverSidePagination]=\"true\" [totalServerItems]=\"totalItems()\"\n            [currentServerPage]=\"currentPage()\" [currentServerPageSize]=\"pageSize()\" (gridEvent)=\"onGridEvent($event)\">\n          </cide-ele-data-grid>\n        </div>\n\n      </div>\n    </div>\n\n  </div>\n\n  <!-- Designation Details Renderer Template -->\n  <ng-template #designationDetailsRendererTemplate let-row=\"row\" let-value=\"value\">\n    <div class=\"tw-flex tw-items-center tw-min-w-0\">\n      <!-- Dynamic Icon based on type -->\n      <div class=\"tw-flex-shrink-0\">\n        <cide-ele-icon [class]=\"row.type === 'department' ? 'tw-text-green-500' : 'tw-text-blue-500'\" size=\"xs\">\n          {{ row.type === 'department' ? 'business' : 'work' }}\n        </cide-ele-icon>\n      </div>\n\n      <!-- Details -->\n      <div class=\"tw-ml-3 tw-min-w-0 tw-flex-1\">\n        <div class=\"tw-flex tw-items-center tw-space-x-2\">\n          <div class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-truncate\" [title]=\"row.name\">\n            {{ row.name || 'Untitled' }}\n          </div>\n          @if (row.type === 'department') {\n          <span\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\">\n            Department\n          </span>\n          }\n        </div>\n        @if (row.description) {\n        <div class=\"tw-text-xs tw-text-gray-500 tw-truncate\" [title]=\"row.description\">\n          {{ row.description }}\n        </div>\n        }\n      </div>\n    </div>\n  </ng-template>\n\n  <!-- Designation Status Renderer Template -->\n  <ng-template #designationStatusRendererTemplate let-row=\"row\" let-value=\"value\">\n    <span\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\"\n      [ngClass]=\"getStatusClass(row.status)\">\n      {{ getStatusDisplay(row.status) }}\n    </span>\n  </ng-template>\n\n  <!-- Actions Dropdown Renderer Template -->\n  <ng-template #actionsDropdownRendererTemplate let-row=\"row\" let-value=\"value\">\n    <cide-ele-dropdown [items]=\"getDropdownItems(row)\" [config]=\"{ triggerIcon: 'more_vert', triggerSize: 'sm' }\"\n      (itemClick)=\"onDropdownItemClick($event, row)\">\n    </cide-ele-dropdown>\n  </ng-template>\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", "ngModel", "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 ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideCoreDesignationListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", 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 -->\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'core_designation_list' }\">\n  <div class=\"tw-table tw-w-full tw-h-full\">\n\n    <!-- Quick Add Form Section - Show if user has VIEW, CREATE, or EDIT rights -->\n    @if (canView() || canCreate() || canEdit()) {\n    <div class=\"tw-table-row tw-h-0\">\n      <div class=\"tw-table-cell tw-px-6 tw-py-4 tw-border-b tw-border-gray-200 tw-bg-white\">\n        <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-0\">\n          <div class=\"tw-flex tw-items-center tw-space-x-3 tw-mb-3\">\n            <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\n            <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-m-0\">{{ isEditMode() ? 'Edit Designation' : 'Quick\n              Add Designation' }}</h6>\n          </div>\n          @if (selectedParentDesignation()) {\n          <div\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\">\n            <cide-ele-icon class=\"tw-text-blue-600 tw-w-4 tw-h-4\">account_tree</cide-ele-icon>\n            <div class=\"tw-flex tw-items-center tw-space-x-2\">\n              <span class=\"tw-text-sm tw-text-blue-600 tw-font-medium\">{{ isEditMode() ? 'Parent:' : 'Creating child\n                under:' }}</span>\n              <span class=\"tw-text-sm tw-text-blue-800 tw-font-semibold\">{{ selectedParentDesignation()?.sydsg_name\n                }}</span>\n            </div>\n            <button cideEleButton variant=\"ghost\" size=\"xs\" type=\"button\" (click)=\"clearSelectedParent()\"\n              [disabled]=\"canView() && !canCreate() && !canEdit()\" class=\"tw-text-blue-400 hover:tw-text-blue-600\">\n              <svg class=\"tw-w-4 tw-h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\" />\n              </svg>\n            </button>\n          </div>\n          }\n          @if (selectedParentDepartment()) {\n          <div\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\">\n            <cide-ele-icon class=\"tw-text-green-600 tw-w-4 tw-h-4\">business</cide-ele-icon>\n            <div class=\"tw-flex tw-items-center tw-space-x-2\">\n              <span class=\"tw-text-sm tw-text-green-600 tw-font-medium\">{{ isEditMode() ? 'Department:' : 'Department:'\n                }}</span>\n              <span class=\"tw-text-sm tw-text-green-800 tw-font-semibold\">{{ selectedParentDepartment()?.sydept_name\n                }}</span>\n            </div>\n            <button cideEleButton variant=\"ghost\" size=\"xs\" type=\"button\" (click)=\"clearSelectedParentDepartment()\"\n              [disabled]=\"!canCreate() && !canEdit()\"\n              class=\"tw-text-green-400 hover:tw-text-green-600\">\n              <svg class=\"tw-w-4 tw-h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\" />\n              </svg>\n            </button>\n          </div>\n          }\n        </div>\n\n        <form [formGroup]=\"quickAddForm\" (ngSubmit)=\"quickAddDesignation()\">\n          <!-- First Row -->\n          <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-5 tw-gap-3 tw-mb-3\">\n            <!-- Designation Name -->\n            <div>\n              <cide-ele-input id=\"sydsg_name\" label=\"Name\" formControlName=\"sydsg_name\" placeholder=\"Designation name\"\n                [disabled]=\"canView() && !canCreate() && !canEdit()\" size=\"sm\">\n              </cide-ele-input>\n            </div>\n\n            <!-- Designation Code -->\n            <div>\n              <cide-ele-input id=\"sydsg_code\" label=\"Code\" formControlName=\"sydsg_code\" placeholder=\"DESG001\"\n                [disabled]=\"canView() && !canCreate() && !canEdit()\" size=\"sm\">\n              </cide-ele-input>\n            </div>\n            <!-- Grade Level -->\n            <div>\n              <cide-ele-select id=\"sydsg_grade_level_id_sydsgl\" label=\"Grade Level\" [options]=\"gradeLevelOptions()\"\n                formControlName=\"sydsg_grade_level_id_sydsgl\" placeholder=\"Select grade level\"\n                [disabled]=\"canView() && !canCreate() && !canEdit()\" size=\"sm\">\n              </cide-ele-select>\n            </div>\n\n            <!-- Department -->\n            <div>\n              <cide-ele-select id=\"sydsg_department_id_sydpt\" label=\"Department\" [options]=\"departmentOptions()\"\n                formControlName=\"sydsg_department_id_sydpt\" placeholder=\"Select department\"\n                [disabled]=\"canView() && !canCreate() && !canEdit()\" size=\"sm\">\n              </cide-ele-select>\n            </div>\n\n            <!-- Active Status -->\n            <div class=\"tw-flex tw-flex-col tw-justify-end\">\n              <cide-ele-input id=\"sydsg_isactive\" type=\"checkbox\" label=\"Active\" formControlName=\"sydsg_isactive\"\n                [disabled]=\"canView() && !canCreate() && !canEdit()\" size=\"sm\">\n              </cide-ele-input>\n            </div>\n          </div>\n\n          <!-- Second Row -->\n          <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-3 tw-items-end\">\n            <!-- Description -->\n            <div>\n              <cide-ele-textarea id=\"sydsg_description\" label=\"Description\" formControlName=\"sydsg_description\"\n                placeholder=\"Designation description\" rows=\"2\"\n                [disabled]=\"canView() && !canCreate() && !canEdit()\"\n                size=\"sm\">\n              </cide-ele-textarea>\n            </div>\n\n            <!-- Entity ID (Hidden) -->\n            <div class=\"tw-hidden\">\n              <cide-ele-input id=\"desg_entity_id_syen\" label=\"Entity ID\" formControlName=\"desg_entity_id_syen\"\n                placeholder=\"Entity ID\" size=\"sm\">\n              </cide-ele-input>\n            </div>\n\n            <!-- Action Buttons -->\n            @if (canCreate() || canEdit()) {\n            <div class=\"tw-flex tw-flex-col tw-justify-end\">\n              <div class=\"tw-flex tw-space-x-2\">\n                @if (isEditMode() ? canEdit() : canCreate()) {\n                <button cideEleButton variant=\"primary\" size=\"sm\" type=\"submit\" [disabled]=\"quickAddForm.invalid\"\n                  class=\"tw-px-2 tw-py-1 tw-w-20\">\n                  <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">{{ isEditMode() ? 'edit' : 'add'\n                    }}</cide-ele-icon>\n                  {{ isEditMode() ? 'Update' : 'Add' }}\n                </button>\n                }\n                <button cideEleButton variant=\"outline\" size=\"sm\" type=\"button\" (click)=\"resetQuickAddForm()\"\n                  [disabled]=\"canView() && !canCreate() && !canEdit()\" class=\"tw-px-2 tw-py-1 tw-w-16\">\n                  <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">refresh</cide-ele-icon>\n                  Reset\n                </button>\n              </div>\n            </div>\n            }\n          </div>\n        </form>\n      </div>\n    </div>\n    }\n\n    <!-- Main Content Area -->\n    <div class=\"tw-table-row\">\n      <div class=\"tw-table-cell tw-h-full tw-relative\">\n\n        <!-- Data Grid Component -->\n        <div class=\"tw-h-full tw-overflow-auto\">\n\n          <cide-ele-data-grid [config]=\"gridConfig()\" [templateRenderers]=\"getTemplateRenderers()\"\n            [actionHandlers]=\"actionHandlers\" [serverSidePagination]=\"true\" [totalServerItems]=\"totalItems()\"\n            [currentServerPage]=\"currentPage()\" [currentServerPageSize]=\"pageSize()\" (gridEvent)=\"onGridEvent($event)\">\n          </cide-ele-data-grid>\n        </div>\n\n      </div>\n    </div>\n\n  </div>\n\n  <!-- Designation Details Renderer Template -->\n  <ng-template #designationDetailsRendererTemplate let-row=\"row\" let-value=\"value\">\n    <div class=\"tw-flex tw-items-center tw-min-w-0\">\n      <!-- Dynamic Icon based on type -->\n      <div class=\"tw-flex-shrink-0\">\n        <cide-ele-icon [class]=\"row.type === 'department' ? 'tw-text-green-500' : 'tw-text-blue-500'\" size=\"xs\">\n          {{ row.type === 'department' ? 'business' : 'work' }}\n        </cide-ele-icon>\n      </div>\n\n      <!-- Details -->\n      <div class=\"tw-ml-3 tw-min-w-0 tw-flex-1\">\n        <div class=\"tw-flex tw-items-center tw-space-x-2\">\n          <div class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-truncate\" [title]=\"row.name\">\n            {{ row.name || 'Untitled' }}\n          </div>\n          @if (row.type === 'department') {\n          <span\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\">\n            Department\n          </span>\n          }\n        </div>\n        @if (row.description) {\n        <div class=\"tw-text-xs tw-text-gray-500 tw-truncate\" [title]=\"row.description\">\n          {{ row.description }}\n        </div>\n        }\n      </div>\n    </div>\n  </ng-template>\n\n  <!-- Designation Status Renderer Template -->\n  <ng-template #designationStatusRendererTemplate let-row=\"row\" let-value=\"value\">\n    <span\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\"\n      [ngClass]=\"getStatusClass(row.status)\">\n      {{ getStatusDisplay(row.status) }}\n    </span>\n  </ng-template>\n\n  <!-- Actions Dropdown Renderer Template -->\n  <ng-template #actionsDropdownRendererTemplate let-row=\"row\" let-value=\"value\">\n    <cide-ele-dropdown [items]=\"getDropdownItems(row)\" [config]=\"{ triggerIcon: 'more_vert', triggerSize: 'sm' }\"\n      (itemClick)=\"onDropdownItemClick($event, row)\">\n    </cide-ele-dropdown>\n  </ng-template>\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", "ngModel", "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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideCoreDesignationListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cide-core-designation-list', standalone: true, imports: [
                         CommonModule,
@@ -5094,8 +5126,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                         CideIconComponent,
                         CideEleDropdownComponent,
                         CideLytSharedWrapperComponent
-                    ], template: "<!-- Designation List with Shared Wrapper -->\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'core_designation_list' }\">\n  <div class=\"tw-table tw-w-full tw-h-full\">\n\n    <!-- Quick Add Form Section -->\n    <div class=\"tw-table-row tw-h-0\">\n      <div class=\"tw-table-cell tw-px-6 tw-py-4 tw-border-b tw-border-gray-200 tw-bg-white\">\n        <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-0\">\n          <div class=\"tw-flex tw-items-center tw-space-x-3 tw-mb-3\">\n            <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\n            <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-m-0\">{{ isEditMode() ? 'Edit Designation' : 'Quick Add Designation' }}</h6>\n          </div>\n          @if (selectedParentDesignation()) {\n          <div\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\">\n            <cide-ele-icon class=\"tw-text-blue-600 tw-w-4 tw-h-4\">account_tree</cide-ele-icon>\n            <div class=\"tw-flex tw-items-center tw-space-x-2\">\n              <span class=\"tw-text-sm tw-text-blue-600 tw-font-medium\">{{ isEditMode() ? 'Parent:' : 'Creating child under:' }}</span>\n              <span class=\"tw-text-sm tw-text-blue-800 tw-font-semibold\">{{ selectedParentDesignation()?.sydsg_name\n                }}</span>\n            </div>\n            <button cideEleButton variant=\"ghost\" size=\"xs\" type=\"button\" (click)=\"clearSelectedParent()\"\n              class=\"tw-text-blue-400 hover:tw-text-blue-600\">\n              <svg class=\"tw-w-4 tw-h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\" />\n              </svg>\n            </button>\n          </div>\n          }\n          @if (selectedParentDepartment()) {\n          <div\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\">\n            <cide-ele-icon class=\"tw-text-green-600 tw-w-4 tw-h-4\">business</cide-ele-icon>\n            <div class=\"tw-flex tw-items-center tw-space-x-2\">\n              <span class=\"tw-text-sm tw-text-green-600 tw-font-medium\">{{ isEditMode() ? 'Department:' : 'Department:'\n                }}</span>\n              <span class=\"tw-text-sm tw-text-green-800 tw-font-semibold\">{{ selectedParentDepartment()?.sydept_name\n                }}</span>\n            </div>\n            <button cideEleButton variant=\"ghost\" size=\"xs\" type=\"button\" (click)=\"clearSelectedParentDepartment()\"\n              class=\"tw-text-green-400 hover:tw-text-green-600\">\n              <svg class=\"tw-w-4 tw-h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\" />\n              </svg>\n            </button>\n          </div>\n          }\n        </div>\n\n        <form [formGroup]=\"quickAddForm\" (ngSubmit)=\"quickAddDesignation()\">\n          <!-- First Row -->\n          <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-5 tw-gap-3 tw-mb-3\">\n            <!-- Designation Name -->\n            <div>\n              <cide-ele-input id=\"sydsg_name\" label=\"Name\" formControlName=\"sydsg_name\" placeholder=\"Designation name\"\n                size=\"sm\">\n              </cide-ele-input>\n            </div>\n\n            <!-- Designation Code -->\n            <div>\n              <cide-ele-input id=\"sydsg_code\" label=\"Code\" formControlName=\"sydsg_code\" placeholder=\"DESG001\"\n                size=\"sm\">\n              </cide-ele-input>\n            </div>\n            <!-- Grade Level -->\n            <div>\n              <cide-ele-select id=\"sydsg_grade_level_id_sydsgl\" label=\"Grade Level\" [options]=\"gradeLevelOptions()\"\n                formControlName=\"sydsg_grade_level_id_sydsgl\" placeholder=\"Select grade level\" size=\"sm\">\n              </cide-ele-select>\n            </div>\n\n            <!-- Department -->\n            <div>\n              <cide-ele-select id=\"sydsg_department_id_sydpt\" label=\"Department\" [options]=\"departmentOptions()\"\n                formControlName=\"sydsg_department_id_sydpt\" placeholder=\"Select department\" size=\"sm\">\n              </cide-ele-select>\n            </div>\n\n            <!-- Active Status -->\n            <div class=\"tw-flex tw-flex-col tw-justify-end\">\n              <cide-ele-input id=\"sydsg_isactive\" type=\"checkbox\" label=\"Active\" formControlName=\"sydsg_isactive\"\n                size=\"sm\">\n              </cide-ele-input>\n            </div>\n          </div>\n\n          <!-- Second Row -->\n          <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-3 tw-items-end\">\n            <!-- Description -->\n            <div>\n              <cide-ele-textarea id=\"sydsg_description\" label=\"Description\" formControlName=\"sydsg_description\"\n                placeholder=\"Designation description\" rows=\"2\" size=\"sm\">\n              </cide-ele-textarea>\n            </div>\n\n            <!-- Entity ID (Hidden) -->\n            <div class=\"tw-hidden\">\n              <cide-ele-input id=\"desg_entity_id_syen\" label=\"Entity ID\" formControlName=\"desg_entity_id_syen\"\n                placeholder=\"Entity ID\" size=\"sm\">\n              </cide-ele-input>\n            </div>\n\n            <!-- Action Buttons -->\n            <div class=\"tw-flex tw-flex-col tw-justify-end\">\n              <div class=\"tw-flex tw-space-x-2\">\n                <button cideEleButton variant=\"primary\" size=\"sm\" type=\"submit\" [disabled]=\"quickAddForm.invalid\"\n                  class=\"tw-px-2 tw-py-1 tw-w-20\">\n                  <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">{{ isEditMode() ? 'edit' : 'add'\n                    }}</cide-ele-icon>\n                  {{ isEditMode() ? 'Update' : 'Add' }}\n                </button>\n                <button cideEleButton variant=\"outline\" size=\"sm\" type=\"button\" (click)=\"resetQuickAddForm()\"\n                  class=\"tw-px-2 tw-py-1 tw-w-16\">\n                  <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">refresh</cide-ele-icon>\n                  Reset\n                </button>\n              </div>\n            </div>\n          </div>\n        </form>\n      </div>\n    </div>\n\n\n\n    <!-- Header Section with Filters -->\n    <div class=\"tw-table-row tw-h-0\">\n      <div class=\"tw-table-cell tw-px-6 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\n        <div\n          class=\"tw-flex tw-flex-col sm:tw-flex-row tw-justify-between tw-items-start sm:tw-items-center tw-space-y-3 sm:tw-space-y-0\">\n\n          <!-- Actions -->\n          <div\n            class=\"tw-flex tw-flex-col sm:tw-flex-row tw-items-start sm:tw-items-center tw-space-y-3 sm:tw-space-y-0 sm:tw-space-x-3\">\n            <!-- Search functionality is handled by the data grid -->\n          </div>\n        </div>\n\n        <!-- Error Message -->\n        @if (error()) {\n        <div class=\"tw-mt-4 tw-p-4 tw-bg-red-50 tw-border tw-border-red-200 tw-rounded-md\">\n          <div class=\"tw-flex tw-items-start\">\n            <cide-ele-icon name=\"error\"\n              class=\"tw-text-red-400 tw-w-5 tw-h-5 tw-mt-0.5 tw-flex-shrink-0\"></cide-ele-icon>\n            <div class=\"tw-ml-3\">\n              <h3 class=\"tw-text-sm tw-font-medium tw-text-red-800 tw-m-0\">Error</h3>\n              <p class=\"tw-text-sm tw-text-red-700 tw-mt-1 tw-m-0\">{{ error() }}</p>\n            </div>\n          </div>\n        </div>\n        }\n      </div>\n    </div>\n\n    <!-- Main Content Area -->\n    <div class=\"tw-table-row\">\n      <div class=\"tw-table-cell tw-h-full tw-relative\">\n\n        <!-- Data Grid Component -->\n        <div class=\"tw-h-full tw-overflow-auto\">\n\n          <cide-ele-data-grid [config]=\"gridConfig()\" [templateRenderers]=\"getTemplateRenderers()\"\n            [actionHandlers]=\"actionHandlers\" [serverSidePagination]=\"true\" [totalServerItems]=\"totalItems()\"\n            [currentServerPage]=\"currentPage()\" [currentServerPageSize]=\"pageSize()\" (gridEvent)=\"onGridEvent($event)\">\n          </cide-ele-data-grid>\n        </div>\n\n      </div>\n    </div>\n\n  </div>\n\n  <!-- Designation Details Renderer Template -->\n  <ng-template #designationDetailsRendererTemplate let-row=\"row\" let-value=\"value\">\n    <div class=\"tw-flex tw-items-center tw-min-w-0\">\n      <!-- Dynamic Icon based on type -->\n      <div class=\"tw-flex-shrink-0\">\n        <cide-ele-icon [class]=\"row.type === 'department' ? 'tw-text-green-500' : 'tw-text-blue-500'\" size=\"xs\">\n          {{ row.type === 'department' ? 'business' : 'work' }}\n        </cide-ele-icon>\n      </div>\n\n      <!-- Details -->\n      <div class=\"tw-ml-3 tw-min-w-0 tw-flex-1\">\n        <div class=\"tw-flex tw-items-center tw-space-x-2\">\n          <div class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-truncate\" [title]=\"row.name\">\n            {{ row.name || 'Untitled' }}\n          </div>\n          @if (row.type === 'department') {\n          <span\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\">\n            Department\n          </span>\n          }\n        </div>\n        @if (row.description) {\n        <div class=\"tw-text-xs tw-text-gray-500 tw-truncate\" [title]=\"row.description\">\n          {{ row.description }}\n        </div>\n        }\n      </div>\n    </div>\n  </ng-template>\n\n  <!-- Designation Status Renderer Template -->\n  <ng-template #designationStatusRendererTemplate let-row=\"row\" let-value=\"value\">\n    <span\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\"\n      [ngClass]=\"getStatusClass(row.status)\">\n      {{ getStatusDisplay(row.status) }}\n    </span>\n  </ng-template>\n\n  <!-- Actions Dropdown Renderer Template -->\n  <ng-template #actionsDropdownRendererTemplate let-row=\"row\" let-value=\"value\">\n    <cide-ele-dropdown [items]=\"getDropdownItems(row)\" [config]=\"{ triggerIcon: 'more_vert', triggerSize: 'sm' }\"\n      (itemClick)=\"onDropdownItemClick($event, row)\">\n    </cide-ele-dropdown>\n  </ng-template>\n</cide-lyt-shared-wrapper>" }]
-        }], ctorParameters: () => [] });
+                    ], template: "<!-- Designation List with Shared Wrapper -->\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'core_designation_list' }\">\n  <div class=\"tw-table tw-w-full tw-h-full\">\n\n    <!-- Quick Add Form Section - Show if user has VIEW, CREATE, or EDIT rights -->\n    @if (canView() || canCreate() || canEdit()) {\n    <div class=\"tw-table-row tw-h-0\">\n      <div class=\"tw-table-cell tw-px-6 tw-py-4 tw-border-b tw-border-gray-200 tw-bg-white\">\n        <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-0\">\n          <div class=\"tw-flex tw-items-center tw-space-x-3 tw-mb-3\">\n            <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\n            <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-m-0\">{{ isEditMode() ? 'Edit Designation' : 'Quick\n              Add Designation' }}</h6>\n          </div>\n          @if (selectedParentDesignation()) {\n          <div\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\">\n            <cide-ele-icon class=\"tw-text-blue-600 tw-w-4 tw-h-4\">account_tree</cide-ele-icon>\n            <div class=\"tw-flex tw-items-center tw-space-x-2\">\n              <span class=\"tw-text-sm tw-text-blue-600 tw-font-medium\">{{ isEditMode() ? 'Parent:' : 'Creating child\n                under:' }}</span>\n              <span class=\"tw-text-sm tw-text-blue-800 tw-font-semibold\">{{ selectedParentDesignation()?.sydsg_name\n                }}</span>\n            </div>\n            <button cideEleButton variant=\"ghost\" size=\"xs\" type=\"button\" (click)=\"clearSelectedParent()\"\n              [disabled]=\"canView() && !canCreate() && !canEdit()\" class=\"tw-text-blue-400 hover:tw-text-blue-600\">\n              <svg class=\"tw-w-4 tw-h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\" />\n              </svg>\n            </button>\n          </div>\n          }\n          @if (selectedParentDepartment()) {\n          <div\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\">\n            <cide-ele-icon class=\"tw-text-green-600 tw-w-4 tw-h-4\">business</cide-ele-icon>\n            <div class=\"tw-flex tw-items-center tw-space-x-2\">\n              <span class=\"tw-text-sm tw-text-green-600 tw-font-medium\">{{ isEditMode() ? 'Department:' : 'Department:'\n                }}</span>\n              <span class=\"tw-text-sm tw-text-green-800 tw-font-semibold\">{{ selectedParentDepartment()?.sydept_name\n                }}</span>\n            </div>\n            <button cideEleButton variant=\"ghost\" size=\"xs\" type=\"button\" (click)=\"clearSelectedParentDepartment()\"\n              [disabled]=\"!canCreate() && !canEdit()\"\n              class=\"tw-text-green-400 hover:tw-text-green-600\">\n              <svg class=\"tw-w-4 tw-h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\" />\n              </svg>\n            </button>\n          </div>\n          }\n        </div>\n\n        <form [formGroup]=\"quickAddForm\" (ngSubmit)=\"quickAddDesignation()\">\n          <!-- First Row -->\n          <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-5 tw-gap-3 tw-mb-3\">\n            <!-- Designation Name -->\n            <div>\n              <cide-ele-input id=\"sydsg_name\" label=\"Name\" formControlName=\"sydsg_name\" placeholder=\"Designation name\"\n                [disabled]=\"canView() && !canCreate() && !canEdit()\" size=\"sm\">\n              </cide-ele-input>\n            </div>\n\n            <!-- Designation Code -->\n            <div>\n              <cide-ele-input id=\"sydsg_code\" label=\"Code\" formControlName=\"sydsg_code\" placeholder=\"DESG001\"\n                [disabled]=\"canView() && !canCreate() && !canEdit()\" size=\"sm\">\n              </cide-ele-input>\n            </div>\n            <!-- Grade Level -->\n            <div>\n              <cide-ele-select id=\"sydsg_grade_level_id_sydsgl\" label=\"Grade Level\" [options]=\"gradeLevelOptions()\"\n                formControlName=\"sydsg_grade_level_id_sydsgl\" placeholder=\"Select grade level\"\n                [disabled]=\"canView() && !canCreate() && !canEdit()\" size=\"sm\">\n              </cide-ele-select>\n            </div>\n\n            <!-- Department -->\n            <div>\n              <cide-ele-select id=\"sydsg_department_id_sydpt\" label=\"Department\" [options]=\"departmentOptions()\"\n                formControlName=\"sydsg_department_id_sydpt\" placeholder=\"Select department\"\n                [disabled]=\"canView() && !canCreate() && !canEdit()\" size=\"sm\">\n              </cide-ele-select>\n            </div>\n\n            <!-- Active Status -->\n            <div class=\"tw-flex tw-flex-col tw-justify-end\">\n              <cide-ele-input id=\"sydsg_isactive\" type=\"checkbox\" label=\"Active\" formControlName=\"sydsg_isactive\"\n                [disabled]=\"canView() && !canCreate() && !canEdit()\" size=\"sm\">\n              </cide-ele-input>\n            </div>\n          </div>\n\n          <!-- Second Row -->\n          <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-3 tw-items-end\">\n            <!-- Description -->\n            <div>\n              <cide-ele-textarea id=\"sydsg_description\" label=\"Description\" formControlName=\"sydsg_description\"\n                placeholder=\"Designation description\" rows=\"2\"\n                [disabled]=\"canView() && !canCreate() && !canEdit()\"\n                size=\"sm\">\n              </cide-ele-textarea>\n            </div>\n\n            <!-- Entity ID (Hidden) -->\n            <div class=\"tw-hidden\">\n              <cide-ele-input id=\"desg_entity_id_syen\" label=\"Entity ID\" formControlName=\"desg_entity_id_syen\"\n                placeholder=\"Entity ID\" size=\"sm\">\n              </cide-ele-input>\n            </div>\n\n            <!-- Action Buttons -->\n            @if (canCreate() || canEdit()) {\n            <div class=\"tw-flex tw-flex-col tw-justify-end\">\n              <div class=\"tw-flex tw-space-x-2\">\n                @if (isEditMode() ? canEdit() : canCreate()) {\n                <button cideEleButton variant=\"primary\" size=\"sm\" type=\"submit\" [disabled]=\"quickAddForm.invalid\"\n                  class=\"tw-px-2 tw-py-1 tw-w-20\">\n                  <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">{{ isEditMode() ? 'edit' : 'add'\n                    }}</cide-ele-icon>\n                  {{ isEditMode() ? 'Update' : 'Add' }}\n                </button>\n                }\n                <button cideEleButton variant=\"outline\" size=\"sm\" type=\"button\" (click)=\"resetQuickAddForm()\"\n                  [disabled]=\"canView() && !canCreate() && !canEdit()\" class=\"tw-px-2 tw-py-1 tw-w-16\">\n                  <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">refresh</cide-ele-icon>\n                  Reset\n                </button>\n              </div>\n            </div>\n            }\n          </div>\n        </form>\n      </div>\n    </div>\n    }\n\n    <!-- Main Content Area -->\n    <div class=\"tw-table-row\">\n      <div class=\"tw-table-cell tw-h-full tw-relative\">\n\n        <!-- Data Grid Component -->\n        <div class=\"tw-h-full tw-overflow-auto\">\n\n          <cide-ele-data-grid [config]=\"gridConfig()\" [templateRenderers]=\"getTemplateRenderers()\"\n            [actionHandlers]=\"actionHandlers\" [serverSidePagination]=\"true\" [totalServerItems]=\"totalItems()\"\n            [currentServerPage]=\"currentPage()\" [currentServerPageSize]=\"pageSize()\" (gridEvent)=\"onGridEvent($event)\">\n          </cide-ele-data-grid>\n        </div>\n\n      </div>\n    </div>\n\n  </div>\n\n  <!-- Designation Details Renderer Template -->\n  <ng-template #designationDetailsRendererTemplate let-row=\"row\" let-value=\"value\">\n    <div class=\"tw-flex tw-items-center tw-min-w-0\">\n      <!-- Dynamic Icon based on type -->\n      <div class=\"tw-flex-shrink-0\">\n        <cide-ele-icon [class]=\"row.type === 'department' ? 'tw-text-green-500' : 'tw-text-blue-500'\" size=\"xs\">\n          {{ row.type === 'department' ? 'business' : 'work' }}\n        </cide-ele-icon>\n      </div>\n\n      <!-- Details -->\n      <div class=\"tw-ml-3 tw-min-w-0 tw-flex-1\">\n        <div class=\"tw-flex tw-items-center tw-space-x-2\">\n          <div class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-truncate\" [title]=\"row.name\">\n            {{ row.name || 'Untitled' }}\n          </div>\n          @if (row.type === 'department') {\n          <span\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\">\n            Department\n          </span>\n          }\n        </div>\n        @if (row.description) {\n        <div class=\"tw-text-xs tw-text-gray-500 tw-truncate\" [title]=\"row.description\">\n          {{ row.description }}\n        </div>\n        }\n      </div>\n    </div>\n  </ng-template>\n\n  <!-- Designation Status Renderer Template -->\n  <ng-template #designationStatusRendererTemplate let-row=\"row\" let-value=\"value\">\n    <span\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\"\n      [ngClass]=\"getStatusClass(row.status)\">\n      {{ getStatusDisplay(row.status) }}\n    </span>\n  </ng-template>\n\n  <!-- Actions Dropdown Renderer Template -->\n  <ng-template #actionsDropdownRendererTemplate let-row=\"row\" let-value=\"value\">\n    <cide-ele-dropdown [items]=\"getDropdownItems(row)\" [config]=\"{ triggerIcon: 'more_vert', triggerSize: 'sm' }\"\n      (itemClick)=\"onDropdownItemClick($event, row)\">\n    </cide-ele-dropdown>\n  </ng-template>\n</cide-lyt-shared-wrapper>" }]
+        }], ctorParameters: () => [], propDecorators: { designationDetailsRendererTemplate: [{ type: i0.ViewChild, args: ['designationDetailsRendererTemplate', { isSignal: true }] }], designationStatusRendererTemplate: [{ type: i0.ViewChild, args: ['designationStatusRendererTemplate', { isSignal: true }] }], actionsDropdownRendererTemplate: [{ type: i0.ViewChild, args: ['actionsDropdownRendererTemplate', { isSignal: true }] }] } });
 
 var designationList_component = /*#__PURE__*/Object.freeze({
     __proto__: null,
@@ -5113,6 +5145,7 @@ class CideCoreGradeLevelListComponent {
     router = inject(Router);
     notificationService = inject(NotificationService);
     confirmationService = inject(ConfirmationService);
+    rightsService = inject(RightsService);
     // Modern ViewChild signals for template renderers (Angular 20 approach)
     dragHandleRendererTemplate = viewChild.required('dragHandleRendererTemplate');
     gradeLevelDetailsRendererTemplate = viewChild.required('gradeLevelDetailsRendererTemplate');
@@ -5280,6 +5313,11 @@ class CideCoreGradeLevelListComponent {
     hasPreviousPage = computed(() => this.currentPage() > 1, ...(ngDevMode ? [{ debugName: "hasPreviousPage" }] : []));
     // Computed property for next order
     nextOrder = computed(() => this.calculateNextOrder(), ...(ngDevMode ? [{ debugName: "nextOrder" }] : []));
+    // Rights computed signals
+    canCreate = computed(() => this.rightsService.hasRight('CREATE'), ...(ngDevMode ? [{ debugName: "canCreate" }] : []));
+    canEdit = computed(() => this.rightsService.hasRight('EDIT'), ...(ngDevMode ? [{ debugName: "canEdit" }] : []));
+    canDelete = computed(() => this.rightsService.hasRight('DELETE'), ...(ngDevMode ? [{ debugName: "canDelete" }] : []));
+    canView = computed(() => this.rightsService.hasRight('VIEW'), ...(ngDevMode ? [{ debugName: "canView" }] : []));
     // Modern constructor with effects for initialization
     constructor() {
         this.initializeComponent();
@@ -5292,6 +5330,8 @@ class CideCoreGradeLevelListComponent {
      */
     initializeComponent() {
         console.log('CideCoreGradeLevelListComponent initialized with modern Angular patterns');
+        // Initialize rights for grade level management
+        this.rightsService.initializeRights('core_grade_level_list');
         this.loadGradeLevels();
         this.setupEventListeners();
         this.exposeGlobalFunctions();
@@ -5884,32 +5924,38 @@ class CideCoreGradeLevelListComponent {
      * Generate dropdown items for grade level actions
      */
     getDropdownItems(row) {
-        return [
-            {
+        const items = [];
+        if (this.canEdit()) {
+            items.push({
                 id: 'edit',
                 label: 'Edit',
                 icon: 'edit',
                 iconColor: 'tw-text-gray-400',
                 textColor: 'tw-text-gray-700',
                 hoverBgColor: 'hover:tw-bg-gray-100'
-            },
-            {
+            });
+        }
+        if (this.canEdit()) {
+            items.push({
                 id: 'toggle',
                 label: row.sydsgl_isactive ? 'Deactivate' : 'Activate',
                 icon: 'power_settings_new',
-                iconColor: 'tw-text-gray-400',
-                textColor: 'tw-text-gray-700',
-                hoverBgColor: 'hover:tw-bg-gray-100'
-            },
-            {
+                iconColor: 'tw-text-orange-400',
+                textColor: 'tw-text-orange-600',
+                hoverBgColor: 'hover:tw-bg-orange-50'
+            });
+        }
+        if (this.canDelete()) {
+            items.push({
                 id: 'delete',
                 label: 'Delete',
                 icon: 'delete',
                 iconColor: 'tw-text-red-400',
                 textColor: 'tw-text-red-600',
                 hoverBgColor: 'hover:tw-bg-red-50'
-            }
-        ];
+            });
+        }
+        return items;
     }
     /**
      * Handle dropdown item click
@@ -5944,10 +5990,10 @@ class CideCoreGradeLevelListComponent {
     trackByItemId(index, item) {
         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 -->\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'core_grade_level_list' }\">\n<div class=\"tw-table tw-w-full tw-h-full\">\n\n  <!-- Quick Add Form Section -->\n  <div class=\"tw-table-row tw-h-0\">\n    <div class=\"tw-table-cell tw-px-6 tw-py-4 tw-border-b tw-border-gray-200 tw-bg-white\">\n    <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\n      <div class=\"tw-flex tw-items-center tw-space-x-3\">\n        <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\n        <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-m-0\">{{ isEditMode() ? 'Edit Grade Level' : 'Quick Add Grade Level' }}</h6>\n      </div>\n    </div>\n    \n    <form [formGroup]=\"quickAddForm\" (ngSubmit)=\"quickAddGradeLevel()\">\n    <!-- First Row -->\n    <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-3 tw-mb-3\">\n      <!-- Grade Level Name -->\n      <div>\n        <cide-ele-input \n          id=\"sydsgl_name\" \n          label=\"Name\" \n          formControlName=\"sydsgl_name\"\n          placeholder=\"Grade level name\"\n          size=\"sm\">\n        </cide-ele-input>\n      </div>\n      \n      <!-- Active Status -->\n      <div class=\"tw-flex tw-flex-col tw-justify-end\">\n        <cide-ele-input \n          id=\"sydsgl_isactive\"\n          type=\"checkbox\"\n          label=\"Active\"\n          formControlName=\"sydsgl_isactive\"\n          size=\"sm\">\n        </cide-ele-input>\n      </div>\n    </div>\n    \n    <!-- Second Row -->\n    <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-3 tw-items-end\">\n      <!-- Description -->\n      <div>\n        <cide-ele-textarea \n          id=\"sydsgl_description\" \n          label=\"Description\" \n          formControlName=\"sydsgl_description\"\n          placeholder=\"Grade level description\"\n          rows=\"2\"\n          size=\"sm\">\n        </cide-ele-textarea>\n      </div>\n      \n      <!-- Entity ID (Hidden) -->\n      <div class=\"tw-hidden\">\n        <cide-ele-input \n          id=\"sydsgl_entity_id_syen\" \n          label=\"Entity ID\" \n          formControlName=\"sydsgl_entity_id_syen\"\n          placeholder=\"Entity ID\"\n          size=\"sm\">\n        </cide-ele-input>\n      </div>\n      \n      <!-- Action Buttons -->\n      <div class=\"tw-flex tw-flex-col tw-justify-end\">\n        <div class=\"tw-flex tw-space-x-2\">\n          <button \n            cideEleButton \n            variant=\"primary\" \n            size=\"sm\" \n            type=\"submit\"\n            [disabled]=\"quickAddForm.invalid\"\n            class=\"tw-px-2 tw-py-1 tw-w-20\">\n            <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\n            {{ isEditMode() ? 'Update' : 'Add' }}\n          </button>\n          <button \n            cideEleButton \n            variant=\"outline\" \n            size=\"sm\" \n            type=\"button\"\n            (click)=\"resetQuickAddForm()\"\n            class=\"tw-px-2 tw-py-1 tw-w-16\">\n            <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">refresh</cide-ele-icon>\n            Reset\n          </button>\n        </div>\n      </div>\n    </div>\n    </form>\n    </div>\n  </div>\n\n  <!-- Main Content Area -->\n  <div class=\"tw-table-row\">\n    <div class=\"tw-table-cell tw-h-full tw-relative\">\n  \n  <!-- Data Grid Component -->\n  <div class=\"tw-h-full tw-overflow-auto\">\n    \n    <cide-ele-data-grid \n      [config]=\"gridConfig()\" \n      [templateRenderers]=\"getTemplateRenderers()\"\n      [actionHandlers]=\"actionHandlers\"\n      [serverSidePagination]=\"true\" \n      [totalServerItems]=\"totalItems()\" \n      [currentServerPage]=\"currentPage()\"\n      [currentServerPageSize]=\"pageSize()\" \n      [dragDropEnabled]=\"true\"\n      (gridEvent)=\"onGridEvent($event)\">\n    </cide-ele-data-grid>\n  </div>\n\n    </div>\n  </div>\n\n</div>\n\n<!-- Drag Handle Renderer Template -->\n<ng-template #dragHandleRendererTemplate let-row=\"row\" let-value=\"value\">\n  <div class=\"tw-flex tw-items-center tw-justify-center tw-w-full tw-h-full tw-cursor-move drag-handle\">\n    <cide-ele-icon \n      class=\"tw-text-gray-400 hover:tw-text-gray-600 tw-transition-colors\" \n      size=\"xs\">\n      drag_indicator\n    </cide-ele-icon>\n  </div>\n</ng-template>\n\n<!-- Grade Level Details Renderer Template -->\n<ng-template #gradeLevelDetailsRendererTemplate let-row=\"row\" let-value=\"value\">\n  <div class=\"tw-flex tw-items-center tw-min-w-0\">\n    <!-- Grade Level Icon -->\n    <div class=\"tw-flex-shrink-0\">\n      <cide-ele-icon \n        class=\"tw-text-gray-400\" \n        size=\"xs\">\n        school\n      </cide-ele-icon>\n    </div>\n    \n    <!-- Grade Level Details -->\n    <div class=\"tw-ml-3 tw-min-w-0 tw-flex-1\">\n      <div class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-truncate\" \n           [title]=\"row.sydsgl_name\">\n        {{ row.sydsgl_name || 'Untitled' }}\n      </div>\n      @if (row.sydsgl_description) {\n        <div class=\"tw-text-xs tw-text-gray-500 tw-truncate\" \n             [title]=\"row.sydsgl_description\">\n          {{ row.sydsgl_description }}\n        </div>\n      }\n    </div>\n  </div>\n</ng-template>\n\n<!-- Grade Level Status Renderer Template -->\n<ng-template #gradeLevelStatusRendererTemplate let-row=\"row\" let-value=\"value\">\n  <span class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-whitespace-nowrap\"\n        [ngClass]=\"getStatusClass(row.sydsgl_isactive)\">\n    {{ getStatusDisplay(row.sydsgl_isactive) }}\n  </span>\n</ng-template>\n\n<!-- Actions Dropdown Renderer Template -->\n<ng-template #actionsDropdownRendererTemplate let-row=\"row\" let-value=\"value\">\n  <cide-ele-dropdown \n    [items]=\"getDropdownItems(row)\"\n    [config]=\"{ triggerIcon: 'more_vert', triggerSize: 'sm' }\"\n    (itemClick)=\"onDropdownItemClick($event, row)\">\n  </cide-ele-dropdown>\n</ng-template>\n\n<!-- Confirmation Modal -->\n</cide-lyt-shared-wrapper>\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" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideCoreGradeLevelListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", 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 -->\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'core_grade_level_list' }\">\n<div class=\"tw-table tw-w-full tw-h-full\">\n\n  <!-- Quick Add Form Section - Show if user has VIEW, CREATE, or EDIT rights -->\n  @if (canView() || canCreate() || canEdit()) {\n  <div class=\"tw-table-row tw-h-0\">\n    <div class=\"tw-table-cell tw-px-6 tw-py-4 tw-border-b tw-border-gray-200 tw-bg-white\">\n    <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\n      <div class=\"tw-flex tw-items-center tw-space-x-3\">\n        <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\n        <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-m-0\">{{ isEditMode() ? 'Edit Grade Level' : 'Quick\n          Add Grade Level' }}</h6>\n      </div>\n    </div>\n    \n    <form [formGroup]=\"quickAddForm\" (ngSubmit)=\"quickAddGradeLevel()\">\n    <!-- First Row -->\n    <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-3 tw-mb-3\">\n      <!-- Grade Level Name -->\n      <div>\n        <cide-ele-input \n          id=\"sydsgl_name\" \n          label=\"Name\" \n          formControlName=\"sydsgl_name\"\n          placeholder=\"Grade level name\"\n          size=\"sm\">\n        </cide-ele-input>\n      </div>\n      \n      <!-- Active Status -->\n      <div class=\"tw-flex tw-flex-col tw-justify-end\">\n        <cide-ele-input \n          id=\"sydsgl_isactive\"\n          type=\"checkbox\"\n          label=\"Active\"\n          formControlName=\"sydsgl_isactive\"\n          size=\"sm\">\n        </cide-ele-input>\n      </div>\n    </div>\n    \n    <!-- Second Row -->\n    <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-3 tw-items-end\">\n      <!-- Description -->\n      <div>\n        <cide-ele-textarea id=\"sydsgl_description\" label=\"Description\" formControlName=\"sydsgl_description\"\n          placeholder=\"Grade level description\" rows=\"2\" [disabled]=\"canView() && !canCreate() && !canEdit()\" size=\"sm\">\n        </cide-ele-textarea>\n      </div>\n      \n      <!-- Entity ID (Hidden) -->\n      <div class=\"tw-hidden\">\n        <cide-ele-input \n          id=\"sydsgl_entity_id_syen\" \n          label=\"Entity ID\" \n          formControlName=\"sydsgl_entity_id_syen\"\n          placeholder=\"Entity ID\"\n          size=\"sm\">\n        </cide-ele-input>\n      </div>\n      \n      <!-- Action Buttons -->\n      <div class=\"tw-flex tw-flex-col tw-justify-end\">\n        <div class=\"tw-flex tw-space-x-2\">\n          <button \n            cideEleButton \n            variant=\"primary\" \n            size=\"sm\" \n            type=\"submit\"\n            [disabled]=\"quickAddForm.invalid\"\n            class=\"tw-px-2 tw-py-1 tw-w-20\">\n            <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\n            {{ isEditMode() ? 'Update' : 'Add' }}\n          </button>\n          <button \n            cideEleButton \n            variant=\"outline\" \n            size=\"sm\" \n            type=\"button\"\n            (click)=\"resetQuickAddForm()\"\n            class=\"tw-px-2 tw-py-1 tw-w-16\">\n            <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">refresh</cide-ele-icon>\n            Reset\n          </button>\n        </div>\n      </div>\n    </div>\n    </form>\n    </div>\n  </div>\n  }\n\n  <!-- Main Content Area -->\n  <div class=\"tw-table-row\">\n    <div class=\"tw-table-cell tw-h-full tw-relative\">\n  \n  <!-- Data Grid Component -->\n  <div class=\"tw-h-full tw-overflow-auto\">\n    \n    <cide-ele-data-grid \n      [config]=\"gridConfig()\" \n      [templateRenderers]=\"getTemplateRenderers()\"\n      [actionHandlers]=\"actionHandlers\"\n      [serverSidePagination]=\"true\" \n      [totalServerItems]=\"totalItems()\" \n      [currentServerPage]=\"currentPage()\"\n      [currentServerPageSize]=\"pageSize()\" \n      [dragDropEnabled]=\"true\"\n      (gridEvent)=\"onGridEvent($event)\">\n    </cide-ele-data-grid>\n  </div>\n\n    </div>\n  </div>\n\n</div>\n\n<!-- Drag Handle Renderer Template -->\n<ng-template #dragHandleRendererTemplate let-row=\"row\" let-value=\"value\">\n  <div class=\"tw-flex tw-items-center tw-justify-center tw-w-full tw-h-full tw-cursor-move drag-handle\">\n    <cide-ele-icon \n      class=\"tw-text-gray-400 hover:tw-text-gray-600 tw-transition-colors\" \n      size=\"xs\">\n      drag_indicator\n    </cide-ele-icon>\n  </div>\n</ng-template>\n\n<!-- Grade Level Details Renderer Template -->\n<ng-template #gradeLevelDetailsRendererTemplate let-row=\"row\" let-value=\"value\">\n  <div class=\"tw-flex tw-items-center tw-min-w-0\">\n    <!-- Grade Level Icon -->\n    <div class=\"tw-flex-shrink-0\">\n      <cide-ele-icon \n        class=\"tw-text-gray-400\" \n        size=\"xs\">\n        school\n      </cide-ele-icon>\n    </div>\n    \n    <!-- Grade Level Details -->\n    <div class=\"tw-ml-3 tw-min-w-0 tw-flex-1\">\n      <div class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-truncate\" \n           [title]=\"row.sydsgl_name\">\n        {{ row.sydsgl_name || 'Untitled' }}\n      </div>\n      @if (row.sydsgl_description) {\n        <div class=\"tw-text-xs tw-text-gray-500 tw-truncate\" \n             [title]=\"row.sydsgl_description\">\n          {{ row.sydsgl_description }}\n        </div>\n      }\n    </div>\n  </div>\n</ng-template>\n\n<!-- Grade Level Status Renderer Template -->\n<ng-template #gradeLevelStatusRendererTemplate let-row=\"row\" let-value=\"value\">\n  <span class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-whitespace-nowrap\"\n        [ngClass]=\"getStatusClass(row.sydsgl_isactive)\">\n    {{ getStatusDisplay(row.sydsgl_isactive) }}\n  </span>\n</ng-template>\n\n<!-- Actions Dropdown Renderer Template -->\n<ng-template #actionsDropdownRendererTemplate let-row=\"row\" let-value=\"value\">\n  <cide-ele-dropdown \n    [items]=\"getDropdownItems(row)\"\n    [config]=\"{ triggerIcon: 'more_vert', triggerSize: 'sm' }\"\n    (itemClick)=\"onDropdownItemClick($event, row)\">\n  </cide-ele-dropdown>\n</ng-template>\n\n<!-- Confirmation Modal -->\n</cide-lyt-shared-wrapper>\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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideCoreGradeLevelListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cide-core-grade-level-list', standalone: true, imports: [
                         CommonModule,
@@ -5961,8 +6007,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                         CideEleDropdownComponent,
                         CideLytSharedWrapperComponent,
                         CideEleConfirmationModalComponent
-                    ], template: "<!-- Grade Level List with Shared Wrapper -->\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'core_grade_level_list' }\">\n<div class=\"tw-table tw-w-full tw-h-full\">\n\n  <!-- Quick Add Form Section -->\n  <div class=\"tw-table-row tw-h-0\">\n    <div class=\"tw-table-cell tw-px-6 tw-py-4 tw-border-b tw-border-gray-200 tw-bg-white\">\n    <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\n      <div class=\"tw-flex tw-items-center tw-space-x-3\">\n        <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\n        <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-m-0\">{{ isEditMode() ? 'Edit Grade Level' : 'Quick Add Grade Level' }}</h6>\n      </div>\n    </div>\n    \n    <form [formGroup]=\"quickAddForm\" (ngSubmit)=\"quickAddGradeLevel()\">\n    <!-- First Row -->\n    <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-3 tw-mb-3\">\n      <!-- Grade Level Name -->\n      <div>\n        <cide-ele-input \n          id=\"sydsgl_name\" \n          label=\"Name\" \n          formControlName=\"sydsgl_name\"\n          placeholder=\"Grade level name\"\n          size=\"sm\">\n        </cide-ele-input>\n      </div>\n      \n      <!-- Active Status -->\n      <div class=\"tw-flex tw-flex-col tw-justify-end\">\n        <cide-ele-input \n          id=\"sydsgl_isactive\"\n          type=\"checkbox\"\n          label=\"Active\"\n          formControlName=\"sydsgl_isactive\"\n          size=\"sm\">\n        </cide-ele-input>\n      </div>\n    </div>\n    \n    <!-- Second Row -->\n    <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-3 tw-items-end\">\n      <!-- Description -->\n      <div>\n        <cide-ele-textarea \n          id=\"sydsgl_description\" \n          label=\"Description\" \n          formControlName=\"sydsgl_description\"\n          placeholder=\"Grade level description\"\n          rows=\"2\"\n          size=\"sm\">\n        </cide-ele-textarea>\n      </div>\n      \n      <!-- Entity ID (Hidden) -->\n      <div class=\"tw-hidden\">\n        <cide-ele-input \n          id=\"sydsgl_entity_id_syen\" \n          label=\"Entity ID\" \n          formControlName=\"sydsgl_entity_id_syen\"\n          placeholder=\"Entity ID\"\n          size=\"sm\">\n        </cide-ele-input>\n      </div>\n      \n      <!-- Action Buttons -->\n      <div class=\"tw-flex tw-flex-col tw-justify-end\">\n        <div class=\"tw-flex tw-space-x-2\">\n          <button \n            cideEleButton \n            variant=\"primary\" \n            size=\"sm\" \n            type=\"submit\"\n            [disabled]=\"quickAddForm.invalid\"\n            class=\"tw-px-2 tw-py-1 tw-w-20\">\n            <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\n            {{ isEditMode() ? 'Update' : 'Add' }}\n          </button>\n          <button \n            cideEleButton \n            variant=\"outline\" \n            size=\"sm\" \n            type=\"button\"\n            (click)=\"resetQuickAddForm()\"\n            class=\"tw-px-2 tw-py-1 tw-w-16\">\n            <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">refresh</cide-ele-icon>\n            Reset\n          </button>\n        </div>\n      </div>\n    </div>\n    </form>\n    </div>\n  </div>\n\n  <!-- Main Content Area -->\n  <div class=\"tw-table-row\">\n    <div class=\"tw-table-cell tw-h-full tw-relative\">\n  \n  <!-- Data Grid Component -->\n  <div class=\"tw-h-full tw-overflow-auto\">\n    \n    <cide-ele-data-grid \n      [config]=\"gridConfig()\" \n      [templateRenderers]=\"getTemplateRenderers()\"\n      [actionHandlers]=\"actionHandlers\"\n      [serverSidePagination]=\"true\" \n      [totalServerItems]=\"totalItems()\" \n      [currentServerPage]=\"currentPage()\"\n      [currentServerPageSize]=\"pageSize()\" \n      [dragDropEnabled]=\"true\"\n      (gridEvent)=\"onGridEvent($event)\">\n    </cide-ele-data-grid>\n  </div>\n\n    </div>\n  </div>\n\n</div>\n\n<!-- Drag Handle Renderer Template -->\n<ng-template #dragHandleRendererTemplate let-row=\"row\" let-value=\"value\">\n  <div class=\"tw-flex tw-items-center tw-justify-center tw-w-full tw-h-full tw-cursor-move drag-handle\">\n    <cide-ele-icon \n      class=\"tw-text-gray-400 hover:tw-text-gray-600 tw-transition-colors\" \n      size=\"xs\">\n      drag_indicator\n    </cide-ele-icon>\n  </div>\n</ng-template>\n\n<!-- Grade Level Details Renderer Template -->\n<ng-template #gradeLevelDetailsRendererTemplate let-row=\"row\" let-value=\"value\">\n  <div class=\"tw-flex tw-items-center tw-min-w-0\">\n    <!-- Grade Level Icon -->\n    <div class=\"tw-flex-shrink-0\">\n      <cide-ele-icon \n        class=\"tw-text-gray-400\" \n        size=\"xs\">\n        school\n      </cide-ele-icon>\n    </div>\n    \n    <!-- Grade Level Details -->\n    <div class=\"tw-ml-3 tw-min-w-0 tw-flex-1\">\n      <div class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-truncate\" \n           [title]=\"row.sydsgl_name\">\n        {{ row.sydsgl_name || 'Untitled' }}\n      </div>\n      @if (row.sydsgl_description) {\n        <div class=\"tw-text-xs tw-text-gray-500 tw-truncate\" \n             [title]=\"row.sydsgl_description\">\n          {{ row.sydsgl_description }}\n        </div>\n      }\n    </div>\n  </div>\n</ng-template>\n\n<!-- Grade Level Status Renderer Template -->\n<ng-template #gradeLevelStatusRendererTemplate let-row=\"row\" let-value=\"value\">\n  <span class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-whitespace-nowrap\"\n        [ngClass]=\"getStatusClass(row.sydsgl_isactive)\">\n    {{ getStatusDisplay(row.sydsgl_isactive) }}\n  </span>\n</ng-template>\n\n<!-- Actions Dropdown Renderer Template -->\n<ng-template #actionsDropdownRendererTemplate let-row=\"row\" let-value=\"value\">\n  <cide-ele-dropdown \n    [items]=\"getDropdownItems(row)\"\n    [config]=\"{ triggerIcon: 'more_vert', triggerSize: 'sm' }\"\n    (itemClick)=\"onDropdownItemClick($event, row)\">\n  </cide-ele-dropdown>\n</ng-template>\n\n<!-- Confirmation Modal -->\n</cide-lyt-shared-wrapper>\n<cide-ele-confirmation-modal></cide-ele-confirmation-modal> " }]
-        }], ctorParameters: () => [] });
+                    ], template: "<!-- Grade Level List with Shared Wrapper -->\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'core_grade_level_list' }\">\n<div class=\"tw-table tw-w-full tw-h-full\">\n\n  <!-- Quick Add Form Section - Show if user has VIEW, CREATE, or EDIT rights -->\n  @if (canView() || canCreate() || canEdit()) {\n  <div class=\"tw-table-row tw-h-0\">\n    <div class=\"tw-table-cell tw-px-6 tw-py-4 tw-border-b tw-border-gray-200 tw-bg-white\">\n    <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\n      <div class=\"tw-flex tw-items-center tw-space-x-3\">\n        <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\n        <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-m-0\">{{ isEditMode() ? 'Edit Grade Level' : 'Quick\n          Add Grade Level' }}</h6>\n      </div>\n    </div>\n    \n    <form [formGroup]=\"quickAddForm\" (ngSubmit)=\"quickAddGradeLevel()\">\n    <!-- First Row -->\n    <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-3 tw-mb-3\">\n      <!-- Grade Level Name -->\n      <div>\n        <cide-ele-input \n          id=\"sydsgl_name\" \n          label=\"Name\" \n          formControlName=\"sydsgl_name\"\n          placeholder=\"Grade level name\"\n          size=\"sm\">\n        </cide-ele-input>\n      </div>\n      \n      <!-- Active Status -->\n      <div class=\"tw-flex tw-flex-col tw-justify-end\">\n        <cide-ele-input \n          id=\"sydsgl_isactive\"\n          type=\"checkbox\"\n          label=\"Active\"\n          formControlName=\"sydsgl_isactive\"\n          size=\"sm\">\n        </cide-ele-input>\n      </div>\n    </div>\n    \n    <!-- Second Row -->\n    <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-3 tw-items-end\">\n      <!-- Description -->\n      <div>\n        <cide-ele-textarea id=\"sydsgl_description\" label=\"Description\" formControlName=\"sydsgl_description\"\n          placeholder=\"Grade level description\" rows=\"2\" [disabled]=\"canView() && !canCreate() && !canEdit()\" size=\"sm\">\n        </cide-ele-textarea>\n      </div>\n      \n      <!-- Entity ID (Hidden) -->\n      <div class=\"tw-hidden\">\n        <cide-ele-input \n          id=\"sydsgl_entity_id_syen\" \n          label=\"Entity ID\" \n          formControlName=\"sydsgl_entity_id_syen\"\n          placeholder=\"Entity ID\"\n          size=\"sm\">\n        </cide-ele-input>\n      </div>\n      \n      <!-- Action Buttons -->\n      <div class=\"tw-flex tw-flex-col tw-justify-end\">\n        <div class=\"tw-flex tw-space-x-2\">\n          <button \n            cideEleButton \n            variant=\"primary\" \n            size=\"sm\" \n            type=\"submit\"\n            [disabled]=\"quickAddForm.invalid\"\n            class=\"tw-px-2 tw-py-1 tw-w-20\">\n            <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\n            {{ isEditMode() ? 'Update' : 'Add' }}\n          </button>\n          <button \n            cideEleButton \n            variant=\"outline\" \n            size=\"sm\" \n            type=\"button\"\n            (click)=\"resetQuickAddForm()\"\n            class=\"tw-px-2 tw-py-1 tw-w-16\">\n            <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">refresh</cide-ele-icon>\n            Reset\n          </button>\n        </div>\n      </div>\n    </div>\n    </form>\n    </div>\n  </div>\n  }\n\n  <!-- Main Content Area -->\n  <div class=\"tw-table-row\">\n    <div class=\"tw-table-cell tw-h-full tw-relative\">\n  \n  <!-- Data Grid Component -->\n  <div class=\"tw-h-full tw-overflow-auto\">\n    \n    <cide-ele-data-grid \n      [config]=\"gridConfig()\" \n      [templateRenderers]=\"getTemplateRenderers()\"\n      [actionHandlers]=\"actionHandlers\"\n      [serverSidePagination]=\"true\" \n      [totalServerItems]=\"totalItems()\" \n      [currentServerPage]=\"currentPage()\"\n      [currentServerPageSize]=\"pageSize()\" \n      [dragDropEnabled]=\"true\"\n      (gridEvent)=\"onGridEvent($event)\">\n    </cide-ele-data-grid>\n  </div>\n\n    </div>\n  </div>\n\n</div>\n\n<!-- Drag Handle Renderer Template -->\n<ng-template #dragHandleRendererTemplate let-row=\"row\" let-value=\"value\">\n  <div class=\"tw-flex tw-items-center tw-justify-center tw-w-full tw-h-full tw-cursor-move drag-handle\">\n    <cide-ele-icon \n      class=\"tw-text-gray-400 hover:tw-text-gray-600 tw-transition-colors\" \n      size=\"xs\">\n      drag_indicator\n    </cide-ele-icon>\n  </div>\n</ng-template>\n\n<!-- Grade Level Details Renderer Template -->\n<ng-template #gradeLevelDetailsRendererTemplate let-row=\"row\" let-value=\"value\">\n  <div class=\"tw-flex tw-items-center tw-min-w-0\">\n    <!-- Grade Level Icon -->\n    <div class=\"tw-flex-shrink-0\">\n      <cide-ele-icon \n        class=\"tw-text-gray-400\" \n        size=\"xs\">\n        school\n      </cide-ele-icon>\n    </div>\n    \n    <!-- Grade Level Details -->\n    <div class=\"tw-ml-3 tw-min-w-0 tw-flex-1\">\n      <div class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-truncate\" \n           [title]=\"row.sydsgl_name\">\n        {{ row.sydsgl_name || 'Untitled' }}\n      </div>\n      @if (row.sydsgl_description) {\n        <div class=\"tw-text-xs tw-text-gray-500 tw-truncate\" \n             [title]=\"row.sydsgl_description\">\n          {{ row.sydsgl_description }}\n        </div>\n      }\n    </div>\n  </div>\n</ng-template>\n\n<!-- Grade Level Status Renderer Template -->\n<ng-template #gradeLevelStatusRendererTemplate let-row=\"row\" let-value=\"value\">\n  <span class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-whitespace-nowrap\"\n        [ngClass]=\"getStatusClass(row.sydsgl_isactive)\">\n    {{ getStatusDisplay(row.sydsgl_isactive) }}\n  </span>\n</ng-template>\n\n<!-- Actions Dropdown Renderer Template -->\n<ng-template #actionsDropdownRendererTemplate let-row=\"row\" let-value=\"value\">\n  <cide-ele-dropdown \n    [items]=\"getDropdownItems(row)\"\n    [config]=\"{ triggerIcon: 'more_vert', triggerSize: 'sm' }\"\n    (itemClick)=\"onDropdownItemClick($event, row)\">\n  </cide-ele-dropdown>\n</ng-template>\n\n<!-- Confirmation Modal -->\n</cide-lyt-shared-wrapper>\n<cide-ele-confirmation-modal></cide-ele-confirmation-modal> " }]
+        }], ctorParameters: () => [], propDecorators: { dragHandleRendererTemplate: [{ type: i0.ViewChild, args: ['dragHandleRendererTemplate', { isSignal: true }] }], gradeLevelDetailsRendererTemplate: [{ type: i0.ViewChild, args: ['gradeLevelDetailsRendererTemplate', { isSignal: true }] }], gradeLevelStatusRendererTemplate: [{ type: i0.ViewChild, args: ['gradeLevelStatusRendererTemplate', { isSignal: true }] }], actionsDropdownRendererTemplate: [{ type: i0.ViewChild, args: ['actionsDropdownRendererTemplate', { isSignal: true }] }] } });
 
 var gradeLevelList_component = /*#__PURE__*/Object.freeze({
     __proto__: null,
@@ -6373,10 +6419,10 @@ class CideCorePageListComponent {
         const event = new MouseEvent('click', { bubbles: true });
         document.dispatchEvent(event);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCorePageListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideCorePageListComponent, isStandalone: true, selector: "cide-core-page-list", viewQueries: [{ propertyName: "pageDetailsRendererTemplate", first: true, predicate: ["pageDetailsRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "pageStatusRendererTemplate", first: true, predicate: ["pageStatusRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "actionsDropdownRendererTemplate", first: true, predicate: ["actionsDropdownRendererTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Page List with Shared Wrapper -->\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'core_page_list' }\">\n<div class=\"tw-table tw-w-full tw-h-full\">\n\n  <!-- Header Section with Filters -->\n  <div class=\"tw-table-row tw-h-0\">\n    <div class=\"tw-table-cell tw-px-6 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\n      <div class=\"tw-flex tw-flex-col sm:tw-flex-row tw-justify-between tw-items-start sm:tw-items-center tw-space-y-3 sm:tw-space-y-0\">\n\n        <!-- Title -->\n        <div class=\"tw-flex tw-items-center tw-space-x-2\">\n          <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">web</cide-ele-icon>\n          <h5 class=\"tw-text-base tw-font-medium tw-text-gray-900 tw-m-0\">Page Management</h5>\n        </div>\n\n        <!-- Actions -->\n        <div class=\"tw-flex tw-flex-col sm:tw-flex-row tw-items-start sm:tw-items-center tw-space-y-3 sm:tw-space-y-0 sm:tw-space-x-3\">\n          <!-- Add Page Button -->\n          @if (canCreate()) {\n            <button\n              cideEleButton\n              variant=\"primary\"\n              size=\"sm\"\n              (click)=\"createPage()\"\n              leftIcon=\"add\"\n              class=\"tw-whitespace-nowrap tw-flex tw-items-center tw-gap-2\">\n              Create New Page\n            </button>\n          }\n        </div>\n      </div>\n\n      <!-- Error Message -->\n      @if (error()) {\n        <div class=\"tw-mt-4 tw-p-4 tw-bg-red-50 tw-border tw-border-red-200 tw-rounded-md\">\n          <div class=\"tw-flex tw-items-start\">\n            <cide-ele-icon class=\"tw-text-red-400 tw-w-5 tw-h-5 tw-mt-0.5 tw-flex-shrink-0\">error</cide-ele-icon>\n            <div class=\"tw-ml-3\">\n              <h3 class=\"tw-text-sm tw-font-medium tw-text-red-800 tw-m-0\">Error</h3>\n              <p class=\"tw-text-sm tw-text-red-700 tw-mt-1 tw-m-0\">{{ error() }}</p>\n            </div>\n          </div>\n        </div>\n      }\n    </div>\n  </div>\n\n  <!-- Main Content Area -->\n  <div class=\"tw-table-row\">\n    <div class=\"tw-table-cell tw-h-full tw-relative\">\n      \n      <!-- Data Grid Component -->\n      <div class=\"tw-h-full tw-overflow-auto\">\n        <cide-ele-data-grid\n          [config]=\"gridConfig()\"\n          [templateRenderers]=\"getTemplateRenderers()\"\n          [actionHandlers]=\"actionHandlers\"\n          [serverSidePagination]=\"true\"\n          [totalServerItems]=\"totalItems()\"\n          [currentServerPage]=\"currentPage()\"\n          [currentServerPageSize]=\"pageSize()\"\n          (gridEvent)=\"onGridEvent($event)\">\n        </cide-ele-data-grid>\n      </div>\n\n    </div>\n  </div>\n\n</div>\n\n<!-- Page Details Renderer Template -->\n<ng-template #pageDetailsRendererTemplate let-row=\"row\" let-value=\"value\">\n  <div class=\"tw-flex tw-items-center tw-min-w-0\">\n    <!-- Page Icon -->\n    <div class=\"tw-flex-shrink-0\">\n      <cide-ele-icon class=\"tw-text-gray-400 tw-w-4 tw-h-4\">web</cide-ele-icon>\n    </div>\n    \n    <!-- Page Details -->\n    <div class=\"tw-ml-3 tw-min-w-0 tw-flex-1\">\n      <div class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-truncate\" \n           [title]=\"row.sypg_title\">\n        {{ row.sypg_title || 'Untitled' }}\n      </div>\n      @if (row.sypg_desc) {\n        <div class=\"tw-text-xs tw-text-gray-500 tw-truncate\" \n             [title]=\"row.sypg_desc\">\n          {{ row.sypg_desc }}\n        </div>\n      }\n    </div>\n  </div>\n</ng-template>\n\n<!-- Page Status Renderer Template -->\n<ng-template #pageStatusRendererTemplate let-row=\"row\" let-value=\"value\">\n  <span class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-whitespace-nowrap\"\n        [ngClass]=\"row.sypg_isactive ? 'tw-bg-green-100 tw-text-green-800' : 'tw-bg-red-100 tw-text-red-800'\">\n    {{ row.sypg_isactive ? 'Active' : 'Inactive' }}\n  </span>\n</ng-template>\n\n<!-- Actions Dropdown Renderer Template -->\n<ng-template #actionsDropdownRendererTemplate let-row=\"row\" let-value=\"value\">\n  <cide-ele-dropdown\n    [items]=\"getActionDropdownItems(row)\"\n    [config]=\"{ triggerIcon: 'more_vert', triggerSize: 'sm' }\"\n    (itemClick)=\"onDropdownItemClick($event, row)\">\n  </cide-ele-dropdown>\n</ng-template>\n</cide-lyt-shared-wrapper> ", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: CideEleDataGridComponent, selector: "cide-ele-data-grid", inputs: ["config", "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: 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 ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideCorePageListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: CideCorePageListComponent, isStandalone: true, selector: "cide-core-page-list", viewQueries: [{ propertyName: "pageDetailsRendererTemplate", first: true, predicate: ["pageDetailsRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "pageStatusRendererTemplate", first: true, predicate: ["pageStatusRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "actionsDropdownRendererTemplate", first: true, predicate: ["actionsDropdownRendererTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Page List with Shared Wrapper -->\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'core_page_list' }\">\n<div class=\"tw-table tw-w-full tw-h-full\">\n\n  <!-- Header Section with Filters -->\n  <div class=\"tw-table-row tw-h-0\">\n    <div class=\"tw-table-cell tw-px-6 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\n      <div class=\"tw-flex tw-flex-col sm:tw-flex-row tw-justify-between tw-items-start sm:tw-items-center tw-space-y-3 sm:tw-space-y-0\">\n\n        <!-- Title -->\n        <div class=\"tw-flex tw-items-center tw-space-x-2\">\n          <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">web</cide-ele-icon>\n          <h5 class=\"tw-text-base tw-font-medium tw-text-gray-900 tw-m-0\">Page Management</h5>\n        </div>\n\n        <!-- Actions -->\n        <div class=\"tw-flex tw-flex-col sm:tw-flex-row tw-items-start sm:tw-items-center tw-space-y-3 sm:tw-space-y-0 sm:tw-space-x-3\">\n          <!-- Add Page Button -->\n          @if (canCreate()) {\n            <button\n              cideEleButton\n              variant=\"primary\"\n              size=\"sm\"\n              (click)=\"createPage()\"\n              leftIcon=\"add\"\n              class=\"tw-whitespace-nowrap tw-flex tw-items-center tw-gap-2\">\n              Create New Page\n            </button>\n          }\n        </div>\n      </div>\n\n      <!-- Error Message -->\n      @if (error()) {\n        <div class=\"tw-mt-4 tw-p-4 tw-bg-red-50 tw-border tw-border-red-200 tw-rounded-md\">\n          <div class=\"tw-flex tw-items-start\">\n            <cide-ele-icon class=\"tw-text-red-400 tw-w-5 tw-h-5 tw-mt-0.5 tw-flex-shrink-0\">error</cide-ele-icon>\n            <div class=\"tw-ml-3\">\n              <h3 class=\"tw-text-sm tw-font-medium tw-text-red-800 tw-m-0\">Error</h3>\n              <p class=\"tw-text-sm tw-text-red-700 tw-mt-1 tw-m-0\">{{ error() }}</p>\n            </div>\n          </div>\n        </div>\n      }\n    </div>\n  </div>\n\n  <!-- Main Content Area -->\n  <div class=\"tw-table-row\">\n    <div class=\"tw-table-cell tw-h-full tw-relative\">\n      \n      <!-- Data Grid Component -->\n      <div class=\"tw-h-full tw-overflow-auto\">\n        <cide-ele-data-grid\n          [config]=\"gridConfig()\"\n          [templateRenderers]=\"getTemplateRenderers()\"\n          [actionHandlers]=\"actionHandlers\"\n          [serverSidePagination]=\"true\"\n          [totalServerItems]=\"totalItems()\"\n          [currentServerPage]=\"currentPage()\"\n          [currentServerPageSize]=\"pageSize()\"\n          (gridEvent)=\"onGridEvent($event)\">\n        </cide-ele-data-grid>\n      </div>\n\n    </div>\n  </div>\n\n</div>\n\n<!-- Page Details Renderer Template -->\n<ng-template #pageDetailsRendererTemplate let-row=\"row\" let-value=\"value\">\n  <div class=\"tw-flex tw-items-center tw-min-w-0\">\n    <!-- Page Icon -->\n    <div class=\"tw-flex-shrink-0\">\n      <cide-ele-icon class=\"tw-text-gray-400 tw-w-4 tw-h-4\">web</cide-ele-icon>\n    </div>\n    \n    <!-- Page Details -->\n    <div class=\"tw-ml-3 tw-min-w-0 tw-flex-1\">\n      <div class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-truncate\" \n           [title]=\"row.sypg_title\">\n        {{ row.sypg_title || 'Untitled' }}\n      </div>\n      @if (row.sypg_desc) {\n        <div class=\"tw-text-xs tw-text-gray-500 tw-truncate\" \n             [title]=\"row.sypg_desc\">\n          {{ row.sypg_desc }}\n        </div>\n      }\n    </div>\n  </div>\n</ng-template>\n\n<!-- Page Status Renderer Template -->\n<ng-template #pageStatusRendererTemplate let-row=\"row\" let-value=\"value\">\n  <span class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-whitespace-nowrap\"\n        [ngClass]=\"row.sypg_isactive ? 'tw-bg-green-100 tw-text-green-800' : 'tw-bg-red-100 tw-text-red-800'\">\n    {{ row.sypg_isactive ? 'Active' : 'Inactive' }}\n  </span>\n</ng-template>\n\n<!-- Actions Dropdown Renderer Template -->\n<ng-template #actionsDropdownRendererTemplate let-row=\"row\" let-value=\"value\">\n  <cide-ele-dropdown\n    [items]=\"getActionDropdownItems(row)\"\n    [config]=\"{ triggerIcon: 'more_vert', triggerSize: 'sm' }\"\n    (itemClick)=\"onDropdownItemClick($event, row)\">\n  </cide-ele-dropdown>\n</ng-template>\n</cide-lyt-shared-wrapper> ", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: CideEleDataGridComponent, selector: "cide-ele-data-grid", inputs: ["config", "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: 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: CideCorePageListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideCorePageListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cide-core-page-list', standalone: true, imports: [
                         CommonModule,
@@ -6386,7 +6432,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                         CideEleDropdownComponent,
                         CideLytSharedWrapperComponent
                     ], template: "<!-- Page List with Shared Wrapper -->\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'core_page_list' }\">\n<div class=\"tw-table tw-w-full tw-h-full\">\n\n  <!-- Header Section with Filters -->\n  <div class=\"tw-table-row tw-h-0\">\n    <div class=\"tw-table-cell tw-px-6 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\n      <div class=\"tw-flex tw-flex-col sm:tw-flex-row tw-justify-between tw-items-start sm:tw-items-center tw-space-y-3 sm:tw-space-y-0\">\n\n        <!-- Title -->\n        <div class=\"tw-flex tw-items-center tw-space-x-2\">\n          <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">web</cide-ele-icon>\n          <h5 class=\"tw-text-base tw-font-medium tw-text-gray-900 tw-m-0\">Page Management</h5>\n        </div>\n\n        <!-- Actions -->\n        <div class=\"tw-flex tw-flex-col sm:tw-flex-row tw-items-start sm:tw-items-center tw-space-y-3 sm:tw-space-y-0 sm:tw-space-x-3\">\n          <!-- Add Page Button -->\n          @if (canCreate()) {\n            <button\n              cideEleButton\n              variant=\"primary\"\n              size=\"sm\"\n              (click)=\"createPage()\"\n              leftIcon=\"add\"\n              class=\"tw-whitespace-nowrap tw-flex tw-items-center tw-gap-2\">\n              Create New Page\n            </button>\n          }\n        </div>\n      </div>\n\n      <!-- Error Message -->\n      @if (error()) {\n        <div class=\"tw-mt-4 tw-p-4 tw-bg-red-50 tw-border tw-border-red-200 tw-rounded-md\">\n          <div class=\"tw-flex tw-items-start\">\n            <cide-ele-icon class=\"tw-text-red-400 tw-w-5 tw-h-5 tw-mt-0.5 tw-flex-shrink-0\">error</cide-ele-icon>\n            <div class=\"tw-ml-3\">\n              <h3 class=\"tw-text-sm tw-font-medium tw-text-red-800 tw-m-0\">Error</h3>\n              <p class=\"tw-text-sm tw-text-red-700 tw-mt-1 tw-m-0\">{{ error() }}</p>\n            </div>\n          </div>\n        </div>\n      }\n    </div>\n  </div>\n\n  <!-- Main Content Area -->\n  <div class=\"tw-table-row\">\n    <div class=\"tw-table-cell tw-h-full tw-relative\">\n      \n      <!-- Data Grid Component -->\n      <div class=\"tw-h-full tw-overflow-auto\">\n        <cide-ele-data-grid\n          [config]=\"gridConfig()\"\n          [templateRenderers]=\"getTemplateRenderers()\"\n          [actionHandlers]=\"actionHandlers\"\n          [serverSidePagination]=\"true\"\n          [totalServerItems]=\"totalItems()\"\n          [currentServerPage]=\"currentPage()\"\n          [currentServerPageSize]=\"pageSize()\"\n          (gridEvent)=\"onGridEvent($event)\">\n        </cide-ele-data-grid>\n      </div>\n\n    </div>\n  </div>\n\n</div>\n\n<!-- Page Details Renderer Template -->\n<ng-template #pageDetailsRendererTemplate let-row=\"row\" let-value=\"value\">\n  <div class=\"tw-flex tw-items-center tw-min-w-0\">\n    <!-- Page Icon -->\n    <div class=\"tw-flex-shrink-0\">\n      <cide-ele-icon class=\"tw-text-gray-400 tw-w-4 tw-h-4\">web</cide-ele-icon>\n    </div>\n    \n    <!-- Page Details -->\n    <div class=\"tw-ml-3 tw-min-w-0 tw-flex-1\">\n      <div class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-truncate\" \n           [title]=\"row.sypg_title\">\n        {{ row.sypg_title || 'Untitled' }}\n      </div>\n      @if (row.sypg_desc) {\n        <div class=\"tw-text-xs tw-text-gray-500 tw-truncate\" \n             [title]=\"row.sypg_desc\">\n          {{ row.sypg_desc }}\n        </div>\n      }\n    </div>\n  </div>\n</ng-template>\n\n<!-- Page Status Renderer Template -->\n<ng-template #pageStatusRendererTemplate let-row=\"row\" let-value=\"value\">\n  <span class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-whitespace-nowrap\"\n        [ngClass]=\"row.sypg_isactive ? 'tw-bg-green-100 tw-text-green-800' : 'tw-bg-red-100 tw-text-red-800'\">\n    {{ row.sypg_isactive ? 'Active' : 'Inactive' }}\n  </span>\n</ng-template>\n\n<!-- Actions Dropdown Renderer Template -->\n<ng-template #actionsDropdownRendererTemplate let-row=\"row\" let-value=\"value\">\n  <cide-ele-dropdown\n    [items]=\"getActionDropdownItems(row)\"\n    [config]=\"{ triggerIcon: 'more_vert', triggerSize: 'sm' }\"\n    (itemClick)=\"onDropdownItemClick($event, row)\">\n  </cide-ele-dropdown>\n</ng-template>\n</cide-lyt-shared-wrapper> " }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { pageDetailsRendererTemplate: [{ type: i0.ViewChild, args: ['pageDetailsRendererTemplate', { isSignal: true }] }], pageStatusRendererTemplate: [{ type: i0.ViewChild, args: ['pageStatusRendererTemplate', { isSignal: true }] }], actionsDropdownRendererTemplate: [{ type: i0.ViewChild, args: ['actionsDropdownRendererTemplate', { isSignal: true }] }] } });
 
 var pageList_component = /*#__PURE__*/Object.freeze({
     __proto__: null,
@@ -6485,10 +6531,10 @@ class CideCorePageThemeService {
         console.error('Page Theme Service Error:', errorMessage);
         return throwError(() => new Error(errorMessage));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCorePageThemeService, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCorePageThemeService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideCorePageThemeService, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideCorePageThemeService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCorePageThemeService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideCorePageThemeService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -7260,10 +7306,10 @@ class CideCorePageThemeComponent {
     onPreviewImageUploadProgress(progress) {
         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 -->\n<div class=\"tw-flex tw-h-full tw-w-full\">\n  \n  <!-- Left: Form and header (60%) -->\n  <div class=\"tw-w-full lg:tw-w-3/5 tw-flex tw-flex-col tw-border-r tw-border-gray-200\">\n\n  <!-- Header Section -->\n    <div class=\"tw-px-6 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-4\">\n          <button cideEleButton variant=\"ghost\" size=\"sm\" (click)=\"goBack();\" class=\"tw-text-gray-600 hover:tw-text-gray-900\">\n          <cide-ele-icon class=\"tw-w-4 tw-h-4\">arrow_back</cide-ele-icon>\n        </button>\n        <div class=\"tw-flex tw-items-center tw-space-x-2\">\n          <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">palette</cide-ele-icon>\n          <div>\n            <h5 class=\"tw-text-base tw-font-medium tw-text-gray-900 tw-m-0\">Theme Management</h5>\n            <p class=\"tw-text-sm tw-text-gray-500 tw-m-0\">Page: {{ pageTitle() }}</p>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Error Message -->\n    @if (error()) {\n    <div class=\"tw-mt-4 tw-p-4 tw-bg-red-50 tw-border tw-border-red-200 tw-rounded-md\">\n      <div class=\"tw-flex tw-items-start\">\n        <cide-ele-icon name=\"error\" class=\"tw-text-red-400 tw-w-5 tw-h-5 tw-mt-0.5 tw-flex-shrink-0\"></cide-ele-icon>\n        <div class=\"tw-ml-3\">\n          <h3 class=\"tw-text-sm tw-font-medium tw-text-red-800 tw-m-0\">Error</h3>\n          <p class=\"tw-text-sm tw-text-red-700 tw-mt-1 tw-m-0\">{{ error() }}</p>\n        </div>\n      </div>\n    </div>\n    }\n  </div>\n\n    <!-- Quick Add/Edit Form Section -->\n    <div class=\"tw-px-6 tw-py-3 tw-bg-white tw-overflow-auto\">\n    <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-2\">\n      <div class=\"tw-flex tw-items-center tw-space-x-3\">\n        <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\n        <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-m-0\">{{ isEditMode() ? 'Edit Theme' : 'Quick Add Theme' }}</h6>\n      </div>\n    </div>\n\n      <!-- Form (kept as-is) -->\n    <form [formGroup]=\"themeForm\" (ngSubmit)=\"saveTheme()\" class=\"tw-space-y-4\">\n      <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-[1fr_200px] tw-gap-4\">\n        <!-- Left Side: All Input Fields -->\n        <div class=\"tw-space-y-4\">\n          <!-- Row 1: Theme Title and Theme Code -->\n          <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\n            <div class=\"tw-space-y-2\">\n                <cide-ele-input id=\"sytm_title\" formControlName=\"sytm_title\" placeholder=\"Enter theme title\" label=\"Theme Title\" size=\"sm\"></cide-ele-input>\n            </div>\n            <div class=\"tw-space-y-2\">\n                <cide-ele-input id=\"sytm_theme_code\" formControlName=\"sytm_theme_code\" placeholder=\"Enter theme code\" label=\"Theme Code\" size=\"sm\"></cide-ele-input>\n            </div>\n          </div>\n          \n          <!-- Row 2: Sub Title and Active Status -->\n          <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\n            <div class=\"tw-space-y-2\">\n                <cide-ele-input id=\"sytm_sub_title\" formControlName=\"sytm_sub_title\" placeholder=\"Enter sub title\" label=\"Sub Title\" size=\"sm\"></cide-ele-input>\n            </div>\n            <div class=\"tw-space-y-2 tw-flex tw-items-center\">\n                <cide-ele-input\n                  id=\"sytm_isactive_cb\"\n                  type=\"checkbox\"\n                  label=\"Active\"\n                size=\"sm\"\n                  formControlName=\"sytm_isactive\">\n                </cide-ele-input>\n            </div>\n          </div>\n          \n          <!-- Row 3: Description -->\n          <div class=\"tw-space-y-2\">\n              <cide-ele-textarea id=\"sytm_desc\" formControlName=\"sytm_desc\" placeholder=\"Enter theme description\" rows=\"2\" label=\"Description\" size=\"sm\"></cide-ele-textarea>\n          </div>\n        </div>\n        \n        <!-- Right Side: File Upload -->\n        <div class=\"tw-flex tw-flex-col tw-justify-start tw-items-center tw-p-0\">\n            <cide-ele-file-input \n              id=\"sytm_preview_id_fm\" \n              formControlName=\"sytm_preview_id_fm\"\n              accept=\"image/*\"\n              [showPreview]=\"true\"\n              [previewBoxMode]=\"true\"\n              [showFileName]=\"false\"\n              previewWidth=\"180px\"\n              previewHeight=\"120px\"\n              placeholderText=\"Upload Preview Image\"\n              placeholderIcon=\"image\"\n              [autoUpload]=\"true\"\n              [uploadData]=\"getPreviewImageUploadData()\"\n              (uploadSuccess)=\"onPreviewImageUploadSuccess($event)\"\n              (uploadError)=\"onPreviewImageUploadError($event)\"\n              (uploadProgressChange)=\"onPreviewImageUploadProgress($event)\">\n            </cide-ele-file-input>\n        </div>\n      </div>\n      \n      <!-- Configuration JSON -->\n      <div class=\"tw-space-y-2\">\n            <cide-ele-json-editor label=\"Configuration JSON\" formControlName=\"sytm_configuration\" [required]=\"true\" [config]=\"{\n               showLineNumbers: true,\n               autoFormat: true,\n               validateOnChange: true,\n               minHeight: 150,\n               maxHeight: 300,\n               placeholder: 'Enter theme configuration JSON...'\n              }\" helperText=\"Enter valid JSON configuration for the theme\"></cide-ele-json-editor>\n         </div>\n      <!-- Layout Configuration + Selection -->\n      <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-2 tw-gap-6\">\n        <div class=\"tw-space-y-2\">\n            <div class=\"tw-text-sm tw-font-medium tw-text-gray-700\">Layout & Selection</div>\n            <!-- Selected toggle -->\n            <div class=\"tw-bg-white tw-border tw-border-gray-200 tw-rounded-md tw-px-3 tw-py-2\">\n              <cide-ele-input\n                id=\"sytm_isselected\"\n                type=\"checkbox\"\n                label=\"Selected (Default)\"\n                  size=\"sm\"\n                formControlName=\"sytm_isselected\">\n              </cide-ele-input>\n              </div>\n            <div formGroupName=\"sytm_layout\" class=\"tw-bg-white tw-border tw-border-gray-200 tw-rounded-md tw-divide-y tw-overflow-hidden\">\n              <!-- Sidebar -->\n              <div class=\"tw-px-3 tw-py-2\" formGroupName=\"sytm_layout_sidebar\">\n                <cide-ele-input id=\"layout_sidebar_status\" type=\"checkbox\" label=\"Sidebar\" size=\"sm\" formControlName=\"status\"></cide-ele-input>\n            </div>\n            <!-- Header -->\n              <div class=\"tw-px-3 tw-py-2\" formGroupName=\"sytm_layout_header\">\n                <cide-ele-input id=\"layout_header_status\" type=\"checkbox\" label=\"Header\" size=\"sm\" formControlName=\"status\"></cide-ele-input>\n              </div>\n              <!-- Footer -->\n              <div class=\"tw-px-3 tw-py-2\" formGroupName=\"sytm_layout_footer\">\n                <cide-ele-input id=\"layout_footer_status\" type=\"checkbox\" label=\"Footer\" size=\"sm\" formControlName=\"status\"></cide-ele-input>\n              </div>\n              <!-- Breadcrumb -->\n              <div class=\"tw-px-3 tw-py-2\" formGroupName=\"sytm_layout_breadcrumb\">\n                <cide-ele-input id=\"layout_breadcrumb_status\" type=\"checkbox\" label=\"Breadcrumb\" size=\"sm\" formControlName=\"status\"></cide-ele-input>\n              </div>\n              <!-- Console -->\n              <div class=\"tw-px-3 tw-py-2\" formGroupName=\"sytm_layout_console\">\n                <cide-ele-input id=\"layout_console_status\" type=\"checkbox\" label=\"Console\" size=\"sm\" formControlName=\"status\"></cide-ele-input>\n            </div>\n              <!-- Request -->\n              <div class=\"tw-px-3 tw-py-2\" formGroupName=\"sytm_layout_request\">\n                <cide-ele-input id=\"layout_request_status\" type=\"checkbox\" label=\"Request\" size=\"sm\" formControlName=\"status\"></cide-ele-input>\n              </div>\n            </div>\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>\n        </div>\n        \n        <!-- Drawer Configuration -->\n        <div class=\"tw-space-y-2\">\n            <div class=\"tw-flex tw-items-center tw-justify-between\">\n              <div class=\"tw-text-sm tw-font-medium tw-text-gray-700\">Drawers</div>\n              <button cideEleButton type=\"button\" size=\"xs\" variant=\"outline\" (click)=\"addDrawer()\">\n                Add Drawer\n              </button>\n            </div>\n\n            <div formGroupName=\"sytm_layout\">\n              <div class=\"tw-space-y-2\" formArrayName=\"sytm_layout_drawer\">\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\">\n                  <cide-ele-input id=\"drawer_active_{{i}}\" type=\"checkbox\" label=\"Active\" size=\"sm\" formControlName=\"syth_status\"></cide-ele-input>\n                  <div class=\"tw-flex-1\">\n                <cide-ele-select\n                      id=\"drawer_config_{{i}}\"\n                      label=\"Drawer For\"\n                  size=\"sm\"\n                      [options]=\"drawerConfigOptions\"\n                      formControlName=\"syth_config_syco_for\">\n                </cide-ele-select>\n              </div>\n                  <button cideEleButton type=\"button\" size=\"xs\" variant=\"ghost\" (click)=\"removeDrawer(i)\">\n                    <cide-ele-icon class=\"tw-w-4 tw-h-4\">delete</cide-ele-icon>\n                  </button>\n            </div>\n                <p class=\"tw-text-xs tw-text-gray-500\">Configure multiple drawers as needed.</p>\n              </div>\n            </div>\n        </div>\n      </div>\n\n      <!-- Form Actions -->\n        <div class=\"tw-flex tw-flex-col tw-gap-2 tw-pt-4 tw-border-t tw-border-gray-200\">\n          <div class=\"tw-flex tw-items-center tw-justify-end tw-space-x-3\">\n            <button cideEleButton type=\"button\" variant=\"outline\" (click)=\"cancelForm()\" [disabled]=\"loading()\">Cancel</button>\n            <button cideEleButton type=\"submit\" variant=\"primary\" leftIcon=\"add\" [disabled]=\"!themeForm.valid || loading()\" [loading]=\"loading()\">\n          {{ isEditMode() ? 'Update Theme' : 'Create Theme' }}\n        </button>\n          </div>\n      </div>\n    </form>\n    </div>\n  </div>\n\n  <!-- Right: Theme gallery (40%) -->\n  <div class=\"tw-hidden lg:tw-flex tw-w-2/5 tw-flex-col\">\n    <!-- (Header consolidated above) -->\n\n    <!-- Gallery list -->\n    <div class=\"tw-flex-1 tw-overflow-auto tw-bg-gray-50\">\n      <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3 tw-p-4\">\n        @for (theme of filteredThemes(); track theme._id) {\n          <div class=\"tw-rounded-md tw-transition tw-cursor-pointer tw-relative\"\n               [ngClass]=\"theme.sytm_isselected\n                 ? 'tw-border tw-border-blue-500 tw-ring-2 tw-ring-blue-200 tw-bg-blue-50/50'\n                 : 'tw-bg-white tw-border tw-border-gray-200 hover:tw-shadow-sm'\"\n               (click)=\"editTheme(theme)\"\n               role=\"button\"\n               tabindex=\"0\"\n               [attr.aria-selected]=\"theme.sytm_isselected ? 'true' : 'false'\"\n               [attr.aria-label]=\"'Edit theme ' + (theme.sytm_title || theme.sytm_theme_code)\"\n               (keydown.enter)=\"editTheme(theme)\"\n               (keydown.space)=\"$event.preventDefault(); editTheme(theme)\">\n\n            <!-- Selected badge -->\n            <div *ngIf=\"theme.sytm_isselected\"\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\">\n              <cide-ele-icon class=\"tw-w-4 tw-h-4\">check</cide-ele-icon>\n            </div>\n \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\">\n              @if (theme.sytm_preview_id_fm) {\n                <img \n                  cideEleFileImage \n                  [fileId]=\"theme.sytm_preview_id_fm\" \n                  [altText]=\"'Theme Preview'\"\n                  class=\"tw-w-full tw-h-full tw-object-cover\" />\n              } @else {\n                <div class=\"tw-text-gray-400 tw-text-xs\">No preview</div>\n              }\n            </div>\n            <div class=\"tw-p-3 tw-space-y-1\">\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>\n              <div class=\"tw-text-xs tw-text-gray-500 tw-truncate\" [title]=\"theme.sytm_theme_code\">{{ theme.sytm_theme_code }}</div>\n              <div class=\"tw-flex tw-items-center tw-justify-between tw-pt-1\">\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'\">\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>\n                  {{ theme.sytm_isactive ? 'Active' : 'Inactive' }}\n                </span>\n                <div class=\"tw-flex tw-items-center tw-gap-1\">\n                  <!-- Set Selected Button - Clear and Simple -->\n                  @if (theme.sytm_isselected) {\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\">\n                      <cide-ele-icon class=\"tw-w-3 tw-h-3\">check</cide-ele-icon>\n                      Selected\n                    </span>\n                  } @else {\n                    <button cideEleButton \n                            variant=\"outline\" \n                            size=\"xs\"\n                            (click)=\"$event.stopPropagation(); setSelectedTheme(theme)\"\n                            [attr.aria-label]=\"'Select ' + (theme.sytm_title || theme.sytm_theme_code) + ' theme'\"\n                            class=\"tw-text-xs\">\n                      Select\n                    </button>\n                  }\n                  <button cideEleButton variant=\"ghost\" size=\"xs\" (click)=\"$event.stopPropagation(); editTheme(theme)\"\n                          [attr.aria-label]=\"'Edit theme ' + (theme.sytm_title || theme.sytm_theme_code)\">\n                    <cide-ele-icon class=\"tw-w-4 tw-h-4\">edit</cide-ele-icon>\n                  </button>\n                  <button cideEleButton variant=\"ghost\" size=\"xs\" (click)=\"$event.stopPropagation(); deleteTheme(theme)\"\n                          [attr.aria-label]=\"'Delete theme ' + (theme.sytm_title || theme.sytm_theme_code)\">\n                    <cide-ele-icon class=\"tw-w-4 tw-h-4\">delete</cide-ele-icon>\n                  </button>\n                </div>\n              </div>\n            </div>\n          </div>\n        }\n\n        @if (!loading() && filteredThemes().length === 0) {\n          <div class=\"tw-col-span-full tw-text-center tw-text-xs tw-text-gray-500 tw-py-8\">No themes found</div>\n        }\n  </div>\n    </div>\n  </div>\n</div>\n\n<!-- \n  Angular Template References for Grid Renderers (Best Practice)\n  \n  These ng-template elements represent the Angular best practice for custom rendering.\n  They provide:\n  - Type safety with template context\n  - Component lifecycle integration\n  - Change detection optimization\n  - Proper event handling\n  - Accessibility features\n  \n  Note: Current data grid uses string renderers for compatibility.\n  Templates are maintained for future component enhancement.\n-->\n\n<!-- Theme Details Renderer Template -->\n<ng-template #themeDetailsRendererTemplate let-row=\"row\" let-value=\"value\">\n  <div class=\"tw-flex tw-items-center tw-min-w-0\">\n    <!-- Theme Icon -->\n    <div class=\"tw-flex-shrink-0\">\n      <cide-ele-icon \n        class=\"tw-text-purple-600\" \n        size=\"xs\">\n        palette\n      </cide-ele-icon>\n    </div>\n    \n    <!-- Theme Details -->\n    <div class=\"tw-ml-3 tw-min-w-0 tw-flex-1\">\n      <div class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-truncate\" \n           [title]=\"row.sytm_title\">\n        {{ row.sytm_title || 'Untitled' }}\n      </div>\n      @if (row.sytm_desc) {\n        <div class=\"tw-text-xs tw-text-gray-500 tw-truncate\" \n             [title]=\"row.sytm_desc\">\n          {{ row.sytm_desc }}\n        </div>\n      }\n    </div>\n  </div>\n</ng-template>\n\n<!-- Theme Status Renderer Template -->\n<ng-template #themeStatusRendererTemplate let-row=\"row\" let-value=\"value\">\n  <span class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-whitespace-nowrap\"\n        [ngClass]=\"row.sytm_isactive ? 'tw-bg-green-100 tw-text-green-800' : 'tw-bg-red-100 tw-text-red-800'\">\n    {{ row.sytm_isactive ? 'Active' : 'Inactive' }}\n  </span>\n</ng-template>\n\n<!-- Actions Dropdown Renderer Template -->\n<ng-template #actionsDropdownRendererTemplate let-row=\"row\" let-value=\"value\">\n  <cide-ele-dropdown \n    [items]=\"getActionDropdownItems(row)\"\n    [config]=\"{ triggerIcon: 'more_vert', triggerSize: 'sm' }\"\n    (itemClick)=\"onDropdownItemClick($event, row)\">\n  </cide-ele-dropdown>\n</ng-template> ", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "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", "ngModel", "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 ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideCorePageThemeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", 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 -->\n<div class=\"tw-flex tw-h-full tw-w-full\">\n  \n  <!-- Left: Form and header (60%) -->\n  <div class=\"tw-w-full lg:tw-w-3/5 tw-flex tw-flex-col tw-border-r tw-border-gray-200\">\n\n  <!-- Header Section -->\n    <div class=\"tw-px-6 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-4\">\n          <button cideEleButton variant=\"ghost\" size=\"sm\" (click)=\"goBack();\" class=\"tw-text-gray-600 hover:tw-text-gray-900\">\n          <cide-ele-icon class=\"tw-w-4 tw-h-4\">arrow_back</cide-ele-icon>\n        </button>\n        <div class=\"tw-flex tw-items-center tw-space-x-2\">\n          <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">palette</cide-ele-icon>\n          <div>\n            <h5 class=\"tw-text-base tw-font-medium tw-text-gray-900 tw-m-0\">Theme Management</h5>\n            <p class=\"tw-text-sm tw-text-gray-500 tw-m-0\">Page: {{ pageTitle() }}</p>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Error Message -->\n    @if (error()) {\n    <div class=\"tw-mt-4 tw-p-4 tw-bg-red-50 tw-border tw-border-red-200 tw-rounded-md\">\n      <div class=\"tw-flex tw-items-start\">\n        <cide-ele-icon name=\"error\" class=\"tw-text-red-400 tw-w-5 tw-h-5 tw-mt-0.5 tw-flex-shrink-0\"></cide-ele-icon>\n        <div class=\"tw-ml-3\">\n          <h3 class=\"tw-text-sm tw-font-medium tw-text-red-800 tw-m-0\">Error</h3>\n          <p class=\"tw-text-sm tw-text-red-700 tw-mt-1 tw-m-0\">{{ error() }}</p>\n        </div>\n      </div>\n    </div>\n    }\n  </div>\n\n    <!-- Quick Add/Edit Form Section -->\n    <div class=\"tw-px-6 tw-py-3 tw-bg-white tw-overflow-auto\">\n    <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-2\">\n      <div class=\"tw-flex tw-items-center tw-space-x-3\">\n        <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\n        <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-m-0\">{{ isEditMode() ? 'Edit Theme' : 'Quick Add Theme' }}</h6>\n      </div>\n    </div>\n\n      <!-- Form (kept as-is) -->\n    <form [formGroup]=\"themeForm\" (ngSubmit)=\"saveTheme()\" class=\"tw-space-y-4\">\n      <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-[1fr_200px] tw-gap-4\">\n        <!-- Left Side: All Input Fields -->\n        <div class=\"tw-space-y-4\">\n          <!-- Row 1: Theme Title and Theme Code -->\n          <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\n            <div class=\"tw-space-y-2\">\n                <cide-ele-input id=\"sytm_title\" formControlName=\"sytm_title\" placeholder=\"Enter theme title\" label=\"Theme Title\" size=\"sm\"></cide-ele-input>\n            </div>\n            <div class=\"tw-space-y-2\">\n                <cide-ele-input id=\"sytm_theme_code\" formControlName=\"sytm_theme_code\" placeholder=\"Enter theme code\" label=\"Theme Code\" size=\"sm\"></cide-ele-input>\n            </div>\n          </div>\n          \n          <!-- Row 2: Sub Title and Active Status -->\n          <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\n            <div class=\"tw-space-y-2\">\n                <cide-ele-input id=\"sytm_sub_title\" formControlName=\"sytm_sub_title\" placeholder=\"Enter sub title\" label=\"Sub Title\" size=\"sm\"></cide-ele-input>\n            </div>\n            <div class=\"tw-space-y-2 tw-flex tw-items-center\">\n                <cide-ele-input\n                  id=\"sytm_isactive_cb\"\n                  type=\"checkbox\"\n                  label=\"Active\"\n                size=\"sm\"\n                  formControlName=\"sytm_isactive\">\n                </cide-ele-input>\n            </div>\n          </div>\n          \n          <!-- Row 3: Description -->\n          <div class=\"tw-space-y-2\">\n              <cide-ele-textarea id=\"sytm_desc\" formControlName=\"sytm_desc\" placeholder=\"Enter theme description\" rows=\"2\" label=\"Description\" size=\"sm\"></cide-ele-textarea>\n          </div>\n        </div>\n        \n        <!-- Right Side: File Upload -->\n        <div class=\"tw-flex tw-flex-col tw-justify-start tw-items-center tw-p-0\">\n            <cide-ele-file-input \n              id=\"sytm_preview_id_fm\" \n              formControlName=\"sytm_preview_id_fm\"\n              accept=\"image/*\"\n              [showPreview]=\"true\"\n              [previewBoxMode]=\"true\"\n              [showFileName]=\"false\"\n              previewWidth=\"180px\"\n              previewHeight=\"120px\"\n              placeholderText=\"Upload Preview Image\"\n              placeholderIcon=\"image\"\n              [autoUpload]=\"true\"\n              [uploadData]=\"getPreviewImageUploadData()\"\n              (uploadSuccess)=\"onPreviewImageUploadSuccess($event)\"\n              (uploadError)=\"onPreviewImageUploadError($event)\"\n              (uploadProgressChange)=\"onPreviewImageUploadProgress($event)\">\n            </cide-ele-file-input>\n        </div>\n      </div>\n      \n      <!-- Configuration JSON -->\n      <div class=\"tw-space-y-2\">\n            <cide-ele-json-editor label=\"Configuration JSON\" formControlName=\"sytm_configuration\" [required]=\"true\" [config]=\"{\n               showLineNumbers: true,\n               autoFormat: true,\n               validateOnChange: true,\n               minHeight: 150,\n               maxHeight: 300,\n               placeholder: 'Enter theme configuration JSON...'\n              }\" helperText=\"Enter valid JSON configuration for the theme\"></cide-ele-json-editor>\n         </div>\n      <!-- Layout Configuration + Selection -->\n      <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-2 tw-gap-6\">\n        <div class=\"tw-space-y-2\">\n            <div class=\"tw-text-sm tw-font-medium tw-text-gray-700\">Layout & Selection</div>\n            <!-- Selected toggle -->\n            <div class=\"tw-bg-white tw-border tw-border-gray-200 tw-rounded-md tw-px-3 tw-py-2\">\n              <cide-ele-input\n                id=\"sytm_isselected\"\n                type=\"checkbox\"\n                label=\"Selected (Default)\"\n                  size=\"sm\"\n                formControlName=\"sytm_isselected\">\n              </cide-ele-input>\n              </div>\n            <div formGroupName=\"sytm_layout\" class=\"tw-bg-white tw-border tw-border-gray-200 tw-rounded-md tw-divide-y tw-overflow-hidden\">\n              <!-- Sidebar -->\n              <div class=\"tw-px-3 tw-py-2\" formGroupName=\"sytm_layout_sidebar\">\n                <cide-ele-input id=\"layout_sidebar_status\" type=\"checkbox\" label=\"Sidebar\" size=\"sm\" formControlName=\"status\"></cide-ele-input>\n            </div>\n            <!-- Header -->\n              <div class=\"tw-px-3 tw-py-2\" formGroupName=\"sytm_layout_header\">\n                <cide-ele-input id=\"layout_header_status\" type=\"checkbox\" label=\"Header\" size=\"sm\" formControlName=\"status\"></cide-ele-input>\n              </div>\n              <!-- Footer -->\n              <div class=\"tw-px-3 tw-py-2\" formGroupName=\"sytm_layout_footer\">\n                <cide-ele-input id=\"layout_footer_status\" type=\"checkbox\" label=\"Footer\" size=\"sm\" formControlName=\"status\"></cide-ele-input>\n              </div>\n              <!-- Breadcrumb -->\n              <div class=\"tw-px-3 tw-py-2\" formGroupName=\"sytm_layout_breadcrumb\">\n                <cide-ele-input id=\"layout_breadcrumb_status\" type=\"checkbox\" label=\"Breadcrumb\" size=\"sm\" formControlName=\"status\"></cide-ele-input>\n              </div>\n              <!-- Console -->\n              <div class=\"tw-px-3 tw-py-2\" formGroupName=\"sytm_layout_console\">\n                <cide-ele-input id=\"layout_console_status\" type=\"checkbox\" label=\"Console\" size=\"sm\" formControlName=\"status\"></cide-ele-input>\n            </div>\n              <!-- Request -->\n              <div class=\"tw-px-3 tw-py-2\" formGroupName=\"sytm_layout_request\">\n                <cide-ele-input id=\"layout_request_status\" type=\"checkbox\" label=\"Request\" size=\"sm\" formControlName=\"status\"></cide-ele-input>\n              </div>\n            </div>\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>\n        </div>\n        \n        <!-- Drawer Configuration -->\n        <div class=\"tw-space-y-2\">\n            <div class=\"tw-flex tw-items-center tw-justify-between\">\n              <div class=\"tw-text-sm tw-font-medium tw-text-gray-700\">Drawers</div>\n              <button cideEleButton type=\"button\" size=\"xs\" variant=\"outline\" (click)=\"addDrawer()\">\n                Add Drawer\n              </button>\n            </div>\n\n            <div formGroupName=\"sytm_layout\">\n              <div class=\"tw-space-y-2\" formArrayName=\"sytm_layout_drawer\">\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\">\n                  <cide-ele-input id=\"drawer_active_{{i}}\" type=\"checkbox\" label=\"Active\" size=\"sm\" formControlName=\"syth_status\"></cide-ele-input>\n                  <div class=\"tw-flex-1\">\n                <cide-ele-select\n                      id=\"drawer_config_{{i}}\"\n                      label=\"Drawer For\"\n                  size=\"sm\"\n                      [options]=\"drawerConfigOptions\"\n                      formControlName=\"syth_config_syco_for\">\n                </cide-ele-select>\n              </div>\n                  <button cideEleButton type=\"button\" size=\"xs\" variant=\"ghost\" (click)=\"removeDrawer(i)\">\n                    <cide-ele-icon class=\"tw-w-4 tw-h-4\">delete</cide-ele-icon>\n                  </button>\n            </div>\n                <p class=\"tw-text-xs tw-text-gray-500\">Configure multiple drawers as needed.</p>\n              </div>\n            </div>\n        </div>\n      </div>\n\n      <!-- Form Actions -->\n        <div class=\"tw-flex tw-flex-col tw-gap-2 tw-pt-4 tw-border-t tw-border-gray-200\">\n          <div class=\"tw-flex tw-items-center tw-justify-end tw-space-x-3\">\n            <button cideEleButton type=\"button\" variant=\"outline\" (click)=\"cancelForm()\" [disabled]=\"loading()\">Cancel</button>\n            <button cideEleButton type=\"submit\" variant=\"primary\" leftIcon=\"add\" [disabled]=\"!themeForm.valid || loading()\" [loading]=\"loading()\">\n          {{ isEditMode() ? 'Update Theme' : 'Create Theme' }}\n        </button>\n          </div>\n      </div>\n    </form>\n    </div>\n  </div>\n\n  <!-- Right: Theme gallery (40%) -->\n  <div class=\"tw-hidden lg:tw-flex tw-w-2/5 tw-flex-col\">\n    <!-- (Header consolidated above) -->\n\n    <!-- Gallery list -->\n    <div class=\"tw-flex-1 tw-overflow-auto tw-bg-gray-50\">\n      <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3 tw-p-4\">\n        @for (theme of filteredThemes(); track theme._id) {\n          <div class=\"tw-rounded-md tw-transition tw-cursor-pointer tw-relative\"\n               [ngClass]=\"theme.sytm_isselected\n                 ? 'tw-border tw-border-blue-500 tw-ring-2 tw-ring-blue-200 tw-bg-blue-50/50'\n                 : 'tw-bg-white tw-border tw-border-gray-200 hover:tw-shadow-sm'\"\n               (click)=\"editTheme(theme)\"\n               role=\"button\"\n               tabindex=\"0\"\n               [attr.aria-selected]=\"theme.sytm_isselected ? 'true' : 'false'\"\n               [attr.aria-label]=\"'Edit theme ' + (theme.sytm_title || theme.sytm_theme_code)\"\n               (keydown.enter)=\"editTheme(theme)\"\n               (keydown.space)=\"$event.preventDefault(); editTheme(theme)\">\n\n            <!-- Selected badge -->\n            <div *ngIf=\"theme.sytm_isselected\"\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\">\n              <cide-ele-icon class=\"tw-w-4 tw-h-4\">check</cide-ele-icon>\n            </div>\n \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\">\n              @if (theme.sytm_preview_id_fm) {\n                <img \n                  cideEleFileImage \n                  [fileId]=\"theme.sytm_preview_id_fm\" \n                  [altText]=\"'Theme Preview'\"\n                  class=\"tw-w-full tw-h-full tw-object-cover\" />\n              } @else {\n                <div class=\"tw-text-gray-400 tw-text-xs\">No preview</div>\n              }\n            </div>\n            <div class=\"tw-p-3 tw-space-y-1\">\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>\n              <div class=\"tw-text-xs tw-text-gray-500 tw-truncate\" [title]=\"theme.sytm_theme_code\">{{ theme.sytm_theme_code }}</div>\n              <div class=\"tw-flex tw-items-center tw-justify-between tw-pt-1\">\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'\">\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>\n                  {{ theme.sytm_isactive ? 'Active' : 'Inactive' }}\n                </span>\n                <div class=\"tw-flex tw-items-center tw-gap-1\">\n                  <!-- Set Selected Button - Clear and Simple -->\n                  @if (theme.sytm_isselected) {\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\">\n                      <cide-ele-icon class=\"tw-w-3 tw-h-3\">check</cide-ele-icon>\n                      Selected\n                    </span>\n                  } @else {\n                    <button cideEleButton \n                            variant=\"outline\" \n                            size=\"xs\"\n                            (click)=\"$event.stopPropagation(); setSelectedTheme(theme)\"\n                            [attr.aria-label]=\"'Select ' + (theme.sytm_title || theme.sytm_theme_code) + ' theme'\"\n                            class=\"tw-text-xs\">\n                      Select\n                    </button>\n                  }\n                  <button cideEleButton variant=\"ghost\" size=\"xs\" (click)=\"$event.stopPropagation(); editTheme(theme)\"\n                          [attr.aria-label]=\"'Edit theme ' + (theme.sytm_title || theme.sytm_theme_code)\">\n                    <cide-ele-icon class=\"tw-w-4 tw-h-4\">edit</cide-ele-icon>\n                  </button>\n                  <button cideEleButton variant=\"ghost\" size=\"xs\" (click)=\"$event.stopPropagation(); deleteTheme(theme)\"\n                          [attr.aria-label]=\"'Delete theme ' + (theme.sytm_title || theme.sytm_theme_code)\">\n                    <cide-ele-icon class=\"tw-w-4 tw-h-4\">delete</cide-ele-icon>\n                  </button>\n                </div>\n              </div>\n            </div>\n          </div>\n        }\n\n        @if (!loading() && filteredThemes().length === 0) {\n          <div class=\"tw-col-span-full tw-text-center tw-text-xs tw-text-gray-500 tw-py-8\">No themes found</div>\n        }\n  </div>\n    </div>\n  </div>\n</div>\n\n<!-- \n  Angular Template References for Grid Renderers (Best Practice)\n  \n  These ng-template elements represent the Angular best practice for custom rendering.\n  They provide:\n  - Type safety with template context\n  - Component lifecycle integration\n  - Change detection optimization\n  - Proper event handling\n  - Accessibility features\n  \n  Note: Current data grid uses string renderers for compatibility.\n  Templates are maintained for future component enhancement.\n-->\n\n<!-- Theme Details Renderer Template -->\n<ng-template #themeDetailsRendererTemplate let-row=\"row\" let-value=\"value\">\n  <div class=\"tw-flex tw-items-center tw-min-w-0\">\n    <!-- Theme Icon -->\n    <div class=\"tw-flex-shrink-0\">\n      <cide-ele-icon \n        class=\"tw-text-purple-600\" \n        size=\"xs\">\n        palette\n      </cide-ele-icon>\n    </div>\n    \n    <!-- Theme Details -->\n    <div class=\"tw-ml-3 tw-min-w-0 tw-flex-1\">\n      <div class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-truncate\" \n           [title]=\"row.sytm_title\">\n        {{ row.sytm_title || 'Untitled' }}\n      </div>\n      @if (row.sytm_desc) {\n        <div class=\"tw-text-xs tw-text-gray-500 tw-truncate\" \n             [title]=\"row.sytm_desc\">\n          {{ row.sytm_desc }}\n        </div>\n      }\n    </div>\n  </div>\n</ng-template>\n\n<!-- Theme Status Renderer Template -->\n<ng-template #themeStatusRendererTemplate let-row=\"row\" let-value=\"value\">\n  <span class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-whitespace-nowrap\"\n        [ngClass]=\"row.sytm_isactive ? 'tw-bg-green-100 tw-text-green-800' : 'tw-bg-red-100 tw-text-red-800'\">\n    {{ row.sytm_isactive ? 'Active' : 'Inactive' }}\n  </span>\n</ng-template>\n\n<!-- Actions Dropdown Renderer Template -->\n<ng-template #actionsDropdownRendererTemplate let-row=\"row\" let-value=\"value\">\n  <cide-ele-dropdown \n    [items]=\"getActionDropdownItems(row)\"\n    [config]=\"{ triggerIcon: 'more_vert', triggerSize: 'sm' }\"\n    (itemClick)=\"onDropdownItemClick($event, row)\">\n  </cide-ele-dropdown>\n</ng-template> ", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "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", "ngModel", "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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideCorePageThemeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cide-core-page-theme', standalone: true, imports: [
                         CommonModule,
@@ -7279,7 +7325,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                         CideEleFileInputComponent,
                         CideEleFileImageDirective,
                     ], template: "<!-- Page Theme Container -->\n<div class=\"tw-flex tw-h-full tw-w-full\">\n  \n  <!-- Left: Form and header (60%) -->\n  <div class=\"tw-w-full lg:tw-w-3/5 tw-flex tw-flex-col tw-border-r tw-border-gray-200\">\n\n  <!-- Header Section -->\n    <div class=\"tw-px-6 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-4\">\n          <button cideEleButton variant=\"ghost\" size=\"sm\" (click)=\"goBack();\" class=\"tw-text-gray-600 hover:tw-text-gray-900\">\n          <cide-ele-icon class=\"tw-w-4 tw-h-4\">arrow_back</cide-ele-icon>\n        </button>\n        <div class=\"tw-flex tw-items-center tw-space-x-2\">\n          <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">palette</cide-ele-icon>\n          <div>\n            <h5 class=\"tw-text-base tw-font-medium tw-text-gray-900 tw-m-0\">Theme Management</h5>\n            <p class=\"tw-text-sm tw-text-gray-500 tw-m-0\">Page: {{ pageTitle() }}</p>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Error Message -->\n    @if (error()) {\n    <div class=\"tw-mt-4 tw-p-4 tw-bg-red-50 tw-border tw-border-red-200 tw-rounded-md\">\n      <div class=\"tw-flex tw-items-start\">\n        <cide-ele-icon name=\"error\" class=\"tw-text-red-400 tw-w-5 tw-h-5 tw-mt-0.5 tw-flex-shrink-0\"></cide-ele-icon>\n        <div class=\"tw-ml-3\">\n          <h3 class=\"tw-text-sm tw-font-medium tw-text-red-800 tw-m-0\">Error</h3>\n          <p class=\"tw-text-sm tw-text-red-700 tw-mt-1 tw-m-0\">{{ error() }}</p>\n        </div>\n      </div>\n    </div>\n    }\n  </div>\n\n    <!-- Quick Add/Edit Form Section -->\n    <div class=\"tw-px-6 tw-py-3 tw-bg-white tw-overflow-auto\">\n    <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-2\">\n      <div class=\"tw-flex tw-items-center tw-space-x-3\">\n        <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\n        <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-m-0\">{{ isEditMode() ? 'Edit Theme' : 'Quick Add Theme' }}</h6>\n      </div>\n    </div>\n\n      <!-- Form (kept as-is) -->\n    <form [formGroup]=\"themeForm\" (ngSubmit)=\"saveTheme()\" class=\"tw-space-y-4\">\n      <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-[1fr_200px] tw-gap-4\">\n        <!-- Left Side: All Input Fields -->\n        <div class=\"tw-space-y-4\">\n          <!-- Row 1: Theme Title and Theme Code -->\n          <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\n            <div class=\"tw-space-y-2\">\n                <cide-ele-input id=\"sytm_title\" formControlName=\"sytm_title\" placeholder=\"Enter theme title\" label=\"Theme Title\" size=\"sm\"></cide-ele-input>\n            </div>\n            <div class=\"tw-space-y-2\">\n                <cide-ele-input id=\"sytm_theme_code\" formControlName=\"sytm_theme_code\" placeholder=\"Enter theme code\" label=\"Theme Code\" size=\"sm\"></cide-ele-input>\n            </div>\n          </div>\n          \n          <!-- Row 2: Sub Title and Active Status -->\n          <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\n            <div class=\"tw-space-y-2\">\n                <cide-ele-input id=\"sytm_sub_title\" formControlName=\"sytm_sub_title\" placeholder=\"Enter sub title\" label=\"Sub Title\" size=\"sm\"></cide-ele-input>\n            </div>\n            <div class=\"tw-space-y-2 tw-flex tw-items-center\">\n                <cide-ele-input\n                  id=\"sytm_isactive_cb\"\n                  type=\"checkbox\"\n                  label=\"Active\"\n                size=\"sm\"\n                  formControlName=\"sytm_isactive\">\n                </cide-ele-input>\n            </div>\n          </div>\n          \n          <!-- Row 3: Description -->\n          <div class=\"tw-space-y-2\">\n              <cide-ele-textarea id=\"sytm_desc\" formControlName=\"sytm_desc\" placeholder=\"Enter theme description\" rows=\"2\" label=\"Description\" size=\"sm\"></cide-ele-textarea>\n          </div>\n        </div>\n        \n        <!-- Right Side: File Upload -->\n        <div class=\"tw-flex tw-flex-col tw-justify-start tw-items-center tw-p-0\">\n            <cide-ele-file-input \n              id=\"sytm_preview_id_fm\" \n              formControlName=\"sytm_preview_id_fm\"\n              accept=\"image/*\"\n              [showPreview]=\"true\"\n              [previewBoxMode]=\"true\"\n              [showFileName]=\"false\"\n              previewWidth=\"180px\"\n              previewHeight=\"120px\"\n              placeholderText=\"Upload Preview Image\"\n              placeholderIcon=\"image\"\n              [autoUpload]=\"true\"\n              [uploadData]=\"getPreviewImageUploadData()\"\n              (uploadSuccess)=\"onPreviewImageUploadSuccess($event)\"\n              (uploadError)=\"onPreviewImageUploadError($event)\"\n              (uploadProgressChange)=\"onPreviewImageUploadProgress($event)\">\n            </cide-ele-file-input>\n        </div>\n      </div>\n      \n      <!-- Configuration JSON -->\n      <div class=\"tw-space-y-2\">\n            <cide-ele-json-editor label=\"Configuration JSON\" formControlName=\"sytm_configuration\" [required]=\"true\" [config]=\"{\n               showLineNumbers: true,\n               autoFormat: true,\n               validateOnChange: true,\n               minHeight: 150,\n               maxHeight: 300,\n               placeholder: 'Enter theme configuration JSON...'\n              }\" helperText=\"Enter valid JSON configuration for the theme\"></cide-ele-json-editor>\n         </div>\n      <!-- Layout Configuration + Selection -->\n      <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-2 tw-gap-6\">\n        <div class=\"tw-space-y-2\">\n            <div class=\"tw-text-sm tw-font-medium tw-text-gray-700\">Layout & Selection</div>\n            <!-- Selected toggle -->\n            <div class=\"tw-bg-white tw-border tw-border-gray-200 tw-rounded-md tw-px-3 tw-py-2\">\n              <cide-ele-input\n                id=\"sytm_isselected\"\n                type=\"checkbox\"\n                label=\"Selected (Default)\"\n                  size=\"sm\"\n                formControlName=\"sytm_isselected\">\n              </cide-ele-input>\n              </div>\n            <div formGroupName=\"sytm_layout\" class=\"tw-bg-white tw-border tw-border-gray-200 tw-rounded-md tw-divide-y tw-overflow-hidden\">\n              <!-- Sidebar -->\n              <div class=\"tw-px-3 tw-py-2\" formGroupName=\"sytm_layout_sidebar\">\n                <cide-ele-input id=\"layout_sidebar_status\" type=\"checkbox\" label=\"Sidebar\" size=\"sm\" formControlName=\"status\"></cide-ele-input>\n            </div>\n            <!-- Header -->\n              <div class=\"tw-px-3 tw-py-2\" formGroupName=\"sytm_layout_header\">\n                <cide-ele-input id=\"layout_header_status\" type=\"checkbox\" label=\"Header\" size=\"sm\" formControlName=\"status\"></cide-ele-input>\n              </div>\n              <!-- Footer -->\n              <div class=\"tw-px-3 tw-py-2\" formGroupName=\"sytm_layout_footer\">\n                <cide-ele-input id=\"layout_footer_status\" type=\"checkbox\" label=\"Footer\" size=\"sm\" formControlName=\"status\"></cide-ele-input>\n              </div>\n              <!-- Breadcrumb -->\n              <div class=\"tw-px-3 tw-py-2\" formGroupName=\"sytm_layout_breadcrumb\">\n                <cide-ele-input id=\"layout_breadcrumb_status\" type=\"checkbox\" label=\"Breadcrumb\" size=\"sm\" formControlName=\"status\"></cide-ele-input>\n              </div>\n              <!-- Console -->\n              <div class=\"tw-px-3 tw-py-2\" formGroupName=\"sytm_layout_console\">\n                <cide-ele-input id=\"layout_console_status\" type=\"checkbox\" label=\"Console\" size=\"sm\" formControlName=\"status\"></cide-ele-input>\n            </div>\n              <!-- Request -->\n              <div class=\"tw-px-3 tw-py-2\" formGroupName=\"sytm_layout_request\">\n                <cide-ele-input id=\"layout_request_status\" type=\"checkbox\" label=\"Request\" size=\"sm\" formControlName=\"status\"></cide-ele-input>\n              </div>\n            </div>\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>\n        </div>\n        \n        <!-- Drawer Configuration -->\n        <div class=\"tw-space-y-2\">\n            <div class=\"tw-flex tw-items-center tw-justify-between\">\n              <div class=\"tw-text-sm tw-font-medium tw-text-gray-700\">Drawers</div>\n              <button cideEleButton type=\"button\" size=\"xs\" variant=\"outline\" (click)=\"addDrawer()\">\n                Add Drawer\n              </button>\n            </div>\n\n            <div formGroupName=\"sytm_layout\">\n              <div class=\"tw-space-y-2\" formArrayName=\"sytm_layout_drawer\">\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\">\n                  <cide-ele-input id=\"drawer_active_{{i}}\" type=\"checkbox\" label=\"Active\" size=\"sm\" formControlName=\"syth_status\"></cide-ele-input>\n                  <div class=\"tw-flex-1\">\n                <cide-ele-select\n                      id=\"drawer_config_{{i}}\"\n                      label=\"Drawer For\"\n                  size=\"sm\"\n                      [options]=\"drawerConfigOptions\"\n                      formControlName=\"syth_config_syco_for\">\n                </cide-ele-select>\n              </div>\n                  <button cideEleButton type=\"button\" size=\"xs\" variant=\"ghost\" (click)=\"removeDrawer(i)\">\n                    <cide-ele-icon class=\"tw-w-4 tw-h-4\">delete</cide-ele-icon>\n                  </button>\n            </div>\n                <p class=\"tw-text-xs tw-text-gray-500\">Configure multiple drawers as needed.</p>\n              </div>\n            </div>\n        </div>\n      </div>\n\n      <!-- Form Actions -->\n        <div class=\"tw-flex tw-flex-col tw-gap-2 tw-pt-4 tw-border-t tw-border-gray-200\">\n          <div class=\"tw-flex tw-items-center tw-justify-end tw-space-x-3\">\n            <button cideEleButton type=\"button\" variant=\"outline\" (click)=\"cancelForm()\" [disabled]=\"loading()\">Cancel</button>\n            <button cideEleButton type=\"submit\" variant=\"primary\" leftIcon=\"add\" [disabled]=\"!themeForm.valid || loading()\" [loading]=\"loading()\">\n          {{ isEditMode() ? 'Update Theme' : 'Create Theme' }}\n        </button>\n          </div>\n      </div>\n    </form>\n    </div>\n  </div>\n\n  <!-- Right: Theme gallery (40%) -->\n  <div class=\"tw-hidden lg:tw-flex tw-w-2/5 tw-flex-col\">\n    <!-- (Header consolidated above) -->\n\n    <!-- Gallery list -->\n    <div class=\"tw-flex-1 tw-overflow-auto tw-bg-gray-50\">\n      <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3 tw-p-4\">\n        @for (theme of filteredThemes(); track theme._id) {\n          <div class=\"tw-rounded-md tw-transition tw-cursor-pointer tw-relative\"\n               [ngClass]=\"theme.sytm_isselected\n                 ? 'tw-border tw-border-blue-500 tw-ring-2 tw-ring-blue-200 tw-bg-blue-50/50'\n                 : 'tw-bg-white tw-border tw-border-gray-200 hover:tw-shadow-sm'\"\n               (click)=\"editTheme(theme)\"\n               role=\"button\"\n               tabindex=\"0\"\n               [attr.aria-selected]=\"theme.sytm_isselected ? 'true' : 'false'\"\n               [attr.aria-label]=\"'Edit theme ' + (theme.sytm_title || theme.sytm_theme_code)\"\n               (keydown.enter)=\"editTheme(theme)\"\n               (keydown.space)=\"$event.preventDefault(); editTheme(theme)\">\n\n            <!-- Selected badge -->\n            <div *ngIf=\"theme.sytm_isselected\"\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\">\n              <cide-ele-icon class=\"tw-w-4 tw-h-4\">check</cide-ele-icon>\n            </div>\n \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\">\n              @if (theme.sytm_preview_id_fm) {\n                <img \n                  cideEleFileImage \n                  [fileId]=\"theme.sytm_preview_id_fm\" \n                  [altText]=\"'Theme Preview'\"\n                  class=\"tw-w-full tw-h-full tw-object-cover\" />\n              } @else {\n                <div class=\"tw-text-gray-400 tw-text-xs\">No preview</div>\n              }\n            </div>\n            <div class=\"tw-p-3 tw-space-y-1\">\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>\n              <div class=\"tw-text-xs tw-text-gray-500 tw-truncate\" [title]=\"theme.sytm_theme_code\">{{ theme.sytm_theme_code }}</div>\n              <div class=\"tw-flex tw-items-center tw-justify-between tw-pt-1\">\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'\">\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>\n                  {{ theme.sytm_isactive ? 'Active' : 'Inactive' }}\n                </span>\n                <div class=\"tw-flex tw-items-center tw-gap-1\">\n                  <!-- Set Selected Button - Clear and Simple -->\n                  @if (theme.sytm_isselected) {\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\">\n                      <cide-ele-icon class=\"tw-w-3 tw-h-3\">check</cide-ele-icon>\n                      Selected\n                    </span>\n                  } @else {\n                    <button cideEleButton \n                            variant=\"outline\" \n                            size=\"xs\"\n                            (click)=\"$event.stopPropagation(); setSelectedTheme(theme)\"\n                            [attr.aria-label]=\"'Select ' + (theme.sytm_title || theme.sytm_theme_code) + ' theme'\"\n                            class=\"tw-text-xs\">\n                      Select\n                    </button>\n                  }\n                  <button cideEleButton variant=\"ghost\" size=\"xs\" (click)=\"$event.stopPropagation(); editTheme(theme)\"\n                          [attr.aria-label]=\"'Edit theme ' + (theme.sytm_title || theme.sytm_theme_code)\">\n                    <cide-ele-icon class=\"tw-w-4 tw-h-4\">edit</cide-ele-icon>\n                  </button>\n                  <button cideEleButton variant=\"ghost\" size=\"xs\" (click)=\"$event.stopPropagation(); deleteTheme(theme)\"\n                          [attr.aria-label]=\"'Delete theme ' + (theme.sytm_title || theme.sytm_theme_code)\">\n                    <cide-ele-icon class=\"tw-w-4 tw-h-4\">delete</cide-ele-icon>\n                  </button>\n                </div>\n              </div>\n            </div>\n          </div>\n        }\n\n        @if (!loading() && filteredThemes().length === 0) {\n          <div class=\"tw-col-span-full tw-text-center tw-text-xs tw-text-gray-500 tw-py-8\">No themes found</div>\n        }\n  </div>\n    </div>\n  </div>\n</div>\n\n<!-- \n  Angular Template References for Grid Renderers (Best Practice)\n  \n  These ng-template elements represent the Angular best practice for custom rendering.\n  They provide:\n  - Type safety with template context\n  - Component lifecycle integration\n  - Change detection optimization\n  - Proper event handling\n  - Accessibility features\n  \n  Note: Current data grid uses string renderers for compatibility.\n  Templates are maintained for future component enhancement.\n-->\n\n<!-- Theme Details Renderer Template -->\n<ng-template #themeDetailsRendererTemplate let-row=\"row\" let-value=\"value\">\n  <div class=\"tw-flex tw-items-center tw-min-w-0\">\n    <!-- Theme Icon -->\n    <div class=\"tw-flex-shrink-0\">\n      <cide-ele-icon \n        class=\"tw-text-purple-600\" \n        size=\"xs\">\n        palette\n      </cide-ele-icon>\n    </div>\n    \n    <!-- Theme Details -->\n    <div class=\"tw-ml-3 tw-min-w-0 tw-flex-1\">\n      <div class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-truncate\" \n           [title]=\"row.sytm_title\">\n        {{ row.sytm_title || 'Untitled' }}\n      </div>\n      @if (row.sytm_desc) {\n        <div class=\"tw-text-xs tw-text-gray-500 tw-truncate\" \n             [title]=\"row.sytm_desc\">\n          {{ row.sytm_desc }}\n        </div>\n      }\n    </div>\n  </div>\n</ng-template>\n\n<!-- Theme Status Renderer Template -->\n<ng-template #themeStatusRendererTemplate let-row=\"row\" let-value=\"value\">\n  <span class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-whitespace-nowrap\"\n        [ngClass]=\"row.sytm_isactive ? 'tw-bg-green-100 tw-text-green-800' : 'tw-bg-red-100 tw-text-red-800'\">\n    {{ row.sytm_isactive ? 'Active' : 'Inactive' }}\n  </span>\n</ng-template>\n\n<!-- Actions Dropdown Renderer Template -->\n<ng-template #actionsDropdownRendererTemplate let-row=\"row\" let-value=\"value\">\n  <cide-ele-dropdown \n    [items]=\"getActionDropdownItems(row)\"\n    [config]=\"{ triggerIcon: 'more_vert', triggerSize: 'sm' }\"\n    (itemClick)=\"onDropdownItemClick($event, row)\">\n  </cide-ele-dropdown>\n</ng-template> " }]
-        }] });
+        }], propDecorators: { themeDetailsRendererTemplate: [{ type: i0.ViewChild, args: ['themeDetailsRendererTemplate', { isSignal: true }] }], themeStatusRendererTemplate: [{ type: i0.ViewChild, args: ['themeStatusRendererTemplate', { isSignal: true }] }], actionsDropdownRendererTemplate: [{ type: i0.ViewChild, args: ['actionsDropdownRendererTemplate', { isSignal: true }] }] } });
 
 var pageTheme_component = /*#__PURE__*/Object.freeze({
     __proto__: null,
@@ -7407,10 +7453,10 @@ class CideCorePageControlsService {
         console.error('Page Controls Service Error:', errorMessage);
         return throwError(() => new Error(errorMessage));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCorePageControlsService, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCorePageControlsService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideCorePageControlsService, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideCorePageControlsService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCorePageControlsService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideCorePageControlsService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -7869,10 +7915,10 @@ class CideCorePageControlsComponent {
     trackByControlId(index, control) {
         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", "step", "size"], outputs: ["ngModelChange"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput", "options", "multiple", "searchable", "showSearchInput", "loading", "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 ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideCorePageControlsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", 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", "ngModel", "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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideCorePageControlsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cide-core-page-controls', standalone: true, imports: [
                         CommonModule,
@@ -8018,10 +8064,10 @@ class CideCoreUserMasterService {
             return throwError(() => error);
         }));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCoreUserMasterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCoreUserMasterService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideCoreUserMasterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideCoreUserMasterService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCoreUserMasterService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideCoreUserMasterService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -8067,10 +8113,10 @@ class CideCoreRoleSelectService {
     getAllRoles() {
         return this.getRoleOptions();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCoreRoleSelectService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCoreRoleSelectService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideCoreRoleSelectService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideCoreRoleSelectService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCoreRoleSelectService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideCoreRoleSelectService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -8156,10 +8202,21 @@ class CideCoreUserRoleService {
         ]);
         return this.http.patch(url, payload);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCoreUserRoleService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCoreUserRoleService, providedIn: 'root' });
+    /**
+     * Get roles by entity ID
+     * @param entityId - Entity ID to filter roles
+     * @returns Observable of user role list response
+     */
+    getRolesByEntity(entityId) {
+        return this.getUserRoleList({
+            syusrol_role_entity_id_syen: entityId,
+            syusrol_isactive: true
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideCoreUserRoleService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideCoreUserRoleService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCoreUserRoleService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideCoreUserRoleService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -8233,10 +8290,10 @@ class CideCoreEntityManagementService {
         ]);
         return this.http.delete(url);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCoreEntityManagementService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCoreEntityManagementService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideCoreEntityManagementService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideCoreEntityManagementService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCoreEntityManagementService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideCoreEntityManagementService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -8283,6 +8340,17 @@ class CideCoreGeneralMasterTypeComponent {
     });
     // Computed values
     isFormDirty = computed(() => this.typeForm.dirty, ...(ngDevMode ? [{ debugName: "isFormDirty" }] : []));
+    // Rights computed signals
+    canCreate = computed(() => this.rightsService.hasRight('CREATE'), ...(ngDevMode ? [{ debugName: "canCreate" }] : []));
+    canEdit = computed(() => this.rightsService.hasRight('EDIT'), ...(ngDevMode ? [{ debugName: "canEdit" }] : []));
+    canDelete = computed(() => this.rightsService.hasRight('DELETE'), ...(ngDevMode ? [{ debugName: "canDelete" }] : []));
+    canView = computed(() => this.rightsService.hasRight('VIEW'), ...(ngDevMode ? [{ debugName: "canView" }] : []));
+    // Computed signal for form disabled state (for JSON editor which requires WritableSignal)
+    isFormDisabled = signal(false, ...(ngDevMode ? [{ debugName: "isFormDisabled" }] : []));
+    // Effect to update the disabled signal when rights change
+    updateDisabledState = effect(() => {
+        this.isFormDisabled.set(this.canView() && !this.canCreate() && !this.canEdit());
+    }, ...(ngDevMode ? [{ debugName: "updateDisabledState" }] : []));
     // Grid configuration signal
     gridConfig = signal({
         id: 'type-list-grid',
@@ -8372,6 +8440,8 @@ class CideCoreGeneralMasterTypeComponent {
         onToggleStatus: (item) => this.toggleTypeStatus(item)
     };
     ngOnInit() {
+        // Initialize rights for general master type management
+        this.rightsService.initializeRights('core_general_master_type');
         this.initializeComponent();
         // Add form submission debugging
         this.typeForm.valueChanges.subscribe(value => {
@@ -8735,38 +8805,48 @@ class CideCoreGeneralMasterTypeComponent {
      * Get dropdown items for actions
      */
     getActionDropdownItems(type) {
-        const items = [
-            {
+        const items = [];
+        if (this.canEdit()) {
+            items.push({
                 id: 'edit',
                 label: 'Edit',
                 icon: 'edit',
                 disabled: false
-            },
-            {
+            });
+        }
+        if (this.canCreate()) {
+            items.push({
                 id: 'addChild',
                 label: 'Add Child',
                 icon: 'add',
                 disabled: false
-            },
-            {
+            });
+        }
+        // General Master navigation - always available if user can view
+        if (this.canView()) {
+            items.push({
                 id: 'general-master',
                 label: 'General Master',
                 icon: 'list',
                 disabled: false
-            },
-            {
+            });
+        }
+        if (this.canEdit()) {
+            items.push({
                 id: 'toggle',
                 label: type.sygmt_isactive ? 'Deactivate' : 'Activate',
                 icon: type.sygmt_isactive ? 'block' : 'check_circle',
                 disabled: false
-            },
-            {
+            });
+        }
+        if (this.canDelete()) {
+            items.push({
                 id: 'delete',
                 label: 'Delete',
                 icon: 'delete',
                 disabled: false
-            }
-        ];
+            });
+        }
         return items;
     }
     /**
@@ -8841,10 +8921,10 @@ class CideCoreGeneralMasterTypeComponent {
         const event = new MouseEvent('click', { bubbles: true });
         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 -->\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          <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-m-0\">{{ isEditMode() ? 'Edit Type' : 'General Master\n            Type Management' }}</h6>\n        </div>\n\n        <!-- Parent Type Info (shown when adding child) -->\n        @if (typeForm.get('sygmt_id_sygmt')?.value) {\n        <div\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\">\n          <cide-ele-icon class=\"tw-text-blue-600 tw-w-4 tw-h-4\">account_tree</cide-ele-icon>\n          <div class=\"tw-flex tw-items-center tw-space-x-2\">\n            <span class=\"tw-text-sm tw-text-blue-600 tw-font-medium\">{{ isEditMode() ? 'Parent:' : 'Creating child\n              under:' }}</span>\n            <span class=\"tw-text-sm tw-text-blue-800 tw-font-semibold\">{{ getParentTypeDisplay() }}</span>\n          </div>\n          <button cideEleButton variant=\"ghost\" size=\"xs\" type=\"button\" (click)=\"clearParentType()\"\n            class=\"tw-text-blue-400 hover:tw-text-blue-600\">\n            <svg class=\"tw-w-4 tw-h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\" />\n            </svg>\n          </button>\n        </div>\n        }\n      </div>\n\n      <form [formGroup]=\"typeForm\" (ngSubmit)=\"onSubmit($event)\" class=\"tw-space-y-2 tw-relative\">\n        <!-- Hidden field for parent type ID -->\n        <input type=\"hidden\" formControlName=\"sygmt_id_sygmt\">\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          <!-- Type Code -->\n          <div class=\"lg:tw-col-span-1\">\n            <cide-ele-input formControlName=\"sygmt_code\" label=\"Type Code\" placeholder=\"Enter type code\" size=\"sm\"\n              [maxlength]=\"40\">\n            </cide-ele-input>\n          </div>\n\n          <!-- Type Title -->\n          <div class=\"lg:tw-col-span-2\">\n            <cide-ele-input formControlName=\"sygmt_title\" label=\"Type Title\" placeholder=\"Enter type title\" size=\"sm\"\n              [maxlength]=\"100\">\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 formControlName=\"sygmt_isactive\" type=\"checkbox\" label=\"Active\" size=\"sm\">\n            </cide-ele-input>\n          </div>\n        </div>\n        <!-- Second 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 formControlName=\"sygmt_configuration\" label=\"Configuration\" size=\"sm\">\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 formControlName=\"sygmt_desc\" label=\"Description\" placeholder=\"Enter description\"\n                size=\"sm\" [maxlength]=\"255\" [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 cideEleButton variant=\"outline\" size=\"sm\" type=\"button\" (click)=\"cancelForm()\"\n                [disabled]=\"loading()\" class=\"tw-px-4 tw-py-2\">\n                Cancel\n              </button>\n              <button cideEleButton variant=\"primary\" size=\"sm\" type=\"submit\" [disabled]=\"loading()\"\n                class=\"tw-px-4 tw-py-2\" [leftIcon]=\"isEditMode() ? 'edit' : 'add'\">\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-border-b tw-border-gray-200 tw-bg-gray-50\">\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-2\">\n            <h3 class=\"tw-text-xs tw-font-medium tw-text-red-800 tw-m-0\">Error</h3>\n            <p class=\"tw-text-xs tw-text-red-700 tw-mt-1 tw-m-0\">{{ error() }}</p>\n          </div>\n        </div>\n      </div>\n      }\n    </div>\n  </div>\n\n  <!-- Main Content Area -->\n  <div class=\"tw-table-row\">\n    <div class=\"tw-table-cell tw-h-full tw-relative\">\n\n      <!-- Data Grid Component -->\n      <div class=\"tw-h-full tw-overflow-auto\">\n        <cide-ele-data-grid [config]=\"gridConfig()\" [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 #typeDetailsRendererTemplate let-row=\"row\">\n  <div class=\"tw-flex tw-flex-col\">\n    <div class=\"tw-font-medium tw-text-gray-900\">{{ row.sygmt_title || 'N/A' }}</div>\n    <div class=\"tw-text-sm tw-text-gray-500 tw-truncate tw-max-w-xs\" title=\"{{ row.sygmt_desc || 'No description' }}\">{{\n      row.sygmt_desc || 'No description' }}</div>\n  </div>\n</ng-template>\n\n<ng-template #typeStatusRendererTemplate 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.sygmt_isactive\" [class.tw-text-green-800]=\"row.sygmt_isactive\"\n    [class.tw-bg-red-100]=\"!row.sygmt_isactive\" [class.tw-text-red-800]=\"!row.sygmt_isactive\">\n    {{ row.sygmt_isactive ? 'Active' : 'Inactive' }}\n  </span>\n</ng-template>\n\n\n\n<ng-template #actionsDropdownRendererTemplate let-row=\"row\">\n  <cide-ele-dropdown [items]=\"getActionDropdownItems(row)\" [config]=\"getDropdownConfig()\"\n    (itemClick)=\"onDropdownItemClick($event, row)\">\n  </cide-ele-dropdown>\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"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideCoreGeneralMasterTypeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", 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 -->\n<div class=\"tw-table tw-w-full tw-h-full\">\n\n  <!-- Quick Add Form Section - Show if user has VIEW, CREATE, or EDIT rights -->\n  @if (canView() || canCreate() || canEdit()) {\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          <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-m-0\">{{ isEditMode() ? 'Edit Type' : 'General Master\n            Type' }}</h6>\n        </div>\n\n        <!-- Parent Type Info (shown when adding child) -->\n        @if (typeForm.get('sygmt_id_sygmt')?.value) {\n        <div\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\">\n          <cide-ele-icon class=\"tw-text-blue-600 tw-w-4 tw-h-4\">account_tree</cide-ele-icon>\n          <div class=\"tw-flex tw-items-center tw-space-x-2\">\n            <span class=\"tw-text-sm tw-text-blue-600 tw-font-medium\">{{ isEditMode() ? 'Parent:' : 'Creating child\n              under:' }}</span>\n            <span class=\"tw-text-sm tw-text-blue-800 tw-font-semibold\">{{ getParentTypeDisplay() }}</span>\n          </div>\n          <button cideEleButton variant=\"ghost\" size=\"xs\" type=\"button\" (click)=\"clearParentType()\"\n            class=\"tw-text-blue-400 hover:tw-text-blue-600\">\n            <svg class=\"tw-w-4 tw-h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\" />\n            </svg>\n          </button>\n        </div>\n        }\n      </div>\n\n      <form [formGroup]=\"typeForm\" (ngSubmit)=\"onSubmit($event)\" class=\"tw-space-y-2 tw-relative\">\n        <!-- Hidden field for parent type ID -->\n        <input type=\"hidden\" formControlName=\"sygmt_id_sygmt\">\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          <!-- Type Code -->\n          <div class=\"lg:tw-col-span-1\">\n            <cide-ele-input formControlName=\"sygmt_code\" label=\"Type Code\" placeholder=\"Enter type code\" size=\"sm\"\n              [maxlength]=\"40\" [disabled]=\"canView() && !canCreate() && !canEdit()\">\n            </cide-ele-input>\n          </div>\n\n          <!-- Type Title -->\n          <div class=\"lg:tw-col-span-2\">\n            <cide-ele-input formControlName=\"sygmt_title\" label=\"Type Title\" placeholder=\"Enter type title\" size=\"sm\"\n              [maxlength]=\"100\" [disabled]=\"canView() && !canCreate() && !canEdit()\">\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 formControlName=\"sygmt_isactive\" type=\"checkbox\" label=\"Active\" size=\"sm\"\n              [disabled]=\"canView() && !canCreate() && !canEdit()\">\n            </cide-ele-input>\n          </div>\n        </div>\n        <!-- Second 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 formControlName=\"sygmt_configuration\" label=\"Configuration\" size=\"sm\"\n              [disabled]=\"isFormDisabled()\">\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 formControlName=\"sygmt_desc\" label=\"Description\" placeholder=\"Enter description\"\n                size=\"sm\" [maxlength]=\"255\" [rows]=\"4\" [disabled]=\"canView() && !canCreate() && !canEdit()\">\n              </cide-ele-textarea>\n            </div>\n\n            <!-- Action Buttons -->\n            @if (canCreate() || canEdit()) {\n            <div class=\"tw-flex tw-justify-end tw-space-x-2\">\n              <button cideEleButton variant=\"outline\" size=\"sm\" type=\"button\" (click)=\"cancelForm()\"\n                [disabled]=\"loading() || (canView() && !canCreate() && !canEdit())\" class=\"tw-px-4 tw-py-2\">\n                Cancel\n              </button>\n              @if (isEditMode() ? canEdit() : canCreate()) {\n              <button cideEleButton variant=\"primary\" size=\"sm\" type=\"submit\" [disabled]=\"loading()\"\n                class=\"tw-px-4 tw-py-2\" [leftIcon]=\"isEditMode() ? 'edit' : 'add'\">\n                {{ isEditMode() ? 'Update' : 'Save' }}\n              </button>\n              }\n            </div>\n            }\n          </div>\n        </div>\n      </form>\n    </div>\n  </div>\n  }\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-border-b tw-border-gray-200 tw-bg-gray-50\">\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-2\">\n            <h3 class=\"tw-text-xs tw-font-medium tw-text-red-800 tw-m-0\">Error</h3>\n            <p class=\"tw-text-xs tw-text-red-700 tw-mt-1 tw-m-0\">{{ error() }}</p>\n          </div>\n        </div>\n      </div>\n      }\n    </div>\n  </div>\n\n  <!-- Main Content Area -->\n  <div class=\"tw-table-row\">\n    <div class=\"tw-table-cell tw-h-full tw-relative\">\n\n      <!-- Data Grid Component -->\n      <div class=\"tw-h-full tw-overflow-auto\">\n        <cide-ele-data-grid [config]=\"gridConfig()\" [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 #typeDetailsRendererTemplate let-row=\"row\">\n  <div class=\"tw-flex tw-flex-col\">\n    <div class=\"tw-font-medium tw-text-gray-900\">{{ row.sygmt_title || 'N/A' }}</div>\n    <div class=\"tw-text-sm tw-text-gray-500 tw-truncate tw-max-w-xs\" title=\"{{ row.sygmt_desc || 'No description' }}\">{{\n      row.sygmt_desc || 'No description' }}</div>\n  </div>\n</ng-template>\n\n<ng-template #typeStatusRendererTemplate 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.sygmt_isactive\" [class.tw-text-green-800]=\"row.sygmt_isactive\"\n    [class.tw-bg-red-100]=\"!row.sygmt_isactive\" [class.tw-text-red-800]=\"!row.sygmt_isactive\">\n    {{ row.sygmt_isactive ? 'Active' : 'Inactive' }}\n  </span>\n</ng-template>\n\n\n\n<ng-template #actionsDropdownRendererTemplate let-row=\"row\">\n  <cide-ele-dropdown [items]=\"getActionDropdownItems(row)\" [config]=\"getDropdownConfig()\"\n    (itemClick)=\"onDropdownItemClick($event, row)\">\n  </cide-ele-dropdown>\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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideCoreGeneralMasterTypeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cide-core-general-master-type', standalone: true, imports: [
                         CommonModule,
@@ -8857,8 +8937,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                         CideIconComponent,
                         CideEleDropdownComponent,
                         CideEleJsonEditorComponent
-                    ], template: "<!-- General Master Type Container -->\n<div class=\"tw-table tw-w-full tw-h-full\">\n\n  <!-- Quick Add Form Section -->\n  <div class=\"tw-table-row tw-h-0\">\n    <div class=\"tw-table-cell tw-px-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          <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-m-0\">{{ isEditMode() ? 'Edit Type' : 'General Master\n            Type Management' }}</h6>\n        </div>\n\n        <!-- Parent Type Info (shown when adding child) -->\n        @if (typeForm.get('sygmt_id_sygmt')?.value) {\n        <div\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\">\n          <cide-ele-icon class=\"tw-text-blue-600 tw-w-4 tw-h-4\">account_tree</cide-ele-icon>\n          <div class=\"tw-flex tw-items-center tw-space-x-2\">\n            <span class=\"tw-text-sm tw-text-blue-600 tw-font-medium\">{{ isEditMode() ? 'Parent:' : 'Creating child\n              under:' }}</span>\n            <span class=\"tw-text-sm tw-text-blue-800 tw-font-semibold\">{{ getParentTypeDisplay() }}</span>\n          </div>\n          <button cideEleButton variant=\"ghost\" size=\"xs\" type=\"button\" (click)=\"clearParentType()\"\n            class=\"tw-text-blue-400 hover:tw-text-blue-600\">\n            <svg class=\"tw-w-4 tw-h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\" />\n            </svg>\n          </button>\n        </div>\n        }\n      </div>\n\n      <form [formGroup]=\"typeForm\" (ngSubmit)=\"onSubmit($event)\" class=\"tw-space-y-2 tw-relative\">\n        <!-- Hidden field for parent type ID -->\n        <input type=\"hidden\" formControlName=\"sygmt_id_sygmt\">\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          <!-- Type Code -->\n          <div class=\"lg:tw-col-span-1\">\n            <cide-ele-input formControlName=\"sygmt_code\" label=\"Type Code\" placeholder=\"Enter type code\" size=\"sm\"\n              [maxlength]=\"40\">\n            </cide-ele-input>\n          </div>\n\n          <!-- Type Title -->\n          <div class=\"lg:tw-col-span-2\">\n            <cide-ele-input formControlName=\"sygmt_title\" label=\"Type Title\" placeholder=\"Enter type title\" size=\"sm\"\n              [maxlength]=\"100\">\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 formControlName=\"sygmt_isactive\" type=\"checkbox\" label=\"Active\" size=\"sm\">\n            </cide-ele-input>\n          </div>\n        </div>\n        <!-- Second 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 formControlName=\"sygmt_configuration\" label=\"Configuration\" size=\"sm\">\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 formControlName=\"sygmt_desc\" label=\"Description\" placeholder=\"Enter description\"\n                size=\"sm\" [maxlength]=\"255\" [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 cideEleButton variant=\"outline\" size=\"sm\" type=\"button\" (click)=\"cancelForm()\"\n                [disabled]=\"loading()\" class=\"tw-px-4 tw-py-2\">\n                Cancel\n              </button>\n              <button cideEleButton variant=\"primary\" size=\"sm\" type=\"submit\" [disabled]=\"loading()\"\n                class=\"tw-px-4 tw-py-2\" [leftIcon]=\"isEditMode() ? 'edit' : 'add'\">\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-border-b tw-border-gray-200 tw-bg-gray-50\">\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-2\">\n            <h3 class=\"tw-text-xs tw-font-medium tw-text-red-800 tw-m-0\">Error</h3>\n            <p class=\"tw-text-xs tw-text-red-700 tw-mt-1 tw-m-0\">{{ error() }}</p>\n          </div>\n        </div>\n      </div>\n      }\n    </div>\n  </div>\n\n  <!-- Main Content Area -->\n  <div class=\"tw-table-row\">\n    <div class=\"tw-table-cell tw-h-full tw-relative\">\n\n      <!-- Data Grid Component -->\n      <div class=\"tw-h-full tw-overflow-auto\">\n        <cide-ele-data-grid [config]=\"gridConfig()\" [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 #typeDetailsRendererTemplate let-row=\"row\">\n  <div class=\"tw-flex tw-flex-col\">\n    <div class=\"tw-font-medium tw-text-gray-900\">{{ row.sygmt_title || 'N/A' }}</div>\n    <div class=\"tw-text-sm tw-text-gray-500 tw-truncate tw-max-w-xs\" title=\"{{ row.sygmt_desc || 'No description' }}\">{{\n      row.sygmt_desc || 'No description' }}</div>\n  </div>\n</ng-template>\n\n<ng-template #typeStatusRendererTemplate 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.sygmt_isactive\" [class.tw-text-green-800]=\"row.sygmt_isactive\"\n    [class.tw-bg-red-100]=\"!row.sygmt_isactive\" [class.tw-text-red-800]=\"!row.sygmt_isactive\">\n    {{ row.sygmt_isactive ? 'Active' : 'Inactive' }}\n  </span>\n</ng-template>\n\n\n\n<ng-template #actionsDropdownRendererTemplate let-row=\"row\">\n  <cide-ele-dropdown [items]=\"getActionDropdownItems(row)\" [config]=\"getDropdownConfig()\"\n    (itemClick)=\"onDropdownItemClick($event, row)\">\n  </cide-ele-dropdown>\n</ng-template>" }]
-        }] });
+                    ], template: "<!-- General Master Type Container -->\n<div class=\"tw-table tw-w-full tw-h-full\">\n\n  <!-- Quick Add Form Section - Show if user has VIEW, CREATE, or EDIT rights -->\n  @if (canView() || canCreate() || canEdit()) {\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          <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-m-0\">{{ isEditMode() ? 'Edit Type' : 'General Master\n            Type' }}</h6>\n        </div>\n\n        <!-- Parent Type Info (shown when adding child) -->\n        @if (typeForm.get('sygmt_id_sygmt')?.value) {\n        <div\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\">\n          <cide-ele-icon class=\"tw-text-blue-600 tw-w-4 tw-h-4\">account_tree</cide-ele-icon>\n          <div class=\"tw-flex tw-items-center tw-space-x-2\">\n            <span class=\"tw-text-sm tw-text-blue-600 tw-font-medium\">{{ isEditMode() ? 'Parent:' : 'Creating child\n              under:' }}</span>\n            <span class=\"tw-text-sm tw-text-blue-800 tw-font-semibold\">{{ getParentTypeDisplay() }}</span>\n          </div>\n          <button cideEleButton variant=\"ghost\" size=\"xs\" type=\"button\" (click)=\"clearParentType()\"\n            class=\"tw-text-blue-400 hover:tw-text-blue-600\">\n            <svg class=\"tw-w-4 tw-h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\" />\n            </svg>\n          </button>\n        </div>\n        }\n      </div>\n\n      <form [formGroup]=\"typeForm\" (ngSubmit)=\"onSubmit($event)\" class=\"tw-space-y-2 tw-relative\">\n        <!-- Hidden field for parent type ID -->\n        <input type=\"hidden\" formControlName=\"sygmt_id_sygmt\">\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          <!-- Type Code -->\n          <div class=\"lg:tw-col-span-1\">\n            <cide-ele-input formControlName=\"sygmt_code\" label=\"Type Code\" placeholder=\"Enter type code\" size=\"sm\"\n              [maxlength]=\"40\" [disabled]=\"canView() && !canCreate() && !canEdit()\">\n            </cide-ele-input>\n          </div>\n\n          <!-- Type Title -->\n          <div class=\"lg:tw-col-span-2\">\n            <cide-ele-input formControlName=\"sygmt_title\" label=\"Type Title\" placeholder=\"Enter type title\" size=\"sm\"\n              [maxlength]=\"100\" [disabled]=\"canView() && !canCreate() && !canEdit()\">\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 formControlName=\"sygmt_isactive\" type=\"checkbox\" label=\"Active\" size=\"sm\"\n              [disabled]=\"canView() && !canCreate() && !canEdit()\">\n            </cide-ele-input>\n          </div>\n        </div>\n        <!-- Second 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 formControlName=\"sygmt_configuration\" label=\"Configuration\" size=\"sm\"\n              [disabled]=\"isFormDisabled()\">\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 formControlName=\"sygmt_desc\" label=\"Description\" placeholder=\"Enter description\"\n                size=\"sm\" [maxlength]=\"255\" [rows]=\"4\" [disabled]=\"canView() && !canCreate() && !canEdit()\">\n              </cide-ele-textarea>\n            </div>\n\n            <!-- Action Buttons -->\n            @if (canCreate() || canEdit()) {\n            <div class=\"tw-flex tw-justify-end tw-space-x-2\">\n              <button cideEleButton variant=\"outline\" size=\"sm\" type=\"button\" (click)=\"cancelForm()\"\n                [disabled]=\"loading() || (canView() && !canCreate() && !canEdit())\" class=\"tw-px-4 tw-py-2\">\n                Cancel\n              </button>\n              @if (isEditMode() ? canEdit() : canCreate()) {\n              <button cideEleButton variant=\"primary\" size=\"sm\" type=\"submit\" [disabled]=\"loading()\"\n                class=\"tw-px-4 tw-py-2\" [leftIcon]=\"isEditMode() ? 'edit' : 'add'\">\n                {{ isEditMode() ? 'Update' : 'Save' }}\n              </button>\n              }\n            </div>\n            }\n          </div>\n        </div>\n      </form>\n    </div>\n  </div>\n  }\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-border-b tw-border-gray-200 tw-bg-gray-50\">\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-2\">\n            <h3 class=\"tw-text-xs tw-font-medium tw-text-red-800 tw-m-0\">Error</h3>\n            <p class=\"tw-text-xs tw-text-red-700 tw-mt-1 tw-m-0\">{{ error() }}</p>\n          </div>\n        </div>\n      </div>\n      }\n    </div>\n  </div>\n\n  <!-- Main Content Area -->\n  <div class=\"tw-table-row\">\n    <div class=\"tw-table-cell tw-h-full tw-relative\">\n\n      <!-- Data Grid Component -->\n      <div class=\"tw-h-full tw-overflow-auto\">\n        <cide-ele-data-grid [config]=\"gridConfig()\" [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 #typeDetailsRendererTemplate let-row=\"row\">\n  <div class=\"tw-flex tw-flex-col\">\n    <div class=\"tw-font-medium tw-text-gray-900\">{{ row.sygmt_title || 'N/A' }}</div>\n    <div class=\"tw-text-sm tw-text-gray-500 tw-truncate tw-max-w-xs\" title=\"{{ row.sygmt_desc || 'No description' }}\">{{\n      row.sygmt_desc || 'No description' }}</div>\n  </div>\n</ng-template>\n\n<ng-template #typeStatusRendererTemplate 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.sygmt_isactive\" [class.tw-text-green-800]=\"row.sygmt_isactive\"\n    [class.tw-bg-red-100]=\"!row.sygmt_isactive\" [class.tw-text-red-800]=\"!row.sygmt_isactive\">\n    {{ row.sygmt_isactive ? 'Active' : 'Inactive' }}\n  </span>\n</ng-template>\n\n\n\n<ng-template #actionsDropdownRendererTemplate let-row=\"row\">\n  <cide-ele-dropdown [items]=\"getActionDropdownItems(row)\" [config]=\"getDropdownConfig()\"\n    (itemClick)=\"onDropdownItemClick($event, row)\">\n  </cide-ele-dropdown>\n</ng-template>" }]
+        }], propDecorators: { typeDetailsRendererTemplate: [{ type: i0.ViewChild, args: ['typeDetailsRendererTemplate', { isSignal: true }] }], typeStatusRendererTemplate: [{ type: i0.ViewChild, args: ['typeStatusRendererTemplate', { isSignal: true }] }], actionsDropdownRendererTemplate: [{ type: i0.ViewChild, args: ['actionsDropdownRendererTemplate', { isSignal: true }] }] } });
 
 var generalMasterType_component = /*#__PURE__*/Object.freeze({
     __proto__: null,
@@ -9685,10 +9765,10 @@ class CideCoreGeneralMasterComponent {
         const event = new MouseEvent('click', { bubbles: true });
         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 -->\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"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideCoreGeneralMasterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideCoreGeneralMasterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cide-core-general-master', standalone: true, imports: [
                         CommonModule,
@@ -9703,7 +9783,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                         CideEleJsonEditorComponent,
                         CideLytSharedWrapperComponent
                     ], 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> " }]
-        }] });
+        }], propDecorators: { masterDetailsRendererTemplate: [{ type: i0.ViewChild, args: ['masterDetailsRendererTemplate', { isSignal: true }] }], masterStatusRendererTemplate: [{ type: i0.ViewChild, args: ['masterStatusRendererTemplate', { isSignal: true }] }], actionsDropdownRendererTemplate: [{ type: i0.ViewChild, args: ['actionsDropdownRendererTemplate', { isSignal: true }] }] } });
 
 var generalMaster_component = /*#__PURE__*/Object.freeze({
     __proto__: null,
@@ -9754,10 +9834,10 @@ class CideCorePinCodeService {
         };
         return this.getPinCodeData(payload);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCorePinCodeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCorePinCodeService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideCorePinCodeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideCorePinCodeService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCorePinCodeService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideCorePinCodeService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -9787,10 +9867,10 @@ class CideCoreCurrencyService {
         console.log('💰 CURRENCY SERVICE: Payload:', body);
         return this.http.get(url);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCoreCurrencyService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCoreCurrencyService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideCoreCurrencyService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideCoreCurrencyService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCoreCurrencyService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideCoreCurrencyService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -9860,10 +9940,10 @@ class CideCoreCountryService {
         }; // Temporary fix - update when MSyctrList interface is available
         return this.getAllCountries(payload);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCoreCountryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCoreCountryService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideCoreCountryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideCoreCountryService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCoreCountryService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideCoreCountryService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -11144,10 +11224,10 @@ class CideCoreEntityCreateComponent {
     onBack() {
         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", "step", "size"], outputs: ["ngModelChange"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput", "options", "multiple", "searchable", "showSearchInput", "loading", "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 ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideCoreEntityCreateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", 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", "ngModel", "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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideCoreEntityCreateComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cide-core-entity-create', imports: [
                         ReactiveFormsModule,
@@ -11162,7 +11242,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                         CideFormFieldErrorComponent,
                         CideEleDataGridComponent,
                     ], 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>" }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { userCellRendererTemplate: [{ type: i0.ViewChild, args: ['userCell', { isSignal: true }] }], actionsCellRendererTemplate: [{ type: i0.ViewChild, args: ['actionsCell', { isSignal: true }] }] } });
 
 var entityCreate_component = /*#__PURE__*/Object.freeze({
     __proto__: null,
@@ -11193,31 +11273,15 @@ class CideCoreEntityListComponent {
     currentPage = signal(1, ...(ngDevMode ? [{ debugName: "currentPage" }] : []));
     pageSize = signal(10, ...(ngDevMode ? [{ debugName: "pageSize" }] : []));
     totalItems = signal(0, ...(ngDevMode ? [{ debugName: "totalItems" }] : []));
-    selectedEntityType = signal('', ...(ngDevMode ? [{ debugName: "selectedEntityType" }] : []));
     // Entity type lookup map (ID -> Name)
     entityTypeMap = signal(new Map(), ...(ngDevMode ? [{ debugName: "entityTypeMap" }] : []));
     entityTypesLoading = signal(false, ...(ngDevMode ? [{ debugName: "entityTypesLoading" }] : []));
-    // Getter and setter for ngModel compatibility
-    get selectedEntityTypeValue() {
-        return this.selectedEntityType();
-    }
-    set selectedEntityTypeValue(value) {
-        this.selectedEntityType.set(value);
-    }
     // Pagination calculations
     totalPages = signal(0, ...(ngDevMode ? [{ debugName: "totalPages" }] : []));
     hasNextPage = signal(false, ...(ngDevMode ? [{ debugName: "hasNextPage" }] : []));
     hasPreviousPage = signal(false, ...(ngDevMode ? [{ debugName: "hasPreviousPage" }] : []));
     jumpToPage = 1;
     loadStartTime = 0;
-    // Filter options
-    entityTypeOptions = signal([
-        { value: '', label: 'All Entity Types' },
-        { value: 'school', label: 'School' },
-        { value: 'college', label: 'College' },
-        { value: 'university', label: 'University' },
-        { value: 'institute', label: 'Institute' }
-    ], ...(ngDevMode ? [{ debugName: "entityTypeOptions" }] : []));
     // Rights computed signals
     canCreate = computed(() => this.rightsService.hasRight('CREATE'), ...(ngDevMode ? [{ debugName: "canCreate" }] : []));
     canEdit = computed(() => this.rightsService.hasRight('EDIT'), ...(ngDevMode ? [{ debugName: "canEdit" }] : []));
@@ -11303,7 +11367,7 @@ class CideCoreEntityListComponent {
         tree: {
             enabled: true,
             primaryKey: '_id',
-            foreignKey: 'syen_parent_entity_id',
+            foreignKey: 'syen_id_syen',
             childrenKey: 'children',
             levelKey: 'level',
             expandedKey: 'isExpanded',
@@ -11670,15 +11734,6 @@ class CideCoreEntityListComponent {
         this.currentPage.set(1);
         this.loadEntities();
     }
-    /**
-     * Handle entity type selection change
-     */
-    onEntityTypeChange(value) {
-        const entityType = typeof value === 'string' ? value : (value ? String(value) : '');
-        this.selectedEntityType.set(entityType);
-        this.currentPage.set(1);
-        this.loadEntities();
-    }
     onPageChange(page) {
         if (parseInt(page) >= 1 && parseInt(page) <= this.totalPages()) {
             this.currentPage.set(parseInt(page));
@@ -11843,22 +11898,21 @@ class CideCoreEntityListComponent {
     onOrgStructure() {
         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 with Shared Wrapper -->\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'core_entity_list' }\">\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        @if (canCreate()) {\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        }\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</cide-lyt-shared-wrapper>\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", "ngModel", "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"] }, { kind: "component", type: CideLytSharedWrapperComponent, selector: "cide-lyt-shared-wrapper", inputs: ["shared_wrapper_setup_param", "breadcrumb_data"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideCoreEntityListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", 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 with Shared Wrapper -->\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'core_entity_list' }\">\n  <!-- Breadcrumb Actions: Org Structure Button -->\n  <div breadcrumb-actions>\n    <button cideEleButton variant=\"secondary\" size=\"sm\" (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    @if (canCreate()) {\n    <button cideEleButton variant=\"primary\" size=\"sm\" (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    }\n  </div>\n\n  <div class=\"entity-list-container tw-bg-white tw-shadow-lg tw-rounded-lg tw-overflow-hidden\">\n\n    <!-- Data Grid Component -->\n    <cide-ele-data-grid [config]=\"gridConfig()\" [templateRenderers]=\"templateRenderers()\"\n      [actionHandlers]=\"actionHandlers\" (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\n        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\"\n          [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 [items]=\"getDropdownItems(entity)\" [config]=\"getDropdownConfig()\"\n      (itemClick)=\"onDropdownItemClick($event, entity)\">\n    </cide-ele-dropdown>\n  </ng-template>\n</cide-lyt-shared-wrapper>", 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: "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: 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"] }, { 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: CideCoreEntityListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideCoreEntityListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cide-core-entity-list', imports: [
                         CommonModule,
                         FormsModule,
                         CideIconComponent,
                         CideEleButtonComponent,
-                        CideSelectComponent,
                         CideEleDataGridComponent,
                         CideEleDropdownComponent,
                         CideLytSharedWrapperComponent
-                    ], template: "<!-- Entity List with Shared Wrapper -->\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'core_entity_list' }\">\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        @if (canCreate()) {\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        }\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</cide-lyt-shared-wrapper>\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 with Shared Wrapper -->\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'core_entity_list' }\">\n  <!-- Breadcrumb Actions: Org Structure Button -->\n  <div breadcrumb-actions>\n    <button cideEleButton variant=\"secondary\" size=\"sm\" (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    @if (canCreate()) {\n    <button cideEleButton variant=\"primary\" size=\"sm\" (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    }\n  </div>\n\n  <div class=\"entity-list-container tw-bg-white tw-shadow-lg tw-rounded-lg tw-overflow-hidden\">\n\n    <!-- Data Grid Component -->\n    <cide-ele-data-grid [config]=\"gridConfig()\" [templateRenderers]=\"templateRenderers()\"\n      [actionHandlers]=\"actionHandlers\" (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\n        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\"\n          [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 [items]=\"getDropdownItems(entity)\" [config]=\"getDropdownConfig()\"\n      (itemClick)=\"onDropdownItemClick($event, entity)\">\n    </cide-ele-dropdown>\n  </ng-template>\n</cide-lyt-shared-wrapper>", 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"] }]
+        }], propDecorators: { gridComponent: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CideEleDataGridComponent), { isSignal: true }] }], entityDetailsRenderer: [{ type: i0.ViewChild, args: ['entityDetailsRenderer', { isSignal: true }] }], entityTypeRenderer: [{ type: i0.ViewChild, args: ['entityTypeRenderer', { isSignal: true }] }], actionsDropdownRenderer: [{ type: i0.ViewChild, args: ['actionsDropdownRenderer', { isSignal: true }] }] } });
 
 var entityList_component = /*#__PURE__*/Object.freeze({
     __proto__: null,
@@ -11903,8 +11957,8 @@ class CideCoreOrgStructureComponent {
     onEntityView(entity) {
         this.entityView.emit(entity);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCoreOrgStructureComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.7", type: CideCoreOrgStructureComponent, isStandalone: true, selector: "cide-core-org-structure", inputs: { allowSwitching: { classPropertyName: "allowSwitching", publicName: "allowSwitching", isSignal: true, isRequired: false, transformFunction: null }, showActions: { classPropertyName: "showActions", publicName: "showActions", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { entityClick: "entityClick", entitySelect: "entitySelect", entityView: "entityView" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideCoreOrgStructureComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.15", type: CideCoreOrgStructureComponent, isStandalone: true, selector: "cide-core-org-structure", inputs: { allowSwitching: { classPropertyName: "allowSwitching", publicName: "allowSwitching", isSignal: true, isRequired: false, transformFunction: null }, showActions: { classPropertyName: "showActions", publicName: "showActions", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { entityClick: "entityClick", entitySelect: "entitySelect", entityView: "entityView" }, ngImport: i0, template: `
     <cide-lyt-shared-wrapper [shared_wrapper_setup_param]="{ sypg_page_code: 'org_structure' }">
       
       <!-- Back Button using standard content projection -->
@@ -11932,7 +11986,7 @@ class CideCoreOrgStructureComponent {
     </cide-lyt-shared-wrapper>
   `, isInline: true, styles: [":host{height:100%;display:flex;flex-direction:column}.tw-overflow-y-auto::-webkit-scrollbar{width:6px}.tw-overflow-y-auto::-webkit-scrollbar-track{background:#f1f5f9;border-radius:3px}.tw-overflow-y-auto::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:3px}.tw-overflow-y-auto::-webkit-scrollbar-thumb:hover{background:#94a3b8}.tw-transition-shadow{transition:box-shadow .2s ease-in-out}.tw-shadow-lg:hover{box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;transform:translateY(-2px);transition:all .2s ease-in-out}.tw-bg-purple-300,.tw-bg-purple-400{transition:all .3s ease-in-out}.connection-line-compact{display:block;overflow:visible}.connection-line-compact path,.connection-line-compact line{stroke-linecap:round;stroke-linejoin:round;transition:stroke-width .2s ease}.connection-line-compact:hover path,.connection-line-compact:hover line{stroke-width:3}.connection-line-compact circle{transition:all .2s ease}.connection-line-compact circle:hover{filter:drop-shadow(0 2px 4px rgba(147,51,234,.4))}.level-0{border-color:#fb923c!important}.level-1{border-color:#60a5fa!important}.level-2{border-color:#a78bfa!important}.level-3{border-color:#4ade80!important}.level-4{border-color:#818cf8!important}.level-5{border-color:#f472b6!important}@media (max-width: 1200px){.tw-max-w-7xl{max-width:100%}.tw-gap-6{gap:1rem}.tw-min-w-64{min-width:14rem}.tw-max-w-72{max-width:16rem}}@media (max-width: 768px){.tw-min-w-64{min-width:12rem}.tw-max-w-72{max-width:14rem}.tw-max-w-7xl{max-width:100%}.tw-gap-6{gap:.75rem}.tw-p-4{padding:.75rem}.tw-mb-4{margin-bottom:.75rem}.tw-space-x-3{gap:.5rem}.tw-space-x-2{gap:.375rem}.tw-w-12{width:2.5rem}.tw-h-12{height:2.5rem}}@media (max-width: 480px){.tw-min-w-72{min-width:12rem}.tw-max-w-80{max-width:14rem}.tw-p-4{padding:.5rem}.tw-space-x-3{gap:.375rem}.tw-space-x-2{gap:.25rem}.tw-mb-3{margin-bottom:.5rem}.tw-w-12{width:2rem}.tw-h-12{height:2rem}.tw-w-8{width:1.5rem}.tw-h-8{height:1.5rem}}@media print{.tw-bg-gray-50{background:#fff!important}.tw-shadow-lg{box-shadow:none!important;border:1px solid #e5e7eb!important}.tw-bg-purple-300{background:#6b7280!important}.tw-border-purple-300{border-color:#6b7280!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: CideSharedOrgStructureComponent, selector: "cide-shared-org-structure", inputs: ["allowSwitching", "showActions", "mode"], outputs: ["entityClick", "entitySelect", "entityView"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { 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: CideCoreOrgStructureComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideCoreOrgStructureComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cide-core-org-structure', imports: [
                         CommonModule,
@@ -11966,7 +12020,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
       </cide-shared-org-structure>
     </cide-lyt-shared-wrapper>
   `, styles: [":host{height:100%;display:flex;flex-direction:column}.tw-overflow-y-auto::-webkit-scrollbar{width:6px}.tw-overflow-y-auto::-webkit-scrollbar-track{background:#f1f5f9;border-radius:3px}.tw-overflow-y-auto::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:3px}.tw-overflow-y-auto::-webkit-scrollbar-thumb:hover{background:#94a3b8}.tw-transition-shadow{transition:box-shadow .2s ease-in-out}.tw-shadow-lg:hover{box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;transform:translateY(-2px);transition:all .2s ease-in-out}.tw-bg-purple-300,.tw-bg-purple-400{transition:all .3s ease-in-out}.connection-line-compact{display:block;overflow:visible}.connection-line-compact path,.connection-line-compact line{stroke-linecap:round;stroke-linejoin:round;transition:stroke-width .2s ease}.connection-line-compact:hover path,.connection-line-compact:hover line{stroke-width:3}.connection-line-compact circle{transition:all .2s ease}.connection-line-compact circle:hover{filter:drop-shadow(0 2px 4px rgba(147,51,234,.4))}.level-0{border-color:#fb923c!important}.level-1{border-color:#60a5fa!important}.level-2{border-color:#a78bfa!important}.level-3{border-color:#4ade80!important}.level-4{border-color:#818cf8!important}.level-5{border-color:#f472b6!important}@media (max-width: 1200px){.tw-max-w-7xl{max-width:100%}.tw-gap-6{gap:1rem}.tw-min-w-64{min-width:14rem}.tw-max-w-72{max-width:16rem}}@media (max-width: 768px){.tw-min-w-64{min-width:12rem}.tw-max-w-72{max-width:14rem}.tw-max-w-7xl{max-width:100%}.tw-gap-6{gap:.75rem}.tw-p-4{padding:.75rem}.tw-mb-4{margin-bottom:.75rem}.tw-space-x-3{gap:.5rem}.tw-space-x-2{gap:.375rem}.tw-w-12{width:2.5rem}.tw-h-12{height:2.5rem}}@media (max-width: 480px){.tw-min-w-72{min-width:12rem}.tw-max-w-80{max-width:14rem}.tw-p-4{padding:.5rem}.tw-space-x-3{gap:.375rem}.tw-space-x-2{gap:.25rem}.tw-mb-3{margin-bottom:.5rem}.tw-w-12{width:2rem}.tw-h-12{height:2rem}.tw-w-8{width:1.5rem}.tw-h-8{height:1.5rem}}@media print{.tw-bg-gray-50{background:#fff!important}.tw-shadow-lg{box-shadow:none!important;border:1px solid #e5e7eb!important}.tw-bg-purple-300{background:#6b7280!important}.tw-border-purple-300{border-color:#6b7280!important}}\n"] }]
-        }] });
+        }], propDecorators: { allowSwitching: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowSwitching", required: false }] }], showActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "showActions", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], entityClick: [{ type: i0.Output, args: ["entityClick"] }], entitySelect: [{ type: i0.Output, args: ["entitySelect"] }], entityView: [{ type: i0.Output, args: ["entityView"] }] } });
 
 var orgStructure_component = /*#__PURE__*/Object.freeze({
     __proto__: null,
@@ -11990,8 +12044,8 @@ class EntitySelectionDrawerComponent {
         // Close the floating container on cancel
         this.floatingContainerService.hide('entity-selection-for-mapping');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: EntitySelectionDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: EntitySelectionDrawerComponent, isStandalone: true, selector: "cide-entity-selection-drawer", inputs: { entities: { classPropertyName: "entities", publicName: "entities", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { entitySelect: "entitySelect", cancel: "cancel" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: EntitySelectionDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: EntitySelectionDrawerComponent, isStandalone: true, selector: "cide-entity-selection-drawer", inputs: { entities: { classPropertyName: "entities", publicName: "entities", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { entitySelect: "entitySelect", cancel: "cancel" }, ngImport: i0, template: `
     <div class="tw-flex tw-flex-col tw-h-full">
       <!-- Content -->
       <div class="tw-flex-1 tw-overflow-y-auto tw-p-3">
@@ -12037,7 +12091,7 @@ class EntitySelectionDrawerComponent {
     </div>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: EntitySelectionDrawerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: EntitySelectionDrawerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cide-entity-selection-drawer', standalone: true, imports: [CommonModule, CideEleButtonComponent, CideIconComponent], template: `
     <div class="tw-flex tw-flex-col tw-h-full">
@@ -12084,7 +12138,158 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
       </div>
     </div>
   ` }]
-        }] });
+        }], propDecorators: { entities: [{ type: i0.Input, args: [{ isSignal: true, alias: "entities", required: true }] }], entitySelect: [{ type: i0.Output, args: ["entitySelect"] }], cancel: [{ type: i0.Output, args: ["cancel"] }] } });
+
+class CopyRoleFromEntityDrawerComponent {
+    entityMappings = input.required(...(ngDevMode ? [{ debugName: "entityMappings" }] : []));
+    mappingSelect = output();
+    cancel = output();
+    floatingContainerService = inject(CideEleFloatingContainerService);
+    onMappingSelect(entityId) {
+        this.mappingSelect.emit(entityId);
+        // Close the floating container after selection
+        this.floatingContainerService.hide('copy-role-from-entity');
+    }
+    onCancel() {
+        this.cancel.emit();
+        // Close the floating container on cancel
+        this.floatingContainerService.hide('copy-role-from-entity');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CopyRoleFromEntityDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: CopyRoleFromEntityDrawerComponent, isStandalone: true, selector: "cide-copy-role-from-entity-drawer", inputs: { entityMappings: { classPropertyName: "entityMappings", publicName: "entityMappings", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { mappingSelect: "mappingSelect", cancel: "cancel" }, ngImport: i0, template: `
+    <div class="tw-flex tw-flex-col tw-h-full">
+      <!-- Header Description -->
+      <div class="tw-px-3 tw-py-2 tw-bg-blue-50 dark:tw-bg-blue-900/20 tw-border-b tw-border-blue-200 dark:tw-border-blue-700">
+        <p class="tw-text-xs tw-text-blue-700 dark:tw-text-blue-300 tw-m-0">
+          Select an entity mapping to copy role, department, designation, and menu rights from.
+        </p>
+      </div>
+
+      <!-- Content -->
+      <div class="tw-flex-1 tw-overflow-y-auto tw-p-3">
+        <!-- Entity Mappings List -->
+        <div class="tw-space-y-2">
+          @for (mapping of entityMappings(); track mapping.entityId) {
+            @if (mapping.entityId) {
+              <button 
+                type="button"
+                (click)="onMappingSelect(mapping.entityId)"
+                class="tw-w-full tw-text-left tw-px-3 tw-py-3 tw-border tw-border-gray-200 dark:tw-border-gray-700 tw-rounded-md tw-transition-all hover:tw-border-blue-400 dark:hover:tw-border-blue-500 hover:tw-bg-blue-50 dark:hover:tw-bg-blue-900/20 tw-bg-white dark:tw-bg-gray-800 tw-cursor-pointer">
+                <div class="tw-flex tw-items-start tw-justify-between tw-gap-2">
+                  <div class="tw-flex-1 tw-min-w-0">
+                    <div class="tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100 tw-mb-1">
+                      {{ mapping.entityName }}
+                    </div>
+                    @if (mapping.entityCode) {
+                      <div class="tw-text-xs tw-text-gray-500 dark:tw-text-gray-400 tw-mb-1">
+                        {{ mapping.entityCode }}
+                      </div>
+                    }
+                    @if (mapping.roleName) {
+                      <div class="tw-flex tw-items-center tw-gap-1 tw-mt-2">
+                        <cide-ele-icon variant="blue" size="xs">admin_panel_settings</cide-ele-icon>
+                        <span class="tw-text-xs tw-text-blue-600 dark:tw-text-blue-400 tw-font-medium">
+                          Role: {{ mapping.roleName }}
+                        </span>
+                      </div>
+                    }
+                  </div>
+                  <cide-ele-icon variant="blue" size="sm" class="tw-flex-shrink-0">content_copy</cide-ele-icon>
+                </div>
+              </button>
+            }
+          } @empty {
+            <div class="tw-text-center tw-py-8 tw-text-gray-500 dark:tw-text-gray-400">
+              <cide-ele-icon variant="gray" size="lg" class="tw-mb-2">info</cide-ele-icon>
+              <p class="tw-text-sm tw-font-medium tw-mb-1">No Entity Mappings Available</p>
+              <p class="tw-text-xs">You need at least one entity mapping to copy from.</p>
+            </div>
+          }
+        </div>
+      </div>
+
+      <!-- Footer -->
+      <div class="tw-border-t tw-border-gray-200 dark:tw-border-gray-700 tw-px-3 tw-py-2 tw-flex tw-justify-end tw-flex-shrink-0 tw-bg-white dark:tw-bg-gray-800">
+        <button 
+          cideEleButton 
+          variant="secondary" 
+          size="xs" 
+          type="button" 
+          (click)="onCancel()">
+          Cancel
+        </button>
+      </div>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CopyRoleFromEntityDrawerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cide-copy-role-from-entity-drawer', standalone: true, imports: [CommonModule, CideEleButtonComponent, CideIconComponent], template: `
+    <div class="tw-flex tw-flex-col tw-h-full">
+      <!-- Header Description -->
+      <div class="tw-px-3 tw-py-2 tw-bg-blue-50 dark:tw-bg-blue-900/20 tw-border-b tw-border-blue-200 dark:tw-border-blue-700">
+        <p class="tw-text-xs tw-text-blue-700 dark:tw-text-blue-300 tw-m-0">
+          Select an entity mapping to copy role, department, designation, and menu rights from.
+        </p>
+      </div>
+
+      <!-- Content -->
+      <div class="tw-flex-1 tw-overflow-y-auto tw-p-3">
+        <!-- Entity Mappings List -->
+        <div class="tw-space-y-2">
+          @for (mapping of entityMappings(); track mapping.entityId) {
+            @if (mapping.entityId) {
+              <button 
+                type="button"
+                (click)="onMappingSelect(mapping.entityId)"
+                class="tw-w-full tw-text-left tw-px-3 tw-py-3 tw-border tw-border-gray-200 dark:tw-border-gray-700 tw-rounded-md tw-transition-all hover:tw-border-blue-400 dark:hover:tw-border-blue-500 hover:tw-bg-blue-50 dark:hover:tw-bg-blue-900/20 tw-bg-white dark:tw-bg-gray-800 tw-cursor-pointer">
+                <div class="tw-flex tw-items-start tw-justify-between tw-gap-2">
+                  <div class="tw-flex-1 tw-min-w-0">
+                    <div class="tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100 tw-mb-1">
+                      {{ mapping.entityName }}
+                    </div>
+                    @if (mapping.entityCode) {
+                      <div class="tw-text-xs tw-text-gray-500 dark:tw-text-gray-400 tw-mb-1">
+                        {{ mapping.entityCode }}
+                      </div>
+                    }
+                    @if (mapping.roleName) {
+                      <div class="tw-flex tw-items-center tw-gap-1 tw-mt-2">
+                        <cide-ele-icon variant="blue" size="xs">admin_panel_settings</cide-ele-icon>
+                        <span class="tw-text-xs tw-text-blue-600 dark:tw-text-blue-400 tw-font-medium">
+                          Role: {{ mapping.roleName }}
+                        </span>
+                      </div>
+                    }
+                  </div>
+                  <cide-ele-icon variant="blue" size="sm" class="tw-flex-shrink-0">content_copy</cide-ele-icon>
+                </div>
+              </button>
+            }
+          } @empty {
+            <div class="tw-text-center tw-py-8 tw-text-gray-500 dark:tw-text-gray-400">
+              <cide-ele-icon variant="gray" size="lg" class="tw-mb-2">info</cide-ele-icon>
+              <p class="tw-text-sm tw-font-medium tw-mb-1">No Entity Mappings Available</p>
+              <p class="tw-text-xs">You need at least one entity mapping to copy from.</p>
+            </div>
+          }
+        </div>
+      </div>
+
+      <!-- Footer -->
+      <div class="tw-border-t tw-border-gray-200 dark:tw-border-gray-700 tw-px-3 tw-py-2 tw-flex tw-justify-end tw-flex-shrink-0 tw-bg-white dark:tw-bg-gray-800">
+        <button 
+          cideEleButton 
+          variant="secondary" 
+          size="xs" 
+          type="button" 
+          (click)="onCancel()">
+          Cancel
+        </button>
+      </div>
+    </div>
+  ` }]
+        }], propDecorators: { entityMappings: [{ type: i0.Input, args: [{ isSignal: true, alias: "entityMappings", required: true }] }], mappingSelect: [{ type: i0.Output, args: ["mappingSelect"] }], cancel: [{ type: i0.Output, args: ["cancel"] }] } });
 
 class CideCoreUserCreateComponent {
     // Dependency injection
@@ -12118,6 +12323,12 @@ class CideCoreUserCreateComponent {
     userId = signal('', ...(ngDevMode ? [{ debugName: "userId" }] : []));
     isEditMode = signal(false, ...(ngDevMode ? [{ debugName: "isEditMode" }] : []));
     showPasswordFields = signal(false, ...(ngDevMode ? [{ debugName: "showPasswordFields" }] : [])); // Controls password fields visibility in edit mode
+    // Check if viewing own profile (for disabling entity mapping modifications)
+    isViewingOwnProfile = computed(() => {
+        const routeUserId = this.userId();
+        const currentUserId = this.appState.currentUser()?._id;
+        return routeUserId && currentUserId && routeUserId === currentUserId;
+    }, ...(ngDevMode ? [{ debugName: "isViewingOwnProfile" }] : []));
     // User type information from route data (TEACHER, STUDENT, USER, etc.)
     userType = signal(null, ...(ngDevMode ? [{ debugName: "userType" }] : []));
     typeSpecificId = signal(null, ...(ngDevMode ? [{ debugName: "typeSpecificId" }] : []));
@@ -12169,6 +12380,8 @@ class CideCoreUserCreateComponent {
     entityMappings = signal([], ...(ngDevMode ? [{ debugName: "entityMappings" }] : []));
     menuRightsMap = signal({}, ...(ngDevMode ? [{ debugName: "menuRightsMap" }] : []));
     allUserTypeMappings = signal([], ...(ngDevMode ? [{ debugName: "allUserTypeMappings" }] : [])); // All user type mappings across all entities
+    // Track target mapping index for copying role from another entity
+    targetMappingIndexForCopy = signal(null, ...(ngDevMode ? [{ debugName: "targetMappingIndexForCopy" }] : []));
     // Cache for role permissions to avoid redundant API calls
     rolePermissionsCache = signal({}, ...(ngDevMode ? [{ debugName: "rolePermissionsCache" }] : []));
     // Track which mappings have already loaded their data (to avoid redundant loads)
@@ -13616,6 +13829,211 @@ class CideCoreUserCreateComponent {
             this.loadRolesForEntity(newIndex, entityId);
         });
     }
+    /**
+     * Show copy role from entity drawer
+     * @param targetMappingIndex Index of the mapping to copy TO
+     */
+    showCopyRoleFromEntityDrawer(targetMappingIndex) {
+        const availableMappings = this.getAvailableMappingsForCopy(targetMappingIndex);
+        if (availableMappings.length === 0) {
+            this.notificationService.warning('No other entity mappings available to copy from.');
+            return;
+        }
+        // Store target mapping index
+        this.targetMappingIndexForCopy.set(targetMappingIndex);
+        // Register the copy role drawer component if not already registered
+        if (!this.floatingContainerService.isComponentRegistered('copy-role-from-entity')) {
+            this.floatingContainerService.registerComponent('copy-role-from-entity', CopyRoleFromEntityDrawerComponent);
+        }
+        // Create signal for entity mappings input
+        const mappingsSignal = signal(availableMappings, ...(ngDevMode ? [{ debugName: "mappingsSignal" }] : []));
+        const config = {
+            id: 'copy-role-from-entity',
+            title: 'Copy Role from Entity',
+            icon: 'content_copy',
+            width: '500px',
+            height: '600px',
+            minWidth: '450px',
+            minHeight: '400px',
+            resizable: true,
+            draggable: true,
+            closable: true,
+            minimizable: true,
+            maximizable: true,
+            componentId: 'copy-role-from-entity',
+            componentConfig: {
+                inputs: {
+                    entityMappings: mappingsSignal
+                },
+                outputs: {
+                    mappingSelect: (event) => {
+                        const entityId = typeof event === 'string' ? event : (event?.value || event);
+                        if (typeof entityId === 'string') {
+                            this.copyRoleFromEntityMapping(entityId);
+                        }
+                    },
+                    cancel: (event) => {
+                        this.closeCopyRoleFromEntityDrawer();
+                    }
+                }
+            }
+        };
+        this.floatingContainerService.show(config);
+    }
+    /**
+     * Get available entity mappings for copying (excluding the target mapping)
+     * @param excludeIndex Index of mapping to exclude
+     */
+    getAvailableMappingsForCopy(excludeIndex) {
+        const mappings = this.entityMappings();
+        const availableMappings = [];
+        mappings.forEach((mapping, index) => {
+            // Skip the target mapping
+            if (index === excludeIndex) {
+                return;
+            }
+            // Get entity ID and name
+            const entityId = this.getEntityIdFromMapping(index);
+            if (!entityId) {
+                return;
+            }
+            const entity = this.entityOptions().find(e => e._id === entityId);
+            if (!entity) {
+                return;
+            }
+            // Get role name
+            const roleId = this.getRoleIdFromMapping(index);
+            const roleName = roleId
+                ? this.roleOptions()[entityId]?.find(r => r._id === roleId)?.syusrol_role_name
+                : undefined;
+            availableMappings.push({
+                entityId: entityId,
+                entityName: entity.syen_name || 'Unknown Entity',
+                entityCode: entity.syen_entity_code,
+                roleId: roleId,
+                roleName: roleName
+            });
+        });
+        return availableMappings;
+    }
+    /**
+     * Copy role, department, designation, and menu rights from one entity mapping to another
+     * @param sourceEntityId Entity ID of the source mapping to copy FROM
+     */
+    copyRoleFromEntityMapping(sourceEntityId) {
+        const targetIndex = this.targetMappingIndexForCopy();
+        if (targetIndex === null || targetIndex < 0 || targetIndex >= this.entityMappings().length) {
+            this.notificationService.error('Invalid target mapping index.');
+            this.closeCopyRoleFromEntityDrawer();
+            return;
+        }
+        // Find source mapping index
+        const sourceIndex = this.entityMappings().findIndex((mapping, index) => {
+            if (index === targetIndex)
+                return false; // Skip target
+            const entityId = this.getEntityIdFromMapping(index);
+            return entityId === sourceEntityId;
+        });
+        if (sourceIndex === -1) {
+            this.notificationService.error('Source entity mapping not found.');
+            this.closeCopyRoleFromEntityDrawer();
+            return;
+        }
+        try {
+            // Get source mapping form group
+            const sourceMappingFormGroup = this.entityMappingsFormArray.at(sourceIndex);
+            const targetMappingFormGroup = this.entityMappingsFormArray.at(targetIndex);
+            if (!sourceMappingFormGroup || !targetMappingFormGroup) {
+                this.notificationService.error('Failed to access mapping data.');
+                this.closeCopyRoleFromEntityDrawer();
+                return;
+            }
+            // Get source values and extract IDs (handling both string and object formats)
+            const sourceRoleValue = sourceMappingFormGroup.get('syenm_role_id_syusrol')?.value;
+            const sourceRoleId = sourceRoleValue
+                ? (typeof sourceRoleValue === 'string' ? sourceRoleValue : (sourceRoleValue._id || sourceRoleValue))
+                : undefined;
+            const sourceDepartmentValue = sourceMappingFormGroup.get('syenm_department_id_sydept')?.value;
+            const sourceDepartmentId = sourceDepartmentValue
+                ? (typeof sourceDepartmentValue === 'string' ? sourceDepartmentValue : (sourceDepartmentValue._id || sourceDepartmentValue))
+                : undefined;
+            const sourceDesignationValue = sourceMappingFormGroup.get('syenm_designation_id_sydsg')?.value;
+            const sourceDesignationId = sourceDesignationValue
+                ? (typeof sourceDesignationValue === 'string' ? sourceDesignationValue : (sourceDesignationValue._id || sourceDesignationValue))
+                : undefined;
+            const sourceActiveFrom = sourceMappingFormGroup.get('syenm_activefrom')?.value;
+            const sourceActiveUpto = sourceMappingFormGroup.get('syenm_activeupto')?.value;
+            const sourceIsActive = sourceMappingFormGroup.get('syenm_isactive')?.value;
+            // Get target entity ID
+            const targetEntityId = this.getEntityIdFromMapping(targetIndex);
+            if (!targetEntityId) {
+                this.notificationService.error('Target entity not found.');
+                this.closeCopyRoleFromEntityDrawer();
+                return;
+            }
+            // Copy role if available and valid for target entity
+            if (sourceRoleId) {
+                // Check if role exists for target entity
+                const rolesForTarget = this.roleOptions()[targetEntityId] || [];
+                const roleToCopy = rolesForTarget.find(r => r._id === sourceRoleId);
+                if (roleToCopy) {
+                    targetMappingFormGroup.get('syenm_role_id_syusrol')?.setValue(sourceRoleId);
+                    // Trigger role change to load menu rights
+                    this.onRoleChange(targetIndex, roleToCopy);
+                }
+                else {
+                    this.notificationService.warning(`Role is not available for target entity. Other settings copied.`);
+                }
+            }
+            // Copy department if available
+            if (sourceDepartmentId) {
+                const departmentsForTarget = this.getDepartmentOptionsForEntity(targetIndex);
+                const departmentToCopy = departmentsForTarget.find(d => d._id === sourceDepartmentId);
+                if (departmentToCopy) {
+                    targetMappingFormGroup.get('syenm_department_id_sydept')?.setValue(sourceDepartmentId);
+                    this.onDepartmentChange(departmentToCopy);
+                }
+            }
+            // Copy designation if available
+            if (sourceDesignationId) {
+                const designationsForTarget = this.getDesignationOptionsForEntity(targetIndex);
+                const desigExists = designationsForTarget.some(d => d._id === sourceDesignationId);
+                if (desigExists) {
+                    targetMappingFormGroup.get('syenm_designation_id_sydsg')?.setValue(sourceDesignationId);
+                }
+            }
+            // Copy active dates
+            if (sourceActiveFrom) {
+                targetMappingFormGroup.get('syenm_activefrom')?.setValue(sourceActiveFrom);
+            }
+            if (sourceActiveUpto) {
+                targetMappingFormGroup.get('syenm_activeupto')?.setValue(sourceActiveUpto);
+            }
+            // Copy active status
+            if (sourceIsActive !== undefined) {
+                targetMappingFormGroup.get('syenm_isactive')?.setValue(sourceIsActive);
+            }
+            // Note: Menu rights will be automatically loaded when role is set via onRoleChange()
+            // Custom menu right modifications are role-specific and will be reset to default for the copied role
+            this.notificationService.success('Role and settings copied successfully.');
+            this.closeCopyRoleFromEntityDrawer();
+            // Mark form as dirty
+            this.userMasterForm.markAsDirty();
+            this.userMasterForm.markAsTouched();
+        }
+        catch (error) {
+            console.error('Error copying role from entity mapping:', error);
+            this.notificationService.error('Failed to copy role from entity mapping.');
+            this.closeCopyRoleFromEntityDrawer();
+        }
+    }
+    /**
+     * Close copy role from entity drawer
+     */
+    closeCopyRoleFromEntityDrawer() {
+        this.floatingContainerService.hide('copy-role-from-entity');
+        this.targetMappingIndexForCopy.set(null);
+    }
     /**
      * Handle entity mapping card state change (expand/collapse)
      * Load data lazily when card is expanded
@@ -15319,6 +15737,41 @@ class CideCoreUserCreateComponent {
      * @param mappingIndex - Index of the entity mapping
      * @returns Entity ID string or undefined
      */
+    /**
+     * Get role ID from mapping by index
+     */
+    getRoleIdFromMapping(mappingIndex) {
+        // First try to get from form control
+        const mappingFormGroup = this.entityMappingsFormArray.at(mappingIndex);
+        if (mappingFormGroup) {
+            const roleIdValue = mappingFormGroup.get('syenm_role_id_syusrol')?.value;
+            if (roleIdValue) {
+                // Handle both string and object formats
+                const roleId = typeof roleIdValue === 'string'
+                    ? roleIdValue
+                    : (roleIdValue._id || roleIdValue.toString?.() || undefined);
+                if (roleId) {
+                    return roleId.toString();
+                }
+            }
+        }
+        // Fallback: try to get from entity mappings signal
+        const entityMappings = this.entityMappings();
+        if (entityMappings && entityMappings[mappingIndex]) {
+            const mapping = entityMappings[mappingIndex];
+            const roleIdFromSignal = mapping.syenm_role_id_syusrol;
+            if (roleIdFromSignal) {
+                // Handle both string and object formats
+                const roleId = typeof roleIdFromSignal === 'string'
+                    ? roleIdFromSignal
+                    : (roleIdFromSignal._id || roleIdFromSignal.toString?.() || undefined);
+                if (roleId) {
+                    return roleId.toString();
+                }
+            }
+        }
+        return undefined;
+    }
     getEntityIdFromMapping(mappingIndex) {
         // First try to get from form control
         const mappingFormGroup = this.entityMappingsFormArray.at(mappingIndex);
@@ -15902,9 +16355,58 @@ class CideCoreUserCreateComponent {
             const { core_entity_mapping, core_user_contact_addresses, core_user_documents, core_user_family_details, syutm_user_type, syutm_type_specific_id, ...auth_user_mst } = this.userMasterForm.value;
             // Process role exceptions using the new permission tracking system
             const core_user_role_exceptions = this.processRoleExceptions();
+            // Get entity mappings with raw values (to include disabled controls) and ensure entity IDs are properly extracted
+            const rawEntityMappings = this.entityMappingsFormArray.getRawValue();
+            const processedEntityMappings = rawEntityMappings.map((mapping) => {
+                const processedMapping = { ...mapping };
+                // Extract entity ID - handle both object and string formats
+                if (mapping.syenm_entity_id_syen) {
+                    const entityValue = mapping.syenm_entity_id_syen;
+                    if (typeof entityValue === 'object' && entityValue !== null && '_id' in entityValue) {
+                        // Extract _id from object
+                        processedMapping.syenm_entity_id_syen = entityValue._id;
+                    }
+                    else if (typeof entityValue === 'string' && entityValue.trim() !== '') {
+                        // Already a string, use as-is
+                        processedMapping.syenm_entity_id_syen = entityValue;
+                    }
+                }
+                // Extract role ID if it's an object
+                if (mapping.syenm_role_id_syusrol) {
+                    const roleValue = mapping.syenm_role_id_syusrol;
+                    if (typeof roleValue === 'object' && roleValue !== null && '_id' in roleValue) {
+                        processedMapping.syenm_role_id_syusrol = roleValue._id;
+                    }
+                }
+                // Extract designation ID if it's an object
+                if (mapping.syenm_designation_id_sydsg) {
+                    const designationValue = mapping.syenm_designation_id_sydsg;
+                    if (typeof designationValue === 'object' && designationValue !== null && '_id' in designationValue) {
+                        processedMapping.syenm_designation_id_sydsg = designationValue._id;
+                    }
+                }
+                // Extract department ID if it's an object
+                if (mapping.syenm_department_id_sydept) {
+                    const departmentValue = mapping.syenm_department_id_sydept;
+                    if (typeof departmentValue === 'object' && departmentValue !== null && '_id' in departmentValue) {
+                        processedMapping.syenm_department_id_sydept = departmentValue._id;
+                    }
+                }
+                // Remove empty _id for new mappings (let backend generate it)
+                if (processedMapping._id === '' || processedMapping._id === null || processedMapping._id === undefined) {
+                    delete processedMapping._id;
+                }
+                // Remove exceptions array if empty (it's handled separately)
+                // Cast to extended type to safely access exceptions property
+                const mappingWithExceptions = processedMapping;
+                if ('exceptions' in mappingWithExceptions && Array.isArray(mappingWithExceptions.exceptions) && mappingWithExceptions.exceptions.length === 0) {
+                    delete mappingWithExceptions.exceptions;
+                }
+                return processedMapping;
+            });
             const formData = {
                 auth_user_mst: auth_user_mst,
-                core_entity_mapping: core_entity_mapping || [],
+                core_entity_mapping: processedEntityMappings,
                 core_user_role_exceptions: core_user_role_exceptions,
                 core_user_contact_addresses: core_user_contact_addresses || [],
                 core_user_documents: core_user_documents || [],
@@ -16705,10 +17207,10 @@ class CideCoreUserCreateComponent {
             throw error;
         }
     }
-    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: "<!-- \n  ENTERPRISE USER MASTER FORM\n  \n  Enterprise-Level Styling with Tailwind CSS\n  Features: Responsive grids, proper typography, enhanced user experience\n-->\n\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: pageCode() }\" [breadcrumb_data]=\"breadcrumbData()\">\n  <div class=\"tw-w-full tw-h-full tw-p-1 tw-pt-2\">\n    <!-- Toast Notifications -->\n    <cide-ele-toast-notification></cide-ele-toast-notification>\n    \n    <form class=\"tw-max-w-7xl tw-mx-auto tw-bg-transparent\" [formGroup]=\"userMasterForm\" [class.tw-opacity-60]=\"loading()\"\n      (ngSubmit)=\"onSubmit()\">\n\n\n    <!-- User Context Header -->\n    <div\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\">\n      <div class=\"tw-flex tw-items-center tw-justify-between tw-flex-wrap tw-gap-2\">\n        <!-- User Basic Info Display -->\n        <div class=\"tw-flex tw-items-center tw-gap-3 tw-flex-wrap\">\n          <!-- Profile Photo Preview -->\n          <div class=\"tw-flex tw-items-center tw-gap-2\">\n            <div\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\">\n              @if (userMasterForm.get('user_photo_id_cyfm')?.value) {\n              <img cideEleFileImage [fileId]=\"userMasterForm.get('user_photo_id_cyfm')?.value\"\n                [altText]=\"'Profile Photo'\" class=\"tw-w-full tw-h-full tw-object-cover\">\n              } @else {\n              <cide-ele-icon name=\"person\" class=\"tw-w-5 tw-h-5 tw-text-blue-600\">\n              </cide-ele-icon>\n              }\n            </div>\n            <div class=\"tw-flex tw-flex-col\">\n              <span class=\"tw-text-xs tw-font-medium tw-text-blue-900\">\n                {{ getUserFullName() || 'New User' }}\n              </span>\n              <span class=\"tw-text-xs tw-text-blue-600\">\n                {{ getUserUsername() || 'Username not set' }}\n              </span>\n            </div>\n          </div>\n\n          <!-- Contact Info -->\n          <div class=\"tw-flex tw-items-center tw-gap-3\">\n            <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-xs tw-text-gray-700\">\n              <cide-ele-icon variant=\"gray\" size=\"xs\">email</cide-ele-icon>\n              <span>{{ getUserEmail() || 'Email not set' }}</span>\n            </div>\n            <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-xs tw-text-gray-700\">\n              <cide-ele-icon variant=\"gray\" size=\"xs\">phone</cide-ele-icon>\n              <span>{{ getUserMobile() || 'Mobile not set' }}</span>\n            </div>\n          </div>\n\n          <!-- Active Status -->\n          <div class=\"tw-flex tw-items-center tw-gap-1\">\n            @if (getUserActiveStatus()) {\n            <span\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\">\n              <cide-ele-icon variant=\"green\" size=\"xs\" class=\"tw-mr-1\">check_circle</cide-ele-icon>\n              Active\n            </span>\n            } @else {\n            <span\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\">\n              <cide-ele-icon variant=\"red\" size=\"xs\" class=\"tw-mr-1\">cancel</cide-ele-icon>\n              Inactive\n            </span>\n            }\n          </div>\n        </div>\n\n        <!-- Entity Info -->\n        <div class=\"tw-flex tw-items-center tw-gap-2\">\n          @if (hasDefaultEntity()) {\n          <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-xs tw-text-blue-700\">\n            <cide-ele-icon variant=\"blue\" size=\"xs\">business</cide-ele-icon>\n            <span class=\"tw-font-medium\">{{ getDefaultEntityName() }}</span>\n          </div>\n          } @else {\n          <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-xs tw-text-gray-500\">\n            <cide-ele-icon variant=\"gray\" size=\"xs\">business</cide-ele-icon>\n            <span class=\"tw-italic\">No entity</span>\n          </div>\n          }\n\n          <span class=\"tw-text-xs tw-text-gray-600 tw-px-2 tw-py-1 tw-bg-gray-100 tw-rounded\">\n            {{ getEntityMappingCount() }} mapping(s)\n          </span>\n        </div>\n      </div>\n    </div>\n\n    <!-- Tab Navigation -->\n    <div class=\"tw-p-0 tw-mb-2 tw-border-b tw-border-gray-200\">\n      <cide-ele-tab [tabs]=\"userTabs()\" [activeTabId]=\"activeTab()\" size=\"md\" variant=\"default\"\n        (tabChange)=\"onTabChange($event)\">\n      </cide-ele-tab>\n    </div>\n\n    <!-- Tab Content -->\n    <div class=\"tw-transition-opacity tw-duration-300\" [class.tw-opacity-60]=\"loading()\">\n      @switch (activeTab()) {\n\n      @case ('basic') {\n      <!-- User Basic Information Section -->\n      <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\n\n        <!-- Top Section: Form Fields on Left, Profile Photo on Right -->\n        <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-[1fr_200px] tw-gap-4 tw-mb-4\">\n          <!-- Left Side: Form Fields -->\n          <div class=\"tw-space-y-4\">\n            <!-- Name Fields - All in One Row -->\n            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-4\">\n              <cide-ele-input id=\"user_firstname\" label=\"First Name\" formControlName=\"user_firstname\"\n                placeholder=\"Enter first name\" [maxlength]=\"20\" size=\"md\" (ngModelChange)=\"onNameFieldChange()\">\n              </cide-ele-input>\n\n              <cide-ele-input id=\"user_middlename\" label=\"Middle Name\" formControlName=\"user_middlename\"\n                placeholder=\"Enter middle name\" [maxlength]=\"20\" size=\"md\" (ngModelChange)=\"onNameFieldChange()\">\n              </cide-ele-input>\n\n              <cide-ele-input id=\"user_lastname\" label=\"Last Name\" formControlName=\"user_lastname\"\n                placeholder=\"Enter last name\" [maxlength]=\"20\" size=\"md\" (ngModelChange)=\"onNameFieldChange()\">\n              </cide-ele-input>\n\n              <cide-ele-input id=\"user_fullname\" label=\"Full Name (Auto-generated)\" formControlName=\"user_fullname\"\n                placeholder=\"Auto-generated from name fields or enter manually\" [maxlength]=\"62\" size=\"md\">\n              </cide-ele-input>\n            </div>\n\n            <!-- Contact Information - All in One Row -->\n            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-3 tw-gap-4\">\n              <cide-ele-input id=\"user_username\" label=\"Username\" formControlName=\"user_username\"\n                placeholder=\"Enter unique username\" [maxlength]=\"20\" size=\"md\">\n              </cide-ele-input>\n\n              <cide-ele-input id=\"user_emailid\" label=\"Email ID\" formControlName=\"user_emailid\" type=\"email\"\n                placeholder=\"Enter valid email address\" [maxlength]=\"320\" size=\"md\">\n              </cide-ele-input>\n\n              <cide-ele-input id=\"user_mobileno\" label=\"Mobile Number\" formControlName=\"user_mobileno\" type=\"tel\"\n                placeholder=\"Enter mobile number\" [maxlength]=\"15\" size=\"md\">\n              </cide-ele-input>\n            </div>\n\n            <!-- User Type Mapping -->\n            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\n              <cide-ele-select\n                id=\"syutm_user_type\"\n                label=\"User Type\"\n                placeholder=\"Select user type\"\n                [options]=\"userTypeOptions\"\n                valueKey=\"value\"\n                labelKey=\"label\"\n                formControlName=\"syutm_user_type\"\n                size=\"md\">\n              </cide-ele-select>\n\n              <cide-ele-input\n                id=\"syutm_type_specific_id\"\n                label=\"Type-Specific ID\"\n                placeholder=\"Enter type-specific ID (e.g., STU001, TCH001)\"\n                formControlName=\"syutm_type_specific_id\"\n                [maxlength]=\"50\"\n                size=\"md\">\n              </cide-ele-input>\n            </div>\n          </div>\n\n          <!-- Right Side: Profile Photo Upload -->\n          <div class=\"tw-flex tw-items-start tw-justify-center tw-p-0\">\n            <cide-ele-file-input id=\"user_photo_id_cyfm\" formControlName=\"user_photo_id_cyfm\" accept=\"image/*\"\n              [showPreview]=\"true\" [previewBoxMode]=\"true\" [showFileName]=\"false\" previewWidth=\"180px\"\n              previewHeight=\"120px\" placeholderText=\"Upload Photo\" placeholderIcon=\"cloud_upload\" [autoUpload]=\"true\"\n              [uploadData]=\"getProfilePhotoUploadData()\" (uploadSuccess)=\"onProfilePhotoUploadSuccess($event)\"\n              (uploadError)=\"onProfilePhotoUploadError($event)\"\n              (uploadProgressChange)=\"onProfilePhotoUploadProgress($event)\">\n            </cide-ele-file-input>\n          </div>\n        </div>\n\n\n\n        <!-- Status Control -->\n        <div class=\"tw-grid tw-grid-cols-1 tw-mb-2\">\n          <div class=\"tw-p-2 tw-bg-blue-50 tw-border tw-border-blue-100 tw-rounded-lg\">\n            <label\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\">\n              <cide-ele-input type=\"checkbox\" label=\"Active User Status\" formControlName=\"user_isactive\"\n                class=\"tw-h-5 tw-accent-blue-500 tw-rounded tw-mb-1\" />\n              <span class=\"tw-font-semibold tw-text-gray-700 tw-text-base\"></span>\n              <span class=\"tw-text-sm tw-text-gray-600 tw-mt-1 tw-leading-relaxed\">Enable this user account for system\n                access and operations</span>\n            </label>\n          </div>\n        </div>\n      </div>\n      }\n\n      @case ('auth') {\n      <!-- Authentication Section -->\n      <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\n        <!-- Password Fields -->\n        @if (shouldShowPasswordFields()) {\n        <div class=\"tw-mb-4\">\n          <!-- Password Fields Header for Edit Mode -->\n          @if (isEditMode()) {\n          <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\n            <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-800\">Update Password</h6>\n            <button type=\"button\"\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\"\n              (click)=\"cancelPasswordUpdate()\">\n              Cancel Password Update\n            </button>\n          </div>\n          }\n\n          <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-2 md:tw-grid-cols-1 tw-gap-6\">\n            <cide-ele-input id=\"user_password\" [label]=\"getPasswordFieldLabel()\" formControlName=\"user_password\"\n              type=\"password\" placeholder=\"Enter secure password (min 8 characters)\" size=\"md\">\n            </cide-ele-input>\n\n            <cide-ele-input id=\"user_confirm_password\" [label]=\"getPasswordConfirmLabel()\"\n              formControlName=\"user_confirm_password\" type=\"password\" placeholder=\"Confirm your password\" size=\"md\">\n            </cide-ele-input>\n          </div>\n        </div>\n        }\n\n        <!-- Password Update Option for Edit Mode -->\n        @if (isEditMode() && !shouldShowPasswordFields()) {\n        <div class=\"tw-mb-4\">\n          <div class=\"tw-p-2 tw-bg-blue-50 tw-border tw-border-blue-200 tw-rounded-lg\">\n            <h6 class=\"tw-text-sm tw-font-semibold tw-text-blue-800 tw-mb-2\">Password Update</h6>\n            <p class=\"tw-text-sm tw-text-blue-600 tw-mb-3\">Current password will be kept. Click below to change\n              password.</p>\n\n            @if (hasPasswordInput()) {\n            <div\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\">\n              <cide-ele-icon variant=\"yellow\" size=\"xs\" class=\"tw-mr-1\">warning</cide-ele-icon>\n              Password fields contain text. Click \"Change Password\" to manage existing input.\n            </div>\n            }\n\n            <button type=\"button\"\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\"\n              (click)=\"triggerPasswordUpdate()\">\n              @if (hasPasswordInput()) {\n              Manage Password Fields\n              } @else {\n              Change Password\n              }\n            </button>\n          </div>\n        </div>\n        }\n\n        <!-- Password Options -->\n        <div class=\"tw-grid tw-grid-cols-1 tw-gap-4 tw-mb-4\">\n          <div class=\"tw-p-2 tw-bg-yellow-50 tw-border tw-border-yellow-100 tw-rounded-lg\">\n            <label\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\">\n              <cide-ele-input type=\"checkbox\" label=\"Force Password Change on Login\"\n                formControlName=\"user_passwordchangeonlogin\" class=\"tw-h-5 tw-accent-yellow-500 tw-rounded tw-mb-1\" />\n              <span class=\"tw-text-sm tw-text-gray-600 tw-mt-1 tw-leading-relaxed\">User will be required to change\n                password on next login</span>\n            </label>\n          </div>\n        </div>\n\n      </div>\n      }\n\n      @case ('roles') {\n      <!-- Entity, Roles & Permissions Mapping Section -->\n      <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\n\n\n\n        <!-- Important Note -->\n        <div class=\"tw-bg-amber-50 tw-border tw-border-amber-200 tw-rounded-lg tw-p-2 tw-mb-4\">\n          <div class=\"tw-flex tw-items-start tw-gap-3\">\n            <cide-ele-icon variant=\"amber\" size=\"lg\">info</cide-ele-icon>\n            <div class=\"tw-flex-1\">\n              <h4 class=\"tw-text-sm tw-font-semibold tw-text-amber-800 tw-mb-1\">Entity-Role Based Access</h4>\n              <p class=\"tw-text-sm tw-text-amber-700 tw-mb-2\">User access is completely managed through entity-role\n                mappings below. At least one entity mapping is required for user access.</p>\n              @if (hasDefaultEntity()) {\n              <div class=\"tw-flex tw-items-center tw-gap-2 tw-mt-2 tw-p-2 tw-bg-amber-100 tw-rounded\">\n                <cide-ele-icon variant=\"amber\" size=\"sm\">star</cide-ele-icon>\n                <span class=\"tw-text-sm tw-text-amber-800\">\n                  <strong>Default Entity:</strong> {{ getDefaultEntityName() }}\n                </span>\n              </div>\n              } @else {\n              <div class=\"tw-text-sm tw-text-amber-600 tw-mt-2 tw-italic\">\n                \u26A0\uFE0F No default entity selected. Please set one entity as default.\n              </div>\n              }\n            </div>\n          </div>\n        </div>\n\n        <!-- Entity-Role Mapping Section -->\n        <div class=\"tw-flex tw-text-center tw-justify-between tw-items-center tw-mb-4\">\n          <div>\n            <h4 class=\"tw-text-sm tw-text-left tw-font-semibold tw-text-blue-900 tw-mb-1\">Entity-Role Mapping</h4>\n            <p class=\"tw-text-sm tw-text-blue-700\">Map user to entities with specific roles and permissions</p>\n          </div>\n          <div class=\"tw-flex tw-flex-col tw-items-end\">\n            <button cideEleButton variant=\"primary\" size=\"md\" type=\"button\" (click)=\"addEntityMapping()\"\n              leftIcon=\"add\" [disabled]=\"isAllEntitiesMapped()\">\n              Add Entity Mapping\n            </button>\n\n            @if (isAllEntitiesMapped()) {\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\">\n              <p class=\"tw-text-xs tw-text-blue-700\">\n                <cide-ele-icon variant=\"info\" size=\"xs\" class=\"tw-mr-1\">info</cide-ele-icon>\n                All available entities are already mapped.\n              </p>\n            </div>\n            }\n          </div>\n        </div>\n\n        <div formArrayName=\"core_entity_mapping\">\n            @for (mapping of entityMappings(); track mapping.syenm_entity_id_syen?._id || mapping.syenm_entity_id_syen || $index; let i = $index) {\n            <cide-ele-card\n              [title]=\"getEntityNameFromMapping(i) || 'Entity Mapping ' + (i + 1)\"\n              [subtitle]=\"mapping.syenm_isdefault ? 'Primary Entity' : ''\"\n              [cardConfig]=\"{\n                collapsible: true,\n                minimizable: false,\n                maximizable: false,\n                removable: !mapping?._id,\n                defaultState: 'collapsed',\n                showHeader: true,\n                showFooter: false,\n                variant: 'default',\n                size: 'sm',\n                shadow: true,\n                rounded: true,\n                bordered: true\n              }\"\n              (stateChange)=\"onEntityMappingCardStateChange($event, i)\"\n              (removed)=\"removeEntityMapping(i)\"\n              class=\"tw-mb-2 entity-mapping-card tw-block\">\n              \n              <div [formGroupName]=\"i\">\n              \n              <!-- Card Actions (User Type Mappings only) -->\n              <div card-actions class=\"tw-flex tw-items-center tw-gap-1.5 tw-flex-wrap tw-max-w-full\">\n                @if (getEntityIdFromMapping(i)) {\n                  @if (getUserTypeMappingsForEntity(getEntityIdFromMapping(i)).length > 0) {\n                    @for (typeMapping of getUserTypeMappingsForEntity(getEntityIdFromMapping(i)); track typeMapping._id || typeMapping.syutm_type_specific_id) {\n                      <span class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded tw-text-[10px] tw-font-medium tw-bg-purple-50 dark:tw-bg-purple-900/20 tw-text-purple-700 dark:tw-text-purple-300 tw-border tw-border-purple-200 dark:tw-border-purple-800\">\n                        <cide-ele-icon variant=\"purple\" size=\"xs\" class=\"tw-mr-1\">person</cide-ele-icon>\n                        {{ typeMapping.syutm_user_type }}\n                        @if (typeMapping.syutm_isactive) {\n                          <span class=\"tw-ml-1 tw-w-1.5 tw-h-1.5 tw-rounded-full tw-bg-green-500\"></span>\n                        }\n                      </span>\n                    }\n                  }\n                }\n              </div>\n\n              <!-- Card Content -->\n              <div class=\"tw-space-y-3\">\n                <!-- Hidden form control to maintain form structure for entity -->\n                <input type=\"hidden\" [formControlName]=\"'syenm_entity_id_syen'\" />\n                \n                <!-- Role, Default, and Active in One Row -->\n                <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-3\">\n                  <!-- Role Selection -->\n                  <cide-ele-select label=\"Role for this Entity\" [options]=\"getRoleOptionsForEntity(i)\"\n                    formControlName=\"syenm_role_id_syusrol\" valueKey=\"_id\" labelKey=\"syusrol_role_name\"\n                    placeholder=\"Select role for this entity\" size=\"md\" (change)=\"onRoleChange(i, $event)\">\n                  </cide-ele-select>\n                  \n                  <!-- Primary Entity Checkbox -->\n                  <div class=\"tw-flex tw-flex-col\">\n                    <label class=\"tw-block tw-text-sm tw-font-medium tw-text-gray-700 dark:tw-text-gray-300 tw-mb-1.5\">Default</label>\n                    <div class=\"tw-flex tw-items-center tw-gap-2 tw-px-3 tw-py-2 tw-rounded-md tw-border tw-border-green-200 tw-bg-green-50 dark:tw-bg-green-900/20 dark:tw-border-green-800\" (click)=\"$event.stopPropagation()\">\n                      <input \n                        type=\"checkbox\" \n                        [checked]=\"mapping.syenm_isdefault\"\n                        (change)=\"onDefaultEntityChange(i, $event)\" \n                        class=\"tw-h-4 tw-w-4 tw-accent-green-600 tw-cursor-pointer\" />\n                      <label class=\"tw-inline-flex tw-items-center tw-gap-1 tw-text-xs tw-font-semibold tw-text-green-700 dark:tw-text-green-300 tw-cursor-pointer\">\n                        <cide-ele-icon variant=\"green\" size=\"xs\">star</cide-ele-icon>\n                        DEFAULT\n                      </label>\n                    </div>\n                  </div>\n                  \n                  <!-- Active Mapping Checkbox -->\n                  <div class=\"tw-flex tw-flex-col\">\n                    <label class=\"tw-block tw-text-sm tw-font-medium tw-text-gray-700 dark:tw-text-gray-300 tw-mb-1.5\">Status</label>\n                    <div class=\"tw-flex tw-items-center tw-gap-2 tw-px-3 tw-py-2 tw-rounded-md tw-border tw-border-blue-200 tw-bg-blue-50 dark:tw-bg-blue-900/20 dark:tw-border-blue-800\" (click)=\"$event.stopPropagation()\">\n                      <input \n                        type=\"checkbox\" \n                        [checked]=\"mapping.syenm_isactive\"\n                        (change)=\"onActiveMappingChange(i, $event)\" \n                        class=\"tw-h-4 tw-w-4 tw-accent-blue-600 tw-cursor-pointer\" />\n                      <label class=\"tw-inline-flex tw-items-center tw-gap-1 tw-text-xs tw-font-semibold tw-text-blue-700 dark:tw-text-blue-300 tw-cursor-pointer\">\n                        <cide-ele-icon variant=\"blue\" size=\"xs\">check_circle</cide-ele-icon>\n                        Active\n                      </label>\n                    </div>\n                  </div>\n                </div>\n\n\n                <!-- Entity-Specific Details and Active Period - All in One Row -->\n                <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-3\">\n                  <cide-ele-select label=\"Department for this Entity\" [options]=\"getDepartmentOptionsForEntity(i)\"\n                    formControlName=\"syenm_department_id_sydept\" (change)=\"onDepartmentChange($event)\" valueKey=\"_id\"\n                    labelKey=\"sydept_name\" placeholder=\"Select department\" size=\"md\">\n                  </cide-ele-select>\n\n                  <cide-ele-select label=\"Designation for this Entity\" [options]=\"getDesignationOptionsForEntity(i)\"\n                    valueKey=\"_id\" labelKey=\"sydsg_name\" formControlName=\"syenm_designation_id_sydsg\"\n                    placeholder=\"Select designation\" size=\"md\">\n                  </cide-ele-select>\n\n                  <cide-ele-input label=\"Active From\" [id]=\"'syenm_activefrom['+i+']'\"\n                    formControlName=\"syenm_activefrom\" type=\"date\" size=\"md\">\n                  </cide-ele-input>\n\n                  <cide-ele-input label=\"Active Until\" [id]=\"'syenm_activeupto['+i+']'\"\n                    formControlName=\"syenm_activeupto\" type=\"date\" size=\"md\">\n                  </cide-ele-input>\n                </div>\n\n                <!-- Menu Rights Grid for this Entity-Role -->\n                <div class=\"tw-border-t tw-border-gray-200\">\n\n                  @if (getMenuRightsForMapping(i).length > 0) {\n                  <!-- Menu Rights Tree Grid -->\n\n                  <cide-ele-data-grid [config]=\"getMenuRightsGridConfig(i)\"\n                    [templateRenderers]=\"getMenuRightsTemplateRenderers(i)\"\n                    (gridEvent)=\"onMenuRightsGridEvent($event, i)\" class=\"tw-h-96 tw-w-full\">\n                  </cide-ele-data-grid>\n\n                  } @else {\n                  <div class=\"tw-text-center tw-py-8 tw-bg-gray-50 tw-border tw-border-gray-200 tw-rounded-lg\">\n                    <div class=\"tw-text-gray-400 tw-mb-3\">\n                      <cide-ele-icon variant=\"gray\" size=\"lg\">menu</cide-ele-icon>\n                    </div>\n                    <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-600 tw-mb-2\">No Menu Rights Available</h6>\n                    <p class=\"tw-text-xs tw-text-gray-500 tw-mb-3 tw-text-center\">Select both entity and role to\n                      automatically load\n                      menu rights for this mapping.</p>\n                  </div>\n                  }\n                </div>\n              </div>\n              </div>\n            </cide-ele-card>\n            }\n          </div>\n\n          @if (entityMappings().length === 0) {\n          <div class=\"tw-text-center tw-py-8 tw-bg-white tw-border tw-border-blue-200 tw-rounded-lg\">\n            <div class=\"tw-text-blue-400 tw-mb-3\">\n              <cide-ele-icon variant=\"blue\" size=\"lg\">business</cide-ele-icon>\n            </div>\n            <h4 class=\"tw-text-sm tw-font-medium tw-text-blue-800 tw-mb-2\">No Entity Mappings</h4>\n            <p class=\"tw-text-blue-600 tw-mb-4 tw-text-center\">Add entity mappings to assign specific roles and\n              permissions for different entities.</p>\n            <button class=\"tw-mx-auto\" cideEleButton variant=\"primary\" size=\"md\" type=\"button\"\n              (click)=\"addEntityMapping()\" leftIcon=\"add\">\n              Add First Entity Mapping\n            </button>\n          </div>\n          }\n        </div>\n      }\n\n      @case ('addresses') {\n      <!-- Contact Addresses Section -->\n      <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\n        <div class=\"tw-flex tw-justify-end\">\n          <div class=\"tw-flex tw-justify-between tw-items-end tw-mb-2 tw-gap-4\">\n            <button cideEleButton variant=\"primary\" size=\"md\" type=\"button\" (click)=\"addContactAddress()\"\n              leftIcon=\"add\" [disabled]=\"!hasAddContactAddressRights()\">\n              Add New Address\n            </button>\n          </div>\n        </div>\n\n        <div formArrayName=\"core_user_contact_addresses\">\n          @for (address of contactAddresses(); track $index; let i = $index) {\n          <div [formGroupName]=\"i\"\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\">\n            <div\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\">\n              <!-- Use address type as header instead of generic \"Address X\" -->\n              <h4 class=\"tw-m-0 tw-text-gray-700 tw-text-sm tw-font-semibold tw-tracking-tight\">\n                {{ getAddressTypeLabel(i) || ('Address ' + (i + 1)) }}\n              </h4>\n              <div class=\"tw-flex tw-items-center tw-gap-2\">\n                @if (isAddressOwner(i)) {\n                <button cideEleButton variant=\"secondary\" size=\"xs\" type=\"button\" (click)=\"shareAddress(i)\"\n                  leftIcon=\"share\" class=\"tw-text-blue-600 hover:tw-text-blue-700\">\n                  Share\n                </button>\n                }\n                @if (!address?._id) {\n                <button cideEleButton variant=\"danger\" size=\"sm\" type=\"button\" (click)=\"removeContactAddress(i)\"\n                  leftIcon=\"delete\">\n                  Remove\n                </button>\n                }\n              </div>\n            </div>\n            <div class=\"tw-p-4\">\n              <!-- Main Layout: Inputs on Left, Address Textarea on Right -->\n              <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-4 tw-gap-3 tw-mb-3\">\n                \n                <!-- Left Side: Input Fields (3/4 width) -->\n                <div class=\"lg:tw-col-span-3\">\n                  <!-- Row 1: Address Type, Contact Person -->\n                  <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3 tw-mb-3\">\n                    <cide-ele-select label=\"Address Type\" [options]=\"addressTypeOptions()\" id=\"sycad_address_type_id_sygms\"\n                      formControlName=\"sycad_address_type_id_sygms\" placeholder=\"Select type\" size=\"sm\"\n                      valueKey=\"_id\" labelKey=\"sygms_title\" (change)=\"onAddressTypeChange(i)\">\n                    </cide-ele-select>\n\n                    <cide-ele-input label=\"Contact Person\" formControlName=\"sycad_contact_person_name\"\n                      placeholder=\"Enter contact person\" size=\"sm\">\n                    </cide-ele-input>\n                  </div>\n\n                  <!-- Row 2: Postal Code, City, State, Country -->\n                  <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-4 tw-gap-3\">\n                    <cide-ele-select label=\"Postal Code\" [options]=\"addressPostalCodes()[i] || []\"\n                      formControlName=\"sycad_contact_pin_sypin\" placeholder=\"Select postal code\" [searchable]=\"true\"\n                      [loading]=\"addressPostalCodesLoading()[i] || false\" (searchChange)=\"onPostalCodeSearch($event, i)\"\n                      (change)=\"onPostalCodeSelection($event, i)\" size=\"sm\">\n                    </cide-ele-select>\n\n                    <cide-ele-input label=\"City\" formControlName=\"sycad_contact_city_sypin\" placeholder=\"Enter city\"\n                      size=\"sm\">\n                    </cide-ele-input>\n\n                    <cide-ele-input label=\"State\" formControlName=\"sycad_contact_state_sypin\" placeholder=\"Enter state\"\n                      size=\"sm\">\n                    </cide-ele-input>\n\n                    <cide-ele-select label=\"Country\" [options]=\"addressCountries()[i] || []\"\n                      formControlName=\"sycad_contact_country_syctr\" placeholder=\"Select country\" valueKey=\"_id\"\n                      labelKey=\"syctr_country_iso_name\" [searchable]=\"true\" (searchChange)=\"onCountrySearch($event, i)\"\n                      [loading]=\"addressCountriesLoading()[i] || false\" size=\"sm\">\n                    </cide-ele-select>\n                  </div>\n                </div>\n\n                <!-- Right Side: Address Textarea (1/4 width, spans 2 rows) -->\n                <div class=\"lg:tw-col-span-1 lg:tw-row-span-2 tw-flex tw-flex-col\">\n                  <cide-ele-textarea label=\"Complete Address\" formControlName=\"sycad_contact_address\"\n                    placeholder=\"Enter complete address with area, city, and landmarks\" [rows]=\"4\" size=\"sm\"\n                    class=\"tw-h-full\">\n                  </cide-ele-textarea>\n                </div>\n              </div>\n\n              <!-- Contact Details: Primary Phone, Alt Phone, Fax, Primary Email in 4 columns -->\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-4 tw-gap-3 tw-mb-3\">\n                <cide-ele-input label=\"Primary Phone\" formControlName=\"sycad_contact_phone\" type=\"tel\"\n                  placeholder=\"Primary phone\" size=\"sm\">\n                </cide-ele-input>\n\n                <cide-ele-input label=\"Alternate Phone\" formControlName=\"sycad_contact_phone_alt\" type=\"tel\"\n                  placeholder=\"Alternate phone\" size=\"sm\">\n                </cide-ele-input>\n\n                <cide-ele-input label=\"Fax Number\" formControlName=\"sycad_contact_fax\" placeholder=\"Fax number\"\n                  size=\"sm\">\n                </cide-ele-input>\n\n                <cide-ele-input label=\"Primary Email\" formControlName=\"sycad_contact_email\" type=\"email\"\n                  placeholder=\"Primary email\" size=\"sm\">\n                </cide-ele-input>\n              </div>\n\n              <!-- Alternate Email in single row -->\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3\">\n                <cide-ele-input label=\"Alternate Email\" formControlName=\"sycad_contact_email_alt\" type=\"email\"\n                  placeholder=\"Alternate email address\" size=\"sm\">\n                </cide-ele-input>\n              </div>\n            </div>\n          </div>\n          }\n        </div>\n      </div>\n      }\n\n      @case ('documents') {\n      <!-- Documents Section -->\n      <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\n        <div class=\"tw-flex tw-justify-end tw-items-end tw-mb-2 tw-gap-4\">\n          <button cideEleButton variant=\"primary\" size=\"md\" type=\"button\" (click)=\"addDocument()\" leftIcon=\"add\" [disabled]=\"!hasAddDocumentRights()\">\n            Add Document\n          </button>\n        </div>\n        <div formArrayName=\"core_user_documents\">\n          @for (doc of documents(); track $index; let i = $index) {\n          <div [formGroupName]=\"i\"\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\">\n            <div\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\">\n              <h4 class=\"tw-m-0 tw-text-gray-700 tw-text-sm tw-font-semibold tw-tracking-tight\">\n                {{ getDocumentTypeLabel(i) || ('Document ' + (i + 1)) }}\n              </h4>\n              <div class=\"tw-flex tw-gap-2\">\n                @if (doc?._id) {\n                <button cideEleButton variant=\"secondary\" size=\"sm\" type=\"button\" (click)=\"shareDocumentRights(i)\"\n                  leftIcon=\"share\">\n                  Share\n                </button>\n                }\n              </div>\n            </div>\n            <div class=\"tw-p-4\">\n              <!-- Main Layout: Inputs on Left, File Upload on Right -->\n              <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-3 tw-gap-4\">\n                \n                <!-- Left Side: Document Information (2/3 width) -->\n                <div class=\"lg:tw-col-span-2\">\n                  <!-- Row 1: Document Type, Document Number, Name as per Document -->\n                  <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-3 tw-mb-3\">\n                    <cide-ele-select label=\"Document Type\" [options]=\"documentTypeOptions()\"\n                      formControlName=\"syusd_document_type_id_sygms\" placeholder=\"Select type\" size=\"sm\"\n                      valueKey=\"_id\" labelKey=\"sygms_title\" (change)=\"onDocumentTypeChange(i)\">\n                    </cide-ele-select>\n\n                    <cide-ele-input label=\"Document Number\" formControlName=\"syusd_doc_number\"\n                      placeholder=\"Document number\" size=\"sm\">\n                    </cide-ele-input>\n\n                    <cide-ele-input label=\"Name as per Document\" formControlName=\"syusd_doc_name_as_per_doc\"\n                      placeholder=\"Name on document\" size=\"sm\">\n                    </cide-ele-input>\n                  </div>\n\n                  <!-- Row 2: Issue Date, Expiry Date, Photo Group -->\n                  <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-3 tw-mb-3\">\n                    <cide-ele-input label=\"Issue Date\" formControlName=\"syusd_doc_issue_date\"\n                      [id]=\"'syusd_doc_issue_date['+i+']'\" type=\"date\" size=\"sm\">\n                    </cide-ele-input>\n\n                    <cide-ele-input label=\"Expiry Date\" formControlName=\"syusd_doc_expiry_date\"\n                      [id]=\"'syusd_doc_expiry_date['+i+']'\" type=\"date\" size=\"sm\">\n                    </cide-ele-input>\n                  </div>\n\n                  <!-- Row 3: Verification Status, KYC Status -->\n                  <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3\">\n                    <cide-ele-select label=\"Verification Status\" [options]=\"documentVerificationStatusOptions()\"\n                      formControlName=\"syusd_doc_verification_status_id_sygms\" placeholder=\"Select status\"\n                      size=\"sm\" valueKey=\"_id\" labelKey=\"sygms_title\">\n                    </cide-ele-select>\n\n                    <cide-ele-select label=\"KYC Status\" [options]=\"documentKycStatusOptions()\"\n                      formControlName=\"syusd_doc_kyc_status_id_sygms\" placeholder=\"Select KYC status\" size=\"sm\"\n                      valueKey=\"_id\" labelKey=\"sygms_title\">\n                    </cide-ele-select>\n                  </div>\n                </div>\n\n                <!-- Right Side: File Upload (1/3 width) -->\n                <div class=\"lg:tw-col-span-1\">\n                  <div class=\"tw-bg-gray-50 tw-border tw-border-gray-200 tw-rounded-lg tw-p-3 tw-h-full\">\n                    \n                    <!-- File Upload Input -->\n                    <cide-ele-file-input\n                      [id]=\"'document-files-' + i\"\n                      [multiple]=\"true\"\n                      formControlName=\"syusd_photo_group_id_cyfm\"\n                      [accept]=\"'.pdf,.jpg,.jpeg,.png,.doc,.docx'\"\n                      [autoUpload]=\"true\"\n                      [uploadData]=\"getDocumentUploadData(i)\"\n                      (change)=\"onDocumentFilesSelected($event, i)\"\n                      (uploadSuccess)=\"onDocumentUploadSuccess($event, i)\"\n                      (uploadError)=\"onDocumentUploadError($event, i)\"\n                      (uploadProgressChange)=\"onDocumentUploadProgress($event, i)\"\n                      class=\"tw-mb-3\"\n                      size=\"sm\">\n                    </cide-ele-file-input>\n\n                    <!-- Upload Status -->\n                    <!-- Upload status is now handled by the file input component itself -->\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n          }\n        </div>\n      </div>\n      }\n\n      @case ('family') {\n      <!-- Family Details Section - Compact Design -->\n      <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\n        <div class=\"tw-flex tw-justify-end tw-items-end tw-mb-3 tw-gap-4\">\n          <button cideEleButton variant=\"primary\" size=\"sm\" type=\"button\" (click)=\"addFamilyDetail()\" leftIcon=\"add\" [disabled]=\"!hasAddFamilyDetailRights()\">\n            Add Family Member\n          </button>\n        </div>\n\n        <div formArrayName=\"core_user_family_details\">\n          @for (family of familyDetails(); track $index; let i = $index) {\n          <div [formGroupName]=\"i\"\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\">\n            \n            <!-- Compact Header -->\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\">\n              <h4 class=\"tw-m-0 tw-text-gray-700 tw-text-sm tw-font-medium\">Family Member {{ i + 1 }}</h4>\n              <div class=\"tw-flex tw-gap-2\">\n                @if (family?._id) {\n                <button cideEleButton variant=\"secondary\" size=\"xs\" type=\"button\" (click)=\"shareFamilyDetailRights(i)\"\n                  leftIcon=\"share\">\n                  Share\n                </button>\n                }\n                @if (!family?._id) {\n                <button cideEleButton variant=\"danger\" size=\"xs\" type=\"button\" (click)=\"removeFamilyDetail(i)\" leftIcon=\"delete\">\n                  Remove\n                </button>\n                }\n              </div>\n            </div>\n            \n            <!-- Compact Form Content - 3 inputs per row -->\n            <div class=\"tw-p-4\">\n              <!-- Row 1: Name, User, and Combined Relationship/Active Status (33.33% each) -->\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-3 tw-mb-3\">\n                <cide-ele-input label=\"Family Member Name\" formControlName=\"syfdl_family_member_name\"\n                  placeholder=\"Enter family member full name\" size=\"sm\">\n                </cide-ele-input>\n\n                <cide-ele-select label=\"Family Member User\" [options]=\"userOptions(i)\"\n                  formControlName=\"syfdl_family_member_id_user\" placeholder=\"Select family member user\" size=\"sm\"\n                  valueKey=\"_id\" labelKey=\"user_fullname\" [searchable]=\"true\"\n                  [loading]=\"userSearchLoading()[i] || false\" (searchChange)=\"onUserSearchChange($event, i)\"\n                  (change)=\"onUserSelectionChange($event, i)\">\n                </cide-ele-select>\n\n                <!-- Combined Relationship and Active Status (33.33%) -->\n                <div class=\"tw-flex tw-flex-row tw-gap-2 tw-items-end\">\n                  <div class=\"tw-flex-1\">\n                    <cide-ele-select label=\"Relationship\" [options]=\"relationshipOptions()\"\n                      formControlName=\"syfdl_relationship_id_sygms\" placeholder=\"Select relationship\" size=\"sm\"\n                      valueKey=\"_id\" labelKey=\"sygms_title\">\n                    </cide-ele-select>\n                  </div>\n\n                  <div class=\"tw-flex tw-items-center tw-pt-1 tw-flex-shrink-0\">\n                    <cide-ele-input formControlName=\"syfdl_isactive\" type=\"checkbox\" label=\"Active\" size=\"sm\">\n                    </cide-ele-input>\n                  </div>\n                </div>\n              </div>\n\n              <!-- Row 2: Blood Group, DOB, and Phone -->\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\">\n                <cide-ele-select label=\"Blood Group\" [options]=\"bloodGroupOptions()\"\n                  formControlName=\"syfdl_blood_group_sygms\" placeholder=\"Select blood group\" size=\"sm\" valueKey=\"_id\"\n                  labelKey=\"sygms_title\">\n                </cide-ele-select>\n\n                <cide-ele-input label=\"Date of Birth\" formControlName=\"syfdl_family_member_dob\" type=\"date\" size=\"sm\"\n                  [id]=\"'syfdl_family_member_dob['+i+']'\">\n                </cide-ele-input>\n\n                <cide-ele-input label=\"Contact Phone\" formControlName=\"syfdl_contact_phone\" type=\"tel\"\n                  placeholder=\"Enter contact phone\" size=\"sm\">\n                </cide-ele-input>\n              </div>\n\n              <!-- Row 3: Email, Email ID, and Contact Number -->\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\">\n                <cide-ele-input label=\"Contact Email\" formControlName=\"syfdl_contact_email\" type=\"email\"\n                  placeholder=\"Enter contact email\" size=\"sm\">\n                </cide-ele-input>\n\n                <cide-ele-input label=\"Contact Email ID\" formControlName=\"syfdl_contact_email_id\" type=\"email\"\n                  placeholder=\"Enter contact email ID\" size=\"sm\">\n                </cide-ele-input>\n\n                <cide-ele-input label=\"Contact Number\" formControlName=\"syfdl_contact_number\" type=\"tel\"\n                  placeholder=\"Enter contact number\" size=\"sm\">\n                </cide-ele-input>\n              </div>\n\n            </div>\n          </div>\n          }\n        </div>\n      </div>\n      }\n      }\n    </div>\n\n    <!-- Form Actions -->\n    <div\n      class=\"tw-flex tw-justify-between tw-items-center tw-gap-4 tw-py-2 tw-bg-white tw-border-t tw-border-gray-200 tw-sticky tw-bottom-0 tw-z-10\">\n      <!-- Error Display Component -->\n      <div class=\"tw-flex-1\">\n        <cide-form-field-error [formGroup]=\"userMasterForm\"></cide-form-field-error>\n      </div>\n\n      <!-- Action Buttons -->\n      <div class=\"tw-flex tw-gap-4\">\n      <button cideEleButton type=\"button\" variant=\"secondary\" (click)=\"resetForm()\" leftIcon=\"refresh\"\n        [disabled]=\"loading()\">\n        Reset Form\n      </button>\n\n      <button cideEleButton type=\"submit\" variant=\"primary\" [disabled]=\"loading() || userMasterForm.invalid\"\n        [loading]=\"loading()\" leftIcon=\"save\">\n        Save User Master\n      </button>\n      </div>\n    </div>\n  </form>\n</div>\n</cide-lyt-shared-wrapper>\n\n<!-- Template Renderers for Role Permissions Grid -->\n<ng-template #menuDetailsRendererTemplate let-row=\"row\">\n  <div class=\"tw-flex tw-items-center tw-space-x-3 tw-min-w-0\">\n    <!-- Menu Icon -->\n    <div class=\"tw-flex-shrink-0\">\n      @if (row.syme_type === 'module') {\n      <cide-ele-icon class=\"tw-text-blue-600 tw-w-4 tw-h-4\">folder</cide-ele-icon>\n      } @else if (row.syme_type === 'section') {\n      <cide-ele-icon class=\"tw-text-green-600 tw-w-4 tw-h-4\">folder_open</cide-ele-icon>\n      } @else if (row.syme_type === 'menu') {\n      <cide-ele-icon class=\"tw-text-purple-600 tw-w-4 tw-h-4\">menu</cide-ele-icon>\n      } @else {\n      <cide-ele-icon class=\"tw-text-gray-600 tw-w-4 tw-h-4\">description</cide-ele-icon>\n      }\n    </div>\n\n    <!-- Menu Details -->\n    <div class=\"tw-ml-3 tw-min-w-0 tw-flex-1\">\n      <div class=\"tw-flex tw-items-center tw-gap-2\">\n        <div class=\"tw-text-xs tw-font-medium tw-text-gray-900 tw-truncate\" [title]=\"row.syme_title\">\n          {{ row.syme_title || row.menu?.syme_title || row.menu?.syme_menu_name || 'Untitled' }}\n        </div>\n        <!-- Green pill indicator for parent menus with child permissions -->\n        @if (row.syme_type === 'module' || row.syme_type === 'section') {\n        @if (hasChildMenusWithPermissions(row._id)) {\n        <span\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\">\n          Assigned\n        </span>\n        }\n        }\n      </div>\n      @if (row.permission?.sygms_name) {\n      <div class=\"tw-text-xs tw-text-blue-500 tw-truncate\" [title]=\"row.permission?.sygms_name\">\n        {{ row.permission?.sygms_name }}\n      </div>\n      }\n    </div>\n  </div>\n</ng-template>\n\n<!-- Menu Type Renderer Template -->\n<ng-template #menuTypeRendererTemplate let-row=\"row\" let-value=\"value\">\n  <div class=\"tw-flex tw-items-center tw-justify-center\">\n    @if (row.syme_type === 'module') {\n    <span\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\">\n      Module\n    </span>\n    } @else if (row.syme_type === 'section') {\n    <span\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\">\n      Section\n    </span>\n    } @else if (row.syme_type === 'menu') {\n    <span\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\">\n      Menu\n    </span>\n    } @else {\n    <span\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\">\n      {{ row.syme_type || 'Unknown' }}\n    </span>\n    }\n  </div>\n</ng-template>\n\n<!-- Permissions Checkbox Renderer Template -->\n<ng-template #permissionsCheckboxRendererTemplate let-row=\"row\" let-value=\"value\">\n  <div class=\"tw-flex tw-flex-wrap tw-gap-2 tw-max-w-full\">\n    @if (row.syme_type === 'menu' && row?.syme_permissions_id_sygms && row?.syme_permissions_id_sygms.length > 0) {\n    @for (permissionId of row?.syme_permissions_id_sygms || []; track permissionId) {\n    <div class=\"tw-flex tw-items-center tw-space-x-1\">\n      <div class=\"tw-flex tw-items-center tw-space-x-1\">\n        <input type=\"checkbox\" [checked]=\"isPermissionSelected(row._id, permissionId)\" [disabled]=\"true\"\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\">\n        <label class=\"tw-text-xs tw-text-gray-700\">\n          {{ getPermissionById(permissionId)?.sygms_title || 'Unknown' }}\n        </label>\n      </div>\n    </div>\n    }\n    } @else {\n    <!-- Show green checkmark for parent menus with child permissions -->\n    @if (row.syme_type === 'module' || row.syme_type === 'section' || row.syme_type === 'title') {\n    @if (hasChildMenusWithPermissions(row._id)) {\n    <div class=\"tw-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-bg-green-100 tw-rounded-full\">\n      <cide-ele-icon class=\"tw-text-green-600\" size=\"xs\">\n        check\n      </cide-ele-icon>\n    </div>\n    } @else {\n    <span class=\"tw-text-xs tw-text-gray-400\">N/A</span>\n    }\n    } @else {\n    <span class=\"tw-text-xs tw-text-gray-400\">N/A</span>\n    }\n    }\n  </div>\n</ng-template>\n\n<!-- Menu Rights Permissions Renderer Template -->\n<ng-template #menuRightsPermissionsRendererTemplate let-row=\"row\" let-value=\"value\">\n  <div class=\"tw-flex tw-flex-wrap tw-gap-2 tw-max-w-full\">\n    <!-- Role Rights Display -->\n    @if (row.role_rights && row.role_rights.length > 0) {\n    <div class=\"tw-mb-2\">\n      <div class=\"tw-text-xs tw-text-gray-500 tw-mb-1\">Role Rights:</div>\n      <div class=\"tw-flex tw-flex-wrap tw-gap-1\">\n        @for (right of row.role_rights; track $index) {\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\">\n          {{ right }}\n        </span>\n        }\n      </div>\n    </div>\n    }\n\n\n    <!-- Exception Indicator -->\n    @if (row.hasException) {\n    <div class=\"tw-mt-2\">\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\">\n        Override\n      </span>\n    </div>\n    } @else {\n    <div class=\"tw-mt-2\">\n      <span class=\"tw-text-xs tw-text-gray-400\">Default</span>\n    </div>\n    }\n  </div>\n</ng-template>\n\n<!-- Permissions Renderer Template -->\n<ng-template #permissionsRendererTemplate let-row=\"row\" let-value=\"value\">\n  <div class=\"tw-flex tw-flex-wrap tw-gap-2 tw-max-w-full\">\n    @if (row._permissionValues && Object.keys(row._permissionValues).length > 0) {\n    @for (permissionId of Object.keys(row._permissionValues); track permissionId) {\n    <div class=\"tw-flex tw-items-center tw-space-x-2\">\n      <cide-ele-input type=\"checkbox\" [ngModel]=\"row._permissionValues[permissionId].checked\"\n        (ngModelChange)=\"onPermissionChangeSafe($event, row, permissionId)\"\n        [id]=\"'permission-' + row._id + '-' + permissionId\" class=\"tw-h-4 tw-w-4\">\n      </cide-ele-input>\n      <label [for]=\"'permission-' + row._id + '-' + permissionId\" \n        class=\"tw-text-xs tw-cursor-pointer\"\n        [ngClass]=\"{\n          'tw-text-gray-700': row._permissionValues[permissionId].modified === row._permissionValues[permissionId].actual,\n          'tw-text-blue-600 tw-font-semibold': row._permissionValues[permissionId].modified !== row._permissionValues[permissionId].actual\n        }\">\n        {{ row._permissionValues[permissionId].permission?.sygms_title }}\n        @if (row._permissionValues[permissionId].modified !== row._permissionValues[permissionId].actual) {\n        <span class=\"tw-text-xs tw-text-orange-500 tw-ml-1\" title=\"Modified from role permission\">\n          ({{ row._permissionValues[permissionId].actual ? '\u2713' : '\u2717' }})\n        </span>\n        }\n      </label>\n    </div>\n    }\n    } @else {\n    <!-- No permissions to display - show N/A (permissions are already loaded, just empty) -->\n    <span class=\"tw-text-xs tw-text-gray-400\">N/A</span>\n    }\n  </div>\n</ng-template>", styles: [":host ::ng-deep .entity-mapping-card{transition:all .2s ease}:host ::ng-deep .entity-mapping-card:hover{transform:translateY(-2px)}:host ::ng-deep .entity-mapping-card .cide-card-header{background:linear-gradient(135deg,#3b82f60d,#9333ea0d);border-bottom:1px solid rgba(59,130,246,.1)}:host ::ng-deep .dark .entity-mapping-card .cide-card-header{background:linear-gradient(135deg,#3b82f61a,#9333ea1a);border-bottom:1px solid rgba(59,130,246,.2)}:host ::ng-deep .entity-mapping-card .cide-card-header-content{font-weight:600}:host ::ng-deep .entity-mapping-card .cide-card-body{background:linear-gradient(180deg,#f9fafb80,#ffffff80)}:host ::ng-deep .dark .entity-mapping-card .cide-card-body{background:linear-gradient(180deg,#11182780,#1f293780)}\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.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: "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", "ngModel", "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" }, { kind: "component", type: CideFormFieldErrorComponent, selector: "cide-form-field-error", inputs: ["control", "formGroup", "fieldName", "customMessages"] }, { kind: "component", type: CideLytSharedWrapperComponent, selector: "cide-lyt-shared-wrapper", inputs: ["shared_wrapper_setup_param", "breadcrumb_data"] }, { kind: "component", type: CideEleCardComponent, selector: "cide-ele-card", inputs: ["title", "subtitle", "cardConfig"], outputs: ["stateChange", "collapsed", "minimized", "maximized", "removed", "headerClick"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideCoreUserCreateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", 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: "<!-- \n  ENTERPRISE USER MASTER FORM\n  \n  Enterprise-Level Styling with Tailwind CSS\n  Features: Responsive grids, proper typography, enhanced user experience\n-->\n\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: pageCode() }\" [breadcrumb_data]=\"breadcrumbData()\">\n  <div class=\"tw-w-full tw-h-full tw-p-1 tw-pt-2\">\n    <!-- Toast Notifications -->\n    <cide-ele-toast-notification></cide-ele-toast-notification>\n    \n    <form class=\"tw-max-w-7xl tw-mx-auto tw-bg-transparent\" [formGroup]=\"userMasterForm\" [class.tw-opacity-60]=\"loading()\"\n      (ngSubmit)=\"onSubmit()\">\n\n\n    <!-- User Context Header -->\n    <div\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\">\n      <div class=\"tw-flex tw-items-center tw-justify-between tw-flex-wrap tw-gap-2\">\n        <!-- User Basic Info Display -->\n        <div class=\"tw-flex tw-items-center tw-gap-3 tw-flex-wrap\">\n          <!-- Profile Photo Preview -->\n          <div class=\"tw-flex tw-items-center tw-gap-2\">\n            <div\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\">\n              @if (userMasterForm.get('user_photo_id_cyfm')?.value) {\n              <img cideEleFileImage [fileId]=\"userMasterForm.get('user_photo_id_cyfm')?.value\"\n                [altText]=\"'Profile Photo'\" class=\"tw-w-full tw-h-full tw-object-cover\">\n              } @else {\n              <cide-ele-icon name=\"person\" class=\"tw-w-5 tw-h-5 tw-text-blue-600\">\n              </cide-ele-icon>\n              }\n            </div>\n            <div class=\"tw-flex tw-flex-col\">\n              <span class=\"tw-text-xs tw-font-medium tw-text-blue-900\">\n                {{ getUserFullName() || 'New User' }}\n              </span>\n              <span class=\"tw-text-xs tw-text-blue-600\">\n                {{ getUserUsername() || 'Username not set' }}\n              </span>\n            </div>\n          </div>\n\n          <!-- Contact Info -->\n          <div class=\"tw-flex tw-items-center tw-gap-3\">\n            <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-xs tw-text-gray-700\">\n              <cide-ele-icon variant=\"gray\" size=\"xs\">email</cide-ele-icon>\n              <span>{{ getUserEmail() || 'Email not set' }}</span>\n            </div>\n            <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-xs tw-text-gray-700\">\n              <cide-ele-icon variant=\"gray\" size=\"xs\">phone</cide-ele-icon>\n              <span>{{ getUserMobile() || 'Mobile not set' }}</span>\n            </div>\n          </div>\n\n          <!-- Active Status -->\n          <div class=\"tw-flex tw-items-center tw-gap-1\">\n            @if (getUserActiveStatus()) {\n            <span\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\">\n              <cide-ele-icon variant=\"green\" size=\"xs\" class=\"tw-mr-1\">check_circle</cide-ele-icon>\n              Active\n            </span>\n            } @else {\n            <span\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\">\n              <cide-ele-icon variant=\"red\" size=\"xs\" class=\"tw-mr-1\">cancel</cide-ele-icon>\n              Inactive\n            </span>\n            }\n          </div>\n        </div>\n\n        <!-- Entity Info -->\n        <div class=\"tw-flex tw-items-center tw-gap-2\">\n          @if (hasDefaultEntity()) {\n          <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-xs tw-text-blue-700\">\n            <cide-ele-icon variant=\"blue\" size=\"xs\">business</cide-ele-icon>\n            <span class=\"tw-font-medium\">{{ getDefaultEntityName() }}</span>\n          </div>\n          } @else {\n          <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-xs tw-text-gray-500\">\n            <cide-ele-icon variant=\"gray\" size=\"xs\">business</cide-ele-icon>\n            <span class=\"tw-italic\">No entity</span>\n          </div>\n          }\n\n          <span class=\"tw-text-xs tw-text-gray-600 tw-px-2 tw-py-1 tw-bg-gray-100 tw-rounded\">\n            {{ getEntityMappingCount() }} mapping(s)\n          </span>\n        </div>\n      </div>\n    </div>\n\n    <!-- Tab Navigation -->\n    <div class=\"tw-p-0 tw-mb-2 tw-border-b tw-border-gray-200\">\n      <cide-ele-tab [tabs]=\"userTabs()\" [activeTabId]=\"activeTab()\" size=\"md\" variant=\"default\"\n        (tabChange)=\"onTabChange($event)\">\n      </cide-ele-tab>\n    </div>\n\n    <!-- Tab Content -->\n    <div class=\"tw-transition-opacity tw-duration-300\" [class.tw-opacity-60]=\"loading()\">\n      @switch (activeTab()) {\n\n      @case ('basic') {\n      <!-- User Basic Information Section -->\n      <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\n\n        <!-- Top Section: Form Fields on Left, Profile Photo on Right -->\n        <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-[1fr_200px] tw-gap-4 tw-mb-4\">\n          <!-- Left Side: Form Fields -->\n          <div class=\"tw-space-y-4\">\n            <!-- Name Fields - All in One Row -->\n            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-4\">\n              <cide-ele-input id=\"user_firstname\" label=\"First Name\" formControlName=\"user_firstname\"\n                placeholder=\"Enter first name\" [maxlength]=\"20\" size=\"md\" (ngModelChange)=\"onNameFieldChange()\">\n              </cide-ele-input>\n\n              <cide-ele-input id=\"user_middlename\" label=\"Middle Name\" formControlName=\"user_middlename\"\n                placeholder=\"Enter middle name\" [maxlength]=\"20\" size=\"md\" (ngModelChange)=\"onNameFieldChange()\">\n              </cide-ele-input>\n\n              <cide-ele-input id=\"user_lastname\" label=\"Last Name\" formControlName=\"user_lastname\"\n                placeholder=\"Enter last name\" [maxlength]=\"20\" size=\"md\" (ngModelChange)=\"onNameFieldChange()\">\n              </cide-ele-input>\n\n              <cide-ele-input id=\"user_fullname\" label=\"Full Name (Auto-generated)\" formControlName=\"user_fullname\"\n                placeholder=\"Auto-generated from name fields or enter manually\" [maxlength]=\"62\" size=\"md\">\n              </cide-ele-input>\n            </div>\n\n            <!-- Contact Information - All in One Row -->\n            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-3 tw-gap-4\">\n              <cide-ele-input id=\"user_username\" label=\"Username\" formControlName=\"user_username\"\n                placeholder=\"Enter unique username\" [maxlength]=\"20\" size=\"md\">\n              </cide-ele-input>\n\n              <cide-ele-input id=\"user_emailid\" label=\"Email ID\" formControlName=\"user_emailid\" type=\"email\"\n                placeholder=\"Enter valid email address\" [maxlength]=\"320\" size=\"md\">\n              </cide-ele-input>\n\n              <cide-ele-input id=\"user_mobileno\" label=\"Mobile Number\" formControlName=\"user_mobileno\" type=\"tel\"\n                placeholder=\"Enter mobile number\" [maxlength]=\"15\" size=\"md\">\n              </cide-ele-input>\n            </div>\n\n            <!-- User Type Mapping -->\n            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\n              <cide-ele-select\n                id=\"syutm_user_type\"\n                label=\"User Type\"\n                placeholder=\"Select user type\"\n                [options]=\"userTypeOptions\"\n                valueKey=\"value\"\n                labelKey=\"label\"\n                formControlName=\"syutm_user_type\"\n                size=\"md\">\n              </cide-ele-select>\n\n              <cide-ele-input\n                id=\"syutm_type_specific_id\"\n                label=\"Type-Specific ID\"\n                placeholder=\"Enter type-specific ID (e.g., STU001, TCH001)\"\n                formControlName=\"syutm_type_specific_id\"\n                [maxlength]=\"50\"\n                size=\"md\">\n              </cide-ele-input>\n            </div>\n          </div>\n\n          <!-- Right Side: Profile Photo Upload -->\n          <div class=\"tw-flex tw-items-start tw-justify-center tw-p-0\">\n            <cide-ele-file-input id=\"user_photo_id_cyfm\" formControlName=\"user_photo_id_cyfm\" accept=\"image/*\"\n              [showPreview]=\"true\" [previewBoxMode]=\"true\" [showFileName]=\"false\" previewWidth=\"180px\"\n              previewHeight=\"120px\" placeholderText=\"Upload Photo\" placeholderIcon=\"cloud_upload\" [autoUpload]=\"true\"\n              [uploadData]=\"getProfilePhotoUploadData()\" (uploadSuccess)=\"onProfilePhotoUploadSuccess($event)\"\n              (uploadError)=\"onProfilePhotoUploadError($event)\"\n              (uploadProgressChange)=\"onProfilePhotoUploadProgress($event)\">\n            </cide-ele-file-input>\n          </div>\n        </div>\n\n\n\n        <!-- Status Control -->\n        <div class=\"tw-grid tw-grid-cols-1 tw-mb-2\">\n          <div class=\"tw-p-2 tw-bg-blue-50 tw-border tw-border-blue-100 tw-rounded-lg\">\n            <label\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\">\n              <cide-ele-input type=\"checkbox\" label=\"Active User Status\" formControlName=\"user_isactive\"\n                class=\"tw-h-5 tw-accent-blue-500 tw-rounded tw-mb-1\" />\n              <span class=\"tw-font-semibold tw-text-gray-700 tw-text-base\"></span>\n              <span class=\"tw-text-sm tw-text-gray-600 tw-mt-1 tw-leading-relaxed\">Enable this user account for system\n                access and operations</span>\n            </label>\n          </div>\n        </div>\n      </div>\n      }\n\n      @case ('auth') {\n      <!-- Authentication Section -->\n      <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\n        <!-- Password Fields -->\n        @if (shouldShowPasswordFields()) {\n        <div class=\"tw-mb-4\">\n          <!-- Password Fields Header for Edit Mode -->\n          @if (isEditMode()) {\n          <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\n            <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-800\">Update Password</h6>\n            <button type=\"button\"\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\"\n              (click)=\"cancelPasswordUpdate()\">\n              Cancel Password Update\n            </button>\n          </div>\n          }\n\n          <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-2 md:tw-grid-cols-1 tw-gap-6\">\n            <cide-ele-input id=\"user_password\" [label]=\"getPasswordFieldLabel()\" formControlName=\"user_password\"\n              type=\"password\" placeholder=\"Enter secure password (min 8 characters)\" size=\"md\">\n            </cide-ele-input>\n\n            <cide-ele-input id=\"user_confirm_password\" [label]=\"getPasswordConfirmLabel()\"\n              formControlName=\"user_confirm_password\" type=\"password\" placeholder=\"Confirm your password\" size=\"md\">\n            </cide-ele-input>\n          </div>\n        </div>\n        }\n\n        <!-- Password Update Option for Edit Mode -->\n        @if (isEditMode() && !shouldShowPasswordFields()) {\n        <div class=\"tw-mb-4\">\n          <div class=\"tw-p-2 tw-bg-blue-50 tw-border tw-border-blue-200 tw-rounded-lg\">\n            <h6 class=\"tw-text-sm tw-font-semibold tw-text-blue-800 tw-mb-2\">Password Update</h6>\n            <p class=\"tw-text-sm tw-text-blue-600 tw-mb-3\">Current password will be kept. Click below to change\n              password.</p>\n\n            @if (hasPasswordInput()) {\n            <div\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\">\n              <cide-ele-icon variant=\"yellow\" size=\"xs\" class=\"tw-mr-1\">warning</cide-ele-icon>\n              Password fields contain text. Click \"Change Password\" to manage existing input.\n            </div>\n            }\n\n            <button type=\"button\"\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\"\n              (click)=\"triggerPasswordUpdate()\">\n              @if (hasPasswordInput()) {\n              Manage Password Fields\n              } @else {\n              Change Password\n              }\n            </button>\n          </div>\n        </div>\n        }\n\n        <!-- Password Options -->\n        <div class=\"tw-grid tw-grid-cols-1 tw-gap-4 tw-mb-4\">\n          <div class=\"tw-p-2 tw-bg-yellow-50 tw-border tw-border-yellow-100 tw-rounded-lg\">\n            <label\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\">\n              <cide-ele-input type=\"checkbox\" label=\"Force Password Change on Login\"\n                formControlName=\"user_passwordchangeonlogin\" class=\"tw-h-5 tw-accent-yellow-500 tw-rounded tw-mb-1\" />\n              <span class=\"tw-text-sm tw-text-gray-600 tw-mt-1 tw-leading-relaxed\">User will be required to change\n                password on next login</span>\n            </label>\n          </div>\n        </div>\n\n      </div>\n      }\n\n      @case ('roles') {\n      <!-- Entity, Roles & Permissions Mapping Section -->\n      <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\n\n\n\n        <!-- Important Note -->\n        <div class=\"tw-bg-amber-50 tw-border tw-border-amber-200 tw-rounded-lg tw-p-2 tw-mb-4\">\n          <div class=\"tw-flex tw-items-start tw-gap-3\">\n            <cide-ele-icon variant=\"amber\" size=\"lg\">info</cide-ele-icon>\n            <div class=\"tw-flex-1\">\n              <h4 class=\"tw-text-sm tw-font-semibold tw-text-amber-800 tw-mb-1\">Entity-Role Based Access</h4>\n              <p class=\"tw-text-sm tw-text-amber-700 tw-mb-2\">User access is completely managed through entity-role\n                mappings below. At least one entity mapping is required for user access.</p>\n              @if (hasDefaultEntity()) {\n              <div class=\"tw-flex tw-items-center tw-gap-2 tw-mt-2 tw-p-2 tw-bg-amber-100 tw-rounded\">\n                <cide-ele-icon variant=\"amber\" size=\"sm\">star</cide-ele-icon>\n                <span class=\"tw-text-sm tw-text-amber-800\">\n                  <strong>Default Entity:</strong> {{ getDefaultEntityName() }}\n                </span>\n              </div>\n              } @else {\n              <div class=\"tw-text-sm tw-text-amber-600 tw-mt-2 tw-italic\">\n                \u26A0\uFE0F No default entity selected. Please set one entity as default.\n              </div>\n              }\n            </div>\n          </div>\n        </div>\n\n        <!-- Entity-Role Mapping Section -->\n        <div class=\"tw-flex tw-text-center tw-justify-between tw-items-center tw-mb-4\">\n          <div>\n            <h4 class=\"tw-text-sm tw-text-left tw-font-semibold tw-text-blue-900 tw-mb-1\">Entity-Role Mapping</h4>\n            <p class=\"tw-text-sm tw-text-blue-700\">Map user to entities with specific roles and permissions</p>\n          </div>\n          <div class=\"tw-flex tw-flex-col tw-items-end\">\n            <button cideEleButton variant=\"primary\" size=\"md\" type=\"button\" (click)=\"addEntityMapping()\"\n              leftIcon=\"add\" [disabled]=\"isViewingOwnProfile() || isAllEntitiesMapped()\"\n              [title]=\"isViewingOwnProfile() ? 'You cannot modify your own entity mappings' : (isAllEntitiesMapped() ? 'All entities are mapped' : 'Add Entity Mapping')\">\n              Add Entity Mapping\n            </button>\n\n            @if (isViewingOwnProfile()) {\n            <div class=\"tw-mt-2 tw-p-2 tw-bg-amber-50 tw-border tw-border-amber-200 tw-rounded-md tw-max-w-xs\">\n              <p class=\"tw-text-xs tw-text-amber-700\">\n                <cide-ele-icon variant=\"warning\" size=\"xs\" class=\"tw-mr-1\">lock</cide-ele-icon>\n                You cannot modify your own entity mappings.\n              </p>\n            </div>\n            } @else if (isAllEntitiesMapped()) {\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\">\n              <p class=\"tw-text-xs tw-text-blue-700\">\n                <cide-ele-icon variant=\"info\" size=\"xs\" class=\"tw-mr-1\">info</cide-ele-icon>\n                All available entities are already mapped.\n              </p>\n            </div>\n            }\n          </div>\n        </div>\n\n        <div formArrayName=\"core_entity_mapping\">\n            @for (mapping of entityMappings(); track mapping.syenm_entity_id_syen?._id || mapping.syenm_entity_id_syen || $index; let i = $index) {\n            <cide-ele-card\n              [title]=\"getEntityNameFromMapping(i) || 'Entity Mapping ' + (i + 1)\"\n              [subtitle]=\"mapping.syenm_isdefault ? 'Primary Entity' : ''\"\n              [cardConfig]=\"{\n                collapsible: true,\n                minimizable: false,\n                maximizable: false,\n                removable: !mapping?._id && !isViewingOwnProfile(),\n                defaultState: 'collapsed',\n                showHeader: true,\n                showFooter: false,\n                variant: 'default',\n                size: 'sm',\n                shadow: true,\n                rounded: true,\n                bordered: true\n              }\"\n              (stateChange)=\"onEntityMappingCardStateChange($event, i)\"\n              (removed)=\"removeEntityMapping(i)\"\n              class=\"tw-mb-2 entity-mapping-card tw-block\">\n              \n              <div [formGroupName]=\"i\">\n              \n              <!-- Card Content -->\n              <div class=\"tw-space-y-3\">\n                <!-- Hidden form control to maintain form structure for entity -->\n                <input type=\"hidden\" [formControlName]=\"'syenm_entity_id_syen'\" />\n                \n                <!-- Role, Default, Active, and User Type in One Row -->\n                <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-4 tw-gap-3\">\n                  <!-- Role Selection with Copy Button -->\n                  <div class=\"tw-flex tw-flex-col\">\n                    <cide-ele-select label=\"Role for this Entity\" [options]=\"getRoleOptionsForEntity(i)\"\n                      formControlName=\"syenm_role_id_syusrol\" valueKey=\"_id\" labelKey=\"syusrol_role_name\"\n                      placeholder=\"Select role for this entity\" size=\"md\" (change)=\"onRoleChange(i, $event)\">\n                    </cide-ele-select>\n                    @if (!isViewingOwnProfile() && entityMappings().length > 1) {\n                      <button \n                        type=\"button\"\n                        (click)=\"showCopyRoleFromEntityDrawer(i)\"\n                        class=\"tw-mt-1 tw-text-xs tw-text-blue-600 hover:tw-text-blue-800 tw-flex tw-items-center tw-gap-1 tw-w-fit tw-transition-colors\"\n                        title=\"Copy role and settings from another entity mapping\">\n                        <cide-ele-icon variant=\"blue\" size=\"xs\">content_copy</cide-ele-icon>\n                        <span>Copy from Entity</span>\n                      </button>\n                    }\n                  </div>\n                  \n                  <!-- Primary Entity Checkbox -->\n                  <div class=\"tw-flex tw-flex-col tw-justify-end\">\n                    <div class=\"tw-flex tw-items-center tw-gap-2 tw-px-3 tw-py-2 tw-rounded-md tw-border tw-border-green-300 tw-bg-green-50 dark:tw-bg-green-900/30 dark:tw-border-green-700\" (click)=\"$event.stopPropagation()\">\n                      <input \n                        type=\"checkbox\" \n                        [checked]=\"mapping.syenm_isdefault\"\n                        (change)=\"onDefaultEntityChange(i, $event)\" \n                        class=\"tw-h-4 tw-w-4 tw-accent-green-600 tw-cursor-pointer\" />\n                      <label class=\"tw-inline-flex tw-items-center tw-gap-1 tw-text-xs tw-font-semibold tw-text-green-700 dark:tw-text-green-300 tw-cursor-pointer\">\n                        <cide-ele-icon variant=\"green\" size=\"xs\" class=\"!tw-text-green-600 dark:!tw-text-green-400\">star</cide-ele-icon>\n                        DEFAULT\n                      </label>\n                    </div>\n                  </div>\n                  \n                  <!-- Active Mapping Checkbox -->\n                  <div class=\"tw-flex tw-flex-col tw-justify-end\">\n                    <div class=\"tw-flex tw-items-center tw-gap-2 tw-px-3 tw-py-2 tw-rounded-md tw-border tw-border-blue-300 tw-bg-blue-50 dark:tw-bg-blue-900/30 dark:tw-border-blue-700\" (click)=\"$event.stopPropagation()\">\n                      <input \n                        type=\"checkbox\" \n                        [checked]=\"mapping.syenm_isactive\"\n                        (change)=\"onActiveMappingChange(i, $event)\" \n                        class=\"tw-h-4 tw-w-4 tw-accent-blue-600 tw-cursor-pointer\" />\n                      <label class=\"tw-inline-flex tw-items-center tw-gap-1 tw-text-xs tw-font-semibold tw-text-blue-700 dark:tw-text-blue-300 tw-cursor-pointer\">\n                        <cide-ele-icon variant=\"blue\" size=\"xs\" class=\"!tw-text-blue-600 dark:!tw-text-blue-400\">check_circle</cide-ele-icon>\n                        Active\n                      </label>\n                    </div>\n                  </div>\n                  \n                  <!-- User Type Mappings -->\n                  <div class=\"tw-flex tw-flex-col tw-justify-end\">\n                    <div class=\"tw-flex tw-items-center tw-gap-1.5 tw-flex-wrap\">\n                      @if (getEntityIdFromMapping(i)) {\n                        @if (getUserTypeMappingsForEntity(getEntityIdFromMapping(i)).length > 0) {\n                          @for (typeMapping of getUserTypeMappingsForEntity(getEntityIdFromMapping(i)); track typeMapping._id || typeMapping.syutm_type_specific_id) {\n                            <span class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded tw-text-[10px] tw-font-medium tw-bg-purple-50 dark:tw-bg-purple-900/30 tw-text-gray-900 dark:tw-text-gray-100 tw-border tw-border-purple-300 dark:tw-border-purple-700\">\n                              <cide-ele-icon variant=\"purple\" size=\"xs\" class=\"tw-mr-1 !tw-text-purple-600 dark:!tw-text-purple-400\">person</cide-ele-icon>\n                              {{ typeMapping.syutm_user_type }}\n                              @if (typeMapping.syutm_isactive) {\n                                <span class=\"tw-ml-1 tw-w-1.5 tw-h-1.5 tw-rounded-full tw-bg-green-600\"></span>\n                              }\n                            </span>\n                          }\n                        }\n                      }\n                    </div>\n                  </div>\n                </div>\n\n\n                <!-- Entity-Specific Details and Active Period - All in One Row -->\n                <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-3\">\n                  <cide-ele-select label=\"Department for this Entity\" [options]=\"getDepartmentOptionsForEntity(i)\"\n                    formControlName=\"syenm_department_id_sydept\" (change)=\"onDepartmentChange($event)\" valueKey=\"_id\"\n                    labelKey=\"sydept_name\" placeholder=\"Select department\" size=\"md\">\n                  </cide-ele-select>\n\n                  <cide-ele-select label=\"Designation for this Entity\" [options]=\"getDesignationOptionsForEntity(i)\"\n                    valueKey=\"_id\" labelKey=\"sydsg_name\" formControlName=\"syenm_designation_id_sydsg\"\n                    placeholder=\"Select designation\" size=\"md\">\n                  </cide-ele-select>\n\n                  <cide-ele-input label=\"Active From\" [id]=\"'syenm_activefrom['+i+']'\"\n                    formControlName=\"syenm_activefrom\" type=\"date\" size=\"md\">\n                  </cide-ele-input>\n\n                  <cide-ele-input label=\"Active Until\" [id]=\"'syenm_activeupto['+i+']'\"\n                    formControlName=\"syenm_activeupto\" type=\"date\" size=\"md\">\n                  </cide-ele-input>\n                </div>\n\n                <!-- Menu Rights Grid for this Entity-Role -->\n                <div class=\"tw-border-t tw-border-gray-200\">\n\n                  @if (getMenuRightsForMapping(i).length > 0) {\n                  <!-- Menu Rights Tree Grid -->\n\n                  <cide-ele-data-grid [config]=\"getMenuRightsGridConfig(i)\"\n                    [templateRenderers]=\"getMenuRightsTemplateRenderers(i)\"\n                    (gridEvent)=\"onMenuRightsGridEvent($event, i)\" class=\"tw-h-96 tw-w-full\">\n                  </cide-ele-data-grid>\n\n                  } @else {\n                  <div class=\"tw-text-center tw-py-8 tw-bg-gray-50 tw-border tw-border-gray-200 tw-rounded-lg\">\n                    <div class=\"tw-text-gray-400 tw-mb-3\">\n                      <cide-ele-icon variant=\"gray\" size=\"lg\">menu</cide-ele-icon>\n                    </div>\n                    <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-600 tw-mb-2\">No Menu Rights Available</h6>\n                    <p class=\"tw-text-xs tw-text-gray-500 tw-mb-3 tw-text-center\">Select both entity and role to\n                      automatically load\n                      menu rights for this mapping.</p>\n                  </div>\n                  }\n                </div>\n              </div>\n              </div>\n            </cide-ele-card>\n            }\n          </div>\n\n          @if (entityMappings().length === 0) {\n          <div class=\"tw-text-center tw-py-8 tw-bg-white tw-border tw-border-blue-200 tw-rounded-lg\">\n            <div class=\"tw-text-blue-400 tw-mb-3\">\n              <cide-ele-icon variant=\"blue\" size=\"lg\">business</cide-ele-icon>\n            </div>\n            <h4 class=\"tw-text-sm tw-font-medium tw-text-blue-800 tw-mb-2\">No Entity Mappings</h4>\n            <p class=\"tw-text-blue-600 tw-mb-4 tw-text-center\">Add entity mappings to assign specific roles and\n              permissions for different entities.</p>\n            @if (!isViewingOwnProfile()) {\n            <button class=\"tw-mx-auto\" cideEleButton variant=\"primary\" size=\"md\" type=\"button\"\n              (click)=\"addEntityMapping()\" leftIcon=\"add\">\n              Add First Entity Mapping\n            </button>\n            } @else {\n            <p class=\"tw-text-amber-600 tw-text-sm tw-font-medium\">\n              <cide-ele-icon variant=\"warning\" size=\"xs\" class=\"tw-mr-1\">lock</cide-ele-icon>\n              You cannot modify your own entity mappings.\n            </p>\n            }\n          </div>\n          }\n        </div>\n      }\n\n      @case ('addresses') {\n      <!-- Contact Addresses Section -->\n      <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\n        <div class=\"tw-flex tw-justify-end\">\n          <div class=\"tw-flex tw-justify-between tw-items-end tw-mb-2 tw-gap-4\">\n            <button cideEleButton variant=\"primary\" size=\"md\" type=\"button\" (click)=\"addContactAddress()\"\n              leftIcon=\"add\" [disabled]=\"!hasAddContactAddressRights()\">\n              Add New Address\n            </button>\n          </div>\n        </div>\n\n        <div formArrayName=\"core_user_contact_addresses\">\n          @for (address of contactAddresses(); track $index; let i = $index) {\n          <div [formGroupName]=\"i\"\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\">\n            <div\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\">\n              <!-- Use address type as header instead of generic \"Address X\" -->\n              <h4 class=\"tw-m-0 tw-text-gray-700 tw-text-sm tw-font-semibold tw-tracking-tight\">\n                {{ getAddressTypeLabel(i) || ('Address ' + (i + 1)) }}\n              </h4>\n              <div class=\"tw-flex tw-items-center tw-gap-2\">\n                @if (isAddressOwner(i)) {\n                <button cideEleButton variant=\"secondary\" size=\"xs\" type=\"button\" (click)=\"shareAddress(i)\"\n                  leftIcon=\"share\" class=\"tw-text-blue-600 hover:tw-text-blue-700\">\n                  Share\n                </button>\n                }\n                @if (!address?._id) {\n                <button cideEleButton variant=\"danger\" size=\"sm\" type=\"button\" (click)=\"removeContactAddress(i)\"\n                  leftIcon=\"delete\">\n                  Remove\n                </button>\n                }\n              </div>\n            </div>\n            <div class=\"tw-p-4\">\n              <!-- Main Layout: Inputs on Left, Address Textarea on Right -->\n              <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-4 tw-gap-3 tw-mb-3\">\n                \n                <!-- Left Side: Input Fields (3/4 width) -->\n                <div class=\"lg:tw-col-span-3\">\n                  <!-- Row 1: Address Type, Contact Person -->\n                  <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3 tw-mb-3\">\n                    <cide-ele-select label=\"Address Type\" [options]=\"addressTypeOptions()\" id=\"sycad_address_type_id_sygms\"\n                      formControlName=\"sycad_address_type_id_sygms\" placeholder=\"Select type\" size=\"sm\"\n                      valueKey=\"_id\" labelKey=\"sygms_title\" (change)=\"onAddressTypeChange(i)\">\n                    </cide-ele-select>\n\n                    <cide-ele-input label=\"Contact Person\" formControlName=\"sycad_contact_person_name\"\n                      placeholder=\"Enter contact person\" size=\"sm\">\n                    </cide-ele-input>\n                  </div>\n\n                  <!-- Row 2: Postal Code, City, State, Country -->\n                  <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-4 tw-gap-3\">\n                    <cide-ele-select label=\"Postal Code\" [options]=\"addressPostalCodes()[i] || []\"\n                      formControlName=\"sycad_contact_pin_sypin\" placeholder=\"Select postal code\" [searchable]=\"true\"\n                      [loading]=\"addressPostalCodesLoading()[i] || false\" (searchChange)=\"onPostalCodeSearch($event, i)\"\n                      (change)=\"onPostalCodeSelection($event, i)\" size=\"sm\">\n                    </cide-ele-select>\n\n                    <cide-ele-input label=\"City\" formControlName=\"sycad_contact_city_sypin\" placeholder=\"Enter city\"\n                      size=\"sm\">\n                    </cide-ele-input>\n\n                    <cide-ele-input label=\"State\" formControlName=\"sycad_contact_state_sypin\" placeholder=\"Enter state\"\n                      size=\"sm\">\n                    </cide-ele-input>\n\n                    <cide-ele-select label=\"Country\" [options]=\"addressCountries()[i] || []\"\n                      formControlName=\"sycad_contact_country_syctr\" placeholder=\"Select country\" valueKey=\"_id\"\n                      labelKey=\"syctr_country_iso_name\" [searchable]=\"true\" (searchChange)=\"onCountrySearch($event, i)\"\n                      [loading]=\"addressCountriesLoading()[i] || false\" size=\"sm\">\n                    </cide-ele-select>\n                  </div>\n                </div>\n\n                <!-- Right Side: Address Textarea (1/4 width, spans 2 rows) -->\n                <div class=\"lg:tw-col-span-1 lg:tw-row-span-2 tw-flex tw-flex-col\">\n                  <cide-ele-textarea label=\"Complete Address\" formControlName=\"sycad_contact_address\"\n                    placeholder=\"Enter complete address with area, city, and landmarks\" [rows]=\"4\" size=\"sm\"\n                    class=\"tw-h-full\">\n                  </cide-ele-textarea>\n                </div>\n              </div>\n\n              <!-- Contact Details: Primary Phone, Alt Phone, Fax, Primary Email in 4 columns -->\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-4 tw-gap-3 tw-mb-3\">\n                <cide-ele-input label=\"Primary Phone\" formControlName=\"sycad_contact_phone\" type=\"tel\"\n                  placeholder=\"Primary phone\" size=\"sm\">\n                </cide-ele-input>\n\n                <cide-ele-input label=\"Alternate Phone\" formControlName=\"sycad_contact_phone_alt\" type=\"tel\"\n                  placeholder=\"Alternate phone\" size=\"sm\">\n                </cide-ele-input>\n\n                <cide-ele-input label=\"Fax Number\" formControlName=\"sycad_contact_fax\" placeholder=\"Fax number\"\n                  size=\"sm\">\n                </cide-ele-input>\n\n                <cide-ele-input label=\"Primary Email\" formControlName=\"sycad_contact_email\" type=\"email\"\n                  placeholder=\"Primary email\" size=\"sm\">\n                </cide-ele-input>\n              </div>\n\n              <!-- Alternate Email in single row -->\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3\">\n                <cide-ele-input label=\"Alternate Email\" formControlName=\"sycad_contact_email_alt\" type=\"email\"\n                  placeholder=\"Alternate email address\" size=\"sm\">\n                </cide-ele-input>\n              </div>\n            </div>\n          </div>\n          }\n        </div>\n      </div>\n      }\n\n      @case ('documents') {\n      <!-- Documents Section -->\n      <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\n        <div class=\"tw-flex tw-justify-end tw-items-end tw-mb-2 tw-gap-4\">\n          <button cideEleButton variant=\"primary\" size=\"md\" type=\"button\" (click)=\"addDocument()\" leftIcon=\"add\" [disabled]=\"!hasAddDocumentRights()\">\n            Add Document\n          </button>\n        </div>\n        <div formArrayName=\"core_user_documents\">\n          @for (doc of documents(); track $index; let i = $index) {\n          <div [formGroupName]=\"i\"\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\">\n            <div\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\">\n              <h4 class=\"tw-m-0 tw-text-gray-700 tw-text-sm tw-font-semibold tw-tracking-tight\">\n                {{ getDocumentTypeLabel(i) || ('Document ' + (i + 1)) }}\n              </h4>\n              <div class=\"tw-flex tw-gap-2\">\n                @if (doc?._id) {\n                <button cideEleButton variant=\"secondary\" size=\"sm\" type=\"button\" (click)=\"shareDocumentRights(i)\"\n                  leftIcon=\"share\">\n                  Share\n                </button>\n                }\n              </div>\n            </div>\n            <div class=\"tw-p-4\">\n              <!-- Main Layout: Inputs on Left, File Upload on Right -->\n              <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-3 tw-gap-4\">\n                \n                <!-- Left Side: Document Information (2/3 width) -->\n                <div class=\"lg:tw-col-span-2\">\n                  <!-- Row 1: Document Type, Document Number, Name as per Document -->\n                  <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-3 tw-mb-3\">\n                    <cide-ele-select label=\"Document Type\" [options]=\"documentTypeOptions()\"\n                      formControlName=\"syusd_document_type_id_sygms\" placeholder=\"Select type\" size=\"sm\"\n                      valueKey=\"_id\" labelKey=\"sygms_title\" (change)=\"onDocumentTypeChange(i)\">\n                    </cide-ele-select>\n\n                    <cide-ele-input label=\"Document Number\" formControlName=\"syusd_doc_number\"\n                      placeholder=\"Document number\" size=\"sm\">\n                    </cide-ele-input>\n\n                    <cide-ele-input label=\"Name as per Document\" formControlName=\"syusd_doc_name_as_per_doc\"\n                      placeholder=\"Name on document\" size=\"sm\">\n                    </cide-ele-input>\n                  </div>\n\n                  <!-- Row 2: Issue Date, Expiry Date, Photo Group -->\n                  <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-3 tw-mb-3\">\n                    <cide-ele-input label=\"Issue Date\" formControlName=\"syusd_doc_issue_date\"\n                      [id]=\"'syusd_doc_issue_date['+i+']'\" type=\"date\" size=\"sm\">\n                    </cide-ele-input>\n\n                    <cide-ele-input label=\"Expiry Date\" formControlName=\"syusd_doc_expiry_date\"\n                      [id]=\"'syusd_doc_expiry_date['+i+']'\" type=\"date\" size=\"sm\">\n                    </cide-ele-input>\n                  </div>\n\n                  <!-- Row 3: Verification Status, KYC Status -->\n                  <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3\">\n                    <cide-ele-select label=\"Verification Status\" [options]=\"documentVerificationStatusOptions()\"\n                      formControlName=\"syusd_doc_verification_status_id_sygms\" placeholder=\"Select status\"\n                      size=\"sm\" valueKey=\"_id\" labelKey=\"sygms_title\">\n                    </cide-ele-select>\n\n                    <cide-ele-select label=\"KYC Status\" [options]=\"documentKycStatusOptions()\"\n                      formControlName=\"syusd_doc_kyc_status_id_sygms\" placeholder=\"Select KYC status\" size=\"sm\"\n                      valueKey=\"_id\" labelKey=\"sygms_title\">\n                    </cide-ele-select>\n                  </div>\n                </div>\n\n                <!-- Right Side: File Upload (1/3 width) -->\n                <div class=\"lg:tw-col-span-1\">\n                  <div class=\"tw-bg-gray-50 tw-border tw-border-gray-200 tw-rounded-lg tw-p-3 tw-h-full\">\n                    \n                    <!-- File Upload Input -->\n                    <cide-ele-file-input\n                      [id]=\"'document-files-' + i\"\n                      [multiple]=\"true\"\n                      formControlName=\"syusd_photo_group_id_cyfm\"\n                      [accept]=\"'.pdf,.jpg,.jpeg,.png,.doc,.docx'\"\n                      [autoUpload]=\"true\"\n                      [uploadData]=\"getDocumentUploadData(i)\"\n                      (change)=\"onDocumentFilesSelected($event, i)\"\n                      (uploadSuccess)=\"onDocumentUploadSuccess($event, i)\"\n                      (uploadError)=\"onDocumentUploadError($event, i)\"\n                      (uploadProgressChange)=\"onDocumentUploadProgress($event, i)\"\n                      class=\"tw-mb-3\"\n                      size=\"sm\">\n                    </cide-ele-file-input>\n\n                    <!-- Upload Status -->\n                    <!-- Upload status is now handled by the file input component itself -->\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n          }\n        </div>\n      </div>\n      }\n\n      @case ('family') {\n      <!-- Family Details Section - Compact Design -->\n      <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\n        <div class=\"tw-flex tw-justify-end tw-items-end tw-mb-3 tw-gap-4\">\n          <button cideEleButton variant=\"primary\" size=\"sm\" type=\"button\" (click)=\"addFamilyDetail()\" leftIcon=\"add\" [disabled]=\"!hasAddFamilyDetailRights()\">\n            Add Family Member\n          </button>\n        </div>\n\n        <div formArrayName=\"core_user_family_details\">\n          @for (family of familyDetails(); track $index; let i = $index) {\n          <div [formGroupName]=\"i\"\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\">\n            \n            <!-- Compact Header -->\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\">\n              <h4 class=\"tw-m-0 tw-text-gray-700 tw-text-sm tw-font-medium\">Family Member {{ i + 1 }}</h4>\n              <div class=\"tw-flex tw-gap-2\">\n                @if (family?._id) {\n                <button cideEleButton variant=\"secondary\" size=\"xs\" type=\"button\" (click)=\"shareFamilyDetailRights(i)\"\n                  leftIcon=\"share\">\n                  Share\n                </button>\n                }\n                @if (!family?._id) {\n                <button cideEleButton variant=\"danger\" size=\"xs\" type=\"button\" (click)=\"removeFamilyDetail(i)\" leftIcon=\"delete\">\n                  Remove\n                </button>\n                }\n              </div>\n            </div>\n            \n            <!-- Compact Form Content - 3 inputs per row -->\n            <div class=\"tw-p-4\">\n              <!-- Row 1: Name, User, and Combined Relationship/Active Status (33.33% each) -->\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-3 tw-mb-3\">\n                <cide-ele-input label=\"Family Member Name\" formControlName=\"syfdl_family_member_name\"\n                  placeholder=\"Enter family member full name\" size=\"sm\">\n                </cide-ele-input>\n\n                <cide-ele-select label=\"Family Member User\" [options]=\"userOptions(i)\"\n                  formControlName=\"syfdl_family_member_id_user\" placeholder=\"Select family member user\" size=\"sm\"\n                  valueKey=\"_id\" labelKey=\"user_fullname\" [searchable]=\"true\"\n                  [loading]=\"userSearchLoading()[i] || false\" (searchChange)=\"onUserSearchChange($event, i)\"\n                  (change)=\"onUserSelectionChange($event, i)\">\n                </cide-ele-select>\n\n                <!-- Combined Relationship and Active Status (33.33%) -->\n                <div class=\"tw-flex tw-flex-row tw-gap-2 tw-items-end\">\n                  <div class=\"tw-flex-1\">\n                    <cide-ele-select label=\"Relationship\" [options]=\"relationshipOptions()\"\n                      formControlName=\"syfdl_relationship_id_sygms\" placeholder=\"Select relationship\" size=\"sm\"\n                      valueKey=\"_id\" labelKey=\"sygms_title\">\n                    </cide-ele-select>\n                  </div>\n\n                  <div class=\"tw-flex tw-items-center tw-pt-1 tw-flex-shrink-0\">\n                    <cide-ele-input formControlName=\"syfdl_isactive\" type=\"checkbox\" label=\"Active\" size=\"sm\">\n                    </cide-ele-input>\n                  </div>\n                </div>\n              </div>\n\n              <!-- Row 2: Blood Group, DOB, and Phone -->\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\">\n                <cide-ele-select label=\"Blood Group\" [options]=\"bloodGroupOptions()\"\n                  formControlName=\"syfdl_blood_group_sygms\" placeholder=\"Select blood group\" size=\"sm\" valueKey=\"_id\"\n                  labelKey=\"sygms_title\">\n                </cide-ele-select>\n\n                <cide-ele-input label=\"Date of Birth\" formControlName=\"syfdl_family_member_dob\" type=\"date\" size=\"sm\"\n                  [id]=\"'syfdl_family_member_dob['+i+']'\">\n                </cide-ele-input>\n\n                <cide-ele-input label=\"Contact Phone\" formControlName=\"syfdl_contact_phone\" type=\"tel\"\n                  placeholder=\"Enter contact phone\" size=\"sm\">\n                </cide-ele-input>\n              </div>\n\n              <!-- Row 3: Email, Email ID, and Contact Number -->\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\">\n                <cide-ele-input label=\"Contact Email\" formControlName=\"syfdl_contact_email\" type=\"email\"\n                  placeholder=\"Enter contact email\" size=\"sm\">\n                </cide-ele-input>\n\n                <cide-ele-input label=\"Contact Email ID\" formControlName=\"syfdl_contact_email_id\" type=\"email\"\n                  placeholder=\"Enter contact email ID\" size=\"sm\">\n                </cide-ele-input>\n\n                <cide-ele-input label=\"Contact Number\" formControlName=\"syfdl_contact_number\" type=\"tel\"\n                  placeholder=\"Enter contact number\" size=\"sm\">\n                </cide-ele-input>\n              </div>\n\n            </div>\n          </div>\n          }\n        </div>\n      </div>\n      }\n      }\n    </div>\n\n    <!-- Form Actions -->\n    <div\n      class=\"tw-flex tw-justify-between tw-items-center tw-gap-4 tw-py-2 tw-bg-white tw-border-t tw-border-gray-200 tw-sticky tw-bottom-0 tw-z-10\">\n      <!-- Error Display Component -->\n      <div class=\"tw-flex-1\">\n        <cide-form-field-error [formGroup]=\"userMasterForm\"></cide-form-field-error>\n      </div>\n\n      <!-- Action Buttons -->\n      <div class=\"tw-flex tw-gap-4\">\n      <button cideEleButton type=\"button\" variant=\"secondary\" (click)=\"resetForm()\" leftIcon=\"refresh\"\n        [disabled]=\"loading()\">\n        Reset Form\n      </button>\n\n      <button cideEleButton type=\"submit\" variant=\"primary\" [disabled]=\"loading() || userMasterForm.invalid\"\n        [loading]=\"loading()\" leftIcon=\"save\">\n        Save User Master\n      </button>\n      </div>\n    </div>\n  </form>\n</div>\n</cide-lyt-shared-wrapper>\n\n<!-- Template Renderers for Role Permissions Grid -->\n<ng-template #menuDetailsRendererTemplate let-row=\"row\">\n  <div class=\"tw-flex tw-items-center tw-space-x-3 tw-min-w-0\">\n    <!-- Menu Icon -->\n    <div class=\"tw-flex-shrink-0\">\n      @if (row.syme_type === 'module') {\n      <cide-ele-icon class=\"tw-text-blue-600 tw-w-4 tw-h-4\">folder</cide-ele-icon>\n      } @else if (row.syme_type === 'section') {\n      <cide-ele-icon class=\"tw-text-green-600 tw-w-4 tw-h-4\">folder_open</cide-ele-icon>\n      } @else if (row.syme_type === 'menu') {\n      <cide-ele-icon class=\"tw-text-purple-600 tw-w-4 tw-h-4\">menu</cide-ele-icon>\n      } @else {\n      <cide-ele-icon class=\"tw-text-gray-600 tw-w-4 tw-h-4\">description</cide-ele-icon>\n      }\n    </div>\n\n    <!-- Menu Details -->\n    <div class=\"tw-ml-3 tw-min-w-0 tw-flex-1\">\n      <div class=\"tw-flex tw-items-center tw-gap-2\">\n        <div class=\"tw-text-xs tw-font-medium tw-text-gray-900 tw-truncate\" [title]=\"row.syme_title\">\n          {{ row.syme_title || row.menu?.syme_title || row.menu?.syme_menu_name || 'Untitled' }}\n        </div>\n        <!-- Green pill indicator for parent menus with child permissions -->\n        @if (row.syme_type === 'module' || row.syme_type === 'section') {\n        @if (hasChildMenusWithPermissions(row._id)) {\n        <span\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\">\n          Assigned\n        </span>\n        }\n        }\n      </div>\n      @if (row.permission?.sygms_name) {\n      <div class=\"tw-text-xs tw-text-blue-500 tw-truncate\" [title]=\"row.permission?.sygms_name\">\n        {{ row.permission?.sygms_name }}\n      </div>\n      }\n    </div>\n  </div>\n</ng-template>\n\n<!-- Menu Type Renderer Template -->\n<ng-template #menuTypeRendererTemplate let-row=\"row\" let-value=\"value\">\n  <div class=\"tw-flex tw-items-center tw-justify-center\">\n    @if (row.syme_type === 'module') {\n    <span\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\">\n      Module\n    </span>\n    } @else if (row.syme_type === 'section') {\n    <span\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\">\n      Section\n    </span>\n    } @else if (row.syme_type === 'menu') {\n    <span\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\">\n      Menu\n    </span>\n    } @else {\n    <span\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\">\n      {{ row.syme_type || 'Unknown' }}\n    </span>\n    }\n  </div>\n</ng-template>\n\n<!-- Permissions Checkbox Renderer Template -->\n<ng-template #permissionsCheckboxRendererTemplate let-row=\"row\" let-value=\"value\">\n  <div class=\"tw-flex tw-flex-wrap tw-gap-2 tw-max-w-full\">\n    @if (row.syme_type === 'menu' && row?.syme_permissions_id_sygms && row?.syme_permissions_id_sygms.length > 0) {\n    @for (permissionId of row?.syme_permissions_id_sygms || []; track permissionId) {\n    <div class=\"tw-flex tw-items-center tw-space-x-1\">\n      <div class=\"tw-flex tw-items-center tw-space-x-1\">\n        <input type=\"checkbox\" [checked]=\"isPermissionSelected(row._id, permissionId)\" [disabled]=\"true\"\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\">\n        <label class=\"tw-text-xs tw-text-gray-700\">\n          {{ getPermissionById(permissionId)?.sygms_title || 'Unknown' }}\n        </label>\n      </div>\n    </div>\n    }\n    } @else {\n    <!-- Show green checkmark for parent menus with child permissions -->\n    @if (row.syme_type === 'module' || row.syme_type === 'section' || row.syme_type === 'title') {\n    @if (hasChildMenusWithPermissions(row._id)) {\n    <div class=\"tw-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-bg-green-100 tw-rounded-full\">\n      <cide-ele-icon class=\"tw-text-green-600\" size=\"xs\">\n        check\n      </cide-ele-icon>\n    </div>\n    } @else {\n    <span class=\"tw-text-xs tw-text-gray-400\">N/A</span>\n    }\n    } @else {\n    <span class=\"tw-text-xs tw-text-gray-400\">N/A</span>\n    }\n    }\n  </div>\n</ng-template>\n\n<!-- Menu Rights Permissions Renderer Template -->\n<ng-template #menuRightsPermissionsRendererTemplate let-row=\"row\" let-value=\"value\">\n  <div class=\"tw-flex tw-flex-wrap tw-gap-2 tw-max-w-full\">\n    <!-- Role Rights Display -->\n    @if (row.role_rights && row.role_rights.length > 0) {\n    <div class=\"tw-mb-2\">\n      <div class=\"tw-text-xs tw-text-gray-500 tw-mb-1\">Role Rights:</div>\n      <div class=\"tw-flex tw-flex-wrap tw-gap-1\">\n        @for (right of row.role_rights; track $index) {\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\">\n          {{ right }}\n        </span>\n        }\n      </div>\n    </div>\n    }\n\n\n    <!-- Exception Indicator -->\n    @if (row.hasException) {\n    <div class=\"tw-mt-2\">\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\">\n        Override\n      </span>\n    </div>\n    } @else {\n    <div class=\"tw-mt-2\">\n      <span class=\"tw-text-xs tw-text-gray-400\">Default</span>\n    </div>\n    }\n  </div>\n</ng-template>\n\n<!-- Permissions Renderer Template -->\n<ng-template #permissionsRendererTemplate let-row=\"row\" let-value=\"value\">\n  <div class=\"tw-flex tw-flex-wrap tw-gap-2 tw-max-w-full\">\n    @if (row._permissionValues && Object.keys(row._permissionValues).length > 0) {\n    @for (permissionId of Object.keys(row._permissionValues); track permissionId) {\n    <div class=\"tw-flex tw-items-center tw-space-x-2\">\n      <cide-ele-input type=\"checkbox\" [ngModel]=\"row._permissionValues[permissionId].checked\"\n        (ngModelChange)=\"onPermissionChangeSafe($event, row, permissionId)\"\n        [id]=\"'permission-' + row._id + '-' + permissionId\" class=\"tw-h-4 tw-w-4\">\n      </cide-ele-input>\n      <label [for]=\"'permission-' + row._id + '-' + permissionId\" \n        class=\"tw-text-xs tw-cursor-pointer\"\n        [ngClass]=\"{\n          'tw-text-gray-700': row._permissionValues[permissionId].modified === row._permissionValues[permissionId].actual,\n          'tw-text-blue-600 tw-font-semibold': row._permissionValues[permissionId].modified !== row._permissionValues[permissionId].actual\n        }\">\n        {{ row._permissionValues[permissionId].permission?.sygms_title }}\n        @if (row._permissionValues[permissionId].modified !== row._permissionValues[permissionId].actual) {\n        <span class=\"tw-text-xs tw-text-orange-500 tw-ml-1\" title=\"Modified from role permission\">\n          ({{ row._permissionValues[permissionId].actual ? '\u2713' : '\u2717' }})\n        </span>\n        }\n      </label>\n    </div>\n    }\n    } @else {\n    <!-- No permissions to display - show N/A (permissions are already loaded, just empty) -->\n    <span class=\"tw-text-xs tw-text-gray-400\">N/A</span>\n    }\n  </div>\n</ng-template>", styles: [":host ::ng-deep .entity-mapping-card{transition:all .2s ease}:host ::ng-deep .entity-mapping-card:hover{transform:translateY(-2px)}:host ::ng-deep .entity-mapping-card .cide-card-header{background:linear-gradient(135deg,#3b82f60d,#9333ea0d);border-bottom:1px solid rgba(59,130,246,.1)}:host ::ng-deep .dark .entity-mapping-card .cide-card-header{background:linear-gradient(135deg,#3b82f61a,#9333ea1a);border-bottom:1px solid rgba(59,130,246,.2)}:host ::ng-deep .entity-mapping-card .cide-card-header-content{font-weight:600}:host ::ng-deep .entity-mapping-card .cide-card-body{background:linear-gradient(180deg,#f9fafb80,#ffffff80)}:host ::ng-deep .dark .entity-mapping-card .cide-card-body{background:linear-gradient(180deg,#11182780,#1f293780)}\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.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: "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", "ngModel", "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" }, { kind: "component", type: CideFormFieldErrorComponent, selector: "cide-form-field-error", inputs: ["control", "formGroup", "fieldName", "customMessages"] }, { kind: "component", type: CideLytSharedWrapperComponent, selector: "cide-lyt-shared-wrapper", inputs: ["shared_wrapper_setup_param", "breadcrumb_data"] }, { kind: "component", type: CideEleCardComponent, selector: "cide-ele-card", inputs: ["title", "subtitle", "cardConfig"], outputs: ["stateChange", "collapsed", "minimized", "maximized", "removed", "headerClick"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCoreUserCreateComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideCoreUserCreateComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cide-core-user-create', standalone: true, imports: [
                         CommonModule,
@@ -16727,8 +17229,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                         CideFormFieldErrorComponent,
                         CideLytSharedWrapperComponent,
                         CideEleCardComponent
-                    ], template: "<!-- \n  ENTERPRISE USER MASTER FORM\n  \n  Enterprise-Level Styling with Tailwind CSS\n  Features: Responsive grids, proper typography, enhanced user experience\n-->\n\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: pageCode() }\" [breadcrumb_data]=\"breadcrumbData()\">\n  <div class=\"tw-w-full tw-h-full tw-p-1 tw-pt-2\">\n    <!-- Toast Notifications -->\n    <cide-ele-toast-notification></cide-ele-toast-notification>\n    \n    <form class=\"tw-max-w-7xl tw-mx-auto tw-bg-transparent\" [formGroup]=\"userMasterForm\" [class.tw-opacity-60]=\"loading()\"\n      (ngSubmit)=\"onSubmit()\">\n\n\n    <!-- User Context Header -->\n    <div\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\">\n      <div class=\"tw-flex tw-items-center tw-justify-between tw-flex-wrap tw-gap-2\">\n        <!-- User Basic Info Display -->\n        <div class=\"tw-flex tw-items-center tw-gap-3 tw-flex-wrap\">\n          <!-- Profile Photo Preview -->\n          <div class=\"tw-flex tw-items-center tw-gap-2\">\n            <div\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\">\n              @if (userMasterForm.get('user_photo_id_cyfm')?.value) {\n              <img cideEleFileImage [fileId]=\"userMasterForm.get('user_photo_id_cyfm')?.value\"\n                [altText]=\"'Profile Photo'\" class=\"tw-w-full tw-h-full tw-object-cover\">\n              } @else {\n              <cide-ele-icon name=\"person\" class=\"tw-w-5 tw-h-5 tw-text-blue-600\">\n              </cide-ele-icon>\n              }\n            </div>\n            <div class=\"tw-flex tw-flex-col\">\n              <span class=\"tw-text-xs tw-font-medium tw-text-blue-900\">\n                {{ getUserFullName() || 'New User' }}\n              </span>\n              <span class=\"tw-text-xs tw-text-blue-600\">\n                {{ getUserUsername() || 'Username not set' }}\n              </span>\n            </div>\n          </div>\n\n          <!-- Contact Info -->\n          <div class=\"tw-flex tw-items-center tw-gap-3\">\n            <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-xs tw-text-gray-700\">\n              <cide-ele-icon variant=\"gray\" size=\"xs\">email</cide-ele-icon>\n              <span>{{ getUserEmail() || 'Email not set' }}</span>\n            </div>\n            <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-xs tw-text-gray-700\">\n              <cide-ele-icon variant=\"gray\" size=\"xs\">phone</cide-ele-icon>\n              <span>{{ getUserMobile() || 'Mobile not set' }}</span>\n            </div>\n          </div>\n\n          <!-- Active Status -->\n          <div class=\"tw-flex tw-items-center tw-gap-1\">\n            @if (getUserActiveStatus()) {\n            <span\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\">\n              <cide-ele-icon variant=\"green\" size=\"xs\" class=\"tw-mr-1\">check_circle</cide-ele-icon>\n              Active\n            </span>\n            } @else {\n            <span\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\">\n              <cide-ele-icon variant=\"red\" size=\"xs\" class=\"tw-mr-1\">cancel</cide-ele-icon>\n              Inactive\n            </span>\n            }\n          </div>\n        </div>\n\n        <!-- Entity Info -->\n        <div class=\"tw-flex tw-items-center tw-gap-2\">\n          @if (hasDefaultEntity()) {\n          <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-xs tw-text-blue-700\">\n            <cide-ele-icon variant=\"blue\" size=\"xs\">business</cide-ele-icon>\n            <span class=\"tw-font-medium\">{{ getDefaultEntityName() }}</span>\n          </div>\n          } @else {\n          <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-xs tw-text-gray-500\">\n            <cide-ele-icon variant=\"gray\" size=\"xs\">business</cide-ele-icon>\n            <span class=\"tw-italic\">No entity</span>\n          </div>\n          }\n\n          <span class=\"tw-text-xs tw-text-gray-600 tw-px-2 tw-py-1 tw-bg-gray-100 tw-rounded\">\n            {{ getEntityMappingCount() }} mapping(s)\n          </span>\n        </div>\n      </div>\n    </div>\n\n    <!-- Tab Navigation -->\n    <div class=\"tw-p-0 tw-mb-2 tw-border-b tw-border-gray-200\">\n      <cide-ele-tab [tabs]=\"userTabs()\" [activeTabId]=\"activeTab()\" size=\"md\" variant=\"default\"\n        (tabChange)=\"onTabChange($event)\">\n      </cide-ele-tab>\n    </div>\n\n    <!-- Tab Content -->\n    <div class=\"tw-transition-opacity tw-duration-300\" [class.tw-opacity-60]=\"loading()\">\n      @switch (activeTab()) {\n\n      @case ('basic') {\n      <!-- User Basic Information Section -->\n      <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\n\n        <!-- Top Section: Form Fields on Left, Profile Photo on Right -->\n        <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-[1fr_200px] tw-gap-4 tw-mb-4\">\n          <!-- Left Side: Form Fields -->\n          <div class=\"tw-space-y-4\">\n            <!-- Name Fields - All in One Row -->\n            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-4\">\n              <cide-ele-input id=\"user_firstname\" label=\"First Name\" formControlName=\"user_firstname\"\n                placeholder=\"Enter first name\" [maxlength]=\"20\" size=\"md\" (ngModelChange)=\"onNameFieldChange()\">\n              </cide-ele-input>\n\n              <cide-ele-input id=\"user_middlename\" label=\"Middle Name\" formControlName=\"user_middlename\"\n                placeholder=\"Enter middle name\" [maxlength]=\"20\" size=\"md\" (ngModelChange)=\"onNameFieldChange()\">\n              </cide-ele-input>\n\n              <cide-ele-input id=\"user_lastname\" label=\"Last Name\" formControlName=\"user_lastname\"\n                placeholder=\"Enter last name\" [maxlength]=\"20\" size=\"md\" (ngModelChange)=\"onNameFieldChange()\">\n              </cide-ele-input>\n\n              <cide-ele-input id=\"user_fullname\" label=\"Full Name (Auto-generated)\" formControlName=\"user_fullname\"\n                placeholder=\"Auto-generated from name fields or enter manually\" [maxlength]=\"62\" size=\"md\">\n              </cide-ele-input>\n            </div>\n\n            <!-- Contact Information - All in One Row -->\n            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-3 tw-gap-4\">\n              <cide-ele-input id=\"user_username\" label=\"Username\" formControlName=\"user_username\"\n                placeholder=\"Enter unique username\" [maxlength]=\"20\" size=\"md\">\n              </cide-ele-input>\n\n              <cide-ele-input id=\"user_emailid\" label=\"Email ID\" formControlName=\"user_emailid\" type=\"email\"\n                placeholder=\"Enter valid email address\" [maxlength]=\"320\" size=\"md\">\n              </cide-ele-input>\n\n              <cide-ele-input id=\"user_mobileno\" label=\"Mobile Number\" formControlName=\"user_mobileno\" type=\"tel\"\n                placeholder=\"Enter mobile number\" [maxlength]=\"15\" size=\"md\">\n              </cide-ele-input>\n            </div>\n\n            <!-- User Type Mapping -->\n            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\n              <cide-ele-select\n                id=\"syutm_user_type\"\n                label=\"User Type\"\n                placeholder=\"Select user type\"\n                [options]=\"userTypeOptions\"\n                valueKey=\"value\"\n                labelKey=\"label\"\n                formControlName=\"syutm_user_type\"\n                size=\"md\">\n              </cide-ele-select>\n\n              <cide-ele-input\n                id=\"syutm_type_specific_id\"\n                label=\"Type-Specific ID\"\n                placeholder=\"Enter type-specific ID (e.g., STU001, TCH001)\"\n                formControlName=\"syutm_type_specific_id\"\n                [maxlength]=\"50\"\n                size=\"md\">\n              </cide-ele-input>\n            </div>\n          </div>\n\n          <!-- Right Side: Profile Photo Upload -->\n          <div class=\"tw-flex tw-items-start tw-justify-center tw-p-0\">\n            <cide-ele-file-input id=\"user_photo_id_cyfm\" formControlName=\"user_photo_id_cyfm\" accept=\"image/*\"\n              [showPreview]=\"true\" [previewBoxMode]=\"true\" [showFileName]=\"false\" previewWidth=\"180px\"\n              previewHeight=\"120px\" placeholderText=\"Upload Photo\" placeholderIcon=\"cloud_upload\" [autoUpload]=\"true\"\n              [uploadData]=\"getProfilePhotoUploadData()\" (uploadSuccess)=\"onProfilePhotoUploadSuccess($event)\"\n              (uploadError)=\"onProfilePhotoUploadError($event)\"\n              (uploadProgressChange)=\"onProfilePhotoUploadProgress($event)\">\n            </cide-ele-file-input>\n          </div>\n        </div>\n\n\n\n        <!-- Status Control -->\n        <div class=\"tw-grid tw-grid-cols-1 tw-mb-2\">\n          <div class=\"tw-p-2 tw-bg-blue-50 tw-border tw-border-blue-100 tw-rounded-lg\">\n            <label\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\">\n              <cide-ele-input type=\"checkbox\" label=\"Active User Status\" formControlName=\"user_isactive\"\n                class=\"tw-h-5 tw-accent-blue-500 tw-rounded tw-mb-1\" />\n              <span class=\"tw-font-semibold tw-text-gray-700 tw-text-base\"></span>\n              <span class=\"tw-text-sm tw-text-gray-600 tw-mt-1 tw-leading-relaxed\">Enable this user account for system\n                access and operations</span>\n            </label>\n          </div>\n        </div>\n      </div>\n      }\n\n      @case ('auth') {\n      <!-- Authentication Section -->\n      <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\n        <!-- Password Fields -->\n        @if (shouldShowPasswordFields()) {\n        <div class=\"tw-mb-4\">\n          <!-- Password Fields Header for Edit Mode -->\n          @if (isEditMode()) {\n          <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\n            <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-800\">Update Password</h6>\n            <button type=\"button\"\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\"\n              (click)=\"cancelPasswordUpdate()\">\n              Cancel Password Update\n            </button>\n          </div>\n          }\n\n          <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-2 md:tw-grid-cols-1 tw-gap-6\">\n            <cide-ele-input id=\"user_password\" [label]=\"getPasswordFieldLabel()\" formControlName=\"user_password\"\n              type=\"password\" placeholder=\"Enter secure password (min 8 characters)\" size=\"md\">\n            </cide-ele-input>\n\n            <cide-ele-input id=\"user_confirm_password\" [label]=\"getPasswordConfirmLabel()\"\n              formControlName=\"user_confirm_password\" type=\"password\" placeholder=\"Confirm your password\" size=\"md\">\n            </cide-ele-input>\n          </div>\n        </div>\n        }\n\n        <!-- Password Update Option for Edit Mode -->\n        @if (isEditMode() && !shouldShowPasswordFields()) {\n        <div class=\"tw-mb-4\">\n          <div class=\"tw-p-2 tw-bg-blue-50 tw-border tw-border-blue-200 tw-rounded-lg\">\n            <h6 class=\"tw-text-sm tw-font-semibold tw-text-blue-800 tw-mb-2\">Password Update</h6>\n            <p class=\"tw-text-sm tw-text-blue-600 tw-mb-3\">Current password will be kept. Click below to change\n              password.</p>\n\n            @if (hasPasswordInput()) {\n            <div\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\">\n              <cide-ele-icon variant=\"yellow\" size=\"xs\" class=\"tw-mr-1\">warning</cide-ele-icon>\n              Password fields contain text. Click \"Change Password\" to manage existing input.\n            </div>\n            }\n\n            <button type=\"button\"\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\"\n              (click)=\"triggerPasswordUpdate()\">\n              @if (hasPasswordInput()) {\n              Manage Password Fields\n              } @else {\n              Change Password\n              }\n            </button>\n          </div>\n        </div>\n        }\n\n        <!-- Password Options -->\n        <div class=\"tw-grid tw-grid-cols-1 tw-gap-4 tw-mb-4\">\n          <div class=\"tw-p-2 tw-bg-yellow-50 tw-border tw-border-yellow-100 tw-rounded-lg\">\n            <label\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\">\n              <cide-ele-input type=\"checkbox\" label=\"Force Password Change on Login\"\n                formControlName=\"user_passwordchangeonlogin\" class=\"tw-h-5 tw-accent-yellow-500 tw-rounded tw-mb-1\" />\n              <span class=\"tw-text-sm tw-text-gray-600 tw-mt-1 tw-leading-relaxed\">User will be required to change\n                password on next login</span>\n            </label>\n          </div>\n        </div>\n\n      </div>\n      }\n\n      @case ('roles') {\n      <!-- Entity, Roles & Permissions Mapping Section -->\n      <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\n\n\n\n        <!-- Important Note -->\n        <div class=\"tw-bg-amber-50 tw-border tw-border-amber-200 tw-rounded-lg tw-p-2 tw-mb-4\">\n          <div class=\"tw-flex tw-items-start tw-gap-3\">\n            <cide-ele-icon variant=\"amber\" size=\"lg\">info</cide-ele-icon>\n            <div class=\"tw-flex-1\">\n              <h4 class=\"tw-text-sm tw-font-semibold tw-text-amber-800 tw-mb-1\">Entity-Role Based Access</h4>\n              <p class=\"tw-text-sm tw-text-amber-700 tw-mb-2\">User access is completely managed through entity-role\n                mappings below. At least one entity mapping is required for user access.</p>\n              @if (hasDefaultEntity()) {\n              <div class=\"tw-flex tw-items-center tw-gap-2 tw-mt-2 tw-p-2 tw-bg-amber-100 tw-rounded\">\n                <cide-ele-icon variant=\"amber\" size=\"sm\">star</cide-ele-icon>\n                <span class=\"tw-text-sm tw-text-amber-800\">\n                  <strong>Default Entity:</strong> {{ getDefaultEntityName() }}\n                </span>\n              </div>\n              } @else {\n              <div class=\"tw-text-sm tw-text-amber-600 tw-mt-2 tw-italic\">\n                \u26A0\uFE0F No default entity selected. Please set one entity as default.\n              </div>\n              }\n            </div>\n          </div>\n        </div>\n\n        <!-- Entity-Role Mapping Section -->\n        <div class=\"tw-flex tw-text-center tw-justify-between tw-items-center tw-mb-4\">\n          <div>\n            <h4 class=\"tw-text-sm tw-text-left tw-font-semibold tw-text-blue-900 tw-mb-1\">Entity-Role Mapping</h4>\n            <p class=\"tw-text-sm tw-text-blue-700\">Map user to entities with specific roles and permissions</p>\n          </div>\n          <div class=\"tw-flex tw-flex-col tw-items-end\">\n            <button cideEleButton variant=\"primary\" size=\"md\" type=\"button\" (click)=\"addEntityMapping()\"\n              leftIcon=\"add\" [disabled]=\"isAllEntitiesMapped()\">\n              Add Entity Mapping\n            </button>\n\n            @if (isAllEntitiesMapped()) {\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\">\n              <p class=\"tw-text-xs tw-text-blue-700\">\n                <cide-ele-icon variant=\"info\" size=\"xs\" class=\"tw-mr-1\">info</cide-ele-icon>\n                All available entities are already mapped.\n              </p>\n            </div>\n            }\n          </div>\n        </div>\n\n        <div formArrayName=\"core_entity_mapping\">\n            @for (mapping of entityMappings(); track mapping.syenm_entity_id_syen?._id || mapping.syenm_entity_id_syen || $index; let i = $index) {\n            <cide-ele-card\n              [title]=\"getEntityNameFromMapping(i) || 'Entity Mapping ' + (i + 1)\"\n              [subtitle]=\"mapping.syenm_isdefault ? 'Primary Entity' : ''\"\n              [cardConfig]=\"{\n                collapsible: true,\n                minimizable: false,\n                maximizable: false,\n                removable: !mapping?._id,\n                defaultState: 'collapsed',\n                showHeader: true,\n                showFooter: false,\n                variant: 'default',\n                size: 'sm',\n                shadow: true,\n                rounded: true,\n                bordered: true\n              }\"\n              (stateChange)=\"onEntityMappingCardStateChange($event, i)\"\n              (removed)=\"removeEntityMapping(i)\"\n              class=\"tw-mb-2 entity-mapping-card tw-block\">\n              \n              <div [formGroupName]=\"i\">\n              \n              <!-- Card Actions (User Type Mappings only) -->\n              <div card-actions class=\"tw-flex tw-items-center tw-gap-1.5 tw-flex-wrap tw-max-w-full\">\n                @if (getEntityIdFromMapping(i)) {\n                  @if (getUserTypeMappingsForEntity(getEntityIdFromMapping(i)).length > 0) {\n                    @for (typeMapping of getUserTypeMappingsForEntity(getEntityIdFromMapping(i)); track typeMapping._id || typeMapping.syutm_type_specific_id) {\n                      <span class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded tw-text-[10px] tw-font-medium tw-bg-purple-50 dark:tw-bg-purple-900/20 tw-text-purple-700 dark:tw-text-purple-300 tw-border tw-border-purple-200 dark:tw-border-purple-800\">\n                        <cide-ele-icon variant=\"purple\" size=\"xs\" class=\"tw-mr-1\">person</cide-ele-icon>\n                        {{ typeMapping.syutm_user_type }}\n                        @if (typeMapping.syutm_isactive) {\n                          <span class=\"tw-ml-1 tw-w-1.5 tw-h-1.5 tw-rounded-full tw-bg-green-500\"></span>\n                        }\n                      </span>\n                    }\n                  }\n                }\n              </div>\n\n              <!-- Card Content -->\n              <div class=\"tw-space-y-3\">\n                <!-- Hidden form control to maintain form structure for entity -->\n                <input type=\"hidden\" [formControlName]=\"'syenm_entity_id_syen'\" />\n                \n                <!-- Role, Default, and Active in One Row -->\n                <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-3\">\n                  <!-- Role Selection -->\n                  <cide-ele-select label=\"Role for this Entity\" [options]=\"getRoleOptionsForEntity(i)\"\n                    formControlName=\"syenm_role_id_syusrol\" valueKey=\"_id\" labelKey=\"syusrol_role_name\"\n                    placeholder=\"Select role for this entity\" size=\"md\" (change)=\"onRoleChange(i, $event)\">\n                  </cide-ele-select>\n                  \n                  <!-- Primary Entity Checkbox -->\n                  <div class=\"tw-flex tw-flex-col\">\n                    <label class=\"tw-block tw-text-sm tw-font-medium tw-text-gray-700 dark:tw-text-gray-300 tw-mb-1.5\">Default</label>\n                    <div class=\"tw-flex tw-items-center tw-gap-2 tw-px-3 tw-py-2 tw-rounded-md tw-border tw-border-green-200 tw-bg-green-50 dark:tw-bg-green-900/20 dark:tw-border-green-800\" (click)=\"$event.stopPropagation()\">\n                      <input \n                        type=\"checkbox\" \n                        [checked]=\"mapping.syenm_isdefault\"\n                        (change)=\"onDefaultEntityChange(i, $event)\" \n                        class=\"tw-h-4 tw-w-4 tw-accent-green-600 tw-cursor-pointer\" />\n                      <label class=\"tw-inline-flex tw-items-center tw-gap-1 tw-text-xs tw-font-semibold tw-text-green-700 dark:tw-text-green-300 tw-cursor-pointer\">\n                        <cide-ele-icon variant=\"green\" size=\"xs\">star</cide-ele-icon>\n                        DEFAULT\n                      </label>\n                    </div>\n                  </div>\n                  \n                  <!-- Active Mapping Checkbox -->\n                  <div class=\"tw-flex tw-flex-col\">\n                    <label class=\"tw-block tw-text-sm tw-font-medium tw-text-gray-700 dark:tw-text-gray-300 tw-mb-1.5\">Status</label>\n                    <div class=\"tw-flex tw-items-center tw-gap-2 tw-px-3 tw-py-2 tw-rounded-md tw-border tw-border-blue-200 tw-bg-blue-50 dark:tw-bg-blue-900/20 dark:tw-border-blue-800\" (click)=\"$event.stopPropagation()\">\n                      <input \n                        type=\"checkbox\" \n                        [checked]=\"mapping.syenm_isactive\"\n                        (change)=\"onActiveMappingChange(i, $event)\" \n                        class=\"tw-h-4 tw-w-4 tw-accent-blue-600 tw-cursor-pointer\" />\n                      <label class=\"tw-inline-flex tw-items-center tw-gap-1 tw-text-xs tw-font-semibold tw-text-blue-700 dark:tw-text-blue-300 tw-cursor-pointer\">\n                        <cide-ele-icon variant=\"blue\" size=\"xs\">check_circle</cide-ele-icon>\n                        Active\n                      </label>\n                    </div>\n                  </div>\n                </div>\n\n\n                <!-- Entity-Specific Details and Active Period - All in One Row -->\n                <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-3\">\n                  <cide-ele-select label=\"Department for this Entity\" [options]=\"getDepartmentOptionsForEntity(i)\"\n                    formControlName=\"syenm_department_id_sydept\" (change)=\"onDepartmentChange($event)\" valueKey=\"_id\"\n                    labelKey=\"sydept_name\" placeholder=\"Select department\" size=\"md\">\n                  </cide-ele-select>\n\n                  <cide-ele-select label=\"Designation for this Entity\" [options]=\"getDesignationOptionsForEntity(i)\"\n                    valueKey=\"_id\" labelKey=\"sydsg_name\" formControlName=\"syenm_designation_id_sydsg\"\n                    placeholder=\"Select designation\" size=\"md\">\n                  </cide-ele-select>\n\n                  <cide-ele-input label=\"Active From\" [id]=\"'syenm_activefrom['+i+']'\"\n                    formControlName=\"syenm_activefrom\" type=\"date\" size=\"md\">\n                  </cide-ele-input>\n\n                  <cide-ele-input label=\"Active Until\" [id]=\"'syenm_activeupto['+i+']'\"\n                    formControlName=\"syenm_activeupto\" type=\"date\" size=\"md\">\n                  </cide-ele-input>\n                </div>\n\n                <!-- Menu Rights Grid for this Entity-Role -->\n                <div class=\"tw-border-t tw-border-gray-200\">\n\n                  @if (getMenuRightsForMapping(i).length > 0) {\n                  <!-- Menu Rights Tree Grid -->\n\n                  <cide-ele-data-grid [config]=\"getMenuRightsGridConfig(i)\"\n                    [templateRenderers]=\"getMenuRightsTemplateRenderers(i)\"\n                    (gridEvent)=\"onMenuRightsGridEvent($event, i)\" class=\"tw-h-96 tw-w-full\">\n                  </cide-ele-data-grid>\n\n                  } @else {\n                  <div class=\"tw-text-center tw-py-8 tw-bg-gray-50 tw-border tw-border-gray-200 tw-rounded-lg\">\n                    <div class=\"tw-text-gray-400 tw-mb-3\">\n                      <cide-ele-icon variant=\"gray\" size=\"lg\">menu</cide-ele-icon>\n                    </div>\n                    <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-600 tw-mb-2\">No Menu Rights Available</h6>\n                    <p class=\"tw-text-xs tw-text-gray-500 tw-mb-3 tw-text-center\">Select both entity and role to\n                      automatically load\n                      menu rights for this mapping.</p>\n                  </div>\n                  }\n                </div>\n              </div>\n              </div>\n            </cide-ele-card>\n            }\n          </div>\n\n          @if (entityMappings().length === 0) {\n          <div class=\"tw-text-center tw-py-8 tw-bg-white tw-border tw-border-blue-200 tw-rounded-lg\">\n            <div class=\"tw-text-blue-400 tw-mb-3\">\n              <cide-ele-icon variant=\"blue\" size=\"lg\">business</cide-ele-icon>\n            </div>\n            <h4 class=\"tw-text-sm tw-font-medium tw-text-blue-800 tw-mb-2\">No Entity Mappings</h4>\n            <p class=\"tw-text-blue-600 tw-mb-4 tw-text-center\">Add entity mappings to assign specific roles and\n              permissions for different entities.</p>\n            <button class=\"tw-mx-auto\" cideEleButton variant=\"primary\" size=\"md\" type=\"button\"\n              (click)=\"addEntityMapping()\" leftIcon=\"add\">\n              Add First Entity Mapping\n            </button>\n          </div>\n          }\n        </div>\n      }\n\n      @case ('addresses') {\n      <!-- Contact Addresses Section -->\n      <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\n        <div class=\"tw-flex tw-justify-end\">\n          <div class=\"tw-flex tw-justify-between tw-items-end tw-mb-2 tw-gap-4\">\n            <button cideEleButton variant=\"primary\" size=\"md\" type=\"button\" (click)=\"addContactAddress()\"\n              leftIcon=\"add\" [disabled]=\"!hasAddContactAddressRights()\">\n              Add New Address\n            </button>\n          </div>\n        </div>\n\n        <div formArrayName=\"core_user_contact_addresses\">\n          @for (address of contactAddresses(); track $index; let i = $index) {\n          <div [formGroupName]=\"i\"\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\">\n            <div\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\">\n              <!-- Use address type as header instead of generic \"Address X\" -->\n              <h4 class=\"tw-m-0 tw-text-gray-700 tw-text-sm tw-font-semibold tw-tracking-tight\">\n                {{ getAddressTypeLabel(i) || ('Address ' + (i + 1)) }}\n              </h4>\n              <div class=\"tw-flex tw-items-center tw-gap-2\">\n                @if (isAddressOwner(i)) {\n                <button cideEleButton variant=\"secondary\" size=\"xs\" type=\"button\" (click)=\"shareAddress(i)\"\n                  leftIcon=\"share\" class=\"tw-text-blue-600 hover:tw-text-blue-700\">\n                  Share\n                </button>\n                }\n                @if (!address?._id) {\n                <button cideEleButton variant=\"danger\" size=\"sm\" type=\"button\" (click)=\"removeContactAddress(i)\"\n                  leftIcon=\"delete\">\n                  Remove\n                </button>\n                }\n              </div>\n            </div>\n            <div class=\"tw-p-4\">\n              <!-- Main Layout: Inputs on Left, Address Textarea on Right -->\n              <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-4 tw-gap-3 tw-mb-3\">\n                \n                <!-- Left Side: Input Fields (3/4 width) -->\n                <div class=\"lg:tw-col-span-3\">\n                  <!-- Row 1: Address Type, Contact Person -->\n                  <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3 tw-mb-3\">\n                    <cide-ele-select label=\"Address Type\" [options]=\"addressTypeOptions()\" id=\"sycad_address_type_id_sygms\"\n                      formControlName=\"sycad_address_type_id_sygms\" placeholder=\"Select type\" size=\"sm\"\n                      valueKey=\"_id\" labelKey=\"sygms_title\" (change)=\"onAddressTypeChange(i)\">\n                    </cide-ele-select>\n\n                    <cide-ele-input label=\"Contact Person\" formControlName=\"sycad_contact_person_name\"\n                      placeholder=\"Enter contact person\" size=\"sm\">\n                    </cide-ele-input>\n                  </div>\n\n                  <!-- Row 2: Postal Code, City, State, Country -->\n                  <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-4 tw-gap-3\">\n                    <cide-ele-select label=\"Postal Code\" [options]=\"addressPostalCodes()[i] || []\"\n                      formControlName=\"sycad_contact_pin_sypin\" placeholder=\"Select postal code\" [searchable]=\"true\"\n                      [loading]=\"addressPostalCodesLoading()[i] || false\" (searchChange)=\"onPostalCodeSearch($event, i)\"\n                      (change)=\"onPostalCodeSelection($event, i)\" size=\"sm\">\n                    </cide-ele-select>\n\n                    <cide-ele-input label=\"City\" formControlName=\"sycad_contact_city_sypin\" placeholder=\"Enter city\"\n                      size=\"sm\">\n                    </cide-ele-input>\n\n                    <cide-ele-input label=\"State\" formControlName=\"sycad_contact_state_sypin\" placeholder=\"Enter state\"\n                      size=\"sm\">\n                    </cide-ele-input>\n\n                    <cide-ele-select label=\"Country\" [options]=\"addressCountries()[i] || []\"\n                      formControlName=\"sycad_contact_country_syctr\" placeholder=\"Select country\" valueKey=\"_id\"\n                      labelKey=\"syctr_country_iso_name\" [searchable]=\"true\" (searchChange)=\"onCountrySearch($event, i)\"\n                      [loading]=\"addressCountriesLoading()[i] || false\" size=\"sm\">\n                    </cide-ele-select>\n                  </div>\n                </div>\n\n                <!-- Right Side: Address Textarea (1/4 width, spans 2 rows) -->\n                <div class=\"lg:tw-col-span-1 lg:tw-row-span-2 tw-flex tw-flex-col\">\n                  <cide-ele-textarea label=\"Complete Address\" formControlName=\"sycad_contact_address\"\n                    placeholder=\"Enter complete address with area, city, and landmarks\" [rows]=\"4\" size=\"sm\"\n                    class=\"tw-h-full\">\n                  </cide-ele-textarea>\n                </div>\n              </div>\n\n              <!-- Contact Details: Primary Phone, Alt Phone, Fax, Primary Email in 4 columns -->\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-4 tw-gap-3 tw-mb-3\">\n                <cide-ele-input label=\"Primary Phone\" formControlName=\"sycad_contact_phone\" type=\"tel\"\n                  placeholder=\"Primary phone\" size=\"sm\">\n                </cide-ele-input>\n\n                <cide-ele-input label=\"Alternate Phone\" formControlName=\"sycad_contact_phone_alt\" type=\"tel\"\n                  placeholder=\"Alternate phone\" size=\"sm\">\n                </cide-ele-input>\n\n                <cide-ele-input label=\"Fax Number\" formControlName=\"sycad_contact_fax\" placeholder=\"Fax number\"\n                  size=\"sm\">\n                </cide-ele-input>\n\n                <cide-ele-input label=\"Primary Email\" formControlName=\"sycad_contact_email\" type=\"email\"\n                  placeholder=\"Primary email\" size=\"sm\">\n                </cide-ele-input>\n              </div>\n\n              <!-- Alternate Email in single row -->\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3\">\n                <cide-ele-input label=\"Alternate Email\" formControlName=\"sycad_contact_email_alt\" type=\"email\"\n                  placeholder=\"Alternate email address\" size=\"sm\">\n                </cide-ele-input>\n              </div>\n            </div>\n          </div>\n          }\n        </div>\n      </div>\n      }\n\n      @case ('documents') {\n      <!-- Documents Section -->\n      <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\n        <div class=\"tw-flex tw-justify-end tw-items-end tw-mb-2 tw-gap-4\">\n          <button cideEleButton variant=\"primary\" size=\"md\" type=\"button\" (click)=\"addDocument()\" leftIcon=\"add\" [disabled]=\"!hasAddDocumentRights()\">\n            Add Document\n          </button>\n        </div>\n        <div formArrayName=\"core_user_documents\">\n          @for (doc of documents(); track $index; let i = $index) {\n          <div [formGroupName]=\"i\"\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\">\n            <div\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\">\n              <h4 class=\"tw-m-0 tw-text-gray-700 tw-text-sm tw-font-semibold tw-tracking-tight\">\n                {{ getDocumentTypeLabel(i) || ('Document ' + (i + 1)) }}\n              </h4>\n              <div class=\"tw-flex tw-gap-2\">\n                @if (doc?._id) {\n                <button cideEleButton variant=\"secondary\" size=\"sm\" type=\"button\" (click)=\"shareDocumentRights(i)\"\n                  leftIcon=\"share\">\n                  Share\n                </button>\n                }\n              </div>\n            </div>\n            <div class=\"tw-p-4\">\n              <!-- Main Layout: Inputs on Left, File Upload on Right -->\n              <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-3 tw-gap-4\">\n                \n                <!-- Left Side: Document Information (2/3 width) -->\n                <div class=\"lg:tw-col-span-2\">\n                  <!-- Row 1: Document Type, Document Number, Name as per Document -->\n                  <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-3 tw-mb-3\">\n                    <cide-ele-select label=\"Document Type\" [options]=\"documentTypeOptions()\"\n                      formControlName=\"syusd_document_type_id_sygms\" placeholder=\"Select type\" size=\"sm\"\n                      valueKey=\"_id\" labelKey=\"sygms_title\" (change)=\"onDocumentTypeChange(i)\">\n                    </cide-ele-select>\n\n                    <cide-ele-input label=\"Document Number\" formControlName=\"syusd_doc_number\"\n                      placeholder=\"Document number\" size=\"sm\">\n                    </cide-ele-input>\n\n                    <cide-ele-input label=\"Name as per Document\" formControlName=\"syusd_doc_name_as_per_doc\"\n                      placeholder=\"Name on document\" size=\"sm\">\n                    </cide-ele-input>\n                  </div>\n\n                  <!-- Row 2: Issue Date, Expiry Date, Photo Group -->\n                  <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-3 tw-mb-3\">\n                    <cide-ele-input label=\"Issue Date\" formControlName=\"syusd_doc_issue_date\"\n                      [id]=\"'syusd_doc_issue_date['+i+']'\" type=\"date\" size=\"sm\">\n                    </cide-ele-input>\n\n                    <cide-ele-input label=\"Expiry Date\" formControlName=\"syusd_doc_expiry_date\"\n                      [id]=\"'syusd_doc_expiry_date['+i+']'\" type=\"date\" size=\"sm\">\n                    </cide-ele-input>\n                  </div>\n\n                  <!-- Row 3: Verification Status, KYC Status -->\n                  <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3\">\n                    <cide-ele-select label=\"Verification Status\" [options]=\"documentVerificationStatusOptions()\"\n                      formControlName=\"syusd_doc_verification_status_id_sygms\" placeholder=\"Select status\"\n                      size=\"sm\" valueKey=\"_id\" labelKey=\"sygms_title\">\n                    </cide-ele-select>\n\n                    <cide-ele-select label=\"KYC Status\" [options]=\"documentKycStatusOptions()\"\n                      formControlName=\"syusd_doc_kyc_status_id_sygms\" placeholder=\"Select KYC status\" size=\"sm\"\n                      valueKey=\"_id\" labelKey=\"sygms_title\">\n                    </cide-ele-select>\n                  </div>\n                </div>\n\n                <!-- Right Side: File Upload (1/3 width) -->\n                <div class=\"lg:tw-col-span-1\">\n                  <div class=\"tw-bg-gray-50 tw-border tw-border-gray-200 tw-rounded-lg tw-p-3 tw-h-full\">\n                    \n                    <!-- File Upload Input -->\n                    <cide-ele-file-input\n                      [id]=\"'document-files-' + i\"\n                      [multiple]=\"true\"\n                      formControlName=\"syusd_photo_group_id_cyfm\"\n                      [accept]=\"'.pdf,.jpg,.jpeg,.png,.doc,.docx'\"\n                      [autoUpload]=\"true\"\n                      [uploadData]=\"getDocumentUploadData(i)\"\n                      (change)=\"onDocumentFilesSelected($event, i)\"\n                      (uploadSuccess)=\"onDocumentUploadSuccess($event, i)\"\n                      (uploadError)=\"onDocumentUploadError($event, i)\"\n                      (uploadProgressChange)=\"onDocumentUploadProgress($event, i)\"\n                      class=\"tw-mb-3\"\n                      size=\"sm\">\n                    </cide-ele-file-input>\n\n                    <!-- Upload Status -->\n                    <!-- Upload status is now handled by the file input component itself -->\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n          }\n        </div>\n      </div>\n      }\n\n      @case ('family') {\n      <!-- Family Details Section - Compact Design -->\n      <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\n        <div class=\"tw-flex tw-justify-end tw-items-end tw-mb-3 tw-gap-4\">\n          <button cideEleButton variant=\"primary\" size=\"sm\" type=\"button\" (click)=\"addFamilyDetail()\" leftIcon=\"add\" [disabled]=\"!hasAddFamilyDetailRights()\">\n            Add Family Member\n          </button>\n        </div>\n\n        <div formArrayName=\"core_user_family_details\">\n          @for (family of familyDetails(); track $index; let i = $index) {\n          <div [formGroupName]=\"i\"\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\">\n            \n            <!-- Compact Header -->\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\">\n              <h4 class=\"tw-m-0 tw-text-gray-700 tw-text-sm tw-font-medium\">Family Member {{ i + 1 }}</h4>\n              <div class=\"tw-flex tw-gap-2\">\n                @if (family?._id) {\n                <button cideEleButton variant=\"secondary\" size=\"xs\" type=\"button\" (click)=\"shareFamilyDetailRights(i)\"\n                  leftIcon=\"share\">\n                  Share\n                </button>\n                }\n                @if (!family?._id) {\n                <button cideEleButton variant=\"danger\" size=\"xs\" type=\"button\" (click)=\"removeFamilyDetail(i)\" leftIcon=\"delete\">\n                  Remove\n                </button>\n                }\n              </div>\n            </div>\n            \n            <!-- Compact Form Content - 3 inputs per row -->\n            <div class=\"tw-p-4\">\n              <!-- Row 1: Name, User, and Combined Relationship/Active Status (33.33% each) -->\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-3 tw-mb-3\">\n                <cide-ele-input label=\"Family Member Name\" formControlName=\"syfdl_family_member_name\"\n                  placeholder=\"Enter family member full name\" size=\"sm\">\n                </cide-ele-input>\n\n                <cide-ele-select label=\"Family Member User\" [options]=\"userOptions(i)\"\n                  formControlName=\"syfdl_family_member_id_user\" placeholder=\"Select family member user\" size=\"sm\"\n                  valueKey=\"_id\" labelKey=\"user_fullname\" [searchable]=\"true\"\n                  [loading]=\"userSearchLoading()[i] || false\" (searchChange)=\"onUserSearchChange($event, i)\"\n                  (change)=\"onUserSelectionChange($event, i)\">\n                </cide-ele-select>\n\n                <!-- Combined Relationship and Active Status (33.33%) -->\n                <div class=\"tw-flex tw-flex-row tw-gap-2 tw-items-end\">\n                  <div class=\"tw-flex-1\">\n                    <cide-ele-select label=\"Relationship\" [options]=\"relationshipOptions()\"\n                      formControlName=\"syfdl_relationship_id_sygms\" placeholder=\"Select relationship\" size=\"sm\"\n                      valueKey=\"_id\" labelKey=\"sygms_title\">\n                    </cide-ele-select>\n                  </div>\n\n                  <div class=\"tw-flex tw-items-center tw-pt-1 tw-flex-shrink-0\">\n                    <cide-ele-input formControlName=\"syfdl_isactive\" type=\"checkbox\" label=\"Active\" size=\"sm\">\n                    </cide-ele-input>\n                  </div>\n                </div>\n              </div>\n\n              <!-- Row 2: Blood Group, DOB, and Phone -->\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\">\n                <cide-ele-select label=\"Blood Group\" [options]=\"bloodGroupOptions()\"\n                  formControlName=\"syfdl_blood_group_sygms\" placeholder=\"Select blood group\" size=\"sm\" valueKey=\"_id\"\n                  labelKey=\"sygms_title\">\n                </cide-ele-select>\n\n                <cide-ele-input label=\"Date of Birth\" formControlName=\"syfdl_family_member_dob\" type=\"date\" size=\"sm\"\n                  [id]=\"'syfdl_family_member_dob['+i+']'\">\n                </cide-ele-input>\n\n                <cide-ele-input label=\"Contact Phone\" formControlName=\"syfdl_contact_phone\" type=\"tel\"\n                  placeholder=\"Enter contact phone\" size=\"sm\">\n                </cide-ele-input>\n              </div>\n\n              <!-- Row 3: Email, Email ID, and Contact Number -->\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\">\n                <cide-ele-input label=\"Contact Email\" formControlName=\"syfdl_contact_email\" type=\"email\"\n                  placeholder=\"Enter contact email\" size=\"sm\">\n                </cide-ele-input>\n\n                <cide-ele-input label=\"Contact Email ID\" formControlName=\"syfdl_contact_email_id\" type=\"email\"\n                  placeholder=\"Enter contact email ID\" size=\"sm\">\n                </cide-ele-input>\n\n                <cide-ele-input label=\"Contact Number\" formControlName=\"syfdl_contact_number\" type=\"tel\"\n                  placeholder=\"Enter contact number\" size=\"sm\">\n                </cide-ele-input>\n              </div>\n\n            </div>\n          </div>\n          }\n        </div>\n      </div>\n      }\n      }\n    </div>\n\n    <!-- Form Actions -->\n    <div\n      class=\"tw-flex tw-justify-between tw-items-center tw-gap-4 tw-py-2 tw-bg-white tw-border-t tw-border-gray-200 tw-sticky tw-bottom-0 tw-z-10\">\n      <!-- Error Display Component -->\n      <div class=\"tw-flex-1\">\n        <cide-form-field-error [formGroup]=\"userMasterForm\"></cide-form-field-error>\n      </div>\n\n      <!-- Action Buttons -->\n      <div class=\"tw-flex tw-gap-4\">\n      <button cideEleButton type=\"button\" variant=\"secondary\" (click)=\"resetForm()\" leftIcon=\"refresh\"\n        [disabled]=\"loading()\">\n        Reset Form\n      </button>\n\n      <button cideEleButton type=\"submit\" variant=\"primary\" [disabled]=\"loading() || userMasterForm.invalid\"\n        [loading]=\"loading()\" leftIcon=\"save\">\n        Save User Master\n      </button>\n      </div>\n    </div>\n  </form>\n</div>\n</cide-lyt-shared-wrapper>\n\n<!-- Template Renderers for Role Permissions Grid -->\n<ng-template #menuDetailsRendererTemplate let-row=\"row\">\n  <div class=\"tw-flex tw-items-center tw-space-x-3 tw-min-w-0\">\n    <!-- Menu Icon -->\n    <div class=\"tw-flex-shrink-0\">\n      @if (row.syme_type === 'module') {\n      <cide-ele-icon class=\"tw-text-blue-600 tw-w-4 tw-h-4\">folder</cide-ele-icon>\n      } @else if (row.syme_type === 'section') {\n      <cide-ele-icon class=\"tw-text-green-600 tw-w-4 tw-h-4\">folder_open</cide-ele-icon>\n      } @else if (row.syme_type === 'menu') {\n      <cide-ele-icon class=\"tw-text-purple-600 tw-w-4 tw-h-4\">menu</cide-ele-icon>\n      } @else {\n      <cide-ele-icon class=\"tw-text-gray-600 tw-w-4 tw-h-4\">description</cide-ele-icon>\n      }\n    </div>\n\n    <!-- Menu Details -->\n    <div class=\"tw-ml-3 tw-min-w-0 tw-flex-1\">\n      <div class=\"tw-flex tw-items-center tw-gap-2\">\n        <div class=\"tw-text-xs tw-font-medium tw-text-gray-900 tw-truncate\" [title]=\"row.syme_title\">\n          {{ row.syme_title || row.menu?.syme_title || row.menu?.syme_menu_name || 'Untitled' }}\n        </div>\n        <!-- Green pill indicator for parent menus with child permissions -->\n        @if (row.syme_type === 'module' || row.syme_type === 'section') {\n        @if (hasChildMenusWithPermissions(row._id)) {\n        <span\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\">\n          Assigned\n        </span>\n        }\n        }\n      </div>\n      @if (row.permission?.sygms_name) {\n      <div class=\"tw-text-xs tw-text-blue-500 tw-truncate\" [title]=\"row.permission?.sygms_name\">\n        {{ row.permission?.sygms_name }}\n      </div>\n      }\n    </div>\n  </div>\n</ng-template>\n\n<!-- Menu Type Renderer Template -->\n<ng-template #menuTypeRendererTemplate let-row=\"row\" let-value=\"value\">\n  <div class=\"tw-flex tw-items-center tw-justify-center\">\n    @if (row.syme_type === 'module') {\n    <span\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\">\n      Module\n    </span>\n    } @else if (row.syme_type === 'section') {\n    <span\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\">\n      Section\n    </span>\n    } @else if (row.syme_type === 'menu') {\n    <span\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\">\n      Menu\n    </span>\n    } @else {\n    <span\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\">\n      {{ row.syme_type || 'Unknown' }}\n    </span>\n    }\n  </div>\n</ng-template>\n\n<!-- Permissions Checkbox Renderer Template -->\n<ng-template #permissionsCheckboxRendererTemplate let-row=\"row\" let-value=\"value\">\n  <div class=\"tw-flex tw-flex-wrap tw-gap-2 tw-max-w-full\">\n    @if (row.syme_type === 'menu' && row?.syme_permissions_id_sygms && row?.syme_permissions_id_sygms.length > 0) {\n    @for (permissionId of row?.syme_permissions_id_sygms || []; track permissionId) {\n    <div class=\"tw-flex tw-items-center tw-space-x-1\">\n      <div class=\"tw-flex tw-items-center tw-space-x-1\">\n        <input type=\"checkbox\" [checked]=\"isPermissionSelected(row._id, permissionId)\" [disabled]=\"true\"\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\">\n        <label class=\"tw-text-xs tw-text-gray-700\">\n          {{ getPermissionById(permissionId)?.sygms_title || 'Unknown' }}\n        </label>\n      </div>\n    </div>\n    }\n    } @else {\n    <!-- Show green checkmark for parent menus with child permissions -->\n    @if (row.syme_type === 'module' || row.syme_type === 'section' || row.syme_type === 'title') {\n    @if (hasChildMenusWithPermissions(row._id)) {\n    <div class=\"tw-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-bg-green-100 tw-rounded-full\">\n      <cide-ele-icon class=\"tw-text-green-600\" size=\"xs\">\n        check\n      </cide-ele-icon>\n    </div>\n    } @else {\n    <span class=\"tw-text-xs tw-text-gray-400\">N/A</span>\n    }\n    } @else {\n    <span class=\"tw-text-xs tw-text-gray-400\">N/A</span>\n    }\n    }\n  </div>\n</ng-template>\n\n<!-- Menu Rights Permissions Renderer Template -->\n<ng-template #menuRightsPermissionsRendererTemplate let-row=\"row\" let-value=\"value\">\n  <div class=\"tw-flex tw-flex-wrap tw-gap-2 tw-max-w-full\">\n    <!-- Role Rights Display -->\n    @if (row.role_rights && row.role_rights.length > 0) {\n    <div class=\"tw-mb-2\">\n      <div class=\"tw-text-xs tw-text-gray-500 tw-mb-1\">Role Rights:</div>\n      <div class=\"tw-flex tw-flex-wrap tw-gap-1\">\n        @for (right of row.role_rights; track $index) {\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\">\n          {{ right }}\n        </span>\n        }\n      </div>\n    </div>\n    }\n\n\n    <!-- Exception Indicator -->\n    @if (row.hasException) {\n    <div class=\"tw-mt-2\">\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\">\n        Override\n      </span>\n    </div>\n    } @else {\n    <div class=\"tw-mt-2\">\n      <span class=\"tw-text-xs tw-text-gray-400\">Default</span>\n    </div>\n    }\n  </div>\n</ng-template>\n\n<!-- Permissions Renderer Template -->\n<ng-template #permissionsRendererTemplate let-row=\"row\" let-value=\"value\">\n  <div class=\"tw-flex tw-flex-wrap tw-gap-2 tw-max-w-full\">\n    @if (row._permissionValues && Object.keys(row._permissionValues).length > 0) {\n    @for (permissionId of Object.keys(row._permissionValues); track permissionId) {\n    <div class=\"tw-flex tw-items-center tw-space-x-2\">\n      <cide-ele-input type=\"checkbox\" [ngModel]=\"row._permissionValues[permissionId].checked\"\n        (ngModelChange)=\"onPermissionChangeSafe($event, row, permissionId)\"\n        [id]=\"'permission-' + row._id + '-' + permissionId\" class=\"tw-h-4 tw-w-4\">\n      </cide-ele-input>\n      <label [for]=\"'permission-' + row._id + '-' + permissionId\" \n        class=\"tw-text-xs tw-cursor-pointer\"\n        [ngClass]=\"{\n          'tw-text-gray-700': row._permissionValues[permissionId].modified === row._permissionValues[permissionId].actual,\n          'tw-text-blue-600 tw-font-semibold': row._permissionValues[permissionId].modified !== row._permissionValues[permissionId].actual\n        }\">\n        {{ row._permissionValues[permissionId].permission?.sygms_title }}\n        @if (row._permissionValues[permissionId].modified !== row._permissionValues[permissionId].actual) {\n        <span class=\"tw-text-xs tw-text-orange-500 tw-ml-1\" title=\"Modified from role permission\">\n          ({{ row._permissionValues[permissionId].actual ? '\u2713' : '\u2717' }})\n        </span>\n        }\n      </label>\n    </div>\n    }\n    } @else {\n    <!-- No permissions to display - show N/A (permissions are already loaded, just empty) -->\n    <span class=\"tw-text-xs tw-text-gray-400\">N/A</span>\n    }\n  </div>\n</ng-template>", styles: [":host ::ng-deep .entity-mapping-card{transition:all .2s ease}:host ::ng-deep .entity-mapping-card:hover{transform:translateY(-2px)}:host ::ng-deep .entity-mapping-card .cide-card-header{background:linear-gradient(135deg,#3b82f60d,#9333ea0d);border-bottom:1px solid rgba(59,130,246,.1)}:host ::ng-deep .dark .entity-mapping-card .cide-card-header{background:linear-gradient(135deg,#3b82f61a,#9333ea1a);border-bottom:1px solid rgba(59,130,246,.2)}:host ::ng-deep .entity-mapping-card .cide-card-header-content{font-weight:600}:host ::ng-deep .entity-mapping-card .cide-card-body{background:linear-gradient(180deg,#f9fafb80,#ffffff80)}:host ::ng-deep .dark .entity-mapping-card .cide-card-body{background:linear-gradient(180deg,#11182780,#1f293780)}\n"] }]
-        }], ctorParameters: () => [] });
+                    ], template: "<!-- \n  ENTERPRISE USER MASTER FORM\n  \n  Enterprise-Level Styling with Tailwind CSS\n  Features: Responsive grids, proper typography, enhanced user experience\n-->\n\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: pageCode() }\" [breadcrumb_data]=\"breadcrumbData()\">\n  <div class=\"tw-w-full tw-h-full tw-p-1 tw-pt-2\">\n    <!-- Toast Notifications -->\n    <cide-ele-toast-notification></cide-ele-toast-notification>\n    \n    <form class=\"tw-max-w-7xl tw-mx-auto tw-bg-transparent\" [formGroup]=\"userMasterForm\" [class.tw-opacity-60]=\"loading()\"\n      (ngSubmit)=\"onSubmit()\">\n\n\n    <!-- User Context Header -->\n    <div\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\">\n      <div class=\"tw-flex tw-items-center tw-justify-between tw-flex-wrap tw-gap-2\">\n        <!-- User Basic Info Display -->\n        <div class=\"tw-flex tw-items-center tw-gap-3 tw-flex-wrap\">\n          <!-- Profile Photo Preview -->\n          <div class=\"tw-flex tw-items-center tw-gap-2\">\n            <div\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\">\n              @if (userMasterForm.get('user_photo_id_cyfm')?.value) {\n              <img cideEleFileImage [fileId]=\"userMasterForm.get('user_photo_id_cyfm')?.value\"\n                [altText]=\"'Profile Photo'\" class=\"tw-w-full tw-h-full tw-object-cover\">\n              } @else {\n              <cide-ele-icon name=\"person\" class=\"tw-w-5 tw-h-5 tw-text-blue-600\">\n              </cide-ele-icon>\n              }\n            </div>\n            <div class=\"tw-flex tw-flex-col\">\n              <span class=\"tw-text-xs tw-font-medium tw-text-blue-900\">\n                {{ getUserFullName() || 'New User' }}\n              </span>\n              <span class=\"tw-text-xs tw-text-blue-600\">\n                {{ getUserUsername() || 'Username not set' }}\n              </span>\n            </div>\n          </div>\n\n          <!-- Contact Info -->\n          <div class=\"tw-flex tw-items-center tw-gap-3\">\n            <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-xs tw-text-gray-700\">\n              <cide-ele-icon variant=\"gray\" size=\"xs\">email</cide-ele-icon>\n              <span>{{ getUserEmail() || 'Email not set' }}</span>\n            </div>\n            <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-xs tw-text-gray-700\">\n              <cide-ele-icon variant=\"gray\" size=\"xs\">phone</cide-ele-icon>\n              <span>{{ getUserMobile() || 'Mobile not set' }}</span>\n            </div>\n          </div>\n\n          <!-- Active Status -->\n          <div class=\"tw-flex tw-items-center tw-gap-1\">\n            @if (getUserActiveStatus()) {\n            <span\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\">\n              <cide-ele-icon variant=\"green\" size=\"xs\" class=\"tw-mr-1\">check_circle</cide-ele-icon>\n              Active\n            </span>\n            } @else {\n            <span\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\">\n              <cide-ele-icon variant=\"red\" size=\"xs\" class=\"tw-mr-1\">cancel</cide-ele-icon>\n              Inactive\n            </span>\n            }\n          </div>\n        </div>\n\n        <!-- Entity Info -->\n        <div class=\"tw-flex tw-items-center tw-gap-2\">\n          @if (hasDefaultEntity()) {\n          <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-xs tw-text-blue-700\">\n            <cide-ele-icon variant=\"blue\" size=\"xs\">business</cide-ele-icon>\n            <span class=\"tw-font-medium\">{{ getDefaultEntityName() }}</span>\n          </div>\n          } @else {\n          <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-xs tw-text-gray-500\">\n            <cide-ele-icon variant=\"gray\" size=\"xs\">business</cide-ele-icon>\n            <span class=\"tw-italic\">No entity</span>\n          </div>\n          }\n\n          <span class=\"tw-text-xs tw-text-gray-600 tw-px-2 tw-py-1 tw-bg-gray-100 tw-rounded\">\n            {{ getEntityMappingCount() }} mapping(s)\n          </span>\n        </div>\n      </div>\n    </div>\n\n    <!-- Tab Navigation -->\n    <div class=\"tw-p-0 tw-mb-2 tw-border-b tw-border-gray-200\">\n      <cide-ele-tab [tabs]=\"userTabs()\" [activeTabId]=\"activeTab()\" size=\"md\" variant=\"default\"\n        (tabChange)=\"onTabChange($event)\">\n      </cide-ele-tab>\n    </div>\n\n    <!-- Tab Content -->\n    <div class=\"tw-transition-opacity tw-duration-300\" [class.tw-opacity-60]=\"loading()\">\n      @switch (activeTab()) {\n\n      @case ('basic') {\n      <!-- User Basic Information Section -->\n      <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\n\n        <!-- Top Section: Form Fields on Left, Profile Photo on Right -->\n        <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-[1fr_200px] tw-gap-4 tw-mb-4\">\n          <!-- Left Side: Form Fields -->\n          <div class=\"tw-space-y-4\">\n            <!-- Name Fields - All in One Row -->\n            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-4\">\n              <cide-ele-input id=\"user_firstname\" label=\"First Name\" formControlName=\"user_firstname\"\n                placeholder=\"Enter first name\" [maxlength]=\"20\" size=\"md\" (ngModelChange)=\"onNameFieldChange()\">\n              </cide-ele-input>\n\n              <cide-ele-input id=\"user_middlename\" label=\"Middle Name\" formControlName=\"user_middlename\"\n                placeholder=\"Enter middle name\" [maxlength]=\"20\" size=\"md\" (ngModelChange)=\"onNameFieldChange()\">\n              </cide-ele-input>\n\n              <cide-ele-input id=\"user_lastname\" label=\"Last Name\" formControlName=\"user_lastname\"\n                placeholder=\"Enter last name\" [maxlength]=\"20\" size=\"md\" (ngModelChange)=\"onNameFieldChange()\">\n              </cide-ele-input>\n\n              <cide-ele-input id=\"user_fullname\" label=\"Full Name (Auto-generated)\" formControlName=\"user_fullname\"\n                placeholder=\"Auto-generated from name fields or enter manually\" [maxlength]=\"62\" size=\"md\">\n              </cide-ele-input>\n            </div>\n\n            <!-- Contact Information - All in One Row -->\n            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-3 tw-gap-4\">\n              <cide-ele-input id=\"user_username\" label=\"Username\" formControlName=\"user_username\"\n                placeholder=\"Enter unique username\" [maxlength]=\"20\" size=\"md\">\n              </cide-ele-input>\n\n              <cide-ele-input id=\"user_emailid\" label=\"Email ID\" formControlName=\"user_emailid\" type=\"email\"\n                placeholder=\"Enter valid email address\" [maxlength]=\"320\" size=\"md\">\n              </cide-ele-input>\n\n              <cide-ele-input id=\"user_mobileno\" label=\"Mobile Number\" formControlName=\"user_mobileno\" type=\"tel\"\n                placeholder=\"Enter mobile number\" [maxlength]=\"15\" size=\"md\">\n              </cide-ele-input>\n            </div>\n\n            <!-- User Type Mapping -->\n            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\n              <cide-ele-select\n                id=\"syutm_user_type\"\n                label=\"User Type\"\n                placeholder=\"Select user type\"\n                [options]=\"userTypeOptions\"\n                valueKey=\"value\"\n                labelKey=\"label\"\n                formControlName=\"syutm_user_type\"\n                size=\"md\">\n              </cide-ele-select>\n\n              <cide-ele-input\n                id=\"syutm_type_specific_id\"\n                label=\"Type-Specific ID\"\n                placeholder=\"Enter type-specific ID (e.g., STU001, TCH001)\"\n                formControlName=\"syutm_type_specific_id\"\n                [maxlength]=\"50\"\n                size=\"md\">\n              </cide-ele-input>\n            </div>\n          </div>\n\n          <!-- Right Side: Profile Photo Upload -->\n          <div class=\"tw-flex tw-items-start tw-justify-center tw-p-0\">\n            <cide-ele-file-input id=\"user_photo_id_cyfm\" formControlName=\"user_photo_id_cyfm\" accept=\"image/*\"\n              [showPreview]=\"true\" [previewBoxMode]=\"true\" [showFileName]=\"false\" previewWidth=\"180px\"\n              previewHeight=\"120px\" placeholderText=\"Upload Photo\" placeholderIcon=\"cloud_upload\" [autoUpload]=\"true\"\n              [uploadData]=\"getProfilePhotoUploadData()\" (uploadSuccess)=\"onProfilePhotoUploadSuccess($event)\"\n              (uploadError)=\"onProfilePhotoUploadError($event)\"\n              (uploadProgressChange)=\"onProfilePhotoUploadProgress($event)\">\n            </cide-ele-file-input>\n          </div>\n        </div>\n\n\n\n        <!-- Status Control -->\n        <div class=\"tw-grid tw-grid-cols-1 tw-mb-2\">\n          <div class=\"tw-p-2 tw-bg-blue-50 tw-border tw-border-blue-100 tw-rounded-lg\">\n            <label\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\">\n              <cide-ele-input type=\"checkbox\" label=\"Active User Status\" formControlName=\"user_isactive\"\n                class=\"tw-h-5 tw-accent-blue-500 tw-rounded tw-mb-1\" />\n              <span class=\"tw-font-semibold tw-text-gray-700 tw-text-base\"></span>\n              <span class=\"tw-text-sm tw-text-gray-600 tw-mt-1 tw-leading-relaxed\">Enable this user account for system\n                access and operations</span>\n            </label>\n          </div>\n        </div>\n      </div>\n      }\n\n      @case ('auth') {\n      <!-- Authentication Section -->\n      <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\n        <!-- Password Fields -->\n        @if (shouldShowPasswordFields()) {\n        <div class=\"tw-mb-4\">\n          <!-- Password Fields Header for Edit Mode -->\n          @if (isEditMode()) {\n          <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\n            <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-800\">Update Password</h6>\n            <button type=\"button\"\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\"\n              (click)=\"cancelPasswordUpdate()\">\n              Cancel Password Update\n            </button>\n          </div>\n          }\n\n          <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-2 md:tw-grid-cols-1 tw-gap-6\">\n            <cide-ele-input id=\"user_password\" [label]=\"getPasswordFieldLabel()\" formControlName=\"user_password\"\n              type=\"password\" placeholder=\"Enter secure password (min 8 characters)\" size=\"md\">\n            </cide-ele-input>\n\n            <cide-ele-input id=\"user_confirm_password\" [label]=\"getPasswordConfirmLabel()\"\n              formControlName=\"user_confirm_password\" type=\"password\" placeholder=\"Confirm your password\" size=\"md\">\n            </cide-ele-input>\n          </div>\n        </div>\n        }\n\n        <!-- Password Update Option for Edit Mode -->\n        @if (isEditMode() && !shouldShowPasswordFields()) {\n        <div class=\"tw-mb-4\">\n          <div class=\"tw-p-2 tw-bg-blue-50 tw-border tw-border-blue-200 tw-rounded-lg\">\n            <h6 class=\"tw-text-sm tw-font-semibold tw-text-blue-800 tw-mb-2\">Password Update</h6>\n            <p class=\"tw-text-sm tw-text-blue-600 tw-mb-3\">Current password will be kept. Click below to change\n              password.</p>\n\n            @if (hasPasswordInput()) {\n            <div\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\">\n              <cide-ele-icon variant=\"yellow\" size=\"xs\" class=\"tw-mr-1\">warning</cide-ele-icon>\n              Password fields contain text. Click \"Change Password\" to manage existing input.\n            </div>\n            }\n\n            <button type=\"button\"\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\"\n              (click)=\"triggerPasswordUpdate()\">\n              @if (hasPasswordInput()) {\n              Manage Password Fields\n              } @else {\n              Change Password\n              }\n            </button>\n          </div>\n        </div>\n        }\n\n        <!-- Password Options -->\n        <div class=\"tw-grid tw-grid-cols-1 tw-gap-4 tw-mb-4\">\n          <div class=\"tw-p-2 tw-bg-yellow-50 tw-border tw-border-yellow-100 tw-rounded-lg\">\n            <label\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\">\n              <cide-ele-input type=\"checkbox\" label=\"Force Password Change on Login\"\n                formControlName=\"user_passwordchangeonlogin\" class=\"tw-h-5 tw-accent-yellow-500 tw-rounded tw-mb-1\" />\n              <span class=\"tw-text-sm tw-text-gray-600 tw-mt-1 tw-leading-relaxed\">User will be required to change\n                password on next login</span>\n            </label>\n          </div>\n        </div>\n\n      </div>\n      }\n\n      @case ('roles') {\n      <!-- Entity, Roles & Permissions Mapping Section -->\n      <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\n\n\n\n        <!-- Important Note -->\n        <div class=\"tw-bg-amber-50 tw-border tw-border-amber-200 tw-rounded-lg tw-p-2 tw-mb-4\">\n          <div class=\"tw-flex tw-items-start tw-gap-3\">\n            <cide-ele-icon variant=\"amber\" size=\"lg\">info</cide-ele-icon>\n            <div class=\"tw-flex-1\">\n              <h4 class=\"tw-text-sm tw-font-semibold tw-text-amber-800 tw-mb-1\">Entity-Role Based Access</h4>\n              <p class=\"tw-text-sm tw-text-amber-700 tw-mb-2\">User access is completely managed through entity-role\n                mappings below. At least one entity mapping is required for user access.</p>\n              @if (hasDefaultEntity()) {\n              <div class=\"tw-flex tw-items-center tw-gap-2 tw-mt-2 tw-p-2 tw-bg-amber-100 tw-rounded\">\n                <cide-ele-icon variant=\"amber\" size=\"sm\">star</cide-ele-icon>\n                <span class=\"tw-text-sm tw-text-amber-800\">\n                  <strong>Default Entity:</strong> {{ getDefaultEntityName() }}\n                </span>\n              </div>\n              } @else {\n              <div class=\"tw-text-sm tw-text-amber-600 tw-mt-2 tw-italic\">\n                \u26A0\uFE0F No default entity selected. Please set one entity as default.\n              </div>\n              }\n            </div>\n          </div>\n        </div>\n\n        <!-- Entity-Role Mapping Section -->\n        <div class=\"tw-flex tw-text-center tw-justify-between tw-items-center tw-mb-4\">\n          <div>\n            <h4 class=\"tw-text-sm tw-text-left tw-font-semibold tw-text-blue-900 tw-mb-1\">Entity-Role Mapping</h4>\n            <p class=\"tw-text-sm tw-text-blue-700\">Map user to entities with specific roles and permissions</p>\n          </div>\n          <div class=\"tw-flex tw-flex-col tw-items-end\">\n            <button cideEleButton variant=\"primary\" size=\"md\" type=\"button\" (click)=\"addEntityMapping()\"\n              leftIcon=\"add\" [disabled]=\"isViewingOwnProfile() || isAllEntitiesMapped()\"\n              [title]=\"isViewingOwnProfile() ? 'You cannot modify your own entity mappings' : (isAllEntitiesMapped() ? 'All entities are mapped' : 'Add Entity Mapping')\">\n              Add Entity Mapping\n            </button>\n\n            @if (isViewingOwnProfile()) {\n            <div class=\"tw-mt-2 tw-p-2 tw-bg-amber-50 tw-border tw-border-amber-200 tw-rounded-md tw-max-w-xs\">\n              <p class=\"tw-text-xs tw-text-amber-700\">\n                <cide-ele-icon variant=\"warning\" size=\"xs\" class=\"tw-mr-1\">lock</cide-ele-icon>\n                You cannot modify your own entity mappings.\n              </p>\n            </div>\n            } @else if (isAllEntitiesMapped()) {\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\">\n              <p class=\"tw-text-xs tw-text-blue-700\">\n                <cide-ele-icon variant=\"info\" size=\"xs\" class=\"tw-mr-1\">info</cide-ele-icon>\n                All available entities are already mapped.\n              </p>\n            </div>\n            }\n          </div>\n        </div>\n\n        <div formArrayName=\"core_entity_mapping\">\n            @for (mapping of entityMappings(); track mapping.syenm_entity_id_syen?._id || mapping.syenm_entity_id_syen || $index; let i = $index) {\n            <cide-ele-card\n              [title]=\"getEntityNameFromMapping(i) || 'Entity Mapping ' + (i + 1)\"\n              [subtitle]=\"mapping.syenm_isdefault ? 'Primary Entity' : ''\"\n              [cardConfig]=\"{\n                collapsible: true,\n                minimizable: false,\n                maximizable: false,\n                removable: !mapping?._id && !isViewingOwnProfile(),\n                defaultState: 'collapsed',\n                showHeader: true,\n                showFooter: false,\n                variant: 'default',\n                size: 'sm',\n                shadow: true,\n                rounded: true,\n                bordered: true\n              }\"\n              (stateChange)=\"onEntityMappingCardStateChange($event, i)\"\n              (removed)=\"removeEntityMapping(i)\"\n              class=\"tw-mb-2 entity-mapping-card tw-block\">\n              \n              <div [formGroupName]=\"i\">\n              \n              <!-- Card Content -->\n              <div class=\"tw-space-y-3\">\n                <!-- Hidden form control to maintain form structure for entity -->\n                <input type=\"hidden\" [formControlName]=\"'syenm_entity_id_syen'\" />\n                \n                <!-- Role, Default, Active, and User Type in One Row -->\n                <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-4 tw-gap-3\">\n                  <!-- Role Selection with Copy Button -->\n                  <div class=\"tw-flex tw-flex-col\">\n                    <cide-ele-select label=\"Role for this Entity\" [options]=\"getRoleOptionsForEntity(i)\"\n                      formControlName=\"syenm_role_id_syusrol\" valueKey=\"_id\" labelKey=\"syusrol_role_name\"\n                      placeholder=\"Select role for this entity\" size=\"md\" (change)=\"onRoleChange(i, $event)\">\n                    </cide-ele-select>\n                    @if (!isViewingOwnProfile() && entityMappings().length > 1) {\n                      <button \n                        type=\"button\"\n                        (click)=\"showCopyRoleFromEntityDrawer(i)\"\n                        class=\"tw-mt-1 tw-text-xs tw-text-blue-600 hover:tw-text-blue-800 tw-flex tw-items-center tw-gap-1 tw-w-fit tw-transition-colors\"\n                        title=\"Copy role and settings from another entity mapping\">\n                        <cide-ele-icon variant=\"blue\" size=\"xs\">content_copy</cide-ele-icon>\n                        <span>Copy from Entity</span>\n                      </button>\n                    }\n                  </div>\n                  \n                  <!-- Primary Entity Checkbox -->\n                  <div class=\"tw-flex tw-flex-col tw-justify-end\">\n                    <div class=\"tw-flex tw-items-center tw-gap-2 tw-px-3 tw-py-2 tw-rounded-md tw-border tw-border-green-300 tw-bg-green-50 dark:tw-bg-green-900/30 dark:tw-border-green-700\" (click)=\"$event.stopPropagation()\">\n                      <input \n                        type=\"checkbox\" \n                        [checked]=\"mapping.syenm_isdefault\"\n                        (change)=\"onDefaultEntityChange(i, $event)\" \n                        class=\"tw-h-4 tw-w-4 tw-accent-green-600 tw-cursor-pointer\" />\n                      <label class=\"tw-inline-flex tw-items-center tw-gap-1 tw-text-xs tw-font-semibold tw-text-green-700 dark:tw-text-green-300 tw-cursor-pointer\">\n                        <cide-ele-icon variant=\"green\" size=\"xs\" class=\"!tw-text-green-600 dark:!tw-text-green-400\">star</cide-ele-icon>\n                        DEFAULT\n                      </label>\n                    </div>\n                  </div>\n                  \n                  <!-- Active Mapping Checkbox -->\n                  <div class=\"tw-flex tw-flex-col tw-justify-end\">\n                    <div class=\"tw-flex tw-items-center tw-gap-2 tw-px-3 tw-py-2 tw-rounded-md tw-border tw-border-blue-300 tw-bg-blue-50 dark:tw-bg-blue-900/30 dark:tw-border-blue-700\" (click)=\"$event.stopPropagation()\">\n                      <input \n                        type=\"checkbox\" \n                        [checked]=\"mapping.syenm_isactive\"\n                        (change)=\"onActiveMappingChange(i, $event)\" \n                        class=\"tw-h-4 tw-w-4 tw-accent-blue-600 tw-cursor-pointer\" />\n                      <label class=\"tw-inline-flex tw-items-center tw-gap-1 tw-text-xs tw-font-semibold tw-text-blue-700 dark:tw-text-blue-300 tw-cursor-pointer\">\n                        <cide-ele-icon variant=\"blue\" size=\"xs\" class=\"!tw-text-blue-600 dark:!tw-text-blue-400\">check_circle</cide-ele-icon>\n                        Active\n                      </label>\n                    </div>\n                  </div>\n                  \n                  <!-- User Type Mappings -->\n                  <div class=\"tw-flex tw-flex-col tw-justify-end\">\n                    <div class=\"tw-flex tw-items-center tw-gap-1.5 tw-flex-wrap\">\n                      @if (getEntityIdFromMapping(i)) {\n                        @if (getUserTypeMappingsForEntity(getEntityIdFromMapping(i)).length > 0) {\n                          @for (typeMapping of getUserTypeMappingsForEntity(getEntityIdFromMapping(i)); track typeMapping._id || typeMapping.syutm_type_specific_id) {\n                            <span class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded tw-text-[10px] tw-font-medium tw-bg-purple-50 dark:tw-bg-purple-900/30 tw-text-gray-900 dark:tw-text-gray-100 tw-border tw-border-purple-300 dark:tw-border-purple-700\">\n                              <cide-ele-icon variant=\"purple\" size=\"xs\" class=\"tw-mr-1 !tw-text-purple-600 dark:!tw-text-purple-400\">person</cide-ele-icon>\n                              {{ typeMapping.syutm_user_type }}\n                              @if (typeMapping.syutm_isactive) {\n                                <span class=\"tw-ml-1 tw-w-1.5 tw-h-1.5 tw-rounded-full tw-bg-green-600\"></span>\n                              }\n                            </span>\n                          }\n                        }\n                      }\n                    </div>\n                  </div>\n                </div>\n\n\n                <!-- Entity-Specific Details and Active Period - All in One Row -->\n                <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-3\">\n                  <cide-ele-select label=\"Department for this Entity\" [options]=\"getDepartmentOptionsForEntity(i)\"\n                    formControlName=\"syenm_department_id_sydept\" (change)=\"onDepartmentChange($event)\" valueKey=\"_id\"\n                    labelKey=\"sydept_name\" placeholder=\"Select department\" size=\"md\">\n                  </cide-ele-select>\n\n                  <cide-ele-select label=\"Designation for this Entity\" [options]=\"getDesignationOptionsForEntity(i)\"\n                    valueKey=\"_id\" labelKey=\"sydsg_name\" formControlName=\"syenm_designation_id_sydsg\"\n                    placeholder=\"Select designation\" size=\"md\">\n                  </cide-ele-select>\n\n                  <cide-ele-input label=\"Active From\" [id]=\"'syenm_activefrom['+i+']'\"\n                    formControlName=\"syenm_activefrom\" type=\"date\" size=\"md\">\n                  </cide-ele-input>\n\n                  <cide-ele-input label=\"Active Until\" [id]=\"'syenm_activeupto['+i+']'\"\n                    formControlName=\"syenm_activeupto\" type=\"date\" size=\"md\">\n                  </cide-ele-input>\n                </div>\n\n                <!-- Menu Rights Grid for this Entity-Role -->\n                <div class=\"tw-border-t tw-border-gray-200\">\n\n                  @if (getMenuRightsForMapping(i).length > 0) {\n                  <!-- Menu Rights Tree Grid -->\n\n                  <cide-ele-data-grid [config]=\"getMenuRightsGridConfig(i)\"\n                    [templateRenderers]=\"getMenuRightsTemplateRenderers(i)\"\n                    (gridEvent)=\"onMenuRightsGridEvent($event, i)\" class=\"tw-h-96 tw-w-full\">\n                  </cide-ele-data-grid>\n\n                  } @else {\n                  <div class=\"tw-text-center tw-py-8 tw-bg-gray-50 tw-border tw-border-gray-200 tw-rounded-lg\">\n                    <div class=\"tw-text-gray-400 tw-mb-3\">\n                      <cide-ele-icon variant=\"gray\" size=\"lg\">menu</cide-ele-icon>\n                    </div>\n                    <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-600 tw-mb-2\">No Menu Rights Available</h6>\n                    <p class=\"tw-text-xs tw-text-gray-500 tw-mb-3 tw-text-center\">Select both entity and role to\n                      automatically load\n                      menu rights for this mapping.</p>\n                  </div>\n                  }\n                </div>\n              </div>\n              </div>\n            </cide-ele-card>\n            }\n          </div>\n\n          @if (entityMappings().length === 0) {\n          <div class=\"tw-text-center tw-py-8 tw-bg-white tw-border tw-border-blue-200 tw-rounded-lg\">\n            <div class=\"tw-text-blue-400 tw-mb-3\">\n              <cide-ele-icon variant=\"blue\" size=\"lg\">business</cide-ele-icon>\n            </div>\n            <h4 class=\"tw-text-sm tw-font-medium tw-text-blue-800 tw-mb-2\">No Entity Mappings</h4>\n            <p class=\"tw-text-blue-600 tw-mb-4 tw-text-center\">Add entity mappings to assign specific roles and\n              permissions for different entities.</p>\n            @if (!isViewingOwnProfile()) {\n            <button class=\"tw-mx-auto\" cideEleButton variant=\"primary\" size=\"md\" type=\"button\"\n              (click)=\"addEntityMapping()\" leftIcon=\"add\">\n              Add First Entity Mapping\n            </button>\n            } @else {\n            <p class=\"tw-text-amber-600 tw-text-sm tw-font-medium\">\n              <cide-ele-icon variant=\"warning\" size=\"xs\" class=\"tw-mr-1\">lock</cide-ele-icon>\n              You cannot modify your own entity mappings.\n            </p>\n            }\n          </div>\n          }\n        </div>\n      }\n\n      @case ('addresses') {\n      <!-- Contact Addresses Section -->\n      <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\n        <div class=\"tw-flex tw-justify-end\">\n          <div class=\"tw-flex tw-justify-between tw-items-end tw-mb-2 tw-gap-4\">\n            <button cideEleButton variant=\"primary\" size=\"md\" type=\"button\" (click)=\"addContactAddress()\"\n              leftIcon=\"add\" [disabled]=\"!hasAddContactAddressRights()\">\n              Add New Address\n            </button>\n          </div>\n        </div>\n\n        <div formArrayName=\"core_user_contact_addresses\">\n          @for (address of contactAddresses(); track $index; let i = $index) {\n          <div [formGroupName]=\"i\"\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\">\n            <div\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\">\n              <!-- Use address type as header instead of generic \"Address X\" -->\n              <h4 class=\"tw-m-0 tw-text-gray-700 tw-text-sm tw-font-semibold tw-tracking-tight\">\n                {{ getAddressTypeLabel(i) || ('Address ' + (i + 1)) }}\n              </h4>\n              <div class=\"tw-flex tw-items-center tw-gap-2\">\n                @if (isAddressOwner(i)) {\n                <button cideEleButton variant=\"secondary\" size=\"xs\" type=\"button\" (click)=\"shareAddress(i)\"\n                  leftIcon=\"share\" class=\"tw-text-blue-600 hover:tw-text-blue-700\">\n                  Share\n                </button>\n                }\n                @if (!address?._id) {\n                <button cideEleButton variant=\"danger\" size=\"sm\" type=\"button\" (click)=\"removeContactAddress(i)\"\n                  leftIcon=\"delete\">\n                  Remove\n                </button>\n                }\n              </div>\n            </div>\n            <div class=\"tw-p-4\">\n              <!-- Main Layout: Inputs on Left, Address Textarea on Right -->\n              <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-4 tw-gap-3 tw-mb-3\">\n                \n                <!-- Left Side: Input Fields (3/4 width) -->\n                <div class=\"lg:tw-col-span-3\">\n                  <!-- Row 1: Address Type, Contact Person -->\n                  <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3 tw-mb-3\">\n                    <cide-ele-select label=\"Address Type\" [options]=\"addressTypeOptions()\" id=\"sycad_address_type_id_sygms\"\n                      formControlName=\"sycad_address_type_id_sygms\" placeholder=\"Select type\" size=\"sm\"\n                      valueKey=\"_id\" labelKey=\"sygms_title\" (change)=\"onAddressTypeChange(i)\">\n                    </cide-ele-select>\n\n                    <cide-ele-input label=\"Contact Person\" formControlName=\"sycad_contact_person_name\"\n                      placeholder=\"Enter contact person\" size=\"sm\">\n                    </cide-ele-input>\n                  </div>\n\n                  <!-- Row 2: Postal Code, City, State, Country -->\n                  <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-4 tw-gap-3\">\n                    <cide-ele-select label=\"Postal Code\" [options]=\"addressPostalCodes()[i] || []\"\n                      formControlName=\"sycad_contact_pin_sypin\" placeholder=\"Select postal code\" [searchable]=\"true\"\n                      [loading]=\"addressPostalCodesLoading()[i] || false\" (searchChange)=\"onPostalCodeSearch($event, i)\"\n                      (change)=\"onPostalCodeSelection($event, i)\" size=\"sm\">\n                    </cide-ele-select>\n\n                    <cide-ele-input label=\"City\" formControlName=\"sycad_contact_city_sypin\" placeholder=\"Enter city\"\n                      size=\"sm\">\n                    </cide-ele-input>\n\n                    <cide-ele-input label=\"State\" formControlName=\"sycad_contact_state_sypin\" placeholder=\"Enter state\"\n                      size=\"sm\">\n                    </cide-ele-input>\n\n                    <cide-ele-select label=\"Country\" [options]=\"addressCountries()[i] || []\"\n                      formControlName=\"sycad_contact_country_syctr\" placeholder=\"Select country\" valueKey=\"_id\"\n                      labelKey=\"syctr_country_iso_name\" [searchable]=\"true\" (searchChange)=\"onCountrySearch($event, i)\"\n                      [loading]=\"addressCountriesLoading()[i] || false\" size=\"sm\">\n                    </cide-ele-select>\n                  </div>\n                </div>\n\n                <!-- Right Side: Address Textarea (1/4 width, spans 2 rows) -->\n                <div class=\"lg:tw-col-span-1 lg:tw-row-span-2 tw-flex tw-flex-col\">\n                  <cide-ele-textarea label=\"Complete Address\" formControlName=\"sycad_contact_address\"\n                    placeholder=\"Enter complete address with area, city, and landmarks\" [rows]=\"4\" size=\"sm\"\n                    class=\"tw-h-full\">\n                  </cide-ele-textarea>\n                </div>\n              </div>\n\n              <!-- Contact Details: Primary Phone, Alt Phone, Fax, Primary Email in 4 columns -->\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-4 tw-gap-3 tw-mb-3\">\n                <cide-ele-input label=\"Primary Phone\" formControlName=\"sycad_contact_phone\" type=\"tel\"\n                  placeholder=\"Primary phone\" size=\"sm\">\n                </cide-ele-input>\n\n                <cide-ele-input label=\"Alternate Phone\" formControlName=\"sycad_contact_phone_alt\" type=\"tel\"\n                  placeholder=\"Alternate phone\" size=\"sm\">\n                </cide-ele-input>\n\n                <cide-ele-input label=\"Fax Number\" formControlName=\"sycad_contact_fax\" placeholder=\"Fax number\"\n                  size=\"sm\">\n                </cide-ele-input>\n\n                <cide-ele-input label=\"Primary Email\" formControlName=\"sycad_contact_email\" type=\"email\"\n                  placeholder=\"Primary email\" size=\"sm\">\n                </cide-ele-input>\n              </div>\n\n              <!-- Alternate Email in single row -->\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3\">\n                <cide-ele-input label=\"Alternate Email\" formControlName=\"sycad_contact_email_alt\" type=\"email\"\n                  placeholder=\"Alternate email address\" size=\"sm\">\n                </cide-ele-input>\n              </div>\n            </div>\n          </div>\n          }\n        </div>\n      </div>\n      }\n\n      @case ('documents') {\n      <!-- Documents Section -->\n      <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\n        <div class=\"tw-flex tw-justify-end tw-items-end tw-mb-2 tw-gap-4\">\n          <button cideEleButton variant=\"primary\" size=\"md\" type=\"button\" (click)=\"addDocument()\" leftIcon=\"add\" [disabled]=\"!hasAddDocumentRights()\">\n            Add Document\n          </button>\n        </div>\n        <div formArrayName=\"core_user_documents\">\n          @for (doc of documents(); track $index; let i = $index) {\n          <div [formGroupName]=\"i\"\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\">\n            <div\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\">\n              <h4 class=\"tw-m-0 tw-text-gray-700 tw-text-sm tw-font-semibold tw-tracking-tight\">\n                {{ getDocumentTypeLabel(i) || ('Document ' + (i + 1)) }}\n              </h4>\n              <div class=\"tw-flex tw-gap-2\">\n                @if (doc?._id) {\n                <button cideEleButton variant=\"secondary\" size=\"sm\" type=\"button\" (click)=\"shareDocumentRights(i)\"\n                  leftIcon=\"share\">\n                  Share\n                </button>\n                }\n              </div>\n            </div>\n            <div class=\"tw-p-4\">\n              <!-- Main Layout: Inputs on Left, File Upload on Right -->\n              <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-3 tw-gap-4\">\n                \n                <!-- Left Side: Document Information (2/3 width) -->\n                <div class=\"lg:tw-col-span-2\">\n                  <!-- Row 1: Document Type, Document Number, Name as per Document -->\n                  <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-3 tw-mb-3\">\n                    <cide-ele-select label=\"Document Type\" [options]=\"documentTypeOptions()\"\n                      formControlName=\"syusd_document_type_id_sygms\" placeholder=\"Select type\" size=\"sm\"\n                      valueKey=\"_id\" labelKey=\"sygms_title\" (change)=\"onDocumentTypeChange(i)\">\n                    </cide-ele-select>\n\n                    <cide-ele-input label=\"Document Number\" formControlName=\"syusd_doc_number\"\n                      placeholder=\"Document number\" size=\"sm\">\n                    </cide-ele-input>\n\n                    <cide-ele-input label=\"Name as per Document\" formControlName=\"syusd_doc_name_as_per_doc\"\n                      placeholder=\"Name on document\" size=\"sm\">\n                    </cide-ele-input>\n                  </div>\n\n                  <!-- Row 2: Issue Date, Expiry Date, Photo Group -->\n                  <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-3 tw-mb-3\">\n                    <cide-ele-input label=\"Issue Date\" formControlName=\"syusd_doc_issue_date\"\n                      [id]=\"'syusd_doc_issue_date['+i+']'\" type=\"date\" size=\"sm\">\n                    </cide-ele-input>\n\n                    <cide-ele-input label=\"Expiry Date\" formControlName=\"syusd_doc_expiry_date\"\n                      [id]=\"'syusd_doc_expiry_date['+i+']'\" type=\"date\" size=\"sm\">\n                    </cide-ele-input>\n                  </div>\n\n                  <!-- Row 3: Verification Status, KYC Status -->\n                  <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3\">\n                    <cide-ele-select label=\"Verification Status\" [options]=\"documentVerificationStatusOptions()\"\n                      formControlName=\"syusd_doc_verification_status_id_sygms\" placeholder=\"Select status\"\n                      size=\"sm\" valueKey=\"_id\" labelKey=\"sygms_title\">\n                    </cide-ele-select>\n\n                    <cide-ele-select label=\"KYC Status\" [options]=\"documentKycStatusOptions()\"\n                      formControlName=\"syusd_doc_kyc_status_id_sygms\" placeholder=\"Select KYC status\" size=\"sm\"\n                      valueKey=\"_id\" labelKey=\"sygms_title\">\n                    </cide-ele-select>\n                  </div>\n                </div>\n\n                <!-- Right Side: File Upload (1/3 width) -->\n                <div class=\"lg:tw-col-span-1\">\n                  <div class=\"tw-bg-gray-50 tw-border tw-border-gray-200 tw-rounded-lg tw-p-3 tw-h-full\">\n                    \n                    <!-- File Upload Input -->\n                    <cide-ele-file-input\n                      [id]=\"'document-files-' + i\"\n                      [multiple]=\"true\"\n                      formControlName=\"syusd_photo_group_id_cyfm\"\n                      [accept]=\"'.pdf,.jpg,.jpeg,.png,.doc,.docx'\"\n                      [autoUpload]=\"true\"\n                      [uploadData]=\"getDocumentUploadData(i)\"\n                      (change)=\"onDocumentFilesSelected($event, i)\"\n                      (uploadSuccess)=\"onDocumentUploadSuccess($event, i)\"\n                      (uploadError)=\"onDocumentUploadError($event, i)\"\n                      (uploadProgressChange)=\"onDocumentUploadProgress($event, i)\"\n                      class=\"tw-mb-3\"\n                      size=\"sm\">\n                    </cide-ele-file-input>\n\n                    <!-- Upload Status -->\n                    <!-- Upload status is now handled by the file input component itself -->\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n          }\n        </div>\n      </div>\n      }\n\n      @case ('family') {\n      <!-- Family Details Section - Compact Design -->\n      <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\n        <div class=\"tw-flex tw-justify-end tw-items-end tw-mb-3 tw-gap-4\">\n          <button cideEleButton variant=\"primary\" size=\"sm\" type=\"button\" (click)=\"addFamilyDetail()\" leftIcon=\"add\" [disabled]=\"!hasAddFamilyDetailRights()\">\n            Add Family Member\n          </button>\n        </div>\n\n        <div formArrayName=\"core_user_family_details\">\n          @for (family of familyDetails(); track $index; let i = $index) {\n          <div [formGroupName]=\"i\"\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\">\n            \n            <!-- Compact Header -->\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\">\n              <h4 class=\"tw-m-0 tw-text-gray-700 tw-text-sm tw-font-medium\">Family Member {{ i + 1 }}</h4>\n              <div class=\"tw-flex tw-gap-2\">\n                @if (family?._id) {\n                <button cideEleButton variant=\"secondary\" size=\"xs\" type=\"button\" (click)=\"shareFamilyDetailRights(i)\"\n                  leftIcon=\"share\">\n                  Share\n                </button>\n                }\n                @if (!family?._id) {\n                <button cideEleButton variant=\"danger\" size=\"xs\" type=\"button\" (click)=\"removeFamilyDetail(i)\" leftIcon=\"delete\">\n                  Remove\n                </button>\n                }\n              </div>\n            </div>\n            \n            <!-- Compact Form Content - 3 inputs per row -->\n            <div class=\"tw-p-4\">\n              <!-- Row 1: Name, User, and Combined Relationship/Active Status (33.33% each) -->\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-3 tw-mb-3\">\n                <cide-ele-input label=\"Family Member Name\" formControlName=\"syfdl_family_member_name\"\n                  placeholder=\"Enter family member full name\" size=\"sm\">\n                </cide-ele-input>\n\n                <cide-ele-select label=\"Family Member User\" [options]=\"userOptions(i)\"\n                  formControlName=\"syfdl_family_member_id_user\" placeholder=\"Select family member user\" size=\"sm\"\n                  valueKey=\"_id\" labelKey=\"user_fullname\" [searchable]=\"true\"\n                  [loading]=\"userSearchLoading()[i] || false\" (searchChange)=\"onUserSearchChange($event, i)\"\n                  (change)=\"onUserSelectionChange($event, i)\">\n                </cide-ele-select>\n\n                <!-- Combined Relationship and Active Status (33.33%) -->\n                <div class=\"tw-flex tw-flex-row tw-gap-2 tw-items-end\">\n                  <div class=\"tw-flex-1\">\n                    <cide-ele-select label=\"Relationship\" [options]=\"relationshipOptions()\"\n                      formControlName=\"syfdl_relationship_id_sygms\" placeholder=\"Select relationship\" size=\"sm\"\n                      valueKey=\"_id\" labelKey=\"sygms_title\">\n                    </cide-ele-select>\n                  </div>\n\n                  <div class=\"tw-flex tw-items-center tw-pt-1 tw-flex-shrink-0\">\n                    <cide-ele-input formControlName=\"syfdl_isactive\" type=\"checkbox\" label=\"Active\" size=\"sm\">\n                    </cide-ele-input>\n                  </div>\n                </div>\n              </div>\n\n              <!-- Row 2: Blood Group, DOB, and Phone -->\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\">\n                <cide-ele-select label=\"Blood Group\" [options]=\"bloodGroupOptions()\"\n                  formControlName=\"syfdl_blood_group_sygms\" placeholder=\"Select blood group\" size=\"sm\" valueKey=\"_id\"\n                  labelKey=\"sygms_title\">\n                </cide-ele-select>\n\n                <cide-ele-input label=\"Date of Birth\" formControlName=\"syfdl_family_member_dob\" type=\"date\" size=\"sm\"\n                  [id]=\"'syfdl_family_member_dob['+i+']'\">\n                </cide-ele-input>\n\n                <cide-ele-input label=\"Contact Phone\" formControlName=\"syfdl_contact_phone\" type=\"tel\"\n                  placeholder=\"Enter contact phone\" size=\"sm\">\n                </cide-ele-input>\n              </div>\n\n              <!-- Row 3: Email, Email ID, and Contact Number -->\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\">\n                <cide-ele-input label=\"Contact Email\" formControlName=\"syfdl_contact_email\" type=\"email\"\n                  placeholder=\"Enter contact email\" size=\"sm\">\n                </cide-ele-input>\n\n                <cide-ele-input label=\"Contact Email ID\" formControlName=\"syfdl_contact_email_id\" type=\"email\"\n                  placeholder=\"Enter contact email ID\" size=\"sm\">\n                </cide-ele-input>\n\n                <cide-ele-input label=\"Contact Number\" formControlName=\"syfdl_contact_number\" type=\"tel\"\n                  placeholder=\"Enter contact number\" size=\"sm\">\n                </cide-ele-input>\n              </div>\n\n            </div>\n          </div>\n          }\n        </div>\n      </div>\n      }\n      }\n    </div>\n\n    <!-- Form Actions -->\n    <div\n      class=\"tw-flex tw-justify-between tw-items-center tw-gap-4 tw-py-2 tw-bg-white tw-border-t tw-border-gray-200 tw-sticky tw-bottom-0 tw-z-10\">\n      <!-- Error Display Component -->\n      <div class=\"tw-flex-1\">\n        <cide-form-field-error [formGroup]=\"userMasterForm\"></cide-form-field-error>\n      </div>\n\n      <!-- Action Buttons -->\n      <div class=\"tw-flex tw-gap-4\">\n      <button cideEleButton type=\"button\" variant=\"secondary\" (click)=\"resetForm()\" leftIcon=\"refresh\"\n        [disabled]=\"loading()\">\n        Reset Form\n      </button>\n\n      <button cideEleButton type=\"submit\" variant=\"primary\" [disabled]=\"loading() || userMasterForm.invalid\"\n        [loading]=\"loading()\" leftIcon=\"save\">\n        Save User Master\n      </button>\n      </div>\n    </div>\n  </form>\n</div>\n</cide-lyt-shared-wrapper>\n\n<!-- Template Renderers for Role Permissions Grid -->\n<ng-template #menuDetailsRendererTemplate let-row=\"row\">\n  <div class=\"tw-flex tw-items-center tw-space-x-3 tw-min-w-0\">\n    <!-- Menu Icon -->\n    <div class=\"tw-flex-shrink-0\">\n      @if (row.syme_type === 'module') {\n      <cide-ele-icon class=\"tw-text-blue-600 tw-w-4 tw-h-4\">folder</cide-ele-icon>\n      } @else if (row.syme_type === 'section') {\n      <cide-ele-icon class=\"tw-text-green-600 tw-w-4 tw-h-4\">folder_open</cide-ele-icon>\n      } @else if (row.syme_type === 'menu') {\n      <cide-ele-icon class=\"tw-text-purple-600 tw-w-4 tw-h-4\">menu</cide-ele-icon>\n      } @else {\n      <cide-ele-icon class=\"tw-text-gray-600 tw-w-4 tw-h-4\">description</cide-ele-icon>\n      }\n    </div>\n\n    <!-- Menu Details -->\n    <div class=\"tw-ml-3 tw-min-w-0 tw-flex-1\">\n      <div class=\"tw-flex tw-items-center tw-gap-2\">\n        <div class=\"tw-text-xs tw-font-medium tw-text-gray-900 tw-truncate\" [title]=\"row.syme_title\">\n          {{ row.syme_title || row.menu?.syme_title || row.menu?.syme_menu_name || 'Untitled' }}\n        </div>\n        <!-- Green pill indicator for parent menus with child permissions -->\n        @if (row.syme_type === 'module' || row.syme_type === 'section') {\n        @if (hasChildMenusWithPermissions(row._id)) {\n        <span\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\">\n          Assigned\n        </span>\n        }\n        }\n      </div>\n      @if (row.permission?.sygms_name) {\n      <div class=\"tw-text-xs tw-text-blue-500 tw-truncate\" [title]=\"row.permission?.sygms_name\">\n        {{ row.permission?.sygms_name }}\n      </div>\n      }\n    </div>\n  </div>\n</ng-template>\n\n<!-- Menu Type Renderer Template -->\n<ng-template #menuTypeRendererTemplate let-row=\"row\" let-value=\"value\">\n  <div class=\"tw-flex tw-items-center tw-justify-center\">\n    @if (row.syme_type === 'module') {\n    <span\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\">\n      Module\n    </span>\n    } @else if (row.syme_type === 'section') {\n    <span\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\">\n      Section\n    </span>\n    } @else if (row.syme_type === 'menu') {\n    <span\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\">\n      Menu\n    </span>\n    } @else {\n    <span\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\">\n      {{ row.syme_type || 'Unknown' }}\n    </span>\n    }\n  </div>\n</ng-template>\n\n<!-- Permissions Checkbox Renderer Template -->\n<ng-template #permissionsCheckboxRendererTemplate let-row=\"row\" let-value=\"value\">\n  <div class=\"tw-flex tw-flex-wrap tw-gap-2 tw-max-w-full\">\n    @if (row.syme_type === 'menu' && row?.syme_permissions_id_sygms && row?.syme_permissions_id_sygms.length > 0) {\n    @for (permissionId of row?.syme_permissions_id_sygms || []; track permissionId) {\n    <div class=\"tw-flex tw-items-center tw-space-x-1\">\n      <div class=\"tw-flex tw-items-center tw-space-x-1\">\n        <input type=\"checkbox\" [checked]=\"isPermissionSelected(row._id, permissionId)\" [disabled]=\"true\"\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\">\n        <label class=\"tw-text-xs tw-text-gray-700\">\n          {{ getPermissionById(permissionId)?.sygms_title || 'Unknown' }}\n        </label>\n      </div>\n    </div>\n    }\n    } @else {\n    <!-- Show green checkmark for parent menus with child permissions -->\n    @if (row.syme_type === 'module' || row.syme_type === 'section' || row.syme_type === 'title') {\n    @if (hasChildMenusWithPermissions(row._id)) {\n    <div class=\"tw-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-bg-green-100 tw-rounded-full\">\n      <cide-ele-icon class=\"tw-text-green-600\" size=\"xs\">\n        check\n      </cide-ele-icon>\n    </div>\n    } @else {\n    <span class=\"tw-text-xs tw-text-gray-400\">N/A</span>\n    }\n    } @else {\n    <span class=\"tw-text-xs tw-text-gray-400\">N/A</span>\n    }\n    }\n  </div>\n</ng-template>\n\n<!-- Menu Rights Permissions Renderer Template -->\n<ng-template #menuRightsPermissionsRendererTemplate let-row=\"row\" let-value=\"value\">\n  <div class=\"tw-flex tw-flex-wrap tw-gap-2 tw-max-w-full\">\n    <!-- Role Rights Display -->\n    @if (row.role_rights && row.role_rights.length > 0) {\n    <div class=\"tw-mb-2\">\n      <div class=\"tw-text-xs tw-text-gray-500 tw-mb-1\">Role Rights:</div>\n      <div class=\"tw-flex tw-flex-wrap tw-gap-1\">\n        @for (right of row.role_rights; track $index) {\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\">\n          {{ right }}\n        </span>\n        }\n      </div>\n    </div>\n    }\n\n\n    <!-- Exception Indicator -->\n    @if (row.hasException) {\n    <div class=\"tw-mt-2\">\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\">\n        Override\n      </span>\n    </div>\n    } @else {\n    <div class=\"tw-mt-2\">\n      <span class=\"tw-text-xs tw-text-gray-400\">Default</span>\n    </div>\n    }\n  </div>\n</ng-template>\n\n<!-- Permissions Renderer Template -->\n<ng-template #permissionsRendererTemplate let-row=\"row\" let-value=\"value\">\n  <div class=\"tw-flex tw-flex-wrap tw-gap-2 tw-max-w-full\">\n    @if (row._permissionValues && Object.keys(row._permissionValues).length > 0) {\n    @for (permissionId of Object.keys(row._permissionValues); track permissionId) {\n    <div class=\"tw-flex tw-items-center tw-space-x-2\">\n      <cide-ele-input type=\"checkbox\" [ngModel]=\"row._permissionValues[permissionId].checked\"\n        (ngModelChange)=\"onPermissionChangeSafe($event, row, permissionId)\"\n        [id]=\"'permission-' + row._id + '-' + permissionId\" class=\"tw-h-4 tw-w-4\">\n      </cide-ele-input>\n      <label [for]=\"'permission-' + row._id + '-' + permissionId\" \n        class=\"tw-text-xs tw-cursor-pointer\"\n        [ngClass]=\"{\n          'tw-text-gray-700': row._permissionValues[permissionId].modified === row._permissionValues[permissionId].actual,\n          'tw-text-blue-600 tw-font-semibold': row._permissionValues[permissionId].modified !== row._permissionValues[permissionId].actual\n        }\">\n        {{ row._permissionValues[permissionId].permission?.sygms_title }}\n        @if (row._permissionValues[permissionId].modified !== row._permissionValues[permissionId].actual) {\n        <span class=\"tw-text-xs tw-text-orange-500 tw-ml-1\" title=\"Modified from role permission\">\n          ({{ row._permissionValues[permissionId].actual ? '\u2713' : '\u2717' }})\n        </span>\n        }\n      </label>\n    </div>\n    }\n    } @else {\n    <!-- No permissions to display - show N/A (permissions are already loaded, just empty) -->\n    <span class=\"tw-text-xs tw-text-gray-400\">N/A</span>\n    }\n  </div>\n</ng-template>", styles: [":host ::ng-deep .entity-mapping-card{transition:all .2s ease}:host ::ng-deep .entity-mapping-card:hover{transform:translateY(-2px)}:host ::ng-deep .entity-mapping-card .cide-card-header{background:linear-gradient(135deg,#3b82f60d,#9333ea0d);border-bottom:1px solid rgba(59,130,246,.1)}:host ::ng-deep .dark .entity-mapping-card .cide-card-header{background:linear-gradient(135deg,#3b82f61a,#9333ea1a);border-bottom:1px solid rgba(59,130,246,.2)}:host ::ng-deep .entity-mapping-card .cide-card-header-content{font-weight:600}:host ::ng-deep .entity-mapping-card .cide-card-body{background:linear-gradient(180deg,#f9fafb80,#ffffff80)}:host ::ng-deep .dark .entity-mapping-card .cide-card-body{background:linear-gradient(180deg,#11182780,#1f293780)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { menuDetailsRendererTemplate: [{ type: i0.ViewChild, args: ['menuDetailsRendererTemplate', { isSignal: true }] }], permissionsCheckboxRendererTemplate: [{ type: i0.ViewChild, args: ['permissionsCheckboxRendererTemplate', { isSignal: true }] }], menuTypeRendererTemplate: [{ type: i0.ViewChild, args: ['menuTypeRendererTemplate', { isSignal: true }] }], menuRightsPermissionsRendererTemplate: [{ type: i0.ViewChild, args: ['menuRightsPermissionsRendererTemplate', { isSignal: true }] }], permissionsRendererTemplate: [{ type: i0.ViewChild, args: ['permissionsRendererTemplate', { isSignal: true }] }] } });
 
 var userCreate_component = /*#__PURE__*/Object.freeze({
     __proto__: null,
@@ -16899,13 +17401,40 @@ class CideCoreUserListComponent {
         console.log('🔧 USER MASTER LIST: Component initializing');
         // Initialize rights for user management
         this.rightsService.initializeRights(this.pageCode());
+        // Check query params for filtering by user type (from faculty/student list)
+        this.route.queryParams.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(params => {
+            const userTypeParam = params['userType'] || params['filterType'];
+            if (userTypeParam) {
+                const resolvedType = userTypeParam.toString().trim().toUpperCase();
+                // Map common variations
+                if (resolvedType === 'FACULTY' || resolvedType === 'TEACHER') {
+                    this.userType.set('TEACHER');
+                }
+                else if (resolvedType === 'STUDENT') {
+                    this.userType.set('STUDENT');
+                }
+                else {
+                    this.userType.set(resolvedType);
+                }
+                console.log('👤 User type filter set from query params:', this.userType());
+            }
+        });
         // Pick up user type and page config from route data/cache (shared wrapper already loaded page API)
         this.route.data.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(data => {
             const routeUserType = data['userType'] || this.route.snapshot.queryParamMap.get('userType');
             const resolvedType = (routeUserType || '').toString().trim().toUpperCase();
-            if (resolvedType) {
-                this.userType.set(resolvedType);
-                console.log('👤 User type set to:', resolvedType);
+            if (resolvedType && !this.userType()) {
+                // Only set if not already set from query params
+                if (resolvedType === 'FACULTY' || resolvedType === 'TEACHER') {
+                    this.userType.set('TEACHER');
+                }
+                else if (resolvedType === 'STUDENT') {
+                    this.userType.set('STUDENT');
+                }
+                else {
+                    this.userType.set(resolvedType);
+                }
+                console.log('👤 User type set from route data:', this.userType());
             }
             const codeFromRoute = data['page']?.sypg_page_code || data['sypg_page_code'];
             const codeFromQuery = this.route.snapshot.queryParamMap.get('sypg_page_code');
@@ -17362,10 +17891,10 @@ class CideCoreUserListComponent {
                 break;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCoreUserListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideCoreUserListComponent, isStandalone: true, selector: "cide-core-user-list", viewQueries: [{ propertyName: "gridComponent", first: true, predicate: CideEleDataGridComponent, descendants: true }, { propertyName: "actionsTemplate", first: true, predicate: ["actionsTemplate"], descendants: true, static: true }, { propertyName: "userDetailsTemplate", first: true, predicate: ["userDetailsTemplate"], descendants: true, static: true }, { propertyName: "contactInfoTemplate", first: true, predicate: ["contactInfoTemplate"], descendants: true, static: true }, { propertyName: "organizationTemplate", first: true, predicate: ["organizationTemplate"], descendants: true, static: true }, { propertyName: "validityTemplate", first: true, predicate: ["validityTemplate"], descendants: true, static: true }, { propertyName: "statusTemplate", first: true, predicate: ["statusTemplate"], descendants: true, static: true }], ngImport: i0, template: "<!-- User List with Shared Wrapper -->\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'auth_user_mst' }\">\n<div class=\"user-master-listing-container tw-bg-white tw-shadow-lg tw-rounded-lg tw-table tw-h-full\">\n\n  <!-- Header Section with Filters -->\n  <div class=\"tw-table-row tw-h-0\">\n    <div class=\"tw-px-6 tw-py-4 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\n      <div\n        class=\"tw-flex tw-flex-col sm:tw-flex-row tw-justify-between tw-items-start sm:tw-items-center tw-space-y-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\">people</cide-ele-icon>\n          <div>\n            <h5 class=\"tw-text-sm tw-font-semibold tw-text-gray-900\">\n              {{ pageTitle() || ' ' }}\n            </h5>\n            <p class=\"tw-text-sm tw-text-gray-600\">\n              {{ pageSubtitle() || '' }}\n            </p>\n          </div>\n        </div>\n\n        <!-- Actions -->\n        <div class=\"tw-flex tw-items-center tw-space-x-3\">\n          <!-- Add User Button -->\n          <button cideEleButton variant=\"primary\" size=\"sm\" (click)=\"onAddUser()\"\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 User\n          </button>\n        </div>\n      </div>\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 class=\"tw-table-row\">\n    <div class=\"tw-table-cell tw-h-full tw-relative\">\n      <div class=\"tw-h-full tw-overflow-auto\">\n        <!-- Data Grid Component -->\n        <cide-ele-data-grid [config]=\"gridConfig()\" [templateRenderers]=\"templateRenderers\"\n          [serverSidePagination]=\"true\" [totalServerItems]=\"totalItems()\" [currentServerPage]=\"currentPage()\"\n          [currentServerPageSize]=\"pageSize()\" (gridEvent)=\"onGridEvent($event)\">\n        </cide-ele-data-grid>\n      </div>\n    </div>\n  </div>\n\n</div>\n\n<!-- Template Definitions for Grid Renderers -->\n\n<!-- User Details Template -->\n<ng-template #userDetailsTemplate let-value let-row=\"row\" let-column=\"column\">\n  <div class=\"tw-flex tw-items-center tw-space-x-3\">\n    <div\n      class=\"tw-flex-shrink-0 tw-w-12 tw-h-12 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        {{ getUserInitials(row.user_firstname, row.user_lastname) }}\n      </span>\n    </div>\n    <div class=\"tw-flex-1 tw-min-w-0\">\n      <p class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-truncate\" [title]=\"row.user_fullname\">\n        {{ row.user_fullname || 'Unknown User' }}\n      </p>\n      <p class=\"tw-text-xs tw-text-blue-600 tw-truncate tw-font-medium\" [title]=\"'Username: ' + row.user_username\">\n        @{{ row.user_username || 'No username' }}\n      </p>\n      <p class=\"tw-text-xs tw-text-gray-400 tw-truncate\" [title]=\"'ID: ' + row._id\">\n        ID: {{ row._id?.substring(0, 8) }}...\n      </p>\n    </div>\n  </div>\n</ng-template>\n\n<!-- Contact Info Template -->\n<ng-template #contactInfoTemplate let-value let-row=\"row\" let-column=\"column\">\n  <div class=\"tw-space-y-1\">\n    <p class=\"tw-text-xs tw-text-gray-900 tw-flex tw-items-center\" [title]=\"'Email: ' + row.user_emailid\">\n      <svg class=\"tw-flex-shrink-0 tw-w-3 tw-h-3 tw-text-gray-400 tw-mr-2\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n        <path d=\"M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z\" />\n        <path d=\"M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z\" />\n      </svg>\n      <span class=\"tw-truncate\">{{ row.user_emailid || 'No email' }}</span>\n    </p>\n    <p class=\"tw-text-xs tw-text-gray-600 tw-flex tw-items-center\" [title]=\"'Mobile: ' + row.user_mobileno\">\n      <svg class=\"tw-flex-shrink-0 tw-w-3 tw-h-3 tw-text-gray-400 tw-mr-2\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n        <path\n          d=\"M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z\" />\n      </svg>\n      <span class=\"tw-truncate\">{{ row.user_mobileno || 'No mobile' }}</span>\n    </p>\n    <p class=\"tw-text-xs tw-text-gray-500 tw-flex tw-items-center\"\n      [title]=\"'Password Change: ' + getPasswordChangeText(row.user_passwordchangeonlogin)\">\n      <svg class=\"tw-flex-shrink-0 tw-w-3 tw-h-3 tw-text-gray-400 tw-mr-2\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n        <path fill-rule=\"evenodd\"\n          d=\"M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z\"\n          clip-rule=\"evenodd\" />\n      </svg>\n      <span class=\"tw-truncate\">{{ getPasswordChangeText(row.user_passwordchangeonlogin) }}</span>\n    </p>\n  </div>\n</ng-template>\n\n\n\n<!-- Validity Template -->\n<ng-template #validityTemplate let-value let-row=\"row\" let-column=\"column\">\n  <div class=\"tw-text-center tw-space-y-1\">\n    <p class=\"tw-text-xs tw-text-gray-900 tw-font-medium\">\n      Validity managed per entity\n    </p>\n    <p class=\"tw-text-xs tw-text-gray-600\">\n      Check entity mappings for details\n    </p>\n  </div>\n</ng-template>\n\n<!-- Status Template -->\n<ng-template #statusTemplate let-value let-row=\"row\" let-column=\"column\">\n  <div class=\"tw-flex tw-justify-center\">\n    @if (row.user_isactive) {\n    <span\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-green-100 tw-text-green-800\">\n      <svg class=\"tw-w-1.5 tw-h-1.5 tw-mr-1\" fill=\"currentColor\" viewBox=\"0 0 8 8\">\n        <circle cx=\"4\" cy=\"4\" r=\"3\" />\n      </svg>\n      Active\n    </span>\n    } @else {\n    <span\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-red-100 tw-text-red-800\">\n      <svg class=\"tw-w-1.5 tw-h-1.5 tw-mr-1\" fill=\"currentColor\" viewBox=\"0 0 8 8\">\n        <circle cx=\"4\" cy=\"4\" r=\"3\" />\n      </svg>\n      Inactive\n    </span>\n    }\n  </div>\n</ng-template>\n\n<!-- Actions Template using cide-ele-dropdown -->\n<ng-template #actionsTemplate let-value let-row=\"row\" let-column=\"column\">\n  <cide-ele-dropdown [items]=\"getDropdownItems(row)\" [config]=\"{  triggerIcon: 'more_vert', triggerSize: 'sm', usePortal: true, minWidth: 200 }\" (itemClick)=\"onDropdownItemClick($event, row)\">\n  </cide-ele-dropdown>\n</ng-template>\n</cide-lyt-shared-wrapper>", styles: [".user-master-listing-container{@apply tw-w-full tw-h-full;}:host{@apply tw-w-full tw-h-full tw-flex tw-flex-col;}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { 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: 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"] }, { kind: "component", type: CideLytSharedWrapperComponent, selector: "cide-lyt-shared-wrapper", inputs: ["shared_wrapper_setup_param", "breadcrumb_data"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideCoreUserListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: CideCoreUserListComponent, isStandalone: true, selector: "cide-core-user-list", viewQueries: [{ propertyName: "gridComponent", first: true, predicate: CideEleDataGridComponent, descendants: true }, { propertyName: "actionsTemplate", first: true, predicate: ["actionsTemplate"], descendants: true, static: true }, { propertyName: "userDetailsTemplate", first: true, predicate: ["userDetailsTemplate"], descendants: true, static: true }, { propertyName: "contactInfoTemplate", first: true, predicate: ["contactInfoTemplate"], descendants: true, static: true }, { propertyName: "organizationTemplate", first: true, predicate: ["organizationTemplate"], descendants: true, static: true }, { propertyName: "validityTemplate", first: true, predicate: ["validityTemplate"], descendants: true, static: true }, { propertyName: "statusTemplate", first: true, predicate: ["statusTemplate"], descendants: true, static: true }], ngImport: i0, template: "<!-- User List with Shared Wrapper -->\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'auth_user_mst' }\">\n  <!-- Breadcrumb Actions -->\n  <div breadcrumb-actions>\n    @if (canCreate()) {\n      <button cideEleButton variant=\"primary\" size=\"sm\" (click)=\"onAddUser()\" leftIcon=\"add\">\n        Add User\n      </button>\n    }\n  </div>\n\n<div class=\"user-master-listing-container tw-bg-white tw-shadow-lg tw-rounded-lg tw-table tw-h-full\">\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 class=\"tw-table-row\">\n    <div class=\"tw-table-cell tw-h-full tw-relative\">\n      <div class=\"tw-h-full tw-overflow-auto\">\n        <!-- Data Grid Component -->\n        <cide-ele-data-grid [config]=\"gridConfig()\" [templateRenderers]=\"templateRenderers\"\n          [serverSidePagination]=\"true\" [totalServerItems]=\"totalItems()\" [currentServerPage]=\"currentPage()\"\n          [currentServerPageSize]=\"pageSize()\" (gridEvent)=\"onGridEvent($event)\">\n        </cide-ele-data-grid>\n      </div>\n    </div>\n  </div>\n\n</div>\n\n<!-- Template Definitions for Grid Renderers -->\n\n<!-- User Details Template -->\n<ng-template #userDetailsTemplate let-value let-row=\"row\" let-column=\"column\">\n  <div class=\"tw-flex tw-items-center tw-space-x-3\">\n    <div\n      class=\"tw-flex-shrink-0 tw-w-12 tw-h-12 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        {{ getUserInitials(row.user_firstname, row.user_lastname) }}\n      </span>\n    </div>\n    <div class=\"tw-flex-1 tw-min-w-0\">\n      <p class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-truncate\" [title]=\"row.user_fullname\">\n        {{ row.user_fullname || 'Unknown User' }}\n      </p>\n      <p class=\"tw-text-xs tw-text-blue-600 tw-truncate tw-font-medium\" [title]=\"'Username: ' + row.user_username\">\n        @{{ row.user_username || 'No username' }}\n      </p>\n      <p class=\"tw-text-xs tw-text-gray-400 tw-truncate\" [title]=\"'ID: ' + row._id\">\n        ID: {{ row._id?.substring(0, 8) }}...\n      </p>\n    </div>\n  </div>\n</ng-template>\n\n<!-- Contact Info Template -->\n<ng-template #contactInfoTemplate let-value let-row=\"row\" let-column=\"column\">\n  <div class=\"tw-space-y-1\">\n    <p class=\"tw-text-xs tw-text-gray-900 tw-flex tw-items-center\" [title]=\"'Email: ' + row.user_emailid\">\n      <svg class=\"tw-flex-shrink-0 tw-w-3 tw-h-3 tw-text-gray-400 tw-mr-2\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n        <path d=\"M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z\" />\n        <path d=\"M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z\" />\n      </svg>\n      <span class=\"tw-truncate\">{{ row.user_emailid || 'No email' }}</span>\n    </p>\n    <p class=\"tw-text-xs tw-text-gray-600 tw-flex tw-items-center\" [title]=\"'Mobile: ' + row.user_mobileno\">\n      <svg class=\"tw-flex-shrink-0 tw-w-3 tw-h-3 tw-text-gray-400 tw-mr-2\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n        <path\n          d=\"M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z\" />\n      </svg>\n      <span class=\"tw-truncate\">{{ row.user_mobileno || 'No mobile' }}</span>\n    </p>\n    <p class=\"tw-text-xs tw-text-gray-500 tw-flex tw-items-center\"\n      [title]=\"'Password Change: ' + getPasswordChangeText(row.user_passwordchangeonlogin)\">\n      <svg class=\"tw-flex-shrink-0 tw-w-3 tw-h-3 tw-text-gray-400 tw-mr-2\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n        <path fill-rule=\"evenodd\"\n          d=\"M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z\"\n          clip-rule=\"evenodd\" />\n      </svg>\n      <span class=\"tw-truncate\">{{ getPasswordChangeText(row.user_passwordchangeonlogin) }}</span>\n    </p>\n  </div>\n</ng-template>\n\n\n\n<!-- Validity Template -->\n<ng-template #validityTemplate let-value let-row=\"row\" let-column=\"column\">\n  <div class=\"tw-text-center tw-space-y-1\">\n    <p class=\"tw-text-xs tw-text-gray-900 tw-font-medium\">\n      Validity managed per entity\n    </p>\n    <p class=\"tw-text-xs tw-text-gray-600\">\n      Check entity mappings for details\n    </p>\n  </div>\n</ng-template>\n\n<!-- Status Template -->\n<ng-template #statusTemplate let-value let-row=\"row\" let-column=\"column\">\n  <div class=\"tw-flex tw-justify-center\">\n    @if (row.user_isactive) {\n    <span\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-green-100 tw-text-green-800\">\n      <svg class=\"tw-w-1.5 tw-h-1.5 tw-mr-1\" fill=\"currentColor\" viewBox=\"0 0 8 8\">\n        <circle cx=\"4\" cy=\"4\" r=\"3\" />\n      </svg>\n      Active\n    </span>\n    } @else {\n    <span\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-red-100 tw-text-red-800\">\n      <svg class=\"tw-w-1.5 tw-h-1.5 tw-mr-1\" fill=\"currentColor\" viewBox=\"0 0 8 8\">\n        <circle cx=\"4\" cy=\"4\" r=\"3\" />\n      </svg>\n      Inactive\n    </span>\n    }\n  </div>\n</ng-template>\n\n<!-- Actions Template using cide-ele-dropdown -->\n<ng-template #actionsTemplate let-value let-row=\"row\" let-column=\"column\">\n  <cide-ele-dropdown [items]=\"getDropdownItems(row)\" [config]=\"{  triggerIcon: 'more_vert', triggerSize: 'sm', usePortal: true, minWidth: 200 }\" (itemClick)=\"onDropdownItemClick($event, row)\">\n  </cide-ele-dropdown>\n</ng-template>\n</cide-lyt-shared-wrapper>", styles: [".user-master-listing-container{@apply tw-w-full tw-h-full;}:host{@apply tw-w-full tw-h-full tw-flex tw-flex-col;}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { 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: 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"] }, { 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: CideCoreUserListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideCoreUserListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cide-core-user-list', standalone: true, imports: [
                         CommonModule,
@@ -17375,7 +17904,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                         CideEleDataGridComponent,
                         CideEleDropdownComponent,
                         CideLytSharedWrapperComponent
-                    ], template: "<!-- User List with Shared Wrapper -->\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'auth_user_mst' }\">\n<div class=\"user-master-listing-container tw-bg-white tw-shadow-lg tw-rounded-lg tw-table tw-h-full\">\n\n  <!-- Header Section with Filters -->\n  <div class=\"tw-table-row tw-h-0\">\n    <div class=\"tw-px-6 tw-py-4 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\n      <div\n        class=\"tw-flex tw-flex-col sm:tw-flex-row tw-justify-between tw-items-start sm:tw-items-center tw-space-y-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\">people</cide-ele-icon>\n          <div>\n            <h5 class=\"tw-text-sm tw-font-semibold tw-text-gray-900\">\n              {{ pageTitle() || ' ' }}\n            </h5>\n            <p class=\"tw-text-sm tw-text-gray-600\">\n              {{ pageSubtitle() || '' }}\n            </p>\n          </div>\n        </div>\n\n        <!-- Actions -->\n        <div class=\"tw-flex tw-items-center tw-space-x-3\">\n          <!-- Add User Button -->\n          <button cideEleButton variant=\"primary\" size=\"sm\" (click)=\"onAddUser()\"\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 User\n          </button>\n        </div>\n      </div>\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 class=\"tw-table-row\">\n    <div class=\"tw-table-cell tw-h-full tw-relative\">\n      <div class=\"tw-h-full tw-overflow-auto\">\n        <!-- Data Grid Component -->\n        <cide-ele-data-grid [config]=\"gridConfig()\" [templateRenderers]=\"templateRenderers\"\n          [serverSidePagination]=\"true\" [totalServerItems]=\"totalItems()\" [currentServerPage]=\"currentPage()\"\n          [currentServerPageSize]=\"pageSize()\" (gridEvent)=\"onGridEvent($event)\">\n        </cide-ele-data-grid>\n      </div>\n    </div>\n  </div>\n\n</div>\n\n<!-- Template Definitions for Grid Renderers -->\n\n<!-- User Details Template -->\n<ng-template #userDetailsTemplate let-value let-row=\"row\" let-column=\"column\">\n  <div class=\"tw-flex tw-items-center tw-space-x-3\">\n    <div\n      class=\"tw-flex-shrink-0 tw-w-12 tw-h-12 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        {{ getUserInitials(row.user_firstname, row.user_lastname) }}\n      </span>\n    </div>\n    <div class=\"tw-flex-1 tw-min-w-0\">\n      <p class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-truncate\" [title]=\"row.user_fullname\">\n        {{ row.user_fullname || 'Unknown User' }}\n      </p>\n      <p class=\"tw-text-xs tw-text-blue-600 tw-truncate tw-font-medium\" [title]=\"'Username: ' + row.user_username\">\n        @{{ row.user_username || 'No username' }}\n      </p>\n      <p class=\"tw-text-xs tw-text-gray-400 tw-truncate\" [title]=\"'ID: ' + row._id\">\n        ID: {{ row._id?.substring(0, 8) }}...\n      </p>\n    </div>\n  </div>\n</ng-template>\n\n<!-- Contact Info Template -->\n<ng-template #contactInfoTemplate let-value let-row=\"row\" let-column=\"column\">\n  <div class=\"tw-space-y-1\">\n    <p class=\"tw-text-xs tw-text-gray-900 tw-flex tw-items-center\" [title]=\"'Email: ' + row.user_emailid\">\n      <svg class=\"tw-flex-shrink-0 tw-w-3 tw-h-3 tw-text-gray-400 tw-mr-2\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n        <path d=\"M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z\" />\n        <path d=\"M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z\" />\n      </svg>\n      <span class=\"tw-truncate\">{{ row.user_emailid || 'No email' }}</span>\n    </p>\n    <p class=\"tw-text-xs tw-text-gray-600 tw-flex tw-items-center\" [title]=\"'Mobile: ' + row.user_mobileno\">\n      <svg class=\"tw-flex-shrink-0 tw-w-3 tw-h-3 tw-text-gray-400 tw-mr-2\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n        <path\n          d=\"M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z\" />\n      </svg>\n      <span class=\"tw-truncate\">{{ row.user_mobileno || 'No mobile' }}</span>\n    </p>\n    <p class=\"tw-text-xs tw-text-gray-500 tw-flex tw-items-center\"\n      [title]=\"'Password Change: ' + getPasswordChangeText(row.user_passwordchangeonlogin)\">\n      <svg class=\"tw-flex-shrink-0 tw-w-3 tw-h-3 tw-text-gray-400 tw-mr-2\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n        <path fill-rule=\"evenodd\"\n          d=\"M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z\"\n          clip-rule=\"evenodd\" />\n      </svg>\n      <span class=\"tw-truncate\">{{ getPasswordChangeText(row.user_passwordchangeonlogin) }}</span>\n    </p>\n  </div>\n</ng-template>\n\n\n\n<!-- Validity Template -->\n<ng-template #validityTemplate let-value let-row=\"row\" let-column=\"column\">\n  <div class=\"tw-text-center tw-space-y-1\">\n    <p class=\"tw-text-xs tw-text-gray-900 tw-font-medium\">\n      Validity managed per entity\n    </p>\n    <p class=\"tw-text-xs tw-text-gray-600\">\n      Check entity mappings for details\n    </p>\n  </div>\n</ng-template>\n\n<!-- Status Template -->\n<ng-template #statusTemplate let-value let-row=\"row\" let-column=\"column\">\n  <div class=\"tw-flex tw-justify-center\">\n    @if (row.user_isactive) {\n    <span\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-green-100 tw-text-green-800\">\n      <svg class=\"tw-w-1.5 tw-h-1.5 tw-mr-1\" fill=\"currentColor\" viewBox=\"0 0 8 8\">\n        <circle cx=\"4\" cy=\"4\" r=\"3\" />\n      </svg>\n      Active\n    </span>\n    } @else {\n    <span\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-red-100 tw-text-red-800\">\n      <svg class=\"tw-w-1.5 tw-h-1.5 tw-mr-1\" fill=\"currentColor\" viewBox=\"0 0 8 8\">\n        <circle cx=\"4\" cy=\"4\" r=\"3\" />\n      </svg>\n      Inactive\n    </span>\n    }\n  </div>\n</ng-template>\n\n<!-- Actions Template using cide-ele-dropdown -->\n<ng-template #actionsTemplate let-value let-row=\"row\" let-column=\"column\">\n  <cide-ele-dropdown [items]=\"getDropdownItems(row)\" [config]=\"{  triggerIcon: 'more_vert', triggerSize: 'sm', usePortal: true, minWidth: 200 }\" (itemClick)=\"onDropdownItemClick($event, row)\">\n  </cide-ele-dropdown>\n</ng-template>\n</cide-lyt-shared-wrapper>", styles: [".user-master-listing-container{@apply tw-w-full tw-h-full;}:host{@apply tw-w-full tw-h-full tw-flex tw-flex-col;}\n"] }]
+                    ], template: "<!-- User List with Shared Wrapper -->\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'auth_user_mst' }\">\n  <!-- Breadcrumb Actions -->\n  <div breadcrumb-actions>\n    @if (canCreate()) {\n      <button cideEleButton variant=\"primary\" size=\"sm\" (click)=\"onAddUser()\" leftIcon=\"add\">\n        Add User\n      </button>\n    }\n  </div>\n\n<div class=\"user-master-listing-container tw-bg-white tw-shadow-lg tw-rounded-lg tw-table tw-h-full\">\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 class=\"tw-table-row\">\n    <div class=\"tw-table-cell tw-h-full tw-relative\">\n      <div class=\"tw-h-full tw-overflow-auto\">\n        <!-- Data Grid Component -->\n        <cide-ele-data-grid [config]=\"gridConfig()\" [templateRenderers]=\"templateRenderers\"\n          [serverSidePagination]=\"true\" [totalServerItems]=\"totalItems()\" [currentServerPage]=\"currentPage()\"\n          [currentServerPageSize]=\"pageSize()\" (gridEvent)=\"onGridEvent($event)\">\n        </cide-ele-data-grid>\n      </div>\n    </div>\n  </div>\n\n</div>\n\n<!-- Template Definitions for Grid Renderers -->\n\n<!-- User Details Template -->\n<ng-template #userDetailsTemplate let-value let-row=\"row\" let-column=\"column\">\n  <div class=\"tw-flex tw-items-center tw-space-x-3\">\n    <div\n      class=\"tw-flex-shrink-0 tw-w-12 tw-h-12 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        {{ getUserInitials(row.user_firstname, row.user_lastname) }}\n      </span>\n    </div>\n    <div class=\"tw-flex-1 tw-min-w-0\">\n      <p class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-truncate\" [title]=\"row.user_fullname\">\n        {{ row.user_fullname || 'Unknown User' }}\n      </p>\n      <p class=\"tw-text-xs tw-text-blue-600 tw-truncate tw-font-medium\" [title]=\"'Username: ' + row.user_username\">\n        @{{ row.user_username || 'No username' }}\n      </p>\n      <p class=\"tw-text-xs tw-text-gray-400 tw-truncate\" [title]=\"'ID: ' + row._id\">\n        ID: {{ row._id?.substring(0, 8) }}...\n      </p>\n    </div>\n  </div>\n</ng-template>\n\n<!-- Contact Info Template -->\n<ng-template #contactInfoTemplate let-value let-row=\"row\" let-column=\"column\">\n  <div class=\"tw-space-y-1\">\n    <p class=\"tw-text-xs tw-text-gray-900 tw-flex tw-items-center\" [title]=\"'Email: ' + row.user_emailid\">\n      <svg class=\"tw-flex-shrink-0 tw-w-3 tw-h-3 tw-text-gray-400 tw-mr-2\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n        <path d=\"M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z\" />\n        <path d=\"M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z\" />\n      </svg>\n      <span class=\"tw-truncate\">{{ row.user_emailid || 'No email' }}</span>\n    </p>\n    <p class=\"tw-text-xs tw-text-gray-600 tw-flex tw-items-center\" [title]=\"'Mobile: ' + row.user_mobileno\">\n      <svg class=\"tw-flex-shrink-0 tw-w-3 tw-h-3 tw-text-gray-400 tw-mr-2\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n        <path\n          d=\"M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z\" />\n      </svg>\n      <span class=\"tw-truncate\">{{ row.user_mobileno || 'No mobile' }}</span>\n    </p>\n    <p class=\"tw-text-xs tw-text-gray-500 tw-flex tw-items-center\"\n      [title]=\"'Password Change: ' + getPasswordChangeText(row.user_passwordchangeonlogin)\">\n      <svg class=\"tw-flex-shrink-0 tw-w-3 tw-h-3 tw-text-gray-400 tw-mr-2\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n        <path fill-rule=\"evenodd\"\n          d=\"M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z\"\n          clip-rule=\"evenodd\" />\n      </svg>\n      <span class=\"tw-truncate\">{{ getPasswordChangeText(row.user_passwordchangeonlogin) }}</span>\n    </p>\n  </div>\n</ng-template>\n\n\n\n<!-- Validity Template -->\n<ng-template #validityTemplate let-value let-row=\"row\" let-column=\"column\">\n  <div class=\"tw-text-center tw-space-y-1\">\n    <p class=\"tw-text-xs tw-text-gray-900 tw-font-medium\">\n      Validity managed per entity\n    </p>\n    <p class=\"tw-text-xs tw-text-gray-600\">\n      Check entity mappings for details\n    </p>\n  </div>\n</ng-template>\n\n<!-- Status Template -->\n<ng-template #statusTemplate let-value let-row=\"row\" let-column=\"column\">\n  <div class=\"tw-flex tw-justify-center\">\n    @if (row.user_isactive) {\n    <span\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-green-100 tw-text-green-800\">\n      <svg class=\"tw-w-1.5 tw-h-1.5 tw-mr-1\" fill=\"currentColor\" viewBox=\"0 0 8 8\">\n        <circle cx=\"4\" cy=\"4\" r=\"3\" />\n      </svg>\n      Active\n    </span>\n    } @else {\n    <span\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-red-100 tw-text-red-800\">\n      <svg class=\"tw-w-1.5 tw-h-1.5 tw-mr-1\" fill=\"currentColor\" viewBox=\"0 0 8 8\">\n        <circle cx=\"4\" cy=\"4\" r=\"3\" />\n      </svg>\n      Inactive\n    </span>\n    }\n  </div>\n</ng-template>\n\n<!-- Actions Template using cide-ele-dropdown -->\n<ng-template #actionsTemplate let-value let-row=\"row\" let-column=\"column\">\n  <cide-ele-dropdown [items]=\"getDropdownItems(row)\" [config]=\"{  triggerIcon: 'more_vert', triggerSize: 'sm', usePortal: true, minWidth: 200 }\" (itemClick)=\"onDropdownItemClick($event, row)\">\n  </cide-ele-dropdown>\n</ng-template>\n</cide-lyt-shared-wrapper>", styles: [".user-master-listing-container{@apply tw-w-full tw-h-full;}:host{@apply tw-w-full tw-h-full tw-flex tw-flex-col;}\n"] }]
         }], ctorParameters: () => [], propDecorators: { gridComponent: [{
                 type: ViewChild,
                 args: [CideEleDataGridComponent]
@@ -17461,8 +17990,8 @@ class CideCoreUserAttributesComponent {
     goBack() {
         this.router.navigate(['/admin/user-master']);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCoreUserAttributesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.7", type: CideCoreUserAttributesComponent, isStandalone: true, selector: "cide-core-user-attributes", ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideCoreUserAttributesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: CideCoreUserAttributesComponent, isStandalone: true, selector: "cide-core-user-attributes", ngImport: i0, template: `
     <div class="p-5">
       <div class="bg-white rounded-lg shadow-md mb-5">
         <div class="p-5 border-b border-gray-200 flex justify-between items-center">
@@ -17596,7 +18125,7 @@ class CideCoreUserAttributesComponent {
     </div>
   `, isInline: true, 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.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.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { 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: "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: CideCoreUserAttributesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideCoreUserAttributesComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'cide-core-user-attributes',
@@ -17803,8 +18332,8 @@ class CideCoreUserContactAddressesComponent {
     goBack() {
         this.router.navigate(['/admin/user-master']);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCoreUserContactAddressesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideCoreUserContactAddressesComponent, isStandalone: true, selector: "cide-core-user-contact-addresses", ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideCoreUserContactAddressesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: CideCoreUserContactAddressesComponent, isStandalone: true, selector: "cide-core-user-contact-addresses", ngImport: i0, template: `
     <div class="p-5">
       <div class="bg-white rounded-lg shadow-md mb-5">
         <div class="p-5 border-b border-gray-200 flex justify-between items-center">
@@ -18057,7 +18586,7 @@ class CideCoreUserContactAddressesComponent {
     </div>
   `, isInline: true, 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.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.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { 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: "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: CideCoreUserContactAddressesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideCoreUserContactAddressesComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'cide-core-user-contact-addresses',
@@ -18379,8 +18908,8 @@ class CideCoreUserDocumentsComponent {
     goBack() {
         this.router.navigate(['/admin/user-master']);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCoreUserDocumentsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.7", type: CideCoreUserDocumentsComponent, isStandalone: true, selector: "cide-core-user-documents", ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideCoreUserDocumentsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: CideCoreUserDocumentsComponent, isStandalone: true, selector: "cide-core-user-documents", ngImport: i0, template: `
     <div class="p-5">
       <div class="bg-white rounded-lg shadow-md mb-5">
         <div class="p-5 border-b border-gray-200 flex justify-between items-center">
@@ -18570,7 +19099,7 @@ class CideCoreUserDocumentsComponent {
     </div>
   `, isInline: true, 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.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.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { 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: "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: CideCoreUserDocumentsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideCoreUserDocumentsComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'cide-core-user-documents',
@@ -18838,8 +19367,8 @@ class CideCoreUserEntityAccessComponent {
     goBack() {
         this.router.navigate(['/admin/user-master']);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCoreUserEntityAccessComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideCoreUserEntityAccessComponent, isStandalone: true, selector: "cide-core-user-entity-access", ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideCoreUserEntityAccessComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: CideCoreUserEntityAccessComponent, isStandalone: true, selector: "cide-core-user-entity-access", ngImport: i0, template: `
     <div class="p-5">
       <div class="bg-white rounded-lg shadow-md mb-5">
         <div class="p-5 border-b border-gray-200 flex justify-between items-center">
@@ -19004,7 +19533,7 @@ class CideCoreUserEntityAccessComponent {
     </div>
   `, isInline: true, 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.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.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { 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"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCoreUserEntityAccessComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideCoreUserEntityAccessComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'cide-core-user-entity-access',
@@ -19236,8 +19765,8 @@ class CideCoreUserFamilyDetailsComponent {
     goBack() {
         this.router.navigate(['/admin/user-master']);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCoreUserFamilyDetailsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.7", type: CideCoreUserFamilyDetailsComponent, isStandalone: true, selector: "cide-core-user-family-details", ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideCoreUserFamilyDetailsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: CideCoreUserFamilyDetailsComponent, isStandalone: true, selector: "cide-core-user-family-details", ngImport: i0, template: `
     <div class="p-5">
       <div class="bg-white rounded-lg shadow-md mb-5">
         <div class="p-5 border-b border-gray-200 flex justify-between items-center">
@@ -19402,7 +19931,7 @@ class CideCoreUserFamilyDetailsComponent {
     </div>
   `, isInline: true, 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.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.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { 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: "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: CideCoreUserFamilyDetailsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideCoreUserFamilyDetailsComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'cide-core-user-family-details',
@@ -19589,7 +20118,6 @@ class CideCoreUserRoleListComponent {
     rightsService = inject(RightsService);
     // Modern ViewChild signals for template renderers (Angular 20 approach)
     userRoleDetailsRendererTemplate = viewChild.required('userRoleDetailsRendererTemplate');
-    entityRendererTemplate = viewChild.required('entityRendererTemplate');
     statusRendererTemplate = viewChild.required('statusRendererTemplate');
     actionsDropdownRendererTemplate = viewChild.required('actionsDropdownRendererTemplate');
     // State management using Angular Signals for server-side operations
@@ -19635,15 +20163,6 @@ class CideCoreUserRoleListComponent {
                 align: 'left',
                 renderer: 'userRoleDetailsRenderer'
             },
-            {
-                key: 'entity',
-                header: 'Entity',
-                type: 'custom',
-                width: '150px',
-                truncate: true,
-                align: 'left',
-                renderer: 'entityRenderer'
-            },
             {
                 key: 'syusrol_isactive',
                 header: 'Status',
@@ -19772,7 +20291,6 @@ class CideCoreUserRoleListComponent {
     // Computed template renderers for grid
     templateRenderers = computed(() => ({
         userRoleDetailsRenderer: this.userRoleDetailsRendererTemplate(),
-        entityRenderer: this.entityRendererTemplate(),
         statusRenderer: this.statusRendererTemplate(),
         actionsDropdownRenderer: this.actionsDropdownRendererTemplate()
     }), ...(ngDevMode ? [{ debugName: "templateRenderers" }] : []));
@@ -20039,10 +20557,10 @@ class CideCoreUserRoleListComponent {
         }
         return entity || 'N/A';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCoreUserRoleListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideCoreUserRoleListComponent, isStandalone: true, selector: "cide-core-user-role-list", viewQueries: [{ propertyName: "userRoleDetailsRendererTemplate", first: true, predicate: ["userRoleDetailsRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "entityRendererTemplate", first: true, predicate: ["entityRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "statusRendererTemplate", first: true, predicate: ["statusRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "actionsDropdownRendererTemplate", first: true, predicate: ["actionsDropdownRendererTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- User Role List with Shared Wrapper -->\r\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'core_user_role' }\">\r\n  <div class=\"tw-table tw-w-full tw-h-full\">\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          <!-- Title -->\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\">admin_panel_settings</cide-ele-icon>\r\n            <h5 class=\"tw-text-base tw-font-medium tw-text-gray-900 tw-m-0\">User Role Management</h5>\r\n          </div>\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            <button cideEleButton variant=\"primary\" size=\"md\" leftIcon=\"add\" (click)=\"createUserRole()\">\r\n              Create User Role\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 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          <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 #userRoleDetailsRendererTemplate 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.syusrol_role_name || 'N/A' }}</div>\r\n      <div class=\"tw-text-sm tw-text-gray-500 tw-truncate\">{{ row.syusrol_role_description || 'No description' }}</div>\r\n    </div>\r\n  </ng-template>\r\n\r\n  <ng-template #entityRendererTemplate let-row=\"row\">\r\n    <div class=\"tw-flex tw-flex-col tw-text-sm\">\r\n      <span class=\"tw-text-gray-900\">{{ getEntityName(row.syusrol_role_entity_id_syen) }}</span>\r\n    </div>\r\n  </ng-template>\r\n\r\n  <ng-template #statusRendererTemplate let-row=\"row\">\r\n    <div class=\"tw-flex tw-items-center tw-justify-center\">\r\n      <!-- Active/Inactive Status Badge -->\r\n      <span\r\n        class=\"tw-inline-flex tw-items-center tw-justify-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-text-center\"\r\n        [ngClass]=\"getStatusBadgeClass(row)\">\r\n        <cide-ele-icon size=\"2xs\" class=\"tw-mr-1\">\r\n          {{ row.syusrol_isactive ? 'check_circle' : 'cancel' }}\r\n        </cide-ele-icon>\r\n        {{ getStatusText(row) }}\r\n      </span>\r\n    </div>\r\n  </ng-template>\r\n\r\n  <ng-template #actionsDropdownRendererTemplate let-row=\"row\">\r\n    <cide-ele-dropdown [items]=\"getActionDropdownItems(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>", styles: [".user-role-listing-container{@apply tw-w-full tw-h-full;}:host{@apply tw-w-full tw-h-full tw-flex tw-flex-col;}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { 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: 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"] }, { kind: "component", type: CideLytSharedWrapperComponent, selector: "cide-lyt-shared-wrapper", inputs: ["shared_wrapper_setup_param", "breadcrumb_data"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideCoreUserRoleListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: CideCoreUserRoleListComponent, isStandalone: true, selector: "cide-core-user-role-list", viewQueries: [{ propertyName: "userRoleDetailsRendererTemplate", first: true, predicate: ["userRoleDetailsRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "statusRendererTemplate", first: true, predicate: ["statusRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "actionsDropdownRendererTemplate", first: true, predicate: ["actionsDropdownRendererTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- User Role List with Shared Wrapper -->\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'core_user_role' }\">\n  <div class=\"tw-table tw-w-full tw-h-full\">\n\n    <!-- Header Section with Filters -->\n    <div class=\"tw-table-row tw-h-0\">\n      <div class=\"tw-table-cell tw-px-6 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\n        <div\n          class=\"tw-flex tw-flex-col sm:tw-flex-row tw-justify-between tw-items-start sm:tw-items-center tw-space-y-3 sm:tw-space-y-0\">\n\n          <!-- Title -->\n          <div class=\"tw-flex tw-items-center tw-space-x-2\">\n            <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">admin_panel_settings</cide-ele-icon>\n            <h5 class=\"tw-text-base tw-font-medium tw-text-gray-900 tw-m-0\">User Role Management</h5>\n          </div>\n\n          <!-- Actions -->\n          <div\n            class=\"tw-flex tw-flex-col sm:tw-flex-row tw-items-start sm:tw-items-center tw-space-y-3 sm:tw-space-y-0 sm:tw-space-x-3\">\n            <button cideEleButton variant=\"primary\" size=\"md\" leftIcon=\"add\" (click)=\"createUserRole()\">\n              Create User Role\n            </button>\n          </div>\n        </div>\n\n        <!-- Error Message -->\n        @if (error()) {\n        <div class=\"tw-mt-4 tw-p-4 tw-bg-red-50 tw-border tw-border-red-200 tw-rounded-md\">\n          <div class=\"tw-flex tw-items-start\">\n            <cide-ele-icon name=\"error\"\n              class=\"tw-text-red-400 tw-w-5 tw-h-5 tw-mt-0.5 tw-flex-shrink-0\"></cide-ele-icon>\n            <div class=\"tw-ml-3\">\n              <h3 class=\"tw-text-sm tw-font-medium tw-text-red-800 tw-m-0\">Error</h3>\n              <p class=\"tw-text-sm tw-text-red-700 tw-mt-1 tw-m-0\">{{ error() }}</p>\n            </div>\n          </div>\n        </div>\n        }\n      </div>\n    </div>\n\n    <!-- Main Content Area -->\n    <div class=\"tw-table-row\">\n      <div class=\"tw-table-cell tw-h-full tw-relative\">\n\n        <!-- Data Grid Component -->\n        <div class=\"tw-h-full tw-overflow-auto\">\n          <cide-ele-data-grid [config]=\"gridConfig()\" [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 #userRoleDetailsRendererTemplate 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.syusrol_role_name || 'N/A' }}</div>\n      <div class=\"tw-text-sm tw-text-gray-500 tw-truncate\">{{ row.syusrol_role_description || 'No description' }}</div>\n    </div>\n  </ng-template>\n\n  <ng-template #statusRendererTemplate let-row=\"row\">\n    <div class=\"tw-flex tw-items-center tw-justify-center\">\n      <!-- Active/Inactive Status Badge -->\n      <span\n        class=\"tw-inline-flex tw-items-center tw-justify-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-text-center\"\n        [ngClass]=\"getStatusBadgeClass(row)\">\n        <cide-ele-icon size=\"2xs\" class=\"tw-mr-1\">\n          {{ row.syusrol_isactive ? 'check_circle' : 'cancel' }}\n        </cide-ele-icon>\n        {{ getStatusText(row) }}\n      </span>\n    </div>\n  </ng-template>\n\n  <ng-template #actionsDropdownRendererTemplate let-row=\"row\">\n    <cide-ele-dropdown [items]=\"getActionDropdownItems(row)\" [config]=\"{ triggerIcon: 'more_vert', triggerSize: 'sm' }\"\n      (itemClick)=\"onDropdownItemClick($event, row)\">\n    </cide-ele-dropdown>\n  </ng-template>\n</cide-lyt-shared-wrapper>", styles: [".user-role-listing-container{@apply tw-w-full tw-h-full;}:host{@apply tw-w-full tw-h-full tw-flex tw-flex-col;}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { 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: 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"] }, { 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: CideCoreUserRoleListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideCoreUserRoleListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cide-core-user-role-list', standalone: true, imports: [
                         CommonModule,
@@ -20052,14 +20570,444 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                         CideEleDataGridComponent,
                         CideEleDropdownComponent,
                         CideLytSharedWrapperComponent
-                    ], template: "<!-- User Role List with Shared Wrapper -->\r\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'core_user_role' }\">\r\n  <div class=\"tw-table tw-w-full tw-h-full\">\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          <!-- Title -->\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\">admin_panel_settings</cide-ele-icon>\r\n            <h5 class=\"tw-text-base tw-font-medium tw-text-gray-900 tw-m-0\">User Role Management</h5>\r\n          </div>\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            <button cideEleButton variant=\"primary\" size=\"md\" leftIcon=\"add\" (click)=\"createUserRole()\">\r\n              Create User Role\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 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          <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 #userRoleDetailsRendererTemplate 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.syusrol_role_name || 'N/A' }}</div>\r\n      <div class=\"tw-text-sm tw-text-gray-500 tw-truncate\">{{ row.syusrol_role_description || 'No description' }}</div>\r\n    </div>\r\n  </ng-template>\r\n\r\n  <ng-template #entityRendererTemplate let-row=\"row\">\r\n    <div class=\"tw-flex tw-flex-col tw-text-sm\">\r\n      <span class=\"tw-text-gray-900\">{{ getEntityName(row.syusrol_role_entity_id_syen) }}</span>\r\n    </div>\r\n  </ng-template>\r\n\r\n  <ng-template #statusRendererTemplate let-row=\"row\">\r\n    <div class=\"tw-flex tw-items-center tw-justify-center\">\r\n      <!-- Active/Inactive Status Badge -->\r\n      <span\r\n        class=\"tw-inline-flex tw-items-center tw-justify-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-text-center\"\r\n        [ngClass]=\"getStatusBadgeClass(row)\">\r\n        <cide-ele-icon size=\"2xs\" class=\"tw-mr-1\">\r\n          {{ row.syusrol_isactive ? 'check_circle' : 'cancel' }}\r\n        </cide-ele-icon>\r\n        {{ getStatusText(row) }}\r\n      </span>\r\n    </div>\r\n  </ng-template>\r\n\r\n  <ng-template #actionsDropdownRendererTemplate let-row=\"row\">\r\n    <cide-ele-dropdown [items]=\"getActionDropdownItems(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>", styles: [".user-role-listing-container{@apply tw-w-full tw-h-full;}:host{@apply tw-w-full tw-h-full tw-flex tw-flex-col;}\n"] }]
-        }] });
+                    ], template: "<!-- User Role List with Shared Wrapper -->\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'core_user_role' }\">\n  <div class=\"tw-table tw-w-full tw-h-full\">\n\n    <!-- Header Section with Filters -->\n    <div class=\"tw-table-row tw-h-0\">\n      <div class=\"tw-table-cell tw-px-6 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\n        <div\n          class=\"tw-flex tw-flex-col sm:tw-flex-row tw-justify-between tw-items-start sm:tw-items-center tw-space-y-3 sm:tw-space-y-0\">\n\n          <!-- Title -->\n          <div class=\"tw-flex tw-items-center tw-space-x-2\">\n            <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">admin_panel_settings</cide-ele-icon>\n            <h5 class=\"tw-text-base tw-font-medium tw-text-gray-900 tw-m-0\">User Role Management</h5>\n          </div>\n\n          <!-- Actions -->\n          <div\n            class=\"tw-flex tw-flex-col sm:tw-flex-row tw-items-start sm:tw-items-center tw-space-y-3 sm:tw-space-y-0 sm:tw-space-x-3\">\n            <button cideEleButton variant=\"primary\" size=\"md\" leftIcon=\"add\" (click)=\"createUserRole()\">\n              Create User Role\n            </button>\n          </div>\n        </div>\n\n        <!-- Error Message -->\n        @if (error()) {\n        <div class=\"tw-mt-4 tw-p-4 tw-bg-red-50 tw-border tw-border-red-200 tw-rounded-md\">\n          <div class=\"tw-flex tw-items-start\">\n            <cide-ele-icon name=\"error\"\n              class=\"tw-text-red-400 tw-w-5 tw-h-5 tw-mt-0.5 tw-flex-shrink-0\"></cide-ele-icon>\n            <div class=\"tw-ml-3\">\n              <h3 class=\"tw-text-sm tw-font-medium tw-text-red-800 tw-m-0\">Error</h3>\n              <p class=\"tw-text-sm tw-text-red-700 tw-mt-1 tw-m-0\">{{ error() }}</p>\n            </div>\n          </div>\n        </div>\n        }\n      </div>\n    </div>\n\n    <!-- Main Content Area -->\n    <div class=\"tw-table-row\">\n      <div class=\"tw-table-cell tw-h-full tw-relative\">\n\n        <!-- Data Grid Component -->\n        <div class=\"tw-h-full tw-overflow-auto\">\n          <cide-ele-data-grid [config]=\"gridConfig()\" [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 #userRoleDetailsRendererTemplate 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.syusrol_role_name || 'N/A' }}</div>\n      <div class=\"tw-text-sm tw-text-gray-500 tw-truncate\">{{ row.syusrol_role_description || 'No description' }}</div>\n    </div>\n  </ng-template>\n\n  <ng-template #statusRendererTemplate let-row=\"row\">\n    <div class=\"tw-flex tw-items-center tw-justify-center\">\n      <!-- Active/Inactive Status Badge -->\n      <span\n        class=\"tw-inline-flex tw-items-center tw-justify-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-text-center\"\n        [ngClass]=\"getStatusBadgeClass(row)\">\n        <cide-ele-icon size=\"2xs\" class=\"tw-mr-1\">\n          {{ row.syusrol_isactive ? 'check_circle' : 'cancel' }}\n        </cide-ele-icon>\n        {{ getStatusText(row) }}\n      </span>\n    </div>\n  </ng-template>\n\n  <ng-template #actionsDropdownRendererTemplate let-row=\"row\">\n    <cide-ele-dropdown [items]=\"getActionDropdownItems(row)\" [config]=\"{ triggerIcon: 'more_vert', triggerSize: 'sm' }\"\n      (itemClick)=\"onDropdownItemClick($event, row)\">\n    </cide-ele-dropdown>\n  </ng-template>\n</cide-lyt-shared-wrapper>", styles: [".user-role-listing-container{@apply tw-w-full tw-h-full;}:host{@apply tw-w-full tw-h-full tw-flex tw-flex-col;}\n"] }]
+        }], propDecorators: { userRoleDetailsRendererTemplate: [{ type: i0.ViewChild, args: ['userRoleDetailsRendererTemplate', { isSignal: true }] }], statusRendererTemplate: [{ type: i0.ViewChild, args: ['statusRendererTemplate', { isSignal: true }] }], actionsDropdownRendererTemplate: [{ type: i0.ViewChild, args: ['actionsDropdownRendererTemplate', { isSignal: true }] }] } });
 
 var userRoleList_component = /*#__PURE__*/Object.freeze({
     __proto__: null,
     CideCoreUserRoleListComponent: CideCoreUserRoleListComponent
 });
 
+class CopyRoleDrawerComponent {
+    floatingContainerService = inject(CideEleFloatingContainerService);
+    userRoleService = inject(CideCoreUserRoleService);
+    entityService = inject(ENTITY_SERVICE_TOKEN);
+    destroyRef = takeUntilDestroyed();
+    // Outputs
+    roleSelect = output();
+    cancel = output();
+    // Signals
+    flattenedEntities = signal([], ...(ngDevMode ? [{ debugName: "flattenedEntities" }] : []));
+    selectedEntityId = signal('', ...(ngDevMode ? [{ debugName: "selectedEntityId" }] : []));
+    selectedRoleId = signal('', ...(ngDevMode ? [{ debugName: "selectedRoleId" }] : []));
+    availableRoles = signal([], ...(ngDevMode ? [{ debugName: "availableRoles" }] : []));
+    rolePreview = signal(null, ...(ngDevMode ? [{ debugName: "rolePreview" }] : []));
+    loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+    entitiesLoadAttempted = signal(false, ...(ngDevMode ? [{ debugName: "entitiesLoadAttempted" }] : []));
+    constructor() {
+        console.log('🏗️ [CopyRoleDrawer] Constructor called');
+        console.log('🏗️ [CopyRoleDrawer] EntityService available:', !!this.entityService);
+    }
+    ngOnInit() {
+        console.log('🔄 [CopyRoleDrawer] ngOnInit called, loading entities...');
+        // Defer loading to avoid ExpressionChangedAfterItHasBeenCheckedError
+        setTimeout(() => this.loadEntitiesIfNeeded(), 0);
+    }
+    ngAfterViewInit() {
+        console.log('🔄 [CopyRoleDrawer] ngAfterViewInit called');
+        // Try loading again if it wasn't loaded in ngOnInit
+        setTimeout(() => this.loadEntitiesIfNeeded(), 0);
+    }
+    loadEntitiesIfNeeded() {
+        if (!this.entitiesLoadAttempted()) {
+            this.entitiesLoadAttempted.set(true);
+            this.loadEntities();
+        }
+    }
+    loadEntities() {
+        console.log('📞 [CopyRoleDrawer] Calling entityService.getEntityList()...');
+        this.loading.set(true);
+        if (!this.entityService) {
+            console.error('❌ [CopyRoleDrawer] EntityService is not available!');
+            this.loading.set(false);
+            return;
+        }
+        this.entityService.getEntityList({})
+            .pipe(this.destroyRef)
+            .subscribe({
+            next: (response) => {
+                console.log('✅ [CopyRoleDrawer] Entity list response received:', response);
+                const typedResponse = response;
+                if (typedResponse?.success && typedResponse?.data) {
+                    console.log(`✅ [CopyRoleDrawer] Processing ${typedResponse.data.length} entities`);
+                    const hierarchical = this.buildEntityHierarchy(typedResponse.data);
+                    console.log('✅ [CopyRoleDrawer] Hierarchical entities:', hierarchical);
+                    const flattened = this.flattenEntitiesForDropdown(hierarchical);
+                    console.log(`✅ [CopyRoleDrawer] Flattened ${flattened.length} entities for dropdown:`, flattened);
+                    this.flattenedEntities.set(flattened);
+                    console.log('✅ [CopyRoleDrawer] Signal updated. Current value:', this.flattenedEntities());
+                }
+                else {
+                    console.warn('⚠️ [CopyRoleDrawer] Invalid response structure:', typedResponse);
+                }
+                this.loading.set(false);
+            },
+            error: (error) => {
+                console.error('❌ [CopyRoleDrawer] Error loading entities:', error);
+                this.loading.set(false);
+            }
+        });
+    }
+    buildEntityHierarchy(entities) {
+        const nodeMap = new Map();
+        const rootNodes = [];
+        entities.forEach(entity => {
+            const node = { ...entity, children: [] };
+            nodeMap.set(entity._id || '', node);
+        });
+        entities.forEach(entity => {
+            const node = nodeMap.get(entity._id || '');
+            if (node) {
+                const parentId = entity.syen_id_syen;
+                if (parentId && parentId !== "" && nodeMap.has(parentId)) {
+                    const parent = nodeMap.get(parentId);
+                    parent.children = parent.children || [];
+                    parent.children.push(node);
+                }
+                else {
+                    rootNodes.push(node);
+                }
+            }
+        });
+        return rootNodes;
+    }
+    flattenEntitiesForDropdown(entities, level = 0) {
+        const result = [];
+        entities.forEach(entity => {
+            const indent = '\u00A0\u00A0\u00A0'.repeat(level);
+            const prefix = level > 0 ? '└─ ' : '';
+            const displayName = `${indent}${prefix}${entity.syen_name || 'Unnamed Entity'}`;
+            result.push({ _id: entity._id || '', displayName, entity });
+            if (entity.children && entity.children.length > 0) {
+                const childrenFlattened = this.flattenEntitiesForDropdown(entity.children, level + 1);
+                result.push(...childrenFlattened);
+            }
+        });
+        return result;
+    }
+    onEntityChange(entityIdValue) {
+        // Convert entityId to string
+        const entityId = String(entityIdValue);
+        this.selectedRoleId.set('');
+        this.rolePreview.set(null);
+        this.availableRoles.set([]);
+        if (entityId) {
+            this.loadRolesForEntity(entityId);
+        }
+    }
+    loadRolesForEntity(entityId) {
+        console.log('📞 [CopyRoleDrawer] Loading roles for entity:', entityId);
+        this.loading.set(true);
+        this.userRoleService.getRolesByEntity(entityId)
+            .pipe(this.destroyRef)
+            .subscribe({
+            next: (response) => {
+                console.log('✅ [CopyRoleDrawer] Roles response received:', response);
+                const typedResponse = response;
+                if (typedResponse?.success && typedResponse.data) {
+                    console.log(`✅ [CopyRoleDrawer] Loaded ${typedResponse.data.length} roles`);
+                    this.availableRoles.set(typedResponse.data);
+                }
+                else {
+                    console.warn('⚠️ [CopyRoleDrawer] Invalid roles response:', typedResponse);
+                }
+                this.loading.set(false);
+            },
+            error: (error) => {
+                console.error('❌ [CopyRoleDrawer] Error loading roles:', error);
+                this.loading.set(false);
+            }
+        });
+    }
+    onRoleChange(roleIdValue) {
+        // Convert roleId to string
+        const roleId = String(roleIdValue);
+        this.rolePreview.set(null);
+        if (roleId) {
+            this.loadRolePreview(roleId);
+        }
+    }
+    loadRolePreview(roleId) {
+        console.log('📞 [CopyRoleDrawer] Loading role preview for:', roleId);
+        this.loading.set(true);
+        this.userRoleService.getUserRoleById({ syusrol_id: roleId })
+            .pipe(this.destroyRef)
+            .subscribe({
+            next: (response) => {
+                console.log('✅ [CopyRoleDrawer] Role preview response received:', response);
+                const typedResponse = response;
+                if (typedResponse?.success && typedResponse.data) {
+                    console.log('✅ [CopyRoleDrawer] Role preview loaded');
+                    this.rolePreview.set(typedResponse.data);
+                }
+                else {
+                    console.warn('⚠️ [CopyRoleDrawer] Invalid role preview response:', typedResponse);
+                }
+                this.loading.set(false);
+            },
+            error: (error) => {
+                console.error('❌ [CopyRoleDrawer] Error loading role preview:', error);
+                this.loading.set(false);
+            }
+        });
+    }
+    onApply() {
+        const preview = this.rolePreview();
+        if (preview) {
+            this.roleSelect.emit(preview);
+            this.floatingContainerService.hide('copy-role-drawer');
+        }
+    }
+    onCancel() {
+        this.cancel.emit();
+        this.floatingContainerService.hide('copy-role-drawer');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CopyRoleDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: CopyRoleDrawerComponent, isStandalone: true, selector: "cide-copy-role-drawer", outputs: { roleSelect: "roleSelect", cancel: "cancel" }, ngImport: i0, template: `
+    <div class="tw-flex tw-flex-col tw-h-full">
+      <!-- Header Description -->
+      <div class="tw-px-3 tw-py-2 tw-bg-blue-50 dark:tw-bg-blue-900/20 tw-border-b tw-border-blue-200 dark:tw-border-blue-700">
+        <p class="tw-text-xs tw-text-blue-700 dark:tw-text-blue-300 tw-m-0">
+          Select an entity and role to copy all permissions to the current role.
+        </p>
+      </div>
+
+      <!-- Content -->
+      <div class="tw-flex-1 tw-overflow-y-auto tw-p-3 tw-space-y-4">
+        <!-- Entity Selection -->
+        <div>
+          <label class="tw-block tw-text-sm tw-font-medium tw-text-gray-700 dark:tw-text-gray-300 tw-mb-2">
+            Select Entity
+          </label>
+          <cide-ele-select 
+            id="copy_entity_select"
+            [ngModel]="selectedEntityId()"
+            (ngModelChange)="onEntityChange($event)"
+            size="md">
+            <option value="">Select an entity...</option>
+            @for (entity of flattenedEntities(); track entity._id) {
+              <option [value]="entity._id">{{ entity.displayName }}</option>
+            }
+          </cide-ele-select>
+          <!-- Debug info -->
+          <div class="tw-text-xs tw-text-gray-500 tw-mt-1">
+            Debug: {{ flattenedEntities().length }} entities loaded
+          </div>
+        </div>
+
+        <!-- Role Selection -->
+        @if (selectedEntityId() && availableRoles().length > 0) {
+          <div>
+            <label class="tw-block tw-text-sm tw-font-medium tw-text-gray-700 dark:tw-text-gray-300 tw-mb-2">
+              Select Role to Copy
+            </label>
+            <cide-ele-select 
+              id="copy_role_select"
+              [ngModel]="selectedRoleId()"
+              (ngModelChange)="onRoleChange($event)"
+              size="md">
+              <option value="">Select a role...</option>
+              @for (role of availableRoles(); track role._id) {
+                <option [value]="role._id">{{ role.syusrol_role_name }}</option>
+              }
+            </cide-ele-select>
+          </div>
+        }
+
+        <!-- Role Preview -->
+        @if (rolePreview()) {
+          <div class="tw-bg-blue-50 dark:tw-bg-blue-900/20 tw-border tw-border-blue-200 dark:tw-border-blue-700 tw-rounded-md tw-p-3">
+            <div class="tw-flex tw-items-start tw-gap-2 tw-mb-2">
+              <cide-ele-icon variant="blue" size="sm" class="tw-flex-shrink-0 tw-mt-0.5">info</cide-ele-icon>
+              <div class="tw-flex-1 tw-min-w-0">
+                <div class="tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100 tw-text-sm tw-mb-1">
+                  {{ rolePreview()?.core_user_role?.syusrol_role_name }}
+                </div>
+                <div class="tw-text-xs tw-text-gray-600 dark:tw-text-gray-400 tw-mb-2">
+                  {{ rolePreview()?.core_user_role?.syusrol_role_description }}
+                </div>
+                <div class="tw-flex tw-items-center tw-gap-2 tw-flex-wrap">
+                  <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-blue-100 dark:tw-bg-blue-800 tw-text-blue-800 dark:tw-text-blue-200">
+                    {{ rolePreview()?.core_user_role_rights?.length || 0 }} permissions
+                  </span>
+                  <span class="tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium"
+                        [class]="rolePreview()?.core_user_role?.syusrol_isactive 
+                          ? 'tw-bg-green-100 dark:tw-bg-green-800 tw-text-green-800 dark:tw-text-green-200' 
+                          : 'tw-bg-red-100 dark:tw-bg-red-800 tw-text-red-800 dark:tw-text-red-200'">
+                    {{ rolePreview()?.core_user_role?.syusrol_isactive ? 'Active' : 'Inactive' }}
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+        }
+
+        <!-- Loading State -->
+        @if (loading()) {
+          <div class="tw-text-center tw-py-4">
+            <div class="tw-inline-block tw-animate-spin tw-w-6 tw-h-6 tw-border-2 tw-border-blue-600 tw-border-t-transparent tw-rounded-full"></div>
+            <p class="tw-text-sm tw-text-gray-600 dark:tw-text-gray-400 tw-mt-2">Loading...</p>
+          </div>
+        }
+
+        <!-- No Roles Message -->
+        @if (selectedEntityId() && !loading() && availableRoles().length === 0) {
+          <div class="tw-text-center tw-py-6 tw-text-gray-500 dark:tw-text-gray-400">
+            <cide-ele-icon variant="gray" size="lg" class="tw-mb-2">info</cide-ele-icon>
+            <p class="tw-text-sm tw-font-medium tw-mb-1">No Roles Available</p>
+            <p class="tw-text-xs">This entity has no roles to copy from.</p>
+          </div>
+        }
+      </div>
+
+      <!-- Footer -->
+      <div class="tw-border-t tw-border-gray-200 dark:tw-border-gray-700 tw-px-3 tw-py-2 tw-flex tw-justify-end tw-gap-2 tw-flex-shrink-0 tw-bg-white dark:tw-bg-gray-800">
+        <button 
+          cideEleButton 
+          variant="secondary" 
+          size="xs" 
+          type="button" 
+          (click)="onCancel()">
+          Cancel
+        </button>
+        <button 
+          cideEleButton 
+          variant="primary" 
+          size="xs" 
+          type="button" 
+          leftIcon="content_copy"
+          [disabled]="!rolePreview()"
+          (click)="onApply()">
+          Apply Copy
+        </button>
+      </div>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { 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.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: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput", "options", "multiple", "searchable", "showSearchInput", "loading", "valueKey", "labelKey", "treeView"], outputs: ["ngModelChange", "change", "searchChange"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CopyRoleDrawerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cide-copy-role-drawer', standalone: true, imports: [CommonModule, FormsModule, CideEleButtonComponent, CideIconComponent, CideSelectComponent], template: `
+    <div class="tw-flex tw-flex-col tw-h-full">
+      <!-- Header Description -->
+      <div class="tw-px-3 tw-py-2 tw-bg-blue-50 dark:tw-bg-blue-900/20 tw-border-b tw-border-blue-200 dark:tw-border-blue-700">
+        <p class="tw-text-xs tw-text-blue-700 dark:tw-text-blue-300 tw-m-0">
+          Select an entity and role to copy all permissions to the current role.
+        </p>
+      </div>
+
+      <!-- Content -->
+      <div class="tw-flex-1 tw-overflow-y-auto tw-p-3 tw-space-y-4">
+        <!-- Entity Selection -->
+        <div>
+          <label class="tw-block tw-text-sm tw-font-medium tw-text-gray-700 dark:tw-text-gray-300 tw-mb-2">
+            Select Entity
+          </label>
+          <cide-ele-select 
+            id="copy_entity_select"
+            [ngModel]="selectedEntityId()"
+            (ngModelChange)="onEntityChange($event)"
+            size="md">
+            <option value="">Select an entity...</option>
+            @for (entity of flattenedEntities(); track entity._id) {
+              <option [value]="entity._id">{{ entity.displayName }}</option>
+            }
+          </cide-ele-select>
+          <!-- Debug info -->
+          <div class="tw-text-xs tw-text-gray-500 tw-mt-1">
+            Debug: {{ flattenedEntities().length }} entities loaded
+          </div>
+        </div>
+
+        <!-- Role Selection -->
+        @if (selectedEntityId() && availableRoles().length > 0) {
+          <div>
+            <label class="tw-block tw-text-sm tw-font-medium tw-text-gray-700 dark:tw-text-gray-300 tw-mb-2">
+              Select Role to Copy
+            </label>
+            <cide-ele-select 
+              id="copy_role_select"
+              [ngModel]="selectedRoleId()"
+              (ngModelChange)="onRoleChange($event)"
+              size="md">
+              <option value="">Select a role...</option>
+              @for (role of availableRoles(); track role._id) {
+                <option [value]="role._id">{{ role.syusrol_role_name }}</option>
+              }
+            </cide-ele-select>
+          </div>
+        }
+
+        <!-- Role Preview -->
+        @if (rolePreview()) {
+          <div class="tw-bg-blue-50 dark:tw-bg-blue-900/20 tw-border tw-border-blue-200 dark:tw-border-blue-700 tw-rounded-md tw-p-3">
+            <div class="tw-flex tw-items-start tw-gap-2 tw-mb-2">
+              <cide-ele-icon variant="blue" size="sm" class="tw-flex-shrink-0 tw-mt-0.5">info</cide-ele-icon>
+              <div class="tw-flex-1 tw-min-w-0">
+                <div class="tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100 tw-text-sm tw-mb-1">
+                  {{ rolePreview()?.core_user_role?.syusrol_role_name }}
+                </div>
+                <div class="tw-text-xs tw-text-gray-600 dark:tw-text-gray-400 tw-mb-2">
+                  {{ rolePreview()?.core_user_role?.syusrol_role_description }}
+                </div>
+                <div class="tw-flex tw-items-center tw-gap-2 tw-flex-wrap">
+                  <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-blue-100 dark:tw-bg-blue-800 tw-text-blue-800 dark:tw-text-blue-200">
+                    {{ rolePreview()?.core_user_role_rights?.length || 0 }} permissions
+                  </span>
+                  <span class="tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium"
+                        [class]="rolePreview()?.core_user_role?.syusrol_isactive 
+                          ? 'tw-bg-green-100 dark:tw-bg-green-800 tw-text-green-800 dark:tw-text-green-200' 
+                          : 'tw-bg-red-100 dark:tw-bg-red-800 tw-text-red-800 dark:tw-text-red-200'">
+                    {{ rolePreview()?.core_user_role?.syusrol_isactive ? 'Active' : 'Inactive' }}
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+        }
+
+        <!-- Loading State -->
+        @if (loading()) {
+          <div class="tw-text-center tw-py-4">
+            <div class="tw-inline-block tw-animate-spin tw-w-6 tw-h-6 tw-border-2 tw-border-blue-600 tw-border-t-transparent tw-rounded-full"></div>
+            <p class="tw-text-sm tw-text-gray-600 dark:tw-text-gray-400 tw-mt-2">Loading...</p>
+          </div>
+        }
+
+        <!-- No Roles Message -->
+        @if (selectedEntityId() && !loading() && availableRoles().length === 0) {
+          <div class="tw-text-center tw-py-6 tw-text-gray-500 dark:tw-text-gray-400">
+            <cide-ele-icon variant="gray" size="lg" class="tw-mb-2">info</cide-ele-icon>
+            <p class="tw-text-sm tw-font-medium tw-mb-1">No Roles Available</p>
+            <p class="tw-text-xs">This entity has no roles to copy from.</p>
+          </div>
+        }
+      </div>
+
+      <!-- Footer -->
+      <div class="tw-border-t tw-border-gray-200 dark:tw-border-gray-700 tw-px-3 tw-py-2 tw-flex tw-justify-end tw-gap-2 tw-flex-shrink-0 tw-bg-white dark:tw-bg-gray-800">
+        <button 
+          cideEleButton 
+          variant="secondary" 
+          size="xs" 
+          type="button" 
+          (click)="onCancel()">
+          Cancel
+        </button>
+        <button 
+          cideEleButton 
+          variant="primary" 
+          size="xs" 
+          type="button" 
+          leftIcon="content_copy"
+          [disabled]="!rolePreview()"
+          (click)="onApply()">
+          Apply Copy
+        </button>
+      </div>
+    </div>
+  ` }]
+        }], ctorParameters: () => [], propDecorators: { roleSelect: [{ type: i0.Output, args: ["roleSelect"] }], cancel: [{ type: i0.Output, args: ["cancel"] }] } });
+
 class CideCoreUserRoleFormComponent {
     // Dependency injection
     destroyRef = inject(DestroyRef);
@@ -20067,6 +21015,7 @@ class CideCoreUserRoleFormComponent {
     menuService = inject(MenuManagementService);
     generalMasterService = inject(CideCoreGeneralMasterService);
     generalMasterTypeService = inject(CideCoreGeneralMasterTypeService);
+    floatingContainerService = inject(CideEleFloatingContainerService);
     router = inject(Router);
     route = inject(ActivatedRoute);
     appState = inject(AppStateHelperService);
@@ -20951,10 +21900,116 @@ class CideCoreUserRoleFormComponent {
             console.log('🔍 Change detection triggered after auto-checking parent view rights');
         }, 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 -->\n<div class=\"tw-w-full tw-h-full\">\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()\">\n\n    <!-- Error Message -->\n    @if (error()) {\n      <div class=\"tw-mb-6 tw-p-4 tw-bg-red-50 tw-border tw-border-red-200 tw-rounded-md\">\n        <div class=\"tw-flex tw-items-start\">\n          <cide-ele-icon name=\"error\" class=\"tw-text-red-400 tw-w-5 tw-h-5 tw-mt-0.5 tw-flex-shrink-0\"></cide-ele-icon>\n          <div class=\"tw-ml-3\">\n            <h3 class=\"tw-text-sm tw-font-medium tw-text-red-800 tw-m-0\">Error</h3>\n            <p class=\"tw-text-sm tw-text-red-700 tw-mt-1 tw-m-0\">{{ error() }}</p>\n          </div>\n        </div>\n      </div>\n    }\n    <!-- User Role Basic Information Section -->\n    <div class=\"tw-py-2 tw-border-b-0 tw-mb-0  tw-p-3\">\n\n      <!-- Basic Fields -->\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\">\n        <!-- Left Column: Role Name -->\n        <div>\n          <cide-ele-input \n            id=\"syusrol_role_name\" \n            label=\"Role Name\" \n            formControlName=\"syusrol_role_name\"\n            placeholder=\"Enter role name\" \n            [maxlength]=\"50\" \n            size=\"md\"\n            [disabled]=\"isViewMode()\">\n          </cide-ele-input>\n        </div>\n\n        <!-- Right Column: Description -->\n        <div>\n          <cide-ele-textarea \n            id=\"syusrol_role_description\" \n            label=\"Description\" \n            formControlName=\"syusrol_role_description\"\n            placeholder=\"Enter role description\" \n            rows=\"3\"\n            [maxlength]=\"200\"\n            [disabled]=\"isViewMode()\">\n          </cide-ele-textarea>\n        </div>\n      </div>\n\n      <!-- Active Status Row -->\n      <div class=\"tw-mb-0\">\n        <cide-ele-input \n          id=\"syusrol_isactive\" \n          label=\"Active Status\" \n          formControlName=\"syusrol_isactive\"\n          type=\"checkbox\" \n          size=\"md\"\n          [disabled]=\"isViewMode()\">\n        </cide-ele-input>\n      </div>\n    </div>\n\n    <!-- Role Rights Section -->\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\">\n\n      <!-- Role Rights Grid -->\n      <div class=\"tw-flex-1 tw-min-h-0 tw-w-full\" style=\"height: 400px; max-height: 900px;\">\n        <cide-ele-data-grid \n          [config]=\"roleRightsGridConfig()\" \n          [templateRenderers]=\"templateRenderers()\"\n          (gridEvent)=\"onRoleRightsGridEvent($event)\"\n          class=\"tw-h-full tw-w-full\">\n        </cide-ele-data-grid>\n      </div>\n\n      <!-- Role Rights Form (Hidden but functional) -->\n      <div [formGroup]=\"roleRightsForm\" class=\"tw-hidden\">\n        <div formArrayName=\"roleRights\">\n        @for (right of roleRightsArray.controls; track $index; let i = $index) {\n          <div [formGroupName]=\"i\">\n            <cide-ele-select formControlName=\"syusrgt_menu_id_syme\">\n              <option value=\"\">Select Menu</option>\n              @for (menu of menus(); track menu._id) {\n                <option [value]=\"menu._id\">{{ menu.syme_title }}</option>\n              }\n            </cide-ele-select>\n            <cide-ele-select formControlName=\"syusrgt_role_permissions_id_sygms\">\n              <option value=\"\">Select Permission</option>\n              @for (permission of permissions(); track permission._id) {\n                <option [value]=\"permission._id\">{{ permission.sygms_name }}</option>\n              }\n            </cide-ele-select>\n            <cide-ele-input formControlName=\"syusrgt_isactive\" type=\"checkbox\"></cide-ele-input>\n          </div>\n        }\n        </div>\n      </div>\n    </div>\n\n    <!-- Form Actions -->\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\">\n      <!-- Error Message (Left Side) -->\n      <cide-form-field-error [formGroup]=\"userRoleForm\"></cide-form-field-error>\n      \n      <!-- Action Buttons (Right Side) -->\n      <div class=\"tw-flex tw-gap-4\">\n        <button cideEleButton type=\"button\" variant=\"secondary\" (click)=\"onCancel()\" leftIcon=\"arrow_back\"\n          [disabled]=\"loading()\">\n          {{ isViewMode() ? 'Close' : 'Cancel' }}\n        </button>\n\n        @if (!isViewMode()) {\n          <button cideEleButton type=\"submit\" variant=\"primary\" [disabled]=\"loading() || !isFormReadyToSave\"\n            [loading]=\"loading()\" leftIcon=\"save\">\n            {{ submitButtonText }}\n          </button>\n        }\n      </div>\n    </div>\n  </form>\n</div>\n\n<!-- Template Renderers for Role Rights Grid -->\n<ng-template #menuDetailsRendererTemplate let-row=\"row\" let-value=\"value\">\n  <div class=\"tw-flex tw-items-center tw-min-w-0\">\n    <!-- Menu Icon -->\n    <div class=\"tw-flex-shrink-0\">\n      <cide-ele-icon \n        class=\"tw-text-gray-400\" \n        size=\"xs\">\n        {{ row.syme_icon || 'folder_open' }}\n      </cide-ele-icon>\n    </div>\n    \n    <!-- Menu Details -->\n    <div class=\"tw-ml-3 tw-min-w-0 tw-flex-1\">\n      <div class=\"tw-flex tw-items-center tw-gap-2\">\n        <div class=\"tw-text-xs tw-font-medium tw-text-gray-900 tw-truncate\" \n             [title]=\"row.syme_title\">\n          {{ row.syme_title || row.menu?.syme_title || row.menu?.syme_menu_name || 'Untitled' }}\n        </div>\n        <!-- Green pill indicator for parent menus with child permissions -->\n        @if (row.syme_type === 'module' || row.syme_type === 'section') {\n          @if (hasChildMenusWithPermissions(row._id)) {\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\">\n              Assigned\n            </span>\n          }\n        }\n      </div>\n      @if (row.permission?.sygms_name) {\n        <div class=\"tw-text-xs tw-text-blue-500 tw-truncate\" \n             [title]=\"row.permission?.sygms_name\">\n          {{ row.permission?.sygms_name }}\n        </div>\n      }\n    </div>\n  </div>\n</ng-template>\n\n\n<!-- Permissions Checkbox Renderer Template -->\n<ng-template #permissionsCheckboxRendererTemplate let-row=\"row\" let-value=\"value\">\n  <div class=\"tw-flex tw-flex-wrap tw-gap-2 tw-max-w-full\">\n    @if (row.syme_type === 'menu' && row?.syme_permissions_id_sygms && row?.syme_permissions_id_sygms.length > 0) {\n      @for (permissionId of row?.syme_permissions_id_sygms || []; track permissionId) {\n         <div class=\"tw-flex tw-items-center tw-space-x-1\">\n           <cide-ele-input \n             type=\"checkbox\"\n             [label]=\"getPermissionById(permissionId)?.sygms_name || 'Unknown'\"\n             [ngModel]=\"isPermissionSelected(row._id, permissionId)\"\n             (ngModelChange)=\"onPermissionCheckboxChange(row._id, permissionId, $event)\"\n             size=\"xs\"\n             [disabled]=\"isViewMode()\">\n           </cide-ele-input>\n         </div>\n      }\n    } @else {\n      <!-- Show green checkmark for parent menus with child permissions -->\n      @if (row.syme_type === 'module' || row.syme_type === 'section' || row.syme_type === 'title') {\n        @if (hasChildMenusWithPermissions(row._id)) {\n          <div class=\"tw-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-bg-green-100 tw-rounded-full\" \n               [title]=\"hasParentViewRight(row._id) ? 'View right automatically enabled' : 'Child permissions assigned'\">\n            <cide-ele-icon \n              class=\"tw-text-green-600\" \n              size=\"xs\">\n              check\n            </cide-ele-icon>\n          </div>\n        } @else if (hasParentViewRight(row._id)) {\n          <!-- Show green checkmark for parent with view right -->\n          <cide-ele-icon \n            class=\"tw-text-green-600\" \n            size=\"xs\"\n            title=\"View right automatically enabled\">\n            check\n          </cide-ele-icon>\n        } @else {\n          <span class=\"tw-text-xs tw-text-gray-400\">N/A</span>\n        }\n      } @else {\n        <span class=\"tw-text-xs tw-text-gray-400\">N/A</span>\n      }\n    }\n  </div>\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", "ngModel", "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"] }] });
+    // ============================================
+    // Copy Role Feature Methods
+    // ============================================
+    /**
+     * Open copy role drawer using floating container service
+     */
+    openCopyRoleDialog() {
+        console.log('📋 Opening copy role drawer');
+        // Register the copy role drawer component if not already registered
+        if (!this.floatingContainerService.isComponentRegistered('copy-role-drawer')) {
+            this.floatingContainerService.registerComponent('copy-role-drawer', CopyRoleDrawerComponent);
+        }
+        // Show the floating container with the drawer component
+        const containerId = this.floatingContainerService.show({
+            id: 'copy-role-drawer',
+            title: 'Copy Role from Entity',
+            componentId: 'copy-role-drawer',
+            width: '500px',
+            height: 'auto',
+            maxHeight: '80vh',
+            resizable: false,
+            draggable: true,
+            closable: true,
+            componentConfig: {
+                inputs: {},
+                outputs: {
+                    roleSelect: (event) => {
+                        // Extract role data from event (handles both direct value and event object)
+                        const roleData = typeof event === 'object' && event !== null
+                            ? (event.value || event)
+                            : event;
+                        this.onRoleSelected(roleData);
+                    },
+                    cancel: (event) => {
+                        this.floatingContainerService.hide('copy-role-drawer');
+                    }
+                }
+            }
+        });
+        console.log('✅ Copy role drawer shown with ID:', containerId);
+    }
+    /**
+     * Handle role selection from drawer
+     */
+    onRoleSelected(roleData) {
+        console.log('📋 Role selected for copy:', roleData);
+        // Check if form has unsaved changes
+        if (this.userRoleForm.dirty) {
+            this.confirmationService.ask({
+                title: 'Overwrite Current Data',
+                message: 'This will overwrite any unsaved changes in the current form. Are you sure you want to continue?',
+                confirmText: 'Continue',
+                cancelText: 'Cancel',
+                type: 'warning'
+            }).then((confirmed) => {
+                if (confirmed) {
+                    this.performRoleCopy(roleData);
+                }
+            });
+        }
+        else {
+            this.performRoleCopy(roleData);
+        }
+    }
+    /**
+     * Perform the actual role copy operation
+     */
+    performRoleCopy(previewData) {
+        console.log('📋 Applying role copy:', previewData);
+        const roleData = previewData.core_user_role;
+        const currentEntityId = this.appState.activeEntity()?._id;
+        // Populate main form with copied data (append " - Copy" to name)
+        this.userRoleForm.patchValue({
+            syusrol_role_name: `${roleData.syusrol_role_name} - Copy`,
+            syusrol_role_description: roleData.syusrol_role_description,
+            syusrol_role_entity_id_syen: currentEntityId, // Keep current entity
+            syusrol_isactive: roleData.syusrol_isactive
+        });
+        // Clear existing rights
+        const rightsArray = this.roleRightsForm.get('roleRights');
+        rightsArray.clear();
+        // Copy role rights
+        if (previewData.core_user_role_rights && previewData.core_user_role_rights.length > 0) {
+            const copiedRights = previewData.core_user_role_rights.map(right => ({
+                syusrgt_menu_id_syme: typeof right.syusrgt_menu_id_syme === 'object'
+                    ? right.syusrgt_menu_id_syme?._id
+                    : right.syusrgt_menu_id_syme,
+                syusrgt_role_permissions_id_sygms: typeof right.syusrgt_role_permissions_id_sygms === 'object'
+                    ? right.syusrgt_role_permissions_id_sygms?._id
+                    : right.syusrgt_role_permissions_id_sygms,
+                syusrgt_isactive: right.syusrgt_isactive
+            }));
+            // Add each copied right to the form
+            copiedRights.forEach(right => {
+                rightsArray.push(this.createRoleRightFormGroup(right));
+            });
+            console.log('✅ Copied', copiedRights.length, 'role rights');
+        }
+        // Mark form as dirty to enable save
+        this.userRoleForm.markAsDirty();
+        this.roleRightsForm.markAsDirty();
+        // Show success notification
+        this.notificationService.success(`Role "${roleData.syusrol_role_name}" copied successfully. You can now modify and save.`);
+        // Trigger change detection
+        this.cdr.detectChanges();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideCoreUserRoleFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", 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 -->\n<div class=\"tw-w-full tw-h-full\">\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()\">\n\n    <!-- Error Message -->\n    @if (error()) {\n      <div class=\"tw-mb-6 tw-p-4 tw-bg-red-50 tw-border tw-border-red-200 tw-rounded-md\">\n        <div class=\"tw-flex tw-items-start\">\n          <cide-ele-icon name=\"error\" class=\"tw-text-red-400 tw-w-5 tw-h-5 tw-mt-0.5 tw-flex-shrink-0\"></cide-ele-icon>\n          <div class=\"tw-ml-3\">\n            <h3 class=\"tw-text-sm tw-font-medium tw-text-red-800 tw-m-0\">Error</h3>\n            <p class=\"tw-text-sm tw-text-red-700 tw-mt-1 tw-m-0\">{{ error() }}</p>\n          </div>\n        </div>\n      </div>\n    }\n    <!-- User Role Basic Information Section -->\n    <div class=\"tw-py-2 tw-border-b-0 tw-mb-0  tw-p-3\">\n\n      <!-- Copy Role Button (only in create mode) -->\n      @if (!isEditMode() && !isViewMode()) {\n        <div class=\"tw-mb-4\">\n          <button \n            cideEleButton \n            type=\"button\"\n            variant=\"secondary\" \n            leftIcon=\"content_copy\"\n            (click)=\"openCopyRoleDialog()\">\n            Copy from Existing Role\n          </button>\n        </div>\n      }\n\n      <!-- Basic Fields -->\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\">\n        <!-- Left Column: Role Name -->\n        <div>\n          <cide-ele-input \n            id=\"syusrol_role_name\" \n            label=\"Role Name\" \n            formControlName=\"syusrol_role_name\"\n            placeholder=\"Enter role name\" \n            [maxlength]=\"50\" \n            size=\"md\"\n            [disabled]=\"isViewMode()\">\n          </cide-ele-input>\n        </div>\n\n        <!-- Right Column: Description -->\n        <div>\n          <cide-ele-textarea \n            id=\"syusrol_role_description\" \n            label=\"Description\" \n            formControlName=\"syusrol_role_description\"\n            placeholder=\"Enter role description\" \n            rows=\"3\"\n            [maxlength]=\"200\"\n            [disabled]=\"isViewMode()\">\n          </cide-ele-textarea>\n        </div>\n      </div>\n\n      <!-- Active Status Row -->\n      <div class=\"tw-mb-0\">\n        <cide-ele-input \n          id=\"syusrol_isactive\" \n          label=\"Active Status\" \n          formControlName=\"syusrol_isactive\"\n          type=\"checkbox\" \n          size=\"md\"\n          [disabled]=\"isViewMode()\">\n        </cide-ele-input>\n      </div>\n    </div>\n\n    <!-- Role Rights Section -->\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\">\n\n      <!-- Role Rights Grid -->\n      <div class=\"tw-flex-1 tw-min-h-0 tw-w-full\" style=\"height: 400px; max-height: 900px;\">\n        <cide-ele-data-grid \n          [config]=\"roleRightsGridConfig()\" \n          [templateRenderers]=\"templateRenderers()\"\n          (gridEvent)=\"onRoleRightsGridEvent($event)\"\n          class=\"tw-h-full tw-w-full\">\n        </cide-ele-data-grid>\n      </div>\n\n      <!-- Role Rights Form (Hidden but functional) -->\n      <div [formGroup]=\"roleRightsForm\" class=\"tw-hidden\">\n        <div formArrayName=\"roleRights\">\n        @for (right of roleRightsArray.controls; track $index; let i = $index) {\n          <div [formGroupName]=\"i\">\n            <cide-ele-select formControlName=\"syusrgt_menu_id_syme\">\n              <option value=\"\">Select Menu</option>\n              @for (menu of menus(); track menu._id) {\n                <option [value]=\"menu._id\">{{ menu.syme_title }}</option>\n              }\n            </cide-ele-select>\n            <cide-ele-select formControlName=\"syusrgt_role_permissions_id_sygms\">\n              <option value=\"\">Select Permission</option>\n              @for (permission of permissions(); track permission._id) {\n                <option [value]=\"permission._id\">{{ permission.sygms_name }}</option>\n              }\n            </cide-ele-select>\n            <cide-ele-input formControlName=\"syusrgt_isactive\" type=\"checkbox\"></cide-ele-input>\n          </div>\n        }\n        </div>\n      </div>\n    </div>\n\n    <!-- Form Actions -->\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\">\n      <!-- Error Message (Left Side) -->\n      <cide-form-field-error [formGroup]=\"userRoleForm\"></cide-form-field-error>\n      \n      <!-- Action Buttons (Right Side) -->\n      <div class=\"tw-flex tw-gap-4\">\n        <button cideEleButton type=\"button\" variant=\"secondary\" (click)=\"onCancel()\" leftIcon=\"arrow_back\"\n          [disabled]=\"loading()\">\n          {{ isViewMode() ? 'Close' : 'Cancel' }}\n        </button>\n\n        @if (!isViewMode()) {\n          <button cideEleButton type=\"submit\" variant=\"primary\" [disabled]=\"loading() || !isFormReadyToSave\"\n            [loading]=\"loading()\" leftIcon=\"save\">\n            {{ submitButtonText }}\n          </button>\n        }\n      </div>\n    </div>\n  </form>\n</div>\n\n<!-- Template Renderers for Role Rights Grid -->\n<ng-template #menuDetailsRendererTemplate let-row=\"row\" let-value=\"value\">\n  <div class=\"tw-flex tw-items-center tw-min-w-0\">\n    <!-- Menu Icon -->\n    <div class=\"tw-flex-shrink-0\">\n      <cide-ele-icon \n        class=\"tw-text-gray-400\" \n        size=\"xs\">\n        {{ row.syme_icon || 'folder_open' }}\n      </cide-ele-icon>\n    </div>\n    \n    <!-- Menu Details -->\n    <div class=\"tw-ml-3 tw-min-w-0 tw-flex-1\">\n      <div class=\"tw-flex tw-items-center tw-gap-2\">\n        <div class=\"tw-text-xs tw-font-medium tw-text-gray-900 tw-truncate\" \n             [title]=\"row.syme_title\">\n          {{ row.syme_title || row.menu?.syme_title || row.menu?.syme_menu_name || 'Untitled' }}\n        </div>\n        <!-- Green pill indicator for parent menus with child permissions -->\n        @if (row.syme_type === 'module' || row.syme_type === 'section') {\n          @if (hasChildMenusWithPermissions(row._id)) {\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\">\n              Assigned\n            </span>\n          }\n        }\n      </div>\n      @if (row.permission?.sygms_name) {\n        <div class=\"tw-text-xs tw-text-blue-500 tw-truncate\" \n             [title]=\"row.permission?.sygms_name\">\n          {{ row.permission?.sygms_name }}\n        </div>\n      }\n    </div>\n  </div>\n</ng-template>\n\n\n<!-- Permissions Checkbox Renderer Template -->\n<ng-template #permissionsCheckboxRendererTemplate let-row=\"row\" let-value=\"value\">\n  <div class=\"tw-flex tw-flex-wrap tw-gap-2 tw-max-w-full\">\n    @if (row.syme_type === 'menu' && row?.syme_permissions_id_sygms && row?.syme_permissions_id_sygms.length > 0) {\n      @for (permissionId of row?.syme_permissions_id_sygms || []; track permissionId) {\n         <div class=\"tw-flex tw-items-center tw-space-x-1\">\n           <cide-ele-input \n             type=\"checkbox\"\n             [label]=\"getPermissionById(permissionId)?.sygms_name || 'Unknown'\"\n             [ngModel]=\"isPermissionSelected(row._id, permissionId)\"\n             (ngModelChange)=\"onPermissionCheckboxChange(row._id, permissionId, $event)\"\n             size=\"xs\"\n             [disabled]=\"isViewMode()\">\n           </cide-ele-input>\n         </div>\n      }\n    } @else {\n      <!-- Show green checkmark for parent menus with child permissions -->\n      @if (row.syme_type === 'module' || row.syme_type === 'section' || row.syme_type === 'title') {\n        @if (hasChildMenusWithPermissions(row._id)) {\n          <div class=\"tw-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-bg-green-100 tw-rounded-full\" \n               [title]=\"hasParentViewRight(row._id) ? 'View right automatically enabled' : 'Child permissions assigned'\">\n            <cide-ele-icon \n              class=\"tw-text-green-600\" \n              size=\"xs\">\n              check\n            </cide-ele-icon>\n          </div>\n        } @else if (hasParentViewRight(row._id)) {\n          <!-- Show green checkmark for parent with view right -->\n          <cide-ele-icon \n            class=\"tw-text-green-600\" \n            size=\"xs\"\n            title=\"View right automatically enabled\">\n            check\n          </cide-ele-icon>\n        } @else {\n          <span class=\"tw-text-xs tw-text-gray-400\">N/A</span>\n        }\n      } @else {\n        <span class=\"tw-text-xs tw-text-gray-400\">N/A</span>\n      }\n    }\n  </div>\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", "ngModel", "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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideCoreUserRoleFormComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cide-core-user-role-form', standalone: true, imports: [
                         CommonModule,
@@ -20967,8 +22022,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                         CideTextareaComponent,
                         CideEleDataGridComponent,
                         CideFormFieldErrorComponent
-                    ], template: "<!-- User Role Form Container -->\n<div class=\"tw-w-full tw-h-full\">\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()\">\n\n    <!-- Error Message -->\n    @if (error()) {\n      <div class=\"tw-mb-6 tw-p-4 tw-bg-red-50 tw-border tw-border-red-200 tw-rounded-md\">\n        <div class=\"tw-flex tw-items-start\">\n          <cide-ele-icon name=\"error\" class=\"tw-text-red-400 tw-w-5 tw-h-5 tw-mt-0.5 tw-flex-shrink-0\"></cide-ele-icon>\n          <div class=\"tw-ml-3\">\n            <h3 class=\"tw-text-sm tw-font-medium tw-text-red-800 tw-m-0\">Error</h3>\n            <p class=\"tw-text-sm tw-text-red-700 tw-mt-1 tw-m-0\">{{ error() }}</p>\n          </div>\n        </div>\n      </div>\n    }\n    <!-- User Role Basic Information Section -->\n    <div class=\"tw-py-2 tw-border-b-0 tw-mb-0  tw-p-3\">\n\n      <!-- Basic Fields -->\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\">\n        <!-- Left Column: Role Name -->\n        <div>\n          <cide-ele-input \n            id=\"syusrol_role_name\" \n            label=\"Role Name\" \n            formControlName=\"syusrol_role_name\"\n            placeholder=\"Enter role name\" \n            [maxlength]=\"50\" \n            size=\"md\"\n            [disabled]=\"isViewMode()\">\n          </cide-ele-input>\n        </div>\n\n        <!-- Right Column: Description -->\n        <div>\n          <cide-ele-textarea \n            id=\"syusrol_role_description\" \n            label=\"Description\" \n            formControlName=\"syusrol_role_description\"\n            placeholder=\"Enter role description\" \n            rows=\"3\"\n            [maxlength]=\"200\"\n            [disabled]=\"isViewMode()\">\n          </cide-ele-textarea>\n        </div>\n      </div>\n\n      <!-- Active Status Row -->\n      <div class=\"tw-mb-0\">\n        <cide-ele-input \n          id=\"syusrol_isactive\" \n          label=\"Active Status\" \n          formControlName=\"syusrol_isactive\"\n          type=\"checkbox\" \n          size=\"md\"\n          [disabled]=\"isViewMode()\">\n        </cide-ele-input>\n      </div>\n    </div>\n\n    <!-- Role Rights Section -->\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\">\n\n      <!-- Role Rights Grid -->\n      <div class=\"tw-flex-1 tw-min-h-0 tw-w-full\" style=\"height: 400px; max-height: 900px;\">\n        <cide-ele-data-grid \n          [config]=\"roleRightsGridConfig()\" \n          [templateRenderers]=\"templateRenderers()\"\n          (gridEvent)=\"onRoleRightsGridEvent($event)\"\n          class=\"tw-h-full tw-w-full\">\n        </cide-ele-data-grid>\n      </div>\n\n      <!-- Role Rights Form (Hidden but functional) -->\n      <div [formGroup]=\"roleRightsForm\" class=\"tw-hidden\">\n        <div formArrayName=\"roleRights\">\n        @for (right of roleRightsArray.controls; track $index; let i = $index) {\n          <div [formGroupName]=\"i\">\n            <cide-ele-select formControlName=\"syusrgt_menu_id_syme\">\n              <option value=\"\">Select Menu</option>\n              @for (menu of menus(); track menu._id) {\n                <option [value]=\"menu._id\">{{ menu.syme_title }}</option>\n              }\n            </cide-ele-select>\n            <cide-ele-select formControlName=\"syusrgt_role_permissions_id_sygms\">\n              <option value=\"\">Select Permission</option>\n              @for (permission of permissions(); track permission._id) {\n                <option [value]=\"permission._id\">{{ permission.sygms_name }}</option>\n              }\n            </cide-ele-select>\n            <cide-ele-input formControlName=\"syusrgt_isactive\" type=\"checkbox\"></cide-ele-input>\n          </div>\n        }\n        </div>\n      </div>\n    </div>\n\n    <!-- Form Actions -->\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\">\n      <!-- Error Message (Left Side) -->\n      <cide-form-field-error [formGroup]=\"userRoleForm\"></cide-form-field-error>\n      \n      <!-- Action Buttons (Right Side) -->\n      <div class=\"tw-flex tw-gap-4\">\n        <button cideEleButton type=\"button\" variant=\"secondary\" (click)=\"onCancel()\" leftIcon=\"arrow_back\"\n          [disabled]=\"loading()\">\n          {{ isViewMode() ? 'Close' : 'Cancel' }}\n        </button>\n\n        @if (!isViewMode()) {\n          <button cideEleButton type=\"submit\" variant=\"primary\" [disabled]=\"loading() || !isFormReadyToSave\"\n            [loading]=\"loading()\" leftIcon=\"save\">\n            {{ submitButtonText }}\n          </button>\n        }\n      </div>\n    </div>\n  </form>\n</div>\n\n<!-- Template Renderers for Role Rights Grid -->\n<ng-template #menuDetailsRendererTemplate let-row=\"row\" let-value=\"value\">\n  <div class=\"tw-flex tw-items-center tw-min-w-0\">\n    <!-- Menu Icon -->\n    <div class=\"tw-flex-shrink-0\">\n      <cide-ele-icon \n        class=\"tw-text-gray-400\" \n        size=\"xs\">\n        {{ row.syme_icon || 'folder_open' }}\n      </cide-ele-icon>\n    </div>\n    \n    <!-- Menu Details -->\n    <div class=\"tw-ml-3 tw-min-w-0 tw-flex-1\">\n      <div class=\"tw-flex tw-items-center tw-gap-2\">\n        <div class=\"tw-text-xs tw-font-medium tw-text-gray-900 tw-truncate\" \n             [title]=\"row.syme_title\">\n          {{ row.syme_title || row.menu?.syme_title || row.menu?.syme_menu_name || 'Untitled' }}\n        </div>\n        <!-- Green pill indicator for parent menus with child permissions -->\n        @if (row.syme_type === 'module' || row.syme_type === 'section') {\n          @if (hasChildMenusWithPermissions(row._id)) {\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\">\n              Assigned\n            </span>\n          }\n        }\n      </div>\n      @if (row.permission?.sygms_name) {\n        <div class=\"tw-text-xs tw-text-blue-500 tw-truncate\" \n             [title]=\"row.permission?.sygms_name\">\n          {{ row.permission?.sygms_name }}\n        </div>\n      }\n    </div>\n  </div>\n</ng-template>\n\n\n<!-- Permissions Checkbox Renderer Template -->\n<ng-template #permissionsCheckboxRendererTemplate let-row=\"row\" let-value=\"value\">\n  <div class=\"tw-flex tw-flex-wrap tw-gap-2 tw-max-w-full\">\n    @if (row.syme_type === 'menu' && row?.syme_permissions_id_sygms && row?.syme_permissions_id_sygms.length > 0) {\n      @for (permissionId of row?.syme_permissions_id_sygms || []; track permissionId) {\n         <div class=\"tw-flex tw-items-center tw-space-x-1\">\n           <cide-ele-input \n             type=\"checkbox\"\n             [label]=\"getPermissionById(permissionId)?.sygms_name || 'Unknown'\"\n             [ngModel]=\"isPermissionSelected(row._id, permissionId)\"\n             (ngModelChange)=\"onPermissionCheckboxChange(row._id, permissionId, $event)\"\n             size=\"xs\"\n             [disabled]=\"isViewMode()\">\n           </cide-ele-input>\n         </div>\n      }\n    } @else {\n      <!-- Show green checkmark for parent menus with child permissions -->\n      @if (row.syme_type === 'module' || row.syme_type === 'section' || row.syme_type === 'title') {\n        @if (hasChildMenusWithPermissions(row._id)) {\n          <div class=\"tw-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-bg-green-100 tw-rounded-full\" \n               [title]=\"hasParentViewRight(row._id) ? 'View right automatically enabled' : 'Child permissions assigned'\">\n            <cide-ele-icon \n              class=\"tw-text-green-600\" \n              size=\"xs\">\n              check\n            </cide-ele-icon>\n          </div>\n        } @else if (hasParentViewRight(row._id)) {\n          <!-- Show green checkmark for parent with view right -->\n          <cide-ele-icon \n            class=\"tw-text-green-600\" \n            size=\"xs\"\n            title=\"View right automatically enabled\">\n            check\n          </cide-ele-icon>\n        } @else {\n          <span class=\"tw-text-xs tw-text-gray-400\">N/A</span>\n        }\n      } @else {\n        <span class=\"tw-text-xs tw-text-gray-400\">N/A</span>\n      }\n    }\n  </div>\n</ng-template>", styles: [":host{@apply tw-w-full tw-h-full tw-flex tw-flex-col;}\n"] }]
-        }] });
+                    ], template: "<!-- User Role Form Container -->\n<div class=\"tw-w-full tw-h-full\">\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()\">\n\n    <!-- Error Message -->\n    @if (error()) {\n      <div class=\"tw-mb-6 tw-p-4 tw-bg-red-50 tw-border tw-border-red-200 tw-rounded-md\">\n        <div class=\"tw-flex tw-items-start\">\n          <cide-ele-icon name=\"error\" class=\"tw-text-red-400 tw-w-5 tw-h-5 tw-mt-0.5 tw-flex-shrink-0\"></cide-ele-icon>\n          <div class=\"tw-ml-3\">\n            <h3 class=\"tw-text-sm tw-font-medium tw-text-red-800 tw-m-0\">Error</h3>\n            <p class=\"tw-text-sm tw-text-red-700 tw-mt-1 tw-m-0\">{{ error() }}</p>\n          </div>\n        </div>\n      </div>\n    }\n    <!-- User Role Basic Information Section -->\n    <div class=\"tw-py-2 tw-border-b-0 tw-mb-0  tw-p-3\">\n\n      <!-- Copy Role Button (only in create mode) -->\n      @if (!isEditMode() && !isViewMode()) {\n        <div class=\"tw-mb-4\">\n          <button \n            cideEleButton \n            type=\"button\"\n            variant=\"secondary\" \n            leftIcon=\"content_copy\"\n            (click)=\"openCopyRoleDialog()\">\n            Copy from Existing Role\n          </button>\n        </div>\n      }\n\n      <!-- Basic Fields -->\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\">\n        <!-- Left Column: Role Name -->\n        <div>\n          <cide-ele-input \n            id=\"syusrol_role_name\" \n            label=\"Role Name\" \n            formControlName=\"syusrol_role_name\"\n            placeholder=\"Enter role name\" \n            [maxlength]=\"50\" \n            size=\"md\"\n            [disabled]=\"isViewMode()\">\n          </cide-ele-input>\n        </div>\n\n        <!-- Right Column: Description -->\n        <div>\n          <cide-ele-textarea \n            id=\"syusrol_role_description\" \n            label=\"Description\" \n            formControlName=\"syusrol_role_description\"\n            placeholder=\"Enter role description\" \n            rows=\"3\"\n            [maxlength]=\"200\"\n            [disabled]=\"isViewMode()\">\n          </cide-ele-textarea>\n        </div>\n      </div>\n\n      <!-- Active Status Row -->\n      <div class=\"tw-mb-0\">\n        <cide-ele-input \n          id=\"syusrol_isactive\" \n          label=\"Active Status\" \n          formControlName=\"syusrol_isactive\"\n          type=\"checkbox\" \n          size=\"md\"\n          [disabled]=\"isViewMode()\">\n        </cide-ele-input>\n      </div>\n    </div>\n\n    <!-- Role Rights Section -->\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\">\n\n      <!-- Role Rights Grid -->\n      <div class=\"tw-flex-1 tw-min-h-0 tw-w-full\" style=\"height: 400px; max-height: 900px;\">\n        <cide-ele-data-grid \n          [config]=\"roleRightsGridConfig()\" \n          [templateRenderers]=\"templateRenderers()\"\n          (gridEvent)=\"onRoleRightsGridEvent($event)\"\n          class=\"tw-h-full tw-w-full\">\n        </cide-ele-data-grid>\n      </div>\n\n      <!-- Role Rights Form (Hidden but functional) -->\n      <div [formGroup]=\"roleRightsForm\" class=\"tw-hidden\">\n        <div formArrayName=\"roleRights\">\n        @for (right of roleRightsArray.controls; track $index; let i = $index) {\n          <div [formGroupName]=\"i\">\n            <cide-ele-select formControlName=\"syusrgt_menu_id_syme\">\n              <option value=\"\">Select Menu</option>\n              @for (menu of menus(); track menu._id) {\n                <option [value]=\"menu._id\">{{ menu.syme_title }}</option>\n              }\n            </cide-ele-select>\n            <cide-ele-select formControlName=\"syusrgt_role_permissions_id_sygms\">\n              <option value=\"\">Select Permission</option>\n              @for (permission of permissions(); track permission._id) {\n                <option [value]=\"permission._id\">{{ permission.sygms_name }}</option>\n              }\n            </cide-ele-select>\n            <cide-ele-input formControlName=\"syusrgt_isactive\" type=\"checkbox\"></cide-ele-input>\n          </div>\n        }\n        </div>\n      </div>\n    </div>\n\n    <!-- Form Actions -->\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\">\n      <!-- Error Message (Left Side) -->\n      <cide-form-field-error [formGroup]=\"userRoleForm\"></cide-form-field-error>\n      \n      <!-- Action Buttons (Right Side) -->\n      <div class=\"tw-flex tw-gap-4\">\n        <button cideEleButton type=\"button\" variant=\"secondary\" (click)=\"onCancel()\" leftIcon=\"arrow_back\"\n          [disabled]=\"loading()\">\n          {{ isViewMode() ? 'Close' : 'Cancel' }}\n        </button>\n\n        @if (!isViewMode()) {\n          <button cideEleButton type=\"submit\" variant=\"primary\" [disabled]=\"loading() || !isFormReadyToSave\"\n            [loading]=\"loading()\" leftIcon=\"save\">\n            {{ submitButtonText }}\n          </button>\n        }\n      </div>\n    </div>\n  </form>\n</div>\n\n<!-- Template Renderers for Role Rights Grid -->\n<ng-template #menuDetailsRendererTemplate let-row=\"row\" let-value=\"value\">\n  <div class=\"tw-flex tw-items-center tw-min-w-0\">\n    <!-- Menu Icon -->\n    <div class=\"tw-flex-shrink-0\">\n      <cide-ele-icon \n        class=\"tw-text-gray-400\" \n        size=\"xs\">\n        {{ row.syme_icon || 'folder_open' }}\n      </cide-ele-icon>\n    </div>\n    \n    <!-- Menu Details -->\n    <div class=\"tw-ml-3 tw-min-w-0 tw-flex-1\">\n      <div class=\"tw-flex tw-items-center tw-gap-2\">\n        <div class=\"tw-text-xs tw-font-medium tw-text-gray-900 tw-truncate\" \n             [title]=\"row.syme_title\">\n          {{ row.syme_title || row.menu?.syme_title || row.menu?.syme_menu_name || 'Untitled' }}\n        </div>\n        <!-- Green pill indicator for parent menus with child permissions -->\n        @if (row.syme_type === 'module' || row.syme_type === 'section') {\n          @if (hasChildMenusWithPermissions(row._id)) {\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\">\n              Assigned\n            </span>\n          }\n        }\n      </div>\n      @if (row.permission?.sygms_name) {\n        <div class=\"tw-text-xs tw-text-blue-500 tw-truncate\" \n             [title]=\"row.permission?.sygms_name\">\n          {{ row.permission?.sygms_name }}\n        </div>\n      }\n    </div>\n  </div>\n</ng-template>\n\n\n<!-- Permissions Checkbox Renderer Template -->\n<ng-template #permissionsCheckboxRendererTemplate let-row=\"row\" let-value=\"value\">\n  <div class=\"tw-flex tw-flex-wrap tw-gap-2 tw-max-w-full\">\n    @if (row.syme_type === 'menu' && row?.syme_permissions_id_sygms && row?.syme_permissions_id_sygms.length > 0) {\n      @for (permissionId of row?.syme_permissions_id_sygms || []; track permissionId) {\n         <div class=\"tw-flex tw-items-center tw-space-x-1\">\n           <cide-ele-input \n             type=\"checkbox\"\n             [label]=\"getPermissionById(permissionId)?.sygms_name || 'Unknown'\"\n             [ngModel]=\"isPermissionSelected(row._id, permissionId)\"\n             (ngModelChange)=\"onPermissionCheckboxChange(row._id, permissionId, $event)\"\n             size=\"xs\"\n             [disabled]=\"isViewMode()\">\n           </cide-ele-input>\n         </div>\n      }\n    } @else {\n      <!-- Show green checkmark for parent menus with child permissions -->\n      @if (row.syme_type === 'module' || row.syme_type === 'section' || row.syme_type === 'title') {\n        @if (hasChildMenusWithPermissions(row._id)) {\n          <div class=\"tw-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-bg-green-100 tw-rounded-full\" \n               [title]=\"hasParentViewRight(row._id) ? 'View right automatically enabled' : 'Child permissions assigned'\">\n            <cide-ele-icon \n              class=\"tw-text-green-600\" \n              size=\"xs\">\n              check\n            </cide-ele-icon>\n          </div>\n        } @else if (hasParentViewRight(row._id)) {\n          <!-- Show green checkmark for parent with view right -->\n          <cide-ele-icon \n            class=\"tw-text-green-600\" \n            size=\"xs\"\n            title=\"View right automatically enabled\">\n            check\n          </cide-ele-icon>\n        } @else {\n          <span class=\"tw-text-xs tw-text-gray-400\">N/A</span>\n        }\n      } @else {\n        <span class=\"tw-text-xs tw-text-gray-400\">N/A</span>\n      }\n    }\n  </div>\n</ng-template>", styles: [":host{@apply tw-w-full tw-h-full tw-flex tw-flex-col;}\n"] }]
+        }], propDecorators: { menuDetailsRendererTemplate: [{ type: i0.ViewChild, args: ['menuDetailsRendererTemplate', { isSignal: true }] }], permissionsCheckboxRendererTemplate: [{ type: i0.ViewChild, args: ['permissionsCheckboxRendererTemplate', { isSignal: true }] }] } });
 
 var userRoleForm_component = /*#__PURE__*/Object.freeze({
     __proto__: null,
@@ -21032,10 +22087,10 @@ class CideCoreNationalityService {
         };
         return this.getAllNationalities(payload);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCoreNationalityService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCoreNationalityService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideCoreNationalityService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideCoreNationalityService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCoreNationalityService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideCoreNationalityService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -21084,10 +22139,10 @@ class CideCoreClassProgramMasterService {
             pagination: false
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCoreClassProgramMasterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCoreClassProgramMasterService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideCoreClassProgramMasterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideCoreClassProgramMasterService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCoreClassProgramMasterService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideCoreClassProgramMasterService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'