@rolatech/angular-authorization 20.0.0-beta.4 → 20.0.0-beta.6

package/fesm2022/rolatech-angular-authorization-clients.routes-CJToHkIB.mjs

@@ -0,0 +1,441 @@
+import * as i0 from '@angular/core';
+import { Injectable, model, output, Component, inject, viewChild } from '@angular/core';
+import * as i1 from '@angular/forms';
+import { FormBuilder, Validators } from '@angular/forms';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { BaseService } from '@rolatech/angular-services';
+import { AngularCommonModule } from '@rolatech/angular-common';
+import { BaseComponent, AngularComponentsModule, TitleComponent, ToolbarComponent, ConfirmationComponent, SpinnerComponent } from '@rolatech/angular-components';
+import * as i4 from '@angular/cdk/clipboard';
+import { ClipboardModule } from '@angular/cdk/clipboard';
+import * as i2 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import * as i4$2 from '@angular/material/icon';
+import { MatIcon } from '@angular/material/icon';
+import * as i3 from '@angular/material/form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import * as i6 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
+import * as i2$1 from '@angular/material/autocomplete';
+import * as i4$1 from '@angular/material/select';
+import * as i1$1 from '@angular/common';
+import * as i3$1 from '@angular/material/divider';
+import * as i5 from '@angular/material/list';
+import * as i7 from '@angular/material/paginator';
+import { MatPaginator } from '@angular/material/paginator';
+import * as i8 from '@angular/material/table';
+import { MatTableDataSource } from '@angular/material/table';
+import * as i1$2 from '@angular/router';
+import * as i6$1 from '@angular/material/menu';
+
+class ClientService extends BaseService {
+    init() {
+        this.endpoint = 'auth/clients';
+        super.init();
+    }
+    resetClientSecret(id) {
+        return this.http.post(`${this.actionUrl}/${id}/reset`, {}, {
+            withCredentials: true,
+        });
+    }
+    bindWeChatClient(id, data) {
+        return this.http.post(`${this.actionUrl}/${id}/wechat`, data, {
+            withCredentials: true,
+        });
+    }
+    unBindWeChatClient(id) {
+        return this.http.delete(`${this.actionUrl}/${id}/wechat`, {
+            withCredentials: true,
+        });
+    }
+    updateWeChatClient(id, data) {
+        return this.http.put(`${this.actionUrl}/${id}/wechat`, data, {
+            withCredentials: true,
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ClientService, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ClientService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ClientService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class ClientSecretCopyComponent {
+    clientSecret = model.required();
+    output = output();
+    ngDoCheck() {
+        this.output.emit(this.clientSecret());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ClientSecretCopyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.3", type: ClientSecretCopyComponent, isStandalone: true, selector: "rolatech-authorization-client-secret-copy", inputs: { clientSecret: { classPropertyName: "clientSecret", publicName: "clientSecret", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { clientSecret: "clientSecretChange", output: "output" }, ngImport: i0, template: "<div class=\"flex items-center gap-3\">\n  <mat-form-field appearance=\"fill\" subscriptSizing=\"dynamic\">\n    <input matInput type=\"password\" [value]=\"clientSecret()\" readonly />\n  </mat-form-field>\n  <button mat-icon-button [cdkCopyToClipboard]=\"clientSecret()\">\n    <mat-icon>content_copy</mat-icon>\n  </button>\n</div>\n", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ClipboardModule }, { kind: "directive", type: i4.CdkCopyToClipboard, selector: "[cdkCopyToClipboard]", inputs: ["cdkCopyToClipboard", "cdkCopyToClipboardAttempts"], outputs: ["cdkCopyToClipboardCopied"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ClientSecretCopyComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-authorization-client-secret-copy', imports: [MatFormFieldModule, MatInputModule, MatButtonModule, MatIcon, ClipboardModule], template: "<div class=\"flex items-center gap-3\">\n  <mat-form-field appearance=\"fill\" subscriptSizing=\"dynamic\">\n    <input matInput type=\"password\" [value]=\"clientSecret()\" readonly />\n  </mat-form-field>\n  <button mat-icon-button [cdkCopyToClipboard]=\"clientSecret()\">\n    <mat-icon>content_copy</mat-icon>\n  </button>\n</div>\n", styles: ["mat-form-field{width:100%}\n"] }]
+        }] });
+
+class CreateComponent extends BaseComponent {
+    formBuilder = inject(FormBuilder);
+    snackBar = inject(MatSnackBar);
+    clientService = inject(ClientService);
+    fileName = '';
+    uploadProgress = 0;
+    file;
+    url = '';
+    clientCreateForm;
+    ngOnInit() {
+        this.clientCreateForm = this.formBuilder.group({
+            name: [null, Validators.required],
+        });
+    }
+    submit() {
+        if (!this.clientCreateForm.valid) {
+            return;
+        }
+        this.clientService.create(this.clientCreateForm.value).subscribe({
+            next: (res) => {
+                this.copyClientSecret(res.data.id, res.data.clientSecret);
+            },
+            error: (error) => {
+                this.snackBar.open(error.message);
+            },
+        });
+    }
+    copyClientSecret(id, clientSecret) {
+        const options = {
+            title: 'Copy client secret',
+            confirmText: 'Confirm',
+            component: ClientSecretCopyComponent,
+            data: {
+                clientSecret: clientSecret,
+            },
+        };
+        this.dialogService.open(options);
+        this.dialogService.confirmed().subscribe({
+            next: (result) => {
+                this.router.navigate([`../${id}`], {
+                    relativeTo: this.route,
+                });
+            },
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: CreateComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.3", type: CreateComponent, isStandalone: true, selector: "rolatech-authorization-create", usesInheritance: true, ngImport: i0, template: "<rolatech-toolbar title=\"Create\"></rolatech-toolbar>\n<div class=\"px-4\">\n  <form [formGroup]=\"clientCreateForm\" (submit)=\"submit()\">\n    <div class=\"flex flex-col lg:w-1/2\">\n      <!-- name -->\n      <rolatech-title title=\"Info\"></rolatech-title>\n      <mat-form-field appearance=\"fill\">\n        <mat-label> Name </mat-label>\n        <input matInput formControlName=\"name\" required />\n      </mat-form-field>\n    </div>\n    <button mat-raised-button type=\"submit\">Save</button>\n  </form>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: AngularCommonModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: AngularComponentsModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: TitleComponent, selector: "rolatech-title", inputs: ["title", "subtitle", "large"] }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: CreateComponent, decorators: [{
+            type: Component,
+            args: [{ imports: [AngularCommonModule, AngularComponentsModule, TitleComponent, ToolbarComponent], selector: 'rolatech-authorization-create', template: "<rolatech-toolbar title=\"Create\"></rolatech-toolbar>\n<div class=\"px-4\">\n  <form [formGroup]=\"clientCreateForm\" (submit)=\"submit()\">\n    <div class=\"flex flex-col lg:w-1/2\">\n      <!-- name -->\n      <rolatech-title title=\"Info\"></rolatech-title>\n      <mat-form-field appearance=\"fill\">\n        <mat-label> Name </mat-label>\n        <input matInput formControlName=\"name\" required />\n      </mat-form-field>\n    </div>\n    <button mat-raised-button type=\"submit\">Save</button>\n  </form>\n</div>\n" }]
+        }] });
+
+class ClientBindDialogComponent {
+    formBuilder = inject(FormBuilder);
+    apps = model();
+    app = model();
+    selectedApp = model();
+    output = output();
+    wechatClientBindForm;
+    ngOnInit() {
+        this.wechatClientBindForm = this.formBuilder.group({
+            name: [null, Validators.required],
+            appId: [null, Validators.required],
+            appSecret: [null, Validators.required],
+        });
+        if (this.app()) {
+            const { name, appId, appSecret } = this.app();
+            this.wechatClientBindForm.setValue({
+                name,
+                appId,
+                appSecret,
+            });
+        }
+    }
+    onSelectionChange(event) {
+        this.selectedApp.set(event.value);
+    }
+    compareFn(o1, o2) {
+        return o1.name === o2.name;
+    }
+    ngDoCheck() {
+        this.output.emit(this.wechatClientBindForm.value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ClientBindDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: ClientBindDialogComponent, isStandalone: true, selector: "rolatech-authorization-client-bind-dialog", inputs: { apps: { classPropertyName: "apps", publicName: "apps", isSignal: true, isRequired: false, transformFunction: null }, app: { classPropertyName: "app", publicName: "app", isSignal: true, isRequired: false, transformFunction: null }, selectedApp: { classPropertyName: "selectedApp", publicName: "selectedApp", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { apps: "appsChange", app: "appChange", selectedApp: "selectedAppChange", output: "output" }, ngImport: i0, template: "<div>\n  <mat-form-field appearance=\"fill\">\n    <mat-label>App Type</mat-label>\n    <mat-select [compareWith]=\"compareFn\" (selectionChange)=\"onSelectionChange($event)\" [(ngModel)]=\"selectedApp\">\n      @for (item of apps(); track item) {\n        <mat-option [value]=\"item\">\n          {{ item.name }}\n        </mat-option>\n      }\n    </mat-select>\n  </mat-form-field>\n  <form [formGroup]=\"wechatClientBindForm\">\n    <mat-form-field appearance=\"fill\">\n      <mat-label> Name </mat-label>\n      <input matInput formControlName=\"name\" required />\n    </mat-form-field>\n    <mat-form-field appearance=\"fill\">\n      <mat-label> AppId </mat-label>\n      <input matInput formControlName=\"appId\" required />\n    </mat-form-field>\n    <mat-form-field appearance=\"fill\">\n      <mat-label> AppSecret </mat-label>\n      <input matInput formControlName=\"appSecret\" required />\n    </mat-form-field>\n  </form>\n</div>\n", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: AngularCommonModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: AngularComponentsModule }, { kind: "component", type: i2$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i4$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ClientBindDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-authorization-client-bind-dialog', imports: [AngularCommonModule, AngularComponentsModule], template: "<div>\n  <mat-form-field appearance=\"fill\">\n    <mat-label>App Type</mat-label>\n    <mat-select [compareWith]=\"compareFn\" (selectionChange)=\"onSelectionChange($event)\" [(ngModel)]=\"selectedApp\">\n      @for (item of apps(); track item) {\n        <mat-option [value]=\"item\">\n          {{ item.name }}\n        </mat-option>\n      }\n    </mat-select>\n  </mat-form-field>\n  <form [formGroup]=\"wechatClientBindForm\">\n    <mat-form-field appearance=\"fill\">\n      <mat-label> Name </mat-label>\n      <input matInput formControlName=\"name\" required />\n    </mat-form-field>\n    <mat-form-field appearance=\"fill\">\n      <mat-label> AppId </mat-label>\n      <input matInput formControlName=\"appId\" required />\n    </mat-form-field>\n    <mat-form-field appearance=\"fill\">\n      <mat-label> AppSecret </mat-label>\n      <input matInput formControlName=\"appSecret\" required />\n    </mat-form-field>\n  </form>\n</div>\n", styles: ["mat-form-field{width:100%}\n"] }]
+        }] });
+
+class DetailsComponent extends BaseComponent {
+    clientServide = inject(ClientService);
+    snackBar = inject(MatSnackBar);
+    permissions = [];
+    allComplete = false;
+    isLoading = false;
+    formattedPermissions = [];
+    client;
+    // results: any;
+    ngOnInit() {
+        this.get();
+    }
+    get() {
+        this.isLoading = true;
+        this.clientServide.get(this.id).subscribe({
+            next: (res) => {
+                this.client = res.data;
+                this.isLoading = false;
+            },
+            error: (error) => {
+                this.isLoading = false;
+                this.snackBar.open(error.message);
+            },
+        });
+    }
+    editClient() { }
+    deleteClient() {
+        const options = {
+            title: 'Delete client',
+            component: ConfirmationComponent,
+            data: {
+                message: 'Delete confirm?',
+            },
+        };
+        this.dialogService.open(options);
+        this.dialogService.confirmed().subscribe({
+            next: (result) => {
+                if (result) {
+                    this.clientServide.delete(this.id).subscribe({
+                        next: (res) => {
+                            this.snackBarService.open('Deleted');
+                            this.router.navigate([`../`], {
+                                relativeTo: this.route,
+                            });
+                        },
+                        error: (error) => {
+                            this.snackBarService.open(error.message);
+                        },
+                    });
+                }
+            },
+        });
+    }
+    resetClientSecret() {
+        this.clientServide.resetClientSecret(this.id).subscribe({
+            next: (res) => {
+                this.copyClientSecret(res.data.clientSecret);
+            },
+            error: (error) => {
+                this.snackBar.open(error.message);
+            },
+        });
+    }
+    bindWeChatclient() {
+        const options = {
+            title: '绑定应用',
+            cancelText: 'Cancel',
+            confirmText: 'Confirm',
+            component: ClientBindDialogComponent,
+            data: {
+                selectedApp: { name: '微信' },
+                apps: [{ name: '微信' }, { name: '支付宝' }],
+            },
+        };
+        this.dialogService.open(options);
+        this.dialogService.confirmed().subscribe({
+            next: (result) => {
+                if (result) {
+                    this.clientServide.bindWeChatClient(this.id, result).subscribe({
+                        next: (res) => {
+                            this.client.weChatClient = res.data;
+                            this.snackBarService.open('绑定成功');
+                        },
+                        error: (error) => {
+                            this.snackBarService.open(error.message);
+                        },
+                    });
+                }
+            },
+        });
+    }
+    unBindWeChatclient() {
+        const options = {
+            title: '解绑应用',
+            message: '解除绑定前, 请确认是否正在使用此应用',
+            cancelText: 'Cancel',
+            confirmText: 'Confirm',
+        };
+        this.dialogService.open(options);
+        this.dialogService.confirmed().subscribe({
+            next: (result) => {
+                if (result) {
+                    this.clientServide.unBindWeChatClient(this.id).subscribe({
+                        next: (res) => {
+                            this.snackBarService.open(res.data);
+                        },
+                        error: (error) => {
+                            this.snackBarService.open(error.message);
+                        },
+                    });
+                }
+            },
+        });
+    }
+    updateWeChatclient() {
+        const options = {
+            title: '修改应用',
+            cancelText: 'Cancel',
+            confirmText: 'Confirm',
+            component: ClientBindDialogComponent,
+            data: {
+                selectedApp: { name: '微信' },
+                app: this.client.weChatClient,
+                apps: [{ name: '微信' }, { name: '支付宝' }],
+            },
+        };
+        this.dialogService.open(options);
+        this.dialogService.confirmed().subscribe({
+            next: (result) => {
+                if (result) {
+                    this.clientServide.updateWeChatClient(this.client.weChatClient.id, result).subscribe({
+                        next: (res) => {
+                            this.client.weChatClient = res.data;
+                            this.snackBarService.open('Update successfully');
+                        },
+                        error: (error) => {
+                            this.snackBarService.open(error.message);
+                        },
+                    });
+                }
+            },
+        });
+    }
+    copyClientSecret(clientSecret) {
+        const options = {
+            title: 'Copy client secret',
+            confirmText: 'Confirm',
+            component: ClientSecretCopyComponent,
+            data: {
+                clientSecret: clientSecret,
+            },
+        };
+        this.dialogService.open(options);
+        this.dialogService.confirmed().subscribe({
+            next: (result) => { },
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: DetailsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: DetailsComponent, isStandalone: true, selector: "rolatech-authorization-details", usesInheritance: true, ngImport: i0, template: "<rolatech-toolbar title=\"Client details\"></rolatech-toolbar>\n<div class=\"max-w-[820px] p-3\">\n  @if (client) {\n    <!-- contact -->\n    <div class=\"border border-[--rt-border-color] rounded px-3 pt-3\">\n      <div class=\"p-3 flex justify-between items-center\">\n        <span class=\"text-xl\">Info</span>\n        <div class=\"flex gap-3\">\n          <button mat-flat-button class=\"max-h-8\" (click)=\"editClient()\">\n            <mat-icon>edit</mat-icon>\n            <span i18n>Update</span>\n          </button>\n          <button mat-flat-button class=\"max-h-8\" (click)=\"deleteClient()\" i18n>Delete</button>\n        </div>\n      </div>\n      <mat-nav-list>\n        <mat-list-item>\n          <div class=\"flex items-center justify-between\">\n            <div class=\"flex flex-1 items-center\">\n              <span class=\"w-24 text-sm\" Update>#ID</span>\n              <span i18n>{{ client.id || 'Unset' }}</span>\n            </div>\n          </div>\n        </mat-list-item>\n        <mat-divider class=\"mx-3\"></mat-divider>\n        <mat-list-item>\n          <div class=\"flex items-center justify-between\">\n            <div class=\"flex flex-1 items-center\">\n              <span class=\"w-24 text-sm\">Name</span>\n              <span i18n>{{ client.clientName || 'Unset' }}</span>\n            </div>\n          </div>\n        </mat-list-item>\n        <mat-divider class=\"mx-3\"></mat-divider>\n        <mat-list-item>\n          <div class=\"flex items-center justify-between\">\n            <div class=\"flex flex-1 items-center\">\n              <span class=\"w-24 text-sm\">ClientId</span>\n              <span i18n>{{ client.clientId || 'Unset' }}</span>\n            </div>\n          </div>\n        </mat-list-item>\n        <mat-divider class=\"mx-3\"></mat-divider>\n        <mat-list-item>\n          <div class=\"flex items-center justify-between\">\n            <div class=\"flex flex-1 items-center\">\n              <span class=\"w-24 text-sm\">Client Secret</span>\n              <span i18n>Set</span>\n            </div>\n            <button mat-button (click)=\"resetClientSecret()\">Reset</button>\n          </div>\n        </mat-list-item>\n        <mat-divider class=\"mx-3\"></mat-divider>\n        <mat-list-item>\n          <div class=\"flex items-center justify-between\">\n            <div class=\"flex flex-1 items-center\">\n              <span class=\"w-24 text-sm\">Issued At</span>\n              <span>{{ client.clientIdIssuedAt | date }}</span>\n            </div>\n          </div>\n        </mat-list-item>\n      </mat-nav-list>\n    </div>\n    <!-- wechat client -->\n    <div class=\"border border-[--rt-border-color] rounded p-3 mt-3\">\n      <div class=\"p-3 flex justify-between items-center\">\n        <span class=\"text-xl\">WeChat Client</span>\n        @if (client.weChatClient) {\n          <div class=\"flex gap-3\">\n            <button mat-flat-button class=\"max-h-8\" (click)=\"updateWeChatclient()\">\n              <mat-icon>edit</mat-icon>\n              Update\n            </button>\n            <button mat-flat-button class=\"max-h-8\" (click)=\"unBindWeChatclient()\">Delete</button>\n          </div>\n        } @else {\n          <button mat-flat-button class=\"max-h-8\" (click)=\"bindWeChatclient()\">Bind</button>\n        }\n      </div>\n      @if (client.weChatClient) {\n        <mat-nav-list>\n          <mat-list-item>\n            <div class=\"flex items-center justify-between\">\n              <div class=\"flex flex-1 items-center\">\n                <span class=\"w-24 text-sm\" i18n>#ID</span>\n                <span i18n>{{ client.id || 'Unset' }}</span>\n              </div>\n            </div>\n          </mat-list-item>\n          <mat-divider class=\"mx-3\"></mat-divider>\n          <mat-list-item>\n            <div class=\"flex items-center justify-between\">\n              <div class=\"flex flex-1 items-center\">\n                <span class=\"w-24 text-sm\" i18n>Name</span>\n                <span i18n>{{ client.weChatClient.name || 'Unset' }}</span>\n              </div>\n            </div>\n          </mat-list-item>\n          <mat-divider class=\"mx-3\"></mat-divider>\n          <mat-list-item>\n            <div class=\"flex items-center justify-between\">\n              <div class=\"flex flex-1 items-center\">\n                <span class=\"w-24 text-sm\" i18n>App Id</span>\n                <span i18n>{{ client.weChatClient.appId || 'Unset' }}</span>\n              </div>\n            </div>\n          </mat-list-item>\n          <mat-divider class=\"mx-3\"></mat-divider>\n\n          <mat-list-item>\n            <div class=\"flex items-center justify-between\">\n              <div class=\"flex flex-1 items-center\">\n                <span class=\"w-24 text-sm\" i18n>App Secret</span>\n                <span>{{ client.weChatClient.appSecret || 'Unset' }}</span>\n              </div>\n            </div>\n          </mat-list-item>\n        </mat-nav-list>\n      } @else {\n        <div class=\"p-3\">\n          <span class=\"py-11 opacity-70\" i18n>Not bound to WeChat</span>\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: AngularCommonModule }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "ngmodule", type: AngularComponentsModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i4$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "component", type: i5.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: DetailsComponent, decorators: [{
+            type: Component,
+            args: [{ imports: [AngularCommonModule, AngularComponentsModule, ToolbarComponent], selector: 'rolatech-authorization-details', template: "<rolatech-toolbar title=\"Client details\"></rolatech-toolbar>\n<div class=\"max-w-[820px] p-3\">\n  @if (client) {\n    <!-- contact -->\n    <div class=\"border border-[--rt-border-color] rounded px-3 pt-3\">\n      <div class=\"p-3 flex justify-between items-center\">\n        <span class=\"text-xl\">Info</span>\n        <div class=\"flex gap-3\">\n          <button mat-flat-button class=\"max-h-8\" (click)=\"editClient()\">\n            <mat-icon>edit</mat-icon>\n            <span i18n>Update</span>\n          </button>\n          <button mat-flat-button class=\"max-h-8\" (click)=\"deleteClient()\" i18n>Delete</button>\n        </div>\n      </div>\n      <mat-nav-list>\n        <mat-list-item>\n          <div class=\"flex items-center justify-between\">\n            <div class=\"flex flex-1 items-center\">\n              <span class=\"w-24 text-sm\" Update>#ID</span>\n              <span i18n>{{ client.id || 'Unset' }}</span>\n            </div>\n          </div>\n        </mat-list-item>\n        <mat-divider class=\"mx-3\"></mat-divider>\n        <mat-list-item>\n          <div class=\"flex items-center justify-between\">\n            <div class=\"flex flex-1 items-center\">\n              <span class=\"w-24 text-sm\">Name</span>\n              <span i18n>{{ client.clientName || 'Unset' }}</span>\n            </div>\n          </div>\n        </mat-list-item>\n        <mat-divider class=\"mx-3\"></mat-divider>\n        <mat-list-item>\n          <div class=\"flex items-center justify-between\">\n            <div class=\"flex flex-1 items-center\">\n              <span class=\"w-24 text-sm\">ClientId</span>\n              <span i18n>{{ client.clientId || 'Unset' }}</span>\n            </div>\n          </div>\n        </mat-list-item>\n        <mat-divider class=\"mx-3\"></mat-divider>\n        <mat-list-item>\n          <div class=\"flex items-center justify-between\">\n            <div class=\"flex flex-1 items-center\">\n              <span class=\"w-24 text-sm\">Client Secret</span>\n              <span i18n>Set</span>\n            </div>\n            <button mat-button (click)=\"resetClientSecret()\">Reset</button>\n          </div>\n        </mat-list-item>\n        <mat-divider class=\"mx-3\"></mat-divider>\n        <mat-list-item>\n          <div class=\"flex items-center justify-between\">\n            <div class=\"flex flex-1 items-center\">\n              <span class=\"w-24 text-sm\">Issued At</span>\n              <span>{{ client.clientIdIssuedAt | date }}</span>\n            </div>\n          </div>\n        </mat-list-item>\n      </mat-nav-list>\n    </div>\n    <!-- wechat client -->\n    <div class=\"border border-[--rt-border-color] rounded p-3 mt-3\">\n      <div class=\"p-3 flex justify-between items-center\">\n        <span class=\"text-xl\">WeChat Client</span>\n        @if (client.weChatClient) {\n          <div class=\"flex gap-3\">\n            <button mat-flat-button class=\"max-h-8\" (click)=\"updateWeChatclient()\">\n              <mat-icon>edit</mat-icon>\n              Update\n            </button>\n            <button mat-flat-button class=\"max-h-8\" (click)=\"unBindWeChatclient()\">Delete</button>\n          </div>\n        } @else {\n          <button mat-flat-button class=\"max-h-8\" (click)=\"bindWeChatclient()\">Bind</button>\n        }\n      </div>\n      @if (client.weChatClient) {\n        <mat-nav-list>\n          <mat-list-item>\n            <div class=\"flex items-center justify-between\">\n              <div class=\"flex flex-1 items-center\">\n                <span class=\"w-24 text-sm\" i18n>#ID</span>\n                <span i18n>{{ client.id || 'Unset' }}</span>\n              </div>\n            </div>\n          </mat-list-item>\n          <mat-divider class=\"mx-3\"></mat-divider>\n          <mat-list-item>\n            <div class=\"flex items-center justify-between\">\n              <div class=\"flex flex-1 items-center\">\n                <span class=\"w-24 text-sm\" i18n>Name</span>\n                <span i18n>{{ client.weChatClient.name || 'Unset' }}</span>\n              </div>\n            </div>\n          </mat-list-item>\n          <mat-divider class=\"mx-3\"></mat-divider>\n          <mat-list-item>\n            <div class=\"flex items-center justify-between\">\n              <div class=\"flex flex-1 items-center\">\n                <span class=\"w-24 text-sm\" i18n>App Id</span>\n                <span i18n>{{ client.weChatClient.appId || 'Unset' }}</span>\n              </div>\n            </div>\n          </mat-list-item>\n          <mat-divider class=\"mx-3\"></mat-divider>\n\n          <mat-list-item>\n            <div class=\"flex items-center justify-between\">\n              <div class=\"flex flex-1 items-center\">\n                <span class=\"w-24 text-sm\" i18n>App Secret</span>\n                <span>{{ client.weChatClient.appSecret || 'Unset' }}</span>\n              </div>\n            </div>\n          </mat-list-item>\n        </mat-nav-list>\n      } @else {\n        <div class=\"p-3\">\n          <span class=\"py-11 opacity-70\" i18n>Not bound to WeChat</span>\n        </div>\n      }\n    </div>\n  }\n</div>\n" }]
+        }] });
+
+class IndexComponent {
+    clientService = inject(ClientService);
+    snackBar = inject(MatSnackBar);
+    pageEvent;
+    isLoading = false;
+    isSearch = false;
+    length = 100;
+    pageSize = 15;
+    pageSizeOptions = [5, 10, 25, 100];
+    clients = [];
+    displayedColumns = ['clientName', 'clientId', 'clientIdIssuedAt', 'actions'];
+    paginator = viewChild(MatPaginator);
+    orderOptions = [
+        {
+            key: 'clientIdIssuedAt',
+            value: 'Issued At',
+            icon: 'arrow_upward',
+            sort: 'asc',
+        },
+        {
+            key: 'clientIdIssuedAt',
+            value: 'Issued At',
+            icon: 'arrow_downward',
+            sort: 'desc',
+        },
+    ];
+    orderString = 'clientIdIssuedAt desc';
+    dataSource = new MatTableDataSource();
+    searchWord;
+    ngOnInit() {
+        this.findAll(null);
+    }
+    onClick(item) {
+        this.orderString = item.key + ' ' + item.sort;
+        this.paginator()?.firstPage();
+        this.findAll(null);
+    }
+    findAll(event) {
+        this.isLoading = true;
+        this.isSearch = false;
+        const page = event ? event.pageIndex + 1 : 1;
+        const limit = event ? event.pageSize : 15;
+        const sort = this.orderString;
+        const options = {
+            page,
+            limit,
+            sort,
+        };
+        this.clientService.find(options).subscribe({
+            next: (res) => {
+                this.clients = res.data;
+                this.dataSource.data = this.clients;
+                this.length = res.meta.pagination.count;
+                this.isLoading = false;
+            },
+            error: (error) => {
+                this.isLoading = false;
+                this.snackBar.open(error.message);
+            },
+        });
+    }
+    search(e) {
+        this.isLoading = true;
+        const word = e.target.value;
+        const options = {
+            filter: `clientName:${word}`,
+        };
+        this.clientService.find(options).subscribe({
+            next: (res) => {
+                this.clients = res.data;
+                this.dataSource.data = this.clients;
+                this.length = res.meta.pagination.count;
+                this.isLoading = false;
+            },
+            error: (error) => {
+                this.isLoading = false;
+                this.snackBar.open(error.message);
+            },
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: IndexComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: IndexComponent, isStandalone: true, selector: "rolatech-authorization-index", viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, isSignal: true }], ngImport: i0, template: "<rolatech-toolbar title=\"Clients\">\n  <button mat-icon-button routerLink=\"./create\">\n    <mat-icon>add</mat-icon>\n  </button>\n  <button mat-icon-button (click)=\"isSearch = true\">\n    <mat-icon>search</mat-icon>\n  </button>\n  <button mat-icon-button [matMenuTriggerFor]=\"beforeMenu\">\n    <mat-icon>reorder</mat-icon>\n  </button>\n  <mat-menu #beforeMenu=\"matMenu\" xPosition=\"before\">\n    @for (item of orderOptions; track item) {\n      <button mat-menu-item (click)=\"onClick(item)\">\n        <span>{{ item.value }}</span>\n        <mat-icon>{{ item.icon }}</mat-icon>\n      </button>\n    }\n  </mat-menu>\n</rolatech-toolbar>\n@if (isSearch) {\n  <mat-form-field floatLabel=\"auto\">\n    <input type=\"text\" matInput placeholder=\"Name\" (keyup.enter)=\"search($event)\" />\n    <button matSuffix mat-icon-button (click)=\"findAll(null); isSearch = false\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n}\n<div class=\"py-3\">\n  <rolatech-spinner></rolatech-spinner>\n  <table mat-table [dataSource]=\"dataSource\">\n    <!-- clientName Column -->\n    <ng-container matColumnDef=\"clientName\">\n      <th mat-header-cell *matHeaderCellDef>Name</th>\n      <td mat-cell *matCellDef=\"let item\">{{ item.clientName }}</td>\n    </ng-container>\n\n    <!-- clientId Column -->\n    <ng-container matColumnDef=\"clientId\">\n      <th mat-header-cell *matHeaderCellDef>CLIENT_ID</th>\n      <td mat-cell *matCellDef=\"let item\">{{ item.clientId }}</td>\n    </ng-container>\n\n    <!-- clientId Column -->\n    <ng-container matColumnDef=\"clientIdIssuedAt\">\n      <th mat-header-cell *matHeaderCellDef>Issued At</th>\n      <td mat-cell *matCellDef=\"let item\">{{ item.clientIdIssuedAt | date }}</td>\n    </ng-container>\n\n    <!-- actions Column -->\n    <ng-container matColumnDef=\"actions\" stickyEnd>\n      <th mat-header-cell *matHeaderCellDef class=\"actions\"></th>\n      <td mat-cell *matCellDef=\"let item\" class=\"actions\">\n        <mat-icon>navigate_next</mat-icon>\n      </td>\n    </ng-container>\n\n    <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n    <tr\n      mat-row\n      *matRowDef=\"let row; columns: displayedColumns\"\n      [routerLink]=\"['./', row.id]\"\n      class=\"cursor-pointer hover:bg-[--rt-raised-background]\"\n    ></tr>\n  </table>\n</div>\n<mat-paginator\n  #paginator\n  [length]=\"length\"\n  [pageSize]=\"pageSize\"\n  [pageSizeOptions]=\"pageSizeOptions\"\n  (page)=\"pageEvent = findAll($event)\"\n  hidePageSize\n  showFirstLastButtons\n>\n</mat-paginator>\n", styles: ["mat-form-field{width:100%}table{width:100%}td.mat-column-actions{text-align:right;min-width:80px;font-size:.8rem;padding:0 28px}.mat-mdc-header-cell.actions{text-align:right;max-width:120px;width:120px;padding:0 28px}td.mat-column-clientName{min-width:128px}mat-cell:last-of-type,mat-header-cell:last-of-type,mat-footer-cell:last-of-type{text-align:right;padding-right:8px!important}\n"], dependencies: [{ kind: "ngmodule", type: AngularCommonModule }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: AngularComponentsModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i4$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i6$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i6$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i7.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: i8.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i8.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i8.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i8.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i8.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i8.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i8.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i8.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i8.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i8.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: SpinnerComponent, selector: "rolatech-spinner", inputs: ["title"] }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: IndexComponent, decorators: [{
+            type: Component,
+            args: [{ imports: [AngularCommonModule, AngularComponentsModule, SpinnerComponent, ToolbarComponent], selector: 'rolatech-authorization-index', template: "<rolatech-toolbar title=\"Clients\">\n  <button mat-icon-button routerLink=\"./create\">\n    <mat-icon>add</mat-icon>\n  </button>\n  <button mat-icon-button (click)=\"isSearch = true\">\n    <mat-icon>search</mat-icon>\n  </button>\n  <button mat-icon-button [matMenuTriggerFor]=\"beforeMenu\">\n    <mat-icon>reorder</mat-icon>\n  </button>\n  <mat-menu #beforeMenu=\"matMenu\" xPosition=\"before\">\n    @for (item of orderOptions; track item) {\n      <button mat-menu-item (click)=\"onClick(item)\">\n        <span>{{ item.value }}</span>\n        <mat-icon>{{ item.icon }}</mat-icon>\n      </button>\n    }\n  </mat-menu>\n</rolatech-toolbar>\n@if (isSearch) {\n  <mat-form-field floatLabel=\"auto\">\n    <input type=\"text\" matInput placeholder=\"Name\" (keyup.enter)=\"search($event)\" />\n    <button matSuffix mat-icon-button (click)=\"findAll(null); isSearch = false\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n}\n<div class=\"py-3\">\n  <rolatech-spinner></rolatech-spinner>\n  <table mat-table [dataSource]=\"dataSource\">\n    <!-- clientName Column -->\n    <ng-container matColumnDef=\"clientName\">\n      <th mat-header-cell *matHeaderCellDef>Name</th>\n      <td mat-cell *matCellDef=\"let item\">{{ item.clientName }}</td>\n    </ng-container>\n\n    <!-- clientId Column -->\n    <ng-container matColumnDef=\"clientId\">\n      <th mat-header-cell *matHeaderCellDef>CLIENT_ID</th>\n      <td mat-cell *matCellDef=\"let item\">{{ item.clientId }}</td>\n    </ng-container>\n\n    <!-- clientId Column -->\n    <ng-container matColumnDef=\"clientIdIssuedAt\">\n      <th mat-header-cell *matHeaderCellDef>Issued At</th>\n      <td mat-cell *matCellDef=\"let item\">{{ item.clientIdIssuedAt | date }}</td>\n    </ng-container>\n\n    <!-- actions Column -->\n    <ng-container matColumnDef=\"actions\" stickyEnd>\n      <th mat-header-cell *matHeaderCellDef class=\"actions\"></th>\n      <td mat-cell *matCellDef=\"let item\" class=\"actions\">\n        <mat-icon>navigate_next</mat-icon>\n      </td>\n    </ng-container>\n\n    <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n    <tr\n      mat-row\n      *matRowDef=\"let row; columns: displayedColumns\"\n      [routerLink]=\"['./', row.id]\"\n      class=\"cursor-pointer hover:bg-[--rt-raised-background]\"\n    ></tr>\n  </table>\n</div>\n<mat-paginator\n  #paginator\n  [length]=\"length\"\n  [pageSize]=\"pageSize\"\n  [pageSizeOptions]=\"pageSizeOptions\"\n  (page)=\"pageEvent = findAll($event)\"\n  hidePageSize\n  showFirstLastButtons\n>\n</mat-paginator>\n", styles: ["mat-form-field{width:100%}table{width:100%}td.mat-column-actions{text-align:right;min-width:80px;font-size:.8rem;padding:0 28px}.mat-mdc-header-cell.actions{text-align:right;max-width:120px;width:120px;padding:0 28px}td.mat-column-clientName{min-width:128px}mat-cell:last-of-type,mat-header-cell:last-of-type,mat-footer-cell:last-of-type{text-align:right;padding-right:8px!important}\n"] }]
+        }] });
+
+const clientsRoutes = [
+    {
+        path: '',
+        component: IndexComponent,
+    },
+    {
+        path: 'create',
+        component: CreateComponent,
+    },
+    {
+        path: ':id',
+        component: DetailsComponent,
+    },
+];
+
+export { clientsRoutes as default };
+//# sourceMappingURL=rolatech-angular-authorization-clients.routes-CJToHkIB.mjs.map