fix(console): table pagination, diverse optimizations, lint workspace (#1563)

* show app redirect issues, action layout * refactor pagination * tos, privacy * new paginator everywhere * layout width and table optim * lint pt1 * lint config, ts * stylelint * chore(deps-dev): bump @angular/cli from 11.2.7 to 11.2.8 in /console (#1566) * fix: remove app name check on ChangeAPIApplication (#1561) * fix: remove app name check on ChangeAPIApplication * fix APIConfigInvalid message * chore(workflow): ignore tags for docs and codecov flows (#1564) * chore(deps-dev): bump @angular/cli from 11.2.7 to 11.2.8 in /console Bumps [@angular/cli](https://github.com/angular/angular-cli) from 11.2.7 to 11.2.8. - [Release notes](https://github.com/angular/angular-cli/releases) - [Commits](https://github.com/angular/angular-cli/compare/v11.2.7...v11.2.8) Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: Livio Amstutz <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps-dev): bump jasmine-spec-reporter from 6.0.0 to 7.0.0 in /console (#1573) * fix: remove app name check on ChangeAPIApplication (#1561) * fix: remove app name check on ChangeAPIApplication * fix APIConfigInvalid message * chore(workflow): ignore tags for docs and codecov flows (#1564) * chore(deps-dev): bump jasmine-spec-reporter in /console Bumps [jasmine-spec-reporter](https://github.com/bcaudan/jasmine-spec-reporter) from 6.0.0 to 7.0.0. - [Release notes](https://github.com/bcaudan/jasmine-spec-reporter/releases) - [Changelog](https://github.com/bcaudan/jasmine-spec-reporter/blob/master/CHANGELOG.md) - [Commits](https://github.com/bcaudan/jasmine-spec-reporter/compare/v6.0.0...v7.0.0) Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: Livio Amstutz <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps-dev): bump @angular-devkit/build-angular from 0.1102.7 to 0.1102.8 in /console (#1574) * fix: remove app name check on ChangeAPIApplication (#1561) * fix: remove app name check on ChangeAPIApplication * fix APIConfigInvalid message * chore(workflow): ignore tags for docs and codecov flows (#1564) * chore(deps-dev): bump @angular-devkit/build-angular in /console Bumps [@angular-devkit/build-angular](https://github.com/angular/angular-cli) from 0.1102.7 to 0.1102.8. - [Release notes](https://github.com/angular/angular-cli/releases) - [Commits](https://github.com/angular/angular-cli/commits) Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: Livio Amstutz <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Max Peintner <[email protected]> * chore(deps): bump @types/file-saver from 2.0.1 to 2.0.2 in /console (#1576) * fix: remove app name check on ChangeAPIApplication (#1561) * fix: remove app name check on ChangeAPIApplication * fix APIConfigInvalid message * chore(workflow): ignore tags for docs and codecov flows (#1564) * chore(deps): bump @types/file-saver from 2.0.1 to 2.0.2 in /console Bumps [@types/file-saver](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/file-saver) from 2.0.1 to 2.0.2. - [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases) - [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/file-saver) Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: Livio Amstutz <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps-dev): bump @angular/language-service from 11.2.8 to 11.2.9 in /console (#1567) * fix: remove app name check on ChangeAPIApplication (#1561) * fix: remove app name check on ChangeAPIApplication * fix APIConfigInvalid message * chore(workflow): ignore tags for docs and codecov flows (#1564) * chore(deps-dev): bump @angular/language-service in /console Bumps [@angular/language-service](https://github.com/angular/angular/tree/HEAD/packages/language-service) from 11.2.8 to 11.2.9. - [Release notes](https://github.com/angular/angular/releases) - [Changelog](https://github.com/angular/angular/blob/master/CHANGELOG.md) - [Commits](https://github.com/angular/angular/commits/11.2.9/packages/language-service) Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: Livio Amstutz <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * update protobuf, libphone * chore(deps): bump rxjs from 6.6.3 to 6.6.7 in /console (#1488) Bumps [rxjs](https://github.com/reactivex/rxjs) from 6.6.3 to 6.6.7. - [Release notes](https://github.com/reactivex/rxjs/releases) - [Changelog](https://github.com/ReactiveX/rxjs/blob/6.6.7/CHANGELOG.md) - [Commits](https://github.com/reactivex/rxjs/compare/6.6.3...6.6.7) Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps-dev): bump @types/jasmine from 3.6.3 to 3.6.9 in /console (#1485) Bumps [@types/jasmine](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/jasmine) from 3.6.3 to 3.6.9. - [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases) - [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/jasmine) Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Max Peintner <[email protected]> * chore(deps-dev): bump jasmine-core from 3.6.0 to 3.7.1 in /console (#1445) Bumps [jasmine-core](https://github.com/jasmine/jasmine) from 3.6.0 to 3.7.1. - [Release notes](https://github.com/jasmine/jasmine/releases) - [Changelog](https://github.com/jasmine/jasmine/blob/main/RELEASE.md) - [Commits](https://github.com/jasmine/jasmine/compare/v3.6.0...v3.7.1) Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Max Peintner <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Livio Amstutz <[email protected]>
2026-11-11 16:45:13 +00:00 · 2021-04-15 15:54:10 +02:00
parent b0681a0bbe
commit 56b527060b
142 changed files with 2055 additions and 1585 deletions
@@ -1,43 +1,43 @@
 .type-selection {
+  display: flex;
+  margin: 0 -.5rem;
+
+  .otp-btn,
+  .u2f-btn {
+    flex: 1;
+    min-height: 100px;
+    border-radius: .5rem;
    display: flex;
-    margin: 0 -0.5rem;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    margin: 1rem;
+    box-sizing: border-box;

-    .otp-btn,
-    .u2f-btn {
-        flex: 1;
-        min-height: 100px;
-        border-radius: .5rem;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-        margin: 1rem;
-         box-sizing: border-box;
-
-        .icon-row {
-            display: flex;
-        }
+    .icon-row {
+      display: flex;
    }
+  }

-    button {
-        margin: .5rem;
-    }
+  button {
+    margin: .5rem;
+  }
 }

 .desc {
-    font-size: 14px;
-    color: var(--grey);
+  font-size: 14px;
+  color: var(--grey);
 }

 .otp {
-    max-width: 400px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
+  max-width: 400px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }

 .u2f {
-    max-width: 400px;  
+  max-width: 400px;
 }

 .formfield {
@@ -44,13 +44,13 @@ export class AuthFactorDialogComponent {
    public selectType(type: AuthFactorType): void {
        this.selectedType = type;

-        if (type == AuthFactorType.OTP) {
+        if (type === AuthFactorType.OTP) {
            this.authService.addMyMultiFactorOTP().then((otpresp) => {
                this.otpurl = otpresp.url;
            }, error => {
                this.toast.showError(error);
            });
-        } else if (type == AuthFactorType.U2F) {
+        } else if (type === AuthFactorType.U2F) {
            this.authService.addMyMultiFactorU2F().then((u2fresp) => {
                if (u2fresp.key) {
                    const credOptions: CredentialCreationOptions = JSON.parse(atob(u2fresp.key?.publicKey as string));
@@ -73,10 +73,10 @@ export class AuthFactorDialogComponent {
        }
    }

-    public submitAuth() {
-        if (this.selectedType == AuthFactorType.OTP) {
+    public submitAuth(): void {
+        if (this.selectedType === AuthFactorType.OTP) {
            this.submitOTP();
-        } else if (this.selectedType == AuthFactorType.U2F) {
+        } else if (this.selectedType === AuthFactorType.U2F) {
            this.submitU2F();
        }
    }
@@ -11,6 +11,7 @@

  .sub {
    color: var(--grey);
+    max-width: 500px;
  }

  .theme {
@@ -190,7 +190,7 @@ export class AuthUserDetailComponent implements OnDestroy {
                        titleKey: 'USER.LOGINMETHODS.EMAIL.EDITTITLE',
                        descriptionKey: 'USER.LOGINMETHODS.EMAIL.EDITDESC',
                        value: this.user.human?.email?.email,
-                        type: type
+                        type: type,
                    },
                    width: '400px',
                });
@@ -42,7 +42,7 @@ export class AuthUserMfaComponent implements OnInit, OnDestroy {
    constructor(
        private service: GrpcAuthService,
        private toast: ToastService,
-        private dialog: MatDialog
+        private dialog: MatDialog,
    ) { }

    public ngOnInit(): void {
@@ -56,8 +56,8 @@ export class AuthUserMfaComponent implements OnInit, OnDestroy {
    public addAuthFactor(): void {
        const dialogRef = this.dialog.open(AuthFactorDialogComponent, {
            data: {
-                otpDisabled: !this.otpAvailable
-            }
+                otpDisabled: !this.otpAvailable,
+            },
        });

        dialogRef.afterClosed().subscribe((code) => {
@@ -20,7 +20,7 @@ export class EditDialogComponent {
    constructor(public dialogRef: MatDialogRef<EditDialogComponent>,
        @Inject(MAT_DIALOG_DATA) public data: any) {
        this.valueControl.setValue(data.value);
-        if (data.type == EditDialogType.PHONE) {
+        if (data.type === EditDialogType.PHONE) {
            this.isPhone = true;
        }

@@ -31,7 +31,7 @@ export class EditDialogComponent {
        });
    }

-    changeValue(changedValue: string) {
+    private changeValue(changedValue: string): void {
        if (this.isPhone && changedValue) {
            try {
                const phoneNumber = parsePhoneNumber(changedValue ?? '', 'CH');
@@ -9,4 +9,4 @@ export function _arrayBufferToBase64(buffer: any): string {
    return btoa(binary).replace(/\+/g, '-')
        .replace(/\//g, '_')
        .replace(/=/g, '');
-}
+}
@@ -52,8 +52,8 @@
            </tr>

        </table>
-        <mat-paginator #paginator class="paginator" [length]="totalResult || 0" [pageSize]="10"
-            [pageSizeOptions]="[5, 10, 20]" (page)="changePage($event)"></mat-paginator>
+        <cnsl-paginator #paginator class="paginator" [timestamp]="viewTimestamp" [length]="totalResult || 0" [pageSize]="10"
+            [pageSizeOptions]="[5, 10, 20]" (page)="changePage($event)"></cnsl-paginator>
    </div>

 </app-refresh-table>
@@ -1,10 +1,10 @@
 import { SelectionModel } from '@angular/cdk/collections';
 import { Component, Input, OnInit, ViewChild } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
-import { MatPaginator, PageEvent } from '@angular/material/paginator';
 import { MatTableDataSource } from '@angular/material/table';
 import { Timestamp } from 'google-protobuf/google/protobuf/timestamp_pb';
 import { BehaviorSubject, Observable } from 'rxjs';
+import { PageEvent, PaginatorComponent } from 'src/app/modules/paginator/paginator.component';
 import { WarnDialogComponent } from 'src/app/modules/warn-dialog/warn-dialog.component';
 import { IDPUserLink } from 'src/app/proto/generated/zitadel/idp_pb';

@@ -20,7 +20,7 @@ import { ToastService } from '../../../../services/toast.service';
 export class ExternalIdpsComponent implements OnInit {
    @Input() service!: GrpcAuthService | ManagementService;
    @Input() userId!: string;
-    @ViewChild(MatPaginator) public paginator!: MatPaginator;
+    @ViewChild(PaginatorComponent) public paginator!: PaginatorComponent;
    public totalResult: number = 0;
    public viewTimestamp!: Timestamp.AsObject;
    public dataSource: MatTableDataSource<IDPUserLink.AsObject>
@@ -78,8 +78,8 @@
                </tr>
            </table>

-            <mat-paginator class="paginator" #paginator [pageSize]="50" [pageSizeOptions]="[25, 50, 100, 250]">
-            </mat-paginator>
+            <cnsl-paginator class="paginator" #paginator [timestamp]="dataSource?.viewTimestamp" [pageSize]="50" [pageSizeOptions]="[25, 50, 100, 250]">
+            </cnsl-paginator>
        </div>
    </app-refresh-table>
 </app-detail-layout>
@@ -35,18 +35,16 @@
  cursor: pointer;
 }

-
 tr {
  outline: none;
-  
+
  button {
    visibility: hidden;
  }
-  
+
  &:hover {
    button {
      visibility: visible;
    }
  }
 }
-  
@@ -1,11 +1,11 @@
 import { SelectionModel } from '@angular/cdk/collections';
 import { AfterViewInit, Component, ViewChild } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
-import { MatPaginator } from '@angular/material/paginator';
 import { MatTable } from '@angular/material/table';
 import { ActivatedRoute } from '@angular/router';
 import { tap } from 'rxjs/operators';
 import { CreationType, MemberCreateDialogComponent } from 'src/app/modules/add-member-dialog/member-create-dialog.component';
+import { PaginatorComponent } from 'src/app/modules/paginator/paginator.component';
 import { Membership, User } from 'src/app/proto/generated/zitadel/user_pb';
 import { AdminService } from 'src/app/services/admin.service';
 import { ManagementService } from 'src/app/services/mgmt.service';
@@ -21,7 +21,7 @@ import { MembershipDetailDataSource } from './membership-detail-datasource';
 export class MembershipDetailComponent implements AfterViewInit {
    public user!: User.AsObject;

-    @ViewChild(MatPaginator) public paginator!: MatPaginator;
+    @ViewChild(PaginatorComponent) public paginator!: PaginatorComponent;
    @ViewChild(MatTable) public table!: MatTable<Membership.AsObject>;
    public dataSource!: MembershipDetailDataSource;
    public selection: SelectionModel<Membership.AsObject>
@@ -207,7 +207,11 @@ export class MembershipDetailComponent implements AfterViewInit {
        let prom;

        if (membership.projectId && membership.projectGrantId && membership.userId) {
-            prom = this.mgmtService.removeProjectGrantMember(membership.projectId, membership.projectGrantId, membership.userId);
+            prom = this.mgmtService.removeProjectGrantMember(
+                membership.projectId,
+                membership.projectGrantId,
+                membership.userId,
+            );
        } else if (membership.projectId && membership.userId) {
            prom = this.mgmtService.removeProjectMember(membership.projectId, membership.userId);
        } else if (membership.orgId && membership.userId) {
@@ -3,7 +3,6 @@ import { NgModule } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatIconModule } from '@angular/material/icon';
-import { MatPaginatorModule } from '@angular/material/paginator';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatTableModule } from '@angular/material/table';
 import { MatTooltipModule } from '@angular/material/tooltip';
@@ -11,6 +10,7 @@ import { RouterModule, Routes } from '@angular/router';
 import { TranslateModule } from '@ngx-translate/core';
 import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
 import { DetailLayoutModule } from 'src/app/modules/detail-layout/detail-layout.module';
+import { PaginatorModule } from 'src/app/modules/paginator/paginator.module';
 import { RefreshTableModule } from 'src/app/modules/refresh-table/refresh-table.module';
 import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe/has-role-pipe.module';
 import { LocalizedDatePipeModule } from 'src/app/pipes/localized-date-pipe/localized-date-pipe.module';
@@ -37,7 +37,7 @@ const routes: Routes = [
        DetailLayoutModule,
        MatCheckboxModule,
        MatTableModule,
-        MatPaginatorModule,
+        PaginatorModule,
        MatProgressSpinnerModule,
        LocalizedDatePipeModule,
        TimestampToDatePipeModule,
@@ -5,7 +5,6 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatDialogModule } from '@angular/material/dialog';
 import { MatIconModule } from '@angular/material/icon';
-import { MatPaginatorModule } from '@angular/material/paginator';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatTableModule } from '@angular/material/table';
@@ -21,6 +20,7 @@ import { DetailLayoutModule } from 'src/app/modules/detail-layout/detail-layout.
 import { InputModule } from 'src/app/modules/input/input.module';
 import { MachineKeysModule } from 'src/app/modules/machine-keys/machine-keys.module';
 import { MetaLayoutModule } from 'src/app/modules/meta-layout/meta-layout.module';
+import { PaginatorModule } from 'src/app/modules/paginator/paginator.module';
 import { PasswordComplexityViewModule } from 'src/app/modules/password-complexity-view/password-complexity-view.module';
 import { RefreshTableModule } from 'src/app/modules/refresh-table/refresh-table.module';
 import { SharedModule } from 'src/app/modules/shared/shared.module';
@@ -93,7 +93,7 @@ import { UserMfaComponent } from './user-detail/user-mfa/user-mfa.component';
        HasRoleModule,
        TranslateModule,
        MatTableModule,
-        MatPaginatorModule,
+        PaginatorModule,
        SharedModule,
        RefreshTableModule,
        CopyToClipboardModule,
@@ -157,7 +157,7 @@ export class UserDetailComponent implements OnInit {
        if (this.user.id && email) {
            this.mgmtUserService.updateHumanEmail(this.user.id, email).then(() => {
                this.toast.showInfo('USER.TOAST.EMAILSAVED', true);
-                if (this.user.state == UserState.USER_STATE_INITIAL) {
+                if (this.user.state === UserState.USER_STATE_INITIAL) {
                    this.mgmtUserService.resendHumanInitialization(this.user.id, email ?? '').then(() => {
                        this.toast.showInfo('USER.TOAST.INITEMAILSENT', true);
                        this.refreshChanges$.emit();
@@ -195,13 +195,15 @@ export class UserDetailComponent implements OnInit {
    }

    public sendSetPasswordNotification(): void {
-        this.mgmtUserService.sendHumanResetPasswordNotification(this.user.id, SendHumanResetPasswordNotificationRequest.Type.TYPE_EMAIL)
-            .then(() => {
-                this.toast.showInfo('USER.TOAST.PASSWORDNOTIFICATIONSENT', true);
-                this.refreshChanges$.emit();
-            }).catch(error => {
-                this.toast.showError(error);
-            });
+        this.mgmtUserService.sendHumanResetPasswordNotification(
+            this.user.id,
+            SendHumanResetPasswordNotificationRequest.Type.TYPE_EMAIL,
+        ).then(() => {
+            this.toast.showInfo('USER.TOAST.PASSWORDNOTIFICATIONSENT', true);
+            this.refreshChanges$.emit();
+        }).catch(error => {
+            this.toast.showError(error);
+        });
    }

    public deleteUser(): void {
@@ -1,4 +1,4 @@
-<div class="max-width-container" [ngSwitch]="type">
+<div class="enlarged-container" [ngSwitch]="type">
    <ng-container *ngSwitchCase="Type.TYPE_HUMAN">
        <h1>{{ 'USER.PAGES.LIST' | translate }}</h1>
        <p class="sub">{{ 'USER.PAGES.DESCRIPTION' | translate }}</p>
@@ -5,7 +5,6 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatDialogModule } from '@angular/material/dialog';
 import { MatIconModule } from '@angular/material/icon';
-import { MatPaginatorModule } from '@angular/material/paginator';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatTableModule } from '@angular/material/table';
 import { MatTooltipModule } from '@angular/material/tooltip';
@@ -14,6 +13,7 @@ import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
 import { AvatarModule } from 'src/app/modules/avatar/avatar.module';
 import { CardModule } from 'src/app/modules/card/card.module';
 import { InputModule } from 'src/app/modules/input/input.module';
+import { PaginatorModule } from 'src/app/modules/paginator/paginator.module';
 import { RefreshTableModule } from 'src/app/modules/refresh-table/refresh-table.module';
 import { SharedModule } from 'src/app/modules/shared/shared.module';
 import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe/has-role-pipe.module';
@@ -38,7 +38,6 @@ import { UserTableComponent } from './user-table/user-table.component';
        HasRoleModule,
        CardModule,
        MatTableModule,
-        MatPaginatorModule,
        MatIconModule,
        MatProgressSpinnerModule,
        MatCheckboxModule,
@@ -48,6 +47,7 @@ import { UserTableComponent } from './user-table/user-table.component';
        SharedModule,
        RefreshTableModule,
        InputModule,
+        PaginatorModule,
    ],
    exports: [
        UserListComponent,
@@ -1,7 +1,7 @@
 <app-refresh-table [loading]="loading$ | async" (refreshed)="refreshPage()" [dataSize]="totalResult"
    [timestamp]="viewTimestamp" [selection]="selection" [emitRefreshOnPreviousRoutes]="refreshOnPreviousRoutes">
    <cnsl-form-field @appearfade *ngIf="userSearchKey != undefined" actions class="filtername">
-        <input cnslInput (keyup)="applyFilter($event)"
+        <input class="filterinput" cnslInput (keyup)="applyFilter($event)"
            [placeholder]="('USER.TABLE.FILTER.' + userSearchKey.toString()) | translate" #input>
    </cnsl-form-field>

@@ -128,8 +128,8 @@
            <i class="las la-exclamation"></i>
            <span>{{'USER.TABLE.EMPTY' | translate}}</span>
        </div>
-        <mat-paginator #paginator class="paginator" [length]="totalResult || 0" [pageSize]="10"
-            [pageSizeOptions]="[5, 10, 20]" (page)="changePage($event)"></mat-paginator>
+        <cnsl-paginator #paginator class="paginator" [timestamp]="viewTimestamp" [length]="totalResult || 0" [pageSize]="10" [timestamp]="viewTimestamp"
+            [pageSizeOptions]="[5, 10, 20]" (page)="changePage($event)"></cnsl-paginator>
    </div>
 </app-refresh-table>

@@ -53,7 +53,13 @@
 }

 .filtername {
-  margin: 0 1rem;
+  flex: 1;
+  margin-right: 1rem;
+
+  .filterinput {
+    height: 36px;
+    transform: translateY(1px);
+  }
 }

 .sa-icon {
@@ -1,13 +1,13 @@
 import { SelectionModel } from '@angular/cdk/collections';
 import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
-import { MatPaginator, PageEvent } from '@angular/material/paginator';
 import { MatTableDataSource } from '@angular/material/table';
 import { ActivatedRoute } from '@angular/router';
 import { TranslateService } from '@ngx-translate/core';
 import { BehaviorSubject, Observable } from 'rxjs';
 import { take } from 'rxjs/operators';
 import { enterAnimations } from 'src/app/animations';
+import { PageEvent, PaginatorComponent } from 'src/app/modules/paginator/paginator.component';
 import { WarnDialogComponent } from 'src/app/modules/warn-dialog/warn-dialog.component';
 import { Timestamp } from 'src/app/proto/generated/google/protobuf/timestamp_pb';
 import { TextQueryMethod } from 'src/app/proto/generated/zitadel/object_pb';
@@ -48,7 +48,7 @@ export class UserTableComponent implements OnInit {
    @Input() type: Type = Type.TYPE_HUMAN;
    @Input() refreshOnPreviousRoutes: string[] = [];
    @Input() disabled: boolean = false;
-    @ViewChild(MatPaginator) public paginator!: MatPaginator;
+    @ViewChild(PaginatorComponent) public paginator!: PaginatorComponent;
    @ViewChild('input') public filter!: Input;

    public viewTimestamp!: Timestamp.AsObject;
@@ -101,6 +101,7 @@ export class UserTableComponent implements OnInit {


    public changePage(event: PageEvent): void {
+        this.selection.clear();
        this.getData(event.pageSize, event.pageIndex * event.pageSize, this.type);
    }