cloud-ide-core 2.0.93 → 2.0.94
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -5115,7 +5115,7 @@ class CideCoreDesignationListComponent {
|
|
|
5115
5115
|
return item._id || '';
|
|
5116
5116
|
}
|
|
5117
5117
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCoreDesignationListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5118
|
-
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" }] });
|
|
5118
|
+
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"] }] });
|
|
5119
5119
|
}
|
|
5120
5120
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCoreDesignationListComponent, decorators: [{
|
|
5121
5121
|
type: Component,
|
|
@@ -5131,7 +5131,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
|
|
|
5131
5131
|
CideIconComponent,
|
|
5132
5132
|
CideEleDropdownComponent,
|
|
5133
5133
|
CideLytSharedWrapperComponent
|
|
5134
|
-
], 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>" }]
|
|
5134
|
+
], 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>" }]
|
|
5135
5135
|
}], ctorParameters: () => [] });
|
|
5136
5136
|
|
|
5137
5137
|
var designationList_component = /*#__PURE__*/Object.freeze({
|
|
@@ -15943,7 +15943,7 @@ class CideCoreUserCreateComponent {
|
|
|
15943
15943
|
return userType.charAt(0) + userType.slice(1).toLowerCase();
|
|
15944
15944
|
}
|
|
15945
15945
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCoreUserCreateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
15946
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideCoreUserCreateComponent, isStandalone: true, selector: "cide-core-user-create", viewQueries: [{ propertyName: "menuDetailsRendererTemplate", first: true, predicate: ["menuDetailsRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "permissionsCheckboxRendererTemplate", first: true, predicate: ["permissionsCheckboxRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "menuTypeRendererTemplate", first: true, predicate: ["menuTypeRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "menuRightsPermissionsRendererTemplate", first: true, predicate: ["menuRightsPermissionsRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "permissionsRendererTemplate", first: true, predicate: ["permissionsRendererTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- \n ENTERPRISE USER MASTER FORM\n \n Enterprise-Level Styling with Tailwind CSS\n Features: Responsive grids, proper typography, enhanced user experience\n-->\n\n<div class=\"tw-w-full tw-h-full tw-p-1 tw-pt-2\">\n <!-- Toast Notifications -->\n <cide-ele-toast-notification></cide-ele-toast-notification>\n \n <form class=\"tw-max-w-7xl tw-mx-auto tw-bg-transparent\" [formGroup]=\"userMasterForm\" [class.tw-opacity-60]=\"loading()\"\n (ngSubmit)=\"onSubmit()\">\n\n\n <!-- User Context Header -->\n <div\n class=\"tw-bg-gradient-to-r tw-from-blue-50 tw-to-indigo-50 tw-border tw-border-blue-200 tw-rounded-md tw-p-1 tw-mb-2 tw-shadow-sm\">\n <div class=\"tw-flex tw-items-center tw-justify-between tw-flex-wrap tw-gap-2\">\n <!-- User Basic Info Display -->\n <div class=\"tw-flex tw-items-center tw-gap-3 tw-flex-wrap\">\n <!-- Profile Photo Preview -->\n <div class=\"tw-flex tw-items-center tw-gap-2\">\n <div\n class=\"tw-w-8 tw-h-8 tw-rounded-full tw-bg-blue-100 tw-border tw-border-blue-200 tw-flex tw-items-center tw-justify-center tw-overflow-hidden\">\n @if (userMasterForm.get('user_photo_id_cyfm')?.value) {\n <img cideEleFileImage [fileId]=\"userMasterForm.get('user_photo_id_cyfm')?.value\"\n [altText]=\"'Profile Photo'\" class=\"tw-w-full tw-h-full tw-object-cover\">\n } @else {\n <cide-ele-icon name=\"person\" class=\"tw-w-5 tw-h-5 tw-text-blue-600\">\n </cide-ele-icon>\n }\n </div>\n <div class=\"tw-flex tw-flex-col\">\n <span class=\"tw-text-xs tw-font-medium tw-text-blue-900\">\n {{ getUserFullName() || 'New User' }}\n </span>\n <span class=\"tw-text-xs tw-text-blue-600\">\n {{ getUserUsername() || 'Username not set' }}\n </span>\n </div>\n </div>\n\n <!-- Contact Info -->\n <div class=\"tw-flex tw-items-center tw-gap-3\">\n <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-xs tw-text-gray-700\">\n <cide-ele-icon variant=\"gray\" size=\"xs\">email</cide-ele-icon>\n <span>{{ getUserEmail() || 'Email not set' }}</span>\n </div>\n <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-xs tw-text-gray-700\">\n <cide-ele-icon variant=\"gray\" size=\"xs\">phone</cide-ele-icon>\n <span>{{ getUserMobile() || 'Mobile not set' }}</span>\n </div>\n </div>\n\n <!-- Active Status -->\n <div class=\"tw-flex tw-items-center tw-gap-1\">\n @if (getUserActiveStatus()) {\n <span\n class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded tw-text-xs tw-font-medium tw-bg-green-100 tw-text-green-700\">\n <cide-ele-icon variant=\"green\" size=\"xs\" class=\"tw-mr-1\">check_circle</cide-ele-icon>\n Active\n </span>\n } @else {\n <span\n class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded tw-text-xs tw-font-medium tw-bg-red-100 tw-text-red-700\">\n <cide-ele-icon variant=\"red\" size=\"xs\" class=\"tw-mr-1\">cancel</cide-ele-icon>\n Inactive\n </span>\n }\n </div>\n </div>\n\n <!-- Entity Info -->\n <div class=\"tw-flex tw-items-center tw-gap-2\">\n @if (hasDefaultEntity()) {\n <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-xs tw-text-blue-700\">\n <cide-ele-icon variant=\"blue\" size=\"xs\">business</cide-ele-icon>\n <span class=\"tw-font-medium\">{{ getDefaultEntityName() }}</span>\n </div>\n } @else {\n <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-xs tw-text-gray-500\">\n <cide-ele-icon variant=\"gray\" size=\"xs\">business</cide-ele-icon>\n <span class=\"tw-italic\">No entity</span>\n </div>\n }\n\n <span class=\"tw-text-xs tw-text-gray-600 tw-px-2 tw-py-1 tw-bg-gray-100 tw-rounded\">\n {{ getEntityMappingCount() }} mapping(s)\n </span>\n </div>\n </div>\n </div>\n\n <!-- Tab Navigation -->\n <div class=\"tw-p-0 tw-mb-2 tw-border-b tw-border-gray-200\">\n <cide-ele-tab [tabs]=\"userTabs()\" [activeTabId]=\"activeTab()\" size=\"md\" variant=\"default\"\n (tabChange)=\"onTabChange($event)\">\n </cide-ele-tab>\n </div>\n\n <!-- Tab Content -->\n <div class=\"tw-transition-opacity tw-duration-300\" [class.tw-opacity-60]=\"loading()\">\n @switch (activeTab()) {\n\n @case ('basic') {\n <!-- User Basic Information Section -->\n <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\n\n <!-- Top Section: Form Fields on Left, Profile Photo on Right -->\n <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-[1fr_200px] tw-gap-4 tw-mb-4\">\n <!-- Left Side: Form Fields -->\n <div class=\"tw-space-y-4\">\n <!-- Name Fields - All in One Row -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-4\">\n <cide-ele-input id=\"user_firstname\" label=\"First Name *\" formControlName=\"user_firstname\"\n placeholder=\"Enter first name\" [maxlength]=\"20\" size=\"md\" (ngModelChange)=\"onNameFieldChange()\">\n </cide-ele-input>\n\n <cide-ele-input id=\"user_middlename\" label=\"Middle Name\" formControlName=\"user_middlename\"\n placeholder=\"Enter middle name\" [maxlength]=\"20\" size=\"md\" (ngModelChange)=\"onNameFieldChange()\">\n </cide-ele-input>\n\n <cide-ele-input id=\"user_lastname\" label=\"Last Name *\" formControlName=\"user_lastname\"\n placeholder=\"Enter last name\" [maxlength]=\"20\" size=\"md\" (ngModelChange)=\"onNameFieldChange()\">\n </cide-ele-input>\n\n <cide-ele-input id=\"user_fullname\" label=\"Full Name * (Auto-generated)\" formControlName=\"user_fullname\"\n placeholder=\"Auto-generated from name fields or enter manually\" [maxlength]=\"62\" size=\"md\">\n </cide-ele-input>\n </div>\n\n <!-- Contact Information - All in One Row -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-3 tw-gap-4\">\n <cide-ele-input id=\"user_username\" label=\"Username *\" formControlName=\"user_username\"\n placeholder=\"Enter unique username\" [maxlength]=\"20\" size=\"md\">\n </cide-ele-input>\n\n <cide-ele-input id=\"user_emailid\" label=\"Email ID *\" formControlName=\"user_emailid\" type=\"email\"\n placeholder=\"Enter valid email address\" [maxlength]=\"320\" size=\"md\">\n </cide-ele-input>\n\n <cide-ele-input id=\"user_mobileno\" label=\"Mobile Number *\" formControlName=\"user_mobileno\" type=\"tel\"\n placeholder=\"Enter mobile number\" [maxlength]=\"15\" size=\"md\">\n </cide-ele-input>\n </div>\n </div>\n\n <!-- Right Side: Profile Photo Upload -->\n <div class=\"tw-flex tw-items-start tw-justify-center tw-p-0\">\n <cide-ele-file-input id=\"user_photo_id_cyfm\" formControlName=\"user_photo_id_cyfm\" accept=\"image/*\"\n [showPreview]=\"true\" [previewBoxMode]=\"true\" [showFileName]=\"false\" previewWidth=\"180px\"\n previewHeight=\"120px\" placeholderText=\"Upload Photo\" placeholderIcon=\"cloud_upload\" [autoUpload]=\"true\"\n [uploadData]=\"getProfilePhotoUploadData()\" (uploadSuccess)=\"onProfilePhotoUploadSuccess($event)\"\n (uploadError)=\"onProfilePhotoUploadError($event)\"\n (uploadProgressChange)=\"onProfilePhotoUploadProgress($event)\">\n </cide-ele-file-input>\n </div>\n </div>\n\n\n\n <!-- Status Control -->\n <div class=\"tw-grid tw-grid-cols-1 tw-mb-2\">\n <div class=\"tw-p-2 tw-bg-blue-50 tw-border tw-border-blue-100 tw-rounded-lg\">\n <label\n class=\"tw-flex tw-flex-col tw-cursor-pointer tw-py-2 tw-bg-transparent tw-border-none tw-rounded-none tw-transition-all tw-duration-200 hover:tw-bg-blue-75\">\n <cide-ele-input type=\"checkbox\" label=\"Active User Status\" formControlName=\"user_isactive\"\n class=\"tw-h-5 tw-accent-blue-500 tw-rounded tw-mb-1\" />\n <span class=\"tw-font-semibold tw-text-gray-700 tw-text-base\"></span>\n <span class=\"tw-text-sm tw-text-gray-600 tw-mt-1 tw-leading-relaxed\">Enable this user account for system\n access and operations</span>\n </label>\n </div>\n </div>\n </div>\n }\n\n @case ('auth') {\n <!-- Authentication Section -->\n <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\n <!-- Password Fields -->\n @if (shouldShowPasswordFields()) {\n <div class=\"tw-mb-4\">\n <!-- Password Fields Header for Edit Mode -->\n @if (isEditMode()) {\n <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\n <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-800\">Update Password</h6>\n <button type=\"button\"\n class=\"tw-px-3 tw-py-1 tw-bg-gray-100 tw-text-gray-600 tw-border tw-border-gray-300 tw-rounded-md tw-text-xs tw-font-medium hover:tw-bg-gray-200 tw-transition-colors\"\n (click)=\"cancelPasswordUpdate()\">\n Cancel Password Update\n </button>\n </div>\n }\n\n <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-2 md:tw-grid-cols-1 tw-gap-6\">\n <cide-ele-input id=\"user_password\" [label]=\"getPasswordFieldLabel()\" formControlName=\"user_password\"\n type=\"password\" placeholder=\"Enter secure password (min 8 characters)\" size=\"md\">\n </cide-ele-input>\n\n <cide-ele-input id=\"user_confirm_password\" [label]=\"getPasswordConfirmLabel()\"\n formControlName=\"user_confirm_password\" type=\"password\" placeholder=\"Confirm your password\" size=\"md\">\n </cide-ele-input>\n </div>\n </div>\n }\n\n <!-- Password Update Option for Edit Mode -->\n @if (isEditMode() && !shouldShowPasswordFields()) {\n <div class=\"tw-mb-4\">\n <div class=\"tw-p-2 tw-bg-blue-50 tw-border tw-border-blue-200 tw-rounded-lg\">\n <h6 class=\"tw-text-sm tw-font-semibold tw-text-blue-800 tw-mb-2\">Password Update</h6>\n <p class=\"tw-text-sm tw-text-blue-600 tw-mb-3\">Current password will be kept. Click below to change\n password.</p>\n\n @if (hasPasswordInput()) {\n <div\n class=\"tw-mb-3 tw-p-2 tw-bg-yellow-50 tw-border tw-border-yellow-200 tw-rounded tw-text-sm tw-text-yellow-700\">\n <cide-ele-icon variant=\"yellow\" size=\"xs\" class=\"tw-mr-1\">warning</cide-ele-icon>\n Password fields contain text. Click \"Change Password\" to manage existing input.\n </div>\n }\n\n <button type=\"button\"\n class=\"tw-px-4 tw-py-2 tw-bg-blue-100 tw-text-blue-700 tw-border tw-border-blue-300 tw-rounded-md tw-text-sm tw-font-medium hover:tw-bg-blue-200 tw-transition-colors\"\n (click)=\"triggerPasswordUpdate()\">\n @if (hasPasswordInput()) {\n Manage Password Fields\n } @else {\n Change Password\n }\n </button>\n </div>\n </div>\n }\n\n <!-- Password Options -->\n <div class=\"tw-grid tw-grid-cols-1 tw-gap-4 tw-mb-4\">\n <div class=\"tw-p-2 tw-bg-yellow-50 tw-border tw-border-yellow-100 tw-rounded-lg\">\n <label\n class=\"tw-flex tw-flex-col tw-gap-2 tw-cursor-pointer tw-py-2 tw-bg-transparent tw-border-none tw-rounded-none tw-transition-all tw-duration-200\">\n <cide-ele-input type=\"checkbox\" label=\"Force Password Change on Login\"\n formControlName=\"user_passwordchangeonlogin\" class=\"tw-h-5 tw-accent-yellow-500 tw-rounded tw-mb-1\" />\n <span class=\"tw-text-sm tw-text-gray-600 tw-mt-1 tw-leading-relaxed\">User will be required to change\n password on next login</span>\n </label>\n </div>\n </div>\n\n </div>\n }\n\n @case ('roles') {\n <!-- Entity, Roles & Permissions Mapping Section -->\n <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\n\n\n\n <!-- Important Note -->\n <div class=\"tw-bg-amber-50 tw-border tw-border-amber-200 tw-rounded-lg tw-p-2 tw-mb-4\">\n <div class=\"tw-flex tw-items-start tw-gap-3\">\n <cide-ele-icon variant=\"amber\" size=\"lg\">info</cide-ele-icon>\n <div class=\"tw-flex-1\">\n <h4 class=\"tw-text-sm tw-font-semibold tw-text-amber-800 tw-mb-1\">Entity-Role Based Access</h4>\n <p class=\"tw-text-sm tw-text-amber-700 tw-mb-2\">User access is completely managed through entity-role\n mappings below. At least one entity mapping is required for user access.</p>\n @if (hasDefaultEntity()) {\n <div class=\"tw-flex tw-items-center tw-gap-2 tw-mt-2 tw-p-2 tw-bg-amber-100 tw-rounded\">\n <cide-ele-icon variant=\"amber\" size=\"sm\">star</cide-ele-icon>\n <span class=\"tw-text-sm tw-text-amber-800\">\n <strong>Default Entity:</strong> {{ getDefaultEntityName() }}\n </span>\n </div>\n } @else {\n <div class=\"tw-text-sm tw-text-amber-600 tw-mt-2 tw-italic\">\n \u26A0\uFE0F No default entity selected. Please set one entity as default.\n </div>\n }\n </div>\n </div>\n </div>\n\n <!-- Entity-Role Mapping Section -->\n <div class=\"tw-flex tw-text-center tw-justify-between tw-items-center tw-mb-4\">\n <div>\n <h4 class=\"tw-text-sm tw-text-left tw-font-semibold tw-text-blue-900 tw-mb-1\">Entity-Role Mapping</h4>\n <p class=\"tw-text-sm tw-text-blue-700\">Map user to entities with specific roles and permissions</p>\n </div>\n <div class=\"tw-flex tw-flex-col tw-items-end\">\n <button cideEleButton variant=\"primary\" size=\"md\" type=\"button\" (click)=\"addEntityMapping()\"\n leftIcon=\"add\" [disabled]=\"isAllEntitiesMapped()\">\n Add Entity Mapping\n </button>\n\n @if (isAllEntitiesMapped()) {\n <div class=\"tw-mt-2 tw-p-2 tw-bg-blue-50 tw-border tw-border-blue-200 tw-rounded-md tw-max-w-xs\">\n <p class=\"tw-text-xs tw-text-blue-700\">\n <cide-ele-icon variant=\"info\" size=\"xs\" class=\"tw-mr-1\">info</cide-ele-icon>\n All available entities are already mapped.\n </p>\n </div>\n }\n </div>\n </div>\n\n <div formArrayName=\"core_entity_mapping\">\n @for (mapping of entityMappings(); track $index; let i = $index) {\n <div class=\"tw-bg-white tw-border tw-border-blue-200 tw-rounded-xl tw-mb-6 tw-overflow-hidden tw-shadow-sm\"\n [formGroupName]=\"i\">\n <div\n class=\"tw-bg-gradient-to-r tw-from-blue-50 tw-to-blue-100 tw-px-6 tw-py-3 tw-flex tw-justify-between tw-items-center tw-border-b tw-border-blue-200\">\n <div class=\"tw-flex tw-items-center tw-gap-2\">\n <h5 class=\"tw-m-0 tw-text-blue-800 tw-text-sm tw-font-semibold\">Entity Mapping {{ i + 1 }}</h5>\n @if (mapping.syenm_isdefault) {\n <span\n class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded-full tw-text-xs tw-font-medium tw-bg-green-100 tw-text-green-800\">\n <cide-ele-icon variant=\"green\" size=\"xs\" class=\"tw-mr-1\">star</cide-ele-icon>\n Default\n </span>\n }\n </div>\n @if (!mapping?._id) {\n <button cideEleButton variant=\"danger\" size=\"sm\" type=\"button\" (click)=\"removeEntityMapping(i)\"\n leftIcon=\"delete\">\n Remove\n </button>\n }\n </div>\n\n <div>\n <!-- Entity and Role Selection -->\n <div class=\"tw-grid tw-px-3 tw-py-1 tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4 tw-mb-4\">\n <div>\n <cide-ele-select label=\"Entity *\" [options]=\"getFilteredEntityOptions(i)\"\n formControlName=\"syenm_entity_id_syen\" valueKey=\"_id\" labelKey=\"syen_name\"\n placeholder=\"Select entity\" size=\"md\" (change)=\"onEntityChange(i, $event)\">\n </cide-ele-select>\n\n @if (isAllEntitiesSelected(i)) {\n <div class=\"tw-mt-2 tw-p-2 tw-bg-yellow-50 tw-border tw-border-yellow-200 tw-rounded-md\">\n <p class=\"tw-text-xs tw-text-yellow-700\">\n <cide-ele-icon variant=\"warning\" size=\"xs\" class=\"tw-mr-1\">info</cide-ele-icon>\n All entities are already mapped. Remove another mapping to add this one.\n </p>\n </div>\n }\n </div>\n <cide-ele-select label=\"Role for this Entity\" [options]=\"getRoleOptionsForEntity(i)\"\n formControlName=\"syenm_role_id_syusrol\" valueKey=\"_id\" labelKey=\"syusrol_role_name\"\n placeholder=\"Select role for this entity\" size=\"md\" (change)=\"onRoleChange(i, $event)\">\n </cide-ele-select>\n </div>\n\n\n <!-- Entity-Specific Details and Active Period - All in One Row -->\n <div class=\"tw-grid tw-px-3 tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-4 tw-mb-4\">\n <cide-ele-select label=\"Department for this Entity\" [options]=\"getDepartmentOptionsForEntity(i)\"\n formControlName=\"syenm_department_id_sydept\" (change)=\"onDepartmentChange($event)\" valueKey=\"_id\"\n labelKey=\"sydept_name\" placeholder=\"Select department\" size=\"md\">\n </cide-ele-select>\n\n <cide-ele-select label=\"Designation for this Entity\" [options]=\"getDesignationOptionsForEntity(i)\"\n valueKey=\"_id\" labelKey=\"sydsg_name\" formControlName=\"syenm_designation_id_sydsg\"\n placeholder=\"Select designation\" size=\"md\">\n </cide-ele-select>\n\n <cide-ele-input label=\"Active From *\" [id]=\"'syenm_activefrom['+i+']'\"\n formControlName=\"syenm_activefrom\" type=\"date\" size=\"md\">\n </cide-ele-input>\n\n <cide-ele-input label=\"Active Until\" [id]=\"'syenm_activeupto['+i+']'\"\n formControlName=\"syenm_activeupto\" type=\"date\" size=\"md\">\n </cide-ele-input>\n </div>\n\n <!-- Mapping Settings -->\n <div class=\"tw-grid tw-px-3 tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-4 tw-mb-4\">\n <div class=\"tw-p-2 tw-bg-green-50 tw-border tw-border-green-200 tw-rounded-lg\">\n <cide-ele-input type=\"checkbox\" label=\"Default Entity\" formControlName=\"syenm_isdefault\"\n (change)=\"onDefaultEntityChange(i, $event)\" class=\"tw-h-5 tw-accent-green-500\" />\n <span class=\"tw-text-xs tw-text-green-600 tw-block tw-mt-1\">Set as user's default entity (only one\n allowed)</span>\n </div>\n\n <div class=\"tw-p-2 tw-bg-blue-50 tw-border tw-border-blue-200 tw-rounded-lg\">\n <cide-ele-input type=\"checkbox\" label=\"Active Mapping\" formControlName=\"syenm_isactive\"\n class=\"tw-h-5 tw-accent-blue-500\" />\n <span class=\"tw-text-xs tw-text-blue-600 tw-block tw-mt-1\">Enable this entity mapping</span>\n </div>\n </div>\n\n <!-- Menu Rights Grid for this Entity-Role -->\n <div class=\"tw-border-t tw-border-gray-200\">\n\n @if (getMenuRightsForMapping(i).length > 0) {\n <!-- Menu Rights Tree Grid -->\n\n <cide-ele-data-grid [config]=\"getMenuRightsGridConfig(i)\"\n [templateRenderers]=\"getMenuRightsTemplateRenderers(i)\"\n (gridEvent)=\"onMenuRightsGridEvent($event, i)\" class=\"tw-h-96 tw-w-full\">\n </cide-ele-data-grid>\n\n } @else {\n <div class=\"tw-text-center tw-py-8 tw-bg-gray-50 tw-border tw-border-gray-200 tw-rounded-lg\">\n <div class=\"tw-text-gray-400 tw-mb-3\">\n <cide-ele-icon variant=\"gray\" size=\"lg\">menu</cide-ele-icon>\n </div>\n <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-600 tw-mb-2\">No Menu Rights Available</h6>\n <p class=\"tw-text-xs tw-text-gray-500 tw-mb-3 tw-text-center\">Select both entity and role to\n automatically load\n menu rights for this mapping.</p>\n </div>\n }\n </div>\n </div>\n </div>\n }\n </div>\n\n @if (entityMappings().length === 0) {\n <div class=\"tw-text-center tw-py-8 tw-bg-white tw-border tw-border-blue-200 tw-rounded-lg\">\n <div class=\"tw-text-blue-400 tw-mb-3\">\n <cide-ele-icon variant=\"blue\" size=\"lg\">business</cide-ele-icon>\n </div>\n <h4 class=\"tw-text-sm tw-font-medium tw-text-blue-800 tw-mb-2\">No Entity Mappings</h4>\n <p class=\"tw-text-blue-600 tw-mb-4 tw-text-center\">Add entity mappings to assign specific roles and\n permissions for different entities.</p>\n <button class=\"tw-mx-auto\" cideEleButton variant=\"primary\" size=\"md\" type=\"button\"\n (click)=\"addEntityMapping()\" leftIcon=\"add\">\n Add First Entity Mapping\n </button>\n </div>\n }\n </div>\n }\n\n @case ('addresses') {\n <!-- Contact Addresses Section -->\n <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\n <div class=\"tw-flex tw-justify-end\">\n <div class=\"tw-flex tw-justify-between tw-items-end tw-mb-2 tw-gap-4\">\n <button cideEleButton variant=\"primary\" size=\"md\" type=\"button\" (click)=\"addContactAddress()\"\n leftIcon=\"add\" [disabled]=\"!hasAddContactAddressRights()\">\n Add New Address\n </button>\n </div>\n </div>\n\n <div formArrayName=\"core_user_contact_addresses\">\n @for (address of contactAddresses(); track $index; let i = $index) {\n <div [formGroupName]=\"i\"\n class=\"tw-bg-white tw-border tw-border-gray-200 tw-rounded-xl tw-mb-8 tw-overflow-hidden tw-transition-all tw-duration-300 hover:tw-shadow-lg tw-shadow-sm\">\n <div\n class=\"tw-bg-gradient-to-r tw-from-gray-50 tw-to-gray-100 tw-px-4 tw-py-2 tw-flex tw-justify-between tw-items-center tw-border-b tw-border-gray-200\">\n <!-- Use address type as header instead of generic \"Address X\" -->\n <h4 class=\"tw-m-0 tw-text-gray-700 tw-text-sm tw-font-semibold tw-tracking-tight\">\n {{ getAddressTypeLabel(i) || ('Address ' + (i + 1)) }}\n </h4>\n <div class=\"tw-flex tw-items-center tw-gap-2\">\n @if (isAddressOwner(i)) {\n <button cideEleButton variant=\"secondary\" size=\"xs\" type=\"button\" (click)=\"shareAddress(i)\"\n leftIcon=\"share\" class=\"tw-text-blue-600 hover:tw-text-blue-700\">\n Share\n </button>\n }\n @if (!address?._id) {\n <button cideEleButton variant=\"danger\" size=\"sm\" type=\"button\" (click)=\"removeContactAddress(i)\"\n leftIcon=\"delete\">\n Remove\n </button>\n }\n </div>\n </div>\n <div class=\"tw-p-4\">\n <!-- Main Layout: Inputs on Left, Address Textarea on Right -->\n <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-4 tw-gap-3 tw-mb-3\">\n \n <!-- Left Side: Input Fields (3/4 width) -->\n <div class=\"lg:tw-col-span-3\">\n <!-- Row 1: Address Type, Contact Person -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3 tw-mb-3\">\n <cide-ele-select label=\"Address Type\" [options]=\"addressTypeOptions()\" id=\"sycad_address_type_id_sygms\"\n formControlName=\"sycad_address_type_id_sygms\" placeholder=\"Select type\" size=\"sm\"\n valueKey=\"_id\" labelKey=\"sygms_title\" (change)=\"onAddressTypeChange(i)\">\n </cide-ele-select>\n\n <cide-ele-input label=\"Contact Person\" formControlName=\"sycad_contact_person_name\"\n placeholder=\"Enter contact person\" size=\"sm\">\n </cide-ele-input>\n </div>\n\n <!-- Row 2: Postal Code, City, State, Country -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-4 tw-gap-3\">\n <cide-ele-select label=\"Postal Code\" [options]=\"addressPostalCodes()[i] || []\"\n formControlName=\"sycad_contact_pin_sypin\" placeholder=\"Select postal code\" [searchable]=\"true\"\n [loading]=\"addressPostalCodesLoading()[i] || false\" (searchChange)=\"onPostalCodeSearch($event, i)\"\n (change)=\"onPostalCodeSelection($event, i)\" size=\"sm\">\n </cide-ele-select>\n\n <cide-ele-input label=\"City\" formControlName=\"sycad_contact_city_sypin\" placeholder=\"Enter city\"\n size=\"sm\">\n </cide-ele-input>\n\n <cide-ele-input label=\"State\" formControlName=\"sycad_contact_state_sypin\" placeholder=\"Enter state\"\n size=\"sm\">\n </cide-ele-input>\n\n <cide-ele-select label=\"Country\" [options]=\"addressCountries()[i] || []\"\n formControlName=\"sycad_contact_country_syctr\" placeholder=\"Select country\" valueKey=\"_id\"\n labelKey=\"syctr_country_iso_name\" [searchable]=\"true\" (searchChange)=\"onCountrySearch($event, i)\"\n [loading]=\"addressCountriesLoading()[i] || false\" size=\"sm\">\n </cide-ele-select>\n </div>\n </div>\n\n <!-- Right Side: Address Textarea (1/4 width, spans 2 rows) -->\n <div class=\"lg:tw-col-span-1 lg:tw-row-span-2 tw-flex tw-flex-col\">\n <cide-ele-textarea label=\"Complete Address\" formControlName=\"sycad_contact_address\"\n placeholder=\"Enter complete address with area, city, and landmarks\" [rows]=\"4\" size=\"sm\"\n class=\"tw-h-full\">\n </cide-ele-textarea>\n </div>\n </div>\n\n <!-- Contact Details: Primary Phone, Alt Phone, Fax, Primary Email in 4 columns -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-4 tw-gap-3 tw-mb-3\">\n <cide-ele-input label=\"Primary Phone\" formControlName=\"sycad_contact_phone\" type=\"tel\"\n placeholder=\"Primary phone\" size=\"sm\">\n </cide-ele-input>\n\n <cide-ele-input label=\"Alternate Phone\" formControlName=\"sycad_contact_phone_alt\" type=\"tel\"\n placeholder=\"Alternate phone\" size=\"sm\">\n </cide-ele-input>\n\n <cide-ele-input label=\"Fax Number\" formControlName=\"sycad_contact_fax\" placeholder=\"Fax number\"\n size=\"sm\">\n </cide-ele-input>\n\n <cide-ele-input label=\"Primary Email\" formControlName=\"sycad_contact_email\" type=\"email\"\n placeholder=\"Primary email\" size=\"sm\">\n </cide-ele-input>\n </div>\n\n <!-- Alternate Email in single row -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3\">\n <cide-ele-input label=\"Alternate Email\" formControlName=\"sycad_contact_email_alt\" type=\"email\"\n placeholder=\"Alternate email address\" size=\"sm\">\n </cide-ele-input>\n </div>\n </div>\n </div>\n }\n </div>\n </div>\n }\n\n @case ('documents') {\n <!-- Documents Section -->\n <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\n <div class=\"tw-flex tw-justify-end tw-items-end tw-mb-2 tw-gap-4\">\n <button cideEleButton variant=\"primary\" size=\"md\" type=\"button\" (click)=\"addDocument()\" leftIcon=\"add\" [disabled]=\"!hasAddDocumentRights()\">\n Add Document\n </button>\n </div>\n <div formArrayName=\"core_user_documents\">\n @for (doc of documents(); track $index; let i = $index) {\n <div [formGroupName]=\"i\"\n class=\"tw-bg-white tw-border tw-border-gray-200 tw-rounded-xl tw-mb-8 tw-overflow-hidden tw-transition-all tw-duration-300 hover:tw-shadow-lg tw-shadow-sm\">\n <div\n class=\"tw-bg-gradient-to-r tw-from-gray-50 tw-to-gray-100 tw-px-4 tw-py-2 tw-flex tw-justify-between tw-items-center tw-border-b tw-border-gray-200\">\n <h4 class=\"tw-m-0 tw-text-gray-700 tw-text-sm tw-font-semibold tw-tracking-tight\">\n {{ getDocumentTypeLabel(i) || ('Document ' + (i + 1)) }}\n </h4>\n <div class=\"tw-flex tw-gap-2\">\n @if (doc?._id) {\n <button cideEleButton variant=\"secondary\" size=\"sm\" type=\"button\" (click)=\"shareDocumentRights(i)\"\n leftIcon=\"share\">\n Share\n </button>\n }\n </div>\n </div>\n <div class=\"tw-p-4\">\n <!-- Main Layout: Inputs on Left, File Upload on Right -->\n <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-3 tw-gap-4\">\n \n <!-- Left Side: Document Information (2/3 width) -->\n <div class=\"lg:tw-col-span-2\">\n <!-- Row 1: Document Type, Document Number, Name as per Document -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-3 tw-mb-3\">\n <cide-ele-select label=\"Document Type\" [options]=\"documentTypeOptions()\"\n formControlName=\"syusd_document_type_id_sygms\" placeholder=\"Select type\" size=\"sm\"\n valueKey=\"_id\" labelKey=\"sygms_title\" (change)=\"onDocumentTypeChange(i)\">\n </cide-ele-select>\n\n <cide-ele-input label=\"Document Number\" formControlName=\"syusd_doc_number\"\n placeholder=\"Document number\" size=\"sm\">\n </cide-ele-input>\n\n <cide-ele-input label=\"Name as per Document\" formControlName=\"syusd_doc_name_as_per_doc\"\n placeholder=\"Name on document\" size=\"sm\">\n </cide-ele-input>\n </div>\n\n <!-- Row 2: Issue Date, Expiry Date, Photo Group -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-3 tw-mb-3\">\n <cide-ele-input label=\"Issue Date\" formControlName=\"syusd_doc_issue_date\"\n [id]=\"'syusd_doc_issue_date['+i+']'\" type=\"date\" size=\"sm\">\n </cide-ele-input>\n\n <cide-ele-input label=\"Expiry Date\" formControlName=\"syusd_doc_expiry_date\"\n [id]=\"'syusd_doc_expiry_date['+i+']'\" type=\"date\" size=\"sm\">\n </cide-ele-input>\n </div>\n\n <!-- Row 3: Verification Status, KYC Status -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3\">\n <cide-ele-select label=\"Verification Status\" [options]=\"documentVerificationStatusOptions()\"\n formControlName=\"syusd_doc_verification_status_id_sygms\" placeholder=\"Select status\"\n size=\"sm\" valueKey=\"_id\" labelKey=\"sygms_title\">\n </cide-ele-select>\n\n <cide-ele-select label=\"KYC Status\" [options]=\"documentKycStatusOptions()\"\n formControlName=\"syusd_doc_kyc_status_id_sygms\" placeholder=\"Select KYC status\" size=\"sm\"\n valueKey=\"_id\" labelKey=\"sygms_title\">\n </cide-ele-select>\n </div>\n </div>\n\n <!-- Right Side: File Upload (1/3 width) -->\n <div class=\"lg:tw-col-span-1\">\n <div class=\"tw-bg-gray-50 tw-border tw-border-gray-200 tw-rounded-lg tw-p-3 tw-h-full\">\n \n <!-- File Upload Input -->\n <cide-ele-file-input\n [id]=\"'document-files-' + i\"\n [multiple]=\"true\"\n formControlName=\"syusd_photo_group_id_cyfm\"\n [accept]=\"'.pdf,.jpg,.jpeg,.png,.doc,.docx'\"\n [autoUpload]=\"true\"\n [uploadData]=\"getDocumentUploadData(i)\"\n (change)=\"onDocumentFilesSelected($event, i)\"\n (uploadSuccess)=\"onDocumentUploadSuccess($event, i)\"\n (uploadError)=\"onDocumentUploadError($event, i)\"\n (uploadProgressChange)=\"onDocumentUploadProgress($event, i)\"\n class=\"tw-mb-3\"\n size=\"sm\">\n </cide-ele-file-input>\n\n <!-- Upload Status -->\n <!-- Upload status is now handled by the file input component itself -->\n </div>\n </div>\n </div>\n </div>\n </div>\n }\n </div>\n </div>\n }\n\n @case ('family') {\n <!-- Family Details Section - Compact Design -->\n <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\n <div class=\"tw-flex tw-justify-end tw-items-end tw-mb-3 tw-gap-4\">\n <button cideEleButton variant=\"primary\" size=\"sm\" type=\"button\" (click)=\"addFamilyDetail()\" leftIcon=\"add\" [disabled]=\"!hasAddFamilyDetailRights()\">\n Add Family Member\n </button>\n </div>\n\n <div formArrayName=\"core_user_family_details\">\n @for (family of familyDetails(); track $index; let i = $index) {\n <div [formGroupName]=\"i\"\n class=\"tw-bg-white tw-border tw-border-gray-200 tw-rounded-lg tw-mb-4 tw-overflow-hidden tw-transition-all tw-duration-200 hover:tw-shadow-md tw-shadow-sm\">\n \n <!-- Compact Header -->\n <div class=\"tw-bg-gray-50 tw-px-4 tw-py-2 tw-flex tw-justify-between tw-items-center tw-border-b tw-border-gray-200\">\n <h4 class=\"tw-m-0 tw-text-gray-700 tw-text-sm tw-font-medium\">Family Member {{ i + 1 }}</h4>\n <div class=\"tw-flex tw-gap-2\">\n @if (family?._id) {\n <button cideEleButton variant=\"secondary\" size=\"xs\" type=\"button\" (click)=\"shareFamilyDetailRights(i)\"\n leftIcon=\"share\">\n Share\n </button>\n }\n @if (!family?._id) {\n <button cideEleButton variant=\"danger\" size=\"xs\" type=\"button\" (click)=\"removeFamilyDetail(i)\" leftIcon=\"delete\">\n Remove\n </button>\n }\n </div>\n </div>\n \n <!-- Compact Form Content - 3 inputs per row -->\n <div class=\"tw-p-4\">\n <!-- Row 1: Name, User, and Combined Relationship/Active Status (33.33% each) -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-3 tw-mb-3\">\n <cide-ele-input label=\"Family Member Name\" formControlName=\"syfdl_family_member_name\"\n placeholder=\"Enter family member full name\" size=\"sm\">\n </cide-ele-input>\n\n <cide-ele-select label=\"Family Member User\" [options]=\"userOptions(i)\"\n formControlName=\"syfdl_family_member_id_user\" placeholder=\"Select family member user\" size=\"sm\"\n valueKey=\"_id\" labelKey=\"user_fullname\" [searchable]=\"true\"\n [loading]=\"userSearchLoading()[i] || false\" (searchChange)=\"onUserSearchChange($event, i)\"\n (change)=\"onUserSelectionChange($event, i)\">\n </cide-ele-select>\n\n <!-- Combined Relationship and Active Status (33.33%) -->\n <div class=\"tw-flex tw-flex-row tw-gap-2 tw-items-end\">\n <div class=\"tw-flex-1\">\n <cide-ele-select label=\"Relationship\" [options]=\"relationshipOptions()\"\n formControlName=\"syfdl_relationship_id_sygms\" placeholder=\"Select relationship\" size=\"sm\"\n valueKey=\"_id\" labelKey=\"sygms_title\">\n </cide-ele-select>\n </div>\n\n <div class=\"tw-flex tw-items-center tw-pt-1 tw-flex-shrink-0\">\n <cide-ele-input formControlName=\"syfdl_isactive\" type=\"checkbox\" label=\"Active\" size=\"sm\">\n </cide-ele-input>\n </div>\n </div>\n </div>\n\n <!-- Row 2: Blood Group, DOB, and Phone -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 xl:tw-grid-cols-3 tw-gap-3 tw-mb-3\">\n <cide-ele-select label=\"Blood Group\" [options]=\"bloodGroupOptions()\"\n formControlName=\"syfdl_blood_group_sygms\" placeholder=\"Select blood group\" size=\"sm\" valueKey=\"_id\"\n labelKey=\"sygms_title\">\n </cide-ele-select>\n\n <cide-ele-input label=\"Date of Birth\" formControlName=\"syfdl_family_member_dob\" type=\"date\" size=\"sm\"\n [id]=\"'syfdl_family_member_dob['+i+']'\">\n </cide-ele-input>\n\n <cide-ele-input label=\"Contact Phone\" formControlName=\"syfdl_contact_phone\" type=\"tel\"\n placeholder=\"Enter contact phone\" size=\"sm\">\n </cide-ele-input>\n </div>\n\n <!-- Row 3: Email, Email ID, and Contact Number -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 xl:tw-grid-cols-3 tw-gap-3 tw-mb-3\">\n <cide-ele-input label=\"Contact Email\" formControlName=\"syfdl_contact_email\" type=\"email\"\n placeholder=\"Enter contact email\" size=\"sm\">\n </cide-ele-input>\n\n <cide-ele-input label=\"Contact Email ID\" formControlName=\"syfdl_contact_email_id\" type=\"email\"\n placeholder=\"Enter contact email ID\" size=\"sm\">\n </cide-ele-input>\n\n <cide-ele-input label=\"Contact Number\" formControlName=\"syfdl_contact_number\" type=\"tel\"\n placeholder=\"Enter contact number\" size=\"sm\">\n </cide-ele-input>\n </div>\n\n </div>\n </div>\n }\n </div>\n </div>\n }\n }\n </div>\n\n <!-- Form Actions -->\n <div\n class=\"tw-flex tw-justify-between tw-items-center tw-gap-4 tw-py-2 tw-bg-white tw-border-t tw-border-gray-200 tw-sticky tw-bottom-0 tw-z-10\">\n <!-- Error Display Component -->\n <div class=\"tw-flex-1\">\n <cide-form-field-error [formGroup]=\"userMasterForm\"></cide-form-field-error>\n </div>\n\n <!-- Action Buttons -->\n <div class=\"tw-flex tw-gap-4\">\n <button cideEleButton type=\"button\" variant=\"secondary\" (click)=\"resetForm()\" leftIcon=\"refresh\"\n [disabled]=\"loading()\">\n Reset Form\n </button>\n\n <button cideEleButton type=\"submit\" variant=\"primary\" [disabled]=\"loading() || userMasterForm.invalid\"\n [loading]=\"loading()\" leftIcon=\"save\">\n Save User Master\n </button>\n </div>\n </div>\n </form>\n</div>\n\n<!-- Template Renderers for Role Permissions Grid -->\n<ng-template #menuDetailsRendererTemplate let-row=\"row\">\n <div class=\"tw-flex tw-items-center tw-space-x-3 tw-min-w-0\">\n <!-- Menu Icon -->\n <div class=\"tw-flex-shrink-0\">\n @if (row.syme_type === 'module') {\n <cide-ele-icon class=\"tw-text-blue-600 tw-w-4 tw-h-4\">folder</cide-ele-icon>\n } @else if (row.syme_type === 'section') {\n <cide-ele-icon class=\"tw-text-green-600 tw-w-4 tw-h-4\">folder_open</cide-ele-icon>\n } @else if (row.syme_type === 'menu') {\n <cide-ele-icon class=\"tw-text-purple-600 tw-w-4 tw-h-4\">menu</cide-ele-icon>\n } @else {\n <cide-ele-icon class=\"tw-text-gray-600 tw-w-4 tw-h-4\">description</cide-ele-icon>\n }\n </div>\n\n <!-- Menu Details -->\n <div class=\"tw-ml-3 tw-min-w-0 tw-flex-1\">\n <div class=\"tw-flex tw-items-center tw-gap-2\">\n <div class=\"tw-text-xs tw-font-medium tw-text-gray-900 tw-truncate\" [title]=\"row.syme_title\">\n {{ row.syme_title || row.menu?.syme_title || row.menu?.syme_menu_name || 'Untitled' }}\n </div>\n <!-- Green pill indicator for parent menus with child permissions -->\n @if (row.syme_type === 'module' || row.syme_type === 'section') {\n @if (hasChildMenusWithPermissions(row._id)) {\n <span\n class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-green-100 tw-text-green-800 tw-whitespace-nowrap\">\n Assigned\n </span>\n }\n }\n </div>\n @if (row.permission?.sygms_name) {\n <div class=\"tw-text-xs tw-text-blue-500 tw-truncate\" [title]=\"row.permission?.sygms_name\">\n {{ row.permission?.sygms_name }}\n </div>\n }\n </div>\n </div>\n</ng-template>\n\n<!-- Menu Type Renderer Template -->\n<ng-template #menuTypeRendererTemplate let-row=\"row\" let-value=\"value\">\n <div class=\"tw-flex tw-items-center tw-justify-center\">\n @if (row.syme_type === 'module') {\n <span\n class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded-full tw-text-xs tw-font-medium tw-bg-blue-100 tw-text-blue-800\">\n Module\n </span>\n } @else if (row.syme_type === 'section') {\n <span\n class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded-full tw-text-xs tw-font-medium tw-bg-green-100 tw-text-green-800\">\n Section\n </span>\n } @else if (row.syme_type === 'menu') {\n <span\n class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded-full tw-text-xs tw-font-medium tw-bg-purple-100 tw-text-purple-800\">\n Menu\n </span>\n } @else {\n <span\n class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded-full tw-text-xs tw-font-medium tw-bg-gray-100 tw-text-gray-800\">\n {{ row.syme_type || 'Unknown' }}\n </span>\n }\n </div>\n</ng-template>\n\n<!-- Permissions Checkbox Renderer Template -->\n<ng-template #permissionsCheckboxRendererTemplate let-row=\"row\" let-value=\"value\">\n <div class=\"tw-flex tw-flex-wrap tw-gap-2 tw-max-w-full\">\n @if (row.syme_type === 'menu' && row?.syme_permissions_id_sygms && row?.syme_permissions_id_sygms.length > 0) {\n @for (permissionId of row?.syme_permissions_id_sygms || []; track permissionId) {\n <div class=\"tw-flex tw-items-center tw-space-x-1\">\n <div class=\"tw-flex tw-items-center tw-space-x-1\">\n <input type=\"checkbox\" [checked]=\"isPermissionSelected(row._id, permissionId)\" [disabled]=\"true\"\n class=\"tw-h-4 tw-w-4 tw-text-blue-600 tw-bg-gray-100 tw-border-gray-300 tw-rounded focus:tw-ring-blue-500\">\n <label class=\"tw-text-xs tw-text-gray-700\">\n {{ getPermissionById(permissionId)?.sygms_title || 'Unknown' }}\n </label>\n </div>\n </div>\n }\n } @else {\n <!-- Show green checkmark for parent menus with child permissions -->\n @if (row.syme_type === 'module' || row.syme_type === 'section' || row.syme_type === 'title') {\n @if (hasChildMenusWithPermissions(row._id)) {\n <div class=\"tw-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-bg-green-100 tw-rounded-full\">\n <cide-ele-icon class=\"tw-text-green-600\" size=\"xs\">\n check\n </cide-ele-icon>\n </div>\n } @else {\n <span class=\"tw-text-xs tw-text-gray-400\">N/A</span>\n }\n } @else {\n <span class=\"tw-text-xs tw-text-gray-400\">N/A</span>\n }\n }\n </div>\n</ng-template>\n\n<!-- Menu Rights Permissions Renderer Template -->\n<ng-template #menuRightsPermissionsRendererTemplate let-row=\"row\" let-value=\"value\">\n <div class=\"tw-flex tw-flex-wrap tw-gap-2 tw-max-w-full\">\n <!-- Role Rights Display -->\n @if (row.role_rights && row.role_rights.length > 0) {\n <div class=\"tw-mb-2\">\n <div class=\"tw-text-xs tw-text-gray-500 tw-mb-1\">Role Rights:</div>\n <div class=\"tw-flex tw-flex-wrap tw-gap-1\">\n @for (right of row.role_rights; track $index) {\n <span class=\"tw-inline-block tw-px-2 tw-py-1 tw-text-xs tw-bg-blue-100 tw-text-blue-800 tw-rounded\">\n {{ right }}\n </span>\n }\n </div>\n </div>\n }\n\n\n <!-- Exception Indicator -->\n @if (row.hasException) {\n <div class=\"tw-mt-2\">\n <span class=\"tw-inline-block tw-px-2 tw-py-1 tw-text-xs tw-bg-yellow-100 tw-text-yellow-800 tw-rounded\">\n Override\n </span>\n </div>\n } @else {\n <div class=\"tw-mt-2\">\n <span class=\"tw-text-xs tw-text-gray-400\">Default</span>\n </div>\n }\n </div>\n</ng-template>\n\n<!-- Permissions Renderer Template -->\n<ng-template #permissionsRendererTemplate let-row=\"row\" let-value=\"value\">\n <div class=\"tw-flex tw-flex-wrap tw-gap-2 tw-max-w-full\">\n @if (row._permissionValues && Object.keys(row._permissionValues).length > 0) {\n @for (permissionId of Object.keys(row._permissionValues); track permissionId) {\n <div class=\"tw-flex tw-items-center tw-space-x-2\">\n <cide-ele-input type=\"checkbox\" [ngModel]=\"row._permissionValues[permissionId].checked\"\n (ngModelChange)=\"onPermissionChangeSafe($event, row, permissionId)\"\n [id]=\"'permission-' + row._id + '-' + permissionId\" class=\"tw-h-4 tw-w-4\">\n </cide-ele-input>\n <label [for]=\"'permission-' + row._id + '-' + permissionId\" \n class=\"tw-text-xs tw-cursor-pointer\"\n [ngClass]=\"{\n 'tw-text-gray-700': row._permissionValues[permissionId].modified === row._permissionValues[permissionId].actual,\n 'tw-text-blue-600 tw-font-semibold': row._permissionValues[permissionId].modified !== row._permissionValues[permissionId].actual\n }\">\n {{ row._permissionValues[permissionId].permission?.sygms_title }}\n @if (row._permissionValues[permissionId].modified !== row._permissionValues[permissionId].actual) {\n <span class=\"tw-text-xs tw-text-orange-500 tw-ml-1\" title=\"Modified from role permission\">\n ({{ row._permissionValues[permissionId].actual ? '\u2713' : '\u2717' }})\n </span>\n }\n </label>\n </div>\n }\n } @else {\n <!-- No permissions to display - show N/A (permissions are already loaded, just empty) -->\n <span class=\"tw-text-xs tw-text-gray-400\">N/A</span>\n }\n </div>\n</ng-template>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1$2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CideInputComponent, selector: "cide-ele-input", inputs: ["fill", "label", "labelHide", "disabled", "clearInput", "labelPlacement", "labelDir", "placeholder", "leadingIcon", "trailingIcon", "helperText", "helperTextCollapse", "hideHelperAndErrorText", "errorText", "maxlength", "minlength", "required", "autocapitalize", "autocomplete", "type", "width", "id", "ngModel", "option", "min", "max", "step", "size"], outputs: ["ngModelChange"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput", "options", "multiple", "searchable", "showSearchInput", "loading", "valueKey", "labelKey", "treeView"], outputs: ["ngModelChange", "change", "searchChange"] }, { kind: "component", type: CideTextareaComponent, selector: "cide-ele-textarea", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "minlength", "maxlength", "rows", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput"], outputs: ["ngModelChange"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideEleTabComponent, selector: "cide-ele-tab", inputs: ["tabs", "activeTabId", "size", "variant", "fullWidth", "disabled"], outputs: ["tabChange"] }, { kind: "component", type: CideEleFileInputComponent, selector: "cide-ele-file-input", inputs: ["label", "accept", "multiple", "disabled", "required", "helperText", "errorText", "showPreview", "previewWidth", "previewHeight", "previewBoxMode", "showFileName", "placeholderText", "placeholderIcon", "autoUpload", "uploadData", "showFloatingUploader", "floatingUploaderGroupId"], outputs: ["fileChange", "uploadSuccess", "uploadError", "uploadProgressChange"] }, { kind: "directive", type: CideEleFileImageDirective, selector: "[cideEleFileImage]", inputs: ["fileId", "altText"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideEleDataGridComponent, selector: "cide-ele-data-grid", inputs: ["config", "templateRenderers", "customFormatters", "actionHandlers", "serverSidePagination", "totalServerItems", "currentServerPage", "currentServerPageSize", "dragDropEnabled"], outputs: ["gridEvent"] }, { kind: "component", type: CideEleToastNotificationComponent, selector: "cide-ele-toast-notification" }, { kind: "component", type: CideFormFieldErrorComponent, selector: "cide-form-field-error", inputs: ["control", "formGroup", "fieldName", "customMessages"] }] });
|
|
15946
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideCoreUserCreateComponent, isStandalone: true, selector: "cide-core-user-create", viewQueries: [{ propertyName: "menuDetailsRendererTemplate", first: true, predicate: ["menuDetailsRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "permissionsCheckboxRendererTemplate", first: true, predicate: ["permissionsCheckboxRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "menuTypeRendererTemplate", first: true, predicate: ["menuTypeRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "menuRightsPermissionsRendererTemplate", first: true, predicate: ["menuRightsPermissionsRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "permissionsRendererTemplate", first: true, predicate: ["permissionsRendererTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- \n ENTERPRISE USER MASTER FORM\n \n Enterprise-Level Styling with Tailwind CSS\n Features: Responsive grids, proper typography, enhanced user experience\n-->\n\n<div class=\"tw-w-full tw-h-full tw-p-1 tw-pt-2\">\n <!-- Toast Notifications -->\n <cide-ele-toast-notification></cide-ele-toast-notification>\n \n <form class=\"tw-max-w-7xl tw-mx-auto tw-bg-transparent\" [formGroup]=\"userMasterForm\" [class.tw-opacity-60]=\"loading()\"\n (ngSubmit)=\"onSubmit()\">\n\n\n <!-- User Context Header -->\n <div\n class=\"tw-bg-gradient-to-r tw-from-blue-50 tw-to-indigo-50 tw-border tw-border-blue-200 tw-rounded-md tw-p-1 tw-mb-2 tw-shadow-sm\">\n <div class=\"tw-flex tw-items-center tw-justify-between tw-flex-wrap tw-gap-2\">\n <!-- User Basic Info Display -->\n <div class=\"tw-flex tw-items-center tw-gap-3 tw-flex-wrap\">\n <!-- Profile Photo Preview -->\n <div class=\"tw-flex tw-items-center tw-gap-2\">\n <div\n class=\"tw-w-8 tw-h-8 tw-rounded-full tw-bg-blue-100 tw-border tw-border-blue-200 tw-flex tw-items-center tw-justify-center tw-overflow-hidden\">\n @if (userMasterForm.get('user_photo_id_cyfm')?.value) {\n <img cideEleFileImage [fileId]=\"userMasterForm.get('user_photo_id_cyfm')?.value\"\n [altText]=\"'Profile Photo'\" class=\"tw-w-full tw-h-full tw-object-cover\">\n } @else {\n <cide-ele-icon name=\"person\" class=\"tw-w-5 tw-h-5 tw-text-blue-600\">\n </cide-ele-icon>\n }\n </div>\n <div class=\"tw-flex tw-flex-col\">\n <span class=\"tw-text-xs tw-font-medium tw-text-blue-900\">\n {{ getUserFullName() || 'New User' }}\n </span>\n <span class=\"tw-text-xs tw-text-blue-600\">\n {{ getUserUsername() || 'Username not set' }}\n </span>\n </div>\n </div>\n\n <!-- Contact Info -->\n <div class=\"tw-flex tw-items-center tw-gap-3\">\n <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-xs tw-text-gray-700\">\n <cide-ele-icon variant=\"gray\" size=\"xs\">email</cide-ele-icon>\n <span>{{ getUserEmail() || 'Email not set' }}</span>\n </div>\n <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-xs tw-text-gray-700\">\n <cide-ele-icon variant=\"gray\" size=\"xs\">phone</cide-ele-icon>\n <span>{{ getUserMobile() || 'Mobile not set' }}</span>\n </div>\n </div>\n\n <!-- Active Status -->\n <div class=\"tw-flex tw-items-center tw-gap-1\">\n @if (getUserActiveStatus()) {\n <span\n class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded tw-text-xs tw-font-medium tw-bg-green-100 tw-text-green-700\">\n <cide-ele-icon variant=\"green\" size=\"xs\" class=\"tw-mr-1\">check_circle</cide-ele-icon>\n Active\n </span>\n } @else {\n <span\n class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded tw-text-xs tw-font-medium tw-bg-red-100 tw-text-red-700\">\n <cide-ele-icon variant=\"red\" size=\"xs\" class=\"tw-mr-1\">cancel</cide-ele-icon>\n Inactive\n </span>\n }\n </div>\n </div>\n\n <!-- Entity Info -->\n <div class=\"tw-flex tw-items-center tw-gap-2\">\n @if (hasDefaultEntity()) {\n <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-xs tw-text-blue-700\">\n <cide-ele-icon variant=\"blue\" size=\"xs\">business</cide-ele-icon>\n <span class=\"tw-font-medium\">{{ getDefaultEntityName() }}</span>\n </div>\n } @else {\n <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-xs tw-text-gray-500\">\n <cide-ele-icon variant=\"gray\" size=\"xs\">business</cide-ele-icon>\n <span class=\"tw-italic\">No entity</span>\n </div>\n }\n\n <span class=\"tw-text-xs tw-text-gray-600 tw-px-2 tw-py-1 tw-bg-gray-100 tw-rounded\">\n {{ getEntityMappingCount() }} mapping(s)\n </span>\n </div>\n </div>\n </div>\n\n <!-- Tab Navigation -->\n <div class=\"tw-p-0 tw-mb-2 tw-border-b tw-border-gray-200\">\n <cide-ele-tab [tabs]=\"userTabs()\" [activeTabId]=\"activeTab()\" size=\"md\" variant=\"default\"\n (tabChange)=\"onTabChange($event)\">\n </cide-ele-tab>\n </div>\n\n <!-- Tab Content -->\n <div class=\"tw-transition-opacity tw-duration-300\" [class.tw-opacity-60]=\"loading()\">\n @switch (activeTab()) {\n\n @case ('basic') {\n <!-- User Basic Information Section -->\n <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\n\n <!-- Top Section: Form Fields on Left, Profile Photo on Right -->\n <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-[1fr_200px] tw-gap-4 tw-mb-4\">\n <!-- Left Side: Form Fields -->\n <div class=\"tw-space-y-4\">\n <!-- Name Fields - All in One Row -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-4\">\n <cide-ele-input id=\"user_firstname\" label=\"First Name *\" formControlName=\"user_firstname\"\n placeholder=\"Enter first name\" [maxlength]=\"20\" size=\"md\" (ngModelChange)=\"onNameFieldChange()\">\n </cide-ele-input>\n\n <cide-ele-input id=\"user_middlename\" label=\"Middle Name\" formControlName=\"user_middlename\"\n placeholder=\"Enter middle name\" [maxlength]=\"20\" size=\"md\" (ngModelChange)=\"onNameFieldChange()\">\n </cide-ele-input>\n\n <cide-ele-input id=\"user_lastname\" label=\"Last Name *\" formControlName=\"user_lastname\"\n placeholder=\"Enter last name\" [maxlength]=\"20\" size=\"md\" (ngModelChange)=\"onNameFieldChange()\">\n </cide-ele-input>\n\n <cide-ele-input id=\"user_fullname\" label=\"Full Name * (Auto-generated)\" formControlName=\"user_fullname\"\n placeholder=\"Auto-generated from name fields or enter manually\" [maxlength]=\"62\" size=\"md\">\n </cide-ele-input>\n </div>\n\n <!-- Contact Information - All in One Row -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-3 tw-gap-4\">\n <cide-ele-input id=\"user_username\" label=\"Username *\" formControlName=\"user_username\"\n placeholder=\"Enter unique username\" [maxlength]=\"20\" size=\"md\">\n </cide-ele-input>\n\n <cide-ele-input id=\"user_emailid\" label=\"Email ID *\" formControlName=\"user_emailid\" type=\"email\"\n placeholder=\"Enter valid email address\" [maxlength]=\"320\" size=\"md\">\n </cide-ele-input>\n\n <cide-ele-input id=\"user_mobileno\" label=\"Mobile Number *\" formControlName=\"user_mobileno\" type=\"tel\"\n placeholder=\"Enter mobile number\" [maxlength]=\"15\" size=\"md\">\n </cide-ele-input>\n </div>\n </div>\n\n <!-- Right Side: Profile Photo Upload -->\n <div class=\"tw-flex tw-items-start tw-justify-center tw-p-0\">\n <cide-ele-file-input id=\"user_photo_id_cyfm\" formControlName=\"user_photo_id_cyfm\" accept=\"image/*\"\n [showPreview]=\"true\" [previewBoxMode]=\"true\" [showFileName]=\"false\" previewWidth=\"180px\"\n previewHeight=\"120px\" placeholderText=\"Upload Photo\" placeholderIcon=\"cloud_upload\" [autoUpload]=\"true\"\n [uploadData]=\"getProfilePhotoUploadData()\" (uploadSuccess)=\"onProfilePhotoUploadSuccess($event)\"\n (uploadError)=\"onProfilePhotoUploadError($event)\"\n (uploadProgressChange)=\"onProfilePhotoUploadProgress($event)\">\n </cide-ele-file-input>\n </div>\n </div>\n\n\n\n <!-- Status Control -->\n <div class=\"tw-grid tw-grid-cols-1 tw-mb-2\">\n <div class=\"tw-p-2 tw-bg-blue-50 tw-border tw-border-blue-100 tw-rounded-lg\">\n <label\n class=\"tw-flex tw-flex-col tw-cursor-pointer tw-py-2 tw-bg-transparent tw-border-none tw-rounded-none tw-transition-all tw-duration-200 hover:tw-bg-blue-75\">\n <cide-ele-input type=\"checkbox\" label=\"Active User Status\" formControlName=\"user_isactive\"\n class=\"tw-h-5 tw-accent-blue-500 tw-rounded tw-mb-1\" />\n <span class=\"tw-font-semibold tw-text-gray-700 tw-text-base\"></span>\n <span class=\"tw-text-sm tw-text-gray-600 tw-mt-1 tw-leading-relaxed\">Enable this user account for system\n access and operations</span>\n </label>\n </div>\n </div>\n </div>\n }\n\n @case ('auth') {\n <!-- Authentication Section -->\n <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\n <!-- Password Fields -->\n @if (shouldShowPasswordFields()) {\n <div class=\"tw-mb-4\">\n <!-- Password Fields Header for Edit Mode -->\n @if (isEditMode()) {\n <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\n <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-800\">Update Password</h6>\n <button type=\"button\"\n class=\"tw-px-3 tw-py-1 tw-bg-gray-100 tw-text-gray-600 tw-border tw-border-gray-300 tw-rounded-md tw-text-xs tw-font-medium hover:tw-bg-gray-200 tw-transition-colors\"\n (click)=\"cancelPasswordUpdate()\">\n Cancel Password Update\n </button>\n </div>\n }\n\n <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-2 md:tw-grid-cols-1 tw-gap-6\">\n <cide-ele-input id=\"user_password\" [label]=\"getPasswordFieldLabel()\" formControlName=\"user_password\"\n type=\"password\" placeholder=\"Enter secure password (min 8 characters)\" size=\"md\">\n </cide-ele-input>\n\n <cide-ele-input id=\"user_confirm_password\" [label]=\"getPasswordConfirmLabel()\"\n formControlName=\"user_confirm_password\" type=\"password\" placeholder=\"Confirm your password\" size=\"md\">\n </cide-ele-input>\n </div>\n </div>\n }\n\n <!-- Password Update Option for Edit Mode -->\n @if (isEditMode() && !shouldShowPasswordFields()) {\n <div class=\"tw-mb-4\">\n <div class=\"tw-p-2 tw-bg-blue-50 tw-border tw-border-blue-200 tw-rounded-lg\">\n <h6 class=\"tw-text-sm tw-font-semibold tw-text-blue-800 tw-mb-2\">Password Update</h6>\n <p class=\"tw-text-sm tw-text-blue-600 tw-mb-3\">Current password will be kept. Click below to change\n password.</p>\n\n @if (hasPasswordInput()) {\n <div\n class=\"tw-mb-3 tw-p-2 tw-bg-yellow-50 tw-border tw-border-yellow-200 tw-rounded tw-text-sm tw-text-yellow-700\">\n <cide-ele-icon variant=\"yellow\" size=\"xs\" class=\"tw-mr-1\">warning</cide-ele-icon>\n Password fields contain text. Click \"Change Password\" to manage existing input.\n </div>\n }\n\n <button type=\"button\"\n class=\"tw-px-4 tw-py-2 tw-bg-blue-100 tw-text-blue-700 tw-border tw-border-blue-300 tw-rounded-md tw-text-sm tw-font-medium hover:tw-bg-blue-200 tw-transition-colors\"\n (click)=\"triggerPasswordUpdate()\">\n @if (hasPasswordInput()) {\n Manage Password Fields\n } @else {\n Change Password\n }\n </button>\n </div>\n </div>\n }\n\n <!-- Password Options -->\n <div class=\"tw-grid tw-grid-cols-1 tw-gap-4 tw-mb-4\">\n <div class=\"tw-p-2 tw-bg-yellow-50 tw-border tw-border-yellow-100 tw-rounded-lg\">\n <label\n class=\"tw-flex tw-flex-col tw-gap-2 tw-cursor-pointer tw-py-2 tw-bg-transparent tw-border-none tw-rounded-none tw-transition-all tw-duration-200\">\n <cide-ele-input type=\"checkbox\" label=\"Force Password Change on Login\"\n formControlName=\"user_passwordchangeonlogin\" class=\"tw-h-5 tw-accent-yellow-500 tw-rounded tw-mb-1\" />\n <span class=\"tw-text-sm tw-text-gray-600 tw-mt-1 tw-leading-relaxed\">User will be required to change\n password on next login</span>\n </label>\n </div>\n </div>\n\n </div>\n }\n\n @case ('roles') {\n <!-- Entity, Roles & Permissions Mapping Section -->\n <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\n\n\n\n <!-- Important Note -->\n <div class=\"tw-bg-amber-50 tw-border tw-border-amber-200 tw-rounded-lg tw-p-2 tw-mb-4\">\n <div class=\"tw-flex tw-items-start tw-gap-3\">\n <cide-ele-icon variant=\"amber\" size=\"lg\">info</cide-ele-icon>\n <div class=\"tw-flex-1\">\n <h4 class=\"tw-text-sm tw-font-semibold tw-text-amber-800 tw-mb-1\">Entity-Role Based Access</h4>\n <p class=\"tw-text-sm tw-text-amber-700 tw-mb-2\">User access is completely managed through entity-role\n mappings below. At least one entity mapping is required for user access.</p>\n @if (hasDefaultEntity()) {\n <div class=\"tw-flex tw-items-center tw-gap-2 tw-mt-2 tw-p-2 tw-bg-amber-100 tw-rounded\">\n <cide-ele-icon variant=\"amber\" size=\"sm\">star</cide-ele-icon>\n <span class=\"tw-text-sm tw-text-amber-800\">\n <strong>Default Entity:</strong> {{ getDefaultEntityName() }}\n </span>\n </div>\n } @else {\n <div class=\"tw-text-sm tw-text-amber-600 tw-mt-2 tw-italic\">\n \u26A0\uFE0F No default entity selected. Please set one entity as default.\n </div>\n }\n </div>\n </div>\n </div>\n\n <!-- Entity-Role Mapping Section -->\n <div class=\"tw-flex tw-text-center tw-justify-between tw-items-center tw-mb-4\">\n <div>\n <h4 class=\"tw-text-sm tw-text-left tw-font-semibold tw-text-blue-900 tw-mb-1\">Entity-Role Mapping</h4>\n <p class=\"tw-text-sm tw-text-blue-700\">Map user to entities with specific roles and permissions</p>\n </div>\n <div class=\"tw-flex tw-flex-col tw-items-end\">\n <button cideEleButton variant=\"primary\" size=\"md\" type=\"button\" (click)=\"addEntityMapping()\"\n leftIcon=\"add\" [disabled]=\"isAllEntitiesMapped()\">\n Add Entity Mapping\n </button>\n\n @if (isAllEntitiesMapped()) {\n <div class=\"tw-mt-2 tw-p-2 tw-bg-blue-50 tw-border tw-border-blue-200 tw-rounded-md tw-max-w-xs\">\n <p class=\"tw-text-xs tw-text-blue-700\">\n <cide-ele-icon variant=\"info\" size=\"xs\" class=\"tw-mr-1\">info</cide-ele-icon>\n All available entities are already mapped.\n </p>\n </div>\n }\n </div>\n </div>\n\n <div formArrayName=\"core_entity_mapping\">\n @for (mapping of entityMappings(); track $index; let i = $index) {\n <div class=\"tw-bg-white tw-border tw-border-blue-200 tw-rounded-xl tw-mb-6 tw-overflow-hidden tw-shadow-sm\"\n [formGroupName]=\"i\">\n <div\n class=\"tw-bg-gradient-to-r tw-from-blue-50 tw-to-blue-100 tw-px-6 tw-py-3 tw-flex tw-justify-between tw-items-center tw-border-b tw-border-blue-200\">\n <div class=\"tw-flex tw-items-center tw-gap-2\">\n <h5 class=\"tw-m-0 tw-text-blue-800 tw-text-sm tw-font-semibold\">Entity Mapping {{ i + 1 }}</h5>\n @if (mapping.syenm_isdefault) {\n <span\n class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded-full tw-text-xs tw-font-medium tw-bg-green-100 tw-text-green-800\">\n <cide-ele-icon variant=\"green\" size=\"xs\" class=\"tw-mr-1\">star</cide-ele-icon>\n Default\n </span>\n }\n </div>\n @if (!mapping?._id) {\n <button cideEleButton variant=\"danger\" size=\"sm\" type=\"button\" (click)=\"removeEntityMapping(i)\"\n leftIcon=\"delete\">\n Remove\n </button>\n }\n </div>\n\n <div>\n <!-- Entity and Role Selection -->\n <div class=\"tw-grid tw-px-3 tw-py-1 tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4 tw-mb-4\">\n <div>\n <cide-ele-select label=\"Entity *\" [options]=\"getFilteredEntityOptions(i)\"\n formControlName=\"syenm_entity_id_syen\" valueKey=\"_id\" labelKey=\"syen_name\"\n placeholder=\"Select entity\" size=\"md\" (change)=\"onEntityChange(i, $event)\">\n </cide-ele-select>\n\n @if (isAllEntitiesSelected(i)) {\n <div class=\"tw-mt-2 tw-p-2 tw-bg-yellow-50 tw-border tw-border-yellow-200 tw-rounded-md\">\n <p class=\"tw-text-xs tw-text-yellow-700\">\n <cide-ele-icon variant=\"warning\" size=\"xs\" class=\"tw-mr-1\">info</cide-ele-icon>\n All entities are already mapped. Remove another mapping to add this one.\n </p>\n </div>\n }\n </div>\n <cide-ele-select label=\"Role for this Entity\" [options]=\"getRoleOptionsForEntity(i)\"\n formControlName=\"syenm_role_id_syusrol\" valueKey=\"_id\" labelKey=\"syusrol_role_name\"\n placeholder=\"Select role for this entity\" size=\"md\" (change)=\"onRoleChange(i, $event)\">\n </cide-ele-select>\n </div>\n\n\n <!-- Entity-Specific Details and Active Period - All in One Row -->\n <div class=\"tw-grid tw-px-3 tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-4 tw-mb-4\">\n <cide-ele-select label=\"Department for this Entity\" [options]=\"getDepartmentOptionsForEntity(i)\"\n formControlName=\"syenm_department_id_sydept\" (change)=\"onDepartmentChange($event)\" valueKey=\"_id\"\n labelKey=\"sydept_name\" placeholder=\"Select department\" size=\"md\">\n </cide-ele-select>\n\n <cide-ele-select label=\"Designation for this Entity\" [options]=\"getDesignationOptionsForEntity(i)\"\n valueKey=\"_id\" labelKey=\"sydsg_name\" formControlName=\"syenm_designation_id_sydsg\"\n placeholder=\"Select designation\" size=\"md\">\n </cide-ele-select>\n\n <cide-ele-input label=\"Active From *\" [id]=\"'syenm_activefrom['+i+']'\"\n formControlName=\"syenm_activefrom\" type=\"date\" size=\"md\">\n </cide-ele-input>\n\n <cide-ele-input label=\"Active Until\" [id]=\"'syenm_activeupto['+i+']'\"\n formControlName=\"syenm_activeupto\" type=\"date\" size=\"md\">\n </cide-ele-input>\n </div>\n\n <!-- Mapping Settings -->\n <div class=\"tw-grid tw-px-3 tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-4 tw-mb-4\">\n <div class=\"tw-p-2 tw-bg-green-50 tw-border tw-border-green-200 tw-rounded-lg\">\n <cide-ele-input type=\"checkbox\" label=\"Default Entity\" formControlName=\"syenm_isdefault\"\n (change)=\"onDefaultEntityChange(i, $event)\" class=\"tw-h-5 tw-accent-green-500\" />\n <span class=\"tw-text-xs tw-text-green-600 tw-block tw-mt-1\">Set as user's default entity (only one\n allowed)</span>\n </div>\n\n <div class=\"tw-p-2 tw-bg-blue-50 tw-border tw-border-blue-200 tw-rounded-lg\">\n <cide-ele-input type=\"checkbox\" label=\"Active Mapping\" formControlName=\"syenm_isactive\"\n class=\"tw-h-5 tw-accent-blue-500\" />\n <span class=\"tw-text-xs tw-text-blue-600 tw-block tw-mt-1\">Enable this entity mapping</span>\n </div>\n </div>\n\n <!-- Menu Rights Grid for this Entity-Role -->\n <div class=\"tw-border-t tw-border-gray-200\">\n\n @if (getMenuRightsForMapping(i).length > 0) {\n <!-- Menu Rights Tree Grid -->\n\n <cide-ele-data-grid [config]=\"getMenuRightsGridConfig(i)\"\n [templateRenderers]=\"getMenuRightsTemplateRenderers(i)\"\n (gridEvent)=\"onMenuRightsGridEvent($event, i)\" class=\"tw-h-96 tw-w-full\">\n </cide-ele-data-grid>\n\n } @else {\n <div class=\"tw-text-center tw-py-8 tw-bg-gray-50 tw-border tw-border-gray-200 tw-rounded-lg\">\n <div class=\"tw-text-gray-400 tw-mb-3\">\n <cide-ele-icon variant=\"gray\" size=\"lg\">menu</cide-ele-icon>\n </div>\n <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-600 tw-mb-2\">No Menu Rights Available</h6>\n <p class=\"tw-text-xs tw-text-gray-500 tw-mb-3 tw-text-center\">Select both entity and role to\n automatically load\n menu rights for this mapping.</p>\n </div>\n }\n </div>\n </div>\n </div>\n }\n </div>\n\n @if (entityMappings().length === 0) {\n <div class=\"tw-text-center tw-py-8 tw-bg-white tw-border tw-border-blue-200 tw-rounded-lg\">\n <div class=\"tw-text-blue-400 tw-mb-3\">\n <cide-ele-icon variant=\"blue\" size=\"lg\">business</cide-ele-icon>\n </div>\n <h4 class=\"tw-text-sm tw-font-medium tw-text-blue-800 tw-mb-2\">No Entity Mappings</h4>\n <p class=\"tw-text-blue-600 tw-mb-4 tw-text-center\">Add entity mappings to assign specific roles and\n permissions for different entities.</p>\n <button class=\"tw-mx-auto\" cideEleButton variant=\"primary\" size=\"md\" type=\"button\"\n (click)=\"addEntityMapping()\" leftIcon=\"add\">\n Add First Entity Mapping\n </button>\n </div>\n }\n </div>\n }\n\n @case ('addresses') {\n <!-- Contact Addresses Section -->\n <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\n <div class=\"tw-flex tw-justify-end\">\n <div class=\"tw-flex tw-justify-between tw-items-end tw-mb-2 tw-gap-4\">\n <button cideEleButton variant=\"primary\" size=\"md\" type=\"button\" (click)=\"addContactAddress()\"\n leftIcon=\"add\" [disabled]=\"!hasAddContactAddressRights()\">\n Add New Address\n </button>\n </div>\n </div>\n\n <div formArrayName=\"core_user_contact_addresses\">\n @for (address of contactAddresses(); track $index; let i = $index) {\n <div [formGroupName]=\"i\"\n class=\"tw-bg-white tw-border tw-border-gray-200 tw-rounded-xl tw-mb-8 tw-overflow-hidden tw-transition-all tw-duration-300 hover:tw-shadow-lg tw-shadow-sm\">\n <div\n class=\"tw-bg-gradient-to-r tw-from-gray-50 tw-to-gray-100 tw-px-4 tw-py-2 tw-flex tw-justify-between tw-items-center tw-border-b tw-border-gray-200\">\n <!-- Use address type as header instead of generic \"Address X\" -->\n <h4 class=\"tw-m-0 tw-text-gray-700 tw-text-sm tw-font-semibold tw-tracking-tight\">\n {{ getAddressTypeLabel(i) || ('Address ' + (i + 1)) }}\n </h4>\n <div class=\"tw-flex tw-items-center tw-gap-2\">\n @if (isAddressOwner(i)) {\n <button cideEleButton variant=\"secondary\" size=\"xs\" type=\"button\" (click)=\"shareAddress(i)\"\n leftIcon=\"share\" class=\"tw-text-blue-600 hover:tw-text-blue-700\">\n Share\n </button>\n }\n @if (!address?._id) {\n <button cideEleButton variant=\"danger\" size=\"sm\" type=\"button\" (click)=\"removeContactAddress(i)\"\n leftIcon=\"delete\">\n Remove\n </button>\n }\n </div>\n </div>\n <div class=\"tw-p-4\">\n <!-- Main Layout: Inputs on Left, Address Textarea on Right -->\n <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-4 tw-gap-3 tw-mb-3\">\n \n <!-- Left Side: Input Fields (3/4 width) -->\n <div class=\"lg:tw-col-span-3\">\n <!-- Row 1: Address Type, Contact Person -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3 tw-mb-3\">\n <cide-ele-select label=\"Address Type\" [options]=\"addressTypeOptions()\" id=\"sycad_address_type_id_sygms\"\n formControlName=\"sycad_address_type_id_sygms\" placeholder=\"Select type\" size=\"sm\"\n valueKey=\"_id\" labelKey=\"sygms_title\" (change)=\"onAddressTypeChange(i)\">\n </cide-ele-select>\n\n <cide-ele-input label=\"Contact Person\" formControlName=\"sycad_contact_person_name\"\n placeholder=\"Enter contact person\" size=\"sm\">\n </cide-ele-input>\n </div>\n\n <!-- Row 2: Postal Code, City, State, Country -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-4 tw-gap-3\">\n <cide-ele-select label=\"Postal Code\" [options]=\"addressPostalCodes()[i] || []\"\n formControlName=\"sycad_contact_pin_sypin\" placeholder=\"Select postal code\" [searchable]=\"true\"\n [loading]=\"addressPostalCodesLoading()[i] || false\" (searchChange)=\"onPostalCodeSearch($event, i)\"\n (change)=\"onPostalCodeSelection($event, i)\" size=\"sm\">\n </cide-ele-select>\n\n <cide-ele-input label=\"City\" formControlName=\"sycad_contact_city_sypin\" placeholder=\"Enter city\"\n size=\"sm\">\n </cide-ele-input>\n\n <cide-ele-input label=\"State\" formControlName=\"sycad_contact_state_sypin\" placeholder=\"Enter state\"\n size=\"sm\">\n </cide-ele-input>\n\n <cide-ele-select label=\"Country\" [options]=\"addressCountries()[i] || []\"\n formControlName=\"sycad_contact_country_syctr\" placeholder=\"Select country\" valueKey=\"_id\"\n labelKey=\"syctr_country_iso_name\" [searchable]=\"true\" (searchChange)=\"onCountrySearch($event, i)\"\n [loading]=\"addressCountriesLoading()[i] || false\" size=\"sm\">\n </cide-ele-select>\n </div>\n </div>\n\n <!-- Right Side: Address Textarea (1/4 width, spans 2 rows) -->\n <div class=\"lg:tw-col-span-1 lg:tw-row-span-2 tw-flex tw-flex-col\">\n <cide-ele-textarea label=\"Complete Address\" formControlName=\"sycad_contact_address\"\n placeholder=\"Enter complete address with area, city, and landmarks\" [rows]=\"4\" size=\"sm\"\n class=\"tw-h-full\">\n </cide-ele-textarea>\n </div>\n </div>\n\n <!-- Contact Details: Primary Phone, Alt Phone, Fax, Primary Email in 4 columns -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-4 tw-gap-3 tw-mb-3\">\n <cide-ele-input label=\"Primary Phone\" formControlName=\"sycad_contact_phone\" type=\"tel\"\n placeholder=\"Primary phone\" size=\"sm\">\n </cide-ele-input>\n\n <cide-ele-input label=\"Alternate Phone\" formControlName=\"sycad_contact_phone_alt\" type=\"tel\"\n placeholder=\"Alternate phone\" size=\"sm\">\n </cide-ele-input>\n\n <cide-ele-input label=\"Fax Number\" formControlName=\"sycad_contact_fax\" placeholder=\"Fax number\"\n size=\"sm\">\n </cide-ele-input>\n\n <cide-ele-input label=\"Primary Email\" formControlName=\"sycad_contact_email\" type=\"email\"\n placeholder=\"Primary email\" size=\"sm\">\n </cide-ele-input>\n </div>\n\n <!-- Alternate Email in single row -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3\">\n <cide-ele-input label=\"Alternate Email\" formControlName=\"sycad_contact_email_alt\" type=\"email\"\n placeholder=\"Alternate email address\" size=\"sm\">\n </cide-ele-input>\n </div>\n </div>\n </div>\n }\n </div>\n </div>\n }\n\n @case ('documents') {\n <!-- Documents Section -->\n <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\n <div class=\"tw-flex tw-justify-end tw-items-end tw-mb-2 tw-gap-4\">\n <button cideEleButton variant=\"primary\" size=\"md\" type=\"button\" (click)=\"addDocument()\" leftIcon=\"add\" [disabled]=\"!hasAddDocumentRights()\">\n Add Document\n </button>\n </div>\n <div formArrayName=\"core_user_documents\">\n @for (doc of documents(); track $index; let i = $index) {\n <div [formGroupName]=\"i\"\n class=\"tw-bg-white tw-border tw-border-gray-200 tw-rounded-xl tw-mb-8 tw-overflow-hidden tw-transition-all tw-duration-300 hover:tw-shadow-lg tw-shadow-sm\">\n <div\n class=\"tw-bg-gradient-to-r tw-from-gray-50 tw-to-gray-100 tw-px-4 tw-py-2 tw-flex tw-justify-between tw-items-center tw-border-b tw-border-gray-200\">\n <h4 class=\"tw-m-0 tw-text-gray-700 tw-text-sm tw-font-semibold tw-tracking-tight\">\n {{ getDocumentTypeLabel(i) || ('Document ' + (i + 1)) }}\n </h4>\n <div class=\"tw-flex tw-gap-2\">\n @if (doc?._id) {\n <button cideEleButton variant=\"secondary\" size=\"sm\" type=\"button\" (click)=\"shareDocumentRights(i)\"\n leftIcon=\"share\">\n Share\n </button>\n }\n </div>\n </div>\n <div class=\"tw-p-4\">\n <!-- Main Layout: Inputs on Left, File Upload on Right -->\n <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-3 tw-gap-4\">\n \n <!-- Left Side: Document Information (2/3 width) -->\n <div class=\"lg:tw-col-span-2\">\n <!-- Row 1: Document Type, Document Number, Name as per Document -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-3 tw-mb-3\">\n <cide-ele-select label=\"Document Type\" [options]=\"documentTypeOptions()\"\n formControlName=\"syusd_document_type_id_sygms\" placeholder=\"Select type\" size=\"sm\"\n valueKey=\"_id\" labelKey=\"sygms_title\" (change)=\"onDocumentTypeChange(i)\">\n </cide-ele-select>\n\n <cide-ele-input label=\"Document Number\" formControlName=\"syusd_doc_number\"\n placeholder=\"Document number\" size=\"sm\">\n </cide-ele-input>\n\n <cide-ele-input label=\"Name as per Document\" formControlName=\"syusd_doc_name_as_per_doc\"\n placeholder=\"Name on document\" size=\"sm\">\n </cide-ele-input>\n </div>\n\n <!-- Row 2: Issue Date, Expiry Date, Photo Group -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-3 tw-mb-3\">\n <cide-ele-input label=\"Issue Date\" formControlName=\"syusd_doc_issue_date\"\n [id]=\"'syusd_doc_issue_date['+i+']'\" type=\"date\" size=\"sm\">\n </cide-ele-input>\n\n <cide-ele-input label=\"Expiry Date\" formControlName=\"syusd_doc_expiry_date\"\n [id]=\"'syusd_doc_expiry_date['+i+']'\" type=\"date\" size=\"sm\">\n </cide-ele-input>\n </div>\n\n <!-- Row 3: Verification Status, KYC Status -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3\">\n <cide-ele-select label=\"Verification Status\" [options]=\"documentVerificationStatusOptions()\"\n formControlName=\"syusd_doc_verification_status_id_sygms\" placeholder=\"Select status\"\n size=\"sm\" valueKey=\"_id\" labelKey=\"sygms_title\">\n </cide-ele-select>\n\n <cide-ele-select label=\"KYC Status\" [options]=\"documentKycStatusOptions()\"\n formControlName=\"syusd_doc_kyc_status_id_sygms\" placeholder=\"Select KYC status\" size=\"sm\"\n valueKey=\"_id\" labelKey=\"sygms_title\">\n </cide-ele-select>\n </div>\n </div>\n\n <!-- Right Side: File Upload (1/3 width) -->\n <div class=\"lg:tw-col-span-1\">\n <div class=\"tw-bg-gray-50 tw-border tw-border-gray-200 tw-rounded-lg tw-p-3 tw-h-full\">\n \n <!-- File Upload Input -->\n <cide-ele-file-input\n [id]=\"'document-files-' + i\"\n [multiple]=\"true\"\n formControlName=\"syusd_photo_group_id_cyfm\"\n [accept]=\"'.pdf,.jpg,.jpeg,.png,.doc,.docx'\"\n [autoUpload]=\"true\"\n [uploadData]=\"getDocumentUploadData(i)\"\n (change)=\"onDocumentFilesSelected($event, i)\"\n (uploadSuccess)=\"onDocumentUploadSuccess($event, i)\"\n (uploadError)=\"onDocumentUploadError($event, i)\"\n (uploadProgressChange)=\"onDocumentUploadProgress($event, i)\"\n class=\"tw-mb-3\"\n size=\"sm\">\n </cide-ele-file-input>\n\n <!-- Upload Status -->\n <!-- Upload status is now handled by the file input component itself -->\n </div>\n </div>\n </div>\n </div>\n </div>\n }\n </div>\n </div>\n }\n\n @case ('family') {\n <!-- Family Details Section - Compact Design -->\n <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\n <div class=\"tw-flex tw-justify-end tw-items-end tw-mb-3 tw-gap-4\">\n <button cideEleButton variant=\"primary\" size=\"sm\" type=\"button\" (click)=\"addFamilyDetail()\" leftIcon=\"add\" [disabled]=\"!hasAddFamilyDetailRights()\">\n Add Family Member\n </button>\n </div>\n\n <div formArrayName=\"core_user_family_details\">\n @for (family of familyDetails(); track $index; let i = $index) {\n <div [formGroupName]=\"i\"\n class=\"tw-bg-white tw-border tw-border-gray-200 tw-rounded-lg tw-mb-4 tw-overflow-hidden tw-transition-all tw-duration-200 hover:tw-shadow-md tw-shadow-sm\">\n \n <!-- Compact Header -->\n <div class=\"tw-bg-gray-50 tw-px-4 tw-py-2 tw-flex tw-justify-between tw-items-center tw-border-b tw-border-gray-200\">\n <h4 class=\"tw-m-0 tw-text-gray-700 tw-text-sm tw-font-medium\">Family Member {{ i + 1 }}</h4>\n <div class=\"tw-flex tw-gap-2\">\n @if (family?._id) {\n <button cideEleButton variant=\"secondary\" size=\"xs\" type=\"button\" (click)=\"shareFamilyDetailRights(i)\"\n leftIcon=\"share\">\n Share\n </button>\n }\n @if (!family?._id) {\n <button cideEleButton variant=\"danger\" size=\"xs\" type=\"button\" (click)=\"removeFamilyDetail(i)\" leftIcon=\"delete\">\n Remove\n </button>\n }\n </div>\n </div>\n \n <!-- Compact Form Content - 3 inputs per row -->\n <div class=\"tw-p-4\">\n <!-- Row 1: Name, User, and Combined Relationship/Active Status (33.33% each) -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-3 tw-mb-3\">\n <cide-ele-input label=\"Family Member Name\" formControlName=\"syfdl_family_member_name\"\n placeholder=\"Enter family member full name\" size=\"sm\">\n </cide-ele-input>\n\n <cide-ele-select label=\"Family Member User\" [options]=\"userOptions(i)\"\n formControlName=\"syfdl_family_member_id_user\" placeholder=\"Select family member user\" size=\"sm\"\n valueKey=\"_id\" labelKey=\"user_fullname\" [searchable]=\"true\"\n [loading]=\"userSearchLoading()[i] || false\" (searchChange)=\"onUserSearchChange($event, i)\"\n (change)=\"onUserSelectionChange($event, i)\">\n </cide-ele-select>\n\n <!-- Combined Relationship and Active Status (33.33%) -->\n <div class=\"tw-flex tw-flex-row tw-gap-2 tw-items-end\">\n <div class=\"tw-flex-1\">\n <cide-ele-select label=\"Relationship\" [options]=\"relationshipOptions()\"\n formControlName=\"syfdl_relationship_id_sygms\" placeholder=\"Select relationship\" size=\"sm\"\n valueKey=\"_id\" labelKey=\"sygms_title\">\n </cide-ele-select>\n </div>\n\n <div class=\"tw-flex tw-items-center tw-pt-1 tw-flex-shrink-0\">\n <cide-ele-input formControlName=\"syfdl_isactive\" type=\"checkbox\" label=\"Active\" size=\"sm\">\n </cide-ele-input>\n </div>\n </div>\n </div>\n\n <!-- Row 2: Blood Group, DOB, and Phone -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 xl:tw-grid-cols-3 tw-gap-3 tw-mb-3\">\n <cide-ele-select label=\"Blood Group\" [options]=\"bloodGroupOptions()\"\n formControlName=\"syfdl_blood_group_sygms\" placeholder=\"Select blood group\" size=\"sm\" valueKey=\"_id\"\n labelKey=\"sygms_title\">\n </cide-ele-select>\n\n <cide-ele-input label=\"Date of Birth\" formControlName=\"syfdl_family_member_dob\" type=\"date\" size=\"sm\"\n [id]=\"'syfdl_family_member_dob['+i+']'\">\n </cide-ele-input>\n\n <cide-ele-input label=\"Contact Phone\" formControlName=\"syfdl_contact_phone\" type=\"tel\"\n placeholder=\"Enter contact phone\" size=\"sm\">\n </cide-ele-input>\n </div>\n\n <!-- Row 3: Email, Email ID, and Contact Number -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 xl:tw-grid-cols-3 tw-gap-3 tw-mb-3\">\n <cide-ele-input label=\"Contact Email\" formControlName=\"syfdl_contact_email\" type=\"email\"\n placeholder=\"Enter contact email\" size=\"sm\">\n </cide-ele-input>\n\n <cide-ele-input label=\"Contact Email ID\" formControlName=\"syfdl_contact_email_id\" type=\"email\"\n placeholder=\"Enter contact email ID\" size=\"sm\">\n </cide-ele-input>\n\n <cide-ele-input label=\"Contact Number\" formControlName=\"syfdl_contact_number\" type=\"tel\"\n placeholder=\"Enter contact number\" size=\"sm\">\n </cide-ele-input>\n </div>\n\n </div>\n </div>\n }\n </div>\n </div>\n }\n }\n </div>\n\n <!-- Form Actions -->\n <div\n class=\"tw-flex tw-justify-between tw-items-center tw-gap-4 tw-py-2 tw-bg-white tw-border-t tw-border-gray-200 tw-sticky tw-bottom-0 tw-z-10\">\n <!-- Error Display Component -->\n <div class=\"tw-flex-1\">\n <cide-form-field-error [formGroup]=\"userMasterForm\"></cide-form-field-error>\n </div>\n\n <!-- Action Buttons -->\n <div class=\"tw-flex tw-gap-4\">\n <button cideEleButton type=\"button\" variant=\"secondary\" (click)=\"resetForm()\" leftIcon=\"refresh\"\n [disabled]=\"loading()\">\n Reset Form\n </button>\n\n <button cideEleButton type=\"submit\" variant=\"primary\" [disabled]=\"loading() || userMasterForm.invalid\"\n [loading]=\"loading()\" leftIcon=\"save\">\n Save User Master\n </button>\n </div>\n </div>\n </form>\n</div>\n\n<!-- Template Renderers for Role Permissions Grid -->\n<ng-template #menuDetailsRendererTemplate let-row=\"row\">\n <div class=\"tw-flex tw-items-center tw-space-x-3 tw-min-w-0\">\n <!-- Menu Icon -->\n <div class=\"tw-flex-shrink-0\">\n @if (row.syme_type === 'module') {\n <cide-ele-icon class=\"tw-text-blue-600 tw-w-4 tw-h-4\">folder</cide-ele-icon>\n } @else if (row.syme_type === 'section') {\n <cide-ele-icon class=\"tw-text-green-600 tw-w-4 tw-h-4\">folder_open</cide-ele-icon>\n } @else if (row.syme_type === 'menu') {\n <cide-ele-icon class=\"tw-text-purple-600 tw-w-4 tw-h-4\">menu</cide-ele-icon>\n } @else {\n <cide-ele-icon class=\"tw-text-gray-600 tw-w-4 tw-h-4\">description</cide-ele-icon>\n }\n </div>\n\n <!-- Menu Details -->\n <div class=\"tw-ml-3 tw-min-w-0 tw-flex-1\">\n <div class=\"tw-flex tw-items-center tw-gap-2\">\n <div class=\"tw-text-xs tw-font-medium tw-text-gray-900 tw-truncate\" [title]=\"row.syme_title\">\n {{ row.syme_title || row.menu?.syme_title || row.menu?.syme_menu_name || 'Untitled' }}\n </div>\n <!-- Green pill indicator for parent menus with child permissions -->\n @if (row.syme_type === 'module' || row.syme_type === 'section') {\n @if (hasChildMenusWithPermissions(row._id)) {\n <span\n class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-green-100 tw-text-green-800 tw-whitespace-nowrap\">\n Assigned\n </span>\n }\n }\n </div>\n @if (row.permission?.sygms_name) {\n <div class=\"tw-text-xs tw-text-blue-500 tw-truncate\" [title]=\"row.permission?.sygms_name\">\n {{ row.permission?.sygms_name }}\n </div>\n }\n </div>\n </div>\n</ng-template>\n\n<!-- Menu Type Renderer Template -->\n<ng-template #menuTypeRendererTemplate let-row=\"row\" let-value=\"value\">\n <div class=\"tw-flex tw-items-center tw-justify-center\">\n @if (row.syme_type === 'module') {\n <span\n class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded-full tw-text-xs tw-font-medium tw-bg-blue-100 tw-text-blue-800\">\n Module\n </span>\n } @else if (row.syme_type === 'section') {\n <span\n class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded-full tw-text-xs tw-font-medium tw-bg-green-100 tw-text-green-800\">\n Section\n </span>\n } @else if (row.syme_type === 'menu') {\n <span\n class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded-full tw-text-xs tw-font-medium tw-bg-purple-100 tw-text-purple-800\">\n Menu\n </span>\n } @else {\n <span\n class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded-full tw-text-xs tw-font-medium tw-bg-gray-100 tw-text-gray-800\">\n {{ row.syme_type || 'Unknown' }}\n </span>\n }\n </div>\n</ng-template>\n\n<!-- Permissions Checkbox Renderer Template -->\n<ng-template #permissionsCheckboxRendererTemplate let-row=\"row\" let-value=\"value\">\n <div class=\"tw-flex tw-flex-wrap tw-gap-2 tw-max-w-full\">\n @if (row.syme_type === 'menu' && row?.syme_permissions_id_sygms && row?.syme_permissions_id_sygms.length > 0) {\n @for (permissionId of row?.syme_permissions_id_sygms || []; track permissionId) {\n <div class=\"tw-flex tw-items-center tw-space-x-1\">\n <div class=\"tw-flex tw-items-center tw-space-x-1\">\n <input type=\"checkbox\" [checked]=\"isPermissionSelected(row._id, permissionId)\" [disabled]=\"true\"\n class=\"tw-h-4 tw-w-4 tw-text-blue-600 tw-bg-gray-100 tw-border-gray-300 tw-rounded focus:tw-ring-blue-500\">\n <label class=\"tw-text-xs tw-text-gray-700\">\n {{ getPermissionById(permissionId)?.sygms_title || 'Unknown' }}\n </label>\n </div>\n </div>\n }\n } @else {\n <!-- Show green checkmark for parent menus with child permissions -->\n @if (row.syme_type === 'module' || row.syme_type === 'section' || row.syme_type === 'title') {\n @if (hasChildMenusWithPermissions(row._id)) {\n <div class=\"tw-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-bg-green-100 tw-rounded-full\">\n <cide-ele-icon class=\"tw-text-green-600\" size=\"xs\">\n check\n </cide-ele-icon>\n </div>\n } @else {\n <span class=\"tw-text-xs tw-text-gray-400\">N/A</span>\n }\n } @else {\n <span class=\"tw-text-xs tw-text-gray-400\">N/A</span>\n }\n }\n </div>\n</ng-template>\n\n<!-- Menu Rights Permissions Renderer Template -->\n<ng-template #menuRightsPermissionsRendererTemplate let-row=\"row\" let-value=\"value\">\n <div class=\"tw-flex tw-flex-wrap tw-gap-2 tw-max-w-full\">\n <!-- Role Rights Display -->\n @if (row.role_rights && row.role_rights.length > 0) {\n <div class=\"tw-mb-2\">\n <div class=\"tw-text-xs tw-text-gray-500 tw-mb-1\">Role Rights:</div>\n <div class=\"tw-flex tw-flex-wrap tw-gap-1\">\n @for (right of row.role_rights; track $index) {\n <span class=\"tw-inline-block tw-px-2 tw-py-1 tw-text-xs tw-bg-blue-100 tw-text-blue-800 tw-rounded\">\n {{ right }}\n </span>\n }\n </div>\n </div>\n }\n\n\n <!-- Exception Indicator -->\n @if (row.hasException) {\n <div class=\"tw-mt-2\">\n <span class=\"tw-inline-block tw-px-2 tw-py-1 tw-text-xs tw-bg-yellow-100 tw-text-yellow-800 tw-rounded\">\n Override\n </span>\n </div>\n } @else {\n <div class=\"tw-mt-2\">\n <span class=\"tw-text-xs tw-text-gray-400\">Default</span>\n </div>\n }\n </div>\n</ng-template>\n\n<!-- Permissions Renderer Template -->\n<ng-template #permissionsRendererTemplate let-row=\"row\" let-value=\"value\">\n <div class=\"tw-flex tw-flex-wrap tw-gap-2 tw-max-w-full\">\n @if (row._permissionValues && Object.keys(row._permissionValues).length > 0) {\n @for (permissionId of Object.keys(row._permissionValues); track permissionId) {\n <div class=\"tw-flex tw-items-center tw-space-x-2\">\n <cide-ele-input type=\"checkbox\" [ngModel]=\"row._permissionValues[permissionId].checked\"\n (ngModelChange)=\"onPermissionChangeSafe($event, row, permissionId)\"\n [id]=\"'permission-' + row._id + '-' + permissionId\" class=\"tw-h-4 tw-w-4\">\n </cide-ele-input>\n <label [for]=\"'permission-' + row._id + '-' + permissionId\" \n class=\"tw-text-xs tw-cursor-pointer\"\n [ngClass]=\"{\n 'tw-text-gray-700': row._permissionValues[permissionId].modified === row._permissionValues[permissionId].actual,\n 'tw-text-blue-600 tw-font-semibold': row._permissionValues[permissionId].modified !== row._permissionValues[permissionId].actual\n }\">\n {{ row._permissionValues[permissionId].permission?.sygms_title }}\n @if (row._permissionValues[permissionId].modified !== row._permissionValues[permissionId].actual) {\n <span class=\"tw-text-xs tw-text-orange-500 tw-ml-1\" title=\"Modified from role permission\">\n ({{ row._permissionValues[permissionId].actual ? '\u2713' : '\u2717' }})\n </span>\n }\n </label>\n </div>\n }\n } @else {\n <!-- No permissions to display - show N/A (permissions are already loaded, just empty) -->\n <span class=\"tw-text-xs tw-text-gray-400\">N/A</span>\n }\n </div>\n</ng-template>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1$2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CideInputComponent, selector: "cide-ele-input", inputs: ["fill", "label", "labelHide", "disabled", "clearInput", "labelPlacement", "labelDir", "placeholder", "leadingIcon", "trailingIcon", "helperText", "helperTextCollapse", "hideHelperAndErrorText", "errorText", "maxlength", "minlength", "required", "autocapitalize", "autocomplete", "type", "width", "id", "ngModel", "option", "min", "max", "step", "size"], outputs: ["ngModelChange"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput", "options", "multiple", "searchable", "showSearchInput", "loading", "valueKey", "labelKey", "treeView"], outputs: ["ngModelChange", "change", "searchChange"] }, { kind: "component", type: CideTextareaComponent, selector: "cide-ele-textarea", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "minlength", "maxlength", "rows", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput"], outputs: ["ngModelChange"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideEleTabComponent, selector: "cide-ele-tab", inputs: ["tabs", "activeTabId", "size", "variant", "fullWidth", "disabled"], outputs: ["tabChange"] }, { kind: "component", type: CideEleFileInputComponent, selector: "cide-ele-file-input", inputs: ["label", "accept", "multiple", "disabled", "required", "helperText", "errorText", "showPreview", "previewWidth", "previewHeight", "previewBoxMode", "showFileName", "placeholderText", "placeholderIcon", "autoUpload", "uploadData", "showFloatingUploader", "floatingUploaderGroupId"], outputs: ["fileChange", "uploadSuccess", "uploadError", "uploadProgressChange"] }, { kind: "directive", type: CideEleFileImageDirective, selector: "[cideEleFileImage]", inputs: ["fileId", "altText"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideEleDataGridComponent, selector: "cide-ele-data-grid", inputs: ["config", "templateRenderers", "customFormatters", "actionHandlers", "serverSidePagination", "totalServerItems", "currentServerPage", "currentServerPageSize", "dragDropEnabled"], outputs: ["gridEvent"] }, { kind: "component", type: CideEleToastNotificationComponent, selector: "cide-ele-toast-notification" }, { kind: "component", type: CideFormFieldErrorComponent, selector: "cide-form-field-error", inputs: ["control", "formGroup", "fieldName", "customMessages"] }] });
|
|
15947
15947
|
}
|
|
15948
15948
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCoreUserCreateComponent, decorators: [{
|
|
15949
15949
|
type: Component,
|
|
@@ -15962,7 +15962,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
|
|
|
15962
15962
|
CideEleDataGridComponent,
|
|
15963
15963
|
CideEleToastNotificationComponent,
|
|
15964
15964
|
CideFormFieldErrorComponent
|
|
15965
|
-
], template: "<!-- \n ENTERPRISE USER MASTER FORM\n \n Enterprise-Level Styling with Tailwind CSS\n Features: Responsive grids, proper typography, enhanced user experience\n-->\n\n<div class=\"tw-w-full tw-h-full tw-p-1 tw-pt-2\">\n <!-- Toast Notifications -->\n <cide-ele-toast-notification></cide-ele-toast-notification>\n \n <form class=\"tw-max-w-7xl tw-mx-auto tw-bg-transparent\" [formGroup]=\"userMasterForm\" [class.tw-opacity-60]=\"loading()\"\n (ngSubmit)=\"onSubmit()\">\n\n\n <!-- User Context Header -->\n <div\n class=\"tw-bg-gradient-to-r tw-from-blue-50 tw-to-indigo-50 tw-border tw-border-blue-200 tw-rounded-md tw-p-1 tw-mb-2 tw-shadow-sm\">\n <div class=\"tw-flex tw-items-center tw-justify-between tw-flex-wrap tw-gap-2\">\n <!-- User Basic Info Display -->\n <div class=\"tw-flex tw-items-center tw-gap-3 tw-flex-wrap\">\n <!-- Profile Photo Preview -->\n <div class=\"tw-flex tw-items-center tw-gap-2\">\n <div\n class=\"tw-w-8 tw-h-8 tw-rounded-full tw-bg-blue-100 tw-border tw-border-blue-200 tw-flex tw-items-center tw-justify-center tw-overflow-hidden\">\n @if (userMasterForm.get('user_photo_id_cyfm')?.value) {\n <img cideEleFileImage [fileId]=\"userMasterForm.get('user_photo_id_cyfm')?.value\"\n [altText]=\"'Profile Photo'\" class=\"tw-w-full tw-h-full tw-object-cover\">\n } @else {\n <cide-ele-icon name=\"person\" class=\"tw-w-5 tw-h-5 tw-text-blue-600\">\n </cide-ele-icon>\n }\n </div>\n <div class=\"tw-flex tw-flex-col\">\n <span class=\"tw-text-xs tw-font-medium tw-text-blue-900\">\n {{ getUserFullName() || 'New User' }}\n </span>\n <span class=\"tw-text-xs tw-text-blue-600\">\n {{ getUserUsername() || 'Username not set' }}\n </span>\n </div>\n </div>\n\n <!-- Contact Info -->\n <div class=\"tw-flex tw-items-center tw-gap-3\">\n <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-xs tw-text-gray-700\">\n <cide-ele-icon variant=\"gray\" size=\"xs\">email</cide-ele-icon>\n <span>{{ getUserEmail() || 'Email not set' }}</span>\n </div>\n <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-xs tw-text-gray-700\">\n <cide-ele-icon variant=\"gray\" size=\"xs\">phone</cide-ele-icon>\n <span>{{ getUserMobile() || 'Mobile not set' }}</span>\n </div>\n </div>\n\n <!-- Active Status -->\n <div class=\"tw-flex tw-items-center tw-gap-1\">\n @if (getUserActiveStatus()) {\n <span\n class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded tw-text-xs tw-font-medium tw-bg-green-100 tw-text-green-700\">\n <cide-ele-icon variant=\"green\" size=\"xs\" class=\"tw-mr-1\">check_circle</cide-ele-icon>\n Active\n </span>\n } @else {\n <span\n class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded tw-text-xs tw-font-medium tw-bg-red-100 tw-text-red-700\">\n <cide-ele-icon variant=\"red\" size=\"xs\" class=\"tw-mr-1\">cancel</cide-ele-icon>\n Inactive\n </span>\n }\n </div>\n </div>\n\n <!-- Entity Info -->\n <div class=\"tw-flex tw-items-center tw-gap-2\">\n @if (hasDefaultEntity()) {\n <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-xs tw-text-blue-700\">\n <cide-ele-icon variant=\"blue\" size=\"xs\">business</cide-ele-icon>\n <span class=\"tw-font-medium\">{{ getDefaultEntityName() }}</span>\n </div>\n } @else {\n <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-xs tw-text-gray-500\">\n <cide-ele-icon variant=\"gray\" size=\"xs\">business</cide-ele-icon>\n <span class=\"tw-italic\">No entity</span>\n </div>\n }\n\n <span class=\"tw-text-xs tw-text-gray-600 tw-px-2 tw-py-1 tw-bg-gray-100 tw-rounded\">\n {{ getEntityMappingCount() }} mapping(s)\n </span>\n </div>\n </div>\n </div>\n\n <!-- Tab Navigation -->\n <div class=\"tw-p-0 tw-mb-2 tw-border-b tw-border-gray-200\">\n <cide-ele-tab [tabs]=\"userTabs()\" [activeTabId]=\"activeTab()\" size=\"md\" variant=\"default\"\n (tabChange)=\"onTabChange($event)\">\n </cide-ele-tab>\n </div>\n\n <!-- Tab Content -->\n <div class=\"tw-transition-opacity tw-duration-300\" [class.tw-opacity-60]=\"loading()\">\n @switch (activeTab()) {\n\n @case ('basic') {\n <!-- User Basic Information Section -->\n <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\n\n <!-- Top Section: Form Fields on Left, Profile Photo on Right -->\n <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-[1fr_200px] tw-gap-4 tw-mb-4\">\n <!-- Left Side: Form Fields -->\n <div class=\"tw-space-y-4\">\n <!-- Name Fields - All in One Row -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-4\">\n <cide-ele-input id=\"user_firstname\" label=\"First Name *\" formControlName=\"user_firstname\"\n placeholder=\"Enter first name\" [maxlength]=\"20\" size=\"md\" (ngModelChange)=\"onNameFieldChange()\">\n </cide-ele-input>\n\n <cide-ele-input id=\"user_middlename\" label=\"Middle Name\" formControlName=\"user_middlename\"\n placeholder=\"Enter middle name\" [maxlength]=\"20\" size=\"md\" (ngModelChange)=\"onNameFieldChange()\">\n </cide-ele-input>\n\n <cide-ele-input id=\"user_lastname\" label=\"Last Name *\" formControlName=\"user_lastname\"\n placeholder=\"Enter last name\" [maxlength]=\"20\" size=\"md\" (ngModelChange)=\"onNameFieldChange()\">\n </cide-ele-input>\n\n <cide-ele-input id=\"user_fullname\" label=\"Full Name * (Auto-generated)\" formControlName=\"user_fullname\"\n placeholder=\"Auto-generated from name fields or enter manually\" [maxlength]=\"62\" size=\"md\">\n </cide-ele-input>\n </div>\n\n <!-- Contact Information - All in One Row -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-3 tw-gap-4\">\n <cide-ele-input id=\"user_username\" label=\"Username *\" formControlName=\"user_username\"\n placeholder=\"Enter unique username\" [maxlength]=\"20\" size=\"md\">\n </cide-ele-input>\n\n <cide-ele-input id=\"user_emailid\" label=\"Email ID *\" formControlName=\"user_emailid\" type=\"email\"\n placeholder=\"Enter valid email address\" [maxlength]=\"320\" size=\"md\">\n </cide-ele-input>\n\n <cide-ele-input id=\"user_mobileno\" label=\"Mobile Number *\" formControlName=\"user_mobileno\" type=\"tel\"\n placeholder=\"Enter mobile number\" [maxlength]=\"15\" size=\"md\">\n </cide-ele-input>\n </div>\n </div>\n\n <!-- Right Side: Profile Photo Upload -->\n <div class=\"tw-flex tw-items-start tw-justify-center tw-p-0\">\n <cide-ele-file-input id=\"user_photo_id_cyfm\" formControlName=\"user_photo_id_cyfm\" accept=\"image/*\"\n [showPreview]=\"true\" [previewBoxMode]=\"true\" [showFileName]=\"false\" previewWidth=\"180px\"\n previewHeight=\"120px\" placeholderText=\"Upload Photo\" placeholderIcon=\"cloud_upload\" [autoUpload]=\"true\"\n [uploadData]=\"getProfilePhotoUploadData()\" (uploadSuccess)=\"onProfilePhotoUploadSuccess($event)\"\n (uploadError)=\"onProfilePhotoUploadError($event)\"\n (uploadProgressChange)=\"onProfilePhotoUploadProgress($event)\">\n </cide-ele-file-input>\n </div>\n </div>\n\n\n\n <!-- Status Control -->\n <div class=\"tw-grid tw-grid-cols-1 tw-mb-2\">\n <div class=\"tw-p-2 tw-bg-blue-50 tw-border tw-border-blue-100 tw-rounded-lg\">\n <label\n class=\"tw-flex tw-flex-col tw-cursor-pointer tw-py-2 tw-bg-transparent tw-border-none tw-rounded-none tw-transition-all tw-duration-200 hover:tw-bg-blue-75\">\n <cide-ele-input type=\"checkbox\" label=\"Active User Status\" formControlName=\"user_isactive\"\n class=\"tw-h-5 tw-accent-blue-500 tw-rounded tw-mb-1\" />\n <span class=\"tw-font-semibold tw-text-gray-700 tw-text-base\"></span>\n <span class=\"tw-text-sm tw-text-gray-600 tw-mt-1 tw-leading-relaxed\">Enable this user account for system\n access and operations</span>\n </label>\n </div>\n </div>\n </div>\n }\n\n @case ('auth') {\n <!-- Authentication Section -->\n <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\n <!-- Password Fields -->\n @if (shouldShowPasswordFields()) {\n <div class=\"tw-mb-4\">\n <!-- Password Fields Header for Edit Mode -->\n @if (isEditMode()) {\n <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\n <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-800\">Update Password</h6>\n <button type=\"button\"\n class=\"tw-px-3 tw-py-1 tw-bg-gray-100 tw-text-gray-600 tw-border tw-border-gray-300 tw-rounded-md tw-text-xs tw-font-medium hover:tw-bg-gray-200 tw-transition-colors\"\n (click)=\"cancelPasswordUpdate()\">\n Cancel Password Update\n </button>\n </div>\n }\n\n <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-2 md:tw-grid-cols-1 tw-gap-6\">\n <cide-ele-input id=\"user_password\" [label]=\"getPasswordFieldLabel()\" formControlName=\"user_password\"\n type=\"password\" placeholder=\"Enter secure password (min 8 characters)\" size=\"md\">\n </cide-ele-input>\n\n <cide-ele-input id=\"user_confirm_password\" [label]=\"getPasswordConfirmLabel()\"\n formControlName=\"user_confirm_password\" type=\"password\" placeholder=\"Confirm your password\" size=\"md\">\n </cide-ele-input>\n </div>\n </div>\n }\n\n <!-- Password Update Option for Edit Mode -->\n @if (isEditMode() && !shouldShowPasswordFields()) {\n <div class=\"tw-mb-4\">\n <div class=\"tw-p-2 tw-bg-blue-50 tw-border tw-border-blue-200 tw-rounded-lg\">\n <h6 class=\"tw-text-sm tw-font-semibold tw-text-blue-800 tw-mb-2\">Password Update</h6>\n <p class=\"tw-text-sm tw-text-blue-600 tw-mb-3\">Current password will be kept. Click below to change\n password.</p>\n\n @if (hasPasswordInput()) {\n <div\n class=\"tw-mb-3 tw-p-2 tw-bg-yellow-50 tw-border tw-border-yellow-200 tw-rounded tw-text-sm tw-text-yellow-700\">\n <cide-ele-icon variant=\"yellow\" size=\"xs\" class=\"tw-mr-1\">warning</cide-ele-icon>\n Password fields contain text. Click \"Change Password\" to manage existing input.\n </div>\n }\n\n <button type=\"button\"\n class=\"tw-px-4 tw-py-2 tw-bg-blue-100 tw-text-blue-700 tw-border tw-border-blue-300 tw-rounded-md tw-text-sm tw-font-medium hover:tw-bg-blue-200 tw-transition-colors\"\n (click)=\"triggerPasswordUpdate()\">\n @if (hasPasswordInput()) {\n Manage Password Fields\n } @else {\n Change Password\n }\n </button>\n </div>\n </div>\n }\n\n <!-- Password Options -->\n <div class=\"tw-grid tw-grid-cols-1 tw-gap-4 tw-mb-4\">\n <div class=\"tw-p-2 tw-bg-yellow-50 tw-border tw-border-yellow-100 tw-rounded-lg\">\n <label\n class=\"tw-flex tw-flex-col tw-gap-2 tw-cursor-pointer tw-py-2 tw-bg-transparent tw-border-none tw-rounded-none tw-transition-all tw-duration-200\">\n <cide-ele-input type=\"checkbox\" label=\"Force Password Change on Login\"\n formControlName=\"user_passwordchangeonlogin\" class=\"tw-h-5 tw-accent-yellow-500 tw-rounded tw-mb-1\" />\n <span class=\"tw-text-sm tw-text-gray-600 tw-mt-1 tw-leading-relaxed\">User will be required to change\n password on next login</span>\n </label>\n </div>\n </div>\n\n </div>\n }\n\n @case ('roles') {\n <!-- Entity, Roles & Permissions Mapping Section -->\n <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\n\n\n\n <!-- Important Note -->\n <div class=\"tw-bg-amber-50 tw-border tw-border-amber-200 tw-rounded-lg tw-p-2 tw-mb-4\">\n <div class=\"tw-flex tw-items-start tw-gap-3\">\n <cide-ele-icon variant=\"amber\" size=\"lg\">info</cide-ele-icon>\n <div class=\"tw-flex-1\">\n <h4 class=\"tw-text-sm tw-font-semibold tw-text-amber-800 tw-mb-1\">Entity-Role Based Access</h4>\n <p class=\"tw-text-sm tw-text-amber-700 tw-mb-2\">User access is completely managed through entity-role\n mappings below. At least one entity mapping is required for user access.</p>\n @if (hasDefaultEntity()) {\n <div class=\"tw-flex tw-items-center tw-gap-2 tw-mt-2 tw-p-2 tw-bg-amber-100 tw-rounded\">\n <cide-ele-icon variant=\"amber\" size=\"sm\">star</cide-ele-icon>\n <span class=\"tw-text-sm tw-text-amber-800\">\n <strong>Default Entity:</strong> {{ getDefaultEntityName() }}\n </span>\n </div>\n } @else {\n <div class=\"tw-text-sm tw-text-amber-600 tw-mt-2 tw-italic\">\n \u26A0\uFE0F No default entity selected. Please set one entity as default.\n </div>\n }\n </div>\n </div>\n </div>\n\n <!-- Entity-Role Mapping Section -->\n <div class=\"tw-flex tw-text-center tw-justify-between tw-items-center tw-mb-4\">\n <div>\n <h4 class=\"tw-text-sm tw-text-left tw-font-semibold tw-text-blue-900 tw-mb-1\">Entity-Role Mapping</h4>\n <p class=\"tw-text-sm tw-text-blue-700\">Map user to entities with specific roles and permissions</p>\n </div>\n <div class=\"tw-flex tw-flex-col tw-items-end\">\n <button cideEleButton variant=\"primary\" size=\"md\" type=\"button\" (click)=\"addEntityMapping()\"\n leftIcon=\"add\" [disabled]=\"isAllEntitiesMapped()\">\n Add Entity Mapping\n </button>\n\n @if (isAllEntitiesMapped()) {\n <div class=\"tw-mt-2 tw-p-2 tw-bg-blue-50 tw-border tw-border-blue-200 tw-rounded-md tw-max-w-xs\">\n <p class=\"tw-text-xs tw-text-blue-700\">\n <cide-ele-icon variant=\"info\" size=\"xs\" class=\"tw-mr-1\">info</cide-ele-icon>\n All available entities are already mapped.\n </p>\n </div>\n }\n </div>\n </div>\n\n <div formArrayName=\"core_entity_mapping\">\n @for (mapping of entityMappings(); track $index; let i = $index) {\n <div class=\"tw-bg-white tw-border tw-border-blue-200 tw-rounded-xl tw-mb-6 tw-overflow-hidden tw-shadow-sm\"\n [formGroupName]=\"i\">\n <div\n class=\"tw-bg-gradient-to-r tw-from-blue-50 tw-to-blue-100 tw-px-6 tw-py-3 tw-flex tw-justify-between tw-items-center tw-border-b tw-border-blue-200\">\n <div class=\"tw-flex tw-items-center tw-gap-2\">\n <h5 class=\"tw-m-0 tw-text-blue-800 tw-text-sm tw-font-semibold\">Entity Mapping {{ i + 1 }}</h5>\n @if (mapping.syenm_isdefault) {\n <span\n class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded-full tw-text-xs tw-font-medium tw-bg-green-100 tw-text-green-800\">\n <cide-ele-icon variant=\"green\" size=\"xs\" class=\"tw-mr-1\">star</cide-ele-icon>\n Default\n </span>\n }\n </div>\n @if (!mapping?._id) {\n <button cideEleButton variant=\"danger\" size=\"sm\" type=\"button\" (click)=\"removeEntityMapping(i)\"\n leftIcon=\"delete\">\n Remove\n </button>\n }\n </div>\n\n <div>\n <!-- Entity and Role Selection -->\n <div class=\"tw-grid tw-px-3 tw-py-1 tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4 tw-mb-4\">\n <div>\n <cide-ele-select label=\"Entity *\" [options]=\"getFilteredEntityOptions(i)\"\n formControlName=\"syenm_entity_id_syen\" valueKey=\"_id\" labelKey=\"syen_name\"\n placeholder=\"Select entity\" size=\"md\" (change)=\"onEntityChange(i, $event)\">\n </cide-ele-select>\n\n @if (isAllEntitiesSelected(i)) {\n <div class=\"tw-mt-2 tw-p-2 tw-bg-yellow-50 tw-border tw-border-yellow-200 tw-rounded-md\">\n <p class=\"tw-text-xs tw-text-yellow-700\">\n <cide-ele-icon variant=\"warning\" size=\"xs\" class=\"tw-mr-1\">info</cide-ele-icon>\n All entities are already mapped. Remove another mapping to add this one.\n </p>\n </div>\n }\n </div>\n <cide-ele-select label=\"Role for this Entity\" [options]=\"getRoleOptionsForEntity(i)\"\n formControlName=\"syenm_role_id_syusrol\" valueKey=\"_id\" labelKey=\"syusrol_role_name\"\n placeholder=\"Select role for this entity\" size=\"md\" (change)=\"onRoleChange(i, $event)\">\n </cide-ele-select>\n </div>\n\n\n <!-- Entity-Specific Details and Active Period - All in One Row -->\n <div class=\"tw-grid tw-px-3 tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-4 tw-mb-4\">\n <cide-ele-select label=\"Department for this Entity\" [options]=\"getDepartmentOptionsForEntity(i)\"\n formControlName=\"syenm_department_id_sydept\" (change)=\"onDepartmentChange($event)\" valueKey=\"_id\"\n labelKey=\"sydept_name\" placeholder=\"Select department\" size=\"md\">\n </cide-ele-select>\n\n <cide-ele-select label=\"Designation for this Entity\" [options]=\"getDesignationOptionsForEntity(i)\"\n valueKey=\"_id\" labelKey=\"sydsg_name\" formControlName=\"syenm_designation_id_sydsg\"\n placeholder=\"Select designation\" size=\"md\">\n </cide-ele-select>\n\n <cide-ele-input label=\"Active From *\" [id]=\"'syenm_activefrom['+i+']'\"\n formControlName=\"syenm_activefrom\" type=\"date\" size=\"md\">\n </cide-ele-input>\n\n <cide-ele-input label=\"Active Until\" [id]=\"'syenm_activeupto['+i+']'\"\n formControlName=\"syenm_activeupto\" type=\"date\" size=\"md\">\n </cide-ele-input>\n </div>\n\n <!-- Mapping Settings -->\n <div class=\"tw-grid tw-px-3 tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-4 tw-mb-4\">\n <div class=\"tw-p-2 tw-bg-green-50 tw-border tw-border-green-200 tw-rounded-lg\">\n <cide-ele-input type=\"checkbox\" label=\"Default Entity\" formControlName=\"syenm_isdefault\"\n (change)=\"onDefaultEntityChange(i, $event)\" class=\"tw-h-5 tw-accent-green-500\" />\n <span class=\"tw-text-xs tw-text-green-600 tw-block tw-mt-1\">Set as user's default entity (only one\n allowed)</span>\n </div>\n\n <div class=\"tw-p-2 tw-bg-blue-50 tw-border tw-border-blue-200 tw-rounded-lg\">\n <cide-ele-input type=\"checkbox\" label=\"Active Mapping\" formControlName=\"syenm_isactive\"\n class=\"tw-h-5 tw-accent-blue-500\" />\n <span class=\"tw-text-xs tw-text-blue-600 tw-block tw-mt-1\">Enable this entity mapping</span>\n </div>\n </div>\n\n <!-- Menu Rights Grid for this Entity-Role -->\n <div class=\"tw-border-t tw-border-gray-200\">\n\n @if (getMenuRightsForMapping(i).length > 0) {\n <!-- Menu Rights Tree Grid -->\n\n <cide-ele-data-grid [config]=\"getMenuRightsGridConfig(i)\"\n [templateRenderers]=\"getMenuRightsTemplateRenderers(i)\"\n (gridEvent)=\"onMenuRightsGridEvent($event, i)\" class=\"tw-h-96 tw-w-full\">\n </cide-ele-data-grid>\n\n } @else {\n <div class=\"tw-text-center tw-py-8 tw-bg-gray-50 tw-border tw-border-gray-200 tw-rounded-lg\">\n <div class=\"tw-text-gray-400 tw-mb-3\">\n <cide-ele-icon variant=\"gray\" size=\"lg\">menu</cide-ele-icon>\n </div>\n <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-600 tw-mb-2\">No Menu Rights Available</h6>\n <p class=\"tw-text-xs tw-text-gray-500 tw-mb-3 tw-text-center\">Select both entity and role to\n automatically load\n menu rights for this mapping.</p>\n </div>\n }\n </div>\n </div>\n </div>\n }\n </div>\n\n @if (entityMappings().length === 0) {\n <div class=\"tw-text-center tw-py-8 tw-bg-white tw-border tw-border-blue-200 tw-rounded-lg\">\n <div class=\"tw-text-blue-400 tw-mb-3\">\n <cide-ele-icon variant=\"blue\" size=\"lg\">business</cide-ele-icon>\n </div>\n <h4 class=\"tw-text-sm tw-font-medium tw-text-blue-800 tw-mb-2\">No Entity Mappings</h4>\n <p class=\"tw-text-blue-600 tw-mb-4 tw-text-center\">Add entity mappings to assign specific roles and\n permissions for different entities.</p>\n <button class=\"tw-mx-auto\" cideEleButton variant=\"primary\" size=\"md\" type=\"button\"\n (click)=\"addEntityMapping()\" leftIcon=\"add\">\n Add First Entity Mapping\n </button>\n </div>\n }\n </div>\n }\n\n @case ('addresses') {\n <!-- Contact Addresses Section -->\n <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\n <div class=\"tw-flex tw-justify-end\">\n <div class=\"tw-flex tw-justify-between tw-items-end tw-mb-2 tw-gap-4\">\n <button cideEleButton variant=\"primary\" size=\"md\" type=\"button\" (click)=\"addContactAddress()\"\n leftIcon=\"add\" [disabled]=\"!hasAddContactAddressRights()\">\n Add New Address\n </button>\n </div>\n </div>\n\n <div formArrayName=\"core_user_contact_addresses\">\n @for (address of contactAddresses(); track $index; let i = $index) {\n <div [formGroupName]=\"i\"\n class=\"tw-bg-white tw-border tw-border-gray-200 tw-rounded-xl tw-mb-8 tw-overflow-hidden tw-transition-all tw-duration-300 hover:tw-shadow-lg tw-shadow-sm\">\n <div\n class=\"tw-bg-gradient-to-r tw-from-gray-50 tw-to-gray-100 tw-px-4 tw-py-2 tw-flex tw-justify-between tw-items-center tw-border-b tw-border-gray-200\">\n <!-- Use address type as header instead of generic \"Address X\" -->\n <h4 class=\"tw-m-0 tw-text-gray-700 tw-text-sm tw-font-semibold tw-tracking-tight\">\n {{ getAddressTypeLabel(i) || ('Address ' + (i + 1)) }}\n </h4>\n <div class=\"tw-flex tw-items-center tw-gap-2\">\n @if (isAddressOwner(i)) {\n <button cideEleButton variant=\"secondary\" size=\"xs\" type=\"button\" (click)=\"shareAddress(i)\"\n leftIcon=\"share\" class=\"tw-text-blue-600 hover:tw-text-blue-700\">\n Share\n </button>\n }\n @if (!address?._id) {\n <button cideEleButton variant=\"danger\" size=\"sm\" type=\"button\" (click)=\"removeContactAddress(i)\"\n leftIcon=\"delete\">\n Remove\n </button>\n }\n </div>\n </div>\n <div class=\"tw-p-4\">\n <!-- Main Layout: Inputs on Left, Address Textarea on Right -->\n <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-4 tw-gap-3 tw-mb-3\">\n \n <!-- Left Side: Input Fields (3/4 width) -->\n <div class=\"lg:tw-col-span-3\">\n <!-- Row 1: Address Type, Contact Person -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3 tw-mb-3\">\n <cide-ele-select label=\"Address Type\" [options]=\"addressTypeOptions()\" id=\"sycad_address_type_id_sygms\"\n formControlName=\"sycad_address_type_id_sygms\" placeholder=\"Select type\" size=\"sm\"\n valueKey=\"_id\" labelKey=\"sygms_title\" (change)=\"onAddressTypeChange(i)\">\n </cide-ele-select>\n\n <cide-ele-input label=\"Contact Person\" formControlName=\"sycad_contact_person_name\"\n placeholder=\"Enter contact person\" size=\"sm\">\n </cide-ele-input>\n </div>\n\n <!-- Row 2: Postal Code, City, State, Country -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-4 tw-gap-3\">\n <cide-ele-select label=\"Postal Code\" [options]=\"addressPostalCodes()[i] || []\"\n formControlName=\"sycad_contact_pin_sypin\" placeholder=\"Select postal code\" [searchable]=\"true\"\n [loading]=\"addressPostalCodesLoading()[i] || false\" (searchChange)=\"onPostalCodeSearch($event, i)\"\n (change)=\"onPostalCodeSelection($event, i)\" size=\"sm\">\n </cide-ele-select>\n\n <cide-ele-input label=\"City\" formControlName=\"sycad_contact_city_sypin\" placeholder=\"Enter city\"\n size=\"sm\">\n </cide-ele-input>\n\n <cide-ele-input label=\"State\" formControlName=\"sycad_contact_state_sypin\" placeholder=\"Enter state\"\n size=\"sm\">\n </cide-ele-input>\n\n <cide-ele-select label=\"Country\" [options]=\"addressCountries()[i] || []\"\n formControlName=\"sycad_contact_country_syctr\" placeholder=\"Select country\" valueKey=\"_id\"\n labelKey=\"syctr_country_iso_name\" [searchable]=\"true\" (searchChange)=\"onCountrySearch($event, i)\"\n [loading]=\"addressCountriesLoading()[i] || false\" size=\"sm\">\n </cide-ele-select>\n </div>\n </div>\n\n <!-- Right Side: Address Textarea (1/4 width, spans 2 rows) -->\n <div class=\"lg:tw-col-span-1 lg:tw-row-span-2 tw-flex tw-flex-col\">\n <cide-ele-textarea label=\"Complete Address\" formControlName=\"sycad_contact_address\"\n placeholder=\"Enter complete address with area, city, and landmarks\" [rows]=\"4\" size=\"sm\"\n class=\"tw-h-full\">\n </cide-ele-textarea>\n </div>\n </div>\n\n <!-- Contact Details: Primary Phone, Alt Phone, Fax, Primary Email in 4 columns -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-4 tw-gap-3 tw-mb-3\">\n <cide-ele-input label=\"Primary Phone\" formControlName=\"sycad_contact_phone\" type=\"tel\"\n placeholder=\"Primary phone\" size=\"sm\">\n </cide-ele-input>\n\n <cide-ele-input label=\"Alternate Phone\" formControlName=\"sycad_contact_phone_alt\" type=\"tel\"\n placeholder=\"Alternate phone\" size=\"sm\">\n </cide-ele-input>\n\n <cide-ele-input label=\"Fax Number\" formControlName=\"sycad_contact_fax\" placeholder=\"Fax number\"\n size=\"sm\">\n </cide-ele-input>\n\n <cide-ele-input label=\"Primary Email\" formControlName=\"sycad_contact_email\" type=\"email\"\n placeholder=\"Primary email\" size=\"sm\">\n </cide-ele-input>\n </div>\n\n <!-- Alternate Email in single row -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3\">\n <cide-ele-input label=\"Alternate Email\" formControlName=\"sycad_contact_email_alt\" type=\"email\"\n placeholder=\"Alternate email address\" size=\"sm\">\n </cide-ele-input>\n </div>\n </div>\n </div>\n }\n </div>\n </div>\n }\n\n @case ('documents') {\n <!-- Documents Section -->\n <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\n <div class=\"tw-flex tw-justify-end tw-items-end tw-mb-2 tw-gap-4\">\n <button cideEleButton variant=\"primary\" size=\"md\" type=\"button\" (click)=\"addDocument()\" leftIcon=\"add\" [disabled]=\"!hasAddDocumentRights()\">\n Add Document\n </button>\n </div>\n <div formArrayName=\"core_user_documents\">\n @for (doc of documents(); track $index; let i = $index) {\n <div [formGroupName]=\"i\"\n class=\"tw-bg-white tw-border tw-border-gray-200 tw-rounded-xl tw-mb-8 tw-overflow-hidden tw-transition-all tw-duration-300 hover:tw-shadow-lg tw-shadow-sm\">\n <div\n class=\"tw-bg-gradient-to-r tw-from-gray-50 tw-to-gray-100 tw-px-4 tw-py-2 tw-flex tw-justify-between tw-items-center tw-border-b tw-border-gray-200\">\n <h4 class=\"tw-m-0 tw-text-gray-700 tw-text-sm tw-font-semibold tw-tracking-tight\">\n {{ getDocumentTypeLabel(i) || ('Document ' + (i + 1)) }}\n </h4>\n <div class=\"tw-flex tw-gap-2\">\n @if (doc?._id) {\n <button cideEleButton variant=\"secondary\" size=\"sm\" type=\"button\" (click)=\"shareDocumentRights(i)\"\n leftIcon=\"share\">\n Share\n </button>\n }\n </div>\n </div>\n <div class=\"tw-p-4\">\n <!-- Main Layout: Inputs on Left, File Upload on Right -->\n <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-3 tw-gap-4\">\n \n <!-- Left Side: Document Information (2/3 width) -->\n <div class=\"lg:tw-col-span-2\">\n <!-- Row 1: Document Type, Document Number, Name as per Document -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-3 tw-mb-3\">\n <cide-ele-select label=\"Document Type\" [options]=\"documentTypeOptions()\"\n formControlName=\"syusd_document_type_id_sygms\" placeholder=\"Select type\" size=\"sm\"\n valueKey=\"_id\" labelKey=\"sygms_title\" (change)=\"onDocumentTypeChange(i)\">\n </cide-ele-select>\n\n <cide-ele-input label=\"Document Number\" formControlName=\"syusd_doc_number\"\n placeholder=\"Document number\" size=\"sm\">\n </cide-ele-input>\n\n <cide-ele-input label=\"Name as per Document\" formControlName=\"syusd_doc_name_as_per_doc\"\n placeholder=\"Name on document\" size=\"sm\">\n </cide-ele-input>\n </div>\n\n <!-- Row 2: Issue Date, Expiry Date, Photo Group -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-3 tw-mb-3\">\n <cide-ele-input label=\"Issue Date\" formControlName=\"syusd_doc_issue_date\"\n [id]=\"'syusd_doc_issue_date['+i+']'\" type=\"date\" size=\"sm\">\n </cide-ele-input>\n\n <cide-ele-input label=\"Expiry Date\" formControlName=\"syusd_doc_expiry_date\"\n [id]=\"'syusd_doc_expiry_date['+i+']'\" type=\"date\" size=\"sm\">\n </cide-ele-input>\n </div>\n\n <!-- Row 3: Verification Status, KYC Status -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3\">\n <cide-ele-select label=\"Verification Status\" [options]=\"documentVerificationStatusOptions()\"\n formControlName=\"syusd_doc_verification_status_id_sygms\" placeholder=\"Select status\"\n size=\"sm\" valueKey=\"_id\" labelKey=\"sygms_title\">\n </cide-ele-select>\n\n <cide-ele-select label=\"KYC Status\" [options]=\"documentKycStatusOptions()\"\n formControlName=\"syusd_doc_kyc_status_id_sygms\" placeholder=\"Select KYC status\" size=\"sm\"\n valueKey=\"_id\" labelKey=\"sygms_title\">\n </cide-ele-select>\n </div>\n </div>\n\n <!-- Right Side: File Upload (1/3 width) -->\n <div class=\"lg:tw-col-span-1\">\n <div class=\"tw-bg-gray-50 tw-border tw-border-gray-200 tw-rounded-lg tw-p-3 tw-h-full\">\n \n <!-- File Upload Input -->\n <cide-ele-file-input\n [id]=\"'document-files-' + i\"\n [multiple]=\"true\"\n formControlName=\"syusd_photo_group_id_cyfm\"\n [accept]=\"'.pdf,.jpg,.jpeg,.png,.doc,.docx'\"\n [autoUpload]=\"true\"\n [uploadData]=\"getDocumentUploadData(i)\"\n (change)=\"onDocumentFilesSelected($event, i)\"\n (uploadSuccess)=\"onDocumentUploadSuccess($event, i)\"\n (uploadError)=\"onDocumentUploadError($event, i)\"\n (uploadProgressChange)=\"onDocumentUploadProgress($event, i)\"\n class=\"tw-mb-3\"\n size=\"sm\">\n </cide-ele-file-input>\n\n <!-- Upload Status -->\n <!-- Upload status is now handled by the file input component itself -->\n </div>\n </div>\n </div>\n </div>\n </div>\n }\n </div>\n </div>\n }\n\n @case ('family') {\n <!-- Family Details Section - Compact Design -->\n <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\n <div class=\"tw-flex tw-justify-end tw-items-end tw-mb-3 tw-gap-4\">\n <button cideEleButton variant=\"primary\" size=\"sm\" type=\"button\" (click)=\"addFamilyDetail()\" leftIcon=\"add\" [disabled]=\"!hasAddFamilyDetailRights()\">\n Add Family Member\n </button>\n </div>\n\n <div formArrayName=\"core_user_family_details\">\n @for (family of familyDetails(); track $index; let i = $index) {\n <div [formGroupName]=\"i\"\n class=\"tw-bg-white tw-border tw-border-gray-200 tw-rounded-lg tw-mb-4 tw-overflow-hidden tw-transition-all tw-duration-200 hover:tw-shadow-md tw-shadow-sm\">\n \n <!-- Compact Header -->\n <div class=\"tw-bg-gray-50 tw-px-4 tw-py-2 tw-flex tw-justify-between tw-items-center tw-border-b tw-border-gray-200\">\n <h4 class=\"tw-m-0 tw-text-gray-700 tw-text-sm tw-font-medium\">Family Member {{ i + 1 }}</h4>\n <div class=\"tw-flex tw-gap-2\">\n @if (family?._id) {\n <button cideEleButton variant=\"secondary\" size=\"xs\" type=\"button\" (click)=\"shareFamilyDetailRights(i)\"\n leftIcon=\"share\">\n Share\n </button>\n }\n @if (!family?._id) {\n <button cideEleButton variant=\"danger\" size=\"xs\" type=\"button\" (click)=\"removeFamilyDetail(i)\" leftIcon=\"delete\">\n Remove\n </button>\n }\n </div>\n </div>\n \n <!-- Compact Form Content - 3 inputs per row -->\n <div class=\"tw-p-4\">\n <!-- Row 1: Name, User, and Combined Relationship/Active Status (33.33% each) -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-3 tw-mb-3\">\n <cide-ele-input label=\"Family Member Name\" formControlName=\"syfdl_family_member_name\"\n placeholder=\"Enter family member full name\" size=\"sm\">\n </cide-ele-input>\n\n <cide-ele-select label=\"Family Member User\" [options]=\"userOptions(i)\"\n formControlName=\"syfdl_family_member_id_user\" placeholder=\"Select family member user\" size=\"sm\"\n valueKey=\"_id\" labelKey=\"user_fullname\" [searchable]=\"true\"\n [loading]=\"userSearchLoading()[i] || false\" (searchChange)=\"onUserSearchChange($event, i)\"\n (change)=\"onUserSelectionChange($event, i)\">\n </cide-ele-select>\n\n <!-- Combined Relationship and Active Status (33.33%) -->\n <div class=\"tw-flex tw-flex-row tw-gap-2 tw-items-end\">\n <div class=\"tw-flex-1\">\n <cide-ele-select label=\"Relationship\" [options]=\"relationshipOptions()\"\n formControlName=\"syfdl_relationship_id_sygms\" placeholder=\"Select relationship\" size=\"sm\"\n valueKey=\"_id\" labelKey=\"sygms_title\">\n </cide-ele-select>\n </div>\n\n <div class=\"tw-flex tw-items-center tw-pt-1 tw-flex-shrink-0\">\n <cide-ele-input formControlName=\"syfdl_isactive\" type=\"checkbox\" label=\"Active\" size=\"sm\">\n </cide-ele-input>\n </div>\n </div>\n </div>\n\n <!-- Row 2: Blood Group, DOB, and Phone -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 xl:tw-grid-cols-3 tw-gap-3 tw-mb-3\">\n <cide-ele-select label=\"Blood Group\" [options]=\"bloodGroupOptions()\"\n formControlName=\"syfdl_blood_group_sygms\" placeholder=\"Select blood group\" size=\"sm\" valueKey=\"_id\"\n labelKey=\"sygms_title\">\n </cide-ele-select>\n\n <cide-ele-input label=\"Date of Birth\" formControlName=\"syfdl_family_member_dob\" type=\"date\" size=\"sm\"\n [id]=\"'syfdl_family_member_dob['+i+']'\">\n </cide-ele-input>\n\n <cide-ele-input label=\"Contact Phone\" formControlName=\"syfdl_contact_phone\" type=\"tel\"\n placeholder=\"Enter contact phone\" size=\"sm\">\n </cide-ele-input>\n </div>\n\n <!-- Row 3: Email, Email ID, and Contact Number -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 xl:tw-grid-cols-3 tw-gap-3 tw-mb-3\">\n <cide-ele-input label=\"Contact Email\" formControlName=\"syfdl_contact_email\" type=\"email\"\n placeholder=\"Enter contact email\" size=\"sm\">\n </cide-ele-input>\n\n <cide-ele-input label=\"Contact Email ID\" formControlName=\"syfdl_contact_email_id\" type=\"email\"\n placeholder=\"Enter contact email ID\" size=\"sm\">\n </cide-ele-input>\n\n <cide-ele-input label=\"Contact Number\" formControlName=\"syfdl_contact_number\" type=\"tel\"\n placeholder=\"Enter contact number\" size=\"sm\">\n </cide-ele-input>\n </div>\n\n </div>\n </div>\n }\n </div>\n </div>\n }\n }\n </div>\n\n <!-- Form Actions -->\n <div\n class=\"tw-flex tw-justify-between tw-items-center tw-gap-4 tw-py-2 tw-bg-white tw-border-t tw-border-gray-200 tw-sticky tw-bottom-0 tw-z-10\">\n <!-- Error Display Component -->\n <div class=\"tw-flex-1\">\n <cide-form-field-error [formGroup]=\"userMasterForm\"></cide-form-field-error>\n </div>\n\n <!-- Action Buttons -->\n <div class=\"tw-flex tw-gap-4\">\n <button cideEleButton type=\"button\" variant=\"secondary\" (click)=\"resetForm()\" leftIcon=\"refresh\"\n [disabled]=\"loading()\">\n Reset Form\n </button>\n\n <button cideEleButton type=\"submit\" variant=\"primary\" [disabled]=\"loading() || userMasterForm.invalid\"\n [loading]=\"loading()\" leftIcon=\"save\">\n Save User Master\n </button>\n </div>\n </div>\n </form>\n</div>\n\n<!-- Template Renderers for Role Permissions Grid -->\n<ng-template #menuDetailsRendererTemplate let-row=\"row\">\n <div class=\"tw-flex tw-items-center tw-space-x-3 tw-min-w-0\">\n <!-- Menu Icon -->\n <div class=\"tw-flex-shrink-0\">\n @if (row.syme_type === 'module') {\n <cide-ele-icon class=\"tw-text-blue-600 tw-w-4 tw-h-4\">folder</cide-ele-icon>\n } @else if (row.syme_type === 'section') {\n <cide-ele-icon class=\"tw-text-green-600 tw-w-4 tw-h-4\">folder_open</cide-ele-icon>\n } @else if (row.syme_type === 'menu') {\n <cide-ele-icon class=\"tw-text-purple-600 tw-w-4 tw-h-4\">menu</cide-ele-icon>\n } @else {\n <cide-ele-icon class=\"tw-text-gray-600 tw-w-4 tw-h-4\">description</cide-ele-icon>\n }\n </div>\n\n <!-- Menu Details -->\n <div class=\"tw-ml-3 tw-min-w-0 tw-flex-1\">\n <div class=\"tw-flex tw-items-center tw-gap-2\">\n <div class=\"tw-text-xs tw-font-medium tw-text-gray-900 tw-truncate\" [title]=\"row.syme_title\">\n {{ row.syme_title || row.menu?.syme_title || row.menu?.syme_menu_name || 'Untitled' }}\n </div>\n <!-- Green pill indicator for parent menus with child permissions -->\n @if (row.syme_type === 'module' || row.syme_type === 'section') {\n @if (hasChildMenusWithPermissions(row._id)) {\n <span\n class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-green-100 tw-text-green-800 tw-whitespace-nowrap\">\n Assigned\n </span>\n }\n }\n </div>\n @if (row.permission?.sygms_name) {\n <div class=\"tw-text-xs tw-text-blue-500 tw-truncate\" [title]=\"row.permission?.sygms_name\">\n {{ row.permission?.sygms_name }}\n </div>\n }\n </div>\n </div>\n</ng-template>\n\n<!-- Menu Type Renderer Template -->\n<ng-template #menuTypeRendererTemplate let-row=\"row\" let-value=\"value\">\n <div class=\"tw-flex tw-items-center tw-justify-center\">\n @if (row.syme_type === 'module') {\n <span\n class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded-full tw-text-xs tw-font-medium tw-bg-blue-100 tw-text-blue-800\">\n Module\n </span>\n } @else if (row.syme_type === 'section') {\n <span\n class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded-full tw-text-xs tw-font-medium tw-bg-green-100 tw-text-green-800\">\n Section\n </span>\n } @else if (row.syme_type === 'menu') {\n <span\n class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded-full tw-text-xs tw-font-medium tw-bg-purple-100 tw-text-purple-800\">\n Menu\n </span>\n } @else {\n <span\n class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded-full tw-text-xs tw-font-medium tw-bg-gray-100 tw-text-gray-800\">\n {{ row.syme_type || 'Unknown' }}\n </span>\n }\n </div>\n</ng-template>\n\n<!-- Permissions Checkbox Renderer Template -->\n<ng-template #permissionsCheckboxRendererTemplate let-row=\"row\" let-value=\"value\">\n <div class=\"tw-flex tw-flex-wrap tw-gap-2 tw-max-w-full\">\n @if (row.syme_type === 'menu' && row?.syme_permissions_id_sygms && row?.syme_permissions_id_sygms.length > 0) {\n @for (permissionId of row?.syme_permissions_id_sygms || []; track permissionId) {\n <div class=\"tw-flex tw-items-center tw-space-x-1\">\n <div class=\"tw-flex tw-items-center tw-space-x-1\">\n <input type=\"checkbox\" [checked]=\"isPermissionSelected(row._id, permissionId)\" [disabled]=\"true\"\n class=\"tw-h-4 tw-w-4 tw-text-blue-600 tw-bg-gray-100 tw-border-gray-300 tw-rounded focus:tw-ring-blue-500\">\n <label class=\"tw-text-xs tw-text-gray-700\">\n {{ getPermissionById(permissionId)?.sygms_title || 'Unknown' }}\n </label>\n </div>\n </div>\n }\n } @else {\n <!-- Show green checkmark for parent menus with child permissions -->\n @if (row.syme_type === 'module' || row.syme_type === 'section' || row.syme_type === 'title') {\n @if (hasChildMenusWithPermissions(row._id)) {\n <div class=\"tw-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-bg-green-100 tw-rounded-full\">\n <cide-ele-icon class=\"tw-text-green-600\" size=\"xs\">\n check\n </cide-ele-icon>\n </div>\n } @else {\n <span class=\"tw-text-xs tw-text-gray-400\">N/A</span>\n }\n } @else {\n <span class=\"tw-text-xs tw-text-gray-400\">N/A</span>\n }\n }\n </div>\n</ng-template>\n\n<!-- Menu Rights Permissions Renderer Template -->\n<ng-template #menuRightsPermissionsRendererTemplate let-row=\"row\" let-value=\"value\">\n <div class=\"tw-flex tw-flex-wrap tw-gap-2 tw-max-w-full\">\n <!-- Role Rights Display -->\n @if (row.role_rights && row.role_rights.length > 0) {\n <div class=\"tw-mb-2\">\n <div class=\"tw-text-xs tw-text-gray-500 tw-mb-1\">Role Rights:</div>\n <div class=\"tw-flex tw-flex-wrap tw-gap-1\">\n @for (right of row.role_rights; track $index) {\n <span class=\"tw-inline-block tw-px-2 tw-py-1 tw-text-xs tw-bg-blue-100 tw-text-blue-800 tw-rounded\">\n {{ right }}\n </span>\n }\n </div>\n </div>\n }\n\n\n <!-- Exception Indicator -->\n @if (row.hasException) {\n <div class=\"tw-mt-2\">\n <span class=\"tw-inline-block tw-px-2 tw-py-1 tw-text-xs tw-bg-yellow-100 tw-text-yellow-800 tw-rounded\">\n Override\n </span>\n </div>\n } @else {\n <div class=\"tw-mt-2\">\n <span class=\"tw-text-xs tw-text-gray-400\">Default</span>\n </div>\n }\n </div>\n</ng-template>\n\n<!-- Permissions Renderer Template -->\n<ng-template #permissionsRendererTemplate let-row=\"row\" let-value=\"value\">\n <div class=\"tw-flex tw-flex-wrap tw-gap-2 tw-max-w-full\">\n @if (row._permissionValues && Object.keys(row._permissionValues).length > 0) {\n @for (permissionId of Object.keys(row._permissionValues); track permissionId) {\n <div class=\"tw-flex tw-items-center tw-space-x-2\">\n <cide-ele-input type=\"checkbox\" [ngModel]=\"row._permissionValues[permissionId].checked\"\n (ngModelChange)=\"onPermissionChangeSafe($event, row, permissionId)\"\n [id]=\"'permission-' + row._id + '-' + permissionId\" class=\"tw-h-4 tw-w-4\">\n </cide-ele-input>\n <label [for]=\"'permission-' + row._id + '-' + permissionId\" \n class=\"tw-text-xs tw-cursor-pointer\"\n [ngClass]=\"{\n 'tw-text-gray-700': row._permissionValues[permissionId].modified === row._permissionValues[permissionId].actual,\n 'tw-text-blue-600 tw-font-semibold': row._permissionValues[permissionId].modified !== row._permissionValues[permissionId].actual\n }\">\n {{ row._permissionValues[permissionId].permission?.sygms_title }}\n @if (row._permissionValues[permissionId].modified !== row._permissionValues[permissionId].actual) {\n <span class=\"tw-text-xs tw-text-orange-500 tw-ml-1\" title=\"Modified from role permission\">\n ({{ row._permissionValues[permissionId].actual ? '\u2713' : '\u2717' }})\n </span>\n }\n </label>\n </div>\n }\n } @else {\n <!-- No permissions to display - show N/A (permissions are already loaded, just empty) -->\n <span class=\"tw-text-xs tw-text-gray-400\">N/A</span>\n }\n </div>\n</ng-template>" }]
|
|
15965
|
+
], template: "<!-- \n ENTERPRISE USER MASTER FORM\n \n Enterprise-Level Styling with Tailwind CSS\n Features: Responsive grids, proper typography, enhanced user experience\n-->\n\n<div class=\"tw-w-full tw-h-full tw-p-1 tw-pt-2\">\n <!-- Toast Notifications -->\n <cide-ele-toast-notification></cide-ele-toast-notification>\n \n <form class=\"tw-max-w-7xl tw-mx-auto tw-bg-transparent\" [formGroup]=\"userMasterForm\" [class.tw-opacity-60]=\"loading()\"\n (ngSubmit)=\"onSubmit()\">\n\n\n <!-- User Context Header -->\n <div\n class=\"tw-bg-gradient-to-r tw-from-blue-50 tw-to-indigo-50 tw-border tw-border-blue-200 tw-rounded-md tw-p-1 tw-mb-2 tw-shadow-sm\">\n <div class=\"tw-flex tw-items-center tw-justify-between tw-flex-wrap tw-gap-2\">\n <!-- User Basic Info Display -->\n <div class=\"tw-flex tw-items-center tw-gap-3 tw-flex-wrap\">\n <!-- Profile Photo Preview -->\n <div class=\"tw-flex tw-items-center tw-gap-2\">\n <div\n class=\"tw-w-8 tw-h-8 tw-rounded-full tw-bg-blue-100 tw-border tw-border-blue-200 tw-flex tw-items-center tw-justify-center tw-overflow-hidden\">\n @if (userMasterForm.get('user_photo_id_cyfm')?.value) {\n <img cideEleFileImage [fileId]=\"userMasterForm.get('user_photo_id_cyfm')?.value\"\n [altText]=\"'Profile Photo'\" class=\"tw-w-full tw-h-full tw-object-cover\">\n } @else {\n <cide-ele-icon name=\"person\" class=\"tw-w-5 tw-h-5 tw-text-blue-600\">\n </cide-ele-icon>\n }\n </div>\n <div class=\"tw-flex tw-flex-col\">\n <span class=\"tw-text-xs tw-font-medium tw-text-blue-900\">\n {{ getUserFullName() || 'New User' }}\n </span>\n <span class=\"tw-text-xs tw-text-blue-600\">\n {{ getUserUsername() || 'Username not set' }}\n </span>\n </div>\n </div>\n\n <!-- Contact Info -->\n <div class=\"tw-flex tw-items-center tw-gap-3\">\n <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-xs tw-text-gray-700\">\n <cide-ele-icon variant=\"gray\" size=\"xs\">email</cide-ele-icon>\n <span>{{ getUserEmail() || 'Email not set' }}</span>\n </div>\n <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-xs tw-text-gray-700\">\n <cide-ele-icon variant=\"gray\" size=\"xs\">phone</cide-ele-icon>\n <span>{{ getUserMobile() || 'Mobile not set' }}</span>\n </div>\n </div>\n\n <!-- Active Status -->\n <div class=\"tw-flex tw-items-center tw-gap-1\">\n @if (getUserActiveStatus()) {\n <span\n class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded tw-text-xs tw-font-medium tw-bg-green-100 tw-text-green-700\">\n <cide-ele-icon variant=\"green\" size=\"xs\" class=\"tw-mr-1\">check_circle</cide-ele-icon>\n Active\n </span>\n } @else {\n <span\n class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded tw-text-xs tw-font-medium tw-bg-red-100 tw-text-red-700\">\n <cide-ele-icon variant=\"red\" size=\"xs\" class=\"tw-mr-1\">cancel</cide-ele-icon>\n Inactive\n </span>\n }\n </div>\n </div>\n\n <!-- Entity Info -->\n <div class=\"tw-flex tw-items-center tw-gap-2\">\n @if (hasDefaultEntity()) {\n <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-xs tw-text-blue-700\">\n <cide-ele-icon variant=\"blue\" size=\"xs\">business</cide-ele-icon>\n <span class=\"tw-font-medium\">{{ getDefaultEntityName() }}</span>\n </div>\n } @else {\n <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-xs tw-text-gray-500\">\n <cide-ele-icon variant=\"gray\" size=\"xs\">business</cide-ele-icon>\n <span class=\"tw-italic\">No entity</span>\n </div>\n }\n\n <span class=\"tw-text-xs tw-text-gray-600 tw-px-2 tw-py-1 tw-bg-gray-100 tw-rounded\">\n {{ getEntityMappingCount() }} mapping(s)\n </span>\n </div>\n </div>\n </div>\n\n <!-- Tab Navigation -->\n <div class=\"tw-p-0 tw-mb-2 tw-border-b tw-border-gray-200\">\n <cide-ele-tab [tabs]=\"userTabs()\" [activeTabId]=\"activeTab()\" size=\"md\" variant=\"default\"\n (tabChange)=\"onTabChange($event)\">\n </cide-ele-tab>\n </div>\n\n <!-- Tab Content -->\n <div class=\"tw-transition-opacity tw-duration-300\" [class.tw-opacity-60]=\"loading()\">\n @switch (activeTab()) {\n\n @case ('basic') {\n <!-- User Basic Information Section -->\n <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\n\n <!-- Top Section: Form Fields on Left, Profile Photo on Right -->\n <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-[1fr_200px] tw-gap-4 tw-mb-4\">\n <!-- Left Side: Form Fields -->\n <div class=\"tw-space-y-4\">\n <!-- Name Fields - All in One Row -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-4\">\n <cide-ele-input id=\"user_firstname\" label=\"First Name *\" formControlName=\"user_firstname\"\n placeholder=\"Enter first name\" [maxlength]=\"20\" size=\"md\" (ngModelChange)=\"onNameFieldChange()\">\n </cide-ele-input>\n\n <cide-ele-input id=\"user_middlename\" label=\"Middle Name\" formControlName=\"user_middlename\"\n placeholder=\"Enter middle name\" [maxlength]=\"20\" size=\"md\" (ngModelChange)=\"onNameFieldChange()\">\n </cide-ele-input>\n\n <cide-ele-input id=\"user_lastname\" label=\"Last Name *\" formControlName=\"user_lastname\"\n placeholder=\"Enter last name\" [maxlength]=\"20\" size=\"md\" (ngModelChange)=\"onNameFieldChange()\">\n </cide-ele-input>\n\n <cide-ele-input id=\"user_fullname\" label=\"Full Name * (Auto-generated)\" formControlName=\"user_fullname\"\n placeholder=\"Auto-generated from name fields or enter manually\" [maxlength]=\"62\" size=\"md\">\n </cide-ele-input>\n </div>\n\n <!-- Contact Information - All in One Row -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-3 tw-gap-4\">\n <cide-ele-input id=\"user_username\" label=\"Username *\" formControlName=\"user_username\"\n placeholder=\"Enter unique username\" [maxlength]=\"20\" size=\"md\">\n </cide-ele-input>\n\n <cide-ele-input id=\"user_emailid\" label=\"Email ID *\" formControlName=\"user_emailid\" type=\"email\"\n placeholder=\"Enter valid email address\" [maxlength]=\"320\" size=\"md\">\n </cide-ele-input>\n\n <cide-ele-input id=\"user_mobileno\" label=\"Mobile Number *\" formControlName=\"user_mobileno\" type=\"tel\"\n placeholder=\"Enter mobile number\" [maxlength]=\"15\" size=\"md\">\n </cide-ele-input>\n </div>\n </div>\n\n <!-- Right Side: Profile Photo Upload -->\n <div class=\"tw-flex tw-items-start tw-justify-center tw-p-0\">\n <cide-ele-file-input id=\"user_photo_id_cyfm\" formControlName=\"user_photo_id_cyfm\" accept=\"image/*\"\n [showPreview]=\"true\" [previewBoxMode]=\"true\" [showFileName]=\"false\" previewWidth=\"180px\"\n previewHeight=\"120px\" placeholderText=\"Upload Photo\" placeholderIcon=\"cloud_upload\" [autoUpload]=\"true\"\n [uploadData]=\"getProfilePhotoUploadData()\" (uploadSuccess)=\"onProfilePhotoUploadSuccess($event)\"\n (uploadError)=\"onProfilePhotoUploadError($event)\"\n (uploadProgressChange)=\"onProfilePhotoUploadProgress($event)\">\n </cide-ele-file-input>\n </div>\n </div>\n\n\n\n <!-- Status Control -->\n <div class=\"tw-grid tw-grid-cols-1 tw-mb-2\">\n <div class=\"tw-p-2 tw-bg-blue-50 tw-border tw-border-blue-100 tw-rounded-lg\">\n <label\n class=\"tw-flex tw-flex-col tw-cursor-pointer tw-py-2 tw-bg-transparent tw-border-none tw-rounded-none tw-transition-all tw-duration-200 hover:tw-bg-blue-75\">\n <cide-ele-input type=\"checkbox\" label=\"Active User Status\" formControlName=\"user_isactive\"\n class=\"tw-h-5 tw-accent-blue-500 tw-rounded tw-mb-1\" />\n <span class=\"tw-font-semibold tw-text-gray-700 tw-text-base\"></span>\n <span class=\"tw-text-sm tw-text-gray-600 tw-mt-1 tw-leading-relaxed\">Enable this user account for system\n access and operations</span>\n </label>\n </div>\n </div>\n </div>\n }\n\n @case ('auth') {\n <!-- Authentication Section -->\n <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\n <!-- Password Fields -->\n @if (shouldShowPasswordFields()) {\n <div class=\"tw-mb-4\">\n <!-- Password Fields Header for Edit Mode -->\n @if (isEditMode()) {\n <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\n <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-800\">Update Password</h6>\n <button type=\"button\"\n class=\"tw-px-3 tw-py-1 tw-bg-gray-100 tw-text-gray-600 tw-border tw-border-gray-300 tw-rounded-md tw-text-xs tw-font-medium hover:tw-bg-gray-200 tw-transition-colors\"\n (click)=\"cancelPasswordUpdate()\">\n Cancel Password Update\n </button>\n </div>\n }\n\n <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-2 md:tw-grid-cols-1 tw-gap-6\">\n <cide-ele-input id=\"user_password\" [label]=\"getPasswordFieldLabel()\" formControlName=\"user_password\"\n type=\"password\" placeholder=\"Enter secure password (min 8 characters)\" size=\"md\">\n </cide-ele-input>\n\n <cide-ele-input id=\"user_confirm_password\" [label]=\"getPasswordConfirmLabel()\"\n formControlName=\"user_confirm_password\" type=\"password\" placeholder=\"Confirm your password\" size=\"md\">\n </cide-ele-input>\n </div>\n </div>\n }\n\n <!-- Password Update Option for Edit Mode -->\n @if (isEditMode() && !shouldShowPasswordFields()) {\n <div class=\"tw-mb-4\">\n <div class=\"tw-p-2 tw-bg-blue-50 tw-border tw-border-blue-200 tw-rounded-lg\">\n <h6 class=\"tw-text-sm tw-font-semibold tw-text-blue-800 tw-mb-2\">Password Update</h6>\n <p class=\"tw-text-sm tw-text-blue-600 tw-mb-3\">Current password will be kept. Click below to change\n password.</p>\n\n @if (hasPasswordInput()) {\n <div\n class=\"tw-mb-3 tw-p-2 tw-bg-yellow-50 tw-border tw-border-yellow-200 tw-rounded tw-text-sm tw-text-yellow-700\">\n <cide-ele-icon variant=\"yellow\" size=\"xs\" class=\"tw-mr-1\">warning</cide-ele-icon>\n Password fields contain text. Click \"Change Password\" to manage existing input.\n </div>\n }\n\n <button type=\"button\"\n class=\"tw-px-4 tw-py-2 tw-bg-blue-100 tw-text-blue-700 tw-border tw-border-blue-300 tw-rounded-md tw-text-sm tw-font-medium hover:tw-bg-blue-200 tw-transition-colors\"\n (click)=\"triggerPasswordUpdate()\">\n @if (hasPasswordInput()) {\n Manage Password Fields\n } @else {\n Change Password\n }\n </button>\n </div>\n </div>\n }\n\n <!-- Password Options -->\n <div class=\"tw-grid tw-grid-cols-1 tw-gap-4 tw-mb-4\">\n <div class=\"tw-p-2 tw-bg-yellow-50 tw-border tw-border-yellow-100 tw-rounded-lg\">\n <label\n class=\"tw-flex tw-flex-col tw-gap-2 tw-cursor-pointer tw-py-2 tw-bg-transparent tw-border-none tw-rounded-none tw-transition-all tw-duration-200\">\n <cide-ele-input type=\"checkbox\" label=\"Force Password Change on Login\"\n formControlName=\"user_passwordchangeonlogin\" class=\"tw-h-5 tw-accent-yellow-500 tw-rounded tw-mb-1\" />\n <span class=\"tw-text-sm tw-text-gray-600 tw-mt-1 tw-leading-relaxed\">User will be required to change\n password on next login</span>\n </label>\n </div>\n </div>\n\n </div>\n }\n\n @case ('roles') {\n <!-- Entity, Roles & Permissions Mapping Section -->\n <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\n\n\n\n <!-- Important Note -->\n <div class=\"tw-bg-amber-50 tw-border tw-border-amber-200 tw-rounded-lg tw-p-2 tw-mb-4\">\n <div class=\"tw-flex tw-items-start tw-gap-3\">\n <cide-ele-icon variant=\"amber\" size=\"lg\">info</cide-ele-icon>\n <div class=\"tw-flex-1\">\n <h4 class=\"tw-text-sm tw-font-semibold tw-text-amber-800 tw-mb-1\">Entity-Role Based Access</h4>\n <p class=\"tw-text-sm tw-text-amber-700 tw-mb-2\">User access is completely managed through entity-role\n mappings below. At least one entity mapping is required for user access.</p>\n @if (hasDefaultEntity()) {\n <div class=\"tw-flex tw-items-center tw-gap-2 tw-mt-2 tw-p-2 tw-bg-amber-100 tw-rounded\">\n <cide-ele-icon variant=\"amber\" size=\"sm\">star</cide-ele-icon>\n <span class=\"tw-text-sm tw-text-amber-800\">\n <strong>Default Entity:</strong> {{ getDefaultEntityName() }}\n </span>\n </div>\n } @else {\n <div class=\"tw-text-sm tw-text-amber-600 tw-mt-2 tw-italic\">\n \u26A0\uFE0F No default entity selected. Please set one entity as default.\n </div>\n }\n </div>\n </div>\n </div>\n\n <!-- Entity-Role Mapping Section -->\n <div class=\"tw-flex tw-text-center tw-justify-between tw-items-center tw-mb-4\">\n <div>\n <h4 class=\"tw-text-sm tw-text-left tw-font-semibold tw-text-blue-900 tw-mb-1\">Entity-Role Mapping</h4>\n <p class=\"tw-text-sm tw-text-blue-700\">Map user to entities with specific roles and permissions</p>\n </div>\n <div class=\"tw-flex tw-flex-col tw-items-end\">\n <button cideEleButton variant=\"primary\" size=\"md\" type=\"button\" (click)=\"addEntityMapping()\"\n leftIcon=\"add\" [disabled]=\"isAllEntitiesMapped()\">\n Add Entity Mapping\n </button>\n\n @if (isAllEntitiesMapped()) {\n <div class=\"tw-mt-2 tw-p-2 tw-bg-blue-50 tw-border tw-border-blue-200 tw-rounded-md tw-max-w-xs\">\n <p class=\"tw-text-xs tw-text-blue-700\">\n <cide-ele-icon variant=\"info\" size=\"xs\" class=\"tw-mr-1\">info</cide-ele-icon>\n All available entities are already mapped.\n </p>\n </div>\n }\n </div>\n </div>\n\n <div formArrayName=\"core_entity_mapping\">\n @for (mapping of entityMappings(); track $index; let i = $index) {\n <div class=\"tw-bg-white tw-border tw-border-blue-200 tw-rounded-xl tw-mb-6 tw-overflow-hidden tw-shadow-sm\"\n [formGroupName]=\"i\">\n <div\n class=\"tw-bg-gradient-to-r tw-from-blue-50 tw-to-blue-100 tw-px-6 tw-py-3 tw-flex tw-justify-between tw-items-center tw-border-b tw-border-blue-200\">\n <div class=\"tw-flex tw-items-center tw-gap-2\">\n <h5 class=\"tw-m-0 tw-text-blue-800 tw-text-sm tw-font-semibold\">Entity Mapping {{ i + 1 }}</h5>\n @if (mapping.syenm_isdefault) {\n <span\n class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded-full tw-text-xs tw-font-medium tw-bg-green-100 tw-text-green-800\">\n <cide-ele-icon variant=\"green\" size=\"xs\" class=\"tw-mr-1\">star</cide-ele-icon>\n Default\n </span>\n }\n </div>\n @if (!mapping?._id) {\n <button cideEleButton variant=\"danger\" size=\"sm\" type=\"button\" (click)=\"removeEntityMapping(i)\"\n leftIcon=\"delete\">\n Remove\n </button>\n }\n </div>\n\n <div>\n <!-- Entity and Role Selection -->\n <div class=\"tw-grid tw-px-3 tw-py-1 tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4 tw-mb-4\">\n <div>\n <cide-ele-select label=\"Entity *\" [options]=\"getFilteredEntityOptions(i)\"\n formControlName=\"syenm_entity_id_syen\" valueKey=\"_id\" labelKey=\"syen_name\"\n placeholder=\"Select entity\" size=\"md\" (change)=\"onEntityChange(i, $event)\">\n </cide-ele-select>\n\n @if (isAllEntitiesSelected(i)) {\n <div class=\"tw-mt-2 tw-p-2 tw-bg-yellow-50 tw-border tw-border-yellow-200 tw-rounded-md\">\n <p class=\"tw-text-xs tw-text-yellow-700\">\n <cide-ele-icon variant=\"warning\" size=\"xs\" class=\"tw-mr-1\">info</cide-ele-icon>\n All entities are already mapped. Remove another mapping to add this one.\n </p>\n </div>\n }\n </div>\n <cide-ele-select label=\"Role for this Entity\" [options]=\"getRoleOptionsForEntity(i)\"\n formControlName=\"syenm_role_id_syusrol\" valueKey=\"_id\" labelKey=\"syusrol_role_name\"\n placeholder=\"Select role for this entity\" size=\"md\" (change)=\"onRoleChange(i, $event)\">\n </cide-ele-select>\n </div>\n\n\n <!-- Entity-Specific Details and Active Period - All in One Row -->\n <div class=\"tw-grid tw-px-3 tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-4 tw-mb-4\">\n <cide-ele-select label=\"Department for this Entity\" [options]=\"getDepartmentOptionsForEntity(i)\"\n formControlName=\"syenm_department_id_sydept\" (change)=\"onDepartmentChange($event)\" valueKey=\"_id\"\n labelKey=\"sydept_name\" placeholder=\"Select department\" size=\"md\">\n </cide-ele-select>\n\n <cide-ele-select label=\"Designation for this Entity\" [options]=\"getDesignationOptionsForEntity(i)\"\n valueKey=\"_id\" labelKey=\"sydsg_name\" formControlName=\"syenm_designation_id_sydsg\"\n placeholder=\"Select designation\" size=\"md\">\n </cide-ele-select>\n\n <cide-ele-input label=\"Active From *\" [id]=\"'syenm_activefrom['+i+']'\"\n formControlName=\"syenm_activefrom\" type=\"date\" size=\"md\">\n </cide-ele-input>\n\n <cide-ele-input label=\"Active Until\" [id]=\"'syenm_activeupto['+i+']'\"\n formControlName=\"syenm_activeupto\" type=\"date\" size=\"md\">\n </cide-ele-input>\n </div>\n\n <!-- Mapping Settings -->\n <div class=\"tw-grid tw-px-3 tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-4 tw-mb-4\">\n <div class=\"tw-p-2 tw-bg-green-50 tw-border tw-border-green-200 tw-rounded-lg\">\n <cide-ele-input type=\"checkbox\" label=\"Default Entity\" formControlName=\"syenm_isdefault\"\n (change)=\"onDefaultEntityChange(i, $event)\" class=\"tw-h-5 tw-accent-green-500\" />\n <span class=\"tw-text-xs tw-text-green-600 tw-block tw-mt-1\">Set as user's default entity (only one\n allowed)</span>\n </div>\n\n <div class=\"tw-p-2 tw-bg-blue-50 tw-border tw-border-blue-200 tw-rounded-lg\">\n <cide-ele-input type=\"checkbox\" label=\"Active Mapping\" formControlName=\"syenm_isactive\"\n class=\"tw-h-5 tw-accent-blue-500\" />\n <span class=\"tw-text-xs tw-text-blue-600 tw-block tw-mt-1\">Enable this entity mapping</span>\n </div>\n </div>\n\n <!-- Menu Rights Grid for this Entity-Role -->\n <div class=\"tw-border-t tw-border-gray-200\">\n\n @if (getMenuRightsForMapping(i).length > 0) {\n <!-- Menu Rights Tree Grid -->\n\n <cide-ele-data-grid [config]=\"getMenuRightsGridConfig(i)\"\n [templateRenderers]=\"getMenuRightsTemplateRenderers(i)\"\n (gridEvent)=\"onMenuRightsGridEvent($event, i)\" class=\"tw-h-96 tw-w-full\">\n </cide-ele-data-grid>\n\n } @else {\n <div class=\"tw-text-center tw-py-8 tw-bg-gray-50 tw-border tw-border-gray-200 tw-rounded-lg\">\n <div class=\"tw-text-gray-400 tw-mb-3\">\n <cide-ele-icon variant=\"gray\" size=\"lg\">menu</cide-ele-icon>\n </div>\n <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-600 tw-mb-2\">No Menu Rights Available</h6>\n <p class=\"tw-text-xs tw-text-gray-500 tw-mb-3 tw-text-center\">Select both entity and role to\n automatically load\n menu rights for this mapping.</p>\n </div>\n }\n </div>\n </div>\n </div>\n }\n </div>\n\n @if (entityMappings().length === 0) {\n <div class=\"tw-text-center tw-py-8 tw-bg-white tw-border tw-border-blue-200 tw-rounded-lg\">\n <div class=\"tw-text-blue-400 tw-mb-3\">\n <cide-ele-icon variant=\"blue\" size=\"lg\">business</cide-ele-icon>\n </div>\n <h4 class=\"tw-text-sm tw-font-medium tw-text-blue-800 tw-mb-2\">No Entity Mappings</h4>\n <p class=\"tw-text-blue-600 tw-mb-4 tw-text-center\">Add entity mappings to assign specific roles and\n permissions for different entities.</p>\n <button class=\"tw-mx-auto\" cideEleButton variant=\"primary\" size=\"md\" type=\"button\"\n (click)=\"addEntityMapping()\" leftIcon=\"add\">\n Add First Entity Mapping\n </button>\n </div>\n }\n </div>\n }\n\n @case ('addresses') {\n <!-- Contact Addresses Section -->\n <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\n <div class=\"tw-flex tw-justify-end\">\n <div class=\"tw-flex tw-justify-between tw-items-end tw-mb-2 tw-gap-4\">\n <button cideEleButton variant=\"primary\" size=\"md\" type=\"button\" (click)=\"addContactAddress()\"\n leftIcon=\"add\" [disabled]=\"!hasAddContactAddressRights()\">\n Add New Address\n </button>\n </div>\n </div>\n\n <div formArrayName=\"core_user_contact_addresses\">\n @for (address of contactAddresses(); track $index; let i = $index) {\n <div [formGroupName]=\"i\"\n class=\"tw-bg-white tw-border tw-border-gray-200 tw-rounded-xl tw-mb-8 tw-overflow-hidden tw-transition-all tw-duration-300 hover:tw-shadow-lg tw-shadow-sm\">\n <div\n class=\"tw-bg-gradient-to-r tw-from-gray-50 tw-to-gray-100 tw-px-4 tw-py-2 tw-flex tw-justify-between tw-items-center tw-border-b tw-border-gray-200\">\n <!-- Use address type as header instead of generic \"Address X\" -->\n <h4 class=\"tw-m-0 tw-text-gray-700 tw-text-sm tw-font-semibold tw-tracking-tight\">\n {{ getAddressTypeLabel(i) || ('Address ' + (i + 1)) }}\n </h4>\n <div class=\"tw-flex tw-items-center tw-gap-2\">\n @if (isAddressOwner(i)) {\n <button cideEleButton variant=\"secondary\" size=\"xs\" type=\"button\" (click)=\"shareAddress(i)\"\n leftIcon=\"share\" class=\"tw-text-blue-600 hover:tw-text-blue-700\">\n Share\n </button>\n }\n @if (!address?._id) {\n <button cideEleButton variant=\"danger\" size=\"sm\" type=\"button\" (click)=\"removeContactAddress(i)\"\n leftIcon=\"delete\">\n Remove\n </button>\n }\n </div>\n </div>\n <div class=\"tw-p-4\">\n <!-- Main Layout: Inputs on Left, Address Textarea on Right -->\n <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-4 tw-gap-3 tw-mb-3\">\n \n <!-- Left Side: Input Fields (3/4 width) -->\n <div class=\"lg:tw-col-span-3\">\n <!-- Row 1: Address Type, Contact Person -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3 tw-mb-3\">\n <cide-ele-select label=\"Address Type\" [options]=\"addressTypeOptions()\" id=\"sycad_address_type_id_sygms\"\n formControlName=\"sycad_address_type_id_sygms\" placeholder=\"Select type\" size=\"sm\"\n valueKey=\"_id\" labelKey=\"sygms_title\" (change)=\"onAddressTypeChange(i)\">\n </cide-ele-select>\n\n <cide-ele-input label=\"Contact Person\" formControlName=\"sycad_contact_person_name\"\n placeholder=\"Enter contact person\" size=\"sm\">\n </cide-ele-input>\n </div>\n\n <!-- Row 2: Postal Code, City, State, Country -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-4 tw-gap-3\">\n <cide-ele-select label=\"Postal Code\" [options]=\"addressPostalCodes()[i] || []\"\n formControlName=\"sycad_contact_pin_sypin\" placeholder=\"Select postal code\" [searchable]=\"true\"\n [loading]=\"addressPostalCodesLoading()[i] || false\" (searchChange)=\"onPostalCodeSearch($event, i)\"\n (change)=\"onPostalCodeSelection($event, i)\" size=\"sm\">\n </cide-ele-select>\n\n <cide-ele-input label=\"City\" formControlName=\"sycad_contact_city_sypin\" placeholder=\"Enter city\"\n size=\"sm\">\n </cide-ele-input>\n\n <cide-ele-input label=\"State\" formControlName=\"sycad_contact_state_sypin\" placeholder=\"Enter state\"\n size=\"sm\">\n </cide-ele-input>\n\n <cide-ele-select label=\"Country\" [options]=\"addressCountries()[i] || []\"\n formControlName=\"sycad_contact_country_syctr\" placeholder=\"Select country\" valueKey=\"_id\"\n labelKey=\"syctr_country_iso_name\" [searchable]=\"true\" (searchChange)=\"onCountrySearch($event, i)\"\n [loading]=\"addressCountriesLoading()[i] || false\" size=\"sm\">\n </cide-ele-select>\n </div>\n </div>\n\n <!-- Right Side: Address Textarea (1/4 width, spans 2 rows) -->\n <div class=\"lg:tw-col-span-1 lg:tw-row-span-2 tw-flex tw-flex-col\">\n <cide-ele-textarea label=\"Complete Address\" formControlName=\"sycad_contact_address\"\n placeholder=\"Enter complete address with area, city, and landmarks\" [rows]=\"4\" size=\"sm\"\n class=\"tw-h-full\">\n </cide-ele-textarea>\n </div>\n </div>\n\n <!-- Contact Details: Primary Phone, Alt Phone, Fax, Primary Email in 4 columns -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-4 tw-gap-3 tw-mb-3\">\n <cide-ele-input label=\"Primary Phone\" formControlName=\"sycad_contact_phone\" type=\"tel\"\n placeholder=\"Primary phone\" size=\"sm\">\n </cide-ele-input>\n\n <cide-ele-input label=\"Alternate Phone\" formControlName=\"sycad_contact_phone_alt\" type=\"tel\"\n placeholder=\"Alternate phone\" size=\"sm\">\n </cide-ele-input>\n\n <cide-ele-input label=\"Fax Number\" formControlName=\"sycad_contact_fax\" placeholder=\"Fax number\"\n size=\"sm\">\n </cide-ele-input>\n\n <cide-ele-input label=\"Primary Email\" formControlName=\"sycad_contact_email\" type=\"email\"\n placeholder=\"Primary email\" size=\"sm\">\n </cide-ele-input>\n </div>\n\n <!-- Alternate Email in single row -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3\">\n <cide-ele-input label=\"Alternate Email\" formControlName=\"sycad_contact_email_alt\" type=\"email\"\n placeholder=\"Alternate email address\" size=\"sm\">\n </cide-ele-input>\n </div>\n </div>\n </div>\n }\n </div>\n </div>\n }\n\n @case ('documents') {\n <!-- Documents Section -->\n <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\n <div class=\"tw-flex tw-justify-end tw-items-end tw-mb-2 tw-gap-4\">\n <button cideEleButton variant=\"primary\" size=\"md\" type=\"button\" (click)=\"addDocument()\" leftIcon=\"add\" [disabled]=\"!hasAddDocumentRights()\">\n Add Document\n </button>\n </div>\n <div formArrayName=\"core_user_documents\">\n @for (doc of documents(); track $index; let i = $index) {\n <div [formGroupName]=\"i\"\n class=\"tw-bg-white tw-border tw-border-gray-200 tw-rounded-xl tw-mb-8 tw-overflow-hidden tw-transition-all tw-duration-300 hover:tw-shadow-lg tw-shadow-sm\">\n <div\n class=\"tw-bg-gradient-to-r tw-from-gray-50 tw-to-gray-100 tw-px-4 tw-py-2 tw-flex tw-justify-between tw-items-center tw-border-b tw-border-gray-200\">\n <h4 class=\"tw-m-0 tw-text-gray-700 tw-text-sm tw-font-semibold tw-tracking-tight\">\n {{ getDocumentTypeLabel(i) || ('Document ' + (i + 1)) }}\n </h4>\n <div class=\"tw-flex tw-gap-2\">\n @if (doc?._id) {\n <button cideEleButton variant=\"secondary\" size=\"sm\" type=\"button\" (click)=\"shareDocumentRights(i)\"\n leftIcon=\"share\">\n Share\n </button>\n }\n </div>\n </div>\n <div class=\"tw-p-4\">\n <!-- Main Layout: Inputs on Left, File Upload on Right -->\n <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-3 tw-gap-4\">\n \n <!-- Left Side: Document Information (2/3 width) -->\n <div class=\"lg:tw-col-span-2\">\n <!-- Row 1: Document Type, Document Number, Name as per Document -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-3 tw-mb-3\">\n <cide-ele-select label=\"Document Type\" [options]=\"documentTypeOptions()\"\n formControlName=\"syusd_document_type_id_sygms\" placeholder=\"Select type\" size=\"sm\"\n valueKey=\"_id\" labelKey=\"sygms_title\" (change)=\"onDocumentTypeChange(i)\">\n </cide-ele-select>\n\n <cide-ele-input label=\"Document Number\" formControlName=\"syusd_doc_number\"\n placeholder=\"Document number\" size=\"sm\">\n </cide-ele-input>\n\n <cide-ele-input label=\"Name as per Document\" formControlName=\"syusd_doc_name_as_per_doc\"\n placeholder=\"Name on document\" size=\"sm\">\n </cide-ele-input>\n </div>\n\n <!-- Row 2: Issue Date, Expiry Date, Photo Group -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-3 tw-mb-3\">\n <cide-ele-input label=\"Issue Date\" formControlName=\"syusd_doc_issue_date\"\n [id]=\"'syusd_doc_issue_date['+i+']'\" type=\"date\" size=\"sm\">\n </cide-ele-input>\n\n <cide-ele-input label=\"Expiry Date\" formControlName=\"syusd_doc_expiry_date\"\n [id]=\"'syusd_doc_expiry_date['+i+']'\" type=\"date\" size=\"sm\">\n </cide-ele-input>\n </div>\n\n <!-- Row 3: Verification Status, KYC Status -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3\">\n <cide-ele-select label=\"Verification Status\" [options]=\"documentVerificationStatusOptions()\"\n formControlName=\"syusd_doc_verification_status_id_sygms\" placeholder=\"Select status\"\n size=\"sm\" valueKey=\"_id\" labelKey=\"sygms_title\">\n </cide-ele-select>\n\n <cide-ele-select label=\"KYC Status\" [options]=\"documentKycStatusOptions()\"\n formControlName=\"syusd_doc_kyc_status_id_sygms\" placeholder=\"Select KYC status\" size=\"sm\"\n valueKey=\"_id\" labelKey=\"sygms_title\">\n </cide-ele-select>\n </div>\n </div>\n\n <!-- Right Side: File Upload (1/3 width) -->\n <div class=\"lg:tw-col-span-1\">\n <div class=\"tw-bg-gray-50 tw-border tw-border-gray-200 tw-rounded-lg tw-p-3 tw-h-full\">\n \n <!-- File Upload Input -->\n <cide-ele-file-input\n [id]=\"'document-files-' + i\"\n [multiple]=\"true\"\n formControlName=\"syusd_photo_group_id_cyfm\"\n [accept]=\"'.pdf,.jpg,.jpeg,.png,.doc,.docx'\"\n [autoUpload]=\"true\"\n [uploadData]=\"getDocumentUploadData(i)\"\n (change)=\"onDocumentFilesSelected($event, i)\"\n (uploadSuccess)=\"onDocumentUploadSuccess($event, i)\"\n (uploadError)=\"onDocumentUploadError($event, i)\"\n (uploadProgressChange)=\"onDocumentUploadProgress($event, i)\"\n class=\"tw-mb-3\"\n size=\"sm\">\n </cide-ele-file-input>\n\n <!-- Upload Status -->\n <!-- Upload status is now handled by the file input component itself -->\n </div>\n </div>\n </div>\n </div>\n </div>\n }\n </div>\n </div>\n }\n\n @case ('family') {\n <!-- Family Details Section - Compact Design -->\n <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\n <div class=\"tw-flex tw-justify-end tw-items-end tw-mb-3 tw-gap-4\">\n <button cideEleButton variant=\"primary\" size=\"sm\" type=\"button\" (click)=\"addFamilyDetail()\" leftIcon=\"add\" [disabled]=\"!hasAddFamilyDetailRights()\">\n Add Family Member\n </button>\n </div>\n\n <div formArrayName=\"core_user_family_details\">\n @for (family of familyDetails(); track $index; let i = $index) {\n <div [formGroupName]=\"i\"\n class=\"tw-bg-white tw-border tw-border-gray-200 tw-rounded-lg tw-mb-4 tw-overflow-hidden tw-transition-all tw-duration-200 hover:tw-shadow-md tw-shadow-sm\">\n \n <!-- Compact Header -->\n <div class=\"tw-bg-gray-50 tw-px-4 tw-py-2 tw-flex tw-justify-between tw-items-center tw-border-b tw-border-gray-200\">\n <h4 class=\"tw-m-0 tw-text-gray-700 tw-text-sm tw-font-medium\">Family Member {{ i + 1 }}</h4>\n <div class=\"tw-flex tw-gap-2\">\n @if (family?._id) {\n <button cideEleButton variant=\"secondary\" size=\"xs\" type=\"button\" (click)=\"shareFamilyDetailRights(i)\"\n leftIcon=\"share\">\n Share\n </button>\n }\n @if (!family?._id) {\n <button cideEleButton variant=\"danger\" size=\"xs\" type=\"button\" (click)=\"removeFamilyDetail(i)\" leftIcon=\"delete\">\n Remove\n </button>\n }\n </div>\n </div>\n \n <!-- Compact Form Content - 3 inputs per row -->\n <div class=\"tw-p-4\">\n <!-- Row 1: Name, User, and Combined Relationship/Active Status (33.33% each) -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-3 tw-mb-3\">\n <cide-ele-input label=\"Family Member Name\" formControlName=\"syfdl_family_member_name\"\n placeholder=\"Enter family member full name\" size=\"sm\">\n </cide-ele-input>\n\n <cide-ele-select label=\"Family Member User\" [options]=\"userOptions(i)\"\n formControlName=\"syfdl_family_member_id_user\" placeholder=\"Select family member user\" size=\"sm\"\n valueKey=\"_id\" labelKey=\"user_fullname\" [searchable]=\"true\"\n [loading]=\"userSearchLoading()[i] || false\" (searchChange)=\"onUserSearchChange($event, i)\"\n (change)=\"onUserSelectionChange($event, i)\">\n </cide-ele-select>\n\n <!-- Combined Relationship and Active Status (33.33%) -->\n <div class=\"tw-flex tw-flex-row tw-gap-2 tw-items-end\">\n <div class=\"tw-flex-1\">\n <cide-ele-select label=\"Relationship\" [options]=\"relationshipOptions()\"\n formControlName=\"syfdl_relationship_id_sygms\" placeholder=\"Select relationship\" size=\"sm\"\n valueKey=\"_id\" labelKey=\"sygms_title\">\n </cide-ele-select>\n </div>\n\n <div class=\"tw-flex tw-items-center tw-pt-1 tw-flex-shrink-0\">\n <cide-ele-input formControlName=\"syfdl_isactive\" type=\"checkbox\" label=\"Active\" size=\"sm\">\n </cide-ele-input>\n </div>\n </div>\n </div>\n\n <!-- Row 2: Blood Group, DOB, and Phone -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 xl:tw-grid-cols-3 tw-gap-3 tw-mb-3\">\n <cide-ele-select label=\"Blood Group\" [options]=\"bloodGroupOptions()\"\n formControlName=\"syfdl_blood_group_sygms\" placeholder=\"Select blood group\" size=\"sm\" valueKey=\"_id\"\n labelKey=\"sygms_title\">\n </cide-ele-select>\n\n <cide-ele-input label=\"Date of Birth\" formControlName=\"syfdl_family_member_dob\" type=\"date\" size=\"sm\"\n [id]=\"'syfdl_family_member_dob['+i+']'\">\n </cide-ele-input>\n\n <cide-ele-input label=\"Contact Phone\" formControlName=\"syfdl_contact_phone\" type=\"tel\"\n placeholder=\"Enter contact phone\" size=\"sm\">\n </cide-ele-input>\n </div>\n\n <!-- Row 3: Email, Email ID, and Contact Number -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 xl:tw-grid-cols-3 tw-gap-3 tw-mb-3\">\n <cide-ele-input label=\"Contact Email\" formControlName=\"syfdl_contact_email\" type=\"email\"\n placeholder=\"Enter contact email\" size=\"sm\">\n </cide-ele-input>\n\n <cide-ele-input label=\"Contact Email ID\" formControlName=\"syfdl_contact_email_id\" type=\"email\"\n placeholder=\"Enter contact email ID\" size=\"sm\">\n </cide-ele-input>\n\n <cide-ele-input label=\"Contact Number\" formControlName=\"syfdl_contact_number\" type=\"tel\"\n placeholder=\"Enter contact number\" size=\"sm\">\n </cide-ele-input>\n </div>\n\n </div>\n </div>\n }\n </div>\n </div>\n }\n }\n </div>\n\n <!-- Form Actions -->\n <div\n class=\"tw-flex tw-justify-between tw-items-center tw-gap-4 tw-py-2 tw-bg-white tw-border-t tw-border-gray-200 tw-sticky tw-bottom-0 tw-z-10\">\n <!-- Error Display Component -->\n <div class=\"tw-flex-1\">\n <cide-form-field-error [formGroup]=\"userMasterForm\"></cide-form-field-error>\n </div>\n\n <!-- Action Buttons -->\n <div class=\"tw-flex tw-gap-4\">\n <button cideEleButton type=\"button\" variant=\"secondary\" (click)=\"resetForm()\" leftIcon=\"refresh\"\n [disabled]=\"loading()\">\n Reset Form\n </button>\n\n <button cideEleButton type=\"submit\" variant=\"primary\" [disabled]=\"loading() || userMasterForm.invalid\"\n [loading]=\"loading()\" leftIcon=\"save\">\n Save User Master\n </button>\n </div>\n </div>\n </form>\n</div>\n\n<!-- Template Renderers for Role Permissions Grid -->\n<ng-template #menuDetailsRendererTemplate let-row=\"row\">\n <div class=\"tw-flex tw-items-center tw-space-x-3 tw-min-w-0\">\n <!-- Menu Icon -->\n <div class=\"tw-flex-shrink-0\">\n @if (row.syme_type === 'module') {\n <cide-ele-icon class=\"tw-text-blue-600 tw-w-4 tw-h-4\">folder</cide-ele-icon>\n } @else if (row.syme_type === 'section') {\n <cide-ele-icon class=\"tw-text-green-600 tw-w-4 tw-h-4\">folder_open</cide-ele-icon>\n } @else if (row.syme_type === 'menu') {\n <cide-ele-icon class=\"tw-text-purple-600 tw-w-4 tw-h-4\">menu</cide-ele-icon>\n } @else {\n <cide-ele-icon class=\"tw-text-gray-600 tw-w-4 tw-h-4\">description</cide-ele-icon>\n }\n </div>\n\n <!-- Menu Details -->\n <div class=\"tw-ml-3 tw-min-w-0 tw-flex-1\">\n <div class=\"tw-flex tw-items-center tw-gap-2\">\n <div class=\"tw-text-xs tw-font-medium tw-text-gray-900 tw-truncate\" [title]=\"row.syme_title\">\n {{ row.syme_title || row.menu?.syme_title || row.menu?.syme_menu_name || 'Untitled' }}\n </div>\n <!-- Green pill indicator for parent menus with child permissions -->\n @if (row.syme_type === 'module' || row.syme_type === 'section') {\n @if (hasChildMenusWithPermissions(row._id)) {\n <span\n class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-green-100 tw-text-green-800 tw-whitespace-nowrap\">\n Assigned\n </span>\n }\n }\n </div>\n @if (row.permission?.sygms_name) {\n <div class=\"tw-text-xs tw-text-blue-500 tw-truncate\" [title]=\"row.permission?.sygms_name\">\n {{ row.permission?.sygms_name }}\n </div>\n }\n </div>\n </div>\n</ng-template>\n\n<!-- Menu Type Renderer Template -->\n<ng-template #menuTypeRendererTemplate let-row=\"row\" let-value=\"value\">\n <div class=\"tw-flex tw-items-center tw-justify-center\">\n @if (row.syme_type === 'module') {\n <span\n class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded-full tw-text-xs tw-font-medium tw-bg-blue-100 tw-text-blue-800\">\n Module\n </span>\n } @else if (row.syme_type === 'section') {\n <span\n class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded-full tw-text-xs tw-font-medium tw-bg-green-100 tw-text-green-800\">\n Section\n </span>\n } @else if (row.syme_type === 'menu') {\n <span\n class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded-full tw-text-xs tw-font-medium tw-bg-purple-100 tw-text-purple-800\">\n Menu\n </span>\n } @else {\n <span\n class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded-full tw-text-xs tw-font-medium tw-bg-gray-100 tw-text-gray-800\">\n {{ row.syme_type || 'Unknown' }}\n </span>\n }\n </div>\n</ng-template>\n\n<!-- Permissions Checkbox Renderer Template -->\n<ng-template #permissionsCheckboxRendererTemplate let-row=\"row\" let-value=\"value\">\n <div class=\"tw-flex tw-flex-wrap tw-gap-2 tw-max-w-full\">\n @if (row.syme_type === 'menu' && row?.syme_permissions_id_sygms && row?.syme_permissions_id_sygms.length > 0) {\n @for (permissionId of row?.syme_permissions_id_sygms || []; track permissionId) {\n <div class=\"tw-flex tw-items-center tw-space-x-1\">\n <div class=\"tw-flex tw-items-center tw-space-x-1\">\n <input type=\"checkbox\" [checked]=\"isPermissionSelected(row._id, permissionId)\" [disabled]=\"true\"\n class=\"tw-h-4 tw-w-4 tw-text-blue-600 tw-bg-gray-100 tw-border-gray-300 tw-rounded focus:tw-ring-blue-500\">\n <label class=\"tw-text-xs tw-text-gray-700\">\n {{ getPermissionById(permissionId)?.sygms_title || 'Unknown' }}\n </label>\n </div>\n </div>\n }\n } @else {\n <!-- Show green checkmark for parent menus with child permissions -->\n @if (row.syme_type === 'module' || row.syme_type === 'section' || row.syme_type === 'title') {\n @if (hasChildMenusWithPermissions(row._id)) {\n <div class=\"tw-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-bg-green-100 tw-rounded-full\">\n <cide-ele-icon class=\"tw-text-green-600\" size=\"xs\">\n check\n </cide-ele-icon>\n </div>\n } @else {\n <span class=\"tw-text-xs tw-text-gray-400\">N/A</span>\n }\n } @else {\n <span class=\"tw-text-xs tw-text-gray-400\">N/A</span>\n }\n }\n </div>\n</ng-template>\n\n<!-- Menu Rights Permissions Renderer Template -->\n<ng-template #menuRightsPermissionsRendererTemplate let-row=\"row\" let-value=\"value\">\n <div class=\"tw-flex tw-flex-wrap tw-gap-2 tw-max-w-full\">\n <!-- Role Rights Display -->\n @if (row.role_rights && row.role_rights.length > 0) {\n <div class=\"tw-mb-2\">\n <div class=\"tw-text-xs tw-text-gray-500 tw-mb-1\">Role Rights:</div>\n <div class=\"tw-flex tw-flex-wrap tw-gap-1\">\n @for (right of row.role_rights; track $index) {\n <span class=\"tw-inline-block tw-px-2 tw-py-1 tw-text-xs tw-bg-blue-100 tw-text-blue-800 tw-rounded\">\n {{ right }}\n </span>\n }\n </div>\n </div>\n }\n\n\n <!-- Exception Indicator -->\n @if (row.hasException) {\n <div class=\"tw-mt-2\">\n <span class=\"tw-inline-block tw-px-2 tw-py-1 tw-text-xs tw-bg-yellow-100 tw-text-yellow-800 tw-rounded\">\n Override\n </span>\n </div>\n } @else {\n <div class=\"tw-mt-2\">\n <span class=\"tw-text-xs tw-text-gray-400\">Default</span>\n </div>\n }\n </div>\n</ng-template>\n\n<!-- Permissions Renderer Template -->\n<ng-template #permissionsRendererTemplate let-row=\"row\" let-value=\"value\">\n <div class=\"tw-flex tw-flex-wrap tw-gap-2 tw-max-w-full\">\n @if (row._permissionValues && Object.keys(row._permissionValues).length > 0) {\n @for (permissionId of Object.keys(row._permissionValues); track permissionId) {\n <div class=\"tw-flex tw-items-center tw-space-x-2\">\n <cide-ele-input type=\"checkbox\" [ngModel]=\"row._permissionValues[permissionId].checked\"\n (ngModelChange)=\"onPermissionChangeSafe($event, row, permissionId)\"\n [id]=\"'permission-' + row._id + '-' + permissionId\" class=\"tw-h-4 tw-w-4\">\n </cide-ele-input>\n <label [for]=\"'permission-' + row._id + '-' + permissionId\" \n class=\"tw-text-xs tw-cursor-pointer\"\n [ngClass]=\"{\n 'tw-text-gray-700': row._permissionValues[permissionId].modified === row._permissionValues[permissionId].actual,\n 'tw-text-blue-600 tw-font-semibold': row._permissionValues[permissionId].modified !== row._permissionValues[permissionId].actual\n }\">\n {{ row._permissionValues[permissionId].permission?.sygms_title }}\n @if (row._permissionValues[permissionId].modified !== row._permissionValues[permissionId].actual) {\n <span class=\"tw-text-xs tw-text-orange-500 tw-ml-1\" title=\"Modified from role permission\">\n ({{ row._permissionValues[permissionId].actual ? '\u2713' : '\u2717' }})\n </span>\n }\n </label>\n </div>\n }\n } @else {\n <!-- No permissions to display - show N/A (permissions are already loaded, just empty) -->\n <span class=\"tw-text-xs tw-text-gray-400\">N/A</span>\n }\n </div>\n</ng-template>" }]
|
|
15966
15966
|
}], ctorParameters: () => [] });
|
|
15967
15967
|
|
|
15968
15968
|
var userCreate_component = /*#__PURE__*/Object.freeze({
|