@cauca-911/management 22.0.3 → 22.0.5

package/fesm2022/cauca-911-management.mjs

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, Injector, inject, Injectable, computed, ChangeDetectionStrategy, Component, ViewChild, signal, viewChild, resource, effect, untracked, model, input, HostListener, forwardRef, ViewEncapsulation, output, NgModule } from '@angular/core';
-import { pendingChangesGuard, DialogService, PageTitleComponent, LoadingSpinnerIndicatorComponent, LoadingErrorComponent, StrokedButtonComponent, RaisedButtonComponent, ListPaginatorComponent, IconButtonComponent, LoadingStateService, GroupContainerComponent, ConfirmationResult, SavingErrorBoxComponent, MenuItemComponent } from '@cauca-911/material';
+import { InjectionToken, Injector, inject, Injectable, computed, ChangeDetectionStrategy, Component, ViewChild, signal, viewChild, resource, effect, untracked, model, input, HostListener, forwardRef, ViewEncapsulation, output } from '@angular/core';
+import { pendingChangesGuard, DialogService, PageTitleComponent, LoadingSpinnerIndicatorComponent, LoadingErrorComponent, StrokedButtonComponent, RaisedButtonComponent, ListPaginatorComponent, IconButtonComponent, LoadingStateService, GroupContainerComponent, ConfirmationResult, SavingErrorBoxComponent, MenuItemComponent, ExpandablePanelComponent, FieldErrorsComponent, PasswordSelectionComponent, PhoneNumberInputComponent, ControlFieldErrorsComponent } from '@cauca-911/material';
 import * as i1 from '@angular/material/card';
 import { MatCardModule } from '@angular/material/card';
 import { TranslatePipe } from '@ngx-translate/core';
@@ -8,7 +8,7 @@ import { MatSort } from '@angular/material/sort';
 import { Router } from '@angular/router';
 import ODataFilterBuilder from 'odata-filter-builder';
 import { OdataGridComponent, SortableDataGridColumnComponent, SortableDataGridCheckColumnComponent, DataGridCommandsColumnComponent, DataGridComponent, BaseGridColumnComponent, DataGridMenuColumnComponent } from '@cauca-911/datagrid';
-import { HttpClient } from '@angular/common/http';
+import { HttpClient, HttpParams } from '@angular/common/http';
 import { CaucaCoreService, toLowerCaseAndWithoutDiacritics } from '@cauca-911/core';
 import { firstValueFrom, startWith, debounceTime } from 'rxjs';
 import * as i1$2 from '@angular/material/form-field';
@@ -36,18 +36,13 @@ import * as i2$1 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
 import { NgStyle } from '@angular/common';
 import { MatColumnDef, MatHeaderCell, MatHeaderCellDef, MatCell, MatCellDef, MatFooterCell, MatFooterCellDef } from '@angular/material/table';
-import * as i1$3 from '@cauca-911/devextreme';
-import { CaucaDevextremeModule } from '@cauca-911/devextreme';
-import * as i4$2 from 'devextreme-angular/ui/check-box';
-import { DxCheckBoxModule } from 'devextreme-angular/ui/check-box';
-import * as i5$1 from 'devextreme-angular/ui/list';
-import { DxListModule } from 'devextreme-angular/ui/list';
-import * as i6$1 from 'devextreme-angular/ui/tag-box';
-import { DxTagBoxModule } from 'devextreme-angular/ui/tag-box';
-import { BreakpointObserver } from '@angular/cdk/layout';
-import { map } from 'rxjs/operators';
-import * as i2$2 from 'devextreme-angular/ui/nested';
-import * as i3$2 from 'devextreme-angular/core';
+import { schema, required, maxLength, validateHttp, email, readonly, pattern, FormField } from '@angular/forms/signals';
+import * as i3$2 from '@angular/material/progress-spinner';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import * as i2$2 from '@angular/material/select';
+import { MatSelectModule } from '@angular/material/select';
+import * as i3$3 from 'ngx-mat-select-search';
+import { NgxMatSelectSearchModule } from 'ngx-mat-select-search';
 
 const MANAGEMENT_URL_PREFIX = new InjectionToken('MANAGEMENT_URL_PREFIX');
 const MANAGEMENT_ROUTE_SEGMENT = new InjectionToken('MANAGEMENT_ROUTE_SEGMENT');
@@ -105,7 +100,7 @@ class GroupManagementService {
             }]
     }], null, null); })();
 
-const _c0$5 = () => ["name"];
+const _c0$6 = () => ["name"];
 class GroupListGridComponent {
     constructor() {
         this.columns = computed(() => this.getColumns(), /* @ts-ignore */
@@ -163,7 +158,7 @@ class GroupListGridComponent {
             i0.ɵɵlistener("deleteClick", function GroupListGridComponent_Template_cauca_data_grid_commands_column_deleteClick_6_listener($event) { return ctx.deleteGroup($event); });
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
-            i0.ɵɵproperty("showTableOptions", true)("showAddButton", true)("addButtonLabel", i0.ɵɵpipeBind1(1, 10, "groups.addButtonLabel"))("baseSort", i0.ɵɵpureFunction0(16, _c0$5))("filterPredicate", ctx.filterPredicate)("displayedColumns", ctx.columns());
+            i0.ɵɵproperty("showTableOptions", true)("showAddButton", true)("addButtonLabel", i0.ɵɵpipeBind1(1, 10, "groups.addButtonLabel"))("baseSort", i0.ɵɵpureFunction0(16, _c0$6))("filterPredicate", ctx.filterPredicate)("displayedColumns", ctx.columns());
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("label", i0.ɵɵpipeBind1(3, 12, "groups.groupNameColumnLabel"));
             i0.ɵɵadvance(2);
@@ -367,8 +362,8 @@ class UserSearchService {
             }]
     }], null, null); })();
 
-const _c0$4 = ["resultPaginator"];
-const _forTrack0$4 = ($index, $item) => $item.id;
+const _c0$5 = ["resultPaginator"];
+const _forTrack0$5 = ($index, $item) => $item.id;
 function GroupUserSelectionDialogComponent_Conditional_13_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 8);
     i0.ɵɵtext(1);
@@ -420,7 +415,7 @@ function GroupUserSelectionDialogComponent_Conditional_17_Template(rf, ctx) { if
     const _r1 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "mat-selection-list", 18);
     i0.ɵɵlistener("selectionChange", function GroupUserSelectionDialogComponent_Conditional_17_Template_mat_selection_list_selectionChange_0_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onSelectionChange($event)); });
-    i0.ɵɵrepeaterCreate(1, GroupUserSelectionDialogComponent_Conditional_17_For_2_Template, 4, 6, "mat-list-option", 19, _forTrack0$4);
+    i0.ɵɵrepeaterCreate(1, GroupUserSelectionDialogComponent_Conditional_17_For_2_Template, 4, 6, "mat-list-option", 19, _forTrack0$5);
     i0.ɵɵelementEnd();
     i0.ɵɵconditionalCreate(3, GroupUserSelectionDialogComponent_Conditional_17_Conditional_3_Template, 2, 2, "cauca-list-paginator", 20);
 } if (rf & 2) {
@@ -521,7 +516,7 @@ class GroupUserSelectionDialogComponent {
     }
     static { this.ɵfac = function GroupUserSelectionDialogComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || GroupUserSelectionDialogComponent)(); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: GroupUserSelectionDialogComponent, selectors: [["cauca-group-user-selection-dialog"]], viewQuery: function GroupUserSelectionDialogComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuerySignal(ctx.paginator, _c0$4, 5);
+            i0.ɵɵviewQuerySignal(ctx.paginator, _c0$5, 5);
         } if (rf & 2) {
             i0.ɵɵqueryAdvance();
         } }, features: [i0.ɵɵProvidersFeature([UserSearchService, LoadingStateService])], decls: 28, vars: 15, consts: [["resultPaginator", ""], ["mat-dialog-title", ""], [1, "h6"], ["id", "closeButton", "icon", "close", 3, "buttonClick"], [1, "dialog-content"], ["subscriptSizing", "dynamic", 1, "search-field"], ["matInput", "", "type", "text", 3, "input", "value"], ["matSuffix", ""], [1, "search-hint", "body2"], [1, "results-region"], [3, "retryRequest"], [1, "no-results", "body2"], [1, "dialog-actions"], [1, "selected-users-panel"], [1, "selected-users-label", "caption"], [1, "selected-users-names", "body2", 3, "matTooltip"], ["color", "primary", "label", "cancel", 3, "buttonClick"], ["color", "primary", "label", "ok", 3, "buttonClick", "isDisabled"], [1, "results-list", 3, "selectionChange", "compareWith"], ["color", "primary", 1, "result-item", 3, "value", "selected", "result-item--even"], [3, "itemsCount", "pageSize"], ["color", "primary", 1, "result-item", 3, "value", "selected"], ["matListItemTitle", ""], ["matListItemSubtitle", ""], [3, "pageChange", "itemsCount", "pageSize"]], template: function GroupUserSelectionDialogComponent_Template(rf, ctx) { if (rf & 1) {
@@ -610,8 +605,8 @@ class GroupUserSelectionDialogComponent {
     }], () => [], { paginator: [{ type: i0.ViewChild, args: ['resultPaginator', { isSignal: true }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(GroupUserSelectionDialogComponent, { className: "GroupUserSelectionDialogComponent", filePath: "lib/components/group-user-selection-dialog/group-user-selection-dialog.component.ts", lineNumber: 46 }); })();
 
-const _c0$3 = ["paginator"];
-const _forTrack0$3 = ($index, $item) => $item.id;
+const _c0$4 = ["paginator"];
+const _forTrack0$4 = ($index, $item) => $item.id;
 function GroupUserEditionListComponent_For_10_Conditional_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 11);
     i0.ɵɵtext(1);
@@ -746,7 +741,7 @@ class GroupUserEditionListComponent {
     }
     static { this.ɵfac = function GroupUserEditionListComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || GroupUserEditionListComponent)(); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: GroupUserEditionListComponent, selectors: [["cauca-group-user-edition-list"]], viewQuery: function GroupUserEditionListComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuerySignal(ctx.paginator, _c0$3, 5);
+            i0.ɵɵviewQuerySignal(ctx.paginator, _c0$4, 5);
         } if (rf & 2) {
             i0.ɵɵqueryAdvance();
         } }, features: [i0.ɵɵProvidersFeature([DialogService])], decls: 14, vars: 6, consts: [["paginator", ""], [1, "user-edition-list"], ["subscriptSizing", "dynamic", 1, "filter-field"], ["matInput", "", "type", "text", 3, "input", "value"], ["matSuffix", ""], [1, "users-list"], [1, "user-item"], [3, "itemsCount", "pageSize"], ["color", "primary", "label", "groupEdition.addUsersButton", 1, "add-users-button", 3, "buttonClick"], ["matListItemIcon", ""], ["matListItemTitle", "", 1, "user-name"], ["matListItemLine", "", 1, "user-additional-information"], ["matListItemMeta", "", "icon", "delete", "color", "error", 1, "delete-button", 3, "buttonClick"], [1, "no-users", "body2"], [3, "pageChange", "itemsCount", "pageSize"]], template: function GroupUserEditionListComponent_Template(rf, ctx) { if (rf & 1) {
@@ -761,7 +756,7 @@ class GroupUserEditionListComponent {
             i0.ɵɵtext(7, "search");
             i0.ɵɵelementEnd()();
             i0.ɵɵelementStart(8, "mat-list", 5);
-            i0.ɵɵrepeaterCreate(9, GroupUserEditionListComponent_For_10_Template, 8, 5, "mat-list-item", 6, _forTrack0$3, false, GroupUserEditionListComponent_ForEmpty_11_Template, 2, 1);
+            i0.ɵɵrepeaterCreate(9, GroupUserEditionListComponent_For_10_Template, 8, 5, "mat-list-item", 6, _forTrack0$4, false, GroupUserEditionListComponent_ForEmpty_11_Template, 2, 1);
             i0.ɵɵelementEnd();
             i0.ɵɵconditionalCreate(12, GroupUserEditionListComponent_Conditional_12_Template, 2, 2, "cauca-list-paginator", 7);
             i0.ɵɵelementStart(13, "cauca-raised-button", 8);
@@ -834,7 +829,7 @@ class PermissionManagementService {
             }]
     }], null, null); })();
 
-const _forTrack0$2 = ($index, $item) => $item.id;
+const _forTrack0$3 = ($index, $item) => $item.id;
 function GroupPermissionListComponent_For_9_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "mat-list-item", 4)(1, "mat-checkbox", 6);
@@ -919,7 +914,7 @@ class GroupPermissionListComponent {
             i0.ɵɵtext(6, "search");
             i0.ɵɵelementEnd()();
             i0.ɵɵelementStart(7, "mat-selection-list", 3);
-            i0.ɵɵrepeaterCreate(8, GroupPermissionListComponent_For_9_Template, 3, 4, "mat-list-item", 4, _forTrack0$2, false, GroupPermissionListComponent_ForEmpty_10_Template, 6, 3, "div", 5);
+            i0.ɵɵrepeaterCreate(8, GroupPermissionListComponent_For_9_Template, 3, 4, "mat-list-item", 4, _forTrack0$3, false, GroupPermissionListComponent_ForEmpty_10_Template, 6, 3, "div", 5);
             i0.ɵɵelementEnd();
         } if (rf & 2) {
             i0.ɵɵadvance(2);
@@ -1201,7 +1196,7 @@ var UserPermissionOriginKind;
     UserPermissionOriginKind[UserPermissionOriginKind["UserOverride"] = 1] = "UserOverride";
 })(UserPermissionOriginKind || (UserPermissionOriginKind = {}));
 
-const _forTrack0$1 = ($index, $item) => $item.idModulePermission;
+const _forTrack0$2 = ($index, $item) => $item.idModulePermission;
 function UserPermissionListComponent_For_9_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0, " check ");
 } }
@@ -1311,7 +1306,7 @@ class UserPermissionListComponent {
             i0.ɵɵtext(6, "search");
             i0.ɵɵelementEnd()();
             i0.ɵɵelementStart(7, "mat-list", 4);
-            i0.ɵɵrepeaterCreate(8, UserPermissionListComponent_For_9_Template, 16, 11, "mat-list-item", 5, _forTrack0$1, false, UserPermissionListComponent_ForEmpty_10_Template, 6, 3, "div", 6);
+            i0.ɵɵrepeaterCreate(8, UserPermissionListComponent_For_9_Template, 16, 11, "mat-list-item", 5, _forTrack0$2, false, UserPermissionListComponent_ForEmpty_10_Template, 6, 3, "div", 6);
             i0.ɵɵelementEnd();
         } if (rf & 2) {
             i0.ɵɵadvance(2);
@@ -1396,14 +1391,14 @@ class UserPermissionsDialogComponent {
     }], null, null); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(UserPermissionsDialogComponent, { className: "UserPermissionsDialogComponent", filePath: "lib/components/user-permissions-dialog/user-permissions-dialog.component.ts", lineNumber: 31 }); })();
 
-const _c0$2 = a0 => ({ "width": a0 });
+const _c0$3 = a0 => ({ "width": a0 });
 function ScopeListGridColumnComponent_th_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "th", 4);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(2, _c0$2, ctx_r0.width()));
+    i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(2, _c0$3, ctx_r0.width()));
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r0.label() ?? ctx_r0.capitalize(ctx_r0.prop()), " ");
 } }
@@ -1489,31 +1484,31 @@ class ScopeListGridColumnComponent extends BaseGridColumnComponent {
     }], () => [], { allLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "allLabel", required: true }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ScopeListGridColumnComponent, { className: "ScopeListGridColumnComponent", filePath: "lib/components/scope-list-grid-column/scope-list-grid-column.component.ts", lineNumber: 28 }); })();
 
-const _c0$1 = () => ["userName"];
-const _forTrack0 = ($index, $item) => $item.prop;
+const _c0$2 = () => ["userName"];
+const _forTrack0$1 = ($index, $item) => $item.prop;
 function UserListGridComponent_For_9_Case_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "cauca-scope-list-grid-column", 6);
     i0.ɵɵpipe(1, "translate");
 } if (rf & 2) {
     const column_r1 = i0.ɵɵnextContext().$implicit;
-    i0.ɵɵproperty("id", column_r1.prop)("prop", column_r1.prop)("width", column_r1.width ?? "")("showToolTip", column_r1.showToolTip ?? true)("allLabel", column_r1.allLabel ?? "")("label", i0.ɵɵpipeBind1(1, 6, column_r1.label));
+    i0.ɵɵproperty("id", column_r1.prop)("prop", column_r1.prop)("width", column_r1.width ?? "")("showToolTip", column_r1.showToolTip ?? true)("allLabel", column_r1.allLabel ?? "")("visibleByDefault", column_r1.visibleByDefault ?? true)("label", i0.ɵɵpipeBind1(1, 7, column_r1.label));
 } }
 function UserListGridComponent_For_9_Case_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "cauca-sortable-data-grid-check-column", 7);
     i0.ɵɵpipe(1, "translate");
 } if (rf & 2) {
     const column_r1 = i0.ɵɵnextContext().$implicit;
-    i0.ɵɵproperty("id", column_r1.prop)("prop", column_r1.prop)("width", column_r1.width ?? "")("label", i0.ɵɵpipeBind1(1, 4, column_r1.label));
+    i0.ɵɵproperty("id", column_r1.prop)("prop", column_r1.prop)("width", column_r1.width ?? "")("visibleByDefault", column_r1.visibleByDefault ?? true)("label", i0.ɵɵpipeBind1(1, 5, column_r1.label));
 } }
 function UserListGridComponent_For_9_Case_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "cauca-sortable-data-grid-column", 8);
     i0.ɵɵpipe(1, "translate");
 } if (rf & 2) {
     const column_r1 = i0.ɵɵnextContext().$implicit;
-    i0.ɵɵproperty("id", column_r1.prop)("prop", column_r1.prop)("width", column_r1.width ?? "")("showToolTip", column_r1.showToolTip ?? true)("label", i0.ɵɵpipeBind1(1, 5, column_r1.label));
+    i0.ɵɵproperty("id", column_r1.prop)("prop", column_r1.prop)("width", column_r1.width ?? "")("showToolTip", column_r1.showToolTip ?? true)("visibleByDefault", column_r1.visibleByDefault ?? true)("label", i0.ɵɵpipeBind1(1, 6, column_r1.label));
 } }
 function UserListGridComponent_For_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, UserListGridComponent_For_9_Case_0_Template, 2, 8, "cauca-scope-list-grid-column", 6)(1, UserListGridComponent_For_9_Case_1_Template, 2, 6, "cauca-sortable-data-grid-check-column", 7)(2, UserListGridComponent_For_9_Case_2_Template, 2, 7, "cauca-sortable-data-grid-column", 8);
+    i0.ɵɵconditionalCreate(0, UserListGridComponent_For_9_Case_0_Template, 2, 9, "cauca-scope-list-grid-column", 6)(1, UserListGridComponent_For_9_Case_1_Template, 2, 7, "cauca-sortable-data-grid-check-column", 7)(2, UserListGridComponent_For_9_Case_2_Template, 2, 8, "cauca-sortable-data-grid-column", 8);
 } if (rf & 2) {
     let tmp_10_0;
     const column_r1 = ctx.$implicit;
@@ -1549,8 +1544,12 @@ const SharedSearchedColumns = ['searchableUserName', 'searchableFirstName', 'sea
 class UserListGridComponent {
     constructor() {
         /**
-         * Read when the grid registers its columns, in `ngAfterContentInit`. Replacing the list
-         * afterwards renders nothing: the new columns are never registered with the MatTable.
+         * Read when the grid registers its columns, in `ngAfterContentInit`. Changing it afterwards
+         * recomputes `columns()` but does not re-run `applyColumns()`, so the MatTable is asked to
+         * render a column id it never registered and throws `Could not find column with id "X"`.
+         * `showPermissions`, `canEdit` and `canDelete` gate the row-action column the same way and
+         * carry the same constraint — and are the more likely one to hit, since a consumer binds them
+         * to an async permission signal more readily than it replaces the column list.
          */
         this.extraColumns = input([], /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "extraColumns" }] : /* istanbul ignore next */ []));
@@ -1614,7 +1613,7 @@ class UserListGridComponent {
             i0.ɵɵviewQuerySignal(ctx.grid, OdataGridComponent, 5)(ctx.sort, MatSort, 5);
         } if (rf & 2) {
             i0.ɵɵqueryAdvance(2);
-        } }, inputs: { extraColumns: [1, "extraColumns"], showAddButton: [1, "showAddButton"], addButtonLabel: [1, "addButtonLabel"], canEdit: [1, "canEdit"], canDelete: [1, "canDelete"], editLinkField: [1, "editLinkField"], showPermissions: [1, "showPermissions"], persistState: [1, "persistState"] }, outputs: { addClick: "addClick", deleteClick: "deleteClick" }, decls: 11, vars: 24, consts: [["menuTemplate", ""], ["matSort", "", "matSortActive", "userName", "matSortDirection", "asc", "aria-describedby", "Users table", "resourceName", "UserList", 1, "users-datagrid", 3, "addButtonClick", "persistState", "showTableOptions", "showRefreshButton", "showAddButton", "addButtonLabel", "baseSort", "filterPredicate", "displayedColumns"], ["id", "userName", "prop", "userName", 3, "showToolTip", "label"], ["id", "firstName", "prop", "firstName", 3, "showToolTip", "label"], ["id", "lastName", "prop", "lastName", 3, "showToolTip", "label"], ["id", "buttons", "prop", "menu", 3, "canEdit", "canDelete", "editLinkField"], [3, "id", "prop", "width", "showToolTip", "allLabel", "label"], [3, "id", "prop", "width", "label"], [3, "id", "prop", "width", "showToolTip", "label"], ["id", "buttons", "prop", "menu", 3, "deleteClick", "canEdit", "canDelete", "editLinkField"], ["icon", "list", "label", "userList.viewPermissions", 3, "translateLabel"], ["icon", "list", "label", "userList.viewPermissions", 3, "buttonClick", "translateLabel"]], template: function UserListGridComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { extraColumns: [1, "extraColumns"], showAddButton: [1, "showAddButton"], addButtonLabel: [1, "addButtonLabel"], canEdit: [1, "canEdit"], canDelete: [1, "canDelete"], editLinkField: [1, "editLinkField"], showPermissions: [1, "showPermissions"], persistState: [1, "persistState"] }, outputs: { addClick: "addClick", deleteClick: "deleteClick" }, decls: 11, vars: 24, consts: [["menuTemplate", ""], ["matSort", "", "matSortActive", "userName", "matSortDirection", "asc", "aria-label", "Users table", "resourceName", "UserList", 3, "addButtonClick", "persistState", "showTableOptions", "showRefreshButton", "showAddButton", "addButtonLabel", "baseSort", "filterPredicate", "displayedColumns"], ["id", "userName", "prop", "userName", 3, "showToolTip", "label"], ["id", "firstName", "prop", "firstName", 3, "showToolTip", "label"], ["id", "lastName", "prop", "lastName", 3, "showToolTip", "label"], ["id", "buttons", "prop", "menu", 3, "canEdit", "canDelete", "editLinkField"], [3, "id", "prop", "width", "showToolTip", "allLabel", "visibleByDefault", "label"], [3, "id", "prop", "width", "visibleByDefault", "label"], [3, "id", "prop", "width", "showToolTip", "visibleByDefault", "label"], ["id", "buttons", "prop", "menu", 3, "deleteClick", "canEdit", "canDelete", "editLinkField"], ["icon", "list", "label", "userList.viewPermissions", 3, "translateLabel"], ["icon", "list", "label", "userList.viewPermissions", 3, "buttonClick", "translateLabel"]], template: function UserListGridComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "cauca-odata-grid", 1);
             i0.ɵɵpipe(1, "translate");
             i0.ɵɵlistener("addButtonClick", function UserListGridComponent_Template_cauca_odata_grid_addButtonClick_0_listener() { return ctx.addClick.emit(); });
@@ -1624,11 +1623,11 @@ class UserListGridComponent {
             i0.ɵɵpipe(5, "translate");
             i0.ɵɵelement(6, "cauca-sortable-data-grid-column", 4);
             i0.ɵɵpipe(7, "translate");
-            i0.ɵɵrepeaterCreate(8, UserListGridComponent_For_9_Template, 3, 1, null, null, _forTrack0);
+            i0.ɵɵrepeaterCreate(8, UserListGridComponent_For_9_Template, 3, 1, null, null, _forTrack0$1);
             i0.ɵɵconditionalCreate(10, UserListGridComponent_Conditional_10_Template, 3, 3, "cauca-data-grid-menu-column", 5);
             i0.ɵɵelementEnd();
         } if (rf & 2) {
-            i0.ɵɵproperty("persistState", ctx.persistState())("showTableOptions", true)("showRefreshButton", true)("showAddButton", ctx.showAddButton())("addButtonLabel", i0.ɵɵpipeBind1(1, 15, ctx.addButtonLabel()))("baseSort", i0.ɵɵpureFunction0(23, _c0$1))("filterPredicate", ctx.filterPredicate)("displayedColumns", ctx.columns());
+            i0.ɵɵproperty("persistState", ctx.persistState())("showTableOptions", true)("showRefreshButton", true)("showAddButton", ctx.showAddButton())("addButtonLabel", i0.ɵɵpipeBind1(1, 15, ctx.addButtonLabel()))("baseSort", i0.ɵɵpureFunction0(23, _c0$2))("filterPredicate", ctx.filterPredicate)("displayedColumns", ctx.columns());
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("showToolTip", true)("label", i0.ɵɵpipeBind1(3, 17, "userList.column.userName"));
             i0.ɵɵadvance(2);
@@ -1647,7 +1646,7 @@ class UserListGridComponent {
         args: [{ selector: 'cauca-user-list-grid', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                     MatSort, OdataGridComponent, SortableDataGridColumnComponent, SortableDataGridCheckColumnComponent,
                     ScopeListGridColumnComponent, DataGridMenuColumnComponent, MenuItemComponent, TranslatePipe,
-                ], template: "<cauca-odata-grid\n    matSort\n    matSortActive=\"userName\"\n    matSortDirection=\"asc\"\n    class=\"users-datagrid\"\n    aria-describedby=\"Users table\"\n    resourceName=\"UserList\"\n    [persistState]=\"persistState()\"\n    [showTableOptions]=\"true\"\n    [showRefreshButton]=\"true\"\n    [showAddButton]=\"showAddButton()\"\n    [addButtonLabel]=\"addButtonLabel() | translate\"\n    (addButtonClick)=\"addClick.emit()\"\n    [baseSort]=\"['userName']\"\n    [filterPredicate]=\"filterPredicate\"\n    [displayedColumns]=\"columns()\">\n\n  <cauca-sortable-data-grid-column id=\"userName\" prop=\"userName\" [showToolTip]=\"true\"\n                                   [label]=\"'userList.column.userName' | translate\"/>\n  <cauca-sortable-data-grid-column id=\"firstName\" prop=\"firstName\" [showToolTip]=\"true\"\n                                   [label]=\"'userList.column.firstName' | translate\"/>\n  <cauca-sortable-data-grid-column id=\"lastName\" prop=\"lastName\" [showToolTip]=\"true\"\n                                   [label]=\"'userList.column.lastName' | translate\"/>\n\n  @for (column of extraColumns(); track column.prop) {\n    @switch (column.kind) {\n      @case ('scope') {\n        <cauca-scope-list-grid-column [id]=\"column.prop\" [prop]=\"column.prop\"\n                                      [width]=\"column.width ?? ''\"\n                                      [showToolTip]=\"column.showToolTip ?? true\"\n                                      [allLabel]=\"column.allLabel ?? ''\"\n                                      [label]=\"column.label | translate\"/>\n      }\n      @case ('check') {\n        <cauca-sortable-data-grid-check-column [id]=\"column.prop\" [prop]=\"column.prop\"\n                                               [width]=\"column.width ?? ''\"\n                                               [label]=\"column.label | translate\"/>\n      }\n      @default {\n        <cauca-sortable-data-grid-column [id]=\"column.prop\" [prop]=\"column.prop\"\n                                         [width]=\"column.width ?? ''\"\n                                         [showToolTip]=\"column.showToolTip ?? true\"\n                                         [label]=\"column.label | translate\"/>\n      }\n    }\n  }\n\n  @if (hasRowActions()) {\n    <cauca-data-grid-menu-column id=\"buttons\" prop=\"menu\"\n                                 [canEdit]=\"canEdit()\"\n                                 [canDelete]=\"canDelete()\"\n                                 [editLinkField]=\"editLinkField()\"\n                                 (deleteClick)=\"onDelete($event)\">\n      <ng-template #menuTemplate let-row=\"row\">\n        @if (showPermissions()) {\n          <cauca-menu-item icon=\"list\" label=\"userList.viewPermissions\" [translateLabel]=\"true\"\n                           (buttonClick)=\"openPermissions(row)\"/>\n        }\n      </ng-template>\n    </cauca-data-grid-menu-column>\n  }\n\n</cauca-odata-grid>\n" }]
+                ], template: "<cauca-odata-grid\n    matSort\n    matSortActive=\"userName\"\n    matSortDirection=\"asc\"\n    aria-label=\"Users table\"\n    resourceName=\"UserList\"\n    [persistState]=\"persistState()\"\n    [showTableOptions]=\"true\"\n    [showRefreshButton]=\"true\"\n    [showAddButton]=\"showAddButton()\"\n    [addButtonLabel]=\"addButtonLabel() | translate\"\n    (addButtonClick)=\"addClick.emit()\"\n    [baseSort]=\"['userName']\"\n    [filterPredicate]=\"filterPredicate\"\n    [displayedColumns]=\"columns()\">\n\n  <cauca-sortable-data-grid-column id=\"userName\" prop=\"userName\" [showToolTip]=\"true\"\n                                   [label]=\"'userList.column.userName' | translate\"/>\n  <cauca-sortable-data-grid-column id=\"firstName\" prop=\"firstName\" [showToolTip]=\"true\"\n                                   [label]=\"'userList.column.firstName' | translate\"/>\n  <cauca-sortable-data-grid-column id=\"lastName\" prop=\"lastName\" [showToolTip]=\"true\"\n                                   [label]=\"'userList.column.lastName' | translate\"/>\n\n  @for (column of extraColumns(); track column.prop) {\n    @switch (column.kind) {\n      @case ('scope') {\n        <cauca-scope-list-grid-column [id]=\"column.prop\" [prop]=\"column.prop\"\n                                      [width]=\"column.width ?? ''\"\n                                      [showToolTip]=\"column.showToolTip ?? true\"\n                                      [allLabel]=\"column.allLabel ?? ''\"\n                                      [visibleByDefault]=\"column.visibleByDefault ?? true\"\n                                      [label]=\"column.label | translate\"/>\n      }\n      @case ('check') {\n        <cauca-sortable-data-grid-check-column [id]=\"column.prop\" [prop]=\"column.prop\"\n                                               [width]=\"column.width ?? ''\"\n                                               [visibleByDefault]=\"column.visibleByDefault ?? true\"\n                                               [label]=\"column.label | translate\"/>\n      }\n      @default {\n        <cauca-sortable-data-grid-column [id]=\"column.prop\" [prop]=\"column.prop\"\n                                         [width]=\"column.width ?? ''\"\n                                         [showToolTip]=\"column.showToolTip ?? true\"\n                                         [visibleByDefault]=\"column.visibleByDefault ?? true\"\n                                         [label]=\"column.label | translate\"/>\n      }\n    }\n  }\n\n  @if (hasRowActions()) {\n    <cauca-data-grid-menu-column id=\"buttons\" prop=\"menu\"\n                                 [canEdit]=\"canEdit()\"\n                                 [canDelete]=\"canDelete()\"\n                                 [editLinkField]=\"editLinkField()\"\n                                 (deleteClick)=\"onDelete($event)\">\n      <ng-template #menuTemplate let-row=\"row\">\n        @if (showPermissions()) {\n          <cauca-menu-item icon=\"list\" label=\"userList.viewPermissions\" [translateLabel]=\"true\"\n                           (buttonClick)=\"openPermissions(row)\"/>\n        }\n      </ng-template>\n    </cauca-data-grid-menu-column>\n  }\n\n</cauca-odata-grid>\n" }]
     }], null, { extraColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "extraColumns", required: false }] }], showAddButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAddButton", required: false }] }], addButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "addButtonLabel", required: false }] }], canEdit: [{ type: i0.Input, args: [{ isSignal: true, alias: "canEdit", required: false }] }], canDelete: [{ type: i0.Input, args: [{ isSignal: true, alias: "canDelete", required: false }] }], editLinkField: [{ type: i0.Input, args: [{ isSignal: true, alias: "editLinkField", required: false }] }], showPermissions: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPermissions", required: false }] }], persistState: [{ type: i0.Input, args: [{ isSignal: true, alias: "persistState", required: false }] }], addClick: [{ type: i0.Output, args: ["addClick"] }], deleteClick: [{ type: i0.Output, args: ["deleteClick"] }], grid: [{ type: i0.ViewChild, args: [i0.forwardRef(() => OdataGridComponent), { isSignal: true }] }], sort: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatSort), { isSignal: true }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(UserListGridComponent, { className: "UserListGridComponent", filePath: "lib/components/user-list-grid/user-list-grid.component.ts", lineNumber: 27 }); })();
 
@@ -1706,614 +1705,403 @@ class UsersPageComponent {
     }], null, { caption: [{ type: i0.Input, args: [{ isSignal: true, alias: "caption", required: false }] }], baseCrumb: [{ type: i0.Input, args: [{ isSignal: true, alias: "baseCrumb", required: false }] }], breadcrumb: [{ type: i0.Input, args: [{ isSignal: true, alias: "breadcrumb", required: false }] }], extraColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "extraColumns", required: false }] }], showAddButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAddButton", required: false }] }], addButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "addButtonLabel", required: false }] }], canEdit: [{ type: i0.Input, args: [{ isSignal: true, alias: "canEdit", required: false }] }], canDelete: [{ type: i0.Input, args: [{ isSignal: true, alias: "canDelete", required: false }] }], editLinkField: [{ type: i0.Input, args: [{ isSignal: true, alias: "editLinkField", required: false }] }], showPermissions: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPermissions", required: false }] }], persistState: [{ type: i0.Input, args: [{ isSignal: true, alias: "persistState", required: false }] }], addClick: [{ type: i0.Output, args: ["addClick"] }], deleteClick: [{ type: i0.Output, args: ["deleteClick"] }], grid: [{ type: i0.ViewChild, args: [i0.forwardRef(() => UserListGridComponent), { isSignal: true }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(UsersPageComponent, { className: "UsersPageComponent", filePath: "lib/pages/users-page/users-page.component.ts", lineNumber: 14 }); })();
 
-class CaucaManagementService {
-    static { this.ɵfac = function CaucaManagementService_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || CaucaManagementService)(); }; }
-    static { this.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: CaucaManagementService, factory: CaucaManagementService.ɵfac, providedIn: 'root' }); }
+/** What creation sends as the identifier. */
+const EmptyUserId = '00000000-0000-0000-0000-000000000000';
+function createEmptyUserForEdition() {
+    return {
+        id: EmptyUserId,
+        login: { userName: '', password: '', twoFactorAuthenticatorEnabled: true },
+        personalInformation: { firstName: '', lastName: '', email: '', phoneNumber: '' },
+        groupIds: [],
+    };
 }
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CaucaManagementService, [{
-        type: Injectable,
-        args: [{
-                providedIn: 'root'
-            }]
-    }], null, null); })();
 
-class CaucaManagementComponent {
-    static { this.ɵfac = function CaucaManagementComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || CaucaManagementComponent)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CaucaManagementComponent, selectors: [["cauca-management"]], decls: 3, vars: 3, template: function CaucaManagementComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵdomElementStart(0, "div");
-            i0.ɵɵtext(1);
-            i0.ɵɵpipe(2, "translate");
-            i0.ɵɵdomElementEnd();
-        } if (rf & 2) {
-            i0.ɵɵadvance();
-            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(2, 1, "core.noGenericComponentOnThisLibrary"));
-        } }, dependencies: [TranslatePipe], encapsulation: 2 }); }
+const RequiredMessage = 'error.requiredField';
+const MaxLengthMessage = 'error.maxLength';
+function createUserLoginSchema(options) {
+    return schema((login) => {
+        required(login.userName, { message: RequiredMessage });
+        maxLength(login.userName, 100, { message: MaxLengthMessage });
+        validateHttp(login.userName, {
+            request: (context) => {
+                const userName = context.value();
+                return userName ? options.userNameAvailabilityUrl(userName) : undefined;
+            },
+            onSuccess: (isAvailable) => (isAvailable
+                ? undefined
+                : { kind: 'userNameTaken', message: 'management.userNameAlreadyUsed' }),
+            onError: () => undefined,
+            debounce: 400,
+        });
+        required(login.password, {
+            when: () => options.isNew(),
+            message: RequiredMessage,
+        });
+    });
 }
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CaucaManagementComponent, [{
-        type: Component,
-        args: [{ selector: 'cauca-management', imports: [TranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div>{{'core.noGenericComponentOnThisLibrary' | translate}}</div>" }]
-    }], null, null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CaucaManagementComponent, { className: "CaucaManagementComponent", filePath: "lib/cauca-management.component.ts", lineNumber: 11 }); })();
-
-/**
- * @deprecated This service is obsolete and should not be used.
- */
-class ManagementGroupService {
-    constructor() {
-        this.http = inject(HttpClient);
-        this.baseUrl = inject(CaucaCoreService).getConfig().apiUrl;
-        this.baseUrlToUse = this.baseUrl.endsWith('api/') ? this.baseUrl : this.baseUrl + 'api/';
-    }
-    getAll() {
-        return this.http.get(`${this.baseUrlToUse}GroupManagement`);
-    }
-    get(idGroup) {
-        return this.http.get(`${this.baseUrlToUse}GroupManagement/${idGroup}`);
-    }
-    save(group) {
-        return this.http.post(`${this.baseUrlToUse}GroupManagement`, group);
-    }
-    delete(idGroup) {
-        return this.http.delete(`${this.baseUrlToUse}GroupManagement/${idGroup}`);
-    }
-    hasExistingGroupName(group) {
-        return this.http.post(`${this.baseUrlToUse}GroupManagement/GroupNameAlreadyExist`, group);
-    }
-    static { this.ɵfac = function ManagementGroupService_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ManagementGroupService)(); }; }
-    static { this.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: ManagementGroupService, factory: ManagementGroupService.ɵfac, providedIn: 'root' }); }
+function createUserPersonalInformationSchema(options) {
+    return schema((info) => {
+        required(info.firstName, { message: RequiredMessage });
+        maxLength(info.firstName, 100, { message: MaxLengthMessage });
+        required(info.lastName, { message: RequiredMessage });
+        maxLength(info.lastName, 100, { message: MaxLengthMessage });
+        required(info.email, { message: RequiredMessage });
+        email(info.email, { message: 'error.invalidEmail' });
+        maxLength(info.email, 100, { message: MaxLengthMessage });
+        readonly(info.email, { when: () => options.isEmailReadOnly() });
+        pattern(info.phoneNumber, /^(\d{10})?$/, { message: 'error.invalidPhoneNumber' });
+    });
 }
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ManagementGroupService, [{
-        type: Injectable,
-        args: [{
-                providedIn: 'root'
-            }]
-    }], null, null); })();
 
-/**
- * @deprecated This service is obsolete and should not be used.
- */
-class ManagementUserService {
+class UserEditionService {
     constructor() {
-        this.http = inject(HttpClient);
+        this.client = inject(HttpClient);
         this.baseUrl = inject(CaucaCoreService).getConfig().apiUrl;
-        this.baseUrlToUse = this.baseUrl.endsWith('api/') ? this.baseUrl : this.baseUrl + 'api/';
-    }
-    getAll() {
-        return this.http.get(`${this.baseUrlToUse}UserManagement`);
-    }
-    get(idUser) {
-        return this.http.get(`${this.baseUrlToUse}UserManagement/${idUser}`);
-    }
-    getGroup(idUser) {
-        return this.http.get(`${this.baseUrlToUse}UserManagement/${idUser}/groups`);
-    }
-    addGroup(userGroup) {
-        return this.http.post(`${this.baseUrlToUse}UserManagement/group`, userGroup);
-    }
-    deleteGroup(idUserGroup) {
-        return this.http.delete(`${this.baseUrlToUse}UserManagement/groups/${idUserGroup}`);
-    }
-    addPermission(userPermission) {
-        return this.http.post(`${this.baseUrlToUse}UserManagement/permission`, userPermission);
+        this.urlPrefix = inject(MANAGEMENT_URL_PREFIX, { optional: true }) ?? '';
     }
-    deletePermission(idUserPermission) {
-        return this.http.delete(`${this.baseUrlToUse}UserManagement/groups/${idUserPermission}`);
+    getForEdition(userId) {
+        return this.client.get(this.buildApiUrl(`UserEdition/${userId}`));
     }
-    save(user) {
-        return this.http.post(`${this.baseUrlToUse}UserManagement`, user);
+    saveForEdition(user) {
+        return this.client.post(this.buildApiUrl('UserEdition'), user);
     }
-    delete(idUser) {
-        return this.http.delete(`${this.baseUrlToUse}UserManagement/${idUser}`);
+    userNameAvailabilityUrl(userName, userId) {
+        const params = new HttpParams({ fromObject: { userName, userId } });
+        return `${this.buildApiUrl('UserEdition/username-available')}?${params.toString()}`;
     }
-    hasExistingUserName(user) {
-        return this.http.post(`${this.baseUrlToUse}UserManagement/UserNameAlreadyExist`, user);
+    buildApiUrl(path) {
+        const normalizedApiUrl = this.baseUrl.replace(/\/+$/, '');
+        const normalizedPrefix = this.urlPrefix.trim().replace(/^\/+|\/+$/g, '');
+        return normalizedPrefix
+            ? `${normalizedApiUrl}/${normalizedPrefix}/${path}`
+            : `${normalizedApiUrl}/${path}`;
     }
-    static { this.ɵfac = function ManagementUserService_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ManagementUserService)(); }; }
-    static { this.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: ManagementUserService, factory: ManagementUserService.ɵfac, providedIn: 'root' }); }
+    static { this.ɵfac = function UserEditionService_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || UserEditionService)(); }; }
+    static { this.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: UserEditionService, factory: UserEditionService.ɵfac, providedIn: 'root' }); }
 }
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ManagementUserService, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(UserEditionService, [{
         type: Injectable,
         args: [{
                 providedIn: 'root'
             }]
     }], null, null); })();
 
-/**
- * @deprecated This service is obsolete and should not be used.
- */
-class ManagementPermissionService {
+class AssignableGroupsService {
     constructor() {
-        this.http = inject(HttpClient);
+        this.client = inject(HttpClient);
         this.baseUrl = inject(CaucaCoreService).getConfig().apiUrl;
-        this.baseUrlToUse = this.baseUrl.endsWith('api/') ? this.baseUrl : this.baseUrl + 'api/';
-    }
-    getAll() {
-        return this.http.get(`${this.baseUrlToUse}PermissionManagement`);
-    }
-    get(idPermission) {
-        return this.http.get(`${this.baseUrlToUse}PermissionManagement/${idPermission}`);
+        this.urlPrefix = inject(MANAGEMENT_URL_PREFIX, { optional: true }) ?? '';
     }
-    save(permission) {
-        return this.http.post(`${this.baseUrlToUse}PermissionManagement`, permission);
+    getAssignableGroups() {
+        return this.client.get(this.buildApiUrl('GroupList/assignable'));
     }
-    delete(idPermission) {
-        return this.http.delete(`${this.baseUrlToUse}PermissionManagement/${idPermission}`);
+    buildApiUrl(path) {
+        const normalizedApiUrl = this.baseUrl.replace(/\/+$/, '');
+        const normalizedPrefix = this.urlPrefix.trim().replace(/^\/+|\/+$/g, '');
+        return normalizedPrefix
+            ? `${normalizedApiUrl}/${normalizedPrefix}/${path}`
+            : `${normalizedApiUrl}/${path}`;
     }
-    static { this.ɵfac = function ManagementPermissionService_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ManagementPermissionService)(); }; }
-    static { this.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: ManagementPermissionService, factory: ManagementPermissionService.ɵfac, providedIn: 'root' }); }
+    static { this.ɵfac = function AssignableGroupsService_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || AssignableGroupsService)(); }; }
+    static { this.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: AssignableGroupsService, factory: AssignableGroupsService.ɵfac, providedIn: 'root' }); }
 }
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ManagementPermissionService, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AssignableGroupsService, [{
         type: Injectable,
         args: [{
                 providedIn: 'root'
             }]
     }], null, null); })();
 
-const _c0 = () => ["name", "tag"];
-function CaucaManagementGroupComponent_div_20_Template(rf, ctx) { if (rf & 1) {
-    const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div")(1, "dx-tag-box", 15);
-    i0.ɵɵlistener("onInitialized", function CaucaManagementGroupComponent_div_20_Template_dx_tag_box_onInitialized_1_listener($event) { const field_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.getGroupUser(field_r2, $event)); })("onValueChanged", function CaucaManagementGroupComponent_div_20_Template_dx_tag_box_onValueChanged_1_listener($event) { const field_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.setGroupUser(field_r2, $event)); });
-    i0.ɵɵelementEnd()();
-} if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("displayExpr", ctx_r2.fullName)("dataSource", ctx_r2.users)("searchEnabled", true)("searchExpr", ctx_r2.fullName);
+const _c0$1 = ["*"];
+function UserLoginFieldsComponent_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mat-progress-spinner", 4);
 } }
-function CaucaManagementGroupComponent_div_21_div_2_Template(rf, ctx) { if (rf & 1) {
-    const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div")(1, "dx-check-box", 17);
-    i0.ɵɵlistener("onInitialized", function CaucaManagementGroupComponent_div_21_div_2_Template_dx_check_box_onInitialized_1_listener($event) { const permission_r5 = i0.ɵɵrestoreView(_r4).$implicit; const field_r6 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.getPermissionStatus(field_r6, permission_r5, $event)); })("onValueChanged", function CaucaManagementGroupComponent_div_21_div_2_Template_dx_check_box_onValueChanged_1_listener($event) { const permission_r5 = i0.ɵɵrestoreView(_r4).$implicit; const field_r6 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.checkBoxToggled(field_r6, permission_r5, $event)); });
-    i0.ɵɵelementEnd()();
-} if (rf & 2) {
-    const permission_r5 = ctx.$implicit;
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("text", permission_r5.name);
-} }
-function CaucaManagementGroupComponent_div_21_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div")(1, "dx-list", 16);
-    i0.ɵɵtemplate(2, CaucaManagementGroupComponent_div_21_div_2_Template, 2, 1, "div", 14);
-    i0.ɵɵelementEnd()();
-} if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("dataSource", ctx_r2.permissions)("searchEnabled", true)("searchExpr", i0.ɵɵpureFunction0(5, _c0))("hoverStateEnabled", ctx_r2.hoverStatePermission());
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("dxTemplateOf", "rowTemplate");
-} }
-/**
- * @deprecated This component is obsolete and should not be used.
- */
-class CaucaManagementGroupComponent {
+class UserLoginFieldsComponent {
     constructor() {
-        this.showPrintButton = input(true, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "showPrintButton" }] : /* istanbul ignore next */ []));
-        this.hoverStatePermission = input(true, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "hoverStatePermission" }] : /* istanbul ignore next */ []));
-        this.showAssignableByAllUsers = input(true, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "showAssignableByAllUsers" }] : /* istanbul ignore next */ []));
-        this.groups = [];
-        this.users = [];
-        this.permissions = [];
-        this.userFullName = {};
-        this.showColumn = true;
-        this.showColumnXS = true;
-        this.translations = [];
-        this.managementGroupService = inject(ManagementGroupService);
-        this.managementUserService = inject(ManagementUserService);
-        this.managementPermissionService = inject(ManagementPermissionService);
-        this.calculateUsersCellValue = (e) => {
-            const users = (e.users ? e.users : []);
-            let usersNames = [];
-            users.forEach((user) => {
-                const userGroup = this.users.filter((u) => u.id === user.idUser);
-                if (userGroup && userGroup[0]) {
-                    usersNames.push(userGroup[0].firstName + ' ' + userGroup[0].lastName);
-                }
-            });
-            usersNames = usersNames.sort((one, two) => (one < two ? -1 : 1));
-            return usersNames.join(', ');
-        };
-        this.groupNameAlreadyUsedValidation = (e) => this.managementGroupService.hasExistingGroupName(e.data).pipe(map((exist) => !exist)).toPromise();
-        const breakpointObserver = inject(BreakpointObserver);
-        breakpointObserver.observe(['(max-width: 1000px)']).subscribe((result) => {
-            this.showColumn = !result.matches;
-        });
-        breakpointObserver.observe(['(max-width: 600px)']).subscribe((result) => {
-            this.showColumnXS = !result.matches;
-        });
-    }
-    ngOnInit() {
-        this.managementUserService.getAll().subscribe((data) => {
-            this.users = data;
-            this.users.forEach((user) => {
-                if (user.isActive) {
-                    if (user.firstName !== '' && user.lastName !== '') {
-                        this.userFullName[user.id] = `${user.firstName} ${user.lastName}`;
-                    }
-                }
-            });
-        });
-        this.managementPermissionService.getAll().subscribe((permissions) => {
-            const permissionIndex = permissions.findIndex((c) => c.tag === 'CanAccessPermissions');
-            if (permissionIndex !== -1) {
-                permissions.splice(permissionIndex, 1);
-            }
-            permissions.sort((a, b) => {
-                if (a.name < b.name) {
-                    return -1;
-                }
-                if (a.name > b.name) {
-                    return 1;
-                }
-                return 0;
-            });
-            this.permissions = permissions;
-        });
-        this.getGroups();
-    }
-    fullName(data) {
-        if (!data) {
-            return '';
-        }
-        return `${data.firstName} ${data.lastName}`;
-    }
-    getGroupUser(field, e) {
-        const users = [];
-        if (this.groupUsers) {
-            this.groupUsers.forEach((user) => {
-                users.push(user.idUser);
-            });
-        }
-        e.component.option('value', users);
-    }
-    setGroupUser(field, e) {
-        const groupUser = [];
-        e.value.forEach((idUser) => {
-            const groupIndex = (field.data.users || []).findIndex((g) => g.idUser === idUser);
-            if (groupIndex === -1) {
-                groupUser.push({ idUser, });
-            }
-            else {
-                groupUser.push(field.data.users[groupIndex]);
-            }
-        });
-        field.setValue(JSON.parse(JSON.stringify(groupUser)));
-    }
-    setGroupPermission(field, e) {
-        const groupUser = [];
-        e.value.forEach((idUser) => {
-            groupUser.push({
-                idUser,
-            });
-        });
-        field.setValue(JSON.parse(JSON.stringify(groupUser)));
-    }
-    getPermissionStatus(field, permission, e) {
-        const groupPermission = (field.value || []).find((p) => p.idModulePermission === permission.id);
-        if (groupPermission) {
-            e.component.option('value', groupPermission.isAllowed);
-        }
-        else {
-            e.component.option('value', undefined);
-        }
-    }
-    checkBoxToggled(field, permission, e) {
-        if (e.component.skipOnValueChanged) {
-            e.component.skipOnValueChanged = false;
-            return;
-        }
-        if (e.component.setUndefinedNextTime) {
-            e.component.setUndefinedNextTime = false;
-            e.component.skipOnValueChanged = true;
-            e.component.option('value', undefined);
-            this.setPermissionStatus(field, permission, undefined);
-            return;
-        }
-        if (e.value === false) {
-            e.component.setUndefinedNextTime = true;
-        }
-        this.setPermissionStatus(field, permission, e.value);
-    }
-    onRowInserted(e) {
-        this.saveGroup(e.data);
-    }
-    onRowUpdated(e) {
-        this.saveGroup(e.data);
-    }
-    onRowRemoved(e) {
-        const group = e.data;
-        this.managementGroupService.delete(group.id).subscribe(() => {
-            this.getGroups();
-        });
-    }
-    onEditingStart(e) {
-        this.groupUsers = e.data.users;
-    }
-    onInitNewRow() {
-        this.groupUsers = [];
-    }
-    setPermissionStatus(field, permission, value) {
-        const groupPermissions = field.value || [];
-        const groupIndex = groupPermissions.findIndex((p) => p.idModulePermission === permission.id);
-        if (groupIndex > -1) {
-            groupPermissions[groupIndex].isAllowed = value;
-        }
-        else {
-            groupPermissions.push({
-                idModulePermission: permission.id,
-                isAllowed: value,
-            });
-        }
-        field.setValue(JSON.parse(JSON.stringify(groupPermissions)));
-    }
-    saveGroup(group) {
-        this.removePermissionUndefined(group);
-        if (group.users) {
-            group.users.forEach((userGroup) => {
-                userGroup.idGroup = group.id;
-            });
-        }
-        if (group.permissions) {
-            group.permissions.forEach((groupPermission) => {
-                groupPermission.idGroup = group.id;
-            });
-        }
-        this.managementGroupService.save(group).subscribe(() => {
-            this.getGroups();
-        });
-        this.groupUsers = [];
-    }
-    removePermissionUndefined(group) {
-        group.permissions = group.permissions.filter((permission) => permission.isAllowed !== undefined);
-    }
-    getGroups() {
-        this.managementGroupService.getAll().subscribe((data) => this.groups = data);
-    }
-    static { this.ɵfac = function CaucaManagementGroupComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || CaucaManagementGroupComponent)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CaucaManagementGroupComponent, selectors: [["cauca-management-group"]], inputs: { showPrintButton: [1, "showPrintButton"], hoverStatePermission: [1, "hoverStatePermission"], showAssignableByAllUsers: [1, "showAssignableByAllUsers"] }, decls: 22, vars: 36, consts: [["keyExpr", "id", 3, "onRowInserted", "onInitNewRow", "onRowUpdated", "onEditingStart", "onRowRemoved", "allowPrint", "dataSource"], ["dataField", "name", 3, "caption"], ["type", "async", 3, "message", "validationCallback"], ["dataField", "assignableByAllUsers", "dataType", "boolean", 3, "caption", "visible"], ["dataField", "users", "editCellTemplate", "usersEditTemplate", 3, "caption", "calculateCellValue"], ["dataField", "permissions", "editCellTemplate", "permissionsEditTemplate", 3, "caption", "visible"], [3, "enabled"], ["mode", "popup", 3, "allowAdding", "allowUpdating", "allowDeleting", "useIcons"], [3, "showTitle", "title", "fullScreen"], ["colCount", "1", 3, "labelLocation"], ["dataField", "name", 3, "isRequired"], ["dataField", "users"], ["dataField", "permissions"], ["dataField", "assignableByAllUsers", 3, "visible"], [4, "dxTemplate", "dxTemplateOf"], ["valueExpr", "id", 3, "onInitialized", "onValueChanged", "displayExpr", "dataSource", "searchEnabled", "searchExpr"], ["itemTemplate", "rowTemplate", 3, "dataSource", "searchEnabled", "searchExpr", "hoverStateEnabled"], [3, "onInitialized", "onValueChanged", "text"]], template: function CaucaManagementGroupComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelementStart(0, "cauca-dx-data-grid", 0);
-            i0.ɵɵlistener("onRowInserted", function CaucaManagementGroupComponent_Template_cauca_dx_data_grid_onRowInserted_0_listener($event) { return ctx.onRowInserted($event); })("onInitNewRow", function CaucaManagementGroupComponent_Template_cauca_dx_data_grid_onInitNewRow_0_listener() { return ctx.onInitNewRow(); })("onRowUpdated", function CaucaManagementGroupComponent_Template_cauca_dx_data_grid_onRowUpdated_0_listener($event) { return ctx.onRowUpdated($event); })("onEditingStart", function CaucaManagementGroupComponent_Template_cauca_dx_data_grid_onEditingStart_0_listener($event) { return ctx.onEditingStart($event); })("onRowRemoved", function CaucaManagementGroupComponent_Template_cauca_dx_data_grid_onRowRemoved_0_listener($event) { return ctx.onRowRemoved($event); });
-            i0.ɵɵelementStart(1, "dxi-column", 1);
-            i0.ɵɵpipe(2, "translate");
-            i0.ɵɵelement(3, "dxi-validation-rule", 2);
-            i0.ɵɵpipe(4, "translate");
-            i0.ɵɵelementEnd();
-            i0.ɵɵelement(5, "dxi-column", 3);
+        this.field = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []));
+        this.isNew = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isNew" }] : /* istanbul ignore next */ []));
+        this.isValidatingUserName = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isValidatingUserName" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = function UserLoginFieldsComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || UserLoginFieldsComponent)(); }; }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: UserLoginFieldsComponent, selectors: [["cauca-user-login-fields"]], inputs: { field: [1, "field"], isNew: [1, "isNew"], isValidatingUserName: [1, "isValidatingUserName"] }, ngContentSelectors: _c0$1, decls: 17, vars: 18, consts: [[3, "caption"], [1, "user-login-fields"], ["id", "user-name-field", "subscriptSizing", "dynamic"], ["matInput", "", 3, "formField"], ["matSuffix", "", "diameter", "16", "mode", "indeterminate"], [3, "field"], [1, "password-fields"], [3, "required", "formField"], ["color", "primary", 3, "formField"]], template: function UserLoginFieldsComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef();
+            i0.ɵɵelementStart(0, "cauca-expandable-panel", 0);
+            i0.ɵɵpipe(1, "translate");
+            i0.ɵɵelementStart(2, "div", 1)(3, "mat-form-field", 2)(4, "mat-label");
+            i0.ɵɵtext(5);
             i0.ɵɵpipe(6, "translate");
-            i0.ɵɵelement(7, "dxi-column", 4);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelement(7, "input", 3);
             i0.ɵɵpipe(8, "translate");
-            i0.ɵɵelement(9, "dxi-column", 5);
-            i0.ɵɵpipe(10, "translate");
-            i0.ɵɵelement(11, "dxo-export", 6);
-            i0.ɵɵelementStart(12, "dxo-editing", 7);
-            i0.ɵɵelement(13, "dxo-popup", 8);
-            i0.ɵɵpipe(14, "translate");
-            i0.ɵɵelementStart(15, "dxo-form", 9);
-            i0.ɵɵelement(16, "dxi-item", 10)(17, "dxi-item", 11)(18, "dxi-item", 12)(19, "dxi-item", 13);
-            i0.ɵɵelementEnd()();
-            i0.ɵɵtemplate(20, CaucaManagementGroupComponent_div_20_Template, 2, 4, "div", 14)(21, CaucaManagementGroupComponent_div_21_Template, 3, 6, "div", 14);
+            i0.ɵɵcontrolCreate();
+            i0.ɵɵconditionalCreate(9, UserLoginFieldsComponent_Conditional_9_Template, 1, 0, "mat-progress-spinner", 4);
             i0.ɵɵelementEnd();
+            i0.ɵɵelement(10, "cauca-field-errors", 5);
+            i0.ɵɵelementStart(11, "div", 6);
+            i0.ɵɵelement(12, "cauca-password-selection", 7);
+            i0.ɵɵcontrolCreate();
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(13, "mat-slide-toggle", 8);
+            i0.ɵɵtext(14);
+            i0.ɵɵpipe(15, "translate");
+            i0.ɵɵelementEnd();
+            i0.ɵɵcontrolCreate();
+            i0.ɵɵprojection(16);
+            i0.ɵɵelementEnd()();
         } if (rf & 2) {
-            i0.ɵɵproperty("allowPrint", ctx.showPrintButton())("dataSource", ctx.groups);
-            i0.ɵɵadvance();
-            i0.ɵɵproperty("caption", i0.ɵɵpipeBind1(2, 24, "management.name"));
-            i0.ɵɵadvance(2);
-            i0.ɵɵproperty("message", i0.ɵɵpipeBind1(4, 26, "management.groupNameAlreadyUsed"))("validationCallback", ctx.groupNameAlreadyUsedValidation);
-            i0.ɵɵadvance(2);
-            i0.ɵɵproperty("caption", i0.ɵɵpipeBind1(6, 28, "management.assignableByAllUsers"))("visible", ctx.showAssignableByAllUsers());
-            i0.ɵɵadvance(2);
-            i0.ɵɵproperty("caption", i0.ɵɵpipeBind1(8, 30, "management.users"))("calculateCellValue", ctx.calculateUsersCellValue);
+            i0.ɵɵproperty("caption", i0.ɵɵpipeBind1(1, 10, "management.userEdition.loginSectionCaption"));
+            i0.ɵɵadvance(5);
+            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(6, 12, "management.userName"));
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("caption", i0.ɵɵpipeBind1(10, 32, "management.permissions"))("visible", false);
+            i0.ɵɵproperty("formField", ctx.field().userName);
+            i0.ɵɵattribute("aria-label", i0.ɵɵpipeBind1(8, 14, "management.userName"));
+            i0.ɵɵcontrol();
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("enabled", false);
+            i0.ɵɵconditional(ctx.isValidatingUserName() ? 9 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("allowAdding", true)("allowUpdating", true)("allowDeleting", true)("useIcons", true);
-            i0.ɵɵadvance();
-            i0.ɵɵproperty("showTitle", true)("title", i0.ɵɵpipeBind1(14, 34, "management.group"))("fullScreen", !ctx.showColumn);
+            i0.ɵɵproperty("field", ctx.field().userName);
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("labelLocation", ctx.showColumnXS ? "left" : "top");
-            i0.ɵɵadvance();
-            i0.ɵɵproperty("isRequired", true);
-            i0.ɵɵadvance(3);
-            i0.ɵɵproperty("visible", ctx.showAssignableByAllUsers());
+            i0.ɵɵproperty("required", ctx.isNew())("formField", ctx.field().password);
+            i0.ɵɵcontrol();
             i0.ɵɵadvance();
-            i0.ɵɵproperty("dxTemplateOf", "usersEditTemplate");
+            i0.ɵɵproperty("formField", ctx.field().twoFactorAuthenticatorEnabled);
+            i0.ɵɵcontrol();
             i0.ɵɵadvance();
-            i0.ɵɵproperty("dxTemplateOf", "permissionsEditTemplate");
-        } }, dependencies: [CaucaDevextremeModule, i1$3.CaucaDataGridComponent, i2$2.DxiColumnComponent, i2$2.DxiValidationRuleComponent, i2$2.DxoEditingComponent, i2$2.DxoFormComponent, i2$2.DxiItemComponent, i2$2.DxoPopupComponent, i2$2.DxoExportComponent, i3$2.DxTemplateDirective, DxCheckBoxModule, i4$2.DxCheckBoxComponent, DxListModule, i5$1.DxListComponent, DxTagBoxModule, i6$1.DxTagBoxComponent, TranslatePipe], encapsulation: 2 }); }
+            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(15, 16, "management.userEdition.twoFactorAuthenticatorEnabled"), " ");
+        } }, dependencies: [ExpandablePanelComponent,
+            FieldErrorsComponent,
+            FormField,
+            MatFormFieldModule, i1$2.MatFormField, i1$2.MatLabel, i1$2.MatSuffix, MatInputModule, i2.MatInput, MatProgressSpinnerModule, i3$2.MatProgressSpinner, MatSlideToggleModule, i3$1.MatSlideToggle, PasswordSelectionComponent,
+            TranslatePipe], styles: ["[_nghost-%COMP%]{display:block}.user-login-fields[_ngcontent-%COMP%]{display:flex;flex-direction:column}.user-login-fields[_ngcontent-%COMP%]   mat-form-field[_ngcontent-%COMP%]:not(:first-child), .user-login-fields[_ngcontent-%COMP%]   .password-fields[_ngcontent-%COMP%], .user-login-fields[_ngcontent-%COMP%]   mat-slide-toggle[_ngcontent-%COMP%]{margin-top:1.25rem}"] }); }
 }
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CaucaManagementGroupComponent, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(UserLoginFieldsComponent, [{
         type: Component,
-        args: [{ selector: 'cauca-management-group', imports: [CaucaDevextremeModule, DxCheckBoxModule, DxListModule, DxTagBoxModule, TranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<cauca-dx-data-grid [allowPrint]=\"showPrintButton()\" keyExpr=\"id\" [dataSource]=\"groups\"\n    (onRowInserted)=\"onRowInserted($event)\" (onInitNewRow)=\"onInitNewRow()\" (onRowUpdated)=\"onRowUpdated($event)\"\n    (onEditingStart)=\"onEditingStart($event)\" (onRowRemoved)=\"onRowRemoved($event)\">\n\n    <dxi-column dataField=\"name\" [caption]=\"'management.name' | translate\">\n        <dxi-validation-rule type=\"async\" [message]=\"'management.groupNameAlreadyUsed' | translate\"\n            [validationCallback]=\"groupNameAlreadyUsedValidation\"></dxi-validation-rule>\n    </dxi-column>\n    <dxi-column dataField=\"assignableByAllUsers\" [caption]=\"'management.assignableByAllUsers' | translate\"\n        dataType=\"boolean\" [visible]=\"showAssignableByAllUsers()\">\n    </dxi-column>\n    <dxi-column dataField=\"users\" [caption]=\"'management.users' | translate\" editCellTemplate=\"usersEditTemplate\"\n        [calculateCellValue]=\"calculateUsersCellValue\">\n    </dxi-column>\n    <dxi-column dataField=\"permissions\" [caption]=\"'management.permissions' | translate\" [visible]=\"false\"\n        editCellTemplate=\"permissionsEditTemplate\">\n    </dxi-column>\n    <dxo-export [enabled]=\"false\"></dxo-export>\n    <dxo-editing mode=\"popup\" [allowAdding]=\"true\" [allowUpdating]=\"true\" [allowDeleting]=\"true\" [useIcons]=\"true\">\n        <dxo-popup [showTitle]=\"true\" [title]=\"'management.group' | translate\" [fullScreen]=\"!showColumn\"></dxo-popup>\n        <dxo-form colCount=\"1\" [labelLocation]=\"showColumnXS ? 'left' : 'top'\">\n            <dxi-item dataField=\"name\" [isRequired]=\"true\"></dxi-item>\n            <dxi-item dataField=\"users\"></dxi-item>\n            <dxi-item dataField=\"permissions\"></dxi-item>\n            <dxi-item dataField=\"assignableByAllUsers\" [visible]=\"showAssignableByAllUsers()\"></dxi-item>\n        </dxo-form>\n    </dxo-editing>\n\n    <div *dxTemplate=\"let field of 'usersEditTemplate'\">\n        <dx-tag-box valueExpr=\"id\" [displayExpr]=\"fullName\" [dataSource]=\"users\" [searchEnabled]=\"true\"\n            [searchExpr]=\"fullName\" (onInitialized)=\"getGroupUser(field, $event)\"\n            (onValueChanged)=\"setGroupUser(field, $event)\">\n        </dx-tag-box>\n    </div>\n    <div *dxTemplate=\"let field of 'permissionsEditTemplate'\">\n        <dx-list [dataSource]=\"permissions\" itemTemplate=\"rowTemplate\" [searchEnabled]=\"true\"\n            [searchExpr]=\"['name', 'tag']\" [hoverStateEnabled]=\"hoverStatePermission()\">\n            <div *dxTemplate=\"let permission of 'rowTemplate'\">\n                <dx-check-box [text]=\"permission.name\" (onInitialized)=\"getPermissionStatus(field, permission, $event)\"\n                    (onValueChanged)=\"checkBoxToggled(field, permission, $event)\">\n                </dx-check-box>\n            </div>\n        </dx-list>\n    </div>\n</cauca-dx-data-grid>" }]
-    }], () => [], { showPrintButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPrintButton", required: false }] }], hoverStatePermission: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoverStatePermission", required: false }] }], showAssignableByAllUsers: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAssignableByAllUsers", required: false }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CaucaManagementGroupComponent, { className: "CaucaManagementGroupComponent", filePath: "lib/cauca-management-group/cauca-management-group.component.ts", lineNumber: 28 }); })();
-
-/**
- * @deprecated This model is obsolete and should not be used.
- */
-class UserModel {
-    constructor() {
-        this.userName = '';
-        this.firstName = '';
-        this.lastName = '';
-        this.password = '';
-        this.email = '';
-        this.isActive = true;
-        this.twoFactorAuthenticatorEnabled = false;
-    }
-}
+        args: [{ selector: 'cauca-user-login-fields', imports: [
+                    ExpandablePanelComponent,
+                    FieldErrorsComponent,
+                    FormField,
+                    MatFormFieldModule,
+                    MatInputModule,
+                    MatProgressSpinnerModule,
+                    MatSlideToggleModule,
+                    PasswordSelectionComponent,
+                    TranslatePipe,
+                ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<cauca-expandable-panel [caption]=\"'management.userEdition.loginSectionCaption' | translate\">\n    <div class=\"user-login-fields\">\n        <mat-form-field id=\"user-name-field\" subscriptSizing=\"dynamic\">\n            <mat-label>{{ 'management.userName' | translate }}</mat-label>\n            <input matInput [attr.aria-label]=\"'management.userName' | translate\" [formField]=\"field().userName\">\n            @if (isValidatingUserName()) {\n                <mat-progress-spinner matSuffix diameter=\"16\" mode=\"indeterminate\"/>\n            }\n        </mat-form-field>\n        <cauca-field-errors [field]=\"field().userName\"/>\n\n        <div class=\"password-fields\">\n            <cauca-password-selection [required]=\"isNew()\" [formField]=\"field().password\"/>\n        </div>\n\n        <mat-slide-toggle color=\"primary\" [formField]=\"field().twoFactorAuthenticatorEnabled\">\n            {{ 'management.userEdition.twoFactorAuthenticatorEnabled' | translate }}\n        </mat-slide-toggle>\n\n        <ng-content/>\n    </div>\n</cauca-expandable-panel>\n", styles: [":host{display:block}.user-login-fields{display:flex;flex-direction:column}.user-login-fields mat-form-field:not(:first-child),.user-login-fields .password-fields,.user-login-fields mat-slide-toggle{margin-top:1.25rem}\n"] }]
+    }], null, { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }], isNew: [{ type: i0.Input, args: [{ isSignal: true, alias: "isNew", required: false }] }], isValidatingUserName: [{ type: i0.Input, args: [{ isSignal: true, alias: "isValidatingUserName", required: false }] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(UserLoginFieldsComponent, { className: "UserLoginFieldsComponent", filePath: "lib/components/user-login-fields/user-login-fields.component.ts", lineNumber: 28 }); })();
 
-/**
- * @deprecated This component is obsolete and should not be used.
- */
-class CaucaManagementUserComponent {
+const _c0 = ["*"];
+function UserPersonalInformationFieldsComponent_Conditional_23_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "mat-hint");
+    i0.ɵɵtext(1);
+    i0.ɵɵpipe(2, "translate");
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(2, 1, ctx_r0.emailHint()));
+} }
+class UserPersonalInformationFieldsComponent {
     constructor() {
-        this.users = [
-            new UserModel()
-        ];
-        this.showColumnXS = true;
-        this.managementUserService = inject(ManagementUserService);
-        this.userNameAlreadyUsedValidation = (e) => this.managementUserService.hasExistingUserName(e.data).pipe(map((exist) => !exist)).toPromise();
-        const breakpointObserver = inject(BreakpointObserver);
-        breakpointObserver.observe(['(max-width: 600px)']).subscribe((result) => {
-            this.showColumnXS = !result.matches;
-        });
-    }
-    ngOnInit() {
-        this.getUsers();
-    }
-    onRowInserted(e) {
-        this.saveGroup(e.data);
-    }
-    onRowUpdated(e) {
-        this.saveGroup(e.key);
-    }
-    onRowRemoved(e) {
-        const user = e.data;
-        this.managementUserService.delete(user.id).subscribe((_data) => {
-            this.getUsers();
-        });
-    }
-    saveGroup(user) {
-        this.managementUserService.save(user).subscribe(() => {
-            this.getUsers();
-        });
-    }
-    getUsers() {
-        this.managementUserService.getAll().subscribe((data) => this.users = data);
-    }
-    static { this.ɵfac = function CaucaManagementUserComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || CaucaManagementUserComponent)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CaucaManagementUserComponent, selectors: [["cauca-management-user"]], decls: 22, vars: 31, consts: [["keyExpr", "id", 3, "onRowInserted", "onRowUpdated", "onRowRemoved", "dataSource"], ["dataField", "userName", 3, "caption"], ["type", "async", 3, "message", "validationCallback"], ["dataField", "isActive", 3, "caption", "visible"], ["dataField", "firstName", 3, "caption"], ["dataField", "lastName", 3, "caption"], ["dataField", "groups", 3, "caption"], ["mode", "popup", 3, "allowAdding", "allowUpdating", "allowDeleting", "useIcons"], [3, "showTitle", "title"], ["colCount", "2", 3, "labelLocation"], ["dataField", "userName", 3, "isRequired"], ["dataField", "isActive"], ["dataField", "firstName"], ["dataField", "lastName"], ["dataField", "group"]], template: function CaucaManagementUserComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelementStart(0, "cauca-dx-data-grid", 0);
-            i0.ɵɵlistener("onRowInserted", function CaucaManagementUserComponent_Template_cauca_dx_data_grid_onRowInserted_0_listener($event) { return ctx.onRowInserted($event); })("onRowUpdated", function CaucaManagementUserComponent_Template_cauca_dx_data_grid_onRowUpdated_0_listener($event) { return ctx.onRowUpdated($event); })("onRowRemoved", function CaucaManagementUserComponent_Template_cauca_dx_data_grid_onRowRemoved_0_listener($event) { return ctx.onRowRemoved($event); });
-            i0.ɵɵelementStart(1, "dxi-column", 1);
-            i0.ɵɵpipe(2, "translate");
-            i0.ɵɵelement(3, "dxi-validation-rule", 2);
-            i0.ɵɵpipe(4, "translate");
-            i0.ɵɵelementEnd();
-            i0.ɵɵelement(5, "dxi-column", 3);
+        this.field = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []));
+        this.isEmailReadOnly = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isEmailReadOnly" }] : /* istanbul ignore next */ []));
+        this.emailHint = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "emailHint" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = function UserPersonalInformationFieldsComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || UserPersonalInformationFieldsComponent)(); }; }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: UserPersonalInformationFieldsComponent, selectors: [["cauca-user-personal-information-fields"]], inputs: { field: [1, "field"], isEmailReadOnly: [1, "isEmailReadOnly"], emailHint: [1, "emailHint"] }, ngContentSelectors: _c0, decls: 27, vars: 30, consts: [[3, "caption"], [1, "user-personal-information-fields"], ["id", "first-name-field", "subscriptSizing", "dynamic"], ["matInput", "", 3, "formField"], [3, "field"], ["id", "last-name-field", "subscriptSizing", "dynamic"], ["id", "email-field", "subscriptSizing", "dynamic"], [3, "formField", "label"]], template: function UserPersonalInformationFieldsComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef();
+            i0.ɵɵelementStart(0, "cauca-expandable-panel", 0);
+            i0.ɵɵpipe(1, "translate");
+            i0.ɵɵelementStart(2, "div", 1)(3, "mat-form-field", 2)(4, "mat-label");
+            i0.ɵɵtext(5);
             i0.ɵɵpipe(6, "translate");
-            i0.ɵɵelement(7, "dxi-column", 4);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelement(7, "input", 3);
             i0.ɵɵpipe(8, "translate");
-            i0.ɵɵelement(9, "dxi-column", 5);
-            i0.ɵɵpipe(10, "translate");
-            i0.ɵɵelement(11, "dxi-column", 6);
-            i0.ɵɵpipe(12, "translate");
-            i0.ɵɵelementStart(13, "dxo-editing", 7);
-            i0.ɵɵelement(14, "dxo-popup", 8);
+            i0.ɵɵcontrolCreate();
+            i0.ɵɵelementEnd();
+            i0.ɵɵelement(9, "cauca-field-errors", 4);
+            i0.ɵɵelementStart(10, "mat-form-field", 5)(11, "mat-label");
+            i0.ɵɵtext(12);
+            i0.ɵɵpipe(13, "translate");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelement(14, "input", 3);
             i0.ɵɵpipe(15, "translate");
-            i0.ɵɵelementStart(16, "dxo-form", 9);
-            i0.ɵɵelement(17, "dxi-item", 10)(18, "dxi-item", 11)(19, "dxi-item", 12)(20, "dxi-item", 13)(21, "dxi-item", 14);
-            i0.ɵɵelementEnd()()();
+            i0.ɵɵcontrolCreate();
+            i0.ɵɵelementEnd();
+            i0.ɵɵelement(16, "cauca-field-errors", 4);
+            i0.ɵɵelementStart(17, "mat-form-field", 6)(18, "mat-label");
+            i0.ɵɵtext(19);
+            i0.ɵɵpipe(20, "translate");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelement(21, "input", 3);
+            i0.ɵɵpipe(22, "translate");
+            i0.ɵɵcontrolCreate();
+            i0.ɵɵconditionalCreate(23, UserPersonalInformationFieldsComponent_Conditional_23_Template, 3, 3, "mat-hint");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelement(24, "cauca-field-errors", 4)(25, "cauca-phone-number-input", 7);
+            i0.ɵɵcontrolCreate();
+            i0.ɵɵprojection(26);
+            i0.ɵɵelementEnd()();
         } if (rf & 2) {
-            i0.ɵɵproperty("dataSource", ctx.users);
-            i0.ɵɵadvance();
-            i0.ɵɵproperty("caption", i0.ɵɵpipeBind1(2, 17, "management.userName"));
+            i0.ɵɵproperty("caption", i0.ɵɵpipeBind1(1, 16, "management.userEdition.personalInformationSectionCaption"));
+            i0.ɵɵadvance(5);
+            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(6, 18, "management.firstName"));
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("message", i0.ɵɵpipeBind1(4, 19, "management.userNameAlreadyUsed"))("validationCallback", ctx.userNameAlreadyUsedValidation);
+            i0.ɵɵproperty("formField", ctx.field().firstName);
+            i0.ɵɵattribute("aria-label", i0.ɵɵpipeBind1(8, 20, "management.firstName"));
+            i0.ɵɵcontrol();
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("caption", i0.ɵɵpipeBind1(6, 21, "management.isActive"))("visible", false);
+            i0.ɵɵproperty("field", ctx.field().firstName);
+            i0.ɵɵadvance(3);
+            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(13, 22, "management.lastName"));
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("caption", i0.ɵɵpipeBind1(8, 23, "management.firstName"));
+            i0.ɵɵproperty("formField", ctx.field().lastName);
+            i0.ɵɵattribute("aria-label", i0.ɵɵpipeBind1(15, 24, "management.lastName"));
+            i0.ɵɵcontrol();
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("caption", i0.ɵɵpipeBind1(10, 25, "management.lastName"));
+            i0.ɵɵproperty("field", ctx.field().lastName);
+            i0.ɵɵadvance(3);
+            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(20, 26, "management.email"));
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("caption", i0.ɵɵpipeBind1(12, 27, "management.group"));
+            i0.ɵɵproperty("formField", ctx.field().email);
+            i0.ɵɵattribute("aria-label", i0.ɵɵpipeBind1(22, 28, "management.email"));
+            i0.ɵɵcontrol();
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("allowAdding", true)("allowUpdating", true)("allowDeleting", true)("useIcons", true);
+            i0.ɵɵconditional(ctx.isEmailReadOnly() && ctx.emailHint() ? 23 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("showTitle", true)("title", i0.ɵɵpipeBind1(15, 29, "management.group"));
-            i0.ɵɵadvance(2);
-            i0.ɵɵproperty("labelLocation", ctx.showColumnXS ? "left" : "top");
+            i0.ɵɵproperty("field", ctx.field().email);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("isRequired", true);
-        } }, dependencies: [CaucaDevextremeModule, i1$3.CaucaDataGridComponent, i2$2.DxiColumnComponent, i2$2.DxiValidationRuleComponent, i2$2.DxoEditingComponent, i2$2.DxoFormComponent, i2$2.DxiItemComponent, i2$2.DxoPopupComponent, TranslatePipe], encapsulation: 2 }); }
+            i0.ɵɵproperty("formField", ctx.field().phoneNumber)("label", "management.phoneNumber");
+            i0.ɵɵcontrol();
+        } }, dependencies: [ExpandablePanelComponent,
+            FieldErrorsComponent,
+            FormField,
+            MatFormFieldModule, i1$2.MatFormField, i1$2.MatLabel, i1$2.MatHint, MatInputModule, i2.MatInput, PhoneNumberInputComponent,
+            TranslatePipe], styles: ["[_nghost-%COMP%]{display:block}.user-personal-information-fields[_ngcontent-%COMP%]{display:flex;flex-direction:column}.user-personal-information-fields[_ngcontent-%COMP%]   mat-form-field[_ngcontent-%COMP%]:not(:first-child), .user-personal-information-fields[_ngcontent-%COMP%]   cauca-phone-number-input[_ngcontent-%COMP%]{margin-top:1.25rem}"] }); }
 }
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CaucaManagementUserComponent, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(UserPersonalInformationFieldsComponent, [{
         type: Component,
-        args: [{ selector: 'cauca-management-user', imports: [CaucaDevextremeModule, TranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<cauca-dx-data-grid\n        keyExpr=\"id\"\n        [dataSource]=\"users\"\n        (onRowInserted)=\"onRowInserted($event)\"\n        (onRowUpdated)=\"onRowUpdated($event)\"\n        (onRowRemoved)=\"onRowRemoved($event)\">\n\n    <dxi-column dataField=\"userName\" [caption]=\"'management.userName' | translate\">\n        <dxi-validation-rule type=\"async\" [message]=\"'management.userNameAlreadyUsed' | translate\" [validationCallback]=\"userNameAlreadyUsedValidation\"></dxi-validation-rule>\n    </dxi-column>\n    <dxi-column dataField=\"isActive\" [caption]=\"'management.isActive' | translate\" [visible]=\"false\"></dxi-column>\n    <dxi-column dataField=\"firstName\" [caption]=\"'management.firstName' | translate\"></dxi-column>\n    <dxi-column dataField=\"lastName\" [caption]=\"'management.lastName' | translate\"></dxi-column>\n    <dxi-column dataField=\"groups\" [caption]=\"'management.group' | translate\"></dxi-column>\n\n    <dxo-editing mode=\"popup\" [allowAdding]=\"true\" [allowUpdating]=\"true\" [allowDeleting]=\"true\" [useIcons]=\"true\">\n        <dxo-popup [showTitle]=\"true\" [title]=\"'management.group' | translate\"></dxo-popup>\n        <dxo-form colCount=\"2\" [labelLocation]=\"showColumnXS ? 'left' : 'top'\">\n            <dxi-item dataField=\"userName\" [isRequired]=\"true\"></dxi-item>\n            <dxi-item dataField=\"isActive\"></dxi-item>\n            <dxi-item dataField=\"firstName\"></dxi-item>\n            <dxi-item dataField=\"lastName\"></dxi-item>\n            <dxi-item dataField=\"group\"></dxi-item>\n        </dxo-form>\n    </dxo-editing>\n</cauca-dx-data-grid>\n" }]
-    }], () => [], null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CaucaManagementUserComponent, { className: "CaucaManagementUserComponent", filePath: "lib/cauca-management-user/cauca-management-user.component.ts", lineNumber: 20 }); })();
-
-/**
- * @deprecated Import CaucaManagementComponent, CaucaManagementUserComponent and
- * CaucaManagementGroupComponent directly in your standalone components. Kept as a re-export
- * so existing consumers keep compiling.
- */
-class CaucaManagementModule {
-    static { this.ɵfac = function CaucaManagementModule_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || CaucaManagementModule)(); }; }
-    static { this.ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: CaucaManagementModule }); }
-    static { this.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [CaucaManagementGroupComponent,
-            CaucaManagementUserComponent] }); }
-}
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CaucaManagementModule, [{
-        type: NgModule,
-        args: [{
-                imports: [
-                    CaucaManagementComponent,
-                    CaucaManagementGroupComponent,
-                    CaucaManagementUserComponent,
-                ],
-                exports: [
-                    CaucaManagementComponent,
-                    CaucaManagementUserComponent,
-                    CaucaManagementGroupComponent,
-                ]
-            }]
-    }], null, null); })();
-(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(CaucaManagementModule, { imports: [CaucaManagementComponent,
-        CaucaManagementGroupComponent,
-        CaucaManagementUserComponent], exports: [CaucaManagementComponent,
-        CaucaManagementUserComponent,
-        CaucaManagementGroupComponent] }); })();
-
-/**
- * @deprecated This model is obsolete and should not be used.
- */
-class UserGroupModel {
-    constructor() {
-        this.idUserGroup = '';
-        this.idGroup = '';
-        this.idUser = '';
-    }
-}
-
-/**
- * @deprecated This model is obsolete and should not be used.
- */
-class UserPermissionModel {
-    constructor() {
-        this.idUserPermission = '';
-        this.isAllowed = false;
-        this.idUser = '';
-        this.idModulePermission = '';
-    }
-}
+        args: [{ selector: 'cauca-user-personal-information-fields', imports: [
+                    ExpandablePanelComponent,
+                    FieldErrorsComponent,
+                    FormField,
+                    MatFormFieldModule,
+                    MatInputModule,
+                    PhoneNumberInputComponent,
+                    TranslatePipe,
+                ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<cauca-expandable-panel [caption]=\"'management.userEdition.personalInformationSectionCaption' | translate\">\n    <div class=\"user-personal-information-fields\">\n        <mat-form-field id=\"first-name-field\" subscriptSizing=\"dynamic\">\n            <mat-label>{{ 'management.firstName' | translate }}</mat-label>\n            <input matInput [attr.aria-label]=\"'management.firstName' | translate\" [formField]=\"field().firstName\">\n        </mat-form-field>\n        <cauca-field-errors [field]=\"field().firstName\"/>\n\n        <mat-form-field id=\"last-name-field\" subscriptSizing=\"dynamic\">\n            <mat-label>{{ 'management.lastName' | translate }}</mat-label>\n            <input matInput [attr.aria-label]=\"'management.lastName' | translate\" [formField]=\"field().lastName\">\n        </mat-form-field>\n        <cauca-field-errors [field]=\"field().lastName\"/>\n\n        <mat-form-field id=\"email-field\" subscriptSizing=\"dynamic\">\n            <mat-label>{{ 'management.email' | translate }}</mat-label>\n            <input matInput [attr.aria-label]=\"'management.email' | translate\" [formField]=\"field().email\">\n            @if (isEmailReadOnly() && emailHint()) {\n                <mat-hint>{{ emailHint() | translate }}</mat-hint>\n            }\n        </mat-form-field>\n        <cauca-field-errors [field]=\"field().email\"/>\n\n        <cauca-phone-number-input [formField]=\"field().phoneNumber\" [label]=\"'management.phoneNumber'\"/>\n\n        <ng-content/>\n    </div>\n</cauca-expandable-panel>\n", styles: [":host{display:block}.user-personal-information-fields{display:flex;flex-direction:column}.user-personal-information-fields mat-form-field:not(:first-child),.user-personal-information-fields cauca-phone-number-input{margin-top:1.25rem}\n"] }]
+    }], null, { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }], isEmailReadOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "isEmailReadOnly", required: false }] }], emailHint: [{ type: i0.Input, args: [{ isSignal: true, alias: "emailHint", required: false }] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(UserPersonalInformationFieldsComponent, { className: "UserPersonalInformationFieldsComponent", filePath: "lib/components/user-personal-information-fields/user-personal-information-fields.component.ts", lineNumber: 24 }); })();
 
-/**
- * @deprecated This model is obsolete and should not be used.
- */
-class GroupModel {
+const _forTrack0 = ($index, $item) => $item.id;
+function UserGroupsSelectorComponent_For_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "mat-option", 3);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const option_r1 = ctx.$implicit;
+    i0.ɵɵproperty("value", option_r1.id);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(option_r1.name);
+} }
+class UserGroupsSelectorComponent {
     constructor() {
-        this.name = '';
-        this.users = [];
-        this.permissions = [];
+        this.value = model([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        this.label = input('management.groups', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+        this.disabled = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+        // Shadowing the `readonly` keyword as a property name is mandated by
+        // `FormUiControl.readonly` — see `base-file-picker.ts`.
+        this.readonly = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
+        this.required = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+        this.invalid = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
+        this.touched = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
+        this.name = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+        this.errors = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
+        this.touch = output();
+        this.filterControl = new FormControl('');
+        this.options = computed(() => this.groups.value(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+        this.filteredOptions = computed(() => {
+            const filter = toLowerCaseAndWithoutDiacritics(this.filterText() ?? '');
+            return filter
+                ? this.options().filter((option) => toLowerCaseAndWithoutDiacritics(option.name).includes(filter))
+                : this.options();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "filteredOptions" }] : /* istanbul ignore next */ []));
+        this.isSelectDisabled = computed(() => this.disabled() || this.readonly() || this.options().length === 0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isSelectDisabled" }] : /* istanbul ignore next */ []));
+        this.assignableGroupsService = inject(AssignableGroupsService);
+        this.filterText = toSignal(this.filterControl.valueChanges, { initialValue: '' });
+        this.groups = rxResource({
+            stream: () => this.assignableGroupsService.getAssignableGroups(),
+            defaultValue: [],
+        });
     }
-}
-
-/**
- * @deprecated This model is obsolete and should not be used.
- */
-class GroupPermissionModel {
-    constructor() {
-        this.idGroupPermission = '';
-        this.isAllowed = false;
-        this.idGroup = '';
-        this.idModulePermission = '';
+    onSelectionChange(groupIds) {
+        this.value.set(groupIds);
+        this.touch.emit();
     }
+    static { this.ɵfac = function UserGroupsSelectorComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || UserGroupsSelectorComponent)(); }; }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: UserGroupsSelectorComponent, selectors: [["cauca-user-groups-selector"]], inputs: { value: [1, "value"], label: [1, "label"], disabled: [1, "disabled"], readonly: [1, "readonly"], required: [1, "required"], invalid: [1, "invalid"], touched: [1, "touched"], name: [1, "name"], errors: [1, "errors"] }, outputs: { value: "valueChange", touch: "touch" }, decls: 12, vars: 17, consts: [["subscriptSizing", "dynamic", 1, "user-groups-selector-field"], ["multiple", "", 3, "valueChange", "value", "disabled", "required"], [3, "formControl", "placeholderLabel", "noEntriesFoundLabel"], [3, "value"], [3, "touched", "errors"]], template: function UserGroupsSelectorComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "mat-form-field", 0)(1, "mat-label");
+            i0.ɵɵtext(2);
+            i0.ɵɵpipe(3, "translate");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(4, "mat-select", 1);
+            i0.ɵɵlistener("valueChange", function UserGroupsSelectorComponent_Template_mat_select_valueChange_4_listener($event) { return ctx.onSelectionChange($event); });
+            i0.ɵɵelementStart(5, "mat-option");
+            i0.ɵɵelement(6, "ngx-mat-select-search", 2);
+            i0.ɵɵpipe(7, "translate");
+            i0.ɵɵpipe(8, "translate");
+            i0.ɵɵcontrolCreate();
+            i0.ɵɵelementEnd();
+            i0.ɵɵrepeaterCreate(9, UserGroupsSelectorComponent_For_10_Template, 2, 2, "mat-option", 3, _forTrack0);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelement(11, "cauca-control-field-errors", 4);
+        } if (rf & 2) {
+            i0.ɵɵadvance(2);
+            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(3, 11, ctx.label()));
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("value", ctx.value())("disabled", ctx.isSelectDisabled())("required", ctx.required());
+            i0.ɵɵattribute("aria-invalid", ctx.invalid())("name", ctx.name() || null);
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("formControl", ctx.filterControl)("placeholderLabel", i0.ɵɵpipeBind1(7, 13, "search"))("noEntriesFoundLabel", i0.ɵɵpipeBind1(8, 15, "noResult"));
+            i0.ɵɵcontrol();
+            i0.ɵɵadvance(3);
+            i0.ɵɵrepeater(ctx.filteredOptions());
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("touched", ctx.touched())("errors", ctx.errors());
+        } }, dependencies: [ControlFieldErrorsComponent,
+            MatFormFieldModule, i1$2.MatFormField, i1$2.MatLabel, MatSelectModule, i2$2.MatSelect, i2$2.MatOption, NgxMatSelectSearchModule, i3$3.MatSelectSearchComponent, ReactiveFormsModule, i5.NgControlStatus, i5.FormControlDirective, TranslatePipe], styles: ["[_nghost-%COMP%]{display:block}.user-groups-selector-field[_ngcontent-%COMP%]{width:100%}"] }); }
 }
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(UserGroupsSelectorComponent, [{
+        type: Component,
+        args: [{ selector: 'cauca-user-groups-selector', imports: [
+                    ControlFieldErrorsComponent,
+                    MatFormFieldModule,
+                    MatSelectModule,
+                    NgxMatSelectSearchModule,
+                    ReactiveFormsModule,
+                    TranslatePipe,
+                ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-form-field class=\"user-groups-selector-field\" subscriptSizing=\"dynamic\">\n    <mat-label>{{ label() | translate }}</mat-label>\n    <mat-select multiple [value]=\"value()\" [disabled]=\"isSelectDisabled()\"\n                [required]=\"required()\"\n                [attr.aria-invalid]=\"invalid()\"\n                [attr.name]=\"name() || null\"\n                (valueChange)=\"onSelectionChange($event)\">\n        <mat-option>\n            <ngx-mat-select-search\n                [formControl]=\"filterControl\"\n                [placeholderLabel]=\"'search' | translate\"\n                [noEntriesFoundLabel]=\"'noResult' | translate\"/>\n        </mat-option>\n\n        @for (option of filteredOptions(); track option.id) {\n            <mat-option [value]=\"option.id\">{{ option.name }}</mat-option>\n        }\n    </mat-select>\n</mat-form-field>\n\n<cauca-control-field-errors [touched]=\"touched()\" [errors]=\"errors()\"/>\n", styles: [":host{display:block}.user-groups-selector-field{width:100%}\n"] }]
+    }], null, { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], touch: [{ type: i0.Output, args: ["touch"] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(UserGroupsSelectorComponent, { className: "UserGroupsSelectorComponent", filePath: "lib/components/user-groups-selector/user-groups-selector.component.ts", lineNumber: 28 }); })();
 
 /*
  * Public API Surface of cauca-management
@@ -2323,5 +2111,5 @@ class GroupPermissionModel {
  * Generated bundle index. Do not edit.
  */
 
-export { AllScopeToken, CaucaManagementComponent, CaucaManagementGroupComponent, CaucaManagementModule, CaucaManagementService, CaucaManagementUserComponent, GroupEditionPageComponent, GroupModel, GroupPermissionModel, GroupsPageComponent, MANAGEMENT_ROUTE_SEGMENT, MANAGEMENT_URL_PREFIX, ManagementGroupService, ManagementUserService, REFRESHABLE_PERMISSION_STATE_TOKEN, ScopeListGridColumnComponent, UserGroupModel, UserListGridComponent, UserModel, UserPermissionModel, UserPermissionsDialogComponent, UsersPageComponent, managementGroupRoutes, provideCaucaManagement };
+export { AllScopeToken, AssignableGroupsService, EmptyUserId, GroupEditionPageComponent, GroupsPageComponent, MANAGEMENT_ROUTE_SEGMENT, MANAGEMENT_URL_PREFIX, REFRESHABLE_PERMISSION_STATE_TOKEN, ScopeListGridColumnComponent, UserEditionService, UserGroupsSelectorComponent, UserListGridComponent, UserLoginFieldsComponent, UserPermissionsDialogComponent, UserPersonalInformationFieldsComponent, UsersPageComponent, createEmptyUserForEdition, createUserLoginSchema, createUserPersonalInformationSchema, managementGroupRoutes, provideCaucaManagement };
 //# sourceMappingURL=cauca-911-management.mjs.map