@myrmidon/auth-jwt-admin 0.1.2 → 1.0.0

package/fesm2020/myrmidon-auth-jwt-admin.mjs

@@ -1,40 +1,41 @@
 import * as i0 from '@angular/core';
-import { Injectable, EventEmitter, Component, Input, Output, InjectionToken, inject, Optional, Inject, NgModule } from '@angular/core';
+import { Injectable, EventEmitter, Component, Input, Output, Optional, Inject, NgModule } from '@angular/core';
 import * as i1$1 from '@angular/forms';
 import { Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { retry, catchError, take, startWith, tap, switchMap, map } from 'rxjs/operators';
+import { retry, catchError, take } from 'rxjs/operators';
 import * as i2$1 from '@angular/material/snack-bar';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
 import * as i1 from '@angular/common/http';
 import { HttpParams, HttpClientModule } from '@angular/common/http';
 import * as i2 from '@myrmidon/ng-tools';
 import { NgToolsModule } from '@myrmidon/ng-tools';
-import * as i7 from '@angular/common';
+import * as i4 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i4 from '@angular/material/button';
+import * as i5 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
 import * as i6 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
-import * as i7$1 from '@angular/material/form-field';
-import * as i8 from '@angular/material/input';
+import * as i7 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
+import * as i8 from '@angular/material/form-field';
 import * as i9 from '@angular/material/progress-spinner';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-import * as i15 from '@datorama/akita';
-import { EntityStore, StoreConfig, QueryEntity, PaginatorPlugin } from '@datorama/akita';
-import { __decorate } from 'tslib';
-import * as i8$1 from '@angular/material/tooltip';
+import { BehaviorSubject, combineLatest, map, debounceTime, take as take$1 } from 'rxjs';
+import { select, createStore, withProps } from '@ngneat/elf';
+import { selectActiveEntity, withEntities, withActiveId, upsertEntities, deleteAllEntities, setActiveId, updateEntities } from '@ngneat/elf-entities';
+import { selectPaginationData, selectCurrentPageEntities, deleteAllPages, withPagination, updatePaginationData, setPage, hasPage, setCurrentPage } from '@ngneat/elf-pagination';
+import { selectRequestStatus, withRequestsCache, withRequestsStatus, updateRequestStatus } from '@ngneat/elf-requests';
+import * as i9$1 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import { BehaviorSubject, combineLatest } from 'rxjs';
 import * as i1$2 from '@angular/material/dialog';
 import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
 import * as i2$2 from '@myrmidon/auth-jwt-login';
 import { AuthJwtLoginModule } from '@myrmidon/auth-jwt-login';
-import * as i10 from '@angular/material/paginator';
+import * as i7$1 from '@angular/material/paginator';
 import { MatPaginatorModule } from '@angular/material/paginator';
-import * as i11 from '@angular/material/progress-bar';
+import * as i8$1 from '@angular/material/progress-bar';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
-import * as i5 from '@angular/material/checkbox';
+import * as i5$1 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatCardModule } from '@angular/material/card';
 import { RouterModule } from '@angular/router';
@@ -148,10 +149,10 @@ class AuthJwtAccountService {
         })
             .pipe(retry(3), catchError(this._error.handleError));
     }
-    getUsers(filter) {
+    getUsers(filter, pageNumber = 1, pageSize = 20) {
         let httpParams = new HttpParams();
-        httpParams = httpParams.set('pageNumber', filter.pageNumber.toString());
-        httpParams = httpParams.set('pageSize', filter.pageSize.toString());
+        httpParams = httpParams.set('pageNumber', pageNumber.toString());
+        httpParams = httpParams.set('pageSize', pageSize.toString());
         if (filter.name) {
             httpParams = httpParams.set('name', filter.name);
         }
@@ -248,9 +249,9 @@ class AuthJwtAccountService {
             .pipe(catchError(this._error.handleError));
     }
 }
-AuthJwtAccountService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: AuthJwtAccountService, deps: [{ token: i1.HttpClient }, { token: i2.ErrorService }, { token: i2.EnvService }], target: i0.ɵɵFactoryTarget.Injectable });
-AuthJwtAccountService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: AuthJwtAccountService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: AuthJwtAccountService, decorators: [{
+AuthJwtAccountService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: AuthJwtAccountService, deps: [{ token: i1.HttpClient }, { token: i2.ErrorService }, { token: i2.EnvService }], target: i0.ɵɵFactoryTarget.Injectable });
+AuthJwtAccountService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: AuthJwtAccountService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: AuthJwtAccountService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -324,9 +325,9 @@ class PasswordStrengthBarComponent {
         }
     }
 }
-PasswordStrengthBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: PasswordStrengthBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PasswordStrengthBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.6", type: PasswordStrengthBarComponent, selector: "auth-jwt-password-strength-bar", inputs: { passwordToCheck: "passwordToCheck" }, outputs: { strengthChange: "strengthChange" }, usesOnChanges: true, ngImport: i0, template: "<div id=\"strength\">\n  <small>strength:</small>\n  <ul id=\"strengthBar\">\n    <li class=\"point\" [style.background-color]=\"bars[0]\"></li>\n    <li class=\"point\" [style.background-color]=\"bars[1]\"></li>\n    <li class=\"point\" [style.background-color]=\"bars[2]\"></li>\n    <li class=\"point\" [style.background-color]=\"bars[3]\"></li>\n    <li class=\"point\" [style.background-color]=\"bars[4]\"></li>\n  </ul>\n</div>\n", styles: ["ul#strengthBar{display:inline;list-style:none;margin:0 0 0 15px;padding:0;vertical-align:2px}li.point:last{margin:0!important}li.point{background:#ddd;border-radius:2px;display:inline-block;height:5px;margin-right:1px;width:20px}\n"] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: PasswordStrengthBarComponent, decorators: [{
+PasswordStrengthBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: PasswordStrengthBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+PasswordStrengthBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", type: PasswordStrengthBarComponent, selector: "auth-jwt-password-strength-bar", inputs: { passwordToCheck: "passwordToCheck" }, outputs: { strengthChange: "strengthChange" }, usesOnChanges: true, ngImport: i0, template: "<div id=\"strength\">\n  <small>strength:</small>\n  <ul id=\"strengthBar\">\n    <li class=\"point\" [style.background-color]=\"bars[0]\"></li>\n    <li class=\"point\" [style.background-color]=\"bars[1]\"></li>\n    <li class=\"point\" [style.background-color]=\"bars[2]\"></li>\n    <li class=\"point\" [style.background-color]=\"bars[3]\"></li>\n    <li class=\"point\" [style.background-color]=\"bars[4]\"></li>\n  </ul>\n</div>\n", styles: ["ul#strengthBar{display:inline;list-style:none;margin:0 0 0 15px;padding:0;vertical-align:2px}li.point:last{margin:0!important}li.point{background:#ddd;border-radius:2px;display:inline-block;height:5px;margin-right:1px;width:20px}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: PasswordStrengthBarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'auth-jwt-password-strength-bar', template: "<div id=\"strength\">\n  <small>strength:</small>\n  <ul id=\"strengthBar\">\n    <li class=\"point\" [style.background-color]=\"bars[0]\"></li>\n    <li class=\"point\" [style.background-color]=\"bars[1]\"></li>\n    <li class=\"point\" [style.background-color]=\"bars[2]\"></li>\n    <li class=\"point\" [style.background-color]=\"bars[3]\"></li>\n    <li class=\"point\" [style.background-color]=\"bars[4]\"></li>\n  </ul>\n</div>\n", styles: ["ul#strengthBar{display:inline;list-style:none;margin:0 0 0 15px;padding:0;vertical-align:2px}li.point:last{margin:0!important}li.point{background:#ddd;border-radius:2px;display:inline-block;height:5px;margin-right:1px;width:20px}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { passwordToCheck: [{
@@ -514,118 +515,158 @@ class AuthJwtRegistrationComponent {
         });
     }
 }
-AuthJwtRegistrationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: AuthJwtRegistrationComponent, deps: [{ token: i1$1.UntypedFormBuilder }, { token: i2$1.MatSnackBar }, { token: AuthJwtAccountService }], target: i0.ɵɵFactoryTarget.Component });
-AuthJwtRegistrationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.6", type: AuthJwtRegistrationComponent, selector: "auth-jwt-registration", outputs: { registered: "registered" }, ngImport: i0, template: "<div>\n  <div>\n    <p>\n      To register a new user, you must provide his email address, choose a\n      password, and choose a username, which must be unique (you will be\n      notified if another user has already taken that name). The username must\n      include only letters/digits, start with a letter, and be no shorter than 3\n      characters, nor longer than 50.\n    </p>\n    <p>\n      To promote a decent security level, the password must include at least 8\n      characters, uppercase and lowercase letters, digits, and punctuation (like\n      dashes, stops, parentheses, etc.).\n    </p>\n    <p>\n      Once registered, the user will receive an email message to the email\n      address you specified; he will have to click on the provided link to\n      complete the registration process.\n    </p>\n  </div>\n\n  <form role=\"form\" [formGroup]=\"registration\" (submit)=\"onSubmit()\">\n    <fieldset>\n      <label>register user</label>\n      <!-- email -->\n      <div>\n        <mat-form-field>\n          <input\n            matInput\n            type=\"email\"\n            id=\"email\"\n            maxlength=\"256\"\n            required\n            autofocus\n            spellcheck=\"false\"\n            placeholder=\"email\"\n            formControlName=\"email\"\n          />\n          <mat-error>{{ getEmailErrorLabel() }}</mat-error>\n          <mat-icon *ngIf=\"email.pending\">hourglass</mat-icon>\n        </mat-form-field>\n      </div>\n\n      <!-- name -->\n      <div>\n        <mat-form-field>\n          <input\n            matInput\n            type=\"text\"\n            id=\"name\"\n            maxlength=\"50\"\n            required\n            pattern=\"^[a-zA-Z][a-zA-Z0-9]{2,49}$\"\n            spellcheck=\"false\"\n            placeholder=\"username\"\n            formControlName=\"name\"\n          />\n          <mat-error>{{ getNameErrorLabel() }}</mat-error>\n          <mat-icon *ngIf=\"name.pending\">hourglass</mat-icon>\n        </mat-form-field>\n      </div>\n\n      <!-- first name -->\n      <div>\n        <mat-form-field>\n          <input\n            matInput\n            type=\"text\"\n            id=\"firstName\"\n            maxlength=\"50\"\n            required\n            spellcheck=\"false\"\n            placeholder=\"first name\"\n            formControlName=\"firstName\"\n          />\n          <mat-error\n            *ngIf=\"\n              firstName.hasError('required') &&\n              (firstName.dirty || firstName.touched)\n            \"\n            class=\"text-danger small\"\n          >\n            first name required\n          </mat-error>\n        </mat-form-field>\n      </div>\n\n      <!-- last name -->\n      <div>\n        <mat-form-field>\n          <input\n            matInput\n            type=\"text\"\n            id=\"lastName\"\n            maxlength=\"50\"\n            required\n            spellcheck=\"false\"\n            placeholder=\"last name\"\n            formControlName=\"lastName\"\n          />\n          <mat-error\n            *ngIf=\"\n              lastName.hasError('required') &&\n              (lastName.dirty || lastName.touched)\n            \"\n            class=\"text-danger small\"\n          >\n            last name required\n          </mat-error>\n        </mat-form-field>\n      </div>\n\n      <div [formGroup]=\"passwords\">\n        <!-- password -->\n        <div>\n          <mat-form-field>\n            <input\n              matInput\n              type=\"password\"\n              name=\"password\"\n              autocomplete=\"new-password\"\n              maxlength=\"50\"\n              required\n              spellcheck=\"false\"\n              placeholder=\"password\"\n              formControlName=\"password\"\n            />\n            <auth-jwt-password-strength-bar [passwordToCheck]=\"password.value\">\n            </auth-jwt-password-strength-bar>\n            <mat-error>{{ getPasswordErrorLabel() }}</mat-error>\n          </mat-form-field>\n        </div>\n\n        <!-- confirm password -->\n        <div>\n          <mat-form-field>\n            <input\n              matInput\n              type=\"password\"\n              name=\"confirmPassword\"\n              maxlength=\"50\"\n              required\n              spellcheck=\"false\"\n              placeholder=\"confirm password\"\n              formControlName=\"confirmPassword\"\n            />\n            <mat-error\n              *ngIf=\"\n                passwords.hasError('areEqual') &&\n                (confirmPassword.dirty || confirmPassword.touched)\n              \"\n            >\n              password differs from confirmation password\n            </mat-error>\n          </mat-form-field>\n        </div>\n      </div>\n\n      <button\n        mat-raised-button\n        type=\"submit\"\n        color=\"primary\"\n        [disabled]=\"\n          !registration.valid || busy || name.pending || email.pending\n        \"\n      >\n        register\n      </button>\n      <mat-progress-spinner\n        diameter=\"20\"\n        *ngIf=\"busy\"\n        aria-label=\"Busy\"\n      ></mat-progress-spinner>\n    </fieldset>\n  </form>\n</div>\n", styles: ["mat-form-field{width:400px}fieldset{border:1px solid silver;border-radius:8px;padding:16px}\n"], dependencies: [{ kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7$1.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i7$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i9.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: PasswordStrengthBarComponent, selector: "auth-jwt-password-strength-bar", inputs: ["passwordToCheck"], outputs: ["strengthChange"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: AuthJwtRegistrationComponent, decorators: [{
+AuthJwtRegistrationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: AuthJwtRegistrationComponent, deps: [{ token: i1$1.UntypedFormBuilder }, { token: i2$1.MatSnackBar }, { token: AuthJwtAccountService }], target: i0.ɵɵFactoryTarget.Component });
+AuthJwtRegistrationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", type: AuthJwtRegistrationComponent, selector: "auth-jwt-registration", outputs: { registered: "registered" }, ngImport: i0, template: "<div>\n  <div>\n    <p>\n      To register a new user, you must provide his email address, choose a\n      password, and choose a username, which must be unique (you will be\n      notified if another user has already taken that name). The username must\n      include only letters/digits, start with a letter, and be no shorter than 3\n      characters, nor longer than 50.\n    </p>\n    <p>\n      To promote a decent security level, the password must include at least 8\n      characters, uppercase and lowercase letters, digits, and punctuation (like\n      dashes, stops, parentheses, etc.).\n    </p>\n    <p>\n      Once registered, the user will receive an email message to the email\n      address you specified; he will have to click on the provided link to\n      complete the registration process.\n    </p>\n  </div>\n\n  <form role=\"form\" [formGroup]=\"registration\" (submit)=\"onSubmit()\">\n    <fieldset>\n      <label>register user</label>\n      <!-- email -->\n      <div>\n        <mat-form-field>\n          <input\n            matInput\n            type=\"email\"\n            id=\"email\"\n            maxlength=\"256\"\n            required\n            autofocus\n            spellcheck=\"false\"\n            placeholder=\"email\"\n            formControlName=\"email\"\n          />\n          <mat-error>{{ getEmailErrorLabel() }}</mat-error>\n          <mat-icon *ngIf=\"email.pending\">hourglass</mat-icon>\n        </mat-form-field>\n      </div>\n\n      <!-- name -->\n      <div>\n        <mat-form-field>\n          <input\n            matInput\n            type=\"text\"\n            id=\"name\"\n            maxlength=\"50\"\n            required\n            pattern=\"^[a-zA-Z][a-zA-Z0-9]{2,49}$\"\n            spellcheck=\"false\"\n            placeholder=\"username\"\n            formControlName=\"name\"\n          />\n          <mat-error>{{ getNameErrorLabel() }}</mat-error>\n          <mat-icon *ngIf=\"name.pending\">hourglass</mat-icon>\n        </mat-form-field>\n      </div>\n\n      <!-- first name -->\n      <div>\n        <mat-form-field>\n          <input\n            matInput\n            type=\"text\"\n            id=\"firstName\"\n            maxlength=\"50\"\n            required\n            spellcheck=\"false\"\n            placeholder=\"first name\"\n            formControlName=\"firstName\"\n          />\n          <mat-error\n            *ngIf=\"\n              firstName.hasError('required') &&\n              (firstName.dirty || firstName.touched)\n            \"\n            class=\"text-danger small\"\n          >\n            first name required\n          </mat-error>\n        </mat-form-field>\n      </div>\n\n      <!-- last name -->\n      <div>\n        <mat-form-field>\n          <input\n            matInput\n            type=\"text\"\n            id=\"lastName\"\n            maxlength=\"50\"\n            required\n            spellcheck=\"false\"\n            placeholder=\"last name\"\n            formControlName=\"lastName\"\n          />\n          <mat-error\n            *ngIf=\"\n              lastName.hasError('required') &&\n              (lastName.dirty || lastName.touched)\n            \"\n            class=\"text-danger small\"\n          >\n            last name required\n          </mat-error>\n        </mat-form-field>\n      </div>\n\n      <div [formGroup]=\"passwords\">\n        <!-- password -->\n        <div>\n          <mat-form-field>\n            <input\n              matInput\n              type=\"password\"\n              name=\"password\"\n              autocomplete=\"new-password\"\n              maxlength=\"50\"\n              required\n              spellcheck=\"false\"\n              placeholder=\"password\"\n              formControlName=\"password\"\n            />\n            <auth-jwt-password-strength-bar [passwordToCheck]=\"password.value\">\n            </auth-jwt-password-strength-bar>\n            <mat-error>{{ getPasswordErrorLabel() }}</mat-error>\n          </mat-form-field>\n        </div>\n\n        <!-- confirm password -->\n        <div>\n          <mat-form-field>\n            <input\n              matInput\n              type=\"password\"\n              name=\"confirmPassword\"\n              maxlength=\"50\"\n              required\n              spellcheck=\"false\"\n              placeholder=\"confirm password\"\n              formControlName=\"confirmPassword\"\n            />\n            <mat-error\n              *ngIf=\"\n                passwords.hasError('areEqual') &&\n                (confirmPassword.dirty || confirmPassword.touched)\n              \"\n            >\n              password differs from confirmation password\n            </mat-error>\n          </mat-form-field>\n        </div>\n      </div>\n\n      <button\n        mat-raised-button\n        type=\"submit\"\n        color=\"primary\"\n        [disabled]=\"\n          !registration.valid || busy || name.pending || email.pending\n        \"\n      >\n        register\n      </button>\n      <mat-progress-spinner\n        diameter=\"20\"\n        *ngIf=\"busy\"\n        aria-label=\"Busy\"\n      ></mat-progress-spinner>\n    </fieldset>\n  </form>\n</div>\n", styles: ["mat-form-field{width:400px}fieldset{border:1px solid silver;border-radius:8px;padding:16px}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i9.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: PasswordStrengthBarComponent, selector: "auth-jwt-password-strength-bar", inputs: ["passwordToCheck"], outputs: ["strengthChange"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: AuthJwtRegistrationComponent, decorators: [{
             type: Component,
             args: [{ selector: 'auth-jwt-registration', template: "<div>\n  <div>\n    <p>\n      To register a new user, you must provide his email address, choose a\n      password, and choose a username, which must be unique (you will be\n      notified if another user has already taken that name). The username must\n      include only letters/digits, start with a letter, and be no shorter than 3\n      characters, nor longer than 50.\n    </p>\n    <p>\n      To promote a decent security level, the password must include at least 8\n      characters, uppercase and lowercase letters, digits, and punctuation (like\n      dashes, stops, parentheses, etc.).\n    </p>\n    <p>\n      Once registered, the user will receive an email message to the email\n      address you specified; he will have to click on the provided link to\n      complete the registration process.\n    </p>\n  </div>\n\n  <form role=\"form\" [formGroup]=\"registration\" (submit)=\"onSubmit()\">\n    <fieldset>\n      <label>register user</label>\n      <!-- email -->\n      <div>\n        <mat-form-field>\n          <input\n            matInput\n            type=\"email\"\n            id=\"email\"\n            maxlength=\"256\"\n            required\n            autofocus\n            spellcheck=\"false\"\n            placeholder=\"email\"\n            formControlName=\"email\"\n          />\n          <mat-error>{{ getEmailErrorLabel() }}</mat-error>\n          <mat-icon *ngIf=\"email.pending\">hourglass</mat-icon>\n        </mat-form-field>\n      </div>\n\n      <!-- name -->\n      <div>\n        <mat-form-field>\n          <input\n            matInput\n            type=\"text\"\n            id=\"name\"\n            maxlength=\"50\"\n            required\n            pattern=\"^[a-zA-Z][a-zA-Z0-9]{2,49}$\"\n            spellcheck=\"false\"\n            placeholder=\"username\"\n            formControlName=\"name\"\n          />\n          <mat-error>{{ getNameErrorLabel() }}</mat-error>\n          <mat-icon *ngIf=\"name.pending\">hourglass</mat-icon>\n        </mat-form-field>\n      </div>\n\n      <!-- first name -->\n      <div>\n        <mat-form-field>\n          <input\n            matInput\n            type=\"text\"\n            id=\"firstName\"\n            maxlength=\"50\"\n            required\n            spellcheck=\"false\"\n            placeholder=\"first name\"\n            formControlName=\"firstName\"\n          />\n          <mat-error\n            *ngIf=\"\n              firstName.hasError('required') &&\n              (firstName.dirty || firstName.touched)\n            \"\n            class=\"text-danger small\"\n          >\n            first name required\n          </mat-error>\n        </mat-form-field>\n      </div>\n\n      <!-- last name -->\n      <div>\n        <mat-form-field>\n          <input\n            matInput\n            type=\"text\"\n            id=\"lastName\"\n            maxlength=\"50\"\n            required\n            spellcheck=\"false\"\n            placeholder=\"last name\"\n            formControlName=\"lastName\"\n          />\n          <mat-error\n            *ngIf=\"\n              lastName.hasError('required') &&\n              (lastName.dirty || lastName.touched)\n            \"\n            class=\"text-danger small\"\n          >\n            last name required\n          </mat-error>\n        </mat-form-field>\n      </div>\n\n      <div [formGroup]=\"passwords\">\n        <!-- password -->\n        <div>\n          <mat-form-field>\n            <input\n              matInput\n              type=\"password\"\n              name=\"password\"\n              autocomplete=\"new-password\"\n              maxlength=\"50\"\n              required\n              spellcheck=\"false\"\n              placeholder=\"password\"\n              formControlName=\"password\"\n            />\n            <auth-jwt-password-strength-bar [passwordToCheck]=\"password.value\">\n            </auth-jwt-password-strength-bar>\n            <mat-error>{{ getPasswordErrorLabel() }}</mat-error>\n          </mat-form-field>\n        </div>\n\n        <!-- confirm password -->\n        <div>\n          <mat-form-field>\n            <input\n              matInput\n              type=\"password\"\n              name=\"confirmPassword\"\n              maxlength=\"50\"\n              required\n              spellcheck=\"false\"\n              placeholder=\"confirm password\"\n              formControlName=\"confirmPassword\"\n            />\n            <mat-error\n              *ngIf=\"\n                passwords.hasError('areEqual') &&\n                (confirmPassword.dirty || confirmPassword.touched)\n              \"\n            >\n              password differs from confirmation password\n            </mat-error>\n          </mat-form-field>\n        </div>\n      </div>\n\n      <button\n        mat-raised-button\n        type=\"submit\"\n        color=\"primary\"\n        [disabled]=\"\n          !registration.valid || busy || name.pending || email.pending\n        \"\n      >\n        register\n      </button>\n      <mat-progress-spinner\n        diameter=\"20\"\n        *ngIf=\"busy\"\n        aria-label=\"Busy\"\n      ></mat-progress-spinner>\n    </fieldset>\n  </form>\n</div>\n", styles: ["mat-form-field{width:400px}fieldset{border:1px solid silver;border-radius:8px;padding:16px}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$1.UntypedFormBuilder }, { type: i2$1.MatSnackBar }, { type: AuthJwtAccountService }]; }, propDecorators: { registered: [{
                 type: Output
             }] } });
 
-const initialState = {
-    filter: {
-        pageNumber: 1,
-        pageSize: 20,
-    },
-    active: null
-};
-let UsersStore = class UsersStore extends EntityStore {
-    constructor() {
-        super(initialState);
-    }
-};
-UsersStore.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: UsersStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-UsersStore.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: UsersStore, providedIn: 'root' });
-UsersStore = __decorate([
-    StoreConfig({ name: 'Users', idKey: 'userName', resettable: true })
-], UsersStore);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: UsersStore, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }], ctorParameters: function () { return []; } });
-
-class UsersQuery extends QueryEntity {
-    constructor(_store) {
-        super(_store);
-        this._store = _store;
+const PAGE_SIZE = 20;
+class UserListRepository {
+    constructor(_accService) {
+        this._accService = _accService;
+        // create store
+        this._store = this.createStore();
+        this._lastPageSize = PAGE_SIZE;
+        this._loading$ = new BehaviorSubject(false);
+        this._saving$ = new BehaviorSubject(false);
+        this.loading$ = this._loading$.asObservable();
+        this.saving$ = this._saving$.asObservable();
+        // combine pagination parameters with page data for our consumers
+        this.pagination$ = combineLatest([
+            this._store.pipe(selectPaginationData()),
+            this._store.pipe(selectCurrentPageEntities()),
+        ]).pipe(map(([pagination, data]) => ({ ...pagination, data })), debounceTime(0));
+        // the active document, if required
+        this.activeUser$ = this._store.pipe(selectActiveEntity());
+        // the filter, if required
+        this.filter$ = this._store.pipe(select((state) => state.filter));
+        this.filter$.subscribe((filter) => {
+            // when filter changed, reset any existing page and move to page 1
+            const paginationData = this._store.getValue().pagination;
+            console.log('Deleting all pages');
+            this._store.update(deleteAllPages());
+            // load page 1
+            this.loadPage(1, paginationData.perPage);
+        });
+        // the request status
+        this.status$ = this._store.pipe(selectRequestStatus('document'));
+        // load page 1 and subscribe to pagination
+        this.loadPage(1, PAGE_SIZE);
+        this.pagination$.subscribe(console.log);
+    }
+    createStore() {
+        const store = createStore({ name: 'user-list' }, withProps({
+            filter: {},
+        }), withEntities({ idKey: 'userName' }), withActiveId(), withRequestsCache(), withRequestsStatus(), withPagination());
+        return store;
+    }
+    adaptPage(page) {
+        // adapt the server page DataPage<T> to Elf pagination
+        return {
+            currentPage: page.pageNumber,
+            perPage: page.pageSize,
+            lastPage: page.pageCount,
+            total: page.total,
+            data: page.items,
+        };
     }
-    selectFilter() {
-        return this.select((state) => state.filter);
+    addPage(response) {
+        const { data, ...paginationData } = response;
+        this._store.update(upsertEntities(data), 
+        // addEntities(data),
+        updatePaginationData(paginationData), setPage(paginationData.currentPage, data.map((c) => c.userName)));
+    }
+    loadPage(pageNumber, pageSize) {
+        if (!pageSize) {
+            pageSize = PAGE_SIZE;
+        }
+        // if the page exists and page size is the same, just move to it
+        if (this._store.query(hasPage(pageNumber)) &&
+            pageSize === this._lastPageSize) {
+            console.log('Page exists: ' + pageNumber);
+            this._store.update(setCurrentPage(pageNumber));
+            return;
+        }
+        // reset cached pages if page size changed
+        if (this._lastPageSize !== pageSize) {
+            this._store.update(deleteAllPages());
+            this._lastPageSize = pageSize;
+        }
+        // load page from server
+        this._store.update(updateRequestStatus('document', 'pending'));
+        this._loading$.next(true);
+        this._accService
+            .getUsers(this._store.getValue().filter, pageNumber, pageSize)
+            .pipe(take$1(1))
+            .subscribe((page) => {
+            this._loading$.next(false);
+            this.addPage({ ...this.adaptPage(page), data: page.items });
+            this._store.update(updateRequestStatus('document', 'success'));
+        });
     }
-}
-UsersQuery.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: UsersQuery, deps: [{ token: UsersStore }], target: i0.ɵɵFactoryTarget.Injectable });
-UsersQuery.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: UsersQuery, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: UsersQuery, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }], ctorParameters: function () { return [{ type: UsersStore }]; } });
-
-class UsersService {
-    constructor(_store, _accountService) {
-        this._store = _store;
-        this._accountService = _accountService;
+    setFilter(filter) {
+        this._store.update((state) => ({ ...state, filter: filter }));
     }
-    /**
-     * Update the filter in the store.
-     * @param filter The filter.
-     */
-    updateFilter(filter) {
-        this._store.update({
-            filter: filter,
-        });
+    clearCache() {
+        this._store.update(deleteAllEntities(), deleteAllPages());
     }
     setActive(name) {
-        this._store.setActive(name);
+        this._store.update(setActiveId(name));
     }
     updateActive(user) {
         const promise = new Promise((resolve, reject) => {
-            this._store.setLoading(true);
-            this._accountService.updateUser(user).subscribe((_) => {
-                this._store.setLoading(false);
-                this._store.setError(null);
-                this._store.updateActive((u) => {
-                    return { ...user };
-                });
-                resolve(true);
-            }, (error) => {
-                console.error(error);
-                this._store.setLoading(false);
-                this._store.setError('Error updating user');
-                resolve(false);
+            this._saving$.next(true);
+            this._accService.updateUser(user).subscribe({
+                next: (_) => {
+                    this._saving$.next(false);
+                    this._store.update(updateEntities(user.userName, user));
+                    resolve(true);
+                },
+                error: (error) => {
+                    this._saving$.next(false);
+                    console.error(`Error updating user ${user.userName}: ` +
+                        JSON.stringify(error || {}));
+                    resolve(false);
+                },
             });
         });
         return promise;
     }
     deleteUser(name) {
         const promise = new Promise((resolve, reject) => {
-            this._store.setLoading(true);
-            this._accountService.deleteUser(name).subscribe((_) => {
-                this._store.setLoading(false);
-                this._store.setError(null);
-                this._store.remove(name);
-                resolve(true);
-            }, (error) => {
-                console.error(error);
-                this._store.setLoading(false);
-                this._store.setError('Error deleting user');
-                reject(error);
+            this._saving$.next(true);
+            this._accService.deleteUser(name).subscribe({
+                next: (_) => {
+                    this._saving$.next(false);
+                    this.clearCache();
+                    this.loadPage(1);
+                    resolve(true);
+                },
+                error: (error) => {
+                    this._saving$.next(false);
+                    console.error(`Error deleting user ${name}: ` + JSON.stringify(error || {}));
+                    reject(error);
+                },
             });
         });
         return promise;
     }
 }
-UsersService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: UsersService, deps: [{ token: UsersStore }, { token: AuthJwtAccountService }], target: i0.ɵɵFactoryTarget.Injectable });
-UsersService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: UsersService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: UsersService, decorators: [{
+UserListRepository.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: UserListRepository, deps: [{ token: AuthJwtAccountService }], target: i0.ɵɵFactoryTarget.Injectable });
+UserListRepository.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: UserListRepository, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: UserListRepository, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: function () { return [{ type: UsersStore }, { type: AuthJwtAccountService }]; } });
+        }], ctorParameters: function () { return [{ type: AuthJwtAccountService }]; } });
 
 class UserFilterComponent {
-    constructor(formBuilder, query, _corporaService) {
-        this._corporaService = _corporaService;
-        this.filter$ = query.selectFilter();
+    constructor(formBuilder, _repository) {
+        this._repository = _repository;
+        this.filter$ = _repository.filter$;
         // form
         this.name = formBuilder.control(null);
         this.form = formBuilder.group({
@@ -638,7 +679,7 @@ class UserFilterComponent {
         });
     }
     updateForm(filter) {
-        this.name.setValue(filter.name);
+        this.name.setValue(filter.name || null);
         this.form.markAsPristine();
     }
     reset() {
@@ -647,8 +688,6 @@ class UserFilterComponent {
     }
     getFilter() {
         return {
-            pageNumber: 1,
-            pageSize: 20,
             name: this.name.value?.trim(),
         };
     }
@@ -658,27 +697,18 @@ class UserFilterComponent {
         }
         const filter = this.getFilter();
         // update filter in state
-        this._corporaService.updateFilter(filter);
+        this._repository.setFilter(filter);
     }
 }
-UserFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: UserFilterComponent, deps: [{ token: i1$1.UntypedFormBuilder }, { token: UsersQuery }, { token: UsersService }], target: i0.ɵɵFactoryTarget.Component });
-UserFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.6", type: UserFilterComponent, selector: "auth-jwt-user-filter", inputs: { disabled: "disabled" }, ngImport: i0, template: "<form [formGroup]=\"form\" (submit)=\"apply()\" ng-disabled=\"disabled\">\n  <mat-form-field>\n    <input matInput [formControl]=\"name\" placeholder=\"name or ID\" />\n    <button\n      mat-icon-button\n      matSuffix\n      type=\"button\"\n      (click)=\"reset()\"\n      color=\"warn\"\n      matTooltip=\"Reset filters\"\n      [disabled]=\"disabled\"\n    >\n      <mat-icon>clear</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <button\n    type=\"submit\"\n    mat-icon-button\n    color=\"primary\"\n    [disabled]=\"disabled\"\n    matTooltip=\"Apply filters\"\n  >\n    <mat-icon>check_circle</mat-icon>\n  </button>\n</form>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7$1.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i8.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i8$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: UserFilterComponent, decorators: [{
+UserFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: UserFilterComponent, deps: [{ token: i1$1.FormBuilder }, { token: UserListRepository }], target: i0.ɵɵFactoryTarget.Component });
+UserFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", type: UserFilterComponent, selector: "auth-jwt-user-filter", inputs: { disabled: "disabled" }, ngImport: i0, template: "<form [formGroup]=\"form\" (submit)=\"apply()\" ng-disabled=\"disabled\">\n  <mat-form-field>\n    <input matInput [formControl]=\"name\" placeholder=\"name or ID\" />\n    <button\n      mat-icon-button\n      matSuffix\n      type=\"button\"\n      (click)=\"reset()\"\n      color=\"warn\"\n      matTooltip=\"Reset filters\"\n      [disabled]=\"disabled\"\n    >\n      <mat-icon>clear</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <button\n    type=\"submit\"\n    mat-icon-button\n    color=\"primary\"\n    [disabled]=\"disabled\"\n    matTooltip=\"Apply filters\"\n  >\n    <mat-icon>check_circle</mat-icon>\n  </button>\n</form>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]" }, { kind: "directive", type: i9$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: UserFilterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'auth-jwt-user-filter', template: "<form [formGroup]=\"form\" (submit)=\"apply()\" ng-disabled=\"disabled\">\n  <mat-form-field>\n    <input matInput [formControl]=\"name\" placeholder=\"name or ID\" />\n    <button\n      mat-icon-button\n      matSuffix\n      type=\"button\"\n      (click)=\"reset()\"\n      color=\"warn\"\n      matTooltip=\"Reset filters\"\n      [disabled]=\"disabled\"\n    >\n      <mat-icon>clear</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <button\n    type=\"submit\"\n    mat-icon-button\n    color=\"primary\"\n    [disabled]=\"disabled\"\n    matTooltip=\"Apply filters\"\n  >\n    <mat-icon>check_circle</mat-icon>\n  </button>\n</form>\n" }]
-        }], ctorParameters: function () { return [{ type: i1$1.UntypedFormBuilder }, { type: UsersQuery }, { type: UsersService }]; }, propDecorators: { disabled: [{
+        }], ctorParameters: function () { return [{ type: i1$1.FormBuilder }, { type: UserListRepository }]; }, propDecorators: { disabled: [{
                 type: Input
             }] } });
 
-// create a factory provider for the paginator
-const USERS_PAGINATOR = new InjectionToken('USERS_PAGINATOR', {
-    providedIn: 'root',
-    factory: () => {
-        const query = inject(UsersQuery);
-        return new PaginatorPlugin(query).withControls().withRange();
-    },
-});
-
 // https://medium.com/@tarik.nzl/making-use-of-dialogs-in-material-2-mddialog-7533d27df41
 class ConfirmDialogComponent {
     constructor(dialogRef, data) {
@@ -691,9 +721,9 @@ class ConfirmDialogComponent {
     }
     ngOnInit() { }
 }
-ConfirmDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: ConfirmDialogComponent, deps: [{ token: i1$2.MatDialogRef }, { token: MAT_DIALOG_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-ConfirmDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.6", type: ConfirmDialogComponent, selector: "ng-component", ngImport: i0, template: "<h1 mat-dialog-title>{{ title }}</h1>\r\n<mat-dialog-content>\r\n  {{ prompt }}\r\n</mat-dialog-content>\r\n<mat-dialog-actions>\r\n  <button\r\n    type=\"button\"\r\n    mat-raised-button\r\n    color=\"warn\"\r\n    (click)=\"dialogRef.close(true)\"\r\n  >\r\n    {{ ok }}\r\n  </button>\r\n  <button type=\"button\" mat-button (click)=\"dialogRef.close()\">\r\n    {{ cancel }}\r\n  </button>\r\n</mat-dialog-actions>\r\n", styles: [""], dependencies: [{ kind: "component", type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i1$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1$2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: ConfirmDialogComponent, decorators: [{
+ConfirmDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: ConfirmDialogComponent, deps: [{ token: i1$2.MatDialogRef }, { token: MAT_DIALOG_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+ConfirmDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", type: ConfirmDialogComponent, selector: "ng-component", ngImport: i0, template: "<h1 mat-dialog-title>{{ title }}</h1>\r\n<mat-dialog-content>\r\n  {{ prompt }}\r\n</mat-dialog-content>\r\n<mat-dialog-actions>\r\n  <button\r\n    type=\"button\"\r\n    mat-raised-button\r\n    color=\"warn\"\r\n    (click)=\"dialogRef.close(true)\"\r\n  >\r\n    {{ ok }}\r\n  </button>\r\n  <button type=\"button\" mat-button (click)=\"dialogRef.close()\">\r\n    {{ cancel }}\r\n  </button>\r\n</mat-dialog-actions>\r\n", styles: [""], dependencies: [{ kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i1$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1$2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: ConfirmDialogComponent, decorators: [{
             type: Component,
             args: [{ template: "<h1 mat-dialog-title>{{ title }}</h1>\r\n<mat-dialog-content>\r\n  {{ prompt }}\r\n</mat-dialog-content>\r\n<mat-dialog-actions>\r\n  <button\r\n    type=\"button\"\r\n    mat-raised-button\r\n    color=\"warn\"\r\n    (click)=\"dialogRef.close(true)\"\r\n  >\r\n    {{ ok }}\r\n  </button>\r\n  <button type=\"button\" mat-button (click)=\"dialogRef.close()\">\r\n    {{ cancel }}\r\n  </button>\r\n</mat-dialog-actions>\r\n" }]
         }], ctorParameters: function () { return [{ type: i1$2.MatDialogRef }, { type: undefined, decorators: [{
@@ -727,9 +757,9 @@ class DialogService {
         return dialogRef.afterClosed();
     }
 }
-DialogService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: DialogService, deps: [{ token: i1$2.MatDialog }], target: i0.ɵɵFactoryTarget.Injectable });
-DialogService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: DialogService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: DialogService, decorators: [{
+DialogService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DialogService, deps: [{ token: i1$2.MatDialog }], target: i0.ɵɵFactoryTarget.Injectable });
+DialogService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DialogService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: DialogService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -823,11 +853,11 @@ class UserEditorComponent {
         this.userChange.emit(this.getUserFromForm());
     }
 }
-UserEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: UserEditorComponent, deps: [{ token: i1$1.UntypedFormBuilder }, { token: i2$2.AuthJwtService }], target: i0.ɵɵFactoryTarget.Component });
-UserEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.6", type: UserEditorComponent, selector: "auth-jwt-user-editor", inputs: { user: "user" }, outputs: { userChange: "userChange", editorClose: "editorClose" }, ngImport: i0, template: "<form [formGroup]=\"form\" (submit)=\"save()\">\n  <!-- email -->\n  <div>\n    <mat-form-field>\n      <input type=\"text\" matInput [formControl]=\"email\" placeholder=\"email\" />\n      <mat-error\n        *ngIf=\"email.hasError('required') && (email.dirty || email.touched)\"\n      >\n        email address required\n      </mat-error>\n      <mat-error\n        *ngIf=\"email.hasError('pattern') && (email.dirty || email.touched)\"\n      >\n        invalid email address\n      </mat-error>\n    </mat-form-field>\n  </div>\n\n  <!-- emailConfirmed -->\n  <div>\n    <mat-checkbox [formControl]=\"emailConfirmed\"\n      >email address confirmed</mat-checkbox\n    >\n  </div>\n\n  <!-- lockoutEnabled -->\n  <div>\n    <mat-checkbox [formControl]=\"lockoutEnabled\"\n      >lockout enabled</mat-checkbox\n    >\n    &nbsp;\n    <button\n      mat-stroked-button\n      (click)=\"endLockout()\"\n      [disabled]=\"unlocked\"\n      matTooltip=\"Unlock this user if locked\"\n    >\n      unlock\n    </button>\n  </div>\n\n  <!-- firstName -->\n  <div>\n    <mat-form-field>\n      <input\n        type=\"text\"\n        matInput\n        [formControl]=\"firstName\"\n        placeholder=\"first name\"\n      />\n      <mat-error\n        *ngIf=\"\n          firstName.hasError('required') &&\n          (firstName.dirty || firstName.touched)\n        \"\n      >\n        first name required\n      </mat-error>\n      <mat-error\n        *ngIf=\"\n          firstName.hasError('maxlength') &&\n          (firstName.dirty || firstName.touched)\n        \"\n      >\n        first name too long\n      </mat-error>\n    </mat-form-field>\n  </div>\n\n  <!-- lastName -->\n  <div>\n    <mat-form-field>\n      <input\n        type=\"text\"\n        matInput\n        [formControl]=\"lastName\"\n        placeholder=\"last name\"\n      />\n      <mat-error\n        *ngIf=\"\n          lastName.hasError('required') && (lastName.dirty || lastName.touched)\n        \"\n      >\n        last name required\n      </mat-error>\n      <mat-error\n        *ngIf=\"\n          lastName.hasError('maxlength') && (lastName.dirty || lastName.touched)\n        \"\n      >\n        last name too long\n      </mat-error>\n    </mat-form-field>\n  </div>\n\n  <!-- roles -->\n  <div>\n    <mat-form-field>\n      <input\n        type=\"text\"\n        matInput\n        [formControl]=\"roles\"\n        placeholder=\"roles (separated by space)\"\n      />\n      <mat-error\n        *ngIf=\"roles.hasError('maxlength') && (roles.dirty || roles.touched)\"\n      >\n        too long\n      </mat-error>\n    </mat-form-field>\n  </div>\n\n  <!-- buttons -->\n  <br />\n  <div>\n    <button mat-icon-button color=\"warn\" matTooltip=\"Close\" (click)=\"close()\">\n      <mat-icon>cancel</mat-icon>\n    </button>\n    &nbsp;\n    <button\n      type=\"submit\"\n      mat-button\n      color=\"primary\"\n      [disabled]=\"form.invalid\"\n      matTooltip=\"Save user data\"\n    >\n      <mat-icon>check_circle</mat-icon> save\n    </button>\n  </div>\n</form>\n", styles: [""], dependencies: [{ kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7$1.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i7$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i8$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: UserEditorComponent, decorators: [{
+UserEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: UserEditorComponent, deps: [{ token: i1$1.UntypedFormBuilder }, { token: i2$2.AuthJwtService }], target: i0.ɵɵFactoryTarget.Component });
+UserEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", type: UserEditorComponent, selector: "auth-jwt-user-editor", inputs: { user: "user" }, outputs: { userChange: "userChange", editorClose: "editorClose" }, ngImport: i0, template: "<form [formGroup]=\"form\" (submit)=\"save()\">\n  <!-- email -->\n  <div>\n    <mat-form-field>\n      <mat-label>email</mat-label>\n      <input type=\"text\" matInput [formControl]=\"email\" />\n      <mat-error\n        *ngIf=\"email.hasError('required') && (email.dirty || email.touched)\"\n      >\n        email address required\n      </mat-error>\n      <mat-error\n        *ngIf=\"email.hasError('pattern') && (email.dirty || email.touched)\"\n      >\n        invalid email address\n      </mat-error>\n    </mat-form-field>\n  </div>\n\n  <!-- emailConfirmed -->\n  <div>\n    <mat-checkbox [formControl]=\"emailConfirmed\"\n      >email address confirmed</mat-checkbox\n    >\n  </div>\n\n  <!-- lockoutEnabled -->\n  <div>\n    <mat-checkbox [formControl]=\"lockoutEnabled\">lockout enabled</mat-checkbox>\n    &nbsp;\n    <button\n      mat-icon-button\n      color=\"primary\"\n      (click)=\"endLockout()\"\n      [disabled]=\"unlocked\"\n      matTooltip=\"Unlock this user if locked\"\n    >\n      <mat-icon>lock_open</mat-icon>\n    </button>\n  </div>\n\n  <!-- firstName -->\n  <div>\n    <mat-form-field>\n      <mat-label>first name</mat-label>\n      <input type=\"text\" matInput [formControl]=\"firstName\" />\n      <mat-error\n        *ngIf=\"\n          firstName.hasError('required') &&\n          (firstName.dirty || firstName.touched)\n        \"\n      >\n        first name required\n      </mat-error>\n      <mat-error\n        *ngIf=\"\n          firstName.hasError('maxlength') &&\n          (firstName.dirty || firstName.touched)\n        \"\n      >\n        first name too long\n      </mat-error>\n    </mat-form-field>\n  </div>\n\n  <!-- lastName -->\n  <div>\n    <mat-form-field>\n      <mat-label>last name</mat-label>\n      <input type=\"text\" matInput [formControl]=\"lastName\" />\n      <mat-error\n        *ngIf=\"\n          lastName.hasError('required') && (lastName.dirty || lastName.touched)\n        \"\n      >\n        last name required\n      </mat-error>\n      <mat-error\n        *ngIf=\"\n          lastName.hasError('maxlength') && (lastName.dirty || lastName.touched)\n        \"\n      >\n        last name too long\n      </mat-error>\n    </mat-form-field>\n  </div>\n\n  <!-- roles -->\n  <div>\n    <mat-form-field>\n      <mat-label>roles</mat-label>\n      <input type=\"text\" matInput [formControl]=\"roles\" />\n      <mat-error\n        *ngIf=\"roles.hasError('maxlength') && (roles.dirty || roles.touched)\"\n      >\n        too long\n      </mat-error>\n      <mat-hint>roles (separated by space)</mat-hint>\n    </mat-form-field>\n  </div>\n\n  <!-- buttons -->\n  <br />\n  <div>\n    <button mat-icon-button color=\"warn\" matTooltip=\"Close\" (click)=\"close()\">\n      <mat-icon>cancel</mat-icon>\n    </button>\n    &nbsp;\n    <button\n      type=\"submit\"\n      mat-icon-button\n      color=\"primary\"\n      [disabled]=\"form.invalid\"\n      matTooltip=\"Save user data\"\n    >\n      <mat-icon>check_circle</mat-icon>\n    </button>\n  </div>\n</form>\n", styles: [""], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i8.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i9$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: UserEditorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'auth-jwt-user-editor', template: "<form [formGroup]=\"form\" (submit)=\"save()\">\n  <!-- email -->\n  <div>\n    <mat-form-field>\n      <input type=\"text\" matInput [formControl]=\"email\" placeholder=\"email\" />\n      <mat-error\n        *ngIf=\"email.hasError('required') && (email.dirty || email.touched)\"\n      >\n        email address required\n      </mat-error>\n      <mat-error\n        *ngIf=\"email.hasError('pattern') && (email.dirty || email.touched)\"\n      >\n        invalid email address\n      </mat-error>\n    </mat-form-field>\n  </div>\n\n  <!-- emailConfirmed -->\n  <div>\n    <mat-checkbox [formControl]=\"emailConfirmed\"\n      >email address confirmed</mat-checkbox\n    >\n  </div>\n\n  <!-- lockoutEnabled -->\n  <div>\n    <mat-checkbox [formControl]=\"lockoutEnabled\"\n      >lockout enabled</mat-checkbox\n    >\n    &nbsp;\n    <button\n      mat-stroked-button\n      (click)=\"endLockout()\"\n      [disabled]=\"unlocked\"\n      matTooltip=\"Unlock this user if locked\"\n    >\n      unlock\n    </button>\n  </div>\n\n  <!-- firstName -->\n  <div>\n    <mat-form-field>\n      <input\n        type=\"text\"\n        matInput\n        [formControl]=\"firstName\"\n        placeholder=\"first name\"\n      />\n      <mat-error\n        *ngIf=\"\n          firstName.hasError('required') &&\n          (firstName.dirty || firstName.touched)\n        \"\n      >\n        first name required\n      </mat-error>\n      <mat-error\n        *ngIf=\"\n          firstName.hasError('maxlength') &&\n          (firstName.dirty || firstName.touched)\n        \"\n      >\n        first name too long\n      </mat-error>\n    </mat-form-field>\n  </div>\n\n  <!-- lastName -->\n  <div>\n    <mat-form-field>\n      <input\n        type=\"text\"\n        matInput\n        [formControl]=\"lastName\"\n        placeholder=\"last name\"\n      />\n      <mat-error\n        *ngIf=\"\n          lastName.hasError('required') && (lastName.dirty || lastName.touched)\n        \"\n      >\n        last name required\n      </mat-error>\n      <mat-error\n        *ngIf=\"\n          lastName.hasError('maxlength') && (lastName.dirty || lastName.touched)\n        \"\n      >\n        last name too long\n      </mat-error>\n    </mat-form-field>\n  </div>\n\n  <!-- roles -->\n  <div>\n    <mat-form-field>\n      <input\n        type=\"text\"\n        matInput\n        [formControl]=\"roles\"\n        placeholder=\"roles (separated by space)\"\n      />\n      <mat-error\n        *ngIf=\"roles.hasError('maxlength') && (roles.dirty || roles.touched)\"\n      >\n        too long\n      </mat-error>\n    </mat-form-field>\n  </div>\n\n  <!-- buttons -->\n  <br />\n  <div>\n    <button mat-icon-button color=\"warn\" matTooltip=\"Close\" (click)=\"close()\">\n      <mat-icon>cancel</mat-icon>\n    </button>\n    &nbsp;\n    <button\n      type=\"submit\"\n      mat-button\n      color=\"primary\"\n      [disabled]=\"form.invalid\"\n      matTooltip=\"Save user data\"\n    >\n      <mat-icon>check_circle</mat-icon> save\n    </button>\n  </div>\n</form>\n" }]
+            args: [{ selector: 'auth-jwt-user-editor', template: "<form [formGroup]=\"form\" (submit)=\"save()\">\n  <!-- email -->\n  <div>\n    <mat-form-field>\n      <mat-label>email</mat-label>\n      <input type=\"text\" matInput [formControl]=\"email\" />\n      <mat-error\n        *ngIf=\"email.hasError('required') && (email.dirty || email.touched)\"\n      >\n        email address required\n      </mat-error>\n      <mat-error\n        *ngIf=\"email.hasError('pattern') && (email.dirty || email.touched)\"\n      >\n        invalid email address\n      </mat-error>\n    </mat-form-field>\n  </div>\n\n  <!-- emailConfirmed -->\n  <div>\n    <mat-checkbox [formControl]=\"emailConfirmed\"\n      >email address confirmed</mat-checkbox\n    >\n  </div>\n\n  <!-- lockoutEnabled -->\n  <div>\n    <mat-checkbox [formControl]=\"lockoutEnabled\">lockout enabled</mat-checkbox>\n    &nbsp;\n    <button\n      mat-icon-button\n      color=\"primary\"\n      (click)=\"endLockout()\"\n      [disabled]=\"unlocked\"\n      matTooltip=\"Unlock this user if locked\"\n    >\n      <mat-icon>lock_open</mat-icon>\n    </button>\n  </div>\n\n  <!-- firstName -->\n  <div>\n    <mat-form-field>\n      <mat-label>first name</mat-label>\n      <input type=\"text\" matInput [formControl]=\"firstName\" />\n      <mat-error\n        *ngIf=\"\n          firstName.hasError('required') &&\n          (firstName.dirty || firstName.touched)\n        \"\n      >\n        first name required\n      </mat-error>\n      <mat-error\n        *ngIf=\"\n          firstName.hasError('maxlength') &&\n          (firstName.dirty || firstName.touched)\n        \"\n      >\n        first name too long\n      </mat-error>\n    </mat-form-field>\n  </div>\n\n  <!-- lastName -->\n  <div>\n    <mat-form-field>\n      <mat-label>last name</mat-label>\n      <input type=\"text\" matInput [formControl]=\"lastName\" />\n      <mat-error\n        *ngIf=\"\n          lastName.hasError('required') && (lastName.dirty || lastName.touched)\n        \"\n      >\n        last name required\n      </mat-error>\n      <mat-error\n        *ngIf=\"\n          lastName.hasError('maxlength') && (lastName.dirty || lastName.touched)\n        \"\n      >\n        last name too long\n      </mat-error>\n    </mat-form-field>\n  </div>\n\n  <!-- roles -->\n  <div>\n    <mat-form-field>\n      <mat-label>roles</mat-label>\n      <input type=\"text\" matInput [formControl]=\"roles\" />\n      <mat-error\n        *ngIf=\"roles.hasError('maxlength') && (roles.dirty || roles.touched)\"\n      >\n        too long\n      </mat-error>\n      <mat-hint>roles (separated by space)</mat-hint>\n    </mat-form-field>\n  </div>\n\n  <!-- buttons -->\n  <br />\n  <div>\n    <button mat-icon-button color=\"warn\" matTooltip=\"Close\" (click)=\"close()\">\n      <mat-icon>cancel</mat-icon>\n    </button>\n    &nbsp;\n    <button\n      type=\"submit\"\n      mat-icon-button\n      color=\"primary\"\n      [disabled]=\"form.invalid\"\n      matTooltip=\"Save user data\"\n    >\n      <mat-icon>check_circle</mat-icon>\n    </button>\n  </div>\n</form>\n" }]
         }], ctorParameters: function () { return [{ type: i1$1.UntypedFormBuilder }, { type: i2$2.AuthJwtService }]; }, propDecorators: { user: [{
                 type: Input
             }], userChange: [{
@@ -837,77 +867,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.6", ngImpor
             }] } });
 
 class UserListComponent {
-    constructor(paginator, userQuery, _accountService, _usersService, _dialogService, _gravatarService, formBuilder) {
-        this.paginator = paginator;
-        this._accountService = _accountService;
-        this._usersService = _usersService;
+    constructor(_repository, _dialogService, _gravatarService) {
+        this._repository = _repository;
         this._dialogService = _dialogService;
         this._gravatarService = _gravatarService;
-        this.pageSize = formBuilder.control(20);
-        this._refresh$ = new BehaviorSubject(0);
-        this._filter$ = userQuery.selectFilter();
-        // https://netbasal.com/manage-your-entities-with-akita-like-a-boss-768732f8d4d1
-        this.active$ = userQuery.selectActive();
-        this.pagination$ = combineLatest([
-            this.paginator.pageChanges,
-            this.pageSize.valueChanges.pipe(
-            // we are required to emit at least the initial value
-            // as combineLatest emits only if ALL observables have emitted
-            startWith(20), 
-            // clear the cache when page size changes
-            tap((_) => {
-                this.paginator.clearCache();
-            })),
-            this._filter$.pipe(
-            // clear the cache when filters changed
-            tap((_) => {
-                this.paginator.clearCache();
-            })),
-            this._refresh$.pipe(
-            // clear the cache when forcing refresh
-            tap((_) => {
-                this.paginator.clearCache();
-            })),
-        ]).pipe(
-        // for each emitted value, combine into a filter and use it
-        // to request the page from server
-        switchMap(([pageNumber, pageSize, filter, refresh]) => {
-            // const filter = { ...this._docsQuery.getValue().filter };
-            const f = { ...filter };
-            f.pageNumber = pageNumber;
-            f.pageSize = pageSize;
-            const request = this.getRequest(f);
-            // update saved filters
-            this.paginator.metadata.set('filter', f);
-            return this.paginator.getPage(request);
-        }));
-    }
-    ngOnDestroy() {
-        this.paginator.destroy();
-    }
-    getRequest(filter) {
-        return () => this._accountService.getUsers(filter).pipe(
-        // adapt server results to the paginator plugin
-        map((p) => {
-            return {
-                currentPage: p.pageNumber,
-                perPage: p.pageSize,
-                lastPage: p.pageCount,
-                data: p.items,
-                total: p.total,
-            };
-        }));
+        this.pagination$ = _repository.pagination$;
+        this.active$ = _repository.activeUser$;
+        this.loading$ = _repository.loading$;
     }
     pageChange(event) {
-        // https://material.angular.io/components/paginator/api
-        this.paginator.setPage(event.pageIndex + 1);
-        if (event.pageSize !== this.pageSize.value) {
-            this.pageSize.setValue(event.pageSize);
-        }
-    }
-    refresh() {
-        this.paginator.clearCache();
-        this._refresh$.next(this._refresh$.value + 1);
+        this._repository.loadPage(event.pageIndex + 1, event.pageSize);
     }
     deleteUser(user) {
         this._dialogService
@@ -917,21 +886,20 @@ class UserListComponent {
             if (!yes) {
                 return;
             }
-            this._usersService.deleteUser(user.userName).finally(() => {
-                this.refresh();
+            this._repository.deleteUser(user.userName).finally(() => {
+                this._repository.clearCache();
+                this._repository.loadPage(1);
             });
         });
     }
     setActiveUser(user) {
-        this._usersService.setActive(user?.userName || null);
+        this._repository.setActive(user?.userName || null);
     }
     resetActiveUser() {
-        this._usersService.setActive(null);
+        this._repository.setActive(null);
     }
     saveActiveUser(user) {
-        this._usersService.updateActive(user).finally(() => {
-            this.refresh();
-        });
+        this._repository.updateActive(user);
     }
     onUserEditorClose() {
         this.setActiveUser(null);
@@ -939,21 +907,21 @@ class UserListComponent {
     getGravatarUrl(email, size = 80) {
         return this._gravatarService.buildGravatarUrl(email, size);
     }
+    clearCache() {
+        this._repository.clearCache();
+    }
 }
-UserListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: UserListComponent, deps: [{ token: USERS_PAGINATOR }, { token: UsersQuery }, { token: AuthJwtAccountService }, { token: UsersService }, { token: DialogService }, { token: i2$2.GravatarService }, { token: i1$1.UntypedFormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-UserListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.6", type: UserListComponent, selector: "auth-jwt-user-list", ngImport: i0, template: "<div\r\n  gdAreas=\"filters | progress | list | pager | editor\"\r\n  gdRows=\"80px 64px 2fr 40px 1fr\"\r\n  gdColumns=\"1fr\"\r\n  gdGap=\"8px\"\r\n>\r\n  <div>\r\n    <!-- filters -->\r\n    <div gdArea=\"filters\">\r\n      <auth-jwt-user-filter></auth-jwt-user-filter>\r\n    </div>\r\n\r\n    <!-- progress -->\r\n    <div *ngIf=\"paginator.isLoading$ | async\" gdArea=\"progress\">\r\n      <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\r\n    </div>\r\n\r\n    <!-- list -->\r\n    <div gdArea=\"list\" *ngIf=\"pagination$ | async as pagination\">\r\n      <table>\r\n        <thead>\r\n          <td></td>\r\n          <td></td>\r\n          <td></td>\r\n          <th>name</th>\r\n          <th>first</th>\r\n          <th>last</th>\r\n          <th>email</th>\r\n          <th>roles</th>\r\n          <th>lock end</th>\r\n        </thead>\r\n        <tbody>\r\n          <tr *ngFor=\"let user of pagination.data\">\r\n            <td class=\"command\">\r\n              <button\r\n                mat-icon-button\r\n                type=\"button\"\r\n                matTooltip=\"Edit {{ user.userName }}\"\r\n                color=\"primary\"\r\n                (click)=\"setActiveUser(user)\"\r\n              >\r\n                <mat-icon>mode_edit</mat-icon>\r\n              </button>\r\n            </td>\r\n            <td class=\"command\">\r\n              <button\r\n                mat-icon-button\r\n                type=\"button\"\r\n                matTooltip=\"Delete {{ user.userName }}\"\r\n                color=\"warn\"\r\n                (click)=\"deleteUser(user)\"\r\n              >\r\n                <mat-icon>remove_circle</mat-icon>\r\n              </button>\r\n            </td>\r\n            <td>\r\n              <img\r\n                [src]=\"getGravatarUrl(user.email, 32)\"\r\n                [alt]=\"user.userName\"\r\n              />\r\n            </td>\r\n            <td>{{ user.userName }}</td>\r\n            <td>{{ user.firstName }}</td>\r\n            <td>{{ user.lastName }}</td>\r\n            <td>\r\n              <a [href]=\"'mailto:' + user.email\">{{ user.email }}</a>\r\n            </td>\r\n            <td>{{ user.roles?.join(\" \") }}</td>\r\n            <td>{{ user.lockoutEnd }}</td>\r\n          </tr>\r\n        </tbody>\r\n      </table>\r\n      <!-- pagination -->\r\n      <mat-paginator\r\n        gdArea=\"pager\"\r\n        gdAlignColumns=\"center\"\r\n        gdAlignRows=\"start\"\r\n        [length]=\"pagination.total\"\r\n        [pageSize]=\"pageSize.value\"\r\n        [pageSizeOptions]=\"[20, 50, 75, 100]\"\r\n        [pageIndex]=\"pagination.currentPage - 1\"\r\n        [showFirstLastButtons]=\"true\"\r\n        (page)=\"pageChange($event)\"\r\n      ></mat-paginator>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- editor -->\r\n  <div gdArea=\"editor\" *ngIf=\"active$ | async as active\">\r\n    <fieldset>\r\n      <legend>{{ active.userName }}</legend>\r\n      <auth-jwt-user-editor\r\n        [user]=\"active\"\r\n        (userChange)=\"saveActiveUser($event)\"\r\n        (editorClose)=\"resetActiveUser()\"\r\n      ></auth-jwt-user-editor>\r\n    </fieldset>\r\n  </div>\r\n</div>\r\n", styles: ["tr:nth-child(odd){background-color:#f8f8f8}th{padding:0 8px;text-align:left;color:silver;font-weight:400}td{padding:0 8px}td.command{width:24px}table{width:100%;border-collapse:collapse}fieldset{border:1px solid silver;border-radius:8px;padding:16px}\n"], dependencies: [{ kind: "directive", type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i10.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "component", type: i11.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i8$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: UserFilterComponent, selector: "auth-jwt-user-filter", inputs: ["disabled"] }, { kind: "component", type: UserEditorComponent, selector: "auth-jwt-user-editor", inputs: ["user"], outputs: ["userChange", "editorClose"] }, { kind: "pipe", type: i7.AsyncPipe, name: "async" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: UserListComponent, decorators: [{
+UserListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: UserListComponent, deps: [{ token: UserListRepository }, { token: DialogService }, { token: i2$2.GravatarService }], target: i0.ɵɵFactoryTarget.Component });
+UserListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", type: UserListComponent, selector: "auth-jwt-user-list", ngImport: i0, template: "<div\n  gdAreas=\"filters | progress | list | pager | editor\"\n  gdRows=\"80px 64px 2fr 40px 1fr\"\n  gdColumns=\"1fr\"\n  gdGap=\"8px\"\n>\n  <div>\n    <!-- filters -->\n    <div gdArea=\"filters\">\n      <auth-jwt-user-filter></auth-jwt-user-filter>\n    </div>\n\n    <!-- progress -->\n    <div *ngIf=\"loading$ | async\" gdArea=\"progress\">\n      <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n    </div>\n\n    <!-- list -->\n    <div gdArea=\"list\" *ngIf=\"pagination$ | async as pagination\">\n      <table>\n        <thead>\n          <td></td>\n          <td></td>\n          <td></td>\n          <th>name</th>\n          <th>first</th>\n          <th>last</th>\n          <th>email</th>\n          <th>roles</th>\n          <th>lock end</th>\n        </thead>\n        <tbody>\n          <tr *ngFor=\"let user of pagination.data\">\n            <td class=\"command\">\n              <button\n                mat-icon-button\n                type=\"button\"\n                matTooltip=\"Edit {{ user.userName }}\"\n                color=\"primary\"\n                (click)=\"setActiveUser(user)\"\n              >\n                <mat-icon>mode_edit</mat-icon>\n              </button>\n            </td>\n            <td class=\"command\">\n              <button\n                mat-icon-button\n                type=\"button\"\n                matTooltip=\"Delete {{ user.userName }}\"\n                color=\"warn\"\n                (click)=\"deleteUser(user)\"\n              >\n                <mat-icon>remove_circle</mat-icon>\n              </button>\n            </td>\n            <td>\n              <img\n                [src]=\"getGravatarUrl(user.email, 32)\"\n                [alt]=\"user.userName\"\n              />\n            </td>\n            <td>{{ user.userName }}</td>\n            <td>{{ user.firstName }}</td>\n            <td>{{ user.lastName }}</td>\n            <td>\n              <a [href]=\"'mailto:' + user.email\">{{ user.email }}</a>\n            </td>\n            <td>{{ user.roles.join(\" \") }}</td>\n            <td>{{ user.lockoutEnd }}</td>\n          </tr>\n        </tbody>\n      </table>\n      <!-- pagination -->\n      <mat-paginator\n        gdArea=\"pager\"\n        gdAlignColumns=\"center\"\n        gdAlignRows=\"start\"\n        [length]=\"pagination.total\"\n        [pageSize]=\"pagination.perPage\"\n        [pageSizeOptions]=\"[20, 50, 75, 100]\"\n        [pageIndex]=\"pagination.currentPage - 1\"\n        [showFirstLastButtons]=\"true\"\n        (page)=\"pageChange($event)\"\n      ></mat-paginator>\n    </div>\n  </div>\n\n  <!-- editor -->\n  <div gdArea=\"editor\" *ngIf=\"active$ | async as active\">\n    <fieldset>\n      <legend>{{ active.userName }}</legend>\n      <auth-jwt-user-editor\n        [user]=\"active\"\n        (userChange)=\"saveActiveUser($event)\"\n        (editorClose)=\"resetActiveUser()\"\n      ></auth-jwt-user-editor>\n    </fieldset>\n  </div>\n</div>\n", styles: ["tr:nth-child(odd){background-color:#f8f8f8}th{padding:0 8px;text-align:left;color:silver;font-weight:400}td{padding:0 8px}td.command{width:24px}table{width:100%;border-collapse:collapse}fieldset{border:1px solid silver;border-radius:8px;padding:16px}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7$1.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "component", type: i8$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i9$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: UserFilterComponent, selector: "auth-jwt-user-filter", inputs: ["disabled"] }, { kind: "component", type: UserEditorComponent, selector: "auth-jwt-user-editor", inputs: ["user"], outputs: ["userChange", "editorClose"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: UserListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'auth-jwt-user-list', template: "<div\r\n  gdAreas=\"filters | progress | list | pager | editor\"\r\n  gdRows=\"80px 64px 2fr 40px 1fr\"\r\n  gdColumns=\"1fr\"\r\n  gdGap=\"8px\"\r\n>\r\n  <div>\r\n    <!-- filters -->\r\n    <div gdArea=\"filters\">\r\n      <auth-jwt-user-filter></auth-jwt-user-filter>\r\n    </div>\r\n\r\n    <!-- progress -->\r\n    <div *ngIf=\"paginator.isLoading$ | async\" gdArea=\"progress\">\r\n      <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\r\n    </div>\r\n\r\n    <!-- list -->\r\n    <div gdArea=\"list\" *ngIf=\"pagination$ | async as pagination\">\r\n      <table>\r\n        <thead>\r\n          <td></td>\r\n          <td></td>\r\n          <td></td>\r\n          <th>name</th>\r\n          <th>first</th>\r\n          <th>last</th>\r\n          <th>email</th>\r\n          <th>roles</th>\r\n          <th>lock end</th>\r\n        </thead>\r\n        <tbody>\r\n          <tr *ngFor=\"let user of pagination.data\">\r\n            <td class=\"command\">\r\n              <button\r\n                mat-icon-button\r\n                type=\"button\"\r\n                matTooltip=\"Edit {{ user.userName }}\"\r\n                color=\"primary\"\r\n                (click)=\"setActiveUser(user)\"\r\n              >\r\n                <mat-icon>mode_edit</mat-icon>\r\n              </button>\r\n            </td>\r\n            <td class=\"command\">\r\n              <button\r\n                mat-icon-button\r\n                type=\"button\"\r\n                matTooltip=\"Delete {{ user.userName }}\"\r\n                color=\"warn\"\r\n                (click)=\"deleteUser(user)\"\r\n              >\r\n                <mat-icon>remove_circle</mat-icon>\r\n              </button>\r\n            </td>\r\n            <td>\r\n              <img\r\n                [src]=\"getGravatarUrl(user.email, 32)\"\r\n                [alt]=\"user.userName\"\r\n              />\r\n            </td>\r\n            <td>{{ user.userName }}</td>\r\n            <td>{{ user.firstName }}</td>\r\n            <td>{{ user.lastName }}</td>\r\n            <td>\r\n              <a [href]=\"'mailto:' + user.email\">{{ user.email }}</a>\r\n            </td>\r\n            <td>{{ user.roles?.join(\" \") }}</td>\r\n            <td>{{ user.lockoutEnd }}</td>\r\n          </tr>\r\n        </tbody>\r\n      </table>\r\n      <!-- pagination -->\r\n      <mat-paginator\r\n        gdArea=\"pager\"\r\n        gdAlignColumns=\"center\"\r\n        gdAlignRows=\"start\"\r\n        [length]=\"pagination.total\"\r\n        [pageSize]=\"pageSize.value\"\r\n        [pageSizeOptions]=\"[20, 50, 75, 100]\"\r\n        [pageIndex]=\"pagination.currentPage - 1\"\r\n        [showFirstLastButtons]=\"true\"\r\n        (page)=\"pageChange($event)\"\r\n      ></mat-paginator>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- editor -->\r\n  <div gdArea=\"editor\" *ngIf=\"active$ | async as active\">\r\n    <fieldset>\r\n      <legend>{{ active.userName }}</legend>\r\n      <auth-jwt-user-editor\r\n        [user]=\"active\"\r\n        (userChange)=\"saveActiveUser($event)\"\r\n        (editorClose)=\"resetActiveUser()\"\r\n      ></auth-jwt-user-editor>\r\n    </fieldset>\r\n  </div>\r\n</div>\r\n", styles: ["tr:nth-child(odd){background-color:#f8f8f8}th{padding:0 8px;text-align:left;color:silver;font-weight:400}td{padding:0 8px}td.command{width:24px}table{width:100%;border-collapse:collapse}fieldset{border:1px solid silver;border-radius:8px;padding:16px}\n"] }]
-        }], ctorParameters: function () { return [{ type: i15.PaginatorPlugin, decorators: [{
-                    type: Inject,
-                    args: [USERS_PAGINATOR]
-                }] }, { type: UsersQuery }, { type: AuthJwtAccountService }, { type: UsersService }, { type: DialogService }, { type: i2$2.GravatarService }, { type: i1$1.UntypedFormBuilder }]; } });
+            args: [{ selector: 'auth-jwt-user-list', template: "<div\n  gdAreas=\"filters | progress | list | pager | editor\"\n  gdRows=\"80px 64px 2fr 40px 1fr\"\n  gdColumns=\"1fr\"\n  gdGap=\"8px\"\n>\n  <div>\n    <!-- filters -->\n    <div gdArea=\"filters\">\n      <auth-jwt-user-filter></auth-jwt-user-filter>\n    </div>\n\n    <!-- progress -->\n    <div *ngIf=\"loading$ | async\" gdArea=\"progress\">\n      <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n    </div>\n\n    <!-- list -->\n    <div gdArea=\"list\" *ngIf=\"pagination$ | async as pagination\">\n      <table>\n        <thead>\n          <td></td>\n          <td></td>\n          <td></td>\n          <th>name</th>\n          <th>first</th>\n          <th>last</th>\n          <th>email</th>\n          <th>roles</th>\n          <th>lock end</th>\n        </thead>\n        <tbody>\n          <tr *ngFor=\"let user of pagination.data\">\n            <td class=\"command\">\n              <button\n                mat-icon-button\n                type=\"button\"\n                matTooltip=\"Edit {{ user.userName }}\"\n                color=\"primary\"\n                (click)=\"setActiveUser(user)\"\n              >\n                <mat-icon>mode_edit</mat-icon>\n              </button>\n            </td>\n            <td class=\"command\">\n              <button\n                mat-icon-button\n                type=\"button\"\n                matTooltip=\"Delete {{ user.userName }}\"\n                color=\"warn\"\n                (click)=\"deleteUser(user)\"\n              >\n                <mat-icon>remove_circle</mat-icon>\n              </button>\n            </td>\n            <td>\n              <img\n                [src]=\"getGravatarUrl(user.email, 32)\"\n                [alt]=\"user.userName\"\n              />\n            </td>\n            <td>{{ user.userName }}</td>\n            <td>{{ user.firstName }}</td>\n            <td>{{ user.lastName }}</td>\n            <td>\n              <a [href]=\"'mailto:' + user.email\">{{ user.email }}</a>\n            </td>\n            <td>{{ user.roles.join(\" \") }}</td>\n            <td>{{ user.lockoutEnd }}</td>\n          </tr>\n        </tbody>\n      </table>\n      <!-- pagination -->\n      <mat-paginator\n        gdArea=\"pager\"\n        gdAlignColumns=\"center\"\n        gdAlignRows=\"start\"\n        [length]=\"pagination.total\"\n        [pageSize]=\"pagination.perPage\"\n        [pageSizeOptions]=\"[20, 50, 75, 100]\"\n        [pageIndex]=\"pagination.currentPage - 1\"\n        [showFirstLastButtons]=\"true\"\n        (page)=\"pageChange($event)\"\n      ></mat-paginator>\n    </div>\n  </div>\n\n  <!-- editor -->\n  <div gdArea=\"editor\" *ngIf=\"active$ | async as active\">\n    <fieldset>\n      <legend>{{ active.userName }}</legend>\n      <auth-jwt-user-editor\n        [user]=\"active\"\n        (userChange)=\"saveActiveUser($event)\"\n        (editorClose)=\"resetActiveUser()\"\n      ></auth-jwt-user-editor>\n    </fieldset>\n  </div>\n</div>\n", styles: ["tr:nth-child(odd){background-color:#f8f8f8}th{padding:0 8px;text-align:left;color:silver;font-weight:400}td{padding:0 8px}td.command{width:24px}table{width:100%;border-collapse:collapse}fieldset{border:1px solid silver;border-radius:8px;padding:16px}\n"] }]
+        }], ctorParameters: function () { return [{ type: UserListRepository }, { type: DialogService }, { type: i2$2.GravatarService }]; } });
 
 class AuthJwtAdminModule {
 }
-AuthJwtAdminModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: AuthJwtAdminModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AuthJwtAdminModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.6", ngImport: i0, type: AuthJwtAdminModule, declarations: [AuthJwtRegistrationComponent,
+AuthJwtAdminModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: AuthJwtAdminModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AuthJwtAdminModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.0", ngImport: i0, type: AuthJwtAdminModule, declarations: [AuthJwtRegistrationComponent,
         PasswordStrengthBarComponent,
         UserFilterComponent,
         UserListComponent,
@@ -980,7 +948,7 @@ AuthJwtAdminModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", vers
         PasswordStrengthBarComponent,
         UserFilterComponent,
         UserListComponent] });
-AuthJwtAdminModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: AuthJwtAdminModule, imports: [CommonModule,
+AuthJwtAdminModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: AuthJwtAdminModule, imports: [CommonModule,
         HttpClientModule,
         FormsModule,
         RouterModule,
@@ -999,7 +967,7 @@ AuthJwtAdminModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", vers
         MatTooltipModule,
         AuthJwtLoginModule,
         NgToolsModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.6", ngImport: i0, type: AuthJwtAdminModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: AuthJwtAdminModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [