npm - ngx-techlify-core - Versions diffs - 18.85.0 → 18.87.0 - Mend

ngx-techlify-core 18.85.0 → 18.87.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (12) hide show

package/fesm2022/ngx-techlify-core.mjs CHANGED Viewed

@@ -1,10 +1,10 @@
 import * as i0 from '@angular/core';
-import { Component, Inject, Injectable, EventEmitter, inject, Directive, Optional, Input, Output, ViewChild, InjectionToken, Self, NgModule, input, output, Pipe, signal, SkipSelf, ViewEncapsulation, forwardRef, numberAttribute, computed, booleanAttribute, ContentChild } from '@angular/core';
+import { Component, Inject, Injectable, EventEmitter, inject, Directive, Optional, Input, Output, ViewChild, InjectionToken, Self, NgModule, input, output, Pipe, signal, SkipSelf, ViewEncapsulation, forwardRef, numberAttribute, computed, booleanAttribute, effect, ContentChild } from '@angular/core';
 import * as i1 from '@angular/material/dialog';
 import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
 import * as i6 from '@angular/material/button';
 import { MatButtonModule, MatButton } from '@angular/material/button';
-import { finalize, of, map, throwError, Observable, Subject, BehaviorSubject, Subscription, from, tap, debounceTime as debounceTime$1, distinctUntilChanged as distinctUntilChanged$1, startWith as startWith$1, switchMap as switchMap$1 } from 'rxjs';
+import { finalize, of, map, throwError, Observable, Subject, BehaviorSubject, Subscription, from, tap, debounceTime as debounceTime$1, distinctUntilChanged as distinctUntilChanged$1, takeUntil, startWith as startWith$1, switchMap as switchMap$1 } from 'rxjs';
 import * as i1$1 from '@angular/material/snack-bar';
 import { MAT_SNACK_BAR_DATA, MatSnackBarModule } from '@angular/material/snack-bar';
 import * as i8 from '@angular/material/icon';
@@ -25,7 +25,7 @@ import * as i6$1 from '@angular/flex-layout/flex';
 import * as i2 from '@angular/flex-layout/extended';
 import * as i6$2 from 'ngx-infinite-scroll';
 import { InfiniteScrollDirective, InfiniteScrollModule } from 'ngx-infinite-scroll';
-import * as i6$3 from '@angular/material/checkbox';
+import * as i10 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import * as i5 from '@angular/material/menu';
 import { MatMenuModule, MatMenuTrigger, MatMenu, MatMenuItem } from '@angular/material/menu';
@@ -36,10 +36,10 @@ import { NgxDocViewerModule } from 'ngx-doc-viewer';
 import * as i4 from '@angular/material/card';
 import { MatCardModule, MatCardContent, MatCard, MatCardTitle } from '@angular/material/card';
 import * as i3$2 from '@angular/forms';
-import { UntypedFormControl, Validators, ReactiveFormsModule, FormsModule, NG_VALUE_ACCESSOR, FormControl } from '@angular/forms';
+import { UntypedFormControl, Validators, ReactiveFormsModule, FormsModule, NG_VALUE_ACCESSOR, FormControl, FormGroup } from '@angular/forms';
 import * as i1$3 from '@angular/common/http';
 import { HttpErrorResponse, HttpResponse, HttpClient, provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
-import * as i10 from '@angular/material/tooltip';
+import * as i10$1 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import * as i7$1 from '@angular/material/form-field';
 import { MAT_FORM_FIELD, MatFormFieldControl, MatFormFieldModule, MatFormField, MatLabel, MatError } from '@angular/material/form-field';
@@ -50,17 +50,17 @@ import { MatDatepickerModule } from '@angular/material/datepicker';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { ENTER, COMMA } from '@angular/cdk/keycodes';
 import * as i1$4 from '@angular/cdk/a11y';
-import * as i5$1 from '@angular/material/core';
+import * as i6$3 from '@angular/material/core';
 import { MatCommonModule, MatLineModule, MatNativeDateModule, MatOptionModule, MatPseudoCheckboxModule, MatRippleModule } from '@angular/material/core';
 import * as i7 from '@angular/material/chips';
 import { MatChipsModule } from '@angular/material/chips';
 import * as i8$1 from '@angular/material/autocomplete';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
-import * as i5$2 from 'ngx-permissions';
+import * as i5$1 from 'ngx-permissions';
 import { NgxPermissionsModule } from 'ngx-permissions';
 import * as i11$1 from '@angular/material/progress-bar';
 import { MatProgressBarModule, MatProgressBar } from '@angular/material/progress-bar';
-import * as i10$1 from '@angular/material/progress-spinner';
+import * as i10$2 from '@angular/material/progress-spinner';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import * as i9$1 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
@@ -1245,7 +1245,7 @@ let DataTableComponent = class DataTableComponent {
         //Until Destroy uses it.
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DataTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", 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: i6$1.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$2.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: i6$3.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.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5.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: i5.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i5.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: i12.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i12.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i13.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i13.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i13.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i13.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i13.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i13.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i13.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i13.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i13.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i13.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.14", 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: i6$1.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$2.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: i10.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.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5.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: i5.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i5.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: i12.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i12.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i13.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i13.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i13.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i13.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i13.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i13.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i13.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i13.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i13.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i13.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "pipe", type: i3.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i3.DatePipe, name: "date" }] }); }
 };
 DataTableComponent = DataTableComponent_1 = __decorate([
     UntilDestroy()
@@ -2106,7 +2106,7 @@ class FormConfigurationForFormComponent {
         this.router.navigate(['/form-configuration-field-form', this.formCode]);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FormConfigurationForFormComponent, deps: [{ token: i1$2.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FormConfigurationForFormComponent, selector: "app-form-configuration-for-form", inputs: { formCode: "formCode" }, ngImport: i0, template: "<mat-icon role='button' matTooltip=\"Form Configuration\" (click)=\"openForm()\">settings</mat-icon>", dependencies: [{ kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i10.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.14", type: FormConfigurationForFormComponent, selector: "app-form-configuration-for-form", inputs: { formCode: "formCode" }, ngImport: i0, template: "<mat-icon role='button' matTooltip=\"Form Configuration\" (click)=\"openForm()\">settings</mat-icon>", dependencies: [{ kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i10$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FormConfigurationForFormComponent, decorators: [{
             type: Component,
@@ -2459,7 +2459,7 @@ class TechlifyTaggerTagFormFieldComponent {
         this.subscriptions.forEach(subscription => subscription.unsubscribe());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TechlifyTaggerTagFormFieldComponent, deps: [{ token: i1$4.FocusMonitor }, { token: i0.ElementRef }, { token: HttpService }, { token: MAT_FORM_FIELD, optional: true }, { token: i3$2.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", 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.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i7.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i7.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i7.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i7.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "component", type: i8$1.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$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: i3$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", 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.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6$3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i7.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i7.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i7.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i7.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "component", type: i8$1.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$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: i3$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TechlifyTaggerTagFormFieldComponent, decorators: [{
             type: Component,
@@ -3777,7 +3777,7 @@ let TimelineFilterComponent = class TimelineFilterComponent {
                 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}.create-another .mat-mdc-checkbox label{margin:0!important}.create-another .mdc-checkbox{padding:0!important}.create-another .mdc-checkbox__background{position:relative;top:0;left:0}.mat-mdc-form-field.mat-form-field-disabled .mat-mdc-input-element{color:#555!important;-webkit-text-fill-color:#555555!important}.mat-mdc-form-field.mat-form-field-disabled .mat-mdc-select-value{color:#555!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: i6$1.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: i3$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i7$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i7$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i7$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i9$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i5$1.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.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i11.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i11.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i11.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}.create-another .mat-mdc-checkbox label{margin:0!important}.create-another .mdc-checkbox{padding:0!important}.create-another .mdc-checkbox__background{position:relative;top:0;left:0}.mat-mdc-form-field.mat-form-field-disabled .mat-mdc-input-element{color:#555!important;-webkit-text-fill-color:#555555!important}.mat-mdc-form-field.mat-form-field-disabled .mat-mdc-select-value{color:#555!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: i6$1.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: i3$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i7$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i7$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i7$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i9$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6$3.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.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i11.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i11.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i11.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "component", type: TechlifyIconComponent, selector: "app-techlify-icon", inputs: ["name", "size"] }] }); }
 };
 TimelineFilterComponent = TimelineFilterComponent_1 = __decorate([
     UntilDestroy()
@@ -3945,13 +3945,14 @@ class EntityFileListComponent extends TechlifyListComponent {
     get isFilterPatchFromRoute() {
         return this._isFilterPatchFromRoute;
     }
-    constructor(service, alertService, fb, errorHandler, permissionsService) {
+    constructor(service, alertService, fb, errorHandler, permissionsService, formConfigService) {
         super(service);
         this.service = service;
         this.alertService = alertService;
         this.fb = fb;
         this.errorHandler = errorHandler;
         this.permissionsService = permissionsService;
+        this.formConfigService = formConfigService;
         this.viewOnly = false;
         this.allowMultipleFiles = false;
         this.allowBulkUpdate = false;
@@ -3980,6 +3981,7 @@ class EntityFileListComponent extends TechlifyListComponent {
         this.isShowUpdateAction = true;
         this.isShowDeleteAction = true;
         this.isShowReadAction = true;
+        this.formConfigurationUtilityService = new FormConfigurationUtilityService();
         this.filterFormConfiguration = {
             tag_ids: { multiple: true }
         };
@@ -4049,6 +4051,13 @@ class EntityFileListComponent extends TechlifyListComponent {
         if (this.allowBulkUpdate) {
             this.displayedColumns.push('select');
         }
+        this.formConfigurationUtilityService.initialize(this.formConfigService, 'entity-file').subscribe({
+            next: () => {
+                if (!this.formConfigurationUtilityService.getFieldEnabled('expires_on')) {
+                    this.displayedColumns = this.displayedColumns.filter(x => x !== 'expires_on');
+                }
+            }
+        });
         const defaultFilters = this.defaultFilters();
         if (defaultFilters) {
             this.filterForm.patchValue(defaultFilters, { emitEvent: false });
@@ -4100,13 +4109,13 @@ class EntityFileListComponent extends TechlifyListComponent {
             this.isWorking = false;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: EntityFileListComponent, deps: [{ token: EntityFileService }, { token: AlertService }, { token: i3$2.UntypedFormBuilder }, { token: ErrorHandlerService }, { token: i5$2.NgxPermissionsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: EntityFileListComponent, selector: "app-entity-file-list, app-entity-files-view-all", inputs: { entityId: { classPropertyName: "entityId", publicName: "entityId", isSignal: false, isRequired: false, transformFunction: null }, entityType: { classPropertyName: "entityType", publicName: "entityType", isSignal: false, isRequired: false, transformFunction: null }, viewOnly: { classPropertyName: "viewOnly", publicName: "viewOnly", isSignal: false, isRequired: false, transformFunction: null }, removeSearch: { classPropertyName: "removeSearch", publicName: "removeSearch", isSignal: false, isRequired: false, transformFunction: null }, hideTitleAndDetails: { classPropertyName: "hideTitleAndDetails", publicName: "hideTitleAndDetails", isSignal: false, isRequired: false, transformFunction: null }, displayMode: { classPropertyName: "displayMode", publicName: "displayMode", isSignal: false, isRequired: false, transformFunction: null }, allowMultipleFiles: { classPropertyName: "allowMultipleFiles", publicName: "allowMultipleFiles", isSignal: false, isRequired: false, transformFunction: null }, allowBulkUpdate: { classPropertyName: "allowBulkUpdate", publicName: "allowBulkUpdate", isSignal: false, isRequired: false, transformFunction: null }, viewMode: { classPropertyName: "viewMode", publicName: "viewMode", isSignal: false, isRequired: false, transformFunction: null }, fileDropperHeight: { classPropertyName: "fileDropperHeight", publicName: "fileDropperHeight", isSignal: false, isRequired: false, transformFunction: null }, isShowDragDropSection: { classPropertyName: "isShowDragDropSection", publicName: "isShowDragDropSection", isSignal: false, isRequired: false, transformFunction: null }, defaultFilters: { classPropertyName: "defaultFilters", publicName: "defaultFilters", isSignal: true, isRequired: false, transformFunction: null }, isFilterPatchFromRoute: { classPropertyName: "isFilterPatchFromRoute", publicName: "isFilterPatchFromRoute", isSignal: false, isRequired: false, transformFunction: null }, useTechlifyTags: { classPropertyName: "useTechlifyTags", publicName: "useTechlifyTags", isSignal: false, isRequired: false, transformFunction: null }, techlifyTagCategories: { classPropertyName: "techlifyTagCategories", publicName: "techlifyTagCategories", isSignal: false, isRequired: false, transformFunction: null }, techlifyTagConfig: { classPropertyName: "techlifyTagConfig", publicName: "techlifyTagConfig", isSignal: false, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: false, isRequired: false, transformFunction: null }, permission: { classPropertyName: "permission", publicName: "permission", isSignal: false, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"viewMode === 'list'\">\n  <div *ngIf=\"this.selectedModelIds.length\" class=\"d-none d-md-flex flex-column\">\n    <mat-card class=\"update_card\" *ngIf=\"this.selectedModelIds.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 class=\"d-flex flex-column\">\n        <form [formGroup]=\"updateRowForm\">\n          <div class=\"d-flex flex-column\">\n\n            <mat-form-field class=\"w-100 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)=\"updateRowForm.get('title').setValue('')\">\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 class=\"w-100 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)=\"updateRowForm.get('details').setValue('')\">\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)=\"updateRowForm.get('tag_ids').setValue('')\">\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 class=\"d-flex flex-row gap-3\">\n        <div class=\"d-flex flex-column gap-2 flex-grow-1\">\n          <mat-card>\n            <mat-card-content>\n              <div class=\"d-flex gap-2 align-items-center\">\n                <mat-icon>\n                  description\n                </mat-icon>\n                <h3 class=\"font-weight-bold mb-0\">\n                  {{title}}s\n                </h3>\n                <app-techlify-form-button class=\"ms-2\" *ngIf=\"!viewOnly && isShowCreateAction && entityId\"\n                  [component]=\"entityFileForm()\" [data]=\"formData\"\n                  (saved)=\"modelCreated($event)\"></app-techlify-form-button>\n                <span class=\"flex-grow-1\"></span>\n                <form [formGroup]=\"filterForm\" class=\"d-flex gap-2\">\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=\"filterForm.get('title').value\" matSuffix mat-icon-button\n                      (click)=\"resetFilter('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                  <app-timeline-filter class=\"fl-sm\" formControlName='period_id' labelText=\"Expires On\"\n                    dateFrom=\"expires_on_from\" dateTo=\"expires_on_to\" [form]=\"filterForm\"></app-timeline-filter>\n                </form>\n              </div>\n            </mat-card-content>\n            <mat-card-content class=\"entity-file-card p-0\" *ngIf=\"entityId\">\n              <ng-container *ngTemplateOutlet=\"tableView\"></ng-container>\n            </mat-card-content>\n          </mat-card>\n\n          <mat-card *ngIf=\"!entityId\">\n            <mat-card-content class=\"entity-file-card p-0\">\n              <ng-container *ngTemplateOutlet=\"tableView\"></ng-container>\n            </mat-card-content>\n          </mat-card>\n        </div>\n        <ng-container *ngIf=\"isShowDragDropSection && entityId\">\n          <section style=\"flex: 0 1 30%;\" *ngIf=\"!this.selectedModelIds.length && !viewOnly && isShowCreateAction\">\n            <app-file-dropper [config]=\"fileConfig\" (fileChanged)=\"fileChanged($event)\">\n            </app-file-dropper>\n          </section>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n\n  <ng-template #tableView>\n    <table mat-table [dataSource]=\"models\" 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)=\"isSelectionModified($event, element)\"\n            [disabled]=\"!models.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      <ng-container matColumnDef=\"expires_on\">\n        <th mat-header-cell *matHeaderCellDef> Expires On </th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{element?.expires_on | date:'mediumDate'}}\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\">\n          <span *ngIf=\"element?.file_size\"> {{ element.file_size | fileSize }} </span>\n        </td>\n      </ng-container>\n\n      <!-- Uploaded On Column -->\n      <ng-container matColumnDef=\"uploaded_on\">\n        <th mat-header-cell *matHeaderCellDef> Uploaded On </th>\n        <td mat-cell *matCellDef=\"let element\">\n          <div>\n            {{element.created_at | date: 'mediumDate'}}\n          </div>\n          <div class=\"text-muted\" *ngIf=\"element.creator\">\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 class=\"d-flex flex-row gap-2 text-secondary align-items-center\">\n            <a href=\"{{element.url}}\" target=\"_blank\" class=\"text-decoration-none text-muted clickable\">\n              <mat-icon>download</mat-icon>\n            </a>\n            <app-techlify-form-button *ngIf=\"!viewOnly && isShowUpdateAction\" [component]=\"entityFileForm()\"\n              [model]=\"element\" [data]=\"formData\" (saved)=\"modelsUpdatedById($event)\"></app-techlify-form-button>\n            <app-techlify-delete-button *ngIf=\"!viewOnly && isShowDeleteAction\" [model]=\"element\" [service]=\"service\"\n              message=\"Are you sure to proceed delete the file {{element.title}}\"\n              (deleted)=\"modelsDeletedById(element)\">\n            </app-techlify-delete-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\n    <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isWorking\"></mat-progress-bar>\n  </ng-template>\n\n  <div class=\"d-flex flex-wrap gap-3 mat-typography p-4\" *ngIf=\"displayMode\">\n    <div *ngFor=\"let efile of models\">\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 mb-0\">\n        {{title}}s\n      </h3>\n      <app-techlify-form-button *ngIf=\"!viewOnly && isShowCreateAction\" [component]=\"entityFileForm()\" [data]=\"formData\"\n        (saved)=\"modelCreated($event)\"></app-techlify-form-button>\n    </div>\n  </mat-card-content>\n  <mat-card-content *ngIf=\"!this.selectedModelIds.length && !viewOnly && isShowCreateAction\" class=\"mt-3\">\n    <app-file-dropper [config]=\"fileConfig\" (fileChanged)=\"fileChanged($event)\">\n    </app-file-dropper>\n  </mat-card-content>\n\n  <mat-card-content class=\"mt-3\">\n    <div *ngFor=\"let entityFile of models\" 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\">{{ entityFile.file_size | fileSize }}</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          <app-techlify-form-button class=\"text-secondary\" *ngIf=\"!viewOnly && isShowUpdateAction\"\n            [component]=\"entityFileForm()\" [model]=\"entityFile\" [data]=\"formData\"\n            (saved)=\"modelsUpdatedById($event)\"></app-techlify-form-button>\n          <app-techlify-delete-button *ngIf=\"!viewOnly && isShowDeleteAction\" class='text-secondary ms-1'\n            [model]=\"entityFile\" [service]=\"service\"\n            message=\"Are you sure to proceed delete the file {{entityFile.title}}\"\n            (deleted)=\"modelsDeletedById(entityFile)\">\n          </app-techlify-delete-button>\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: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i6$2.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: i6$3.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$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i7$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i9.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i12.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i13.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i13.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i13.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i13.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i13.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i13.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i13.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i13.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i13.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i13.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: i11$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i3$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: TechlifyDeleteButtonComponent, selector: "app-techlify-delete-button", inputs: ["data", "model", "message", "service"], outputs: ["deleted"] }, { kind: "component", type: TimelineFilterComponent, selector: "app-timeline-filter", inputs: ["defaultValue", "required", "disabled", "value", "timelines", "dateFrom", "dateTo", "appearance", "showClearButton", "form", "labelText"], outputs: ["selectionChange"] }, { kind: "component", type: TechlifyFormButtonComponent, selector: "app-techlify-form-button", inputs: ["component", "model", "data", "width"], outputs: ["saved"] }, { 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: 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" }, { kind: "pipe", type: FileSizePipe, name: "fileSize" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: EntityFileListComponent, deps: [{ token: EntityFileService }, { token: AlertService }, { token: i3$2.UntypedFormBuilder }, { token: ErrorHandlerService }, { token: i5$1.NgxPermissionsService }, { token: FormConfigurationFormService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: EntityFileListComponent, selector: "app-entity-file-list, app-entity-files-view-all", inputs: { entityId: { classPropertyName: "entityId", publicName: "entityId", isSignal: false, isRequired: false, transformFunction: null }, entityType: { classPropertyName: "entityType", publicName: "entityType", isSignal: false, isRequired: false, transformFunction: null }, viewOnly: { classPropertyName: "viewOnly", publicName: "viewOnly", isSignal: false, isRequired: false, transformFunction: null }, removeSearch: { classPropertyName: "removeSearch", publicName: "removeSearch", isSignal: false, isRequired: false, transformFunction: null }, hideTitleAndDetails: { classPropertyName: "hideTitleAndDetails", publicName: "hideTitleAndDetails", isSignal: false, isRequired: false, transformFunction: null }, displayMode: { classPropertyName: "displayMode", publicName: "displayMode", isSignal: false, isRequired: false, transformFunction: null }, allowMultipleFiles: { classPropertyName: "allowMultipleFiles", publicName: "allowMultipleFiles", isSignal: false, isRequired: false, transformFunction: null }, allowBulkUpdate: { classPropertyName: "allowBulkUpdate", publicName: "allowBulkUpdate", isSignal: false, isRequired: false, transformFunction: null }, viewMode: { classPropertyName: "viewMode", publicName: "viewMode", isSignal: false, isRequired: false, transformFunction: null }, fileDropperHeight: { classPropertyName: "fileDropperHeight", publicName: "fileDropperHeight", isSignal: false, isRequired: false, transformFunction: null }, isShowDragDropSection: { classPropertyName: "isShowDragDropSection", publicName: "isShowDragDropSection", isSignal: false, isRequired: false, transformFunction: null }, defaultFilters: { classPropertyName: "defaultFilters", publicName: "defaultFilters", isSignal: true, isRequired: false, transformFunction: null }, isFilterPatchFromRoute: { classPropertyName: "isFilterPatchFromRoute", publicName: "isFilterPatchFromRoute", isSignal: false, isRequired: false, transformFunction: null }, useTechlifyTags: { classPropertyName: "useTechlifyTags", publicName: "useTechlifyTags", isSignal: false, isRequired: false, transformFunction: null }, techlifyTagCategories: { classPropertyName: "techlifyTagCategories", publicName: "techlifyTagCategories", isSignal: false, isRequired: false, transformFunction: null }, techlifyTagConfig: { classPropertyName: "techlifyTagConfig", publicName: "techlifyTagConfig", isSignal: false, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: false, isRequired: false, transformFunction: null }, permission: { classPropertyName: "permission", publicName: "permission", isSignal: false, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"viewMode === 'list'\">\n  <div *ngIf=\"this.selectedModelIds.length\" class=\"d-none d-md-flex flex-column\">\n    <mat-card class=\"update_card\" *ngIf=\"this.selectedModelIds.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 class=\"d-flex flex-column\">\n        <form [formGroup]=\"updateRowForm\">\n          <div class=\"d-flex flex-column\">\n\n            <mat-form-field class=\"w-100 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)=\"updateRowForm.get('title').setValue('')\">\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 class=\"w-100 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)=\"updateRowForm.get('details').setValue('')\">\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)=\"updateRowForm.get('tag_ids').setValue('')\">\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 class=\"d-flex flex-row gap-3\">\n        <div class=\"d-flex flex-column gap-2 flex-grow-1\">\n          <mat-card>\n            <mat-card-content>\n              <div class=\"d-flex gap-2 align-items-center\">\n                <mat-icon>\n                  description\n                </mat-icon>\n                <h3 class=\"font-weight-bold mb-0\">\n                  {{title}}s\n                </h3>\n                <app-techlify-form-button class=\"ms-2\" *ngIf=\"!viewOnly && isShowCreateAction && entityId\"\n                  [component]=\"entityFileForm()\" [data]=\"formData\"\n                  (saved)=\"modelCreated($event)\"></app-techlify-form-button>\n                <span class=\"flex-grow-1\"></span>\n                <form [formGroup]=\"filterForm\" class=\"d-flex gap-2\">\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=\"filterForm.get('title').value\" matSuffix mat-icon-button\n                      (click)=\"resetFilter('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                  <app-timeline-filter class=\"fl-sm\" formControlName='period_id' labelText=\"Expires On\"\n                    dateFrom=\"expires_on_from\" dateTo=\"expires_on_to\" [form]=\"filterForm\"></app-timeline-filter>\n                </form>\n              </div>\n            </mat-card-content>\n            <mat-card-content class=\"entity-file-card p-0\" *ngIf=\"entityId\">\n              <ng-container *ngTemplateOutlet=\"tableView\"></ng-container>\n            </mat-card-content>\n          </mat-card>\n\n          <mat-card *ngIf=\"!entityId\">\n            <mat-card-content class=\"entity-file-card p-0\">\n              <ng-container *ngTemplateOutlet=\"tableView\"></ng-container>\n            </mat-card-content>\n          </mat-card>\n        </div>\n        <ng-container *ngIf=\"isShowDragDropSection && entityId\">\n          <section style=\"flex: 0 1 30%;\" *ngIf=\"!this.selectedModelIds.length && !viewOnly && isShowCreateAction\">\n            <app-file-dropper [config]=\"fileConfig\" (fileChanged)=\"fileChanged($event)\">\n            </app-file-dropper>\n          </section>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n\n  <ng-template #tableView>\n    <table mat-table [dataSource]=\"models\" 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)=\"isSelectionModified($event, element)\"\n            [disabled]=\"!models.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      <ng-container matColumnDef=\"expires_on\">\n        <th mat-header-cell *matHeaderCellDef> Expires On </th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{element?.expires_on | date:'mediumDate'}}\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\">\n          <span *ngIf=\"element?.file_size\"> {{ element.file_size | fileSize }} </span>\n        </td>\n      </ng-container>\n\n      <!-- Uploaded On Column -->\n      <ng-container matColumnDef=\"uploaded_on\">\n        <th mat-header-cell *matHeaderCellDef> Uploaded On </th>\n        <td mat-cell *matCellDef=\"let element\">\n          <div>\n            {{element.created_at | date: 'mediumDate'}}\n          </div>\n          <div class=\"text-muted\" *ngIf=\"element.creator\">\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 class=\"d-flex flex-row gap-2 text-secondary align-items-center\">\n            <a href=\"{{element.url}}\" target=\"_blank\" class=\"text-decoration-none text-muted clickable\">\n              <mat-icon>download</mat-icon>\n            </a>\n            <app-techlify-form-button *ngIf=\"!viewOnly && isShowUpdateAction\" [component]=\"entityFileForm()\"\n              [model]=\"element\" [data]=\"formData\" (saved)=\"modelsUpdatedById($event)\"></app-techlify-form-button>\n            <app-techlify-delete-button *ngIf=\"!viewOnly && isShowDeleteAction\" [model]=\"element\" [service]=\"service\"\n              message=\"Are you sure to proceed delete the file {{element.title}}\"\n              (deleted)=\"modelsDeletedById(element)\">\n            </app-techlify-delete-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\n    <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isWorking\"></mat-progress-bar>\n  </ng-template>\n\n  <div class=\"d-flex flex-wrap gap-3 mat-typography p-4\" *ngIf=\"displayMode\">\n    <div *ngFor=\"let efile of models\">\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 mb-0\">\n        {{title}}s\n      </h3>\n      <app-techlify-form-button *ngIf=\"!viewOnly && isShowCreateAction\" [component]=\"entityFileForm()\" [data]=\"formData\"\n        (saved)=\"modelCreated($event)\"></app-techlify-form-button>\n    </div>\n  </mat-card-content>\n  <mat-card-content *ngIf=\"!this.selectedModelIds.length && !viewOnly && isShowCreateAction\" class=\"mt-3\">\n    <app-file-dropper [config]=\"fileConfig\" (fileChanged)=\"fileChanged($event)\">\n    </app-file-dropper>\n  </mat-card-content>\n\n  <mat-card-content class=\"mt-3\">\n    <div *ngFor=\"let entityFile of models\" 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\">{{ entityFile.file_size | fileSize }}</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          <app-techlify-form-button class=\"text-secondary\" *ngIf=\"!viewOnly && isShowUpdateAction\"\n            [component]=\"entityFileForm()\" [model]=\"entityFile\" [data]=\"formData\"\n            (saved)=\"modelsUpdatedById($event)\"></app-techlify-form-button>\n          <app-techlify-delete-button *ngIf=\"!viewOnly && isShowDeleteAction\" class='text-secondary ms-1'\n            [model]=\"entityFile\" [service]=\"service\"\n            message=\"Are you sure to proceed delete the file {{entityFile.title}}\"\n            (deleted)=\"modelsDeletedById(entityFile)\">\n          </app-techlify-delete-button>\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: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i6$2.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: i10.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$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i7$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i9.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i12.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i13.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i13.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i13.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i13.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i13.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i13.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i13.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i13.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i13.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i13.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: i11$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i3$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: TechlifyDeleteButtonComponent, selector: "app-techlify-delete-button", inputs: ["data", "model", "message", "service"], outputs: ["deleted"] }, { kind: "component", type: TimelineFilterComponent, selector: "app-timeline-filter", inputs: ["defaultValue", "required", "disabled", "value", "timelines", "dateFrom", "dateTo", "appearance", "showClearButton", "form", "labelText"], outputs: ["selectionChange"] }, { kind: "component", type: TechlifyFormButtonComponent, selector: "app-techlify-form-button", inputs: ["component", "model", "data", "width"], outputs: ["saved"] }, { 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: 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" }, { kind: "pipe", type: FileSizePipe, name: "fileSize" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: EntityFileListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-entity-file-list, app-entity-files-view-all', template: "<div *ngIf=\"viewMode === 'list'\">\n  <div *ngIf=\"this.selectedModelIds.length\" class=\"d-none d-md-flex flex-column\">\n    <mat-card class=\"update_card\" *ngIf=\"this.selectedModelIds.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 class=\"d-flex flex-column\">\n        <form [formGroup]=\"updateRowForm\">\n          <div class=\"d-flex flex-column\">\n\n            <mat-form-field class=\"w-100 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)=\"updateRowForm.get('title').setValue('')\">\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 class=\"w-100 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)=\"updateRowForm.get('details').setValue('')\">\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)=\"updateRowForm.get('tag_ids').setValue('')\">\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 class=\"d-flex flex-row gap-3\">\n        <div class=\"d-flex flex-column gap-2 flex-grow-1\">\n          <mat-card>\n            <mat-card-content>\n              <div class=\"d-flex gap-2 align-items-center\">\n                <mat-icon>\n                  description\n                </mat-icon>\n                <h3 class=\"font-weight-bold mb-0\">\n                  {{title}}s\n                </h3>\n                <app-techlify-form-button class=\"ms-2\" *ngIf=\"!viewOnly && isShowCreateAction && entityId\"\n                  [component]=\"entityFileForm()\" [data]=\"formData\"\n                  (saved)=\"modelCreated($event)\"></app-techlify-form-button>\n                <span class=\"flex-grow-1\"></span>\n                <form [formGroup]=\"filterForm\" class=\"d-flex gap-2\">\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=\"filterForm.get('title').value\" matSuffix mat-icon-button\n                      (click)=\"resetFilter('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                  <app-timeline-filter class=\"fl-sm\" formControlName='period_id' labelText=\"Expires On\"\n                    dateFrom=\"expires_on_from\" dateTo=\"expires_on_to\" [form]=\"filterForm\"></app-timeline-filter>\n                </form>\n              </div>\n            </mat-card-content>\n            <mat-card-content class=\"entity-file-card p-0\" *ngIf=\"entityId\">\n              <ng-container *ngTemplateOutlet=\"tableView\"></ng-container>\n            </mat-card-content>\n          </mat-card>\n\n          <mat-card *ngIf=\"!entityId\">\n            <mat-card-content class=\"entity-file-card p-0\">\n              <ng-container *ngTemplateOutlet=\"tableView\"></ng-container>\n            </mat-card-content>\n          </mat-card>\n        </div>\n        <ng-container *ngIf=\"isShowDragDropSection && entityId\">\n          <section style=\"flex: 0 1 30%;\" *ngIf=\"!this.selectedModelIds.length && !viewOnly && isShowCreateAction\">\n            <app-file-dropper [config]=\"fileConfig\" (fileChanged)=\"fileChanged($event)\">\n            </app-file-dropper>\n          </section>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n\n  <ng-template #tableView>\n    <table mat-table [dataSource]=\"models\" 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)=\"isSelectionModified($event, element)\"\n            [disabled]=\"!models.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      <ng-container matColumnDef=\"expires_on\">\n        <th mat-header-cell *matHeaderCellDef> Expires On </th>\n        <td mat-cell *matCellDef=\"let element\">\n          {{element?.expires_on | date:'mediumDate'}}\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\">\n          <span *ngIf=\"element?.file_size\"> {{ element.file_size | fileSize }} </span>\n        </td>\n      </ng-container>\n\n      <!-- Uploaded On Column -->\n      <ng-container matColumnDef=\"uploaded_on\">\n        <th mat-header-cell *matHeaderCellDef> Uploaded On </th>\n        <td mat-cell *matCellDef=\"let element\">\n          <div>\n            {{element.created_at | date: 'mediumDate'}}\n          </div>\n          <div class=\"text-muted\" *ngIf=\"element.creator\">\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 class=\"d-flex flex-row gap-2 text-secondary align-items-center\">\n            <a href=\"{{element.url}}\" target=\"_blank\" class=\"text-decoration-none text-muted clickable\">\n              <mat-icon>download</mat-icon>\n            </a>\n            <app-techlify-form-button *ngIf=\"!viewOnly && isShowUpdateAction\" [component]=\"entityFileForm()\"\n              [model]=\"element\" [data]=\"formData\" (saved)=\"modelsUpdatedById($event)\"></app-techlify-form-button>\n            <app-techlify-delete-button *ngIf=\"!viewOnly && isShowDeleteAction\" [model]=\"element\" [service]=\"service\"\n              message=\"Are you sure to proceed delete the file {{element.title}}\"\n              (deleted)=\"modelsDeletedById(element)\">\n            </app-techlify-delete-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\n    <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isWorking\"></mat-progress-bar>\n  </ng-template>\n\n  <div class=\"d-flex flex-wrap gap-3 mat-typography p-4\" *ngIf=\"displayMode\">\n    <div *ngFor=\"let efile of models\">\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 mb-0\">\n        {{title}}s\n      </h3>\n      <app-techlify-form-button *ngIf=\"!viewOnly && isShowCreateAction\" [component]=\"entityFileForm()\" [data]=\"formData\"\n        (saved)=\"modelCreated($event)\"></app-techlify-form-button>\n    </div>\n  </mat-card-content>\n  <mat-card-content *ngIf=\"!this.selectedModelIds.length && !viewOnly && isShowCreateAction\" class=\"mt-3\">\n    <app-file-dropper [config]=\"fileConfig\" (fileChanged)=\"fileChanged($event)\">\n    </app-file-dropper>\n  </mat-card-content>\n\n  <mat-card-content class=\"mt-3\">\n    <div *ngFor=\"let entityFile of models\" 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\">{{ entityFile.file_size | fileSize }}</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          <app-techlify-form-button class=\"text-secondary\" *ngIf=\"!viewOnly && isShowUpdateAction\"\n            [component]=\"entityFileForm()\" [model]=\"entityFile\" [data]=\"formData\"\n            (saved)=\"modelsUpdatedById($event)\"></app-techlify-form-button>\n          <app-techlify-delete-button *ngIf=\"!viewOnly && isShowDeleteAction\" class='text-secondary ms-1'\n            [model]=\"entityFile\" [service]=\"service\"\n            message=\"Are you sure to proceed delete the file {{entityFile.title}}\"\n            (deleted)=\"modelsDeletedById(entityFile)\">\n          </app-techlify-delete-button>\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: AlertService }, { type: i3$2.UntypedFormBuilder }, { type: ErrorHandlerService }, { type: i5$2.NgxPermissionsService }], propDecorators: { entityId: [{
+        }], ctorParameters: () => [{ type: EntityFileService }, { type: AlertService }, { type: i3$2.UntypedFormBuilder }, { type: ErrorHandlerService }, { type: i5$1.NgxPermissionsService }, { type: FormConfigurationFormService }], propDecorators: { entityId: [{
                 type: Input
             }], entityType: [{
                 type: Input
@@ -4491,7 +4500,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)=\"this.isEmitInitialEvent = false;_handleInput()\" (openedChange)=\"openedChange($event)\"\n      [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: i3$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i7$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i9.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i9$2.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "component", type: i5$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i9$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i11$1.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)=\"this.isEmitInitialEvent = false;_handleInput()\" (openedChange)=\"openedChange($event)\"\n      [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: i3$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i7$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i9.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i9$2.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "component", type: i6$3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i9$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i11$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SearchableSelectorComponent, decorators: [{
             type: Component,
@@ -5036,7 +5045,7 @@ class NoteListComponent extends TechlifyListComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NoteListComponent, deps: [{ token: NoteService }, { token: AlertService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: NoteListComponent, selector: "app-note-list", inputs: { relatedModelId: "relatedModelId", modelType: "modelType", readonly: "readonly", labelText: "labelText", commentsView: "commentsView", viewMode: "viewMode" }, usesInheritance: true, ngImport: i0, template: "<app-note-comment-list *ngIf=\"commentsView\" [relatedModelId]=\"relatedModelId\" [modelType]=\"modelType\"\n  [labelText]=\"labelText\"></app-note-comment-list>\n\n<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-form-button class=\"d-print-none ml-1\" [component]=\"noteForm()\" width=\"400px\"\n        [data]=\"{ model_type: modelType, related_model_id: relatedModelId, labelText: labelText }\"\n        (saved)=\"modelCreated($event); total = total + 1\"></app-techlify-form-button>\n    </div>\n\n    <div class=\"w-100 scroll-container\" infiniteScroll [infiniteScrollDistance]=\"1\" [infiniteScrollThrottle]=\"50\"\n      (scrolled)=\"onScroll()\" [scrollWindow]=\"false\">\n      <table mat-table [dataSource]=\"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 class=\"d-flex flex-row align-items-center gap-1\">\n              <app-techlify-form-button [component]=\"noteForm()\" [model]=\"note\" width=\"400px\"\n                [data]=\"{ labelText: labelText }\" (saved)=\"modelsUpdatedById($event)\"></app-techlify-form-button>\n              <app-techlify-delete-button [service]=\"noteService\" [model]=\"note\"\n                [data]=\"{ type: labelText, title: note?.note }\"\n                (deleted)=\"modelsDeletedById(note); total = total - 1\"></app-techlify-delete-button>\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-form-button [component]=\"noteForm()\" [model]=\"note\" width=\"400px\"\n                [data]=\"{ labelText: labelText }\" (saved)=\"modelsUpdatedById($event)\"></app-techlify-form-button>\n              <!-- @todo Pass $event once NoteController::destroy returns the deleted item -->\n              <app-techlify-delete-button [service]=\"noteService\" [model]=\"note\"\n                [data]=\"{ type: labelText, title: note?.note }\"\n                (deleted)=\"modelsDeletedById(note); total = total - 1\"></app-techlify-delete-button>\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", styles: [".scroll-container{max-height:400px;overflow-y:auto}\n"], dependencies: [{ kind: "directive", type: i6$1.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: i6$1.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: 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.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3$2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i6$2.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: i7$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i9.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i10$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i13.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i13.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i13.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i13.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i13.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i13.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i13.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i13.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i13.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i13.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: i6$4.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i11$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: TechlifyDeleteButtonComponent, selector: "app-techlify-delete-button", inputs: ["data", "model", "message", "service"], outputs: ["deleted"] }, { kind: "component", type: TechlifyFormButtonComponent, selector: "app-techlify-form-button", inputs: ["component", "model", "data", "width"], outputs: ["saved"] }, { kind: "component", type: NoteCommentListComponent, selector: "app-note-comment-list", inputs: ["relatedModelId", "modelType", "labelText"] }, { kind: "pipe", type: i3.DatePipe, name: "date" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: NoteListComponent, selector: "app-note-list", inputs: { relatedModelId: "relatedModelId", modelType: "modelType", readonly: "readonly", labelText: "labelText", commentsView: "commentsView", viewMode: "viewMode" }, usesInheritance: true, ngImport: i0, template: "<app-note-comment-list *ngIf=\"commentsView\" [relatedModelId]=\"relatedModelId\" [modelType]=\"modelType\"\n  [labelText]=\"labelText\"></app-note-comment-list>\n\n<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-form-button class=\"d-print-none ml-1\" [component]=\"noteForm()\" width=\"400px\"\n        [data]=\"{ model_type: modelType, related_model_id: relatedModelId, labelText: labelText }\"\n        (saved)=\"modelCreated($event); total = total + 1\"></app-techlify-form-button>\n    </div>\n\n    <div class=\"w-100 scroll-container\" infiniteScroll [infiniteScrollDistance]=\"1\" [infiniteScrollThrottle]=\"50\"\n      (scrolled)=\"onScroll()\" [scrollWindow]=\"false\">\n      <table mat-table [dataSource]=\"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 class=\"d-flex flex-row align-items-center gap-1\">\n              <app-techlify-form-button [component]=\"noteForm()\" [model]=\"note\" width=\"400px\"\n                [data]=\"{ labelText: labelText }\" (saved)=\"modelsUpdatedById($event)\"></app-techlify-form-button>\n              <app-techlify-delete-button [service]=\"noteService\" [model]=\"note\"\n                [data]=\"{ type: labelText, title: note?.note }\"\n                (deleted)=\"modelsDeletedById(note); total = total - 1\"></app-techlify-delete-button>\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-form-button [component]=\"noteForm()\" [model]=\"note\" width=\"400px\"\n                [data]=\"{ labelText: labelText }\" (saved)=\"modelsUpdatedById($event)\"></app-techlify-form-button>\n              <!-- @todo Pass $event once NoteController::destroy returns the deleted item -->\n              <app-techlify-delete-button [service]=\"noteService\" [model]=\"note\"\n                [data]=\"{ type: labelText, title: note?.note }\"\n                (deleted)=\"modelsDeletedById(note); total = total - 1\"></app-techlify-delete-button>\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", styles: [".scroll-container{max-height:400px;overflow-y:auto}\n"], dependencies: [{ kind: "directive", type: i6$1.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: i6$1.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: 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.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3$2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i6$2.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: i7$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i9.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i10$2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i13.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i13.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i13.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i13.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i13.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i13.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i13.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i13.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i13.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i13.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: i6$4.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i11$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: TechlifyDeleteButtonComponent, selector: "app-techlify-delete-button", inputs: ["data", "model", "message", "service"], outputs: ["deleted"] }, { kind: "component", type: TechlifyFormButtonComponent, selector: "app-techlify-form-button", inputs: ["component", "model", "data", "width"], outputs: ["saved"] }, { kind: "component", type: NoteCommentListComponent, selector: "app-note-comment-list", inputs: ["relatedModelId", "modelType", "labelText"] }, { kind: "pipe", type: i3.DatePipe, name: "date" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NoteListComponent, decorators: [{
             type: Component,
@@ -5155,7 +5164,7 @@ class LoaderComponent {
     }
     ngOnInit() { }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: LoaderComponent, selector: "app-loader", inputs: { isLoading: "isLoading", size: "size", message: "message" }, ngImport: i0, template: "<div [hidden]=\"!isLoading\">\n  <mat-progress-spinner mode=\"indeterminate\" [strokeWidth]=\"2\" [diameter]=\"32 * size\"></mat-progress-spinner>\n  <span class=\"message\">{{message}}</span>\n</div>\n", styles: [".mat-progress-spinner{display:inline-block;vertical-align:middle}.message{margin-left:.5em}\n"], dependencies: [{ kind: "component", type: i10$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: LoaderComponent, selector: "app-loader", inputs: { isLoading: "isLoading", size: "size", message: "message" }, ngImport: i0, template: "<div [hidden]=\"!isLoading\">\n  <mat-progress-spinner mode=\"indeterminate\" [strokeWidth]=\"2\" [diameter]=\"32 * size\"></mat-progress-spinner>\n  <span class=\"message\">{{message}}</span>\n</div>\n", styles: [".mat-progress-spinner{display:inline-block;vertical-align:middle}.message{margin-left:.5em}\n"], dependencies: [{ kind: "component", type: i10$2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LoaderComponent, decorators: [{
             type: Component,
@@ -5955,7 +5964,7 @@ let EmailSubscriptionUserListComponent = class EmailSubscriptionUserListComponen
         //Until destroyed uses it
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: EmailSubscriptionUserListComponent, deps: [{ token: i1.MatDialog }, { token: HttpService }, { token: i1$2.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", 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$2.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$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7$1.MatLabel, selector: "mat-label" }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i9$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i12.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i12.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i13.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i13.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i13.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i13.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i13.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i13.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i13.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i13.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i13.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i13.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i6$1.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: i6$1.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.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: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.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.14", 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$2.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$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7$1.MatLabel, selector: "mat-label" }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6$3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i9$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i12.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i12.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i13.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i13.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i13.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i13.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i13.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i13.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i13.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i13.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i13.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i13.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i6$1.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: i6$1.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.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: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.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" }] }); }
 };
 EmailSubscriptionUserListComponent = __decorate([
     UntilDestroy()
@@ -6367,7 +6376,7 @@ let EmailSubscriptionTypeListComponent = class EmailSubscriptionTypeListComponen
         //Until destroyed uses it
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", 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.14", 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$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i7$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i9.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i9$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i12.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i12.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i13.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i13.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i13.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i13.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i13.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i13.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i13.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i13.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i13.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i13.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i6$1.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: i6$1.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.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: i3$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i6$2.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.14", 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$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i7$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i9.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i6$3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i9$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i12.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i12.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i13.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i13.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i13.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i13.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i13.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i13.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i13.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i13.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i13.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i13.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i6$1.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: i6$1.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.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: i3$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i6$2.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()
@@ -7208,7 +7217,7 @@ class UpdateNotifierSnackComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: UpdateNotifierSnackComponent, deps: [{ token: MAT_SNACK_BAR_DATA }, { token: i1$1.MatSnackBarRef }, { token: i1.MatDialog }, { token: i1$2.Router }, { token: TechlifyUpdateService }, { token: AlertService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: UpdateNotifierSnackComponent, selector: "app-update-notifier-snack", ngImport: i0, template: "<div fxLayout=\"column\">\n  <div fxLayout=\"row wrap\" fxLayoutAlign=\"space-between\">\n    <div fxLayout=\"row wrap\" fxLayoutGap=\"1rem\">\n      <span fxLayoutAlign=\"center 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 fxLayout=\"column\">\n        <h5 class=\"primary-color text-truncate\" matTooltip=\"{{techlifyUpdate?.title}}\" matTooltipPosition=\"below\">\n          App Update: {{techlifyUpdate?.title}}\n        </h5>\n        <small class=\"text-muted\">\n          Version : {{techlifyUpdate?.version}}\n        </small>\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 fxLayout=\"row\" class=\"text-muted\" style=\"margin-top: 1rem;\" [innerHtml]=\"descriptionText\">\n  </div>\n  <div fxLayout=\"row\" fxLayoutAlign=\"space-between\">\n    <button type=\"button\" mat-button class=\"primary-color\" (click)=\"openUpdateHistory()\">\n      <mat-icon>\n        history\n      </mat-icon>\n      Update History\n    </button>\n    <button type=\"button\" mat-raised-button class=\"primary-bg text-white\" (click)=\"openUpdateView()\">\n      View\n    </button>\n  </div>\n</div>\n", styles: [".large-icon{transform:scale(1.5)}.primary-color{color:#009fdd!important}.primary-bg{background-color:#009fdd!important}.text-muted,.text-white{color:#d3d3d3}.text-truncate{width:400px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0}@media screen and (max-width: 1440px){.text-truncate{width:350px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0}}@media screen and (max-width: 1024px){.text-truncate{width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0}}@media screen and (max-width: 1024px){.text-truncate{width:190px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0}}\n"], dependencies: [{ 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.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i10.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i6$1.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: i6$1.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: i6$1.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.14", type: UpdateNotifierSnackComponent, selector: "app-update-notifier-snack", ngImport: i0, template: "<div fxLayout=\"column\">\n  <div fxLayout=\"row wrap\" fxLayoutAlign=\"space-between\">\n    <div fxLayout=\"row wrap\" fxLayoutGap=\"1rem\">\n      <span fxLayoutAlign=\"center 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 fxLayout=\"column\">\n        <h5 class=\"primary-color text-truncate\" matTooltip=\"{{techlifyUpdate?.title}}\" matTooltipPosition=\"below\">\n          App Update: {{techlifyUpdate?.title}}\n        </h5>\n        <small class=\"text-muted\">\n          Version : {{techlifyUpdate?.version}}\n        </small>\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 fxLayout=\"row\" class=\"text-muted\" style=\"margin-top: 1rem;\" [innerHtml]=\"descriptionText\">\n  </div>\n  <div fxLayout=\"row\" fxLayoutAlign=\"space-between\">\n    <button type=\"button\" mat-button class=\"primary-color\" (click)=\"openUpdateHistory()\">\n      <mat-icon>\n        history\n      </mat-icon>\n      Update History\n    </button>\n    <button type=\"button\" mat-raised-button class=\"primary-bg text-white\" (click)=\"openUpdateView()\">\n      View\n    </button>\n  </div>\n</div>\n", styles: [".large-icon{transform:scale(1.5)}.primary-color{color:#009fdd!important}.primary-bg{background-color:#009fdd!important}.text-muted,.text-white{color:#d3d3d3}.text-truncate{width:400px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0}@media screen and (max-width: 1440px){.text-truncate{width:350px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0}}@media screen and (max-width: 1024px){.text-truncate{width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0}}@media screen and (max-width: 1024px){.text-truncate{width:190px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0}}\n"], dependencies: [{ 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.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i10$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i6$1.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: i6$1.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: i6$1.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.14", ngImport: i0, type: UpdateNotifierSnackComponent, decorators: [{
             type: Component,
@@ -7455,7 +7464,7 @@ class ExportExcelButtonComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ExportExcelButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ExportExcelButtonComponent, selector: "app-export-excel-button", inputs: { isCSV: "isCSV", iconName: "iconName", fileName: "fileName", data: "data", tableId: "tableId", isParseNumeric: "isParseNumeric" }, outputs: { isExportingToExcel: "isExportingToExcel" }, ngImport: i0, template: "<app-techlify-icon class=\"clickable d-print-none\" *ngIf=\"!isWorking\" [name]=\"iconName\" (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}.create-another .mat-mdc-checkbox label{margin:0!important}.create-another .mdc-checkbox{padding:0!important}.create-another .mdc-checkbox__background{position:relative;top:0;left:0}.mat-mdc-form-field.mat-form-field-disabled .mat-mdc-input-element{color:#555!important;-webkit-text-fill-color:#555555!important}.mat-mdc-form-field.mat-form-field-disabled .mat-mdc-select-value{color:#555!important}:host{display:flex;align-content:center}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i10.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.14", type: ExportExcelButtonComponent, selector: "app-export-excel-button", inputs: { isCSV: "isCSV", iconName: "iconName", fileName: "fileName", data: "data", tableId: "tableId", isParseNumeric: "isParseNumeric" }, outputs: { isExportingToExcel: "isExportingToExcel" }, ngImport: i0, template: "<app-techlify-icon class=\"clickable d-print-none\" *ngIf=\"!isWorking\" [name]=\"iconName\" (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}.create-another .mat-mdc-checkbox label{margin:0!important}.create-another .mdc-checkbox{padding:0!important}.create-another .mdc-checkbox__background{position:relative;top:0;left:0}.mat-mdc-form-field.mat-form-field-disabled .mat-mdc-input-element{color:#555!important;-webkit-text-fill-color:#555555!important}.mat-mdc-form-field.mat-form-field-disabled .mat-mdc-select-value{color:#555!important}:host{display:flex;align-content:center}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i10$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.14", ngImport: i0, type: ExportExcelButtonComponent, decorators: [{
             type: Component,
@@ -7579,7 +7588,7 @@ let AuditLogListFilterComponent = class AuditLogListFilterComponent {
     ngOnDestroy() {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AuditLogListFilterComponent, deps: [{ token: FormValidatorService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", 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  <mat-form-field class='fl-md'>\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  <app-timeline-filter class='fl-sm' labelText=\"Activity Date\" formControlName=\"duration\"\n    [form]=\"filterForm\" [showClearButton]=\"true\" appearance=\"outline\"></app-timeline-filter>\n\n  <mat-form-field class='fl-sm'>\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 class='fl-sm' *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 class='fl-sm'>\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 class='fl-sm'>\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: i3$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$2.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$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i7$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i9.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i9$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], 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", "isEmitInitialEvent", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange", "isItemsEmpty"] }, { 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.14", 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  <mat-form-field class='fl-md'>\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  <app-timeline-filter class='fl-sm' labelText=\"Activity Date\" formControlName=\"duration\"\n    [form]=\"filterForm\" [showClearButton]=\"true\" appearance=\"outline\"></app-timeline-filter>\n\n  <mat-form-field class='fl-sm'>\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 class='fl-sm' *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 class='fl-sm'>\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 class='fl-sm'>\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: i3$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$2.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$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i7$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i9.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i6$3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i9$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], 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", "isEmitInitialEvent", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange", "isItemsEmpty"] }, { 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()
@@ -7702,7 +7711,7 @@ let AuditLogListComponent = class AuditLogListComponent extends TechlifyListComp
         super.loadData(filters);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AuditLogListComponent, deps: [{ token: i1$2.Router }, { token: i1$5.DomSanitizer }, { token: i3$2.FormBuilder }, { token: AuditLogService }, { token: i3.DatePipe }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: AuditLogListComponent, selector: "app-audit-log-list", inputs: { objectId: "objectId", objectType: "objectType", showFilter: "showFilter", showExportButtons: "showExportButtons", userId: "userId", disableFilterPatchingFromUrl: "disableFilterPatchingFromUrl", scrollContainer: "scrollContainer" }, usesInheritance: true, ngImport: i0, template: "<div class=\"m-2\">\n  <mat-card>\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-center gap-2\" style=\"min-width: 200px\">\n          <h5 class=\"mb-0\"> Audit Logs </h5>\n          <app-export-excel-button *ngIf=\"showExportButtons\" matTooltip=\"Export\" elementId=\"audit-logs-table\"\n            class=\"mt-1\" 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\" [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\" (matSortChange)=\"sortColumn($event)\">\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            <div class=\"text-secondary\">\n              <app-techlify-icon role=\"button\" name=\"view\" class=\"clickable\"\n                (click)=\"logClicked(auditLog);$event.stopPropagation();\" matTooltip=\"View\"></app-techlify-icon>\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      <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isWorking\"></mat-progress-bar>\n    </mat-card-content>\n  </mat-card>\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: "component", type: ExportExcelButtonComponent, selector: "app-export-excel-button", inputs: ["isCSV", "iconName", "fileName", "data", "tableId", "isParseNumeric"], outputs: ["isExportingToExcel"] }, { kind: "directive", type: i12.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i12.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i13.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i13.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i13.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i13.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i13.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i13.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i13.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i13.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i13.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i13.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: i10.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i11$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i6$2.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "component", type: AuditLogListFilterComponent, selector: "app-audit-log-list-filter", inputs: ["filterForm", "objectId", "objectType"], outputs: ["valueChange"] }, { kind: "component", type: TechlifyIconComponent, selector: "app-techlify-icon", inputs: ["name", "size"] }, { kind: "pipe", type: i3.DatePipe, name: "date" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: AuditLogListComponent, selector: "app-audit-log-list", inputs: { objectId: "objectId", objectType: "objectType", showFilter: "showFilter", showExportButtons: "showExportButtons", userId: "userId", disableFilterPatchingFromUrl: "disableFilterPatchingFromUrl", scrollContainer: "scrollContainer" }, usesInheritance: true, ngImport: i0, template: "<div class=\"m-2\">\n  <mat-card>\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-center gap-2\" style=\"min-width: 200px\">\n          <h5 class=\"mb-0\"> Audit Logs </h5>\n          <app-export-excel-button *ngIf=\"showExportButtons\" matTooltip=\"Export\" elementId=\"audit-logs-table\"\n            class=\"mt-1\" 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\" [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\" (matSortChange)=\"sortColumn($event)\">\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            <div class=\"text-secondary\">\n              <app-techlify-icon role=\"button\" name=\"view\" class=\"clickable\"\n                (click)=\"logClicked(auditLog);$event.stopPropagation();\" matTooltip=\"View\"></app-techlify-icon>\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      <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isWorking\"></mat-progress-bar>\n    </mat-card-content>\n  </mat-card>\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: "component", type: ExportExcelButtonComponent, selector: "app-export-excel-button", inputs: ["isCSV", "iconName", "fileName", "data", "tableId", "isParseNumeric"], outputs: ["isExportingToExcel"] }, { kind: "directive", type: i12.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i12.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i13.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i13.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i13.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i13.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i13.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i13.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i13.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i13.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i13.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i13.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: i10$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i11$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i6$2.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "component", type: AuditLogListFilterComponent, selector: "app-audit-log-list-filter", inputs: ["filterForm", "objectId", "objectType"], outputs: ["valueChange"] }, { kind: "component", type: TechlifyIconComponent, selector: "app-techlify-icon", inputs: ["name", "size"] }, { kind: "pipe", type: i3.DatePipe, name: "date" }] }); }
 };
 AuditLogListComponent = __decorate([
     UntilDestroy()
@@ -7780,7 +7789,7 @@ class AuditLogForModelComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AuditLogForModelComponent, deps: [{ token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", 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 *ngIf=\"logView==='recent'\" name=\"history\" matTooltip=\"Recent Audit Log\"\n        (click)=\"$event.stopPropagation();getLogView()\" class=\"clickable\"></app-techlify-icon>\n    <app-techlify-icon *ngIf=\"logView==='all'\" name=\"history\" matTooltip=\"All Audit Logs\"\n        (click)=\"$event.stopPropagation();getLogsView()\" 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}.create-another .mat-mdc-checkbox label{margin:0!important}.create-another .mdc-checkbox{padding:0!important}.create-another .mdc-checkbox__background{position:relative;top:0;left:0}.mat-mdc-form-field.mat-form-field-disabled .mat-mdc-input-element{color:#555!important;-webkit-text-fill-color:#555555!important}.mat-mdc-form-field.mat-form-field-disabled .mat-mdc-select-value{color:#555!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.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i10.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.14", 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 *ngIf=\"logView==='recent'\" name=\"history\" matTooltip=\"Recent Audit Log\"\n        (click)=\"$event.stopPropagation();getLogView()\" class=\"clickable\"></app-techlify-icon>\n    <app-techlify-icon *ngIf=\"logView==='all'\" name=\"history\" matTooltip=\"All Audit Logs\"\n        (click)=\"$event.stopPropagation();getLogsView()\" 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}.create-another .mat-mdc-checkbox label{margin:0!important}.create-another .mdc-checkbox{padding:0!important}.create-another .mdc-checkbox__background{position:relative;top:0;left:0}.mat-mdc-form-field.mat-form-field-disabled .mat-mdc-input-element{color:#555!important;-webkit-text-fill-color:#555555!important}.mat-mdc-form-field.mat-form-field-disabled .mat-mdc-select-value{color:#555!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.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i10$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.14", ngImport: i0, type: AuditLogForModelComponent, decorators: [{
             type: Component,
@@ -8336,7 +8345,7 @@ class FieldMappingComponent {
         this.onReUpload.emit(true);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FieldMappingComponent, deps: [{ token: i3$2.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.14", type: FieldMappingComponent, selector: "app-field-mapping", inputs: { data: "data", config: "config" }, outputs: { onSave: "onSave", onReUpload: "onReUpload" }, ngImport: i0, template: "<div class=\"d-flex flex-column mt-2\">\n  <div class=\"d-flex flex-row flex-wrap pb-3\">\n    <h5 style=\"flex: 0 0 30%;\" class=\"primary-color\">Summary</h5>\n    <div style=\"flex: 0 0 70%;\" class=\"d-flex align-items-center\">\n      <h5 class=\"secondary-color mb-0\">\n        <span class=\"font-weight-bold\">{{data.length}} &nbsp;</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()\" class=\"d-flex flex-column 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            <div class=\"d-flex align-items-center\">\n              <mat-form-field class=\"flex-grow-1\" 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\n              <mat-icon role=\"button\" class=\"ms-3 text-danger\" type=\"button\" mat-icon-button (click)=\"removeField(i)\"\n                *ngIf=\"fieldsArray.length > 1\" matTooltip=\"Remove column\" matTooltipPosition=\"right\"\n                style=\"margin-bottom: 1.25em;\">remove_circle</mat-icon>\n            </div>\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: i3$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3$2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i3$2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { 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$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i7$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i9$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6$4.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i10.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.14", type: FieldMappingComponent, selector: "app-field-mapping", inputs: { data: "data", config: "config" }, outputs: { onSave: "onSave", onReUpload: "onReUpload" }, ngImport: i0, template: "<div class=\"d-flex flex-column mt-2\">\n  <div class=\"d-flex flex-row flex-wrap pb-3\">\n    <h5 style=\"flex: 0 0 30%;\" class=\"primary-color\">Summary</h5>\n    <div style=\"flex: 0 0 70%;\" class=\"d-flex align-items-center\">\n      <h5 class=\"secondary-color mb-0\">\n        <span class=\"font-weight-bold\">{{data.length}} &nbsp;</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()\" class=\"d-flex flex-column 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            <div class=\"d-flex align-items-center\">\n              <mat-form-field class=\"flex-grow-1\" 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\n              <mat-icon role=\"button\" class=\"ms-3 text-danger\" type=\"button\" mat-icon-button (click)=\"removeField(i)\"\n                *ngIf=\"fieldsArray.length > 1\" matTooltip=\"Remove column\" matTooltipPosition=\"right\"\n                style=\"margin-bottom: 1.25em;\">remove_circle</mat-icon>\n            </div>\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: i3$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3$2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i3$2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { 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$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i7$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6$3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i9$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6$4.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i10$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FieldMappingComponent, decorators: [{
             type: Component,
@@ -8569,7 +8578,7 @@ let ImportCsvComponent = class ImportCsvComponent {
         this.currentStep = 1;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", 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.14", type: ImportCsvComponent, selector: "app-import-csv", inputs: { config: "config" }, ngImport: i0, template: "<div class=\"d-flex flex-column\">\n  <mat-card class=\"w-100 p-0\">\n    <mat-card-content class=\"d-flex flex-row flex-wrap align-items-center justify-content-center w-100 primary-color\">\n      <h4 style=\"flex: 0 0 20%;\" class=\"ml-2\">\n        Step {{step.step}}: <span class=\"normal-font-weight\">{{step?.title}}</span>\n      </h4>\n      <h3 class=\"d-flex align-items-center justify-content-center gap-3 text-dark\" style=\"flex: 0 0 80%;\">\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          <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 class=\"w-100 mt-2\">\n    <div class=\"row g-3\" *ngIf=\"currentStep==1 || currentStep == 2 || currentStep == 4\">\n      <div class=\"col-12 col-md-8\">\n        <mat-card class=\"w-100\">\n          <mat-card-content class=\"d-flex flex-column\">\n            <div class=\"w-100 overflow-x-auto\">\n              <section class=\"d-flex flex-column w-100\" *ngIf=\"config.importType && !this.fileData.length && !this.failedItems.length\">\n                <h5 class=\"primary-color pb-3\">File Upload</h5>\n                <app-file-dropper class=\"d-block w-100 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 class=\"col-12 col-md-4\">\n        <mat-card class=\"w-100\">\n          <mat-card-content class=\"d-flex flex-column\">\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 class=\"d-flex flex-column p-3\" *ngIf=\"currentStep==3 || currentStep == 5\">\n      <app-data-import [step]=\"step\"></app-data-import>\n    </div>\n    <div class=\"d-flex flex-column p-3\" *ngIf=\"currentStep == 6\">\n      <app-import-success [data]=\"result\" [config]=\"config\"></app-import-success>\n    </div>\n  </div>\n</div>\n", styles: [".drop-section{width:100%!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: "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.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: i10.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.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ImportCsvComponent, selector: "app-import-csv", inputs: { config: "config" }, ngImport: i0, template: "<div class=\"d-flex flex-column\">\n  <mat-card class=\"w-100 p-0\">\n    <mat-card-content class=\"d-flex flex-row flex-wrap align-items-center justify-content-center w-100 primary-color\">\n      <h4 style=\"flex: 0 0 20%;\" class=\"ml-2\">\n        Step {{step.step}}: <span class=\"normal-font-weight\">{{step?.title}}</span>\n      </h4>\n      <h3 class=\"d-flex align-items-center justify-content-center gap-3 text-dark\" style=\"flex: 0 0 80%;\">\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          <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 class=\"w-100 mt-2\">\n    <div class=\"row g-3\" *ngIf=\"currentStep==1 || currentStep == 2 || currentStep == 4\">\n      <div class=\"col-12 col-md-8\">\n        <mat-card class=\"w-100\">\n          <mat-card-content class=\"d-flex flex-column\">\n            <div class=\"w-100 overflow-x-auto\">\n              <section class=\"d-flex flex-column w-100\" *ngIf=\"config.importType && !this.fileData.length && !this.failedItems.length\">\n                <h5 class=\"primary-color pb-3\">File Upload</h5>\n                <app-file-dropper class=\"d-block w-100 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 class=\"col-12 col-md-4\">\n        <mat-card class=\"w-100\">\n          <mat-card-content class=\"d-flex flex-column\">\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 class=\"d-flex flex-column p-3\" *ngIf=\"currentStep==3 || currentStep == 5\">\n      <app-data-import [step]=\"step\"></app-data-import>\n    </div>\n    <div class=\"d-flex flex-column p-3\" *ngIf=\"currentStep == 6\">\n      <app-import-success [data]=\"result\" [config]=\"config\"></app-import-success>\n    </div>\n  </div>\n</div>\n", styles: [".drop-section{width:100%!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: "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.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: i10$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()
@@ -9605,7 +9614,7 @@ class UserFormComponent extends TechlifyFormComponent {
             .post('api/entity-files-upload', formData).toPromise();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: UserFormComponent, deps: [{ token: i1.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: HttpService }, { token: i3$2.UntypedFormBuilder }, { token: FormValidatorService }, { token: UserService }, { token: CurrentUserService }, { token: UserConfigService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: UserFormComponent, isStandalone: true, selector: "app-user-form", usesInheritance: true, ngImport: i0, template: "<form [formGroup]=\"form\" (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\">{{ isUpdate ? 'Edit' : 'Create ' }} User</h5>\n    <div class=\"d-flex\">\n      <div class=\"d-flex flex-column flex-fill gap-1\">\n        <mat-form-field>\n          <mat-label>Full name</mat-label>\n          <input [required]=\"!!form.get('name').validator\" autocomplete=\"off\" formControlName=\"name\" matInput\n            placeholder=\"Full Name\" type=\"text\" />\n          <mat-error *ngIf=\"isFieldValid('name') && !!form.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]=\"!!form.get('email').validator\" formControlName=\"email\" matInput placeholder=\"Email\"\n            type=\"email\" />\n          <mat-error *ngIf=\"isFieldValid('email') && !!form.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 && !!form.get('password').validator\" autocomplete=\"off\"\n            formControlName=\"password\" matInput placeholder=\"Password\" type=\"password\" />\n          <mat-error *ngIf=\"isFieldValid('password') && !!form.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=\"form.get('signature').value;else fileUpload;\" class=\"col-12\">\n            <app-document-viewer (remove)=\"removeFile()\" [config]=\"this.viewerConfig\"\n              [fileUrl]=\"form.get('signature_url').value\" [file]=\"form.get('signature').value\">\n            </app-document-viewer>\n          </div>\n        </div>\n        <mat-form-field *ngIf=\"this.config.userConfig.showUserTypes\" class=\"mt-3\">\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.form.get('user_type_id').value == 3\"\n        class=\"flex-fill ml-4\">\n        <p class=\"mb-0 fw-bold\">\n          Roles\n        </p>\n        <div *ngFor=\"let role of roles\" class=\"d-flex flex-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: "ngmodule", type: SharedModule }, { 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.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { 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$3.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$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i7$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i9.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i9$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i3$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FileDropperModule }, { kind: "component", type: FileDropperComponent, selector: "app-file-dropper", inputs: ["fileArray", "config", "styles"], outputs: ["fileChanged"] }, { kind: "ngmodule", type: DocumentViewerModule }, { 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.14", type: UserFormComponent, isStandalone: true, selector: "app-user-form", usesInheritance: true, ngImport: i0, template: "<form [formGroup]=\"form\" (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\">{{ isUpdate ? 'Edit' : 'Create ' }} User</h5>\n    <div class=\"d-flex\">\n      <div class=\"d-flex flex-column flex-fill gap-1\">\n        <mat-form-field>\n          <mat-label>Full name</mat-label>\n          <input [required]=\"!!form.get('name').validator\" autocomplete=\"off\" formControlName=\"name\" matInput\n            placeholder=\"Full Name\" type=\"text\" />\n          <mat-error *ngIf=\"isFieldValid('name') && !!form.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]=\"!!form.get('email').validator\" formControlName=\"email\" matInput placeholder=\"Email\"\n            type=\"email\" />\n          <mat-error *ngIf=\"isFieldValid('email') && !!form.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 && !!form.get('password').validator\" autocomplete=\"off\"\n            formControlName=\"password\" matInput placeholder=\"Password\" type=\"password\" />\n          <mat-error *ngIf=\"isFieldValid('password') && !!form.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=\"form.get('signature').value;else fileUpload;\" class=\"col-12\">\n            <app-document-viewer (remove)=\"removeFile()\" [config]=\"this.viewerConfig\"\n              [fileUrl]=\"form.get('signature_url').value\" [file]=\"form.get('signature').value\">\n            </app-document-viewer>\n          </div>\n        </div>\n        <mat-form-field *ngIf=\"this.config.userConfig.showUserTypes\" class=\"mt-3\">\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.form.get('user_type_id').value == 3\"\n        class=\"flex-fill ml-4\">\n        <p class=\"mb-0 fw-bold\">\n          Roles\n        </p>\n        <div *ngFor=\"let role of roles\" class=\"d-flex flex-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: "ngmodule", type: SharedModule }, { 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.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { 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: i10.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$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i7$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i9.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i6$3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i9$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i3$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FileDropperModule }, { kind: "component", type: FileDropperComponent, selector: "app-file-dropper", inputs: ["fileArray", "config", "styles"], outputs: ["fileChanged"] }, { kind: "ngmodule", type: DocumentViewerModule }, { kind: "component", type: DocumentViewerComponent, selector: "app-document-viewer", inputs: ["config", "file", "fileUrl", "disableEdit"], outputs: ["remove"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: UserFormComponent, decorators: [{
             type: Component,
@@ -9676,7 +9685,7 @@ let UserEnableButtonComponent = class UserEnableButtonComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", 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.14", 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  <app-techlify-icon name=\"disable_user\" class=\"text-danger clickable\" *ngIf=\"user?.user_client?.is_enabled\n  && user?.id !== currentUser?.id\n  && currentUserService.hasPermission('user_disable')\" (click)=\"disableUser()\"\n    matTooltip=\"Disable User\"></app-techlify-icon>\n  <app-techlify-icon name=\"activate\" class=\"text-success clickable\" *ngIf=\"!user?.user_client?.is_enabled\n&& user?.id !== currentUser?.id\n&& currentUserService.hasPermission('user_enable')\" (click)=\"enableUser()\"\n    matTooltip=\"Enable User\"></app-techlify-icon>\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: "directive", type: i10.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.14", 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  <app-techlify-icon name=\"disable_user\" class=\"text-danger clickable\" *ngIf=\"user?.user_client?.is_enabled\n  && user?.id !== currentUser?.id\n  && currentUserService.hasPermission('user_disable')\" (click)=\"disableUser()\"\n    matTooltip=\"Disable User\"></app-techlify-icon>\n  <app-techlify-icon name=\"activate\" class=\"text-success clickable\" *ngIf=\"!user?.user_client?.is_enabled\n&& user?.id !== currentUser?.id\n&& currentUserService.hasPermission('user_enable')\" (click)=\"enableUser()\"\n    matTooltip=\"Enable User\"></app-techlify-icon>\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: "directive", type: i10$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"] }] }); }
 };
 UserEnableButtonComponent = __decorate([
     UntilDestroy()
@@ -9816,7 +9825,7 @@ let UserListComponent = class UserListComponent extends TechlifyListComponent {
             .subscribe(_ => this.alertService.addAlert('Password reset email sent', 'success'));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: UserListComponent, deps: [{ token: AlertService }, { token: CurrentUserService }, { token: UserConfigService }, { token: UserService }, { token: i3$2.UntypedFormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: UserListComponent, isStandalone: true, selector: "app-user-list", inputs: { userTypeIds: "userTypeIds", title: "title" }, usesInheritance: true, ngImport: i0, template: "<div [ngClass]=\"{'m-4':config?.userConfig?.showDefaultMargin}\">\n  <mat-card class=\"mb-2\">\n    <mat-card-content class=\"d-flex justify-content-between align-items-center gap-2\">\n      <section class=\"d-flex justify-content-start align-items-center gap-2\">\n        <h5 class=\"mb-0\"> {{ title }} </h5>\n        <app-techlify-form-button [component]=\"userFormComponent\" matTooltip=\"New User\"\n          [data]=\"{client_id: currentUser?.client_id}\"\n          *ngIf=\"config?.userConfig?.showAddUser && currentUserService?.hasPermission('user_create')\"\n          (saved)=\"modelCreated($event)\"></app-techlify-form-button>\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\" class=\"d-flex flex-row justify-content-center align-items-center gap-2\">\n        <mat-form-field appearance=\"outline\" class='fl-md'>\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\" class='fl-sm'>\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 class='mb-4' [hideSingleSelectionIndicator]=\"true\"\n          [hideMultipleSelectionIndicator]=\"true\" 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)=\"sortColumn($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 class=\"d-flex flex-row justify-content-start align-items-center gap-2 text-secondary\">\n              <app-techlify-icon role='button' name=\"view\" class=\"clickable\" [routerLink]=\"[element?.id]\"\n                matTooltip=\"View\"></app-techlify-icon>\n\n              <app-techlify-form-button [component]=\"userFormComponent\" [model]=\"element\" class=\"clickable\"\n                [data]=\"{client_id: currentUser?.client_id}\" matTooltip=\"Edit\"\n                *ngIf=\"currentUserService.hasPermission('user_update')\"\n                (saved)=\"modelsUpdatedById($event)\"></app-techlify-form-button>\n\n              <app-techlify-delete-button\n                *ngIf=\"currentUserService.hasPermission('user_delete') && element?.id !== currentUser?.id\"\n                [model]=\"element\" [service]=\"service\" [data]=\"{title: element?.name, type: 'user'}\"\n                (deleted)=\"modelsDeletedById(element)\"></app-techlify-delete-button>\n\n              <app-techlify-icon role='button'\n                *ngIf=\"currentUserService.hasPermission('techlify_rbac.user.reset_password')\" name=\"reset\"\n                class=\"clickable\" (click)=\"resetPassword(element)\" matTooltip=\"Reset User Password\"></app-techlify-icon>\n\n              <app-user-enable-button [user]=\"element\" (onSave)=\"modelsUpdatedById($event)\"></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: "ngmodule", type: CommonModule }, { 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: "pipe", type: i3.DatePipe, name: "date" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { 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$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7$1.MatLabel, selector: "mat-label" }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i9.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i12.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i12.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i13.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i13.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i13.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i13.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i13.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i13.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i13.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i13.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i13.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i13.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: i10.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i3$3.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$3.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: i11$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: SearchableSelectorModule }, { 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", "isEmitInitialEvent", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange", "isItemsEmpty"] }, { kind: "ngmodule", type: TechlifyIconModule }, { kind: "component", type: TechlifyIconComponent, selector: "app-techlify-icon", inputs: ["name", "size"] }, { kind: "component", type: TechlifyDeleteButtonComponent, selector: "app-techlify-delete-button", inputs: ["data", "model", "message", "service"], outputs: ["deleted"] }, { kind: "component", type: TechlifyFormButtonComponent, selector: "app-techlify-form-button", inputs: ["component", "model", "data", "width"], outputs: ["saved"] }, { kind: "ngmodule", type: UserEnableButtonModule }, { kind: "component", type: UserEnableButtonComponent, selector: "app-user-enable-button", inputs: ["user", "isUseIcons"], outputs: ["onSave"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: UserListComponent, isStandalone: true, selector: "app-user-list", inputs: { userTypeIds: "userTypeIds", title: "title" }, usesInheritance: true, ngImport: i0, template: "<div [ngClass]=\"{'m-4':config?.userConfig?.showDefaultMargin}\">\n  <mat-card class=\"mb-2\">\n    <mat-card-content class=\"d-flex justify-content-between align-items-center gap-2\">\n      <section class=\"d-flex justify-content-start align-items-center gap-2\">\n        <h5 class=\"mb-0\"> {{ title }} </h5>\n        <app-techlify-form-button [component]=\"userFormComponent\" matTooltip=\"New User\"\n          [data]=\"{client_id: currentUser?.client_id}\"\n          *ngIf=\"config?.userConfig?.showAddUser && currentUserService?.hasPermission('user_create')\"\n          (saved)=\"modelCreated($event)\"></app-techlify-form-button>\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\" class=\"d-flex flex-row justify-content-center align-items-center gap-2\">\n        <mat-form-field appearance=\"outline\" class='fl-md'>\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\" class='fl-sm'>\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 class='mb-4' [hideSingleSelectionIndicator]=\"true\"\n          [hideMultipleSelectionIndicator]=\"true\" 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)=\"sortColumn($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 class=\"d-flex flex-row justify-content-start align-items-center gap-2 text-secondary\">\n              <app-techlify-icon role='button' name=\"view\" class=\"clickable\" [routerLink]=\"[element?.id]\"\n                matTooltip=\"View\"></app-techlify-icon>\n\n              <app-techlify-form-button [component]=\"userFormComponent\" [model]=\"element\" class=\"clickable\"\n                [data]=\"{client_id: currentUser?.client_id}\" matTooltip=\"Edit\"\n                *ngIf=\"currentUserService.hasPermission('user_update')\"\n                (saved)=\"modelsUpdatedById($event)\"></app-techlify-form-button>\n\n              <app-techlify-delete-button\n                *ngIf=\"currentUserService.hasPermission('user_delete') && element?.id !== currentUser?.id\"\n                [model]=\"element\" [service]=\"service\" [data]=\"{title: element?.name, type: 'user'}\"\n                (deleted)=\"modelsDeletedById(element)\"></app-techlify-delete-button>\n\n              <app-techlify-icon role='button'\n                *ngIf=\"currentUserService.hasPermission('techlify_rbac.user.reset_password')\" name=\"reset\"\n                class=\"clickable\" (click)=\"resetPassword(element)\" matTooltip=\"Reset User Password\"></app-techlify-icon>\n\n              <app-user-enable-button [user]=\"element\" (onSave)=\"modelsUpdatedById($event)\"></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: "ngmodule", type: CommonModule }, { 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: "pipe", type: i3.DatePipe, name: "date" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { 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$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7$1.MatLabel, selector: "mat-label" }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i9.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i12.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i12.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i13.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i13.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i13.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i13.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i13.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i13.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i13.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i13.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i13.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i13.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: i10$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i3$3.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$3.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: i11$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: SearchableSelectorModule }, { 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", "isEmitInitialEvent", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange", "isItemsEmpty"] }, { kind: "ngmodule", type: TechlifyIconModule }, { kind: "component", type: TechlifyIconComponent, selector: "app-techlify-icon", inputs: ["name", "size"] }, { kind: "component", type: TechlifyDeleteButtonComponent, selector: "app-techlify-delete-button", inputs: ["data", "model", "message", "service"], outputs: ["deleted"] }, { kind: "component", type: TechlifyFormButtonComponent, selector: "app-techlify-form-button", inputs: ["component", "model", "data", "width"], outputs: ["saved"] }, { kind: "ngmodule", type: UserEnableButtonModule }, { kind: "component", type: UserEnableButtonComponent, selector: "app-user-enable-button", inputs: ["user", "isUseIcons"], outputs: ["onSave"] }] }); }
 };
 UserListComponent = __decorate([
     UntilDestroy()
@@ -10611,7 +10620,7 @@ let LoginFormFieldsComponent = class LoginFormFieldsComponent extends TechlifyFo
     redirect(provider) {
         window.location.href = this.userConfig.socialLoginRedirectUrl + provider;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LoginFormFieldsComponent, deps: [{ token: i3$2.FormBuilder }, { token: FormValidatorService }, { token: ConfigService }, { token: CredentialsService }, { token: CurrentUserService }, { token: AuthenticationService }, { token: i1$2.Router }, { token: i1$2.ActivatedRoute }, { token: UserConfigService }, { token: ErrorHandlerService }, { token: i5$2.NgxPermissionsService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LoginFormFieldsComponent, deps: [{ token: i3$2.FormBuilder }, { token: FormValidatorService }, { token: ConfigService }, { token: CredentialsService }, { token: CurrentUserService }, { token: AuthenticationService }, { token: i1$2.Router }, { token: i1$2.ActivatedRoute }, { token: UserConfigService }, { token: ErrorHandlerService }, { token: i5$1.NgxPermissionsService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", 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$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i7$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i9.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i6$5.MatSelectionList, selector: "mat-selection-list", inputs: ["color", "compareWith", "multiple", "hideSingleSelectionIndicator", "disabled"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { kind: "component", type: i6$5.MatListOption, selector: "mat-list-option", inputs: ["togglePosition", "checkboxPosition", "color", "value", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
 };
 LoginFormFieldsComponent = __decorate([
@@ -10625,7 +10634,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         ReactiveFormsModule,
                         RouterModule
                     ], 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>" }]
-        }], ctorParameters: () => [{ type: i3$2.FormBuilder }, { type: FormValidatorService }, { type: ConfigService }, { type: CredentialsService }, { type: CurrentUserService }, { type: AuthenticationService }, { type: i1$2.Router }, { type: i1$2.ActivatedRoute }, { type: UserConfigService }, { type: ErrorHandlerService }, { type: i5$2.NgxPermissionsService }], propDecorators: { userConfig: [{
+        }], ctorParameters: () => [{ type: i3$2.FormBuilder }, { type: FormValidatorService }, { type: ConfigService }, { type: CredentialsService }, { type: CurrentUserService }, { type: AuthenticationService }, { type: i1$2.Router }, { type: i1$2.ActivatedRoute }, { type: UserConfigService }, { type: ErrorHandlerService }, { type: i5$1.NgxPermissionsService }], propDecorators: { userConfig: [{
                 type: Input
             }], isEnableLoginRedirect: [{
                 type: Input
@@ -10881,7 +10890,7 @@ class RoleFormComponent {
         return this.formValidatorService.getErrorMessage(field, this.roleForm, errorMessages$2);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RoleFormComponent, deps: [{ token: AlertService }, { token: CredentialsService }, { token: i3$2.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.14", type: RoleFormComponent, selector: "role-form", ngImport: i0, template: "<mat-card-content>\n    <form [formGroup]=\"roleForm\" (ngSubmit)=\"save()\">\n        <div class=\"d-flex flex-column\">\n            <h5 class=\"text-center\"> Role Form </h5>\n            <mat-form-field class=\"w-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 class=\"w-100\">\n                <textarea matInput placeholder=\"Description\" formControlName=\"description\"></textarea>\n            </mat-form-field>\n\n            <ng-container *ngIf=\"isAdminUser && roleForm.get('client_id').value\">\n                <mat-checkbox formControlName=\"is_editable\"> Is Editable</mat-checkbox>\n            </ng-container>\n\n            <div class=\"d-flex justify-content-end gap-3 mt-2\">\n                <button mat-button type=\"button\" (click)=\"dialogRef.close()\">\n                    Cancel\n                </button>\n                <button mat-raised-button color=\"primary\" type=\"submit\">\n                    Save\n                </button>\n            </div>\n        </div>\n    </form>\n</mat-card-content>", 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$3.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: i7$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i9.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: i3$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: RoleFormComponent, selector: "role-form", ngImport: i0, template: "<mat-card-content>\n    <form [formGroup]=\"roleForm\" (ngSubmit)=\"save()\">\n        <div class=\"d-flex flex-column\">\n            <h5 class=\"text-center\"> Role Form </h5>\n            <mat-form-field class=\"w-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 class=\"w-100\">\n                <textarea matInput placeholder=\"Description\" formControlName=\"description\"></textarea>\n            </mat-form-field>\n\n            <ng-container *ngIf=\"isAdminUser && roleForm.get('client_id').value\">\n                <mat-checkbox formControlName=\"is_editable\"> Is Editable</mat-checkbox>\n            </ng-container>\n\n            <div class=\"d-flex justify-content-end gap-3 mt-2\">\n                <button mat-button type=\"button\" (click)=\"dialogRef.close()\">\n                    Cancel\n                </button>\n                <button mat-raised-button color=\"primary\" type=\"submit\">\n                    Save\n                </button>\n            </div>\n        </div>\n    </form>\n</mat-card-content>", 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: i10.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: i7$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i9.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: i3$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RoleFormComponent, decorators: [{
             type: Component,
@@ -10967,7 +10976,7 @@ class RoleFormButtonComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RoleFormButtonComponent, deps: [{ token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: RoleFormButtonComponent, selector: "app-role-form-button", inputs: { config: "config", clientId: "clientId", isUpdate: "isUpdate", role: "role" }, outputs: { success: "success" }, ngImport: i0, template: "<app-techlify-icon *ngIf=\"!isUpdate\" name=\"add\" (click)=\"openForm()\" class=\"clickable\"\n  matTooltip=\"Add\"></app-techlify-icon>\n<app-techlify-icon *ngIf=\"isUpdate\" name=\"edit\" (click)=\"openForm()\" class=\"clickable\"\n  matTooltip=\"Edit\"></app-techlify-icon>", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i10.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.14", type: RoleFormButtonComponent, selector: "app-role-form-button", inputs: { config: "config", clientId: "clientId", isUpdate: "isUpdate", role: "role" }, outputs: { success: "success" }, ngImport: i0, template: "<app-techlify-icon *ngIf=\"!isUpdate\" name=\"add\" (click)=\"openForm()\" class=\"clickable\"\n  matTooltip=\"Add\"></app-techlify-icon>\n<app-techlify-icon *ngIf=\"isUpdate\" name=\"edit\" (click)=\"openForm()\" class=\"clickable\"\n  matTooltip=\"Edit\"></app-techlify-icon>", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i10$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.14", ngImport: i0, type: RoleFormButtonComponent, decorators: [{
             type: Component,
@@ -11077,7 +11086,7 @@ class RoleListComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RoleListComponent, deps: [{ token: HttpService }, { token: i1$2.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.14", type: RoleListComponent, selector: "role-list", inputs: { clientId: "clientId" }, ngImport: i0, template: "<div class=\"d-flex flex-column 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=\"mx-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            <div class=\"d-flex align-items-center gap-2 text-secondary\">\n              <app-techlify-icon name=\"view\" matTooltip=\"view\" class=\"clickable\"\n                [routerLink]=\"['../roles/', role?.id]\"></app-techlify-icon>\n              <app-role-form-button class=\"ml-1\" (success)=\"reload()\" [role]=\"role\" [isUpdate]=\"true\"\n                *ngIf=\"(isAdminUser || role.is_editable) && currentUserService.hasPermission('role_update')\"\n                [clientId]=\"clientId\"></app-role-form-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\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$2.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.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i13.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i13.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i13.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i13.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i13.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i13.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i13.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i13.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i13.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i13.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: i10.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i11$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i6$2.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"] }, { 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.14", type: RoleListComponent, selector: "role-list", inputs: { clientId: "clientId" }, ngImport: i0, template: "<div class=\"d-flex flex-column 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=\"mx-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            <div class=\"d-flex align-items-center gap-2 text-secondary\">\n              <app-techlify-icon name=\"view\" matTooltip=\"view\" class=\"clickable\"\n                [routerLink]=\"['../roles/', role?.id]\"></app-techlify-icon>\n              <app-role-form-button class=\"ml-1\" (success)=\"reload()\" [role]=\"role\" [isUpdate]=\"true\"\n                *ngIf=\"(isAdminUser || role.is_editable) && currentUserService.hasPermission('role_update')\"\n                [clientId]=\"clientId\"></app-role-form-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\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$2.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.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i13.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i13.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i13.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i13.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i13.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i13.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i13.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i13.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i13.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i13.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: i10$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i11$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i6$2.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"] }, { 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.14", ngImport: i0, type: RoleListComponent, decorators: [{
             type: Component,
@@ -11188,7 +11197,7 @@ class PermissionsManagementComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PermissionsManagementComponent, deps: [{ token: HttpService }, { token: AlertService }, { token: i1$2.ActivatedRoute }, { token: CredentialsService }, { token: ErrorHandlerService }, { token: UserConfigService }, { token: i3$2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: PermissionsManagementComponent, selector: "role-permissions-management", inputs: { clientId: "clientId" }, ngImport: i0, template: "<div class=\"d-flex flex-column justify-content-start m-2\">\n  <mat-card>\n    <mat-card-content class=\"d-flex justify-content-between align-items-center gap-2\">\n      <div class=\"d-flex justify-content-start align-items-center gap-2\">\n        <h5 class=\"m-0 fw-bold\">\n          Manage Role Permissions\n        </h5>\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 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)\" name=\"{{role.id}}[{{permission?.label}}]\"\n                    type=\"checkbox\" [disabled]=\"role?.client_id == null\" />\n                </div>\n              </td>\n            </ng-container>\n          </tr>\n        </tbody>\n      </table>\n    </form>\n  </mat-card>\n</div>", styles: ["input[type=checkbox]{color-scheme:light}\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$2.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$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i7$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i9.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i9$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], 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: i3$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: PermissionsManagementComponent, selector: "role-permissions-management", inputs: { clientId: "clientId" }, ngImport: i0, template: "<div class=\"d-flex flex-column justify-content-start m-2\">\n  <mat-card>\n    <mat-card-content class=\"d-flex justify-content-between align-items-center gap-2\">\n      <div class=\"d-flex justify-content-start align-items-center gap-2\">\n        <h5 class=\"m-0 fw-bold\">\n          Manage Role Permissions\n        </h5>\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 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)\" name=\"{{role.id}}[{{permission?.label}}]\"\n                    type=\"checkbox\" [disabled]=\"role?.client_id == null\" />\n                </div>\n              </td>\n            </ng-container>\n          </tr>\n        </tbody>\n      </table>\n    </form>\n  </mat-card>\n</div>", styles: ["input[type=checkbox]{color-scheme:light}\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$2.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$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i7$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i9.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i6$3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i9$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], 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: i3$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PermissionsManagementComponent, decorators: [{
             type: Component,
@@ -11384,7 +11393,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: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i7$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i7$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i5$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i9$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], 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: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i7$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i7$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i6$3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i9$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: UserSelectorComponent, decorators: [{
             type: Component,
@@ -11767,7 +11776,7 @@ class AdminRolePermissionFormComponent extends TechlifyFormComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AdminRolePermissionFormComponent, deps: [{ token: FormValidatorService }, { token: i1.MatDialog }, { token: i3$2.UntypedFormBuilder }, { token: AdminRoleService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: AdminRolePermissionFormComponent, selector: "app-admin-role-permission-form", inputs: { isUpdate: "isUpdate", roleInfo: "roleInfo" }, outputs: { success: "success" }, usesInheritance: true, ngImport: i0, template: "<app-techlify-icon name=\"edit\" matTooltip=\"Edit\" (click)=\"formDialog(formTemplate)\"\n    class=\"clickable\"></app-techlify-icon>\n\n\n<ng-template #formTemplate>\n    <mat-progress-bar mode=\"indeterminate\" *ngIf=\"this.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>Role Permission Form</div>\n            </div>\n\n            <div mat-dialog-content fxLayout=\"column\" fxLayoutGap=\"0.25rem\">\n                <mat-form-field appearance=\"outline\">\n                    <mat-label>Permission</mat-label>\n                    <app-searchable-selector appearance=\"outline\" formControlName=\"permission_ids\" titleField=\"label\"\n                        apiUrl=\"api/permissions\" sortBy=\"label|ASC\" [selectedValue]=\"selectedPermissions\"\n                        [multiple]=\"true\" [required]=\"true\"></app-searchable-selector>\n                    <mat-error *ngIf=\"isFieldValid('permission_ids')\">{{getErrorMessage('permission_ids')}}\n                    </mat-error>\n                </mat-form-field>\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: 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", "isEmitInitialEvent", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange", "isItemsEmpty"] }, { kind: "component", type: TechlifyIconComponent, selector: "app-techlify-icon", inputs: ["name", "size"] }, { 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.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$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i7$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i10.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i11$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i6$1.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: i6$1.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: i6$1.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.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: i3$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: AdminRolePermissionFormComponent, selector: "app-admin-role-permission-form", inputs: { isUpdate: "isUpdate", roleInfo: "roleInfo" }, outputs: { success: "success" }, usesInheritance: true, ngImport: i0, template: "<app-techlify-icon name=\"edit\" matTooltip=\"Edit\" (click)=\"formDialog(formTemplate)\"\n    class=\"clickable\"></app-techlify-icon>\n\n\n<ng-template #formTemplate>\n    <mat-progress-bar mode=\"indeterminate\" *ngIf=\"this.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>Role Permission Form</div>\n            </div>\n\n            <div mat-dialog-content fxLayout=\"column\" fxLayoutGap=\"0.25rem\">\n                <mat-form-field appearance=\"outline\">\n                    <mat-label>Permission</mat-label>\n                    <app-searchable-selector appearance=\"outline\" formControlName=\"permission_ids\" titleField=\"label\"\n                        apiUrl=\"api/permissions\" sortBy=\"label|ASC\" [selectedValue]=\"selectedPermissions\"\n                        [multiple]=\"true\" [required]=\"true\"></app-searchable-selector>\n                    <mat-error *ngIf=\"isFieldValid('permission_ids')\">{{getErrorMessage('permission_ids')}}\n                    </mat-error>\n                </mat-form-field>\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: 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", "isEmitInitialEvent", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange", "isItemsEmpty"] }, { kind: "component", type: TechlifyIconComponent, selector: "app-techlify-icon", inputs: ["name", "size"] }, { 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.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$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i7$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i10$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i11$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i6$1.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: i6$1.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: i6$1.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.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: i3$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AdminRolePermissionFormComponent, decorators: [{
             type: Component,
@@ -11863,7 +11872,7 @@ let AdminRoleListComponent = class AdminRoleListComponent extends TechlifyListCo
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AdminRoleListComponent, deps: [{ token: AdminRoleService }, { token: FilterService }, { token: i1$2.ActivatedRoute }, { token: i3$2.UntypedFormBuilder }, { token: i1.MatDialog }, { token: i6$6.NgxSpinnerService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: AdminRoleListComponent, selector: "app-admin-role-list", 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\">Global Roles</h5>\n            <app-role-form-button (success)=\"reload()\" class=\"mt-2\"></app-role-form-button>\n        </div>\n    </mat-card>\n    <mat-card appearance=\"outlined\" class=\"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 role; let i = index\"> {{ i+1 }} </td>\n            </ng-container>\n\n            <ng-container matColumnDef=\"label\">\n                <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear> Label </th>\n                <td mat-cell *matCellDef=\"let role\">\n                    <span>{{role?.label }}</span>\n                </td>\n            </ng-container>\n\n            <ng-container matColumnDef=\"description\">\n                <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear> Description </th>\n                <td mat-cell *matCellDef=\"let role\">\n                    <span>{{role?.description }}</span>\n                </td>\n            </ng-container>\n\n            <ng-container matColumnDef=\"permissions_count\">\n                <th mat-header-cell *matHeaderCellDef> Permissions </th>\n                <td mat-cell *matCellDef=\"let role\">\n                    <div>{{role?.permissions_count}}</div>\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 role\">\n                    <div class=\"text-secondary\" fxLayoutAlign=\"start center\">\n                        <app-admin-role-permission-form (success)=\"reload()\" [roleInfo]=\"role\"\n                            class=\"text-muted\"></app-admin-role-permission-form>\n                        <app-techlify-icon name=\"view\" matTooltip=\"View\" [routerLink]=\"['/admin/role-view',role?.id]\"\n                            class=\"clickable ml-1\"></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-card>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: AdminRolePermissionFormComponent, selector: "app-admin-role-permission-form", inputs: ["isUpdate", "roleInfo"], outputs: ["success"] }, { kind: "directive", type: i12.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i12.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i13.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i13.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i13.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i13.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i13.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i13.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i13.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i13.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i13.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i13.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i10.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i6$1.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: i6$1.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: i6$1.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: TechlifyIconComponent, selector: "app-techlify-icon", inputs: ["name", "size"] }, { kind: "directive", type: i6$2.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.14", type: AdminRoleListComponent, selector: "app-admin-role-list", 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\">Global Roles</h5>\n            <app-role-form-button (success)=\"reload()\" class=\"mt-2\"></app-role-form-button>\n        </div>\n    </mat-card>\n    <mat-card appearance=\"outlined\" class=\"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 role; let i = index\"> {{ i+1 }} </td>\n            </ng-container>\n\n            <ng-container matColumnDef=\"label\">\n                <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear> Label </th>\n                <td mat-cell *matCellDef=\"let role\">\n                    <span>{{role?.label }}</span>\n                </td>\n            </ng-container>\n\n            <ng-container matColumnDef=\"description\">\n                <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear> Description </th>\n                <td mat-cell *matCellDef=\"let role\">\n                    <span>{{role?.description }}</span>\n                </td>\n            </ng-container>\n\n            <ng-container matColumnDef=\"permissions_count\">\n                <th mat-header-cell *matHeaderCellDef> Permissions </th>\n                <td mat-cell *matCellDef=\"let role\">\n                    <div>{{role?.permissions_count}}</div>\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 role\">\n                    <div class=\"text-secondary\" fxLayoutAlign=\"start center\">\n                        <app-admin-role-permission-form (success)=\"reload()\" [roleInfo]=\"role\"\n                            class=\"text-muted\"></app-admin-role-permission-form>\n                        <app-techlify-icon name=\"view\" matTooltip=\"View\" [routerLink]=\"['/admin/role-view',role?.id]\"\n                            class=\"clickable ml-1\"></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-card>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: AdminRolePermissionFormComponent, selector: "app-admin-role-permission-form", inputs: ["isUpdate", "roleInfo"], outputs: ["success"] }, { kind: "directive", type: i12.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i12.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i13.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i13.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i13.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i13.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i13.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i13.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i13.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i13.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i13.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i13.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i10$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i6$1.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: i6$1.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: i6$1.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: TechlifyIconComponent, selector: "app-techlify-icon", inputs: ["name", "size"] }, { kind: "directive", type: i6$2.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"] }] }); }
 };
 AdminRoleListComponent = __decorate([
     UntilDestroy()
@@ -12609,7 +12618,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$3.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$3.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: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i10.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: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$3.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$3.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: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i10$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RestrictorTypeSelectorComponent, decorators: [{
             type: Component,
@@ -13033,7 +13042,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: i6$1.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: i6$1.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: i6$1.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$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i7$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i9.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i9$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i3$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.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: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6$1.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: i6$1.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: i6$1.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$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i7$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i9.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i6$3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i9$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i3$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IpRangeSelectorComponent, decorators: [{
             type: Component,
@@ -13122,7 +13131,7 @@ class RestrictorsFormComponent {
         this.location.back();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RestrictorsFormComponent, deps: [{ token: i3$2.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.14", 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: i6$1.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: i6$1.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: i6$1.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.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.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$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i7$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: i11.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i11.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "directive", type: i3$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i9$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i5$1.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", "isEmitInitialEvent", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange", "isItemsEmpty"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", 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: i6$1.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: i6$1.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: i6$1.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.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.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$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i7$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: i11.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i11.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "directive", type: i3$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i9$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6$3.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", "isEmitInitialEvent", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange", "isItemsEmpty"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RestrictorsFormComponent, decorators: [{
             type: Component,
@@ -13677,7 +13686,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$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7$1.MatLabel, selector: "mat-label" }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i9.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i10.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i3$3.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$3.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: i3$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i3$2.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: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i7$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7$1.MatLabel, selector: "mat-label" }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i9.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i10$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i3$3.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$3.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: i3$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i3$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NumberInputButtonComponent, decorators: [{
             type: Component,
@@ -13808,7 +13817,7 @@ class NumberSelectorComponent {
                 provide: MatFormFieldControl,
                 useExisting: NumberSelectorComponent
             }
-        ], ngImport: i0, template: "<mat-select [value]=\"selected()\" [required]=\"required\" [disabled]=\"disabled\" [attr.aria-describedby]=\"describedBy\"\n  (selectionChange)=\"handleChange($event.value)\">\n  <mat-option *ngFor=\"let item of items()\" [value]=\"item\">{{ item }}</mat-option>\n</mat-select>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MaterialModule }, { kind: "component", type: i5$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i9$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }] }); }
+        ], ngImport: i0, template: "<mat-select [value]=\"selected()\" [required]=\"required\" [disabled]=\"disabled\" [attr.aria-describedby]=\"describedBy\"\n  (selectionChange)=\"handleChange($event.value)\">\n  <mat-option *ngFor=\"let item of items()\" [value]=\"item\">{{ item }}</mat-option>\n</mat-select>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MaterialModule }, { kind: "component", type: i6$3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i9$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NumberSelectorComponent, decorators: [{
             type: Component,
@@ -13832,6 +13841,192 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 args: [{ transform: booleanAttribute }]
             }] } });
+class CountryService extends TechlifyService {
+    constructor(http) {
+        super(http, 'countries');
+        this.http = http;
+    }
+    getCountriesObservable(reload = false) {
+        if (this.countries && !reload) {
+            return of(this.countries);
+        }
+        return this.http.cache(reload).get('api/countries', { params: { per_page: 1000, sort_by: 'name|ASC' } })
+            .pipe(map((res) => {
+            const countries = res?.data ?? [];
+            this.countries = countries;
+            return countries;
+        }));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CountryService, deps: [{ token: HttpService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CountryService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CountryService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: HttpService }] });
+class PhoneNumberSelectorComponent {
+    constructor(service) {
+        this.service = service;
+        this.label = input('Phone Number');
+        this.placeholder = input('');
+        this.required = input(false);
+        this.countries = signal([]);
+        this.phoneGroup = new FormGroup({
+            country_code: new FormControl('GY'),
+            number: new FormControl(''),
+        });
+        this.onChange = () => { };
+        this.onTouched = () => { };
+        this.destroy$ = new Subject();
+        /**
+         * Used to validate inline that the number entered is valid based on the
+         * selected country's phone length, with or without its calling code.
+         * Countries without a phone length are not validated yet
+         */
+        this.phoneFormatValidator = (ctrl) => {
+            const number = ctrl.value;
+            const country = this.getCountry(ctrl.parent?.get('country_code')?.value ?? 'GY');
+            if (!number || !country?.phone_length) {
+                return null;
+            }
+            return this.toLocalDigits(number, country).length === country.phone_length
+                ? null
+                : { invalidPhone: true };
+        };
+        effect(() => {
+            const ctrl = this.phoneGroup.get('number');
+            if (this.required()) {
+                ctrl?.addValidators(Validators.required);
+            }
+            else {
+                ctrl?.removeValidators(Validators.required);
+            }
+            ctrl?.updateValueAndValidity({ emitEvent: false });
+        });
+    }
+    ngOnInit() {
+        this.phoneGroup.get('number')?.addValidators(this.phoneFormatValidator);
+        this.service.getCountriesObservable()
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(countries => {
+            this.countries.set(countries.filter(country => country.phone_length));
+            this.writeValue(this.phoneGroup.get('number')?.value || null);
+        });
+        this.phoneGroup.get('country_code')?.valueChanges
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(() => {
+            this.phoneGroup.get('number')?.updateValueAndValidity({ emitEvent: false });
+        });
+        this.phoneGroup.valueChanges.pipe(takeUntil(this.destroy$)).subscribe(value => {
+            this.onChange(this.normalizeForApi(value.number ?? '', value.country_code ?? 'GY'));
+        });
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    writeValue(value) {
+        let countryCode = this.phoneGroup.get('country_code')?.value ?? 'GY';
+        let number = value ?? '';
+        // Countries are not loaded yet, this runs again once they are
+        if (!this.countries().length) {
+            this.phoneGroup.patchValue({ number }, { emitEvent: false });
+            return;
+        }
+        const country = this.detectCountry(number);
+        if (country) {
+            countryCode = country.iso_code;
+            number = number.replace(new RegExp(`^\\+?${country.calling_code}[-\\s]*`), '');
+        }
+        this.phoneGroup.patchValue({ country_code: countryCode, number }, { emitEvent: false });
+        this.phoneGroup.get('number')?.updateValueAndValidity({ emitEvent: false });
+        this.onChange(this.normalizeForApi(number, countryCode));
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        isDisabled ? this.phoneGroup.disable() : this.phoneGroup.enable();
+    }
+    /**
+     * Adjust the number to be sent to the api in the correct format
+     */
+    normalizeForApi(number, countryCode) {
+        if (!number.replace(/\D/g, '')) {
+            return '';
+        }
+        const country = this.getCountry(countryCode);
+        if (!country) {
+            return number;
+        }
+        const local = this.toLocalDigits(number, country);
+        if (!country.phone_length) {
+            return `+${country.calling_code}-${local}`;
+        }
+        if (local.length !== country.phone_length) {
+            return number;
+        }
+        if (country.calling_code === '592') {
+            return `+592-${local.slice(0, 3)}-${local.slice(3)}`;
+        }
+        if (country.calling_code === '1') {
+            return `+1 (${local.slice(0, 3)}) ${local.slice(3, 6)}-${local.slice(6)}`;
+        }
+        return `+${country.calling_code}-${local}`;
+    }
+    getCountry(isoCode) {
+        return this.countries().find(country => country.iso_code === isoCode);
+    }
+    /**
+     * Returns the digits of the number without the country's calling code
+     */
+    toLocalDigits(number, country) {
+        const digits = number.replace(/\D/g, '');
+        if (digits.length === country.calling_code.length + country.phone_length
+            && digits.startsWith(country.calling_code)) {
+            return digits.slice(country.calling_code.length);
+        }
+        return digits;
+    }
+    /**
+     * Finds the country from the calling code the number starts with.
+     * +1 is shared by several countries, so it defaults to US like before
+     */
+    detectCountry(number) {
+        const matches = this.countries().filter(country => number.startsWith(`+${country.calling_code}`)
+            || (country.phone_length
+                && number.startsWith(country.calling_code)
+                && number.replace(/\D/g, '').length === country.calling_code.length + country.phone_length));
+        return matches.find(country => country.iso_code === 'US') ?? matches[0];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PhoneNumberSelectorComponent, deps: [{ token: CountryService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: PhoneNumberSelectorComponent, isStandalone: true, selector: "app-phone-number-selector", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => PhoneNumberSelectorComponent),
+                multi: true,
+            },
+        ], ngImport: i0, template: "<mat-form-field class=\"w-100\" [formGroup]=\"phoneGroup\">\n  <mat-label>{{ label() }}</mat-label>\n  <input matInput formControlName=\"number\" [placeholder]=\"placeholder()\" [required]=\"required()\" (blur)=\"onTouched()\">\n  <mat-select matPrefix formControlName=\"country_code\" [panelWidth]=\"null\" class=\"phone-prefix-select\">\n    <mat-option *ngFor=\"let country of countries()\" [value]=\"country.iso_code\">{{ country.iso_code }} +{{ country.calling_code }}</mat-option>\n  </mat-select>\n  <mat-error *ngIf=\"phoneGroup.get('number')?.hasError('required')\">{{ label() }} is required</mat-error>\n  <mat-error *ngIf=\"phoneGroup.get('number')?.hasError('invalidPhone')\">\n    Invalid {{ phoneGroup.get('country_code')?.value }} phone number\n  </mat-error>\n</mat-form-field>\n", styles: [".phone-prefix-select{width:90px;margin-left:8px;text-align:center}.phone-prefix-select ::ng-deep .mat-mdc-select-value{text-align:center}.phone-prefix-select ::ng-deep .mat-mdc-select-arrow-wrapper{display:none}.phone-prefix-select ::ng-deep .mat-mdc-select-trigger{display:inline-flex;align-items:center;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: SharedModule }, { 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.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "component", type: i7$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i7$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i7$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i9.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i6$3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i9$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i3$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PhoneNumberSelectorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-phone-number-selector', standalone: true, imports: [
+                        SharedModule
+                    ], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => PhoneNumberSelectorComponent),
+                            multi: true,
+                        },
+                    ], template: "<mat-form-field class=\"w-100\" [formGroup]=\"phoneGroup\">\n  <mat-label>{{ label() }}</mat-label>\n  <input matInput formControlName=\"number\" [placeholder]=\"placeholder()\" [required]=\"required()\" (blur)=\"onTouched()\">\n  <mat-select matPrefix formControlName=\"country_code\" [panelWidth]=\"null\" class=\"phone-prefix-select\">\n    <mat-option *ngFor=\"let country of countries()\" [value]=\"country.iso_code\">{{ country.iso_code }} +{{ country.calling_code }}</mat-option>\n  </mat-select>\n  <mat-error *ngIf=\"phoneGroup.get('number')?.hasError('required')\">{{ label() }} is required</mat-error>\n  <mat-error *ngIf=\"phoneGroup.get('number')?.hasError('invalidPhone')\">\n    Invalid {{ phoneGroup.get('country_code')?.value }} phone number\n  </mat-error>\n</mat-form-field>\n", styles: [".phone-prefix-select{width:90px;margin-left:8px;text-align:center}.phone-prefix-select ::ng-deep .mat-mdc-select-value{text-align:center}.phone-prefix-select ::ng-deep .mat-mdc-select-arrow-wrapper{display:none}.phone-prefix-select ::ng-deep .mat-mdc-select-trigger{display:inline-flex;align-items:center;height:100%}\n"] }]
+        }], ctorParameters: () => [{ type: CountryService }] });
 class ColumnConfig {
 }
@@ -13910,7 +14105,7 @@ class ColumnSelectorComponent {
         this.displayedColumnsChange.emit(finalColumns.map(c => c.def));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ColumnSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", 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$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i7$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i5$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i9$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i3$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i9.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i6$1.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.14", 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$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i7$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i6$3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i9$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i3$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i9.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i6$1.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.14", ngImport: i0, type: ColumnSelectorComponent, decorators: [{
             type: Component,
@@ -14433,7 +14628,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
 class AppAdminHomeComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AppAdminHomeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: AppAdminHomeComponent, isStandalone: true, selector: "app-app-admin-home", ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-lg-6\">\n    <app-tenant-list-widget *ngxPermissionsOnly=\"['app_admin']\"></app-tenant-list-widget>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: TenantListWidgetComponent, selector: "app-tenant-list-widget" }, { kind: "ngmodule", type: NgxPermissionsModule }, { kind: "directive", type: i5$2.NgxPermissionsDirective, selector: "[ngxPermissionsOnly],[ngxPermissionsExcept]", inputs: ["ngxPermissionsOnly", "ngxPermissionsOnlyThen", "ngxPermissionsOnlyElse", "ngxPermissionsExcept", "ngxPermissionsExceptElse", "ngxPermissionsExceptThen", "ngxPermissionsThen", "ngxPermissionsElse", "ngxPermissionsOnlyAuthorisedStrategy", "ngxPermissionsOnlyUnauthorisedStrategy", "ngxPermissionsExceptUnauthorisedStrategy", "ngxPermissionsExceptAuthorisedStrategy", "ngxPermissionsUnauthorisedStrategy", "ngxPermissionsAuthorisedStrategy"], outputs: ["permissionsAuthorized", "permissionsUnauthorized"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: AppAdminHomeComponent, isStandalone: true, selector: "app-app-admin-home", ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-lg-6\">\n    <app-tenant-list-widget *ngxPermissionsOnly=\"['app_admin']\"></app-tenant-list-widget>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: TenantListWidgetComponent, selector: "app-tenant-list-widget" }, { kind: "ngmodule", type: NgxPermissionsModule }, { kind: "directive", type: i5$1.NgxPermissionsDirective, selector: "[ngxPermissionsOnly],[ngxPermissionsExcept]", inputs: ["ngxPermissionsOnly", "ngxPermissionsOnlyThen", "ngxPermissionsOnlyElse", "ngxPermissionsExcept", "ngxPermissionsExceptElse", "ngxPermissionsExceptThen", "ngxPermissionsThen", "ngxPermissionsElse", "ngxPermissionsOnlyAuthorisedStrategy", "ngxPermissionsOnlyUnauthorisedStrategy", "ngxPermissionsExceptUnauthorisedStrategy", "ngxPermissionsExceptAuthorisedStrategy", "ngxPermissionsUnauthorisedStrategy", "ngxPermissionsAuthorisedStrategy"], outputs: ["permissionsAuthorized", "permissionsUnauthorized"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AppAdminHomeComponent, decorators: [{
             type: Component,
@@ -14719,12 +14914,9 @@ let AppAdminUserList = class AppAdminUserList extends TechlifyListComponent {
      */
     getUserType(user) {
         let userClient;
-        if (this.currentUserService.getUser()?.user_type_id === UserTypeEnum.ADMIN && !!this.clientId) {
+        if (!!this.clientId) {
             userClient = (user?.user_clients).find((item) => item?.client_id === this.clientId);
         }
-        else {
-            userClient = (user?.user_clients).find((item) => item?.client_id === this.currentUser?.client_id);
-        }
         return userClient?.type?.title || '';
     }
     resetPassword(user) {
@@ -14734,7 +14926,7 @@ let AppAdminUserList = class AppAdminUserList extends TechlifyListComponent {
             .subscribe(_ => this.alertService.addAlert('Password reset email sent', 'success'));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AppAdminUserList, deps: [{ token: AlertService }, { token: CurrentUserService }, { token: UserConfigService }, { token: UserService }, { token: i3$2.UntypedFormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: AppAdminUserList, isStandalone: true, selector: "app-admin-user-list", inputs: { clientId: "clientId", userTypeIds: "userTypeIds", title: "title" }, usesInheritance: true, ngImport: i0, template: "<div [ngClass]=\"{'m-4':config?.userConfig?.showDefaultMargin}\">\n  <mat-card class=\"mb-2\">\n    <mat-card-content class=\"d-flex justify-content-between align-items-center gap-2\">\n      <section class=\"d-flex justify-content-start align-items-center gap-2\">\n        <h5 class=\"mb-0\"> {{ title }} </h5>\n        <app-techlify-form-button [component]=\"userFormComponent\" matTooltip=\"New User\"\n          [data]=\"{client_id: clientId ?? currentUser?.client_id}\"\n          *ngIf=\"config?.userConfig?.showAddUser && currentUserService?.hasPermission('user_create')\"\n          (saved)=\"modelCreated($event)\"></app-techlify-form-button>\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\" class=\"d-flex flex-row justify-content-center align-items-center gap-2\">\n        <mat-form-field appearance=\"outline\" class='fl-md'>\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\" class='fl-sm'>\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-form-field appearance=\"outline\" class='fl-sm'>\n          <mat-label>User Type</mat-label>\n          <app-searchable-selector apiUrl=\"api/user-types\" [multiple]=\"true\" formControlName=\"user_type_ids\"\n            titleField=\"title\"></app-searchable-selector>\n        </mat-form-field>\n        <mat-button-toggle-group class='mb-4' [hideSingleSelectionIndicator]=\"true\"\n          [hideMultipleSelectionIndicator]=\"true\" 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)=\"sortColumn($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 class=\"d-flex flex-row justify-content-start align-items-center gap-2 text-secondary\">\n              <app-techlify-icon role='button' name=\"view\" class=\"clickable\" [routerLink]=\"[getUserViewRoute(element)]\"\n                matTooltip=\"View\"></app-techlify-icon>\n\n              <app-techlify-form-button [component]=\"userFormComponent\" [model]=\"element\" class=\"clickable\"\n                [data]=\"{client_id: clientId ?? currentUser?.client_id}\" matTooltip=\"Edit\"\n                *ngIf=\"currentUserService.hasPermission('user_update')\"\n                (saved)=\"modelsUpdatedById($event)\"></app-techlify-form-button>\n\n              <app-techlify-delete-button\n                *ngIf=\"currentUserService.hasPermission('user_delete') && element?.id !== currentUser?.id\"\n                [model]=\"element\" [service]=\"service\" [data]=\"{title: element?.name, type: 'user'}\"\n                (deleted)=\"modelsDeletedById(element)\"></app-techlify-delete-button>\n\n              <app-techlify-icon role='button'\n                *ngIf=\"currentUserService.hasPermission('techlify_rbac.user.reset_password')\" name=\"reset\"\n                class=\"clickable\" (click)=\"resetPassword(element)\" matTooltip=\"Reset User Password\"></app-techlify-icon>\n\n              <app-user-enable-button [user]=\"element\" (onSave)=\"modelsUpdatedById($event)\"></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: "ngmodule", type: SharedModule }, { 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$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i6$2.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: i7$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7$1.MatLabel, selector: "mat-label" }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i9.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i12.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i12.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i13.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i13.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i13.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i13.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i13.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i13.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i13.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i13.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i13.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i13.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: i10.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i3$3.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$3.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: i11$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i3$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$2.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", "isEmitInitialEvent", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange", "isItemsEmpty"] }, { kind: "component", type: TechlifyDeleteButtonComponent, selector: "app-techlify-delete-button", inputs: ["data", "model", "message", "service"], outputs: ["deleted"] }, { kind: "component", type: TechlifyFormButtonComponent, selector: "app-techlify-form-button", inputs: ["component", "model", "data", "width"], outputs: ["saved"] }, { kind: "component", type: TechlifyIconComponent, selector: "app-techlify-icon", inputs: ["name", "size"] }, { kind: "pipe", type: i3.DatePipe, name: "date" }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: UserEnableButtonModule }, { kind: "component", type: UserEnableButtonComponent, selector: "app-user-enable-button", inputs: ["user", "isUseIcons"], outputs: ["onSave"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: AppAdminUserList, isStandalone: true, selector: "app-admin-user-list", inputs: { clientId: "clientId", userTypeIds: "userTypeIds", title: "title" }, usesInheritance: true, ngImport: i0, template: "<div [ngClass]=\"{'m-4':config?.userConfig?.showDefaultMargin}\">\n  <mat-card class=\"mb-2\">\n    <mat-card-content class=\"d-flex justify-content-between align-items-center gap-2\">\n      <section class=\"d-flex justify-content-start align-items-center gap-2\">\n        <h5 class=\"mb-0\"> {{ title }} </h5>\n        <app-techlify-form-button [component]=\"userFormComponent\" matTooltip=\"New User\"\n          [data]=\"{client_id: clientId ?? currentUser?.client_id}\"\n          *ngIf=\"config?.userConfig?.showAddUser && currentUserService?.hasPermission('user_create')\"\n          (saved)=\"modelCreated($event)\"></app-techlify-form-button>\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\" class=\"d-flex flex-row justify-content-center align-items-center gap-2\">\n        <mat-form-field appearance=\"outline\" class='fl-md'>\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\" class='fl-sm'>\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-form-field appearance=\"outline\" class='fl-sm'>\n          <mat-label>User Type</mat-label>\n          <app-searchable-selector apiUrl=\"api/user-types\" [multiple]=\"true\" formControlName=\"user_type_ids\"\n            titleField=\"title\"></app-searchable-selector>\n        </mat-form-field>\n        <mat-button-toggle-group class='mb-4' [hideSingleSelectionIndicator]=\"true\"\n          [hideMultipleSelectionIndicator]=\"true\" 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)=\"sortColumn($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 class=\"d-flex flex-row justify-content-start align-items-center gap-2 text-secondary\">\n              <app-techlify-icon role='button' name=\"view\" class=\"clickable\" [routerLink]=\"[getUserViewRoute(element)]\"\n                matTooltip=\"View\"></app-techlify-icon>\n\n              <app-techlify-form-button [component]=\"userFormComponent\" [model]=\"element\" class=\"clickable\"\n                [data]=\"{client_id: clientId ?? currentUser?.client_id}\" matTooltip=\"Edit\"\n                *ngIf=\"currentUserService.hasPermission('user_update')\"\n                (saved)=\"modelsUpdatedById($event)\"></app-techlify-form-button>\n\n              <app-techlify-delete-button\n                *ngIf=\"currentUserService.hasPermission('user_delete') && element?.id !== currentUser?.id\"\n                [model]=\"element\" [service]=\"service\" [data]=\"{title: element?.name, type: 'user'}\"\n                (deleted)=\"modelsDeletedById(element)\"></app-techlify-delete-button>\n\n              <app-techlify-icon role='button'\n                *ngIf=\"currentUserService.hasPermission('techlify_rbac.user.reset_password')\" name=\"reset\"\n                class=\"clickable\" (click)=\"resetPassword(element)\" matTooltip=\"Reset User Password\"></app-techlify-icon>\n\n              <app-user-enable-button [user]=\"element\" (onSave)=\"modelsUpdatedById($event)\"></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: "ngmodule", type: SharedModule }, { 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$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i6$2.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: i7$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7$1.MatLabel, selector: "mat-label" }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i9.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i12.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i12.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i13.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i13.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i13.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i13.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i13.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i13.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i13.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i13.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i13.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i13.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: i10$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i3$3.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$3.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: i11$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i3$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$2.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", "isEmitInitialEvent", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange", "isItemsEmpty"] }, { kind: "component", type: TechlifyDeleteButtonComponent, selector: "app-techlify-delete-button", inputs: ["data", "model", "message", "service"], outputs: ["deleted"] }, { kind: "component", type: TechlifyFormButtonComponent, selector: "app-techlify-form-button", inputs: ["component", "model", "data", "width"], outputs: ["saved"] }, { kind: "component", type: TechlifyIconComponent, selector: "app-techlify-icon", inputs: ["name", "size"] }, { kind: "pipe", type: i3.DatePipe, name: "date" }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: UserEnableButtonModule }, { kind: "component", type: UserEnableButtonComponent, selector: "app-user-enable-button", inputs: ["user", "isUseIcons"], outputs: ["onSave"] }] }); }
 };
 AppAdminUserList = __decorate([
     UntilDestroy()
@@ -14773,7 +14965,7 @@ class PdfButtonComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PdfButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: PdfButtonComponent, selector: "pdf-button", inputs: { isUsePrintIcon: "isUsePrintIcon" }, outputs: { isLoading: "isLoading" }, ngImport: i0, template: "<app-techlify-icon *ngIf=\"!isUsePrintIcon\" name=\"pdf\" class=\"clickable d-print-none\" (click)=\"print()\"\n    matTooltip=\"PDF Export\">\n</app-techlify-icon>\n\n<app-techlify-icon *ngIf=\"isUsePrintIcon\" name=\"print\" class=\"clickable d-print-none\" (click)=\"print()\"\n    matTooltip=\"Print\">\n</app-techlify-icon>", styles: [":host{display:flex;align-content:center}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TechlifyIconComponent, selector: "app-techlify-icon", inputs: ["name", "size"] }, { kind: "directive", type: i10.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.14", type: PdfButtonComponent, selector: "pdf-button", inputs: { isUsePrintIcon: "isUsePrintIcon" }, outputs: { isLoading: "isLoading" }, ngImport: i0, template: "<app-techlify-icon *ngIf=\"!isUsePrintIcon\" name=\"pdf\" class=\"clickable d-print-none\" (click)=\"print()\"\n    matTooltip=\"PDF Export\">\n</app-techlify-icon>\n\n<app-techlify-icon *ngIf=\"isUsePrintIcon\" name=\"print\" class=\"clickable d-print-none\" (click)=\"print()\"\n    matTooltip=\"Print\">\n</app-techlify-icon>", styles: [":host{display:flex;align-content:center}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TechlifyIconComponent, selector: "app-techlify-icon", inputs: ["name", "size"] }, { kind: "directive", type: i10$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PdfButtonComponent, decorators: [{
             type: Component,
@@ -15047,7 +15239,7 @@ class SubscriptionFormComponent extends TechlifyFormComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SubscriptionFormComponent, deps: [{ token: FormValidatorService }, { token: i1.MatDialog }, { token: i3$2.UntypedFormBuilder }, { token: SubscriptionService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", 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$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i7$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i7$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i9.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i11.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i11.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i11.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i10.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i3$3.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$3.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: i11$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i8$2.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", "isEmitInitialEvent", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange", "isItemsEmpty"] }, { kind: "directive", type: i3$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i6$1.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: i6$1.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: i6$1.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.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.14", 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$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i7$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i7$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i9.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i11.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i11.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i11.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i10$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i3$3.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$3.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: i11$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i8$2.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", "isEmitInitialEvent", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange", "isItemsEmpty"] }, { kind: "directive", type: i3$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i6$1.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: i6$1.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: i6$1.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.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.14", ngImport: i0, type: SubscriptionFormComponent, decorators: [{
             type: Component,
@@ -15183,7 +15375,7 @@ let SubscriptionListingComponent = class SubscriptionListingComponent extends Te
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SubscriptionListingComponent, deps: [{ token: SubscriptionService }, { token: i3$2.UntypedFormBuilder }, { token: i1.MatDialog }, { token: i3.DatePipe }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", 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$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i7$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i9.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i9$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i12.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i12.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i13.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i13.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i13.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i13.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i13.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i13.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i13.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i13.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i13.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i13.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i10.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i11$1.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", "isEmitInitialEvent", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange", "isItemsEmpty"] }, { kind: "directive", type: i3$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$2.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: i6$1.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: i6$1.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: i6$1.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.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$2.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.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", 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$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i7$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i9.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i6$3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i9$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i12.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i12.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i13.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i13.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i13.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i13.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i13.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i13.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i13.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i13.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i13.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i13.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i10$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i11$1.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", "isEmitInitialEvent", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange", "isItemsEmpty"] }, { kind: "directive", type: i3$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$2.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: i6$1.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: i6$1.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: i6$1.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.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$2.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" }] }); }
 };
 SubscriptionListingComponent = __decorate([
     UntilDestroy()
@@ -15357,7 +15549,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.14", ngImport: i0, type: SubscriptionPackageListingComponent, deps: [{ token: SubscriptionPackageService }, { token: i1$2.ActivatedRoute }, { token: FilterService }, { token: i1$2.Router }, { token: i1.MatDialog }, { token: i3$2.UntypedFormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", 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: i3$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$2.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$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i7$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i9.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i12.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i12.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i13.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i13.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i13.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i13.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i13.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i13.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i13.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i13.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i13.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i13.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i10.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i11$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i8$2.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: i6$1.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: i6$1.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: i6$1.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.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$2.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.14", 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: i3$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$2.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$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i7$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i9.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i12.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i12.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i13.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i13.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i13.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i13.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i13.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i13.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i13.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i13.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i13.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i13.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i10$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i11$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i8$2.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: i6$1.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: i6$1.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: i6$1.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.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$2.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()
@@ -15671,7 +15863,7 @@ class TimelineActivityButtonComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TimelineActivityButtonComponent, deps: [{ token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: TimelineActivityButtonComponent, selector: "app-timeline-activity-button", inputs: { changeableType: "changeableType", changeableId: "changeableId", timelineableType: "timelineableType", timelineableId: "timelineableId", timelineableDisplayField: "timelineableDisplayField", title: "title" }, ngImport: i0, template: "<app-techlify-icon name=\"history\" matTooltip=\"Timeline History\" (click)=\"$event.stopPropagation();openDialog(listView)\"\n    class=\"clickable\"></app-techlify-icon>\n\n<ng-template #listView>\n    <app-timeline-activity-list [changeableId]=\"changeableId\" [changeableType]=\"changeableType\"\n        [timelineableDisplayField]=\"timelineableDisplayField\" [timelineableType]=\"timelineableType\"\n        [timelineableId]=\"timelineableId\" [title]=\"title\"></app-timeline-activity-list>\n</ng-template>", 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}.create-another .mat-mdc-checkbox label{margin:0!important}.create-another .mdc-checkbox{padding:0!important}.create-another .mdc-checkbox__background{position:relative;top:0;left:0}.mat-mdc-form-field.mat-form-field-disabled .mat-mdc-input-element{color:#555!important;-webkit-text-fill-color:#555555!important}.mat-mdc-form-field.mat-form-field-disabled .mat-mdc-select-value{color:#555!important}\n"], dependencies: [{ kind: "directive", type: i10.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"] }, { kind: "component", type: TimelineActivityListComponent, selector: "app-timeline-activity-list", inputs: ["changeableType", "changeableId", "timelineableType", "timelineableId", "timelineableDisplayField", "scrollContainer", "title"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: TimelineActivityButtonComponent, selector: "app-timeline-activity-button", inputs: { changeableType: "changeableType", changeableId: "changeableId", timelineableType: "timelineableType", timelineableId: "timelineableId", timelineableDisplayField: "timelineableDisplayField", title: "title" }, ngImport: i0, template: "<app-techlify-icon name=\"history\" matTooltip=\"Timeline History\" (click)=\"$event.stopPropagation();openDialog(listView)\"\n    class=\"clickable\"></app-techlify-icon>\n\n<ng-template #listView>\n    <app-timeline-activity-list [changeableId]=\"changeableId\" [changeableType]=\"changeableType\"\n        [timelineableDisplayField]=\"timelineableDisplayField\" [timelineableType]=\"timelineableType\"\n        [timelineableId]=\"timelineableId\" [title]=\"title\"></app-timeline-activity-list>\n</ng-template>", 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}.create-another .mat-mdc-checkbox label{margin:0!important}.create-another .mdc-checkbox{padding:0!important}.create-another .mdc-checkbox__background{position:relative;top:0;left:0}.mat-mdc-form-field.mat-form-field-disabled .mat-mdc-input-element{color:#555!important;-webkit-text-fill-color:#555555!important}.mat-mdc-form-field.mat-form-field-disabled .mat-mdc-select-value{color:#555!important}\n"], dependencies: [{ kind: "directive", type: i10$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"] }, { kind: "component", type: TimelineActivityListComponent, selector: "app-timeline-activity-list", inputs: ["changeableType", "changeableId", "timelineableType", "timelineableId", "timelineableDisplayField", "scrollContainer", "title"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TimelineActivityButtonComponent, decorators: [{
             type: Component,
@@ -16167,7 +16359,7 @@ class TechlifyViewFormComponent extends TechlifyFormComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TechlifyViewFormComponent, deps: [{ token: FormValidatorService }, { token: i1.MatDialog }, { token: i3$2.UntypedFormBuilder }, { token: TechlifyViewService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: TechlifyViewFormComponent, selector: "app-techlify-view-form", inputs: { isUpdate: "isUpdate", columns: "columns", filters: "filters", pageCode: "pageCode", viewInfo: "viewInfo" }, outputs: { success: "success" }, usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"!isUpdate\" matTooltip=\"Add View\" class=\"clickable\" (click)=\"formDialog(formTemplate)\"\n    fxLayoutAlign=\"start center\">\n    <mat-icon class=\"mr-1 small-icon \">add</mat-icon>\n    <div>View</div>\n</div>\n<button *ngIf=\"isUpdate\" matTooltip=\"Edit View\" type=\"button\" mat-icon-button (click)=\"formDialog(formTemplate)\">\n    <mat-icon>edit</mat-icon>\n</button>\n\n\n<ng-template #formTemplate>\n    <mat-progress-bar mode=\"indeterminate\" *ngIf=\"this.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>View Form</div>\n            </div>\n\n            <div mat-dialog-content fxLayout=\"column\" fxLayoutGap=\"0.25rem\">\n                <mat-form-field appearance=\"outline\">\n                    <mat-label>Title</mat-label>\n                    <input matInput formControlName=\"title\" placeholder=\"Title\" required />\n                    <mat-error *ngIf=\"isFieldValid('title')\">{{getErrorMessage('title')}}\n                    </mat-error>\n                </mat-form-field>\n\n                <mat-form-field appearance=\"outline\">\n                    <mat-label>Description</mat-label>\n                    <input matInput formControlName=\"description\" placeholder=\"Description\" />\n                </mat-form-field>\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$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i7$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i9.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i10.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i11$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i6$1.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: i6$1.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: i6$1.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.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: i3$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: TechlifyViewFormComponent, selector: "app-techlify-view-form", inputs: { isUpdate: "isUpdate", columns: "columns", filters: "filters", pageCode: "pageCode", viewInfo: "viewInfo" }, outputs: { success: "success" }, usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"!isUpdate\" matTooltip=\"Add View\" class=\"clickable\" (click)=\"formDialog(formTemplate)\"\n    fxLayoutAlign=\"start center\">\n    <mat-icon class=\"mr-1 small-icon \">add</mat-icon>\n    <div>View</div>\n</div>\n<button *ngIf=\"isUpdate\" matTooltip=\"Edit View\" type=\"button\" mat-icon-button (click)=\"formDialog(formTemplate)\">\n    <mat-icon>edit</mat-icon>\n</button>\n\n\n<ng-template #formTemplate>\n    <mat-progress-bar mode=\"indeterminate\" *ngIf=\"this.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>View Form</div>\n            </div>\n\n            <div mat-dialog-content fxLayout=\"column\" fxLayoutGap=\"0.25rem\">\n                <mat-form-field appearance=\"outline\">\n                    <mat-label>Title</mat-label>\n                    <input matInput formControlName=\"title\" placeholder=\"Title\" required />\n                    <mat-error *ngIf=\"isFieldValid('title')\">{{getErrorMessage('title')}}\n                    </mat-error>\n                </mat-form-field>\n\n                <mat-form-field appearance=\"outline\">\n                    <mat-label>Description</mat-label>\n                    <input matInput formControlName=\"description\" placeholder=\"Description\" />\n                </mat-form-field>\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$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i7$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i9.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i10$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i11$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i6$1.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: i6$1.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: i6$1.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.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: i3$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TechlifyViewFormComponent, decorators: [{
             type: Component,
@@ -16408,7 +16600,7 @@ class TechlifyTaggerTagFormComponent extends TechlifyFormComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TechlifyTaggerTagFormComponent, deps: [{ token: FormValidatorService }, { token: i1.MatDialog }, { token: i3$2.UntypedFormBuilder }, { token: TagService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: TechlifyTaggerTagFormComponent, isStandalone: true, selector: "app-techlify-tagger-tag-form", inputs: { tagInfo: "tagInfo" }, usesInheritance: true, ngImport: i0, template: "<app-techlify-icon *ngIf=\"!isUpdate\" name=\"add\" matTooltip=\"Add Tag\"\n    (click)=\"formDialog(formTemplate)\"></app-techlify-icon>\n<app-techlify-icon *ngIf=\"isUpdate\" name=\"edit\" matTooltip=\"Edit Tag\"\n    (click)=\"formDialog(formTemplate)\"></app-techlify-icon>\n\n\n<ng-template #formTemplate>\n    <mat-progress-bar mode=\"indeterminate\" *ngIf=\"this.isWorking\"></mat-progress-bar>\n    <form [formGroup]=\"form\" (ngSubmit)=\"submit()\">\n        <div fxLayout=\"column\">\n            <div>\n                <h5 class=\"m-0\">Tag Form</h5>\n            </div>\n\n            <div fxLayout=\"column\" fxLayoutGap=\"0.25rem\" class=\"mt-2\">\n                <mat-form-field appearance=\"outline\">\n                    <mat-label>Name</mat-label>\n                    <input matInput formControlName=\"title\" placeholder=\"Title\" required />\n                    <mat-error *ngIf=\"isFieldValid('title')\">{{getErrorMessage('title')}}\n                    </mat-error>\n                </mat-form-field>\n\n                <mat-form-field appearance=\"outline\">\n                    <mat-label>Category</mat-label>\n                    <app-searchable-selector appearance=\"outline\" formControlName=\"category_id\"\n                        apiUrl=\"api/techlify-tagger-categories\" [selectedValue]=\"selectedCategory\" [multiple]=\"false\"\n                        [required]=\"true\"></app-searchable-selector>\n                    <mat-error *ngIf=\"isFieldValid('category_id')\">{{getErrorMessage('category_id')}}\n                    </mat-error>\n                </mat-form-field>\n\n                <mat-form-field appearance=\"outline\">\n                    <mat-label>Description</mat-label>\n                    <textarea matInput formControlName=\"description\" placeholder=\"Description\"></textarea>\n                </mat-form-field>\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                        [disabled]=\"isWorking\">\n                        Cancel\n                    </button>\n                    <button fxFlex mat-raised-button color=\"primary\" type=\"submit\" [disabled]=\"isWorking\">\n                        Save\n                    </button>\n                </div>\n            </div>\n        </div>\n    </form>\n</ng-template>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FlexLayoutModule }, { kind: "directive", type: i6$1.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: i6$1.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: i6$1.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.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: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { 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: "directive", type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "component", type: i7$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i7$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i9.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i10.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i11$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "ngmodule", type: TechlifyIconModule }, { kind: "component", type: TechlifyIconComponent, selector: "app-techlify-icon", inputs: ["name", "size"] }, { kind: "ngmodule", type: NgxPermissionsModule }, { kind: "ngmodule", type: SearchableSelectorModule }, { 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", "isEmitInitialEvent", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange", "isItemsEmpty"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: TechlifyTaggerTagFormComponent, isStandalone: true, selector: "app-techlify-tagger-tag-form", inputs: { tagInfo: "tagInfo" }, usesInheritance: true, ngImport: i0, template: "<app-techlify-icon *ngIf=\"!isUpdate\" name=\"add\" matTooltip=\"Add Tag\"\n    (click)=\"formDialog(formTemplate)\"></app-techlify-icon>\n<app-techlify-icon *ngIf=\"isUpdate\" name=\"edit\" matTooltip=\"Edit Tag\"\n    (click)=\"formDialog(formTemplate)\"></app-techlify-icon>\n\n\n<ng-template #formTemplate>\n    <mat-progress-bar mode=\"indeterminate\" *ngIf=\"this.isWorking\"></mat-progress-bar>\n    <form [formGroup]=\"form\" (ngSubmit)=\"submit()\">\n        <div fxLayout=\"column\">\n            <div>\n                <h5 class=\"m-0\">Tag Form</h5>\n            </div>\n\n            <div fxLayout=\"column\" fxLayoutGap=\"0.25rem\" class=\"mt-2\">\n                <mat-form-field appearance=\"outline\">\n                    <mat-label>Name</mat-label>\n                    <input matInput formControlName=\"title\" placeholder=\"Title\" required />\n                    <mat-error *ngIf=\"isFieldValid('title')\">{{getErrorMessage('title')}}\n                    </mat-error>\n                </mat-form-field>\n\n                <mat-form-field appearance=\"outline\">\n                    <mat-label>Category</mat-label>\n                    <app-searchable-selector appearance=\"outline\" formControlName=\"category_id\"\n                        apiUrl=\"api/techlify-tagger-categories\" [selectedValue]=\"selectedCategory\" [multiple]=\"false\"\n                        [required]=\"true\"></app-searchable-selector>\n                    <mat-error *ngIf=\"isFieldValid('category_id')\">{{getErrorMessage('category_id')}}\n                    </mat-error>\n                </mat-form-field>\n\n                <mat-form-field appearance=\"outline\">\n                    <mat-label>Description</mat-label>\n                    <textarea matInput formControlName=\"description\" placeholder=\"Description\"></textarea>\n                </mat-form-field>\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                        [disabled]=\"isWorking\">\n                        Cancel\n                    </button>\n                    <button fxFlex mat-raised-button color=\"primary\" type=\"submit\" [disabled]=\"isWorking\">\n                        Save\n                    </button>\n                </div>\n            </div>\n        </div>\n    </form>\n</ng-template>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FlexLayoutModule }, { kind: "directive", type: i6$1.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: i6$1.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: i6$1.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.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: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { 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: "directive", type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "component", type: i7$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i7$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i9.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i10$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i11$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "ngmodule", type: TechlifyIconModule }, { kind: "component", type: TechlifyIconComponent, selector: "app-techlify-icon", inputs: ["name", "size"] }, { kind: "ngmodule", type: NgxPermissionsModule }, { kind: "ngmodule", type: SearchableSelectorModule }, { 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", "isEmitInitialEvent", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange", "isItemsEmpty"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TechlifyTaggerTagFormComponent, decorators: [{
             type: Component,
@@ -16448,7 +16640,7 @@ class TechlifyTaggerTagListComponent extends TechlifyListComponent {
         this.listenFilterChanges();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TechlifyTaggerTagListComponent, deps: [{ token: TagService }, { token: i3$2.UntypedFormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: TechlifyTaggerTagListComponent, isStandalone: true, selector: "app-techlify-tagger-tag-list", 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\">Tags</h5>\n            <app-techlify-tagger-tag-form (success)=\"modelCreated($event)\" *ngxPermissionsOnly=\"['tag.create']\"\n                class=\"ms-2\"></app-techlify-tagger-tag-form>\n        </div>\n        <span fxFlex></span>\n        <div>\n            <form [formGroup]=\"filterForm\" fxLayout=\"row\" fxLayoutGap=\"0.3rem\">\n                <mat-form-field appearance=\"outline\" class=\"fl-md\">\n                    <mat-label>Search Tags</mat-label>\n                    <input type=\"text\" matInput formControlName=\"search\" placeholder=\"Search records\" name=\"search\"\n                        autocomplete=\"off\" />\n                    <button *ngIf=\"filterForm.get('search').value\" matSuffix mat-icon-button\n                        (click)=\"filterForm.get('search').setValue('')\">\n                        <mat-icon>close</mat-icon>\n                    </button>\n                </mat-form-field>\n                <mat-form-field class='fl-sm'>\n                    <mat-label>Category</mat-label>\n                    <app-searchable-selector formControlName=\"category_ids\" apiUrl=\"api/techlify-tagger-categories\"\n                        [multiple]=\"true\">\n                    </app-searchable-selector>\n                    <button *ngIf=\"filterForm.get('category_ids').value\" matSuffix mat-icon-button\n                        (click)=\"filterForm.get('category_ids').setValue('')\">\n                        <mat-icon>close</mat-icon>\n                    </button>\n                </mat-form-field>\n            </form>\n        </div>\n    </mat-card>\n    <mat-card appearance=\"outlined\" class=\"mt-2 p-0\">\n        <table mat-table matSort [dataSource]=\"models\" class=\"w-100\" infiniteScroll [infiniteScrollDistance]=\"2\"\n            [infiniteScrollThrottle]=\"50\" (scrolled)=\"onScroll()\" (matSortChange)=\"sortColumn($event)\">\n\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            <!-- 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}}\n                    <div *ngIf=\"element?.description\" class=\"text-secondary\">\n                        <small>{{element?.description}}</small>\n                    </div>\n                </td>\n            </ng-container>\n\n            <!-- Category Column -->\n            <ng-container matColumnDef=\"category\">\n                <th mat-header-cell *matHeaderCellDef> Category </th>\n                <td mat-cell *matCellDef=\"let element\"> {{element.category?.title}}\n                    <div *ngIf=\"element?.category?.description\" class=\"text-secondary\">\n                        <small>{{element?.category?.description}}</small>\n                    </div>\n                </td>\n            </ng-container>\n\n            <ng-container matColumnDef=\"tagged_count\">\n                <th mat-header-cell *matHeaderCellDef> Tagged </th>\n                <td mat-cell *matCellDef=\"let element\">\n                    <span *ngIf=\"element?.tagged_count\">{{element.tagged_count}}\n                        records\n                    </span>\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                    <div>{{element.creator?.name}} </div>\n                    <div><small class=\"text-muted\">on {{element.created_at | date: 'mediumDate'}} </small></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; let i = dataIndex\" class=\"text-secondary\">\n                    <app-audit-log-for-model modelType=\"TechlifyTaggerTag\" [modelId]=\"element?.id\" logView=\"all\"\n                        [isIconView]=\"true\">\n                    </app-audit-log-for-model>\n\n                    <app-techlify-tagger-tag-form (success)=\"modelsUpdatedById($event)\" [tagInfo]=\"element\"\n                        *ngxPermissionsOnly=\"['tag.update']\" class=\"ms-1\"></app-techlify-tagger-tag-form>\n\n                    <ng-container *ngIf=\"!element?.tagged_count\">\n                        <app-techlify-delete-button *ngxPermissionsOnly=\"['tag.delete']\" class='text-secondary ms-1'\n                            [model]=\"element\" [service]=\"tagService\"\n                            message=\"Deleting this tag cannot be undone. Are you sure you want to continue?\"\n                            (deleted)=\"modelsDeletedById(element)\">\n                        </app-techlify-delete-button>\n                    </ng-container>\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-card>\n    <mat-progress-bar mode=\"indeterminate\" *ngIf=\"this.isWorking\"></mat-progress-bar>\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.DatePipe, name: "date" }, { kind: "component", type: TechlifyTaggerTagFormComponent, selector: "app-techlify-tagger-tag-form", inputs: ["tagInfo"] }, { kind: "ngmodule", type: SearchableSelectorModule }, { 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", "isEmitInitialEvent", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange", "isItemsEmpty"] }, { kind: "component", type: TechlifyDeleteButtonComponent, selector: "app-techlify-delete-button", inputs: ["data", "model", "message", "service"], outputs: ["deleted"] }, { kind: "ngmodule", type: AuditLogForModelModule }, { kind: "component", type: AuditLogForModelComponent, selector: "app-audit-log-for-model", inputs: ["isIconView", "modelType", "modelId", "logView"] }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: FlexLayoutModule }, { kind: "directive", type: i6$1.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: i6$1.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: i6$1.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.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: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MaterialModule }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i7$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i7$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i9.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i12.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i12.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i13.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i13.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i13.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i13.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i13.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i13.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i13.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i13.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i13.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i13.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: i11$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: InfiniteScrollModule }, { kind: "directive", type: i6$2.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "ngmodule", type: TechlifyIconModule }, { kind: "ngmodule", type: NgxPermissionsModule }, { kind: "directive", type: i5$2.NgxPermissionsDirective, selector: "[ngxPermissionsOnly],[ngxPermissionsExcept]", inputs: ["ngxPermissionsOnly", "ngxPermissionsOnlyThen", "ngxPermissionsOnlyElse", "ngxPermissionsExcept", "ngxPermissionsExceptElse", "ngxPermissionsExceptThen", "ngxPermissionsThen", "ngxPermissionsElse", "ngxPermissionsOnlyAuthorisedStrategy", "ngxPermissionsOnlyUnauthorisedStrategy", "ngxPermissionsExceptUnauthorisedStrategy", "ngxPermissionsExceptAuthorisedStrategy", "ngxPermissionsUnauthorisedStrategy", "ngxPermissionsAuthorisedStrategy"], outputs: ["permissionsAuthorized", "permissionsUnauthorized"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: TechlifyTaggerTagListComponent, isStandalone: true, selector: "app-techlify-tagger-tag-list", 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\">Tags</h5>\n            <app-techlify-tagger-tag-form (success)=\"modelCreated($event)\" *ngxPermissionsOnly=\"['tag.create']\"\n                class=\"ms-2\"></app-techlify-tagger-tag-form>\n        </div>\n        <span fxFlex></span>\n        <div>\n            <form [formGroup]=\"filterForm\" fxLayout=\"row\" fxLayoutGap=\"0.3rem\">\n                <mat-form-field appearance=\"outline\" class=\"fl-md\">\n                    <mat-label>Search Tags</mat-label>\n                    <input type=\"text\" matInput formControlName=\"search\" placeholder=\"Search records\" name=\"search\"\n                        autocomplete=\"off\" />\n                    <button *ngIf=\"filterForm.get('search').value\" matSuffix mat-icon-button\n                        (click)=\"filterForm.get('search').setValue('')\">\n                        <mat-icon>close</mat-icon>\n                    </button>\n                </mat-form-field>\n                <mat-form-field class='fl-sm'>\n                    <mat-label>Category</mat-label>\n                    <app-searchable-selector formControlName=\"category_ids\" apiUrl=\"api/techlify-tagger-categories\"\n                        [multiple]=\"true\">\n                    </app-searchable-selector>\n                    <button *ngIf=\"filterForm.get('category_ids').value\" matSuffix mat-icon-button\n                        (click)=\"filterForm.get('category_ids').setValue('')\">\n                        <mat-icon>close</mat-icon>\n                    </button>\n                </mat-form-field>\n            </form>\n        </div>\n    </mat-card>\n    <mat-card appearance=\"outlined\" class=\"mt-2 p-0\">\n        <table mat-table matSort [dataSource]=\"models\" class=\"w-100\" infiniteScroll [infiniteScrollDistance]=\"2\"\n            [infiniteScrollThrottle]=\"50\" (scrolled)=\"onScroll()\" (matSortChange)=\"sortColumn($event)\">\n\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            <!-- 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}}\n                    <div *ngIf=\"element?.description\" class=\"text-secondary\">\n                        <small>{{element?.description}}</small>\n                    </div>\n                </td>\n            </ng-container>\n\n            <!-- Category Column -->\n            <ng-container matColumnDef=\"category\">\n                <th mat-header-cell *matHeaderCellDef> Category </th>\n                <td mat-cell *matCellDef=\"let element\"> {{element.category?.title}}\n                    <div *ngIf=\"element?.category?.description\" class=\"text-secondary\">\n                        <small>{{element?.category?.description}}</small>\n                    </div>\n                </td>\n            </ng-container>\n\n            <ng-container matColumnDef=\"tagged_count\">\n                <th mat-header-cell *matHeaderCellDef> Tagged </th>\n                <td mat-cell *matCellDef=\"let element\">\n                    <span *ngIf=\"element?.tagged_count\">{{element.tagged_count}}\n                        records\n                    </span>\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                    <div>{{element.creator?.name}} </div>\n                    <div><small class=\"text-muted\">on {{element.created_at | date: 'mediumDate'}} </small></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; let i = dataIndex\" class=\"text-secondary\">\n                    <app-audit-log-for-model modelType=\"TechlifyTaggerTag\" [modelId]=\"element?.id\" logView=\"all\"\n                        [isIconView]=\"true\">\n                    </app-audit-log-for-model>\n\n                    <app-techlify-tagger-tag-form (success)=\"modelsUpdatedById($event)\" [tagInfo]=\"element\"\n                        *ngxPermissionsOnly=\"['tag.update']\" class=\"ms-1\"></app-techlify-tagger-tag-form>\n\n                    <ng-container *ngIf=\"!element?.tagged_count\">\n                        <app-techlify-delete-button *ngxPermissionsOnly=\"['tag.delete']\" class='text-secondary ms-1'\n                            [model]=\"element\" [service]=\"tagService\"\n                            message=\"Deleting this tag cannot be undone. Are you sure you want to continue?\"\n                            (deleted)=\"modelsDeletedById(element)\">\n                        </app-techlify-delete-button>\n                    </ng-container>\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-card>\n    <mat-progress-bar mode=\"indeterminate\" *ngIf=\"this.isWorking\"></mat-progress-bar>\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.DatePipe, name: "date" }, { kind: "component", type: TechlifyTaggerTagFormComponent, selector: "app-techlify-tagger-tag-form", inputs: ["tagInfo"] }, { kind: "ngmodule", type: SearchableSelectorModule }, { 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", "isEmitInitialEvent", "required", "disabled", "value"], outputs: ["selectedValueChange", "selectionChange", "itemsChange", "isItemsEmpty"] }, { kind: "component", type: TechlifyDeleteButtonComponent, selector: "app-techlify-delete-button", inputs: ["data", "model", "message", "service"], outputs: ["deleted"] }, { kind: "ngmodule", type: AuditLogForModelModule }, { kind: "component", type: AuditLogForModelComponent, selector: "app-audit-log-for-model", inputs: ["isIconView", "modelType", "modelId", "logView"] }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: FlexLayoutModule }, { kind: "directive", type: i6$1.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: i6$1.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: i6$1.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.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: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MaterialModule }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i7$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i7$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i9.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i12.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i12.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i13.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i13.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i13.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i13.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i13.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i13.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i13.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i13.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i13.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i13.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: i11$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: InfiniteScrollModule }, { kind: "directive", type: i6$2.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "ngmodule", type: TechlifyIconModule }, { kind: "ngmodule", type: NgxPermissionsModule }, { kind: "directive", type: i5$1.NgxPermissionsDirective, selector: "[ngxPermissionsOnly],[ngxPermissionsExcept]", inputs: ["ngxPermissionsOnly", "ngxPermissionsOnlyThen", "ngxPermissionsOnlyElse", "ngxPermissionsExcept", "ngxPermissionsExceptElse", "ngxPermissionsExceptThen", "ngxPermissionsThen", "ngxPermissionsElse", "ngxPermissionsOnlyAuthorisedStrategy", "ngxPermissionsOnlyUnauthorisedStrategy", "ngxPermissionsExceptUnauthorisedStrategy", "ngxPermissionsExceptAuthorisedStrategy", "ngxPermissionsUnauthorisedStrategy", "ngxPermissionsAuthorisedStrategy"], outputs: ["permissionsAuthorized", "permissionsUnauthorized"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TechlifyTaggerTagListComponent, decorators: [{
             type: Component,
@@ -16600,7 +16792,7 @@ class TechlifyAutoCompleteSelectComponent {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => TechlifyAutoCompleteSelectComponent),
                 multi: true
-            }], queries: [{ propertyName: "itemTemplate", first: true, predicate: ["itemTemplate"], descendants: true }, { propertyName: "selectedTemplate", first: true, predicate: ["selectedTemplate"], descendants: true }], ngImport: i0, template: "<!-- Selected Items -->\n<div class=\"my-2\"\n    [ngClass]=\"{'selected-container-column':displaySelectedDir=='column','selected-container-row':displaySelectedDir=='row' }\">\n    <ng-container *ngFor=\"let item of selectedItems\">\n\n        <!-- Custom Selected Template -->\n        <ng-container *ngIf=\"selectedTemplate; else defaultSelectedTemplate\" [ngTemplateOutlet]=\"selectedTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: item,remove: removeItem.bind(this)}\">\n        </ng-container>\n\n        <!-- Default Template -->\n        <ng-template #defaultSelectedTemplate>\n            <div class=\"selected-card\" [class.custom]=\"item.__isCustom\">\n                <span>{{ getTitle(item) }}</span>\n                <app-techlify-icon *ngIf=\"!readonly\" name=\"reject\" class=\"ms-2 clickable\" (click)=\"removeItem(item)\">\n                </app-techlify-icon>\n            </div>\n        </ng-template>\n\n    </ng-container>\n</div>\n\n<!-- Selected Items -->\n<form [formGroup]=\"form\">\n    <mat-form-field class=\"w-100\" *ngIf=\"!readonly\">\n        <input matInput [placeholder]=\"placeholder\" formControlName=\"search\" [matAutocomplete]=\"auto\"\n            (keydown.enter)=\"handleEnter($event)\" />\n        <mat-icon class=\"material-symbols-outlined\" matSuffix>\n            search\n        </mat-icon>\n\n        <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"selectItem($event.option.value)\">\n            <mat-option *ngFor=\"let option of filteredOptions\" [value]=\"option\">\n\n                <!-- Custom Template -->\n                <ng-container *ngIf=\"itemTemplate; else defaultTemplate\" [ngTemplateOutlet]=\"itemTemplate\"\n                    [ngTemplateOutletContext]=\"{ $implicit: option }\">\n                </ng-container>\n\n                <!-- Default Template -->\n                <ng-template #defaultTemplate>\n                    {{ option[titleField] }}\n                </ng-template>\n\n            </mat-option>\n        </mat-autocomplete>\n    </mat-form-field>\n</form>", styles: [".selected-container-column{display:flex;flex-direction:column;gap:8px;align-items:start}.selected-container-row{display:flex;flex-wrap:wrap;gap:8px}.selected-card{padding:6px 10px;border-radius:5px;background:#f2f2f2}.custom{border-style:dashed;opacity:.8}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i7$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i8$1.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: "component", type: i5$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i8$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i9.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: TechlifyIconModule }, { kind: "component", type: TechlifyIconComponent, selector: "app-techlify-icon", inputs: ["name", "size"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
+            }], queries: [{ propertyName: "itemTemplate", first: true, predicate: ["itemTemplate"], descendants: true }, { propertyName: "selectedTemplate", first: true, predicate: ["selectedTemplate"], descendants: true }], ngImport: i0, template: "<!-- Selected Items -->\n<div class=\"my-2\"\n    [ngClass]=\"{'selected-container-column':displaySelectedDir=='column','selected-container-row':displaySelectedDir=='row' }\">\n    <ng-container *ngFor=\"let item of selectedItems\">\n\n        <!-- Custom Selected Template -->\n        <ng-container *ngIf=\"selectedTemplate; else defaultSelectedTemplate\" [ngTemplateOutlet]=\"selectedTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: item,remove: removeItem.bind(this)}\">\n        </ng-container>\n\n        <!-- Default Template -->\n        <ng-template #defaultSelectedTemplate>\n            <div class=\"selected-card\" [class.custom]=\"item.__isCustom\">\n                <span>{{ getTitle(item) }}</span>\n                <app-techlify-icon *ngIf=\"!readonly\" name=\"reject\" class=\"ms-2 clickable\" (click)=\"removeItem(item)\">\n                </app-techlify-icon>\n            </div>\n        </ng-template>\n\n    </ng-container>\n</div>\n\n<!-- Selected Items -->\n<form [formGroup]=\"form\">\n    <mat-form-field class=\"w-100\" *ngIf=\"!readonly\">\n        <input matInput [placeholder]=\"placeholder\" formControlName=\"search\" [matAutocomplete]=\"auto\"\n            (keydown.enter)=\"handleEnter($event)\" />\n        <mat-icon class=\"material-symbols-outlined\" matSuffix>\n            search\n        </mat-icon>\n\n        <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"selectItem($event.option.value)\">\n            <mat-option *ngFor=\"let option of filteredOptions\" [value]=\"option\">\n\n                <!-- Custom Template -->\n                <ng-container *ngIf=\"itemTemplate; else defaultTemplate\" [ngTemplateOutlet]=\"itemTemplate\"\n                    [ngTemplateOutletContext]=\"{ $implicit: option }\">\n                </ng-container>\n\n                <!-- Default Template -->\n                <ng-template #defaultTemplate>\n                    {{ option[titleField] }}\n                </ng-template>\n\n            </mat-option>\n        </mat-autocomplete>\n    </mat-form-field>\n</form>", styles: [".selected-container-column{display:flex;flex-direction:column;gap:8px;align-items:start}.selected-container-row{display:flex;flex-wrap:wrap;gap:8px}.selected-card{padding:6px 10px;border-radius:5px;background:#f2f2f2}.custom{border-style:dashed;opacity:.8}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i7$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i8$1.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: "component", type: i6$3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i8$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i9.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: TechlifyIconModule }, { kind: "component", type: TechlifyIconComponent, selector: "app-techlify-icon", inputs: ["name", "size"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TechlifyAutoCompleteSelectComponent, decorators: [{
             type: Component,
@@ -16671,13 +16863,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 }]
         }] });
-/*
- * Public API Surface of ngx-techlify-core
- */
 /**
  * Generated bundle index. Do not edit.
  */
-export { AccessControlConfigModule, ActionPopup, ActionPopupComponent, ActionPopupModule, AdminRoleListComponent, AdminRoleListModule, AdminRolePermissionFormComponent, AdminRolePermissionFormModule, AdminRoleService, AlertService, ApiPrefixInterceptor, AppAdminHomeComponent, AppAdminModule, AppAdminUserList, AppAdminUserViewComponent, AppAdminUserViewModule, AppUpdateService, 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, DataTable, DataTableComponent, DataTableModule, DateUtils, 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, EntityFileListComponent, EntityFileListModule, EntityFileListWidgetComponent, EntityFileService, EntityFileListModule as EntityFilesViewAllModule, EnvironmentService, ErrorHandlerInterceptor, ErrorHandlerService, ErrorSnackComponent, ExportExcelButtonComponent, ExportExcelModule, FileDragdropUploaderComponent, FileDragdropUploaderModule, FileDropperComponent, FileDropperConfig, FileDropperModule, FilterService, ForgotPasswordComponent, ForgotPasswordModule, ForgotPasswordRoutingModule, FormConfigurationFieldFormComponent, FormConfigurationFieldFormModule, FormConfigurationFieldFormRoutingModule, FormConfigurationForFormComponent, FormConfigurationForFormModule, FormConfigurationFormFieldService, FormConfigurationFormService, FormConfigurationUtilityService, FormValidatorService, HTTP_DYNAMIC_INTERCEPTORS, HttpCacheService, HttpService, ImportCsvComponent, ImportCsvModule, LoaderComponent, LoaderModule, LockedDate, LockedDateFormComponent, LockedDateListComponent, LockedDateLockUnlockButtonComponent, LockedDateModule, LockedDateService, LogLevel, Logger, LoginComponent, LoginFormFieldsComponent, LoginHistoryForUserComponent, LoginHistoryForUserModule, LoginHistoryForUserRoutingModule, LoginModule, LoginRoutingModule, MaterialModule, MultiUserConfig, MyTechlifyViewListingComponent, MyTechlifyViewListingModule, MyTechlifyViewService, NgxTechlifyUsersModule, NoteCommentListComponent, NoteFormComponent, NoteListComponent, NoteModule, NumItemsSelector, NumberInputButtonComponent, NumberInputButtonModule, NumberSelectorComponent, PageEvent, PdfButtonComponent, PdfButtonModule, Permission, PermissionModule, PermissionRoutingProvider, PermissionsManagementComponent, ProfileEditComponent, ProfileModule, ProfileRoutingModule, ReadMoreComponent, ReadMoreModule, RequestHelperService, ResetPasswordComponent, ResetPasswordModule, ResetPasswordRoutingModule, ResetPasswordService, RestrictorTypeSelectorComponent, RestrictorTypeSelectorModule, RestrictorsModule, Role, RoleFormButtonComponent, RoleFormComponent, RoleListComponent, RoleModule, RoleRoutingProvider, RoleService, RoleViewComponent, RoleViewModule, RouteReusableStrategy, SearchableSelectorComponent, SearchableSelectorModule, SignUpComponent, SignupModule, SignupRoutingModule, SnackModule, StorageService, SubscriptionFormComponent, SubscriptionFormModule, SubscriptionListingComponent, SubscriptionListingModule, SubscriptionPackageListingComponent, SubscriptionPackageListingModule, SubscriptionPackageViewComponent, SubscriptionPackageViewModule, SubscriptionService, SuccessSnackComponent, TagService, TechlifyAppSelectorComponent, TechlifyAppSelectorModule, TechlifyAutoCompleteSelectComponent, TechlifyCompanySwitcherComponent, TechlifyCompanySwitcherModule, TechlifyConfig, TechlifyCurrencyPipe, TechlifyDeleteButtonComponent, TechlifyFeatureDirectiveModule, TechlifyFeatureEnabledDirective, TechlifyFeatureListingComponent, TechlifyFeatureModule, TechlifyFeatureRoutes, TechlifyFeatureService, TechlifyFormButtonComponent, TechlifyFormComponent, TechlifyIconComponent, TechlifyIconModule, TechlifyListComponent, TechlifyNotificationForUserComponent, TechlifyNotificationForUserModule, TechlifyNotificationForUserRoutingModule, TechlifyNotificationModule, TechlifyNotificationRoutingModule, TechlifyService, TechlifySubscriptionDirective, TechlifySubscriptionDirectiveModule, TechlifyTaggerTagFormComponent, TechlifyTaggerTagFormConfigModel, TechlifyTaggerTagFormFieldComponent, TechlifyTaggerTagFormFieldModule, TechlifyTaggerTagListComponent, TechlifyTaggerTagSelectorComponent, TechlifyTaggerTagSelectorModule, TechlifyUpdateHistoryModule, TechlifyUpdateModule, TechlifyUpdateService, TechlifyUpdatesTeaserComponent, TechlifyUpdatesTeaserModule, TechlifyViewFormComponent, TechlifyViewFormModule, TechlifyViewService, TenantFormButtonComponent, TenantListWidgetComponent, Timeline, TimelineActivityButtonComponent, TimelineActivityButtonModule, TimelineActivityListComponent, TimelineActivityListModule, TimelineFilterComponent, TimelineFilterModule, TokenInterceptor, UpdateNotifierComponent, UpdateNotifierModule, User, UserClientEnableDisableButtonComponent, UserClientEnableDisableButtonModule, UserClientsListComponent, UserClientsListModule, UserConfig, UserConfigService, UserDataService, UserEnableButtonComponent, UserEnableButtonModule, UserExploreComponent, UserFormComponent, UserListComponent, UserListPageConfig, UserMenuComponent, UserMenuModule, UserModule, UserRoutingProvider, UserSelectorComponent, UserSelectorModule, UserService, UserSessionsComponent, UserSessionsModule, UserViewComponent, UtilityModule, ViewerConfig, WrapPipe, calculateTimeline, dateValidator, esfur, estlr, esulr, parseLocalDate, techlifyFormContract, techlifyListContract };
+export { AccessControlConfigModule, ActionPopup, ActionPopupComponent, ActionPopupModule, AdminRoleListComponent, AdminRoleListModule, AdminRolePermissionFormComponent, AdminRolePermissionFormModule, AdminRoleService, AlertService, ApiPrefixInterceptor, AppAdminHomeComponent, AppAdminModule, AppAdminUserList, AppAdminUserViewComponent, AppAdminUserViewModule, AppUpdateService, 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, CountryService, CredentialsService, CurrentUserService, CustomIconComponent, CustomIconModule, DEFAULT_SELECTED_VALUE, DataTable, DataTableComponent, DataTableModule, DateUtils, 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, EntityFileListComponent, EntityFileListModule, EntityFileListWidgetComponent, EntityFileService, EntityFileListModule as EntityFilesViewAllModule, EnvironmentService, ErrorHandlerInterceptor, ErrorHandlerService, ErrorSnackComponent, ExportExcelButtonComponent, ExportExcelModule, FileDragdropUploaderComponent, FileDragdropUploaderModule, FileDropperComponent, FileDropperConfig, FileDropperModule, FilterService, ForgotPasswordComponent, ForgotPasswordModule, ForgotPasswordRoutingModule, FormConfigurationFieldFormComponent, FormConfigurationFieldFormModule, FormConfigurationFieldFormRoutingModule, FormConfigurationForFormComponent, FormConfigurationForFormModule, FormConfigurationFormFieldService, FormConfigurationFormService, FormConfigurationUtilityService, FormValidatorService, HTTP_DYNAMIC_INTERCEPTORS, HttpCacheService, HttpService, ImportCsvComponent, ImportCsvModule, LoaderComponent, LoaderModule, LockedDate, LockedDateFormComponent, LockedDateListComponent, LockedDateLockUnlockButtonComponent, LockedDateModule, LockedDateService, LogLevel, Logger, LoginComponent, LoginFormFieldsComponent, LoginHistoryForUserComponent, LoginHistoryForUserModule, LoginHistoryForUserRoutingModule, LoginModule, LoginRoutingModule, MaterialModule, MultiUserConfig, MyTechlifyViewListingComponent, MyTechlifyViewListingModule, MyTechlifyViewService, NgxTechlifyUsersModule, NoteCommentListComponent, NoteFormComponent, NoteListComponent, NoteModule, NumItemsSelector, NumberInputButtonComponent, NumberInputButtonModule, NumberSelectorComponent, PageEvent, PdfButtonComponent, PdfButtonModule, Permission, PermissionModule, PermissionRoutingProvider, PermissionsManagementComponent, PhoneNumberSelectorComponent, ProfileEditComponent, ProfileModule, ProfileRoutingModule, ReadMoreComponent, ReadMoreModule, RequestHelperService, ResetPasswordComponent, ResetPasswordModule, ResetPasswordRoutingModule, ResetPasswordService, RestrictorTypeSelectorComponent, RestrictorTypeSelectorModule, RestrictorsModule, Role, RoleFormButtonComponent, RoleFormComponent, RoleListComponent, RoleModule, RoleRoutingProvider, RoleService, RoleViewComponent, RoleViewModule, RouteReusableStrategy, SearchableSelectorComponent, SearchableSelectorModule, SignUpComponent, SignupModule, SignupRoutingModule, SnackModule, StorageService, SubscriptionFormComponent, SubscriptionFormModule, SubscriptionListingComponent, SubscriptionListingModule, SubscriptionPackageListingComponent, SubscriptionPackageListingModule, SubscriptionPackageViewComponent, SubscriptionPackageViewModule, SubscriptionService, SuccessSnackComponent, TagService, TechlifyAppSelectorComponent, TechlifyAppSelectorModule, TechlifyAutoCompleteSelectComponent, TechlifyCompanySwitcherComponent, TechlifyCompanySwitcherModule, TechlifyConfig, TechlifyCurrencyPipe, TechlifyDeleteButtonComponent, TechlifyFeatureDirectiveModule, TechlifyFeatureEnabledDirective, TechlifyFeatureListingComponent, TechlifyFeatureModule, TechlifyFeatureRoutes, TechlifyFeatureService, TechlifyFormButtonComponent, TechlifyFormComponent, TechlifyIconComponent, TechlifyIconModule, TechlifyListComponent, TechlifyNotificationForUserComponent, TechlifyNotificationForUserModule, TechlifyNotificationForUserRoutingModule, TechlifyNotificationModule, TechlifyNotificationRoutingModule, TechlifyService, TechlifySubscriptionDirective, TechlifySubscriptionDirectiveModule, TechlifyTaggerTagFormComponent, TechlifyTaggerTagFormConfigModel, TechlifyTaggerTagFormFieldComponent, TechlifyTaggerTagFormFieldModule, TechlifyTaggerTagListComponent, TechlifyTaggerTagSelectorComponent, TechlifyTaggerTagSelectorModule, TechlifyUpdateHistoryModule, TechlifyUpdateModule, TechlifyUpdateService, TechlifyUpdatesTeaserComponent, TechlifyUpdatesTeaserModule, TechlifyViewFormComponent, TechlifyViewFormModule, TechlifyViewService, TenantFormButtonComponent, TenantListWidgetComponent, Timeline, TimelineActivityButtonComponent, TimelineActivityButtonModule, TimelineActivityListComponent, TimelineActivityListModule, TimelineFilterComponent, TimelineFilterModule, TokenInterceptor, UpdateNotifierComponent, UpdateNotifierModule, User, UserClientEnableDisableButtonComponent, UserClientEnableDisableButtonModule, UserClientsListComponent, UserClientsListModule, UserConfig, UserConfigService, UserDataService, UserEnableButtonComponent, UserEnableButtonModule, UserExploreComponent, UserFormComponent, UserListComponent, UserListPageConfig, UserMenuComponent, UserMenuModule, UserModule, UserRoutingProvider, UserSelectorComponent, UserSelectorModule, UserService, UserSessionsComponent, UserSessionsModule, UserViewComponent, UtilityModule, ViewerConfig, WrapPipe, calculateTimeline, dateValidator, esfur, estlr, esulr, parseLocalDate, techlifyFormContract, techlifyListContract };
 //# sourceMappingURL=ngx-techlify-core.mjs.map