cloud-ide-core 2.0.91 → 2.0.93

package/fesm2022/cloud-ide-core.mjs

@@ -3907,10 +3907,14 @@ class CideCoreDesignationListComponent {
     hasPreviousPage = computed(() => this.currentPage() > 1, ...(ngDevMode ? [{ debugName: "hasPreviousPage" }] : []));
     // Grade level options for dropdown
     gradeLevelOptions = computed(() => {
-        return this.gradeLevels().map(gradeLevel => ({
+        const options = this.gradeLevels()
+            .filter(gradeLevel => gradeLevel.sydsgl_isactive !== false) // Only show active grade levels
+            .map(gradeLevel => ({
             value: gradeLevel._id || '',
             label: gradeLevel.sydsgl_name || 'Unknown'
         }));
+        console.log('📋 Grade level options computed:', options);
+        return options;
     }, ...(ngDevMode ? [{ debugName: "gradeLevelOptions" }] : []));
     // Department options for dropdown
     departmentOptions = computed(() => {
@@ -4079,6 +4083,7 @@ class CideCoreDesignationListComponent {
         const requestBody = new MGradeLevel({
             pageIndex: 1,
             pageSize: 100, // Load all grade levels for dropdown
+            pagination: false, // Disable pagination to get all results
             sydsgl_entity_id_syen: activeEntityId
         });
         this.gradeLevelService.getGradeLevelList(requestBody)
@@ -4089,7 +4094,10 @@ class CideCoreDesignationListComponent {
                 if (response?.success) {
                     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());
@@ -5107,7 +5115,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            {{gradeLevelOptions() | json}}\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,
@@ -5123,7 +5131,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            {{gradeLevelOptions() | json}}\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({