cloud-ide-core 2.0.75 → 2.0.78

package/fesm2022/cloud-ide-core.mjs

@@ -13,7 +13,7 @@ import { coreRoutesUrl, generateStringFromObject, cidePath, hostManagerRoutesUrl
 import * as i1 from '@angular/common/http';
 import { HttpClient } from '@angular/common/http';
 import { NotificationService, CideEleDataGridComponent, CideEleButtonComponent, CideInputComponent, CideSelectComponent, CideTextareaComponent, CideIconComponent, CideEleDropdownComponent, ConfirmationService, CideEleGlobalNotificationsComponent, CideEleConfirmationModalComponent, CideEleJsonEditorComponent, CideEleFileInputComponent, CideEleFileImageDirective, CideFormFieldErrorComponent, CideEleFileManagerService, CideEleTabComponent, CideEleFloatingFeaturesService, CideEleToastNotificationComponent } from 'cloud-ide-element';
-import { AppStateHelperService, CideLytSharedWrapperComponent, CideLytFloatingEntityRightsSharingService } from 'cloud-ide-layout';
+import { RightsService, AppStateHelperService, CideLytSharedWrapperComponent, CideLytFloatingEntityRightsSharingService } from 'cloud-ide-layout';
 
 const coreRoutes = [
     {
@@ -63,7 +63,7 @@ const coreRoutes = [
     },
     {
         path: 'page-form',
-        loadComponent: () => import('./cloud-ide-core-page-form.component-DMiL9oSs.mjs').then(c => c.CideCorePageFormComponent),
+        loadComponent: () => import('./cloud-ide-core-page-form.component-DbJcPXgS.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-DMiL9oSs.mjs').then(c => c.CideCorePageFormComponent),
+        loadComponent: () => import('./cloud-ide-core-page-form.component-DbJcPXgS.mjs').then(c => c.CideCorePageFormComponent),
         title: 'Page Form',
         canActivate: [authGuard],
         data: {
@@ -968,6 +968,7 @@ class MenuListComponent {
     notificationService = inject(NotificationService);
     fb = inject(NonNullableFormBuilder);
     router = inject(Router);
+    rightsService = inject(RightsService);
     // Modern ViewChild signals for template renderers (Angular 20 approach)
     menuDetailsRendererTemplate = viewChild.required('menuDetailsRendererTemplate');
     menuTypeRendererTemplate = viewChild.required('menuTypeRendererTemplate');
@@ -1190,9 +1191,27 @@ class MenuListComponent {
     }
     // Action handlers for grid actions
     actionHandlers = {
-        onEditMenuItem: (row) => this.editMenuItem(row._id || ''),
-        onToggleMenuItem: (row) => this.toggleItemStatus(row._id || ''),
-        onDeleteMenuItem: (row) => this.deleteMenuItem(row._id || ''),
+        onEditMenuItem: (row) => {
+            if (!this.rightsService.hasRight('EDIT')) {
+                this.error.set('You do not have permission to edit menu items');
+                return;
+            }
+            this.editMenuItem(row._id || '');
+        },
+        onToggleMenuItem: (row) => {
+            if (!this.rightsService.hasRight('EDIT')) {
+                this.error.set('You do not have permission to change menu item status');
+                return;
+            }
+            this.toggleItemStatus(row._id || '');
+        },
+        onDeleteMenuItem: (row) => {
+            if (!this.rightsService.hasRight('DELETE')) {
+                this.error.set('You do not have permission to delete menu items');
+                return;
+            }
+            this.deleteMenuItem(row._id || '');
+        },
         onMenuItemRowClick: (row) => this.onMenuItemRowClick(row),
         onMenuItemRefresh: () => this.onMenuItemRefresh(),
         onAddChild: (row) => this.onAddChild(row),
@@ -1213,6 +1232,10 @@ class MenuListComponent {
             this.cleanupEventListeners();
         });
     }
+    ngOnInit() {
+        // Initialize rights for menu management
+        this.rightsService.initializeRights('core_menu_list');
+    }
     /**
      * Initialize component with modern patterns
      */
@@ -1664,6 +1687,10 @@ class MenuListComponent {
      * Navigate to edit menu form
      */
     editMenuItem(itemId) {
+        if (!this.rightsService.hasRight('EDIT')) {
+            this.error.set('You do not have permission to edit menu items');
+            return;
+        }
         console.log('🔵 editMenuItem called with:', itemId);
         // Set edit mode and get the menu item by ID
         this.isEditMode.set(true);
@@ -1737,6 +1764,10 @@ class MenuListComponent {
      * Delete menu item
      */
     deleteMenuItem(itemId) {
+        if (!this.rightsService.hasRight('DELETE')) {
+            this.error.set('You do not have permission to delete menu items');
+            return;
+        }
         console.log('🔵 deleteMenuItem called with:', itemId);
         if (confirm('Are you sure you want to delete this menu item?')) {
             this.loading.set(true);
@@ -1797,6 +1828,10 @@ class MenuListComponent {
      * Toggle menu item status
      */
     toggleItemStatus(itemId) {
+        if (!this.rightsService.hasRight('EDIT')) {
+            this.error.set('You do not have permission to change menu item status');
+            return;
+        }
         console.log('🔵 toggleItemStatus called with:', itemId);
         this.loading.set(true);
         this.menuService.toggleMenuItemStatus(itemId)
@@ -1899,6 +1934,11 @@ class MenuListComponent {
      * Quick add or update menu item using reactive form
      */
     quickAddMenuItem() {
+        const requiredRight = this.isEditMode() ? 'EDIT' : 'CREATE';
+        if (!this.rightsService.hasRight(requiredRight)) {
+            this.error.set(`You do not have permission to ${this.isEditMode() ? 'edit' : 'create'} menu items`);
+            return;
+        }
         if (this.quickAddForm.invalid)
             return;
         const formValue = this.quickAddForm.value;
@@ -1987,6 +2027,10 @@ class MenuListComponent {
      * Handle add child button click from row action
      */
     onAddChild(parentItem) {
+        if (!this.rightsService.hasRight('CREATE')) {
+            this.error.set('You do not have permission to create menu items');
+            return;
+        }
         console.log('🔵 onAddChild called with:', parentItem);
         console.log('🔵 Parent title:', parentItem.syme_title);
         // Clear edit mode and retrieved item when adding a child
@@ -2310,7 +2354,7 @@ class MenuListComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: MenuListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: MenuListComponent, isStandalone: true, selector: "cide-core-app-menu-list", viewQueries: [{ propertyName: "menuDetailsRendererTemplate", first: true, predicate: ["menuDetailsRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "menuTypeRendererTemplate", first: true, predicate: ["menuTypeRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "permissionsRendererTemplate", first: true, predicate: ["permissionsRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "actionsDropdownRendererTemplate", first: true, predicate: ["actionsDropdownRendererTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Menu List Container -->\r\n<div class=\"tw-table tw-w-full tw-h-full\">\r\n\r\n  <!-- Quick Add Form Section -->\r\n  <div class=\"tw-table-row tw-h-0\">\r\n    <div class=\"tw-table-cell tw-px-6 tw-py-4 tw-border-b tw-border-gray-200 tw-bg-white\">\r\n    <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\r\n      <div class=\"tw-flex tw-items-center tw-space-x-3\">\r\n        <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\r\n        <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-m-0\">{{ isEditMode() ? 'Edit Menu Item' : 'Quick Add Menu Item' }}</h6>\r\n      </div>\r\n      @if (selectedParentItem()) {\r\n        <div class=\"tw-flex tw-items-center tw-space-x-3 tw-bg-blue-50 tw-border tw-border-blue-200 tw-px-4 tw-py-2 tw-rounded-lg\">\r\n          <cide-ele-icon class=\"tw-text-blue-600 tw-w-4 tw-h-4\">account_tree</cide-ele-icon>\r\n          <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\n            <span class=\"tw-text-sm tw-text-blue-600 tw-font-medium\">{{ isEditMode() ? 'Parent:' : 'Creating child under:' }}</span>\r\n            <span class=\"tw-text-sm tw-text-blue-800 tw-font-semibold\">{{ selectedParentItem()?.syme_title }}</span>\r\n          </div>\r\n          <button \r\n            cideEleButton \r\n            variant=\"ghost\" \r\n            size=\"xs\" \r\n            type=\"button\" \r\n            (click)=\"clearSelectedParent()\" \r\n            class=\"tw-text-blue-400 hover:tw-text-blue-600\">\r\n            <svg class=\"tw-w-4 tw-h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\"/>\r\n            </svg>\r\n          </button>\r\n        </div>\r\n      }\r\n    </div>\r\n    \r\n    <form [formGroup]=\"quickAddForm\" (ngSubmit)=\"quickAddMenuItem()\">\r\n    <!-- First Row -->\r\n    <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-3 tw-mb-3\">\r\n      <!-- Menu Title -->\r\n      <div>\r\n        <cide-ele-input \r\n          id=\"syme_title\" \r\n          label=\"Title\" \r\n          formControlName=\"syme_title\"\r\n          size=\"sm\">\r\n        </cide-ele-input>\r\n      </div>\r\n      \r\n      <!-- Menu Type -->\r\n      <div>\r\n        <cide-ele-select \r\n          label=\"Type*\" \r\n          [options]=\"menuTypeOptions()\" \r\n          formControlName=\"syme_type\"\r\n          placeholder=\"Select type\"\r\n          size=\"sm\"\r\n          (ngModelChange)=\"onMenuTypeChange()\">\r\n        </cide-ele-select>\r\n      </div>\r\n      \r\n      <!-- Path -->\r\n      <div>\r\n        <cide-ele-input \r\n          id=\"quickPath\" \r\n          type=\"text\"\r\n          label=\"Path\" \r\n          formControlName=\"syme_path\"\r\n          placeholder=\"/path/to/route\"\r\n          size=\"sm\">\r\n        </cide-ele-input>\r\n      </div>\r\n      \r\n      <!-- Icon -->\r\n      <div>\r\n        <cide-ele-input \r\n          id=\"quickIcon\" \r\n          type=\"text\"\r\n          label=\"Icon\" \r\n          formControlName=\"syme_icon\"\r\n          placeholder=\"Icon name\"\r\n          size=\"sm\">\r\n        </cide-ele-input>\r\n      </div>\r\n      \r\n      <!-- Empty div for spacing -->\r\n      <div></div>\r\n    </div>\r\n    \r\n    <!-- Second Row -->\r\n    <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-3 tw-items-end\">\r\n      <!-- Description -->\r\n      <div>\r\n        <cide-ele-textarea \r\n          id=\"syme_desc\" \r\n          label=\"Description\" \r\n          formControlName=\"syme_desc\"\r\n          placeholder=\"Menu description\"\r\n          rows=\"2\"\r\n          size=\"sm\">\r\n        </cide-ele-textarea>\r\n      </div>\r\n      \r\n      <!-- Permissions (only show for menu and title types) -->\r\n      @if (quickAddForm.get('syme_type')?.value === 'menu') {\r\n      <div>\r\n          <cide-ele-select \r\n            label=\"Permissions\" \r\n            [options]=\"permissionOptions()\" \r\n            formControlName=\"syme_permissions_id_sygms\"\r\n            placeholder=\"Select permissions for this menu\"\r\n            [multiple]=\"true\"\r\n            size=\"sm\">\r\n          </cide-ele-select>\r\n        </div>\r\n      }\r\n      \r\n      <!-- Pages (multiselect) -->\r\n      <div>\r\n        <cide-ele-select \r\n          label=\"Pages\" \r\n          [options]=\"pageOptions()\" \r\n          formControlName=\"syme_pages_id_sypg\"\r\n          placeholder=\"Select pages to connect\"\r\n          [multiple]=\"true\"\r\n          [loading]=\"pagesLoading()\"\r\n          size=\"sm\">\r\n        </cide-ele-select>\r\n      </div>\r\n      \r\n      <!-- Link -->\r\n      <div>\r\n        <cide-ele-input \r\n          id=\"quickLink\" \r\n          type=\"text\"\r\n          label=\"Link\" \r\n          formControlName=\"syme_link\"\r\n          placeholder=\"External link\"\r\n          size=\"sm\">\r\n        </cide-ele-input>\r\n      </div>\r\n      \r\n      <!-- Active Status and Action Buttons -->\r\n      <div class=\"tw-flex tw-flex-col tw-justify-end\">\r\n        <div class=\"tw-flex tw-items-center tw-space-x-3\">\r\n          <!-- Active Checkbox -->\r\n          <cide-ele-input \r\n            id=\"quickIsActive\"\r\n            type=\"checkbox\"\r\n            label=\"Active\"\r\n            formControlName=\"syme_isactive\"\r\n            size=\"sm\">\r\n          </cide-ele-input>\r\n          \r\n          <!-- Action Buttons -->\r\n          <button \r\n            cideEleButton \r\n            variant=\"primary\" \r\n            size=\"sm\" \r\n            type=\"submit\"\r\n            [disabled]=\"quickAddForm.invalid\"\r\n            class=\"tw-px-2 tw-py-1 tw-w-20\">\r\n            <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\r\n            {{ isEditMode() ? 'Update' : 'Add' }}\r\n          </button>\r\n          <button \r\n            cideEleButton \r\n            variant=\"outline\" \r\n            size=\"sm\" \r\n            type=\"button\"\r\n            (click)=\"resetQuickAddForm()\"\r\n            class=\"tw-px-2 tw-py-1 tw-w-16\">\r\n            <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">refresh</cide-ele-icon>\r\n            Reset\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    </form>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Main Content Area -->\r\n  <div class=\"tw-table-row\">\r\n    <div class=\"tw-table-cell tw-h-full tw-relative tw-p-0\">\r\n  <!-- Data Grid Component -->\r\n  <div class=\"tw-h-full tw-w-full tw-overflow-auto\">\r\n    \r\n    <cide-ele-data-grid \r\n      [config]=\"gridConfig()\" \r\n      [templateRenderers]=\"getTemplateRenderers()\"\r\n      [actionHandlers]=\"actionHandlers\"\r\n      [dragDropEnabled]=\"true\" \r\n      (gridEvent)=\"onGridEvent($event)\">\r\n    </cide-ele-data-grid>\r\n  </div>\r\n\r\n\r\n    </div>\r\n  </div>\r\n\r\n</div>\r\n\r\n<!-- \r\n  Angular Template References for Grid Renderers (Best Practice)\r\n  \r\n  These ng-template elements represent the Angular best practice for custom rendering.\r\n  They provide:\r\n  - Type safety with template context\r\n  - Component lifecycle integration\r\n  - Change detection optimization\r\n  - Proper event handling\r\n  - Accessibility features\r\n  \r\n  Note: Current data grid uses string renderers for compatibility.\r\n  Templates are maintained for future component enhancement.\r\n-->\r\n\r\n\r\n\r\n<!-- Menu Details Renderer Template -->\r\n<ng-template #menuDetailsRendererTemplate let-row=\"row\" let-value=\"value\">\r\n  <div class=\"tw-flex tw-items-center tw-min-w-0\">\r\n    <!-- Menu Icon -->\r\n    <div class=\"tw-flex-shrink-0\">\r\n      <cide-ele-icon \r\n        class=\"tw-text-gray-400\" \r\n        size=\"xs\">\r\n        {{ row.syme_icon || 'folder_open' }}\r\n      </cide-ele-icon>\r\n    </div>\r\n    \r\n    <!-- Menu Details -->\r\n    <div class=\"tw-ml-3 tw-min-w-0 tw-flex-1\">\r\n      <div class=\"tw-text-xs tw-font-medium tw-text-gray-900 tw-truncate\" \r\n           [title]=\"row.syme_title\">\r\n        {{ row.syme_title || 'Untitled' }}\r\n      </div>\r\n      @if (row.syme_desc) {\r\n        <div class=\"tw-text-xs tw-text-gray-500 tw-truncate\" \r\n             [title]=\"row.syme_desc\">\r\n          {{ row.syme_desc }}\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- Menu Type Renderer Template -->\r\n<ng-template #menuTypeRendererTemplate let-row=\"row\" let-value=\"value\">\r\n  <span class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-whitespace-nowrap\"\r\n        [ngClass]=\"getMenuTypeClass(row.syme_type)\">\r\n    {{ getMenuTypeLabel(row.syme_type) }}\r\n  </span>\r\n</ng-template>\r\n\r\n<!-- Actions Dropdown Renderer Template -->\r\n<ng-template #actionsDropdownRendererTemplate let-row=\"row\" let-value=\"value\">\r\n  <cide-ele-dropdown \r\n    [items]=\"getDropdownItems(row)\"\r\n    [config]=\"{ triggerIcon: 'more_vert', triggerSize: 'sm' }\"\r\n    (itemClick)=\"onDropdownItemClick($event, row)\">\r\n  </cide-ele-dropdown>\r\n</ng-template>\r\n\r\n<!-- Permissions Renderer Template -->\r\n<ng-template #permissionsRendererTemplate let-row=\"row\" let-value=\"value\">\r\n  <div class=\"tw-flex tw-flex-wrap tw-gap-1 tw-max-w-full tw-items-center\">\r\n    @if (row.syme_type === 'menu') {\r\n      @if (row.syme_permissions_id_sygms && row.syme_permissions_id_sygms.length > 0) {\r\n        @for (permissionId of row.syme_permissions_id_sygms.slice(0, 3); track permissionId) {\r\n          <span class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-blue-100 tw-text-blue-800 tw-whitespace-nowrap tw-h-5\">\r\n            {{ getPermissionById(permissionId)?.sygms_title || getPermissionById(permissionId)?.sygms_code || 'Unknown' }}\r\n          </span>\r\n        }\r\n        @if (row.syme_permissions_id_sygms.length > 3) {\r\n          <span \r\n            class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-gray-100 tw-text-gray-600 tw-whitespace-nowrap tw-cursor-help tw-h-5\"\r\n            [title]=\"getAllPermissionNames(row.syme_permissions_id_sygms)\">\r\n            +{{ row.syme_permissions_id_sygms.length - 3 }} more\r\n          </span>\r\n        }\r\n      } @else {\r\n        <span class=\"tw-text-xs tw-text-gray-500 tw-h-5 tw-flex tw-items-center\">No permissions</span>\r\n      }\r\n    } @else {\r\n      <!-- Show N/A for module, section, and title types -->\r\n      <span class=\"tw-text-xs tw-text-gray-400 tw-h-5 tw-flex tw-items-center\">N/A</span>\r\n    }\r\n  </div>\r\n</ng-template>\r\n\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: CideEleDataGridComponent, selector: "cide-ele-data-grid", inputs: ["config", "templateRenderers", "customFormatters", "actionHandlers", "serverSidePagination", "totalServerItems", "currentServerPage", "currentServerPageSize", "dragDropEnabled"], outputs: ["gridEvent"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideInputComponent, selector: "cide-ele-input", inputs: ["fill", "label", "labelHide", "disabled", "clearInput", "labelPlacement", "labelDir", "placeholder", "leadingIcon", "trailingIcon", "helperText", "helperTextCollapse", "hideHelperAndErrorText", "errorText", "maxlength", "minlength", "required", "autocapitalize", "autocomplete", "type", "width", "id", "ngModel", "option", "min", "max", "step", "size"], outputs: ["ngModelChange"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput", "options", "multiple", "searchable", "showSearchInput", "loading", "valueKey", "labelKey", "treeView"], outputs: ["ngModelChange", "change", "searchChange"] }, { kind: "component", type: CideTextareaComponent, selector: "cide-ele-textarea", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "minlength", "maxlength", "rows", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput"], outputs: ["ngModelChange"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideEleDropdownComponent, selector: "cide-ele-dropdown", inputs: ["items", "config", "triggerTemplate", "menuTemplate"], outputs: ["itemClick", "dropdownToggle"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: MenuListComponent, isStandalone: true, selector: "cide-core-app-menu-list", viewQueries: [{ propertyName: "menuDetailsRendererTemplate", first: true, predicate: ["menuDetailsRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "menuTypeRendererTemplate", first: true, predicate: ["menuTypeRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "permissionsRendererTemplate", first: true, predicate: ["permissionsRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "actionsDropdownRendererTemplate", first: true, predicate: ["actionsDropdownRendererTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Menu List Container -->\r\n<div class=\"tw-table tw-w-full tw-h-full\">\r\n\r\n  <!-- Quick Add Form Section -->\r\n  <div class=\"tw-table-row tw-h-0\">\r\n    <div class=\"tw-table-cell tw-px-6 tw-py-4 tw-border-b tw-border-gray-200 tw-bg-white\">\r\n    <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\r\n      <div class=\"tw-flex tw-items-center tw-space-x-3\">\r\n        <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\r\n        <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-m-0\">{{ isEditMode() ? 'Edit Menu Item' : 'Quick Add Menu Item' }}</h6>\r\n      </div>\r\n      @if (selectedParentItem()) {\r\n        <div class=\"tw-flex tw-items-center tw-space-x-3 tw-bg-blue-50 tw-border tw-border-blue-200 tw-px-4 tw-py-2 tw-rounded-lg\">\r\n          <cide-ele-icon class=\"tw-text-blue-600 tw-w-4 tw-h-4\">account_tree</cide-ele-icon>\r\n          <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\n            <span class=\"tw-text-sm tw-text-blue-600 tw-font-medium\">{{ isEditMode() ? 'Parent:' : 'Creating child under:' }}</span>\r\n            <span class=\"tw-text-sm tw-text-blue-800 tw-font-semibold\">{{ selectedParentItem()?.syme_title }}</span>\r\n          </div>\r\n          <button \r\n            cideEleButton \r\n            variant=\"ghost\" \r\n            size=\"xs\" \r\n            type=\"button\" \r\n            (click)=\"clearSelectedParent()\" \r\n            class=\"tw-text-blue-400 hover:tw-text-blue-600\">\r\n            <svg class=\"tw-w-4 tw-h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\"/>\r\n            </svg>\r\n          </button>\r\n        </div>\r\n      }\r\n    </div>\r\n    \r\n    <form [formGroup]=\"quickAddForm\" (ngSubmit)=\"quickAddMenuItem()\">\r\n    <!-- First Row -->\r\n    <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-3 tw-mb-3\">\r\n      <!-- Menu Title -->\r\n      <div>\r\n        <cide-ele-input \r\n          id=\"syme_title\" \r\n          label=\"Title\" \r\n          formControlName=\"syme_title\"\r\n          size=\"sm\">\r\n        </cide-ele-input>\r\n      </div>\r\n      \r\n      <!-- Menu Type -->\r\n      <div>\r\n        <cide-ele-select \r\n          label=\"Type*\" \r\n          [options]=\"menuTypeOptions()\" \r\n          formControlName=\"syme_type\"\r\n          placeholder=\"Select type\"\r\n          size=\"sm\"\r\n          (ngModelChange)=\"onMenuTypeChange()\">\r\n        </cide-ele-select>\r\n      </div>\r\n      \r\n      <!-- Path -->\r\n      <div>\r\n        <cide-ele-input \r\n          id=\"quickPath\" \r\n          type=\"text\"\r\n          label=\"Path\" \r\n          formControlName=\"syme_path\"\r\n          placeholder=\"/path/to/route\"\r\n          size=\"sm\">\r\n        </cide-ele-input>\r\n      </div>\r\n      \r\n      <!-- Icon -->\r\n      <div>\r\n        <cide-ele-input \r\n          id=\"quickIcon\" \r\n          type=\"text\"\r\n          label=\"Icon\" \r\n          formControlName=\"syme_icon\"\r\n          placeholder=\"Icon name\"\r\n          size=\"sm\">\r\n        </cide-ele-input>\r\n      </div>\r\n      \r\n      <!-- Empty div for spacing -->\r\n      <div></div>\r\n    </div>\r\n    \r\n    <!-- Second Row -->\r\n    <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-3 tw-items-end\">\r\n      <!-- Description -->\r\n      <div>\r\n        <cide-ele-textarea \r\n          id=\"syme_desc\" \r\n          label=\"Description\" \r\n          formControlName=\"syme_desc\"\r\n          placeholder=\"Menu description\"\r\n          rows=\"2\"\r\n          size=\"sm\">\r\n        </cide-ele-textarea>\r\n      </div>\r\n      \r\n      <!-- Permissions (only show for menu and title types) -->\r\n      @if (quickAddForm.get('syme_type')?.value === 'menu') {\r\n      <div>\r\n          <cide-ele-select \r\n            label=\"Permissions\" \r\n            [options]=\"permissionOptions()\" \r\n            formControlName=\"syme_permissions_id_sygms\"\r\n            placeholder=\"Select permissions for this menu\"\r\n            [multiple]=\"true\"\r\n            size=\"sm\">\r\n          </cide-ele-select>\r\n        </div>\r\n      }\r\n      \r\n      <!-- Pages (multiselect) -->\r\n      <div>\r\n        <cide-ele-select \r\n          label=\"Pages\" \r\n          [options]=\"pageOptions()\" \r\n          formControlName=\"syme_pages_id_sypg\"\r\n          placeholder=\"Select pages to connect\"\r\n          [multiple]=\"true\"\r\n          [loading]=\"pagesLoading()\"\r\n          size=\"sm\">\r\n        </cide-ele-select>\r\n      </div>\r\n      \r\n      <!-- Link -->\r\n      <div>\r\n        <cide-ele-input \r\n          id=\"quickLink\" \r\n          type=\"text\"\r\n          label=\"Link\" \r\n          formControlName=\"syme_link\"\r\n          placeholder=\"External link\"\r\n          size=\"sm\">\r\n        </cide-ele-input>\r\n      </div>\r\n      \r\n      <!-- Active Status and Action Buttons -->\r\n      <div class=\"tw-flex tw-flex-col tw-justify-end\">\r\n        <div class=\"tw-flex tw-items-center tw-space-x-3\">\r\n          <!-- Active Checkbox -->\r\n          <cide-ele-input \r\n            id=\"quickIsActive\"\r\n            type=\"checkbox\"\r\n            label=\"Active\"\r\n            formControlName=\"syme_isactive\"\r\n            size=\"sm\">\r\n          </cide-ele-input>\r\n          \r\n          <!-- Action Buttons -->\r\n          <button \r\n            cideEleButton \r\n            variant=\"primary\" \r\n            size=\"sm\" \r\n            type=\"submit\"\r\n            [disabled]=\"quickAddForm.invalid\"\r\n            class=\"tw-px-2 tw-py-1 tw-w-20\">\r\n            <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\r\n            {{ isEditMode() ? 'Update' : 'Add' }}\r\n          </button>\r\n          <button \r\n            cideEleButton \r\n            variant=\"outline\" \r\n            size=\"sm\" \r\n            type=\"button\"\r\n            (click)=\"resetQuickAddForm()\"\r\n            class=\"tw-px-2 tw-py-1 tw-w-16\">\r\n            <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">refresh</cide-ele-icon>\r\n            Reset\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    </form>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Main Content Area -->\r\n  <div class=\"tw-table-row\">\r\n    <div class=\"tw-table-cell tw-h-full tw-relative tw-p-0\">\r\n  <!-- Data Grid Component -->\r\n  <div class=\"tw-h-full tw-w-full tw-overflow-auto\">\r\n    \r\n    <cide-ele-data-grid \r\n      [config]=\"gridConfig()\" \r\n      [templateRenderers]=\"getTemplateRenderers()\"\r\n      [actionHandlers]=\"actionHandlers\"\r\n      [dragDropEnabled]=\"true\" \r\n      (gridEvent)=\"onGridEvent($event)\">\r\n    </cide-ele-data-grid>\r\n  </div>\r\n\r\n\r\n    </div>\r\n  </div>\r\n\r\n</div>\r\n\r\n<!-- \r\n  Angular Template References for Grid Renderers (Best Practice)\r\n  \r\n  These ng-template elements represent the Angular best practice for custom rendering.\r\n  They provide:\r\n  - Type safety with template context\r\n  - Component lifecycle integration\r\n  - Change detection optimization\r\n  - Proper event handling\r\n  - Accessibility features\r\n  \r\n  Note: Current data grid uses string renderers for compatibility.\r\n  Templates are maintained for future component enhancement.\r\n-->\r\n\r\n\r\n\r\n<!-- Menu Details Renderer Template -->\r\n<ng-template #menuDetailsRendererTemplate let-row=\"row\" let-value=\"value\">\r\n  <div class=\"tw-flex tw-items-center tw-min-w-0\">\r\n    <!-- Menu Icon -->\r\n    <div class=\"tw-flex-shrink-0\">\r\n      <cide-ele-icon \r\n        class=\"tw-text-gray-400\" \r\n        size=\"xs\">\r\n        {{ row.syme_icon || 'folder_open' }}\r\n      </cide-ele-icon>\r\n    </div>\r\n    \r\n    <!-- Menu Details -->\r\n    <div class=\"tw-ml-3 tw-min-w-0 tw-flex-1\">\r\n      <div class=\"tw-text-xs tw-font-medium tw-text-gray-900 tw-truncate\" \r\n           [title]=\"row.syme_title\">\r\n        {{ row.syme_title || 'Untitled' }}\r\n      </div>\r\n      @if (row.syme_desc) {\r\n        <div class=\"tw-text-xs tw-text-gray-500 tw-truncate\" \r\n             [title]=\"row.syme_desc\">\r\n          {{ row.syme_desc }}\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- Menu Type Renderer Template -->\r\n<ng-template #menuTypeRendererTemplate let-row=\"row\" let-value=\"value\">\r\n  <span class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-whitespace-nowrap\"\r\n        [ngClass]=\"getMenuTypeClass(row.syme_type)\">\r\n    {{ getMenuTypeLabel(row.syme_type) }}\r\n  </span>\r\n</ng-template>\r\n\r\n<!-- Actions Dropdown Renderer Template -->\r\n<ng-template #actionsDropdownRendererTemplate let-row=\"row\" let-value=\"value\">\r\n  <cide-ele-dropdown \r\n    [items]=\"getDropdownItems(row)\"\r\n    [config]=\"{ triggerIcon: 'more_vert', triggerSize: 'sm' }\"\r\n    (itemClick)=\"onDropdownItemClick($event, row)\">\r\n  </cide-ele-dropdown>\r\n</ng-template>\r\n\r\n<!-- Permissions Renderer Template -->\r\n<ng-template #permissionsRendererTemplate let-row=\"row\" let-value=\"value\">\r\n  <div class=\"tw-flex tw-flex-wrap tw-gap-1 tw-max-w-full tw-items-center\">\r\n    @if (row.syme_type === 'menu') {\r\n      @if (row.syme_permissions_id_sygms && row.syme_permissions_id_sygms.length > 0) {\r\n        @for (permissionId of row.syme_permissions_id_sygms.slice(0, 3); track permissionId) {\r\n          <span class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-blue-100 tw-text-blue-800 tw-whitespace-nowrap tw-h-5\">\r\n            {{ getPermissionById(permissionId)?.sygms_title || getPermissionById(permissionId)?.sygms_code || 'Unknown' }}\r\n          </span>\r\n        }\r\n        @if (row.syme_permissions_id_sygms.length > 3) {\r\n          <span \r\n            class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-gray-100 tw-text-gray-600 tw-whitespace-nowrap tw-cursor-help tw-h-5\"\r\n            [title]=\"getAllPermissionNames(row.syme_permissions_id_sygms)\">\r\n            +{{ row.syme_permissions_id_sygms.length - 3 }} more\r\n          </span>\r\n        }\r\n      } @else {\r\n        <span class=\"tw-text-xs tw-text-gray-500 tw-h-5 tw-flex tw-items-center\">No permissions</span>\r\n      }\r\n    } @else {\r\n      <!-- Show N/A for module, section, and title types -->\r\n      <span class=\"tw-text-xs tw-text-gray-400 tw-h-5 tw-flex tw-items-center\">N/A</span>\r\n    }\r\n  </div>\r\n</ng-template>\r\n\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: CideEleDataGridComponent, selector: "cide-ele-data-grid", inputs: ["config", "templateRenderers", "customFormatters", "actionHandlers", "serverSidePagination", "totalServerItems", "currentServerPage", "currentServerPageSize", "dragDropEnabled"], outputs: ["gridEvent"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideInputComponent, selector: "cide-ele-input", inputs: ["fill", "label", "labelHide", "disabled", "clearInput", "labelPlacement", "labelDir", "placeholder", "leadingIcon", "trailingIcon", "helperText", "helperTextCollapse", "hideHelperAndErrorText", "errorText", "maxlength", "minlength", "required", "autocapitalize", "autocomplete", "type", "width", "id", "ngModel", "option", "min", "max", "step", "size"], outputs: ["ngModelChange"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: MenuListComponent, decorators: [{
             type: Component,
@@ -5022,7 +5066,7 @@ class CideCoreDesignationListComponent {
         return item._id || '';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCoreDesignationListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideCoreDesignationListComponent, isStandalone: true, selector: "cide-core-designation-list", viewQueries: [{ propertyName: "designationDetailsRendererTemplate", first: true, predicate: ["designationDetailsRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "designationStatusRendererTemplate", first: true, predicate: ["designationStatusRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "actionsDropdownRendererTemplate", first: true, predicate: ["actionsDropdownRendererTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Designation List with Shared Wrapper -->\r\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'core_designation_list' }\">\r\n  <div class=\"tw-table tw-w-full tw-h-full\">\r\n\r\n    <!-- Quick Add Form Section -->\r\n    <div class=\"tw-table-row tw-h-0\">\r\n      <div class=\"tw-table-cell tw-px-6 tw-py-4 tw-border-b tw-border-gray-200 tw-bg-white\">\r\n        <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-0\">\r\n          <div class=\"tw-flex tw-items-center tw-space-x-3 tw-mb-3\">\r\n            <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\r\n            <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-m-0\">{{ isEditMode() ? 'Edit Designation' : 'Quick Add Designation' }}</h6>\r\n          </div>\r\n          @if (selectedParentDesignation()) {\r\n          <div\r\n            class=\"tw-flex tw-items-center tw-space-x-3 tw-bg-blue-50 tw-border tw-border-blue-200 tw-px-4 tw-py-1 tw-rounded-lg\">\r\n            <cide-ele-icon class=\"tw-text-blue-600 tw-w-4 tw-h-4\">account_tree</cide-ele-icon>\r\n            <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\n              <span class=\"tw-text-sm tw-text-blue-600 tw-font-medium\">{{ isEditMode() ? 'Parent:' : 'Creating child under:' }}</span>\r\n              <span class=\"tw-text-sm tw-text-blue-800 tw-font-semibold\">{{ selectedParentDesignation()?.sydsg_name\r\n                }}</span>\r\n            </div>\r\n            <button cideEleButton variant=\"ghost\" size=\"xs\" type=\"button\" (click)=\"clearSelectedParent()\"\r\n              class=\"tw-text-blue-400 hover:tw-text-blue-600\">\r\n              <svg class=\"tw-w-4 tw-h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\" />\r\n              </svg>\r\n            </button>\r\n          </div>\r\n          }\r\n          @if (selectedParentDepartment()) {\r\n          <div\r\n            class=\"tw-flex tw-items-center tw-space-x-3 tw-bg-green-50 tw-border tw-border-green-200 tw-px-4 tw-py-1 tw-rounded-lg\">\r\n            <cide-ele-icon class=\"tw-text-green-600 tw-w-4 tw-h-4\">business</cide-ele-icon>\r\n            <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\n              <span class=\"tw-text-sm tw-text-green-600 tw-font-medium\">{{ isEditMode() ? 'Department:' : 'Department:'\r\n                }}</span>\r\n              <span class=\"tw-text-sm tw-text-green-800 tw-font-semibold\">{{ selectedParentDepartment()?.sydept_name\r\n                }}</span>\r\n            </div>\r\n            <button cideEleButton variant=\"ghost\" size=\"xs\" type=\"button\" (click)=\"clearSelectedParentDepartment()\"\r\n              class=\"tw-text-green-400 hover:tw-text-green-600\">\r\n              <svg class=\"tw-w-4 tw-h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\" />\r\n              </svg>\r\n            </button>\r\n          </div>\r\n          }\r\n        </div>\r\n\r\n        <form [formGroup]=\"quickAddForm\" (ngSubmit)=\"quickAddDesignation()\">\r\n          <!-- First Row -->\r\n          <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-5 tw-gap-3 tw-mb-3\">\r\n            <!-- Designation Name -->\r\n            <div>\r\n              <cide-ele-input id=\"sydsg_name\" label=\"Name*\" formControlName=\"sydsg_name\" placeholder=\"Designation name\"\r\n                size=\"sm\">\r\n              </cide-ele-input>\r\n            </div>\r\n\r\n            <!-- Designation Code -->\r\n            <div>\r\n              <cide-ele-input id=\"sydsg_code\" label=\"Code*\" formControlName=\"sydsg_code\" placeholder=\"DESG001\"\r\n                size=\"sm\">\r\n              </cide-ele-input>\r\n            </div>\r\n\r\n            <!-- Grade Level -->\r\n            <div>\r\n              <cide-ele-select id=\"sydsg_grade_level_id_sydsgl\" label=\"Grade Level*\" [options]=\"gradeLevelOptions()\"\r\n                formControlName=\"sydsg_grade_level_id_sydsgl\" placeholder=\"Select grade level\" size=\"sm\">\r\n              </cide-ele-select>\r\n            </div>\r\n\r\n            <!-- Department -->\r\n            <div>\r\n              <cide-ele-select id=\"sydsg_department_id_sydpt\" label=\"Department*\" [options]=\"departmentOptions()\"\r\n                formControlName=\"sydsg_department_id_sydpt\" placeholder=\"Select department\" size=\"sm\">\r\n              </cide-ele-select>\r\n            </div>\r\n\r\n            <!-- Active Status -->\r\n            <div class=\"tw-flex tw-flex-col tw-justify-end\">\r\n              <cide-ele-input id=\"sydsg_isactive\" type=\"checkbox\" label=\"Active\" formControlName=\"sydsg_isactive\"\r\n                size=\"sm\">\r\n              </cide-ele-input>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Second Row -->\r\n          <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-3 tw-items-end\">\r\n            <!-- Description -->\r\n            <div>\r\n              <cide-ele-textarea id=\"sydsg_description\" label=\"Description\" formControlName=\"sydsg_description\"\r\n                placeholder=\"Designation description\" rows=\"2\" size=\"sm\">\r\n              </cide-ele-textarea>\r\n            </div>\r\n\r\n            <!-- Entity ID (Hidden) -->\r\n            <div class=\"tw-hidden\">\r\n              <cide-ele-input id=\"desg_entity_id_syen\" label=\"Entity ID*\" formControlName=\"desg_entity_id_syen\"\r\n                placeholder=\"Entity ID\" size=\"sm\">\r\n              </cide-ele-input>\r\n            </div>\r\n\r\n            <!-- Action Buttons -->\r\n            <div class=\"tw-flex tw-flex-col tw-justify-end\">\r\n              <div class=\"tw-flex tw-space-x-2\">\r\n                <button cideEleButton variant=\"primary\" size=\"sm\" type=\"submit\" [disabled]=\"quickAddForm.invalid\"\r\n                  class=\"tw-px-2 tw-py-1 tw-w-20\">\r\n                  <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">{{ isEditMode() ? 'edit' : 'add'\r\n                    }}</cide-ele-icon>\r\n                  {{ isEditMode() ? 'Update' : 'Add' }}\r\n                </button>\r\n                <button cideEleButton variant=\"outline\" size=\"sm\" type=\"button\" (click)=\"resetQuickAddForm()\"\r\n                  class=\"tw-px-2 tw-py-1 tw-w-16\">\r\n                  <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">refresh</cide-ele-icon>\r\n                  Reset\r\n                </button>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </form>\r\n      </div>\r\n    </div>\r\n\r\n\r\n\r\n    <!-- Header Section with Filters -->\r\n    <div class=\"tw-table-row tw-h-0\">\r\n      <div class=\"tw-table-cell tw-px-6 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\r\n        <div\r\n          class=\"tw-flex tw-flex-col sm:tw-flex-row tw-justify-between tw-items-start sm:tw-items-center tw-space-y-3 sm:tw-space-y-0\">\r\n\r\n          <!-- Actions -->\r\n          <div\r\n            class=\"tw-flex tw-flex-col sm:tw-flex-row tw-items-start sm:tw-items-center tw-space-y-3 sm:tw-space-y-0 sm:tw-space-x-3\">\r\n            <!-- Search functionality is handled by the data grid -->\r\n          </div>\r\n        </div>\r\n\r\n        <!-- Error Message -->\r\n        @if (error()) {\r\n        <div class=\"tw-mt-4 tw-p-4 tw-bg-red-50 tw-border tw-border-red-200 tw-rounded-md\">\r\n          <div class=\"tw-flex tw-items-start\">\r\n            <cide-ele-icon name=\"error\"\r\n              class=\"tw-text-red-400 tw-w-5 tw-h-5 tw-mt-0.5 tw-flex-shrink-0\"></cide-ele-icon>\r\n            <div class=\"tw-ml-3\">\r\n              <h3 class=\"tw-text-sm tw-font-medium tw-text-red-800 tw-m-0\">Error</h3>\r\n              <p class=\"tw-text-sm tw-text-red-700 tw-mt-1 tw-m-0\">{{ error() }}</p>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        }\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Main Content Area -->\r\n    <div class=\"tw-table-row\">\r\n      <div class=\"tw-table-cell tw-h-full tw-relative\">\r\n\r\n        <!-- Data Grid Component -->\r\n        <div class=\"tw-h-full tw-overflow-auto\">\r\n\r\n          <cide-ele-data-grid [config]=\"gridConfig()\" [templateRenderers]=\"getTemplateRenderers()\"\r\n            [actionHandlers]=\"actionHandlers\" [serverSidePagination]=\"true\" [totalServerItems]=\"totalItems()\"\r\n            [currentServerPage]=\"currentPage()\" [currentServerPageSize]=\"pageSize()\" (gridEvent)=\"onGridEvent($event)\">\r\n          </cide-ele-data-grid>\r\n        </div>\r\n\r\n      </div>\r\n    </div>\r\n\r\n  </div>\r\n\r\n  <!-- Designation Details Renderer Template -->\r\n  <ng-template #designationDetailsRendererTemplate let-row=\"row\" let-value=\"value\">\r\n    <div class=\"tw-flex tw-items-center tw-min-w-0\">\r\n      <!-- Dynamic Icon based on type -->\r\n      <div class=\"tw-flex-shrink-0\">\r\n        <cide-ele-icon [class]=\"row.type === 'department' ? 'tw-text-green-500' : 'tw-text-blue-500'\" size=\"xs\">\r\n          {{ row.type === 'department' ? 'business' : 'work' }}\r\n        </cide-ele-icon>\r\n      </div>\r\n\r\n      <!-- Details -->\r\n      <div class=\"tw-ml-3 tw-min-w-0 tw-flex-1\">\r\n        <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\n          <div class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-truncate\" [title]=\"row.name\">\r\n            {{ row.name || 'Untitled' }}\r\n          </div>\r\n          @if (row.type === 'department') {\r\n          <span\r\n            class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-green-100 tw-text-green-800\">\r\n            Department\r\n          </span>\r\n          }\r\n        </div>\r\n        @if (row.description) {\r\n        <div class=\"tw-text-xs tw-text-gray-500 tw-truncate\" [title]=\"row.description\">\r\n          {{ row.description }}\r\n        </div>\r\n        }\r\n      </div>\r\n    </div>\r\n  </ng-template>\r\n\r\n  <!-- Designation Status Renderer Template -->\r\n  <ng-template #designationStatusRendererTemplate let-row=\"row\" let-value=\"value\">\r\n    <span\r\n      class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-whitespace-nowrap\"\r\n      [ngClass]=\"getStatusClass(row.status)\">\r\n      {{ getStatusDisplay(row.status) }}\r\n    </span>\r\n  </ng-template>\r\n\r\n  <!-- Actions Dropdown Renderer Template -->\r\n  <ng-template #actionsDropdownRendererTemplate let-row=\"row\" let-value=\"value\">\r\n    <cide-ele-dropdown [items]=\"getDropdownItems(row)\" [config]=\"{ triggerIcon: 'more_vert', triggerSize: 'sm' }\"\r\n      (itemClick)=\"onDropdownItemClick($event, row)\">\r\n    </cide-ele-dropdown>\r\n  </ng-template>\r\n</cide-lyt-shared-wrapper>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: CideEleDataGridComponent, selector: "cide-ele-data-grid", inputs: ["config", "templateRenderers", "customFormatters", "actionHandlers", "serverSidePagination", "totalServerItems", "currentServerPage", "currentServerPageSize", "dragDropEnabled"], outputs: ["gridEvent"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideInputComponent, selector: "cide-ele-input", inputs: ["fill", "label", "labelHide", "disabled", "clearInput", "labelPlacement", "labelDir", "placeholder", "leadingIcon", "trailingIcon", "helperText", "helperTextCollapse", "hideHelperAndErrorText", "errorText", "maxlength", "minlength", "required", "autocapitalize", "autocomplete", "type", "width", "id", "ngModel", "option", "min", "max", "step", "size"], outputs: ["ngModelChange"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput", "options", "multiple", "searchable", "showSearchInput", "loading", "valueKey", "labelKey", "treeView"], outputs: ["ngModelChange", "change", "searchChange"] }, { kind: "component", type: CideTextareaComponent, selector: "cide-ele-textarea", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "minlength", "maxlength", "rows", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput"], outputs: ["ngModelChange"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideEleDropdownComponent, selector: "cide-ele-dropdown", inputs: ["items", "config", "triggerTemplate", "menuTemplate"], outputs: ["itemClick", "dropdownToggle"] }, { kind: "component", type: CideLytSharedWrapperComponent, selector: "cide-lyt-shared-wrapper", inputs: ["shared_wrapper_setup_param", "breadcrumb_data"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideCoreDesignationListComponent, isStandalone: true, selector: "cide-core-designation-list", viewQueries: [{ propertyName: "designationDetailsRendererTemplate", first: true, predicate: ["designationDetailsRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "designationStatusRendererTemplate", first: true, predicate: ["designationStatusRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "actionsDropdownRendererTemplate", first: true, predicate: ["actionsDropdownRendererTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Designation List with Shared Wrapper -->\r\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'core_designation_list' }\">\r\n  <div class=\"tw-table tw-w-full tw-h-full\">\r\n\r\n    <!-- Quick Add Form Section -->\r\n    <div class=\"tw-table-row tw-h-0\">\r\n      <div class=\"tw-table-cell tw-px-6 tw-py-4 tw-border-b tw-border-gray-200 tw-bg-white\">\r\n        <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-0\">\r\n          <div class=\"tw-flex tw-items-center tw-space-x-3 tw-mb-3\">\r\n            <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\r\n            <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-m-0\">{{ isEditMode() ? 'Edit Designation' : 'Quick Add Designation' }}</h6>\r\n          </div>\r\n          @if (selectedParentDesignation()) {\r\n          <div\r\n            class=\"tw-flex tw-items-center tw-space-x-3 tw-bg-blue-50 tw-border tw-border-blue-200 tw-px-4 tw-py-1 tw-rounded-lg\">\r\n            <cide-ele-icon class=\"tw-text-blue-600 tw-w-4 tw-h-4\">account_tree</cide-ele-icon>\r\n            <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\n              <span class=\"tw-text-sm tw-text-blue-600 tw-font-medium\">{{ isEditMode() ? 'Parent:' : 'Creating child under:' }}</span>\r\n              <span class=\"tw-text-sm tw-text-blue-800 tw-font-semibold\">{{ selectedParentDesignation()?.sydsg_name\r\n                }}</span>\r\n            </div>\r\n            <button cideEleButton variant=\"ghost\" size=\"xs\" type=\"button\" (click)=\"clearSelectedParent()\"\r\n              class=\"tw-text-blue-400 hover:tw-text-blue-600\">\r\n              <svg class=\"tw-w-4 tw-h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\" />\r\n              </svg>\r\n            </button>\r\n          </div>\r\n          }\r\n          @if (selectedParentDepartment()) {\r\n          <div\r\n            class=\"tw-flex tw-items-center tw-space-x-3 tw-bg-green-50 tw-border tw-border-green-200 tw-px-4 tw-py-1 tw-rounded-lg\">\r\n            <cide-ele-icon class=\"tw-text-green-600 tw-w-4 tw-h-4\">business</cide-ele-icon>\r\n            <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\n              <span class=\"tw-text-sm tw-text-green-600 tw-font-medium\">{{ isEditMode() ? 'Department:' : 'Department:'\r\n                }}</span>\r\n              <span class=\"tw-text-sm tw-text-green-800 tw-font-semibold\">{{ selectedParentDepartment()?.sydept_name\r\n                }}</span>\r\n            </div>\r\n            <button cideEleButton variant=\"ghost\" size=\"xs\" type=\"button\" (click)=\"clearSelectedParentDepartment()\"\r\n              class=\"tw-text-green-400 hover:tw-text-green-600\">\r\n              <svg class=\"tw-w-4 tw-h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\" />\r\n              </svg>\r\n            </button>\r\n          </div>\r\n          }\r\n        </div>\r\n\r\n        <form [formGroup]=\"quickAddForm\" (ngSubmit)=\"quickAddDesignation()\">\r\n          <!-- First Row -->\r\n          <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-5 tw-gap-3 tw-mb-3\">\r\n            <!-- Designation Name -->\r\n            <div>\r\n              <cide-ele-input id=\"sydsg_name\" label=\"Name*\" formControlName=\"sydsg_name\" placeholder=\"Designation name\"\r\n                size=\"sm\">\r\n              </cide-ele-input>\r\n            </div>\r\n\r\n            <!-- Designation Code -->\r\n            <div>\r\n              <cide-ele-input id=\"sydsg_code\" label=\"Code*\" formControlName=\"sydsg_code\" placeholder=\"DESG001\"\r\n                size=\"sm\">\r\n              </cide-ele-input>\r\n            </div>\r\n\r\n            <!-- Grade Level -->\r\n            <div>\r\n              <cide-ele-select id=\"sydsg_grade_level_id_sydsgl\" label=\"Grade Level*\" [options]=\"gradeLevelOptions()\"\r\n                formControlName=\"sydsg_grade_level_id_sydsgl\" placeholder=\"Select grade level\" size=\"sm\">\r\n              </cide-ele-select>\r\n            </div>\r\n\r\n            <!-- Department -->\r\n            <div>\r\n              <cide-ele-select id=\"sydsg_department_id_sydpt\" label=\"Department*\" [options]=\"departmentOptions()\"\r\n                formControlName=\"sydsg_department_id_sydpt\" placeholder=\"Select department\" size=\"sm\">\r\n              </cide-ele-select>\r\n            </div>\r\n\r\n            <!-- Active Status -->\r\n            <div class=\"tw-flex tw-flex-col tw-justify-end\">\r\n              <cide-ele-input id=\"sydsg_isactive\" type=\"checkbox\" label=\"Active\" formControlName=\"sydsg_isactive\"\r\n                size=\"sm\">\r\n              </cide-ele-input>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Second Row -->\r\n          <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-3 tw-items-end\">\r\n            <!-- Description -->\r\n            <div>\r\n              <cide-ele-textarea id=\"sydsg_description\" label=\"Description\" formControlName=\"sydsg_description\"\r\n                placeholder=\"Designation description\" rows=\"2\" size=\"sm\">\r\n              </cide-ele-textarea>\r\n            </div>\r\n\r\n            <!-- Entity ID (Hidden) -->\r\n            <div class=\"tw-hidden\">\r\n              <cide-ele-input id=\"desg_entity_id_syen\" label=\"Entity ID*\" formControlName=\"desg_entity_id_syen\"\r\n                placeholder=\"Entity ID\" size=\"sm\">\r\n              </cide-ele-input>\r\n            </div>\r\n\r\n            <!-- Action Buttons -->\r\n            <div class=\"tw-flex tw-flex-col tw-justify-end\">\r\n              <div class=\"tw-flex tw-space-x-2\">\r\n                <button cideEleButton variant=\"primary\" size=\"sm\" type=\"submit\" [disabled]=\"quickAddForm.invalid\"\r\n                  class=\"tw-px-2 tw-py-1 tw-w-20\">\r\n                  <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">{{ isEditMode() ? 'edit' : 'add'\r\n                    }}</cide-ele-icon>\r\n                  {{ isEditMode() ? 'Update' : 'Add' }}\r\n                </button>\r\n                <button cideEleButton variant=\"outline\" size=\"sm\" type=\"button\" (click)=\"resetQuickAddForm()\"\r\n                  class=\"tw-px-2 tw-py-1 tw-w-16\">\r\n                  <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">refresh</cide-ele-icon>\r\n                  Reset\r\n                </button>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </form>\r\n      </div>\r\n    </div>\r\n\r\n\r\n\r\n    <!-- Header Section with Filters -->\r\n    <div class=\"tw-table-row tw-h-0\">\r\n      <div class=\"tw-table-cell tw-px-6 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\r\n        <div\r\n          class=\"tw-flex tw-flex-col sm:tw-flex-row tw-justify-between tw-items-start sm:tw-items-center tw-space-y-3 sm:tw-space-y-0\">\r\n\r\n          <!-- Actions -->\r\n          <div\r\n            class=\"tw-flex tw-flex-col sm:tw-flex-row tw-items-start sm:tw-items-center tw-space-y-3 sm:tw-space-y-0 sm:tw-space-x-3\">\r\n            <!-- Search functionality is handled by the data grid -->\r\n          </div>\r\n        </div>\r\n\r\n        <!-- Error Message -->\r\n        @if (error()) {\r\n        <div class=\"tw-mt-4 tw-p-4 tw-bg-red-50 tw-border tw-border-red-200 tw-rounded-md\">\r\n          <div class=\"tw-flex tw-items-start\">\r\n            <cide-ele-icon name=\"error\"\r\n              class=\"tw-text-red-400 tw-w-5 tw-h-5 tw-mt-0.5 tw-flex-shrink-0\"></cide-ele-icon>\r\n            <div class=\"tw-ml-3\">\r\n              <h3 class=\"tw-text-sm tw-font-medium tw-text-red-800 tw-m-0\">Error</h3>\r\n              <p class=\"tw-text-sm tw-text-red-700 tw-mt-1 tw-m-0\">{{ error() }}</p>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        }\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Main Content Area -->\r\n    <div class=\"tw-table-row\">\r\n      <div class=\"tw-table-cell tw-h-full tw-relative\">\r\n\r\n        <!-- Data Grid Component -->\r\n        <div class=\"tw-h-full tw-overflow-auto\">\r\n\r\n          <cide-ele-data-grid [config]=\"gridConfig()\" [templateRenderers]=\"getTemplateRenderers()\"\r\n            [actionHandlers]=\"actionHandlers\" [serverSidePagination]=\"true\" [totalServerItems]=\"totalItems()\"\r\n            [currentServerPage]=\"currentPage()\" [currentServerPageSize]=\"pageSize()\" (gridEvent)=\"onGridEvent($event)\">\r\n          </cide-ele-data-grid>\r\n        </div>\r\n\r\n      </div>\r\n    </div>\r\n\r\n  </div>\r\n\r\n  <!-- Designation Details Renderer Template -->\r\n  <ng-template #designationDetailsRendererTemplate let-row=\"row\" let-value=\"value\">\r\n    <div class=\"tw-flex tw-items-center tw-min-w-0\">\r\n      <!-- Dynamic Icon based on type -->\r\n      <div class=\"tw-flex-shrink-0\">\r\n        <cide-ele-icon [class]=\"row.type === 'department' ? 'tw-text-green-500' : 'tw-text-blue-500'\" size=\"xs\">\r\n          {{ row.type === 'department' ? 'business' : 'work' }}\r\n        </cide-ele-icon>\r\n      </div>\r\n\r\n      <!-- Details -->\r\n      <div class=\"tw-ml-3 tw-min-w-0 tw-flex-1\">\r\n        <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\n          <div class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-truncate\" [title]=\"row.name\">\r\n            {{ row.name || 'Untitled' }}\r\n          </div>\r\n          @if (row.type === 'department') {\r\n          <span\r\n            class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-green-100 tw-text-green-800\">\r\n            Department\r\n          </span>\r\n          }\r\n        </div>\r\n        @if (row.description) {\r\n        <div class=\"tw-text-xs tw-text-gray-500 tw-truncate\" [title]=\"row.description\">\r\n          {{ row.description }}\r\n        </div>\r\n        }\r\n      </div>\r\n    </div>\r\n  </ng-template>\r\n\r\n  <!-- Designation Status Renderer Template -->\r\n  <ng-template #designationStatusRendererTemplate let-row=\"row\" let-value=\"value\">\r\n    <span\r\n      class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-whitespace-nowrap\"\r\n      [ngClass]=\"getStatusClass(row.status)\">\r\n      {{ getStatusDisplay(row.status) }}\r\n    </span>\r\n  </ng-template>\r\n\r\n  <!-- Actions Dropdown Renderer Template -->\r\n  <ng-template #actionsDropdownRendererTemplate let-row=\"row\" let-value=\"value\">\r\n    <cide-ele-dropdown [items]=\"getDropdownItems(row)\" [config]=\"{ triggerIcon: 'more_vert', triggerSize: 'sm' }\"\r\n      (itemClick)=\"onDropdownItemClick($event, row)\">\r\n    </cide-ele-dropdown>\r\n  </ng-template>\r\n</cide-lyt-shared-wrapper>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: CideEleDataGridComponent, selector: "cide-ele-data-grid", inputs: ["config", "templateRenderers", "customFormatters", "actionHandlers", "serverSidePagination", "totalServerItems", "currentServerPage", "currentServerPageSize", "dragDropEnabled"], outputs: ["gridEvent"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideInputComponent, selector: "cide-ele-input", inputs: ["fill", "label", "labelHide", "disabled", "clearInput", "labelPlacement", "labelDir", "placeholder", "leadingIcon", "trailingIcon", "helperText", "helperTextCollapse", "hideHelperAndErrorText", "errorText", "maxlength", "minlength", "required", "autocapitalize", "autocomplete", "type", "width", "id", "ngModel", "option", "min", "max", "step", "size"], outputs: ["ngModelChange"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "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: [{
             type: Component,
@@ -5913,6 +5957,7 @@ class CideCorePageListComponent {
     pageService = inject(CideCorePageManagementService);
     appState = inject(AppStateHelperService);
     router = inject(Router);
+    rightsService = inject(RightsService);
     // Modern ViewChild signals for template renderers (Angular 20 approach)
     pageDetailsRendererTemplate = viewChild.required('pageDetailsRendererTemplate');
     pageStatusRendererTemplate = viewChild.required('pageStatusRendererTemplate');
@@ -5925,6 +5970,13 @@ class CideCorePageListComponent {
     error = signal(null, ...(ngDevMode ? [{ debugName: "error" }] : []));
     selectedItems = signal([], ...(ngDevMode ? [{ debugName: "selectedItems" }] : []));
     searchTerm = signal('', ...(ngDevMode ? [{ debugName: "searchTerm" }] : []));
+    // 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" }] : []));
+    canManageThemes = computed(() => this.rightsService.hasRight('EDIT'), ...(ngDevMode ? [{ debugName: "canManageThemes" }] : [])); // Uses EDIT for MANAGE_THEMES
+    canManageControls = computed(() => this.rightsService.hasRight('EDIT'), ...(ngDevMode ? [{ debugName: "canManageControls" }] : [])); // Uses EDIT for MANAGE_CONTROLS
     // Pagination signals
     currentPage = signal(1, ...(ngDevMode ? [{ debugName: "currentPage" }] : []));
     pageSize = signal(10, ...(ngDevMode ? [{ debugName: "pageSize" }] : []));
@@ -6005,15 +6057,49 @@ class CideCorePageListComponent {
     }, ...(ngDevMode ? [{ debugName: "gridConfig" }] : []));
     // Action handlers for grid
     actionHandlers = {
-        onEdit: (item) => this.editPage(item),
-        onDelete: (item) => this.deletePage(item),
-        onToggleStatus: (item) => this.togglePageStatus(item),
-        onManageThemes: (item) => this.manageThemes(item),
-        onManageControls: (item) => this.manageControls(item)
+        onEdit: (item) => {
+            if (!this.rightsService.hasRight('EDIT')) {
+                this.error.set('You do not have permission to edit pages');
+                return;
+            }
+            this.editPage(item);
+        },
+        onDelete: (item) => {
+            if (!this.rightsService.hasRight('DELETE')) {
+                this.error.set('You do not have permission to delete pages');
+                return;
+            }
+            this.deletePage(item);
+        },
+        onToggleStatus: (item) => {
+            if (!this.rightsService.hasRight('EDIT')) {
+                this.error.set('You do not have permission to change page status');
+                return;
+            }
+            this.togglePageStatus(item);
+        },
+        onManageThemes: (item) => {
+            if (!this.rightsService.hasRight('EDIT')) {
+                this.error.set('You do not have permission to manage themes');
+                return;
+            }
+            this.manageThemes(item);
+        },
+        onManageControls: (item) => {
+            if (!this.rightsService.hasRight('EDIT')) {
+                this.error.set('You do not have permission to manage controls');
+                return;
+            }
+            this.manageControls(item);
+        }
     };
     constructor() {
         this.initializeComponent();
     }
+    ngOnInit() {
+        // Initialize rights for page management
+        this.rightsService.initializeRights('core_page_management');
+    }
     /**
      * Initialize component
      */
@@ -6119,12 +6205,20 @@ class CideCorePageListComponent {
      * Navigate to create page
      */
     createPage() {
+        if (!this.rightsService.hasRight('CREATE')) {
+            this.error.set('You do not have permission to create pages');
+            return;
+        }
         this.router.navigate(['/control-panel/page-form']);
     }
     /**
      * Edit page - navigate to edit page
      */
     editPage(page) {
+        if (!this.rightsService.hasRight('EDIT')) {
+            this.error.set('You do not have permission to edit pages');
+            return;
+        }
         const query = generateStringFromObject({
             sypg_id: page._id,
             sypg_title: page.sypg_title
@@ -6135,6 +6229,10 @@ class CideCorePageListComponent {
      * Delete page
      */
     deletePage(page) {
+        if (!this.rightsService.hasRight('DELETE')) {
+            this.error.set('You do not have permission to delete pages');
+            return;
+        }
         if (confirm(`Are you sure you want to delete the page "${page.sypg_title}"?`)) {
             this.loading.set(true);
             this.pageService.deletePage(page._id || '')
@@ -6162,6 +6260,10 @@ class CideCorePageListComponent {
      * Toggle page status
      */
     togglePageStatus(page) {
+        if (!this.rightsService.hasRight('EDIT')) {
+            this.error.set('You do not have permission to change page status');
+            return;
+        }
         this.loading.set(true);
         this.pageService.togglePageStatus({ sypg_id: page._id || '', sypg_isactive: !page.sypg_isactive })
             .pipe(takeUntilDestroyed(this.destroyRef))
@@ -6187,6 +6289,10 @@ class CideCorePageListComponent {
      * Manage themes for a page
      */
     manageThemes(page) {
+        if (!this.rightsService.hasRight('EDIT')) {
+            this.error.set('You do not have permission to manage themes');
+            return;
+        }
         const query = generateStringFromObject({ sypg_id: page._id, sypg_title: page.sypg_title });
         this.router.navigate(['control-panel', 'page-theme', query]);
     }
@@ -6194,6 +6300,10 @@ class CideCorePageListComponent {
      * Manage controls for a page
      */
     manageControls(page) {
+        if (!this.rightsService.hasRight('EDIT')) {
+            this.error.set('You do not have permission to manage controls');
+            return;
+        }
         const query = generateStringFromObject({ sypg_id: page._id, sypg_title: page.sypg_title });
         this.router.navigate(['control-panel', 'page-controls', query]);
     }
@@ -6201,38 +6311,48 @@ class CideCorePageListComponent {
      * Get dropdown items for actions
      */
     getActionDropdownItems(page) {
-        return [
-            {
+        const items = [];
+        if (this.canEdit()) {
+            items.push({
                 id: 'edit',
                 label: 'Edit',
                 icon: 'edit',
                 disabled: false
-            },
-            {
+            });
+        }
+        if (this.canManageThemes()) {
+            items.push({
                 id: 'themes',
                 label: 'Manage Themes',
                 icon: 'palette',
                 disabled: false
-            },
-            {
+            });
+        }
+        if (this.canManageControls()) {
+            items.push({
                 id: 'controls',
                 label: 'Manage Controls',
                 icon: 'settings',
                 disabled: false
-            },
-            {
+            });
+        }
+        if (this.canEdit()) {
+            items.push({
                 id: 'toggle',
                 label: page.sypg_isactive ? 'Deactivate' : 'Activate',
                 icon: page.sypg_isactive ? 'block' : 'check_circle',
                 disabled: false
-            },
-            {
+            });
+        }
+        if (this.canDelete()) {
+            items.push({
                 id: 'delete',
                 label: 'Delete',
                 icon: 'delete',
                 disabled: false
-            }
-        ];
+            });
+        }
+        return items;
     }
     /**
      * Handle dropdown item click
@@ -6276,7 +6396,7 @@ class CideCorePageListComponent {
         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 Container -->\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 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\">web</cide-ele-icon>\r\n          <h5 class=\"tw-text-base tw-font-medium tw-text-gray-900 tw-m-0\">Page Management</h5>\r\n        </div>\r\n\r\n        <!-- Actions -->\r\n        <div class=\"tw-flex tw-flex-col sm:tw-flex-row tw-items-start sm:tw-items-center tw-space-y-3 sm:tw-space-y-0 sm:tw-space-x-3\">\r\n          <!-- Add Page Button -->\r\n          <button\r\n            cideEleButton\r\n            variant=\"primary\"\r\n            size=\"sm\"\r\n            (click)=\"createPage()\"\r\n            leftIcon=\"add\"\r\n            class=\"tw-whitespace-nowrap tw-flex tw-items-center tw-gap-2\">\r\n            Create New Page\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 class=\"tw-text-red-400 tw-w-5 tw-h-5 tw-mt-0.5 tw-flex-shrink-0\">error</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\r\n          [config]=\"gridConfig()\"\r\n          [templateRenderers]=\"getTemplateRenderers()\"\r\n          [actionHandlers]=\"actionHandlers\"\r\n          [serverSidePagination]=\"true\"\r\n          [totalServerItems]=\"totalItems()\"\r\n          [currentServerPage]=\"currentPage()\"\r\n          [currentServerPageSize]=\"pageSize()\"\r\n          (gridEvent)=\"onGridEvent($event)\">\r\n        </cide-ele-data-grid>\r\n      </div>\r\n\r\n    </div>\r\n  </div>\r\n\r\n</div>\r\n\r\n<!-- Page Details Renderer Template -->\r\n<ng-template #pageDetailsRendererTemplate let-row=\"row\" let-value=\"value\">\r\n  <div class=\"tw-flex tw-items-center tw-min-w-0\">\r\n    <!-- Page Icon -->\r\n    <div class=\"tw-flex-shrink-0\">\r\n      <cide-ele-icon class=\"tw-text-gray-400 tw-w-4 tw-h-4\">web</cide-ele-icon>\r\n    </div>\r\n    \r\n    <!-- Page Details -->\r\n    <div class=\"tw-ml-3 tw-min-w-0 tw-flex-1\">\r\n      <div class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-truncate\" \r\n           [title]=\"row.sypg_title\">\r\n        {{ row.sypg_title || 'Untitled' }}\r\n      </div>\r\n      @if (row.sypg_desc) {\r\n        <div class=\"tw-text-xs tw-text-gray-500 tw-truncate\" \r\n             [title]=\"row.sypg_desc\">\r\n          {{ row.sypg_desc }}\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- Page Status Renderer Template -->\r\n<ng-template #pageStatusRendererTemplate let-row=\"row\" let-value=\"value\">\r\n  <span class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-whitespace-nowrap\"\r\n        [ngClass]=\"row.sypg_isactive ? 'tw-bg-green-100 tw-text-green-800' : 'tw-bg-red-100 tw-text-red-800'\">\r\n    {{ row.sypg_isactive ? 'Active' : 'Inactive' }}\r\n  </span>\r\n</ng-template>\r\n\r\n<!-- Actions Dropdown Renderer Template -->\r\n<ng-template #actionsDropdownRendererTemplate let-row=\"row\" let-value=\"value\">\r\n  <cide-ele-dropdown\r\n    [items]=\"getActionDropdownItems(row)\"\r\n    [config]=\"{ triggerIcon: 'more_vert', triggerSize: 'sm' }\"\r\n    (itemClick)=\"onDropdownItemClick($event, row)\">\r\n  </cide-ele-dropdown>\r\n</ng-template> ", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "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"] }] });
+    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 Container -->\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 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\">web</cide-ele-icon>\r\n          <h5 class=\"tw-text-base tw-font-medium tw-text-gray-900 tw-m-0\">Page Management</h5>\r\n        </div>\r\n\r\n        <!-- Actions -->\r\n        <div class=\"tw-flex tw-flex-col sm:tw-flex-row tw-items-start sm:tw-items-center tw-space-y-3 sm:tw-space-y-0 sm:tw-space-x-3\">\r\n          <!-- Add Page Button -->\r\n          @if (canCreate()) {\r\n            <button\r\n              cideEleButton\r\n              variant=\"primary\"\r\n              size=\"sm\"\r\n              (click)=\"createPage()\"\r\n              leftIcon=\"add\"\r\n              class=\"tw-whitespace-nowrap tw-flex tw-items-center tw-gap-2\">\r\n              Create New Page\r\n            </button>\r\n          }\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 class=\"tw-text-red-400 tw-w-5 tw-h-5 tw-mt-0.5 tw-flex-shrink-0\">error</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\r\n          [config]=\"gridConfig()\"\r\n          [templateRenderers]=\"getTemplateRenderers()\"\r\n          [actionHandlers]=\"actionHandlers\"\r\n          [serverSidePagination]=\"true\"\r\n          [totalServerItems]=\"totalItems()\"\r\n          [currentServerPage]=\"currentPage()\"\r\n          [currentServerPageSize]=\"pageSize()\"\r\n          (gridEvent)=\"onGridEvent($event)\">\r\n        </cide-ele-data-grid>\r\n      </div>\r\n\r\n    </div>\r\n  </div>\r\n\r\n</div>\r\n\r\n<!-- Page Details Renderer Template -->\r\n<ng-template #pageDetailsRendererTemplate let-row=\"row\" let-value=\"value\">\r\n  <div class=\"tw-flex tw-items-center tw-min-w-0\">\r\n    <!-- Page Icon -->\r\n    <div class=\"tw-flex-shrink-0\">\r\n      <cide-ele-icon class=\"tw-text-gray-400 tw-w-4 tw-h-4\">web</cide-ele-icon>\r\n    </div>\r\n    \r\n    <!-- Page Details -->\r\n    <div class=\"tw-ml-3 tw-min-w-0 tw-flex-1\">\r\n      <div class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-truncate\" \r\n           [title]=\"row.sypg_title\">\r\n        {{ row.sypg_title || 'Untitled' }}\r\n      </div>\r\n      @if (row.sypg_desc) {\r\n        <div class=\"tw-text-xs tw-text-gray-500 tw-truncate\" \r\n             [title]=\"row.sypg_desc\">\r\n          {{ row.sypg_desc }}\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- Page Status Renderer Template -->\r\n<ng-template #pageStatusRendererTemplate let-row=\"row\" let-value=\"value\">\r\n  <span class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-whitespace-nowrap\"\r\n        [ngClass]=\"row.sypg_isactive ? 'tw-bg-green-100 tw-text-green-800' : 'tw-bg-red-100 tw-text-red-800'\">\r\n    {{ row.sypg_isactive ? 'Active' : 'Inactive' }}\r\n  </span>\r\n</ng-template>\r\n\r\n<!-- Actions Dropdown Renderer Template -->\r\n<ng-template #actionsDropdownRendererTemplate let-row=\"row\" let-value=\"value\">\r\n  <cide-ele-dropdown\r\n    [items]=\"getActionDropdownItems(row)\"\r\n    [config]=\"{ triggerIcon: 'more_vert', triggerSize: 'sm' }\"\r\n    (itemClick)=\"onDropdownItemClick($event, row)\">\r\n  </cide-ele-dropdown>\r\n</ng-template> ", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCorePageListComponent, decorators: [{
             type: Component,
@@ -6286,7 +6406,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                         CideEleButtonComponent,
                         CideIconComponent,
                         CideEleDropdownComponent
-                    ], template: "<!-- Page List Container -->\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 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\">web</cide-ele-icon>\r\n          <h5 class=\"tw-text-base tw-font-medium tw-text-gray-900 tw-m-0\">Page Management</h5>\r\n        </div>\r\n\r\n        <!-- Actions -->\r\n        <div class=\"tw-flex tw-flex-col sm:tw-flex-row tw-items-start sm:tw-items-center tw-space-y-3 sm:tw-space-y-0 sm:tw-space-x-3\">\r\n          <!-- Add Page Button -->\r\n          <button\r\n            cideEleButton\r\n            variant=\"primary\"\r\n            size=\"sm\"\r\n            (click)=\"createPage()\"\r\n            leftIcon=\"add\"\r\n            class=\"tw-whitespace-nowrap tw-flex tw-items-center tw-gap-2\">\r\n            Create New Page\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 class=\"tw-text-red-400 tw-w-5 tw-h-5 tw-mt-0.5 tw-flex-shrink-0\">error</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\r\n          [config]=\"gridConfig()\"\r\n          [templateRenderers]=\"getTemplateRenderers()\"\r\n          [actionHandlers]=\"actionHandlers\"\r\n          [serverSidePagination]=\"true\"\r\n          [totalServerItems]=\"totalItems()\"\r\n          [currentServerPage]=\"currentPage()\"\r\n          [currentServerPageSize]=\"pageSize()\"\r\n          (gridEvent)=\"onGridEvent($event)\">\r\n        </cide-ele-data-grid>\r\n      </div>\r\n\r\n    </div>\r\n  </div>\r\n\r\n</div>\r\n\r\n<!-- Page Details Renderer Template -->\r\n<ng-template #pageDetailsRendererTemplate let-row=\"row\" let-value=\"value\">\r\n  <div class=\"tw-flex tw-items-center tw-min-w-0\">\r\n    <!-- Page Icon -->\r\n    <div class=\"tw-flex-shrink-0\">\r\n      <cide-ele-icon class=\"tw-text-gray-400 tw-w-4 tw-h-4\">web</cide-ele-icon>\r\n    </div>\r\n    \r\n    <!-- Page Details -->\r\n    <div class=\"tw-ml-3 tw-min-w-0 tw-flex-1\">\r\n      <div class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-truncate\" \r\n           [title]=\"row.sypg_title\">\r\n        {{ row.sypg_title || 'Untitled' }}\r\n      </div>\r\n      @if (row.sypg_desc) {\r\n        <div class=\"tw-text-xs tw-text-gray-500 tw-truncate\" \r\n             [title]=\"row.sypg_desc\">\r\n          {{ row.sypg_desc }}\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- Page Status Renderer Template -->\r\n<ng-template #pageStatusRendererTemplate let-row=\"row\" let-value=\"value\">\r\n  <span class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-whitespace-nowrap\"\r\n        [ngClass]=\"row.sypg_isactive ? 'tw-bg-green-100 tw-text-green-800' : 'tw-bg-red-100 tw-text-red-800'\">\r\n    {{ row.sypg_isactive ? 'Active' : 'Inactive' }}\r\n  </span>\r\n</ng-template>\r\n\r\n<!-- Actions Dropdown Renderer Template -->\r\n<ng-template #actionsDropdownRendererTemplate let-row=\"row\" let-value=\"value\">\r\n  <cide-ele-dropdown\r\n    [items]=\"getActionDropdownItems(row)\"\r\n    [config]=\"{ triggerIcon: 'more_vert', triggerSize: 'sm' }\"\r\n    (itemClick)=\"onDropdownItemClick($event, row)\">\r\n  </cide-ele-dropdown>\r\n</ng-template> " }]
+                    ], template: "<!-- Page List Container -->\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 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\">web</cide-ele-icon>\r\n          <h5 class=\"tw-text-base tw-font-medium tw-text-gray-900 tw-m-0\">Page Management</h5>\r\n        </div>\r\n\r\n        <!-- Actions -->\r\n        <div class=\"tw-flex tw-flex-col sm:tw-flex-row tw-items-start sm:tw-items-center tw-space-y-3 sm:tw-space-y-0 sm:tw-space-x-3\">\r\n          <!-- Add Page Button -->\r\n          @if (canCreate()) {\r\n            <button\r\n              cideEleButton\r\n              variant=\"primary\"\r\n              size=\"sm\"\r\n              (click)=\"createPage()\"\r\n              leftIcon=\"add\"\r\n              class=\"tw-whitespace-nowrap tw-flex tw-items-center tw-gap-2\">\r\n              Create New Page\r\n            </button>\r\n          }\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 class=\"tw-text-red-400 tw-w-5 tw-h-5 tw-mt-0.5 tw-flex-shrink-0\">error</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\r\n          [config]=\"gridConfig()\"\r\n          [templateRenderers]=\"getTemplateRenderers()\"\r\n          [actionHandlers]=\"actionHandlers\"\r\n          [serverSidePagination]=\"true\"\r\n          [totalServerItems]=\"totalItems()\"\r\n          [currentServerPage]=\"currentPage()\"\r\n          [currentServerPageSize]=\"pageSize()\"\r\n          (gridEvent)=\"onGridEvent($event)\">\r\n        </cide-ele-data-grid>\r\n      </div>\r\n\r\n    </div>\r\n  </div>\r\n\r\n</div>\r\n\r\n<!-- Page Details Renderer Template -->\r\n<ng-template #pageDetailsRendererTemplate let-row=\"row\" let-value=\"value\">\r\n  <div class=\"tw-flex tw-items-center tw-min-w-0\">\r\n    <!-- Page Icon -->\r\n    <div class=\"tw-flex-shrink-0\">\r\n      <cide-ele-icon class=\"tw-text-gray-400 tw-w-4 tw-h-4\">web</cide-ele-icon>\r\n    </div>\r\n    \r\n    <!-- Page Details -->\r\n    <div class=\"tw-ml-3 tw-min-w-0 tw-flex-1\">\r\n      <div class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-truncate\" \r\n           [title]=\"row.sypg_title\">\r\n        {{ row.sypg_title || 'Untitled' }}\r\n      </div>\r\n      @if (row.sypg_desc) {\r\n        <div class=\"tw-text-xs tw-text-gray-500 tw-truncate\" \r\n             [title]=\"row.sypg_desc\">\r\n          {{ row.sypg_desc }}\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- Page Status Renderer Template -->\r\n<ng-template #pageStatusRendererTemplate let-row=\"row\" let-value=\"value\">\r\n  <span class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-whitespace-nowrap\"\r\n        [ngClass]=\"row.sypg_isactive ? 'tw-bg-green-100 tw-text-green-800' : 'tw-bg-red-100 tw-text-red-800'\">\r\n    {{ row.sypg_isactive ? 'Active' : 'Inactive' }}\r\n  </span>\r\n</ng-template>\r\n\r\n<!-- Actions Dropdown Renderer Template -->\r\n<ng-template #actionsDropdownRendererTemplate let-row=\"row\" let-value=\"value\">\r\n  <cide-ele-dropdown\r\n    [items]=\"getActionDropdownItems(row)\"\r\n    [config]=\"{ triggerIcon: 'more_vert', triggerSize: 'sm' }\"\r\n    (itemClick)=\"onDropdownItemClick($event, row)\">\r\n  </cide-ele-dropdown>\r\n</ng-template> " }]
         }], ctorParameters: () => [] });
 
 var pageList_component = /*#__PURE__*/Object.freeze({
@@ -7152,7 +7272,7 @@ class CideCorePageThemeComponent {
         console.log('Preview image upload progress:', progress + '%');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCorePageThemeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideCorePageThemeComponent, isStandalone: true, selector: "cide-core-page-theme", viewQueries: [{ propertyName: "themeDetailsRendererTemplate", first: true, predicate: ["themeDetailsRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "themeStatusRendererTemplate", first: true, predicate: ["themeStatusRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "actionsDropdownRendererTemplate", first: true, predicate: ["actionsDropdownRendererTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Page Theme Container -->\r\n<div class=\"tw-flex tw-h-full tw-w-full\">\r\n  \r\n  <!-- Left: Form and header (60%) -->\r\n  <div class=\"tw-w-full lg:tw-w-3/5 tw-flex tw-flex-col tw-border-r tw-border-gray-200\">\r\n\r\n  <!-- Header Section -->\r\n    <div class=\"tw-px-6 tw-py-2 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\r\n      <div class=\"tw-flex tw-flex-col sm:tw-flex-row tw-justify-between tw-items-start sm:tw-items-center tw-space-y-2 sm:tw-space-y-0\">\r\n\r\n      <!-- Title and Back Button -->\r\n      <div class=\"tw-flex tw-items-center tw-space-x-4\">\r\n          <button cideEleButton variant=\"ghost\" size=\"sm\" (click)=\"goBack();\" class=\"tw-text-gray-600 hover:tw-text-gray-900\">\r\n          <cide-ele-icon class=\"tw-w-4 tw-h-4\">arrow_back</cide-ele-icon>\r\n        </button>\r\n        <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\n          <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">palette</cide-ele-icon>\r\n          <div>\r\n            <h5 class=\"tw-text-base tw-font-medium tw-text-gray-900 tw-m-0\">Theme Management</h5>\r\n            <p class=\"tw-text-sm tw-text-gray-500 tw-m-0\">Page: {{ pageTitle() }}</p>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Error Message -->\r\n    @if (error()) {\r\n    <div class=\"tw-mt-4 tw-p-4 tw-bg-red-50 tw-border tw-border-red-200 tw-rounded-md\">\r\n      <div class=\"tw-flex tw-items-start\">\r\n        <cide-ele-icon name=\"error\" class=\"tw-text-red-400 tw-w-5 tw-h-5 tw-mt-0.5 tw-flex-shrink-0\"></cide-ele-icon>\r\n        <div class=\"tw-ml-3\">\r\n          <h3 class=\"tw-text-sm tw-font-medium tw-text-red-800 tw-m-0\">Error</h3>\r\n          <p class=\"tw-text-sm tw-text-red-700 tw-mt-1 tw-m-0\">{{ error() }}</p>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    }\r\n  </div>\r\n\r\n    <!-- Quick Add/Edit Form Section -->\r\n    <div class=\"tw-px-6 tw-py-3 tw-bg-white tw-overflow-auto\">\r\n    <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-2\">\r\n      <div class=\"tw-flex tw-items-center tw-space-x-3\">\r\n        <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\r\n        <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-m-0\">{{ isEditMode() ? 'Edit Theme' : 'Quick Add Theme' }}</h6>\r\n      </div>\r\n    </div>\r\n\r\n      <!-- Form (kept as-is) -->\r\n    <form [formGroup]=\"themeForm\" (ngSubmit)=\"saveTheme()\" class=\"tw-space-y-4\">\r\n      <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-[1fr_200px] tw-gap-4\">\r\n        <!-- Left Side: All Input Fields -->\r\n        <div class=\"tw-space-y-4\">\r\n          <!-- Row 1: Theme Title and Theme Code -->\r\n          <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\r\n            <div class=\"tw-space-y-2\">\r\n                <cide-ele-input id=\"sytm_title\" formControlName=\"sytm_title\" placeholder=\"Enter theme title\" label=\"Theme Title*\" size=\"sm\"></cide-ele-input>\r\n            </div>\r\n            <div class=\"tw-space-y-2\">\r\n                <cide-ele-input id=\"sytm_theme_code\" formControlName=\"sytm_theme_code\" placeholder=\"Enter theme code\" label=\"Theme Code*\" size=\"sm\"></cide-ele-input>\r\n            </div>\r\n          </div>\r\n          \r\n          <!-- Row 2: Sub Title and Active Status -->\r\n          <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\r\n            <div class=\"tw-space-y-2\">\r\n                <cide-ele-input id=\"sytm_sub_title\" formControlName=\"sytm_sub_title\" placeholder=\"Enter sub title\" label=\"Sub Title\" size=\"sm\"></cide-ele-input>\r\n            </div>\r\n            <div class=\"tw-space-y-2 tw-flex tw-items-center\">\r\n                <cide-ele-input\r\n                  id=\"sytm_isactive_cb\"\r\n                  type=\"checkbox\"\r\n                  label=\"Active\"\r\n                size=\"sm\"\r\n                  formControlName=\"sytm_isactive\">\r\n                </cide-ele-input>\r\n            </div>\r\n          </div>\r\n          \r\n          <!-- Row 3: Description -->\r\n          <div class=\"tw-space-y-2\">\r\n              <cide-ele-textarea id=\"sytm_desc\" formControlName=\"sytm_desc\" placeholder=\"Enter theme description\" rows=\"2\" label=\"Description\" size=\"sm\"></cide-ele-textarea>\r\n          </div>\r\n        </div>\r\n        \r\n        <!-- Right Side: File Upload -->\r\n        <div class=\"tw-flex tw-flex-col tw-justify-start tw-items-center tw-p-0\">\r\n            <cide-ele-file-input \r\n              id=\"sytm_preview_id_fm\" \r\n              formControlName=\"sytm_preview_id_fm\"\r\n              accept=\"image/*\"\r\n              [showPreview]=\"true\"\r\n              [previewBoxMode]=\"true\"\r\n              [showFileName]=\"false\"\r\n              previewWidth=\"180px\"\r\n              previewHeight=\"120px\"\r\n              placeholderText=\"Upload Preview Image\"\r\n              placeholderIcon=\"image\"\r\n              [autoUpload]=\"true\"\r\n              [uploadData]=\"getPreviewImageUploadData()\"\r\n              (uploadSuccess)=\"onPreviewImageUploadSuccess($event)\"\r\n              (uploadError)=\"onPreviewImageUploadError($event)\"\r\n              (uploadProgressChange)=\"onPreviewImageUploadProgress($event)\">\r\n            </cide-ele-file-input>\r\n        </div>\r\n      </div>\r\n      \r\n      <!-- Configuration JSON -->\r\n      <div class=\"tw-space-y-2\">\r\n            <cide-ele-json-editor label=\"Configuration JSON\" formControlName=\"sytm_configuration\" [required]=\"true\" [config]=\"{\r\n               showLineNumbers: true,\r\n               autoFormat: true,\r\n               validateOnChange: true,\r\n               minHeight: 150,\r\n               maxHeight: 300,\r\n               placeholder: 'Enter theme configuration JSON...'\r\n              }\" helperText=\"Enter valid JSON configuration for the theme\"></cide-ele-json-editor>\r\n         </div>\r\n      <!-- Layout Configuration + Selection -->\r\n      <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-2 tw-gap-6\">\r\n        <div class=\"tw-space-y-2\">\r\n            <div class=\"tw-text-sm tw-font-medium tw-text-gray-700\">Layout & Selection</div>\r\n            <!-- Selected toggle -->\r\n            <div class=\"tw-bg-white tw-border tw-border-gray-200 tw-rounded-md tw-px-3 tw-py-2\">\r\n              <cide-ele-input\r\n                id=\"sytm_isselected\"\r\n                type=\"checkbox\"\r\n                label=\"Selected (Default)\"\r\n                  size=\"sm\"\r\n                formControlName=\"sytm_isselected\">\r\n              </cide-ele-input>\r\n              </div>\r\n            <div formGroupName=\"sytm_layout\" class=\"tw-bg-white tw-border tw-border-gray-200 tw-rounded-md tw-divide-y tw-overflow-hidden\">\r\n              <!-- Sidebar -->\r\n              <div class=\"tw-px-3 tw-py-2\" formGroupName=\"sytm_layout_sidebar\">\r\n                <cide-ele-input id=\"layout_sidebar_status\" type=\"checkbox\" label=\"Sidebar\" size=\"sm\" formControlName=\"status\"></cide-ele-input>\r\n            </div>\r\n            <!-- Header -->\r\n              <div class=\"tw-px-3 tw-py-2\" formGroupName=\"sytm_layout_header\">\r\n                <cide-ele-input id=\"layout_header_status\" type=\"checkbox\" label=\"Header\" size=\"sm\" formControlName=\"status\"></cide-ele-input>\r\n              </div>\r\n              <!-- Footer -->\r\n              <div class=\"tw-px-3 tw-py-2\" formGroupName=\"sytm_layout_footer\">\r\n                <cide-ele-input id=\"layout_footer_status\" type=\"checkbox\" label=\"Footer\" size=\"sm\" formControlName=\"status\"></cide-ele-input>\r\n              </div>\r\n              <!-- Breadcrumb -->\r\n              <div class=\"tw-px-3 tw-py-2\" formGroupName=\"sytm_layout_breadcrumb\">\r\n                <cide-ele-input id=\"layout_breadcrumb_status\" type=\"checkbox\" label=\"Breadcrumb\" size=\"sm\" formControlName=\"status\"></cide-ele-input>\r\n              </div>\r\n              <!-- Console -->\r\n              <div class=\"tw-px-3 tw-py-2\" formGroupName=\"sytm_layout_console\">\r\n                <cide-ele-input id=\"layout_console_status\" type=\"checkbox\" label=\"Console\" size=\"sm\" formControlName=\"status\"></cide-ele-input>\r\n            </div>\r\n              <!-- Request -->\r\n              <div class=\"tw-px-3 tw-py-2\" formGroupName=\"sytm_layout_request\">\r\n                <cide-ele-input id=\"layout_request_status\" type=\"checkbox\" label=\"Request\" size=\"sm\" formControlName=\"status\"></cide-ele-input>\r\n              </div>\r\n            </div>\r\n            <p class=\"tw-text-xs tw-text-gray-500 tw-pt-1\">Toggle active sections. Only one theme can be selected as default. More options can be added here later.</p>\r\n        </div>\r\n        \r\n        <!-- Drawer Configuration -->\r\n        <div class=\"tw-space-y-2\">\r\n            <div class=\"tw-flex tw-items-center tw-justify-between\">\r\n              <div class=\"tw-text-sm tw-font-medium tw-text-gray-700\">Drawers</div>\r\n              <button cideEleButton type=\"button\" size=\"xs\" variant=\"outline\" (click)=\"addDrawer()\">\r\n                Add Drawer\r\n              </button>\r\n            </div>\r\n\r\n            <div formGroupName=\"sytm_layout\">\r\n              <div class=\"tw-space-y-2\" formArrayName=\"sytm_layout_drawer\">\r\n                <div *ngFor=\"let drawerGrp of drawerArray.controls; let i = index\" [formGroupName]=\"i\" class=\"tw-border tw-border-gray-200 tw-rounded-md tw-p-3 tw-flex tw-items-center tw-gap-3\">\r\n                  <cide-ele-input id=\"drawer_active_{{i}}\" type=\"checkbox\" label=\"Active\" size=\"sm\" formControlName=\"syth_status\"></cide-ele-input>\r\n                  <div class=\"tw-flex-1\">\r\n                <cide-ele-select\r\n                      id=\"drawer_config_{{i}}\"\r\n                      label=\"Drawer For\"\r\n                  size=\"sm\"\r\n                      [options]=\"drawerConfigOptions\"\r\n                      formControlName=\"syth_config_syco_for\">\r\n                </cide-ele-select>\r\n              </div>\r\n                  <button cideEleButton type=\"button\" size=\"xs\" variant=\"ghost\" (click)=\"removeDrawer(i)\">\r\n                    <cide-ele-icon class=\"tw-w-4 tw-h-4\">delete</cide-ele-icon>\r\n                  </button>\r\n            </div>\r\n                <p class=\"tw-text-xs tw-text-gray-500\">Configure multiple drawers as needed.</p>\r\n              </div>\r\n            </div>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Form Actions -->\r\n        <div class=\"tw-flex tw-flex-col tw-gap-2 tw-pt-4 tw-border-t tw-border-gray-200\">\r\n          <div class=\"tw-flex tw-items-center tw-justify-end tw-space-x-3\">\r\n            <button cideEleButton type=\"button\" variant=\"outline\" (click)=\"cancelForm()\" [disabled]=\"loading()\">Cancel</button>\r\n            <button cideEleButton type=\"submit\" variant=\"primary\" leftIcon=\"add\" [disabled]=\"!themeForm.valid || loading()\" [loading]=\"loading()\">\r\n          {{ isEditMode() ? 'Update Theme' : 'Create Theme' }}\r\n        </button>\r\n          </div>\r\n      </div>\r\n    </form>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Right: Theme gallery (40%) -->\r\n  <div class=\"tw-hidden lg:tw-flex tw-w-2/5 tw-flex-col\">\r\n    <!-- (Header consolidated above) -->\r\n\r\n    <!-- Gallery list -->\r\n    <div class=\"tw-flex-1 tw-overflow-auto tw-bg-gray-50\">\r\n      <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3 tw-p-4\">\r\n        @for (theme of filteredThemes(); track theme._id) {\r\n          <div class=\"tw-rounded-md tw-transition tw-cursor-pointer tw-relative\"\r\n               [ngClass]=\"theme.sytm_isselected\r\n                 ? 'tw-border tw-border-blue-500 tw-ring-2 tw-ring-blue-200 tw-bg-blue-50/50'\r\n                 : 'tw-bg-white tw-border tw-border-gray-200 hover:tw-shadow-sm'\"\r\n               (click)=\"editTheme(theme)\"\r\n               role=\"button\"\r\n               tabindex=\"0\"\r\n               [attr.aria-selected]=\"theme.sytm_isselected ? 'true' : 'false'\"\r\n               [attr.aria-label]=\"'Edit theme ' + (theme.sytm_title || theme.sytm_theme_code)\"\r\n               (keydown.enter)=\"editTheme(theme)\"\r\n               (keydown.space)=\"$event.preventDefault(); editTheme(theme)\">\r\n\r\n            <!-- Selected badge -->\r\n            <div *ngIf=\"theme.sytm_isselected\"\r\n                 class=\"tw-absolute tw-top-2 tw-right-2 tw-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-rounded-full tw-bg-blue-600 tw-text-white\">\r\n              <cide-ele-icon class=\"tw-w-4 tw-h-4\">check</cide-ele-icon>\r\n            </div>\r\n \r\n            <div class=\"tw-aspect-[16/9] tw-bg-gray-100 tw-rounded-t-md tw-overflow-hidden tw-flex tw-items-center tw-justify-center\">\r\n              @if (theme.sytm_preview_id_fm) {\r\n                <img \r\n                  cideEleFileImage \r\n                  [fileId]=\"theme.sytm_preview_id_fm\" \r\n                  [altText]=\"'Theme Preview'\"\r\n                  class=\"tw-w-full tw-h-full tw-object-cover\" />\r\n              } @else {\r\n                <div class=\"tw-text-gray-400 tw-text-xs\">No preview</div>\r\n              }\r\n            </div>\r\n            <div class=\"tw-p-3 tw-space-y-1\">\r\n              <div class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-truncate\" [title]=\"theme.sytm_title\">{{ theme.sytm_title || 'Untitled Theme' }}</div>\r\n              <div class=\"tw-text-xs tw-text-gray-500 tw-truncate\" [title]=\"theme.sytm_theme_code\">{{ theme.sytm_theme_code }}</div>\r\n              <div class=\"tw-flex tw-items-center tw-justify-between tw-pt-1\">\r\n                <span class=\"tw-inline-flex tw-items-center tw-gap-1 tw-text-xs\" [ngClass]=\"theme.sytm_isactive ? 'tw-text-green-700' : 'tw-text-red-700'\">\r\n                  <span class=\"tw-w-1.5 tw-h-1.5 tw-rounded-full\" [ngClass]=\"theme.sytm_isactive ? 'tw-bg-green-500' : 'tw-bg-red-500'\"></span>\r\n                  {{ theme.sytm_isactive ? 'Active' : 'Inactive' }}\r\n                </span>\r\n                <div class=\"tw-flex tw-items-center tw-gap-1\">\r\n                  <!-- Set Selected Button - Clear and Simple -->\r\n                  @if (theme.sytm_isselected) {\r\n                    <span class=\"tw-inline-flex tw-items-center tw-gap-1 tw-px-2 tw-py-1 tw-bg-green-100 tw-text-green-800 tw-rounded-md tw-text-xs tw-font-medium\">\r\n                      <cide-ele-icon class=\"tw-w-3 tw-h-3\">check</cide-ele-icon>\r\n                      Selected\r\n                    </span>\r\n                  } @else {\r\n                    <button cideEleButton \r\n                            variant=\"outline\" \r\n                            size=\"xs\"\r\n                            (click)=\"$event.stopPropagation(); setSelectedTheme(theme)\"\r\n                            [attr.aria-label]=\"'Select ' + (theme.sytm_title || theme.sytm_theme_code) + ' theme'\"\r\n                            class=\"tw-text-xs\">\r\n                      Select\r\n                    </button>\r\n                  }\r\n                  <button cideEleButton variant=\"ghost\" size=\"xs\" (click)=\"$event.stopPropagation(); editTheme(theme)\"\r\n                          [attr.aria-label]=\"'Edit theme ' + (theme.sytm_title || theme.sytm_theme_code)\">\r\n                    <cide-ele-icon class=\"tw-w-4 tw-h-4\">edit</cide-ele-icon>\r\n                  </button>\r\n                  <button cideEleButton variant=\"ghost\" size=\"xs\" (click)=\"$event.stopPropagation(); deleteTheme(theme)\"\r\n                          [attr.aria-label]=\"'Delete theme ' + (theme.sytm_title || theme.sytm_theme_code)\">\r\n                    <cide-ele-icon class=\"tw-w-4 tw-h-4\">delete</cide-ele-icon>\r\n                  </button>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        }\r\n\r\n        @if (!loading() && filteredThemes().length === 0) {\r\n          <div class=\"tw-col-span-full tw-text-center tw-text-xs tw-text-gray-500 tw-py-8\">No themes found</div>\r\n        }\r\n  </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<!-- \r\n  Angular Template References for Grid Renderers (Best Practice)\r\n  \r\n  These ng-template elements represent the Angular best practice for custom rendering.\r\n  They provide:\r\n  - Type safety with template context\r\n  - Component lifecycle integration\r\n  - Change detection optimization\r\n  - Proper event handling\r\n  - Accessibility features\r\n  \r\n  Note: Current data grid uses string renderers for compatibility.\r\n  Templates are maintained for future component enhancement.\r\n-->\r\n\r\n<!-- Theme Details Renderer Template -->\r\n<ng-template #themeDetailsRendererTemplate let-row=\"row\" let-value=\"value\">\r\n  <div class=\"tw-flex tw-items-center tw-min-w-0\">\r\n    <!-- Theme Icon -->\r\n    <div class=\"tw-flex-shrink-0\">\r\n      <cide-ele-icon \r\n        class=\"tw-text-purple-600\" \r\n        size=\"xs\">\r\n        palette\r\n      </cide-ele-icon>\r\n    </div>\r\n    \r\n    <!-- Theme Details -->\r\n    <div class=\"tw-ml-3 tw-min-w-0 tw-flex-1\">\r\n      <div class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-truncate\" \r\n           [title]=\"row.sytm_title\">\r\n        {{ row.sytm_title || 'Untitled' }}\r\n      </div>\r\n      @if (row.sytm_desc) {\r\n        <div class=\"tw-text-xs tw-text-gray-500 tw-truncate\" \r\n             [title]=\"row.sytm_desc\">\r\n          {{ row.sytm_desc }}\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- Theme Status Renderer Template -->\r\n<ng-template #themeStatusRendererTemplate let-row=\"row\" let-value=\"value\">\r\n  <span class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-whitespace-nowrap\"\r\n        [ngClass]=\"row.sytm_isactive ? 'tw-bg-green-100 tw-text-green-800' : 'tw-bg-red-100 tw-text-red-800'\">\r\n    {{ row.sytm_isactive ? 'Active' : 'Inactive' }}\r\n  </span>\r\n</ng-template>\r\n\r\n<!-- Actions Dropdown Renderer Template -->\r\n<ng-template #actionsDropdownRendererTemplate let-row=\"row\" let-value=\"value\">\r\n  <cide-ele-dropdown \r\n    [items]=\"getActionDropdownItems(row)\"\r\n    [config]=\"{ triggerIcon: 'more_vert', triggerSize: 'sm' }\"\r\n    (itemClick)=\"onDropdownItemClick($event, row)\">\r\n  </cide-ele-dropdown>\r\n</ng-template> ", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1$2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideInputComponent, selector: "cide-ele-input", inputs: ["fill", "label", "labelHide", "disabled", "clearInput", "labelPlacement", "labelDir", "placeholder", "leadingIcon", "trailingIcon", "helperText", "helperTextCollapse", "hideHelperAndErrorText", "errorText", "maxlength", "minlength", "required", "autocapitalize", "autocomplete", "type", "width", "id", "ngModel", "option", "min", "max", "step", "size"], outputs: ["ngModelChange"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput", "options", "multiple", "searchable", "showSearchInput", "loading", "valueKey", "labelKey", "treeView"], outputs: ["ngModelChange", "change", "searchChange"] }, { kind: "component", type: CideTextareaComponent, selector: "cide-ele-textarea", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "minlength", "maxlength", "rows", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput"], outputs: ["ngModelChange"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideEleDropdownComponent, selector: "cide-ele-dropdown", inputs: ["items", "config", "triggerTemplate", "menuTemplate"], outputs: ["itemClick", "dropdownToggle"] }, { kind: "component", type: CideEleJsonEditorComponent, selector: "cide-ele-json-editor", inputs: ["label", "helperText", "required", "disabled", "showCharacterCount", "config"], outputs: ["valueChange", "objectChange", "errorsChange", "validChange"] }, { kind: "component", type: CideEleFileInputComponent, selector: "cide-ele-file-input", inputs: ["label", "accept", "multiple", "disabled", "required", "helperText", "errorText", "showPreview", "previewWidth", "previewHeight", "previewBoxMode", "showFileName", "placeholderText", "placeholderIcon", "autoUpload", "uploadData", "showFloatingUploader", "floatingUploaderGroupId"], outputs: ["fileChange", "uploadSuccess", "uploadError", "uploadProgressChange"] }, { kind: "directive", type: CideEleFileImageDirective, selector: "[cideEleFileImage]", inputs: ["fileId", "altText"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideCorePageThemeComponent, isStandalone: true, selector: "cide-core-page-theme", viewQueries: [{ propertyName: "themeDetailsRendererTemplate", first: true, predicate: ["themeDetailsRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "themeStatusRendererTemplate", first: true, predicate: ["themeStatusRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "actionsDropdownRendererTemplate", first: true, predicate: ["actionsDropdownRendererTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Page Theme Container -->\r\n<div class=\"tw-flex tw-h-full tw-w-full\">\r\n  \r\n  <!-- Left: Form and header (60%) -->\r\n  <div class=\"tw-w-full lg:tw-w-3/5 tw-flex tw-flex-col tw-border-r tw-border-gray-200\">\r\n\r\n  <!-- Header Section -->\r\n    <div class=\"tw-px-6 tw-py-2 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\r\n      <div class=\"tw-flex tw-flex-col sm:tw-flex-row tw-justify-between tw-items-start sm:tw-items-center tw-space-y-2 sm:tw-space-y-0\">\r\n\r\n      <!-- Title and Back Button -->\r\n      <div class=\"tw-flex tw-items-center tw-space-x-4\">\r\n          <button cideEleButton variant=\"ghost\" size=\"sm\" (click)=\"goBack();\" class=\"tw-text-gray-600 hover:tw-text-gray-900\">\r\n          <cide-ele-icon class=\"tw-w-4 tw-h-4\">arrow_back</cide-ele-icon>\r\n        </button>\r\n        <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\n          <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">palette</cide-ele-icon>\r\n          <div>\r\n            <h5 class=\"tw-text-base tw-font-medium tw-text-gray-900 tw-m-0\">Theme Management</h5>\r\n            <p class=\"tw-text-sm tw-text-gray-500 tw-m-0\">Page: {{ pageTitle() }}</p>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Error Message -->\r\n    @if (error()) {\r\n    <div class=\"tw-mt-4 tw-p-4 tw-bg-red-50 tw-border tw-border-red-200 tw-rounded-md\">\r\n      <div class=\"tw-flex tw-items-start\">\r\n        <cide-ele-icon name=\"error\" class=\"tw-text-red-400 tw-w-5 tw-h-5 tw-mt-0.5 tw-flex-shrink-0\"></cide-ele-icon>\r\n        <div class=\"tw-ml-3\">\r\n          <h3 class=\"tw-text-sm tw-font-medium tw-text-red-800 tw-m-0\">Error</h3>\r\n          <p class=\"tw-text-sm tw-text-red-700 tw-mt-1 tw-m-0\">{{ error() }}</p>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    }\r\n  </div>\r\n\r\n    <!-- Quick Add/Edit Form Section -->\r\n    <div class=\"tw-px-6 tw-py-3 tw-bg-white tw-overflow-auto\">\r\n    <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-2\">\r\n      <div class=\"tw-flex tw-items-center tw-space-x-3\">\r\n        <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\r\n        <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-m-0\">{{ isEditMode() ? 'Edit Theme' : 'Quick Add Theme' }}</h6>\r\n      </div>\r\n    </div>\r\n\r\n      <!-- Form (kept as-is) -->\r\n    <form [formGroup]=\"themeForm\" (ngSubmit)=\"saveTheme()\" class=\"tw-space-y-4\">\r\n      <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-[1fr_200px] tw-gap-4\">\r\n        <!-- Left Side: All Input Fields -->\r\n        <div class=\"tw-space-y-4\">\r\n          <!-- Row 1: Theme Title and Theme Code -->\r\n          <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\r\n            <div class=\"tw-space-y-2\">\r\n                <cide-ele-input id=\"sytm_title\" formControlName=\"sytm_title\" placeholder=\"Enter theme title\" label=\"Theme Title*\" size=\"sm\"></cide-ele-input>\r\n            </div>\r\n            <div class=\"tw-space-y-2\">\r\n                <cide-ele-input id=\"sytm_theme_code\" formControlName=\"sytm_theme_code\" placeholder=\"Enter theme code\" label=\"Theme Code*\" size=\"sm\"></cide-ele-input>\r\n            </div>\r\n          </div>\r\n          \r\n          <!-- Row 2: Sub Title and Active Status -->\r\n          <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\r\n            <div class=\"tw-space-y-2\">\r\n                <cide-ele-input id=\"sytm_sub_title\" formControlName=\"sytm_sub_title\" placeholder=\"Enter sub title\" label=\"Sub Title\" size=\"sm\"></cide-ele-input>\r\n            </div>\r\n            <div class=\"tw-space-y-2 tw-flex tw-items-center\">\r\n                <cide-ele-input\r\n                  id=\"sytm_isactive_cb\"\r\n                  type=\"checkbox\"\r\n                  label=\"Active\"\r\n                size=\"sm\"\r\n                  formControlName=\"sytm_isactive\">\r\n                </cide-ele-input>\r\n            </div>\r\n          </div>\r\n          \r\n          <!-- Row 3: Description -->\r\n          <div class=\"tw-space-y-2\">\r\n              <cide-ele-textarea id=\"sytm_desc\" formControlName=\"sytm_desc\" placeholder=\"Enter theme description\" rows=\"2\" label=\"Description\" size=\"sm\"></cide-ele-textarea>\r\n          </div>\r\n        </div>\r\n        \r\n        <!-- Right Side: File Upload -->\r\n        <div class=\"tw-flex tw-flex-col tw-justify-start tw-items-center tw-p-0\">\r\n            <cide-ele-file-input \r\n              id=\"sytm_preview_id_fm\" \r\n              formControlName=\"sytm_preview_id_fm\"\r\n              accept=\"image/*\"\r\n              [showPreview]=\"true\"\r\n              [previewBoxMode]=\"true\"\r\n              [showFileName]=\"false\"\r\n              previewWidth=\"180px\"\r\n              previewHeight=\"120px\"\r\n              placeholderText=\"Upload Preview Image\"\r\n              placeholderIcon=\"image\"\r\n              [autoUpload]=\"true\"\r\n              [uploadData]=\"getPreviewImageUploadData()\"\r\n              (uploadSuccess)=\"onPreviewImageUploadSuccess($event)\"\r\n              (uploadError)=\"onPreviewImageUploadError($event)\"\r\n              (uploadProgressChange)=\"onPreviewImageUploadProgress($event)\">\r\n            </cide-ele-file-input>\r\n        </div>\r\n      </div>\r\n      \r\n      <!-- Configuration JSON -->\r\n      <div class=\"tw-space-y-2\">\r\n            <cide-ele-json-editor label=\"Configuration JSON\" formControlName=\"sytm_configuration\" [required]=\"true\" [config]=\"{\r\n               showLineNumbers: true,\r\n               autoFormat: true,\r\n               validateOnChange: true,\r\n               minHeight: 150,\r\n               maxHeight: 300,\r\n               placeholder: 'Enter theme configuration JSON...'\r\n              }\" helperText=\"Enter valid JSON configuration for the theme\"></cide-ele-json-editor>\r\n         </div>\r\n      <!-- Layout Configuration + Selection -->\r\n      <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-2 tw-gap-6\">\r\n        <div class=\"tw-space-y-2\">\r\n            <div class=\"tw-text-sm tw-font-medium tw-text-gray-700\">Layout & Selection</div>\r\n            <!-- Selected toggle -->\r\n            <div class=\"tw-bg-white tw-border tw-border-gray-200 tw-rounded-md tw-px-3 tw-py-2\">\r\n              <cide-ele-input\r\n                id=\"sytm_isselected\"\r\n                type=\"checkbox\"\r\n                label=\"Selected (Default)\"\r\n                  size=\"sm\"\r\n                formControlName=\"sytm_isselected\">\r\n              </cide-ele-input>\r\n              </div>\r\n            <div formGroupName=\"sytm_layout\" class=\"tw-bg-white tw-border tw-border-gray-200 tw-rounded-md tw-divide-y tw-overflow-hidden\">\r\n              <!-- Sidebar -->\r\n              <div class=\"tw-px-3 tw-py-2\" formGroupName=\"sytm_layout_sidebar\">\r\n                <cide-ele-input id=\"layout_sidebar_status\" type=\"checkbox\" label=\"Sidebar\" size=\"sm\" formControlName=\"status\"></cide-ele-input>\r\n            </div>\r\n            <!-- Header -->\r\n              <div class=\"tw-px-3 tw-py-2\" formGroupName=\"sytm_layout_header\">\r\n                <cide-ele-input id=\"layout_header_status\" type=\"checkbox\" label=\"Header\" size=\"sm\" formControlName=\"status\"></cide-ele-input>\r\n              </div>\r\n              <!-- Footer -->\r\n              <div class=\"tw-px-3 tw-py-2\" formGroupName=\"sytm_layout_footer\">\r\n                <cide-ele-input id=\"layout_footer_status\" type=\"checkbox\" label=\"Footer\" size=\"sm\" formControlName=\"status\"></cide-ele-input>\r\n              </div>\r\n              <!-- Breadcrumb -->\r\n              <div class=\"tw-px-3 tw-py-2\" formGroupName=\"sytm_layout_breadcrumb\">\r\n                <cide-ele-input id=\"layout_breadcrumb_status\" type=\"checkbox\" label=\"Breadcrumb\" size=\"sm\" formControlName=\"status\"></cide-ele-input>\r\n              </div>\r\n              <!-- Console -->\r\n              <div class=\"tw-px-3 tw-py-2\" formGroupName=\"sytm_layout_console\">\r\n                <cide-ele-input id=\"layout_console_status\" type=\"checkbox\" label=\"Console\" size=\"sm\" formControlName=\"status\"></cide-ele-input>\r\n            </div>\r\n              <!-- Request -->\r\n              <div class=\"tw-px-3 tw-py-2\" formGroupName=\"sytm_layout_request\">\r\n                <cide-ele-input id=\"layout_request_status\" type=\"checkbox\" label=\"Request\" size=\"sm\" formControlName=\"status\"></cide-ele-input>\r\n              </div>\r\n            </div>\r\n            <p class=\"tw-text-xs tw-text-gray-500 tw-pt-1\">Toggle active sections. Only one theme can be selected as default. More options can be added here later.</p>\r\n        </div>\r\n        \r\n        <!-- Drawer Configuration -->\r\n        <div class=\"tw-space-y-2\">\r\n            <div class=\"tw-flex tw-items-center tw-justify-between\">\r\n              <div class=\"tw-text-sm tw-font-medium tw-text-gray-700\">Drawers</div>\r\n              <button cideEleButton type=\"button\" size=\"xs\" variant=\"outline\" (click)=\"addDrawer()\">\r\n                Add Drawer\r\n              </button>\r\n            </div>\r\n\r\n            <div formGroupName=\"sytm_layout\">\r\n              <div class=\"tw-space-y-2\" formArrayName=\"sytm_layout_drawer\">\r\n                <div *ngFor=\"let drawerGrp of drawerArray.controls; let i = index\" [formGroupName]=\"i\" class=\"tw-border tw-border-gray-200 tw-rounded-md tw-p-3 tw-flex tw-items-center tw-gap-3\">\r\n                  <cide-ele-input id=\"drawer_active_{{i}}\" type=\"checkbox\" label=\"Active\" size=\"sm\" formControlName=\"syth_status\"></cide-ele-input>\r\n                  <div class=\"tw-flex-1\">\r\n                <cide-ele-select\r\n                      id=\"drawer_config_{{i}}\"\r\n                      label=\"Drawer For\"\r\n                  size=\"sm\"\r\n                      [options]=\"drawerConfigOptions\"\r\n                      formControlName=\"syth_config_syco_for\">\r\n                </cide-ele-select>\r\n              </div>\r\n                  <button cideEleButton type=\"button\" size=\"xs\" variant=\"ghost\" (click)=\"removeDrawer(i)\">\r\n                    <cide-ele-icon class=\"tw-w-4 tw-h-4\">delete</cide-ele-icon>\r\n                  </button>\r\n            </div>\r\n                <p class=\"tw-text-xs tw-text-gray-500\">Configure multiple drawers as needed.</p>\r\n              </div>\r\n            </div>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Form Actions -->\r\n        <div class=\"tw-flex tw-flex-col tw-gap-2 tw-pt-4 tw-border-t tw-border-gray-200\">\r\n          <div class=\"tw-flex tw-items-center tw-justify-end tw-space-x-3\">\r\n            <button cideEleButton type=\"button\" variant=\"outline\" (click)=\"cancelForm()\" [disabled]=\"loading()\">Cancel</button>\r\n            <button cideEleButton type=\"submit\" variant=\"primary\" leftIcon=\"add\" [disabled]=\"!themeForm.valid || loading()\" [loading]=\"loading()\">\r\n          {{ isEditMode() ? 'Update Theme' : 'Create Theme' }}\r\n        </button>\r\n          </div>\r\n      </div>\r\n    </form>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Right: Theme gallery (40%) -->\r\n  <div class=\"tw-hidden lg:tw-flex tw-w-2/5 tw-flex-col\">\r\n    <!-- (Header consolidated above) -->\r\n\r\n    <!-- Gallery list -->\r\n    <div class=\"tw-flex-1 tw-overflow-auto tw-bg-gray-50\">\r\n      <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3 tw-p-4\">\r\n        @for (theme of filteredThemes(); track theme._id) {\r\n          <div class=\"tw-rounded-md tw-transition tw-cursor-pointer tw-relative\"\r\n               [ngClass]=\"theme.sytm_isselected\r\n                 ? 'tw-border tw-border-blue-500 tw-ring-2 tw-ring-blue-200 tw-bg-blue-50/50'\r\n                 : 'tw-bg-white tw-border tw-border-gray-200 hover:tw-shadow-sm'\"\r\n               (click)=\"editTheme(theme)\"\r\n               role=\"button\"\r\n               tabindex=\"0\"\r\n               [attr.aria-selected]=\"theme.sytm_isselected ? 'true' : 'false'\"\r\n               [attr.aria-label]=\"'Edit theme ' + (theme.sytm_title || theme.sytm_theme_code)\"\r\n               (keydown.enter)=\"editTheme(theme)\"\r\n               (keydown.space)=\"$event.preventDefault(); editTheme(theme)\">\r\n\r\n            <!-- Selected badge -->\r\n            <div *ngIf=\"theme.sytm_isselected\"\r\n                 class=\"tw-absolute tw-top-2 tw-right-2 tw-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-rounded-full tw-bg-blue-600 tw-text-white\">\r\n              <cide-ele-icon class=\"tw-w-4 tw-h-4\">check</cide-ele-icon>\r\n            </div>\r\n \r\n            <div class=\"tw-aspect-[16/9] tw-bg-gray-100 tw-rounded-t-md tw-overflow-hidden tw-flex tw-items-center tw-justify-center\">\r\n              @if (theme.sytm_preview_id_fm) {\r\n                <img \r\n                  cideEleFileImage \r\n                  [fileId]=\"theme.sytm_preview_id_fm\" \r\n                  [altText]=\"'Theme Preview'\"\r\n                  class=\"tw-w-full tw-h-full tw-object-cover\" />\r\n              } @else {\r\n                <div class=\"tw-text-gray-400 tw-text-xs\">No preview</div>\r\n              }\r\n            </div>\r\n            <div class=\"tw-p-3 tw-space-y-1\">\r\n              <div class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-truncate\" [title]=\"theme.sytm_title\">{{ theme.sytm_title || 'Untitled Theme' }}</div>\r\n              <div class=\"tw-text-xs tw-text-gray-500 tw-truncate\" [title]=\"theme.sytm_theme_code\">{{ theme.sytm_theme_code }}</div>\r\n              <div class=\"tw-flex tw-items-center tw-justify-between tw-pt-1\">\r\n                <span class=\"tw-inline-flex tw-items-center tw-gap-1 tw-text-xs\" [ngClass]=\"theme.sytm_isactive ? 'tw-text-green-700' : 'tw-text-red-700'\">\r\n                  <span class=\"tw-w-1.5 tw-h-1.5 tw-rounded-full\" [ngClass]=\"theme.sytm_isactive ? 'tw-bg-green-500' : 'tw-bg-red-500'\"></span>\r\n                  {{ theme.sytm_isactive ? 'Active' : 'Inactive' }}\r\n                </span>\r\n                <div class=\"tw-flex tw-items-center tw-gap-1\">\r\n                  <!-- Set Selected Button - Clear and Simple -->\r\n                  @if (theme.sytm_isselected) {\r\n                    <span class=\"tw-inline-flex tw-items-center tw-gap-1 tw-px-2 tw-py-1 tw-bg-green-100 tw-text-green-800 tw-rounded-md tw-text-xs tw-font-medium\">\r\n                      <cide-ele-icon class=\"tw-w-3 tw-h-3\">check</cide-ele-icon>\r\n                      Selected\r\n                    </span>\r\n                  } @else {\r\n                    <button cideEleButton \r\n                            variant=\"outline\" \r\n                            size=\"xs\"\r\n                            (click)=\"$event.stopPropagation(); setSelectedTheme(theme)\"\r\n                            [attr.aria-label]=\"'Select ' + (theme.sytm_title || theme.sytm_theme_code) + ' theme'\"\r\n                            class=\"tw-text-xs\">\r\n                      Select\r\n                    </button>\r\n                  }\r\n                  <button cideEleButton variant=\"ghost\" size=\"xs\" (click)=\"$event.stopPropagation(); editTheme(theme)\"\r\n                          [attr.aria-label]=\"'Edit theme ' + (theme.sytm_title || theme.sytm_theme_code)\">\r\n                    <cide-ele-icon class=\"tw-w-4 tw-h-4\">edit</cide-ele-icon>\r\n                  </button>\r\n                  <button cideEleButton variant=\"ghost\" size=\"xs\" (click)=\"$event.stopPropagation(); deleteTheme(theme)\"\r\n                          [attr.aria-label]=\"'Delete theme ' + (theme.sytm_title || theme.sytm_theme_code)\">\r\n                    <cide-ele-icon class=\"tw-w-4 tw-h-4\">delete</cide-ele-icon>\r\n                  </button>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        }\r\n\r\n        @if (!loading() && filteredThemes().length === 0) {\r\n          <div class=\"tw-col-span-full tw-text-center tw-text-xs tw-text-gray-500 tw-py-8\">No themes found</div>\r\n        }\r\n  </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<!-- \r\n  Angular Template References for Grid Renderers (Best Practice)\r\n  \r\n  These ng-template elements represent the Angular best practice for custom rendering.\r\n  They provide:\r\n  - Type safety with template context\r\n  - Component lifecycle integration\r\n  - Change detection optimization\r\n  - Proper event handling\r\n  - Accessibility features\r\n  \r\n  Note: Current data grid uses string renderers for compatibility.\r\n  Templates are maintained for future component enhancement.\r\n-->\r\n\r\n<!-- Theme Details Renderer Template -->\r\n<ng-template #themeDetailsRendererTemplate let-row=\"row\" let-value=\"value\">\r\n  <div class=\"tw-flex tw-items-center tw-min-w-0\">\r\n    <!-- Theme Icon -->\r\n    <div class=\"tw-flex-shrink-0\">\r\n      <cide-ele-icon \r\n        class=\"tw-text-purple-600\" \r\n        size=\"xs\">\r\n        palette\r\n      </cide-ele-icon>\r\n    </div>\r\n    \r\n    <!-- Theme Details -->\r\n    <div class=\"tw-ml-3 tw-min-w-0 tw-flex-1\">\r\n      <div class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-truncate\" \r\n           [title]=\"row.sytm_title\">\r\n        {{ row.sytm_title || 'Untitled' }}\r\n      </div>\r\n      @if (row.sytm_desc) {\r\n        <div class=\"tw-text-xs tw-text-gray-500 tw-truncate\" \r\n             [title]=\"row.sytm_desc\">\r\n          {{ row.sytm_desc }}\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- Theme Status Renderer Template -->\r\n<ng-template #themeStatusRendererTemplate let-row=\"row\" let-value=\"value\">\r\n  <span class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-whitespace-nowrap\"\r\n        [ngClass]=\"row.sytm_isactive ? 'tw-bg-green-100 tw-text-green-800' : 'tw-bg-red-100 tw-text-red-800'\">\r\n    {{ row.sytm_isactive ? 'Active' : 'Inactive' }}\r\n  </span>\r\n</ng-template>\r\n\r\n<!-- Actions Dropdown Renderer Template -->\r\n<ng-template #actionsDropdownRendererTemplate let-row=\"row\" let-value=\"value\">\r\n  <cide-ele-dropdown \r\n    [items]=\"getActionDropdownItems(row)\"\r\n    [config]=\"{ triggerIcon: 'more_vert', triggerSize: 'sm' }\"\r\n    (itemClick)=\"onDropdownItemClick($event, row)\">\r\n  </cide-ele-dropdown>\r\n</ng-template> ", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1$2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideInputComponent, selector: "cide-ele-input", inputs: ["fill", "label", "labelHide", "disabled", "clearInput", "labelPlacement", "labelDir", "placeholder", "leadingIcon", "trailingIcon", "helperText", "helperTextCollapse", "hideHelperAndErrorText", "errorText", "maxlength", "minlength", "required", "autocapitalize", "autocomplete", "type", "width", "id", "ngModel", "option", "min", "max", "step", "size"], outputs: ["ngModelChange"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "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: [{
             type: Component,
@@ -7761,7 +7881,7 @@ class CideCorePageControlsComponent {
         return control._id || '';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCorePageControlsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.7", type: CideCorePageControlsComponent, isStandalone: true, selector: "cide-core-page-controls", ngImport: i0, template: "<!-- Page Controls Container -->\r\n<div class=\"tw-flex tw-flex-col tw-h-full tw-bg-gray-50\">\r\n  <!-- Header Section -->\r\n  <div class=\"tw-bg-white tw-border-b tw-border-gray-200 tw-px-6 tw-py-4\">\r\n    <div class=\"tw-flex tw-items-center tw-justify-between\">\r\n      <div class=\"tw-flex tw-items-center tw-space-x-4\">\r\n        <button \r\n          cideEleButton\r\n          variant=\"ghost\"\r\n          size=\"sm\"\r\n          (click)=\"goBack()\"\r\n          class=\"tw-flex tw-items-center tw-justify-center tw-w-8 tw-h-8 tw-text-gray-600 hover:tw-text-gray-900 hover:tw-bg-gray-100 tw-rounded-md tw-transition-colors\">\r\n          <cide-ele-icon>arrow_back</cide-ele-icon>\r\n        </button>\r\n        <div class=\"tw-flex tw-items-center tw-space-x-3\">\r\n          <cide-ele-icon class=\"tw-text-blue-600 tw-text-xl\">settings</cide-ele-icon>\r\n          <div>\r\n            <h1 class=\"tw-text-xl tw-font-semibold tw-text-gray-900 tw-mb-0\">Control Management</h1>\r\n            <p class=\"tw-text-sm tw-text-gray-500 tw-mb-0\">Page: {{ pageTitle() }}</p>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Error Message -->\r\n  <div class=\"tw-bg-red-50 tw-border tw-border-red-200 tw-rounded-md tw-p-4 tw-mx-6 tw-mt-4 tw-flex tw-items-start tw-space-x-3\" *ngIf=\"error()\">\r\n    <cide-ele-icon class=\"tw-text-red-500 tw-flex-shrink-0 tw-mt-0.5\">error</cide-ele-icon>\r\n    <div>\r\n      <h3 class=\"tw-text-red-800 tw-font-medium tw-mb-1\">Error</h3>\r\n      <p class=\"tw-text-red-700 tw-text-sm tw-mb-0\">{{ error() }}</p>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Main Content Area -->\r\n  <div class=\"tw-flex tw-flex-1 tw-gap-6 tw-p-6 tw-overflow-hidden lg:tw-flex-row tw-flex-col\">\r\n    <!-- Form Section -->\r\n    <div class=\"tw-w-full lg:tw-w-3/5 tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-flex tw-flex-col\">\r\n      <div class=\"tw-flex tw-items-center tw-space-x-3 tw-p-6 tw-border-b tw-border-gray-200\">\r\n        <cide-ele-icon class=\"tw-text-blue-600\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\r\n        <h3 class=\"tw-text-lg tw-font-medium tw-text-gray-900 tw-mb-0\">{{ isEditMode() ? 'Edit Control' : 'Quick Add Control' }}</h3>\r\n      </div>\r\n\r\n      <!-- Form -->\r\n      <form [formGroup]=\"controlForm\" (ngSubmit)=\"saveControl()\" class=\"tw-flex tw-flex-col tw-flex-1 tw-p-6 tw-overflow-y-auto\">\r\n        <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-2 tw-gap-4 tw-mb-6\">\r\n          \r\n          <!-- Basic Information Section -->\r\n          <!-- Control Key -->\r\n          <div class=\"tw-space-y-1\">\r\n            <cide-ele-input\r\n              id=\"sype_key\"\r\n              formControlName=\"sype_key\"\r\n              placeholder=\"Enter control key\"\r\n              label=\"Control Key\"\r\n              size=\"sm\">\r\n            </cide-ele-input>\r\n          </div>\r\n\r\n          <!-- Control Label -->\r\n          <div class=\"tw-space-y-1\">\r\n            <cide-ele-input\r\n              id=\"sype_label\"\r\n              formControlName=\"sype_label\"\r\n              placeholder=\"Enter control label\"\r\n              label=\"Control Label\"\r\n              size=\"sm\">\r\n            </cide-ele-input>\r\n          </div>\r\n\r\n          <!-- Control Type -->\r\n          <div class=\"tw-space-y-1\">\r\n            <cide-ele-select\r\n              id=\"sype_type\"\r\n              formControlName=\"sype_type\"\r\n              [options]=\"[\r\n                { value: 'text', label: 'Text Input' },\r\n                { value: 'textarea', label: 'Text Area' },\r\n                { value: 'select', label: 'Select' },\r\n                { value: 'checkbox', label: 'Checkbox' },\r\n                { value: 'radio', label: 'Radio' },\r\n                { value: 'date', label: 'Date' },\r\n                { value: 'number', label: 'Number' },\r\n                { value: 'email', label: 'Email' },\r\n                { value: 'password', label: 'Password' },\r\n                { value: 'file', label: 'File Upload' }\r\n              ]\"\r\n              label=\"Control Type\"\r\n              size=\"sm\">\r\n            </cide-ele-select>\r\n          </div>\r\n\r\n          <!-- Status - Checkbox aligned properly -->\r\n          <div class=\"tw-space-y-1\">\r\n            <cide-ele-input\r\n              id=\"sype_isactive\"\r\n              type=\"checkbox\"\r\n              formControlName=\"sype_isactive\"\r\n              label=\"Active Status\"\r\n              size=\"sm\">\r\n            </cide-ele-input>\r\n          </div>\r\n\r\n          <!-- Placeholder -->\r\n          <div class=\"tw-space-y-1\">\r\n            <cide-ele-input\r\n              id=\"sype_placeholder\"\r\n              formControlName=\"sype_placeholder\"\r\n              placeholder=\"Enter placeholder text\"\r\n              label=\"Placeholder\"\r\n              size=\"sm\">\r\n            </cide-ele-input>\r\n          </div>\r\n\r\n          <!-- Auto Complete - Checkbox aligned properly -->\r\n          <div class=\"tw-space-y-1\">\r\n            <cide-ele-input\r\n              id=\"sype_auto_complete\"\r\n              type=\"checkbox\"\r\n              formControlName=\"sype_auto_complete\"\r\n              label=\"Auto Complete\"\r\n              size=\"sm\">\r\n            </cide-ele-input>\r\n          </div>\r\n\r\n          <!-- Tooltip -->\r\n          <div class=\"tw-space-y-1\">\r\n            <cide-ele-input\r\n              id=\"sype_tooltip\"\r\n              formControlName=\"sype_tooltip\"\r\n              placeholder=\"Enter tooltip text\"\r\n              label=\"Tooltip\"\r\n              size=\"sm\">\r\n            </cide-ele-input>\r\n          </div>\r\n\r\n          <!-- Validation & Sizing Section -->\r\n          <!-- Min/Max Length - Side by side -->\r\n          <div class=\"tw-col-span-2 tw-flex tw-gap-4\">\r\n            <div class=\"tw-flex-1 tw-space-y-1\">\r\n              <cide-ele-input\r\n                id=\"sype_min_length\"\r\n                type=\"number\"\r\n                formControlName=\"sype_min_length\"\r\n                placeholder=\"0\"\r\n                label=\"Min Length\"\r\n                size=\"xs\">\r\n              </cide-ele-input>\r\n            </div>\r\n            <div class=\"tw-flex-1 tw-space-y-1\">\r\n              <cide-ele-input\r\n                id=\"sype_max_length\"\r\n                type=\"number\"\r\n                formControlName=\"sype_max_length\"\r\n                placeholder=\"20\"\r\n                label=\"Max Length\"\r\n                size=\"xs\">\r\n              </cide-ele-input>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Size & Label Placement - Side by side -->\r\n          <div class=\"tw-col-span-2 tw-flex tw-gap-4\">\r\n            <div class=\"tw-flex-1 tw-space-y-1\">\r\n              <cide-ele-select\r\n                id=\"sype_size\"\r\n                formControlName=\"sype_size\"\r\n                label=\"Size\"\r\n                size=\"xs\"\r\n                [options]=\"[\r\n                  { value: 'xs', label: 'XS' },\r\n                  { value: 'sm', label: 'SM' },\r\n                  { value: 'md', label: 'MD' },\r\n                  { value: 'lg', label: 'LG' },\r\n                  { value: 'xl', label: 'XL' },\r\n                  { value: 'xxl', label: 'XXL' }\r\n                ]\">\r\n              </cide-ele-select>\r\n            </div>\r\n            <div class=\"tw-flex-1 tw-space-y-1\">\r\n              <cide-ele-select\r\n                id=\"sype_label_placement\"\r\n                formControlName=\"sype_label_placement\"\r\n                label=\"Label Placement\"\r\n                size=\"xs\"\r\n                [options]=\"[\r\n                  { value: 'left', label: 'Left' },\r\n                  { value: 'floating', label: 'Floating' },\r\n                  { value: 'fixed', label: 'Fixed' }\r\n                ]\">\r\n              </cide-ele-select>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Width & Height - Side by side -->\r\n          <div class=\"tw-col-span-2 tw-flex tw-gap-4\">\r\n            <div class=\"tw-flex-1 tw-space-y-1\">\r\n              <cide-ele-input\r\n                id=\"sype_width\"\r\n                type=\"text\"\r\n                formControlName=\"sype_width\"\r\n                placeholder=\"20px\"\r\n                label=\"Width\"\r\n                size=\"xs\">\r\n              </cide-ele-input>\r\n            </div>\r\n            <div class=\"tw-flex-1 tw-space-y-1\">\r\n              <cide-ele-input\r\n                id=\"sype_height\"\r\n                type=\"text\"\r\n                formControlName=\"sype_height\"\r\n                placeholder=\"20px\"\r\n                label=\"Height\"\r\n                size=\"xs\">\r\n              </cide-ele-input>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Leading Icon -->\r\n          <div class=\"tw-space-y-1\">\r\n            <cide-ele-input\r\n              id=\"sype_leading_icon\"\r\n              formControlName=\"sype_leading_icon\"\r\n              placeholder=\"Enter icon name\"\r\n              label=\"Leading Icon\"\r\n              size=\"sm\">\r\n            </cide-ele-input>\r\n          </div>\r\n\r\n          <!-- Default Value -->\r\n          <div class=\"tw-space-y-1\">\r\n            <cide-ele-input\r\n              id=\"sype_default\"\r\n              formControlName=\"sype_default\"\r\n              placeholder=\"Enter default value\"\r\n              label=\"Default Value\"\r\n              size=\"sm\">\r\n            </cide-ele-input>\r\n          </div>\r\n\r\n          <!-- Regex Pattern -->\r\n          <div class=\"tw-space-y-1\">\r\n            <cide-ele-input\r\n              id=\"sype_regex\"\r\n              formControlName=\"sype_regex\"\r\n              placeholder=\"Enter regex pattern\"\r\n              label=\"Regex Pattern\"\r\n              size=\"sm\">\r\n            </cide-ele-input>\r\n          </div>\r\n\r\n          <!-- Option Key -->\r\n          <div class=\"tw-space-y-1\">\r\n            <cide-ele-input\r\n              id=\"sype_option_key\"\r\n              formControlName=\"sype_option_key\"\r\n              placeholder=\"Enter option key\"\r\n              label=\"Option Key\"\r\n              size=\"sm\">\r\n            </cide-ele-input>\r\n          </div>\r\n\r\n          <!-- Entity ID (Auto-assigned from AppState) - Hidden -->\r\n          <div class=\"tw-space-y-1\" style=\"display: none;\">\r\n            <cide-ele-input\r\n              id=\"sype_entity_id_syen\"\r\n              formControlName=\"sype_entity_id_syen\"\r\n              placeholder=\"Auto-assigned from system\"\r\n              label=\"Entity ID (Auto-assigned)\"\r\n              size=\"sm\"\r\n              readonly>\r\n            </cide-ele-input>\r\n          </div>\r\n\r\n          <!-- Control Options -->\r\n          <div class=\"tw-col-span-2 tw-space-y-1\">\r\n            <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-mb-3\">Control Options</h6>\r\n            <div class=\"tw-grid tw-grid-cols-1 sm:tw-grid-cols-2 lg:tw-grid-cols-3 tw-gap-3\">\r\n              \r\n              <!-- Required -->\r\n              <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\n                <cide-ele-input\r\n                  id=\"sype_required\"\r\n                  type=\"checkbox\"\r\n                  formControlName=\"sype_required\"\r\n                  label=\"Required\"\r\n                  size=\"xs\">\r\n                </cide-ele-input>\r\n              </div>\r\n\r\n              <!-- Disabled -->\r\n              <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\n                <cide-ele-input\r\n                  id=\"sype_disabled\"\r\n                  type=\"checkbox\"\r\n                  formControlName=\"sype_disabled\"\r\n                  label=\"Disabled\"\r\n                  size=\"xs\">\r\n                </cide-ele-input>\r\n              </div>\r\n\r\n              <!-- Hide Label -->\r\n              <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\n                <cide-ele-input\r\n                  id=\"sype_label_hide\"\r\n                  type=\"checkbox\"\r\n                  formControlName=\"sype_label_hide\"\r\n                  label=\"Hide Label\"\r\n                  size=\"xs\">\r\n                </cide-ele-input>\r\n              </div>\r\n\r\n              <!-- Hide Helper Text -->\r\n              <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\n                <cide-ele-input\r\n                  id=\"sype_hide_helper_and_error_text\"\r\n                  type=\"checkbox\"\r\n                  formControlName=\"sype_hide_helper_and_error_text\"\r\n                  label=\"Hide Helper Text\"\r\n                  size=\"xs\">\r\n                </cide-ele-input>\r\n              </div>\r\n\r\n              <!-- Helper Text Collapse -->\r\n              <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\n                <cide-ele-input\r\n                  id=\"sype_helper_text_collapse\"\r\n                  type=\"checkbox\"\r\n                  formControlName=\"sype_helper_text_collapse\"\r\n                  label=\"Collapse Helper\"\r\n                  size=\"xs\">\r\n                </cide-ele-input>\r\n              </div>\r\n\r\n            </div>\r\n          </div>\r\n\r\n        </div>\r\n\r\n        <!-- Form Actions -->\r\n        <div class=\"tw-flex tw-justify-between tw-items-center tw-pt-4 tw-border-t tw-border-gray-200 tw-mt-auto\">\r\n          <!-- Error Message (Left Side) -->\r\n          <cide-form-field-error [formGroup]=\"controlForm\"></cide-form-field-error>\r\n          \r\n          <!-- Action Buttons (Right Side) -->\r\n          <div class=\"tw-flex tw-gap-3\">\r\n            <button \r\n              cideEleButton\r\n              type=\"button\"\r\n              variant=\"outline\"\r\n              (click)=\"cancelForm()\"\r\n              [disabled]=\"loading()\">\r\n              Cancel\r\n            </button>\r\n            <button \r\n              cideEleButton\r\n              type=\"submit\"\r\n              variant=\"primary\"\r\n              [disabled]=\"loading()\">\r\n              {{ isEditMode() ? 'Update Control' : 'Create Control' }}\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </form>\r\n    </div>\r\n\r\n    <!-- Controls List Section -->\r\n    <div class=\"tw-w-full lg:tw-w-2/5 tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-flex tw-flex-col lg:tw-max-h-none tw-max-h-96\">\r\n      <div class=\"tw-p-6 tw-border-b tw-border-gray-200\">\r\n        <h3 class=\"tw-text-lg tw-font-medium tw-text-gray-900 tw-mb-1\">Page Controls</h3>\r\n        <p class=\"tw-text-sm tw-text-gray-500 tw-mb-0\">Controls connected to this page</p>\r\n      </div>\r\n      \r\n      <div class=\"tw-flex-1 tw-overflow-y-auto tw-p-4\" *ngIf=\"!loading() && controls().length > 0\">\r\n        <div \r\n          class=\"tw-bg-gray-50 tw-border tw-border-gray-200 tw-rounded-lg tw-p-4 tw-mb-3 tw-cursor-pointer tw-transition-all tw-duration-200 hover:tw-shadow-md hover:tw-border-gray-300 focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-blue-500 focus:tw-ring-offset-2\" \r\n          *ngFor=\"let control of controls(); trackBy: trackByControlId\"\r\n          [class.tw-bg-blue-50]=\"selectedControlId() === control._id\"\r\n          [class.tw-border-blue-300]=\"selectedControlId() === control._id\"\r\n          [class.tw-shadow-md]=\"selectedControlId() === control._id\"\r\n          (click)=\"selectControl(control)\"\r\n          (keyup.enter)=\"selectControl(control)\"\r\n          (keyup.space)=\"selectControl(control)\"\r\n          tabindex=\"0\"\r\n          role=\"button\"\r\n          [attr.aria-label]=\"'Select control ' + (control.sype_label || control.sype_key)\">\r\n          <div class=\"tw-flex tw-items-start tw-space-x-3\">\r\n            <div class=\"tw-flex-shrink-0 tw-w-10 tw-h-10 tw-bg-blue-100 tw-rounded-lg tw-flex tw-items-center tw-justify-center\">\r\n              <cide-ele-icon class=\"tw-text-blue-600\">settings_input_component</cide-ele-icon>\r\n            </div>\r\n            <div class=\"tw-flex-1 tw-min-w-0\">\r\n              <h4 class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-mb-1 tw-truncate\">{{ control.sype_label || control.sype_key }}</h4>\r\n              <p class=\"tw-text-xs tw-text-gray-500 tw-mb-2 tw-truncate\">{{ control.sype_tooltip || 'No tooltip' }}</p>\r\n              <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\n                <span class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-gray-100 tw-text-gray-800\">{{ control.sype_type }}</span>\r\n                <span class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium\" \r\n                      [class.tw-bg-red-100]=\"!control.sype_isactive\"\r\n                      [class.tw-text-red-800]=\"!control.sype_isactive\"\r\n                      [class.tw-bg-green-100]=\"control.sype_isactive\"\r\n                      [class.tw-text-green-800]=\"control.sype_isactive\">\r\n                  {{ control.sype_isactive ? 'Active' : 'Inactive' }}\r\n                </span>\r\n              </div>\r\n            </div>\r\n            <div class=\"tw-flex tw-items-center tw-space-x-1 tw-opacity-0 tw-transition-opacity tw-duration-200 group-hover:tw-opacity-100\" \r\n                 [class.tw-opacity-100]=\"selectedControlId() === control._id\">\r\n              <button \r\n                cideEleButton\r\n                variant=\"ghost\"\r\n                size=\"sm\"\r\n                (click)=\"editControl(control); $event.stopPropagation()\">\r\n                <cide-ele-icon>edit</cide-ele-icon>\r\n              </button>\r\n              <button \r\n                cideEleButton\r\n                variant=\"ghost\"\r\n                size=\"sm\"\r\n                (click)=\"deleteControl(control); $event.stopPropagation()\">\r\n                <cide-ele-icon>delete</cide-ele-icon>\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"tw-flex tw-flex-col tw-items-center tw-justify-center tw-py-12 tw-text-center\" *ngIf=\"!loading() && controls().length === 0\">\r\n        <cide-ele-icon class=\"tw-text-4xl tw-text-gray-300 tw-mb-4\">settings_input_component</cide-ele-icon>\r\n        <p class=\"tw-text-gray-500 tw-font-medium tw-mb-1\">No controls available</p>\r\n        <small class=\"tw-text-gray-400\">Create controls using the form on the left</small>\r\n      </div>\r\n\r\n      <div class=\"tw-flex tw-flex-col tw-items-center tw-justify-center tw-py-12 tw-text-center\" *ngIf=\"loading()\">\r\n        <cide-ele-icon class=\"tw-text-2xl tw-text-blue-500 tw-mb-4 tw-animate-spin\">refresh</cide-ele-icon>\r\n        <p class=\"tw-text-gray-500\">Loading controls...</p>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n ", styles: [".checkbox-field{margin:.25rem 0}.checkbox-label{display:flex;flex-direction:column;gap:.25rem;cursor:pointer;padding:.75rem 0;background:transparent;border:none;border-radius:0;transition:all .2s ease}.checkbox-label:hover{background:#667eea05}.checkbox-label .checkbox-input{width:1rem;height:1rem;accent-color:#667eea;border-radius:3px;margin-bottom:.125rem}.checkbox-label .checkbox-text{font-weight:600;color:#374151;font-size:.875rem}.checkbox-label .checkbox-description{font-size:.75rem;color:#6b7280;margin-top:.125rem}@media (max-width: 640px){.main-content{padding:1rem;gap:1rem}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideInputComponent, selector: "cide-ele-input", inputs: ["fill", "label", "labelHide", "disabled", "clearInput", "labelPlacement", "labelDir", "placeholder", "leadingIcon", "trailingIcon", "helperText", "helperTextCollapse", "hideHelperAndErrorText", "errorText", "maxlength", "minlength", "required", "autocapitalize", "autocomplete", "type", "width", "id", "ngModel", "option", "min", "max", "step", "size"], outputs: ["ngModelChange"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput", "options", "multiple", "searchable", "showSearchInput", "loading", "valueKey", "labelKey", "treeView"], outputs: ["ngModelChange", "change", "searchChange"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideFormFieldErrorComponent, selector: "cide-form-field-error", inputs: ["control", "formGroup", "fieldName", "customMessages"] }] });
+    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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCorePageControlsComponent, decorators: [{
             type: Component,
@@ -8142,6 +8262,7 @@ class CideCoreGeneralMasterTypeComponent {
     router = inject(Router);
     confirmationService = inject(ConfirmationService);
     notificationService = inject(NotificationService);
+    rightsService = inject(RightsService);
     // Modern ViewChild signals for template renderers (Angular 20 approach)
     typeDetailsRendererTemplate = viewChild.required('typeDetailsRendererTemplate');
     typeStatusRendererTemplate = viewChild.required('typeStatusRendererTemplate');
@@ -8478,6 +8599,10 @@ class CideCoreGeneralMasterTypeComponent {
      * Delete type
      */
     deleteType(type) {
+        if (!this.rightsService.hasRight('DELETE')) {
+            this.error.set('You do not have permission to delete general master types');
+            return;
+        }
         this.confirmationService.confirmDelete(type.sygmt_title)
             .then((confirmed) => {
             if (confirmed) {
@@ -8553,6 +8678,11 @@ class CideCoreGeneralMasterTypeComponent {
      * Save type (create or update)
      */
     saveType() {
+        const requiredRight = this.isEditMode() ? 'EDIT' : 'CREATE';
+        if (!this.rightsService.hasRight(requiredRight)) {
+            this.error.set(`You do not have permission to ${this.isEditMode() ? 'edit' : 'create'} general master types`);
+            return;
+        }
         console.log('🔵 saveType called');
         console.log('🔵 isEditMode:', this.isEditMode());
         console.log('🔵 editingTypeId:', this.editingTypeId());
@@ -8766,6 +8896,7 @@ class CideCoreGeneralMasterComponent {
     router = inject(Router);
     route = inject(ActivatedRoute);
     appState = inject(AppStateHelperService);
+    rightsService = inject(RightsService);
     // Modern ViewChild signals for template renderers (Angular 20 approach)
     masterDetailsRendererTemplate = viewChild.required('masterDetailsRendererTemplate');
     masterStatusRendererTemplate = viewChild.required('masterStatusRendererTemplate');
@@ -9289,6 +9420,10 @@ class CideCoreGeneralMasterComponent {
      * Delete master
      */
     deleteMaster(master) {
+        if (!this.rightsService.hasRight('DELETE')) {
+            this.error.set('You do not have permission to delete general masters');
+            return;
+        }
         if (confirm(`Are you sure you want to delete the master "${master.sygms_title}"?`)) {
             this.loading.set(true);
             this.masterService.deleteMaster(master._id || "")
@@ -9317,6 +9452,10 @@ class CideCoreGeneralMasterComponent {
      * Toggle master status
      */
     toggleMasterStatus(master) {
+        if (!this.rightsService.hasRight('TOGGLE_STATUS')) {
+            this.error.set('You do not have permission to toggle general master status');
+            return;
+        }
         this.loading.set(true);
         this.masterService.toggleMasterStatus(master._id || "")
             .pipe(takeUntilDestroyed(this.destroyRef))
@@ -9369,6 +9508,11 @@ class CideCoreGeneralMasterComponent {
      * Save master (create or update)
      */
     saveMaster() {
+        const requiredRight = this.isEditMode() ? 'EDIT' : 'CREATE';
+        if (!this.rightsService.hasRight(requiredRight)) {
+            this.error.set(`You do not have permission to ${this.isEditMode() ? 'edit' : 'create'} general masters`);
+            return;
+        }
         if (this.isEditMode()) {
             this.updateMaster();
         }
@@ -9858,6 +10002,7 @@ class CideCoreEntityCreateComponent {
     router = inject(Router);
     fileManagerService = inject(CideEleFileManagerService);
     sharedObjectIdService = inject(SharedObjectIdService);
+    rightsService = inject(RightsService);
     destroy$ = new Subject();
     globalErrorHandler;
     globalRejectionHandler;
@@ -9916,6 +10061,8 @@ class CideCoreEntityCreateComponent {
         });
     }
     ngOnInit() {
+        // Initialize rights for entity management
+        this.rightsService.initializeRights('core_entity_form');
         // Add global error handler to catch any unhandled errors
         const errorHandler = (event) => {
             console.error('💥 GLOBAL ERROR:', event.error);
@@ -10843,6 +10990,11 @@ class CideCoreEntityCreateComponent {
         }
     }
     onSubmit() {
+        const requiredRight = this.isEditMode() ? 'EDIT' : 'CREATE';
+        if (!this.rightsService.hasRight(requiredRight)) {
+            this.error.set(`You do not have permission to ${this.isEditMode() ? 'edit' : 'create'} entities`);
+            return;
+        }
         if (this.entityForm.valid) {
             this.loading.set(true);
             this.error.set(null);
@@ -11009,7 +11161,7 @@ class CideCoreEntityCreateComponent {
         this.router.navigate(['/control-panel/entity-list']);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCoreEntityCreateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideCoreEntityCreateComponent, isStandalone: true, selector: "cide-core-entity-create", viewQueries: [{ propertyName: "userCellRendererTemplate", first: true, predicate: ["userCell"], descendants: true, isSignal: true }, { propertyName: "actionsCellRendererTemplate", first: true, predicate: ["actionsCell"], descendants: true, isSignal: true }], ngImport: i0, template: "<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'core_entity_form' }\"\r\n  [breadcrumb_data]=\"breadcrumbData()\">\r\n  <!-- Modern Entity Create Form -->\r\n  <div class=\"tw-min-h-screen\">\r\n    <div class=\"tw-mx-auto\">\r\n\r\n      <form [formGroup]=\"entityForm\" [class.tw-opacity-60]=\"loading()\" [class.tw-pointer-events-none]=\"loading()\"\r\n        (ngSubmit)=\"onSubmit()\">\r\n\r\n        <!-- Breadcrumb is now rendered by shared wrapper; inline breadcrumb removed -->\r\n\r\n        <!-- Basic Information Section -->\r\n        <div class=\"tw-p-2 tw-pb-0\">\r\n          <div class=\"tw-space-y-6\">\r\n            <!-- Top Section: Image on Right, Form Fields on Left -->\r\n            <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-[1fr_200px] tw-gap-4\">\r\n              <!-- Left Side: Form Fields -->\r\n              <div class=\"tw-space-y-6\">\r\n                <!-- Institution Name, Entity Type & Active Status -->\r\n                <div\r\n                  class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-[1fr_250px_120px] tw-gap-4 tw-items-end\">\r\n                  <cide-ele-input id=\"syen_name\" type=\"text\" label=\"Institution Name\" formControlName=\"syen_name\"\r\n                    placeholder=\"Enter institution name\" size=\"sm\">\r\n                  </cide-ele-input>\r\n\r\n                  <cide-ele-select label=\"Entity Type\" labelPlacement=\"floating\" [options]=\"entityTypes()\"\r\n                    formControlName=\"syen_entity_type_sygms\" placeholder=\"Select institution type\" size=\"sm\">\r\n                  </cide-ele-select>\r\n\r\n                  <div class=\"tw-flex tw-items-center tw-justify-center tw-gap-1 tw-h-full\">\r\n                    <cide-ele-input type=\"checkbox\" formControlName=\"syen_isactive\" size=\"sm\" label=\"Is Active\">\r\n                    </cide-ele-input>\r\n                  </div>\r\n                </div>\r\n\r\n                <!-- UDISE, Affiliation & Institution Code -->\r\n                <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-3 tw-gap-4\">\r\n                  <cide-ele-input label=\"UDISE Number\" formControlName=\"syen_udise_no\" placeholder=\"Enter UDISE number\"\r\n                    size=\"sm\">\r\n                  </cide-ele-input>\r\n\r\n                  <cide-ele-input label=\"Affiliation Number\" formControlName=\"syen_affiliation_no\"\r\n                    placeholder=\"Enter affiliation number\" size=\"sm\">\r\n                  </cide-ele-input>\r\n\r\n                  <cide-ele-input label=\"Institution Code\" formControlName=\"syen_entity_code\"\r\n                    placeholder=\"Enter unique code\" size=\"sm\">\r\n                  </cide-ele-input>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- Right Side: Entity Image Upload -->\r\n              <div class=\"tw-flex tw-items-start tw-justify-center tw-pt-0\">\r\n                <cide-ele-file-input id=\"entity_image_upload\" formControlName=\"syen_photo_id_cyfm\" accept=\"image/*\"\r\n                  [showPreview]=\"true\" [previewBoxMode]=\"true\" [showFileName]=\"false\" previewWidth=\"180px\"\r\n                  previewHeight=\"120px\" [required]=\"true\" placeholderText=\"Upload Logo\" placeholderIcon=\"cloud_upload\"\r\n                  [autoUpload]=\"true\" [uploadData]=\"getUploadData()\" (uploadSuccess)=\"onImageUploadSuccess($event)\"\r\n                  (uploadError)=\"onImageUploadError($event)\" (uploadProgressChange)=\"onImageUploadProgress($event)\">\r\n                </cide-ele-file-input>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- Tab Navigation -->\r\n        <div class=\"tw-px-4 !tw-mt-0\">\r\n          <cide-ele-tab [tabs]=\"entityTabs()\" [activeTabId]=\"activeTab()\" size=\"sm\" variant=\"default\"\r\n            (tabChange)=\"onTabChange($event)\">\r\n          </cide-ele-tab>\r\n        </div>\r\n\r\n        <!-- Tab Content -->\r\n        <div class=\"tw-transition-all tw-duration-300 tw-ease-in-out !tw-mt-2\" [class.tw-opacity-60]=\"loading()\"\r\n          [class.tw-pointer-events-none]=\"loading()\">\r\n          @switch (activeTab()) {\r\n\r\n          @case ('corporate') {\r\n          <div class=\"tw-p-4\">\r\n            <div class=\"tw-space-y-6\">\r\n              <!-- Corporate Address - Full Width -->\r\n              <div class=\"tw-w-full\">\r\n                <cide-ele-textarea label=\"Corporate Address\" formControlName=\"syen_corporate_address\"\r\n                  placeholder=\"Enter complete corporate address\" [rows]=\"4\">\r\n                </cide-ele-textarea>\r\n              </div>\r\n\r\n              <!-- Postal Code, City, State & Country - Four Columns -->\r\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-[220px_0.8fr_0.7fr_240px] tw-gap-6\">\r\n                <cide-ele-select label=\"Postal Code\" [options]=\"postalCodes()\"\r\n                  formControlName=\"syen_corporate_pin_sypin\" placeholder=\"Select postal code\" [searchable]=\"true\"\r\n                  [loading]=\"postalCodesLoading()\" (searchChange)=\"onPostalCodeSearch($event)\" size=\"sm\">\r\n                </cide-ele-select>\r\n\r\n                <cide-ele-input label=\"City\" formControlName=\"syen_corporate_city_sypin\" placeholder=\"Enter city name\">\r\n                </cide-ele-input>\r\n\r\n                <cide-ele-input label=\"State\" formControlName=\"syen_corporate_state_sypin\"\r\n                  placeholder=\"Enter state name\">\r\n                </cide-ele-input>\r\n\r\n                <cide-ele-select label=\"Country\" [options]=\"corporateCountries()\"\r\n                  formControlName=\"syen_corporate_country_syctr\" placeholder=\"Select country\" [searchable]=\"true\"\r\n                  (searchChange)=\"onCorporateCountrySearch($event)\" [loading]=\"corporateCountriesLoading()\" size=\"sm\">\r\n                </cide-ele-select>\r\n              </div>\r\n\r\n              <!-- Contact Person, Phone, Email & Fax - Four Columns -->\r\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-[1fr_200px_1fr_150px] tw-gap-6\">\r\n                <cide-ele-select label=\"Contact Person\" [options]=\"users()\"\r\n                  formControlName=\"syen_corporate_contact_person_user\" placeholder=\"Select contact person\"\r\n                  [searchable]=\"true\" [loading]=\"usersLoading()\" (searchChange)=\"onUserSearch($event)\">\r\n                </cide-ele-select>\r\n\r\n                <cide-ele-input label=\"Phone\" formControlName=\"syen_corporate_phone\" type=\"tel\"\r\n                  placeholder=\"Enter phone number\" size=\"sm\">\r\n                </cide-ele-input>\r\n\r\n                <cide-ele-input label=\"Email\" formControlName=\"syen_corporate_email\" type=\"email\"\r\n                  placeholder=\"Enter email address\">\r\n                </cide-ele-input>\r\n\r\n                <cide-ele-input label=\"Fax\" formControlName=\"syen_corporate_fax\" placeholder=\"Enter fax number\"\r\n                  size=\"sm\">\r\n                </cide-ele-input>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          }\r\n\r\n          @case ('contact') {\r\n          <div class=\"tw-p-4\">\r\n            <div class=\"tw-space-y-6\">\r\n              <!-- Currency Selection -->\r\n              <div class=\"tw-w-full\">\r\n                <cide-ele-select label=\"Currency\" [options]=\"currencies()\" formControlName=\"syen_currency_sycr\"\r\n                  placeholder=\"Select currency\">\r\n                </cide-ele-select>\r\n              </div>\r\n\r\n              <!-- Alternate Phone & Website - Two Columns -->\r\n              <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-2 tw-gap-6\">\r\n                <cide-ele-input label=\"Alternate Phone\" formControlName=\"syen_corporate_phone_alt\" type=\"tel\"\r\n                  placeholder=\"Enter alternate phone number\">\r\n                </cide-ele-input>\r\n\r\n                <cide-ele-input label=\"Website URL\" formControlName=\"syen_website\" type=\"url\"\r\n                  placeholder=\"https://example.com\" autocomplete=\"url\" leadingIcon=\"language\"\r\n                  helperText=\"Enter a valid website URL starting with http:// or https://\">\r\n                </cide-ele-input>\r\n              </div>\r\n\r\n              <!-- Alternate Email - Full Width -->\r\n              <div class=\"tw-w-full\">\r\n                <cide-ele-input label=\"Alternate Email\" formControlName=\"syen_corporate_email_alt\" type=\"email\"\r\n                  placeholder=\"Enter alternate email address\">\r\n                </cide-ele-input>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          }\r\n\r\n          @case ('registered') {\r\n          <div class=\"tw-p-4\">\r\n            <div class=\"tw-space-y-6\">\r\n              <!-- Registered Address - Full Width -->\r\n              <div class=\"tw-w-full\">\r\n                <cide-ele-textarea label=\"Registered Address\" formControlName=\"syen_registered_address\"\r\n                  placeholder=\"Enter complete registered address\" [rows]=\"4\">\r\n                </cide-ele-textarea>\r\n              </div>\r\n\r\n              <!-- Postal Code, City, State & Country - Four Columns -->\r\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-[220px_0.8fr_0.7fr_240px] tw-gap-6\">\r\n                <cide-ele-select label=\"Postal Code\" [options]=\"postalCodes()\"\r\n                  formControlName=\"syen_registered_pin_sypin\" placeholder=\"Select postal code\" [searchable]=\"true\"\r\n                  [loading]=\"postalCodesLoading()\" (searchChange)=\"onPostalCodeSearch($event)\" size=\"sm\">\r\n                </cide-ele-select>\r\n\r\n                <cide-ele-input label=\"City\" formControlName=\"syen_registered_city_sypin\" placeholder=\"Enter city name\">\r\n                </cide-ele-input>\r\n\r\n                <cide-ele-input label=\"State\" formControlName=\"syen_registered_state_sypin\"\r\n                  placeholder=\"Enter state name\">\r\n                </cide-ele-input>\r\n\r\n                <cide-ele-select label=\"Country\" [options]=\"registeredCountries()\"\r\n                  formControlName=\"syen_registered_country_syctr\" placeholder=\"Select country\" [searchable]=\"true\"\r\n                  (searchChange)=\"onRegisteredCountrySearch($event)\" [loading]=\"registeredCountriesLoading()\" size=\"sm\">\r\n                </cide-ele-select>\r\n              </div>\r\n\r\n              <!-- Contact Person, Phone, Email & Fax - Four Columns -->\r\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-[1fr_200px_1fr_150px] tw-gap-6\">\r\n                <cide-ele-select label=\"Contact Person\" [options]=\"users()\"\r\n                  formControlName=\"syen_registered_contact_person_user\" placeholder=\"Select contact person\"\r\n                  [searchable]=\"true\" [loading]=\"usersLoading()\" (searchChange)=\"onUserSearch($event)\">\r\n                </cide-ele-select>\r\n\r\n                <cide-ele-input label=\"Phone\" formControlName=\"syen_registered_phone\" type=\"tel\"\r\n                  placeholder=\"Enter phone number\" size=\"sm\">\r\n                </cide-ele-input>\r\n\r\n                <cide-ele-input label=\"Email\" formControlName=\"syen_registered_email\" type=\"email\"\r\n                  placeholder=\"Enter email address\">\r\n                </cide-ele-input>\r\n\r\n                <cide-ele-input label=\"Fax\" formControlName=\"syen_registered_fax\" placeholder=\"Enter fax number\"\r\n                  size=\"sm\">\r\n                </cide-ele-input>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          }\r\n\r\n          @case ('user-mapping') {\r\n          <div class=\"tw-p-2\">\r\n            <div class=\"tw-space-y-4\">\r\n              <!-- Add User Mapping Form -->\r\n              <div class=\"tw-bg-white tw-p-4 tw-rounded-lg tw-border tw-shadow-sm\">\r\n                <div class=\"tw-flex tw-items-center tw-gap-2 tw-mb-3\">\r\n                  <cide-ele-icon class=\"tw-text-blue-600 tw-text-sm\">person_add</cide-ele-icon>\r\n                  <h3 class=\"tw-text-sm tw-font-semibold tw-text-gray-800\">Add User to Entity</h3>\r\n                </div>\r\n\r\n                <form [formGroup]=\"userMappingForm\" (ngSubmit)=\"addUserMapping()\">\r\n                  <div class=\"tw-flex tw-items-end tw-gap-3\">\r\n                    <div class=\"tw-flex-1\">\r\n                      <cide-ele-select label=\"Select User\" [options]=\"availableUsers()\" formControlName=\"syenm_id_user\"\r\n                        placeholder=\"Choose user to add to entity\" [searchable]=\"true\"\r\n                        [loading]=\"availableUsersLoading()\" size=\"md\">\r\n                      </cide-ele-select>\r\n                    </div>\r\n\r\n                    <!-- Add Button -->\r\n                    <div class=\"tw-flex tw-items-end\">\r\n                      <button cideEleButton type=\"submit\" variant=\"primary\" size=\"sm\"\r\n                        [disabled]=\"userMappingForm.invalid || availableUsersLoading()\"\r\n                        class=\"tw-shadow-sm tw-h-8 tw-px-3\">\r\n                        <cide-ele-icon class=\"tw-mr-1 tw-text-xs\">add</cide-ele-icon>\r\n                        <span class=\"tw-text-xs\">Add</span>\r\n                      </button>\r\n                    </div>\r\n                  </div>\r\n                </form>\r\n              </div>\r\n\r\n              <!-- User Mappings Grid -->\r\n              <div class=\"tw-bg-white tw-rounded-md tw-border tw-overflow-hidden tw-shadow-sm\">\r\n                @if (userEntityMappingsLoading()) {\r\n                <div class=\"tw-p-4 tw-text-center\">\r\n                  <div class=\"tw-inline-flex tw-items-center tw-gap-2 tw-text-gray-500\">\r\n                    <div class=\"tw-animate-spin tw-rounded-full tw-h-3 tw-w-3 tw-border-b-2 tw-border-gray-500\"></div>\r\n                    <span class=\"tw-text-xs\">Loading...</span>\r\n                  </div>\r\n                </div>\r\n                } @else if (userEntityMappings().length === 0) {\r\n                <div class=\"tw-p-4 tw-text-center tw-text-gray-500\">\r\n                  <cide-ele-icon class=\"tw-text-2xl tw-mb-1 tw-text-gray-300\">people_outline</cide-ele-icon>\r\n                  <p class=\"tw-text-sm tw-font-medium tw-mb-1\">No users mapped yet</p>\r\n                  <p class=\"tw-text-xs tw-text-gray-400\">Add users above to grant them access to this entity</p>\r\n                </div>\r\n                } @else {\r\n                <cide-ele-data-grid [config]=\"userMappingsGridConfig\" [templateRenderers]=\"getUserMappingsTemplateRenderers()\">\r\n\r\n                  <!-- Custom user cell template -->\r\n                  <ng-template #userCell let-row=\"row\">\r\n                    <div class=\"tw-flex tw-items-center tw-gap-2\">\r\n                      <div\r\n                        class=\"tw-w-6 tw-h-6 tw-bg-gradient-to-br tw-from-blue-100 tw-to-indigo-100 tw-rounded-full tw-flex tw-items-center tw-justify-center tw-shadow-sm\">\r\n                        <cide-ele-icon class=\"tw-text-blue-600 tw-text-xs\">person</cide-ele-icon>\r\n                      </div>\r\n                      <div class=\"tw-flex tw-flex-col\">\r\n                        <span class=\"tw-font-medium tw-text-gray-900 tw-text-xs\">\r\n                          {{ row?._displayUserName }}\r\n                        </span>\r\n                      </div>\r\n                    </div>\r\n                  </ng-template>\r\n\r\n                  <!-- Custom actions cell template -->\r\n                  <ng-template #actionsCell let-row=\"row\">\r\n                    <div class=\"tw-flex tw-items-center tw-gap-1 tw-justify-center\">\r\n                      <button\r\n                        (click)=\"updateUserMapping(row._id!, { syenm_isactive: !row.syenm_isactive })\"\r\n                        class=\"tw-w-8 tw-h-8 tw-flex tw-items-center tw-justify-center tw-rounded-md tw-transition-colors tw-border tw-border-transparent hover:tw-border-gray-300\"\r\n                        [class.tw-bg-green-100]=\"row.syenm_isactive\"\r\n                        [class.tw-text-green-700]=\"row.syenm_isactive\"\r\n                        [class.tw-bg-gray-100]=\"!row.syenm_isactive\"\r\n                        [class.tw-text-gray-600]=\"!row.syenm_isactive\"\r\n                        [title]=\"row.syenm_isactive ? 'Deactivate' : 'Activate'\">\r\n                        <cide-ele-icon class=\"tw-text-sm\">\r\n                          {{ row.syenm_isactive ? 'pause' : 'play_arrow' }}\r\n                        </cide-ele-icon>\r\n                      </button>\r\n\r\n                      <button (click)=\"removeUserMapping(row._id!)\"\r\n                        class=\"tw-w-8 tw-h-8 tw-flex tw-items-center tw-justify-center tw-rounded-md tw-bg-red-100 tw-text-red-600 hover:tw-bg-red-200 tw-transition-colors tw-border tw-border-transparent hover:tw-border-red-300\"\r\n                        title=\"Remove User\">\r\n                        <cide-ele-icon class=\"tw-text-sm\">delete</cide-ele-icon>\r\n                      </button>\r\n                    </div>\r\n                  </ng-template>\r\n                </cide-ele-data-grid>\r\n                }\r\n              </div>\r\n            </div>\r\n          </div>\r\n          }\r\n\r\n          }\r\n\r\n          <!-- Form Actions -->\r\n          <div class=\"tw-p-4\">\r\n            <div class=\"tw-flex tw-items-center tw-justify-between tw-gap-3\">\r\n              <!-- Error Message (Left Side) -->\r\n              <cide-form-field-error [formGroup]=\"entityForm\"></cide-form-field-error>\r\n\r\n              <!-- Action Buttons (Right Side) -->\r\n              <div class=\"tw-flex tw-gap-3\">\r\n                <button cideEleButton type=\"button\" variant=\"outline\" size=\"md\" (click)=\"onBack()\"\r\n                  [disabled]=\"loading()\">\r\n                  <cide-ele-icon>arrow_back</cide-ele-icon>\r\n                  Back\r\n                </button>\r\n\r\n                <button cideEleButton type=\"button\" variant=\"secondary\" size=\"md\" (click)=\"onReset()\"\r\n                  [disabled]=\"loading()\">\r\n                  <cide-ele-icon>refresh</cide-ele-icon>\r\n                  Reset Form\r\n                </button>\r\n\r\n                <button cideEleButton type=\"submit\" variant=\"primary\" size=\"md\"\r\n                  [disabled]=\"loading() || entityForm.invalid\" [loading]=\"loading()\">\r\n                  <cide-ele-icon>{{ isEditMode() ? 'save' : 'add' }}</cide-ele-icon>\r\n                  {{ isEditMode() ? 'Update Entity' : 'Create Entity' }}\r\n                </button>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </form>\r\n    </div>\r\n  </div>\r\n</cide-lyt-shared-wrapper>", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: CideLytSharedWrapperComponent, selector: "cide-lyt-shared-wrapper", inputs: ["shared_wrapper_setup_param", "breadcrumb_data"] }, { kind: "component", type: CideInputComponent, selector: "cide-ele-input", inputs: ["fill", "label", "labelHide", "disabled", "clearInput", "labelPlacement", "labelDir", "placeholder", "leadingIcon", "trailingIcon", "helperText", "helperTextCollapse", "hideHelperAndErrorText", "errorText", "maxlength", "minlength", "required", "autocapitalize", "autocomplete", "type", "width", "id", "ngModel", "option", "min", "max", "step", "size"], outputs: ["ngModelChange"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput", "options", "multiple", "searchable", "showSearchInput", "loading", "valueKey", "labelKey", "treeView"], outputs: ["ngModelChange", "change", "searchChange"] }, { kind: "component", type: CideTextareaComponent, selector: "cide-ele-textarea", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "minlength", "maxlength", "rows", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput"], outputs: ["ngModelChange"] }, { kind: "component", type: CideEleFileInputComponent, selector: "cide-ele-file-input", inputs: ["label", "accept", "multiple", "disabled", "required", "helperText", "errorText", "showPreview", "previewWidth", "previewHeight", "previewBoxMode", "showFileName", "placeholderText", "placeholderIcon", "autoUpload", "uploadData", "showFloatingUploader", "floatingUploaderGroupId"], outputs: ["fileChange", "uploadSuccess", "uploadError", "uploadProgressChange"] }, { kind: "component", type: CideEleTabComponent, selector: "cide-ele-tab", inputs: ["tabs", "activeTabId", "size", "variant", "fullWidth", "disabled"], outputs: ["tabChange"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideFormFieldErrorComponent, selector: "cide-form-field-error", inputs: ["control", "formGroup", "fieldName", "customMessages"] }, { kind: "component", type: CideEleDataGridComponent, selector: "cide-ele-data-grid", inputs: ["config", "templateRenderers", "customFormatters", "actionHandlers", "serverSidePagination", "totalServerItems", "currentServerPage", "currentServerPageSize", "dragDropEnabled"], outputs: ["gridEvent"] }] });
+    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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCoreEntityCreateComponent, decorators: [{
             type: Component,
@@ -11037,6 +11189,7 @@ class CideCoreEntityListComponent {
     // Modern dependency injection using inject()
     router = inject(Router); // Made public for template access
     entityService = inject(CideCoreEntityManagementService);
+    rightsService = inject(RightsService);
     // ViewChild reference to the grid component using modern signal approach
     gridComponent = viewChild(CideEleDataGridComponent, ...(ngDevMode ? [{ debugName: "gridComponent" }] : []));
     // Template references using modern viewChild signal approach with proper typing
@@ -11073,6 +11226,11 @@ class CideCoreEntityListComponent {
         { 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" }] : []));
+    canDelete = computed(() => this.rightsService.hasRight('DELETE'), ...(ngDevMode ? [{ debugName: "canDelete" }] : []));
+    canView = computed(() => this.rightsService.hasRight('VIEW'), ...(ngDevMode ? [{ debugName: "canView" }] : []));
     // Grid configuration signal
     gridConfig = signal({
         id: 'entity-list-grid',
@@ -11246,12 +11404,20 @@ class CideCoreEntityListComponent {
         }
     }
     editEntity(entity) {
+        if (!this.rightsService.hasRight('EDIT')) {
+            this.error.set('You do not have permission to edit entities');
+            return;
+        }
         const query = generateStringFromObject({
             syen_id: entity._id
         });
         this.router.navigate(['control-panel', 'entity-create', query]);
     }
     addChildEntity(entity) {
+        if (!this.rightsService.hasRight('CREATE')) {
+            this.error.set('You do not have permission to create entities');
+            return;
+        }
         console.log('Adding child entity for:', entity.syen_name);
         // Navigate to entity create form with parent entity ID
         const query = generateStringFromObject({
@@ -11260,6 +11426,10 @@ class CideCoreEntityListComponent {
         this.router.navigate(['control-panel', 'entity-create', query]);
     }
     toggleEntityStatus(entity) {
+        if (!this.rightsService.hasRight('EDIT')) {
+            this.error.set('You do not have permission to change entity status');
+            return;
+        }
         console.log('Toggling entity status for:', entity.syen_name);
         const action = entity.syen_isactive ? 'deactivate' : 'activate';
         const entityName = entity.syen_name || 'this entity';
@@ -11271,6 +11441,10 @@ class CideCoreEntityListComponent {
         }
     }
     deleteEntity(entity) {
+        if (!this.rightsService.hasRight('DELETE')) {
+            this.error.set('You do not have permission to delete entities');
+            return;
+        }
         const entityName = entity.syen_name || 'this entity';
         if (confirm(`Are you sure you want to delete ${entityName}?`)) {
             this.onDeleteEntityConfirmed(entity._id || '');
@@ -11280,6 +11454,8 @@ class CideCoreEntityListComponent {
     actionHandlers = {};
     ngOnInit() {
         console.log('🔧 ENTITY LIST: Component initializing');
+        // Initialize rights for entity management
+        this.rightsService.initializeRights('admin_entity_list');
         this.updatePaginationState();
         // Set initial loading state to false to allow grid to render
         this.loading.set(false);
@@ -11458,9 +11634,17 @@ class CideCoreEntityListComponent {
     }
     onAddEntity() {
         // Navigate to entity create form
+        if (!this.rightsService.hasRight('CREATE')) {
+            this.error.set('You do not have permission to create entities');
+            return;
+        }
         this.router.navigate(['/control-panel/entity-create']);
     }
     onEditEntity(entity) {
+        if (!this.rightsService.hasRight('EDIT')) {
+            this.error.set('You do not have permission to edit entities');
+            return;
+        }
         // TODO: Implement edit functionality - navigate to edit form with entity ID
         this.router.navigate(['/control-panel/entity-create'], {
             queryParams: { id: entity._id, mode: 'edit' }
@@ -11608,7 +11792,7 @@ class CideCoreEntityListComponent {
         this.router.navigate(['/control-panel/org-structure']);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCoreEntityListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideCoreEntityListComponent, isStandalone: true, selector: "cide-core-entity-list", viewQueries: [{ propertyName: "gridComponent", first: true, predicate: CideEleDataGridComponent, descendants: true, isSignal: true }, { propertyName: "entityDetailsRenderer", first: true, predicate: ["entityDetailsRenderer"], descendants: true, isSignal: true }, { propertyName: "entityTypeRenderer", first: true, predicate: ["entityTypeRenderer"], descendants: true, isSignal: true }, { propertyName: "actionsDropdownRenderer", first: true, predicate: ["actionsDropdownRenderer"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Entity List Container -->\n<div class=\"entity-list-container tw-bg-white tw-shadow-lg tw-rounded-lg tw-overflow-hidden\">\n  \n  <!-- Header Section with Filters -->\n  <div class=\"tw-px-6 tw-py-4 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\n    <div class=\"tw-flex tw-flex-col sm:tw-flex-row tw-justify-between tw-items-start sm:tw-items-center tw-space-y-4 sm:tw-space-y-0\">\n      \n      <!-- Title -->\n      <div class=\"tw-flex tw-items-center tw-space-x-3\">\n        <cide-ele-icon class=\"tw-text-blue-600\">apartment</cide-ele-icon>\n        <div>\n          <h5 class=\"tw-text-sm tw-font-semibold tw-text-gray-900\">Entity Management</h5>\n        </div>\n      </div>\n\n      <!-- Actions -->\n      <div class=\"tw-flex tw-items-center tw-space-x-3\">\n        <!-- Entity Type Filter -->\n        <div class=\"tw-flex tw-items-center tw-space-x-2\">\n          <label for=\"entityTypeFilter\" class=\"tw-text-sm tw-font-medium tw-text-gray-700\">Type:</label>\n          <cide-ele-select\n            id=\"entityTypeFilter\"\n            [options]=\"entityTypeOptions()\"\n            [ngModel]=\"selectedEntityTypeValue\"\n            (ngModelChange)=\"onEntityTypeChange($event)\"\n            class=\"tw-min-w-40\">\n          </cide-ele-select>\n        </div>\n\n        <!-- Org Structure Button -->\n        <button\n          cideEleButton\n          variant=\"secondary\"\n          size=\"sm\"\n          (click)=\"onOrgStructure()\"\n          class=\"tw-whitespace-nowrap tw-flex tw-items-center tw-gap-2\">\n          <cide-ele-icon size=\"xs\" class=\"tw-w-6 tw-h-5\">account_tree</cide-ele-icon>\n          Org Structure\n        </button>\n\n        <!-- Add Entity Button -->\n        <button\n          cideEleButton\n          variant=\"primary\"\n          size=\"sm\"\n          (click)=\"router.navigate(['control-panel', 'entity-create'])\"\n          class=\"tw-whitespace-nowrap tw-flex tw-items-center tw-gap-2\">\n          <cide-ele-icon size=\"xs\" class=\"tw-w-6 tw-h-5\">add</cide-ele-icon>\n          Add Entity\n        </button>\n      </div>\n    </div>\n\n    <!-- Error Message -->\n    @if (error()) {\n      <div class=\"tw-mt-4 tw-p-4 tw-bg-red-50 tw-border tw-border-red-200 tw-rounded-md\">\n        <div class=\"tw-flex\">\n          <cide-ele-icon name=\"exclamation-triangle\" class=\"tw-text-red-400\"></cide-ele-icon>\n          <div class=\"tw-ml-3\">\n            <h3 class=\"tw-text-sm tw-font-medium tw-text-red-800\">Error</h3>\n            <p class=\"tw-text-sm tw-text-red-700 tw-mt-1\">{{ error() }}</p>\n          </div>\n        </div>\n      </div>\n    }\n  </div>\n\n  <!-- Data Grid Component -->\n  <cide-ele-data-grid\n    [config]=\"gridConfig()\"\n    [templateRenderers]=\"templateRenderers()\"\n    [actionHandlers]=\"actionHandlers\"\n    (gridEvent)=\"onGridEvent($event)\">\n  </cide-ele-data-grid>\n\n</div>\n\n<!-- Custom Renderer Templates -->\n\n<!-- Entity Details Renderer Template -->\n<!-- Context: { $implicit: unknown, row: entityResponseData, value: unknown, column: GridColumn } -->\n<ng-template #entityDetailsRenderer let-value=\"value\" let-entity=\"row\">\n  <div class=\"tw-flex tw-items-center tw-space-x-3\">\n    <div class=\"tw-flex-shrink-0 tw-w-10 tw-h-10 tw-bg-blue-100 tw-rounded-full tw-flex tw-items-center tw-justify-center\">\n      <span class=\"tw-text-blue-600 tw-font-semibold tw-text-sm\">\n        {{ (entity.syen_entity_code || 'NA').substring(0, 2).toUpperCase() }}\n      </span>\n    </div>\n    <div class=\"tw-flex-1 tw-min-w-0\">\n      <p class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-truncate\" [title]=\"entity.syen_name || 'Unknown Entity'\">\n        {{ entity.syen_name || 'Unknown Entity' }}\n      </p>\n      <p class=\"tw-text-sm tw-text-gray-500 tw-truncate\" [title]=\"entity.syen_entity_code || 'N/A'\">\n        Code: {{ entity.syen_entity_code || 'N/A' }}\n      </p>\n    </div>\n  </div>\n</ng-template>\n\n\n<!-- Entity Type Renderer Template -->\n<!-- Context: { $implicit: unknown, row: entityResponseData, value: unknown, column: GridColumn } -->\n<ng-template #entityTypeRenderer let-value=\"value\" let-entity=\"row\">\n  <div class=\"tw-flex tw-flex-col tw-items-center tw-space-y-1\">\n    <span class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-truncate\" [title]=\"getEntityTypeName(entity)\">\n      {{ getEntityTypeName(entity) }}\n    </span>\n  </div>\n</ng-template>\n\n<!-- Actions Dropdown Renderer Template -->\n<!-- Context: { $implicit: unknown, row: entityResponseData, value: unknown, column: GridColumn } -->\n<ng-template #actionsDropdownRenderer let-value=\"value\" let-entity=\"row\">\n  <cide-ele-dropdown \n    [items]=\"getDropdownItems(entity)\"\n    [config]=\"getDropdownConfig()\"\n    (itemClick)=\"onDropdownItemClick($event, entity)\">\n  </cide-ele-dropdown>\n</ng-template>\n\n", styles: ["", ":host{height:100%;display:flex;flex-direction:column}.entity-list-container{height:100%;display:flex;flex-direction:column;overflow:hidden}.tw-overflow-auto{flex:1;min-height:0}cide-ele-data-grid{flex:1;min-height:0;display:flex;flex-direction:column}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput", "options", "multiple", "searchable", "showSearchInput", "loading", "valueKey", "labelKey", "treeView"], outputs: ["ngModelChange", "change", "searchChange"] }, { kind: "component", type: CideEleDataGridComponent, selector: "cide-ele-data-grid", inputs: ["config", "templateRenderers", "customFormatters", "actionHandlers", "serverSidePagination", "totalServerItems", "currentServerPage", "currentServerPageSize", "dragDropEnabled"], outputs: ["gridEvent"] }, { kind: "component", type: CideEleDropdownComponent, selector: "cide-ele-dropdown", inputs: ["items", "config", "triggerTemplate", "menuTemplate"], outputs: ["itemClick", "dropdownToggle"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideCoreEntityListComponent, isStandalone: true, selector: "cide-core-entity-list", viewQueries: [{ propertyName: "gridComponent", first: true, predicate: CideEleDataGridComponent, descendants: true, isSignal: true }, { propertyName: "entityDetailsRenderer", first: true, predicate: ["entityDetailsRenderer"], descendants: true, isSignal: true }, { propertyName: "entityTypeRenderer", first: true, predicate: ["entityTypeRenderer"], descendants: true, isSignal: true }, { propertyName: "actionsDropdownRenderer", first: true, predicate: ["actionsDropdownRenderer"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Entity List Container -->\n<div class=\"entity-list-container tw-bg-white tw-shadow-lg tw-rounded-lg tw-overflow-hidden\">\n  \n  <!-- Header Section with Filters -->\n  <div class=\"tw-px-6 tw-py-4 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\n    <div class=\"tw-flex tw-flex-col sm:tw-flex-row tw-justify-between tw-items-start sm:tw-items-center tw-space-y-4 sm:tw-space-y-0\">\n      \n      <!-- Title -->\n      <div class=\"tw-flex tw-items-center tw-space-x-3\">\n        <cide-ele-icon class=\"tw-text-blue-600\">apartment</cide-ele-icon>\n        <div>\n          <h5 class=\"tw-text-sm tw-font-semibold tw-text-gray-900\">Entity Management</h5>\n        </div>\n      </div>\n\n      <!-- Actions -->\n      <div class=\"tw-flex tw-items-center tw-space-x-3\">\n        <!-- Entity Type Filter -->\n        <div class=\"tw-flex tw-items-center tw-space-x-2\">\n          <label for=\"entityTypeFilter\" class=\"tw-text-sm tw-font-medium tw-text-gray-700\">Type:</label>\n          <cide-ele-select\n            id=\"entityTypeFilter\"\n            [options]=\"entityTypeOptions()\"\n            [ngModel]=\"selectedEntityTypeValue\"\n            (ngModelChange)=\"onEntityTypeChange($event)\"\n            class=\"tw-min-w-40\">\n          </cide-ele-select>\n        </div>\n\n        <!-- Org Structure Button -->\n        <button\n          cideEleButton\n          variant=\"secondary\"\n          size=\"sm\"\n          (click)=\"onOrgStructure()\"\n          class=\"tw-whitespace-nowrap tw-flex tw-items-center tw-gap-2\">\n          <cide-ele-icon size=\"xs\" class=\"tw-w-6 tw-h-5\">account_tree</cide-ele-icon>\n          Org Structure\n        </button>\n\n        <!-- Add Entity Button -->\n        <button\n          cideEleButton\n          variant=\"primary\"\n          size=\"sm\"\n          (click)=\"router.navigate(['control-panel', 'entity-create'])\"\n          class=\"tw-whitespace-nowrap tw-flex tw-items-center tw-gap-2\">\n          <cide-ele-icon size=\"xs\" class=\"tw-w-6 tw-h-5\">add</cide-ele-icon>\n          Add Entity\n        </button>\n      </div>\n    </div>\n\n    <!-- Error Message -->\n    @if (error()) {\n      <div class=\"tw-mt-4 tw-p-4 tw-bg-red-50 tw-border tw-border-red-200 tw-rounded-md\">\n        <div class=\"tw-flex\">\n          <cide-ele-icon name=\"exclamation-triangle\" class=\"tw-text-red-400\"></cide-ele-icon>\n          <div class=\"tw-ml-3\">\n            <h3 class=\"tw-text-sm tw-font-medium tw-text-red-800\">Error</h3>\n            <p class=\"tw-text-sm tw-text-red-700 tw-mt-1\">{{ error() }}</p>\n          </div>\n        </div>\n      </div>\n    }\n  </div>\n\n  <!-- Data Grid Component -->\n  <cide-ele-data-grid\n    [config]=\"gridConfig()\"\n    [templateRenderers]=\"templateRenderers()\"\n    [actionHandlers]=\"actionHandlers\"\n    (gridEvent)=\"onGridEvent($event)\">\n  </cide-ele-data-grid>\n\n</div>\n\n<!-- Custom Renderer Templates -->\n\n<!-- Entity Details Renderer Template -->\n<!-- Context: { $implicit: unknown, row: entityResponseData, value: unknown, column: GridColumn } -->\n<ng-template #entityDetailsRenderer let-value=\"value\" let-entity=\"row\">\n  <div class=\"tw-flex tw-items-center tw-space-x-3\">\n    <div class=\"tw-flex-shrink-0 tw-w-10 tw-h-10 tw-bg-blue-100 tw-rounded-full tw-flex tw-items-center tw-justify-center\">\n      <span class=\"tw-text-blue-600 tw-font-semibold tw-text-sm\">\n        {{ (entity.syen_entity_code || 'NA').substring(0, 2).toUpperCase() }}\n      </span>\n    </div>\n    <div class=\"tw-flex-1 tw-min-w-0\">\n      <p class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-truncate\" [title]=\"entity.syen_name || 'Unknown Entity'\">\n        {{ entity.syen_name || 'Unknown Entity' }}\n      </p>\n      <p class=\"tw-text-sm tw-text-gray-500 tw-truncate\" [title]=\"entity.syen_entity_code || 'N/A'\">\n        Code: {{ entity.syen_entity_code || 'N/A' }}\n      </p>\n    </div>\n  </div>\n</ng-template>\n\n\n<!-- Entity Type Renderer Template -->\n<!-- Context: { $implicit: unknown, row: entityResponseData, value: unknown, column: GridColumn } -->\n<ng-template #entityTypeRenderer let-value=\"value\" let-entity=\"row\">\n  <div class=\"tw-flex tw-flex-col tw-items-center tw-space-y-1\">\n    <span class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-truncate\" [title]=\"getEntityTypeName(entity)\">\n      {{ getEntityTypeName(entity) }}\n    </span>\n  </div>\n</ng-template>\n\n<!-- Actions Dropdown Renderer Template -->\n<!-- Context: { $implicit: unknown, row: entityResponseData, value: unknown, column: GridColumn } -->\n<ng-template #actionsDropdownRenderer let-value=\"value\" let-entity=\"row\">\n  <cide-ele-dropdown \n    [items]=\"getDropdownItems(entity)\"\n    [config]=\"getDropdownConfig()\"\n    (itemClick)=\"onDropdownItemClick($event, entity)\">\n  </cide-ele-dropdown>\n</ng-template>\n\n", styles: ["", ":host{height:100%;display:flex;flex-direction:column}.entity-list-container{height:100%;display:flex;flex-direction:column;overflow:hidden}.tw-overflow-auto{flex:1;min-height:0}cide-ele-data-grid{flex:1;min-height:0;display:flex;flex-direction:column}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCoreEntityListComponent, decorators: [{
             type: Component,
@@ -11761,6 +11945,7 @@ class CideCoreUserCreateComponent {
     sharedObjectIdService = inject(SharedObjectIdService);
     entityRightsService = inject(CideLytFloatingEntityRightsSharingService);
     notificationService = inject(NotificationService);
+    rightsService = inject(RightsService);
     userMasterForm;
     activeTab = signal('basic', ...(ngDevMode ? [{ debugName: "activeTab" }] : []));
     loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
@@ -11768,6 +11953,9 @@ 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
+    // User type information from route data (TEACHER, STUDENT, USER, etc.)
+    userType = signal(null, ...(ngDevMode ? [{ debugName: "userType" }] : []));
+    typeSpecificId = signal(null, ...(ngDevMode ? [{ debugName: "typeSpecificId" }] : []));
     // Profile photo management
     profilePhotoPreview = signal(null, ...(ngDevMode ? [{ debugName: "profilePhotoPreview" }] : []));
     contactAddresses = signal([], ...(ngDevMode ? [{ debugName: "contactAddresses" }] : []));
@@ -12497,12 +12685,25 @@ class CideCoreUserCreateComponent {
     addressCountriesLoading = signal({}, ...(ngDevMode ? [{ debugName: "addressCountriesLoading" }] : []));
     postalCodeDataCache = signal({}, ...(ngDevMode ? [{ debugName: "postalCodeDataCache" }] : []));
     ngOnInit() {
+        // Initialize rights for user management
+        this.rightsService.initializeRights('core_user_management_create');
         this.initializeComponent();
     }
     /**
      * Initialize component
      */
     initializeComponent() {
+        // Read route data for user type (TEACHER, STUDENT, USER, etc.)
+        this.route.data.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(data => {
+            if (data['userType']) {
+                this.userType.set(data['userType']);
+                console.log('👤 User type from route:', data['userType']);
+            }
+            if (data['typeSpecificId']) {
+                this.typeSpecificId.set(data['typeSpecificId']);
+                console.log('🆔 Type-specific ID from route:', data['typeSpecificId']);
+            }
+        });
         // Get user information from route (for edit mode)
         this.route.params.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(params => {
             const queryParams = params['query'];
@@ -14806,6 +15007,11 @@ class CideCoreUserCreateComponent {
         this.applyFamilyDetailAccessControl();
     }
     onSubmit() {
+        const requiredRight = this.isEditMode() ? 'EDIT' : 'CREATE';
+        if (!this.rightsService.hasRight(requiredRight)) {
+            this.notificationService.error(`You do not have permission to ${this.isEditMode() ? 'edit' : 'create'} users`);
+            return;
+        }
         // Custom validation: ensure at least one entity mapping exists
         if (this.entityMappings().length === 0) {
             console.warn('At least one entity mapping is required for user access.');
@@ -14834,6 +15040,17 @@ class CideCoreUserCreateComponent {
             if (this.userId()) {
                 formData.auth_user_mst._id = this.userId();
             }
+            // Add user type mapping if provided via route data
+            if (this.userType()) {
+                formData.syutm_user_type = this.userType();
+                if (this.typeSpecificId()) {
+                    formData.syutm_type_specific_id = this.typeSpecificId();
+                }
+                console.log('👤 Adding user type mapping:', {
+                    userType: formData.syutm_user_type,
+                    typeSpecificId: formData.syutm_type_specific_id
+                });
+            }
             // Handle password fields based on mode
             if (this.isEditMode()) {
                 // In edit mode, only include password if it's being updated
@@ -14874,18 +15091,19 @@ class CideCoreUserCreateComponent {
                 next: (response) => {
                     console.log('✅ User master saved successfully:', response);
                     this.loading.set(false);
+                    const userTypeLabel = this.getUserTypeLabel();
                     if (this.isEditMode()) {
                         // In edit mode, show success notification
-                        this.notificationService.success('User updated successfully! All changes have been saved.', {
-                            title: 'User Updated',
+                        this.notificationService.success(`${userTypeLabel} updated successfully! All changes have been saved.`, {
+                            title: `${userTypeLabel} Updated`,
                             duration: 5000
                         });
-                        console.log('User updated successfully');
+                        console.log(`${userTypeLabel} updated successfully`);
                     }
                     else {
                         // In create mode, show success notification and reset form for new user
-                        this.notificationService.success('User created successfully! You can now create another user.', {
-                            title: 'User Created',
+                        this.notificationService.success(`${userTypeLabel} created successfully! You can now create another ${userTypeLabel.toLowerCase()}.`, {
+                            title: `${userTypeLabel} Created`,
                             duration: 5000
                         });
                         this.resetForm();
@@ -15434,8 +15652,18 @@ class CideCoreUserCreateComponent {
             throw error;
         }
     }
+    /**
+     * Get user type label for display (TEACHER -> Teacher, STUDENT -> Student, etc.)
+     */
+    getUserTypeLabel() {
+        const userType = this.userType();
+        if (!userType)
+            return 'User';
+        // Convert to title case
+        return userType.charAt(0) + userType.slice(1).toLowerCase();
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCoreUserCreateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideCoreUserCreateComponent, isStandalone: true, selector: "cide-core-user-create", viewQueries: [{ propertyName: "menuDetailsRendererTemplate", first: true, predicate: ["menuDetailsRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "permissionsCheckboxRendererTemplate", first: true, predicate: ["permissionsCheckboxRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "menuTypeRendererTemplate", first: true, predicate: ["menuTypeRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "menuRightsPermissionsRendererTemplate", first: true, predicate: ["menuRightsPermissionsRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "permissionsRendererTemplate", first: true, predicate: ["permissionsRendererTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- \r\n  ENTERPRISE USER MASTER FORM\r\n  \r\n  Enterprise-Level Styling with Tailwind CSS\r\n  Features: Responsive grids, proper typography, enhanced user experience\r\n-->\r\n\r\n<div class=\"tw-w-full tw-h-full tw-p-1 tw-pt-2\">\r\n  <!-- Toast Notifications -->\r\n  <cide-ele-toast-notification></cide-ele-toast-notification>\r\n  \r\n  <form class=\"tw-max-w-7xl tw-mx-auto tw-bg-transparent\" [formGroup]=\"userMasterForm\" [class.tw-opacity-60]=\"loading()\"\r\n    (ngSubmit)=\"onSubmit()\">\r\n\r\n\r\n    <!-- User Context Header -->\r\n    <div\r\n      class=\"tw-bg-gradient-to-r tw-from-blue-50 tw-to-indigo-50 tw-border tw-border-blue-200 tw-rounded-md tw-p-1 tw-mb-2 tw-shadow-sm\">\r\n      <div class=\"tw-flex tw-items-center tw-justify-between tw-flex-wrap tw-gap-2\">\r\n        <!-- User Basic Info Display -->\r\n        <div class=\"tw-flex tw-items-center tw-gap-3 tw-flex-wrap\">\r\n          <!-- Profile Photo Preview -->\r\n          <div class=\"tw-flex tw-items-center tw-gap-2\">\r\n            <div\r\n              class=\"tw-w-8 tw-h-8 tw-rounded-full tw-bg-blue-100 tw-border tw-border-blue-200 tw-flex tw-items-center tw-justify-center tw-overflow-hidden\">\r\n              @if (userMasterForm.get('user_photo_id_cyfm')?.value) {\r\n              <img cideEleFileImage [fileId]=\"userMasterForm.get('user_photo_id_cyfm')?.value\"\r\n                [altText]=\"'Profile Photo'\" class=\"tw-w-full tw-h-full tw-object-cover\">\r\n              } @else {\r\n              <cide-ele-icon name=\"person\" class=\"tw-w-5 tw-h-5 tw-text-blue-600\">\r\n              </cide-ele-icon>\r\n              }\r\n            </div>\r\n            <div class=\"tw-flex tw-flex-col\">\r\n              <span class=\"tw-text-xs tw-font-medium tw-text-blue-900\">\r\n                {{ getUserFullName() || 'New User' }}\r\n              </span>\r\n              <span class=\"tw-text-xs tw-text-blue-600\">\r\n                {{ getUserUsername() || 'Username not set' }}\r\n              </span>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Contact Info -->\r\n          <div class=\"tw-flex tw-items-center tw-gap-3\">\r\n            <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-xs tw-text-gray-700\">\r\n              <cide-ele-icon variant=\"gray\" size=\"xs\">email</cide-ele-icon>\r\n              <span>{{ getUserEmail() || 'Email not set' }}</span>\r\n            </div>\r\n            <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-xs tw-text-gray-700\">\r\n              <cide-ele-icon variant=\"gray\" size=\"xs\">phone</cide-ele-icon>\r\n              <span>{{ getUserMobile() || 'Mobile not set' }}</span>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Active Status -->\r\n          <div class=\"tw-flex tw-items-center tw-gap-1\">\r\n            @if (getUserActiveStatus()) {\r\n            <span\r\n              class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded tw-text-xs tw-font-medium tw-bg-green-100 tw-text-green-700\">\r\n              <cide-ele-icon variant=\"green\" size=\"xs\" class=\"tw-mr-1\">check_circle</cide-ele-icon>\r\n              Active\r\n            </span>\r\n            } @else {\r\n            <span\r\n              class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded tw-text-xs tw-font-medium tw-bg-red-100 tw-text-red-700\">\r\n              <cide-ele-icon variant=\"red\" size=\"xs\" class=\"tw-mr-1\">cancel</cide-ele-icon>\r\n              Inactive\r\n            </span>\r\n            }\r\n          </div>\r\n        </div>\r\n\r\n        <!-- Entity Info -->\r\n        <div class=\"tw-flex tw-items-center tw-gap-2\">\r\n          @if (hasDefaultEntity()) {\r\n          <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-xs tw-text-blue-700\">\r\n            <cide-ele-icon variant=\"blue\" size=\"xs\">business</cide-ele-icon>\r\n            <span class=\"tw-font-medium\">{{ getDefaultEntityName() }}</span>\r\n          </div>\r\n          } @else {\r\n          <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-xs tw-text-gray-500\">\r\n            <cide-ele-icon variant=\"gray\" size=\"xs\">business</cide-ele-icon>\r\n            <span class=\"tw-italic\">No entity</span>\r\n          </div>\r\n          }\r\n\r\n          <span class=\"tw-text-xs tw-text-gray-600 tw-px-2 tw-py-1 tw-bg-gray-100 tw-rounded\">\r\n            {{ getEntityMappingCount() }} mapping(s)\r\n          </span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Tab Navigation -->\r\n    <div class=\"tw-p-0 tw-mb-2 tw-border-b tw-border-gray-200\">\r\n      <cide-ele-tab [tabs]=\"userTabs()\" [activeTabId]=\"activeTab()\" size=\"md\" variant=\"default\"\r\n        (tabChange)=\"onTabChange($event)\">\r\n      </cide-ele-tab>\r\n    </div>\r\n\r\n    <!-- Tab Content -->\r\n    <div class=\"tw-transition-opacity tw-duration-300\" [class.tw-opacity-60]=\"loading()\">\r\n      @switch (activeTab()) {\r\n\r\n      @case ('basic') {\r\n      <!-- User Basic Information Section -->\r\n      <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\r\n\r\n        <!-- Top Section: Form Fields on Left, Profile Photo on Right -->\r\n        <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-[1fr_200px] tw-gap-4 tw-mb-4\">\r\n          <!-- Left Side: Form Fields -->\r\n          <div class=\"tw-space-y-4\">\r\n            <!-- Name Fields - All in One Row -->\r\n            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-4\">\r\n              <cide-ele-input id=\"user_firstname\" label=\"First Name *\" formControlName=\"user_firstname\"\r\n                placeholder=\"Enter first name\" [maxlength]=\"20\" size=\"md\" (ngModelChange)=\"onNameFieldChange()\">\r\n              </cide-ele-input>\r\n\r\n              <cide-ele-input id=\"user_middlename\" label=\"Middle Name\" formControlName=\"user_middlename\"\r\n                placeholder=\"Enter middle name\" [maxlength]=\"20\" size=\"md\" (ngModelChange)=\"onNameFieldChange()\">\r\n              </cide-ele-input>\r\n\r\n              <cide-ele-input id=\"user_lastname\" label=\"Last Name *\" formControlName=\"user_lastname\"\r\n                placeholder=\"Enter last name\" [maxlength]=\"20\" size=\"md\" (ngModelChange)=\"onNameFieldChange()\">\r\n              </cide-ele-input>\r\n\r\n              <cide-ele-input id=\"user_fullname\" label=\"Full Name * (Auto-generated)\" formControlName=\"user_fullname\"\r\n                placeholder=\"Auto-generated from name fields or enter manually\" [maxlength]=\"62\" size=\"md\">\r\n              </cide-ele-input>\r\n            </div>\r\n\r\n            <!-- Contact Information - All in One Row -->\r\n            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-3 tw-gap-4\">\r\n              <cide-ele-input id=\"user_username\" label=\"Username *\" formControlName=\"user_username\"\r\n                placeholder=\"Enter unique username\" [maxlength]=\"20\" size=\"md\">\r\n              </cide-ele-input>\r\n\r\n              <cide-ele-input id=\"user_emailid\" label=\"Email ID *\" formControlName=\"user_emailid\" type=\"email\"\r\n                placeholder=\"Enter valid email address\" [maxlength]=\"320\" size=\"md\">\r\n              </cide-ele-input>\r\n\r\n              <cide-ele-input id=\"user_mobileno\" label=\"Mobile Number *\" formControlName=\"user_mobileno\" type=\"tel\"\r\n                placeholder=\"Enter mobile number\" [maxlength]=\"15\" size=\"md\">\r\n              </cide-ele-input>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Right Side: Profile Photo Upload -->\r\n          <div class=\"tw-flex tw-items-start tw-justify-center tw-p-0\">\r\n            <cide-ele-file-input id=\"user_photo_id_cyfm\" formControlName=\"user_photo_id_cyfm\" accept=\"image/*\"\r\n              [showPreview]=\"true\" [previewBoxMode]=\"true\" [showFileName]=\"false\" previewWidth=\"180px\"\r\n              previewHeight=\"120px\" placeholderText=\"Upload Photo\" placeholderIcon=\"cloud_upload\" [autoUpload]=\"true\"\r\n              [uploadData]=\"getProfilePhotoUploadData()\" (uploadSuccess)=\"onProfilePhotoUploadSuccess($event)\"\r\n              (uploadError)=\"onProfilePhotoUploadError($event)\"\r\n              (uploadProgressChange)=\"onProfilePhotoUploadProgress($event)\">\r\n            </cide-ele-file-input>\r\n          </div>\r\n        </div>\r\n\r\n\r\n\r\n        <!-- Status Control -->\r\n        <div class=\"tw-grid tw-grid-cols-1 tw-mb-2\">\r\n          <div class=\"tw-p-2 tw-bg-blue-50 tw-border tw-border-blue-100 tw-rounded-lg\">\r\n            <label\r\n              class=\"tw-flex tw-flex-col tw-cursor-pointer tw-py-2 tw-bg-transparent tw-border-none tw-rounded-none tw-transition-all tw-duration-200 hover:tw-bg-blue-75\">\r\n              <cide-ele-input type=\"checkbox\" label=\"Active User Status\" formControlName=\"user_isactive\"\r\n                class=\"tw-h-5 tw-accent-blue-500 tw-rounded tw-mb-1\" />\r\n              <span class=\"tw-font-semibold tw-text-gray-700 tw-text-base\"></span>\r\n              <span class=\"tw-text-sm tw-text-gray-600 tw-mt-1 tw-leading-relaxed\">Enable this user account for system\r\n                access and operations</span>\r\n            </label>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      }\r\n\r\n      @case ('auth') {\r\n      <!-- Authentication Section -->\r\n      <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\r\n        <!-- Password Fields -->\r\n        @if (shouldShowPasswordFields()) {\r\n        <div class=\"tw-mb-4\">\r\n          <!-- Password Fields Header for Edit Mode -->\r\n          @if (isEditMode()) {\r\n          <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\r\n            <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-800\">Update Password</h6>\r\n            <button type=\"button\"\r\n              class=\"tw-px-3 tw-py-1 tw-bg-gray-100 tw-text-gray-600 tw-border tw-border-gray-300 tw-rounded-md tw-text-xs tw-font-medium hover:tw-bg-gray-200 tw-transition-colors\"\r\n              (click)=\"cancelPasswordUpdate()\">\r\n              Cancel Password Update\r\n            </button>\r\n          </div>\r\n          }\r\n\r\n          <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-2 md:tw-grid-cols-1 tw-gap-6\">\r\n            <cide-ele-input id=\"user_password\" [label]=\"getPasswordFieldLabel()\" formControlName=\"user_password\"\r\n              type=\"password\" placeholder=\"Enter secure password (min 8 characters)\" size=\"md\">\r\n            </cide-ele-input>\r\n\r\n            <cide-ele-input id=\"user_confirm_password\" [label]=\"getPasswordConfirmLabel()\"\r\n              formControlName=\"user_confirm_password\" type=\"password\" placeholder=\"Confirm your password\" size=\"md\">\r\n            </cide-ele-input>\r\n          </div>\r\n        </div>\r\n        }\r\n\r\n        <!-- Password Update Option for Edit Mode -->\r\n        @if (isEditMode() && !shouldShowPasswordFields()) {\r\n        <div class=\"tw-mb-4\">\r\n          <div class=\"tw-p-2 tw-bg-blue-50 tw-border tw-border-blue-200 tw-rounded-lg\">\r\n            <h6 class=\"tw-text-sm tw-font-semibold tw-text-blue-800 tw-mb-2\">Password Update</h6>\r\n            <p class=\"tw-text-sm tw-text-blue-600 tw-mb-3\">Current password will be kept. Click below to change\r\n              password.</p>\r\n\r\n            @if (hasPasswordInput()) {\r\n            <div\r\n              class=\"tw-mb-3 tw-p-2 tw-bg-yellow-50 tw-border tw-border-yellow-200 tw-rounded tw-text-sm tw-text-yellow-700\">\r\n              <cide-ele-icon variant=\"yellow\" size=\"xs\" class=\"tw-mr-1\">warning</cide-ele-icon>\r\n              Password fields contain text. Click \"Change Password\" to manage existing input.\r\n            </div>\r\n            }\r\n\r\n            <button type=\"button\"\r\n              class=\"tw-px-4 tw-py-2 tw-bg-blue-100 tw-text-blue-700 tw-border tw-border-blue-300 tw-rounded-md tw-text-sm tw-font-medium hover:tw-bg-blue-200 tw-transition-colors\"\r\n              (click)=\"triggerPasswordUpdate()\">\r\n              @if (hasPasswordInput()) {\r\n              Manage Password Fields\r\n              } @else {\r\n              Change Password\r\n              }\r\n            </button>\r\n          </div>\r\n        </div>\r\n        }\r\n\r\n        <!-- Password Options -->\r\n        <div class=\"tw-grid tw-grid-cols-1 tw-gap-4 tw-mb-4\">\r\n          <div class=\"tw-p-2 tw-bg-yellow-50 tw-border tw-border-yellow-100 tw-rounded-lg\">\r\n            <label\r\n              class=\"tw-flex tw-flex-col tw-gap-2 tw-cursor-pointer tw-py-2 tw-bg-transparent tw-border-none tw-rounded-none tw-transition-all tw-duration-200\">\r\n              <cide-ele-input type=\"checkbox\" label=\"Force Password Change on Login\"\r\n                formControlName=\"user_passwordchangeonlogin\" class=\"tw-h-5 tw-accent-yellow-500 tw-rounded tw-mb-1\" />\r\n              <span class=\"tw-text-sm tw-text-gray-600 tw-mt-1 tw-leading-relaxed\">User will be required to change\r\n                password on next login</span>\r\n            </label>\r\n          </div>\r\n        </div>\r\n\r\n      </div>\r\n      }\r\n\r\n      @case ('roles') {\r\n      <!-- Entity, Roles & Permissions Mapping Section -->\r\n      <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\r\n\r\n\r\n\r\n        <!-- Important Note -->\r\n        <div class=\"tw-bg-amber-50 tw-border tw-border-amber-200 tw-rounded-lg tw-p-2 tw-mb-4\">\r\n          <div class=\"tw-flex tw-items-start tw-gap-3\">\r\n            <cide-ele-icon variant=\"amber\" size=\"lg\">info</cide-ele-icon>\r\n            <div class=\"tw-flex-1\">\r\n              <h4 class=\"tw-text-sm tw-font-semibold tw-text-amber-800 tw-mb-1\">Entity-Role Based Access</h4>\r\n              <p class=\"tw-text-sm tw-text-amber-700 tw-mb-2\">User access is completely managed through entity-role\r\n                mappings below. At least one entity mapping is required for user access.</p>\r\n              @if (hasDefaultEntity()) {\r\n              <div class=\"tw-flex tw-items-center tw-gap-2 tw-mt-2 tw-p-2 tw-bg-amber-100 tw-rounded\">\r\n                <cide-ele-icon variant=\"amber\" size=\"sm\">star</cide-ele-icon>\r\n                <span class=\"tw-text-sm tw-text-amber-800\">\r\n                  <strong>Default Entity:</strong> {{ getDefaultEntityName() }}\r\n                </span>\r\n              </div>\r\n              } @else {\r\n              <div class=\"tw-text-sm tw-text-amber-600 tw-mt-2 tw-italic\">\r\n                \u26A0\uFE0F No default entity selected. Please set one entity as default.\r\n              </div>\r\n              }\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- Entity-Role Mapping Section -->\r\n        <div class=\"tw-flex tw-text-center tw-justify-between tw-items-center tw-mb-4\">\r\n          <div>\r\n            <h4 class=\"tw-text-sm tw-text-left tw-font-semibold tw-text-blue-900 tw-mb-1\">Entity-Role Mapping</h4>\r\n            <p class=\"tw-text-sm tw-text-blue-700\">Map user to entities with specific roles and permissions</p>\r\n          </div>\r\n          <div class=\"tw-flex tw-flex-col tw-items-end\">\r\n            <button cideEleButton variant=\"primary\" size=\"md\" type=\"button\" (click)=\"addEntityMapping()\"\r\n              leftIcon=\"add\" [disabled]=\"isAllEntitiesMapped()\">\r\n              Add Entity Mapping\r\n            </button>\r\n\r\n            @if (isAllEntitiesMapped()) {\r\n            <div class=\"tw-mt-2 tw-p-2 tw-bg-blue-50 tw-border tw-border-blue-200 tw-rounded-md tw-max-w-xs\">\r\n              <p class=\"tw-text-xs tw-text-blue-700\">\r\n                <cide-ele-icon variant=\"info\" size=\"xs\" class=\"tw-mr-1\">info</cide-ele-icon>\r\n                All available entities are already mapped.\r\n              </p>\r\n            </div>\r\n            }\r\n          </div>\r\n        </div>\r\n\r\n        <div formArrayName=\"core_entity_mapping\">\r\n            @for (mapping of entityMappings(); track $index; let i = $index) {\r\n            <div class=\"tw-bg-white tw-border tw-border-blue-200 tw-rounded-xl tw-mb-6 tw-overflow-hidden tw-shadow-sm\"\r\n              [formGroupName]=\"i\">\r\n              <div\r\n                class=\"tw-bg-gradient-to-r tw-from-blue-50 tw-to-blue-100 tw-px-6 tw-py-3 tw-flex tw-justify-between tw-items-center tw-border-b tw-border-blue-200\">\r\n                <div class=\"tw-flex tw-items-center tw-gap-2\">\r\n                  <h5 class=\"tw-m-0 tw-text-blue-800 tw-text-sm tw-font-semibold\">Entity Mapping {{ i + 1 }}</h5>\r\n                  @if (mapping.syenm_isdefault) {\r\n                  <span\r\n                    class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded-full tw-text-xs tw-font-medium tw-bg-green-100 tw-text-green-800\">\r\n                    <cide-ele-icon variant=\"green\" size=\"xs\" class=\"tw-mr-1\">star</cide-ele-icon>\r\n                    Default\r\n                  </span>\r\n                  }\r\n                </div>\r\n                @if (!mapping?._id) {\r\n                <button cideEleButton variant=\"danger\" size=\"sm\" type=\"button\" (click)=\"removeEntityMapping(i)\"\r\n                  leftIcon=\"delete\">\r\n                  Remove\r\n                </button>\r\n                }\r\n              </div>\r\n\r\n              <div>\r\n                <!-- Entity and Role Selection -->\r\n                <div class=\"tw-grid tw-px-3 tw-py-1 tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4 tw-mb-4\">\r\n                  <div>\r\n                    <cide-ele-select label=\"Entity *\" [options]=\"getFilteredEntityOptions(i)\"\r\n                      formControlName=\"syenm_entity_id_syen\" valueKey=\"_id\" labelKey=\"syen_name\"\r\n                      placeholder=\"Select entity\" size=\"md\" (change)=\"onEntityChange(i, $event)\">\r\n                    </cide-ele-select>\r\n\r\n                    @if (isAllEntitiesSelected(i)) {\r\n                    <div class=\"tw-mt-2 tw-p-2 tw-bg-yellow-50 tw-border tw-border-yellow-200 tw-rounded-md\">\r\n                      <p class=\"tw-text-xs tw-text-yellow-700\">\r\n                        <cide-ele-icon variant=\"warning\" size=\"xs\" class=\"tw-mr-1\">info</cide-ele-icon>\r\n                        All entities are already mapped. Remove another mapping to add this one.\r\n                      </p>\r\n                    </div>\r\n                    }\r\n                  </div>\r\n                  <cide-ele-select label=\"Role for this Entity\" [options]=\"getRoleOptionsForEntity(i)\"\r\n                    formControlName=\"syenm_role_id_syusrol\" valueKey=\"_id\" labelKey=\"syusrol_role_name\"\r\n                    placeholder=\"Select role for this entity\" size=\"md\" (change)=\"onRoleChange(i, $event)\">\r\n                  </cide-ele-select>\r\n                </div>\r\n\r\n\r\n                <!-- Entity-Specific Details and Active Period - All in One Row -->\r\n                <div class=\"tw-grid tw-px-3 tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-4 tw-mb-4\">\r\n                  <cide-ele-select label=\"Department for this Entity\" [options]=\"getDepartmentOptionsForEntity(i)\"\r\n                    formControlName=\"syenm_department_id_sydept\" (change)=\"onDepartmentChange($event)\" valueKey=\"_id\"\r\n                    labelKey=\"sydept_name\" placeholder=\"Select department\" size=\"md\">\r\n                  </cide-ele-select>\r\n\r\n                  <cide-ele-select label=\"Designation for this Entity\" [options]=\"getDesignationOptionsForEntity(i)\"\r\n                    valueKey=\"_id\" labelKey=\"sydsg_name\" formControlName=\"syenm_designation_id_sydsg\"\r\n                    placeholder=\"Select designation\" size=\"md\">\r\n                  </cide-ele-select>\r\n\r\n                  <cide-ele-input label=\"Active From *\" [id]=\"'syenm_activefrom['+i+']'\"\r\n                    formControlName=\"syenm_activefrom\" type=\"date\" size=\"md\">\r\n                  </cide-ele-input>\r\n\r\n                  <cide-ele-input label=\"Active Until\" [id]=\"'syenm_activeupto['+i+']'\"\r\n                    formControlName=\"syenm_activeupto\" type=\"date\" size=\"md\">\r\n                  </cide-ele-input>\r\n                </div>\r\n\r\n                <!-- Mapping Settings -->\r\n                <div class=\"tw-grid tw-px-3 tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-4 tw-mb-4\">\r\n                  <div class=\"tw-p-2 tw-bg-green-50 tw-border tw-border-green-200 tw-rounded-lg\">\r\n                    <cide-ele-input type=\"checkbox\" label=\"Default Entity\" formControlName=\"syenm_isdefault\"\r\n                      (change)=\"onDefaultEntityChange(i, $event)\" class=\"tw-h-5 tw-accent-green-500\" />\r\n                    <span class=\"tw-text-xs tw-text-green-600 tw-block tw-mt-1\">Set as user's default entity (only one\r\n                      allowed)</span>\r\n                  </div>\r\n\r\n                  <div class=\"tw-p-2 tw-bg-blue-50 tw-border tw-border-blue-200 tw-rounded-lg\">\r\n                    <cide-ele-input type=\"checkbox\" label=\"Active Mapping\" formControlName=\"syenm_isactive\"\r\n                      class=\"tw-h-5 tw-accent-blue-500\" />\r\n                    <span class=\"tw-text-xs tw-text-blue-600 tw-block tw-mt-1\">Enable this entity mapping</span>\r\n                  </div>\r\n                </div>\r\n\r\n                <!-- Menu Rights Grid for this Entity-Role -->\r\n                <div class=\"tw-border-t tw-border-gray-200\">\r\n\r\n                  @if (getMenuRightsForMapping(i).length > 0) {\r\n                  <!-- Menu Rights Tree Grid -->\r\n\r\n                  <cide-ele-data-grid [config]=\"getMenuRightsGridConfig(i)\"\r\n                    [templateRenderers]=\"getMenuRightsTemplateRenderers(i)\"\r\n                    (gridEvent)=\"onMenuRightsGridEvent($event, i)\" class=\"tw-h-96 tw-w-full\">\r\n                  </cide-ele-data-grid>\r\n\r\n                  } @else {\r\n                  <div class=\"tw-text-center tw-py-8 tw-bg-gray-50 tw-border tw-border-gray-200 tw-rounded-lg\">\r\n                    <div class=\"tw-text-gray-400 tw-mb-3\">\r\n                      <cide-ele-icon variant=\"gray\" size=\"lg\">menu</cide-ele-icon>\r\n                    </div>\r\n                    <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-600 tw-mb-2\">No Menu Rights Available</h6>\r\n                    <p class=\"tw-text-xs tw-text-gray-500 tw-mb-3 tw-text-center\">Select both entity and role to\r\n                      automatically load\r\n                      menu rights for this mapping.</p>\r\n                  </div>\r\n                  }\r\n                </div>\r\n              </div>\r\n            </div>\r\n            }\r\n          </div>\r\n\r\n          @if (entityMappings().length === 0) {\r\n          <div class=\"tw-text-center tw-py-8 tw-bg-white tw-border tw-border-blue-200 tw-rounded-lg\">\r\n            <div class=\"tw-text-blue-400 tw-mb-3\">\r\n              <cide-ele-icon variant=\"blue\" size=\"lg\">business</cide-ele-icon>\r\n            </div>\r\n            <h4 class=\"tw-text-sm tw-font-medium tw-text-blue-800 tw-mb-2\">No Entity Mappings</h4>\r\n            <p class=\"tw-text-blue-600 tw-mb-4 tw-text-center\">Add entity mappings to assign specific roles and\r\n              permissions for different entities.</p>\r\n            <button class=\"tw-mx-auto\" cideEleButton variant=\"primary\" size=\"md\" type=\"button\"\r\n              (click)=\"addEntityMapping()\" leftIcon=\"add\">\r\n              Add First Entity Mapping\r\n            </button>\r\n          </div>\r\n          }\r\n        </div>\r\n      }\r\n\r\n      @case ('addresses') {\r\n      <!-- Contact Addresses Section -->\r\n      <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\r\n        <div class=\"tw-flex tw-justify-end\">\r\n          <div class=\"tw-flex tw-justify-between tw-items-end tw-mb-2 tw-gap-4\">\r\n            <button cideEleButton variant=\"primary\" size=\"md\" type=\"button\" (click)=\"addContactAddress()\"\r\n              leftIcon=\"add\" [disabled]=\"!hasAddContactAddressRights()\">\r\n              Add New Address\r\n            </button>\r\n          </div>\r\n        </div>\r\n\r\n        <div formArrayName=\"core_user_contact_addresses\">\r\n          @for (address of contactAddresses(); track $index; let i = $index) {\r\n          <div [formGroupName]=\"i\"\r\n            class=\"tw-bg-white tw-border tw-border-gray-200 tw-rounded-xl tw-mb-8 tw-overflow-hidden tw-transition-all tw-duration-300 hover:tw-shadow-lg tw-shadow-sm\">\r\n            <div\r\n              class=\"tw-bg-gradient-to-r tw-from-gray-50 tw-to-gray-100 tw-px-4 tw-py-2 tw-flex tw-justify-between tw-items-center tw-border-b tw-border-gray-200\">\r\n              <!-- Use address type as header instead of generic \"Address X\" -->\r\n              <h4 class=\"tw-m-0 tw-text-gray-700 tw-text-sm tw-font-semibold tw-tracking-tight\">\r\n                {{ getAddressTypeLabel(i) || ('Address ' + (i + 1)) }}\r\n              </h4>\r\n              <div class=\"tw-flex tw-items-center tw-gap-2\">\r\n                @if (isAddressOwner(i)) {\r\n                <button cideEleButton variant=\"secondary\" size=\"xs\" type=\"button\" (click)=\"shareAddress(i)\"\r\n                  leftIcon=\"share\" class=\"tw-text-blue-600 hover:tw-text-blue-700\">\r\n                  Share\r\n                </button>\r\n                }\r\n                @if (!address?._id) {\r\n                <button cideEleButton variant=\"danger\" size=\"sm\" type=\"button\" (click)=\"removeContactAddress(i)\"\r\n                  leftIcon=\"delete\">\r\n                  Remove\r\n                </button>\r\n                }\r\n              </div>\r\n            </div>\r\n            <div class=\"tw-p-4\">\r\n              <!-- Main Layout: Inputs on Left, Address Textarea on Right -->\r\n              <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-4 tw-gap-3 tw-mb-3\">\r\n                \r\n                <!-- Left Side: Input Fields (3/4 width) -->\r\n                <div class=\"lg:tw-col-span-3\">\r\n                  <!-- Row 1: Address Type, Contact Person -->\r\n                  <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3 tw-mb-3\">\r\n                    <cide-ele-select label=\"Address Type\" [options]=\"addressTypeOptions()\" id=\"sycad_address_type_id_sygms\"\r\n                      formControlName=\"sycad_address_type_id_sygms\" placeholder=\"Select type\" size=\"sm\"\r\n                      valueKey=\"_id\" labelKey=\"sygms_title\" (change)=\"onAddressTypeChange(i)\">\r\n                    </cide-ele-select>\r\n\r\n                    <cide-ele-input label=\"Contact Person\" formControlName=\"sycad_contact_person_name\"\r\n                      placeholder=\"Enter contact person\" size=\"sm\">\r\n                    </cide-ele-input>\r\n                  </div>\r\n\r\n                  <!-- Row 2: Postal Code, City, State, Country -->\r\n                  <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-4 tw-gap-3\">\r\n                    <cide-ele-select label=\"Postal Code\" [options]=\"addressPostalCodes()[i] || []\"\r\n                      formControlName=\"sycad_contact_pin_sypin\" placeholder=\"Select postal code\" [searchable]=\"true\"\r\n                      [loading]=\"addressPostalCodesLoading()[i] || false\" (searchChange)=\"onPostalCodeSearch($event, i)\"\r\n                      (change)=\"onPostalCodeSelection($event, i)\" size=\"sm\">\r\n                    </cide-ele-select>\r\n\r\n                    <cide-ele-input label=\"City\" formControlName=\"sycad_contact_city_sypin\" placeholder=\"Enter city\"\r\n                      size=\"sm\">\r\n                    </cide-ele-input>\r\n\r\n                    <cide-ele-input label=\"State\" formControlName=\"sycad_contact_state_sypin\" placeholder=\"Enter state\"\r\n                      size=\"sm\">\r\n                    </cide-ele-input>\r\n\r\n                    <cide-ele-select label=\"Country\" [options]=\"addressCountries()[i] || []\"\r\n                      formControlName=\"sycad_contact_country_syctr\" placeholder=\"Select country\" valueKey=\"_id\"\r\n                      labelKey=\"syctr_country_iso_name\" [searchable]=\"true\" (searchChange)=\"onCountrySearch($event, i)\"\r\n                      [loading]=\"addressCountriesLoading()[i] || false\" size=\"sm\">\r\n                    </cide-ele-select>\r\n                  </div>\r\n                </div>\r\n\r\n                <!-- Right Side: Address Textarea (1/4 width, spans 2 rows) -->\r\n                <div class=\"lg:tw-col-span-1 lg:tw-row-span-2 tw-flex tw-flex-col\">\r\n                  <cide-ele-textarea label=\"Complete Address\" formControlName=\"sycad_contact_address\"\r\n                    placeholder=\"Enter complete address with area, city, and landmarks\" [rows]=\"4\" size=\"sm\"\r\n                    class=\"tw-h-full\">\r\n                  </cide-ele-textarea>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- Contact Details: Primary Phone, Alt Phone, Fax, Primary Email in 4 columns -->\r\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-4 tw-gap-3 tw-mb-3\">\r\n                <cide-ele-input label=\"Primary Phone\" formControlName=\"sycad_contact_phone\" type=\"tel\"\r\n                  placeholder=\"Primary phone\" size=\"sm\">\r\n                </cide-ele-input>\r\n\r\n                <cide-ele-input label=\"Alternate Phone\" formControlName=\"sycad_contact_phone_alt\" type=\"tel\"\r\n                  placeholder=\"Alternate phone\" size=\"sm\">\r\n                </cide-ele-input>\r\n\r\n                <cide-ele-input label=\"Fax Number\" formControlName=\"sycad_contact_fax\" placeholder=\"Fax number\"\r\n                  size=\"sm\">\r\n                </cide-ele-input>\r\n\r\n                <cide-ele-input label=\"Primary Email\" formControlName=\"sycad_contact_email\" type=\"email\"\r\n                  placeholder=\"Primary email\" size=\"sm\">\r\n                </cide-ele-input>\r\n              </div>\r\n\r\n              <!-- Alternate Email in single row -->\r\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3\">\r\n                <cide-ele-input label=\"Alternate Email\" formControlName=\"sycad_contact_email_alt\" type=\"email\"\r\n                  placeholder=\"Alternate email address\" size=\"sm\">\r\n                </cide-ele-input>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          }\r\n        </div>\r\n      </div>\r\n      }\r\n\r\n      @case ('documents') {\r\n      <!-- Documents Section -->\r\n      <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\r\n        <div class=\"tw-flex tw-justify-end tw-items-end tw-mb-2 tw-gap-4\">\r\n          <button cideEleButton variant=\"primary\" size=\"md\" type=\"button\" (click)=\"addDocument()\" leftIcon=\"add\" [disabled]=\"!hasAddDocumentRights()\">\r\n            Add Document\r\n          </button>\r\n        </div>\r\n        <div formArrayName=\"core_user_documents\">\r\n          @for (doc of documents(); track $index; let i = $index) {\r\n          <div [formGroupName]=\"i\"\r\n            class=\"tw-bg-white tw-border tw-border-gray-200 tw-rounded-xl tw-mb-8 tw-overflow-hidden tw-transition-all tw-duration-300 hover:tw-shadow-lg tw-shadow-sm\">\r\n            <div\r\n              class=\"tw-bg-gradient-to-r tw-from-gray-50 tw-to-gray-100 tw-px-4 tw-py-2 tw-flex tw-justify-between tw-items-center tw-border-b tw-border-gray-200\">\r\n              <h4 class=\"tw-m-0 tw-text-gray-700 tw-text-sm tw-font-semibold tw-tracking-tight\">\r\n                {{ getDocumentTypeLabel(i) || ('Document ' + (i + 1)) }}\r\n              </h4>\r\n              <div class=\"tw-flex tw-gap-2\">\r\n                @if (doc?._id) {\r\n                <button cideEleButton variant=\"secondary\" size=\"sm\" type=\"button\" (click)=\"shareDocumentRights(i)\"\r\n                  leftIcon=\"share\">\r\n                  Share\r\n                </button>\r\n                }\r\n              </div>\r\n            </div>\r\n            <div class=\"tw-p-4\">\r\n              <!-- Main Layout: Inputs on Left, File Upload on Right -->\r\n              <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-3 tw-gap-4\">\r\n                \r\n                <!-- Left Side: Document Information (2/3 width) -->\r\n                <div class=\"lg:tw-col-span-2\">\r\n                  <!-- Row 1: Document Type, Document Number, Name as per Document -->\r\n                  <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-3 tw-mb-3\">\r\n                    <cide-ele-select label=\"Document Type\" [options]=\"documentTypeOptions()\"\r\n                      formControlName=\"syusd_document_type_id_sygms\" placeholder=\"Select type\" size=\"sm\"\r\n                      valueKey=\"_id\" labelKey=\"sygms_title\" (change)=\"onDocumentTypeChange(i)\">\r\n                    </cide-ele-select>\r\n\r\n                    <cide-ele-input label=\"Document Number\" formControlName=\"syusd_doc_number\"\r\n                      placeholder=\"Document number\" size=\"sm\">\r\n                    </cide-ele-input>\r\n\r\n                    <cide-ele-input label=\"Name as per Document\" formControlName=\"syusd_doc_name_as_per_doc\"\r\n                      placeholder=\"Name on document\" size=\"sm\">\r\n                    </cide-ele-input>\r\n                  </div>\r\n\r\n                  <!-- Row 2: Issue Date, Expiry Date, Photo Group -->\r\n                  <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-3 tw-mb-3\">\r\n                    <cide-ele-input label=\"Issue Date\" formControlName=\"syusd_doc_issue_date\"\r\n                      [id]=\"'syusd_doc_issue_date['+i+']'\" type=\"date\" size=\"sm\">\r\n                    </cide-ele-input>\r\n\r\n                    <cide-ele-input label=\"Expiry Date\" formControlName=\"syusd_doc_expiry_date\"\r\n                      [id]=\"'syusd_doc_expiry_date['+i+']'\" type=\"date\" size=\"sm\">\r\n                    </cide-ele-input>\r\n                  </div>\r\n\r\n                  <!-- Row 3: Verification Status, KYC Status -->\r\n                  <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3\">\r\n                    <cide-ele-select label=\"Verification Status\" [options]=\"documentVerificationStatusOptions()\"\r\n                      formControlName=\"syusd_doc_verification_status_id_sygms\" placeholder=\"Select status\"\r\n                      size=\"sm\" valueKey=\"_id\" labelKey=\"sygms_title\">\r\n                    </cide-ele-select>\r\n\r\n                    <cide-ele-select label=\"KYC Status\" [options]=\"documentKycStatusOptions()\"\r\n                      formControlName=\"syusd_doc_kyc_status_id_sygms\" placeholder=\"Select KYC status\" size=\"sm\"\r\n                      valueKey=\"_id\" labelKey=\"sygms_title\">\r\n                    </cide-ele-select>\r\n                  </div>\r\n                </div>\r\n\r\n                <!-- Right Side: File Upload (1/3 width) -->\r\n                <div class=\"lg:tw-col-span-1\">\r\n                  <div class=\"tw-bg-gray-50 tw-border tw-border-gray-200 tw-rounded-lg tw-p-3 tw-h-full\">\r\n                    \r\n                    <!-- File Upload Input -->\r\n                    <cide-ele-file-input\r\n                      [id]=\"'document-files-' + i\"\r\n                      [multiple]=\"true\"\r\n                      formControlName=\"syusd_photo_group_id_cyfm\"\r\n                      [accept]=\"'.pdf,.jpg,.jpeg,.png,.doc,.docx'\"\r\n                      [autoUpload]=\"true\"\r\n                      [uploadData]=\"getDocumentUploadData(i)\"\r\n                      (change)=\"onDocumentFilesSelected($event, i)\"\r\n                      (uploadSuccess)=\"onDocumentUploadSuccess($event, i)\"\r\n                      (uploadError)=\"onDocumentUploadError($event, i)\"\r\n                      (uploadProgressChange)=\"onDocumentUploadProgress($event, i)\"\r\n                      class=\"tw-mb-3\"\r\n                      size=\"sm\">\r\n                    </cide-ele-file-input>\r\n\r\n                    <!-- Upload Status -->\r\n                    <!-- Upload status is now handled by the file input component itself -->\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          }\r\n        </div>\r\n      </div>\r\n      }\r\n\r\n      @case ('family') {\r\n      <!-- Family Details Section - Compact Design -->\r\n      <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\r\n        <div class=\"tw-flex tw-justify-end tw-items-end tw-mb-3 tw-gap-4\">\r\n          <button cideEleButton variant=\"primary\" size=\"sm\" type=\"button\" (click)=\"addFamilyDetail()\" leftIcon=\"add\" [disabled]=\"!hasAddFamilyDetailRights()\">\r\n            Add Family Member\r\n          </button>\r\n        </div>\r\n\r\n        <div formArrayName=\"core_user_family_details\">\r\n          @for (family of familyDetails(); track $index; let i = $index) {\r\n          <div [formGroupName]=\"i\"\r\n            class=\"tw-bg-white tw-border tw-border-gray-200 tw-rounded-lg tw-mb-4 tw-overflow-hidden tw-transition-all tw-duration-200 hover:tw-shadow-md tw-shadow-sm\">\r\n            \r\n            <!-- Compact Header -->\r\n            <div class=\"tw-bg-gray-50 tw-px-4 tw-py-2 tw-flex tw-justify-between tw-items-center tw-border-b tw-border-gray-200\">\r\n              <h4 class=\"tw-m-0 tw-text-gray-700 tw-text-sm tw-font-medium\">Family Member {{ i + 1 }}</h4>\r\n              <div class=\"tw-flex tw-gap-2\">\r\n                @if (family?._id) {\r\n                <button cideEleButton variant=\"secondary\" size=\"xs\" type=\"button\" (click)=\"shareFamilyDetailRights(i)\"\r\n                  leftIcon=\"share\">\r\n                  Share\r\n                </button>\r\n                }\r\n                @if (!family?._id) {\r\n                <button cideEleButton variant=\"danger\" size=\"xs\" type=\"button\" (click)=\"removeFamilyDetail(i)\" leftIcon=\"delete\">\r\n                  Remove\r\n                </button>\r\n                }\r\n              </div>\r\n            </div>\r\n            \r\n            <!-- Compact Form Content - 3 inputs per row -->\r\n            <div class=\"tw-p-4\">\r\n              <!-- Row 1: Name, User, and Combined Relationship/Active Status (33.33% each) -->\r\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-3 tw-mb-3\">\r\n                <cide-ele-input label=\"Family Member Name\" formControlName=\"syfdl_family_member_name\"\r\n                  placeholder=\"Enter family member full name\" size=\"sm\">\r\n                </cide-ele-input>\r\n\r\n                <cide-ele-select label=\"Family Member User\" [options]=\"userOptions(i)\"\r\n                  formControlName=\"syfdl_family_member_id_user\" placeholder=\"Select family member user\" size=\"sm\"\r\n                  valueKey=\"_id\" labelKey=\"user_fullname\" [searchable]=\"true\"\r\n                  [loading]=\"userSearchLoading()[i] || false\" (searchChange)=\"onUserSearchChange($event, i)\"\r\n                  (change)=\"onUserSelectionChange($event, i)\">\r\n                </cide-ele-select>\r\n\r\n                <!-- Combined Relationship and Active Status (33.33%) -->\r\n                <div class=\"tw-flex tw-flex-row tw-gap-2 tw-items-end\">\r\n                  <div class=\"tw-flex-1\">\r\n                    <cide-ele-select label=\"Relationship\" [options]=\"relationshipOptions()\"\r\n                      formControlName=\"syfdl_relationship_id_sygms\" placeholder=\"Select relationship\" size=\"sm\"\r\n                      valueKey=\"_id\" labelKey=\"sygms_title\">\r\n                    </cide-ele-select>\r\n                  </div>\r\n\r\n                  <div class=\"tw-flex tw-items-center tw-pt-1 tw-flex-shrink-0\">\r\n                    <cide-ele-input formControlName=\"syfdl_isactive\" type=\"checkbox\" label=\"Active\" size=\"sm\">\r\n                    </cide-ele-input>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- Row 2: Blood Group, DOB, and Phone -->\r\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 xl:tw-grid-cols-3 tw-gap-3 tw-mb-3\">\r\n                <cide-ele-select label=\"Blood Group\" [options]=\"bloodGroupOptions()\"\r\n                  formControlName=\"syfdl_blood_group_sygms\" placeholder=\"Select blood group\" size=\"sm\" valueKey=\"_id\"\r\n                  labelKey=\"sygms_title\">\r\n                </cide-ele-select>\r\n\r\n                <cide-ele-input label=\"Date of Birth\" formControlName=\"syfdl_family_member_dob\" type=\"date\" size=\"sm\"\r\n                  [id]=\"'syfdl_family_member_dob['+i+']'\">\r\n                </cide-ele-input>\r\n\r\n                <cide-ele-input label=\"Contact Phone\" formControlName=\"syfdl_contact_phone\" type=\"tel\"\r\n                  placeholder=\"Enter contact phone\" size=\"sm\">\r\n                </cide-ele-input>\r\n              </div>\r\n\r\n              <!-- Row 3: Email, Email ID, and Contact Number -->\r\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 xl:tw-grid-cols-3 tw-gap-3 tw-mb-3\">\r\n                <cide-ele-input label=\"Contact Email\" formControlName=\"syfdl_contact_email\" type=\"email\"\r\n                  placeholder=\"Enter contact email\" size=\"sm\">\r\n                </cide-ele-input>\r\n\r\n                <cide-ele-input label=\"Contact Email ID\" formControlName=\"syfdl_contact_email_id\" type=\"email\"\r\n                  placeholder=\"Enter contact email ID\" size=\"sm\">\r\n                </cide-ele-input>\r\n\r\n                <cide-ele-input label=\"Contact Number\" formControlName=\"syfdl_contact_number\" type=\"tel\"\r\n                  placeholder=\"Enter contact number\" size=\"sm\">\r\n                </cide-ele-input>\r\n              </div>\r\n\r\n            </div>\r\n          </div>\r\n          }\r\n        </div>\r\n      </div>\r\n      }\r\n      }\r\n    </div>\r\n\r\n    <!-- Form Actions -->\r\n    <div\r\n      class=\"tw-flex tw-justify-end tw-gap-4 tw-py-2 tw-bg-white tw-border-t tw-border-gray-200 tw-sticky tw-bottom-0 tw-z-10\">\r\n      <button cideEleButton type=\"button\" variant=\"secondary\" (click)=\"resetForm()\" leftIcon=\"refresh\"\r\n        [disabled]=\"loading()\">\r\n        Reset Form\r\n      </button>\r\n\r\n      <button cideEleButton type=\"submit\" variant=\"primary\" [disabled]=\"loading() || userMasterForm.invalid\"\r\n        [loading]=\"loading()\" leftIcon=\"save\">\r\n        Save User Master\r\n      </button>\r\n    </div>\r\n  </form>\r\n</div>\r\n\r\n<!-- Template Renderers for Role Permissions Grid -->\r\n<ng-template #menuDetailsRendererTemplate let-row=\"row\">\r\n  <div class=\"tw-flex tw-items-center tw-space-x-3 tw-min-w-0\">\r\n    <!-- Menu Icon -->\r\n    <div class=\"tw-flex-shrink-0\">\r\n      @if (row.syme_type === 'module') {\r\n      <cide-ele-icon class=\"tw-text-blue-600 tw-w-4 tw-h-4\">folder</cide-ele-icon>\r\n      } @else if (row.syme_type === 'section') {\r\n      <cide-ele-icon class=\"tw-text-green-600 tw-w-4 tw-h-4\">folder_open</cide-ele-icon>\r\n      } @else if (row.syme_type === 'menu') {\r\n      <cide-ele-icon class=\"tw-text-purple-600 tw-w-4 tw-h-4\">menu</cide-ele-icon>\r\n      } @else {\r\n      <cide-ele-icon class=\"tw-text-gray-600 tw-w-4 tw-h-4\">description</cide-ele-icon>\r\n      }\r\n    </div>\r\n\r\n    <!-- Menu Details -->\r\n    <div class=\"tw-ml-3 tw-min-w-0 tw-flex-1\">\r\n      <div class=\"tw-flex tw-items-center tw-gap-2\">\r\n        <div class=\"tw-text-xs tw-font-medium tw-text-gray-900 tw-truncate\" [title]=\"row.syme_title\">\r\n          {{ row.syme_title || row.menu?.syme_title || row.menu?.syme_menu_name || 'Untitled' }}\r\n        </div>\r\n        <!-- Green pill indicator for parent menus with child permissions -->\r\n        @if (row.syme_type === 'module' || row.syme_type === 'section') {\r\n        @if (hasChildMenusWithPermissions(row._id)) {\r\n        <span\r\n          class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-green-100 tw-text-green-800 tw-whitespace-nowrap\">\r\n          Assigned\r\n        </span>\r\n        }\r\n        }\r\n      </div>\r\n      @if (row.permission?.sygms_name) {\r\n      <div class=\"tw-text-xs tw-text-blue-500 tw-truncate\" [title]=\"row.permission?.sygms_name\">\r\n        {{ row.permission?.sygms_name }}\r\n      </div>\r\n      }\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- Menu Type Renderer Template -->\r\n<ng-template #menuTypeRendererTemplate let-row=\"row\" let-value=\"value\">\r\n  <div class=\"tw-flex tw-items-center tw-justify-center\">\r\n    @if (row.syme_type === 'module') {\r\n    <span\r\n      class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded-full tw-text-xs tw-font-medium tw-bg-blue-100 tw-text-blue-800\">\r\n      Module\r\n    </span>\r\n    } @else if (row.syme_type === 'section') {\r\n    <span\r\n      class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded-full tw-text-xs tw-font-medium tw-bg-green-100 tw-text-green-800\">\r\n      Section\r\n    </span>\r\n    } @else if (row.syme_type === 'menu') {\r\n    <span\r\n      class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded-full tw-text-xs tw-font-medium tw-bg-purple-100 tw-text-purple-800\">\r\n      Menu\r\n    </span>\r\n    } @else {\r\n    <span\r\n      class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded-full tw-text-xs tw-font-medium tw-bg-gray-100 tw-text-gray-800\">\r\n      {{ row.syme_type || 'Unknown' }}\r\n    </span>\r\n    }\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- Permissions Checkbox Renderer Template -->\r\n<ng-template #permissionsCheckboxRendererTemplate let-row=\"row\" let-value=\"value\">\r\n  <div class=\"tw-flex tw-flex-wrap tw-gap-2 tw-max-w-full\">\r\n    @if (row.syme_type === 'menu' && row?.syme_permissions_id_sygms && row?.syme_permissions_id_sygms.length > 0) {\r\n    @for (permissionId of row?.syme_permissions_id_sygms || []; track permissionId) {\r\n    <div class=\"tw-flex tw-items-center tw-space-x-1\">\r\n      <div class=\"tw-flex tw-items-center tw-space-x-1\">\r\n        <input type=\"checkbox\" [checked]=\"isPermissionSelected(row._id, permissionId)\" [disabled]=\"true\"\r\n          class=\"tw-h-4 tw-w-4 tw-text-blue-600 tw-bg-gray-100 tw-border-gray-300 tw-rounded focus:tw-ring-blue-500\">\r\n        <label class=\"tw-text-xs tw-text-gray-700\">\r\n          {{ getPermissionById(permissionId)?.sygms_title || 'Unknown' }}\r\n        </label>\r\n      </div>\r\n    </div>\r\n    }\r\n    } @else {\r\n    <!-- Show green checkmark for parent menus with child permissions -->\r\n    @if (row.syme_type === 'module' || row.syme_type === 'section' || row.syme_type === 'title') {\r\n    @if (hasChildMenusWithPermissions(row._id)) {\r\n    <div class=\"tw-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-bg-green-100 tw-rounded-full\">\r\n      <cide-ele-icon class=\"tw-text-green-600\" size=\"xs\">\r\n        check\r\n      </cide-ele-icon>\r\n    </div>\r\n    } @else {\r\n    <span class=\"tw-text-xs tw-text-gray-400\">N/A</span>\r\n    }\r\n    } @else {\r\n    <span class=\"tw-text-xs tw-text-gray-400\">N/A</span>\r\n    }\r\n    }\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- Menu Rights Permissions Renderer Template -->\r\n<ng-template #menuRightsPermissionsRendererTemplate let-row=\"row\" let-value=\"value\">\r\n  <div class=\"tw-flex tw-flex-wrap tw-gap-2 tw-max-w-full\">\r\n    <!-- Role Rights Display -->\r\n    @if (row.role_rights && row.role_rights.length > 0) {\r\n    <div class=\"tw-mb-2\">\r\n      <div class=\"tw-text-xs tw-text-gray-500 tw-mb-1\">Role Rights:</div>\r\n      <div class=\"tw-flex tw-flex-wrap tw-gap-1\">\r\n        @for (right of row.role_rights; track $index) {\r\n        <span class=\"tw-inline-block tw-px-2 tw-py-1 tw-text-xs tw-bg-blue-100 tw-text-blue-800 tw-rounded\">\r\n          {{ right }}\r\n        </span>\r\n        }\r\n      </div>\r\n    </div>\r\n    }\r\n\r\n\r\n    <!-- Exception Indicator -->\r\n    @if (row.hasException) {\r\n    <div class=\"tw-mt-2\">\r\n      <span class=\"tw-inline-block tw-px-2 tw-py-1 tw-text-xs tw-bg-yellow-100 tw-text-yellow-800 tw-rounded\">\r\n        Override\r\n      </span>\r\n    </div>\r\n    } @else {\r\n    <div class=\"tw-mt-2\">\r\n      <span class=\"tw-text-xs tw-text-gray-400\">Default</span>\r\n    </div>\r\n    }\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- Permissions Renderer Template -->\r\n<ng-template #permissionsRendererTemplate let-row=\"row\" let-value=\"value\">\r\n  <div class=\"tw-flex tw-flex-wrap tw-gap-2 tw-max-w-full\">\r\n    @if (row._permissionValues && Object.keys(row._permissionValues).length > 0) {\r\n    @for (permissionId of Object.keys(row._permissionValues); track permissionId) {\r\n    <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\n      <cide-ele-input type=\"checkbox\" [ngModel]=\"row._permissionValues[permissionId].checked\"\r\n        (ngModelChange)=\"onPermissionChangeSafe($event, row, permissionId)\"\r\n        [id]=\"'permission-' + row._id + '-' + permissionId\" class=\"tw-h-4 tw-w-4\">\r\n      </cide-ele-input>\r\n      <label [for]=\"'permission-' + row._id + '-' + permissionId\" \r\n        class=\"tw-text-xs tw-cursor-pointer\"\r\n        [ngClass]=\"{\r\n          'tw-text-gray-700': row._permissionValues[permissionId].modified === row._permissionValues[permissionId].actual,\r\n          'tw-text-blue-600 tw-font-semibold': row._permissionValues[permissionId].modified !== row._permissionValues[permissionId].actual\r\n        }\">\r\n        {{ row._permissionValues[permissionId].permission?.sygms_title }}\r\n        @if (row._permissionValues[permissionId].modified !== row._permissionValues[permissionId].actual) {\r\n        <span class=\"tw-text-xs tw-text-orange-500 tw-ml-1\" title=\"Modified from role permission\">\r\n          ({{ row._permissionValues[permissionId].actual ? '\u2713' : '\u2717' }})\r\n        </span>\r\n        }\r\n      </label>\r\n    </div>\r\n    }\r\n    } @else {\r\n    <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\n      <cide-ele-icon class=\"tw-text-gray-400 tw-animate-spin\" size=\"xs\">refresh</cide-ele-icon>\r\n      <span class=\"tw-text-xs tw-text-gray-400\">Loading permissions...</span>\r\n    </div>\r\n    }\r\n  </div>\r\n</ng-template>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1$2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CideInputComponent, selector: "cide-ele-input", inputs: ["fill", "label", "labelHide", "disabled", "clearInput", "labelPlacement", "labelDir", "placeholder", "leadingIcon", "trailingIcon", "helperText", "helperTextCollapse", "hideHelperAndErrorText", "errorText", "maxlength", "minlength", "required", "autocapitalize", "autocomplete", "type", "width", "id", "ngModel", "option", "min", "max", "step", "size"], outputs: ["ngModelChange"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput", "options", "multiple", "searchable", "showSearchInput", "loading", "valueKey", "labelKey", "treeView"], outputs: ["ngModelChange", "change", "searchChange"] }, { kind: "component", type: CideTextareaComponent, selector: "cide-ele-textarea", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "minlength", "maxlength", "rows", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput"], outputs: ["ngModelChange"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideEleTabComponent, selector: "cide-ele-tab", inputs: ["tabs", "activeTabId", "size", "variant", "fullWidth", "disabled"], outputs: ["tabChange"] }, { kind: "component", type: CideEleFileInputComponent, selector: "cide-ele-file-input", inputs: ["label", "accept", "multiple", "disabled", "required", "helperText", "errorText", "showPreview", "previewWidth", "previewHeight", "previewBoxMode", "showFileName", "placeholderText", "placeholderIcon", "autoUpload", "uploadData", "showFloatingUploader", "floatingUploaderGroupId"], outputs: ["fileChange", "uploadSuccess", "uploadError", "uploadProgressChange"] }, { kind: "directive", type: CideEleFileImageDirective, selector: "[cideEleFileImage]", inputs: ["fileId", "altText"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideEleDataGridComponent, selector: "cide-ele-data-grid", inputs: ["config", "templateRenderers", "customFormatters", "actionHandlers", "serverSidePagination", "totalServerItems", "currentServerPage", "currentServerPageSize", "dragDropEnabled"], outputs: ["gridEvent"] }, { kind: "component", type: CideEleToastNotificationComponent, selector: "cide-ele-toast-notification" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideCoreUserCreateComponent, isStandalone: true, selector: "cide-core-user-create", viewQueries: [{ propertyName: "menuDetailsRendererTemplate", first: true, predicate: ["menuDetailsRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "permissionsCheckboxRendererTemplate", first: true, predicate: ["permissionsCheckboxRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "menuTypeRendererTemplate", first: true, predicate: ["menuTypeRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "menuRightsPermissionsRendererTemplate", first: true, predicate: ["menuRightsPermissionsRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "permissionsRendererTemplate", first: true, predicate: ["permissionsRendererTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- \r\n  ENTERPRISE USER MASTER FORM\r\n  \r\n  Enterprise-Level Styling with Tailwind CSS\r\n  Features: Responsive grids, proper typography, enhanced user experience\r\n-->\r\n\r\n<div class=\"tw-w-full tw-h-full tw-p-1 tw-pt-2\">\r\n  <!-- Toast Notifications -->\r\n  <cide-ele-toast-notification></cide-ele-toast-notification>\r\n  \r\n  <form class=\"tw-max-w-7xl tw-mx-auto tw-bg-transparent\" [formGroup]=\"userMasterForm\" [class.tw-opacity-60]=\"loading()\"\r\n    (ngSubmit)=\"onSubmit()\">\r\n\r\n\r\n    <!-- User Context Header -->\r\n    <div\r\n      class=\"tw-bg-gradient-to-r tw-from-blue-50 tw-to-indigo-50 tw-border tw-border-blue-200 tw-rounded-md tw-p-1 tw-mb-2 tw-shadow-sm\">\r\n      <div class=\"tw-flex tw-items-center tw-justify-between tw-flex-wrap tw-gap-2\">\r\n        <!-- User Basic Info Display -->\r\n        <div class=\"tw-flex tw-items-center tw-gap-3 tw-flex-wrap\">\r\n          <!-- Profile Photo Preview -->\r\n          <div class=\"tw-flex tw-items-center tw-gap-2\">\r\n            <div\r\n              class=\"tw-w-8 tw-h-8 tw-rounded-full tw-bg-blue-100 tw-border tw-border-blue-200 tw-flex tw-items-center tw-justify-center tw-overflow-hidden\">\r\n              @if (userMasterForm.get('user_photo_id_cyfm')?.value) {\r\n              <img cideEleFileImage [fileId]=\"userMasterForm.get('user_photo_id_cyfm')?.value\"\r\n                [altText]=\"'Profile Photo'\" class=\"tw-w-full tw-h-full tw-object-cover\">\r\n              } @else {\r\n              <cide-ele-icon name=\"person\" class=\"tw-w-5 tw-h-5 tw-text-blue-600\">\r\n              </cide-ele-icon>\r\n              }\r\n            </div>\r\n            <div class=\"tw-flex tw-flex-col\">\r\n              <span class=\"tw-text-xs tw-font-medium tw-text-blue-900\">\r\n                {{ getUserFullName() || 'New User' }}\r\n              </span>\r\n              <span class=\"tw-text-xs tw-text-blue-600\">\r\n                {{ getUserUsername() || 'Username not set' }}\r\n              </span>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Contact Info -->\r\n          <div class=\"tw-flex tw-items-center tw-gap-3\">\r\n            <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-xs tw-text-gray-700\">\r\n              <cide-ele-icon variant=\"gray\" size=\"xs\">email</cide-ele-icon>\r\n              <span>{{ getUserEmail() || 'Email not set' }}</span>\r\n            </div>\r\n            <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-xs tw-text-gray-700\">\r\n              <cide-ele-icon variant=\"gray\" size=\"xs\">phone</cide-ele-icon>\r\n              <span>{{ getUserMobile() || 'Mobile not set' }}</span>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Active Status -->\r\n          <div class=\"tw-flex tw-items-center tw-gap-1\">\r\n            @if (getUserActiveStatus()) {\r\n            <span\r\n              class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded tw-text-xs tw-font-medium tw-bg-green-100 tw-text-green-700\">\r\n              <cide-ele-icon variant=\"green\" size=\"xs\" class=\"tw-mr-1\">check_circle</cide-ele-icon>\r\n              Active\r\n            </span>\r\n            } @else {\r\n            <span\r\n              class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded tw-text-xs tw-font-medium tw-bg-red-100 tw-text-red-700\">\r\n              <cide-ele-icon variant=\"red\" size=\"xs\" class=\"tw-mr-1\">cancel</cide-ele-icon>\r\n              Inactive\r\n            </span>\r\n            }\r\n          </div>\r\n        </div>\r\n\r\n        <!-- Entity Info -->\r\n        <div class=\"tw-flex tw-items-center tw-gap-2\">\r\n          @if (hasDefaultEntity()) {\r\n          <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-xs tw-text-blue-700\">\r\n            <cide-ele-icon variant=\"blue\" size=\"xs\">business</cide-ele-icon>\r\n            <span class=\"tw-font-medium\">{{ getDefaultEntityName() }}</span>\r\n          </div>\r\n          } @else {\r\n          <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-xs tw-text-gray-500\">\r\n            <cide-ele-icon variant=\"gray\" size=\"xs\">business</cide-ele-icon>\r\n            <span class=\"tw-italic\">No entity</span>\r\n          </div>\r\n          }\r\n\r\n          <span class=\"tw-text-xs tw-text-gray-600 tw-px-2 tw-py-1 tw-bg-gray-100 tw-rounded\">\r\n            {{ getEntityMappingCount() }} mapping(s)\r\n          </span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Tab Navigation -->\r\n    <div class=\"tw-p-0 tw-mb-2 tw-border-b tw-border-gray-200\">\r\n      <cide-ele-tab [tabs]=\"userTabs()\" [activeTabId]=\"activeTab()\" size=\"md\" variant=\"default\"\r\n        (tabChange)=\"onTabChange($event)\">\r\n      </cide-ele-tab>\r\n    </div>\r\n\r\n    <!-- Tab Content -->\r\n    <div class=\"tw-transition-opacity tw-duration-300\" [class.tw-opacity-60]=\"loading()\">\r\n      @switch (activeTab()) {\r\n\r\n      @case ('basic') {\r\n      <!-- User Basic Information Section -->\r\n      <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\r\n\r\n        <!-- Top Section: Form Fields on Left, Profile Photo on Right -->\r\n        <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-[1fr_200px] tw-gap-4 tw-mb-4\">\r\n          <!-- Left Side: Form Fields -->\r\n          <div class=\"tw-space-y-4\">\r\n            <!-- Name Fields - All in One Row -->\r\n            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-4\">\r\n              <cide-ele-input id=\"user_firstname\" label=\"First Name *\" formControlName=\"user_firstname\"\r\n                placeholder=\"Enter first name\" [maxlength]=\"20\" size=\"md\" (ngModelChange)=\"onNameFieldChange()\">\r\n              </cide-ele-input>\r\n\r\n              <cide-ele-input id=\"user_middlename\" label=\"Middle Name\" formControlName=\"user_middlename\"\r\n                placeholder=\"Enter middle name\" [maxlength]=\"20\" size=\"md\" (ngModelChange)=\"onNameFieldChange()\">\r\n              </cide-ele-input>\r\n\r\n              <cide-ele-input id=\"user_lastname\" label=\"Last Name *\" formControlName=\"user_lastname\"\r\n                placeholder=\"Enter last name\" [maxlength]=\"20\" size=\"md\" (ngModelChange)=\"onNameFieldChange()\">\r\n              </cide-ele-input>\r\n\r\n              <cide-ele-input id=\"user_fullname\" label=\"Full Name * (Auto-generated)\" formControlName=\"user_fullname\"\r\n                placeholder=\"Auto-generated from name fields or enter manually\" [maxlength]=\"62\" size=\"md\">\r\n              </cide-ele-input>\r\n            </div>\r\n\r\n            <!-- Contact Information - All in One Row -->\r\n            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-3 tw-gap-4\">\r\n              <cide-ele-input id=\"user_username\" label=\"Username *\" formControlName=\"user_username\"\r\n                placeholder=\"Enter unique username\" [maxlength]=\"20\" size=\"md\">\r\n              </cide-ele-input>\r\n\r\n              <cide-ele-input id=\"user_emailid\" label=\"Email ID *\" formControlName=\"user_emailid\" type=\"email\"\r\n                placeholder=\"Enter valid email address\" [maxlength]=\"320\" size=\"md\">\r\n              </cide-ele-input>\r\n\r\n              <cide-ele-input id=\"user_mobileno\" label=\"Mobile Number *\" formControlName=\"user_mobileno\" type=\"tel\"\r\n                placeholder=\"Enter mobile number\" [maxlength]=\"15\" size=\"md\">\r\n              </cide-ele-input>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Right Side: Profile Photo Upload -->\r\n          <div class=\"tw-flex tw-items-start tw-justify-center tw-p-0\">\r\n            <cide-ele-file-input id=\"user_photo_id_cyfm\" formControlName=\"user_photo_id_cyfm\" accept=\"image/*\"\r\n              [showPreview]=\"true\" [previewBoxMode]=\"true\" [showFileName]=\"false\" previewWidth=\"180px\"\r\n              previewHeight=\"120px\" placeholderText=\"Upload Photo\" placeholderIcon=\"cloud_upload\" [autoUpload]=\"true\"\r\n              [uploadData]=\"getProfilePhotoUploadData()\" (uploadSuccess)=\"onProfilePhotoUploadSuccess($event)\"\r\n              (uploadError)=\"onProfilePhotoUploadError($event)\"\r\n              (uploadProgressChange)=\"onProfilePhotoUploadProgress($event)\">\r\n            </cide-ele-file-input>\r\n          </div>\r\n        </div>\r\n\r\n\r\n\r\n        <!-- Status Control -->\r\n        <div class=\"tw-grid tw-grid-cols-1 tw-mb-2\">\r\n          <div class=\"tw-p-2 tw-bg-blue-50 tw-border tw-border-blue-100 tw-rounded-lg\">\r\n            <label\r\n              class=\"tw-flex tw-flex-col tw-cursor-pointer tw-py-2 tw-bg-transparent tw-border-none tw-rounded-none tw-transition-all tw-duration-200 hover:tw-bg-blue-75\">\r\n              <cide-ele-input type=\"checkbox\" label=\"Active User Status\" formControlName=\"user_isactive\"\r\n                class=\"tw-h-5 tw-accent-blue-500 tw-rounded tw-mb-1\" />\r\n              <span class=\"tw-font-semibold tw-text-gray-700 tw-text-base\"></span>\r\n              <span class=\"tw-text-sm tw-text-gray-600 tw-mt-1 tw-leading-relaxed\">Enable this user account for system\r\n                access and operations</span>\r\n            </label>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      }\r\n\r\n      @case ('auth') {\r\n      <!-- Authentication Section -->\r\n      <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\r\n        <!-- Password Fields -->\r\n        @if (shouldShowPasswordFields()) {\r\n        <div class=\"tw-mb-4\">\r\n          <!-- Password Fields Header for Edit Mode -->\r\n          @if (isEditMode()) {\r\n          <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\r\n            <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-800\">Update Password</h6>\r\n            <button type=\"button\"\r\n              class=\"tw-px-3 tw-py-1 tw-bg-gray-100 tw-text-gray-600 tw-border tw-border-gray-300 tw-rounded-md tw-text-xs tw-font-medium hover:tw-bg-gray-200 tw-transition-colors\"\r\n              (click)=\"cancelPasswordUpdate()\">\r\n              Cancel Password Update\r\n            </button>\r\n          </div>\r\n          }\r\n\r\n          <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-2 md:tw-grid-cols-1 tw-gap-6\">\r\n            <cide-ele-input id=\"user_password\" [label]=\"getPasswordFieldLabel()\" formControlName=\"user_password\"\r\n              type=\"password\" placeholder=\"Enter secure password (min 8 characters)\" size=\"md\">\r\n            </cide-ele-input>\r\n\r\n            <cide-ele-input id=\"user_confirm_password\" [label]=\"getPasswordConfirmLabel()\"\r\n              formControlName=\"user_confirm_password\" type=\"password\" placeholder=\"Confirm your password\" size=\"md\">\r\n            </cide-ele-input>\r\n          </div>\r\n        </div>\r\n        }\r\n\r\n        <!-- Password Update Option for Edit Mode -->\r\n        @if (isEditMode() && !shouldShowPasswordFields()) {\r\n        <div class=\"tw-mb-4\">\r\n          <div class=\"tw-p-2 tw-bg-blue-50 tw-border tw-border-blue-200 tw-rounded-lg\">\r\n            <h6 class=\"tw-text-sm tw-font-semibold tw-text-blue-800 tw-mb-2\">Password Update</h6>\r\n            <p class=\"tw-text-sm tw-text-blue-600 tw-mb-3\">Current password will be kept. Click below to change\r\n              password.</p>\r\n\r\n            @if (hasPasswordInput()) {\r\n            <div\r\n              class=\"tw-mb-3 tw-p-2 tw-bg-yellow-50 tw-border tw-border-yellow-200 tw-rounded tw-text-sm tw-text-yellow-700\">\r\n              <cide-ele-icon variant=\"yellow\" size=\"xs\" class=\"tw-mr-1\">warning</cide-ele-icon>\r\n              Password fields contain text. Click \"Change Password\" to manage existing input.\r\n            </div>\r\n            }\r\n\r\n            <button type=\"button\"\r\n              class=\"tw-px-4 tw-py-2 tw-bg-blue-100 tw-text-blue-700 tw-border tw-border-blue-300 tw-rounded-md tw-text-sm tw-font-medium hover:tw-bg-blue-200 tw-transition-colors\"\r\n              (click)=\"triggerPasswordUpdate()\">\r\n              @if (hasPasswordInput()) {\r\n              Manage Password Fields\r\n              } @else {\r\n              Change Password\r\n              }\r\n            </button>\r\n          </div>\r\n        </div>\r\n        }\r\n\r\n        <!-- Password Options -->\r\n        <div class=\"tw-grid tw-grid-cols-1 tw-gap-4 tw-mb-4\">\r\n          <div class=\"tw-p-2 tw-bg-yellow-50 tw-border tw-border-yellow-100 tw-rounded-lg\">\r\n            <label\r\n              class=\"tw-flex tw-flex-col tw-gap-2 tw-cursor-pointer tw-py-2 tw-bg-transparent tw-border-none tw-rounded-none tw-transition-all tw-duration-200\">\r\n              <cide-ele-input type=\"checkbox\" label=\"Force Password Change on Login\"\r\n                formControlName=\"user_passwordchangeonlogin\" class=\"tw-h-5 tw-accent-yellow-500 tw-rounded tw-mb-1\" />\r\n              <span class=\"tw-text-sm tw-text-gray-600 tw-mt-1 tw-leading-relaxed\">User will be required to change\r\n                password on next login</span>\r\n            </label>\r\n          </div>\r\n        </div>\r\n\r\n      </div>\r\n      }\r\n\r\n      @case ('roles') {\r\n      <!-- Entity, Roles & Permissions Mapping Section -->\r\n      <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\r\n\r\n\r\n\r\n        <!-- Important Note -->\r\n        <div class=\"tw-bg-amber-50 tw-border tw-border-amber-200 tw-rounded-lg tw-p-2 tw-mb-4\">\r\n          <div class=\"tw-flex tw-items-start tw-gap-3\">\r\n            <cide-ele-icon variant=\"amber\" size=\"lg\">info</cide-ele-icon>\r\n            <div class=\"tw-flex-1\">\r\n              <h4 class=\"tw-text-sm tw-font-semibold tw-text-amber-800 tw-mb-1\">Entity-Role Based Access</h4>\r\n              <p class=\"tw-text-sm tw-text-amber-700 tw-mb-2\">User access is completely managed through entity-role\r\n                mappings below. At least one entity mapping is required for user access.</p>\r\n              @if (hasDefaultEntity()) {\r\n              <div class=\"tw-flex tw-items-center tw-gap-2 tw-mt-2 tw-p-2 tw-bg-amber-100 tw-rounded\">\r\n                <cide-ele-icon variant=\"amber\" size=\"sm\">star</cide-ele-icon>\r\n                <span class=\"tw-text-sm tw-text-amber-800\">\r\n                  <strong>Default Entity:</strong> {{ getDefaultEntityName() }}\r\n                </span>\r\n              </div>\r\n              } @else {\r\n              <div class=\"tw-text-sm tw-text-amber-600 tw-mt-2 tw-italic\">\r\n                \u26A0\uFE0F No default entity selected. Please set one entity as default.\r\n              </div>\r\n              }\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- Entity-Role Mapping Section -->\r\n        <div class=\"tw-flex tw-text-center tw-justify-between tw-items-center tw-mb-4\">\r\n          <div>\r\n            <h4 class=\"tw-text-sm tw-text-left tw-font-semibold tw-text-blue-900 tw-mb-1\">Entity-Role Mapping</h4>\r\n            <p class=\"tw-text-sm tw-text-blue-700\">Map user to entities with specific roles and permissions</p>\r\n          </div>\r\n          <div class=\"tw-flex tw-flex-col tw-items-end\">\r\n            <button cideEleButton variant=\"primary\" size=\"md\" type=\"button\" (click)=\"addEntityMapping()\"\r\n              leftIcon=\"add\" [disabled]=\"isAllEntitiesMapped()\">\r\n              Add Entity Mapping\r\n            </button>\r\n\r\n            @if (isAllEntitiesMapped()) {\r\n            <div class=\"tw-mt-2 tw-p-2 tw-bg-blue-50 tw-border tw-border-blue-200 tw-rounded-md tw-max-w-xs\">\r\n              <p class=\"tw-text-xs tw-text-blue-700\">\r\n                <cide-ele-icon variant=\"info\" size=\"xs\" class=\"tw-mr-1\">info</cide-ele-icon>\r\n                All available entities are already mapped.\r\n              </p>\r\n            </div>\r\n            }\r\n          </div>\r\n        </div>\r\n\r\n        <div formArrayName=\"core_entity_mapping\">\r\n            @for (mapping of entityMappings(); track $index; let i = $index) {\r\n            <div class=\"tw-bg-white tw-border tw-border-blue-200 tw-rounded-xl tw-mb-6 tw-overflow-hidden tw-shadow-sm\"\r\n              [formGroupName]=\"i\">\r\n              <div\r\n                class=\"tw-bg-gradient-to-r tw-from-blue-50 tw-to-blue-100 tw-px-6 tw-py-3 tw-flex tw-justify-between tw-items-center tw-border-b tw-border-blue-200\">\r\n                <div class=\"tw-flex tw-items-center tw-gap-2\">\r\n                  <h5 class=\"tw-m-0 tw-text-blue-800 tw-text-sm tw-font-semibold\">Entity Mapping {{ i + 1 }}</h5>\r\n                  @if (mapping.syenm_isdefault) {\r\n                  <span\r\n                    class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded-full tw-text-xs tw-font-medium tw-bg-green-100 tw-text-green-800\">\r\n                    <cide-ele-icon variant=\"green\" size=\"xs\" class=\"tw-mr-1\">star</cide-ele-icon>\r\n                    Default\r\n                  </span>\r\n                  }\r\n                </div>\r\n                @if (!mapping?._id) {\r\n                <button cideEleButton variant=\"danger\" size=\"sm\" type=\"button\" (click)=\"removeEntityMapping(i)\"\r\n                  leftIcon=\"delete\">\r\n                  Remove\r\n                </button>\r\n                }\r\n              </div>\r\n\r\n              <div>\r\n                <!-- Entity and Role Selection -->\r\n                <div class=\"tw-grid tw-px-3 tw-py-1 tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4 tw-mb-4\">\r\n                  <div>\r\n                    <cide-ele-select label=\"Entity *\" [options]=\"getFilteredEntityOptions(i)\"\r\n                      formControlName=\"syenm_entity_id_syen\" valueKey=\"_id\" labelKey=\"syen_name\"\r\n                      placeholder=\"Select entity\" size=\"md\" (change)=\"onEntityChange(i, $event)\">\r\n                    </cide-ele-select>\r\n\r\n                    @if (isAllEntitiesSelected(i)) {\r\n                    <div class=\"tw-mt-2 tw-p-2 tw-bg-yellow-50 tw-border tw-border-yellow-200 tw-rounded-md\">\r\n                      <p class=\"tw-text-xs tw-text-yellow-700\">\r\n                        <cide-ele-icon variant=\"warning\" size=\"xs\" class=\"tw-mr-1\">info</cide-ele-icon>\r\n                        All entities are already mapped. Remove another mapping to add this one.\r\n                      </p>\r\n                    </div>\r\n                    }\r\n                  </div>\r\n                  <cide-ele-select label=\"Role for this Entity\" [options]=\"getRoleOptionsForEntity(i)\"\r\n                    formControlName=\"syenm_role_id_syusrol\" valueKey=\"_id\" labelKey=\"syusrol_role_name\"\r\n                    placeholder=\"Select role for this entity\" size=\"md\" (change)=\"onRoleChange(i, $event)\">\r\n                  </cide-ele-select>\r\n                </div>\r\n\r\n\r\n                <!-- Entity-Specific Details and Active Period - All in One Row -->\r\n                <div class=\"tw-grid tw-px-3 tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-4 tw-mb-4\">\r\n                  <cide-ele-select label=\"Department for this Entity\" [options]=\"getDepartmentOptionsForEntity(i)\"\r\n                    formControlName=\"syenm_department_id_sydept\" (change)=\"onDepartmentChange($event)\" valueKey=\"_id\"\r\n                    labelKey=\"sydept_name\" placeholder=\"Select department\" size=\"md\">\r\n                  </cide-ele-select>\r\n\r\n                  <cide-ele-select label=\"Designation for this Entity\" [options]=\"getDesignationOptionsForEntity(i)\"\r\n                    valueKey=\"_id\" labelKey=\"sydsg_name\" formControlName=\"syenm_designation_id_sydsg\"\r\n                    placeholder=\"Select designation\" size=\"md\">\r\n                  </cide-ele-select>\r\n\r\n                  <cide-ele-input label=\"Active From *\" [id]=\"'syenm_activefrom['+i+']'\"\r\n                    formControlName=\"syenm_activefrom\" type=\"date\" size=\"md\">\r\n                  </cide-ele-input>\r\n\r\n                  <cide-ele-input label=\"Active Until\" [id]=\"'syenm_activeupto['+i+']'\"\r\n                    formControlName=\"syenm_activeupto\" type=\"date\" size=\"md\">\r\n                  </cide-ele-input>\r\n                </div>\r\n\r\n                <!-- Mapping Settings -->\r\n                <div class=\"tw-grid tw-px-3 tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-4 tw-mb-4\">\r\n                  <div class=\"tw-p-2 tw-bg-green-50 tw-border tw-border-green-200 tw-rounded-lg\">\r\n                    <cide-ele-input type=\"checkbox\" label=\"Default Entity\" formControlName=\"syenm_isdefault\"\r\n                      (change)=\"onDefaultEntityChange(i, $event)\" class=\"tw-h-5 tw-accent-green-500\" />\r\n                    <span class=\"tw-text-xs tw-text-green-600 tw-block tw-mt-1\">Set as user's default entity (only one\r\n                      allowed)</span>\r\n                  </div>\r\n\r\n                  <div class=\"tw-p-2 tw-bg-blue-50 tw-border tw-border-blue-200 tw-rounded-lg\">\r\n                    <cide-ele-input type=\"checkbox\" label=\"Active Mapping\" formControlName=\"syenm_isactive\"\r\n                      class=\"tw-h-5 tw-accent-blue-500\" />\r\n                    <span class=\"tw-text-xs tw-text-blue-600 tw-block tw-mt-1\">Enable this entity mapping</span>\r\n                  </div>\r\n                </div>\r\n\r\n                <!-- Menu Rights Grid for this Entity-Role -->\r\n                <div class=\"tw-border-t tw-border-gray-200\">\r\n\r\n                  @if (getMenuRightsForMapping(i).length > 0) {\r\n                  <!-- Menu Rights Tree Grid -->\r\n\r\n                  <cide-ele-data-grid [config]=\"getMenuRightsGridConfig(i)\"\r\n                    [templateRenderers]=\"getMenuRightsTemplateRenderers(i)\"\r\n                    (gridEvent)=\"onMenuRightsGridEvent($event, i)\" class=\"tw-h-96 tw-w-full\">\r\n                  </cide-ele-data-grid>\r\n\r\n                  } @else {\r\n                  <div class=\"tw-text-center tw-py-8 tw-bg-gray-50 tw-border tw-border-gray-200 tw-rounded-lg\">\r\n                    <div class=\"tw-text-gray-400 tw-mb-3\">\r\n                      <cide-ele-icon variant=\"gray\" size=\"lg\">menu</cide-ele-icon>\r\n                    </div>\r\n                    <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-600 tw-mb-2\">No Menu Rights Available</h6>\r\n                    <p class=\"tw-text-xs tw-text-gray-500 tw-mb-3 tw-text-center\">Select both entity and role to\r\n                      automatically load\r\n                      menu rights for this mapping.</p>\r\n                  </div>\r\n                  }\r\n                </div>\r\n              </div>\r\n            </div>\r\n            }\r\n          </div>\r\n\r\n          @if (entityMappings().length === 0) {\r\n          <div class=\"tw-text-center tw-py-8 tw-bg-white tw-border tw-border-blue-200 tw-rounded-lg\">\r\n            <div class=\"tw-text-blue-400 tw-mb-3\">\r\n              <cide-ele-icon variant=\"blue\" size=\"lg\">business</cide-ele-icon>\r\n            </div>\r\n            <h4 class=\"tw-text-sm tw-font-medium tw-text-blue-800 tw-mb-2\">No Entity Mappings</h4>\r\n            <p class=\"tw-text-blue-600 tw-mb-4 tw-text-center\">Add entity mappings to assign specific roles and\r\n              permissions for different entities.</p>\r\n            <button class=\"tw-mx-auto\" cideEleButton variant=\"primary\" size=\"md\" type=\"button\"\r\n              (click)=\"addEntityMapping()\" leftIcon=\"add\">\r\n              Add First Entity Mapping\r\n            </button>\r\n          </div>\r\n          }\r\n        </div>\r\n      }\r\n\r\n      @case ('addresses') {\r\n      <!-- Contact Addresses Section -->\r\n      <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\r\n        <div class=\"tw-flex tw-justify-end\">\r\n          <div class=\"tw-flex tw-justify-between tw-items-end tw-mb-2 tw-gap-4\">\r\n            <button cideEleButton variant=\"primary\" size=\"md\" type=\"button\" (click)=\"addContactAddress()\"\r\n              leftIcon=\"add\" [disabled]=\"!hasAddContactAddressRights()\">\r\n              Add New Address\r\n            </button>\r\n          </div>\r\n        </div>\r\n\r\n        <div formArrayName=\"core_user_contact_addresses\">\r\n          @for (address of contactAddresses(); track $index; let i = $index) {\r\n          <div [formGroupName]=\"i\"\r\n            class=\"tw-bg-white tw-border tw-border-gray-200 tw-rounded-xl tw-mb-8 tw-overflow-hidden tw-transition-all tw-duration-300 hover:tw-shadow-lg tw-shadow-sm\">\r\n            <div\r\n              class=\"tw-bg-gradient-to-r tw-from-gray-50 tw-to-gray-100 tw-px-4 tw-py-2 tw-flex tw-justify-between tw-items-center tw-border-b tw-border-gray-200\">\r\n              <!-- Use address type as header instead of generic \"Address X\" -->\r\n              <h4 class=\"tw-m-0 tw-text-gray-700 tw-text-sm tw-font-semibold tw-tracking-tight\">\r\n                {{ getAddressTypeLabel(i) || ('Address ' + (i + 1)) }}\r\n              </h4>\r\n              <div class=\"tw-flex tw-items-center tw-gap-2\">\r\n                @if (isAddressOwner(i)) {\r\n                <button cideEleButton variant=\"secondary\" size=\"xs\" type=\"button\" (click)=\"shareAddress(i)\"\r\n                  leftIcon=\"share\" class=\"tw-text-blue-600 hover:tw-text-blue-700\">\r\n                  Share\r\n                </button>\r\n                }\r\n                @if (!address?._id) {\r\n                <button cideEleButton variant=\"danger\" size=\"sm\" type=\"button\" (click)=\"removeContactAddress(i)\"\r\n                  leftIcon=\"delete\">\r\n                  Remove\r\n                </button>\r\n                }\r\n              </div>\r\n            </div>\r\n            <div class=\"tw-p-4\">\r\n              <!-- Main Layout: Inputs on Left, Address Textarea on Right -->\r\n              <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-4 tw-gap-3 tw-mb-3\">\r\n                \r\n                <!-- Left Side: Input Fields (3/4 width) -->\r\n                <div class=\"lg:tw-col-span-3\">\r\n                  <!-- Row 1: Address Type, Contact Person -->\r\n                  <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3 tw-mb-3\">\r\n                    <cide-ele-select label=\"Address Type\" [options]=\"addressTypeOptions()\" id=\"sycad_address_type_id_sygms\"\r\n                      formControlName=\"sycad_address_type_id_sygms\" placeholder=\"Select type\" size=\"sm\"\r\n                      valueKey=\"_id\" labelKey=\"sygms_title\" (change)=\"onAddressTypeChange(i)\">\r\n                    </cide-ele-select>\r\n\r\n                    <cide-ele-input label=\"Contact Person\" formControlName=\"sycad_contact_person_name\"\r\n                      placeholder=\"Enter contact person\" size=\"sm\">\r\n                    </cide-ele-input>\r\n                  </div>\r\n\r\n                  <!-- Row 2: Postal Code, City, State, Country -->\r\n                  <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-4 tw-gap-3\">\r\n                    <cide-ele-select label=\"Postal Code\" [options]=\"addressPostalCodes()[i] || []\"\r\n                      formControlName=\"sycad_contact_pin_sypin\" placeholder=\"Select postal code\" [searchable]=\"true\"\r\n                      [loading]=\"addressPostalCodesLoading()[i] || false\" (searchChange)=\"onPostalCodeSearch($event, i)\"\r\n                      (change)=\"onPostalCodeSelection($event, i)\" size=\"sm\">\r\n                    </cide-ele-select>\r\n\r\n                    <cide-ele-input label=\"City\" formControlName=\"sycad_contact_city_sypin\" placeholder=\"Enter city\"\r\n                      size=\"sm\">\r\n                    </cide-ele-input>\r\n\r\n                    <cide-ele-input label=\"State\" formControlName=\"sycad_contact_state_sypin\" placeholder=\"Enter state\"\r\n                      size=\"sm\">\r\n                    </cide-ele-input>\r\n\r\n                    <cide-ele-select label=\"Country\" [options]=\"addressCountries()[i] || []\"\r\n                      formControlName=\"sycad_contact_country_syctr\" placeholder=\"Select country\" valueKey=\"_id\"\r\n                      labelKey=\"syctr_country_iso_name\" [searchable]=\"true\" (searchChange)=\"onCountrySearch($event, i)\"\r\n                      [loading]=\"addressCountriesLoading()[i] || false\" size=\"sm\">\r\n                    </cide-ele-select>\r\n                  </div>\r\n                </div>\r\n\r\n                <!-- Right Side: Address Textarea (1/4 width, spans 2 rows) -->\r\n                <div class=\"lg:tw-col-span-1 lg:tw-row-span-2 tw-flex tw-flex-col\">\r\n                  <cide-ele-textarea label=\"Complete Address\" formControlName=\"sycad_contact_address\"\r\n                    placeholder=\"Enter complete address with area, city, and landmarks\" [rows]=\"4\" size=\"sm\"\r\n                    class=\"tw-h-full\">\r\n                  </cide-ele-textarea>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- Contact Details: Primary Phone, Alt Phone, Fax, Primary Email in 4 columns -->\r\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-4 tw-gap-3 tw-mb-3\">\r\n                <cide-ele-input label=\"Primary Phone\" formControlName=\"sycad_contact_phone\" type=\"tel\"\r\n                  placeholder=\"Primary phone\" size=\"sm\">\r\n                </cide-ele-input>\r\n\r\n                <cide-ele-input label=\"Alternate Phone\" formControlName=\"sycad_contact_phone_alt\" type=\"tel\"\r\n                  placeholder=\"Alternate phone\" size=\"sm\">\r\n                </cide-ele-input>\r\n\r\n                <cide-ele-input label=\"Fax Number\" formControlName=\"sycad_contact_fax\" placeholder=\"Fax number\"\r\n                  size=\"sm\">\r\n                </cide-ele-input>\r\n\r\n                <cide-ele-input label=\"Primary Email\" formControlName=\"sycad_contact_email\" type=\"email\"\r\n                  placeholder=\"Primary email\" size=\"sm\">\r\n                </cide-ele-input>\r\n              </div>\r\n\r\n              <!-- Alternate Email in single row -->\r\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3\">\r\n                <cide-ele-input label=\"Alternate Email\" formControlName=\"sycad_contact_email_alt\" type=\"email\"\r\n                  placeholder=\"Alternate email address\" size=\"sm\">\r\n                </cide-ele-input>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          }\r\n        </div>\r\n      </div>\r\n      }\r\n\r\n      @case ('documents') {\r\n      <!-- Documents Section -->\r\n      <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\r\n        <div class=\"tw-flex tw-justify-end tw-items-end tw-mb-2 tw-gap-4\">\r\n          <button cideEleButton variant=\"primary\" size=\"md\" type=\"button\" (click)=\"addDocument()\" leftIcon=\"add\" [disabled]=\"!hasAddDocumentRights()\">\r\n            Add Document\r\n          </button>\r\n        </div>\r\n        <div formArrayName=\"core_user_documents\">\r\n          @for (doc of documents(); track $index; let i = $index) {\r\n          <div [formGroupName]=\"i\"\r\n            class=\"tw-bg-white tw-border tw-border-gray-200 tw-rounded-xl tw-mb-8 tw-overflow-hidden tw-transition-all tw-duration-300 hover:tw-shadow-lg tw-shadow-sm\">\r\n            <div\r\n              class=\"tw-bg-gradient-to-r tw-from-gray-50 tw-to-gray-100 tw-px-4 tw-py-2 tw-flex tw-justify-between tw-items-center tw-border-b tw-border-gray-200\">\r\n              <h4 class=\"tw-m-0 tw-text-gray-700 tw-text-sm tw-font-semibold tw-tracking-tight\">\r\n                {{ getDocumentTypeLabel(i) || ('Document ' + (i + 1)) }}\r\n              </h4>\r\n              <div class=\"tw-flex tw-gap-2\">\r\n                @if (doc?._id) {\r\n                <button cideEleButton variant=\"secondary\" size=\"sm\" type=\"button\" (click)=\"shareDocumentRights(i)\"\r\n                  leftIcon=\"share\">\r\n                  Share\r\n                </button>\r\n                }\r\n              </div>\r\n            </div>\r\n            <div class=\"tw-p-4\">\r\n              <!-- Main Layout: Inputs on Left, File Upload on Right -->\r\n              <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-3 tw-gap-4\">\r\n                \r\n                <!-- Left Side: Document Information (2/3 width) -->\r\n                <div class=\"lg:tw-col-span-2\">\r\n                  <!-- Row 1: Document Type, Document Number, Name as per Document -->\r\n                  <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-3 tw-mb-3\">\r\n                    <cide-ele-select label=\"Document Type\" [options]=\"documentTypeOptions()\"\r\n                      formControlName=\"syusd_document_type_id_sygms\" placeholder=\"Select type\" size=\"sm\"\r\n                      valueKey=\"_id\" labelKey=\"sygms_title\" (change)=\"onDocumentTypeChange(i)\">\r\n                    </cide-ele-select>\r\n\r\n                    <cide-ele-input label=\"Document Number\" formControlName=\"syusd_doc_number\"\r\n                      placeholder=\"Document number\" size=\"sm\">\r\n                    </cide-ele-input>\r\n\r\n                    <cide-ele-input label=\"Name as per Document\" formControlName=\"syusd_doc_name_as_per_doc\"\r\n                      placeholder=\"Name on document\" size=\"sm\">\r\n                    </cide-ele-input>\r\n                  </div>\r\n\r\n                  <!-- Row 2: Issue Date, Expiry Date, Photo Group -->\r\n                  <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-3 tw-mb-3\">\r\n                    <cide-ele-input label=\"Issue Date\" formControlName=\"syusd_doc_issue_date\"\r\n                      [id]=\"'syusd_doc_issue_date['+i+']'\" type=\"date\" size=\"sm\">\r\n                    </cide-ele-input>\r\n\r\n                    <cide-ele-input label=\"Expiry Date\" formControlName=\"syusd_doc_expiry_date\"\r\n                      [id]=\"'syusd_doc_expiry_date['+i+']'\" type=\"date\" size=\"sm\">\r\n                    </cide-ele-input>\r\n                  </div>\r\n\r\n                  <!-- Row 3: Verification Status, KYC Status -->\r\n                  <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3\">\r\n                    <cide-ele-select label=\"Verification Status\" [options]=\"documentVerificationStatusOptions()\"\r\n                      formControlName=\"syusd_doc_verification_status_id_sygms\" placeholder=\"Select status\"\r\n                      size=\"sm\" valueKey=\"_id\" labelKey=\"sygms_title\">\r\n                    </cide-ele-select>\r\n\r\n                    <cide-ele-select label=\"KYC Status\" [options]=\"documentKycStatusOptions()\"\r\n                      formControlName=\"syusd_doc_kyc_status_id_sygms\" placeholder=\"Select KYC status\" size=\"sm\"\r\n                      valueKey=\"_id\" labelKey=\"sygms_title\">\r\n                    </cide-ele-select>\r\n                  </div>\r\n                </div>\r\n\r\n                <!-- Right Side: File Upload (1/3 width) -->\r\n                <div class=\"lg:tw-col-span-1\">\r\n                  <div class=\"tw-bg-gray-50 tw-border tw-border-gray-200 tw-rounded-lg tw-p-3 tw-h-full\">\r\n                    \r\n                    <!-- File Upload Input -->\r\n                    <cide-ele-file-input\r\n                      [id]=\"'document-files-' + i\"\r\n                      [multiple]=\"true\"\r\n                      formControlName=\"syusd_photo_group_id_cyfm\"\r\n                      [accept]=\"'.pdf,.jpg,.jpeg,.png,.doc,.docx'\"\r\n                      [autoUpload]=\"true\"\r\n                      [uploadData]=\"getDocumentUploadData(i)\"\r\n                      (change)=\"onDocumentFilesSelected($event, i)\"\r\n                      (uploadSuccess)=\"onDocumentUploadSuccess($event, i)\"\r\n                      (uploadError)=\"onDocumentUploadError($event, i)\"\r\n                      (uploadProgressChange)=\"onDocumentUploadProgress($event, i)\"\r\n                      class=\"tw-mb-3\"\r\n                      size=\"sm\">\r\n                    </cide-ele-file-input>\r\n\r\n                    <!-- Upload Status -->\r\n                    <!-- Upload status is now handled by the file input component itself -->\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          }\r\n        </div>\r\n      </div>\r\n      }\r\n\r\n      @case ('family') {\r\n      <!-- Family Details Section - Compact Design -->\r\n      <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\r\n        <div class=\"tw-flex tw-justify-end tw-items-end tw-mb-3 tw-gap-4\">\r\n          <button cideEleButton variant=\"primary\" size=\"sm\" type=\"button\" (click)=\"addFamilyDetail()\" leftIcon=\"add\" [disabled]=\"!hasAddFamilyDetailRights()\">\r\n            Add Family Member\r\n          </button>\r\n        </div>\r\n\r\n        <div formArrayName=\"core_user_family_details\">\r\n          @for (family of familyDetails(); track $index; let i = $index) {\r\n          <div [formGroupName]=\"i\"\r\n            class=\"tw-bg-white tw-border tw-border-gray-200 tw-rounded-lg tw-mb-4 tw-overflow-hidden tw-transition-all tw-duration-200 hover:tw-shadow-md tw-shadow-sm\">\r\n            \r\n            <!-- Compact Header -->\r\n            <div class=\"tw-bg-gray-50 tw-px-4 tw-py-2 tw-flex tw-justify-between tw-items-center tw-border-b tw-border-gray-200\">\r\n              <h4 class=\"tw-m-0 tw-text-gray-700 tw-text-sm tw-font-medium\">Family Member {{ i + 1 }}</h4>\r\n              <div class=\"tw-flex tw-gap-2\">\r\n                @if (family?._id) {\r\n                <button cideEleButton variant=\"secondary\" size=\"xs\" type=\"button\" (click)=\"shareFamilyDetailRights(i)\"\r\n                  leftIcon=\"share\">\r\n                  Share\r\n                </button>\r\n                }\r\n                @if (!family?._id) {\r\n                <button cideEleButton variant=\"danger\" size=\"xs\" type=\"button\" (click)=\"removeFamilyDetail(i)\" leftIcon=\"delete\">\r\n                  Remove\r\n                </button>\r\n                }\r\n              </div>\r\n            </div>\r\n            \r\n            <!-- Compact Form Content - 3 inputs per row -->\r\n            <div class=\"tw-p-4\">\r\n              <!-- Row 1: Name, User, and Combined Relationship/Active Status (33.33% each) -->\r\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-3 tw-mb-3\">\r\n                <cide-ele-input label=\"Family Member Name\" formControlName=\"syfdl_family_member_name\"\r\n                  placeholder=\"Enter family member full name\" size=\"sm\">\r\n                </cide-ele-input>\r\n\r\n                <cide-ele-select label=\"Family Member User\" [options]=\"userOptions(i)\"\r\n                  formControlName=\"syfdl_family_member_id_user\" placeholder=\"Select family member user\" size=\"sm\"\r\n                  valueKey=\"_id\" labelKey=\"user_fullname\" [searchable]=\"true\"\r\n                  [loading]=\"userSearchLoading()[i] || false\" (searchChange)=\"onUserSearchChange($event, i)\"\r\n                  (change)=\"onUserSelectionChange($event, i)\">\r\n                </cide-ele-select>\r\n\r\n                <!-- Combined Relationship and Active Status (33.33%) -->\r\n                <div class=\"tw-flex tw-flex-row tw-gap-2 tw-items-end\">\r\n                  <div class=\"tw-flex-1\">\r\n                    <cide-ele-select label=\"Relationship\" [options]=\"relationshipOptions()\"\r\n                      formControlName=\"syfdl_relationship_id_sygms\" placeholder=\"Select relationship\" size=\"sm\"\r\n                      valueKey=\"_id\" labelKey=\"sygms_title\">\r\n                    </cide-ele-select>\r\n                  </div>\r\n\r\n                  <div class=\"tw-flex tw-items-center tw-pt-1 tw-flex-shrink-0\">\r\n                    <cide-ele-input formControlName=\"syfdl_isactive\" type=\"checkbox\" label=\"Active\" size=\"sm\">\r\n                    </cide-ele-input>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <!-- Row 2: Blood Group, DOB, and Phone -->\r\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 xl:tw-grid-cols-3 tw-gap-3 tw-mb-3\">\r\n                <cide-ele-select label=\"Blood Group\" [options]=\"bloodGroupOptions()\"\r\n                  formControlName=\"syfdl_blood_group_sygms\" placeholder=\"Select blood group\" size=\"sm\" valueKey=\"_id\"\r\n                  labelKey=\"sygms_title\">\r\n                </cide-ele-select>\r\n\r\n                <cide-ele-input label=\"Date of Birth\" formControlName=\"syfdl_family_member_dob\" type=\"date\" size=\"sm\"\r\n                  [id]=\"'syfdl_family_member_dob['+i+']'\">\r\n                </cide-ele-input>\r\n\r\n                <cide-ele-input label=\"Contact Phone\" formControlName=\"syfdl_contact_phone\" type=\"tel\"\r\n                  placeholder=\"Enter contact phone\" size=\"sm\">\r\n                </cide-ele-input>\r\n              </div>\r\n\r\n              <!-- Row 3: Email, Email ID, and Contact Number -->\r\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 xl:tw-grid-cols-3 tw-gap-3 tw-mb-3\">\r\n                <cide-ele-input label=\"Contact Email\" formControlName=\"syfdl_contact_email\" type=\"email\"\r\n                  placeholder=\"Enter contact email\" size=\"sm\">\r\n                </cide-ele-input>\r\n\r\n                <cide-ele-input label=\"Contact Email ID\" formControlName=\"syfdl_contact_email_id\" type=\"email\"\r\n                  placeholder=\"Enter contact email ID\" size=\"sm\">\r\n                </cide-ele-input>\r\n\r\n                <cide-ele-input label=\"Contact Number\" formControlName=\"syfdl_contact_number\" type=\"tel\"\r\n                  placeholder=\"Enter contact number\" size=\"sm\">\r\n                </cide-ele-input>\r\n              </div>\r\n\r\n            </div>\r\n          </div>\r\n          }\r\n        </div>\r\n      </div>\r\n      }\r\n      }\r\n    </div>\r\n\r\n    <!-- Form Actions -->\r\n    <div\r\n      class=\"tw-flex tw-justify-end tw-gap-4 tw-py-2 tw-bg-white tw-border-t tw-border-gray-200 tw-sticky tw-bottom-0 tw-z-10\">\r\n      <button cideEleButton type=\"button\" variant=\"secondary\" (click)=\"resetForm()\" leftIcon=\"refresh\"\r\n        [disabled]=\"loading()\">\r\n        Reset Form\r\n      </button>\r\n\r\n      <button cideEleButton type=\"submit\" variant=\"primary\" [disabled]=\"loading() || userMasterForm.invalid\"\r\n        [loading]=\"loading()\" leftIcon=\"save\">\r\n        Save User Master\r\n      </button>\r\n    </div>\r\n  </form>\r\n</div>\r\n\r\n<!-- Template Renderers for Role Permissions Grid -->\r\n<ng-template #menuDetailsRendererTemplate let-row=\"row\">\r\n  <div class=\"tw-flex tw-items-center tw-space-x-3 tw-min-w-0\">\r\n    <!-- Menu Icon -->\r\n    <div class=\"tw-flex-shrink-0\">\r\n      @if (row.syme_type === 'module') {\r\n      <cide-ele-icon class=\"tw-text-blue-600 tw-w-4 tw-h-4\">folder</cide-ele-icon>\r\n      } @else if (row.syme_type === 'section') {\r\n      <cide-ele-icon class=\"tw-text-green-600 tw-w-4 tw-h-4\">folder_open</cide-ele-icon>\r\n      } @else if (row.syme_type === 'menu') {\r\n      <cide-ele-icon class=\"tw-text-purple-600 tw-w-4 tw-h-4\">menu</cide-ele-icon>\r\n      } @else {\r\n      <cide-ele-icon class=\"tw-text-gray-600 tw-w-4 tw-h-4\">description</cide-ele-icon>\r\n      }\r\n    </div>\r\n\r\n    <!-- Menu Details -->\r\n    <div class=\"tw-ml-3 tw-min-w-0 tw-flex-1\">\r\n      <div class=\"tw-flex tw-items-center tw-gap-2\">\r\n        <div class=\"tw-text-xs tw-font-medium tw-text-gray-900 tw-truncate\" [title]=\"row.syme_title\">\r\n          {{ row.syme_title || row.menu?.syme_title || row.menu?.syme_menu_name || 'Untitled' }}\r\n        </div>\r\n        <!-- Green pill indicator for parent menus with child permissions -->\r\n        @if (row.syme_type === 'module' || row.syme_type === 'section') {\r\n        @if (hasChildMenusWithPermissions(row._id)) {\r\n        <span\r\n          class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-green-100 tw-text-green-800 tw-whitespace-nowrap\">\r\n          Assigned\r\n        </span>\r\n        }\r\n        }\r\n      </div>\r\n      @if (row.permission?.sygms_name) {\r\n      <div class=\"tw-text-xs tw-text-blue-500 tw-truncate\" [title]=\"row.permission?.sygms_name\">\r\n        {{ row.permission?.sygms_name }}\r\n      </div>\r\n      }\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- Menu Type Renderer Template -->\r\n<ng-template #menuTypeRendererTemplate let-row=\"row\" let-value=\"value\">\r\n  <div class=\"tw-flex tw-items-center tw-justify-center\">\r\n    @if (row.syme_type === 'module') {\r\n    <span\r\n      class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded-full tw-text-xs tw-font-medium tw-bg-blue-100 tw-text-blue-800\">\r\n      Module\r\n    </span>\r\n    } @else if (row.syme_type === 'section') {\r\n    <span\r\n      class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded-full tw-text-xs tw-font-medium tw-bg-green-100 tw-text-green-800\">\r\n      Section\r\n    </span>\r\n    } @else if (row.syme_type === 'menu') {\r\n    <span\r\n      class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded-full tw-text-xs tw-font-medium tw-bg-purple-100 tw-text-purple-800\">\r\n      Menu\r\n    </span>\r\n    } @else {\r\n    <span\r\n      class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded-full tw-text-xs tw-font-medium tw-bg-gray-100 tw-text-gray-800\">\r\n      {{ row.syme_type || 'Unknown' }}\r\n    </span>\r\n    }\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- Permissions Checkbox Renderer Template -->\r\n<ng-template #permissionsCheckboxRendererTemplate let-row=\"row\" let-value=\"value\">\r\n  <div class=\"tw-flex tw-flex-wrap tw-gap-2 tw-max-w-full\">\r\n    @if (row.syme_type === 'menu' && row?.syme_permissions_id_sygms && row?.syme_permissions_id_sygms.length > 0) {\r\n    @for (permissionId of row?.syme_permissions_id_sygms || []; track permissionId) {\r\n    <div class=\"tw-flex tw-items-center tw-space-x-1\">\r\n      <div class=\"tw-flex tw-items-center tw-space-x-1\">\r\n        <input type=\"checkbox\" [checked]=\"isPermissionSelected(row._id, permissionId)\" [disabled]=\"true\"\r\n          class=\"tw-h-4 tw-w-4 tw-text-blue-600 tw-bg-gray-100 tw-border-gray-300 tw-rounded focus:tw-ring-blue-500\">\r\n        <label class=\"tw-text-xs tw-text-gray-700\">\r\n          {{ getPermissionById(permissionId)?.sygms_title || 'Unknown' }}\r\n        </label>\r\n      </div>\r\n    </div>\r\n    }\r\n    } @else {\r\n    <!-- Show green checkmark for parent menus with child permissions -->\r\n    @if (row.syme_type === 'module' || row.syme_type === 'section' || row.syme_type === 'title') {\r\n    @if (hasChildMenusWithPermissions(row._id)) {\r\n    <div class=\"tw-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-bg-green-100 tw-rounded-full\">\r\n      <cide-ele-icon class=\"tw-text-green-600\" size=\"xs\">\r\n        check\r\n      </cide-ele-icon>\r\n    </div>\r\n    } @else {\r\n    <span class=\"tw-text-xs tw-text-gray-400\">N/A</span>\r\n    }\r\n    } @else {\r\n    <span class=\"tw-text-xs tw-text-gray-400\">N/A</span>\r\n    }\r\n    }\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- Menu Rights Permissions Renderer Template -->\r\n<ng-template #menuRightsPermissionsRendererTemplate let-row=\"row\" let-value=\"value\">\r\n  <div class=\"tw-flex tw-flex-wrap tw-gap-2 tw-max-w-full\">\r\n    <!-- Role Rights Display -->\r\n    @if (row.role_rights && row.role_rights.length > 0) {\r\n    <div class=\"tw-mb-2\">\r\n      <div class=\"tw-text-xs tw-text-gray-500 tw-mb-1\">Role Rights:</div>\r\n      <div class=\"tw-flex tw-flex-wrap tw-gap-1\">\r\n        @for (right of row.role_rights; track $index) {\r\n        <span class=\"tw-inline-block tw-px-2 tw-py-1 tw-text-xs tw-bg-blue-100 tw-text-blue-800 tw-rounded\">\r\n          {{ right }}\r\n        </span>\r\n        }\r\n      </div>\r\n    </div>\r\n    }\r\n\r\n\r\n    <!-- Exception Indicator -->\r\n    @if (row.hasException) {\r\n    <div class=\"tw-mt-2\">\r\n      <span class=\"tw-inline-block tw-px-2 tw-py-1 tw-text-xs tw-bg-yellow-100 tw-text-yellow-800 tw-rounded\">\r\n        Override\r\n      </span>\r\n    </div>\r\n    } @else {\r\n    <div class=\"tw-mt-2\">\r\n      <span class=\"tw-text-xs tw-text-gray-400\">Default</span>\r\n    </div>\r\n    }\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- Permissions Renderer Template -->\r\n<ng-template #permissionsRendererTemplate let-row=\"row\" let-value=\"value\">\r\n  <div class=\"tw-flex tw-flex-wrap tw-gap-2 tw-max-w-full\">\r\n    @if (row._permissionValues && Object.keys(row._permissionValues).length > 0) {\r\n    @for (permissionId of Object.keys(row._permissionValues); track permissionId) {\r\n    <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\n      <cide-ele-input type=\"checkbox\" [ngModel]=\"row._permissionValues[permissionId].checked\"\r\n        (ngModelChange)=\"onPermissionChangeSafe($event, row, permissionId)\"\r\n        [id]=\"'permission-' + row._id + '-' + permissionId\" class=\"tw-h-4 tw-w-4\">\r\n      </cide-ele-input>\r\n      <label [for]=\"'permission-' + row._id + '-' + permissionId\" \r\n        class=\"tw-text-xs tw-cursor-pointer\"\r\n        [ngClass]=\"{\r\n          'tw-text-gray-700': row._permissionValues[permissionId].modified === row._permissionValues[permissionId].actual,\r\n          'tw-text-blue-600 tw-font-semibold': row._permissionValues[permissionId].modified !== row._permissionValues[permissionId].actual\r\n        }\">\r\n        {{ row._permissionValues[permissionId].permission?.sygms_title }}\r\n        @if (row._permissionValues[permissionId].modified !== row._permissionValues[permissionId].actual) {\r\n        <span class=\"tw-text-xs tw-text-orange-500 tw-ml-1\" title=\"Modified from role permission\">\r\n          ({{ row._permissionValues[permissionId].actual ? '\u2713' : '\u2717' }})\r\n        </span>\r\n        }\r\n      </label>\r\n    </div>\r\n    }\r\n    } @else {\r\n    <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\n      <cide-ele-icon class=\"tw-text-gray-400 tw-animate-spin\" size=\"xs\">refresh</cide-ele-icon>\r\n      <span class=\"tw-text-xs tw-text-gray-400\">Loading permissions...</span>\r\n    </div>\r\n    }\r\n  </div>\r\n</ng-template>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1$2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CideInputComponent, selector: "cide-ele-input", inputs: ["fill", "label", "labelHide", "disabled", "clearInput", "labelPlacement", "labelDir", "placeholder", "leadingIcon", "trailingIcon", "helperText", "helperTextCollapse", "hideHelperAndErrorText", "errorText", "maxlength", "minlength", "required", "autocapitalize", "autocomplete", "type", "width", "id", "ngModel", "option", "min", "max", "step", "size"], outputs: ["ngModelChange"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "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" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCoreUserCreateComponent, decorators: [{
             type: Component,
@@ -15467,6 +15695,7 @@ class CideCoreUserListComponent {
     router = inject(Router);
     userMasterService = inject(CideCoreUserMasterService);
     appState = inject(AppStateHelperService);
+    rightsService = inject(RightsService);
     // ViewChild reference to the grid component
     gridComponent;
     // Template references for custom renderers
@@ -15491,6 +15720,11 @@ class CideCoreUserListComponent {
     sortColumn = signal('user_fullname', ...(ngDevMode ? [{ debugName: "sortColumn" }] : []));
     sortDirection = signal('asc', ...(ngDevMode ? [{ debugName: "sortDirection" }] : []));
     // Server-side filtering state
+    // 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" }] : []));
     // Grid configuration signal for server-side pagination
     gridConfig = signal({
         id: 'user-master-list-grid',
@@ -15574,6 +15808,8 @@ class CideCoreUserListComponent {
     templateRenderers = {};
     ngOnInit() {
         console.log('🔧 USER MASTER LIST: Component initializing');
+        // Initialize rights for user management
+        this.rightsService.initializeRights('auth_user_mst');
         this.loading.set(false);
         this.loadUsersFromServer(); // Use server-side loading
     }
@@ -15748,6 +15984,10 @@ class CideCoreUserListComponent {
         this.router.navigate(['/control-panel/user-master/view', queryData]);
     }
     onEditUser(user) {
+        if (!this.rightsService.hasRight('EDIT')) {
+            this.error.set('You do not have permission to edit users');
+            return;
+        }
         console.log('✏️ ACTIONS: Editing user:', user);
         const queryData = generateStringFromObject({ user_id: user._id });
         this.router.navigate(['/control-panel/user-master/edit', queryData]);
@@ -15768,6 +16008,10 @@ class CideCoreUserListComponent {
         this.router.navigate(['/control-panel/user-master/family', queryData]);
     }
     onResetPassword(user) {
+        if (!this.rightsService.hasRight('EDIT')) {
+            this.error.set('You do not have permission to reset passwords');
+            return;
+        }
         console.log('🔑 ACTIONS: Resetting password for user:', user);
         if (confirm(`Are you sure you want to reset password for ${user.user_fullname}?`)) {
             console.log('Password reset confirmed for user:', user._id);
@@ -15784,6 +16028,10 @@ class CideCoreUserListComponent {
         }
     }
     onDeleteUser(user) {
+        if (!this.rightsService.hasRight('DELETE')) {
+            this.error.set('You do not have permission to delete users');
+            return;
+        }
         console.log('🗑️ ACTIONS: Deleting user:', user);
         if (confirm(`Are you sure you want to delete ${user.user_fullname}? This action cannot be undone.`)) {
             if (confirm('This will permanently delete the user and all associated data. Are you absolutely sure?')) {
@@ -15792,6 +16040,10 @@ class CideCoreUserListComponent {
         }
     }
     onAddUser() {
+        if (!this.rightsService.hasRight('CREATE')) {
+            this.error.set('You do not have permission to create users');
+            return;
+        }
         console.log('➕ NAVIGATION: Adding new user');
         this.router.navigate(['/control-panel/user-master/create']);
     }
@@ -15945,7 +16197,7 @@ class CideCoreUserListComponent {
         }
     }
     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 Master List Container -->\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\">User Master Management</h5>\n            <p class=\"tw-text-sm tw-text-gray-600\">Manage and view all user master records in the system</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>", 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"] }] });
+    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 Master List Container -->\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\">User Master Management</h5>\n            <p class=\"tw-text-sm tw-text-gray-600\">Manage and view all user master records in the system</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          @if (canCreate()) {\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          }\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>", 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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCoreUserListComponent, decorators: [{
             type: Component,
@@ -15957,7 +16209,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                         CideSelectComponent,
                         CideEleDataGridComponent,
                         CideEleDropdownComponent
-                    ], template: "<!-- User Master List Container -->\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\">User Master Management</h5>\n            <p class=\"tw-text-sm tw-text-gray-600\">Manage and view all user master records in the system</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>", 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 Master List Container -->\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\">User Master Management</h5>\n            <p class=\"tw-text-sm tw-text-gray-600\">Manage and view all user master records in the system</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          @if (canCreate()) {\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          }\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>", 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"] }]
         }], propDecorators: { gridComponent: [{
                 type: ViewChild,
                 args: [CideEleDataGridComponent]
@@ -18168,6 +18420,7 @@ class CideCoreUserRoleListComponent {
     appState = inject(AppStateHelperService);
     notificationService = inject(NotificationService);
     confirmationService = inject(ConfirmationService);
+    rightsService = inject(RightsService);
     // Modern ViewChild signals for template renderers (Angular 20 approach)
     userRoleDetailsRendererTemplate = viewChild.required('userRoleDetailsRendererTemplate');
     entityRendererTemplate = viewChild.required('entityRendererTemplate');
@@ -18279,7 +18532,15 @@ class CideCoreUserRoleListComponent {
         compact: false,
         tableClass: 'tw-table-fixed tw-w-full tw-rounded-none'
     }, ...(ngDevMode ? [{ debugName: "gridConfig" }] : []));
+    // 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" }] : []));
+    canToggleStatus = computed(() => this.rightsService.hasRight('TOGGLE_STATUS'), ...(ngDevMode ? [{ debugName: "canToggleStatus" }] : []));
     ngOnInit() {
+        // Initialize rights for user role management
+        this.rightsService.initializeRights('user_role');
         console.log('👥 User Role List Component initialized');
         this.loadUserRoles();
     }
@@ -18404,23 +18665,39 @@ class CideCoreUserRoleListComponent {
     }
     // User Role actions
     createUserRole() {
+        if (!this.rightsService.hasRight('CREATE')) {
+            this.notificationService.error('You do not have permission to create user roles');
+            return;
+        }
         console.log('➕ Navigating to create user role');
         this.notificationService.info('Opening user role creation form.');
         this.router.navigate(['/control-panel/user-role/create']);
     }
     viewUserRole(userRole) {
+        if (!this.rightsService.hasRight('VIEW')) {
+            this.notificationService.error('You do not have permission to view user roles');
+            return;
+        }
         console.log('👁️ Viewing user role:', userRole);
         this.notificationService.info(`Opening user role "${userRole.syusrol_role_name}" for viewing.`);
         const queryParams = generateStringFromObject({ syusrol_id: userRole._id });
         this.router.navigate(['/control-panel/user-role/view', queryParams]);
     }
     editUserRole(userRole) {
+        if (!this.rightsService.hasRight('EDIT')) {
+            this.notificationService.error('You do not have permission to edit user roles');
+            return;
+        }
         console.log('✏️ Editing user role:', userRole);
         this.notificationService.info(`Opening user role "${userRole.syusrol_role_name}" for editing.`);
         const queryParams = generateStringFromObject({ syusrol_id: userRole._id });
         this.router.navigate(['/control-panel/user-role/edit', queryParams]);
     }
     deleteUserRole(userRole) {
+        if (!this.rightsService.hasRight('DELETE')) {
+            this.notificationService.error('You do not have permission to delete user roles');
+            return;
+        }
         console.log('🗑️ DELETE METHOD CALLED - Deleting user role:', userRole);
         // Show confirmation dialog
         console.log('🔔 Showing confirmation dialog for delete');
@@ -18458,6 +18735,10 @@ class CideCoreUserRoleListComponent {
         });
     }
     toggleUserRoleStatus(userRole) {
+        if (!this.rightsService.hasRight('TOGGLE_STATUS')) {
+            this.notificationService.error('You do not have permission to toggle user role status');
+            return;
+        }
         console.log('🔄 Toggling user role status:', userRole);
         const action = userRole.syusrol_isactive ? 'deactivate' : 'activate';
         const actionText = userRole.syusrol_isactive ? 'Deactivate' : 'Activate';
@@ -18640,6 +18921,7 @@ class CideCoreUserRoleFormComponent {
     confirmationService = inject(ConfirmationService);
     fb = inject(FormBuilder);
     cdr = inject(ChangeDetectorRef);
+    rightsService = inject(RightsService);
     destroy$ = new Subject();
     // State management
     userRoleForm;
@@ -18771,6 +19053,8 @@ class CideCoreUserRoleFormComponent {
         return renderers;
     }, ...(ngDevMode ? [{ debugName: "templateRenderers" }] : []));
     ngOnInit() {
+        // Initialize rights for user role management
+        this.rightsService.initializeRights('user_role');
         console.log('👥 User Role Form Component initialized');
         this.initializeForm();
         this.loadMasterData();
@@ -19152,6 +19436,11 @@ class CideCoreUserRoleFormComponent {
             this.router.navigate(['/control-panel/user-role']);
             return;
         }
+        const requiredRight = this.isEditMode() ? 'EDIT' : 'CREATE';
+        if (!this.rightsService.hasRight(requiredRight)) {
+            this.notificationService.error(`You do not have permission to ${this.isEditMode() ? 'edit' : 'create'} user roles`);
+            return;
+        }
         console.log("userRoleForm", this.userRoleForm);
         if (this.userRoleForm.invalid) {
             this.notificationService.error('Please fill in all required fields correctly.');
@@ -19515,7 +19804,7 @@ class CideCoreUserRoleFormComponent {
         }, 100);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCoreUserRoleFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideCoreUserRoleFormComponent, isStandalone: true, selector: "cide-core-user-role-form", viewQueries: [{ propertyName: "menuDetailsRendererTemplate", first: true, predicate: ["menuDetailsRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "permissionsCheckboxRendererTemplate", first: true, predicate: ["permissionsCheckboxRendererTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- User Role Form Container -->\r\n<div class=\"tw-w-full tw-h-full\">\r\n  <form class=\"tw-max-w-7xl  tw-mx-auto tw-bg-transparent tw-h-full tw-flex tw-flex-col\" [formGroup]=\"userRoleForm\" [class.tw-opacity-60]=\"loading()\" (ngSubmit)=\"onSubmit()\">\r\n\r\n    <!-- Error Message -->\r\n    @if (error()) {\r\n      <div class=\"tw-mb-6 tw-p-4 tw-bg-red-50 tw-border tw-border-red-200 tw-rounded-md\">\r\n        <div class=\"tw-flex tw-items-start\">\r\n          <cide-ele-icon name=\"error\" class=\"tw-text-red-400 tw-w-5 tw-h-5 tw-mt-0.5 tw-flex-shrink-0\"></cide-ele-icon>\r\n          <div class=\"tw-ml-3\">\r\n            <h3 class=\"tw-text-sm tw-font-medium tw-text-red-800 tw-m-0\">Error</h3>\r\n            <p class=\"tw-text-sm tw-text-red-700 tw-mt-1 tw-m-0\">{{ error() }}</p>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    }\r\n    <!-- User Role Basic Information Section -->\r\n    <div class=\"tw-py-2 tw-border-b-0 tw-mb-0  tw-p-3\">\r\n\r\n      <!-- Basic Fields -->\r\n      <div class=\"tw-grid tw-grid-cols-1 xl:tw-grid-cols-2 lg:tw-grid-cols-2 md:tw-grid-cols-1 tw-gap-6 tw-mb-0\">\r\n        <!-- Left Column: Role Name -->\r\n        <div>\r\n          <cide-ele-input \r\n            id=\"syusrol_role_name\" \r\n            label=\"Role Name *\" \r\n            formControlName=\"syusrol_role_name\"\r\n            placeholder=\"Enter role name\" \r\n            [maxlength]=\"50\" \r\n            size=\"md\"\r\n            [disabled]=\"isViewMode()\">\r\n          </cide-ele-input>\r\n        </div>\r\n\r\n        <!-- Right Column: Description -->\r\n        <div>\r\n          <cide-ele-textarea \r\n            id=\"syusrol_role_description\" \r\n            label=\"Description *\" \r\n            formControlName=\"syusrol_role_description\"\r\n            placeholder=\"Enter role description\" \r\n            rows=\"3\"\r\n            [maxlength]=\"200\"\r\n            [disabled]=\"isViewMode()\">\r\n          </cide-ele-textarea>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Active Status Row -->\r\n      <div class=\"tw-mb-0\">\r\n        <cide-ele-input \r\n          id=\"syusrol_isactive\" \r\n          label=\"Active Status\" \r\n          formControlName=\"syusrol_isactive\"\r\n          type=\"checkbox\" \r\n          size=\"md\"\r\n          [disabled]=\"isViewMode()\">\r\n        </cide-ele-input>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Role Rights Section -->\r\n    <div class=\"tw-pt-2 tw-border-b-0 tw-mb-0 tw-flex-1 tw-flex tw-flex-col tw-min-h-0\">\r\n\r\n      <!-- Role Rights Grid -->\r\n      <div class=\"tw-flex-1 tw-min-h-0 tw-w-full\" style=\"height: 400px; max-height: 900px;\">\r\n        <cide-ele-data-grid \r\n          [config]=\"roleRightsGridConfig()\" \r\n          [templateRenderers]=\"templateRenderers()\"\r\n          (gridEvent)=\"onRoleRightsGridEvent($event)\"\r\n          class=\"tw-h-full tw-w-full\">\r\n        </cide-ele-data-grid>\r\n      </div>\r\n\r\n      <!-- Role Rights Form (Hidden but functional) -->\r\n      <div [formGroup]=\"roleRightsForm\" class=\"tw-hidden\">\r\n        <div formArrayName=\"roleRights\">\r\n        @for (right of roleRightsArray.controls; track $index; let i = $index) {\r\n          <div [formGroupName]=\"i\">\r\n            <cide-ele-select formControlName=\"syusrgt_menu_id_syme\">\r\n              <option value=\"\">Select Menu</option>\r\n              @for (menu of menus(); track menu._id) {\r\n                <option [value]=\"menu._id\">{{ menu.syme_title }}</option>\r\n              }\r\n            </cide-ele-select>\r\n            <cide-ele-select formControlName=\"syusrgt_role_permissions_id_sygms\">\r\n              <option value=\"\">Select Permission</option>\r\n              @for (permission of permissions(); track permission._id) {\r\n                <option [value]=\"permission._id\">{{ permission.sygms_name }}</option>\r\n              }\r\n            </cide-ele-select>\r\n            <cide-ele-input formControlName=\"syusrgt_isactive\" type=\"checkbox\"></cide-ele-input>\r\n          </div>\r\n        }\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Form Actions -->\r\n    <div class=\"tw-flex tw-justify-between tw-items-center tw-p-3 tw-gap-4 tw-py-2 tw-bg-white tw-border-t tw-border-gray-200 tw-sticky tw-bottom-0 tw-z-10\">\r\n      <!-- Error Message (Left Side) -->\r\n      <cide-form-field-error [formGroup]=\"userRoleForm\"></cide-form-field-error>\r\n      \r\n      <!-- Action Buttons (Right Side) -->\r\n      <div class=\"tw-flex tw-gap-4\">\r\n        <button cideEleButton type=\"button\" variant=\"secondary\" (click)=\"onCancel()\" leftIcon=\"arrow_back\"\r\n          [disabled]=\"loading()\">\r\n          {{ isViewMode() ? 'Close' : 'Cancel' }}\r\n        </button>\r\n\r\n        @if (!isViewMode()) {\r\n          <button cideEleButton type=\"submit\" variant=\"primary\" [disabled]=\"loading() || !isFormReadyToSave\"\r\n            [loading]=\"loading()\" leftIcon=\"save\">\r\n            {{ submitButtonText }}\r\n          </button>\r\n        }\r\n      </div>\r\n    </div>\r\n  </form>\r\n</div>\r\n\r\n<!-- Template Renderers for Role Rights Grid -->\r\n<ng-template #menuDetailsRendererTemplate let-row=\"row\" let-value=\"value\">\r\n  <div class=\"tw-flex tw-items-center tw-min-w-0\">\r\n    <!-- Menu Icon -->\r\n    <div class=\"tw-flex-shrink-0\">\r\n      <cide-ele-icon \r\n        class=\"tw-text-gray-400\" \r\n        size=\"xs\">\r\n        {{ row.syme_icon || 'folder_open' }}\r\n      </cide-ele-icon>\r\n    </div>\r\n    \r\n    <!-- Menu Details -->\r\n    <div class=\"tw-ml-3 tw-min-w-0 tw-flex-1\">\r\n      <div class=\"tw-flex tw-items-center tw-gap-2\">\r\n        <div class=\"tw-text-xs tw-font-medium tw-text-gray-900 tw-truncate\" \r\n             [title]=\"row.syme_title\">\r\n          {{ row.syme_title || row.menu?.syme_title || row.menu?.syme_menu_name || 'Untitled' }}\r\n        </div>\r\n        <!-- Green pill indicator for parent menus with child permissions -->\r\n        @if (row.syme_type === 'module' || row.syme_type === 'section') {\r\n          @if (hasChildMenusWithPermissions(row._id)) {\r\n            <span class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-green-100 tw-text-green-800 tw-whitespace-nowrap\">\r\n              Assigned\r\n            </span>\r\n          }\r\n        }\r\n      </div>\r\n      @if (row.permission?.sygms_name) {\r\n        <div class=\"tw-text-xs tw-text-blue-500 tw-truncate\" \r\n             [title]=\"row.permission?.sygms_name\">\r\n          {{ row.permission?.sygms_name }}\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n\r\n<!-- Permissions Checkbox Renderer Template -->\r\n<ng-template #permissionsCheckboxRendererTemplate let-row=\"row\" let-value=\"value\">\r\n  <div class=\"tw-flex tw-flex-wrap tw-gap-2 tw-max-w-full\">\r\n    @if (row.syme_type === 'menu' && row?.syme_permissions_id_sygms && row?.syme_permissions_id_sygms.length > 0) {\r\n      @for (permissionId of row?.syme_permissions_id_sygms || []; track permissionId) {\r\n         <div class=\"tw-flex tw-items-center tw-space-x-1\">\r\n           <cide-ele-input \r\n             type=\"checkbox\"\r\n             [label]=\"getPermissionById(permissionId)?.sygms_name || 'Unknown'\"\r\n             [ngModel]=\"isPermissionSelected(row._id, permissionId)\"\r\n             (ngModelChange)=\"onPermissionCheckboxChange(row._id, permissionId, $event)\"\r\n             size=\"xs\"\r\n             [disabled]=\"isViewMode()\">\r\n           </cide-ele-input>\r\n         </div>\r\n      }\r\n    } @else {\r\n      <!-- Show green checkmark for parent menus with child permissions -->\r\n      @if (row.syme_type === 'module' || row.syme_type === 'section' || row.syme_type === 'title') {\r\n        @if (hasChildMenusWithPermissions(row._id)) {\r\n          <div class=\"tw-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-bg-green-100 tw-rounded-full\" \r\n               [title]=\"hasParentViewRight(row._id) ? 'View right automatically enabled' : 'Child permissions assigned'\">\r\n            <cide-ele-icon \r\n              class=\"tw-text-green-600\" \r\n              size=\"xs\">\r\n              check\r\n            </cide-ele-icon>\r\n          </div>\r\n        } @else if (hasParentViewRight(row._id)) {\r\n          <!-- Show green checkmark for parent with view right -->\r\n          <cide-ele-icon \r\n            class=\"tw-text-green-600\" \r\n            size=\"xs\"\r\n            title=\"View right automatically enabled\">\r\n            check\r\n          </cide-ele-icon>\r\n        } @else {\r\n          <span class=\"tw-text-xs tw-text-gray-400\">N/A</span>\r\n        }\r\n      } @else {\r\n        <span class=\"tw-text-xs tw-text-gray-400\">N/A</span>\r\n      }\r\n    }\r\n  </div>\r\n</ng-template>", styles: [":host{@apply tw-w-full tw-h-full tw-flex tw-flex-col;}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1$2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideInputComponent, selector: "cide-ele-input", inputs: ["fill", "label", "labelHide", "disabled", "clearInput", "labelPlacement", "labelDir", "placeholder", "leadingIcon", "trailingIcon", "helperText", "helperTextCollapse", "hideHelperAndErrorText", "errorText", "maxlength", "minlength", "required", "autocapitalize", "autocomplete", "type", "width", "id", "ngModel", "option", "min", "max", "step", "size"], outputs: ["ngModelChange"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput", "options", "multiple", "searchable", "showSearchInput", "loading", "valueKey", "labelKey", "treeView"], outputs: ["ngModelChange", "change", "searchChange"] }, { kind: "component", type: CideTextareaComponent, selector: "cide-ele-textarea", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "minlength", "maxlength", "rows", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput"], outputs: ["ngModelChange"] }, { kind: "component", type: CideEleDataGridComponent, selector: "cide-ele-data-grid", inputs: ["config", "templateRenderers", "customFormatters", "actionHandlers", "serverSidePagination", "totalServerItems", "currentServerPage", "currentServerPageSize", "dragDropEnabled"], outputs: ["gridEvent"] }, { kind: "component", type: CideFormFieldErrorComponent, selector: "cide-form-field-error", inputs: ["control", "formGroup", "fieldName", "customMessages"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideCoreUserRoleFormComponent, isStandalone: true, selector: "cide-core-user-role-form", viewQueries: [{ propertyName: "menuDetailsRendererTemplate", first: true, predicate: ["menuDetailsRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "permissionsCheckboxRendererTemplate", first: true, predicate: ["permissionsCheckboxRendererTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- User Role Form Container -->\r\n<div class=\"tw-w-full tw-h-full\">\r\n  <form class=\"tw-max-w-7xl  tw-mx-auto tw-bg-transparent tw-h-full tw-flex tw-flex-col\" [formGroup]=\"userRoleForm\" [class.tw-opacity-60]=\"loading()\" (ngSubmit)=\"onSubmit()\">\r\n\r\n    <!-- Error Message -->\r\n    @if (error()) {\r\n      <div class=\"tw-mb-6 tw-p-4 tw-bg-red-50 tw-border tw-border-red-200 tw-rounded-md\">\r\n        <div class=\"tw-flex tw-items-start\">\r\n          <cide-ele-icon name=\"error\" class=\"tw-text-red-400 tw-w-5 tw-h-5 tw-mt-0.5 tw-flex-shrink-0\"></cide-ele-icon>\r\n          <div class=\"tw-ml-3\">\r\n            <h3 class=\"tw-text-sm tw-font-medium tw-text-red-800 tw-m-0\">Error</h3>\r\n            <p class=\"tw-text-sm tw-text-red-700 tw-mt-1 tw-m-0\">{{ error() }}</p>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    }\r\n    <!-- User Role Basic Information Section -->\r\n    <div class=\"tw-py-2 tw-border-b-0 tw-mb-0  tw-p-3\">\r\n\r\n      <!-- Basic Fields -->\r\n      <div class=\"tw-grid tw-grid-cols-1 xl:tw-grid-cols-2 lg:tw-grid-cols-2 md:tw-grid-cols-1 tw-gap-6 tw-mb-0\">\r\n        <!-- Left Column: Role Name -->\r\n        <div>\r\n          <cide-ele-input \r\n            id=\"syusrol_role_name\" \r\n            label=\"Role Name *\" \r\n            formControlName=\"syusrol_role_name\"\r\n            placeholder=\"Enter role name\" \r\n            [maxlength]=\"50\" \r\n            size=\"md\"\r\n            [disabled]=\"isViewMode()\">\r\n          </cide-ele-input>\r\n        </div>\r\n\r\n        <!-- Right Column: Description -->\r\n        <div>\r\n          <cide-ele-textarea \r\n            id=\"syusrol_role_description\" \r\n            label=\"Description *\" \r\n            formControlName=\"syusrol_role_description\"\r\n            placeholder=\"Enter role description\" \r\n            rows=\"3\"\r\n            [maxlength]=\"200\"\r\n            [disabled]=\"isViewMode()\">\r\n          </cide-ele-textarea>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Active Status Row -->\r\n      <div class=\"tw-mb-0\">\r\n        <cide-ele-input \r\n          id=\"syusrol_isactive\" \r\n          label=\"Active Status\" \r\n          formControlName=\"syusrol_isactive\"\r\n          type=\"checkbox\" \r\n          size=\"md\"\r\n          [disabled]=\"isViewMode()\">\r\n        </cide-ele-input>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Role Rights Section -->\r\n    <div class=\"tw-pt-2 tw-border-b-0 tw-mb-0 tw-flex-1 tw-flex tw-flex-col tw-min-h-0\">\r\n\r\n      <!-- Role Rights Grid -->\r\n      <div class=\"tw-flex-1 tw-min-h-0 tw-w-full\" style=\"height: 400px; max-height: 900px;\">\r\n        <cide-ele-data-grid \r\n          [config]=\"roleRightsGridConfig()\" \r\n          [templateRenderers]=\"templateRenderers()\"\r\n          (gridEvent)=\"onRoleRightsGridEvent($event)\"\r\n          class=\"tw-h-full tw-w-full\">\r\n        </cide-ele-data-grid>\r\n      </div>\r\n\r\n      <!-- Role Rights Form (Hidden but functional) -->\r\n      <div [formGroup]=\"roleRightsForm\" class=\"tw-hidden\">\r\n        <div formArrayName=\"roleRights\">\r\n        @for (right of roleRightsArray.controls; track $index; let i = $index) {\r\n          <div [formGroupName]=\"i\">\r\n            <cide-ele-select formControlName=\"syusrgt_menu_id_syme\">\r\n              <option value=\"\">Select Menu</option>\r\n              @for (menu of menus(); track menu._id) {\r\n                <option [value]=\"menu._id\">{{ menu.syme_title }}</option>\r\n              }\r\n            </cide-ele-select>\r\n            <cide-ele-select formControlName=\"syusrgt_role_permissions_id_sygms\">\r\n              <option value=\"\">Select Permission</option>\r\n              @for (permission of permissions(); track permission._id) {\r\n                <option [value]=\"permission._id\">{{ permission.sygms_name }}</option>\r\n              }\r\n            </cide-ele-select>\r\n            <cide-ele-input formControlName=\"syusrgt_isactive\" type=\"checkbox\"></cide-ele-input>\r\n          </div>\r\n        }\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Form Actions -->\r\n    <div class=\"tw-flex tw-justify-between tw-items-center tw-p-3 tw-gap-4 tw-py-2 tw-bg-white tw-border-t tw-border-gray-200 tw-sticky tw-bottom-0 tw-z-10\">\r\n      <!-- Error Message (Left Side) -->\r\n      <cide-form-field-error [formGroup]=\"userRoleForm\"></cide-form-field-error>\r\n      \r\n      <!-- Action Buttons (Right Side) -->\r\n      <div class=\"tw-flex tw-gap-4\">\r\n        <button cideEleButton type=\"button\" variant=\"secondary\" (click)=\"onCancel()\" leftIcon=\"arrow_back\"\r\n          [disabled]=\"loading()\">\r\n          {{ isViewMode() ? 'Close' : 'Cancel' }}\r\n        </button>\r\n\r\n        @if (!isViewMode()) {\r\n          <button cideEleButton type=\"submit\" variant=\"primary\" [disabled]=\"loading() || !isFormReadyToSave\"\r\n            [loading]=\"loading()\" leftIcon=\"save\">\r\n            {{ submitButtonText }}\r\n          </button>\r\n        }\r\n      </div>\r\n    </div>\r\n  </form>\r\n</div>\r\n\r\n<!-- Template Renderers for Role Rights Grid -->\r\n<ng-template #menuDetailsRendererTemplate let-row=\"row\" let-value=\"value\">\r\n  <div class=\"tw-flex tw-items-center tw-min-w-0\">\r\n    <!-- Menu Icon -->\r\n    <div class=\"tw-flex-shrink-0\">\r\n      <cide-ele-icon \r\n        class=\"tw-text-gray-400\" \r\n        size=\"xs\">\r\n        {{ row.syme_icon || 'folder_open' }}\r\n      </cide-ele-icon>\r\n    </div>\r\n    \r\n    <!-- Menu Details -->\r\n    <div class=\"tw-ml-3 tw-min-w-0 tw-flex-1\">\r\n      <div class=\"tw-flex tw-items-center tw-gap-2\">\r\n        <div class=\"tw-text-xs tw-font-medium tw-text-gray-900 tw-truncate\" \r\n             [title]=\"row.syme_title\">\r\n          {{ row.syme_title || row.menu?.syme_title || row.menu?.syme_menu_name || 'Untitled' }}\r\n        </div>\r\n        <!-- Green pill indicator for parent menus with child permissions -->\r\n        @if (row.syme_type === 'module' || row.syme_type === 'section') {\r\n          @if (hasChildMenusWithPermissions(row._id)) {\r\n            <span class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-green-100 tw-text-green-800 tw-whitespace-nowrap\">\r\n              Assigned\r\n            </span>\r\n          }\r\n        }\r\n      </div>\r\n      @if (row.permission?.sygms_name) {\r\n        <div class=\"tw-text-xs tw-text-blue-500 tw-truncate\" \r\n             [title]=\"row.permission?.sygms_name\">\r\n          {{ row.permission?.sygms_name }}\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n\r\n<!-- Permissions Checkbox Renderer Template -->\r\n<ng-template #permissionsCheckboxRendererTemplate let-row=\"row\" let-value=\"value\">\r\n  <div class=\"tw-flex tw-flex-wrap tw-gap-2 tw-max-w-full\">\r\n    @if (row.syme_type === 'menu' && row?.syme_permissions_id_sygms && row?.syme_permissions_id_sygms.length > 0) {\r\n      @for (permissionId of row?.syme_permissions_id_sygms || []; track permissionId) {\r\n         <div class=\"tw-flex tw-items-center tw-space-x-1\">\r\n           <cide-ele-input \r\n             type=\"checkbox\"\r\n             [label]=\"getPermissionById(permissionId)?.sygms_name || 'Unknown'\"\r\n             [ngModel]=\"isPermissionSelected(row._id, permissionId)\"\r\n             (ngModelChange)=\"onPermissionCheckboxChange(row._id, permissionId, $event)\"\r\n             size=\"xs\"\r\n             [disabled]=\"isViewMode()\">\r\n           </cide-ele-input>\r\n         </div>\r\n      }\r\n    } @else {\r\n      <!-- Show green checkmark for parent menus with child permissions -->\r\n      @if (row.syme_type === 'module' || row.syme_type === 'section' || row.syme_type === 'title') {\r\n        @if (hasChildMenusWithPermissions(row._id)) {\r\n          <div class=\"tw-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-bg-green-100 tw-rounded-full\" \r\n               [title]=\"hasParentViewRight(row._id) ? 'View right automatically enabled' : 'Child permissions assigned'\">\r\n            <cide-ele-icon \r\n              class=\"tw-text-green-600\" \r\n              size=\"xs\">\r\n              check\r\n            </cide-ele-icon>\r\n          </div>\r\n        } @else if (hasParentViewRight(row._id)) {\r\n          <!-- Show green checkmark for parent with view right -->\r\n          <cide-ele-icon \r\n            class=\"tw-text-green-600\" \r\n            size=\"xs\"\r\n            title=\"View right automatically enabled\">\r\n            check\r\n          </cide-ele-icon>\r\n        } @else {\r\n          <span class=\"tw-text-xs tw-text-gray-400\">N/A</span>\r\n        }\r\n      } @else {\r\n        <span class=\"tw-text-xs tw-text-gray-400\">N/A</span>\r\n      }\r\n    }\r\n  </div>\r\n</ng-template>", styles: [":host{@apply tw-w-full tw-h-full tw-flex tw-flex-col;}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1$2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideInputComponent, selector: "cide-ele-input", inputs: ["fill", "label", "labelHide", "disabled", "clearInput", "labelPlacement", "labelDir", "placeholder", "leadingIcon", "trailingIcon", "helperText", "helperTextCollapse", "hideHelperAndErrorText", "errorText", "maxlength", "minlength", "required", "autocapitalize", "autocomplete", "type", "width", "id", "ngModel", "option", "min", "max", "step", "size"], outputs: ["ngModelChange"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "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: [{
             type: Component,