ngx-techlify-core 14.15.0 → 14.16.0

package/fesm2020/ngx-techlify-core.mjs

@@ -3964,6 +3964,7 @@ let AuditLogListComponent = class AuditLogListComponent extends TechlifyListingC
         this.activatedRoute = activatedRoute;
         this.showFilter = true;
         this.showExportButtons = true;
+        this.disableFilterPatchingFromUrl = false;
         this.filters = { sort_by: 'created_at|desc' };
         this.displayedColumns = [
             'index',
@@ -3991,19 +3992,25 @@ let AuditLogListComponent = class AuditLogListComponent extends TechlifyListingC
     }
     ngOnInit() {
         this.initializeData();
-        this.filterForm.valueChanges.subscribe({
-            next: (value) => {
-                const params = this.requestHelperService.convertToFormData(value);
-                this.requestHelperService.updateQueryParams(params);
-            }
-        });
-        // update form with query params
-        this.requestHelperService.updateFormWithQueryParams(this.filterForm, {
-            duration: { number: true },
-            object_type: { multiple: true },
-            action: { multiple: true },
-            creator_ids: { multiple: true },
-        });
+        /**
+         * Disable filter patching from URL so that when this component
+         * is used in a dialog, it doesn't interact with the URL
+         */
+        if (!this.disableFilterPatchingFromUrl) {
+            this.filterForm.valueChanges.subscribe({
+                next: (value) => {
+                    const params = this.requestHelperService.convertToFormData(value);
+                    this.requestHelperService.updateQueryParams(params);
+                }
+            });
+            // update form with query params
+            this.requestHelperService.updateFormWithQueryParams(this.filterForm, {
+                duration: { number: true },
+                object_type: { multiple: true },
+                action: { multiple: true },
+                creator_ids: { multiple: true },
+            });
+        }
         // listen for route change
         this.activatedRoute.queryParams
             .pipe(debounceTime(800), distinctUntilChanged())
@@ -4100,7 +4107,7 @@ let AuditLogListComponent = class AuditLogListComponent extends TechlifyListingC
     }
 };
 AuditLogListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", 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 });
-AuditLogListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: AuditLogListComponent, selector: "app-audit-log-list", inputs: { objectId: "objectId", objectType: "objectType", showFilter: "showFilter", showExportButtons: "showExportButtons", userId: "userId" }, 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", exportAs: ["matCard"] }, { kind: "directive", type: i10$1.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { 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" }] });
+AuditLogListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", 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", exportAs: ["matCard"] }, { kind: "directive", type: i10$1.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { 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" }] });
 AuditLogListComponent = __decorate([
     UntilDestroy()
 ], AuditLogListComponent);
@@ -4117,6 +4124,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImpor
                 type: Input
             }], userId: [{
                 type: Input
+            }], disableFilterPatchingFromUrl: [{
+                type: Input
             }], sort: [{
                 type: ViewChild,
                 args: [MatSort, { static: true }]
@@ -4170,7 +4179,7 @@ class UserViewComponent {
     }
 }
 UserViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: UserViewComponent, deps: [{ token: UserService }, { token: i1$5.ActivatedRoute }, { token: ConfigService }, { token: HttpService }, { token: i1.MatDialog }, { token: CurrentUserService }], target: i0.ɵɵFactoryTarget.Component });
-UserViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", 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: i7$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: 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"] }, { kind: "component", type: i11$2.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { kind: "component", type: i11$2.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "directive", type: i11$2.MatTabContent, selector: "[matTabContent]" }] });
+UserViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", 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: i7$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: 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: "component", type: i11$2.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { kind: "component", type: i11$2.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "directive", type: i11$2.MatTabContent, selector: "[matTabContent]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", 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"] }]
@@ -8836,13 +8845,13 @@ let AuditLogsViewModelComponent = class AuditLogsViewModelComponent {
     }
 };
 AuditLogsViewModelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: AuditLogsViewModelComponent, deps: [{ token: i1.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: i1$5.Router }], target: i0.ɵɵFactoryTarget.Component });
-AuditLogsViewModelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: AuditLogsViewModelComponent, selector: "app-audit-logs-view-model", ngImport: i0, template: "<div fxLayout=\"column\" class=\"m-4\" fxLayoutGap=\"1.5rem\">\n    <app-audit-log-list [objectId]=\"data?.modelId\" [objectType]=\"data?.modelType\" [showExportButtons]=\"false\">\n    </app-audit-log-list>\n</div>", styles: ["::ng-deep app-audit-log-list .scroll-container{height:350px!important;overflow-y:scroll}\n"], dependencies: [{ 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: "component", type: AuditLogListComponent, selector: "app-audit-log-list", inputs: ["objectId", "objectType", "showFilter", "showExportButtons", "userId"] }] });
+AuditLogsViewModelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: AuditLogsViewModelComponent, selector: "app-audit-logs-view-model", ngImport: i0, template: "<div fxLayout=\"column\" class=\"m-4\" fxLayoutGap=\"1.5rem\">\n    <app-audit-log-list [objectId]=\"data?.modelId\" [objectType]=\"data?.modelType\" [showExportButtons]=\"false\" [disableFilterPatchingFromUrl]=\"true\">\n    </app-audit-log-list>\n</div>", styles: ["::ng-deep app-audit-log-list .scroll-container{height:350px!important;overflow-y:scroll}\n"], dependencies: [{ 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: "component", type: AuditLogListComponent, selector: "app-audit-log-list", inputs: ["objectId", "objectType", "showFilter", "showExportButtons", "userId", "disableFilterPatchingFromUrl"] }] });
 AuditLogsViewModelComponent = __decorate([
     UntilDestroy()
 ], AuditLogsViewModelComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: AuditLogsViewModelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-audit-logs-view-model', template: "<div fxLayout=\"column\" class=\"m-4\" fxLayoutGap=\"1.5rem\">\n    <app-audit-log-list [objectId]=\"data?.modelId\" [objectType]=\"data?.modelType\" [showExportButtons]=\"false\">\n    </app-audit-log-list>\n</div>", styles: ["::ng-deep app-audit-log-list .scroll-container{height:350px!important;overflow-y:scroll}\n"] }]
+            args: [{ selector: 'app-audit-logs-view-model', template: "<div fxLayout=\"column\" class=\"m-4\" fxLayoutGap=\"1.5rem\">\n    <app-audit-log-list [objectId]=\"data?.modelId\" [objectType]=\"data?.modelType\" [showExportButtons]=\"false\" [disableFilterPatchingFromUrl]=\"true\">\n    </app-audit-log-list>\n</div>", styles: ["::ng-deep app-audit-log-list .scroll-container{height:350px!important;overflow-y:scroll}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.MatDialogRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
@@ -10498,10 +10507,10 @@ class ChangePasswordComponent {
     }
 }
 ChangePasswordComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: ChangePasswordComponent, deps: [{ token: HttpService }, { token: AlertService }, { token: i1$5.Router }, { token: CurrentUserService }, { token: i1$4.UntypedFormBuilder }, { token: ErrorHandlerService }, { token: FormValidatorService }], target: i0.ɵɵFactoryTarget.Component });
-ChangePasswordComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: ChangePasswordComponent, selector: "app-change-password", ngImport: i0, template: "<div fxLayout=\"column wrap\" fxFlexFill fxLayoutAlign=\"center center\">\n  <mat-card>\n    <mat-card-title fxLayoutAlign=\"center center\">\n      Update Your Password\n    </mat-card-title>\n    <mat-card-subtitle fxLayoutAlign=\"center center\">\n      <small class=\"text-muted\" *ngIf=\"user?.is_temporary_password\">\n        You\u2019re currently using a temporary password, please change it to proceed\n      </small>\n    </mat-card-subtitle>\n    <form [formGroup]=\"passwordResetForm\" (ngSubmit)=\"saveNewPassword()\">\n      <mat-card-content fxLayout=\"column wrap\" fxLayoutGap=\"1rem\">\n        <mat-form-field fxFlex=\"100%\">\n          <mat-label>Current Password</mat-label>\n          <input matInput formControlName=\"current_password\"\n                 placeholder=\"Current Password\"\n                 type=\"password\"\n                 autocomplete=\"off\"\n                 required />\n          <mat-hint>Your current password.</mat-hint>\n          <mat-error *ngIf=\"isFieldValid('current_password')\">{{getErrorMessage('current_password')}}\n          </mat-error>\n        </mat-form-field>\n        <mat-form-field fxFlex=\"100%\">\n          <mat-label>New Password</mat-label>\n          <input matInput formControlName=\"password\"\n                 placeholder=\"New Password\"\n                 [type]=\"passwordHide ? 'password' : 'text'\"\n                 autocomplete=\"off\"\n                 required />\n          <button matSuffix mat-icon-button (click)=\"passwordHide = !passwordHide\" type=\"button\">\n            <mat-icon>{{passwordHide ? 'visibility_off' : 'visibility'}}</mat-icon>\n          </button>\n          <mat-error *ngIf=\"isFieldValid('password')\">{{getErrorMessage('password')}}</mat-error>\n          <mat-hint>The new password you would like to use.</mat-hint>\n        </mat-form-field>\n        <mat-form-field fxFlex=\"100%\">\n          <mat-label>Confirm Password</mat-label>\n          <input matInput formControlName=\"password_confirmation\" placeholder=\"Confirm Password\"\n                 [type]=\"passwordConfirmationHide ? 'password' : 'text'\" autocomplete=\"off\" required />\n          <button matSuffix mat-icon-button (click)=\"passwordConfirmationHide = !passwordConfirmationHide\" type=\"button\">\n            <mat-icon>{{passwordConfirmationHide ? 'visibility_off' : 'visibility'}}</mat-icon>\n          </button>\n          <mat-error *ngIf=\"isFieldValid('password_confirmation')\">{{getErrorMessage('password_confirmation')}}</mat-error>\n        </mat-form-field>\n      </mat-card-content>\n      <div class=\"mt-2 mb-2\">\n        <techlify-password-requirement-check [password]=\"passwordResetForm.get('password').value\"></techlify-password-requirement-check>\n      </div>\n      <mat-card-actions fxLayoutAlign=\"end\">\n        <button mat-raised-button color=primary type=\"submit\" [disabled]=\"isWorking\">\n          Change Password\n        </button>\n      </mat-card-actions>\n    </form>\n  </mat-card>\n</div>\n", styles: ["mat-card{width:500px}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i7$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i7$3.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i7$3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7$3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i7$3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i7$3.MatSuffix, selector: "[matSuffix]" }, { 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: "component", type: i10$1.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i10$1.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { kind: "directive", type: i10$1.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "directive", type: i10$1.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "directive", type: i10$1.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { 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: "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.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { 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: PasswordRequirementCheckComponent, selector: "techlify-password-requirement-check", inputs: ["password"] }] });
+ChangePasswordComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: ChangePasswordComponent, selector: "app-change-password", ngImport: i0, template: "<div class=\"h-100 d-flex justify-content-center align-items-center w-100\">\n  <div class=\"row w-100\">\n    <div class=\"col-lg-6 col-md-8 col-sm-10 col-xs-12 col-12 mx-auto\">\n      <mat-card>\n        <mat-card-title>\n          Update Your Password\n        </mat-card-title>\n        <mat-card-subtitle>\n          <small class=\"text-muted\" *ngIf=\"user?.is_temporary_password\">\n            You\u2019re currently using a temporary password, please change it to proceed\n          </small>\n        </mat-card-subtitle>\n        <form [formGroup]=\"passwordResetForm\" (ngSubmit)=\"saveNewPassword()\">\n          <mat-card-content fxLayout=\"column wrap\" fxLayoutGap=\"1rem\">\n            <mat-form-field fxFlex=\"100%\">\n              <mat-label>Current Password</mat-label>\n              <input matInput formControlName=\"current_password\"\n                     placeholder=\"Current Password\"\n                     type=\"password\"\n                     autocomplete=\"off\"\n                     required />\n              <mat-hint>Your current password.</mat-hint>\n              <mat-error *ngIf=\"isFieldValid('current_password')\">\n                {{getErrorMessage('current_password')}}\n              </mat-error>\n            </mat-form-field>\n            <mat-form-field fxFlex=\"100%\">\n              <mat-label>New Password</mat-label>\n              <input matInput formControlName=\"password\"\n                     placeholder=\"New Password\"\n                     [type]=\"passwordHide ? 'password' : 'text'\"\n                     autocomplete=\"off\"\n                     required />\n              <button matSuffix mat-icon-button (click)=\"passwordHide = !passwordHide\" type=\"button\">\n                <mat-icon>{{passwordHide ? 'visibility_off' : 'visibility'}}</mat-icon>\n              </button>\n              <mat-error *ngIf=\"isFieldValid('password')\">\n                {{getErrorMessage('password')}}\n              </mat-error>\n              <mat-hint>The new password you would like to use.</mat-hint>\n            </mat-form-field>\n            <mat-form-field fxFlex=\"100%\">\n              <mat-label>Confirm Password</mat-label>\n              <input matInput formControlName=\"password_confirmation\"\n                     placeholder=\"Confirm Password\"\n                     [type]=\"passwordConfirmationHide ? 'password' : 'text'\"\n                     autocomplete=\"off\" required />\n              <button matSuffix mat-icon-button (click)=\"passwordConfirmationHide = !passwordConfirmationHide\" type=\"button\">\n                <mat-icon>{{passwordConfirmationHide ? 'visibility_off' : 'visibility'}}</mat-icon>\n              </button>\n              <mat-error *ngIf=\"isFieldValid('password_confirmation')\">\n                {{getErrorMessage('password_confirmation')}}\n              </mat-error>\n            </mat-form-field>\n          </mat-card-content>\n          <div class=\"mt-2 mb-2\">\n            <techlify-password-requirement-check [password]=\"passwordResetForm.get('password').value\"></techlify-password-requirement-check>\n          </div>\n          <mat-card-actions fxLayoutAlign=\"end\">\n            <button mat-raised-button color=primary type=\"submit\" [disabled]=\"isWorking\">\n              Change Password\n            </button>\n          </mat-card-actions>\n        </form>\n      </mat-card>\n    </div>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i7$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i7$3.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i7$3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7$3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i7$3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i7$3.MatSuffix, selector: "[matSuffix]" }, { 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: "component", type: i10$1.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i10$1.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { kind: "directive", type: i10$1.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "directive", type: i10$1.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "directive", type: i10$1.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { 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: "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: PasswordRequirementCheckComponent, selector: "techlify-password-requirement-check", inputs: ["password"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.7", ngImport: i0, type: ChangePasswordComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-change-password', template: "<div fxLayout=\"column wrap\" fxFlexFill fxLayoutAlign=\"center center\">\n  <mat-card>\n    <mat-card-title fxLayoutAlign=\"center center\">\n      Update Your Password\n    </mat-card-title>\n    <mat-card-subtitle fxLayoutAlign=\"center center\">\n      <small class=\"text-muted\" *ngIf=\"user?.is_temporary_password\">\n        You\u2019re currently using a temporary password, please change it to proceed\n      </small>\n    </mat-card-subtitle>\n    <form [formGroup]=\"passwordResetForm\" (ngSubmit)=\"saveNewPassword()\">\n      <mat-card-content fxLayout=\"column wrap\" fxLayoutGap=\"1rem\">\n        <mat-form-field fxFlex=\"100%\">\n          <mat-label>Current Password</mat-label>\n          <input matInput formControlName=\"current_password\"\n                 placeholder=\"Current Password\"\n                 type=\"password\"\n                 autocomplete=\"off\"\n                 required />\n          <mat-hint>Your current password.</mat-hint>\n          <mat-error *ngIf=\"isFieldValid('current_password')\">{{getErrorMessage('current_password')}}\n          </mat-error>\n        </mat-form-field>\n        <mat-form-field fxFlex=\"100%\">\n          <mat-label>New Password</mat-label>\n          <input matInput formControlName=\"password\"\n                 placeholder=\"New Password\"\n                 [type]=\"passwordHide ? 'password' : 'text'\"\n                 autocomplete=\"off\"\n                 required />\n          <button matSuffix mat-icon-button (click)=\"passwordHide = !passwordHide\" type=\"button\">\n            <mat-icon>{{passwordHide ? 'visibility_off' : 'visibility'}}</mat-icon>\n          </button>\n          <mat-error *ngIf=\"isFieldValid('password')\">{{getErrorMessage('password')}}</mat-error>\n          <mat-hint>The new password you would like to use.</mat-hint>\n        </mat-form-field>\n        <mat-form-field fxFlex=\"100%\">\n          <mat-label>Confirm Password</mat-label>\n          <input matInput formControlName=\"password_confirmation\" placeholder=\"Confirm Password\"\n                 [type]=\"passwordConfirmationHide ? 'password' : 'text'\" autocomplete=\"off\" required />\n          <button matSuffix mat-icon-button (click)=\"passwordConfirmationHide = !passwordConfirmationHide\" type=\"button\">\n            <mat-icon>{{passwordConfirmationHide ? 'visibility_off' : 'visibility'}}</mat-icon>\n          </button>\n          <mat-error *ngIf=\"isFieldValid('password_confirmation')\">{{getErrorMessage('password_confirmation')}}</mat-error>\n        </mat-form-field>\n      </mat-card-content>\n      <div class=\"mt-2 mb-2\">\n        <techlify-password-requirement-check [password]=\"passwordResetForm.get('password').value\"></techlify-password-requirement-check>\n      </div>\n      <mat-card-actions fxLayoutAlign=\"end\">\n        <button mat-raised-button color=primary type=\"submit\" [disabled]=\"isWorking\">\n          Change Password\n        </button>\n      </mat-card-actions>\n    </form>\n  </mat-card>\n</div>\n", styles: ["mat-card{width:500px}\n"] }]
+            args: [{ selector: 'app-change-password', template: "<div class=\"h-100 d-flex justify-content-center align-items-center w-100\">\n  <div class=\"row w-100\">\n    <div class=\"col-lg-6 col-md-8 col-sm-10 col-xs-12 col-12 mx-auto\">\n      <mat-card>\n        <mat-card-title>\n          Update Your Password\n        </mat-card-title>\n        <mat-card-subtitle>\n          <small class=\"text-muted\" *ngIf=\"user?.is_temporary_password\">\n            You\u2019re currently using a temporary password, please change it to proceed\n          </small>\n        </mat-card-subtitle>\n        <form [formGroup]=\"passwordResetForm\" (ngSubmit)=\"saveNewPassword()\">\n          <mat-card-content fxLayout=\"column wrap\" fxLayoutGap=\"1rem\">\n            <mat-form-field fxFlex=\"100%\">\n              <mat-label>Current Password</mat-label>\n              <input matInput formControlName=\"current_password\"\n                     placeholder=\"Current Password\"\n                     type=\"password\"\n                     autocomplete=\"off\"\n                     required />\n              <mat-hint>Your current password.</mat-hint>\n              <mat-error *ngIf=\"isFieldValid('current_password')\">\n                {{getErrorMessage('current_password')}}\n              </mat-error>\n            </mat-form-field>\n            <mat-form-field fxFlex=\"100%\">\n              <mat-label>New Password</mat-label>\n              <input matInput formControlName=\"password\"\n                     placeholder=\"New Password\"\n                     [type]=\"passwordHide ? 'password' : 'text'\"\n                     autocomplete=\"off\"\n                     required />\n              <button matSuffix mat-icon-button (click)=\"passwordHide = !passwordHide\" type=\"button\">\n                <mat-icon>{{passwordHide ? 'visibility_off' : 'visibility'}}</mat-icon>\n              </button>\n              <mat-error *ngIf=\"isFieldValid('password')\">\n                {{getErrorMessage('password')}}\n              </mat-error>\n              <mat-hint>The new password you would like to use.</mat-hint>\n            </mat-form-field>\n            <mat-form-field fxFlex=\"100%\">\n              <mat-label>Confirm Password</mat-label>\n              <input matInput formControlName=\"password_confirmation\"\n                     placeholder=\"Confirm Password\"\n                     [type]=\"passwordConfirmationHide ? 'password' : 'text'\"\n                     autocomplete=\"off\" required />\n              <button matSuffix mat-icon-button (click)=\"passwordConfirmationHide = !passwordConfirmationHide\" type=\"button\">\n                <mat-icon>{{passwordConfirmationHide ? 'visibility_off' : 'visibility'}}</mat-icon>\n              </button>\n              <mat-error *ngIf=\"isFieldValid('password_confirmation')\">\n                {{getErrorMessage('password_confirmation')}}\n              </mat-error>\n            </mat-form-field>\n          </mat-card-content>\n          <div class=\"mt-2 mb-2\">\n            <techlify-password-requirement-check [password]=\"passwordResetForm.get('password').value\"></techlify-password-requirement-check>\n          </div>\n          <mat-card-actions fxLayoutAlign=\"end\">\n            <button mat-raised-button color=primary type=\"submit\" [disabled]=\"isWorking\">\n              Change Password\n            </button>\n          </mat-card-actions>\n        </form>\n      </mat-card>\n    </div>\n  </div>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: HttpService }, { type: AlertService }, { type: i1$5.Router }, { type: CurrentUserService }, { type: i1$4.UntypedFormBuilder }, { type: ErrorHandlerService }, { type: FormValidatorService }]; } });
 
 const routes$9 = [
@@ -10780,13 +10789,13 @@ let LoginComponent = class LoginComponent {
     }
 };
 LoginComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.7", 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 });
-LoginComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", type: LoginComponent, selector: "login", ngImport: i0, template: "<div class=\"h-100\"\n     fxLayout fxLayoutAlign=\"center center\"\n     style=\"background: #fafafa;\">\n  <mat-card fxFlex=\"30%\" class=\"mb-3 mt-3\">\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", 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: i7$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i7$3.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i7$3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7$3.MatLabel, selector: "mat-label" }, { 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", exportAs: ["matCard"] }, { kind: "directive", type: i1$5.RouterLink, selector: ":not(a):not(area)[routerLink]", inputs: ["queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$5.RouterLinkWithHref, selector: "a[routerLink],area[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: "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"] }] });
+LoginComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.7", 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: i7$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i7$3.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i7$3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7$3.MatLabel, selector: "mat-label" }, { 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", exportAs: ["matCard"] }, { kind: "directive", type: i1$5.RouterLink, selector: ":not(a):not(area)[routerLink]", inputs: ["queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$5.RouterLinkWithHref, selector: "a[routerLink],area[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: "14.2.7", ngImport: i0, type: LoginComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'login', template: "<div class=\"h-100\"\n     fxLayout fxLayoutAlign=\"center center\"\n     style=\"background: #fafafa;\">\n  <mat-card fxFlex=\"30%\" class=\"mb-3 mt-3\">\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", 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\">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"] }]
         }], 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 = [