cloud-ide-core 2.0.94 → 2.0.95

package/fesm2022/cloud-ide-core.mjs

@@ -4004,8 +4004,6 @@ class CideCoreDesignationListComponent {
                     const designationData = response?.data || [];
                     this.designations.set(designationData);
                     this.totalItems.set(response.total || 0);
-                    // Extract and set departments and grade levels from populated data
-                    this.extractAndSetDepartmentsAndGradeLevels(designationData);
                     // Update grid data with hierarchical structure
                     this.updateGridData(designationData);
                 }
@@ -4053,9 +4051,12 @@ class CideCoreDesignationListComponent {
                 if (response?.success) {
                     console.log('✅ Departments loaded successfully:', response.data);
                     const departmentData = response?.data || [];
-                    this.departments.set(departmentData);
-                    // Update grid data after loading departments
-                    this.updateGridData(this.designations());
+                    // Use setTimeout to avoid ExpressionChangedAfterItHasBeenCheckedError
+                    setTimeout(() => {
+                        this.departments.set(departmentData);
+                        // Update grid data after loading departments
+                        this.updateGridData(this.designations());
+                    }, 0);
                 }
                 else {
                     console.error('❌ Failed to load departments:', response);
@@ -4095,13 +4096,16 @@ class CideCoreDesignationListComponent {
                     console.log('✅ Grade levels loaded successfully:', response.data);
                     const gradeLevelData = response?.data || [];
                     console.log('📊 Setting grade levels signal with data:', gradeLevelData);
-                    this.gradeLevels.set(gradeLevelData);
-                    console.log('📊 Grade levels signal after set:', this.gradeLevels());
-                    console.log('📊 Grade level options after set:', this.gradeLevelOptions());
-                    // Update grid data if designations are already loaded
-                    if (this.designations().length > 0) {
-                        this.updateGridData(this.designations());
-                    }
+                    // Use setTimeout to avoid ExpressionChangedAfterItHasBeenCheckedError
+                    setTimeout(() => {
+                        this.gradeLevels.set(gradeLevelData);
+                        console.log('📊 Grade levels signal after set:', this.gradeLevels());
+                        console.log('📊 Grade level options after set:', this.gradeLevelOptions());
+                        // Update grid data if designations are already loaded
+                        if (this.designations().length > 0) {
+                            this.updateGridData(this.designations());
+                        }
+                    }, 0);
                 }
                 else {
                     console.error('❌ Failed to load grade levels:', response);
@@ -4133,30 +4137,6 @@ class CideCoreDesignationListComponent {
         console.log('✅ Final hierarchical data:', departmentNodes);
         return departmentNodes;
     }
-    /**
-     * Extract and set departments and grade levels from populated designation data
-     */
-    extractAndSetDepartmentsAndGradeLevels(designations) {
-        const departmentMap = new Map();
-        const gradeLevelMap = new Map();
-        designations.forEach(designation => {
-            // Extract departments (using type assertion since API response includes populated data)
-            const designationWithPopulated = designation;
-            if (designationWithPopulated.department && designationWithPopulated.department._id) {
-                departmentMap.set(designationWithPopulated.department._id, designationWithPopulated.department);
-                console.log(`🏢 Found department in designation: ${designationWithPopulated.department.sydept_name}`);
-            }
-            // Extract grade levels
-            if (designationWithPopulated.gradeLevel && designationWithPopulated.gradeLevel._id) {
-                gradeLevelMap.set(designationWithPopulated.gradeLevel._id, designationWithPopulated.gradeLevel);
-                console.log(`📚 Found grade level in designation: ${designationWithPopulated.gradeLevel.sydsgl_name}`);
-            }
-        });
-        // Set the extracted data to signals
-        this.departments.set(Array.from(departmentMap.values()));
-        this.gradeLevels.set(Array.from(gradeLevelMap.values()));
-        console.log(`🏢 Set ${departmentMap.size} departments and ${gradeLevelMap.size} grade levels from designation data`);
-    }
     /**
      * Extract unique departments from designation data (since department data is populated in API response)
      */
@@ -5115,7 +5095,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", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput", "options", "multiple", "searchable", "showSearchInput", "loading", "valueKey", "labelKey", "treeView"], outputs: ["ngModelChange", "change", "searchChange"] }, { kind: "component", type: CideTextareaComponent, selector: "cide-ele-textarea", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "minlength", "maxlength", "rows", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput"], outputs: ["ngModelChange"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideEleDropdownComponent, selector: "cide-ele-dropdown", inputs: ["items", "config", "triggerTemplate", "menuTemplate"], outputs: ["itemClick", "dropdownToggle"] }, { kind: "component", type: CideLytSharedWrapperComponent, selector: "cide-lyt-shared-wrapper", inputs: ["shared_wrapper_setup_param", "breadcrumb_data"] }] });
+    static ɵ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            {{gradeLevels() | json}}\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"] }, { kind: "pipe", type: i1$1.JsonPipe, name: "json" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCoreDesignationListComponent, decorators: [{
             type: Component,
@@ -5131,7 +5111,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                         CideIconComponent,
                         CideEleDropdownComponent,
                         CideLytSharedWrapperComponent
-                    ], 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>" }]
+                    ], 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            {{gradeLevels() | json}}\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>" }]
         }], ctorParameters: () => [] });
 
 var designationList_component = /*#__PURE__*/Object.freeze({