cloud-ide-core 0.0.1 → 1.0.1
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/esm2022/lib/cloud-ide-core.routes.mjs +137 -0
- package/esm2022/lib/core/general-master-management/components/general-master/general-master.component.mjs +738 -0
- package/esm2022/lib/core/general-master-management/components/general-master-type/general-master-type.component.mjs +608 -0
- package/esm2022/lib/core/general-master-management/services/general-master-type.service.mjs +203 -0
- package/esm2022/lib/core/general-master-management/services/general-master.service.mjs +166 -0
- package/esm2022/lib/core/page-management/components/page-form/page-form.component.mjs +212 -0
- package/esm2022/public-api.mjs +2 -1
- package/fesm2022/cloud-ide-core-general-master-type.component-B26auJZw.mjs +611 -0
- package/fesm2022/cloud-ide-core-general-master-type.component-B26auJZw.mjs.map +1 -0
- package/fesm2022/cloud-ide-core-general-master-type.service-Ab64Jjps.mjs +206 -0
- package/fesm2022/cloud-ide-core-general-master-type.service-Ab64Jjps.mjs.map +1 -0
- package/fesm2022/cloud-ide-core-general-master.component-B6llTVoV.mjs +903 -0
- package/fesm2022/cloud-ide-core-general-master.component-B6llTVoV.mjs.map +1 -0
- package/fesm2022/cloud-ide-core-page-form.component-CaEca3mB.mjs +215 -0
- package/fesm2022/cloud-ide-core-page-form.component-CaEca3mB.mjs.map +1 -0
- package/fesm2022/cloud-ide-core.mjs +173 -1
- package/fesm2022/cloud-ide-core.mjs.map +1 -1
- package/lib/cloud-ide-core.routes.d.ts +2 -0
- package/lib/core/general-master-management/components/general-master/general-master.component.d.ts +167 -0
- package/lib/core/general-master-management/components/general-master-type/general-master-type.component.d.ts +129 -0
- package/lib/core/general-master-management/services/general-master-type.service.d.ts +75 -0
- package/lib/core/general-master-management/services/general-master.service.d.ts +62 -0
- package/lib/core/page-management/components/page-form/page-form.component.d.ts +35 -0
- package/package.json +1 -1
- package/public-api.d.ts +1 -0
|
@@ -13,6 +13,143 @@ import * as i1 from '@angular/common/http';
|
|
|
13
13
|
import { CideEleDataGridComponent, CideEleButtonComponent, CideInputComponent, CideSelectComponent, CideTextareaComponent, CideIconComponent, CideEleDropdownComponent, ConfirmationService, NotificationService, CideEleGlobalNotificationsComponent, CideEleJsonEditorComponent, CideSelectOptionComponent } from 'cloud-ide-element';
|
|
14
14
|
import { AppStateHelperService } from 'cloud-ide-layout';
|
|
15
15
|
|
|
16
|
+
const coreRoutes = [
|
|
17
|
+
{
|
|
18
|
+
path: 'menu-management',
|
|
19
|
+
loadComponent: () => Promise.resolve().then(function () { return menuList_component; }).then(c => c.MenuListComponent),
|
|
20
|
+
title: 'Menu Management',
|
|
21
|
+
data: {
|
|
22
|
+
reuseTab: true,
|
|
23
|
+
sypg_page_code: "core_menu_list"
|
|
24
|
+
}
|
|
25
|
+
}, {
|
|
26
|
+
path: 'department',
|
|
27
|
+
loadComponent: () => Promise.resolve().then(function () { return departmentList_component; }).then(c => c.DepartmentListComponent),
|
|
28
|
+
title: 'Department Management',
|
|
29
|
+
data: {
|
|
30
|
+
reuseTab: true,
|
|
31
|
+
sypg_page_code: "core_department_list"
|
|
32
|
+
}
|
|
33
|
+
},
|
|
34
|
+
{
|
|
35
|
+
path: 'designation',
|
|
36
|
+
loadComponent: () => Promise.resolve().then(function () { return designationList_component; }).then(c => c.DesignationListComponent),
|
|
37
|
+
title: 'Designation Management',
|
|
38
|
+
data: {
|
|
39
|
+
reuseTab: true,
|
|
40
|
+
sypg_page_code: "core_designation_list"
|
|
41
|
+
}
|
|
42
|
+
},
|
|
43
|
+
{
|
|
44
|
+
path: 'grade-level',
|
|
45
|
+
loadComponent: () => Promise.resolve().then(function () { return gradeLevelList_component; }).then(c => c.GradeLevelListComponent),
|
|
46
|
+
title: 'Grade Level Management',
|
|
47
|
+
data: {
|
|
48
|
+
reuseTab: true,
|
|
49
|
+
sypg_page_code: "core_grade_level_list"
|
|
50
|
+
}
|
|
51
|
+
},
|
|
52
|
+
{
|
|
53
|
+
path: 'page',
|
|
54
|
+
loadComponent: () => Promise.resolve().then(function () { return pageList_component; }).then(c => c.PageListComponent),
|
|
55
|
+
title: 'Page Management',
|
|
56
|
+
data: {
|
|
57
|
+
reuseTab: true,
|
|
58
|
+
sypg_page_code: "core_page_management"
|
|
59
|
+
}
|
|
60
|
+
},
|
|
61
|
+
{
|
|
62
|
+
path: 'page-form',
|
|
63
|
+
loadComponent: () => import('./cloud-ide-core-page-form.component-CaEca3mB.mjs').then(c => c.PageFormComponent),
|
|
64
|
+
title: 'Page Form',
|
|
65
|
+
data: {
|
|
66
|
+
reuseTab: true,
|
|
67
|
+
sypg_page_code: "core_page_management"
|
|
68
|
+
}
|
|
69
|
+
},
|
|
70
|
+
{
|
|
71
|
+
path: 'page-form/:query',
|
|
72
|
+
loadComponent: () => import('./cloud-ide-core-page-form.component-CaEca3mB.mjs').then(c => c.PageFormComponent),
|
|
73
|
+
title: 'Page Form',
|
|
74
|
+
data: {
|
|
75
|
+
reuseTab: true,
|
|
76
|
+
sypg_page_code: "core_page_management"
|
|
77
|
+
}
|
|
78
|
+
},
|
|
79
|
+
{
|
|
80
|
+
path: 'page-theme',
|
|
81
|
+
loadComponent: () => Promise.resolve().then(function () { return pageTheme_component; }).then(c => c.PageThemeComponent),
|
|
82
|
+
title: 'Page Theme Management',
|
|
83
|
+
data: {
|
|
84
|
+
reuseTab: true,
|
|
85
|
+
sypg_page_code: "core_page_theme"
|
|
86
|
+
}
|
|
87
|
+
},
|
|
88
|
+
{
|
|
89
|
+
path: 'page-theme/:query',
|
|
90
|
+
loadComponent: () => Promise.resolve().then(function () { return pageTheme_component; }).then(c => c.PageThemeComponent),
|
|
91
|
+
title: 'Page Theme Management',
|
|
92
|
+
data: {
|
|
93
|
+
reuseTab: true,
|
|
94
|
+
sypg_page_code: "core_page_theme"
|
|
95
|
+
}
|
|
96
|
+
},
|
|
97
|
+
{
|
|
98
|
+
path: 'page-controls',
|
|
99
|
+
loadComponent: () => Promise.resolve().then(function () { return pageControls_component; }).then(c => c.PageControlsComponent),
|
|
100
|
+
title: 'Page Controls Management',
|
|
101
|
+
data: {
|
|
102
|
+
reuseTab: true,
|
|
103
|
+
sypg_page_code: "core_page_controls"
|
|
104
|
+
}
|
|
105
|
+
},
|
|
106
|
+
{
|
|
107
|
+
path: 'page-controls/:query',
|
|
108
|
+
loadComponent: () => Promise.resolve().then(function () { return pageControls_component; }).then(c => c.PageControlsComponent),
|
|
109
|
+
title: 'Page Controls Management',
|
|
110
|
+
data: {
|
|
111
|
+
reuseTab: true,
|
|
112
|
+
sypg_page_code: "core_page_controls"
|
|
113
|
+
}
|
|
114
|
+
},
|
|
115
|
+
{
|
|
116
|
+
path: 'general_master_entry',
|
|
117
|
+
loadComponent: () => import('./cloud-ide-core-general-master.component-B6llTVoV.mjs').then(c => c.GeneralMasterComponent),
|
|
118
|
+
title: 'General Master Entry',
|
|
119
|
+
data: {
|
|
120
|
+
reuseTab: true,
|
|
121
|
+
sypg_page_code: "core_general_master"
|
|
122
|
+
}
|
|
123
|
+
},
|
|
124
|
+
{
|
|
125
|
+
path: 'general_master_entry/:query',
|
|
126
|
+
loadComponent: () => import('./cloud-ide-core-general-master.component-B6llTVoV.mjs').then(c => c.GeneralMasterComponent),
|
|
127
|
+
title: 'General Master Entry',
|
|
128
|
+
data: {
|
|
129
|
+
reuseTab: true,
|
|
130
|
+
sypg_page_code: "core_general_master"
|
|
131
|
+
}
|
|
132
|
+
},
|
|
133
|
+
{
|
|
134
|
+
path: 'general_type_entry',
|
|
135
|
+
loadComponent: () => import('./cloud-ide-core-general-master-type.component-B26auJZw.mjs').then(c => c.GeneralMasterTypeComponent),
|
|
136
|
+
title: 'General Type Entry',
|
|
137
|
+
data: {
|
|
138
|
+
reuseTab: true,
|
|
139
|
+
sypg_page_code: "core_general_master_type"
|
|
140
|
+
}
|
|
141
|
+
},
|
|
142
|
+
{
|
|
143
|
+
path: 'general_type_entry/:query',
|
|
144
|
+
loadComponent: () => import('./cloud-ide-core-general-master-type.component-B26auJZw.mjs').then(c => c.GeneralMasterTypeComponent),
|
|
145
|
+
title: 'General Type Entry',
|
|
146
|
+
data: {
|
|
147
|
+
reuseTab: true,
|
|
148
|
+
sypg_page_code: "core_general_master_type"
|
|
149
|
+
}
|
|
150
|
+
}
|
|
151
|
+
];
|
|
152
|
+
|
|
16
153
|
class CloudIdeCoreService {
|
|
17
154
|
constructor() { }
|
|
18
155
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CloudIdeCoreService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
@@ -1706,6 +1843,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
|
|
|
1706
1843
|
], template: "<!-- Menu List Container -->\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 </cide-ele-select>\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 <!-- Active Status -->\n <div class=\"tw-flex tw-flex-col tw-justify-end\">\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 </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 <!-- 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 <!-- 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 <!-- 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 <!-- 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\">menu</cide-ele-icon>\n <h5 class=\"tw-text-base tw-font-medium tw-text-gray-900 tw-m-0\">Menu 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 <!-- Actions can be added here if needed -->\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 </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 <!-- Debug Information: Uncomment for development -->\n <!--\n <div class=\"tw-p-2 tw-bg-yellow-100 tw-text-xs tw-border-b tw-flex tw-justify-between tw-items-center\">\n <span>Debug: Loading: {{ loading() }} | Items Count: {{ menuItems().length }} | Total: {{ totalItems() }} | Error: {{ error() }}</span>\n <button cideEleButton variant=\"outline\" size=\"xs\" (click)=\"loadTestData()\" class=\"tw-ml-2\">\n Load Test Data\n </button>\n </div>\n -->\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\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" }]
|
|
1707
1844
|
}], ctorParameters: () => [] });
|
|
1708
1845
|
|
|
1846
|
+
var menuList_component = /*#__PURE__*/Object.freeze({
|
|
1847
|
+
__proto__: null,
|
|
1848
|
+
MenuListComponent: MenuListComponent
|
|
1849
|
+
});
|
|
1850
|
+
|
|
1709
1851
|
/**
|
|
1710
1852
|
* Menu Type Options
|
|
1711
1853
|
* Available menu types for selection
|
|
@@ -2660,6 +2802,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
|
|
|
2660
2802
|
], template: "<!-- Department List Container -->\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 -->\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 Add Department' }}</h6>\n </div>\n @if (selectedParentDepartment()) {\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-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 under:' }}</span>\n <span class=\"tw-text-sm tw-text-blue-800 tw-font-semibold\">{{ selectedParentDepartment()?.sydept_name }}</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)=\"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 \n id=\"sydept_code\" \n label=\"Code*\" \n formControlName=\"sydept_code\"\n placeholder=\"DEPT001\"\n size=\"sm\">\n </cide-ele-input>\n </div>\n \n <!-- Department Name -->\n <div>\n <cide-ele-input \n id=\"sydept_name\" \n label=\"Name*\" \n formControlName=\"sydept_name\"\n placeholder=\"Department name\"\n 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 \n id=\"sydept_isactive\"\n type=\"checkbox\"\n label=\"Active\"\n formControlName=\"sydept_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 \n id=\"sydept_description\" \n label=\"Description\" \n formControlName=\"sydept_description\"\n placeholder=\"Department description\"\n rows=\"2\"\n size=\"sm\">\n </cide-ele-textarea>\n </div>\n \n\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 <!-- 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\">business</cide-ele-icon>\n <h5 class=\"tw-text-base tw-font-medium tw-text-gray-900 tw-m-0\">Department 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 <!-- Search functionality is handled by the data grid -->\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 </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 \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<!-- 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 \n class=\"tw-text-gray-400\" \n 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\" \n [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\" \n [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 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 \n [items]=\"getDropdownItems(row)\"\n [config]=\"{ triggerIcon: 'more_vert', triggerSize: 'sm' }\"\n (itemClick)=\"onDropdownItemClick($event, row)\">\n </cide-ele-dropdown>\n</ng-template> " }]
|
|
2661
2803
|
}], ctorParameters: () => [] });
|
|
2662
2804
|
|
|
2805
|
+
var departmentList_component = /*#__PURE__*/Object.freeze({
|
|
2806
|
+
__proto__: null,
|
|
2807
|
+
DepartmentListComponent: DepartmentListComponent
|
|
2808
|
+
});
|
|
2809
|
+
|
|
2663
2810
|
// Department Management Components
|
|
2664
2811
|
|
|
2665
2812
|
class DesignationManagementService {
|
|
@@ -4125,6 +4272,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
|
|
|
4125
4272
|
], template: "<!-- Designation List Container -->\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-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 Add Designation' }}</h6>\n </div>\n @if (selectedParentDesignation()) {\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-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 under:' }}</span>\n <span class=\"tw-text-sm tw-text-blue-800 tw-font-semibold\">{{ selectedParentDesignation()?.sydsg_name }}</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 @if (selectedParentDepartment()) {\n <div 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:' }}</span>\n <span class=\"tw-text-sm tw-text-green-800 tw-font-semibold\">{{ selectedParentDepartment()?.sydept_name }}</span>\n </div>\n <button \n cideEleButton \n variant=\"ghost\" \n size=\"xs\" \n type=\"button\" \n (click)=\"clearSelectedParentDepartment()\" \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 \n id=\"sydsg_name\" \n label=\"Name*\" \n formControlName=\"sydsg_name\"\n placeholder=\"Designation name\"\n size=\"sm\">\n </cide-ele-input>\n </div>\n \n <!-- Designation Code -->\n <div>\n <cide-ele-input \n id=\"sydsg_code\" \n label=\"Code*\" \n formControlName=\"sydsg_code\"\n placeholder=\"DESG001\"\n size=\"sm\">\n </cide-ele-input>\n </div>\n \n <!-- Grade Level -->\n <div>\n <cide-ele-select \n id=\"sydsg_grade_level_id_sydsgl\"\n label=\"Grade Level*\" \n [options]=\"gradeLevelOptions()\" \n formControlName=\"sydsg_grade_level_id_sydsgl\"\n placeholder=\"Select grade level\"\n size=\"sm\">\n </cide-ele-select>\n </div>\n \n <!-- Department -->\n <div>\n <cide-ele-select \n id=\"sydsg_department_id_sydpt\"\n label=\"Department*\" \n [options]=\"departmentOptions()\" \n formControlName=\"sydsg_department_id_sydpt\"\n placeholder=\"Select department\"\n 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 \n id=\"sydsg_isactive\"\n type=\"checkbox\"\n label=\"Active\"\n formControlName=\"sydsg_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 \n id=\"sydsg_description\" \n label=\"Description\" \n formControlName=\"sydsg_description\"\n placeholder=\"Designation description\"\n rows=\"2\"\n size=\"sm\">\n </cide-ele-textarea>\n </div>\n \n <!-- Entity ID (Hidden) -->\n <div class=\"tw-hidden\">\n <cide-ele-input \n id=\"desg_entity_id_syen\" \n label=\"Entity ID*\" \n formControlName=\"desg_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\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\">work</cide-ele-icon>\n <h5 class=\"tw-text-base tw-font-medium tw-text-gray-900 tw-m-0\">Designation 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 <!-- Search functionality is handled by the data grid -->\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 </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 \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<!-- 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 \n [class]=\"row.type === 'department' ? 'tw-text-green-500' : 'tw-text-blue-500'\" \n 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\" \n [title]=\"row.name\">\n {{ row.name || 'Untitled' }}\n </div>\n @if (row.type === 'department') {\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\">\n Department\n </span>\n }\n </div>\n @if (row.description) {\n <div class=\"tw-text-xs tw-text-gray-500 tw-truncate\" \n [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 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 \n [items]=\"getDropdownItems(row)\"\n [config]=\"{ triggerIcon: 'more_vert', triggerSize: 'sm' }\"\n (itemClick)=\"onDropdownItemClick($event, row)\">\n </cide-ele-dropdown>\n</ng-template> " }]
|
|
4126
4273
|
}], ctorParameters: () => [] });
|
|
4127
4274
|
|
|
4275
|
+
var designationList_component = /*#__PURE__*/Object.freeze({
|
|
4276
|
+
__proto__: null,
|
|
4277
|
+
DesignationListComponent: DesignationListComponent
|
|
4278
|
+
});
|
|
4279
|
+
|
|
4128
4280
|
// Designation Management Components
|
|
4129
4281
|
|
|
4130
4282
|
class GradeLevelListComponent {
|
|
@@ -4910,6 +5062,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
|
|
|
4910
5062
|
], template: "<!-- Grade Level List Container -->\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 Grade Level' : 'Quick 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 \n id=\"sydsgl_description\" \n label=\"Description\" \n formControlName=\"sydsgl_description\"\n placeholder=\"Grade level description\"\n rows=\"2\"\n 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 <!-- 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\">school</cide-ele-icon>\n <h5 class=\"tw-text-base tw-font-medium tw-text-gray-900 tw-m-0\">Grade Level 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 <!-- Search functionality is handled by the data grid -->\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 </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 \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> " }]
|
|
4911
5063
|
}], ctorParameters: () => [] });
|
|
4912
5064
|
|
|
5065
|
+
var gradeLevelList_component = /*#__PURE__*/Object.freeze({
|
|
5066
|
+
__proto__: null,
|
|
5067
|
+
GradeLevelListComponent: GradeLevelListComponent
|
|
5068
|
+
});
|
|
5069
|
+
|
|
4913
5070
|
// Grade Level Management Components
|
|
4914
5071
|
|
|
4915
5072
|
class PageManagementService {
|
|
@@ -5387,6 +5544,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
|
|
|
5387
5544
|
], template: "<!-- Page List Container -->\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 <button\n cideEleButton\n variant=\"primary\"\n size=\"sm\"\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 </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> " }]
|
|
5388
5545
|
}], ctorParameters: () => [] });
|
|
5389
5546
|
|
|
5547
|
+
var pageList_component = /*#__PURE__*/Object.freeze({
|
|
5548
|
+
__proto__: null,
|
|
5549
|
+
PageListComponent: PageListComponent
|
|
5550
|
+
});
|
|
5551
|
+
|
|
5390
5552
|
class PageThemeService {
|
|
5391
5553
|
constructor(http) {
|
|
5392
5554
|
this.http = http;
|
|
@@ -6243,6 +6405,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
|
|
|
6243
6405
|
], template: "<!-- Page Theme Container -->\r\n<div class=\"tw-flex tw-h-full tw-w-full\">\r\n \r\n <!-- Left: Form and header (60%) -->\r\n <div class=\"tw-w-full lg:tw-w-3/5 tw-flex tw-flex-col tw-border-r tw-border-gray-200\">\r\n\r\n <!-- Header Section -->\r\n <div class=\"tw-px-6 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\r\n <div class=\"tw-flex tw-flex-col sm:tw-flex-row tw-justify-between tw-items-start sm:tw-items-center tw-space-y-3 sm:tw-space-y-0\">\r\n\r\n <!-- Title and Back Button -->\r\n <div class=\"tw-flex tw-items-center tw-space-x-4\">\r\n <button cideEleButton variant=\"ghost\" size=\"sm\" (click)=\"goBack()\" class=\"tw-text-gray-600 hover:tw-text-gray-900\">\r\n <cide-ele-icon class=\"tw-w-4 tw-h-4\">arrow_back</cide-ele-icon>\r\n </button>\r\n <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\n <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">palette</cide-ele-icon>\r\n <div>\r\n <h5 class=\"tw-text-base tw-font-medium tw-text-gray-900 tw-m-0\">Theme Management</h5>\r\n <p class=\"tw-text-sm tw-text-gray-500 tw-m-0\">Page: {{ pageTitle() }}</p>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Error Message -->\r\n @if (error()) {\r\n <div class=\"tw-mt-4 tw-p-4 tw-bg-red-50 tw-border tw-border-red-200 tw-rounded-md\">\r\n <div class=\"tw-flex tw-items-start\">\r\n <cide-ele-icon name=\"error\" class=\"tw-text-red-400 tw-w-5 tw-h-5 tw-mt-0.5 tw-flex-shrink-0\"></cide-ele-icon>\r\n <div class=\"tw-ml-3\">\r\n <h3 class=\"tw-text-sm tw-font-medium tw-text-red-800 tw-m-0\">Error</h3>\r\n <p class=\"tw-text-sm tw-text-red-700 tw-mt-1 tw-m-0\">{{ error() }}</p>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n\r\n <!-- Quick Add/Edit Form Section -->\r\n <div class=\"tw-px-6 tw-py-4 tw-bg-white tw-overflow-auto\">\r\n <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\r\n <div class=\"tw-flex tw-items-center tw-space-x-3\">\r\n <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\r\n <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-m-0\">{{ isEditMode() ? 'Edit Theme' : 'Quick Add Theme' }}</h6>\r\n </div>\r\n </div>\r\n\r\n <!-- Form (kept as-is) -->\r\n <form [formGroup]=\"themeForm\" (ngSubmit)=\"saveTheme()\" class=\"tw-space-y-4\">\r\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-3 tw-gap-4\">\r\n <!-- Theme Title -->\r\n <div class=\"tw-space-y-2\">\r\n <cide-ele-input id=\"sytm_title\" formControlName=\"sytm_title\" placeholder=\"Enter theme title\" label=\"Theme Title*\" size=\"sm\"></cide-ele-input>\r\n </div>\r\n <!-- Theme Code -->\r\n <div class=\"tw-space-y-2\">\r\n <cide-ele-input id=\"sytm_theme_code\" formControlName=\"sytm_theme_code\" placeholder=\"Enter theme code\" label=\"Theme Code*\" size=\"sm\"></cide-ele-input>\r\n </div>\r\n <!-- Status -->\r\n <div class=\"tw-space-y-2\">\r\n <cide-ele-input\r\n id=\"sytm_isactive_cb\"\r\n type=\"checkbox\"\r\n label=\"Active\"\r\n size=\"sm\"\r\n formControlName=\"sytm_isactive\">\r\n </cide-ele-input>\r\n </div>\r\n <!-- Sub Title -->\r\n <div class=\"tw-space-y-2\">\r\n <cide-ele-input id=\"sytm_sub_title\" formControlName=\"sytm_sub_title\" placeholder=\"Enter sub title\" label=\"Sub Title\" size=\"sm\"></cide-ele-input>\r\n </div>\r\n <!-- Preview ID -->\r\n <div class=\"tw-space-y-2\">\r\n <cide-ele-input id=\"sytm_preview_id_fm\" formControlName=\"sytm_preview_id_fm\" placeholder=\"Enter preview image ID\" label=\"Preview Image ID\" size=\"sm\"></cide-ele-input>\r\n </div>\r\n <!-- Description -->\r\n <div class=\"tw-space-y-2 md:tw-col-span-2\">\r\n <cide-ele-textarea id=\"sytm_desc\" formControlName=\"sytm_desc\" placeholder=\"Enter theme description\" rows=\"2\" label=\"Description\" size=\"sm\"></cide-ele-textarea>\r\n </div>\r\n <!-- Configuration JSON -->\r\n <div class=\"tw-space-y-2 md:tw-col-span-3\">\r\n <cide-ele-json-editor label=\"Configuration JSON\" formControlName=\"sytm_configuration\" [required]=\"true\" [config]=\"{\r\n showLineNumbers: true,\r\n autoFormat: true,\r\n validateOnChange: true,\r\n minHeight: 150,\r\n maxHeight: 300,\r\n placeholder: 'Enter theme configuration JSON...'\r\n }\" helperText=\"Enter valid JSON configuration for the theme\"></cide-ele-json-editor>\r\n </div>\r\n <!-- Layout Configuration + Selection: right-side checkbox list -->\r\n <div class=\"lg:tw-col-span-1 tw-space-y-2\">\r\n <div class=\"tw-text-sm tw-font-medium tw-text-gray-700\">Layout & Selection</div>\r\n <!-- Selected toggle -->\r\n <div class=\"tw-bg-white tw-border tw-border-gray-200 tw-rounded-md tw-px-3 tw-py-2\">\r\n <cide-ele-input\r\n id=\"sytm_isselected\"\r\n type=\"checkbox\"\r\n label=\"Selected (Default)\"\r\n size=\"sm\"\r\n formControlName=\"sytm_isselected\">\r\n </cide-ele-input>\r\n </div>\r\n <div formGroupName=\"sytm_layout\" class=\"tw-bg-white tw-border tw-border-gray-200 tw-rounded-md tw-divide-y tw-overflow-hidden\">\r\n <!-- Sidebar -->\r\n <div class=\"tw-px-3 tw-py-2\" formGroupName=\"sytm_layout_sidebar\">\r\n <cide-ele-input id=\"layout_sidebar_status\" type=\"checkbox\" label=\"Sidebar\" size=\"sm\" formControlName=\"status\"></cide-ele-input>\r\n </div>\r\n <!-- Header -->\r\n <div class=\"tw-px-3 tw-py-2\" formGroupName=\"sytm_layout_header\">\r\n <cide-ele-input id=\"layout_header_status\" type=\"checkbox\" label=\"Header\" size=\"sm\" formControlName=\"status\"></cide-ele-input>\r\n </div>\r\n <!-- Footer -->\r\n <div class=\"tw-px-3 tw-py-2\" formGroupName=\"sytm_layout_footer\">\r\n <cide-ele-input id=\"layout_footer_status\" type=\"checkbox\" label=\"Footer\" size=\"sm\" formControlName=\"status\"></cide-ele-input>\r\n </div>\r\n <!-- Breadcrumb -->\r\n <div class=\"tw-px-3 tw-py-2\" formGroupName=\"sytm_layout_breadcrumb\">\r\n <cide-ele-input id=\"layout_breadcrumb_status\" type=\"checkbox\" label=\"Breadcrumb\" size=\"sm\" formControlName=\"status\"></cide-ele-input>\r\n </div>\r\n <!-- Console -->\r\n <div class=\"tw-px-3 tw-py-2\" formGroupName=\"sytm_layout_console\">\r\n <cide-ele-input id=\"layout_console_status\" type=\"checkbox\" label=\"Console\" size=\"sm\" formControlName=\"status\"></cide-ele-input>\r\n </div>\r\n <!-- Request -->\r\n <div class=\"tw-px-3 tw-py-2\" formGroupName=\"sytm_layout_request\">\r\n <cide-ele-input id=\"layout_request_status\" type=\"checkbox\" label=\"Request\" size=\"sm\" formControlName=\"status\"></cide-ele-input>\r\n </div>\r\n </div>\r\n <p class=\"tw-text-xs tw-text-gray-500 tw-pt-1\">Toggle active sections. Only one theme can be selected as default. More options can be added here later.</p>\r\n </div>\r\n <!-- Drawer Configuration -->\r\n <div class=\"tw-space-y-2 md:tw-col-span-3\">\r\n <div class=\"tw-flex tw-items-center tw-justify-between\">\r\n <div class=\"tw-text-sm tw-font-medium tw-text-gray-700\">Drawers</div>\r\n <button cideEleButton type=\"button\" size=\"xs\" variant=\"outline\" (click)=\"addDrawer()\">\r\n Add Drawer\r\n </button>\r\n </div>\r\n\r\n <div formGroupName=\"sytm_layout\">\r\n <div class=\"tw-space-y-2\" formArrayName=\"sytm_layout_drawer\">\r\n <div *ngFor=\"let drawerGrp of drawerArray.controls; let i = index\" [formGroupName]=\"i\" class=\"tw-border tw-border-gray-200 tw-rounded-md tw-p-3 tw-flex tw-items-center tw-gap-3\">\r\n <cide-ele-input id=\"drawer_active_{{i}}\" type=\"checkbox\" label=\"Active\" size=\"sm\" formControlName=\"syth_status\"></cide-ele-input>\r\n <div class=\"tw-flex-1\">\r\n <cide-ele-select\r\n id=\"drawer_config_{{i}}\"\r\n label=\"Drawer For\"\r\n size=\"sm\"\r\n [options]=\"drawerConfigOptions\"\r\n formControlName=\"syth_config_syco_for\">\r\n </cide-ele-select>\r\n </div>\r\n <button cideEleButton type=\"button\" size=\"xs\" variant=\"ghost\" (click)=\"removeDrawer(i)\">\r\n <cide-ele-icon class=\"tw-w-4 tw-h-4\">delete</cide-ele-icon>\r\n </button>\r\n </div>\r\n <p class=\"tw-text-xs tw-text-gray-500\">Configure multiple drawers as needed.</p>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Form Actions -->\r\n <div class=\"tw-flex tw-flex-col tw-gap-2 tw-pt-4 tw-border-t tw-border-gray-200\">\r\n <div class=\"tw-flex tw-items-center tw-justify-end tw-space-x-3\">\r\n <button cideEleButton type=\"button\" variant=\"outline\" (click)=\"cancelForm()\" [disabled]=\"loading()\">Cancel</button>\r\n <button cideEleButton type=\"submit\" variant=\"primary\" leftIcon=\"add\" [disabled]=\"!themeForm.valid || loading()\" [loading]=\"loading()\">\r\n {{ isEditMode() ? 'Update Theme' : 'Create Theme' }}\r\n </button>\r\n </div>\r\n </div>\r\n </form>\r\n </div>\r\n </div>\r\n\r\n <!-- Right: Theme gallery (40%) -->\r\n <div class=\"tw-hidden lg:tw-flex tw-w-2/5 tw-flex-col\">\r\n <!-- (Header consolidated above) -->\r\n\r\n <!-- Gallery list -->\r\n <div class=\"tw-flex-1 tw-overflow-auto tw-bg-gray-50\">\r\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3 tw-p-4\">\r\n @for (theme of filteredThemes(); track theme._id) {\r\n <div class=\"tw-rounded-md tw-transition tw-cursor-pointer tw-relative\"\r\n [ngClass]=\"theme.sytm_isselected\r\n ? 'tw-border tw-border-blue-500 tw-ring-2 tw-ring-blue-200 tw-bg-blue-50/50'\r\n : 'tw-bg-white tw-border tw-border-gray-200 hover:tw-shadow-sm'\"\r\n (click)=\"editTheme(theme)\"\r\n role=\"button\"\r\n tabindex=\"0\"\r\n [attr.aria-selected]=\"theme.sytm_isselected ? 'true' : 'false'\"\r\n [attr.aria-label]=\"'Edit theme ' + (theme.sytm_title || theme.sytm_theme_code)\"\r\n (keydown.enter)=\"editTheme(theme)\"\r\n (keydown.space)=\"$event.preventDefault(); editTheme(theme)\">\r\n\r\n <!-- Selected badge -->\r\n <div *ngIf=\"theme.sytm_isselected\"\r\n class=\"tw-absolute tw-top-2 tw-right-2 tw-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-rounded-full tw-bg-blue-600 tw-text-white\">\r\n <cide-ele-icon class=\"tw-w-4 tw-h-4\">check</cide-ele-icon>\r\n </div>\r\n \r\n <div class=\"tw-aspect-[16/9] tw-bg-gray-100 tw-rounded-t-md tw-overflow-hidden tw-flex tw-items-center tw-justify-center\">\r\n @if (getPreviewUrl(theme)) {\r\n <img [src]=\"getPreviewUrl(theme)\" class=\"tw-w-full tw-h-full tw-object-cover\" alt=\"Preview\" />\r\n } @else {\r\n <div class=\"tw-text-gray-400 tw-text-xs\">No preview</div>\r\n }\r\n </div>\r\n <div class=\"tw-p-3 tw-space-y-1\">\r\n <div class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-truncate\" [title]=\"theme.sytm_title\">{{ theme.sytm_title || 'Untitled Theme' }}</div>\r\n <div class=\"tw-text-xs tw-text-gray-500 tw-truncate\" [title]=\"theme.sytm_theme_code\">{{ theme.sytm_theme_code }}</div>\r\n <div class=\"tw-flex tw-items-center tw-justify-between tw-pt-1\">\r\n <span class=\"tw-inline-flex tw-items-center tw-gap-1 tw-text-xs\" [ngClass]=\"theme.sytm_isactive ? 'tw-text-green-700' : 'tw-text-red-700'\">\r\n <span class=\"tw-w-1.5 tw-h-1.5 tw-rounded-full\" [ngClass]=\"theme.sytm_isactive ? 'tw-bg-green-500' : 'tw-bg-red-500'\"></span>\r\n {{ theme.sytm_isactive ? 'Active' : 'Inactive' }}\r\n </span>\r\n <div class=\"tw-flex tw-items-center tw-gap-1\">\r\n <!-- Set Selected Button - Clear and Simple -->\r\n @if (theme.sytm_isselected) {\r\n <span class=\"tw-inline-flex tw-items-center tw-gap-1 tw-px-2 tw-py-1 tw-bg-green-100 tw-text-green-800 tw-rounded-md tw-text-xs tw-font-medium\">\r\n <cide-ele-icon class=\"tw-w-3 tw-h-3\">check</cide-ele-icon>\r\n Selected\r\n </span>\r\n } @else {\r\n <button cideEleButton \r\n variant=\"outline\" \r\n size=\"xs\"\r\n (click)=\"$event.stopPropagation(); setSelectedTheme(theme)\"\r\n [attr.aria-label]=\"'Select ' + (theme.sytm_title || theme.sytm_theme_code) + ' theme'\"\r\n class=\"tw-text-xs\">\r\n Select\r\n </button>\r\n }\r\n <button cideEleButton variant=\"ghost\" size=\"xs\" (click)=\"$event.stopPropagation(); editTheme(theme)\"\r\n [attr.aria-label]=\"'Edit theme ' + (theme.sytm_title || theme.sytm_theme_code)\">\r\n <cide-ele-icon class=\"tw-w-4 tw-h-4\">edit</cide-ele-icon>\r\n </button>\r\n <button cideEleButton variant=\"ghost\" size=\"xs\" (click)=\"$event.stopPropagation(); deleteTheme(theme)\"\r\n [attr.aria-label]=\"'Delete theme ' + (theme.sytm_title || theme.sytm_theme_code)\">\r\n <cide-ele-icon class=\"tw-w-4 tw-h-4\">delete</cide-ele-icon>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n\r\n @if (!loading() && filteredThemes().length === 0) {\r\n <div class=\"tw-col-span-full tw-text-center tw-text-xs tw-text-gray-500 tw-py-8\">No themes found</div>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<!-- \r\n Angular Template References for Grid Renderers (Best Practice)\r\n \r\n These ng-template elements represent the Angular best practice for custom rendering.\r\n They provide:\r\n - Type safety with template context\r\n - Component lifecycle integration\r\n - Change detection optimization\r\n - Proper event handling\r\n - Accessibility features\r\n \r\n Note: Current data grid uses string renderers for compatibility.\r\n Templates are maintained for future component enhancement.\r\n-->\r\n\r\n<!-- Theme Details Renderer Template -->\r\n<ng-template #themeDetailsRendererTemplate let-row=\"row\" let-value=\"value\">\r\n <div class=\"tw-flex tw-items-center tw-min-w-0\">\r\n <!-- Theme Icon -->\r\n <div class=\"tw-flex-shrink-0\">\r\n <cide-ele-icon \r\n class=\"tw-text-purple-600\" \r\n size=\"xs\">\r\n palette\r\n </cide-ele-icon>\r\n </div>\r\n \r\n <!-- Theme Details -->\r\n <div class=\"tw-ml-3 tw-min-w-0 tw-flex-1\">\r\n <div class=\"tw-text-sm tw-font-medium tw-text-gray-900 tw-truncate\" \r\n [title]=\"row.sytm_title\">\r\n {{ row.sytm_title || 'Untitled' }}\r\n </div>\r\n @if (row.sytm_desc) {\r\n <div class=\"tw-text-xs tw-text-gray-500 tw-truncate\" \r\n [title]=\"row.sytm_desc\">\r\n {{ row.sytm_desc }}\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<!-- Theme Status Renderer Template -->\r\n<ng-template #themeStatusRendererTemplate let-row=\"row\" let-value=\"value\">\r\n <span class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-whitespace-nowrap\"\r\n [ngClass]=\"row.sytm_isactive ? 'tw-bg-green-100 tw-text-green-800' : 'tw-bg-red-100 tw-text-red-800'\">\r\n {{ row.sytm_isactive ? 'Active' : 'Inactive' }}\r\n </span>\r\n</ng-template>\r\n\r\n<!-- Actions Dropdown Renderer Template -->\r\n<ng-template #actionsDropdownRendererTemplate let-row=\"row\" let-value=\"value\">\r\n <cide-ele-dropdown \r\n [items]=\"getActionDropdownItems(row)\"\r\n [config]=\"{ triggerIcon: 'more_vert', triggerSize: 'sm' }\"\r\n (itemClick)=\"onDropdownItemClick($event, row)\">\r\n </cide-ele-dropdown>\r\n</ng-template> " }]
|
|
6244
6406
|
}] });
|
|
6245
6407
|
|
|
6408
|
+
var pageTheme_component = /*#__PURE__*/Object.freeze({
|
|
6409
|
+
__proto__: null,
|
|
6410
|
+
PageThemeComponent: PageThemeComponent
|
|
6411
|
+
});
|
|
6412
|
+
|
|
6246
6413
|
class PageControlsService {
|
|
6247
6414
|
constructor(http) {
|
|
6248
6415
|
this.http = http;
|
|
@@ -6844,6 +7011,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
|
|
|
6844
7011
|
], template: "<!-- Page Controls Container -->\n<div class=\"page-controls-container\">\n <!-- Header Section -->\n <div class=\"header\">\n <div class=\"header-content\">\n <div class=\"header-left\">\n <button \n cideEleButton\n variant=\"ghost\"\n size=\"sm\"\n (click)=\"goBack()\"\n class=\"back-button\">\n <cide-ele-icon>arrow_back</cide-ele-icon>\n </button>\n <div class=\"title-section\">\n <cide-ele-icon class=\"title-icon\">settings</cide-ele-icon>\n <div>\n <h1 class=\"title\">Control Management</h1>\n <p class=\"subtitle\">Page: {{ pageTitle() }}</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Error Message -->\n <div class=\"error-message\" *ngIf=\"error()\">\n <cide-ele-icon>error</cide-ele-icon>\n <div>\n <h3>Error</h3>\n <p>{{ error() }}</p>\n </div>\n </div>\n\n <!-- Main Content Area -->\n <div class=\"main-content\">\n <!-- Form Section -->\n <div class=\"form-section\">\n <div class=\"form-header\">\n <cide-ele-icon>{{ isEditMode() ? 'edit' : 'add' }}</cide-ele-icon>\n <h3>{{ isEditMode() ? 'Edit Control' : 'Quick Add Control' }}</h3>\n </div>\n\n <!-- Form -->\n <form [formGroup]=\"controlForm\" (ngSubmit)=\"saveControl()\" class=\"control-form tw-overflow-y-auto\">\n <div class=\"form-grid\">\n \n <!-- Basic Information Section -->\n <!-- Control Key -->\n <div class=\"form-group\">\n <cide-ele-input\n id=\"sype_key\"\n formControlName=\"sype_key\"\n placeholder=\"Enter control key\"\n label=\"Control Key\"\n size=\"sm\">\n </cide-ele-input>\n </div>\n\n <!-- Control Label -->\n <div class=\"form-group\">\n <cide-ele-input\n id=\"sype_label\"\n formControlName=\"sype_label\"\n placeholder=\"Enter control label\"\n label=\"Control Label\"\n size=\"sm\">\n </cide-ele-input>\n </div>\n\n <!-- Control Type -->\n <div class=\"form-group\">\n <cide-ele-select\n id=\"sype_type\"\n formControlName=\"sype_type\"\n [options]=\"[\n { value: 'text', label: 'Text Input' },\n { value: 'textarea', label: 'Text Area' },\n { value: 'select', label: 'Select' },\n { value: 'checkbox', label: 'Checkbox' },\n { value: 'radio', label: 'Radio' },\n { value: 'date', label: 'Date' },\n { value: 'number', label: 'Number' },\n { value: 'email', label: 'Email' },\n { value: 'password', label: 'Password' },\n { value: 'file', label: 'File Upload' }\n ]\"\n label=\"Control Type\"\n size=\"sm\">\n </cide-ele-select>\n </div>\n\n <!-- Status - Checkbox aligned properly -->\n <div class=\"form-group\">\n <cide-ele-input\n id=\"sype_isactive\"\n type=\"checkbox\"\n formControlName=\"sype_isactive\"\n label=\"Active Status\"\n size=\"sm\">\n </cide-ele-input>\n </div>\n\n <!-- Placeholder -->\n <div class=\"form-group\">\n <cide-ele-input\n id=\"sype_placeholder\"\n formControlName=\"sype_placeholder\"\n placeholder=\"Enter placeholder text\"\n label=\"Placeholder\"\n size=\"sm\">\n </cide-ele-input>\n </div>\n\n <!-- Auto Complete - Checkbox aligned properly -->\n <div class=\"form-group\">\n <cide-ele-input\n id=\"sype_auto_complete\"\n type=\"checkbox\"\n formControlName=\"sype_auto_complete\"\n label=\"Auto Complete\"\n size=\"sm\">\n </cide-ele-input>\n </div>\n\n <!-- Tooltip -->\n <div class=\"form-group\">\n <cide-ele-input\n id=\"sype_tooltip\"\n formControlName=\"sype_tooltip\"\n placeholder=\"Enter tooltip text\"\n label=\"Tooltip\"\n size=\"sm\">\n </cide-ele-input>\n </div>\n\n <!-- Validation & Sizing Section -->\n <!-- Min/Max Length - Side by side -->\n <div class=\"form-group form-group-row\">\n <div class=\"form-group-half\">\n <cide-ele-input\n id=\"sype_min_length\"\n type=\"number\"\n formControlName=\"sype_min_length\"\n placeholder=\"0\"\n label=\"Min Length\"\n size=\"xs\">\n </cide-ele-input>\n </div>\n <div class=\"form-group-half\">\n <cide-ele-input\n id=\"sype_max_length\"\n type=\"number\"\n formControlName=\"sype_max_length\"\n placeholder=\"20\"\n label=\"Max Length\"\n size=\"xs\">\n </cide-ele-input>\n </div>\n </div>\n\n <!-- Size & Label Placement - Side by side -->\n <div class=\"form-group form-group-row\">\n <div class=\"form-group-half\">\n <cide-ele-select\n id=\"sype_size\"\n formControlName=\"sype_size\"\n label=\"Size\"\n size=\"xs\"\n [options]=\"[\n { value: 'xs', label: 'XS' },\n { value: 'sm', label: 'SM' },\n { value: 'md', label: 'MD' },\n { value: 'lg', label: 'LG' },\n { value: 'xl', label: 'XL' },\n { value: 'xxl', label: 'XXL' }\n ]\">\n </cide-ele-select>\n </div>\n <div class=\"form-group-half\">\n <cide-ele-select\n id=\"sype_label_placement\"\n formControlName=\"sype_label_placement\"\n label=\"Label Placement\"\n size=\"xs\"\n [options]=\"[\n { value: 'left', label: 'Left' },\n { value: 'floating', label: 'Floating' },\n { value: 'fixed', label: 'Fixed' }\n ]\">\n </cide-ele-select>\n </div>\n </div>\n\n <!-- Width & Height - Side by side -->\n <div class=\"form-group form-group-row\">\n <div class=\"form-group-half\">\n <cide-ele-input\n id=\"sype_width\"\n type=\"text\"\n formControlName=\"sype_width\"\n placeholder=\"20px\"\n label=\"Width\"\n size=\"xs\">\n </cide-ele-input>\n </div>\n <div class=\"form-group-half\">\n <cide-ele-input\n id=\"sype_height\"\n type=\"text\"\n formControlName=\"sype_height\"\n placeholder=\"20px\"\n label=\"Height\"\n size=\"xs\">\n </cide-ele-input>\n </div>\n </div>\n\n <!-- Leading Icon -->\n <div class=\"form-group\">\n <cide-ele-input\n id=\"sype_leading_icon\"\n formControlName=\"sype_leading_icon\"\n placeholder=\"Enter icon name\"\n label=\"Leading Icon\"\n size=\"sm\">\n </cide-ele-input>\n </div>\n\n <!-- Default Value -->\n <div class=\"form-group\">\n <cide-ele-input\n id=\"sype_default\"\n formControlName=\"sype_default\"\n placeholder=\"Enter default value\"\n label=\"Default Value\"\n size=\"sm\">\n </cide-ele-input>\n </div>\n\n <!-- Regex Pattern -->\n <div class=\"form-group\">\n <cide-ele-input\n id=\"sype_regex\"\n formControlName=\"sype_regex\"\n placeholder=\"Enter regex pattern\"\n label=\"Regex Pattern\"\n size=\"sm\">\n </cide-ele-input>\n </div>\n\n <!-- Option Key -->\n <div class=\"form-group\">\n <cide-ele-input\n id=\"sype_option_key\"\n formControlName=\"sype_option_key\"\n placeholder=\"Enter option key\"\n label=\"Option Key\"\n size=\"sm\">\n </cide-ele-input>\n </div>\n\n <!-- Entity ID (Auto-assigned from AppState) - Hidden -->\n <div class=\"form-group\" style=\"display: none;\">\n <cide-ele-input\n id=\"sype_entity_id_syen\"\n formControlName=\"sype_entity_id_syen\"\n placeholder=\"Auto-assigned from system\"\n label=\"Entity ID (Auto-assigned)\"\n size=\"sm\"\n readonly>\n </cide-ele-input>\n </div>\n\n <!-- Control Options -->\n <div class=\"form-group full-width\">\n <h6 class=\"options-title\">Control Options</h6>\n <div class=\"options-grid\">\n \n <!-- Required -->\n <div class=\"option-item\">\n <cide-ele-input\n id=\"sype_required\"\n type=\"checkbox\"\n formControlName=\"sype_required\"\n label=\"Required\"\n size=\"xs\">\n </cide-ele-input>\n </div>\n\n <!-- Disabled -->\n <div class=\"option-item\">\n <cide-ele-input\n id=\"sype_disabled\"\n type=\"checkbox\"\n formControlName=\"sype_disabled\"\n label=\"Disabled\"\n size=\"xs\">\n </cide-ele-input>\n </div>\n\n <!-- Hide Label -->\n <div class=\"option-item\">\n <cide-ele-input\n id=\"sype_label_hide\"\n type=\"checkbox\"\n formControlName=\"sype_label_hide\"\n label=\"Hide Label\"\n size=\"xs\">\n </cide-ele-input>\n </div>\n\n <!-- Hide Helper Text -->\n <div class=\"option-item\">\n <cide-ele-input\n id=\"sype_hide_helper_and_error_text\"\n type=\"checkbox\"\n formControlName=\"sype_hide_helper_and_error_text\"\n label=\"Hide Helper Text\"\n size=\"xs\">\n </cide-ele-input>\n </div>\n\n <!-- Helper Text Collapse -->\n <div class=\"option-item\">\n <cide-ele-input\n id=\"sype_helper_text_collapse\"\n type=\"checkbox\"\n formControlName=\"sype_helper_text_collapse\"\n label=\"Collapse Helper\"\n size=\"xs\">\n </cide-ele-input>\n </div>\n\n </div>\n </div>\n\n </div>\n\n <!-- Form Actions -->\n <div class=\"form-actions\">\n <button \n cideEleButton\n type=\"button\"\n variant=\"outline\"\n (click)=\"cancelForm()\"\n [disabled]=\"loading()\">\n Cancel\n </button>\n <button \n cideEleButton\n type=\"submit\"\n variant=\"primary\"\n [disabled]=\"loading()\">\n {{ isEditMode() ? 'Update Control' : 'Create Control' }}\n </button>\n </div>\n </form>\n </div>\n\n <!-- Controls List Section -->\n <div class=\"controls-list-section\">\n <div class=\"controls-header\">\n <h3>Page Controls</h3>\n <p>Controls connected to this page</p>\n </div>\n \n <div class=\"controls-list\" *ngIf=\"!loading() && controls().length > 0\">\n <div \n class=\"control-item\" \n *ngFor=\"let control of controls(); trackBy: trackByControlId\"\n [class.selected]=\"selectedControlId() === control._id\"\n (click)=\"selectControl(control)\"\n (keyup.enter)=\"selectControl(control)\"\n (keyup.space)=\"selectControl(control)\"\n tabindex=\"0\"\n role=\"button\"\n [attr.aria-label]=\"'Select control ' + (control.sype_label || control.sype_key)\">\n <div class=\"control-header\">\n <div class=\"control-icon\">\n <cide-ele-icon>settings_input_component</cide-ele-icon>\n </div>\n <div class=\"control-info\">\n <h4>{{ control.sype_label || control.sype_key }}</h4>\n <p>{{ control.sype_tooltip || 'No tooltip' }}</p>\n <div class=\"control-meta\">\n <span class=\"control-type\">{{ control.sype_type }}</span>\n <span class=\"control-status\" [class.active]=\"control.sype_isactive\">\n {{ control.sype_isactive ? 'Active' : 'Inactive' }}\n </span>\n </div>\n </div>\n <div class=\"control-actions\">\n <button \n cideEleButton\n variant=\"ghost\"\n size=\"sm\"\n (click)=\"editControl(control); $event.stopPropagation()\">\n <cide-ele-icon>edit</cide-ele-icon>\n </button>\n <button \n cideEleButton\n variant=\"ghost\"\n size=\"sm\"\n (click)=\"deleteControl(control); $event.stopPropagation()\">\n <cide-ele-icon>delete</cide-ele-icon>\n </button>\n </div>\n </div>\n \n \n </div>\n </div>\n\n <div class=\"controls-list-empty\" *ngIf=\"!loading() && controls().length === 0\">\n <cide-ele-icon>settings_input_component</cide-ele-icon>\n <p>No controls available</p>\n <small>Create controls using the form on the left</small>\n </div>\n\n <div class=\"controls-list-loading\" *ngIf=\"loading()\">\n <cide-ele-icon class=\"spinning\">refresh</cide-ele-icon>\n <p>Loading controls...</p>\n </div>\n </div>\n </div>\n</div>\n\n ", styles: [".page-controls-container{@apply tw-flex tw-flex-col tw-h-full tw-bg-gray-50;}.header{@apply tw-bg-white tw-border-b tw-border-gray-200 tw-px-6 tw-py-4;}.header-content{@apply tw-flex tw-items-center tw-justify-between;}.header-left{@apply tw-flex tw-items-center tw-space-x-4;}.back-button{@apply 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;}.title-section{@apply tw-flex tw-items-center tw-space-x-3;}.title-icon{@apply tw-text-blue-600 tw-text-xl;}.title{@apply tw-text-xl tw-font-semibold tw-text-gray-900 tw-mb-0;}.subtitle{@apply tw-text-sm tw-text-gray-500 tw-mb-0;}.error-message{@apply 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;}.error-message cide-ele-icon{@apply tw-text-red-500 tw-flex-shrink-0 tw-mt-0.5;}.error-message h3{@apply tw-text-red-800 tw-font-medium tw-mb-1;}.error-message p{@apply tw-text-red-700 tw-text-sm tw-mb-0;}.main-content{@apply tw-flex tw-flex-1 tw-gap-6 tw-p-6 tw-overflow-hidden;}.form-section{@apply tw-w-3/5 tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-flex tw-flex-col;}.form-header{@apply tw-flex tw-items-center tw-space-x-3 tw-p-6 tw-border-b tw-border-gray-200;}.form-header cide-ele-icon{@apply tw-text-blue-600;}.form-header h3{@apply tw-text-lg tw-font-medium tw-text-gray-900 tw-mb-0;}.control-form{@apply tw-flex tw-flex-col tw-flex-1 tw-p-6;}.form-grid{@apply tw-grid tw-grid-cols-2 tw-gap-4 tw-mb-6;}.form-group{@apply tw-space-y-1;}.form-group.full-width{@apply tw-col-span-2;}.form-group.compact-number,.form-group.compact-select,.form-group.compact-dimension{@apply tw-max-w-32;}.form-group.compact-number{@apply tw-min-w-20;}.form-group.compact-dimension{@apply tw-min-w-24;}.form-group.compact-select{@apply tw-min-w-28;}.form-group.form-group-row{@apply tw-col-span-2 tw-flex tw-gap-4;}.form-group-half{@apply tw-flex-1 tw-space-y-1;}.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}.options-title{@apply tw-text-sm tw-font-medium tw-text-gray-900 tw-mb-3;}.options-grid{@apply tw-grid tw-grid-cols-3 tw-gap-3;}.option-item{@apply tw-flex tw-items-center tw-space-x-2;}.option-checkbox{@apply tw-rounded tw-border-gray-300 tw-text-blue-600 focus:tw-ring-blue-500 focus:tw-border-blue-500;}.option-item label{@apply tw-text-sm tw-text-gray-700 tw-cursor-pointer;}.form-actions{@apply tw-flex tw-justify-end tw-space-x-3 tw-pt-4 tw-border-t tw-border-gray-200 tw-mt-auto;}.controls-list-section{@apply tw-w-2/5 tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-flex tw-flex-col;}.controls-header{@apply tw-p-6 tw-border-b tw-border-gray-200;}.controls-header h3{@apply tw-text-lg tw-font-medium tw-text-gray-900 tw-mb-1;}.controls-header p{@apply tw-text-sm tw-text-gray-500 tw-mb-0;}.controls-list{@apply tw-flex-1 tw-overflow-y-auto tw-p-4;}.control-item{@apply 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;}.control-item:hover{@apply tw-shadow-md tw-border-gray-300;}.control-item.selected{@apply tw-bg-blue-50 tw-border-blue-300 tw-shadow-md;}.control-item:focus{@apply tw-outline-none tw-ring-2 tw-ring-blue-500 tw-ring-offset-2;}.control-item:last-child{@apply tw-mb-0;}.control-header{@apply tw-flex tw-items-start tw-space-x-3;}.control-icon{@apply 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;}.control-icon cide-ele-icon{@apply tw-text-blue-600;}.control-info{@apply tw-flex-1 tw-min-w-0;}.control-info h4{@apply tw-text-sm tw-font-medium tw-text-gray-900 tw-mb-1 tw-truncate;}.control-info p{@apply tw-text-xs tw-text-gray-500 tw-mb-2 tw-truncate;}.control-meta{@apply tw-flex tw-items-center tw-space-x-2;}.control-type{@apply 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-status{@apply tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-red-100 tw-text-red-800;}.control-status.active{@apply tw-bg-green-100 tw-text-green-800;}.control-actions{@apply tw-flex tw-items-center tw-space-x-1 tw-opacity-0 tw-transition-opacity tw-duration-200;}.control-item:hover .control-actions,.control-item.selected .control-actions{@apply tw-opacity-100;}.controls-list-empty{@apply tw-flex tw-flex-col tw-items-center tw-justify-center tw-py-12 tw-text-center;}.controls-list-empty cide-ele-icon{@apply tw-text-4xl tw-text-gray-300 tw-mb-4;}.controls-list-empty p{@apply tw-text-gray-500 tw-font-medium tw-mb-1;}.controls-list-empty small{@apply tw-text-gray-400;}.controls-list-loading{@apply tw-flex tw-flex-col tw-items-center tw-justify-center tw-py-12 tw-text-center;}.controls-list-loading cide-ele-icon{@apply tw-text-2xl tw-text-blue-500 tw-mb-4;}.controls-list-loading p{@apply tw-text-gray-500;}.spinning{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (max-width: 1024px){.main-content{@apply tw-flex-col;}.form-section{@apply tw-w-full;}.controls-list-section{@apply tw-w-full tw-max-h-96;}.form-grid{@apply tw-grid-cols-1;}.options-grid{@apply tw-grid-cols-2;}}@media (max-width: 640px){.main-content{@apply tw-p-4 tw-gap-4;}.form-grid{@apply tw-gap-3;}.form-actions{@apply tw-flex-col tw-space-x-0 tw-space-y-2;}.options-grid{@apply tw-grid-cols-1;}}\n"] }]
|
|
6845
7012
|
}] });
|
|
6846
7013
|
|
|
7014
|
+
var pageControls_component = /*#__PURE__*/Object.freeze({
|
|
7015
|
+
__proto__: null,
|
|
7016
|
+
PageControlsComponent: PageControlsComponent
|
|
7017
|
+
});
|
|
7018
|
+
|
|
6847
7019
|
// Page Management Components
|
|
6848
7020
|
// Page Management Interfaces - Now using model interfaces from cloud-ide-lms-model
|
|
6849
7021
|
|
|
@@ -6855,5 +7027,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
|
|
|
6855
7027
|
* Generated bundle index. Do not edit.
|
|
6856
7028
|
*/
|
|
6857
7029
|
|
|
6858
|
-
export { CloudIdeCoreComponent, CloudIdeCoreService, DepartmentListComponent, DepartmentManagementService, DesignationListComponent, DesignationManagementService, GradeLevelListComponent, GradeLevelManagementService, MENU_TYPES, MenuListComponent, MenuManagementService, PageControlsComponent, PageControlsService, PageListComponent, PageManagementService, PageThemeComponent, PageThemeService };
|
|
7030
|
+
export { CloudIdeCoreComponent, CloudIdeCoreService, DepartmentListComponent, DepartmentManagementService, DesignationListComponent, DesignationManagementService, GradeLevelListComponent, GradeLevelManagementService, MENU_TYPES, MenuListComponent, MenuManagementService, PageControlsComponent, PageControlsService, PageListComponent, PageManagementService, PageThemeComponent, PageThemeService, coreRoutes };
|
|
6859
7031
|
//# sourceMappingURL=cloud-ide-core.mjs.map
|