ngx-techlify-core 18.37.0 → 18.38.0

package/fesm2022/ngx-techlify-core.mjs

@@ -16,7 +16,7 @@ import { RouteReuseStrategy, RouterModule, NavigationEnd, RouterLink } from '@an
 import * as i11 from '@angular/material/sort';
 import { MatSort, MatSortModule } from '@angular/material/sort';
 import * as i2 from '@angular/flex-layout/extended';
-import * as i3 from '@angular/common';
+import * as i2$1 from '@angular/common';
 import { CommonModule, DatePipe, NgIf, NgTemplateOutlet, NgOptimizedImage } from '@angular/common';
 import * as i6$1 from 'ngx-infinite-scroll';
 import { InfiniteScrollModule } from 'ngx-infinite-scroll';
@@ -28,7 +28,7 @@ import * as i8$2 from '@angular/material/menu';
 import { MatMenuModule, MatMenuTrigger, MatMenu, MatMenuItem } from '@angular/material/menu';
 import * as i9 from '@angular/material/table';
 import { MatTableModule } from '@angular/material/table';
-import * as i3$1 from 'ngx-doc-viewer';
+import * as i3 from 'ngx-doc-viewer';
 import { NgxDocViewerModule } from 'ngx-doc-viewer';
 import * as i4 from '@angular/material/card';
 import { MatCardModule, MatCardContent, MatCard, MatCardTitle } from '@angular/material/card';
@@ -56,7 +56,7 @@ import * as i9$2 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
 import * as i5$1 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import * as i3$2 from '@angular/material/button-toggle';
+import * as i3$1 from '@angular/material/button-toggle';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
 import * as i5 from '@angular/material/progress-bar';
 import { MatProgressBarModule, MatProgressBar } from '@angular/material/progress-bar';
@@ -677,7 +677,7 @@ let DataTableComponent = class DataTableComponent {
         //Until Destroy uses it.
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DataTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DataTableComponent, selector: "app-data-table", inputs: { data: "data", config: "config", selection: "selection", elementId: "elementId" }, outputs: { action: "action", selctionChange: "selctionChange", rowClick: "rowClick", tableScroll: "tableScroll", sortChanged: "sortChanged" }, viewQueries: [{ propertyName: "sort", first: true, predicate: MatSort, descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div fxLayout=\"column\" [ngClass]=\"{\n    'mat-elevation-z1': !config.disableElevation\n  }\" class=\"scroll-container\" infiniteScroll [infiniteScrollDistance]=\"1\" [infiniteScrollThrottle]=\"50\"\n    (scrolled)=\"onScroll()\" [scrollWindow]=\"false\" [ngStyle]=\"config.style\">\n    <table mat-table [dataSource]=\"data\" matSort [id]=\"elementId\">\n        <!-- Checkbox Column -->\n        <ng-container matColumnDef=\"select\">\n            <th mat-header-cell *matHeaderCellDef style=\"width:60px\">\n                <mat-checkbox *ngIf=\"selection\" (change)=\"$event ? masterToggle() : null\"\n                    [checked]=\"selection.hasValue() && isAllSelected()\"\n                    [indeterminate]=\"selection.hasValue() && !isAllSelected()\">\n                </mat-checkbox>\n            </th>\n            <td mat-cell *matCellDef=\"let row\" style=\"width:60px\">\n                <mat-checkbox *ngIf=\"selection\" (click)=\"$event.stopPropagation()\"\n                    (change)=\"$event ? selection.toggle(row) : null\" [checked]=\"selection.isSelected(row)\">\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 index = index\">\n                {{ (index + 1) }}\n            </td>\n        </ng-container>\n\n        <ng-container matColumnDef=\"actions\">\n            <th mat-header-cell *matHeaderCellDef class=\"action-width d-print-none\">\n                {{ config.customActionLabel }}\n            </th>\n\n            <td mat-cell *matCellDef=\"let element; let index = index\" class=\"d-print-none\">\n                <div>\n                    <button *ngIf=\"\n              config.actionsConfig.download && element[config.downloadLink]\n            \" type=\"button\" mat-icon-button (click)=\"downloadClicked($event, element)\">\n                        <mat-icon>vertical_align_bottom</mat-icon>\n                    </button>\n\n                    <button *ngIf=\"config.actionsConfig.edit\" [disabled]=\"!this.checkEdit(element)\" type=\"button\"\n                        mat-icon-button (click)=\"editClicked($event, element)\">\n                        <mat-icon>edit</mat-icon>\n                    </button>\n\n                    <button *ngIf=\"config.actionsConfig.print\" [disabled]=\"!this.checkPrint(element)\" type=\"button\"\n                        mat-icon-button (click)=\"printClicked($event,element)\">\n                        <mat-icon>print</mat-icon>\n                    </button>\n\n                    <button *ngIf=\"config.actionsConfig.view\" [disabled]=\"!this.checkView(element)\" type=\"button\"\n                        mat-icon-button (click)=\"viewClicked($event, element)\">\n                        <mat-icon>description</mat-icon>\n                    </button>\n\n                    <button *ngIf=\"config.actionsConfig.deactivate\" type=\"button\" mat-icon-button\n                        (click)=\"deactivateClicked($event, element)\">\n                        <mat-icon>delete</mat-icon>\n                    </button>\n\n                    <button #menuTrigger=\"matMenuTrigger\" *ngIf=\"\n              config.actionsConfig.actionsMenu &&\n              this.checkActions(element) &&\n              config.actionsConfig.actionsMenu.length > 0\n            \" type=\"button\" mat-icon-button [matMenuTriggerFor]=\"actionsMenu\"\n                        (click)=\"actionMenuTriggerClick($event, menuTrigger)\">\n                        <mat-icon>more_vert</mat-icon>\n                    </button>\n                </div>\n\n                <mat-menu #actionsMenu=\"matMenu\">\n                    <div *ngFor=\"let item of config.actionsConfig.actionsMenu\">\n                        <button *ngIf=\"this.checkActionButton(element, item.value)\" mat-menu-item\n                            (click)=\"actionMenuClick($event, element, item.value)\">\n                            <span>{{ item.name }}</span>\n                        </button>\n                    </div>\n                </mat-menu>\n            </td>\n        </ng-container>\n\n        <!-- Actual Columns -->\n        <ng-container matColumnDef=\"{{ column.value }}\" *ngFor=\"let column of config.columnsConfig\">\n            <ng-container *ngIf=\"column?.sort; else noSort\">\n                <th mat-header-cell *matHeaderCellDef mat-sort-header>\n                    {{ column.title }}\n                </th>\n            </ng-container>\n            <ng-template #noSort>\n                <th mat-header-cell *matHeaderCellDef>\n                    {{ column.title }}\n                </th>\n            </ng-template>\n            <ng-container *ngIf=\"column.dateField; else currencyField\">\n                <td mat-cell *matCellDef=\"let element\">\n                    <div class=\"text-truncate\" appToolTip>\n                        {{ getValue(element, column.value) | date:column.format? column.format: 'mediumDate' }}\n                    </div>\n                </td>\n            </ng-container>\n\n            <ng-template #currencyField>\n                <div *ngIf=\"column.currencyField; else normalField\">\n                    <td mat-cell *matCellDef=\"let element\">\n                        <div class=\"text-truncate\" appToolTip>\n                            {{ getValue(element, column.value) | currency: \"$\":'symbol' : '1.0-0' }}\n                        </div>\n                    </td>\n                </div>\n            </ng-template>\n\n            <ng-template #normalField>\n                <td mat-cell *matCellDef=\"let element\">\n                    <div class=\"text-truncate\" appToolTip>\n                        {{ getValue(element, column.value) }}\n                    </div>\n                </td>\n            </ng-template>\n        </ng-container>\n\n        <ng-container *ngIf=\"config.stickyHeader; else normalHeader\">\n            <tr class=\"font-weight-bold\" mat-header-row *matHeaderRowDef=\"config.displayedColumns; sticky:true\"></tr>\n        </ng-container>\n        <ng-template #normalHeader>\n            <tr class=\"font-weight-bold\" mat-header-row *matHeaderRowDef=\"config.displayedColumns;\">\n            </tr>\n        </ng-template>\n\n        <div *ngIf=\"!config.enableRowClick\">\n            <tr mat-row *matRowDef=\"let row; columns: config.displayedColumns\"></tr>\n        </div>\n\n        <div *ngIf=\"config.enableRowClick\">\n            <tr mat-row *matRowDef=\"let row; columns: config.displayedColumns\" (click)=\"rowClicked($event, row)\"\n                class=\"hoverable row-hover\"></tr>\n        </div>\n    </table>\n</div>", styles: ["table{width:100%}.mat-table{background:inherit}.mat-column-select{overflow:initial}td.mat-cell,td.mat-footer-cell,th.mat-header-cell{padding:0 2px}.action-width{min-width:175px;width:175px!important}.noOverFlow{overflow-x:auto;overflow-y:hidden}.scroll-container{max-height:400px;overflow:auto}.mat-header-row{position:sticky;top:0;background-color:inherit}tr.row-hover:hover{background-color:#dcdcdc}td.mat-cell:first-of-type,td.mat-footer-cell:first-of-type,th.mat-header-cell:first-of-type{padding-left:24px!important}\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: 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: i2.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }, { 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: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i6$1.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.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i8.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i8$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i8$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i8$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i11.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i11.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i9.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i9.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i9.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i9.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i9.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i9.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i9.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i9.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i9.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i9.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "pipe", type: i3.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i3.DatePipe, name: "date" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DataTableComponent, selector: "app-data-table", inputs: { data: "data", config: "config", selection: "selection", elementId: "elementId" }, outputs: { action: "action", selctionChange: "selctionChange", rowClick: "rowClick", tableScroll: "tableScroll", sortChanged: "sortChanged" }, viewQueries: [{ propertyName: "sort", first: true, predicate: MatSort, descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div fxLayout=\"column\" [ngClass]=\"{\n    'mat-elevation-z1': !config.disableElevation\n  }\" class=\"scroll-container\" infiniteScroll [infiniteScrollDistance]=\"1\" [infiniteScrollThrottle]=\"50\"\n    (scrolled)=\"onScroll()\" [scrollWindow]=\"false\" [ngStyle]=\"config.style\">\n    <table mat-table [dataSource]=\"data\" matSort [id]=\"elementId\">\n        <!-- Checkbox Column -->\n        <ng-container matColumnDef=\"select\">\n            <th mat-header-cell *matHeaderCellDef style=\"width:60px\">\n                <mat-checkbox *ngIf=\"selection\" (change)=\"$event ? masterToggle() : null\"\n                    [checked]=\"selection.hasValue() && isAllSelected()\"\n                    [indeterminate]=\"selection.hasValue() && !isAllSelected()\">\n                </mat-checkbox>\n            </th>\n            <td mat-cell *matCellDef=\"let row\" style=\"width:60px\">\n                <mat-checkbox *ngIf=\"selection\" (click)=\"$event.stopPropagation()\"\n                    (change)=\"$event ? selection.toggle(row) : null\" [checked]=\"selection.isSelected(row)\">\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 index = index\">\n                {{ (index + 1) }}\n            </td>\n        </ng-container>\n\n        <ng-container matColumnDef=\"actions\">\n            <th mat-header-cell *matHeaderCellDef class=\"action-width d-print-none\">\n                {{ config.customActionLabel }}\n            </th>\n\n            <td mat-cell *matCellDef=\"let element; let index = index\" class=\"d-print-none\">\n                <div>\n                    <button *ngIf=\"\n              config.actionsConfig.download && element[config.downloadLink]\n            \" type=\"button\" mat-icon-button (click)=\"downloadClicked($event, element)\">\n                        <mat-icon>vertical_align_bottom</mat-icon>\n                    </button>\n\n                    <button *ngIf=\"config.actionsConfig.edit\" [disabled]=\"!this.checkEdit(element)\" type=\"button\"\n                        mat-icon-button (click)=\"editClicked($event, element)\">\n                        <mat-icon>edit</mat-icon>\n                    </button>\n\n                    <button *ngIf=\"config.actionsConfig.print\" [disabled]=\"!this.checkPrint(element)\" type=\"button\"\n                        mat-icon-button (click)=\"printClicked($event,element)\">\n                        <mat-icon>print</mat-icon>\n                    </button>\n\n                    <button *ngIf=\"config.actionsConfig.view\" [disabled]=\"!this.checkView(element)\" type=\"button\"\n                        mat-icon-button (click)=\"viewClicked($event, element)\">\n                        <mat-icon>description</mat-icon>\n                    </button>\n\n                    <button *ngIf=\"config.actionsConfig.deactivate\" type=\"button\" mat-icon-button\n                        (click)=\"deactivateClicked($event, element)\">\n                        <mat-icon>delete</mat-icon>\n                    </button>\n\n                    <button #menuTrigger=\"matMenuTrigger\" *ngIf=\"\n              config.actionsConfig.actionsMenu &&\n              this.checkActions(element) &&\n              config.actionsConfig.actionsMenu.length > 0\n            \" type=\"button\" mat-icon-button [matMenuTriggerFor]=\"actionsMenu\"\n                        (click)=\"actionMenuTriggerClick($event, menuTrigger)\">\n                        <mat-icon>more_vert</mat-icon>\n                    </button>\n                </div>\n\n                <mat-menu #actionsMenu=\"matMenu\">\n                    <div *ngFor=\"let item of config.actionsConfig.actionsMenu\">\n                        <button *ngIf=\"this.checkActionButton(element, item.value)\" mat-menu-item\n                            (click)=\"actionMenuClick($event, element, item.value)\">\n                            <span>{{ item.name }}</span>\n                        </button>\n                    </div>\n                </mat-menu>\n            </td>\n        </ng-container>\n\n        <!-- Actual Columns -->\n        <ng-container matColumnDef=\"{{ column.value }}\" *ngFor=\"let column of config.columnsConfig\">\n            <ng-container *ngIf=\"column?.sort; else noSort\">\n                <th mat-header-cell *matHeaderCellDef mat-sort-header>\n                    {{ column.title }}\n                </th>\n            </ng-container>\n            <ng-template #noSort>\n                <th mat-header-cell *matHeaderCellDef>\n                    {{ column.title }}\n                </th>\n            </ng-template>\n            <ng-container *ngIf=\"column.dateField; else currencyField\">\n                <td mat-cell *matCellDef=\"let element\">\n                    <div class=\"text-truncate\" appToolTip>\n                        {{ getValue(element, column.value) | date:column.format? column.format: 'mediumDate' }}\n                    </div>\n                </td>\n            </ng-container>\n\n            <ng-template #currencyField>\n                <div *ngIf=\"column.currencyField; else normalField\">\n                    <td mat-cell *matCellDef=\"let element\">\n                        <div class=\"text-truncate\" appToolTip>\n                            {{ getValue(element, column.value) | currency: \"$\":'symbol' : '1.0-0' }}\n                        </div>\n                    </td>\n                </div>\n            </ng-template>\n\n            <ng-template #normalField>\n                <td mat-cell *matCellDef=\"let element\">\n                    <div class=\"text-truncate\" appToolTip>\n                        {{ getValue(element, column.value) }}\n                    </div>\n                </td>\n            </ng-template>\n        </ng-container>\n\n        <ng-container *ngIf=\"config.stickyHeader; else normalHeader\">\n            <tr class=\"font-weight-bold\" mat-header-row *matHeaderRowDef=\"config.displayedColumns; sticky:true\"></tr>\n        </ng-container>\n        <ng-template #normalHeader>\n            <tr class=\"font-weight-bold\" mat-header-row *matHeaderRowDef=\"config.displayedColumns;\">\n            </tr>\n        </ng-template>\n\n        <div *ngIf=\"!config.enableRowClick\">\n            <tr mat-row *matRowDef=\"let row; columns: config.displayedColumns\"></tr>\n        </div>\n\n        <div *ngIf=\"config.enableRowClick\">\n            <tr mat-row *matRowDef=\"let row; columns: config.displayedColumns\" (click)=\"rowClicked($event, row)\"\n                class=\"hoverable row-hover\"></tr>\n        </div>\n    </table>\n</div>", styles: ["table{width:100%}.mat-table{background:inherit}.mat-column-select{overflow:initial}td.mat-cell,td.mat-footer-cell,th.mat-header-cell{padding:0 2px}.action-width{min-width:175px;width:175px!important}.noOverFlow{overflow-x:auto;overflow-y:hidden}.scroll-container{max-height:400px;overflow:auto}.mat-header-row{position:sticky;top:0;background-color:inherit}tr.row-hover:hover{background-color:#dcdcdc}td.mat-cell:first-of-type,td.mat-footer-cell:first-of-type,th.mat-header-cell:first-of-type{padding-left:24px!important}\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: 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: i2.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }, { kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i6$1.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.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i8.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i8$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i8$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i8$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i11.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i11.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i9.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i9.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i9.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i9.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i9.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i9.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i9.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i9.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i9.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i9.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "pipe", type: i2$1.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i2$1.DatePipe, name: "date" }] }); }
 };
 DataTableComponent = DataTableComponent_1 = __decorate([
     UntilDestroy()
@@ -760,7 +760,7 @@ class DocumentViewerComponent {
         return file.split('.').pop();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DocumentViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DocumentViewerComponent, selector: "app-document-viewer", inputs: { config: "config", file: "file", fileUrl: "fileUrl", disableEdit: "disableEdit" }, outputs: { remove: "remove" }, ngImport: i0, template: "<mat-card *ngIf=\"viewerType === 'image'\">\n    <img [ngStyle]=\"config.imageStyle\" mat-card-image [src]=\"fileUrl\" style=\"object-fit: contain;\" />\n    <mat-card-actions>\n        <button type=\"button\" mat-raised-button (click)=\"removeFile()\" *ngIf=\"!disableEdit && !config.hideRemove\">\n            Remove\n        </button>\n    </mat-card-actions>\n</mat-card>\n\n<div class=\"mat-elevation-z1 p-4\" *ngIf=\"viewerType !== 'image'\">\n    <a [href]=\"fileUrl\" target=\"_blank\">{{fileName}}</a>\n    <ngx-doc-viewer [ngStyle]=\"config.viewerStyle\" *ngIf=\"viewerType !== null\" [url]=\"fileUrl\" [viewer]=\"viewerType\">\n    </ngx-doc-viewer>\n    <div class=\"mt-2\" *ngIf=\"!config.hideRemove\">\n        <button type=\"button\" mat-raised-button (click)=\"removeFile()\" *ngIf=\"!disableEdit\">\n            Remove\n        </button>\n    </div>\n</div>", styles: [".image-fit{height:100%;width:100%;object-fit:cover}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }, { kind: "component", type: i3$1.NgxDocViewerComponent, selector: "ngx-doc-viewer", inputs: ["url", "queryParams", "viewerUrl", "googleCheckInterval", "googleMaxChecks", "disableContent", "googleCheckContentLoaded", "viewer", "overrideLocalhost"], outputs: ["loaded"] }, { kind: "component", type: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i4.MatCardImage, selector: "[mat-card-image], [matCardImage]" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DocumentViewerComponent, selector: "app-document-viewer", inputs: { config: "config", file: "file", fileUrl: "fileUrl", disableEdit: "disableEdit" }, outputs: { remove: "remove" }, ngImport: i0, template: "<mat-card *ngIf=\"viewerType === 'image'\">\n    <img [ngStyle]=\"config.imageStyle\" mat-card-image [src]=\"fileUrl\" style=\"object-fit: contain;\" />\n    <mat-card-actions>\n        <button type=\"button\" mat-raised-button (click)=\"removeFile()\" *ngIf=\"!disableEdit && !config.hideRemove\">\n            Remove\n        </button>\n    </mat-card-actions>\n</mat-card>\n\n<div class=\"mat-elevation-z1 p-4\" *ngIf=\"viewerType !== 'image'\">\n    <a [href]=\"fileUrl\" target=\"_blank\">{{fileName}}</a>\n    <ngx-doc-viewer [ngStyle]=\"config.viewerStyle\" *ngIf=\"viewerType !== null\" [url]=\"fileUrl\" [viewer]=\"viewerType\">\n    </ngx-doc-viewer>\n    <div class=\"mt-2\" *ngIf=\"!config.hideRemove\">\n        <button type=\"button\" mat-raised-button (click)=\"removeFile()\" *ngIf=\"!disableEdit\">\n            Remove\n        </button>\n    </div>\n</div>", styles: [".image-fit{height:100%;width:100%;object-fit:cover}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }, { kind: "component", type: i3.NgxDocViewerComponent, selector: "ngx-doc-viewer", inputs: ["url", "queryParams", "viewerUrl", "googleCheckInterval", "googleMaxChecks", "disableContent", "googleCheckContentLoaded", "viewer", "overrideLocalhost"], outputs: ["loaded"] }, { kind: "component", type: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i4.MatCardImage, selector: "[mat-card-image], [matCardImage]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DocumentViewerComponent, decorators: [{
             type: Component,
@@ -1657,7 +1657,7 @@ class FileDropperComponent {
         event.preventDefault();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FileDropperComponent, deps: [{ token: AlertService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FileDropperComponent, selector: "app-file-dropper", inputs: { fileArray: "fileArray", config: "config", styles: "styles" }, outputs: { fileChanged: "fileChanged" }, ngImport: i0, template: "<div\n  id=\"{{ config.containerId }}\"\n  [ngStyle]=\"config.styles\"\n  class=\"file-border\"\n  (dragleave)=\"dragLeave($event)\"\n  (dragenter)=\"dragEnter($event)\"\n  (dragover)=\"dragOver($event)\"\n  (click)=\"clickEvent($event)\"\n  (drop)=\"dropEvent($event)\"\n  [ngClass]=\"{ 'disable-div': isSingleMode && fileArray.length > 0 }\"\n>\n  <div fxFill fxLayout=\"column\" fxLayoutAlign=\"center center\">\n    <div>\n      <span>Drag and drop file</span>\n    </div>\n\n    <div class=\"mt-2\">\n      <span>or</span>\n    </div>\n\n    <div class=\"mt-2\">\n      <button mat-raised-button color=\"primary\" type=\"button\">Browse</button>\n    </div>\n\n    <div class=\"mt-4\">\n      <span>Supported files</span> <span *ngIf=\"config.acceptFileText\" class=\"mr-2\">: {{ config.acceptFileText }}</span>\n    </div>\n  </div>\n</div>\n<input\n  type=\"file\"\n  id=\"{{ config.fileId }}\"\n  [accept]=\"config.acceptFile\"\n  (change)=\"onFileChange($event)\"\n  [multiple]=\"config.multiple === true\"\n  style=\"display:none\"\n/>\n", styles: [".disable-div{cursor:not-allowed}.file-border{border:1px dashed #989898}\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: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { 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: i2.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }, { kind: "component", type: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FileDropperComponent, selector: "app-file-dropper", inputs: { fileArray: "fileArray", config: "config", styles: "styles" }, outputs: { fileChanged: "fileChanged" }, ngImport: i0, template: "<div\n  id=\"{{ config.containerId }}\"\n  [ngStyle]=\"config.styles\"\n  class=\"file-border\"\n  (dragleave)=\"dragLeave($event)\"\n  (dragenter)=\"dragEnter($event)\"\n  (dragover)=\"dragOver($event)\"\n  (click)=\"clickEvent($event)\"\n  (drop)=\"dropEvent($event)\"\n  [ngClass]=\"{ 'disable-div': isSingleMode && fileArray.length > 0 }\"\n>\n  <div fxFill fxLayout=\"column\" fxLayoutAlign=\"center center\">\n    <div>\n      <span>Drag and drop file</span>\n    </div>\n\n    <div class=\"mt-2\">\n      <span>or</span>\n    </div>\n\n    <div class=\"mt-2\">\n      <button mat-raised-button color=\"primary\" type=\"button\">Browse</button>\n    </div>\n\n    <div class=\"mt-4\">\n      <span>Supported files</span> <span *ngIf=\"config.acceptFileText\" class=\"mr-2\">: {{ config.acceptFileText }}</span>\n    </div>\n  </div>\n</div>\n<input\n  type=\"file\"\n  id=\"{{ config.fileId }}\"\n  [accept]=\"config.acceptFile\"\n  (change)=\"onFileChange($event)\"\n  [multiple]=\"config.multiple === true\"\n  style=\"display:none\"\n/>\n", styles: [".disable-div{cursor:not-allowed}.file-border{border:1px dashed #989898}\n"], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { 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: i2.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }, { kind: "component", type: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FileDropperComponent, decorators: [{
             type: Component,
@@ -1896,7 +1896,7 @@ class TechlifyTaggerTagFormFieldComponent {
         this.subscriptions.forEach(subscription => subscription.unsubscribe());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TechlifyTaggerTagFormFieldComponent, deps: [{ token: i1$4.FocusMonitor }, { token: i0.ElementRef }, { token: HttpService }, { token: MAT_FORM_FIELD, optional: true }, { token: i1$5.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TechlifyTaggerTagFormFieldComponent, selector: "app-techlify-tagger-tag-form-field", inputs: { config: "config", modelType: "modelType", modelId: "modelId", allTags: "allTags", categories: "categories", defaultCreateCategory: "defaultCreateCategory", required: "required", disabled: "disabled", value: "value", placeholder: "placeholder" }, providers: [{ provide: MatFormFieldControl, useExisting: TechlifyTaggerTagFormFieldComponent }], viewQueries: [{ propertyName: "tagInput", first: true, predicate: ["tagInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<mat-chip-grid #chipGrid aria-label=\"Tag Selection\">\n    <mat-chip-row *ngFor=\"let tag of tags\" [editable]=\"config.selectable\" [removable]=\"config.removable\"\n        (removed)=\"remove(tag)\">\n        {{tag.title}}\n        <button matChipRemove *ngIf=\"config.removable\" class=\"border-0\">\n            <mat-icon class=\"mat-relative-icon\">cancel</mat-icon>\n        </button>\n    </mat-chip-row>\n    <input placeholder=\"{{config.isCreateable? config.placeholder:''}}\" #tagInput [formControl]=\"tagInputCtrl\"\n        [matAutocomplete]=\"auto\" [matChipInputFor]=\"chipGrid\"\n        [matChipInputSeparatorKeyCodes]=\"config.separatorKeysCodes\" (matChipInputTokenEnd)=\"add($event)\"\n        #trigger=\"matAutocompleteTrigger\" (click)=\"trigger.openPanel()\">\n</mat-chip-grid>\n<mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"selected($event)\">\n    <mat-option *ngFor=\"let tag of filteredTags\" [value]=\"tag.id\">\n        {{tag.title}}\n    </mat-option>\n</mat-autocomplete>", styles: [".mat-relative-icon{position:relative;top:-3px;right:7px;font-size:20px}\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: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i7$1.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i7$1.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i7$1.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i7$1.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "component", type: i8$3.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i8$3.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: i1$5.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$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TechlifyTaggerTagFormFieldComponent, selector: "app-techlify-tagger-tag-form-field", inputs: { config: "config", modelType: "modelType", modelId: "modelId", allTags: "allTags", categories: "categories", defaultCreateCategory: "defaultCreateCategory", required: "required", disabled: "disabled", value: "value", placeholder: "placeholder" }, providers: [{ provide: MatFormFieldControl, useExisting: TechlifyTaggerTagFormFieldComponent }], viewQueries: [{ propertyName: "tagInput", first: true, predicate: ["tagInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<mat-chip-grid #chipGrid aria-label=\"Tag Selection\">\n    <mat-chip-row *ngFor=\"let tag of tags\" [editable]=\"config.selectable\" [removable]=\"config.removable\"\n        (removed)=\"remove(tag)\">\n        {{tag.title}}\n        <button matChipRemove *ngIf=\"config.removable\" class=\"border-0\">\n            <mat-icon class=\"mat-relative-icon\">cancel</mat-icon>\n        </button>\n    </mat-chip-row>\n    <input placeholder=\"{{config.isCreateable? config.placeholder:''}}\" #tagInput [formControl]=\"tagInputCtrl\"\n        [matAutocomplete]=\"auto\" [matChipInputFor]=\"chipGrid\"\n        [matChipInputSeparatorKeyCodes]=\"config.separatorKeysCodes\" (matChipInputTokenEnd)=\"add($event)\"\n        #trigger=\"matAutocompleteTrigger\" (click)=\"trigger.openPanel()\">\n</mat-chip-grid>\n<mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"selected($event)\">\n    <mat-option *ngFor=\"let tag of filteredTags\" [value]=\"tag.id\">\n        {{tag.title}}\n    </mat-option>\n</mat-autocomplete>", styles: [".mat-relative-icon{position:relative;top:-3px;right:7px;font-size:20px}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i7$1.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i7$1.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i7$1.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i7$1.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "component", type: i8$3.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i8$3.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: i1$5.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$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TechlifyTaggerTagFormFieldComponent, decorators: [{
             type: Component,
@@ -2069,7 +2069,7 @@ class EntityFileFormComponent {
         return this.formValidatorService.getErrorMessage(field, this.entityFileGroup, errorMessages$c);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EntityFileFormComponent, deps: [{ token: i1.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: FormValidatorService }, { token: i1$5.UntypedFormBuilder }, { token: EntityFileService }, { token: AlertService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: EntityFileFormComponent, selector: "entity-file-form", ngImport: i0, template: "<form [formGroup]=\"entityFileGroup\" (ngSubmit)=\"submit()\">\n  <div fxLayout=\"column\" class=\"mat-typography\">\n    <div mat-dialog-title class=\"text-center\">\n      <div>Entity File</div>\n    </div>\n    <div mat-dialog-content fxLayout=\"column\" fxLayoutAlign.=\"start\">\n      <ng-container *ngIf=\"!hideTitleAndDetails\">\n        <mat-form-field>\n          <input type=\"text\" matInput formControlName=\"title\" placeholder=\"Title\" autocomplete=\"off\">\n        </mat-form-field>\n        <mat-form-field>\n          <textarea matInput formControlName=\"details\" placeholder=\"Details\" autocomplete=\"off\"></textarea>\n        </mat-form-field>\n      </ng-container>\n      <ng-container *ngIf=\"useTechlifyTags\">\n        <mat-form-field>\n          <mat-label>Tag</mat-label>\n          <app-techlify-tagger-tag-form-field\n            [categories]=\"techlifyTagCategories\"\n            modelType=\"entity-file\"\n            formControlName=\"tag_ids\"\n            [modelId]=\"entityFileGroup.get('id').value\"\n            placeholder=\"Enter new tag\"\n            [config]=\"techlifyTagConfig\"\n          ></app-techlify-tagger-tag-form-field>\n        </mat-form-field>\n      </ng-container>\n      <ng-template #fileUpload>\n        <section fxFlex=\"100%\">\n          <div>Entity File*</div>\n          <app-file-dropper [config]=\"fileConfig\" (fileChanged)=\"fileChanged($event)\" [fileArray]=\"fileList\">\n          </app-file-dropper>\n          <div class=\"text-danger\" *ngIf=\"isFieldValid('url')\">\n            {{getErrorMessage(\"url\")}}\n          </div>\n        </section>\n      </ng-template>\n      <div fxFlex=\"100%\" class=\"mt-2\" *ngIf=\"entityFileGroup.get('url').value;else fileUpload;\">\n        <app-document-viewer [file]=\"entityFileGroup.get('file').value\" [fileUrl]=\"entityFileGroup.get('url').value\"\n          [config]=\"this.viewerConfig\" (remove)=\"removeFile()\" [disableEdit]=\"updateMode\">\n        </app-document-viewer>\n      </div>\n      <div class=\"mt-4 mb-2\" fxLayout=\"row\" fxLayoutGap=\"30px\" fxLayoutAlign=\"end\" fxFlex=\"100%\">\n        <button [disabled]=\"isSaving\" mat-raised-button type=\"button\" (click)=\"dialogRef.close()\">\n          Cancel\n        </button>\n        <button [disabled]=\"isSaving\" mat-raised-button type=\"submit\" color=\"primary\">Save</button>\n      </div>\n    </div>\n  </div>\n</form>\n", styles: [""], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.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$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.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: 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: "component", type: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { 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: i9$1.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: TechlifyTaggerTagFormFieldComponent, selector: "app-techlify-tagger-tag-form-field", inputs: ["config", "modelType", "modelId", "allTags", "categories", "defaultCreateCategory", "required", "disabled", "value", "placeholder"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: EntityFileFormComponent, selector: "entity-file-form", ngImport: i0, template: "<form [formGroup]=\"entityFileGroup\" (ngSubmit)=\"submit()\">\n  <div fxLayout=\"column\" class=\"mat-typography\">\n    <div mat-dialog-title class=\"text-center\">\n      <div>Entity File</div>\n    </div>\n    <div mat-dialog-content fxLayout=\"column\" fxLayoutAlign.=\"start\">\n      <ng-container *ngIf=\"!hideTitleAndDetails\">\n        <mat-form-field>\n          <input type=\"text\" matInput formControlName=\"title\" placeholder=\"Title\" autocomplete=\"off\">\n        </mat-form-field>\n        <mat-form-field>\n          <textarea matInput formControlName=\"details\" placeholder=\"Details\" autocomplete=\"off\"></textarea>\n        </mat-form-field>\n      </ng-container>\n      <ng-container *ngIf=\"useTechlifyTags\">\n        <mat-form-field>\n          <mat-label>Tag</mat-label>\n          <app-techlify-tagger-tag-form-field\n            [categories]=\"techlifyTagCategories\"\n            modelType=\"entity-file\"\n            formControlName=\"tag_ids\"\n            [modelId]=\"entityFileGroup.get('id').value\"\n            placeholder=\"Enter new tag\"\n            [config]=\"techlifyTagConfig\"\n          ></app-techlify-tagger-tag-form-field>\n        </mat-form-field>\n      </ng-container>\n      <ng-template #fileUpload>\n        <section fxFlex=\"100%\">\n          <div>Entity File*</div>\n          <app-file-dropper [config]=\"fileConfig\" (fileChanged)=\"fileChanged($event)\" [fileArray]=\"fileList\">\n          </app-file-dropper>\n          <div class=\"text-danger\" *ngIf=\"isFieldValid('url')\">\n            {{getErrorMessage(\"url\")}}\n          </div>\n        </section>\n      </ng-template>\n      <div fxFlex=\"100%\" class=\"mt-2\" *ngIf=\"entityFileGroup.get('url').value;else fileUpload;\">\n        <app-document-viewer [file]=\"entityFileGroup.get('file').value\" [fileUrl]=\"entityFileGroup.get('url').value\"\n          [config]=\"this.viewerConfig\" (remove)=\"removeFile()\" [disableEdit]=\"updateMode\">\n        </app-document-viewer>\n      </div>\n      <div class=\"mt-4 mb-2\" fxLayout=\"row\" fxLayoutGap=\"30px\" fxLayoutAlign=\"end\" fxFlex=\"100%\">\n        <button [disabled]=\"isSaving\" mat-raised-button type=\"button\" (click)=\"dialogRef.close()\">\n          Cancel\n        </button>\n        <button [disabled]=\"isSaving\" mat-raised-button type=\"submit\" color=\"primary\">Save</button>\n      </div>\n    </div>\n  </div>\n</form>\n", styles: [""], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.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$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.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: 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: "component", type: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { 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: i9$1.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: TechlifyTaggerTagFormFieldComponent, selector: "app-techlify-tagger-tag-form-field", inputs: ["config", "modelType", "modelId", "allTags", "categories", "defaultCreateCategory", "required", "disabled", "value", "placeholder"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EntityFileFormComponent, decorators: [{
             type: Component,
@@ -2636,7 +2636,7 @@ class UserExploreComponent {
         this.dialogRef.close();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserExploreComponent, deps: [{ token: HttpService }, { token: i1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: UserExploreComponent, selector: "user-explore", ngImport: i0, template: "<div fxLayout=\"column\">\n    <div mat-dialog-title class=\"text-center\">\n        <div>Explore User</div>\n    </div>\n    <div mat-dialog-content fxLayout=\"column\">\n\n        <div class=\"form-group row\">\n            <label class=\"col-3 control-label\">Entry ID:</label>\n            <div class=\"col-9\">{{user.id}}</div>\n        </div>\n\n        <div class=\"form-group row\">\n            <label class=\"col-3 control-label\">Name:</label>\n            <div class=\"col-9\">{{user.name}}</div>\n        </div>\n\n        <div class=\"form-group row\">\n            <label class=\"col-3 control-label\">Email:</label>\n            <div class=\"col-9\">{{user.email}}</div>\n        </div>\n\n        <div class=\"form-group row\">\n            <label class=\"col-3 control-label\">Not Involed Modules: </label>\n            <div class=\"col-9\">\n                <ng-container *ngFor=\"let module of modules\">\n                    {{ module?.name }}, <br />\n                </ng-container>\n            </div>\n        </div>\n\n        <button mat-raised-button (click)=\"closeDialog()\">\n            Cancel\n        </button>\n\n    </div>\n\n</div>", dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { 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: "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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: UserExploreComponent, selector: "user-explore", ngImport: i0, template: "<div fxLayout=\"column\">\n    <div mat-dialog-title class=\"text-center\">\n        <div>Explore User</div>\n    </div>\n    <div mat-dialog-content fxLayout=\"column\">\n\n        <div class=\"form-group row\">\n            <label class=\"col-3 control-label\">Entry ID:</label>\n            <div class=\"col-9\">{{user.id}}</div>\n        </div>\n\n        <div class=\"form-group row\">\n            <label class=\"col-3 control-label\">Name:</label>\n            <div class=\"col-9\">{{user.name}}</div>\n        </div>\n\n        <div class=\"form-group row\">\n            <label class=\"col-3 control-label\">Email:</label>\n            <div class=\"col-9\">{{user.email}}</div>\n        </div>\n\n        <div class=\"form-group row\">\n            <label class=\"col-3 control-label\">Not Involed Modules: </label>\n            <div class=\"col-9\">\n                <ng-container *ngFor=\"let module of modules\">\n                    {{ module?.name }}, <br />\n                </ng-container>\n            </div>\n        </div>\n\n        <button mat-raised-button (click)=\"closeDialog()\">\n            Cancel\n        </button>\n\n    </div>\n\n</div>", dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { 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: "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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserExploreComponent, decorators: [{
             type: Component,
@@ -2978,7 +2978,7 @@ class UserFormComponent {
             .post('api/entity-files-upload', formData).toPromise();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserFormComponent, deps: [{ token: i1.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: HttpService }, { token: AlertService }, { token: ErrorHandlerService }, { token: i1$5.UntypedFormBuilder }, { token: FormValidatorService }, { token: UserService }, { token: UserConfigService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: UserFormComponent, selector: "user-form", inputs: { userId: "userId" }, outputs: { onSave: "onSave" }, ngImport: i0, template: "<form [formGroup]=\"userForm\" (ngSubmit)=\"save()\">\n  <div class=\"d-flex flex-column justify-content-start align-items center gap-1\" mat-dialog-content>\n    <h5 class=\"fw-bold text-center\">{{ updateMode ? 'Edit' : 'Create ' }} User</h5>\n    <div fxLayout>\n      <div fxLayout=\"column\" fxFlex fxLayoutGap=\"0.25rem\">\n        <mat-form-field>\n          <mat-label>Full name</mat-label>\n          <input [required]=\"!!userForm.get('name').validator\" autocomplete=\"off\" formControlName=\"name\" matInput\n            placeholder=\"Full Name\" type=\"text\" />\n          <mat-error *ngIf=\"isFieldValid('name') && !!userForm.get('name').validator\">{{ getErrorMessage('name') }}\n          </mat-error>\n        </mat-form-field>\n        <mat-form-field>\n          <mat-label>Email</mat-label>\n          <input [required]=\"!!userForm.get('email').validator\" formControlName=\"email\" matInput placeholder=\"Email\"\n            type=\"email\" />\n          <mat-error *ngIf=\"isFieldValid('email') && !!userForm.get('email').validator\">\n            {{ getErrorMessage('email') }}\n          </mat-error>\n        </mat-form-field>\n        <mat-form-field *ngIf=\"this.config.userConfig.showPhone\">\n          <mat-label>Phone</mat-label>\n          <input autocomplete=\"off\" formControlName=\"phone\" matInput placeholder=\"Phone\" type=\"text\" />\n        </mat-form-field>\n        <mat-form-field>\n          <mat-label>Password</mat-label>\n          <input [required]=\"isPasswordRequired && !!userForm.get('password').validator\" autocomplete=\"off\"\n            formControlName=\"password\" matInput placeholder=\"Password\" type=\"password\" />\n          <mat-error *ngIf=\"isFieldValid('password') && !!userForm.get('password').validator\">\n            {{ getErrorMessage('password') }}\n          </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 (fileChanged)=\"fileChanged($event)\" [config]=\"fileConfig\" [fileArray]=\"fileList\">\n              </app-file-dropper>\n            </section>\n          </ng-template>\n          <div *ngIf=\"userForm.get('signature').value;else fileUpload;\" class=\"col-12\">\n            <app-document-viewer (remove)=\"removeFile()\" [config]=\"this.viewerConfig\"\n              [fileUrl]=\"userForm.get('signature_url').value\" [file]=\"userForm.get('signature').value\">\n            </app-document-viewer>\n          </div>\n        </div>\n        <mat-form-field *ngIf=\"this.config.userConfig.showUserTypes\">\n          <mat-label>User Type</mat-label>\n          <mat-select autocomplete=\"off\" formControlName=\"user_type_id\" 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      </div>\n\n      <div\n        *ngIf=\"(this.config.userConfig.showRoles || this.config.userConfig.showFormRoles) && this.userForm.get('user_type_id').value == 3\"\n        fxFlex class=\"ml-4\">\n        <p class=\"mb-0 fw-bold\">\n          Roles\n        </p>\n        <div *ngFor=\"let role of roles\" fxLayout=\"column\">\n          <mat-checkbox (change)=\"roleSelected($event, role.id)\" [checked]=\"role.selected\">\n            {{ role.label }}\n          </mat-checkbox>\n        </div>\n      </div>\n\n    </div>\n    <div class=\"d-flex justify-content-end align-items-center gap-3\">\n      <button [disabled]=\"isWorking\" color=\"primary\" mat-raised-button type=\"submit\">\n        Save\n      </button>\n      <button (click)=\"closeDialog()\" [disabled]=\"isWorking\" mat-flat-button type=\"button\">\n        Cancel\n      </button>\n    </div>\n  </div>\n</form>", 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]  ", exportAs: ["matButton"] }, { kind: "component", type: i8.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { 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$1.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: i6$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i9$2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { 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: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.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$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: UserFormComponent, selector: "user-form", inputs: { userId: "userId" }, outputs: { onSave: "onSave" }, ngImport: i0, template: "<form [formGroup]=\"userForm\" (ngSubmit)=\"save()\">\n  <div class=\"d-flex flex-column justify-content-start align-items center gap-1\" mat-dialog-content>\n    <h5 class=\"fw-bold text-center\">{{ updateMode ? 'Edit' : 'Create ' }} User</h5>\n    <div fxLayout>\n      <div fxLayout=\"column\" fxFlex fxLayoutGap=\"0.25rem\">\n        <mat-form-field>\n          <mat-label>Full name</mat-label>\n          <input [required]=\"!!userForm.get('name').validator\" autocomplete=\"off\" formControlName=\"name\" matInput\n            placeholder=\"Full Name\" type=\"text\" />\n          <mat-error *ngIf=\"isFieldValid('name') && !!userForm.get('name').validator\">{{ getErrorMessage('name') }}\n          </mat-error>\n        </mat-form-field>\n        <mat-form-field>\n          <mat-label>Email</mat-label>\n          <input [required]=\"!!userForm.get('email').validator\" formControlName=\"email\" matInput placeholder=\"Email\"\n            type=\"email\" />\n          <mat-error *ngIf=\"isFieldValid('email') && !!userForm.get('email').validator\">\n            {{ getErrorMessage('email') }}\n          </mat-error>\n        </mat-form-field>\n        <mat-form-field *ngIf=\"this.config.userConfig.showPhone\">\n          <mat-label>Phone</mat-label>\n          <input autocomplete=\"off\" formControlName=\"phone\" matInput placeholder=\"Phone\" type=\"text\" />\n        </mat-form-field>\n        <mat-form-field>\n          <mat-label>Password</mat-label>\n          <input [required]=\"isPasswordRequired && !!userForm.get('password').validator\" autocomplete=\"off\"\n            formControlName=\"password\" matInput placeholder=\"Password\" type=\"password\" />\n          <mat-error *ngIf=\"isFieldValid('password') && !!userForm.get('password').validator\">\n            {{ getErrorMessage('password') }}\n          </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 (fileChanged)=\"fileChanged($event)\" [config]=\"fileConfig\" [fileArray]=\"fileList\">\n              </app-file-dropper>\n            </section>\n          </ng-template>\n          <div *ngIf=\"userForm.get('signature').value;else fileUpload;\" class=\"col-12\">\n            <app-document-viewer (remove)=\"removeFile()\" [config]=\"this.viewerConfig\"\n              [fileUrl]=\"userForm.get('signature_url').value\" [file]=\"userForm.get('signature').value\">\n            </app-document-viewer>\n          </div>\n        </div>\n        <mat-form-field *ngIf=\"this.config.userConfig.showUserTypes\">\n          <mat-label>User Type</mat-label>\n          <mat-select autocomplete=\"off\" formControlName=\"user_type_id\" 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      </div>\n\n      <div\n        *ngIf=\"(this.config.userConfig.showRoles || this.config.userConfig.showFormRoles) && this.userForm.get('user_type_id').value == 3\"\n        fxFlex class=\"ml-4\">\n        <p class=\"mb-0 fw-bold\">\n          Roles\n        </p>\n        <div *ngFor=\"let role of roles\" fxLayout=\"column\">\n          <mat-checkbox (change)=\"roleSelected($event, role.id)\" [checked]=\"role.selected\">\n            {{ role.label }}\n          </mat-checkbox>\n        </div>\n      </div>\n\n    </div>\n    <div class=\"d-flex justify-content-end align-items-center gap-3\">\n      <button [disabled]=\"isWorking\" color=\"primary\" mat-raised-button type=\"submit\">\n        Save\n      </button>\n      <button (click)=\"closeDialog()\" [disabled]=\"isWorking\" mat-flat-button type=\"button\">\n        Cancel\n      </button>\n    </div>\n  </div>\n</form>", dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.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]  ", exportAs: ["matButton"] }, { kind: "component", type: i8.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { 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$1.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: i6$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i9$2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { 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: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.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$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserFormComponent, decorators: [{
             type: Component,
@@ -3254,7 +3254,7 @@ class SearchableSelectorComponent {
                 provide: MatFormFieldControl,
                 useExisting: SearchableSelectorComponent
             }
-        ], viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }], ngImport: i0, template: "<ng-container [formGroup]=\"selectorForm\">\n  <div class=\"searchable-selector-container\">\n    <!-- Selector and Suffix Icons -->\n    <mat-select formControlName=\"select_value\" [multiple]=\"multiple\" [required]=\"required\"\n      (selectionChange)=\"_handleInput()\" (openedChange)=\"openedChange($event)\" [panelWidth]=\"panelWidth\">\n      <!-- Search Field -->\n      <mat-form-field *ngIf=\"enableSearch\" class=\"p-1 w-100\">\n        <input matInput formControlName=\"search\" placeholder=\"Search...\" (keydown)=\"$event.stopPropagation();\"\n          autocomplete=\"off\" #searchInput>\n      </mat-form-field>\n\n      <!-- Options with Scrollable Container -->\n      <div class=\"searchable-selector-scrollable-container\" cdkScrollable (scrollend)=\"onScroll()\">\n        <mat-option *ngFor=\"let item of dataItems\" [value]=\"getPropertyValue(item, valueField)\">\n          <span>{{ getPropertyValue(item, titleField) }}</span>\n          <span *ngIf=\"subtitleField\" class=\"text-secondary\" style=\"font-size: 14px;\">\n            - {{ getPropertyValue(item, subtitleField) }}\n          </span>\n        </mat-option>\n        <mat-progress-bar *ngIf=\"isLoading\" color=\"primary\" mode=\"indeterminate\"></mat-progress-bar>\n      </div>\n    </mat-select>\n\n    <!-- Add and Edit Buttons -->\n    <mat-icon class=\"cursor-pointer\" *ngIf=\"add\" (click)=\"addItem($event)\">\n      add\n    </mat-icon>\n    <mat-icon class=\"cursor-pointer\" *ngIf=\"edit && selectedValue\" (click)=\"editItem($event)\">\n      edit\n    </mat-icon>\n  </div>\n</ng-container>", styles: [".searchable-selector-container{display:flex;align-items:center}.searchable-selector-container mat-select{flex-grow:1}.searchable-selector-container mat-icon{margin-left:2px}.relative-icon{position:relative;top:-4px}.searchable-selector-scrollable-container{max-height:175px;overflow-y:auto}:host ::ng-deep .mat-mdc-floating-label{pointer-events:none!important}\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$5.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$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i7$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i9$1.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: i9$3.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "component", type: i6$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i9$2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i5.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }] }); }
+        ], viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }], ngImport: i0, template: "<ng-container [formGroup]=\"selectorForm\">\n  <div class=\"searchable-selector-container\">\n    <!-- Selector and Suffix Icons -->\n    <mat-select formControlName=\"select_value\" [multiple]=\"multiple\" [required]=\"required\"\n      (selectionChange)=\"_handleInput()\" (openedChange)=\"openedChange($event)\" [panelWidth]=\"panelWidth\">\n      <!-- Search Field -->\n      <mat-form-field *ngIf=\"enableSearch\" class=\"p-1 w-100\">\n        <input matInput formControlName=\"search\" placeholder=\"Search...\" (keydown)=\"$event.stopPropagation();\"\n          autocomplete=\"off\" #searchInput>\n      </mat-form-field>\n\n      <!-- Options with Scrollable Container -->\n      <div class=\"searchable-selector-scrollable-container\" cdkScrollable (scrollend)=\"onScroll()\">\n        <mat-option *ngFor=\"let item of dataItems\" [value]=\"getPropertyValue(item, valueField)\">\n          <span>{{ getPropertyValue(item, titleField) }}</span>\n          <span *ngIf=\"subtitleField\" class=\"text-secondary\" style=\"font-size: 14px;\">\n            - {{ getPropertyValue(item, subtitleField) }}\n          </span>\n        </mat-option>\n        <mat-progress-bar *ngIf=\"isLoading\" color=\"primary\" mode=\"indeterminate\"></mat-progress-bar>\n      </div>\n    </mat-select>\n\n    <!-- Add and Edit Buttons -->\n    <mat-icon class=\"cursor-pointer\" *ngIf=\"add\" (click)=\"addItem($event)\">\n      add\n    </mat-icon>\n    <mat-icon class=\"cursor-pointer\" *ngIf=\"edit && selectedValue\" (click)=\"editItem($event)\">\n      edit\n    </mat-icon>\n  </div>\n</ng-container>", styles: [".searchable-selector-container{display:flex;align-items:center}.searchable-selector-container mat-select{flex-grow:1}.searchable-selector-container mat-icon{margin-left:2px}.relative-icon{position:relative;top:-4px}.searchable-selector-scrollable-container{max-height:175px;overflow-y:auto}:host ::ng-deep .mat-mdc-floating-label{pointer-events:none!important}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$5.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$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i7$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i9$1.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: i9$3.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "component", type: i6$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i9$2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i5.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SearchableSelectorComponent, decorators: [{
             type: Component,
@@ -3386,7 +3386,7 @@ let UserEnableButtonComponent = class UserEnableButtonComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserEnableButtonComponent, deps: [{ token: UserService }, { token: AlertService }, { token: CurrentUserService }, { token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: UserEnableButtonComponent, selector: "app-user-enable-button", inputs: { user: "user", isUseIcons: "isUseIcons" }, outputs: { onSave: "onSave" }, ngImport: i0, template: "<ng-container *ngIf=\"!isUseIcons\">\n  <button mat-stroked-button color=\"warn\" *ngIf=\"user?.user_client?.is_enabled\n  && user?.id !== currentUser?.id\n  && currentUserService.hasPermission('user_disable')\" (click)=\"disableUser()\">\n    Disable\n  </button>\n  <button mat-raised-button color=\"primary\" *ngIf=\"!user?.user_client?.is_enabled\n&& user?.id !== currentUser?.id\n&& currentUserService.hasPermission('user_enable')\" (click)=\"enableUser()\">\n    Enable\n  </button>\n</ng-container>\n\n<ng-container *ngIf=\"isUseIcons\">\n  <button mat-icon-button class=\"text-danger\" *ngIf=\"user?.user_client?.is_enabled\n  && user?.id !== currentUser?.id\n  && currentUserService.hasPermission('user_disable')\" (click)=\"disableUser()\" matTooltip=\"Disable User\">\n    <mat-icon>person_off</mat-icon>\n  </button>\n  <button mat-icon-button class=\"text-success\" *ngIf=\"!user?.user_client?.is_enabled\n&& user?.id !== currentUser?.id\n&& currentUserService.hasPermission('user_enable')\" (click)=\"enableUser()\" matTooltip=\"Enable User\">\n    <mat-icon>task_alt</mat-icon>\n  </button>\n</ng-container>", 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]  ", exportAs: ["matButton"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: UserEnableButtonComponent, selector: "app-user-enable-button", inputs: { user: "user", isUseIcons: "isUseIcons" }, outputs: { onSave: "onSave" }, ngImport: i0, template: "<ng-container *ngIf=\"!isUseIcons\">\n  <button mat-stroked-button color=\"warn\" *ngIf=\"user?.user_client?.is_enabled\n  && user?.id !== currentUser?.id\n  && currentUserService.hasPermission('user_disable')\" (click)=\"disableUser()\">\n    Disable\n  </button>\n  <button mat-raised-button color=\"primary\" *ngIf=\"!user?.user_client?.is_enabled\n&& user?.id !== currentUser?.id\n&& currentUserService.hasPermission('user_enable')\" (click)=\"enableUser()\">\n    Enable\n  </button>\n</ng-container>\n\n<ng-container *ngIf=\"isUseIcons\">\n  <button mat-icon-button class=\"text-danger\" *ngIf=\"user?.user_client?.is_enabled\n  && user?.id !== currentUser?.id\n  && currentUserService.hasPermission('user_disable')\" (click)=\"disableUser()\" matTooltip=\"Disable User\">\n    <mat-icon>person_off</mat-icon>\n  </button>\n  <button mat-icon-button class=\"text-success\" *ngIf=\"!user?.user_client?.is_enabled\n&& user?.id !== currentUser?.id\n&& currentUserService.hasPermission('user_enable')\" (click)=\"enableUser()\" matTooltip=\"Enable User\">\n    <mat-icon>task_alt</mat-icon>\n  </button>\n</ng-container>", dependencies: [{ kind: "directive", type: i2$1.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]  ", exportAs: ["matButton"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
 };
 UserEnableButtonComponent = __decorate([
     UntilDestroy()
@@ -3582,7 +3582,7 @@ let UsersViewAllComponent = class UsersViewAllComponent extends TechlifyListingC
             .subscribe(_ => this.alertService.addAlert('Password reset email sent', 'success'));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UsersViewAllComponent, deps: [{ token: HttpService }, { token: AlertService }, { token: CurrentUserService }, { token: UserConfigService }, { token: i1.MatDialog }, { token: UserService }, { token: i1$5.UntypedFormBuilder }, { token: i1$1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: UsersViewAllComponent, selector: "app-users-view-all", inputs: { clientId: "clientId", userTypeIds: "userTypeIds", title: "title", isAppAdminUser: "isAppAdminUser" }, 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']\"\n          *ngIf=\"config?.userConfig?.showImportButton && currentUserService?.hasPermission('user_create')\">\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\" fxLayout fxLayoutAlign=\"end start\" fxLayoutGap=\"0.3rem\">\n        <mat-form-field appearance=\"outline\" 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 appearance=\"outline\" 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 [hideSingleSelectionIndicator]=\"true\" [hideMultipleSelectionIndicator]=\"true\"\n          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 text-light\">\n              <span *ngFor=\"let role of element?.roles\" class=\"badge bg-secondary\">\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]=\"[getUserViewRoute(element)]\">\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\n              <button *ngIf=\"currentUserService.hasPermission('techlify_rbac.user.reset_password')\" type=\"button\"\n                mat-icon-button (click)=\"resetPassword(element)\" matTooltip=\"Reset User Password\">\n                <mat-icon>refresh</mat-icon>\n              </button>\n\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>", 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$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "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]  ", exportAs: ["matButton"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", 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$1.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: i11.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i11.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i9.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i9.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i9.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i9.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i9.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i9.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i9.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i9.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i9.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i9.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i3$2.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i3$2.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: i5.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { 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$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.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$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i6$1.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", "panelWidth", "focusSearchOnOpen", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange"] }, { kind: "component", type: UserEnableButtonComponent, selector: "app-user-enable-button", inputs: ["user", "isUseIcons"], outputs: ["onSave"] }, { kind: "pipe", type: i3.DatePipe, name: "date" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: UsersViewAllComponent, selector: "app-users-view-all", inputs: { clientId: "clientId", userTypeIds: "userTypeIds", title: "title", isAppAdminUser: "isAppAdminUser" }, 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']\"\n          *ngIf=\"config?.userConfig?.showImportButton && currentUserService?.hasPermission('user_create')\">\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\" fxLayout fxLayoutAlign=\"end start\" fxLayoutGap=\"0.3rem\">\n        <mat-form-field appearance=\"outline\" 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 appearance=\"outline\" 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 [hideSingleSelectionIndicator]=\"true\" [hideMultipleSelectionIndicator]=\"true\"\n          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 text-light\">\n              <span *ngFor=\"let role of element?.roles\" class=\"badge bg-secondary\">\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]=\"[getUserViewRoute(element)]\">\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\n              <button *ngIf=\"currentUserService.hasPermission('techlify_rbac.user.reset_password')\" type=\"button\"\n                mat-icon-button (click)=\"resetPassword(element)\" matTooltip=\"Reset User Password\">\n                <mat-icon>refresh</mat-icon>\n              </button>\n\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>", dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "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]  ", exportAs: ["matButton"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", 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$1.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: i11.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i11.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i9.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i9.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i9.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i9.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i9.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i9.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i9.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i9.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i9.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i9.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i3$1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i3$1.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: i5.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { 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$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.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$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i6$1.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", "panelWidth", "focusSearchOnOpen", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange"] }, { kind: "component", type: UserEnableButtonComponent, selector: "app-user-enable-button", inputs: ["user", "isUseIcons"], outputs: ["onSave"] }, { kind: "pipe", type: i2$1.DatePipe, name: "date" }] }); }
 };
 UsersViewAllComponent = __decorate([
     UntilDestroy()
@@ -3816,7 +3816,7 @@ class TechlifyIconComponent {
         return this.customIconList.includes(name);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TechlifyIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TechlifyIconComponent, selector: "app-techlify-icon", inputs: { name: "name", size: "size" }, ngImport: i0, template: "<!--  Custom icon -->\n<ng-container *ngIf=\"isCustomIcon(name); else faIcon\">\n    <app-custom-icon [name]=\"name\"></app-custom-icon>\n</ng-container>\n\n<!-- Font Awesome -->\n<ng-template #faIcon>\n    <i [ngClass]=\"iconClass\"></i>\n</ng-template>", styles: [".scroll-container{height:400px;overflow:auto}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CustomIconComponent, selector: "app-custom-icon", inputs: ["name"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TechlifyIconComponent, selector: "app-techlify-icon", inputs: { name: "name", size: "size" }, ngImport: i0, template: "<!--  Custom icon -->\n<ng-container *ngIf=\"isCustomIcon(name); else faIcon\">\n    <app-custom-icon [name]=\"name\"></app-custom-icon>\n</ng-container>\n\n<!-- Font Awesome -->\n<ng-template #faIcon>\n    <i [ngClass]=\"iconClass\"></i>\n</ng-template>", styles: [".scroll-container{height:400px;overflow:auto}\n"], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CustomIconComponent, selector: "app-custom-icon", inputs: ["name"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TechlifyIconComponent, decorators: [{
             type: Component,
@@ -4009,14 +4009,14 @@ let TimelineFilterComponent = class TimelineFilterComponent {
     ngOnDestroy() {
         this.stateChanges.complete();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TimelineFilterComponent, deps: [{ token: i1$5.UntypedFormBuilder }, { token: i1$5.NgControl, optional: true, self: true }, { token: i3.DatePipe }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TimelineFilterComponent, deps: [{ token: i1$5.UntypedFormBuilder }, { token: i1$5.NgControl, optional: true, self: true }, { token: i2$1.DatePipe }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TimelineFilterComponent, selector: "app-timeline-filter", inputs: { defaultValue: "defaultValue", required: "required", disabled: "disabled", value: "value", timelines: "timelines", dateFrom: "dateFrom", dateTo: "dateTo", appearance: "appearance", showClearButton: "showClearButton", form: "form", labelText: "labelText" }, outputs: { selectionChange: "selectionChange" }, providers: [
             DatePipe,
             {
                 provide: MatFormFieldControl,
                 useExisting: TimelineFilterComponent
             }
-        ], viewQueries: [{ propertyName: "picker", first: true, predicate: ["picker"], descendants: true }], ngImport: i0, template: "<ng-container [formGroup]=\"selectorForm\">\n    <mat-form-field [appearance]=\"appearance\" class=\"fl-sm\">\n        <mat-label>{{labelText}}</mat-label>\n        <mat-select formControlName=\"select_value\">\n            <mat-option *ngFor=\"let timeline of timelines\" [value]=\"timeline.value\">\n                {{timeline.viewValue}}\n            </mat-option>\n        </mat-select>\n        <button *ngIf=\"showClearButton && timelineValue.value\" matSuffix mat-icon-button\n            (click)=\"timelineValue.setValue('')\">\n            <mat-icon>close</mat-icon>\n        </button>\n        <mat-hint *ngIf=\"isCustomSelected && selectedRangeLabel\" (click)=\"openCalendar()\" class=\"clickable\" fxLayout>\n            <span [innerHTML]=\"selectedRangeLabel\" style=\"font-size: 10px;\"></span>\n            <app-techlify-icon name=\"edit\" class=\"clickable\" size=\"xs\" style=\"margin-left:2px\"></app-techlify-icon>\n        </mat-hint>\n        <mat-hint *ngIf=\"isCustomSelected && !selectedRangeLabel\" (click)=\"openCalendar()\" class=\"clickable\" fxLayout>\n            <span style=\"font-size: 10px;\">Select Range</span>\n            <app-techlify-icon name=\"edit\" class=\"clickable\" size=\"xs\" style=\"margin-left:2px\"></app-techlify-icon>\n        </mat-hint>\n        <mat-date-range-input class=\"offscreen-range-input\" [rangePicker]=\"picker\">\n            <input matStartDate formControlName=\"custom_date_from\" placeholder=\"From date\" readonly />\n            <input matEndDate formControlName=\"custom_date_to\" placeholder=\"To date\" readonly />\n        </mat-date-range-input>\n        <mat-date-range-picker #picker></mat-date-range-picker>\n    </mat-form-field>\n</ng-container>", styles: [".icon-md{height:24px!important;width:24px!important;font-size:24px!important;margin:0 1px}.icon-sm{height:20px!important;width:20px!important;font-size:20px!important}.icon-xs{height:16px!important;width:16px!important;font-size:16px!important}.fl-md{width:200px!important}.fl-md .mat-mdc-form-field{width:100%!important}.fl-sm{width:150px!important}.fl-sm .mat-mdc-form-field{width:100%!important}.mat-btn-md{height:25px!important;padding:0 8px!important}.fs-12{font-size:12px!important}.fs-16{font-size:16px!important}.fs-13{font-size:13px!important}.fs-18{font-size:18px!important}.clickable:hover{cursor:pointer}.mat-mdc-form-field-hint-wrapper{padding:0 4px!important}.nil-subscript-wrapper .mat-mdc-form-field-subscript-wrapper{height:0!important}.offscreen-range-input{position:absolute;opacity:0;pointer-events:none;display:flex!important}\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: 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: i1$5.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$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { 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.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i9$2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11$1.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i11$1.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i11$1.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i11$1.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "component", type: TechlifyIconComponent, selector: "app-techlify-icon", inputs: ["name", "size"] }] }); }
+        ], viewQueries: [{ propertyName: "picker", first: true, predicate: ["picker"], descendants: true }], ngImport: i0, template: "<ng-container [formGroup]=\"selectorForm\">\n    <mat-form-field [appearance]=\"appearance\" class=\"fl-sm\">\n        <mat-label>{{labelText}}</mat-label>\n        <mat-select formControlName=\"select_value\">\n            <mat-option *ngFor=\"let timeline of timelines\" [value]=\"timeline.value\">\n                {{timeline.viewValue}}\n            </mat-option>\n        </mat-select>\n        <button *ngIf=\"showClearButton && timelineValue.value\" matSuffix mat-icon-button\n            (click)=\"timelineValue.setValue('')\">\n            <mat-icon>close</mat-icon>\n        </button>\n        <mat-hint *ngIf=\"isCustomSelected && selectedRangeLabel\" (click)=\"openCalendar()\" class=\"clickable\" fxLayout>\n            <span [innerHTML]=\"selectedRangeLabel\" style=\"font-size: 10px;\"></span>\n            <app-techlify-icon name=\"edit\" class=\"clickable\" size=\"xs\" style=\"margin-left:2px\"></app-techlify-icon>\n        </mat-hint>\n        <mat-hint *ngIf=\"isCustomSelected && !selectedRangeLabel\" (click)=\"openCalendar()\" class=\"clickable\" fxLayout>\n            <span style=\"font-size: 10px;\">Select Range</span>\n            <app-techlify-icon name=\"edit\" class=\"clickable\" size=\"xs\" style=\"margin-left:2px\"></app-techlify-icon>\n        </mat-hint>\n        <mat-date-range-input class=\"offscreen-range-input\" [rangePicker]=\"picker\">\n            <input matStartDate formControlName=\"custom_date_from\" placeholder=\"From date\" readonly />\n            <input matEndDate formControlName=\"custom_date_to\" placeholder=\"To date\" readonly />\n        </mat-date-range-input>\n        <mat-date-range-picker #picker></mat-date-range-picker>\n    </mat-form-field>\n</ng-container>", styles: [".icon-md{height:24px!important;width:24px!important;font-size:24px!important;margin:0 1px}.icon-sm{height:20px!important;width:20px!important;font-size:20px!important}.icon-xs{height:16px!important;width:16px!important;font-size:16px!important}.fl-md{width:200px!important}.fl-md .mat-mdc-form-field{width:100%!important}.fl-sm{width:150px!important}.fl-sm .mat-mdc-form-field{width:100%!important}.mat-btn-md{height:25px!important;padding:0 8px!important}.fs-12{font-size:12px!important}.fs-16{font-size:16px!important}.fs-13{font-size:13px!important}.fs-18{font-size:18px!important}.clickable:hover{cursor:pointer}.mat-mdc-form-field-hint-wrapper{padding:0 4px!important}.nil-subscript-wrapper .mat-mdc-form-field-subscript-wrapper{height:0!important}.offscreen-range-input{position:absolute;opacity:0;pointer-events:none;display:flex!important}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.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: i1$5.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$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { 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.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i9$2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11$1.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i11$1.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i11$1.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i11$1.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "component", type: TechlifyIconComponent, selector: "app-techlify-icon", inputs: ["name", "size"] }] }); }
 };
 TimelineFilterComponent = TimelineFilterComponent_1 = __decorate([
     UntilDestroy()
@@ -4034,7 +4034,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                     type: Optional
                 }, {
                     type: Self
-                }] }, { type: i3.DatePipe }], propDecorators: { defaultValue: [{
+                }] }, { type: i2$1.DatePipe }], propDecorators: { defaultValue: [{
                 type: Input
             }], required: [{
                 type: Input
@@ -4129,7 +4129,7 @@ let LoginHistoryForUserComponent = class LoginHistoryForUserComponent {
         //Until destroyed uses it
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LoginHistoryForUserComponent, deps: [{ token: HttpService }, { token: i1$5.UntypedFormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: LoginHistoryForUserComponent, selector: "app-login-history-for-user", inputs: { userId: "userId" }, ngImport: i0, template: "<div class=\"mat-typography m-4\">\n    <form [formGroup]=\"historyFilterForm\" fxLayoutAlign=\" start center\">\n        <app-timeline-filter formControlName=\"duration\" (selectionChange)=\"onTimelineChange($event)\"></app-timeline-filter>\n    </form>\n\n    <section>\n        <div class=\"scroll-container\" infiniteScroll [infiniteScrollDistance]=\"2\" [infiniteScrollThrottle]=\"50\"\n            (scrolled)=\"onScroll()\" [scrollWindow]=\"false\">\n            <table mat-table [dataSource]=\"loginHistoryList\" matSort class=\"w-100 mt-1\" multiTemplateDataRows\n                id=\"login-history-table\">\n\n                <!-- Index Column -->\n                <ng-container matColumnDef=\"index\">\n                    <th mat-header-cell *matHeaderCellDef> # </th>\n                    <td mat-cell *matCellDef=\"let loginHistory; let i = dataIndex\"> {{ i+1 }} </td>\n                </ng-container>\n\n                <ng-container matColumnDef=\"created_at\">\n                    <th mat-header-cell *matHeaderCellDef mat-sort-header> Last Login</th>\n                    <td mat-cell *matCellDef=\"let loginHistory;\">\n                        {{loginHistory?.created_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        </div>\n\n    </section>\n</div>\n", styles: [".scroll-container{max-height:800px;overflow-y:auto}\n"], dependencies: [{ kind: "directive", type: i6$1.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: i11.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i11.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i9.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i9.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i9.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i9.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i9.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i9.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i9.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i9.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i9.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i9.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { 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: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: TimelineFilterComponent, selector: "app-timeline-filter", inputs: ["defaultValue", "required", "disabled", "value", "timelines", "dateFrom", "dateTo", "appearance", "showClearButton", "form", "labelText"], outputs: ["selectionChange"] }, { kind: "pipe", type: i3.DatePipe, name: "date" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: LoginHistoryForUserComponent, selector: "app-login-history-for-user", inputs: { userId: "userId" }, ngImport: i0, template: "<div class=\"mat-typography m-4\">\n    <form [formGroup]=\"historyFilterForm\" fxLayoutAlign=\" start center\">\n        <app-timeline-filter formControlName=\"duration\" (selectionChange)=\"onTimelineChange($event)\"></app-timeline-filter>\n    </form>\n\n    <section>\n        <div class=\"scroll-container\" infiniteScroll [infiniteScrollDistance]=\"2\" [infiniteScrollThrottle]=\"50\"\n            (scrolled)=\"onScroll()\" [scrollWindow]=\"false\">\n            <table mat-table [dataSource]=\"loginHistoryList\" matSort class=\"w-100 mt-1\" multiTemplateDataRows\n                id=\"login-history-table\">\n\n                <!-- Index Column -->\n                <ng-container matColumnDef=\"index\">\n                    <th mat-header-cell *matHeaderCellDef> # </th>\n                    <td mat-cell *matCellDef=\"let loginHistory; let i = dataIndex\"> {{ i+1 }} </td>\n                </ng-container>\n\n                <ng-container matColumnDef=\"created_at\">\n                    <th mat-header-cell *matHeaderCellDef mat-sort-header> Last Login</th>\n                    <td mat-cell *matCellDef=\"let loginHistory;\">\n                        {{loginHistory?.created_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        </div>\n\n    </section>\n</div>\n", styles: [".scroll-container{max-height:800px;overflow-y:auto}\n"], dependencies: [{ kind: "directive", type: i6$1.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: i11.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i11.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i9.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i9.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i9.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i9.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i9.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i9.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i9.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i9.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i9.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i9.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { 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: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: TimelineFilterComponent, selector: "app-timeline-filter", inputs: ["defaultValue", "required", "disabled", "value", "timelines", "dateFrom", "dateTo", "appearance", "showClearButton", "form", "labelText"], outputs: ["selectionChange"] }, { kind: "pipe", type: i2$1.DatePipe, name: "date" }] }); }
 };
 LoginHistoryForUserComponent = __decorate([
     UntilDestroy()
@@ -4208,7 +4208,7 @@ class ExportExcelButtonComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ExportExcelButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ExportExcelButtonComponent, selector: "app-export-excel-button", inputs: { isCSV: "isCSV", fileName: "fileName", data: "data", tableId: "tableId" }, outputs: { isExportingToExcel: "isExportingToExcel" }, ngImport: i0, template: "<app-techlify-icon name=\"export\" class=\"clickable d-print-none\" *ngIf=\"!isWorking\" (click)=\"exportToExcel()\"\n    matTooltip=\"Excel Export\">\n</app-techlify-icon>", styles: [".icon-md{height:24px!important;width:24px!important;font-size:24px!important;margin:0 1px}.icon-sm{height:20px!important;width:20px!important;font-size:20px!important}.icon-xs{height:16px!important;width:16px!important;font-size:16px!important}.fl-md{width:200px!important}.fl-md .mat-mdc-form-field{width:100%!important}.fl-sm{width:150px!important}.fl-sm .mat-mdc-form-field{width:100%!important}.mat-btn-md{height:25px!important;padding:0 8px!important}.fs-12{font-size:12px!important}.fs-16{font-size:16px!important}.fs-13{font-size:13px!important}.fs-18{font-size:18px!important}.clickable:hover{cursor:pointer}.mat-mdc-form-field-hint-wrapper{padding:0 4px!important}.nil-subscript-wrapper .mat-mdc-form-field-subscript-wrapper{height:0!important}:host{display:flex;align-content:center}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: TechlifyIconComponent, selector: "app-techlify-icon", inputs: ["name", "size"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ExportExcelButtonComponent, selector: "app-export-excel-button", inputs: { isCSV: "isCSV", fileName: "fileName", data: "data", tableId: "tableId" }, outputs: { isExportingToExcel: "isExportingToExcel" }, ngImport: i0, template: "<app-techlify-icon name=\"export\" class=\"clickable d-print-none\" *ngIf=\"!isWorking\" (click)=\"exportToExcel()\"\n    matTooltip=\"Excel Export\">\n</app-techlify-icon>", styles: [".icon-md{height:24px!important;width:24px!important;font-size:24px!important;margin:0 1px}.icon-sm{height:20px!important;width:20px!important;font-size:20px!important}.icon-xs{height:16px!important;width:16px!important;font-size:16px!important}.fl-md{width:200px!important}.fl-md .mat-mdc-form-field{width:100%!important}.fl-sm{width:150px!important}.fl-sm .mat-mdc-form-field{width:100%!important}.mat-btn-md{height:25px!important;padding:0 8px!important}.fs-12{font-size:12px!important}.fs-16{font-size:16px!important}.fs-13{font-size:13px!important}.fs-18{font-size:18px!important}.clickable:hover{cursor:pointer}.mat-mdc-form-field-hint-wrapper{padding:0 4px!important}.nil-subscript-wrapper .mat-mdc-form-field-subscript-wrapper{height:0!important}:host{display:flex;align-content:center}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: TechlifyIconComponent, selector: "app-techlify-icon", inputs: ["name", "size"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ExportExcelButtonComponent, decorators: [{
             type: Component,
@@ -4254,7 +4254,7 @@ let AuditLogListFilterComponent = class AuditLogListFilterComponent {
     ngOnDestroy() {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AuditLogListFilterComponent, deps: [{ token: FormValidatorService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AuditLogListFilterComponent, selector: "app-audit-log-list-filter", inputs: { filterForm: "filterForm", objectId: "objectId", objectType: "objectType" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<form [formGroup]=\"filterForm\" class=\"d-flex justify-content-end align-items-center gap-2 w-100\">\n  <app-timeline-filter labelText=\"Activity Date\" formControlName=\"duration\" [dateFrom]=\"filterForm.value?.date_from\"\n    [dateTo]=\"filterForm.value?.date_to\" (selectionChange)=\"onDurationChange($event)\" [showClearButton]=\"true\"\n    appearance=\"outline\"></app-timeline-filter>\n\n  <mat-form-field>\n    <mat-label>Action</mat-label>\n    <mat-select formControlName=\"action\" [multiple]=\"true\">\n      <mat-option value=\"created\">Created</mat-option>\n      <mat-option value=\"updated\">Updated</mat-option>\n      <mat-option value=\"deleted\">Deleted</mat-option>\n    </mat-select>\n    <button *ngIf=\"getFieldValue('action')\" matSuffix mat-icon-button (click)=\"resetFieldValue('action')\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <mat-form-field *ngIf=\"showObjectFilter\">\n    <mat-label>Model Type</mat-label>\n    <app-searchable-selector formControlName=\"object_type\" apiUrl=\"api/audit-log-types\" titleField=\"object_type\"\n      valueField=\"object_type\" [sort]=\"false\" [multiple]=\"true\">\n    </app-searchable-selector>\n    <button *ngIf=\"getFieldValue('object_type')\" matSuffix mat-icon-button (click)=\"resetFieldValue('object_type')\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>Model #</mat-label>\n    <input type=\"text\" matInput formControlName=\"model_search\" />\n    <button *ngIf=\"getFieldValue('model_search')\" matSuffix mat-icon-button (click)=\"resetFieldValue('model_search')\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>Search Changes</mat-label>\n    <input type=\"text\" matInput formControlName=\"change_search\" />\n    <button *ngIf=\"getFieldValue('change_search')\" matSuffix mat-icon-button (click)=\"resetFieldValue('change_search')\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>Creator</mat-label>\n    <app-searchable-selector formControlName=\"creator_ids\" [multiple]=\"true\" apiUrl=\"api/users\"\n      titleField=\"name\"></app-searchable-selector>\n    <button *ngIf=\"getFieldValue('creator_ids')\" matSuffix mat-icon-button (click)=\"resetFieldValue('creator_ids')\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n</form>", styles: [""], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.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$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", 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.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$1.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: i6$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i9$2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { 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", "panelWidth", "focusSearchOnOpen", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange"] }, { kind: "component", type: TimelineFilterComponent, selector: "app-timeline-filter", inputs: ["defaultValue", "required", "disabled", "value", "timelines", "dateFrom", "dateTo", "appearance", "showClearButton", "form", "labelText"], outputs: ["selectionChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AuditLogListFilterComponent, selector: "app-audit-log-list-filter", inputs: { filterForm: "filterForm", objectId: "objectId", objectType: "objectType" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<form [formGroup]=\"filterForm\" class=\"d-flex justify-content-end align-items-center gap-2 w-100\">\n  <app-timeline-filter labelText=\"Activity Date\" formControlName=\"duration\" [dateFrom]=\"filterForm.value?.date_from\"\n    [dateTo]=\"filterForm.value?.date_to\" (selectionChange)=\"onDurationChange($event)\" [showClearButton]=\"true\"\n    appearance=\"outline\"></app-timeline-filter>\n\n  <mat-form-field>\n    <mat-label>Action</mat-label>\n    <mat-select formControlName=\"action\" [multiple]=\"true\">\n      <mat-option value=\"created\">Created</mat-option>\n      <mat-option value=\"updated\">Updated</mat-option>\n      <mat-option value=\"deleted\">Deleted</mat-option>\n    </mat-select>\n    <button *ngIf=\"getFieldValue('action')\" matSuffix mat-icon-button (click)=\"resetFieldValue('action')\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <mat-form-field *ngIf=\"showObjectFilter\">\n    <mat-label>Model Type</mat-label>\n    <app-searchable-selector formControlName=\"object_type\" apiUrl=\"api/audit-log-types\" titleField=\"object_type\"\n      valueField=\"object_type\" [sort]=\"false\" [multiple]=\"true\">\n    </app-searchable-selector>\n    <button *ngIf=\"getFieldValue('object_type')\" matSuffix mat-icon-button (click)=\"resetFieldValue('object_type')\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>Model #</mat-label>\n    <input type=\"text\" matInput formControlName=\"model_search\" />\n    <button *ngIf=\"getFieldValue('model_search')\" matSuffix mat-icon-button (click)=\"resetFieldValue('model_search')\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>Search Changes</mat-label>\n    <input type=\"text\" matInput formControlName=\"change_search\" />\n    <button *ngIf=\"getFieldValue('change_search')\" matSuffix mat-icon-button (click)=\"resetFieldValue('change_search')\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n  <mat-form-field>\n    <mat-label>Creator</mat-label>\n    <app-searchable-selector formControlName=\"creator_ids\" [multiple]=\"true\" apiUrl=\"api/users\"\n      titleField=\"name\"></app-searchable-selector>\n    <button *ngIf=\"getFieldValue('creator_ids')\" matSuffix mat-icon-button (click)=\"resetFieldValue('creator_ids')\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n\n</form>", styles: [""], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.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$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", 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.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$1.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: i6$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i9$2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { 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", "panelWidth", "focusSearchOnOpen", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange"] }, { kind: "component", type: TimelineFilterComponent, selector: "app-timeline-filter", inputs: ["defaultValue", "required", "disabled", "value", "timelines", "dateFrom", "dateTo", "appearance", "showClearButton", "form", "labelText"], outputs: ["selectionChange"] }] }); }
 };
 AuditLogListFilterComponent = __decorate([
     UntilDestroy()
@@ -4431,7 +4431,7 @@ let AuditLogListComponent = class AuditLogListComponent extends TechlifyListingC
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AuditLogListComponent, deps: [{ token: i1$1.Router }, { token: i1$6.DomSanitizer }, { token: i1$5.FormBuilder }, { token: AuditLogService }, { token: i1$1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AuditLogListComponent, selector: "app-audit-log-list", inputs: { objectId: "objectId", objectType: "objectType", showFilter: "showFilter", showExportButtons: "showExportButtons", userId: "userId", disableFilterPatchingFromUrl: "disableFilterPatchingFromUrl", scrollContainer: "scrollContainer" }, viewQueries: [{ propertyName: "sort", first: true, predicate: MatSort, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<mat-card class=\"m-2\">\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        <h3 class=\"mb-0\">\n          Audit Logs\n        </h3>\n        <app-export-excel-button *ngIf=\"showExportButtons\" matTooltip=\"Export\" elementId=\"audit-logs-table\" class=\"mt-1\"\n          name=\"AuditLogs\" [data]=\"excelData\">\n        </app-export-excel-button>\n      </div>\n\n      <app-audit-log-list-filter class=\"w-100\" *ngIf=\"showFilter\" [filterForm]=\"filterForm\"\n        (valueChange)=\"filterChange($event)\" [objectType]=\"objectType\"\n        [objectId]=\"objectId\"></app-audit-log-list-filter>\n    </div>\n  </mat-card-content>\n</mat-card>\n\n<mat-card class=\"mt-2\">\n  <mat-card-content>\n    <table mat-table [dataSource]=\"models\" matSort class=\"w-100\" infiniteScroll [infiniteScrollDistance]=\"2\"\n      [infiniteScrollThrottle]=\"50\" [infiniteScrollContainer]=\"scrollContainer\" (scrolled)=\"onScroll()\"\n      [fromRoot]=\"true\">\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 class=\"px-3\" [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: ["isCSV", "fileName", "data", "tableId"], outputs: ["isExportingToExcel"] }, { kind: "component", type: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i11.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i11.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i9.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i9.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i9.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i9.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i9.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i9.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i9.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i9.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i9.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i9.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i5.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i6$1.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: "pipe", type: i3.DatePipe, name: "date" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AuditLogListComponent, selector: "app-audit-log-list", inputs: { objectId: "objectId", objectType: "objectType", showFilter: "showFilter", showExportButtons: "showExportButtons", userId: "userId", disableFilterPatchingFromUrl: "disableFilterPatchingFromUrl", scrollContainer: "scrollContainer" }, viewQueries: [{ propertyName: "sort", first: true, predicate: MatSort, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<mat-card class=\"m-2\">\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        <h3 class=\"mb-0\">\n          Audit Logs\n        </h3>\n        <app-export-excel-button *ngIf=\"showExportButtons\" matTooltip=\"Export\" elementId=\"audit-logs-table\" class=\"mt-1\"\n          name=\"AuditLogs\" [data]=\"excelData\">\n        </app-export-excel-button>\n      </div>\n\n      <app-audit-log-list-filter class=\"w-100\" *ngIf=\"showFilter\" [filterForm]=\"filterForm\"\n        (valueChange)=\"filterChange($event)\" [objectType]=\"objectType\"\n        [objectId]=\"objectId\"></app-audit-log-list-filter>\n    </div>\n  </mat-card-content>\n</mat-card>\n\n<mat-card class=\"mt-2\">\n  <mat-card-content>\n    <table mat-table [dataSource]=\"models\" matSort class=\"w-100\" infiniteScroll [infiniteScrollDistance]=\"2\"\n      [infiniteScrollThrottle]=\"50\" [infiniteScrollContainer]=\"scrollContainer\" (scrolled)=\"onScroll()\"\n      [fromRoot]=\"true\">\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 class=\"px-3\" [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: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ExportExcelButtonComponent, selector: "app-export-excel-button", inputs: ["isCSV", "fileName", "data", "tableId"], outputs: ["isExportingToExcel"] }, { kind: "component", type: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i11.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i11.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i9.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i9.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i9.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i9.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i9.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i9.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i9.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i9.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i9.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i9.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i5.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i6$1.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: "pipe", type: i2$1.DatePipe, name: "date" }] }); }
 };
 AuditLogListComponent = __decorate([
     UntilDestroy()
@@ -4513,7 +4513,7 @@ class UserClientEnableDisableButtonComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserClientEnableDisableButtonComponent, deps: [{ token: CredentialsService }, { token: CurrentUserService }, { token: UserClientService }, { token: AlertService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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]  ", exportAs: ["matButton"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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: i2$1.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]  ", exportAs: ["matButton"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserClientEnableDisableButtonComponent, decorators: [{
             type: Component,
@@ -4556,7 +4556,7 @@ class UserClientsListComponent extends TechlifyListingControllerInterface {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserClientsListComponent, deps: [{ token: UserClientService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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: i9.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i9.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i9.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i9.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i9.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i9.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i9.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i9.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i9.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i9.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i5.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" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i9.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i9.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i9.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i9.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i9.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i9.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i9.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i9.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i9.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i9.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i5.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: i2$1.DatePipe, name: "date" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserClientsListComponent, decorators: [{
             type: Component,
@@ -4609,7 +4609,7 @@ class UserSessionsComponent extends TechlifyListingControllerInterface {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserSessionsComponent, deps: [{ token: UserSessionService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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: i9.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i9.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i9.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i9.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i9.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i9.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i9.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i9.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i9.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i9.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i5.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "pipe", type: i3.DatePipe, name: "date" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i9.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i9.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i9.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i9.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i9.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i9.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i9.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i9.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i9.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i9.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i5.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "pipe", type: i2$1.DatePipe, name: "date" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserSessionsComponent, decorators: [{
             type: Component,
@@ -4666,7 +4666,7 @@ class UserViewComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserViewComponent, deps: [{ token: UserService }, { token: i1$1.ActivatedRoute }, { token: ConfigService }, { token: HttpService }, { token: i1.MatDialog }, { token: CurrentUserService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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>", 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]  ", exportAs: ["matButton"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i9$4.MatTabContent, selector: "[matTabContent]" }, { kind: "component", type: i9$4.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i9$4.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { 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", "scrollContainer"] }, { kind: "component", type: UserClientsListComponent, selector: "app-user-clients-list", inputs: ["user"] }, { kind: "component", type: UserSessionsComponent, selector: "app-user-sessions", inputs: ["user"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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>", 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: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.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]  ", exportAs: ["matButton"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i9$4.MatTabContent, selector: "[matTabContent]" }, { kind: "component", type: i9$4.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i9$4.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { 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", "scrollContainer"] }, { 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: "18.2.13", ngImport: i0, type: UserViewComponent, decorators: [{
             type: Component,
@@ -4887,7 +4887,7 @@ class ReadMoreComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ReadMoreComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ReadMoreComponent, selector: "app-read-more", inputs: { text: "text", maxLength: "maxLength" }, ngImport: i0, template: "<div [innerHTML]=\"currentText\"></div>\n<a href=\"javascript:;\" *ngIf=\"!hideToggle\" class=\"primary-color hoverable\" (click)=\"toggleView()\">Read\n  {{ isCollapsed ? \"more\" : \"less\" }}</a>", styles: ["div.collapsed{height:250px;overflow:hidden}.primary-color{color:#009fdd!important}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ReadMoreComponent, selector: "app-read-more", inputs: { text: "text", maxLength: "maxLength" }, ngImport: i0, template: "<div [innerHTML]=\"currentText\"></div>\n<a href=\"javascript:;\" *ngIf=\"!hideToggle\" class=\"primary-color hoverable\" (click)=\"toggleView()\">Read\n  {{ isCollapsed ? \"more\" : \"less\" }}</a>", styles: ["div.collapsed{height:250px;overflow:hidden}.primary-color{color:#009fdd!important}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ReadMoreComponent, decorators: [{
             type: Component,
@@ -5191,8 +5191,8 @@ let EntityFilesViewAllComponent = class EntityFilesViewAllComponent {
             this.isWorking = false;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EntityFilesViewAllComponent, deps: [{ token: EntityFileService }, { token: i3.Location }, { token: AlertService }, { token: i1.MatDialog }, { token: i1$5.UntypedFormBuilder }, { token: ErrorHandlerService }, { token: CurrentUserService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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", viewMode: "viewMode", fileDropperHeight: "fileDropperHeight", isShowDragDropSection: "isShowDragDropSection", useTechlifyTags: "useTechlifyTags", techlifyTagCategories: "techlifyTagCategories", techlifyTagConfig: "techlifyTagConfig", title: "title", permission: "permission" }, ngImport: i0, template: "<div *ngIf=\"viewMode === 'list'\">\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 *ngIf=\"updateRowForm.get('title').value || updateRowForm.get('title').value===0\" matSuffix\n                mat-icon-button style=\"color:red\" (click)=\"resetFieldValueOfRow('title', $event)\">\n                <mat-icon>close</mat-icon>\n              </button>\n              <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 *ngIf=\"updateRowForm.get('details').value || updateRowForm.get('details').value===0\" matSuffix\n                mat-icon-button style=\"color:red\" (click)=\"resetFieldValueOfRow('details', $event)\">\n                <mat-icon>close</mat-icon>\n              </button>\n              <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 *ngIf=\"updateRowForm.get('tag_ids').value || updateRowForm.get('tag_ids').value===0\" matSuffix\n                  mat-icon-button style=\"color:red\" (click)=\"resetFieldValueOfRow('tag_ids', $event)\">\n                  <mat-icon>close</mat-icon>\n                </button>\n                <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>\n          <mat-card-content>\n            <div fxLayoutAlign=\"start center\">\n              <mat-icon>\n                description\n              </mat-icon>\n              <h3 class=\"font-weight-bold mb-0\">\n                {{title}}s\n              </h3>\n              <mat-icon class=\"cursor-pointer\" *ngIf=\"!viewOnly && isShowCreateAction\" (click)=\"addEntityFile()\">\n                add\n              </mat-icon>\n              <span fxFlex></span>\n              <form [formGroup]=\"filterFormGroup\" fxLayout fxLayoutGap=\"0.3rem\">\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 *ngIf=\"filters.title\" matSuffix mat-icon-button (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              </form>\n            </div>\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                  {{element.title}}\n                  <ng-container *ngIf=\"useTechlifyTags\">\n                    <br>\n                    <small class=\"badge badge-secondary mr-1\" *ngFor=\"let tag of element?.tags\">{{tag?.title}}</small>\n                  </ng-container>\n\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              <!-- 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\" class=\"text-muted\">\n                  <div fxLayout>\n                    <a href=\"{{element.url}}\" target=\"_blank\" class=\"text-decoration-none text-muted clickable\">\n                      <mat-icon>download</mat-icon>\n                    </a>\n                    <mat-icon class=\"clickable\" *ngIf=\"isShowUpdateAction\"\n                      (click)=\"editEntityFile(element)\">edit</mat-icon>\n                    <mat-icon class=\"clickable\" *ngIf=\"isShowDeleteAction\"\n                      (click)=\"deleteEntityFile(element)\">delete</mat-icon>\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\n            <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isWorking\"></mat-progress-bar>\n          </mat-card-content>\n        </mat-card>\n        <ng-container *ngIf=\"isShowDragDropSection\">\n          <section fxFlex=\"30%\" *ngIf=\"!this.documentIds.length && !viewOnly && isShowCreateAction\">\n            <app-file-dropper [config]=\"fileConfig\" (fileChanged)=\"fileChanged($event)\" [fileArray]=\"fileList\">\n            </app-file-dropper>\n          </section>\n        </ng-container>\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\n<mat-card *ngIf=\"viewMode === 'timeline'\">\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      <span class=\"badge bg-primary\" *ngIf=\"total > 0\">{{ total }}</span>\n      <mat-icon color=\"primary\" class=\"cursor-pointer\" *ngIf=\"!viewOnly && isShowCreateAction\"\n        (click)=\"addEntityFile()\">\n        add\n      </mat-icon>\n    </div>\n  </mat-card-content>\n  <mat-card-content *ngIf=\"!this.documentIds.length && !viewOnly && isShowCreateAction\" class=\"mt-3\">\n    <app-file-dropper [config]=\"fileConfig\" (fileChanged)=\"fileChanged($event)\" [fileArray]=\"fileList\">\n    </app-file-dropper>\n  </mat-card-content>\n\n  <mat-card-content class=\"mt-3\">\n    <div *ngFor=\"let entityFile of entityFiles\" class=\"d-flex flex-column gap-0\">\n      <div class=\"d-flex flex-column gap-0\">\n        <div class=\"d-flex justify-content-between align-items-center gap-1\">\n          <p class=\"mb-0 fw-bold text-wrap\">{{ entityFile?.title | wrap:20 }}</p>\n          <span class=\"badge bg-dark\" *ngFor=\"let tag of entityFile?.tags\">\n            {{ tag?.title }}\n          </span>\n          <small class=\"text-dark\">{{ sizeOf(entityFile.file_size) }}</small>\n        </div>\n      </div>\n      <app-read-more [text]=\"entityFile?.details\" [maxLength]=\"50\"></app-read-more>\n      <div class=\"d-flex justify-content-between gap-2\">\n        <small class=\"text-secondary\" style=\"max-width: 70%\">\n          <i>Uploaded By {{ entityFile?.creator?.name }} {{ entityFile?.created_at | date: 'mediumDate'}}</i>\n        </small>\n        <div class=\"d-flex justify-content-end align-items-center gap-1\">\n          <a href=\"{{entityFile?.url}}\" target=\"_blank\" class=\"text-decoration-none text-secondary mt-2\">\n            <mat-icon>download</mat-icon>\n          </a>\n          <mat-icon *ngIf=\"isShowUpdateAction\" (click)=\"editEntityFile(entityFile)\"\n            class=\"cursor-pointer text-secondary\">\n            edit\n          </mat-icon>\n          <mat-icon *ngIf=\"isShowDeleteAction\" (click)=\"deleteEntityFile(entityFile)\"\n            class=\"cursor-pointer text-secondary\">\n            delete\n          </mat-icon>\n        </div>\n      </div>\n      <hr style=\"margin: 0.5rem 0\">\n    </div>\n    <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isWorking\"></mat-progress-bar>\n  </mat-card-content>\n</mat-card>", styles: ["th.mat-header-cell,td.mat-cell,td.mat-footer-cell{padding:2px}.entity-file-card{overflow-x:auto}.clickable:hover{cursor:pointer}\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$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.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$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.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: "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: i6$1.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]  ", exportAs: ["matButton"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i8.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], 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$1.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: i11.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i9.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i9.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i9.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i9.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i9.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i9.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i9.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i9.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i9.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i9.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i4.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i4.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "component", type: i5.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { 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: "pipe", type: i3.DatePipe, name: "date" }, { kind: "pipe", type: WrapPipe, name: "wrap" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EntityFilesViewAllComponent, deps: [{ token: EntityFileService }, { token: i2$1.Location }, { token: AlertService }, { token: i1.MatDialog }, { token: i1$5.UntypedFormBuilder }, { token: ErrorHandlerService }, { token: CurrentUserService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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", viewMode: "viewMode", fileDropperHeight: "fileDropperHeight", isShowDragDropSection: "isShowDragDropSection", useTechlifyTags: "useTechlifyTags", techlifyTagCategories: "techlifyTagCategories", techlifyTagConfig: "techlifyTagConfig", title: "title", permission: "permission" }, ngImport: i0, template: "<div *ngIf=\"viewMode === 'list'\">\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 *ngIf=\"updateRowForm.get('title').value || updateRowForm.get('title').value===0\" matSuffix\n                mat-icon-button style=\"color:red\" (click)=\"resetFieldValueOfRow('title', $event)\">\n                <mat-icon>close</mat-icon>\n              </button>\n              <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 *ngIf=\"updateRowForm.get('details').value || updateRowForm.get('details').value===0\" matSuffix\n                mat-icon-button style=\"color:red\" (click)=\"resetFieldValueOfRow('details', $event)\">\n                <mat-icon>close</mat-icon>\n              </button>\n              <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 *ngIf=\"updateRowForm.get('tag_ids').value || updateRowForm.get('tag_ids').value===0\" matSuffix\n                  mat-icon-button style=\"color:red\" (click)=\"resetFieldValueOfRow('tag_ids', $event)\">\n                  <mat-icon>close</mat-icon>\n                </button>\n                <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>\n          <mat-card-content>\n            <div fxLayoutAlign=\"start center\">\n              <mat-icon>\n                description\n              </mat-icon>\n              <h3 class=\"font-weight-bold mb-0\">\n                {{title}}s\n              </h3>\n              <mat-icon class=\"cursor-pointer\" *ngIf=\"!viewOnly && isShowCreateAction\" (click)=\"addEntityFile()\">\n                add\n              </mat-icon>\n              <span fxFlex></span>\n              <form [formGroup]=\"filterFormGroup\" fxLayout fxLayoutGap=\"0.3rem\">\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 *ngIf=\"filters.title\" matSuffix mat-icon-button (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              </form>\n            </div>\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                  {{element.title}}\n                  <ng-container *ngIf=\"useTechlifyTags\">\n                    <br>\n                    <small class=\"badge badge-secondary mr-1\" *ngFor=\"let tag of element?.tags\">{{tag?.title}}</small>\n                  </ng-container>\n\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              <!-- 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\" class=\"text-muted\">\n                  <div fxLayout>\n                    <a href=\"{{element.url}}\" target=\"_blank\" class=\"text-decoration-none text-muted clickable\">\n                      <mat-icon>download</mat-icon>\n                    </a>\n                    <mat-icon class=\"clickable\" *ngIf=\"isShowUpdateAction\"\n                      (click)=\"editEntityFile(element)\">edit</mat-icon>\n                    <mat-icon class=\"clickable\" *ngIf=\"isShowDeleteAction\"\n                      (click)=\"deleteEntityFile(element)\">delete</mat-icon>\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\n            <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isWorking\"></mat-progress-bar>\n          </mat-card-content>\n        </mat-card>\n        <ng-container *ngIf=\"isShowDragDropSection\">\n          <section fxFlex=\"30%\" *ngIf=\"!this.documentIds.length && !viewOnly && isShowCreateAction\">\n            <app-file-dropper [config]=\"fileConfig\" (fileChanged)=\"fileChanged($event)\" [fileArray]=\"fileList\">\n            </app-file-dropper>\n          </section>\n        </ng-container>\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\n<mat-card *ngIf=\"viewMode === 'timeline'\">\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      <span class=\"badge bg-primary\" *ngIf=\"total > 0\">{{ total }}</span>\n      <mat-icon color=\"primary\" class=\"cursor-pointer\" *ngIf=\"!viewOnly && isShowCreateAction\"\n        (click)=\"addEntityFile()\">\n        add\n      </mat-icon>\n    </div>\n  </mat-card-content>\n  <mat-card-content *ngIf=\"!this.documentIds.length && !viewOnly && isShowCreateAction\" class=\"mt-3\">\n    <app-file-dropper [config]=\"fileConfig\" (fileChanged)=\"fileChanged($event)\" [fileArray]=\"fileList\">\n    </app-file-dropper>\n  </mat-card-content>\n\n  <mat-card-content class=\"mt-3\">\n    <div *ngFor=\"let entityFile of entityFiles\" class=\"d-flex flex-column gap-0\">\n      <div class=\"d-flex flex-column gap-0\">\n        <div class=\"d-flex justify-content-between align-items-center gap-1\">\n          <p class=\"mb-0 fw-bold text-wrap\">{{ entityFile?.title | wrap:20 }}</p>\n          <span class=\"badge bg-dark\" *ngFor=\"let tag of entityFile?.tags\">\n            {{ tag?.title }}\n          </span>\n          <small class=\"text-dark\">{{ sizeOf(entityFile.file_size) }}</small>\n        </div>\n      </div>\n      <app-read-more [text]=\"entityFile?.details\" [maxLength]=\"50\"></app-read-more>\n      <div class=\"d-flex justify-content-between gap-2\">\n        <small class=\"text-secondary\" style=\"max-width: 70%\">\n          <i>Uploaded By {{ entityFile?.creator?.name }} {{ entityFile?.created_at | date: 'mediumDate'}}</i>\n        </small>\n        <div class=\"d-flex justify-content-end align-items-center gap-1\">\n          <a href=\"{{entityFile?.url}}\" target=\"_blank\" class=\"text-decoration-none text-secondary mt-2\">\n            <mat-icon>download</mat-icon>\n          </a>\n          <mat-icon *ngIf=\"isShowUpdateAction\" (click)=\"editEntityFile(entityFile)\"\n            class=\"cursor-pointer text-secondary\">\n            edit\n          </mat-icon>\n          <mat-icon *ngIf=\"isShowDeleteAction\" (click)=\"deleteEntityFile(entityFile)\"\n            class=\"cursor-pointer text-secondary\">\n            delete\n          </mat-icon>\n        </div>\n      </div>\n      <hr style=\"margin: 0.5rem 0\">\n    </div>\n    <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isWorking\"></mat-progress-bar>\n  </mat-card-content>\n</mat-card>", styles: ["th.mat-header-cell,td.mat-cell,td.mat-footer-cell{padding:2px}.entity-file-card{overflow-x:auto}.clickable:hover{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.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$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.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: "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: i6$1.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]  ", exportAs: ["matButton"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i8.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], 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$1.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: i11.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i9.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i9.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i9.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i9.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i9.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i9.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i9.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i9.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i9.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i9.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i4.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i4.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "component", type: i5.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { 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: "pipe", type: i2$1.DatePipe, name: "date" }, { kind: "pipe", type: WrapPipe, name: "wrap" }] }); }
 };
 EntityFilesViewAllComponent = __decorate([
     UntilDestroy()
@@ -5200,7 +5200,7 @@ EntityFilesViewAllComponent = __decorate([
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EntityFilesViewAllComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-entity-files-view-all', template: "<div *ngIf=\"viewMode === 'list'\">\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 *ngIf=\"updateRowForm.get('title').value || updateRowForm.get('title').value===0\" matSuffix\n                mat-icon-button style=\"color:red\" (click)=\"resetFieldValueOfRow('title', $event)\">\n                <mat-icon>close</mat-icon>\n              </button>\n              <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 *ngIf=\"updateRowForm.get('details').value || updateRowForm.get('details').value===0\" matSuffix\n                mat-icon-button style=\"color:red\" (click)=\"resetFieldValueOfRow('details', $event)\">\n                <mat-icon>close</mat-icon>\n              </button>\n              <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 *ngIf=\"updateRowForm.get('tag_ids').value || updateRowForm.get('tag_ids').value===0\" matSuffix\n                  mat-icon-button style=\"color:red\" (click)=\"resetFieldValueOfRow('tag_ids', $event)\">\n                  <mat-icon>close</mat-icon>\n                </button>\n                <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>\n          <mat-card-content>\n            <div fxLayoutAlign=\"start center\">\n              <mat-icon>\n                description\n              </mat-icon>\n              <h3 class=\"font-weight-bold mb-0\">\n                {{title}}s\n              </h3>\n              <mat-icon class=\"cursor-pointer\" *ngIf=\"!viewOnly && isShowCreateAction\" (click)=\"addEntityFile()\">\n                add\n              </mat-icon>\n              <span fxFlex></span>\n              <form [formGroup]=\"filterFormGroup\" fxLayout fxLayoutGap=\"0.3rem\">\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 *ngIf=\"filters.title\" matSuffix mat-icon-button (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              </form>\n            </div>\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                  {{element.title}}\n                  <ng-container *ngIf=\"useTechlifyTags\">\n                    <br>\n                    <small class=\"badge badge-secondary mr-1\" *ngFor=\"let tag of element?.tags\">{{tag?.title}}</small>\n                  </ng-container>\n\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              <!-- 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\" class=\"text-muted\">\n                  <div fxLayout>\n                    <a href=\"{{element.url}}\" target=\"_blank\" class=\"text-decoration-none text-muted clickable\">\n                      <mat-icon>download</mat-icon>\n                    </a>\n                    <mat-icon class=\"clickable\" *ngIf=\"isShowUpdateAction\"\n                      (click)=\"editEntityFile(element)\">edit</mat-icon>\n                    <mat-icon class=\"clickable\" *ngIf=\"isShowDeleteAction\"\n                      (click)=\"deleteEntityFile(element)\">delete</mat-icon>\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\n            <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isWorking\"></mat-progress-bar>\n          </mat-card-content>\n        </mat-card>\n        <ng-container *ngIf=\"isShowDragDropSection\">\n          <section fxFlex=\"30%\" *ngIf=\"!this.documentIds.length && !viewOnly && isShowCreateAction\">\n            <app-file-dropper [config]=\"fileConfig\" (fileChanged)=\"fileChanged($event)\" [fileArray]=\"fileList\">\n            </app-file-dropper>\n          </section>\n        </ng-container>\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\n<mat-card *ngIf=\"viewMode === 'timeline'\">\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      <span class=\"badge bg-primary\" *ngIf=\"total > 0\">{{ total }}</span>\n      <mat-icon color=\"primary\" class=\"cursor-pointer\" *ngIf=\"!viewOnly && isShowCreateAction\"\n        (click)=\"addEntityFile()\">\n        add\n      </mat-icon>\n    </div>\n  </mat-card-content>\n  <mat-card-content *ngIf=\"!this.documentIds.length && !viewOnly && isShowCreateAction\" class=\"mt-3\">\n    <app-file-dropper [config]=\"fileConfig\" (fileChanged)=\"fileChanged($event)\" [fileArray]=\"fileList\">\n    </app-file-dropper>\n  </mat-card-content>\n\n  <mat-card-content class=\"mt-3\">\n    <div *ngFor=\"let entityFile of entityFiles\" class=\"d-flex flex-column gap-0\">\n      <div class=\"d-flex flex-column gap-0\">\n        <div class=\"d-flex justify-content-between align-items-center gap-1\">\n          <p class=\"mb-0 fw-bold text-wrap\">{{ entityFile?.title | wrap:20 }}</p>\n          <span class=\"badge bg-dark\" *ngFor=\"let tag of entityFile?.tags\">\n            {{ tag?.title }}\n          </span>\n          <small class=\"text-dark\">{{ sizeOf(entityFile.file_size) }}</small>\n        </div>\n      </div>\n      <app-read-more [text]=\"entityFile?.details\" [maxLength]=\"50\"></app-read-more>\n      <div class=\"d-flex justify-content-between gap-2\">\n        <small class=\"text-secondary\" style=\"max-width: 70%\">\n          <i>Uploaded By {{ entityFile?.creator?.name }} {{ entityFile?.created_at | date: 'mediumDate'}}</i>\n        </small>\n        <div class=\"d-flex justify-content-end align-items-center gap-1\">\n          <a href=\"{{entityFile?.url}}\" target=\"_blank\" class=\"text-decoration-none text-secondary mt-2\">\n            <mat-icon>download</mat-icon>\n          </a>\n          <mat-icon *ngIf=\"isShowUpdateAction\" (click)=\"editEntityFile(entityFile)\"\n            class=\"cursor-pointer text-secondary\">\n            edit\n          </mat-icon>\n          <mat-icon *ngIf=\"isShowDeleteAction\" (click)=\"deleteEntityFile(entityFile)\"\n            class=\"cursor-pointer text-secondary\">\n            delete\n          </mat-icon>\n        </div>\n      </div>\n      <hr style=\"margin: 0.5rem 0\">\n    </div>\n    <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isWorking\"></mat-progress-bar>\n  </mat-card-content>\n</mat-card>", styles: ["th.mat-header-cell,td.mat-cell,td.mat-footer-cell{padding:2px}.entity-file-card{overflow-x:auto}.clickable:hover{cursor:pointer}\n"] }]
-        }], ctorParameters: () => [{ type: EntityFileService }, { type: i3.Location }, { type: AlertService }, { type: i1.MatDialog }, { type: i1$5.UntypedFormBuilder }, { type: ErrorHandlerService }, { type: CurrentUserService }], propDecorators: { entityId: [{
+        }], ctorParameters: () => [{ type: EntityFileService }, { type: i2$1.Location }, { type: AlertService }, { type: i1.MatDialog }, { type: i1$5.UntypedFormBuilder }, { type: ErrorHandlerService }, { type: CurrentUserService }], propDecorators: { entityId: [{
                 type: Input
             }], entityType: [{
                 type: Input
@@ -5318,7 +5318,7 @@ class NoteFormComponent {
         return this.formValidatorService.getErrorMessage(field, this.noteFormGroup, errorMessages$a);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NoteFormComponent, deps: [{ token: i1.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: i1$5.UntypedFormBuilder }, { token: FormValidatorService }, { token: AlertService }, { token: NoteService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: NoteFormComponent, selector: "app-note-form", ngImport: i0, template: "<form [formGroup]=\"noteFormGroup\" (ngSubmit)=\"submit()\">\n    <div fxLayout=\"column\" class=\"mat-typography\">\n        <div mat-dialog-title class=\"text-center\">\n            <div>{{data?.labelText}}</div>\n        </div>\n\n        <div mat-dialog-content fxLayout=\"column\">\n            <div fxLayout=\"row wrap\" fxLayoutAlign=\"space-between\">\n                <mat-form-field fxFlex=\"100%\">\n                    <textarea matInput formControlName=\"note\" placeholder=\"{{data?.labelText}}\" autocomplete=\"off\"\n                        required></textarea>\n                    <mat-error *ngIf=\"isFieldValid('note')\">{{\n                        getErrorMessage(\"note\")\n                        }}</mat-error>\n                </mat-form-field>\n\n                <div class=\"my-2\" fxLayout=\"row\" fxLayoutGap=\"30px\" fxLayoutAlign=\"end\" fxFlex=\"100%\">\n                    <button mat-raised-button type=\"button\" (click)=\"cancel()\">\n                        Cancel\n                    </button>\n                    <button mat-raised-button type=\"submit\" color=\"primary\">Save</button>\n                </div>\n            </div>\n        </div>\n    </div>\n</form>", styles: [""], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.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$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.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: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { 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.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i9$1.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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: NoteFormComponent, selector: "app-note-form", ngImport: i0, template: "<form [formGroup]=\"noteFormGroup\" (ngSubmit)=\"submit()\">\n    <div fxLayout=\"column\" class=\"mat-typography\">\n        <div mat-dialog-title class=\"text-center\">\n            <div>{{data?.labelText}}</div>\n        </div>\n\n        <div mat-dialog-content fxLayout=\"column\">\n            <div fxLayout=\"row wrap\" fxLayoutAlign=\"space-between\">\n                <mat-form-field fxFlex=\"100%\">\n                    <textarea matInput formControlName=\"note\" placeholder=\"{{data?.labelText}}\" autocomplete=\"off\"\n                        required></textarea>\n                    <mat-error *ngIf=\"isFieldValid('note')\">{{\n                        getErrorMessage(\"note\")\n                        }}</mat-error>\n                </mat-form-field>\n\n                <div class=\"my-2\" fxLayout=\"row\" fxLayoutGap=\"30px\" fxLayoutAlign=\"end\" fxFlex=\"100%\">\n                    <button mat-raised-button type=\"button\" (click)=\"cancel()\">\n                        Cancel\n                    </button>\n                    <button mat-raised-button type=\"submit\" color=\"primary\">Save</button>\n                </div>\n            </div>\n        </div>\n    </div>\n</form>", styles: [""], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.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$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.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: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { 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.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i9$1.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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NoteFormComponent, decorators: [{
             type: Component,
@@ -5382,7 +5382,7 @@ class CommentFormComponent {
     }
     ngOnDestroy() { }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CommentFormComponent, deps: [{ token: i1$5.UntypedFormBuilder }, { token: CredentialsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CommentFormComponent, selector: "app-comment-form", inputs: { commentData: "commentData" }, outputs: { action: "action" }, ngImport: i0, template: "<form (ngSubmit)=\"submit()\" [formGroup]=\"commentFormGroup\">\n  <div fxLayout=\"column\" class=\"my-2\" [ngClass]=\"{ 'border border-primary shadow rounded ': view}\">\n    <div *ngIf=\"!view\" fxLayout=\"column\">\n      <mat-form-field appearance=\"outline\" style=\"background-color:white;\">\n        <mat-label>Comment</mat-label>\n        <textarea matInput rows=\"5\" placeholder=\"Add a comment...\" formControlName=\"note\" autocomplete=\"off\"></textarea>\n      </mat-form-field>\n\n      <div fxLayout fxLayoutGap=\"1rem\" class=\"mt-2\">\n        <span fxFlex></span>\n        <button *ngIf=\"_commentData\" mat-button type=\"button\" (click)=\"view = !view\">\n          Cancel\n        </button>\n        <button mat-raised-button color=\"primary\" type=\"submit\">\n          {{ _commentData ? \"Update\" : \"Post comment\" }}\n        </button>\n      </div>\n    </div>\n\n    <div fxLayout=\"column\" *ngIf=\"view\" class=\"p-2 m-2\">\n      <div fxLayout=\"row wrap\" fxLayoutGap=\".5rem\">\n        <div fxFlex=\"20%\" fxLayoutAlign=\"start\">\n          <button mat-icon-button type=\"button\" style=\"color:grey\">\n            <mat-icon style=\"font-size:60px\">account_circle</mat-icon>\n          </button>\n        </div>\n        <div fxFlex=\"75%\">\n          <div fxLayout=\"column\" fxLayoutGap=\".5rem\">\n            <div class=\"font-weight-bold\">{{ _commentData?.creator?.name }}</div>\n            <div class=\"text-muted\">{{ _commentData.updated_at | date:'medium' }}</div>\n          </div>\n        </div>\n      </div>\n      <app-read-more class=\"mt-2\" [text]=\"_commentData.note\"></app-read-more>\n      <div fxLayout class=\"mt-1\" fxLayoutGap=\"1rem\" *ngIf=\"isLoggedIn && currentUser.id === _commentData.creator_id\">\n        <a href=\"javascript:;\" (click)=\"editComment()\">\n          Edit\n        </a>\n        <a href=\"javascript:;\" (click)=\"deleteComment()\">\n          Delete\n        </a>\n      </div>\n    </div>\n  </div>\n</form>", styles: [":host ::ng-deep .mat-form-field-wrapper{padding-bottom:0!important;margin:0!important}\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.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.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$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.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: "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: "component", type: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", 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$1.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: ReadMoreComponent, selector: "app-read-more", inputs: ["text", "maxLength"] }, { kind: "pipe", type: i3.DatePipe, name: "date" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CommentFormComponent, selector: "app-comment-form", inputs: { commentData: "commentData" }, outputs: { action: "action" }, ngImport: i0, template: "<form (ngSubmit)=\"submit()\" [formGroup]=\"commentFormGroup\">\n  <div fxLayout=\"column\" class=\"my-2\" [ngClass]=\"{ 'border border-primary shadow rounded ': view}\">\n    <div *ngIf=\"!view\" fxLayout=\"column\">\n      <mat-form-field appearance=\"outline\" style=\"background-color:white;\">\n        <mat-label>Comment</mat-label>\n        <textarea matInput rows=\"5\" placeholder=\"Add a comment...\" formControlName=\"note\" autocomplete=\"off\"></textarea>\n      </mat-form-field>\n\n      <div fxLayout fxLayoutGap=\"1rem\" class=\"mt-2\">\n        <span fxFlex></span>\n        <button *ngIf=\"_commentData\" mat-button type=\"button\" (click)=\"view = !view\">\n          Cancel\n        </button>\n        <button mat-raised-button color=\"primary\" type=\"submit\">\n          {{ _commentData ? \"Update\" : \"Post comment\" }}\n        </button>\n      </div>\n    </div>\n\n    <div fxLayout=\"column\" *ngIf=\"view\" class=\"p-2 m-2\">\n      <div fxLayout=\"row wrap\" fxLayoutGap=\".5rem\">\n        <div fxFlex=\"20%\" fxLayoutAlign=\"start\">\n          <button mat-icon-button type=\"button\" style=\"color:grey\">\n            <mat-icon style=\"font-size:60px\">account_circle</mat-icon>\n          </button>\n        </div>\n        <div fxFlex=\"75%\">\n          <div fxLayout=\"column\" fxLayoutGap=\".5rem\">\n            <div class=\"font-weight-bold\">{{ _commentData?.creator?.name }}</div>\n            <div class=\"text-muted\">{{ _commentData.updated_at | date:'medium' }}</div>\n          </div>\n        </div>\n      </div>\n      <app-read-more class=\"mt-2\" [text]=\"_commentData.note\"></app-read-more>\n      <div fxLayout class=\"mt-1\" fxLayoutGap=\"1rem\" *ngIf=\"isLoggedIn && currentUser.id === _commentData.creator_id\">\n        <a href=\"javascript:;\" (click)=\"editComment()\">\n          Edit\n        </a>\n        <a href=\"javascript:;\" (click)=\"deleteComment()\">\n          Delete\n        </a>\n      </div>\n    </div>\n  </div>\n</form>", styles: [":host ::ng-deep .mat-form-field-wrapper{padding-bottom:0!important;margin:0!important}\n"], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.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$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.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: "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: "component", type: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", 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$1.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: ReadMoreComponent, selector: "app-read-more", inputs: ["text", "maxLength"] }, { kind: "pipe", type: i2$1.DatePipe, name: "date" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CommentFormComponent, decorators: [{
             type: Component,
@@ -5530,7 +5530,7 @@ class NoteListComponent extends TechlifyListingControllerInterface {
         }).catch(() => (this.isSaving = false));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NoteListComponent, deps: [{ token: NoteService }, { token: i1.MatDialog }, { token: AlertService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: NoteListComponent, selector: "app-note-list", inputs: { relatedModelId: "relatedModelId", modelType: "modelType", readonly: "readonly", labelText: "labelText", commentsView: "commentsView", viewMode: "viewMode" }, usesInheritance: true, ngImport: i0, template: "<div fxLayout=\"column\" fxLayoutGap=\"1.5rem\" *ngIf=\"!commentsView\">\n\n  <ng-container *ngIf=\"viewMode === 'list'\">\n    <div class=\"d-flex align-items-center\">\n      <h5 class=\"m-0\">{{ labelText }}s</h5>\n      <app-techlify-icon name=\"add\" class=\"clickable d-print-none ml-1\" matTooltip=\"Add\"\n        (click)=\"addNote()\"></app-techlify-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 text-secondary\">\n            <div fxLayoutAlign=\"start center\">\n              <app-techlify-icon name=\"edit\" class=\"clickable\" matTooltip=\"Update\"\n                (click)=\"editNote(note)\"></app-techlify-icon>\n              <app-techlify-icon name=\"delete\" class=\"clickable ml-1\" matTooltip=\"Delete\"\n                (click)=\"deleteNote(note)\"></app-techlify-icon>\n            </div>\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  </ng-container>\n\n  <ng-container *ngIf=\"viewMode === 'timeline'\">\n    <mat-card>\n      <mat-card-content class=\"d-flex justify-content-start align-items-center gap-2\">\n        <h5 class=\"mb-0\">Notes</h5>\n        <span class=\"badge badge-info ml-1\" *ngIf=\"total\">{{ total }}</span>\n      </mat-card-content>\n      <mat-card-content class=\"mt-2\">\n        <form (ngSubmit)=\"saveNote()\">\n          <mat-form-field class=\"w-100\" appearance=\"outline\">\n            <input [(ngModel)]=\"note\" [ngModelOptions]=\"{standalone: true}\" type=\"text\" matInput\n              placeholder=\"Write your notes here...\" [disabled]=\"isSaving\">\n            <mat-icon *ngIf=\"!isSaving\" matSuffix class=\"cursor-pointer\" (click)=\"saveNote()\">send</mat-icon>\n            <mat-progress-spinner matSuffix mode=\"indeterminate\" diameter=\"20\" *ngIf=\"isSaving\"></mat-progress-spinner>\n          </mat-form-field>\n        </form>\n      </mat-card-content>\n      <mat-card-content>\n        <div *ngFor=\"let note of models;last as isLast\">\n          <div class=\"d-flex justify-content-between align-items-center gap-2\">\n            <div class=\"d-flex flex-column\">\n              <p class=\"mb-0\">{{ note?.creator?.name }}</p>\n              <small class=\"text-secondary\">On {{ note?.created_at | date: 'medium' }}</small>\n            </div>\n            <div class=\"d-flex justify-content-end align-items-center gap-1\">\n              <app-techlify-icon name=\"edit\" class=\"clickable\" matTooltip=\"Update\"\n                (click)=\"editNote(note)\"></app-techlify-icon>\n              <app-techlify-icon name=\"delete\" class=\"clickable\" matTooltip=\"Delete\"\n                (click)=\"deleteNote(note)\"></app-techlify-icon>\n            </div>\n          </div>\n          <div>{{ note?.note }}</div>\n          <mat-divider class=\"my-2\" *ngIf=\"!isLast\"></mat-divider>\n        </div>\n        <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isWorking\"></mat-progress-bar>\n      </mat-card-content>\n    </mat-card>\n  </ng-container>\n\n</div>\n\n<div fxLayout=\"column\" fxLayoutGap=\"1.5rem\" *ngIf=\"commentsView\">\n  <div fxLayout fxLayoutAlign=\"center center\" fxLayoutGap=\"1rem\">\n    <h5 class=\"m-0\">{{ labelText }}s</h5>\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>", 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: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.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$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i6$1.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: i7$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { 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$1.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: i11$2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i9.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i9.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i9.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i9.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i9.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i9.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i9.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i9.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i9.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i9.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i5$2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i5.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$5.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: TechlifyIconComponent, selector: "app-techlify-icon", inputs: ["name", "size"] }, { kind: "component", type: CommentFormComponent, selector: "app-comment-form", inputs: ["commentData"], outputs: ["action"] }, { kind: "pipe", type: i3.DatePipe, name: "date" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: NoteListComponent, selector: "app-note-list", inputs: { relatedModelId: "relatedModelId", modelType: "modelType", readonly: "readonly", labelText: "labelText", commentsView: "commentsView", viewMode: "viewMode" }, usesInheritance: true, ngImport: i0, template: "<div fxLayout=\"column\" fxLayoutGap=\"1.5rem\" *ngIf=\"!commentsView\">\n\n  <ng-container *ngIf=\"viewMode === 'list'\">\n    <div class=\"d-flex align-items-center\">\n      <h5 class=\"m-0\">{{ labelText }}s</h5>\n      <app-techlify-icon name=\"add\" class=\"clickable d-print-none ml-1\" matTooltip=\"Add\"\n        (click)=\"addNote()\"></app-techlify-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 text-secondary\">\n            <div fxLayoutAlign=\"start center\">\n              <app-techlify-icon name=\"edit\" class=\"clickable\" matTooltip=\"Update\"\n                (click)=\"editNote(note)\"></app-techlify-icon>\n              <app-techlify-icon name=\"delete\" class=\"clickable ml-1\" matTooltip=\"Delete\"\n                (click)=\"deleteNote(note)\"></app-techlify-icon>\n            </div>\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  </ng-container>\n\n  <ng-container *ngIf=\"viewMode === 'timeline'\">\n    <mat-card>\n      <mat-card-content class=\"d-flex justify-content-start align-items-center gap-2\">\n        <h5 class=\"mb-0\">Notes</h5>\n        <span class=\"badge badge-info ml-1\" *ngIf=\"total\">{{ total }}</span>\n      </mat-card-content>\n      <mat-card-content class=\"mt-2\">\n        <form (ngSubmit)=\"saveNote()\">\n          <mat-form-field class=\"w-100\" appearance=\"outline\">\n            <input [(ngModel)]=\"note\" [ngModelOptions]=\"{standalone: true}\" type=\"text\" matInput\n              placeholder=\"Write your notes here...\" [disabled]=\"isSaving\">\n            <mat-icon *ngIf=\"!isSaving\" matSuffix class=\"cursor-pointer\" (click)=\"saveNote()\">send</mat-icon>\n            <mat-progress-spinner matSuffix mode=\"indeterminate\" diameter=\"20\" *ngIf=\"isSaving\"></mat-progress-spinner>\n          </mat-form-field>\n        </form>\n      </mat-card-content>\n      <mat-card-content>\n        <div *ngFor=\"let note of models;last as isLast\">\n          <div class=\"d-flex justify-content-between align-items-center gap-2\">\n            <div class=\"d-flex flex-column\">\n              <p class=\"mb-0\">{{ note?.creator?.name }}</p>\n              <small class=\"text-secondary\">On {{ note?.created_at | date: 'medium' }}</small>\n            </div>\n            <div class=\"d-flex justify-content-end align-items-center gap-1\">\n              <app-techlify-icon name=\"edit\" class=\"clickable\" matTooltip=\"Update\"\n                (click)=\"editNote(note)\"></app-techlify-icon>\n              <app-techlify-icon name=\"delete\" class=\"clickable\" matTooltip=\"Delete\"\n                (click)=\"deleteNote(note)\"></app-techlify-icon>\n            </div>\n          </div>\n          <div>{{ note?.note }}</div>\n          <mat-divider class=\"my-2\" *ngIf=\"!isLast\"></mat-divider>\n        </div>\n        <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isWorking\"></mat-progress-bar>\n      </mat-card-content>\n    </mat-card>\n  </ng-container>\n\n</div>\n\n<div fxLayout=\"column\" fxLayoutGap=\"1.5rem\" *ngIf=\"commentsView\">\n  <div fxLayout fxLayoutAlign=\"center center\" fxLayoutGap=\"1rem\">\n    <h5 class=\"m-0\">{{ labelText }}s</h5>\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>", styles: [".scroll-container{max-height:400px;overflow-y:auto}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.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$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i6$1.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: i7$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { 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$1.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: i11$2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i9.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i9.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i9.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i9.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i9.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i9.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i9.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i9.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i9.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i9.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i5$2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i5.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$5.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: TechlifyIconComponent, selector: "app-techlify-icon", inputs: ["name", "size"] }, { kind: "component", type: CommentFormComponent, selector: "app-comment-form", inputs: ["commentData"], outputs: ["action"] }, { kind: "pipe", type: i2$1.DatePipe, name: "date" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NoteListComponent, decorators: [{
             type: Component,
@@ -5648,7 +5648,7 @@ class NumberSelector {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NumberSelector, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: NumberSelector, selector: "number-selector", inputs: { start_value: "start_value", end_value: "end_value", selectedValue: "selectedValue" }, outputs: { selectedValueChange: "selectedValueChange" }, ngImport: i0, template: "<div class=\"number-selector-wrapper\">\n    <select name=\"selectedValue\" [(ngModel)]=\"selectedValue\" class=\"form-control\" (change)=\"numChanged()\">\n        <option value=\"\">-- Student Status --</option>\n        <option *ngFor=\"let start_value of items;\" value=\"{{start_value}}\">{{start_value}}</option>\n    </select>\n</div>", dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: NumberSelector, selector: "number-selector", inputs: { start_value: "start_value", end_value: "end_value", selectedValue: "selectedValue" }, outputs: { selectedValueChange: "selectedValueChange" }, ngImport: i0, template: "<div class=\"number-selector-wrapper\">\n    <select name=\"selectedValue\" [(ngModel)]=\"selectedValue\" class=\"form-control\" (change)=\"numChanged()\">\n        <option value=\"\">-- Student Status --</option>\n        <option *ngFor=\"let start_value of items;\" value=\"{{start_value}}\">{{start_value}}</option>\n    </select>\n</div>", dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NumberSelector, decorators: [{
             type: Component,
@@ -6268,7 +6268,7 @@ class TechlifyNotificationForUserComponent extends TechlifyListingControllerInte
         // Until destroyed uses it
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TechlifyNotificationForUserComponent, deps: [{ token: TechlifyNotificationTypeService }, { token: TechlifyNotificationSubscriptionService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TechlifyNotificationForUserComponent, selector: "app-techlify-notification-for-user", usesInheritance: true, ngImport: i0, template: "<div fxLayout=\"column\" class=\"container my-4\">\n    <div>\n        <mat-card appearance=\"outlined\">\n            <h3>My Notification Preferences</h3>\n        </mat-card>\n        <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isWorking\"></mat-progress-bar>\n        <mat-card appearance=\"outlined\" class=\"mt-4\">\n            <mat-list fxLayout=\"column\">\n                <mat-list-item fxLayout>\n                    <h5 fxFlex=\"33%\" class=\"p-1\">Notification</h5>\n                    <h5 fxFlex class=\"p-1\">Email</h5>\n                    <h5 fxFlex class=\"p-1\">Mobile</h5>\n                    <h5 fxFlex class=\"p-1\">In-App</h5>\n                </mat-list-item>\n                <ng-container *ngFor=\"let model of models|keyvalue\">\n                    <mat-list-item>\n                        <h5 class=\"p-1\">{{model?.key}}</h5>\n                    </mat-list-item>\n                    <mat-list-item *ngFor=\"let notificationType of model.value\" fxLayout=\"start center\">\n                        <div fxFlex=\"33%\" class=\"p-1\">\n                            <div>{{notificationType?.title}} </div>\n                            <div style=\"text-wrap: auto; line-height: normal;\">\n                                <small class=\"text-secondary\"> {{notificationType?.description}} </small>\n                            </div>\n                        </div>\n                        <div fxFlex class=\"p-1\">\n                            <mat-slide-toggle\n                                (change)=\"toggleSubscription(notificationType,'is_subscribed_email',$event)\"\n                                [checked]=\"notificationType?.is_subscribed_email\"\n                                [disabled]=\"(!notificationType.is_editable) || notificationType.isWorking || notificationType?.is_subscribed_email_default == null\">\n                            </mat-slide-toggle>\n                        </div>\n                        <div fxFlex class=\"p-1\">\n                            <mat-slide-toggle\n                                (change)=\"toggleSubscription(notificationType,'is_subscribed_mobile',$event)\"\n                                [checked]=\"notificationType?.is_subscribed_mobile\"\n                                [disabled]=\"(!notificationType.is_editable) || notificationType.isWorking || notificationType?.is_subscribed_mobile_default == null\">\n                            </mat-slide-toggle>\n                        </div>\n                        <div fxFlex class=\"p-1\">\n                            <mat-slide-toggle\n                                (change)=\"toggleSubscription(notificationType,'is_subscribed_in_app',$event)\"\n                                [checked]=\"notificationType?.is_subscribed_in_app\"\n                                [disabled]=\"(!notificationType.is_editable) || notificationType.isWorking || notificationType?.is_subscribed_in_app_default == null\">\n                            </mat-slide-toggle>\n                        </div>\n                    </mat-list-item>\n                    <mat-divider></mat-divider>\n                </ng-container>\n            </mat-list>\n        </mat-card>\n    </div>\n\n</div>", styles: [":host ::ng-deep .mdc-list-item.mdc-list-item--with-one-line{height:auto!important}\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: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: i5$2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i8$4.MatList, selector: "mat-list", exportAs: ["matList"] }, { kind: "component", type: i8$4.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "component", type: i5.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i8$5.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { 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.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: "pipe", type: i3.KeyValuePipe, name: "keyvalue" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TechlifyNotificationForUserComponent, selector: "app-techlify-notification-for-user", usesInheritance: true, ngImport: i0, template: "<div fxLayout=\"column\" class=\"container my-4\">\n    <div>\n        <mat-card appearance=\"outlined\">\n            <h3>My Notification Preferences</h3>\n        </mat-card>\n        <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isWorking\"></mat-progress-bar>\n        <mat-card appearance=\"outlined\" class=\"mt-4\">\n            <mat-list fxLayout=\"column\">\n                <mat-list-item fxLayout>\n                    <h5 fxFlex=\"33%\" class=\"p-1\">Notification</h5>\n                    <h5 fxFlex class=\"p-1\">Email</h5>\n                    <h5 fxFlex class=\"p-1\">Mobile</h5>\n                    <h5 fxFlex class=\"p-1\">In-App</h5>\n                </mat-list-item>\n                <ng-container *ngFor=\"let model of models|keyvalue\">\n                    <mat-list-item>\n                        <h5 class=\"p-1\">{{model?.key}}</h5>\n                    </mat-list-item>\n                    <mat-list-item *ngFor=\"let notificationType of model.value\" fxLayout=\"start center\">\n                        <div fxFlex=\"33%\" class=\"p-1\">\n                            <div>{{notificationType?.title}} </div>\n                            <div style=\"text-wrap: auto; line-height: normal;\">\n                                <small class=\"text-secondary\"> {{notificationType?.description}} </small>\n                            </div>\n                        </div>\n                        <div fxFlex class=\"p-1\">\n                            <mat-slide-toggle\n                                (change)=\"toggleSubscription(notificationType,'is_subscribed_email',$event)\"\n                                [checked]=\"notificationType?.is_subscribed_email\"\n                                [disabled]=\"(!notificationType.is_editable) || notificationType.isWorking || notificationType?.is_subscribed_email_default == null\">\n                            </mat-slide-toggle>\n                        </div>\n                        <div fxFlex class=\"p-1\">\n                            <mat-slide-toggle\n                                (change)=\"toggleSubscription(notificationType,'is_subscribed_mobile',$event)\"\n                                [checked]=\"notificationType?.is_subscribed_mobile\"\n                                [disabled]=\"(!notificationType.is_editable) || notificationType.isWorking || notificationType?.is_subscribed_mobile_default == null\">\n                            </mat-slide-toggle>\n                        </div>\n                        <div fxFlex class=\"p-1\">\n                            <mat-slide-toggle\n                                (change)=\"toggleSubscription(notificationType,'is_subscribed_in_app',$event)\"\n                                [checked]=\"notificationType?.is_subscribed_in_app\"\n                                [disabled]=\"(!notificationType.is_editable) || notificationType.isWorking || notificationType?.is_subscribed_in_app_default == null\">\n                            </mat-slide-toggle>\n                        </div>\n                    </mat-list-item>\n                    <mat-divider></mat-divider>\n                </ng-container>\n            </mat-list>\n        </mat-card>\n    </div>\n\n</div>", styles: [":host ::ng-deep .mdc-list-item.mdc-list-item--with-one-line{height:auto!important}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: i5$2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i8$4.MatList, selector: "mat-list", exportAs: ["matList"] }, { kind: "component", type: i8$4.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "component", type: i5.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i8$5.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { 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.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: "pipe", type: i2$1.KeyValuePipe, name: "keyvalue" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TechlifyNotificationForUserComponent, decorators: [{
             type: Component,
@@ -6475,7 +6475,7 @@ let EmailSubscriptionUserFormComponent = class EmailSubscriptionUserFormComponen
         // Needed for automatic unsubscribe with untilDestroyed
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EmailSubscriptionUserFormComponent, deps: [{ token: i1$5.UntypedFormBuilder }, { token: FormValidatorService }, { token: AlertService }, { token: i1.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: HttpService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: EmailSubscriptionUserFormComponent, selector: "app-email-subscription-user-form", ngImport: i0, template: "<form [formGroup]=\"esUserFormGroup\" (ngSubmit)=\"submit()\" class=\"mat-typography\">\n    <div fxLayout=\"column\">\n        <div mat-dialog-title class=\"text-center\">\n            <div>Email Subscription User</div>\n        </div>\n\n        <div mat-dialog-content fxLayout=\"column\">\n            <div fxLayout=\"row wrap\" fxLayoutAlign=\"space-between center\">\n\n                <mat-form-field fxFlex=\"48%\" class=\"mt-1\">\n                    <mat-label>User</mat-label>\n                    <app-searchable-selector formControlName=\"user_id\" apiUrl=\"api/users\" titleField=\"name\" required\n                        [selectedValue]=\"selectedUser\">\n                    </app-searchable-selector>\n                    <mat-error *ngIf=\"isFieldValid('user_id')\">{{getErrorMessage('user_id')}}</mat-error>\n                </mat-form-field>\n\n                <mat-form-field fxFlex=\"48%\" class=\"mt-1\">\n                    <mat-label>Email Type</mat-label>\n                    <app-searchable-selector formControlName=\"email_type_id\" apiUrl=\"api/email-subscription-types\"\n                        required [selectedValue]=\"selectedType\">\n                    </app-searchable-selector>\n                    <mat-error *ngIf=\"isFieldValid('email_type_id')\">{{getErrorMessage('email_type_id')}}</mat-error>\n                </mat-form-field>\n\n                <div class=\"my-2\" fxLayout=\"row\" fxLayoutGap=\"30px\" fxLayoutAlign=\"end\" fxFlex=\"100%\">\n                    <button mat-raised-button type=\"button\" (click)=\"cancel()\">Cancel</button>\n                    <button mat-raised-button type=\"submit\" color=\"primary\" [disabled]=\"isSubmitLoading\">\n                        <app-loader class=\"inline-loader\" [isLoading]=\"isSubmitLoading\"></app-loader>\n                        Save\n                    </button>\n                </div>\n            </div>\n        </div>\n\n\n    </div>\n</form>", 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]  ", exportAs: ["matButton"] }, { 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: 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: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { 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", "panelWidth", "focusSearchOnOpen", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange"] }, { kind: "component", type: LoaderComponent, selector: "app-loader", inputs: ["isLoading", "size", "message"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: EmailSubscriptionUserFormComponent, selector: "app-email-subscription-user-form", ngImport: i0, template: "<form [formGroup]=\"esUserFormGroup\" (ngSubmit)=\"submit()\" class=\"mat-typography\">\n    <div fxLayout=\"column\">\n        <div mat-dialog-title class=\"text-center\">\n            <div>Email Subscription User</div>\n        </div>\n\n        <div mat-dialog-content fxLayout=\"column\">\n            <div fxLayout=\"row wrap\" fxLayoutAlign=\"space-between center\">\n\n                <mat-form-field fxFlex=\"48%\" class=\"mt-1\">\n                    <mat-label>User</mat-label>\n                    <app-searchable-selector formControlName=\"user_id\" apiUrl=\"api/users\" titleField=\"name\" required\n                        [selectedValue]=\"selectedUser\">\n                    </app-searchable-selector>\n                    <mat-error *ngIf=\"isFieldValid('user_id')\">{{getErrorMessage('user_id')}}</mat-error>\n                </mat-form-field>\n\n                <mat-form-field fxFlex=\"48%\" class=\"mt-1\">\n                    <mat-label>Email Type</mat-label>\n                    <app-searchable-selector formControlName=\"email_type_id\" apiUrl=\"api/email-subscription-types\"\n                        required [selectedValue]=\"selectedType\">\n                    </app-searchable-selector>\n                    <mat-error *ngIf=\"isFieldValid('email_type_id')\">{{getErrorMessage('email_type_id')}}</mat-error>\n                </mat-form-field>\n\n                <div class=\"my-2\" fxLayout=\"row\" fxLayoutGap=\"30px\" fxLayoutAlign=\"end\" fxFlex=\"100%\">\n                    <button mat-raised-button type=\"button\" (click)=\"cancel()\">Cancel</button>\n                    <button mat-raised-button type=\"submit\" color=\"primary\" [disabled]=\"isSubmitLoading\">\n                        <app-loader class=\"inline-loader\" [isLoading]=\"isSubmitLoading\"></app-loader>\n                        Save\n                    </button>\n                </div>\n            </div>\n        </div>\n\n\n    </div>\n</form>", styles: [""], dependencies: [{ kind: "directive", type: i2$1.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]  ", exportAs: ["matButton"] }, { 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: 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: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { 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", "panelWidth", "focusSearchOnOpen", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange"] }, { kind: "component", type: LoaderComponent, selector: "app-loader", inputs: ["isLoading", "size", "message"] }] }); }
 };
 EmailSubscriptionUserFormComponent = __decorate([
     UntilDestroy()
@@ -6548,7 +6548,7 @@ let EmailSubscriptionUserListFilterComponent = class EmailSubscriptionUserListFi
     ngOnDestroy() {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EmailSubscriptionUserListFilterComponent, deps: [{ token: i1$5.UntypedFormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: EmailSubscriptionUserListFilterComponent, selector: "app-email-subscription-user-list-filter", outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<form [formGroup]=\"esUserFilterForm\" fxLayout=\"row wrap\" fxLayoutGap=\"1rem\" fxLayoutAlign=\"start center\">\n    <mat-form-field class=\"ml-3\">\n        <mat-label>User</mat-label>\n        <app-searchable-selector formControlName=\"user_id\" apiUrl=\"api/users\" titleField=\"name\">\n        </app-searchable-selector>\n        <button *ngIf=\"getFieldValue('user_id')\" matSuffix mat-icon-button (click)=\"resetFieldValue('user_id')\">\n            <mat-icon>close</mat-icon>\n        </button>\n    </mat-form-field>\n\n    <mat-form-field class=\"ml-3\">\n        <mat-label>Email Type</mat-label>\n        <app-searchable-selector formControlName=\"email_type_id\" apiUrl=\"api/email-subscription-types\">\n        </app-searchable-selector>\n        <button *ngIf=\"getFieldValue('email_type_id')\" matSuffix mat-icon-button\n            (click)=\"resetFieldValue('email_type_id')\">\n            <mat-icon>close</mat-icon>\n        </button>\n    </mat-form-field>\n</form>", styles: [""], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", 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.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: 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: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { 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", "panelWidth", "focusSearchOnOpen", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: EmailSubscriptionUserListFilterComponent, selector: "app-email-subscription-user-list-filter", outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<form [formGroup]=\"esUserFilterForm\" fxLayout=\"row wrap\" fxLayoutGap=\"1rem\" fxLayoutAlign=\"start center\">\n    <mat-form-field class=\"ml-3\">\n        <mat-label>User</mat-label>\n        <app-searchable-selector formControlName=\"user_id\" apiUrl=\"api/users\" titleField=\"name\">\n        </app-searchable-selector>\n        <button *ngIf=\"getFieldValue('user_id')\" matSuffix mat-icon-button (click)=\"resetFieldValue('user_id')\">\n            <mat-icon>close</mat-icon>\n        </button>\n    </mat-form-field>\n\n    <mat-form-field class=\"ml-3\">\n        <mat-label>Email Type</mat-label>\n        <app-searchable-selector formControlName=\"email_type_id\" apiUrl=\"api/email-subscription-types\">\n        </app-searchable-selector>\n        <button *ngIf=\"getFieldValue('email_type_id')\" matSuffix mat-icon-button\n            (click)=\"resetFieldValue('email_type_id')\">\n            <mat-icon>close</mat-icon>\n        </button>\n    </mat-form-field>\n</form>", styles: [""], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", 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.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: 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: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { 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", "panelWidth", "focusSearchOnOpen", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange"] }] }); }
 };
 EmailSubscriptionUserListFilterComponent = __decorate([
     UntilDestroy()
@@ -6687,7 +6687,7 @@ let EmailSubscriptionUserListComponent = class EmailSubscriptionUserListComponen
         //Until destroyed uses it
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EmailSubscriptionUserListComponent, deps: [{ token: i1.MatDialog }, { token: HttpService }, { token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: EmailSubscriptionUserListComponent, selector: "app-email-subscription-user-list", viewQueries: [{ propertyName: "sort", first: true, predicate: MatSort, descendants: true, static: true }], ngImport: i0, template: "<div class=\"mat-typography m-4\">\n    <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\n        <app-email-subscription-user-list-filter (valueChange)=\"filterChange($event)\">\n        </app-email-subscription-user-list-filter>\n        <div class=\"ml-2\">\n            <button mat-raised-button color=\"primary\" type=\"button\" (click)=\"addEmailSubscriptionUser()\">+\n                User Subscription</button>\n        </div>\n        <span fxFlex></span>\n        <mat-form-field appearance=\"outline\" class=\"no-padding\">\n            <mat-label>Columns</mat-label>\n            <mat-select [formControl]=\"displayColumns\" multiple (selectionChange)=\"columnsChange()\">\n                <mat-option *ngFor=\"let column of availableDisplayColumns\" [value]=\"column.value\">{{column.name}}\n                </mat-option>\n            </mat-select>\n        </mat-form-field>\n    </div>\n\n\n\n    <section>\n        <div class=\"scroll-container\" infiniteScroll [infiniteScrollDistance]=\"2\" [infiniteScrollThrottle]=\"50\"\n            (scrolled)=\"onScroll()\" [scrollWindow]=\"false\">\n            <table mat-table [dataSource]=\"esUserList\" matSort class=\"w-100 mt-1\" multiTemplateDataRows\n                id=\"email-subscription-user-table\">\n\n                <!-- Index Column -->\n                <ng-container matColumnDef=\"index\">\n                    <th mat-header-cell *matHeaderCellDef> # </th>\n                    <td mat-cell *matCellDef=\"let esUser; let i = dataIndex\"> {{ i+1 }} </td>\n                </ng-container>\n                <ng-container matColumnDef=\"user.name\">\n                    <th mat-header-cell *matHeaderCellDef mat-sort-header> User </th>\n                    <td mat-cell *matCellDef=\"let esUser;\"> {{ esUser?.user?.name }} </td>\n                </ng-container>\n\n                <ng-container matColumnDef=\"email_type.title\">\n                    <th mat-header-cell *matHeaderCellDef> Email Type </th>\n                    <td mat-cell *matCellDef=\"let esUser;\"> {{ esUser?.email_type?.title }} </td>\n                </ng-container>\n\n                <ng-container matColumnDef=\"creator.name\">\n                    <th mat-header-cell *matHeaderCellDef mat-sort-header> Creator</th>\n                    <td mat-cell *matCellDef=\"let esUser;\">\n                        {{esUser?.creator?.name }}\n                    </td>\n                </ng-container>\n\n                <ng-container matColumnDef=\"created_at\">\n                    <th mat-header-cell *matHeaderCellDef mat-sort-header> Created On</th>\n                    <td mat-cell *matCellDef=\"let esUser;\">\n                        {{esUser?.created_at | date:'medium' }}\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 esUser\">\n                        <button type=\"button\" mat-icon-button (click)=\"deleteEmailSubscriptionUser($event,esUser)\">\n                            <mat-icon>delete</mat-icon>\n                        </button>\n                        <button type=\"button\" mat-icon-button (click)=\"editEmailSubscriptionUser($event,esUser)\">\n                            <mat-icon>edit</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    </section>\n</div>", styles: [".scroll-container{max-height:800px;overflow-y:auto}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6$1.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]  ", exportAs: ["matButton"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", 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: "component", type: i6$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i9$2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i11.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i11.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i9.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i9.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i9.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i9.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i9.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i9.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i9.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i9.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i9.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i9.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { 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.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: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: EmailSubscriptionUserListFilterComponent, selector: "app-email-subscription-user-list-filter", outputs: ["valueChange"] }, { kind: "pipe", type: i3.DatePipe, name: "date" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: EmailSubscriptionUserListComponent, selector: "app-email-subscription-user-list", viewQueries: [{ propertyName: "sort", first: true, predicate: MatSort, descendants: true, static: true }], ngImport: i0, template: "<div class=\"mat-typography m-4\">\n    <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\n        <app-email-subscription-user-list-filter (valueChange)=\"filterChange($event)\">\n        </app-email-subscription-user-list-filter>\n        <div class=\"ml-2\">\n            <button mat-raised-button color=\"primary\" type=\"button\" (click)=\"addEmailSubscriptionUser()\">+\n                User Subscription</button>\n        </div>\n        <span fxFlex></span>\n        <mat-form-field appearance=\"outline\" class=\"no-padding\">\n            <mat-label>Columns</mat-label>\n            <mat-select [formControl]=\"displayColumns\" multiple (selectionChange)=\"columnsChange()\">\n                <mat-option *ngFor=\"let column of availableDisplayColumns\" [value]=\"column.value\">{{column.name}}\n                </mat-option>\n            </mat-select>\n        </mat-form-field>\n    </div>\n\n\n\n    <section>\n        <div class=\"scroll-container\" infiniteScroll [infiniteScrollDistance]=\"2\" [infiniteScrollThrottle]=\"50\"\n            (scrolled)=\"onScroll()\" [scrollWindow]=\"false\">\n            <table mat-table [dataSource]=\"esUserList\" matSort class=\"w-100 mt-1\" multiTemplateDataRows\n                id=\"email-subscription-user-table\">\n\n                <!-- Index Column -->\n                <ng-container matColumnDef=\"index\">\n                    <th mat-header-cell *matHeaderCellDef> # </th>\n                    <td mat-cell *matCellDef=\"let esUser; let i = dataIndex\"> {{ i+1 }} </td>\n                </ng-container>\n                <ng-container matColumnDef=\"user.name\">\n                    <th mat-header-cell *matHeaderCellDef mat-sort-header> User </th>\n                    <td mat-cell *matCellDef=\"let esUser;\"> {{ esUser?.user?.name }} </td>\n                </ng-container>\n\n                <ng-container matColumnDef=\"email_type.title\">\n                    <th mat-header-cell *matHeaderCellDef> Email Type </th>\n                    <td mat-cell *matCellDef=\"let esUser;\"> {{ esUser?.email_type?.title }} </td>\n                </ng-container>\n\n                <ng-container matColumnDef=\"creator.name\">\n                    <th mat-header-cell *matHeaderCellDef mat-sort-header> Creator</th>\n                    <td mat-cell *matCellDef=\"let esUser;\">\n                        {{esUser?.creator?.name }}\n                    </td>\n                </ng-container>\n\n                <ng-container matColumnDef=\"created_at\">\n                    <th mat-header-cell *matHeaderCellDef mat-sort-header> Created On</th>\n                    <td mat-cell *matCellDef=\"let esUser;\">\n                        {{esUser?.created_at | date:'medium' }}\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 esUser\">\n                        <button type=\"button\" mat-icon-button (click)=\"deleteEmailSubscriptionUser($event,esUser)\">\n                            <mat-icon>delete</mat-icon>\n                        </button>\n                        <button type=\"button\" mat-icon-button (click)=\"editEmailSubscriptionUser($event,esUser)\">\n                            <mat-icon>edit</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    </section>\n</div>", styles: [".scroll-container{max-height:800px;overflow-y:auto}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6$1.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]  ", exportAs: ["matButton"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", 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: "component", type: i6$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i9$2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i11.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i11.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i9.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i9.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i9.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i9.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i9.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i9.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i9.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i9.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i9.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i9.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { 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.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: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: EmailSubscriptionUserListFilterComponent, selector: "app-email-subscription-user-list-filter", outputs: ["valueChange"] }, { kind: "pipe", type: i2$1.DatePipe, name: "date" }] }); }
 };
 EmailSubscriptionUserListComponent = __decorate([
     UntilDestroy()
@@ -6928,7 +6928,7 @@ let EmailSubscriptionTypeFormComponent = class EmailSubscriptionTypeFormComponen
         // Needed for automatic unsubscribe with untilDestroyed
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EmailSubscriptionTypeFormComponent, deps: [{ token: i1$5.UntypedFormBuilder }, { token: FormValidatorService }, { token: AlertService }, { token: i1.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: HttpService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: EmailSubscriptionTypeFormComponent, selector: "app-email-subscription-type-form", ngImport: i0, template: "<form [formGroup]=\"emailSubscriptionTypeFormGroup\" (ngSubmit)=\"submit()\" class=\"mat-typography\">\n    <div fxLayout=\"column\">\n        <div mat-dialog-title class=\"text-center\">\n            <div>Email Subscription Type</div>\n        </div>\n\n        <div mat-dialog-content fxLayout=\"column\">\n            <div fxLayout=\"row wrap\" fxLayoutAlign=\"space-between center\">\n\n                <mat-form-field fxFlex=\"100%\" class=\"mt-1\">\n                    <input matInput formControlName=\"title\" placeholder=\"Title\" autocomplete=\"off\" required />\n                    <mat-error *ngIf=\"isFieldValid('title')\">{{getErrorMessage('title')}}</mat-error>\n                </mat-form-field>\n\n                <mat-form-field fxFlex=\"100%\" class=\"mt-1\">\n                    <input matInput formControlName=\"code\" placeholder=\"Code\" autocomplete=\"off\" required />\n                    <mat-hint align=\"end\">Unique Value</mat-hint>\n                    <mat-error *ngIf=\"isFieldValid('code')\">{{getErrorMessage('code')}}</mat-error>\n                </mat-form-field>\n\n                <mat-form-field fxFlex=\"100%\" class=\"mt-1\">\n                    <mat-label>Frequency</mat-label>\n                    <app-searchable-selector formControlName=\"frequency_id\" apiUrl=\"api/email-subscription-frequencies\"\n                        [(selectedValue)]=\"selectedFrequency\" [enableSearch]=\"false\" required>\n                    </app-searchable-selector>\n                    <mat-error *ngIf=\"isFieldValid('frequency_id')\">{{getErrorMessage('frequency_id')}}\n                    </mat-error>\n                </mat-form-field>\n\n                <mat-form-field fxFlex=\"100%\" class=\"mt-1\">\n                    <textarea matInput formControlName=\"description\" placeholder=\"Description\"\n                        autocomplete=\"off\"></textarea>\n                </mat-form-field>\n\n                <div class=\"my-2\" fxLayout=\"row\" fxLayoutGap=\"30px\" fxLayoutAlign=\"end\" fxFlex=\"100%\">\n                    <button mat-raised-button type=\"button\" (click)=\"cancel()\">Cancel</button>\n                    <button mat-raised-button type=\"submit\" color=\"primary\" [disabled]=\"isSubmitLoading\">\n                        <app-loader class=\"inline-loader\" [isLoading]=\"isSubmitLoading\"></app-loader>\n                        Save\n                    </button>\n                </div>\n            </div>\n        </div>\n\n\n    </div>\n</form>", 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]  ", exportAs: ["matButton"] }, { 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.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i7$2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i9$1.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: 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: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.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$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { 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", "panelWidth", "focusSearchOnOpen", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange"] }, { kind: "component", type: LoaderComponent, selector: "app-loader", inputs: ["isLoading", "size", "message"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: EmailSubscriptionTypeFormComponent, selector: "app-email-subscription-type-form", ngImport: i0, template: "<form [formGroup]=\"emailSubscriptionTypeFormGroup\" (ngSubmit)=\"submit()\" class=\"mat-typography\">\n    <div fxLayout=\"column\">\n        <div mat-dialog-title class=\"text-center\">\n            <div>Email Subscription Type</div>\n        </div>\n\n        <div mat-dialog-content fxLayout=\"column\">\n            <div fxLayout=\"row wrap\" fxLayoutAlign=\"space-between center\">\n\n                <mat-form-field fxFlex=\"100%\" class=\"mt-1\">\n                    <input matInput formControlName=\"title\" placeholder=\"Title\" autocomplete=\"off\" required />\n                    <mat-error *ngIf=\"isFieldValid('title')\">{{getErrorMessage('title')}}</mat-error>\n                </mat-form-field>\n\n                <mat-form-field fxFlex=\"100%\" class=\"mt-1\">\n                    <input matInput formControlName=\"code\" placeholder=\"Code\" autocomplete=\"off\" required />\n                    <mat-hint align=\"end\">Unique Value</mat-hint>\n                    <mat-error *ngIf=\"isFieldValid('code')\">{{getErrorMessage('code')}}</mat-error>\n                </mat-form-field>\n\n                <mat-form-field fxFlex=\"100%\" class=\"mt-1\">\n                    <mat-label>Frequency</mat-label>\n                    <app-searchable-selector formControlName=\"frequency_id\" apiUrl=\"api/email-subscription-frequencies\"\n                        [(selectedValue)]=\"selectedFrequency\" [enableSearch]=\"false\" required>\n                    </app-searchable-selector>\n                    <mat-error *ngIf=\"isFieldValid('frequency_id')\">{{getErrorMessage('frequency_id')}}\n                    </mat-error>\n                </mat-form-field>\n\n                <mat-form-field fxFlex=\"100%\" class=\"mt-1\">\n                    <textarea matInput formControlName=\"description\" placeholder=\"Description\"\n                        autocomplete=\"off\"></textarea>\n                </mat-form-field>\n\n                <div class=\"my-2\" fxLayout=\"row\" fxLayoutGap=\"30px\" fxLayoutAlign=\"end\" fxFlex=\"100%\">\n                    <button mat-raised-button type=\"button\" (click)=\"cancel()\">Cancel</button>\n                    <button mat-raised-button type=\"submit\" color=\"primary\" [disabled]=\"isSubmitLoading\">\n                        <app-loader class=\"inline-loader\" [isLoading]=\"isSubmitLoading\"></app-loader>\n                        Save\n                    </button>\n                </div>\n            </div>\n        </div>\n\n\n    </div>\n</form>", styles: [""], dependencies: [{ kind: "directive", type: i2$1.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]  ", exportAs: ["matButton"] }, { 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.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i7$2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i9$1.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: 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: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.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$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { 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", "panelWidth", "focusSearchOnOpen", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange"] }, { kind: "component", type: LoaderComponent, selector: "app-loader", inputs: ["isLoading", "size", "message"] }] }); }
 };
 EmailSubscriptionTypeFormComponent = __decorate([
     UntilDestroy()
@@ -7099,7 +7099,7 @@ let EmailSubscriptionTypeListComponent = class EmailSubscriptionTypeListComponen
         //Until destroyed uses it
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EmailSubscriptionTypeListComponent, deps: [{ token: i1.MatDialog }, { token: HttpService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: EmailSubscriptionTypeListComponent, selector: "app-email-subscription-type-list", viewQueries: [{ propertyName: "sort", first: true, predicate: MatSort, descendants: true, static: true }], ngImport: i0, template: "<div class=\"mat-typography m-4\">\n    <div fxLayout=\"row wrap\" fxLayoutAlign=\"start center\">\n        <mat-form-field>\n            <input matInput [formControl]=\"search\" placeholder=\"Email Type\" autocomplete=\"off\" />\n            <button matSuffix mat-icon-button>\n                <mat-icon>search</mat-icon>\n            </button>\n            <button *ngIf=\"search.value\" matSuffix mat-icon-button (click)=\"search.setValue('')\">\n                <mat-icon>close</mat-icon>\n            </button>\n        </mat-form-field>\n        <div class=\"ml-2\">\n            <button mat-raised-button color=\"primary\" type=\"button\" (click)=\"addEmailSubscriptionType()\">+ Email\n                Type</button>\n        </div>\n        <span fxFlex></span>\n        <mat-form-field appearance=\"outline\" class=\"no-padding\">\n            <mat-label>Columns</mat-label>\n            <mat-select [formControl]=\"displayColumns\" multiple (selectionChange)=\"columnsChange()\">\n                <mat-option *ngFor=\"let column of availableDisplayColumns\" [value]=\"column.value\">{{column.name}}\n                </mat-option>\n            </mat-select>\n        </mat-form-field>\n    </div>\n\n    <section>\n        <div class=\"scroll-container\" infiniteScroll [infiniteScrollDistance]=\"2\" [infiniteScrollThrottle]=\"50\"\n            (scrolled)=\"onScroll()\" [scrollWindow]=\"false\">\n            <table mat-table [dataSource]=\"emailSubscriptionTypeList\" matSort class=\"w-100 mt-1\" multiTemplateDataRows\n                id=\"email-subscription-type-table\">\n\n                <!-- Index Column -->\n                <ng-container matColumnDef=\"index\">\n                    <th mat-header-cell *matHeaderCellDef> # </th>\n                    <td mat-cell *matCellDef=\"let emailSubscriptionType; let i = dataIndex\"> {{ i+1 }} </td>\n                </ng-container>\n                <ng-container matColumnDef=\"title\">\n                    <th mat-header-cell *matHeaderCellDef mat-sort-header> Title </th>\n                    <td mat-cell *matCellDef=\"let emailSubscriptionType;\"> {{ emailSubscriptionType?.title }} </td>\n                </ng-container>\n                <ng-container matColumnDef=\"code\">\n                    <th mat-header-cell *matHeaderCellDef mat-sort-header> Code </th>\n                    <td mat-cell *matCellDef=\"let emailSubscriptionType;\"> {{ emailSubscriptionType?.code }}\n                    </td>\n                </ng-container>\n                <ng-container matColumnDef=\"frequency.title\">\n                    <th mat-header-cell *matHeaderCellDef mat-sort-header> Frequency </th>\n                    <td mat-cell *matCellDef=\"let emailSubscriptionType;\"> {{ emailSubscriptionType?.frequency?.title }}\n                    </td>\n                </ng-container>\n                <ng-container matColumnDef=\"description\">\n                    <th mat-header-cell *matHeaderCellDef> Description </th>\n                    <td mat-cell *matCellDef=\"let emailSubscriptionType;\"> {{ emailSubscriptionType?.description }}\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 emailSubscriptionType\">\n                        <button type=\"button\" mat-icon-button\n                            (click)=\"deleteEmailSubscriptionType($event,emailSubscriptionType)\">\n                            <mat-icon>delete</mat-icon>\n                        </button>\n                        <button type=\"button\" mat-icon-button\n                            (click)=\"editEmailSubscriptionType($event,emailSubscriptionType)\">\n                            <mat-icon>edit</mat-icon>\n                        </button>\n                    </td>\n                </ng-container>\n                <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky:true\"></tr>\n                <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n            </table>\n        </div>\n    </section>\n</div>", styles: [".scroll-container{max-height:800px;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: "component", type: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", 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.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$1.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: i6$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i9$2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i11.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i11.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i9.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i9.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i9.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i9.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i9.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i9.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i9.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i9.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i9.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i9.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { 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.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: i1$5.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$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i6$1.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: EmailSubscriptionTypeListComponent, selector: "app-email-subscription-type-list", viewQueries: [{ propertyName: "sort", first: true, predicate: MatSort, descendants: true, static: true }], ngImport: i0, template: "<div class=\"mat-typography m-4\">\n    <div fxLayout=\"row wrap\" fxLayoutAlign=\"start center\">\n        <mat-form-field>\n            <input matInput [formControl]=\"search\" placeholder=\"Email Type\" autocomplete=\"off\" />\n            <button matSuffix mat-icon-button>\n                <mat-icon>search</mat-icon>\n            </button>\n            <button *ngIf=\"search.value\" matSuffix mat-icon-button (click)=\"search.setValue('')\">\n                <mat-icon>close</mat-icon>\n            </button>\n        </mat-form-field>\n        <div class=\"ml-2\">\n            <button mat-raised-button color=\"primary\" type=\"button\" (click)=\"addEmailSubscriptionType()\">+ Email\n                Type</button>\n        </div>\n        <span fxFlex></span>\n        <mat-form-field appearance=\"outline\" class=\"no-padding\">\n            <mat-label>Columns</mat-label>\n            <mat-select [formControl]=\"displayColumns\" multiple (selectionChange)=\"columnsChange()\">\n                <mat-option *ngFor=\"let column of availableDisplayColumns\" [value]=\"column.value\">{{column.name}}\n                </mat-option>\n            </mat-select>\n        </mat-form-field>\n    </div>\n\n    <section>\n        <div class=\"scroll-container\" infiniteScroll [infiniteScrollDistance]=\"2\" [infiniteScrollThrottle]=\"50\"\n            (scrolled)=\"onScroll()\" [scrollWindow]=\"false\">\n            <table mat-table [dataSource]=\"emailSubscriptionTypeList\" matSort class=\"w-100 mt-1\" multiTemplateDataRows\n                id=\"email-subscription-type-table\">\n\n                <!-- Index Column -->\n                <ng-container matColumnDef=\"index\">\n                    <th mat-header-cell *matHeaderCellDef> # </th>\n                    <td mat-cell *matCellDef=\"let emailSubscriptionType; let i = dataIndex\"> {{ i+1 }} </td>\n                </ng-container>\n                <ng-container matColumnDef=\"title\">\n                    <th mat-header-cell *matHeaderCellDef mat-sort-header> Title </th>\n                    <td mat-cell *matCellDef=\"let emailSubscriptionType;\"> {{ emailSubscriptionType?.title }} </td>\n                </ng-container>\n                <ng-container matColumnDef=\"code\">\n                    <th mat-header-cell *matHeaderCellDef mat-sort-header> Code </th>\n                    <td mat-cell *matCellDef=\"let emailSubscriptionType;\"> {{ emailSubscriptionType?.code }}\n                    </td>\n                </ng-container>\n                <ng-container matColumnDef=\"frequency.title\">\n                    <th mat-header-cell *matHeaderCellDef mat-sort-header> Frequency </th>\n                    <td mat-cell *matCellDef=\"let emailSubscriptionType;\"> {{ emailSubscriptionType?.frequency?.title }}\n                    </td>\n                </ng-container>\n                <ng-container matColumnDef=\"description\">\n                    <th mat-header-cell *matHeaderCellDef> Description </th>\n                    <td mat-cell *matCellDef=\"let emailSubscriptionType;\"> {{ emailSubscriptionType?.description }}\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 emailSubscriptionType\">\n                        <button type=\"button\" mat-icon-button\n                            (click)=\"deleteEmailSubscriptionType($event,emailSubscriptionType)\">\n                            <mat-icon>delete</mat-icon>\n                        </button>\n                        <button type=\"button\" mat-icon-button\n                            (click)=\"editEmailSubscriptionType($event,emailSubscriptionType)\">\n                            <mat-icon>edit</mat-icon>\n                        </button>\n                    </td>\n                </ng-container>\n                <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky:true\"></tr>\n                <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n            </table>\n        </div>\n    </section>\n</div>", styles: [".scroll-container{max-height:800px;overflow-y:auto}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.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]  ", exportAs: ["matButton"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", 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.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$1.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: i6$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i9$2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i11.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i11.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i9.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i9.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i9.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i9.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i9.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i9.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i9.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i9.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i9.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i9.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { 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.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: i1$5.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$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i6$1.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }] }); }
 };
 EmailSubscriptionTypeListComponent = __decorate([
     UntilDestroy()
@@ -7226,7 +7226,7 @@ let EmailSubscriptionForUserComponent = class EmailSubscriptionForUserComponent
         //Until destroyed uses it
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EmailSubscriptionForUserComponent, deps: [{ token: HttpService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: EmailSubscriptionForUserComponent, selector: "app-email-subscription-for-user", ngImport: i0, template: "<div fxLayout=\"column\" class=\"container my-4\">\n\n    <div class=\"scroll-container\" infiniteScroll [infiniteScrollDistance]=\"2\" [infiniteScrollThrottle]=\"50\"\n        (scrolled)=\"onScroll()\" [scrollWindow]=\"false\">\n        <mat-list>\n            <div mat-subheader>Available Subscriptions</div>\n            <mat-list-item *ngFor=\"let sub of subscriptions\">\n                <mat-icon mat-list-icon>email</mat-icon>\n                <div mat-line>{{sub?.title}} </div>\n                <div mat-line class=\"text-secondary\">{{sub?.frequency?.title}}</div>\n                <div mat-line> {{sub?.description}} </div>\n                <div fxLayout fxLayoutAlign=\"end\">\n                    <button type=\"button\" *ngIf=\"!sub?.current_user_subscription\" mat-raised-button color=\"primary\"\n                        (click)=\"subscribe(sub)\">Subscribe</button>\n                    <button type=\"button\" *ngIf=\"sub?.current_user_subscription\" mat-stroked-button color=\"primary\"\n                        (click)=\"unsubscribe(sub)\">Unsubscribe</button>\n                </div>\n                <mat-divider></mat-divider>\n            </mat-list-item>\n        </mat-list>\n    </div>\n\n</div>", styles: [".scroll-container{max-height:800px;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: i6$1.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]  ", exportAs: ["matButton"] }, { kind: "component", type: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6$2.MatLine, selector: "[mat-line], [matLine]" }, { kind: "component", type: i5$2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i8$4.MatList, selector: "mat-list", exportAs: ["matList"] }, { kind: "component", type: i8$4.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i8$4.MatListSubheaderCssMatStyler, selector: "[mat-subheader], [matSubheader]" }, { 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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: EmailSubscriptionForUserComponent, selector: "app-email-subscription-for-user", ngImport: i0, template: "<div fxLayout=\"column\" class=\"container my-4\">\n\n    <div class=\"scroll-container\" infiniteScroll [infiniteScrollDistance]=\"2\" [infiniteScrollThrottle]=\"50\"\n        (scrolled)=\"onScroll()\" [scrollWindow]=\"false\">\n        <mat-list>\n            <div mat-subheader>Available Subscriptions</div>\n            <mat-list-item *ngFor=\"let sub of subscriptions\">\n                <mat-icon mat-list-icon>email</mat-icon>\n                <div mat-line>{{sub?.title}} </div>\n                <div mat-line class=\"text-secondary\">{{sub?.frequency?.title}}</div>\n                <div mat-line> {{sub?.description}} </div>\n                <div fxLayout fxLayoutAlign=\"end\">\n                    <button type=\"button\" *ngIf=\"!sub?.current_user_subscription\" mat-raised-button color=\"primary\"\n                        (click)=\"subscribe(sub)\">Subscribe</button>\n                    <button type=\"button\" *ngIf=\"sub?.current_user_subscription\" mat-stroked-button color=\"primary\"\n                        (click)=\"unsubscribe(sub)\">Unsubscribe</button>\n                </div>\n                <mat-divider></mat-divider>\n            </mat-list-item>\n        </mat-list>\n    </div>\n\n</div>", styles: [".scroll-container{max-height:800px;overflow-y:auto}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6$1.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]  ", exportAs: ["matButton"] }, { kind: "component", type: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6$2.MatLine, selector: "[mat-line], [matLine]" }, { kind: "component", type: i5$2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i8$4.MatList, selector: "mat-list", exportAs: ["matList"] }, { kind: "component", type: i8$4.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i8$4.MatListSubheaderCssMatStyler, selector: "[mat-subheader], [matSubheader]" }, { 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"] }] }); }
 };
 EmailSubscriptionForUserComponent = __decorate([
     UntilDestroy()
@@ -7413,7 +7413,7 @@ class TechlifyUpdateFormComponent {
         return this.formValidatorService.getErrorMessage(field, this.techlifyUpdateForm, errorMessages$7);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TechlifyUpdateFormComponent, deps: [{ token: i1.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: i1$5.UntypedFormBuilder }, { token: FormValidatorService }, { token: AlertService }, { token: TechlifyUpdateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TechlifyUpdateFormComponent, selector: "app-techlify-update-form", outputs: { onSave: "onSave" }, ngImport: i0, template: "<form [formGroup]=\"techlifyUpdateForm\" (ngSubmit)=\"submit()\">\n  <div fxLayout=\"column\" class=\"mat-typography\">\n    <div mat-dialog-title class=\"text-center\">\n      <h2>\n        App Update Form\n      </h2>\n    </div>\n    <div mat-dialog-content fxLayout=\"column\" fxLayoutGap=\"1rem\">\n      <mat-form-field fxFlex=\"100%\">\n        <mat-label>Title</mat-label>\n        <input matInput formControlName=\"title\" placeholder=\"Title\" autocomplete=\"off\" required />\n        <button *ngIf=\"getFieldValue('title')\" matSuffix mat-icon-button (click)=\"resetFieldValue('title')\">\n          <mat-icon>close</mat-icon>\n        </button>\n        <mat-error *ngIf=\"isFieldValid('title')\">\n          {{getErrorMessage('title')}}\n        </mat-error>\n      </mat-form-field>\n\n      <h3 class=\"text-secondary mb-4\" fxFlex=\"100%\">\n        Is Pinned\n        <mat-button-toggle-group [hideSingleSelectionIndicator]=\"true\" [hideMultipleSelectionIndicator]=\"true\"\n          formControlName=\"is_pinned\">\n          <mat-button-toggle [value]=\"true\">Yes</mat-button-toggle>\n          <mat-button-toggle [value]=\"false\">No</mat-button-toggle>\n        </mat-button-toggle-group>\n      </h3>\n\n      <mat-form-field fxFlex=\"100%\">\n        <input matInput [matDatepicker]=\"released_on\" formControlName=\"released_on\" placeholder=\"Released on\" readonly\n          (click)=\"released_on.open()\" required />\n        <mat-datepicker-toggle matSuffix [for]=\"released_on\"></mat-datepicker-toggle>\n        <mat-datepicker #released_on></mat-datepicker>\n        <button *ngIf=\"getFieldValue('released_on')\" matSuffix mat-icon-button (click)=\"resetFieldValue('released_on')\">\n          <mat-icon>close</mat-icon>\n        </button>\n        <mat-error *ngIf=\"isFieldValid('released_on')\">\n          {{getErrorMessage('released_on')}}\n        </mat-error>\n      </mat-form-field>\n\n      <mat-form-field fxFlex=\"100%\">\n        <mat-label>Version</mat-label>\n        <input matInput formControlName=\"version\" placeholder=\"Version\" autocomplete=\"off\" required />\n        <button *ngIf=\"getFieldValue('version')\" matSuffix mat-icon-button (click)=\"resetFieldValue('version')\">\n          <mat-icon>close</mat-icon>\n        </button>\n        <mat-error *ngIf=\"isFieldValid('version')\">\n          {{getErrorMessage('version')}}\n        </mat-error>\n      </mat-form-field>\n\n      <mat-form-field fxFlex=\"100%\">\n        <mat-label>Learn more link</mat-label>\n        <input matInput formControlName=\"learn_more_link\" placeholder=\"Learn More Link\" autocomplete=\"off\" />\n        <button *ngIf=\"getFieldValue('learn_more_link')\" matSuffix mat-icon-button\n          (click)=\"resetFieldValue('learn_more_link')\">\n          <mat-icon>close</mat-icon>\n        </button>\n        <mat-error *ngIf=\"isFieldValid('learn_more_link')\">\n          {{getErrorMessage('learn_more_link')}}\n        </mat-error>\n      </mat-form-field>\n\n      <div fxFlex=\"100%\">\n        <div class=\"NgxEditor__Wrapper\">\n          <ngx-editor-menu [toolbar]=\"toolbar\" [editor]=\"editor\"> </ngx-editor-menu>\n          <ngx-editor formControlName=\"description\" [editor]=\"editor\" placeholder=\"Description\">\n          </ngx-editor>\n        </div>\n        <mat-error *ngIf=\"isFieldValid('description')\">\n          {{getErrorMessage('description')}}\n        </mat-error>\n      </div>\n    </div>\n    <div mat-dialog-actions fxFlex=\"100%\" fxLayout fxLayoutAlign=\"end\" fxLayoutGap=\"1rem\">\n      <button mat-button class=\"mt-2\" type=\"button\" (click)=\"dialogRef.close()\">\n        Cancel\n      </button>\n      <button mat-raised-button type=\"submit\" class=\"btn-primary mt-2\">\n        Save\n      </button>\n    </div>\n  </div>\n</form>", styles: [""], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.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$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.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]  ", exportAs: ["matButton"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { 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: 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$1.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: i11$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i11$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i11$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i3$2.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i3$2.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], 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: 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: i14.NgxEditorComponent, selector: "ngx-editor", inputs: ["editor", "outputFormat", "placeholder"], outputs: ["focusOut", "focusIn"] }, { kind: "component", type: i14.MenuComponent, selector: "ngx-editor-menu", inputs: ["toolbar", "colorPresets", "disabled", "editor", "customMenuRef", "dropdownPlacement"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TechlifyUpdateFormComponent, selector: "app-techlify-update-form", outputs: { onSave: "onSave" }, ngImport: i0, template: "<form [formGroup]=\"techlifyUpdateForm\" (ngSubmit)=\"submit()\">\n  <div fxLayout=\"column\" class=\"mat-typography\">\n    <div mat-dialog-title class=\"text-center\">\n      <h2>\n        App Update Form\n      </h2>\n    </div>\n    <div mat-dialog-content fxLayout=\"column\" fxLayoutGap=\"1rem\">\n      <mat-form-field fxFlex=\"100%\">\n        <mat-label>Title</mat-label>\n        <input matInput formControlName=\"title\" placeholder=\"Title\" autocomplete=\"off\" required />\n        <button *ngIf=\"getFieldValue('title')\" matSuffix mat-icon-button (click)=\"resetFieldValue('title')\">\n          <mat-icon>close</mat-icon>\n        </button>\n        <mat-error *ngIf=\"isFieldValid('title')\">\n          {{getErrorMessage('title')}}\n        </mat-error>\n      </mat-form-field>\n\n      <h3 class=\"text-secondary mb-4\" fxFlex=\"100%\">\n        Is Pinned\n        <mat-button-toggle-group [hideSingleSelectionIndicator]=\"true\" [hideMultipleSelectionIndicator]=\"true\"\n          formControlName=\"is_pinned\">\n          <mat-button-toggle [value]=\"true\">Yes</mat-button-toggle>\n          <mat-button-toggle [value]=\"false\">No</mat-button-toggle>\n        </mat-button-toggle-group>\n      </h3>\n\n      <mat-form-field fxFlex=\"100%\">\n        <input matInput [matDatepicker]=\"released_on\" formControlName=\"released_on\" placeholder=\"Released on\" readonly\n          (click)=\"released_on.open()\" required />\n        <mat-datepicker-toggle matSuffix [for]=\"released_on\"></mat-datepicker-toggle>\n        <mat-datepicker #released_on></mat-datepicker>\n        <button *ngIf=\"getFieldValue('released_on')\" matSuffix mat-icon-button (click)=\"resetFieldValue('released_on')\">\n          <mat-icon>close</mat-icon>\n        </button>\n        <mat-error *ngIf=\"isFieldValid('released_on')\">\n          {{getErrorMessage('released_on')}}\n        </mat-error>\n      </mat-form-field>\n\n      <mat-form-field fxFlex=\"100%\">\n        <mat-label>Version</mat-label>\n        <input matInput formControlName=\"version\" placeholder=\"Version\" autocomplete=\"off\" required />\n        <button *ngIf=\"getFieldValue('version')\" matSuffix mat-icon-button (click)=\"resetFieldValue('version')\">\n          <mat-icon>close</mat-icon>\n        </button>\n        <mat-error *ngIf=\"isFieldValid('version')\">\n          {{getErrorMessage('version')}}\n        </mat-error>\n      </mat-form-field>\n\n      <mat-form-field fxFlex=\"100%\">\n        <mat-label>Learn more link</mat-label>\n        <input matInput formControlName=\"learn_more_link\" placeholder=\"Learn More Link\" autocomplete=\"off\" />\n        <button *ngIf=\"getFieldValue('learn_more_link')\" matSuffix mat-icon-button\n          (click)=\"resetFieldValue('learn_more_link')\">\n          <mat-icon>close</mat-icon>\n        </button>\n        <mat-error *ngIf=\"isFieldValid('learn_more_link')\">\n          {{getErrorMessage('learn_more_link')}}\n        </mat-error>\n      </mat-form-field>\n\n      <div fxFlex=\"100%\">\n        <div class=\"NgxEditor__Wrapper\">\n          <ngx-editor-menu [toolbar]=\"toolbar\" [editor]=\"editor\"> </ngx-editor-menu>\n          <ngx-editor formControlName=\"description\" [editor]=\"editor\" placeholder=\"Description\">\n          </ngx-editor>\n        </div>\n        <mat-error *ngIf=\"isFieldValid('description')\">\n          {{getErrorMessage('description')}}\n        </mat-error>\n      </div>\n    </div>\n    <div mat-dialog-actions fxFlex=\"100%\" fxLayout fxLayoutAlign=\"end\" fxLayoutGap=\"1rem\">\n      <button mat-button class=\"mt-2\" type=\"button\" (click)=\"dialogRef.close()\">\n        Cancel\n      </button>\n      <button mat-raised-button type=\"submit\" class=\"btn-primary mt-2\">\n        Save\n      </button>\n    </div>\n  </div>\n</form>", styles: [""], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.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$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.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]  ", exportAs: ["matButton"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { 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: 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$1.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: i11$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i11$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i11$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i3$1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i3$1.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], 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: 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: i14.NgxEditorComponent, selector: "ngx-editor", inputs: ["editor", "outputFormat", "placeholder"], outputs: ["focusOut", "focusIn"] }, { kind: "component", type: i14.MenuComponent, selector: "ngx-editor-menu", inputs: ["toolbar", "colorPresets", "disabled", "editor", "customMenuRef", "dropdownPlacement"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TechlifyUpdateFormComponent, decorators: [{
             type: Component,
@@ -7584,7 +7584,7 @@ let TechlifyUpdatesListComponent = class TechlifyUpdatesListComponent {
         ;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TechlifyUpdatesListComponent, deps: [{ token: i1.MatDialog }, { token: AlertService }, { token: TechlifyUpdateService }, { token: i1$5.UntypedFormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TechlifyUpdatesListComponent, selector: "app-techlify-updates-list", ngImport: i0, template: "<section class=\"p-4\" fxLayout=\"column\">\n  <h3 class=\"primary-color text-center\">\n    App Updates\n    <button mat-raised-button (click)=\"modifyTechlifyUpdate()\" class=\"primary-bg text-white\">\n      <mat-icon>\n        add\n      </mat-icon>\n      Create\n    </button>\n  </h3>\n  <form [formGroup]=\"filterFormGroup\" fxLayout=\"row wrap\" fxLayoutGap=\"0.5rem\" fxFlex=\"100%\" style=\"font-size: 12px;\">\n    <mat-form-field fxFlex=\"0 1 calc(100% - 0.5rem)\" fxFlex.gt-md=\"0 1 calc(15% - 0.5rem)\" appearance=\"outline\"\n      fxFlex.gt-sm=\"0 1 calc(20% - 0.5rem)\">\n      <input type=\"text\" matInput formControlName=\"search\" placeholder=\"Title\" autocomplete=\"off\" />\n      <button *ngIf=\"filterFormGroup.get('search').value\" matSuffix mat-icon-button (click)=\"resetFieldValue('search')\">\n        <mat-icon>close</mat-icon>\n      </button>\n    </mat-form-field>\n    <mat-form-field fxFlex=\"0 1 calc(100% - 0.5rem)\" fxFlex.gt-md=\"0 1 calc(15% - 0.5rem)\" appearance=\"outline\"\n      fxFlex.gt-sm=\"0 1 calc(20% - 0.5rem)\">\n      <input type=\"text\" matInput formControlName=\"version\" placeholder=\"Version\" autocomplete=\"off\" />\n      <button *ngIf=\"filterFormGroup.get('version').value\" matSuffix mat-icon-button\n        (click)=\"resetFieldValue('version')\">\n        <mat-icon>close</mat-icon>\n      </button>\n    </mat-form-field>\n  </form>\n\n  <table mat-table [dataSource]=\"techlifyUpdates\" class=\"mat-elevation-z8 w-100\" matSort multiTemplateDataRows\n    (matSortChange)=\"sortColumn($event)\" infiniteScroll [infiniteScrollDistance]=\"2\" [infiniteScrollThrottle]=\"50\"\n    (scrolled)=\"onScroll()\">\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 mat-sort-header disableClear> Title </th>\n      <td mat-cell *matCellDef=\"let element\"> {{element?.title}} </td>\n    </ng-container>\n\n    <!--Is Pinned Column-->\n    <ng-container matColumnDef=\"is_pinned\">\n      <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear> Is Pinned </th>\n      <td mat-cell *matCellDef=\"let element\"> {{element?.is_pinned ? 'Yes' : 'No'}} </td>\n    </ng-container>\n\n\n    <!-- Version Column -->\n    <ng-container matColumnDef=\"version\">\n      <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear> Version </th>\n      <td mat-cell *matCellDef=\"let element\"> {{element?.version}} </td>\n    </ng-container>\n\n    <!-- Released On Column -->\n    <ng-container matColumnDef=\"released_on\">\n      <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear> Released On </th>\n      <td mat-cell *matCellDef=\"let element\"> {{element?.released_on | date:'mediumDate'}} </td>\n    </ng-container>\n\n    <!-- Learn More Link Column -->\n    <ng-container matColumnDef=\"learn_more_link\">\n      <th mat-header-cell *matHeaderCellDef> Learn more link </th>\n      <td mat-cell *matCellDef=\"let element\">\n        <a [href]=\"element?.learn_more_link\" target=\"_blank\">\n          {{element?.learn_more_link}}\n        </a>\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\">\n        <app-read-more [text]=\"element?.description\" [maxLength]=\"50\"></app-read-more>\n      </td>\n    </ng-container>\n\n    <!-- Creator Column -->\n    <ng-container matColumnDef=\"creator\">\n      <th mat-header-cell *matHeaderCellDef> Creator </th>\n      <td mat-cell *matCellDef=\"let element\">\n        {{element?.creator?.name}}\n        <div fxLayout class=\"small\">\n          {{element?.created_at | date : 'mediumDate'}}\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\" class=\"secondary-color\">\n        <button type=\"button\" class=\"secondary-color\" mat-icon-button (click)=\"modifyTechlifyUpdate(element)\">\n          <mat-icon>edit</mat-icon>\n        </button>\n\n        <button type=\"button\" class=\"secondary-color\" mat-icon-button (click)=\"deleteTechlifyUpdate(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</section>", styles: [""], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.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$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i6$1.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.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]  ", exportAs: ["matButton"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", 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.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$1.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: i11.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i11.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i9.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i9.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i9.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i9.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i9.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i9.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i9.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i9.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i9.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i9.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: ReadMoreComponent, selector: "app-read-more", inputs: ["text", "maxLength"] }, { kind: "pipe", type: i3.DatePipe, name: "date" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TechlifyUpdatesListComponent, selector: "app-techlify-updates-list", ngImport: i0, template: "<section class=\"p-4\" fxLayout=\"column\">\n  <h3 class=\"primary-color text-center\">\n    App Updates\n    <button mat-raised-button (click)=\"modifyTechlifyUpdate()\" class=\"primary-bg text-white\">\n      <mat-icon>\n        add\n      </mat-icon>\n      Create\n    </button>\n  </h3>\n  <form [formGroup]=\"filterFormGroup\" fxLayout=\"row wrap\" fxLayoutGap=\"0.5rem\" fxFlex=\"100%\" style=\"font-size: 12px;\">\n    <mat-form-field fxFlex=\"0 1 calc(100% - 0.5rem)\" fxFlex.gt-md=\"0 1 calc(15% - 0.5rem)\" appearance=\"outline\"\n      fxFlex.gt-sm=\"0 1 calc(20% - 0.5rem)\">\n      <input type=\"text\" matInput formControlName=\"search\" placeholder=\"Title\" autocomplete=\"off\" />\n      <button *ngIf=\"filterFormGroup.get('search').value\" matSuffix mat-icon-button (click)=\"resetFieldValue('search')\">\n        <mat-icon>close</mat-icon>\n      </button>\n    </mat-form-field>\n    <mat-form-field fxFlex=\"0 1 calc(100% - 0.5rem)\" fxFlex.gt-md=\"0 1 calc(15% - 0.5rem)\" appearance=\"outline\"\n      fxFlex.gt-sm=\"0 1 calc(20% - 0.5rem)\">\n      <input type=\"text\" matInput formControlName=\"version\" placeholder=\"Version\" autocomplete=\"off\" />\n      <button *ngIf=\"filterFormGroup.get('version').value\" matSuffix mat-icon-button\n        (click)=\"resetFieldValue('version')\">\n        <mat-icon>close</mat-icon>\n      </button>\n    </mat-form-field>\n  </form>\n\n  <table mat-table [dataSource]=\"techlifyUpdates\" class=\"mat-elevation-z8 w-100\" matSort multiTemplateDataRows\n    (matSortChange)=\"sortColumn($event)\" infiniteScroll [infiniteScrollDistance]=\"2\" [infiniteScrollThrottle]=\"50\"\n    (scrolled)=\"onScroll()\">\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 mat-sort-header disableClear> Title </th>\n      <td mat-cell *matCellDef=\"let element\"> {{element?.title}} </td>\n    </ng-container>\n\n    <!--Is Pinned Column-->\n    <ng-container matColumnDef=\"is_pinned\">\n      <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear> Is Pinned </th>\n      <td mat-cell *matCellDef=\"let element\"> {{element?.is_pinned ? 'Yes' : 'No'}} </td>\n    </ng-container>\n\n\n    <!-- Version Column -->\n    <ng-container matColumnDef=\"version\">\n      <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear> Version </th>\n      <td mat-cell *matCellDef=\"let element\"> {{element?.version}} </td>\n    </ng-container>\n\n    <!-- Released On Column -->\n    <ng-container matColumnDef=\"released_on\">\n      <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear> Released On </th>\n      <td mat-cell *matCellDef=\"let element\"> {{element?.released_on | date:'mediumDate'}} </td>\n    </ng-container>\n\n    <!-- Learn More Link Column -->\n    <ng-container matColumnDef=\"learn_more_link\">\n      <th mat-header-cell *matHeaderCellDef> Learn more link </th>\n      <td mat-cell *matCellDef=\"let element\">\n        <a [href]=\"element?.learn_more_link\" target=\"_blank\">\n          {{element?.learn_more_link}}\n        </a>\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\">\n        <app-read-more [text]=\"element?.description\" [maxLength]=\"50\"></app-read-more>\n      </td>\n    </ng-container>\n\n    <!-- Creator Column -->\n    <ng-container matColumnDef=\"creator\">\n      <th mat-header-cell *matHeaderCellDef> Creator </th>\n      <td mat-cell *matCellDef=\"let element\">\n        {{element?.creator?.name}}\n        <div fxLayout class=\"small\">\n          {{element?.created_at | date : 'mediumDate'}}\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\" class=\"secondary-color\">\n        <button type=\"button\" class=\"secondary-color\" mat-icon-button (click)=\"modifyTechlifyUpdate(element)\">\n          <mat-icon>edit</mat-icon>\n        </button>\n\n        <button type=\"button\" class=\"secondary-color\" mat-icon-button (click)=\"deleteTechlifyUpdate(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</section>", styles: [""], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.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$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i6$1.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.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]  ", exportAs: ["matButton"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", 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.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$1.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: i11.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i11.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i9.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i9.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i9.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i9.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i9.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i9.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i9.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i9.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i9.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i9.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: ReadMoreComponent, selector: "app-read-more", inputs: ["text", "maxLength"] }, { kind: "pipe", type: i2$1.DatePipe, name: "date" }] }); }
 };
 TechlifyUpdatesListComponent = __decorate([
     UntilDestroy()
@@ -7674,7 +7674,7 @@ class UpdateViewComponent {
         this.router.navigate([this.rootNavUrl + "/update-history"]);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UpdateViewComponent, deps: [{ token: i1.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: UpdateViewComponent, selector: "app-update-view", ngImport: i0, template: "<div fxLayout=\"column\">\n  <div mat-dialog-title class=\"text-center\">\n    <div fxLayout=\"row wrap\" fxLayoutAlign=\"space-between\">\n      <div fxFlex=\"80%\">\n        <div fxLayout=\"row wrap\" fxLayoutGap=\"1rem\">\n          <span fxFlex=\"calc(10%-1rem)\" fxLayoutAlign=\"start center\">\n            <mat-icon class=\"large-icon primary-color\">\n              <span class=\"material-icons-outlined\">\n                grading\n              </span>\n            </mat-icon>\n          </span>\n          <div fxFlex=\"calc(90%-1rem)\">\n            <div fxLayout=\"column\" fxLayoutAlign=\"start\">\n              <div fxLayout>\n                <h5 class=\"primary-color\" style=\"margin-bottom:0;text-align: left;\">\n                  App Update: {{techlifyUpdate?.title}}\n                </h5>\n              </div>\n              <div fxLayout=\"row\" fxLayoutGap=\"1rem\">\n                <small class=\"text-muted\">\n                  <b>Release On</b> : {{techlifyUpdate?.released_on | date: 'mediumDate'}}\n                </small>\n                <small class=\"text-muted\">\n                  <b>Version</b> : {{techlifyUpdate?.version}}\n                </small>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div fxLayoutAlign=\"end center\" class=\"text-muted\">\n        <button mat-icon-button type=\"button\" (click)=\"close()\">\n          <mat-icon>clear</mat-icon>\n        </button>\n      </div>\n    </div>\n  </div>\n\n  <div mat-dialog-content style=\"height: 500px;overflow: auto;\">\n    <div fxLayout=\"column\" class=\"text-muted\" style=\"margin-top: 1rem;\" [innerHtml]=\"techlifyUpdate?.description\">\n    </div>\n  </div>\n\n  <div mat-dialog-actions fxLayout=\"row\" [fxLayoutAlign]=\"!this.data?.isFromHistory ? 'space-between' : 'end'\">\n    <button type=\"button\" mat-button class=\"primary-color\" (click)=\"openUpdateHistory()\"\n      *ngIf=\"!this.data?.isFromHistory\">\n      <mat-icon>\n        history\n      </mat-icon>\n      Update History\n    </button>\n    <a *ngIf=\"techlifyUpdate?.learn_more_link\" [href]=\"techlifyUpdate?.learn_more_link\" target=\"_blank\"\n      style=\"text-decoration: none;\">\n      <button type=\"button\" mat-button class=\"text-muted\">\n        Learn More\n      </button>\n    </a>\n    <button type=\"button\" mat-stroked-button class=\"primary-color\" (click)=\"close()\">\n      OK\n    </button>\n  </div>\n</div>\n", styles: [".large-icon{transform:scale(2.3)}.primary-color{color:#009fdd!important}.primary-bg{background-color:#009fdd!important}.text-muted,.text-white{color:#d3d3d3}\n"], 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]  ", exportAs: ["matButton"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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: "pipe", type: i3.DatePipe, name: "date" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: UpdateViewComponent, selector: "app-update-view", ngImport: i0, template: "<div fxLayout=\"column\">\n  <div mat-dialog-title class=\"text-center\">\n    <div fxLayout=\"row wrap\" fxLayoutAlign=\"space-between\">\n      <div fxFlex=\"80%\">\n        <div fxLayout=\"row wrap\" fxLayoutGap=\"1rem\">\n          <span fxFlex=\"calc(10%-1rem)\" fxLayoutAlign=\"start center\">\n            <mat-icon class=\"large-icon primary-color\">\n              <span class=\"material-icons-outlined\">\n                grading\n              </span>\n            </mat-icon>\n          </span>\n          <div fxFlex=\"calc(90%-1rem)\">\n            <div fxLayout=\"column\" fxLayoutAlign=\"start\">\n              <div fxLayout>\n                <h5 class=\"primary-color\" style=\"margin-bottom:0;text-align: left;\">\n                  App Update: {{techlifyUpdate?.title}}\n                </h5>\n              </div>\n              <div fxLayout=\"row\" fxLayoutGap=\"1rem\">\n                <small class=\"text-muted\">\n                  <b>Release On</b> : {{techlifyUpdate?.released_on | date: 'mediumDate'}}\n                </small>\n                <small class=\"text-muted\">\n                  <b>Version</b> : {{techlifyUpdate?.version}}\n                </small>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div fxLayoutAlign=\"end center\" class=\"text-muted\">\n        <button mat-icon-button type=\"button\" (click)=\"close()\">\n          <mat-icon>clear</mat-icon>\n        </button>\n      </div>\n    </div>\n  </div>\n\n  <div mat-dialog-content style=\"height: 500px;overflow: auto;\">\n    <div fxLayout=\"column\" class=\"text-muted\" style=\"margin-top: 1rem;\" [innerHtml]=\"techlifyUpdate?.description\">\n    </div>\n  </div>\n\n  <div mat-dialog-actions fxLayout=\"row\" [fxLayoutAlign]=\"!this.data?.isFromHistory ? 'space-between' : 'end'\">\n    <button type=\"button\" mat-button class=\"primary-color\" (click)=\"openUpdateHistory()\"\n      *ngIf=\"!this.data?.isFromHistory\">\n      <mat-icon>\n        history\n      </mat-icon>\n      Update History\n    </button>\n    <a *ngIf=\"techlifyUpdate?.learn_more_link\" [href]=\"techlifyUpdate?.learn_more_link\" target=\"_blank\"\n      style=\"text-decoration: none;\">\n      <button type=\"button\" mat-button class=\"text-muted\">\n        Learn More\n      </button>\n    </a>\n    <button type=\"button\" mat-stroked-button class=\"primary-color\" (click)=\"close()\">\n      OK\n    </button>\n  </div>\n</div>\n", styles: [".large-icon{transform:scale(2.3)}.primary-color{color:#009fdd!important}.primary-bg{background-color:#009fdd!important}.text-muted,.text-white{color:#d3d3d3}\n"], dependencies: [{ kind: "directive", type: i2$1.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]  ", exportAs: ["matButton"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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: "pipe", type: i2$1.DatePipe, name: "date" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UpdateViewComponent, decorators: [{
             type: Component,
@@ -7796,7 +7796,7 @@ let TechlifyUpdateHistoryComponent = class TechlifyUpdateHistoryComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TechlifyUpdateHistoryComponent, deps: [{ token: i1.MatDialog }, { token: TechlifyUpdateService }, { token: i1$5.UntypedFormBuilder }, { token: AlertService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TechlifyUpdateHistoryComponent, selector: "app-techlify-update-history", ngImport: i0, template: "<section class=\"p-4\" fxLayout=\"column\">\n  <h3 class=\"primary-color text-center\">\n    App Updates\n  </h3>\n  <form [formGroup]=\"filterFormGroup\" fxLayout=\"row wrap\" fxLayoutGap=\"0.5rem\" fxFlex=\"100%\" style=\"font-size: 12px;\">\n    <mat-form-field fxFlex=\"0 1 calc(100% - 0.5rem)\" fxFlex.gt-md=\"0 1 calc(15% - 0.5rem)\" appearance=\"outline\"\n      fxFlex.gt-sm=\"0 1 calc(20% - 0.5rem)\">\n      <input type=\"text\" matInput formControlName=\"search\" placeholder=\"Title\" autocomplete=\"off\" />\n      <button *ngIf=\"filterFormGroup.get('search').value\" matSuffix mat-icon-button (click)=\"resetFieldValue('search')\">\n        <mat-icon>close</mat-icon>\n      </button>\n    </mat-form-field>\n    <mat-form-field fxFlex=\"0 1 calc(100% - 0.5rem)\" fxFlex.gt-md=\"0 1 calc(15% - 0.5rem)\" appearance=\"outline\"\n      fxFlex.gt-sm=\"0 1 calc(20% - 0.5rem)\">\n      <input type=\"text\" matInput formControlName=\"version\" placeholder=\"Version\" autocomplete=\"off\" />\n      <button *ngIf=\"filterFormGroup.get('version').value\" matSuffix mat-icon-button\n        (click)=\"resetFieldValue('version')\">\n        <mat-icon>close</mat-icon>\n      </button>\n    </mat-form-field>\n  </form>\n\n  <table mat-table [dataSource]=\"techlifyUpdates\" class=\"mat-elevation-z8 w-100\" matSort multiTemplateDataRows\n    (matSortChange)=\"sortColumn($event)\" infiniteScroll [infiniteScrollDistance]=\"2\" [infiniteScrollThrottle]=\"50\"\n    (scrolled)=\"onScroll()\">\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    <!-- Course Column -->\n    <ng-container matColumnDef=\"title\">\n      <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear> Title </th>\n      <td mat-cell *matCellDef=\"let element\"> {{element?.title}} </td>\n    </ng-container>\n\n    <!--Is Pinned Column-->\n    <ng-container matColumnDef=\"is_pinned\">\n      <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear> Is Pinned </th>\n      <td mat-cell *matCellDef=\"let element\"> {{element?.is_pinned ? 'Yes' : 'No'}} </td>\n    </ng-container>\n\n    <!-- Version Column -->\n    <ng-container matColumnDef=\"version\">\n      <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear> Version </th>\n      <td mat-cell *matCellDef=\"let element\"> {{element?.version}} </td>\n    </ng-container>\n\n    <!-- Released On Column -->\n    <ng-container matColumnDef=\"released_on\">\n      <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear> Released On </th>\n      <td mat-cell *matCellDef=\"let element\"> {{element?.released_on | date:'mediumDate'}} </td>\n    </ng-container>\n\n    <!-- Learn More Link Column -->\n    <ng-container matColumnDef=\"learn_more_link\">\n      <th mat-header-cell *matHeaderCellDef> Learn more link </th>\n      <td mat-cell *matCellDef=\"let element\">\n        <a [href]=\"element?.learn_more_link\" target=\"_blank\">\n          {{element?.learn_more_link}}\n        </a>\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\">\n        <app-read-more [text]=\"element?.description\" [maxLength]=\"50\"></app-read-more>\n      </td>\n    </ng-container>\n\n    <!-- Creator Column -->\n    <ng-container matColumnDef=\"creator\">\n      <th mat-header-cell *matHeaderCellDef> Creator </th>\n      <td mat-cell *matCellDef=\"let element\">\n        {{element?.creator?.name}}\n        <div fxLayout class=\"small\">\n          {{element?.created_at | date : 'mediumDate'}}\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\" class=\"secondary-color\">\n        <button type=\"button\" class=\"secondary-color\" mat-icon-button (click)=\"openUpdateView(element)\">\n          <mat-icon>remove_red_eye</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</section>", styles: [""], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.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$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i6$1.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.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]", 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.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$1.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: i11.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i11.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i9.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i9.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i9.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i9.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i9.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i9.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i9.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i9.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i9.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i9.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: ReadMoreComponent, selector: "app-read-more", inputs: ["text", "maxLength"] }, { kind: "pipe", type: i3.DatePipe, name: "date" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TechlifyUpdateHistoryComponent, selector: "app-techlify-update-history", ngImport: i0, template: "<section class=\"p-4\" fxLayout=\"column\">\n  <h3 class=\"primary-color text-center\">\n    App Updates\n  </h3>\n  <form [formGroup]=\"filterFormGroup\" fxLayout=\"row wrap\" fxLayoutGap=\"0.5rem\" fxFlex=\"100%\" style=\"font-size: 12px;\">\n    <mat-form-field fxFlex=\"0 1 calc(100% - 0.5rem)\" fxFlex.gt-md=\"0 1 calc(15% - 0.5rem)\" appearance=\"outline\"\n      fxFlex.gt-sm=\"0 1 calc(20% - 0.5rem)\">\n      <input type=\"text\" matInput formControlName=\"search\" placeholder=\"Title\" autocomplete=\"off\" />\n      <button *ngIf=\"filterFormGroup.get('search').value\" matSuffix mat-icon-button (click)=\"resetFieldValue('search')\">\n        <mat-icon>close</mat-icon>\n      </button>\n    </mat-form-field>\n    <mat-form-field fxFlex=\"0 1 calc(100% - 0.5rem)\" fxFlex.gt-md=\"0 1 calc(15% - 0.5rem)\" appearance=\"outline\"\n      fxFlex.gt-sm=\"0 1 calc(20% - 0.5rem)\">\n      <input type=\"text\" matInput formControlName=\"version\" placeholder=\"Version\" autocomplete=\"off\" />\n      <button *ngIf=\"filterFormGroup.get('version').value\" matSuffix mat-icon-button\n        (click)=\"resetFieldValue('version')\">\n        <mat-icon>close</mat-icon>\n      </button>\n    </mat-form-field>\n  </form>\n\n  <table mat-table [dataSource]=\"techlifyUpdates\" class=\"mat-elevation-z8 w-100\" matSort multiTemplateDataRows\n    (matSortChange)=\"sortColumn($event)\" infiniteScroll [infiniteScrollDistance]=\"2\" [infiniteScrollThrottle]=\"50\"\n    (scrolled)=\"onScroll()\">\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    <!-- Course Column -->\n    <ng-container matColumnDef=\"title\">\n      <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear> Title </th>\n      <td mat-cell *matCellDef=\"let element\"> {{element?.title}} </td>\n    </ng-container>\n\n    <!--Is Pinned Column-->\n    <ng-container matColumnDef=\"is_pinned\">\n      <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear> Is Pinned </th>\n      <td mat-cell *matCellDef=\"let element\"> {{element?.is_pinned ? 'Yes' : 'No'}} </td>\n    </ng-container>\n\n    <!-- Version Column -->\n    <ng-container matColumnDef=\"version\">\n      <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear> Version </th>\n      <td mat-cell *matCellDef=\"let element\"> {{element?.version}} </td>\n    </ng-container>\n\n    <!-- Released On Column -->\n    <ng-container matColumnDef=\"released_on\">\n      <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear> Released On </th>\n      <td mat-cell *matCellDef=\"let element\"> {{element?.released_on | date:'mediumDate'}} </td>\n    </ng-container>\n\n    <!-- Learn More Link Column -->\n    <ng-container matColumnDef=\"learn_more_link\">\n      <th mat-header-cell *matHeaderCellDef> Learn more link </th>\n      <td mat-cell *matCellDef=\"let element\">\n        <a [href]=\"element?.learn_more_link\" target=\"_blank\">\n          {{element?.learn_more_link}}\n        </a>\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\">\n        <app-read-more [text]=\"element?.description\" [maxLength]=\"50\"></app-read-more>\n      </td>\n    </ng-container>\n\n    <!-- Creator Column -->\n    <ng-container matColumnDef=\"creator\">\n      <th mat-header-cell *matHeaderCellDef> Creator </th>\n      <td mat-cell *matCellDef=\"let element\">\n        {{element?.creator?.name}}\n        <div fxLayout class=\"small\">\n          {{element?.created_at | date : 'mediumDate'}}\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\" class=\"secondary-color\">\n        <button type=\"button\" class=\"secondary-color\" mat-icon-button (click)=\"openUpdateView(element)\">\n          <mat-icon>remove_red_eye</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</section>", styles: [""], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.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$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i6$1.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.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]", 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.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$1.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: i11.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i11.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i9.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i9.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i9.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i9.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i9.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i9.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i9.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i9.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i9.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i9.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: ReadMoreComponent, selector: "app-read-more", inputs: ["text", "maxLength"] }, { kind: "pipe", type: i2$1.DatePipe, name: "date" }] }); }
 };
 TechlifyUpdateHistoryComponent = __decorate([
     UntilDestroy()
@@ -8068,7 +8068,7 @@ class TechlifyUpdatesTeaserComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TechlifyUpdatesTeaserComponent, deps: [{ token: TechlifyUpdateService }, { token: ErrorHandlerService }, { token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TechlifyUpdatesTeaserComponent, selector: "app-techlify-updates-teaser", inputs: { rootNavUrl: "rootNavUrl", perPage: "perPage" }, ngImport: i0, template: "<div fxLayout=\"column\" fxLayoutGap=\"0.5rem\" *ngIf=\"updates?.length > 0\">\n    <mat-card fxLayout=\"column\" *ngFor=\"let update of updates\">\n        <div fxLayout=\"row\" fxLayoutGap=\"1rem\">\n            <mat-icon class=\"primary-color update-icon-wrapper\">\n                <span class=\"material-icons-outlined update-icon\">\n                    grading\n                </span>\n            </mat-icon>\n            <div fxLayout=\"column\" fxFlex>\n                <h5 class=\"primary-color m-0\">{{update?.title}}</h5>\n                <small><b>Released on : </b><span\n                        class=\"text-muted\">{{update?.released_on|date:'mediumDate'}}</span></small>\n            </div>\n        </div>\n        <div class=\"mb-2\">\n            <small><b>Version : </b><span class=\"text-muted\">{{update?.version}}</span></small>\n        </div>\n        <app-read-more class=\"text-muted mb-2\" [text]=\"update?.description\" [maxLength]=\"70\"></app-read-more>\n\n        <div class=\"mb-2\">\n            <button type=\"button\" mat-button class=\"primary-color text-small p-0 px-1\" (click)=\"openUpdateHistory()\">\n                <mat-icon class=\"mr-1\"> history</mat-icon>Update History\n            </button>\n        </div>\n        <div fxLayout>\n            <a *ngIf=\"update?.learn_more_link\" class=\"text-muted\" target=\"_blank\" [href]=\"update?.learn_more_link\">Learn\n                More</a>\n            <span fxFlex></span>\n            <button *ngIf=\"!update?.is_pinned\" type=\"button\" mat-stroked-button class=\"primary-color\"\n                (click)=\"createUpdateViewRecord(update)\">\n                Ok\n            </button>\n        </div>\n    </mat-card>\n</div>", styles: [".update-icon-wrapper{height:100%;width:40px}.update-icon{height:40px;font-size:40px}:host ::ng-deep app-read-more p{margin:0!important}\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: ReadMoreComponent, selector: "app-read-more", inputs: ["text", "maxLength"] }, { 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: "component", type: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "pipe", type: i3.DatePipe, name: "date" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TechlifyUpdatesTeaserComponent, selector: "app-techlify-updates-teaser", inputs: { rootNavUrl: "rootNavUrl", perPage: "perPage" }, ngImport: i0, template: "<div fxLayout=\"column\" fxLayoutGap=\"0.5rem\" *ngIf=\"updates?.length > 0\">\n    <mat-card fxLayout=\"column\" *ngFor=\"let update of updates\">\n        <div fxLayout=\"row\" fxLayoutGap=\"1rem\">\n            <mat-icon class=\"primary-color update-icon-wrapper\">\n                <span class=\"material-icons-outlined update-icon\">\n                    grading\n                </span>\n            </mat-icon>\n            <div fxLayout=\"column\" fxFlex>\n                <h5 class=\"primary-color m-0\">{{update?.title}}</h5>\n                <small><b>Released on : </b><span\n                        class=\"text-muted\">{{update?.released_on|date:'mediumDate'}}</span></small>\n            </div>\n        </div>\n        <div class=\"mb-2\">\n            <small><b>Version : </b><span class=\"text-muted\">{{update?.version}}</span></small>\n        </div>\n        <app-read-more class=\"text-muted mb-2\" [text]=\"update?.description\" [maxLength]=\"70\"></app-read-more>\n\n        <div class=\"mb-2\">\n            <button type=\"button\" mat-button class=\"primary-color text-small p-0 px-1\" (click)=\"openUpdateHistory()\">\n                <mat-icon class=\"mr-1\"> history</mat-icon>Update History\n            </button>\n        </div>\n        <div fxLayout>\n            <a *ngIf=\"update?.learn_more_link\" class=\"text-muted\" target=\"_blank\" [href]=\"update?.learn_more_link\">Learn\n                More</a>\n            <span fxFlex></span>\n            <button *ngIf=\"!update?.is_pinned\" type=\"button\" mat-stroked-button class=\"primary-color\"\n                (click)=\"createUpdateViewRecord(update)\">\n                Ok\n            </button>\n        </div>\n    </mat-card>\n</div>", styles: [".update-icon-wrapper{height:100%;width:40px}.update-icon{height:40px;font-size:40px}:host ::ng-deep app-read-more p{margin:0!important}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ReadMoreComponent, selector: "app-read-more", inputs: ["text", "maxLength"] }, { 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: "component", type: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "pipe", type: i2$1.DatePipe, name: "date" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TechlifyUpdatesTeaserComponent, decorators: [{
             type: Component,
@@ -8160,7 +8160,7 @@ let AuditLogViewModelComponent = class AuditLogViewModelComponent {
         this.dialogRef.close();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AuditLogViewModelComponent, deps: [{ token: i1.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: HttpService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AuditLogViewModelComponent, selector: "app-audit-log-view", ngImport: i0, template: "<div fxLayout=\"column\" class=\"m-4\" fxLayoutGap=\"1.5rem\">\n    <h3 class=\"text-center\">Audit Log</h3>\n    <div fxLayout=\"column\" fxLayoutGap=\"0.5rem\" *ngIf=\"logInfo\">\n        <div>Object Type: {{logInfo?.object_type}}</div>\n        <div>Object Id: {{logInfo?.object_id}}</div>\n        <div>Action: {{logInfo?.action}}</div>\n        <div>Created At: {{logInfo?.created_at | date:'medium'}}</div>\n        <div>Created By: {{logInfo?.user?.email}}</div>\n    </div>\n\n\n    <div class=\"container\" *ngIf=\"changeList.length > 0\">\n        <h4 class=\"font-weight-bold\"> Changes in Attributes</h4>\n        <table class=\"table table-striped table-sm border\">\n            <thead>\n                <tr>\n                    <th scope=\"col\">#</th>\n                    <th scope=\"col\">Attribute</th>\n                    <th scope=\"col\">Old Value</th>\n                    <th scope=\"col\">New Value</th>\n                </tr>\n            </thead>\n            <tbody>\n                <tr *ngFor=\"let change of changeList; let i= index;\">\n                    <th scope=\"row\">{{i+1}}</th>\n                    <td>{{change?.displayAttribute}}</td>\n                    <td>{{change?.oldValue}}</td>\n                    <td>{{change?.newValue}}</td>\n                </tr>\n            </tbody>\n        </table>\n\n    </div>\n\n    <div>\n        <button mat-raised-button (click)=\"close()\">Close</button>\n    </div>\n</div>", styles: [".scroll-container{max-height:400px;overflow: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: 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: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "pipe", type: i3.DatePipe, name: "date" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AuditLogViewModelComponent, selector: "app-audit-log-view", ngImport: i0, template: "<div fxLayout=\"column\" class=\"m-4\" fxLayoutGap=\"1.5rem\">\n    <h3 class=\"text-center\">Audit Log</h3>\n    <div fxLayout=\"column\" fxLayoutGap=\"0.5rem\" *ngIf=\"logInfo\">\n        <div>Object Type: {{logInfo?.object_type}}</div>\n        <div>Object Id: {{logInfo?.object_id}}</div>\n        <div>Action: {{logInfo?.action}}</div>\n        <div>Created At: {{logInfo?.created_at | date:'medium'}}</div>\n        <div>Created By: {{logInfo?.user?.email}}</div>\n    </div>\n\n\n    <div class=\"container\" *ngIf=\"changeList.length > 0\">\n        <h4 class=\"font-weight-bold\"> Changes in Attributes</h4>\n        <table class=\"table table-striped table-sm border\">\n            <thead>\n                <tr>\n                    <th scope=\"col\">#</th>\n                    <th scope=\"col\">Attribute</th>\n                    <th scope=\"col\">Old Value</th>\n                    <th scope=\"col\">New Value</th>\n                </tr>\n            </thead>\n            <tbody>\n                <tr *ngFor=\"let change of changeList; let i= index;\">\n                    <th scope=\"row\">{{i+1}}</th>\n                    <td>{{change?.displayAttribute}}</td>\n                    <td>{{change?.oldValue}}</td>\n                    <td>{{change?.newValue}}</td>\n                </tr>\n            </tbody>\n        </table>\n\n    </div>\n\n    <div>\n        <button mat-raised-button (click)=\"close()\">Close</button>\n    </div>\n</div>", styles: [".scroll-container{max-height:400px;overflow:auto}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.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.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: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "pipe", type: i2$1.DatePipe, name: "date" }] }); }
 };
 AuditLogViewModelComponent = __decorate([
     UntilDestroy()
@@ -8234,7 +8234,7 @@ class AuditLogForModelComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AuditLogForModelComponent, deps: [{ token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AuditLogForModelComponent, selector: "app-audit-log-for-model", inputs: { isIconView: "isIconView", modelType: "modelType", modelId: "modelId", logView: "logView" }, ngImport: i0, template: "<ng-container *ngIf=\"isIconView\">\n    <app-techlify-icon name=\"history\" matTooltip=\"Audit Logs\" (click)=\"$event.stopPropagation();getLogView()\"\n        class=\"clickable\"></app-techlify-icon>\n</ng-container>\n\n\n<ng-container *ngIf=\"!isIconView\">\n    <button type=\"button\" *ngIf=\"logView==='recent'\" mat-icon-button matTooltip=\"Recent Audit Log\"\n        (click)=\"$event.stopPropagation();getLogView()\">\n        <mat-icon>history</mat-icon>\n    </button>\n\n    <button type=\"button\" *ngIf=\"logView==='all'\" mat-icon-button matTooltip=\"All Audit Logs\"\n        (click)=\"$event.stopPropagation();getLogsView()\">\n        <mat-icon>history</mat-icon>\n    </button>\n</ng-container>", styles: [".icon-md{height:24px!important;width:24px!important;font-size:24px!important;margin:0 1px}.icon-sm{height:20px!important;width:20px!important;font-size:20px!important}.icon-xs{height:16px!important;width:16px!important;font-size:16px!important}.fl-md{width:200px!important}.fl-md .mat-mdc-form-field{width:100%!important}.fl-sm{width:150px!important}.fl-sm .mat-mdc-form-field{width:100%!important}.mat-btn-md{height:25px!important;padding:0 8px!important}.fs-12{font-size:12px!important}.fs-16{font-size:16px!important}.fs-13{font-size:13px!important}.fs-18{font-size:18px!important}.clickable:hover{cursor:pointer}.mat-mdc-form-field-hint-wrapper{padding:0 4px!important}.nil-subscript-wrapper .mat-mdc-form-field-subscript-wrapper{height:0!important}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: TechlifyIconComponent, selector: "app-techlify-icon", inputs: ["name", "size"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AuditLogForModelComponent, selector: "app-audit-log-for-model", inputs: { isIconView: "isIconView", modelType: "modelType", modelId: "modelId", logView: "logView" }, ngImport: i0, template: "<ng-container *ngIf=\"isIconView\">\n    <app-techlify-icon name=\"history\" matTooltip=\"Audit Logs\" (click)=\"$event.stopPropagation();getLogView()\"\n        class=\"clickable\"></app-techlify-icon>\n</ng-container>\n\n\n<ng-container *ngIf=\"!isIconView\">\n    <button type=\"button\" *ngIf=\"logView==='recent'\" mat-icon-button matTooltip=\"Recent Audit Log\"\n        (click)=\"$event.stopPropagation();getLogView()\">\n        <mat-icon>history</mat-icon>\n    </button>\n\n    <button type=\"button\" *ngIf=\"logView==='all'\" mat-icon-button matTooltip=\"All Audit Logs\"\n        (click)=\"$event.stopPropagation();getLogsView()\">\n        <mat-icon>history</mat-icon>\n    </button>\n</ng-container>", styles: [".icon-md{height:24px!important;width:24px!important;font-size:24px!important;margin:0 1px}.icon-sm{height:20px!important;width:20px!important;font-size:20px!important}.icon-xs{height:16px!important;width:16px!important;font-size:16px!important}.fl-md{width:200px!important}.fl-md .mat-mdc-form-field{width:100%!important}.fl-sm{width:150px!important}.fl-sm .mat-mdc-form-field{width:100%!important}.mat-btn-md{height:25px!important;padding:0 8px!important}.fs-12{font-size:12px!important}.fs-16{font-size:16px!important}.fs-13{font-size:13px!important}.fs-18{font-size:18px!important}.clickable:hover{cursor:pointer}.mat-mdc-form-field-hint-wrapper{padding:0 4px!important}.nil-subscript-wrapper .mat-mdc-form-field-subscript-wrapper{height:0!important}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: TechlifyIconComponent, selector: "app-techlify-icon", inputs: ["name", "size"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AuditLogForModelComponent, decorators: [{
             type: Component,
@@ -8512,13 +8512,13 @@ class AuditLogViewComponent {
         const delta = jsondiffpatch.diff(this.logInfo?.pre_object, this.logInfo?.object);
         document.getElementById('jsondiff').innerHTML = jsondiffpatch.formatters.html.format(delta, this.logInfo?.pre_object);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AuditLogViewComponent, deps: [{ token: DataManager }, { token: i1$1.ActivatedRoute }, { token: i3.Location }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AuditLogViewComponent, selector: "app-audit-log-view", ngImport: i0, template: "<div fxLayout=\"column\" class=\"m-4\" fxLayoutGap=\"1.5rem\">\n    <h3 class=\"text-center\">Audit Log</h3>\n    <div fxLayout=\"column\" fxLayoutGap=\"0.5rem\" *ngIf=\"logInfo\">\n        <div>Object Type: {{logInfo?.object_type}}</div>\n        <div>Object Id: {{logInfo?.object_id}}</div>\n        <div>Action: {{logInfo?.action}}</div>\n        <div>Created At: {{logInfo?.created_at | date:'medium'}}</div>\n        <div>Created By: {{logInfo?.user?.email}}</div>\n    </div>\n\n\n    <div fxLayout=\"column\" *ngIf=\"logInfo?.action !== 'deleted'\">\n        <div>\n            <button mat-raised-button color=\"primary\" (click)=\"showDeltaChanges = !showDeltaChanges\">\n                {{showDeltaChanges?'Hide JSON Changes': 'Show JSON Changes'}}\n            </button>\n        </div>\n        <div [hidden]=\"!showDeltaChanges\">\n            <h4 class=\"font-weight-bold\" *ngIf=\"logInfo\">Changes in JSON</h4>\n            <div id=\"jsondiff\"></div>\n        </div>\n    </div>\n\n    <div class=\"container\" *ngIf=\"changeList.length > 0\">\n        <h4 class=\"font-weight-bold\"> Changes in Attributes</h4>\n        <table class=\"table table-striped table-sm border\">\n            <thead>\n                <tr>\n                    <th scope=\"col\">#</th>\n                    <th scope=\"col\">Attribute</th>\n                    <th scope=\"col\">Old Value</th>\n                    <th scope=\"col\">New Value</th>\n                </tr>\n            </thead>\n            <tbody>\n                <tr *ngFor=\"let change of changeList; let i= index;\">\n                    <th scope=\"row\">{{i+1}}</th>\n                    <td>{{change?.displayAttribute}}</td>\n                    <td>{{change?.oldValue}}</td>\n                    <td>{{change?.newValue}}</td>\n                </tr>\n            </tbody>\n        </table>\n\n    </div>\n</div>", styles: [""], 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: 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: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "pipe", type: i3.DatePipe, name: "date" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AuditLogViewComponent, deps: [{ token: DataManager }, { token: i1$1.ActivatedRoute }, { token: i2$1.Location }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AuditLogViewComponent, selector: "app-audit-log-view", ngImport: i0, template: "<div fxLayout=\"column\" class=\"m-4\" fxLayoutGap=\"1.5rem\">\n    <h3 class=\"text-center\">Audit Log</h3>\n    <div fxLayout=\"column\" fxLayoutGap=\"0.5rem\" *ngIf=\"logInfo\">\n        <div>Object Type: {{logInfo?.object_type}}</div>\n        <div>Object Id: {{logInfo?.object_id}}</div>\n        <div>Action: {{logInfo?.action}}</div>\n        <div>Created At: {{logInfo?.created_at | date:'medium'}}</div>\n        <div>Created By: {{logInfo?.user?.email}}</div>\n    </div>\n\n\n    <div fxLayout=\"column\" *ngIf=\"logInfo?.action !== 'deleted'\">\n        <div>\n            <button mat-raised-button color=\"primary\" (click)=\"showDeltaChanges = !showDeltaChanges\">\n                {{showDeltaChanges?'Hide JSON Changes': 'Show JSON Changes'}}\n            </button>\n        </div>\n        <div [hidden]=\"!showDeltaChanges\">\n            <h4 class=\"font-weight-bold\" *ngIf=\"logInfo\">Changes in JSON</h4>\n            <div id=\"jsondiff\"></div>\n        </div>\n    </div>\n\n    <div class=\"container\" *ngIf=\"changeList.length > 0\">\n        <h4 class=\"font-weight-bold\"> Changes in Attributes</h4>\n        <table class=\"table table-striped table-sm border\">\n            <thead>\n                <tr>\n                    <th scope=\"col\">#</th>\n                    <th scope=\"col\">Attribute</th>\n                    <th scope=\"col\">Old Value</th>\n                    <th scope=\"col\">New Value</th>\n                </tr>\n            </thead>\n            <tbody>\n                <tr *ngFor=\"let change of changeList; let i= index;\">\n                    <th scope=\"row\">{{i+1}}</th>\n                    <td>{{change?.displayAttribute}}</td>\n                    <td>{{change?.oldValue}}</td>\n                    <td>{{change?.newValue}}</td>\n                </tr>\n            </tbody>\n        </table>\n\n    </div>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.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.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: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "pipe", type: i2$1.DatePipe, name: "date" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AuditLogViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-audit-log-view', template: "<div fxLayout=\"column\" class=\"m-4\" fxLayoutGap=\"1.5rem\">\n    <h3 class=\"text-center\">Audit Log</h3>\n    <div fxLayout=\"column\" fxLayoutGap=\"0.5rem\" *ngIf=\"logInfo\">\n        <div>Object Type: {{logInfo?.object_type}}</div>\n        <div>Object Id: {{logInfo?.object_id}}</div>\n        <div>Action: {{logInfo?.action}}</div>\n        <div>Created At: {{logInfo?.created_at | date:'medium'}}</div>\n        <div>Created By: {{logInfo?.user?.email}}</div>\n    </div>\n\n\n    <div fxLayout=\"column\" *ngIf=\"logInfo?.action !== 'deleted'\">\n        <div>\n            <button mat-raised-button color=\"primary\" (click)=\"showDeltaChanges = !showDeltaChanges\">\n                {{showDeltaChanges?'Hide JSON Changes': 'Show JSON Changes'}}\n            </button>\n        </div>\n        <div [hidden]=\"!showDeltaChanges\">\n            <h4 class=\"font-weight-bold\" *ngIf=\"logInfo\">Changes in JSON</h4>\n            <div id=\"jsondiff\"></div>\n        </div>\n    </div>\n\n    <div class=\"container\" *ngIf=\"changeList.length > 0\">\n        <h4 class=\"font-weight-bold\"> Changes in Attributes</h4>\n        <table class=\"table table-striped table-sm border\">\n            <thead>\n                <tr>\n                    <th scope=\"col\">#</th>\n                    <th scope=\"col\">Attribute</th>\n                    <th scope=\"col\">Old Value</th>\n                    <th scope=\"col\">New Value</th>\n                </tr>\n            </thead>\n            <tbody>\n                <tr *ngFor=\"let change of changeList; let i= index;\">\n                    <th scope=\"row\">{{i+1}}</th>\n                    <td>{{change?.displayAttribute}}</td>\n                    <td>{{change?.oldValue}}</td>\n                    <td>{{change?.newValue}}</td>\n                </tr>\n            </tbody>\n        </table>\n\n    </div>\n</div>" }]
-        }], ctorParameters: () => [{ type: DataManager }, { type: i1$1.ActivatedRoute }, { type: i3.Location }] });
+        }], ctorParameters: () => [{ type: DataManager }, { type: i1$1.ActivatedRoute }, { type: i2$1.Location }] });
 
 const routes$m = [];
 class AuditLogViewRoutingModule {
@@ -8617,7 +8617,7 @@ class ImportSuccessComponent {
     ngOnInit() {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ImportSuccessComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ImportSuccessComponent, selector: "app-import-success", inputs: { data: "data", config: "config" }, ngImport: i0, template: "<mat-card fxFlex=\"100%\" fxLayoutAlign=\"center center\" class=\"p-0\">\n  <mat-card-content class=\"pt-3\" fxLayout=\"column\" fxLayoutAlign=\"center center\">\n    <mat-icon style=\"transform: scale(2);\" class=\"text-success\">\n      <span class=\"material-icons-outlined\">\n        check_circle\n      </span>\n    </mat-icon>\n    <h3 class=\"font-weight-bold p-3 text-success\" fxLayoutAlign=\"center center\">\n      {{data?.no_of_recrods}} Records have been successfully imported\n    </h3>\n    <ng-container *ngIf=\"config.viewRouterLink\">\n      <div class=\"text-muted p-3 text-center\" fxLayoutAlign=\"center center\">\n        Click the button below to view the imported records.\n      </div>\n      <div class=\"text-muted p-3 text-center\" fxLayoutAlign=\"center center\">\n        <button type=\"button\" mat-raised-button [routerLink]=\"[config.viewRouterLink]\" [queryParams]=\"{import_id: data?.import_id}\">\n          View Imported Records\n        </button>\n      </div>\n    </ng-container>\n  </mat-card-content>\n</mat-card>\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.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: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "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]  ", exportAs: ["matButton"] }, { kind: "component", type: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ImportSuccessComponent, selector: "app-import-success", inputs: { data: "data", config: "config" }, ngImport: i0, template: "<mat-card fxFlex=\"100%\" fxLayoutAlign=\"center center\" class=\"p-0\">\n  <mat-card-content class=\"pt-3\" fxLayout=\"column\" fxLayoutAlign=\"center center\">\n    <mat-icon style=\"transform: scale(2);\" class=\"text-success\">\n      <span class=\"material-icons-outlined\">\n        check_circle\n      </span>\n    </mat-icon>\n    <h3 class=\"font-weight-bold p-3 text-success\" fxLayoutAlign=\"center center\">\n      {{data?.no_of_recrods}} Records have been successfully imported\n    </h3>\n    <ng-container *ngIf=\"config.viewRouterLink\">\n      <div class=\"text-muted p-3 text-center\" fxLayoutAlign=\"center center\">\n        Click the button below to view the imported records.\n      </div>\n      <div class=\"text-muted p-3 text-center\" fxLayoutAlign=\"center center\">\n        <button type=\"button\" mat-raised-button [routerLink]=\"[config.viewRouterLink]\" [queryParams]=\"{import_id: data?.import_id}\">\n          View Imported Records\n        </button>\n      </div>\n    </ng-container>\n  </mat-card-content>\n</mat-card>\n", styles: [""], dependencies: [{ kind: "directive", type: i2$1.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.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: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "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]  ", exportAs: ["matButton"] }, { kind: "component", type: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ImportSuccessComponent, decorators: [{
             type: Component,
@@ -8681,7 +8681,7 @@ class ImportHistoryListComponent {
         //Until destroyed uses it
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ImportHistoryListComponent, deps: [{ token: ErrorHandlerService }, { token: HttpService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ImportHistoryListComponent, selector: "app-import-history-list", inputs: { config: "config" }, ngImport: i0, template: "<section fxLayout=\"column\">\n  <h5 class=\"primary-color py-3\">\n    Import History\n  </h5>\n  <table mat-table [dataSource]=\"histories\" class=\"mat-elevation-z8 w-100\" infi infiniteScroll\n    [infiniteScrollDistance]=\"2\" [infiniteScrollThrottle]=\"50\" (scrolled)=\"onScroll()\">\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    <!-- Date Column -->\n    <ng-container matColumnDef=\"date\">\n      <th mat-header-cell *matHeaderCellDef> Date </th>\n      <td mat-cell *matCellDef=\"let element\"> {{element?.created_at | date:'medium'}} </td>\n    </ng-container>\n\n    <!-- Imported By Column -->\n    <ng-container matColumnDef=\"imported_by\">\n      <th mat-header-cell *matHeaderCellDef> Imported By </th>\n      <td mat-cell *matCellDef=\"let element\"> {{element?.creator?.name}} </td>\n    </ng-container>\n\n    <!-- No of records Column -->\n    <ng-container matColumnDef=\"no_of_records\">\n      <th mat-header-cell *matHeaderCellDef> # of Records </th>\n      <td mat-cell *matCellDef=\"let element\">\n        <a *ngIf=\"config.viewRouterLink\" href=\"javascript:;\"\n          [routerLink]=\"[config.viewRouterLink]\" [queryParams]=\"{import_id: element?.id}\">\n          {{element?.no_of_records}}\n        </a>\n        <span *ngIf=\"!config.viewRouterLink\">\n          {{element?.no_of_records}}\n        </span>\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</section>\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: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i9.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i9.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i9.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i9.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i9.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i9.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i9.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i9.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i9.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i9.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i6$1.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 { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ImportHistoryListComponent, selector: "app-import-history-list", inputs: { config: "config" }, ngImport: i0, template: "<section fxLayout=\"column\">\n  <h5 class=\"primary-color py-3\">\n    Import History\n  </h5>\n  <table mat-table [dataSource]=\"histories\" class=\"mat-elevation-z8 w-100\" infi infiniteScroll\n    [infiniteScrollDistance]=\"2\" [infiniteScrollThrottle]=\"50\" (scrolled)=\"onScroll()\">\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    <!-- Date Column -->\n    <ng-container matColumnDef=\"date\">\n      <th mat-header-cell *matHeaderCellDef> Date </th>\n      <td mat-cell *matCellDef=\"let element\"> {{element?.created_at | date:'medium'}} </td>\n    </ng-container>\n\n    <!-- Imported By Column -->\n    <ng-container matColumnDef=\"imported_by\">\n      <th mat-header-cell *matHeaderCellDef> Imported By </th>\n      <td mat-cell *matCellDef=\"let element\"> {{element?.creator?.name}} </td>\n    </ng-container>\n\n    <!-- No of records Column -->\n    <ng-container matColumnDef=\"no_of_records\">\n      <th mat-header-cell *matHeaderCellDef> # of Records </th>\n      <td mat-cell *matCellDef=\"let element\">\n        <a *ngIf=\"config.viewRouterLink\" href=\"javascript:;\"\n          [routerLink]=\"[config.viewRouterLink]\" [queryParams]=\"{import_id: element?.id}\">\n          {{element?.no_of_records}}\n        </a>\n        <span *ngIf=\"!config.viewRouterLink\">\n          {{element?.no_of_records}}\n        </span>\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</section>\n", styles: [""], dependencies: [{ kind: "directive", type: i2$1.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: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i9.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i9.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i9.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i9.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i9.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i9.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i9.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i9.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i9.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i9.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i6$1.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: i2$1.DatePipe, name: "date" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ImportHistoryListComponent, decorators: [{
             type: Component,
@@ -8813,13 +8813,13 @@ class FieldMappingComponent {
     reUpload() {
         this.onReUpload.emit(true);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FieldMappingComponent, deps: [{ token: i1$5.UntypedFormBuilder }, { token: FormValidatorService }, { token: i0.ChangeDetectorRef }, { token: i3.Location }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FieldMappingComponent, selector: "app-field-mapping", inputs: { data: "data", config: "config" }, outputs: { onSave: "onSave", onReUpload: "onReUpload" }, ngImport: i0, template: "<div fxLayout=\"column\" class=\"mt-2\">\n  <div fxLayout=\"row wrap\" class=\"pb-3\">\n    <h5 fxFlex=\"30%\" class=\"primary-color\">Summary</h5>\n    <div fxFlex=\"70%\" fxLayoutAlign=\"center center\">\n      <h5 class=\"secondary-color\">\n        <span class=\"font-weight-bold\">{{data.length}}</span>\n      </h5>\n      <span class=\"text-muted ml-2\"> Records Found In Uploaded File</span>\n    </div>\n  </div>\n\n  <div>\n    <mat-divider></mat-divider>\n  </div>\n\n  <form [formGroup]=\"importMappingForm\" (ngSubmit)=\"next()\" fxLayout=\"column\" class=\"pt-3\">\n    <h5 class=\"primary-color pb-2\">Properties</h5>\n    <table style=\"width: 100%;\" class=\"table table-sm table-striped\">\n      <tr class=\"table-header-row\">\n        <th>Column Headers From File</th>\n        <th>Preview Information</th>\n        <th>Property</th>\n      </tr>\n      <ng-container formArrayName=\"fields\">\n        <tr *ngFor=\"let field of fieldsArray.controls; let i = index\" [formGroupName]=\"i\">\n          <td>{{ field.get('label').value }}</td>\n          <td>{{ field.get('value').value }}</td>\n          <td>\n            <mat-form-field fxFlex=\"100%\" appearance=\"outline\">\n              <mat-label>Select Property</mat-label>\n              <mat-select placeholder=\"Select Property\" formControlName=\"property\" required\n                (selectionChange)=\"updatePropertyType($event, i)\">\n                <mat-option *ngFor=\"let property of properties\" [value]=\"property.value\">\n                  {{property.label}}\n                </mat-option>\n              </mat-select>\n              <mat-error *ngIf=\"isFieldValid('property', fieldsArray.controls[i])\">\n                {{getErrorMessage('property', fieldsArray.controls[i])}}\n              </mat-error>\n            </mat-form-field>\n            <button type=\"button\" mat-icon-button (click)=\"removeField(i)\" *ngIf=\"fieldsArray.length > 1\"\n              matTooltip=\"Remove column\" matTooltipPosition=\"right\">\n              <mat-icon class=\"text-danger\">remove_circle</mat-icon>\n            </button>\n          </td>\n        </tr>\n      </ng-container>\n    </table>\n\n    <div class=\"mt-1 d-flex flex-row gap-2 justify-content-end align-items-center\">\n      <button mat-button class=\"mt-2 mr-2\" type=\"button\" (click)=\"location.back()\">\n        Cancel\n      </button>\n      <button mat-stroked-button class=\"mt-2 mr-2 primary-color\" type=\"button\" (click)=\"reUpload()\">\n        <mat-icon>\n          <span class=\"material-icons-outlined\">\n            file_upload\n          </span>\n        </mat-icon>\n        Re-upload\n      </button>\n      <button mat-stroked-button class=\"mt-2 primary-bg\" type=\"submit\">\n        Next\n        <mat-icon>\n          chevron_right\n        </mat-icon>\n      </button>\n    </div>\n  </form>\n</div>", styles: ["table{width:100%}th,td{padding:1%}.table-header-row{background-color:#e6e4e4;color:#000;font-weight:bolder}\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$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$5.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1$5.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { 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.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]  ", exportAs: ["matButton"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", 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: "component", type: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i9$2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i5$2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FieldMappingComponent, deps: [{ token: i1$5.UntypedFormBuilder }, { token: FormValidatorService }, { token: i0.ChangeDetectorRef }, { token: i2$1.Location }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FieldMappingComponent, selector: "app-field-mapping", inputs: { data: "data", config: "config" }, outputs: { onSave: "onSave", onReUpload: "onReUpload" }, ngImport: i0, template: "<div fxLayout=\"column\" class=\"mt-2\">\n  <div fxLayout=\"row wrap\" class=\"pb-3\">\n    <h5 fxFlex=\"30%\" class=\"primary-color\">Summary</h5>\n    <div fxFlex=\"70%\" fxLayoutAlign=\"center center\">\n      <h5 class=\"secondary-color\">\n        <span class=\"font-weight-bold\">{{data.length}}</span>\n      </h5>\n      <span class=\"text-muted ml-2\"> Records Found In Uploaded File</span>\n    </div>\n  </div>\n\n  <div>\n    <mat-divider></mat-divider>\n  </div>\n\n  <form [formGroup]=\"importMappingForm\" (ngSubmit)=\"next()\" fxLayout=\"column\" class=\"pt-3\">\n    <h5 class=\"primary-color pb-2\">Properties</h5>\n    <table style=\"width: 100%;\" class=\"table table-sm table-striped\">\n      <tr class=\"table-header-row\">\n        <th>Column Headers From File</th>\n        <th>Preview Information</th>\n        <th>Property</th>\n      </tr>\n      <ng-container formArrayName=\"fields\">\n        <tr *ngFor=\"let field of fieldsArray.controls; let i = index\" [formGroupName]=\"i\">\n          <td>{{ field.get('label').value }}</td>\n          <td>{{ field.get('value').value }}</td>\n          <td>\n            <mat-form-field fxFlex=\"100%\" appearance=\"outline\">\n              <mat-label>Select Property</mat-label>\n              <mat-select placeholder=\"Select Property\" formControlName=\"property\" required\n                (selectionChange)=\"updatePropertyType($event, i)\">\n                <mat-option *ngFor=\"let property of properties\" [value]=\"property.value\">\n                  {{property.label}}\n                </mat-option>\n              </mat-select>\n              <mat-error *ngIf=\"isFieldValid('property', fieldsArray.controls[i])\">\n                {{getErrorMessage('property', fieldsArray.controls[i])}}\n              </mat-error>\n            </mat-form-field>\n            <button type=\"button\" mat-icon-button (click)=\"removeField(i)\" *ngIf=\"fieldsArray.length > 1\"\n              matTooltip=\"Remove column\" matTooltipPosition=\"right\">\n              <mat-icon class=\"text-danger\">remove_circle</mat-icon>\n            </button>\n          </td>\n        </tr>\n      </ng-container>\n    </table>\n\n    <div class=\"mt-1 d-flex flex-row gap-2 justify-content-end align-items-center\">\n      <button mat-button class=\"mt-2 mr-2\" type=\"button\" (click)=\"location.back()\">\n        Cancel\n      </button>\n      <button mat-stroked-button class=\"mt-2 mr-2 primary-color\" type=\"button\" (click)=\"reUpload()\">\n        <mat-icon>\n          <span class=\"material-icons-outlined\">\n            file_upload\n          </span>\n        </mat-icon>\n        Re-upload\n      </button>\n      <button mat-stroked-button class=\"mt-2 primary-bg\" type=\"submit\">\n        Next\n        <mat-icon>\n          chevron_right\n        </mat-icon>\n      </button>\n    </div>\n  </form>\n</div>", styles: ["table{width:100%}th,td{padding:1%}.table-header-row{background-color:#e6e4e4;color:#000;font-weight:bolder}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$5.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1$5.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { 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.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]  ", exportAs: ["matButton"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", 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: "component", type: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i9$2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i5$2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FieldMappingComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-field-mapping', template: "<div fxLayout=\"column\" class=\"mt-2\">\n  <div fxLayout=\"row wrap\" class=\"pb-3\">\n    <h5 fxFlex=\"30%\" class=\"primary-color\">Summary</h5>\n    <div fxFlex=\"70%\" fxLayoutAlign=\"center center\">\n      <h5 class=\"secondary-color\">\n        <span class=\"font-weight-bold\">{{data.length}}</span>\n      </h5>\n      <span class=\"text-muted ml-2\"> Records Found In Uploaded File</span>\n    </div>\n  </div>\n\n  <div>\n    <mat-divider></mat-divider>\n  </div>\n\n  <form [formGroup]=\"importMappingForm\" (ngSubmit)=\"next()\" fxLayout=\"column\" class=\"pt-3\">\n    <h5 class=\"primary-color pb-2\">Properties</h5>\n    <table style=\"width: 100%;\" class=\"table table-sm table-striped\">\n      <tr class=\"table-header-row\">\n        <th>Column Headers From File</th>\n        <th>Preview Information</th>\n        <th>Property</th>\n      </tr>\n      <ng-container formArrayName=\"fields\">\n        <tr *ngFor=\"let field of fieldsArray.controls; let i = index\" [formGroupName]=\"i\">\n          <td>{{ field.get('label').value }}</td>\n          <td>{{ field.get('value').value }}</td>\n          <td>\n            <mat-form-field fxFlex=\"100%\" appearance=\"outline\">\n              <mat-label>Select Property</mat-label>\n              <mat-select placeholder=\"Select Property\" formControlName=\"property\" required\n                (selectionChange)=\"updatePropertyType($event, i)\">\n                <mat-option *ngFor=\"let property of properties\" [value]=\"property.value\">\n                  {{property.label}}\n                </mat-option>\n              </mat-select>\n              <mat-error *ngIf=\"isFieldValid('property', fieldsArray.controls[i])\">\n                {{getErrorMessage('property', fieldsArray.controls[i])}}\n              </mat-error>\n            </mat-form-field>\n            <button type=\"button\" mat-icon-button (click)=\"removeField(i)\" *ngIf=\"fieldsArray.length > 1\"\n              matTooltip=\"Remove column\" matTooltipPosition=\"right\">\n              <mat-icon class=\"text-danger\">remove_circle</mat-icon>\n            </button>\n          </td>\n        </tr>\n      </ng-container>\n    </table>\n\n    <div class=\"mt-1 d-flex flex-row gap-2 justify-content-end align-items-center\">\n      <button mat-button class=\"mt-2 mr-2\" type=\"button\" (click)=\"location.back()\">\n        Cancel\n      </button>\n      <button mat-stroked-button class=\"mt-2 mr-2 primary-color\" type=\"button\" (click)=\"reUpload()\">\n        <mat-icon>\n          <span class=\"material-icons-outlined\">\n            file_upload\n          </span>\n        </mat-icon>\n        Re-upload\n      </button>\n      <button mat-stroked-button class=\"mt-2 primary-bg\" type=\"submit\">\n        Next\n        <mat-icon>\n          chevron_right\n        </mat-icon>\n      </button>\n    </div>\n  </form>\n</div>", styles: ["table{width:100%}th,td{padding:1%}.table-header-row{background-color:#e6e4e4;color:#000;font-weight:bolder}\n"] }]
-        }], ctorParameters: () => [{ type: i1$5.UntypedFormBuilder }, { type: FormValidatorService }, { type: i0.ChangeDetectorRef }, { type: i3.Location }], propDecorators: { data: [{
+        }], ctorParameters: () => [{ type: i1$5.UntypedFormBuilder }, { type: FormValidatorService }, { type: i0.ChangeDetectorRef }, { type: i2$1.Location }], propDecorators: { data: [{
                 type: Input
             }], config: [{
                 type: Input
@@ -8843,13 +8843,13 @@ class FailedItemsListComponent {
     reUpload() {
         this.onReUpload.emit(true);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FailedItemsListComponent, deps: [{ token: i3.Location }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FailedItemsListComponent, selector: "app-failed-items-list", inputs: { failedItems: "failedItems", selectedFields: "selectedFields" }, outputs: { onReUpload: "onReUpload" }, ngImport: i0, template: "<div *ngIf=\"failedItems.length\" class=\"mt-4\" fxLayout=\"column\">\n  <div fxLayout=\"row wrap\" class=\"pb-3\">\n    <h5 fxFlex=\"30%\" class=\"primary-color\">Summary</h5>\n    <div fxFlex=\"70%\" fxLayoutAlign=\"center center\">\n      <h5 class=\"secondary-color\">\n        <span class=\"font-weight-bold\">{{failedItems.length}}</span>\n      </h5>\n      <span class=\"text-muted ml-2\"> Error(s) Found In Uploaded File</span>\n    </div>\n  </div>\n\n  <div>\n    <mat-divider></mat-divider>\n  </div>\n  <div fxLayout=\"row wrap\" class=\"pt-3\">\n    <h5 class=\"primary-color\">Errors</h5>\n    <div style=\"overflow-x: auto;width: 1100px;\" class=\"pt-3\">\n      <table class=\"table table-bordered table-striped table-hover table-sm ml-4 w-100\">\n        <thead>\n          <tr>\n            <th>#</th>\n            <th *ngFor=\"let field of selectedFields;\">{{field?.label}}</th>\n            <th class=\"text-danger\">Error</th>\n          </tr>\n        </thead>\n        <tbody>\n          <ng-container *ngFor=\"let timesheet of failedItems; let i=index\">\n            <tr>\n              <td>{{i + 1}}</td>\n              <td *ngFor=\"let field of selectedFields;\">\n                <ng-container *ngIf=\"(field.propertyType == 'date' || field.propertyType == 'dateTime')\n                 &&isValidDate(timesheet[field.property]);else elseProperty;\">\n                  {{ timesheet[field.property] | date: 'MMM d, y, H:mm:ss' }}\n                </ng-container>\n                <ng-template #elseProperty>\n                  {{ timesheet[field.property] }}\n                </ng-template>\n              </td>\n              <td class=\"text-danger\">\n                {{timesheet?.error}}\n              </td>\n            </tr>\n          </ng-container>\n        </tbody>\n      </table>\n    </div>\n  </div>\n  <div class=\"mt-1\" fxFlex=\"100%\" fxLayoutAlign=\"end\">\n    <button mat-button class=\"mt-2 mr-2\" type=\"button\" (click)=\"location.back()\">\n      Close\n    </button>\n    <button mat-stroked-button class=\"mt-2 mr-2 primary-color\" type=\"button\" (click)=\"reUpload()\">\n      <mat-icon>\n        <span class=\"material-icons-outlined\">\n          file_upload\n        </span>\n      </mat-icon>\n      Re-upload\n    </button>\n  </div>\n</div>\n", styles: [""], 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: 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.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]  ", exportAs: ["matButton"] }, { kind: "component", type: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "pipe", type: i3.DatePipe, name: "date" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FailedItemsListComponent, deps: [{ token: i2$1.Location }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FailedItemsListComponent, selector: "app-failed-items-list", inputs: { failedItems: "failedItems", selectedFields: "selectedFields" }, outputs: { onReUpload: "onReUpload" }, ngImport: i0, template: "<div *ngIf=\"failedItems.length\" class=\"mt-4\" fxLayout=\"column\">\n  <div fxLayout=\"row wrap\" class=\"pb-3\">\n    <h5 fxFlex=\"30%\" class=\"primary-color\">Summary</h5>\n    <div fxFlex=\"70%\" fxLayoutAlign=\"center center\">\n      <h5 class=\"secondary-color\">\n        <span class=\"font-weight-bold\">{{failedItems.length}}</span>\n      </h5>\n      <span class=\"text-muted ml-2\"> Error(s) Found In Uploaded File</span>\n    </div>\n  </div>\n\n  <div>\n    <mat-divider></mat-divider>\n  </div>\n  <div fxLayout=\"row wrap\" class=\"pt-3\">\n    <h5 class=\"primary-color\">Errors</h5>\n    <div style=\"overflow-x: auto;width: 1100px;\" class=\"pt-3\">\n      <table class=\"table table-bordered table-striped table-hover table-sm ml-4 w-100\">\n        <thead>\n          <tr>\n            <th>#</th>\n            <th *ngFor=\"let field of selectedFields;\">{{field?.label}}</th>\n            <th class=\"text-danger\">Error</th>\n          </tr>\n        </thead>\n        <tbody>\n          <ng-container *ngFor=\"let timesheet of failedItems; let i=index\">\n            <tr>\n              <td>{{i + 1}}</td>\n              <td *ngFor=\"let field of selectedFields;\">\n                <ng-container *ngIf=\"(field.propertyType == 'date' || field.propertyType == 'dateTime')\n                 &&isValidDate(timesheet[field.property]);else elseProperty;\">\n                  {{ timesheet[field.property] | date: 'MMM d, y, H:mm:ss' }}\n                </ng-container>\n                <ng-template #elseProperty>\n                  {{ timesheet[field.property] }}\n                </ng-template>\n              </td>\n              <td class=\"text-danger\">\n                {{timesheet?.error}}\n              </td>\n            </tr>\n          </ng-container>\n        </tbody>\n      </table>\n    </div>\n  </div>\n  <div class=\"mt-1\" fxFlex=\"100%\" fxLayoutAlign=\"end\">\n    <button mat-button class=\"mt-2 mr-2\" type=\"button\" (click)=\"location.back()\">\n      Close\n    </button>\n    <button mat-stroked-button class=\"mt-2 mr-2 primary-color\" type=\"button\" (click)=\"reUpload()\">\n      <mat-icon>\n        <span class=\"material-icons-outlined\">\n          file_upload\n        </span>\n      </mat-icon>\n      Re-upload\n    </button>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.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.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]  ", exportAs: ["matButton"] }, { kind: "component", type: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "pipe", type: i2$1.DatePipe, name: "date" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FailedItemsListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-failed-items-list', template: "<div *ngIf=\"failedItems.length\" class=\"mt-4\" fxLayout=\"column\">\n  <div fxLayout=\"row wrap\" class=\"pb-3\">\n    <h5 fxFlex=\"30%\" class=\"primary-color\">Summary</h5>\n    <div fxFlex=\"70%\" fxLayoutAlign=\"center center\">\n      <h5 class=\"secondary-color\">\n        <span class=\"font-weight-bold\">{{failedItems.length}}</span>\n      </h5>\n      <span class=\"text-muted ml-2\"> Error(s) Found In Uploaded File</span>\n    </div>\n  </div>\n\n  <div>\n    <mat-divider></mat-divider>\n  </div>\n  <div fxLayout=\"row wrap\" class=\"pt-3\">\n    <h5 class=\"primary-color\">Errors</h5>\n    <div style=\"overflow-x: auto;width: 1100px;\" class=\"pt-3\">\n      <table class=\"table table-bordered table-striped table-hover table-sm ml-4 w-100\">\n        <thead>\n          <tr>\n            <th>#</th>\n            <th *ngFor=\"let field of selectedFields;\">{{field?.label}}</th>\n            <th class=\"text-danger\">Error</th>\n          </tr>\n        </thead>\n        <tbody>\n          <ng-container *ngFor=\"let timesheet of failedItems; let i=index\">\n            <tr>\n              <td>{{i + 1}}</td>\n              <td *ngFor=\"let field of selectedFields;\">\n                <ng-container *ngIf=\"(field.propertyType == 'date' || field.propertyType == 'dateTime')\n                 &&isValidDate(timesheet[field.property]);else elseProperty;\">\n                  {{ timesheet[field.property] | date: 'MMM d, y, H:mm:ss' }}\n                </ng-container>\n                <ng-template #elseProperty>\n                  {{ timesheet[field.property] }}\n                </ng-template>\n              </td>\n              <td class=\"text-danger\">\n                {{timesheet?.error}}\n              </td>\n            </tr>\n          </ng-container>\n        </tbody>\n      </table>\n    </div>\n  </div>\n  <div class=\"mt-1\" fxFlex=\"100%\" fxLayoutAlign=\"end\">\n    <button mat-button class=\"mt-2 mr-2\" type=\"button\" (click)=\"location.back()\">\n      Close\n    </button>\n    <button mat-stroked-button class=\"mt-2 mr-2 primary-color\" type=\"button\" (click)=\"reUpload()\">\n      <mat-icon>\n        <span class=\"material-icons-outlined\">\n          file_upload\n        </span>\n      </mat-icon>\n      Re-upload\n    </button>\n  </div>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i3.Location }], propDecorators: { failedItems: [{
+        }], ctorParameters: () => [{ type: i2$1.Location }], propDecorators: { failedItems: [{
                 type: Input
             }], selectedFields: [{
                 type: Input
@@ -9040,8 +9040,8 @@ let ImportCsvComponent = class ImportCsvComponent {
         this.selectedFields = [];
         this.currentStep = 1;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ImportCsvComponent, deps: [{ token: AlertService }, { token: ErrorHandlerService }, { token: HttpService }, { token: i3.DatePipe }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ImportCsvComponent, selector: "app-import-csv", inputs: { config: "config" }, ngImport: i0, template: "<div fxLayout=\"column wrap\" class=\"p-4\">\n  <mat-card fxFlex=\"100%\" fxLayoutAlign=\"center center\" class=\"p-0\">\n    <mat-card-content fxFill fxLayout=\"row wrap\" fxLayoutAlign=\"center center\" class=\"primary-color\">\n      <h4 fxFlex=\"20%\" class=\"ml-2\">\n        Step {{step.step}}: <span class=\"normal-font-weight\">{{step?.title}}</span>\n      </h4>\n      <h3 fxFlex=\"80%\" fxLayoutAlign=\"center center\" class=\"text-dark\" fxLayoutGap=\"1rem grid\">\n        <span>{{config?.title}} Import</span>\n        <a *ngIf=\"config?.sampleFile && currentStep == 1\" style=\"color: inherit;\" [download]=\"config?.sampleFile?.name\"\n          target=\"_blank\" [href]=\"config?.sampleFile?.path\" matTooltip=\"Download Sample file\" matTooltipPosition=\"below\"\n          fxLayoutAlign=\"center center\">\n          <button mat-stroked-button class=\"primary-color\">\n            <mat-icon>\n              download\n            </mat-icon>\n            Sample File\n          </button>\n        </a>\n      </h3>\n    </mat-card-content>\n  </mat-card>\n  <div fxFlex=\"100%\" class=\"mt-3\">\n    <div fxLayout=\"row wrap\" fxLayoutGap=\"1rem grid\" *ngIf=\"currentStep==1 || currentStep == 2 || currentStep == 4\">\n      <div fxFlex=\"100%\" fxFlex.gt-sm=\"0 1 calc(70%-1rem)\">\n        <mat-card fxFlex=\"100%\">\n          <mat-card-content fxLayout=\"column\">\n            <div fxFlex=\"100%\">\n              <section fxLayout=\"column\" *ngIf=\"config.importType && !this.fileData.length && !this.failedItems.length\">\n                <h5 class=\"primary-color pb-3\">File Upload</h5>\n                <app-file-dropper fxFill class=\"mb-2 drop-section\" [config]=\"filesConfig\" [fileArray]=\"filesList\"\n                  (fileChanged)=\"fileChanged($event)\">\n                </app-file-dropper>\n                <app-import-history-list *ngIf=\"config.importHistory.isEnabled\" [config]=\"config\">\n                </app-import-history-list>\n              </section>\n              <app-field-mapping class=\"w-100\" *ngIf=\"this.fileData.length > 0 && !this.failedItems.length\"\n                [data]=\"fileData\" [config]=\"config\" (onSave)=\"mappingProcessed($event)\" (onReUpload)=\"reUpload()\">\n              </app-field-mapping>\n              <app-failed-items-list class=\"w-100\" *ngIf=\"this.failedItems.length > 0\" [failedItems]=\"failedItems\"\n                [selectedFields]=\"selectedFields\" (onReUpload)=\"reUpload()\"></app-failed-items-list>\n            </div>\n          </mat-card-content>\n        </mat-card>\n      </div>\n      <div fxFlex=\"100%\" fxFlex.gt-sm=\"30%\">\n        <mat-card fxFlex=\"100%\">\n          <mat-card-content fxLayout=\"column\" fxLayoutAlign=\"start start\">\n            <h5 class=\"primary-color pb-3\">Instructions & Requirements</h5>\n            <div class=\"text-muted\">\n              <p>\n                1. Please use this yyyy/MM/dd date format for all the date fields. Otherwise your date fields will be\n                incorrect or not will be accepted. Ex: 2021/09/27\n              </p>\n              <ng-container *ngIf=\"config?.customErrorMessages\">\n                <ng-container *ngIf=\"config?.isRenderCustomErrorMessagesInHtml; else renderPlainText\">\n                  <ng-container *ngFor=\"let message of config?.customErrorMessages\">\n                    <div [innerHtml]=\"message\"></div>\n                  </ng-container>\n                </ng-container>\n                <ng-template #renderPlainText>\n                  <p *ngFor=\"let message of config?.customErrorMessages\">\n                    {{message}}\n                  </p>\n                </ng-template>\n              </ng-container>\n            </div>\n          </mat-card-content>\n        </mat-card>\n      </div>\n    </div>\n    <div fxLayout=\"column wrap\" class=\"p-4\" *ngIf=\"currentStep==3 || currentStep == 5\">\n      <app-data-import [step]=\"step\" fxLayoutAlign=\"center center\"></app-data-import>\n    </div>\n    <div fxLayout=\"column wrap\" class=\"p-4\" *ngIf=\"currentStep == 6\">\n      <app-import-success [data]=\"result\" [config]=\"config\" fxLayoutAlign=\"center center\"></app-import-success>\n    </div>\n  </div>\n</div>", styles: [".drop-section{width:500px!important}.mat-card-title{margin:0!important}.clickable-card{width:100%}.normal-font-weight{font-weight:200!important}\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: 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: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: FileDropperComponent, selector: "app-file-dropper", inputs: ["fileArray", "config", "styles"], outputs: ["fileChanged"] }, { kind: "component", type: FieldMappingComponent, selector: "app-field-mapping", inputs: ["data", "config"], outputs: ["onSave", "onReUpload"] }, { kind: "component", type: FailedItemsListComponent, selector: "app-failed-items-list", inputs: ["failedItems", "selectedFields"], outputs: ["onReUpload"] }, { kind: "component", type: ImportHistoryListComponent, selector: "app-import-history-list", inputs: ["config"] }, { kind: "component", type: ImportSuccessComponent, selector: "app-import-success", inputs: ["data", "config"] }, { kind: "component", type: DataImportComponent, selector: "app-data-import", inputs: ["step"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ImportCsvComponent, deps: [{ token: AlertService }, { token: ErrorHandlerService }, { token: HttpService }, { token: i2$1.DatePipe }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ImportCsvComponent, selector: "app-import-csv", inputs: { config: "config" }, ngImport: i0, template: "<div fxLayout=\"column wrap\" class=\"p-4\">\n  <mat-card fxFlex=\"100%\" fxLayoutAlign=\"center center\" class=\"p-0\">\n    <mat-card-content fxFill fxLayout=\"row wrap\" fxLayoutAlign=\"center center\" class=\"primary-color\">\n      <h4 fxFlex=\"20%\" class=\"ml-2\">\n        Step {{step.step}}: <span class=\"normal-font-weight\">{{step?.title}}</span>\n      </h4>\n      <h3 fxFlex=\"80%\" fxLayoutAlign=\"center center\" class=\"text-dark\" fxLayoutGap=\"1rem grid\">\n        <span>{{config?.title}} Import</span>\n        <a *ngIf=\"config?.sampleFile && currentStep == 1\" style=\"color: inherit;\" [download]=\"config?.sampleFile?.name\"\n          target=\"_blank\" [href]=\"config?.sampleFile?.path\" matTooltip=\"Download Sample file\" matTooltipPosition=\"below\"\n          fxLayoutAlign=\"center center\">\n          <button mat-stroked-button class=\"primary-color\">\n            <mat-icon>\n              download\n            </mat-icon>\n            Sample File\n          </button>\n        </a>\n      </h3>\n    </mat-card-content>\n  </mat-card>\n  <div fxFlex=\"100%\" class=\"mt-3\">\n    <div fxLayout=\"row wrap\" fxLayoutGap=\"1rem grid\" *ngIf=\"currentStep==1 || currentStep == 2 || currentStep == 4\">\n      <div fxFlex=\"100%\" fxFlex.gt-sm=\"0 1 calc(70%-1rem)\">\n        <mat-card fxFlex=\"100%\">\n          <mat-card-content fxLayout=\"column\">\n            <div fxFlex=\"100%\">\n              <section fxLayout=\"column\" *ngIf=\"config.importType && !this.fileData.length && !this.failedItems.length\">\n                <h5 class=\"primary-color pb-3\">File Upload</h5>\n                <app-file-dropper fxFill class=\"mb-2 drop-section\" [config]=\"filesConfig\" [fileArray]=\"filesList\"\n                  (fileChanged)=\"fileChanged($event)\">\n                </app-file-dropper>\n                <app-import-history-list *ngIf=\"config.importHistory.isEnabled\" [config]=\"config\">\n                </app-import-history-list>\n              </section>\n              <app-field-mapping class=\"w-100\" *ngIf=\"this.fileData.length > 0 && !this.failedItems.length\"\n                [data]=\"fileData\" [config]=\"config\" (onSave)=\"mappingProcessed($event)\" (onReUpload)=\"reUpload()\">\n              </app-field-mapping>\n              <app-failed-items-list class=\"w-100\" *ngIf=\"this.failedItems.length > 0\" [failedItems]=\"failedItems\"\n                [selectedFields]=\"selectedFields\" (onReUpload)=\"reUpload()\"></app-failed-items-list>\n            </div>\n          </mat-card-content>\n        </mat-card>\n      </div>\n      <div fxFlex=\"100%\" fxFlex.gt-sm=\"30%\">\n        <mat-card fxFlex=\"100%\">\n          <mat-card-content fxLayout=\"column\" fxLayoutAlign=\"start start\">\n            <h5 class=\"primary-color pb-3\">Instructions & Requirements</h5>\n            <div class=\"text-muted\">\n              <p>\n                1. Please use this yyyy/MM/dd date format for all the date fields. Otherwise your date fields will be\n                incorrect or not will be accepted. Ex: 2021/09/27\n              </p>\n              <ng-container *ngIf=\"config?.customErrorMessages\">\n                <ng-container *ngIf=\"config?.isRenderCustomErrorMessagesInHtml; else renderPlainText\">\n                  <ng-container *ngFor=\"let message of config?.customErrorMessages\">\n                    <div [innerHtml]=\"message\"></div>\n                  </ng-container>\n                </ng-container>\n                <ng-template #renderPlainText>\n                  <p *ngFor=\"let message of config?.customErrorMessages\">\n                    {{message}}\n                  </p>\n                </ng-template>\n              </ng-container>\n            </div>\n          </mat-card-content>\n        </mat-card>\n      </div>\n    </div>\n    <div fxLayout=\"column wrap\" class=\"p-4\" *ngIf=\"currentStep==3 || currentStep == 5\">\n      <app-data-import [step]=\"step\" fxLayoutAlign=\"center center\"></app-data-import>\n    </div>\n    <div fxLayout=\"column wrap\" class=\"p-4\" *ngIf=\"currentStep == 6\">\n      <app-import-success [data]=\"result\" [config]=\"config\" fxLayoutAlign=\"center center\"></app-import-success>\n    </div>\n  </div>\n</div>", styles: [".drop-section{width:500px!important}.mat-card-title{margin:0!important}.clickable-card{width:100%}.normal-font-weight{font-weight:200!important}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.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.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: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: FileDropperComponent, selector: "app-file-dropper", inputs: ["fileArray", "config", "styles"], outputs: ["fileChanged"] }, { kind: "component", type: FieldMappingComponent, selector: "app-field-mapping", inputs: ["data", "config"], outputs: ["onSave", "onReUpload"] }, { kind: "component", type: FailedItemsListComponent, selector: "app-failed-items-list", inputs: ["failedItems", "selectedFields"], outputs: ["onReUpload"] }, { kind: "component", type: ImportHistoryListComponent, selector: "app-import-history-list", inputs: ["config"] }, { kind: "component", type: ImportSuccessComponent, selector: "app-import-success", inputs: ["data", "config"] }, { kind: "component", type: DataImportComponent, selector: "app-data-import", inputs: ["step"] }] }); }
 };
 ImportCsvComponent = __decorate([
     UntilDestroy()
@@ -9049,7 +9049,7 @@ ImportCsvComponent = __decorate([
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ImportCsvComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-import-csv', template: "<div fxLayout=\"column wrap\" class=\"p-4\">\n  <mat-card fxFlex=\"100%\" fxLayoutAlign=\"center center\" class=\"p-0\">\n    <mat-card-content fxFill fxLayout=\"row wrap\" fxLayoutAlign=\"center center\" class=\"primary-color\">\n      <h4 fxFlex=\"20%\" class=\"ml-2\">\n        Step {{step.step}}: <span class=\"normal-font-weight\">{{step?.title}}</span>\n      </h4>\n      <h3 fxFlex=\"80%\" fxLayoutAlign=\"center center\" class=\"text-dark\" fxLayoutGap=\"1rem grid\">\n        <span>{{config?.title}} Import</span>\n        <a *ngIf=\"config?.sampleFile && currentStep == 1\" style=\"color: inherit;\" [download]=\"config?.sampleFile?.name\"\n          target=\"_blank\" [href]=\"config?.sampleFile?.path\" matTooltip=\"Download Sample file\" matTooltipPosition=\"below\"\n          fxLayoutAlign=\"center center\">\n          <button mat-stroked-button class=\"primary-color\">\n            <mat-icon>\n              download\n            </mat-icon>\n            Sample File\n          </button>\n        </a>\n      </h3>\n    </mat-card-content>\n  </mat-card>\n  <div fxFlex=\"100%\" class=\"mt-3\">\n    <div fxLayout=\"row wrap\" fxLayoutGap=\"1rem grid\" *ngIf=\"currentStep==1 || currentStep == 2 || currentStep == 4\">\n      <div fxFlex=\"100%\" fxFlex.gt-sm=\"0 1 calc(70%-1rem)\">\n        <mat-card fxFlex=\"100%\">\n          <mat-card-content fxLayout=\"column\">\n            <div fxFlex=\"100%\">\n              <section fxLayout=\"column\" *ngIf=\"config.importType && !this.fileData.length && !this.failedItems.length\">\n                <h5 class=\"primary-color pb-3\">File Upload</h5>\n                <app-file-dropper fxFill class=\"mb-2 drop-section\" [config]=\"filesConfig\" [fileArray]=\"filesList\"\n                  (fileChanged)=\"fileChanged($event)\">\n                </app-file-dropper>\n                <app-import-history-list *ngIf=\"config.importHistory.isEnabled\" [config]=\"config\">\n                </app-import-history-list>\n              </section>\n              <app-field-mapping class=\"w-100\" *ngIf=\"this.fileData.length > 0 && !this.failedItems.length\"\n                [data]=\"fileData\" [config]=\"config\" (onSave)=\"mappingProcessed($event)\" (onReUpload)=\"reUpload()\">\n              </app-field-mapping>\n              <app-failed-items-list class=\"w-100\" *ngIf=\"this.failedItems.length > 0\" [failedItems]=\"failedItems\"\n                [selectedFields]=\"selectedFields\" (onReUpload)=\"reUpload()\"></app-failed-items-list>\n            </div>\n          </mat-card-content>\n        </mat-card>\n      </div>\n      <div fxFlex=\"100%\" fxFlex.gt-sm=\"30%\">\n        <mat-card fxFlex=\"100%\">\n          <mat-card-content fxLayout=\"column\" fxLayoutAlign=\"start start\">\n            <h5 class=\"primary-color pb-3\">Instructions & Requirements</h5>\n            <div class=\"text-muted\">\n              <p>\n                1. Please use this yyyy/MM/dd date format for all the date fields. Otherwise your date fields will be\n                incorrect or not will be accepted. Ex: 2021/09/27\n              </p>\n              <ng-container *ngIf=\"config?.customErrorMessages\">\n                <ng-container *ngIf=\"config?.isRenderCustomErrorMessagesInHtml; else renderPlainText\">\n                  <ng-container *ngFor=\"let message of config?.customErrorMessages\">\n                    <div [innerHtml]=\"message\"></div>\n                  </ng-container>\n                </ng-container>\n                <ng-template #renderPlainText>\n                  <p *ngFor=\"let message of config?.customErrorMessages\">\n                    {{message}}\n                  </p>\n                </ng-template>\n              </ng-container>\n            </div>\n          </mat-card-content>\n        </mat-card>\n      </div>\n    </div>\n    <div fxLayout=\"column wrap\" class=\"p-4\" *ngIf=\"currentStep==3 || currentStep == 5\">\n      <app-data-import [step]=\"step\" fxLayoutAlign=\"center center\"></app-data-import>\n    </div>\n    <div fxLayout=\"column wrap\" class=\"p-4\" *ngIf=\"currentStep == 6\">\n      <app-import-success [data]=\"result\" [config]=\"config\" fxLayoutAlign=\"center center\"></app-import-success>\n    </div>\n  </div>\n</div>", styles: [".drop-section{width:500px!important}.mat-card-title{margin:0!important}.clickable-card{width:100%}.normal-font-weight{font-weight:200!important}\n"] }]
-        }], ctorParameters: () => [{ type: AlertService }, { type: ErrorHandlerService }, { type: HttpService }, { type: i3.DatePipe }], propDecorators: { config: [{
+        }], ctorParameters: () => [{ type: AlertService }, { type: ErrorHandlerService }, { type: HttpService }, { type: i2$1.DatePipe }], propDecorators: { config: [{
                 type: Input
             }] } });
 
@@ -9293,7 +9293,7 @@ let TechlifyTaggerTagSelectorComponent = class TechlifyTaggerTagSelectorComponen
         this._focusMonitor.stopMonitoring(this._elementRef);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TechlifyTaggerTagSelectorComponent, deps: [{ token: i1$4.FocusMonitor }, { token: i0.ElementRef }, { token: HttpService }, { token: MAT_FORM_FIELD, optional: true }, { token: i1$5.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TechlifyTaggerTagSelectorComponent, selector: "app-techlify-tagger-tag-selector", inputs: { categories: "categories", multiple: "multiple", enableSearch: "enableSearch", showAllTags: "showAllTags", useSelectButtonStyle: "useSelectButtonStyle", required: "required", disabled: "disabled", value: "value", placeholder: "placeholder" }, providers: [{ provide: MatFormFieldControl, useExisting: TechlifyTaggerTagSelectorComponent }], ngImport: i0, template: "<app-searchable-selector *ngIf=\"apiUrl && !useSelectButtonStyle\" [formControl]=\"tagSelectorCtrl\" [apiUrl]=\"apiUrl\"\n    [enableSearch]=\"enableSearch\" [multiple]=\"multiple\" (selectionChange)=\"selectionChange($event)\">\n</app-searchable-selector>\n\n<mat-button-toggle-group [hideSingleSelectionIndicator]=\"true\" [hideMultipleSelectionIndicator]=\"true\"\n    *ngIf=\"apiUrl && useSelectButtonStyle\" [formControl]=\"tagSelectorCtrl\" [multiple]=\"multiple\"\n    (change)=\"selectionChange($event.value)\">\n    <mat-button-toggle *ngFor=\"let tag of tags\" [value]=\"tag.id\">{{tag.title}}</mat-button-toggle>\n</mat-button-toggle-group>", styles: [""], 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: i3$2.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i3$2.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { 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", "panelWidth", "focusSearchOnOpen", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TechlifyTaggerTagSelectorComponent, selector: "app-techlify-tagger-tag-selector", inputs: { categories: "categories", multiple: "multiple", enableSearch: "enableSearch", showAllTags: "showAllTags", useSelectButtonStyle: "useSelectButtonStyle", required: "required", disabled: "disabled", value: "value", placeholder: "placeholder" }, providers: [{ provide: MatFormFieldControl, useExisting: TechlifyTaggerTagSelectorComponent }], ngImport: i0, template: "<app-searchable-selector *ngIf=\"apiUrl && !useSelectButtonStyle\" [formControl]=\"tagSelectorCtrl\" [apiUrl]=\"apiUrl\"\n    [enableSearch]=\"enableSearch\" [multiple]=\"multiple\" (selectionChange)=\"selectionChange($event)\">\n</app-searchable-selector>\n\n<mat-button-toggle-group [hideSingleSelectionIndicator]=\"true\" [hideMultipleSelectionIndicator]=\"true\"\n    *ngIf=\"apiUrl && useSelectButtonStyle\" [formControl]=\"tagSelectorCtrl\" [multiple]=\"multiple\"\n    (change)=\"selectionChange($event.value)\">\n    <mat-button-toggle *ngFor=\"let tag of tags\" [value]=\"tag.id\">{{tag.title}}</mat-button-toggle>\n</mat-button-toggle-group>", styles: [""], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i3$1.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { 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", "panelWidth", "focusSearchOnOpen", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange"] }] }); }
 };
 TechlifyTaggerTagSelectorComponent = TechlifyTaggerTagSelectorComponent_1 = __decorate([
     UntilDestroy()
@@ -9538,7 +9538,7 @@ let TechlifyFeatureListingComponent = class TechlifyFeatureListingComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TechlifyFeatureListingComponent, deps: [{ token: ErrorHandlerService }, { token: i1$5.UntypedFormBuilder }, { token: AlertService }, { token: i1.MatDialog }, { token: TechlifyFeatureService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TechlifyFeatureListingComponent, selector: "app-techlify-listing-feature", ngImport: i0, template: "<div fxLayout=\"column\" fxLayoutGap=\"3rem\" class=\"p-3\">\n  <div fxLayout=\"column\" fxLayoutAlign=\"center center\" class=\"primary-color mt-3\">\n    <h3>Features Configuration</h3>\n    <mat-hint>\n      <i> Here you can specify which optional features you'd like to have available to your team </i>\n    </mat-hint>\n  </div>\n\n\n  <div>\n    <mat-card>\n      <mat-card-content fxlayout=\"column\" style=\"overflow: auto; height: 700px\" class=\"classifications-card\">\n        <table mat-table [dataSource]=\"features\" class=\"mat-elevation-z8 w-100\" matSort multiTemplateDataRows\n          (matSortChange)=\"sortColumn($event)\" infiniteScroll [infiniteScrollDistance]=\"2\" [infiniteScrollThrottle]=\"50\"\n          (scrolled)=\"onScroll()\" [fromRoot]=\"true\" [infiniteScrollContainer]=\"'.classifications-card'\">\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\">\n              {{ i + 1 }}\n            </td>\n          </ng-container>\n\n          <!-- Title Column -->\n          <ng-container matColumnDef=\"feature\">\n            <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear>\n              Feature\n            </th>\n            <td mat-cell *matCellDef=\"let element\">{{ element?.title }}</td>\n          </ng-container>\n\n          <!-- Description Column -->\n          <ng-container matColumnDef=\"description\">\n            <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear>\n              Descriptions\n            </th>\n            <td mat-cell *matCellDef=\"let element\">\n              {{ element?.description }}\n            </td>\n          </ng-container>\n\n          <!-- Actions Column -->\n          <ng-container matColumnDef=\"actions\">\n            <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear>\n              Actions\n            </th>\n            <td mat-cell *matCellDef=\"let element\">\n              <div *ngIf=\"!element?.client_feature\">\n                <app-on-off-switch [value]=\"element?.is_enabled_default\"\n                  (click)=\"toggeleFeature(element?.is_enabled_default, element)\"></app-on-off-switch>\n              </div>\n              <div *ngIf=\"element?.client_feature\">\n                <app-on-off-switch [value]=\"element?.client_feature?.is_enabled\"\n                  (click)=\"toggeleFeature(element?.client_feature?.is_enabled, element)\"></app-on-off-switch>\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-card-content>\n    </mat-card>\n  </div>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i7$2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i11.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i11.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i9.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i9.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i9.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i9.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i9.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i9.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i9.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i9.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i9.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i9.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content" }, { 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: i6$1.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: OnOffSwitchComponent, selector: "app-on-off-switch", inputs: ["value"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TechlifyFeatureListingComponent, selector: "app-techlify-listing-feature", ngImport: i0, template: "<div fxLayout=\"column\" fxLayoutGap=\"3rem\" class=\"p-3\">\n  <div fxLayout=\"column\" fxLayoutAlign=\"center center\" class=\"primary-color mt-3\">\n    <h3>Features Configuration</h3>\n    <mat-hint>\n      <i> Here you can specify which optional features you'd like to have available to your team </i>\n    </mat-hint>\n  </div>\n\n\n  <div>\n    <mat-card>\n      <mat-card-content fxlayout=\"column\" style=\"overflow: auto; height: 700px\" class=\"classifications-card\">\n        <table mat-table [dataSource]=\"features\" class=\"mat-elevation-z8 w-100\" matSort multiTemplateDataRows\n          (matSortChange)=\"sortColumn($event)\" infiniteScroll [infiniteScrollDistance]=\"2\" [infiniteScrollThrottle]=\"50\"\n          (scrolled)=\"onScroll()\" [fromRoot]=\"true\" [infiniteScrollContainer]=\"'.classifications-card'\">\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\">\n              {{ i + 1 }}\n            </td>\n          </ng-container>\n\n          <!-- Title Column -->\n          <ng-container matColumnDef=\"feature\">\n            <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear>\n              Feature\n            </th>\n            <td mat-cell *matCellDef=\"let element\">{{ element?.title }}</td>\n          </ng-container>\n\n          <!-- Description Column -->\n          <ng-container matColumnDef=\"description\">\n            <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear>\n              Descriptions\n            </th>\n            <td mat-cell *matCellDef=\"let element\">\n              {{ element?.description }}\n            </td>\n          </ng-container>\n\n          <!-- Actions Column -->\n          <ng-container matColumnDef=\"actions\">\n            <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear>\n              Actions\n            </th>\n            <td mat-cell *matCellDef=\"let element\">\n              <div *ngIf=\"!element?.client_feature\">\n                <app-on-off-switch [value]=\"element?.is_enabled_default\"\n                  (click)=\"toggeleFeature(element?.is_enabled_default, element)\"></app-on-off-switch>\n              </div>\n              <div *ngIf=\"element?.client_feature\">\n                <app-on-off-switch [value]=\"element?.client_feature?.is_enabled\"\n                  (click)=\"toggeleFeature(element?.client_feature?.is_enabled, element)\"></app-on-off-switch>\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-card-content>\n    </mat-card>\n  </div>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i7$2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i11.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i11.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i9.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i9.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i9.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i9.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i9.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i9.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i9.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i9.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i9.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i9.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content" }, { 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: i6$1.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: OnOffSwitchComponent, selector: "app-on-off-switch", inputs: ["value"] }] }); }
 };
 TechlifyFeatureListingComponent = __decorate([
     UntilDestroy()
@@ -9774,7 +9774,7 @@ class PasswordRequirementCheckComponent {
         this.getConfiguration();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PasswordRequirementCheckComponent, deps: [{ token: AccessControlConfigService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PasswordRequirementCheckComponent, selector: "techlify-password-requirement-check", inputs: { password: "password", email: "email" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"alert\"\n     style=\"font-size: 12px; padding: 5px;\"\n     [ngClass]=\"{ 'alert-success' : result.isValid, 'alert-danger': !result.isValid }\"\n     *ngIf=\"showResult\">\n  <ul style=\"margin-bottom: 2px; padding-inline-start: 20px;\">\n    <li *ngIf=\"accessControlConfiguration?.minPasswordLength > 0\">\n      <span [ngClass]=\"{ 'text-success': result.minLength, 'text-danger': !result.minLength }\">\n        Minimum Length Requirement: {{ accessControlConfiguration?.minPasswordLength }} Characters\n      </span>\n    </li>\n    <li *ngIf=\"accessControlConfiguration?.isPasswordRequireNumber\">\n      <span [ngClass]=\"{ 'text-success': result.hasNumber, 'text-danger': !result.hasNumber }\">\n        Your password is required to add at least 1 number\n      </span>\n    </li>\n    <li *ngIf=\"accessControlConfiguration?.isPasswordRequireSymbol\">\n      <span [ngClass]=\"{ 'text-success': result.hasSymbol, 'text-danger': !result.hasSymbol }\">\n        Your password is required to add at least 1 symbol.\n      </span>\n    </li>\n    <li *ngIf=\"accessControlConfiguration?.isPasswordRequireCapitalLetter\">\n      <span [ngClass]=\"{ 'text-success': result.hasCapitalLetter, 'text-danger': !result.hasCapitalLetter }\">\n        Your password is required to add at least 1 capital and small letter\n      </span>\n    </li>\n  </ul>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PasswordRequirementCheckComponent, selector: "techlify-password-requirement-check", inputs: { password: "password", email: "email" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"alert\"\n     style=\"font-size: 12px; padding: 5px;\"\n     [ngClass]=\"{ 'alert-success' : result.isValid, 'alert-danger': !result.isValid }\"\n     *ngIf=\"showResult\">\n  <ul style=\"margin-bottom: 2px; padding-inline-start: 20px;\">\n    <li *ngIf=\"accessControlConfiguration?.minPasswordLength > 0\">\n      <span [ngClass]=\"{ 'text-success': result.minLength, 'text-danger': !result.minLength }\">\n        Minimum Length Requirement: {{ accessControlConfiguration?.minPasswordLength }} Characters\n      </span>\n    </li>\n    <li *ngIf=\"accessControlConfiguration?.isPasswordRequireNumber\">\n      <span [ngClass]=\"{ 'text-success': result.hasNumber, 'text-danger': !result.hasNumber }\">\n        Your password is required to add at least 1 number\n      </span>\n    </li>\n    <li *ngIf=\"accessControlConfiguration?.isPasswordRequireSymbol\">\n      <span [ngClass]=\"{ 'text-success': result.hasSymbol, 'text-danger': !result.hasSymbol }\">\n        Your password is required to add at least 1 symbol.\n      </span>\n    </li>\n    <li *ngIf=\"accessControlConfiguration?.isPasswordRequireCapitalLetter\">\n      <span [ngClass]=\"{ 'text-success': result.hasCapitalLetter, 'text-danger': !result.hasCapitalLetter }\">\n        Your password is required to add at least 1 capital and small letter\n      </span>\n    </li>\n  </ul>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PasswordRequirementCheckComponent, decorators: [{
             type: Component,
@@ -9849,7 +9849,7 @@ class ChangePasswordComponent {
         return this.formValidatorService.getErrorMessage(field, this.passwordResetForm, errorMessages$5);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ChangePasswordComponent, deps: [{ token: HttpService }, { token: AlertService }, { token: i1$1.Router }, { token: CurrentUserService }, { token: i1$5.UntypedFormBuilder }, { token: ErrorHandlerService }, { token: FormValidatorService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", 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: 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$1.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: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: i4.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "directive", type: i4.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "directive", type: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.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$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.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", "email"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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: i2$1.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]  ", exportAs: ["matButton"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", 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: 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$1.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: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: i4.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "directive", type: i4.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "directive", type: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.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$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.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", "email"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ChangePasswordComponent, decorators: [{
             type: Component,
@@ -9982,7 +9982,7 @@ class ForgotPasswordComponent {
         return this.formValidatorService.getErrorMessage(field, this.forgotPasswordForm, errorMessages$4);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ForgotPasswordComponent, deps: [{ token: HttpService }, { token: AlertService }, { token: i1$1.Router }, { token: CurrentUserService }, { token: ErrorHandlerService }, { token: CredentialsService }, { token: i1$5.UntypedFormBuilder }, { token: FormValidatorService }, { token: UserConfigService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ForgotPasswordComponent, selector: "forgot-password", 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 mt-4\">RESET</h4>\n\n            <form [formGroup]=\"forgotPasswordForm\" (ngSubmit)=\"sendOtp()\" class=\"mt-4\">\n\n                <div class=\"form-group row\">\n                    <mat-form-field class=\"offset-2 col-8\">\n                        <input matInput formControlName=\"email\" placeholder=\"Email\" type=\"email\" autocomplete=\"off\"\n                            required />\n                        <mat-error *ngIf=\"isFieldValid('email')\">{{getErrorMessage('email')}}</mat-error>\n                    </mat-form-field>\n                </div>\n\n                <div class=\"row mt-4\">\n                    <div class=\"col-12 text-center\">\n                        <button mat-raised-button color=\"primary\" class=\"w-50\" type=\"submit\"\n                            [disabled]=\"isWorking\">\n                            Send OTP\n                        </button>\n                    </div>\n                </div>\n            </form>\n        </div>\n\n        <div class=\"row mt-3 mr-0 ml-0\" *ngIf=\"userConfig.showSignup\">\n            <div class=\"col-12 text-center\">\n                <p>New to {{ userConfig.appName }}?</p>\n                <button mat-button class=\"btn btn-sm btn-secondary text-white\" style=\"width: 550px;\" type=\"button\"\n                    [routerLink]=\"['/signup']\">\n                    Create an account\n                </button>\n            </div>\n        </div>\n    </div>\n</div>\n", styles: ["#login-form-wrapper{margin-top:100px}#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}: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$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.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$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.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]  ", 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$1.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$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ForgotPasswordComponent, selector: "forgot-password", 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 mt-4\">RESET</h4>\n\n            <form [formGroup]=\"forgotPasswordForm\" (ngSubmit)=\"sendOtp()\" class=\"mt-4\">\n\n                <div class=\"form-group row\">\n                    <mat-form-field class=\"offset-2 col-8\">\n                        <input matInput formControlName=\"email\" placeholder=\"Email\" type=\"email\" autocomplete=\"off\"\n                            required />\n                        <mat-error *ngIf=\"isFieldValid('email')\">{{getErrorMessage('email')}}</mat-error>\n                    </mat-form-field>\n                </div>\n\n                <div class=\"row mt-4\">\n                    <div class=\"col-12 text-center\">\n                        <button mat-raised-button color=\"primary\" class=\"w-50\" type=\"submit\"\n                            [disabled]=\"isWorking\">\n                            Send OTP\n                        </button>\n                    </div>\n                </div>\n            </form>\n        </div>\n\n        <div class=\"row mt-3 mr-0 ml-0\" *ngIf=\"userConfig.showSignup\">\n            <div class=\"col-12 text-center\">\n                <p>New to {{ userConfig.appName }}?</p>\n                <button mat-button class=\"btn btn-sm btn-secondary text-white\" style=\"width: 550px;\" type=\"button\"\n                    [routerLink]=\"['/signup']\">\n                    Create an account\n                </button>\n            </div>\n        </div>\n    </div>\n</div>\n", styles: ["#login-form-wrapper{margin-top:100px}#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}:host{width:100%}.white-box{background-color:#fff;padding:10px}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.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$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.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]  ", 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$1.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$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ForgotPasswordComponent, decorators: [{
             type: Component,
@@ -10119,7 +10119,7 @@ let LoginFormFieldsComponent = class LoginFormFieldsComponent extends TechlifyFo
         window.location.href = this.userConfig.socialLoginRedirectUrl + provider;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LoginFormFieldsComponent, deps: [{ token: i1$5.FormBuilder }, { token: FormValidatorService }, { token: ConfigService }, { token: CredentialsService }, { token: CurrentUserService }, { token: AuthenticationService }, { token: i1$1.Router }, { token: i1$1.ActivatedRoute }, { token: UserConfigService }, { token: ErrorHandlerService }, { token: i6$3.NgxPermissionsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: LoginFormFieldsComponent, isStandalone: true, selector: "app-login-form-fields", inputs: { userConfig: "userConfig", isEnableLoginRedirect: "isEnableLoginRedirect" }, usesInheritance: true, ngImport: i0, template: "<form [formGroup]=\"form\" (ngSubmit)=\"login()\" class='d-flex flex-column gap-3'>\n  <div *ngIf=\"!userClients\" class='d-flex flex-column gap-2'>\n    <mat-form-field>\n      <mat-label>Email</mat-label>\n      <input matInput formControlName=\"email\" placeholder=\"Email\" type=\"email\" autocomplete=\"off\" 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 formControlName=\"password\" placeholder=\"Password\" type=\"password\" autocomplete=\"off\" 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\" mat-raised-button type=\"button\"\n        (click)=\"redirect('google')\">Google</button>\n\n      <button class=\"w-100 facebook-button\" mat-raised-button type=\"button\"\n        (click)=\"redirect('facebook')\">Facebook</button>\n    </div>\n    <div class=\"mt-2 mb-4 text-center\" *ngIf=\"userConfig.showForgotPassword\">\n      <a href=\"javascript:;\" [routerLink]=\"['/forgot-password']\">Forgot password?</a>\n    </div>\n  </div>\n\n  <div *ngIf=\"userClients\" class='d-flex flex-column gap-2'>\n    <h4 class=\"section-title text-center mt-4\">\n      {{ userClients ? 'SELECT CLIENT TO LOGIN WITH' : 'LOGIN' }}\n    </h4>\n\n    <mat-selection-list formControlName=\"selected_client\" [multiple]=\"false\">\n      <mat-list-option *ngFor=\"let userClient of userClients\" [value]=\"userClient?.client_id\"\n        [disabled]=\"!userClient?.is_enabled || isWorking\">\n        {{ userClient?.client?.name }}\n      </mat-list-option>\n    </mat-selection-list>\n\n    <div class=\"mt-2 mb-4 text-center\" *ngIf=\"userConfig.showForgotPassword\">\n      <a href=\"javascript:;\" (click)=\"backToLogin()\">Back to Login</a>\n    </div>\n  </div>\n\n</form>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MaterialModule }, { kind: "component", type: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", 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$1.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$4.MatSelectionList, selector: "mat-selection-list", inputs: ["color", "compareWith", "multiple", "hideSingleSelectionIndicator", "disabled"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { kind: "component", type: i8$4.MatListOption, selector: "mat-list-option", inputs: ["togglePosition", "checkboxPosition", "color", "value", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.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$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: LoginFormFieldsComponent, isStandalone: true, selector: "app-login-form-fields", inputs: { userConfig: "userConfig", isEnableLoginRedirect: "isEnableLoginRedirect" }, usesInheritance: true, ngImport: i0, template: "<form [formGroup]=\"form\" (ngSubmit)=\"login()\" class='d-flex flex-column gap-3'>\n  <div *ngIf=\"!userClients\" class='d-flex flex-column gap-2'>\n    <mat-form-field>\n      <mat-label>Email</mat-label>\n      <input matInput formControlName=\"email\" placeholder=\"Email\" type=\"email\" autocomplete=\"off\" 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 formControlName=\"password\" placeholder=\"Password\" type=\"password\" autocomplete=\"off\" 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\" mat-raised-button type=\"button\"\n        (click)=\"redirect('google')\">Google</button>\n\n      <button class=\"w-100 facebook-button\" mat-raised-button type=\"button\"\n        (click)=\"redirect('facebook')\">Facebook</button>\n    </div>\n    <div class=\"mt-2 mb-4 text-center\" *ngIf=\"userConfig.showForgotPassword\">\n      <a href=\"javascript:;\" [routerLink]=\"['/forgot-password']\">Forgot password?</a>\n    </div>\n  </div>\n\n  <div *ngIf=\"userClients\" class='d-flex flex-column gap-2'>\n    <h4 class=\"section-title text-center mt-4\">\n      {{ userClients ? 'SELECT CLIENT TO LOGIN WITH' : 'LOGIN' }}\n    </h4>\n\n    <mat-selection-list formControlName=\"selected_client\" [multiple]=\"false\">\n      <mat-list-option *ngFor=\"let userClient of userClients\" [value]=\"userClient?.client_id\"\n        [disabled]=\"!userClient?.is_enabled || isWorking\">\n        {{ userClient?.client?.name }}\n      </mat-list-option>\n    </mat-selection-list>\n\n    <div class=\"mt-2 mb-4 text-center\" *ngIf=\"userConfig.showForgotPassword\">\n      <a href=\"javascript:;\" (click)=\"backToLogin()\">Back to Login</a>\n    </div>\n  </div>\n\n</form>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MaterialModule }, { kind: "component", type: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", 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$1.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$4.MatSelectionList, selector: "mat-selection-list", inputs: ["color", "compareWith", "multiple", "hideSingleSelectionIndicator", "disabled"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { kind: "component", type: i8$4.MatListOption, selector: "mat-list-option", inputs: ["togglePosition", "checkboxPosition", "color", "value", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.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$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
 };
 LoginFormFieldsComponent = __decorate([
     UntilDestroy()
@@ -10202,7 +10202,7 @@ let LoginComponent = class LoginComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LoginComponent, deps: [{ token: AlertService }, { token: i1$1.Router }, { token: AuthenticationService }, { token: CurrentUserService }, { token: StorageService }, { token: CredentialsService }, { token: i1$1.ActivatedRoute }, { token: UserConfigService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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          <app-login-form-fields [userConfig]=\"userConfig\"></app-login-form-fields>\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\" [routerLink]=\"['/signup']\">\n            Create an account\n          </button>\n        </div>\n      </mat-card>\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: "component", type: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: LoginFormFieldsComponent, selector: "app-login-form-fields", inputs: ["userConfig", "isEnableLoginRedirect"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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          <app-login-form-fields [userConfig]=\"userConfig\"></app-login-form-fields>\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\" [routerLink]=\"['/signup']\">\n            Create an account\n          </button>\n        </div>\n      </mat-card>\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: i2$1.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]  ", exportAs: ["matButton"] }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: LoginFormFieldsComponent, selector: "app-login-form-fields", inputs: ["userConfig", "isEnableLoginRedirect"] }] }); }
 };
 LoginComponent = __decorate([
     UntilDestroy()
@@ -10285,7 +10285,7 @@ class ProfileEditComponent {
         return this.formValidatorService.getErrorMessage(field, this.profileForm, errorMessages$3);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProfileEditComponent, deps: [{ token: HttpService }, { token: AlertService }, { token: ErrorHandlerService }, { token: CurrentUserService }, { token: i1$5.UntypedFormBuilder }, { token: FormValidatorService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ProfileEditComponent, selector: "profile-edit", outputs: { onSave: "onSave" }, ngImport: i0, template: "<form class=\"form-horizontal form-bordered form-medium mx-auto mt-4\" [formGroup]=\"profileForm\" (ngSubmit)=\"save()\">\n    <h3 class=\"section title text-center\">\n        Edit Profile\n    </h3>\n    <div class=\"form-group\" *ngIf=\"user.temporarily_invited\">\n        <small class=\"form-text text-muted\">\n            Please fill your name and you\u2019re currently using a temporary password, please change it to proceed\n        </small>\n    </div>\n    <mat-divider></mat-divider>\n\n    <div class=\"form-group row mt-3\">\n        <mat-form-field class=\"offset-2 col-8\">\n            <input matInput formControlName=\"name\" placeholder=\"Full Name\" type=\"text\" autocomplete=\"off\" required />\n            <mat-error *ngIf=\"isFieldValid('name')\">{{getErrorMessage('name')}}</mat-error>\n        </mat-form-field>\n    </div>\n\n    <div class=\"form-group row\">\n        <mat-form-field class=\"offset-2 col-8\">\n            <input matInput formControlName=\"email\" placeholder=\"Email\" type=\"email\" autocomplete=\"off\" required />\n            <mat-error *ngIf=\"isFieldValid('email')\">{{getErrorMessage('email')}}</mat-error>\n        </mat-form-field>\n    </div>\n\n    <mat-divider></mat-divider>\n\n    <div class=\"form-group mt-3\">\n        <div class=\"col-sm-12 text-center\">\n            <button mat-button class=\"btn btn-md btn-primary\" type=\"submit\" [disabled]=\"isWorking\">Save</button>\n        </div>\n    </div>\n\n</form>", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.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$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.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]  ", 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$1.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: i5$2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ProfileEditComponent, selector: "profile-edit", outputs: { onSave: "onSave" }, ngImport: i0, template: "<form class=\"form-horizontal form-bordered form-medium mx-auto mt-4\" [formGroup]=\"profileForm\" (ngSubmit)=\"save()\">\n    <h3 class=\"section title text-center\">\n        Edit Profile\n    </h3>\n    <div class=\"form-group\" *ngIf=\"user.temporarily_invited\">\n        <small class=\"form-text text-muted\">\n            Please fill your name and you\u2019re currently using a temporary password, please change it to proceed\n        </small>\n    </div>\n    <mat-divider></mat-divider>\n\n    <div class=\"form-group row mt-3\">\n        <mat-form-field class=\"offset-2 col-8\">\n            <input matInput formControlName=\"name\" placeholder=\"Full Name\" type=\"text\" autocomplete=\"off\" required />\n            <mat-error *ngIf=\"isFieldValid('name')\">{{getErrorMessage('name')}}</mat-error>\n        </mat-form-field>\n    </div>\n\n    <div class=\"form-group row\">\n        <mat-form-field class=\"offset-2 col-8\">\n            <input matInput formControlName=\"email\" placeholder=\"Email\" type=\"email\" autocomplete=\"off\" required />\n            <mat-error *ngIf=\"isFieldValid('email')\">{{getErrorMessage('email')}}</mat-error>\n        </mat-form-field>\n    </div>\n\n    <mat-divider></mat-divider>\n\n    <div class=\"form-group mt-3\">\n        <div class=\"col-sm-12 text-center\">\n            <button mat-button class=\"btn btn-md btn-primary\" type=\"submit\" [disabled]=\"isWorking\">Save</button>\n        </div>\n    </div>\n\n</form>", dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.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$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.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]  ", 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$1.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: i5$2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProfileEditComponent, decorators: [{
             type: Component,
@@ -10401,7 +10401,7 @@ class RoleFormComponent {
         return this.formValidatorService.getErrorMessage(field, this.roleForm, errorMessages$2);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RoleFormComponent, deps: [{ token: AlertService }, { token: CredentialsService }, { token: i1$5.UntypedFormBuilder }, { token: FormValidatorService }, { token: UserConfigService }, { token: i1.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: RoleService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: RoleFormComponent, selector: "role-form", ngImport: i0, template: "<form [formGroup]=\"roleForm\" (ngSubmit)=\"save()\" class=\"p-3\">\n    <div fxLayout=\"column\">\n        <div mat-dialog-title class=\"text-center\">\n            <div>Role Form</div>\n        </div>\n        <mat-form-field fxFlex=\"100%\">\n            <input matInput formControlName=\"label\" placeholder=\"Role\" type=\"text\" autocomplete=\"off\" required />\n            <mat-error *ngIf=\"isFieldValid('label')\">{{getErrorMessage('label')}}</mat-error>\n        </mat-form-field>\n        <mat-form-field fxFlex=\"100%\">\n            <textarea matInput placeholder=\"Description\" formControlName=\"description\"></textarea>\n        </mat-form-field>\n\n        <ng-container *ngIf=\"isAdminUser\">\n            <mat-checkbox formControlName=\"is_editable\"> Is Editable</mat-checkbox>\n        </ng-container>\n\n        <div fxFlex=\"100%\" fxLayout fxLayoutAlign=\"end\" fxLayoutGap=\"1rem\">\n            <button mat-button class=\"mt-2\" type=\"button\" (click)=\"dialogRef.close()\">\n                Cancel\n            </button>\n            <button mat-raised-button color=\"primary\" class=\"mt-2\" type=\"submit\">\n                Save\n            </button>\n        </div>\n    </div>\n</form>", 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]  ", exportAs: ["matButton"] }, { kind: "component", type: i8.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], 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.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i9$1.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: 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: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.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$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: RoleFormComponent, selector: "role-form", ngImport: i0, template: "<form [formGroup]=\"roleForm\" (ngSubmit)=\"save()\" class=\"p-3\">\n    <div fxLayout=\"column\">\n        <div mat-dialog-title class=\"text-center\">\n            <div>Role Form</div>\n        </div>\n        <mat-form-field fxFlex=\"100%\">\n            <input matInput formControlName=\"label\" placeholder=\"Role\" type=\"text\" autocomplete=\"off\" required />\n            <mat-error *ngIf=\"isFieldValid('label')\">{{getErrorMessage('label')}}</mat-error>\n        </mat-form-field>\n        <mat-form-field fxFlex=\"100%\">\n            <textarea matInput placeholder=\"Description\" formControlName=\"description\"></textarea>\n        </mat-form-field>\n\n        <ng-container *ngIf=\"isAdminUser\">\n            <mat-checkbox formControlName=\"is_editable\"> Is Editable</mat-checkbox>\n        </ng-container>\n\n        <div fxFlex=\"100%\" fxLayout fxLayoutAlign=\"end\" fxLayoutGap=\"1rem\">\n            <button mat-button class=\"mt-2\" type=\"button\" (click)=\"dialogRef.close()\">\n                Cancel\n            </button>\n            <button mat-raised-button color=\"primary\" class=\"mt-2\" type=\"submit\">\n                Save\n            </button>\n        </div>\n    </div>\n</form>", dependencies: [{ kind: "directive", type: i2$1.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]  ", exportAs: ["matButton"] }, { kind: "component", type: i8.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], 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.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i9$1.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: 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: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.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$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RoleFormComponent, decorators: [{
             type: Component,
@@ -10603,7 +10603,7 @@ class RolesViewAllComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RolesViewAllComponent, deps: [{ token: HttpService }, { token: i1$1.ActivatedRoute }, { token: CredentialsService }, { token: UserConfigService }, { token: i1.MatDialog }, { token: CurrentUserService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: RolesViewAllComponent, selector: "roles-view-all", inputs: { clientId: "clientId" }, ngImport: i0, template: "<div fxLayout=\"column\" class=\"m-2\">\n  <mat-card appearance=\"outlined\">\n    <mat-card-content class=\"d-flex justify-content-start align-items-center gap-2\">\n      <h3 class=\"m-0\">\n        Manage Roles\n      </h3>\n      <app-role-form-button (success)=\"reload()\" class=\"mt-2\"\n        *ngIf=\"(!config.roleConfig.disableAddRole) && currentUserService?.hasPermission('role_create')\"\n        [clientId]=\"clientId\"></app-role-form-button>\n      <button mat-raised-button type=\"button\" [routerLink]=\"['../users']\" *ngIf=\"!config.roleConfig.disableUsers\"\n        class=\"ml-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=\"ml-1\">\n        <mat-icon>lock</mat-icon>\n        Role Permissions\n      </button>\n    </mat-card-content>\n  </mat-card>\n\n  <mat-card appearance=\"outlined\" class=\"mt-2 p-0\">\n    <mat-card-content>\n      <table mat-table [dataSource]=\"roles\" class=\"w-100\" infiniteScroll [infiniteScrollDistance]=\"2\"\n        [infiniteScrollThrottle]=\"50\" (scrolled)=\"onScroll()\" 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?.client_id == null, 'badge-secondary': element?.client_id != null}\">\n              {{(element?.client_id == null) ? '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        <!-- 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            <app-role-form-button (success)=\"reload()\" [role]=\"role\" [isUpdate]=\"true\"\n              *ngIf=\"(isAdminUser || role.is_editable) && currentUserService.hasPermission('role_update')\"\n              [clientId]=\"clientId\"></app-role-form-button>\n\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</div>", 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$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "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]  ", exportAs: ["matButton"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i9.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i9.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i9.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i9.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i9.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i9.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i9.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i9.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i9.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i5.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { 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: 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: i6$1.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: RoleFormButtonComponent, selector: "app-role-form-button", inputs: ["config", "clientId", "isUpdate", "role"], outputs: ["success"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: RolesViewAllComponent, selector: "roles-view-all", inputs: { clientId: "clientId" }, ngImport: i0, template: "<div fxLayout=\"column\" class=\"m-2\">\n  <mat-card appearance=\"outlined\">\n    <mat-card-content class=\"d-flex justify-content-start align-items-center gap-2\">\n      <h3 class=\"m-0\">\n        Manage Roles\n      </h3>\n      <app-role-form-button (success)=\"reload()\" class=\"mt-2\"\n        *ngIf=\"(!config.roleConfig.disableAddRole) && currentUserService?.hasPermission('role_create')\"\n        [clientId]=\"clientId\"></app-role-form-button>\n      <button mat-raised-button type=\"button\" [routerLink]=\"['../users']\" *ngIf=\"!config.roleConfig.disableUsers\"\n        class=\"ml-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=\"ml-1\">\n        <mat-icon>lock</mat-icon>\n        Role Permissions\n      </button>\n    </mat-card-content>\n  </mat-card>\n\n  <mat-card appearance=\"outlined\" class=\"mt-2 p-0\">\n    <mat-card-content>\n      <table mat-table [dataSource]=\"roles\" class=\"w-100\" infiniteScroll [infiniteScrollDistance]=\"2\"\n        [infiniteScrollThrottle]=\"50\" (scrolled)=\"onScroll()\" 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?.client_id == null, 'badge-secondary': element?.client_id != null}\">\n              {{(element?.client_id == null) ? '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        <!-- 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            <app-role-form-button (success)=\"reload()\" [role]=\"role\" [isUpdate]=\"true\"\n              *ngIf=\"(isAdminUser || role.is_editable) && currentUserService.hasPermission('role_update')\"\n              [clientId]=\"clientId\"></app-role-form-button>\n\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</div>", dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "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]  ", exportAs: ["matButton"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i9.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i9.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i9.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i9.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i9.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i9.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i9.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i9.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i9.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i5.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { 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: 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: i6$1.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: RoleFormButtonComponent, selector: "app-role-form-button", inputs: ["config", "clientId", "isUpdate", "role"], outputs: ["success"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RolesViewAllComponent, decorators: [{
             type: Component,
@@ -10711,7 +10711,7 @@ class PermissionsManagementComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PermissionsManagementComponent, deps: [{ token: HttpService }, { token: AlertService }, { token: i1$1.ActivatedRoute }, { token: CredentialsService }, { token: ErrorHandlerService }, { token: UserConfigService }, { token: i1$5.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PermissionsManagementComponent, selector: "role-permissions-management", inputs: { clientId: "clientId" }, ngImport: i0, template: "<div class=\"d-flex flex-column justify-content-start gap-3\">\n  <mat-card>\n    <mat-card-content class=\"d-flex justify-content-between align-items-center gap-3\">\n      <div class=\"d-flex justify-content-start align-items-center gap-2\">\n        <h3 class=\"m-0 fw-bold\">\n          Manage Role Permissions\n        </h3>\n        <button *ngIf=\"!config.permissionConfig.disableUsers\" [routerLink]=\"['../users']\" class=\"ml-1\"\n          mat-raised-button>\n          <i class=\"icon fas fa-users\"></i> Users\n        </button>\n        <button *ngIf=\"!config.permissionConfig.disableRoles\" [routerLink]=\"['../roles']\" class=\"ml-1\"\n          mat-raised-button>\n          <i class=\"fas fa-user-md\"></i> Manage Roles\n        </button>\n      </div>\n      <form [formGroup]=\"filterForm\" class=\"d-flex justify-content-end align-items-center gap-2\">\n        <mat-form-field appearance=\"outline\">\n          <mat-label>Search</mat-label>\n          <input autocomplete=\"off\" formControlName=\"search\" matInput placeholder=\"Search Permissions\" type=\"text\" />\n          <button (click)=\"filterForm.get('search').setValue('')\" *ngIf=\"filterForm.get('search').value\" mat-icon-button\n            matSuffix type=\"button\">\n            <mat-icon>clear</mat-icon>\n          </button>\n        </mat-form-field>\n\n        <mat-form-field *ngIf=\"roles\" appearance=\"outline\" class=\"ml-2\">\n          <mat-label>Show Roles</mat-label>\n          <mat-select formControlName='role_ids' multiple>\n            <mat-option *ngFor=\"let role of roles\" [value]=\"role?.id\">\n              {{ role.label }}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n      </form>\n    </mat-card-content>\n  </mat-card>\n\n  <mat-card class=\"mt-2\">\n    <mat-card-content class=\"p-0\">\n      <form>\n        <table aria-describedby=\"Role Permissions\" class=\"table table-sm table-bordered table-condensed table-striped\">\n          <thead>\n            <tr>\n              <th>Permissions</th>\n              <ng-container *ngFor=\"let role of roles\">\n                <th *ngIf=\"filterForm.get('role_ids').value.includes(role.id)\" class=\"text-center\">\n                  {{ role.label }}\n                </th>\n              </ng-container>\n            </tr>\n          </thead>\n          <tbody>\n            <tr *ngFor=\"let permission of filteredPermissions\">\n              <td>\n                {{ permission.label }}\n              </td>\n              <ng-container *ngFor=\"let role of roles\">\n                <td *ngIf=\"filterForm.get('role_ids').value.includes(role.id)\" class=\"text-center align-middle\">\n                  <div class=\"d-flex justify-content-center align-items-center h-100\">\n                    <input (change)=\"updateRolePermission(role, permission)\"\n                      [checked]=\"role.hasPermission(permission.slug)\"\n                      [disabled]=\"isDisabled(role?.client_id == null, role.is_editable)\"\n                      name=\"{{role.id}}[{{permission?.label}}]\" type=\"checkbox\" />\n                  </div>\n                </td>\n              </ng-container>\n            </tr>\n          </tbody>\n        </table>\n      </form>\n    </mat-card-content>\n  </mat-card>\n</div>", 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$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "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]  ", exportAs: ["matButton"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", 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.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$1.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: i6$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i9$2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.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$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PermissionsManagementComponent, selector: "role-permissions-management", inputs: { clientId: "clientId" }, ngImport: i0, template: "<div class=\"d-flex flex-column justify-content-start gap-3\">\n  <mat-card>\n    <mat-card-content class=\"d-flex justify-content-between align-items-center gap-3\">\n      <div class=\"d-flex justify-content-start align-items-center gap-2\">\n        <h3 class=\"m-0 fw-bold\">\n          Manage Role Permissions\n        </h3>\n        <button *ngIf=\"!config.permissionConfig.disableUsers\" [routerLink]=\"['../users']\" class=\"ml-1\"\n          mat-raised-button>\n          <i class=\"icon fas fa-users\"></i> Users\n        </button>\n        <button *ngIf=\"!config.permissionConfig.disableRoles\" [routerLink]=\"['../roles']\" class=\"ml-1\"\n          mat-raised-button>\n          <i class=\"fas fa-user-md\"></i> Manage Roles\n        </button>\n      </div>\n      <form [formGroup]=\"filterForm\" class=\"d-flex justify-content-end align-items-center gap-2\">\n        <mat-form-field appearance=\"outline\">\n          <mat-label>Search</mat-label>\n          <input autocomplete=\"off\" formControlName=\"search\" matInput placeholder=\"Search Permissions\" type=\"text\" />\n          <button (click)=\"filterForm.get('search').setValue('')\" *ngIf=\"filterForm.get('search').value\" mat-icon-button\n            matSuffix type=\"button\">\n            <mat-icon>clear</mat-icon>\n          </button>\n        </mat-form-field>\n\n        <mat-form-field *ngIf=\"roles\" appearance=\"outline\" class=\"ml-2\">\n          <mat-label>Show Roles</mat-label>\n          <mat-select formControlName='role_ids' multiple>\n            <mat-option *ngFor=\"let role of roles\" [value]=\"role?.id\">\n              {{ role.label }}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n      </form>\n    </mat-card-content>\n  </mat-card>\n\n  <mat-card class=\"mt-2\">\n    <mat-card-content class=\"p-0\">\n      <form>\n        <table aria-describedby=\"Role Permissions\" class=\"table table-sm table-bordered table-condensed table-striped\">\n          <thead>\n            <tr>\n              <th>Permissions</th>\n              <ng-container *ngFor=\"let role of roles\">\n                <th *ngIf=\"filterForm.get('role_ids').value.includes(role.id)\" class=\"text-center\">\n                  {{ role.label }}\n                </th>\n              </ng-container>\n            </tr>\n          </thead>\n          <tbody>\n            <tr *ngFor=\"let permission of filteredPermissions\">\n              <td>\n                {{ permission.label }}\n              </td>\n              <ng-container *ngFor=\"let role of roles\">\n                <td *ngIf=\"filterForm.get('role_ids').value.includes(role.id)\" class=\"text-center align-middle\">\n                  <div class=\"d-flex justify-content-center align-items-center h-100\">\n                    <input (change)=\"updateRolePermission(role, permission)\"\n                      [checked]=\"role.hasPermission(permission.slug)\"\n                      [disabled]=\"isDisabled(role?.client_id == null, role.is_editable)\"\n                      name=\"{{role.id}}[{{permission?.label}}]\" type=\"checkbox\" />\n                  </div>\n                </td>\n              </ng-container>\n            </tr>\n          </tbody>\n        </table>\n      </form>\n    </mat-card-content>\n  </mat-card>\n</div>", dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "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]  ", exportAs: ["matButton"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", 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.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$1.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: i6$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i9$2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.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$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PermissionsManagementComponent, decorators: [{
             type: Component,
@@ -10754,7 +10754,7 @@ class RoleViewComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RoleViewComponent, deps: [{ token: HttpService }, { token: ErrorHandlerService }, { token: i1$1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: RoleViewComponent, selector: "app-role-view", ngImport: i0, template: "<div fxLayout=\"column\" fxLayoutGap=\"1rem\" class=\"p-4\">\n  <h3 fxLayoutAlign=\"center\" class=\"pb-4\">Role View</h3>\n  <div fxLayout=\"row wrap\" fxLayoutGap=\"1rem grid\">\n    <div fxFlex.lt-md=\"100%\" fxFlex=\"0 1 calc(50%-1rem)\">\n      <mat-card fxFlex=\"100%\">\n        <mat-card-title>Basic Info.</mat-card-title>\n        <mat-card-content fxLayout=\"column wrap\" fxLayoutGap=\"1rem\">\n          <div>\n            <span class=\"font-weight-bold\">Role:</span> {{role?.label}}\n          </div>\n          <div>\n            <span class=\"font-weight-bold\">Description:</span> {{role?.description}}\n          </div>\n          <div>\n            <span class=\"font-weight-bold\">Is App Role:</span> {{(role?.client_id == null) ? 'Yes' : 'No'}}\n          </div>\n          <div>\n            <span class=\"font-weight-bold\"># Users:</span> {{role?.role_users_count}}\n          </div>\n        </mat-card-content>\n      </mat-card>\n    </div>\n    <div fxFlex.lt-md=\"100%\" fxFlex=\"0 1 calc(50%-1rem)\">\n      <mat-card fxFlex=\"100%\">\n        <mat-card-title>Permissions ({{role?.permissions.length}})</mat-card-title>\n        <mat-card-content style=\"height:400px;overflow-y: scroll;\">\n          <div fxLayout=\"column wrap\">\n            <div *ngFor=\"let permission of role?.permissions;let i=index;\">\n              {{i+1}}. {{permission.label}}\n            </div>\n          </div>\n        </mat-card-content>\n      </mat-card>\n    </div>\n  </div>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: i4.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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: RoleViewComponent, selector: "app-role-view", ngImport: i0, template: "<div fxLayout=\"column\" fxLayoutGap=\"1rem\" class=\"p-4\">\n  <h3 fxLayoutAlign=\"center\" class=\"pb-4\">Role View</h3>\n  <div fxLayout=\"row wrap\" fxLayoutGap=\"1rem grid\">\n    <div fxFlex.lt-md=\"100%\" fxFlex=\"0 1 calc(50%-1rem)\">\n      <mat-card fxFlex=\"100%\">\n        <mat-card-title>Basic Info.</mat-card-title>\n        <mat-card-content fxLayout=\"column wrap\" fxLayoutGap=\"1rem\">\n          <div>\n            <span class=\"font-weight-bold\">Role:</span> {{role?.label}}\n          </div>\n          <div>\n            <span class=\"font-weight-bold\">Description:</span> {{role?.description}}\n          </div>\n          <div>\n            <span class=\"font-weight-bold\">Is App Role:</span> {{(role?.client_id == null) ? 'Yes' : 'No'}}\n          </div>\n          <div>\n            <span class=\"font-weight-bold\"># Users:</span> {{role?.role_users_count}}\n          </div>\n        </mat-card-content>\n      </mat-card>\n    </div>\n    <div fxFlex.lt-md=\"100%\" fxFlex=\"0 1 calc(50%-1rem)\">\n      <mat-card fxFlex=\"100%\">\n        <mat-card-title>Permissions ({{role?.permissions.length}})</mat-card-title>\n        <mat-card-content style=\"height:400px;overflow-y: scroll;\">\n          <div fxLayout=\"column wrap\">\n            <div *ngFor=\"let permission of role?.permissions;let i=index;\">\n              {{i+1}}. {{permission.label}}\n            </div>\n          </div>\n        </mat-card-content>\n      </mat-card>\n    </div>\n  </div>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: i4.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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RoleViewComponent, decorators: [{
             type: Component,
@@ -10858,7 +10858,7 @@ class SignUpComponent {
         return this.formValidatorService.getErrorMessage(field, this.signUpForm, errorMessages$1);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SignUpComponent, deps: [{ token: HttpService }, { token: AlertService }, { token: i1$1.Router }, { token: ErrorHandlerService }, { token: i1$5.UntypedFormBuilder }, { token: FormValidatorService }, { token: UserConfigService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.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$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.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]  ", 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$1.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$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.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$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.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]  ", 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$1.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$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SignUpComponent, decorators: [{
             type: Component,
@@ -10935,7 +10935,7 @@ class UserSelectorComponent {
                 useExisting: forwardRef(() => UserSelectorComponent),
                 multi: true
             }
-        ], ngImport: i0, template: "<mat-form-field class=\"col-12 pl-0 pr-0\">\n    <mat-label>User</mat-label>\n    <mat-select [(ngModel)]=\"value\" (selectionChange)=\"itemSelected()\" [required]=\"isRequired\">\n        <mat-option *ngFor=\"let user of items\" [value]=\"user.id\">{{user.name}}</mat-option>\n    </mat-select>\n    <mat-error>User is required</mat-error>\n</mat-form-field>", dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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: "component", type: i6$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i9$2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }] }); }
+        ], ngImport: i0, template: "<mat-form-field class=\"col-12 pl-0 pr-0\">\n    <mat-label>User</mat-label>\n    <mat-select [(ngModel)]=\"value\" (selectionChange)=\"itemSelected()\" [required]=\"isRequired\">\n        <mat-option *ngFor=\"let user of items\" [value]=\"user.id\">{{user.name}}</mat-option>\n    </mat-select>\n    <mat-error>User is required</mat-error>\n</mat-form-field>", dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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: "component", type: i6$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i9$2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserSelectorComponent, decorators: [{
             type: Component,
@@ -11468,13 +11468,13 @@ class AccessControlConfigFormComponent {
     redirectBack() {
         this.location.back();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AccessControlConfigFormComponent, deps: [{ token: i1$5.UntypedFormBuilder }, { token: FormValidatorService }, { token: AlertService }, { token: AccessControlConfigService }, { token: i3.Location }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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\" autocomplete=\"off\" type=\"number\" min=\"0\" 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 formControlName=\"max_old_passwords_block\" placeholder=\"Block x most recent passwords\"\n              type=\"number\" min=\"0\" autocomplete=\"off\" 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 formControlName=\"min_password_length\" placeholder=\"Minimum Password Length\" type=\"number\"\n              min=\"1\" 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 [hideSingleSelectionIndicator]=\"true\" [hideMultipleSelectionIndicator]=\"true\"\n                  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 [hideSingleSelectionIndicator]=\"true\" [hideMultipleSelectionIndicator]=\"true\"\n                  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 [hideSingleSelectionIndicator]=\"true\" [hideMultipleSelectionIndicator]=\"true\"\n                  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 [hideSingleSelectionIndicator]=\"true\" [hideMultipleSelectionIndicator]=\"true\"\n                  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\" 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>", styles: [".custom-hint{font-size:10.5px}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.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$5.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$5.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.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]  ", 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$1.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: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: i3$2.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i3$2.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: i5.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AccessControlConfigFormComponent, deps: [{ token: i1$5.UntypedFormBuilder }, { token: FormValidatorService }, { token: AlertService }, { token: AccessControlConfigService }, { token: i2$1.Location }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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\" autocomplete=\"off\" type=\"number\" min=\"0\" 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 formControlName=\"max_old_passwords_block\" placeholder=\"Block x most recent passwords\"\n              type=\"number\" min=\"0\" autocomplete=\"off\" 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 formControlName=\"min_password_length\" placeholder=\"Minimum Password Length\" type=\"number\"\n              min=\"1\" 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 [hideSingleSelectionIndicator]=\"true\" [hideMultipleSelectionIndicator]=\"true\"\n                  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 [hideSingleSelectionIndicator]=\"true\" [hideMultipleSelectionIndicator]=\"true\"\n                  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 [hideSingleSelectionIndicator]=\"true\" [hideMultipleSelectionIndicator]=\"true\"\n                  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 [hideSingleSelectionIndicator]=\"true\" [hideMultipleSelectionIndicator]=\"true\"\n                  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\" 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>", styles: [".custom-hint{font-size:10.5px}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.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$5.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$5.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.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]  ", 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$1.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: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: i3$1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i3$1.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: i5.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AccessControlConfigFormComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-access-control-config-form', 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\" autocomplete=\"off\" type=\"number\" min=\"0\" 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 formControlName=\"max_old_passwords_block\" placeholder=\"Block x most recent passwords\"\n              type=\"number\" min=\"0\" autocomplete=\"off\" 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 formControlName=\"min_password_length\" placeholder=\"Minimum Password Length\" type=\"number\"\n              min=\"1\" 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 [hideSingleSelectionIndicator]=\"true\" [hideMultipleSelectionIndicator]=\"true\"\n                  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 [hideSingleSelectionIndicator]=\"true\" [hideMultipleSelectionIndicator]=\"true\"\n                  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 [hideSingleSelectionIndicator]=\"true\" [hideMultipleSelectionIndicator]=\"true\"\n                  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 [hideSingleSelectionIndicator]=\"true\" [hideMultipleSelectionIndicator]=\"true\"\n                  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\" 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>", styles: [".custom-hint{font-size:10.5px}\n"] }]
-        }], ctorParameters: () => [{ type: i1$5.UntypedFormBuilder }, { type: FormValidatorService }, { type: AlertService }, { type: AccessControlConfigService }, { type: i3.Location }] });
+        }], ctorParameters: () => [{ type: i1$5.UntypedFormBuilder }, { type: FormValidatorService }, { type: AlertService }, { type: AccessControlConfigService }, { type: i2$1.Location }] });
 
 const routes$b = [
     {
@@ -11603,7 +11603,7 @@ let AccessControlConfigComponent = class AccessControlConfigComponent {
         this.filterFormGroup.get(field).setValue('');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AccessControlConfigComponent, deps: [{ token: i1.MatDialog }, { token: AlertService }, { token: i1$5.UntypedFormBuilder }, { token: AccessControlConfigService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AccessControlConfigComponent, selector: "app-access-control-config", ngImport: i0, template: "<section class=\"p-4\" fxLayout=\"column\">\n  <h3 class=\"primary-color text-center\">\n    Access Control Configs\n    <button mat-raised-button color=\"primary\" (click)=\"modifyTechlifyUpdate()\" class=\"primary-bg text-white\"\n      *ngIf=\"!configs.length\">\n      <mat-icon>\n        add\n      </mat-icon>\n      Config\n    </button>\n  </h3>\n\n  <table mat-table [dataSource]=\"configs\" class=\"mat-elevation-z8 w-100\">\n\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    <ng-container matColumnDef=\"max_failed_consecutive_login_attempts\">\n      <th mat-header-cell *matHeaderCellDef>\n        Max Failed Login Attempts\n      </th>\n      <td mat-cell *matCellDef=\"let element\">\n        {{element?.max_failed_consecutive_login_attempts}}\n      </td>\n    </ng-container>\n\n    <ng-container matColumnDef=\"is_track_old_passwords\">\n      <th mat-header-cell *matHeaderCellDef>\n        Track Old Passwords\n      </th>\n      <td mat-cell *matCellDef=\"let element\"> {{element?.is_track_old_passwords ? 'Yes' : 'No'}} </td>\n    </ng-container>\n\n    <ng-container matColumnDef=\"max_old_passwords_block\">\n      <th mat-header-cell *matHeaderCellDef>\n        Max old password block\n      </th>\n      <td mat-cell *matCellDef=\"let element\">\n        {{element?.max_old_passwords_block }}\n      </td>\n    </ng-container>\n\n    <ng-container matColumnDef=\"min_password_length\">\n      <th mat-header-cell *matHeaderCellDef>\n        Minimum Password Length\n      </th>\n      <td mat-cell *matCellDef=\"let element\">\n        {{element?.min_password_length}}\n      </td>\n    </ng-container>\n\n    <ng-container matColumnDef=\"is_password_require_number\">\n      <th mat-header-cell *matHeaderCellDef>\n        Password: Require Number\n      </th>\n      <td mat-cell *matCellDef=\"let element\">\n        {{element?.is_password_require_number ? 'Yes' : 'No'}}\n      </td>\n    </ng-container>\n\n    <ng-container matColumnDef=\"is_password_require_symbol\">\n      <th mat-header-cell *matHeaderCellDef>\n        Password: Require Symbol\n      </th>\n      <td mat-cell *matCellDef=\"let element\">\n        {{element?.is_password_require_symbol ? 'Yes' : 'No'}}\n      </td>\n    </ng-container>\n\n    <ng-container matColumnDef=\"is_password_require_capital_letter\">\n      <th mat-header-cell *matHeaderCellDef>\n        Password: Require Capital Letter\n      </th>\n      <td mat-cell *matCellDef=\"let element\">\n        {{element?.is_password_require_capital_letter ? 'Yes' : 'No'}}\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\" class=\"secondary-color\">\n        <button type=\"button\" class=\"secondary-color\" mat-icon-button (click)=\"modifyTechlifyUpdate(element)\">\n          <mat-icon>edit</mat-icon>\n        </button>\n\n        <button type=\"button\" class=\"secondary-color\" mat-icon-button (click)=\"deleteTechlifyUpdate(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</section>\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: "component", type: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i9.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i9.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i9.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i9.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i9.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i9.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i9.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i9.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i9.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AccessControlConfigComponent, selector: "app-access-control-config", ngImport: i0, template: "<section class=\"p-4\" fxLayout=\"column\">\n  <h3 class=\"primary-color text-center\">\n    Access Control Configs\n    <button mat-raised-button color=\"primary\" (click)=\"modifyTechlifyUpdate()\" class=\"primary-bg text-white\"\n      *ngIf=\"!configs.length\">\n      <mat-icon>\n        add\n      </mat-icon>\n      Config\n    </button>\n  </h3>\n\n  <table mat-table [dataSource]=\"configs\" class=\"mat-elevation-z8 w-100\">\n\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    <ng-container matColumnDef=\"max_failed_consecutive_login_attempts\">\n      <th mat-header-cell *matHeaderCellDef>\n        Max Failed Login Attempts\n      </th>\n      <td mat-cell *matCellDef=\"let element\">\n        {{element?.max_failed_consecutive_login_attempts}}\n      </td>\n    </ng-container>\n\n    <ng-container matColumnDef=\"is_track_old_passwords\">\n      <th mat-header-cell *matHeaderCellDef>\n        Track Old Passwords\n      </th>\n      <td mat-cell *matCellDef=\"let element\"> {{element?.is_track_old_passwords ? 'Yes' : 'No'}} </td>\n    </ng-container>\n\n    <ng-container matColumnDef=\"max_old_passwords_block\">\n      <th mat-header-cell *matHeaderCellDef>\n        Max old password block\n      </th>\n      <td mat-cell *matCellDef=\"let element\">\n        {{element?.max_old_passwords_block }}\n      </td>\n    </ng-container>\n\n    <ng-container matColumnDef=\"min_password_length\">\n      <th mat-header-cell *matHeaderCellDef>\n        Minimum Password Length\n      </th>\n      <td mat-cell *matCellDef=\"let element\">\n        {{element?.min_password_length}}\n      </td>\n    </ng-container>\n\n    <ng-container matColumnDef=\"is_password_require_number\">\n      <th mat-header-cell *matHeaderCellDef>\n        Password: Require Number\n      </th>\n      <td mat-cell *matCellDef=\"let element\">\n        {{element?.is_password_require_number ? 'Yes' : 'No'}}\n      </td>\n    </ng-container>\n\n    <ng-container matColumnDef=\"is_password_require_symbol\">\n      <th mat-header-cell *matHeaderCellDef>\n        Password: Require Symbol\n      </th>\n      <td mat-cell *matCellDef=\"let element\">\n        {{element?.is_password_require_symbol ? 'Yes' : 'No'}}\n      </td>\n    </ng-container>\n\n    <ng-container matColumnDef=\"is_password_require_capital_letter\">\n      <th mat-header-cell *matHeaderCellDef>\n        Password: Require Capital Letter\n      </th>\n      <td mat-cell *matCellDef=\"let element\">\n        {{element?.is_password_require_capital_letter ? 'Yes' : 'No'}}\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\" class=\"secondary-color\">\n        <button type=\"button\" class=\"secondary-color\" mat-icon-button (click)=\"modifyTechlifyUpdate(element)\">\n          <mat-icon>edit</mat-icon>\n        </button>\n\n        <button type=\"button\" class=\"secondary-color\" mat-icon-button (click)=\"deleteTechlifyUpdate(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</section>\n", styles: [""], dependencies: [{ kind: "directive", type: i2$1.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: "component", type: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i9.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i9.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i9.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i9.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i9.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i9.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i9.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i9.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i9.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }] }); }
 };
 AccessControlConfigComponent = __decorate([
     UntilDestroy()
@@ -11816,7 +11816,7 @@ class RestrictorTypeSelectorComponent {
                 multi: true,
                 useExisting: RestrictorTypeSelectorComponent
             }
-        ], ngImport: i0, template: "<div *ngIf=\"options?.length > 0\">\n  <span *ngIf=\"showLabel\" class=\"mr-1\">{{ label }}</span> <br *ngIf=\"showLabel\">\n  <mat-button-toggle-group [hideSingleSelectionIndicator]=\"true\" [hideMultipleSelectionIndicator]=\"true\"\n    [formControl]=\"selectedOption\" [multiple]=\"multiple\">\n    <mat-button-toggle *ngFor=\"let option of options\" [value]=\"option?.id\" [matTooltip]=\"option?.description\">\n      {{ option?.title }}\n    </mat-button-toggle>\n  </mat-button-toggle-group>\n</div>", styles: [""], 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: i3$2.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i3$2.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
+        ], ngImport: i0, template: "<div *ngIf=\"options?.length > 0\">\n  <span *ngIf=\"showLabel\" class=\"mr-1\">{{ label }}</span> <br *ngIf=\"showLabel\">\n  <mat-button-toggle-group [hideSingleSelectionIndicator]=\"true\" [hideMultipleSelectionIndicator]=\"true\"\n    [formControl]=\"selectedOption\" [multiple]=\"multiple\">\n    <mat-button-toggle *ngFor=\"let option of options\" [value]=\"option?.id\" [matTooltip]=\"option?.description\">\n      {{ option?.title }}\n    </mat-button-toggle>\n  </mat-button-toggle-group>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i3$1.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RestrictorTypeSelectorComponent, decorators: [{
             type: Component,
@@ -11915,7 +11915,7 @@ class RestrictorLevelSelectorComponent {
                 multi: true,
                 useExisting: RestrictorLevelSelectorComponent
             }
-        ], ngImport: i0, template: "<div *ngIf=\"options?.length > 0\">\n  <span *ngIf=\"showLabel\" class=\"mr-1\">{{ label }}</span> <br *ngIf=\"showLabel\">\n  <mat-button-toggle-group [hideSingleSelectionIndicator]=\"true\" [hideMultipleSelectionIndicator]=\"true\"\n    [formControl]=\"selectedOption\" [multiple]=\"multiple\">\n    <mat-button-toggle *ngFor=\"let option of options\" [value]=\"option?.id\">\n      {{ option?.title }}\n    </mat-button-toggle>\n  </mat-button-toggle-group>\n</div>", styles: [""], 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: i3$2.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i3$2.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
+        ], ngImport: i0, template: "<div *ngIf=\"options?.length > 0\">\n  <span *ngIf=\"showLabel\" class=\"mr-1\">{{ label }}</span> <br *ngIf=\"showLabel\">\n  <mat-button-toggle-group [hideSingleSelectionIndicator]=\"true\" [hideMultipleSelectionIndicator]=\"true\"\n    [formControl]=\"selectedOption\" [multiple]=\"multiple\">\n    <mat-button-toggle *ngFor=\"let option of options\" [value]=\"option?.id\">\n      {{ option?.title }}\n    </mat-button-toggle>\n  </mat-button-toggle-group>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i3$1.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RestrictorLevelSelectorComponent, decorators: [{
             type: Component,
@@ -12014,7 +12014,7 @@ class RestrictorStatusSelectorComponent {
                 multi: true,
                 useExisting: RestrictorStatusSelectorComponent
             }
-        ], ngImport: i0, template: "<div *ngIf=\"options?.length > 0\">\n  <span *ngIf=\"showLabel\" class=\"mr-1\">{{ label }}</span> <br *ngIf=\"showLabel\">\n  <mat-button-toggle-group [hideSingleSelectionIndicator]=\"true\" [hideMultipleSelectionIndicator]=\"true\"\n    [formControl]=\"selectedOption\" [multiple]=\"multiple\">\n    <mat-button-toggle *ngFor=\"let option of options\" [value]=\"option?.id\">\n      {{ option?.title }}\n    </mat-button-toggle>\n  </mat-button-toggle-group>\n</div>", styles: [""], 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: i3$2.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i3$2.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
+        ], ngImport: i0, template: "<div *ngIf=\"options?.length > 0\">\n  <span *ngIf=\"showLabel\" class=\"mr-1\">{{ label }}</span> <br *ngIf=\"showLabel\">\n  <mat-button-toggle-group [hideSingleSelectionIndicator]=\"true\" [hideMultipleSelectionIndicator]=\"true\"\n    [formControl]=\"selectedOption\" [multiple]=\"multiple\">\n    <mat-button-toggle *ngFor=\"let option of options\" [value]=\"option?.id\">\n      {{ option?.title }}\n    </mat-button-toggle>\n  </mat-button-toggle-group>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i3$1.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RestrictorStatusSelectorComponent, decorators: [{
             type: Component,
@@ -12150,7 +12150,7 @@ class RestrictorsListPageComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RestrictorsListPageComponent, deps: [{ token: i1$5.FormBuilder }, { token: RequestHelperService }, { token: i1$1.ActivatedRoute }, { token: RestrictorService }, { token: UserConfigService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "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: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: RestrictorTypeSelectorComponent, selector: "techlify-restrictor-type-selector", inputs: ["label", "multiple", "showLabel"] }, { kind: "directive", type: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.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: i9.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i9.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i9.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i9.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i9.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i9.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i9.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i9.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i9.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i9.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i5.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i11.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i11.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "directive", type: i6$1.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 { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "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: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: RestrictorTypeSelectorComponent, selector: "techlify-restrictor-type-selector", inputs: ["label", "multiple", "showLabel"] }, { kind: "directive", type: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.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: i9.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i9.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i9.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i9.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i9.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i9.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i9.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i9.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i9.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i9.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i5.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i11.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i11.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "directive", type: i6$1.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: i2$1.DatePipe, name: "date" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RestrictorsListPageComponent, decorators: [{
             type: Component,
@@ -12241,7 +12241,7 @@ class IpRangeSelectorComponent {
                 multi: true,
                 useExisting: IpRangeSelectorComponent
             }
-        ], ngImport: i0, template: "<div fxLayout fxLayoutGap=\"10px\" class=\"w-100\">\n  <mat-form-field fxFlex=\"calc(85% - 10px)\">\n    <mat-label>{{ label }}</mat-label>\n    <input type=\"text\" matInput placeholder=\"IP Range\" [formControl]=\"ipAddressControl\">\n    <mat-hint>\n      What is the ip address or range that we should block? Format can be either a single IP like\n      <code>192.175.32.133</code> OR a range specifying the subnet like <code>192.175.32.0/24</code>\n    </mat-hint>\n  </mat-form-field>\n  <mat-form-field fxFlex=\"calc(15% - 10px)\">\n    <mat-select [formControl]=\"subnetControl\">\n      <mat-option *ngFor=\"let subnet of subnetOptions\" [value]=\"subnet.value\">\n        /{{ subnet.value }}\n      </mat-option>\n    </mat-select>\n  </mat-form-field>\n</div>\n", styles: [".custom-suffix{background:gray;margin-top:-20px;position:absolute;right:0;top:20px;height:50px;border-radius:4px;padding-top:20px}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: "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: i9$1.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: i6$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i9$2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i1$5.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$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
+        ], ngImport: i0, template: "<div fxLayout fxLayoutGap=\"10px\" class=\"w-100\">\n  <mat-form-field fxFlex=\"calc(85% - 10px)\">\n    <mat-label>{{ label }}</mat-label>\n    <input type=\"text\" matInput placeholder=\"IP Range\" [formControl]=\"ipAddressControl\">\n    <mat-hint>\n      What is the ip address or range that we should block? Format can be either a single IP like\n      <code>192.175.32.133</code> OR a range specifying the subnet like <code>192.175.32.0/24</code>\n    </mat-hint>\n  </mat-form-field>\n  <mat-form-field fxFlex=\"calc(15% - 10px)\">\n    <mat-select [formControl]=\"subnetControl\">\n      <mat-option *ngFor=\"let subnet of subnetOptions\" [value]=\"subnet.value\">\n        /{{ subnet.value }}\n      </mat-option>\n    </mat-select>\n  </mat-form-field>\n</div>\n", styles: [".custom-suffix{background:gray;margin-top:-20px;position:absolute;right:0;top:20px;height:50px;border-radius:4px;padding-top:20px}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: "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: i9$1.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: i6$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i9$2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i1$5.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$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: IpRangeSelectorComponent, decorators: [{
             type: Component,
@@ -12329,13 +12329,13 @@ class RestrictorsFormComponent {
     redirectBack() {
         this.location.back();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RestrictorsFormComponent, deps: [{ token: i1$5.FormBuilder }, { token: i3.Location }, { token: RequestHelperService }, { token: AlertService }, { token: RestrictorService }, { token: i3.DatePipe }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: RestrictorsFormComponent, selector: "techlify-restrictors-form", inputs: { restrictor: "restrictor" }, ngImport: i0, template: "<div fxLayout fxLayoutAlign=\"center\" class=\"mb-0\">\n  <h3>Restrictor Form</h3>\n</div>\n\n<form [formGroup]=\"form\"\n      fxLayout=\"row wrap\" fxLayoutAlign=\"start\" fxLayoutGap=\"10px\"\n      (submit)=\"save()\">\n\n  <techlify-restrictor-type-selector formControlName=\"type_id\"\n                                     fxFlex=\"calc(100% - 10px)\"></techlify-restrictor-type-selector>\n\n  <div fxLayout fxLayoutGap=\"10px\" fxFlex=\"calc(100% - 10px)\"\n       class=\"mt-2\"\n       *ngIf=\"form.value?.type_id === 1\">\n    <mat-form-field fxFlex=\"calc(50% - 10px)\">\n      <mat-label>Start Date</mat-label>\n      <input formControlName=\"start_date\" matInput [matDatepicker]=\"startDatePicker\" (focus)=\"startDatePicker.open()\">\n      <mat-datepicker #startDatePicker></mat-datepicker>\n      <mat-hint>From what time should we allow user access.</mat-hint>\n    </mat-form-field>\n\n    <mat-form-field fxFlex=\"calc(50% - 10px)\">\n      <mat-label>Start Time</mat-label>\n      <input formControlName=\"start_time\" matInput type=\"time\">\n    </mat-form-field>\n  </div>\n\n  <div fxLayout fxLayoutGap=\"10px\" fxFlex=\"calc(100% - 10px)\"\n       class=\"mt-2\"\n       *ngIf=\"form.value?.type_id === 1\">\n    <mat-form-field fxFlex=\"calc(50% - 10px)\">\n      <mat-label>End Date</mat-label>\n      <input formControlName=\"end_date\" matInput [matDatepicker]=\"endDatePicker\" (focus)=\"endDatePicker.open()\">\n      <mat-datepicker #endDatePicker></mat-datepicker>\n      <mat-hint>Up to what time should we allow user access.</mat-hint>\n    </mat-form-field>\n\n    <mat-form-field fxFlex=\"calc(50% - 10px)\">\n      <mat-label>End Time</mat-label>\n      <input formControlName=\"end_time\" matInput type=\"time\">\n    </mat-form-field>\n  </div>\n\n  <techlify-ip-range-selector fxFlex=\"calc(100% - 10px)\"\n                              label=\"IP Address Range (IP & Subnet Field)\"\n                              formControlName=\"ip_range\"\n                              *ngIf=\"form.value?.type_id === 2\"\n                              class=\"mt-2 mb-3\"></techlify-ip-range-selector>\n\n  <div fxLayout fxLayoutGap=\"10px\" fxFlex=\"calc(100% - 10px)\"\n       class=\"mt-2\">\n    <techlify-restrictor-level-selector fxFlex=\"calc(50% - 10px)\"\n                                      formControlName=\"level_id\"></techlify-restrictor-level-selector>\n\n    <mat-form-field fxFlex=\"calc(50% - 10px)\" *ngIf=\"form.value?.level_id\">\n      <mat-label>Object</mat-label>\n      <mat-select *ngIf=\"form.value?.level_id === 1\" formControlName=\"restricted_object_id\">\n        <mat-option [value]=\"2\">Client Admin</mat-option>\n        <mat-option [value]=\"3\">Client User</mat-option>\n      </mat-select>\n      <app-searchable-selector *ngIf=\"form.value?.level_id === 2\"\n                               apiUrl=\"api/roles\"\n                               titleField=\"label\"\n                               formControlName=\"restricted_object_id\"></app-searchable-selector>\n      <app-searchable-selector *ngIf=\"form.value?.level_id === 3\"\n                               apiUrl=\"api/users\"\n                               titleField=\"name\"\n                               formControlName=\"restricted_object_id\"></app-searchable-selector>\n    </mat-form-field>\n  </div>\n\n  <mat-form-field fxFlex=\"calc(100% - 10px)\" class=\"mt-2\">\n    <mat-label>Notes</mat-label>\n    <textarea matInput formControlName=\"notes\"></textarea>\n  </mat-form-field>\n\n  <div fxFlex=\"100%\" fxLayout fxLayoutAlign=\"end\">\n    <button [disabled]=\"isSaving\" type=\"submit\" mat-raised-button color=\"primary\">Save</button>\n    <button [disabled]=\"isSaving\" (click)=\"redirectBack()\" type=\"button\" mat-flat-button>Cancel</button>\n  </div>\n\n</form>\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]  ", exportAs: ["matButton"] }, { 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: RestrictorTypeSelectorComponent, selector: "techlify-restrictor-type-selector", inputs: ["label", "multiple", "showLabel"] }, { kind: "directive", type: i9$1.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: 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: "component", type: i11$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i11$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "directive", type: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.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$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i9$2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: IpRangeSelectorComponent, selector: "techlify-ip-range-selector", inputs: ["label"] }, { kind: "component", type: RestrictorLevelSelectorComponent, selector: "techlify-restrictor-level-selector", inputs: ["label", "multiple", "showLabel"] }, { 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", "panelWidth", "focusSearchOnOpen", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RestrictorsFormComponent, deps: [{ token: i1$5.FormBuilder }, { token: i2$1.Location }, { token: RequestHelperService }, { token: AlertService }, { token: RestrictorService }, { token: i2$1.DatePipe }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: RestrictorsFormComponent, selector: "techlify-restrictors-form", inputs: { restrictor: "restrictor" }, ngImport: i0, template: "<div fxLayout fxLayoutAlign=\"center\" class=\"mb-0\">\n  <h3>Restrictor Form</h3>\n</div>\n\n<form [formGroup]=\"form\"\n      fxLayout=\"row wrap\" fxLayoutAlign=\"start\" fxLayoutGap=\"10px\"\n      (submit)=\"save()\">\n\n  <techlify-restrictor-type-selector formControlName=\"type_id\"\n                                     fxFlex=\"calc(100% - 10px)\"></techlify-restrictor-type-selector>\n\n  <div fxLayout fxLayoutGap=\"10px\" fxFlex=\"calc(100% - 10px)\"\n       class=\"mt-2\"\n       *ngIf=\"form.value?.type_id === 1\">\n    <mat-form-field fxFlex=\"calc(50% - 10px)\">\n      <mat-label>Start Date</mat-label>\n      <input formControlName=\"start_date\" matInput [matDatepicker]=\"startDatePicker\" (focus)=\"startDatePicker.open()\">\n      <mat-datepicker #startDatePicker></mat-datepicker>\n      <mat-hint>From what time should we allow user access.</mat-hint>\n    </mat-form-field>\n\n    <mat-form-field fxFlex=\"calc(50% - 10px)\">\n      <mat-label>Start Time</mat-label>\n      <input formControlName=\"start_time\" matInput type=\"time\">\n    </mat-form-field>\n  </div>\n\n  <div fxLayout fxLayoutGap=\"10px\" fxFlex=\"calc(100% - 10px)\"\n       class=\"mt-2\"\n       *ngIf=\"form.value?.type_id === 1\">\n    <mat-form-field fxFlex=\"calc(50% - 10px)\">\n      <mat-label>End Date</mat-label>\n      <input formControlName=\"end_date\" matInput [matDatepicker]=\"endDatePicker\" (focus)=\"endDatePicker.open()\">\n      <mat-datepicker #endDatePicker></mat-datepicker>\n      <mat-hint>Up to what time should we allow user access.</mat-hint>\n    </mat-form-field>\n\n    <mat-form-field fxFlex=\"calc(50% - 10px)\">\n      <mat-label>End Time</mat-label>\n      <input formControlName=\"end_time\" matInput type=\"time\">\n    </mat-form-field>\n  </div>\n\n  <techlify-ip-range-selector fxFlex=\"calc(100% - 10px)\"\n                              label=\"IP Address Range (IP & Subnet Field)\"\n                              formControlName=\"ip_range\"\n                              *ngIf=\"form.value?.type_id === 2\"\n                              class=\"mt-2 mb-3\"></techlify-ip-range-selector>\n\n  <div fxLayout fxLayoutGap=\"10px\" fxFlex=\"calc(100% - 10px)\"\n       class=\"mt-2\">\n    <techlify-restrictor-level-selector fxFlex=\"calc(50% - 10px)\"\n                                      formControlName=\"level_id\"></techlify-restrictor-level-selector>\n\n    <mat-form-field fxFlex=\"calc(50% - 10px)\" *ngIf=\"form.value?.level_id\">\n      <mat-label>Object</mat-label>\n      <mat-select *ngIf=\"form.value?.level_id === 1\" formControlName=\"restricted_object_id\">\n        <mat-option [value]=\"2\">Client Admin</mat-option>\n        <mat-option [value]=\"3\">Client User</mat-option>\n      </mat-select>\n      <app-searchable-selector *ngIf=\"form.value?.level_id === 2\"\n                               apiUrl=\"api/roles\"\n                               titleField=\"label\"\n                               formControlName=\"restricted_object_id\"></app-searchable-selector>\n      <app-searchable-selector *ngIf=\"form.value?.level_id === 3\"\n                               apiUrl=\"api/users\"\n                               titleField=\"name\"\n                               formControlName=\"restricted_object_id\"></app-searchable-selector>\n    </mat-form-field>\n  </div>\n\n  <mat-form-field fxFlex=\"calc(100% - 10px)\" class=\"mt-2\">\n    <mat-label>Notes</mat-label>\n    <textarea matInput formControlName=\"notes\"></textarea>\n  </mat-form-field>\n\n  <div fxFlex=\"100%\" fxLayout fxLayoutAlign=\"end\">\n    <button [disabled]=\"isSaving\" type=\"submit\" mat-raised-button color=\"primary\">Save</button>\n    <button [disabled]=\"isSaving\" (click)=\"redirectBack()\" type=\"button\" mat-flat-button>Cancel</button>\n  </div>\n\n</form>\n", styles: [""], dependencies: [{ kind: "directive", type: i2$1.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]  ", exportAs: ["matButton"] }, { 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: RestrictorTypeSelectorComponent, selector: "techlify-restrictor-type-selector", inputs: ["label", "multiple", "showLabel"] }, { kind: "directive", type: i9$1.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: 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: "component", type: i11$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i11$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "directive", type: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.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$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i9$2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: IpRangeSelectorComponent, selector: "techlify-ip-range-selector", inputs: ["label"] }, { kind: "component", type: RestrictorLevelSelectorComponent, selector: "techlify-restrictor-level-selector", inputs: ["label", "multiple", "showLabel"] }, { 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", "panelWidth", "focusSearchOnOpen", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RestrictorsFormComponent, decorators: [{
             type: Component,
             args: [{ selector: 'techlify-restrictors-form', template: "<div fxLayout fxLayoutAlign=\"center\" class=\"mb-0\">\n  <h3>Restrictor Form</h3>\n</div>\n\n<form [formGroup]=\"form\"\n      fxLayout=\"row wrap\" fxLayoutAlign=\"start\" fxLayoutGap=\"10px\"\n      (submit)=\"save()\">\n\n  <techlify-restrictor-type-selector formControlName=\"type_id\"\n                                     fxFlex=\"calc(100% - 10px)\"></techlify-restrictor-type-selector>\n\n  <div fxLayout fxLayoutGap=\"10px\" fxFlex=\"calc(100% - 10px)\"\n       class=\"mt-2\"\n       *ngIf=\"form.value?.type_id === 1\">\n    <mat-form-field fxFlex=\"calc(50% - 10px)\">\n      <mat-label>Start Date</mat-label>\n      <input formControlName=\"start_date\" matInput [matDatepicker]=\"startDatePicker\" (focus)=\"startDatePicker.open()\">\n      <mat-datepicker #startDatePicker></mat-datepicker>\n      <mat-hint>From what time should we allow user access.</mat-hint>\n    </mat-form-field>\n\n    <mat-form-field fxFlex=\"calc(50% - 10px)\">\n      <mat-label>Start Time</mat-label>\n      <input formControlName=\"start_time\" matInput type=\"time\">\n    </mat-form-field>\n  </div>\n\n  <div fxLayout fxLayoutGap=\"10px\" fxFlex=\"calc(100% - 10px)\"\n       class=\"mt-2\"\n       *ngIf=\"form.value?.type_id === 1\">\n    <mat-form-field fxFlex=\"calc(50% - 10px)\">\n      <mat-label>End Date</mat-label>\n      <input formControlName=\"end_date\" matInput [matDatepicker]=\"endDatePicker\" (focus)=\"endDatePicker.open()\">\n      <mat-datepicker #endDatePicker></mat-datepicker>\n      <mat-hint>Up to what time should we allow user access.</mat-hint>\n    </mat-form-field>\n\n    <mat-form-field fxFlex=\"calc(50% - 10px)\">\n      <mat-label>End Time</mat-label>\n      <input formControlName=\"end_time\" matInput type=\"time\">\n    </mat-form-field>\n  </div>\n\n  <techlify-ip-range-selector fxFlex=\"calc(100% - 10px)\"\n                              label=\"IP Address Range (IP & Subnet Field)\"\n                              formControlName=\"ip_range\"\n                              *ngIf=\"form.value?.type_id === 2\"\n                              class=\"mt-2 mb-3\"></techlify-ip-range-selector>\n\n  <div fxLayout fxLayoutGap=\"10px\" fxFlex=\"calc(100% - 10px)\"\n       class=\"mt-2\">\n    <techlify-restrictor-level-selector fxFlex=\"calc(50% - 10px)\"\n                                      formControlName=\"level_id\"></techlify-restrictor-level-selector>\n\n    <mat-form-field fxFlex=\"calc(50% - 10px)\" *ngIf=\"form.value?.level_id\">\n      <mat-label>Object</mat-label>\n      <mat-select *ngIf=\"form.value?.level_id === 1\" formControlName=\"restricted_object_id\">\n        <mat-option [value]=\"2\">Client Admin</mat-option>\n        <mat-option [value]=\"3\">Client User</mat-option>\n      </mat-select>\n      <app-searchable-selector *ngIf=\"form.value?.level_id === 2\"\n                               apiUrl=\"api/roles\"\n                               titleField=\"label\"\n                               formControlName=\"restricted_object_id\"></app-searchable-selector>\n      <app-searchable-selector *ngIf=\"form.value?.level_id === 3\"\n                               apiUrl=\"api/users\"\n                               titleField=\"name\"\n                               formControlName=\"restricted_object_id\"></app-searchable-selector>\n    </mat-form-field>\n  </div>\n\n  <mat-form-field fxFlex=\"calc(100% - 10px)\" class=\"mt-2\">\n    <mat-label>Notes</mat-label>\n    <textarea matInput formControlName=\"notes\"></textarea>\n  </mat-form-field>\n\n  <div fxFlex=\"100%\" fxLayout fxLayoutAlign=\"end\">\n    <button [disabled]=\"isSaving\" type=\"submit\" mat-raised-button color=\"primary\">Save</button>\n    <button [disabled]=\"isSaving\" (click)=\"redirectBack()\" type=\"button\" mat-flat-button>Cancel</button>\n  </div>\n\n</form>\n" }]
-        }], ctorParameters: () => [{ type: i1$5.FormBuilder }, { type: i3.Location }, { type: RequestHelperService }, { type: AlertService }, { type: RestrictorService }, { type: i3.DatePipe }], propDecorators: { restrictor: [{
+        }], ctorParameters: () => [{ type: i1$5.FormBuilder }, { type: i2$1.Location }, { type: RequestHelperService }, { type: AlertService }, { type: RestrictorService }, { type: i2$1.DatePipe }], propDecorators: { restrictor: [{
                 type: Input
             }] } });
 
@@ -12367,7 +12367,7 @@ class RestrictorsFormPageComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RestrictorsFormPageComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: RestrictorService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i5.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 { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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: i2$1.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: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i5.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: "18.2.13", ngImport: i0, type: RestrictorsFormPageComponent, decorators: [{
             type: Component,
@@ -12666,7 +12666,7 @@ class TechlifyCompanySwitcherComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TechlifyCompanySwitcherComponent, deps: [{ token: HttpService }, { token: CredentialsService }, { token: AlertService }, { token: CurrentUserService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TechlifyCompanySwitcherComponent, selector: "app-techlify-company-switcher", ngImport: i0, template: "<div\n  mat-menu-item\n  [matMenuTriggerFor]=\"menu\"\n>\n  {{ user.client?.name }}\n</div>\n<mat-menu #menu=\"matMenu\">\n  <ng-container *ngFor=\"let userClient of userClients\">\n    <button\n      *ngIf=\"userClient?.client\"\n      mat-menu-item\n      (click)=\"switchClient(userClient)\"\n      [disabled]=\"!userClient.is_enabled || userClient.client?.status_id == 3\"\n    >\n      <div class=\"d-flex justify-content-start align-items-center gap-2\">\n      <span>\n        {{ userClient?.client?.name }}\n      </span>\n        <span *ngIf=\"userClient?.client_id === user.client_id\" class=\"active-company\"></span>\n        <span *ngIf=\"!userClient.is_enabled\">(disabled)</span>\n        <span *ngIf=\"userClient.client?.status_id == 3\">(Inactive)</span>\n      </div>\n    </button>\n  </ng-container>\n</mat-menu>\n", styles: [".active-company{width:10px;height:10px;background-color:#00ce00;border-radius:50%}\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: i8$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i8$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i8$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TechlifyCompanySwitcherComponent, selector: "app-techlify-company-switcher", ngImport: i0, template: "<div\n  mat-menu-item\n  [matMenuTriggerFor]=\"menu\"\n>\n  {{ user.client?.name }}\n</div>\n<mat-menu #menu=\"matMenu\">\n  <ng-container *ngFor=\"let userClient of userClients\">\n    <button\n      *ngIf=\"userClient?.client\"\n      mat-menu-item\n      (click)=\"switchClient(userClient)\"\n      [disabled]=\"!userClient.is_enabled || userClient.client?.status_id == 3\"\n    >\n      <div class=\"d-flex justify-content-start align-items-center gap-2\">\n      <span>\n        {{ userClient?.client?.name }}\n      </span>\n        <span *ngIf=\"userClient?.client_id === user.client_id\" class=\"active-company\"></span>\n        <span *ngIf=\"!userClient.is_enabled\">(disabled)</span>\n        <span *ngIf=\"userClient.client?.status_id == 3\">(Inactive)</span>\n      </div>\n    </button>\n  </ng-container>\n</mat-menu>\n", styles: [".active-company{width:10px;height:10px;background-color:#00ce00;border-radius:50%}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i8$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i8$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i8$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TechlifyCompanySwitcherComponent, decorators: [{
             type: Component,
@@ -12763,7 +12763,7 @@ class FileDragdropUploaderComponent {
                 multi: true,
                 useExisting: FileDragdropUploaderComponent
             }
-        ], ngImport: i0, template: "<div class=\"w-100\">\n  <p *ngIf=\"label\"\n     class=\"mb-1 text-dark\">{{ label }}\n  <div class=\"mb-2\" fxLayout=\"column\" fxLayoutGap=\"5px\"\n       *ngIf=\"fileList && fileList.length > 0\">\n    <div *ngFor=\"let file of fileList; let i = index;\"\n         fxLayout fxLayoutAlign=\"start\" fxLayoutGap=\"5px\">\n      <img *ngIf=\"file?.is_image\" class=\"img-preview\" [src]=\"file?.url\" alt=\"\">\n      <div *ngIf=\"!file?.is_image\">\n        <mat-icon class=\"icon-preview text-secondary\">file_present</mat-icon>\n      </div>\n      <div>\n        <small class=\"mb-0\" *ngIf=\"file?.name\">{{ file?.name }}</small> <br>\n        <button mat-stroked-button color=\"warn\"\n                class=\"btn-sm\"\n                (click)=\"fileList.splice(i, 1)\">Remove</button>\n      </div>\n    </div>\n  </div>\n  <app-file-dropper *ngIf=\"!fileDropperConfig?.multiple && fileList?.length <= 0\"\n                    class=\"w-100\"\n                    [config]=\"fileDropperConfig\"\n                    (fileChanged)=\"onFileChanged($event)\"></app-file-dropper>\n</div>\n", styles: [":host ::ng-deep .img-preview{min-width:50px;max-width:50px;max-height:50px;min-height:50px}:host ::ng-deep .icon-preview{font-size:40px;height:40px;width:40px}\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: FileDropperComponent, selector: "app-file-dropper", inputs: ["fileArray", "config", "styles"], outputs: ["fileChanged"] }, { 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: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }] }); }
+        ], ngImport: i0, template: "<div class=\"w-100\">\n  <p *ngIf=\"label\"\n     class=\"mb-1 text-dark\">{{ label }}\n  <div class=\"mb-2\" fxLayout=\"column\" fxLayoutGap=\"5px\"\n       *ngIf=\"fileList && fileList.length > 0\">\n    <div *ngFor=\"let file of fileList; let i = index;\"\n         fxLayout fxLayoutAlign=\"start\" fxLayoutGap=\"5px\">\n      <img *ngIf=\"file?.is_image\" class=\"img-preview\" [src]=\"file?.url\" alt=\"\">\n      <div *ngIf=\"!file?.is_image\">\n        <mat-icon class=\"icon-preview text-secondary\">file_present</mat-icon>\n      </div>\n      <div>\n        <small class=\"mb-0\" *ngIf=\"file?.name\">{{ file?.name }}</small> <br>\n        <button mat-stroked-button color=\"warn\"\n                class=\"btn-sm\"\n                (click)=\"fileList.splice(i, 1)\">Remove</button>\n      </div>\n    </div>\n  </div>\n  <app-file-dropper *ngIf=\"!fileDropperConfig?.multiple && fileList?.length <= 0\"\n                    class=\"w-100\"\n                    [config]=\"fileDropperConfig\"\n                    (fileChanged)=\"onFileChanged($event)\"></app-file-dropper>\n</div>\n", styles: [":host ::ng-deep .img-preview{min-width:50px;max-width:50px;max-height:50px;min-height:50px}:host ::ng-deep .icon-preview{font-size:40px;height:40px;width:40px}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FileDropperComponent, selector: "app-file-dropper", inputs: ["fileArray", "config", "styles"], outputs: ["fileChanged"] }, { 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: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FileDragdropUploaderComponent, decorators: [{
             type: Component,
@@ -12884,7 +12884,7 @@ class NumberInputButtonComponent {
                 multi: true,
                 useExisting: NumberInputButtonComponent
             }
-        ], viewQueries: [{ propertyName: "customInput", first: true, predicate: ["customInput"], descendants: true }], ngImport: i0, template: "<span *ngIf=\"showLabel\" class=\"mr-1\">{{ label }}</span> <br *ngIf=\"showLabel\">\n<mat-button-toggle-group [hideSingleSelectionIndicator]=\"true\" [hideMultipleSelectionIndicator]=\"true\"\n  [formControl]=\"selectedOption\">\n  <mat-button-toggle [matTooltip]=\"option?.hint || ''\" *ngFor=\"let option of options\" [value]=\"option?.value\">\n    <span *ngIf=\"option.type =='text'\">{{ option?.title }}</span>\n    <mat-icon class=\"small-icon\" *ngIf=\"option.type == 'icon'\">{{option?.title}}</mat-icon>\n  </mat-button-toggle>\n</mat-button-toggle-group>\n<mat-form-field class=\"mt-1 w-100\" *ngIf=\"showCustomInput\">\n  <mat-label>{{ label }}</mat-label>\n  <input type=\"number\" min=\"0\" #customInput matInput [formControl]=\"customValue\">\n</mat-form-field>", styles: [":host ::ng-deep .mat-button-toggle-appearance-standard .mat-button-toggle-label-content{line-height:30px;padding:0 12px;font-size:12px}:host ::ng-deep .mat-button-toggle-checked{color:#fff!important}:host ::ng-deep .small-icon{height:18px;width:18px;font-size:18px}\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$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$1.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: i5$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i3$2.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i3$2.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "directive", type: i1$5.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$5.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
+        ], viewQueries: [{ propertyName: "customInput", first: true, predicate: ["customInput"], descendants: true }], ngImport: i0, template: "<span *ngIf=\"showLabel\" class=\"mr-1\">{{ label }}</span> <br *ngIf=\"showLabel\">\n<mat-button-toggle-group [hideSingleSelectionIndicator]=\"true\" [hideMultipleSelectionIndicator]=\"true\"\n  [formControl]=\"selectedOption\">\n  <mat-button-toggle [matTooltip]=\"option?.hint || ''\" *ngFor=\"let option of options\" [value]=\"option?.value\">\n    <span *ngIf=\"option.type =='text'\">{{ option?.title }}</span>\n    <mat-icon class=\"small-icon\" *ngIf=\"option.type == 'icon'\">{{option?.title}}</mat-icon>\n  </mat-button-toggle>\n</mat-button-toggle-group>\n<mat-form-field class=\"mt-1 w-100\" *ngIf=\"showCustomInput\">\n  <mat-label>{{ label }}</mat-label>\n  <input type=\"number\" min=\"0\" #customInput matInput [formControl]=\"customValue\">\n</mat-form-field>", styles: [":host ::ng-deep .mat-button-toggle-appearance-standard .mat-button-toggle-label-content{line-height:30px;padding:0 12px;font-size:12px}:host ::ng-deep .mat-button-toggle-checked{color:#fff!important}:host ::ng-deep .small-icon{height:18px;width:18px;font-size:18px}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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$1.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: i5$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i3$1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i3$1.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "directive", type: i1$5.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$5.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NumberInputButtonComponent, decorators: [{
             type: Component,
@@ -13010,7 +13010,7 @@ class ColumnSelectorComponent {
         this.displayedColumnsChange.emit(finalColumns.map(c => c.def));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ColumnSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ColumnSelectorComponent, selector: "app-column-selector", inputs: { label: "label", mode: "mode", columnConfigs: "columnConfigs", selectedColumns: "selectedColumns", isExportWorking: "isExportWorking" }, outputs: { selectedColumnsChange: "selectedColumnsChange", displayedColumnsChange: "displayedColumnsChange" }, ngImport: i0, template: "<mat-form-field *ngIf=\"mode === 'selector'\">\n  <mat-label>{{ label }}</mat-label>\n  <mat-select [multiple]=\"true\" [formControl]=\"columnSelector\">\n    <mat-option class=\"text-capitalize\" *ngFor=\"let col of sortedColumns\" [value]=\"col.def\"\n      [disabled]=\"!(col?.isEditable ?? true)\">\n      {{ col.label }}\n    </mat-option>\n  </mat-select>\n</mat-form-field>\n\n<div *ngIf=\"mode === 'icon'\" fxLayoutAlign=\"start center\">\n  <mat-icon class=\"clickable\" (click)=\"select.open()\">view_column</mat-icon>\n  <mat-select class=\"column-selector fl-sm\" #select [formControl]=\"columnSelector\" multiple panelWidth=\"\">\n    <mat-form-field class=\"p-1 w-100\">\n      <input matInput [formControl]=\"search\" placeholder=\"Search\" (keydown)=\"$event.stopPropagation();\"\n        autocomplete=\"off\">\n      <button mat-icon-button matSuffix type=\"button\" *ngIf=\"search.value\" (click)=\"search.setValue('')\">\n        <mat-icon>clear</mat-icon>\n      </button>\n    </mat-form-field>\n    <mat-option *ngFor=\"let column of sortedColumns\" [value]=\"column.def\" class=\"text-capitalize\"\n      [disabled]=\"!(column?.isEditable ?? true)\">{{column?.label}}</mat-option>\n  </mat-select>\n</div>", styles: [".column-selector{opacity:0;position:relative;right:24px;height:0!important;width:0!important}\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$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: i6$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i9$2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i1$5.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$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i9$1.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: i6.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { 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 { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ColumnSelectorComponent, selector: "app-column-selector", inputs: { label: "label", mode: "mode", columnConfigs: "columnConfigs", selectedColumns: "selectedColumns", isExportWorking: "isExportWorking" }, outputs: { selectedColumnsChange: "selectedColumnsChange", displayedColumnsChange: "displayedColumnsChange" }, ngImport: i0, template: "<mat-form-field *ngIf=\"mode === 'selector'\">\n  <mat-label>{{ label }}</mat-label>\n  <mat-select [multiple]=\"true\" [formControl]=\"columnSelector\">\n    <mat-option class=\"text-capitalize\" *ngFor=\"let col of sortedColumns\" [value]=\"col.def\"\n      [disabled]=\"!(col?.isEditable ?? true)\">\n      {{ col.label }}\n    </mat-option>\n  </mat-select>\n</mat-form-field>\n\n<div *ngIf=\"mode === 'icon'\" fxLayoutAlign=\"start center\">\n  <mat-icon class=\"clickable\" (click)=\"select.open()\">view_column</mat-icon>\n  <mat-select class=\"column-selector fl-sm\" #select [formControl]=\"columnSelector\" multiple panelWidth=\"\">\n    <mat-form-field class=\"p-1 w-100\">\n      <input matInput [formControl]=\"search\" placeholder=\"Search\" (keydown)=\"$event.stopPropagation();\"\n        autocomplete=\"off\">\n      <button mat-icon-button matSuffix type=\"button\" *ngIf=\"search.value\" (click)=\"search.setValue('')\">\n        <mat-icon>clear</mat-icon>\n      </button>\n    </mat-form-field>\n    <mat-option *ngFor=\"let column of sortedColumns\" [value]=\"column.def\" class=\"text-capitalize\"\n      [disabled]=\"!(column?.isEditable ?? true)\">{{column?.label}}</mat-option>\n  </mat-select>\n</div>", styles: [".column-selector{opacity:0;position:relative;right:24px;height:0!important;width:0!important}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: i6$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i9$2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i1$5.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$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i9$1.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: i6.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ColumnSelectorComponent, decorators: [{
             type: Component,
@@ -13176,7 +13176,7 @@ class ResetPasswordComponent extends TechlifyFormComponentInterface {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ResetPasswordComponent, deps: [{ token: ResetPasswordService }, { token: AlertService }, { token: i1$1.Router }, { token: CurrentUserService }, { token: i1$5.UntypedFormBuilder }, { token: FormValidatorService }, { token: UserConfigService }, { token: i1$1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ResetPasswordComponent, selector: "app-reset-password", usesInheritance: true, 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 mt-4\">Reset Password</h4>\n\n            <form [formGroup]=\"form\" (ngSubmit)=\"submit()\" class=\"mt-4\">\n\n                <div class=\"form-group row\">\n                    <mat-form-field class=\"offset-2 col-8\">\n                        <mat-label>Email</mat-label>\n                        <input matInput formControlName=\"email\" placeholder=\"Email\" type=\"email\" autocomplete=\"off\"\n                            required readonly />\n                        <mat-error *ngIf=\"isFieldValid('email')\">{{getErrorMessage('email')}}</mat-error>\n                    </mat-form-field>\n                    <mat-form-field class=\"offset-2 col-8\">\n                        <mat-label>OTP</mat-label>\n                        <input matInput formControlName=\"otp\" placeholder=\"OTP\" type=\"string\" autocomplete=\"off\"\n                            required />\n                        <mat-error *ngIf=\"isFieldValid('otp')\">{{getErrorMessage('otp')}}</mat-error>\n                    </mat-form-field>\n                    <mat-form-field class=\"offset-2 col-8\">\n                        <mat-label>New Password</mat-label>\n                        <input matInput formControlName=\"password\" placeholder=\"New Password\"\n                            [type]=\"passwordHide ? 'password' : 'text'\" autocomplete=\"off\" 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 class=\"offset-2 col-8 mt-3\">\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\"\n                            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                </div>\n\n                <div class=\"mt-4 row\">\n                    <techlify-password-requirement-check class=\"offset-2 col-8\" [password]=\"form.get('password').value\"\n                        [email]=\"form.get('email').value\"></techlify-password-requirement-check>\n                </div>\n\n                <div class=\"row mt-4\">\n                    <div class=\"offset-2 col-8 text-center\">\n                        <button mat-raised-button color=\"primary\" class=\"w-100\" type=\"submit\" [disabled]=\"isWorking\">\n                            Submit\n                        </button>\n                    </div>\n                </div>\n            </form>\n        </div>\n    </div>\n</div>", styles: ["#login-form-wrapper{margin-top:100px}#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}: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$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.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$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i9$1.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: 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: i7$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.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]  ", exportAs: ["matButton"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: PasswordRequirementCheckComponent, selector: "techlify-password-requirement-check", inputs: ["password", "email"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ResetPasswordComponent, selector: "app-reset-password", usesInheritance: true, 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 mt-4\">Reset Password</h4>\n\n            <form [formGroup]=\"form\" (ngSubmit)=\"submit()\" class=\"mt-4\">\n\n                <div class=\"form-group row\">\n                    <mat-form-field class=\"offset-2 col-8\">\n                        <mat-label>Email</mat-label>\n                        <input matInput formControlName=\"email\" placeholder=\"Email\" type=\"email\" autocomplete=\"off\"\n                            required readonly />\n                        <mat-error *ngIf=\"isFieldValid('email')\">{{getErrorMessage('email')}}</mat-error>\n                    </mat-form-field>\n                    <mat-form-field class=\"offset-2 col-8\">\n                        <mat-label>OTP</mat-label>\n                        <input matInput formControlName=\"otp\" placeholder=\"OTP\" type=\"string\" autocomplete=\"off\"\n                            required />\n                        <mat-error *ngIf=\"isFieldValid('otp')\">{{getErrorMessage('otp')}}</mat-error>\n                    </mat-form-field>\n                    <mat-form-field class=\"offset-2 col-8\">\n                        <mat-label>New Password</mat-label>\n                        <input matInput formControlName=\"password\" placeholder=\"New Password\"\n                            [type]=\"passwordHide ? 'password' : 'text'\" autocomplete=\"off\" 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 class=\"offset-2 col-8 mt-3\">\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\"\n                            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                </div>\n\n                <div class=\"mt-4 row\">\n                    <techlify-password-requirement-check class=\"offset-2 col-8\" [password]=\"form.get('password').value\"\n                        [email]=\"form.get('email').value\"></techlify-password-requirement-check>\n                </div>\n\n                <div class=\"row mt-4\">\n                    <div class=\"offset-2 col-8 text-center\">\n                        <button mat-raised-button color=\"primary\" class=\"w-100\" type=\"submit\" [disabled]=\"isWorking\">\n                            Submit\n                        </button>\n                    </div>\n                </div>\n            </form>\n        </div>\n    </div>\n</div>", styles: ["#login-form-wrapper{margin-top:100px}#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}:host{width:100%}.white-box{background-color:#fff;padding:10px}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.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$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i9$1.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: 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: i7$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.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]  ", exportAs: ["matButton"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: PasswordRequirementCheckComponent, selector: "techlify-password-requirement-check", inputs: ["password", "email"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ResetPasswordComponent, decorators: [{
             type: Component,
@@ -13390,7 +13390,7 @@ class CompanyInformationComponent extends TechlifyFormComponentInterface {
             this.location.back();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CompanyInformationComponent, deps: [{ token: FormValidatorService }, { token: i1$5.FormBuilder }, { token: CurrentUserService }, { token: ClientService }, { token: AlertService }, { token: i3.Location }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CompanyInformationComponent, deps: [{ token: FormValidatorService }, { token: i1$5.FormBuilder }, { token: CurrentUserService }, { token: ClientService }, { token: AlertService }, { token: i2$1.Location }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CompanyInformationComponent, isStandalone: true, selector: "app-company-information", inputs: { client: "client", isAppAdmin: "isAppAdmin" }, outputs: { saved: "saved", cancelled: "cancelled" }, usesInheritance: true, ngImport: i0, template: "<div class=\"d-flex justify-content-center align-items-center\" *ngIf=\"!isAppAdmin\">\n  <mat-card style=\"width: 50%\">\n    <mat-card-content>\n      <mat-card-title>Company Information</mat-card-title>\n    </mat-card-content>\n    <mat-card-content class=\"mt-3\">\n      <ng-container >\n        <ng-container *ngTemplateOutlet=\"tenantForm\"></ng-container>\n      </ng-container>\n    </mat-card-content>\n  </mat-card>\n</div>\n\n<ng-container *ngIf=\"isAppAdmin\">\n  <ng-container *ngTemplateOutlet=\"tenantForm\"></ng-container>\n</ng-container>\n\n<ng-template #tenantForm>\n  <h4 class=\"fw-bold\">{{ client?.id ? 'Edit' : 'Create' }} Tenant</h4>\n  <form [formGroup]=\"form\" class=\"d-flex flex-wrap justify-content-start align-items-center gap-2\" (submit)=\"save()\">\n    <mat-form-field style=\"width: calc(100%)\">\n      <mat-label>Name</mat-label>\n      <input matInput formControlName=\"name\">\n      <mat-error *ngIf=\"isFieldValid('name')\">\n        {{ getErrorMessage('name') }}\n      </mat-error>\n    </mat-form-field>\n\n    <mat-form-field style=\"width: calc(50% - 0.5rem)\">\n      <mat-label>Email</mat-label>\n      <input matInput formControlName=\"email\">\n    </mat-form-field>\n\n    <mat-form-field style=\"width: calc(50%)\">\n      <mat-label>Phone</mat-label>\n      <input matInput formControlName=\"phone\">\n    </mat-form-field>\n\n    <mat-form-field style=\"width: calc(100%)\">\n      <mat-label>Address</mat-label>\n      <textarea matInput formControlName=\"address\" rows=\"3\"></textarea>\n    </mat-form-field>\n\n    <mat-form-field style=\"width: calc(100%)\">\n      <mat-label>TIN</mat-label>\n      <input matInput formControlName=\"tin\">\n    </mat-form-field>\n\n    <div style=\"width: calc(50% - 0.5rem)\">\n      <p>Logo</p>\n      <app-file-upload-button\n        *ngIf=\"!form?.value?.logo\"\n        [config]=\"{ fileId: 'client-logo-' + this.form.value?.id, accept: 'image/*'}\"\n        (uploaded)=\"onFileUploaded($event, 'logo')\"\n      ></app-file-upload-button>\n      <app-image-preview\n        *ngIf=\"form.value?.logo\"\n        [path]=\"form.value?.logo\"\n        (removed)=\"form.get('logo')?.setValue('')\"\n      ></app-image-preview>\n    </div>\n\n    <div style=\"width: calc(50% - 0.5rem)\">\n      <p>Letterhead Image</p>\n      <app-file-upload-button\n        *ngIf=\"!form.value?.letterhead_image\"\n        [config]=\"{ fileId: 'client-letterhead-' + this.form.value?.id, accept: 'image/*'}\"\n        (uploaded)=\"onFileUploaded($event, 'letterhead_image')\"\n      ></app-file-upload-button>\n      <app-image-preview\n        *ngIf=\"form.value?.letterhead_image\"\n        [path]=\"form.value?.letterhead_image\"\n        (removed)=\"form.get('letterhead_image')?.setValue('')\"\n      ></app-image-preview>\n    </div>\n\n    <div style=\"width: calc(100%)\" class=\"d-flex justify-content-end align-items-center gap-3\">\n      <button [disabled]=\"isWorking\" mat-raised-button color=\"primary\" type=\"submit\">\n        Save\n      </button>\n      <button [disabled]=\"isWorking\" mat-flat-button type=\"button\" (click)=\"redirectBack()\">\n        Cancel\n      </button>\n    </div>\n  </form>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: MatCardContent, selector: "mat-card-content" }, { kind: "component", type: MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: 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: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.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$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: FileUploadButtonComponent, selector: "app-file-upload-button", inputs: ["config"], outputs: ["uploaded"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: ImagePreviewComponent, selector: "app-image-preview", inputs: ["path", "height"], outputs: ["removed"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CompanyInformationComponent, decorators: [{
@@ -13410,7 +13410,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         ImagePreviewComponent,
                         NgTemplateOutlet,
                     ], template: "<div class=\"d-flex justify-content-center align-items-center\" *ngIf=\"!isAppAdmin\">\n  <mat-card style=\"width: 50%\">\n    <mat-card-content>\n      <mat-card-title>Company Information</mat-card-title>\n    </mat-card-content>\n    <mat-card-content class=\"mt-3\">\n      <ng-container >\n        <ng-container *ngTemplateOutlet=\"tenantForm\"></ng-container>\n      </ng-container>\n    </mat-card-content>\n  </mat-card>\n</div>\n\n<ng-container *ngIf=\"isAppAdmin\">\n  <ng-container *ngTemplateOutlet=\"tenantForm\"></ng-container>\n</ng-container>\n\n<ng-template #tenantForm>\n  <h4 class=\"fw-bold\">{{ client?.id ? 'Edit' : 'Create' }} Tenant</h4>\n  <form [formGroup]=\"form\" class=\"d-flex flex-wrap justify-content-start align-items-center gap-2\" (submit)=\"save()\">\n    <mat-form-field style=\"width: calc(100%)\">\n      <mat-label>Name</mat-label>\n      <input matInput formControlName=\"name\">\n      <mat-error *ngIf=\"isFieldValid('name')\">\n        {{ getErrorMessage('name') }}\n      </mat-error>\n    </mat-form-field>\n\n    <mat-form-field style=\"width: calc(50% - 0.5rem)\">\n      <mat-label>Email</mat-label>\n      <input matInput formControlName=\"email\">\n    </mat-form-field>\n\n    <mat-form-field style=\"width: calc(50%)\">\n      <mat-label>Phone</mat-label>\n      <input matInput formControlName=\"phone\">\n    </mat-form-field>\n\n    <mat-form-field style=\"width: calc(100%)\">\n      <mat-label>Address</mat-label>\n      <textarea matInput formControlName=\"address\" rows=\"3\"></textarea>\n    </mat-form-field>\n\n    <mat-form-field style=\"width: calc(100%)\">\n      <mat-label>TIN</mat-label>\n      <input matInput formControlName=\"tin\">\n    </mat-form-field>\n\n    <div style=\"width: calc(50% - 0.5rem)\">\n      <p>Logo</p>\n      <app-file-upload-button\n        *ngIf=\"!form?.value?.logo\"\n        [config]=\"{ fileId: 'client-logo-' + this.form.value?.id, accept: 'image/*'}\"\n        (uploaded)=\"onFileUploaded($event, 'logo')\"\n      ></app-file-upload-button>\n      <app-image-preview\n        *ngIf=\"form.value?.logo\"\n        [path]=\"form.value?.logo\"\n        (removed)=\"form.get('logo')?.setValue('')\"\n      ></app-image-preview>\n    </div>\n\n    <div style=\"width: calc(50% - 0.5rem)\">\n      <p>Letterhead Image</p>\n      <app-file-upload-button\n        *ngIf=\"!form.value?.letterhead_image\"\n        [config]=\"{ fileId: 'client-letterhead-' + this.form.value?.id, accept: 'image/*'}\"\n        (uploaded)=\"onFileUploaded($event, 'letterhead_image')\"\n      ></app-file-upload-button>\n      <app-image-preview\n        *ngIf=\"form.value?.letterhead_image\"\n        [path]=\"form.value?.letterhead_image\"\n        (removed)=\"form.get('letterhead_image')?.setValue('')\"\n      ></app-image-preview>\n    </div>\n\n    <div style=\"width: calc(100%)\" class=\"d-flex justify-content-end align-items-center gap-3\">\n      <button [disabled]=\"isWorking\" mat-raised-button color=\"primary\" type=\"submit\">\n        Save\n      </button>\n      <button [disabled]=\"isWorking\" mat-flat-button type=\"button\" (click)=\"redirectBack()\">\n        Cancel\n      </button>\n    </div>\n  </form>\n</ng-template>\n" }]
-        }], ctorParameters: () => [{ type: FormValidatorService }, { type: i1$5.FormBuilder }, { type: CurrentUserService }, { type: ClientService }, { type: AlertService }, { type: i3.Location }], propDecorators: { client: [{
+        }], ctorParameters: () => [{ type: FormValidatorService }, { type: i1$5.FormBuilder }, { type: CurrentUserService }, { type: ClientService }, { type: AlertService }, { type: i2$1.Location }], propDecorators: { client: [{
                 type: Input
             }], isAppAdmin: [{
                 type: Input
@@ -13612,7 +13612,7 @@ class UserMenuComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserMenuComponent, deps: [{ token: i1$1.Router }, { token: ErrorHandlerService }, { token: AlertService }, { token: CredentialsService }, { token: AuthenticationService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: UserMenuComponent, selector: "app-user-menu", ngImport: i0, template: "<button\n  mat-button\n  [matMenuTriggerFor]=\"userMenu\"\n  type=\"button\"\n  color=\"primary\"\n  class=\"p-1 font-xs w-100\"\n>\n  <div class=\"d-flex align-items-center gap-1\">\n    <span class=\"material-symbols-outlined\"> account_circle </span>\n    <span class=\"font-weight-normal font-md\">\n      {{ username }}\n    </span>\n    <span class=\"material-symbols-outlined\"> arrow_drop_down </span>\n  </div>\n</button>\n\n<mat-menu #userMenu=\"matMenu\">\n  <app-techlify-company-switcher *ngIf=\"user.user_type_id != 1\"></app-techlify-company-switcher>\n  <button mat-menu-item type=\"button\" [routerLink]=\"['/change-password']\">\n    <mat-icon>vpn_key</mat-icon>\n    Change Password\n  </button>\n  <button mat-menu-item (click)=\"logout()\" type=\"button\">\n    <mat-icon>login</mat-icon>\n    Logout\n  </button>\n</mat-menu>\n", 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]  ", exportAs: ["matButton"] }, { kind: "component", type: i8$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i8$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i8$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: TechlifyCompanySwitcherComponent, selector: "app-techlify-company-switcher" }, { kind: "component", type: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: UserMenuComponent, selector: "app-user-menu", ngImport: i0, template: "<button\n  mat-button\n  [matMenuTriggerFor]=\"userMenu\"\n  type=\"button\"\n  color=\"primary\"\n  class=\"p-1 font-xs w-100\"\n>\n  <div class=\"d-flex align-items-center gap-1\">\n    <span class=\"material-symbols-outlined\"> account_circle </span>\n    <span class=\"font-weight-normal font-md\">\n      {{ username }}\n    </span>\n    <span class=\"material-symbols-outlined\"> arrow_drop_down </span>\n  </div>\n</button>\n\n<mat-menu #userMenu=\"matMenu\">\n  <app-techlify-company-switcher *ngIf=\"user.user_type_id != 1\"></app-techlify-company-switcher>\n  <button mat-menu-item type=\"button\" [routerLink]=\"['/change-password']\">\n    <mat-icon>vpn_key</mat-icon>\n    Change Password\n  </button>\n  <button mat-menu-item (click)=\"logout()\" type=\"button\">\n    <mat-icon>login</mat-icon>\n    Logout\n  </button>\n</mat-menu>\n", dependencies: [{ kind: "directive", type: i2$1.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]  ", exportAs: ["matButton"] }, { kind: "component", type: i8$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i8$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i8$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: TechlifyCompanySwitcherComponent, selector: "app-techlify-company-switcher" }, { kind: "component", type: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserMenuComponent, decorators: [{
             type: Component,
@@ -13680,7 +13680,7 @@ class AppAdminUserViewComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AppAdminUserViewComponent, deps: [{ token: UserService }, { token: i1$1.ActivatedRoute }, { token: ConfigService }, { token: HttpService }, { token: i1.MatDialog }, { token: CurrentUserService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AppAdminUserViewComponent, selector: "app-admin-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\">\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>", styles: [""], 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]  ", exportAs: ["matButton"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i9$4.MatTabContent, selector: "[matTabContent]" }, { kind: "component", type: i9$4.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i9$4.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { 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", "scrollContainer"] }, { kind: "component", type: UserClientsListComponent, selector: "app-user-clients-list", inputs: ["user"] }, { kind: "component", type: UserSessionsComponent, selector: "app-user-sessions", inputs: ["user"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AppAdminUserViewComponent, selector: "app-admin-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\">\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>", styles: [""], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.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]  ", exportAs: ["matButton"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i9$4.MatTabContent, selector: "[matTabContent]" }, { kind: "component", type: i9$4.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i9$4.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { 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", "scrollContainer"] }, { 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: "18.2.13", ngImport: i0, type: AppAdminUserViewComponent, decorators: [{
             type: Component,
@@ -13840,7 +13840,7 @@ class TechlifyAppSelectorComponent {
         window.open(this.appConfiguration['prod'][app], '_blank').focus();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TechlifyAppSelectorComponent, deps: [{ token: EnvironmentService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TechlifyAppSelectorComponent, selector: "app-techlify-app-selector", inputs: { imageHeight: "imageHeight", imageWidth: "imageWidth" }, ngImport: i0, template: "<button mat-icon-button (click)=\"isOpen = !isOpen\" type=\"button\" cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\">\n    <mat-icon>apps</mat-icon>\n</button>\n\n<ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]=\"trigger\" [cdkConnectedOverlayOpen]=\"isOpen\"\n    (overlayOutsideClick)=\"isOpen = false\">\n    <mat-card>\n        <mat-card-content fxLayout=\"column\">\n            <div fxLayoutAlign=\"start center\">\n                <div class=\"d-flex flex-column align-items-center gap-1 app-item\" (click)=\"switchTo('techlify-hr')\">\n                    <img ngSrc=\"https://shared.techlify.com/hr.png\" [width]=\"imageWidth\" [height]=\"imageHeight\" />\n                    <div class=\"text-secondary\">TechlifyHR</div>\n                </div>\n                <div class=\"d-flex flex-column align-items-center gap-1 app-item\" (click)=\"switchTo('inventory')\">\n                    <img ngSrc=\"https://shared.techlify.com/inventory.png\" [width]=\"imageWidth\"\n                        [height]=\"imageHeight\" />\n                    <div class=\"text-secondary\">Inventory</div>\n                </div>\n\n                <div class=\"d-flex flex-column align-items-center gap-1 app-item\" (click)=\"switchTo('careers')\">\n                    <img ngSrc=\"https://shared.techlify.com/careers.png\" [width]=\"imageWidth\" [height]=\"imageHeight\" />\n                    <div class=\"text-secondary\">Careers.gy</div>\n                </div>\n            </div>\n\n            <div fxLayoutAlign=\"start center\">\n                <div class=\"d-flex flex-column align-items-center gap-1 app-item\" (click)=\"switchTo('books')\">\n                    <img ngSrc=\"https://shared.techlify.com/books.png\" [width]=\"imageWidth\" [height]=\"imageHeight\" />\n                    <div class=\"text-secondary\">Books</div>\n                </div>\n                <div class=\"d-flex flex-column align-items-center gap-1 app-item\" (click)=\"switchTo('works')\">\n                    <img ngSrc=\"https://shared.techlify.com/works.png\" [width]=\"imageWidth\" [height]=\"imageHeight\" />\n                    <div class=\"text-secondary\">Works</div>\n                </div>\n            </div>\n\n        </mat-card-content>\n    </mat-card>\n</ng-template>", styles: [".app-item{padding:10px}.app-item:hover{border-radius:2px;background:#0000001a;cursor:pointer}\n"], dependencies: [{ kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content" }, { 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: i6$4.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: i6$4.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i3.NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TechlifyAppSelectorComponent, selector: "app-techlify-app-selector", inputs: { imageHeight: "imageHeight", imageWidth: "imageWidth" }, ngImport: i0, template: "<button mat-icon-button (click)=\"isOpen = !isOpen\" type=\"button\" cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\">\n    <mat-icon>apps</mat-icon>\n</button>\n\n<ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]=\"trigger\" [cdkConnectedOverlayOpen]=\"isOpen\"\n    (overlayOutsideClick)=\"isOpen = false\">\n    <mat-card>\n        <mat-card-content fxLayout=\"column\">\n            <div fxLayoutAlign=\"start center\">\n                <div class=\"d-flex flex-column align-items-center gap-1 app-item\" (click)=\"switchTo('techlify-hr')\">\n                    <img ngSrc=\"https://shared.techlify.com/hr.png\" [width]=\"imageWidth\" [height]=\"imageHeight\" />\n                    <div class=\"text-secondary\">TechlifyHR</div>\n                </div>\n                <div class=\"d-flex flex-column align-items-center gap-1 app-item\" (click)=\"switchTo('inventory')\">\n                    <img ngSrc=\"https://shared.techlify.com/inventory.png\" [width]=\"imageWidth\"\n                        [height]=\"imageHeight\" />\n                    <div class=\"text-secondary\">Inventory</div>\n                </div>\n\n                <div class=\"d-flex flex-column align-items-center gap-1 app-item\" (click)=\"switchTo('careers')\">\n                    <img ngSrc=\"https://shared.techlify.com/careers.png\" [width]=\"imageWidth\" [height]=\"imageHeight\" />\n                    <div class=\"text-secondary\">Careers.gy</div>\n                </div>\n            </div>\n\n            <div fxLayoutAlign=\"start center\">\n                <div class=\"d-flex flex-column align-items-center gap-1 app-item\" (click)=\"switchTo('books')\">\n                    <img ngSrc=\"https://shared.techlify.com/books.png\" [width]=\"imageWidth\" [height]=\"imageHeight\" />\n                    <div class=\"text-secondary\">Books</div>\n                </div>\n                <div class=\"d-flex flex-column align-items-center gap-1 app-item\" (click)=\"switchTo('works')\">\n                    <img ngSrc=\"https://shared.techlify.com/works.png\" [width]=\"imageWidth\" [height]=\"imageHeight\" />\n                    <div class=\"text-secondary\">Works</div>\n                </div>\n            </div>\n\n        </mat-card-content>\n    </mat-card>\n</ng-template>", styles: [".app-item{padding:10px}.app-item:hover{border-radius:2px;background:#0000001a;cursor:pointer}\n"], dependencies: [{ kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content" }, { 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: i6$4.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: i6$4.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i2$1.NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TechlifyAppSelectorComponent, decorators: [{
             type: Component,
@@ -14046,7 +14046,7 @@ class SubscriptionFormComponent extends TechlifyFormComponentInterface {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SubscriptionFormComponent, deps: [{ token: FormValidatorService }, { token: i1.MatDialog }, { token: i1$5.UntypedFormBuilder }, { token: SubscriptionService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SubscriptionFormComponent, selector: "app-subscription-form", inputs: { isUpdate: "isUpdate", subscriptionPackage: "subscriptionPackage", tenantSubscriptionInfo: "tenantSubscriptionInfo" }, outputs: { success: "success" }, usesInheritance: true, ngImport: i0, template: "<button *ngIf=\"!isUpdate\" matTooltip=\"Add Subscription\" type=\"button\" mat-icon-button\n    (click)=\"formDialog(formTemplate)\">\n    <mat-icon>add</mat-icon>\n</button>\n<button *ngIf=\"isUpdate\" matTooltip=\"Edit Subscription\" type=\"button\" mat-icon-button\n    (click)=\"formDialog(formTemplate)\">\n    <mat-icon>edit</mat-icon>\n</button>\n\n\n<ng-template #formTemplate>\n    <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isWorking\"></mat-progress-bar>\n    <form [formGroup]=\"form\" (ngSubmit)=\"submit()\">\n        <div fxLayout=\"column\" class=\"mat-typography\">\n            <div mat-dialog-title class=\"text-center\">\n                <div>{{subscriptionPackage?'Package':'Tenant'}} Subscription Form</div>\n            </div>\n\n            <div mat-dialog-content fxLayout=\"row wrap\" fxLayoutGap=\"0.5rem\">\n\n                <mat-form-field appearance=\"outline\" fxFlex=\"0 1 calc(50%-0.5rem)\">\n                    <mat-label>Tenant</mat-label>\n                    <app-searchable-selector appearance=\"outline\" formControlName=\"tenant_id\" titleField=\"name\"\n                        apiUrl=\"api/clients\" sortBy=\"name|ASC\"\n                        [selectedValue]=\"selectedTenant\"></app-searchable-selector>\n                    <mat-error *ngIf=\"isFieldValid('tenant_id')\">{{getErrorMessage('tenant_id')}}\n                    </mat-error>\n                </mat-form-field>\n\n                <mat-form-field appearance=\"outline\" fxFlex=\"0 1 calc(50%-0.5rem)\">\n                    <mat-label>Package</mat-label>\n                    <app-searchable-selector appearance=\"outline\" formControlName=\"package_id\"\n                        apiUrl=\"api/subscription-packages\" sortBy=\"title|ASC\"\n                        [selectedValue]=\"selectedPackage\"></app-searchable-selector>\n                    <mat-error *ngIf=\"isFieldValid('package_id')\">{{getErrorMessage('package_id')}}\n                    </mat-error>\n                </mat-form-field>\n\n\n                <div fxLayoutAlign=\"start center\" fxFlex=\"100\" class=\"mb-2\">\n                    <mat-button-toggle-group [hideSingleSelectionIndicator]=\"true\"\n                        [hideMultipleSelectionIndicator]=\"true\" formControlName=\"is_trail\" (change)=\"validateDates()\">\n                        <mat-button-toggle [value]=\"true\">Trail</mat-button-toggle>\n                        <mat-button-toggle [value]=\"false\">Paid</mat-button-toggle>\n                    </mat-button-toggle-group>\n                </div>\n\n                <ng-container *ngIf=\"!form.get('is_trail').value\">\n                    <mat-form-field fxFlex=\"0 1 calc(50%-0.5rem)\">\n                        <input matInput [matDatepicker]=\"started_at\" formControlName=\"started_at\"\n                            placeholder=\"Started At\" [required]=\"!form.get('is_trail').value\" />\n                        <mat-datepicker-toggle matSuffix [for]=\"started_at\"></mat-datepicker-toggle>\n                        <mat-datepicker #started_at></mat-datepicker>\n                        <mat-error *ngIf=\"isFieldValid('started_at')\">{{getErrorMessage('started_at')}}</mat-error>\n                    </mat-form-field>\n\n                    <mat-form-field fxFlex=\"0 1 calc(50%-0.5rem)\">\n                        <input matInput [matDatepicker]=\"ended_at\" formControlName=\"ended_at\" placeholder=\"Ended At\" />\n                        <mat-datepicker-toggle matSuffix [for]=\"ended_at\"></mat-datepicker-toggle>\n                        <mat-datepicker #ended_at></mat-datepicker>\n                    </mat-form-field>\n                </ng-container>\n\n                <ng-container *ngIf=\"form.get('is_trail').value\">\n                    <mat-form-field fxFlex=\"0 1 calc(50%-0.5rem)\">\n                        <input matInput [matDatepicker]=\"trail_started_at\" formControlName=\"trail_started_at\"\n                            placeholder=\"Trail Started At\" [required]=\"form.get('is_trail').value\" />\n                        <mat-datepicker-toggle matSuffix [for]=\"trail_started_at\"></mat-datepicker-toggle>\n                        <mat-datepicker #trail_started_at></mat-datepicker>\n                        <mat-error\n                            *ngIf=\"isFieldValid('trail_started_at')\">{{getErrorMessage('trail_started_at')}}</mat-error>\n                    </mat-form-field>\n\n                    <mat-form-field fxFlex=\"0 1 calc(50%-0.5rem)\">\n                        <input matInput [matDatepicker]=\"trail_ended_at\" formControlName=\"trail_ended_at\"\n                            placeholder=\"Trail Ended At\" [required]=\"form.get('is_trail').value\" />\n                        <mat-datepicker-toggle matSuffix [for]=\"trail_ended_at\"></mat-datepicker-toggle>\n                        <mat-datepicker #trail_ended_at></mat-datepicker>\n                        <mat-error\n                            *ngIf=\"isFieldValid('trail_ended_at')\">{{getErrorMessage('trail_ended_at')}}</mat-error>\n                    </mat-form-field>\n                </ng-container>\n\n                <mat-form-field appearance=\"outline\" fxFlex=\"0 1 calc(50%-0.5rem)\">\n                    <mat-label>Cost/Unit</mat-label>\n                    <input type=\"number\" matInput formControlName=\"cost_per_unit\" placeholder=\"Cost/Unit\" />\n                </mat-form-field>\n\n                <mat-form-field appearance=\"outline\" fxFlex=\"0 1 calc(50%-0.5rem)\">\n                    <mat-label>Units</mat-label>\n                    <input type=\"number\" matInput formControlName=\"units\" placeholder=\"Units\" />\n                </mat-form-field>\n\n                <div fxLayoutAlign=\"start center\" fxFlex=\"100\">\n                    <mat-slide-toggle class=\"switch\" formControlName=\"is_unit_limitation_enforced\">Is\n                        Unit Enforced\n                    </mat-slide-toggle>\n                </div>\n\n                <div class=\"my-2\" fxLayout=\"row\" fxLayoutGap=\"30px\" fxLayoutAlign=\"end\" fxFlex=\"100%\">\n                    <button fxFlex mat-raised-button type=\"button\" matDialogClose class=\"white-bg-button\">\n                        Cancel\n                    </button>\n                    <button fxFlex mat-raised-button color=\"primary\" type=\"submit\">\n                        Save\n                    </button>\n                </div>\n            </div>\n        </div>\n    </form>\n</ng-template>", 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]  ", exportAs: ["matButton"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { 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: 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$1.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: i11$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i11$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i11$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i3$2.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i3$2.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: i5.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i8$5.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { 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", "panelWidth", "focusSearchOnOpen", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange"] }, { kind: "directive", type: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.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$5.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SubscriptionFormComponent, selector: "app-subscription-form", inputs: { isUpdate: "isUpdate", subscriptionPackage: "subscriptionPackage", tenantSubscriptionInfo: "tenantSubscriptionInfo" }, outputs: { success: "success" }, usesInheritance: true, ngImport: i0, template: "<button *ngIf=\"!isUpdate\" matTooltip=\"Add Subscription\" type=\"button\" mat-icon-button\n    (click)=\"formDialog(formTemplate)\">\n    <mat-icon>add</mat-icon>\n</button>\n<button *ngIf=\"isUpdate\" matTooltip=\"Edit Subscription\" type=\"button\" mat-icon-button\n    (click)=\"formDialog(formTemplate)\">\n    <mat-icon>edit</mat-icon>\n</button>\n\n\n<ng-template #formTemplate>\n    <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isWorking\"></mat-progress-bar>\n    <form [formGroup]=\"form\" (ngSubmit)=\"submit()\">\n        <div fxLayout=\"column\" class=\"mat-typography\">\n            <div mat-dialog-title class=\"text-center\">\n                <div>{{subscriptionPackage?'Package':'Tenant'}} Subscription Form</div>\n            </div>\n\n            <div mat-dialog-content fxLayout=\"row wrap\" fxLayoutGap=\"0.5rem\">\n\n                <mat-form-field appearance=\"outline\" fxFlex=\"0 1 calc(50%-0.5rem)\">\n                    <mat-label>Tenant</mat-label>\n                    <app-searchable-selector appearance=\"outline\" formControlName=\"tenant_id\" titleField=\"name\"\n                        apiUrl=\"api/clients\" sortBy=\"name|ASC\"\n                        [selectedValue]=\"selectedTenant\"></app-searchable-selector>\n                    <mat-error *ngIf=\"isFieldValid('tenant_id')\">{{getErrorMessage('tenant_id')}}\n                    </mat-error>\n                </mat-form-field>\n\n                <mat-form-field appearance=\"outline\" fxFlex=\"0 1 calc(50%-0.5rem)\">\n                    <mat-label>Package</mat-label>\n                    <app-searchable-selector appearance=\"outline\" formControlName=\"package_id\"\n                        apiUrl=\"api/subscription-packages\" sortBy=\"title|ASC\"\n                        [selectedValue]=\"selectedPackage\"></app-searchable-selector>\n                    <mat-error *ngIf=\"isFieldValid('package_id')\">{{getErrorMessage('package_id')}}\n                    </mat-error>\n                </mat-form-field>\n\n\n                <div fxLayoutAlign=\"start center\" fxFlex=\"100\" class=\"mb-2\">\n                    <mat-button-toggle-group [hideSingleSelectionIndicator]=\"true\"\n                        [hideMultipleSelectionIndicator]=\"true\" formControlName=\"is_trail\" (change)=\"validateDates()\">\n                        <mat-button-toggle [value]=\"true\">Trail</mat-button-toggle>\n                        <mat-button-toggle [value]=\"false\">Paid</mat-button-toggle>\n                    </mat-button-toggle-group>\n                </div>\n\n                <ng-container *ngIf=\"!form.get('is_trail').value\">\n                    <mat-form-field fxFlex=\"0 1 calc(50%-0.5rem)\">\n                        <input matInput [matDatepicker]=\"started_at\" formControlName=\"started_at\"\n                            placeholder=\"Started At\" [required]=\"!form.get('is_trail').value\" />\n                        <mat-datepicker-toggle matSuffix [for]=\"started_at\"></mat-datepicker-toggle>\n                        <mat-datepicker #started_at></mat-datepicker>\n                        <mat-error *ngIf=\"isFieldValid('started_at')\">{{getErrorMessage('started_at')}}</mat-error>\n                    </mat-form-field>\n\n                    <mat-form-field fxFlex=\"0 1 calc(50%-0.5rem)\">\n                        <input matInput [matDatepicker]=\"ended_at\" formControlName=\"ended_at\" placeholder=\"Ended At\" />\n                        <mat-datepicker-toggle matSuffix [for]=\"ended_at\"></mat-datepicker-toggle>\n                        <mat-datepicker #ended_at></mat-datepicker>\n                    </mat-form-field>\n                </ng-container>\n\n                <ng-container *ngIf=\"form.get('is_trail').value\">\n                    <mat-form-field fxFlex=\"0 1 calc(50%-0.5rem)\">\n                        <input matInput [matDatepicker]=\"trail_started_at\" formControlName=\"trail_started_at\"\n                            placeholder=\"Trail Started At\" [required]=\"form.get('is_trail').value\" />\n                        <mat-datepicker-toggle matSuffix [for]=\"trail_started_at\"></mat-datepicker-toggle>\n                        <mat-datepicker #trail_started_at></mat-datepicker>\n                        <mat-error\n                            *ngIf=\"isFieldValid('trail_started_at')\">{{getErrorMessage('trail_started_at')}}</mat-error>\n                    </mat-form-field>\n\n                    <mat-form-field fxFlex=\"0 1 calc(50%-0.5rem)\">\n                        <input matInput [matDatepicker]=\"trail_ended_at\" formControlName=\"trail_ended_at\"\n                            placeholder=\"Trail Ended At\" [required]=\"form.get('is_trail').value\" />\n                        <mat-datepicker-toggle matSuffix [for]=\"trail_ended_at\"></mat-datepicker-toggle>\n                        <mat-datepicker #trail_ended_at></mat-datepicker>\n                        <mat-error\n                            *ngIf=\"isFieldValid('trail_ended_at')\">{{getErrorMessage('trail_ended_at')}}</mat-error>\n                    </mat-form-field>\n                </ng-container>\n\n                <mat-form-field appearance=\"outline\" fxFlex=\"0 1 calc(50%-0.5rem)\">\n                    <mat-label>Cost/Unit</mat-label>\n                    <input type=\"number\" matInput formControlName=\"cost_per_unit\" placeholder=\"Cost/Unit\" />\n                </mat-form-field>\n\n                <mat-form-field appearance=\"outline\" fxFlex=\"0 1 calc(50%-0.5rem)\">\n                    <mat-label>Units</mat-label>\n                    <input type=\"number\" matInput formControlName=\"units\" placeholder=\"Units\" />\n                </mat-form-field>\n\n                <div fxLayoutAlign=\"start center\" fxFlex=\"100\">\n                    <mat-slide-toggle class=\"switch\" formControlName=\"is_unit_limitation_enforced\">Is\n                        Unit Enforced\n                    </mat-slide-toggle>\n                </div>\n\n                <div class=\"my-2\" fxLayout=\"row\" fxLayoutGap=\"30px\" fxLayoutAlign=\"end\" fxFlex=\"100%\">\n                    <button fxFlex mat-raised-button type=\"button\" matDialogClose class=\"white-bg-button\">\n                        Cancel\n                    </button>\n                    <button fxFlex mat-raised-button color=\"primary\" type=\"submit\">\n                        Save\n                    </button>\n                </div>\n            </div>\n        </div>\n    </form>\n</ng-template>", styles: [""], dependencies: [{ kind: "directive", type: i2$1.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]  ", exportAs: ["matButton"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { 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: 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$1.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: i11$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i11$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i11$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i3$1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i3$1.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: i5.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i8$5.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { 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", "panelWidth", "focusSearchOnOpen", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange"] }, { kind: "directive", type: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.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$5.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SubscriptionFormComponent, decorators: [{
             type: Component,
@@ -14182,8 +14182,8 @@ let SubscriptionListingComponent = class SubscriptionListingComponent extends Te
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SubscriptionListingComponent, deps: [{ token: SubscriptionService }, { token: i1$5.UntypedFormBuilder }, { token: i1.MatDialog }, { token: i3.DatePipe }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SubscriptionListingComponent, selector: "app-subscription-listing", inputs: { subscriptionPackage: "subscriptionPackage" }, usesInheritance: true, ngImport: i0, template: "<div fxLayout=\"column\" class=\"m-2\">\n    <mat-card appearance=\"outlined\" fxLayout fxLayoutGap=\"0.5rem\" fxLayoutAlign=\"start center\">\n        <div fxLayout fxLayoutAlign=\"start center\">\n            <h5 class=\"m-0\">{{subscriptionPackage?'Package':'Tenant'}} Subscriptions</h5>\n            <app-subscription-form (success)=\"reload()\"\n                [subscriptionPackage]=\"subscriptionPackage\"></app-subscription-form>\n        </div>\n        <div fxFlex>\n        </div>\n        <form [formGroup]=\"filterForm\" fxLayout=\"row\" fxLayoutGap=\"0.3rem\" class=\"d-print-none\"\n            fxLayoutAlign=\"start start\">\n            <mat-form-field appearance=\"outline\" class=\" fl-md\">\n                <mat-label>Search</mat-label>\n                <input type=\"text\" matInput formControlName=\"search\" placeholder=\"Search Tenant, Details\"\n                    autocomplete=\"off\" />\n                <button *ngIf=\"filterForm.get('search').value\" matSuffix mat-icon-button\n                    (click)=\"resetFilter('search')\">\n                    <mat-icon>close</mat-icon>\n                </button>\n            </mat-form-field>\n\n\n            <mat-form-field class=\" fl-sm\" appearance=\"outline\" *ngIf=\"!subscriptionPackage\">\n                <mat-label>Package</mat-label>\n                <app-searchable-selector formControlName=\"package_ids\" apiUrl=\"api/subscription-packages\"\n                    [multiple]=\"true\">\n                </app-searchable-selector>\n                <button mat-icon-button matSuffix type=\"button\" *ngIf=\"filterForm.get('package_ids').value\"\n                    (click)=\"resetFilter('package_ids')\">\n                    <mat-icon>clear</mat-icon>\n                </button>\n            </mat-form-field>\n\n            <app-timeline-filter [showClearButton]=\"true\" [form]=\"filterForm\" appearance=\"outline\"\n                formControlName=\"date_period_id\" labelText=\"Start\">\n            </app-timeline-filter>\n\n            <mat-form-field class=\"fl-sm\" appearance=\"outline\">\n                <mat-label>Status</mat-label>\n                <mat-select formControlName=\"status_ids\" multiple>\n                    <mat-option [value]=\"1\">Active</mat-option>\n                    <mat-option [value]=\"2\">Inactive</mat-option>\n                </mat-select>\n                <button mat-icon-button matSuffix type=\"button\" *ngIf=\"filterForm.get('status_ids').value\"\n                    (click)=\"resetFilter('status_ids')\">\n                    <mat-icon>clear</mat-icon>\n                </button>\n            </mat-form-field>\n\n        </form>\n    </mat-card>\n    <mat-card appearance=\"outlined\" class=\"p-0 mt-2\">\n        <table mat-table matSort [dataSource]=\"models\" class=\"w-100\" infiniteScroll [infiniteScrollDistance]=\"2\"\n            [infiniteScrollThrottle]=\"50\" (scrolled)=\"onScroll()\" (matSortChange)=\"sortColumn($event)\">\n\n            <ng-container matColumnDef=\"index\">\n                <th mat-header-cell *matHeaderCellDef> # </th>\n                <td mat-cell *matCellDef=\"let tenantSubscription; let i = index\"> {{ i+1 }} </td>\n            </ng-container>\n\n            <ng-container matColumnDef=\"tenant\">\n                <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear> Tenant </th>\n                <td mat-cell *matCellDef=\"let tenantSubscription\">\n                    <div>\n                        <div>{{tenantSubscription?.tenant?.name }}</div>\n                        <div><span>{{tenantSubscription?.tenant?.phone }}</span> <span> |\n                                {{tenantSubscription?.tenant?.email }}</span></div>\n                    </div>\n                </td>\n            </ng-container>\n\n            <ng-container matColumnDef=\"period\">\n                <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear> Period </th>\n                <td mat-cell *matCellDef=\"let tenantSubscription\">\n                    <span *ngIf=\"tenantSubscription?.started_at\">{{tenantSubscription?.started_at | date:'mediumDate' }}\n                        -> {{(tenantSubscription?.ended_at | date:'mediumDate') ?? 'NA' }}</span>\n                </td>\n            </ng-container>\n\n            <ng-container matColumnDef=\"package\">\n                <th mat-header-cell *matHeaderCellDef> Package </th>\n                <td mat-cell *matCellDef=\"let tenantSubscription\">\n                    <div>{{tenantSubscription?.package?.title }}</div>\n                </td>\n            </ng-container>\n\n            <ng-container matColumnDef=\"status\">\n                <th mat-header-cell *matHeaderCellDef> Status </th>\n                <td mat-cell *matCellDef=\"let tenantSubscription\">\n                    <div>{{tenantSubscription?.status?.title }}</div>\n                </td>\n            </ng-container>\n\n            <ng-container matColumnDef=\"cost_per_unit\">\n                <th mat-header-cell *matHeaderCellDef> Cost/Units </th>\n                <td mat-cell *matCellDef=\"let tenantSubscription\">\n                    <div>{{tenantSubscription?.cost_per_unit | currency:'USD':'symbol':'1.0-2' }}</div>\n                </td>\n            </ng-container>\n\n            <ng-container matColumnDef=\"units\">\n                <th mat-header-cell *matHeaderCellDef> Units </th>\n                <td mat-cell *matCellDef=\"let tenantSubscription\">\n                    <div>{{tenantSubscription?.units | number}}</div>\n                </td>\n            </ng-container>\n\n            <ng-container matColumnDef=\"is_unit_limitation_enforced\">\n                <th mat-header-cell *matHeaderCellDef> Is Units Limited </th>\n                <td mat-cell *matCellDef=\"let tenantSubscription\">\n                    <div>{{tenantSubscription?.is_unit_limitation_enforced ? 'Yes' : 'No' }}</div>\n                </td>\n            </ng-container>\n\n            <ng-container matColumnDef=\"total\">\n                <th mat-header-cell *matHeaderCellDef> Total Cost </th>\n                <td mat-cell *matCellDef=\"let tenantSubscription\">\n                    <div>{{tenantSubscription?.total | currency:'USD':'symbol':'1.0-2' }}</div>\n                </td>\n            </ng-container>\n\n            <ng-container matColumnDef=\"is_trail\">\n                <th mat-header-cell *matHeaderCellDef> Is Trail</th>\n                <td mat-cell *matCellDef=\"let tenantSubscription\">\n                    <div>\n                        <div>{{tenantSubscription?.is_trail ? 'Yes' : 'No' }}</div>\n                        <div *ngIf=\"tenantSubscription?.is_trail\"><span>{{tenantSubscription?.trail_started_at |\n                                date:'mediumDate' }} -> {{tenantSubscription?.trail_ended_at | date:'mediumDate'\n                                }}</span></div>\n                    </div>\n                </td>\n            </ng-container>\n\n\n            <ng-container matColumnDef=\"actions\">\n                <th mat-header-cell *matHeaderCellDef> Actions </th>\n                <td mat-cell *matCellDef=\"let tenantSubscription\">\n                    <div class=\"text-secondary\" fxLayout>\n                        <div *ngIf=\"tenantSubscription?.creator_id\">\n                            <app-subscription-form *ngIf=\"tenantSubscription.status_id == subscriptionStatus.ACTIVE\"\n                                (success)=\"reload()\" [tenantSubscriptionInfo]=\"tenantSubscription\"\n                                [subscriptionPackage]=\"subscriptionPackage\"></app-subscription-form>\n                            <button *ngIf=\"tenantSubscription.status_id == subscriptionStatus.ACTIVE\"\n                                matTooltip=\"Cancel Subscription\" type=\"button\" mat-icon-button\n                                (click)=\"cancel(tenantSubscription)\">\n                                <mat-icon>cancel</mat-icon>\n                            </button>\n                        </div>\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 mode=\"indeterminate\" *ngIf=\"isWorking\"></mat-progress-bar>\n    </mat-card>\n</div>", styles: [".add-icon{position:relative;top:5px}.add-icon:hover{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", 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.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$1.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: i6$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i9$2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i11.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i11.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i9.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i9.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i9.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i9.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i9.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i9.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i9.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i9.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i9.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i9.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i5.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { 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", "panelWidth", "focusSearchOnOpen", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange"] }, { kind: "directive", type: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.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$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: SubscriptionFormComponent, selector: "app-subscription-form", inputs: ["isUpdate", "subscriptionPackage", "tenantSubscriptionInfo"], outputs: ["success"] }, { 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: i6$1.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: TimelineFilterComponent, selector: "app-timeline-filter", inputs: ["defaultValue", "required", "disabled", "value", "timelines", "dateFrom", "dateTo", "appearance", "showClearButton", "form", "labelText"], outputs: ["selectionChange"] }, { kind: "pipe", type: i3.DecimalPipe, name: "number" }, { kind: "pipe", type: i3.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i3.DatePipe, name: "date" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SubscriptionListingComponent, deps: [{ token: SubscriptionService }, { token: i1$5.UntypedFormBuilder }, { token: i1.MatDialog }, { token: i2$1.DatePipe }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SubscriptionListingComponent, selector: "app-subscription-listing", inputs: { subscriptionPackage: "subscriptionPackage" }, usesInheritance: true, ngImport: i0, template: "<div fxLayout=\"column\" class=\"m-2\">\n    <mat-card appearance=\"outlined\" fxLayout fxLayoutGap=\"0.5rem\" fxLayoutAlign=\"start center\">\n        <div fxLayout fxLayoutAlign=\"start center\">\n            <h5 class=\"m-0\">{{subscriptionPackage?'Package':'Tenant'}} Subscriptions</h5>\n            <app-subscription-form (success)=\"reload()\"\n                [subscriptionPackage]=\"subscriptionPackage\"></app-subscription-form>\n        </div>\n        <div fxFlex>\n        </div>\n        <form [formGroup]=\"filterForm\" fxLayout=\"row\" fxLayoutGap=\"0.3rem\" class=\"d-print-none\"\n            fxLayoutAlign=\"start start\">\n            <mat-form-field appearance=\"outline\" class=\" fl-md\">\n                <mat-label>Search</mat-label>\n                <input type=\"text\" matInput formControlName=\"search\" placeholder=\"Search Tenant, Details\"\n                    autocomplete=\"off\" />\n                <button *ngIf=\"filterForm.get('search').value\" matSuffix mat-icon-button\n                    (click)=\"resetFilter('search')\">\n                    <mat-icon>close</mat-icon>\n                </button>\n            </mat-form-field>\n\n\n            <mat-form-field class=\" fl-sm\" appearance=\"outline\" *ngIf=\"!subscriptionPackage\">\n                <mat-label>Package</mat-label>\n                <app-searchable-selector formControlName=\"package_ids\" apiUrl=\"api/subscription-packages\"\n                    [multiple]=\"true\">\n                </app-searchable-selector>\n                <button mat-icon-button matSuffix type=\"button\" *ngIf=\"filterForm.get('package_ids').value\"\n                    (click)=\"resetFilter('package_ids')\">\n                    <mat-icon>clear</mat-icon>\n                </button>\n            </mat-form-field>\n\n            <app-timeline-filter [showClearButton]=\"true\" [form]=\"filterForm\" appearance=\"outline\"\n                formControlName=\"date_period_id\" labelText=\"Start\">\n            </app-timeline-filter>\n\n            <mat-form-field class=\"fl-sm\" appearance=\"outline\">\n                <mat-label>Status</mat-label>\n                <mat-select formControlName=\"status_ids\" multiple>\n                    <mat-option [value]=\"1\">Active</mat-option>\n                    <mat-option [value]=\"2\">Inactive</mat-option>\n                </mat-select>\n                <button mat-icon-button matSuffix type=\"button\" *ngIf=\"filterForm.get('status_ids').value\"\n                    (click)=\"resetFilter('status_ids')\">\n                    <mat-icon>clear</mat-icon>\n                </button>\n            </mat-form-field>\n\n        </form>\n    </mat-card>\n    <mat-card appearance=\"outlined\" class=\"p-0 mt-2\">\n        <table mat-table matSort [dataSource]=\"models\" class=\"w-100\" infiniteScroll [infiniteScrollDistance]=\"2\"\n            [infiniteScrollThrottle]=\"50\" (scrolled)=\"onScroll()\" (matSortChange)=\"sortColumn($event)\">\n\n            <ng-container matColumnDef=\"index\">\n                <th mat-header-cell *matHeaderCellDef> # </th>\n                <td mat-cell *matCellDef=\"let tenantSubscription; let i = index\"> {{ i+1 }} </td>\n            </ng-container>\n\n            <ng-container matColumnDef=\"tenant\">\n                <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear> Tenant </th>\n                <td mat-cell *matCellDef=\"let tenantSubscription\">\n                    <div>\n                        <div>{{tenantSubscription?.tenant?.name }}</div>\n                        <div><span>{{tenantSubscription?.tenant?.phone }}</span> <span> |\n                                {{tenantSubscription?.tenant?.email }}</span></div>\n                    </div>\n                </td>\n            </ng-container>\n\n            <ng-container matColumnDef=\"period\">\n                <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear> Period </th>\n                <td mat-cell *matCellDef=\"let tenantSubscription\">\n                    <span *ngIf=\"tenantSubscription?.started_at\">{{tenantSubscription?.started_at | date:'mediumDate' }}\n                        -> {{(tenantSubscription?.ended_at | date:'mediumDate') ?? 'NA' }}</span>\n                </td>\n            </ng-container>\n\n            <ng-container matColumnDef=\"package\">\n                <th mat-header-cell *matHeaderCellDef> Package </th>\n                <td mat-cell *matCellDef=\"let tenantSubscription\">\n                    <div>{{tenantSubscription?.package?.title }}</div>\n                </td>\n            </ng-container>\n\n            <ng-container matColumnDef=\"status\">\n                <th mat-header-cell *matHeaderCellDef> Status </th>\n                <td mat-cell *matCellDef=\"let tenantSubscription\">\n                    <div>{{tenantSubscription?.status?.title }}</div>\n                </td>\n            </ng-container>\n\n            <ng-container matColumnDef=\"cost_per_unit\">\n                <th mat-header-cell *matHeaderCellDef> Cost/Units </th>\n                <td mat-cell *matCellDef=\"let tenantSubscription\">\n                    <div>{{tenantSubscription?.cost_per_unit | currency:'USD':'symbol':'1.0-2' }}</div>\n                </td>\n            </ng-container>\n\n            <ng-container matColumnDef=\"units\">\n                <th mat-header-cell *matHeaderCellDef> Units </th>\n                <td mat-cell *matCellDef=\"let tenantSubscription\">\n                    <div>{{tenantSubscription?.units | number}}</div>\n                </td>\n            </ng-container>\n\n            <ng-container matColumnDef=\"is_unit_limitation_enforced\">\n                <th mat-header-cell *matHeaderCellDef> Is Units Limited </th>\n                <td mat-cell *matCellDef=\"let tenantSubscription\">\n                    <div>{{tenantSubscription?.is_unit_limitation_enforced ? 'Yes' : 'No' }}</div>\n                </td>\n            </ng-container>\n\n            <ng-container matColumnDef=\"total\">\n                <th mat-header-cell *matHeaderCellDef> Total Cost </th>\n                <td mat-cell *matCellDef=\"let tenantSubscription\">\n                    <div>{{tenantSubscription?.total | currency:'USD':'symbol':'1.0-2' }}</div>\n                </td>\n            </ng-container>\n\n            <ng-container matColumnDef=\"is_trail\">\n                <th mat-header-cell *matHeaderCellDef> Is Trail</th>\n                <td mat-cell *matCellDef=\"let tenantSubscription\">\n                    <div>\n                        <div>{{tenantSubscription?.is_trail ? 'Yes' : 'No' }}</div>\n                        <div *ngIf=\"tenantSubscription?.is_trail\"><span>{{tenantSubscription?.trail_started_at |\n                                date:'mediumDate' }} -> {{tenantSubscription?.trail_ended_at | date:'mediumDate'\n                                }}</span></div>\n                    </div>\n                </td>\n            </ng-container>\n\n\n            <ng-container matColumnDef=\"actions\">\n                <th mat-header-cell *matHeaderCellDef> Actions </th>\n                <td mat-cell *matCellDef=\"let tenantSubscription\">\n                    <div class=\"text-secondary\" fxLayout>\n                        <div *ngIf=\"tenantSubscription?.creator_id\">\n                            <app-subscription-form *ngIf=\"tenantSubscription.status_id == subscriptionStatus.ACTIVE\"\n                                (success)=\"reload()\" [tenantSubscriptionInfo]=\"tenantSubscription\"\n                                [subscriptionPackage]=\"subscriptionPackage\"></app-subscription-form>\n                            <button *ngIf=\"tenantSubscription.status_id == subscriptionStatus.ACTIVE\"\n                                matTooltip=\"Cancel Subscription\" type=\"button\" mat-icon-button\n                                (click)=\"cancel(tenantSubscription)\">\n                                <mat-icon>cancel</mat-icon>\n                            </button>\n                        </div>\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 mode=\"indeterminate\" *ngIf=\"isWorking\"></mat-progress-bar>\n    </mat-card>\n</div>", styles: [".add-icon{position:relative;top:5px}.add-icon:hover{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", 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.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$1.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: i6$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i9$2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i11.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i11.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i9.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i9.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i9.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i9.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i9.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i9.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i9.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i9.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i9.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i9.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i5.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { 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", "panelWidth", "focusSearchOnOpen", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange"] }, { kind: "directive", type: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.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$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: SubscriptionFormComponent, selector: "app-subscription-form", inputs: ["isUpdate", "subscriptionPackage", "tenantSubscriptionInfo"], outputs: ["success"] }, { 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: i6$1.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: TimelineFilterComponent, selector: "app-timeline-filter", inputs: ["defaultValue", "required", "disabled", "value", "timelines", "dateFrom", "dateTo", "appearance", "showClearButton", "form", "labelText"], outputs: ["selectionChange"] }, { kind: "pipe", type: i2$1.DecimalPipe, name: "number" }, { kind: "pipe", type: i2$1.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i2$1.DatePipe, name: "date" }] }); }
 };
 SubscriptionListingComponent = __decorate([
     UntilDestroy()
@@ -14191,7 +14191,7 @@ SubscriptionListingComponent = __decorate([
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SubscriptionListingComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-subscription-listing', template: "<div fxLayout=\"column\" class=\"m-2\">\n    <mat-card appearance=\"outlined\" fxLayout fxLayoutGap=\"0.5rem\" fxLayoutAlign=\"start center\">\n        <div fxLayout fxLayoutAlign=\"start center\">\n            <h5 class=\"m-0\">{{subscriptionPackage?'Package':'Tenant'}} Subscriptions</h5>\n            <app-subscription-form (success)=\"reload()\"\n                [subscriptionPackage]=\"subscriptionPackage\"></app-subscription-form>\n        </div>\n        <div fxFlex>\n        </div>\n        <form [formGroup]=\"filterForm\" fxLayout=\"row\" fxLayoutGap=\"0.3rem\" class=\"d-print-none\"\n            fxLayoutAlign=\"start start\">\n            <mat-form-field appearance=\"outline\" class=\" fl-md\">\n                <mat-label>Search</mat-label>\n                <input type=\"text\" matInput formControlName=\"search\" placeholder=\"Search Tenant, Details\"\n                    autocomplete=\"off\" />\n                <button *ngIf=\"filterForm.get('search').value\" matSuffix mat-icon-button\n                    (click)=\"resetFilter('search')\">\n                    <mat-icon>close</mat-icon>\n                </button>\n            </mat-form-field>\n\n\n            <mat-form-field class=\" fl-sm\" appearance=\"outline\" *ngIf=\"!subscriptionPackage\">\n                <mat-label>Package</mat-label>\n                <app-searchable-selector formControlName=\"package_ids\" apiUrl=\"api/subscription-packages\"\n                    [multiple]=\"true\">\n                </app-searchable-selector>\n                <button mat-icon-button matSuffix type=\"button\" *ngIf=\"filterForm.get('package_ids').value\"\n                    (click)=\"resetFilter('package_ids')\">\n                    <mat-icon>clear</mat-icon>\n                </button>\n            </mat-form-field>\n\n            <app-timeline-filter [showClearButton]=\"true\" [form]=\"filterForm\" appearance=\"outline\"\n                formControlName=\"date_period_id\" labelText=\"Start\">\n            </app-timeline-filter>\n\n            <mat-form-field class=\"fl-sm\" appearance=\"outline\">\n                <mat-label>Status</mat-label>\n                <mat-select formControlName=\"status_ids\" multiple>\n                    <mat-option [value]=\"1\">Active</mat-option>\n                    <mat-option [value]=\"2\">Inactive</mat-option>\n                </mat-select>\n                <button mat-icon-button matSuffix type=\"button\" *ngIf=\"filterForm.get('status_ids').value\"\n                    (click)=\"resetFilter('status_ids')\">\n                    <mat-icon>clear</mat-icon>\n                </button>\n            </mat-form-field>\n\n        </form>\n    </mat-card>\n    <mat-card appearance=\"outlined\" class=\"p-0 mt-2\">\n        <table mat-table matSort [dataSource]=\"models\" class=\"w-100\" infiniteScroll [infiniteScrollDistance]=\"2\"\n            [infiniteScrollThrottle]=\"50\" (scrolled)=\"onScroll()\" (matSortChange)=\"sortColumn($event)\">\n\n            <ng-container matColumnDef=\"index\">\n                <th mat-header-cell *matHeaderCellDef> # </th>\n                <td mat-cell *matCellDef=\"let tenantSubscription; let i = index\"> {{ i+1 }} </td>\n            </ng-container>\n\n            <ng-container matColumnDef=\"tenant\">\n                <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear> Tenant </th>\n                <td mat-cell *matCellDef=\"let tenantSubscription\">\n                    <div>\n                        <div>{{tenantSubscription?.tenant?.name }}</div>\n                        <div><span>{{tenantSubscription?.tenant?.phone }}</span> <span> |\n                                {{tenantSubscription?.tenant?.email }}</span></div>\n                    </div>\n                </td>\n            </ng-container>\n\n            <ng-container matColumnDef=\"period\">\n                <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear> Period </th>\n                <td mat-cell *matCellDef=\"let tenantSubscription\">\n                    <span *ngIf=\"tenantSubscription?.started_at\">{{tenantSubscription?.started_at | date:'mediumDate' }}\n                        -> {{(tenantSubscription?.ended_at | date:'mediumDate') ?? 'NA' }}</span>\n                </td>\n            </ng-container>\n\n            <ng-container matColumnDef=\"package\">\n                <th mat-header-cell *matHeaderCellDef> Package </th>\n                <td mat-cell *matCellDef=\"let tenantSubscription\">\n                    <div>{{tenantSubscription?.package?.title }}</div>\n                </td>\n            </ng-container>\n\n            <ng-container matColumnDef=\"status\">\n                <th mat-header-cell *matHeaderCellDef> Status </th>\n                <td mat-cell *matCellDef=\"let tenantSubscription\">\n                    <div>{{tenantSubscription?.status?.title }}</div>\n                </td>\n            </ng-container>\n\n            <ng-container matColumnDef=\"cost_per_unit\">\n                <th mat-header-cell *matHeaderCellDef> Cost/Units </th>\n                <td mat-cell *matCellDef=\"let tenantSubscription\">\n                    <div>{{tenantSubscription?.cost_per_unit | currency:'USD':'symbol':'1.0-2' }}</div>\n                </td>\n            </ng-container>\n\n            <ng-container matColumnDef=\"units\">\n                <th mat-header-cell *matHeaderCellDef> Units </th>\n                <td mat-cell *matCellDef=\"let tenantSubscription\">\n                    <div>{{tenantSubscription?.units | number}}</div>\n                </td>\n            </ng-container>\n\n            <ng-container matColumnDef=\"is_unit_limitation_enforced\">\n                <th mat-header-cell *matHeaderCellDef> Is Units Limited </th>\n                <td mat-cell *matCellDef=\"let tenantSubscription\">\n                    <div>{{tenantSubscription?.is_unit_limitation_enforced ? 'Yes' : 'No' }}</div>\n                </td>\n            </ng-container>\n\n            <ng-container matColumnDef=\"total\">\n                <th mat-header-cell *matHeaderCellDef> Total Cost </th>\n                <td mat-cell *matCellDef=\"let tenantSubscription\">\n                    <div>{{tenantSubscription?.total | currency:'USD':'symbol':'1.0-2' }}</div>\n                </td>\n            </ng-container>\n\n            <ng-container matColumnDef=\"is_trail\">\n                <th mat-header-cell *matHeaderCellDef> Is Trail</th>\n                <td mat-cell *matCellDef=\"let tenantSubscription\">\n                    <div>\n                        <div>{{tenantSubscription?.is_trail ? 'Yes' : 'No' }}</div>\n                        <div *ngIf=\"tenantSubscription?.is_trail\"><span>{{tenantSubscription?.trail_started_at |\n                                date:'mediumDate' }} -> {{tenantSubscription?.trail_ended_at | date:'mediumDate'\n                                }}</span></div>\n                    </div>\n                </td>\n            </ng-container>\n\n\n            <ng-container matColumnDef=\"actions\">\n                <th mat-header-cell *matHeaderCellDef> Actions </th>\n                <td mat-cell *matCellDef=\"let tenantSubscription\">\n                    <div class=\"text-secondary\" fxLayout>\n                        <div *ngIf=\"tenantSubscription?.creator_id\">\n                            <app-subscription-form *ngIf=\"tenantSubscription.status_id == subscriptionStatus.ACTIVE\"\n                                (success)=\"reload()\" [tenantSubscriptionInfo]=\"tenantSubscription\"\n                                [subscriptionPackage]=\"subscriptionPackage\"></app-subscription-form>\n                            <button *ngIf=\"tenantSubscription.status_id == subscriptionStatus.ACTIVE\"\n                                matTooltip=\"Cancel Subscription\" type=\"button\" mat-icon-button\n                                (click)=\"cancel(tenantSubscription)\">\n                                <mat-icon>cancel</mat-icon>\n                            </button>\n                        </div>\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 mode=\"indeterminate\" *ngIf=\"isWorking\"></mat-progress-bar>\n    </mat-card>\n</div>", styles: [".add-icon{position:relative;top:5px}.add-icon:hover{cursor:pointer}\n"] }]
-        }], ctorParameters: () => [{ type: SubscriptionService }, { type: i1$5.UntypedFormBuilder }, { type: i1.MatDialog }, { type: i3.DatePipe }], propDecorators: { subscriptionPackage: [{
+        }], ctorParameters: () => [{ type: SubscriptionService }, { type: i1$5.UntypedFormBuilder }, { type: i1.MatDialog }, { type: i2$1.DatePipe }], propDecorators: { subscriptionPackage: [{
                 type: Input
             }] } });
 
@@ -14359,7 +14359,7 @@ let SubscriptionPackageListingComponent = class SubscriptionPackageListingCompon
         this.router.navigate([`./${subscriptionPackage?.id}/view`], { relativeTo: this.activatedRoute });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SubscriptionPackageListingComponent, deps: [{ token: SubscriptionPackageService }, { token: i1$1.ActivatedRoute }, { token: FilterService }, { token: i1$1.Router }, { token: i1.MatDialog }, { token: i1$5.UntypedFormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SubscriptionPackageListingComponent, selector: "app-subscription-package-listing", usesInheritance: true, ngImport: i0, template: "<div fxLayout=\"column\" class=\"m-2\">\n    <mat-card appearance=\"outlined\" fxLayout fxLayoutGap=\"0.5rem\" fxLayoutAlign=\"start center\">\n        <h5 class=\"m-0\">Subscription Packages</h5>\n        <span fxFlex></span>\n        <form [formGroup]=\"filterFormGroup\" class=\"filter-form\" fxLayout=\"row\">\n            <mat-form-field appearance=\"outline\" class=\"nil-subscript-wrappe fl-md\">\n                <mat-label>Search</mat-label>\n                <input type=\"text\" matInput formControlName=\"search\" placeholder=\"Search..\" name=\"search\"\n                    autocomplete=\"off\" />\n                <button *ngIf=\"filterFormGroup.get('search').value\" matSuffix mat-icon-button\n                    (click)=\"filterFormGroup.get('search').setValue('')\">\n                    <mat-icon>close</mat-icon>\n                </button>\n            </mat-form-field>\n        </form>\n    </mat-card>\n    <mat-card appearance=\"outlined\" class=\"p-0 mt-2\">\n        <table mat-table matSort [dataSource]=\"models\" class=\"w-100\" infiniteScroll [infiniteScrollDistance]=\"2\"\n            [infiniteScrollThrottle]=\"50\" (scrolled)=\"onScroll()\" (matSortChange)=\"sortColumn($event)\">\n\n            <ng-container matColumnDef=\"index\">\n                <th mat-header-cell *matHeaderCellDef> # </th>\n                <td mat-cell *matCellDef=\"let subscriptionPackage; let i = index\"> {{ i+1 }} </td>\n            </ng-container>\n\n            <ng-container matColumnDef=\"title\">\n                <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear> Title </th>\n                <td mat-cell *matCellDef=\"let subscriptionPackage\">\n                    <span>{{subscriptionPackage?.title }}</span>\n                </td>\n            </ng-container>\n\n            <ng-container matColumnDef=\"code\">\n                <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear> Code </th>\n                <td mat-cell *matCellDef=\"let subscriptionPackage\">\n                    <span>{{subscriptionPackage?.code }}</span>\n                </td>\n            </ng-container>\n\n            <ng-container matColumnDef=\"description\">\n                <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear class=\"w-description\"> Description\n                </th>\n                <td mat-cell *matCellDef=\"let subscriptionPackage\">\n                    <span>{{subscriptionPackage?.description }}</span>\n                </td>\n            </ng-container>\n\n            <ng-container matColumnDef=\"tenants_count\">\n                <th mat-header-cell *matHeaderCellDef> Tenants </th>\n                <td mat-cell *matCellDef=\"let subscriptionPackage\">\n                    <span>{{subscriptionPackage?.tenants_count ?? 0 }} tenants</span>\n                </td>\n            </ng-container>\n\n            <ng-container matColumnDef=\"actions\">\n                <th mat-header-cell *matHeaderCellDef> Actions </th>\n                <td mat-cell *matCellDef=\"let subscriptionPackage\">\n                    <div class=\"text-secondary\" fxLayout fxLayoutAlign=\"start center\">\n                        <app-techlify-icon name=\"view\" class=\"clickable\" matTooltip=\"View\"\n                            (click)=\"navigateToView(subscriptionPackage)\"></app-techlify-icon>\n                        <mat-slide-toggle style=\"transform: scale(0.8);\" [checked]=\"subscriptionPackage?.is_enabled\"\n                            color=\"primary\" (change)=\"confirmToggle($event,subscriptionPackage)\">Is Enabled\n                        </mat-slide-toggle>\n                    </div>\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    </mat-card>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.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$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", 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.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$1.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: i11.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i11.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i9.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i9.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i9.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i9.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i9.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i9.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i9.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i9.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i9.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i9.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i5.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i8$5.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { 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: i6$1.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: TechlifyIconComponent, selector: "app-techlify-icon", inputs: ["name", "size"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SubscriptionPackageListingComponent, selector: "app-subscription-package-listing", usesInheritance: true, ngImport: i0, template: "<div fxLayout=\"column\" class=\"m-2\">\n    <mat-card appearance=\"outlined\" fxLayout fxLayoutGap=\"0.5rem\" fxLayoutAlign=\"start center\">\n        <h5 class=\"m-0\">Subscription Packages</h5>\n        <span fxFlex></span>\n        <form [formGroup]=\"filterFormGroup\" class=\"filter-form\" fxLayout=\"row\">\n            <mat-form-field appearance=\"outline\" class=\"nil-subscript-wrappe fl-md\">\n                <mat-label>Search</mat-label>\n                <input type=\"text\" matInput formControlName=\"search\" placeholder=\"Search..\" name=\"search\"\n                    autocomplete=\"off\" />\n                <button *ngIf=\"filterFormGroup.get('search').value\" matSuffix mat-icon-button\n                    (click)=\"filterFormGroup.get('search').setValue('')\">\n                    <mat-icon>close</mat-icon>\n                </button>\n            </mat-form-field>\n        </form>\n    </mat-card>\n    <mat-card appearance=\"outlined\" class=\"p-0 mt-2\">\n        <table mat-table matSort [dataSource]=\"models\" class=\"w-100\" infiniteScroll [infiniteScrollDistance]=\"2\"\n            [infiniteScrollThrottle]=\"50\" (scrolled)=\"onScroll()\" (matSortChange)=\"sortColumn($event)\">\n\n            <ng-container matColumnDef=\"index\">\n                <th mat-header-cell *matHeaderCellDef> # </th>\n                <td mat-cell *matCellDef=\"let subscriptionPackage; let i = index\"> {{ i+1 }} </td>\n            </ng-container>\n\n            <ng-container matColumnDef=\"title\">\n                <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear> Title </th>\n                <td mat-cell *matCellDef=\"let subscriptionPackage\">\n                    <span>{{subscriptionPackage?.title }}</span>\n                </td>\n            </ng-container>\n\n            <ng-container matColumnDef=\"code\">\n                <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear> Code </th>\n                <td mat-cell *matCellDef=\"let subscriptionPackage\">\n                    <span>{{subscriptionPackage?.code }}</span>\n                </td>\n            </ng-container>\n\n            <ng-container matColumnDef=\"description\">\n                <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear class=\"w-description\"> Description\n                </th>\n                <td mat-cell *matCellDef=\"let subscriptionPackage\">\n                    <span>{{subscriptionPackage?.description }}</span>\n                </td>\n            </ng-container>\n\n            <ng-container matColumnDef=\"tenants_count\">\n                <th mat-header-cell *matHeaderCellDef> Tenants </th>\n                <td mat-cell *matCellDef=\"let subscriptionPackage\">\n                    <span>{{subscriptionPackage?.tenants_count ?? 0 }} tenants</span>\n                </td>\n            </ng-container>\n\n            <ng-container matColumnDef=\"actions\">\n                <th mat-header-cell *matHeaderCellDef> Actions </th>\n                <td mat-cell *matCellDef=\"let subscriptionPackage\">\n                    <div class=\"text-secondary\" fxLayout fxLayoutAlign=\"start center\">\n                        <app-techlify-icon name=\"view\" class=\"clickable\" matTooltip=\"View\"\n                            (click)=\"navigateToView(subscriptionPackage)\"></app-techlify-icon>\n                        <mat-slide-toggle style=\"transform: scale(0.8);\" [checked]=\"subscriptionPackage?.is_enabled\"\n                            color=\"primary\" (change)=\"confirmToggle($event,subscriptionPackage)\">Is Enabled\n                        </mat-slide-toggle>\n                    </div>\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    </mat-card>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.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$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", 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.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$1.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: i11.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i11.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i9.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i9.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i9.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i9.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i9.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i9.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i9.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i9.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i9.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i9.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i5.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i8$5.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { 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: i6$1.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: TechlifyIconComponent, selector: "app-techlify-icon", inputs: ["name", "size"] }] }); }
 };
 SubscriptionPackageListingComponent = __decorate([
     UntilDestroy()
@@ -14449,13 +14449,13 @@ class SubscriptionPackageViewComponent {
             this.subscriptionPackage = res?.item;
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SubscriptionPackageViewComponent, deps: [{ token: SubscriptionPackageService }, { token: i1$1.ActivatedRoute }, { token: i3.Location }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SubscriptionPackageViewComponent, selector: "app-subscription-package-view", ngImport: i0, template: "<div fxLayout=\"column\" class=\"m-2\">\n    <mat-card appearance=\"outlined\" fxLayout fxLayoutAlign=\"start center\">\n        <h5 class=\"m-0\">Package: {{subscriptionPackage?.title}}</h5>\n    </mat-card>\n    <div fxLayout>\n        <mat-card appearance=\"outlined\" class=\"side-panel mt-2\" fxLayout=\"column\" fxLayoutGap=\"0.5rem\">\n            <h5>Information</h5>\n            <div>\n                Title: <span class=\"text-secondary\">{{subscriptionPackage?.title}}</span>\n            </div>\n            <div>\n                Code: <span class=\"text-secondary\">{{subscriptionPackage?.code}}</span>\n            </div>\n            <div>\n                Description: <span class=\"text-secondary\">{{subscriptionPackage?.description}}</span>\n            </div>\n            <div>\n                Tenants: <span class=\"text-secondary\">{{subscriptionPackage?.tenants_count ?? 0}} tenants</span>\n            </div>\n        </mat-card>\n        <div fxFlex class=\"ml-2\">\n            <app-subscription-listing class=\"w-100\" [subscriptionPackage]=\"subscriptionPackage\"\n                *ngIf=\"subscriptionPackage\"></app-subscription-listing>\n        </div>\n    </div>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SubscriptionListingComponent, selector: "app-subscription-listing", inputs: ["subscriptionPackage"] }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { 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"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SubscriptionPackageViewComponent, deps: [{ token: SubscriptionPackageService }, { token: i1$1.ActivatedRoute }, { token: i2$1.Location }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SubscriptionPackageViewComponent, selector: "app-subscription-package-view", ngImport: i0, template: "<div fxLayout=\"column\" class=\"m-2\">\n    <mat-card appearance=\"outlined\" fxLayout fxLayoutAlign=\"start center\">\n        <h5 class=\"m-0\">Package: {{subscriptionPackage?.title}}</h5>\n    </mat-card>\n    <div fxLayout>\n        <mat-card appearance=\"outlined\" class=\"side-panel mt-2\" fxLayout=\"column\" fxLayoutGap=\"0.5rem\">\n            <h5>Information</h5>\n            <div>\n                Title: <span class=\"text-secondary\">{{subscriptionPackage?.title}}</span>\n            </div>\n            <div>\n                Code: <span class=\"text-secondary\">{{subscriptionPackage?.code}}</span>\n            </div>\n            <div>\n                Description: <span class=\"text-secondary\">{{subscriptionPackage?.description}}</span>\n            </div>\n            <div>\n                Tenants: <span class=\"text-secondary\">{{subscriptionPackage?.tenants_count ?? 0}} tenants</span>\n            </div>\n        </mat-card>\n        <div fxFlex class=\"ml-2\">\n            <app-subscription-listing class=\"w-100\" [subscriptionPackage]=\"subscriptionPackage\"\n                *ngIf=\"subscriptionPackage\"></app-subscription-listing>\n        </div>\n    </div>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SubscriptionListingComponent, selector: "app-subscription-listing", inputs: ["subscriptionPackage"] }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SubscriptionPackageViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-subscription-package-view', template: "<div fxLayout=\"column\" class=\"m-2\">\n    <mat-card appearance=\"outlined\" fxLayout fxLayoutAlign=\"start center\">\n        <h5 class=\"m-0\">Package: {{subscriptionPackage?.title}}</h5>\n    </mat-card>\n    <div fxLayout>\n        <mat-card appearance=\"outlined\" class=\"side-panel mt-2\" fxLayout=\"column\" fxLayoutGap=\"0.5rem\">\n            <h5>Information</h5>\n            <div>\n                Title: <span class=\"text-secondary\">{{subscriptionPackage?.title}}</span>\n            </div>\n            <div>\n                Code: <span class=\"text-secondary\">{{subscriptionPackage?.code}}</span>\n            </div>\n            <div>\n                Description: <span class=\"text-secondary\">{{subscriptionPackage?.description}}</span>\n            </div>\n            <div>\n                Tenants: <span class=\"text-secondary\">{{subscriptionPackage?.tenants_count ?? 0}} tenants</span>\n            </div>\n        </mat-card>\n        <div fxFlex class=\"ml-2\">\n            <app-subscription-listing class=\"w-100\" [subscriptionPackage]=\"subscriptionPackage\"\n                *ngIf=\"subscriptionPackage\"></app-subscription-listing>\n        </div>\n    </div>\n</div>" }]
-        }], ctorParameters: () => [{ type: SubscriptionPackageService }, { type: i1$1.ActivatedRoute }, { type: i3.Location }] });
+        }], ctorParameters: () => [{ type: SubscriptionPackageService }, { type: i1$1.ActivatedRoute }, { type: i2$1.Location }] });
 
 const routes$2 = [
     {
@@ -14581,9 +14581,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
         }], ctorParameters: () => [{ type: HttpService }] });
 
 class TimelineActivityListComponent extends TechlifyListingControllerInterface {
-    constructor(timelineActivityService) {
+    constructor(timelineActivityService, datePipe) {
         super();
         this.timelineActivityService = timelineActivityService;
+        this.datePipe = datePipe;
         this.timelineableDisplayField = 'title';
         this.scrollContainer = null;
         this.title = null;
@@ -14598,6 +14599,22 @@ class TimelineActivityListComponent extends TechlifyListingControllerInterface {
     ngOnInit() {
         this.loadData();
     }
+    blockTyping(event) {
+        event.preventDefault();
+    }
+    onInlineEdit(timeline, field, event) {
+        const input = event.target;
+        const newValue = input.value;
+        const model = JSON.parse(JSON.stringify(timeline));
+        model[field] = newValue;
+        if (field == 'date') {
+            model.date = this.datePipe.transform(model?.date, 'yyyy-MM-dd');
+        }
+        this.isWorking = true;
+        this.timelineActivityService.update(model)
+            .pipe(finalize$1(() => this.isWorking = false))
+            .subscribe((res) => timeline = res?.item);
+    }
     loadData() {
         const params = {
             page: this.page,
@@ -14618,13 +14635,13 @@ class TimelineActivityListComponent extends TechlifyListingControllerInterface {
             error: () => (this.isWorking = false)
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TimelineActivityListComponent, deps: [{ token: TimelineActivityService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TimelineActivityListComponent, selector: "app-timeline-activity-list", inputs: { changeableType: "changeableType", changeableId: "changeableId", timelineableType: "timelineableType", timelineableId: "timelineableId", timelineableDisplayField: "timelineableDisplayField", scrollContainer: "scrollContainer", title: "title" }, usesInheritance: true, ngImport: i0, template: "<div fxLayout=\"column\">\n  <div fxLayout class=\"mb-4\">\n    <h5 class=\"m-0\">\n      {{ title ?? 'Timeline of changes for {{this.changeableType}}: {{this.changeableId}}' }}\n    </h5>\n  </div>\n\n  <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isWorking\"></mat-progress-bar>\n  <table mat-table [dataSource]=\"models\" matSort class=\"w-100\" infiniteScroll [infiniteScrollDistance]=\"2\"\n    [infiniteScrollThrottle]=\"50\" [infiniteScrollContainer]=\"scrollContainer\" (scrolled)=\"onScroll()\" [fromRoot]=\"true\">\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=\"date\">\n      <th mat-header-cell *matHeaderCellDef> Date </th>\n      <td mat-cell *matCellDef=\"let timeline\">\n        {{timeline?.date | date:'mediumDate'}}\n      </td>\n    </ng-container>\n\n    <ng-container matColumnDef=\"details\">\n      <th mat-header-cell *matHeaderCellDef> Details </th>\n      <td mat-cell *matCellDef=\"let timeline\">\n        {{timeline?.details}}\n      </td>\n    </ng-container>\n\n    <ng-container matColumnDef=\"change\">\n      <th mat-header-cell *matHeaderCellDef> Change </th>\n      <td mat-cell *matCellDef=\"let timeline\">\n        {{timeline?.timelineable?.[this.timelineableDisplayField]}}\n      </td>\n    </ng-container>\n\n    <ng-container matColumnDef=\"creator\">\n      <th mat-header-cell *matHeaderCellDef> Creator </th>\n      <td mat-cell *matCellDef=\"let element\">\n        <div>\n          <div>{{element?.creator?.name }}</div>\n          <div *ngIf=\"element?.created_at\" class=\"text-secondary\"><small>{{element?.created_at |\n              date:'medium'}}</small></div>\n        </div>\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</div>", 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: "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: i11.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i9.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i9.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i9.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i9.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i9.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i9.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i9.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i9.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i9.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i9.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i5.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i6$1.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 { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TimelineActivityListComponent, deps: [{ token: TimelineActivityService }, { token: i2$1.DatePipe }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TimelineActivityListComponent, selector: "app-timeline-activity-list", inputs: { changeableType: "changeableType", changeableId: "changeableId", timelineableType: "timelineableType", timelineableId: "timelineableId", timelineableDisplayField: "timelineableDisplayField", scrollContainer: "scrollContainer", title: "title" }, usesInheritance: true, ngImport: i0, template: "<div fxLayout=\"column\">\n  <div fxLayout class=\"mb-4\">\n    <h5 class=\"m-0\">\n      {{ title ?? 'Timeline of changes for {{this.changeableType}}: {{this.changeableId}}' }}\n    </h5>\n  </div>\n\n  <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isWorking\"></mat-progress-bar>\n  <table mat-table [dataSource]=\"models\" matSort class=\"w-100\" infiniteScroll [infiniteScrollDistance]=\"2\"\n    [infiniteScrollThrottle]=\"50\" [infiniteScrollContainer]=\"scrollContainer\" (scrolled)=\"onScroll()\" [fromRoot]=\"true\">\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=\"date\">\n      <th mat-header-cell *matHeaderCellDef> Date </th>\n      <td mat-cell *matCellDef=\"let timeline\">\n        <input class=\"timeline-edit-input\" matInput type=\"date\" [value]=\"timeline?.date | date:'yyyy-MM-dd'\"\n          (keydown)=\"blockTyping($event)\" (change)=\"onInlineEdit(timeline, 'date', $event)\" />\n      </td>\n    </ng-container>\n\n    <ng-container matColumnDef=\"details\">\n      <th mat-header-cell *matHeaderCellDef> Details </th>\n      <td mat-cell *matCellDef=\"let timeline\">\n        <input class=\"timeline-edit-input\" matInput [value]=\"timeline?.details\"\n          (blur)=\"onInlineEdit(timeline, 'details', $event)\" />\n      </td>\n    </ng-container>\n\n    <ng-container matColumnDef=\"change\">\n      <th mat-header-cell *matHeaderCellDef> Change </th>\n      <td mat-cell *matCellDef=\"let timeline\">\n        {{timeline?.timelineable?.[this.timelineableDisplayField]}}\n      </td>\n    </ng-container>\n\n    <ng-container matColumnDef=\"creator\">\n      <th mat-header-cell *matHeaderCellDef> Creator </th>\n      <td mat-cell *matCellDef=\"let element\">\n        <div>\n          <div>{{element?.creator?.name }}</div>\n          <div *ngIf=\"element?.created_at\" class=\"text-secondary\"><small>{{element?.created_at |\n              date:'medium'}}</small></div>\n        </div>\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</div>", 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}.timeline-edit-input{border:none;background:#f5f5f5;padding:4px 2px;transition:all .2s ease;outline:none}.timeline-edit-input:focus{background:#f5f5f5;border-radius:4px;padding:4px 8px;border:1px solid #ddd}\n"], dependencies: [{ kind: "directive", type: i2$1.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: i9$1.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: i11.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i9.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i9.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i9.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i9.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i9.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i9.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i9.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i9.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i9.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i9.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i5.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i6$1.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: i2$1.DatePipe, name: "date" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TimelineActivityListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-timeline-activity-list', template: "<div fxLayout=\"column\">\n  <div fxLayout class=\"mb-4\">\n    <h5 class=\"m-0\">\n      {{ title ?? 'Timeline of changes for {{this.changeableType}}: {{this.changeableId}}' }}\n    </h5>\n  </div>\n\n  <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isWorking\"></mat-progress-bar>\n  <table mat-table [dataSource]=\"models\" matSort class=\"w-100\" infiniteScroll [infiniteScrollDistance]=\"2\"\n    [infiniteScrollThrottle]=\"50\" [infiniteScrollContainer]=\"scrollContainer\" (scrolled)=\"onScroll()\" [fromRoot]=\"true\">\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=\"date\">\n      <th mat-header-cell *matHeaderCellDef> Date </th>\n      <td mat-cell *matCellDef=\"let timeline\">\n        {{timeline?.date | date:'mediumDate'}}\n      </td>\n    </ng-container>\n\n    <ng-container matColumnDef=\"details\">\n      <th mat-header-cell *matHeaderCellDef> Details </th>\n      <td mat-cell *matCellDef=\"let timeline\">\n        {{timeline?.details}}\n      </td>\n    </ng-container>\n\n    <ng-container matColumnDef=\"change\">\n      <th mat-header-cell *matHeaderCellDef> Change </th>\n      <td mat-cell *matCellDef=\"let timeline\">\n        {{timeline?.timelineable?.[this.timelineableDisplayField]}}\n      </td>\n    </ng-container>\n\n    <ng-container matColumnDef=\"creator\">\n      <th mat-header-cell *matHeaderCellDef> Creator </th>\n      <td mat-cell *matCellDef=\"let element\">\n        <div>\n          <div>{{element?.creator?.name }}</div>\n          <div *ngIf=\"element?.created_at\" class=\"text-secondary\"><small>{{element?.created_at |\n              date:'medium'}}</small></div>\n        </div>\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</div>", 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"] }]
-        }], ctorParameters: () => [{ type: TimelineActivityService }], propDecorators: { changeableType: [{
+            args: [{ selector: 'app-timeline-activity-list', template: "<div fxLayout=\"column\">\n  <div fxLayout class=\"mb-4\">\n    <h5 class=\"m-0\">\n      {{ title ?? 'Timeline of changes for {{this.changeableType}}: {{this.changeableId}}' }}\n    </h5>\n  </div>\n\n  <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isWorking\"></mat-progress-bar>\n  <table mat-table [dataSource]=\"models\" matSort class=\"w-100\" infiniteScroll [infiniteScrollDistance]=\"2\"\n    [infiniteScrollThrottle]=\"50\" [infiniteScrollContainer]=\"scrollContainer\" (scrolled)=\"onScroll()\" [fromRoot]=\"true\">\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=\"date\">\n      <th mat-header-cell *matHeaderCellDef> Date </th>\n      <td mat-cell *matCellDef=\"let timeline\">\n        <input class=\"timeline-edit-input\" matInput type=\"date\" [value]=\"timeline?.date | date:'yyyy-MM-dd'\"\n          (keydown)=\"blockTyping($event)\" (change)=\"onInlineEdit(timeline, 'date', $event)\" />\n      </td>\n    </ng-container>\n\n    <ng-container matColumnDef=\"details\">\n      <th mat-header-cell *matHeaderCellDef> Details </th>\n      <td mat-cell *matCellDef=\"let timeline\">\n        <input class=\"timeline-edit-input\" matInput [value]=\"timeline?.details\"\n          (blur)=\"onInlineEdit(timeline, 'details', $event)\" />\n      </td>\n    </ng-container>\n\n    <ng-container matColumnDef=\"change\">\n      <th mat-header-cell *matHeaderCellDef> Change </th>\n      <td mat-cell *matCellDef=\"let timeline\">\n        {{timeline?.timelineable?.[this.timelineableDisplayField]}}\n      </td>\n    </ng-container>\n\n    <ng-container matColumnDef=\"creator\">\n      <th mat-header-cell *matHeaderCellDef> Creator </th>\n      <td mat-cell *matCellDef=\"let element\">\n        <div>\n          <div>{{element?.creator?.name }}</div>\n          <div *ngIf=\"element?.created_at\" class=\"text-secondary\"><small>{{element?.created_at |\n              date:'medium'}}</small></div>\n        </div>\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</div>", 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}.timeline-edit-input{border:none;background:#f5f5f5;padding:4px 2px;transition:all .2s ease;outline:none}.timeline-edit-input:focus{background:#f5f5f5;border-radius:4px;padding:4px 8px;border:1px solid #ddd}\n"] }]
+        }], ctorParameters: () => [{ type: TimelineActivityService }, { type: i2$1.DatePipe }], propDecorators: { changeableType: [{
                 type: Input
             }], changeableId: [{
                 type: Input
@@ -14766,5 +14783,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AccessControlConfigModule, ActionPopup, ActionPopupComponent, ActionPopupModule, AlertService, ApiPrefixInterceptor, AppAdminHomeComponent, AppAdminModule, AppAdminUserViewComponent, AppAdminUserViewModule, AuditLogForModelComponent, AuditLogForModelModule, AuditLogForModelRoutingModule, AuditLogListComponent, AuditLogListFilterComponent, AuditLogListFilterModule, AuditLogListFilterRoutingModule, AuditLogListModule, AuditLogListRoutingModule, AuditLogModule, AuditLogRoutingModule, AuditLogViewComponent, AuditLogViewModelComponent, AuditLogViewModelModule, AuditLogViewModelRoutingModule, AuditLogViewModule, AuditLogViewRoutingModule, AuditLogsViewModelComponent, AuditLogsViewModelModule, AuditLogsViewModelRoutingModule, AuthenticationGuard, AuthenticationService, CacheInterceptor, ChangePasswordModule, ClientService, ColumnConfig, ColumnSelectorComponent, ColumnSelectorModule, CommentFormComponent, CompanyInfoDisplayComponent, CompanyInformationComponent, ConfigService, CoreModule, CredentialsService, CurrentUserService, CustomIconComponent, CustomIconModule, 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, EnvironmentService, 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, LoginFormFieldsComponent, LoginHistoryForUserComponent, LoginHistoryForUserModule, LoginHistoryForUserRoutingModule, LoginModule, LoginRoutingModule, MaterialModule, MultiUserConfig, NgxTechlifyUsersModule, NoteFormComponent, NoteListComponent, NoteModule, NumItemsSelector, NumberInputButtonComponent, NumberInputButtonModule, NumberSelector, PageEvent, PdfButtonComponent, PdfButtonModule, Permission, PermissionModule, PermissionRoutingProvider, PermissionsManagementComponent, ProfileEditComponent, ProfileModule, ProfileRoutingModule, ReadMoreComponent, ReadMoreModule, RequestHelperService, ResetPasswordComponent, ResetPasswordModule, ResetPasswordRoutingModule, ResetPasswordService, RestrictorTypeSelectorComponent, RestrictorTypeSelectorModule, RestrictorsModule, Role, RoleFormButtonComponent, RoleFormComponent, RoleModule, RoleRoutingProvider, RoleService, RolesViewAllComponent, RouteReusableStrategy, SearchableSelectorComponent, SearchableSelectorModule, SignUpComponent, SignupModule, SignupRoutingModule, SnackModule, StorageService, SubscriptionFormComponent, SubscriptionFormModule, SubscriptionListingComponent, SubscriptionListingModule, SubscriptionPackageListingComponent, SubscriptionPackageListingModule, SubscriptionPackageViewComponent, SubscriptionPackageViewModule, SubscriptionService, SuccessSnackComponent, TechlifyAppSelectorComponent, TechlifyAppSelectorModule, TechlifyCompanySwitcherComponent, TechlifyCompanySwitcherModule, TechlifyConfig, TechlifyFeatureDirectiveModule, TechlifyFeatureEnabledDirective, TechlifyFeatureListingComponent, TechlifyFeatureModule, TechlifyFeatureRoutes, TechlifyFeatureService, TechlifyFormComponentInterface, TechlifyIconComponent, TechlifyIconModule, TechlifyListingControllerInterface, TechlifyNotificationForUserComponent, TechlifyNotificationForUserModule, TechlifyNotificationForUserRoutingModule, TechlifyNotificationModule, TechlifyNotificationRoutingModule, TechlifyServiceBaseClass, TechlifySubscriptionDirective, TechlifySubscriptionDirectiveModule, TechlifyTaggerTagFormConfigModel, TechlifyTaggerTagFormFieldComponent, TechlifyTaggerTagFormFieldModule, TechlifyTaggerTagSelectorComponent, TechlifyTaggerTagSelectorModule, TechlifyUpdateHistoryModule, TechlifyUpdateModule, TechlifyUpdateService, TechlifyUpdatesTeaserComponent, TechlifyUpdatesTeaserModule, TenantFormButtonComponent, TenantListWidgetComponent, Timeline, TimelineActivityButtonComponent, TimelineActivityButtonModule, TimelineFilterComponent, TimelineFilterModule, TokenInterceptor, UpdateNotifierComponent, UpdateNotifierModule, User, UserClientEnableDisableButtonComponent, UserClientEnableDisableButtonModule, UserClientsListComponent, UserClientsListModule, UserConfig, UserConfigService, UserDataService, UserEnableButtonComponent, UserEnableButtonModule, UserExploreComponent, UserFormComponent, UserListPageConfig, UserMenuComponent, UserMenuModule, UserModule, UserRoutingProvider, UserSelectorComponent, UserSelectorModule, UserService, UserSessionsComponent, UserSessionsModule, UserViewComponent, UsersViewAllComponent, UtilityModule, ViewerConfig, WrapPipe, calculateTimeline, esfur, estlr, esulr };
+export { AccessControlConfigModule, ActionPopup, ActionPopupComponent, ActionPopupModule, AlertService, ApiPrefixInterceptor, AppAdminHomeComponent, AppAdminModule, AppAdminUserViewComponent, AppAdminUserViewModule, AuditLogForModelComponent, AuditLogForModelModule, AuditLogForModelRoutingModule, AuditLogListComponent, AuditLogListFilterComponent, AuditLogListFilterModule, AuditLogListFilterRoutingModule, AuditLogListModule, AuditLogListRoutingModule, AuditLogModule, AuditLogRoutingModule, AuditLogViewComponent, AuditLogViewModelComponent, AuditLogViewModelModule, AuditLogViewModelRoutingModule, AuditLogViewModule, AuditLogViewRoutingModule, AuditLogsViewModelComponent, AuditLogsViewModelModule, AuditLogsViewModelRoutingModule, AuthenticationGuard, AuthenticationService, CacheInterceptor, ChangePasswordModule, ClientService, ColumnConfig, ColumnSelectorComponent, ColumnSelectorModule, CommentFormComponent, CompanyInfoDisplayComponent, CompanyInformationComponent, ConfigService, CoreModule, CredentialsService, CurrentUserService, CustomIconComponent, CustomIconModule, 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, EnvironmentService, 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, LoginFormFieldsComponent, LoginHistoryForUserComponent, LoginHistoryForUserModule, LoginHistoryForUserRoutingModule, LoginModule, LoginRoutingModule, MaterialModule, MultiUserConfig, NgxTechlifyUsersModule, NoteFormComponent, NoteListComponent, NoteModule, NumItemsSelector, NumberInputButtonComponent, NumberInputButtonModule, NumberSelector, PageEvent, PdfButtonComponent, PdfButtonModule, Permission, PermissionModule, PermissionRoutingProvider, PermissionsManagementComponent, ProfileEditComponent, ProfileModule, ProfileRoutingModule, ReadMoreComponent, ReadMoreModule, RequestHelperService, ResetPasswordComponent, ResetPasswordModule, ResetPasswordRoutingModule, ResetPasswordService, RestrictorTypeSelectorComponent, RestrictorTypeSelectorModule, RestrictorsModule, Role, RoleFormButtonComponent, RoleFormComponent, RoleModule, RoleRoutingProvider, RoleService, RolesViewAllComponent, RouteReusableStrategy, SearchableSelectorComponent, SearchableSelectorModule, SignUpComponent, SignupModule, SignupRoutingModule, SnackModule, StorageService, SubscriptionFormComponent, SubscriptionFormModule, SubscriptionListingComponent, SubscriptionListingModule, SubscriptionPackageListingComponent, SubscriptionPackageListingModule, SubscriptionPackageViewComponent, SubscriptionPackageViewModule, SubscriptionService, SuccessSnackComponent, TechlifyAppSelectorComponent, TechlifyAppSelectorModule, TechlifyCompanySwitcherComponent, TechlifyCompanySwitcherModule, TechlifyConfig, TechlifyFeatureDirectiveModule, TechlifyFeatureEnabledDirective, TechlifyFeatureListingComponent, TechlifyFeatureModule, TechlifyFeatureRoutes, TechlifyFeatureService, TechlifyFormComponentInterface, TechlifyIconComponent, TechlifyIconModule, TechlifyListingControllerInterface, TechlifyNotificationForUserComponent, TechlifyNotificationForUserModule, TechlifyNotificationForUserRoutingModule, TechlifyNotificationModule, TechlifyNotificationRoutingModule, TechlifyServiceBaseClass, TechlifySubscriptionDirective, TechlifySubscriptionDirectiveModule, TechlifyTaggerTagFormConfigModel, TechlifyTaggerTagFormFieldComponent, TechlifyTaggerTagFormFieldModule, TechlifyTaggerTagSelectorComponent, TechlifyTaggerTagSelectorModule, TechlifyUpdateHistoryModule, TechlifyUpdateModule, TechlifyUpdateService, TechlifyUpdatesTeaserComponent, TechlifyUpdatesTeaserModule, TenantFormButtonComponent, TenantListWidgetComponent, Timeline, TimelineActivityButtonComponent, TimelineActivityButtonModule, TimelineActivityListComponent, TimelineActivityListModule, TimelineFilterComponent, TimelineFilterModule, TokenInterceptor, UpdateNotifierComponent, UpdateNotifierModule, User, UserClientEnableDisableButtonComponent, UserClientEnableDisableButtonModule, UserClientsListComponent, UserClientsListModule, UserConfig, UserConfigService, UserDataService, UserEnableButtonComponent, UserEnableButtonModule, UserExploreComponent, UserFormComponent, UserListPageConfig, UserMenuComponent, UserMenuModule, UserModule, UserRoutingProvider, UserSelectorComponent, UserSelectorModule, UserService, UserSessionsComponent, UserSessionsModule, UserViewComponent, UsersViewAllComponent, UtilityModule, ViewerConfig, WrapPipe, calculateTimeline, esfur, estlr, esulr };
 //# sourceMappingURL=ngx-techlify-core.mjs.map