@cauca-911/management 22.0.2 → 22.0.4

package/fesm2022/cauca-911-management.mjs

@@ -1,13 +1,13 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, Injector, inject, Injectable, computed, ChangeDetectionStrategy, Component, ViewChild, signal, viewChild, resource, effect, untracked, model, input, HostListener, NgModule } from '@angular/core';
-import { pendingChangesGuard, DialogService, PageTitleComponent, LoadingSpinnerIndicatorComponent, LoadingErrorComponent, StrokedButtonComponent, RaisedButtonComponent, ListPaginatorComponent, IconButtonComponent, LoadingStateService, GroupContainerComponent, ConfirmationResult, SavingErrorBoxComponent } 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 } from '@cauca-911/material';
 import * as i1 from '@angular/material/card';
 import { MatCardModule } from '@angular/material/card';
 import { TranslatePipe } from '@ngx-translate/core';
 import { MatSort } from '@angular/material/sort';
 import { Router } from '@angular/router';
 import ODataFilterBuilder from 'odata-filter-builder';
-import { OdataGridComponent, SortableDataGridColumnComponent, SortableDataGridCheckColumnComponent, DataGridCommandsColumnComponent } from '@cauca-911/datagrid';
+import { OdataGridComponent, SortableDataGridColumnComponent, SortableDataGridCheckColumnComponent, DataGridCommandsColumnComponent, DataGridComponent, BaseGridColumnComponent, DataGridMenuColumnComponent } from '@cauca-911/datagrid';
 import { HttpClient } from '@angular/common/http';
 import { CaucaCoreService, toLowerCaseAndWithoutDiacritics } from '@cauca-911/core';
 import { firstValueFrom, startWith, debounceTime } from 'rxjs';
@@ -29,23 +29,13 @@ import { v4 } from 'uuid';
 import * as i4$1 from '@angular/material/list';
 import { MatListModule } from '@angular/material/list';
 import * as i6 from '@angular/material/tooltip';
-import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatTooltipModule, MatTooltip } from '@angular/material/tooltip';
 import * as i3 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import * as i2$1 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
-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 { NgStyle } from '@angular/common';
+import { MatColumnDef, MatHeaderCell, MatHeaderCellDef, MatCell, MatCellDef, MatFooterCell, MatFooterCellDef } from '@angular/material/table';
 
 const MANAGEMENT_URL_PREFIX = new InjectionToken('MANAGEMENT_URL_PREFIX');
 const MANAGEMENT_ROUTE_SEGMENT = new InjectionToken('MANAGEMENT_ROUTE_SEGMENT');
@@ -103,7 +93,7 @@ class GroupManagementService {
             }]
     }], null, null); })();
 
-const _c0$3 = () => ["name"];
+const _c0$4 = () => ["name"];
 class GroupListGridComponent {
     constructor() {
         this.columns = computed(() => this.getColumns(), /* @ts-ignore */
@@ -161,7 +151,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$3))("filterPredicate", ctx.filterPredicate)("displayedColumns", ctx.columns());
+            i0.ɵɵproperty("showTableOptions", true)("showAddButton", true)("addButtonLabel", i0.ɵɵpipeBind1(1, 10, "groups.addButtonLabel"))("baseSort", i0.ɵɵpureFunction0(16, _c0$4))("filterPredicate", ctx.filterPredicate)("displayedColumns", ctx.columns());
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("label", i0.ɵɵpipeBind1(3, 12, "groups.groupNameColumnLabel"));
             i0.ɵɵadvance(2);
@@ -365,8 +355,8 @@ class UserSearchService {
             }]
     }], null, null); })();
 
-const _c0$2 = ["resultPaginator"];
-const _forTrack0$3 = ($index, $item) => $item.id;
+const _c0$3 = ["resultPaginator"];
+const _forTrack0$4 = ($index, $item) => $item.id;
 function GroupUserSelectionDialogComponent_Conditional_13_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 8);
     i0.ɵɵtext(1);
@@ -418,7 +408,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$3);
+    i0.ɵɵrepeaterCreate(1, GroupUserSelectionDialogComponent_Conditional_17_For_2_Template, 4, 6, "mat-list-option", 19, _forTrack0$4);
     i0.ɵɵelementEnd();
     i0.ɵɵconditionalCreate(3, GroupUserSelectionDialogComponent_Conditional_17_Conditional_3_Template, 2, 2, "cauca-list-paginator", 20);
 } if (rf & 2) {
@@ -519,7 +509,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$2, 5);
+            i0.ɵɵviewQuerySignal(ctx.paginator, _c0$3, 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) {
@@ -608,8 +598,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$1 = ["paginator"];
-const _forTrack0$2 = ($index, $item) => $item.id;
+const _c0$2 = ["paginator"];
+const _forTrack0$3 = ($index, $item) => $item.id;
 function GroupUserEditionListComponent_For_10_Conditional_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 11);
     i0.ɵɵtext(1);
@@ -744,7 +734,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$1, 5);
+            i0.ɵɵviewQuerySignal(ctx.paginator, _c0$2, 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) {
@@ -759,7 +749,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$2, false, GroupUserEditionListComponent_ForEmpty_11_Template, 2, 1);
+            i0.ɵɵrepeaterCreate(9, GroupUserEditionListComponent_For_10_Template, 8, 5, "mat-list-item", 6, _forTrack0$3, 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);
@@ -832,7 +822,7 @@ class PermissionManagementService {
             }]
     }], null, null); })();
 
-const _forTrack0$1 = ($index, $item) => $item.id;
+const _forTrack0$2 = ($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);
@@ -917,7 +907,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$1, false, GroupPermissionListComponent_ForEmpty_10_Template, 6, 3, "div", 5);
+            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.ɵɵelementEnd();
         } if (rf & 2) {
             i0.ɵɵadvance(2);
@@ -1199,7 +1189,7 @@ var UserPermissionOriginKind;
     UserPermissionOriginKind[UserPermissionOriginKind["UserOverride"] = 1] = "UserOverride";
 })(UserPermissionOriginKind || (UserPermissionOriginKind = {}));
 
-const _forTrack0 = ($index, $item) => $item.idModulePermission;
+const _forTrack0$1 = ($index, $item) => $item.idModulePermission;
 function UserPermissionListComponent_For_9_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0, " check ");
 } }
@@ -1309,7 +1299,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, false, UserPermissionListComponent_ForEmpty_10_Template, 6, 3, "div", 6);
+            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.ɵɵelementEnd();
         } if (rf & 2) {
             i0.ɵɵadvance(2);
@@ -1394,614 +1384,319 @@ 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 }); })();
 
-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' }); }
+const _c0$1 = 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$1, ctx_r0.width()));
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r0.label() ?? ctx_r0.capitalize(ctx_r0.prop()), " ");
+} }
+function ScopeListGridColumnComponent_td_2_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span");
+    i0.ɵɵtext(1);
+    i0.ɵɵpipe(2, "translate");
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(2, 1, ctx_r0.allLabel()));
+} }
+function ScopeListGridColumnComponent_td_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 6);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const row_r2 = i0.ɵɵnextContext().$implicit;
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("matTooltip", row_r2[ctx_r0.prop()]);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(row_r2[ctx_r0.prop()]);
+} }
+function ScopeListGridColumnComponent_td_2_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span");
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const row_r2 = i0.ɵɵnextContext().$implicit;
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(row_r2[ctx_r0.prop()]);
+} }
+function ScopeListGridColumnComponent_td_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "td", 5);
+    i0.ɵɵconditionalCreate(1, ScopeListGridColumnComponent_td_2_Conditional_1_Template, 3, 3, "span")(2, ScopeListGridColumnComponent_td_2_Conditional_2_Template, 2, 2, "span", 6)(3, ScopeListGridColumnComponent_td_2_Conditional_3_Template, 2, 1, "span");
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const row_r2 = ctx.$implicit;
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(row_r2[ctx_r0.prop()] === ctx_r0.allToken ? 1 : ctx_r0.showToolTip() ? 2 : 3);
+} }
+function ScopeListGridColumnComponent_td_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "td", 7);
+} }
+/** The value a read view emits for a scope covering everything, in place of a list of names. */
+const AllScopeToken = 'ALL';
+function resolveTable() {
+    const odata = inject(OdataGridComponent, { optional: true });
+    const grid = inject(DataGridComponent, { optional: true });
+    return (grid ?? odata)?.table;
 }
-(() => { (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();
+class ScopeListGridColumnComponent extends BaseGridColumnComponent {
+    /**
+     * The `providers` alias above is what makes the grid's `ContentChildren(BaseGridColumnComponent)`
+     * match this subclass; without it the column registers nowhere and renders as an empty slot.
+     */
+    constructor() {
+        super(resolveTable());
+        /** Translation key shown instead of the list when the row's scope covers everything. */
+        this.allLabel = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "allLabel" }] : /* istanbul ignore next */ []));
+        this.allToken = AllScopeToken;
+    }
+    static { this.ɵfac = function ScopeListGridColumnComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ScopeListGridColumnComponent)(); }; }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ScopeListGridColumnComponent, selectors: [["cauca-scope-list-grid-column"]], inputs: { allLabel: [1, "allLabel"] }, features: [i0.ɵɵProvidersFeature([{ provide: BaseGridColumnComponent, useExisting: forwardRef(() => ScopeListGridColumnComponent) }]), i0.ɵɵInheritDefinitionFeature], decls: 4, vars: 2, consts: [[3, "matColumnDef"], ["mat-header-cell", "", 3, "ngStyle", 4, "matHeaderCellDef"], ["mat-cell", "", 4, "matCellDef"], ["mat-footer-cell", "", 4, "matFooterCellDef"], ["mat-header-cell", "", 3, "ngStyle"], ["mat-cell", ""], [3, "matTooltip"], ["mat-footer-cell", ""]], template: function ScopeListGridColumnComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementContainerStart(0, 0);
+            i0.ɵɵtemplate(1, ScopeListGridColumnComponent_th_1_Template, 2, 4, "th", 1)(2, ScopeListGridColumnComponent_td_2_Template, 4, 1, "td", 2)(3, ScopeListGridColumnComponent_td_3_Template, 1, 0, "td", 3);
+            i0.ɵɵelementContainerEnd();
         } if (rf & 2) {
-            i0.ɵɵadvance();
-            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(2, 1, "core.noGenericComponentOnThisLibrary"));
-        } }, dependencies: [TranslatePipe], encapsulation: 2 }); }
+            i0.ɵɵproperty("matColumnDef", i0.ɵɵinterpolate(ctx.prop()));
+        } }, dependencies: [MatColumnDef, MatHeaderCell, MatHeaderCellDef, MatCell, MatCellDef, MatFooterCell, MatFooterCellDef,
+            NgStyle, MatTooltip, TranslatePipe], encapsulation: 2 }); }
 }
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CaucaManagementComponent, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ScopeListGridColumnComponent, [{
         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' }); }
-}
-(() => { (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 {
-    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}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);
-    }
-    deletePermission(idUserPermission) {
-        return this.http.delete(`${this.baseUrlToUse}UserManagement/groups/${idUserPermission}`);
-    }
-    save(user) {
-        return this.http.post(`${this.baseUrlToUse}UserManagement`, user);
-    }
-    delete(idUser) {
-        return this.http.delete(`${this.baseUrlToUse}UserManagement/${idUser}`);
-    }
-    hasExistingUserName(user) {
-        return this.http.post(`${this.baseUrlToUse}UserManagement/UserNameAlreadyExist`, user);
-    }
-    static { this.ɵfac = function ManagementUserService_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ManagementUserService)(); }; }
-    static { this.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: ManagementUserService, factory: ManagementUserService.ɵfac, providedIn: 'root' }); }
-}
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ManagementUserService, [{
-        type: Injectable,
-        args: [{
-                providedIn: 'root'
-            }]
-    }], null, null); })();
-
-/**
- * @deprecated This service is obsolete and should not be used.
- */
-class ManagementPermissionService {
-    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}PermissionManagement`);
-    }
-    get(idPermission) {
-        return this.http.get(`${this.baseUrlToUse}PermissionManagement/${idPermission}`);
-    }
-    save(permission) {
-        return this.http.post(`${this.baseUrlToUse}PermissionManagement`, permission);
-    }
-    delete(idPermission) {
-        return this.http.delete(`${this.baseUrlToUse}PermissionManagement/${idPermission}`);
-    }
-    static { this.ɵfac = function ManagementPermissionService_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ManagementPermissionService)(); }; }
-    static { this.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: ManagementPermissionService, factory: ManagementPermissionService.ɵfac, providedIn: 'root' }); }
-}
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ManagementPermissionService, [{
-        type: Injectable,
-        args: [{
-                providedIn: 'root'
-            }]
-    }], null, null); })();
+        args: [{ selector: 'cauca-scope-list-grid-column', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: BaseGridColumnComponent, useExisting: forwardRef(() => ScopeListGridColumnComponent) }], imports: [
+                    MatColumnDef, MatHeaderCell, MatHeaderCellDef, MatCell, MatCellDef, MatFooterCell, MatFooterCellDef,
+                    NgStyle, MatTooltip, TranslatePipe,
+                ], template: "<ng-container matColumnDef=\"{{ prop() }}\">\n\n  <th mat-header-cell *matHeaderCellDef [ngStyle]=\"{'width': width()}\">\n    {{ label() ?? capitalize(prop()) }}\n  </th>\n\n  <td mat-cell *matCellDef=\"let row\">\n    @if (row[prop()] === allToken) {\n      <span>{{ allLabel() | translate }}</span>\n    } @else if (showToolTip()) {\n      <span [matTooltip]=\"row[prop()]\">{{ row[prop()] }}</span>\n    } @else {\n      <span>{{ row[prop()] }}</span>\n    }\n  </td>\n\n  <td mat-footer-cell *matFooterCellDef></td>\n\n</ng-container>\n" }]
+    }], () => [], { 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 = () => ["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()();
+const _c0 = () => ["userName"];
+const _forTrack0 = ($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 ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("displayExpr", ctx_r2.fullName)("dataSource", ctx_r2.users)("searchEnabled", true)("searchExpr", ctx_r2.fullName);
+    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));
 } }
-function CaucaManagementGroupComponent_div_21_div_2_Template(rf, ctx) { if (rf & 1) {
+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));
+} }
+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));
+} }
+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);
+} if (rf & 2) {
+    let tmp_10_0;
+    const column_r1 = ctx.$implicit;
+    i0.ɵɵconditional((tmp_10_0 = column_r1.kind) === "scope" ? 0 : tmp_10_0 === "check" ? 1 : 2);
+} }
+function UserListGridComponent_Conditional_10_ng_template_1_Conditional_0_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()();
+    i0.ɵɵelementStart(0, "cauca-menu-item", 11);
+    i0.ɵɵlistener("buttonClick", function UserListGridComponent_Conditional_10_ng_template_1_Conditional_0_Template_cauca_menu_item_buttonClick_0_listener() { i0.ɵɵrestoreView(_r4); const row_r5 = i0.ɵɵnextContext().row; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.openPermissions(row_r5)); });
+    i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const permission_r5 = ctx.$implicit;
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("text", permission_r5.name);
+    i0.ɵɵproperty("translateLabel", true);
 } }
-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()();
+function UserListGridComponent_Conditional_10_ng_template_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, UserListGridComponent_Conditional_10_ng_template_1_Conditional_0_Template, 1, 1, "cauca-menu-item", 10);
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵconditional(ctx_r2.showPermissions() ? 0 : -1);
+} }
+function UserListGridComponent_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+    const _r2 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "cauca-data-grid-menu-column", 9);
+    i0.ɵɵlistener("deleteClick", function UserListGridComponent_Conditional_10_Template_cauca_data_grid_menu_column_deleteClick_0_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onDelete($event)); });
+    i0.ɵɵtemplate(1, UserListGridComponent_Conditional_10_ng_template_1_Template, 1, 1, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor);
+    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");
+    i0.ɵɵproperty("canEdit", ctx_r2.canEdit())("canDelete", ctx_r2.canDelete())("editLinkField", ctx_r2.editLinkField());
 } }
-/**
- * @deprecated This component is obsolete and should not be used.
- */
-class CaucaManagementGroupComponent {
+/** The intersection of every site's feed, from `UserListItem` in `Cause.SecurityManagement`. */
+const SharedColumns = ['userName', 'firstName', 'lastName'];
+const SharedSearchedColumns = ['searchableUserName', 'searchableFirstName', 'searchableLastName'];
+class UserListGridComponent {
     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(', ');
+        /**
+         * 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 */ []));
+        this.showAddButton = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showAddButton" }] : /* istanbul ignore next */ []));
+        /** Translation key. */
+        this.addButtonLabel = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "addButtonLabel" }] : /* istanbul ignore next */ []));
+        this.canEdit = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "canEdit" }] : /* istanbul ignore next */ []));
+        this.canDelete = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "canDelete" }] : /* istanbul ignore next */ []));
+        this.editLinkField = input('id', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "editLinkField" }] : /* istanbul ignore next */ []));
+        this.showPermissions = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showPermissions" }] : /* istanbul ignore next */ []));
+        this.persistState = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "persistState" }] : /* istanbul ignore next */ []));
+        this.addClick = output();
+        this.deleteClick = output();
+        this.hasRowActions = computed(() => this.showPermissions() || this.canEdit() || this.canDelete(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hasRowActions" }] : /* istanbul ignore next */ []));
+        this.columns = computed(() => [
+            ...SharedColumns,
+            ...this.extraColumns().map(column => column.prop),
+            ...(this.hasRowActions() ? ['menu'] : []),
+        ], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
+        this.grid = viewChild.required(OdataGridComponent, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "grid" }] : /* istanbul ignore next */ []));
+        this.sort = viewChild.required(MatSort, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "sort" }] : /* istanbul ignore next */ []));
+        this.dialog = inject(DialogService);
+        this.filterPredicate = (filter) => {
+            const searched = [
+                ...SharedSearchedColumns,
+                ...this.extraColumns()
+                    .map(column => column.searchableProp)
+                    .filter((prop) => !!prop),
+            ];
+            const computedFilter = filter
+                ? searched.reduce((builder, column) => builder.contains(column, filter), ODataFilterBuilder('or'))
+                : ODataFilterBuilder();
+            return [{ getFilter: () => [computedFilter.toString()] }];
         };
-        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();
-        });
+        this.grid().setUpSort(this.sort());
     }
-    onEditingStart(e) {
-        this.groupUsers = e.data.users;
+    refresh() {
+        this.grid().refreshData();
     }
-    onInitNewRow() {
-        this.groupUsers = [];
+    async openPermissions(row) {
+        await this.dialog.showCustomDialog(UserPermissionsDialogComponent, { userId: row.id, userDisplayName: `${row.firstName} ${row.lastName}` }, { width: '600px' });
     }
-    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);
+    onDelete(row) {
+        this.deleteClick.emit(row);
     }
-    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);
-            i0.ɵɵpipe(6, "translate");
-            i0.ɵɵelement(7, "dxi-column", 4);
-            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);
+    static { this.ɵfac = function UserListGridComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || UserListGridComponent)(); }; }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: UserListGridComponent, selectors: [["cauca-user-list-grid"]], viewQuery: function UserListGridComponent_Query(rf, ctx) { if (rf & 1) {
+            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-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", "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) {
+            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(); });
+            i0.ɵɵelement(2, "cauca-sortable-data-grid-column", 2);
+            i0.ɵɵpipe(3, "translate");
+            i0.ɵɵelement(4, "cauca-sortable-data-grid-column", 3);
+            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.ɵɵconditionalCreate(10, UserListGridComponent_Conditional_10_Template, 3, 3, "cauca-data-grid-menu-column", 5);
             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.ɵɵproperty("persistState", ctx.persistState())("showTableOptions", true)("showRefreshButton", true)("showAddButton", ctx.showAddButton())("addButtonLabel", i0.ɵɵpipeBind1(1, 15, ctx.addButtonLabel()))("baseSort", i0.ɵɵpureFunction0(23, _c0))("filterPredicate", ctx.filterPredicate)("displayedColumns", ctx.columns());
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("caption", i0.ɵɵpipeBind1(6, 28, "management.assignableByAllUsers"))("visible", ctx.showAssignableByAllUsers());
+            i0.ɵɵproperty("showToolTip", true)("label", i0.ɵɵpipeBind1(3, 17, "userList.column.userName"));
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("caption", i0.ɵɵpipeBind1(8, 30, "management.users"))("calculateCellValue", ctx.calculateUsersCellValue);
+            i0.ɵɵproperty("showToolTip", true)("label", i0.ɵɵpipeBind1(5, 19, "userList.column.firstName"));
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("caption", i0.ɵɵpipeBind1(10, 32, "management.permissions"))("visible", false);
+            i0.ɵɵproperty("showToolTip", true)("label", i0.ɵɵpipeBind1(7, 21, "userList.column.lastName"));
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("enabled", false);
-            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.ɵɵrepeater(ctx.extraColumns());
             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.ɵɵadvance();
-            i0.ɵɵproperty("dxTemplateOf", "usersEditTemplate");
-            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.ɵɵconditional(ctx.hasRowActions() ? 10 : -1);
+        } }, dependencies: [MatSort, OdataGridComponent, SortableDataGridColumnComponent, SortableDataGridCheckColumnComponent,
+            ScopeListGridColumnComponent, DataGridMenuColumnComponent, MenuItemComponent, TranslatePipe], encapsulation: 2 }); }
 }
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CaucaManagementGroupComponent, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(UserListGridComponent, [{
         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 }); })();
+        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    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                                      [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" }]
+    }], 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 }); })();
 
-/**
- * @deprecated This model is obsolete and should not be used.
- */
-class UserModel {
+class UsersPageComponent {
     constructor() {
-        this.userName = '';
-        this.firstName = '';
-        this.lastName = '';
-        this.password = '';
-        this.email = '';
-        this.isActive = true;
-        this.twoFactorAuthenticatorEnabled = false;
-    }
-}
-
-/**
- * @deprecated This component is obsolete and should not be used.
- */
-class CaucaManagementUserComponent {
-    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);
-            i0.ɵɵpipe(6, "translate");
-            i0.ɵɵelement(7, "dxi-column", 4);
-            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.ɵɵ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);
+        /** Translation keys. Every site names its users page and its menu differently. */
+        this.caption = input('management.users', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "caption" }] : /* istanbul ignore next */ []));
+        this.baseCrumb = input('menu.management', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "baseCrumb" }] : /* istanbul ignore next */ []));
+        this.breadcrumb = input('management.users', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "breadcrumb" }] : /* istanbul ignore next */ []));
+        this.extraColumns = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "extraColumns" }] : /* istanbul ignore next */ []));
+        this.showAddButton = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showAddButton" }] : /* istanbul ignore next */ []));
+        this.addButtonLabel = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "addButtonLabel" }] : /* istanbul ignore next */ []));
+        this.canEdit = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "canEdit" }] : /* istanbul ignore next */ []));
+        this.canDelete = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "canDelete" }] : /* istanbul ignore next */ []));
+        this.editLinkField = input('id', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "editLinkField" }] : /* istanbul ignore next */ []));
+        this.showPermissions = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showPermissions" }] : /* istanbul ignore next */ []));
+        this.persistState = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "persistState" }] : /* istanbul ignore next */ []));
+        this.addClick = output();
+        this.deleteClick = output();
+        this.grid = viewChild.required(UserListGridComponent, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "grid" }] : /* istanbul ignore next */ []));
+    }
+    refresh() {
+        this.grid().refresh();
+    }
+    static { this.ɵfac = function UsersPageComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || UsersPageComponent)(); }; }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: UsersPageComponent, selectors: [["cauca-users-page"]], viewQuery: function UsersPageComponent_Query(rf, ctx) { if (rf & 1) {
+            i0.ɵɵviewQuerySignal(ctx.grid, UserListGridComponent, 5);
+        } if (rf & 2) {
+            i0.ɵɵqueryAdvance();
+        } }, inputs: { caption: [1, "caption"], baseCrumb: [1, "baseCrumb"], breadcrumb: [1, "breadcrumb"], 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: 4, vars: 12, consts: [[3, "showBreadcrumb", "caption", "baseCrumb", "breadcrumb"], [1, "page-content"], [1, "page-content-grid"], [3, "addClick", "deleteClick", "extraColumns", "showAddButton", "addButtonLabel", "canEdit", "canDelete", "editLinkField", "showPermissions", "persistState"]], template: function UsersPageComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelement(0, "cauca-page-title", 0);
+            i0.ɵɵelementStart(1, "mat-card", 1)(2, "mat-card-content", 2)(3, "cauca-user-list-grid", 3);
+            i0.ɵɵlistener("addClick", function UsersPageComponent_Template_cauca_user_list_grid_addClick_3_listener() { return ctx.addClick.emit(); })("deleteClick", function UsersPageComponent_Template_cauca_user_list_grid_deleteClick_3_listener($event) { return ctx.deleteClick.emit($event); });
             i0.ɵɵelementEnd()()();
         } if (rf & 2) {
-            i0.ɵɵproperty("dataSource", ctx.users);
-            i0.ɵɵadvance();
-            i0.ɵɵproperty("caption", i0.ɵɵpipeBind1(2, 17, "management.userName"));
-            i0.ɵɵadvance(2);
-            i0.ɵɵproperty("message", i0.ɵɵpipeBind1(4, 19, "management.userNameAlreadyUsed"))("validationCallback", ctx.userNameAlreadyUsedValidation);
-            i0.ɵɵadvance(2);
-            i0.ɵɵproperty("caption", i0.ɵɵpipeBind1(6, 21, "management.isActive"))("visible", false);
-            i0.ɵɵadvance(2);
-            i0.ɵɵproperty("caption", i0.ɵɵpipeBind1(8, 23, "management.firstName"));
-            i0.ɵɵadvance(2);
-            i0.ɵɵproperty("caption", i0.ɵɵpipeBind1(10, 25, "management.lastName"));
-            i0.ɵɵadvance(2);
-            i0.ɵɵproperty("caption", i0.ɵɵpipeBind1(12, 27, "management.group"));
-            i0.ɵɵadvance(2);
-            i0.ɵɵproperty("allowAdding", true)("allowUpdating", true)("allowDeleting", true)("useIcons", true);
-            i0.ɵɵadvance();
-            i0.ɵɵproperty("showTitle", true)("title", i0.ɵɵpipeBind1(15, 29, "management.group"));
-            i0.ɵɵadvance(2);
-            i0.ɵɵproperty("labelLocation", ctx.showColumnXS ? "left" : "top");
-            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("showBreadcrumb", true)("caption", ctx.caption())("baseCrumb", ctx.baseCrumb())("breadcrumb", ctx.breadcrumb());
+            i0.ɵɵadvance(3);
+            i0.ɵɵproperty("extraColumns", ctx.extraColumns())("showAddButton", ctx.showAddButton())("addButtonLabel", ctx.addButtonLabel())("canEdit", ctx.canEdit())("canDelete", ctx.canDelete())("editLinkField", ctx.editLinkField())("showPermissions", ctx.showPermissions())("persistState", ctx.persistState());
+        } }, dependencies: [MatCardModule, i1.MatCard, i1.MatCardContent, PageTitleComponent, UserListGridComponent], encapsulation: 2 }); }
 }
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CaucaManagementUserComponent, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(UsersPageComponent, [{
         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 = '';
-    }
-}
-
-/**
- * @deprecated This model is obsolete and should not be used.
- */
-class GroupModel {
-    constructor() {
-        this.name = '';
-        this.users = [];
-        this.permissions = [];
-    }
-}
-
-/**
- * @deprecated This model is obsolete and should not be used.
- */
-class GroupPermissionModel {
-    constructor() {
-        this.idGroupPermission = '';
-        this.isAllowed = false;
-        this.idGroup = '';
-        this.idModulePermission = '';
-    }
-}
+        args: [{ selector: 'cauca-users-page', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatCardModule, PageTitleComponent, UserListGridComponent], template: "<cauca-page-title\n    [showBreadcrumb]=\"true\"\n    [caption]=\"caption()\"\n    [baseCrumb]=\"baseCrumb()\"\n    [breadcrumb]=\"breadcrumb()\"/>\n\n<mat-card class=\"page-content\">\n\n  <mat-card-content class=\"page-content-grid\">\n    <cauca-user-list-grid\n        [extraColumns]=\"extraColumns()\"\n        [showAddButton]=\"showAddButton()\"\n        [addButtonLabel]=\"addButtonLabel()\"\n        [canEdit]=\"canEdit()\"\n        [canDelete]=\"canDelete()\"\n        [editLinkField]=\"editLinkField()\"\n        [showPermissions]=\"showPermissions()\"\n        [persistState]=\"persistState()\"\n        (addClick)=\"addClick.emit()\"\n        (deleteClick)=\"deleteClick.emit($event)\"/>\n  </mat-card-content>\n\n</mat-card>\n" }]
+    }], 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 }); })();
 
 /*
  * Public API Surface of cauca-management
@@ -2011,5 +1706,5 @@ class GroupPermissionModel {
  * Generated bundle index. Do not edit.
  */
 
-export { CaucaManagementComponent, CaucaManagementGroupComponent, CaucaManagementModule, CaucaManagementService, CaucaManagementUserComponent, GroupEditionPageComponent, GroupModel, GroupPermissionModel, GroupsPageComponent, MANAGEMENT_ROUTE_SEGMENT, MANAGEMENT_URL_PREFIX, ManagementGroupService, ManagementUserService, REFRESHABLE_PERMISSION_STATE_TOKEN, UserGroupModel, UserModel, UserPermissionModel, UserPermissionsDialogComponent, managementGroupRoutes, provideCaucaManagement };
+export { AllScopeToken, GroupEditionPageComponent, GroupsPageComponent, MANAGEMENT_ROUTE_SEGMENT, MANAGEMENT_URL_PREFIX, REFRESHABLE_PERMISSION_STATE_TOKEN, ScopeListGridColumnComponent, UserListGridComponent, UserPermissionsDialogComponent, UsersPageComponent, managementGroupRoutes, provideCaucaManagement };
 //# sourceMappingURL=cauca-911-management.mjs.map