cloud-ide-core 2.0.165 → 2.0.169
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.
- package/fesm2022/cloud-ide-core.mjs +76 -59
- package/fesm2022/cloud-ide-core.mjs.map +1 -1
- package/index.d.ts +1 -0
- package/package.json +1 -1
- package/README.md +0 -63
|
@@ -2350,7 +2350,7 @@ class MenuListComponent {
|
|
|
2350
2350
|
}
|
|
2351
2351
|
}
|
|
2352
2352
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MenuListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2353
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: MenuListComponent, isStandalone: true, selector: "cide-core-app-menu-list", viewQueries: [{ propertyName: "menuDetailsRendererTemplate", first: true, predicate: ["menuDetailsRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "menuTypeRendererTemplate", first: true, predicate: ["menuTypeRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "permissionsRendererTemplate", first: true, predicate: ["permissionsRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "actionsDropdownRendererTemplate", first: true, predicate: ["actionsDropdownRendererTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Menu List with Shared Wrapper -->\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'core_menu_list' }\">\n<div class=\"tw-table tw-w-full tw-h-full\">\n\n <!-- Quick Add Form Section -->\n <div class=\"tw-table-row tw-h-0\">\n <div class=\"tw-table-cell tw-px-6 tw-py-4 tw-border-b tw-border-gray-200 tw-bg-white\">\n <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\n <div class=\"tw-flex tw-items-center tw-space-x-3\">\n <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\n <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-m-0\">{{ isEditMode() ? 'Edit Menu Item' : 'Quick Add Menu Item' }}</h6>\n </div>\n @if (selectedParentItem()) {\n <div class=\"tw-flex tw-items-center tw-space-x-3 tw-bg-blue-50 tw-border tw-border-blue-200 tw-px-4 tw-py-2 tw-rounded-lg\">\n <cide-ele-icon class=\"tw-text-blue-600 tw-w-4 tw-h-4\">account_tree</cide-ele-icon>\n <div class=\"tw-flex tw-items-center tw-space-x-2\">\n <span class=\"tw-text-sm tw-text-blue-600 tw-font-medium\">{{ isEditMode() ? 'Parent:' : 'Creating child under:' }}</span>\n <span class=\"tw-text-sm tw-text-blue-800 tw-font-semibold\">{{ selectedParentItem()?.syme_title }}</span>\n </div>\n <button \n cideEleButton \n variant=\"ghost\" \n size=\"xs\" \n type=\"button\" \n (click)=\"clearSelectedParent()\" \n class=\"tw-text-blue-400 hover:tw-text-blue-600\">\n <svg class=\"tw-w-4 tw-h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\"/>\n </svg>\n </button>\n </div>\n }\n </div>\n \n <form [formGroup]=\"quickAddForm\" (ngSubmit)=\"quickAddMenuItem()\">\n <!-- First Row -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-3 tw-mb-3\">\n <!-- Menu Title -->\n <div>\n <cide-ele-input \n id=\"syme_title\" \n label=\"Title\" \n formControlName=\"syme_title\"\n size=\"sm\">\n </cide-ele-input>\n </div>\n \n <!-- Menu Type -->\n <div>\n <cide-ele-select \n label=\"Type\" \n [options]=\"menuTypeOptions()\" \n formControlName=\"syme_type\"\n placeholder=\"Select type\"\n size=\"sm\"\n (ngModelChange)=\"onMenuTypeChange()\">\n </cide-ele-select>\n </div>\n \n <!-- Path -->\n <div>\n <cide-ele-input \n id=\"quickPath\" \n type=\"text\"\n label=\"Path\" \n formControlName=\"syme_path\"\n placeholder=\"/path/to/route\"\n size=\"sm\">\n </cide-ele-input>\n </div>\n \n <!-- Icon -->\n <div>\n <cide-ele-input \n id=\"quickIcon\" \n type=\"text\"\n label=\"Icon\" \n formControlName=\"syme_icon\"\n placeholder=\"Icon name\"\n size=\"sm\">\n </cide-ele-input>\n </div>\n \n <!-- Empty div for spacing -->\n <div></div>\n </div>\n \n <!-- Second Row -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-3 tw-items-end\">\n <!-- Description -->\n <div>\n <cide-ele-textarea \n id=\"syme_desc\" \n label=\"Description\" \n formControlName=\"syme_desc\"\n placeholder=\"Menu description\"\n rows=\"2\"\n size=\"sm\">\n </cide-ele-textarea>\n </div>\n \n <!-- Permissions (only show for menu, internal menu, and title types) -->\n @if (quickAddForm.get('syme_type')?.value === 'menu' || quickAddForm.get('syme_type')?.value === 'internal') {\n <div>\n <cide-ele-select \n label=\"Permissions\" \n [options]=\"permissionOptions()\" \n formControlName=\"syme_permissions_id_sygms\"\n placeholder=\"Select permissions for this menu\"\n [multiple]=\"true\"\n size=\"sm\">\n </cide-ele-select>\n </div>\n }\n \n <!-- Pages (multiselect) -->\n <div>\n <cide-ele-select \n label=\"Pages\" \n [options]=\"pageOptions()\" \n formControlName=\"syme_pages_id_sypg\"\n placeholder=\"Select pages to connect\"\n [multiple]=\"true\"\n [loading]=\"pagesLoading()\"\n [searchable]=\"true\"\n size=\"sm\">\n </cide-ele-select>\n </div>\n \n <!-- Link -->\n <div>\n <cide-ele-input \n id=\"quickLink\" \n type=\"text\"\n label=\"Link\" \n formControlName=\"syme_link\"\n placeholder=\"External link\"\n size=\"sm\">\n </cide-ele-input>\n </div>\n \n <!-- Active Status and Action Buttons -->\n <div class=\"tw-flex tw-flex-col tw-justify-end\">\n <div class=\"tw-flex tw-items-center tw-space-x-3\">\n <!-- Active Checkbox -->\n <cide-ele-input \n id=\"quickIsActive\"\n type=\"checkbox\"\n label=\"Active\"\n formControlName=\"syme_isactive\"\n size=\"sm\">\n </cide-ele-input>\n \n <!-- Action Buttons -->\n <button \n cideEleButton \n variant=\"primary\" \n size=\"sm\" \n type=\"submit\"\n [disabled]=\"quickAddForm.invalid\"\n class=\"tw-px-2 tw-py-1 tw-w-20\">\n <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\n {{ isEditMode() ? 'Update' : 'Add' }}\n </button>\n <button \n cideEleButton \n variant=\"outline\" \n size=\"sm\" \n type=\"button\"\n (click)=\"resetQuickAddForm()\"\n class=\"tw-px-2 tw-py-1 tw-w-16\">\n <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">refresh</cide-ele-icon>\n Reset\n </button>\n </div>\n </div>\n </div>\n </form>\n </div>\n </div>\n\n <!-- Main Content Area -->\n <div class=\"tw-table-row\">\n <div class=\"tw-table-cell tw-h-full tw-relative tw-p-0\">\n <!-- Data Grid Component -->\n <div class=\"tw-h-full tw-w-full tw-overflow-auto\">\n \n <cide-ele-data-grid \n [config]=\"gridConfig()\" \n [templateRenderers]=\"getTemplateRenderers()\"\n [actionHandlers]=\"actionHandlers\"\n [dragDropEnabled]=\"true\" \n (gridEvent)=\"onGridEvent($event)\">\n </cide-ele-data-grid>\n </div>\n\n\n </div>\n </div>\n\n</div>\n\n<!-- \n Angular Template References for Grid Renderers (Best Practice)\n \n These ng-template elements represent the Angular best practice for custom rendering.\n They provide:\n - Type safety with template context\n - Component lifecycle integration\n - Change detection optimization\n - Proper event handling\n - Accessibility features\n \n Note: Current data grid uses string renderers for compatibility.\n Templates are maintained for future component enhancement.\n-->\n\n\n\n<!-- Menu Details Renderer Template -->\n<ng-template #menuDetailsRendererTemplate let-row=\"row\" let-value=\"value\">\n <div class=\"tw-flex tw-items-center tw-min-w-0\">\n <!-- Menu Icon -->\n <div class=\"tw-flex-shrink-0\">\n <cide-ele-icon \n class=\"tw-text-gray-400\" \n size=\"xs\">\n {{ row.syme_icon || 'folder_open' }}\n </cide-ele-icon>\n </div>\n \n <!-- Menu Details -->\n <div class=\"tw-ml-3 tw-min-w-0 tw-flex-1\">\n <div class=\"tw-text-xs tw-font-medium tw-text-gray-900 tw-truncate\" \n [title]=\"row.syme_title\">\n {{ row.syme_title || 'Untitled' }}\n </div>\n @if (row.syme_desc) {\n <div class=\"tw-text-xs tw-text-gray-500 tw-truncate\" \n [title]=\"row.syme_desc\">\n {{ row.syme_desc }}\n </div>\n }\n </div>\n </div>\n</ng-template>\n\n<!-- Menu Type Renderer Template -->\n<ng-template #menuTypeRendererTemplate let-row=\"row\" let-value=\"value\">\n <span class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-whitespace-nowrap\"\n [ngClass]=\"getMenuTypeClass(row.syme_type)\">\n {{ getMenuTypeLabel(row.syme_type) }}\n </span>\n</ng-template>\n\n<!-- Actions Dropdown Renderer Template -->\n<ng-template #actionsDropdownRendererTemplate let-row=\"row\" let-value=\"value\">\n <cide-ele-dropdown \n [items]=\"getDropdownItems(row)\"\n [config]=\"{ triggerIcon: 'more_vert', triggerSize: 'sm' }\"\n (itemClick)=\"onDropdownItemClick($event, row)\">\n </cide-ele-dropdown>\n</ng-template>\n\n<!-- Permissions Renderer Template -->\n<ng-template #permissionsRendererTemplate let-row=\"row\" let-value=\"value\">\n <div class=\"tw-flex tw-flex-wrap tw-gap-1 tw-max-w-full tw-items-center\">\n @if (row.syme_type === 'menu' || row.syme_type === 'internal') {\n @if (row.syme_permissions_id_sygms && row.syme_permissions_id_sygms.length > 0) {\n @for (permissionId of row.syme_permissions_id_sygms.slice(0, 3); track permissionId) {\n <span class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-blue-100 tw-text-blue-800 tw-whitespace-nowrap tw-h-5\">\n {{ getPermissionById(permissionId)?.sygms_title || getPermissionById(permissionId)?.sygms_code || 'Unknown' }}\n </span>\n }\n @if (row.syme_permissions_id_sygms.length > 3) {\n <span \n class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-gray-100 tw-text-gray-600 tw-whitespace-nowrap tw-cursor-help tw-h-5\"\n [title]=\"getAllPermissionNames(row.syme_permissions_id_sygms)\">\n +{{ row.syme_permissions_id_sygms.length - 3 }} more\n </span>\n }\n } @else {\n <span class=\"tw-text-xs tw-text-gray-500 tw-h-5 tw-flex tw-items-center\">No permissions</span>\n }\n } @else {\n <!-- Show N/A for module, section, and title types -->\n <span class=\"tw-text-xs tw-text-gray-400 tw-h-5 tw-flex tw-items-center\">N/A</span>\n }\n </div>\n</ng-template>\n</cide-lyt-shared-wrapper>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: CideEleDataGridComponent, selector: "cide-ele-data-grid", inputs: ["config", "templateRenderers", "customFormatters", "actionHandlers", "serverSidePagination", "totalServerItems", "currentServerPage", "currentServerPageSize", "dragDropEnabled"], outputs: ["gridEvent"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated", "adaptive"], 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"] }] });
|
|
2353
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: MenuListComponent, isStandalone: true, selector: "cide-core-app-menu-list", viewQueries: [{ propertyName: "menuDetailsRendererTemplate", first: true, predicate: ["menuDetailsRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "menuTypeRendererTemplate", first: true, predicate: ["menuTypeRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "permissionsRendererTemplate", first: true, predicate: ["permissionsRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "actionsDropdownRendererTemplate", first: true, predicate: ["actionsDropdownRendererTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Menu List with Shared Wrapper -->\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'core_menu_list' }\">\n<div class=\"tw-table tw-w-full tw-h-full\">\n\n <!-- Quick Add Form Section -->\n <div class=\"tw-table-row tw-h-0\">\n <div class=\"tw-table-cell tw-px-6 tw-py-4 tw-border-b tw-border-gray-200 tw-bg-white\">\n <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\n <div class=\"tw-flex tw-items-center tw-space-x-3\">\n <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\n <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-m-0\">{{ isEditMode() ? 'Edit Menu Item' : 'Quick Add Menu Item' }}</h6>\n </div>\n @if (selectedParentItem()) {\n <div class=\"tw-flex tw-items-center tw-space-x-3 tw-bg-blue-50 tw-border tw-border-blue-200 tw-px-4 tw-py-2 tw-rounded-lg\">\n <cide-ele-icon class=\"tw-text-blue-600 tw-w-4 tw-h-4\">account_tree</cide-ele-icon>\n <div class=\"tw-flex tw-items-center tw-space-x-2\">\n <span class=\"tw-text-sm tw-text-blue-600 tw-font-medium\">{{ isEditMode() ? 'Parent:' : 'Creating child under:' }}</span>\n <span class=\"tw-text-sm tw-text-blue-800 tw-font-semibold\">{{ selectedParentItem()?.syme_title }}</span>\n </div>\n <button \n cideEleButton \n variant=\"ghost\" \n size=\"xs\" \n type=\"button\" \n (click)=\"clearSelectedParent()\" \n class=\"tw-text-blue-400 hover:tw-text-blue-600\">\n <svg class=\"tw-w-4 tw-h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\"/>\n </svg>\n </button>\n </div>\n }\n </div>\n \n <form [formGroup]=\"quickAddForm\" (ngSubmit)=\"quickAddMenuItem()\">\n <!-- First Row -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-3 tw-mb-3\">\n <!-- Menu Title -->\n <div>\n <cide-ele-input \n id=\"syme_title\" \n label=\"Title\" \n formControlName=\"syme_title\"\n size=\"sm\">\n </cide-ele-input>\n </div>\n \n <!-- Menu Type -->\n <div>\n <cide-ele-select \n label=\"Type\" \n [options]=\"menuTypeOptions()\" \n formControlName=\"syme_type\"\n placeholder=\"Select type\"\n size=\"sm\"\n (ngModelChange)=\"onMenuTypeChange()\">\n </cide-ele-select>\n </div>\n \n <!-- Path -->\n <div>\n <cide-ele-input \n id=\"quickPath\" \n type=\"text\"\n label=\"Path\" \n formControlName=\"syme_path\"\n placeholder=\"/path/to/route\"\n size=\"sm\">\n </cide-ele-input>\n </div>\n \n <!-- Icon -->\n <div>\n <cide-ele-input \n id=\"quickIcon\" \n type=\"text\"\n label=\"Icon\" \n formControlName=\"syme_icon\"\n placeholder=\"Icon name\"\n size=\"sm\">\n </cide-ele-input>\n </div>\n \n <!-- Empty div for spacing -->\n <div></div>\n </div>\n \n <!-- Second Row -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-3 tw-items-end\">\n <!-- Description -->\n <div>\n <cide-ele-textarea \n id=\"syme_desc\" \n label=\"Description\" \n formControlName=\"syme_desc\"\n placeholder=\"Menu description\"\n rows=\"2\"\n size=\"sm\">\n </cide-ele-textarea>\n </div>\n \n <!-- Permissions (only show for menu, internal menu, and title types) -->\n @if (quickAddForm.get('syme_type')?.value === 'menu' || quickAddForm.get('syme_type')?.value === 'internal') {\n <div>\n <cide-ele-select \n label=\"Permissions\" \n [options]=\"permissionOptions()\" \n formControlName=\"syme_permissions_id_sygms\"\n placeholder=\"Select permissions for this menu\"\n [multiple]=\"true\"\n size=\"sm\">\n </cide-ele-select>\n </div>\n }\n \n <!-- Pages (multiselect) -->\n <div>\n <cide-ele-select \n label=\"Pages\" \n [options]=\"pageOptions()\" \n formControlName=\"syme_pages_id_sypg\"\n placeholder=\"Select pages to connect\"\n [multiple]=\"true\"\n [loading]=\"pagesLoading()\"\n [searchable]=\"true\"\n size=\"sm\">\n </cide-ele-select>\n </div>\n \n <!-- Link -->\n <div>\n <cide-ele-input \n id=\"quickLink\" \n type=\"text\"\n label=\"Link\" \n formControlName=\"syme_link\"\n placeholder=\"External link\"\n size=\"sm\">\n </cide-ele-input>\n </div>\n \n <!-- Active Status and Action Buttons -->\n <div class=\"tw-flex tw-flex-col tw-justify-end\">\n <div class=\"tw-flex tw-items-center tw-space-x-3\">\n <!-- Active Checkbox -->\n <cide-ele-input \n id=\"quickIsActive\"\n type=\"checkbox\"\n label=\"Active\"\n formControlName=\"syme_isactive\"\n size=\"sm\">\n </cide-ele-input>\n \n <!-- Action Buttons -->\n <button \n cideEleButton \n variant=\"primary\" \n size=\"xs\" \n type=\"submit\"\n [disabled]=\"quickAddForm.invalid\"\n class=\"tw-px-2 tw-py-1 tw-w-20\">\n <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\n {{ isEditMode() ? 'Update' : 'Add' }}\n </button>\n <button \n cideEleButton \n variant=\"outline\" \n size=\"xs\" \n type=\"button\"\n (click)=\"resetQuickAddForm()\"\n class=\"tw-px-2 tw-py-1 tw-w-16\">\n <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">refresh</cide-ele-icon>\n Reset\n </button>\n </div>\n </div>\n </div>\n </form>\n </div>\n </div>\n\n <!-- Main Content Area -->\n <div class=\"tw-table-row\">\n <div class=\"tw-table-cell tw-h-full tw-relative tw-p-0\">\n <!-- Data Grid Component -->\n <div class=\"tw-h-full tw-w-full tw-overflow-auto\">\n \n <cide-ele-data-grid \n [config]=\"gridConfig()\" \n [templateRenderers]=\"getTemplateRenderers()\"\n [actionHandlers]=\"actionHandlers\"\n [dragDropEnabled]=\"true\" \n (gridEvent)=\"onGridEvent($event)\">\n </cide-ele-data-grid>\n </div>\n\n\n </div>\n </div>\n\n</div>\n\n<!-- \n Angular Template References for Grid Renderers (Best Practice)\n \n These ng-template elements represent the Angular best practice for custom rendering.\n They provide:\n - Type safety with template context\n - Component lifecycle integration\n - Change detection optimization\n - Proper event handling\n - Accessibility features\n \n Note: Current data grid uses string renderers for compatibility.\n Templates are maintained for future component enhancement.\n-->\n\n\n\n<!-- Menu Details Renderer Template -->\n<ng-template #menuDetailsRendererTemplate let-row=\"row\" let-value=\"value\">\n <div class=\"tw-flex tw-items-center tw-min-w-0\">\n <!-- Menu Icon -->\n <div class=\"tw-flex-shrink-0\">\n <cide-ele-icon \n class=\"tw-text-gray-400\" \n size=\"xs\">\n {{ row.syme_icon || 'folder_open' }}\n </cide-ele-icon>\n </div>\n \n <!-- Menu Details -->\n <div class=\"tw-ml-3 tw-min-w-0 tw-flex-1\">\n <div class=\"tw-text-xs tw-font-medium tw-text-gray-900 tw-truncate\" \n [title]=\"row.syme_title\">\n {{ row.syme_title || 'Untitled' }}\n </div>\n @if (row.syme_desc) {\n <div class=\"tw-text-xs tw-text-gray-500 tw-truncate\" \n [title]=\"row.syme_desc\">\n {{ row.syme_desc }}\n </div>\n }\n </div>\n </div>\n</ng-template>\n\n<!-- Menu Type Renderer Template -->\n<ng-template #menuTypeRendererTemplate let-row=\"row\" let-value=\"value\">\n <span class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-whitespace-nowrap\"\n [ngClass]=\"getMenuTypeClass(row.syme_type)\">\n {{ getMenuTypeLabel(row.syme_type) }}\n </span>\n</ng-template>\n\n<!-- Actions Dropdown Renderer Template -->\n<ng-template #actionsDropdownRendererTemplate let-row=\"row\" let-value=\"value\">\n <cide-ele-dropdown \n [items]=\"getDropdownItems(row)\"\n [config]=\"{ triggerIcon: 'more_vert', triggerSize: 'sm' }\"\n (itemClick)=\"onDropdownItemClick($event, row)\">\n </cide-ele-dropdown>\n</ng-template>\n\n<!-- Permissions Renderer Template -->\n<ng-template #permissionsRendererTemplate let-row=\"row\" let-value=\"value\">\n <div class=\"tw-flex tw-flex-wrap tw-gap-1 tw-max-w-full tw-items-center\">\n @if (row.syme_type === 'menu' || row.syme_type === 'internal') {\n @if (row.syme_permissions_id_sygms && row.syme_permissions_id_sygms.length > 0) {\n @for (permissionId of row.syme_permissions_id_sygms.slice(0, 3); track permissionId) {\n <span class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-blue-100 tw-text-blue-800 tw-whitespace-nowrap tw-h-5\">\n {{ getPermissionById(permissionId)?.sygms_title || getPermissionById(permissionId)?.sygms_code || 'Unknown' }}\n </span>\n }\n @if (row.syme_permissions_id_sygms.length > 3) {\n <span \n class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-gray-100 tw-text-gray-600 tw-whitespace-nowrap tw-cursor-help tw-h-5\"\n [title]=\"getAllPermissionNames(row.syme_permissions_id_sygms)\">\n +{{ row.syme_permissions_id_sygms.length - 3 }} more\n </span>\n }\n } @else {\n <span class=\"tw-text-xs tw-text-gray-500 tw-h-5 tw-flex tw-items-center\">No permissions</span>\n }\n } @else {\n <!-- Show N/A for module, section, and title types -->\n <span class=\"tw-text-xs tw-text-gray-400 tw-h-5 tw-flex tw-items-center\">N/A</span>\n }\n </div>\n</ng-template>\n</cide-lyt-shared-wrapper>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: CideEleDataGridComponent, selector: "cide-ele-data-grid", inputs: ["config", "templateRenderers", "customFormatters", "actionHandlers", "serverSidePagination", "totalServerItems", "currentServerPage", "currentServerPageSize", "dragDropEnabled"], outputs: ["gridEvent"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated", "adaptive"], 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", "name"] }, { 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"] }] });
|
|
2354
2354
|
}
|
|
2355
2355
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MenuListComponent, decorators: [{
|
|
2356
2356
|
type: Component,
|
|
@@ -2366,7 +2366,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
2366
2366
|
CideIconComponent,
|
|
2367
2367
|
CideEleDropdownComponent,
|
|
2368
2368
|
CideLytSharedWrapperComponent
|
|
2369
|
-
], template: "<!-- Menu List with Shared Wrapper -->\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'core_menu_list' }\">\n<div class=\"tw-table tw-w-full tw-h-full\">\n\n <!-- Quick Add Form Section -->\n <div class=\"tw-table-row tw-h-0\">\n <div class=\"tw-table-cell tw-px-6 tw-py-4 tw-border-b tw-border-gray-200 tw-bg-white\">\n <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\n <div class=\"tw-flex tw-items-center tw-space-x-3\">\n <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\n <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-m-0\">{{ isEditMode() ? 'Edit Menu Item' : 'Quick Add Menu Item' }}</h6>\n </div>\n @if (selectedParentItem()) {\n <div class=\"tw-flex tw-items-center tw-space-x-3 tw-bg-blue-50 tw-border tw-border-blue-200 tw-px-4 tw-py-2 tw-rounded-lg\">\n <cide-ele-icon class=\"tw-text-blue-600 tw-w-4 tw-h-4\">account_tree</cide-ele-icon>\n <div class=\"tw-flex tw-items-center tw-space-x-2\">\n <span class=\"tw-text-sm tw-text-blue-600 tw-font-medium\">{{ isEditMode() ? 'Parent:' : 'Creating child under:' }}</span>\n <span class=\"tw-text-sm tw-text-blue-800 tw-font-semibold\">{{ selectedParentItem()?.syme_title }}</span>\n </div>\n <button \n cideEleButton \n variant=\"ghost\" \n size=\"xs\" \n type=\"button\" \n (click)=\"clearSelectedParent()\" \n class=\"tw-text-blue-400 hover:tw-text-blue-600\">\n <svg class=\"tw-w-4 tw-h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\"/>\n </svg>\n </button>\n </div>\n }\n </div>\n \n <form [formGroup]=\"quickAddForm\" (ngSubmit)=\"quickAddMenuItem()\">\n <!-- First Row -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-3 tw-mb-3\">\n <!-- Menu Title -->\n <div>\n <cide-ele-input \n id=\"syme_title\" \n label=\"Title\" \n formControlName=\"syme_title\"\n size=\"sm\">\n </cide-ele-input>\n </div>\n \n <!-- Menu Type -->\n <div>\n <cide-ele-select \n label=\"Type\" \n [options]=\"menuTypeOptions()\" \n formControlName=\"syme_type\"\n placeholder=\"Select type\"\n size=\"sm\"\n (ngModelChange)=\"onMenuTypeChange()\">\n </cide-ele-select>\n </div>\n \n <!-- Path -->\n <div>\n <cide-ele-input \n id=\"quickPath\" \n type=\"text\"\n label=\"Path\" \n formControlName=\"syme_path\"\n placeholder=\"/path/to/route\"\n size=\"sm\">\n </cide-ele-input>\n </div>\n \n <!-- Icon -->\n <div>\n <cide-ele-input \n id=\"quickIcon\" \n type=\"text\"\n label=\"Icon\" \n formControlName=\"syme_icon\"\n placeholder=\"Icon name\"\n size=\"sm\">\n </cide-ele-input>\n </div>\n \n <!-- Empty div for spacing -->\n <div></div>\n </div>\n \n <!-- Second Row -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-3 tw-items-end\">\n <!-- Description -->\n <div>\n <cide-ele-textarea \n id=\"syme_desc\" \n label=\"Description\" \n formControlName=\"syme_desc\"\n placeholder=\"Menu description\"\n rows=\"2\"\n size=\"sm\">\n </cide-ele-textarea>\n </div>\n \n <!-- Permissions (only show for menu, internal menu, and title types) -->\n @if (quickAddForm.get('syme_type')?.value === 'menu' || quickAddForm.get('syme_type')?.value === 'internal') {\n <div>\n <cide-ele-select \n label=\"Permissions\" \n [options]=\"permissionOptions()\" \n formControlName=\"syme_permissions_id_sygms\"\n placeholder=\"Select permissions for this menu\"\n [multiple]=\"true\"\n size=\"sm\">\n </cide-ele-select>\n </div>\n }\n \n <!-- Pages (multiselect) -->\n <div>\n <cide-ele-select \n label=\"Pages\" \n [options]=\"pageOptions()\" \n formControlName=\"syme_pages_id_sypg\"\n placeholder=\"Select pages to connect\"\n [multiple]=\"true\"\n [loading]=\"pagesLoading()\"\n [searchable]=\"true\"\n size=\"sm\">\n </cide-ele-select>\n </div>\n \n <!-- Link -->\n <div>\n <cide-ele-input \n id=\"quickLink\" \n type=\"text\"\n label=\"Link\" \n formControlName=\"syme_link\"\n placeholder=\"External link\"\n size=\"sm\">\n </cide-ele-input>\n </div>\n \n <!-- Active Status and Action Buttons -->\n <div class=\"tw-flex tw-flex-col tw-justify-end\">\n <div class=\"tw-flex tw-items-center tw-space-x-3\">\n <!-- Active Checkbox -->\n <cide-ele-input \n id=\"quickIsActive\"\n type=\"checkbox\"\n label=\"Active\"\n formControlName=\"syme_isactive\"\n size=\"sm\">\n </cide-ele-input>\n \n <!-- Action Buttons -->\n <button \n cideEleButton \n variant=\"primary\" \n size=\"sm\" \n type=\"submit\"\n [disabled]=\"quickAddForm.invalid\"\n class=\"tw-px-2 tw-py-1 tw-w-20\">\n <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\n {{ isEditMode() ? 'Update' : 'Add' }}\n </button>\n <button \n cideEleButton \n variant=\"outline\" \n size=\"sm\" \n type=\"button\"\n (click)=\"resetQuickAddForm()\"\n class=\"tw-px-2 tw-py-1 tw-w-16\">\n <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">refresh</cide-ele-icon>\n Reset\n </button>\n </div>\n </div>\n </div>\n </form>\n </div>\n </div>\n\n <!-- Main Content Area -->\n <div class=\"tw-table-row\">\n <div class=\"tw-table-cell tw-h-full tw-relative tw-p-0\">\n <!-- Data Grid Component -->\n <div class=\"tw-h-full tw-w-full tw-overflow-auto\">\n \n <cide-ele-data-grid \n [config]=\"gridConfig()\" \n [templateRenderers]=\"getTemplateRenderers()\"\n [actionHandlers]=\"actionHandlers\"\n [dragDropEnabled]=\"true\" \n (gridEvent)=\"onGridEvent($event)\">\n </cide-ele-data-grid>\n </div>\n\n\n </div>\n </div>\n\n</div>\n\n<!-- \n Angular Template References for Grid Renderers (Best Practice)\n \n These ng-template elements represent the Angular best practice for custom rendering.\n They provide:\n - Type safety with template context\n - Component lifecycle integration\n - Change detection optimization\n - Proper event handling\n - Accessibility features\n \n Note: Current data grid uses string renderers for compatibility.\n Templates are maintained for future component enhancement.\n-->\n\n\n\n<!-- Menu Details Renderer Template -->\n<ng-template #menuDetailsRendererTemplate let-row=\"row\" let-value=\"value\">\n <div class=\"tw-flex tw-items-center tw-min-w-0\">\n <!-- Menu Icon -->\n <div class=\"tw-flex-shrink-0\">\n <cide-ele-icon \n class=\"tw-text-gray-400\" \n size=\"xs\">\n {{ row.syme_icon || 'folder_open' }}\n </cide-ele-icon>\n </div>\n \n <!-- Menu Details -->\n <div class=\"tw-ml-3 tw-min-w-0 tw-flex-1\">\n <div class=\"tw-text-xs tw-font-medium tw-text-gray-900 tw-truncate\" \n [title]=\"row.syme_title\">\n {{ row.syme_title || 'Untitled' }}\n </div>\n @if (row.syme_desc) {\n <div class=\"tw-text-xs tw-text-gray-500 tw-truncate\" \n [title]=\"row.syme_desc\">\n {{ row.syme_desc }}\n </div>\n }\n </div>\n </div>\n</ng-template>\n\n<!-- Menu Type Renderer Template -->\n<ng-template #menuTypeRendererTemplate let-row=\"row\" let-value=\"value\">\n <span class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-whitespace-nowrap\"\n [ngClass]=\"getMenuTypeClass(row.syme_type)\">\n {{ getMenuTypeLabel(row.syme_type) }}\n </span>\n</ng-template>\n\n<!-- Actions Dropdown Renderer Template -->\n<ng-template #actionsDropdownRendererTemplate let-row=\"row\" let-value=\"value\">\n <cide-ele-dropdown \n [items]=\"getDropdownItems(row)\"\n [config]=\"{ triggerIcon: 'more_vert', triggerSize: 'sm' }\"\n (itemClick)=\"onDropdownItemClick($event, row)\">\n </cide-ele-dropdown>\n</ng-template>\n\n<!-- Permissions Renderer Template -->\n<ng-template #permissionsRendererTemplate let-row=\"row\" let-value=\"value\">\n <div class=\"tw-flex tw-flex-wrap tw-gap-1 tw-max-w-full tw-items-center\">\n @if (row.syme_type === 'menu' || row.syme_type === 'internal') {\n @if (row.syme_permissions_id_sygms && row.syme_permissions_id_sygms.length > 0) {\n @for (permissionId of row.syme_permissions_id_sygms.slice(0, 3); track permissionId) {\n <span class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-blue-100 tw-text-blue-800 tw-whitespace-nowrap tw-h-5\">\n {{ getPermissionById(permissionId)?.sygms_title || getPermissionById(permissionId)?.sygms_code || 'Unknown' }}\n </span>\n }\n @if (row.syme_permissions_id_sygms.length > 3) {\n <span \n class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-gray-100 tw-text-gray-600 tw-whitespace-nowrap tw-cursor-help tw-h-5\"\n [title]=\"getAllPermissionNames(row.syme_permissions_id_sygms)\">\n +{{ row.syme_permissions_id_sygms.length - 3 }} more\n </span>\n }\n } @else {\n <span class=\"tw-text-xs tw-text-gray-500 tw-h-5 tw-flex tw-items-center\">No permissions</span>\n }\n } @else {\n <!-- Show N/A for module, section, and title types -->\n <span class=\"tw-text-xs tw-text-gray-400 tw-h-5 tw-flex tw-items-center\">N/A</span>\n }\n </div>\n</ng-template>\n</cide-lyt-shared-wrapper>\n" }]
|
|
2369
|
+
], template: "<!-- Menu List with Shared Wrapper -->\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'core_menu_list' }\">\n<div class=\"tw-table tw-w-full tw-h-full\">\n\n <!-- Quick Add Form Section -->\n <div class=\"tw-table-row tw-h-0\">\n <div class=\"tw-table-cell tw-px-6 tw-py-4 tw-border-b tw-border-gray-200 tw-bg-white\">\n <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\n <div class=\"tw-flex tw-items-center tw-space-x-3\">\n <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\n <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-m-0\">{{ isEditMode() ? 'Edit Menu Item' : 'Quick Add Menu Item' }}</h6>\n </div>\n @if (selectedParentItem()) {\n <div class=\"tw-flex tw-items-center tw-space-x-3 tw-bg-blue-50 tw-border tw-border-blue-200 tw-px-4 tw-py-2 tw-rounded-lg\">\n <cide-ele-icon class=\"tw-text-blue-600 tw-w-4 tw-h-4\">account_tree</cide-ele-icon>\n <div class=\"tw-flex tw-items-center tw-space-x-2\">\n <span class=\"tw-text-sm tw-text-blue-600 tw-font-medium\">{{ isEditMode() ? 'Parent:' : 'Creating child under:' }}</span>\n <span class=\"tw-text-sm tw-text-blue-800 tw-font-semibold\">{{ selectedParentItem()?.syme_title }}</span>\n </div>\n <button \n cideEleButton \n variant=\"ghost\" \n size=\"xs\" \n type=\"button\" \n (click)=\"clearSelectedParent()\" \n class=\"tw-text-blue-400 hover:tw-text-blue-600\">\n <svg class=\"tw-w-4 tw-h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\"/>\n </svg>\n </button>\n </div>\n }\n </div>\n \n <form [formGroup]=\"quickAddForm\" (ngSubmit)=\"quickAddMenuItem()\">\n <!-- First Row -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-3 tw-mb-3\">\n <!-- Menu Title -->\n <div>\n <cide-ele-input \n id=\"syme_title\" \n label=\"Title\" \n formControlName=\"syme_title\"\n size=\"sm\">\n </cide-ele-input>\n </div>\n \n <!-- Menu Type -->\n <div>\n <cide-ele-select \n label=\"Type\" \n [options]=\"menuTypeOptions()\" \n formControlName=\"syme_type\"\n placeholder=\"Select type\"\n size=\"sm\"\n (ngModelChange)=\"onMenuTypeChange()\">\n </cide-ele-select>\n </div>\n \n <!-- Path -->\n <div>\n <cide-ele-input \n id=\"quickPath\" \n type=\"text\"\n label=\"Path\" \n formControlName=\"syme_path\"\n placeholder=\"/path/to/route\"\n size=\"sm\">\n </cide-ele-input>\n </div>\n \n <!-- Icon -->\n <div>\n <cide-ele-input \n id=\"quickIcon\" \n type=\"text\"\n label=\"Icon\" \n formControlName=\"syme_icon\"\n placeholder=\"Icon name\"\n size=\"sm\">\n </cide-ele-input>\n </div>\n \n <!-- Empty div for spacing -->\n <div></div>\n </div>\n \n <!-- Second Row -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-3 tw-items-end\">\n <!-- Description -->\n <div>\n <cide-ele-textarea \n id=\"syme_desc\" \n label=\"Description\" \n formControlName=\"syme_desc\"\n placeholder=\"Menu description\"\n rows=\"2\"\n size=\"sm\">\n </cide-ele-textarea>\n </div>\n \n <!-- Permissions (only show for menu, internal menu, and title types) -->\n @if (quickAddForm.get('syme_type')?.value === 'menu' || quickAddForm.get('syme_type')?.value === 'internal') {\n <div>\n <cide-ele-select \n label=\"Permissions\" \n [options]=\"permissionOptions()\" \n formControlName=\"syme_permissions_id_sygms\"\n placeholder=\"Select permissions for this menu\"\n [multiple]=\"true\"\n size=\"sm\">\n </cide-ele-select>\n </div>\n }\n \n <!-- Pages (multiselect) -->\n <div>\n <cide-ele-select \n label=\"Pages\" \n [options]=\"pageOptions()\" \n formControlName=\"syme_pages_id_sypg\"\n placeholder=\"Select pages to connect\"\n [multiple]=\"true\"\n [loading]=\"pagesLoading()\"\n [searchable]=\"true\"\n size=\"sm\">\n </cide-ele-select>\n </div>\n \n <!-- Link -->\n <div>\n <cide-ele-input \n id=\"quickLink\" \n type=\"text\"\n label=\"Link\" \n formControlName=\"syme_link\"\n placeholder=\"External link\"\n size=\"sm\">\n </cide-ele-input>\n </div>\n \n <!-- Active Status and Action Buttons -->\n <div class=\"tw-flex tw-flex-col tw-justify-end\">\n <div class=\"tw-flex tw-items-center tw-space-x-3\">\n <!-- Active Checkbox -->\n <cide-ele-input \n id=\"quickIsActive\"\n type=\"checkbox\"\n label=\"Active\"\n formControlName=\"syme_isactive\"\n size=\"sm\">\n </cide-ele-input>\n \n <!-- Action Buttons -->\n <button \n cideEleButton \n variant=\"primary\" \n size=\"xs\" \n type=\"submit\"\n [disabled]=\"quickAddForm.invalid\"\n class=\"tw-px-2 tw-py-1 tw-w-20\">\n <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\n {{ isEditMode() ? 'Update' : 'Add' }}\n </button>\n <button \n cideEleButton \n variant=\"outline\" \n size=\"xs\" \n type=\"button\"\n (click)=\"resetQuickAddForm()\"\n class=\"tw-px-2 tw-py-1 tw-w-16\">\n <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">refresh</cide-ele-icon>\n Reset\n </button>\n </div>\n </div>\n </div>\n </form>\n </div>\n </div>\n\n <!-- Main Content Area -->\n <div class=\"tw-table-row\">\n <div class=\"tw-table-cell tw-h-full tw-relative tw-p-0\">\n <!-- Data Grid Component -->\n <div class=\"tw-h-full tw-w-full tw-overflow-auto\">\n \n <cide-ele-data-grid \n [config]=\"gridConfig()\" \n [templateRenderers]=\"getTemplateRenderers()\"\n [actionHandlers]=\"actionHandlers\"\n [dragDropEnabled]=\"true\" \n (gridEvent)=\"onGridEvent($event)\">\n </cide-ele-data-grid>\n </div>\n\n\n </div>\n </div>\n\n</div>\n\n<!-- \n Angular Template References for Grid Renderers (Best Practice)\n \n These ng-template elements represent the Angular best practice for custom rendering.\n They provide:\n - Type safety with template context\n - Component lifecycle integration\n - Change detection optimization\n - Proper event handling\n - Accessibility features\n \n Note: Current data grid uses string renderers for compatibility.\n Templates are maintained for future component enhancement.\n-->\n\n\n\n<!-- Menu Details Renderer Template -->\n<ng-template #menuDetailsRendererTemplate let-row=\"row\" let-value=\"value\">\n <div class=\"tw-flex tw-items-center tw-min-w-0\">\n <!-- Menu Icon -->\n <div class=\"tw-flex-shrink-0\">\n <cide-ele-icon \n class=\"tw-text-gray-400\" \n size=\"xs\">\n {{ row.syme_icon || 'folder_open' }}\n </cide-ele-icon>\n </div>\n \n <!-- Menu Details -->\n <div class=\"tw-ml-3 tw-min-w-0 tw-flex-1\">\n <div class=\"tw-text-xs tw-font-medium tw-text-gray-900 tw-truncate\" \n [title]=\"row.syme_title\">\n {{ row.syme_title || 'Untitled' }}\n </div>\n @if (row.syme_desc) {\n <div class=\"tw-text-xs tw-text-gray-500 tw-truncate\" \n [title]=\"row.syme_desc\">\n {{ row.syme_desc }}\n </div>\n }\n </div>\n </div>\n</ng-template>\n\n<!-- Menu Type Renderer Template -->\n<ng-template #menuTypeRendererTemplate let-row=\"row\" let-value=\"value\">\n <span class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-whitespace-nowrap\"\n [ngClass]=\"getMenuTypeClass(row.syme_type)\">\n {{ getMenuTypeLabel(row.syme_type) }}\n </span>\n</ng-template>\n\n<!-- Actions Dropdown Renderer Template -->\n<ng-template #actionsDropdownRendererTemplate let-row=\"row\" let-value=\"value\">\n <cide-ele-dropdown \n [items]=\"getDropdownItems(row)\"\n [config]=\"{ triggerIcon: 'more_vert', triggerSize: 'sm' }\"\n (itemClick)=\"onDropdownItemClick($event, row)\">\n </cide-ele-dropdown>\n</ng-template>\n\n<!-- Permissions Renderer Template -->\n<ng-template #permissionsRendererTemplate let-row=\"row\" let-value=\"value\">\n <div class=\"tw-flex tw-flex-wrap tw-gap-1 tw-max-w-full tw-items-center\">\n @if (row.syme_type === 'menu' || row.syme_type === 'internal') {\n @if (row.syme_permissions_id_sygms && row.syme_permissions_id_sygms.length > 0) {\n @for (permissionId of row.syme_permissions_id_sygms.slice(0, 3); track permissionId) {\n <span class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-blue-100 tw-text-blue-800 tw-whitespace-nowrap tw-h-5\">\n {{ getPermissionById(permissionId)?.sygms_title || getPermissionById(permissionId)?.sygms_code || 'Unknown' }}\n </span>\n }\n @if (row.syme_permissions_id_sygms.length > 3) {\n <span \n class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-gray-100 tw-text-gray-600 tw-whitespace-nowrap tw-cursor-help tw-h-5\"\n [title]=\"getAllPermissionNames(row.syme_permissions_id_sygms)\">\n +{{ row.syme_permissions_id_sygms.length - 3 }} more\n </span>\n }\n } @else {\n <span class=\"tw-text-xs tw-text-gray-500 tw-h-5 tw-flex tw-items-center\">No permissions</span>\n }\n } @else {\n <!-- Show N/A for module, section, and title types -->\n <span class=\"tw-text-xs tw-text-gray-400 tw-h-5 tw-flex tw-items-center\">N/A</span>\n }\n </div>\n</ng-template>\n</cide-lyt-shared-wrapper>\n" }]
|
|
2370
2370
|
}], ctorParameters: () => [], propDecorators: { menuDetailsRendererTemplate: [{ type: i0.ViewChild, args: ['menuDetailsRendererTemplate', { isSignal: true }] }], menuTypeRendererTemplate: [{ type: i0.ViewChild, args: ['menuTypeRendererTemplate', { isSignal: true }] }], permissionsRendererTemplate: [{ type: i0.ViewChild, args: ['permissionsRendererTemplate', { isSignal: true }] }], actionsDropdownRendererTemplate: [{ type: i0.ViewChild, args: ['actionsDropdownRendererTemplate', { isSignal: true }] }] } });
|
|
2371
2371
|
|
|
2372
2372
|
var menuList_component = /*#__PURE__*/Object.freeze({
|
|
@@ -3324,7 +3324,7 @@ class CideCoreDepartmentListComponent {
|
|
|
3324
3324
|
return item._id || '';
|
|
3325
3325
|
}
|
|
3326
3326
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideCoreDepartmentListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3327
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: CideCoreDepartmentListComponent, isStandalone: true, selector: "cide-core-department-list", viewQueries: [{ propertyName: "departmentDetailsRendererTemplate", first: true, predicate: ["departmentDetailsRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "departmentStatusRendererTemplate", first: true, predicate: ["departmentStatusRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "actionsDropdownRendererTemplate", first: true, predicate: ["actionsDropdownRendererTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Department List with Shared Wrapper -->\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'core_department_list' }\">\n <div class=\"tw-table tw-w-full tw-h-full\">\n\n <!-- Global Notifications -->\n <cide-ele-global-notifications></cide-ele-global-notifications>\n\n <!-- Quick Add Form Section - Show if user has VIEW, CREATE, or EDIT rights -->\n @if (canView() || canCreate() || canEdit()) {\n <div class=\"tw-table-row tw-h-0\">\n <div class=\"tw-table-cell tw-px-6 tw-py-4 tw-border-b tw-border-gray-200 tw-bg-white\">\n <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-0\">\n <div class=\"tw-flex tw-items-center tw-space-x-3 tw-mb-3\">\n <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\n <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-m-0\">{{ isEditMode() ? 'Edit Department' : 'Quick\n Add Department' }}</h6>\n </div>\n @if (selectedParentDepartment()) {\n <div\n class=\"tw-flex tw-items-center tw-space-x-3 tw-bg-blue-50 tw-border tw-border-blue-200 tw-px-4 tw-py-1 tw-rounded-lg\">\n <cide-ele-icon class=\"tw-text-blue-600 tw-w-4 tw-h-4\">account_tree</cide-ele-icon>\n <div class=\"tw-flex tw-items-center tw-space-x-2\">\n <span class=\"tw-text-sm tw-text-blue-600 tw-font-medium\">{{ isEditMode() ? 'Parent:' : 'Creating child\n under:' }}</span>\n <span class=\"tw-text-sm tw-text-blue-800 tw-font-semibold\">{{ selectedParentDepartment()?.sydept_name\n }}</span>\n </div>\n <button cideEleButton variant=\"ghost\" size=\"xs\" type=\"button\" (click)=\"clearSelectedParent()\"\n [disabled]=\"canView() && !canCreate() && !canEdit()\" class=\"tw-text-blue-400 hover:tw-text-blue-600\">\n <svg class=\"tw-w-4 tw-h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\" />\n </svg>\n </button>\n </div>\n }\n </div>\n\n <form [formGroup]=\"quickAddForm\" (ngSubmit)=\"quickAddDepartment()\">\n <!-- First Row -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-3 tw-mb-3\">\n <!-- Department Code -->\n <div>\n <cide-ele-input id=\"sydept_code\" label=\"Code\" formControlName=\"sydept_code\" placeholder=\"DEPT001\"\n [disabled]=\"canView() && !canCreate() && !canEdit()\" size=\"sm\">\n </cide-ele-input>\n </div>\n\n <!-- Department Name -->\n <div>\n <cide-ele-input id=\"sydept_name\" label=\"Name\" formControlName=\"sydept_name\" placeholder=\"Department name\"\n [disabled]=\"canView() && !canCreate() && !canEdit()\" size=\"sm\">\n </cide-ele-input>\n </div>\n\n\n\n <!-- Active Status -->\n <div class=\"tw-flex tw-flex-col tw-justify-end\">\n <cide-ele-input id=\"sydept_isactive\" type=\"checkbox\" label=\"Active\" formControlName=\"sydept_isactive\"\n [disabled]=\"canView() && !canCreate() && !canEdit()\" size=\"sm\">\n </cide-ele-input>\n </div>\n </div>\n\n <!-- Second Row -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-3 tw-items-end\">\n <!-- Description -->\n <div>\n <cide-ele-textarea id=\"sydept_description\" label=\"Description\" formControlName=\"sydept_description\"\n placeholder=\"Department description\" rows=\"2\" [disabled]=\"canView() && !canCreate() && !canEdit()\"\n size=\"sm\">\n </cide-ele-textarea>\n </div>\n\n\n\n <!-- Action Buttons -->\n @if (canCreate() || canEdit()) {\n <div class=\"tw-flex tw-flex-col tw-justify-end\">\n <div class=\"tw-flex tw-space-x-2\">\n @if (isEditMode() ? canEdit() : canCreate()) {\n <button cideEleButton variant=\"primary\" size=\"sm\" type=\"submit\" [disabled]=\"quickAddForm.invalid\"\n class=\"tw-px-2 tw-py-1 tw-w-20\">\n <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">{{ isEditMode() ? 'edit' : 'add'\n }}</cide-ele-icon>\n {{ isEditMode() ? 'Update' : 'Add' }}\n </button>\n }\n <button cideEleButton variant=\"outline\" size=\"sm\" type=\"button\" (click)=\"resetQuickAddForm()\"\n [disabled]=\"canView() && !canCreate() && !canEdit()\" class=\"tw-px-2 tw-py-1 tw-w-16\">\n <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">refresh</cide-ele-icon>\n Reset\n </button>\n </div>\n </div>\n }\n </div>\n </form>\n </div>\n </div>\n }\n\n <!-- Header Section with Filters -->\n\n\n <!-- Main Content Area -->\n <div class=\"tw-table-row\">\n <div class=\"tw-table-cell tw-h-full tw-relative\">\n\n <!-- Data Grid Component -->\n <div class=\"tw-h-full tw-overflow-auto\">\n\n <cide-ele-data-grid [config]=\"gridConfig()\" [templateRenderers]=\"getTemplateRenderers()\"\n [actionHandlers]=\"actionHandlers\" [serverSidePagination]=\"true\" [totalServerItems]=\"totalItems()\"\n [currentServerPage]=\"currentPage()\" [currentServerPageSize]=\"pageSize()\" (gridEvent)=\"onGridEvent($event)\">\n </cide-ele-data-grid>\n </div>\n\n </div>\n </div>\n\n </div>\n\n <!-- Department Details Renderer Template -->\n <ng-template #departmentDetailsRendererTemplate let-row=\"row\" let-value=\"value\">\n <div class=\"tw-flex tw-items-center tw-min-w-0\">\n <!-- Department Icon -->\n <div class=\"tw-flex-shrink-0\">\n <cide-ele-icon class=\"tw-text-gray-400\" size=\"xs\">\n business\n </cide-ele-icon>\n </div>\n\n <!-- Department Details -->\n <div class=\"tw-ml-3 tw-min-w-0 tw-flex-1\">\n <div class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-truncate\" [title]=\"row.sydept_name\">\n {{ row.sydept_name || 'Untitled' }}\n </div>\n @if (row.sydept_description) {\n <div class=\"tw-text-xs tw-text-gray-500 tw-truncate\" [title]=\"row.sydept_description\">\n {{ row.sydept_description }}\n </div>\n }\n </div>\n </div>\n </ng-template>\n\n <!-- Department Status Renderer Template -->\n <ng-template #departmentStatusRendererTemplate let-row=\"row\" let-value=\"value\">\n <span\n class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-whitespace-nowrap\"\n [ngClass]=\"getStatusClass(row.sydept_isactive)\">\n {{ getStatusDisplay(row.sydept_isactive) }}\n </span>\n </ng-template>\n\n <!-- Actions Dropdown Renderer Template -->\n <ng-template #actionsDropdownRendererTemplate let-row=\"row\" let-value=\"value\">\n <cide-ele-dropdown [items]=\"getDropdownItems(row)\" [config]=\"{ triggerIcon: 'more_vert', triggerSize: 'sm' }\"\n (itemClick)=\"onDropdownItemClick($event, row)\">\n </cide-ele-dropdown>\n </ng-template>\n</cide-lyt-shared-wrapper>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: CideEleDataGridComponent, selector: "cide-ele-data-grid", inputs: ["config", "templateRenderers", "customFormatters", "actionHandlers", "serverSidePagination", "totalServerItems", "currentServerPage", "currentServerPageSize", "dragDropEnabled"], outputs: ["gridEvent"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated", "adaptive"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideInputComponent, selector: "cide-ele-input", inputs: ["fill", "label", "labelHide", "disabled", "clearInput", "labelPlacement", "labelDir", "placeholder", "leadingIcon", "trailingIcon", "helperText", "helperTextCollapse", "hideHelperAndErrorText", "errorText", "maxlength", "minlength", "required", "autocapitalize", "autocomplete", "type", "width", "id", "ngModel", "option", "min", "max", "step", "size"], outputs: ["ngModelChange"] }, { kind: "component", type: CideTextareaComponent, selector: "cide-ele-textarea", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "minlength", "maxlength", "rows", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput"], outputs: ["ngModelChange"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideEleDropdownComponent, selector: "cide-ele-dropdown", inputs: ["items", "config", "triggerTemplate", "menuTemplate"], outputs: ["itemClick", "dropdownToggle"] }, { kind: "component", type: CideEleGlobalNotificationsComponent, selector: "cide-ele-global-notifications" }, { kind: "component", type: CideLytSharedWrapperComponent, selector: "cide-lyt-shared-wrapper", inputs: ["shared_wrapper_setup_param", "breadcrumb_data"] }] });
|
|
3327
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: CideCoreDepartmentListComponent, isStandalone: true, selector: "cide-core-department-list", viewQueries: [{ propertyName: "departmentDetailsRendererTemplate", first: true, predicate: ["departmentDetailsRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "departmentStatusRendererTemplate", first: true, predicate: ["departmentStatusRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "actionsDropdownRendererTemplate", first: true, predicate: ["actionsDropdownRendererTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Department List with Shared Wrapper -->\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'core_department_list' }\">\n <div class=\"tw-table tw-w-full tw-h-full\">\n\n <!-- Global Notifications -->\n <cide-ele-global-notifications></cide-ele-global-notifications>\n\n <!-- Quick Add Form Section - Show if user has VIEW, CREATE, or EDIT rights -->\n @if (canView() || canCreate() || canEdit()) {\n <div class=\"tw-table-row tw-h-0\">\n <div class=\"tw-table-cell tw-px-6 tw-py-4 tw-border-b tw-border-gray-200 tw-bg-white\">\n <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-0\">\n <div class=\"tw-flex tw-items-center tw-space-x-3 tw-mb-3\">\n <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\n <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-m-0\">{{ isEditMode() ? 'Edit Department' : 'Quick\n Add Department' }}</h6>\n </div>\n @if (selectedParentDepartment()) {\n <div\n class=\"tw-flex tw-items-center tw-space-x-3 tw-bg-blue-50 tw-border tw-border-blue-200 tw-px-4 tw-py-1 tw-rounded-lg\">\n <cide-ele-icon class=\"tw-text-blue-600 tw-w-4 tw-h-4\">account_tree</cide-ele-icon>\n <div class=\"tw-flex tw-items-center tw-space-x-2\">\n <span class=\"tw-text-sm tw-text-blue-600 tw-font-medium\">{{ isEditMode() ? 'Parent:' : 'Creating child\n under:' }}</span>\n <span class=\"tw-text-sm tw-text-blue-800 tw-font-semibold\">{{ selectedParentDepartment()?.sydept_name\n }}</span>\n </div>\n <button cideEleButton variant=\"ghost\" size=\"xs\" type=\"button\" (click)=\"clearSelectedParent()\"\n [disabled]=\"canView() && !canCreate() && !canEdit()\" class=\"tw-text-blue-400 hover:tw-text-blue-600\">\n <svg class=\"tw-w-4 tw-h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\" />\n </svg>\n </button>\n </div>\n }\n </div>\n\n <form [formGroup]=\"quickAddForm\" (ngSubmit)=\"quickAddDepartment()\">\n <!-- First Row -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-3 tw-mb-3\">\n <!-- Department Code -->\n <div>\n <cide-ele-input id=\"sydept_code\" label=\"Code\" formControlName=\"sydept_code\" placeholder=\"DEPT001\"\n [disabled]=\"canView() && !canCreate() && !canEdit()\" size=\"sm\">\n </cide-ele-input>\n </div>\n\n <!-- Department Name -->\n <div>\n <cide-ele-input id=\"sydept_name\" label=\"Name\" formControlName=\"sydept_name\" placeholder=\"Department name\"\n [disabled]=\"canView() && !canCreate() && !canEdit()\" size=\"sm\">\n </cide-ele-input>\n </div>\n\n\n\n <!-- Active Status -->\n <div class=\"tw-flex tw-flex-col tw-justify-end\">\n <cide-ele-input id=\"sydept_isactive\" type=\"checkbox\" label=\"Active\" formControlName=\"sydept_isactive\"\n [disabled]=\"canView() && !canCreate() && !canEdit()\" size=\"sm\">\n </cide-ele-input>\n </div>\n </div>\n\n <!-- Second Row -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-3 tw-items-end\">\n <!-- Description -->\n <div>\n <cide-ele-textarea id=\"sydept_description\" label=\"Description\" formControlName=\"sydept_description\"\n placeholder=\"Department description\" rows=\"2\" [disabled]=\"canView() && !canCreate() && !canEdit()\"\n size=\"sm\">\n </cide-ele-textarea>\n </div>\n\n\n\n <!-- Action Buttons -->\n @if (canCreate() || canEdit()) {\n <div class=\"tw-flex tw-flex-col tw-justify-end\">\n <div class=\"tw-flex tw-space-x-2\">\n @if (isEditMode() ? canEdit() : canCreate()) {\n <button cideEleButton variant=\"primary\" size=\"xs\" type=\"submit\" [disabled]=\"quickAddForm.invalid\"\n class=\"tw-px-2 tw-py-1 tw-w-20\">\n <cide-ele-icon size=\"sm\" class=\"tw-w-4 tw-h-4 tw-mr-1\">{{ isEditMode() ? 'edit' : 'add'\n }}</cide-ele-icon>\n {{ isEditMode() ? 'Update' : 'Add' }}\n </button>\n }\n <button cideEleButton variant=\"outline\" size=\"xs\" type=\"button\" (click)=\"resetQuickAddForm()\"\n [disabled]=\"canView() && !canCreate() && !canEdit()\" class=\"tw-px-2 tw-py-1 tw-w-16\">\n <cide-ele-icon size=\"sm\" class=\"tw-w-4 tw-h-4 tw-mr-1\">refresh</cide-ele-icon>\n Reset\n </button>\n </div>\n </div>\n }\n </div>\n </form>\n </div>\n </div>\n }\n\n <!-- Header Section with Filters -->\n\n\n <!-- Main Content Area -->\n <div class=\"tw-table-row\">\n <div class=\"tw-table-cell tw-h-full tw-relative\">\n\n <!-- Data Grid Component -->\n <div class=\"tw-h-full tw-overflow-auto\">\n\n <cide-ele-data-grid [config]=\"gridConfig()\" [templateRenderers]=\"getTemplateRenderers()\"\n [actionHandlers]=\"actionHandlers\" [serverSidePagination]=\"true\" [totalServerItems]=\"totalItems()\"\n [currentServerPage]=\"currentPage()\" [currentServerPageSize]=\"pageSize()\" (gridEvent)=\"onGridEvent($event)\">\n </cide-ele-data-grid>\n </div>\n\n </div>\n </div>\n\n </div>\n\n <!-- Department Details Renderer Template -->\n <ng-template #departmentDetailsRendererTemplate let-row=\"row\" let-value=\"value\">\n <div class=\"tw-flex tw-items-center tw-min-w-0\">\n <!-- Department Icon -->\n <div class=\"tw-flex-shrink-0\">\n <cide-ele-icon class=\"tw-text-gray-400\" size=\"sm\">\n business\n </cide-ele-icon>\n </div>\n\n <!-- Department Details -->\n <div class=\"tw-ml-3 tw-min-w-0 tw-flex-1\">\n <div class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-truncate\" [title]=\"row.sydept_name\">\n {{ row.sydept_name || 'Untitled' }}\n </div>\n @if (row.sydept_description) {\n <div class=\"tw-text-xs tw-text-gray-500 tw-truncate\" [title]=\"row.sydept_description\">\n {{ row.sydept_description }}\n </div>\n }\n </div>\n </div>\n </ng-template>\n\n <!-- Department Status Renderer Template -->\n <ng-template #departmentStatusRendererTemplate let-row=\"row\" let-value=\"value\">\n <span\n class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-whitespace-nowrap\"\n [ngClass]=\"getStatusClass(row.sydept_isactive)\">\n {{ getStatusDisplay(row.sydept_isactive) }}\n </span>\n </ng-template>\n\n <!-- Actions Dropdown Renderer Template -->\n <ng-template #actionsDropdownRendererTemplate let-row=\"row\" let-value=\"value\">\n <cide-ele-dropdown [items]=\"getDropdownItems(row)\" [config]=\"{ triggerIcon: 'more_vert', triggerSize: 'sm' }\"\n (itemClick)=\"onDropdownItemClick($event, row)\">\n </cide-ele-dropdown>\n </ng-template>\n</cide-lyt-shared-wrapper>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: CideEleDataGridComponent, selector: "cide-ele-data-grid", inputs: ["config", "templateRenderers", "customFormatters", "actionHandlers", "serverSidePagination", "totalServerItems", "currentServerPage", "currentServerPageSize", "dragDropEnabled"], outputs: ["gridEvent"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated", "adaptive"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideInputComponent, selector: "cide-ele-input", inputs: ["fill", "label", "labelHide", "disabled", "clearInput", "labelPlacement", "labelDir", "placeholder", "leadingIcon", "trailingIcon", "helperText", "helperTextCollapse", "hideHelperAndErrorText", "errorText", "maxlength", "minlength", "required", "autocapitalize", "autocomplete", "type", "width", "id", "ngModel", "option", "min", "max", "step", "size"], outputs: ["ngModelChange"] }, { kind: "component", type: CideTextareaComponent, selector: "cide-ele-textarea", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "minlength", "maxlength", "rows", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput"], outputs: ["ngModelChange"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip", "name"] }, { kind: "component", type: CideEleDropdownComponent, selector: "cide-ele-dropdown", inputs: ["items", "config", "triggerTemplate", "menuTemplate"], outputs: ["itemClick", "dropdownToggle"] }, { kind: "component", type: CideEleGlobalNotificationsComponent, selector: "cide-ele-global-notifications" }, { kind: "component", type: CideLytSharedWrapperComponent, selector: "cide-lyt-shared-wrapper", inputs: ["shared_wrapper_setup_param", "breadcrumb_data"] }] });
|
|
3328
3328
|
}
|
|
3329
3329
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideCoreDepartmentListComponent, decorators: [{
|
|
3330
3330
|
type: Component,
|
|
@@ -3340,7 +3340,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
3340
3340
|
CideEleDropdownComponent,
|
|
3341
3341
|
CideEleGlobalNotificationsComponent,
|
|
3342
3342
|
CideLytSharedWrapperComponent
|
|
3343
|
-
], template: "<!-- Department List with Shared Wrapper -->\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'core_department_list' }\">\n <div class=\"tw-table tw-w-full tw-h-full\">\n\n <!-- Global Notifications -->\n <cide-ele-global-notifications></cide-ele-global-notifications>\n\n <!-- Quick Add Form Section - Show if user has VIEW, CREATE, or EDIT rights -->\n @if (canView() || canCreate() || canEdit()) {\n <div class=\"tw-table-row tw-h-0\">\n <div class=\"tw-table-cell tw-px-6 tw-py-4 tw-border-b tw-border-gray-200 tw-bg-white\">\n <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-0\">\n <div class=\"tw-flex tw-items-center tw-space-x-3 tw-mb-3\">\n <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\n <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-m-0\">{{ isEditMode() ? 'Edit Department' : 'Quick\n Add Department' }}</h6>\n </div>\n @if (selectedParentDepartment()) {\n <div\n class=\"tw-flex tw-items-center tw-space-x-3 tw-bg-blue-50 tw-border tw-border-blue-200 tw-px-4 tw-py-1 tw-rounded-lg\">\n <cide-ele-icon class=\"tw-text-blue-600 tw-w-4 tw-h-4\">account_tree</cide-ele-icon>\n <div class=\"tw-flex tw-items-center tw-space-x-2\">\n <span class=\"tw-text-sm tw-text-blue-600 tw-font-medium\">{{ isEditMode() ? 'Parent:' : 'Creating child\n under:' }}</span>\n <span class=\"tw-text-sm tw-text-blue-800 tw-font-semibold\">{{ selectedParentDepartment()?.sydept_name\n }}</span>\n </div>\n <button cideEleButton variant=\"ghost\" size=\"xs\" type=\"button\" (click)=\"clearSelectedParent()\"\n [disabled]=\"canView() && !canCreate() && !canEdit()\" class=\"tw-text-blue-400 hover:tw-text-blue-600\">\n <svg class=\"tw-w-4 tw-h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\" />\n </svg>\n </button>\n </div>\n }\n </div>\n\n <form [formGroup]=\"quickAddForm\" (ngSubmit)=\"quickAddDepartment()\">\n <!-- First Row -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-3 tw-mb-3\">\n <!-- Department Code -->\n <div>\n <cide-ele-input id=\"sydept_code\" label=\"Code\" formControlName=\"sydept_code\" placeholder=\"DEPT001\"\n [disabled]=\"canView() && !canCreate() && !canEdit()\" size=\"sm\">\n </cide-ele-input>\n </div>\n\n <!-- Department Name -->\n <div>\n <cide-ele-input id=\"sydept_name\" label=\"Name\" formControlName=\"sydept_name\" placeholder=\"Department name\"\n [disabled]=\"canView() && !canCreate() && !canEdit()\" size=\"sm\">\n </cide-ele-input>\n </div>\n\n\n\n <!-- Active Status -->\n <div class=\"tw-flex tw-flex-col tw-justify-end\">\n <cide-ele-input id=\"sydept_isactive\" type=\"checkbox\" label=\"Active\" formControlName=\"sydept_isactive\"\n [disabled]=\"canView() && !canCreate() && !canEdit()\" size=\"sm\">\n </cide-ele-input>\n </div>\n </div>\n\n <!-- Second Row -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-3 tw-items-end\">\n <!-- Description -->\n <div>\n <cide-ele-textarea id=\"sydept_description\" label=\"Description\" formControlName=\"sydept_description\"\n placeholder=\"Department description\" rows=\"2\" [disabled]=\"canView() && !canCreate() && !canEdit()\"\n size=\"sm\">\n </cide-ele-textarea>\n </div>\n\n\n\n <!-- Action Buttons -->\n @if (canCreate() || canEdit()) {\n <div class=\"tw-flex tw-flex-col tw-justify-end\">\n <div class=\"tw-flex tw-space-x-2\">\n @if (isEditMode() ? canEdit() : canCreate()) {\n <button cideEleButton variant=\"primary\" size=\"
|
|
3343
|
+
], template: "<!-- Department List with Shared Wrapper -->\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'core_department_list' }\">\n <div class=\"tw-table tw-w-full tw-h-full\">\n\n <!-- Global Notifications -->\n <cide-ele-global-notifications></cide-ele-global-notifications>\n\n <!-- Quick Add Form Section - Show if user has VIEW, CREATE, or EDIT rights -->\n @if (canView() || canCreate() || canEdit()) {\n <div class=\"tw-table-row tw-h-0\">\n <div class=\"tw-table-cell tw-px-6 tw-py-4 tw-border-b tw-border-gray-200 tw-bg-white\">\n <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-0\">\n <div class=\"tw-flex tw-items-center tw-space-x-3 tw-mb-3\">\n <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\n <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-m-0\">{{ isEditMode() ? 'Edit Department' : 'Quick\n Add Department' }}</h6>\n </div>\n @if (selectedParentDepartment()) {\n <div\n class=\"tw-flex tw-items-center tw-space-x-3 tw-bg-blue-50 tw-border tw-border-blue-200 tw-px-4 tw-py-1 tw-rounded-lg\">\n <cide-ele-icon class=\"tw-text-blue-600 tw-w-4 tw-h-4\">account_tree</cide-ele-icon>\n <div class=\"tw-flex tw-items-center tw-space-x-2\">\n <span class=\"tw-text-sm tw-text-blue-600 tw-font-medium\">{{ isEditMode() ? 'Parent:' : 'Creating child\n under:' }}</span>\n <span class=\"tw-text-sm tw-text-blue-800 tw-font-semibold\">{{ selectedParentDepartment()?.sydept_name\n }}</span>\n </div>\n <button cideEleButton variant=\"ghost\" size=\"xs\" type=\"button\" (click)=\"clearSelectedParent()\"\n [disabled]=\"canView() && !canCreate() && !canEdit()\" class=\"tw-text-blue-400 hover:tw-text-blue-600\">\n <svg class=\"tw-w-4 tw-h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\" />\n </svg>\n </button>\n </div>\n }\n </div>\n\n <form [formGroup]=\"quickAddForm\" (ngSubmit)=\"quickAddDepartment()\">\n <!-- First Row -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-3 tw-mb-3\">\n <!-- Department Code -->\n <div>\n <cide-ele-input id=\"sydept_code\" label=\"Code\" formControlName=\"sydept_code\" placeholder=\"DEPT001\"\n [disabled]=\"canView() && !canCreate() && !canEdit()\" size=\"sm\">\n </cide-ele-input>\n </div>\n\n <!-- Department Name -->\n <div>\n <cide-ele-input id=\"sydept_name\" label=\"Name\" formControlName=\"sydept_name\" placeholder=\"Department name\"\n [disabled]=\"canView() && !canCreate() && !canEdit()\" size=\"sm\">\n </cide-ele-input>\n </div>\n\n\n\n <!-- Active Status -->\n <div class=\"tw-flex tw-flex-col tw-justify-end\">\n <cide-ele-input id=\"sydept_isactive\" type=\"checkbox\" label=\"Active\" formControlName=\"sydept_isactive\"\n [disabled]=\"canView() && !canCreate() && !canEdit()\" size=\"sm\">\n </cide-ele-input>\n </div>\n </div>\n\n <!-- Second Row -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-3 tw-items-end\">\n <!-- Description -->\n <div>\n <cide-ele-textarea id=\"sydept_description\" label=\"Description\" formControlName=\"sydept_description\"\n placeholder=\"Department description\" rows=\"2\" [disabled]=\"canView() && !canCreate() && !canEdit()\"\n size=\"sm\">\n </cide-ele-textarea>\n </div>\n\n\n\n <!-- Action Buttons -->\n @if (canCreate() || canEdit()) {\n <div class=\"tw-flex tw-flex-col tw-justify-end\">\n <div class=\"tw-flex tw-space-x-2\">\n @if (isEditMode() ? canEdit() : canCreate()) {\n <button cideEleButton variant=\"primary\" size=\"xs\" type=\"submit\" [disabled]=\"quickAddForm.invalid\"\n class=\"tw-px-2 tw-py-1 tw-w-20\">\n <cide-ele-icon size=\"sm\" class=\"tw-w-4 tw-h-4 tw-mr-1\">{{ isEditMode() ? 'edit' : 'add'\n }}</cide-ele-icon>\n {{ isEditMode() ? 'Update' : 'Add' }}\n </button>\n }\n <button cideEleButton variant=\"outline\" size=\"xs\" type=\"button\" (click)=\"resetQuickAddForm()\"\n [disabled]=\"canView() && !canCreate() && !canEdit()\" class=\"tw-px-2 tw-py-1 tw-w-16\">\n <cide-ele-icon size=\"sm\" class=\"tw-w-4 tw-h-4 tw-mr-1\">refresh</cide-ele-icon>\n Reset\n </button>\n </div>\n </div>\n }\n </div>\n </form>\n </div>\n </div>\n }\n\n <!-- Header Section with Filters -->\n\n\n <!-- Main Content Area -->\n <div class=\"tw-table-row\">\n <div class=\"tw-table-cell tw-h-full tw-relative\">\n\n <!-- Data Grid Component -->\n <div class=\"tw-h-full tw-overflow-auto\">\n\n <cide-ele-data-grid [config]=\"gridConfig()\" [templateRenderers]=\"getTemplateRenderers()\"\n [actionHandlers]=\"actionHandlers\" [serverSidePagination]=\"true\" [totalServerItems]=\"totalItems()\"\n [currentServerPage]=\"currentPage()\" [currentServerPageSize]=\"pageSize()\" (gridEvent)=\"onGridEvent($event)\">\n </cide-ele-data-grid>\n </div>\n\n </div>\n </div>\n\n </div>\n\n <!-- Department Details Renderer Template -->\n <ng-template #departmentDetailsRendererTemplate let-row=\"row\" let-value=\"value\">\n <div class=\"tw-flex tw-items-center tw-min-w-0\">\n <!-- Department Icon -->\n <div class=\"tw-flex-shrink-0\">\n <cide-ele-icon class=\"tw-text-gray-400\" size=\"sm\">\n business\n </cide-ele-icon>\n </div>\n\n <!-- Department Details -->\n <div class=\"tw-ml-3 tw-min-w-0 tw-flex-1\">\n <div class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-truncate\" [title]=\"row.sydept_name\">\n {{ row.sydept_name || 'Untitled' }}\n </div>\n @if (row.sydept_description) {\n <div class=\"tw-text-xs tw-text-gray-500 tw-truncate\" [title]=\"row.sydept_description\">\n {{ row.sydept_description }}\n </div>\n }\n </div>\n </div>\n </ng-template>\n\n <!-- Department Status Renderer Template -->\n <ng-template #departmentStatusRendererTemplate let-row=\"row\" let-value=\"value\">\n <span\n class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-whitespace-nowrap\"\n [ngClass]=\"getStatusClass(row.sydept_isactive)\">\n {{ getStatusDisplay(row.sydept_isactive) }}\n </span>\n </ng-template>\n\n <!-- Actions Dropdown Renderer Template -->\n <ng-template #actionsDropdownRendererTemplate let-row=\"row\" let-value=\"value\">\n <cide-ele-dropdown [items]=\"getDropdownItems(row)\" [config]=\"{ triggerIcon: 'more_vert', triggerSize: 'sm' }\"\n (itemClick)=\"onDropdownItemClick($event, row)\">\n </cide-ele-dropdown>\n </ng-template>\n</cide-lyt-shared-wrapper>" }]
|
|
3344
3344
|
}], ctorParameters: () => [], propDecorators: { departmentDetailsRendererTemplate: [{ type: i0.ViewChild, args: ['departmentDetailsRendererTemplate', { isSignal: true }] }], departmentStatusRendererTemplate: [{ type: i0.ViewChild, args: ['departmentStatusRendererTemplate', { isSignal: true }] }], actionsDropdownRendererTemplate: [{ type: i0.ViewChild, args: ['actionsDropdownRendererTemplate', { isSignal: true }] }] } });
|
|
3345
3345
|
|
|
3346
3346
|
var departmentList_component = /*#__PURE__*/Object.freeze({
|
|
@@ -5114,7 +5114,7 @@ class CideCoreDesignationListComponent {
|
|
|
5114
5114
|
return item._id || '';
|
|
5115
5115
|
}
|
|
5116
5116
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideCoreDesignationListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5117
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: CideCoreDesignationListComponent, isStandalone: true, selector: "cide-core-designation-list", viewQueries: [{ propertyName: "designationDetailsRendererTemplate", first: true, predicate: ["designationDetailsRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "designationStatusRendererTemplate", first: true, predicate: ["designationStatusRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "actionsDropdownRendererTemplate", first: true, predicate: ["actionsDropdownRendererTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Designation List with Shared Wrapper -->\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'core_designation_list' }\">\n <div class=\"tw-table tw-w-full tw-h-full\">\n\n <!-- Quick Add Form Section - Show if user has VIEW, CREATE, or EDIT rights -->\n @if (canView() || canCreate() || canEdit()) {\n <div class=\"tw-table-row tw-h-0\">\n <div class=\"tw-table-cell tw-px-6 tw-py-4 tw-border-b tw-border-gray-200 tw-bg-white\">\n <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-0\">\n <div class=\"tw-flex tw-items-center tw-space-x-3 tw-mb-3\">\n <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\n <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-m-0\">{{ isEditMode() ? 'Edit Designation' : 'Quick\n Add Designation' }}</h6>\n </div>\n @if (selectedParentDesignation()) {\n <div\n class=\"tw-flex tw-items-center tw-space-x-3 tw-bg-blue-50 tw-border tw-border-blue-200 tw-px-4 tw-py-1 tw-rounded-lg\">\n <cide-ele-icon class=\"tw-text-blue-600 tw-w-4 tw-h-4\">account_tree</cide-ele-icon>\n <div class=\"tw-flex tw-items-center tw-space-x-2\">\n <span class=\"tw-text-sm tw-text-blue-600 tw-font-medium\">{{ isEditMode() ? 'Parent:' : 'Creating child\n under:' }}</span>\n <span class=\"tw-text-sm tw-text-blue-800 tw-font-semibold\">{{ selectedParentDesignation()?.sydsg_name\n }}</span>\n </div>\n <button cideEleButton variant=\"ghost\" size=\"xs\" type=\"button\" (click)=\"clearSelectedParent()\"\n [disabled]=\"canView() && !canCreate() && !canEdit()\" class=\"tw-text-blue-400 hover:tw-text-blue-600\">\n <svg class=\"tw-w-4 tw-h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\" />\n </svg>\n </button>\n </div>\n }\n @if (selectedParentDepartment()) {\n <div\n class=\"tw-flex tw-items-center tw-space-x-3 tw-bg-green-50 tw-border tw-border-green-200 tw-px-4 tw-py-1 tw-rounded-lg\">\n <cide-ele-icon class=\"tw-text-green-600 tw-w-4 tw-h-4\">business</cide-ele-icon>\n <div class=\"tw-flex tw-items-center tw-space-x-2\">\n <span class=\"tw-text-sm tw-text-green-600 tw-font-medium\">{{ isEditMode() ? 'Department:' : 'Department:'\n }}</span>\n <span class=\"tw-text-sm tw-text-green-800 tw-font-semibold\">{{ selectedParentDepartment()?.sydept_name\n }}</span>\n </div>\n <button cideEleButton variant=\"ghost\" size=\"xs\" type=\"button\" (click)=\"clearSelectedParentDepartment()\"\n [disabled]=\"!canCreate() && !canEdit()\"\n class=\"tw-text-green-400 hover:tw-text-green-600\">\n <svg class=\"tw-w-4 tw-h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\" />\n </svg>\n </button>\n </div>\n }\n </div>\n\n <form [formGroup]=\"quickAddForm\" (ngSubmit)=\"quickAddDesignation()\">\n <!-- First Row -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-5 tw-gap-3 tw-mb-3\">\n <!-- Designation Name -->\n <div>\n <cide-ele-input id=\"sydsg_name\" label=\"Name\" formControlName=\"sydsg_name\" placeholder=\"Designation name\"\n [disabled]=\"canView() && !canCreate() && !canEdit()\" size=\"sm\">\n </cide-ele-input>\n </div>\n\n <!-- Designation Code -->\n <div>\n <cide-ele-input id=\"sydsg_code\" label=\"Code\" formControlName=\"sydsg_code\" placeholder=\"DESG001\"\n [disabled]=\"canView() && !canCreate() && !canEdit()\" size=\"sm\">\n </cide-ele-input>\n </div>\n <!-- Grade Level -->\n <div>\n <cide-ele-select id=\"sydsg_grade_level_id_sydsgl\" label=\"Grade Level\" [options]=\"gradeLevelOptions()\"\n formControlName=\"sydsg_grade_level_id_sydsgl\" placeholder=\"Select grade level\"\n [disabled]=\"canView() && !canCreate() && !canEdit()\" size=\"sm\">\n </cide-ele-select>\n </div>\n\n <!-- Department -->\n <div>\n <cide-ele-select id=\"sydsg_department_id_sydpt\" label=\"Department\" [options]=\"departmentOptions()\"\n formControlName=\"sydsg_department_id_sydpt\" placeholder=\"Select department\"\n [disabled]=\"canView() && !canCreate() && !canEdit()\" size=\"sm\">\n </cide-ele-select>\n </div>\n\n <!-- Active Status -->\n <div class=\"tw-flex tw-flex-col tw-justify-end\">\n <cide-ele-input id=\"sydsg_isactive\" type=\"checkbox\" label=\"Active\" formControlName=\"sydsg_isactive\"\n [disabled]=\"canView() && !canCreate() && !canEdit()\" size=\"sm\">\n </cide-ele-input>\n </div>\n </div>\n\n <!-- Second Row -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-3 tw-items-end\">\n <!-- Description -->\n <div>\n <cide-ele-textarea id=\"sydsg_description\" label=\"Description\" formControlName=\"sydsg_description\"\n placeholder=\"Designation description\" rows=\"2\"\n [disabled]=\"canView() && !canCreate() && !canEdit()\"\n size=\"sm\">\n </cide-ele-textarea>\n </div>\n\n <!-- Entity ID (Hidden) -->\n <div class=\"tw-hidden\">\n <cide-ele-input id=\"desg_entity_id_syen\" label=\"Entity ID\" formControlName=\"desg_entity_id_syen\"\n placeholder=\"Entity ID\" size=\"sm\">\n </cide-ele-input>\n </div>\n\n <!-- Action Buttons -->\n @if (canCreate() || canEdit()) {\n <div class=\"tw-flex tw-flex-col tw-justify-end\">\n <div class=\"tw-flex tw-space-x-2\">\n @if (isEditMode() ? canEdit() : canCreate()) {\n <button cideEleButton variant=\"primary\" size=\"sm\" type=\"submit\" [disabled]=\"quickAddForm.invalid\"\n class=\"tw-px-2 tw-py-1 tw-w-20\">\n <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">{{ isEditMode() ? 'edit' : 'add'\n }}</cide-ele-icon>\n {{ isEditMode() ? 'Update' : 'Add' }}\n </button>\n }\n <button cideEleButton variant=\"outline\" size=\"sm\" type=\"button\" (click)=\"resetQuickAddForm()\"\n [disabled]=\"canView() && !canCreate() && !canEdit()\" class=\"tw-px-2 tw-py-1 tw-w-16\">\n <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">refresh</cide-ele-icon>\n Reset\n </button>\n </div>\n </div>\n }\n </div>\n </form>\n </div>\n </div>\n }\n\n <!-- Main Content Area -->\n <div class=\"tw-table-row\">\n <div class=\"tw-table-cell tw-h-full tw-relative\">\n\n <!-- Data Grid Component -->\n <div class=\"tw-h-full tw-overflow-auto\">\n\n <cide-ele-data-grid [config]=\"gridConfig()\" [templateRenderers]=\"getTemplateRenderers()\"\n [actionHandlers]=\"actionHandlers\" [serverSidePagination]=\"true\" [totalServerItems]=\"totalItems()\"\n [currentServerPage]=\"currentPage()\" [currentServerPageSize]=\"pageSize()\" (gridEvent)=\"onGridEvent($event)\">\n </cide-ele-data-grid>\n </div>\n\n </div>\n </div>\n\n </div>\n\n <!-- Designation Details Renderer Template -->\n <ng-template #designationDetailsRendererTemplate let-row=\"row\" let-value=\"value\">\n <div class=\"tw-flex tw-items-center tw-min-w-0\">\n <!-- Dynamic Icon based on type -->\n <div class=\"tw-flex-shrink-0\">\n <cide-ele-icon [class]=\"row.type === 'department' ? 'tw-text-green-500' : 'tw-text-blue-500'\" size=\"xs\">\n {{ row.type === 'department' ? 'business' : 'work' }}\n </cide-ele-icon>\n </div>\n\n <!-- Details -->\n <div class=\"tw-ml-3 tw-min-w-0 tw-flex-1\">\n <div class=\"tw-flex tw-items-center tw-space-x-2\">\n <div class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-truncate\" [title]=\"row.name\">\n {{ row.name || 'Untitled' }}\n </div>\n @if (row.type === 'department') {\n <span\n class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-green-100 tw-text-green-800\">\n Department\n </span>\n }\n </div>\n @if (row.description) {\n <div class=\"tw-text-xs tw-text-gray-500 tw-truncate\" [title]=\"row.description\">\n {{ row.description }}\n </div>\n }\n </div>\n </div>\n </ng-template>\n\n <!-- Designation Status Renderer Template -->\n <ng-template #designationStatusRendererTemplate let-row=\"row\" let-value=\"value\">\n <span\n class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-whitespace-nowrap\"\n [ngClass]=\"getStatusClass(row.status)\">\n {{ getStatusDisplay(row.status) }}\n </span>\n </ng-template>\n\n <!-- Actions Dropdown Renderer Template -->\n <ng-template #actionsDropdownRendererTemplate let-row=\"row\" let-value=\"value\">\n <cide-ele-dropdown [items]=\"getDropdownItems(row)\" [config]=\"{ triggerIcon: 'more_vert', triggerSize: 'sm' }\"\n (itemClick)=\"onDropdownItemClick($event, row)\">\n </cide-ele-dropdown>\n </ng-template>\n</cide-lyt-shared-wrapper>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: CideEleDataGridComponent, selector: "cide-ele-data-grid", inputs: ["config", "templateRenderers", "customFormatters", "actionHandlers", "serverSidePagination", "totalServerItems", "currentServerPage", "currentServerPageSize", "dragDropEnabled"], outputs: ["gridEvent"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated", "adaptive"], 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"] }] });
|
|
5117
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: CideCoreDesignationListComponent, isStandalone: true, selector: "cide-core-designation-list", viewQueries: [{ propertyName: "designationDetailsRendererTemplate", first: true, predicate: ["designationDetailsRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "designationStatusRendererTemplate", first: true, predicate: ["designationStatusRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "actionsDropdownRendererTemplate", first: true, predicate: ["actionsDropdownRendererTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Designation List with Shared Wrapper -->\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'core_designation_list' }\">\n <div class=\"tw-table tw-w-full tw-h-full\">\n\n <!-- Quick Add Form Section - Show if user has VIEW, CREATE, or EDIT rights -->\n @if (canView() || canCreate() || canEdit()) {\n <div class=\"tw-table-row tw-h-0\">\n <div class=\"tw-table-cell tw-px-6 tw-py-4 tw-border-b tw-border-gray-200 tw-bg-white\">\n <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-0\">\n <div class=\"tw-flex tw-items-center tw-space-x-3 tw-mb-3\">\n <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\n <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-m-0\">{{ isEditMode() ? 'Edit Designation' : 'Quick\n Add Designation' }}</h6>\n </div>\n @if (selectedParentDesignation()) {\n <div\n class=\"tw-flex tw-items-center tw-space-x-3 tw-bg-blue-50 tw-border tw-border-blue-200 tw-px-4 tw-py-1 tw-rounded-lg\">\n <cide-ele-icon class=\"tw-text-blue-600 tw-w-4 tw-h-4\">account_tree</cide-ele-icon>\n <div class=\"tw-flex tw-items-center tw-space-x-2\">\n <span class=\"tw-text-sm tw-text-blue-600 tw-font-medium\">{{ isEditMode() ? 'Parent:' : 'Creating child\n under:' }}</span>\n <span class=\"tw-text-sm tw-text-blue-800 tw-font-semibold\">{{ selectedParentDesignation()?.sydsg_name\n }}</span>\n </div>\n <button cideEleButton variant=\"ghost\" size=\"xs\" type=\"button\" (click)=\"clearSelectedParent()\"\n [disabled]=\"canView() && !canCreate() && !canEdit()\" class=\"tw-text-blue-400 hover:tw-text-blue-600\">\n <svg class=\"tw-w-4 tw-h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\" />\n </svg>\n </button>\n </div>\n }\n @if (selectedParentDepartment()) {\n <div\n class=\"tw-flex tw-items-center tw-space-x-3 tw-bg-green-50 tw-border tw-border-green-200 tw-px-4 tw-py-1 tw-rounded-lg\">\n <cide-ele-icon class=\"tw-text-green-600 tw-w-4 tw-h-4\">business</cide-ele-icon>\n <div class=\"tw-flex tw-items-center tw-space-x-2\">\n <span class=\"tw-text-sm tw-text-green-600 tw-font-medium\">{{ isEditMode() ? 'Department:' : 'Department:'\n }}</span>\n <span class=\"tw-text-sm tw-text-green-800 tw-font-semibold\">{{ selectedParentDepartment()?.sydept_name\n }}</span>\n </div>\n <button cideEleButton variant=\"ghost\" size=\"xs\" type=\"button\" (click)=\"clearSelectedParentDepartment()\"\n [disabled]=\"!canCreate() && !canEdit()\"\n class=\"tw-text-green-400 hover:tw-text-green-600\">\n <svg class=\"tw-w-4 tw-h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\" />\n </svg>\n </button>\n </div>\n }\n </div>\n\n <form [formGroup]=\"quickAddForm\" (ngSubmit)=\"quickAddDesignation()\">\n <!-- First Row -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-5 tw-gap-3 tw-mb-3\">\n <!-- Designation Name -->\n <div>\n <cide-ele-input id=\"sydsg_name\" label=\"Name\" formControlName=\"sydsg_name\" placeholder=\"Designation name\"\n [disabled]=\"canView() && !canCreate() && !canEdit()\" size=\"sm\">\n </cide-ele-input>\n </div>\n\n <!-- Designation Code -->\n <div>\n <cide-ele-input id=\"sydsg_code\" label=\"Code\" formControlName=\"sydsg_code\" placeholder=\"DESG001\"\n [disabled]=\"canView() && !canCreate() && !canEdit()\" size=\"sm\">\n </cide-ele-input>\n </div>\n <!-- Grade Level -->\n <div>\n <cide-ele-select id=\"sydsg_grade_level_id_sydsgl\" label=\"Grade Level\" [options]=\"gradeLevelOptions()\"\n formControlName=\"sydsg_grade_level_id_sydsgl\" placeholder=\"Select grade level\"\n [disabled]=\"canView() && !canCreate() && !canEdit()\" size=\"sm\">\n </cide-ele-select>\n </div>\n\n <!-- Department -->\n <div>\n <cide-ele-select id=\"sydsg_department_id_sydpt\" label=\"Department\" [options]=\"departmentOptions()\"\n formControlName=\"sydsg_department_id_sydpt\" placeholder=\"Select department\"\n [disabled]=\"canView() && !canCreate() && !canEdit()\" size=\"sm\">\n </cide-ele-select>\n </div>\n\n <!-- Active Status -->\n <div class=\"tw-flex tw-flex-col tw-justify-end\">\n <cide-ele-input id=\"sydsg_isactive\" type=\"checkbox\" label=\"Active\" formControlName=\"sydsg_isactive\"\n [disabled]=\"canView() && !canCreate() && !canEdit()\" size=\"sm\">\n </cide-ele-input>\n </div>\n </div>\n\n <!-- Second Row -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-3 tw-items-end\">\n <!-- Description -->\n <div>\n <cide-ele-textarea id=\"sydsg_description\" label=\"Description\" formControlName=\"sydsg_description\"\n placeholder=\"Designation description\" rows=\"2\"\n [disabled]=\"canView() && !canCreate() && !canEdit()\"\n size=\"sm\">\n </cide-ele-textarea>\n </div>\n\n <!-- Entity ID (Hidden) -->\n <div class=\"tw-hidden\">\n <cide-ele-input id=\"desg_entity_id_syen\" label=\"Entity ID\" formControlName=\"desg_entity_id_syen\"\n placeholder=\"Entity ID\" size=\"sm\">\n </cide-ele-input>\n </div>\n\n <!-- Action Buttons -->\n @if (canCreate() || canEdit()) {\n <div class=\"tw-flex tw-flex-col tw-justify-end\">\n <div class=\"tw-flex tw-space-x-2\">\n @if (isEditMode() ? canEdit() : canCreate()) {\n <button cideEleButton variant=\"primary\" size=\"xs\" type=\"submit\" [disabled]=\"quickAddForm.invalid\"\n class=\"tw-px-2 tw-py-1 tw-w-20\">\n <cide-ele-icon size=\"sm\" class=\"tw-w-4 tw-h-4 tw-mr-1\">{{ isEditMode() ? 'edit' : 'add'\n }}</cide-ele-icon>\n {{ isEditMode() ? 'Update' : 'Add' }}\n </button>\n }\n <button cideEleButton variant=\"outline\" size=\"xs\" type=\"button\" (click)=\"resetQuickAddForm()\"\n [disabled]=\"canView() && !canCreate() && !canEdit()\" class=\"tw-px-2 tw-py-1 tw-w-16\">\n <cide-ele-icon size=\"sm\" class=\"tw-w-4 tw-h-4 tw-mr-1\">refresh</cide-ele-icon>\n Reset\n </button>\n </div>\n </div>\n }\n </div>\n </form>\n </div>\n </div>\n }\n\n <!-- Main Content Area -->\n <div class=\"tw-table-row\">\n <div class=\"tw-table-cell tw-h-full tw-relative\">\n\n <!-- Data Grid Component -->\n <div class=\"tw-h-full tw-overflow-auto\">\n\n <cide-ele-data-grid [config]=\"gridConfig()\" [templateRenderers]=\"getTemplateRenderers()\"\n [actionHandlers]=\"actionHandlers\" [serverSidePagination]=\"true\" [totalServerItems]=\"totalItems()\"\n [currentServerPage]=\"currentPage()\" [currentServerPageSize]=\"pageSize()\" (gridEvent)=\"onGridEvent($event)\">\n </cide-ele-data-grid>\n </div>\n\n </div>\n </div>\n\n </div>\n\n <!-- Designation Details Renderer Template -->\n <ng-template #designationDetailsRendererTemplate let-row=\"row\" let-value=\"value\">\n <div class=\"tw-flex tw-items-center tw-min-w-0\">\n <!-- Dynamic Icon based on type -->\n <div class=\"tw-flex-shrink-0\">\n <cide-ele-icon [class]=\"row.type === 'department' ? 'tw-text-green-500' : 'tw-text-blue-500'\" size=\"sm\">\n {{ row.type === 'department' ? 'business' : 'work' }}\n </cide-ele-icon>\n </div>\n\n <!-- Details -->\n <div class=\"tw-ml-3 tw-min-w-0 tw-flex-1\">\n <div class=\"tw-flex tw-items-center tw-space-x-2\">\n <div class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-truncate\" [title]=\"row.name\">\n {{ row.name || 'Untitled' }}\n </div>\n @if (row.type === 'department') {\n <span\n class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-green-100 tw-text-green-800\">\n Department\n </span>\n }\n </div>\n @if (row.description) {\n <div class=\"tw-text-xs tw-text-gray-500 tw-truncate\" [title]=\"row.description\">\n {{ row.description }}\n </div>\n }\n </div>\n </div>\n </ng-template>\n\n <!-- Designation Status Renderer Template -->\n <ng-template #designationStatusRendererTemplate let-row=\"row\" let-value=\"value\">\n <span\n class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-whitespace-nowrap\"\n [ngClass]=\"getStatusClass(row.status)\">\n {{ getStatusDisplay(row.status) }}\n </span>\n </ng-template>\n\n <!-- Actions Dropdown Renderer Template -->\n <ng-template #actionsDropdownRendererTemplate let-row=\"row\" let-value=\"value\">\n <cide-ele-dropdown [items]=\"getDropdownItems(row)\" [config]=\"{ triggerIcon: 'more_vert', triggerSize: 'sm' }\"\n (itemClick)=\"onDropdownItemClick($event, row)\">\n </cide-ele-dropdown>\n </ng-template>\n</cide-lyt-shared-wrapper>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: CideEleDataGridComponent, selector: "cide-ele-data-grid", inputs: ["config", "templateRenderers", "customFormatters", "actionHandlers", "serverSidePagination", "totalServerItems", "currentServerPage", "currentServerPageSize", "dragDropEnabled"], outputs: ["gridEvent"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated", "adaptive"], 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", "name"] }, { 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"] }] });
|
|
5118
5118
|
}
|
|
5119
5119
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideCoreDesignationListComponent, decorators: [{
|
|
5120
5120
|
type: Component,
|
|
@@ -5130,7 +5130,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
5130
5130
|
CideIconComponent,
|
|
5131
5131
|
CideEleDropdownComponent,
|
|
5132
5132
|
CideLytSharedWrapperComponent
|
|
5133
|
-
], template: "<!-- Designation List with Shared Wrapper -->\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'core_designation_list' }\">\n <div class=\"tw-table tw-w-full tw-h-full\">\n\n <!-- Quick Add Form Section - Show if user has VIEW, CREATE, or EDIT rights -->\n @if (canView() || canCreate() || canEdit()) {\n <div class=\"tw-table-row tw-h-0\">\n <div class=\"tw-table-cell tw-px-6 tw-py-4 tw-border-b tw-border-gray-200 tw-bg-white\">\n <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-0\">\n <div class=\"tw-flex tw-items-center tw-space-x-3 tw-mb-3\">\n <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\n <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-m-0\">{{ isEditMode() ? 'Edit Designation' : 'Quick\n Add Designation' }}</h6>\n </div>\n @if (selectedParentDesignation()) {\n <div\n class=\"tw-flex tw-items-center tw-space-x-3 tw-bg-blue-50 tw-border tw-border-blue-200 tw-px-4 tw-py-1 tw-rounded-lg\">\n <cide-ele-icon class=\"tw-text-blue-600 tw-w-4 tw-h-4\">account_tree</cide-ele-icon>\n <div class=\"tw-flex tw-items-center tw-space-x-2\">\n <span class=\"tw-text-sm tw-text-blue-600 tw-font-medium\">{{ isEditMode() ? 'Parent:' : 'Creating child\n under:' }}</span>\n <span class=\"tw-text-sm tw-text-blue-800 tw-font-semibold\">{{ selectedParentDesignation()?.sydsg_name\n }}</span>\n </div>\n <button cideEleButton variant=\"ghost\" size=\"xs\" type=\"button\" (click)=\"clearSelectedParent()\"\n [disabled]=\"canView() && !canCreate() && !canEdit()\" class=\"tw-text-blue-400 hover:tw-text-blue-600\">\n <svg class=\"tw-w-4 tw-h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\" />\n </svg>\n </button>\n </div>\n }\n @if (selectedParentDepartment()) {\n <div\n class=\"tw-flex tw-items-center tw-space-x-3 tw-bg-green-50 tw-border tw-border-green-200 tw-px-4 tw-py-1 tw-rounded-lg\">\n <cide-ele-icon class=\"tw-text-green-600 tw-w-4 tw-h-4\">business</cide-ele-icon>\n <div class=\"tw-flex tw-items-center tw-space-x-2\">\n <span class=\"tw-text-sm tw-text-green-600 tw-font-medium\">{{ isEditMode() ? 'Department:' : 'Department:'\n }}</span>\n <span class=\"tw-text-sm tw-text-green-800 tw-font-semibold\">{{ selectedParentDepartment()?.sydept_name\n }}</span>\n </div>\n <button cideEleButton variant=\"ghost\" size=\"xs\" type=\"button\" (click)=\"clearSelectedParentDepartment()\"\n [disabled]=\"!canCreate() && !canEdit()\"\n class=\"tw-text-green-400 hover:tw-text-green-600\">\n <svg class=\"tw-w-4 tw-h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\" />\n </svg>\n </button>\n </div>\n }\n </div>\n\n <form [formGroup]=\"quickAddForm\" (ngSubmit)=\"quickAddDesignation()\">\n <!-- First Row -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-5 tw-gap-3 tw-mb-3\">\n <!-- Designation Name -->\n <div>\n <cide-ele-input id=\"sydsg_name\" label=\"Name\" formControlName=\"sydsg_name\" placeholder=\"Designation name\"\n [disabled]=\"canView() && !canCreate() && !canEdit()\" size=\"sm\">\n </cide-ele-input>\n </div>\n\n <!-- Designation Code -->\n <div>\n <cide-ele-input id=\"sydsg_code\" label=\"Code\" formControlName=\"sydsg_code\" placeholder=\"DESG001\"\n [disabled]=\"canView() && !canCreate() && !canEdit()\" size=\"sm\">\n </cide-ele-input>\n </div>\n <!-- Grade Level -->\n <div>\n <cide-ele-select id=\"sydsg_grade_level_id_sydsgl\" label=\"Grade Level\" [options]=\"gradeLevelOptions()\"\n formControlName=\"sydsg_grade_level_id_sydsgl\" placeholder=\"Select grade level\"\n [disabled]=\"canView() && !canCreate() && !canEdit()\" size=\"sm\">\n </cide-ele-select>\n </div>\n\n <!-- Department -->\n <div>\n <cide-ele-select id=\"sydsg_department_id_sydpt\" label=\"Department\" [options]=\"departmentOptions()\"\n formControlName=\"sydsg_department_id_sydpt\" placeholder=\"Select department\"\n [disabled]=\"canView() && !canCreate() && !canEdit()\" size=\"sm\">\n </cide-ele-select>\n </div>\n\n <!-- Active Status -->\n <div class=\"tw-flex tw-flex-col tw-justify-end\">\n <cide-ele-input id=\"sydsg_isactive\" type=\"checkbox\" label=\"Active\" formControlName=\"sydsg_isactive\"\n [disabled]=\"canView() && !canCreate() && !canEdit()\" size=\"sm\">\n </cide-ele-input>\n </div>\n </div>\n\n <!-- Second Row -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-3 tw-items-end\">\n <!-- Description -->\n <div>\n <cide-ele-textarea id=\"sydsg_description\" label=\"Description\" formControlName=\"sydsg_description\"\n placeholder=\"Designation description\" rows=\"2\"\n [disabled]=\"canView() && !canCreate() && !canEdit()\"\n size=\"sm\">\n </cide-ele-textarea>\n </div>\n\n <!-- Entity ID (Hidden) -->\n <div class=\"tw-hidden\">\n <cide-ele-input id=\"desg_entity_id_syen\" label=\"Entity ID\" formControlName=\"desg_entity_id_syen\"\n placeholder=\"Entity ID\" size=\"sm\">\n </cide-ele-input>\n </div>\n\n <!-- Action Buttons -->\n @if (canCreate() || canEdit()) {\n <div class=\"tw-flex tw-flex-col tw-justify-end\">\n <div class=\"tw-flex tw-space-x-2\">\n @if (isEditMode() ? canEdit() : canCreate()) {\n <button cideEleButton variant=\"primary\" size=\"sm\" type=\"submit\" [disabled]=\"quickAddForm.invalid\"\n class=\"tw-px-2 tw-py-1 tw-w-20\">\n <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">{{ isEditMode() ? 'edit' : 'add'\n }}</cide-ele-icon>\n {{ isEditMode() ? 'Update' : 'Add' }}\n </button>\n }\n <button cideEleButton variant=\"outline\" size=\"sm\" type=\"button\" (click)=\"resetQuickAddForm()\"\n [disabled]=\"canView() && !canCreate() && !canEdit()\" class=\"tw-px-2 tw-py-1 tw-w-16\">\n <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">refresh</cide-ele-icon>\n Reset\n </button>\n </div>\n </div>\n }\n </div>\n </form>\n </div>\n </div>\n }\n\n <!-- Main Content Area -->\n <div class=\"tw-table-row\">\n <div class=\"tw-table-cell tw-h-full tw-relative\">\n\n <!-- Data Grid Component -->\n <div class=\"tw-h-full tw-overflow-auto\">\n\n <cide-ele-data-grid [config]=\"gridConfig()\" [templateRenderers]=\"getTemplateRenderers()\"\n [actionHandlers]=\"actionHandlers\" [serverSidePagination]=\"true\" [totalServerItems]=\"totalItems()\"\n [currentServerPage]=\"currentPage()\" [currentServerPageSize]=\"pageSize()\" (gridEvent)=\"onGridEvent($event)\">\n </cide-ele-data-grid>\n </div>\n\n </div>\n </div>\n\n </div>\n\n <!-- Designation Details Renderer Template -->\n <ng-template #designationDetailsRendererTemplate let-row=\"row\" let-value=\"value\">\n <div class=\"tw-flex tw-items-center tw-min-w-0\">\n <!-- Dynamic Icon based on type -->\n <div class=\"tw-flex-shrink-0\">\n <cide-ele-icon [class]=\"row.type === 'department' ? 'tw-text-green-500' : 'tw-text-blue-500'\" size=\"xs\">\n {{ row.type === 'department' ? 'business' : 'work' }}\n </cide-ele-icon>\n </div>\n\n <!-- Details -->\n <div class=\"tw-ml-3 tw-min-w-0 tw-flex-1\">\n <div class=\"tw-flex tw-items-center tw-space-x-2\">\n <div class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-truncate\" [title]=\"row.name\">\n {{ row.name || 'Untitled' }}\n </div>\n @if (row.type === 'department') {\n <span\n class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-green-100 tw-text-green-800\">\n Department\n </span>\n }\n </div>\n @if (row.description) {\n <div class=\"tw-text-xs tw-text-gray-500 tw-truncate\" [title]=\"row.description\">\n {{ row.description }}\n </div>\n }\n </div>\n </div>\n </ng-template>\n\n <!-- Designation Status Renderer Template -->\n <ng-template #designationStatusRendererTemplate let-row=\"row\" let-value=\"value\">\n <span\n class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-whitespace-nowrap\"\n [ngClass]=\"getStatusClass(row.status)\">\n {{ getStatusDisplay(row.status) }}\n </span>\n </ng-template>\n\n <!-- Actions Dropdown Renderer Template -->\n <ng-template #actionsDropdownRendererTemplate let-row=\"row\" let-value=\"value\">\n <cide-ele-dropdown [items]=\"getDropdownItems(row)\" [config]=\"{ triggerIcon: 'more_vert', triggerSize: 'sm' }\"\n (itemClick)=\"onDropdownItemClick($event, row)\">\n </cide-ele-dropdown>\n </ng-template>\n</cide-lyt-shared-wrapper>" }]
|
|
5133
|
+
], template: "<!-- Designation List with Shared Wrapper -->\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'core_designation_list' }\">\n <div class=\"tw-table tw-w-full tw-h-full\">\n\n <!-- Quick Add Form Section - Show if user has VIEW, CREATE, or EDIT rights -->\n @if (canView() || canCreate() || canEdit()) {\n <div class=\"tw-table-row tw-h-0\">\n <div class=\"tw-table-cell tw-px-6 tw-py-4 tw-border-b tw-border-gray-200 tw-bg-white\">\n <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-0\">\n <div class=\"tw-flex tw-items-center tw-space-x-3 tw-mb-3\">\n <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\n <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-m-0\">{{ isEditMode() ? 'Edit Designation' : 'Quick\n Add Designation' }}</h6>\n </div>\n @if (selectedParentDesignation()) {\n <div\n class=\"tw-flex tw-items-center tw-space-x-3 tw-bg-blue-50 tw-border tw-border-blue-200 tw-px-4 tw-py-1 tw-rounded-lg\">\n <cide-ele-icon class=\"tw-text-blue-600 tw-w-4 tw-h-4\">account_tree</cide-ele-icon>\n <div class=\"tw-flex tw-items-center tw-space-x-2\">\n <span class=\"tw-text-sm tw-text-blue-600 tw-font-medium\">{{ isEditMode() ? 'Parent:' : 'Creating child\n under:' }}</span>\n <span class=\"tw-text-sm tw-text-blue-800 tw-font-semibold\">{{ selectedParentDesignation()?.sydsg_name\n }}</span>\n </div>\n <button cideEleButton variant=\"ghost\" size=\"xs\" type=\"button\" (click)=\"clearSelectedParent()\"\n [disabled]=\"canView() && !canCreate() && !canEdit()\" class=\"tw-text-blue-400 hover:tw-text-blue-600\">\n <svg class=\"tw-w-4 tw-h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\" />\n </svg>\n </button>\n </div>\n }\n @if (selectedParentDepartment()) {\n <div\n class=\"tw-flex tw-items-center tw-space-x-3 tw-bg-green-50 tw-border tw-border-green-200 tw-px-4 tw-py-1 tw-rounded-lg\">\n <cide-ele-icon class=\"tw-text-green-600 tw-w-4 tw-h-4\">business</cide-ele-icon>\n <div class=\"tw-flex tw-items-center tw-space-x-2\">\n <span class=\"tw-text-sm tw-text-green-600 tw-font-medium\">{{ isEditMode() ? 'Department:' : 'Department:'\n }}</span>\n <span class=\"tw-text-sm tw-text-green-800 tw-font-semibold\">{{ selectedParentDepartment()?.sydept_name\n }}</span>\n </div>\n <button cideEleButton variant=\"ghost\" size=\"xs\" type=\"button\" (click)=\"clearSelectedParentDepartment()\"\n [disabled]=\"!canCreate() && !canEdit()\"\n class=\"tw-text-green-400 hover:tw-text-green-600\">\n <svg class=\"tw-w-4 tw-h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\" />\n </svg>\n </button>\n </div>\n }\n </div>\n\n <form [formGroup]=\"quickAddForm\" (ngSubmit)=\"quickAddDesignation()\">\n <!-- First Row -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-5 tw-gap-3 tw-mb-3\">\n <!-- Designation Name -->\n <div>\n <cide-ele-input id=\"sydsg_name\" label=\"Name\" formControlName=\"sydsg_name\" placeholder=\"Designation name\"\n [disabled]=\"canView() && !canCreate() && !canEdit()\" size=\"sm\">\n </cide-ele-input>\n </div>\n\n <!-- Designation Code -->\n <div>\n <cide-ele-input id=\"sydsg_code\" label=\"Code\" formControlName=\"sydsg_code\" placeholder=\"DESG001\"\n [disabled]=\"canView() && !canCreate() && !canEdit()\" size=\"sm\">\n </cide-ele-input>\n </div>\n <!-- Grade Level -->\n <div>\n <cide-ele-select id=\"sydsg_grade_level_id_sydsgl\" label=\"Grade Level\" [options]=\"gradeLevelOptions()\"\n formControlName=\"sydsg_grade_level_id_sydsgl\" placeholder=\"Select grade level\"\n [disabled]=\"canView() && !canCreate() && !canEdit()\" size=\"sm\">\n </cide-ele-select>\n </div>\n\n <!-- Department -->\n <div>\n <cide-ele-select id=\"sydsg_department_id_sydpt\" label=\"Department\" [options]=\"departmentOptions()\"\n formControlName=\"sydsg_department_id_sydpt\" placeholder=\"Select department\"\n [disabled]=\"canView() && !canCreate() && !canEdit()\" size=\"sm\">\n </cide-ele-select>\n </div>\n\n <!-- Active Status -->\n <div class=\"tw-flex tw-flex-col tw-justify-end\">\n <cide-ele-input id=\"sydsg_isactive\" type=\"checkbox\" label=\"Active\" formControlName=\"sydsg_isactive\"\n [disabled]=\"canView() && !canCreate() && !canEdit()\" size=\"sm\">\n </cide-ele-input>\n </div>\n </div>\n\n <!-- Second Row -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-3 tw-items-end\">\n <!-- Description -->\n <div>\n <cide-ele-textarea id=\"sydsg_description\" label=\"Description\" formControlName=\"sydsg_description\"\n placeholder=\"Designation description\" rows=\"2\"\n [disabled]=\"canView() && !canCreate() && !canEdit()\"\n size=\"sm\">\n </cide-ele-textarea>\n </div>\n\n <!-- Entity ID (Hidden) -->\n <div class=\"tw-hidden\">\n <cide-ele-input id=\"desg_entity_id_syen\" label=\"Entity ID\" formControlName=\"desg_entity_id_syen\"\n placeholder=\"Entity ID\" size=\"sm\">\n </cide-ele-input>\n </div>\n\n <!-- Action Buttons -->\n @if (canCreate() || canEdit()) {\n <div class=\"tw-flex tw-flex-col tw-justify-end\">\n <div class=\"tw-flex tw-space-x-2\">\n @if (isEditMode() ? canEdit() : canCreate()) {\n <button cideEleButton variant=\"primary\" size=\"xs\" type=\"submit\" [disabled]=\"quickAddForm.invalid\"\n class=\"tw-px-2 tw-py-1 tw-w-20\">\n <cide-ele-icon size=\"sm\" class=\"tw-w-4 tw-h-4 tw-mr-1\">{{ isEditMode() ? 'edit' : 'add'\n }}</cide-ele-icon>\n {{ isEditMode() ? 'Update' : 'Add' }}\n </button>\n }\n <button cideEleButton variant=\"outline\" size=\"xs\" type=\"button\" (click)=\"resetQuickAddForm()\"\n [disabled]=\"canView() && !canCreate() && !canEdit()\" class=\"tw-px-2 tw-py-1 tw-w-16\">\n <cide-ele-icon size=\"sm\" class=\"tw-w-4 tw-h-4 tw-mr-1\">refresh</cide-ele-icon>\n Reset\n </button>\n </div>\n </div>\n }\n </div>\n </form>\n </div>\n </div>\n }\n\n <!-- Main Content Area -->\n <div class=\"tw-table-row\">\n <div class=\"tw-table-cell tw-h-full tw-relative\">\n\n <!-- Data Grid Component -->\n <div class=\"tw-h-full tw-overflow-auto\">\n\n <cide-ele-data-grid [config]=\"gridConfig()\" [templateRenderers]=\"getTemplateRenderers()\"\n [actionHandlers]=\"actionHandlers\" [serverSidePagination]=\"true\" [totalServerItems]=\"totalItems()\"\n [currentServerPage]=\"currentPage()\" [currentServerPageSize]=\"pageSize()\" (gridEvent)=\"onGridEvent($event)\">\n </cide-ele-data-grid>\n </div>\n\n </div>\n </div>\n\n </div>\n\n <!-- Designation Details Renderer Template -->\n <ng-template #designationDetailsRendererTemplate let-row=\"row\" let-value=\"value\">\n <div class=\"tw-flex tw-items-center tw-min-w-0\">\n <!-- Dynamic Icon based on type -->\n <div class=\"tw-flex-shrink-0\">\n <cide-ele-icon [class]=\"row.type === 'department' ? 'tw-text-green-500' : 'tw-text-blue-500'\" size=\"sm\">\n {{ row.type === 'department' ? 'business' : 'work' }}\n </cide-ele-icon>\n </div>\n\n <!-- Details -->\n <div class=\"tw-ml-3 tw-min-w-0 tw-flex-1\">\n <div class=\"tw-flex tw-items-center tw-space-x-2\">\n <div class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-truncate\" [title]=\"row.name\">\n {{ row.name || 'Untitled' }}\n </div>\n @if (row.type === 'department') {\n <span\n class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-green-100 tw-text-green-800\">\n Department\n </span>\n }\n </div>\n @if (row.description) {\n <div class=\"tw-text-xs tw-text-gray-500 tw-truncate\" [title]=\"row.description\">\n {{ row.description }}\n </div>\n }\n </div>\n </div>\n </ng-template>\n\n <!-- Designation Status Renderer Template -->\n <ng-template #designationStatusRendererTemplate let-row=\"row\" let-value=\"value\">\n <span\n class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-whitespace-nowrap\"\n [ngClass]=\"getStatusClass(row.status)\">\n {{ getStatusDisplay(row.status) }}\n </span>\n </ng-template>\n\n <!-- Actions Dropdown Renderer Template -->\n <ng-template #actionsDropdownRendererTemplate let-row=\"row\" let-value=\"value\">\n <cide-ele-dropdown [items]=\"getDropdownItems(row)\" [config]=\"{ triggerIcon: 'more_vert', triggerSize: 'sm' }\"\n (itemClick)=\"onDropdownItemClick($event, row)\">\n </cide-ele-dropdown>\n </ng-template>\n</cide-lyt-shared-wrapper>" }]
|
|
5134
5134
|
}], ctorParameters: () => [], propDecorators: { designationDetailsRendererTemplate: [{ type: i0.ViewChild, args: ['designationDetailsRendererTemplate', { isSignal: true }] }], designationStatusRendererTemplate: [{ type: i0.ViewChild, args: ['designationStatusRendererTemplate', { isSignal: true }] }], actionsDropdownRendererTemplate: [{ type: i0.ViewChild, args: ['actionsDropdownRendererTemplate', { isSignal: true }] }] } });
|
|
5135
5135
|
|
|
5136
5136
|
var designationList_component = /*#__PURE__*/Object.freeze({
|
|
@@ -5995,7 +5995,7 @@ class CideCoreGradeLevelListComponent {
|
|
|
5995
5995
|
return item._id || '';
|
|
5996
5996
|
}
|
|
5997
5997
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideCoreGradeLevelListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5998
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: CideCoreGradeLevelListComponent, isStandalone: true, selector: "cide-core-grade-level-list", viewQueries: [{ propertyName: "dragHandleRendererTemplate", first: true, predicate: ["dragHandleRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "gradeLevelDetailsRendererTemplate", first: true, predicate: ["gradeLevelDetailsRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "gradeLevelStatusRendererTemplate", first: true, predicate: ["gradeLevelStatusRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "actionsDropdownRendererTemplate", first: true, predicate: ["actionsDropdownRendererTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Grade Level List with Shared Wrapper -->\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'core_grade_level_list' }\">\n<div class=\"tw-table tw-w-full tw-h-full\">\n\n <!-- Quick Add Form Section - Show if user has VIEW, CREATE, or EDIT rights -->\n @if (canView() || canCreate() || canEdit()) {\n <div class=\"tw-table-row tw-h-0\">\n <div class=\"tw-table-cell tw-px-6 tw-py-4 tw-border-b tw-border-gray-200 tw-bg-white\">\n <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\n <div class=\"tw-flex tw-items-center tw-space-x-3\">\n <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\n <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-m-0\">{{ isEditMode() ? 'Edit Grade Level' : 'Quick\n Add Grade Level' }}</h6>\n </div>\n </div>\n \n <form [formGroup]=\"quickAddForm\" (ngSubmit)=\"quickAddGradeLevel()\">\n <!-- First Row -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-3 tw-mb-3\">\n <!-- Grade Level Name -->\n <div>\n <cide-ele-input \n id=\"sydsgl_name\" \n label=\"Name\" \n formControlName=\"sydsgl_name\"\n placeholder=\"Grade level name\"\n size=\"sm\">\n </cide-ele-input>\n </div>\n \n <!-- Active Status -->\n <div class=\"tw-flex tw-flex-col tw-justify-end\">\n <cide-ele-input \n id=\"sydsgl_isactive\"\n type=\"checkbox\"\n label=\"Active\"\n formControlName=\"sydsgl_isactive\"\n size=\"sm\">\n </cide-ele-input>\n </div>\n </div>\n \n <!-- Second Row -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-3 tw-items-end\">\n <!-- Description -->\n <div>\n <cide-ele-textarea id=\"sydsgl_description\" label=\"Description\" formControlName=\"sydsgl_description\"\n placeholder=\"Grade level description\" rows=\"2\" [disabled]=\"canView() && !canCreate() && !canEdit()\" size=\"sm\">\n </cide-ele-textarea>\n </div>\n \n <!-- Entity ID (Hidden) -->\n <div class=\"tw-hidden\">\n <cide-ele-input \n id=\"sydsgl_entity_id_syen\" \n label=\"Entity ID\" \n formControlName=\"sydsgl_entity_id_syen\"\n placeholder=\"Entity ID\"\n size=\"sm\">\n </cide-ele-input>\n </div>\n \n <!-- Action Buttons -->\n <div class=\"tw-flex tw-flex-col tw-justify-end\">\n <div class=\"tw-flex tw-space-x-2\">\n <button \n cideEleButton \n variant=\"primary\" \n size=\"sm\" \n type=\"submit\"\n [disabled]=\"quickAddForm.invalid\"\n class=\"tw-px-2 tw-py-1 tw-w-20\">\n <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\n {{ isEditMode() ? 'Update' : 'Add' }}\n </button>\n <button \n cideEleButton \n variant=\"outline\" \n size=\"sm\" \n type=\"button\"\n (click)=\"resetQuickAddForm()\"\n class=\"tw-px-2 tw-py-1 tw-w-16\">\n <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">refresh</cide-ele-icon>\n Reset\n </button>\n </div>\n </div>\n </div>\n </form>\n </div>\n </div>\n }\n\n <!-- Main Content Area -->\n <div class=\"tw-table-row\">\n <div class=\"tw-table-cell tw-h-full tw-relative\">\n \n <!-- Data Grid Component -->\n <div class=\"tw-h-full tw-overflow-auto\">\n \n <cide-ele-data-grid \n [config]=\"gridConfig()\" \n [templateRenderers]=\"getTemplateRenderers()\"\n [actionHandlers]=\"actionHandlers\"\n [serverSidePagination]=\"true\" \n [totalServerItems]=\"totalItems()\" \n [currentServerPage]=\"currentPage()\"\n [currentServerPageSize]=\"pageSize()\" \n [dragDropEnabled]=\"true\"\n (gridEvent)=\"onGridEvent($event)\">\n </cide-ele-data-grid>\n </div>\n\n </div>\n </div>\n\n</div>\n\n<!-- Drag Handle Renderer Template -->\n<ng-template #dragHandleRendererTemplate let-row=\"row\" let-value=\"value\">\n <div class=\"tw-flex tw-items-center tw-justify-center tw-w-full tw-h-full tw-cursor-move drag-handle\">\n <cide-ele-icon \n class=\"tw-text-gray-400 hover:tw-text-gray-600 tw-transition-colors\" \n size=\"xs\">\n drag_indicator\n </cide-ele-icon>\n </div>\n</ng-template>\n\n<!-- Grade Level Details Renderer Template -->\n<ng-template #gradeLevelDetailsRendererTemplate let-row=\"row\" let-value=\"value\">\n <div class=\"tw-flex tw-items-center tw-min-w-0\">\n <!-- Grade Level Icon -->\n <div class=\"tw-flex-shrink-0\">\n <cide-ele-icon \n class=\"tw-text-gray-400\" \n size=\"xs\">\n school\n </cide-ele-icon>\n </div>\n \n <!-- Grade Level Details -->\n <div class=\"tw-ml-3 tw-min-w-0 tw-flex-1\">\n <div class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-truncate\" \n [title]=\"row.sydsgl_name\">\n {{ row.sydsgl_name || 'Untitled' }}\n </div>\n @if (row.sydsgl_description) {\n <div class=\"tw-text-xs tw-text-gray-500 tw-truncate\" \n [title]=\"row.sydsgl_description\">\n {{ row.sydsgl_description }}\n </div>\n }\n </div>\n </div>\n</ng-template>\n\n<!-- Grade Level Status Renderer Template -->\n<ng-template #gradeLevelStatusRendererTemplate let-row=\"row\" let-value=\"value\">\n <span class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-whitespace-nowrap\"\n [ngClass]=\"getStatusClass(row.sydsgl_isactive)\">\n {{ getStatusDisplay(row.sydsgl_isactive) }}\n </span>\n</ng-template>\n\n<!-- Actions Dropdown Renderer Template -->\n<ng-template #actionsDropdownRendererTemplate let-row=\"row\" let-value=\"value\">\n <cide-ele-dropdown \n [items]=\"getDropdownItems(row)\"\n [config]=\"{ triggerIcon: 'more_vert', triggerSize: 'sm' }\"\n (itemClick)=\"onDropdownItemClick($event, row)\">\n </cide-ele-dropdown>\n</ng-template>\n\n<!-- Confirmation Modal -->\n</cide-lyt-shared-wrapper>\n<cide-ele-confirmation-modal></cide-ele-confirmation-modal> ", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: CideEleDataGridComponent, selector: "cide-ele-data-grid", inputs: ["config", "templateRenderers", "customFormatters", "actionHandlers", "serverSidePagination", "totalServerItems", "currentServerPage", "currentServerPageSize", "dragDropEnabled"], outputs: ["gridEvent"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated", "adaptive"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideInputComponent, selector: "cide-ele-input", inputs: ["fill", "label", "labelHide", "disabled", "clearInput", "labelPlacement", "labelDir", "placeholder", "leadingIcon", "trailingIcon", "helperText", "helperTextCollapse", "hideHelperAndErrorText", "errorText", "maxlength", "minlength", "required", "autocapitalize", "autocomplete", "type", "width", "id", "ngModel", "option", "min", "max", "step", "size"], outputs: ["ngModelChange"] }, { kind: "component", type: CideTextareaComponent, selector: "cide-ele-textarea", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "minlength", "maxlength", "rows", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput"], outputs: ["ngModelChange"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideEleDropdownComponent, selector: "cide-ele-dropdown", inputs: ["items", "config", "triggerTemplate", "menuTemplate"], outputs: ["itemClick", "dropdownToggle"] }, { kind: "component", type: CideLytSharedWrapperComponent, selector: "cide-lyt-shared-wrapper", inputs: ["shared_wrapper_setup_param", "breadcrumb_data"] }, { kind: "component", type: CideEleConfirmationModalComponent, selector: "cide-ele-confirmation-modal" }] });
|
|
5998
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: CideCoreGradeLevelListComponent, isStandalone: true, selector: "cide-core-grade-level-list", viewQueries: [{ propertyName: "dragHandleRendererTemplate", first: true, predicate: ["dragHandleRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "gradeLevelDetailsRendererTemplate", first: true, predicate: ["gradeLevelDetailsRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "gradeLevelStatusRendererTemplate", first: true, predicate: ["gradeLevelStatusRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "actionsDropdownRendererTemplate", first: true, predicate: ["actionsDropdownRendererTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Grade Level List with Shared Wrapper -->\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'core_grade_level_list' }\">\n<div class=\"tw-table tw-w-full tw-h-full\">\n\n <!-- Quick Add Form Section - Show if user has VIEW, CREATE, or EDIT rights -->\n @if (canView() || canCreate() || canEdit()) {\n <div class=\"tw-table-row tw-h-0\">\n <div class=\"tw-table-cell tw-px-6 tw-py-4 tw-border-b tw-border-gray-200 tw-bg-white\">\n <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\n <div class=\"tw-flex tw-items-center tw-space-x-3\">\n <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\n <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-m-0\">{{ isEditMode() ? 'Edit Grade Level' : 'Quick\n Add Grade Level' }}</h6>\n </div>\n </div>\n \n <form [formGroup]=\"quickAddForm\" (ngSubmit)=\"quickAddGradeLevel()\">\n <!-- First Row -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-3 tw-mb-3\">\n <!-- Grade Level Name -->\n <div>\n <cide-ele-input \n id=\"sydsgl_name\" \n label=\"Name\" \n formControlName=\"sydsgl_name\"\n placeholder=\"Grade level name\"\n size=\"sm\">\n </cide-ele-input>\n </div>\n \n <!-- Active Status -->\n <div class=\"tw-flex tw-flex-col tw-justify-end\">\n <cide-ele-input \n id=\"sydsgl_isactive\"\n type=\"checkbox\"\n label=\"Active\"\n formControlName=\"sydsgl_isactive\"\n size=\"sm\">\n </cide-ele-input>\n </div>\n </div>\n \n <!-- Second Row -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-3 tw-items-end\">\n <!-- Description -->\n <div>\n <cide-ele-textarea id=\"sydsgl_description\" label=\"Description\" formControlName=\"sydsgl_description\"\n placeholder=\"Grade level description\" rows=\"2\" [disabled]=\"canView() && !canCreate() && !canEdit()\" size=\"sm\">\n </cide-ele-textarea>\n </div>\n \n <!-- Entity ID (Hidden) -->\n <div class=\"tw-hidden\">\n <cide-ele-input \n id=\"sydsgl_entity_id_syen\" \n label=\"Entity ID\" \n formControlName=\"sydsgl_entity_id_syen\"\n placeholder=\"Entity ID\"\n size=\"sm\">\n </cide-ele-input>\n </div>\n \n <!-- Action Buttons -->\n <div class=\"tw-flex tw-flex-col tw-justify-end\">\n <div class=\"tw-flex tw-space-x-2\">\n <button \n cideEleButton \n variant=\"primary\" \n size=\"xs\" \n type=\"submit\"\n [disabled]=\"quickAddForm.invalid\"\n class=\"tw-px-2 tw-py-1 tw-w-20\">\n <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\n {{ isEditMode() ? 'Update' : 'Add' }}\n </button>\n <button \n cideEleButton \n variant=\"outline\" \n size=\"xs\" \n type=\"button\"\n (click)=\"resetQuickAddForm()\"\n class=\"tw-px-2 tw-py-1 tw-w-16\">\n <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">refresh</cide-ele-icon>\n Reset\n </button>\n </div>\n </div>\n </div>\n </form>\n </div>\n </div>\n }\n\n <!-- Main Content Area -->\n <div class=\"tw-table-row\">\n <div class=\"tw-table-cell tw-h-full tw-relative\">\n \n <!-- Data Grid Component -->\n <div class=\"tw-h-full tw-overflow-auto\">\n \n <cide-ele-data-grid \n [config]=\"gridConfig()\" \n [templateRenderers]=\"getTemplateRenderers()\"\n [actionHandlers]=\"actionHandlers\"\n [serverSidePagination]=\"true\" \n [totalServerItems]=\"totalItems()\" \n [currentServerPage]=\"currentPage()\"\n [currentServerPageSize]=\"pageSize()\" \n [dragDropEnabled]=\"true\"\n (gridEvent)=\"onGridEvent($event)\">\n </cide-ele-data-grid>\n </div>\n\n </div>\n </div>\n\n</div>\n\n<!-- Drag Handle Renderer Template -->\n<ng-template #dragHandleRendererTemplate let-row=\"row\" let-value=\"value\">\n <div class=\"tw-flex tw-items-center tw-justify-center tw-w-full tw-h-full tw-cursor-move drag-handle\">\n <cide-ele-icon \n class=\"tw-text-gray-400 hover:tw-text-gray-600 tw-transition-colors\" \n size=\"xs\">\n drag_indicator\n </cide-ele-icon>\n </div>\n</ng-template>\n\n<!-- Grade Level Details Renderer Template -->\n<ng-template #gradeLevelDetailsRendererTemplate let-row=\"row\" let-value=\"value\">\n <div class=\"tw-flex tw-items-center tw-min-w-0\">\n <!-- Grade Level Icon -->\n <div class=\"tw-flex-shrink-0\">\n <cide-ele-icon \n class=\"tw-text-gray-400\" \n size=\"xs\">\n school\n </cide-ele-icon>\n </div>\n \n <!-- Grade Level Details -->\n <div class=\"tw-ml-3 tw-min-w-0 tw-flex-1\">\n <div class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-truncate\" \n [title]=\"row.sydsgl_name\">\n {{ row.sydsgl_name || 'Untitled' }}\n </div>\n @if (row.sydsgl_description) {\n <div class=\"tw-text-xs tw-text-gray-500 tw-truncate\" \n [title]=\"row.sydsgl_description\">\n {{ row.sydsgl_description }}\n </div>\n }\n </div>\n </div>\n</ng-template>\n\n<!-- Grade Level Status Renderer Template -->\n<ng-template #gradeLevelStatusRendererTemplate let-row=\"row\" let-value=\"value\">\n <span class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-whitespace-nowrap\"\n [ngClass]=\"getStatusClass(row.sydsgl_isactive)\">\n {{ getStatusDisplay(row.sydsgl_isactive) }}\n </span>\n</ng-template>\n\n<!-- Actions Dropdown Renderer Template -->\n<ng-template #actionsDropdownRendererTemplate let-row=\"row\" let-value=\"value\">\n <cide-ele-dropdown \n [items]=\"getDropdownItems(row)\"\n [config]=\"{ triggerIcon: 'more_vert', triggerSize: 'sm' }\"\n (itemClick)=\"onDropdownItemClick($event, row)\">\n </cide-ele-dropdown>\n</ng-template>\n\n<!-- Confirmation Modal -->\n</cide-lyt-shared-wrapper>\n<cide-ele-confirmation-modal></cide-ele-confirmation-modal> ", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: CideEleDataGridComponent, selector: "cide-ele-data-grid", inputs: ["config", "templateRenderers", "customFormatters", "actionHandlers", "serverSidePagination", "totalServerItems", "currentServerPage", "currentServerPageSize", "dragDropEnabled"], outputs: ["gridEvent"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated", "adaptive"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideInputComponent, selector: "cide-ele-input", inputs: ["fill", "label", "labelHide", "disabled", "clearInput", "labelPlacement", "labelDir", "placeholder", "leadingIcon", "trailingIcon", "helperText", "helperTextCollapse", "hideHelperAndErrorText", "errorText", "maxlength", "minlength", "required", "autocapitalize", "autocomplete", "type", "width", "id", "ngModel", "option", "min", "max", "step", "size"], outputs: ["ngModelChange"] }, { kind: "component", type: CideTextareaComponent, selector: "cide-ele-textarea", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "minlength", "maxlength", "rows", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput"], outputs: ["ngModelChange"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip", "name"] }, { kind: "component", type: CideEleDropdownComponent, selector: "cide-ele-dropdown", inputs: ["items", "config", "triggerTemplate", "menuTemplate"], outputs: ["itemClick", "dropdownToggle"] }, { kind: "component", type: CideLytSharedWrapperComponent, selector: "cide-lyt-shared-wrapper", inputs: ["shared_wrapper_setup_param", "breadcrumb_data"] }, { kind: "component", type: CideEleConfirmationModalComponent, selector: "cide-ele-confirmation-modal" }] });
|
|
5999
5999
|
}
|
|
6000
6000
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideCoreGradeLevelListComponent, decorators: [{
|
|
6001
6001
|
type: Component,
|
|
@@ -6011,7 +6011,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
6011
6011
|
CideEleDropdownComponent,
|
|
6012
6012
|
CideLytSharedWrapperComponent,
|
|
6013
6013
|
CideEleConfirmationModalComponent
|
|
6014
|
-
], template: "<!-- Grade Level List with Shared Wrapper -->\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'core_grade_level_list' }\">\n<div class=\"tw-table tw-w-full tw-h-full\">\n\n <!-- Quick Add Form Section - Show if user has VIEW, CREATE, or EDIT rights -->\n @if (canView() || canCreate() || canEdit()) {\n <div class=\"tw-table-row tw-h-0\">\n <div class=\"tw-table-cell tw-px-6 tw-py-4 tw-border-b tw-border-gray-200 tw-bg-white\">\n <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\n <div class=\"tw-flex tw-items-center tw-space-x-3\">\n <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\n <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-m-0\">{{ isEditMode() ? 'Edit Grade Level' : 'Quick\n Add Grade Level' }}</h6>\n </div>\n </div>\n \n <form [formGroup]=\"quickAddForm\" (ngSubmit)=\"quickAddGradeLevel()\">\n <!-- First Row -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-3 tw-mb-3\">\n <!-- Grade Level Name -->\n <div>\n <cide-ele-input \n id=\"sydsgl_name\" \n label=\"Name\" \n formControlName=\"sydsgl_name\"\n placeholder=\"Grade level name\"\n size=\"sm\">\n </cide-ele-input>\n </div>\n \n <!-- Active Status -->\n <div class=\"tw-flex tw-flex-col tw-justify-end\">\n <cide-ele-input \n id=\"sydsgl_isactive\"\n type=\"checkbox\"\n label=\"Active\"\n formControlName=\"sydsgl_isactive\"\n size=\"sm\">\n </cide-ele-input>\n </div>\n </div>\n \n <!-- Second Row -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-3 tw-items-end\">\n <!-- Description -->\n <div>\n <cide-ele-textarea id=\"sydsgl_description\" label=\"Description\" formControlName=\"sydsgl_description\"\n placeholder=\"Grade level description\" rows=\"2\" [disabled]=\"canView() && !canCreate() && !canEdit()\" size=\"sm\">\n </cide-ele-textarea>\n </div>\n \n <!-- Entity ID (Hidden) -->\n <div class=\"tw-hidden\">\n <cide-ele-input \n id=\"sydsgl_entity_id_syen\" \n label=\"Entity ID\" \n formControlName=\"sydsgl_entity_id_syen\"\n placeholder=\"Entity ID\"\n size=\"sm\">\n </cide-ele-input>\n </div>\n \n <!-- Action Buttons -->\n <div class=\"tw-flex tw-flex-col tw-justify-end\">\n <div class=\"tw-flex tw-space-x-2\">\n <button \n cideEleButton \n variant=\"primary\" \n size=\"
|
|
6014
|
+
], template: "<!-- Grade Level List with Shared Wrapper -->\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'core_grade_level_list' }\">\n<div class=\"tw-table tw-w-full tw-h-full\">\n\n <!-- Quick Add Form Section - Show if user has VIEW, CREATE, or EDIT rights -->\n @if (canView() || canCreate() || canEdit()) {\n <div class=\"tw-table-row tw-h-0\">\n <div class=\"tw-table-cell tw-px-6 tw-py-4 tw-border-b tw-border-gray-200 tw-bg-white\">\n <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\n <div class=\"tw-flex tw-items-center tw-space-x-3\">\n <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\n <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-m-0\">{{ isEditMode() ? 'Edit Grade Level' : 'Quick\n Add Grade Level' }}</h6>\n </div>\n </div>\n \n <form [formGroup]=\"quickAddForm\" (ngSubmit)=\"quickAddGradeLevel()\">\n <!-- First Row -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-3 tw-mb-3\">\n <!-- Grade Level Name -->\n <div>\n <cide-ele-input \n id=\"sydsgl_name\" \n label=\"Name\" \n formControlName=\"sydsgl_name\"\n placeholder=\"Grade level name\"\n size=\"sm\">\n </cide-ele-input>\n </div>\n \n <!-- Active Status -->\n <div class=\"tw-flex tw-flex-col tw-justify-end\">\n <cide-ele-input \n id=\"sydsgl_isactive\"\n type=\"checkbox\"\n label=\"Active\"\n formControlName=\"sydsgl_isactive\"\n size=\"sm\">\n </cide-ele-input>\n </div>\n </div>\n \n <!-- Second Row -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-3 tw-items-end\">\n <!-- Description -->\n <div>\n <cide-ele-textarea id=\"sydsgl_description\" label=\"Description\" formControlName=\"sydsgl_description\"\n placeholder=\"Grade level description\" rows=\"2\" [disabled]=\"canView() && !canCreate() && !canEdit()\" size=\"sm\">\n </cide-ele-textarea>\n </div>\n \n <!-- Entity ID (Hidden) -->\n <div class=\"tw-hidden\">\n <cide-ele-input \n id=\"sydsgl_entity_id_syen\" \n label=\"Entity ID\" \n formControlName=\"sydsgl_entity_id_syen\"\n placeholder=\"Entity ID\"\n size=\"sm\">\n </cide-ele-input>\n </div>\n \n <!-- Action Buttons -->\n <div class=\"tw-flex tw-flex-col tw-justify-end\">\n <div class=\"tw-flex tw-space-x-2\">\n <button \n cideEleButton \n variant=\"primary\" \n size=\"xs\" \n type=\"submit\"\n [disabled]=\"quickAddForm.invalid\"\n class=\"tw-px-2 tw-py-1 tw-w-20\">\n <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\n {{ isEditMode() ? 'Update' : 'Add' }}\n </button>\n <button \n cideEleButton \n variant=\"outline\" \n size=\"xs\" \n type=\"button\"\n (click)=\"resetQuickAddForm()\"\n class=\"tw-px-2 tw-py-1 tw-w-16\">\n <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">refresh</cide-ele-icon>\n Reset\n </button>\n </div>\n </div>\n </div>\n </form>\n </div>\n </div>\n }\n\n <!-- Main Content Area -->\n <div class=\"tw-table-row\">\n <div class=\"tw-table-cell tw-h-full tw-relative\">\n \n <!-- Data Grid Component -->\n <div class=\"tw-h-full tw-overflow-auto\">\n \n <cide-ele-data-grid \n [config]=\"gridConfig()\" \n [templateRenderers]=\"getTemplateRenderers()\"\n [actionHandlers]=\"actionHandlers\"\n [serverSidePagination]=\"true\" \n [totalServerItems]=\"totalItems()\" \n [currentServerPage]=\"currentPage()\"\n [currentServerPageSize]=\"pageSize()\" \n [dragDropEnabled]=\"true\"\n (gridEvent)=\"onGridEvent($event)\">\n </cide-ele-data-grid>\n </div>\n\n </div>\n </div>\n\n</div>\n\n<!-- Drag Handle Renderer Template -->\n<ng-template #dragHandleRendererTemplate let-row=\"row\" let-value=\"value\">\n <div class=\"tw-flex tw-items-center tw-justify-center tw-w-full tw-h-full tw-cursor-move drag-handle\">\n <cide-ele-icon \n class=\"tw-text-gray-400 hover:tw-text-gray-600 tw-transition-colors\" \n size=\"xs\">\n drag_indicator\n </cide-ele-icon>\n </div>\n</ng-template>\n\n<!-- Grade Level Details Renderer Template -->\n<ng-template #gradeLevelDetailsRendererTemplate let-row=\"row\" let-value=\"value\">\n <div class=\"tw-flex tw-items-center tw-min-w-0\">\n <!-- Grade Level Icon -->\n <div class=\"tw-flex-shrink-0\">\n <cide-ele-icon \n class=\"tw-text-gray-400\" \n size=\"xs\">\n school\n </cide-ele-icon>\n </div>\n \n <!-- Grade Level Details -->\n <div class=\"tw-ml-3 tw-min-w-0 tw-flex-1\">\n <div class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-truncate\" \n [title]=\"row.sydsgl_name\">\n {{ row.sydsgl_name || 'Untitled' }}\n </div>\n @if (row.sydsgl_description) {\n <div class=\"tw-text-xs tw-text-gray-500 tw-truncate\" \n [title]=\"row.sydsgl_description\">\n {{ row.sydsgl_description }}\n </div>\n }\n </div>\n </div>\n</ng-template>\n\n<!-- Grade Level Status Renderer Template -->\n<ng-template #gradeLevelStatusRendererTemplate let-row=\"row\" let-value=\"value\">\n <span class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-whitespace-nowrap\"\n [ngClass]=\"getStatusClass(row.sydsgl_isactive)\">\n {{ getStatusDisplay(row.sydsgl_isactive) }}\n </span>\n</ng-template>\n\n<!-- Actions Dropdown Renderer Template -->\n<ng-template #actionsDropdownRendererTemplate let-row=\"row\" let-value=\"value\">\n <cide-ele-dropdown \n [items]=\"getDropdownItems(row)\"\n [config]=\"{ triggerIcon: 'more_vert', triggerSize: 'sm' }\"\n (itemClick)=\"onDropdownItemClick($event, row)\">\n </cide-ele-dropdown>\n</ng-template>\n\n<!-- Confirmation Modal -->\n</cide-lyt-shared-wrapper>\n<cide-ele-confirmation-modal></cide-ele-confirmation-modal> " }]
|
|
6015
6015
|
}], ctorParameters: () => [], propDecorators: { dragHandleRendererTemplate: [{ type: i0.ViewChild, args: ['dragHandleRendererTemplate', { isSignal: true }] }], gradeLevelDetailsRendererTemplate: [{ type: i0.ViewChild, args: ['gradeLevelDetailsRendererTemplate', { isSignal: true }] }], gradeLevelStatusRendererTemplate: [{ type: i0.ViewChild, args: ['gradeLevelStatusRendererTemplate', { isSignal: true }] }], actionsDropdownRendererTemplate: [{ type: i0.ViewChild, args: ['actionsDropdownRendererTemplate', { isSignal: true }] }] } });
|
|
6016
6016
|
|
|
6017
6017
|
var gradeLevelList_component = /*#__PURE__*/Object.freeze({
|
|
@@ -6424,7 +6424,7 @@ class CideCorePageListComponent {
|
|
|
6424
6424
|
document.dispatchEvent(event);
|
|
6425
6425
|
}
|
|
6426
6426
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideCorePageListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6427
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: CideCorePageListComponent, isStandalone: true, selector: "cide-core-page-list", viewQueries: [{ propertyName: "pageDetailsRendererTemplate", first: true, predicate: ["pageDetailsRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "pageStatusRendererTemplate", first: true, predicate: ["pageStatusRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "actionsDropdownRendererTemplate", first: true, predicate: ["actionsDropdownRendererTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Page List with Shared Wrapper -->\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'core_page_list' }\">\n<div class=\"tw-table tw-w-full tw-h-full\">\n\n <!-- Header Section with Filters -->\n <div class=\"tw-table-row tw-h-0\">\n <div class=\"tw-table-cell tw-px-6 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\n <div class=\"tw-flex tw-flex-col sm:tw-flex-row tw-justify-between tw-items-start sm:tw-items-center tw-space-y-3 sm:tw-space-y-0\">\n\n <!-- Title -->\n <div class=\"tw-flex tw-items-center tw-space-x-2\">\n <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">web</cide-ele-icon>\n <h5 class=\"tw-text-base tw-font-medium tw-text-gray-900 tw-m-0\">Page Management</h5>\n </div>\n\n <!-- Actions -->\n <div class=\"tw-flex tw-flex-col sm:tw-flex-row tw-items-start sm:tw-items-center tw-space-y-3 sm:tw-space-y-0 sm:tw-space-x-3\">\n <!-- Add Page Button -->\n @if (canCreate()) {\n <button\n cideEleButton\n variant=\"primary\"\n size=\"
|
|
6427
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: CideCorePageListComponent, isStandalone: true, selector: "cide-core-page-list", viewQueries: [{ propertyName: "pageDetailsRendererTemplate", first: true, predicate: ["pageDetailsRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "pageStatusRendererTemplate", first: true, predicate: ["pageStatusRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "actionsDropdownRendererTemplate", first: true, predicate: ["actionsDropdownRendererTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Page List with Shared Wrapper -->\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'core_page_list' }\">\n<div class=\"tw-table tw-w-full tw-h-full\">\n\n <!-- Header Section with Filters -->\n <div class=\"tw-table-row tw-h-0\">\n <div class=\"tw-table-cell tw-px-6 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\n <div class=\"tw-flex tw-flex-col sm:tw-flex-row tw-justify-between tw-items-start sm:tw-items-center tw-space-y-3 sm:tw-space-y-0\">\n\n <!-- Title -->\n <div class=\"tw-flex tw-items-center tw-space-x-2\">\n <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">web</cide-ele-icon>\n <h5 class=\"tw-text-base tw-font-medium tw-text-gray-900 tw-m-0\">Page Management</h5>\n </div>\n\n <!-- Actions -->\n <div class=\"tw-flex tw-flex-col sm:tw-flex-row tw-items-start sm:tw-items-center tw-space-y-3 sm:tw-space-y-0 sm:tw-space-x-3\">\n <!-- Add Page Button -->\n @if (canCreate()) {\n <button\n cideEleButton\n variant=\"primary\"\n size=\"xs\"\n (click)=\"createPage()\"\n leftIcon=\"add\"\n class=\"tw-whitespace-nowrap tw-flex tw-items-center tw-gap-2\">\n Create New Page\n </button>\n }\n </div>\n </div>\n\n <!-- Error Message -->\n @if (error()) {\n <div class=\"tw-mt-4 tw-p-4 tw-bg-red-50 tw-border tw-border-red-200 tw-rounded-md\">\n <div class=\"tw-flex tw-items-start\">\n <cide-ele-icon class=\"tw-text-red-400 tw-w-5 tw-h-5 tw-mt-0.5 tw-flex-shrink-0\">error</cide-ele-icon>\n <div class=\"tw-ml-3\">\n <h3 class=\"tw-text-sm tw-font-medium tw-text-red-800 tw-m-0\">Error</h3>\n <p class=\"tw-text-sm tw-text-red-700 tw-mt-1 tw-m-0\">{{ error() }}</p>\n </div>\n </div>\n </div>\n }\n </div>\n </div>\n\n <!-- Main Content Area -->\n <div class=\"tw-table-row\">\n <div class=\"tw-table-cell tw-h-full tw-relative\">\n \n <!-- Data Grid Component -->\n <div class=\"tw-h-full tw-overflow-auto\">\n <cide-ele-data-grid\n [config]=\"gridConfig()\"\n [templateRenderers]=\"getTemplateRenderers()\"\n [actionHandlers]=\"actionHandlers\"\n [serverSidePagination]=\"true\"\n [totalServerItems]=\"totalItems()\"\n [currentServerPage]=\"currentPage()\"\n [currentServerPageSize]=\"pageSize()\"\n (gridEvent)=\"onGridEvent($event)\">\n </cide-ele-data-grid>\n </div>\n\n </div>\n </div>\n\n</div>\n\n<!-- Page Details Renderer Template -->\n<ng-template #pageDetailsRendererTemplate let-row=\"row\" let-value=\"value\">\n <div class=\"tw-flex tw-items-center tw-min-w-0\">\n <!-- Page Icon -->\n <div class=\"tw-flex-shrink-0\">\n <cide-ele-icon class=\"tw-text-gray-400 tw-w-4 tw-h-4\">web</cide-ele-icon>\n </div>\n \n <!-- Page Details -->\n <div class=\"tw-ml-3 tw-min-w-0 tw-flex-1\">\n <div class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-truncate\" \n [title]=\"row.sypg_title\">\n {{ row.sypg_title || 'Untitled' }}\n </div>\n @if (row.sypg_desc) {\n <div class=\"tw-text-xs tw-text-gray-500 tw-truncate\" \n [title]=\"row.sypg_desc\">\n {{ row.sypg_desc }}\n </div>\n }\n </div>\n </div>\n</ng-template>\n\n<!-- Page Status Renderer Template -->\n<ng-template #pageStatusRendererTemplate let-row=\"row\" let-value=\"value\">\n <span class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-whitespace-nowrap\"\n [ngClass]=\"row.sypg_isactive ? 'tw-bg-green-100 tw-text-green-800' : 'tw-bg-red-100 tw-text-red-800'\">\n {{ row.sypg_isactive ? 'Active' : 'Inactive' }}\n </span>\n</ng-template>\n\n<!-- Actions Dropdown Renderer Template -->\n<ng-template #actionsDropdownRendererTemplate let-row=\"row\" let-value=\"value\">\n <cide-ele-dropdown\n [items]=\"getActionDropdownItems(row)\"\n [config]=\"{ triggerIcon: 'more_vert', triggerSize: 'sm' }\"\n (itemClick)=\"onDropdownItemClick($event, row)\">\n </cide-ele-dropdown>\n</ng-template>\n</cide-lyt-shared-wrapper> ", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: CideEleDataGridComponent, selector: "cide-ele-data-grid", inputs: ["config", "templateRenderers", "customFormatters", "actionHandlers", "serverSidePagination", "totalServerItems", "currentServerPage", "currentServerPageSize", "dragDropEnabled"], outputs: ["gridEvent"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated", "adaptive"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip", "name"] }, { 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"] }] });
|
|
6428
6428
|
}
|
|
6429
6429
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideCorePageListComponent, decorators: [{
|
|
6430
6430
|
type: Component,
|
|
@@ -6435,7 +6435,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
6435
6435
|
CideIconComponent,
|
|
6436
6436
|
CideEleDropdownComponent,
|
|
6437
6437
|
CideLytSharedWrapperComponent
|
|
6438
|
-
], template: "<!-- Page List with Shared Wrapper -->\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'core_page_list' }\">\n<div class=\"tw-table tw-w-full tw-h-full\">\n\n <!-- Header Section with Filters -->\n <div class=\"tw-table-row tw-h-0\">\n <div class=\"tw-table-cell tw-px-6 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\n <div class=\"tw-flex tw-flex-col sm:tw-flex-row tw-justify-between tw-items-start sm:tw-items-center tw-space-y-3 sm:tw-space-y-0\">\n\n <!-- Title -->\n <div class=\"tw-flex tw-items-center tw-space-x-2\">\n <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">web</cide-ele-icon>\n <h5 class=\"tw-text-base tw-font-medium tw-text-gray-900 tw-m-0\">Page Management</h5>\n </div>\n\n <!-- Actions -->\n <div class=\"tw-flex tw-flex-col sm:tw-flex-row tw-items-start sm:tw-items-center tw-space-y-3 sm:tw-space-y-0 sm:tw-space-x-3\">\n <!-- Add Page Button -->\n @if (canCreate()) {\n <button\n cideEleButton\n variant=\"primary\"\n size=\"
|
|
6438
|
+
], template: "<!-- Page List with Shared Wrapper -->\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'core_page_list' }\">\n<div class=\"tw-table tw-w-full tw-h-full\">\n\n <!-- Header Section with Filters -->\n <div class=\"tw-table-row tw-h-0\">\n <div class=\"tw-table-cell tw-px-6 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\n <div class=\"tw-flex tw-flex-col sm:tw-flex-row tw-justify-between tw-items-start sm:tw-items-center tw-space-y-3 sm:tw-space-y-0\">\n\n <!-- Title -->\n <div class=\"tw-flex tw-items-center tw-space-x-2\">\n <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">web</cide-ele-icon>\n <h5 class=\"tw-text-base tw-font-medium tw-text-gray-900 tw-m-0\">Page Management</h5>\n </div>\n\n <!-- Actions -->\n <div class=\"tw-flex tw-flex-col sm:tw-flex-row tw-items-start sm:tw-items-center tw-space-y-3 sm:tw-space-y-0 sm:tw-space-x-3\">\n <!-- Add Page Button -->\n @if (canCreate()) {\n <button\n cideEleButton\n variant=\"primary\"\n size=\"xs\"\n (click)=\"createPage()\"\n leftIcon=\"add\"\n class=\"tw-whitespace-nowrap tw-flex tw-items-center tw-gap-2\">\n Create New Page\n </button>\n }\n </div>\n </div>\n\n <!-- Error Message -->\n @if (error()) {\n <div class=\"tw-mt-4 tw-p-4 tw-bg-red-50 tw-border tw-border-red-200 tw-rounded-md\">\n <div class=\"tw-flex tw-items-start\">\n <cide-ele-icon class=\"tw-text-red-400 tw-w-5 tw-h-5 tw-mt-0.5 tw-flex-shrink-0\">error</cide-ele-icon>\n <div class=\"tw-ml-3\">\n <h3 class=\"tw-text-sm tw-font-medium tw-text-red-800 tw-m-0\">Error</h3>\n <p class=\"tw-text-sm tw-text-red-700 tw-mt-1 tw-m-0\">{{ error() }}</p>\n </div>\n </div>\n </div>\n }\n </div>\n </div>\n\n <!-- Main Content Area -->\n <div class=\"tw-table-row\">\n <div class=\"tw-table-cell tw-h-full tw-relative\">\n \n <!-- Data Grid Component -->\n <div class=\"tw-h-full tw-overflow-auto\">\n <cide-ele-data-grid\n [config]=\"gridConfig()\"\n [templateRenderers]=\"getTemplateRenderers()\"\n [actionHandlers]=\"actionHandlers\"\n [serverSidePagination]=\"true\"\n [totalServerItems]=\"totalItems()\"\n [currentServerPage]=\"currentPage()\"\n [currentServerPageSize]=\"pageSize()\"\n (gridEvent)=\"onGridEvent($event)\">\n </cide-ele-data-grid>\n </div>\n\n </div>\n </div>\n\n</div>\n\n<!-- Page Details Renderer Template -->\n<ng-template #pageDetailsRendererTemplate let-row=\"row\" let-value=\"value\">\n <div class=\"tw-flex tw-items-center tw-min-w-0\">\n <!-- Page Icon -->\n <div class=\"tw-flex-shrink-0\">\n <cide-ele-icon class=\"tw-text-gray-400 tw-w-4 tw-h-4\">web</cide-ele-icon>\n </div>\n \n <!-- Page Details -->\n <div class=\"tw-ml-3 tw-min-w-0 tw-flex-1\">\n <div class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-truncate\" \n [title]=\"row.sypg_title\">\n {{ row.sypg_title || 'Untitled' }}\n </div>\n @if (row.sypg_desc) {\n <div class=\"tw-text-xs tw-text-gray-500 tw-truncate\" \n [title]=\"row.sypg_desc\">\n {{ row.sypg_desc }}\n </div>\n }\n </div>\n </div>\n</ng-template>\n\n<!-- Page Status Renderer Template -->\n<ng-template #pageStatusRendererTemplate let-row=\"row\" let-value=\"value\">\n <span class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-whitespace-nowrap\"\n [ngClass]=\"row.sypg_isactive ? 'tw-bg-green-100 tw-text-green-800' : 'tw-bg-red-100 tw-text-red-800'\">\n {{ row.sypg_isactive ? 'Active' : 'Inactive' }}\n </span>\n</ng-template>\n\n<!-- Actions Dropdown Renderer Template -->\n<ng-template #actionsDropdownRendererTemplate let-row=\"row\" let-value=\"value\">\n <cide-ele-dropdown\n [items]=\"getActionDropdownItems(row)\"\n [config]=\"{ triggerIcon: 'more_vert', triggerSize: 'sm' }\"\n (itemClick)=\"onDropdownItemClick($event, row)\">\n </cide-ele-dropdown>\n</ng-template>\n</cide-lyt-shared-wrapper> " }]
|
|
6439
6439
|
}], ctorParameters: () => [], propDecorators: { pageDetailsRendererTemplate: [{ type: i0.ViewChild, args: ['pageDetailsRendererTemplate', { isSignal: true }] }], pageStatusRendererTemplate: [{ type: i0.ViewChild, args: ['pageStatusRendererTemplate', { isSignal: true }] }], actionsDropdownRendererTemplate: [{ type: i0.ViewChild, args: ['actionsDropdownRendererTemplate', { isSignal: true }] }] } });
|
|
6440
6440
|
|
|
6441
6441
|
var pageList_component = /*#__PURE__*/Object.freeze({
|
|
@@ -7311,7 +7311,7 @@ class CideCorePageThemeComponent {
|
|
|
7311
7311
|
console.log('Preview image upload progress:', progress + '%');
|
|
7312
7312
|
}
|
|
7313
7313
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideCorePageThemeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7314
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: CideCorePageThemeComponent, isStandalone: true, selector: "cide-core-page-theme", viewQueries: [{ propertyName: "themeDetailsRendererTemplate", first: true, predicate: ["themeDetailsRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "themeStatusRendererTemplate", first: true, predicate: ["themeStatusRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "actionsDropdownRendererTemplate", first: true, predicate: ["actionsDropdownRendererTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Page Theme Container -->\n<div class=\"tw-flex tw-h-full tw-w-full\">\n \n <!-- Left: Form and header (60%) -->\n <div class=\"tw-w-full lg:tw-w-3/5 tw-flex tw-flex-col tw-border-r tw-border-gray-200\">\n\n <!-- Header Section -->\n <div class=\"tw-px-6 tw-py-2 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\n <div class=\"tw-flex tw-flex-col sm:tw-flex-row tw-justify-between tw-items-start sm:tw-items-center tw-space-y-2 sm:tw-space-y-0\">\n\n <!-- Title and Back Button -->\n <div class=\"tw-flex tw-items-center tw-space-x-4\">\n <button cideEleButton variant=\"ghost\" size=\"sm\" (click)=\"goBack();\" class=\"tw-text-gray-600 hover:tw-text-gray-900\">\n <cide-ele-icon class=\"tw-w-4 tw-h-4\">arrow_back</cide-ele-icon>\n </button>\n <div class=\"tw-flex tw-items-center tw-space-x-2\">\n <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">palette</cide-ele-icon>\n <div>\n <h5 class=\"tw-text-base tw-font-medium tw-text-gray-900 tw-m-0\">Theme Management</h5>\n <p class=\"tw-text-sm tw-text-gray-500 tw-m-0\">Page: {{ pageTitle() }}</p>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Error Message -->\n @if (error()) {\n <div class=\"tw-mt-4 tw-p-4 tw-bg-red-50 tw-border tw-border-red-200 tw-rounded-md\">\n <div class=\"tw-flex tw-items-start\">\n <cide-ele-icon name=\"error\" class=\"tw-text-red-400 tw-w-5 tw-h-5 tw-mt-0.5 tw-flex-shrink-0\"></cide-ele-icon>\n <div class=\"tw-ml-3\">\n <h3 class=\"tw-text-sm tw-font-medium tw-text-red-800 tw-m-0\">Error</h3>\n <p class=\"tw-text-sm tw-text-red-700 tw-mt-1 tw-m-0\">{{ error() }}</p>\n </div>\n </div>\n </div>\n }\n </div>\n\n <!-- Quick Add/Edit Form Section -->\n <div class=\"tw-px-6 tw-py-3 tw-bg-white tw-overflow-auto\">\n <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-2\">\n <div class=\"tw-flex tw-items-center tw-space-x-3\">\n <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\n <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-m-0\">{{ isEditMode() ? 'Edit Theme' : 'Quick Add Theme' }}</h6>\n </div>\n </div>\n\n <!-- Form (kept as-is) -->\n <form [formGroup]=\"themeForm\" (ngSubmit)=\"saveTheme()\" class=\"tw-space-y-4\">\n <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-[1fr_200px] tw-gap-4\">\n <!-- Left Side: All Input Fields -->\n <div class=\"tw-space-y-4\">\n <!-- Row 1: Theme Title and Theme Code -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\n <div class=\"tw-space-y-2\">\n <cide-ele-input id=\"sytm_title\" formControlName=\"sytm_title\" placeholder=\"Enter theme title\" label=\"Theme Title\" size=\"sm\"></cide-ele-input>\n </div>\n <div class=\"tw-space-y-2\">\n <cide-ele-input id=\"sytm_theme_code\" formControlName=\"sytm_theme_code\" placeholder=\"Enter theme code\" label=\"Theme Code\" size=\"sm\"></cide-ele-input>\n </div>\n </div>\n \n <!-- Row 2: Sub Title and Active Status -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\n <div class=\"tw-space-y-2\">\n <cide-ele-input id=\"sytm_sub_title\" formControlName=\"sytm_sub_title\" placeholder=\"Enter sub title\" label=\"Sub Title\" size=\"sm\"></cide-ele-input>\n </div>\n <div class=\"tw-space-y-2 tw-flex tw-items-center\">\n <cide-ele-input\n id=\"sytm_isactive_cb\"\n type=\"checkbox\"\n label=\"Active\"\n size=\"sm\"\n formControlName=\"sytm_isactive\">\n </cide-ele-input>\n </div>\n </div>\n \n <!-- Row 3: Description -->\n <div class=\"tw-space-y-2\">\n <cide-ele-textarea id=\"sytm_desc\" formControlName=\"sytm_desc\" placeholder=\"Enter theme description\" rows=\"2\" label=\"Description\" size=\"sm\"></cide-ele-textarea>\n </div>\n </div>\n \n <!-- Right Side: File Upload -->\n <div class=\"tw-flex tw-flex-col tw-justify-start tw-items-center tw-p-0\">\n <cide-ele-file-input \n id=\"sytm_preview_id_fm\" \n formControlName=\"sytm_preview_id_fm\"\n accept=\"image/*\"\n [showPreview]=\"true\"\n [previewBoxMode]=\"true\"\n [showFileName]=\"false\"\n previewWidth=\"180px\"\n previewHeight=\"120px\"\n placeholderText=\"Upload Preview Image\"\n placeholderIcon=\"image\"\n [autoUpload]=\"true\"\n [uploadData]=\"getPreviewImageUploadData()\"\n (uploadSuccess)=\"onPreviewImageUploadSuccess($event)\"\n (uploadError)=\"onPreviewImageUploadError($event)\"\n (uploadProgressChange)=\"onPreviewImageUploadProgress($event)\">\n </cide-ele-file-input>\n </div>\n </div>\n \n <!-- Configuration JSON -->\n <div class=\"tw-space-y-2\">\n <cide-ele-json-editor label=\"Configuration JSON\" formControlName=\"sytm_configuration\" [required]=\"true\" [config]=\"{\n showLineNumbers: true,\n autoFormat: true,\n validateOnChange: true,\n minHeight: 150,\n maxHeight: 300,\n placeholder: 'Enter theme configuration JSON...'\n }\" helperText=\"Enter valid JSON configuration for the theme\"></cide-ele-json-editor>\n </div>\n <!-- Layout Configuration + Selection -->\n <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-2 tw-gap-6\">\n <div class=\"tw-space-y-2\">\n <div class=\"tw-text-sm tw-font-medium tw-text-gray-700\">Layout & Selection</div>\n <!-- Selected toggle -->\n <div class=\"tw-bg-white tw-border tw-border-gray-200 tw-rounded-md tw-px-3 tw-py-2\">\n <cide-ele-input\n id=\"sytm_isselected\"\n type=\"checkbox\"\n label=\"Selected (Default)\"\n size=\"sm\"\n formControlName=\"sytm_isselected\">\n </cide-ele-input>\n </div>\n <div formGroupName=\"sytm_layout\" class=\"tw-bg-white tw-border tw-border-gray-200 tw-rounded-md tw-divide-y tw-overflow-hidden\">\n <!-- Sidebar -->\n <div class=\"tw-px-3 tw-py-2\" formGroupName=\"sytm_layout_sidebar\">\n <cide-ele-input id=\"layout_sidebar_status\" type=\"checkbox\" label=\"Sidebar\" size=\"sm\" formControlName=\"status\"></cide-ele-input>\n </div>\n <!-- Header -->\n <div class=\"tw-px-3 tw-py-2\" formGroupName=\"sytm_layout_header\">\n <cide-ele-input id=\"layout_header_status\" type=\"checkbox\" label=\"Header\" size=\"sm\" formControlName=\"status\"></cide-ele-input>\n </div>\n <!-- Footer -->\n <div class=\"tw-px-3 tw-py-2\" formGroupName=\"sytm_layout_footer\">\n <cide-ele-input id=\"layout_footer_status\" type=\"checkbox\" label=\"Footer\" size=\"sm\" formControlName=\"status\"></cide-ele-input>\n </div>\n <!-- Breadcrumb -->\n <div class=\"tw-px-3 tw-py-2\" formGroupName=\"sytm_layout_breadcrumb\">\n <cide-ele-input id=\"layout_breadcrumb_status\" type=\"checkbox\" label=\"Breadcrumb\" size=\"sm\" formControlName=\"status\"></cide-ele-input>\n </div>\n <!-- Console -->\n <div class=\"tw-px-3 tw-py-2\" formGroupName=\"sytm_layout_console\">\n <cide-ele-input id=\"layout_console_status\" type=\"checkbox\" label=\"Console\" size=\"sm\" formControlName=\"status\"></cide-ele-input>\n </div>\n <!-- Request -->\n <div class=\"tw-px-3 tw-py-2\" formGroupName=\"sytm_layout_request\">\n <cide-ele-input id=\"layout_request_status\" type=\"checkbox\" label=\"Request\" size=\"sm\" formControlName=\"status\"></cide-ele-input>\n </div>\n </div>\n <p class=\"tw-text-xs tw-text-gray-500 tw-pt-1\">Toggle active sections. Only one theme can be selected as default. More options can be added here later.</p>\n </div>\n \n <!-- Drawer Configuration -->\n <div class=\"tw-space-y-2\">\n <div class=\"tw-flex tw-items-center tw-justify-between\">\n <div class=\"tw-text-sm tw-font-medium tw-text-gray-700\">Drawers</div>\n <button cideEleButton type=\"button\" size=\"xs\" variant=\"outline\" (click)=\"addDrawer()\">\n Add Drawer\n </button>\n </div>\n\n <div formGroupName=\"sytm_layout\">\n <div class=\"tw-space-y-2\" formArrayName=\"sytm_layout_drawer\">\n <div *ngFor=\"let drawerGrp of drawerArray.controls; let i = index\" [formGroupName]=\"i\" class=\"tw-border tw-border-gray-200 tw-rounded-md tw-p-3 tw-flex tw-items-center tw-gap-3\">\n <cide-ele-input id=\"drawer_active_{{i}}\" type=\"checkbox\" label=\"Active\" size=\"sm\" formControlName=\"syth_status\"></cide-ele-input>\n <div class=\"tw-flex-1\">\n <cide-ele-select\n id=\"drawer_config_{{i}}\"\n label=\"Drawer For\"\n size=\"sm\"\n [options]=\"drawerConfigOptions\"\n formControlName=\"syth_config_syco_for\">\n </cide-ele-select>\n </div>\n <button cideEleButton type=\"button\" size=\"xs\" variant=\"ghost\" (click)=\"removeDrawer(i)\">\n <cide-ele-icon class=\"tw-w-4 tw-h-4\">delete</cide-ele-icon>\n </button>\n </div>\n <p class=\"tw-text-xs tw-text-gray-500\">Configure multiple drawers as needed.</p>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Form Actions -->\n <div class=\"tw-flex tw-flex-col tw-gap-2 tw-pt-4 tw-border-t tw-border-gray-200\">\n <div class=\"tw-flex tw-items-center tw-justify-end tw-space-x-3\">\n <button cideEleButton type=\"button\" variant=\"outline\" (click)=\"cancelForm()\" [disabled]=\"loading()\">Cancel</button>\n <button cideEleButton type=\"submit\" variant=\"primary\" leftIcon=\"add\" [disabled]=\"!themeForm.valid || loading()\" [loading]=\"loading()\">\n {{ isEditMode() ? 'Update Theme' : 'Create Theme' }}\n </button>\n </div>\n </div>\n </form>\n </div>\n </div>\n\n <!-- Right: Theme gallery (40%) -->\n <div class=\"tw-hidden lg:tw-flex tw-w-2/5 tw-flex-col\">\n <!-- (Header consolidated above) -->\n\n <!-- Gallery list -->\n <div class=\"tw-flex-1 tw-overflow-auto tw-bg-gray-50\">\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3 tw-p-4\">\n @for (theme of filteredThemes(); track theme._id) {\n <div class=\"tw-rounded-md tw-transition tw-cursor-pointer tw-relative\"\n [ngClass]=\"theme.sytm_isselected\n ? 'tw-border tw-border-blue-500 tw-ring-2 tw-ring-blue-200 tw-bg-blue-50/50'\n : 'tw-bg-white tw-border tw-border-gray-200 hover:tw-shadow-sm'\"\n (click)=\"editTheme(theme)\"\n role=\"button\"\n tabindex=\"0\"\n [attr.aria-selected]=\"theme.sytm_isselected ? 'true' : 'false'\"\n [attr.aria-label]=\"'Edit theme ' + (theme.sytm_title || theme.sytm_theme_code)\"\n (keydown.enter)=\"editTheme(theme)\"\n (keydown.space)=\"$event.preventDefault(); editTheme(theme)\">\n\n <!-- Selected badge -->\n <div *ngIf=\"theme.sytm_isselected\"\n class=\"tw-absolute tw-top-2 tw-right-2 tw-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-rounded-full tw-bg-blue-600 tw-text-white\">\n <cide-ele-icon class=\"tw-w-4 tw-h-4\">check</cide-ele-icon>\n </div>\n \n <div class=\"tw-aspect-[16/9] tw-bg-gray-100 tw-rounded-t-md tw-overflow-hidden tw-flex tw-items-center tw-justify-center\">\n @if (theme.sytm_preview_id_fm) {\n <img \n cideEleFileImage \n [fileId]=\"theme.sytm_preview_id_fm\" \n [altText]=\"'Theme Preview'\"\n class=\"tw-w-full tw-h-full tw-object-cover\" />\n } @else {\n <div class=\"tw-text-gray-400 tw-text-xs\">No preview</div>\n }\n </div>\n <div class=\"tw-p-3 tw-space-y-1\">\n <div class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-truncate\" [title]=\"theme.sytm_title\">{{ theme.sytm_title || 'Untitled Theme' }}</div>\n <div class=\"tw-text-xs tw-text-gray-500 tw-truncate\" [title]=\"theme.sytm_theme_code\">{{ theme.sytm_theme_code }}</div>\n <div class=\"tw-flex tw-items-center tw-justify-between tw-pt-1\">\n <span class=\"tw-inline-flex tw-items-center tw-gap-1 tw-text-xs\" [ngClass]=\"theme.sytm_isactive ? 'tw-text-green-700' : 'tw-text-red-700'\">\n <span class=\"tw-w-1.5 tw-h-1.5 tw-rounded-full\" [ngClass]=\"theme.sytm_isactive ? 'tw-bg-green-500' : 'tw-bg-red-500'\"></span>\n {{ theme.sytm_isactive ? 'Active' : 'Inactive' }}\n </span>\n <div class=\"tw-flex tw-items-center tw-gap-1\">\n <!-- Set Selected Button - Clear and Simple -->\n @if (theme.sytm_isselected) {\n <span class=\"tw-inline-flex tw-items-center tw-gap-1 tw-px-2 tw-py-1 tw-bg-green-100 tw-text-green-800 tw-rounded-md tw-text-xs tw-font-medium\">\n <cide-ele-icon class=\"tw-w-3 tw-h-3\">check</cide-ele-icon>\n Selected\n </span>\n } @else {\n <button cideEleButton \n variant=\"outline\" \n size=\"xs\"\n (click)=\"$event.stopPropagation(); setSelectedTheme(theme)\"\n [attr.aria-label]=\"'Select ' + (theme.sytm_title || theme.sytm_theme_code) + ' theme'\"\n class=\"tw-text-xs\">\n Select\n </button>\n }\n <button cideEleButton variant=\"ghost\" size=\"xs\" (click)=\"$event.stopPropagation(); editTheme(theme)\"\n [attr.aria-label]=\"'Edit theme ' + (theme.sytm_title || theme.sytm_theme_code)\">\n <cide-ele-icon class=\"tw-w-4 tw-h-4\">edit</cide-ele-icon>\n </button>\n <button cideEleButton variant=\"ghost\" size=\"xs\" (click)=\"$event.stopPropagation(); deleteTheme(theme)\"\n [attr.aria-label]=\"'Delete theme ' + (theme.sytm_title || theme.sytm_theme_code)\">\n <cide-ele-icon class=\"tw-w-4 tw-h-4\">delete</cide-ele-icon>\n </button>\n </div>\n </div>\n </div>\n </div>\n }\n\n @if (!loading() && filteredThemes().length === 0) {\n <div class=\"tw-col-span-full tw-text-center tw-text-xs tw-text-gray-500 tw-py-8\">No themes found</div>\n }\n </div>\n </div>\n </div>\n</div>\n\n<!-- \n Angular Template References for Grid Renderers (Best Practice)\n \n These ng-template elements represent the Angular best practice for custom rendering.\n They provide:\n - Type safety with template context\n - Component lifecycle integration\n - Change detection optimization\n - Proper event handling\n - Accessibility features\n \n Note: Current data grid uses string renderers for compatibility.\n Templates are maintained for future component enhancement.\n-->\n\n<!-- Theme Details Renderer Template -->\n<ng-template #themeDetailsRendererTemplate let-row=\"row\" let-value=\"value\">\n <div class=\"tw-flex tw-items-center tw-min-w-0\">\n <!-- Theme Icon -->\n <div class=\"tw-flex-shrink-0\">\n <cide-ele-icon \n class=\"tw-text-purple-600\" \n size=\"xs\">\n palette\n </cide-ele-icon>\n </div>\n \n <!-- Theme Details -->\n <div class=\"tw-ml-3 tw-min-w-0 tw-flex-1\">\n <div class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-truncate\" \n [title]=\"row.sytm_title\">\n {{ row.sytm_title || 'Untitled' }}\n </div>\n @if (row.sytm_desc) {\n <div class=\"tw-text-xs tw-text-gray-500 tw-truncate\" \n [title]=\"row.sytm_desc\">\n {{ row.sytm_desc }}\n </div>\n }\n </div>\n </div>\n</ng-template>\n\n<!-- Theme Status Renderer Template -->\n<ng-template #themeStatusRendererTemplate let-row=\"row\" let-value=\"value\">\n <span class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-whitespace-nowrap\"\n [ngClass]=\"row.sytm_isactive ? 'tw-bg-green-100 tw-text-green-800' : 'tw-bg-red-100 tw-text-red-800'\">\n {{ row.sytm_isactive ? 'Active' : 'Inactive' }}\n </span>\n</ng-template>\n\n<!-- Actions Dropdown Renderer Template -->\n<ng-template #actionsDropdownRendererTemplate let-row=\"row\" let-value=\"value\">\n <cide-ele-dropdown \n [items]=\"getActionDropdownItems(row)\"\n [config]=\"{ triggerIcon: 'more_vert', triggerSize: 'sm' }\"\n (itemClick)=\"onDropdownItemClick($event, row)\">\n </cide-ele-dropdown>\n</ng-template> ", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1$2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated", "adaptive"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideInputComponent, selector: "cide-ele-input", inputs: ["fill", "label", "labelHide", "disabled", "clearInput", "labelPlacement", "labelDir", "placeholder", "leadingIcon", "trailingIcon", "helperText", "helperTextCollapse", "hideHelperAndErrorText", "errorText", "maxlength", "minlength", "required", "autocapitalize", "autocomplete", "type", "width", "id", "ngModel", "option", "min", "max", "step", "size"], outputs: ["ngModelChange"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput", "options", "multiple", "searchable", "showSearchInput", "loading", "valueKey", "labelKey", "treeView"], outputs: ["ngModelChange", "change", "searchChange"] }, { kind: "component", type: CideTextareaComponent, selector: "cide-ele-textarea", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "minlength", "maxlength", "rows", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput"], outputs: ["ngModelChange"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideEleDropdownComponent, selector: "cide-ele-dropdown", inputs: ["items", "config", "triggerTemplate", "menuTemplate"], outputs: ["itemClick", "dropdownToggle"] }, { kind: "component", type: CideEleJsonEditorComponent, selector: "cide-ele-json-editor", inputs: ["label", "helperText", "required", "disabled", "showCharacterCount", "config"], outputs: ["valueChange", "objectChange", "errorsChange", "validChange"] }, { kind: "component", type: CideEleFileInputComponent, selector: "cide-ele-file-input", inputs: ["label", "accept", "multiple", "disabled", "required", "helperText", "errorText", "showPreview", "previewWidth", "previewHeight", "previewBoxMode", "showFileName", "placeholderText", "placeholderIcon", "autoUpload", "uploadData", "showFloatingUploader", "floatingUploaderGroupId"], outputs: ["fileChange", "uploadSuccess", "uploadError", "uploadProgressChange"] }, { kind: "directive", type: CideEleFileImageDirective, selector: "[cideEleFileImage]", inputs: ["fileId", "altText"] }] });
|
|
7314
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: CideCorePageThemeComponent, isStandalone: true, selector: "cide-core-page-theme", viewQueries: [{ propertyName: "themeDetailsRendererTemplate", first: true, predicate: ["themeDetailsRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "themeStatusRendererTemplate", first: true, predicate: ["themeStatusRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "actionsDropdownRendererTemplate", first: true, predicate: ["actionsDropdownRendererTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Page Theme Container -->\n<div class=\"tw-flex tw-h-full tw-w-full\">\n \n <!-- Left: Form and header (60%) -->\n <div class=\"tw-w-full lg:tw-w-3/5 tw-flex tw-flex-col tw-border-r tw-border-gray-200\">\n\n <!-- Header Section -->\n <div class=\"tw-px-6 tw-py-2 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\n <div class=\"tw-flex tw-flex-col sm:tw-flex-row tw-justify-between tw-items-start sm:tw-items-center tw-space-y-2 sm:tw-space-y-0\">\n\n <!-- Title and Back Button -->\n <div class=\"tw-flex tw-items-center tw-space-x-4\">\n <button cideEleButton variant=\"ghost\" size=\"xs\" (click)=\"goBack();\" class=\"tw-text-gray-600 hover:tw-text-gray-900\">\n <cide-ele-icon class=\"tw-w-4 tw-h-4\">arrow_back</cide-ele-icon>\n </button>\n <div class=\"tw-flex tw-items-center tw-space-x-2\">\n <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">palette</cide-ele-icon>\n <div>\n <h5 class=\"tw-text-base tw-font-medium tw-text-gray-900 tw-m-0\">Theme Management</h5>\n <p class=\"tw-text-sm tw-text-gray-500 tw-m-0\">Page: {{ pageTitle() }}</p>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Error Message -->\n @if (error()) {\n <div class=\"tw-mt-4 tw-p-4 tw-bg-red-50 tw-border tw-border-red-200 tw-rounded-md\">\n <div class=\"tw-flex tw-items-start\">\n <cide-ele-icon name=\"error\" class=\"tw-text-red-400 tw-w-5 tw-h-5 tw-mt-0.5 tw-flex-shrink-0\"></cide-ele-icon>\n <div class=\"tw-ml-3\">\n <h3 class=\"tw-text-sm tw-font-medium tw-text-red-800 tw-m-0\">Error</h3>\n <p class=\"tw-text-sm tw-text-red-700 tw-mt-1 tw-m-0\">{{ error() }}</p>\n </div>\n </div>\n </div>\n }\n </div>\n\n <!-- Quick Add/Edit Form Section -->\n <div class=\"tw-px-6 tw-py-3 tw-bg-white tw-overflow-auto\">\n <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-2\">\n <div class=\"tw-flex tw-items-center tw-space-x-3\">\n <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\n <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-m-0\">{{ isEditMode() ? 'Edit Theme' : 'Quick Add Theme' }}</h6>\n </div>\n </div>\n\n <!-- Form (kept as-is) -->\n <form [formGroup]=\"themeForm\" (ngSubmit)=\"saveTheme()\" class=\"tw-space-y-4\">\n <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-[1fr_200px] tw-gap-4\">\n <!-- Left Side: All Input Fields -->\n <div class=\"tw-space-y-4\">\n <!-- Row 1: Theme Title and Theme Code -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\n <div class=\"tw-space-y-2\">\n <cide-ele-input id=\"sytm_title\" formControlName=\"sytm_title\" placeholder=\"Enter theme title\" label=\"Theme Title\" size=\"sm\"></cide-ele-input>\n </div>\n <div class=\"tw-space-y-2\">\n <cide-ele-input id=\"sytm_theme_code\" formControlName=\"sytm_theme_code\" placeholder=\"Enter theme code\" label=\"Theme Code\" size=\"sm\"></cide-ele-input>\n </div>\n </div>\n \n <!-- Row 2: Sub Title and Active Status -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\n <div class=\"tw-space-y-2\">\n <cide-ele-input id=\"sytm_sub_title\" formControlName=\"sytm_sub_title\" placeholder=\"Enter sub title\" label=\"Sub Title\" size=\"sm\"></cide-ele-input>\n </div>\n <div class=\"tw-space-y-2 tw-flex tw-items-center\">\n <cide-ele-input\n id=\"sytm_isactive_cb\"\n type=\"checkbox\"\n label=\"Active\"\n size=\"sm\"\n formControlName=\"sytm_isactive\">\n </cide-ele-input>\n </div>\n </div>\n \n <!-- Row 3: Description -->\n <div class=\"tw-space-y-2\">\n <cide-ele-textarea id=\"sytm_desc\" formControlName=\"sytm_desc\" placeholder=\"Enter theme description\" rows=\"2\" label=\"Description\" size=\"sm\"></cide-ele-textarea>\n </div>\n </div>\n \n <!-- Right Side: File Upload -->\n <div class=\"tw-flex tw-flex-col tw-justify-start tw-items-center tw-p-0\">\n <cide-ele-file-input \n id=\"sytm_preview_id_fm\" \n formControlName=\"sytm_preview_id_fm\"\n accept=\"image/*\"\n [showPreview]=\"true\"\n [previewBoxMode]=\"true\"\n [showFileName]=\"false\"\n previewWidth=\"180px\"\n previewHeight=\"120px\"\n placeholderText=\"Upload Preview Image\"\n placeholderIcon=\"image\"\n [autoUpload]=\"true\"\n [uploadData]=\"getPreviewImageUploadData()\"\n (uploadSuccess)=\"onPreviewImageUploadSuccess($event)\"\n (uploadError)=\"onPreviewImageUploadError($event)\"\n (uploadProgressChange)=\"onPreviewImageUploadProgress($event)\">\n </cide-ele-file-input>\n </div>\n </div>\n \n <!-- Configuration JSON -->\n <div class=\"tw-space-y-2\">\n <cide-ele-json-editor label=\"Configuration JSON\" formControlName=\"sytm_configuration\" [required]=\"true\" [config]=\"{\n showLineNumbers: true,\n autoFormat: true,\n validateOnChange: true,\n minHeight: 150,\n maxHeight: 300,\n placeholder: 'Enter theme configuration JSON...'\n }\" helperText=\"Enter valid JSON configuration for the theme\"></cide-ele-json-editor>\n </div>\n <!-- Layout Configuration + Selection -->\n <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-2 tw-gap-6\">\n <div class=\"tw-space-y-2\">\n <div class=\"tw-text-sm tw-font-medium tw-text-gray-700\">Layout & Selection</div>\n <!-- Selected toggle -->\n <div class=\"tw-bg-white tw-border tw-border-gray-200 tw-rounded-md tw-px-3 tw-py-2\">\n <cide-ele-input\n id=\"sytm_isselected\"\n type=\"checkbox\"\n label=\"Selected (Default)\"\n size=\"sm\"\n formControlName=\"sytm_isselected\">\n </cide-ele-input>\n </div>\n <div formGroupName=\"sytm_layout\" class=\"tw-bg-white tw-border tw-border-gray-200 tw-rounded-md tw-divide-y tw-overflow-hidden\">\n <!-- Sidebar -->\n <div class=\"tw-px-3 tw-py-2\" formGroupName=\"sytm_layout_sidebar\">\n <cide-ele-input id=\"layout_sidebar_status\" type=\"checkbox\" label=\"Sidebar\" size=\"sm\" formControlName=\"status\"></cide-ele-input>\n </div>\n <!-- Header -->\n <div class=\"tw-px-3 tw-py-2\" formGroupName=\"sytm_layout_header\">\n <cide-ele-input id=\"layout_header_status\" type=\"checkbox\" label=\"Header\" size=\"sm\" formControlName=\"status\"></cide-ele-input>\n </div>\n <!-- Footer -->\n <div class=\"tw-px-3 tw-py-2\" formGroupName=\"sytm_layout_footer\">\n <cide-ele-input id=\"layout_footer_status\" type=\"checkbox\" label=\"Footer\" size=\"sm\" formControlName=\"status\"></cide-ele-input>\n </div>\n <!-- Breadcrumb -->\n <div class=\"tw-px-3 tw-py-2\" formGroupName=\"sytm_layout_breadcrumb\">\n <cide-ele-input id=\"layout_breadcrumb_status\" type=\"checkbox\" label=\"Breadcrumb\" size=\"sm\" formControlName=\"status\"></cide-ele-input>\n </div>\n <!-- Console -->\n <div class=\"tw-px-3 tw-py-2\" formGroupName=\"sytm_layout_console\">\n <cide-ele-input id=\"layout_console_status\" type=\"checkbox\" label=\"Console\" size=\"sm\" formControlName=\"status\"></cide-ele-input>\n </div>\n <!-- Request -->\n <div class=\"tw-px-3 tw-py-2\" formGroupName=\"sytm_layout_request\">\n <cide-ele-input id=\"layout_request_status\" type=\"checkbox\" label=\"Request\" size=\"sm\" formControlName=\"status\"></cide-ele-input>\n </div>\n </div>\n <p class=\"tw-text-xs tw-text-gray-500 tw-pt-1\">Toggle active sections. Only one theme can be selected as default. More options can be added here later.</p>\n </div>\n \n <!-- Drawer Configuration -->\n <div class=\"tw-space-y-2\">\n <div class=\"tw-flex tw-items-center tw-justify-between\">\n <div class=\"tw-text-sm tw-font-medium tw-text-gray-700\">Drawers</div>\n <button cideEleButton type=\"button\" size=\"xs\" variant=\"outline\" (click)=\"addDrawer()\">\n Add Drawer\n </button>\n </div>\n\n <div formGroupName=\"sytm_layout\">\n <div class=\"tw-space-y-2\" formArrayName=\"sytm_layout_drawer\">\n <div *ngFor=\"let drawerGrp of drawerArray.controls; let i = index\" [formGroupName]=\"i\" class=\"tw-border tw-border-gray-200 tw-rounded-md tw-p-3 tw-flex tw-items-center tw-gap-3\">\n <cide-ele-input id=\"drawer_active_{{i}}\" type=\"checkbox\" label=\"Active\" size=\"sm\" formControlName=\"syth_status\"></cide-ele-input>\n <div class=\"tw-flex-1\">\n <cide-ele-select\n id=\"drawer_config_{{i}}\"\n label=\"Drawer For\"\n size=\"sm\"\n [options]=\"drawerConfigOptions\"\n formControlName=\"syth_config_syco_for\">\n </cide-ele-select>\n </div>\n <button cideEleButton type=\"button\" size=\"xs\" variant=\"ghost\" (click)=\"removeDrawer(i)\">\n <cide-ele-icon class=\"tw-w-4 tw-h-4\">delete</cide-ele-icon>\n </button>\n </div>\n <p class=\"tw-text-xs tw-text-gray-500\">Configure multiple drawers as needed.</p>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Form Actions -->\n <div class=\"tw-flex tw-flex-col tw-gap-2 tw-pt-4 tw-border-t tw-border-gray-200\">\n <div class=\"tw-flex tw-items-center tw-justify-end tw-space-x-3\">\n <button cideEleButton type=\"button\" variant=\"outline\" (click)=\"cancelForm()\" [disabled]=\"loading()\">Cancel</button>\n <button cideEleButton type=\"submit\" variant=\"primary\" leftIcon=\"add\" [disabled]=\"!themeForm.valid || loading()\" [loading]=\"loading()\">\n {{ isEditMode() ? 'Update Theme' : 'Create Theme' }}\n </button>\n </div>\n </div>\n </form>\n </div>\n </div>\n\n <!-- Right: Theme gallery (40%) -->\n <div class=\"tw-hidden lg:tw-flex tw-w-2/5 tw-flex-col\">\n <!-- (Header consolidated above) -->\n\n <!-- Gallery list -->\n <div class=\"tw-flex-1 tw-overflow-auto tw-bg-gray-50\">\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3 tw-p-4\">\n @for (theme of filteredThemes(); track theme._id) {\n <div class=\"tw-rounded-md tw-transition tw-cursor-pointer tw-relative\"\n [ngClass]=\"theme.sytm_isselected\n ? 'tw-border tw-border-blue-500 tw-ring-2 tw-ring-blue-200 tw-bg-blue-50/50'\n : 'tw-bg-white tw-border tw-border-gray-200 hover:tw-shadow-sm'\"\n (click)=\"editTheme(theme)\"\n role=\"button\"\n tabindex=\"0\"\n [attr.aria-selected]=\"theme.sytm_isselected ? 'true' : 'false'\"\n [attr.aria-label]=\"'Edit theme ' + (theme.sytm_title || theme.sytm_theme_code)\"\n (keydown.enter)=\"editTheme(theme)\"\n (keydown.space)=\"$event.preventDefault(); editTheme(theme)\">\n\n <!-- Selected badge -->\n <div *ngIf=\"theme.sytm_isselected\"\n class=\"tw-absolute tw-top-2 tw-right-2 tw-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-rounded-full tw-bg-blue-600 tw-text-white\">\n <cide-ele-icon class=\"tw-w-4 tw-h-4\">check</cide-ele-icon>\n </div>\n \n <div class=\"tw-aspect-[16/9] tw-bg-gray-100 tw-rounded-t-md tw-overflow-hidden tw-flex tw-items-center tw-justify-center\">\n @if (theme.sytm_preview_id_fm) {\n <img \n cideEleFileImage \n [fileId]=\"theme.sytm_preview_id_fm\" \n [altText]=\"'Theme Preview'\"\n class=\"tw-w-full tw-h-full tw-object-cover\" />\n } @else {\n <div class=\"tw-text-gray-400 tw-text-xs\">No preview</div>\n }\n </div>\n <div class=\"tw-p-3 tw-space-y-1\">\n <div class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-truncate\" [title]=\"theme.sytm_title\">{{ theme.sytm_title || 'Untitled Theme' }}</div>\n <div class=\"tw-text-xs tw-text-gray-500 tw-truncate\" [title]=\"theme.sytm_theme_code\">{{ theme.sytm_theme_code }}</div>\n <div class=\"tw-flex tw-items-center tw-justify-between tw-pt-1\">\n <span class=\"tw-inline-flex tw-items-center tw-gap-1 tw-text-xs\" [ngClass]=\"theme.sytm_isactive ? 'tw-text-green-700' : 'tw-text-red-700'\">\n <span class=\"tw-w-1.5 tw-h-1.5 tw-rounded-full\" [ngClass]=\"theme.sytm_isactive ? 'tw-bg-green-500' : 'tw-bg-red-500'\"></span>\n {{ theme.sytm_isactive ? 'Active' : 'Inactive' }}\n </span>\n <div class=\"tw-flex tw-items-center tw-gap-1\">\n <!-- Set Selected Button - Clear and Simple -->\n @if (theme.sytm_isselected) {\n <span class=\"tw-inline-flex tw-items-center tw-gap-1 tw-px-2 tw-py-1 tw-bg-green-100 tw-text-green-800 tw-rounded-md tw-text-xs tw-font-medium\">\n <cide-ele-icon class=\"tw-w-3 tw-h-3\">check</cide-ele-icon>\n Selected\n </span>\n } @else {\n <button cideEleButton \n variant=\"outline\" \n size=\"xs\"\n (click)=\"$event.stopPropagation(); setSelectedTheme(theme)\"\n [attr.aria-label]=\"'Select ' + (theme.sytm_title || theme.sytm_theme_code) + ' theme'\"\n class=\"tw-text-xs\">\n Select\n </button>\n }\n <button cideEleButton variant=\"ghost\" size=\"xs\" (click)=\"$event.stopPropagation(); editTheme(theme)\"\n [attr.aria-label]=\"'Edit theme ' + (theme.sytm_title || theme.sytm_theme_code)\">\n <cide-ele-icon class=\"tw-w-4 tw-h-4\">edit</cide-ele-icon>\n </button>\n <button cideEleButton variant=\"ghost\" size=\"xs\" (click)=\"$event.stopPropagation(); deleteTheme(theme)\"\n [attr.aria-label]=\"'Delete theme ' + (theme.sytm_title || theme.sytm_theme_code)\">\n <cide-ele-icon class=\"tw-w-4 tw-h-4\">delete</cide-ele-icon>\n </button>\n </div>\n </div>\n </div>\n </div>\n }\n\n @if (!loading() && filteredThemes().length === 0) {\n <div class=\"tw-col-span-full tw-text-center tw-text-xs tw-text-gray-500 tw-py-8\">No themes found</div>\n }\n </div>\n </div>\n </div>\n</div>\n\n<!-- \n Angular Template References for Grid Renderers (Best Practice)\n \n These ng-template elements represent the Angular best practice for custom rendering.\n They provide:\n - Type safety with template context\n - Component lifecycle integration\n - Change detection optimization\n - Proper event handling\n - Accessibility features\n \n Note: Current data grid uses string renderers for compatibility.\n Templates are maintained for future component enhancement.\n-->\n\n<!-- Theme Details Renderer Template -->\n<ng-template #themeDetailsRendererTemplate let-row=\"row\" let-value=\"value\">\n <div class=\"tw-flex tw-items-center tw-min-w-0\">\n <!-- Theme Icon -->\n <div class=\"tw-flex-shrink-0\">\n <cide-ele-icon \n class=\"tw-text-purple-600\" \n size=\"sm\">\n palette\n </cide-ele-icon>\n </div>\n \n <!-- Theme Details -->\n <div class=\"tw-ml-3 tw-min-w-0 tw-flex-1\">\n <div class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-truncate\" \n [title]=\"row.sytm_title\">\n {{ row.sytm_title || 'Untitled' }}\n </div>\n @if (row.sytm_desc) {\n <div class=\"tw-text-xs tw-text-gray-500 tw-truncate\" \n [title]=\"row.sytm_desc\">\n {{ row.sytm_desc }}\n </div>\n }\n </div>\n </div>\n</ng-template>\n\n<!-- Theme Status Renderer Template -->\n<ng-template #themeStatusRendererTemplate let-row=\"row\" let-value=\"value\">\n <span class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-whitespace-nowrap\"\n [ngClass]=\"row.sytm_isactive ? 'tw-bg-green-100 tw-text-green-800' : 'tw-bg-red-100 tw-text-red-800'\">\n {{ row.sytm_isactive ? 'Active' : 'Inactive' }}\n </span>\n</ng-template>\n\n<!-- Actions Dropdown Renderer Template -->\n<ng-template #actionsDropdownRendererTemplate let-row=\"row\" let-value=\"value\">\n <cide-ele-dropdown \n [items]=\"getActionDropdownItems(row)\"\n [config]=\"{ triggerIcon: 'more_vert', triggerSize: 'sm' }\"\n (itemClick)=\"onDropdownItemClick($event, row)\">\n </cide-ele-dropdown>\n</ng-template> ", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1$2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated", "adaptive"], 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", "name"] }, { kind: "component", type: CideEleDropdownComponent, selector: "cide-ele-dropdown", inputs: ["items", "config", "triggerTemplate", "menuTemplate"], outputs: ["itemClick", "dropdownToggle"] }, { kind: "component", type: CideEleJsonEditorComponent, selector: "cide-ele-json-editor", inputs: ["label", "helperText", "required", "disabled", "showCharacterCount", "config"], outputs: ["valueChange", "objectChange", "errorsChange", "validChange"] }, { kind: "component", type: CideEleFileInputComponent, selector: "cide-ele-file-input", inputs: ["label", "accept", "multiple", "disabled", "required", "helperText", "errorText", "showPreview", "previewWidth", "previewHeight", "previewBoxMode", "showFileName", "placeholderText", "placeholderIcon", "autoUpload", "uploadData", "showFloatingUploader", "floatingUploaderGroupId"], outputs: ["fileChange", "uploadSuccess", "uploadError", "uploadProgressChange"] }, { kind: "directive", type: CideEleFileImageDirective, selector: "[cideEleFileImage]", inputs: ["fileId", "altText"] }] });
|
|
7315
7315
|
}
|
|
7316
7316
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideCorePageThemeComponent, decorators: [{
|
|
7317
7317
|
type: Component,
|
|
@@ -7328,7 +7328,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
7328
7328
|
CideEleJsonEditorComponent,
|
|
7329
7329
|
CideEleFileInputComponent,
|
|
7330
7330
|
CideEleFileImageDirective,
|
|
7331
|
-
], template: "<!-- Page Theme Container -->\n<div class=\"tw-flex tw-h-full tw-w-full\">\n \n <!-- Left: Form and header (60%) -->\n <div class=\"tw-w-full lg:tw-w-3/5 tw-flex tw-flex-col tw-border-r tw-border-gray-200\">\n\n <!-- Header Section -->\n <div class=\"tw-px-6 tw-py-2 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\n <div class=\"tw-flex tw-flex-col sm:tw-flex-row tw-justify-between tw-items-start sm:tw-items-center tw-space-y-2 sm:tw-space-y-0\">\n\n <!-- Title and Back Button -->\n <div class=\"tw-flex tw-items-center tw-space-x-4\">\n <button cideEleButton variant=\"ghost\" size=\"sm\" (click)=\"goBack();\" class=\"tw-text-gray-600 hover:tw-text-gray-900\">\n <cide-ele-icon class=\"tw-w-4 tw-h-4\">arrow_back</cide-ele-icon>\n </button>\n <div class=\"tw-flex tw-items-center tw-space-x-2\">\n <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">palette</cide-ele-icon>\n <div>\n <h5 class=\"tw-text-base tw-font-medium tw-text-gray-900 tw-m-0\">Theme Management</h5>\n <p class=\"tw-text-sm tw-text-gray-500 tw-m-0\">Page: {{ pageTitle() }}</p>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Error Message -->\n @if (error()) {\n <div class=\"tw-mt-4 tw-p-4 tw-bg-red-50 tw-border tw-border-red-200 tw-rounded-md\">\n <div class=\"tw-flex tw-items-start\">\n <cide-ele-icon name=\"error\" class=\"tw-text-red-400 tw-w-5 tw-h-5 tw-mt-0.5 tw-flex-shrink-0\"></cide-ele-icon>\n <div class=\"tw-ml-3\">\n <h3 class=\"tw-text-sm tw-font-medium tw-text-red-800 tw-m-0\">Error</h3>\n <p class=\"tw-text-sm tw-text-red-700 tw-mt-1 tw-m-0\">{{ error() }}</p>\n </div>\n </div>\n </div>\n }\n </div>\n\n <!-- Quick Add/Edit Form Section -->\n <div class=\"tw-px-6 tw-py-3 tw-bg-white tw-overflow-auto\">\n <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-2\">\n <div class=\"tw-flex tw-items-center tw-space-x-3\">\n <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\n <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-m-0\">{{ isEditMode() ? 'Edit Theme' : 'Quick Add Theme' }}</h6>\n </div>\n </div>\n\n <!-- Form (kept as-is) -->\n <form [formGroup]=\"themeForm\" (ngSubmit)=\"saveTheme()\" class=\"tw-space-y-4\">\n <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-[1fr_200px] tw-gap-4\">\n <!-- Left Side: All Input Fields -->\n <div class=\"tw-space-y-4\">\n <!-- Row 1: Theme Title and Theme Code -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\n <div class=\"tw-space-y-2\">\n <cide-ele-input id=\"sytm_title\" formControlName=\"sytm_title\" placeholder=\"Enter theme title\" label=\"Theme Title\" size=\"sm\"></cide-ele-input>\n </div>\n <div class=\"tw-space-y-2\">\n <cide-ele-input id=\"sytm_theme_code\" formControlName=\"sytm_theme_code\" placeholder=\"Enter theme code\" label=\"Theme Code\" size=\"sm\"></cide-ele-input>\n </div>\n </div>\n \n <!-- Row 2: Sub Title and Active Status -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\n <div class=\"tw-space-y-2\">\n <cide-ele-input id=\"sytm_sub_title\" formControlName=\"sytm_sub_title\" placeholder=\"Enter sub title\" label=\"Sub Title\" size=\"sm\"></cide-ele-input>\n </div>\n <div class=\"tw-space-y-2 tw-flex tw-items-center\">\n <cide-ele-input\n id=\"sytm_isactive_cb\"\n type=\"checkbox\"\n label=\"Active\"\n size=\"sm\"\n formControlName=\"sytm_isactive\">\n </cide-ele-input>\n </div>\n </div>\n \n <!-- Row 3: Description -->\n <div class=\"tw-space-y-2\">\n <cide-ele-textarea id=\"sytm_desc\" formControlName=\"sytm_desc\" placeholder=\"Enter theme description\" rows=\"2\" label=\"Description\" size=\"sm\"></cide-ele-textarea>\n </div>\n </div>\n \n <!-- Right Side: File Upload -->\n <div class=\"tw-flex tw-flex-col tw-justify-start tw-items-center tw-p-0\">\n <cide-ele-file-input \n id=\"sytm_preview_id_fm\" \n formControlName=\"sytm_preview_id_fm\"\n accept=\"image/*\"\n [showPreview]=\"true\"\n [previewBoxMode]=\"true\"\n [showFileName]=\"false\"\n previewWidth=\"180px\"\n previewHeight=\"120px\"\n placeholderText=\"Upload Preview Image\"\n placeholderIcon=\"image\"\n [autoUpload]=\"true\"\n [uploadData]=\"getPreviewImageUploadData()\"\n (uploadSuccess)=\"onPreviewImageUploadSuccess($event)\"\n (uploadError)=\"onPreviewImageUploadError($event)\"\n (uploadProgressChange)=\"onPreviewImageUploadProgress($event)\">\n </cide-ele-file-input>\n </div>\n </div>\n \n <!-- Configuration JSON -->\n <div class=\"tw-space-y-2\">\n <cide-ele-json-editor label=\"Configuration JSON\" formControlName=\"sytm_configuration\" [required]=\"true\" [config]=\"{\n showLineNumbers: true,\n autoFormat: true,\n validateOnChange: true,\n minHeight: 150,\n maxHeight: 300,\n placeholder: 'Enter theme configuration JSON...'\n }\" helperText=\"Enter valid JSON configuration for the theme\"></cide-ele-json-editor>\n </div>\n <!-- Layout Configuration + Selection -->\n <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-2 tw-gap-6\">\n <div class=\"tw-space-y-2\">\n <div class=\"tw-text-sm tw-font-medium tw-text-gray-700\">Layout & Selection</div>\n <!-- Selected toggle -->\n <div class=\"tw-bg-white tw-border tw-border-gray-200 tw-rounded-md tw-px-3 tw-py-2\">\n <cide-ele-input\n id=\"sytm_isselected\"\n type=\"checkbox\"\n label=\"Selected (Default)\"\n size=\"sm\"\n formControlName=\"sytm_isselected\">\n </cide-ele-input>\n </div>\n <div formGroupName=\"sytm_layout\" class=\"tw-bg-white tw-border tw-border-gray-200 tw-rounded-md tw-divide-y tw-overflow-hidden\">\n <!-- Sidebar -->\n <div class=\"tw-px-3 tw-py-2\" formGroupName=\"sytm_layout_sidebar\">\n <cide-ele-input id=\"layout_sidebar_status\" type=\"checkbox\" label=\"Sidebar\" size=\"sm\" formControlName=\"status\"></cide-ele-input>\n </div>\n <!-- Header -->\n <div class=\"tw-px-3 tw-py-2\" formGroupName=\"sytm_layout_header\">\n <cide-ele-input id=\"layout_header_status\" type=\"checkbox\" label=\"Header\" size=\"sm\" formControlName=\"status\"></cide-ele-input>\n </div>\n <!-- Footer -->\n <div class=\"tw-px-3 tw-py-2\" formGroupName=\"sytm_layout_footer\">\n <cide-ele-input id=\"layout_footer_status\" type=\"checkbox\" label=\"Footer\" size=\"sm\" formControlName=\"status\"></cide-ele-input>\n </div>\n <!-- Breadcrumb -->\n <div class=\"tw-px-3 tw-py-2\" formGroupName=\"sytm_layout_breadcrumb\">\n <cide-ele-input id=\"layout_breadcrumb_status\" type=\"checkbox\" label=\"Breadcrumb\" size=\"sm\" formControlName=\"status\"></cide-ele-input>\n </div>\n <!-- Console -->\n <div class=\"tw-px-3 tw-py-2\" formGroupName=\"sytm_layout_console\">\n <cide-ele-input id=\"layout_console_status\" type=\"checkbox\" label=\"Console\" size=\"sm\" formControlName=\"status\"></cide-ele-input>\n </div>\n <!-- Request -->\n <div class=\"tw-px-3 tw-py-2\" formGroupName=\"sytm_layout_request\">\n <cide-ele-input id=\"layout_request_status\" type=\"checkbox\" label=\"Request\" size=\"sm\" formControlName=\"status\"></cide-ele-input>\n </div>\n </div>\n <p class=\"tw-text-xs tw-text-gray-500 tw-pt-1\">Toggle active sections. Only one theme can be selected as default. More options can be added here later.</p>\n </div>\n \n <!-- Drawer Configuration -->\n <div class=\"tw-space-y-2\">\n <div class=\"tw-flex tw-items-center tw-justify-between\">\n <div class=\"tw-text-sm tw-font-medium tw-text-gray-700\">Drawers</div>\n <button cideEleButton type=\"button\" size=\"xs\" variant=\"outline\" (click)=\"addDrawer()\">\n Add Drawer\n </button>\n </div>\n\n <div formGroupName=\"sytm_layout\">\n <div class=\"tw-space-y-2\" formArrayName=\"sytm_layout_drawer\">\n <div *ngFor=\"let drawerGrp of drawerArray.controls; let i = index\" [formGroupName]=\"i\" class=\"tw-border tw-border-gray-200 tw-rounded-md tw-p-3 tw-flex tw-items-center tw-gap-3\">\n <cide-ele-input id=\"drawer_active_{{i}}\" type=\"checkbox\" label=\"Active\" size=\"sm\" formControlName=\"syth_status\"></cide-ele-input>\n <div class=\"tw-flex-1\">\n <cide-ele-select\n id=\"drawer_config_{{i}}\"\n label=\"Drawer For\"\n size=\"sm\"\n [options]=\"drawerConfigOptions\"\n formControlName=\"syth_config_syco_for\">\n </cide-ele-select>\n </div>\n <button cideEleButton type=\"button\" size=\"xs\" variant=\"ghost\" (click)=\"removeDrawer(i)\">\n <cide-ele-icon class=\"tw-w-4 tw-h-4\">delete</cide-ele-icon>\n </button>\n </div>\n <p class=\"tw-text-xs tw-text-gray-500\">Configure multiple drawers as needed.</p>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Form Actions -->\n <div class=\"tw-flex tw-flex-col tw-gap-2 tw-pt-4 tw-border-t tw-border-gray-200\">\n <div class=\"tw-flex tw-items-center tw-justify-end tw-space-x-3\">\n <button cideEleButton type=\"button\" variant=\"outline\" (click)=\"cancelForm()\" [disabled]=\"loading()\">Cancel</button>\n <button cideEleButton type=\"submit\" variant=\"primary\" leftIcon=\"add\" [disabled]=\"!themeForm.valid || loading()\" [loading]=\"loading()\">\n {{ isEditMode() ? 'Update Theme' : 'Create Theme' }}\n </button>\n </div>\n </div>\n </form>\n </div>\n </div>\n\n <!-- Right: Theme gallery (40%) -->\n <div class=\"tw-hidden lg:tw-flex tw-w-2/5 tw-flex-col\">\n <!-- (Header consolidated above) -->\n\n <!-- Gallery list -->\n <div class=\"tw-flex-1 tw-overflow-auto tw-bg-gray-50\">\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3 tw-p-4\">\n @for (theme of filteredThemes(); track theme._id) {\n <div class=\"tw-rounded-md tw-transition tw-cursor-pointer tw-relative\"\n [ngClass]=\"theme.sytm_isselected\n ? 'tw-border tw-border-blue-500 tw-ring-2 tw-ring-blue-200 tw-bg-blue-50/50'\n : 'tw-bg-white tw-border tw-border-gray-200 hover:tw-shadow-sm'\"\n (click)=\"editTheme(theme)\"\n role=\"button\"\n tabindex=\"0\"\n [attr.aria-selected]=\"theme.sytm_isselected ? 'true' : 'false'\"\n [attr.aria-label]=\"'Edit theme ' + (theme.sytm_title || theme.sytm_theme_code)\"\n (keydown.enter)=\"editTheme(theme)\"\n (keydown.space)=\"$event.preventDefault(); editTheme(theme)\">\n\n <!-- Selected badge -->\n <div *ngIf=\"theme.sytm_isselected\"\n class=\"tw-absolute tw-top-2 tw-right-2 tw-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-rounded-full tw-bg-blue-600 tw-text-white\">\n <cide-ele-icon class=\"tw-w-4 tw-h-4\">check</cide-ele-icon>\n </div>\n \n <div class=\"tw-aspect-[16/9] tw-bg-gray-100 tw-rounded-t-md tw-overflow-hidden tw-flex tw-items-center tw-justify-center\">\n @if (theme.sytm_preview_id_fm) {\n <img \n cideEleFileImage \n [fileId]=\"theme.sytm_preview_id_fm\" \n [altText]=\"'Theme Preview'\"\n class=\"tw-w-full tw-h-full tw-object-cover\" />\n } @else {\n <div class=\"tw-text-gray-400 tw-text-xs\">No preview</div>\n }\n </div>\n <div class=\"tw-p-3 tw-space-y-1\">\n <div class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-truncate\" [title]=\"theme.sytm_title\">{{ theme.sytm_title || 'Untitled Theme' }}</div>\n <div class=\"tw-text-xs tw-text-gray-500 tw-truncate\" [title]=\"theme.sytm_theme_code\">{{ theme.sytm_theme_code }}</div>\n <div class=\"tw-flex tw-items-center tw-justify-between tw-pt-1\">\n <span class=\"tw-inline-flex tw-items-center tw-gap-1 tw-text-xs\" [ngClass]=\"theme.sytm_isactive ? 'tw-text-green-700' : 'tw-text-red-700'\">\n <span class=\"tw-w-1.5 tw-h-1.5 tw-rounded-full\" [ngClass]=\"theme.sytm_isactive ? 'tw-bg-green-500' : 'tw-bg-red-500'\"></span>\n {{ theme.sytm_isactive ? 'Active' : 'Inactive' }}\n </span>\n <div class=\"tw-flex tw-items-center tw-gap-1\">\n <!-- Set Selected Button - Clear and Simple -->\n @if (theme.sytm_isselected) {\n <span class=\"tw-inline-flex tw-items-center tw-gap-1 tw-px-2 tw-py-1 tw-bg-green-100 tw-text-green-800 tw-rounded-md tw-text-xs tw-font-medium\">\n <cide-ele-icon class=\"tw-w-3 tw-h-3\">check</cide-ele-icon>\n Selected\n </span>\n } @else {\n <button cideEleButton \n variant=\"outline\" \n size=\"xs\"\n (click)=\"$event.stopPropagation(); setSelectedTheme(theme)\"\n [attr.aria-label]=\"'Select ' + (theme.sytm_title || theme.sytm_theme_code) + ' theme'\"\n class=\"tw-text-xs\">\n Select\n </button>\n }\n <button cideEleButton variant=\"ghost\" size=\"xs\" (click)=\"$event.stopPropagation(); editTheme(theme)\"\n [attr.aria-label]=\"'Edit theme ' + (theme.sytm_title || theme.sytm_theme_code)\">\n <cide-ele-icon class=\"tw-w-4 tw-h-4\">edit</cide-ele-icon>\n </button>\n <button cideEleButton variant=\"ghost\" size=\"xs\" (click)=\"$event.stopPropagation(); deleteTheme(theme)\"\n [attr.aria-label]=\"'Delete theme ' + (theme.sytm_title || theme.sytm_theme_code)\">\n <cide-ele-icon class=\"tw-w-4 tw-h-4\">delete</cide-ele-icon>\n </button>\n </div>\n </div>\n </div>\n </div>\n }\n\n @if (!loading() && filteredThemes().length === 0) {\n <div class=\"tw-col-span-full tw-text-center tw-text-xs tw-text-gray-500 tw-py-8\">No themes found</div>\n }\n </div>\n </div>\n </div>\n</div>\n\n<!-- \n Angular Template References for Grid Renderers (Best Practice)\n \n These ng-template elements represent the Angular best practice for custom rendering.\n They provide:\n - Type safety with template context\n - Component lifecycle integration\n - Change detection optimization\n - Proper event handling\n - Accessibility features\n \n Note: Current data grid uses string renderers for compatibility.\n Templates are maintained for future component enhancement.\n-->\n\n<!-- Theme Details Renderer Template -->\n<ng-template #themeDetailsRendererTemplate let-row=\"row\" let-value=\"value\">\n <div class=\"tw-flex tw-items-center tw-min-w-0\">\n <!-- Theme Icon -->\n <div class=\"tw-flex-shrink-0\">\n <cide-ele-icon \n class=\"tw-text-purple-600\" \n size=\"xs\">\n palette\n </cide-ele-icon>\n </div>\n \n <!-- Theme Details -->\n <div class=\"tw-ml-3 tw-min-w-0 tw-flex-1\">\n <div class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-truncate\" \n [title]=\"row.sytm_title\">\n {{ row.sytm_title || 'Untitled' }}\n </div>\n @if (row.sytm_desc) {\n <div class=\"tw-text-xs tw-text-gray-500 tw-truncate\" \n [title]=\"row.sytm_desc\">\n {{ row.sytm_desc }}\n </div>\n }\n </div>\n </div>\n</ng-template>\n\n<!-- Theme Status Renderer Template -->\n<ng-template #themeStatusRendererTemplate let-row=\"row\" let-value=\"value\">\n <span class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-whitespace-nowrap\"\n [ngClass]=\"row.sytm_isactive ? 'tw-bg-green-100 tw-text-green-800' : 'tw-bg-red-100 tw-text-red-800'\">\n {{ row.sytm_isactive ? 'Active' : 'Inactive' }}\n </span>\n</ng-template>\n\n<!-- Actions Dropdown Renderer Template -->\n<ng-template #actionsDropdownRendererTemplate let-row=\"row\" let-value=\"value\">\n <cide-ele-dropdown \n [items]=\"getActionDropdownItems(row)\"\n [config]=\"{ triggerIcon: 'more_vert', triggerSize: 'sm' }\"\n (itemClick)=\"onDropdownItemClick($event, row)\">\n </cide-ele-dropdown>\n</ng-template> " }]
|
|
7331
|
+
], template: "<!-- Page Theme Container -->\n<div class=\"tw-flex tw-h-full tw-w-full\">\n \n <!-- Left: Form and header (60%) -->\n <div class=\"tw-w-full lg:tw-w-3/5 tw-flex tw-flex-col tw-border-r tw-border-gray-200\">\n\n <!-- Header Section -->\n <div class=\"tw-px-6 tw-py-2 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\n <div class=\"tw-flex tw-flex-col sm:tw-flex-row tw-justify-between tw-items-start sm:tw-items-center tw-space-y-2 sm:tw-space-y-0\">\n\n <!-- Title and Back Button -->\n <div class=\"tw-flex tw-items-center tw-space-x-4\">\n <button cideEleButton variant=\"ghost\" size=\"xs\" (click)=\"goBack();\" class=\"tw-text-gray-600 hover:tw-text-gray-900\">\n <cide-ele-icon class=\"tw-w-4 tw-h-4\">arrow_back</cide-ele-icon>\n </button>\n <div class=\"tw-flex tw-items-center tw-space-x-2\">\n <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">palette</cide-ele-icon>\n <div>\n <h5 class=\"tw-text-base tw-font-medium tw-text-gray-900 tw-m-0\">Theme Management</h5>\n <p class=\"tw-text-sm tw-text-gray-500 tw-m-0\">Page: {{ pageTitle() }}</p>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Error Message -->\n @if (error()) {\n <div class=\"tw-mt-4 tw-p-4 tw-bg-red-50 tw-border tw-border-red-200 tw-rounded-md\">\n <div class=\"tw-flex tw-items-start\">\n <cide-ele-icon name=\"error\" class=\"tw-text-red-400 tw-w-5 tw-h-5 tw-mt-0.5 tw-flex-shrink-0\"></cide-ele-icon>\n <div class=\"tw-ml-3\">\n <h3 class=\"tw-text-sm tw-font-medium tw-text-red-800 tw-m-0\">Error</h3>\n <p class=\"tw-text-sm tw-text-red-700 tw-mt-1 tw-m-0\">{{ error() }}</p>\n </div>\n </div>\n </div>\n }\n </div>\n\n <!-- Quick Add/Edit Form Section -->\n <div class=\"tw-px-6 tw-py-3 tw-bg-white tw-overflow-auto\">\n <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-2\">\n <div class=\"tw-flex tw-items-center tw-space-x-3\">\n <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\n <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-m-0\">{{ isEditMode() ? 'Edit Theme' : 'Quick Add Theme' }}</h6>\n </div>\n </div>\n\n <!-- Form (kept as-is) -->\n <form [formGroup]=\"themeForm\" (ngSubmit)=\"saveTheme()\" class=\"tw-space-y-4\">\n <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-[1fr_200px] tw-gap-4\">\n <!-- Left Side: All Input Fields -->\n <div class=\"tw-space-y-4\">\n <!-- Row 1: Theme Title and Theme Code -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\n <div class=\"tw-space-y-2\">\n <cide-ele-input id=\"sytm_title\" formControlName=\"sytm_title\" placeholder=\"Enter theme title\" label=\"Theme Title\" size=\"sm\"></cide-ele-input>\n </div>\n <div class=\"tw-space-y-2\">\n <cide-ele-input id=\"sytm_theme_code\" formControlName=\"sytm_theme_code\" placeholder=\"Enter theme code\" label=\"Theme Code\" size=\"sm\"></cide-ele-input>\n </div>\n </div>\n \n <!-- Row 2: Sub Title and Active Status -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\n <div class=\"tw-space-y-2\">\n <cide-ele-input id=\"sytm_sub_title\" formControlName=\"sytm_sub_title\" placeholder=\"Enter sub title\" label=\"Sub Title\" size=\"sm\"></cide-ele-input>\n </div>\n <div class=\"tw-space-y-2 tw-flex tw-items-center\">\n <cide-ele-input\n id=\"sytm_isactive_cb\"\n type=\"checkbox\"\n label=\"Active\"\n size=\"sm\"\n formControlName=\"sytm_isactive\">\n </cide-ele-input>\n </div>\n </div>\n \n <!-- Row 3: Description -->\n <div class=\"tw-space-y-2\">\n <cide-ele-textarea id=\"sytm_desc\" formControlName=\"sytm_desc\" placeholder=\"Enter theme description\" rows=\"2\" label=\"Description\" size=\"sm\"></cide-ele-textarea>\n </div>\n </div>\n \n <!-- Right Side: File Upload -->\n <div class=\"tw-flex tw-flex-col tw-justify-start tw-items-center tw-p-0\">\n <cide-ele-file-input \n id=\"sytm_preview_id_fm\" \n formControlName=\"sytm_preview_id_fm\"\n accept=\"image/*\"\n [showPreview]=\"true\"\n [previewBoxMode]=\"true\"\n [showFileName]=\"false\"\n previewWidth=\"180px\"\n previewHeight=\"120px\"\n placeholderText=\"Upload Preview Image\"\n placeholderIcon=\"image\"\n [autoUpload]=\"true\"\n [uploadData]=\"getPreviewImageUploadData()\"\n (uploadSuccess)=\"onPreviewImageUploadSuccess($event)\"\n (uploadError)=\"onPreviewImageUploadError($event)\"\n (uploadProgressChange)=\"onPreviewImageUploadProgress($event)\">\n </cide-ele-file-input>\n </div>\n </div>\n \n <!-- Configuration JSON -->\n <div class=\"tw-space-y-2\">\n <cide-ele-json-editor label=\"Configuration JSON\" formControlName=\"sytm_configuration\" [required]=\"true\" [config]=\"{\n showLineNumbers: true,\n autoFormat: true,\n validateOnChange: true,\n minHeight: 150,\n maxHeight: 300,\n placeholder: 'Enter theme configuration JSON...'\n }\" helperText=\"Enter valid JSON configuration for the theme\"></cide-ele-json-editor>\n </div>\n <!-- Layout Configuration + Selection -->\n <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-2 tw-gap-6\">\n <div class=\"tw-space-y-2\">\n <div class=\"tw-text-sm tw-font-medium tw-text-gray-700\">Layout & Selection</div>\n <!-- Selected toggle -->\n <div class=\"tw-bg-white tw-border tw-border-gray-200 tw-rounded-md tw-px-3 tw-py-2\">\n <cide-ele-input\n id=\"sytm_isselected\"\n type=\"checkbox\"\n label=\"Selected (Default)\"\n size=\"sm\"\n formControlName=\"sytm_isselected\">\n </cide-ele-input>\n </div>\n <div formGroupName=\"sytm_layout\" class=\"tw-bg-white tw-border tw-border-gray-200 tw-rounded-md tw-divide-y tw-overflow-hidden\">\n <!-- Sidebar -->\n <div class=\"tw-px-3 tw-py-2\" formGroupName=\"sytm_layout_sidebar\">\n <cide-ele-input id=\"layout_sidebar_status\" type=\"checkbox\" label=\"Sidebar\" size=\"sm\" formControlName=\"status\"></cide-ele-input>\n </div>\n <!-- Header -->\n <div class=\"tw-px-3 tw-py-2\" formGroupName=\"sytm_layout_header\">\n <cide-ele-input id=\"layout_header_status\" type=\"checkbox\" label=\"Header\" size=\"sm\" formControlName=\"status\"></cide-ele-input>\n </div>\n <!-- Footer -->\n <div class=\"tw-px-3 tw-py-2\" formGroupName=\"sytm_layout_footer\">\n <cide-ele-input id=\"layout_footer_status\" type=\"checkbox\" label=\"Footer\" size=\"sm\" formControlName=\"status\"></cide-ele-input>\n </div>\n <!-- Breadcrumb -->\n <div class=\"tw-px-3 tw-py-2\" formGroupName=\"sytm_layout_breadcrumb\">\n <cide-ele-input id=\"layout_breadcrumb_status\" type=\"checkbox\" label=\"Breadcrumb\" size=\"sm\" formControlName=\"status\"></cide-ele-input>\n </div>\n <!-- Console -->\n <div class=\"tw-px-3 tw-py-2\" formGroupName=\"sytm_layout_console\">\n <cide-ele-input id=\"layout_console_status\" type=\"checkbox\" label=\"Console\" size=\"sm\" formControlName=\"status\"></cide-ele-input>\n </div>\n <!-- Request -->\n <div class=\"tw-px-3 tw-py-2\" formGroupName=\"sytm_layout_request\">\n <cide-ele-input id=\"layout_request_status\" type=\"checkbox\" label=\"Request\" size=\"sm\" formControlName=\"status\"></cide-ele-input>\n </div>\n </div>\n <p class=\"tw-text-xs tw-text-gray-500 tw-pt-1\">Toggle active sections. Only one theme can be selected as default. More options can be added here later.</p>\n </div>\n \n <!-- Drawer Configuration -->\n <div class=\"tw-space-y-2\">\n <div class=\"tw-flex tw-items-center tw-justify-between\">\n <div class=\"tw-text-sm tw-font-medium tw-text-gray-700\">Drawers</div>\n <button cideEleButton type=\"button\" size=\"xs\" variant=\"outline\" (click)=\"addDrawer()\">\n Add Drawer\n </button>\n </div>\n\n <div formGroupName=\"sytm_layout\">\n <div class=\"tw-space-y-2\" formArrayName=\"sytm_layout_drawer\">\n <div *ngFor=\"let drawerGrp of drawerArray.controls; let i = index\" [formGroupName]=\"i\" class=\"tw-border tw-border-gray-200 tw-rounded-md tw-p-3 tw-flex tw-items-center tw-gap-3\">\n <cide-ele-input id=\"drawer_active_{{i}}\" type=\"checkbox\" label=\"Active\" size=\"sm\" formControlName=\"syth_status\"></cide-ele-input>\n <div class=\"tw-flex-1\">\n <cide-ele-select\n id=\"drawer_config_{{i}}\"\n label=\"Drawer For\"\n size=\"sm\"\n [options]=\"drawerConfigOptions\"\n formControlName=\"syth_config_syco_for\">\n </cide-ele-select>\n </div>\n <button cideEleButton type=\"button\" size=\"xs\" variant=\"ghost\" (click)=\"removeDrawer(i)\">\n <cide-ele-icon class=\"tw-w-4 tw-h-4\">delete</cide-ele-icon>\n </button>\n </div>\n <p class=\"tw-text-xs tw-text-gray-500\">Configure multiple drawers as needed.</p>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Form Actions -->\n <div class=\"tw-flex tw-flex-col tw-gap-2 tw-pt-4 tw-border-t tw-border-gray-200\">\n <div class=\"tw-flex tw-items-center tw-justify-end tw-space-x-3\">\n <button cideEleButton type=\"button\" variant=\"outline\" (click)=\"cancelForm()\" [disabled]=\"loading()\">Cancel</button>\n <button cideEleButton type=\"submit\" variant=\"primary\" leftIcon=\"add\" [disabled]=\"!themeForm.valid || loading()\" [loading]=\"loading()\">\n {{ isEditMode() ? 'Update Theme' : 'Create Theme' }}\n </button>\n </div>\n </div>\n </form>\n </div>\n </div>\n\n <!-- Right: Theme gallery (40%) -->\n <div class=\"tw-hidden lg:tw-flex tw-w-2/5 tw-flex-col\">\n <!-- (Header consolidated above) -->\n\n <!-- Gallery list -->\n <div class=\"tw-flex-1 tw-overflow-auto tw-bg-gray-50\">\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3 tw-p-4\">\n @for (theme of filteredThemes(); track theme._id) {\n <div class=\"tw-rounded-md tw-transition tw-cursor-pointer tw-relative\"\n [ngClass]=\"theme.sytm_isselected\n ? 'tw-border tw-border-blue-500 tw-ring-2 tw-ring-blue-200 tw-bg-blue-50/50'\n : 'tw-bg-white tw-border tw-border-gray-200 hover:tw-shadow-sm'\"\n (click)=\"editTheme(theme)\"\n role=\"button\"\n tabindex=\"0\"\n [attr.aria-selected]=\"theme.sytm_isselected ? 'true' : 'false'\"\n [attr.aria-label]=\"'Edit theme ' + (theme.sytm_title || theme.sytm_theme_code)\"\n (keydown.enter)=\"editTheme(theme)\"\n (keydown.space)=\"$event.preventDefault(); editTheme(theme)\">\n\n <!-- Selected badge -->\n <div *ngIf=\"theme.sytm_isselected\"\n class=\"tw-absolute tw-top-2 tw-right-2 tw-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-rounded-full tw-bg-blue-600 tw-text-white\">\n <cide-ele-icon class=\"tw-w-4 tw-h-4\">check</cide-ele-icon>\n </div>\n \n <div class=\"tw-aspect-[16/9] tw-bg-gray-100 tw-rounded-t-md tw-overflow-hidden tw-flex tw-items-center tw-justify-center\">\n @if (theme.sytm_preview_id_fm) {\n <img \n cideEleFileImage \n [fileId]=\"theme.sytm_preview_id_fm\" \n [altText]=\"'Theme Preview'\"\n class=\"tw-w-full tw-h-full tw-object-cover\" />\n } @else {\n <div class=\"tw-text-gray-400 tw-text-xs\">No preview</div>\n }\n </div>\n <div class=\"tw-p-3 tw-space-y-1\">\n <div class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-truncate\" [title]=\"theme.sytm_title\">{{ theme.sytm_title || 'Untitled Theme' }}</div>\n <div class=\"tw-text-xs tw-text-gray-500 tw-truncate\" [title]=\"theme.sytm_theme_code\">{{ theme.sytm_theme_code }}</div>\n <div class=\"tw-flex tw-items-center tw-justify-between tw-pt-1\">\n <span class=\"tw-inline-flex tw-items-center tw-gap-1 tw-text-xs\" [ngClass]=\"theme.sytm_isactive ? 'tw-text-green-700' : 'tw-text-red-700'\">\n <span class=\"tw-w-1.5 tw-h-1.5 tw-rounded-full\" [ngClass]=\"theme.sytm_isactive ? 'tw-bg-green-500' : 'tw-bg-red-500'\"></span>\n {{ theme.sytm_isactive ? 'Active' : 'Inactive' }}\n </span>\n <div class=\"tw-flex tw-items-center tw-gap-1\">\n <!-- Set Selected Button - Clear and Simple -->\n @if (theme.sytm_isselected) {\n <span class=\"tw-inline-flex tw-items-center tw-gap-1 tw-px-2 tw-py-1 tw-bg-green-100 tw-text-green-800 tw-rounded-md tw-text-xs tw-font-medium\">\n <cide-ele-icon class=\"tw-w-3 tw-h-3\">check</cide-ele-icon>\n Selected\n </span>\n } @else {\n <button cideEleButton \n variant=\"outline\" \n size=\"xs\"\n (click)=\"$event.stopPropagation(); setSelectedTheme(theme)\"\n [attr.aria-label]=\"'Select ' + (theme.sytm_title || theme.sytm_theme_code) + ' theme'\"\n class=\"tw-text-xs\">\n Select\n </button>\n }\n <button cideEleButton variant=\"ghost\" size=\"xs\" (click)=\"$event.stopPropagation(); editTheme(theme)\"\n [attr.aria-label]=\"'Edit theme ' + (theme.sytm_title || theme.sytm_theme_code)\">\n <cide-ele-icon class=\"tw-w-4 tw-h-4\">edit</cide-ele-icon>\n </button>\n <button cideEleButton variant=\"ghost\" size=\"xs\" (click)=\"$event.stopPropagation(); deleteTheme(theme)\"\n [attr.aria-label]=\"'Delete theme ' + (theme.sytm_title || theme.sytm_theme_code)\">\n <cide-ele-icon class=\"tw-w-4 tw-h-4\">delete</cide-ele-icon>\n </button>\n </div>\n </div>\n </div>\n </div>\n }\n\n @if (!loading() && filteredThemes().length === 0) {\n <div class=\"tw-col-span-full tw-text-center tw-text-xs tw-text-gray-500 tw-py-8\">No themes found</div>\n }\n </div>\n </div>\n </div>\n</div>\n\n<!-- \n Angular Template References for Grid Renderers (Best Practice)\n \n These ng-template elements represent the Angular best practice for custom rendering.\n They provide:\n - Type safety with template context\n - Component lifecycle integration\n - Change detection optimization\n - Proper event handling\n - Accessibility features\n \n Note: Current data grid uses string renderers for compatibility.\n Templates are maintained for future component enhancement.\n-->\n\n<!-- Theme Details Renderer Template -->\n<ng-template #themeDetailsRendererTemplate let-row=\"row\" let-value=\"value\">\n <div class=\"tw-flex tw-items-center tw-min-w-0\">\n <!-- Theme Icon -->\n <div class=\"tw-flex-shrink-0\">\n <cide-ele-icon \n class=\"tw-text-purple-600\" \n size=\"sm\">\n palette\n </cide-ele-icon>\n </div>\n \n <!-- Theme Details -->\n <div class=\"tw-ml-3 tw-min-w-0 tw-flex-1\">\n <div class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-truncate\" \n [title]=\"row.sytm_title\">\n {{ row.sytm_title || 'Untitled' }}\n </div>\n @if (row.sytm_desc) {\n <div class=\"tw-text-xs tw-text-gray-500 tw-truncate\" \n [title]=\"row.sytm_desc\">\n {{ row.sytm_desc }}\n </div>\n }\n </div>\n </div>\n</ng-template>\n\n<!-- Theme Status Renderer Template -->\n<ng-template #themeStatusRendererTemplate let-row=\"row\" let-value=\"value\">\n <span class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-whitespace-nowrap\"\n [ngClass]=\"row.sytm_isactive ? 'tw-bg-green-100 tw-text-green-800' : 'tw-bg-red-100 tw-text-red-800'\">\n {{ row.sytm_isactive ? 'Active' : 'Inactive' }}\n </span>\n</ng-template>\n\n<!-- Actions Dropdown Renderer Template -->\n<ng-template #actionsDropdownRendererTemplate let-row=\"row\" let-value=\"value\">\n <cide-ele-dropdown \n [items]=\"getActionDropdownItems(row)\"\n [config]=\"{ triggerIcon: 'more_vert', triggerSize: 'sm' }\"\n (itemClick)=\"onDropdownItemClick($event, row)\">\n </cide-ele-dropdown>\n</ng-template> " }]
|
|
7332
7332
|
}], propDecorators: { themeDetailsRendererTemplate: [{ type: i0.ViewChild, args: ['themeDetailsRendererTemplate', { isSignal: true }] }], themeStatusRendererTemplate: [{ type: i0.ViewChild, args: ['themeStatusRendererTemplate', { isSignal: true }] }], actionsDropdownRendererTemplate: [{ type: i0.ViewChild, args: ['actionsDropdownRendererTemplate', { isSignal: true }] }] } });
|
|
7333
7333
|
|
|
7334
7334
|
var pageTheme_component = /*#__PURE__*/Object.freeze({
|
|
@@ -7920,7 +7920,7 @@ class CideCorePageControlsComponent {
|
|
|
7920
7920
|
return control._id || '';
|
|
7921
7921
|
}
|
|
7922
7922
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideCorePageControlsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7923
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: CideCorePageControlsComponent, isStandalone: true, selector: "cide-core-page-controls", ngImport: i0, template: "<!-- Page Controls Container -->\r\n<div class=\"tw-flex tw-flex-col tw-h-full tw-bg-gray-50\">\r\n <!-- Header Section -->\r\n <div class=\"tw-bg-white tw-border-b tw-border-gray-200 tw-px-6 tw-py-4\">\r\n <div class=\"tw-flex tw-items-center tw-justify-between\">\r\n <div class=\"tw-flex tw-items-center tw-space-x-4\">\r\n <button \r\n cideEleButton\r\n variant=\"ghost\"\r\n size=\"sm\"\r\n (click)=\"goBack()\"\r\n class=\"tw-flex tw-items-center tw-justify-center tw-w-8 tw-h-8 tw-text-gray-600 hover:tw-text-gray-900 hover:tw-bg-gray-100 tw-rounded-md tw-transition-colors\">\r\n <cide-ele-icon>arrow_back</cide-ele-icon>\r\n </button>\r\n <div class=\"tw-flex tw-items-center tw-space-x-3\">\r\n <cide-ele-icon class=\"tw-text-blue-600 tw-text-xl\">settings</cide-ele-icon>\r\n <div>\r\n <h1 class=\"tw-text-xl tw-font-semibold tw-text-gray-900 tw-mb-0\">Control Management</h1>\r\n <p class=\"tw-text-sm tw-text-gray-500 tw-mb-0\">Page: {{ pageTitle() }}</p>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Error Message -->\r\n <div class=\"tw-bg-red-50 tw-border tw-border-red-200 tw-rounded-md tw-p-4 tw-mx-6 tw-mt-4 tw-flex tw-items-start tw-space-x-3\" *ngIf=\"error()\">\r\n <cide-ele-icon class=\"tw-text-red-500 tw-flex-shrink-0 tw-mt-0.5\">error</cide-ele-icon>\r\n <div>\r\n <h3 class=\"tw-text-red-800 tw-font-medium tw-mb-1\">Error</h3>\r\n <p class=\"tw-text-red-700 tw-text-sm tw-mb-0\">{{ error() }}</p>\r\n </div>\r\n </div>\r\n\r\n <!-- Main Content Area -->\r\n <div class=\"tw-flex tw-flex-1 tw-gap-6 tw-p-6 tw-overflow-hidden lg:tw-flex-row tw-flex-col\">\r\n <!-- Form Section -->\r\n <div class=\"tw-w-full lg:tw-w-3/5 tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-flex tw-flex-col\">\r\n <div class=\"tw-flex tw-items-center tw-space-x-3 tw-p-6 tw-border-b tw-border-gray-200\">\r\n <cide-ele-icon class=\"tw-text-blue-600\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\r\n <h3 class=\"tw-text-lg tw-font-medium tw-text-gray-900 tw-mb-0\">{{ isEditMode() ? 'Edit Control' : 'Quick Add Control' }}</h3>\r\n </div>\r\n\r\n <!-- Form -->\r\n <form [formGroup]=\"controlForm\" (ngSubmit)=\"saveControl()\" class=\"tw-flex tw-flex-col tw-flex-1 tw-p-6 tw-overflow-y-auto\">\r\n <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-2 tw-gap-4 tw-mb-6\">\r\n \r\n <!-- Basic Information Section -->\r\n <!-- Control Key -->\r\n <div class=\"tw-space-y-1\">\r\n <cide-ele-input\r\n id=\"sype_key\"\r\n formControlName=\"sype_key\"\r\n placeholder=\"Enter control key\"\r\n label=\"Control Key\"\r\n size=\"sm\">\r\n </cide-ele-input>\r\n </div>\r\n\r\n <!-- Control Label -->\r\n <div class=\"tw-space-y-1\">\r\n <cide-ele-input\r\n id=\"sype_label\"\r\n formControlName=\"sype_label\"\r\n placeholder=\"Enter control label\"\r\n label=\"Control Label\"\r\n size=\"sm\">\r\n </cide-ele-input>\r\n </div>\r\n\r\n <!-- Control Type -->\r\n <div class=\"tw-space-y-1\">\r\n <cide-ele-select\r\n id=\"sype_type\"\r\n formControlName=\"sype_type\"\r\n [options]=\"[\r\n { value: 'text', label: 'Text Input' },\r\n { value: 'textarea', label: 'Text Area' },\r\n { value: 'select', label: 'Select' },\r\n { value: 'checkbox', label: 'Checkbox' },\r\n { value: 'radio', label: 'Radio' },\r\n { value: 'date', label: 'Date' },\r\n { value: 'number', label: 'Number' },\r\n { value: 'email', label: 'Email' },\r\n { value: 'password', label: 'Password' },\r\n { value: 'file', label: 'File Upload' }\r\n ]\"\r\n label=\"Control Type\"\r\n size=\"sm\">\r\n </cide-ele-select>\r\n </div>\r\n\r\n <!-- Status - Checkbox aligned properly -->\r\n <div class=\"tw-space-y-1\">\r\n <cide-ele-input\r\n id=\"sype_isactive\"\r\n type=\"checkbox\"\r\n formControlName=\"sype_isactive\"\r\n label=\"Active Status\"\r\n size=\"sm\">\r\n </cide-ele-input>\r\n </div>\r\n\r\n <!-- Placeholder -->\r\n <div class=\"tw-space-y-1\">\r\n <cide-ele-input\r\n id=\"sype_placeholder\"\r\n formControlName=\"sype_placeholder\"\r\n placeholder=\"Enter placeholder text\"\r\n label=\"Placeholder\"\r\n size=\"sm\">\r\n </cide-ele-input>\r\n </div>\r\n\r\n <!-- Auto Complete - Checkbox aligned properly -->\r\n <div class=\"tw-space-y-1\">\r\n <cide-ele-input\r\n id=\"sype_auto_complete\"\r\n type=\"checkbox\"\r\n formControlName=\"sype_auto_complete\"\r\n label=\"Auto Complete\"\r\n size=\"sm\">\r\n </cide-ele-input>\r\n </div>\r\n\r\n <!-- Tooltip -->\r\n <div class=\"tw-space-y-1\">\r\n <cide-ele-input\r\n id=\"sype_tooltip\"\r\n formControlName=\"sype_tooltip\"\r\n placeholder=\"Enter tooltip text\"\r\n label=\"Tooltip\"\r\n size=\"sm\">\r\n </cide-ele-input>\r\n </div>\r\n\r\n <!-- Validation & Sizing Section -->\r\n <!-- Min/Max Length - Side by side -->\r\n <div class=\"tw-col-span-2 tw-flex tw-gap-4\">\r\n <div class=\"tw-flex-1 tw-space-y-1\">\r\n <cide-ele-input\r\n id=\"sype_min_length\"\r\n type=\"number\"\r\n formControlName=\"sype_min_length\"\r\n placeholder=\"0\"\r\n label=\"Min Length\"\r\n size=\"xs\">\r\n </cide-ele-input>\r\n </div>\r\n <div class=\"tw-flex-1 tw-space-y-1\">\r\n <cide-ele-input\r\n id=\"sype_max_length\"\r\n type=\"number\"\r\n formControlName=\"sype_max_length\"\r\n placeholder=\"20\"\r\n label=\"Max Length\"\r\n size=\"xs\">\r\n </cide-ele-input>\r\n </div>\r\n </div>\r\n\r\n <!-- Size & Label Placement - Side by side -->\r\n <div class=\"tw-col-span-2 tw-flex tw-gap-4\">\r\n <div class=\"tw-flex-1 tw-space-y-1\">\r\n <cide-ele-select\r\n id=\"sype_size\"\r\n formControlName=\"sype_size\"\r\n label=\"Size\"\r\n size=\"xs\"\r\n [options]=\"[\r\n { value: 'xs', label: 'XS' },\r\n { value: 'sm', label: 'SM' },\r\n { value: 'md', label: 'MD' },\r\n { value: 'lg', label: 'LG' },\r\n { value: 'xl', label: 'XL' },\r\n { value: 'xxl', label: 'XXL' }\r\n ]\">\r\n </cide-ele-select>\r\n </div>\r\n <div class=\"tw-flex-1 tw-space-y-1\">\r\n <cide-ele-select\r\n id=\"sype_label_placement\"\r\n formControlName=\"sype_label_placement\"\r\n label=\"Label Placement\"\r\n size=\"xs\"\r\n [options]=\"[\r\n { value: 'left', label: 'Left' },\r\n { value: 'floating', label: 'Floating' },\r\n { value: 'fixed', label: 'Fixed' }\r\n ]\">\r\n </cide-ele-select>\r\n </div>\r\n </div>\r\n\r\n <!-- Width & Height - Side by side -->\r\n <div class=\"tw-col-span-2 tw-flex tw-gap-4\">\r\n <div class=\"tw-flex-1 tw-space-y-1\">\r\n <cide-ele-input\r\n id=\"sype_width\"\r\n type=\"text\"\r\n formControlName=\"sype_width\"\r\n placeholder=\"20px\"\r\n label=\"Width\"\r\n size=\"xs\">\r\n </cide-ele-input>\r\n </div>\r\n <div class=\"tw-flex-1 tw-space-y-1\">\r\n <cide-ele-input\r\n id=\"sype_height\"\r\n type=\"text\"\r\n formControlName=\"sype_height\"\r\n placeholder=\"20px\"\r\n label=\"Height\"\r\n size=\"xs\">\r\n </cide-ele-input>\r\n </div>\r\n </div>\r\n\r\n <!-- Leading Icon -->\r\n <div class=\"tw-space-y-1\">\r\n <cide-ele-input\r\n id=\"sype_leading_icon\"\r\n formControlName=\"sype_leading_icon\"\r\n placeholder=\"Enter icon name\"\r\n label=\"Leading Icon\"\r\n size=\"sm\">\r\n </cide-ele-input>\r\n </div>\r\n\r\n <!-- Default Value -->\r\n <div class=\"tw-space-y-1\">\r\n <cide-ele-input\r\n id=\"sype_default\"\r\n formControlName=\"sype_default\"\r\n placeholder=\"Enter default value\"\r\n label=\"Default Value\"\r\n size=\"sm\">\r\n </cide-ele-input>\r\n </div>\r\n\r\n <!-- Regex Pattern -->\r\n <div class=\"tw-space-y-1\">\r\n <cide-ele-input\r\n id=\"sype_regex\"\r\n formControlName=\"sype_regex\"\r\n placeholder=\"Enter regex pattern\"\r\n label=\"Regex Pattern\"\r\n size=\"sm\">\r\n </cide-ele-input>\r\n </div>\r\n\r\n <!-- Option Key -->\r\n <div class=\"tw-space-y-1\">\r\n <cide-ele-input\r\n id=\"sype_option_key\"\r\n formControlName=\"sype_option_key\"\r\n placeholder=\"Enter option key\"\r\n label=\"Option Key\"\r\n size=\"sm\">\r\n </cide-ele-input>\r\n </div>\r\n\r\n <!-- Entity ID (Auto-assigned from AppState) - Hidden -->\r\n <div class=\"tw-space-y-1\" style=\"display: none;\">\r\n <cide-ele-input\r\n id=\"sype_entity_id_syen\"\r\n formControlName=\"sype_entity_id_syen\"\r\n placeholder=\"Auto-assigned from system\"\r\n label=\"Entity ID (Auto-assigned)\"\r\n size=\"sm\"\r\n readonly>\r\n </cide-ele-input>\r\n </div>\r\n\r\n <!-- Control Options -->\r\n <div class=\"tw-col-span-2 tw-space-y-1\">\r\n <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-mb-3\">Control Options</h6>\r\n <div class=\"tw-grid tw-grid-cols-1 sm:tw-grid-cols-2 lg:tw-grid-cols-3 tw-gap-3\">\r\n \r\n <!-- Required -->\r\n <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\n <cide-ele-input\r\n id=\"sype_required\"\r\n type=\"checkbox\"\r\n formControlName=\"sype_required\"\r\n label=\"Required\"\r\n size=\"xs\">\r\n </cide-ele-input>\r\n </div>\r\n\r\n <!-- Disabled -->\r\n <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\n <cide-ele-input\r\n id=\"sype_disabled\"\r\n type=\"checkbox\"\r\n formControlName=\"sype_disabled\"\r\n label=\"Disabled\"\r\n size=\"xs\">\r\n </cide-ele-input>\r\n </div>\r\n\r\n <!-- Hide Label -->\r\n <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\n <cide-ele-input\r\n id=\"sype_label_hide\"\r\n type=\"checkbox\"\r\n formControlName=\"sype_label_hide\"\r\n label=\"Hide Label\"\r\n size=\"xs\">\r\n </cide-ele-input>\r\n </div>\r\n\r\n <!-- Hide Helper Text -->\r\n <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\n <cide-ele-input\r\n id=\"sype_hide_helper_and_error_text\"\r\n type=\"checkbox\"\r\n formControlName=\"sype_hide_helper_and_error_text\"\r\n label=\"Hide Helper Text\"\r\n size=\"xs\">\r\n </cide-ele-input>\r\n </div>\r\n\r\n <!-- Helper Text Collapse -->\r\n <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\n <cide-ele-input\r\n id=\"sype_helper_text_collapse\"\r\n type=\"checkbox\"\r\n formControlName=\"sype_helper_text_collapse\"\r\n label=\"Collapse Helper\"\r\n size=\"xs\">\r\n </cide-ele-input>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n <!-- Form Actions -->\r\n <div class=\"tw-flex tw-justify-between tw-items-center tw-pt-4 tw-border-t tw-border-gray-200 tw-mt-auto\">\r\n <!-- Error Message (Left Side) -->\r\n <cide-form-field-error [formGroup]=\"controlForm\"></cide-form-field-error>\r\n \r\n <!-- Action Buttons (Right Side) -->\r\n <div class=\"tw-flex tw-gap-3\">\r\n <button \r\n cideEleButton\r\n type=\"button\"\r\n variant=\"outline\"\r\n (click)=\"cancelForm()\"\r\n [disabled]=\"loading()\">\r\n Cancel\r\n </button>\r\n <button \r\n cideEleButton\r\n type=\"submit\"\r\n variant=\"primary\"\r\n [disabled]=\"loading()\">\r\n {{ isEditMode() ? 'Update Control' : 'Create Control' }}\r\n </button>\r\n </div>\r\n </div>\r\n </form>\r\n </div>\r\n\r\n <!-- Controls List Section -->\r\n <div class=\"tw-w-full lg:tw-w-2/5 tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-flex tw-flex-col lg:tw-max-h-none tw-max-h-96\">\r\n <div class=\"tw-p-6 tw-border-b tw-border-gray-200\">\r\n <h3 class=\"tw-text-lg tw-font-medium tw-text-gray-900 tw-mb-1\">Page Controls</h3>\r\n <p class=\"tw-text-sm tw-text-gray-500 tw-mb-0\">Controls connected to this page</p>\r\n </div>\r\n \r\n <div class=\"tw-flex-1 tw-overflow-y-auto tw-p-4\" *ngIf=\"!loading() && controls().length > 0\">\r\n <div \r\n class=\"tw-bg-gray-50 tw-border tw-border-gray-200 tw-rounded-lg tw-p-4 tw-mb-3 tw-cursor-pointer tw-transition-all tw-duration-200 hover:tw-shadow-md hover:tw-border-gray-300 focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-blue-500 focus:tw-ring-offset-2\" \r\n *ngFor=\"let control of controls(); trackBy: trackByControlId\"\r\n [class.tw-bg-blue-50]=\"selectedControlId() === control._id\"\r\n [class.tw-border-blue-300]=\"selectedControlId() === control._id\"\r\n [class.tw-shadow-md]=\"selectedControlId() === control._id\"\r\n (click)=\"selectControl(control)\"\r\n (keyup.enter)=\"selectControl(control)\"\r\n (keyup.space)=\"selectControl(control)\"\r\n tabindex=\"0\"\r\n role=\"button\"\r\n [attr.aria-label]=\"'Select control ' + (control.sype_label || control.sype_key)\">\r\n <div class=\"tw-flex tw-items-start tw-space-x-3\">\r\n <div class=\"tw-flex-shrink-0 tw-w-10 tw-h-10 tw-bg-blue-100 tw-rounded-lg tw-flex tw-items-center tw-justify-center\">\r\n <cide-ele-icon class=\"tw-text-blue-600\">settings_input_component</cide-ele-icon>\r\n </div>\r\n <div class=\"tw-flex-1 tw-min-w-0\">\r\n <h4 class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-mb-1 tw-truncate\">{{ control.sype_label || control.sype_key }}</h4>\r\n <p class=\"tw-text-xs tw-text-gray-500 tw-mb-2 tw-truncate\">{{ control.sype_tooltip || 'No tooltip' }}</p>\r\n <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\n <span class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-gray-100 tw-text-gray-800\">{{ control.sype_type }}</span>\r\n <span class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium\" \r\n [class.tw-bg-red-100]=\"!control.sype_isactive\"\r\n [class.tw-text-red-800]=\"!control.sype_isactive\"\r\n [class.tw-bg-green-100]=\"control.sype_isactive\"\r\n [class.tw-text-green-800]=\"control.sype_isactive\">\r\n {{ control.sype_isactive ? 'Active' : 'Inactive' }}\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"tw-flex tw-items-center tw-space-x-1 tw-opacity-0 tw-transition-opacity tw-duration-200 group-hover:tw-opacity-100\" \r\n [class.tw-opacity-100]=\"selectedControlId() === control._id\">\r\n <button \r\n cideEleButton\r\n variant=\"ghost\"\r\n size=\"sm\"\r\n (click)=\"editControl(control); $event.stopPropagation()\">\r\n <cide-ele-icon>edit</cide-ele-icon>\r\n </button>\r\n <button \r\n cideEleButton\r\n variant=\"ghost\"\r\n size=\"sm\"\r\n (click)=\"deleteControl(control); $event.stopPropagation()\">\r\n <cide-ele-icon>delete</cide-ele-icon>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"tw-flex tw-flex-col tw-items-center tw-justify-center tw-py-12 tw-text-center\" *ngIf=\"!loading() && controls().length === 0\">\r\n <cide-ele-icon class=\"tw-text-4xl tw-text-gray-300 tw-mb-4\">settings_input_component</cide-ele-icon>\r\n <p class=\"tw-text-gray-500 tw-font-medium tw-mb-1\">No controls available</p>\r\n <small class=\"tw-text-gray-400\">Create controls using the form on the left</small>\r\n </div>\r\n\r\n <div class=\"tw-flex tw-flex-col tw-items-center tw-justify-center tw-py-12 tw-text-center\" *ngIf=\"loading()\">\r\n <cide-ele-icon class=\"tw-text-2xl tw-text-blue-500 tw-mb-4 tw-animate-spin\">refresh</cide-ele-icon>\r\n <p class=\"tw-text-gray-500\">Loading controls...</p>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n ", styles: [".checkbox-field{margin:.25rem 0}.checkbox-label{display:flex;flex-direction:column;gap:.25rem;cursor:pointer;padding:.75rem 0;background:transparent;border:none;border-radius:0;transition:all .2s ease}.checkbox-label:hover{background:#667eea05}.checkbox-label .checkbox-input{width:1rem;height:1rem;accent-color:#667eea;border-radius:3px;margin-bottom:.125rem}.checkbox-label .checkbox-text{font-weight:600;color:#374151;font-size:.875rem}.checkbox-label .checkbox-description{font-size:.75rem;color:#6b7280;margin-top:.125rem}@media (max-width: 640px){.main-content{padding:1rem;gap:1rem}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated", "adaptive"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideInputComponent, selector: "cide-ele-input", inputs: ["fill", "label", "labelHide", "disabled", "clearInput", "labelPlacement", "labelDir", "placeholder", "leadingIcon", "trailingIcon", "helperText", "helperTextCollapse", "hideHelperAndErrorText", "errorText", "maxlength", "minlength", "required", "autocapitalize", "autocomplete", "type", "width", "id", "ngModel", "option", "min", "max", "step", "size"], outputs: ["ngModelChange"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput", "options", "multiple", "searchable", "showSearchInput", "loading", "valueKey", "labelKey", "treeView"], outputs: ["ngModelChange", "change", "searchChange"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideFormFieldErrorComponent, selector: "cide-form-field-error", inputs: ["control", "formGroup", "fieldName", "customMessages"] }] });
|
|
7923
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: CideCorePageControlsComponent, isStandalone: true, selector: "cide-core-page-controls", ngImport: i0, template: "<!-- Page Controls Container -->\r\n<div class=\"tw-flex tw-flex-col tw-h-full tw-bg-gray-50\">\r\n <!-- Header Section -->\r\n <div class=\"tw-bg-white tw-border-b tw-border-gray-200 tw-px-6 tw-py-4\">\r\n <div class=\"tw-flex tw-items-center tw-justify-between\">\r\n <div class=\"tw-flex tw-items-center tw-space-x-4\">\r\n <button \r\n cideEleButton\r\n variant=\"ghost\"\r\n size=\"xs\"\r\n (click)=\"goBack()\"\r\n class=\"tw-flex tw-items-center tw-justify-center tw-w-8 tw-h-8 tw-text-gray-600 hover:tw-text-gray-900 hover:tw-bg-gray-100 tw-rounded-md tw-transition-colors\">\r\n <cide-ele-icon>arrow_back</cide-ele-icon>\r\n </button>\r\n <div class=\"tw-flex tw-items-center tw-space-x-3\">\r\n <cide-ele-icon class=\"tw-text-blue-600 tw-text-xl\">settings</cide-ele-icon>\r\n <div>\r\n <h1 class=\"tw-text-xl tw-font-semibold tw-text-gray-900 tw-mb-0\">Control Management</h1>\r\n <p class=\"tw-text-sm tw-text-gray-500 tw-mb-0\">Page: {{ pageTitle() }}</p>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Error Message -->\r\n <div class=\"tw-bg-red-50 tw-border tw-border-red-200 tw-rounded-md tw-p-4 tw-mx-6 tw-mt-4 tw-flex tw-items-start tw-space-x-3\" *ngIf=\"error()\">\r\n <cide-ele-icon class=\"tw-text-red-500 tw-flex-shrink-0 tw-mt-0.5\">error</cide-ele-icon>\r\n <div>\r\n <h3 class=\"tw-text-red-800 tw-font-medium tw-mb-1\">Error</h3>\r\n <p class=\"tw-text-red-700 tw-text-sm tw-mb-0\">{{ error() }}</p>\r\n </div>\r\n </div>\r\n\r\n <!-- Main Content Area -->\r\n <div class=\"tw-flex tw-flex-1 tw-gap-6 tw-p-6 tw-overflow-hidden lg:tw-flex-row tw-flex-col\">\r\n <!-- Form Section -->\r\n <div class=\"tw-w-full lg:tw-w-3/5 tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-flex tw-flex-col\">\r\n <div class=\"tw-flex tw-items-center tw-space-x-3 tw-p-6 tw-border-b tw-border-gray-200\">\r\n <cide-ele-icon class=\"tw-text-blue-600\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\r\n <h3 class=\"tw-text-lg tw-font-medium tw-text-gray-900 tw-mb-0\">{{ isEditMode() ? 'Edit Control' : 'Quick Add Control' }}</h3>\r\n </div>\r\n\r\n <!-- Form -->\r\n <form [formGroup]=\"controlForm\" (ngSubmit)=\"saveControl()\" class=\"tw-flex tw-flex-col tw-flex-1 tw-p-6 tw-overflow-y-auto\">\r\n <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-2 tw-gap-4 tw-mb-6\">\r\n \r\n <!-- Basic Information Section -->\r\n <!-- Control Key -->\r\n <div class=\"tw-space-y-1\">\r\n <cide-ele-input\r\n id=\"sype_key\"\r\n formControlName=\"sype_key\"\r\n placeholder=\"Enter control key\"\r\n label=\"Control Key\"\r\n size=\"sm\">\r\n </cide-ele-input>\r\n </div>\r\n\r\n <!-- Control Label -->\r\n <div class=\"tw-space-y-1\">\r\n <cide-ele-input\r\n id=\"sype_label\"\r\n formControlName=\"sype_label\"\r\n placeholder=\"Enter control label\"\r\n label=\"Control Label\"\r\n size=\"sm\">\r\n </cide-ele-input>\r\n </div>\r\n\r\n <!-- Control Type -->\r\n <div class=\"tw-space-y-1\">\r\n <cide-ele-select\r\n id=\"sype_type\"\r\n formControlName=\"sype_type\"\r\n [options]=\"[\r\n { value: 'text', label: 'Text Input' },\r\n { value: 'textarea', label: 'Text Area' },\r\n { value: 'select', label: 'Select' },\r\n { value: 'checkbox', label: 'Checkbox' },\r\n { value: 'radio', label: 'Radio' },\r\n { value: 'date', label: 'Date' },\r\n { value: 'number', label: 'Number' },\r\n { value: 'email', label: 'Email' },\r\n { value: 'password', label: 'Password' },\r\n { value: 'file', label: 'File Upload' }\r\n ]\"\r\n label=\"Control Type\"\r\n size=\"sm\">\r\n </cide-ele-select>\r\n </div>\r\n\r\n <!-- Status - Checkbox aligned properly -->\r\n <div class=\"tw-space-y-1\">\r\n <cide-ele-input\r\n id=\"sype_isactive\"\r\n type=\"checkbox\"\r\n formControlName=\"sype_isactive\"\r\n label=\"Active Status\"\r\n size=\"sm\">\r\n </cide-ele-input>\r\n </div>\r\n\r\n <!-- Placeholder -->\r\n <div class=\"tw-space-y-1\">\r\n <cide-ele-input\r\n id=\"sype_placeholder\"\r\n formControlName=\"sype_placeholder\"\r\n placeholder=\"Enter placeholder text\"\r\n label=\"Placeholder\"\r\n size=\"sm\">\r\n </cide-ele-input>\r\n </div>\r\n\r\n <!-- Auto Complete - Checkbox aligned properly -->\r\n <div class=\"tw-space-y-1\">\r\n <cide-ele-input\r\n id=\"sype_auto_complete\"\r\n type=\"checkbox\"\r\n formControlName=\"sype_auto_complete\"\r\n label=\"Auto Complete\"\r\n size=\"sm\">\r\n </cide-ele-input>\r\n </div>\r\n\r\n <!-- Tooltip -->\r\n <div class=\"tw-space-y-1\">\r\n <cide-ele-input\r\n id=\"sype_tooltip\"\r\n formControlName=\"sype_tooltip\"\r\n placeholder=\"Enter tooltip text\"\r\n label=\"Tooltip\"\r\n size=\"sm\">\r\n </cide-ele-input>\r\n </div>\r\n\r\n <!-- Validation & Sizing Section -->\r\n <!-- Min/Max Length - Side by side -->\r\n <div class=\"tw-col-span-2 tw-flex tw-gap-4\">\r\n <div class=\"tw-flex-1 tw-space-y-1\">\r\n <cide-ele-input\r\n id=\"sype_min_length\"\r\n type=\"number\"\r\n formControlName=\"sype_min_length\"\r\n placeholder=\"0\"\r\n label=\"Min Length\"\r\n size=\"xs\">\r\n </cide-ele-input>\r\n </div>\r\n <div class=\"tw-flex-1 tw-space-y-1\">\r\n <cide-ele-input\r\n id=\"sype_max_length\"\r\n type=\"number\"\r\n formControlName=\"sype_max_length\"\r\n placeholder=\"20\"\r\n label=\"Max Length\"\r\n size=\"xs\">\r\n </cide-ele-input>\r\n </div>\r\n </div>\r\n\r\n <!-- Size & Label Placement - Side by side -->\r\n <div class=\"tw-col-span-2 tw-flex tw-gap-4\">\r\n <div class=\"tw-flex-1 tw-space-y-1\">\r\n <cide-ele-select\r\n id=\"sype_size\"\r\n formControlName=\"sype_size\"\r\n label=\"Size\"\r\n size=\"xs\"\r\n [options]=\"[\r\n { value: 'xs', label: 'XS' },\r\n { value: 'sm', label: 'SM' },\r\n { value: 'md', label: 'MD' },\r\n { value: 'lg', label: 'LG' },\r\n { value: 'xl', label: 'XL' },\r\n { value: 'xxl', label: 'XXL' }\r\n ]\">\r\n </cide-ele-select>\r\n </div>\r\n <div class=\"tw-flex-1 tw-space-y-1\">\r\n <cide-ele-select\r\n id=\"sype_label_placement\"\r\n formControlName=\"sype_label_placement\"\r\n label=\"Label Placement\"\r\n size=\"xs\"\r\n [options]=\"[\r\n { value: 'left', label: 'Left' },\r\n { value: 'floating', label: 'Floating' },\r\n { value: 'fixed', label: 'Fixed' }\r\n ]\">\r\n </cide-ele-select>\r\n </div>\r\n </div>\r\n\r\n <!-- Width & Height - Side by side -->\r\n <div class=\"tw-col-span-2 tw-flex tw-gap-4\">\r\n <div class=\"tw-flex-1 tw-space-y-1\">\r\n <cide-ele-input\r\n id=\"sype_width\"\r\n type=\"text\"\r\n formControlName=\"sype_width\"\r\n placeholder=\"20px\"\r\n label=\"Width\"\r\n size=\"xs\">\r\n </cide-ele-input>\r\n </div>\r\n <div class=\"tw-flex-1 tw-space-y-1\">\r\n <cide-ele-input\r\n id=\"sype_height\"\r\n type=\"text\"\r\n formControlName=\"sype_height\"\r\n placeholder=\"20px\"\r\n label=\"Height\"\r\n size=\"xs\">\r\n </cide-ele-input>\r\n </div>\r\n </div>\r\n\r\n <!-- Leading Icon -->\r\n <div class=\"tw-space-y-1\">\r\n <cide-ele-input\r\n id=\"sype_leading_icon\"\r\n formControlName=\"sype_leading_icon\"\r\n placeholder=\"Enter icon name\"\r\n label=\"Leading Icon\"\r\n size=\"sm\">\r\n </cide-ele-input>\r\n </div>\r\n\r\n <!-- Default Value -->\r\n <div class=\"tw-space-y-1\">\r\n <cide-ele-input\r\n id=\"sype_default\"\r\n formControlName=\"sype_default\"\r\n placeholder=\"Enter default value\"\r\n label=\"Default Value\"\r\n size=\"sm\">\r\n </cide-ele-input>\r\n </div>\r\n\r\n <!-- Regex Pattern -->\r\n <div class=\"tw-space-y-1\">\r\n <cide-ele-input\r\n id=\"sype_regex\"\r\n formControlName=\"sype_regex\"\r\n placeholder=\"Enter regex pattern\"\r\n label=\"Regex Pattern\"\r\n size=\"sm\">\r\n </cide-ele-input>\r\n </div>\r\n\r\n <!-- Option Key -->\r\n <div class=\"tw-space-y-1\">\r\n <cide-ele-input\r\n id=\"sype_option_key\"\r\n formControlName=\"sype_option_key\"\r\n placeholder=\"Enter option key\"\r\n label=\"Option Key\"\r\n size=\"sm\">\r\n </cide-ele-input>\r\n </div>\r\n\r\n <!-- Entity ID (Auto-assigned from AppState) - Hidden -->\r\n <div class=\"tw-space-y-1\" style=\"display: none;\">\r\n <cide-ele-input\r\n id=\"sype_entity_id_syen\"\r\n formControlName=\"sype_entity_id_syen\"\r\n placeholder=\"Auto-assigned from system\"\r\n label=\"Entity ID (Auto-assigned)\"\r\n size=\"sm\"\r\n readonly>\r\n </cide-ele-input>\r\n </div>\r\n\r\n <!-- Control Options -->\r\n <div class=\"tw-col-span-2 tw-space-y-1\">\r\n <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-mb-3\">Control Options</h6>\r\n <div class=\"tw-grid tw-grid-cols-1 sm:tw-grid-cols-2 lg:tw-grid-cols-3 tw-gap-3\">\r\n \r\n <!-- Required -->\r\n <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\n <cide-ele-input\r\n id=\"sype_required\"\r\n type=\"checkbox\"\r\n formControlName=\"sype_required\"\r\n label=\"Required\"\r\n size=\"xs\">\r\n </cide-ele-input>\r\n </div>\r\n\r\n <!-- Disabled -->\r\n <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\n <cide-ele-input\r\n id=\"sype_disabled\"\r\n type=\"checkbox\"\r\n formControlName=\"sype_disabled\"\r\n label=\"Disabled\"\r\n size=\"xs\">\r\n </cide-ele-input>\r\n </div>\r\n\r\n <!-- Hide Label -->\r\n <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\n <cide-ele-input\r\n id=\"sype_label_hide\"\r\n type=\"checkbox\"\r\n formControlName=\"sype_label_hide\"\r\n label=\"Hide Label\"\r\n size=\"xs\">\r\n </cide-ele-input>\r\n </div>\r\n\r\n <!-- Hide Helper Text -->\r\n <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\n <cide-ele-input\r\n id=\"sype_hide_helper_and_error_text\"\r\n type=\"checkbox\"\r\n formControlName=\"sype_hide_helper_and_error_text\"\r\n label=\"Hide Helper Text\"\r\n size=\"xs\">\r\n </cide-ele-input>\r\n </div>\r\n\r\n <!-- Helper Text Collapse -->\r\n <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\n <cide-ele-input\r\n id=\"sype_helper_text_collapse\"\r\n type=\"checkbox\"\r\n formControlName=\"sype_helper_text_collapse\"\r\n label=\"Collapse Helper\"\r\n size=\"xs\">\r\n </cide-ele-input>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n <!-- Form Actions -->\r\n <div class=\"tw-flex tw-justify-between tw-items-center tw-pt-4 tw-border-t tw-border-gray-200 tw-mt-auto\">\r\n <!-- Error Message (Left Side) -->\r\n <cide-form-field-error [formGroup]=\"controlForm\"></cide-form-field-error>\r\n \r\n <!-- Action Buttons (Right Side) -->\r\n <div class=\"tw-flex tw-gap-3\">\r\n <button \r\n cideEleButton\r\n type=\"button\"\r\n variant=\"outline\"\r\n (click)=\"cancelForm()\"\r\n [disabled]=\"loading()\">\r\n Cancel\r\n </button>\r\n <button \r\n cideEleButton\r\n type=\"submit\"\r\n variant=\"primary\"\r\n [disabled]=\"loading()\">\r\n {{ isEditMode() ? 'Update Control' : 'Create Control' }}\r\n </button>\r\n </div>\r\n </div>\r\n </form>\r\n </div>\r\n\r\n <!-- Controls List Section -->\r\n <div class=\"tw-w-full lg:tw-w-2/5 tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-flex tw-flex-col lg:tw-max-h-none tw-max-h-96\">\r\n <div class=\"tw-p-6 tw-border-b tw-border-gray-200\">\r\n <h3 class=\"tw-text-lg tw-font-medium tw-text-gray-900 tw-mb-1\">Page Controls</h3>\r\n <p class=\"tw-text-sm tw-text-gray-500 tw-mb-0\">Controls connected to this page</p>\r\n </div>\r\n \r\n <div class=\"tw-flex-1 tw-overflow-y-auto tw-p-4\" *ngIf=\"!loading() && controls().length > 0\">\r\n <div \r\n class=\"tw-bg-gray-50 tw-border tw-border-gray-200 tw-rounded-lg tw-p-4 tw-mb-3 tw-cursor-pointer tw-transition-all tw-duration-200 hover:tw-shadow-md hover:tw-border-gray-300 focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-blue-500 focus:tw-ring-offset-2\" \r\n *ngFor=\"let control of controls(); trackBy: trackByControlId\"\r\n [class.tw-bg-blue-50]=\"selectedControlId() === control._id\"\r\n [class.tw-border-blue-300]=\"selectedControlId() === control._id\"\r\n [class.tw-shadow-md]=\"selectedControlId() === control._id\"\r\n (click)=\"selectControl(control)\"\r\n (keyup.enter)=\"selectControl(control)\"\r\n (keyup.space)=\"selectControl(control)\"\r\n tabindex=\"0\"\r\n role=\"button\"\r\n [attr.aria-label]=\"'Select control ' + (control.sype_label || control.sype_key)\">\r\n <div class=\"tw-flex tw-items-start tw-space-x-3\">\r\n <div class=\"tw-flex-shrink-0 tw-w-10 tw-h-10 tw-bg-blue-100 tw-rounded-lg tw-flex tw-items-center tw-justify-center\">\r\n <cide-ele-icon class=\"tw-text-blue-600\">settings_input_component</cide-ele-icon>\r\n </div>\r\n <div class=\"tw-flex-1 tw-min-w-0\">\r\n <h4 class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-mb-1 tw-truncate\">{{ control.sype_label || control.sype_key }}</h4>\r\n <p class=\"tw-text-xs tw-text-gray-500 tw-mb-2 tw-truncate\">{{ control.sype_tooltip || 'No tooltip' }}</p>\r\n <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\n <span class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-gray-100 tw-text-gray-800\">{{ control.sype_type }}</span>\r\n <span class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium\" \r\n [class.tw-bg-red-100]=\"!control.sype_isactive\"\r\n [class.tw-text-red-800]=\"!control.sype_isactive\"\r\n [class.tw-bg-green-100]=\"control.sype_isactive\"\r\n [class.tw-text-green-800]=\"control.sype_isactive\">\r\n {{ control.sype_isactive ? 'Active' : 'Inactive' }}\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"tw-flex tw-items-center tw-space-x-1 tw-opacity-0 tw-transition-opacity tw-duration-200 group-hover:tw-opacity-100\" \r\n [class.tw-opacity-100]=\"selectedControlId() === control._id\">\r\n <button \r\n cideEleButton\r\n variant=\"ghost\"\r\n size=\"xs\"\r\n (click)=\"editControl(control); $event.stopPropagation()\">\r\n <cide-ele-icon>edit</cide-ele-icon>\r\n </button>\r\n <button \r\n cideEleButton\r\n variant=\"ghost\"\r\n size=\"xs\"\r\n (click)=\"deleteControl(control); $event.stopPropagation()\">\r\n <cide-ele-icon>delete</cide-ele-icon>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"tw-flex tw-flex-col tw-items-center tw-justify-center tw-py-12 tw-text-center\" *ngIf=\"!loading() && controls().length === 0\">\r\n <cide-ele-icon class=\"tw-text-4xl tw-text-gray-300 tw-mb-4\">settings_input_component</cide-ele-icon>\r\n <p class=\"tw-text-gray-500 tw-font-medium tw-mb-1\">No controls available</p>\r\n <small class=\"tw-text-gray-400\">Create controls using the form on the left</small>\r\n </div>\r\n\r\n <div class=\"tw-flex tw-flex-col tw-items-center tw-justify-center tw-py-12 tw-text-center\" *ngIf=\"loading()\">\r\n <cide-ele-icon class=\"tw-text-2xl tw-text-blue-500 tw-mb-4 tw-animate-spin\">refresh</cide-ele-icon>\r\n <p class=\"tw-text-gray-500\">Loading controls...</p>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n ", styles: [".checkbox-field{margin:.25rem 0}.checkbox-label{display:flex;flex-direction:column;gap:.25rem;cursor:pointer;padding:.75rem 0;background:transparent;border:none;border-radius:0;transition:all .2s ease}.checkbox-label:hover{background:#667eea05}.checkbox-label .checkbox-input{width:1rem;height:1rem;accent-color:#667eea;border-radius:3px;margin-bottom:.125rem}.checkbox-label .checkbox-text{font-weight:600;color:#374151;font-size:.875rem}.checkbox-label .checkbox-description{font-size:.75rem;color:#6b7280;margin-top:.125rem}@media (max-width: 640px){.main-content{padding:1rem;gap:1rem}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated", "adaptive"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideInputComponent, selector: "cide-ele-input", inputs: ["fill", "label", "labelHide", "disabled", "clearInput", "labelPlacement", "labelDir", "placeholder", "leadingIcon", "trailingIcon", "helperText", "helperTextCollapse", "hideHelperAndErrorText", "errorText", "maxlength", "minlength", "required", "autocapitalize", "autocomplete", "type", "width", "id", "ngModel", "option", "min", "max", "step", "size"], outputs: ["ngModelChange"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput", "options", "multiple", "searchable", "showSearchInput", "loading", "valueKey", "labelKey", "treeView"], outputs: ["ngModelChange", "change", "searchChange"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip", "name"] }, { kind: "component", type: CideFormFieldErrorComponent, selector: "cide-form-field-error", inputs: ["control", "formGroup", "fieldName", "customMessages"] }] });
|
|
7924
7924
|
}
|
|
7925
7925
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideCorePageControlsComponent, decorators: [{
|
|
7926
7926
|
type: Component,
|
|
@@ -7933,7 +7933,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
7933
7933
|
CideSelectComponent,
|
|
7934
7934
|
CideIconComponent,
|
|
7935
7935
|
CideFormFieldErrorComponent
|
|
7936
|
-
], template: "<!-- Page Controls Container -->\r\n<div class=\"tw-flex tw-flex-col tw-h-full tw-bg-gray-50\">\r\n <!-- Header Section -->\r\n <div class=\"tw-bg-white tw-border-b tw-border-gray-200 tw-px-6 tw-py-4\">\r\n <div class=\"tw-flex tw-items-center tw-justify-between\">\r\n <div class=\"tw-flex tw-items-center tw-space-x-4\">\r\n <button \r\n cideEleButton\r\n variant=\"ghost\"\r\n size=\"sm\"\r\n (click)=\"goBack()\"\r\n class=\"tw-flex tw-items-center tw-justify-center tw-w-8 tw-h-8 tw-text-gray-600 hover:tw-text-gray-900 hover:tw-bg-gray-100 tw-rounded-md tw-transition-colors\">\r\n <cide-ele-icon>arrow_back</cide-ele-icon>\r\n </button>\r\n <div class=\"tw-flex tw-items-center tw-space-x-3\">\r\n <cide-ele-icon class=\"tw-text-blue-600 tw-text-xl\">settings</cide-ele-icon>\r\n <div>\r\n <h1 class=\"tw-text-xl tw-font-semibold tw-text-gray-900 tw-mb-0\">Control Management</h1>\r\n <p class=\"tw-text-sm tw-text-gray-500 tw-mb-0\">Page: {{ pageTitle() }}</p>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Error Message -->\r\n <div class=\"tw-bg-red-50 tw-border tw-border-red-200 tw-rounded-md tw-p-4 tw-mx-6 tw-mt-4 tw-flex tw-items-start tw-space-x-3\" *ngIf=\"error()\">\r\n <cide-ele-icon class=\"tw-text-red-500 tw-flex-shrink-0 tw-mt-0.5\">error</cide-ele-icon>\r\n <div>\r\n <h3 class=\"tw-text-red-800 tw-font-medium tw-mb-1\">Error</h3>\r\n <p class=\"tw-text-red-700 tw-text-sm tw-mb-0\">{{ error() }}</p>\r\n </div>\r\n </div>\r\n\r\n <!-- Main Content Area -->\r\n <div class=\"tw-flex tw-flex-1 tw-gap-6 tw-p-6 tw-overflow-hidden lg:tw-flex-row tw-flex-col\">\r\n <!-- Form Section -->\r\n <div class=\"tw-w-full lg:tw-w-3/5 tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-flex tw-flex-col\">\r\n <div class=\"tw-flex tw-items-center tw-space-x-3 tw-p-6 tw-border-b tw-border-gray-200\">\r\n <cide-ele-icon class=\"tw-text-blue-600\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\r\n <h3 class=\"tw-text-lg tw-font-medium tw-text-gray-900 tw-mb-0\">{{ isEditMode() ? 'Edit Control' : 'Quick Add Control' }}</h3>\r\n </div>\r\n\r\n <!-- Form -->\r\n <form [formGroup]=\"controlForm\" (ngSubmit)=\"saveControl()\" class=\"tw-flex tw-flex-col tw-flex-1 tw-p-6 tw-overflow-y-auto\">\r\n <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-2 tw-gap-4 tw-mb-6\">\r\n \r\n <!-- Basic Information Section -->\r\n <!-- Control Key -->\r\n <div class=\"tw-space-y-1\">\r\n <cide-ele-input\r\n id=\"sype_key\"\r\n formControlName=\"sype_key\"\r\n placeholder=\"Enter control key\"\r\n label=\"Control Key\"\r\n size=\"sm\">\r\n </cide-ele-input>\r\n </div>\r\n\r\n <!-- Control Label -->\r\n <div class=\"tw-space-y-1\">\r\n <cide-ele-input\r\n id=\"sype_label\"\r\n formControlName=\"sype_label\"\r\n placeholder=\"Enter control label\"\r\n label=\"Control Label\"\r\n size=\"sm\">\r\n </cide-ele-input>\r\n </div>\r\n\r\n <!-- Control Type -->\r\n <div class=\"tw-space-y-1\">\r\n <cide-ele-select\r\n id=\"sype_type\"\r\n formControlName=\"sype_type\"\r\n [options]=\"[\r\n { value: 'text', label: 'Text Input' },\r\n { value: 'textarea', label: 'Text Area' },\r\n { value: 'select', label: 'Select' },\r\n { value: 'checkbox', label: 'Checkbox' },\r\n { value: 'radio', label: 'Radio' },\r\n { value: 'date', label: 'Date' },\r\n { value: 'number', label: 'Number' },\r\n { value: 'email', label: 'Email' },\r\n { value: 'password', label: 'Password' },\r\n { value: 'file', label: 'File Upload' }\r\n ]\"\r\n label=\"Control Type\"\r\n size=\"sm\">\r\n </cide-ele-select>\r\n </div>\r\n\r\n <!-- Status - Checkbox aligned properly -->\r\n <div class=\"tw-space-y-1\">\r\n <cide-ele-input\r\n id=\"sype_isactive\"\r\n type=\"checkbox\"\r\n formControlName=\"sype_isactive\"\r\n label=\"Active Status\"\r\n size=\"sm\">\r\n </cide-ele-input>\r\n </div>\r\n\r\n <!-- Placeholder -->\r\n <div class=\"tw-space-y-1\">\r\n <cide-ele-input\r\n id=\"sype_placeholder\"\r\n formControlName=\"sype_placeholder\"\r\n placeholder=\"Enter placeholder text\"\r\n label=\"Placeholder\"\r\n size=\"sm\">\r\n </cide-ele-input>\r\n </div>\r\n\r\n <!-- Auto Complete - Checkbox aligned properly -->\r\n <div class=\"tw-space-y-1\">\r\n <cide-ele-input\r\n id=\"sype_auto_complete\"\r\n type=\"checkbox\"\r\n formControlName=\"sype_auto_complete\"\r\n label=\"Auto Complete\"\r\n size=\"sm\">\r\n </cide-ele-input>\r\n </div>\r\n\r\n <!-- Tooltip -->\r\n <div class=\"tw-space-y-1\">\r\n <cide-ele-input\r\n id=\"sype_tooltip\"\r\n formControlName=\"sype_tooltip\"\r\n placeholder=\"Enter tooltip text\"\r\n label=\"Tooltip\"\r\n size=\"sm\">\r\n </cide-ele-input>\r\n </div>\r\n\r\n <!-- Validation & Sizing Section -->\r\n <!-- Min/Max Length - Side by side -->\r\n <div class=\"tw-col-span-2 tw-flex tw-gap-4\">\r\n <div class=\"tw-flex-1 tw-space-y-1\">\r\n <cide-ele-input\r\n id=\"sype_min_length\"\r\n type=\"number\"\r\n formControlName=\"sype_min_length\"\r\n placeholder=\"0\"\r\n label=\"Min Length\"\r\n size=\"xs\">\r\n </cide-ele-input>\r\n </div>\r\n <div class=\"tw-flex-1 tw-space-y-1\">\r\n <cide-ele-input\r\n id=\"sype_max_length\"\r\n type=\"number\"\r\n formControlName=\"sype_max_length\"\r\n placeholder=\"20\"\r\n label=\"Max Length\"\r\n size=\"xs\">\r\n </cide-ele-input>\r\n </div>\r\n </div>\r\n\r\n <!-- Size & Label Placement - Side by side -->\r\n <div class=\"tw-col-span-2 tw-flex tw-gap-4\">\r\n <div class=\"tw-flex-1 tw-space-y-1\">\r\n <cide-ele-select\r\n id=\"sype_size\"\r\n formControlName=\"sype_size\"\r\n label=\"Size\"\r\n size=\"xs\"\r\n [options]=\"[\r\n { value: 'xs', label: 'XS' },\r\n { value: 'sm', label: 'SM' },\r\n { value: 'md', label: 'MD' },\r\n { value: 'lg', label: 'LG' },\r\n { value: 'xl', label: 'XL' },\r\n { value: 'xxl', label: 'XXL' }\r\n ]\">\r\n </cide-ele-select>\r\n </div>\r\n <div class=\"tw-flex-1 tw-space-y-1\">\r\n <cide-ele-select\r\n id=\"sype_label_placement\"\r\n formControlName=\"sype_label_placement\"\r\n label=\"Label Placement\"\r\n size=\"xs\"\r\n [options]=\"[\r\n { value: 'left', label: 'Left' },\r\n { value: 'floating', label: 'Floating' },\r\n { value: 'fixed', label: 'Fixed' }\r\n ]\">\r\n </cide-ele-select>\r\n </div>\r\n </div>\r\n\r\n <!-- Width & Height - Side by side -->\r\n <div class=\"tw-col-span-2 tw-flex tw-gap-4\">\r\n <div class=\"tw-flex-1 tw-space-y-1\">\r\n <cide-ele-input\r\n id=\"sype_width\"\r\n type=\"text\"\r\n formControlName=\"sype_width\"\r\n placeholder=\"20px\"\r\n label=\"Width\"\r\n size=\"xs\">\r\n </cide-ele-input>\r\n </div>\r\n <div class=\"tw-flex-1 tw-space-y-1\">\r\n <cide-ele-input\r\n id=\"sype_height\"\r\n type=\"text\"\r\n formControlName=\"sype_height\"\r\n placeholder=\"20px\"\r\n label=\"Height\"\r\n size=\"xs\">\r\n </cide-ele-input>\r\n </div>\r\n </div>\r\n\r\n <!-- Leading Icon -->\r\n <div class=\"tw-space-y-1\">\r\n <cide-ele-input\r\n id=\"sype_leading_icon\"\r\n formControlName=\"sype_leading_icon\"\r\n placeholder=\"Enter icon name\"\r\n label=\"Leading Icon\"\r\n size=\"sm\">\r\n </cide-ele-input>\r\n </div>\r\n\r\n <!-- Default Value -->\r\n <div class=\"tw-space-y-1\">\r\n <cide-ele-input\r\n id=\"sype_default\"\r\n formControlName=\"sype_default\"\r\n placeholder=\"Enter default value\"\r\n label=\"Default Value\"\r\n size=\"sm\">\r\n </cide-ele-input>\r\n </div>\r\n\r\n <!-- Regex Pattern -->\r\n <div class=\"tw-space-y-1\">\r\n <cide-ele-input\r\n id=\"sype_regex\"\r\n formControlName=\"sype_regex\"\r\n placeholder=\"Enter regex pattern\"\r\n label=\"Regex Pattern\"\r\n size=\"sm\">\r\n </cide-ele-input>\r\n </div>\r\n\r\n <!-- Option Key -->\r\n <div class=\"tw-space-y-1\">\r\n <cide-ele-input\r\n id=\"sype_option_key\"\r\n formControlName=\"sype_option_key\"\r\n placeholder=\"Enter option key\"\r\n label=\"Option Key\"\r\n size=\"sm\">\r\n </cide-ele-input>\r\n </div>\r\n\r\n <!-- Entity ID (Auto-assigned from AppState) - Hidden -->\r\n <div class=\"tw-space-y-1\" style=\"display: none;\">\r\n <cide-ele-input\r\n id=\"sype_entity_id_syen\"\r\n formControlName=\"sype_entity_id_syen\"\r\n placeholder=\"Auto-assigned from system\"\r\n label=\"Entity ID (Auto-assigned)\"\r\n size=\"sm\"\r\n readonly>\r\n </cide-ele-input>\r\n </div>\r\n\r\n <!-- Control Options -->\r\n <div class=\"tw-col-span-2 tw-space-y-1\">\r\n <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-mb-3\">Control Options</h6>\r\n <div class=\"tw-grid tw-grid-cols-1 sm:tw-grid-cols-2 lg:tw-grid-cols-3 tw-gap-3\">\r\n \r\n <!-- Required -->\r\n <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\n <cide-ele-input\r\n id=\"sype_required\"\r\n type=\"checkbox\"\r\n formControlName=\"sype_required\"\r\n label=\"Required\"\r\n size=\"xs\">\r\n </cide-ele-input>\r\n </div>\r\n\r\n <!-- Disabled -->\r\n <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\n <cide-ele-input\r\n id=\"sype_disabled\"\r\n type=\"checkbox\"\r\n formControlName=\"sype_disabled\"\r\n label=\"Disabled\"\r\n size=\"xs\">\r\n </cide-ele-input>\r\n </div>\r\n\r\n <!-- Hide Label -->\r\n <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\n <cide-ele-input\r\n id=\"sype_label_hide\"\r\n type=\"checkbox\"\r\n formControlName=\"sype_label_hide\"\r\n label=\"Hide Label\"\r\n size=\"xs\">\r\n </cide-ele-input>\r\n </div>\r\n\r\n <!-- Hide Helper Text -->\r\n <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\n <cide-ele-input\r\n id=\"sype_hide_helper_and_error_text\"\r\n type=\"checkbox\"\r\n formControlName=\"sype_hide_helper_and_error_text\"\r\n label=\"Hide Helper Text\"\r\n size=\"xs\">\r\n </cide-ele-input>\r\n </div>\r\n\r\n <!-- Helper Text Collapse -->\r\n <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\n <cide-ele-input\r\n id=\"sype_helper_text_collapse\"\r\n type=\"checkbox\"\r\n formControlName=\"sype_helper_text_collapse\"\r\n label=\"Collapse Helper\"\r\n size=\"xs\">\r\n </cide-ele-input>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n <!-- Form Actions -->\r\n <div class=\"tw-flex tw-justify-between tw-items-center tw-pt-4 tw-border-t tw-border-gray-200 tw-mt-auto\">\r\n <!-- Error Message (Left Side) -->\r\n <cide-form-field-error [formGroup]=\"controlForm\"></cide-form-field-error>\r\n \r\n <!-- Action Buttons (Right Side) -->\r\n <div class=\"tw-flex tw-gap-3\">\r\n <button \r\n cideEleButton\r\n type=\"button\"\r\n variant=\"outline\"\r\n (click)=\"cancelForm()\"\r\n [disabled]=\"loading()\">\r\n Cancel\r\n </button>\r\n <button \r\n cideEleButton\r\n type=\"submit\"\r\n variant=\"primary\"\r\n [disabled]=\"loading()\">\r\n {{ isEditMode() ? 'Update Control' : 'Create Control' }}\r\n </button>\r\n </div>\r\n </div>\r\n </form>\r\n </div>\r\n\r\n <!-- Controls List Section -->\r\n <div class=\"tw-w-full lg:tw-w-2/5 tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-flex tw-flex-col lg:tw-max-h-none tw-max-h-96\">\r\n <div class=\"tw-p-6 tw-border-b tw-border-gray-200\">\r\n <h3 class=\"tw-text-lg tw-font-medium tw-text-gray-900 tw-mb-1\">Page Controls</h3>\r\n <p class=\"tw-text-sm tw-text-gray-500 tw-mb-0\">Controls connected to this page</p>\r\n </div>\r\n \r\n <div class=\"tw-flex-1 tw-overflow-y-auto tw-p-4\" *ngIf=\"!loading() && controls().length > 0\">\r\n <div \r\n class=\"tw-bg-gray-50 tw-border tw-border-gray-200 tw-rounded-lg tw-p-4 tw-mb-3 tw-cursor-pointer tw-transition-all tw-duration-200 hover:tw-shadow-md hover:tw-border-gray-300 focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-blue-500 focus:tw-ring-offset-2\" \r\n *ngFor=\"let control of controls(); trackBy: trackByControlId\"\r\n [class.tw-bg-blue-50]=\"selectedControlId() === control._id\"\r\n [class.tw-border-blue-300]=\"selectedControlId() === control._id\"\r\n [class.tw-shadow-md]=\"selectedControlId() === control._id\"\r\n (click)=\"selectControl(control)\"\r\n (keyup.enter)=\"selectControl(control)\"\r\n (keyup.space)=\"selectControl(control)\"\r\n tabindex=\"0\"\r\n role=\"button\"\r\n [attr.aria-label]=\"'Select control ' + (control.sype_label || control.sype_key)\">\r\n <div class=\"tw-flex tw-items-start tw-space-x-3\">\r\n <div class=\"tw-flex-shrink-0 tw-w-10 tw-h-10 tw-bg-blue-100 tw-rounded-lg tw-flex tw-items-center tw-justify-center\">\r\n <cide-ele-icon class=\"tw-text-blue-600\">settings_input_component</cide-ele-icon>\r\n </div>\r\n <div class=\"tw-flex-1 tw-min-w-0\">\r\n <h4 class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-mb-1 tw-truncate\">{{ control.sype_label || control.sype_key }}</h4>\r\n <p class=\"tw-text-xs tw-text-gray-500 tw-mb-2 tw-truncate\">{{ control.sype_tooltip || 'No tooltip' }}</p>\r\n <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\n <span class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-gray-100 tw-text-gray-800\">{{ control.sype_type }}</span>\r\n <span class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium\" \r\n [class.tw-bg-red-100]=\"!control.sype_isactive\"\r\n [class.tw-text-red-800]=\"!control.sype_isactive\"\r\n [class.tw-bg-green-100]=\"control.sype_isactive\"\r\n [class.tw-text-green-800]=\"control.sype_isactive\">\r\n {{ control.sype_isactive ? 'Active' : 'Inactive' }}\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"tw-flex tw-items-center tw-space-x-1 tw-opacity-0 tw-transition-opacity tw-duration-200 group-hover:tw-opacity-100\" \r\n [class.tw-opacity-100]=\"selectedControlId() === control._id\">\r\n <button \r\n cideEleButton\r\n variant=\"ghost\"\r\n size=\"sm\"\r\n (click)=\"editControl(control); $event.stopPropagation()\">\r\n <cide-ele-icon>edit</cide-ele-icon>\r\n </button>\r\n <button \r\n cideEleButton\r\n variant=\"ghost\"\r\n size=\"sm\"\r\n (click)=\"deleteControl(control); $event.stopPropagation()\">\r\n <cide-ele-icon>delete</cide-ele-icon>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"tw-flex tw-flex-col tw-items-center tw-justify-center tw-py-12 tw-text-center\" *ngIf=\"!loading() && controls().length === 0\">\r\n <cide-ele-icon class=\"tw-text-4xl tw-text-gray-300 tw-mb-4\">settings_input_component</cide-ele-icon>\r\n <p class=\"tw-text-gray-500 tw-font-medium tw-mb-1\">No controls available</p>\r\n <small class=\"tw-text-gray-400\">Create controls using the form on the left</small>\r\n </div>\r\n\r\n <div class=\"tw-flex tw-flex-col tw-items-center tw-justify-center tw-py-12 tw-text-center\" *ngIf=\"loading()\">\r\n <cide-ele-icon class=\"tw-text-2xl tw-text-blue-500 tw-mb-4 tw-animate-spin\">refresh</cide-ele-icon>\r\n <p class=\"tw-text-gray-500\">Loading controls...</p>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n ", styles: [".checkbox-field{margin:.25rem 0}.checkbox-label{display:flex;flex-direction:column;gap:.25rem;cursor:pointer;padding:.75rem 0;background:transparent;border:none;border-radius:0;transition:all .2s ease}.checkbox-label:hover{background:#667eea05}.checkbox-label .checkbox-input{width:1rem;height:1rem;accent-color:#667eea;border-radius:3px;margin-bottom:.125rem}.checkbox-label .checkbox-text{font-weight:600;color:#374151;font-size:.875rem}.checkbox-label .checkbox-description{font-size:.75rem;color:#6b7280;margin-top:.125rem}@media (max-width: 640px){.main-content{padding:1rem;gap:1rem}}\n"] }]
|
|
7936
|
+
], template: "<!-- Page Controls Container -->\r\n<div class=\"tw-flex tw-flex-col tw-h-full tw-bg-gray-50\">\r\n <!-- Header Section -->\r\n <div class=\"tw-bg-white tw-border-b tw-border-gray-200 tw-px-6 tw-py-4\">\r\n <div class=\"tw-flex tw-items-center tw-justify-between\">\r\n <div class=\"tw-flex tw-items-center tw-space-x-4\">\r\n <button \r\n cideEleButton\r\n variant=\"ghost\"\r\n size=\"xs\"\r\n (click)=\"goBack()\"\r\n class=\"tw-flex tw-items-center tw-justify-center tw-w-8 tw-h-8 tw-text-gray-600 hover:tw-text-gray-900 hover:tw-bg-gray-100 tw-rounded-md tw-transition-colors\">\r\n <cide-ele-icon>arrow_back</cide-ele-icon>\r\n </button>\r\n <div class=\"tw-flex tw-items-center tw-space-x-3\">\r\n <cide-ele-icon class=\"tw-text-blue-600 tw-text-xl\">settings</cide-ele-icon>\r\n <div>\r\n <h1 class=\"tw-text-xl tw-font-semibold tw-text-gray-900 tw-mb-0\">Control Management</h1>\r\n <p class=\"tw-text-sm tw-text-gray-500 tw-mb-0\">Page: {{ pageTitle() }}</p>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Error Message -->\r\n <div class=\"tw-bg-red-50 tw-border tw-border-red-200 tw-rounded-md tw-p-4 tw-mx-6 tw-mt-4 tw-flex tw-items-start tw-space-x-3\" *ngIf=\"error()\">\r\n <cide-ele-icon class=\"tw-text-red-500 tw-flex-shrink-0 tw-mt-0.5\">error</cide-ele-icon>\r\n <div>\r\n <h3 class=\"tw-text-red-800 tw-font-medium tw-mb-1\">Error</h3>\r\n <p class=\"tw-text-red-700 tw-text-sm tw-mb-0\">{{ error() }}</p>\r\n </div>\r\n </div>\r\n\r\n <!-- Main Content Area -->\r\n <div class=\"tw-flex tw-flex-1 tw-gap-6 tw-p-6 tw-overflow-hidden lg:tw-flex-row tw-flex-col\">\r\n <!-- Form Section -->\r\n <div class=\"tw-w-full lg:tw-w-3/5 tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-flex tw-flex-col\">\r\n <div class=\"tw-flex tw-items-center tw-space-x-3 tw-p-6 tw-border-b tw-border-gray-200\">\r\n <cide-ele-icon class=\"tw-text-blue-600\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\r\n <h3 class=\"tw-text-lg tw-font-medium tw-text-gray-900 tw-mb-0\">{{ isEditMode() ? 'Edit Control' : 'Quick Add Control' }}</h3>\r\n </div>\r\n\r\n <!-- Form -->\r\n <form [formGroup]=\"controlForm\" (ngSubmit)=\"saveControl()\" class=\"tw-flex tw-flex-col tw-flex-1 tw-p-6 tw-overflow-y-auto\">\r\n <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-2 tw-gap-4 tw-mb-6\">\r\n \r\n <!-- Basic Information Section -->\r\n <!-- Control Key -->\r\n <div class=\"tw-space-y-1\">\r\n <cide-ele-input\r\n id=\"sype_key\"\r\n formControlName=\"sype_key\"\r\n placeholder=\"Enter control key\"\r\n label=\"Control Key\"\r\n size=\"sm\">\r\n </cide-ele-input>\r\n </div>\r\n\r\n <!-- Control Label -->\r\n <div class=\"tw-space-y-1\">\r\n <cide-ele-input\r\n id=\"sype_label\"\r\n formControlName=\"sype_label\"\r\n placeholder=\"Enter control label\"\r\n label=\"Control Label\"\r\n size=\"sm\">\r\n </cide-ele-input>\r\n </div>\r\n\r\n <!-- Control Type -->\r\n <div class=\"tw-space-y-1\">\r\n <cide-ele-select\r\n id=\"sype_type\"\r\n formControlName=\"sype_type\"\r\n [options]=\"[\r\n { value: 'text', label: 'Text Input' },\r\n { value: 'textarea', label: 'Text Area' },\r\n { value: 'select', label: 'Select' },\r\n { value: 'checkbox', label: 'Checkbox' },\r\n { value: 'radio', label: 'Radio' },\r\n { value: 'date', label: 'Date' },\r\n { value: 'number', label: 'Number' },\r\n { value: 'email', label: 'Email' },\r\n { value: 'password', label: 'Password' },\r\n { value: 'file', label: 'File Upload' }\r\n ]\"\r\n label=\"Control Type\"\r\n size=\"sm\">\r\n </cide-ele-select>\r\n </div>\r\n\r\n <!-- Status - Checkbox aligned properly -->\r\n <div class=\"tw-space-y-1\">\r\n <cide-ele-input\r\n id=\"sype_isactive\"\r\n type=\"checkbox\"\r\n formControlName=\"sype_isactive\"\r\n label=\"Active Status\"\r\n size=\"sm\">\r\n </cide-ele-input>\r\n </div>\r\n\r\n <!-- Placeholder -->\r\n <div class=\"tw-space-y-1\">\r\n <cide-ele-input\r\n id=\"sype_placeholder\"\r\n formControlName=\"sype_placeholder\"\r\n placeholder=\"Enter placeholder text\"\r\n label=\"Placeholder\"\r\n size=\"sm\">\r\n </cide-ele-input>\r\n </div>\r\n\r\n <!-- Auto Complete - Checkbox aligned properly -->\r\n <div class=\"tw-space-y-1\">\r\n <cide-ele-input\r\n id=\"sype_auto_complete\"\r\n type=\"checkbox\"\r\n formControlName=\"sype_auto_complete\"\r\n label=\"Auto Complete\"\r\n size=\"sm\">\r\n </cide-ele-input>\r\n </div>\r\n\r\n <!-- Tooltip -->\r\n <div class=\"tw-space-y-1\">\r\n <cide-ele-input\r\n id=\"sype_tooltip\"\r\n formControlName=\"sype_tooltip\"\r\n placeholder=\"Enter tooltip text\"\r\n label=\"Tooltip\"\r\n size=\"sm\">\r\n </cide-ele-input>\r\n </div>\r\n\r\n <!-- Validation & Sizing Section -->\r\n <!-- Min/Max Length - Side by side -->\r\n <div class=\"tw-col-span-2 tw-flex tw-gap-4\">\r\n <div class=\"tw-flex-1 tw-space-y-1\">\r\n <cide-ele-input\r\n id=\"sype_min_length\"\r\n type=\"number\"\r\n formControlName=\"sype_min_length\"\r\n placeholder=\"0\"\r\n label=\"Min Length\"\r\n size=\"xs\">\r\n </cide-ele-input>\r\n </div>\r\n <div class=\"tw-flex-1 tw-space-y-1\">\r\n <cide-ele-input\r\n id=\"sype_max_length\"\r\n type=\"number\"\r\n formControlName=\"sype_max_length\"\r\n placeholder=\"20\"\r\n label=\"Max Length\"\r\n size=\"xs\">\r\n </cide-ele-input>\r\n </div>\r\n </div>\r\n\r\n <!-- Size & Label Placement - Side by side -->\r\n <div class=\"tw-col-span-2 tw-flex tw-gap-4\">\r\n <div class=\"tw-flex-1 tw-space-y-1\">\r\n <cide-ele-select\r\n id=\"sype_size\"\r\n formControlName=\"sype_size\"\r\n label=\"Size\"\r\n size=\"xs\"\r\n [options]=\"[\r\n { value: 'xs', label: 'XS' },\r\n { value: 'sm', label: 'SM' },\r\n { value: 'md', label: 'MD' },\r\n { value: 'lg', label: 'LG' },\r\n { value: 'xl', label: 'XL' },\r\n { value: 'xxl', label: 'XXL' }\r\n ]\">\r\n </cide-ele-select>\r\n </div>\r\n <div class=\"tw-flex-1 tw-space-y-1\">\r\n <cide-ele-select\r\n id=\"sype_label_placement\"\r\n formControlName=\"sype_label_placement\"\r\n label=\"Label Placement\"\r\n size=\"xs\"\r\n [options]=\"[\r\n { value: 'left', label: 'Left' },\r\n { value: 'floating', label: 'Floating' },\r\n { value: 'fixed', label: 'Fixed' }\r\n ]\">\r\n </cide-ele-select>\r\n </div>\r\n </div>\r\n\r\n <!-- Width & Height - Side by side -->\r\n <div class=\"tw-col-span-2 tw-flex tw-gap-4\">\r\n <div class=\"tw-flex-1 tw-space-y-1\">\r\n <cide-ele-input\r\n id=\"sype_width\"\r\n type=\"text\"\r\n formControlName=\"sype_width\"\r\n placeholder=\"20px\"\r\n label=\"Width\"\r\n size=\"xs\">\r\n </cide-ele-input>\r\n </div>\r\n <div class=\"tw-flex-1 tw-space-y-1\">\r\n <cide-ele-input\r\n id=\"sype_height\"\r\n type=\"text\"\r\n formControlName=\"sype_height\"\r\n placeholder=\"20px\"\r\n label=\"Height\"\r\n size=\"xs\">\r\n </cide-ele-input>\r\n </div>\r\n </div>\r\n\r\n <!-- Leading Icon -->\r\n <div class=\"tw-space-y-1\">\r\n <cide-ele-input\r\n id=\"sype_leading_icon\"\r\n formControlName=\"sype_leading_icon\"\r\n placeholder=\"Enter icon name\"\r\n label=\"Leading Icon\"\r\n size=\"sm\">\r\n </cide-ele-input>\r\n </div>\r\n\r\n <!-- Default Value -->\r\n <div class=\"tw-space-y-1\">\r\n <cide-ele-input\r\n id=\"sype_default\"\r\n formControlName=\"sype_default\"\r\n placeholder=\"Enter default value\"\r\n label=\"Default Value\"\r\n size=\"sm\">\r\n </cide-ele-input>\r\n </div>\r\n\r\n <!-- Regex Pattern -->\r\n <div class=\"tw-space-y-1\">\r\n <cide-ele-input\r\n id=\"sype_regex\"\r\n formControlName=\"sype_regex\"\r\n placeholder=\"Enter regex pattern\"\r\n label=\"Regex Pattern\"\r\n size=\"sm\">\r\n </cide-ele-input>\r\n </div>\r\n\r\n <!-- Option Key -->\r\n <div class=\"tw-space-y-1\">\r\n <cide-ele-input\r\n id=\"sype_option_key\"\r\n formControlName=\"sype_option_key\"\r\n placeholder=\"Enter option key\"\r\n label=\"Option Key\"\r\n size=\"sm\">\r\n </cide-ele-input>\r\n </div>\r\n\r\n <!-- Entity ID (Auto-assigned from AppState) - Hidden -->\r\n <div class=\"tw-space-y-1\" style=\"display: none;\">\r\n <cide-ele-input\r\n id=\"sype_entity_id_syen\"\r\n formControlName=\"sype_entity_id_syen\"\r\n placeholder=\"Auto-assigned from system\"\r\n label=\"Entity ID (Auto-assigned)\"\r\n size=\"sm\"\r\n readonly>\r\n </cide-ele-input>\r\n </div>\r\n\r\n <!-- Control Options -->\r\n <div class=\"tw-col-span-2 tw-space-y-1\">\r\n <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-mb-3\">Control Options</h6>\r\n <div class=\"tw-grid tw-grid-cols-1 sm:tw-grid-cols-2 lg:tw-grid-cols-3 tw-gap-3\">\r\n \r\n <!-- Required -->\r\n <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\n <cide-ele-input\r\n id=\"sype_required\"\r\n type=\"checkbox\"\r\n formControlName=\"sype_required\"\r\n label=\"Required\"\r\n size=\"xs\">\r\n </cide-ele-input>\r\n </div>\r\n\r\n <!-- Disabled -->\r\n <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\n <cide-ele-input\r\n id=\"sype_disabled\"\r\n type=\"checkbox\"\r\n formControlName=\"sype_disabled\"\r\n label=\"Disabled\"\r\n size=\"xs\">\r\n </cide-ele-input>\r\n </div>\r\n\r\n <!-- Hide Label -->\r\n <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\n <cide-ele-input\r\n id=\"sype_label_hide\"\r\n type=\"checkbox\"\r\n formControlName=\"sype_label_hide\"\r\n label=\"Hide Label\"\r\n size=\"xs\">\r\n </cide-ele-input>\r\n </div>\r\n\r\n <!-- Hide Helper Text -->\r\n <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\n <cide-ele-input\r\n id=\"sype_hide_helper_and_error_text\"\r\n type=\"checkbox\"\r\n formControlName=\"sype_hide_helper_and_error_text\"\r\n label=\"Hide Helper Text\"\r\n size=\"xs\">\r\n </cide-ele-input>\r\n </div>\r\n\r\n <!-- Helper Text Collapse -->\r\n <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\n <cide-ele-input\r\n id=\"sype_helper_text_collapse\"\r\n type=\"checkbox\"\r\n formControlName=\"sype_helper_text_collapse\"\r\n label=\"Collapse Helper\"\r\n size=\"xs\">\r\n </cide-ele-input>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n <!-- Form Actions -->\r\n <div class=\"tw-flex tw-justify-between tw-items-center tw-pt-4 tw-border-t tw-border-gray-200 tw-mt-auto\">\r\n <!-- Error Message (Left Side) -->\r\n <cide-form-field-error [formGroup]=\"controlForm\"></cide-form-field-error>\r\n \r\n <!-- Action Buttons (Right Side) -->\r\n <div class=\"tw-flex tw-gap-3\">\r\n <button \r\n cideEleButton\r\n type=\"button\"\r\n variant=\"outline\"\r\n (click)=\"cancelForm()\"\r\n [disabled]=\"loading()\">\r\n Cancel\r\n </button>\r\n <button \r\n cideEleButton\r\n type=\"submit\"\r\n variant=\"primary\"\r\n [disabled]=\"loading()\">\r\n {{ isEditMode() ? 'Update Control' : 'Create Control' }}\r\n </button>\r\n </div>\r\n </div>\r\n </form>\r\n </div>\r\n\r\n <!-- Controls List Section -->\r\n <div class=\"tw-w-full lg:tw-w-2/5 tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-flex tw-flex-col lg:tw-max-h-none tw-max-h-96\">\r\n <div class=\"tw-p-6 tw-border-b tw-border-gray-200\">\r\n <h3 class=\"tw-text-lg tw-font-medium tw-text-gray-900 tw-mb-1\">Page Controls</h3>\r\n <p class=\"tw-text-sm tw-text-gray-500 tw-mb-0\">Controls connected to this page</p>\r\n </div>\r\n \r\n <div class=\"tw-flex-1 tw-overflow-y-auto tw-p-4\" *ngIf=\"!loading() && controls().length > 0\">\r\n <div \r\n class=\"tw-bg-gray-50 tw-border tw-border-gray-200 tw-rounded-lg tw-p-4 tw-mb-3 tw-cursor-pointer tw-transition-all tw-duration-200 hover:tw-shadow-md hover:tw-border-gray-300 focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-blue-500 focus:tw-ring-offset-2\" \r\n *ngFor=\"let control of controls(); trackBy: trackByControlId\"\r\n [class.tw-bg-blue-50]=\"selectedControlId() === control._id\"\r\n [class.tw-border-blue-300]=\"selectedControlId() === control._id\"\r\n [class.tw-shadow-md]=\"selectedControlId() === control._id\"\r\n (click)=\"selectControl(control)\"\r\n (keyup.enter)=\"selectControl(control)\"\r\n (keyup.space)=\"selectControl(control)\"\r\n tabindex=\"0\"\r\n role=\"button\"\r\n [attr.aria-label]=\"'Select control ' + (control.sype_label || control.sype_key)\">\r\n <div class=\"tw-flex tw-items-start tw-space-x-3\">\r\n <div class=\"tw-flex-shrink-0 tw-w-10 tw-h-10 tw-bg-blue-100 tw-rounded-lg tw-flex tw-items-center tw-justify-center\">\r\n <cide-ele-icon class=\"tw-text-blue-600\">settings_input_component</cide-ele-icon>\r\n </div>\r\n <div class=\"tw-flex-1 tw-min-w-0\">\r\n <h4 class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-mb-1 tw-truncate\">{{ control.sype_label || control.sype_key }}</h4>\r\n <p class=\"tw-text-xs tw-text-gray-500 tw-mb-2 tw-truncate\">{{ control.sype_tooltip || 'No tooltip' }}</p>\r\n <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\n <span class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-gray-100 tw-text-gray-800\">{{ control.sype_type }}</span>\r\n <span class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium\" \r\n [class.tw-bg-red-100]=\"!control.sype_isactive\"\r\n [class.tw-text-red-800]=\"!control.sype_isactive\"\r\n [class.tw-bg-green-100]=\"control.sype_isactive\"\r\n [class.tw-text-green-800]=\"control.sype_isactive\">\r\n {{ control.sype_isactive ? 'Active' : 'Inactive' }}\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"tw-flex tw-items-center tw-space-x-1 tw-opacity-0 tw-transition-opacity tw-duration-200 group-hover:tw-opacity-100\" \r\n [class.tw-opacity-100]=\"selectedControlId() === control._id\">\r\n <button \r\n cideEleButton\r\n variant=\"ghost\"\r\n size=\"xs\"\r\n (click)=\"editControl(control); $event.stopPropagation()\">\r\n <cide-ele-icon>edit</cide-ele-icon>\r\n </button>\r\n <button \r\n cideEleButton\r\n variant=\"ghost\"\r\n size=\"xs\"\r\n (click)=\"deleteControl(control); $event.stopPropagation()\">\r\n <cide-ele-icon>delete</cide-ele-icon>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"tw-flex tw-flex-col tw-items-center tw-justify-center tw-py-12 tw-text-center\" *ngIf=\"!loading() && controls().length === 0\">\r\n <cide-ele-icon class=\"tw-text-4xl tw-text-gray-300 tw-mb-4\">settings_input_component</cide-ele-icon>\r\n <p class=\"tw-text-gray-500 tw-font-medium tw-mb-1\">No controls available</p>\r\n <small class=\"tw-text-gray-400\">Create controls using the form on the left</small>\r\n </div>\r\n\r\n <div class=\"tw-flex tw-flex-col tw-items-center tw-justify-center tw-py-12 tw-text-center\" *ngIf=\"loading()\">\r\n <cide-ele-icon class=\"tw-text-2xl tw-text-blue-500 tw-mb-4 tw-animate-spin\">refresh</cide-ele-icon>\r\n <p class=\"tw-text-gray-500\">Loading controls...</p>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n ", styles: [".checkbox-field{margin:.25rem 0}.checkbox-label{display:flex;flex-direction:column;gap:.25rem;cursor:pointer;padding:.75rem 0;background:transparent;border:none;border-radius:0;transition:all .2s ease}.checkbox-label:hover{background:#667eea05}.checkbox-label .checkbox-input{width:1rem;height:1rem;accent-color:#667eea;border-radius:3px;margin-bottom:.125rem}.checkbox-label .checkbox-text{font-weight:600;color:#374151;font-size:.875rem}.checkbox-label .checkbox-description{font-size:.75rem;color:#6b7280;margin-top:.125rem}@media (max-width: 640px){.main-content{padding:1rem;gap:1rem}}\n"] }]
|
|
7937
7937
|
}] });
|
|
7938
7938
|
|
|
7939
7939
|
var pageControls_component = /*#__PURE__*/Object.freeze({
|
|
@@ -8955,7 +8955,7 @@ class CideCoreGeneralMasterTypeComponent {
|
|
|
8955
8955
|
document.dispatchEvent(event);
|
|
8956
8956
|
}
|
|
8957
8957
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideCoreGeneralMasterTypeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
8958
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: CideCoreGeneralMasterTypeComponent, isStandalone: true, selector: "cide-core-general-master-type", viewQueries: [{ propertyName: "typeDetailsRendererTemplate", first: true, predicate: ["typeDetailsRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "typeStatusRendererTemplate", first: true, predicate: ["typeStatusRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "actionsDropdownRendererTemplate", first: true, predicate: ["actionsDropdownRendererTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- General Master Type Container -->\n<div class=\"tw-table tw-w-full tw-h-full\">\n\n <!-- Quick Add Form Section - Show if user has VIEW, CREATE, or EDIT rights -->\n @if (canView() || canCreate() || canEdit()) {\n <div class=\"tw-table-row tw-h-0\">\n <div class=\"tw-table-cell tw-px-4 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-white\">\n <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-0\">\n <div class=\"tw-flex tw-items-center tw-space-x-3 tw-mb-3\">\n <cide-ele-icon class=\"tw-text-blue-600 tw-w-4 tw-h-4\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\n <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-m-0\">{{ isEditMode() ? 'Edit Type' : 'General Master\n Type' }}</h6>\n </div>\n\n <!-- Parent Type Info (shown when adding child) -->\n @if (typeForm.get('sygmt_id_sygmt')?.value) {\n <div\n class=\"tw-flex tw-items-center tw-space-x-3 tw-bg-blue-50 tw-border tw-border-blue-200 tw-px-4 tw-py-1 tw-rounded-lg\">\n <cide-ele-icon class=\"tw-text-blue-600 tw-w-4 tw-h-4\">account_tree</cide-ele-icon>\n <div class=\"tw-flex tw-items-center tw-space-x-2\">\n <span class=\"tw-text-sm tw-text-blue-600 tw-font-medium\">{{ isEditMode() ? 'Parent:' : 'Creating child\n under:' }}</span>\n <span class=\"tw-text-sm tw-text-blue-800 tw-font-semibold\">{{ getParentTypeDisplay() }}</span>\n </div>\n <button cideEleButton variant=\"ghost\" size=\"xs\" type=\"button\" (click)=\"clearParentType()\"\n class=\"tw-text-blue-400 hover:tw-text-blue-600\">\n <svg class=\"tw-w-4 tw-h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\" />\n </svg>\n </button>\n </div>\n }\n </div>\n\n <form [formGroup]=\"typeForm\" (ngSubmit)=\"onSubmit($event)\" class=\"tw-space-y-2 tw-relative\">\n <!-- Hidden field for parent type ID -->\n <input type=\"hidden\" formControlName=\"sygmt_id_sygmt\">\n\n <!-- First Row - Basic fields -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-6 tw-gap-2\">\n <!-- Type Code -->\n <div class=\"lg:tw-col-span-1\">\n <cide-ele-input formControlName=\"sygmt_code\" label=\"Type Code\" placeholder=\"Enter type code\" size=\"sm\"\n [maxlength]=\"40\" [disabled]=\"canView() && !canCreate() && !canEdit()\">\n </cide-ele-input>\n </div>\n\n <!-- Type Title -->\n <div class=\"lg:tw-col-span-2\">\n <cide-ele-input formControlName=\"sygmt_title\" label=\"Type Title\" placeholder=\"Enter type title\" size=\"sm\"\n [maxlength]=\"100\" [disabled]=\"canView() && !canCreate() && !canEdit()\">\n </cide-ele-input>\n </div>\n\n <!-- Active Status -->\n <div class=\"lg:tw-col-span-1 tw-flex tw-items-center tw-pt-0\">\n <cide-ele-input formControlName=\"sygmt_isactive\" type=\"checkbox\" label=\"Active\" size=\"sm\"\n [disabled]=\"canView() && !canCreate() && !canEdit()\">\n </cide-ele-input>\n </div>\n </div>\n <!-- Second Row - JSON Configuration and Description/Save side by side -->\n <div class=\"tw-flex tw-gap-4\">\n <!-- JSON Configuration (60% width) -->\n <div class=\"tw-w-3/5\">\n <cide-ele-json-editor formControlName=\"sygmt_configuration\" label=\"Configuration\" size=\"sm\"\n [disabled]=\"isFormDisabled()\">\n </cide-ele-json-editor>\n </div>\n\n <!-- Description and Save Button (40% width) -->\n <div class=\"tw-w-2/5 tw-flex tw-flex-col tw-space-y-4\">\n <!-- Description -->\n <div class=\"tw-flex-1\">\n <cide-ele-textarea formControlName=\"sygmt_desc\" label=\"Description\" placeholder=\"Enter description\"\n size=\"sm\" [maxlength]=\"255\" [rows]=\"4\" [disabled]=\"canView() && !canCreate() && !canEdit()\">\n </cide-ele-textarea>\n </div>\n\n <!-- Action Buttons -->\n @if (canCreate() || canEdit()) {\n <div class=\"tw-flex tw-justify-end tw-space-x-2\">\n <button cideEleButton variant=\"outline\" size=\"sm\" type=\"button\" (click)=\"cancelForm()\"\n [disabled]=\"loading() || (canView() && !canCreate() && !canEdit())\" class=\"tw-px-4 tw-py-2\">\n Cancel\n </button>\n @if (isEditMode() ? canEdit() : canCreate()) {\n <button cideEleButton variant=\"primary\" size=\"sm\" type=\"submit\" [disabled]=\"loading()\"\n class=\"tw-px-4 tw-py-2\" [leftIcon]=\"isEditMode() ? 'edit' : 'add'\">\n {{ isEditMode() ? 'Update' : 'Save' }}\n </button>\n }\n </div>\n }\n </div>\n </div>\n </form>\n </div>\n </div>\n }\n\n <!-- Header Section with Filters -->\n <div class=\"tw-table-row tw-h-0\">\n <div class=\"tw-table-cell tw-px-4 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\n\n <!-- Error Message -->\n @if (error()) {\n <div class=\"tw-mt-3 tw-p-3 tw-bg-red-50 tw-border tw-border-red-200 tw-rounded-md\">\n <div class=\"tw-flex tw-items-start\">\n <cide-ele-icon name=\"error\" class=\"tw-text-red-400 tw-w-4 tw-h-4 tw-mt-0.5 tw-flex-shrink-0\"></cide-ele-icon>\n <div class=\"tw-ml-2\">\n <h3 class=\"tw-text-xs tw-font-medium tw-text-red-800 tw-m-0\">Error</h3>\n <p class=\"tw-text-xs tw-text-red-700 tw-mt-1 tw-m-0\">{{ error() }}</p>\n </div>\n </div>\n </div>\n }\n </div>\n </div>\n\n <!-- Main Content Area -->\n <div class=\"tw-table-row\">\n <div class=\"tw-table-cell tw-h-full tw-relative\">\n\n <!-- Data Grid Component -->\n <div class=\"tw-h-full tw-overflow-auto\">\n <cide-ele-data-grid [config]=\"gridConfig()\" [templateRenderers]=\"templateRenderers()\"\n (gridEvent)=\"onGridEvent($event)\">\n </cide-ele-data-grid>\n </div>\n\n </div>\n </div>\n\n</div>\n\n<!-- Template Renderers -->\n<ng-template #typeDetailsRendererTemplate let-row=\"row\">\n <div class=\"tw-flex tw-flex-col\">\n <div class=\"tw-font-medium tw-text-gray-900\">{{ row.sygmt_title || 'N/A' }}</div>\n <div class=\"tw-text-sm tw-text-gray-500 tw-truncate tw-max-w-xs\" title=\"{{ row.sygmt_desc || 'No description' }}\">{{\n row.sygmt_desc || 'No description' }}</div>\n </div>\n</ng-template>\n\n<ng-template #typeStatusRendererTemplate let-row=\"row\">\n <span class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium\"\n [class.tw-bg-green-100]=\"row.sygmt_isactive\" [class.tw-text-green-800]=\"row.sygmt_isactive\"\n [class.tw-bg-red-100]=\"!row.sygmt_isactive\" [class.tw-text-red-800]=\"!row.sygmt_isactive\">\n {{ row.sygmt_isactive ? 'Active' : 'Inactive' }}\n </span>\n</ng-template>\n\n\n\n<ng-template #actionsDropdownRendererTemplate let-row=\"row\">\n <cide-ele-dropdown [items]=\"getActionDropdownItems(row)\" [config]=\"getDropdownConfig()\"\n (itemClick)=\"onDropdownItemClick($event, row)\">\n </cide-ele-dropdown>\n</ng-template>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: CideEleDataGridComponent, selector: "cide-ele-data-grid", inputs: ["config", "templateRenderers", "customFormatters", "actionHandlers", "serverSidePagination", "totalServerItems", "currentServerPage", "currentServerPageSize", "dragDropEnabled"], outputs: ["gridEvent"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated", "adaptive"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideInputComponent, selector: "cide-ele-input", inputs: ["fill", "label", "labelHide", "disabled", "clearInput", "labelPlacement", "labelDir", "placeholder", "leadingIcon", "trailingIcon", "helperText", "helperTextCollapse", "hideHelperAndErrorText", "errorText", "maxlength", "minlength", "required", "autocapitalize", "autocomplete", "type", "width", "id", "ngModel", "option", "min", "max", "step", "size"], outputs: ["ngModelChange"] }, { kind: "component", type: CideTextareaComponent, selector: "cide-ele-textarea", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "minlength", "maxlength", "rows", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput"], outputs: ["ngModelChange"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideEleDropdownComponent, selector: "cide-ele-dropdown", inputs: ["items", "config", "triggerTemplate", "menuTemplate"], outputs: ["itemClick", "dropdownToggle"] }, { kind: "component", type: CideEleJsonEditorComponent, selector: "cide-ele-json-editor", inputs: ["label", "helperText", "required", "disabled", "showCharacterCount", "config"], outputs: ["valueChange", "objectChange", "errorsChange", "validChange"] }] });
|
|
8958
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: CideCoreGeneralMasterTypeComponent, isStandalone: true, selector: "cide-core-general-master-type", viewQueries: [{ propertyName: "typeDetailsRendererTemplate", first: true, predicate: ["typeDetailsRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "typeStatusRendererTemplate", first: true, predicate: ["typeStatusRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "actionsDropdownRendererTemplate", first: true, predicate: ["actionsDropdownRendererTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- General Master Type Container -->\n<div class=\"tw-table tw-w-full tw-h-full\">\n\n <!-- Quick Add Form Section - Show if user has VIEW, CREATE, or EDIT rights -->\n @if (canView() || canCreate() || canEdit()) {\n <div class=\"tw-table-row tw-h-0\">\n <div class=\"tw-table-cell tw-px-4 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-white\">\n <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-0\">\n <div class=\"tw-flex tw-items-center tw-space-x-3 tw-mb-3\">\n <cide-ele-icon class=\"tw-text-blue-600 tw-w-4 tw-h-4\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\n <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-m-0\">{{ isEditMode() ? 'Edit Type' : 'General Master\n Type' }}</h6>\n </div>\n\n <!-- Parent Type Info (shown when adding child) -->\n @if (typeForm.get('sygmt_id_sygmt')?.value) {\n <div\n class=\"tw-flex tw-items-center tw-space-x-3 tw-bg-blue-50 tw-border tw-border-blue-200 tw-px-4 tw-py-1 tw-rounded-lg\">\n <cide-ele-icon class=\"tw-text-blue-600 tw-w-4 tw-h-4\">account_tree</cide-ele-icon>\n <div class=\"tw-flex tw-items-center tw-space-x-2\">\n <span class=\"tw-text-sm tw-text-blue-600 tw-font-medium\">{{ isEditMode() ? 'Parent:' : 'Creating child\n under:' }}</span>\n <span class=\"tw-text-sm tw-text-blue-800 tw-font-semibold\">{{ getParentTypeDisplay() }}</span>\n </div>\n <button cideEleButton variant=\"ghost\" size=\"xs\" type=\"button\" (click)=\"clearParentType()\"\n class=\"tw-text-blue-400 hover:tw-text-blue-600\">\n <svg class=\"tw-w-4 tw-h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\" />\n </svg>\n </button>\n </div>\n }\n </div>\n\n <form [formGroup]=\"typeForm\" (ngSubmit)=\"onSubmit($event)\" class=\"tw-space-y-2 tw-relative\">\n <!-- Hidden field for parent type ID -->\n <input type=\"hidden\" formControlName=\"sygmt_id_sygmt\">\n\n <!-- First Row - Basic fields -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-6 tw-gap-2\">\n <!-- Type Code -->\n <div class=\"lg:tw-col-span-1\">\n <cide-ele-input formControlName=\"sygmt_code\" label=\"Type Code\" placeholder=\"Enter type code\" size=\"sm\"\n [maxlength]=\"40\" [disabled]=\"canView() && !canCreate() && !canEdit()\">\n </cide-ele-input>\n </div>\n\n <!-- Type Title -->\n <div class=\"lg:tw-col-span-2\">\n <cide-ele-input formControlName=\"sygmt_title\" label=\"Type Title\" placeholder=\"Enter type title\" size=\"sm\"\n [maxlength]=\"100\" [disabled]=\"canView() && !canCreate() && !canEdit()\">\n </cide-ele-input>\n </div>\n\n <!-- Active Status -->\n <div class=\"lg:tw-col-span-1 tw-flex tw-items-center tw-pt-0\">\n <cide-ele-input formControlName=\"sygmt_isactive\" type=\"checkbox\" label=\"Active\" size=\"sm\"\n [disabled]=\"canView() && !canCreate() && !canEdit()\">\n </cide-ele-input>\n </div>\n </div>\n <!-- Second Row - JSON Configuration and Description/Save side by side -->\n <div class=\"tw-flex tw-gap-4\">\n <!-- JSON Configuration (60% width) -->\n <div class=\"tw-w-3/5\">\n <cide-ele-json-editor formControlName=\"sygmt_configuration\" label=\"Configuration\" size=\"sm\"\n [disabled]=\"isFormDisabled()\">\n </cide-ele-json-editor>\n </div>\n\n <!-- Description and Save Button (40% width) -->\n <div class=\"tw-w-2/5 tw-flex tw-flex-col tw-space-y-4\">\n <!-- Description -->\n <div class=\"tw-flex-1\">\n <cide-ele-textarea formControlName=\"sygmt_desc\" label=\"Description\" placeholder=\"Enter description\"\n size=\"sm\" [maxlength]=\"255\" [rows]=\"4\" [disabled]=\"canView() && !canCreate() && !canEdit()\">\n </cide-ele-textarea>\n </div>\n\n <!-- Action Buttons -->\n @if (canCreate() || canEdit()) {\n <div class=\"tw-flex tw-justify-end tw-space-x-2\">\n <button cideEleButton variant=\"outline\" size=\"xs\" type=\"button\" (click)=\"cancelForm()\"\n [disabled]=\"loading() || (canView() && !canCreate() && !canEdit())\" class=\"tw-px-4 tw-py-2\">\n Cancel\n </button>\n @if (isEditMode() ? canEdit() : canCreate()) {\n <button cideEleButton variant=\"primary\" size=\"xs\" type=\"submit\" [disabled]=\"loading()\"\n class=\"tw-px-4 tw-py-2\" [leftIcon]=\"isEditMode() ? 'edit' : 'add'\">\n {{ isEditMode() ? 'Update' : 'Save' }}\n </button>\n }\n </div>\n }\n </div>\n </div>\n </form>\n </div>\n </div>\n }\n\n <!-- Header Section with Filters -->\n <div class=\"tw-table-row tw-h-0\">\n <div class=\"tw-table-cell tw-px-4 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\n\n <!-- Error Message -->\n @if (error()) {\n <div class=\"tw-mt-3 tw-p-3 tw-bg-red-50 tw-border tw-border-red-200 tw-rounded-md\">\n <div class=\"tw-flex tw-items-start\">\n <cide-ele-icon name=\"error\" class=\"tw-text-red-400 tw-w-4 tw-h-4 tw-mt-0.5 tw-flex-shrink-0\"></cide-ele-icon>\n <div class=\"tw-ml-2\">\n <h3 class=\"tw-text-xs tw-font-medium tw-text-red-800 tw-m-0\">Error</h3>\n <p class=\"tw-text-xs tw-text-red-700 tw-mt-1 tw-m-0\">{{ error() }}</p>\n </div>\n </div>\n </div>\n }\n </div>\n </div>\n\n <!-- Main Content Area -->\n <div class=\"tw-table-row\">\n <div class=\"tw-table-cell tw-h-full tw-relative\">\n\n <!-- Data Grid Component -->\n <div class=\"tw-h-full tw-overflow-auto\">\n <cide-ele-data-grid [config]=\"gridConfig()\" [templateRenderers]=\"templateRenderers()\"\n (gridEvent)=\"onGridEvent($event)\">\n </cide-ele-data-grid>\n </div>\n\n </div>\n </div>\n\n</div>\n\n<!-- Template Renderers -->\n<ng-template #typeDetailsRendererTemplate let-row=\"row\">\n <div class=\"tw-flex tw-flex-col\">\n <div class=\"tw-font-medium tw-text-gray-900\">{{ row.sygmt_title || 'N/A' }}</div>\n <div class=\"tw-text-sm tw-text-gray-500 tw-truncate tw-max-w-xs\" title=\"{{ row.sygmt_desc || 'No description' }}\">{{\n row.sygmt_desc || 'No description' }}</div>\n </div>\n</ng-template>\n\n<ng-template #typeStatusRendererTemplate let-row=\"row\">\n <span class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium\"\n [class.tw-bg-green-100]=\"row.sygmt_isactive\" [class.tw-text-green-800]=\"row.sygmt_isactive\"\n [class.tw-bg-red-100]=\"!row.sygmt_isactive\" [class.tw-text-red-800]=\"!row.sygmt_isactive\">\n {{ row.sygmt_isactive ? 'Active' : 'Inactive' }}\n </span>\n</ng-template>\n\n\n\n<ng-template #actionsDropdownRendererTemplate let-row=\"row\">\n <cide-ele-dropdown [items]=\"getActionDropdownItems(row)\" [config]=\"getDropdownConfig()\"\n (itemClick)=\"onDropdownItemClick($event, row)\">\n </cide-ele-dropdown>\n</ng-template>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: CideEleDataGridComponent, selector: "cide-ele-data-grid", inputs: ["config", "templateRenderers", "customFormatters", "actionHandlers", "serverSidePagination", "totalServerItems", "currentServerPage", "currentServerPageSize", "dragDropEnabled"], outputs: ["gridEvent"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated", "adaptive"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideInputComponent, selector: "cide-ele-input", inputs: ["fill", "label", "labelHide", "disabled", "clearInput", "labelPlacement", "labelDir", "placeholder", "leadingIcon", "trailingIcon", "helperText", "helperTextCollapse", "hideHelperAndErrorText", "errorText", "maxlength", "minlength", "required", "autocapitalize", "autocomplete", "type", "width", "id", "ngModel", "option", "min", "max", "step", "size"], outputs: ["ngModelChange"] }, { kind: "component", type: CideTextareaComponent, selector: "cide-ele-textarea", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "minlength", "maxlength", "rows", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput"], outputs: ["ngModelChange"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip", "name"] }, { kind: "component", type: CideEleDropdownComponent, selector: "cide-ele-dropdown", inputs: ["items", "config", "triggerTemplate", "menuTemplate"], outputs: ["itemClick", "dropdownToggle"] }, { kind: "component", type: CideEleJsonEditorComponent, selector: "cide-ele-json-editor", inputs: ["label", "helperText", "required", "disabled", "showCharacterCount", "config"], outputs: ["valueChange", "objectChange", "errorsChange", "validChange"] }] });
|
|
8959
8959
|
}
|
|
8960
8960
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideCoreGeneralMasterTypeComponent, decorators: [{
|
|
8961
8961
|
type: Component,
|
|
@@ -8970,7 +8970,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
8970
8970
|
CideIconComponent,
|
|
8971
8971
|
CideEleDropdownComponent,
|
|
8972
8972
|
CideEleJsonEditorComponent
|
|
8973
|
-
], template: "<!-- General Master Type Container -->\n<div class=\"tw-table tw-w-full tw-h-full\">\n\n <!-- Quick Add Form Section - Show if user has VIEW, CREATE, or EDIT rights -->\n @if (canView() || canCreate() || canEdit()) {\n <div class=\"tw-table-row tw-h-0\">\n <div class=\"tw-table-cell tw-px-4 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-white\">\n <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-0\">\n <div class=\"tw-flex tw-items-center tw-space-x-3 tw-mb-3\">\n <cide-ele-icon class=\"tw-text-blue-600 tw-w-4 tw-h-4\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\n <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-m-0\">{{ isEditMode() ? 'Edit Type' : 'General Master\n Type' }}</h6>\n </div>\n\n <!-- Parent Type Info (shown when adding child) -->\n @if (typeForm.get('sygmt_id_sygmt')?.value) {\n <div\n class=\"tw-flex tw-items-center tw-space-x-3 tw-bg-blue-50 tw-border tw-border-blue-200 tw-px-4 tw-py-1 tw-rounded-lg\">\n <cide-ele-icon class=\"tw-text-blue-600 tw-w-4 tw-h-4\">account_tree</cide-ele-icon>\n <div class=\"tw-flex tw-items-center tw-space-x-2\">\n <span class=\"tw-text-sm tw-text-blue-600 tw-font-medium\">{{ isEditMode() ? 'Parent:' : 'Creating child\n under:' }}</span>\n <span class=\"tw-text-sm tw-text-blue-800 tw-font-semibold\">{{ getParentTypeDisplay() }}</span>\n </div>\n <button cideEleButton variant=\"ghost\" size=\"xs\" type=\"button\" (click)=\"clearParentType()\"\n class=\"tw-text-blue-400 hover:tw-text-blue-600\">\n <svg class=\"tw-w-4 tw-h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\" />\n </svg>\n </button>\n </div>\n }\n </div>\n\n <form [formGroup]=\"typeForm\" (ngSubmit)=\"onSubmit($event)\" class=\"tw-space-y-2 tw-relative\">\n <!-- Hidden field for parent type ID -->\n <input type=\"hidden\" formControlName=\"sygmt_id_sygmt\">\n\n <!-- First Row - Basic fields -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-6 tw-gap-2\">\n <!-- Type Code -->\n <div class=\"lg:tw-col-span-1\">\n <cide-ele-input formControlName=\"sygmt_code\" label=\"Type Code\" placeholder=\"Enter type code\" size=\"sm\"\n [maxlength]=\"40\" [disabled]=\"canView() && !canCreate() && !canEdit()\">\n </cide-ele-input>\n </div>\n\n <!-- Type Title -->\n <div class=\"lg:tw-col-span-2\">\n <cide-ele-input formControlName=\"sygmt_title\" label=\"Type Title\" placeholder=\"Enter type title\" size=\"sm\"\n [maxlength]=\"100\" [disabled]=\"canView() && !canCreate() && !canEdit()\">\n </cide-ele-input>\n </div>\n\n <!-- Active Status -->\n <div class=\"lg:tw-col-span-1 tw-flex tw-items-center tw-pt-0\">\n <cide-ele-input formControlName=\"sygmt_isactive\" type=\"checkbox\" label=\"Active\" size=\"sm\"\n [disabled]=\"canView() && !canCreate() && !canEdit()\">\n </cide-ele-input>\n </div>\n </div>\n <!-- Second Row - JSON Configuration and Description/Save side by side -->\n <div class=\"tw-flex tw-gap-4\">\n <!-- JSON Configuration (60% width) -->\n <div class=\"tw-w-3/5\">\n <cide-ele-json-editor formControlName=\"sygmt_configuration\" label=\"Configuration\" size=\"sm\"\n [disabled]=\"isFormDisabled()\">\n </cide-ele-json-editor>\n </div>\n\n <!-- Description and Save Button (40% width) -->\n <div class=\"tw-w-2/5 tw-flex tw-flex-col tw-space-y-4\">\n <!-- Description -->\n <div class=\"tw-flex-1\">\n <cide-ele-textarea formControlName=\"sygmt_desc\" label=\"Description\" placeholder=\"Enter description\"\n size=\"sm\" [maxlength]=\"255\" [rows]=\"4\" [disabled]=\"canView() && !canCreate() && !canEdit()\">\n </cide-ele-textarea>\n </div>\n\n <!-- Action Buttons -->\n @if (canCreate() || canEdit()) {\n <div class=\"tw-flex tw-justify-end tw-space-x-2\">\n <button cideEleButton variant=\"outline\" size=\"
|
|
8973
|
+
], template: "<!-- General Master Type Container -->\n<div class=\"tw-table tw-w-full tw-h-full\">\n\n <!-- Quick Add Form Section - Show if user has VIEW, CREATE, or EDIT rights -->\n @if (canView() || canCreate() || canEdit()) {\n <div class=\"tw-table-row tw-h-0\">\n <div class=\"tw-table-cell tw-px-4 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-white\">\n <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-0\">\n <div class=\"tw-flex tw-items-center tw-space-x-3 tw-mb-3\">\n <cide-ele-icon class=\"tw-text-blue-600 tw-w-4 tw-h-4\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\n <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-m-0\">{{ isEditMode() ? 'Edit Type' : 'General Master\n Type' }}</h6>\n </div>\n\n <!-- Parent Type Info (shown when adding child) -->\n @if (typeForm.get('sygmt_id_sygmt')?.value) {\n <div\n class=\"tw-flex tw-items-center tw-space-x-3 tw-bg-blue-50 tw-border tw-border-blue-200 tw-px-4 tw-py-1 tw-rounded-lg\">\n <cide-ele-icon class=\"tw-text-blue-600 tw-w-4 tw-h-4\">account_tree</cide-ele-icon>\n <div class=\"tw-flex tw-items-center tw-space-x-2\">\n <span class=\"tw-text-sm tw-text-blue-600 tw-font-medium\">{{ isEditMode() ? 'Parent:' : 'Creating child\n under:' }}</span>\n <span class=\"tw-text-sm tw-text-blue-800 tw-font-semibold\">{{ getParentTypeDisplay() }}</span>\n </div>\n <button cideEleButton variant=\"ghost\" size=\"xs\" type=\"button\" (click)=\"clearParentType()\"\n class=\"tw-text-blue-400 hover:tw-text-blue-600\">\n <svg class=\"tw-w-4 tw-h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\" />\n </svg>\n </button>\n </div>\n }\n </div>\n\n <form [formGroup]=\"typeForm\" (ngSubmit)=\"onSubmit($event)\" class=\"tw-space-y-2 tw-relative\">\n <!-- Hidden field for parent type ID -->\n <input type=\"hidden\" formControlName=\"sygmt_id_sygmt\">\n\n <!-- First Row - Basic fields -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-6 tw-gap-2\">\n <!-- Type Code -->\n <div class=\"lg:tw-col-span-1\">\n <cide-ele-input formControlName=\"sygmt_code\" label=\"Type Code\" placeholder=\"Enter type code\" size=\"sm\"\n [maxlength]=\"40\" [disabled]=\"canView() && !canCreate() && !canEdit()\">\n </cide-ele-input>\n </div>\n\n <!-- Type Title -->\n <div class=\"lg:tw-col-span-2\">\n <cide-ele-input formControlName=\"sygmt_title\" label=\"Type Title\" placeholder=\"Enter type title\" size=\"sm\"\n [maxlength]=\"100\" [disabled]=\"canView() && !canCreate() && !canEdit()\">\n </cide-ele-input>\n </div>\n\n <!-- Active Status -->\n <div class=\"lg:tw-col-span-1 tw-flex tw-items-center tw-pt-0\">\n <cide-ele-input formControlName=\"sygmt_isactive\" type=\"checkbox\" label=\"Active\" size=\"sm\"\n [disabled]=\"canView() && !canCreate() && !canEdit()\">\n </cide-ele-input>\n </div>\n </div>\n <!-- Second Row - JSON Configuration and Description/Save side by side -->\n <div class=\"tw-flex tw-gap-4\">\n <!-- JSON Configuration (60% width) -->\n <div class=\"tw-w-3/5\">\n <cide-ele-json-editor formControlName=\"sygmt_configuration\" label=\"Configuration\" size=\"sm\"\n [disabled]=\"isFormDisabled()\">\n </cide-ele-json-editor>\n </div>\n\n <!-- Description and Save Button (40% width) -->\n <div class=\"tw-w-2/5 tw-flex tw-flex-col tw-space-y-4\">\n <!-- Description -->\n <div class=\"tw-flex-1\">\n <cide-ele-textarea formControlName=\"sygmt_desc\" label=\"Description\" placeholder=\"Enter description\"\n size=\"sm\" [maxlength]=\"255\" [rows]=\"4\" [disabled]=\"canView() && !canCreate() && !canEdit()\">\n </cide-ele-textarea>\n </div>\n\n <!-- Action Buttons -->\n @if (canCreate() || canEdit()) {\n <div class=\"tw-flex tw-justify-end tw-space-x-2\">\n <button cideEleButton variant=\"outline\" size=\"xs\" type=\"button\" (click)=\"cancelForm()\"\n [disabled]=\"loading() || (canView() && !canCreate() && !canEdit())\" class=\"tw-px-4 tw-py-2\">\n Cancel\n </button>\n @if (isEditMode() ? canEdit() : canCreate()) {\n <button cideEleButton variant=\"primary\" size=\"xs\" type=\"submit\" [disabled]=\"loading()\"\n class=\"tw-px-4 tw-py-2\" [leftIcon]=\"isEditMode() ? 'edit' : 'add'\">\n {{ isEditMode() ? 'Update' : 'Save' }}\n </button>\n }\n </div>\n }\n </div>\n </div>\n </form>\n </div>\n </div>\n }\n\n <!-- Header Section with Filters -->\n <div class=\"tw-table-row tw-h-0\">\n <div class=\"tw-table-cell tw-px-4 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\n\n <!-- Error Message -->\n @if (error()) {\n <div class=\"tw-mt-3 tw-p-3 tw-bg-red-50 tw-border tw-border-red-200 tw-rounded-md\">\n <div class=\"tw-flex tw-items-start\">\n <cide-ele-icon name=\"error\" class=\"tw-text-red-400 tw-w-4 tw-h-4 tw-mt-0.5 tw-flex-shrink-0\"></cide-ele-icon>\n <div class=\"tw-ml-2\">\n <h3 class=\"tw-text-xs tw-font-medium tw-text-red-800 tw-m-0\">Error</h3>\n <p class=\"tw-text-xs tw-text-red-700 tw-mt-1 tw-m-0\">{{ error() }}</p>\n </div>\n </div>\n </div>\n }\n </div>\n </div>\n\n <!-- Main Content Area -->\n <div class=\"tw-table-row\">\n <div class=\"tw-table-cell tw-h-full tw-relative\">\n\n <!-- Data Grid Component -->\n <div class=\"tw-h-full tw-overflow-auto\">\n <cide-ele-data-grid [config]=\"gridConfig()\" [templateRenderers]=\"templateRenderers()\"\n (gridEvent)=\"onGridEvent($event)\">\n </cide-ele-data-grid>\n </div>\n\n </div>\n </div>\n\n</div>\n\n<!-- Template Renderers -->\n<ng-template #typeDetailsRendererTemplate let-row=\"row\">\n <div class=\"tw-flex tw-flex-col\">\n <div class=\"tw-font-medium tw-text-gray-900\">{{ row.sygmt_title || 'N/A' }}</div>\n <div class=\"tw-text-sm tw-text-gray-500 tw-truncate tw-max-w-xs\" title=\"{{ row.sygmt_desc || 'No description' }}\">{{\n row.sygmt_desc || 'No description' }}</div>\n </div>\n</ng-template>\n\n<ng-template #typeStatusRendererTemplate let-row=\"row\">\n <span class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium\"\n [class.tw-bg-green-100]=\"row.sygmt_isactive\" [class.tw-text-green-800]=\"row.sygmt_isactive\"\n [class.tw-bg-red-100]=\"!row.sygmt_isactive\" [class.tw-text-red-800]=\"!row.sygmt_isactive\">\n {{ row.sygmt_isactive ? 'Active' : 'Inactive' }}\n </span>\n</ng-template>\n\n\n\n<ng-template #actionsDropdownRendererTemplate let-row=\"row\">\n <cide-ele-dropdown [items]=\"getActionDropdownItems(row)\" [config]=\"getDropdownConfig()\"\n (itemClick)=\"onDropdownItemClick($event, row)\">\n </cide-ele-dropdown>\n</ng-template>" }]
|
|
8974
8974
|
}], propDecorators: { typeDetailsRendererTemplate: [{ type: i0.ViewChild, args: ['typeDetailsRendererTemplate', { isSignal: true }] }], typeStatusRendererTemplate: [{ type: i0.ViewChild, args: ['typeStatusRendererTemplate', { isSignal: true }] }], actionsDropdownRendererTemplate: [{ type: i0.ViewChild, args: ['actionsDropdownRendererTemplate', { isSignal: true }] }] } });
|
|
8975
8975
|
|
|
8976
8976
|
var generalMasterType_component = /*#__PURE__*/Object.freeze({
|
|
@@ -9404,17 +9404,10 @@ class CideCoreGeneralMasterComponent {
|
|
|
9404
9404
|
next: (response) => {
|
|
9405
9405
|
if (response.success) {
|
|
9406
9406
|
this.notificationService.success('General master created successfully');
|
|
9407
|
-
//
|
|
9408
|
-
this.
|
|
9409
|
-
|
|
9410
|
-
|
|
9411
|
-
this.requestService.closeTab(activeTabId);
|
|
9412
|
-
}
|
|
9413
|
-
else {
|
|
9414
|
-
this.resetForm();
|
|
9415
|
-
this.loadMasters();
|
|
9416
|
-
this.loadParentMasterOptions();
|
|
9417
|
-
}
|
|
9407
|
+
// Keep tab open for multiple entries
|
|
9408
|
+
this.resetForm();
|
|
9409
|
+
this.loadMasters();
|
|
9410
|
+
this.loadParentMasterOptions();
|
|
9418
9411
|
console.log('✅ Master created successfully');
|
|
9419
9412
|
}
|
|
9420
9413
|
else {
|
|
@@ -9469,17 +9462,10 @@ class CideCoreGeneralMasterComponent {
|
|
|
9469
9462
|
next: (response) => {
|
|
9470
9463
|
if (response.success) {
|
|
9471
9464
|
this.notificationService.success('General master updated successfully');
|
|
9472
|
-
//
|
|
9473
|
-
this.
|
|
9474
|
-
|
|
9475
|
-
|
|
9476
|
-
this.requestService.closeTab(activeTabId);
|
|
9477
|
-
}
|
|
9478
|
-
else {
|
|
9479
|
-
this.resetForm();
|
|
9480
|
-
this.loadMasters();
|
|
9481
|
-
this.loadParentMasterOptions();
|
|
9482
|
-
}
|
|
9465
|
+
// Keep tab open
|
|
9466
|
+
this.resetForm();
|
|
9467
|
+
this.loadMasters();
|
|
9468
|
+
this.loadParentMasterOptions();
|
|
9483
9469
|
console.log('✅ Master updated successfully');
|
|
9484
9470
|
}
|
|
9485
9471
|
else {
|
|
@@ -9850,7 +9836,7 @@ class CideCoreGeneralMasterComponent {
|
|
|
9850
9836
|
document.dispatchEvent(event);
|
|
9851
9837
|
}
|
|
9852
9838
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideCoreGeneralMasterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
9853
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: CideCoreGeneralMasterComponent, isStandalone: true, selector: "cide-core-general-master", viewQueries: [{ propertyName: "masterDetailsRendererTemplate", first: true, predicate: ["masterDetailsRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "masterStatusRendererTemplate", first: true, predicate: ["masterStatusRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "actionsDropdownRendererTemplate", first: true, predicate: ["actionsDropdownRendererTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- General Master with Shared Wrapper -->\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'core_general_master' }\">\n <div class=\"tw-table tw-w-full tw-h-full\">\n\n <!-- Quick Add Form Section -->\n @if (canCreate() || (isEditMode() && canEdit())) {\n <div class=\"tw-table-row tw-h-0\">\n <div class=\"tw-table-cell tw-px-4 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-white\">\n <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-0\">\n <div class=\"tw-flex tw-items-center tw-space-x-3 tw-mb-3\">\n <cide-ele-icon class=\"tw-text-blue-600 tw-w-4 tw-h-4\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\n <div class=\"tw-flex tw-flex-col\">\n <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-m-0\">{{ isEditMode() ? 'Edit Master' : 'Quick Add\n Master' }}</h6>\n @if (typeTitle()) {\n <p class=\"tw-text-xs tw-text-gray-500 tw-m-0 tw-mt-0.5\">Type: <span\n class=\"tw-font-medium tw-text-gray-700\">{{ typeTitle() }}</span></p>\n }\n </div>\n </div>\n\n <!-- Parent Master Info Box -->\n @if (masterForm.get('sygms_id_sygms')?.value) {\n <div\n class=\"tw-flex tw-items-center tw-space-x-3 tw-bg-blue-50 tw-border tw-border-blue-200 tw-px-4 tw-py-1 tw-rounded-lg\">\n <cide-ele-icon class=\"tw-text-blue-600 tw-w-4 tw-h-4\">account_tree</cide-ele-icon>\n <span class=\"tw-text-sm tw-font-medium tw-text-blue-800\">Adding Child</span>\n <span class=\"tw-text-xs tw-text-blue-700\">\n Parent: <span class=\"tw-font-medium\">{{ getParentMasterDisplay() }}</span>\n </span>\n <button type=\"button\" (click)=\"clearParentMaster()\"\n class=\"tw-text-sm tw-text-blue-600 hover:tw-text-blue-800 hover:tw-bg-blue-100 tw-rounded tw-px-1\">\n \u00D7\n </button>\n </div>\n }\n </div>\n\n <form [formGroup]=\"masterForm\" class=\"tw-space-y-2\">\n\n <!-- First Row - Basic fields -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-6 tw-gap-2\">\n <!-- Master Code -->\n <div class=\"lg:tw-col-span-1\">\n <cide-ele-input formControlName=\"sygms_code\" label=\"Master Code\" placeholder=\"Enter master code\" size=\"sm\"\n [required]=\"true\" [maxlength]=\"40\">\n </cide-ele-input>\n </div>\n\n <!-- Master Title -->\n <div class=\"lg:tw-col-span-3\">\n <cide-ele-input formControlName=\"sygms_title\" label=\"Master Title\" placeholder=\"Enter master title\"\n size=\"sm\" [required]=\"true\" [maxlength]=\"150\">\n </cide-ele-input>\n </div>\n\n <!-- Active Status -->\n <div class=\"lg:tw-col-span-1 tw-flex tw-items-center tw-pt-0\">\n <cide-ele-input formControlName=\"sygms_isactive\" type=\"checkbox\" label=\"Active\" size=\"sm\">\n </cide-ele-input>\n </div>\n </div>\n\n <!-- Third Row - JSON Configuration and Description/Save side by side -->\n <div class=\"tw-flex tw-gap-4\">\n <!-- JSON Configuration (60% width) -->\n <div class=\"tw-w-3/5\">\n <cide-ele-json-editor formControlName=\"sygms_configuration\" label=\"Configuration\" size=\"sm\"\n [required]=\"true\">\n </cide-ele-json-editor>\n </div>\n\n <!-- Description and Save Button (40% width) -->\n <div class=\"tw-w-2/5 tw-flex tw-flex-col tw-space-y-4\">\n <!-- Description -->\n <div class=\"tw-flex-1\">\n <cide-ele-textarea formControlName=\"sygms_desc\" label=\"Description\" placeholder=\"Enter description\"\n size=\"sm\" [maxlength]=\"500\" [rows]=\"4\">\n </cide-ele-textarea>\n </div>\n\n <!-- Action Buttons -->\n <div class=\"tw-flex tw-justify-end tw-space-x-2\">\n <button cideEleButton variant=\"outline\" size=\"sm\" type=\"button\" (click)=\"resetForm()\"\n [disabled]=\"loading()\" class=\"tw-px-4 tw-py-2\">\n Reset\n </button>\n @if (isEditMode()) {\n <button cideEleButton variant=\"outline\" size=\"sm\" type=\"button\" (click)=\"cancelForm()\"\n [disabled]=\"loading()\" class=\"tw-px-4 tw-py-2\">\n Cancel\n </button>\n }\n <button cideEleButton variant=\"primary\" size=\"sm\" type=\"submit\" (click)=\"saveMaster()\"\n [disabled]=\"!masterForm.valid || loading()\" class=\"tw-px-4 tw-py-2\">\n <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">{{ isEditMode() ? 'edit' : 'add'\n }}</cide-ele-icon>\n {{ isEditMode() ? 'Update' : 'Save' }}\n </button>\n </div>\n </div>\n </div>\n </form>\n </div>\n </div>\n }\n\n <!-- Header Section with Filters -->\n <div class=\"tw-table-row tw-h-0\">\n <div class=\"tw-table-cell tw-px-4 tw-py-2 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\n <div\n class=\"tw-flex tw-flex-col sm:tw-flex-row tw-justify-between tw-items-start sm:tw-items-center tw-space-y-2 sm:tw-space-y-0\">\n\n <!-- Title and Back Button -->\n <div class=\"tw-flex tw-items-center tw-space-x-3\">\n <div class=\"tw-flex tw-items-center tw-space-x-2\">\n @if (typeTitle()) {\n <div>\n <p class=\"tw-text-xs tw-text-gray-500 tw-m-0\">Type: {{ typeTitle() }}</p>\n </div>\n }\n </div>\n </div>\n\n <!-- Actions -->\n <div\n class=\"tw-flex tw-flex-col sm:tw-flex-row tw-items-start sm:tw-items-center tw-space-y-2 sm:tw-space-y-0 sm:tw-space-x-3\">\n <!-- Actions can be added here in the future -->\n </div>\n </div>\n\n <!-- Error Message -->\n @if (error()) {\n <div class=\"tw-mt-3 tw-p-3 tw-bg-red-50 tw-border tw-border-red-200 tw-rounded-md\">\n <div class=\"tw-flex tw-items-start\">\n <cide-ele-icon name=\"error\"\n class=\"tw-text-red-400 tw-w-4 tw-h-4 tw-mt-0.5 tw-flex-shrink-0\"></cide-ele-icon>\n <div class=\"tw-ml-3\">\n <h3 class=\"tw-text-sm tw-font-medium tw-text-red-800 tw-m-0\">Error</h3>\n <p class=\"tw-text-sm tw-text-red-700 tw-mt-1 tw-m-0\">{{ error() }}</p>\n </div>\n </div>\n </div>\n }\n </div>\n </div>\n\n <!-- Main Content Area -->\n <div class=\"tw-table-row tw-h-0\">\n <div class=\"tw-table-cell tw-h-full tw-relative tw-p-0\">\n\n <!-- Data Grid Component -->\n <div class=\"tw-h-full tw-overflow-hidden\">\n <cide-ele-data-grid class=\"tw-h-full\" [config]=\"gridConfig()\" [templateRenderers]=\"templateRenderers()\"\n (gridEvent)=\"onGridEvent($event)\">\n </cide-ele-data-grid>\n </div>\n\n </div>\n </div>\n\n </div>\n\n <!-- Template Renderers -->\n <ng-template #masterDetailsRendererTemplate let-row=\"row\">\n <div class=\"tw-flex tw-flex-col tw-w-full\">\n <div class=\"tw-font-medium tw-text-gray-900\">{{ row.sygms_title || 'N/A' }}</div>\n <div class=\"tw-text-sm tw-text-gray-500 tw-truncate\">{{ row.sygms_desc || 'No description' }}</div>\n </div>\n </ng-template>\n\n <ng-template #masterStatusRendererTemplate let-row=\"row\">\n <span class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium\"\n [class.tw-bg-green-100]=\"row.sygms_isactive\" [class.tw-text-green-800]=\"row.sygms_isactive\"\n [class.tw-bg-red-100]=\"!row.sygms_isactive\" [class.tw-text-red-800]=\"!row.sygms_isactive\">\n {{ row.sygms_isactive ? 'Active' : 'Inactive' }}\n </span>\n </ng-template>\n\n <ng-template #actionsDropdownRendererTemplate let-row=\"row\">\n <cide-ele-dropdown [items]=\"getActionDropdownItems(row)\" [config]=\"getDropdownConfig()\"\n (itemClick)=\"onDropdownItemClick($event, row)\">\n </cide-ele-dropdown>\n </ng-template>\n</cide-lyt-shared-wrapper>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated", "adaptive"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideEleDataGridComponent, selector: "cide-ele-data-grid", inputs: ["config", "templateRenderers", "customFormatters", "actionHandlers", "serverSidePagination", "totalServerItems", "currentServerPage", "currentServerPageSize", "dragDropEnabled"], outputs: ["gridEvent"] }, { kind: "component", type: CideInputComponent, selector: "cide-ele-input", inputs: ["fill", "label", "labelHide", "disabled", "clearInput", "labelPlacement", "labelDir", "placeholder", "leadingIcon", "trailingIcon", "helperText", "helperTextCollapse", "hideHelperAndErrorText", "errorText", "maxlength", "minlength", "required", "autocapitalize", "autocomplete", "type", "width", "id", "ngModel", "option", "min", "max", "step", "size"], outputs: ["ngModelChange"] }, { kind: "component", type: CideTextareaComponent, selector: "cide-ele-textarea", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "minlength", "maxlength", "rows", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput"], outputs: ["ngModelChange"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideEleDropdownComponent, selector: "cide-ele-dropdown", inputs: ["items", "config", "triggerTemplate", "menuTemplate"], outputs: ["itemClick", "dropdownToggle"] }, { kind: "component", type: CideEleJsonEditorComponent, selector: "cide-ele-json-editor", inputs: ["label", "helperText", "required", "disabled", "showCharacterCount", "config"], outputs: ["valueChange", "objectChange", "errorsChange", "validChange"] }, { kind: "component", type: CideLytSharedWrapperComponent, selector: "cide-lyt-shared-wrapper", inputs: ["shared_wrapper_setup_param", "breadcrumb_data"] }] });
|
|
9839
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: CideCoreGeneralMasterComponent, isStandalone: true, selector: "cide-core-general-master", viewQueries: [{ propertyName: "masterDetailsRendererTemplate", first: true, predicate: ["masterDetailsRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "masterStatusRendererTemplate", first: true, predicate: ["masterStatusRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "actionsDropdownRendererTemplate", first: true, predicate: ["actionsDropdownRendererTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- General Master with Shared Wrapper -->\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'core_general_master' }\">\n <div class=\"tw-table tw-w-full tw-h-full\">\n\n <!-- Quick Add Form Section -->\n @if (canCreate() || (isEditMode() && canEdit())) {\n <div class=\"tw-table-row tw-h-0\">\n <div class=\"tw-table-cell tw-px-4 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-white\">\n <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-0\">\n <div class=\"tw-flex tw-items-center tw-space-x-3 tw-mb-3\">\n <cide-ele-icon class=\"tw-text-blue-600 tw-w-4 tw-h-4\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\n <div class=\"tw-flex tw-flex-col\">\n <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-m-0\">{{ isEditMode() ? 'Edit Master' : 'Quick Add\n Master' }}</h6>\n @if (typeTitle()) {\n <p class=\"tw-text-xs tw-text-gray-500 tw-m-0 tw-mt-0.5\">Type: <span\n class=\"tw-font-medium tw-text-gray-700\">{{ typeTitle() }}</span></p>\n }\n </div>\n </div>\n\n <!-- Parent Master Info Box -->\n @if (masterForm.get('sygms_id_sygms')?.value) {\n <div\n class=\"tw-flex tw-items-center tw-space-x-3 tw-bg-blue-50 tw-border tw-border-blue-200 tw-px-4 tw-py-1 tw-rounded-lg\">\n <cide-ele-icon class=\"tw-text-blue-600 tw-w-4 tw-h-4\">account_tree</cide-ele-icon>\n <span class=\"tw-text-sm tw-font-medium tw-text-blue-800\">Adding Child</span>\n <span class=\"tw-text-xs tw-text-blue-700\">\n Parent: <span class=\"tw-font-medium\">{{ getParentMasterDisplay() }}</span>\n </span>\n <button type=\"button\" (click)=\"clearParentMaster()\"\n class=\"tw-text-sm tw-text-blue-600 hover:tw-text-blue-800 hover:tw-bg-blue-100 tw-rounded tw-px-1\">\n \u00D7\n </button>\n </div>\n }\n </div>\n\n <form [formGroup]=\"masterForm\" class=\"tw-space-y-2\">\n\n <!-- First Row - Basic fields -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-6 tw-gap-2\">\n <!-- Master Code -->\n <div class=\"lg:tw-col-span-1\">\n <cide-ele-input formControlName=\"sygms_code\" label=\"Master Code\" placeholder=\"Enter master code\" size=\"xs\"\n [required]=\"true\" [maxlength]=\"40\">\n </cide-ele-input>\n </div>\n\n <!-- Master Title -->\n <div class=\"lg:tw-col-span-3\">\n <cide-ele-input formControlName=\"sygms_title\" label=\"Master Title\" placeholder=\"Enter master title\"\n size=\"xs\" [required]=\"true\" [maxlength]=\"150\">\n </cide-ele-input>\n </div>\n\n <!-- Active Status -->\n <div class=\"lg:tw-col-span-1 tw-flex tw-items-center tw-pt-0\">\n <cide-ele-input formControlName=\"sygms_isactive\" type=\"checkbox\" label=\"Active\" size=\"xs\">\n </cide-ele-input>\n </div>\n </div>\n\n <!-- Third Row - JSON Configuration and Description/Save side by side -->\n <div class=\"tw-flex tw-gap-4\">\n <!-- JSON Configuration (60% width) -->\n <div class=\"tw-w-3/5\">\n <cide-ele-json-editor formControlName=\"sygms_configuration\" label=\"Configuration\" size=\"xs\"\n [required]=\"true\">\n </cide-ele-json-editor>\n </div>\n\n <!-- Description and Save Button (40% width) -->\n <div class=\"tw-w-2/5 tw-flex tw-flex-col tw-space-y-4\">\n <!-- Description -->\n <div class=\"tw-flex-1\">\n <cide-ele-textarea formControlName=\"sygms_desc\" label=\"Description\" placeholder=\"Enter description\"\n size=\"xs\" [maxlength]=\"500\" [rows]=\"4\">\n </cide-ele-textarea>\n </div>\n\n <!-- Action Buttons -->\n <div class=\"tw-flex tw-justify-end tw-space-x-2\">\n <button cideEleButton variant=\"outline\" size=\"xs\" type=\"button\" (click)=\"resetForm()\"\n [disabled]=\"loading()\" class=\"tw-px-4 tw-py-2\">\n Reset\n </button>\n @if (isEditMode()) {\n <button cideEleButton variant=\"outline\" size=\"xs\" type=\"button\" (click)=\"cancelForm()\"\n [disabled]=\"loading()\" class=\"tw-px-4 tw-py-2\">\n Cancel\n </button>\n }\n <button cideEleButton variant=\"primary\" size=\"xs\" type=\"submit\" (click)=\"saveMaster()\"\n [disabled]=\"!masterForm.valid || loading()\" class=\"tw-px-4 tw-py-2\">\n <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">{{ isEditMode() ? 'edit' : 'add'\n }}</cide-ele-icon>\n {{ isEditMode() ? 'Update' : 'Save' }}\n </button>\n </div>\n </div>\n </div>\n </form>\n </div>\n </div>\n }\n\n <!-- Header Section with Filters -->\n <div class=\"tw-table-row tw-h-0\">\n <div class=\"tw-table-cell tw-px-4 tw-py-2 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\n <div\n class=\"tw-flex tw-flex-col sm:tw-flex-row tw-justify-between tw-items-start sm:tw-items-center tw-space-y-2 sm:tw-space-y-0\">\n\n <!-- Title and Back Button -->\n <div class=\"tw-flex tw-items-center tw-space-x-3\">\n <div class=\"tw-flex tw-items-center tw-space-x-2\">\n @if (typeTitle()) {\n <div>\n <p class=\"tw-text-xs tw-text-gray-500 tw-m-0\">Type: {{ typeTitle() }}</p>\n </div>\n }\n </div>\n </div>\n\n <!-- Actions -->\n <div\n class=\"tw-flex tw-flex-col sm:tw-flex-row tw-items-start sm:tw-items-center tw-space-y-2 sm:tw-space-y-0 sm:tw-space-x-3\">\n <!-- Actions can be added here in the future -->\n </div>\n </div>\n\n <!-- Error Message -->\n @if (error()) {\n <div class=\"tw-mt-3 tw-p-3 tw-bg-red-50 tw-border tw-border-red-200 tw-rounded-md\">\n <div class=\"tw-flex tw-items-start\">\n <cide-ele-icon name=\"error\"\n class=\"tw-text-red-400 tw-w-4 tw-h-4 tw-mt-0.5 tw-flex-shrink-0\"></cide-ele-icon>\n <div class=\"tw-ml-3\">\n <h3 class=\"tw-text-sm tw-font-medium tw-text-red-800 tw-m-0\">Error</h3>\n <p class=\"tw-text-sm tw-text-red-700 tw-mt-1 tw-m-0\">{{ error() }}</p>\n </div>\n </div>\n </div>\n }\n </div>\n </div>\n\n <!-- Main Content Area -->\n <div class=\"tw-table-row tw-h-0\">\n <div class=\"tw-table-cell tw-h-full tw-relative tw-p-0\">\n\n <!-- Data Grid Component -->\n <div class=\"tw-h-full tw-overflow-hidden\">\n <cide-ele-data-grid class=\"tw-h-full\" [config]=\"gridConfig()\" [templateRenderers]=\"templateRenderers()\"\n (gridEvent)=\"onGridEvent($event)\">\n </cide-ele-data-grid>\n </div>\n\n </div>\n </div>\n\n </div>\n\n <!-- Template Renderers -->\n <ng-template #masterDetailsRendererTemplate let-row=\"row\">\n <div class=\"tw-flex tw-flex-col tw-w-full\">\n <div class=\"tw-font-medium tw-text-gray-900\">{{ row.sygms_title || 'N/A' }}</div>\n <div class=\"tw-text-sm tw-text-gray-500 tw-truncate\">{{ row.sygms_desc || 'No description' }}</div>\n </div>\n </ng-template>\n\n <ng-template #masterStatusRendererTemplate let-row=\"row\">\n <span class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium\"\n [class.tw-bg-green-100]=\"row.sygms_isactive\" [class.tw-text-green-800]=\"row.sygms_isactive\"\n [class.tw-bg-red-100]=\"!row.sygms_isactive\" [class.tw-text-red-800]=\"!row.sygms_isactive\">\n {{ row.sygms_isactive ? 'Active' : 'Inactive' }}\n </span>\n </ng-template>\n\n <ng-template #actionsDropdownRendererTemplate let-row=\"row\">\n <cide-ele-dropdown [items]=\"getActionDropdownItems(row)\" [config]=\"getDropdownConfig()\"\n (itemClick)=\"onDropdownItemClick($event, row)\">\n </cide-ele-dropdown>\n </ng-template>\n</cide-lyt-shared-wrapper>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated", "adaptive"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideEleDataGridComponent, selector: "cide-ele-data-grid", inputs: ["config", "templateRenderers", "customFormatters", "actionHandlers", "serverSidePagination", "totalServerItems", "currentServerPage", "currentServerPageSize", "dragDropEnabled"], outputs: ["gridEvent"] }, { kind: "component", type: CideInputComponent, selector: "cide-ele-input", inputs: ["fill", "label", "labelHide", "disabled", "clearInput", "labelPlacement", "labelDir", "placeholder", "leadingIcon", "trailingIcon", "helperText", "helperTextCollapse", "hideHelperAndErrorText", "errorText", "maxlength", "minlength", "required", "autocapitalize", "autocomplete", "type", "width", "id", "ngModel", "option", "min", "max", "step", "size"], outputs: ["ngModelChange"] }, { kind: "component", type: CideTextareaComponent, selector: "cide-ele-textarea", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "minlength", "maxlength", "rows", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput"], outputs: ["ngModelChange"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip", "name"] }, { kind: "component", type: CideEleDropdownComponent, selector: "cide-ele-dropdown", inputs: ["items", "config", "triggerTemplate", "menuTemplate"], outputs: ["itemClick", "dropdownToggle"] }, { kind: "component", type: CideEleJsonEditorComponent, selector: "cide-ele-json-editor", inputs: ["label", "helperText", "required", "disabled", "showCharacterCount", "config"], outputs: ["valueChange", "objectChange", "errorsChange", "validChange"] }, { kind: "component", type: CideLytSharedWrapperComponent, selector: "cide-lyt-shared-wrapper", inputs: ["shared_wrapper_setup_param", "breadcrumb_data"] }] });
|
|
9854
9840
|
}
|
|
9855
9841
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideCoreGeneralMasterComponent, decorators: [{
|
|
9856
9842
|
type: Component,
|
|
@@ -9866,7 +9852,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
9866
9852
|
CideEleDropdownComponent,
|
|
9867
9853
|
CideEleJsonEditorComponent,
|
|
9868
9854
|
CideLytSharedWrapperComponent
|
|
9869
|
-
], template: "<!-- General Master with Shared Wrapper -->\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'core_general_master' }\">\n <div class=\"tw-table tw-w-full tw-h-full\">\n\n <!-- Quick Add Form Section -->\n @if (canCreate() || (isEditMode() && canEdit())) {\n <div class=\"tw-table-row tw-h-0\">\n <div class=\"tw-table-cell tw-px-4 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-white\">\n <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-0\">\n <div class=\"tw-flex tw-items-center tw-space-x-3 tw-mb-3\">\n <cide-ele-icon class=\"tw-text-blue-600 tw-w-4 tw-h-4\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\n <div class=\"tw-flex tw-flex-col\">\n <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-m-0\">{{ isEditMode() ? 'Edit Master' : 'Quick Add\n Master' }}</h6>\n @if (typeTitle()) {\n <p class=\"tw-text-xs tw-text-gray-500 tw-m-0 tw-mt-0.5\">Type: <span\n class=\"tw-font-medium tw-text-gray-700\">{{ typeTitle() }}</span></p>\n }\n </div>\n </div>\n\n <!-- Parent Master Info Box -->\n @if (masterForm.get('sygms_id_sygms')?.value) {\n <div\n class=\"tw-flex tw-items-center tw-space-x-3 tw-bg-blue-50 tw-border tw-border-blue-200 tw-px-4 tw-py-1 tw-rounded-lg\">\n <cide-ele-icon class=\"tw-text-blue-600 tw-w-4 tw-h-4\">account_tree</cide-ele-icon>\n <span class=\"tw-text-sm tw-font-medium tw-text-blue-800\">Adding Child</span>\n <span class=\"tw-text-xs tw-text-blue-700\">\n Parent: <span class=\"tw-font-medium\">{{ getParentMasterDisplay() }}</span>\n </span>\n <button type=\"button\" (click)=\"clearParentMaster()\"\n class=\"tw-text-sm tw-text-blue-600 hover:tw-text-blue-800 hover:tw-bg-blue-100 tw-rounded tw-px-1\">\n \u00D7\n </button>\n </div>\n }\n </div>\n\n <form [formGroup]=\"masterForm\" class=\"tw-space-y-2\">\n\n <!-- First Row - Basic fields -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-6 tw-gap-2\">\n <!-- Master Code -->\n <div class=\"lg:tw-col-span-1\">\n <cide-ele-input formControlName=\"sygms_code\" label=\"Master Code\" placeholder=\"Enter master code\" size=\"
|
|
9855
|
+
], template: "<!-- General Master with Shared Wrapper -->\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'core_general_master' }\">\n <div class=\"tw-table tw-w-full tw-h-full\">\n\n <!-- Quick Add Form Section -->\n @if (canCreate() || (isEditMode() && canEdit())) {\n <div class=\"tw-table-row tw-h-0\">\n <div class=\"tw-table-cell tw-px-4 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-white\">\n <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-0\">\n <div class=\"tw-flex tw-items-center tw-space-x-3 tw-mb-3\">\n <cide-ele-icon class=\"tw-text-blue-600 tw-w-4 tw-h-4\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\n <div class=\"tw-flex tw-flex-col\">\n <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-m-0\">{{ isEditMode() ? 'Edit Master' : 'Quick Add\n Master' }}</h6>\n @if (typeTitle()) {\n <p class=\"tw-text-xs tw-text-gray-500 tw-m-0 tw-mt-0.5\">Type: <span\n class=\"tw-font-medium tw-text-gray-700\">{{ typeTitle() }}</span></p>\n }\n </div>\n </div>\n\n <!-- Parent Master Info Box -->\n @if (masterForm.get('sygms_id_sygms')?.value) {\n <div\n class=\"tw-flex tw-items-center tw-space-x-3 tw-bg-blue-50 tw-border tw-border-blue-200 tw-px-4 tw-py-1 tw-rounded-lg\">\n <cide-ele-icon class=\"tw-text-blue-600 tw-w-4 tw-h-4\">account_tree</cide-ele-icon>\n <span class=\"tw-text-sm tw-font-medium tw-text-blue-800\">Adding Child</span>\n <span class=\"tw-text-xs tw-text-blue-700\">\n Parent: <span class=\"tw-font-medium\">{{ getParentMasterDisplay() }}</span>\n </span>\n <button type=\"button\" (click)=\"clearParentMaster()\"\n class=\"tw-text-sm tw-text-blue-600 hover:tw-text-blue-800 hover:tw-bg-blue-100 tw-rounded tw-px-1\">\n \u00D7\n </button>\n </div>\n }\n </div>\n\n <form [formGroup]=\"masterForm\" class=\"tw-space-y-2\">\n\n <!-- First Row - Basic fields -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-6 tw-gap-2\">\n <!-- Master Code -->\n <div class=\"lg:tw-col-span-1\">\n <cide-ele-input formControlName=\"sygms_code\" label=\"Master Code\" placeholder=\"Enter master code\" size=\"xs\"\n [required]=\"true\" [maxlength]=\"40\">\n </cide-ele-input>\n </div>\n\n <!-- Master Title -->\n <div class=\"lg:tw-col-span-3\">\n <cide-ele-input formControlName=\"sygms_title\" label=\"Master Title\" placeholder=\"Enter master title\"\n size=\"xs\" [required]=\"true\" [maxlength]=\"150\">\n </cide-ele-input>\n </div>\n\n <!-- Active Status -->\n <div class=\"lg:tw-col-span-1 tw-flex tw-items-center tw-pt-0\">\n <cide-ele-input formControlName=\"sygms_isactive\" type=\"checkbox\" label=\"Active\" size=\"xs\">\n </cide-ele-input>\n </div>\n </div>\n\n <!-- Third Row - JSON Configuration and Description/Save side by side -->\n <div class=\"tw-flex tw-gap-4\">\n <!-- JSON Configuration (60% width) -->\n <div class=\"tw-w-3/5\">\n <cide-ele-json-editor formControlName=\"sygms_configuration\" label=\"Configuration\" size=\"xs\"\n [required]=\"true\">\n </cide-ele-json-editor>\n </div>\n\n <!-- Description and Save Button (40% width) -->\n <div class=\"tw-w-2/5 tw-flex tw-flex-col tw-space-y-4\">\n <!-- Description -->\n <div class=\"tw-flex-1\">\n <cide-ele-textarea formControlName=\"sygms_desc\" label=\"Description\" placeholder=\"Enter description\"\n size=\"xs\" [maxlength]=\"500\" [rows]=\"4\">\n </cide-ele-textarea>\n </div>\n\n <!-- Action Buttons -->\n <div class=\"tw-flex tw-justify-end tw-space-x-2\">\n <button cideEleButton variant=\"outline\" size=\"xs\" type=\"button\" (click)=\"resetForm()\"\n [disabled]=\"loading()\" class=\"tw-px-4 tw-py-2\">\n Reset\n </button>\n @if (isEditMode()) {\n <button cideEleButton variant=\"outline\" size=\"xs\" type=\"button\" (click)=\"cancelForm()\"\n [disabled]=\"loading()\" class=\"tw-px-4 tw-py-2\">\n Cancel\n </button>\n }\n <button cideEleButton variant=\"primary\" size=\"xs\" type=\"submit\" (click)=\"saveMaster()\"\n [disabled]=\"!masterForm.valid || loading()\" class=\"tw-px-4 tw-py-2\">\n <cide-ele-icon size=\"xs\" class=\"tw-w-4 tw-h-4 tw-mr-1\">{{ isEditMode() ? 'edit' : 'add'\n }}</cide-ele-icon>\n {{ isEditMode() ? 'Update' : 'Save' }}\n </button>\n </div>\n </div>\n </div>\n </form>\n </div>\n </div>\n }\n\n <!-- Header Section with Filters -->\n <div class=\"tw-table-row tw-h-0\">\n <div class=\"tw-table-cell tw-px-4 tw-py-2 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\n <div\n class=\"tw-flex tw-flex-col sm:tw-flex-row tw-justify-between tw-items-start sm:tw-items-center tw-space-y-2 sm:tw-space-y-0\">\n\n <!-- Title and Back Button -->\n <div class=\"tw-flex tw-items-center tw-space-x-3\">\n <div class=\"tw-flex tw-items-center tw-space-x-2\">\n @if (typeTitle()) {\n <div>\n <p class=\"tw-text-xs tw-text-gray-500 tw-m-0\">Type: {{ typeTitle() }}</p>\n </div>\n }\n </div>\n </div>\n\n <!-- Actions -->\n <div\n class=\"tw-flex tw-flex-col sm:tw-flex-row tw-items-start sm:tw-items-center tw-space-y-2 sm:tw-space-y-0 sm:tw-space-x-3\">\n <!-- Actions can be added here in the future -->\n </div>\n </div>\n\n <!-- Error Message -->\n @if (error()) {\n <div class=\"tw-mt-3 tw-p-3 tw-bg-red-50 tw-border tw-border-red-200 tw-rounded-md\">\n <div class=\"tw-flex tw-items-start\">\n <cide-ele-icon name=\"error\"\n class=\"tw-text-red-400 tw-w-4 tw-h-4 tw-mt-0.5 tw-flex-shrink-0\"></cide-ele-icon>\n <div class=\"tw-ml-3\">\n <h3 class=\"tw-text-sm tw-font-medium tw-text-red-800 tw-m-0\">Error</h3>\n <p class=\"tw-text-sm tw-text-red-700 tw-mt-1 tw-m-0\">{{ error() }}</p>\n </div>\n </div>\n </div>\n }\n </div>\n </div>\n\n <!-- Main Content Area -->\n <div class=\"tw-table-row tw-h-0\">\n <div class=\"tw-table-cell tw-h-full tw-relative tw-p-0\">\n\n <!-- Data Grid Component -->\n <div class=\"tw-h-full tw-overflow-hidden\">\n <cide-ele-data-grid class=\"tw-h-full\" [config]=\"gridConfig()\" [templateRenderers]=\"templateRenderers()\"\n (gridEvent)=\"onGridEvent($event)\">\n </cide-ele-data-grid>\n </div>\n\n </div>\n </div>\n\n </div>\n\n <!-- Template Renderers -->\n <ng-template #masterDetailsRendererTemplate let-row=\"row\">\n <div class=\"tw-flex tw-flex-col tw-w-full\">\n <div class=\"tw-font-medium tw-text-gray-900\">{{ row.sygms_title || 'N/A' }}</div>\n <div class=\"tw-text-sm tw-text-gray-500 tw-truncate\">{{ row.sygms_desc || 'No description' }}</div>\n </div>\n </ng-template>\n\n <ng-template #masterStatusRendererTemplate let-row=\"row\">\n <span class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium\"\n [class.tw-bg-green-100]=\"row.sygms_isactive\" [class.tw-text-green-800]=\"row.sygms_isactive\"\n [class.tw-bg-red-100]=\"!row.sygms_isactive\" [class.tw-text-red-800]=\"!row.sygms_isactive\">\n {{ row.sygms_isactive ? 'Active' : 'Inactive' }}\n </span>\n </ng-template>\n\n <ng-template #actionsDropdownRendererTemplate let-row=\"row\">\n <cide-ele-dropdown [items]=\"getActionDropdownItems(row)\" [config]=\"getDropdownConfig()\"\n (itemClick)=\"onDropdownItemClick($event, row)\">\n </cide-ele-dropdown>\n </ng-template>\n</cide-lyt-shared-wrapper>" }]
|
|
9870
9856
|
}], propDecorators: { masterDetailsRendererTemplate: [{ type: i0.ViewChild, args: ['masterDetailsRendererTemplate', { isSignal: true }] }], masterStatusRendererTemplate: [{ type: i0.ViewChild, args: ['masterStatusRendererTemplate', { isSignal: true }] }], actionsDropdownRendererTemplate: [{ type: i0.ViewChild, args: ['actionsDropdownRendererTemplate', { isSignal: true }] }] } });
|
|
9871
9857
|
|
|
9872
9858
|
var generalMaster_component = /*#__PURE__*/Object.freeze({
|
|
@@ -11540,7 +11526,7 @@ class CideCoreEntityCreateComponent {
|
|
|
11540
11526
|
}
|
|
11541
11527
|
}
|
|
11542
11528
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideCoreEntityCreateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
11543
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: CideCoreEntityCreateComponent, isStandalone: true, selector: "cide-core-entity-create", viewQueries: [{ propertyName: "userCellRendererTemplate", first: true, predicate: ["userCell"], descendants: true, isSignal: true }, { propertyName: "actionsCellRendererTemplate", first: true, predicate: ["actionsCell"], descendants: true, isSignal: true }, { propertyName: "boardActionsCellRendererTemplate", first: true, predicate: ["boardActionsCell"], descendants: true, isSignal: true }], ngImport: i0, template: "<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'core_entity_form' }\"\r\n [breadcrumb_data]=\"breadcrumbData()\">\r\n <!-- Modern Entity Create Form -->\r\n <div class=\"tw-min-h-screen\">\r\n <div class=\"tw-mx-auto\">\r\n\r\n <form [formGroup]=\"entityForm\" [class.tw-opacity-60]=\"loading()\" [class.tw-pointer-events-none]=\"loading()\"\r\n (ngSubmit)=\"onSubmit()\">\r\n\r\n <!-- Breadcrumb is now rendered by shared wrapper; inline breadcrumb removed -->\r\n\r\n <!-- Basic Information Section -->\r\n <div class=\"tw-p-2 tw-pb-0\">\r\n <div class=\"tw-space-y-6\">\r\n <!-- Top Section: Image on Right, Form Fields on Left -->\r\n <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-[1fr_200px] tw-gap-4\">\r\n <!-- Left Side: Form Fields -->\r\n <div class=\"tw-space-y-6\">\r\n <!-- Institution Name, Entity Type & Active Status -->\r\n <div\r\n class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-[1fr_250px_120px] tw-gap-4 tw-items-end\">\r\n <cide-ele-input id=\"syen_name\" type=\"text\" label=\"Institution Name\" formControlName=\"syen_name\"\r\n placeholder=\"Enter institution name\" size=\"sm\">\r\n </cide-ele-input>\r\n\r\n <cide-ele-select label=\"Entity Type\" labelPlacement=\"floating\" [options]=\"entityTypes()\"\r\n formControlName=\"syen_entity_type_sygms\" placeholder=\"Select institution type\" size=\"sm\">\r\n </cide-ele-select>\r\n\r\n <div class=\"tw-flex tw-items-center tw-justify-center tw-gap-1 tw-h-full\">\r\n <cide-ele-input type=\"checkbox\" formControlName=\"syen_isactive\" size=\"sm\" label=\"Is Active\">\r\n </cide-ele-input>\r\n </div>\r\n </div>\r\n\r\n <!-- UDISE, Affiliation & Institution Code -->\r\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-3 tw-gap-4\">\r\n <cide-ele-input label=\"UDISE Number\" formControlName=\"syen_udise_no\" placeholder=\"Enter UDISE number\"\r\n size=\"sm\">\r\n </cide-ele-input>\r\n\r\n <cide-ele-input label=\"Affiliation Number\" formControlName=\"syen_affiliation_no\"\r\n placeholder=\"Enter affiliation number\" size=\"sm\">\r\n </cide-ele-input>\r\n\r\n <cide-ele-input label=\"Institution Code\" formControlName=\"syen_entity_code\"\r\n placeholder=\"Enter unique code\" size=\"sm\">\r\n </cide-ele-input>\r\n </div>\r\n </div>\r\n\r\n <!-- Right Side: Entity Image Upload -->\r\n <div class=\"tw-flex tw-items-start tw-justify-center tw-pt-0\">\r\n <cide-ele-file-input id=\"entity_image_upload\" formControlName=\"syen_photo_id_cyfm\" accept=\"image/*\"\r\n [showPreview]=\"true\" [previewBoxMode]=\"true\" [showFileName]=\"false\" previewWidth=\"180px\"\r\n previewHeight=\"120px\" [required]=\"true\" placeholderText=\"Upload Logo\" placeholderIcon=\"cloud_upload\"\r\n [autoUpload]=\"true\" [uploadData]=\"getUploadData()\" (uploadSuccess)=\"onImageUploadSuccess($event)\"\r\n (uploadError)=\"onImageUploadError($event)\" (uploadProgressChange)=\"onImageUploadProgress($event)\">\r\n </cide-ele-file-input>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Tab Navigation -->\r\n <div class=\"tw-px-4 !tw-mt-0\">\r\n <cide-ele-tab [tabs]=\"entityTabs()\" [activeTabId]=\"activeTab()\" size=\"sm\" variant=\"default\"\r\n (tabChange)=\"onTabChange($event)\">\r\n </cide-ele-tab>\r\n </div>\r\n\r\n <!-- Tab Content -->\r\n <div class=\"tw-transition-all tw-duration-300 tw-ease-in-out !tw-mt-2\" [class.tw-opacity-60]=\"loading()\"\r\n [class.tw-pointer-events-none]=\"loading()\">\r\n @switch (activeTab()) {\r\n\r\n @case ('corporate') {\r\n <div class=\"tw-p-4\">\r\n <div class=\"tw-space-y-6\">\r\n <!-- Corporate Address - Full Width -->\r\n <div class=\"tw-w-full\">\r\n <cide-ele-textarea label=\"Corporate Address\" formControlName=\"syen_corporate_address\"\r\n placeholder=\"Enter complete corporate address\" [rows]=\"4\">\r\n </cide-ele-textarea>\r\n </div>\r\n\r\n <!-- Postal Code, City, State & Country - Four Columns -->\r\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-[220px_0.8fr_0.7fr_240px] tw-gap-6\">\r\n <cide-ele-select label=\"Postal Code\" [options]=\"postalCodes()\"\r\n formControlName=\"syen_corporate_pin_sypin\" placeholder=\"Select postal code\" [searchable]=\"true\"\r\n [loading]=\"postalCodesLoading()\" (searchChange)=\"onPostalCodeSearch($event)\" size=\"sm\">\r\n </cide-ele-select>\r\n\r\n <cide-ele-input label=\"City\" formControlName=\"syen_corporate_city_sypin\" placeholder=\"Enter city name\">\r\n </cide-ele-input>\r\n\r\n <cide-ele-input label=\"State\" formControlName=\"syen_corporate_state_sypin\"\r\n placeholder=\"Enter state name\">\r\n </cide-ele-input>\r\n\r\n <cide-ele-select label=\"Country\" [options]=\"corporateCountries()\"\r\n formControlName=\"syen_corporate_country_syctr\" placeholder=\"Select country\" [searchable]=\"true\"\r\n (searchChange)=\"onCorporateCountrySearch($event)\" [loading]=\"corporateCountriesLoading()\" size=\"sm\">\r\n </cide-ele-select>\r\n </div>\r\n\r\n <!-- Contact Person, Phone, Email & Fax - Four Columns -->\r\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-[1fr_200px_1fr_150px] tw-gap-6\">\r\n <cide-ele-select label=\"Contact Person\" [options]=\"users()\"\r\n formControlName=\"syen_corporate_contact_person_user\" placeholder=\"Select contact person\"\r\n [searchable]=\"true\" [loading]=\"usersLoading()\" (searchChange)=\"onUserSearch($event)\">\r\n </cide-ele-select>\r\n\r\n <cide-ele-input label=\"Phone\" formControlName=\"syen_corporate_phone\" type=\"tel\"\r\n placeholder=\"Enter phone number\" size=\"sm\">\r\n </cide-ele-input>\r\n\r\n <cide-ele-input label=\"Email\" formControlName=\"syen_corporate_email\" type=\"email\"\r\n placeholder=\"Enter email address\">\r\n </cide-ele-input>\r\n\r\n <cide-ele-input label=\"Fax\" formControlName=\"syen_corporate_fax\" placeholder=\"Enter fax number\"\r\n size=\"sm\">\r\n </cide-ele-input>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n\r\n @case ('contact') {\r\n <div class=\"tw-p-4\">\r\n <div class=\"tw-space-y-6\">\r\n <!-- Currency Selection -->\r\n <div class=\"tw-w-full\">\r\n <cide-ele-select label=\"Currency\" [options]=\"currencies()\" formControlName=\"syen_currency_sycr\"\r\n placeholder=\"Select currency\">\r\n </cide-ele-select>\r\n </div>\r\n\r\n <!-- Alternate Phone & Website - Two Columns -->\r\n <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-2 tw-gap-6\">\r\n <cide-ele-input label=\"Alternate Phone\" formControlName=\"syen_corporate_phone_alt\" type=\"tel\"\r\n placeholder=\"Enter alternate phone number\">\r\n </cide-ele-input>\r\n\r\n <cide-ele-input label=\"Website URL\" formControlName=\"syen_website\" type=\"url\"\r\n placeholder=\"https://example.com\" autocomplete=\"url\" leadingIcon=\"language\"\r\n helperText=\"Enter a valid website URL starting with http:// or https://\">\r\n </cide-ele-input>\r\n </div>\r\n\r\n <!-- Alternate Email - Full Width -->\r\n <div class=\"tw-w-full\">\r\n <cide-ele-input label=\"Alternate Email\" formControlName=\"syen_corporate_email_alt\" type=\"email\"\r\n placeholder=\"Enter alternate email address\">\r\n </cide-ele-input>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n\r\n @case ('registered') {\r\n <div class=\"tw-p-4\">\r\n <div class=\"tw-space-y-6\">\r\n <!-- Registered Address - Full Width -->\r\n <div class=\"tw-w-full\">\r\n <cide-ele-textarea label=\"Registered Address\" formControlName=\"syen_registered_address\"\r\n placeholder=\"Enter complete registered address\" [rows]=\"4\">\r\n </cide-ele-textarea>\r\n </div>\r\n\r\n <!-- Postal Code, City, State & Country - Four Columns -->\r\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-[220px_0.8fr_0.7fr_240px] tw-gap-6\">\r\n <cide-ele-select label=\"Postal Code\" [options]=\"postalCodes()\"\r\n formControlName=\"syen_registered_pin_sypin\" placeholder=\"Select postal code\" [searchable]=\"true\"\r\n [loading]=\"postalCodesLoading()\" (searchChange)=\"onPostalCodeSearch($event)\" size=\"sm\">\r\n </cide-ele-select>\r\n\r\n <cide-ele-input label=\"City\" formControlName=\"syen_registered_city_sypin\" placeholder=\"Enter city name\">\r\n </cide-ele-input>\r\n\r\n <cide-ele-input label=\"State\" formControlName=\"syen_registered_state_sypin\"\r\n placeholder=\"Enter state name\">\r\n </cide-ele-input>\r\n\r\n <cide-ele-select label=\"Country\" [options]=\"registeredCountries()\"\r\n formControlName=\"syen_registered_country_syctr\" placeholder=\"Select country\" [searchable]=\"true\"\r\n (searchChange)=\"onRegisteredCountrySearch($event)\" [loading]=\"registeredCountriesLoading()\" size=\"sm\">\r\n </cide-ele-select>\r\n </div>\r\n\r\n <!-- Contact Person, Phone, Email & Fax - Four Columns -->\r\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-[1fr_200px_1fr_150px] tw-gap-6\">\r\n <cide-ele-select label=\"Contact Person\" [options]=\"users()\"\r\n formControlName=\"syen_registered_contact_person_user\" placeholder=\"Select contact person\"\r\n [searchable]=\"true\" [loading]=\"usersLoading()\" (searchChange)=\"onUserSearch($event)\">\r\n </cide-ele-select>\r\n\r\n <cide-ele-input label=\"Phone\" formControlName=\"syen_registered_phone\" type=\"tel\"\r\n placeholder=\"Enter phone number\" size=\"sm\">\r\n </cide-ele-input>\r\n\r\n <cide-ele-input label=\"Email\" formControlName=\"syen_registered_email\" type=\"email\"\r\n placeholder=\"Enter email address\">\r\n </cide-ele-input>\r\n\r\n <cide-ele-input label=\"Fax\" formControlName=\"syen_registered_fax\" placeholder=\"Enter fax number\"\r\n size=\"sm\">\r\n </cide-ele-input>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n\r\n @case ('user-mapping') {\r\n <div class=\"tw-p-2\">\r\n <div class=\"tw-space-y-4\">\r\n <!-- Add User Mapping Form -->\r\n <div class=\"tw-bg-white tw-p-4 tw-rounded-lg tw-border tw-shadow-sm\">\r\n <div class=\"tw-flex tw-items-center tw-gap-2 tw-mb-3\">\r\n <cide-ele-icon class=\"tw-text-blue-600 tw-text-sm\">person_add</cide-ele-icon>\r\n <h3 class=\"tw-text-sm tw-font-semibold tw-text-gray-800\">Add User to Entity</h3>\r\n </div>\r\n\r\n <form [formGroup]=\"userMappingForm\" (ngSubmit)=\"addUserMapping()\">\r\n <div class=\"tw-flex tw-items-end tw-gap-3\">\r\n <div class=\"tw-flex-1\">\r\n <cide-ele-select label=\"Select User\" [options]=\"availableUsers()\" formControlName=\"syenm_id_user\"\r\n placeholder=\"Choose user to add to entity\" [searchable]=\"true\"\r\n [loading]=\"availableUsersLoading()\" size=\"md\">\r\n </cide-ele-select>\r\n </div>\r\n\r\n <!-- Add Button -->\r\n <div class=\"tw-flex tw-items-end\">\r\n <button cideEleButton type=\"submit\" variant=\"primary\" size=\"sm\"\r\n [disabled]=\"userMappingForm.invalid || availableUsersLoading()\"\r\n class=\"tw-shadow-sm tw-h-8 tw-px-3\">\r\n <cide-ele-icon class=\"tw-mr-1 tw-text-xs\">add</cide-ele-icon>\r\n <span class=\"tw-text-xs\">Add</span>\r\n </button>\r\n </div>\r\n </div>\r\n </form>\r\n </div>\r\n\r\n <!-- User Mappings Grid -->\r\n <div class=\"tw-bg-white tw-rounded-md tw-border tw-overflow-hidden tw-shadow-sm\">\r\n @if (userEntityMappingsLoading()) {\r\n <div class=\"tw-p-4 tw-text-center\">\r\n <div class=\"tw-inline-flex tw-items-center tw-gap-2 tw-text-gray-500\">\r\n <div class=\"tw-animate-spin tw-rounded-full tw-h-3 tw-w-3 tw-border-b-2 tw-border-gray-500\"></div>\r\n <span class=\"tw-text-xs\">Loading...</span>\r\n </div>\r\n </div>\r\n } @else if (userEntityMappings().length === 0) {\r\n <div class=\"tw-p-4 tw-text-center tw-text-gray-500\">\r\n <cide-ele-icon class=\"tw-text-2xl tw-mb-1 tw-text-gray-300\">people_outline</cide-ele-icon>\r\n <p class=\"tw-text-sm tw-font-medium tw-mb-1\">No users mapped yet</p>\r\n <p class=\"tw-text-xs tw-text-gray-400\">Add users above to grant them access to this entity</p>\r\n </div>\r\n } @else {\r\n <cide-ele-data-grid [config]=\"userMappingsGridConfig\"\r\n [templateRenderers]=\"getUserMappingsTemplateRenderers()\">\r\n\r\n <!-- Custom user cell template -->\r\n <ng-template #userCell let-row=\"row\">\r\n <div class=\"tw-flex tw-items-center tw-gap-2\">\r\n <div\r\n class=\"tw-w-6 tw-h-6 tw-bg-gradient-to-br tw-from-blue-100 tw-to-indigo-100 tw-rounded-full tw-flex tw-items-center tw-justify-center tw-shadow-sm\">\r\n <cide-ele-icon class=\"tw-text-blue-600 tw-text-xs\">person</cide-ele-icon>\r\n </div>\r\n <div class=\"tw-flex tw-flex-col\">\r\n <span class=\"tw-font-medium tw-text-gray-900 tw-text-xs\">\r\n {{ row?._displayUserName }}\r\n </span>\r\n </div>\r\n </div>\r\n </ng-template>\r\n\r\n <!-- Custom actions cell template -->\r\n <ng-template #actionsCell let-row=\"row\">\r\n <div class=\"tw-flex tw-items-center tw-gap-1 tw-justify-center\">\r\n <button (click)=\"updateUserMapping(row._id!, { syenm_isactive: !row.syenm_isactive })\"\r\n class=\"tw-w-8 tw-h-8 tw-flex tw-items-center tw-justify-center tw-rounded-md tw-transition-colors tw-border tw-border-transparent hover:tw-border-gray-300\"\r\n [class.tw-bg-green-100]=\"row.syenm_isactive\" [class.tw-text-green-700]=\"row.syenm_isactive\"\r\n [class.tw-bg-gray-100]=\"!row.syenm_isactive\" [class.tw-text-gray-600]=\"!row.syenm_isactive\"\r\n [title]=\"row.syenm_isactive ? 'Deactivate' : 'Activate'\">\r\n <cide-ele-icon class=\"tw-text-sm\">\r\n {{ row.syenm_isactive ? 'pause' : 'play_arrow' }}\r\n </cide-ele-icon>\r\n </button>\r\n\r\n <button (click)=\"removeUserMapping(row._id!)\"\r\n class=\"tw-w-8 tw-h-8 tw-flex tw-items-center tw-justify-center tw-rounded-md tw-bg-red-100 tw-text-red-600 hover:tw-bg-red-200 tw-transition-colors tw-border tw-border-transparent hover:tw-border-red-300\"\r\n title=\"Remove User\">\r\n <cide-ele-icon class=\"tw-text-sm\">delete</cide-ele-icon>\r\n </button>\r\n </div>\r\n </ng-template>\r\n </cide-ele-data-grid>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n\r\n\r\n @case ('board-mapping') {\r\n <div class=\"tw-p-2\">\r\n <div class=\"tw-space-y-4\">\r\n <!-- Add Board Mapping Form -->\r\n <div class=\"tw-bg-white tw-p-4 tw-rounded-lg tw-border tw-shadow-sm\">\r\n <div class=\"tw-flex tw-items-center tw-gap-2 tw-mb-3\">\r\n <cide-ele-icon class=\"tw-text-blue-600 tw-text-sm\">school</cide-ele-icon>\r\n <h3 class=\"tw-text-sm tw-font-semibold tw-text-gray-800\">Map Education Board</h3>\r\n </div>\r\n\r\n <form [formGroup]=\"boardMappingForm\" (ngSubmit)=\"addBoardAffiliation()\">\r\n <div class=\"tw-flex tw-flex-wrap tw-gap-3 tw-items-end\">\r\n\r\n <!-- Board Selection -->\r\n <div class=\"tw-flex-1 tw-min-w-[250px]\">\r\n <cide-ele-select label=\"Select Board\" [options]=\"educationBoards()\"\r\n formControlName=\"scbaf_board_id_edbrd\" placeholder=\"Choose education board\" [searchable]=\"true\"\r\n [loading]=\"educationBoardsLoading()\" size=\"sm\">\r\n </cide-ele-select>\r\n </div>\r\n\r\n <!-- Affiliation Number -->\r\n <div class=\"tw-w-44\">\r\n <cide-ele-input label=\"Affiliation No.\" formControlName=\"scbaf_affiliation_number\"\r\n placeholder=\"Enter number\" size=\"sm\">\r\n </cide-ele-input>\r\n </div>\r\n\r\n <!-- Status Dropdown -->\r\n <div class=\"tw-w-40\">\r\n <cide-ele-select label=\"Status\" [options]=\"boardAffiliationStatuses()\"\r\n formControlName=\"scbaf_affiliation_status_sygms\" placeholder=\"Select status\"\r\n [loading]=\"boardAffiliationStatusesLoading()\" size=\"sm\">\r\n </cide-ele-select>\r\n </div>\r\n\r\n <!-- Affiliation Level Multi-Select -->\r\n <div class=\"tw-w-64\">\r\n <cide-ele-select label=\"Affiliation Level\" [options]=\"boardAffiliationLevels()\"\r\n formControlName=\"scbaf_affiliation_level_multi_sygms\" placeholder=\"Select levels\"\r\n [loading]=\"boardAffiliationLevelsLoading()\" [multiple]=\"true\" size=\"sm\">\r\n </cide-ele-select>\r\n </div>\r\n\r\n <!-- Checkboxes -->\r\n <div class=\"tw-flex tw-items-center tw-gap-4 tw-pb-2\">\r\n <cide-ele-input type=\"checkbox\" formControlName=\"scbaf_isprimary\" size=\"sm\" label=\"Primary\">\r\n </cide-ele-input>\r\n\r\n <cide-ele-input type=\"checkbox\" formControlName=\"scbaf_isactive\" size=\"sm\" label=\"Active\">\r\n </cide-ele-input>\r\n </div>\r\n\r\n <!-- Add Button -->\r\n <div class=\"tw-flex tw-items-end\">\r\n <button cideEleButton type=\"submit\" variant=\"primary\" size=\"sm\"\r\n [disabled]=\"boardMappingForm.invalid || educationBoardsLoading()\"\r\n class=\"tw-shadow-sm tw-h-8 tw-px-3\">\r\n <cide-ele-icon class=\"tw-mr-1 tw-text-xs\">add</cide-ele-icon>\r\n <span class=\"tw-text-xs\">Add</span>\r\n </button>\r\n </div>\r\n </div>\r\n </form>\r\n </div>\r\n\r\n <!-- Board Affiliations Grid -->\r\n <div class=\"tw-bg-white tw-rounded-md tw-border tw-overflow-hidden tw-shadow-sm\">\r\n @if (boardAffiliationsLoading()) {\r\n <div class=\"tw-p-4 tw-text-center\">\r\n <div class=\"tw-inline-flex tw-items-center tw-gap-2 tw-text-gray-500\">\r\n <div class=\"tw-animate-spin tw-rounded-full tw-h-3 tw-w-3 tw-border-b-2 tw-border-gray-500\"></div>\r\n <span class=\"tw-text-xs\">Loading...</span>\r\n </div>\r\n </div>\r\n } @else if (boardAffiliations().length === 0) {\r\n <div class=\"tw-p-4 tw-text-center tw-text-gray-500\">\r\n <cide-ele-icon class=\"tw-text-2xl tw-mb-1 tw-text-gray-300\">school</cide-ele-icon>\r\n <p class=\"tw-text-sm tw-font-medium tw-mb-1\">No boards mapped yet</p>\r\n <p class=\"tw-text-xs tw-text-gray-400\">Map education boards above to link them to this entity</p>\r\n </div>\r\n } @else {\r\n <cide-ele-data-grid [config]=\"boardAffiliationsGridConfig\"\r\n [templateRenderers]=\"getBoardMappingsTemplateRenderers()\">\r\n\r\n <!-- Custom actions cell template -->\r\n <ng-template #boardActionsCell let-row=\"row\">\r\n <div class=\"tw-flex tw-items-center tw-gap-1 tw-justify-center\">\r\n <!-- Edit/Delete implementation pending -->\r\n <button\r\n class=\"tw-w-8 tw-h-8 tw-flex tw-items-center tw-justify-center tw-rounded-md tw-transition-colors tw-border tw-border-transparent hover:tw-border-gray-300 tw-text-gray-400 cursor-not-allowed\"\r\n title=\"Actions not implemented\">\r\n <cide-ele-icon class=\"tw-text-sm\">more_horiz</cide-ele-icon>\r\n </button>\r\n </div>\r\n </ng-template>\r\n </cide-ele-data-grid>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n\r\n }\r\n\r\n <!-- Form Actions -->\r\n <div class=\"tw-p-4\">\r\n <div class=\"tw-flex tw-items-center tw-justify-between tw-gap-3\">\r\n <!-- Error Message (Left Side) -->\r\n <cide-form-field-error [formGroup]=\"entityForm\"></cide-form-field-error>\r\n\r\n <!-- Action Buttons (Right Side) -->\r\n <div class=\"tw-flex tw-gap-3\">\r\n <button cideEleButton type=\"button\" variant=\"outline\" size=\"md\" (click)=\"onBack()\"\r\n [disabled]=\"loading()\">\r\n <cide-ele-icon>arrow_back</cide-ele-icon>\r\n Back\r\n </button>\r\n\r\n <button cideEleButton type=\"button\" variant=\"secondary\" size=\"md\" (click)=\"onReset()\"\r\n [disabled]=\"loading()\">\r\n <cide-ele-icon>refresh</cide-ele-icon>\r\n Reset Form\r\n </button>\r\n\r\n <button cideEleButton type=\"submit\" variant=\"primary\" size=\"md\"\r\n [disabled]=\"loading() || entityForm.invalid\" [loading]=\"loading()\">\r\n <cide-ele-icon>{{ isEditMode() ? 'save' : 'add' }}</cide-ele-icon>\r\n {{ isEditMode() ? 'Update Entity' : 'Create Entity' }}\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </form>\r\n </div>\r\n </div>\r\n</cide-lyt-shared-wrapper>", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: CideLytSharedWrapperComponent, selector: "cide-lyt-shared-wrapper", inputs: ["shared_wrapper_setup_param", "breadcrumb_data"] }, { kind: "component", type: CideInputComponent, selector: "cide-ele-input", inputs: ["fill", "label", "labelHide", "disabled", "clearInput", "labelPlacement", "labelDir", "placeholder", "leadingIcon", "trailingIcon", "helperText", "helperTextCollapse", "hideHelperAndErrorText", "errorText", "maxlength", "minlength", "required", "autocapitalize", "autocomplete", "type", "width", "id", "ngModel", "option", "min", "max", "step", "size"], outputs: ["ngModelChange"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput", "options", "multiple", "searchable", "showSearchInput", "loading", "valueKey", "labelKey", "treeView"], outputs: ["ngModelChange", "change", "searchChange"] }, { kind: "component", type: CideTextareaComponent, selector: "cide-ele-textarea", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "minlength", "maxlength", "rows", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput"], outputs: ["ngModelChange"] }, { kind: "component", type: CideEleFileInputComponent, selector: "cide-ele-file-input", inputs: ["label", "accept", "multiple", "disabled", "required", "helperText", "errorText", "showPreview", "previewWidth", "previewHeight", "previewBoxMode", "showFileName", "placeholderText", "placeholderIcon", "autoUpload", "uploadData", "showFloatingUploader", "floatingUploaderGroupId"], outputs: ["fileChange", "uploadSuccess", "uploadError", "uploadProgressChange"] }, { kind: "component", type: CideEleTabComponent, selector: "cide-ele-tab", inputs: ["tabs", "activeTabId", "size", "variant", "fullWidth", "disabled"], outputs: ["tabChange"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated", "adaptive"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideFormFieldErrorComponent, selector: "cide-form-field-error", inputs: ["control", "formGroup", "fieldName", "customMessages"] }, { kind: "component", type: CideEleDataGridComponent, selector: "cide-ele-data-grid", inputs: ["config", "templateRenderers", "customFormatters", "actionHandlers", "serverSidePagination", "totalServerItems", "currentServerPage", "currentServerPageSize", "dragDropEnabled"], outputs: ["gridEvent"] }] });
|
|
11529
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: CideCoreEntityCreateComponent, isStandalone: true, selector: "cide-core-entity-create", viewQueries: [{ propertyName: "userCellRendererTemplate", first: true, predicate: ["userCell"], descendants: true, isSignal: true }, { propertyName: "actionsCellRendererTemplate", first: true, predicate: ["actionsCell"], descendants: true, isSignal: true }, { propertyName: "boardActionsCellRendererTemplate", first: true, predicate: ["boardActionsCell"], descendants: true, isSignal: true }], ngImport: i0, template: "<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'core_entity_form' }\"\r\n [breadcrumb_data]=\"breadcrumbData()\">\r\n <!-- Modern Entity Create Form -->\r\n <div class=\"tw-min-h-screen\">\r\n <div class=\"tw-mx-auto\">\r\n\r\n <form [formGroup]=\"entityForm\" [class.tw-opacity-60]=\"loading()\" [class.tw-pointer-events-none]=\"loading()\"\r\n (ngSubmit)=\"onSubmit()\">\r\n\r\n <!-- Breadcrumb is now rendered by shared wrapper; inline breadcrumb removed -->\r\n\r\n <!-- Basic Information Section -->\r\n <div class=\"tw-p-2 tw-pb-0\">\r\n <div class=\"tw-space-y-6\">\r\n <!-- Top Section: Image on Right, Form Fields on Left -->\r\n <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-[1fr_200px] tw-gap-4\">\r\n <!-- Left Side: Form Fields -->\r\n <div class=\"tw-space-y-6\">\r\n <!-- Institution Name, Entity Type & Active Status -->\r\n <div\r\n class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-[1fr_250px_120px] tw-gap-4 tw-items-end\">\r\n <cide-ele-input id=\"syen_name\" type=\"text\" label=\"Institution Name\" formControlName=\"syen_name\"\r\n placeholder=\"Enter institution name\" size=\"sm\">\r\n </cide-ele-input>\r\n\r\n <cide-ele-select label=\"Entity Type\" labelPlacement=\"floating\" [options]=\"entityTypes()\"\r\n formControlName=\"syen_entity_type_sygms\" placeholder=\"Select institution type\" size=\"sm\">\r\n </cide-ele-select>\r\n\r\n <div class=\"tw-flex tw-items-center tw-justify-center tw-gap-1 tw-h-full\">\r\n <cide-ele-input type=\"checkbox\" formControlName=\"syen_isactive\" size=\"sm\" label=\"Is Active\">\r\n </cide-ele-input>\r\n </div>\r\n </div>\r\n\r\n <!-- UDISE, Affiliation & Institution Code -->\r\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-3 tw-gap-4\">\r\n <cide-ele-input label=\"UDISE Number\" formControlName=\"syen_udise_no\" placeholder=\"Enter UDISE number\"\r\n size=\"sm\">\r\n </cide-ele-input>\r\n\r\n <cide-ele-input label=\"Affiliation Number\" formControlName=\"syen_affiliation_no\"\r\n placeholder=\"Enter affiliation number\" size=\"sm\">\r\n </cide-ele-input>\r\n\r\n <cide-ele-input label=\"Institution Code\" formControlName=\"syen_entity_code\"\r\n placeholder=\"Enter unique code\" size=\"sm\">\r\n </cide-ele-input>\r\n </div>\r\n </div>\r\n\r\n <!-- Right Side: Entity Image Upload -->\r\n <div class=\"tw-flex tw-items-start tw-justify-center tw-pt-0\">\r\n <cide-ele-file-input id=\"entity_image_upload\" formControlName=\"syen_photo_id_cyfm\" accept=\"image/*\"\r\n [showPreview]=\"true\" [previewBoxMode]=\"true\" [showFileName]=\"false\" previewWidth=\"180px\"\r\n previewHeight=\"120px\" [required]=\"true\" placeholderText=\"Upload Logo\" placeholderIcon=\"cloud_upload\"\r\n [autoUpload]=\"true\" [uploadData]=\"getUploadData()\" (uploadSuccess)=\"onImageUploadSuccess($event)\"\r\n (uploadError)=\"onImageUploadError($event)\" (uploadProgressChange)=\"onImageUploadProgress($event)\">\r\n </cide-ele-file-input>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Tab Navigation -->\r\n <div class=\"tw-px-4 !tw-mt-0\">\r\n <cide-ele-tab [tabs]=\"entityTabs()\" [activeTabId]=\"activeTab()\" size=\"sm\" variant=\"default\"\r\n (tabChange)=\"onTabChange($event)\">\r\n </cide-ele-tab>\r\n </div>\r\n\r\n <!-- Tab Content -->\r\n <div class=\"tw-transition-all tw-duration-300 tw-ease-in-out !tw-mt-2\" [class.tw-opacity-60]=\"loading()\"\r\n [class.tw-pointer-events-none]=\"loading()\">\r\n @switch (activeTab()) {\r\n\r\n @case ('corporate') {\r\n <div class=\"tw-p-4\">\r\n <div class=\"tw-space-y-6\">\r\n <!-- Corporate Address - Full Width -->\r\n <div class=\"tw-w-full\">\r\n <cide-ele-textarea label=\"Corporate Address\" formControlName=\"syen_corporate_address\"\r\n placeholder=\"Enter complete corporate address\" [rows]=\"4\">\r\n </cide-ele-textarea>\r\n </div>\r\n\r\n <!-- Postal Code, City, State & Country - Four Columns -->\r\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-[220px_0.8fr_0.7fr_240px] tw-gap-6\">\r\n <cide-ele-select label=\"Postal Code\" [options]=\"postalCodes()\"\r\n formControlName=\"syen_corporate_pin_sypin\" placeholder=\"Select postal code\" [searchable]=\"true\"\r\n [loading]=\"postalCodesLoading()\" (searchChange)=\"onPostalCodeSearch($event)\" size=\"sm\">\r\n </cide-ele-select>\r\n\r\n <cide-ele-input label=\"City\" formControlName=\"syen_corporate_city_sypin\" placeholder=\"Enter city name\">\r\n </cide-ele-input>\r\n\r\n <cide-ele-input label=\"State\" formControlName=\"syen_corporate_state_sypin\"\r\n placeholder=\"Enter state name\">\r\n </cide-ele-input>\r\n\r\n <cide-ele-select label=\"Country\" [options]=\"corporateCountries()\"\r\n formControlName=\"syen_corporate_country_syctr\" placeholder=\"Select country\" [searchable]=\"true\"\r\n (searchChange)=\"onCorporateCountrySearch($event)\" [loading]=\"corporateCountriesLoading()\" size=\"sm\">\r\n </cide-ele-select>\r\n </div>\r\n\r\n <!-- Contact Person, Phone, Email & Fax - Four Columns -->\r\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-[1fr_200px_1fr_150px] tw-gap-6\">\r\n <cide-ele-select label=\"Contact Person\" [options]=\"users()\"\r\n formControlName=\"syen_corporate_contact_person_user\" placeholder=\"Select contact person\"\r\n [searchable]=\"true\" [loading]=\"usersLoading()\" (searchChange)=\"onUserSearch($event)\">\r\n </cide-ele-select>\r\n\r\n <cide-ele-input label=\"Phone\" formControlName=\"syen_corporate_phone\" type=\"tel\"\r\n placeholder=\"Enter phone number\" size=\"sm\">\r\n </cide-ele-input>\r\n\r\n <cide-ele-input label=\"Email\" formControlName=\"syen_corporate_email\" type=\"email\"\r\n placeholder=\"Enter email address\">\r\n </cide-ele-input>\r\n\r\n <cide-ele-input label=\"Fax\" formControlName=\"syen_corporate_fax\" placeholder=\"Enter fax number\"\r\n size=\"sm\">\r\n </cide-ele-input>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n\r\n @case ('contact') {\r\n <div class=\"tw-p-4\">\r\n <div class=\"tw-space-y-6\">\r\n <!-- Currency Selection -->\r\n <div class=\"tw-w-full\">\r\n <cide-ele-select label=\"Currency\" [options]=\"currencies()\" formControlName=\"syen_currency_sycr\"\r\n placeholder=\"Select currency\">\r\n </cide-ele-select>\r\n </div>\r\n\r\n <!-- Alternate Phone & Website - Two Columns -->\r\n <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-2 tw-gap-6\">\r\n <cide-ele-input label=\"Alternate Phone\" formControlName=\"syen_corporate_phone_alt\" type=\"tel\"\r\n placeholder=\"Enter alternate phone number\">\r\n </cide-ele-input>\r\n\r\n <cide-ele-input label=\"Website URL\" formControlName=\"syen_website\" type=\"url\"\r\n placeholder=\"https://example.com\" autocomplete=\"url\" leadingIcon=\"language\"\r\n helperText=\"Enter a valid website URL starting with http:// or https://\">\r\n </cide-ele-input>\r\n </div>\r\n\r\n <!-- Alternate Email - Full Width -->\r\n <div class=\"tw-w-full\">\r\n <cide-ele-input label=\"Alternate Email\" formControlName=\"syen_corporate_email_alt\" type=\"email\"\r\n placeholder=\"Enter alternate email address\">\r\n </cide-ele-input>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n\r\n @case ('registered') {\r\n <div class=\"tw-p-4\">\r\n <div class=\"tw-space-y-6\">\r\n <!-- Registered Address - Full Width -->\r\n <div class=\"tw-w-full\">\r\n <cide-ele-textarea label=\"Registered Address\" formControlName=\"syen_registered_address\"\r\n placeholder=\"Enter complete registered address\" [rows]=\"4\">\r\n </cide-ele-textarea>\r\n </div>\r\n\r\n <!-- Postal Code, City, State & Country - Four Columns -->\r\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-[220px_0.8fr_0.7fr_240px] tw-gap-6\">\r\n <cide-ele-select label=\"Postal Code\" [options]=\"postalCodes()\"\r\n formControlName=\"syen_registered_pin_sypin\" placeholder=\"Select postal code\" [searchable]=\"true\"\r\n [loading]=\"postalCodesLoading()\" (searchChange)=\"onPostalCodeSearch($event)\" size=\"sm\">\r\n </cide-ele-select>\r\n\r\n <cide-ele-input label=\"City\" formControlName=\"syen_registered_city_sypin\" placeholder=\"Enter city name\">\r\n </cide-ele-input>\r\n\r\n <cide-ele-input label=\"State\" formControlName=\"syen_registered_state_sypin\"\r\n placeholder=\"Enter state name\">\r\n </cide-ele-input>\r\n\r\n <cide-ele-select label=\"Country\" [options]=\"registeredCountries()\"\r\n formControlName=\"syen_registered_country_syctr\" placeholder=\"Select country\" [searchable]=\"true\"\r\n (searchChange)=\"onRegisteredCountrySearch($event)\" [loading]=\"registeredCountriesLoading()\" size=\"sm\">\r\n </cide-ele-select>\r\n </div>\r\n\r\n <!-- Contact Person, Phone, Email & Fax - Four Columns -->\r\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-[1fr_200px_1fr_150px] tw-gap-6\">\r\n <cide-ele-select label=\"Contact Person\" [options]=\"users()\"\r\n formControlName=\"syen_registered_contact_person_user\" placeholder=\"Select contact person\"\r\n [searchable]=\"true\" [loading]=\"usersLoading()\" (searchChange)=\"onUserSearch($event)\">\r\n </cide-ele-select>\r\n\r\n <cide-ele-input label=\"Phone\" formControlName=\"syen_registered_phone\" type=\"tel\"\r\n placeholder=\"Enter phone number\" size=\"sm\">\r\n </cide-ele-input>\r\n\r\n <cide-ele-input label=\"Email\" formControlName=\"syen_registered_email\" type=\"email\"\r\n placeholder=\"Enter email address\">\r\n </cide-ele-input>\r\n\r\n <cide-ele-input label=\"Fax\" formControlName=\"syen_registered_fax\" placeholder=\"Enter fax number\"\r\n size=\"sm\">\r\n </cide-ele-input>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n\r\n @case ('user-mapping') {\r\n <div class=\"tw-p-2\">\r\n <div class=\"tw-space-y-4\">\r\n <!-- Add User Mapping Form -->\r\n <div class=\"tw-bg-white tw-p-4 tw-rounded-lg tw-border tw-shadow-sm\">\r\n <div class=\"tw-flex tw-items-center tw-gap-2 tw-mb-3\">\r\n <cide-ele-icon class=\"tw-text-blue-600 tw-text-sm\">person_add</cide-ele-icon>\r\n <h3 class=\"tw-text-sm tw-font-semibold tw-text-gray-800\">Add User to Entity</h3>\r\n </div>\r\n\r\n <form [formGroup]=\"userMappingForm\" (ngSubmit)=\"addUserMapping()\">\r\n <div class=\"tw-flex tw-items-end tw-gap-3\">\r\n <div class=\"tw-flex-1\">\r\n <cide-ele-select label=\"Select User\" [options]=\"availableUsers()\" formControlName=\"syenm_id_user\"\r\n placeholder=\"Choose user to add to entity\" [searchable]=\"true\"\r\n [loading]=\"availableUsersLoading()\" size=\"md\">\r\n </cide-ele-select>\r\n </div>\r\n\r\n <!-- Add Button -->\r\n <div class=\"tw-flex tw-items-end\">\r\n <button cideEleButton type=\"submit\" variant=\"primary\" size=\"xs\"\r\n [disabled]=\"userMappingForm.invalid || availableUsersLoading()\"\r\n class=\"tw-shadow-sm tw-h-8 tw-px-3\">\r\n <cide-ele-icon class=\"tw-mr-1 tw-text-xs\">add</cide-ele-icon>\r\n <span class=\"tw-text-xs\">Add</span>\r\n </button>\r\n </div>\r\n </div>\r\n </form>\r\n </div>\r\n\r\n <!-- User Mappings Grid -->\r\n <div class=\"tw-bg-white tw-rounded-md tw-border tw-overflow-hidden tw-shadow-sm\">\r\n @if (userEntityMappingsLoading()) {\r\n <div class=\"tw-p-4 tw-text-center\">\r\n <div class=\"tw-inline-flex tw-items-center tw-gap-2 tw-text-gray-500\">\r\n <div class=\"tw-animate-spin tw-rounded-full tw-h-3 tw-w-3 tw-border-b-2 tw-border-gray-500\"></div>\r\n <span class=\"tw-text-xs\">Loading...</span>\r\n </div>\r\n </div>\r\n } @else if (userEntityMappings().length === 0) {\r\n <div class=\"tw-p-4 tw-text-center tw-text-gray-500\">\r\n <cide-ele-icon class=\"tw-text-2xl tw-mb-1 tw-text-gray-300\">people_outline</cide-ele-icon>\r\n <p class=\"tw-text-sm tw-font-medium tw-mb-1\">No users mapped yet</p>\r\n <p class=\"tw-text-xs tw-text-gray-400\">Add users above to grant them access to this entity</p>\r\n </div>\r\n } @else {\r\n <cide-ele-data-grid [config]=\"userMappingsGridConfig\"\r\n [templateRenderers]=\"getUserMappingsTemplateRenderers()\">\r\n\r\n <!-- Custom user cell template -->\r\n <ng-template #userCell let-row=\"row\">\r\n <div class=\"tw-flex tw-items-center tw-gap-2\">\r\n <div\r\n class=\"tw-w-6 tw-h-6 tw-bg-gradient-to-br tw-from-blue-100 tw-to-indigo-100 tw-rounded-full tw-flex tw-items-center tw-justify-center tw-shadow-sm\">\r\n <cide-ele-icon class=\"tw-text-blue-600 tw-text-xs\">person</cide-ele-icon>\r\n </div>\r\n <div class=\"tw-flex tw-flex-col\">\r\n <span class=\"tw-font-medium tw-text-gray-900 tw-text-xs\">\r\n {{ row?._displayUserName }}\r\n </span>\r\n </div>\r\n </div>\r\n </ng-template>\r\n\r\n <!-- Custom actions cell template -->\r\n <ng-template #actionsCell let-row=\"row\">\r\n <div class=\"tw-flex tw-items-center tw-gap-1 tw-justify-center\">\r\n <button (click)=\"updateUserMapping(row._id!, { syenm_isactive: !row.syenm_isactive })\"\r\n class=\"tw-w-8 tw-h-8 tw-flex tw-items-center tw-justify-center tw-rounded-md tw-transition-colors tw-border tw-border-transparent hover:tw-border-gray-300\"\r\n [class.tw-bg-green-100]=\"row.syenm_isactive\" [class.tw-text-green-700]=\"row.syenm_isactive\"\r\n [class.tw-bg-gray-100]=\"!row.syenm_isactive\" [class.tw-text-gray-600]=\"!row.syenm_isactive\"\r\n [title]=\"row.syenm_isactive ? 'Deactivate' : 'Activate'\">\r\n <cide-ele-icon class=\"tw-text-sm\">\r\n {{ row.syenm_isactive ? 'pause' : 'play_arrow' }}\r\n </cide-ele-icon>\r\n </button>\r\n\r\n <button (click)=\"removeUserMapping(row._id!)\"\r\n class=\"tw-w-8 tw-h-8 tw-flex tw-items-center tw-justify-center tw-rounded-md tw-bg-red-100 tw-text-red-600 hover:tw-bg-red-200 tw-transition-colors tw-border tw-border-transparent hover:tw-border-red-300\"\r\n title=\"Remove User\">\r\n <cide-ele-icon class=\"tw-text-sm\">delete</cide-ele-icon>\r\n </button>\r\n </div>\r\n </ng-template>\r\n </cide-ele-data-grid>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n\r\n\r\n @case ('board-mapping') {\r\n <div class=\"tw-p-2\">\r\n <div class=\"tw-space-y-4\">\r\n <!-- Add Board Mapping Form -->\r\n <div class=\"tw-bg-white tw-p-4 tw-rounded-lg tw-border tw-shadow-sm\">\r\n <div class=\"tw-flex tw-items-center tw-gap-2 tw-mb-3\">\r\n <cide-ele-icon class=\"tw-text-blue-600 tw-text-sm\">school</cide-ele-icon>\r\n <h3 class=\"tw-text-sm tw-font-semibold tw-text-gray-800\">Map Education Board</h3>\r\n </div>\r\n\r\n <form [formGroup]=\"boardMappingForm\" (ngSubmit)=\"addBoardAffiliation()\">\r\n <div class=\"tw-flex tw-flex-wrap tw-gap-3 tw-items-end\">\r\n\r\n <!-- Board Selection -->\r\n <div class=\"tw-flex-1 tw-min-w-[250px]\">\r\n <cide-ele-select label=\"Select Board\" [options]=\"educationBoards()\"\r\n formControlName=\"scbaf_board_id_edbrd\" placeholder=\"Choose education board\" [searchable]=\"true\"\r\n [loading]=\"educationBoardsLoading()\" size=\"sm\">\r\n </cide-ele-select>\r\n </div>\r\n\r\n <!-- Affiliation Number -->\r\n <div class=\"tw-w-44\">\r\n <cide-ele-input label=\"Affiliation No.\" formControlName=\"scbaf_affiliation_number\"\r\n placeholder=\"Enter number\" size=\"sm\">\r\n </cide-ele-input>\r\n </div>\r\n\r\n <!-- Status Dropdown -->\r\n <div class=\"tw-w-40\">\r\n <cide-ele-select label=\"Status\" [options]=\"boardAffiliationStatuses()\"\r\n formControlName=\"scbaf_affiliation_status_sygms\" placeholder=\"Select status\"\r\n [loading]=\"boardAffiliationStatusesLoading()\" size=\"sm\">\r\n </cide-ele-select>\r\n </div>\r\n\r\n <!-- Affiliation Level Multi-Select -->\r\n <div class=\"tw-w-64\">\r\n <cide-ele-select label=\"Affiliation Level\" [options]=\"boardAffiliationLevels()\"\r\n formControlName=\"scbaf_affiliation_level_multi_sygms\" placeholder=\"Select levels\"\r\n [loading]=\"boardAffiliationLevelsLoading()\" [multiple]=\"true\" size=\"sm\">\r\n </cide-ele-select>\r\n </div>\r\n\r\n <!-- Checkboxes -->\r\n <div class=\"tw-flex tw-items-center tw-gap-4 tw-pb-2\">\r\n <cide-ele-input type=\"checkbox\" formControlName=\"scbaf_isprimary\" size=\"sm\" label=\"Primary\">\r\n </cide-ele-input>\r\n\r\n <cide-ele-input type=\"checkbox\" formControlName=\"scbaf_isactive\" size=\"sm\" label=\"Active\">\r\n </cide-ele-input>\r\n </div>\r\n\r\n <!-- Add Button -->\r\n <div class=\"tw-flex tw-items-end\">\r\n <button cideEleButton type=\"submit\" variant=\"primary\" size=\"xs\"\r\n [disabled]=\"boardMappingForm.invalid || educationBoardsLoading()\"\r\n class=\"tw-shadow-sm tw-h-8 tw-px-3\">\r\n <cide-ele-icon class=\"tw-mr-1 tw-text-xs\">add</cide-ele-icon>\r\n <span class=\"tw-text-xs\">Add</span>\r\n </button>\r\n </div>\r\n </div>\r\n </form>\r\n </div>\r\n\r\n <!-- Board Affiliations Grid -->\r\n <div class=\"tw-bg-white tw-rounded-md tw-border tw-overflow-hidden tw-shadow-sm\">\r\n @if (boardAffiliationsLoading()) {\r\n <div class=\"tw-p-4 tw-text-center\">\r\n <div class=\"tw-inline-flex tw-items-center tw-gap-2 tw-text-gray-500\">\r\n <div class=\"tw-animate-spin tw-rounded-full tw-h-3 tw-w-3 tw-border-b-2 tw-border-gray-500\"></div>\r\n <span class=\"tw-text-xs\">Loading...</span>\r\n </div>\r\n </div>\r\n } @else if (boardAffiliations().length === 0) {\r\n <div class=\"tw-p-4 tw-text-center tw-text-gray-500\">\r\n <cide-ele-icon class=\"tw-text-2xl tw-mb-1 tw-text-gray-300\">school</cide-ele-icon>\r\n <p class=\"tw-text-sm tw-font-medium tw-mb-1\">No boards mapped yet</p>\r\n <p class=\"tw-text-xs tw-text-gray-400\">Map education boards above to link them to this entity</p>\r\n </div>\r\n } @else {\r\n <cide-ele-data-grid [config]=\"boardAffiliationsGridConfig\"\r\n [templateRenderers]=\"getBoardMappingsTemplateRenderers()\">\r\n\r\n <!-- Custom actions cell template -->\r\n <ng-template #boardActionsCell let-row=\"row\">\r\n <div class=\"tw-flex tw-items-center tw-gap-1 tw-justify-center\">\r\n <!-- Edit/Delete implementation pending -->\r\n <button\r\n class=\"tw-w-8 tw-h-8 tw-flex tw-items-center tw-justify-center tw-rounded-md tw-transition-colors tw-border tw-border-transparent hover:tw-border-gray-300 tw-text-gray-400 cursor-not-allowed\"\r\n title=\"Actions not implemented\">\r\n <cide-ele-icon class=\"tw-text-sm\">more_horiz</cide-ele-icon>\r\n </button>\r\n </div>\r\n </ng-template>\r\n </cide-ele-data-grid>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n\r\n }\r\n\r\n <!-- Form Actions -->\r\n <div class=\"tw-p-4\">\r\n <div class=\"tw-flex tw-items-center tw-justify-between tw-gap-3\">\r\n <!-- Error Message (Left Side) -->\r\n <cide-form-field-error [formGroup]=\"entityForm\"></cide-form-field-error>\r\n\r\n <!-- Action Buttons (Right Side) -->\r\n <div class=\"tw-flex tw-gap-3\">\r\n <button cideEleButton type=\"button\" variant=\"outline\" size=\"xs\" (click)=\"onBack()\"\r\n [disabled]=\"loading()\">\r\n <cide-ele-icon>arrow_back</cide-ele-icon>\r\n Back\r\n </button>\r\n\r\n <button cideEleButton type=\"button\" variant=\"secondary\" size=\"xs\" (click)=\"onReset()\"\r\n [disabled]=\"loading()\">\r\n <cide-ele-icon>refresh</cide-ele-icon>\r\n Reset Form\r\n </button>\r\n\r\n <button cideEleButton type=\"submit\" variant=\"primary\" size=\"xs\"\r\n [disabled]=\"loading() || entityForm.invalid\" [loading]=\"loading()\">\r\n <cide-ele-icon>{{ isEditMode() ? 'save' : 'add' }}</cide-ele-icon>\r\n {{ isEditMode() ? 'Update Entity' : 'Create Entity' }}\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </form>\r\n </div>\r\n </div>\r\n</cide-lyt-shared-wrapper>", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: CideLytSharedWrapperComponent, selector: "cide-lyt-shared-wrapper", inputs: ["shared_wrapper_setup_param", "breadcrumb_data"] }, { kind: "component", type: CideInputComponent, selector: "cide-ele-input", inputs: ["fill", "label", "labelHide", "disabled", "clearInput", "labelPlacement", "labelDir", "placeholder", "leadingIcon", "trailingIcon", "helperText", "helperTextCollapse", "hideHelperAndErrorText", "errorText", "maxlength", "minlength", "required", "autocapitalize", "autocomplete", "type", "width", "id", "ngModel", "option", "min", "max", "step", "size"], outputs: ["ngModelChange"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput", "options", "multiple", "searchable", "showSearchInput", "loading", "valueKey", "labelKey", "treeView"], outputs: ["ngModelChange", "change", "searchChange"] }, { kind: "component", type: CideTextareaComponent, selector: "cide-ele-textarea", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "minlength", "maxlength", "rows", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput"], outputs: ["ngModelChange"] }, { kind: "component", type: CideEleFileInputComponent, selector: "cide-ele-file-input", inputs: ["label", "accept", "multiple", "disabled", "required", "helperText", "errorText", "showPreview", "previewWidth", "previewHeight", "previewBoxMode", "showFileName", "placeholderText", "placeholderIcon", "autoUpload", "uploadData", "showFloatingUploader", "floatingUploaderGroupId"], outputs: ["fileChange", "uploadSuccess", "uploadError", "uploadProgressChange"] }, { kind: "component", type: CideEleTabComponent, selector: "cide-ele-tab", inputs: ["tabs", "activeTabId", "size", "variant", "fullWidth", "disabled"], outputs: ["tabChange"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated", "adaptive"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip", "name"] }, { kind: "component", type: CideFormFieldErrorComponent, selector: "cide-form-field-error", inputs: ["control", "formGroup", "fieldName", "customMessages"] }, { kind: "component", type: CideEleDataGridComponent, selector: "cide-ele-data-grid", inputs: ["config", "templateRenderers", "customFormatters", "actionHandlers", "serverSidePagination", "totalServerItems", "currentServerPage", "currentServerPageSize", "dragDropEnabled"], outputs: ["gridEvent"] }] });
|
|
11544
11530
|
}
|
|
11545
11531
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideCoreEntityCreateComponent, decorators: [{
|
|
11546
11532
|
type: Component,
|
|
@@ -11556,7 +11542,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
11556
11542
|
CideIconComponent,
|
|
11557
11543
|
CideFormFieldErrorComponent,
|
|
11558
11544
|
CideEleDataGridComponent,
|
|
11559
|
-
], template: "<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'core_entity_form' }\"\r\n [breadcrumb_data]=\"breadcrumbData()\">\r\n <!-- Modern Entity Create Form -->\r\n <div class=\"tw-min-h-screen\">\r\n <div class=\"tw-mx-auto\">\r\n\r\n <form [formGroup]=\"entityForm\" [class.tw-opacity-60]=\"loading()\" [class.tw-pointer-events-none]=\"loading()\"\r\n (ngSubmit)=\"onSubmit()\">\r\n\r\n <!-- Breadcrumb is now rendered by shared wrapper; inline breadcrumb removed -->\r\n\r\n <!-- Basic Information Section -->\r\n <div class=\"tw-p-2 tw-pb-0\">\r\n <div class=\"tw-space-y-6\">\r\n <!-- Top Section: Image on Right, Form Fields on Left -->\r\n <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-[1fr_200px] tw-gap-4\">\r\n <!-- Left Side: Form Fields -->\r\n <div class=\"tw-space-y-6\">\r\n <!-- Institution Name, Entity Type & Active Status -->\r\n <div\r\n class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-[1fr_250px_120px] tw-gap-4 tw-items-end\">\r\n <cide-ele-input id=\"syen_name\" type=\"text\" label=\"Institution Name\" formControlName=\"syen_name\"\r\n placeholder=\"Enter institution name\" size=\"sm\">\r\n </cide-ele-input>\r\n\r\n <cide-ele-select label=\"Entity Type\" labelPlacement=\"floating\" [options]=\"entityTypes()\"\r\n formControlName=\"syen_entity_type_sygms\" placeholder=\"Select institution type\" size=\"sm\">\r\n </cide-ele-select>\r\n\r\n <div class=\"tw-flex tw-items-center tw-justify-center tw-gap-1 tw-h-full\">\r\n <cide-ele-input type=\"checkbox\" formControlName=\"syen_isactive\" size=\"sm\" label=\"Is Active\">\r\n </cide-ele-input>\r\n </div>\r\n </div>\r\n\r\n <!-- UDISE, Affiliation & Institution Code -->\r\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-3 tw-gap-4\">\r\n <cide-ele-input label=\"UDISE Number\" formControlName=\"syen_udise_no\" placeholder=\"Enter UDISE number\"\r\n size=\"sm\">\r\n </cide-ele-input>\r\n\r\n <cide-ele-input label=\"Affiliation Number\" formControlName=\"syen_affiliation_no\"\r\n placeholder=\"Enter affiliation number\" size=\"sm\">\r\n </cide-ele-input>\r\n\r\n <cide-ele-input label=\"Institution Code\" formControlName=\"syen_entity_code\"\r\n placeholder=\"Enter unique code\" size=\"sm\">\r\n </cide-ele-input>\r\n </div>\r\n </div>\r\n\r\n <!-- Right Side: Entity Image Upload -->\r\n <div class=\"tw-flex tw-items-start tw-justify-center tw-pt-0\">\r\n <cide-ele-file-input id=\"entity_image_upload\" formControlName=\"syen_photo_id_cyfm\" accept=\"image/*\"\r\n [showPreview]=\"true\" [previewBoxMode]=\"true\" [showFileName]=\"false\" previewWidth=\"180px\"\r\n previewHeight=\"120px\" [required]=\"true\" placeholderText=\"Upload Logo\" placeholderIcon=\"cloud_upload\"\r\n [autoUpload]=\"true\" [uploadData]=\"getUploadData()\" (uploadSuccess)=\"onImageUploadSuccess($event)\"\r\n (uploadError)=\"onImageUploadError($event)\" (uploadProgressChange)=\"onImageUploadProgress($event)\">\r\n </cide-ele-file-input>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Tab Navigation -->\r\n <div class=\"tw-px-4 !tw-mt-0\">\r\n <cide-ele-tab [tabs]=\"entityTabs()\" [activeTabId]=\"activeTab()\" size=\"sm\" variant=\"default\"\r\n (tabChange)=\"onTabChange($event)\">\r\n </cide-ele-tab>\r\n </div>\r\n\r\n <!-- Tab Content -->\r\n <div class=\"tw-transition-all tw-duration-300 tw-ease-in-out !tw-mt-2\" [class.tw-opacity-60]=\"loading()\"\r\n [class.tw-pointer-events-none]=\"loading()\">\r\n @switch (activeTab()) {\r\n\r\n @case ('corporate') {\r\n <div class=\"tw-p-4\">\r\n <div class=\"tw-space-y-6\">\r\n <!-- Corporate Address - Full Width -->\r\n <div class=\"tw-w-full\">\r\n <cide-ele-textarea label=\"Corporate Address\" formControlName=\"syen_corporate_address\"\r\n placeholder=\"Enter complete corporate address\" [rows]=\"4\">\r\n </cide-ele-textarea>\r\n </div>\r\n\r\n <!-- Postal Code, City, State & Country - Four Columns -->\r\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-[220px_0.8fr_0.7fr_240px] tw-gap-6\">\r\n <cide-ele-select label=\"Postal Code\" [options]=\"postalCodes()\"\r\n formControlName=\"syen_corporate_pin_sypin\" placeholder=\"Select postal code\" [searchable]=\"true\"\r\n [loading]=\"postalCodesLoading()\" (searchChange)=\"onPostalCodeSearch($event)\" size=\"sm\">\r\n </cide-ele-select>\r\n\r\n <cide-ele-input label=\"City\" formControlName=\"syen_corporate_city_sypin\" placeholder=\"Enter city name\">\r\n </cide-ele-input>\r\n\r\n <cide-ele-input label=\"State\" formControlName=\"syen_corporate_state_sypin\"\r\n placeholder=\"Enter state name\">\r\n </cide-ele-input>\r\n\r\n <cide-ele-select label=\"Country\" [options]=\"corporateCountries()\"\r\n formControlName=\"syen_corporate_country_syctr\" placeholder=\"Select country\" [searchable]=\"true\"\r\n (searchChange)=\"onCorporateCountrySearch($event)\" [loading]=\"corporateCountriesLoading()\" size=\"sm\">\r\n </cide-ele-select>\r\n </div>\r\n\r\n <!-- Contact Person, Phone, Email & Fax - Four Columns -->\r\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-[1fr_200px_1fr_150px] tw-gap-6\">\r\n <cide-ele-select label=\"Contact Person\" [options]=\"users()\"\r\n formControlName=\"syen_corporate_contact_person_user\" placeholder=\"Select contact person\"\r\n [searchable]=\"true\" [loading]=\"usersLoading()\" (searchChange)=\"onUserSearch($event)\">\r\n </cide-ele-select>\r\n\r\n <cide-ele-input label=\"Phone\" formControlName=\"syen_corporate_phone\" type=\"tel\"\r\n placeholder=\"Enter phone number\" size=\"sm\">\r\n </cide-ele-input>\r\n\r\n <cide-ele-input label=\"Email\" formControlName=\"syen_corporate_email\" type=\"email\"\r\n placeholder=\"Enter email address\">\r\n </cide-ele-input>\r\n\r\n <cide-ele-input label=\"Fax\" formControlName=\"syen_corporate_fax\" placeholder=\"Enter fax number\"\r\n size=\"sm\">\r\n </cide-ele-input>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n\r\n @case ('contact') {\r\n <div class=\"tw-p-4\">\r\n <div class=\"tw-space-y-6\">\r\n <!-- Currency Selection -->\r\n <div class=\"tw-w-full\">\r\n <cide-ele-select label=\"Currency\" [options]=\"currencies()\" formControlName=\"syen_currency_sycr\"\r\n placeholder=\"Select currency\">\r\n </cide-ele-select>\r\n </div>\r\n\r\n <!-- Alternate Phone & Website - Two Columns -->\r\n <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-2 tw-gap-6\">\r\n <cide-ele-input label=\"Alternate Phone\" formControlName=\"syen_corporate_phone_alt\" type=\"tel\"\r\n placeholder=\"Enter alternate phone number\">\r\n </cide-ele-input>\r\n\r\n <cide-ele-input label=\"Website URL\" formControlName=\"syen_website\" type=\"url\"\r\n placeholder=\"https://example.com\" autocomplete=\"url\" leadingIcon=\"language\"\r\n helperText=\"Enter a valid website URL starting with http:// or https://\">\r\n </cide-ele-input>\r\n </div>\r\n\r\n <!-- Alternate Email - Full Width -->\r\n <div class=\"tw-w-full\">\r\n <cide-ele-input label=\"Alternate Email\" formControlName=\"syen_corporate_email_alt\" type=\"email\"\r\n placeholder=\"Enter alternate email address\">\r\n </cide-ele-input>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n\r\n @case ('registered') {\r\n <div class=\"tw-p-4\">\r\n <div class=\"tw-space-y-6\">\r\n <!-- Registered Address - Full Width -->\r\n <div class=\"tw-w-full\">\r\n <cide-ele-textarea label=\"Registered Address\" formControlName=\"syen_registered_address\"\r\n placeholder=\"Enter complete registered address\" [rows]=\"4\">\r\n </cide-ele-textarea>\r\n </div>\r\n\r\n <!-- Postal Code, City, State & Country - Four Columns -->\r\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-[220px_0.8fr_0.7fr_240px] tw-gap-6\">\r\n <cide-ele-select label=\"Postal Code\" [options]=\"postalCodes()\"\r\n formControlName=\"syen_registered_pin_sypin\" placeholder=\"Select postal code\" [searchable]=\"true\"\r\n [loading]=\"postalCodesLoading()\" (searchChange)=\"onPostalCodeSearch($event)\" size=\"sm\">\r\n </cide-ele-select>\r\n\r\n <cide-ele-input label=\"City\" formControlName=\"syen_registered_city_sypin\" placeholder=\"Enter city name\">\r\n </cide-ele-input>\r\n\r\n <cide-ele-input label=\"State\" formControlName=\"syen_registered_state_sypin\"\r\n placeholder=\"Enter state name\">\r\n </cide-ele-input>\r\n\r\n <cide-ele-select label=\"Country\" [options]=\"registeredCountries()\"\r\n formControlName=\"syen_registered_country_syctr\" placeholder=\"Select country\" [searchable]=\"true\"\r\n (searchChange)=\"onRegisteredCountrySearch($event)\" [loading]=\"registeredCountriesLoading()\" size=\"sm\">\r\n </cide-ele-select>\r\n </div>\r\n\r\n <!-- Contact Person, Phone, Email & Fax - Four Columns -->\r\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-[1fr_200px_1fr_150px] tw-gap-6\">\r\n <cide-ele-select label=\"Contact Person\" [options]=\"users()\"\r\n formControlName=\"syen_registered_contact_person_user\" placeholder=\"Select contact person\"\r\n [searchable]=\"true\" [loading]=\"usersLoading()\" (searchChange)=\"onUserSearch($event)\">\r\n </cide-ele-select>\r\n\r\n <cide-ele-input label=\"Phone\" formControlName=\"syen_registered_phone\" type=\"tel\"\r\n placeholder=\"Enter phone number\" size=\"sm\">\r\n </cide-ele-input>\r\n\r\n <cide-ele-input label=\"Email\" formControlName=\"syen_registered_email\" type=\"email\"\r\n placeholder=\"Enter email address\">\r\n </cide-ele-input>\r\n\r\n <cide-ele-input label=\"Fax\" formControlName=\"syen_registered_fax\" placeholder=\"Enter fax number\"\r\n size=\"sm\">\r\n </cide-ele-input>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n\r\n @case ('user-mapping') {\r\n <div class=\"tw-p-2\">\r\n <div class=\"tw-space-y-4\">\r\n <!-- Add User Mapping Form -->\r\n <div class=\"tw-bg-white tw-p-4 tw-rounded-lg tw-border tw-shadow-sm\">\r\n <div class=\"tw-flex tw-items-center tw-gap-2 tw-mb-3\">\r\n <cide-ele-icon class=\"tw-text-blue-600 tw-text-sm\">person_add</cide-ele-icon>\r\n <h3 class=\"tw-text-sm tw-font-semibold tw-text-gray-800\">Add User to Entity</h3>\r\n </div>\r\n\r\n <form [formGroup]=\"userMappingForm\" (ngSubmit)=\"addUserMapping()\">\r\n <div class=\"tw-flex tw-items-end tw-gap-3\">\r\n <div class=\"tw-flex-1\">\r\n <cide-ele-select label=\"Select User\" [options]=\"availableUsers()\" formControlName=\"syenm_id_user\"\r\n placeholder=\"Choose user to add to entity\" [searchable]=\"true\"\r\n [loading]=\"availableUsersLoading()\" size=\"md\">\r\n </cide-ele-select>\r\n </div>\r\n\r\n <!-- Add Button -->\r\n <div class=\"tw-flex tw-items-end\">\r\n <button cideEleButton type=\"submit\" variant=\"primary\" size=\"sm\"\r\n [disabled]=\"userMappingForm.invalid || availableUsersLoading()\"\r\n class=\"tw-shadow-sm tw-h-8 tw-px-3\">\r\n <cide-ele-icon class=\"tw-mr-1 tw-text-xs\">add</cide-ele-icon>\r\n <span class=\"tw-text-xs\">Add</span>\r\n </button>\r\n </div>\r\n </div>\r\n </form>\r\n </div>\r\n\r\n <!-- User Mappings Grid -->\r\n <div class=\"tw-bg-white tw-rounded-md tw-border tw-overflow-hidden tw-shadow-sm\">\r\n @if (userEntityMappingsLoading()) {\r\n <div class=\"tw-p-4 tw-text-center\">\r\n <div class=\"tw-inline-flex tw-items-center tw-gap-2 tw-text-gray-500\">\r\n <div class=\"tw-animate-spin tw-rounded-full tw-h-3 tw-w-3 tw-border-b-2 tw-border-gray-500\"></div>\r\n <span class=\"tw-text-xs\">Loading...</span>\r\n </div>\r\n </div>\r\n } @else if (userEntityMappings().length === 0) {\r\n <div class=\"tw-p-4 tw-text-center tw-text-gray-500\">\r\n <cide-ele-icon class=\"tw-text-2xl tw-mb-1 tw-text-gray-300\">people_outline</cide-ele-icon>\r\n <p class=\"tw-text-sm tw-font-medium tw-mb-1\">No users mapped yet</p>\r\n <p class=\"tw-text-xs tw-text-gray-400\">Add users above to grant them access to this entity</p>\r\n </div>\r\n } @else {\r\n <cide-ele-data-grid [config]=\"userMappingsGridConfig\"\r\n [templateRenderers]=\"getUserMappingsTemplateRenderers()\">\r\n\r\n <!-- Custom user cell template -->\r\n <ng-template #userCell let-row=\"row\">\r\n <div class=\"tw-flex tw-items-center tw-gap-2\">\r\n <div\r\n class=\"tw-w-6 tw-h-6 tw-bg-gradient-to-br tw-from-blue-100 tw-to-indigo-100 tw-rounded-full tw-flex tw-items-center tw-justify-center tw-shadow-sm\">\r\n <cide-ele-icon class=\"tw-text-blue-600 tw-text-xs\">person</cide-ele-icon>\r\n </div>\r\n <div class=\"tw-flex tw-flex-col\">\r\n <span class=\"tw-font-medium tw-text-gray-900 tw-text-xs\">\r\n {{ row?._displayUserName }}\r\n </span>\r\n </div>\r\n </div>\r\n </ng-template>\r\n\r\n <!-- Custom actions cell template -->\r\n <ng-template #actionsCell let-row=\"row\">\r\n <div class=\"tw-flex tw-items-center tw-gap-1 tw-justify-center\">\r\n <button (click)=\"updateUserMapping(row._id!, { syenm_isactive: !row.syenm_isactive })\"\r\n class=\"tw-w-8 tw-h-8 tw-flex tw-items-center tw-justify-center tw-rounded-md tw-transition-colors tw-border tw-border-transparent hover:tw-border-gray-300\"\r\n [class.tw-bg-green-100]=\"row.syenm_isactive\" [class.tw-text-green-700]=\"row.syenm_isactive\"\r\n [class.tw-bg-gray-100]=\"!row.syenm_isactive\" [class.tw-text-gray-600]=\"!row.syenm_isactive\"\r\n [title]=\"row.syenm_isactive ? 'Deactivate' : 'Activate'\">\r\n <cide-ele-icon class=\"tw-text-sm\">\r\n {{ row.syenm_isactive ? 'pause' : 'play_arrow' }}\r\n </cide-ele-icon>\r\n </button>\r\n\r\n <button (click)=\"removeUserMapping(row._id!)\"\r\n class=\"tw-w-8 tw-h-8 tw-flex tw-items-center tw-justify-center tw-rounded-md tw-bg-red-100 tw-text-red-600 hover:tw-bg-red-200 tw-transition-colors tw-border tw-border-transparent hover:tw-border-red-300\"\r\n title=\"Remove User\">\r\n <cide-ele-icon class=\"tw-text-sm\">delete</cide-ele-icon>\r\n </button>\r\n </div>\r\n </ng-template>\r\n </cide-ele-data-grid>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n\r\n\r\n @case ('board-mapping') {\r\n <div class=\"tw-p-2\">\r\n <div class=\"tw-space-y-4\">\r\n <!-- Add Board Mapping Form -->\r\n <div class=\"tw-bg-white tw-p-4 tw-rounded-lg tw-border tw-shadow-sm\">\r\n <div class=\"tw-flex tw-items-center tw-gap-2 tw-mb-3\">\r\n <cide-ele-icon class=\"tw-text-blue-600 tw-text-sm\">school</cide-ele-icon>\r\n <h3 class=\"tw-text-sm tw-font-semibold tw-text-gray-800\">Map Education Board</h3>\r\n </div>\r\n\r\n <form [formGroup]=\"boardMappingForm\" (ngSubmit)=\"addBoardAffiliation()\">\r\n <div class=\"tw-flex tw-flex-wrap tw-gap-3 tw-items-end\">\r\n\r\n <!-- Board Selection -->\r\n <div class=\"tw-flex-1 tw-min-w-[250px]\">\r\n <cide-ele-select label=\"Select Board\" [options]=\"educationBoards()\"\r\n formControlName=\"scbaf_board_id_edbrd\" placeholder=\"Choose education board\" [searchable]=\"true\"\r\n [loading]=\"educationBoardsLoading()\" size=\"sm\">\r\n </cide-ele-select>\r\n </div>\r\n\r\n <!-- Affiliation Number -->\r\n <div class=\"tw-w-44\">\r\n <cide-ele-input label=\"Affiliation No.\" formControlName=\"scbaf_affiliation_number\"\r\n placeholder=\"Enter number\" size=\"sm\">\r\n </cide-ele-input>\r\n </div>\r\n\r\n <!-- Status Dropdown -->\r\n <div class=\"tw-w-40\">\r\n <cide-ele-select label=\"Status\" [options]=\"boardAffiliationStatuses()\"\r\n formControlName=\"scbaf_affiliation_status_sygms\" placeholder=\"Select status\"\r\n [loading]=\"boardAffiliationStatusesLoading()\" size=\"sm\">\r\n </cide-ele-select>\r\n </div>\r\n\r\n <!-- Affiliation Level Multi-Select -->\r\n <div class=\"tw-w-64\">\r\n <cide-ele-select label=\"Affiliation Level\" [options]=\"boardAffiliationLevels()\"\r\n formControlName=\"scbaf_affiliation_level_multi_sygms\" placeholder=\"Select levels\"\r\n [loading]=\"boardAffiliationLevelsLoading()\" [multiple]=\"true\" size=\"sm\">\r\n </cide-ele-select>\r\n </div>\r\n\r\n <!-- Checkboxes -->\r\n <div class=\"tw-flex tw-items-center tw-gap-4 tw-pb-2\">\r\n <cide-ele-input type=\"checkbox\" formControlName=\"scbaf_isprimary\" size=\"sm\" label=\"Primary\">\r\n </cide-ele-input>\r\n\r\n <cide-ele-input type=\"checkbox\" formControlName=\"scbaf_isactive\" size=\"sm\" label=\"Active\">\r\n </cide-ele-input>\r\n </div>\r\n\r\n <!-- Add Button -->\r\n <div class=\"tw-flex tw-items-end\">\r\n <button cideEleButton type=\"submit\" variant=\"primary\" size=\"sm\"\r\n [disabled]=\"boardMappingForm.invalid || educationBoardsLoading()\"\r\n class=\"tw-shadow-sm tw-h-8 tw-px-3\">\r\n <cide-ele-icon class=\"tw-mr-1 tw-text-xs\">add</cide-ele-icon>\r\n <span class=\"tw-text-xs\">Add</span>\r\n </button>\r\n </div>\r\n </div>\r\n </form>\r\n </div>\r\n\r\n <!-- Board Affiliations Grid -->\r\n <div class=\"tw-bg-white tw-rounded-md tw-border tw-overflow-hidden tw-shadow-sm\">\r\n @if (boardAffiliationsLoading()) {\r\n <div class=\"tw-p-4 tw-text-center\">\r\n <div class=\"tw-inline-flex tw-items-center tw-gap-2 tw-text-gray-500\">\r\n <div class=\"tw-animate-spin tw-rounded-full tw-h-3 tw-w-3 tw-border-b-2 tw-border-gray-500\"></div>\r\n <span class=\"tw-text-xs\">Loading...</span>\r\n </div>\r\n </div>\r\n } @else if (boardAffiliations().length === 0) {\r\n <div class=\"tw-p-4 tw-text-center tw-text-gray-500\">\r\n <cide-ele-icon class=\"tw-text-2xl tw-mb-1 tw-text-gray-300\">school</cide-ele-icon>\r\n <p class=\"tw-text-sm tw-font-medium tw-mb-1\">No boards mapped yet</p>\r\n <p class=\"tw-text-xs tw-text-gray-400\">Map education boards above to link them to this entity</p>\r\n </div>\r\n } @else {\r\n <cide-ele-data-grid [config]=\"boardAffiliationsGridConfig\"\r\n [templateRenderers]=\"getBoardMappingsTemplateRenderers()\">\r\n\r\n <!-- Custom actions cell template -->\r\n <ng-template #boardActionsCell let-row=\"row\">\r\n <div class=\"tw-flex tw-items-center tw-gap-1 tw-justify-center\">\r\n <!-- Edit/Delete implementation pending -->\r\n <button\r\n class=\"tw-w-8 tw-h-8 tw-flex tw-items-center tw-justify-center tw-rounded-md tw-transition-colors tw-border tw-border-transparent hover:tw-border-gray-300 tw-text-gray-400 cursor-not-allowed\"\r\n title=\"Actions not implemented\">\r\n <cide-ele-icon class=\"tw-text-sm\">more_horiz</cide-ele-icon>\r\n </button>\r\n </div>\r\n </ng-template>\r\n </cide-ele-data-grid>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n\r\n }\r\n\r\n <!-- Form Actions -->\r\n <div class=\"tw-p-4\">\r\n <div class=\"tw-flex tw-items-center tw-justify-between tw-gap-3\">\r\n <!-- Error Message (Left Side) -->\r\n <cide-form-field-error [formGroup]=\"entityForm\"></cide-form-field-error>\r\n\r\n <!-- Action Buttons (Right Side) -->\r\n <div class=\"tw-flex tw-gap-3\">\r\n <button cideEleButton type=\"button\" variant=\"outline\" size=\"md\" (click)=\"onBack()\"\r\n [disabled]=\"loading()\">\r\n <cide-ele-icon>arrow_back</cide-ele-icon>\r\n Back\r\n </button>\r\n\r\n <button cideEleButton type=\"button\" variant=\"secondary\" size=\"md\" (click)=\"onReset()\"\r\n [disabled]=\"loading()\">\r\n <cide-ele-icon>refresh</cide-ele-icon>\r\n Reset Form\r\n </button>\r\n\r\n <button cideEleButton type=\"submit\" variant=\"primary\" size=\"md\"\r\n [disabled]=\"loading() || entityForm.invalid\" [loading]=\"loading()\">\r\n <cide-ele-icon>{{ isEditMode() ? 'save' : 'add' }}</cide-ele-icon>\r\n {{ isEditMode() ? 'Update Entity' : 'Create Entity' }}\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </form>\r\n </div>\r\n </div>\r\n</cide-lyt-shared-wrapper>" }]
|
|
11545
|
+
], template: "<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'core_entity_form' }\"\r\n [breadcrumb_data]=\"breadcrumbData()\">\r\n <!-- Modern Entity Create Form -->\r\n <div class=\"tw-min-h-screen\">\r\n <div class=\"tw-mx-auto\">\r\n\r\n <form [formGroup]=\"entityForm\" [class.tw-opacity-60]=\"loading()\" [class.tw-pointer-events-none]=\"loading()\"\r\n (ngSubmit)=\"onSubmit()\">\r\n\r\n <!-- Breadcrumb is now rendered by shared wrapper; inline breadcrumb removed -->\r\n\r\n <!-- Basic Information Section -->\r\n <div class=\"tw-p-2 tw-pb-0\">\r\n <div class=\"tw-space-y-6\">\r\n <!-- Top Section: Image on Right, Form Fields on Left -->\r\n <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-[1fr_200px] tw-gap-4\">\r\n <!-- Left Side: Form Fields -->\r\n <div class=\"tw-space-y-6\">\r\n <!-- Institution Name, Entity Type & Active Status -->\r\n <div\r\n class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-[1fr_250px_120px] tw-gap-4 tw-items-end\">\r\n <cide-ele-input id=\"syen_name\" type=\"text\" label=\"Institution Name\" formControlName=\"syen_name\"\r\n placeholder=\"Enter institution name\" size=\"sm\">\r\n </cide-ele-input>\r\n\r\n <cide-ele-select label=\"Entity Type\" labelPlacement=\"floating\" [options]=\"entityTypes()\"\r\n formControlName=\"syen_entity_type_sygms\" placeholder=\"Select institution type\" size=\"sm\">\r\n </cide-ele-select>\r\n\r\n <div class=\"tw-flex tw-items-center tw-justify-center tw-gap-1 tw-h-full\">\r\n <cide-ele-input type=\"checkbox\" formControlName=\"syen_isactive\" size=\"sm\" label=\"Is Active\">\r\n </cide-ele-input>\r\n </div>\r\n </div>\r\n\r\n <!-- UDISE, Affiliation & Institution Code -->\r\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-3 tw-gap-4\">\r\n <cide-ele-input label=\"UDISE Number\" formControlName=\"syen_udise_no\" placeholder=\"Enter UDISE number\"\r\n size=\"sm\">\r\n </cide-ele-input>\r\n\r\n <cide-ele-input label=\"Affiliation Number\" formControlName=\"syen_affiliation_no\"\r\n placeholder=\"Enter affiliation number\" size=\"sm\">\r\n </cide-ele-input>\r\n\r\n <cide-ele-input label=\"Institution Code\" formControlName=\"syen_entity_code\"\r\n placeholder=\"Enter unique code\" size=\"sm\">\r\n </cide-ele-input>\r\n </div>\r\n </div>\r\n\r\n <!-- Right Side: Entity Image Upload -->\r\n <div class=\"tw-flex tw-items-start tw-justify-center tw-pt-0\">\r\n <cide-ele-file-input id=\"entity_image_upload\" formControlName=\"syen_photo_id_cyfm\" accept=\"image/*\"\r\n [showPreview]=\"true\" [previewBoxMode]=\"true\" [showFileName]=\"false\" previewWidth=\"180px\"\r\n previewHeight=\"120px\" [required]=\"true\" placeholderText=\"Upload Logo\" placeholderIcon=\"cloud_upload\"\r\n [autoUpload]=\"true\" [uploadData]=\"getUploadData()\" (uploadSuccess)=\"onImageUploadSuccess($event)\"\r\n (uploadError)=\"onImageUploadError($event)\" (uploadProgressChange)=\"onImageUploadProgress($event)\">\r\n </cide-ele-file-input>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Tab Navigation -->\r\n <div class=\"tw-px-4 !tw-mt-0\">\r\n <cide-ele-tab [tabs]=\"entityTabs()\" [activeTabId]=\"activeTab()\" size=\"sm\" variant=\"default\"\r\n (tabChange)=\"onTabChange($event)\">\r\n </cide-ele-tab>\r\n </div>\r\n\r\n <!-- Tab Content -->\r\n <div class=\"tw-transition-all tw-duration-300 tw-ease-in-out !tw-mt-2\" [class.tw-opacity-60]=\"loading()\"\r\n [class.tw-pointer-events-none]=\"loading()\">\r\n @switch (activeTab()) {\r\n\r\n @case ('corporate') {\r\n <div class=\"tw-p-4\">\r\n <div class=\"tw-space-y-6\">\r\n <!-- Corporate Address - Full Width -->\r\n <div class=\"tw-w-full\">\r\n <cide-ele-textarea label=\"Corporate Address\" formControlName=\"syen_corporate_address\"\r\n placeholder=\"Enter complete corporate address\" [rows]=\"4\">\r\n </cide-ele-textarea>\r\n </div>\r\n\r\n <!-- Postal Code, City, State & Country - Four Columns -->\r\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-[220px_0.8fr_0.7fr_240px] tw-gap-6\">\r\n <cide-ele-select label=\"Postal Code\" [options]=\"postalCodes()\"\r\n formControlName=\"syen_corporate_pin_sypin\" placeholder=\"Select postal code\" [searchable]=\"true\"\r\n [loading]=\"postalCodesLoading()\" (searchChange)=\"onPostalCodeSearch($event)\" size=\"sm\">\r\n </cide-ele-select>\r\n\r\n <cide-ele-input label=\"City\" formControlName=\"syen_corporate_city_sypin\" placeholder=\"Enter city name\">\r\n </cide-ele-input>\r\n\r\n <cide-ele-input label=\"State\" formControlName=\"syen_corporate_state_sypin\"\r\n placeholder=\"Enter state name\">\r\n </cide-ele-input>\r\n\r\n <cide-ele-select label=\"Country\" [options]=\"corporateCountries()\"\r\n formControlName=\"syen_corporate_country_syctr\" placeholder=\"Select country\" [searchable]=\"true\"\r\n (searchChange)=\"onCorporateCountrySearch($event)\" [loading]=\"corporateCountriesLoading()\" size=\"sm\">\r\n </cide-ele-select>\r\n </div>\r\n\r\n <!-- Contact Person, Phone, Email & Fax - Four Columns -->\r\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-[1fr_200px_1fr_150px] tw-gap-6\">\r\n <cide-ele-select label=\"Contact Person\" [options]=\"users()\"\r\n formControlName=\"syen_corporate_contact_person_user\" placeholder=\"Select contact person\"\r\n [searchable]=\"true\" [loading]=\"usersLoading()\" (searchChange)=\"onUserSearch($event)\">\r\n </cide-ele-select>\r\n\r\n <cide-ele-input label=\"Phone\" formControlName=\"syen_corporate_phone\" type=\"tel\"\r\n placeholder=\"Enter phone number\" size=\"sm\">\r\n </cide-ele-input>\r\n\r\n <cide-ele-input label=\"Email\" formControlName=\"syen_corporate_email\" type=\"email\"\r\n placeholder=\"Enter email address\">\r\n </cide-ele-input>\r\n\r\n <cide-ele-input label=\"Fax\" formControlName=\"syen_corporate_fax\" placeholder=\"Enter fax number\"\r\n size=\"sm\">\r\n </cide-ele-input>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n\r\n @case ('contact') {\r\n <div class=\"tw-p-4\">\r\n <div class=\"tw-space-y-6\">\r\n <!-- Currency Selection -->\r\n <div class=\"tw-w-full\">\r\n <cide-ele-select label=\"Currency\" [options]=\"currencies()\" formControlName=\"syen_currency_sycr\"\r\n placeholder=\"Select currency\">\r\n </cide-ele-select>\r\n </div>\r\n\r\n <!-- Alternate Phone & Website - Two Columns -->\r\n <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-2 tw-gap-6\">\r\n <cide-ele-input label=\"Alternate Phone\" formControlName=\"syen_corporate_phone_alt\" type=\"tel\"\r\n placeholder=\"Enter alternate phone number\">\r\n </cide-ele-input>\r\n\r\n <cide-ele-input label=\"Website URL\" formControlName=\"syen_website\" type=\"url\"\r\n placeholder=\"https://example.com\" autocomplete=\"url\" leadingIcon=\"language\"\r\n helperText=\"Enter a valid website URL starting with http:// or https://\">\r\n </cide-ele-input>\r\n </div>\r\n\r\n <!-- Alternate Email - Full Width -->\r\n <div class=\"tw-w-full\">\r\n <cide-ele-input label=\"Alternate Email\" formControlName=\"syen_corporate_email_alt\" type=\"email\"\r\n placeholder=\"Enter alternate email address\">\r\n </cide-ele-input>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n\r\n @case ('registered') {\r\n <div class=\"tw-p-4\">\r\n <div class=\"tw-space-y-6\">\r\n <!-- Registered Address - Full Width -->\r\n <div class=\"tw-w-full\">\r\n <cide-ele-textarea label=\"Registered Address\" formControlName=\"syen_registered_address\"\r\n placeholder=\"Enter complete registered address\" [rows]=\"4\">\r\n </cide-ele-textarea>\r\n </div>\r\n\r\n <!-- Postal Code, City, State & Country - Four Columns -->\r\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-[220px_0.8fr_0.7fr_240px] tw-gap-6\">\r\n <cide-ele-select label=\"Postal Code\" [options]=\"postalCodes()\"\r\n formControlName=\"syen_registered_pin_sypin\" placeholder=\"Select postal code\" [searchable]=\"true\"\r\n [loading]=\"postalCodesLoading()\" (searchChange)=\"onPostalCodeSearch($event)\" size=\"sm\">\r\n </cide-ele-select>\r\n\r\n <cide-ele-input label=\"City\" formControlName=\"syen_registered_city_sypin\" placeholder=\"Enter city name\">\r\n </cide-ele-input>\r\n\r\n <cide-ele-input label=\"State\" formControlName=\"syen_registered_state_sypin\"\r\n placeholder=\"Enter state name\">\r\n </cide-ele-input>\r\n\r\n <cide-ele-select label=\"Country\" [options]=\"registeredCountries()\"\r\n formControlName=\"syen_registered_country_syctr\" placeholder=\"Select country\" [searchable]=\"true\"\r\n (searchChange)=\"onRegisteredCountrySearch($event)\" [loading]=\"registeredCountriesLoading()\" size=\"sm\">\r\n </cide-ele-select>\r\n </div>\r\n\r\n <!-- Contact Person, Phone, Email & Fax - Four Columns -->\r\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-[1fr_200px_1fr_150px] tw-gap-6\">\r\n <cide-ele-select label=\"Contact Person\" [options]=\"users()\"\r\n formControlName=\"syen_registered_contact_person_user\" placeholder=\"Select contact person\"\r\n [searchable]=\"true\" [loading]=\"usersLoading()\" (searchChange)=\"onUserSearch($event)\">\r\n </cide-ele-select>\r\n\r\n <cide-ele-input label=\"Phone\" formControlName=\"syen_registered_phone\" type=\"tel\"\r\n placeholder=\"Enter phone number\" size=\"sm\">\r\n </cide-ele-input>\r\n\r\n <cide-ele-input label=\"Email\" formControlName=\"syen_registered_email\" type=\"email\"\r\n placeholder=\"Enter email address\">\r\n </cide-ele-input>\r\n\r\n <cide-ele-input label=\"Fax\" formControlName=\"syen_registered_fax\" placeholder=\"Enter fax number\"\r\n size=\"sm\">\r\n </cide-ele-input>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n\r\n @case ('user-mapping') {\r\n <div class=\"tw-p-2\">\r\n <div class=\"tw-space-y-4\">\r\n <!-- Add User Mapping Form -->\r\n <div class=\"tw-bg-white tw-p-4 tw-rounded-lg tw-border tw-shadow-sm\">\r\n <div class=\"tw-flex tw-items-center tw-gap-2 tw-mb-3\">\r\n <cide-ele-icon class=\"tw-text-blue-600 tw-text-sm\">person_add</cide-ele-icon>\r\n <h3 class=\"tw-text-sm tw-font-semibold tw-text-gray-800\">Add User to Entity</h3>\r\n </div>\r\n\r\n <form [formGroup]=\"userMappingForm\" (ngSubmit)=\"addUserMapping()\">\r\n <div class=\"tw-flex tw-items-end tw-gap-3\">\r\n <div class=\"tw-flex-1\">\r\n <cide-ele-select label=\"Select User\" [options]=\"availableUsers()\" formControlName=\"syenm_id_user\"\r\n placeholder=\"Choose user to add to entity\" [searchable]=\"true\"\r\n [loading]=\"availableUsersLoading()\" size=\"md\">\r\n </cide-ele-select>\r\n </div>\r\n\r\n <!-- Add Button -->\r\n <div class=\"tw-flex tw-items-end\">\r\n <button cideEleButton type=\"submit\" variant=\"primary\" size=\"xs\"\r\n [disabled]=\"userMappingForm.invalid || availableUsersLoading()\"\r\n class=\"tw-shadow-sm tw-h-8 tw-px-3\">\r\n <cide-ele-icon class=\"tw-mr-1 tw-text-xs\">add</cide-ele-icon>\r\n <span class=\"tw-text-xs\">Add</span>\r\n </button>\r\n </div>\r\n </div>\r\n </form>\r\n </div>\r\n\r\n <!-- User Mappings Grid -->\r\n <div class=\"tw-bg-white tw-rounded-md tw-border tw-overflow-hidden tw-shadow-sm\">\r\n @if (userEntityMappingsLoading()) {\r\n <div class=\"tw-p-4 tw-text-center\">\r\n <div class=\"tw-inline-flex tw-items-center tw-gap-2 tw-text-gray-500\">\r\n <div class=\"tw-animate-spin tw-rounded-full tw-h-3 tw-w-3 tw-border-b-2 tw-border-gray-500\"></div>\r\n <span class=\"tw-text-xs\">Loading...</span>\r\n </div>\r\n </div>\r\n } @else if (userEntityMappings().length === 0) {\r\n <div class=\"tw-p-4 tw-text-center tw-text-gray-500\">\r\n <cide-ele-icon class=\"tw-text-2xl tw-mb-1 tw-text-gray-300\">people_outline</cide-ele-icon>\r\n <p class=\"tw-text-sm tw-font-medium tw-mb-1\">No users mapped yet</p>\r\n <p class=\"tw-text-xs tw-text-gray-400\">Add users above to grant them access to this entity</p>\r\n </div>\r\n } @else {\r\n <cide-ele-data-grid [config]=\"userMappingsGridConfig\"\r\n [templateRenderers]=\"getUserMappingsTemplateRenderers()\">\r\n\r\n <!-- Custom user cell template -->\r\n <ng-template #userCell let-row=\"row\">\r\n <div class=\"tw-flex tw-items-center tw-gap-2\">\r\n <div\r\n class=\"tw-w-6 tw-h-6 tw-bg-gradient-to-br tw-from-blue-100 tw-to-indigo-100 tw-rounded-full tw-flex tw-items-center tw-justify-center tw-shadow-sm\">\r\n <cide-ele-icon class=\"tw-text-blue-600 tw-text-xs\">person</cide-ele-icon>\r\n </div>\r\n <div class=\"tw-flex tw-flex-col\">\r\n <span class=\"tw-font-medium tw-text-gray-900 tw-text-xs\">\r\n {{ row?._displayUserName }}\r\n </span>\r\n </div>\r\n </div>\r\n </ng-template>\r\n\r\n <!-- Custom actions cell template -->\r\n <ng-template #actionsCell let-row=\"row\">\r\n <div class=\"tw-flex tw-items-center tw-gap-1 tw-justify-center\">\r\n <button (click)=\"updateUserMapping(row._id!, { syenm_isactive: !row.syenm_isactive })\"\r\n class=\"tw-w-8 tw-h-8 tw-flex tw-items-center tw-justify-center tw-rounded-md tw-transition-colors tw-border tw-border-transparent hover:tw-border-gray-300\"\r\n [class.tw-bg-green-100]=\"row.syenm_isactive\" [class.tw-text-green-700]=\"row.syenm_isactive\"\r\n [class.tw-bg-gray-100]=\"!row.syenm_isactive\" [class.tw-text-gray-600]=\"!row.syenm_isactive\"\r\n [title]=\"row.syenm_isactive ? 'Deactivate' : 'Activate'\">\r\n <cide-ele-icon class=\"tw-text-sm\">\r\n {{ row.syenm_isactive ? 'pause' : 'play_arrow' }}\r\n </cide-ele-icon>\r\n </button>\r\n\r\n <button (click)=\"removeUserMapping(row._id!)\"\r\n class=\"tw-w-8 tw-h-8 tw-flex tw-items-center tw-justify-center tw-rounded-md tw-bg-red-100 tw-text-red-600 hover:tw-bg-red-200 tw-transition-colors tw-border tw-border-transparent hover:tw-border-red-300\"\r\n title=\"Remove User\">\r\n <cide-ele-icon class=\"tw-text-sm\">delete</cide-ele-icon>\r\n </button>\r\n </div>\r\n </ng-template>\r\n </cide-ele-data-grid>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n\r\n\r\n @case ('board-mapping') {\r\n <div class=\"tw-p-2\">\r\n <div class=\"tw-space-y-4\">\r\n <!-- Add Board Mapping Form -->\r\n <div class=\"tw-bg-white tw-p-4 tw-rounded-lg tw-border tw-shadow-sm\">\r\n <div class=\"tw-flex tw-items-center tw-gap-2 tw-mb-3\">\r\n <cide-ele-icon class=\"tw-text-blue-600 tw-text-sm\">school</cide-ele-icon>\r\n <h3 class=\"tw-text-sm tw-font-semibold tw-text-gray-800\">Map Education Board</h3>\r\n </div>\r\n\r\n <form [formGroup]=\"boardMappingForm\" (ngSubmit)=\"addBoardAffiliation()\">\r\n <div class=\"tw-flex tw-flex-wrap tw-gap-3 tw-items-end\">\r\n\r\n <!-- Board Selection -->\r\n <div class=\"tw-flex-1 tw-min-w-[250px]\">\r\n <cide-ele-select label=\"Select Board\" [options]=\"educationBoards()\"\r\n formControlName=\"scbaf_board_id_edbrd\" placeholder=\"Choose education board\" [searchable]=\"true\"\r\n [loading]=\"educationBoardsLoading()\" size=\"sm\">\r\n </cide-ele-select>\r\n </div>\r\n\r\n <!-- Affiliation Number -->\r\n <div class=\"tw-w-44\">\r\n <cide-ele-input label=\"Affiliation No.\" formControlName=\"scbaf_affiliation_number\"\r\n placeholder=\"Enter number\" size=\"sm\">\r\n </cide-ele-input>\r\n </div>\r\n\r\n <!-- Status Dropdown -->\r\n <div class=\"tw-w-40\">\r\n <cide-ele-select label=\"Status\" [options]=\"boardAffiliationStatuses()\"\r\n formControlName=\"scbaf_affiliation_status_sygms\" placeholder=\"Select status\"\r\n [loading]=\"boardAffiliationStatusesLoading()\" size=\"sm\">\r\n </cide-ele-select>\r\n </div>\r\n\r\n <!-- Affiliation Level Multi-Select -->\r\n <div class=\"tw-w-64\">\r\n <cide-ele-select label=\"Affiliation Level\" [options]=\"boardAffiliationLevels()\"\r\n formControlName=\"scbaf_affiliation_level_multi_sygms\" placeholder=\"Select levels\"\r\n [loading]=\"boardAffiliationLevelsLoading()\" [multiple]=\"true\" size=\"sm\">\r\n </cide-ele-select>\r\n </div>\r\n\r\n <!-- Checkboxes -->\r\n <div class=\"tw-flex tw-items-center tw-gap-4 tw-pb-2\">\r\n <cide-ele-input type=\"checkbox\" formControlName=\"scbaf_isprimary\" size=\"sm\" label=\"Primary\">\r\n </cide-ele-input>\r\n\r\n <cide-ele-input type=\"checkbox\" formControlName=\"scbaf_isactive\" size=\"sm\" label=\"Active\">\r\n </cide-ele-input>\r\n </div>\r\n\r\n <!-- Add Button -->\r\n <div class=\"tw-flex tw-items-end\">\r\n <button cideEleButton type=\"submit\" variant=\"primary\" size=\"xs\"\r\n [disabled]=\"boardMappingForm.invalid || educationBoardsLoading()\"\r\n class=\"tw-shadow-sm tw-h-8 tw-px-3\">\r\n <cide-ele-icon class=\"tw-mr-1 tw-text-xs\">add</cide-ele-icon>\r\n <span class=\"tw-text-xs\">Add</span>\r\n </button>\r\n </div>\r\n </div>\r\n </form>\r\n </div>\r\n\r\n <!-- Board Affiliations Grid -->\r\n <div class=\"tw-bg-white tw-rounded-md tw-border tw-overflow-hidden tw-shadow-sm\">\r\n @if (boardAffiliationsLoading()) {\r\n <div class=\"tw-p-4 tw-text-center\">\r\n <div class=\"tw-inline-flex tw-items-center tw-gap-2 tw-text-gray-500\">\r\n <div class=\"tw-animate-spin tw-rounded-full tw-h-3 tw-w-3 tw-border-b-2 tw-border-gray-500\"></div>\r\n <span class=\"tw-text-xs\">Loading...</span>\r\n </div>\r\n </div>\r\n } @else if (boardAffiliations().length === 0) {\r\n <div class=\"tw-p-4 tw-text-center tw-text-gray-500\">\r\n <cide-ele-icon class=\"tw-text-2xl tw-mb-1 tw-text-gray-300\">school</cide-ele-icon>\r\n <p class=\"tw-text-sm tw-font-medium tw-mb-1\">No boards mapped yet</p>\r\n <p class=\"tw-text-xs tw-text-gray-400\">Map education boards above to link them to this entity</p>\r\n </div>\r\n } @else {\r\n <cide-ele-data-grid [config]=\"boardAffiliationsGridConfig\"\r\n [templateRenderers]=\"getBoardMappingsTemplateRenderers()\">\r\n\r\n <!-- Custom actions cell template -->\r\n <ng-template #boardActionsCell let-row=\"row\">\r\n <div class=\"tw-flex tw-items-center tw-gap-1 tw-justify-center\">\r\n <!-- Edit/Delete implementation pending -->\r\n <button\r\n class=\"tw-w-8 tw-h-8 tw-flex tw-items-center tw-justify-center tw-rounded-md tw-transition-colors tw-border tw-border-transparent hover:tw-border-gray-300 tw-text-gray-400 cursor-not-allowed\"\r\n title=\"Actions not implemented\">\r\n <cide-ele-icon class=\"tw-text-sm\">more_horiz</cide-ele-icon>\r\n </button>\r\n </div>\r\n </ng-template>\r\n </cide-ele-data-grid>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n\r\n }\r\n\r\n <!-- Form Actions -->\r\n <div class=\"tw-p-4\">\r\n <div class=\"tw-flex tw-items-center tw-justify-between tw-gap-3\">\r\n <!-- Error Message (Left Side) -->\r\n <cide-form-field-error [formGroup]=\"entityForm\"></cide-form-field-error>\r\n\r\n <!-- Action Buttons (Right Side) -->\r\n <div class=\"tw-flex tw-gap-3\">\r\n <button cideEleButton type=\"button\" variant=\"outline\" size=\"xs\" (click)=\"onBack()\"\r\n [disabled]=\"loading()\">\r\n <cide-ele-icon>arrow_back</cide-ele-icon>\r\n Back\r\n </button>\r\n\r\n <button cideEleButton type=\"button\" variant=\"secondary\" size=\"xs\" (click)=\"onReset()\"\r\n [disabled]=\"loading()\">\r\n <cide-ele-icon>refresh</cide-ele-icon>\r\n Reset Form\r\n </button>\r\n\r\n <button cideEleButton type=\"submit\" variant=\"primary\" size=\"xs\"\r\n [disabled]=\"loading() || entityForm.invalid\" [loading]=\"loading()\">\r\n <cide-ele-icon>{{ isEditMode() ? 'save' : 'add' }}</cide-ele-icon>\r\n {{ isEditMode() ? 'Update Entity' : 'Create Entity' }}\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </form>\r\n </div>\r\n </div>\r\n</cide-lyt-shared-wrapper>" }]
|
|
11560
11546
|
}], ctorParameters: () => [], propDecorators: { userCellRendererTemplate: [{ type: i0.ViewChild, args: ['userCell', { isSignal: true }] }], actionsCellRendererTemplate: [{ type: i0.ViewChild, args: ['actionsCell', { isSignal: true }] }], boardActionsCellRendererTemplate: [{ type: i0.ViewChild, args: ['boardActionsCell', { isSignal: true }] }] } });
|
|
11561
11547
|
|
|
11562
11548
|
var entityCreate_component = /*#__PURE__*/Object.freeze({
|
|
@@ -12214,7 +12200,7 @@ class CideCoreEntityListComponent {
|
|
|
12214
12200
|
this.router.navigate(['/control-panel/org-structure']);
|
|
12215
12201
|
}
|
|
12216
12202
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideCoreEntityListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
12217
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: CideCoreEntityListComponent, isStandalone: true, selector: "cide-core-entity-list", viewQueries: [{ propertyName: "gridComponent", first: true, predicate: CideEleDataGridComponent, descendants: true, isSignal: true }, { propertyName: "entityDetailsRenderer", first: true, predicate: ["entityDetailsRenderer"], descendants: true, isSignal: true }, { propertyName: "entityTypeRenderer", first: true, predicate: ["entityTypeRenderer"], descendants: true, isSignal: true }, { propertyName: "actionsDropdownRenderer", first: true, predicate: ["actionsDropdownRenderer"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Entity List with Shared Wrapper -->\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'core_entity_list' }\">\n <!-- Breadcrumb Actions: Org Structure Button -->\n <div breadcrumb-actions class=\"tw-flex tw-justify-end tw-items-center tw-gap-2\">\n <button cideEleButton variant=\"secondary\" size=\"xs\" (click)=\"onOrgStructure()\" [adaptive]=\"true\"\n class=\"tw-whitespace-nowrap tw-flex tw-items-center tw-gap-2\">\n <cide-ele-icon size=\"xs\" class=\"tw-w-6 tw-h-5\">account_tree</cide-ele-icon>\n Org Structure\n </button>\n\n <!-- Add Entity Button -->\n @if (canCreate()) {\n <button cideEleButton variant=\"primary\" size=\"xs\" (click)=\"router.navigate(['control-panel', 'entity-create'])\"\n [adaptive]=\"true\" class=\"tw-whitespace-nowrap tw-flex tw-items-center tw-gap-2\">\n <cide-ele-icon size=\"xs\" class=\"tw-w-6 tw-h-5\">add</cide-ele-icon>\n Add Entity\n </button>\n }\n\n </div>\n\n <div class=\"entity-list-container tw-bg-white tw-shadow-lg tw-rounded-lg tw-overflow-hidden\">\n\n <!-- Data Grid Component -->\n <cide-ele-data-grid [config]=\"gridConfig()\" [templateRenderers]=\"templateRenderers()\"\n [actionHandlers]=\"actionHandlers\" (gridEvent)=\"onGridEvent($event)\">\n </cide-ele-data-grid>\n\n </div>\n\n <!-- Custom Renderer Templates -->\n\n <!-- Entity Details Renderer Template -->\n <!-- Context: { $implicit: unknown, row: entityResponseData, value: unknown, column: GridColumn } -->\n <ng-template #entityDetailsRenderer let-value=\"value\" let-entity=\"row\">\n <div class=\"tw-flex tw-items-center tw-space-x-3\">\n <div\n class=\"tw-flex-shrink-0 tw-w-10 tw-h-10 tw-bg-blue-100 tw-rounded-full tw-flex tw-items-center tw-justify-center\">\n <span class=\"tw-text-blue-600 tw-font-semibold tw-text-sm\">\n {{ (entity.syen_entity_code || 'NA').substring(0, 2).toUpperCase() }}\n </span>\n </div>\n <div class=\"tw-flex-1 tw-min-w-0\">\n <p class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-truncate\"\n [title]=\"entity.syen_name || 'Unknown Entity'\">\n {{ entity.syen_name || 'Unknown Entity' }}\n </p>\n <p class=\"tw-text-sm tw-text-gray-500 tw-truncate\" [title]=\"entity.syen_entity_code || 'N/A'\">\n Code: {{ entity.syen_entity_code || 'N/A' }}\n </p>\n </div>\n </div>\n </ng-template>\n\n\n <!-- Entity Type Renderer Template -->\n <!-- Context: { $implicit: unknown, row: entityResponseData, value: unknown, column: GridColumn } -->\n <ng-template #entityTypeRenderer let-value=\"value\" let-entity=\"row\">\n <div class=\"tw-flex tw-flex-col tw-items-center tw-space-y-1\">\n <span class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-truncate\" [title]=\"getEntityTypeName(entity)\">\n {{ getEntityTypeName(entity) }}\n </span>\n </div>\n </ng-template>\n\n <!-- Actions Dropdown Renderer Template -->\n <!-- Context: { $implicit: unknown, row: entityResponseData, value: unknown, column: GridColumn } -->\n <ng-template #actionsDropdownRenderer let-value=\"value\" let-entity=\"row\">\n <cide-ele-dropdown [items]=\"getDropdownItems(entity)\" [config]=\"getDropdownConfig()\"\n (itemClick)=\"onDropdownItemClick($event, entity)\">\n </cide-ele-dropdown>\n </ng-template>\n</cide-lyt-shared-wrapper>", styles: ["", ":host{height:100%;display:flex;flex-direction:column}.entity-list-container{height:100%;display:flex;flex-direction:column;overflow:hidden}.tw-overflow-auto{flex:1;min-height:0}cide-ele-data-grid{flex:1;min-height:0;display:flex;flex-direction:column}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated", "adaptive"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideEleDataGridComponent, selector: "cide-ele-data-grid", inputs: ["config", "templateRenderers", "customFormatters", "actionHandlers", "serverSidePagination", "totalServerItems", "currentServerPage", "currentServerPageSize", "dragDropEnabled"], outputs: ["gridEvent"] }, { kind: "component", type: CideEleDropdownComponent, selector: "cide-ele-dropdown", inputs: ["items", "config", "triggerTemplate", "menuTemplate"], outputs: ["itemClick", "dropdownToggle"] }, { kind: "component", type: CideLytSharedWrapperComponent, selector: "cide-lyt-shared-wrapper", inputs: ["shared_wrapper_setup_param", "breadcrumb_data"] }] });
|
|
12203
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: CideCoreEntityListComponent, isStandalone: true, selector: "cide-core-entity-list", viewQueries: [{ propertyName: "gridComponent", first: true, predicate: CideEleDataGridComponent, descendants: true, isSignal: true }, { propertyName: "entityDetailsRenderer", first: true, predicate: ["entityDetailsRenderer"], descendants: true, isSignal: true }, { propertyName: "entityTypeRenderer", first: true, predicate: ["entityTypeRenderer"], descendants: true, isSignal: true }, { propertyName: "actionsDropdownRenderer", first: true, predicate: ["actionsDropdownRenderer"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Entity List with Shared Wrapper -->\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'core_entity_list' }\">\n <!-- Breadcrumb Actions: Org Structure Button -->\n <div breadcrumb-actions class=\"tw-flex tw-justify-end tw-items-center tw-gap-2\">\n <button cideEleButton variant=\"secondary\" size=\"xs\" (click)=\"onOrgStructure()\" [adaptive]=\"true\"\n class=\"tw-whitespace-nowrap tw-flex tw-items-center tw-gap-2\">\n <cide-ele-icon size=\"xs\" class=\"tw-w-6 tw-h-5\">account_tree</cide-ele-icon>\n Org Structure\n </button>\n\n <!-- Add Entity Button -->\n @if (canCreate()) {\n <button cideEleButton variant=\"primary\" size=\"xs\" (click)=\"router.navigate(['control-panel', 'entity-create'])\"\n [adaptive]=\"true\" class=\"tw-whitespace-nowrap tw-flex tw-items-center tw-gap-2\">\n <cide-ele-icon size=\"xs\" class=\"tw-w-6 tw-h-5\">add</cide-ele-icon>\n Add Entity\n </button>\n }\n\n </div>\n\n <div class=\"entity-list-container tw-bg-white tw-shadow-lg tw-rounded-lg tw-overflow-hidden\">\n\n <!-- Data Grid Component -->\n <cide-ele-data-grid [config]=\"gridConfig()\" [templateRenderers]=\"templateRenderers()\"\n [actionHandlers]=\"actionHandlers\" (gridEvent)=\"onGridEvent($event)\">\n </cide-ele-data-grid>\n\n </div>\n\n <!-- Custom Renderer Templates -->\n\n <!-- Entity Details Renderer Template -->\n <!-- Context: { $implicit: unknown, row: entityResponseData, value: unknown, column: GridColumn } -->\n <ng-template #entityDetailsRenderer let-value=\"value\" let-entity=\"row\">\n <div class=\"tw-flex tw-items-center tw-space-x-3\">\n <div\n class=\"tw-flex-shrink-0 tw-w-10 tw-h-10 tw-bg-blue-100 tw-rounded-full tw-flex tw-items-center tw-justify-center\">\n <span class=\"tw-text-blue-600 tw-font-semibold tw-text-sm\">\n {{ (entity.syen_entity_code || 'NA').substring(0, 2).toUpperCase() }}\n </span>\n </div>\n <div class=\"tw-flex-1 tw-min-w-0\">\n <p class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-truncate\"\n [title]=\"entity.syen_name || 'Unknown Entity'\">\n {{ entity.syen_name || 'Unknown Entity' }}\n </p>\n <p class=\"tw-text-sm tw-text-gray-500 tw-truncate\" [title]=\"entity.syen_entity_code || 'N/A'\">\n Code: {{ entity.syen_entity_code || 'N/A' }}\n </p>\n </div>\n </div>\n </ng-template>\n\n\n <!-- Entity Type Renderer Template -->\n <!-- Context: { $implicit: unknown, row: entityResponseData, value: unknown, column: GridColumn } -->\n <ng-template #entityTypeRenderer let-value=\"value\" let-entity=\"row\">\n <div class=\"tw-flex tw-flex-col tw-items-center tw-space-y-1\">\n <span class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-truncate\" [title]=\"getEntityTypeName(entity)\">\n {{ getEntityTypeName(entity) }}\n </span>\n </div>\n </ng-template>\n\n <!-- Actions Dropdown Renderer Template -->\n <!-- Context: { $implicit: unknown, row: entityResponseData, value: unknown, column: GridColumn } -->\n <ng-template #actionsDropdownRenderer let-value=\"value\" let-entity=\"row\">\n <cide-ele-dropdown [items]=\"getDropdownItems(entity)\" [config]=\"getDropdownConfig()\"\n (itemClick)=\"onDropdownItemClick($event, entity)\">\n </cide-ele-dropdown>\n </ng-template>\n</cide-lyt-shared-wrapper>", styles: ["", ":host{height:100%;display:flex;flex-direction:column}.entity-list-container{height:100%;display:flex;flex-direction:column;overflow:hidden}.tw-overflow-auto{flex:1;min-height:0}cide-ele-data-grid{flex:1;min-height:0;display:flex;flex-direction:column}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip", "name"] }, { 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", "adaptive"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideEleDataGridComponent, selector: "cide-ele-data-grid", inputs: ["config", "templateRenderers", "customFormatters", "actionHandlers", "serverSidePagination", "totalServerItems", "currentServerPage", "currentServerPageSize", "dragDropEnabled"], outputs: ["gridEvent"] }, { kind: "component", type: CideEleDropdownComponent, selector: "cide-ele-dropdown", inputs: ["items", "config", "triggerTemplate", "menuTemplate"], outputs: ["itemClick", "dropdownToggle"] }, { kind: "component", type: CideLytSharedWrapperComponent, selector: "cide-lyt-shared-wrapper", inputs: ["shared_wrapper_setup_param", "breadcrumb_data"] }] });
|
|
12218
12204
|
}
|
|
12219
12205
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideCoreEntityListComponent, decorators: [{
|
|
12220
12206
|
type: Component,
|
|
@@ -12299,7 +12285,7 @@ class CideCoreOrgStructureComponent {
|
|
|
12299
12285
|
(entityView)="onEntityView($event)">
|
|
12300
12286
|
</cide-shared-org-structure>
|
|
12301
12287
|
</cide-lyt-shared-wrapper>
|
|
12302
|
-
`, isInline: true, styles: [":host{height:100%;display:flex;flex-direction:column}.tw-overflow-y-auto::-webkit-scrollbar{width:6px}.tw-overflow-y-auto::-webkit-scrollbar-track{background:#f1f5f9;border-radius:3px}.tw-overflow-y-auto::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:3px}.tw-overflow-y-auto::-webkit-scrollbar-thumb:hover{background:#94a3b8}.tw-transition-shadow{transition:box-shadow .2s ease-in-out}.tw-shadow-lg:hover{box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;transform:translateY(-2px);transition:all .2s ease-in-out}.tw-bg-purple-300,.tw-bg-purple-400{transition:all .3s ease-in-out}.connection-line-compact{display:block;overflow:visible}.connection-line-compact path,.connection-line-compact line{stroke-linecap:round;stroke-linejoin:round;transition:stroke-width .2s ease}.connection-line-compact:hover path,.connection-line-compact:hover line{stroke-width:3}.connection-line-compact circle{transition:all .2s ease}.connection-line-compact circle:hover{filter:drop-shadow(0 2px 4px rgba(147,51,234,.4))}.level-0{border-color:#fb923c!important}.level-1{border-color:#60a5fa!important}.level-2{border-color:#a78bfa!important}.level-3{border-color:#4ade80!important}.level-4{border-color:#818cf8!important}.level-5{border-color:#f472b6!important}@media (max-width: 1200px){.tw-max-w-7xl{max-width:100%}.tw-gap-6{gap:1rem}.tw-min-w-64{min-width:14rem}.tw-max-w-72{max-width:16rem}}@media (max-width: 768px){.tw-min-w-64{min-width:12rem}.tw-max-w-72{max-width:14rem}.tw-max-w-7xl{max-width:100%}.tw-gap-6{gap:.75rem}.tw-p-4{padding:.75rem}.tw-mb-4{margin-bottom:.75rem}.tw-space-x-3{gap:.5rem}.tw-space-x-2{gap:.375rem}.tw-w-12{width:2.5rem}.tw-h-12{height:2.5rem}}@media (max-width: 480px){.tw-min-w-72{min-width:12rem}.tw-max-w-80{max-width:14rem}.tw-p-4{padding:.5rem}.tw-space-x-3{gap:.375rem}.tw-space-x-2{gap:.25rem}.tw-mb-3{margin-bottom:.5rem}.tw-w-12{width:2rem}.tw-h-12{height:2rem}.tw-w-8{width:1.5rem}.tw-h-8{height:1.5rem}}@media print{.tw-bg-gray-50{background:#fff!important}.tw-shadow-lg{box-shadow:none!important;border:1px solid #e5e7eb!important}.tw-bg-purple-300{background:#6b7280!important}.tw-border-purple-300{border-color:#6b7280!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: CideSharedOrgStructureComponent, selector: "cide-shared-org-structure", inputs: ["allowSwitching", "showActions", "mode"], outputs: ["entityClick", "entitySelect", "entityView"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: 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", "adaptive"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideLytSharedWrapperComponent, selector: "cide-lyt-shared-wrapper", inputs: ["shared_wrapper_setup_param", "breadcrumb_data"] }] });
|
|
12288
|
+
`, isInline: true, styles: [":host{height:100%;display:flex;flex-direction:column}.tw-overflow-y-auto::-webkit-scrollbar{width:6px}.tw-overflow-y-auto::-webkit-scrollbar-track{background:#f1f5f9;border-radius:3px}.tw-overflow-y-auto::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:3px}.tw-overflow-y-auto::-webkit-scrollbar-thumb:hover{background:#94a3b8}.tw-transition-shadow{transition:box-shadow .2s ease-in-out}.tw-shadow-lg:hover{box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;transform:translateY(-2px);transition:all .2s ease-in-out}.tw-bg-purple-300,.tw-bg-purple-400{transition:all .3s ease-in-out}.connection-line-compact{display:block;overflow:visible}.connection-line-compact path,.connection-line-compact line{stroke-linecap:round;stroke-linejoin:round;transition:stroke-width .2s ease}.connection-line-compact:hover path,.connection-line-compact:hover line{stroke-width:3}.connection-line-compact circle{transition:all .2s ease}.connection-line-compact circle:hover{filter:drop-shadow(0 2px 4px rgba(147,51,234,.4))}.level-0{border-color:#fb923c!important}.level-1{border-color:#60a5fa!important}.level-2{border-color:#a78bfa!important}.level-3{border-color:#4ade80!important}.level-4{border-color:#818cf8!important}.level-5{border-color:#f472b6!important}@media (max-width: 1200px){.tw-max-w-7xl{max-width:100%}.tw-gap-6{gap:1rem}.tw-min-w-64{min-width:14rem}.tw-max-w-72{max-width:16rem}}@media (max-width: 768px){.tw-min-w-64{min-width:12rem}.tw-max-w-72{max-width:14rem}.tw-max-w-7xl{max-width:100%}.tw-gap-6{gap:.75rem}.tw-p-4{padding:.75rem}.tw-mb-4{margin-bottom:.75rem}.tw-space-x-3{gap:.5rem}.tw-space-x-2{gap:.375rem}.tw-w-12{width:2.5rem}.tw-h-12{height:2.5rem}}@media (max-width: 480px){.tw-min-w-72{min-width:12rem}.tw-max-w-80{max-width:14rem}.tw-p-4{padding:.5rem}.tw-space-x-3{gap:.375rem}.tw-space-x-2{gap:.25rem}.tw-mb-3{margin-bottom:.5rem}.tw-w-12{width:2rem}.tw-h-12{height:2rem}.tw-w-8{width:1.5rem}.tw-h-8{height:1.5rem}}@media print{.tw-bg-gray-50{background:#fff!important}.tw-shadow-lg{box-shadow:none!important;border:1px solid #e5e7eb!important}.tw-bg-purple-300{background:#6b7280!important}.tw-border-purple-300{border-color:#6b7280!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: CideSharedOrgStructureComponent, selector: "cide-shared-org-structure", inputs: ["allowSwitching", "showActions", "mode"], outputs: ["entityClick", "entitySelect", "entityView"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip", "name"] }, { 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", "adaptive"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideLytSharedWrapperComponent, selector: "cide-lyt-shared-wrapper", inputs: ["shared_wrapper_setup_param", "breadcrumb_data"] }] });
|
|
12303
12289
|
}
|
|
12304
12290
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideCoreOrgStructureComponent, decorators: [{
|
|
12305
12291
|
type: Component,
|
|
@@ -12405,7 +12391,7 @@ class EntitySelectionDrawerComponent {
|
|
|
12405
12391
|
</button>
|
|
12406
12392
|
</div>
|
|
12407
12393
|
</div>
|
|
12408
|
-
`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated", "adaptive"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }] });
|
|
12394
|
+
`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated", "adaptive"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip", "name"] }] });
|
|
12409
12395
|
}
|
|
12410
12396
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: EntitySelectionDrawerComponent, decorators: [{
|
|
12411
12397
|
type: Component,
|
|
@@ -12536,7 +12522,7 @@ class CopyRoleFromEntityDrawerComponent {
|
|
|
12536
12522
|
</button>
|
|
12537
12523
|
</div>
|
|
12538
12524
|
</div>
|
|
12539
|
-
`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated", "adaptive"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }] });
|
|
12525
|
+
`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated", "adaptive"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip", "name"] }] });
|
|
12540
12526
|
}
|
|
12541
12527
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CopyRoleFromEntityDrawerComponent, decorators: [{
|
|
12542
12528
|
type: Component,
|
|
@@ -17606,7 +17592,7 @@ class CideCoreUserCreateComponent {
|
|
|
17606
17592
|
}
|
|
17607
17593
|
}
|
|
17608
17594
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideCoreUserCreateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
17609
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: CideCoreUserCreateComponent, isStandalone: true, selector: "cide-core-user-create", viewQueries: [{ propertyName: "menuDetailsRendererTemplate", first: true, predicate: ["menuDetailsRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "permissionsCheckboxRendererTemplate", first: true, predicate: ["permissionsCheckboxRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "menuTypeRendererTemplate", first: true, predicate: ["menuTypeRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "menuRightsPermissionsRendererTemplate", first: true, predicate: ["menuRightsPermissionsRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "permissionsRendererTemplate", first: true, predicate: ["permissionsRendererTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- \n ENTERPRISE USER MASTER FORM\n \n Enterprise-Level Styling with Tailwind CSS\n Features: Responsive grids, proper typography, enhanced user experience\n-->\n\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: pageCode() }\" [breadcrumb_data]=\"breadcrumbData()\">\n <div class=\"tw-w-full tw-h-full tw-p-1 tw-pt-2\">\n <!-- Toast Notifications -->\n <cide-ele-toast-notification></cide-ele-toast-notification>\n \n <form class=\"tw-max-w-7xl tw-mx-auto tw-bg-transparent\" [formGroup]=\"userMasterForm\" [class.tw-opacity-60]=\"loading()\"\n (ngSubmit)=\"onSubmit()\">\n\n\n <!-- User Context Header -->\n <div\n class=\"tw-bg-gradient-to-r tw-from-blue-50 tw-to-indigo-50 tw-border tw-border-blue-200 tw-rounded-md tw-p-1 tw-mb-2 tw-shadow-sm\">\n <div class=\"tw-flex tw-items-center tw-justify-between tw-flex-wrap tw-gap-2\">\n <!-- User Basic Info Display -->\n <div class=\"tw-flex tw-items-center tw-gap-3 tw-flex-wrap\">\n <!-- Profile Photo Preview -->\n <div class=\"tw-flex tw-items-center tw-gap-2\">\n <div\n class=\"tw-w-8 tw-h-8 tw-rounded-full tw-bg-blue-100 tw-border tw-border-blue-200 tw-flex tw-items-center tw-justify-center tw-overflow-hidden\">\n @if (userMasterForm.get('user_photo_id_cyfm')?.value) {\n <img cideEleFileImage [fileId]=\"userMasterForm.get('user_photo_id_cyfm')?.value\"\n [altText]=\"'Profile Photo'\" class=\"tw-w-full tw-h-full tw-object-cover\">\n } @else {\n <cide-ele-icon name=\"person\" class=\"tw-w-5 tw-h-5 tw-text-blue-600\">\n </cide-ele-icon>\n }\n </div>\n <div class=\"tw-flex tw-flex-col\">\n <span class=\"tw-text-xs tw-font-medium tw-text-blue-900\">\n {{ getUserFullName() || 'New User' }}\n </span>\n <span class=\"tw-text-xs tw-text-blue-600\">\n {{ getUserUsername() || 'Username not set' }}\n </span>\n </div>\n </div>\n\n <!-- Contact Info -->\n <div class=\"tw-flex tw-items-center tw-gap-3\">\n <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-xs tw-text-gray-700\">\n <cide-ele-icon variant=\"gray\" size=\"xs\">email</cide-ele-icon>\n <span>{{ getUserEmail() || 'Email not set' }}</span>\n </div>\n <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-xs tw-text-gray-700\">\n <cide-ele-icon variant=\"gray\" size=\"xs\">phone</cide-ele-icon>\n <span>{{ getUserMobile() || 'Mobile not set' }}</span>\n </div>\n </div>\n\n <!-- Active Status -->\n <div class=\"tw-flex tw-items-center tw-gap-1\">\n @if (getUserActiveStatus()) {\n <span\n class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded tw-text-xs tw-font-medium tw-bg-green-100 tw-text-green-700\">\n <cide-ele-icon variant=\"green\" size=\"xs\" class=\"tw-mr-1\">check_circle</cide-ele-icon>\n Active\n </span>\n } @else {\n <span\n class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded tw-text-xs tw-font-medium tw-bg-red-100 tw-text-red-700\">\n <cide-ele-icon variant=\"red\" size=\"xs\" class=\"tw-mr-1\">cancel</cide-ele-icon>\n Inactive\n </span>\n }\n </div>\n </div>\n\n <!-- Entity Info -->\n <div class=\"tw-flex tw-items-center tw-gap-2\">\n @if (hasDefaultEntity()) {\n <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-xs tw-text-blue-700\">\n <cide-ele-icon variant=\"blue\" size=\"xs\">business</cide-ele-icon>\n <span class=\"tw-font-medium\">{{ getDefaultEntityName() }}</span>\n </div>\n } @else {\n <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-xs tw-text-gray-500\">\n <cide-ele-icon variant=\"gray\" size=\"xs\">business</cide-ele-icon>\n <span class=\"tw-italic\">No entity</span>\n </div>\n }\n\n <span class=\"tw-text-xs tw-text-gray-600 tw-px-2 tw-py-1 tw-bg-gray-100 tw-rounded\">\n {{ getEntityMappingCount() }} mapping(s)\n </span>\n </div>\n </div>\n </div>\n\n <!-- Tab Navigation -->\n <div class=\"tw-p-0 tw-mb-2 tw-border-b tw-border-gray-200\">\n <cide-ele-tab [tabs]=\"userTabs()\" [activeTabId]=\"activeTab()\" size=\"md\" variant=\"default\"\n (tabChange)=\"onTabChange($event)\">\n </cide-ele-tab>\n </div>\n\n <!-- Tab Content -->\n <div class=\"tw-transition-opacity tw-duration-300\" [class.tw-opacity-60]=\"loading()\">\n @switch (activeTab()) {\n\n @case ('basic') {\n <!-- User Basic Information Section -->\n <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\n\n <!-- Top Section: Form Fields on Left, Profile Photo on Right -->\n <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-[1fr_200px] tw-gap-4 tw-mb-4\">\n <!-- Left Side: Form Fields -->\n <div class=\"tw-space-y-4\">\n <!-- Name Fields - All in One Row -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-4\">\n <cide-ele-input id=\"user_firstname\" label=\"First Name\" formControlName=\"user_firstname\"\n placeholder=\"Enter first name\" [maxlength]=\"20\" size=\"md\" (ngModelChange)=\"onNameFieldChange()\">\n </cide-ele-input>\n\n <cide-ele-input id=\"user_middlename\" label=\"Middle Name\" formControlName=\"user_middlename\"\n placeholder=\"Enter middle name\" [maxlength]=\"20\" size=\"md\" (ngModelChange)=\"onNameFieldChange()\">\n </cide-ele-input>\n\n <cide-ele-input id=\"user_lastname\" label=\"Last Name\" formControlName=\"user_lastname\"\n placeholder=\"Enter last name\" [maxlength]=\"20\" size=\"md\" (ngModelChange)=\"onNameFieldChange()\">\n </cide-ele-input>\n\n <cide-ele-input id=\"user_fullname\" label=\"Full Name (Auto-generated)\" formControlName=\"user_fullname\"\n placeholder=\"Auto-generated from name fields or enter manually\" [maxlength]=\"62\" size=\"md\">\n </cide-ele-input>\n </div>\n\n <!-- Contact Information - All in One Row -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-3 tw-gap-4\">\n <cide-ele-input id=\"user_username\" label=\"Username\" formControlName=\"user_username\"\n placeholder=\"Enter unique username\" [maxlength]=\"20\" size=\"md\">\n </cide-ele-input>\n\n <cide-ele-input id=\"user_emailid\" label=\"Email ID\" formControlName=\"user_emailid\" type=\"email\"\n placeholder=\"Enter valid email address\" [maxlength]=\"320\" size=\"md\">\n </cide-ele-input>\n\n <cide-ele-input id=\"user_mobileno\" label=\"Mobile Number\" formControlName=\"user_mobileno\" type=\"tel\"\n placeholder=\"Enter mobile number\" [maxlength]=\"15\" size=\"md\">\n </cide-ele-input>\n </div>\n\n <!-- User Type Mapping -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\n <cide-ele-select\n id=\"syutm_user_type\"\n label=\"User Type\"\n placeholder=\"Select user type\"\n [options]=\"userTypeOptions\"\n valueKey=\"value\"\n labelKey=\"label\"\n formControlName=\"syutm_user_type\"\n size=\"md\">\n </cide-ele-select>\n\n @if (showTypeSpecificId()) {\n <cide-ele-input\n id=\"syutm_type_specific_id\"\n label=\"Type-Specific ID\"\n placeholder=\"Auto-generated (e.g., STU001, TCH001)\"\n formControlName=\"syutm_type_specific_id\"\n [maxlength]=\"50\"\n size=\"md\"\n [disabled]=\"true\">\n </cide-ele-input>\n }\n </div>\n </div>\n\n <!-- Right Side: Profile Photo Upload -->\n <div class=\"tw-flex tw-items-start tw-justify-center tw-p-0\">\n <cide-ele-file-input id=\"user_photo_id_cyfm\" formControlName=\"user_photo_id_cyfm\" accept=\"image/*\"\n [showPreview]=\"true\" [previewBoxMode]=\"true\" [showFileName]=\"false\" previewWidth=\"180px\"\n previewHeight=\"120px\" placeholderText=\"Upload Photo\" placeholderIcon=\"cloud_upload\" [autoUpload]=\"true\"\n [uploadData]=\"getProfilePhotoUploadData()\" (uploadSuccess)=\"onProfilePhotoUploadSuccess($event)\"\n (uploadError)=\"onProfilePhotoUploadError($event)\"\n (uploadProgressChange)=\"onProfilePhotoUploadProgress($event)\">\n </cide-ele-file-input>\n </div>\n </div>\n\n\n\n <!-- Status Control -->\n <div class=\"tw-grid tw-grid-cols-1 tw-mb-2\">\n <div class=\"tw-p-2 tw-bg-blue-50 tw-border tw-border-blue-100 tw-rounded-lg\">\n <label\n class=\"tw-flex tw-flex-col tw-cursor-pointer tw-py-2 tw-bg-transparent tw-border-none tw-rounded-none tw-transition-all tw-duration-200 hover:tw-bg-blue-75\">\n <cide-ele-input type=\"checkbox\" label=\"Active User Status\" formControlName=\"user_isactive\"\n class=\"tw-h-5 tw-accent-blue-500 tw-rounded tw-mb-1\" />\n <span class=\"tw-font-semibold tw-text-gray-700 tw-text-base\"></span>\n <span class=\"tw-text-sm tw-text-gray-600 tw-mt-1 tw-leading-relaxed\">Enable this user account for system\n access and operations</span>\n </label>\n </div>\n </div>\n </div>\n }\n\n @case ('auth') {\n <!-- Authentication Section -->\n <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\n <!-- Password Fields -->\n @if (shouldShowPasswordFields()) {\n <div class=\"tw-mb-4\">\n <!-- Password Fields Header for Edit Mode -->\n @if (isEditMode()) {\n <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\n <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-800\">Update Password</h6>\n <button type=\"button\"\n class=\"tw-px-3 tw-py-1 tw-bg-gray-100 tw-text-gray-600 tw-border tw-border-gray-300 tw-rounded-md tw-text-xs tw-font-medium hover:tw-bg-gray-200 tw-transition-colors\"\n (click)=\"cancelPasswordUpdate()\">\n Cancel Password Update\n </button>\n </div>\n }\n\n <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-2 md:tw-grid-cols-1 tw-gap-6\">\n <cide-ele-input id=\"user_password\" [label]=\"getPasswordFieldLabel()\" formControlName=\"user_password\"\n type=\"password\" placeholder=\"Enter secure password (min 8 characters)\" size=\"md\">\n </cide-ele-input>\n\n <cide-ele-input id=\"user_confirm_password\" [label]=\"getPasswordConfirmLabel()\"\n formControlName=\"user_confirm_password\" type=\"password\" placeholder=\"Confirm your password\" size=\"md\">\n </cide-ele-input>\n </div>\n </div>\n }\n\n <!-- Password Update Option for Edit Mode -->\n @if (isEditMode() && !shouldShowPasswordFields()) {\n <div class=\"tw-mb-4\">\n <div class=\"tw-p-2 tw-bg-blue-50 tw-border tw-border-blue-200 tw-rounded-lg\">\n <h6 class=\"tw-text-sm tw-font-semibold tw-text-blue-800 tw-mb-2\">Password Update</h6>\n <p class=\"tw-text-sm tw-text-blue-600 tw-mb-3\">Current password will be kept. Click below to change\n password.</p>\n\n @if (hasPasswordInput()) {\n <div\n class=\"tw-mb-3 tw-p-2 tw-bg-yellow-50 tw-border tw-border-yellow-200 tw-rounded tw-text-sm tw-text-yellow-700\">\n <cide-ele-icon variant=\"yellow\" size=\"xs\" class=\"tw-mr-1\">warning</cide-ele-icon>\n Password fields contain text. Click \"Change Password\" to manage existing input.\n </div>\n }\n\n <button type=\"button\"\n class=\"tw-px-4 tw-py-2 tw-bg-blue-100 tw-text-blue-700 tw-border tw-border-blue-300 tw-rounded-md tw-text-sm tw-font-medium hover:tw-bg-blue-200 tw-transition-colors\"\n (click)=\"triggerPasswordUpdate()\">\n @if (hasPasswordInput()) {\n Manage Password Fields\n } @else {\n Change Password\n }\n </button>\n </div>\n </div>\n }\n\n <!-- Password Options -->\n <div class=\"tw-grid tw-grid-cols-1 tw-gap-4 tw-mb-4\">\n <div class=\"tw-p-2 tw-bg-yellow-50 tw-border tw-border-yellow-100 tw-rounded-lg\">\n <label\n class=\"tw-flex tw-flex-col tw-gap-2 tw-cursor-pointer tw-py-2 tw-bg-transparent tw-border-none tw-rounded-none tw-transition-all tw-duration-200\">\n <cide-ele-input type=\"checkbox\" label=\"Force Password Change on Login\"\n formControlName=\"user_passwordchangeonlogin\" class=\"tw-h-5 tw-accent-yellow-500 tw-rounded tw-mb-1\" />\n <span class=\"tw-text-sm tw-text-gray-600 tw-mt-1 tw-leading-relaxed\">User will be required to change\n password on next login</span>\n </label>\n </div>\n </div>\n\n </div>\n }\n\n @case ('roles') {\n <!-- Entity, Roles & Permissions Mapping Section -->\n <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\n\n\n\n <!-- Important Note -->\n <div class=\"tw-bg-amber-50 tw-border tw-border-amber-200 tw-rounded-lg tw-p-2 tw-mb-4\">\n <div class=\"tw-flex tw-items-start tw-gap-3\">\n <cide-ele-icon variant=\"amber\" size=\"lg\">info</cide-ele-icon>\n <div class=\"tw-flex-1\">\n <h4 class=\"tw-text-sm tw-font-semibold tw-text-amber-800 tw-mb-1\">Entity-Role Based Access</h4>\n <p class=\"tw-text-sm tw-text-amber-700 tw-mb-2\">User access is completely managed through entity-role\n mappings below. At least one entity mapping is required for user access.</p>\n @if (hasDefaultEntity()) {\n <div class=\"tw-flex tw-items-center tw-gap-2 tw-mt-2 tw-p-2 tw-bg-amber-100 tw-rounded\">\n <cide-ele-icon variant=\"amber\" size=\"sm\">star</cide-ele-icon>\n <span class=\"tw-text-sm tw-text-amber-800\">\n <strong>Default Entity:</strong> {{ getDefaultEntityName() }}\n </span>\n </div>\n } @else {\n <div class=\"tw-text-sm tw-text-amber-600 tw-mt-2 tw-italic\">\n \u26A0\uFE0F No default entity selected. Please set one entity as default.\n </div>\n }\n </div>\n </div>\n </div>\n\n <!-- Entity-Role Mapping Section -->\n <div class=\"tw-flex tw-text-center tw-justify-between tw-items-center tw-mb-4\">\n <div>\n <h4 class=\"tw-text-sm tw-text-left tw-font-semibold tw-text-blue-900 tw-mb-1\">Entity-Role Mapping</h4>\n <p class=\"tw-text-sm tw-text-blue-700\">Map user to entities with specific roles and permissions</p>\n </div>\n <div class=\"tw-flex tw-flex-col tw-items-end\">\n <button cideEleButton variant=\"primary\" size=\"md\" type=\"button\" (click)=\"addEntityMapping()\"\n leftIcon=\"add\" [disabled]=\"isViewingOwnProfile() || isAllEntitiesMapped()\"\n [title]=\"isViewingOwnProfile() ? 'You cannot modify your own entity mappings' : (isAllEntitiesMapped() ? 'All entities are mapped' : 'Add Entity Mapping')\">\n Add Entity Mapping\n </button>\n\n @if (isViewingOwnProfile()) {\n <div class=\"tw-mt-2 tw-p-2 tw-bg-amber-50 tw-border tw-border-amber-200 tw-rounded-md tw-max-w-xs\">\n <p class=\"tw-text-xs tw-text-amber-700\">\n <cide-ele-icon variant=\"warning\" size=\"xs\" class=\"tw-mr-1\">lock</cide-ele-icon>\n You cannot modify your own entity mappings.\n </p>\n </div>\n } @else if (isAllEntitiesMapped()) {\n <div class=\"tw-mt-2 tw-p-2 tw-bg-blue-50 tw-border tw-border-blue-200 tw-rounded-md tw-max-w-xs\">\n <p class=\"tw-text-xs tw-text-blue-700\">\n <cide-ele-icon variant=\"info\" size=\"xs\" class=\"tw-mr-1\">info</cide-ele-icon>\n All available entities are already mapped.\n </p>\n </div>\n }\n </div>\n </div>\n\n <div formArrayName=\"core_entity_mapping\">\n @for (mapping of entityMappings(); track mapping.syenm_entity_id_syen?._id || mapping.syenm_entity_id_syen || $index; let i = $index) {\n <cide-ele-card\n [title]=\"getEntityNameFromMapping(i) || 'Entity Mapping ' + (i + 1)\"\n [subtitle]=\"mapping.syenm_isdefault ? 'Primary Entity' : ''\"\n [cardConfig]=\"{\n collapsible: true,\n minimizable: false,\n maximizable: false,\n removable: !mapping?._id && !isViewingOwnProfile(),\n defaultState: 'collapsed',\n showHeader: true,\n showFooter: false,\n variant: 'default',\n size: 'sm',\n shadow: true,\n rounded: true,\n bordered: true\n }\"\n (stateChange)=\"onEntityMappingCardStateChange($event, i)\"\n (removed)=\"removeEntityMapping(i)\"\n class=\"tw-mb-2 entity-mapping-card tw-block\">\n \n <div [formGroupName]=\"i\">\n \n <!-- Card Content -->\n <div class=\"tw-space-y-3\">\n <!-- Hidden form control to maintain form structure for entity -->\n <input type=\"hidden\" [formControlName]=\"'syenm_entity_id_syen'\" />\n \n <!-- Role, Default, Active, and User Type in One Row -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-4 tw-gap-3\">\n <!-- Role Selection with Copy Button -->\n <div class=\"tw-flex tw-flex-col\">\n <cide-ele-select label=\"Role for this Entity\" [options]=\"getRoleOptionsForEntity(i)\"\n formControlName=\"syenm_role_id_syusrol\" valueKey=\"_id\" labelKey=\"syusrol_role_name\"\n placeholder=\"Select role for this entity\" size=\"md\" (change)=\"onRoleChange(i, $event)\">\n </cide-ele-select>\n @if (!isViewingOwnProfile() && entityMappings().length > 1) {\n <button \n type=\"button\"\n (click)=\"showCopyRoleFromEntityDrawer(i)\"\n class=\"tw-mt-1 tw-text-xs tw-text-blue-600 hover:tw-text-blue-800 tw-flex tw-items-center tw-gap-1 tw-w-fit tw-transition-colors\"\n title=\"Copy role and settings from another entity mapping\">\n <cide-ele-icon variant=\"blue\" size=\"xs\">content_copy</cide-ele-icon>\n <span>Copy from Entity</span>\n </button>\n }\n </div>\n \n <!-- Primary Entity Checkbox -->\n <div class=\"tw-flex tw-flex-col tw-justify-end\">\n <div class=\"tw-flex tw-items-center tw-gap-2 tw-px-3 tw-py-2 tw-rounded-md tw-border tw-border-green-300 tw-bg-green-50 dark:tw-bg-green-900/30 dark:tw-border-green-700\" (click)=\"$event.stopPropagation()\">\n <input \n type=\"checkbox\" \n [checked]=\"mapping.syenm_isdefault\"\n (change)=\"onDefaultEntityChange(i, $event)\" \n class=\"tw-h-4 tw-w-4 tw-accent-green-600 tw-cursor-pointer\" />\n <label class=\"tw-inline-flex tw-items-center tw-gap-1 tw-text-xs tw-font-semibold tw-text-green-700 dark:tw-text-green-300 tw-cursor-pointer\">\n <cide-ele-icon variant=\"green\" size=\"xs\" class=\"!tw-text-green-600 dark:!tw-text-green-400\">star</cide-ele-icon>\n DEFAULT\n </label>\n </div>\n </div>\n \n <!-- Active Mapping Checkbox -->\n <div class=\"tw-flex tw-flex-col tw-justify-end\">\n <div class=\"tw-flex tw-items-center tw-gap-2 tw-px-3 tw-py-2 tw-rounded-md tw-border tw-border-blue-300 tw-bg-blue-50 dark:tw-bg-blue-900/30 dark:tw-border-blue-700\" (click)=\"$event.stopPropagation()\">\n <input \n type=\"checkbox\" \n [checked]=\"mapping.syenm_isactive\"\n (change)=\"onActiveMappingChange(i, $event)\" \n class=\"tw-h-4 tw-w-4 tw-accent-blue-600 tw-cursor-pointer\" />\n <label class=\"tw-inline-flex tw-items-center tw-gap-1 tw-text-xs tw-font-semibold tw-text-blue-700 dark:tw-text-blue-300 tw-cursor-pointer\">\n <cide-ele-icon variant=\"blue\" size=\"xs\" class=\"!tw-text-blue-600 dark:!tw-text-blue-400\">check_circle</cide-ele-icon>\n Active\n </label>\n </div>\n </div>\n \n <!-- User Type Mappings -->\n <div class=\"tw-flex tw-flex-col tw-justify-end\">\n <div class=\"tw-flex tw-items-center tw-gap-1.5 tw-flex-wrap\">\n @if (getEntityIdFromMapping(i)) {\n @if (getUserTypeMappingsForEntity(getEntityIdFromMapping(i)).length > 0) {\n @for (typeMapping of getUserTypeMappingsForEntity(getEntityIdFromMapping(i)); track typeMapping._id || typeMapping.syutm_type_specific_id) {\n <span class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded tw-text-[10px] tw-font-medium tw-bg-purple-50 dark:tw-bg-purple-900/30 tw-text-gray-900 dark:tw-text-gray-100 tw-border tw-border-purple-300 dark:tw-border-purple-700\">\n <cide-ele-icon variant=\"purple\" size=\"xs\" class=\"tw-mr-1 !tw-text-purple-600 dark:!tw-text-purple-400\">person</cide-ele-icon>\n {{ typeMapping.syutm_user_type }}\n @if (typeMapping.syutm_isactive) {\n <span class=\"tw-ml-1 tw-w-1.5 tw-h-1.5 tw-rounded-full tw-bg-green-600\"></span>\n }\n </span>\n }\n }\n }\n </div>\n </div>\n </div>\n\n\n <!-- Entity-Specific Details and Active Period - All in One Row -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-3\">\n <cide-ele-select label=\"Department for this Entity\" [options]=\"getDepartmentOptionsForEntity(i)\"\n formControlName=\"syenm_department_id_sydept\" (change)=\"onDepartmentChange($event)\" valueKey=\"_id\"\n labelKey=\"sydept_name\" placeholder=\"Select department\" size=\"md\">\n </cide-ele-select>\n\n <cide-ele-select label=\"Designation for this Entity\" [options]=\"getDesignationOptionsForEntity(i)\"\n valueKey=\"_id\" labelKey=\"sydsg_name\" formControlName=\"syenm_designation_id_sydsg\"\n placeholder=\"Select designation\" size=\"md\">\n </cide-ele-select>\n\n <cide-ele-input label=\"Active From\" [id]=\"'syenm_activefrom['+i+']'\"\n formControlName=\"syenm_activefrom\" type=\"date\" size=\"md\">\n </cide-ele-input>\n\n <cide-ele-input label=\"Active Until\" [id]=\"'syenm_activeupto['+i+']'\"\n formControlName=\"syenm_activeupto\" type=\"date\" size=\"md\">\n </cide-ele-input>\n </div>\n\n <!-- Menu Rights Grid for this Entity-Role -->\n <div class=\"tw-border-t tw-border-gray-200\">\n\n @if (getMenuRightsForMapping(i).length > 0) {\n <!-- Menu Rights Tree Grid -->\n\n <cide-ele-data-grid [config]=\"getMenuRightsGridConfig(i)\"\n [templateRenderers]=\"getMenuRightsTemplateRenderers(i)\"\n (gridEvent)=\"onMenuRightsGridEvent($event, i)\" class=\"tw-h-96 tw-w-full\">\n </cide-ele-data-grid>\n\n } @else {\n <div class=\"tw-text-center tw-py-8 tw-bg-gray-50 tw-border tw-border-gray-200 tw-rounded-lg\">\n <div class=\"tw-text-gray-400 tw-mb-3\">\n <cide-ele-icon variant=\"gray\" size=\"lg\">menu</cide-ele-icon>\n </div>\n <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-600 tw-mb-2\">No Menu Rights Available</h6>\n <p class=\"tw-text-xs tw-text-gray-500 tw-mb-3 tw-text-center\">Select both entity and role to\n automatically load\n menu rights for this mapping.</p>\n </div>\n }\n </div>\n </div>\n </div>\n </cide-ele-card>\n }\n </div>\n\n @if (entityMappings().length === 0) {\n <div class=\"tw-text-center tw-py-8 tw-bg-white tw-border tw-border-blue-200 tw-rounded-lg\">\n <div class=\"tw-text-blue-400 tw-mb-3\">\n <cide-ele-icon variant=\"blue\" size=\"lg\">business</cide-ele-icon>\n </div>\n <h4 class=\"tw-text-sm tw-font-medium tw-text-blue-800 tw-mb-2\">No Entity Mappings</h4>\n <p class=\"tw-text-blue-600 tw-mb-4 tw-text-center\">Add entity mappings to assign specific roles and\n permissions for different entities.</p>\n @if (!isViewingOwnProfile()) {\n <button class=\"tw-mx-auto\" cideEleButton variant=\"primary\" size=\"md\" type=\"button\"\n (click)=\"addEntityMapping()\" leftIcon=\"add\">\n Add First Entity Mapping\n </button>\n } @else {\n <p class=\"tw-text-amber-600 tw-text-sm tw-font-medium\">\n <cide-ele-icon variant=\"warning\" size=\"xs\" class=\"tw-mr-1\">lock</cide-ele-icon>\n You cannot modify your own entity mappings.\n </p>\n }\n </div>\n }\n </div>\n }\n\n @case ('addresses') {\n <!-- Contact Addresses Section -->\n <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\n <div class=\"tw-flex tw-justify-end\">\n <div class=\"tw-flex tw-justify-between tw-items-end tw-mb-2 tw-gap-4\">\n <button cideEleButton variant=\"primary\" size=\"md\" type=\"button\" (click)=\"addContactAddress()\"\n leftIcon=\"add\" [disabled]=\"!hasAddContactAddressRights()\">\n Add New Address\n </button>\n </div>\n </div>\n\n <div formArrayName=\"core_user_contact_addresses\">\n @for (address of contactAddresses(); track $index; let i = $index) {\n <div [formGroupName]=\"i\"\n class=\"tw-bg-white tw-border tw-border-gray-200 tw-rounded-xl tw-mb-8 tw-overflow-hidden tw-transition-all tw-duration-300 hover:tw-shadow-lg tw-shadow-sm\">\n <div\n class=\"tw-bg-gradient-to-r tw-from-gray-50 tw-to-gray-100 tw-px-4 tw-py-2 tw-flex tw-justify-between tw-items-center tw-border-b tw-border-gray-200\">\n <!-- Use address type as header instead of generic \"Address X\" -->\n <h4 class=\"tw-m-0 tw-text-gray-700 tw-text-sm tw-font-semibold tw-tracking-tight\">\n {{ getAddressTypeLabel(i) || ('Address ' + (i + 1)) }}\n </h4>\n <div class=\"tw-flex tw-items-center tw-gap-2\">\n @if (isAddressOwner(i)) {\n <button cideEleButton variant=\"secondary\" size=\"xs\" type=\"button\" (click)=\"shareAddress(i)\"\n leftIcon=\"share\" class=\"tw-text-blue-600 hover:tw-text-blue-700\">\n Share\n </button>\n }\n @if (!address?._id) {\n <button cideEleButton variant=\"danger\" size=\"sm\" type=\"button\" (click)=\"removeContactAddress(i)\"\n leftIcon=\"delete\">\n Remove\n </button>\n }\n </div>\n </div>\n <div class=\"tw-p-4\">\n <!-- Main Layout: Inputs on Left, Address Textarea on Right -->\n <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-4 tw-gap-3 tw-mb-3\">\n \n <!-- Left Side: Input Fields (3/4 width) -->\n <div class=\"lg:tw-col-span-3\">\n <!-- Row 1: Address Type, Contact Person -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3 tw-mb-3\">\n <cide-ele-select label=\"Address Type\" [options]=\"addressTypeOptions()\" id=\"sycad_address_type_id_sygms\"\n formControlName=\"sycad_address_type_id_sygms\" placeholder=\"Select type\" size=\"sm\"\n valueKey=\"_id\" labelKey=\"sygms_title\" (change)=\"onAddressTypeChange(i)\">\n </cide-ele-select>\n\n <cide-ele-input label=\"Contact Person\" formControlName=\"sycad_contact_person_name\"\n placeholder=\"Enter contact person\" size=\"sm\">\n </cide-ele-input>\n </div>\n\n <!-- Row 2: Postal Code, City, State, Country -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-4 tw-gap-3\">\n <cide-ele-select label=\"Postal Code\" [options]=\"addressPostalCodes()[i] || []\"\n formControlName=\"sycad_contact_pin_sypin\" placeholder=\"Select postal code\" [searchable]=\"true\"\n [loading]=\"addressPostalCodesLoading()[i] || false\" (searchChange)=\"onPostalCodeSearch($event, i)\"\n (change)=\"onPostalCodeSelection($event, i)\" size=\"sm\">\n </cide-ele-select>\n\n <cide-ele-input label=\"City\" formControlName=\"sycad_contact_city_sypin\" placeholder=\"Enter city\"\n size=\"sm\">\n </cide-ele-input>\n\n <cide-ele-input label=\"State\" formControlName=\"sycad_contact_state_sypin\" placeholder=\"Enter state\"\n size=\"sm\">\n </cide-ele-input>\n\n <cide-ele-select label=\"Country\" [options]=\"addressCountries()[i] || []\"\n formControlName=\"sycad_contact_country_syctr\" placeholder=\"Select country\" valueKey=\"_id\"\n labelKey=\"syctr_country_iso_name\" [searchable]=\"true\" (searchChange)=\"onCountrySearch($event, i)\"\n [loading]=\"addressCountriesLoading()[i] || false\" size=\"sm\">\n </cide-ele-select>\n </div>\n </div>\n\n <!-- Right Side: Address Textarea (1/4 width, spans 2 rows) -->\n <div class=\"lg:tw-col-span-1 lg:tw-row-span-2 tw-flex tw-flex-col\">\n <cide-ele-textarea label=\"Complete Address\" formControlName=\"sycad_contact_address\"\n placeholder=\"Enter complete address with area, city, and landmarks\" [rows]=\"4\" size=\"sm\"\n class=\"tw-h-full\">\n </cide-ele-textarea>\n </div>\n </div>\n\n <!-- Contact Details: Primary Phone, Alt Phone, Fax, Primary Email in 4 columns -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-4 tw-gap-3 tw-mb-3\">\n <cide-ele-input label=\"Primary Phone\" formControlName=\"sycad_contact_phone\" type=\"tel\"\n placeholder=\"Primary phone\" size=\"sm\">\n </cide-ele-input>\n\n <cide-ele-input label=\"Alternate Phone\" formControlName=\"sycad_contact_phone_alt\" type=\"tel\"\n placeholder=\"Alternate phone\" size=\"sm\">\n </cide-ele-input>\n\n <cide-ele-input label=\"Fax Number\" formControlName=\"sycad_contact_fax\" placeholder=\"Fax number\"\n size=\"sm\">\n </cide-ele-input>\n\n <cide-ele-input label=\"Primary Email\" formControlName=\"sycad_contact_email\" type=\"email\"\n placeholder=\"Primary email\" size=\"sm\">\n </cide-ele-input>\n </div>\n\n <!-- Alternate Email in single row -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3\">\n <cide-ele-input label=\"Alternate Email\" formControlName=\"sycad_contact_email_alt\" type=\"email\"\n placeholder=\"Alternate email address\" size=\"sm\">\n </cide-ele-input>\n </div>\n </div>\n </div>\n }\n </div>\n </div>\n }\n\n @case ('documents') {\n <!-- Documents Section -->\n <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\n <div class=\"tw-flex tw-justify-end tw-items-end tw-mb-2 tw-gap-4\">\n <button cideEleButton variant=\"primary\" size=\"md\" type=\"button\" (click)=\"addDocument()\" leftIcon=\"add\" [disabled]=\"!hasAddDocumentRights()\">\n Add Document\n </button>\n </div>\n <div formArrayName=\"core_user_documents\">\n @for (doc of documents(); track $index; let i = $index) {\n <div [formGroupName]=\"i\"\n class=\"tw-bg-white tw-border tw-border-gray-200 tw-rounded-xl tw-mb-8 tw-overflow-hidden tw-transition-all tw-duration-300 hover:tw-shadow-lg tw-shadow-sm\">\n <div\n class=\"tw-bg-gradient-to-r tw-from-gray-50 tw-to-gray-100 tw-px-4 tw-py-2 tw-flex tw-justify-between tw-items-center tw-border-b tw-border-gray-200\">\n <h4 class=\"tw-m-0 tw-text-gray-700 tw-text-sm tw-font-semibold tw-tracking-tight\">\n {{ getDocumentTypeLabel(i) || ('Document ' + (i + 1)) }}\n </h4>\n <div class=\"tw-flex tw-gap-2\">\n @if (doc?._id) {\n <button cideEleButton variant=\"secondary\" size=\"sm\" type=\"button\" (click)=\"shareDocumentRights(i)\"\n leftIcon=\"share\">\n Share\n </button>\n }\n </div>\n </div>\n <div class=\"tw-p-4\">\n <!-- Main Layout: Inputs on Left, File Upload on Right -->\n <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-3 tw-gap-4\">\n \n <!-- Left Side: Document Information (2/3 width) -->\n <div class=\"lg:tw-col-span-2\">\n <!-- Row 1: Document Type, Document Number, Name as per Document -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-3 tw-mb-3\">\n <cide-ele-select label=\"Document Type\" [options]=\"documentTypeOptions()\"\n formControlName=\"syusd_document_type_id_sygms\" placeholder=\"Select type\" size=\"sm\"\n valueKey=\"_id\" labelKey=\"sygms_title\" (change)=\"onDocumentTypeChange(i)\">\n </cide-ele-select>\n\n <cide-ele-input label=\"Document Number\" formControlName=\"syusd_doc_number\"\n placeholder=\"Document number\" size=\"sm\">\n </cide-ele-input>\n\n <cide-ele-input label=\"Name as per Document\" formControlName=\"syusd_doc_name_as_per_doc\"\n placeholder=\"Name on document\" size=\"sm\">\n </cide-ele-input>\n </div>\n\n <!-- Row 2: Issue Date, Expiry Date, Photo Group -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-3 tw-mb-3\">\n <cide-ele-input label=\"Issue Date\" formControlName=\"syusd_doc_issue_date\"\n [id]=\"'syusd_doc_issue_date['+i+']'\" type=\"date\" size=\"sm\">\n </cide-ele-input>\n\n <cide-ele-input label=\"Expiry Date\" formControlName=\"syusd_doc_expiry_date\"\n [id]=\"'syusd_doc_expiry_date['+i+']'\" type=\"date\" size=\"sm\">\n </cide-ele-input>\n </div>\n\n <!-- Row 3: Verification Status, KYC Status -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3\">\n <cide-ele-select label=\"Verification Status\" [options]=\"documentVerificationStatusOptions()\"\n formControlName=\"syusd_doc_verification_status_id_sygms\" placeholder=\"Select status\"\n size=\"sm\" valueKey=\"_id\" labelKey=\"sygms_title\">\n </cide-ele-select>\n\n <cide-ele-select label=\"KYC Status\" [options]=\"documentKycStatusOptions()\"\n formControlName=\"syusd_doc_kyc_status_id_sygms\" placeholder=\"Select KYC status\" size=\"sm\"\n valueKey=\"_id\" labelKey=\"sygms_title\">\n </cide-ele-select>\n </div>\n </div>\n\n <!-- Right Side: File Upload (1/3 width) -->\n <div class=\"lg:tw-col-span-1\">\n <div class=\"tw-bg-gray-50 tw-border tw-border-gray-200 tw-rounded-lg tw-p-3 tw-h-full\">\n \n <!-- File Upload Input -->\n <cide-ele-file-input\n [id]=\"'document-files-' + i\"\n [multiple]=\"true\"\n formControlName=\"syusd_photo_group_id_cyfm\"\n [accept]=\"'.pdf,.jpg,.jpeg,.png,.doc,.docx'\"\n [autoUpload]=\"true\"\n [uploadData]=\"getDocumentUploadData(i)\"\n (change)=\"onDocumentFilesSelected($event, i)\"\n (uploadSuccess)=\"onDocumentUploadSuccess($event, i)\"\n (uploadError)=\"onDocumentUploadError($event, i)\"\n (uploadProgressChange)=\"onDocumentUploadProgress($event, i)\"\n class=\"tw-mb-3\"\n size=\"sm\">\n </cide-ele-file-input>\n\n <!-- Upload Status -->\n <!-- Upload status is now handled by the file input component itself -->\n </div>\n </div>\n </div>\n </div>\n </div>\n }\n </div>\n </div>\n }\n\n @case ('family') {\n <!-- Family Details Section - Compact Design -->\n <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\n <div class=\"tw-flex tw-justify-end tw-items-end tw-mb-3 tw-gap-4\">\n <button cideEleButton variant=\"primary\" size=\"sm\" type=\"button\" (click)=\"addFamilyDetail()\" leftIcon=\"add\" [disabled]=\"!hasAddFamilyDetailRights()\">\n Add Family Member\n </button>\n </div>\n\n <div formArrayName=\"core_user_family_details\">\n @for (family of familyDetails(); track $index; let i = $index) {\n <div [formGroupName]=\"i\"\n class=\"tw-bg-white tw-border tw-border-gray-200 tw-rounded-lg tw-mb-4 tw-overflow-hidden tw-transition-all tw-duration-200 hover:tw-shadow-md tw-shadow-sm\">\n \n <!-- Compact Header -->\n <div class=\"tw-bg-gray-50 tw-px-4 tw-py-2 tw-flex tw-justify-between tw-items-center tw-border-b tw-border-gray-200\">\n <h4 class=\"tw-m-0 tw-text-gray-700 tw-text-sm tw-font-medium\">Family Member {{ i + 1 }}</h4>\n <div class=\"tw-flex tw-gap-2\">\n @if (family?._id) {\n <button cideEleButton variant=\"secondary\" size=\"xs\" type=\"button\" (click)=\"shareFamilyDetailRights(i)\"\n leftIcon=\"share\">\n Share\n </button>\n }\n @if (!family?._id) {\n <button cideEleButton variant=\"danger\" size=\"xs\" type=\"button\" (click)=\"removeFamilyDetail(i)\" leftIcon=\"delete\">\n Remove\n </button>\n }\n </div>\n </div>\n \n <!-- Compact Form Content - 3 inputs per row -->\n <div class=\"tw-p-4\">\n <!-- Row 1: Name, User, and Combined Relationship/Active Status (33.33% each) -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-3 tw-mb-3\">\n <cide-ele-input label=\"Family Member Name\" formControlName=\"syfdl_family_member_name\"\n placeholder=\"Enter family member full name\" size=\"sm\">\n </cide-ele-input>\n\n <cide-ele-select label=\"Family Member User\" [options]=\"userOptions(i)\"\n formControlName=\"syfdl_family_member_id_user\" placeholder=\"Select family member user\" size=\"sm\"\n valueKey=\"_id\" labelKey=\"user_fullname\" [searchable]=\"true\"\n [loading]=\"userSearchLoading()[i] || false\" (searchChange)=\"onUserSearchChange($event, i)\"\n (change)=\"onUserSelectionChange($event, i)\">\n </cide-ele-select>\n\n <!-- Combined Relationship and Active Status (33.33%) -->\n <div class=\"tw-flex tw-flex-row tw-gap-2 tw-items-end\">\n <div class=\"tw-flex-1\">\n <cide-ele-select label=\"Relationship\" [options]=\"relationshipOptions()\"\n formControlName=\"syfdl_relationship_id_sygms\" placeholder=\"Select relationship\" size=\"sm\"\n valueKey=\"_id\" labelKey=\"sygms_title\">\n </cide-ele-select>\n </div>\n\n <div class=\"tw-flex tw-items-center tw-pt-1 tw-flex-shrink-0\">\n <cide-ele-input formControlName=\"syfdl_isactive\" type=\"checkbox\" label=\"Active\" size=\"sm\">\n </cide-ele-input>\n </div>\n </div>\n </div>\n\n <!-- Row 2: Blood Group, DOB, and Phone -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 xl:tw-grid-cols-3 tw-gap-3 tw-mb-3\">\n <cide-ele-select label=\"Blood Group\" [options]=\"bloodGroupOptions()\"\n formControlName=\"syfdl_blood_group_sygms\" placeholder=\"Select blood group\" size=\"sm\" valueKey=\"_id\"\n labelKey=\"sygms_title\">\n </cide-ele-select>\n\n <cide-ele-input label=\"Date of Birth\" formControlName=\"syfdl_family_member_dob\" type=\"date\" size=\"sm\"\n [id]=\"'syfdl_family_member_dob['+i+']'\">\n </cide-ele-input>\n\n <cide-ele-input label=\"Contact Phone\" formControlName=\"syfdl_contact_phone\" type=\"tel\"\n placeholder=\"Enter contact phone\" size=\"sm\">\n </cide-ele-input>\n </div>\n\n <!-- Row 3: Email, Email ID, and Contact Number -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 xl:tw-grid-cols-3 tw-gap-3 tw-mb-3\">\n <cide-ele-input label=\"Contact Email\" formControlName=\"syfdl_contact_email\" type=\"email\"\n placeholder=\"Enter contact email\" size=\"sm\">\n </cide-ele-input>\n\n <cide-ele-input label=\"Contact Email ID\" formControlName=\"syfdl_contact_email_id\" type=\"email\"\n placeholder=\"Enter contact email ID\" size=\"sm\">\n </cide-ele-input>\n\n <cide-ele-input label=\"Contact Number\" formControlName=\"syfdl_contact_number\" type=\"tel\"\n placeholder=\"Enter contact number\" size=\"sm\">\n </cide-ele-input>\n </div>\n\n </div>\n </div>\n }\n </div>\n </div>\n }\n }\n </div>\n\n <!-- Form Actions -->\n <div\n class=\"tw-flex tw-justify-between tw-items-center tw-gap-4 tw-py-2 tw-bg-white tw-border-t tw-border-gray-200 tw-sticky tw-bottom-0 tw-z-10\">\n <!-- Error Display Component -->\n <div class=\"tw-flex-1\">\n <cide-form-field-error [formGroup]=\"userMasterForm\"></cide-form-field-error>\n </div>\n\n <!-- Action Buttons -->\n <div class=\"tw-flex tw-gap-4\">\n <button cideEleButton type=\"button\" variant=\"secondary\" (click)=\"resetForm()\" leftIcon=\"refresh\"\n [disabled]=\"loading()\">\n Reset Form\n </button>\n\n <button cideEleButton type=\"submit\" variant=\"primary\" [disabled]=\"loading() || userMasterForm.invalid\"\n [loading]=\"loading()\" leftIcon=\"save\">\n Save User Master\n </button>\n </div>\n </div>\n </form>\n</div>\n</cide-lyt-shared-wrapper>\n\n<!-- Template Renderers for Role Permissions Grid -->\n<ng-template #menuDetailsRendererTemplate let-row=\"row\">\n <div class=\"tw-flex tw-items-center tw-space-x-3 tw-min-w-0\">\n <!-- Menu Icon -->\n <div class=\"tw-flex-shrink-0\">\n @if (row.syme_type === 'module') {\n <cide-ele-icon class=\"tw-text-blue-600 tw-w-4 tw-h-4\">folder</cide-ele-icon>\n } @else if (row.syme_type === 'section') {\n <cide-ele-icon class=\"tw-text-green-600 tw-w-4 tw-h-4\">folder_open</cide-ele-icon>\n } @else if (row.syme_type === 'menu') {\n <cide-ele-icon class=\"tw-text-purple-600 tw-w-4 tw-h-4\">menu</cide-ele-icon>\n } @else {\n <cide-ele-icon class=\"tw-text-gray-600 tw-w-4 tw-h-4\">description</cide-ele-icon>\n }\n </div>\n\n <!-- Menu Details -->\n <div class=\"tw-ml-3 tw-min-w-0 tw-flex-1\">\n <div class=\"tw-flex tw-items-center tw-gap-2\">\n <div class=\"tw-text-xs tw-font-medium tw-text-gray-900 tw-truncate\" [title]=\"row.syme_title\">\n {{ row.syme_title || row.menu?.syme_title || row.menu?.syme_menu_name || 'Untitled' }}\n </div>\n <!-- Green pill indicator for parent menus with child permissions -->\n @if (row.syme_type === 'module' || row.syme_type === 'section') {\n @if (hasChildMenusWithPermissions(row._id)) {\n <span\n class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-green-100 tw-text-green-800 tw-whitespace-nowrap\">\n Assigned\n </span>\n }\n }\n </div>\n @if (row.permission?.sygms_name) {\n <div class=\"tw-text-xs tw-text-blue-500 tw-truncate\" [title]=\"row.permission?.sygms_name\">\n {{ row.permission?.sygms_name }}\n </div>\n }\n </div>\n </div>\n</ng-template>\n\n<!-- Menu Type Renderer Template -->\n<ng-template #menuTypeRendererTemplate let-row=\"row\" let-value=\"value\">\n <div class=\"tw-flex tw-items-center tw-justify-center\">\n @if (row.syme_type === 'module') {\n <span\n class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded-full tw-text-xs tw-font-medium tw-bg-blue-100 tw-text-blue-800\">\n Module\n </span>\n } @else if (row.syme_type === 'section') {\n <span\n class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded-full tw-text-xs tw-font-medium tw-bg-green-100 tw-text-green-800\">\n Section\n </span>\n } @else if (row.syme_type === 'menu') {\n <span\n class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded-full tw-text-xs tw-font-medium tw-bg-purple-100 tw-text-purple-800\">\n Menu\n </span>\n } @else {\n <span\n class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded-full tw-text-xs tw-font-medium tw-bg-gray-100 tw-text-gray-800\">\n {{ row.syme_type || 'Unknown' }}\n </span>\n }\n </div>\n</ng-template>\n\n<!-- Permissions Checkbox Renderer Template -->\n<ng-template #permissionsCheckboxRendererTemplate let-row=\"row\" let-value=\"value\">\n <div class=\"tw-flex tw-flex-wrap tw-gap-2 tw-max-w-full\">\n @if (row.syme_type === 'menu' && row?.syme_permissions_id_sygms && row?.syme_permissions_id_sygms.length > 0) {\n @for (permissionId of row?.syme_permissions_id_sygms || []; track permissionId) {\n <div class=\"tw-flex tw-items-center tw-space-x-1\">\n <div class=\"tw-flex tw-items-center tw-space-x-1\">\n <input type=\"checkbox\" [checked]=\"isPermissionSelected(row._id, permissionId)\" [disabled]=\"true\"\n class=\"tw-h-4 tw-w-4 tw-text-blue-600 tw-bg-gray-100 tw-border-gray-300 tw-rounded focus:tw-ring-blue-500\">\n <label class=\"tw-text-xs tw-text-gray-700\">\n {{ getPermissionById(permissionId)?.sygms_title || 'Unknown' }}\n </label>\n </div>\n </div>\n }\n } @else {\n <!-- Show green checkmark for parent menus with child permissions -->\n @if (row.syme_type === 'module' || row.syme_type === 'section' || row.syme_type === 'title') {\n @if (hasChildMenusWithPermissions(row._id)) {\n <div class=\"tw-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-bg-green-100 tw-rounded-full\">\n <cide-ele-icon class=\"tw-text-green-600\" size=\"xs\">\n check\n </cide-ele-icon>\n </div>\n } @else {\n <span class=\"tw-text-xs tw-text-gray-400\">N/A</span>\n }\n } @else {\n <span class=\"tw-text-xs tw-text-gray-400\">N/A</span>\n }\n }\n </div>\n</ng-template>\n\n<!-- Menu Rights Permissions Renderer Template -->\n<ng-template #menuRightsPermissionsRendererTemplate let-row=\"row\" let-value=\"value\">\n <div class=\"tw-flex tw-flex-wrap tw-gap-2 tw-max-w-full\">\n <!-- Role Rights Display -->\n @if (row.role_rights && row.role_rights.length > 0) {\n <div class=\"tw-mb-2\">\n <div class=\"tw-text-xs tw-text-gray-500 tw-mb-1\">Role Rights:</div>\n <div class=\"tw-flex tw-flex-wrap tw-gap-1\">\n @for (right of row.role_rights; track $index) {\n <span class=\"tw-inline-block tw-px-2 tw-py-1 tw-text-xs tw-bg-blue-100 tw-text-blue-800 tw-rounded\">\n {{ right }}\n </span>\n }\n </div>\n </div>\n }\n\n\n <!-- Exception Indicator -->\n @if (row.hasException) {\n <div class=\"tw-mt-2\">\n <span class=\"tw-inline-block tw-px-2 tw-py-1 tw-text-xs tw-bg-yellow-100 tw-text-yellow-800 tw-rounded\">\n Override\n </span>\n </div>\n } @else {\n <div class=\"tw-mt-2\">\n <span class=\"tw-text-xs tw-text-gray-400\">Default</span>\n </div>\n }\n </div>\n</ng-template>\n\n<!-- Permissions Renderer Template -->\n<ng-template #permissionsRendererTemplate let-row=\"row\" let-value=\"value\">\n <div class=\"tw-flex tw-flex-wrap tw-gap-2 tw-max-w-full\">\n @if (row._permissionValues && Object.keys(row._permissionValues).length > 0) {\n @for (permissionId of Object.keys(row._permissionValues); track permissionId) {\n <div class=\"tw-flex tw-items-center tw-space-x-2\">\n <cide-ele-input type=\"checkbox\" [ngModel]=\"row._permissionValues[permissionId].checked\"\n (ngModelChange)=\"onPermissionChangeSafe($event, row, permissionId)\"\n [id]=\"'permission-' + row._id + '-' + permissionId\" class=\"tw-h-4 tw-w-4\">\n </cide-ele-input>\n <label [for]=\"'permission-' + row._id + '-' + permissionId\" \n class=\"tw-text-xs tw-cursor-pointer\"\n [ngClass]=\"{\n 'tw-text-gray-700': row._permissionValues[permissionId].modified === row._permissionValues[permissionId].actual,\n 'tw-text-blue-600 tw-font-semibold': row._permissionValues[permissionId].modified !== row._permissionValues[permissionId].actual\n }\">\n {{ row._permissionValues[permissionId].permission?.sygms_title }}\n @if (row._permissionValues[permissionId].modified !== row._permissionValues[permissionId].actual) {\n <span class=\"tw-text-xs tw-text-orange-500 tw-ml-1\" title=\"Modified from role permission\">\n ({{ row._permissionValues[permissionId].actual ? '\u2713' : '\u2717' }})\n </span>\n }\n </label>\n </div>\n }\n } @else {\n <!-- No permissions to display - show N/A (permissions are already loaded, just empty) -->\n <span class=\"tw-text-xs tw-text-gray-400\">N/A</span>\n }\n </div>\n</ng-template>", styles: [":host ::ng-deep .entity-mapping-card{transition:all .2s ease}:host ::ng-deep .entity-mapping-card:hover{transform:translateY(-2px)}:host ::ng-deep .entity-mapping-card .cide-card-header{background:linear-gradient(135deg,#3b82f60d,#9333ea0d);border-bottom:1px solid rgba(59,130,246,.1)}:host ::ng-deep .dark .entity-mapping-card .cide-card-header{background:linear-gradient(135deg,#3b82f61a,#9333ea1a);border-bottom:1px solid rgba(59,130,246,.2)}:host ::ng-deep .entity-mapping-card .cide-card-header-content{font-weight:600}:host ::ng-deep .entity-mapping-card .cide-card-body{background:linear-gradient(180deg,#f9fafb80,#ffffff80)}:host ::ng-deep .dark .entity-mapping-card .cide-card-body{background:linear-gradient(180deg,#11182780,#1f293780)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1$2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CideInputComponent, selector: "cide-ele-input", inputs: ["fill", "label", "labelHide", "disabled", "clearInput", "labelPlacement", "labelDir", "placeholder", "leadingIcon", "trailingIcon", "helperText", "helperTextCollapse", "hideHelperAndErrorText", "errorText", "maxlength", "minlength", "required", "autocapitalize", "autocomplete", "type", "width", "id", "ngModel", "option", "min", "max", "step", "size"], outputs: ["ngModelChange"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput", "options", "multiple", "searchable", "showSearchInput", "loading", "valueKey", "labelKey", "treeView"], outputs: ["ngModelChange", "change", "searchChange"] }, { kind: "component", type: CideTextareaComponent, selector: "cide-ele-textarea", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "minlength", "maxlength", "rows", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput"], outputs: ["ngModelChange"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated", "adaptive"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideEleTabComponent, selector: "cide-ele-tab", inputs: ["tabs", "activeTabId", "size", "variant", "fullWidth", "disabled"], outputs: ["tabChange"] }, { kind: "component", type: CideEleFileInputComponent, selector: "cide-ele-file-input", inputs: ["label", "accept", "multiple", "disabled", "required", "helperText", "errorText", "showPreview", "previewWidth", "previewHeight", "previewBoxMode", "showFileName", "placeholderText", "placeholderIcon", "autoUpload", "uploadData", "showFloatingUploader", "floatingUploaderGroupId"], outputs: ["fileChange", "uploadSuccess", "uploadError", "uploadProgressChange"] }, { kind: "directive", type: CideEleFileImageDirective, selector: "[cideEleFileImage]", inputs: ["fileId", "altText"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideEleDataGridComponent, selector: "cide-ele-data-grid", inputs: ["config", "templateRenderers", "customFormatters", "actionHandlers", "serverSidePagination", "totalServerItems", "currentServerPage", "currentServerPageSize", "dragDropEnabled"], outputs: ["gridEvent"] }, { kind: "component", type: CideEleToastNotificationComponent, selector: "cide-ele-toast-notification" }, { kind: "component", type: CideFormFieldErrorComponent, selector: "cide-form-field-error", inputs: ["control", "formGroup", "fieldName", "customMessages"] }, { kind: "component", type: CideLytSharedWrapperComponent, selector: "cide-lyt-shared-wrapper", inputs: ["shared_wrapper_setup_param", "breadcrumb_data"] }, { kind: "component", type: CideEleCardComponent, selector: "cide-ele-card", inputs: ["title", "subtitle", "cardConfig"], outputs: ["stateChange", "collapsed", "minimized", "maximized", "removed", "headerClick"] }] });
|
|
17595
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: CideCoreUserCreateComponent, isStandalone: true, selector: "cide-core-user-create", viewQueries: [{ propertyName: "menuDetailsRendererTemplate", first: true, predicate: ["menuDetailsRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "permissionsCheckboxRendererTemplate", first: true, predicate: ["permissionsCheckboxRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "menuTypeRendererTemplate", first: true, predicate: ["menuTypeRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "menuRightsPermissionsRendererTemplate", first: true, predicate: ["menuRightsPermissionsRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "permissionsRendererTemplate", first: true, predicate: ["permissionsRendererTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- \n ENTERPRISE USER MASTER FORM\n \n Enterprise-Level Styling with Tailwind CSS\n Features: Responsive grids, proper typography, enhanced user experience\n-->\n\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: pageCode() }\" [breadcrumb_data]=\"breadcrumbData()\">\n <div class=\"tw-w-full tw-h-full tw-p-1 tw-pt-2\">\n <!-- Toast Notifications -->\n <cide-ele-toast-notification></cide-ele-toast-notification>\n \n <form class=\"tw-max-w-7xl tw-mx-auto tw-bg-transparent\" [formGroup]=\"userMasterForm\" [class.tw-opacity-60]=\"loading()\"\n (ngSubmit)=\"onSubmit()\">\n\n\n <!-- User Context Header -->\n <div\n class=\"tw-bg-gradient-to-r tw-from-blue-50 tw-to-indigo-50 tw-border tw-border-blue-200 tw-rounded-md tw-p-1 tw-mb-2 tw-shadow-sm\">\n <div class=\"tw-flex tw-items-center tw-justify-between tw-flex-wrap tw-gap-2\">\n <!-- User Basic Info Display -->\n <div class=\"tw-flex tw-items-center tw-gap-3 tw-flex-wrap\">\n <!-- Profile Photo Preview -->\n <div class=\"tw-flex tw-items-center tw-gap-2\">\n <div\n class=\"tw-w-8 tw-h-8 tw-rounded-full tw-bg-blue-100 tw-border tw-border-blue-200 tw-flex tw-items-center tw-justify-center tw-overflow-hidden\">\n @if (userMasterForm.get('user_photo_id_cyfm')?.value) {\n <img cideEleFileImage [fileId]=\"userMasterForm.get('user_photo_id_cyfm')?.value\"\n [altText]=\"'Profile Photo'\" class=\"tw-w-full tw-h-full tw-object-cover\">\n } @else {\n <cide-ele-icon name=\"person\" class=\"tw-w-5 tw-h-5 tw-text-blue-600\">\n </cide-ele-icon>\n }\n </div>\n <div class=\"tw-flex tw-flex-col\">\n <span class=\"tw-text-xs tw-font-medium tw-text-blue-900\">\n {{ getUserFullName() || 'New User' }}\n </span>\n <span class=\"tw-text-xs tw-text-blue-600\">\n {{ getUserUsername() || 'Username not set' }}\n </span>\n </div>\n </div>\n\n <!-- Contact Info -->\n <div class=\"tw-flex tw-items-center tw-gap-3\">\n <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-xs tw-text-gray-700\">\n <cide-ele-icon variant=\"gray\" size=\"sm\">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=\"sm\">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=\"sm\" 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=\"sm\" 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=\"sm\">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=\"sm\">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=\"sm\" 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=\"sm\" (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=\"sm\" (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=\"sm\" (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=\"sm\">\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=\"sm\">\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=\"sm\">\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=\"sm\">\n </cide-ele-input>\n </div>\n\n <!-- User Type Mapping -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\n <cide-ele-select\n id=\"syutm_user_type\"\n label=\"User Type\"\n placeholder=\"Select user type\"\n [options]=\"userTypeOptions\"\n valueKey=\"value\"\n labelKey=\"label\"\n formControlName=\"syutm_user_type\"\n size=\"sm\">\n </cide-ele-select>\n\n @if (showTypeSpecificId()) {\n <cide-ele-input\n id=\"syutm_type_specific_id\"\n label=\"Type-Specific ID\"\n placeholder=\"Auto-generated (e.g., STU001, TCH001)\"\n formControlName=\"syutm_type_specific_id\"\n [maxlength]=\"50\"\n size=\"sm\"\n [disabled]=\"true\">\n </cide-ele-input>\n }\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=\"sm\">\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=\"sm\">\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=\"sm\" 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=\"xs\" type=\"button\" (click)=\"addEntityMapping()\"\n leftIcon=\"add\" [disabled]=\"isViewingOwnProfile() || isAllEntitiesMapped()\"\n [title]=\"isViewingOwnProfile() ? 'You cannot modify your own entity mappings' : (isAllEntitiesMapped() ? 'All entities are mapped' : 'Add Entity Mapping')\">\n Add Entity Mapping\n </button>\n\n @if (isViewingOwnProfile()) {\n <div class=\"tw-mt-2 tw-p-2 tw-bg-amber-50 tw-border tw-border-amber-200 tw-rounded-md tw-max-w-xs\">\n <p class=\"tw-text-xs tw-text-amber-700\">\n <cide-ele-icon variant=\"warning\" size=\"sm\" class=\"tw-mr-1\">lock</cide-ele-icon>\n You cannot modify your own entity mappings.\n </p>\n </div>\n } @else if (isAllEntitiesMapped()) {\n <div class=\"tw-mt-2 tw-p-2 tw-bg-blue-50 tw-border tw-border-blue-200 tw-rounded-md tw-max-w-xs\">\n <p class=\"tw-text-xs tw-text-blue-700\">\n <cide-ele-icon variant=\"info\" size=\"sm\" class=\"tw-mr-1\">info</cide-ele-icon>\n All available entities are already mapped.\n </p>\n </div>\n }\n </div>\n </div>\n\n <div formArrayName=\"core_entity_mapping\">\n @for (mapping of entityMappings(); track mapping.syenm_entity_id_syen?._id || mapping.syenm_entity_id_syen || $index; let i = $index) {\n <cide-ele-card\n [title]=\"getEntityNameFromMapping(i) || 'Entity Mapping ' + (i + 1)\"\n [subtitle]=\"mapping.syenm_isdefault ? 'Primary Entity' : ''\"\n [cardConfig]=\"{\n collapsible: true,\n minimizable: false,\n maximizable: false,\n removable: !mapping?._id && !isViewingOwnProfile(),\n defaultState: 'collapsed',\n showHeader: true,\n showFooter: false,\n variant: 'default',\n size: 'sm',\n shadow: true,\n rounded: true,\n bordered: true\n }\"\n (stateChange)=\"onEntityMappingCardStateChange($event, i)\"\n (removed)=\"removeEntityMapping(i)\"\n class=\"tw-mb-2 entity-mapping-card tw-block\">\n \n <div [formGroupName]=\"i\">\n \n <!-- Card Content -->\n <div class=\"tw-space-y-3\">\n <!-- Hidden form control to maintain form structure for entity -->\n <input type=\"hidden\" [formControlName]=\"'syenm_entity_id_syen'\" />\n \n <!-- Role, Default, Active, and User Type in One Row -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-4 tw-gap-3\">\n <!-- Role Selection with Copy Button -->\n <div class=\"tw-flex tw-flex-col\">\n <cide-ele-select label=\"Role for this Entity\" [options]=\"getRoleOptionsForEntity(i)\"\n formControlName=\"syenm_role_id_syusrol\" valueKey=\"_id\" labelKey=\"syusrol_role_name\"\n placeholder=\"Select role for this entity\" size=\"sm\" (change)=\"onRoleChange(i, $event)\">\n </cide-ele-select>\n @if (!isViewingOwnProfile() && entityMappings().length > 1) {\n <button \n type=\"button\"\n (click)=\"showCopyRoleFromEntityDrawer(i)\"\n class=\"tw-mt-1 tw-text-xs tw-text-blue-600 hover:tw-text-blue-800 tw-flex tw-items-center tw-gap-1 tw-w-fit tw-transition-colors\"\n title=\"Copy role and settings from another entity mapping\">\n <cide-ele-icon variant=\"blue\" size=\"sm\">content_copy</cide-ele-icon>\n <span>Copy from Entity</span>\n </button>\n }\n </div>\n \n <!-- Primary Entity Checkbox -->\n <div class=\"tw-flex tw-flex-col tw-justify-end\">\n <div class=\"tw-flex tw-items-center tw-gap-2 tw-px-3 tw-py-2 tw-rounded-md tw-border tw-border-green-300 tw-bg-green-50 dark:tw-bg-green-900/30 dark:tw-border-green-700\" (click)=\"$event.stopPropagation()\">\n <input \n type=\"checkbox\" \n [checked]=\"mapping.syenm_isdefault\"\n (change)=\"onDefaultEntityChange(i, $event)\" \n class=\"tw-h-4 tw-w-4 tw-accent-green-600 tw-cursor-pointer\" />\n <label class=\"tw-inline-flex tw-items-center tw-gap-1 tw-text-xs tw-font-semibold tw-text-green-700 dark:tw-text-green-300 tw-cursor-pointer\">\n <cide-ele-icon variant=\"green\" size=\"sm\" class=\"!tw-text-green-600 dark:!tw-text-green-400\">star</cide-ele-icon>\n DEFAULT\n </label>\n </div>\n </div>\n \n <!-- Active Mapping Checkbox -->\n <div class=\"tw-flex tw-flex-col tw-justify-end\">\n <div class=\"tw-flex tw-items-center tw-gap-2 tw-px-3 tw-py-2 tw-rounded-md tw-border tw-border-blue-300 tw-bg-blue-50 dark:tw-bg-blue-900/30 dark:tw-border-blue-700\" (click)=\"$event.stopPropagation()\">\n <input \n type=\"checkbox\" \n [checked]=\"mapping.syenm_isactive\"\n (change)=\"onActiveMappingChange(i, $event)\" \n class=\"tw-h-4 tw-w-4 tw-accent-blue-600 tw-cursor-pointer\" />\n <label class=\"tw-inline-flex tw-items-center tw-gap-1 tw-text-xs tw-font-semibold tw-text-blue-700 dark:tw-text-blue-300 tw-cursor-pointer\">\n <cide-ele-icon variant=\"blue\" size=\"sm\" class=\"!tw-text-blue-600 dark:!tw-text-blue-400\">check_circle</cide-ele-icon>\n Active\n </label>\n </div>\n </div>\n \n <!-- User Type Mappings -->\n <div class=\"tw-flex tw-flex-col tw-justify-end\">\n <div class=\"tw-flex tw-items-center tw-gap-1.5 tw-flex-wrap\">\n @if (getEntityIdFromMapping(i)) {\n @if (getUserTypeMappingsForEntity(getEntityIdFromMapping(i)).length > 0) {\n @for (typeMapping of getUserTypeMappingsForEntity(getEntityIdFromMapping(i)); track typeMapping._id || typeMapping.syutm_type_specific_id) {\n <span class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded tw-text-[10px] tw-font-medium tw-bg-purple-50 dark:tw-bg-purple-900/30 tw-text-gray-900 dark:tw-text-gray-100 tw-border tw-border-purple-300 dark:tw-border-purple-700\">\n <cide-ele-icon variant=\"purple\" size=\"sm\" class=\"tw-mr-1 !tw-text-purple-600 dark:!tw-text-purple-400\">person</cide-ele-icon>\n {{ typeMapping.syutm_user_type }}\n @if (typeMapping.syutm_isactive) {\n <span class=\"tw-ml-1 tw-w-1.5 tw-h-1.5 tw-rounded-full tw-bg-green-600\"></span>\n }\n </span>\n }\n }\n }\n </div>\n </div>\n </div>\n\n\n <!-- Entity-Specific Details and Active Period - All in One Row -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-3\">\n <cide-ele-select label=\"Department for this Entity\" [options]=\"getDepartmentOptionsForEntity(i)\"\n formControlName=\"syenm_department_id_sydept\" (change)=\"onDepartmentChange($event)\" valueKey=\"_id\"\n labelKey=\"sydept_name\" placeholder=\"Select department\" size=\"sm\">\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=\"sm\">\n </cide-ele-select>\n\n <cide-ele-input label=\"Active From\" [id]=\"'syenm_activefrom['+i+']'\"\n formControlName=\"syenm_activefrom\" type=\"date\" size=\"sm\">\n </cide-ele-input>\n\n <cide-ele-input label=\"Active Until\" [id]=\"'syenm_activeupto['+i+']'\"\n formControlName=\"syenm_activeupto\" type=\"date\" size=\"sm\">\n </cide-ele-input>\n </div>\n\n <!-- Menu Rights Grid for this Entity-Role -->\n <div class=\"tw-border-t tw-border-gray-200\">\n\n @if (getMenuRightsForMapping(i).length > 0) {\n <!-- Menu Rights Tree Grid -->\n\n <cide-ele-data-grid [config]=\"getMenuRightsGridConfig(i)\"\n [templateRenderers]=\"getMenuRightsTemplateRenderers(i)\"\n (gridEvent)=\"onMenuRightsGridEvent($event, i)\" class=\"tw-h-96 tw-w-full\">\n </cide-ele-data-grid>\n\n } @else {\n <div class=\"tw-text-center tw-py-8 tw-bg-gray-50 tw-border tw-border-gray-200 tw-rounded-lg\">\n <div class=\"tw-text-gray-400 tw-mb-3\">\n <cide-ele-icon variant=\"gray\" size=\"lg\">menu</cide-ele-icon>\n </div>\n <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-600 tw-mb-2\">No Menu Rights Available</h6>\n <p class=\"tw-text-xs tw-text-gray-500 tw-mb-3 tw-text-center\">Select both entity and role to\n automatically load\n menu rights for this mapping.</p>\n </div>\n }\n </div>\n </div>\n </div>\n </cide-ele-card>\n }\n </div>\n\n @if (entityMappings().length === 0) {\n <div class=\"tw-text-center tw-py-8 tw-bg-white tw-border tw-border-blue-200 tw-rounded-lg\">\n <div class=\"tw-text-blue-400 tw-mb-3\">\n <cide-ele-icon variant=\"blue\" size=\"lg\">business</cide-ele-icon>\n </div>\n <h4 class=\"tw-text-sm tw-font-medium tw-text-blue-800 tw-mb-2\">No Entity Mappings</h4>\n <p class=\"tw-text-blue-600 tw-mb-4 tw-text-center\">Add entity mappings to assign specific roles and\n permissions for different entities.</p>\n @if (!isViewingOwnProfile()) {\n <button class=\"tw-mx-auto\" cideEleButton variant=\"primary\" size=\"xs\" type=\"button\"\n (click)=\"addEntityMapping()\" leftIcon=\"add\">\n Add First Entity Mapping\n </button>\n } @else {\n <p class=\"tw-text-amber-600 tw-text-sm tw-font-medium\">\n <cide-ele-icon variant=\"warning\" size=\"sm\" class=\"tw-mr-1\">lock</cide-ele-icon>\n You cannot modify your own entity mappings.\n </p>\n }\n </div>\n }\n </div>\n }\n\n @case ('addresses') {\n <!-- Contact Addresses Section -->\n <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\n <div class=\"tw-flex tw-justify-end\">\n <div class=\"tw-flex tw-justify-between tw-items-end tw-mb-2 tw-gap-4\">\n <button cideEleButton variant=\"primary\" size=\"xs\" 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=\"xs\" 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=\"xs\" 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=\"xs\" 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=\"xs\" type=\"button\" (click)=\"addFamilyDetail()\" leftIcon=\"add\" [disabled]=\"!hasAddFamilyDetailRights()\">\n Add Family Member\n </button>\n </div>\n\n <div formArrayName=\"core_user_family_details\">\n @for (family of familyDetails(); track $index; let i = $index) {\n <div [formGroupName]=\"i\"\n class=\"tw-bg-white tw-border tw-border-gray-200 tw-rounded-lg tw-mb-4 tw-overflow-hidden tw-transition-all tw-duration-200 hover:tw-shadow-md tw-shadow-sm\">\n \n <!-- Compact Header -->\n <div class=\"tw-bg-gray-50 tw-px-4 tw-py-2 tw-flex tw-justify-between tw-items-center tw-border-b tw-border-gray-200\">\n <h4 class=\"tw-m-0 tw-text-gray-700 tw-text-sm tw-font-medium\">Family Member {{ i + 1 }}</h4>\n <div class=\"tw-flex tw-gap-2\">\n @if (family?._id) {\n <button cideEleButton variant=\"secondary\" size=\"xs\" type=\"button\" (click)=\"shareFamilyDetailRights(i)\"\n leftIcon=\"share\">\n Share\n </button>\n }\n @if (!family?._id) {\n <button cideEleButton variant=\"danger\" size=\"xs\" type=\"button\" (click)=\"removeFamilyDetail(i)\" leftIcon=\"delete\">\n Remove\n </button>\n }\n </div>\n </div>\n \n <!-- Compact Form Content - 3 inputs per row -->\n <div class=\"tw-p-4\">\n <!-- Row 1: Name, User, and Combined Relationship/Active Status (33.33% each) -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-3 tw-mb-3\">\n <cide-ele-input label=\"Family Member Name\" formControlName=\"syfdl_family_member_name\"\n placeholder=\"Enter family member full name\" size=\"sm\">\n </cide-ele-input>\n\n <cide-ele-select label=\"Family Member User\" [options]=\"userOptions(i)\"\n formControlName=\"syfdl_family_member_id_user\" placeholder=\"Select family member user\" size=\"sm\"\n valueKey=\"_id\" labelKey=\"user_fullname\" [searchable]=\"true\"\n [loading]=\"userSearchLoading()[i] || false\" (searchChange)=\"onUserSearchChange($event, i)\"\n (change)=\"onUserSelectionChange($event, i)\">\n </cide-ele-select>\n\n <!-- Combined Relationship and Active Status (33.33%) -->\n <div class=\"tw-flex tw-flex-row tw-gap-2 tw-items-end\">\n <div class=\"tw-flex-1\">\n <cide-ele-select label=\"Relationship\" [options]=\"relationshipOptions()\"\n formControlName=\"syfdl_relationship_id_sygms\" placeholder=\"Select relationship\" size=\"sm\"\n valueKey=\"_id\" labelKey=\"sygms_title\">\n </cide-ele-select>\n </div>\n\n <div class=\"tw-flex tw-items-center tw-pt-1 tw-flex-shrink-0\">\n <cide-ele-input formControlName=\"syfdl_isactive\" type=\"checkbox\" label=\"Active\" size=\"sm\">\n </cide-ele-input>\n </div>\n </div>\n </div>\n\n <!-- Row 2: Blood Group, DOB, and Phone -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 xl:tw-grid-cols-3 tw-gap-3 tw-mb-3\">\n <cide-ele-select label=\"Blood Group\" [options]=\"bloodGroupOptions()\"\n formControlName=\"syfdl_blood_group_sygms\" placeholder=\"Select blood group\" size=\"sm\" valueKey=\"_id\"\n labelKey=\"sygms_title\">\n </cide-ele-select>\n\n <cide-ele-input label=\"Date of Birth\" formControlName=\"syfdl_family_member_dob\" type=\"date\" size=\"sm\"\n [id]=\"'syfdl_family_member_dob['+i+']'\">\n </cide-ele-input>\n\n <cide-ele-input label=\"Contact Phone\" formControlName=\"syfdl_contact_phone\" type=\"tel\"\n placeholder=\"Enter contact phone\" size=\"sm\">\n </cide-ele-input>\n </div>\n\n <!-- Row 3: Email, Email ID, and Contact Number -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 xl:tw-grid-cols-3 tw-gap-3 tw-mb-3\">\n <cide-ele-input label=\"Contact Email\" formControlName=\"syfdl_contact_email\" type=\"email\"\n placeholder=\"Enter contact email\" size=\"sm\">\n </cide-ele-input>\n\n <cide-ele-input label=\"Contact Email ID\" formControlName=\"syfdl_contact_email_id\" type=\"email\"\n placeholder=\"Enter contact email ID\" size=\"sm\">\n </cide-ele-input>\n\n <cide-ele-input label=\"Contact Number\" formControlName=\"syfdl_contact_number\" type=\"tel\"\n placeholder=\"Enter contact number\" size=\"sm\">\n </cide-ele-input>\n </div>\n\n </div>\n </div>\n }\n </div>\n </div>\n }\n }\n </div>\n\n <!-- Form Actions -->\n <div\n class=\"tw-flex tw-justify-between tw-items-center tw-gap-4 tw-py-2 tw-bg-white tw-border-t tw-border-gray-200 tw-sticky tw-bottom-0 tw-z-10\">\n <!-- Error Display Component -->\n <div class=\"tw-flex-1\">\n <cide-form-field-error [formGroup]=\"userMasterForm\"></cide-form-field-error>\n </div>\n\n <!-- Action Buttons -->\n <div class=\"tw-flex tw-gap-4\">\n <button cideEleButton type=\"button\" variant=\"secondary\" (click)=\"resetForm()\" leftIcon=\"refresh\"\n [disabled]=\"loading()\">\n Reset Form\n </button>\n\n <button cideEleButton type=\"submit\" variant=\"primary\" [disabled]=\"loading() || userMasterForm.invalid\"\n [loading]=\"loading()\" leftIcon=\"save\">\n Save User Master\n </button>\n </div>\n </div>\n </form>\n</div>\n</cide-lyt-shared-wrapper>\n\n<!-- Template Renderers for Role Permissions Grid -->\n<ng-template #menuDetailsRendererTemplate let-row=\"row\">\n <div class=\"tw-flex tw-items-center tw-space-x-3 tw-min-w-0\">\n <!-- Menu Icon -->\n <div class=\"tw-flex-shrink-0\">\n @if (row.syme_type === 'module') {\n <cide-ele-icon class=\"tw-text-blue-600 tw-w-4 tw-h-4\">folder</cide-ele-icon>\n } @else if (row.syme_type === 'section') {\n <cide-ele-icon class=\"tw-text-green-600 tw-w-4 tw-h-4\">folder_open</cide-ele-icon>\n } @else if (row.syme_type === 'menu') {\n <cide-ele-icon class=\"tw-text-purple-600 tw-w-4 tw-h-4\">menu</cide-ele-icon>\n } @else {\n <cide-ele-icon class=\"tw-text-gray-600 tw-w-4 tw-h-4\">description</cide-ele-icon>\n }\n </div>\n\n <!-- Menu Details -->\n <div class=\"tw-ml-3 tw-min-w-0 tw-flex-1\">\n <div class=\"tw-flex tw-items-center tw-gap-2\">\n <div class=\"tw-text-xs tw-font-medium tw-text-gray-900 tw-truncate\" [title]=\"row.syme_title\">\n {{ row.syme_title || row.menu?.syme_title || row.menu?.syme_menu_name || 'Untitled' }}\n </div>\n <!-- Green pill indicator for parent menus with child permissions -->\n @if (row.syme_type === 'module' || row.syme_type === 'section') {\n @if (hasChildMenusWithPermissions(row._id)) {\n <span\n class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-green-100 tw-text-green-800 tw-whitespace-nowrap\">\n Assigned\n </span>\n }\n }\n </div>\n @if (row.permission?.sygms_name) {\n <div class=\"tw-text-xs tw-text-blue-500 tw-truncate\" [title]=\"row.permission?.sygms_name\">\n {{ row.permission?.sygms_name }}\n </div>\n }\n </div>\n </div>\n</ng-template>\n\n<!-- Menu Type Renderer Template -->\n<ng-template #menuTypeRendererTemplate let-row=\"row\" let-value=\"value\">\n <div class=\"tw-flex tw-items-center tw-justify-center\">\n @if (row.syme_type === 'module') {\n <span\n class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded-full tw-text-xs tw-font-medium tw-bg-blue-100 tw-text-blue-800\">\n Module\n </span>\n } @else if (row.syme_type === 'section') {\n <span\n class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded-full tw-text-xs tw-font-medium tw-bg-green-100 tw-text-green-800\">\n Section\n </span>\n } @else if (row.syme_type === 'menu') {\n <span\n class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded-full tw-text-xs tw-font-medium tw-bg-purple-100 tw-text-purple-800\">\n Menu\n </span>\n } @else {\n <span\n class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded-full tw-text-xs tw-font-medium tw-bg-gray-100 tw-text-gray-800\">\n {{ row.syme_type || 'Unknown' }}\n </span>\n }\n </div>\n</ng-template>\n\n<!-- Permissions Checkbox Renderer Template -->\n<ng-template #permissionsCheckboxRendererTemplate let-row=\"row\" let-value=\"value\">\n <div class=\"tw-flex tw-flex-wrap tw-gap-2 tw-max-w-full\">\n @if (row.syme_type === 'menu' && row?.syme_permissions_id_sygms && row?.syme_permissions_id_sygms.length > 0) {\n @for (permissionId of row?.syme_permissions_id_sygms || []; track permissionId) {\n <div class=\"tw-flex tw-items-center tw-space-x-1\">\n <div class=\"tw-flex tw-items-center tw-space-x-1\">\n <input type=\"checkbox\" [checked]=\"isPermissionSelected(row._id, permissionId)\" [disabled]=\"true\"\n class=\"tw-h-4 tw-w-4 tw-text-blue-600 tw-bg-gray-100 tw-border-gray-300 tw-rounded focus:tw-ring-blue-500\">\n <label class=\"tw-text-xs tw-text-gray-700\">\n {{ getPermissionById(permissionId)?.sygms_title || 'Unknown' }}\n </label>\n </div>\n </div>\n }\n } @else {\n <!-- Show green checkmark for parent menus with child permissions -->\n @if (row.syme_type === 'module' || row.syme_type === 'section' || row.syme_type === 'title') {\n @if (hasChildMenusWithPermissions(row._id)) {\n <div class=\"tw-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-bg-green-100 tw-rounded-full\">\n <cide-ele-icon class=\"tw-text-green-600\" size=\"sm\">\n check\n </cide-ele-icon>\n </div>\n } @else {\n <span class=\"tw-text-xs tw-text-gray-400\">N/A</span>\n }\n } @else {\n <span class=\"tw-text-xs tw-text-gray-400\">N/A</span>\n }\n }\n </div>\n</ng-template>\n\n<!-- Menu Rights Permissions Renderer Template -->\n<ng-template #menuRightsPermissionsRendererTemplate let-row=\"row\" let-value=\"value\">\n <div class=\"tw-flex tw-flex-wrap tw-gap-2 tw-max-w-full\">\n <!-- Role Rights Display -->\n @if (row.role_rights && row.role_rights.length > 0) {\n <div class=\"tw-mb-2\">\n <div class=\"tw-text-xs tw-text-gray-500 tw-mb-1\">Role Rights:</div>\n <div class=\"tw-flex tw-flex-wrap tw-gap-1\">\n @for (right of row.role_rights; track $index) {\n <span class=\"tw-inline-block tw-px-2 tw-py-1 tw-text-xs tw-bg-blue-100 tw-text-blue-800 tw-rounded\">\n {{ right }}\n </span>\n }\n </div>\n </div>\n }\n\n\n <!-- Exception Indicator -->\n @if (row.hasException) {\n <div class=\"tw-mt-2\">\n <span class=\"tw-inline-block tw-px-2 tw-py-1 tw-text-xs tw-bg-yellow-100 tw-text-yellow-800 tw-rounded\">\n Override\n </span>\n </div>\n } @else {\n <div class=\"tw-mt-2\">\n <span class=\"tw-text-xs tw-text-gray-400\">Default</span>\n </div>\n }\n </div>\n</ng-template>\n\n<!-- Permissions Renderer Template -->\n<ng-template #permissionsRendererTemplate let-row=\"row\" let-value=\"value\">\n <div class=\"tw-flex tw-flex-wrap tw-gap-2 tw-max-w-full\">\n @if (row._permissionValues && Object.keys(row._permissionValues).length > 0) {\n @for (permissionId of Object.keys(row._permissionValues); track permissionId) {\n <div class=\"tw-flex tw-items-center tw-space-x-2\">\n <cide-ele-input type=\"checkbox\" [ngModel]=\"row._permissionValues[permissionId].checked\"\n (ngModelChange)=\"onPermissionChangeSafe($event, row, permissionId)\"\n [id]=\"'permission-' + row._id + '-' + permissionId\" class=\"tw-h-4 tw-w-4\">\n </cide-ele-input>\n <label [for]=\"'permission-' + row._id + '-' + permissionId\" \n class=\"tw-text-xs tw-cursor-pointer\"\n [ngClass]=\"{\n 'tw-text-gray-700': row._permissionValues[permissionId].modified === row._permissionValues[permissionId].actual,\n 'tw-text-blue-600 tw-font-semibold': row._permissionValues[permissionId].modified !== row._permissionValues[permissionId].actual\n }\">\n {{ row._permissionValues[permissionId].permission?.sygms_title }}\n @if (row._permissionValues[permissionId].modified !== row._permissionValues[permissionId].actual) {\n <span class=\"tw-text-xs tw-text-orange-500 tw-ml-1\" title=\"Modified from role permission\">\n ({{ row._permissionValues[permissionId].actual ? '\u2713' : '\u2717' }})\n </span>\n }\n </label>\n </div>\n }\n } @else {\n <!-- No permissions to display - show N/A (permissions are already loaded, just empty) -->\n <span class=\"tw-text-xs tw-text-gray-400\">N/A</span>\n }\n </div>\n</ng-template>", styles: [":host ::ng-deep .entity-mapping-card{transition:all .2s ease}:host ::ng-deep .entity-mapping-card:hover{transform:translateY(-2px)}:host ::ng-deep .entity-mapping-card .cide-card-header{background:linear-gradient(135deg,#3b82f60d,#9333ea0d);border-bottom:1px solid rgba(59,130,246,.1)}:host ::ng-deep .dark .entity-mapping-card .cide-card-header{background:linear-gradient(135deg,#3b82f61a,#9333ea1a);border-bottom:1px solid rgba(59,130,246,.2)}:host ::ng-deep .entity-mapping-card .cide-card-header-content{font-weight:600}:host ::ng-deep .entity-mapping-card .cide-card-body{background:linear-gradient(180deg,#f9fafb80,#ffffff80)}:host ::ng-deep .dark .entity-mapping-card .cide-card-body{background:linear-gradient(180deg,#11182780,#1f293780)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1$2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CideInputComponent, selector: "cide-ele-input", inputs: ["fill", "label", "labelHide", "disabled", "clearInput", "labelPlacement", "labelDir", "placeholder", "leadingIcon", "trailingIcon", "helperText", "helperTextCollapse", "hideHelperAndErrorText", "errorText", "maxlength", "minlength", "required", "autocapitalize", "autocomplete", "type", "width", "id", "ngModel", "option", "min", "max", "step", "size"], outputs: ["ngModelChange"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput", "options", "multiple", "searchable", "showSearchInput", "loading", "valueKey", "labelKey", "treeView"], outputs: ["ngModelChange", "change", "searchChange"] }, { kind: "component", type: CideTextareaComponent, selector: "cide-ele-textarea", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "minlength", "maxlength", "rows", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput"], outputs: ["ngModelChange"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated", "adaptive"], 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", "name"] }, { kind: "component", type: CideEleDataGridComponent, selector: "cide-ele-data-grid", inputs: ["config", "templateRenderers", "customFormatters", "actionHandlers", "serverSidePagination", "totalServerItems", "currentServerPage", "currentServerPageSize", "dragDropEnabled"], outputs: ["gridEvent"] }, { kind: "component", type: CideEleToastNotificationComponent, selector: "cide-ele-toast-notification" }, { kind: "component", type: CideFormFieldErrorComponent, selector: "cide-form-field-error", inputs: ["control", "formGroup", "fieldName", "customMessages"] }, { kind: "component", type: CideLytSharedWrapperComponent, selector: "cide-lyt-shared-wrapper", inputs: ["shared_wrapper_setup_param", "breadcrumb_data"] }, { kind: "component", type: CideEleCardComponent, selector: "cide-ele-card", inputs: ["title", "subtitle", "cardConfig"], outputs: ["stateChange", "collapsed", "minimized", "maximized", "removed", "headerClick"] }] });
|
|
17610
17596
|
}
|
|
17611
17597
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideCoreUserCreateComponent, decorators: [{
|
|
17612
17598
|
type: Component,
|
|
@@ -17627,7 +17613,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
17627
17613
|
CideFormFieldErrorComponent,
|
|
17628
17614
|
CideLytSharedWrapperComponent,
|
|
17629
17615
|
CideEleCardComponent
|
|
17630
|
-
], template: "<!-- \n ENTERPRISE USER MASTER FORM\n \n Enterprise-Level Styling with Tailwind CSS\n Features: Responsive grids, proper typography, enhanced user experience\n-->\n\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: pageCode() }\" [breadcrumb_data]=\"breadcrumbData()\">\n <div class=\"tw-w-full tw-h-full tw-p-1 tw-pt-2\">\n <!-- Toast Notifications -->\n <cide-ele-toast-notification></cide-ele-toast-notification>\n \n <form class=\"tw-max-w-7xl tw-mx-auto tw-bg-transparent\" [formGroup]=\"userMasterForm\" [class.tw-opacity-60]=\"loading()\"\n (ngSubmit)=\"onSubmit()\">\n\n\n <!-- User Context Header -->\n <div\n class=\"tw-bg-gradient-to-r tw-from-blue-50 tw-to-indigo-50 tw-border tw-border-blue-200 tw-rounded-md tw-p-1 tw-mb-2 tw-shadow-sm\">\n <div class=\"tw-flex tw-items-center tw-justify-between tw-flex-wrap tw-gap-2\">\n <!-- User Basic Info Display -->\n <div class=\"tw-flex tw-items-center tw-gap-3 tw-flex-wrap\">\n <!-- Profile Photo Preview -->\n <div class=\"tw-flex tw-items-center tw-gap-2\">\n <div\n class=\"tw-w-8 tw-h-8 tw-rounded-full tw-bg-blue-100 tw-border tw-border-blue-200 tw-flex tw-items-center tw-justify-center tw-overflow-hidden\">\n @if (userMasterForm.get('user_photo_id_cyfm')?.value) {\n <img cideEleFileImage [fileId]=\"userMasterForm.get('user_photo_id_cyfm')?.value\"\n [altText]=\"'Profile Photo'\" class=\"tw-w-full tw-h-full tw-object-cover\">\n } @else {\n <cide-ele-icon name=\"person\" class=\"tw-w-5 tw-h-5 tw-text-blue-600\">\n </cide-ele-icon>\n }\n </div>\n <div class=\"tw-flex tw-flex-col\">\n <span class=\"tw-text-xs tw-font-medium tw-text-blue-900\">\n {{ getUserFullName() || 'New User' }}\n </span>\n <span class=\"tw-text-xs tw-text-blue-600\">\n {{ getUserUsername() || 'Username not set' }}\n </span>\n </div>\n </div>\n\n <!-- Contact Info -->\n <div class=\"tw-flex tw-items-center tw-gap-3\">\n <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-xs tw-text-gray-700\">\n <cide-ele-icon variant=\"gray\" size=\"xs\">email</cide-ele-icon>\n <span>{{ getUserEmail() || 'Email not set' }}</span>\n </div>\n <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-xs tw-text-gray-700\">\n <cide-ele-icon variant=\"gray\" size=\"xs\">phone</cide-ele-icon>\n <span>{{ getUserMobile() || 'Mobile not set' }}</span>\n </div>\n </div>\n\n <!-- Active Status -->\n <div class=\"tw-flex tw-items-center tw-gap-1\">\n @if (getUserActiveStatus()) {\n <span\n class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded tw-text-xs tw-font-medium tw-bg-green-100 tw-text-green-700\">\n <cide-ele-icon variant=\"green\" size=\"xs\" class=\"tw-mr-1\">check_circle</cide-ele-icon>\n Active\n </span>\n } @else {\n <span\n class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded tw-text-xs tw-font-medium tw-bg-red-100 tw-text-red-700\">\n <cide-ele-icon variant=\"red\" size=\"xs\" class=\"tw-mr-1\">cancel</cide-ele-icon>\n Inactive\n </span>\n }\n </div>\n </div>\n\n <!-- Entity Info -->\n <div class=\"tw-flex tw-items-center tw-gap-2\">\n @if (hasDefaultEntity()) {\n <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-xs tw-text-blue-700\">\n <cide-ele-icon variant=\"blue\" size=\"xs\">business</cide-ele-icon>\n <span class=\"tw-font-medium\">{{ getDefaultEntityName() }}</span>\n </div>\n } @else {\n <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-xs tw-text-gray-500\">\n <cide-ele-icon variant=\"gray\" size=\"xs\">business</cide-ele-icon>\n <span class=\"tw-italic\">No entity</span>\n </div>\n }\n\n <span class=\"tw-text-xs tw-text-gray-600 tw-px-2 tw-py-1 tw-bg-gray-100 tw-rounded\">\n {{ getEntityMappingCount() }} mapping(s)\n </span>\n </div>\n </div>\n </div>\n\n <!-- Tab Navigation -->\n <div class=\"tw-p-0 tw-mb-2 tw-border-b tw-border-gray-200\">\n <cide-ele-tab [tabs]=\"userTabs()\" [activeTabId]=\"activeTab()\" size=\"md\" variant=\"default\"\n (tabChange)=\"onTabChange($event)\">\n </cide-ele-tab>\n </div>\n\n <!-- Tab Content -->\n <div class=\"tw-transition-opacity tw-duration-300\" [class.tw-opacity-60]=\"loading()\">\n @switch (activeTab()) {\n\n @case ('basic') {\n <!-- User Basic Information Section -->\n <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\n\n <!-- Top Section: Form Fields on Left, Profile Photo on Right -->\n <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-[1fr_200px] tw-gap-4 tw-mb-4\">\n <!-- Left Side: Form Fields -->\n <div class=\"tw-space-y-4\">\n <!-- Name Fields - All in One Row -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-4\">\n <cide-ele-input id=\"user_firstname\" label=\"First Name\" formControlName=\"user_firstname\"\n placeholder=\"Enter first name\" [maxlength]=\"20\" size=\"md\" (ngModelChange)=\"onNameFieldChange()\">\n </cide-ele-input>\n\n <cide-ele-input id=\"user_middlename\" label=\"Middle Name\" formControlName=\"user_middlename\"\n placeholder=\"Enter middle name\" [maxlength]=\"20\" size=\"md\" (ngModelChange)=\"onNameFieldChange()\">\n </cide-ele-input>\n\n <cide-ele-input id=\"user_lastname\" label=\"Last Name\" formControlName=\"user_lastname\"\n placeholder=\"Enter last name\" [maxlength]=\"20\" size=\"md\" (ngModelChange)=\"onNameFieldChange()\">\n </cide-ele-input>\n\n <cide-ele-input id=\"user_fullname\" label=\"Full Name (Auto-generated)\" formControlName=\"user_fullname\"\n placeholder=\"Auto-generated from name fields or enter manually\" [maxlength]=\"62\" size=\"md\">\n </cide-ele-input>\n </div>\n\n <!-- Contact Information - All in One Row -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-3 tw-gap-4\">\n <cide-ele-input id=\"user_username\" label=\"Username\" formControlName=\"user_username\"\n placeholder=\"Enter unique username\" [maxlength]=\"20\" size=\"md\">\n </cide-ele-input>\n\n <cide-ele-input id=\"user_emailid\" label=\"Email ID\" formControlName=\"user_emailid\" type=\"email\"\n placeholder=\"Enter valid email address\" [maxlength]=\"320\" size=\"md\">\n </cide-ele-input>\n\n <cide-ele-input id=\"user_mobileno\" label=\"Mobile Number\" formControlName=\"user_mobileno\" type=\"tel\"\n placeholder=\"Enter mobile number\" [maxlength]=\"15\" size=\"md\">\n </cide-ele-input>\n </div>\n\n <!-- User Type Mapping -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\n <cide-ele-select\n id=\"syutm_user_type\"\n label=\"User Type\"\n placeholder=\"Select user type\"\n [options]=\"userTypeOptions\"\n valueKey=\"value\"\n labelKey=\"label\"\n formControlName=\"syutm_user_type\"\n size=\"md\">\n </cide-ele-select>\n\n @if (showTypeSpecificId()) {\n <cide-ele-input\n id=\"syutm_type_specific_id\"\n label=\"Type-Specific ID\"\n placeholder=\"Auto-generated (e.g., STU001, TCH001)\"\n formControlName=\"syutm_type_specific_id\"\n [maxlength]=\"50\"\n size=\"md\"\n [disabled]=\"true\">\n </cide-ele-input>\n }\n </div>\n </div>\n\n <!-- Right Side: Profile Photo Upload -->\n <div class=\"tw-flex tw-items-start tw-justify-center tw-p-0\">\n <cide-ele-file-input id=\"user_photo_id_cyfm\" formControlName=\"user_photo_id_cyfm\" accept=\"image/*\"\n [showPreview]=\"true\" [previewBoxMode]=\"true\" [showFileName]=\"false\" previewWidth=\"180px\"\n previewHeight=\"120px\" placeholderText=\"Upload Photo\" placeholderIcon=\"cloud_upload\" [autoUpload]=\"true\"\n [uploadData]=\"getProfilePhotoUploadData()\" (uploadSuccess)=\"onProfilePhotoUploadSuccess($event)\"\n (uploadError)=\"onProfilePhotoUploadError($event)\"\n (uploadProgressChange)=\"onProfilePhotoUploadProgress($event)\">\n </cide-ele-file-input>\n </div>\n </div>\n\n\n\n <!-- Status Control -->\n <div class=\"tw-grid tw-grid-cols-1 tw-mb-2\">\n <div class=\"tw-p-2 tw-bg-blue-50 tw-border tw-border-blue-100 tw-rounded-lg\">\n <label\n class=\"tw-flex tw-flex-col tw-cursor-pointer tw-py-2 tw-bg-transparent tw-border-none tw-rounded-none tw-transition-all tw-duration-200 hover:tw-bg-blue-75\">\n <cide-ele-input type=\"checkbox\" label=\"Active User Status\" formControlName=\"user_isactive\"\n class=\"tw-h-5 tw-accent-blue-500 tw-rounded tw-mb-1\" />\n <span class=\"tw-font-semibold tw-text-gray-700 tw-text-base\"></span>\n <span class=\"tw-text-sm tw-text-gray-600 tw-mt-1 tw-leading-relaxed\">Enable this user account for system\n access and operations</span>\n </label>\n </div>\n </div>\n </div>\n }\n\n @case ('auth') {\n <!-- Authentication Section -->\n <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\n <!-- Password Fields -->\n @if (shouldShowPasswordFields()) {\n <div class=\"tw-mb-4\">\n <!-- Password Fields Header for Edit Mode -->\n @if (isEditMode()) {\n <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\n <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-800\">Update Password</h6>\n <button type=\"button\"\n class=\"tw-px-3 tw-py-1 tw-bg-gray-100 tw-text-gray-600 tw-border tw-border-gray-300 tw-rounded-md tw-text-xs tw-font-medium hover:tw-bg-gray-200 tw-transition-colors\"\n (click)=\"cancelPasswordUpdate()\">\n Cancel Password Update\n </button>\n </div>\n }\n\n <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-2 md:tw-grid-cols-1 tw-gap-6\">\n <cide-ele-input id=\"user_password\" [label]=\"getPasswordFieldLabel()\" formControlName=\"user_password\"\n type=\"password\" placeholder=\"Enter secure password (min 8 characters)\" size=\"md\">\n </cide-ele-input>\n\n <cide-ele-input id=\"user_confirm_password\" [label]=\"getPasswordConfirmLabel()\"\n formControlName=\"user_confirm_password\" type=\"password\" placeholder=\"Confirm your password\" size=\"md\">\n </cide-ele-input>\n </div>\n </div>\n }\n\n <!-- Password Update Option for Edit Mode -->\n @if (isEditMode() && !shouldShowPasswordFields()) {\n <div class=\"tw-mb-4\">\n <div class=\"tw-p-2 tw-bg-blue-50 tw-border tw-border-blue-200 tw-rounded-lg\">\n <h6 class=\"tw-text-sm tw-font-semibold tw-text-blue-800 tw-mb-2\">Password Update</h6>\n <p class=\"tw-text-sm tw-text-blue-600 tw-mb-3\">Current password will be kept. Click below to change\n password.</p>\n\n @if (hasPasswordInput()) {\n <div\n class=\"tw-mb-3 tw-p-2 tw-bg-yellow-50 tw-border tw-border-yellow-200 tw-rounded tw-text-sm tw-text-yellow-700\">\n <cide-ele-icon variant=\"yellow\" size=\"xs\" class=\"tw-mr-1\">warning</cide-ele-icon>\n Password fields contain text. Click \"Change Password\" to manage existing input.\n </div>\n }\n\n <button type=\"button\"\n class=\"tw-px-4 tw-py-2 tw-bg-blue-100 tw-text-blue-700 tw-border tw-border-blue-300 tw-rounded-md tw-text-sm tw-font-medium hover:tw-bg-blue-200 tw-transition-colors\"\n (click)=\"triggerPasswordUpdate()\">\n @if (hasPasswordInput()) {\n Manage Password Fields\n } @else {\n Change Password\n }\n </button>\n </div>\n </div>\n }\n\n <!-- Password Options -->\n <div class=\"tw-grid tw-grid-cols-1 tw-gap-4 tw-mb-4\">\n <div class=\"tw-p-2 tw-bg-yellow-50 tw-border tw-border-yellow-100 tw-rounded-lg\">\n <label\n class=\"tw-flex tw-flex-col tw-gap-2 tw-cursor-pointer tw-py-2 tw-bg-transparent tw-border-none tw-rounded-none tw-transition-all tw-duration-200\">\n <cide-ele-input type=\"checkbox\" label=\"Force Password Change on Login\"\n formControlName=\"user_passwordchangeonlogin\" class=\"tw-h-5 tw-accent-yellow-500 tw-rounded tw-mb-1\" />\n <span class=\"tw-text-sm tw-text-gray-600 tw-mt-1 tw-leading-relaxed\">User will be required to change\n password on next login</span>\n </label>\n </div>\n </div>\n\n </div>\n }\n\n @case ('roles') {\n <!-- Entity, Roles & Permissions Mapping Section -->\n <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\n\n\n\n <!-- Important Note -->\n <div class=\"tw-bg-amber-50 tw-border tw-border-amber-200 tw-rounded-lg tw-p-2 tw-mb-4\">\n <div class=\"tw-flex tw-items-start tw-gap-3\">\n <cide-ele-icon variant=\"amber\" size=\"lg\">info</cide-ele-icon>\n <div class=\"tw-flex-1\">\n <h4 class=\"tw-text-sm tw-font-semibold tw-text-amber-800 tw-mb-1\">Entity-Role Based Access</h4>\n <p class=\"tw-text-sm tw-text-amber-700 tw-mb-2\">User access is completely managed through entity-role\n mappings below. At least one entity mapping is required for user access.</p>\n @if (hasDefaultEntity()) {\n <div class=\"tw-flex tw-items-center tw-gap-2 tw-mt-2 tw-p-2 tw-bg-amber-100 tw-rounded\">\n <cide-ele-icon variant=\"amber\" size=\"sm\">star</cide-ele-icon>\n <span class=\"tw-text-sm tw-text-amber-800\">\n <strong>Default Entity:</strong> {{ getDefaultEntityName() }}\n </span>\n </div>\n } @else {\n <div class=\"tw-text-sm tw-text-amber-600 tw-mt-2 tw-italic\">\n \u26A0\uFE0F No default entity selected. Please set one entity as default.\n </div>\n }\n </div>\n </div>\n </div>\n\n <!-- Entity-Role Mapping Section -->\n <div class=\"tw-flex tw-text-center tw-justify-between tw-items-center tw-mb-4\">\n <div>\n <h4 class=\"tw-text-sm tw-text-left tw-font-semibold tw-text-blue-900 tw-mb-1\">Entity-Role Mapping</h4>\n <p class=\"tw-text-sm tw-text-blue-700\">Map user to entities with specific roles and permissions</p>\n </div>\n <div class=\"tw-flex tw-flex-col tw-items-end\">\n <button cideEleButton variant=\"primary\" size=\"md\" type=\"button\" (click)=\"addEntityMapping()\"\n leftIcon=\"add\" [disabled]=\"isViewingOwnProfile() || isAllEntitiesMapped()\"\n [title]=\"isViewingOwnProfile() ? 'You cannot modify your own entity mappings' : (isAllEntitiesMapped() ? 'All entities are mapped' : 'Add Entity Mapping')\">\n Add Entity Mapping\n </button>\n\n @if (isViewingOwnProfile()) {\n <div class=\"tw-mt-2 tw-p-2 tw-bg-amber-50 tw-border tw-border-amber-200 tw-rounded-md tw-max-w-xs\">\n <p class=\"tw-text-xs tw-text-amber-700\">\n <cide-ele-icon variant=\"warning\" size=\"xs\" class=\"tw-mr-1\">lock</cide-ele-icon>\n You cannot modify your own entity mappings.\n </p>\n </div>\n } @else if (isAllEntitiesMapped()) {\n <div class=\"tw-mt-2 tw-p-2 tw-bg-blue-50 tw-border tw-border-blue-200 tw-rounded-md tw-max-w-xs\">\n <p class=\"tw-text-xs tw-text-blue-700\">\n <cide-ele-icon variant=\"info\" size=\"xs\" class=\"tw-mr-1\">info</cide-ele-icon>\n All available entities are already mapped.\n </p>\n </div>\n }\n </div>\n </div>\n\n <div formArrayName=\"core_entity_mapping\">\n @for (mapping of entityMappings(); track mapping.syenm_entity_id_syen?._id || mapping.syenm_entity_id_syen || $index; let i = $index) {\n <cide-ele-card\n [title]=\"getEntityNameFromMapping(i) || 'Entity Mapping ' + (i + 1)\"\n [subtitle]=\"mapping.syenm_isdefault ? 'Primary Entity' : ''\"\n [cardConfig]=\"{\n collapsible: true,\n minimizable: false,\n maximizable: false,\n removable: !mapping?._id && !isViewingOwnProfile(),\n defaultState: 'collapsed',\n showHeader: true,\n showFooter: false,\n variant: 'default',\n size: 'sm',\n shadow: true,\n rounded: true,\n bordered: true\n }\"\n (stateChange)=\"onEntityMappingCardStateChange($event, i)\"\n (removed)=\"removeEntityMapping(i)\"\n class=\"tw-mb-2 entity-mapping-card tw-block\">\n \n <div [formGroupName]=\"i\">\n \n <!-- Card Content -->\n <div class=\"tw-space-y-3\">\n <!-- Hidden form control to maintain form structure for entity -->\n <input type=\"hidden\" [formControlName]=\"'syenm_entity_id_syen'\" />\n \n <!-- Role, Default, Active, and User Type in One Row -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-4 tw-gap-3\">\n <!-- Role Selection with Copy Button -->\n <div class=\"tw-flex tw-flex-col\">\n <cide-ele-select label=\"Role for this Entity\" [options]=\"getRoleOptionsForEntity(i)\"\n formControlName=\"syenm_role_id_syusrol\" valueKey=\"_id\" labelKey=\"syusrol_role_name\"\n placeholder=\"Select role for this entity\" size=\"md\" (change)=\"onRoleChange(i, $event)\">\n </cide-ele-select>\n @if (!isViewingOwnProfile() && entityMappings().length > 1) {\n <button \n type=\"button\"\n (click)=\"showCopyRoleFromEntityDrawer(i)\"\n class=\"tw-mt-1 tw-text-xs tw-text-blue-600 hover:tw-text-blue-800 tw-flex tw-items-center tw-gap-1 tw-w-fit tw-transition-colors\"\n title=\"Copy role and settings from another entity mapping\">\n <cide-ele-icon variant=\"blue\" size=\"xs\">content_copy</cide-ele-icon>\n <span>Copy from Entity</span>\n </button>\n }\n </div>\n \n <!-- Primary Entity Checkbox -->\n <div class=\"tw-flex tw-flex-col tw-justify-end\">\n <div class=\"tw-flex tw-items-center tw-gap-2 tw-px-3 tw-py-2 tw-rounded-md tw-border tw-border-green-300 tw-bg-green-50 dark:tw-bg-green-900/30 dark:tw-border-green-700\" (click)=\"$event.stopPropagation()\">\n <input \n type=\"checkbox\" \n [checked]=\"mapping.syenm_isdefault\"\n (change)=\"onDefaultEntityChange(i, $event)\" \n class=\"tw-h-4 tw-w-4 tw-accent-green-600 tw-cursor-pointer\" />\n <label class=\"tw-inline-flex tw-items-center tw-gap-1 tw-text-xs tw-font-semibold tw-text-green-700 dark:tw-text-green-300 tw-cursor-pointer\">\n <cide-ele-icon variant=\"green\" size=\"xs\" class=\"!tw-text-green-600 dark:!tw-text-green-400\">star</cide-ele-icon>\n DEFAULT\n </label>\n </div>\n </div>\n \n <!-- Active Mapping Checkbox -->\n <div class=\"tw-flex tw-flex-col tw-justify-end\">\n <div class=\"tw-flex tw-items-center tw-gap-2 tw-px-3 tw-py-2 tw-rounded-md tw-border tw-border-blue-300 tw-bg-blue-50 dark:tw-bg-blue-900/30 dark:tw-border-blue-700\" (click)=\"$event.stopPropagation()\">\n <input \n type=\"checkbox\" \n [checked]=\"mapping.syenm_isactive\"\n (change)=\"onActiveMappingChange(i, $event)\" \n class=\"tw-h-4 tw-w-4 tw-accent-blue-600 tw-cursor-pointer\" />\n <label class=\"tw-inline-flex tw-items-center tw-gap-1 tw-text-xs tw-font-semibold tw-text-blue-700 dark:tw-text-blue-300 tw-cursor-pointer\">\n <cide-ele-icon variant=\"blue\" size=\"xs\" class=\"!tw-text-blue-600 dark:!tw-text-blue-400\">check_circle</cide-ele-icon>\n Active\n </label>\n </div>\n </div>\n \n <!-- User Type Mappings -->\n <div class=\"tw-flex tw-flex-col tw-justify-end\">\n <div class=\"tw-flex tw-items-center tw-gap-1.5 tw-flex-wrap\">\n @if (getEntityIdFromMapping(i)) {\n @if (getUserTypeMappingsForEntity(getEntityIdFromMapping(i)).length > 0) {\n @for (typeMapping of getUserTypeMappingsForEntity(getEntityIdFromMapping(i)); track typeMapping._id || typeMapping.syutm_type_specific_id) {\n <span class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded tw-text-[10px] tw-font-medium tw-bg-purple-50 dark:tw-bg-purple-900/30 tw-text-gray-900 dark:tw-text-gray-100 tw-border tw-border-purple-300 dark:tw-border-purple-700\">\n <cide-ele-icon variant=\"purple\" size=\"xs\" class=\"tw-mr-1 !tw-text-purple-600 dark:!tw-text-purple-400\">person</cide-ele-icon>\n {{ typeMapping.syutm_user_type }}\n @if (typeMapping.syutm_isactive) {\n <span class=\"tw-ml-1 tw-w-1.5 tw-h-1.5 tw-rounded-full tw-bg-green-600\"></span>\n }\n </span>\n }\n }\n }\n </div>\n </div>\n </div>\n\n\n <!-- Entity-Specific Details and Active Period - All in One Row -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-3\">\n <cide-ele-select label=\"Department for this Entity\" [options]=\"getDepartmentOptionsForEntity(i)\"\n formControlName=\"syenm_department_id_sydept\" (change)=\"onDepartmentChange($event)\" valueKey=\"_id\"\n labelKey=\"sydept_name\" placeholder=\"Select department\" size=\"md\">\n </cide-ele-select>\n\n <cide-ele-select label=\"Designation for this Entity\" [options]=\"getDesignationOptionsForEntity(i)\"\n valueKey=\"_id\" labelKey=\"sydsg_name\" formControlName=\"syenm_designation_id_sydsg\"\n placeholder=\"Select designation\" size=\"md\">\n </cide-ele-select>\n\n <cide-ele-input label=\"Active From\" [id]=\"'syenm_activefrom['+i+']'\"\n formControlName=\"syenm_activefrom\" type=\"date\" size=\"md\">\n </cide-ele-input>\n\n <cide-ele-input label=\"Active Until\" [id]=\"'syenm_activeupto['+i+']'\"\n formControlName=\"syenm_activeupto\" type=\"date\" size=\"md\">\n </cide-ele-input>\n </div>\n\n <!-- Menu Rights Grid for this Entity-Role -->\n <div class=\"tw-border-t tw-border-gray-200\">\n\n @if (getMenuRightsForMapping(i).length > 0) {\n <!-- Menu Rights Tree Grid -->\n\n <cide-ele-data-grid [config]=\"getMenuRightsGridConfig(i)\"\n [templateRenderers]=\"getMenuRightsTemplateRenderers(i)\"\n (gridEvent)=\"onMenuRightsGridEvent($event, i)\" class=\"tw-h-96 tw-w-full\">\n </cide-ele-data-grid>\n\n } @else {\n <div class=\"tw-text-center tw-py-8 tw-bg-gray-50 tw-border tw-border-gray-200 tw-rounded-lg\">\n <div class=\"tw-text-gray-400 tw-mb-3\">\n <cide-ele-icon variant=\"gray\" size=\"lg\">menu</cide-ele-icon>\n </div>\n <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-600 tw-mb-2\">No Menu Rights Available</h6>\n <p class=\"tw-text-xs tw-text-gray-500 tw-mb-3 tw-text-center\">Select both entity and role to\n automatically load\n menu rights for this mapping.</p>\n </div>\n }\n </div>\n </div>\n </div>\n </cide-ele-card>\n }\n </div>\n\n @if (entityMappings().length === 0) {\n <div class=\"tw-text-center tw-py-8 tw-bg-white tw-border tw-border-blue-200 tw-rounded-lg\">\n <div class=\"tw-text-blue-400 tw-mb-3\">\n <cide-ele-icon variant=\"blue\" size=\"lg\">business</cide-ele-icon>\n </div>\n <h4 class=\"tw-text-sm tw-font-medium tw-text-blue-800 tw-mb-2\">No Entity Mappings</h4>\n <p class=\"tw-text-blue-600 tw-mb-4 tw-text-center\">Add entity mappings to assign specific roles and\n permissions for different entities.</p>\n @if (!isViewingOwnProfile()) {\n <button class=\"tw-mx-auto\" cideEleButton variant=\"primary\" size=\"md\" type=\"button\"\n (click)=\"addEntityMapping()\" leftIcon=\"add\">\n Add First Entity Mapping\n </button>\n } @else {\n <p class=\"tw-text-amber-600 tw-text-sm tw-font-medium\">\n <cide-ele-icon variant=\"warning\" size=\"xs\" class=\"tw-mr-1\">lock</cide-ele-icon>\n You cannot modify your own entity mappings.\n </p>\n }\n </div>\n }\n </div>\n }\n\n @case ('addresses') {\n <!-- Contact Addresses Section -->\n <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\n <div class=\"tw-flex tw-justify-end\">\n <div class=\"tw-flex tw-justify-between tw-items-end tw-mb-2 tw-gap-4\">\n <button cideEleButton variant=\"primary\" size=\"md\" type=\"button\" (click)=\"addContactAddress()\"\n leftIcon=\"add\" [disabled]=\"!hasAddContactAddressRights()\">\n Add New Address\n </button>\n </div>\n </div>\n\n <div formArrayName=\"core_user_contact_addresses\">\n @for (address of contactAddresses(); track $index; let i = $index) {\n <div [formGroupName]=\"i\"\n class=\"tw-bg-white tw-border tw-border-gray-200 tw-rounded-xl tw-mb-8 tw-overflow-hidden tw-transition-all tw-duration-300 hover:tw-shadow-lg tw-shadow-sm\">\n <div\n class=\"tw-bg-gradient-to-r tw-from-gray-50 tw-to-gray-100 tw-px-4 tw-py-2 tw-flex tw-justify-between tw-items-center tw-border-b tw-border-gray-200\">\n <!-- Use address type as header instead of generic \"Address X\" -->\n <h4 class=\"tw-m-0 tw-text-gray-700 tw-text-sm tw-font-semibold tw-tracking-tight\">\n {{ getAddressTypeLabel(i) || ('Address ' + (i + 1)) }}\n </h4>\n <div class=\"tw-flex tw-items-center tw-gap-2\">\n @if (isAddressOwner(i)) {\n <button cideEleButton variant=\"secondary\" size=\"xs\" type=\"button\" (click)=\"shareAddress(i)\"\n leftIcon=\"share\" class=\"tw-text-blue-600 hover:tw-text-blue-700\">\n Share\n </button>\n }\n @if (!address?._id) {\n <button cideEleButton variant=\"danger\" size=\"sm\" type=\"button\" (click)=\"removeContactAddress(i)\"\n leftIcon=\"delete\">\n Remove\n </button>\n }\n </div>\n </div>\n <div class=\"tw-p-4\">\n <!-- Main Layout: Inputs on Left, Address Textarea on Right -->\n <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-4 tw-gap-3 tw-mb-3\">\n \n <!-- Left Side: Input Fields (3/4 width) -->\n <div class=\"lg:tw-col-span-3\">\n <!-- Row 1: Address Type, Contact Person -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3 tw-mb-3\">\n <cide-ele-select label=\"Address Type\" [options]=\"addressTypeOptions()\" id=\"sycad_address_type_id_sygms\"\n formControlName=\"sycad_address_type_id_sygms\" placeholder=\"Select type\" size=\"sm\"\n valueKey=\"_id\" labelKey=\"sygms_title\" (change)=\"onAddressTypeChange(i)\">\n </cide-ele-select>\n\n <cide-ele-input label=\"Contact Person\" formControlName=\"sycad_contact_person_name\"\n placeholder=\"Enter contact person\" size=\"sm\">\n </cide-ele-input>\n </div>\n\n <!-- Row 2: Postal Code, City, State, Country -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-4 tw-gap-3\">\n <cide-ele-select label=\"Postal Code\" [options]=\"addressPostalCodes()[i] || []\"\n formControlName=\"sycad_contact_pin_sypin\" placeholder=\"Select postal code\" [searchable]=\"true\"\n [loading]=\"addressPostalCodesLoading()[i] || false\" (searchChange)=\"onPostalCodeSearch($event, i)\"\n (change)=\"onPostalCodeSelection($event, i)\" size=\"sm\">\n </cide-ele-select>\n\n <cide-ele-input label=\"City\" formControlName=\"sycad_contact_city_sypin\" placeholder=\"Enter city\"\n size=\"sm\">\n </cide-ele-input>\n\n <cide-ele-input label=\"State\" formControlName=\"sycad_contact_state_sypin\" placeholder=\"Enter state\"\n size=\"sm\">\n </cide-ele-input>\n\n <cide-ele-select label=\"Country\" [options]=\"addressCountries()[i] || []\"\n formControlName=\"sycad_contact_country_syctr\" placeholder=\"Select country\" valueKey=\"_id\"\n labelKey=\"syctr_country_iso_name\" [searchable]=\"true\" (searchChange)=\"onCountrySearch($event, i)\"\n [loading]=\"addressCountriesLoading()[i] || false\" size=\"sm\">\n </cide-ele-select>\n </div>\n </div>\n\n <!-- Right Side: Address Textarea (1/4 width, spans 2 rows) -->\n <div class=\"lg:tw-col-span-1 lg:tw-row-span-2 tw-flex tw-flex-col\">\n <cide-ele-textarea label=\"Complete Address\" formControlName=\"sycad_contact_address\"\n placeholder=\"Enter complete address with area, city, and landmarks\" [rows]=\"4\" size=\"sm\"\n class=\"tw-h-full\">\n </cide-ele-textarea>\n </div>\n </div>\n\n <!-- Contact Details: Primary Phone, Alt Phone, Fax, Primary Email in 4 columns -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-4 tw-gap-3 tw-mb-3\">\n <cide-ele-input label=\"Primary Phone\" formControlName=\"sycad_contact_phone\" type=\"tel\"\n placeholder=\"Primary phone\" size=\"sm\">\n </cide-ele-input>\n\n <cide-ele-input label=\"Alternate Phone\" formControlName=\"sycad_contact_phone_alt\" type=\"tel\"\n placeholder=\"Alternate phone\" size=\"sm\">\n </cide-ele-input>\n\n <cide-ele-input label=\"Fax Number\" formControlName=\"sycad_contact_fax\" placeholder=\"Fax number\"\n size=\"sm\">\n </cide-ele-input>\n\n <cide-ele-input label=\"Primary Email\" formControlName=\"sycad_contact_email\" type=\"email\"\n placeholder=\"Primary email\" size=\"sm\">\n </cide-ele-input>\n </div>\n\n <!-- Alternate Email in single row -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3\">\n <cide-ele-input label=\"Alternate Email\" formControlName=\"sycad_contact_email_alt\" type=\"email\"\n placeholder=\"Alternate email address\" size=\"sm\">\n </cide-ele-input>\n </div>\n </div>\n </div>\n }\n </div>\n </div>\n }\n\n @case ('documents') {\n <!-- Documents Section -->\n <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\n <div class=\"tw-flex tw-justify-end tw-items-end tw-mb-2 tw-gap-4\">\n <button cideEleButton variant=\"primary\" size=\"md\" type=\"button\" (click)=\"addDocument()\" leftIcon=\"add\" [disabled]=\"!hasAddDocumentRights()\">\n Add Document\n </button>\n </div>\n <div formArrayName=\"core_user_documents\">\n @for (doc of documents(); track $index; let i = $index) {\n <div [formGroupName]=\"i\"\n class=\"tw-bg-white tw-border tw-border-gray-200 tw-rounded-xl tw-mb-8 tw-overflow-hidden tw-transition-all tw-duration-300 hover:tw-shadow-lg tw-shadow-sm\">\n <div\n class=\"tw-bg-gradient-to-r tw-from-gray-50 tw-to-gray-100 tw-px-4 tw-py-2 tw-flex tw-justify-between tw-items-center tw-border-b tw-border-gray-200\">\n <h4 class=\"tw-m-0 tw-text-gray-700 tw-text-sm tw-font-semibold tw-tracking-tight\">\n {{ getDocumentTypeLabel(i) || ('Document ' + (i + 1)) }}\n </h4>\n <div class=\"tw-flex tw-gap-2\">\n @if (doc?._id) {\n <button cideEleButton variant=\"secondary\" size=\"sm\" type=\"button\" (click)=\"shareDocumentRights(i)\"\n leftIcon=\"share\">\n Share\n </button>\n }\n </div>\n </div>\n <div class=\"tw-p-4\">\n <!-- Main Layout: Inputs on Left, File Upload on Right -->\n <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-3 tw-gap-4\">\n \n <!-- Left Side: Document Information (2/3 width) -->\n <div class=\"lg:tw-col-span-2\">\n <!-- Row 1: Document Type, Document Number, Name as per Document -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-3 tw-mb-3\">\n <cide-ele-select label=\"Document Type\" [options]=\"documentTypeOptions()\"\n formControlName=\"syusd_document_type_id_sygms\" placeholder=\"Select type\" size=\"sm\"\n valueKey=\"_id\" labelKey=\"sygms_title\" (change)=\"onDocumentTypeChange(i)\">\n </cide-ele-select>\n\n <cide-ele-input label=\"Document Number\" formControlName=\"syusd_doc_number\"\n placeholder=\"Document number\" size=\"sm\">\n </cide-ele-input>\n\n <cide-ele-input label=\"Name as per Document\" formControlName=\"syusd_doc_name_as_per_doc\"\n placeholder=\"Name on document\" size=\"sm\">\n </cide-ele-input>\n </div>\n\n <!-- Row 2: Issue Date, Expiry Date, Photo Group -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-3 tw-mb-3\">\n <cide-ele-input label=\"Issue Date\" formControlName=\"syusd_doc_issue_date\"\n [id]=\"'syusd_doc_issue_date['+i+']'\" type=\"date\" size=\"sm\">\n </cide-ele-input>\n\n <cide-ele-input label=\"Expiry Date\" formControlName=\"syusd_doc_expiry_date\"\n [id]=\"'syusd_doc_expiry_date['+i+']'\" type=\"date\" size=\"sm\">\n </cide-ele-input>\n </div>\n\n <!-- Row 3: Verification Status, KYC Status -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3\">\n <cide-ele-select label=\"Verification Status\" [options]=\"documentVerificationStatusOptions()\"\n formControlName=\"syusd_doc_verification_status_id_sygms\" placeholder=\"Select status\"\n size=\"sm\" valueKey=\"_id\" labelKey=\"sygms_title\">\n </cide-ele-select>\n\n <cide-ele-select label=\"KYC Status\" [options]=\"documentKycStatusOptions()\"\n formControlName=\"syusd_doc_kyc_status_id_sygms\" placeholder=\"Select KYC status\" size=\"sm\"\n valueKey=\"_id\" labelKey=\"sygms_title\">\n </cide-ele-select>\n </div>\n </div>\n\n <!-- Right Side: File Upload (1/3 width) -->\n <div class=\"lg:tw-col-span-1\">\n <div class=\"tw-bg-gray-50 tw-border tw-border-gray-200 tw-rounded-lg tw-p-3 tw-h-full\">\n \n <!-- File Upload Input -->\n <cide-ele-file-input\n [id]=\"'document-files-' + i\"\n [multiple]=\"true\"\n formControlName=\"syusd_photo_group_id_cyfm\"\n [accept]=\"'.pdf,.jpg,.jpeg,.png,.doc,.docx'\"\n [autoUpload]=\"true\"\n [uploadData]=\"getDocumentUploadData(i)\"\n (change)=\"onDocumentFilesSelected($event, i)\"\n (uploadSuccess)=\"onDocumentUploadSuccess($event, i)\"\n (uploadError)=\"onDocumentUploadError($event, i)\"\n (uploadProgressChange)=\"onDocumentUploadProgress($event, i)\"\n class=\"tw-mb-3\"\n size=\"sm\">\n </cide-ele-file-input>\n\n <!-- Upload Status -->\n <!-- Upload status is now handled by the file input component itself -->\n </div>\n </div>\n </div>\n </div>\n </div>\n }\n </div>\n </div>\n }\n\n @case ('family') {\n <!-- Family Details Section - Compact Design -->\n <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\n <div class=\"tw-flex tw-justify-end tw-items-end tw-mb-3 tw-gap-4\">\n <button cideEleButton variant=\"primary\" size=\"sm\" type=\"button\" (click)=\"addFamilyDetail()\" leftIcon=\"add\" [disabled]=\"!hasAddFamilyDetailRights()\">\n Add Family Member\n </button>\n </div>\n\n <div formArrayName=\"core_user_family_details\">\n @for (family of familyDetails(); track $index; let i = $index) {\n <div [formGroupName]=\"i\"\n class=\"tw-bg-white tw-border tw-border-gray-200 tw-rounded-lg tw-mb-4 tw-overflow-hidden tw-transition-all tw-duration-200 hover:tw-shadow-md tw-shadow-sm\">\n \n <!-- Compact Header -->\n <div class=\"tw-bg-gray-50 tw-px-4 tw-py-2 tw-flex tw-justify-between tw-items-center tw-border-b tw-border-gray-200\">\n <h4 class=\"tw-m-0 tw-text-gray-700 tw-text-sm tw-font-medium\">Family Member {{ i + 1 }}</h4>\n <div class=\"tw-flex tw-gap-2\">\n @if (family?._id) {\n <button cideEleButton variant=\"secondary\" size=\"xs\" type=\"button\" (click)=\"shareFamilyDetailRights(i)\"\n leftIcon=\"share\">\n Share\n </button>\n }\n @if (!family?._id) {\n <button cideEleButton variant=\"danger\" size=\"xs\" type=\"button\" (click)=\"removeFamilyDetail(i)\" leftIcon=\"delete\">\n Remove\n </button>\n }\n </div>\n </div>\n \n <!-- Compact Form Content - 3 inputs per row -->\n <div class=\"tw-p-4\">\n <!-- Row 1: Name, User, and Combined Relationship/Active Status (33.33% each) -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-3 tw-mb-3\">\n <cide-ele-input label=\"Family Member Name\" formControlName=\"syfdl_family_member_name\"\n placeholder=\"Enter family member full name\" size=\"sm\">\n </cide-ele-input>\n\n <cide-ele-select label=\"Family Member User\" [options]=\"userOptions(i)\"\n formControlName=\"syfdl_family_member_id_user\" placeholder=\"Select family member user\" size=\"sm\"\n valueKey=\"_id\" labelKey=\"user_fullname\" [searchable]=\"true\"\n [loading]=\"userSearchLoading()[i] || false\" (searchChange)=\"onUserSearchChange($event, i)\"\n (change)=\"onUserSelectionChange($event, i)\">\n </cide-ele-select>\n\n <!-- Combined Relationship and Active Status (33.33%) -->\n <div class=\"tw-flex tw-flex-row tw-gap-2 tw-items-end\">\n <div class=\"tw-flex-1\">\n <cide-ele-select label=\"Relationship\" [options]=\"relationshipOptions()\"\n formControlName=\"syfdl_relationship_id_sygms\" placeholder=\"Select relationship\" size=\"sm\"\n valueKey=\"_id\" labelKey=\"sygms_title\">\n </cide-ele-select>\n </div>\n\n <div class=\"tw-flex tw-items-center tw-pt-1 tw-flex-shrink-0\">\n <cide-ele-input formControlName=\"syfdl_isactive\" type=\"checkbox\" label=\"Active\" size=\"sm\">\n </cide-ele-input>\n </div>\n </div>\n </div>\n\n <!-- Row 2: Blood Group, DOB, and Phone -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 xl:tw-grid-cols-3 tw-gap-3 tw-mb-3\">\n <cide-ele-select label=\"Blood Group\" [options]=\"bloodGroupOptions()\"\n formControlName=\"syfdl_blood_group_sygms\" placeholder=\"Select blood group\" size=\"sm\" valueKey=\"_id\"\n labelKey=\"sygms_title\">\n </cide-ele-select>\n\n <cide-ele-input label=\"Date of Birth\" formControlName=\"syfdl_family_member_dob\" type=\"date\" size=\"sm\"\n [id]=\"'syfdl_family_member_dob['+i+']'\">\n </cide-ele-input>\n\n <cide-ele-input label=\"Contact Phone\" formControlName=\"syfdl_contact_phone\" type=\"tel\"\n placeholder=\"Enter contact phone\" size=\"sm\">\n </cide-ele-input>\n </div>\n\n <!-- Row 3: Email, Email ID, and Contact Number -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 xl:tw-grid-cols-3 tw-gap-3 tw-mb-3\">\n <cide-ele-input label=\"Contact Email\" formControlName=\"syfdl_contact_email\" type=\"email\"\n placeholder=\"Enter contact email\" size=\"sm\">\n </cide-ele-input>\n\n <cide-ele-input label=\"Contact Email ID\" formControlName=\"syfdl_contact_email_id\" type=\"email\"\n placeholder=\"Enter contact email ID\" size=\"sm\">\n </cide-ele-input>\n\n <cide-ele-input label=\"Contact Number\" formControlName=\"syfdl_contact_number\" type=\"tel\"\n placeholder=\"Enter contact number\" size=\"sm\">\n </cide-ele-input>\n </div>\n\n </div>\n </div>\n }\n </div>\n </div>\n }\n }\n </div>\n\n <!-- Form Actions -->\n <div\n class=\"tw-flex tw-justify-between tw-items-center tw-gap-4 tw-py-2 tw-bg-white tw-border-t tw-border-gray-200 tw-sticky tw-bottom-0 tw-z-10\">\n <!-- Error Display Component -->\n <div class=\"tw-flex-1\">\n <cide-form-field-error [formGroup]=\"userMasterForm\"></cide-form-field-error>\n </div>\n\n <!-- Action Buttons -->\n <div class=\"tw-flex tw-gap-4\">\n <button cideEleButton type=\"button\" variant=\"secondary\" (click)=\"resetForm()\" leftIcon=\"refresh\"\n [disabled]=\"loading()\">\n Reset Form\n </button>\n\n <button cideEleButton type=\"submit\" variant=\"primary\" [disabled]=\"loading() || userMasterForm.invalid\"\n [loading]=\"loading()\" leftIcon=\"save\">\n Save User Master\n </button>\n </div>\n </div>\n </form>\n</div>\n</cide-lyt-shared-wrapper>\n\n<!-- Template Renderers for Role Permissions Grid -->\n<ng-template #menuDetailsRendererTemplate let-row=\"row\">\n <div class=\"tw-flex tw-items-center tw-space-x-3 tw-min-w-0\">\n <!-- Menu Icon -->\n <div class=\"tw-flex-shrink-0\">\n @if (row.syme_type === 'module') {\n <cide-ele-icon class=\"tw-text-blue-600 tw-w-4 tw-h-4\">folder</cide-ele-icon>\n } @else if (row.syme_type === 'section') {\n <cide-ele-icon class=\"tw-text-green-600 tw-w-4 tw-h-4\">folder_open</cide-ele-icon>\n } @else if (row.syme_type === 'menu') {\n <cide-ele-icon class=\"tw-text-purple-600 tw-w-4 tw-h-4\">menu</cide-ele-icon>\n } @else {\n <cide-ele-icon class=\"tw-text-gray-600 tw-w-4 tw-h-4\">description</cide-ele-icon>\n }\n </div>\n\n <!-- Menu Details -->\n <div class=\"tw-ml-3 tw-min-w-0 tw-flex-1\">\n <div class=\"tw-flex tw-items-center tw-gap-2\">\n <div class=\"tw-text-xs tw-font-medium tw-text-gray-900 tw-truncate\" [title]=\"row.syme_title\">\n {{ row.syme_title || row.menu?.syme_title || row.menu?.syme_menu_name || 'Untitled' }}\n </div>\n <!-- Green pill indicator for parent menus with child permissions -->\n @if (row.syme_type === 'module' || row.syme_type === 'section') {\n @if (hasChildMenusWithPermissions(row._id)) {\n <span\n class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-green-100 tw-text-green-800 tw-whitespace-nowrap\">\n Assigned\n </span>\n }\n }\n </div>\n @if (row.permission?.sygms_name) {\n <div class=\"tw-text-xs tw-text-blue-500 tw-truncate\" [title]=\"row.permission?.sygms_name\">\n {{ row.permission?.sygms_name }}\n </div>\n }\n </div>\n </div>\n</ng-template>\n\n<!-- Menu Type Renderer Template -->\n<ng-template #menuTypeRendererTemplate let-row=\"row\" let-value=\"value\">\n <div class=\"tw-flex tw-items-center tw-justify-center\">\n @if (row.syme_type === 'module') {\n <span\n class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded-full tw-text-xs tw-font-medium tw-bg-blue-100 tw-text-blue-800\">\n Module\n </span>\n } @else if (row.syme_type === 'section') {\n <span\n class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded-full tw-text-xs tw-font-medium tw-bg-green-100 tw-text-green-800\">\n Section\n </span>\n } @else if (row.syme_type === 'menu') {\n <span\n class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded-full tw-text-xs tw-font-medium tw-bg-purple-100 tw-text-purple-800\">\n Menu\n </span>\n } @else {\n <span\n class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded-full tw-text-xs tw-font-medium tw-bg-gray-100 tw-text-gray-800\">\n {{ row.syme_type || 'Unknown' }}\n </span>\n }\n </div>\n</ng-template>\n\n<!-- Permissions Checkbox Renderer Template -->\n<ng-template #permissionsCheckboxRendererTemplate let-row=\"row\" let-value=\"value\">\n <div class=\"tw-flex tw-flex-wrap tw-gap-2 tw-max-w-full\">\n @if (row.syme_type === 'menu' && row?.syme_permissions_id_sygms && row?.syme_permissions_id_sygms.length > 0) {\n @for (permissionId of row?.syme_permissions_id_sygms || []; track permissionId) {\n <div class=\"tw-flex tw-items-center tw-space-x-1\">\n <div class=\"tw-flex tw-items-center tw-space-x-1\">\n <input type=\"checkbox\" [checked]=\"isPermissionSelected(row._id, permissionId)\" [disabled]=\"true\"\n class=\"tw-h-4 tw-w-4 tw-text-blue-600 tw-bg-gray-100 tw-border-gray-300 tw-rounded focus:tw-ring-blue-500\">\n <label class=\"tw-text-xs tw-text-gray-700\">\n {{ getPermissionById(permissionId)?.sygms_title || 'Unknown' }}\n </label>\n </div>\n </div>\n }\n } @else {\n <!-- Show green checkmark for parent menus with child permissions -->\n @if (row.syme_type === 'module' || row.syme_type === 'section' || row.syme_type === 'title') {\n @if (hasChildMenusWithPermissions(row._id)) {\n <div class=\"tw-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-bg-green-100 tw-rounded-full\">\n <cide-ele-icon class=\"tw-text-green-600\" size=\"xs\">\n check\n </cide-ele-icon>\n </div>\n } @else {\n <span class=\"tw-text-xs tw-text-gray-400\">N/A</span>\n }\n } @else {\n <span class=\"tw-text-xs tw-text-gray-400\">N/A</span>\n }\n }\n </div>\n</ng-template>\n\n<!-- Menu Rights Permissions Renderer Template -->\n<ng-template #menuRightsPermissionsRendererTemplate let-row=\"row\" let-value=\"value\">\n <div class=\"tw-flex tw-flex-wrap tw-gap-2 tw-max-w-full\">\n <!-- Role Rights Display -->\n @if (row.role_rights && row.role_rights.length > 0) {\n <div class=\"tw-mb-2\">\n <div class=\"tw-text-xs tw-text-gray-500 tw-mb-1\">Role Rights:</div>\n <div class=\"tw-flex tw-flex-wrap tw-gap-1\">\n @for (right of row.role_rights; track $index) {\n <span class=\"tw-inline-block tw-px-2 tw-py-1 tw-text-xs tw-bg-blue-100 tw-text-blue-800 tw-rounded\">\n {{ right }}\n </span>\n }\n </div>\n </div>\n }\n\n\n <!-- Exception Indicator -->\n @if (row.hasException) {\n <div class=\"tw-mt-2\">\n <span class=\"tw-inline-block tw-px-2 tw-py-1 tw-text-xs tw-bg-yellow-100 tw-text-yellow-800 tw-rounded\">\n Override\n </span>\n </div>\n } @else {\n <div class=\"tw-mt-2\">\n <span class=\"tw-text-xs tw-text-gray-400\">Default</span>\n </div>\n }\n </div>\n</ng-template>\n\n<!-- Permissions Renderer Template -->\n<ng-template #permissionsRendererTemplate let-row=\"row\" let-value=\"value\">\n <div class=\"tw-flex tw-flex-wrap tw-gap-2 tw-max-w-full\">\n @if (row._permissionValues && Object.keys(row._permissionValues).length > 0) {\n @for (permissionId of Object.keys(row._permissionValues); track permissionId) {\n <div class=\"tw-flex tw-items-center tw-space-x-2\">\n <cide-ele-input type=\"checkbox\" [ngModel]=\"row._permissionValues[permissionId].checked\"\n (ngModelChange)=\"onPermissionChangeSafe($event, row, permissionId)\"\n [id]=\"'permission-' + row._id + '-' + permissionId\" class=\"tw-h-4 tw-w-4\">\n </cide-ele-input>\n <label [for]=\"'permission-' + row._id + '-' + permissionId\" \n class=\"tw-text-xs tw-cursor-pointer\"\n [ngClass]=\"{\n 'tw-text-gray-700': row._permissionValues[permissionId].modified === row._permissionValues[permissionId].actual,\n 'tw-text-blue-600 tw-font-semibold': row._permissionValues[permissionId].modified !== row._permissionValues[permissionId].actual\n }\">\n {{ row._permissionValues[permissionId].permission?.sygms_title }}\n @if (row._permissionValues[permissionId].modified !== row._permissionValues[permissionId].actual) {\n <span class=\"tw-text-xs tw-text-orange-500 tw-ml-1\" title=\"Modified from role permission\">\n ({{ row._permissionValues[permissionId].actual ? '\u2713' : '\u2717' }})\n </span>\n }\n </label>\n </div>\n }\n } @else {\n <!-- No permissions to display - show N/A (permissions are already loaded, just empty) -->\n <span class=\"tw-text-xs tw-text-gray-400\">N/A</span>\n }\n </div>\n</ng-template>", styles: [":host ::ng-deep .entity-mapping-card{transition:all .2s ease}:host ::ng-deep .entity-mapping-card:hover{transform:translateY(-2px)}:host ::ng-deep .entity-mapping-card .cide-card-header{background:linear-gradient(135deg,#3b82f60d,#9333ea0d);border-bottom:1px solid rgba(59,130,246,.1)}:host ::ng-deep .dark .entity-mapping-card .cide-card-header{background:linear-gradient(135deg,#3b82f61a,#9333ea1a);border-bottom:1px solid rgba(59,130,246,.2)}:host ::ng-deep .entity-mapping-card .cide-card-header-content{font-weight:600}:host ::ng-deep .entity-mapping-card .cide-card-body{background:linear-gradient(180deg,#f9fafb80,#ffffff80)}:host ::ng-deep .dark .entity-mapping-card .cide-card-body{background:linear-gradient(180deg,#11182780,#1f293780)}\n"] }]
|
|
17616
|
+
], template: "<!-- \n ENTERPRISE USER MASTER FORM\n \n Enterprise-Level Styling with Tailwind CSS\n Features: Responsive grids, proper typography, enhanced user experience\n-->\n\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: pageCode() }\" [breadcrumb_data]=\"breadcrumbData()\">\n <div class=\"tw-w-full tw-h-full tw-p-1 tw-pt-2\">\n <!-- Toast Notifications -->\n <cide-ele-toast-notification></cide-ele-toast-notification>\n \n <form class=\"tw-max-w-7xl tw-mx-auto tw-bg-transparent\" [formGroup]=\"userMasterForm\" [class.tw-opacity-60]=\"loading()\"\n (ngSubmit)=\"onSubmit()\">\n\n\n <!-- User Context Header -->\n <div\n class=\"tw-bg-gradient-to-r tw-from-blue-50 tw-to-indigo-50 tw-border tw-border-blue-200 tw-rounded-md tw-p-1 tw-mb-2 tw-shadow-sm\">\n <div class=\"tw-flex tw-items-center tw-justify-between tw-flex-wrap tw-gap-2\">\n <!-- User Basic Info Display -->\n <div class=\"tw-flex tw-items-center tw-gap-3 tw-flex-wrap\">\n <!-- Profile Photo Preview -->\n <div class=\"tw-flex tw-items-center tw-gap-2\">\n <div\n class=\"tw-w-8 tw-h-8 tw-rounded-full tw-bg-blue-100 tw-border tw-border-blue-200 tw-flex tw-items-center tw-justify-center tw-overflow-hidden\">\n @if (userMasterForm.get('user_photo_id_cyfm')?.value) {\n <img cideEleFileImage [fileId]=\"userMasterForm.get('user_photo_id_cyfm')?.value\"\n [altText]=\"'Profile Photo'\" class=\"tw-w-full tw-h-full tw-object-cover\">\n } @else {\n <cide-ele-icon name=\"person\" class=\"tw-w-5 tw-h-5 tw-text-blue-600\">\n </cide-ele-icon>\n }\n </div>\n <div class=\"tw-flex tw-flex-col\">\n <span class=\"tw-text-xs tw-font-medium tw-text-blue-900\">\n {{ getUserFullName() || 'New User' }}\n </span>\n <span class=\"tw-text-xs tw-text-blue-600\">\n {{ getUserUsername() || 'Username not set' }}\n </span>\n </div>\n </div>\n\n <!-- Contact Info -->\n <div class=\"tw-flex tw-items-center tw-gap-3\">\n <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-xs tw-text-gray-700\">\n <cide-ele-icon variant=\"gray\" size=\"sm\">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=\"sm\">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=\"sm\" 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=\"sm\" 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=\"sm\">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=\"sm\">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=\"sm\" 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=\"sm\" (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=\"sm\" (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=\"sm\" (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=\"sm\">\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=\"sm\">\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=\"sm\">\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=\"sm\">\n </cide-ele-input>\n </div>\n\n <!-- User Type Mapping -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\n <cide-ele-select\n id=\"syutm_user_type\"\n label=\"User Type\"\n placeholder=\"Select user type\"\n [options]=\"userTypeOptions\"\n valueKey=\"value\"\n labelKey=\"label\"\n formControlName=\"syutm_user_type\"\n size=\"sm\">\n </cide-ele-select>\n\n @if (showTypeSpecificId()) {\n <cide-ele-input\n id=\"syutm_type_specific_id\"\n label=\"Type-Specific ID\"\n placeholder=\"Auto-generated (e.g., STU001, TCH001)\"\n formControlName=\"syutm_type_specific_id\"\n [maxlength]=\"50\"\n size=\"sm\"\n [disabled]=\"true\">\n </cide-ele-input>\n }\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=\"sm\">\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=\"sm\">\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=\"sm\" 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=\"xs\" type=\"button\" (click)=\"addEntityMapping()\"\n leftIcon=\"add\" [disabled]=\"isViewingOwnProfile() || isAllEntitiesMapped()\"\n [title]=\"isViewingOwnProfile() ? 'You cannot modify your own entity mappings' : (isAllEntitiesMapped() ? 'All entities are mapped' : 'Add Entity Mapping')\">\n Add Entity Mapping\n </button>\n\n @if (isViewingOwnProfile()) {\n <div class=\"tw-mt-2 tw-p-2 tw-bg-amber-50 tw-border tw-border-amber-200 tw-rounded-md tw-max-w-xs\">\n <p class=\"tw-text-xs tw-text-amber-700\">\n <cide-ele-icon variant=\"warning\" size=\"sm\" class=\"tw-mr-1\">lock</cide-ele-icon>\n You cannot modify your own entity mappings.\n </p>\n </div>\n } @else if (isAllEntitiesMapped()) {\n <div class=\"tw-mt-2 tw-p-2 tw-bg-blue-50 tw-border tw-border-blue-200 tw-rounded-md tw-max-w-xs\">\n <p class=\"tw-text-xs tw-text-blue-700\">\n <cide-ele-icon variant=\"info\" size=\"sm\" class=\"tw-mr-1\">info</cide-ele-icon>\n All available entities are already mapped.\n </p>\n </div>\n }\n </div>\n </div>\n\n <div formArrayName=\"core_entity_mapping\">\n @for (mapping of entityMappings(); track mapping.syenm_entity_id_syen?._id || mapping.syenm_entity_id_syen || $index; let i = $index) {\n <cide-ele-card\n [title]=\"getEntityNameFromMapping(i) || 'Entity Mapping ' + (i + 1)\"\n [subtitle]=\"mapping.syenm_isdefault ? 'Primary Entity' : ''\"\n [cardConfig]=\"{\n collapsible: true,\n minimizable: false,\n maximizable: false,\n removable: !mapping?._id && !isViewingOwnProfile(),\n defaultState: 'collapsed',\n showHeader: true,\n showFooter: false,\n variant: 'default',\n size: 'sm',\n shadow: true,\n rounded: true,\n bordered: true\n }\"\n (stateChange)=\"onEntityMappingCardStateChange($event, i)\"\n (removed)=\"removeEntityMapping(i)\"\n class=\"tw-mb-2 entity-mapping-card tw-block\">\n \n <div [formGroupName]=\"i\">\n \n <!-- Card Content -->\n <div class=\"tw-space-y-3\">\n <!-- Hidden form control to maintain form structure for entity -->\n <input type=\"hidden\" [formControlName]=\"'syenm_entity_id_syen'\" />\n \n <!-- Role, Default, Active, and User Type in One Row -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-4 tw-gap-3\">\n <!-- Role Selection with Copy Button -->\n <div class=\"tw-flex tw-flex-col\">\n <cide-ele-select label=\"Role for this Entity\" [options]=\"getRoleOptionsForEntity(i)\"\n formControlName=\"syenm_role_id_syusrol\" valueKey=\"_id\" labelKey=\"syusrol_role_name\"\n placeholder=\"Select role for this entity\" size=\"sm\" (change)=\"onRoleChange(i, $event)\">\n </cide-ele-select>\n @if (!isViewingOwnProfile() && entityMappings().length > 1) {\n <button \n type=\"button\"\n (click)=\"showCopyRoleFromEntityDrawer(i)\"\n class=\"tw-mt-1 tw-text-xs tw-text-blue-600 hover:tw-text-blue-800 tw-flex tw-items-center tw-gap-1 tw-w-fit tw-transition-colors\"\n title=\"Copy role and settings from another entity mapping\">\n <cide-ele-icon variant=\"blue\" size=\"sm\">content_copy</cide-ele-icon>\n <span>Copy from Entity</span>\n </button>\n }\n </div>\n \n <!-- Primary Entity Checkbox -->\n <div class=\"tw-flex tw-flex-col tw-justify-end\">\n <div class=\"tw-flex tw-items-center tw-gap-2 tw-px-3 tw-py-2 tw-rounded-md tw-border tw-border-green-300 tw-bg-green-50 dark:tw-bg-green-900/30 dark:tw-border-green-700\" (click)=\"$event.stopPropagation()\">\n <input \n type=\"checkbox\" \n [checked]=\"mapping.syenm_isdefault\"\n (change)=\"onDefaultEntityChange(i, $event)\" \n class=\"tw-h-4 tw-w-4 tw-accent-green-600 tw-cursor-pointer\" />\n <label class=\"tw-inline-flex tw-items-center tw-gap-1 tw-text-xs tw-font-semibold tw-text-green-700 dark:tw-text-green-300 tw-cursor-pointer\">\n <cide-ele-icon variant=\"green\" size=\"sm\" class=\"!tw-text-green-600 dark:!tw-text-green-400\">star</cide-ele-icon>\n DEFAULT\n </label>\n </div>\n </div>\n \n <!-- Active Mapping Checkbox -->\n <div class=\"tw-flex tw-flex-col tw-justify-end\">\n <div class=\"tw-flex tw-items-center tw-gap-2 tw-px-3 tw-py-2 tw-rounded-md tw-border tw-border-blue-300 tw-bg-blue-50 dark:tw-bg-blue-900/30 dark:tw-border-blue-700\" (click)=\"$event.stopPropagation()\">\n <input \n type=\"checkbox\" \n [checked]=\"mapping.syenm_isactive\"\n (change)=\"onActiveMappingChange(i, $event)\" \n class=\"tw-h-4 tw-w-4 tw-accent-blue-600 tw-cursor-pointer\" />\n <label class=\"tw-inline-flex tw-items-center tw-gap-1 tw-text-xs tw-font-semibold tw-text-blue-700 dark:tw-text-blue-300 tw-cursor-pointer\">\n <cide-ele-icon variant=\"blue\" size=\"sm\" class=\"!tw-text-blue-600 dark:!tw-text-blue-400\">check_circle</cide-ele-icon>\n Active\n </label>\n </div>\n </div>\n \n <!-- User Type Mappings -->\n <div class=\"tw-flex tw-flex-col tw-justify-end\">\n <div class=\"tw-flex tw-items-center tw-gap-1.5 tw-flex-wrap\">\n @if (getEntityIdFromMapping(i)) {\n @if (getUserTypeMappingsForEntity(getEntityIdFromMapping(i)).length > 0) {\n @for (typeMapping of getUserTypeMappingsForEntity(getEntityIdFromMapping(i)); track typeMapping._id || typeMapping.syutm_type_specific_id) {\n <span class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded tw-text-[10px] tw-font-medium tw-bg-purple-50 dark:tw-bg-purple-900/30 tw-text-gray-900 dark:tw-text-gray-100 tw-border tw-border-purple-300 dark:tw-border-purple-700\">\n <cide-ele-icon variant=\"purple\" size=\"sm\" class=\"tw-mr-1 !tw-text-purple-600 dark:!tw-text-purple-400\">person</cide-ele-icon>\n {{ typeMapping.syutm_user_type }}\n @if (typeMapping.syutm_isactive) {\n <span class=\"tw-ml-1 tw-w-1.5 tw-h-1.5 tw-rounded-full tw-bg-green-600\"></span>\n }\n </span>\n }\n }\n }\n </div>\n </div>\n </div>\n\n\n <!-- Entity-Specific Details and Active Period - All in One Row -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-3\">\n <cide-ele-select label=\"Department for this Entity\" [options]=\"getDepartmentOptionsForEntity(i)\"\n formControlName=\"syenm_department_id_sydept\" (change)=\"onDepartmentChange($event)\" valueKey=\"_id\"\n labelKey=\"sydept_name\" placeholder=\"Select department\" size=\"sm\">\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=\"sm\">\n </cide-ele-select>\n\n <cide-ele-input label=\"Active From\" [id]=\"'syenm_activefrom['+i+']'\"\n formControlName=\"syenm_activefrom\" type=\"date\" size=\"sm\">\n </cide-ele-input>\n\n <cide-ele-input label=\"Active Until\" [id]=\"'syenm_activeupto['+i+']'\"\n formControlName=\"syenm_activeupto\" type=\"date\" size=\"sm\">\n </cide-ele-input>\n </div>\n\n <!-- Menu Rights Grid for this Entity-Role -->\n <div class=\"tw-border-t tw-border-gray-200\">\n\n @if (getMenuRightsForMapping(i).length > 0) {\n <!-- Menu Rights Tree Grid -->\n\n <cide-ele-data-grid [config]=\"getMenuRightsGridConfig(i)\"\n [templateRenderers]=\"getMenuRightsTemplateRenderers(i)\"\n (gridEvent)=\"onMenuRightsGridEvent($event, i)\" class=\"tw-h-96 tw-w-full\">\n </cide-ele-data-grid>\n\n } @else {\n <div class=\"tw-text-center tw-py-8 tw-bg-gray-50 tw-border tw-border-gray-200 tw-rounded-lg\">\n <div class=\"tw-text-gray-400 tw-mb-3\">\n <cide-ele-icon variant=\"gray\" size=\"lg\">menu</cide-ele-icon>\n </div>\n <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-600 tw-mb-2\">No Menu Rights Available</h6>\n <p class=\"tw-text-xs tw-text-gray-500 tw-mb-3 tw-text-center\">Select both entity and role to\n automatically load\n menu rights for this mapping.</p>\n </div>\n }\n </div>\n </div>\n </div>\n </cide-ele-card>\n }\n </div>\n\n @if (entityMappings().length === 0) {\n <div class=\"tw-text-center tw-py-8 tw-bg-white tw-border tw-border-blue-200 tw-rounded-lg\">\n <div class=\"tw-text-blue-400 tw-mb-3\">\n <cide-ele-icon variant=\"blue\" size=\"lg\">business</cide-ele-icon>\n </div>\n <h4 class=\"tw-text-sm tw-font-medium tw-text-blue-800 tw-mb-2\">No Entity Mappings</h4>\n <p class=\"tw-text-blue-600 tw-mb-4 tw-text-center\">Add entity mappings to assign specific roles and\n permissions for different entities.</p>\n @if (!isViewingOwnProfile()) {\n <button class=\"tw-mx-auto\" cideEleButton variant=\"primary\" size=\"xs\" type=\"button\"\n (click)=\"addEntityMapping()\" leftIcon=\"add\">\n Add First Entity Mapping\n </button>\n } @else {\n <p class=\"tw-text-amber-600 tw-text-sm tw-font-medium\">\n <cide-ele-icon variant=\"warning\" size=\"sm\" class=\"tw-mr-1\">lock</cide-ele-icon>\n You cannot modify your own entity mappings.\n </p>\n }\n </div>\n }\n </div>\n }\n\n @case ('addresses') {\n <!-- Contact Addresses Section -->\n <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\n <div class=\"tw-flex tw-justify-end\">\n <div class=\"tw-flex tw-justify-between tw-items-end tw-mb-2 tw-gap-4\">\n <button cideEleButton variant=\"primary\" size=\"xs\" 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=\"xs\" 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=\"xs\" 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=\"xs\" 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=\"xs\" type=\"button\" (click)=\"addFamilyDetail()\" leftIcon=\"add\" [disabled]=\"!hasAddFamilyDetailRights()\">\n Add Family Member\n </button>\n </div>\n\n <div formArrayName=\"core_user_family_details\">\n @for (family of familyDetails(); track $index; let i = $index) {\n <div [formGroupName]=\"i\"\n class=\"tw-bg-white tw-border tw-border-gray-200 tw-rounded-lg tw-mb-4 tw-overflow-hidden tw-transition-all tw-duration-200 hover:tw-shadow-md tw-shadow-sm\">\n \n <!-- Compact Header -->\n <div class=\"tw-bg-gray-50 tw-px-4 tw-py-2 tw-flex tw-justify-between tw-items-center tw-border-b tw-border-gray-200\">\n <h4 class=\"tw-m-0 tw-text-gray-700 tw-text-sm tw-font-medium\">Family Member {{ i + 1 }}</h4>\n <div class=\"tw-flex tw-gap-2\">\n @if (family?._id) {\n <button cideEleButton variant=\"secondary\" size=\"xs\" type=\"button\" (click)=\"shareFamilyDetailRights(i)\"\n leftIcon=\"share\">\n Share\n </button>\n }\n @if (!family?._id) {\n <button cideEleButton variant=\"danger\" size=\"xs\" type=\"button\" (click)=\"removeFamilyDetail(i)\" leftIcon=\"delete\">\n Remove\n </button>\n }\n </div>\n </div>\n \n <!-- Compact Form Content - 3 inputs per row -->\n <div class=\"tw-p-4\">\n <!-- Row 1: Name, User, and Combined Relationship/Active Status (33.33% each) -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-3 tw-mb-3\">\n <cide-ele-input label=\"Family Member Name\" formControlName=\"syfdl_family_member_name\"\n placeholder=\"Enter family member full name\" size=\"sm\">\n </cide-ele-input>\n\n <cide-ele-select label=\"Family Member User\" [options]=\"userOptions(i)\"\n formControlName=\"syfdl_family_member_id_user\" placeholder=\"Select family member user\" size=\"sm\"\n valueKey=\"_id\" labelKey=\"user_fullname\" [searchable]=\"true\"\n [loading]=\"userSearchLoading()[i] || false\" (searchChange)=\"onUserSearchChange($event, i)\"\n (change)=\"onUserSelectionChange($event, i)\">\n </cide-ele-select>\n\n <!-- Combined Relationship and Active Status (33.33%) -->\n <div class=\"tw-flex tw-flex-row tw-gap-2 tw-items-end\">\n <div class=\"tw-flex-1\">\n <cide-ele-select label=\"Relationship\" [options]=\"relationshipOptions()\"\n formControlName=\"syfdl_relationship_id_sygms\" placeholder=\"Select relationship\" size=\"sm\"\n valueKey=\"_id\" labelKey=\"sygms_title\">\n </cide-ele-select>\n </div>\n\n <div class=\"tw-flex tw-items-center tw-pt-1 tw-flex-shrink-0\">\n <cide-ele-input formControlName=\"syfdl_isactive\" type=\"checkbox\" label=\"Active\" size=\"sm\">\n </cide-ele-input>\n </div>\n </div>\n </div>\n\n <!-- Row 2: Blood Group, DOB, and Phone -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 xl:tw-grid-cols-3 tw-gap-3 tw-mb-3\">\n <cide-ele-select label=\"Blood Group\" [options]=\"bloodGroupOptions()\"\n formControlName=\"syfdl_blood_group_sygms\" placeholder=\"Select blood group\" size=\"sm\" valueKey=\"_id\"\n labelKey=\"sygms_title\">\n </cide-ele-select>\n\n <cide-ele-input label=\"Date of Birth\" formControlName=\"syfdl_family_member_dob\" type=\"date\" size=\"sm\"\n [id]=\"'syfdl_family_member_dob['+i+']'\">\n </cide-ele-input>\n\n <cide-ele-input label=\"Contact Phone\" formControlName=\"syfdl_contact_phone\" type=\"tel\"\n placeholder=\"Enter contact phone\" size=\"sm\">\n </cide-ele-input>\n </div>\n\n <!-- Row 3: Email, Email ID, and Contact Number -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 xl:tw-grid-cols-3 tw-gap-3 tw-mb-3\">\n <cide-ele-input label=\"Contact Email\" formControlName=\"syfdl_contact_email\" type=\"email\"\n placeholder=\"Enter contact email\" size=\"sm\">\n </cide-ele-input>\n\n <cide-ele-input label=\"Contact Email ID\" formControlName=\"syfdl_contact_email_id\" type=\"email\"\n placeholder=\"Enter contact email ID\" size=\"sm\">\n </cide-ele-input>\n\n <cide-ele-input label=\"Contact Number\" formControlName=\"syfdl_contact_number\" type=\"tel\"\n placeholder=\"Enter contact number\" size=\"sm\">\n </cide-ele-input>\n </div>\n\n </div>\n </div>\n }\n </div>\n </div>\n }\n }\n </div>\n\n <!-- Form Actions -->\n <div\n class=\"tw-flex tw-justify-between tw-items-center tw-gap-4 tw-py-2 tw-bg-white tw-border-t tw-border-gray-200 tw-sticky tw-bottom-0 tw-z-10\">\n <!-- Error Display Component -->\n <div class=\"tw-flex-1\">\n <cide-form-field-error [formGroup]=\"userMasterForm\"></cide-form-field-error>\n </div>\n\n <!-- Action Buttons -->\n <div class=\"tw-flex tw-gap-4\">\n <button cideEleButton type=\"button\" variant=\"secondary\" (click)=\"resetForm()\" leftIcon=\"refresh\"\n [disabled]=\"loading()\">\n Reset Form\n </button>\n\n <button cideEleButton type=\"submit\" variant=\"primary\" [disabled]=\"loading() || userMasterForm.invalid\"\n [loading]=\"loading()\" leftIcon=\"save\">\n Save User Master\n </button>\n </div>\n </div>\n </form>\n</div>\n</cide-lyt-shared-wrapper>\n\n<!-- Template Renderers for Role Permissions Grid -->\n<ng-template #menuDetailsRendererTemplate let-row=\"row\">\n <div class=\"tw-flex tw-items-center tw-space-x-3 tw-min-w-0\">\n <!-- Menu Icon -->\n <div class=\"tw-flex-shrink-0\">\n @if (row.syme_type === 'module') {\n <cide-ele-icon class=\"tw-text-blue-600 tw-w-4 tw-h-4\">folder</cide-ele-icon>\n } @else if (row.syme_type === 'section') {\n <cide-ele-icon class=\"tw-text-green-600 tw-w-4 tw-h-4\">folder_open</cide-ele-icon>\n } @else if (row.syme_type === 'menu') {\n <cide-ele-icon class=\"tw-text-purple-600 tw-w-4 tw-h-4\">menu</cide-ele-icon>\n } @else {\n <cide-ele-icon class=\"tw-text-gray-600 tw-w-4 tw-h-4\">description</cide-ele-icon>\n }\n </div>\n\n <!-- Menu Details -->\n <div class=\"tw-ml-3 tw-min-w-0 tw-flex-1\">\n <div class=\"tw-flex tw-items-center tw-gap-2\">\n <div class=\"tw-text-xs tw-font-medium tw-text-gray-900 tw-truncate\" [title]=\"row.syme_title\">\n {{ row.syme_title || row.menu?.syme_title || row.menu?.syme_menu_name || 'Untitled' }}\n </div>\n <!-- Green pill indicator for parent menus with child permissions -->\n @if (row.syme_type === 'module' || row.syme_type === 'section') {\n @if (hasChildMenusWithPermissions(row._id)) {\n <span\n class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-green-100 tw-text-green-800 tw-whitespace-nowrap\">\n Assigned\n </span>\n }\n }\n </div>\n @if (row.permission?.sygms_name) {\n <div class=\"tw-text-xs tw-text-blue-500 tw-truncate\" [title]=\"row.permission?.sygms_name\">\n {{ row.permission?.sygms_name }}\n </div>\n }\n </div>\n </div>\n</ng-template>\n\n<!-- Menu Type Renderer Template -->\n<ng-template #menuTypeRendererTemplate let-row=\"row\" let-value=\"value\">\n <div class=\"tw-flex tw-items-center tw-justify-center\">\n @if (row.syme_type === 'module') {\n <span\n class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded-full tw-text-xs tw-font-medium tw-bg-blue-100 tw-text-blue-800\">\n Module\n </span>\n } @else if (row.syme_type === 'section') {\n <span\n class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded-full tw-text-xs tw-font-medium tw-bg-green-100 tw-text-green-800\">\n Section\n </span>\n } @else if (row.syme_type === 'menu') {\n <span\n class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded-full tw-text-xs tw-font-medium tw-bg-purple-100 tw-text-purple-800\">\n Menu\n </span>\n } @else {\n <span\n class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded-full tw-text-xs tw-font-medium tw-bg-gray-100 tw-text-gray-800\">\n {{ row.syme_type || 'Unknown' }}\n </span>\n }\n </div>\n</ng-template>\n\n<!-- Permissions Checkbox Renderer Template -->\n<ng-template #permissionsCheckboxRendererTemplate let-row=\"row\" let-value=\"value\">\n <div class=\"tw-flex tw-flex-wrap tw-gap-2 tw-max-w-full\">\n @if (row.syme_type === 'menu' && row?.syme_permissions_id_sygms && row?.syme_permissions_id_sygms.length > 0) {\n @for (permissionId of row?.syme_permissions_id_sygms || []; track permissionId) {\n <div class=\"tw-flex tw-items-center tw-space-x-1\">\n <div class=\"tw-flex tw-items-center tw-space-x-1\">\n <input type=\"checkbox\" [checked]=\"isPermissionSelected(row._id, permissionId)\" [disabled]=\"true\"\n class=\"tw-h-4 tw-w-4 tw-text-blue-600 tw-bg-gray-100 tw-border-gray-300 tw-rounded focus:tw-ring-blue-500\">\n <label class=\"tw-text-xs tw-text-gray-700\">\n {{ getPermissionById(permissionId)?.sygms_title || 'Unknown' }}\n </label>\n </div>\n </div>\n }\n } @else {\n <!-- Show green checkmark for parent menus with child permissions -->\n @if (row.syme_type === 'module' || row.syme_type === 'section' || row.syme_type === 'title') {\n @if (hasChildMenusWithPermissions(row._id)) {\n <div class=\"tw-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-bg-green-100 tw-rounded-full\">\n <cide-ele-icon class=\"tw-text-green-600\" size=\"sm\">\n check\n </cide-ele-icon>\n </div>\n } @else {\n <span class=\"tw-text-xs tw-text-gray-400\">N/A</span>\n }\n } @else {\n <span class=\"tw-text-xs tw-text-gray-400\">N/A</span>\n }\n }\n </div>\n</ng-template>\n\n<!-- Menu Rights Permissions Renderer Template -->\n<ng-template #menuRightsPermissionsRendererTemplate let-row=\"row\" let-value=\"value\">\n <div class=\"tw-flex tw-flex-wrap tw-gap-2 tw-max-w-full\">\n <!-- Role Rights Display -->\n @if (row.role_rights && row.role_rights.length > 0) {\n <div class=\"tw-mb-2\">\n <div class=\"tw-text-xs tw-text-gray-500 tw-mb-1\">Role Rights:</div>\n <div class=\"tw-flex tw-flex-wrap tw-gap-1\">\n @for (right of row.role_rights; track $index) {\n <span class=\"tw-inline-block tw-px-2 tw-py-1 tw-text-xs tw-bg-blue-100 tw-text-blue-800 tw-rounded\">\n {{ right }}\n </span>\n }\n </div>\n </div>\n }\n\n\n <!-- Exception Indicator -->\n @if (row.hasException) {\n <div class=\"tw-mt-2\">\n <span class=\"tw-inline-block tw-px-2 tw-py-1 tw-text-xs tw-bg-yellow-100 tw-text-yellow-800 tw-rounded\">\n Override\n </span>\n </div>\n } @else {\n <div class=\"tw-mt-2\">\n <span class=\"tw-text-xs tw-text-gray-400\">Default</span>\n </div>\n }\n </div>\n</ng-template>\n\n<!-- Permissions Renderer Template -->\n<ng-template #permissionsRendererTemplate let-row=\"row\" let-value=\"value\">\n <div class=\"tw-flex tw-flex-wrap tw-gap-2 tw-max-w-full\">\n @if (row._permissionValues && Object.keys(row._permissionValues).length > 0) {\n @for (permissionId of Object.keys(row._permissionValues); track permissionId) {\n <div class=\"tw-flex tw-items-center tw-space-x-2\">\n <cide-ele-input type=\"checkbox\" [ngModel]=\"row._permissionValues[permissionId].checked\"\n (ngModelChange)=\"onPermissionChangeSafe($event, row, permissionId)\"\n [id]=\"'permission-' + row._id + '-' + permissionId\" class=\"tw-h-4 tw-w-4\">\n </cide-ele-input>\n <label [for]=\"'permission-' + row._id + '-' + permissionId\" \n class=\"tw-text-xs tw-cursor-pointer\"\n [ngClass]=\"{\n 'tw-text-gray-700': row._permissionValues[permissionId].modified === row._permissionValues[permissionId].actual,\n 'tw-text-blue-600 tw-font-semibold': row._permissionValues[permissionId].modified !== row._permissionValues[permissionId].actual\n }\">\n {{ row._permissionValues[permissionId].permission?.sygms_title }}\n @if (row._permissionValues[permissionId].modified !== row._permissionValues[permissionId].actual) {\n <span class=\"tw-text-xs tw-text-orange-500 tw-ml-1\" title=\"Modified from role permission\">\n ({{ row._permissionValues[permissionId].actual ? '\u2713' : '\u2717' }})\n </span>\n }\n </label>\n </div>\n }\n } @else {\n <!-- No permissions to display - show N/A (permissions are already loaded, just empty) -->\n <span class=\"tw-text-xs tw-text-gray-400\">N/A</span>\n }\n </div>\n</ng-template>", styles: [":host ::ng-deep .entity-mapping-card{transition:all .2s ease}:host ::ng-deep .entity-mapping-card:hover{transform:translateY(-2px)}:host ::ng-deep .entity-mapping-card .cide-card-header{background:linear-gradient(135deg,#3b82f60d,#9333ea0d);border-bottom:1px solid rgba(59,130,246,.1)}:host ::ng-deep .dark .entity-mapping-card .cide-card-header{background:linear-gradient(135deg,#3b82f61a,#9333ea1a);border-bottom:1px solid rgba(59,130,246,.2)}:host ::ng-deep .entity-mapping-card .cide-card-header-content{font-weight:600}:host ::ng-deep .entity-mapping-card .cide-card-body{background:linear-gradient(180deg,#f9fafb80,#ffffff80)}:host ::ng-deep .dark .entity-mapping-card .cide-card-body{background:linear-gradient(180deg,#11182780,#1f293780)}\n"] }]
|
|
17631
17617
|
}], ctorParameters: () => [], propDecorators: { menuDetailsRendererTemplate: [{ type: i0.ViewChild, args: ['menuDetailsRendererTemplate', { isSignal: true }] }], permissionsCheckboxRendererTemplate: [{ type: i0.ViewChild, args: ['permissionsCheckboxRendererTemplate', { isSignal: true }] }], menuTypeRendererTemplate: [{ type: i0.ViewChild, args: ['menuTypeRendererTemplate', { isSignal: true }] }], menuRightsPermissionsRendererTemplate: [{ type: i0.ViewChild, args: ['menuRightsPermissionsRendererTemplate', { isSignal: true }] }], permissionsRendererTemplate: [{ type: i0.ViewChild, args: ['permissionsRendererTemplate', { isSignal: true }] }] } });
|
|
17632
17618
|
|
|
17633
17619
|
var userCreate_component = /*#__PURE__*/Object.freeze({
|
|
@@ -17643,6 +17629,7 @@ class CideCoreUserListComponent {
|
|
|
17643
17629
|
userMasterService = inject(CideCoreUserMasterService);
|
|
17644
17630
|
appState = inject(AppStateHelperService);
|
|
17645
17631
|
sharedService = inject(CideLytSharedService);
|
|
17632
|
+
notificationService = inject(NotificationService);
|
|
17646
17633
|
rightsService = inject(RightsService);
|
|
17647
17634
|
destroyRef = inject(DestroyRef);
|
|
17648
17635
|
// ViewChild reference to the grid component
|
|
@@ -17986,9 +17973,29 @@ class CideCoreUserListComponent {
|
|
|
17986
17973
|
}
|
|
17987
17974
|
onDeleteUserConfirmed(userId) {
|
|
17988
17975
|
console.log('🗑️ DELETE CONFIRMED: Deleting user:', userId);
|
|
17989
|
-
|
|
17990
|
-
|
|
17991
|
-
this.
|
|
17976
|
+
this.loading.set(true);
|
|
17977
|
+
this.error.set(null);
|
|
17978
|
+
this.userMasterService.deleteUser(userId).subscribe({
|
|
17979
|
+
next: (response) => {
|
|
17980
|
+
// Some endpoints return { success }, some return deleted payload directly.
|
|
17981
|
+
if (response?.success === false) {
|
|
17982
|
+
const message = response?.message || 'Failed to delete user';
|
|
17983
|
+
this.error.set(message);
|
|
17984
|
+
this.notificationService.error(message);
|
|
17985
|
+
this.loading.set(false);
|
|
17986
|
+
return;
|
|
17987
|
+
}
|
|
17988
|
+
this.notificationService.success('User deleted successfully.');
|
|
17989
|
+
this.loadUsersFromServer(true);
|
|
17990
|
+
},
|
|
17991
|
+
error: (error) => {
|
|
17992
|
+
console.error('❌ DELETE ERROR: Failed to delete user:', error);
|
|
17993
|
+
const message = error?.error?.message || 'Failed to delete user';
|
|
17994
|
+
this.error.set(message);
|
|
17995
|
+
this.notificationService.error(message);
|
|
17996
|
+
this.loading.set(false);
|
|
17997
|
+
}
|
|
17998
|
+
});
|
|
17992
17999
|
}
|
|
17993
18000
|
// Update grid data method
|
|
17994
18001
|
updateGridData(users) {
|
|
@@ -18320,11 +18327,13 @@ class CideCoreUserListComponent {
|
|
|
18320
18327
|
case 'toggle-status':
|
|
18321
18328
|
this.onToggleUserStatus(user);
|
|
18322
18329
|
break;
|
|
18323
|
-
|
|
18330
|
+
case 'delete':
|
|
18331
|
+
this.onDeleteUser(user);
|
|
18332
|
+
break;
|
|
18324
18333
|
}
|
|
18325
18334
|
}
|
|
18326
18335
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideCoreUserListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
18327
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: CideCoreUserListComponent, isStandalone: true, selector: "cide-core-user-list", viewQueries: [{ propertyName: "gridComponent", first: true, predicate: CideEleDataGridComponent, descendants: true }, { propertyName: "actionsTemplate", first: true, predicate: ["actionsTemplate"], descendants: true, static: true }, { propertyName: "userDetailsTemplate", first: true, predicate: ["userDetailsTemplate"], descendants: true, static: true }, { propertyName: "contactInfoTemplate", first: true, predicate: ["contactInfoTemplate"], descendants: true, static: true }, { propertyName: "organizationTemplate", first: true, predicate: ["organizationTemplate"], descendants: true, static: true }, { propertyName: "validityTemplate", first: true, predicate: ["validityTemplate"], descendants: true, static: true }, { propertyName: "statusTemplate", first: true, predicate: ["statusTemplate"], descendants: true, static: true }], ngImport: i0, template: "<!-- User List with Shared Wrapper -->\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"shared_wrapper_setup_param()\">\n <!-- Breadcrumb Actions -->\n <div breadcrumb-actions>\n @if (canCreate()) {\n <button cideEleButton variant=\"primary\" size=\"xs\" (click)=\"onAddUser()\" leftIcon=\"add\" [adaptive]=\"true\">\n Add User\n </button>\n\n }\n </div>\n\n <div class=\"user-master-listing-container tw-bg-white tw-shadow-lg tw-rounded-lg tw-
|
|
18336
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: CideCoreUserListComponent, isStandalone: true, selector: "cide-core-user-list", viewQueries: [{ propertyName: "gridComponent", first: true, predicate: CideEleDataGridComponent, descendants: true }, { propertyName: "actionsTemplate", first: true, predicate: ["actionsTemplate"], descendants: true, static: true }, { propertyName: "userDetailsTemplate", first: true, predicate: ["userDetailsTemplate"], descendants: true, static: true }, { propertyName: "contactInfoTemplate", first: true, predicate: ["contactInfoTemplate"], descendants: true, static: true }, { propertyName: "organizationTemplate", first: true, predicate: ["organizationTemplate"], descendants: true, static: true }, { propertyName: "validityTemplate", first: true, predicate: ["validityTemplate"], descendants: true, static: true }, { propertyName: "statusTemplate", first: true, predicate: ["statusTemplate"], descendants: true, static: true }], ngImport: i0, template: "<!-- User List with Shared Wrapper -->\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"shared_wrapper_setup_param()\">\n <!-- Breadcrumb Actions -->\n <div breadcrumb-actions>\n @if (canCreate()) {\n <button cideEleButton variant=\"primary\" size=\"xs\" (click)=\"onAddUser()\" leftIcon=\"add\" [adaptive]=\"true\">\n Add User\n </button>\n\n }\n </div>\n\n <div class=\"user-master-listing-container tw-bg-white tw-shadow-lg tw-rounded-lg tw-w-full tw-h-full tw-overflow-hidden\">\n\n <!-- Error Message -->\n @if (error()) {\n <div class=\"tw-mt-4 tw-p-4 tw-bg-red-50 tw-border tw-border-red-200 tw-rounded-md\">\n <div class=\"tw-flex\">\n <cide-ele-icon name=\"exclamation-triangle\" class=\"tw-text-red-400\"></cide-ele-icon>\n <div class=\"tw-ml-3\">\n <h3 class=\"tw-text-sm tw-font-medium tw-text-red-800\">Error</h3>\n <p class=\"tw-text-sm tw-text-red-700 tw-mt-1\">{{ error() }}</p>\n </div>\n </div>\n </div>\n }\n <div class=\"tw-flex-1 tw-min-h-0 tw-min-w-0 tw-relative\">\n <div class=\"tw-h-full tw-w-full tw-overflow-auto tw-min-w-0\">\n <!-- Data Grid Component -->\n <cide-ele-data-grid [config]=\"gridConfig()\" [templateRenderers]=\"templateRenderers\"\n [serverSidePagination]=\"true\" [totalServerItems]=\"totalItems()\" [currentServerPage]=\"currentPage()\"\n [currentServerPageSize]=\"pageSize()\" (gridEvent)=\"onGridEvent($event)\">\n </cide-ele-data-grid>\n </div>\n </div>\n\n </div>\n\n <!-- Template Definitions for Grid Renderers -->\n\n <!-- User Details Template -->\n <ng-template #userDetailsTemplate let-value let-row=\"row\" let-column=\"column\">\n <div class=\"tw-flex tw-items-center tw-space-x-3\">\n <div\n class=\"tw-flex-shrink-0 tw-w-12 tw-h-12 tw-bg-blue-100 tw-rounded-full tw-flex tw-items-center tw-justify-center\">\n <span class=\"tw-text-blue-600 tw-font-semibold tw-text-sm\">\n {{ getUserInitials(row.user_firstname, row.user_lastname) }}\n </span>\n </div>\n <div class=\"tw-flex-1 tw-min-w-0\">\n <p class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-truncate\" [title]=\"row.user_fullname\">\n {{ row.user_fullname || 'Unknown User' }}\n </p>\n <p class=\"tw-text-xs tw-text-blue-600 tw-truncate tw-font-medium\" [title]=\"'Username: ' + row.user_username\">\n @{{ row.user_username || 'No username' }}\n </p>\n <p class=\"tw-text-xs tw-text-gray-400 tw-truncate\" [title]=\"'ID: ' + row._id\">\n ID: {{ row._id?.substring(0, 8) }}...\n </p>\n </div>\n </div>\n </ng-template>\n\n <!-- Contact Info Template -->\n <ng-template #contactInfoTemplate let-value let-row=\"row\" let-column=\"column\">\n <div class=\"tw-space-y-1\">\n <p class=\"tw-text-xs tw-text-gray-900 tw-flex tw-items-center\" [title]=\"'Email: ' + row.user_emailid\">\n <svg class=\"tw-flex-shrink-0 tw-w-3 tw-h-3 tw-text-gray-400 tw-mr-2\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n <path d=\"M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z\" />\n <path d=\"M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z\" />\n </svg>\n <span class=\"tw-truncate\">{{ row.user_emailid || 'No email' }}</span>\n </p>\n <p class=\"tw-text-xs tw-text-gray-600 tw-flex tw-items-center\" [title]=\"'Mobile: ' + row.user_mobileno\">\n <svg class=\"tw-flex-shrink-0 tw-w-3 tw-h-3 tw-text-gray-400 tw-mr-2\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n <path\n d=\"M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z\" />\n </svg>\n <span class=\"tw-truncate\">{{ row.user_mobileno || 'No mobile' }}</span>\n </p>\n <p class=\"tw-text-xs tw-text-gray-500 tw-flex tw-items-center\"\n [title]=\"'Password Change: ' + getPasswordChangeText(row.user_passwordchangeonlogin)\">\n <svg class=\"tw-flex-shrink-0 tw-w-3 tw-h-3 tw-text-gray-400 tw-mr-2\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n <path fill-rule=\"evenodd\"\n d=\"M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z\"\n clip-rule=\"evenodd\" />\n </svg>\n <span class=\"tw-truncate\">{{ getPasswordChangeText(row.user_passwordchangeonlogin) }}</span>\n </p>\n </div>\n </ng-template>\n\n\n\n <!-- Validity Template -->\n <ng-template #validityTemplate let-value let-row=\"row\" let-column=\"column\">\n <div class=\"tw-text-center tw-space-y-1\">\n <p class=\"tw-text-xs tw-text-gray-900 tw-font-medium\">\n Validity managed per entity\n </p>\n <p class=\"tw-text-xs tw-text-gray-600\">\n Check entity mappings for details\n </p>\n </div>\n </ng-template>\n\n <!-- Status Template -->\n <ng-template #statusTemplate let-value let-row=\"row\" let-column=\"column\">\n <div class=\"tw-flex tw-justify-center\">\n @if (row.user_isactive) {\n <span\n class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-green-100 tw-text-green-800\">\n <svg class=\"tw-w-1.5 tw-h-1.5 tw-mr-1\" fill=\"currentColor\" viewBox=\"0 0 8 8\">\n <circle cx=\"4\" cy=\"4\" r=\"3\" />\n </svg>\n Active\n </span>\n } @else {\n <span\n class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-red-100 tw-text-red-800\">\n <svg class=\"tw-w-1.5 tw-h-1.5 tw-mr-1\" fill=\"currentColor\" viewBox=\"0 0 8 8\">\n <circle cx=\"4\" cy=\"4\" r=\"3\" />\n </svg>\n Inactive\n </span>\n }\n </div>\n </ng-template>\n\n <!-- Actions Template using cide-ele-dropdown -->\n <ng-template #actionsTemplate let-value let-row=\"row\" let-column=\"column\">\n <cide-ele-dropdown [items]=\"getDropdownItems(row)\"\n [config]=\"{ triggerIcon: 'more_vert', triggerSize: 'sm', usePortal: true, minWidth: 200 }\"\n (itemClick)=\"onDropdownItemClick($event, row)\">\n </cide-ele-dropdown>\n </ng-template>\n</cide-lyt-shared-wrapper>", styles: [".user-master-listing-container{@apply tw-w-full tw-h-full tw-flex tw-flex-col tw-min-w-0;}cide-ele-data-grid{@apply tw-w-full tw-h-full tw-min-w-0;}:host{@apply tw-w-full tw-h-full tw-flex tw-flex-col tw-min-w-0;}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip", "name"] }, { 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", "adaptive"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideEleDataGridComponent, selector: "cide-ele-data-grid", inputs: ["config", "templateRenderers", "customFormatters", "actionHandlers", "serverSidePagination", "totalServerItems", "currentServerPage", "currentServerPageSize", "dragDropEnabled"], outputs: ["gridEvent"] }, { kind: "component", type: CideEleDropdownComponent, selector: "cide-ele-dropdown", inputs: ["items", "config", "triggerTemplate", "menuTemplate"], outputs: ["itemClick", "dropdownToggle"] }, { kind: "component", type: CideLytSharedWrapperComponent, selector: "cide-lyt-shared-wrapper", inputs: ["shared_wrapper_setup_param", "breadcrumb_data"] }] });
|
|
18328
18337
|
}
|
|
18329
18338
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideCoreUserListComponent, decorators: [{
|
|
18330
18339
|
type: Component,
|
|
@@ -18336,7 +18345,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
18336
18345
|
CideEleDataGridComponent,
|
|
18337
18346
|
CideEleDropdownComponent,
|
|
18338
18347
|
CideLytSharedWrapperComponent
|
|
18339
|
-
], template: "<!-- User List with Shared Wrapper -->\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"shared_wrapper_setup_param()\">\n <!-- Breadcrumb Actions -->\n <div breadcrumb-actions>\n @if (canCreate()) {\n <button cideEleButton variant=\"primary\" size=\"xs\" (click)=\"onAddUser()\" leftIcon=\"add\" [adaptive]=\"true\">\n Add User\n </button>\n\n }\n </div>\n\n <div class=\"user-master-listing-container tw-bg-white tw-shadow-lg tw-rounded-lg tw-
|
|
18348
|
+
], template: "<!-- User List with Shared Wrapper -->\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"shared_wrapper_setup_param()\">\n <!-- Breadcrumb Actions -->\n <div breadcrumb-actions>\n @if (canCreate()) {\n <button cideEleButton variant=\"primary\" size=\"xs\" (click)=\"onAddUser()\" leftIcon=\"add\" [adaptive]=\"true\">\n Add User\n </button>\n\n }\n </div>\n\n <div class=\"user-master-listing-container tw-bg-white tw-shadow-lg tw-rounded-lg tw-w-full tw-h-full tw-overflow-hidden\">\n\n <!-- Error Message -->\n @if (error()) {\n <div class=\"tw-mt-4 tw-p-4 tw-bg-red-50 tw-border tw-border-red-200 tw-rounded-md\">\n <div class=\"tw-flex\">\n <cide-ele-icon name=\"exclamation-triangle\" class=\"tw-text-red-400\"></cide-ele-icon>\n <div class=\"tw-ml-3\">\n <h3 class=\"tw-text-sm tw-font-medium tw-text-red-800\">Error</h3>\n <p class=\"tw-text-sm tw-text-red-700 tw-mt-1\">{{ error() }}</p>\n </div>\n </div>\n </div>\n }\n <div class=\"tw-flex-1 tw-min-h-0 tw-min-w-0 tw-relative\">\n <div class=\"tw-h-full tw-w-full tw-overflow-auto tw-min-w-0\">\n <!-- Data Grid Component -->\n <cide-ele-data-grid [config]=\"gridConfig()\" [templateRenderers]=\"templateRenderers\"\n [serverSidePagination]=\"true\" [totalServerItems]=\"totalItems()\" [currentServerPage]=\"currentPage()\"\n [currentServerPageSize]=\"pageSize()\" (gridEvent)=\"onGridEvent($event)\">\n </cide-ele-data-grid>\n </div>\n </div>\n\n </div>\n\n <!-- Template Definitions for Grid Renderers -->\n\n <!-- User Details Template -->\n <ng-template #userDetailsTemplate let-value let-row=\"row\" let-column=\"column\">\n <div class=\"tw-flex tw-items-center tw-space-x-3\">\n <div\n class=\"tw-flex-shrink-0 tw-w-12 tw-h-12 tw-bg-blue-100 tw-rounded-full tw-flex tw-items-center tw-justify-center\">\n <span class=\"tw-text-blue-600 tw-font-semibold tw-text-sm\">\n {{ getUserInitials(row.user_firstname, row.user_lastname) }}\n </span>\n </div>\n <div class=\"tw-flex-1 tw-min-w-0\">\n <p class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-truncate\" [title]=\"row.user_fullname\">\n {{ row.user_fullname || 'Unknown User' }}\n </p>\n <p class=\"tw-text-xs tw-text-blue-600 tw-truncate tw-font-medium\" [title]=\"'Username: ' + row.user_username\">\n @{{ row.user_username || 'No username' }}\n </p>\n <p class=\"tw-text-xs tw-text-gray-400 tw-truncate\" [title]=\"'ID: ' + row._id\">\n ID: {{ row._id?.substring(0, 8) }}...\n </p>\n </div>\n </div>\n </ng-template>\n\n <!-- Contact Info Template -->\n <ng-template #contactInfoTemplate let-value let-row=\"row\" let-column=\"column\">\n <div class=\"tw-space-y-1\">\n <p class=\"tw-text-xs tw-text-gray-900 tw-flex tw-items-center\" [title]=\"'Email: ' + row.user_emailid\">\n <svg class=\"tw-flex-shrink-0 tw-w-3 tw-h-3 tw-text-gray-400 tw-mr-2\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n <path d=\"M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z\" />\n <path d=\"M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z\" />\n </svg>\n <span class=\"tw-truncate\">{{ row.user_emailid || 'No email' }}</span>\n </p>\n <p class=\"tw-text-xs tw-text-gray-600 tw-flex tw-items-center\" [title]=\"'Mobile: ' + row.user_mobileno\">\n <svg class=\"tw-flex-shrink-0 tw-w-3 tw-h-3 tw-text-gray-400 tw-mr-2\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n <path\n d=\"M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z\" />\n </svg>\n <span class=\"tw-truncate\">{{ row.user_mobileno || 'No mobile' }}</span>\n </p>\n <p class=\"tw-text-xs tw-text-gray-500 tw-flex tw-items-center\"\n [title]=\"'Password Change: ' + getPasswordChangeText(row.user_passwordchangeonlogin)\">\n <svg class=\"tw-flex-shrink-0 tw-w-3 tw-h-3 tw-text-gray-400 tw-mr-2\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n <path fill-rule=\"evenodd\"\n d=\"M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z\"\n clip-rule=\"evenodd\" />\n </svg>\n <span class=\"tw-truncate\">{{ getPasswordChangeText(row.user_passwordchangeonlogin) }}</span>\n </p>\n </div>\n </ng-template>\n\n\n\n <!-- Validity Template -->\n <ng-template #validityTemplate let-value let-row=\"row\" let-column=\"column\">\n <div class=\"tw-text-center tw-space-y-1\">\n <p class=\"tw-text-xs tw-text-gray-900 tw-font-medium\">\n Validity managed per entity\n </p>\n <p class=\"tw-text-xs tw-text-gray-600\">\n Check entity mappings for details\n </p>\n </div>\n </ng-template>\n\n <!-- Status Template -->\n <ng-template #statusTemplate let-value let-row=\"row\" let-column=\"column\">\n <div class=\"tw-flex tw-justify-center\">\n @if (row.user_isactive) {\n <span\n class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-green-100 tw-text-green-800\">\n <svg class=\"tw-w-1.5 tw-h-1.5 tw-mr-1\" fill=\"currentColor\" viewBox=\"0 0 8 8\">\n <circle cx=\"4\" cy=\"4\" r=\"3\" />\n </svg>\n Active\n </span>\n } @else {\n <span\n class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-red-100 tw-text-red-800\">\n <svg class=\"tw-w-1.5 tw-h-1.5 tw-mr-1\" fill=\"currentColor\" viewBox=\"0 0 8 8\">\n <circle cx=\"4\" cy=\"4\" r=\"3\" />\n </svg>\n Inactive\n </span>\n }\n </div>\n </ng-template>\n\n <!-- Actions Template using cide-ele-dropdown -->\n <ng-template #actionsTemplate let-value let-row=\"row\" let-column=\"column\">\n <cide-ele-dropdown [items]=\"getDropdownItems(row)\"\n [config]=\"{ triggerIcon: 'more_vert', triggerSize: 'sm', usePortal: true, minWidth: 200 }\"\n (itemClick)=\"onDropdownItemClick($event, row)\">\n </cide-ele-dropdown>\n </ng-template>\n</cide-lyt-shared-wrapper>", styles: [".user-master-listing-container{@apply tw-w-full tw-h-full tw-flex tw-flex-col tw-min-w-0;}cide-ele-data-grid{@apply tw-w-full tw-h-full tw-min-w-0;}:host{@apply tw-w-full tw-h-full tw-flex tw-flex-col tw-min-w-0;}\n"] }]
|
|
18340
18349
|
}], ctorParameters: () => [], propDecorators: { gridComponent: [{
|
|
18341
18350
|
type: ViewChild,
|
|
18342
18351
|
args: [CideEleDataGridComponent]
|
|
@@ -20990,7 +20999,7 @@ class CideCoreUserRoleListComponent {
|
|
|
20990
20999
|
return entity || 'N/A';
|
|
20991
21000
|
}
|
|
20992
21001
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideCoreUserRoleListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
20993
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: CideCoreUserRoleListComponent, isStandalone: true, selector: "cide-core-user-role-list", viewQueries: [{ propertyName: "userRoleDetailsRendererTemplate", first: true, predicate: ["userRoleDetailsRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "statusRendererTemplate", first: true, predicate: ["statusRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "actionsDropdownRendererTemplate", first: true, predicate: ["actionsDropdownRendererTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- User Role List with Shared Wrapper -->\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'core_user_role' }\">\n <div class=\"tw-table tw-w-full tw-h-full\">\n\n <!-- Header Section with Filters -->\n <div class=\"tw-table-row tw-h-0\">\n <div class=\"tw-table-cell tw-px-6 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\n <div\n class=\"tw-flex tw-flex-col sm:tw-flex-row tw-justify-between tw-items-start sm:tw-items-center tw-space-y-3 sm:tw-space-y-0\">\n\n <!-- Title -->\n <div class=\"tw-flex tw-items-center tw-space-x-2\">\n <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">admin_panel_settings</cide-ele-icon>\n <h5 class=\"tw-text-base tw-font-medium tw-text-gray-900 tw-m-0\">User Role Management</h5>\n </div>\n\n <!-- Actions -->\n <div\n class=\"tw-flex tw-flex-col sm:tw-flex-row tw-items-start sm:tw-items-center tw-space-y-3 sm:tw-space-y-0 sm:tw-space-x-3\">\n <button cideEleButton variant=\"primary\" size=\"
|
|
21002
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: CideCoreUserRoleListComponent, isStandalone: true, selector: "cide-core-user-role-list", viewQueries: [{ propertyName: "userRoleDetailsRendererTemplate", first: true, predicate: ["userRoleDetailsRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "statusRendererTemplate", first: true, predicate: ["statusRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "actionsDropdownRendererTemplate", first: true, predicate: ["actionsDropdownRendererTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- User Role List with Shared Wrapper -->\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'core_user_role' }\">\n <div class=\"tw-table tw-w-full tw-h-full\">\n\n <!-- Header Section with Filters -->\n <div class=\"tw-table-row tw-h-0\">\n <div class=\"tw-table-cell tw-px-6 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\n <div\n class=\"tw-flex tw-flex-col sm:tw-flex-row tw-justify-between tw-items-start sm:tw-items-center tw-space-y-3 sm:tw-space-y-0\">\n\n <!-- Title -->\n <div class=\"tw-flex tw-items-center tw-space-x-2\">\n <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">admin_panel_settings</cide-ele-icon>\n <h5 class=\"tw-text-base tw-font-medium tw-text-gray-900 tw-m-0\">User Role Management</h5>\n </div>\n\n <!-- Actions -->\n <div\n class=\"tw-flex tw-flex-col sm:tw-flex-row tw-items-start sm:tw-items-center tw-space-y-3 sm:tw-space-y-0 sm:tw-space-x-3\">\n <button cideEleButton variant=\"primary\" size=\"xs\" leftIcon=\"add\" (click)=\"createUserRole()\">\n Create User Role\n </button>\n </div>\n </div>\n\n <!-- Error Message -->\n @if (error()) {\n <div class=\"tw-mt-4 tw-p-4 tw-bg-red-50 tw-border tw-border-red-200 tw-rounded-md\">\n <div class=\"tw-flex tw-items-start\">\n <cide-ele-icon name=\"error\"\n class=\"tw-text-red-400 tw-w-5 tw-h-5 tw-mt-0.5 tw-flex-shrink-0\"></cide-ele-icon>\n <div class=\"tw-ml-3\">\n <h3 class=\"tw-text-sm tw-font-medium tw-text-red-800 tw-m-0\">Error</h3>\n <p class=\"tw-text-sm tw-text-red-700 tw-mt-1 tw-m-0\">{{ error() }}</p>\n </div>\n </div>\n </div>\n }\n </div>\n </div>\n\n <!-- Main Content Area -->\n <div class=\"tw-table-row\">\n <div class=\"tw-table-cell tw-h-full tw-relative\">\n\n <!-- Data Grid Component -->\n <div class=\"tw-h-full tw-overflow-auto\">\n <cide-ele-data-grid [config]=\"gridConfig()\" [templateRenderers]=\"templateRenderers()\"\n (gridEvent)=\"onGridEvent($event)\">\n </cide-ele-data-grid>\n </div>\n\n </div>\n </div>\n\n </div>\n\n <!-- Template Renderers -->\n <ng-template #userRoleDetailsRendererTemplate let-row=\"row\">\n <div class=\"tw-flex tw-flex-col tw-w-full\">\n <div class=\"tw-font-medium tw-text-gray-900\">{{ row.syusrol_role_name || 'N/A' }}</div>\n <div class=\"tw-text-sm tw-text-gray-500 tw-truncate\">{{ row.syusrol_role_description || 'No description' }}</div>\n </div>\n </ng-template>\n\n <ng-template #statusRendererTemplate let-row=\"row\">\n <div class=\"tw-flex tw-items-center tw-justify-center\">\n <!-- Active/Inactive Status Badge -->\n <span\n class=\"tw-inline-flex tw-items-center tw-justify-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-text-center\"\n [ngClass]=\"getStatusBadgeClass(row)\">\n <cide-ele-icon size=\"2xs\" class=\"tw-mr-1\">\n {{ row.syusrol_isactive ? 'check_circle' : 'cancel' }}\n </cide-ele-icon>\n {{ getStatusText(row) }}\n </span>\n </div>\n </ng-template>\n\n <ng-template #actionsDropdownRendererTemplate let-row=\"row\">\n <cide-ele-dropdown [items]=\"getActionDropdownItems(row)\" [config]=\"{ triggerIcon: 'more_vert', triggerSize: 'sm' }\"\n (itemClick)=\"onDropdownItemClick($event, row)\">\n </cide-ele-dropdown>\n </ng-template>\n</cide-lyt-shared-wrapper>", styles: [".user-role-listing-container{@apply tw-w-full tw-h-full;}:host{@apply tw-w-full tw-h-full tw-flex tw-flex-col;}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip", "name"] }, { 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", "adaptive"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideEleDataGridComponent, selector: "cide-ele-data-grid", inputs: ["config", "templateRenderers", "customFormatters", "actionHandlers", "serverSidePagination", "totalServerItems", "currentServerPage", "currentServerPageSize", "dragDropEnabled"], outputs: ["gridEvent"] }, { kind: "component", type: CideEleDropdownComponent, selector: "cide-ele-dropdown", inputs: ["items", "config", "triggerTemplate", "menuTemplate"], outputs: ["itemClick", "dropdownToggle"] }, { kind: "component", type: CideLytSharedWrapperComponent, selector: "cide-lyt-shared-wrapper", inputs: ["shared_wrapper_setup_param", "breadcrumb_data"] }] });
|
|
20994
21003
|
}
|
|
20995
21004
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideCoreUserRoleListComponent, decorators: [{
|
|
20996
21005
|
type: Component,
|
|
@@ -21002,7 +21011,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
21002
21011
|
CideEleDataGridComponent,
|
|
21003
21012
|
CideEleDropdownComponent,
|
|
21004
21013
|
CideLytSharedWrapperComponent
|
|
21005
|
-
], template: "<!-- User Role List with Shared Wrapper -->\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'core_user_role' }\">\n <div class=\"tw-table tw-w-full tw-h-full\">\n\n <!-- Header Section with Filters -->\n <div class=\"tw-table-row tw-h-0\">\n <div class=\"tw-table-cell tw-px-6 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\n <div\n class=\"tw-flex tw-flex-col sm:tw-flex-row tw-justify-between tw-items-start sm:tw-items-center tw-space-y-3 sm:tw-space-y-0\">\n\n <!-- Title -->\n <div class=\"tw-flex tw-items-center tw-space-x-2\">\n <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">admin_panel_settings</cide-ele-icon>\n <h5 class=\"tw-text-base tw-font-medium tw-text-gray-900 tw-m-0\">User Role Management</h5>\n </div>\n\n <!-- Actions -->\n <div\n class=\"tw-flex tw-flex-col sm:tw-flex-row tw-items-start sm:tw-items-center tw-space-y-3 sm:tw-space-y-0 sm:tw-space-x-3\">\n <button cideEleButton variant=\"primary\" size=\"
|
|
21014
|
+
], template: "<!-- User Role List with Shared Wrapper -->\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'core_user_role' }\">\n <div class=\"tw-table tw-w-full tw-h-full\">\n\n <!-- Header Section with Filters -->\n <div class=\"tw-table-row tw-h-0\">\n <div class=\"tw-table-cell tw-px-6 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\n <div\n class=\"tw-flex tw-flex-col sm:tw-flex-row tw-justify-between tw-items-start sm:tw-items-center tw-space-y-3 sm:tw-space-y-0\">\n\n <!-- Title -->\n <div class=\"tw-flex tw-items-center tw-space-x-2\">\n <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">admin_panel_settings</cide-ele-icon>\n <h5 class=\"tw-text-base tw-font-medium tw-text-gray-900 tw-m-0\">User Role Management</h5>\n </div>\n\n <!-- Actions -->\n <div\n class=\"tw-flex tw-flex-col sm:tw-flex-row tw-items-start sm:tw-items-center tw-space-y-3 sm:tw-space-y-0 sm:tw-space-x-3\">\n <button cideEleButton variant=\"primary\" size=\"xs\" leftIcon=\"add\" (click)=\"createUserRole()\">\n Create User Role\n </button>\n </div>\n </div>\n\n <!-- Error Message -->\n @if (error()) {\n <div class=\"tw-mt-4 tw-p-4 tw-bg-red-50 tw-border tw-border-red-200 tw-rounded-md\">\n <div class=\"tw-flex tw-items-start\">\n <cide-ele-icon name=\"error\"\n class=\"tw-text-red-400 tw-w-5 tw-h-5 tw-mt-0.5 tw-flex-shrink-0\"></cide-ele-icon>\n <div class=\"tw-ml-3\">\n <h3 class=\"tw-text-sm tw-font-medium tw-text-red-800 tw-m-0\">Error</h3>\n <p class=\"tw-text-sm tw-text-red-700 tw-mt-1 tw-m-0\">{{ error() }}</p>\n </div>\n </div>\n </div>\n }\n </div>\n </div>\n\n <!-- Main Content Area -->\n <div class=\"tw-table-row\">\n <div class=\"tw-table-cell tw-h-full tw-relative\">\n\n <!-- Data Grid Component -->\n <div class=\"tw-h-full tw-overflow-auto\">\n <cide-ele-data-grid [config]=\"gridConfig()\" [templateRenderers]=\"templateRenderers()\"\n (gridEvent)=\"onGridEvent($event)\">\n </cide-ele-data-grid>\n </div>\n\n </div>\n </div>\n\n </div>\n\n <!-- Template Renderers -->\n <ng-template #userRoleDetailsRendererTemplate let-row=\"row\">\n <div class=\"tw-flex tw-flex-col tw-w-full\">\n <div class=\"tw-font-medium tw-text-gray-900\">{{ row.syusrol_role_name || 'N/A' }}</div>\n <div class=\"tw-text-sm tw-text-gray-500 tw-truncate\">{{ row.syusrol_role_description || 'No description' }}</div>\n </div>\n </ng-template>\n\n <ng-template #statusRendererTemplate let-row=\"row\">\n <div class=\"tw-flex tw-items-center tw-justify-center\">\n <!-- Active/Inactive Status Badge -->\n <span\n class=\"tw-inline-flex tw-items-center tw-justify-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-text-center\"\n [ngClass]=\"getStatusBadgeClass(row)\">\n <cide-ele-icon size=\"2xs\" class=\"tw-mr-1\">\n {{ row.syusrol_isactive ? 'check_circle' : 'cancel' }}\n </cide-ele-icon>\n {{ getStatusText(row) }}\n </span>\n </div>\n </ng-template>\n\n <ng-template #actionsDropdownRendererTemplate let-row=\"row\">\n <cide-ele-dropdown [items]=\"getActionDropdownItems(row)\" [config]=\"{ triggerIcon: 'more_vert', triggerSize: 'sm' }\"\n (itemClick)=\"onDropdownItemClick($event, row)\">\n </cide-ele-dropdown>\n </ng-template>\n</cide-lyt-shared-wrapper>", styles: [".user-role-listing-container{@apply tw-w-full tw-h-full;}:host{@apply tw-w-full tw-h-full tw-flex tw-flex-col;}\n"] }]
|
|
21006
21015
|
}], propDecorators: { userRoleDetailsRendererTemplate: [{ type: i0.ViewChild, args: ['userRoleDetailsRendererTemplate', { isSignal: true }] }], statusRendererTemplate: [{ type: i0.ViewChild, args: ['statusRendererTemplate', { isSignal: true }] }], actionsDropdownRendererTemplate: [{ type: i0.ViewChild, args: ['actionsDropdownRendererTemplate', { isSignal: true }] }] } });
|
|
21007
21016
|
|
|
21008
21017
|
var userRoleList_component = /*#__PURE__*/Object.freeze({
|
|
@@ -21314,7 +21323,7 @@ class CopyRoleDrawerComponent {
|
|
|
21314
21323
|
</button>
|
|
21315
21324
|
</div>
|
|
21316
21325
|
</div>
|
|
21317
|
-
`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated", "adaptive"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput", "options", "multiple", "searchable", "showSearchInput", "loading", "valueKey", "labelKey", "treeView"], outputs: ["ngModelChange", "change", "searchChange"] }] });
|
|
21326
|
+
`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated", "adaptive"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip", "name"] }, { 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"] }] });
|
|
21318
21327
|
}
|
|
21319
21328
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CopyRoleDrawerComponent, decorators: [{
|
|
21320
21329
|
type: Component,
|
|
@@ -22026,7 +22035,15 @@ class CideCoreUserRoleFormComponent {
|
|
|
22026
22035
|
const action = this.isEditMode() ? 'updated' : 'created';
|
|
22027
22036
|
this.notificationService.success(`User role has been ${action} successfully.`);
|
|
22028
22037
|
this.cdr.detectChanges();
|
|
22029
|
-
|
|
22038
|
+
console.log('✅ Save success, navigating to user role list...');
|
|
22039
|
+
this.router.navigate(['/control-panel/user-role'])
|
|
22040
|
+
.then(success => {
|
|
22041
|
+
console.log('🧭 Navigation result:', success);
|
|
22042
|
+
if (!success) {
|
|
22043
|
+
console.error('❌ Navigation failed!');
|
|
22044
|
+
}
|
|
22045
|
+
})
|
|
22046
|
+
.catch(err => console.error('❌ Navigation error:', err));
|
|
22030
22047
|
}
|
|
22031
22048
|
else {
|
|
22032
22049
|
this.notificationService.error(response?.message || 'Failed to save user role.');
|
|
@@ -22439,7 +22456,7 @@ class CideCoreUserRoleFormComponent {
|
|
|
22439
22456
|
this.cdr.detectChanges();
|
|
22440
22457
|
}
|
|
22441
22458
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideCoreUserRoleFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
22442
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: CideCoreUserRoleFormComponent, isStandalone: true, selector: "cide-core-user-role-form", viewQueries: [{ propertyName: "menuDetailsRendererTemplate", first: true, predicate: ["menuDetailsRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "permissionsCheckboxRendererTemplate", first: true, predicate: ["permissionsCheckboxRendererTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- User Role Form Container -->\n<div class=\"tw-w-full tw-h-full\">\n <form class=\"tw-max-w-7xl tw-mx-auto tw-bg-transparent tw-h-full tw-flex tw-flex-col\" [formGroup]=\"userRoleForm\" [class.tw-opacity-60]=\"loading()\" (ngSubmit)=\"onSubmit()\">\n\n <!-- Error Message -->\n @if (error()) {\n <div class=\"tw-mb-6 tw-p-4 tw-bg-red-50 tw-border tw-border-red-200 tw-rounded-md\">\n <div class=\"tw-flex tw-items-start\">\n <cide-ele-icon name=\"error\" class=\"tw-text-red-400 tw-w-5 tw-h-5 tw-mt-0.5 tw-flex-shrink-0\"></cide-ele-icon>\n <div class=\"tw-ml-3\">\n <h3 class=\"tw-text-sm tw-font-medium tw-text-red-800 tw-m-0\">Error</h3>\n <p class=\"tw-text-sm tw-text-red-700 tw-mt-1 tw-m-0\">{{ error() }}</p>\n </div>\n </div>\n </div>\n }\n <!-- User Role Basic Information Section -->\n <div class=\"tw-py-2 tw-border-b-0 tw-mb-0 tw-p-3\">\n\n <!-- Copy Role Button (only in create mode) -->\n @if (!isEditMode() && !isViewMode()) {\n <div class=\"tw-mb-4\">\n <button \n cideEleButton \n type=\"button\"\n variant=\"secondary\" \n leftIcon=\"content_copy\"\n (click)=\"openCopyRoleDialog()\">\n Copy from Existing Role\n </button>\n </div>\n }\n\n <!-- Basic Fields -->\n <div class=\"tw-grid tw-grid-cols-1 xl:tw-grid-cols-2 lg:tw-grid-cols-2 md:tw-grid-cols-1 tw-gap-6 tw-mb-0\">\n <!-- Left Column: Role Name -->\n <div>\n <cide-ele-input \n id=\"syusrol_role_name\" \n label=\"Role Name\" \n formControlName=\"syusrol_role_name\"\n placeholder=\"Enter role name\" \n [maxlength]=\"50\" \n size=\"md\"\n [disabled]=\"isViewMode()\">\n </cide-ele-input>\n </div>\n\n <!-- Right Column: Description -->\n <div>\n <cide-ele-textarea \n id=\"syusrol_role_description\" \n label=\"Description\" \n formControlName=\"syusrol_role_description\"\n placeholder=\"Enter role description\" \n rows=\"3\"\n [maxlength]=\"200\"\n [disabled]=\"isViewMode()\">\n </cide-ele-textarea>\n </div>\n </div>\n\n <!-- Active Status Row -->\n <div class=\"tw-mb-0\">\n <cide-ele-input \n id=\"syusrol_isactive\" \n label=\"Active Status\" \n formControlName=\"syusrol_isactive\"\n type=\"checkbox\" \n size=\"md\"\n [disabled]=\"isViewMode()\">\n </cide-ele-input>\n </div>\n </div>\n\n <!-- Role Rights Section -->\n <div class=\"tw-pt-2 tw-border-b-0 tw-mb-0 tw-flex-1 tw-flex tw-flex-col tw-min-h-0\">\n\n <!-- Role Rights Grid -->\n <div class=\"tw-flex-1 tw-min-h-0 tw-w-full\" style=\"height: 400px; max-height: 900px;\">\n <cide-ele-data-grid \n [config]=\"roleRightsGridConfig()\" \n [templateRenderers]=\"templateRenderers()\"\n (gridEvent)=\"onRoleRightsGridEvent($event)\"\n class=\"tw-h-full tw-w-full\">\n </cide-ele-data-grid>\n </div>\n\n <!-- Role Rights Form (Hidden but functional) -->\n <div [formGroup]=\"roleRightsForm\" class=\"tw-hidden\">\n <div formArrayName=\"roleRights\">\n @for (right of roleRightsArray.controls; track $index; let i = $index) {\n <div [formGroupName]=\"i\">\n <cide-ele-select formControlName=\"syusrgt_menu_id_syme\">\n <option value=\"\">Select Menu</option>\n @for (menu of menus(); track menu._id) {\n <option [value]=\"menu._id\">{{ menu.syme_title }}</option>\n }\n </cide-ele-select>\n <cide-ele-select formControlName=\"syusrgt_role_permissions_id_sygms\">\n <option value=\"\">Select Permission</option>\n @for (permission of permissions(); track permission._id) {\n <option [value]=\"permission._id\">{{ permission.sygms_name }}</option>\n }\n </cide-ele-select>\n <cide-ele-input formControlName=\"syusrgt_isactive\" type=\"checkbox\"></cide-ele-input>\n </div>\n }\n </div>\n </div>\n </div>\n\n <!-- Form Actions -->\n <div class=\"tw-flex tw-justify-between tw-items-center tw-p-3 tw-gap-4 tw-py-2 tw-bg-white tw-border-t tw-border-gray-200 tw-sticky tw-bottom-0 tw-z-10\">\n <!-- Error Message (Left Side) -->\n <cide-form-field-error [formGroup]=\"userRoleForm\"></cide-form-field-error>\n \n <!-- Action Buttons (Right Side) -->\n <div class=\"tw-flex tw-gap-4\">\n <button cideEleButton type=\"button\" variant=\"secondary\" (click)=\"onCancel()\" leftIcon=\"arrow_back\"\n [disabled]=\"loading()\">\n {{ isViewMode() ? 'Close' : 'Cancel' }}\n </button>\n\n @if (!isViewMode()) {\n <button cideEleButton type=\"submit\" variant=\"primary\" [disabled]=\"loading() || !isFormReadyToSave\"\n [loading]=\"loading()\" leftIcon=\"save\">\n {{ submitButtonText }}\n </button>\n }\n </div>\n </div>\n </form>\n</div>\n\n<!-- Template Renderers for Role Rights Grid -->\n<ng-template #menuDetailsRendererTemplate let-row=\"row\" let-value=\"value\">\n <div class=\"tw-flex tw-items-center tw-min-w-0\">\n <!-- Menu Icon -->\n <div class=\"tw-flex-shrink-0\">\n <cide-ele-icon \n class=\"tw-text-gray-400\" \n size=\"xs\">\n {{ row.syme_icon || 'folder_open' }}\n </cide-ele-icon>\n </div>\n \n <!-- Menu Details -->\n <div class=\"tw-ml-3 tw-min-w-0 tw-flex-1\">\n <div class=\"tw-flex tw-items-center tw-gap-2\">\n <div class=\"tw-text-xs tw-font-medium tw-text-gray-900 tw-truncate\" \n [title]=\"row.syme_title\">\n {{ row.syme_title || row.menu?.syme_title || row.menu?.syme_menu_name || 'Untitled' }}\n </div>\n <!-- Green pill indicator for parent menus with child permissions -->\n @if (row.syme_type === 'module' || row.syme_type === 'section') {\n @if (hasChildMenusWithPermissions(row._id)) {\n <span class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-green-100 tw-text-green-800 tw-whitespace-nowrap\">\n Assigned\n </span>\n }\n }\n </div>\n @if (row.permission?.sygms_name) {\n <div class=\"tw-text-xs tw-text-blue-500 tw-truncate\" \n [title]=\"row.permission?.sygms_name\">\n {{ row.permission?.sygms_name }}\n </div>\n }\n </div>\n </div>\n</ng-template>\n\n\n<!-- Permissions Checkbox Renderer Template -->\n<ng-template #permissionsCheckboxRendererTemplate let-row=\"row\" let-value=\"value\">\n <div class=\"tw-flex tw-flex-wrap tw-gap-2 tw-max-w-full\">\n @if (row.syme_type === 'menu' && row?.syme_permissions_id_sygms && row?.syme_permissions_id_sygms.length > 0) {\n @for (permissionId of row?.syme_permissions_id_sygms || []; track permissionId) {\n <div class=\"tw-flex tw-items-center tw-space-x-1\">\n <cide-ele-input \n type=\"checkbox\"\n [label]=\"getPermissionById(permissionId)?.sygms_name || 'Unknown'\"\n [ngModel]=\"isPermissionSelected(row._id, permissionId)\"\n (ngModelChange)=\"onPermissionCheckboxChange(row._id, permissionId, $event)\"\n size=\"xs\"\n [disabled]=\"isViewMode()\">\n </cide-ele-input>\n </div>\n }\n } @else {\n <!-- Show green checkmark for parent menus with child permissions -->\n @if (row.syme_type === 'module' || row.syme_type === 'section' || row.syme_type === 'title') {\n @if (hasChildMenusWithPermissions(row._id)) {\n <div class=\"tw-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-bg-green-100 tw-rounded-full\" \n [title]=\"hasParentViewRight(row._id) ? 'View right automatically enabled' : 'Child permissions assigned'\">\n <cide-ele-icon \n class=\"tw-text-green-600\" \n size=\"xs\">\n check\n </cide-ele-icon>\n </div>\n } @else if (hasParentViewRight(row._id)) {\n <!-- Show green checkmark for parent with view right -->\n <cide-ele-icon \n class=\"tw-text-green-600\" \n size=\"xs\"\n title=\"View right automatically enabled\">\n check\n </cide-ele-icon>\n } @else {\n <span class=\"tw-text-xs tw-text-gray-400\">N/A</span>\n }\n } @else {\n <span class=\"tw-text-xs tw-text-gray-400\">N/A</span>\n }\n }\n </div>\n</ng-template>", styles: [":host{@apply tw-w-full tw-h-full tw-flex tw-flex-col;}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1$2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated", "adaptive"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideInputComponent, selector: "cide-ele-input", inputs: ["fill", "label", "labelHide", "disabled", "clearInput", "labelPlacement", "labelDir", "placeholder", "leadingIcon", "trailingIcon", "helperText", "helperTextCollapse", "hideHelperAndErrorText", "errorText", "maxlength", "minlength", "required", "autocapitalize", "autocomplete", "type", "width", "id", "ngModel", "option", "min", "max", "step", "size"], outputs: ["ngModelChange"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput", "options", "multiple", "searchable", "showSearchInput", "loading", "valueKey", "labelKey", "treeView"], outputs: ["ngModelChange", "change", "searchChange"] }, { kind: "component", type: CideTextareaComponent, selector: "cide-ele-textarea", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "minlength", "maxlength", "rows", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput"], outputs: ["ngModelChange"] }, { kind: "component", type: CideEleDataGridComponent, selector: "cide-ele-data-grid", inputs: ["config", "templateRenderers", "customFormatters", "actionHandlers", "serverSidePagination", "totalServerItems", "currentServerPage", "currentServerPageSize", "dragDropEnabled"], outputs: ["gridEvent"] }, { kind: "component", type: CideFormFieldErrorComponent, selector: "cide-form-field-error", inputs: ["control", "formGroup", "fieldName", "customMessages"] }] });
|
|
22459
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: CideCoreUserRoleFormComponent, isStandalone: true, selector: "cide-core-user-role-form", viewQueries: [{ propertyName: "menuDetailsRendererTemplate", first: true, predicate: ["menuDetailsRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "permissionsCheckboxRendererTemplate", first: true, predicate: ["permissionsCheckboxRendererTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- User Role Form Container -->\n<div class=\"tw-w-full tw-h-full\">\n <form class=\"tw-max-w-7xl tw-mx-auto tw-bg-transparent tw-h-full tw-flex tw-flex-col\" [formGroup]=\"userRoleForm\" [class.tw-opacity-60]=\"loading()\" (ngSubmit)=\"onSubmit()\">\n\n <!-- Error Message -->\n @if (error()) {\n <div class=\"tw-mb-6 tw-p-4 tw-bg-red-50 tw-border tw-border-red-200 tw-rounded-md\">\n <div class=\"tw-flex tw-items-start\">\n <cide-ele-icon name=\"error\" class=\"tw-text-red-400 tw-w-5 tw-h-5 tw-mt-0.5 tw-flex-shrink-0\"></cide-ele-icon>\n <div class=\"tw-ml-3\">\n <h3 class=\"tw-text-sm tw-font-medium tw-text-red-800 tw-m-0\">Error</h3>\n <p class=\"tw-text-sm tw-text-red-700 tw-mt-1 tw-m-0\">{{ error() }}</p>\n </div>\n </div>\n </div>\n }\n <!-- User Role Basic Information Section -->\n <div class=\"tw-py-2 tw-border-b-0 tw-mb-0 tw-p-3\">\n\n <!-- Copy Role Button (only in create mode) -->\n @if (!isEditMode() && !isViewMode()) {\n <div class=\"tw-mb-4\">\n <button \n cideEleButton \n type=\"button\"\n variant=\"secondary\" \n leftIcon=\"content_copy\"\n (click)=\"openCopyRoleDialog()\">\n Copy from Existing Role\n </button>\n </div>\n }\n\n <!-- Basic Fields -->\n <div class=\"tw-grid tw-grid-cols-1 xl:tw-grid-cols-2 lg:tw-grid-cols-2 md:tw-grid-cols-1 tw-gap-6 tw-mb-0\">\n <!-- Left Column: Role Name -->\n <div>\n <cide-ele-input \n id=\"syusrol_role_name\" \n label=\"Role Name\" \n formControlName=\"syusrol_role_name\"\n placeholder=\"Enter role name\" \n [maxlength]=\"50\" \n size=\"md\"\n [disabled]=\"isViewMode()\">\n </cide-ele-input>\n </div>\n\n <!-- Right Column: Description -->\n <div>\n <cide-ele-textarea \n id=\"syusrol_role_description\" \n label=\"Description\" \n formControlName=\"syusrol_role_description\"\n placeholder=\"Enter role description\" \n rows=\"3\"\n [maxlength]=\"200\"\n [disabled]=\"isViewMode()\">\n </cide-ele-textarea>\n </div>\n </div>\n\n <!-- Active Status Row -->\n <div class=\"tw-mb-0\">\n <cide-ele-input \n id=\"syusrol_isactive\" \n label=\"Active Status\" \n formControlName=\"syusrol_isactive\"\n type=\"checkbox\" \n size=\"md\"\n [disabled]=\"isViewMode()\">\n </cide-ele-input>\n </div>\n </div>\n\n <!-- Role Rights Section -->\n <div class=\"tw-pt-2 tw-border-b-0 tw-mb-0 tw-flex-1 tw-flex tw-flex-col tw-min-h-0\">\n\n <!-- Role Rights Grid -->\n <div class=\"tw-flex-1 tw-min-h-0 tw-w-full\" style=\"height: 400px; max-height: 900px;\">\n <cide-ele-data-grid \n [config]=\"roleRightsGridConfig()\" \n [templateRenderers]=\"templateRenderers()\"\n (gridEvent)=\"onRoleRightsGridEvent($event)\"\n class=\"tw-h-full tw-w-full\">\n </cide-ele-data-grid>\n </div>\n\n <!-- Role Rights Form (Hidden but functional) -->\n <div [formGroup]=\"roleRightsForm\" class=\"tw-hidden\">\n <div formArrayName=\"roleRights\">\n @for (right of roleRightsArray.controls; track $index; let i = $index) {\n <div [formGroupName]=\"i\">\n <cide-ele-select formControlName=\"syusrgt_menu_id_syme\">\n <option value=\"\">Select Menu</option>\n @for (menu of menus(); track menu._id) {\n <option [value]=\"menu._id\">{{ menu.syme_title }}</option>\n }\n </cide-ele-select>\n <cide-ele-select formControlName=\"syusrgt_role_permissions_id_sygms\">\n <option value=\"\">Select Permission</option>\n @for (permission of permissions(); track permission._id) {\n <option [value]=\"permission._id\">{{ permission.sygms_name }}</option>\n }\n </cide-ele-select>\n <cide-ele-input formControlName=\"syusrgt_isactive\" type=\"checkbox\"></cide-ele-input>\n </div>\n }\n </div>\n </div>\n </div>\n\n <!-- Form Actions -->\n <div class=\"tw-flex tw-justify-between tw-items-center tw-p-3 tw-gap-4 tw-py-2 tw-bg-white tw-border-t tw-border-gray-200 tw-sticky tw-bottom-0 tw-z-10\">\n <!-- Error Message (Left Side) -->\n <cide-form-field-error [formGroup]=\"userRoleForm\"></cide-form-field-error>\n \n <!-- Action Buttons (Right Side) -->\n <div class=\"tw-flex tw-gap-4\">\n <button cideEleButton type=\"button\" variant=\"secondary\" (click)=\"onCancel()\" leftIcon=\"arrow_back\"\n [disabled]=\"loading()\">\n {{ isViewMode() ? 'Close' : 'Cancel' }}\n </button>\n\n @if (!isViewMode()) {\n <button cideEleButton type=\"submit\" variant=\"primary\" [disabled]=\"loading() || !isFormReadyToSave\"\n [loading]=\"loading()\" leftIcon=\"save\">\n {{ submitButtonText }}\n </button>\n }\n </div>\n </div>\n </form>\n</div>\n\n<!-- Template Renderers for Role Rights Grid -->\n<ng-template #menuDetailsRendererTemplate let-row=\"row\" let-value=\"value\">\n <div class=\"tw-flex tw-items-center tw-min-w-0\">\n <!-- Menu Icon -->\n <div class=\"tw-flex-shrink-0\">\n <cide-ele-icon \n class=\"tw-text-gray-400\" \n size=\"xs\">\n {{ row.syme_icon || 'folder_open' }}\n </cide-ele-icon>\n </div>\n \n <!-- Menu Details -->\n <div class=\"tw-ml-3 tw-min-w-0 tw-flex-1\">\n <div class=\"tw-flex tw-items-center tw-gap-2\">\n <div class=\"tw-text-xs tw-font-medium tw-text-gray-900 tw-truncate\" \n [title]=\"row.syme_title\">\n {{ row.syme_title || row.menu?.syme_title || row.menu?.syme_menu_name || 'Untitled' }}\n </div>\n <!-- Green pill indicator for parent menus with child permissions -->\n @if (row.syme_type === 'module' || row.syme_type === 'section') {\n @if (hasChildMenusWithPermissions(row._id)) {\n <span class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-green-100 tw-text-green-800 tw-whitespace-nowrap\">\n Assigned\n </span>\n }\n }\n </div>\n @if (row.permission?.sygms_name) {\n <div class=\"tw-text-xs tw-text-blue-500 tw-truncate\" \n [title]=\"row.permission?.sygms_name\">\n {{ row.permission?.sygms_name }}\n </div>\n }\n </div>\n </div>\n</ng-template>\n\n\n<!-- Permissions Checkbox Renderer Template -->\n<ng-template #permissionsCheckboxRendererTemplate let-row=\"row\" let-value=\"value\">\n <div class=\"tw-flex tw-flex-wrap tw-gap-2 tw-max-w-full\">\n @if (row.syme_type === 'menu' && row?.syme_permissions_id_sygms && row?.syme_permissions_id_sygms.length > 0) {\n @for (permissionId of row?.syme_permissions_id_sygms || []; track permissionId) {\n <div class=\"tw-flex tw-items-center tw-space-x-1\">\n <cide-ele-input \n type=\"checkbox\"\n [label]=\"getPermissionById(permissionId)?.sygms_name || 'Unknown'\"\n [ngModel]=\"isPermissionSelected(row._id, permissionId)\"\n (ngModelChange)=\"onPermissionCheckboxChange(row._id, permissionId, $event)\"\n size=\"xs\"\n [disabled]=\"isViewMode()\">\n </cide-ele-input>\n </div>\n }\n } @else {\n <!-- Show green checkmark for parent menus with child permissions -->\n @if (row.syme_type === 'module' || row.syme_type === 'section' || row.syme_type === 'title') {\n @if (hasChildMenusWithPermissions(row._id)) {\n <div class=\"tw-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-bg-green-100 tw-rounded-full\" \n [title]=\"hasParentViewRight(row._id) ? 'View right automatically enabled' : 'Child permissions assigned'\">\n <cide-ele-icon \n class=\"tw-text-green-600\" \n size=\"xs\">\n check\n </cide-ele-icon>\n </div>\n } @else if (hasParentViewRight(row._id)) {\n <!-- Show green checkmark for parent with view right -->\n <cide-ele-icon \n class=\"tw-text-green-600\" \n size=\"xs\"\n title=\"View right automatically enabled\">\n check\n </cide-ele-icon>\n } @else {\n <span class=\"tw-text-xs tw-text-gray-400\">N/A</span>\n }\n } @else {\n <span class=\"tw-text-xs tw-text-gray-400\">N/A</span>\n }\n }\n </div>\n</ng-template>", styles: [":host{@apply tw-w-full tw-h-full tw-flex tw-flex-col;}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1$2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated", "adaptive"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip", "name"] }, { kind: "component", type: CideInputComponent, selector: "cide-ele-input", inputs: ["fill", "label", "labelHide", "disabled", "clearInput", "labelPlacement", "labelDir", "placeholder", "leadingIcon", "trailingIcon", "helperText", "helperTextCollapse", "hideHelperAndErrorText", "errorText", "maxlength", "minlength", "required", "autocapitalize", "autocomplete", "type", "width", "id", "ngModel", "option", "min", "max", "step", "size"], outputs: ["ngModelChange"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput", "options", "multiple", "searchable", "showSearchInput", "loading", "valueKey", "labelKey", "treeView"], outputs: ["ngModelChange", "change", "searchChange"] }, { kind: "component", type: CideTextareaComponent, selector: "cide-ele-textarea", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "minlength", "maxlength", "rows", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput"], outputs: ["ngModelChange"] }, { kind: "component", type: CideEleDataGridComponent, selector: "cide-ele-data-grid", inputs: ["config", "templateRenderers", "customFormatters", "actionHandlers", "serverSidePagination", "totalServerItems", "currentServerPage", "currentServerPageSize", "dragDropEnabled"], outputs: ["gridEvent"] }, { kind: "component", type: CideFormFieldErrorComponent, selector: "cide-form-field-error", inputs: ["control", "formGroup", "fieldName", "customMessages"] }] });
|
|
22443
22460
|
}
|
|
22444
22461
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideCoreUserRoleFormComponent, decorators: [{
|
|
22445
22462
|
type: Component,
|