@rolatech/angular-user 19.0.0-beta.18 → 19.1.0-beta.3

package/fesm2022/rolatech-angular-user.mjs

@@ -1,29 +1,424 @@
 import * as i0 from '@angular/core';
-import { Injectable, inject, model, effect, Component, ViewEncapsulation, input, output, HostBinding, signal } from '@angular/core';
-import { BaseComponent, AvatarComponent, ContainerComponent, TabsComponent, TabComponent, RichViewComponent, RichItemComponent, EmptyComponent, ToolbarComponent } from '@rolatech/angular-components';
-import { AuthService, AuthUserService } from '@rolatech/angular-auth';
-import { BehaviorSubject } from 'rxjs';
-import * as i2 from '@angular/material/button';
+import { inject, Component, viewChild, input, Injectable, model, effect, ViewEncapsulation, output, HostBinding, signal } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { BaseComponent, ContainerComponent, ToolbarComponent, RichLabelComponent, EmptyComponent, AcceptDialogComponent, RejectDialogComponent, PdfViewerComponent, TabsComponent, TabComponent, AvatarComponent, RichViewComponent, RichItemComponent } from '@rolatech/angular-components';
+import { AuthAgentService, AuthUserService, AuthService } from '@rolatech/angular-auth';
+import * as i1 from '@angular/material/form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import * as i2 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
+import * as i3 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import * as i2$1 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
-import * as i1 from '@angular/material/icon';
+import * as i5 from '@angular/material/progress-spinner';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import * as i1$1 from '@angular/material/paginator';
+import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
+import * as i3$1 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
+import * as i4 from '@angular/material/menu';
+import { MatMenuModule } from '@angular/material/menu';
 import { RouterLink, RouterOutlet, ActivatedRoute } from '@angular/router';
+import { BehaviorSubject } from 'rxjs';
 import { CourseService } from '@rolatech/angular-course';
-import { CommonModule } from '@angular/common';
 import { ProductService } from '@rolatech/angular-services';
 import { Title } from '@angular/platform-browser';
 import { map } from 'lodash';
 
+var AgentApplicationStatus;
+(function (AgentApplicationStatus) {
+    AgentApplicationStatus["PENDING"] = "Pending";
+    AgentApplicationStatus["APPROVED"] = "Approved";
+    AgentApplicationStatus["REJECTED"] = "Rejected";
+})(AgentApplicationStatus || (AgentApplicationStatus = {}));
+
+class AgentApplicationDetailComponent extends BaseComponent {
+    authAgentService = inject(AuthAgentService);
+    application = {
+        firstName: '',
+        lastName: '',
+        email: '',
+        phone: '',
+        businessName: '',
+        website: '',
+    };
+    applicationStatus = AgentApplicationStatus;
+    ngOnInit() {
+        this.getApplication();
+    }
+    getApplication() {
+        this.authAgentService.myApplication().subscribe({
+            next: (res) => {
+                this.application = res.data;
+            },
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: AgentApplicationDetailComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: AgentApplicationDetailComponent, isStandalone: true, selector: "rolatech-agent-application-detail", usesInheritance: true, ngImport: i0, template: "<rolatech-container>\n  <rolatech-toolbar title=\"My application\" large>\n    <div class=\"text-lg font-bold\">\n      {{ applicationStatus[application.status] }}\n    </div>\n  </rolatech-toolbar>\n\n  <div>\n    <hr class=\"my-3\" />\n    <div>\n      <div class=\"text-lg font-bold py-2\" i18n>Application details</div>\n      <div class=\"flex overflow-x-scroll scrollbar-hide\">\n        <div class=\"flex flex-col w-full\">\n          <rolatech-rich-label label=\"FirstName\" [title]=\"application.firstName\"></rolatech-rich-label>\n          <rolatech-rich-label label=\"Email\" [title]=\"application.email\"></rolatech-rich-label>\n          <rolatech-rich-label label=\"Phone\" [title]=\"application.phone\"></rolatech-rich-label>\n          <rolatech-rich-label label=\"Business Name\" [title]=\"application.businessName\"></rolatech-rich-label>\n          <rolatech-rich-label label=\"Experience Years\" [title]=\"application.experienceYears\"></rolatech-rich-label>\n          <rolatech-rich-label label=\"Created At\" [title]=\"application.createdAt\"></rolatech-rich-label>\n        </div>\n      </div>\n      <hr class=\"my-3\" />\n    </div>\n    <div>\n      <div class=\"text-lg font-bold py-2\" i18n>Documents</div>\n      @if (application.documents?.length > 0) {\n        @for (item of application.documents; track $index) {\n          <a class=\"underline underline-offset-4\" [href]=\"item\" target=\"_blank\">Document: {{ $index + 1 }}</a>\n        }\n      } @else {\n        <rolatech-empty></rolatech-empty>\n      }\n    </div>\n  </div>\n</rolatech-container>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ContainerComponent, selector: "rolatech-container" }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "component", type: RichLabelComponent, selector: "rolatech-rich-label", inputs: ["label", "title"] }, { kind: "component", type: EmptyComponent, selector: "rolatech-empty" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: AgentApplicationDetailComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-agent-application-detail', imports: [CommonModule, ContainerComponent, ToolbarComponent, RichLabelComponent, EmptyComponent], template: "<rolatech-container>\n  <rolatech-toolbar title=\"My application\" large>\n    <div class=\"text-lg font-bold\">\n      {{ applicationStatus[application.status] }}\n    </div>\n  </rolatech-toolbar>\n\n  <div>\n    <hr class=\"my-3\" />\n    <div>\n      <div class=\"text-lg font-bold py-2\" i18n>Application details</div>\n      <div class=\"flex overflow-x-scroll scrollbar-hide\">\n        <div class=\"flex flex-col w-full\">\n          <rolatech-rich-label label=\"FirstName\" [title]=\"application.firstName\"></rolatech-rich-label>\n          <rolatech-rich-label label=\"Email\" [title]=\"application.email\"></rolatech-rich-label>\n          <rolatech-rich-label label=\"Phone\" [title]=\"application.phone\"></rolatech-rich-label>\n          <rolatech-rich-label label=\"Business Name\" [title]=\"application.businessName\"></rolatech-rich-label>\n          <rolatech-rich-label label=\"Experience Years\" [title]=\"application.experienceYears\"></rolatech-rich-label>\n          <rolatech-rich-label label=\"Created At\" [title]=\"application.createdAt\"></rolatech-rich-label>\n        </div>\n      </div>\n      <hr class=\"my-3\" />\n    </div>\n    <div>\n      <div class=\"text-lg font-bold py-2\" i18n>Documents</div>\n      @if (application.documents?.length > 0) {\n        @for (item of application.documents; track $index) {\n          <a class=\"underline underline-offset-4\" [href]=\"item\" target=\"_blank\">Document: {{ $index + 1 }}</a>\n        }\n      } @else {\n        <rolatech-empty></rolatech-empty>\n      }\n    </div>\n  </div>\n</rolatech-container>\n" }]
+        }] });
+
+class AgentApplicationComponent extends BaseComponent {
+    authAgentService = inject(AuthAgentService);
+    application = {
+        firstName: '',
+        lastName: '',
+        email: '',
+        phone: '',
+        businessName: '',
+        website: '',
+    };
+    selectedFiles = [];
+    sending = false;
+    ngOnInit() {
+        this.getApplication();
+    }
+    getApplication() {
+        this.authAgentService.myApplication().subscribe({
+            next: (res) => {
+                this.application = res.data;
+                if (res.data) {
+                    this.router.navigate([`./${res.data.id}`], {
+                        relativeTo: this.route,
+                    });
+                }
+            },
+        });
+    }
+    onFileSelected(event) {
+        const input = event.target;
+        if (input?.files?.length) {
+            this.selectedFiles = Array.from(input.files);
+        }
+    }
+    submitApplication() {
+        this.sending = true;
+        const formData = new FormData();
+        formData.append('application', new Blob([JSON.stringify(this.application)], { type: 'application/json' }));
+        for (const file of this.selectedFiles) {
+            formData.append('documents', file);
+        }
+        this.authAgentService.apply(formData).subscribe({
+            next: (res) => {
+                this.sending = false;
+                this.snackBarService.open('Sent successfully');
+                this.router.navigate([`./${res.data.id}`], {
+                    relativeTo: this.route,
+                });
+            },
+            error: (error) => {
+                this.sending = false;
+                this.snackBarService.open(error.message);
+            },
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: AgentApplicationComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: AgentApplicationComponent, isStandalone: true, selector: "rolatech-agent-application", usesInheritance: true, ngImport: i0, template: "<section id=\"application\" class=\"p-10\">\n  <h2 class=\"text-2xl font-semibold text-center mb-6\">Agent Application Form</h2>\n  <form class=\"max-w-2xl mx-auto space-y-4\" (submit)=\"submitApplication()\">\n    <mat-form-field class=\"w-full\">\n      <mat-label>First Name</mat-label>\n      <input matInput [(ngModel)]=\"application.firstName\" name=\"firstName\" required />\n    </mat-form-field>\n\n    <mat-form-field class=\"w-full\">\n      <mat-label>Last Name</mat-label>\n      <input matInput [(ngModel)]=\"application.lastName\" name=\"lastName\" required />\n    </mat-form-field>\n\n    <mat-form-field class=\"w-full\">\n      <mat-label>Email Address</mat-label>\n      <input matInput [(ngModel)]=\"application.email\" name=\"email\" type=\"email\" required />\n    </mat-form-field>\n\n    <mat-form-field class=\"w-full\">\n      <mat-label>Phone Number</mat-label>\n      <input matInput [(ngModel)]=\"application.phone\" name=\"phone\" type=\"tel\" required />\n    </mat-form-field>\n\n    <mat-form-field class=\"w-full\">\n      <mat-label>Business Name</mat-label>\n      <input matInput [(ngModel)]=\"application.businessName\" name=\"businessName\" required />\n    </mat-form-field>\n\n    <mat-form-field class=\"w-full\">\n      <mat-label>WebSite</mat-label>\n      <input matInput [(ngModel)]=\"application.website\" name=\"website\" />\n    </mat-form-field>\n\n    <mat-form-field class=\"w-full\">\n      <mat-label>Experience Years</mat-label>\n      <input matInput [(ngModel)]=\"application.experienceYears\" name=\"experienceYears\" required />\n    </mat-form-field>\n\n    <div>\n      <div class=\"mb-2\">\n        <div class=\"text-xl font-bold\" i18n>Upload Certification (PDF)</div>\n        <div class=\"text-sm opacity-70\" i18n>Safeagent, UKALA, or Propertymark certification</div>\n      </div>\n      <input type=\"file\" (change)=\"onFileSelected($event)\" accept=\".pdf\" required />\n    </div>\n\n    <button mat-flat-button type=\"submit\" [disabled]=\"sending\">\n      <span style=\"display: flex; align-items: center\">\n        @if (sending) {\n          <mat-progress-spinner diameter=\"20\" mode=\"indeterminate\" [style.marginRight.px]=\"8\"></mat-progress-spinner>\n        }\n        {{ sending ? 'Requesting...' : 'Submit Application' }}\n      </span>\n    </button>\n    <!-- <button mat-flat-button type=\"submit\">Submit Application</button> -->\n  </form>\n</section>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.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: FormsModule }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.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: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i5.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: AgentApplicationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-agent-application', imports: [CommonModule, MatFormFieldModule, MatInputModule, FormsModule, MatButtonModule, MatProgressSpinnerModule], template: "<section id=\"application\" class=\"p-10\">\n  <h2 class=\"text-2xl font-semibold text-center mb-6\">Agent Application Form</h2>\n  <form class=\"max-w-2xl mx-auto space-y-4\" (submit)=\"submitApplication()\">\n    <mat-form-field class=\"w-full\">\n      <mat-label>First Name</mat-label>\n      <input matInput [(ngModel)]=\"application.firstName\" name=\"firstName\" required />\n    </mat-form-field>\n\n    <mat-form-field class=\"w-full\">\n      <mat-label>Last Name</mat-label>\n      <input matInput [(ngModel)]=\"application.lastName\" name=\"lastName\" required />\n    </mat-form-field>\n\n    <mat-form-field class=\"w-full\">\n      <mat-label>Email Address</mat-label>\n      <input matInput [(ngModel)]=\"application.email\" name=\"email\" type=\"email\" required />\n    </mat-form-field>\n\n    <mat-form-field class=\"w-full\">\n      <mat-label>Phone Number</mat-label>\n      <input matInput [(ngModel)]=\"application.phone\" name=\"phone\" type=\"tel\" required />\n    </mat-form-field>\n\n    <mat-form-field class=\"w-full\">\n      <mat-label>Business Name</mat-label>\n      <input matInput [(ngModel)]=\"application.businessName\" name=\"businessName\" required />\n    </mat-form-field>\n\n    <mat-form-field class=\"w-full\">\n      <mat-label>WebSite</mat-label>\n      <input matInput [(ngModel)]=\"application.website\" name=\"website\" />\n    </mat-form-field>\n\n    <mat-form-field class=\"w-full\">\n      <mat-label>Experience Years</mat-label>\n      <input matInput [(ngModel)]=\"application.experienceYears\" name=\"experienceYears\" required />\n    </mat-form-field>\n\n    <div>\n      <div class=\"mb-2\">\n        <div class=\"text-xl font-bold\" i18n>Upload Certification (PDF)</div>\n        <div class=\"text-sm opacity-70\" i18n>Safeagent, UKALA, or Propertymark certification</div>\n      </div>\n      <input type=\"file\" (change)=\"onFileSelected($event)\" accept=\".pdf\" required />\n    </div>\n\n    <button mat-flat-button type=\"submit\" [disabled]=\"sending\">\n      <span style=\"display: flex; align-items: center\">\n        @if (sending) {\n          <mat-progress-spinner diameter=\"20\" mode=\"indeterminate\" [style.marginRight.px]=\"8\"></mat-progress-spinner>\n        }\n        {{ sending ? 'Requesting...' : 'Submit Application' }}\n      </span>\n    </button>\n    <!-- <button mat-flat-button type=\"submit\">Submit Application</button> -->\n  </form>\n</section>\n" }]
+        }] });
+
+class UserIndexComponent extends BaseComponent {
+    authUserService = inject(AuthUserService);
+    paginator = viewChild(MatPaginator);
+    users = [];
+    pageEvent;
+    isLoading = false;
+    isSearch = false;
+    length = 100;
+    pageSize = 15;
+    pageSizeOptions = [5, 10, 25, 100];
+    orderOptions = [
+        {
+            key: 'createdAt',
+            value: 'Created At',
+            icon: 'arrow_upward',
+            sort: 'asc',
+        },
+        {
+            key: 'createdAt',
+            value: 'Created At',
+            icon: 'arrow_downward',
+            sort: 'desc',
+        },
+    ];
+    orderString = 'createdAt desc';
+    ngOnInit() {
+        this.findAll();
+    }
+    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.authUserService.findAll(options).subscribe({
+            next: (res) => {
+                this.users = res.data;
+                this.length = res.meta.pagination.count;
+                this.isLoading = false;
+            },
+            error: (error) => {
+                this.isLoading = false;
+                this.snackBarService.open(error.message);
+            },
+        });
+    }
+    search(e) {
+        this.isLoading = true;
+        const word = e.target.value;
+        const options = {
+            filter: `name:${word}`,
+        };
+        this.authUserService.findAll(options).subscribe({
+            next: (res) => {
+                this.users = res.data;
+                this.length = res.meta.pagination.count;
+                this.isLoading = false;
+            },
+            error: (error) => {
+                this.isLoading = false;
+                this.snackBarService.open(error.message);
+            },
+        });
+    }
+    onClick(item) {
+        this.orderString = item.key + ' ' + item.sort;
+        this.paginator()?.firstPage();
+        this.findAll(null);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: UserIndexComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: UserIndexComponent, isStandalone: true, selector: "rolatech-user-index", viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<rolatech-toolbar title=\"Users\">\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>sort</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<div class=\"px-4\">\n  @if (isSearch) {\n    <mat-form-field floatLabel=\"auto\" subscriptSizing=\"dynamic\">\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>\n    @for (user of users; track $index) {\n      <div class=\"flex w-full justify-between items-center py-2 hover:bg-[--rt-raised-background] cursor-pointer\">\n        <div class=\"flex items-center\">\n          <div class=\"bg-[--rt-brand-color] w-12 h-12 rounded-full\">\n            @if (user.avatar) {\n              <img class=\"w-12 h-12 object-cover rounded-full\" [src]=\"user.avatar\" alt=\"avatar img\" />\n            }\n          </div>\n          <div class=\"flex flex-col ml-3\">\n            <a class=\"text-lg font-bold\">\n              <span>{{ user.name }}</span>\n            </a>\n            <a class=\"text-md\">\n              <span>{{ user.username }}</span>\n            </a>\n          </div>\n        </div>\n      </div>\n      <hr />\n    }\n  </div>\n</div>\n\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%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i1$1.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i4.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: i4.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: UserIndexComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-user-index', imports: [
+                        CommonModule,
+                        ToolbarComponent,
+                        MatPaginatorModule,
+                        MatButtonModule,
+                        MatIconModule,
+                        MatMenuModule,
+                        MatFormFieldModule,
+                        MatInputModule,
+                    ], template: "<rolatech-toolbar title=\"Users\">\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>sort</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<div class=\"px-4\">\n  @if (isSearch) {\n    <mat-form-field floatLabel=\"auto\" subscriptSizing=\"dynamic\">\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>\n    @for (user of users; track $index) {\n      <div class=\"flex w-full justify-between items-center py-2 hover:bg-[--rt-raised-background] cursor-pointer\">\n        <div class=\"flex items-center\">\n          <div class=\"bg-[--rt-brand-color] w-12 h-12 rounded-full\">\n            @if (user.avatar) {\n              <img class=\"w-12 h-12 object-cover rounded-full\" [src]=\"user.avatar\" alt=\"avatar img\" />\n            }\n          </div>\n          <div class=\"flex flex-col ml-3\">\n            <a class=\"text-lg font-bold\">\n              <span>{{ user.name }}</span>\n            </a>\n            <a class=\"text-md\">\n              <span>{{ user.username }}</span>\n            </a>\n          </div>\n        </div>\n      </div>\n      <hr />\n    }\n  </div>\n</div>\n\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%}\n"] }]
+        }] });
+
+class AgentManageApplicationDetailComponent extends BaseComponent {
+    authAgentService = inject(AuthAgentService);
+    application;
+    status = AgentApplicationStatus;
+    ngOnInit() {
+        this.getApplication();
+    }
+    getApplication() {
+        this.authAgentService.getApplication(this.id).subscribe({
+            next: (res) => {
+                this.application = res.data;
+            },
+        });
+    }
+    approve() {
+        const dialogRef = this.dialog.open(AcceptDialogComponent, {
+            width: '400px',
+            data: {
+                title: 'Approve',
+                message: 'Approve this agent application?',
+            },
+        });
+        dialogRef.afterClosed().subscribe((result) => {
+            if (result) {
+                this.authAgentService.approve(this.id).subscribe({
+                    next: (res) => {
+                        console.log(res);
+                        // this.application.status = 'APPROVED';
+                        // this.application.status = AgentApplicationStatus['APPROVED' as keyof typeof AgentApplicationStatus];
+                        this.application.status = 'APPROVED';
+                        this.snackBarService.open('Approved');
+                    },
+                    error: (e) => {
+                        this.snackBarService.open(e.message);
+                    },
+                });
+            }
+        });
+    }
+    reject() {
+        const dialogRef = this.dialog.open(RejectDialogComponent, {
+            width: '400px',
+            data: {
+                content: '',
+            },
+        });
+        dialogRef.afterClosed().subscribe((result) => {
+            if (result) {
+                this.authAgentService.reject(this.id, result).subscribe({
+                    next: (res) => {
+                        this.application.status = 'REJECTED';
+                        this.snackBarService.open('Rejected');
+                    },
+                    error: (e) => {
+                        this.snackBarService.open(e.message);
+                    },
+                });
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: AgentManageApplicationDetailComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: AgentManageApplicationDetailComponent, isStandalone: true, selector: "rolatech-agent-manage-application-detail", usesInheritance: true, ngImport: i0, template: "@if (application) {\n  <rolatech-toolbar [title]=\"status[application.status]\" large link=\"../../\">\n    @if (application.status.toString() === 'PENDING') {\n      <button mat-flat-button (click)=\"approve()\" i18n>Approve</button>\n      <button mat-button (click)=\"reject()\" i18n>Reject</button>\n    }\n  </rolatech-toolbar>\n  <div class=\"px-4\">\n    <div>\n      <div class=\"text-lg font-bold py-2\">User details</div>\n      <div class=\"flex\">\n        <div class=\"bg-[--rt-brand-color] min-w-12 max-h-12 rounded-full mr-3\">\n          @if (application.user.avatar) {\n            <img class=\"w-12 h-12 object-cover rounded-full\" [src]=\"application.user.avatar\" alt=\"avatar img\" />\n          }\n        </div>\n        <div class=\"flex flex-col w-full\">\n          @if (application.user.firstName) {\n            <div>{{ application.user.firstName }}, {{ application.user.lastName }}</div>\n          } @else {\n            @if (application.user.name) {\n              <div>{{ application.user.name }}</div>\n            }\n          }\n          <div class=\"inline-flex gap-1 mt-2\">\n            <div>\n              <span i18n>Phone: </span>\n              <span class=\"mr-1\">{{ application.phone }}</span>\n            </div>\n            <div>\n              <span i18n>Email: </span>\n              <span class=\"mr-1\">{{ application.email }}</span>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n    <hr class=\"my-3\" />\n    <div>\n      <div class=\"text-lg font-bold py-2\">Application details</div>\n      <div class=\"flex overflow-x-scroll scrollbar-hide\">\n        <div class=\"flex flex-col w-full\">\n          <rolatech-rich-label label=\"Business Name\" [title]=\"application.businessName\"></rolatech-rich-label>\n          <rolatech-rich-label label=\"Experience Years\" [title]=\"application.experienceYears\"></rolatech-rich-label>\n          <rolatech-rich-label label=\"Created At\" [title]=\"application.createdAt\"></rolatech-rich-label>\n        </div>\n      </div>\n      <hr class=\"my-3\" />\n    </div>\n    <div>\n      <div class=\"text-lg font-bold py-2\">Documents</div>\n      @if (application.documents.length > 0) {\n        @for (item of application.documents; track $index) {\n          <a class=\"underline underline-offset-4\" [href]=\"item\" target=\"_blank\">Document: {{ $index + 1 }}</a>\n        }\n      } @else {\n        <rolatech-empty></rolatech-empty>\n      }\n    </div>\n  </div>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.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: RichLabelComponent, selector: "rolatech-rich-label", inputs: ["label", "title"] }, { kind: "component", type: EmptyComponent, selector: "rolatech-empty" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: AgentManageApplicationDetailComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-agent-manage-application-detail', imports: [CommonModule, ToolbarComponent, MatButtonModule, RichLabelComponent, EmptyComponent], template: "@if (application) {\n  <rolatech-toolbar [title]=\"status[application.status]\" large link=\"../../\">\n    @if (application.status.toString() === 'PENDING') {\n      <button mat-flat-button (click)=\"approve()\" i18n>Approve</button>\n      <button mat-button (click)=\"reject()\" i18n>Reject</button>\n    }\n  </rolatech-toolbar>\n  <div class=\"px-4\">\n    <div>\n      <div class=\"text-lg font-bold py-2\">User details</div>\n      <div class=\"flex\">\n        <div class=\"bg-[--rt-brand-color] min-w-12 max-h-12 rounded-full mr-3\">\n          @if (application.user.avatar) {\n            <img class=\"w-12 h-12 object-cover rounded-full\" [src]=\"application.user.avatar\" alt=\"avatar img\" />\n          }\n        </div>\n        <div class=\"flex flex-col w-full\">\n          @if (application.user.firstName) {\n            <div>{{ application.user.firstName }}, {{ application.user.lastName }}</div>\n          } @else {\n            @if (application.user.name) {\n              <div>{{ application.user.name }}</div>\n            }\n          }\n          <div class=\"inline-flex gap-1 mt-2\">\n            <div>\n              <span i18n>Phone: </span>\n              <span class=\"mr-1\">{{ application.phone }}</span>\n            </div>\n            <div>\n              <span i18n>Email: </span>\n              <span class=\"mr-1\">{{ application.email }}</span>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n    <hr class=\"my-3\" />\n    <div>\n      <div class=\"text-lg font-bold py-2\">Application details</div>\n      <div class=\"flex overflow-x-scroll scrollbar-hide\">\n        <div class=\"flex flex-col w-full\">\n          <rolatech-rich-label label=\"Business Name\" [title]=\"application.businessName\"></rolatech-rich-label>\n          <rolatech-rich-label label=\"Experience Years\" [title]=\"application.experienceYears\"></rolatech-rich-label>\n          <rolatech-rich-label label=\"Created At\" [title]=\"application.createdAt\"></rolatech-rich-label>\n        </div>\n      </div>\n      <hr class=\"my-3\" />\n    </div>\n    <div>\n      <div class=\"text-lg font-bold py-2\">Documents</div>\n      @if (application.documents.length > 0) {\n        @for (item of application.documents; track $index) {\n          <a class=\"underline underline-offset-4\" [href]=\"item\" target=\"_blank\">Document: {{ $index + 1 }}</a>\n        }\n      } @else {\n        <rolatech-empty></rolatech-empty>\n      }\n    </div>\n  </div>\n}\n" }]
+        }] });
+
+class AgentApplicationItemComponent {
+    application = input.required();
+    status = AgentApplicationStatus;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: AgentApplicationItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: AgentApplicationItemComponent, isStandalone: true, selector: "rolatech-agent-application-item", inputs: { application: { classPropertyName: "application", publicName: "application", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"flex flex-col hover:bg-[--rt-raised-background] cursor-pointer p-3\">\n  <div class=\"flex justify-between w-full mb-2\">\n    <a class=\"flex items-center gap-3\">\n      <span>Application ID: {{ application().id }}</span>\n    </a>\n    <span class=\"font-medium text-sm\">{{ status[application().status] }}</span>\n  </div>\n  <div class=\"flex overflow-x-scroll scrollbar-hide\">\n    <div class=\"bg-[--rt-brand-color] min-w-12 max-h-12 rounded-full mr-3\">\n      @if (application().user.avatar) {\n        <img class=\"w-12 h-12 object-cover rounded-full\" [src]=\"application().user.avatar\" alt=\"avatar img\" />\n      }\n    </div>\n    <div class=\"flex flex-col w-full\">\n      <div>{{ application().businessName }}</div>\n      <div class=\"inline-flex gap-1 mt-2\">\n        <div>\n          <span i18n>Phone: </span>\n          <span class=\"mr-1\">{{ application().experienceYears }}</span>\n        </div>\n        <div>\n          <span i18n>Email: </span>\n          <span class=\"mr-1\">{{ application().user.email }}</span>\n        </div>\n      </div>\n      <div class=\"flex justify-end\">\n        <span class=\"text-sm opacity-70\">{{ application().createdAt }}</span>\n      </div>\n    </div>\n  </div>\n  <hr />\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatIconModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: AgentApplicationItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-agent-application-item', imports: [MatIconModule], template: "<div class=\"flex flex-col hover:bg-[--rt-raised-background] cursor-pointer p-3\">\n  <div class=\"flex justify-between w-full mb-2\">\n    <a class=\"flex items-center gap-3\">\n      <span>Application ID: {{ application().id }}</span>\n    </a>\n    <span class=\"font-medium text-sm\">{{ status[application().status] }}</span>\n  </div>\n  <div class=\"flex overflow-x-scroll scrollbar-hide\">\n    <div class=\"bg-[--rt-brand-color] min-w-12 max-h-12 rounded-full mr-3\">\n      @if (application().user.avatar) {\n        <img class=\"w-12 h-12 object-cover rounded-full\" [src]=\"application().user.avatar\" alt=\"avatar img\" />\n      }\n    </div>\n    <div class=\"flex flex-col w-full\">\n      <div>{{ application().businessName }}</div>\n      <div class=\"inline-flex gap-1 mt-2\">\n        <div>\n          <span i18n>Phone: </span>\n          <span class=\"mr-1\">{{ application().experienceYears }}</span>\n        </div>\n        <div>\n          <span i18n>Email: </span>\n          <span class=\"mr-1\">{{ application().user.email }}</span>\n        </div>\n      </div>\n      <div class=\"flex justify-end\">\n        <span class=\"text-sm opacity-70\">{{ application().createdAt }}</span>\n      </div>\n    </div>\n  </div>\n  <hr />\n</div>\n" }]
+        }] });
+
+class AgentManageApplicationIndexComponent extends BaseComponent {
+    authAgentService = inject(AuthAgentService);
+    applications = [];
+    select = 0;
+    links = [
+        {
+            name: 'All',
+            icon: 'dashboard',
+        },
+        {
+            name: 'Pending',
+            icon: 'category',
+            status: 'pending',
+        },
+        {
+            name: 'Approved',
+            icon: 'category',
+            status: 'approved',
+        },
+        {
+            name: 'Rejected',
+            icon: 'category',
+            status: 'rejected',
+        },
+    ];
+    filterOptions = {
+        type: '',
+        status: '',
+    };
+    ngOnInit() {
+        this.route.queryParams.subscribe(({ status }) => {
+            this.select = this.links.findIndex((item) => item.status === status);
+            if (status) {
+                this.filterOptions.status = status.toUpperCase();
+            }
+            else {
+                delete this.filterOptions.status;
+            }
+            this.findApplications();
+        });
+    }
+    findApplications() {
+        const options = {
+            sort: 'updatedAt desc',
+        };
+        const filterString = this.convertFilterOptions(this.filterOptions);
+        if (filterString) {
+            options['filter'] = filterString;
+        }
+        this.authAgentService.findAllApplications(options).subscribe({
+            next: (res) => {
+                this.applications = res.data;
+            },
+        });
+    }
+    convertFilterOptions(jsonObj) {
+        return Object.entries(jsonObj)
+            .filter(([key, value]) => value !== '' && value !== undefined)
+            .map(([key, value]) => {
+            return `${key}:${value}`;
+        })
+            .join(',');
+    }
+    viewPdf(url) {
+        console.log(url);
+        const options = {
+            title: '',
+            component: PdfViewerComponent,
+            data: {
+                url: url,
+            },
+        };
+        this.dialogService.open(options);
+        this.dialogService.confirmed();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: AgentManageApplicationIndexComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: AgentManageApplicationIndexComponent, isStandalone: true, selector: "rolatech-agent-manage-application-index", usesInheritance: true, ngImport: i0, template: "<rolatech-toolbar title=\"Applications\">\n  <div class=\"flex items-center gap-2\"></div>\n</rolatech-toolbar>\n<rolatech-tabs [select]=\"select\">\n  @for (item of links; track item) {\n    @if (item.status) {\n      <rolatech-tab [label]=\"item.name\" routerLink=\"./\" [queryParams]=\"{ status: item.status }\"></rolatech-tab>\n    } @else {\n      <rolatech-tab [label]=\"item.name\" routerLink=\"./\"></rolatech-tab>\n    }\n  }\n</rolatech-tabs>\n<div>\n  @if (applications) {\n    @for (application of applications; track $index) {\n      <rolatech-agent-application-item\n        [application]=\"application\"\n        [routerLink]=\"['./', application.id]\"\n      ></rolatech-agent-application-item>\n    }\n  } @else {\n    <rolatech-empty></rolatech-empty>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "component", type: TabsComponent, selector: "rolatech-tabs", inputs: ["select", "loading"], outputs: ["selectChange"] }, { kind: "component", type: TabComponent, selector: "rolatech-tab", inputs: ["label"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: AgentApplicationItemComponent, selector: "rolatech-agent-application-item", inputs: ["application"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: EmptyComponent, selector: "rolatech-empty" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: AgentManageApplicationIndexComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rolatech-agent-manage-application-index', imports: [
+                        CommonModule,
+                        ToolbarComponent,
+                        TabsComponent,
+                        TabComponent,
+                        MatButtonModule,
+                        MatIconModule,
+                        AgentApplicationItemComponent,
+                        RouterLink,
+                        EmptyComponent,
+                    ], template: "<rolatech-toolbar title=\"Applications\">\n  <div class=\"flex items-center gap-2\"></div>\n</rolatech-toolbar>\n<rolatech-tabs [select]=\"select\">\n  @for (item of links; track item) {\n    @if (item.status) {\n      <rolatech-tab [label]=\"item.name\" routerLink=\"./\" [queryParams]=\"{ status: item.status }\"></rolatech-tab>\n    } @else {\n      <rolatech-tab [label]=\"item.name\" routerLink=\"./\"></rolatech-tab>\n    }\n  }\n</rolatech-tabs>\n<div>\n  @if (applications) {\n    @for (application of applications; track $index) {\n      <rolatech-agent-application-item\n        [application]=\"application\"\n        [routerLink]=\"['./', application.id]\"\n      ></rolatech-agent-application-item>\n    }\n  } @else {\n    <rolatech-empty></rolatech-empty>\n  }\n</div>\n" }]
+        }] });
+
+const agentManageApplicationRoutes = [
+    {
+        path: '',
+        component: AgentManageApplicationIndexComponent,
+    },
+    {
+        path: ':id',
+        component: AgentManageApplicationDetailComponent,
+    },
+];
+
+const agentRoutes = [
+    {
+        path: 'application',
+        component: AgentApplicationComponent,
+    },
+    {
+        path: 'application/:id',
+        component: AgentApplicationDetailComponent,
+    },
+];
+
 class UserDataService {
     userInfo = new BehaviorSubject(null);
     data = this.userInfo.asObservable();
     send(data) {
         this.userInfo.next(data);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: UserDataService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: UserDataService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: UserDataService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: UserDataService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: UserDataService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: UserDataService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -106,10 +501,10 @@ class UserLayoutComponent extends BaseComponent {
             },
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: UserLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: UserLayoutComponent, isStandalone: true, selector: "rolatech-user-layout", inputs: { selectIndex: { classPropertyName: "selectIndex", publicName: "selectIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectIndex: "selectIndexChange" }, usesInheritance: true, ngImport: i0, template: "<rolatech-container>\n  @if (userInfo) {\n    <div>\n      <div class=\"h-8\"></div>\n      <div class=\"flex\">\n        <div\n          class=\"w-[80px] h-[80px] md:w-36 md:h-36 sm:w-28 sm:h-28 rounded-full border-white mr-4 bg-[--rt-raised-background]\"\n        >\n          @defer {\n            <rolatech-avatar [src]=\"userInfo.avatar + '!w400'\" size=\"full\"> </rolatech-avatar>\n          }\n        </div>\n        <div class=\"flex flex-col flex-grow\">\n          <div class=\"flex justify-between items-center sm:mt-1\">\n            <div class=\"flex items-center gap-2\">\n              <div class=\"text-xl md:text-2xl font-medium\">\n                <span>{{ userInfo.name }}</span>\n              </div>\n              <mat-icon color=\"primary\">verified</mat-icon>\n            </div>\n            <div>\n              @if (isFollowed) {\n                <button mat-flat-button (click)=\"unfollow()\" class=\"w-28 max-h-8\">\u53D6\u6D88\u5173\u6CE8</button>\n              } @else {\n                <button mat-flat-button (click)=\"follow()\" class=\"w-28 max-h-8\">\u5173\u6CE8</button>\n              }\n            </div>\n          </div>\n          <div class=\"text-sm text-[--rt-text-secondary]\">\n            <div class=\"flex gap-3 py-2 items-center\">\n              <a>\n                <span>&#64;{{ userInfo.username }}</span>\n              </a>\n              <a class=\"cursor-pointer hover:text-orange-600\" [routerLink]=\"['./following']\">\n                <span class=\"font-bold\">{{ statsData?.following }}</span>\n                <span class=\"ml-1\">\u5173\u6CE8</span>\n              </a>\n              <a class=\"cursor-pointer hover:text-orange-600\" [routerLink]=\"['./followers']\">\n                <span class=\"font-bold\">{{ statsData?.followers }}</span>\n                <span class=\"ml-1\">\u7C89\u4E1D</span>\n              </a>\n            </div>\n            <div class=\"mb-3\">\n              <div>\n                {{ userInfo.bio }}\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\"py-2\">\n        <rolatech-tabs [(select)]=\"selectIndex\" ngSkipHydration>\n          <rolatech-tab label=\"\u8BFE\u7A0B\" routerLink=\"./\"></rolatech-tab>\n          <rolatech-tab label=\"\u793E\u533A\" routerLink=\"./community\"></rolatech-tab>\n          <rolatech-tab label=\"\u5546\u54C1\" routerLink=\"./store\"></rolatech-tab>\n        </rolatech-tabs>\n      </div>\n\n      <router-outlet></router-outlet>\n    </div>\n  }\n</rolatech-container>\n", styles: ["mat-icon{transform:scale(.8);color:var(--rt-brand-color)}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: ContainerComponent, selector: "rolatech-container" }, { kind: "component", type: TabsComponent, selector: "rolatech-tabs", inputs: ["select", "loading"], outputs: ["selectChange"] }, { kind: "component", type: TabComponent, selector: "rolatech-tab", inputs: ["label"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }], deferBlockDependencies: [() => [AvatarComponent]] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: UserLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: UserLayoutComponent, isStandalone: true, selector: "rolatech-user-layout", inputs: { selectIndex: { classPropertyName: "selectIndex", publicName: "selectIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectIndex: "selectIndexChange" }, usesInheritance: true, ngImport: i0, template: "<rolatech-container>\n  @if (userInfo) {\n    <div>\n      <div class=\"h-8\"></div>\n      <div class=\"flex\">\n        <div\n          class=\"w-[80px] h-[80px] md:w-36 md:h-36 sm:w-28 sm:h-28 rounded-full border-white mr-4 bg-[--rt-raised-background]\"\n        >\n          @defer {\n            <rolatech-avatar [src]=\"userInfo.avatar + '!w400'\" size=\"full\"> </rolatech-avatar>\n          }\n        </div>\n        <div class=\"flex flex-col flex-grow\">\n          <div class=\"flex justify-between items-center sm:mt-1\">\n            <div class=\"flex items-center gap-2\">\n              <div class=\"text-xl md:text-2xl font-medium\">\n                <span>{{ userInfo.name }}</span>\n              </div>\n              <mat-icon color=\"primary\">verified</mat-icon>\n            </div>\n            <div>\n              @if (isFollowed) {\n                <button mat-flat-button (click)=\"unfollow()\" class=\"w-28 max-h-8\" i18n>Unfollow</button>\n              } @else {\n                <button mat-flat-button (click)=\"follow()\" class=\"w-28 max-h-8\" i18n>Follow</button>\n              }\n            </div>\n          </div>\n          <div class=\"text-sm text-[--rt-text-secondary]\">\n            <div class=\"flex gap-3 py-2 items-center\">\n              <a>\n                <span>&#64;{{ userInfo.username }}</span>\n              </a>\n              <a class=\"cursor-pointer hover:text-orange-600\" [routerLink]=\"['./following']\">\n                <span class=\"font-bold\">{{ statsData?.following }}</span>\n                <span class=\"ml-1\" i18n>Following</span>\n              </a>\n              <a class=\"cursor-pointer hover:text-orange-600\" [routerLink]=\"['./followers']\">\n                <span class=\"font-bold\">{{ statsData?.followers }}</span>\n                <span class=\"ml-1\" i18n>Followers</span>\n              </a>\n            </div>\n            <div class=\"mb-3\">\n              <div>\n                {{ userInfo.bio }}\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\"py-2\">\n        <rolatech-tabs [(select)]=\"selectIndex\" ngSkipHydration>\n          <rolatech-tab label=\"Course\" routerLink=\"./\"></rolatech-tab>\n          <rolatech-tab label=\"Community\" routerLink=\"./community\"></rolatech-tab>\n          <rolatech-tab label=\"Store\" routerLink=\"./store\"></rolatech-tab>\n        </rolatech-tabs>\n      </div>\n\n      <router-outlet></router-outlet>\n    </div>\n  }\n</rolatech-container>\n", styles: ["mat-icon{transform:scale(.8);color:var(--rt-brand-color)}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: ContainerComponent, selector: "rolatech-container" }, { kind: "component", type: TabsComponent, selector: "rolatech-tabs", inputs: ["select", "loading"], outputs: ["selectChange"] }, { kind: "component", type: TabComponent, selector: "rolatech-tab", inputs: ["label"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.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: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }], deferBlockDependencies: [() => [AvatarComponent]] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: UserLayoutComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: UserLayoutComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rolatech-user-layout', imports: [
                         MatIconModule,
@@ -122,7 +517,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
                         TabsComponent,
                         TabComponent,
                         RouterOutlet,
-                    ], template: "<rolatech-container>\n  @if (userInfo) {\n    <div>\n      <div class=\"h-8\"></div>\n      <div class=\"flex\">\n        <div\n          class=\"w-[80px] h-[80px] md:w-36 md:h-36 sm:w-28 sm:h-28 rounded-full border-white mr-4 bg-[--rt-raised-background]\"\n        >\n          @defer {\n            <rolatech-avatar [src]=\"userInfo.avatar + '!w400'\" size=\"full\"> </rolatech-avatar>\n          }\n        </div>\n        <div class=\"flex flex-col flex-grow\">\n          <div class=\"flex justify-between items-center sm:mt-1\">\n            <div class=\"flex items-center gap-2\">\n              <div class=\"text-xl md:text-2xl font-medium\">\n                <span>{{ userInfo.name }}</span>\n              </div>\n              <mat-icon color=\"primary\">verified</mat-icon>\n            </div>\n            <div>\n              @if (isFollowed) {\n                <button mat-flat-button (click)=\"unfollow()\" class=\"w-28 max-h-8\">\u53D6\u6D88\u5173\u6CE8</button>\n              } @else {\n                <button mat-flat-button (click)=\"follow()\" class=\"w-28 max-h-8\">\u5173\u6CE8</button>\n              }\n            </div>\n          </div>\n          <div class=\"text-sm text-[--rt-text-secondary]\">\n            <div class=\"flex gap-3 py-2 items-center\">\n              <a>\n                <span>&#64;{{ userInfo.username }}</span>\n              </a>\n              <a class=\"cursor-pointer hover:text-orange-600\" [routerLink]=\"['./following']\">\n                <span class=\"font-bold\">{{ statsData?.following }}</span>\n                <span class=\"ml-1\">\u5173\u6CE8</span>\n              </a>\n              <a class=\"cursor-pointer hover:text-orange-600\" [routerLink]=\"['./followers']\">\n                <span class=\"font-bold\">{{ statsData?.followers }}</span>\n                <span class=\"ml-1\">\u7C89\u4E1D</span>\n              </a>\n            </div>\n            <div class=\"mb-3\">\n              <div>\n                {{ userInfo.bio }}\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\"py-2\">\n        <rolatech-tabs [(select)]=\"selectIndex\" ngSkipHydration>\n          <rolatech-tab label=\"\u8BFE\u7A0B\" routerLink=\"./\"></rolatech-tab>\n          <rolatech-tab label=\"\u793E\u533A\" routerLink=\"./community\"></rolatech-tab>\n          <rolatech-tab label=\"\u5546\u54C1\" routerLink=\"./store\"></rolatech-tab>\n        </rolatech-tabs>\n      </div>\n\n      <router-outlet></router-outlet>\n    </div>\n  }\n</rolatech-container>\n", styles: ["mat-icon{transform:scale(.8);color:var(--rt-brand-color)}\n"] }]
+                    ], template: "<rolatech-container>\n  @if (userInfo) {\n    <div>\n      <div class=\"h-8\"></div>\n      <div class=\"flex\">\n        <div\n          class=\"w-[80px] h-[80px] md:w-36 md:h-36 sm:w-28 sm:h-28 rounded-full border-white mr-4 bg-[--rt-raised-background]\"\n        >\n          @defer {\n            <rolatech-avatar [src]=\"userInfo.avatar + '!w400'\" size=\"full\"> </rolatech-avatar>\n          }\n        </div>\n        <div class=\"flex flex-col flex-grow\">\n          <div class=\"flex justify-between items-center sm:mt-1\">\n            <div class=\"flex items-center gap-2\">\n              <div class=\"text-xl md:text-2xl font-medium\">\n                <span>{{ userInfo.name }}</span>\n              </div>\n              <mat-icon color=\"primary\">verified</mat-icon>\n            </div>\n            <div>\n              @if (isFollowed) {\n                <button mat-flat-button (click)=\"unfollow()\" class=\"w-28 max-h-8\" i18n>Unfollow</button>\n              } @else {\n                <button mat-flat-button (click)=\"follow()\" class=\"w-28 max-h-8\" i18n>Follow</button>\n              }\n            </div>\n          </div>\n          <div class=\"text-sm text-[--rt-text-secondary]\">\n            <div class=\"flex gap-3 py-2 items-center\">\n              <a>\n                <span>&#64;{{ userInfo.username }}</span>\n              </a>\n              <a class=\"cursor-pointer hover:text-orange-600\" [routerLink]=\"['./following']\">\n                <span class=\"font-bold\">{{ statsData?.following }}</span>\n                <span class=\"ml-1\" i18n>Following</span>\n              </a>\n              <a class=\"cursor-pointer hover:text-orange-600\" [routerLink]=\"['./followers']\">\n                <span class=\"font-bold\">{{ statsData?.followers }}</span>\n                <span class=\"ml-1\" i18n>Followers</span>\n              </a>\n            </div>\n            <div class=\"mb-3\">\n              <div>\n                {{ userInfo.bio }}\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\"py-2\">\n        <rolatech-tabs [(select)]=\"selectIndex\" ngSkipHydration>\n          <rolatech-tab label=\"Course\" routerLink=\"./\"></rolatech-tab>\n          <rolatech-tab label=\"Community\" routerLink=\"./community\"></rolatech-tab>\n          <rolatech-tab label=\"Store\" routerLink=\"./store\"></rolatech-tab>\n        </rolatech-tabs>\n      </div>\n\n      <router-outlet></router-outlet>\n    </div>\n  }\n</rolatech-container>\n", styles: ["mat-icon{transform:scale(.8);color:var(--rt-brand-color)}\n"] }]
         }], ctorParameters: () => [] });
 
 class UserInfoComponent extends BaseComponent {
@@ -152,10 +547,10 @@ class UserInfoComponent extends BaseComponent {
             },
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: UserInfoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: UserInfoComponent, isStandalone: true, selector: "rolatech-user-info", usesInheritance: true, ngImport: i0, template: "<rolatech-rich-view list>\n  @for (item of courses; track $index) {\n    <rolatech-rich-item\n      [title]=\"item.name\"\n      [thumbnail]=\"item.media[0].url + '!w400'\"\n      [price]=\"(item.pricing[0].total / 100).toFixed(2)\"\n      [routerLink]=\"['/courses', item.id]\"\n      class=\"cursor-pointer hover:bg-[--rt-raised-background]\"\n    ></rolatech-rich-item>\n  }\n</rolatech-rich-view>\n", styles: [""], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: RichViewComponent, selector: "rolatech-rich-view", inputs: ["list", "wrap"] }, { kind: "component", type: RichItemComponent, selector: "rolatech-rich-item", inputs: ["list", "thumbnail", "avatar", "title", "subtitle", "price", "thumbnailRatio"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: UserInfoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: UserInfoComponent, isStandalone: true, selector: "rolatech-user-info", usesInheritance: true, ngImport: i0, template: "<rolatech-rich-view list>\n  @for (item of courses; track $index) {\n    <rolatech-rich-item\n      [title]=\"item.name\"\n      [thumbnail]=\"item.media[0].url + '!w400'\"\n      [price]=\"(item.pricing[0].total / 100).toFixed(2)\"\n      [routerLink]=\"['/courses', item.id]\"\n      class=\"cursor-pointer hover:bg-[--rt-raised-background]\"\n    ></rolatech-rich-item>\n  }\n</rolatech-rich-view>\n", styles: [""], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: RichViewComponent, selector: "rolatech-rich-view", inputs: ["list", "wrap"] }, { kind: "component", type: RichItemComponent, selector: "rolatech-rich-item", inputs: ["list", "thumbnail", "avatar", "title", "subtitle", "price", "thumbnailRatio", "currencySymbol"] }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: UserInfoComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: UserInfoComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rolatech-user-info', imports: [RouterLink, RichViewComponent, RichItemComponent], encapsulation: ViewEncapsulation.None, template: "<rolatech-rich-view list>\n  @for (item of courses; track $index) {\n    <rolatech-rich-item\n      [title]=\"item.name\"\n      [thumbnail]=\"item.media[0].url + '!w400'\"\n      [price]=\"(item.pricing[0].total / 100).toFixed(2)\"\n      [routerLink]=\"['/courses', item.id]\"\n      class=\"cursor-pointer hover:bg-[--rt-raised-background]\"\n    ></rolatech-rich-item>\n  }\n</rolatech-rich-view>\n" }]
         }], ctorParameters: () => [] });
@@ -167,10 +562,10 @@ class UserCommunityComponent {
             next: (userInfo) => { },
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: UserCommunityComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: UserCommunityComponent, isStandalone: true, selector: "rolatech-user-community", ngImport: i0, template: "<rolatech-empty></rolatech-empty>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: EmptyComponent, selector: "rolatech-empty" }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: UserCommunityComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.3", type: UserCommunityComponent, isStandalone: true, selector: "rolatech-user-community", ngImport: i0, template: "<rolatech-empty></rolatech-empty>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: EmptyComponent, selector: "rolatech-empty" }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: UserCommunityComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: UserCommunityComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rolatech-user-community', imports: [CommonModule, EmptyComponent], encapsulation: ViewEncapsulation.None, template: "<rolatech-empty></rolatech-empty>\n" }]
         }] });
@@ -197,10 +592,10 @@ class UserStoreComponent {
             },
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: UserStoreComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: UserStoreComponent, isStandalone: true, selector: "rolatech-user-store", ngImport: i0, template: "@if (products) {\n  <div>\n    <rolatech-rich-view wrap>\n      @for (item of products; track item) {\n        @defer {\n          <rolatech-rich-item\n            [routerLink]=\"['/products', item.id]\"\n            [thumbnail]=\"item.media ? item.media[0].url + '!w400' : ''\"\n            [title]=\"item.name\"\n            [subtitle]=\"item.description\"\n            [price]=\"(item.price / 100).toFixed(2)\"\n            thumbnailRatio=\"square\"\n          ></rolatech-rich-item>\n        }\n      }\n    </rolatech-rich-view>\n  </div>\n} @else {\n  <rolatech-empty></rolatech-empty>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: EmptyComponent, selector: "rolatech-empty" }, { kind: "component", type: RichViewComponent, selector: "rolatech-rich-view", inputs: ["list", "wrap"] }], encapsulation: i0.ViewEncapsulation.None, deferBlockDependencies: [() => [RichItemComponent, import('@angular/router').then(m => m.RouterLink)]] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: UserStoreComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: UserStoreComponent, isStandalone: true, selector: "rolatech-user-store", ngImport: i0, template: "@if (products) {\n  <div>\n    <rolatech-rich-view wrap>\n      @for (item of products; track item) {\n        @defer {\n          <rolatech-rich-item\n            [routerLink]=\"['/products', item.id]\"\n            [thumbnail]=\"item.media ? item.media[0].url + '!w400' : ''\"\n            [title]=\"item.name\"\n            [subtitle]=\"item.description\"\n            [price]=\"(item.price / 100).toFixed(2)\"\n            thumbnailRatio=\"square\"\n          ></rolatech-rich-item>\n        }\n      }\n    </rolatech-rich-view>\n  </div>\n} @else {\n  <rolatech-empty></rolatech-empty>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: EmptyComponent, selector: "rolatech-empty" }, { kind: "component", type: RichViewComponent, selector: "rolatech-rich-view", inputs: ["list", "wrap"] }], encapsulation: i0.ViewEncapsulation.None, deferBlockDependencies: [() => [RichItemComponent, import('@angular/router').then(m => m.RouterLink)]] });
 }
-i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "19.2.4", ngImport: i0, type: UserStoreComponent, resolveDeferredDeps: () => [import('@angular/router').then(m => m.RouterLink)], resolveMetadata: RouterLink => ({ decorators: [{
+i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "20.0.3", ngImport: i0, type: UserStoreComponent, resolveDeferredDeps: () => [import('@angular/router').then(m => m.RouterLink)], resolveMetadata: RouterLink => ({ decorators: [{
                 type: Component,
                 args: [{ selector: 'rolatech-user-store', imports: [CommonModule, EmptyComponent, RichViewComponent, RichItemComponent, RouterLink], encapsulation: ViewEncapsulation.None, template: "@if (products) {\n  <div>\n    <rolatech-rich-view wrap>\n      @for (item of products; track item) {\n        @defer {\n          <rolatech-rich-item\n            [routerLink]=\"['/products', item.id]\"\n            [thumbnail]=\"item.media ? item.media[0].url + '!w400' : ''\"\n            [title]=\"item.name\"\n            [subtitle]=\"item.description\"\n            [price]=\"(item.price / 100).toFixed(2)\"\n            thumbnailRatio=\"square\"\n          ></rolatech-rich-item>\n        }\n      }\n    </rolatech-rich-view>\n  </div>\n} @else {\n  <rolatech-empty></rolatech-empty>\n}\n" }]
             }], ctorParameters: null, propDecorators: null }) });
@@ -218,12 +613,12 @@ class UserItemComponent {
     onUnFollow() {
         this.unfollow.emit(this.user().username);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: UserItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: UserItemComponent, isStandalone: true, selector: "rolatech-user-item", inputs: { user: { classPropertyName: "user", publicName: "user", isSignal: true, isRequired: false, transformFunction: null }, isFollowing: { classPropertyName: "isFollowing", publicName: "isFollowing", isSignal: true, isRequired: false, transformFunction: null }, own: { classPropertyName: "own", publicName: "own", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { follow: "follow", unfollow: "unfollow" }, host: { properties: { "class.rolatech-user-item": "this.hasClass" } }, ngImport: i0, template: "<div class=\"flex w-full justify-between items-center p-2 hover:bg-[--rt-raised-background] cursor-pointer\">\n  <div class=\"flex items-center\">\n    <div class=\"bg-[--rt-brand-color] w-12 h-12 rounded-full\">\n      @if (user().avatar) {\n        <img class=\"w-12 h-12 object-cover rounded-full\" [src]=\"user().avatar\" alt=\"avatar img\" />\n      }\n    </div>\n    <div class=\"flex flex-col ml-3\">\n      <a class=\"text-lg font-bold\">\n        <span>{{ user().name }}</span>\n      </a>\n      <a class=\"text-md\">\n        <span>{{ user().username }}</span>\n      </a>\n    </div>\n  </div>\n  @if (!own()) {\n    @if (isFollowing()) {\n      <button mat-flat-button class=\"w-28 max-h-8\" (click)=\"onUnFollow()\">\u53D6\u6D88\u5173\u6CE8</button>\n    } @else {\n      <button mat-flat-button class=\"w-28 max-h-8\" (click)=\"onFollow()\">\u5173\u6CE8</button>\n    }\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: UserItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: UserItemComponent, isStandalone: true, selector: "rolatech-user-item", inputs: { user: { classPropertyName: "user", publicName: "user", isSignal: true, isRequired: false, transformFunction: null }, isFollowing: { classPropertyName: "isFollowing", publicName: "isFollowing", isSignal: true, isRequired: false, transformFunction: null }, own: { classPropertyName: "own", publicName: "own", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { follow: "follow", unfollow: "unfollow" }, host: { properties: { "class.rolatech-user-item": "this.hasClass" } }, ngImport: i0, template: "<div class=\"flex w-full justify-between items-center p-2 hover:bg-[--rt-raised-background] cursor-pointer\">\n  <div class=\"flex items-center\">\n    <div class=\"bg-[--rt-brand-color] w-12 h-12 rounded-full\">\n      @if (user().avatar) {\n        <img class=\"w-12 h-12 object-cover rounded-full\" [src]=\"user().avatar\" alt=\"avatar img\" />\n      }\n    </div>\n    <div class=\"flex flex-col ml-3\">\n      <a class=\"text-lg font-bold\">\n        <span>{{ user().name }}</span>\n      </a>\n      <a class=\"text-md\">\n        <span>{{ user().username }}</span>\n      </a>\n    </div>\n  </div>\n  @if (!own()) {\n    @if (isFollowing()) {\n      <button mat-flat-button class=\"w-28 max-h-8\" (click)=\"onUnFollow()\" i18n>Unfollow</button>\n    } @else {\n      <button mat-flat-button class=\"w-28 max-h-8\" (click)=\"onFollow()\" i18n>Follow</button>\n    }\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.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"] }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: UserItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: UserItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rolatech-user-item', imports: [CommonModule, MatButtonModule], encapsulation: ViewEncapsulation.None, template: "<div class=\"flex w-full justify-between items-center p-2 hover:bg-[--rt-raised-background] cursor-pointer\">\n  <div class=\"flex items-center\">\n    <div class=\"bg-[--rt-brand-color] w-12 h-12 rounded-full\">\n      @if (user().avatar) {\n        <img class=\"w-12 h-12 object-cover rounded-full\" [src]=\"user().avatar\" alt=\"avatar img\" />\n      }\n    </div>\n    <div class=\"flex flex-col ml-3\">\n      <a class=\"text-lg font-bold\">\n        <span>{{ user().name }}</span>\n      </a>\n      <a class=\"text-md\">\n        <span>{{ user().username }}</span>\n      </a>\n    </div>\n  </div>\n  @if (!own()) {\n    @if (isFollowing()) {\n      <button mat-flat-button class=\"w-28 max-h-8\" (click)=\"onUnFollow()\">\u53D6\u6D88\u5173\u6CE8</button>\n    } @else {\n      <button mat-flat-button class=\"w-28 max-h-8\" (click)=\"onFollow()\">\u5173\u6CE8</button>\n    }\n  }\n</div>\n" }]
+            args: [{ selector: 'rolatech-user-item', imports: [CommonModule, MatButtonModule], encapsulation: ViewEncapsulation.None, template: "<div class=\"flex w-full justify-between items-center p-2 hover:bg-[--rt-raised-background] cursor-pointer\">\n  <div class=\"flex items-center\">\n    <div class=\"bg-[--rt-brand-color] w-12 h-12 rounded-full\">\n      @if (user().avatar) {\n        <img class=\"w-12 h-12 object-cover rounded-full\" [src]=\"user().avatar\" alt=\"avatar img\" />\n      }\n    </div>\n    <div class=\"flex flex-col ml-3\">\n      <a class=\"text-lg font-bold\">\n        <span>{{ user().name }}</span>\n      </a>\n      <a class=\"text-md\">\n        <span>{{ user().username }}</span>\n      </a>\n    </div>\n  </div>\n  @if (!own()) {\n    @if (isFollowing()) {\n      <button mat-flat-button class=\"w-28 max-h-8\" (click)=\"onUnFollow()\" i18n>Unfollow</button>\n    } @else {\n      <button mat-flat-button class=\"w-28 max-h-8\" (click)=\"onFollow()\" i18n>Follow</button>\n    }\n  }\n</div>\n" }]
         }], propDecorators: { hasClass: [{
                 type: HostBinding,
                 args: ['class.rolatech-user-item']
@@ -339,10 +734,10 @@ class UserFollowInfoComponent {
             item.isFollowing = friendships[item.id].following;
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: UserFollowInfoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: UserFollowInfoComponent, isStandalone: true, selector: "rolatech-user-follow-info", ngImport: i0, template: "<rolatech-container>\n  <rolatech-toolbar [title]=\"userInfo?.name\" link=\"../\" [subtitle]=\"userInfo?.username\"></rolatech-toolbar>\n  <div class=\"mb-3\"></div>\n\n  <rolatech-tabs [(select)]=\"tabIndex\">\n    <rolatech-tab label=\"\u5173\u6CE8\" [routerLink]=\"['../', 'following']\"></rolatech-tab>\n    <rolatech-tab label=\"\u7C89\u4E1D\" [routerLink]=\"['../', 'followers']\"></rolatech-tab>\n  </rolatech-tabs>\n  <div class=\"mb-3\"></div>\n  @for (user of users; track $index) {\n    <rolatech-user-item\n      [user]=\"user\"\n      [routerLink]=\"'/@' + user.username\"\n      [isFollowing]=\"user.isFollowing\"\n      (follow)=\"follow(user)\"\n      (unfollow)=\"unfollow(user)\"\n      [own]=\"user.id === myId\"\n    ></rolatech-user-item>\n  }\n</rolatech-container>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: TabsComponent, selector: "rolatech-tabs", inputs: ["select", "loading"], outputs: ["selectChange"] }, { kind: "component", type: TabComponent, selector: "rolatech-tab", inputs: ["label"] }, { kind: "component", type: ContainerComponent, selector: "rolatech-container" }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: UserItemComponent, selector: "rolatech-user-item", inputs: ["user", "isFollowing", "own"], outputs: ["follow", "unfollow"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: UserFollowInfoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: UserFollowInfoComponent, isStandalone: true, selector: "rolatech-user-follow-info", ngImport: i0, template: "<rolatech-container>\n  <rolatech-toolbar [title]=\"userInfo?.name\" link=\"../\" [subtitle]=\"userInfo?.username\"></rolatech-toolbar>\n  <div class=\"mb-3\"></div>\n\n  <rolatech-tabs [(select)]=\"tabIndex\">\n    <rolatech-tab label=\"\u5173\u6CE8\" [routerLink]=\"['../', 'following']\"></rolatech-tab>\n    <rolatech-tab label=\"\u7C89\u4E1D\" [routerLink]=\"['../', 'followers']\"></rolatech-tab>\n  </rolatech-tabs>\n  <div class=\"mb-3\"></div>\n  @for (user of users; track $index) {\n    <rolatech-user-item\n      [user]=\"user\"\n      [routerLink]=\"'/@' + user.username\"\n      [isFollowing]=\"user.isFollowing\"\n      (follow)=\"follow(user)\"\n      (unfollow)=\"unfollow(user)\"\n      [own]=\"user.id === myId\"\n    ></rolatech-user-item>\n  }\n</rolatech-container>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: TabsComponent, selector: "rolatech-tabs", inputs: ["select", "loading"], outputs: ["selectChange"] }, { kind: "component", type: TabComponent, selector: "rolatech-tab", inputs: ["label"] }, { kind: "component", type: ContainerComponent, selector: "rolatech-container" }, { kind: "component", type: ToolbarComponent, selector: "rolatech-toolbar", inputs: ["title", "subtitle", "back", "link", "large", "divider"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: UserItemComponent, selector: "rolatech-user-item", inputs: ["user", "isFollowing", "own"], outputs: ["follow", "unfollow"] }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: UserFollowInfoComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: UserFollowInfoComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rolatech-user-follow-info', imports: [CommonModule, TabsComponent, TabComponent, ContainerComponent, ToolbarComponent, RouterLink, UserItemComponent], encapsulation: ViewEncapsulation.None, template: "<rolatech-container>\n  <rolatech-toolbar [title]=\"userInfo?.name\" link=\"../\" [subtitle]=\"userInfo?.username\"></rolatech-toolbar>\n  <div class=\"mb-3\"></div>\n\n  <rolatech-tabs [(select)]=\"tabIndex\">\n    <rolatech-tab label=\"\u5173\u6CE8\" [routerLink]=\"['../', 'following']\"></rolatech-tab>\n    <rolatech-tab label=\"\u7C89\u4E1D\" [routerLink]=\"['../', 'followers']\"></rolatech-tab>\n  </rolatech-tabs>\n  <div class=\"mb-3\"></div>\n  @for (user of users; track $index) {\n    <rolatech-user-item\n      [user]=\"user\"\n      [routerLink]=\"'/@' + user.username\"\n      [isFollowing]=\"user.isFollowing\"\n      (follow)=\"follow(user)\"\n      (unfollow)=\"unfollow(user)\"\n      [own]=\"user.id === myId\"\n    ></rolatech-user-item>\n  }\n</rolatech-container>\n" }]
         }], ctorParameters: () => [] });
@@ -376,5 +771,5 @@ const userRoutes = [
  * Generated bundle index. Do not edit.
  */
 
-export { userRoutes };
+export { AgentApplicationComponent, AgentApplicationDetailComponent, UserIndexComponent, agentManageApplicationRoutes, agentRoutes, userRoutes };
 //# sourceMappingURL=rolatech-angular-user.mjs.map