ngx-techlify-core 16.1.0 → 16.3.0

package/fesm2022/ngx-techlify-core.mjs

@@ -58,7 +58,7 @@ import * as i3$2 from '@angular/material/button-toggle';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
 import * as i11$1 from '@angular/material/progress-spinner';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-import * as i23 from '@angular/material/progress-bar';
+import * as i5$1 from '@angular/material/progress-bar';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
 import * as i9$2 from '@angular/material/datepicker';
 import { MatDatepickerModule } from '@angular/material/datepicker';
@@ -2051,6 +2051,7 @@ class User {
     signature;
     signature_url;
     user_client;
+    clients;
     constructor() {
         this.id = 0;
         this.client = {};
@@ -2071,6 +2072,7 @@ class User {
         this.signature = data.signature;
         this.signature_url = data.signature_url;
         this.user_client = data?.user_client;
+        this.clients = data?.clients;
     }
 }
 
@@ -2179,10 +2181,15 @@ class AuthenticationService {
      * @return True if the user was logged out successfully.
      */
     logout() {
-        // Update the auth status of the user.
-        this.currentUserService.updateAuthStatus(false);
-        this.credentialsService.setCredentials();
-        return of(true);
+        return this.http.post('api/user/logout', {}).pipe(map(() => {
+            // On successful logout, update auth status and clear credentials
+            this.currentUserService.updateAuthStatus(false);
+            this.credentialsService.setCredentials();
+            return true;
+        }), catchError(() => {
+            // On error, return false
+            return of(false);
+        }));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AuthenticationService, deps: [{ token: CredentialsService }, { token: HttpService }, { token: CurrentUserService }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AuthenticationService, providedIn: 'root' });
@@ -2867,9 +2874,9 @@ class UserFormComponent {
             roles_exists: [[]],
             client_id: [''],
             signature_url: [''],
-            signature: ['']
+            signature: [''],
+            is_temporary_password: [true],
         });
-        console.log(this.userForm.controls);
         this.userForm.patchValue(this.user);
         if (this.user.hasOwnProperty('id')) {
             this.updateMode = true;
@@ -2993,11 +3000,11 @@ class UserFormComponent {
             .post('api/entity-files-upload', formData).toPromise();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UserFormComponent, deps: [{ token: i1.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: HttpService }, { token: AlertService }, { token: ErrorHandlerService }, { token: i1$4.UntypedFormBuilder }, { token: FormValidatorService }, { token: UserService }, { token: UserConfigService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: UserFormComponent, selector: "user-form", inputs: { userId: "userId" }, outputs: { onSave: "onSave" }, ngImport: i0, template: "<form [formGroup]=\"userForm\" (ngSubmit)=\"save()\">\n    <div fxLayout=\"column\">\n        <div mat-dialog-title class=\"text-center\">\n            <div>User Management</div>\n        </div>\n\n        <div mat-dialog-content fxLayout=\"row wrap\" fxLayoutAlign=\"center\">\n            <mat-form-field fxFlex=\"100%\">\n                <input matInput formControlName=\"name\" placeholder=\"Full Name\" type=\"text\"\n                    [required]=\"!!userForm.get('name').validator\" autocomplete=\"off\" />\n                <mat-error *ngIf=\"isFieldValid('name') && !!userForm.get('name').validator\">{{getErrorMessage('name')}}\n                </mat-error>\n            </mat-form-field>\n            <mat-form-field fxFlex=\"100%\">\n                <input matInput formControlName=\"email\" placeholder=\"Email\" type=\"email\"\n                    [required]=\"!!userForm.get('email').validator\" />\n                <mat-error *ngIf=\"isFieldValid('email') && !!userForm.get('email').validator\">\n                    {{getErrorMessage('email')}}\n                </mat-error>\n            </mat-form-field>\n            <mat-form-field fxFlex=\"100%\" *ngIf=\"this.config.userConfig.showPhone\">\n                <input matInput formControlName=\"phone\" placeholder=\"Phone\" type=\"text\" autocomplete=\"off\" />\n            </mat-form-field>\n            <mat-form-field fxFlex=\"100%\">\n                <input matInput formControlName=\"password\" placeholder=\"Password\" type=\"password\"\n                    [required]=\"isPasswordRequired && !!userForm.get('password').validator\" autocomplete=\"off\" />\n                <mat-error *ngIf=\"isFieldValid('password') && !!userForm.get('password').validator\">\n                    {{getErrorMessage('password')}}</mat-error>\n            </mat-form-field>\n\n            <div *ngIf=\"this.config.userConfig.showSignature\"> \n                <ng-template #fileUpload>\n                    <section class=\"col-12\">\n                        <div>User Signature</div>\n                        <app-file-dropper [config]=\"fileConfig\" (fileChanged)=\"fileChanged($event)\"\n                            [fileArray]=\"fileList\">\n                        </app-file-dropper>\n                    </section>\n                </ng-template>\n                <div class=\"col-12\" *ngIf=\"userForm.get('signature').value;else fileUpload;\">\n                    <app-document-viewer [file]=\"userForm.get('signature').value\"\n                        [fileUrl]=\"userForm.get('signature_url').value\" [config]=\"this.viewerConfig\"\n                        (remove)=\"removeFile()\">\n                    </app-document-viewer>\n                </div>\n            </div>\n            <mat-form-field fxFlex=\"100%\" *ngIf=\"this.config.userConfig.showUserTypes\">\n                <mat-label>User Type</mat-label>\n                <mat-select formControlName=\"user_type_id\" autocomplete=\"off\" required>\n                    <mat-option *ngFor=\"let userType of userTypes\" [value]=\"userType.value\">\n                        {{userType.title}}\n                    </mat-option>\n                </mat-select>\n                <mat-error *ngIf=\"isFieldValid('user_type_id')\">{{getErrorMessage('user_type_id')}}</mat-error>\n            </mat-form-field>\n\n            <mat-card fxFlex=\"100%\"\n                *ngIf=\"(this.config.userConfig.showRoles || this.config.userConfig.showFormRoles) && this.userForm.get('user_type_id').value == 3\">\n                <mat-card-title>\n                    <small class=\"form-text text-muted\">\n                        Roles\n                    </small>\n                </mat-card-title>\n                <mat-card-content style=\"overflow:auto; min-height:150px; max-height:260px;\" fxLayout=\"column\">\n                    <div *ngFor=\"let role of userRoles | keyvalue\">\n                        <label *ngIf=\"role.value[0].module_id\" class=\"text-muted\">\n                            {{role?.value[0]?.module?.name}}\n                        </label>\n                        <div *ngFor=\"let roleValue of role.value;\" fxLayout=\"column\"\n                            [ngClass]=\"{ 'ml-4': role.value[0].module_id }\">\n                            <mat-checkbox [checked]=\"roleValue.selected\" (change)=\"roleSelected($event, roleValue.id)\">\n                                {{roleValue.label}}\n                            </mat-checkbox>\n                        </div>\n                    </div>\n                </mat-card-content>\n            </mat-card>\n\n            <div fxFlex=\"100%\" fxLayout=\"row\" fxLayoutGap=\"1.5rem\" fxLayoutAlign=\"end\" class=\"my-4\">\n                <button mat-raised-button (click)=\"closeDialog()\" type=\"button\">\n                    Cancel\n                </button>\n                <button mat-raised-button color=\"primary\" type=\"submit\">\n                    Save\n                </button>\n            </div>\n\n        </div>\n\n    </div>\n</form>", dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i8.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i7$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i7$2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i9.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i8$3.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i9$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i10$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i10$1.MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: i10$1.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "directive", type: i7.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i7.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i7.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i7.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i2.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "directive", type: i1$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$4.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$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: FileDropperComponent, selector: "app-file-dropper", inputs: ["fileArray", "config", "styles"], outputs: ["fileChanged"] }, { kind: "component", type: DocumentViewerComponent, selector: "app-document-viewer", inputs: ["config", "file", "fileUrl", "disableEdit"], outputs: ["remove"] }, { kind: "pipe", type: i3.KeyValuePipe, name: "keyvalue" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: UserFormComponent, selector: "user-form", inputs: { userId: "userId" }, outputs: { onSave: "onSave" }, ngImport: i0, template: "<form [formGroup]=\"userForm\" (ngSubmit)=\"save()\">\n    <div fxLayout=\"column\">\n        <div mat-dialog-title class=\"text-center\">\n            <div>User Management</div>\n        </div>\n\n        <div mat-dialog-content fxLayout=\"row wrap\" fxLayoutAlign=\"start center\">\n            <mat-form-field fxFlex=\"100%\">\n                <input matInput formControlName=\"name\" placeholder=\"Full Name\" type=\"text\"\n                    [required]=\"!!userForm.get('name').validator\" autocomplete=\"off\" />\n                <mat-error *ngIf=\"isFieldValid('name') && !!userForm.get('name').validator\">{{getErrorMessage('name')}}\n                </mat-error>\n            </mat-form-field>\n            <mat-form-field fxFlex=\"100%\">\n                <input matInput formControlName=\"email\" placeholder=\"Email\" type=\"email\"\n                    [required]=\"!!userForm.get('email').validator\" />\n                <mat-error *ngIf=\"isFieldValid('email') && !!userForm.get('email').validator\">\n                    {{getErrorMessage('email')}}\n                </mat-error>\n            </mat-form-field>\n            <mat-form-field fxFlex=\"100%\" *ngIf=\"this.config.userConfig.showPhone\">\n                <input matInput formControlName=\"phone\" placeholder=\"Phone\" type=\"text\" autocomplete=\"off\" />\n            </mat-form-field>\n            <mat-form-field fxFlex=\"100%\">\n                <input matInput formControlName=\"password\" placeholder=\"Password\" type=\"password\"\n                    [required]=\"isPasswordRequired && !!userForm.get('password').validator\" autocomplete=\"off\" />\n                <mat-error *ngIf=\"isFieldValid('password') && !!userForm.get('password').validator\">\n                    {{getErrorMessage('password')}}</mat-error>\n            </mat-form-field>\n\n            <div class=\"d-flex flex-column justify-content-start gap-1\">\n              <mat-checkbox formControlName=\"is_temporary_password\">Is Temporary Password?</mat-checkbox>\n              <small class=\"text-secondary\">Should this user to update password on first login?</small>\n            </div>\n\n            <div *ngIf=\"this.config.userConfig.showSignature\">\n                <ng-template #fileUpload>\n                    <section class=\"col-12\">\n                        <div>User Signature</div>\n                        <app-file-dropper [config]=\"fileConfig\" (fileChanged)=\"fileChanged($event)\"\n                            [fileArray]=\"fileList\">\n                        </app-file-dropper>\n                    </section>\n                </ng-template>\n                <div class=\"col-12\" *ngIf=\"userForm.get('signature').value;else fileUpload;\">\n                    <app-document-viewer [file]=\"userForm.get('signature').value\"\n                        [fileUrl]=\"userForm.get('signature_url').value\" [config]=\"this.viewerConfig\"\n                        (remove)=\"removeFile()\">\n                    </app-document-viewer>\n                </div>\n            </div>\n            <mat-form-field fxFlex=\"100%\" *ngIf=\"this.config.userConfig.showUserTypes\">\n                <mat-label>User Type</mat-label>\n                <mat-select formControlName=\"user_type_id\" autocomplete=\"off\" required>\n                    <mat-option *ngFor=\"let userType of userTypes\" [value]=\"userType.value\">\n                        {{userType.title}}\n                    </mat-option>\n                </mat-select>\n                <mat-error *ngIf=\"isFieldValid('user_type_id')\">{{getErrorMessage('user_type_id')}}</mat-error>\n            </mat-form-field>\n\n            <mat-card fxFlex=\"100%\"\n                *ngIf=\"(this.config.userConfig.showRoles || this.config.userConfig.showFormRoles) && this.userForm.get('user_type_id').value == 3\">\n                <mat-card-title>\n                    <small class=\"form-text text-muted\">\n                        Roles\n                    </small>\n                </mat-card-title>\n                <mat-card-content style=\"overflow:auto; min-height:150px; max-height:260px;\" fxLayout=\"column\">\n                    <div *ngFor=\"let role of userRoles | keyvalue\">\n                        <label *ngIf=\"role.value[0].module_id\" class=\"text-muted\">\n                            {{role?.value[0]?.module?.name}}\n                        </label>\n                        <div *ngFor=\"let roleValue of role.value;\" fxLayout=\"column\"\n                            [ngClass]=\"{ 'ml-4': role.value[0].module_id }\">\n                            <mat-checkbox [checked]=\"roleValue.selected\" (change)=\"roleSelected($event, roleValue.id)\">\n                                {{roleValue.label}}\n                            </mat-checkbox>\n                        </div>\n                    </div>\n                </mat-card-content>\n            </mat-card>\n\n            <div fxFlex=\"100%\" fxLayout=\"row\" fxLayoutGap=\"1.5rem\" fxLayoutAlign=\"end\" class=\"my-4\">\n              <button [disabled]=\"isWorking\" mat-raised-button color=\"primary\" type=\"submit\">\n                Save\n              </button>\n              <button [disabled]=\"isWorking\" mat-flat-button (click)=\"closeDialog()\" type=\"button\">\n                Cancel\n              </button>\n            </div>\n\n        </div>\n\n    </div>\n</form>\n", dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i8.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i7$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i7$2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i9.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i8$3.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i9$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i10$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i10$1.MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: i10$1.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "directive", type: i7.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i7.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i7.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i7.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i2.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "directive", type: i1$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$4.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$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: FileDropperComponent, selector: "app-file-dropper", inputs: ["fileArray", "config", "styles"], outputs: ["fileChanged"] }, { kind: "component", type: DocumentViewerComponent, selector: "app-document-viewer", inputs: ["config", "file", "fileUrl", "disableEdit"], outputs: ["remove"] }, { kind: "pipe", type: i3.KeyValuePipe, name: "keyvalue" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UserFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'user-form', template: "<form [formGroup]=\"userForm\" (ngSubmit)=\"save()\">\n    <div fxLayout=\"column\">\n        <div mat-dialog-title class=\"text-center\">\n            <div>User Management</div>\n        </div>\n\n        <div mat-dialog-content fxLayout=\"row wrap\" fxLayoutAlign=\"center\">\n            <mat-form-field fxFlex=\"100%\">\n                <input matInput formControlName=\"name\" placeholder=\"Full Name\" type=\"text\"\n                    [required]=\"!!userForm.get('name').validator\" autocomplete=\"off\" />\n                <mat-error *ngIf=\"isFieldValid('name') && !!userForm.get('name').validator\">{{getErrorMessage('name')}}\n                </mat-error>\n            </mat-form-field>\n            <mat-form-field fxFlex=\"100%\">\n                <input matInput formControlName=\"email\" placeholder=\"Email\" type=\"email\"\n                    [required]=\"!!userForm.get('email').validator\" />\n                <mat-error *ngIf=\"isFieldValid('email') && !!userForm.get('email').validator\">\n                    {{getErrorMessage('email')}}\n                </mat-error>\n            </mat-form-field>\n            <mat-form-field fxFlex=\"100%\" *ngIf=\"this.config.userConfig.showPhone\">\n                <input matInput formControlName=\"phone\" placeholder=\"Phone\" type=\"text\" autocomplete=\"off\" />\n            </mat-form-field>\n            <mat-form-field fxFlex=\"100%\">\n                <input matInput formControlName=\"password\" placeholder=\"Password\" type=\"password\"\n                    [required]=\"isPasswordRequired && !!userForm.get('password').validator\" autocomplete=\"off\" />\n                <mat-error *ngIf=\"isFieldValid('password') && !!userForm.get('password').validator\">\n                    {{getErrorMessage('password')}}</mat-error>\n            </mat-form-field>\n\n            <div *ngIf=\"this.config.userConfig.showSignature\"> \n                <ng-template #fileUpload>\n                    <section class=\"col-12\">\n                        <div>User Signature</div>\n                        <app-file-dropper [config]=\"fileConfig\" (fileChanged)=\"fileChanged($event)\"\n                            [fileArray]=\"fileList\">\n                        </app-file-dropper>\n                    </section>\n                </ng-template>\n                <div class=\"col-12\" *ngIf=\"userForm.get('signature').value;else fileUpload;\">\n                    <app-document-viewer [file]=\"userForm.get('signature').value\"\n                        [fileUrl]=\"userForm.get('signature_url').value\" [config]=\"this.viewerConfig\"\n                        (remove)=\"removeFile()\">\n                    </app-document-viewer>\n                </div>\n            </div>\n            <mat-form-field fxFlex=\"100%\" *ngIf=\"this.config.userConfig.showUserTypes\">\n                <mat-label>User Type</mat-label>\n                <mat-select formControlName=\"user_type_id\" autocomplete=\"off\" required>\n                    <mat-option *ngFor=\"let userType of userTypes\" [value]=\"userType.value\">\n                        {{userType.title}}\n                    </mat-option>\n                </mat-select>\n                <mat-error *ngIf=\"isFieldValid('user_type_id')\">{{getErrorMessage('user_type_id')}}</mat-error>\n            </mat-form-field>\n\n            <mat-card fxFlex=\"100%\"\n                *ngIf=\"(this.config.userConfig.showRoles || this.config.userConfig.showFormRoles) && this.userForm.get('user_type_id').value == 3\">\n                <mat-card-title>\n                    <small class=\"form-text text-muted\">\n                        Roles\n                    </small>\n                </mat-card-title>\n                <mat-card-content style=\"overflow:auto; min-height:150px; max-height:260px;\" fxLayout=\"column\">\n                    <div *ngFor=\"let role of userRoles | keyvalue\">\n                        <label *ngIf=\"role.value[0].module_id\" class=\"text-muted\">\n                            {{role?.value[0]?.module?.name}}\n                        </label>\n                        <div *ngFor=\"let roleValue of role.value;\" fxLayout=\"column\"\n                            [ngClass]=\"{ 'ml-4': role.value[0].module_id }\">\n                            <mat-checkbox [checked]=\"roleValue.selected\" (change)=\"roleSelected($event, roleValue.id)\">\n                                {{roleValue.label}}\n                            </mat-checkbox>\n                        </div>\n                    </div>\n                </mat-card-content>\n            </mat-card>\n\n            <div fxFlex=\"100%\" fxLayout=\"row\" fxLayoutGap=\"1.5rem\" fxLayoutAlign=\"end\" class=\"my-4\">\n                <button mat-raised-button (click)=\"closeDialog()\" type=\"button\">\n                    Cancel\n                </button>\n                <button mat-raised-button color=\"primary\" type=\"submit\">\n                    Save\n                </button>\n            </div>\n\n        </div>\n\n    </div>\n</form>" }]
+            args: [{ selector: 'user-form', template: "<form [formGroup]=\"userForm\" (ngSubmit)=\"save()\">\n    <div fxLayout=\"column\">\n        <div mat-dialog-title class=\"text-center\">\n            <div>User Management</div>\n        </div>\n\n        <div mat-dialog-content fxLayout=\"row wrap\" fxLayoutAlign=\"start center\">\n            <mat-form-field fxFlex=\"100%\">\n                <input matInput formControlName=\"name\" placeholder=\"Full Name\" type=\"text\"\n                    [required]=\"!!userForm.get('name').validator\" autocomplete=\"off\" />\n                <mat-error *ngIf=\"isFieldValid('name') && !!userForm.get('name').validator\">{{getErrorMessage('name')}}\n                </mat-error>\n            </mat-form-field>\n            <mat-form-field fxFlex=\"100%\">\n                <input matInput formControlName=\"email\" placeholder=\"Email\" type=\"email\"\n                    [required]=\"!!userForm.get('email').validator\" />\n                <mat-error *ngIf=\"isFieldValid('email') && !!userForm.get('email').validator\">\n                    {{getErrorMessage('email')}}\n                </mat-error>\n            </mat-form-field>\n            <mat-form-field fxFlex=\"100%\" *ngIf=\"this.config.userConfig.showPhone\">\n                <input matInput formControlName=\"phone\" placeholder=\"Phone\" type=\"text\" autocomplete=\"off\" />\n            </mat-form-field>\n            <mat-form-field fxFlex=\"100%\">\n                <input matInput formControlName=\"password\" placeholder=\"Password\" type=\"password\"\n                    [required]=\"isPasswordRequired && !!userForm.get('password').validator\" autocomplete=\"off\" />\n                <mat-error *ngIf=\"isFieldValid('password') && !!userForm.get('password').validator\">\n                    {{getErrorMessage('password')}}</mat-error>\n            </mat-form-field>\n\n            <div class=\"d-flex flex-column justify-content-start gap-1\">\n              <mat-checkbox formControlName=\"is_temporary_password\">Is Temporary Password?</mat-checkbox>\n              <small class=\"text-secondary\">Should this user to update password on first login?</small>\n            </div>\n\n            <div *ngIf=\"this.config.userConfig.showSignature\">\n                <ng-template #fileUpload>\n                    <section class=\"col-12\">\n                        <div>User Signature</div>\n                        <app-file-dropper [config]=\"fileConfig\" (fileChanged)=\"fileChanged($event)\"\n                            [fileArray]=\"fileList\">\n                        </app-file-dropper>\n                    </section>\n                </ng-template>\n                <div class=\"col-12\" *ngIf=\"userForm.get('signature').value;else fileUpload;\">\n                    <app-document-viewer [file]=\"userForm.get('signature').value\"\n                        [fileUrl]=\"userForm.get('signature_url').value\" [config]=\"this.viewerConfig\"\n                        (remove)=\"removeFile()\">\n                    </app-document-viewer>\n                </div>\n            </div>\n            <mat-form-field fxFlex=\"100%\" *ngIf=\"this.config.userConfig.showUserTypes\">\n                <mat-label>User Type</mat-label>\n                <mat-select formControlName=\"user_type_id\" autocomplete=\"off\" required>\n                    <mat-option *ngFor=\"let userType of userTypes\" [value]=\"userType.value\">\n                        {{userType.title}}\n                    </mat-option>\n                </mat-select>\n                <mat-error *ngIf=\"isFieldValid('user_type_id')\">{{getErrorMessage('user_type_id')}}</mat-error>\n            </mat-form-field>\n\n            <mat-card fxFlex=\"100%\"\n                *ngIf=\"(this.config.userConfig.showRoles || this.config.userConfig.showFormRoles) && this.userForm.get('user_type_id').value == 3\">\n                <mat-card-title>\n                    <small class=\"form-text text-muted\">\n                        Roles\n                    </small>\n                </mat-card-title>\n                <mat-card-content style=\"overflow:auto; min-height:150px; max-height:260px;\" fxLayout=\"column\">\n                    <div *ngFor=\"let role of userRoles | keyvalue\">\n                        <label *ngIf=\"role.value[0].module_id\" class=\"text-muted\">\n                            {{role?.value[0]?.module?.name}}\n                        </label>\n                        <div *ngFor=\"let roleValue of role.value;\" fxLayout=\"column\"\n                            [ngClass]=\"{ 'ml-4': role.value[0].module_id }\">\n                            <mat-checkbox [checked]=\"roleValue.selected\" (change)=\"roleSelected($event, roleValue.id)\">\n                                {{roleValue.label}}\n                            </mat-checkbox>\n                        </div>\n                    </div>\n                </mat-card-content>\n            </mat-card>\n\n            <div fxFlex=\"100%\" fxLayout=\"row\" fxLayoutGap=\"1.5rem\" fxLayoutAlign=\"end\" class=\"my-4\">\n              <button [disabled]=\"isWorking\" mat-raised-button color=\"primary\" type=\"submit\">\n                Save\n              </button>\n              <button [disabled]=\"isWorking\" mat-flat-button (click)=\"closeDialog()\" type=\"button\">\n                Cancel\n              </button>\n            </div>\n\n        </div>\n\n    </div>\n</form>\n" }]
         }], ctorParameters: function () { return [{ type: i1.MatDialogRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
@@ -3699,7 +3706,7 @@ let UsersViewAllComponent = class UsersViewAllComponent extends TechlifyListingC
         return userClient?.type?.title || '';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UsersViewAllComponent, deps: [{ token: HttpService }, { token: AlertService }, { token: CurrentUserService }, { token: UserConfigService }, { token: i1.MatDialog }, { token: UserService }, { token: i1$4.UntypedFormBuilder }, { token: RequestHelperService }, { token: i1$5.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: UsersViewAllComponent, selector: "app-users-view-all", inputs: { clientId: "clientId", userTypeIds: "userTypeIds", title: "title" }, usesInheritance: true, ngImport: i0, template: "<div [ngClass]=\"{'m-4':config?.userConfig?.showDefaultMargin}\">\n  <mat-card class=\"mb-2\">\n    <mat-card-content class=\"d-flex justify-content-between align-items center gap-2\">\n      <section class=\"d-flex justify-content-start align-items-center gap-2\">\n        <h3 class=\"mb-0\">\n          {{ title }}\n        </h3>\n        <mat-icon class=\"cursor-pointer\" matTooltip=\"New User\"\n                  *ngIf=\"config?.userConfig?.showAddUser && currentUserService?.hasPermission('user_create')\"\n                  (click)=\"createOrEditUser()\">add</mat-icon>\n        <button mat-raised-button type=\"button\" [routerLink]=\"['../import']\" *ngIf=\"config?.userConfig?.showImportButton\">\n          Import User\n        </button>\n        <button mat-raised-button type=\"button\" [routerLink]=\"['../roles']\" *ngIf=\"config?.userConfig?.showRoles\">\n          <mat-icon>people</mat-icon>\n          Roles\n        </button>\n        <button mat-raised-button type=\"button\" [routerLink]=\"['../role-permissions']\"\n                *ngIf=\"config?.userConfig?.showPermissions\">\n          <mat-icon>lock</mat-icon>\n          Role Permissions\n        </button>\n        <button mat-raised-button type=\"button\" [routerLink]=\"['../configurations']\"\n                *ngIf=\"config?.userConfig?.showConfigurations && currentUser?.user_type_id === 2\">\n          <mat-icon>\n        <span class=\"material-icons-outlined\">\n          toggle_on\n        </span>\n          </mat-icon>\n          Configurations\n        </button>\n        <button mat-raised-button type=\"button\" [routerLink]=\"['../restrictors']\"\n                *ngIf=\"config?.userConfig?.showRestrictors && currentUser?.user_type_id === 2\">\n          <mat-icon>\n        <span class=\"material-icons-outlined\">\n          vpn_lock\n        </span>\n          </mat-icon>\n          Restrictors\n        </button>\n      </section>\n      <form [formGroup]=\"filterForm\" class=\"d-flex justify-content-end align-items-center gap-2\">\n        <mat-form-field style=\"max-width: 150px;\">\n          <mat-label>Search</mat-label>\n          <input autocomplete=\"off\" matInput type=\"text\" name=\"search\" placeholder=\"Search by name, email\"\n            formControlName=\"search\">\n        </mat-form-field>\n        <mat-form-field style=\"max-width: 150px;\">\n          <mat-label>Role</mat-label>\n          <app-searchable-selector apiUrl=\"api/roles\" [multiple]=\"true\" formControlName=\"role_ids\"\n            titleField=\"label\"></app-searchable-selector>\n        </mat-form-field>\n        <mat-button-toggle-group formControlName=\"status\" multiple>\n          <mat-button-toggle value=\"enabled\">Enabled</mat-button-toggle>\n          <mat-button-toggle value=\"disabled\">Disabled</mat-button-toggle>\n        </mat-button-toggle-group>\n      </form>\n    </mat-card-content>\n  </mat-card>\n  <mat-card class=\"mt-2 p-0\">\n    <mat-card-content>\n      <table mat-table [dataSource]=\"models\" class=\"w-100\" aria-describedby=\"Users\" infiniteScroll\n             [infiniteScrollDistance]=\"2\" [infiniteScrollThrottle]=\"50\" [infiniteScrollContainer]=\"scrollContainer\"\n             [fromRoot]=\"true\" (scrolled)=\"onScroll()\" matSort (matSortChange)=\"onSortChange($event)\">\n        <!-- Index Column -->\n        <ng-container matColumnDef=\"index\">\n          <th mat-header-cell *matHeaderCellDef> # </th>\n          <td mat-cell *matCellDef=\"let element; let i = index;\"> {{ i + 1 }} </td>\n        </ng-container>\n\n        <!-- Name Column -->\n        <ng-container matColumnDef=\"name\">\n          <th mat-header-cell mat-sort-header=\"name\" *matHeaderCellDef> Name </th>\n          <td mat-cell *matCellDef=\"let element\">\n            <a [routerLink]=\"[element?.id]\" class=\"text-decoration-none\">\n              {{ element.name }}\n            </a>\n            <p class=\"mb-0 text-secondary\">\n              <!-- !element?.user_client condition added to check if user has user_client record -->\n              {{ !element?.user_client ? '' : element?.user_client?.is_enabled ? 'Enabled' : 'Disabled' }}\n            </p>\n          </td>\n        </ng-container>\n\n        <!-- Email Column -->\n        <ng-container matColumnDef=\"email\">\n          <th mat-header-cell mat-sort-header=\"email\" *matHeaderCellDef> Email </th>\n          <td mat-cell *matCellDef=\"let element\"> {{element.email}} </td>\n        </ng-container>\n\n        <!-- Type Column -->\n        <ng-container matColumnDef=\"type\">\n          <th mat-header-cell mat-sort-header=\"user_type_id\" *matHeaderCellDef> User Type </th>\n          <td mat-cell *matCellDef=\"let element\"> {{ getUserType(element) }} </td>\n        </ng-container>\n\n        <!-- Roles Column -->\n        <ng-container matColumnDef=\"roles\">\n          <th mat-header-cell *matHeaderCellDef> Role </th>\n          <td mat-cell *matCellDef=\"let element\">\n            <div class=\"d-flex justify-content-start align-items-center gap-1 flex-wrap\">\n              <span\n                *ngFor=\"let role of element?.roles\"\n                class=\"badge bg-secondary\"\n              >\n                {{ role?.label }}\n              </span>\n            </div>\n          </td>\n        </ng-container>\n\n        <!-- Last Login Column -->\n        <ng-container matColumnDef=\"last_login\">\n          <th mat-header-cell *matHeaderCellDef> Last Login </th>\n          <td mat-cell *matCellDef=\"let element\">{{ element?.last_login | date:'medium' }}</td>\n        </ng-container>\n\n        <!-- Added By Column -->\n        <ng-container matColumnDef=\"added_by\">\n          <th mat-header-cell *matHeaderCellDef> Added By </th>\n          <td mat-cell *matCellDef=\"let element\">\n            <p class=\"mb-0\">{{ element?.creator?.name }}</p>\n            <p class=\"text-secondary\">{{ element?.created_at | date }}</p>\n          </td>\n        </ng-container>\n\n        <!-- Actions Column -->\n        <ng-container matColumnDef=\"actions\">\n          <th mat-header-cell *matHeaderCellDef> Action </th>\n          <td mat-cell *matCellDef=\"let element\">\n            <div fxLayout fxLayoutAlign=\"start center\" fxLayoutGap=\"5px\">\n              <button type=\"button\" mat-icon-button [routerLink]=\"[element.id]\">\n                <mat-icon>visibility</mat-icon>\n              </button>\n\n              <button *ngIf=\"currentUserService.hasPermission('user_update')\" type=\"button\" mat-icon-button\n                (click)=\"createOrEditUser(element)\">\n                <mat-icon>edit</mat-icon>\n              </button>\n\n              <button *ngIf=\"currentUserService.hasPermission('user_delete')\" type=\"button\" mat-icon-button\n                (click)=\"deleteUser(element)\">\n                <mat-icon>delete</mat-icon>\n              </button>\n              <app-user-enable-button [user]=\"element\" (onSave)=\"reload()\"></app-user-enable-button>\n            </div>\n          </td>\n        </ng-container>\n\n        <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n        <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n      </table>\n      <mat-progress-bar *ngIf=\"isWorking\" mode=\"indeterminate\"></mat-progress-bar>\n    </mat-card-content>\n  </mat-card>\n</div>\n", dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$5.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i7$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7$2.MatLabel, selector: "mat-label" }, { kind: "component", type: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i9.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i10.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i10.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i11.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i11.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i11.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i11.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i11.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i11.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i11.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i11.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i11.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i11.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i10$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i10$1.MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: i3$2.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i3$2.MatButtonToggle, selector: "mat-button-toggle", inputs: ["disableRipple", "aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "directive", type: i7.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i7.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i7.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "directive", type: i1$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$4.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$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i4.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "component", type: SearchableSelectorComponent, selector: "app-searchable-selector", inputs: ["valueField", "titleField", "subtitleField", "apiUrl", "multiple", "selectedValue", "enableSearch", "add", "addConfig", "edit", "editConfig", "sort", "sortBy", "searchField", "itemComponent", "items", "apiDataProperty", "cache", "perPage", "inDataSearch", "focusSearchOnOpen", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange"] }, { kind: "component", type: i23.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: UserEnableButtonComponent, selector: "app-user-enable-button", inputs: ["user", "isUseIcons"], outputs: ["onSave"] }, { kind: "pipe", type: i3.DatePipe, name: "date" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: UsersViewAllComponent, selector: "app-users-view-all", inputs: { clientId: "clientId", userTypeIds: "userTypeIds", title: "title" }, usesInheritance: true, ngImport: i0, template: "<div [ngClass]=\"{'m-4':config?.userConfig?.showDefaultMargin}\">\n  <mat-card class=\"mb-2\">\n    <mat-card-content class=\"d-flex justify-content-between align-items center gap-2\">\n      <section class=\"d-flex justify-content-start align-items-center gap-2\">\n        <h3 class=\"mb-0\">\n          {{ title }}\n        </h3>\n        <mat-icon class=\"cursor-pointer\" matTooltip=\"New User\"\n                  *ngIf=\"config?.userConfig?.showAddUser && currentUserService?.hasPermission('user_create')\"\n                  (click)=\"createOrEditUser()\">add</mat-icon>\n        <button mat-raised-button type=\"button\" [routerLink]=\"['../import']\" *ngIf=\"config?.userConfig?.showImportButton\">\n          Import User\n        </button>\n        <button mat-raised-button type=\"button\" [routerLink]=\"['../roles']\" *ngIf=\"config?.userConfig?.showRoles\">\n          <mat-icon>people</mat-icon>\n          Roles\n        </button>\n        <button mat-raised-button type=\"button\" [routerLink]=\"['../role-permissions']\"\n                *ngIf=\"config?.userConfig?.showPermissions\">\n          <mat-icon>lock</mat-icon>\n          Role Permissions\n        </button>\n        <button mat-raised-button type=\"button\" [routerLink]=\"['../configurations']\"\n                *ngIf=\"config?.userConfig?.showConfigurations && currentUser?.user_type_id === 2\">\n          <mat-icon>\n        <span class=\"material-icons-outlined\">\n          toggle_on\n        </span>\n          </mat-icon>\n          Configurations\n        </button>\n        <button mat-raised-button type=\"button\" [routerLink]=\"['../restrictors']\"\n                *ngIf=\"config?.userConfig?.showRestrictors && currentUser?.user_type_id === 2\">\n          <mat-icon>\n        <span class=\"material-icons-outlined\">\n          vpn_lock\n        </span>\n          </mat-icon>\n          Restrictors\n        </button>\n      </section>\n      <form [formGroup]=\"filterForm\" class=\"d-flex justify-content-end align-items-center gap-2\">\n        <mat-form-field style=\"max-width: 150px;\">\n          <mat-label>Search</mat-label>\n          <input autocomplete=\"off\" matInput type=\"text\" name=\"search\" placeholder=\"Search by name, email\"\n            formControlName=\"search\">\n        </mat-form-field>\n        <mat-form-field style=\"max-width: 150px;\">\n          <mat-label>Role</mat-label>\n          <app-searchable-selector apiUrl=\"api/roles\" [multiple]=\"true\" formControlName=\"role_ids\"\n            titleField=\"label\"></app-searchable-selector>\n        </mat-form-field>\n        <mat-button-toggle-group formControlName=\"status\" multiple>\n          <mat-button-toggle value=\"enabled\">Enabled</mat-button-toggle>\n          <mat-button-toggle value=\"disabled\">Disabled</mat-button-toggle>\n        </mat-button-toggle-group>\n      </form>\n    </mat-card-content>\n  </mat-card>\n  <mat-card class=\"mt-2 p-0\">\n    <mat-card-content>\n      <table mat-table [dataSource]=\"models\" class=\"w-100\" aria-describedby=\"Users\" infiniteScroll\n             [infiniteScrollDistance]=\"2\" [infiniteScrollThrottle]=\"50\" [infiniteScrollContainer]=\"scrollContainer\"\n             [fromRoot]=\"true\" (scrolled)=\"onScroll()\" matSort (matSortChange)=\"onSortChange($event)\">\n        <!-- Index Column -->\n        <ng-container matColumnDef=\"index\">\n          <th mat-header-cell *matHeaderCellDef> # </th>\n          <td mat-cell *matCellDef=\"let element; let i = index;\"> {{ i + 1 }} </td>\n        </ng-container>\n\n        <!-- Name Column -->\n        <ng-container matColumnDef=\"name\">\n          <th mat-header-cell mat-sort-header=\"name\" *matHeaderCellDef> Name </th>\n          <td mat-cell *matCellDef=\"let element\">\n            <a [routerLink]=\"[element?.id]\" class=\"text-decoration-none\">\n              {{ element.name }}\n            </a>\n            <p class=\"mb-0 text-secondary\">\n              <!-- !element?.user_client condition added to check if user has user_client record -->\n              {{ !element?.user_client ? '' : element?.user_client?.is_enabled ? 'Enabled' : 'Disabled' }}\n            </p>\n          </td>\n        </ng-container>\n\n        <!-- Email Column -->\n        <ng-container matColumnDef=\"email\">\n          <th mat-header-cell mat-sort-header=\"email\" *matHeaderCellDef> Email </th>\n          <td mat-cell *matCellDef=\"let element\"> {{element.email}} </td>\n        </ng-container>\n\n        <!-- Type Column -->\n        <ng-container matColumnDef=\"type\">\n          <th mat-header-cell mat-sort-header=\"user_type_id\" *matHeaderCellDef> User Type </th>\n          <td mat-cell *matCellDef=\"let element\"> {{ getUserType(element) }} </td>\n        </ng-container>\n\n        <!-- Roles Column -->\n        <ng-container matColumnDef=\"roles\">\n          <th mat-header-cell *matHeaderCellDef> Role </th>\n          <td mat-cell *matCellDef=\"let element\">\n            <div class=\"d-flex justify-content-start align-items-center gap-1 flex-wrap\">\n              <span\n                *ngFor=\"let role of element?.roles\"\n                class=\"badge bg-secondary\"\n              >\n                {{ role?.label }}\n              </span>\n            </div>\n          </td>\n        </ng-container>\n\n        <!-- Last Login Column -->\n        <ng-container matColumnDef=\"last_login\">\n          <th mat-header-cell *matHeaderCellDef> Last Login </th>\n          <td mat-cell *matCellDef=\"let element\">{{ element?.last_login | date:'medium' }}</td>\n        </ng-container>\n\n        <!-- Added By Column -->\n        <ng-container matColumnDef=\"added_by\">\n          <th mat-header-cell *matHeaderCellDef> Added By </th>\n          <td mat-cell *matCellDef=\"let element\">\n            <p class=\"mb-0\">{{ element?.creator?.name }}</p>\n            <p class=\"text-secondary\">{{ element?.created_at | date }}</p>\n          </td>\n        </ng-container>\n\n        <!-- Actions Column -->\n        <ng-container matColumnDef=\"actions\">\n          <th mat-header-cell *matHeaderCellDef> Action </th>\n          <td mat-cell *matCellDef=\"let element\">\n            <div fxLayout fxLayoutAlign=\"start center\" fxLayoutGap=\"5px\">\n              <button type=\"button\" mat-icon-button [routerLink]=\"[element.id]\">\n                <mat-icon>visibility</mat-icon>\n              </button>\n\n              <button *ngIf=\"currentUserService.hasPermission('user_update')\" type=\"button\" mat-icon-button\n                (click)=\"createOrEditUser(element)\">\n                <mat-icon>edit</mat-icon>\n              </button>\n\n              <button *ngIf=\"currentUserService.hasPermission('user_delete')\" type=\"button\" mat-icon-button\n                (click)=\"deleteUser(element)\">\n                <mat-icon>delete</mat-icon>\n              </button>\n              <app-user-enable-button [user]=\"element\" (onSave)=\"reload()\"></app-user-enable-button>\n            </div>\n          </td>\n        </ng-container>\n\n        <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n        <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n      </table>\n      <mat-progress-bar *ngIf=\"isWorking\" mode=\"indeterminate\"></mat-progress-bar>\n    </mat-card-content>\n  </mat-card>\n</div>\n", dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$5.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i7$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7$2.MatLabel, selector: "mat-label" }, { kind: "component", type: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i9.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i10.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i10.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i11.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i11.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i11.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i11.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i11.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i11.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i11.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i11.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i11.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i11.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i10$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i10$1.MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: i3$2.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i3$2.MatButtonToggle, selector: "mat-button-toggle", inputs: ["disableRipple", "aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "directive", type: i7.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i7.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i7.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "directive", type: i1$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$4.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$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i4.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "component", type: SearchableSelectorComponent, selector: "app-searchable-selector", inputs: ["valueField", "titleField", "subtitleField", "apiUrl", "multiple", "selectedValue", "enableSearch", "add", "addConfig", "edit", "editConfig", "sort", "sortBy", "searchField", "itemComponent", "items", "apiDataProperty", "cache", "perPage", "inDataSearch", "focusSearchOnOpen", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange"] }, { kind: "component", type: i5$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: UserEnableButtonComponent, selector: "app-user-enable-button", inputs: ["user", "isUseIcons"], outputs: ["onSave"] }, { kind: "pipe", type: i3.DatePipe, name: "date" }] });
 };
 UsersViewAllComponent = __decorate([
     UntilDestroy()
@@ -4401,7 +4408,7 @@ let AuditLogListComponent = class AuditLogListComponent extends TechlifyListingC
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AuditLogListComponent, deps: [{ token: i1$5.Router }, { token: i2$1.DomSanitizer }, { token: i1$4.FormBuilder }, { token: AuditLogService }, { token: RequestHelperService }, { token: i1$5.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AuditLogListComponent, selector: "app-audit-log-list", inputs: { objectId: "objectId", objectType: "objectType", showFilter: "showFilter", showExportButtons: "showExportButtons", userId: "userId", disableFilterPatchingFromUrl: "disableFilterPatchingFromUrl" }, viewQueries: [{ propertyName: "sort", first: true, predicate: MatSort, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<mat-card class=\"mb-3\">\n  <mat-card-content>\n    <div class=\"d-flex justify-content-between align-items-center gap-3\">\n      <div class=\"d-flex justify-content-start align-items-canter gap-2\" style=\"min-width: 200px\">\n        <h2 class=\"mb-0\">\n          Audit Logs\n        </h2>\n        <app-export-excel-button\n          *ngIf=\"showExportButtons\"\n          class=\"mt-1\"\n          matTooltip=\"Export\"\n          elementId=\"audit-logs-table\" name=\"AuditLogs\" [data]=\"excelData\">\n        </app-export-excel-button>\n      </div>\n\n      <app-audit-log-list-filter\n        class=\"w-100\"\n        *ngIf=\"showFilter\"\n        [filterForm]=\"filterForm\"\n        (valueChange)=\"filterChange($event)\"\n        [objectType]=\"objectType\"\n        [objectId]=\"objectId\"\n      ></app-audit-log-list-filter>\n    </div>\n  </mat-card-content>\n</mat-card>\n\n<mat-card class=\"p-0\">\n  <mat-card-content>\n    <table\n      mat-table\n      [dataSource]=\"models\" matSort class=\"w-100\"\n      id=\"audit-logs-table\"\n      infiniteScroll\n      [infiniteScrollDistance]=\"2\"\n      [infiniteScrollThrottle]=\"50\"\n      (scrolled)=\"onScroll()\"\n      [fromRoot]=\"true\"\n    >\n\n      <!-- Index Column -->\n      <ng-container matColumnDef=\"index\">\n        <th mat-header-cell *matHeaderCellDef> # </th>\n        <td mat-cell *matCellDef=\"let i = index\"> {{ i+1 }} </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"id\">\n        <th mat-header-cell *matHeaderCellDef> Log # </th>\n        <td mat-cell *matCellDef=\"let auditLog\">\n          {{auditLog?.id}}\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"object_type\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header> Model Type </th>\n        <td mat-cell *matCellDef=\"let auditLog;\"> {{ auditLog.object_type }} </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"object_id\">\n        <th mat-header-cell *matHeaderCellDef> Model # </th>\n        <td mat-cell *matCellDef=\"let auditLog\">\n          {{auditLog?.object_id}}\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"action\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header> Action </th>\n        <td mat-cell *matCellDef=\"let auditLog;\"> {{ auditLog?.action }} </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"created_at\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header> Created At </th>\n        <td mat-cell *matCellDef=\"let auditLog\">\n          {{auditLog?.created_at | date:'medium'}}\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"user.email\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header> Created By </th>\n        <td mat-cell *matCellDef=\"let auditLog\">\n          <p class=\"mb-0\">{{auditLog?.user?.name}}</p>\n          <small class=\"text-secondary\">{{ auditLog?.user?.email }}</small>\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"changes\">\n        <th mat-header-cell *matHeaderCellDef> Changes</th>\n        <td mat-cell *matCellDef=\"let auditLog\">\n          <div\n            class=\"px-3\"\n            [innerHtml]=\"sanitizer.bypassSecurityTrustHtml(getTransformedChanges(auditLog))\">\n          </div>\n        </td>\n      </ng-container>\n\n      <!-- Actions Column -->\n      <ng-container matColumnDef=\"actions\">\n        <th mat-header-cell *matHeaderCellDef> Actions </th>\n        <td mat-cell *matCellDef=\"let auditLog\">\n          <mat-icon (click)=\"logClicked(auditLog);$event.stopPropagation();\" >visibility</mat-icon>\n        </td>\n      </ng-container>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky:true\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n    </table>\n    <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isWorking\"></mat-progress-bar>\n  </mat-card-content>\n</mat-card>\n", styles: ["tr.row-hover:hover{background-color:#dcdcdc}.scroll-container{height:800px;overflow-y:auto}:host ::ng-deep #old-value{margin-right:5px;background-color:#f08080}:host ::ng-deep #new-value{background-color:#98fb98}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ExportExcelButtonComponent, selector: "app-export-excel-button", inputs: ["name", "data"] }, { kind: "component", type: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i10.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i10.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i11.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i11.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i11.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i11.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i11.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i11.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i11.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i11.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i11.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i11.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i10$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i10$1.MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: i4.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "component", type: AuditLogListFilterComponent, selector: "app-audit-log-list-filter", inputs: ["filterForm", "objectId", "objectType"], outputs: ["valueChange"] }, { kind: "component", type: i23.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "pipe", type: i3.DatePipe, name: "date" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AuditLogListComponent, selector: "app-audit-log-list", inputs: { objectId: "objectId", objectType: "objectType", showFilter: "showFilter", showExportButtons: "showExportButtons", userId: "userId", disableFilterPatchingFromUrl: "disableFilterPatchingFromUrl" }, viewQueries: [{ propertyName: "sort", first: true, predicate: MatSort, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<mat-card class=\"mb-3\">\n  <mat-card-content>\n    <div class=\"d-flex justify-content-between align-items-center gap-3\">\n      <div class=\"d-flex justify-content-start align-items-canter gap-2\" style=\"min-width: 200px\">\n        <h2 class=\"mb-0\">\n          Audit Logs\n        </h2>\n        <app-export-excel-button\n          *ngIf=\"showExportButtons\"\n          class=\"mt-1\"\n          matTooltip=\"Export\"\n          elementId=\"audit-logs-table\" name=\"AuditLogs\" [data]=\"excelData\">\n        </app-export-excel-button>\n      </div>\n\n      <app-audit-log-list-filter\n        class=\"w-100\"\n        *ngIf=\"showFilter\"\n        [filterForm]=\"filterForm\"\n        (valueChange)=\"filterChange($event)\"\n        [objectType]=\"objectType\"\n        [objectId]=\"objectId\"\n      ></app-audit-log-list-filter>\n    </div>\n  </mat-card-content>\n</mat-card>\n\n<mat-card class=\"p-0\">\n  <mat-card-content>\n    <table\n      mat-table\n      [dataSource]=\"models\" matSort class=\"w-100\"\n      id=\"audit-logs-table\"\n      infiniteScroll\n      [infiniteScrollDistance]=\"2\"\n      [infiniteScrollThrottle]=\"50\"\n      (scrolled)=\"onScroll()\"\n      [fromRoot]=\"true\"\n    >\n\n      <!-- Index Column -->\n      <ng-container matColumnDef=\"index\">\n        <th mat-header-cell *matHeaderCellDef> # </th>\n        <td mat-cell *matCellDef=\"let i = index\"> {{ i+1 }} </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"id\">\n        <th mat-header-cell *matHeaderCellDef> Log # </th>\n        <td mat-cell *matCellDef=\"let auditLog\">\n          {{auditLog?.id}}\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"object_type\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header> Model Type </th>\n        <td mat-cell *matCellDef=\"let auditLog;\"> {{ auditLog.object_type }} </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"object_id\">\n        <th mat-header-cell *matHeaderCellDef> Model # </th>\n        <td mat-cell *matCellDef=\"let auditLog\">\n          {{auditLog?.object_id}}\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"action\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header> Action </th>\n        <td mat-cell *matCellDef=\"let auditLog;\"> {{ auditLog?.action }} </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"created_at\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header> Created At </th>\n        <td mat-cell *matCellDef=\"let auditLog\">\n          {{auditLog?.created_at | date:'medium'}}\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"user.email\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header> Created By </th>\n        <td mat-cell *matCellDef=\"let auditLog\">\n          <p class=\"mb-0\">{{auditLog?.user?.name}}</p>\n          <small class=\"text-secondary\">{{ auditLog?.user?.email }}</small>\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"changes\">\n        <th mat-header-cell *matHeaderCellDef> Changes</th>\n        <td mat-cell *matCellDef=\"let auditLog\">\n          <div\n            class=\"px-3\"\n            [innerHtml]=\"sanitizer.bypassSecurityTrustHtml(getTransformedChanges(auditLog))\">\n          </div>\n        </td>\n      </ng-container>\n\n      <!-- Actions Column -->\n      <ng-container matColumnDef=\"actions\">\n        <th mat-header-cell *matHeaderCellDef> Actions </th>\n        <td mat-cell *matCellDef=\"let auditLog\">\n          <mat-icon (click)=\"logClicked(auditLog);$event.stopPropagation();\" >visibility</mat-icon>\n        </td>\n      </ng-container>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky:true\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n    </table>\n    <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isWorking\"></mat-progress-bar>\n  </mat-card-content>\n</mat-card>\n", styles: ["tr.row-hover:hover{background-color:#dcdcdc}.scroll-container{height:800px;overflow-y:auto}:host ::ng-deep #old-value{margin-right:5px;background-color:#f08080}:host ::ng-deep #new-value{background-color:#98fb98}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ExportExcelButtonComponent, selector: "app-export-excel-button", inputs: ["name", "data"] }, { kind: "component", type: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i10.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i10.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i11.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i11.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i11.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i11.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i11.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i11.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i11.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i11.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i11.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i11.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i10$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i10$1.MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: i4.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "component", type: AuditLogListFilterComponent, selector: "app-audit-log-list-filter", inputs: ["filterForm", "objectId", "objectType"], outputs: ["valueChange"] }, { kind: "component", type: i5$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "pipe", type: i3.DatePipe, name: "date" }] });
 };
 AuditLogListComponent = __decorate([
     UntilDestroy()
@@ -4426,6 +4433,176 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 args: [MatSort, { static: true }]
             }] } });
 
+class UserClientService extends TechlifyServiceBaseClass {
+    constructor(httpService) {
+        super(httpService, 'user-clients');
+    }
+    enable(userClient, params) {
+        return this.http.put(`api/user-clients/${userClient?.id}/enable`, { params });
+    }
+    disable(userClient, params) {
+        return this.http.put(`api/user-clients/${userClient?.id}/disable`, { params });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UserClientService, deps: [{ token: HttpService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UserClientService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UserClientService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return [{ type: HttpService }]; } });
+
+class UserClientEnableDisableButtonComponent {
+    credentialsService;
+    currentUserService;
+    service;
+    alertService;
+    userClient;
+    saved = new EventEmitter();
+    user;
+    isWorking = false;
+    constructor(credentialsService, currentUserService, service, alertService) {
+        this.credentialsService = credentialsService;
+        this.currentUserService = currentUserService;
+        this.service = service;
+        this.alertService = alertService;
+        this.user = this.credentialsService.credentials.user;
+    }
+    ngOnInit() {
+    }
+    enable() {
+        this.isWorking = true;
+        this.service.enable(this.userClient).subscribe({
+            next: (response) => {
+                this.isWorking = false;
+                this.saved.emit(response?.item);
+                this.alertService.addAlert('User enabled for the client.', 'success');
+            },
+            error: () => (this.isWorking = false)
+        });
+    }
+    disable() {
+        this.isWorking = true;
+        this.service.disable(this.userClient).subscribe({
+            next: (response) => {
+                this.isWorking = false;
+                this.saved.emit(response?.item);
+                this.alertService.addAlert('User disabled for the client.', 'success');
+            },
+            error: () => (this.isWorking = false)
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UserClientEnableDisableButtonComponent, deps: [{ token: CredentialsService }, { token: CurrentUserService }, { token: UserClientService }, { token: AlertService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: UserClientEnableDisableButtonComponent, selector: "app-user-client-enable-disable-button", inputs: { userClient: "userClient" }, outputs: { saved: "saved" }, ngImport: i0, template: "<button\n  type=\"button\"\n  mat-stroked-button color=\"warn\"\n  *ngIf=\"userClient?.is_enabled && userClient?.user_id != user?.id\"\n  [disabled]=\"isWorking\"\n  (click)=\"disable()\"\n>\n  Disable\n</button>\n<button\n  mat-raised-button color=\"primary\"\n  *ngIf=\"!userClient?.is_enabled && userClient?.user_id != user?.id\"\n  [disabled]=\"isWorking\"\n  type=\"button\"\n  (click)=\"enable()\"\n>\n  Enable\n</button>\n", styles: [""], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UserClientEnableDisableButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-user-client-enable-disable-button', template: "<button\n  type=\"button\"\n  mat-stroked-button color=\"warn\"\n  *ngIf=\"userClient?.is_enabled && userClient?.user_id != user?.id\"\n  [disabled]=\"isWorking\"\n  (click)=\"disable()\"\n>\n  Disable\n</button>\n<button\n  mat-raised-button color=\"primary\"\n  *ngIf=\"!userClient?.is_enabled && userClient?.user_id != user?.id\"\n  [disabled]=\"isWorking\"\n  type=\"button\"\n  (click)=\"enable()\"\n>\n  Enable\n</button>\n" }]
+        }], ctorParameters: function () { return [{ type: CredentialsService }, { type: CurrentUserService }, { type: UserClientService }, { type: AlertService }]; }, propDecorators: { userClient: [{
+                type: Input
+            }], saved: [{
+                type: Output
+            }] } });
+
+class UserClientsListComponent extends TechlifyListingControllerInterface {
+    service;
+    user;
+    displayedColumns = [
+        '#',
+        'Name',
+        'Added On',
+        'Status',
+        'Action'
+    ];
+    constructor(service) {
+        super();
+        this.service = service;
+    }
+    ngOnInit() {
+        this.loadData();
+    }
+    loadData() {
+        if (!this.user) {
+            return;
+        }
+        this.isWorking = true;
+        const params = {
+            user_ids: this.user?.id,
+        };
+        this.service.index(params).subscribe({
+            next: (response) => {
+                this.models = this.models.concat(response?.data);
+                this.isWorking = false;
+            },
+            error: () => (this.isWorking = false)
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UserClientsListComponent, deps: [{ token: UserClientService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: UserClientsListComponent, selector: "app-user-clients-list", inputs: { user: "user" }, usesInheritance: true, ngImport: i0, template: "<mat-card>\n  <mat-card-content>\n    <table mat-table [dataSource]=\"models\" class=\"w-100\">\n\n      <!-- # Column -->\n      <ng-container matColumnDef=\"#\">\n        <th mat-header-cell *matHeaderCellDef> # </th>\n        <td mat-cell *matCellDef=\"let element; let i = index\"> {{ i + 1 }} </td>\n      </ng-container>\n\n      <!-- Name Column -->\n      <ng-container matColumnDef=\"Name\">\n        <th mat-header-cell *matHeaderCellDef> Name </th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.client?.name }}\n        </td>\n      </ng-container>\n\n      <!-- Added On Column -->\n      <ng-container matColumnDef=\"Added On\">\n        <th mat-header-cell *matHeaderCellDef> Added On </th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.created_at | date }}\n        </td>\n      </ng-container>\n\n      <!-- Status Column -->\n      <ng-container matColumnDef=\"Status\">\n        <th mat-header-cell *matHeaderCellDef> Status </th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.is_enabled ? 'Enabled' : 'Disabled' }}\n        </td>\n      </ng-container>\n\n      <!-- Action Column -->\n      <ng-container matColumnDef=\"Action\">\n        <th mat-header-cell *matHeaderCellDef> Action </th>\n        <td mat-cell *matCellDef=\"let element\">\n          <app-user-client-enable-disable-button\n            [userClient]=\"element\"\n            (saved)=\"reload()\"\n          ></app-user-client-enable-disable-button>\n        </td>\n      </ng-container>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n    </table>\n\n    <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isWorking\"></mat-progress-bar>\n\n  </mat-card-content>\n</mat-card>\n", styles: [""], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i11.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i11.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i11.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i11.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i11.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i11.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i11.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i11.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i11.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i11.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i10$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i10$1.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i5$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: UserClientEnableDisableButtonComponent, selector: "app-user-client-enable-disable-button", inputs: ["userClient"], outputs: ["saved"] }, { kind: "pipe", type: i3.DatePipe, name: "date" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UserClientsListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-user-clients-list', template: "<mat-card>\n  <mat-card-content>\n    <table mat-table [dataSource]=\"models\" class=\"w-100\">\n\n      <!-- # Column -->\n      <ng-container matColumnDef=\"#\">\n        <th mat-header-cell *matHeaderCellDef> # </th>\n        <td mat-cell *matCellDef=\"let element; let i = index\"> {{ i + 1 }} </td>\n      </ng-container>\n\n      <!-- Name Column -->\n      <ng-container matColumnDef=\"Name\">\n        <th mat-header-cell *matHeaderCellDef> Name </th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.client?.name }}\n        </td>\n      </ng-container>\n\n      <!-- Added On Column -->\n      <ng-container matColumnDef=\"Added On\">\n        <th mat-header-cell *matHeaderCellDef> Added On </th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.created_at | date }}\n        </td>\n      </ng-container>\n\n      <!-- Status Column -->\n      <ng-container matColumnDef=\"Status\">\n        <th mat-header-cell *matHeaderCellDef> Status </th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.is_enabled ? 'Enabled' : 'Disabled' }}\n        </td>\n      </ng-container>\n\n      <!-- Action Column -->\n      <ng-container matColumnDef=\"Action\">\n        <th mat-header-cell *matHeaderCellDef> Action </th>\n        <td mat-cell *matCellDef=\"let element\">\n          <app-user-client-enable-disable-button\n            [userClient]=\"element\"\n            (saved)=\"reload()\"\n          ></app-user-client-enable-disable-button>\n        </td>\n      </ng-container>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n    </table>\n\n    <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isWorking\"></mat-progress-bar>\n\n  </mat-card-content>\n</mat-card>\n" }]
+        }], ctorParameters: function () { return [{ type: UserClientService }]; }, propDecorators: { user: [{
+                type: Input
+            }] } });
+
+class UserSessionService extends TechlifyServiceBaseClass {
+    constructor(httpService) {
+        super(httpService, 'user-sessions');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UserSessionService, deps: [{ token: HttpService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UserSessionService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UserSessionService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return [{ type: HttpService }]; } });
+
+class UserSessionsComponent extends TechlifyListingControllerInterface {
+    service;
+    user;
+    displayedColumns = [
+        '#',
+        'Started On',
+        'Expires At',
+    ];
+    constructor(service) {
+        super();
+        this.service = service;
+    }
+    ngOnInit() {
+        this.loadData();
+    }
+    loadData() {
+        if (!this.user) {
+            return;
+        }
+        this.isWorking = true;
+        const params = {
+            user_ids: this.user?.id,
+        };
+        this.service.index(params).subscribe({
+            next: (response) => {
+                this.models = this.models.concat(response?.data);
+                this.isWorking = false;
+            },
+            error: () => (this.isWorking = false)
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UserSessionsComponent, deps: [{ token: UserSessionService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: UserSessionsComponent, selector: "app-user-sessions", inputs: { user: "user" }, usesInheritance: true, ngImport: i0, template: "<mat-card>\n  <mat-card-content>\n    <table mat-table [dataSource]=\"models\" class=\"w-100\">\n\n      <!-- # Column -->\n      <ng-container matColumnDef=\"#\">\n        <th mat-header-cell *matHeaderCellDef> # </th>\n        <td mat-cell *matCellDef=\"let element; let i = index\"> {{ i + 1 }} </td>\n      </ng-container>\n\n      <!-- Started On Column -->\n      <ng-container matColumnDef=\"Started On\">\n        <th mat-header-cell *matHeaderCellDef> Started On </th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.created_at | date:'medium' }}\n        </td>\n      </ng-container>\n\n      <!-- Expires At Column -->\n      <ng-container matColumnDef=\"Expires At\">\n        <th mat-header-cell *matHeaderCellDef> Expires At </th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.expires_at | date:'medium' }}\n        </td>\n      </ng-container>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n    </table>\n\n    <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isWorking\"></mat-progress-bar>\n\n  </mat-card-content>\n</mat-card>\n", styles: [""], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i11.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i11.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i11.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i11.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i11.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i11.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i11.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i11.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i11.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i11.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i10$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i10$1.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i5$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "pipe", type: i3.DatePipe, name: "date" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UserSessionsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-user-sessions', template: "<mat-card>\n  <mat-card-content>\n    <table mat-table [dataSource]=\"models\" class=\"w-100\">\n\n      <!-- # Column -->\n      <ng-container matColumnDef=\"#\">\n        <th mat-header-cell *matHeaderCellDef> # </th>\n        <td mat-cell *matCellDef=\"let element; let i = index\"> {{ i + 1 }} </td>\n      </ng-container>\n\n      <!-- Started On Column -->\n      <ng-container matColumnDef=\"Started On\">\n        <th mat-header-cell *matHeaderCellDef> Started On </th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.created_at | date:'medium' }}\n        </td>\n      </ng-container>\n\n      <!-- Expires At Column -->\n      <ng-container matColumnDef=\"Expires At\">\n        <th mat-header-cell *matHeaderCellDef> Expires At </th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ element?.expires_at | date:'medium' }}\n        </td>\n      </ng-container>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n    </table>\n\n    <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isWorking\"></mat-progress-bar>\n\n  </mat-card-content>\n</mat-card>\n" }]
+        }], ctorParameters: function () { return [{ type: UserSessionService }]; }, propDecorators: { user: [{
+                type: Input
+            }] } });
+
 /**
  * Controller used to view a single user
  *
@@ -4439,8 +4616,6 @@ class UserViewComponent {
     http;
     dialog;
     currentUserService;
-    user;
-    currentUser;
     constructor(userService, route, config, http, dialog, currentUserService) {
         this.userService = userService;
         this.route = route;
@@ -4450,6 +4625,9 @@ class UserViewComponent {
         this.currentUserService = currentUserService;
         this.currentUser = this.currentUserService.getUser();
     }
+    user;
+    currentUser;
+    UserTypeEnum = UserTypeEnum;
     ngOnInit() {
         this.route.params.subscribe(params => {
             if (params.id !== undefined) {
@@ -4481,11 +4659,11 @@ class UserViewComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UserViewComponent, deps: [{ token: UserService }, { token: i1$5.ActivatedRoute }, { token: ConfigService }, { token: HttpService }, { token: i1.MatDialog }, { token: CurrentUserService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: UserViewComponent, selector: "user-view", ngImport: i0, template: "<div class=\"mat-typography m-4\" *ngIf=\"user\">\n  <h1 class=\"text-center\">{{user.name}}</h1>\n\n  <div class=\"border\">\n    <mat-tab-group>\n      <mat-tab label=\"Basic Information\">\n        <ng-template matTabContent>\n          <div class=\"row m-4\">\n            <div class=\"col-4\">\n              <div class=\"bordered-section\">\n                <div class=\"row\" *ngIf=\"currentUser?.user_type_id != 3\">\n                  <button type=\"button\" mat-icon-button (click)=\"editUser(user)\">\n                    <mat-icon>edit</mat-icon>\n                  </button>\n                  <button mat-stroked-button color=\"warn\" *ngIf=\"!user.user_client?.is_enabled\"\n                    (click)=\"enableOrDisableUser('enable')\">\n                    Enable\n                  </button>\n                  <button mat-stroked-button color=\"primary\" *ngIf=\"user.user_client?.is_enabled\"\n                    (click)=\"enableOrDisableUser('disable')\">Disable</button>\n                </div>\n\n                <div class=\"row\">\n                  <label class=\"col-sm-4 control-label\">Name:</label>\n                  <div class=\"col-sm-8\">{{user?.name}}</div>\n                </div>\n                <div class=\"row\">\n                  <label class=\"col-sm-4 control-label\">Email:</label>\n                  <div class=\"col-sm-8\">{{user?.email}}</div>\n                </div>\n                <div class=\"row\">\n                  <label class=\"col-sm-4 control-label\">Type:</label>\n                  <div class=\"col-sm-8\">{{user?.type?.title}}</div>\n                </div>\n                <div class=\"row\">\n                  <label class=\"col-sm-4 control-label\">Status:</label>\n                  <div class=\"col-sm-8\">{{user?.user_client?.is_enabled ? 'Enabled' : 'Disabled' }}\n                  </div>\n                </div>\n                <div class=\"row\">\n                  <label class=\"col-sm-4 control-label\">Role:</label>\n                  <div class=\"col-sm-8\">\n                    <span *ngFor=\"let role of user?.roles\">\n                      <button class=\"btn btn-outline-dark btn-xs mb-2\">{{role?.label}}</button>\n                      &nbsp;\n                    </span>\n                  </div>\n                </div>\n                <div class=\"row\">\n                  <label class=\"col-sm-4 control-label\">Signature:</label>\n                  <div class=\"col-sm-8\">\n                    <span *ngIf=\"user?.signature\">\n                      <img src=\"{{user?.signature_url}}\" alt=\"\" width=\"250px\" />\n                    </span>\n                    <span *ngIf=\"!user?.signature\">\n                      No Signature Added\n                    </span>\n\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </ng-template>\n      </mat-tab>\n      <mat-tab label=\"Login History\">\n        <ng-template matTabContent>\n          <app-login-history-for-user [userId]=\"user?.id\"></app-login-history-for-user>\n        </ng-template>\n      </mat-tab>\n      <mat-tab label=\"Activity Logs\">\n        <ng-template matTabContent>\n          <app-audit-log-list objectType=\"User\" [objectId]=\"user?.id\" [showExportButtons]=\"false\">\n          </app-audit-log-list>\n        </ng-template>\n      </mat-tab>\n    </mat-tab-group>\n  </div>\n\n</div>\n", styles: [".user-node .page-title{margin:20px 0 0}.user-node #information-tabs-wrapper .nav-pills .nav-link{border-radius:0;border:1px solid #007bff;border-right:none;width:190px}.user-node #information-tabs-wrapper .tab-content{padding:20px;border:1px solid #007bff;width:calc(100vw - 200px)}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: LoginHistoryForUserComponent, selector: "app-login-history-for-user", inputs: ["userId"] }, { kind: "component", type: AuditLogListComponent, selector: "app-audit-log-list", inputs: ["objectId", "objectType", "showFilter", "showExportButtons", "userId", "disableFilterPatchingFromUrl"] }, { kind: "directive", type: i11$2.MatTabContent, selector: "[matTabContent]" }, { kind: "component", type: i11$2.MatTab, selector: "mat-tab", inputs: ["disabled"], exportAs: ["matTab"] }, { kind: "component", type: i11$2.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple", "fitInkBarToContent", "mat-stretch-tabs"], exportAs: ["matTabGroup"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: UserViewComponent, selector: "user-view", ngImport: i0, template: "<div class=\"mat-typography m-4\" *ngIf=\"user\">\n  <h1 class=\"text-center\">{{user.name}}</h1>\n\n  <div class=\"border\">\n    <mat-tab-group>\n      <mat-tab label=\"Basic Information\">\n        <ng-template matTabContent>\n          <div class=\"row m-4\">\n            <div class=\"col-4\">\n              <div class=\"bordered-section\">\n                <div class=\"row\" *ngIf=\"currentUser?.user_type_id != 3\">\n                  <button type=\"button\" mat-icon-button (click)=\"editUser(user)\">\n                    <mat-icon>edit</mat-icon>\n                  </button>\n                  <button mat-stroked-button color=\"warn\" *ngIf=\"!user.user_client?.is_enabled\"\n                    (click)=\"enableOrDisableUser('enable')\">\n                    Enable\n                  </button>\n                  <button mat-stroked-button color=\"primary\" *ngIf=\"user.user_client?.is_enabled\"\n                    (click)=\"enableOrDisableUser('disable')\">Disable</button>\n                </div>\n\n                <div class=\"row\">\n                  <label class=\"col-sm-4 control-label\">Name:</label>\n                  <div class=\"col-sm-8\">{{user?.name}}</div>\n                </div>\n                <div class=\"row\">\n                  <label class=\"col-sm-4 control-label\">Email:</label>\n                  <div class=\"col-sm-8\">{{user?.email}}</div>\n                </div>\n                <div class=\"row\">\n                  <label class=\"col-sm-4 control-label\">Type:</label>\n                  <div class=\"col-sm-8\">{{user?.type?.title}}</div>\n                </div>\n                <div class=\"row\">\n                  <label class=\"col-sm-4 control-label\">Status:</label>\n                  <div class=\"col-sm-8\">{{user?.user_client?.is_enabled ? 'Enabled' : 'Disabled' }}\n                  </div>\n                </div>\n                <div class=\"row\">\n                  <label class=\"col-sm-4 control-label\">Role:</label>\n                  <div class=\"col-sm-8\">\n                    <span *ngFor=\"let role of user?.roles\">\n                      <button class=\"btn btn-outline-dark btn-xs mb-2\">{{role?.label}}</button>\n                      &nbsp;\n                    </span>\n                  </div>\n                </div>\n                <div class=\"row\">\n                  <label class=\"col-sm-4 control-label\">Signature:</label>\n                  <div class=\"col-sm-8\">\n                    <span *ngIf=\"user?.signature\">\n                      <img src=\"{{user?.signature_url}}\" alt=\"\" width=\"250px\" />\n                    </span>\n                    <span *ngIf=\"!user?.signature\">\n                      No Signature Added\n                    </span>\n\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </ng-template>\n      </mat-tab>\n      <mat-tab label=\"Login History\">\n        <ng-template matTabContent>\n          <app-login-history-for-user [userId]=\"user?.id\"></app-login-history-for-user>\n        </ng-template>\n      </mat-tab>\n      <mat-tab label=\"Activity Logs\">\n        <ng-template matTabContent>\n          <app-audit-log-list objectType=\"User\" [objectId]=\"user?.id\" [showExportButtons]=\"false\">\n          </app-audit-log-list>\n        </ng-template>\n      </mat-tab>\n      <mat-tab label=\"Tenants\" *ngIf=\"currentUser?.user_type_id === UserTypeEnum.ADMIN\">\n        <ng-template matTabContent>\n          <app-user-clients-list [user]=\"user\"></app-user-clients-list>\n        </ng-template>\n      </mat-tab>\n      <mat-tab label=\"Sessions\">\n        <ng-template matTabContent>\n          <app-user-sessions [user]=\"user\"></app-user-sessions>\n        </ng-template>\n      </mat-tab>\n    </mat-tab-group>\n  </div>\n\n</div>\n", styles: [".user-node .page-title{margin:20px 0 0}.user-node #information-tabs-wrapper .nav-pills .nav-link{border-radius:0;border:1px solid #007bff;border-right:none;width:190px}.user-node #information-tabs-wrapper .tab-content{padding:20px;border:1px solid #007bff;width:calc(100vw - 200px)}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: LoginHistoryForUserComponent, selector: "app-login-history-for-user", inputs: ["userId"] }, { kind: "component", type: AuditLogListComponent, selector: "app-audit-log-list", inputs: ["objectId", "objectType", "showFilter", "showExportButtons", "userId", "disableFilterPatchingFromUrl"] }, { kind: "directive", type: i11$2.MatTabContent, selector: "[matTabContent]" }, { kind: "component", type: i11$2.MatTab, selector: "mat-tab", inputs: ["disabled"], exportAs: ["matTab"] }, { kind: "component", type: i11$2.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple", "fitInkBarToContent", "mat-stretch-tabs"], exportAs: ["matTabGroup"] }, { kind: "component", type: UserClientsListComponent, selector: "app-user-clients-list", inputs: ["user"] }, { kind: "component", type: UserSessionsComponent, selector: "app-user-sessions", inputs: ["user"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UserViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'user-view', template: "<div class=\"mat-typography m-4\" *ngIf=\"user\">\n  <h1 class=\"text-center\">{{user.name}}</h1>\n\n  <div class=\"border\">\n    <mat-tab-group>\n      <mat-tab label=\"Basic Information\">\n        <ng-template matTabContent>\n          <div class=\"row m-4\">\n            <div class=\"col-4\">\n              <div class=\"bordered-section\">\n                <div class=\"row\" *ngIf=\"currentUser?.user_type_id != 3\">\n                  <button type=\"button\" mat-icon-button (click)=\"editUser(user)\">\n                    <mat-icon>edit</mat-icon>\n                  </button>\n                  <button mat-stroked-button color=\"warn\" *ngIf=\"!user.user_client?.is_enabled\"\n                    (click)=\"enableOrDisableUser('enable')\">\n                    Enable\n                  </button>\n                  <button mat-stroked-button color=\"primary\" *ngIf=\"user.user_client?.is_enabled\"\n                    (click)=\"enableOrDisableUser('disable')\">Disable</button>\n                </div>\n\n                <div class=\"row\">\n                  <label class=\"col-sm-4 control-label\">Name:</label>\n                  <div class=\"col-sm-8\">{{user?.name}}</div>\n                </div>\n                <div class=\"row\">\n                  <label class=\"col-sm-4 control-label\">Email:</label>\n                  <div class=\"col-sm-8\">{{user?.email}}</div>\n                </div>\n                <div class=\"row\">\n                  <label class=\"col-sm-4 control-label\">Type:</label>\n                  <div class=\"col-sm-8\">{{user?.type?.title}}</div>\n                </div>\n                <div class=\"row\">\n                  <label class=\"col-sm-4 control-label\">Status:</label>\n                  <div class=\"col-sm-8\">{{user?.user_client?.is_enabled ? 'Enabled' : 'Disabled' }}\n                  </div>\n                </div>\n                <div class=\"row\">\n                  <label class=\"col-sm-4 control-label\">Role:</label>\n                  <div class=\"col-sm-8\">\n                    <span *ngFor=\"let role of user?.roles\">\n                      <button class=\"btn btn-outline-dark btn-xs mb-2\">{{role?.label}}</button>\n                      &nbsp;\n                    </span>\n                  </div>\n                </div>\n                <div class=\"row\">\n                  <label class=\"col-sm-4 control-label\">Signature:</label>\n                  <div class=\"col-sm-8\">\n                    <span *ngIf=\"user?.signature\">\n                      <img src=\"{{user?.signature_url}}\" alt=\"\" width=\"250px\" />\n                    </span>\n                    <span *ngIf=\"!user?.signature\">\n                      No Signature Added\n                    </span>\n\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </ng-template>\n      </mat-tab>\n      <mat-tab label=\"Login History\">\n        <ng-template matTabContent>\n          <app-login-history-for-user [userId]=\"user?.id\"></app-login-history-for-user>\n        </ng-template>\n      </mat-tab>\n      <mat-tab label=\"Activity Logs\">\n        <ng-template matTabContent>\n          <app-audit-log-list objectType=\"User\" [objectId]=\"user?.id\" [showExportButtons]=\"false\">\n          </app-audit-log-list>\n        </ng-template>\n      </mat-tab>\n    </mat-tab-group>\n  </div>\n\n</div>\n", styles: [".user-node .page-title{margin:20px 0 0}.user-node #information-tabs-wrapper .nav-pills .nav-link{border-radius:0;border:1px solid #007bff;border-right:none;width:190px}.user-node #information-tabs-wrapper .tab-content{padding:20px;border:1px solid #007bff;width:calc(100vw - 200px)}\n"] }]
+            args: [{ selector: 'user-view', template: "<div class=\"mat-typography m-4\" *ngIf=\"user\">\n  <h1 class=\"text-center\">{{user.name}}</h1>\n\n  <div class=\"border\">\n    <mat-tab-group>\n      <mat-tab label=\"Basic Information\">\n        <ng-template matTabContent>\n          <div class=\"row m-4\">\n            <div class=\"col-4\">\n              <div class=\"bordered-section\">\n                <div class=\"row\" *ngIf=\"currentUser?.user_type_id != 3\">\n                  <button type=\"button\" mat-icon-button (click)=\"editUser(user)\">\n                    <mat-icon>edit</mat-icon>\n                  </button>\n                  <button mat-stroked-button color=\"warn\" *ngIf=\"!user.user_client?.is_enabled\"\n                    (click)=\"enableOrDisableUser('enable')\">\n                    Enable\n                  </button>\n                  <button mat-stroked-button color=\"primary\" *ngIf=\"user.user_client?.is_enabled\"\n                    (click)=\"enableOrDisableUser('disable')\">Disable</button>\n                </div>\n\n                <div class=\"row\">\n                  <label class=\"col-sm-4 control-label\">Name:</label>\n                  <div class=\"col-sm-8\">{{user?.name}}</div>\n                </div>\n                <div class=\"row\">\n                  <label class=\"col-sm-4 control-label\">Email:</label>\n                  <div class=\"col-sm-8\">{{user?.email}}</div>\n                </div>\n                <div class=\"row\">\n                  <label class=\"col-sm-4 control-label\">Type:</label>\n                  <div class=\"col-sm-8\">{{user?.type?.title}}</div>\n                </div>\n                <div class=\"row\">\n                  <label class=\"col-sm-4 control-label\">Status:</label>\n                  <div class=\"col-sm-8\">{{user?.user_client?.is_enabled ? 'Enabled' : 'Disabled' }}\n                  </div>\n                </div>\n                <div class=\"row\">\n                  <label class=\"col-sm-4 control-label\">Role:</label>\n                  <div class=\"col-sm-8\">\n                    <span *ngFor=\"let role of user?.roles\">\n                      <button class=\"btn btn-outline-dark btn-xs mb-2\">{{role?.label}}</button>\n                      &nbsp;\n                    </span>\n                  </div>\n                </div>\n                <div class=\"row\">\n                  <label class=\"col-sm-4 control-label\">Signature:</label>\n                  <div class=\"col-sm-8\">\n                    <span *ngIf=\"user?.signature\">\n                      <img src=\"{{user?.signature_url}}\" alt=\"\" width=\"250px\" />\n                    </span>\n                    <span *ngIf=\"!user?.signature\">\n                      No Signature Added\n                    </span>\n\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </ng-template>\n      </mat-tab>\n      <mat-tab label=\"Login History\">\n        <ng-template matTabContent>\n          <app-login-history-for-user [userId]=\"user?.id\"></app-login-history-for-user>\n        </ng-template>\n      </mat-tab>\n      <mat-tab label=\"Activity Logs\">\n        <ng-template matTabContent>\n          <app-audit-log-list objectType=\"User\" [objectId]=\"user?.id\" [showExportButtons]=\"false\">\n          </app-audit-log-list>\n        </ng-template>\n      </mat-tab>\n      <mat-tab label=\"Tenants\" *ngIf=\"currentUser?.user_type_id === UserTypeEnum.ADMIN\">\n        <ng-template matTabContent>\n          <app-user-clients-list [user]=\"user\"></app-user-clients-list>\n        </ng-template>\n      </mat-tab>\n      <mat-tab label=\"Sessions\">\n        <ng-template matTabContent>\n          <app-user-sessions [user]=\"user\"></app-user-sessions>\n        </ng-template>\n      </mat-tab>\n    </mat-tab-group>\n  </div>\n\n</div>\n", styles: [".user-node .page-title{margin:20px 0 0}.user-node #information-tabs-wrapper .nav-pills .nav-link{border-radius:0;border:1px solid #007bff;border-right:none;width:190px}.user-node #information-tabs-wrapper .tab-content{padding:20px;border:1px solid #007bff;width:calc(100vw - 200px)}\n"] }]
         }], ctorParameters: function () { return [{ type: UserService }, { type: i1$5.ActivatedRoute }, { type: ConfigService }, { type: HttpService }, { type: i1.MatDialog }, { type: CurrentUserService }]; } });
 
 const routes$G = [
@@ -4842,7 +5020,7 @@ let EntityFilesViewAllComponent = class EntityFilesViewAllComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EntityFilesViewAllComponent, deps: [{ token: EntityFileService }, { token: i3.Location }, { token: AlertService }, { token: i1.MatDialog }, { token: i1$4.UntypedFormBuilder }, { token: ErrorHandlerService }, { token: CurrentUserService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EntityFilesViewAllComponent, selector: "app-entity-files-view-all", inputs: { entityId: "entityId", entityType: "entityType", viewOnly: "viewOnly", removeSearch: "removeSearch", hideTitleAndDetails: "hideTitleAndDetails", displayMode: "displayMode", allowMultipleFiles: "allowMultipleFiles", allowBulkUpdate: "allowBulkUpdate", useTechlifyTags: "useTechlifyTags", techlifyTagCategories: "techlifyTagCategories", techlifyTagConfig: "techlifyTagConfig", title: "title", permission: "permission" }, ngImport: i0, template: "<div>\n  <div fxLayout=\"column\" [fxHide]=\"!this.documentIds.length\" fxHide.xs fxHide.sm fxHide.lt-md>\n    <mat-card class=\"update_card\" *ngIf=\"this.documentIds.length\">\n      <mat-card-header>\n        <mat-card-title>\n          <div mat-dialog-title class=\"mt-2 ml-2 text-center\">\n            <div>Update Selected Rows</div>\n          </div>\n        </mat-card-title>\n      </mat-card-header>\n      <mat-card-content fxLayout=\"column\">\n        <form [formGroup]=\"updateRowForm\">\n          <div fxLayout=\"column\">\n\n            <mat-form-field fxFlex=\"100%\" class=\"px-1\">\n              <input matInput formControlName=\"title\" placeholder=\"Title\" autocomplete=\"off\" />\n              <button mat-button *ngIf=\"updateRowForm.get('title').value || updateRowForm.get('title').value===0\"\n                matSuffix mat-icon-button style=\"color:red\" (click)=\"resetFieldValueOfRow('title', $event)\">\n                <mat-icon>close</mat-icon>\n              </button>\n              <button mat-button matSuffix mat-icon-button type=\"button\" style=\"color:green\" *ngIf=\"(updateRowForm.get('title').value || updateRowForm.get('title').value===0)\n                && updateRowForm.get('title').valid\" (click)=\"bulkUpdate('title')\">\n                <mat-icon>done</mat-icon>\n              </button>\n            </mat-form-field>\n\n            <mat-form-field fxFlex=\"100%\" class=\"px-1\">\n              <textarea matInput formControlName=\"details\" placeholder=\"Details\" autocomplete=\"off\"></textarea>\n              <button mat-button *ngIf=\"updateRowForm.get('details').value || updateRowForm.get('details').value===0\"\n                matSuffix mat-icon-button style=\"color:red\" (click)=\"resetFieldValueOfRow('details', $event)\">\n                <mat-icon>close</mat-icon>\n              </button>\n              <button mat-button matSuffix mat-icon-button type=\"button\" style=\"color:green\" *ngIf=\"(updateRowForm.get('details').value || updateRowForm.get('details').value===0)\n                && updateRowForm.get('details').valid\" (click)=\"bulkUpdate('details')\">\n                <mat-icon>done</mat-icon>\n              </button>\n            </mat-form-field>\n\n            <ng-container *ngIf=\"useTechlifyTags\">\n              <mat-form-field>\n                <mat-label>Tag</mat-label>\n                <app-techlify-tagger-tag-form-field modelType=\"entity-file\" formControlName=\"tag_ids\"\n                  placeholder=\"Enter new tag\">\n                </app-techlify-tagger-tag-form-field>\n                <button mat-button *ngIf=\"updateRowForm.get('tag_ids').value || updateRowForm.get('tag_ids').value===0\"\n                  matSuffix mat-icon-button style=\"color:red\" (click)=\"resetFieldValueOfRow('tag_ids', $event)\">\n                  <mat-icon>close</mat-icon>\n                </button>\n                <button mat-button matSuffix mat-icon-button type=\"button\" style=\"color:green\" *ngIf=\"(updateRowForm.get('tag_ids').value || updateRowForm.get('tag_ids').value===0)\n                  && updateRowForm.get('tag_ids').valid\" (click)=\"bulkUpdate('tag_ids')\">\n                  <mat-icon>done</mat-icon>\n                </button>\n              </mat-form-field>\n            </ng-container>\n          </div>\n        </form>\n      </mat-card-content>\n    </mat-card>\n\n  </div>\n\n  <div>\n    <div class=\"mat-typography\" *ngIf=\"!displayMode\">\n      <div fxLayout=\"row\" fxLayoutGap=\"1rem\">\n        <mat-card [fxFlex]=\"this.documentIds.length ? '100%' : '70%'\">\n          <mat-card-content>\n            <div class=\"d-flex justify-content-start align-items-center gap-2\">\n              <mat-icon>\n                description\n              </mat-icon>\n              <h3 class=\"font-weight-bold primary-color mb-0\">\n                {{title}}s\n              </h3>\n              <mat-icon\n                color=\"primary\"\n                class=\"cursor-pointer\"\n                *ngIf=\"!viewOnly && isShowCreateAction\"\n                (click)=\"addEntityFile()\"\n              >\n                add\n              </mat-icon>\n              <div>\n              </div>\n            </div>\n          </mat-card-content>\n          <mat-card-content>\n            <form [formGroup]=\"filterFormGroup\" style=\"font-size: 10px;\" fxLayout fxLayoutGap=\"1rem\">\n              <mat-form-field *ngIf=\"!removeSearch\" appearance=\"outline\">\n                <mat-label>Search</mat-label>\n                <input type=\"text\" matInput formControlName=\"title\" placeholder=\"Search\" name=\"title\"\n                  autocomplete=\"off\" />\n                <button mat-button *ngIf=\"filters.title\" matSuffix mat-icon-button\n                  (click)=\"resetFieldValue($event, 'title')\">\n                  <mat-icon>close</mat-icon>\n                </button>\n              </mat-form-field>\n\n              <ng-container *ngIf=\"useTechlifyTags\">\n                <mat-form-field>\n                  <mat-label>Tag</mat-label>\n                  <app-techlify-tagger-tag-form-field [categories]=\"techlifyTagCategories\" formControlName=\"tag_ids\"\n                    placeholder=\"Select Tags\" [config]=\"techlifyTagConfig\"></app-techlify-tagger-tag-form-field>\n                </mat-form-field>\n              </ng-container>\n\n\n              <button mat-icon-button (click)=\"reload()\" *ngIf=\"isReload\" type=\"button\" matTooltip=\"Refresh\">\n                <mat-icon>\n                  <span class=\"material-icons\">\n                    refresh\n                  </span>\n                </mat-icon>\n              </button>\n            </form>\n          </mat-card-content>\n          <mat-card-content class=\"entity-file-card p-0\">\n            <table mat-table [dataSource]=\"entityFiles\" class=\"w-100\" matSort multiTemplateDataRows infiniteScroll\n              [infiniteScrollDistance]=\"1.5\" [infiniteScrollThrottle]=\"50\" (scrolled)=\"onScroll()\">\n\n              <!-- Select Column -->\n              <ng-container matColumnDef=\"select\">\n                <th mat-header-cell *matHeaderCellDef style=\"width:30px\">\n                  <mat-checkbox name=\"employee\" [(ngModel)]=\"isAllSelected\" (change)=\"selectAll()\">\n                  </mat-checkbox>\n                </th>\n                <td mat-cell *matCellDef=\"let element\" style=\"width:30px\">\n                  <mat-checkbox name=\"employee[{{element?.id}}]\" (click)=\"$event.stopPropagation()\"\n                    [(ngModel)]=\"element.is_selected\" (change)=\"employeeListModified($event, element)\"\n                    [disabled]=\"!entityFiles.length\">\n                  </mat-checkbox>\n                </td>\n              </ng-container>\n\n              <!-- Index Column -->\n              <ng-container matColumnDef=\"index\">\n                <th mat-header-cell *matHeaderCellDef> # </th>\n                <td mat-cell *matCellDef=\"let element; let i = dataIndex\"> {{ i+1 }} </td>\n              </ng-container>\n\n              <!-- Title Column -->\n              <ng-container matColumnDef=\"title\">\n                <th mat-header-cell *matHeaderCellDef> Title </th>\n                <td mat-cell *matCellDef=\"let element\">\n                  <div>\n                    <span>\n                      {{element.title}}\n                    </span>\n                    <span>\n                      <a href=\"{{element.url}}\" target=\"_blank\" class=\"text-decoration-none text-muted\">\n                        <button mat-icon-button type=\"button\">\n                          <mat-icon>download</mat-icon>\n                        </button>\n                      </a>\n                    </span>\n                  </div>\n                </td>\n              </ng-container>\n\n              <!-- Details Column -->\n              <ng-container matColumnDef=\"details\">\n                <th mat-header-cell *matHeaderCellDef> Details </th>\n                <td mat-cell *matCellDef=\"let element\">\n                  <app-read-more [text]=\"element.details\" [maxLength]=\"50\"></app-read-more>\n                </td>\n              </ng-container>\n\n              <!-- File size Column -->\n              <ng-container matColumnDef=\"file_size\">\n                <th mat-header-cell *matHeaderCellDef> File Size </th>\n                <td mat-cell *matCellDef=\"let element\"> {{ sizeOf(element.file_size)}} </td>\n              </ng-container>\n\n              <!-- Tags Column -->\n              <ng-container matColumnDef=\"tag\">\n                <th mat-header-cell *matHeaderCellDef> Tag </th>\n                <td mat-cell *matCellDef=\"let element\" class=\"p-1\">\n                  <mat-chip-listbox aria-label=\"Tags\">\n                    <mat-chip *ngFor=\"let tag of element.tags\">\n                      {{ tag?.title }}\n                    </mat-chip>\n                  </mat-chip-listbox>\n                </td>\n              </ng-container>\n\n              <!-- Uploaded On Column -->\n              <ng-container matColumnDef=\"uploaded_on\">\n                <th mat-header-cell *matHeaderCellDef> Uploaded On </th>\n                <td mat-cell *matCellDef=\"let element\">\n                  <div>\n                    {{element.created_at | date: 'mediumDate'}}\n                  </div>\n                  <div class=\"text-muted\">\n                    By {{element.creator?.name}}\n                  </div>\n                </td>\n              </ng-container>\n\n              <!-- Actions Column -->\n              <ng-container matColumnDef=\"actions\">\n                <th mat-header-cell *matHeaderCellDef> Actions </th>\n                <td mat-cell *matCellDef=\"let element\" style=\"min-width:110px\" class=\"text-muted\">\n                  <button *ngIf=\"isShowUpdateAction\" type=\"button\" mat-icon-button (click)=\"editEntityFile(element)\">\n                    <mat-icon>edit</mat-icon>\n                  </button>\n                  <button *ngIf=\"isShowDeleteAction\" type=\"button\" mat-icon-button (click)=\"deleteEntityFile(element)\">\n                    <mat-icon>delete</mat-icon>\n                  </button>\n                </td>\n              </ng-container>\n\n              <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n              <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n            </table>\n\n            <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isWorking\"></mat-progress-bar>\n          </mat-card-content>\n        </mat-card>\n        <section fxFlex=\"30%\" *ngIf=\"!this.documentIds.length\">\n          <app-file-dropper [config]=\"fileConfig\" (fileChanged)=\"fileChanged($event)\" [fileArray]=\"fileList\">\n          </app-file-dropper>\n        </section>\n      </div>\n    </div>\n  </div>\n\n  <div fxLayout=\"row wrap\" fxLayoutGap=\"1rem\" class=\"mat-typography p-4\" *ngIf=\"displayMode\">\n    <div *ngFor=\"let efile of entityFiles\">\n      <app-document-viewer [file]=\"efile.file\" [fileUrl]=\"efile.url\" [config]=\"this.viewerConfig\" [disableEdit]=\"true\">\n      </app-document-viewer>\n      <a href=\"{{efile.url}}\" target=\"_blank\">\n        <button mat-button type=\"button\">View</button>\n      </a>\n    </div>\n  </div>\n</div>\n", styles: ["th.mat-header-cell,td.mat-cell,td.mat-footer-cell{padding:2px}.entity-file-card{overflow-x:auto}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$4.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$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i7.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i7.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i7.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i2.DefaultShowHideDirective, selector: "  [fxShow], [fxShow.print],  [fxShow.xs], [fxShow.sm], [fxShow.md], [fxShow.lg], [fxShow.xl],  [fxShow.lt-sm], [fxShow.lt-md], [fxShow.lt-lg], [fxShow.lt-xl],  [fxShow.gt-xs], [fxShow.gt-sm], [fxShow.gt-md], [fxShow.gt-lg],  [fxHide], [fxHide.print],  [fxHide.xs], [fxHide.sm], [fxHide.md], [fxHide.lg], [fxHide.xl],  [fxHide.lt-sm], [fxHide.lt-md], [fxHide.lt-lg], [fxHide.lt-xl],  [fxHide.gt-xs], [fxHide.gt-sm], [fxHide.gt-md], [fxHide.gt-lg]", inputs: ["fxShow", "fxShow.print", "fxShow.xs", "fxShow.sm", "fxShow.md", "fxShow.lg", "fxShow.xl", "fxShow.lt-sm", "fxShow.lt-md", "fxShow.lt-lg", "fxShow.lt-xl", "fxShow.gt-xs", "fxShow.gt-sm", "fxShow.gt-md", "fxShow.gt-lg", "fxHide", "fxHide.print", "fxHide.xs", "fxHide.sm", "fxHide.md", "fxHide.lg", "fxHide.xl", "fxHide.lt-sm", "fxHide.lt-md", "fxHide.lt-lg", "fxHide.lt-xl", "fxHide.gt-xs", "fxHide.gt-sm", "fxHide.gt-md", "fxHide.gt-lg"] }, { kind: "component", type: FileDropperComponent, selector: "app-file-dropper", inputs: ["fileArray", "config", "styles"], outputs: ["fileChanged"] }, { kind: "component", type: DocumentViewerComponent, selector: "app-document-viewer", inputs: ["config", "file", "fileUrl", "disableEdit"], outputs: ["remove"] }, { kind: "directive", type: i4.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "component", type: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i8.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "component", type: i7$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i7$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i9.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i10.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i11.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i11.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i11.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i11.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i11.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i11.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i11.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i11.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i11.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i11.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i10$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i10$1.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i10$1.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i10$1.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "component", type: i7$1.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disabled", "disableRipple", "tabIndex", "role", "id", "aria-label", "aria-description", "value", "removable", "highlighted"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "component", type: i7$1.MatChipListbox, selector: "mat-chip-listbox", inputs: ["tabIndex", "multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: TechlifyTaggerTagFormFieldComponent, selector: "app-techlify-tagger-tag-form-field", inputs: ["config", "modelType", "modelId", "allTags", "categories", "defaultCreateCategory", "required", "disabled", "value", "placeholder"] }, { kind: "component", type: ReadMoreComponent, selector: "app-read-more", inputs: ["text", "maxLength"] }, { kind: "component", type: i23.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "pipe", type: i3.DatePipe, name: "date" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EntityFilesViewAllComponent, selector: "app-entity-files-view-all", inputs: { entityId: "entityId", entityType: "entityType", viewOnly: "viewOnly", removeSearch: "removeSearch", hideTitleAndDetails: "hideTitleAndDetails", displayMode: "displayMode", allowMultipleFiles: "allowMultipleFiles", allowBulkUpdate: "allowBulkUpdate", useTechlifyTags: "useTechlifyTags", techlifyTagCategories: "techlifyTagCategories", techlifyTagConfig: "techlifyTagConfig", title: "title", permission: "permission" }, ngImport: i0, template: "<div>\n  <div fxLayout=\"column\" [fxHide]=\"!this.documentIds.length\" fxHide.xs fxHide.sm fxHide.lt-md>\n    <mat-card class=\"update_card\" *ngIf=\"this.documentIds.length\">\n      <mat-card-header>\n        <mat-card-title>\n          <div mat-dialog-title class=\"mt-2 ml-2 text-center\">\n            <div>Update Selected Rows</div>\n          </div>\n        </mat-card-title>\n      </mat-card-header>\n      <mat-card-content fxLayout=\"column\">\n        <form [formGroup]=\"updateRowForm\">\n          <div fxLayout=\"column\">\n\n            <mat-form-field fxFlex=\"100%\" class=\"px-1\">\n              <input matInput formControlName=\"title\" placeholder=\"Title\" autocomplete=\"off\" />\n              <button mat-button *ngIf=\"updateRowForm.get('title').value || updateRowForm.get('title').value===0\"\n                matSuffix mat-icon-button style=\"color:red\" (click)=\"resetFieldValueOfRow('title', $event)\">\n                <mat-icon>close</mat-icon>\n              </button>\n              <button mat-button matSuffix mat-icon-button type=\"button\" style=\"color:green\" *ngIf=\"(updateRowForm.get('title').value || updateRowForm.get('title').value===0)\n                && updateRowForm.get('title').valid\" (click)=\"bulkUpdate('title')\">\n                <mat-icon>done</mat-icon>\n              </button>\n            </mat-form-field>\n\n            <mat-form-field fxFlex=\"100%\" class=\"px-1\">\n              <textarea matInput formControlName=\"details\" placeholder=\"Details\" autocomplete=\"off\"></textarea>\n              <button mat-button *ngIf=\"updateRowForm.get('details').value || updateRowForm.get('details').value===0\"\n                matSuffix mat-icon-button style=\"color:red\" (click)=\"resetFieldValueOfRow('details', $event)\">\n                <mat-icon>close</mat-icon>\n              </button>\n              <button mat-button matSuffix mat-icon-button type=\"button\" style=\"color:green\" *ngIf=\"(updateRowForm.get('details').value || updateRowForm.get('details').value===0)\n                && updateRowForm.get('details').valid\" (click)=\"bulkUpdate('details')\">\n                <mat-icon>done</mat-icon>\n              </button>\n            </mat-form-field>\n\n            <ng-container *ngIf=\"useTechlifyTags\">\n              <mat-form-field>\n                <mat-label>Tag</mat-label>\n                <app-techlify-tagger-tag-form-field modelType=\"entity-file\" formControlName=\"tag_ids\"\n                  placeholder=\"Enter new tag\">\n                </app-techlify-tagger-tag-form-field>\n                <button mat-button *ngIf=\"updateRowForm.get('tag_ids').value || updateRowForm.get('tag_ids').value===0\"\n                  matSuffix mat-icon-button style=\"color:red\" (click)=\"resetFieldValueOfRow('tag_ids', $event)\">\n                  <mat-icon>close</mat-icon>\n                </button>\n                <button mat-button matSuffix mat-icon-button type=\"button\" style=\"color:green\" *ngIf=\"(updateRowForm.get('tag_ids').value || updateRowForm.get('tag_ids').value===0)\n                  && updateRowForm.get('tag_ids').valid\" (click)=\"bulkUpdate('tag_ids')\">\n                  <mat-icon>done</mat-icon>\n                </button>\n              </mat-form-field>\n            </ng-container>\n          </div>\n        </form>\n      </mat-card-content>\n    </mat-card>\n\n  </div>\n\n  <div>\n    <div class=\"mat-typography\" *ngIf=\"!displayMode\">\n      <div fxLayout=\"row\" fxLayoutGap=\"1rem\">\n        <mat-card [fxFlex]=\"this.documentIds.length ? '100%' : '70%'\">\n          <mat-card-content>\n            <div class=\"d-flex justify-content-start align-items-center gap-2\">\n              <mat-icon>\n                description\n              </mat-icon>\n              <h3 class=\"font-weight-bold primary-color mb-0\">\n                {{title}}s\n              </h3>\n              <mat-icon\n                color=\"primary\"\n                class=\"cursor-pointer\"\n                *ngIf=\"!viewOnly && isShowCreateAction\"\n                (click)=\"addEntityFile()\"\n              >\n                add\n              </mat-icon>\n              <div>\n              </div>\n            </div>\n          </mat-card-content>\n          <mat-card-content>\n            <form [formGroup]=\"filterFormGroup\" style=\"font-size: 10px;\" fxLayout fxLayoutGap=\"1rem\">\n              <mat-form-field *ngIf=\"!removeSearch\" appearance=\"outline\">\n                <mat-label>Search</mat-label>\n                <input type=\"text\" matInput formControlName=\"title\" placeholder=\"Search\" name=\"title\"\n                  autocomplete=\"off\" />\n                <button mat-button *ngIf=\"filters.title\" matSuffix mat-icon-button\n                  (click)=\"resetFieldValue($event, 'title')\">\n                  <mat-icon>close</mat-icon>\n                </button>\n              </mat-form-field>\n\n              <ng-container *ngIf=\"useTechlifyTags\">\n                <mat-form-field>\n                  <mat-label>Tag</mat-label>\n                  <app-techlify-tagger-tag-form-field [categories]=\"techlifyTagCategories\" formControlName=\"tag_ids\"\n                    placeholder=\"Select Tags\" [config]=\"techlifyTagConfig\"></app-techlify-tagger-tag-form-field>\n                </mat-form-field>\n              </ng-container>\n\n\n              <button mat-icon-button (click)=\"reload()\" *ngIf=\"isReload\" type=\"button\" matTooltip=\"Refresh\">\n                <mat-icon>\n                  <span class=\"material-icons\">\n                    refresh\n                  </span>\n                </mat-icon>\n              </button>\n            </form>\n          </mat-card-content>\n          <mat-card-content class=\"entity-file-card p-0\">\n            <table mat-table [dataSource]=\"entityFiles\" class=\"w-100\" matSort multiTemplateDataRows infiniteScroll\n              [infiniteScrollDistance]=\"1.5\" [infiniteScrollThrottle]=\"50\" (scrolled)=\"onScroll()\">\n\n              <!-- Select Column -->\n              <ng-container matColumnDef=\"select\">\n                <th mat-header-cell *matHeaderCellDef style=\"width:30px\">\n                  <mat-checkbox name=\"employee\" [(ngModel)]=\"isAllSelected\" (change)=\"selectAll()\">\n                  </mat-checkbox>\n                </th>\n                <td mat-cell *matCellDef=\"let element\" style=\"width:30px\">\n                  <mat-checkbox name=\"employee[{{element?.id}}]\" (click)=\"$event.stopPropagation()\"\n                    [(ngModel)]=\"element.is_selected\" (change)=\"employeeListModified($event, element)\"\n                    [disabled]=\"!entityFiles.length\">\n                  </mat-checkbox>\n                </td>\n              </ng-container>\n\n              <!-- Index Column -->\n              <ng-container matColumnDef=\"index\">\n                <th mat-header-cell *matHeaderCellDef> # </th>\n                <td mat-cell *matCellDef=\"let element; let i = dataIndex\"> {{ i+1 }} </td>\n              </ng-container>\n\n              <!-- Title Column -->\n              <ng-container matColumnDef=\"title\">\n                <th mat-header-cell *matHeaderCellDef> Title </th>\n                <td mat-cell *matCellDef=\"let element\">\n                  <div>\n                    <span>\n                      {{element.title}}\n                    </span>\n                    <span>\n                      <a href=\"{{element.url}}\" target=\"_blank\" class=\"text-decoration-none text-muted\">\n                        <button mat-icon-button type=\"button\">\n                          <mat-icon>download</mat-icon>\n                        </button>\n                      </a>\n                    </span>\n                  </div>\n                </td>\n              </ng-container>\n\n              <!-- Details Column -->\n              <ng-container matColumnDef=\"details\">\n                <th mat-header-cell *matHeaderCellDef> Details </th>\n                <td mat-cell *matCellDef=\"let element\">\n                  <app-read-more [text]=\"element.details\" [maxLength]=\"50\"></app-read-more>\n                </td>\n              </ng-container>\n\n              <!-- File size Column -->\n              <ng-container matColumnDef=\"file_size\">\n                <th mat-header-cell *matHeaderCellDef> File Size </th>\n                <td mat-cell *matCellDef=\"let element\"> {{ sizeOf(element.file_size)}} </td>\n              </ng-container>\n\n              <!-- Tags Column -->\n              <ng-container matColumnDef=\"tag\">\n                <th mat-header-cell *matHeaderCellDef> Tag </th>\n                <td mat-cell *matCellDef=\"let element\" class=\"p-1\">\n                  <mat-chip-listbox aria-label=\"Tags\">\n                    <mat-chip *ngFor=\"let tag of element.tags\">\n                      {{ tag?.title }}\n                    </mat-chip>\n                  </mat-chip-listbox>\n                </td>\n              </ng-container>\n\n              <!-- Uploaded On Column -->\n              <ng-container matColumnDef=\"uploaded_on\">\n                <th mat-header-cell *matHeaderCellDef> Uploaded On </th>\n                <td mat-cell *matCellDef=\"let element\">\n                  <div>\n                    {{element.created_at | date: 'mediumDate'}}\n                  </div>\n                  <div class=\"text-muted\">\n                    By {{element.creator?.name}}\n                  </div>\n                </td>\n              </ng-container>\n\n              <!-- Actions Column -->\n              <ng-container matColumnDef=\"actions\">\n                <th mat-header-cell *matHeaderCellDef> Actions </th>\n                <td mat-cell *matCellDef=\"let element\" style=\"min-width:110px\" class=\"text-muted\">\n                  <button *ngIf=\"isShowUpdateAction\" type=\"button\" mat-icon-button (click)=\"editEntityFile(element)\">\n                    <mat-icon>edit</mat-icon>\n                  </button>\n                  <button *ngIf=\"isShowDeleteAction\" type=\"button\" mat-icon-button (click)=\"deleteEntityFile(element)\">\n                    <mat-icon>delete</mat-icon>\n                  </button>\n                </td>\n              </ng-container>\n\n              <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n              <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n            </table>\n\n            <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isWorking\"></mat-progress-bar>\n          </mat-card-content>\n        </mat-card>\n        <section fxFlex=\"30%\" *ngIf=\"!this.documentIds.length\">\n          <app-file-dropper [config]=\"fileConfig\" (fileChanged)=\"fileChanged($event)\" [fileArray]=\"fileList\">\n          </app-file-dropper>\n        </section>\n      </div>\n    </div>\n  </div>\n\n  <div fxLayout=\"row wrap\" fxLayoutGap=\"1rem\" class=\"mat-typography p-4\" *ngIf=\"displayMode\">\n    <div *ngFor=\"let efile of entityFiles\">\n      <app-document-viewer [file]=\"efile.file\" [fileUrl]=\"efile.url\" [config]=\"this.viewerConfig\" [disableEdit]=\"true\">\n      </app-document-viewer>\n      <a href=\"{{efile.url}}\" target=\"_blank\">\n        <button mat-button type=\"button\">View</button>\n      </a>\n    </div>\n  </div>\n</div>\n", styles: ["th.mat-header-cell,td.mat-cell,td.mat-footer-cell{padding:2px}.entity-file-card{overflow-x:auto}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$4.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$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i7.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i7.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i7.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i2.DefaultShowHideDirective, selector: "  [fxShow], [fxShow.print],  [fxShow.xs], [fxShow.sm], [fxShow.md], [fxShow.lg], [fxShow.xl],  [fxShow.lt-sm], [fxShow.lt-md], [fxShow.lt-lg], [fxShow.lt-xl],  [fxShow.gt-xs], [fxShow.gt-sm], [fxShow.gt-md], [fxShow.gt-lg],  [fxHide], [fxHide.print],  [fxHide.xs], [fxHide.sm], [fxHide.md], [fxHide.lg], [fxHide.xl],  [fxHide.lt-sm], [fxHide.lt-md], [fxHide.lt-lg], [fxHide.lt-xl],  [fxHide.gt-xs], [fxHide.gt-sm], [fxHide.gt-md], [fxHide.gt-lg]", inputs: ["fxShow", "fxShow.print", "fxShow.xs", "fxShow.sm", "fxShow.md", "fxShow.lg", "fxShow.xl", "fxShow.lt-sm", "fxShow.lt-md", "fxShow.lt-lg", "fxShow.lt-xl", "fxShow.gt-xs", "fxShow.gt-sm", "fxShow.gt-md", "fxShow.gt-lg", "fxHide", "fxHide.print", "fxHide.xs", "fxHide.sm", "fxHide.md", "fxHide.lg", "fxHide.xl", "fxHide.lt-sm", "fxHide.lt-md", "fxHide.lt-lg", "fxHide.lt-xl", "fxHide.gt-xs", "fxHide.gt-sm", "fxHide.gt-md", "fxHide.gt-lg"] }, { kind: "component", type: FileDropperComponent, selector: "app-file-dropper", inputs: ["fileArray", "config", "styles"], outputs: ["fileChanged"] }, { kind: "component", type: DocumentViewerComponent, selector: "app-document-viewer", inputs: ["config", "file", "fileUrl", "disableEdit"], outputs: ["remove"] }, { kind: "directive", type: i4.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "component", type: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i8.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "component", type: i7$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i7$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i9.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i10.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i11.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i11.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i11.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i11.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i11.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i11.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i11.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i11.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i11.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i11.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i10$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i10$1.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i10$1.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i10$1.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "component", type: i7$1.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disabled", "disableRipple", "tabIndex", "role", "id", "aria-label", "aria-description", "value", "removable", "highlighted"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "component", type: i7$1.MatChipListbox, selector: "mat-chip-listbox", inputs: ["tabIndex", "multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: TechlifyTaggerTagFormFieldComponent, selector: "app-techlify-tagger-tag-form-field", inputs: ["config", "modelType", "modelId", "allTags", "categories", "defaultCreateCategory", "required", "disabled", "value", "placeholder"] }, { kind: "component", type: ReadMoreComponent, selector: "app-read-more", inputs: ["text", "maxLength"] }, { kind: "component", type: i5$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "pipe", type: i3.DatePipe, name: "date" }] });
 };
 EntityFilesViewAllComponent = __decorate([
     UntilDestroy()
@@ -5060,7 +5238,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Output
             }] } });
 
-class NoteListComponent {
+class NoteListComponent extends TechlifyListingControllerInterface {
     noteService;
     dialog;
     relatedModelId;
@@ -5068,20 +5246,19 @@ class NoteListComponent {
     readonly = false;
     labelText = 'Note';
     commentsView = false;
-    notes = [];
     filters;
     displayedColumns = [
         'index',
         'note',
         'actions'
     ];
-    page = 1;
-    lastPage = 1;
     constructor(noteService, dialog) {
+        super();
         this.noteService = noteService;
         this.dialog = dialog;
+        this.lastPage = 0;
         this.filters = {};
-        this.filters.sort_by = "created_at|DESC";
+        this.filters.sort_by = 'created_at|DESC';
     }
     ngOnInit() {
         if (this.readonly) {
@@ -5091,15 +5268,19 @@ class NoteListComponent {
         this.filters.model_type = this.modelType;
         this.loadData();
     }
-    async loadData() {
-        const result = await this.noteService.getNotes({ ...this.filters, page: this.page });
-        this.notes = this.notes.concat(result.data);
-        this.page = result.current_page;
-        this.lastPage = result.last_page;
+    loadData() {
+        this.isWorking = true;
+        this.noteService.getNotes({ ...this.filters, page: this.page }).then((result) => {
+            this.models = this.models.concat(result?.data);
+            this.lastPage = result?.last_page;
+            this.isWorking = false;
+        }, () => {
+            this.isWorking = false;
+        });
     }
     addNote() {
         const dialogRef = this.dialog.open(NoteFormComponent, {
-            width: "400px",
+            width: '400px',
             data: {
                 note: { related_model_id: this.relatedModelId, model_type: this.modelType },
                 labelText: this.labelText,
@@ -5108,16 +5289,15 @@ class NoteListComponent {
         });
         dialogRef.afterClosed().subscribe(result => {
             if (result) {
-                this.resetScroll();
-                this.loadData();
+                this.reload();
             }
         });
     }
     editNote(note) {
         const dialogRef = this.dialog.open(NoteFormComponent, {
-            width: "400px",
+            width: '400px',
             data: {
-                note: note,
+                note,
                 update: true,
                 labelText: this.labelText
             },
@@ -5125,14 +5305,13 @@ class NoteListComponent {
         });
         dialogRef.afterClosed().subscribe(result => {
             if (result) {
-                this.resetScroll();
-                this.loadData();
+                this.reload();
             }
         });
     }
     async deleteNote(note) {
         const dialogRef = this.dialog.open(ActionPopupComponent, {
-            width: "400px",
+            width: '400px',
             data: {
                 title: `Delete ${this.labelText}`,
                 message: `Are you sure to delete?`
@@ -5141,25 +5320,14 @@ class NoteListComponent {
         });
         dialogRef.afterClosed().subscribe(async (result) => {
             if (result) {
-                //Action confirmed
-                const result = await this.noteService.deleteNote(note);
-                this.notes = this.notes.filter((item) => item.id !== note.id);
+                // Action confirmed
+                await this.noteService.deleteNote(note);
+                this.models = this.models.filter((item) => item.id !== note.id);
             }
         });
     }
-    resetScroll() {
-        this.page = 1;
-        this.lastPage = 1;
-        this.notes = [];
-    }
-    onScroll() {
-        if (this.page < this.lastPage) {
-            this.page += 1;
-            this.loadData();
-        }
-    }
     commentAction(event) {
-        if (event.type === "save") {
+        if (event.type === 'save') {
             if (event.value.id) {
                 this.editComment(event.value);
                 return;
@@ -5171,23 +5339,23 @@ class NoteListComponent {
     }
     async editComment(comment) {
         const result = await this.noteService.editNote(comment);
-        let index = this.notes.findIndex((x) => x.id === comment.id);
+        const index = this.models.findIndex((x) => x.id === comment.id);
         if (index !== -1) {
-            this.notes[index] = result.item;
+            this.models[index] = result.item;
         }
     }
     async addComment(comment) {
         comment.related_model_id = this.relatedModelId;
         comment.model_type = this.modelType;
         const result = await this.noteService.addNote(comment);
-        this.notes.push(result.item);
+        this.models.push(result.item);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NoteListComponent, deps: [{ token: NoteService }, { token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NoteListComponent, selector: "app-note-list", inputs: { relatedModelId: "relatedModelId", modelType: "modelType", readonly: "readonly", labelText: "labelText", commentsView: "commentsView" }, ngImport: i0, template: "<div fxLayout=\"column\" fxLayoutGap=\"1.5rem\" class=\"m-4\" *ngIf=\"!commentsView\">\n\n  <div fxLayout fxLayoutAlign=\"center center\" fxLayoutGap=\"1rem\">\n    <h3 class=\"m-0 font-weight-bold mr-3\">{{labelText}}s</h3>\n    <button class=\"d-print-none\" *ngIf=\"!readonly\" mat-raised-button color=\"primary\" type=\"button\" (click)=\"addNote()\">+\n      Add</button>\n  </div>\n\n  <div class=\"w-100 scroll-container\" infiniteScroll [infiniteScrollDistance]=\"1\" [infiniteScrollThrottle]=\"50\"\n    (scrolled)=\"onScroll()\" [scrollWindow]=\"false\">\n    <table mat-table [dataSource]=\"notes\" class=\"w-100\" multiTemplateDataRows>\n\n      <!-- Index Column -->\n      <ng-container matColumnDef=\"index\">\n        <th mat-header-cell *matHeaderCellDef> # </th>\n        <td mat-cell *matCellDef=\"let note; let i = dataIndex\"> {{ i+1 }} </td>\n      </ng-container>\n\n\n      <ng-container matColumnDef=\"note\">\n        <th mat-header-cell *matHeaderCellDef> {{labelText}} </th>\n        <td mat-cell *matCellDef=\"let note\">\n          {{note?.note}}\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"actions\">\n        <th mat-header-cell *matHeaderCellDef class=\"d-print-none\"> Actions </th>\n        <td mat-cell *matCellDef=\"let note\" class=\"d-print-none\">\n          <button type=\"button\" mat-icon-button (click)=\"editNote(note)\">\n            <mat-icon>edit</mat-icon>\n          </button>\n          <button type=\"button\" mat-icon-button (click)=\"deleteNote(note)\">\n            <mat-icon>delete</mat-icon>\n          </button>\n        </td>\n      </ng-container>\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n    </table>\n  </div>\n\n</div>\n\n<div fxLayout=\"column\" fxLayoutGap=\"1.5rem\" *ngIf=\"commentsView\">\n  <div fxLayout fxLayoutAlign=\"center center\" fxLayoutGap=\"1rem\">\n    <h3 class=\"m-0 font-weight-bold mr-3\">{{labelText}}s</h3>\n  </div>\n\n  <div fxLayout=\"column\" fxLayoutAlign=\"start\" fxFlex=\"100%\">\n    <div class=\"w-100 scroll-container jumbotron\" infiniteScroll [infiniteScrollDistance]=\"1\"\n      [infiniteScrollThrottle]=\"50\" (scrolled)=\"onScroll()\" [scrollWindow]=\"false\">\n      <app-comment-form [commentData]=\"comment\" (action)=\"commentAction($event)\" *ngFor=\"let comment of notes\">\n      </app-comment-form>\n      <app-comment-form (action)=\"commentAction($event)\"></app-comment-form>\n    </div>\n  </div>\n</div>\n", styles: [".scroll-container{max-height:400px;overflow-y:auto}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "directive", type: i7.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i7.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i7.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i7.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "component", type: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i11.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i11.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i11.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i11.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i11.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i11.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i11.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i11.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i11.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: CommentFormComponent, selector: "app-comment-form", inputs: ["commentData"], outputs: ["action"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NoteListComponent, selector: "app-note-list", inputs: { relatedModelId: "relatedModelId", modelType: "modelType", readonly: "readonly", labelText: "labelText", commentsView: "commentsView" }, usesInheritance: true, ngImport: i0, template: "<div fxLayout=\"column\" fxLayoutGap=\"1.5rem\" *ngIf=\"!commentsView\">\n\n  <div class=\"d-flex justify-content-center align-items-center gap-2\">\n    <h3 class=\"m-0 font-weight-bold mr-3\">{{labelText}}s</h3>\n    <mat-icon (click)=\"addNote()\" class=\"cursor-pointer d-print-none\" *ngIf=\"!readonly\">\n      add\n    </mat-icon>\n  </div>\n\n  <div class=\"w-100 scroll-container\" infiniteScroll [infiniteScrollDistance]=\"1\" [infiniteScrollThrottle]=\"50\"\n    (scrolled)=\"onScroll()\" [scrollWindow]=\"false\">\n    <table mat-table [dataSource]=\"models\" class=\"w-100\" multiTemplateDataRows>\n\n      <!-- Index Column -->\n      <ng-container matColumnDef=\"index\">\n        <th mat-header-cell *matHeaderCellDef> # </th>\n        <td mat-cell *matCellDef=\"let note; let i = dataIndex\"> {{ i+1 }} </td>\n      </ng-container>\n\n\n      <ng-container matColumnDef=\"note\">\n        <th mat-header-cell *matHeaderCellDef> {{labelText}} </th>\n        <td mat-cell *matCellDef=\"let note\">\n          {{note?.note}}\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"actions\">\n        <th mat-header-cell *matHeaderCellDef class=\"d-print-none\"> Actions </th>\n        <td mat-cell *matCellDef=\"let note\" class=\"d-print-none\">\n          <button type=\"button\" mat-icon-button (click)=\"editNote(note)\">\n            <mat-icon>edit</mat-icon>\n          </button>\n          <button type=\"button\" mat-icon-button (click)=\"deleteNote(note)\">\n            <mat-icon>delete</mat-icon>\n          </button>\n        </td>\n      </ng-container>\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n    </table>\n    <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isWorking\"></mat-progress-bar>\n  </div>\n\n</div>\n\n<div fxLayout=\"column\" fxLayoutGap=\"1.5rem\" *ngIf=\"commentsView\">\n  <div fxLayout fxLayoutAlign=\"center center\" fxLayoutGap=\"1rem\">\n    <h3 class=\"m-0 font-weight-bold mr-3\">{{labelText}}s</h3>\n  </div>\n\n  <div fxLayout=\"column\" fxLayoutAlign=\"start\" fxFlex=\"100%\">\n    <div class=\"w-100 scroll-container jumbotron\" infiniteScroll [infiniteScrollDistance]=\"1\"\n      [infiniteScrollThrottle]=\"50\" (scrolled)=\"onScroll()\" [scrollWindow]=\"false\">\n      <app-comment-form [commentData]=\"comment\" (action)=\"commentAction($event)\" *ngFor=\"let comment of models\">\n      </app-comment-form>\n      <app-comment-form (action)=\"commentAction($event)\"></app-comment-form>\n    </div>\n  </div>\n</div>\n", styles: [".scroll-container{max-height:400px;overflow-y:auto}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "directive", type: i7.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i7.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i7.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i7.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i11.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i11.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i11.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i11.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i11.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i11.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i11.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i11.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i11.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i5$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: CommentFormComponent, selector: "app-comment-form", inputs: ["commentData"], outputs: ["action"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NoteListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-note-list', template: "<div fxLayout=\"column\" fxLayoutGap=\"1.5rem\" class=\"m-4\" *ngIf=\"!commentsView\">\n\n  <div fxLayout fxLayoutAlign=\"center center\" fxLayoutGap=\"1rem\">\n    <h3 class=\"m-0 font-weight-bold mr-3\">{{labelText}}s</h3>\n    <button class=\"d-print-none\" *ngIf=\"!readonly\" mat-raised-button color=\"primary\" type=\"button\" (click)=\"addNote()\">+\n      Add</button>\n  </div>\n\n  <div class=\"w-100 scroll-container\" infiniteScroll [infiniteScrollDistance]=\"1\" [infiniteScrollThrottle]=\"50\"\n    (scrolled)=\"onScroll()\" [scrollWindow]=\"false\">\n    <table mat-table [dataSource]=\"notes\" class=\"w-100\" multiTemplateDataRows>\n\n      <!-- Index Column -->\n      <ng-container matColumnDef=\"index\">\n        <th mat-header-cell *matHeaderCellDef> # </th>\n        <td mat-cell *matCellDef=\"let note; let i = dataIndex\"> {{ i+1 }} </td>\n      </ng-container>\n\n\n      <ng-container matColumnDef=\"note\">\n        <th mat-header-cell *matHeaderCellDef> {{labelText}} </th>\n        <td mat-cell *matCellDef=\"let note\">\n          {{note?.note}}\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"actions\">\n        <th mat-header-cell *matHeaderCellDef class=\"d-print-none\"> Actions </th>\n        <td mat-cell *matCellDef=\"let note\" class=\"d-print-none\">\n          <button type=\"button\" mat-icon-button (click)=\"editNote(note)\">\n            <mat-icon>edit</mat-icon>\n          </button>\n          <button type=\"button\" mat-icon-button (click)=\"deleteNote(note)\">\n            <mat-icon>delete</mat-icon>\n          </button>\n        </td>\n      </ng-container>\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n    </table>\n  </div>\n\n</div>\n\n<div fxLayout=\"column\" fxLayoutGap=\"1.5rem\" *ngIf=\"commentsView\">\n  <div fxLayout fxLayoutAlign=\"center center\" fxLayoutGap=\"1rem\">\n    <h3 class=\"m-0 font-weight-bold mr-3\">{{labelText}}s</h3>\n  </div>\n\n  <div fxLayout=\"column\" fxLayoutAlign=\"start\" fxFlex=\"100%\">\n    <div class=\"w-100 scroll-container jumbotron\" infiniteScroll [infiniteScrollDistance]=\"1\"\n      [infiniteScrollThrottle]=\"50\" (scrolled)=\"onScroll()\" [scrollWindow]=\"false\">\n      <app-comment-form [commentData]=\"comment\" (action)=\"commentAction($event)\" *ngFor=\"let comment of notes\">\n      </app-comment-form>\n      <app-comment-form (action)=\"commentAction($event)\"></app-comment-form>\n    </div>\n  </div>\n</div>\n", styles: [".scroll-container{max-height:400px;overflow-y:auto}\n"] }]
+            args: [{ selector: 'app-note-list', template: "<div fxLayout=\"column\" fxLayoutGap=\"1.5rem\" *ngIf=\"!commentsView\">\n\n  <div class=\"d-flex justify-content-center align-items-center gap-2\">\n    <h3 class=\"m-0 font-weight-bold mr-3\">{{labelText}}s</h3>\n    <mat-icon (click)=\"addNote()\" class=\"cursor-pointer d-print-none\" *ngIf=\"!readonly\">\n      add\n    </mat-icon>\n  </div>\n\n  <div class=\"w-100 scroll-container\" infiniteScroll [infiniteScrollDistance]=\"1\" [infiniteScrollThrottle]=\"50\"\n    (scrolled)=\"onScroll()\" [scrollWindow]=\"false\">\n    <table mat-table [dataSource]=\"models\" class=\"w-100\" multiTemplateDataRows>\n\n      <!-- Index Column -->\n      <ng-container matColumnDef=\"index\">\n        <th mat-header-cell *matHeaderCellDef> # </th>\n        <td mat-cell *matCellDef=\"let note; let i = dataIndex\"> {{ i+1 }} </td>\n      </ng-container>\n\n\n      <ng-container matColumnDef=\"note\">\n        <th mat-header-cell *matHeaderCellDef> {{labelText}} </th>\n        <td mat-cell *matCellDef=\"let note\">\n          {{note?.note}}\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"actions\">\n        <th mat-header-cell *matHeaderCellDef class=\"d-print-none\"> Actions </th>\n        <td mat-cell *matCellDef=\"let note\" class=\"d-print-none\">\n          <button type=\"button\" mat-icon-button (click)=\"editNote(note)\">\n            <mat-icon>edit</mat-icon>\n          </button>\n          <button type=\"button\" mat-icon-button (click)=\"deleteNote(note)\">\n            <mat-icon>delete</mat-icon>\n          </button>\n        </td>\n      </ng-container>\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n    </table>\n    <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isWorking\"></mat-progress-bar>\n  </div>\n\n</div>\n\n<div fxLayout=\"column\" fxLayoutGap=\"1.5rem\" *ngIf=\"commentsView\">\n  <div fxLayout fxLayoutAlign=\"center center\" fxLayoutGap=\"1rem\">\n    <h3 class=\"m-0 font-weight-bold mr-3\">{{labelText}}s</h3>\n  </div>\n\n  <div fxLayout=\"column\" fxLayoutAlign=\"start\" fxFlex=\"100%\">\n    <div class=\"w-100 scroll-container jumbotron\" infiniteScroll [infiniteScrollDistance]=\"1\"\n      [infiniteScrollThrottle]=\"50\" (scrolled)=\"onScroll()\" [scrollWindow]=\"false\">\n      <app-comment-form [commentData]=\"comment\" (action)=\"commentAction($event)\" *ngFor=\"let comment of models\">\n      </app-comment-form>\n      <app-comment-form (action)=\"commentAction($event)\"></app-comment-form>\n    </div>\n  </div>\n</div>\n", styles: [".scroll-container{max-height:400px;overflow-y:auto}\n"] }]
         }], ctorParameters: function () { return [{ type: NoteService }, { type: i1.MatDialog }]; }, propDecorators: { relatedModelId: [{
                 type: Input
             }], modelType: [{
@@ -5736,14 +5904,16 @@ class NoteModule {
             FlexLayoutModule,
             ActionPopupModule,
             MaterialModule,
-            ReadMoreModule], exports: [NoteListComponent] });
+            ReadMoreModule,
+            MatProgressBarModule], exports: [NoteListComponent] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NoteModule, imports: [CommonModule,
             ReactiveFormsModule,
             InfiniteScrollModule,
             FlexLayoutModule,
             ActionPopupModule,
             MaterialModule,
-            ReadMoreModule] });
+            ReadMoreModule,
+            MatProgressBarModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NoteModule, decorators: [{
             type: NgModule,
@@ -5760,7 +5930,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         FlexLayoutModule,
                         ActionPopupModule,
                         MaterialModule,
-                        ReadMoreModule
+                        ReadMoreModule,
+                        MatProgressBarModule
                     ],
                     exports: [
                         NoteListComponent
@@ -11201,6 +11372,7 @@ let LoginComponent = class LoginComponent {
     loginForm;
     userConfig;
     loginError;
+    userClients;
     constructor(http, alerter, router, authService, config, currentUserService, errorService, storage, credentialService, fb, formValidatorService, route, userConfigService) {
         this.http = http;
         this.alerter = alerter;
@@ -11216,8 +11388,9 @@ let LoginComponent = class LoginComponent {
         this.route = route;
         this.userConfigService = userConfigService;
         this.loginForm = fb.group({
-            email: new UntypedFormControl('', [Validators.required, Validators.email]),
-            password: new UntypedFormControl('', Validators.required),
+            email: ['', [Validators.required, Validators.email]],
+            password: ['', Validators.required],
+            selected_client: [''],
         });
         this.userConfig = this.userConfigService.getConfig();
     }
@@ -11240,6 +11413,10 @@ let LoginComponent = class LoginComponent {
         /* Lets clear all localstorage items */
         this.storage.removeItem('currentModule');
         this.storage.removeItem('currentUser');
+        // listen for selected_client change and submit the form.
+        this.loginForm.get('selected_client').valueChanges
+            .pipe(debounceTime(500))
+            .subscribe(() => this.login());
     }
     login() {
         if (!this.loginForm.valid) {
@@ -11254,6 +11431,7 @@ let LoginComponent = class LoginComponent {
             grant_type: this.config.getAuthGrantType(),
             username: this.loginForm.value.email,
             password: this.loginForm.value.password,
+            selected_client: this.loginForm.value.selected_client?.toString(),
             remember: true
         };
         this.credentialService.setCredentials();
@@ -11311,18 +11489,23 @@ let LoginComponent = class LoginComponent {
      * @private
      */
     handleLoginErrors(errorObj) {
-        const { error, error_description } = errorObj?.error;
+        const { error, error_description, user_clients } = errorObj?.error;
         this.loginError = { type: error, message: error_description };
+        this.userClients = user_clients;
+    }
+    backToLogin() {
+        this.userClients = null;
+        this.loginError = null;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LoginComponent, deps: [{ token: HttpService }, { token: AlertService }, { token: i1$5.Router }, { token: AuthenticationService }, { token: ConfigService }, { token: CurrentUserService }, { token: ErrorHandlerService }, { token: StorageService }, { token: CredentialsService }, { token: i1$4.UntypedFormBuilder }, { token: FormValidatorService }, { token: i1$5.ActivatedRoute }, { token: UserConfigService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: LoginComponent, selector: "login", ngImport: i0, template: "<div class=\"h-100 d-flex justify-content-center align-items-center w-100\" style=\"background: #fafafa;\">\n  <div class=\"row w-100\">\n    <div class=\"col-lg-4 col-md-6 col-sm-8 col-xs-10 col-12 mx-auto\">\n      <mat-card class=\"mb-3 mt-3 w-100\">\n        <header class=\"branding-block mb-0 mt-4\">\n          <div class=\"branding text-center\">\n            <a *ngIf=\"userConfig.appLogoUrl\" href=\"{{userConfig.appUrl}}\" target=\"_blank\">\n              <img class=\"techlify-logo d-inline-block\" [src]=\"userConfig.appLogoUrl\" alt=\"Logo\"/>\n            </a>\n          </div>\n          <div class=\"product-info text-center mt-2\">\n            <h3 class=\"product-name\">{{ userConfig.appName }}</h3>\n          </div>\n        </header>\n\n        <div id=\"login-form-wrapper\">\n          <h4 class=\"section-title text-center mt-4\">LOGIN</h4>\n          <form [formGroup]=\"loginForm\"\n                (ngSubmit)=\"login()\"\n                fxLayout=\"column\" fxLayoutAlign=\"start\" fxLayoutGap=\"10px\">\n            <mat-form-field>\n              <mat-label>Email</mat-label>\n              <input matInput\n                     formControlName=\"email\"\n                     placeholder=\"Email\"\n                     type=\"email\"\n                     autocomplete=\"off\"\n                     required />\n              <mat-error *ngIf=\"isFieldValid('email')\">{{getErrorMessage('email')}}</mat-error>\n            </mat-form-field>\n            <mat-form-field>\n              <mat-label>Password</mat-label>\n              <input matInput\n                     formControlName=\"password\"\n                     placeholder=\"Password\"\n                     type=\"password\"\n                     autocomplete=\"off\"\n                     required />\n              <mat-error *ngIf=\"isFieldValid('password')\">{{getErrorMessage('password')}}</mat-error>\n            </mat-form-field>\n\n            <div class=\"alert alert-danger\" *ngIf=\"loginError\">\n              <p class=\"mb-0\">{{ loginError?.message }}</p>\n            </div>\n\n            <button mat-raised-button color=\"primary\" class=\"w-100\" type=\"submit\" [disabled]=\"isWorking\">\n              LOGIN\n            </button>\n\n            <div class=\"mt-2\" *ngIf=\"userConfig.showSocialLogin\">\n              <button class=\"w-100 google-button mb-2\"\n                      mat-raised-button type=\"button\"\n                      (click)=\"redirect('google')\">Google</button>\n\n              <button class=\"w-100 facebook-button\"\n                      mat-raised-button type=\"button\"\n                      (click)=\"redirect('facebook')\">Facebook</button>\n            </div>\n            <div class=\"mt-2 mb-4 text-center\"\n                 *ngIf=\"userConfig.showForgotPassword\">\n              <a href=\"javascript:;\" [routerLink]=\"['/forgot-password']\">Forgot password?</a>\n            </div>\n          </form>\n        </div>\n\n        <div class=\"mt-3 p-0 mr-0 ml-0\" *ngIf=\"userConfig.showSignup\">\n          <p>New to {{ userConfig.appName }}?</p>\n          <button mat-raised-button class=\"w-100\" color=\"accent\" type=\"button\"\n                  [routerLink]=\"['/signup']\">\n            Create an account\n          </button>\n        </div>\n      </mat-card>\n    </div>\n  </div>\n</div>\n", styles: ["#login-form-wrapper{margin-top:40px}#login-form-wrapper .branding-block{margin-bottom:60px}#login-form-wrapper .techlify-logo{height:40px;padding-right:10px;bottom:10px;position:relative}#login-form-wrapper .company-name{margin-bottom:0}#login-form-wrapper .google-button{background:#ce1d1d;color:#fff}#login-form-wrapper .facebook-button{background:#38388e;color:#fff}:host{width:100%}.white-box{background-color:#fff;padding:10px}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$4.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$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i7$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i7$2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i9.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i10$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i1$5.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i7.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i7.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i7.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: LoginComponent, selector: "login", ngImport: i0, template: "<div class=\"h-100 d-flex justify-content-center align-items-center w-100\" style=\"background: #fafafa;\">\n  <div class=\"row w-100\">\n    <div class=\"col-lg-4 col-md-6 col-sm-8 col-xs-10 col-12 mx-auto\">\n      <mat-card class=\"mb-3 mt-3 w-100\">\n        <header class=\"branding-block mb-0 mt-4\">\n          <div class=\"branding text-center\">\n            <a *ngIf=\"userConfig.appLogoUrl\" href=\"{{userConfig.appUrl}}\" target=\"_blank\">\n              <img class=\"techlify-logo d-inline-block\" [src]=\"userConfig.appLogoUrl\" alt=\"Logo\"/>\n            </a>\n          </div>\n          <div class=\"product-info text-center mt-2\">\n            <h3 class=\"product-name\">{{ userConfig.appName }}</h3>\n          </div>\n        </header>\n\n        <div id=\"login-form-wrapper\">\n          <h4 class=\"section-title text-center mt-4\">\n            {{ userClients ? 'SELECT CLIENT TO LOGIN WITH' : 'LOGIN' }}\n          </h4>\n          <form\n            [formGroup]=\"loginForm\"\n            (ngSubmit)=\"login()\"\n          >\n            <div *ngIf=\"!userClients\" fxLayout=\"column\" fxLayoutAlign=\"start\" fxLayoutGap=\"10px\">\n              <mat-form-field>\n                <mat-label>Email</mat-label>\n                <input matInput\n                       formControlName=\"email\"\n                       placeholder=\"Email\"\n                       type=\"email\"\n                       autocomplete=\"off\"\n                       required />\n                <mat-error *ngIf=\"isFieldValid('email')\">{{getErrorMessage('email')}}</mat-error>\n              </mat-form-field>\n              <mat-form-field>\n                <mat-label>Password</mat-label>\n                <input matInput\n                       formControlName=\"password\"\n                       placeholder=\"Password\"\n                       type=\"password\"\n                       autocomplete=\"off\"\n                       required />\n                <mat-error *ngIf=\"isFieldValid('password')\">{{getErrorMessage('password')}}</mat-error>\n              </mat-form-field>\n\n              <div class=\"alert alert-danger\" *ngIf=\"loginError\">\n                <p class=\"mb-0\">{{ loginError?.message }}</p>\n              </div>\n\n              <button mat-raised-button color=\"primary\" class=\"w-100\" type=\"submit\" [disabled]=\"isWorking\">\n                LOGIN\n              </button>\n\n              <div class=\"mt-2\" *ngIf=\"userConfig.showSocialLogin\">\n                <button class=\"w-100 google-button mb-2\"\n                        mat-raised-button type=\"button\"\n                        (click)=\"redirect('google')\">Google</button>\n\n                <button class=\"w-100 facebook-button\"\n                        mat-raised-button type=\"button\"\n                        (click)=\"redirect('facebook')\">Facebook</button>\n              </div>\n              <div class=\"mt-2 mb-4 text-center\"\n                   *ngIf=\"userConfig.showForgotPassword\">\n                <a href=\"javascript:;\" [routerLink]=\"['/forgot-password']\">Forgot password?</a>\n              </div>\n            </div>\n\n            <div *ngIf=\"userClients\" fxLayout=\"column\" fxLayoutAlign=\"start\" fxLayoutGap=\"10px\">\n              <mat-selection-list formControlName=\"selected_client\" [multiple]=\"false\">\n                <mat-list-option\n                  *ngFor=\"let userClient of userClients\"\n                  [value]=\"userClient?.client_id\"\n                  [disabled]=\"!userClient?.is_enabled || isWorking\"\n                >\n                  {{ userClient?.client?.name }}\n                </mat-list-option>\n              </mat-selection-list>\n\n              <div class=\"mt-2 mb-4 text-center\"\n                   *ngIf=\"userConfig.showForgotPassword\">\n                <a href=\"javascript:;\" (click)=\"backToLogin()\">Back to Login</a>\n              </div>\n            </div>\n\n          </form>\n        </div>\n\n        <div class=\"mt-3 p-0 mr-0 ml-0\" *ngIf=\"userConfig.showSignup\">\n          <p>New to {{ userConfig.appName }}?</p>\n          <button mat-raised-button class=\"w-100\" color=\"accent\" type=\"button\"\n                  [routerLink]=\"['/signup']\">\n            Create an account\n          </button>\n        </div>\n      </mat-card>\n    </div>\n  </div>\n</div>\n", styles: ["#login-form-wrapper{margin-top:40px}#login-form-wrapper .branding-block{margin-bottom:60px}#login-form-wrapper .techlify-logo{height:40px;padding-right:10px;bottom:10px;position:relative}#login-form-wrapper .company-name{margin-bottom:0}#login-form-wrapper .google-button{background:#ce1d1d;color:#fff}#login-form-wrapper .facebook-button{background:#38388e;color:#fff}:host{width:100%}.white-box{background-color:#fff;padding:10px}mat-selection-list{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center}mat-list-option{border:1px solid #ccc;text-align:center;border-radius:4px;padding:10px;cursor:pointer}mat-list-option:hover{background-color:#f0f0f0}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$4.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$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i7$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i7$2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i9.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i10$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: i8$6.MatSelectionList, selector: "mat-selection-list", inputs: ["color", "compareWith", "multiple", "hideSingleSelectionIndicator", "disabled"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { kind: "component", type: i8$6.MatListOption, selector: "mat-list-option", inputs: ["togglePosition", "checkboxPosition", "color", "value", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }, { kind: "directive", type: i1$5.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i7.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i7.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i7.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }] });
 };
 LoginComponent = __decorate([
     UntilDestroy()
 ], LoginComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LoginComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'login', template: "<div class=\"h-100 d-flex justify-content-center align-items-center w-100\" style=\"background: #fafafa;\">\n  <div class=\"row w-100\">\n    <div class=\"col-lg-4 col-md-6 col-sm-8 col-xs-10 col-12 mx-auto\">\n      <mat-card class=\"mb-3 mt-3 w-100\">\n        <header class=\"branding-block mb-0 mt-4\">\n          <div class=\"branding text-center\">\n            <a *ngIf=\"userConfig.appLogoUrl\" href=\"{{userConfig.appUrl}}\" target=\"_blank\">\n              <img class=\"techlify-logo d-inline-block\" [src]=\"userConfig.appLogoUrl\" alt=\"Logo\"/>\n            </a>\n          </div>\n          <div class=\"product-info text-center mt-2\">\n            <h3 class=\"product-name\">{{ userConfig.appName }}</h3>\n          </div>\n        </header>\n\n        <div id=\"login-form-wrapper\">\n          <h4 class=\"section-title text-center mt-4\">LOGIN</h4>\n          <form [formGroup]=\"loginForm\"\n                (ngSubmit)=\"login()\"\n                fxLayout=\"column\" fxLayoutAlign=\"start\" fxLayoutGap=\"10px\">\n            <mat-form-field>\n              <mat-label>Email</mat-label>\n              <input matInput\n                     formControlName=\"email\"\n                     placeholder=\"Email\"\n                     type=\"email\"\n                     autocomplete=\"off\"\n                     required />\n              <mat-error *ngIf=\"isFieldValid('email')\">{{getErrorMessage('email')}}</mat-error>\n            </mat-form-field>\n            <mat-form-field>\n              <mat-label>Password</mat-label>\n              <input matInput\n                     formControlName=\"password\"\n                     placeholder=\"Password\"\n                     type=\"password\"\n                     autocomplete=\"off\"\n                     required />\n              <mat-error *ngIf=\"isFieldValid('password')\">{{getErrorMessage('password')}}</mat-error>\n            </mat-form-field>\n\n            <div class=\"alert alert-danger\" *ngIf=\"loginError\">\n              <p class=\"mb-0\">{{ loginError?.message }}</p>\n            </div>\n\n            <button mat-raised-button color=\"primary\" class=\"w-100\" type=\"submit\" [disabled]=\"isWorking\">\n              LOGIN\n            </button>\n\n            <div class=\"mt-2\" *ngIf=\"userConfig.showSocialLogin\">\n              <button class=\"w-100 google-button mb-2\"\n                      mat-raised-button type=\"button\"\n                      (click)=\"redirect('google')\">Google</button>\n\n              <button class=\"w-100 facebook-button\"\n                      mat-raised-button type=\"button\"\n                      (click)=\"redirect('facebook')\">Facebook</button>\n            </div>\n            <div class=\"mt-2 mb-4 text-center\"\n                 *ngIf=\"userConfig.showForgotPassword\">\n              <a href=\"javascript:;\" [routerLink]=\"['/forgot-password']\">Forgot password?</a>\n            </div>\n          </form>\n        </div>\n\n        <div class=\"mt-3 p-0 mr-0 ml-0\" *ngIf=\"userConfig.showSignup\">\n          <p>New to {{ userConfig.appName }}?</p>\n          <button mat-raised-button class=\"w-100\" color=\"accent\" type=\"button\"\n                  [routerLink]=\"['/signup']\">\n            Create an account\n          </button>\n        </div>\n      </mat-card>\n    </div>\n  </div>\n</div>\n", styles: ["#login-form-wrapper{margin-top:40px}#login-form-wrapper .branding-block{margin-bottom:60px}#login-form-wrapper .techlify-logo{height:40px;padding-right:10px;bottom:10px;position:relative}#login-form-wrapper .company-name{margin-bottom:0}#login-form-wrapper .google-button{background:#ce1d1d;color:#fff}#login-form-wrapper .facebook-button{background:#38388e;color:#fff}:host{width:100%}.white-box{background-color:#fff;padding:10px}\n"] }]
+            args: [{ selector: 'login', template: "<div class=\"h-100 d-flex justify-content-center align-items-center w-100\" style=\"background: #fafafa;\">\n  <div class=\"row w-100\">\n    <div class=\"col-lg-4 col-md-6 col-sm-8 col-xs-10 col-12 mx-auto\">\n      <mat-card class=\"mb-3 mt-3 w-100\">\n        <header class=\"branding-block mb-0 mt-4\">\n          <div class=\"branding text-center\">\n            <a *ngIf=\"userConfig.appLogoUrl\" href=\"{{userConfig.appUrl}}\" target=\"_blank\">\n              <img class=\"techlify-logo d-inline-block\" [src]=\"userConfig.appLogoUrl\" alt=\"Logo\"/>\n            </a>\n          </div>\n          <div class=\"product-info text-center mt-2\">\n            <h3 class=\"product-name\">{{ userConfig.appName }}</h3>\n          </div>\n        </header>\n\n        <div id=\"login-form-wrapper\">\n          <h4 class=\"section-title text-center mt-4\">\n            {{ userClients ? 'SELECT CLIENT TO LOGIN WITH' : 'LOGIN' }}\n          </h4>\n          <form\n            [formGroup]=\"loginForm\"\n            (ngSubmit)=\"login()\"\n          >\n            <div *ngIf=\"!userClients\" fxLayout=\"column\" fxLayoutAlign=\"start\" fxLayoutGap=\"10px\">\n              <mat-form-field>\n                <mat-label>Email</mat-label>\n                <input matInput\n                       formControlName=\"email\"\n                       placeholder=\"Email\"\n                       type=\"email\"\n                       autocomplete=\"off\"\n                       required />\n                <mat-error *ngIf=\"isFieldValid('email')\">{{getErrorMessage('email')}}</mat-error>\n              </mat-form-field>\n              <mat-form-field>\n                <mat-label>Password</mat-label>\n                <input matInput\n                       formControlName=\"password\"\n                       placeholder=\"Password\"\n                       type=\"password\"\n                       autocomplete=\"off\"\n                       required />\n                <mat-error *ngIf=\"isFieldValid('password')\">{{getErrorMessage('password')}}</mat-error>\n              </mat-form-field>\n\n              <div class=\"alert alert-danger\" *ngIf=\"loginError\">\n                <p class=\"mb-0\">{{ loginError?.message }}</p>\n              </div>\n\n              <button mat-raised-button color=\"primary\" class=\"w-100\" type=\"submit\" [disabled]=\"isWorking\">\n                LOGIN\n              </button>\n\n              <div class=\"mt-2\" *ngIf=\"userConfig.showSocialLogin\">\n                <button class=\"w-100 google-button mb-2\"\n                        mat-raised-button type=\"button\"\n                        (click)=\"redirect('google')\">Google</button>\n\n                <button class=\"w-100 facebook-button\"\n                        mat-raised-button type=\"button\"\n                        (click)=\"redirect('facebook')\">Facebook</button>\n              </div>\n              <div class=\"mt-2 mb-4 text-center\"\n                   *ngIf=\"userConfig.showForgotPassword\">\n                <a href=\"javascript:;\" [routerLink]=\"['/forgot-password']\">Forgot password?</a>\n              </div>\n            </div>\n\n            <div *ngIf=\"userClients\" fxLayout=\"column\" fxLayoutAlign=\"start\" fxLayoutGap=\"10px\">\n              <mat-selection-list formControlName=\"selected_client\" [multiple]=\"false\">\n                <mat-list-option\n                  *ngFor=\"let userClient of userClients\"\n                  [value]=\"userClient?.client_id\"\n                  [disabled]=\"!userClient?.is_enabled || isWorking\"\n                >\n                  {{ userClient?.client?.name }}\n                </mat-list-option>\n              </mat-selection-list>\n\n              <div class=\"mt-2 mb-4 text-center\"\n                   *ngIf=\"userConfig.showForgotPassword\">\n                <a href=\"javascript:;\" (click)=\"backToLogin()\">Back to Login</a>\n              </div>\n            </div>\n\n          </form>\n        </div>\n\n        <div class=\"mt-3 p-0 mr-0 ml-0\" *ngIf=\"userConfig.showSignup\">\n          <p>New to {{ userConfig.appName }}?</p>\n          <button mat-raised-button class=\"w-100\" color=\"accent\" type=\"button\"\n                  [routerLink]=\"['/signup']\">\n            Create an account\n          </button>\n        </div>\n      </mat-card>\n    </div>\n  </div>\n</div>\n", styles: ["#login-form-wrapper{margin-top:40px}#login-form-wrapper .branding-block{margin-bottom:60px}#login-form-wrapper .techlify-logo{height:40px;padding-right:10px;bottom:10px;position:relative}#login-form-wrapper .company-name{margin-bottom:0}#login-form-wrapper .google-button{background:#ce1d1d;color:#fff}#login-form-wrapper .facebook-button{background:#38388e;color:#fff}:host{width:100%}.white-box{background-color:#fff;padding:10px}mat-selection-list{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center}mat-list-option{border:1px solid #ccc;text-align:center;border-radius:4px;padding:10px;cursor:pointer}mat-list-option:hover{background-color:#f0f0f0}\n"] }]
         }], ctorParameters: function () { return [{ type: HttpService }, { type: AlertService }, { type: i1$5.Router }, { type: AuthenticationService }, { type: ConfigService }, { type: CurrentUserService }, { type: ErrorHandlerService }, { type: StorageService }, { type: CredentialsService }, { type: i1$4.UntypedFormBuilder }, { type: FormValidatorService }, { type: i1$5.ActivatedRoute }, { type: UserConfigService }]; } });
 
 const routes$7 = [
@@ -11730,7 +11913,7 @@ class RolesViewAllComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RolesViewAllComponent, deps: [{ token: HttpService }, { token: i1$5.ActivatedRoute }, { token: CredentialsService }, { token: UserConfigService }, { token: i1.MatDialog }, { token: CurrentUserService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: RolesViewAllComponent, selector: "roles-view-all", inputs: { clientId: "clientId" }, ngImport: i0, template: "<section class=\"col-sm-12 my-4\">\n  <h3 class=\"page-title text-center\">\n    Manage Roles\n    <button mat-raised-button color=\"primary\" (click)=\"createOrModifyRole()\" class=\"mr-1\"\n      *ngIf=\"!config.roleConfig.disableAddRole\">\n      <mat-icon>add</mat-icon>\n      New Role\n    </button>\n\n    <button mat-raised-button type=\"button\" [routerLink]=\"['../users']\" *ngIf=\"!config.roleConfig.disableUsers\"\n      class=\"mr-1\">\n      <mat-icon>people</mat-icon>\n      Users\n    </button>\n    <button mat-raised-button type=\"button\" [routerLink]=\"['../role-permissions']\"\n      *ngIf=\"!config.roleConfig.disablePermissions\" class=\"mr-1\">\n      <mat-icon>lock</mat-icon>\n      Role Permissions\n    </button>\n  </h3>\n\n  <mat-card class=\"mt-2 p-0\">\n    <mat-card-content>\n      <table mat-table [dataSource]=\"roles\"\n             class=\"w-100\"\n             infiniteScroll [infiniteScrollDistance]=\"2\"\n             [infiniteScrollThrottle]=\"50\"\n             (scrolled)=\"onScroll()\"\n             aria-describedby=\"Roles\">\n\n        <!-- Index Column -->\n        <ng-container matColumnDef=\"index\">\n          <th mat-header-cell *matHeaderCellDef> # </th>\n          <td mat-cell *matCellDef=\"let element; let i = index\"> {{ i+1 }} </td>\n        </ng-container>\n\n        <!-- Label Column -->\n        <ng-container matColumnDef=\"label\">\n          <th mat-header-cell *matHeaderCellDef> Label </th>\n          <td mat-cell *matCellDef=\"let element\">\n            <p class=\"mb-0\">{{element?.label}}</p>\n            <span class=\"badge\"\n                  [ngClass]=\"{'badge-primary':element?.is_global, 'badge-secondary': !element?.is_global}\">\n              {{element?.is_global ? 'App role' : 'Custom role'}}\n            </span>\n          </td>\n        </ng-container>\n\n        <!-- Description Column -->\n        <ng-container matColumnDef=\"description\">\n          <th mat-header-cell *matHeaderCellDef> Description </th>\n          <td mat-cell *matCellDef=\"let element\"> {{element?.description }} </td>\n        </ng-container>\n\n        <!-- Module Column -->\n        <ng-container matColumnDef=\"module\">\n          <th mat-header-cell *matHeaderCellDef> Module </th>\n          <td mat-cell *matCellDef=\"let element\"> {{element?.module?.name}} </td>\n        </ng-container>\n\n        <!-- Editable Column -->\n        <ng-container matColumnDef=\"editable\">\n          <th mat-header-cell *matHeaderCellDef> Editable </th>\n          <td mat-cell *matCellDef=\"let element\">\n            <span *ngIf=\"element?.is_editable\" class=\"btn btn-success btn-xs\">Yes</span>\n            <span *ngIf=\"!element?.is_editable\" class=\"btn btn-danger btn-xs\">No</span>\n          </td>\n        </ng-container>\n\n        <!-- GLobal Column -->\n        <ng-container matColumnDef=\"is_global\">\n          <th mat-header-cell *matHeaderCellDef> Global </th>\n          <td mat-cell *matCellDef=\"let element\">\n            <span *ngIf=\"element?.is_global\" class=\"btn btn-success btn-xs\">Yes</span>\n            <span *ngIf=\"!element?.is_global\" class=\"btn btn-danger btn-xs\">No</span>\n          </td>\n        </ng-container>\n\n        <!-- Users Column -->\n        <ng-container matColumnDef=\"users\">\n          <th mat-header-cell *matHeaderCellDef> # Users </th>\n          <td mat-cell *matCellDef=\"let element\"> {{element?.role_users_count}} </td>\n        </ng-container>\n\n        <!-- Permissions Column -->\n        <ng-container matColumnDef=\"permissions\">\n          <th mat-header-cell *matHeaderCellDef> Permissions </th>\n          <td mat-cell *matCellDef=\"let element\"> {{element?.permissions_count}} </td>\n        </ng-container>\n\n        <!-- Actions Column -->\n        <ng-container matColumnDef=\"actions\">\n          <th mat-header-cell *matHeaderCellDef> Actions </th>\n          <td mat-cell *matCellDef=\"let role\" class=\"text-muted\">\n            <button mat-icon-button type=\"button\" [routerLink]=\"['../roles/', role?.id]\">\n              <mat-icon>remove_red_eye</mat-icon>\n            </button>\n            <button mat-icon-button\n              *ngIf=\"(isAdminUser || role.is_editable) && currentUserService.hasPermission('role_update')\"\n              (click)=\"createOrModifyRole(role)\">\n              <mat-icon>edit</mat-icon>\n            </button>\n          </td>\n        </ng-container>\n\n        <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n        <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n      </table>\n      <mat-progress-bar *ngIf=\"isWorking\" mode=\"indeterminate\"></mat-progress-bar>\n    </mat-card-content>\n  </mat-card>\n\n</section>\n", dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$5.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i11.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i11.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i11.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i11.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i11.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i11.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i11.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i11.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i11.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i10$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i10$1.MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: i2.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "directive", type: i4.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "component", type: i23.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: RolesViewAllComponent, selector: "roles-view-all", inputs: { clientId: "clientId" }, ngImport: i0, template: "<section class=\"col-sm-12 my-4\">\n  <h3 class=\"page-title text-center\">\n    Manage Roles\n    <button mat-raised-button color=\"primary\" (click)=\"createOrModifyRole()\" class=\"mr-1\"\n      *ngIf=\"!config.roleConfig.disableAddRole\">\n      <mat-icon>add</mat-icon>\n      New Role\n    </button>\n\n    <button mat-raised-button type=\"button\" [routerLink]=\"['../users']\" *ngIf=\"!config.roleConfig.disableUsers\"\n      class=\"mr-1\">\n      <mat-icon>people</mat-icon>\n      Users\n    </button>\n    <button mat-raised-button type=\"button\" [routerLink]=\"['../role-permissions']\"\n      *ngIf=\"!config.roleConfig.disablePermissions\" class=\"mr-1\">\n      <mat-icon>lock</mat-icon>\n      Role Permissions\n    </button>\n  </h3>\n\n  <mat-card class=\"mt-2 p-0\">\n    <mat-card-content>\n      <table mat-table [dataSource]=\"roles\"\n             class=\"w-100\"\n             infiniteScroll [infiniteScrollDistance]=\"2\"\n             [infiniteScrollThrottle]=\"50\"\n             (scrolled)=\"onScroll()\"\n             aria-describedby=\"Roles\">\n\n        <!-- Index Column -->\n        <ng-container matColumnDef=\"index\">\n          <th mat-header-cell *matHeaderCellDef> # </th>\n          <td mat-cell *matCellDef=\"let element; let i = index\"> {{ i+1 }} </td>\n        </ng-container>\n\n        <!-- Label Column -->\n        <ng-container matColumnDef=\"label\">\n          <th mat-header-cell *matHeaderCellDef> Label </th>\n          <td mat-cell *matCellDef=\"let element\">\n            <p class=\"mb-0\">{{element?.label}}</p>\n            <span class=\"badge\"\n                  [ngClass]=\"{'badge-primary':element?.is_global, 'badge-secondary': !element?.is_global}\">\n              {{element?.is_global ? 'App role' : 'Custom role'}}\n            </span>\n          </td>\n        </ng-container>\n\n        <!-- Description Column -->\n        <ng-container matColumnDef=\"description\">\n          <th mat-header-cell *matHeaderCellDef> Description </th>\n          <td mat-cell *matCellDef=\"let element\"> {{element?.description }} </td>\n        </ng-container>\n\n        <!-- Module Column -->\n        <ng-container matColumnDef=\"module\">\n          <th mat-header-cell *matHeaderCellDef> Module </th>\n          <td mat-cell *matCellDef=\"let element\"> {{element?.module?.name}} </td>\n        </ng-container>\n\n        <!-- Editable Column -->\n        <ng-container matColumnDef=\"editable\">\n          <th mat-header-cell *matHeaderCellDef> Editable </th>\n          <td mat-cell *matCellDef=\"let element\">\n            <span *ngIf=\"element?.is_editable\" class=\"btn btn-success btn-xs\">Yes</span>\n            <span *ngIf=\"!element?.is_editable\" class=\"btn btn-danger btn-xs\">No</span>\n          </td>\n        </ng-container>\n\n        <!-- GLobal Column -->\n        <ng-container matColumnDef=\"is_global\">\n          <th mat-header-cell *matHeaderCellDef> Global </th>\n          <td mat-cell *matCellDef=\"let element\">\n            <span *ngIf=\"element?.is_global\" class=\"btn btn-success btn-xs\">Yes</span>\n            <span *ngIf=\"!element?.is_global\" class=\"btn btn-danger btn-xs\">No</span>\n          </td>\n        </ng-container>\n\n        <!-- Users Column -->\n        <ng-container matColumnDef=\"users\">\n          <th mat-header-cell *matHeaderCellDef> # Users </th>\n          <td mat-cell *matCellDef=\"let element\"> {{element?.role_users_count}} </td>\n        </ng-container>\n\n        <!-- Permissions Column -->\n        <ng-container matColumnDef=\"permissions\">\n          <th mat-header-cell *matHeaderCellDef> Permissions </th>\n          <td mat-cell *matCellDef=\"let element\"> {{element?.permissions_count}} </td>\n        </ng-container>\n\n        <!-- Actions Column -->\n        <ng-container matColumnDef=\"actions\">\n          <th mat-header-cell *matHeaderCellDef> Actions </th>\n          <td mat-cell *matCellDef=\"let role\" class=\"text-muted\">\n            <button mat-icon-button type=\"button\" [routerLink]=\"['../roles/', role?.id]\">\n              <mat-icon>remove_red_eye</mat-icon>\n            </button>\n            <button mat-icon-button\n              *ngIf=\"(isAdminUser || role.is_editable) && currentUserService.hasPermission('role_update')\"\n              (click)=\"createOrModifyRole(role)\">\n              <mat-icon>edit</mat-icon>\n            </button>\n          </td>\n        </ng-container>\n\n        <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n        <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n      </table>\n      <mat-progress-bar *ngIf=\"isWorking\" mode=\"indeterminate\"></mat-progress-bar>\n    </mat-card-content>\n  </mat-card>\n\n</section>\n", dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$5.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i11.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i11.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i11.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i11.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i11.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i11.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i11.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i11.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i11.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i10$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i10$1.MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: i2.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "directive", type: i4.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "component", type: i5$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RolesViewAllComponent, decorators: [{
             type: Component,
@@ -12008,11 +12191,11 @@ class SignUpComponent {
         return this.formValidatorService.getErrorMessage(field, this.signUpForm, errorMessages$1);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SignUpComponent, deps: [{ token: HttpService }, { token: AlertService }, { token: i1$5.Router }, { token: ErrorHandlerService }, { token: i1$4.UntypedFormBuilder }, { token: FormValidatorService }, { token: UserConfigService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SignUpComponent, selector: "signup", ngImport: i0, template: "<div class=\"h-100  row align-items-center mx-0\">\n    <div class=\"col\">\n        <header class=\"branding-block mb-0 mt-4\">\n            <div class=\"branding text-center\">\n                <a *ngIf=\"userConfig.appLogoUrl\" href=\"{{userConfig.appUrl}}\" target=\"_blank\">\n                    <img class=\"techlify-logo d-inline-block\" [src]=\"userConfig.appLogoUrl\" />\n                </a>\n            </div>\n            <div class=\"product-info text-center mt-2\">\n                <h3 class=\"product-name\">{{ userConfig.appName }}</h3>\n            </div>\n        </header>\n\n        <div id=\"login-form-wrapper\"\n            class=\"form-bordered mx-auto form-medium form-bordered form-centered form-horizontal mt-3 white-box\"\n            style=\"width:550px\">\n\n            <h4 class=\"section-title text-center\">REGISTER</h4>\n\n            <form [formGroup]=\"signUpForm\" (ngSubmit)=\"signUp()\" class=\"pt-4 pr-4 pl-4 pb-1 mt-4 ml-4 mr-4 mb-1\">\n                <div class=\"form-group row\">\n                    <mat-form-field class=\"col-12\">\n                        <input matInput formControlName=\"business_name\" placeholder=\"Business / Company Name\"\n                            type=\"text\" autocomplete=\"off\" required />\n                        <mat-error *ngIf=\"isFieldValid('business_name')\">{{getErrorMessage('business_name')}}\n                        </mat-error>\n                    </mat-form-field>\n                </div>\n                <div class=\"form-group row\">\n                    <mat-form-field class=\"col-12\">\n                        <input matInput formControlName=\"business_email\" placeholder=\"Business / Company Email\"\n                            type=\"email\" autocomplete=\"off\" required />\n                        <mat-error *ngIf=\"isFieldValid('business_email')\">{{getErrorMessage('business_email')}}\n                        </mat-error>\n                    </mat-form-field>\n                </div>\n                <div class=\"form-group row\">\n                    <mat-form-field class=\"col-12\">\n                        <input matInput formControlName=\"user_name\" placeholder=\"User Name\" type=\"text\"\n                            autocomplete=\"off\" required />\n                        <mat-error *ngIf=\"isFieldValid('user_name')\">{{getErrorMessage('user_name')}}</mat-error>\n                    </mat-form-field>\n                </div>\n                <div class=\"form-group row\">\n                    <mat-form-field class=\"col-12\">\n                        <input matInput formControlName=\"user_email\" placeholder=\"User Email\" type=\"email\"\n                            autocomplete=\"off\" required />\n                        <mat-error *ngIf=\"isFieldValid('user_email')\">{{getErrorMessage('user_email')}}</mat-error>\n                    </mat-form-field>\n                </div>\n                <div class=\"row mt-4\">\n                    <div class=\"col-12 text-center\">\n                        <button mat-button type=\"submit\" class=\"btn btn-sm btn-primary w-100\"\n                            [disabled]=\"isWorking\">Register</button>\n                    </div>\n                </div>\n                <div class=\"row mt-2\" *ngIf=\"userConfig.showSocialLogin\">\n                    <div class=\"col-6\">\n                        <button class=\"col-12 google-button\" mat-raised-button type=\"button\"\n                            (click)=\"redirect('google')\">Google</button>\n                    </div>\n                    <div class=\"col-6\">\n                        <button class=\"col-12 facebook-button\" mat-raised-button type=\"button\"\n                            (click)=\"redirect('facebook')\">Facebook</button>\n                    </div>\n                </div>\n            </form>\n        </div>\n        <div class=\"row mt-3 mr-0 ml-0\">\n            <div class=\"col-12 text-center\">\n                <p>Already an {{ userConfig.appName }} member?</p>\n                <button mat-button class=\"btn btn-sm btn-secondary text-white\" style=\"width: 550px;\" type=\"button\"\n                    [routerLink]=\"['/login']\">\n                    Continue with login\n                </button>\n            </div>\n        </div>\n    </div>\n</div>", styles: ["#login-form-wrapper{margin-top:40px}#login-form-wrapper .branding-block{margin-bottom:60px}#login-form-wrapper .techlify-logo{height:40px;padding-right:10px;bottom:10px;position:relative}#login-form-wrapper .company-name{margin-bottom:0}#login-form-wrapper .google-button{background:#ce1d1d;color:#fff}#login-form-wrapper .facebook-button{background:#38388e;color:#fff}:host{width:100%}.white-box{background-color:#fff;padding:10px}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$4.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$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i7$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7$2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i9.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i1$5.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SignUpComponent, selector: "signup", ngImport: i0, template: "<div class=\"h-100  row align-items-center mx-0\">\n    <div class=\"col\">\n        <header class=\"branding-block mb-0 mt-4\">\n            <div class=\"branding text-center\">\n                <a *ngIf=\"userConfig.appLogoUrl\" href=\"{{userConfig.appUrl}}\" target=\"_blank\">\n                    <img class=\"techlify-logo d-inline-block\" [src]=\"userConfig.appLogoUrl\" />\n                </a>\n            </div>\n            <div class=\"product-info text-center mt-2\">\n                <h3 class=\"product-name\">{{ userConfig.appName }}</h3>\n            </div>\n        </header>\n\n        <div id=\"login-form-wrapper\"\n            class=\"form-bordered mx-auto form-medium form-bordered form-centered form-horizontal mt-3 white-box\"\n            style=\"width:550px\">\n\n            <h4 class=\"section-title text-center\">REGISTER</h4>\n\n            <form [formGroup]=\"signUpForm\" (ngSubmit)=\"signUp()\" class=\"pt-4 pr-4 pl-4 pb-1 mt-4 ml-4 mr-4 mb-1\">\n                <div class=\"form-group row\">\n                    <mat-form-field class=\"col-12\">\n                        <input matInput formControlName=\"business_name\" placeholder=\"Business / Company Name\"\n                            type=\"text\" autocomplete=\"off\" required />\n                        <mat-error *ngIf=\"isFieldValid('business_name')\">{{getErrorMessage('business_name')}}\n                        </mat-error>\n                    </mat-form-field>\n                </div>\n                <div class=\"form-group row\">\n                    <mat-form-field class=\"col-12\">\n                        <input matInput formControlName=\"business_email\" placeholder=\"Business / Company Email\"\n                            type=\"email\" autocomplete=\"off\" required />\n                        <mat-error *ngIf=\"isFieldValid('business_email')\">{{getErrorMessage('business_email')}}\n                        </mat-error>\n                    </mat-form-field>\n                </div>\n                <div class=\"form-group row\">\n                    <mat-form-field class=\"col-12\">\n                        <input matInput formControlName=\"user_name\" placeholder=\"User Name\" type=\"text\"\n                            autocomplete=\"off\" required />\n                        <mat-error *ngIf=\"isFieldValid('user_name')\">{{getErrorMessage('user_name')}}</mat-error>\n                    </mat-form-field>\n                </div>\n                <div class=\"form-group row\">\n                    <mat-form-field class=\"col-12\">\n                        <input matInput formControlName=\"user_email\" placeholder=\"User Email\" type=\"email\"\n                            autocomplete=\"off\" required />\n                        <mat-error *ngIf=\"isFieldValid('user_email')\">{{getErrorMessage('user_email')}}</mat-error>\n                    </mat-form-field>\n                </div>\n                <div class=\"row mt-4\">\n                    <div class=\"col-12 text-center\">\n                        <button mat-button type=\"submit\" class=\"btn btn-sm btn-primary w-100\"\n                            [disabled]=\"isWorking\">Register</button>\n                    </div>\n                </div>\n                <div class=\"row mt-2\" *ngIf=\"userConfig.showSocialLogin\">\n                    <div class=\"col-6\">\n                        <button class=\"col-12 google-button\" mat-raised-button type=\"button\"\n                            (click)=\"redirect('google')\">Google</button>\n                    </div>\n                    <div class=\"col-6\">\n                        <button class=\"col-12 facebook-button\" mat-raised-button type=\"button\"\n                            (click)=\"redirect('facebook')\">Facebook</button>\n                    </div>\n                </div>\n            </form>\n        </div>\n        <div class=\"row mt-3 mr-0 ml-0\">\n            <div class=\"col-12 text-center\">\n                <p>Already an {{ userConfig.appName }} member?</p>\n                <button mat-button class=\"btn btn-sm btn-secondary text-white\" style=\"width: 550px;\" type=\"button\"\n                    [routerLink]=\"['/login']\">\n                    Continue with login\n                </button>\n            </div>\n        </div>\n    </div>\n</div>", styles: ["#login-form-wrapper{margin-top:40px}#login-form-wrapper .branding-block{margin-bottom:60px}#login-form-wrapper .techlify-logo{height:40px;padding-right:10px;bottom:10px;position:relative}#login-form-wrapper .company-name{margin-bottom:0}#login-form-wrapper .google-button{background:#ce1d1d;color:#fff}#login-form-wrapper .facebook-button{background:#38388e;color:#fff}:host{width:100%}.white-box{background-color:#fff;padding:10px}mat-selection-list{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center}mat-list-option{border:1px solid #ccc;text-align:center;border-radius:4px;padding:10px;cursor:pointer}mat-list-option:hover{background-color:#f0f0f0}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$4.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$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i7$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7$2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i9.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i1$5.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SignUpComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'signup', template: "<div class=\"h-100  row align-items-center mx-0\">\n    <div class=\"col\">\n        <header class=\"branding-block mb-0 mt-4\">\n            <div class=\"branding text-center\">\n                <a *ngIf=\"userConfig.appLogoUrl\" href=\"{{userConfig.appUrl}}\" target=\"_blank\">\n                    <img class=\"techlify-logo d-inline-block\" [src]=\"userConfig.appLogoUrl\" />\n                </a>\n            </div>\n            <div class=\"product-info text-center mt-2\">\n                <h3 class=\"product-name\">{{ userConfig.appName }}</h3>\n            </div>\n        </header>\n\n        <div id=\"login-form-wrapper\"\n            class=\"form-bordered mx-auto form-medium form-bordered form-centered form-horizontal mt-3 white-box\"\n            style=\"width:550px\">\n\n            <h4 class=\"section-title text-center\">REGISTER</h4>\n\n            <form [formGroup]=\"signUpForm\" (ngSubmit)=\"signUp()\" class=\"pt-4 pr-4 pl-4 pb-1 mt-4 ml-4 mr-4 mb-1\">\n                <div class=\"form-group row\">\n                    <mat-form-field class=\"col-12\">\n                        <input matInput formControlName=\"business_name\" placeholder=\"Business / Company Name\"\n                            type=\"text\" autocomplete=\"off\" required />\n                        <mat-error *ngIf=\"isFieldValid('business_name')\">{{getErrorMessage('business_name')}}\n                        </mat-error>\n                    </mat-form-field>\n                </div>\n                <div class=\"form-group row\">\n                    <mat-form-field class=\"col-12\">\n                        <input matInput formControlName=\"business_email\" placeholder=\"Business / Company Email\"\n                            type=\"email\" autocomplete=\"off\" required />\n                        <mat-error *ngIf=\"isFieldValid('business_email')\">{{getErrorMessage('business_email')}}\n                        </mat-error>\n                    </mat-form-field>\n                </div>\n                <div class=\"form-group row\">\n                    <mat-form-field class=\"col-12\">\n                        <input matInput formControlName=\"user_name\" placeholder=\"User Name\" type=\"text\"\n                            autocomplete=\"off\" required />\n                        <mat-error *ngIf=\"isFieldValid('user_name')\">{{getErrorMessage('user_name')}}</mat-error>\n                    </mat-form-field>\n                </div>\n                <div class=\"form-group row\">\n                    <mat-form-field class=\"col-12\">\n                        <input matInput formControlName=\"user_email\" placeholder=\"User Email\" type=\"email\"\n                            autocomplete=\"off\" required />\n                        <mat-error *ngIf=\"isFieldValid('user_email')\">{{getErrorMessage('user_email')}}</mat-error>\n                    </mat-form-field>\n                </div>\n                <div class=\"row mt-4\">\n                    <div class=\"col-12 text-center\">\n                        <button mat-button type=\"submit\" class=\"btn btn-sm btn-primary w-100\"\n                            [disabled]=\"isWorking\">Register</button>\n                    </div>\n                </div>\n                <div class=\"row mt-2\" *ngIf=\"userConfig.showSocialLogin\">\n                    <div class=\"col-6\">\n                        <button class=\"col-12 google-button\" mat-raised-button type=\"button\"\n                            (click)=\"redirect('google')\">Google</button>\n                    </div>\n                    <div class=\"col-6\">\n                        <button class=\"col-12 facebook-button\" mat-raised-button type=\"button\"\n                            (click)=\"redirect('facebook')\">Facebook</button>\n                    </div>\n                </div>\n            </form>\n        </div>\n        <div class=\"row mt-3 mr-0 ml-0\">\n            <div class=\"col-12 text-center\">\n                <p>Already an {{ userConfig.appName }} member?</p>\n                <button mat-button class=\"btn btn-sm btn-secondary text-white\" style=\"width: 550px;\" type=\"button\"\n                    [routerLink]=\"['/login']\">\n                    Continue with login\n                </button>\n            </div>\n        </div>\n    </div>\n</div>", styles: ["#login-form-wrapper{margin-top:40px}#login-form-wrapper .branding-block{margin-bottom:60px}#login-form-wrapper .techlify-logo{height:40px;padding-right:10px;bottom:10px;position:relative}#login-form-wrapper .company-name{margin-bottom:0}#login-form-wrapper .google-button{background:#ce1d1d;color:#fff}#login-form-wrapper .facebook-button{background:#38388e;color:#fff}:host{width:100%}.white-box{background-color:#fff;padding:10px}\n"] }]
+            args: [{ selector: 'signup', template: "<div class=\"h-100  row align-items-center mx-0\">\n    <div class=\"col\">\n        <header class=\"branding-block mb-0 mt-4\">\n            <div class=\"branding text-center\">\n                <a *ngIf=\"userConfig.appLogoUrl\" href=\"{{userConfig.appUrl}}\" target=\"_blank\">\n                    <img class=\"techlify-logo d-inline-block\" [src]=\"userConfig.appLogoUrl\" />\n                </a>\n            </div>\n            <div class=\"product-info text-center mt-2\">\n                <h3 class=\"product-name\">{{ userConfig.appName }}</h3>\n            </div>\n        </header>\n\n        <div id=\"login-form-wrapper\"\n            class=\"form-bordered mx-auto form-medium form-bordered form-centered form-horizontal mt-3 white-box\"\n            style=\"width:550px\">\n\n            <h4 class=\"section-title text-center\">REGISTER</h4>\n\n            <form [formGroup]=\"signUpForm\" (ngSubmit)=\"signUp()\" class=\"pt-4 pr-4 pl-4 pb-1 mt-4 ml-4 mr-4 mb-1\">\n                <div class=\"form-group row\">\n                    <mat-form-field class=\"col-12\">\n                        <input matInput formControlName=\"business_name\" placeholder=\"Business / Company Name\"\n                            type=\"text\" autocomplete=\"off\" required />\n                        <mat-error *ngIf=\"isFieldValid('business_name')\">{{getErrorMessage('business_name')}}\n                        </mat-error>\n                    </mat-form-field>\n                </div>\n                <div class=\"form-group row\">\n                    <mat-form-field class=\"col-12\">\n                        <input matInput formControlName=\"business_email\" placeholder=\"Business / Company Email\"\n                            type=\"email\" autocomplete=\"off\" required />\n                        <mat-error *ngIf=\"isFieldValid('business_email')\">{{getErrorMessage('business_email')}}\n                        </mat-error>\n                    </mat-form-field>\n                </div>\n                <div class=\"form-group row\">\n                    <mat-form-field class=\"col-12\">\n                        <input matInput formControlName=\"user_name\" placeholder=\"User Name\" type=\"text\"\n                            autocomplete=\"off\" required />\n                        <mat-error *ngIf=\"isFieldValid('user_name')\">{{getErrorMessage('user_name')}}</mat-error>\n                    </mat-form-field>\n                </div>\n                <div class=\"form-group row\">\n                    <mat-form-field class=\"col-12\">\n                        <input matInput formControlName=\"user_email\" placeholder=\"User Email\" type=\"email\"\n                            autocomplete=\"off\" required />\n                        <mat-error *ngIf=\"isFieldValid('user_email')\">{{getErrorMessage('user_email')}}</mat-error>\n                    </mat-form-field>\n                </div>\n                <div class=\"row mt-4\">\n                    <div class=\"col-12 text-center\">\n                        <button mat-button type=\"submit\" class=\"btn btn-sm btn-primary w-100\"\n                            [disabled]=\"isWorking\">Register</button>\n                    </div>\n                </div>\n                <div class=\"row mt-2\" *ngIf=\"userConfig.showSocialLogin\">\n                    <div class=\"col-6\">\n                        <button class=\"col-12 google-button\" mat-raised-button type=\"button\"\n                            (click)=\"redirect('google')\">Google</button>\n                    </div>\n                    <div class=\"col-6\">\n                        <button class=\"col-12 facebook-button\" mat-raised-button type=\"button\"\n                            (click)=\"redirect('facebook')\">Facebook</button>\n                    </div>\n                </div>\n            </form>\n        </div>\n        <div class=\"row mt-3 mr-0 ml-0\">\n            <div class=\"col-12 text-center\">\n                <p>Already an {{ userConfig.appName }} member?</p>\n                <button mat-button class=\"btn btn-sm btn-secondary text-white\" style=\"width: 550px;\" type=\"button\"\n                    [routerLink]=\"['/login']\">\n                    Continue with login\n                </button>\n            </div>\n        </div>\n    </div>\n</div>", styles: ["#login-form-wrapper{margin-top:40px}#login-form-wrapper .branding-block{margin-bottom:60px}#login-form-wrapper .techlify-logo{height:40px;padding-right:10px;bottom:10px;position:relative}#login-form-wrapper .company-name{margin-bottom:0}#login-form-wrapper .google-button{background:#ce1d1d;color:#fff}#login-form-wrapper .facebook-button{background:#38388e;color:#fff}:host{width:100%}.white-box{background-color:#fff;padding:10px}mat-selection-list{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center}mat-list-option{border:1px solid #ccc;text-align:center;border-radius:4px;padding:10px;cursor:pointer}mat-list-option:hover{background-color:#f0f0f0}\n"] }]
         }], ctorParameters: function () { return [{ type: HttpService }, { type: AlertService }, { type: i1$5.Router }, { type: ErrorHandlerService }, { type: i1$4.UntypedFormBuilder }, { type: FormValidatorService }, { type: UserConfigService }]; } });
 
 const routes$3 = [
@@ -12405,7 +12588,10 @@ class UserModule {
             UserFormComponent,
             UserExploreComponent,
             UserViewComponent,
-            UserEnableButtonComponent], imports: [CommonModule,
+            UserEnableButtonComponent,
+            UserClientsListComponent,
+            UserClientEnableDisableButtonComponent,
+            UserSessionsComponent], imports: [CommonModule,
             UserRoutingProvider,
             MaterialModule,
             FlexLayoutModule,
@@ -12422,7 +12608,9 @@ class UserModule {
             MatTableModule,
             MatSortModule,
             DataTableModule], exports: [UsersViewAllComponent,
-            UserEnableButtonComponent] });
+            UserEnableButtonComponent,
+            UserClientsListComponent,
+            UserClientEnableDisableButtonComponent] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UserModule, imports: [CommonModule,
             UserRoutingProvider,
             MaterialModule,
@@ -12469,10 +12657,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         UserExploreComponent,
                         UserViewComponent,
                         UserEnableButtonComponent,
+                        UserClientsListComponent,
+                        UserClientEnableDisableButtonComponent,
+                        UserSessionsComponent
                     ],
                     exports: [
                         UsersViewAllComponent,
                         UserEnableButtonComponent,
+                        UserClientsListComponent,
+                        UserClientEnableDisableButtonComponent
                     ]
                 }]
         }] });
@@ -12596,7 +12789,7 @@ class AccessControlConfigFormComponent {
         this.location.back();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AccessControlConfigFormComponent, deps: [{ token: i1$4.UntypedFormBuilder }, { token: FormValidatorService }, { token: AlertService }, { token: AccessControlConfigService }, { token: i3.Location }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AccessControlConfigFormComponent, selector: "app-access-control-config-form", ngImport: i0, template: "<mat-card fxLayout=\"row\" fxLayoutAlign=\"center\" fxFlexOffset=\"25%\" fxFlex=\"50%\">\n  <mat-card-content>\n    <form [formGroup]=\"configForm\" (ngSubmit)=\"submit()\">\n      <div fxLayout=\"column\" class=\"mat-typography\">\n        <div class=\"text-center\">\n          <h2>\n            Access Control Configuration\n          </h2>\n        </div>\n        <div class=\"alert alert-warning\" role=\"alert\">\n          Be careful with these configurations as they affect all users in your entire app.\n        </div>\n        <div *ngIf=\"!isWorking\" fxLayout=\"row wrap\" fxLayoutGap=\"1rem grid\">\n          <mat-form-field fxFlex=\"100%\">\n            <mat-label>\n              Max Failed Login Attempts\n            </mat-label>\n            <input matInput formControlName=\"max_failed_consecutive_login_attempts\"\n                   placeholder=\"Max Failed Login Attempts\"\n                   autocomplete=\"off\"\n                   type=\"number\"\n                   min=\"0\"\n                   required />\n            <mat-hint>After how many failed login attempts should this user\u2019s account be locked?</mat-hint>\n            <mat-error *ngIf=\"isFieldValid('max_failed_consecutive_login_attempts')\">\n              {{getErrorMessage('max_failed_consecutive_login_attempts')}}\n            </mat-error>\n          </mat-form-field>\n\n          <mat-form-field fxFlex=\"100%\">\n            <mat-label>\n              Block x most recent passwords\n            </mat-label>\n            <input matInput\n                   formControlName=\"max_old_passwords_block\"\n                   placeholder=\"Block x most recent passwords\"\n                   type=\"number\"\n                   min=\"0\"\n                   autocomplete=\"off\"\n                   required />\n            <mat-hint>\n              How many recent passwords should the system block the user from reusing?\n              Example:  The user cannot reuse any of his/her last 3 passwords.\n            </mat-hint>\n            <mat-error *ngIf=\"isFieldValid('max_old_passwords_block')\">\n              {{getErrorMessage('max_old_passwords_block')}}\n            </mat-error>\n          </mat-form-field>\n\n          <mat-form-field fxFlex=\"100%\">\n            <mat-label>\n              Minimum Password Length\n            </mat-label>\n            <input matInput\n                   formControlName=\"min_password_length\"\n                   placeholder=\"Minimum Password Length\"\n                   type=\"number\"\n                   min=\"1\"\n                   autocomplete=\"off\" />\n            <mat-hint>\n              What is the minimum length of a user\u2019s password?\n            </mat-hint>\n            <mat-error *ngIf=\"isFieldValid('min_password_length')\">\n              {{getErrorMessage('min_password_length')}}\n            </mat-error>\n          </mat-form-field>\n\n          <div fxFlex=\"0 1 calc(50%-1rem)\">\n            <div fxLayout=\"column\">\n              <p class=\"text-secondary mb-0\"> Track Old Passwords?</p>\n              <div>\n                <mat-button-toggle-group formControlName=\"is_track_old_passwords\" class=\"status\" name=\"status\">\n                  <mat-button-toggle [value]=\"true\">\n                    Yes\n                  </mat-button-toggle>\n                  <mat-button-toggle [value]=\"false\">\n                    No\n                  </mat-button-toggle>\n                </mat-button-toggle-group>\n                <br>\n                <mat-hint class=\"custom-hint\">\n                  Should our software track old passwords to ensure users do not reuse old passwords?\n                </mat-hint>\n              </div>\n            </div>\n          </div>\n          <div fxFlex=\"0 1 calc(50%-1rem)\">\n            <div fxLayout=\"column\">\n              <p class=\"text-secondary mb-0\"> Password Require Number </p>\n              <div>\n                <mat-button-toggle-group formControlName=\"is_password_require_number\" class=\"status\" name=\"status\">\n                  <mat-button-toggle [value]=\"true\">\n                    Yes\n                  </mat-button-toggle>\n                  <mat-button-toggle [value]=\"false\">\n                    No\n                  </mat-button-toggle>\n                </mat-button-toggle-group>\n                <br>\n                <mat-hint class=\"custom-hint\">\n                  Should the system force a user to have a number in his/her password?\n                </mat-hint>\n              </div>\n            </div>\n          </div>\n\n          <div fxFlex=\"0 1 calc(50%-1rem)\">\n            <div fxLayout=\"column\">\n              <p class=\"text-secondary mb-0\"> Password Require Symbol </p>\n              <div>\n                <mat-button-toggle-group formControlName=\"is_password_require_symbol\" class=\"status\" name=\"status\">\n                  <mat-button-toggle [value]=\"true\">\n                    Yes\n                  </mat-button-toggle>\n                  <mat-button-toggle [value]=\"false\">\n                    No\n                  </mat-button-toggle>\n                </mat-button-toggle-group>\n                <br>\n                <mat-hint class=\"custom-hint\">\n                  Should the system force a user to have a symbol in his/her password?\n                </mat-hint>\n              </div>\n            </div>\n          </div>\n          <div fxFlex=\"0 1 calc(50%-1rem)\">\n            <div fxLayout=\"column\">\n              <p class=\"text-secondary mb-0\"> Password Require Capital Letter </p>\n              <div>\n                <mat-button-toggle-group formControlName=\"is_password_require_capital_letter\" class=\"status\" name=\"status\">\n                  <mat-button-toggle [value]=\"true\">\n                    Yes\n                  </mat-button-toggle>\n                  <mat-button-toggle [value]=\"false\">\n                    No\n                  </mat-button-toggle>\n                </mat-button-toggle-group>\n                <br>\n                <mat-hint class=\"custom-hint\">\n                  Should the system force a user to have a capital letter in his/her password?\n                </mat-hint>\n              </div>\n            </div>\n          </div>\n        </div>\n        <div class=\"mt-3 mb-3\">\n          <mat-progress-bar *ngIf=\"isWorking\" mode=\"indeterminate\"></mat-progress-bar>\n        </div>\n        <div fxFlex=\"100%\" fxLayout fxLayoutAlign=\"end\" fxLayoutGap=\"1rem\">\n          <button [disabled]=\"isSaving\" mat-flat-button type=\"button\" (click)=\"redirectBack()\">\n            Cancel\n          </button>\n          <button [disabled]=\"isSaving\"\n                  mat-raised-button type=\"submit\" color=\"primary\">\n            {{ isSaving ? 'Saving...' : 'Save' }}\n          </button>\n        </div>\n      </div>\n    </form>\n  </mat-card-content>\n</mat-card>\n", styles: [".custom-hint{font-size:10.5px}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$4.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$4.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$4.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i7.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i7.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i7.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i7.DefaultFlexOffsetDirective, selector: "  [fxFlexOffset], [fxFlexOffset.xs], [fxFlexOffset.sm], [fxFlexOffset.md],  [fxFlexOffset.lg], [fxFlexOffset.xl], [fxFlexOffset.lt-sm], [fxFlexOffset.lt-md],  [fxFlexOffset.lt-lg], [fxFlexOffset.lt-xl], [fxFlexOffset.gt-xs], [fxFlexOffset.gt-sm],  [fxFlexOffset.gt-md], [fxFlexOffset.gt-lg]", inputs: ["fxFlexOffset", "fxFlexOffset.xs", "fxFlexOffset.sm", "fxFlexOffset.md", "fxFlexOffset.lg", "fxFlexOffset.xl", "fxFlexOffset.lt-sm", "fxFlexOffset.lt-md", "fxFlexOffset.lt-lg", "fxFlexOffset.lt-xl", "fxFlexOffset.gt-xs", "fxFlexOffset.gt-sm", "fxFlexOffset.gt-md", "fxFlexOffset.gt-lg"] }, { kind: "directive", type: i7.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "component", type: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i7$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i7$2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i7$2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i9.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i10$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i10$1.MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: i3$2.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i3$2.MatButtonToggle, selector: "mat-button-toggle", inputs: ["disableRipple", "aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: i23.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AccessControlConfigFormComponent, selector: "app-access-control-config-form", ngImport: i0, template: "<mat-card fxLayout=\"row\" fxLayoutAlign=\"center\" fxFlexOffset=\"25%\" fxFlex=\"50%\">\n  <mat-card-content>\n    <form [formGroup]=\"configForm\" (ngSubmit)=\"submit()\">\n      <div fxLayout=\"column\" class=\"mat-typography\">\n        <div class=\"text-center\">\n          <h2>\n            Access Control Configuration\n          </h2>\n        </div>\n        <div class=\"alert alert-warning\" role=\"alert\">\n          Be careful with these configurations as they affect all users in your entire app.\n        </div>\n        <div *ngIf=\"!isWorking\" fxLayout=\"row wrap\" fxLayoutGap=\"1rem grid\">\n          <mat-form-field fxFlex=\"100%\">\n            <mat-label>\n              Max Failed Login Attempts\n            </mat-label>\n            <input matInput formControlName=\"max_failed_consecutive_login_attempts\"\n                   placeholder=\"Max Failed Login Attempts\"\n                   autocomplete=\"off\"\n                   type=\"number\"\n                   min=\"0\"\n                   required />\n            <mat-hint>After how many failed login attempts should this user\u2019s account be locked?</mat-hint>\n            <mat-error *ngIf=\"isFieldValid('max_failed_consecutive_login_attempts')\">\n              {{getErrorMessage('max_failed_consecutive_login_attempts')}}\n            </mat-error>\n          </mat-form-field>\n\n          <mat-form-field fxFlex=\"100%\">\n            <mat-label>\n              Block x most recent passwords\n            </mat-label>\n            <input matInput\n                   formControlName=\"max_old_passwords_block\"\n                   placeholder=\"Block x most recent passwords\"\n                   type=\"number\"\n                   min=\"0\"\n                   autocomplete=\"off\"\n                   required />\n            <mat-hint>\n              How many recent passwords should the system block the user from reusing?\n              Example:  The user cannot reuse any of his/her last 3 passwords.\n            </mat-hint>\n            <mat-error *ngIf=\"isFieldValid('max_old_passwords_block')\">\n              {{getErrorMessage('max_old_passwords_block')}}\n            </mat-error>\n          </mat-form-field>\n\n          <mat-form-field fxFlex=\"100%\">\n            <mat-label>\n              Minimum Password Length\n            </mat-label>\n            <input matInput\n                   formControlName=\"min_password_length\"\n                   placeholder=\"Minimum Password Length\"\n                   type=\"number\"\n                   min=\"1\"\n                   autocomplete=\"off\" />\n            <mat-hint>\n              What is the minimum length of a user\u2019s password?\n            </mat-hint>\n            <mat-error *ngIf=\"isFieldValid('min_password_length')\">\n              {{getErrorMessage('min_password_length')}}\n            </mat-error>\n          </mat-form-field>\n\n          <div fxFlex=\"0 1 calc(50%-1rem)\">\n            <div fxLayout=\"column\">\n              <p class=\"text-secondary mb-0\"> Track Old Passwords?</p>\n              <div>\n                <mat-button-toggle-group formControlName=\"is_track_old_passwords\" class=\"status\" name=\"status\">\n                  <mat-button-toggle [value]=\"true\">\n                    Yes\n                  </mat-button-toggle>\n                  <mat-button-toggle [value]=\"false\">\n                    No\n                  </mat-button-toggle>\n                </mat-button-toggle-group>\n                <br>\n                <mat-hint class=\"custom-hint\">\n                  Should our software track old passwords to ensure users do not reuse old passwords?\n                </mat-hint>\n              </div>\n            </div>\n          </div>\n          <div fxFlex=\"0 1 calc(50%-1rem)\">\n            <div fxLayout=\"column\">\n              <p class=\"text-secondary mb-0\"> Password Require Number </p>\n              <div>\n                <mat-button-toggle-group formControlName=\"is_password_require_number\" class=\"status\" name=\"status\">\n                  <mat-button-toggle [value]=\"true\">\n                    Yes\n                  </mat-button-toggle>\n                  <mat-button-toggle [value]=\"false\">\n                    No\n                  </mat-button-toggle>\n                </mat-button-toggle-group>\n                <br>\n                <mat-hint class=\"custom-hint\">\n                  Should the system force a user to have a number in his/her password?\n                </mat-hint>\n              </div>\n            </div>\n          </div>\n\n          <div fxFlex=\"0 1 calc(50%-1rem)\">\n            <div fxLayout=\"column\">\n              <p class=\"text-secondary mb-0\"> Password Require Symbol </p>\n              <div>\n                <mat-button-toggle-group formControlName=\"is_password_require_symbol\" class=\"status\" name=\"status\">\n                  <mat-button-toggle [value]=\"true\">\n                    Yes\n                  </mat-button-toggle>\n                  <mat-button-toggle [value]=\"false\">\n                    No\n                  </mat-button-toggle>\n                </mat-button-toggle-group>\n                <br>\n                <mat-hint class=\"custom-hint\">\n                  Should the system force a user to have a symbol in his/her password?\n                </mat-hint>\n              </div>\n            </div>\n          </div>\n          <div fxFlex=\"0 1 calc(50%-1rem)\">\n            <div fxLayout=\"column\">\n              <p class=\"text-secondary mb-0\"> Password Require Capital Letter </p>\n              <div>\n                <mat-button-toggle-group formControlName=\"is_password_require_capital_letter\" class=\"status\" name=\"status\">\n                  <mat-button-toggle [value]=\"true\">\n                    Yes\n                  </mat-button-toggle>\n                  <mat-button-toggle [value]=\"false\">\n                    No\n                  </mat-button-toggle>\n                </mat-button-toggle-group>\n                <br>\n                <mat-hint class=\"custom-hint\">\n                  Should the system force a user to have a capital letter in his/her password?\n                </mat-hint>\n              </div>\n            </div>\n          </div>\n        </div>\n        <div class=\"mt-3 mb-3\">\n          <mat-progress-bar *ngIf=\"isWorking\" mode=\"indeterminate\"></mat-progress-bar>\n        </div>\n        <div fxFlex=\"100%\" fxLayout fxLayoutAlign=\"end\" fxLayoutGap=\"1rem\">\n          <button [disabled]=\"isSaving\" mat-flat-button type=\"button\" (click)=\"redirectBack()\">\n            Cancel\n          </button>\n          <button [disabled]=\"isSaving\"\n                  mat-raised-button type=\"submit\" color=\"primary\">\n            {{ isSaving ? 'Saving...' : 'Save' }}\n          </button>\n        </div>\n      </div>\n    </form>\n  </mat-card-content>\n</mat-card>\n", styles: [".custom-hint{font-size:10.5px}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$4.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$4.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$4.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i7.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i7.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i7.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i7.DefaultFlexOffsetDirective, selector: "  [fxFlexOffset], [fxFlexOffset.xs], [fxFlexOffset.sm], [fxFlexOffset.md],  [fxFlexOffset.lg], [fxFlexOffset.xl], [fxFlexOffset.lt-sm], [fxFlexOffset.lt-md],  [fxFlexOffset.lt-lg], [fxFlexOffset.lt-xl], [fxFlexOffset.gt-xs], [fxFlexOffset.gt-sm],  [fxFlexOffset.gt-md], [fxFlexOffset.gt-lg]", inputs: ["fxFlexOffset", "fxFlexOffset.xs", "fxFlexOffset.sm", "fxFlexOffset.md", "fxFlexOffset.lg", "fxFlexOffset.xl", "fxFlexOffset.lt-sm", "fxFlexOffset.lt-md", "fxFlexOffset.lt-lg", "fxFlexOffset.lt-xl", "fxFlexOffset.gt-xs", "fxFlexOffset.gt-sm", "fxFlexOffset.gt-md", "fxFlexOffset.gt-lg"] }, { kind: "directive", type: i7.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "component", type: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i7$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i7$2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i7$2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i9.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i10$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i10$1.MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: i3$2.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i3$2.MatButtonToggle, selector: "mat-button-toggle", inputs: ["disableRipple", "aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: i5$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AccessControlConfigFormComponent, decorators: [{
             type: Component,
@@ -13302,7 +13495,7 @@ class RestrictorsListPageComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RestrictorsListPageComponent, deps: [{ token: i1$4.FormBuilder }, { token: RequestHelperService }, { token: i1$5.ActivatedRoute }, { token: RestrictorService }, { token: UserConfigService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: RestrictorsListPageComponent, selector: "lib-restrictors-list-page", ngImport: i0, template: "<div fxLayout fxLayoutAlign=\"center\" fxLayoutGap=\"10px\">\n  <h4 class=\"mb-0\">Restrictors</h4>\n  <mat-icon class=\"cursor-pointer\" [routerLink]=\"['create']\">add</mat-icon>\n</div>\n<p class=\"text-center text-secondary\">\n  These are the configurations for restrictions that we are adding to users' access of this app.\n</p>\n\n<mat-card class=\"mt-2\">\n  <mat-card-content>\n    <form [formGroup]=\"filterForm\" fxLayout fxLayoutAlign=\"start center\" fxLayoutGap=\"10px\">\n      <techlify-restrictor-type-selector formControlName=\"type_ids\"\n        [multiple]=\"true\"></techlify-restrictor-type-selector>\n      <techlify-restrictor-level-selector formControlName=\"level_ids\"\n        [multiple]=\"true\"></techlify-restrictor-level-selector>\n      <techlify-restrictor-status-selector formControlName=\"status_ids\"\n        [multiple]=\"true\"></techlify-restrictor-status-selector>\n    </form>\n  </mat-card-content>\n</mat-card>\n\n<mat-card class=\"mt-2 p-0\">\n  <mat-card-content>\n    <table mat-table [dataSource]=\"models\" class=\"w-100\" matSort (matSortChange)=\"onSortChange($event)\" infiniteScroll\n      [infiniteScrollDistance]=\"2\" [infiniteScrollThrottle]=\"50\" [infiniteScrollContainer]=\"scrollContainer\"\n      [fromRoot]=\"true\" (scrolled)=\"onScroll()\">\n\n      <!-- No Column -->\n      <ng-container matColumnDef=\"No\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header=\"created_at\"> # </th>\n        <td mat-cell *matCellDef=\"let element; let i = index;\"> {{ i + 1 }} </td>\n      </ng-container>\n\n      <!-- Type Column -->\n      <ng-container matColumnDef=\"Type\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header=\"type_id\"> Type </th>\n        <td mat-cell *matCellDef=\"let element\"> {{ element?.type?.title }} </td>\n      </ng-container>\n\n      <!-- Level Column -->\n      <ng-container matColumnDef=\"Level\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header=\"level_id\"> Level </th>\n        <td mat-cell *matCellDef=\"let element\"> {{element?.level?.title}} </td>\n      </ng-container>\n\n      <!-- Entity Column -->\n      <ng-container matColumnDef=\"Entity\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header=\"restricted_object_id\"> Entity </th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ getRestrictableTypeValue(element) }}\n        </td>\n      </ng-container>\n\n      <!-- Data Column -->\n      <ng-container matColumnDef=\"Data\">\n        <th mat-header-cell *matHeaderCellDef> Data </th>\n        <td mat-cell *matCellDef=\"let element\">\n          <p class=\"mb-0\" *ngIf=\"element?.data?.ip_range\">\n            IP Range: {{ element?.data?.ip_range }}\n          </p>\n          <p class=\"mb-0\" *ngIf=\"element?.data?.start_time\">\n            Start time: {{ element?.data?.start_time | date: 'short' }}\n          </p>\n          <p class=\"mb-0\" *ngIf=\"element?.data?.end_time\">\n            End time: {{ element?.data?.end_time | date: 'short' }}\n          </p>\n        </td>\n      </ng-container>\n\n      <!-- Status Column -->\n      <ng-container matColumnDef=\"Status\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header=\"status_id\"> Status </th>\n        <td mat-cell *matCellDef=\"let element\"> {{ element?.status?.title }}</td>\n      </ng-container>\n\n      <!-- Actions Column -->\n      <ng-container matColumnDef=\"Actions\">\n        <th mat-header-cell *matHeaderCellDef> Actions </th>\n        <td mat-cell *matCellDef=\"let element\">\n          <mat-icon class=\"cursor-pointer\" [routerLink]=\"[element?.id, 'edit']\">edit</mat-icon>\n        </td>\n      </ng-container>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n    </table>\n\n    <mat-progress-bar *ngIf=\"isWorking\" mode=\"indeterminate\"></mat-progress-bar>\n\n  </mat-card-content>\n</mat-card>", styles: [""], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$5.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i7.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i7.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i7.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "component", type: i10$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i10$1.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: RestrictorTypeSelectorComponent, selector: "techlify-restrictor-type-selector", inputs: ["label", "multiple", "showLabel"] }, { kind: "directive", type: i1$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: RestrictorLevelSelectorComponent, selector: "techlify-restrictor-level-selector", inputs: ["label", "multiple", "showLabel"] }, { kind: "component", type: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: RestrictorStatusSelectorComponent, selector: "techlify-restrictor-status-selector", inputs: ["label", "multiple", "showLabel"] }, { kind: "component", type: i11.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i11.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i11.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i11.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i11.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i11.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i11.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i11.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i11.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i11.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i23.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i10.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i10.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "directive", type: i4.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "pipe", type: i3.DatePipe, name: "date" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: RestrictorsListPageComponent, selector: "lib-restrictors-list-page", ngImport: i0, template: "<div fxLayout fxLayoutAlign=\"center\" fxLayoutGap=\"10px\">\n  <h4 class=\"mb-0\">Restrictors</h4>\n  <mat-icon class=\"cursor-pointer\" [routerLink]=\"['create']\">add</mat-icon>\n</div>\n<p class=\"text-center text-secondary\">\n  These are the configurations for restrictions that we are adding to users' access of this app.\n</p>\n\n<mat-card class=\"mt-2\">\n  <mat-card-content>\n    <form [formGroup]=\"filterForm\" fxLayout fxLayoutAlign=\"start center\" fxLayoutGap=\"10px\">\n      <techlify-restrictor-type-selector formControlName=\"type_ids\"\n        [multiple]=\"true\"></techlify-restrictor-type-selector>\n      <techlify-restrictor-level-selector formControlName=\"level_ids\"\n        [multiple]=\"true\"></techlify-restrictor-level-selector>\n      <techlify-restrictor-status-selector formControlName=\"status_ids\"\n        [multiple]=\"true\"></techlify-restrictor-status-selector>\n    </form>\n  </mat-card-content>\n</mat-card>\n\n<mat-card class=\"mt-2 p-0\">\n  <mat-card-content>\n    <table mat-table [dataSource]=\"models\" class=\"w-100\" matSort (matSortChange)=\"onSortChange($event)\" infiniteScroll\n      [infiniteScrollDistance]=\"2\" [infiniteScrollThrottle]=\"50\" [infiniteScrollContainer]=\"scrollContainer\"\n      [fromRoot]=\"true\" (scrolled)=\"onScroll()\">\n\n      <!-- No Column -->\n      <ng-container matColumnDef=\"No\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header=\"created_at\"> # </th>\n        <td mat-cell *matCellDef=\"let element; let i = index;\"> {{ i + 1 }} </td>\n      </ng-container>\n\n      <!-- Type Column -->\n      <ng-container matColumnDef=\"Type\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header=\"type_id\"> Type </th>\n        <td mat-cell *matCellDef=\"let element\"> {{ element?.type?.title }} </td>\n      </ng-container>\n\n      <!-- Level Column -->\n      <ng-container matColumnDef=\"Level\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header=\"level_id\"> Level </th>\n        <td mat-cell *matCellDef=\"let element\"> {{element?.level?.title}} </td>\n      </ng-container>\n\n      <!-- Entity Column -->\n      <ng-container matColumnDef=\"Entity\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header=\"restricted_object_id\"> Entity </th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{ getRestrictableTypeValue(element) }}\n        </td>\n      </ng-container>\n\n      <!-- Data Column -->\n      <ng-container matColumnDef=\"Data\">\n        <th mat-header-cell *matHeaderCellDef> Data </th>\n        <td mat-cell *matCellDef=\"let element\">\n          <p class=\"mb-0\" *ngIf=\"element?.data?.ip_range\">\n            IP Range: {{ element?.data?.ip_range }}\n          </p>\n          <p class=\"mb-0\" *ngIf=\"element?.data?.start_time\">\n            Start time: {{ element?.data?.start_time | date: 'short' }}\n          </p>\n          <p class=\"mb-0\" *ngIf=\"element?.data?.end_time\">\n            End time: {{ element?.data?.end_time | date: 'short' }}\n          </p>\n        </td>\n      </ng-container>\n\n      <!-- Status Column -->\n      <ng-container matColumnDef=\"Status\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header=\"status_id\"> Status </th>\n        <td mat-cell *matCellDef=\"let element\"> {{ element?.status?.title }}</td>\n      </ng-container>\n\n      <!-- Actions Column -->\n      <ng-container matColumnDef=\"Actions\">\n        <th mat-header-cell *matHeaderCellDef> Actions </th>\n        <td mat-cell *matCellDef=\"let element\">\n          <mat-icon class=\"cursor-pointer\" [routerLink]=\"[element?.id, 'edit']\">edit</mat-icon>\n        </td>\n      </ng-container>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n    </table>\n\n    <mat-progress-bar *ngIf=\"isWorking\" mode=\"indeterminate\"></mat-progress-bar>\n\n  </mat-card-content>\n</mat-card>", styles: [""], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$5.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i7.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i7.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i7.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "component", type: i10$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i10$1.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: RestrictorTypeSelectorComponent, selector: "techlify-restrictor-type-selector", inputs: ["label", "multiple", "showLabel"] }, { kind: "directive", type: i1$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: RestrictorLevelSelectorComponent, selector: "techlify-restrictor-level-selector", inputs: ["label", "multiple", "showLabel"] }, { kind: "component", type: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: RestrictorStatusSelectorComponent, selector: "techlify-restrictor-status-selector", inputs: ["label", "multiple", "showLabel"] }, { kind: "component", type: i11.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i11.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i11.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i11.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i11.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i11.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i11.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i11.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i11.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i11.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i5$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i10.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i10.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "directive", type: i4.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "pipe", type: i3.DatePipe, name: "date" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RestrictorsListPageComponent, decorators: [{
             type: Component,
@@ -13532,7 +13725,7 @@ class RestrictorsFormPageComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RestrictorsFormPageComponent, deps: [{ token: i1$5.ActivatedRoute }, { token: RestrictorService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: RestrictorsFormPageComponent, selector: "lib-restrictors-form-page", ngImport: i0, template: "<div fxLayout fxLayoutAlign=\"start center\">\n  <mat-card fxFlex=\"50%\" fxFlexOffset=\"25%\">\n    <mat-card-content>\n      <techlify-restrictors-form *ngIf=\"!isWorking else progressBarTemplate\"\n                                 [restrictor]=\"restrictor\"></techlify-restrictors-form>\n    </mat-card-content>\n  </mat-card>\n</div>\n\n<ng-template #progressBarTemplate>\n  <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i7.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i7.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i7.DefaultFlexOffsetDirective, selector: "  [fxFlexOffset], [fxFlexOffset.xs], [fxFlexOffset.sm], [fxFlexOffset.md],  [fxFlexOffset.lg], [fxFlexOffset.xl], [fxFlexOffset.lt-sm], [fxFlexOffset.lt-md],  [fxFlexOffset.lt-lg], [fxFlexOffset.lt-xl], [fxFlexOffset.gt-xs], [fxFlexOffset.gt-sm],  [fxFlexOffset.gt-md], [fxFlexOffset.gt-lg]", inputs: ["fxFlexOffset", "fxFlexOffset.xs", "fxFlexOffset.sm", "fxFlexOffset.md", "fxFlexOffset.lg", "fxFlexOffset.xl", "fxFlexOffset.lt-sm", "fxFlexOffset.lt-md", "fxFlexOffset.lt-lg", "fxFlexOffset.lt-xl", "fxFlexOffset.gt-xs", "fxFlexOffset.gt-sm", "fxFlexOffset.gt-md", "fxFlexOffset.gt-lg"] }, { kind: "directive", type: i7.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "component", type: i10$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i10$1.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i23.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: RestrictorsFormComponent, selector: "techlify-restrictors-form", inputs: ["restrictor"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: RestrictorsFormPageComponent, selector: "lib-restrictors-form-page", ngImport: i0, template: "<div fxLayout fxLayoutAlign=\"start center\">\n  <mat-card fxFlex=\"50%\" fxFlexOffset=\"25%\">\n    <mat-card-content>\n      <techlify-restrictors-form *ngIf=\"!isWorking else progressBarTemplate\"\n                                 [restrictor]=\"restrictor\"></techlify-restrictors-form>\n    </mat-card-content>\n  </mat-card>\n</div>\n\n<ng-template #progressBarTemplate>\n  <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i7.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i7.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i7.DefaultFlexOffsetDirective, selector: "  [fxFlexOffset], [fxFlexOffset.xs], [fxFlexOffset.sm], [fxFlexOffset.md],  [fxFlexOffset.lg], [fxFlexOffset.xl], [fxFlexOffset.lt-sm], [fxFlexOffset.lt-md],  [fxFlexOffset.lt-lg], [fxFlexOffset.lt-xl], [fxFlexOffset.gt-xs], [fxFlexOffset.gt-sm],  [fxFlexOffset.gt-md], [fxFlexOffset.gt-lg]", inputs: ["fxFlexOffset", "fxFlexOffset.xs", "fxFlexOffset.sm", "fxFlexOffset.md", "fxFlexOffset.lg", "fxFlexOffset.xl", "fxFlexOffset.lt-sm", "fxFlexOffset.lt-md", "fxFlexOffset.lt-lg", "fxFlexOffset.lt-xl", "fxFlexOffset.gt-xs", "fxFlexOffset.gt-sm", "fxFlexOffset.gt-md", "fxFlexOffset.gt-lg"] }, { kind: "directive", type: i7.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "component", type: i10$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i10$1.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i5$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: RestrictorsFormComponent, selector: "techlify-restrictors-form", inputs: ["restrictor"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RestrictorsFormPageComponent, decorators: [{
             type: Component,
@@ -14172,5 +14365,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AccessControlConfigModule, ActionPopup, ActionPopupComponent, ActionPopupModule, AlertService, ApiPrefixInterceptor, AuditLogForModelComponent, AuditLogForModelModule, AuditLogForModelRoutingModule, AuditLogListComponent, AuditLogListFilterComponent, AuditLogListFilterModule, AuditLogListFilterRoutingModule, AuditLogListModule, AuditLogListRoutingModule, AuditLogModule, AuditLogRoutingModule, AuditLogViewComponent, AuditLogViewModelComponent, AuditLogViewModelModule, AuditLogViewModelRoutingModule, AuditLogViewModule, AuditLogViewRoutingModule, AuditLogsViewModelComponent, AuditLogsViewModelModule, AuditLogsViewModelRoutingModule, AuthenticationGuard, AuthenticationService, CacheInterceptor, ChangePasswordModule, ColumnSelectorComponent, ColumnSelectorModule, CommentFormComponent, ConfigService, CoreModule, CredentialsService, CurrentUserService, DEFAULT_SELECTED_VALUE, DataManager, DataTable, DataTableComponent, DataTableModule, DateUtils, DateValidator, DocumentViewerComponent, DocumentViewerModule, EmailSubscriptionForUserComponent, EmailSubscriptionForUserModule, EmailSubscriptionForUserRoutingModule, EmailSubscriptionModule, EmailSubscriptionRoutingModule, EmailSubscriptionTypeFormComponent, EmailSubscriptionTypeFormModule, EmailSubscriptionTypeFormRoutingModule, EmailSubscriptionTypeListComponent, EmailSubscriptionTypeListModule, EmailSubscriptionTypeListRoutingModule, EmailSubscriptionTypeModule, EmailSubscriptionTypeRoutingModule, EmailSubscriptionUserFormComponent, EmailSubscriptionUserFormModule, EmailSubscriptionUserFormRoutingModule, EmailSubscriptionUserListComponent, EmailSubscriptionUserListFilterComponent, EmailSubscriptionUserListFilterModule, EmailSubscriptionUserListFilterRoutingModule, EmailSubscriptionUserListModule, EmailSubscriptionUserListRoutingModule, EmailSubscriptionUserModule, EmailSubscriptionUserRoutingModule, EntityFileFormComponent, EntityFileService, EntityFilesViewAllComponent, EntityFilesViewAllModule, ErrorHandlerInterceptor, ErrorHandlerService, ErrorSnackComponent, ExportExcelButtonComponent, ExportExcelModule, FileDragdropUploaderComponent, FileDragdropUploaderModule, FileDropperComponent, FileDropperConfig, FileDropperModule, FilterService, ForgotPasswordComponent, ForgotPasswordModule, ForgotPasswordRoutingModule, FormValidatorService, HTTP_DYNAMIC_INTERCEPTORS, HttpCacheService, HttpService, ImportCsvComponent, ImportCsvModule, LoaderComponent, LoaderModule, LogLevel, Logger, LoginComponent, LoginHistoryForUserComponent, LoginHistoryForUserModule, LoginHistoryForUserRoutingModule, LoginModule, LoginRoutingModule, MaterialModule, MultiUserConfig, NgxTechlifyNotifierComponent, NgxTechlifyNotifierModule, NgxTechlifyNotifierRoutingModule, NgxTechlifyUsersModule, NoteFormComponent, NoteListComponent, NoteModule, NumItemsSelector, NumberInputButtonComponent, NumberInputButtonModule, NumberSelector, PageEvent, Permission, PermissionModule, PermissionRoutingProvider, PermissionsManagementComponent, ProfileEditComponent, ProfileModule, ProfileRoutingModule, ReadMoreComponent, ReadMoreModule, RequestHelperService, RestrictorTypeSelectorComponent, RestrictorTypeSelectorModule, RestrictorsModule, Role, RoleFormComponent, RoleModule, RoleRoutingProvider, RoleService, RolesViewAllComponent, RouteReusableStrategy, SearchableSelectorComponent, SearchableSelectorModule, SignUpComponent, SignupModule, SignupRoutingModule, SnackModule, StorageService, SuccessSnackComponent, TechlifyCompanySwitcherComponent, TechlifyCompanySwitcherModule, TechlifyConfig, TechlifyFeatureEnabledDirective, TechlifyFeatureListingComponent, TechlifyFeatureModule, TechlifyFeatureRoutes, TechlifyFormComponentInterface, TechlifyListingControllerInterface, TechlifyNotficationSubscriberDashboardComponent, TechlifyNotficationSubscriberDashboardModule, TechlifyNotficationSubscriberDashboardRoutingModule, TechlifyNotificationForUserComponent, TechlifyNotificationForUserModule, TechlifyNotificationForUserRoutingModule, TechlifyNotificationModule, TechlifyNotificationRoutingModule, TechlifyNotificationSubscriberFormComponent, TechlifyNotificationSubscriberFormModule, TechlifyNotificationSubscriberListComponent, TechlifyNotificationSubscriberListFilterComponent, TechlifyNotificationSubscriberListFilterModule, TechlifyNotificationSubscriberListModule, TechlifyNotificationSubscriberListRoutingModule, TechlifyNotificationSubscriberModule, TechlifyNotificationSubscriberRoutingModule, TechlifyNotificationSubscriptionEntity, TechlifyNotificationTypeFormComponent, TechlifyNotificationTypeFormModule, TechlifyNotificationTypeListComponent, TechlifyNotificationTypeListModule, TechlifyNotificationTypeListRoutingModule, TechlifyNotificationTypeModule, TechlifyNotificationTypeRoutingModule, TechlifyNotificationUserStatus, TechlifyServiceBaseClass, TechlifyTaggerTagFormConfigModel, TechlifyTaggerTagFormFieldComponent, TechlifyTaggerTagFormFieldModule, TechlifyTaggerTagSelectorComponent, TechlifyTaggerTagSelectorModule, TechlifyUpdateHistoryModule, TechlifyUpdateModule, TechlifyUpdateService, TechlifyUpdatesTeaserComponent, TechlifyUpdatesTeaserModule, Timeline, TimelineFilterComponent, TimelineFilterModule, TokenInterceptor, UpdateNotifierComponent, UpdateNotifierModule, User, UserConfig, UserConfigService, UserDataService, UserEnableButtonComponent, UserExploreComponent, UserFormComponent, UserListPageConfig, UserModule, UserRoutingProvider, UserSelectorComponent, UserSelectorModule, UserService, UsersViewAllComponent, UtilityModule, ViewerConfig, calculateTimeline, esfur, estlr, esulr };
+export { AccessControlConfigModule, ActionPopup, ActionPopupComponent, ActionPopupModule, AlertService, ApiPrefixInterceptor, AuditLogForModelComponent, AuditLogForModelModule, AuditLogForModelRoutingModule, AuditLogListComponent, AuditLogListFilterComponent, AuditLogListFilterModule, AuditLogListFilterRoutingModule, AuditLogListModule, AuditLogListRoutingModule, AuditLogModule, AuditLogRoutingModule, AuditLogViewComponent, AuditLogViewModelComponent, AuditLogViewModelModule, AuditLogViewModelRoutingModule, AuditLogViewModule, AuditLogViewRoutingModule, AuditLogsViewModelComponent, AuditLogsViewModelModule, AuditLogsViewModelRoutingModule, AuthenticationGuard, AuthenticationService, CacheInterceptor, ChangePasswordModule, ColumnSelectorComponent, ColumnSelectorModule, CommentFormComponent, ConfigService, CoreModule, CredentialsService, CurrentUserService, DEFAULT_SELECTED_VALUE, DataManager, DataTable, DataTableComponent, DataTableModule, DateUtils, DateValidator, DocumentViewerComponent, DocumentViewerModule, EmailSubscriptionForUserComponent, EmailSubscriptionForUserModule, EmailSubscriptionForUserRoutingModule, EmailSubscriptionModule, EmailSubscriptionRoutingModule, EmailSubscriptionTypeFormComponent, EmailSubscriptionTypeFormModule, EmailSubscriptionTypeFormRoutingModule, EmailSubscriptionTypeListComponent, EmailSubscriptionTypeListModule, EmailSubscriptionTypeListRoutingModule, EmailSubscriptionTypeModule, EmailSubscriptionTypeRoutingModule, EmailSubscriptionUserFormComponent, EmailSubscriptionUserFormModule, EmailSubscriptionUserFormRoutingModule, EmailSubscriptionUserListComponent, EmailSubscriptionUserListFilterComponent, EmailSubscriptionUserListFilterModule, EmailSubscriptionUserListFilterRoutingModule, EmailSubscriptionUserListModule, EmailSubscriptionUserListRoutingModule, EmailSubscriptionUserModule, EmailSubscriptionUserRoutingModule, EntityFileFormComponent, EntityFileService, EntityFilesViewAllComponent, EntityFilesViewAllModule, ErrorHandlerInterceptor, ErrorHandlerService, ErrorSnackComponent, ExportExcelButtonComponent, ExportExcelModule, FileDragdropUploaderComponent, FileDragdropUploaderModule, FileDropperComponent, FileDropperConfig, FileDropperModule, FilterService, ForgotPasswordComponent, ForgotPasswordModule, ForgotPasswordRoutingModule, FormValidatorService, HTTP_DYNAMIC_INTERCEPTORS, HttpCacheService, HttpService, ImportCsvComponent, ImportCsvModule, LoaderComponent, LoaderModule, LogLevel, Logger, LoginComponent, LoginHistoryForUserComponent, LoginHistoryForUserModule, LoginHistoryForUserRoutingModule, LoginModule, LoginRoutingModule, MaterialModule, MultiUserConfig, NgxTechlifyNotifierComponent, NgxTechlifyNotifierModule, NgxTechlifyNotifierRoutingModule, NgxTechlifyUsersModule, NoteFormComponent, NoteListComponent, NoteModule, NumItemsSelector, NumberInputButtonComponent, NumberInputButtonModule, NumberSelector, PageEvent, Permission, PermissionModule, PermissionRoutingProvider, PermissionsManagementComponent, ProfileEditComponent, ProfileModule, ProfileRoutingModule, ReadMoreComponent, ReadMoreModule, RequestHelperService, RestrictorTypeSelectorComponent, RestrictorTypeSelectorModule, RestrictorsModule, Role, RoleFormComponent, RoleModule, RoleRoutingProvider, RoleService, RolesViewAllComponent, RouteReusableStrategy, SearchableSelectorComponent, SearchableSelectorModule, SignUpComponent, SignupModule, SignupRoutingModule, SnackModule, StorageService, SuccessSnackComponent, TechlifyCompanySwitcherComponent, TechlifyCompanySwitcherModule, TechlifyConfig, TechlifyFeatureEnabledDirective, TechlifyFeatureListingComponent, TechlifyFeatureModule, TechlifyFeatureRoutes, TechlifyFormComponentInterface, TechlifyListingControllerInterface, TechlifyNotficationSubscriberDashboardComponent, TechlifyNotficationSubscriberDashboardModule, TechlifyNotficationSubscriberDashboardRoutingModule, TechlifyNotificationForUserComponent, TechlifyNotificationForUserModule, TechlifyNotificationForUserRoutingModule, TechlifyNotificationModule, TechlifyNotificationRoutingModule, TechlifyNotificationSubscriberFormComponent, TechlifyNotificationSubscriberFormModule, TechlifyNotificationSubscriberListComponent, TechlifyNotificationSubscriberListFilterComponent, TechlifyNotificationSubscriberListFilterModule, TechlifyNotificationSubscriberListModule, TechlifyNotificationSubscriberListRoutingModule, TechlifyNotificationSubscriberModule, TechlifyNotificationSubscriberRoutingModule, TechlifyNotificationSubscriptionEntity, TechlifyNotificationTypeFormComponent, TechlifyNotificationTypeFormModule, TechlifyNotificationTypeListComponent, TechlifyNotificationTypeListModule, TechlifyNotificationTypeListRoutingModule, TechlifyNotificationTypeModule, TechlifyNotificationTypeRoutingModule, TechlifyNotificationUserStatus, TechlifyServiceBaseClass, TechlifyTaggerTagFormConfigModel, TechlifyTaggerTagFormFieldComponent, TechlifyTaggerTagFormFieldModule, TechlifyTaggerTagSelectorComponent, TechlifyTaggerTagSelectorModule, TechlifyUpdateHistoryModule, TechlifyUpdateModule, TechlifyUpdateService, TechlifyUpdatesTeaserComponent, TechlifyUpdatesTeaserModule, Timeline, TimelineFilterComponent, TimelineFilterModule, TokenInterceptor, UpdateNotifierComponent, UpdateNotifierModule, User, UserClientEnableDisableButtonComponent, UserClientsListComponent, UserConfig, UserConfigService, UserDataService, UserEnableButtonComponent, UserExploreComponent, UserFormComponent, UserListPageConfig, UserModule, UserRoutingProvider, UserSelectorComponent, UserSelectorModule, UserService, UserSessionsComponent, UsersViewAllComponent, UtilityModule, ViewerConfig, calculateTimeline, esfur, estlr, esulr };
 //# sourceMappingURL=ngx-techlify-core.mjs.map