ngx-techlify-core 18.76.0 → 18.77.0

package/fesm2022/ngx-techlify-core.mjs

@@ -12,9 +12,10 @@ import { MatIconModule, MatIcon } from '@angular/material/icon';
 import { debounceTime, finalize as finalize$1, catchError, switchMap, map as map$1, distinctUntilChanged, startWith } from 'rxjs/operators';
 import * as i1$6 from '@angular/platform-browser';
 import { Title } from '@angular/platform-browser';
-import moment from 'moment';
 import * as i1$2 from '@angular/router';
 import { RouteReuseStrategy, RouterModule, RouterLink } from '@angular/router';
+import * as i3 from '@angular/common';
+import { DatePipe, CommonModule, NgIf, NgTemplateOutlet, NgOptimizedImage, CurrencyPipe } from '@angular/common';
 import { fakeAsync, tick } from '@angular/core/testing';
 import { __decorate } from 'tslib';
 import * as i11 from '@angular/material/sort';
@@ -22,8 +23,6 @@ import { MatSort, MatSortModule } from '@angular/material/sort';
 import { untilDestroyed, UntilDestroy } from '@ngneat/until-destroy';
 import * as i6$1 from '@angular/flex-layout/flex';
 import * as i2 from '@angular/flex-layout/extended';
-import * as i3 from '@angular/common';
-import { DatePipe, CommonModule, NgIf, NgTemplateOutlet, NgOptimizedImage, CurrencyPipe } from '@angular/common';
 import * as i6$2 from 'ngx-infinite-scroll';
 import { InfiniteScrollModule, InfiniteScrollDirective } from 'ngx-infinite-scroll';
 import * as i8$1 from '@angular/material/checkbox';
@@ -63,7 +62,7 @@ import * as i11$2 from '@angular/material/progress-bar';
 import { MatProgressBarModule, MatProgressBar } from '@angular/material/progress-bar';
 import * as i11$3 from '@angular/material/progress-spinner';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-import * as i9$2 from '@angular/material/select';
+import * as i9$1 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
 import * as i6$3 from '@angular/material/divider';
 import { MatDividerModule } from '@angular/material/divider';
@@ -76,7 +75,8 @@ import * as i8$5 from '@angular/material/slide-toggle';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import * as i9$3 from '@angular/material/tabs';
 import { MatTabsModule } from '@angular/material/tabs';
-import * as i9$1 from '@angular/cdk/scrolling';
+import moment from 'moment';
+import * as i9$2 from '@angular/cdk/scrolling';
 import { FlexLayoutModule, FlexModule } from '@angular/flex-layout';
 import * as i14 from 'ngx-editor';
 import { Editor, NgxEditorModule } from 'ngx-editor';
@@ -615,9 +615,10 @@ function parseLocalDate(dateStr) {
 
 /* tslint:disable:radix */
 class RequestHelperService {
-    constructor(router, activatedRoute) {
+    constructor(router, activatedRoute, datePipe) {
         this.router = router;
         this.activatedRoute = activatedRoute;
+        this.datePipe = datePipe;
     }
     /**
      * Update the form values from the URL query params.
@@ -636,10 +637,9 @@ class RequestHelperService {
     /**
      * Convert the object to form data for the request.
      * @param data Data Object
-     * @param config Optional
      * @return Object
      */
-    convertToFormData(data, config) {
+    convertToFormData(data) {
         const newData = {};
         for (const prop in data) {
             if (Object.prototype.hasOwnProperty.call(data, prop)) {
@@ -648,10 +648,10 @@ class RequestHelperService {
                     newData[prop] = data[prop].join(',');
                 }
                 else if (this.isDateString(data[prop])) {
-                    newData[prop] = moment(data[prop]).format('Y-MM-DD');
+                    newData[prop] = this.datePipe.transform(data[prop], 'yyyy-MM-dd');
                 }
                 else {
-                    newData[prop] = data[prop];
+                    newData[prop] = data[prop] ?? ''; //Don't pass null into request, it will break the filters
                 }
             }
         }
@@ -719,7 +719,7 @@ class RequestHelperService {
         }
         return /^\d{4}[-/](0[1-9]|1[0-2])[-/](0[1-9]|[12]\d|3[01])([T\s].*)?$/.test(value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RequestHelperService, deps: [{ token: i1$2.Router }, { token: i1$2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RequestHelperService, deps: [{ token: i1$2.Router }, { token: i1$2.ActivatedRoute }, { token: i3.DatePipe }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RequestHelperService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RequestHelperService, decorators: [{
@@ -727,7 +727,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: i1$2.Router }, { type: i1$2.ActivatedRoute }] });
+        }], ctorParameters: () => [{ type: i1$2.Router }, { type: i1$2.ActivatedRoute }, { type: i3.DatePipe }] });
 
 /**
  * Interface used to ensure we have a consistent structure across our listing pages
@@ -804,7 +804,7 @@ class TechlifyListComponent {
             .subscribe((_) => {
             if (this.isFilterPatchFromRoute) {
                 const unformatedFilters = JSON.parse(JSON.stringify(this.filterForm.value));
-                this.filters = this.requestHelperService?.convertToFormData(unformatedFilters, this.filterFormConfiguration);
+                this.filters = this.requestHelperService?.convertToFormData(unformatedFilters);
                 this.requestHelperService?.updateQueryParams(this.filters);
             }
             this.reload();
@@ -830,7 +830,7 @@ class TechlifyListComponent {
              * Convert to form data gives flexibility to convert the form array values to string
              * No need to override the loadData method in child class to convert array values to string.
              * */
-            filters = this.requestHelperService?.convertToFormData(JSON.parse(JSON.stringify(this.filterForm.value)), this.filterFormConfiguration);
+            filters = this.requestHelperService?.convertToFormData(JSON.parse(JSON.stringify(this.filterForm.value)));
             filters.page = this.page;
             filters.per_page = this.perPage;
         }
@@ -990,7 +990,7 @@ class TechlifyListComponent {
             if (view) {
                 //If there is a view, then set it.
                 //Setup view filters
-                this.filterForm.setValue(this.requestHelperService?.convertToFormData(view?.filters, this.filterFormConfiguration));
+                this.filterForm.patchValue(this.requestHelperService?.convertToFormData(view?.filters));
                 //Setup view columns
                 this.columnConfigs.forEach(column => {
                     column.isSelected = (view?.columns).some(col => col === column.def);
@@ -3474,1249 +3474,993 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     ], template: "<app-techlify-icon role='button' name='delete' (click)=\"open()\"></app-techlify-icon>" }]
         }], ctorParameters: () => [{ type: i1.MatDialog }, { type: AlertService }, { type: ErrorHandlerService }] });
 
-class TechlifyFormButtonComponent {
-    constructor(matDialog) {
-        this.matDialog = matDialog;
-        this.component = input.required();
-        this.model = input();
-        this.data = input({});
-        this.width = input('700px');
-        this.saved = output();
-    }
-    open() {
-        const ref = this.matDialog.open(this.component(), {
-            width: this.width(),
-            data: { model: this.model(), ...this.data() }
-        });
-        ref.afterClosed().subscribe((result) => {
-            if (result) {
-                this.saved.emit(result);
-            }
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TechlifyFormButtonComponent, deps: [{ token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: TechlifyFormButtonComponent, isStandalone: true, selector: "app-techlify-form-button", inputs: { component: { classPropertyName: "component", publicName: "component", isSignal: true, isRequired: true, transformFunction: null }, model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { saved: "saved" }, ngImport: i0, template: "<app-techlify-icon role=\"button\" [name]=\"model() ? 'edit' : 'add'\" (click)=\"open()\"></app-techlify-icon>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MaterialModule }, { kind: "ngmodule", type: TechlifyIconModule }, { kind: "component", type: TechlifyIconComponent, selector: "app-techlify-icon", inputs: ["name", "size"] }] }); }
+class Timeline {
+    static { this.CUSTOM = 1; }
+    static { this.TODAY = 2; }
+    static { this.YESTERDAY = 3; }
+    static { this.THIS_WEEK = 4; }
+    static { this.LAST_WEEK = 5; }
+    static { this.THIS_MONTH = 6; }
+    static { this.LAST_MONTH = 7; }
+    static { this.THIS_QUARTER = 8; }
+    static { this.LAST_QUARTER = 9; }
+    static { this.THIS_YEAR = 10; }
+    static { this.LAST_YEAR = 11; }
+    static { this.ALL = 12; }
+    static { this.TOMMOROW = 13; }
+    static { this.NEXT_WEEK = 14; }
+    static { this.NEXT_MONTH = 15; }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TechlifyFormButtonComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-techlify-form-button', standalone: true, imports: [
-                        CommonModule,
-                        MaterialModule,
-                        TechlifyIconModule
-                    ], template: "<app-techlify-icon role=\"button\" [name]=\"model() ? 'edit' : 'add'\" (click)=\"open()\"></app-techlify-icon>\r\n" }]
-        }], ctorParameters: () => [{ type: i1.MatDialog }] });
 
-class ReadMoreComponent {
-    constructor() {
-        this.maxLength = 100;
-        this.hideToggle = true;
-        this.isCollapsed = true;
-    }
-    ngOnInit() {
-        this.determineView();
-    }
-    toggleView() {
-        this.isCollapsed = !this.isCollapsed;
-        this.determineView();
-    }
-    determineView() {
-        if (!this.text || this.text.length <= this.maxLength) {
-            this.currentText = this.text;
-            this.isCollapsed = false;
-            this.hideToggle = true;
-            return;
+function calculateTimeline(value, dateFrom, dateTo) {
+    const date = new Date();
+    const data = {
+        date_from: date,
+        date_to: date,
+        show_custom_field: false
+    };
+    switch (value) {
+        case Timeline.CUSTOM: { // Custom
+            data.show_custom_field = true;
+            data.date_from = dateFrom ? moment(dateFrom).toISOString() : '';
+            data.date_to = dateTo ? moment(dateTo).toISOString() : '';
+            break;
         }
-        this.hideToggle = false;
-        if (this.isCollapsed == true) {
-            this.currentText = this.text.substring(0, this.maxLength) + "...";
+        case Timeline.TODAY: { // Today
+            const now = moment();
+            data.date_from = now.startOf('day').toISOString();
+            data.date_to = now.endOf('day').toISOString();
+            break;
         }
-        else if (this.isCollapsed == false) {
-            this.currentText = this.text;
+        case Timeline.YESTERDAY: { // Yesterday
+            const now = moment().subtract(1, 'day');
+            data.date_from = now.startOf('day').toISOString();
+            data.date_to = now.endOf('day').toISOString();
+            break;
         }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ReadMoreComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ReadMoreComponent, selector: "app-read-more", inputs: { text: "text", maxLength: "maxLength" }, ngImport: i0, template: "<div [innerHTML]=\"currentText\"></div>\n<a href=\"javascript:;\" *ngIf=\"!hideToggle\" class=\"primary-color hoverable\" (click)=\"toggleView()\">Read\n  {{ isCollapsed ? \"more\" : \"less\" }}</a>", styles: ["div.collapsed{height:250px;overflow:hidden}.primary-color{color:#009fdd!important}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ReadMoreComponent, decorators: [{
-            type: Component,
-            args: [{ selector: "app-read-more", template: "<div [innerHTML]=\"currentText\"></div>\n<a href=\"javascript:;\" *ngIf=\"!hideToggle\" class=\"primary-color hoverable\" (click)=\"toggleView()\">Read\n  {{ isCollapsed ? \"more\" : \"less\" }}</a>", styles: ["div.collapsed{height:250px;overflow:hidden}.primary-color{color:#009fdd!important}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { text: [{
-                type: Input
-            }], maxLength: [{
-                type: Input
-            }] } });
-
-class WrapPipe {
-    transform(value, length = 50) {
-        if (!value) {
-            return '';
+        case Timeline.THIS_WEEK: { // This Week
+            const now = moment();
+            data.date_from = now.startOf('isoWeek').toISOString();
+            data.date_to = now.endOf('isoWeek').toISOString();
+            break;
         }
-        return value.length > length ? value.substring(0, length) + '...' : value;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WrapPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: WrapPipe, isStandalone: true, name: "wrap" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WrapPipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'wrap',
-                    standalone: true
-                }]
-        }] });
-
-class FileSizePipe {
-    transform(bytes) {
-        if (!bytes) {
-            return '0.00 B';
+        case Timeline.LAST_WEEK: { // Last Week
+            const now = moment().subtract(1, 'week');
+            data.date_from = now.startOf('isoWeek').toISOString();
+            data.date_to = now.endOf('isoWeek').toISOString();
+            break;
+        }
+        case Timeline.THIS_MONTH: { // This Month
+            const now = moment();
+            data.date_from = now.startOf('month').toISOString();
+            data.date_to = now.endOf('month').toISOString();
+            break;
+        }
+        case Timeline.LAST_MONTH: { // Last Month
+            const now = moment().subtract(1, 'month');
+            data.date_from = now.startOf('month').toISOString();
+            data.date_to = now.endOf('month').toISOString();
+            break;
+        }
+        case Timeline.THIS_QUARTER: { // This Quarter
+            const now = moment();
+            data.date_from = now.startOf('quarter').toISOString();
+            data.date_to = now.endOf('quarter').toISOString();
+            break;
+        }
+        case Timeline.LAST_QUARTER: { // Last Quarter
+            const now = moment().subtract(1, 'quarter');
+            data.date_from = now.startOf('quarter').toISOString();
+            data.date_to = now.endOf('quarter').toISOString();
+            break;
+        }
+        case Timeline.THIS_YEAR: { // This Year
+            const now = moment();
+            data.date_from = now.startOf('year').toISOString();
+            data.date_to = now.endOf('year').toISOString();
+            break;
+        }
+        case Timeline.LAST_YEAR: { // Last Year
+            const now = moment().subtract(1, 'year');
+            data.date_from = now.startOf('year').toISOString();
+            data.date_to = now.endOf('year').toISOString();
+            break;
+        }
+        case Timeline.TOMMOROW: {
+            const now = moment().add(1, 'day');
+            data.date_from = now.startOf('day').toISOString();
+            data.date_to = now.endOf('day').toISOString();
+            break;
+        }
+        case Timeline.NEXT_WEEK: {
+            const now = moment().add(1, 'week');
+            data.date_from = now.startOf('isoWeek').toISOString();
+            data.date_to = now.endOf('isoWeek').toISOString();
+            break;
+        }
+        case Timeline.NEXT_MONTH: {
+            const now = moment().add(1, 'month');
+            data.date_from = now.startOf('month').toISOString();
+            data.date_to = now.endOf('month').toISOString();
+            break;
+        }
+        default: { // All
+            data.date_from = '';
+            data.date_to = '';
+            break;
         }
-        const exponent = Math.floor(Math.log(bytes) / Math.log(1024));
-        return (bytes / Math.pow(1024, exponent)).toFixed(2) + ' ' + ' KMGTP'.charAt(exponent) + 'B';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FileSizePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: FileSizePipe, isStandalone: true, name: "fileSize" }); }
+    return data;
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FileSizePipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'fileSize',
-                    standalone: true
-                }]
-        }] });
 
-/**
- * We are using both app-entity-file-list and app-entity-files-view-all
- * to ensure backward compatibility with older projects `ngx-techlify-documents, ngx-techlify-checksheets`
- * etc. `app-entity-files-view-all` will be removed by `v18.80.0`
- */
-class EntityFileListComponent extends TechlifyListComponent {
-    set isFilterPatchFromRoute(value) {
-        this._isFilterPatchFromRoute = value;
+var TimelineFilterComponent_1;
+let TimelineFilterComponent = class TimelineFilterComponent {
+    static { TimelineFilterComponent_1 = this; }
+    set defaultValue(value) {
+        this.value = value;
     }
-    get isFilterPatchFromRoute() {
-        return this._isFilterPatchFromRoute;
+    get empty() {
+        const { value: { select_value } } = this.selectorForm;
+        return !select_value;
     }
-    constructor(service, alertService, fb, errorHandler, permissionsService) {
-        super(service);
-        this.service = service;
-        this.alertService = alertService;
-        this.fb = fb;
-        this.errorHandler = errorHandler;
-        this.permissionsService = permissionsService;
-        this.viewOnly = false;
-        this.allowMultipleFiles = false;
-        this.allowBulkUpdate = false;
-        this.viewMode = 'list';
-        this.fileDropperHeight = '500px';
-        this.isShowDragDropSection = true;
-        /**
-         * Should we allow tagging entity-files?
-         */
-        this.useTechlifyTags = false;
-        this.techlifyTagCategories = [];
-        this.techlifyTagConfig = new TechlifyTaggerTagFormConfigModel();
-        this.entityFileForm = signal(EntityFileFormComponent);
-        this.formData = {};
-        this.title = "File";
-        this.displayedColumns = [
-            'index',
-            'title',
-            'details',
-            'file_size',
-            'uploaded_on',
-        ];
-        this.isShowCreateAction = true;
-        this.isShowUpdateAction = true;
-        this.isShowDeleteAction = true;
-        this.isShowReadAction = true;
-        this.filterFormConfiguration = {
-            tag_ids: { multiple: true }
-        };
-        this.filterForm = this.fb.group({
-            title: [""],
-            tag_ids: [[]]
-        });
-        this.updateRowForm = this.fb.group({
-            title: [''],
-            details: [''],
-            tag_ids: [''],
-        });
-    }
-    async ngOnInit() {
-        /**
-         * The reason we are setting permissions this way is because the user can pass what permissions are to be used
-         * when manipulating the files/documents. If they are a client admin we will skip this
-         */
-        if (!await this.permissionsService.hasPermission('client_admin')) {
-            this.isShowCreateAction = this.permission?.create ? await this.permissionsService.hasPermission(this.permission.create) : true;
-            this.isShowUpdateAction = this.permission?.update ? await this.permissionsService.hasPermission(this.permission.update) : true;
-            this.isShowReadAction = this.permission?.read ? await this.permissionsService.hasPermission(this.permission.read) : true;
-            this.isShowDeleteAction = this.permission?.delete ? await this.permissionsService.hasPermission(this.permission.delete) : true;
-        }
-        this.formData = {
-            entity: {
-                entity_type: this.entityType,
-                entity_id: this.entityId
-            },
-            hideTitleAndDetails: this.hideTitleAndDetails,
-            useTechlifyTags: this.useTechlifyTags,
-            techlifyTagCategories: this.techlifyTagCategories,
-            techlifyTagConfig: this.techlifyTagConfig,
-        };
-        // File dropper config
-        this.fileConfig = {
-            fileId: "entityDashboardDropper",
-            containerId: "entityDashboardDropperContainer",
-            styles: {
-                height: this.fileDropperHeight
-            },
-            multiple: this.allowMultipleFiles,
-            acceptFile: "*",
-            maxSize: 10,
-            acceptFileText: "All Files"
-        };
-        this.viewerConfig = {
-            imageStyle: {
-                height: '200px',
-                width: '200px'
-            },
-            viewerStyle: {
-                height: ' 160px',
-                width: '200px'
-            },
-            hideRemove: true
-        };
-        if (this.hideTitleAndDetails) {
-            this.displayedColumns = this.displayedColumns.filter(x => (x !== 'details') && (x !== 'title'));
-        }
-        if (!this.viewOnly) {
-            this.displayedColumns.push('actions');
-        }
-        if (this.allowBulkUpdate) {
-            this.displayedColumns.push('select');
-        }
-        if (this.isFilterPatchFromRoute) {
-            this.patchFiltersFromRoute();
-        }
-        this.listenFilterChanges();
-        this.loadData();
+    get shouldLabelFloat() { return this.focused || !this.empty; }
+    get required() { return this._required; }
+    set required(value) {
+        this.selectorForm?.get('select_value')?.setValidators(Validators.required);
+        this._required = coerceBooleanProperty(value);
+        this.stateChanges.next();
     }
-    loadData() {
-        this.filters = {
-            ...this.requestHelperService?.convertToFormData(JSON.parse(JSON.stringify(this.filterForm.value)), this.filterFormConfiguration),
-            entity_type: this.entityType,
-            entity_id: this.entityId,
-            with: 'creator,tags',
-            page: this.page,
-            per_page: this.perPage
-        };
-        super.loadData(this.filters);
+    get disabled() { return this._disabled; }
+    set disabled(value) {
+        this._disabled = coerceBooleanProperty(value);
+        this._disabled
+            ? this.selectorForm.disable({ emitEvent: false })
+            : this.selectorForm.enable({ emitEvent: false });
+        this.stateChanges.next();
     }
-    async fileChanged(event) {
-        const files = event;
-        if (files.length > 0) {
-            for (const file of files) {
-                await this.service.uploadEntityFile(file, {
-                    entity_type: this.entityType,
-                    entity_id: this.entityId,
-                });
-            }
-            this.reload();
-            this.alertService.addAlert('Files uploaded successfully!', 'success');
+    get value() {
+        if (this.selectorForm.valid) {
+            return this.selectorForm.value.select_value;
         }
+        return '';
     }
-    async bulkUpdate(fieldName) {
-        const data = this.updateRowForm.value;
-        this.isWorking = true;
-        data.field_name = fieldName;
-        data.document_ids = this.selectedModelIds;
-        try {
-            await this.service.bulkUpdate(data).then(() => {
-                this.alertService.addAlert("Successfully updated", "success");
-                this.isWorking = false;
-                this.reload();
-            });
+    set value(data) {
+        this.selectorForm.patchValue({ select_value: parseInt(data) || '' }, { emitEvent: false });
+        this.stateChanges.next();
+        //If the selection is custom, validate if date is selected
+        if (this.value == Timeline.CUSTOM) {
+            if (this.isInitialised) {
+                //If initialised already, open the calendar
+                this.openCalendar();
+            }
+            else {
+                //Apply default ranges from form if exist
+                this.applyRange((this.getFieldValue(this.dateFrom) ?? null), (this.getFieldValue(this.dateTo) ?? null));
+            }
         }
-        catch (error) {
-            this.errorHandler.handleError(error);
-            this.isWorking = false;
+        else {
+            this.changeTimeline(parseInt(data) || '');
         }
+        this.isInitialised = true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: EntityFileListComponent, deps: [{ token: EntityFileService }, { token: AlertService }, { token: i1$5.UntypedFormBuilder }, { token: ErrorHandlerService }, { token: i5$1.NgxPermissionsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: EntityFileListComponent, selector: "app-entity-file-list, app-entity-files-view-all", inputs: { entityId: "entityId", entityType: "entityType", viewOnly: "viewOnly", removeSearch: "removeSearch", hideTitleAndDetails: "hideTitleAndDetails", displayMode: "displayMode", allowMultipleFiles: "allowMultipleFiles", allowBulkUpdate: "allowBulkUpdate", viewMode: "viewMode", fileDropperHeight: "fileDropperHeight", isShowDragDropSection: "isShowDragDropSection", isFilterPatchFromRoute: "isFilterPatchFromRoute", useTechlifyTags: "useTechlifyTags", techlifyTagCategories: "techlifyTagCategories", techlifyTagConfig: "techlifyTagConfig", title: "title", permission: "permission" }, 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                </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      <!-- 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\"> {{ element.file_size | fileSize }} </td>\n      </ng-container>\n\n      <!-- Uploaded On Column -->\n      <ng-container matColumnDef=\"uploaded_on\">\n        <th mat-header-cell *matHeaderCellDef> Uploaded On </th>\n        <td mat-cell *matCellDef=\"let element\">\n          <div>\n            {{element.created_at | date: 'mediumDate'}}\n          </div>\n          <div class=\"text-muted\">\n            By {{element.creator?.name}}\n          </div>\n        </td>\n      </ng-container>\n\n      <!-- Actions Column -->\n      <ng-container matColumnDef=\"actions\">\n        <th mat-header-cell *matHeaderCellDef> Actions </th>\n        <td mat-cell *matCellDef=\"let element\" class=\"text-muted\">\n          <div 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: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: 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: i8$1.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: i8$4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8$4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8$4.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: i11.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i12.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i12.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i12.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i12.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i12.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i12.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i12.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i12.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i12.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i12.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$2.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: 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: 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                </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      <!-- 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\"> {{ element.file_size | fileSize }} </td>\n      </ng-container>\n\n      <!-- Uploaded On Column -->\n      <ng-container matColumnDef=\"uploaded_on\">\n        <th mat-header-cell *matHeaderCellDef> Uploaded On </th>\n        <td mat-cell *matCellDef=\"let element\">\n          <div>\n            {{element.created_at | date: 'mediumDate'}}\n          </div>\n          <div class=\"text-muted\">\n            By {{element.creator?.name}}\n          </div>\n        </td>\n      </ng-container>\n\n      <!-- Actions Column -->\n      <ng-container matColumnDef=\"actions\">\n        <th mat-header-cell *matHeaderCellDef> Actions </th>\n        <td mat-cell *matCellDef=\"let element\" class=\"text-muted\">\n          <div 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: i1$5.UntypedFormBuilder }, { type: ErrorHandlerService }, { type: i5$1.NgxPermissionsService }], propDecorators: { entityId: [{
-                type: Input
-            }], entityType: [{
-                type: Input
-            }], viewOnly: [{
-                type: Input
-            }], removeSearch: [{
-                type: Input
-            }], hideTitleAndDetails: [{
-                type: Input
-            }], displayMode: [{
-                type: Input
-            }], allowMultipleFiles: [{
-                type: Input
-            }], allowBulkUpdate: [{
-                type: Input
-            }], viewMode: [{
-                type: Input
-            }], fileDropperHeight: [{
-                type: Input
-            }], isShowDragDropSection: [{
-                type: Input
-            }], isFilterPatchFromRoute: [{
-                type: Input
-            }], useTechlifyTags: [{
-                type: Input
-            }], techlifyTagCategories: [{
-                type: Input
-            }], techlifyTagConfig: [{
-                type: Input
-            }], title: [{
-                type: Input
-            }], permission: [{
-                type: Input
-            }] } });
-
-class FileDropperConfig {
-}
-
-class NoteService {
-    constructor(http) {
-        this.http = http;
-    }
-    getNotes(filterModel) {
-        return this.http.get('api/notes', { params: filterModel }).toPromise();
-    }
-    addNote(note) {
-        return this.http.post('api/notes', note).toPromise();
-    }
-    editNote(note) {
-        return this.http.put(`api/notes/${note.id}`, note).toPromise();
+    static { this.nextId = 0; }
+    get timelineValue() {
+        return this.selectorForm.get('select_value');
     }
-    deleteNote(note) {
-        return this.http.delete(`api/notes/${note.id}`).toPromise();
+    get isCustomSelected() {
+        return this.value == Timeline.CUSTOM;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NoteService, deps: [{ token: HttpService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NoteService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NoteService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: () => [{ type: HttpService }] });
-
-const errorMessages$b = {
-    note: {
-        required: "Note is required"
+    get customDateFrom() {
+        return this.selectorForm.get('custom_date_from');
     }
-};
-class NoteFormComponent {
-    constructor(dialogRef, data, fb, formValidatorService, alertService, noteService) {
-        this.dialogRef = dialogRef;
-        this.data = data;
-        this.fb = fb;
-        this.formValidatorService = formValidatorService;
-        this.alertService = alertService;
-        this.noteService = noteService;
-        this.createForm();
+    get customDateTo() {
+        return this.selectorForm.get('custom_date_to');
     }
-    /** Method to create a form **/
-    createForm() {
-        //TODO: Finialize and add more validations.
-        this.noteFormGroup = this.fb.group({
-            id: [""],
-            note: ["", Validators.compose([Validators.required])],
-            model_type: [""],
-            related_model_id: [""],
+    constructor(formBuilder, ngControl, datePipe) {
+        this.ngControl = ngControl;
+        this.datePipe = datePipe;
+        this.isInitialised = false;
+        this.timelines = [
+            { value: Timeline.CUSTOM, viewValue: 'Custom' },
+            { value: Timeline.TODAY, viewValue: 'Today' },
+            { value: Timeline.YESTERDAY, viewValue: 'Yesterday' },
+            { value: Timeline.TOMMOROW, viewValue: 'Tomorrow' },
+            { value: Timeline.THIS_WEEK, viewValue: 'This Week' },
+            { value: Timeline.LAST_WEEK, viewValue: 'Last Week' },
+            { value: Timeline.NEXT_WEEK, viewValue: 'Next Week' },
+            { value: Timeline.THIS_MONTH, viewValue: 'This Month' },
+            { value: Timeline.LAST_MONTH, viewValue: 'Last Month' },
+            { value: Timeline.NEXT_MONTH, viewValue: 'Next Month' },
+            { value: Timeline.THIS_QUARTER, viewValue: 'This Quarter' },
+            { value: Timeline.LAST_QUARTER, viewValue: 'Last Quarter' },
+            { value: Timeline.THIS_YEAR, viewValue: 'This Year' },
+            { value: Timeline.LAST_YEAR, viewValue: 'Last Year' },
+            { value: Timeline.ALL, viewValue: 'All dates' },
+        ];
+        this.dateFrom = 'date_from';
+        this.dateTo = 'date_to';
+        this.appearance = 'fill';
+        this.showClearButton = false;
+        this.labelText = 'Select Timeline';
+        this.selectionChange = new EventEmitter();
+        this.stateChanges = new Subject();
+        this.controlType = 'timeline-filter';
+        this.id = `timeline-filter-${TimelineFilterComponent_1.nextId++}`;
+        this.describedBy = '';
+        this.focused = false;
+        this._required = false;
+        this._disabled = false;
+        this.onChange = () => { };
+        this.onTouched = () => { };
+        //Custom range
+        this.selectedRangeLabel = '';
+        this.selectorForm = formBuilder.group({
+            select_value: [''],
+            custom_date_from: [''],
+            custom_date_to: [''],
         });
+        if (this.ngControl != null) {
+            this.ngControl.valueAccessor = this;
+        }
     }
     ngOnInit() {
-        if (this.data.update) {
-            this.updateMode = true;
-        }
-        this.noteFormGroup.patchValue(this.data.note);
+        this.timelineValue.valueChanges.
+            pipe(debounceTime(100), distinctUntilChanged(), untilDestroyed(this)).subscribe(value => this.value = value);
+        //Listen only to custom date to, since it is range selector it always safe to listen date to
+        this.customDateTo.valueChanges.pipe(distinctUntilChanged(), untilDestroyed(this)).subscribe(val => {
+            if (val && !this.isCustomDatePatching) {
+                this.applyRange();
+            }
+        });
     }
-    //Method to trigger login
-    async submit() {
-        this.noteFormFirstAttempt = true;
-        if (this.noteFormGroup.valid) {
-            const model = this.noteFormGroup.value;
-            const result = this.updateMode
-                ? await this.noteService.editNote(model)
-                : await this.noteService.addNote(model);
-            this.alertService.addAlert(`${this.data?.labelText} saved successfully`, "success");
-            this.dialogRef.close(result);
-        }
+    resetFieldValue(field) {
+        this.form?.get(field)?.setValue('');
     }
-    cancel() {
-        this.dialogRef.close();
+    getFieldValue(field) {
+        return this.form?.get(field)?.value;
     }
-    /**Method to evaluate form fields*/
-    isFieldValid(field) {
-        return this.formValidatorService.isFieldValid(field, this.noteFormGroup, this.noteFormFirstAttempt);
+    setFieldValue(field, value, emitEvent = true) {
+        this.form?.get(field)?.setValue(value, { emitEvent: emitEvent });
     }
-    /**Method to find error in form fields*/
-    getErrorMessage(field) {
-        return this.formValidatorService.getErrorMessage(field, this.noteFormGroup, errorMessages$b);
+    changeTimeline(value) {
+        value = parseInt(value);
+        this.selectedRangeLabel = '';
+        const timeline = calculateTimeline(value, this.dateFrom, this.dateTo);
+        if (timeline) {
+            this.setCustomDates('', '');
+            this.setFieldValue(this.dateFrom, this.datePipe.transform(timeline.date_from, 'yyyy-MM-dd'));
+            this.setFieldValue(this.dateTo, this.datePipe.transform(timeline.date_to, 'yyyy-MM-dd'));
+        }
+        this.onChange(this.value);
+        this.selectionChange.emit(timeline);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NoteFormComponent, deps: [{ token: i1.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: i1$5.UntypedFormBuilder }, { token: FormValidatorService }, { token: AlertService }, { token: NoteService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: NoteFormComponent, selector: "app-note-form", ngImport: i0, template: "<form [formGroup]=\"noteFormGroup\" (ngSubmit)=\"submit()\">\n    <div fxLayout=\"column\" class=\"mat-typography\">\n        <div mat-dialog-title class=\"text-center\">\n            <div>{{data?.labelText}}</div>\n        </div>\n\n        <div mat-dialog-content fxLayout=\"column\">\n            <div fxLayout=\"row wrap\" fxLayoutAlign=\"space-between\">\n                <mat-form-field fxFlex=\"100%\">\n                    <textarea matInput formControlName=\"note\" placeholder=\"{{data?.labelText}}\" autocomplete=\"off\"\n                        required></textarea>\n                    <mat-error *ngIf=\"isFieldValid('note')\">{{\n                        getErrorMessage(\"note\")\n                        }}</mat-error>\n                </mat-form-field>\n\n                <div class=\"my-2\" fxLayout=\"row\" fxLayoutGap=\"30px\" fxLayoutAlign=\"end\" fxFlex=\"100%\">\n                    <button mat-raised-button type=\"button\" (click)=\"cancel()\">\n                        Cancel\n                    </button>\n                    <button mat-raised-button type=\"submit\" color=\"primary\">Save</button>\n                </div>\n            </div>\n        </div>\n    </div>\n</form>", styles: [""], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: 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: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i8$4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8$4.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"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NoteFormComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-note-form', template: "<form [formGroup]=\"noteFormGroup\" (ngSubmit)=\"submit()\">\n    <div fxLayout=\"column\" class=\"mat-typography\">\n        <div mat-dialog-title class=\"text-center\">\n            <div>{{data?.labelText}}</div>\n        </div>\n\n        <div mat-dialog-content fxLayout=\"column\">\n            <div fxLayout=\"row wrap\" fxLayoutAlign=\"space-between\">\n                <mat-form-field fxFlex=\"100%\">\n                    <textarea matInput formControlName=\"note\" placeholder=\"{{data?.labelText}}\" autocomplete=\"off\"\n                        required></textarea>\n                    <mat-error *ngIf=\"isFieldValid('note')\">{{\n                        getErrorMessage(\"note\")\n                        }}</mat-error>\n                </mat-form-field>\n\n                <div class=\"my-2\" fxLayout=\"row\" fxLayoutGap=\"30px\" fxLayoutAlign=\"end\" fxFlex=\"100%\">\n                    <button mat-raised-button type=\"button\" (click)=\"cancel()\">\n                        Cancel\n                    </button>\n                    <button mat-raised-button type=\"submit\" color=\"primary\">Save</button>\n                </div>\n            </div>\n        </div>\n    </div>\n</form>" }]
-        }], ctorParameters: () => [{ type: i1.MatDialogRef }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [MAT_DIALOG_DATA]
-                }] }, { type: i1$5.UntypedFormBuilder }, { type: FormValidatorService }, { type: AlertService }, { type: NoteService }] });
-
-class CommentFormComponent {
-    set commentData(data) {
-        this.view = !!data;
-        this._commentData = data;
-        this.commentFormGroup.patchValue(data);
+    openCalendar() {
+        this.picker.open();
     }
-    constructor(fb, credentialService) {
-        this.fb = fb;
-        this.credentialService = credentialService;
-        this.action = new EventEmitter();
-        this.createForm();
+    applyRange(defaultFrom, defaultTo) {
+        const from = defaultFrom ?? this.selectorForm.get('custom_date_from')?.value;
+        const to = defaultTo ?? this.selectorForm.get('custom_date_to')?.value;
+        if (from && to) {
+            this.selectedRangeLabel = `<b>${this.datePipe.transform(from, 'yyyy-MM-dd')}</b>:<b>${this.datePipe.transform(to, 'yyyy-MM-dd')}</b`;
+            this.setFieldValue(this.dateFrom, this.datePipe.transform(from, 'yyyy-MM-dd'));
+            this.setFieldValue(this.dateTo, this.datePipe.transform(to, 'yyyy-MM-dd'));
+            this.onChange(this.value);
+            this.selectionChange.emit(this.value);
+            this.setCustomDates(from, to);
+        }
     }
-    ngOnInit() { }
-    get isLoggedIn() {
-        return this.credentialService.isAuthenticated;
+    setCustomDates(from, to) {
+        // update form fields silently
+        this.isCustomDatePatching = true;
+        this.selectorForm.get('custom_date_from')?.setValue(from, { emitEvent: false });
+        this.selectorForm.get('custom_date_to')?.setValue(to, { emitEvent: false });
+        this.isCustomDatePatching = false;
     }
-    get currentUser() {
-        return this.credentialService.credentials.user;
+    setDescribedByIds(ids) {
+        this.describedBy = ids.join(' ');
     }
-    createForm() {
-        //TODO: Finialize and add more validations.
-        this.commentFormGroup = this.fb.group({
-            id: [""],
-            note: [""],
-            model_type: [""],
-            related_model_id: [""],
-        });
+    onContainerClick(event) {
+        event.stopPropagation();
     }
-    submit() {
-        if (this.commentFormGroup.get("note").value) {
-            if (this._commentData) {
-                this.view = !this.view;
-            }
-            this.action.emit({ type: "save", value: this.commentFormGroup.value });
-            this.commentFormGroup.reset();
-        }
-        else if (this.commentFormGroup.get("id").value) {
-            this.deleteComment();
-        }
+    writeValue(data) {
+        this.value = data;
     }
-    hideEdit() {
-        if (this.commentFormGroup.get("id").value) {
-            this.view = !this.view;
-        }
+    registerOnChange(fn) {
+        this.onChange = fn;
     }
-    editComment() {
-        this.view = !this.view;
-        this.commentFormGroup.patchValue(this._commentData);
+    registerOnTouched(fn) {
+        this.onTouched = fn;
     }
-    deleteComment() {
-        this.action.emit({ type: "delete", value: this.commentFormGroup.value });
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
     }
-    ngOnDestroy() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CommentFormComponent, deps: [{ token: i1$5.UntypedFormBuilder }, { token: CredentialsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: CommentFormComponent, selector: "app-comment-form", inputs: { commentData: "commentData" }, outputs: { action: "action" }, ngImport: i0, template: "<form (ngSubmit)=\"submit()\" [formGroup]=\"commentFormGroup\">\n  <div fxLayout=\"column\" class=\"my-2\" [ngClass]=\"{ 'border border-primary shadow rounded ': view}\">\n    <div *ngIf=\"!view\" fxLayout=\"column\">\n      <mat-form-field appearance=\"outline\" style=\"background-color:white;\">\n        <mat-label>Comment</mat-label>\n        <textarea matInput rows=\"5\" placeholder=\"Add a comment...\" formControlName=\"note\" autocomplete=\"off\"></textarea>\n      </mat-form-field>\n\n      <div fxLayout fxLayoutGap=\"1rem\" class=\"mt-2\">\n        <span fxFlex></span>\n        <button *ngIf=\"_commentData\" mat-button type=\"button\" (click)=\"view = !view\">\n          Cancel\n        </button>\n        <button mat-raised-button color=\"primary\" type=\"submit\">\n          {{ _commentData ? \"Update\" : \"Post comment\" }}\n        </button>\n      </div>\n    </div>\n\n    <div fxLayout=\"column\" *ngIf=\"view\" class=\"p-2 m-2\">\n      <div fxLayout=\"row wrap\" fxLayoutGap=\".5rem\">\n        <div fxFlex=\"20%\" fxLayoutAlign=\"start\">\n          <button mat-icon-button type=\"button\" style=\"color:grey\">\n            <mat-icon style=\"font-size:60px\">account_circle</mat-icon>\n          </button>\n        </div>\n        <div fxFlex=\"75%\">\n          <div fxLayout=\"column\" fxLayoutGap=\".5rem\">\n            <div class=\"font-weight-bold\">{{ _commentData?.creator?.name }}</div>\n            <div class=\"text-muted\">{{ _commentData.updated_at | date:'medium' }}</div>\n          </div>\n        </div>\n      </div>\n      <app-read-more class=\"mt-2\" [text]=\"_commentData.note\"></app-read-more>\n      <div fxLayout class=\"mt-1\" fxLayoutGap=\"1rem\" *ngIf=\"isLoggedIn && currentUser.id === _commentData.creator_id\">\n        <a href=\"javascript:;\" (click)=\"editComment()\">\n          Edit\n        </a>\n        <a href=\"javascript:;\" (click)=\"deleteComment()\">\n          Delete\n        </a>\n      </div>\n    </div>\n  </div>\n</form>", styles: [":host ::ng-deep .mat-form-field-wrapper{padding-bottom:0!important;margin:0!important}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: 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: i2.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "component", type: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i8$4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8$4.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: "component", type: ReadMoreComponent, selector: "app-read-more", inputs: ["text", "maxLength"] }, { kind: "pipe", type: i3.DatePipe, name: "date" }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CommentFormComponent, decorators: [{
+    ngOnDestroy() {
+        this.stateChanges.complete();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TimelineFilterComponent, deps: [{ token: i1$5.UntypedFormBuilder }, { token: i1$5.NgControl, optional: true, self: true }, { token: i3.DatePipe }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: TimelineFilterComponent, selector: "app-timeline-filter", inputs: { defaultValue: "defaultValue", required: "required", disabled: "disabled", value: "value", timelines: "timelines", dateFrom: "dateFrom", dateTo: "dateTo", appearance: "appearance", showClearButton: "showClearButton", form: "form", labelText: "labelText" }, outputs: { selectionChange: "selectionChange" }, providers: [
+            DatePipe,
+            {
+                provide: MatFormFieldControl,
+                useExisting: TimelineFilterComponent
+            }
+        ], viewQueries: [{ propertyName: "picker", first: true, predicate: ["picker"], descendants: true }], ngImport: i0, template: "<ng-container [formGroup]=\"selectorForm\">\n    <mat-form-field [appearance]=\"appearance\" class=\"fl-sm\">\n        <mat-label>{{labelText}}</mat-label>\n        <mat-select formControlName=\"select_value\">\n            <mat-option *ngFor=\"let timeline of timelines\" [value]=\"timeline.value\">\n                {{timeline.viewValue}}\n            </mat-option>\n        </mat-select>\n        <button *ngIf=\"showClearButton && timelineValue.value\" matSuffix mat-icon-button\n            (click)=\"timelineValue.setValue('')\">\n            <mat-icon>close</mat-icon>\n        </button>\n        <mat-hint *ngIf=\"isCustomSelected && selectedRangeLabel\" (click)=\"openCalendar()\" class=\"clickable\" fxLayout>\n            <span [innerHTML]=\"selectedRangeLabel\" style=\"font-size: 10px;\"></span>\n            <app-techlify-icon name=\"edit\" class=\"clickable\" size=\"xs\" style=\"margin-left:2px\"></app-techlify-icon>\n        </mat-hint>\n        <mat-hint *ngIf=\"isCustomSelected && !selectedRangeLabel\" (click)=\"openCalendar()\" class=\"clickable\" fxLayout>\n            <span style=\"font-size: 10px;\">Select Range</span>\n            <app-techlify-icon name=\"edit\" class=\"clickable\" size=\"xs\" style=\"margin-left:2px\"></app-techlify-icon>\n        </mat-hint>\n        <mat-date-range-input class=\"offscreen-range-input\" [rangePicker]=\"picker\">\n            <input matStartDate formControlName=\"custom_date_from\" placeholder=\"From date\" readonly />\n            <input matEndDate formControlName=\"custom_date_to\" placeholder=\"To date\" readonly />\n        </mat-date-range-input>\n        <mat-date-range-picker #picker></mat-date-range-picker>\n    </mat-form-field>\n</ng-container>", styles: [".icon-md{height:24px!important;width:24px!important;font-size:24px!important;margin:0 1px}.icon-sm{height:20px!important;width:20px!important;font-size:20px!important}.icon-xs{height:16px!important;width:16px!important;font-size:16px!important}.fl-md{width:200px!important}.fl-md .mat-mdc-form-field{width:100%!important}.fl-sm{width:150px!important}.fl-sm .mat-mdc-form-field{width:100%!important}.mat-btn-md{height:25px!important;padding:0 8px!important}.fs-12{font-size:12px!important}.fs-16{font-size:16px!important}.fs-13{font-size:13px!important}.fs-18{font-size:18px!important}.clickable:hover{cursor:pointer}.mat-mdc-form-field-hint-wrapper{padding:0 4px!important}.nil-subscript-wrapper .mat-mdc-form-field-subscript-wrapper{height:0!important}.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}.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: i1$5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i8$4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8$4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8$4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i8$4.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.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$1.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i11$1.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i11$1.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i11$1.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "component", type: TechlifyIconComponent, selector: "app-techlify-icon", inputs: ["name", "size"] }] }); }
+};
+TimelineFilterComponent = TimelineFilterComponent_1 = __decorate([
+    UntilDestroy()
+], TimelineFilterComponent);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TimelineFilterComponent, decorators: [{
             type: Component,
-            args: [{ selector: "app-comment-form", template: "<form (ngSubmit)=\"submit()\" [formGroup]=\"commentFormGroup\">\n  <div fxLayout=\"column\" class=\"my-2\" [ngClass]=\"{ 'border border-primary shadow rounded ': view}\">\n    <div *ngIf=\"!view\" fxLayout=\"column\">\n      <mat-form-field appearance=\"outline\" style=\"background-color:white;\">\n        <mat-label>Comment</mat-label>\n        <textarea matInput rows=\"5\" placeholder=\"Add a comment...\" formControlName=\"note\" autocomplete=\"off\"></textarea>\n      </mat-form-field>\n\n      <div fxLayout fxLayoutGap=\"1rem\" class=\"mt-2\">\n        <span fxFlex></span>\n        <button *ngIf=\"_commentData\" mat-button type=\"button\" (click)=\"view = !view\">\n          Cancel\n        </button>\n        <button mat-raised-button color=\"primary\" type=\"submit\">\n          {{ _commentData ? \"Update\" : \"Post comment\" }}\n        </button>\n      </div>\n    </div>\n\n    <div fxLayout=\"column\" *ngIf=\"view\" class=\"p-2 m-2\">\n      <div fxLayout=\"row wrap\" fxLayoutGap=\".5rem\">\n        <div fxFlex=\"20%\" fxLayoutAlign=\"start\">\n          <button mat-icon-button type=\"button\" style=\"color:grey\">\n            <mat-icon style=\"font-size:60px\">account_circle</mat-icon>\n          </button>\n        </div>\n        <div fxFlex=\"75%\">\n          <div fxLayout=\"column\" fxLayoutGap=\".5rem\">\n            <div class=\"font-weight-bold\">{{ _commentData?.creator?.name }}</div>\n            <div class=\"text-muted\">{{ _commentData.updated_at | date:'medium' }}</div>\n          </div>\n        </div>\n      </div>\n      <app-read-more class=\"mt-2\" [text]=\"_commentData.note\"></app-read-more>\n      <div fxLayout class=\"mt-1\" fxLayoutGap=\"1rem\" *ngIf=\"isLoggedIn && currentUser.id === _commentData.creator_id\">\n        <a href=\"javascript:;\" (click)=\"editComment()\">\n          Edit\n        </a>\n        <a href=\"javascript:;\" (click)=\"deleteComment()\">\n          Delete\n        </a>\n      </div>\n    </div>\n  </div>\n</form>", styles: [":host ::ng-deep .mat-form-field-wrapper{padding-bottom:0!important;margin:0!important}\n"] }]
-        }], ctorParameters: () => [{ type: i1$5.UntypedFormBuilder }, { type: CredentialsService }], propDecorators: { commentData: [{
+            args: [{ selector: 'app-timeline-filter', providers: [
+                        DatePipe,
+                        {
+                            provide: MatFormFieldControl,
+                            useExisting: TimelineFilterComponent
+                        }
+                    ], 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}.offscreen-range-input{position:absolute;opacity:0;pointer-events:none;display:flex!important}\n"] }]
+        }], ctorParameters: () => [{ type: i1$5.UntypedFormBuilder }, { type: i1$5.NgControl, decorators: [{
+                    type: Optional
+                }, {
+                    type: Self
+                }] }, { type: i3.DatePipe }], propDecorators: { defaultValue: [{
                 type: Input
-            }], action: [{
+            }], required: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], picker: [{
+                type: ViewChild,
+                args: ['picker']
+            }], timelines: [{
+                type: Input
+            }], dateFrom: [{
+                type: Input
+            }], dateTo: [{
+                type: Input
+            }], appearance: [{
+                type: Input
+            }], showClearButton: [{
+                type: Input
+            }], form: [{
+                type: Input
+            }], labelText: [{
+                type: Input
+            }], selectionChange: [{
                 type: Output
             }] } });
 
-class NoteListComponent extends TechlifyListComponent {
-    constructor(noteService, dialog, alertService) {
-        super();
-        this.noteService = noteService;
-        this.dialog = dialog;
-        this.alertService = alertService;
-        this.readonly = false;
-        this.labelText = 'Note';
-        this.commentsView = false;
-        this.viewMode = 'list';
-        this.displayedColumns = [
-            'index',
-            'note',
-            'actions'
-        ];
-        this.isSaving = false;
-        this.total = 0;
-        this.lastPage = 0;
-        this.filters = {};
-        this.filters.sort_by = 'created_at|DESC';
-    }
-    ngOnInit() {
-        if (this.readonly) {
-            this.displayedColumns = this.displayedColumns.filter(x => x !== 'actions');
-        }
-        this.filters.related_model_id = this.relatedModelId;
-        this.filters.model_type = this.modelType;
-        this.loadData();
-    }
-    loadData() {
-        this.isWorking = true;
-        this.noteService.getNotes({
-            ...this.filters,
-            page: this.page,
-            with: 'creator'
-        }).then((result) => {
-            this.models = this.models.concat(result?.data);
-            this.lastPage = result?.last_page;
-            this.isWorking = false;
-            this.total = result?.total;
-        }, () => {
-            this.isWorking = false;
-        });
+class TechlifyFormButtonComponent {
+    constructor(matDialog) {
+        this.matDialog = matDialog;
+        this.component = input.required();
+        this.model = input();
+        this.data = input({});
+        this.width = input('700px');
+        this.saved = output();
     }
-    addNote() {
-        const dialogRef = this.dialog.open(NoteFormComponent, {
-            width: '400px',
-            data: {
-                note: { related_model_id: this.relatedModelId, model_type: this.modelType },
-                labelText: this.labelText,
-            },
-            autoFocus: false
+    open() {
+        const ref = this.matDialog.open(this.component(), {
+            width: this.width(),
+            data: { model: this.model(), ...this.data() }
         });
-        dialogRef.afterClosed().subscribe(result => {
+        ref.afterClosed().subscribe((result) => {
             if (result) {
-                this.reload();
+                this.saved.emit(result);
             }
         });
     }
-    editNote(note) {
-        const dialogRef = this.dialog.open(NoteFormComponent, {
-            width: '400px',
-            data: {
-                note,
-                update: true,
-                labelText: this.labelText
-            },
-            autoFocus: false
-        });
-        dialogRef.afterClosed().subscribe(result => {
-            if (result) {
-                this.reload();
-            }
-        });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TechlifyFormButtonComponent, deps: [{ token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: TechlifyFormButtonComponent, isStandalone: true, selector: "app-techlify-form-button", inputs: { component: { classPropertyName: "component", publicName: "component", isSignal: true, isRequired: true, transformFunction: null }, model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { saved: "saved" }, ngImport: i0, template: "<app-techlify-icon role=\"button\" [name]=\"model() ? 'edit' : 'add'\" (click)=\"open()\"></app-techlify-icon>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MaterialModule }, { kind: "ngmodule", type: TechlifyIconModule }, { kind: "component", type: TechlifyIconComponent, selector: "app-techlify-icon", inputs: ["name", "size"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TechlifyFormButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-techlify-form-button', standalone: true, imports: [
+                        CommonModule,
+                        MaterialModule,
+                        TechlifyIconModule
+                    ], template: "<app-techlify-icon role=\"button\" [name]=\"model() ? 'edit' : 'add'\" (click)=\"open()\"></app-techlify-icon>\r\n" }]
+        }], ctorParameters: () => [{ type: i1.MatDialog }] });
+
+class ReadMoreComponent {
+    constructor() {
+        this.maxLength = 100;
+        this.hideToggle = true;
+        this.isCollapsed = true;
     }
-    async deleteNote(note) {
-        const dialogRef = this.dialog.open(ActionPopupComponent, {
-            width: '400px',
-            data: {
-                title: `Delete ${this.labelText}`,
-                message: `Are you sure to delete?`
-            },
-            autoFocus: false
-        });
-        dialogRef.afterClosed().subscribe(async (result) => {
-            if (result) {
-                // Action confirmed
-                await this.noteService.deleteNote(note);
-                this.models = this.models.filter((item) => item.id !== note.id);
-            }
-        });
+    ngOnInit() {
+        this.determineView();
     }
-    commentAction(event) {
-        if (event.type === 'save') {
-            if (event.value.id) {
-                this.editComment(event.value);
-                return;
-            }
-            this.addComment(event.value);
+    toggleView() {
+        this.isCollapsed = !this.isCollapsed;
+        this.determineView();
+    }
+    determineView() {
+        if (!this.text || this.text.length <= this.maxLength) {
+            this.currentText = this.text;
+            this.isCollapsed = false;
+            this.hideToggle = true;
             return;
         }
-        this.deleteNote(event.value);
-    }
-    async editComment(comment) {
-        const result = await this.noteService.editNote(comment);
-        const index = this.models.findIndex((x) => x.id === comment.id);
-        if (index !== -1) {
-            this.models[index] = result.item;
+        this.hideToggle = false;
+        if (this.isCollapsed == true) {
+            this.currentText = this.text.substring(0, this.maxLength) + "...";
         }
-    }
-    async addComment(comment) {
-        comment.related_model_id = this.relatedModelId;
-        comment.model_type = this.modelType;
-        const result = await this.noteService.addNote(comment);
-        this.models.push(result.item);
-    }
-    saveNote() {
-        if (!this.note) {
-            this.alertService.addAlert('Please enter the note', 'error');
-            return;
+        else if (this.isCollapsed == false) {
+            this.currentText = this.text;
         }
-        const data = {
-            note: this.note,
-            model_type: this.modelType,
-            related_model_id: this.relatedModelId,
-            with: 'creator',
-        };
-        this.isSaving = true;
-        this.noteService.addNote(data).then((response) => {
-            this.modelCreated(response?.item);
-            this.alertService.addAlert('The note saved successfully.', 'success');
-            this.note = '';
-            this.isSaving = false;
-            this.total += 1;
-        }).catch(() => (this.isSaving = false));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NoteListComponent, deps: [{ token: NoteService }, { token: i1.MatDialog }, { token: AlertService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.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: "<div fxLayout=\"column\" fxLayoutGap=\"1.5rem\" *ngIf=\"!commentsView\">\n\n  <ng-container *ngIf=\"viewMode === 'list'\">\n    <div class=\"d-flex align-items-center\">\n      <h5 class=\"m-0\">{{ labelText }}s</h5>\n      <app-techlify-icon name=\"add\" class=\"clickable d-print-none ml-1\" matTooltip=\"Add\"\n        (click)=\"addNote()\"></app-techlify-icon>\n    </div>\n\n    <div class=\"w-100 scroll-container\" infiniteScroll [infiniteScrollDistance]=\"1\" [infiniteScrollThrottle]=\"50\"\n      (scrolled)=\"onScroll()\" [scrollWindow]=\"false\">\n      <table mat-table [dataSource]=\"models\" class=\"w-100\" multiTemplateDataRows>\n\n        <!-- Index Column -->\n        <ng-container matColumnDef=\"index\">\n          <th mat-header-cell *matHeaderCellDef> #</th>\n          <td mat-cell *matCellDef=\"let note; let i = dataIndex\"> {{ i + 1 }}</td>\n        </ng-container>\n\n\n        <ng-container matColumnDef=\"note\">\n          <th mat-header-cell *matHeaderCellDef> {{ labelText }}</th>\n          <td mat-cell *matCellDef=\"let note\">\n            {{ note?.note }}\n          </td>\n        </ng-container>\n\n        <ng-container matColumnDef=\"actions\">\n          <th mat-header-cell *matHeaderCellDef class=\"d-print-none\"> Actions</th>\n          <td mat-cell *matCellDef=\"let note\" class=\"d-print-none text-secondary\">\n            <div fxLayoutAlign=\"start center\">\n              <app-techlify-icon name=\"edit\" class=\"clickable\" matTooltip=\"Update\"\n                (click)=\"editNote(note)\"></app-techlify-icon>\n              <app-techlify-icon name=\"delete\" class=\"clickable ml-1\" matTooltip=\"Delete\"\n                (click)=\"deleteNote(note)\"></app-techlify-icon>\n            </div>\n          </td>\n        </ng-container>\n        <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n        <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n      </table>\n      <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isWorking\"></mat-progress-bar>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"viewMode === 'timeline'\">\n    <mat-card>\n      <mat-card-content class=\"d-flex justify-content-start align-items-center gap-2\">\n        <h5 class=\"mb-0\">Notes</h5>\n        <span class=\"badge badge-info ml-1\" *ngIf=\"total\">{{ total }}</span>\n      </mat-card-content>\n      <mat-card-content class=\"mt-2\">\n        <form (ngSubmit)=\"saveNote()\">\n          <mat-form-field class=\"w-100\" appearance=\"outline\">\n            <input [(ngModel)]=\"note\" [ngModelOptions]=\"{standalone: true}\" type=\"text\" matInput\n              placeholder=\"Write your notes here...\" [disabled]=\"isSaving\">\n            <mat-icon *ngIf=\"!isSaving\" matSuffix class=\"cursor-pointer\" (click)=\"saveNote()\">send</mat-icon>\n            <mat-progress-spinner matSuffix mode=\"indeterminate\" diameter=\"20\" *ngIf=\"isSaving\"></mat-progress-spinner>\n          </mat-form-field>\n        </form>\n      </mat-card-content>\n      <mat-card-content>\n        <div *ngFor=\"let note of models;last as isLast\">\n          <div class=\"d-flex justify-content-between align-items-center gap-2\">\n            <div class=\"d-flex flex-column\">\n              <p class=\"mb-0\">{{ note?.creator?.name }}</p>\n              <small class=\"text-secondary\">On {{ note?.created_at | date: 'medium' }}</small>\n            </div>\n            <div class=\"d-flex justify-content-end align-items-center gap-1\">\n              <app-techlify-icon name=\"edit\" class=\"clickable\" matTooltip=\"Update\"\n                (click)=\"editNote(note)\"></app-techlify-icon>\n              <app-techlify-icon name=\"delete\" class=\"clickable\" matTooltip=\"Delete\"\n                (click)=\"deleteNote(note)\"></app-techlify-icon>\n            </div>\n          </div>\n          <div>{{ note?.note }}</div>\n          <mat-divider class=\"my-2\" *ngIf=\"!isLast\"></mat-divider>\n        </div>\n        <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isWorking\"></mat-progress-bar>\n      </mat-card-content>\n    </mat-card>\n  </ng-container>\n\n</div>\n\n<div fxLayout=\"column\" fxLayoutGap=\"1.5rem\" *ngIf=\"commentsView\">\n  <div fxLayout fxLayoutAlign=\"center center\" fxLayoutGap=\"1rem\">\n    <h5 class=\"m-0\">{{ labelText }}s</h5>\n  </div>\n\n  <div fxLayout=\"column\" fxLayoutAlign=\"start\" fxFlex=\"100%\">\n    <div class=\"w-100 scroll-container jumbotron\" infiniteScroll [infiniteScrollDistance]=\"1\"\n      [infiniteScrollThrottle]=\"50\" (scrolled)=\"onScroll()\" [scrollWindow]=\"false\">\n      <app-comment-form [commentData]=\"comment\" (action)=\"commentAction($event)\" *ngFor=\"let comment of models\">\n      </app-comment-form>\n      <app-comment-form (action)=\"commentAction($event)\"></app-comment-form>\n    </div>\n  </div>\n</div>", styles: [".scroll-container{max-height:400px;overflow-y:auto}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i6$2.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "directive", type: 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: i8$4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8$4.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$3.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i12.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i12.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i12.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i12.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i12.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i12.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i12.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i12.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i12.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i12.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$3.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"] }, { kind: "component", type: i11$2.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$5.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: TechlifyIconComponent, selector: "app-techlify-icon", inputs: ["name", "size"] }, { kind: "component", type: CommentFormComponent, selector: "app-comment-form", inputs: ["commentData"], outputs: ["action"] }, { kind: "pipe", type: i3.DatePipe, name: "date" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ReadMoreComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ReadMoreComponent, selector: "app-read-more", inputs: { text: "text", maxLength: "maxLength" }, ngImport: i0, template: "<div [innerHTML]=\"currentText\"></div>\n<a href=\"javascript:;\" *ngIf=\"!hideToggle\" class=\"primary-color hoverable\" (click)=\"toggleView()\">Read\n  {{ isCollapsed ? \"more\" : \"less\" }}</a>", styles: ["div.collapsed{height:250px;overflow:hidden}.primary-color{color:#009fdd!important}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NoteListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ReadMoreComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-note-list', template: "<div fxLayout=\"column\" fxLayoutGap=\"1.5rem\" *ngIf=\"!commentsView\">\n\n  <ng-container *ngIf=\"viewMode === 'list'\">\n    <div class=\"d-flex align-items-center\">\n      <h5 class=\"m-0\">{{ labelText }}s</h5>\n      <app-techlify-icon name=\"add\" class=\"clickable d-print-none ml-1\" matTooltip=\"Add\"\n        (click)=\"addNote()\"></app-techlify-icon>\n    </div>\n\n    <div class=\"w-100 scroll-container\" infiniteScroll [infiniteScrollDistance]=\"1\" [infiniteScrollThrottle]=\"50\"\n      (scrolled)=\"onScroll()\" [scrollWindow]=\"false\">\n      <table mat-table [dataSource]=\"models\" class=\"w-100\" multiTemplateDataRows>\n\n        <!-- Index Column -->\n        <ng-container matColumnDef=\"index\">\n          <th mat-header-cell *matHeaderCellDef> #</th>\n          <td mat-cell *matCellDef=\"let note; let i = dataIndex\"> {{ i + 1 }}</td>\n        </ng-container>\n\n\n        <ng-container matColumnDef=\"note\">\n          <th mat-header-cell *matHeaderCellDef> {{ labelText }}</th>\n          <td mat-cell *matCellDef=\"let note\">\n            {{ note?.note }}\n          </td>\n        </ng-container>\n\n        <ng-container matColumnDef=\"actions\">\n          <th mat-header-cell *matHeaderCellDef class=\"d-print-none\"> Actions</th>\n          <td mat-cell *matCellDef=\"let note\" class=\"d-print-none text-secondary\">\n            <div fxLayoutAlign=\"start center\">\n              <app-techlify-icon name=\"edit\" class=\"clickable\" matTooltip=\"Update\"\n                (click)=\"editNote(note)\"></app-techlify-icon>\n              <app-techlify-icon name=\"delete\" class=\"clickable ml-1\" matTooltip=\"Delete\"\n                (click)=\"deleteNote(note)\"></app-techlify-icon>\n            </div>\n          </td>\n        </ng-container>\n        <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n        <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n      </table>\n      <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isWorking\"></mat-progress-bar>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"viewMode === 'timeline'\">\n    <mat-card>\n      <mat-card-content class=\"d-flex justify-content-start align-items-center gap-2\">\n        <h5 class=\"mb-0\">Notes</h5>\n        <span class=\"badge badge-info ml-1\" *ngIf=\"total\">{{ total }}</span>\n      </mat-card-content>\n      <mat-card-content class=\"mt-2\">\n        <form (ngSubmit)=\"saveNote()\">\n          <mat-form-field class=\"w-100\" appearance=\"outline\">\n            <input [(ngModel)]=\"note\" [ngModelOptions]=\"{standalone: true}\" type=\"text\" matInput\n              placeholder=\"Write your notes here...\" [disabled]=\"isSaving\">\n            <mat-icon *ngIf=\"!isSaving\" matSuffix class=\"cursor-pointer\" (click)=\"saveNote()\">send</mat-icon>\n            <mat-progress-spinner matSuffix mode=\"indeterminate\" diameter=\"20\" *ngIf=\"isSaving\"></mat-progress-spinner>\n          </mat-form-field>\n        </form>\n      </mat-card-content>\n      <mat-card-content>\n        <div *ngFor=\"let note of models;last as isLast\">\n          <div class=\"d-flex justify-content-between align-items-center gap-2\">\n            <div class=\"d-flex flex-column\">\n              <p class=\"mb-0\">{{ note?.creator?.name }}</p>\n              <small class=\"text-secondary\">On {{ note?.created_at | date: 'medium' }}</small>\n            </div>\n            <div class=\"d-flex justify-content-end align-items-center gap-1\">\n              <app-techlify-icon name=\"edit\" class=\"clickable\" matTooltip=\"Update\"\n                (click)=\"editNote(note)\"></app-techlify-icon>\n              <app-techlify-icon name=\"delete\" class=\"clickable\" matTooltip=\"Delete\"\n                (click)=\"deleteNote(note)\"></app-techlify-icon>\n            </div>\n          </div>\n          <div>{{ note?.note }}</div>\n          <mat-divider class=\"my-2\" *ngIf=\"!isLast\"></mat-divider>\n        </div>\n        <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isWorking\"></mat-progress-bar>\n      </mat-card-content>\n    </mat-card>\n  </ng-container>\n\n</div>\n\n<div fxLayout=\"column\" fxLayoutGap=\"1.5rem\" *ngIf=\"commentsView\">\n  <div fxLayout fxLayoutAlign=\"center center\" fxLayoutGap=\"1rem\">\n    <h5 class=\"m-0\">{{ labelText }}s</h5>\n  </div>\n\n  <div fxLayout=\"column\" fxLayoutAlign=\"start\" fxFlex=\"100%\">\n    <div class=\"w-100 scroll-container jumbotron\" infiniteScroll [infiniteScrollDistance]=\"1\"\n      [infiniteScrollThrottle]=\"50\" (scrolled)=\"onScroll()\" [scrollWindow]=\"false\">\n      <app-comment-form [commentData]=\"comment\" (action)=\"commentAction($event)\" *ngFor=\"let comment of models\">\n      </app-comment-form>\n      <app-comment-form (action)=\"commentAction($event)\"></app-comment-form>\n    </div>\n  </div>\n</div>", styles: [".scroll-container{max-height:400px;overflow-y:auto}\n"] }]
-        }], ctorParameters: () => [{ type: NoteService }, { type: i1.MatDialog }, { type: AlertService }], propDecorators: { relatedModelId: [{
-                type: Input
-            }], modelType: [{
-                type: Input
-            }], readonly: [{
-                type: Input
-            }], labelText: [{
-                type: Input
-            }], commentsView: [{
+            args: [{ selector: "app-read-more", template: "<div [innerHTML]=\"currentText\"></div>\n<a href=\"javascript:;\" *ngIf=\"!hideToggle\" class=\"primary-color hoverable\" (click)=\"toggleView()\">Read\n  {{ isCollapsed ? \"more\" : \"less\" }}</a>", styles: ["div.collapsed{height:250px;overflow:hidden}.primary-color{color:#009fdd!important}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { text: [{
                 type: Input
-            }], viewMode: [{
+            }], maxLength: [{
                 type: Input
             }] } });
 
-class SearchableSelectorComponent {
-    static { this.nextId = 0; }
-    get empty() {
-        const { value: { select_value } } = this.selectorForm;
-        return !select_value;
-    }
-    get shouldLabelFloat() { return this.focused || !this.empty; }
-    get required() { return this._required; }
-    set required(value) {
-        this.selectorForm.get('select_value').setValidators(Validators.required);
-        this._required = coerceBooleanProperty(value);
-        this.stateChanges.next();
+class WrapPipe {
+    transform(value, length = 50) {
+        if (!value) {
+            return '';
+        }
+        return value.length > length ? value.substring(0, length) + '...' : value;
     }
-    get disabled() { return this._disabled; }
-    set disabled(value) {
-        this._disabled = coerceBooleanProperty(value);
-        this._disabled ? this.selectorForm.disable() : this.selectorForm.enable();
-        this.stateChanges.next();
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WrapPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: WrapPipe, isStandalone: true, name: "wrap" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: WrapPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'wrap',
+                    standalone: true
+                }]
+        }] });
+
+class FileSizePipe {
+    transform(bytes) {
+        if (!bytes) {
+            return '0.00 B';
+        }
+        const exponent = Math.floor(Math.log(bytes) / Math.log(1024));
+        return (bytes / Math.pow(1024, exponent)).toFixed(2) + ' ' + ' KMGTP'.charAt(exponent) + 'B';
     }
-    get value() {
-        return this.selectorForm.get('select_value')?.value || '';
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FileSizePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: FileSizePipe, isStandalone: true, name: "fileSize" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FileSizePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'fileSize',
+                    standalone: true
+                }]
+        }] });
+
+/**
+ * We are using both app-entity-file-list and app-entity-files-view-all
+ * to ensure backward compatibility with older projects `ngx-techlify-documents, ngx-techlify-checksheets`
+ * etc. `app-entity-files-view-all` will be removed by `v18.80.0`
+ */
+class EntityFileListComponent extends TechlifyListComponent {
+    set isFilterPatchFromRoute(value) {
+        this._isFilterPatchFromRoute = value;
     }
-    set value(data) {
-        this.selectorForm.patchValue({ select_value: data || '' });
-        this.stateChanges.next();
+    get isFilterPatchFromRoute() {
+        return this._isFilterPatchFromRoute;
     }
-    constructor(formBuilder, _focusMonitor, http, _elementRef, dialog, ngControl) {
-        this._focusMonitor = _focusMonitor;
-        this.http = http;
-        this._elementRef = _elementRef;
-        this.dialog = dialog;
-        this.ngControl = ngControl;
-        this.valueField = 'id';
-        this.titleField = 'title';
-        this.multiple = false;
-        this.selectedValueChange = new EventEmitter();
-        this.enableSearch = true;
-        this.add = false;
-        this.edit = false;
-        this.sort = true;
-        this.items = [];
-        this.apiDataProperty = 'data';
-        this.cache = false;
-        this.perPage = 50;
-        this.inDataSearch = false;
-        this.panelWidth = '';
-        this.selectionChange = new EventEmitter();
-        this.itemsChange = new EventEmitter();
-        this.focusSearchOnOpen = false;
-        this.isItemsEmpty = new EventEmitter();
+    constructor(service, alertService, fb, errorHandler, permissionsService) {
+        super(service);
+        this.service = service;
+        this.alertService = alertService;
+        this.fb = fb;
+        this.errorHandler = errorHandler;
+        this.permissionsService = permissionsService;
+        this.viewOnly = false;
+        this.allowMultipleFiles = false;
+        this.allowBulkUpdate = false;
+        this.viewMode = 'list';
+        this.fileDropperHeight = '500px';
+        this.isShowDragDropSection = true;
         /**
-         * If this is set to true, if there is a pre-selected entity,
-         * the entity that is populated will be emitted when it is set
+         * Should we allow tagging entity-files?
          */
-        this.isEmitInitialEvent = false;
-        this.isLoading = false;
-        this.onChange = () => { };
-        this.onTouched = () => { };
-        this.stateChanges = new Subject();
-        this.focused = false;
-        this.controlType = 'searchable-selctor';
-        this.id = `searchable-selctor-${SearchableSelectorComponent.nextId++}`;
-        this.describedBy = '';
-        this.cachedItems = [];
-        this.subscriptions = new Subscription();
-        this._required = false;
-        this._disabled = false;
-        this.selectorForm = formBuilder.group({
-            select_value: [null],
-            search: ''
+        this.useTechlifyTags = false;
+        this.techlifyTagCategories = [];
+        this.techlifyTagConfig = new TechlifyTaggerTagFormConfigModel();
+        this.entityFileForm = signal(EntityFileFormComponent);
+        this.formData = {};
+        this.title = "File";
+        this.displayedColumns = [
+            'index',
+            'title',
+            'expires_on',
+            'details',
+            'file_size',
+            'uploaded_on',
+        ];
+        this.isShowCreateAction = true;
+        this.isShowUpdateAction = true;
+        this.isShowDeleteAction = true;
+        this.isShowReadAction = true;
+        this.filterFormConfiguration = {
+            tag_ids: { multiple: true }
+        };
+        this.filterForm = this.fb.group({
+            title: [""],
+            tag_ids: [[]],
+            period_id: [''],
+            expires_on_from: [''],
+            expires_on_to: ['']
+        });
+        this.updateRowForm = this.fb.group({
+            title: [''],
+            details: [''],
+            tag_ids: [''],
         });
-        this.subscriptions.add(_focusMonitor.monitor(_elementRef, true).subscribe(origin => {
-            if (this.focused && !origin) {
-                this.onTouched();
-            }
-            this.focused = !!origin;
-            this.stateChanges.next();
-        }));
-        if (this.ngControl != null) {
-            this.ngControl.valueAccessor = this;
-        }
     }
-    openedChange(opened) {
-        if (this.dataItems.length === 0 && this.selectorForm.get('search').value) {
-            this.selectorForm.get('search').setValue('');
+    async ngOnInit() {
+        /**
+         * The reason we are setting permissions this way is because the user can pass what permissions are to be used
+         * when manipulating the files/documents. If they are a client admin we will skip this
+         */
+        if (!await this.permissionsService.hasPermission('client_admin')) {
+            this.isShowCreateAction = this.permission?.create ? await this.permissionsService.hasPermission(this.permission.create) : true;
+            this.isShowUpdateAction = this.permission?.update ? await this.permissionsService.hasPermission(this.permission.update) : true;
+            this.isShowReadAction = this.permission?.read ? await this.permissionsService.hasPermission(this.permission.read) : true;
+            this.isShowDeleteAction = this.permission?.delete ? await this.permissionsService.hasPermission(this.permission.delete) : true;
         }
-        if (opened && this.enableSearch && this.focusSearchOnOpen) {
-            // Focus the search input field
-            setTimeout(() => this.searchInput.nativeElement.focus(), 0);
+        this.formData = {
+            entity: {
+                entity_type: this.entityType,
+                entity_id: this.entityId
+            },
+            hideTitleAndDetails: this.hideTitleAndDetails,
+            useTechlifyTags: this.useTechlifyTags,
+            techlifyTagCategories: this.techlifyTagCategories,
+            techlifyTagConfig: this.techlifyTagConfig,
+        };
+        // File dropper config
+        this.fileConfig = {
+            fileId: "entityDashboardDropper",
+            containerId: "entityDashboardDropperContainer",
+            styles: {
+                height: this.fileDropperHeight
+            },
+            multiple: this.allowMultipleFiles,
+            acceptFile: "*",
+            maxSize: 10,
+            acceptFileText: "All Files"
+        };
+        this.viewerConfig = {
+            imageStyle: {
+                height: '200px',
+                width: '200px'
+            },
+            viewerStyle: {
+                height: ' 160px',
+                width: '200px'
+            },
+            hideRemove: true
+        };
+        if (this.hideTitleAndDetails) {
+            this.displayedColumns = this.displayedColumns.filter(x => (x !== 'details') && (x !== 'title'));
         }
+        if (!this.viewOnly) {
+            this.displayedColumns.push('actions');
+        }
+        if (this.allowBulkUpdate) {
+            this.displayedColumns.push('select');
+        }
+        if (this.isFilterPatchFromRoute) {
+            this.patchFiltersFromRoute();
+        }
+        this.listenFilterChanges();
+        this.loadData();
     }
-    get dataItems() {
-        let items = [];
-        if (this.multiple && this.selectedValue && (this.selectedValue.length > 0))
-            items = [...this.selectedValue, ...this.items];
-        else if ((!this.multiple) && this.selectedValue)
-            items = [this.selectedValue, ...this.items];
-        else
-            items = this.items;
-        items = items.filter((v, i, a) => a.findIndex(v => v[this.valueField] === a[i][this.valueField]) === i);
-        //Emit the items to any child component
-        this.itemsChange.emit(items);
-        return items;
-    }
-    ngOnInit() {
-        this.subscriptions.add(this.selectorForm.get('search').valueChanges
-            .pipe(debounceTime(500), distinctUntilChanged()).subscribe(value => {
-            if (this.enableSearch)
-                this.search(value);
-        }));
+    loadData() {
         this.filters = {
-            perPage: this.perPage,
-            search: '',
-            page: 1,
-            lastPage: 1
+            ...this.requestHelperService?.convertToFormData(JSON.parse(JSON.stringify(this.filterForm.value))),
+            entity_type: this.entityType,
+            entity_id: this.entityId,
+            with: 'creator,tags',
+            page: this.page,
+            per_page: this.perPage
         };
-        if (this.sort) {
-            this.filters.sort_by = this.sortBy || `${this.titleField}|asc`;
-        }
-        //Fetch Items only if it is not present, can be used in places where we load many entries.
-        if (this.items.length === 0) {
-            this.fetchItemList();
+        super.loadData(this.filters);
+    }
+    async fileChanged(event) {
+        const files = event;
+        if (files.length > 0) {
+            for (const file of files) {
+                await this.service.uploadEntityFile(file, {
+                    entity_type: this.entityType,
+                    entity_id: this.entityId,
+                });
+            }
+            this.reload();
+            this.alertService.addAlert('Files uploaded successfully!', 'success');
         }
     }
-    fetchItemList() {
-        this.isLoading = true;
-        let request = this.http.get(this.apiUrl, { params: this.filters });
-        if (this.cache) {
-            request = this.http.cache().get(this.apiUrl, { params: this.filters });
+    async bulkUpdate(fieldName) {
+        const data = this.updateRowForm.value;
+        this.isWorking = true;
+        data.field_name = fieldName;
+        data.document_ids = this.selectedModelIds;
+        try {
+            await this.service.bulkUpdate(data).then(() => {
+                this.alertService.addAlert("Successfully updated", "success");
+                this.isWorking = false;
+                this.reload();
+            });
+        }
+        catch (error) {
+            this.errorHandler.handleError(error);
+            this.isWorking = false;
         }
-        this.subscriptions.add(of().pipe(startWith(true), switchMap((_) => from(request)), finalize$1(() => this.isLoading = false)).subscribe((result) => {
-            this.items = this.items.concat(result[this.apiDataProperty]);
-            if (this.items.length == 0 && (!this.filters?.search)) {
-                //If there is no items and search is empty, then we emit items empty event.
-                this.isItemsEmpty.emit(true);
-            }
-            if (this.cache) {
-                this.cachedItems = this.items;
-            }
-            this.filters.page = result?.current_page || 1;
-            this.filters.lastPage = result?.last_page || 1;
-            /**
-             * If we are required to emit the selected entity when it is initially set,
-             * let's go ahead and emit it.
-             **/
-            if (this.isEmitInitialEvent && this.value) {
-                this._handleInput();
-                //Once the initial event is emitted, reset back to avoid continuous events
-                this.isEmitInitialEvent = false;
-            }
-        }));
     }
-    setDescribedByIds(ids) {
-        this.describedBy = ids.join(' ');
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: EntityFileListComponent, deps: [{ token: EntityFileService }, { token: AlertService }, { token: i1$5.UntypedFormBuilder }, { token: ErrorHandlerService }, { token: i5$1.NgxPermissionsService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: EntityFileListComponent, selector: "app-entity-file-list, app-entity-files-view-all", inputs: { entityId: "entityId", entityType: "entityType", viewOnly: "viewOnly", removeSearch: "removeSearch", hideTitleAndDetails: "hideTitleAndDetails", displayMode: "displayMode", allowMultipleFiles: "allowMultipleFiles", allowBulkUpdate: "allowBulkUpdate", viewMode: "viewMode", fileDropperHeight: "fileDropperHeight", isShowDragDropSection: "isShowDragDropSection", isFilterPatchFromRoute: "isFilterPatchFromRoute", useTechlifyTags: "useTechlifyTags", techlifyTagCategories: "techlifyTagCategories", techlifyTagConfig: "techlifyTagConfig", title: "title", permission: "permission" }, 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\"> {{ element.file_size | fileSize }} </td>\n      </ng-container>\n\n      <!-- Uploaded On Column -->\n      <ng-container matColumnDef=\"uploaded_on\">\n        <th mat-header-cell *matHeaderCellDef> Uploaded On </th>\n        <td mat-cell *matCellDef=\"let element\">\n          <div>\n            {{element.created_at | date: 'mediumDate'}}\n          </div>\n          <div class=\"text-muted\">\n            By {{element.creator?.name}}\n          </div>\n        </td>\n      </ng-container>\n\n      <!-- Actions Column -->\n      <ng-container matColumnDef=\"actions\">\n        <th mat-header-cell *matHeaderCellDef> Actions </th>\n        <td mat-cell *matCellDef=\"let element\" class=\"text-muted\">\n          <div 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: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: 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: i8$1.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: i8$4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8$4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8$4.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: i11.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i12.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i12.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i12.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i12.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i12.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i12.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i12.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i12.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i12.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i12.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$2.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: 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\"> {{ element.file_size | fileSize }} </td>\n      </ng-container>\n\n      <!-- Uploaded On Column -->\n      <ng-container matColumnDef=\"uploaded_on\">\n        <th mat-header-cell *matHeaderCellDef> Uploaded On </th>\n        <td mat-cell *matCellDef=\"let element\">\n          <div>\n            {{element.created_at | date: 'mediumDate'}}\n          </div>\n          <div class=\"text-muted\">\n            By {{element.creator?.name}}\n          </div>\n        </td>\n      </ng-container>\n\n      <!-- Actions Column -->\n      <ng-container matColumnDef=\"actions\">\n        <th mat-header-cell *matHeaderCellDef> Actions </th>\n        <td mat-cell *matCellDef=\"let element\" class=\"text-muted\">\n          <div 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: i1$5.UntypedFormBuilder }, { type: ErrorHandlerService }, { type: i5$1.NgxPermissionsService }], propDecorators: { entityId: [{
+                type: Input
+            }], entityType: [{
+                type: Input
+            }], viewOnly: [{
+                type: Input
+            }], removeSearch: [{
+                type: Input
+            }], hideTitleAndDetails: [{
+                type: Input
+            }], displayMode: [{
+                type: Input
+            }], allowMultipleFiles: [{
+                type: Input
+            }], allowBulkUpdate: [{
+                type: Input
+            }], viewMode: [{
+                type: Input
+            }], fileDropperHeight: [{
+                type: Input
+            }], isShowDragDropSection: [{
+                type: Input
+            }], isFilterPatchFromRoute: [{
+                type: Input
+            }], useTechlifyTags: [{
+                type: Input
+            }], techlifyTagCategories: [{
+                type: Input
+            }], techlifyTagConfig: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], permission: [{
+                type: Input
+            }] } });
+
+class FileDropperConfig {
+}
+
+class NoteService {
+    constructor(http) {
+        this.http = http;
     }
-    onContainerClick(event) {
-        event.stopPropagation();
+    getNotes(filterModel) {
+        return this.http.get('api/notes', { params: filterModel }).toPromise();
     }
-    writeValue(data) {
-        this.value = data;
+    addNote(note) {
+        return this.http.post('api/notes', note).toPromise();
     }
-    registerOnChange(fn) {
-        this.onChange = fn;
+    editNote(note) {
+        return this.http.put(`api/notes/${note.id}`, note).toPromise();
     }
-    registerOnTouched(fn) {
-        this.onTouched = fn;
+    deleteNote(note) {
+        return this.http.delete(`api/notes/${note.id}`).toPromise();
     }
-    setDisabledState(isDisabled) {
-        this.disabled = isDisabled;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NoteService, deps: [{ token: HttpService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NoteService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NoteService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: HttpService }] });
+
+const errorMessages$b = {
+    note: {
+        required: "Note is required"
     }
-    getPropertyValue(ele, keyString) {
-        keyString = keyString.replace(/\[(\w+)\]/g, ".$1"); // convert indexes to properties
-        keyString = keyString.replace(/^\./, ""); // strip a leading dot
-        const keyList = keyString.split(".");
-        for (let i = 0, n = keyList.length; i < n; ++i) {
-            const key = keyList[i];
-            if (ele && key in ele) {
-                ele = ele[key];
-            }
-            else {
-                return;
-            }
+};
+class NoteFormComponent {
+    constructor(dialogRef, data, fb, formValidatorService, alertService, noteService) {
+        this.dialogRef = dialogRef;
+        this.data = data;
+        this.fb = fb;
+        this.formValidatorService = formValidatorService;
+        this.alertService = alertService;
+        this.noteService = noteService;
+        this.createForm();
+    }
+    /** Method to create a form **/
+    createForm() {
+        //TODO: Finialize and add more validations.
+        this.noteFormGroup = this.fb.group({
+            id: [""],
+            note: ["", Validators.compose([Validators.required])],
+            model_type: [""],
+            related_model_id: [""],
+        });
+    }
+    ngOnInit() {
+        if (this.data.update) {
+            this.updateMode = true;
         }
-        return ele;
+        this.noteFormGroup.patchValue(this.data.note);
     }
-    _handleInput() {
-        //Trigger on change only when initial event is false, to avoid double loading
-        if (!this.isEmitInitialEvent) {
-            this.onChange(this.value);
+    //Method to trigger login
+    async submit() {
+        this.noteFormFirstAttempt = true;
+        if (this.noteFormGroup.valid) {
+            const model = this.noteFormGroup.value;
+            const result = this.updateMode
+                ? await this.noteService.editNote(model)
+                : await this.noteService.addNote(model);
+            this.alertService.addAlert(`${this.data?.labelText} saved successfully`, "success");
+            this.dialogRef.close(result);
         }
-        if (this.multiple)
-            this.selectedValue = (this.value || []).map(x => this.dataItems.find(y => y[this.valueField] === x));
-        else
-            this.selectedValue = this.dataItems.find(x => x[this.valueField] === this.value);
-        this.selectedValueChange.emit(this.selectedValue);
-        this.selectionChange.emit(this.value);
     }
-    get errorState() {
-        return (this.ngControl && this.ngControl.invalid && (this.ngControl.touched || this.ngControl.dirty));
+    cancel() {
+        this.dialogRef.close();
     }
-    onScroll() {
-        if (!this.isLoading && this.filters.lastPage > this.filters.page) {
-            this.filters.page += 1;
-            this.fetchItemList();
-        }
+    /**Method to evaluate form fields*/
+    isFieldValid(field) {
+        return this.formValidatorService.isFieldValid(field, this.noteFormGroup, this.noteFormFirstAttempt);
     }
-    reloadData() {
-        this.items = [];
-        this.filters.page = 1;
-        this.filters.lastPage = 1;
-        this.fetchItemList();
+    /**Method to find error in form fields*/
+    getErrorMessage(field) {
+        return this.formValidatorService.getErrorMessage(field, this.noteFormGroup, errorMessages$b);
     }
-    search(event) {
-        if (this.searchField) {
-            this.filters[this.searchField] = event;
-        }
-        else {
-            this.filters.search = event;
-        }
-        // we need search field to search in data
-        if (this.inDataSearch && this.searchField) {
-            this.filterItems(event);
-        }
-        else {
-            this.reloadData();
-        }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NoteFormComponent, deps: [{ token: i1.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: i1$5.UntypedFormBuilder }, { token: FormValidatorService }, { token: AlertService }, { token: NoteService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: NoteFormComponent, selector: "app-note-form", ngImport: i0, template: "<form [formGroup]=\"noteFormGroup\" (ngSubmit)=\"submit()\">\n    <div fxLayout=\"column\" class=\"mat-typography\">\n        <div mat-dialog-title class=\"text-center\">\n            <div>{{data?.labelText}}</div>\n        </div>\n\n        <div mat-dialog-content fxLayout=\"column\">\n            <div fxLayout=\"row wrap\" fxLayoutAlign=\"space-between\">\n                <mat-form-field fxFlex=\"100%\">\n                    <textarea matInput formControlName=\"note\" placeholder=\"{{data?.labelText}}\" autocomplete=\"off\"\n                        required></textarea>\n                    <mat-error *ngIf=\"isFieldValid('note')\">{{\n                        getErrorMessage(\"note\")\n                        }}</mat-error>\n                </mat-form-field>\n\n                <div class=\"my-2\" fxLayout=\"row\" fxLayoutGap=\"30px\" fxLayoutAlign=\"end\" fxFlex=\"100%\">\n                    <button mat-raised-button type=\"button\" (click)=\"cancel()\">\n                        Cancel\n                    </button>\n                    <button mat-raised-button type=\"submit\" color=\"primary\">Save</button>\n                </div>\n            </div>\n        </div>\n    </div>\n</form>", styles: [""], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: 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: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i8$4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8$4.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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NoteFormComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-note-form', template: "<form [formGroup]=\"noteFormGroup\" (ngSubmit)=\"submit()\">\n    <div fxLayout=\"column\" class=\"mat-typography\">\n        <div mat-dialog-title class=\"text-center\">\n            <div>{{data?.labelText}}</div>\n        </div>\n\n        <div mat-dialog-content fxLayout=\"column\">\n            <div fxLayout=\"row wrap\" fxLayoutAlign=\"space-between\">\n                <mat-form-field fxFlex=\"100%\">\n                    <textarea matInput formControlName=\"note\" placeholder=\"{{data?.labelText}}\" autocomplete=\"off\"\n                        required></textarea>\n                    <mat-error *ngIf=\"isFieldValid('note')\">{{\n                        getErrorMessage(\"note\")\n                        }}</mat-error>\n                </mat-form-field>\n\n                <div class=\"my-2\" fxLayout=\"row\" fxLayoutGap=\"30px\" fxLayoutAlign=\"end\" fxFlex=\"100%\">\n                    <button mat-raised-button type=\"button\" (click)=\"cancel()\">\n                        Cancel\n                    </button>\n                    <button mat-raised-button type=\"submit\" color=\"primary\">Save</button>\n                </div>\n            </div>\n        </div>\n    </div>\n</form>" }]
+        }], ctorParameters: () => [{ type: i1.MatDialogRef }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }, { type: i1$5.UntypedFormBuilder }, { type: FormValidatorService }, { type: AlertService }, { type: NoteService }] });
+
+class CommentFormComponent {
+    set commentData(data) {
+        this.view = !!data;
+        this._commentData = data;
+        this.commentFormGroup.patchValue(data);
     }
-    filterItems(event) {
-        if (event) {
-            this.items = this.cachedItems.filter((value) => {
-                return value[this.searchField].toLowerCase().search(event.toLowerCase()) != -1;
-            });
+    constructor(fb, credentialService) {
+        this.fb = fb;
+        this.credentialService = credentialService;
+        this.action = new EventEmitter();
+        this.createForm();
+    }
+    ngOnInit() { }
+    get isLoggedIn() {
+        return this.credentialService.isAuthenticated;
+    }
+    get currentUser() {
+        return this.credentialService.credentials.user;
+    }
+    createForm() {
+        //TODO: Finialize and add more validations.
+        this.commentFormGroup = this.fb.group({
+            id: [""],
+            note: [""],
+            model_type: [""],
+            related_model_id: [""],
+        });
+    }
+    submit() {
+        if (this.commentFormGroup.get("note").value) {
+            if (this._commentData) {
+                this.view = !this.view;
+            }
+            this.action.emit({ type: "save", value: this.commentFormGroup.value });
+            this.commentFormGroup.reset();
         }
-        else {
-            this.items = this.cachedItems;
+        else if (this.commentFormGroup.get("id").value) {
+            this.deleteComment();
         }
     }
-    addItem(event) {
-        const dialogRef = this.dialog.open(this.itemComponent, {
-            width: '400px',
-            autoFocus: false,
-            data: {},
-            ...this.addConfig
-        });
-        dialogRef.afterClosed().subscribe((model) => {
-            if (model) {
-                this.items.push(model);
-                this.selectorForm.get('select_value').setValue(model[this.valueField]);
-                this._handleInput();
-            }
-        });
-        event.stopPropagation();
+    hideEdit() {
+        if (this.commentFormGroup.get("id").value) {
+            this.view = !this.view;
+        }
     }
-    editItem(event) {
-        const dialogRef = this.dialog.open(this.itemComponent, {
-            width: '400px',
-            autoFocus: false,
-            data: {
-                item: this.selectedValue
-            },
-            ...this.editConfig
-        });
-        dialogRef.afterClosed().subscribe((result) => {
-            if (result) {
-                this.items = this.items.filter(x => x[this.valueField] !== this.selectedValue[this.valueField]);
-                this.items.push(result.item);
-                this.selectedValue = null;
-                this.selectorForm.get('select_value').setValue(result.item[this.valueField]);
-                this._handleInput();
-            }
-        });
-        event.stopPropagation();
+    editComment() {
+        this.view = !this.view;
+        this.commentFormGroup.patchValue(this._commentData);
     }
-    ngOnDestroy() {
-        this.stateChanges.complete();
-        this._focusMonitor.stopMonitoring(this._elementRef);
-        this.subscriptions.unsubscribe();
+    deleteComment() {
+        this.action.emit({ type: "delete", value: this.commentFormGroup.value });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SearchableSelectorComponent, deps: [{ token: i1$5.UntypedFormBuilder }, { token: i1$4.FocusMonitor }, { token: HttpService }, { token: i0.ElementRef }, { token: i1.MatDialog }, { token: i1$5.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: SearchableSelectorComponent, selector: "app-searchable-selector", inputs: { valueField: "valueField", titleField: "titleField", subtitleField: "subtitleField", apiUrl: "apiUrl", multiple: "multiple", selectedValue: "selectedValue", enableSearch: "enableSearch", add: "add", addConfig: "addConfig", edit: "edit", editConfig: "editConfig", sort: "sort", sortBy: "sortBy", searchField: "searchField", itemComponent: "itemComponent", items: "items", apiDataProperty: "apiDataProperty", cache: "cache", perPage: "perPage", inDataSearch: "inDataSearch", panelWidth: "panelWidth", focusSearchOnOpen: "focusSearchOnOpen", isEmitInitialEvent: "isEmitInitialEvent", required: "required", disabled: "disabled", value: "value" }, outputs: { selectedValueChange: "selectedValueChange", selectionChange: "selectionChange", itemsChange: "itemsChange", isItemsEmpty: "isItemsEmpty" }, providers: [
-            {
-                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: i1$5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i8$4.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$1.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i9$2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i11$2.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }] }); }
+    ngOnDestroy() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CommentFormComponent, deps: [{ token: i1$5.UntypedFormBuilder }, { token: CredentialsService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: CommentFormComponent, selector: "app-comment-form", inputs: { commentData: "commentData" }, outputs: { action: "action" }, ngImport: i0, template: "<form (ngSubmit)=\"submit()\" [formGroup]=\"commentFormGroup\">\n  <div fxLayout=\"column\" class=\"my-2\" [ngClass]=\"{ 'border border-primary shadow rounded ': view}\">\n    <div *ngIf=\"!view\" fxLayout=\"column\">\n      <mat-form-field appearance=\"outline\" style=\"background-color:white;\">\n        <mat-label>Comment</mat-label>\n        <textarea matInput rows=\"5\" placeholder=\"Add a comment...\" formControlName=\"note\" autocomplete=\"off\"></textarea>\n      </mat-form-field>\n\n      <div fxLayout fxLayoutGap=\"1rem\" class=\"mt-2\">\n        <span fxFlex></span>\n        <button *ngIf=\"_commentData\" mat-button type=\"button\" (click)=\"view = !view\">\n          Cancel\n        </button>\n        <button mat-raised-button color=\"primary\" type=\"submit\">\n          {{ _commentData ? \"Update\" : \"Post comment\" }}\n        </button>\n      </div>\n    </div>\n\n    <div fxLayout=\"column\" *ngIf=\"view\" class=\"p-2 m-2\">\n      <div fxLayout=\"row wrap\" fxLayoutGap=\".5rem\">\n        <div fxFlex=\"20%\" fxLayoutAlign=\"start\">\n          <button mat-icon-button type=\"button\" style=\"color:grey\">\n            <mat-icon style=\"font-size:60px\">account_circle</mat-icon>\n          </button>\n        </div>\n        <div fxFlex=\"75%\">\n          <div fxLayout=\"column\" fxLayoutGap=\".5rem\">\n            <div class=\"font-weight-bold\">{{ _commentData?.creator?.name }}</div>\n            <div class=\"text-muted\">{{ _commentData.updated_at | date:'medium' }}</div>\n          </div>\n        </div>\n      </div>\n      <app-read-more class=\"mt-2\" [text]=\"_commentData.note\"></app-read-more>\n      <div fxLayout class=\"mt-1\" fxLayoutGap=\"1rem\" *ngIf=\"isLoggedIn && currentUser.id === _commentData.creator_id\">\n        <a href=\"javascript:;\" (click)=\"editComment()\">\n          Edit\n        </a>\n        <a href=\"javascript:;\" (click)=\"deleteComment()\">\n          Delete\n        </a>\n      </div>\n    </div>\n  </div>\n</form>", styles: [":host ::ng-deep .mat-form-field-wrapper{padding-bottom:0!important;margin:0!important}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: 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: i2.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "component", type: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i8$4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8$4.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: "component", type: ReadMoreComponent, selector: "app-read-more", inputs: ["text", "maxLength"] }, { kind: "pipe", type: i3.DatePipe, name: "date" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SearchableSelectorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CommentFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-searchable-selector', providers: [
-                        {
-                            provide: MatFormFieldControl,
-                            useExisting: SearchableSelectorComponent
-                        }
-                    ], 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"] }]
-        }], ctorParameters: () => [{ type: i1$5.UntypedFormBuilder }, { type: i1$4.FocusMonitor }, { type: HttpService }, { type: i0.ElementRef }, { type: i1.MatDialog }, { type: i1$5.NgControl, decorators: [{
-                    type: Optional
-                }, {
-                    type: Self
-                }] }], propDecorators: { searchInput: [{
-                type: ViewChild,
-                args: ['searchInput']
-            }], valueField: [{
-                type: Input
-            }], titleField: [{
-                type: Input
-            }], subtitleField: [{
-                type: Input
-            }], apiUrl: [{
-                type: Input
-            }], multiple: [{
-                type: Input
-            }], selectedValue: [{
-                type: Input
-            }], selectedValueChange: [{
-                type: Output
-            }], enableSearch: [{
-                type: Input
-            }], add: [{
-                type: Input
-            }], addConfig: [{
-                type: Input
-            }], edit: [{
-                type: Input
-            }], editConfig: [{
-                type: Input
-            }], sort: [{
-                type: Input
-            }], sortBy: [{
-                type: Input
-            }], searchField: [{
-                type: Input
-            }], itemComponent: [{
-                type: Input
-            }], items: [{
-                type: Input
-            }], apiDataProperty: [{
-                type: Input
-            }], cache: [{
-                type: Input
-            }], perPage: [{
-                type: Input
-            }], inDataSearch: [{
-                type: Input
-            }], panelWidth: [{
-                type: Input
-            }], selectionChange: [{
-                type: Output
-            }], itemsChange: [{
-                type: Output
-            }], focusSearchOnOpen: [{
+            args: [{ selector: "app-comment-form", template: "<form (ngSubmit)=\"submit()\" [formGroup]=\"commentFormGroup\">\n  <div fxLayout=\"column\" class=\"my-2\" [ngClass]=\"{ 'border border-primary shadow rounded ': view}\">\n    <div *ngIf=\"!view\" fxLayout=\"column\">\n      <mat-form-field appearance=\"outline\" style=\"background-color:white;\">\n        <mat-label>Comment</mat-label>\n        <textarea matInput rows=\"5\" placeholder=\"Add a comment...\" formControlName=\"note\" autocomplete=\"off\"></textarea>\n      </mat-form-field>\n\n      <div fxLayout fxLayoutGap=\"1rem\" class=\"mt-2\">\n        <span fxFlex></span>\n        <button *ngIf=\"_commentData\" mat-button type=\"button\" (click)=\"view = !view\">\n          Cancel\n        </button>\n        <button mat-raised-button color=\"primary\" type=\"submit\">\n          {{ _commentData ? \"Update\" : \"Post comment\" }}\n        </button>\n      </div>\n    </div>\n\n    <div fxLayout=\"column\" *ngIf=\"view\" class=\"p-2 m-2\">\n      <div fxLayout=\"row wrap\" fxLayoutGap=\".5rem\">\n        <div fxFlex=\"20%\" fxLayoutAlign=\"start\">\n          <button mat-icon-button type=\"button\" style=\"color:grey\">\n            <mat-icon style=\"font-size:60px\">account_circle</mat-icon>\n          </button>\n        </div>\n        <div fxFlex=\"75%\">\n          <div fxLayout=\"column\" fxLayoutGap=\".5rem\">\n            <div class=\"font-weight-bold\">{{ _commentData?.creator?.name }}</div>\n            <div class=\"text-muted\">{{ _commentData.updated_at | date:'medium' }}</div>\n          </div>\n        </div>\n      </div>\n      <app-read-more class=\"mt-2\" [text]=\"_commentData.note\"></app-read-more>\n      <div fxLayout class=\"mt-1\" fxLayoutGap=\"1rem\" *ngIf=\"isLoggedIn && currentUser.id === _commentData.creator_id\">\n        <a href=\"javascript:;\" (click)=\"editComment()\">\n          Edit\n        </a>\n        <a href=\"javascript:;\" (click)=\"deleteComment()\">\n          Delete\n        </a>\n      </div>\n    </div>\n  </div>\n</form>", styles: [":host ::ng-deep .mat-form-field-wrapper{padding-bottom:0!important;margin:0!important}\n"] }]
+        }], ctorParameters: () => [{ type: i1$5.UntypedFormBuilder }, { type: CredentialsService }], propDecorators: { commentData: [{
                 type: Input
-            }], isItemsEmpty: [{
+            }], action: [{
                 type: Output
-            }], isEmitInitialEvent: [{
-                type: Input
-            }], required: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], value: [{
-                type: Input
             }] } });
 
-/**
- * Component to generate a num items selector
- *
- * @author Floyd Kissoon
- * @since 20170817
- */
-class NumItemsSelector {
-    constructor() {
-        this.numItemsChange = new EventEmitter();
+class NoteListComponent extends TechlifyListComponent {
+    constructor(noteService, dialog, alertService) {
+        super();
+        this.noteService = noteService;
+        this.dialog = dialog;
+        this.alertService = alertService;
+        this.readonly = false;
+        this.labelText = 'Note';
+        this.commentsView = false;
+        this.viewMode = 'list';
+        this.displayedColumns = [
+            'index',
+            'note',
+            'actions'
+        ];
+        this.isSaving = false;
+        this.total = 0;
+        this.lastPage = 0;
+        this.filters = {};
+        this.filters.sort_by = 'created_at|DESC';
     }
-    /**
-     * Called when an item has been selected
-     */
-    numItemsChanged() {
-        this.numItemsChange.emit(this.numItems);
+    ngOnInit() {
+        if (this.readonly) {
+            this.displayedColumns = this.displayedColumns.filter(x => x !== 'actions');
+        }
+        this.filters.related_model_id = this.relatedModelId;
+        this.filters.model_type = this.modelType;
+        this.loadData();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NumItemsSelector, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: NumItemsSelector, selector: "num-items-selector", inputs: { numItems: "numItems" }, outputs: { numItemsChange: "numItemsChange" }, ngImport: i0, template: "<select [(ngModel)]=\"numItems\" class=\"form-control\" id=\"numItems\" name=\"numItems\" (change)=\"numItemsChanged()\">\r\n    <option value=\"25\">25</option>\r\n    <option value=\"50\">50</option>\r\n    <option value=\"100\">100</option>\r\n    <option value=\"250\">250</option>\r\n    <option value=\"500\">500</option>\r\n    <option value=\"1000\">1000</option>\r\n    <option value=\"2000\">2000</option>\r\n    <option value=\"3000\">3000</option>\r\n    <option value=\"4000\">4000</option>\r\n    <option value=\"5000\">5000</option>\r\n    <option value=\"5000000000\">All</option>\r\n</select> ", dependencies: [{ kind: "directive", type: i1$5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NumItemsSelector, decorators: [{
-            type: Component,
-            args: [{ selector: "num-items-selector", template: "<select [(ngModel)]=\"numItems\" class=\"form-control\" id=\"numItems\" name=\"numItems\" (change)=\"numItemsChanged()\">\r\n    <option value=\"25\">25</option>\r\n    <option value=\"50\">50</option>\r\n    <option value=\"100\">100</option>\r\n    <option value=\"250\">250</option>\r\n    <option value=\"500\">500</option>\r\n    <option value=\"1000\">1000</option>\r\n    <option value=\"2000\">2000</option>\r\n    <option value=\"3000\">3000</option>\r\n    <option value=\"4000\">4000</option>\r\n    <option value=\"5000\">5000</option>\r\n    <option value=\"5000000000\">All</option>\r\n</select> " }]
-        }], ctorParameters: () => [], propDecorators: { numItems: [{
-                type: Input
-            }], numItemsChange: [{
-                type: Output
-            }] } });
-
-/**
- * Service that provides utility functions for dates
- *
- * @author Joshua Kissoon
- * @since 20170726
- */
-class DateUtils {
-    /**
-     * Takes in a date object and outputs the string value
-     */
-    getYYYYMMDDString(inputDate) {
-        var year = inputDate.getFullYear();
-        var month = (inputDate.getMonth() + 1) < 10 ? ("0" + (inputDate.getMonth() + 1)) : (inputDate.getMonth() + 1);
-        var date = inputDate.getDate() < 10 ? ("0" + inputDate.getDate()) : inputDate.getDate();
-        return year + "-" + month + "-" + date;
+    loadData() {
+        this.isWorking = true;
+        this.noteService.getNotes({
+            ...this.filters,
+            page: this.page,
+            with: 'creator'
+        }).then((result) => {
+            this.models = this.models.concat(result?.data);
+            this.lastPage = result?.last_page;
+            this.isWorking = false;
+            this.total = result?.total;
+        }, () => {
+            this.isWorking = false;
+        });
     }
-    /**
-     * Takes in a date object and outputs the year
-     */
-    getYYYY(inputDate) {
-        var year = inputDate.getFullYear();
-        return year;
+    addNote() {
+        const dialogRef = this.dialog.open(NoteFormComponent, {
+            width: '400px',
+            data: {
+                note: { related_model_id: this.relatedModelId, model_type: this.modelType },
+                labelText: this.labelText,
+            },
+            autoFocus: false
+        });
+        dialogRef.afterClosed().subscribe(result => {
+            if (result) {
+                this.reload();
+            }
+        });
     }
-    /**
-     * Takes in a date object and outputs the Month
-     */
-    getMM(inputDate) {
-        var month = inputDate.getMonth() + 1;
-        return month;
+    editNote(note) {
+        const dialogRef = this.dialog.open(NoteFormComponent, {
+            width: '400px',
+            data: {
+                note,
+                update: true,
+                labelText: this.labelText
+            },
+            autoFocus: false
+        });
+        dialogRef.afterClosed().subscribe(result => {
+            if (result) {
+                this.reload();
+            }
+        });
     }
-    //         var n = this.rfidCardUseManualEntry.manual_date.toLocaleTimeString();
-    getDateTime(inputDate) {
-        var year = inputDate.getFullYear();
-        var month = (inputDate.getMonth() + 1) < 10 ? ("0" + (inputDate.getMonth() + 1)) : (inputDate.getMonth() + 1);
-        var date = inputDate.getDate() < 10 ? ("0" + inputDate.getDate()) : inputDate.getDate();
-        var time = inputDate.toLocaleTimeString();
-        return year + "-" + month + "-" + date + " " + time;
+    async deleteNote(note) {
+        const dialogRef = this.dialog.open(ActionPopupComponent, {
+            width: '400px',
+            data: {
+                title: `Delete ${this.labelText}`,
+                message: `Are you sure to delete?`
+            },
+            autoFocus: false
+        });
+        dialogRef.afterClosed().subscribe(async (result) => {
+            if (result) {
+                // Action confirmed
+                await this.noteService.deleteNote(note);
+                this.models = this.models.filter((item) => item.id !== note.id);
+            }
+        });
     }
-    getMonthName(month) {
-        const months = [
-            'January',
-            'February',
-            'March',
-            'April',
-            'May',
-            'June',
-            'July',
-            'August',
-            'September',
-            'October',
-            'November',
-            'December'
-        ];
-        return months[month - 1] ?? '';
+    commentAction(event) {
+        if (event.type === 'save') {
+            if (event.value.id) {
+                this.editComment(event.value);
+                return;
+            }
+            this.addComment(event.value);
+            return;
+        }
+        this.deleteNote(event.value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DateUtils, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DateUtils, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DateUtils, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }] });
-
-/**
- * Component to generate a number selector
- *
- * @author Floyd Kissoon
- * @since 20180628
- */
-class NumberSelector {
-    constructor() {
-        this.items = new Array();
-        this.selectedValueChange = new EventEmitter();
+    async editComment(comment) {
+        const result = await this.noteService.editNote(comment);
+        const index = this.models.findIndex((x) => x.id === comment.id);
+        if (index !== -1) {
+            this.models[index] = result.item;
+        }
     }
-    /**
-     * Called when an item has been selected
-     */
-    numChanged() {
-        this.selectedValueChange.emit(this.selectedValue);
+    async addComment(comment) {
+        comment.related_model_id = this.relatedModelId;
+        comment.model_type = this.modelType;
+        const result = await this.noteService.addNote(comment);
+        this.models.push(result.item);
     }
-    ngOnInit() {
-        for (var i = this.start_value; i < this.end_value + 1; i++) {
-            this.items.push(i);
+    saveNote() {
+        if (!this.note) {
+            this.alertService.addAlert('Please enter the note', 'error');
+            return;
         }
+        const data = {
+            note: this.note,
+            model_type: this.modelType,
+            related_model_id: this.relatedModelId,
+            with: 'creator',
+        };
+        this.isSaving = true;
+        this.noteService.addNote(data).then((response) => {
+            this.modelCreated(response?.item);
+            this.alertService.addAlert('The note saved successfully.', 'success');
+            this.note = '';
+            this.isSaving = false;
+            this.total += 1;
+        }).catch(() => (this.isSaving = false));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NumberSelector, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: NumberSelector, selector: "number-selector", inputs: { start_value: "start_value", end_value: "end_value", selectedValue: "selectedValue" }, outputs: { selectedValueChange: "selectedValueChange" }, ngImport: i0, template: "<div class=\"number-selector-wrapper\">\n    <select name=\"selectedValue\" [(ngModel)]=\"selectedValue\" class=\"form-control\" (change)=\"numChanged()\">\n        <option value=\"\">-- Student Status --</option>\n        <option *ngFor=\"let start_value of items;\" value=\"{{start_value}}\">{{start_value}}</option>\n    </select>\n</div>", dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NoteListComponent, deps: [{ token: NoteService }, { token: i1.MatDialog }, { token: AlertService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.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: "<div fxLayout=\"column\" fxLayoutGap=\"1.5rem\" *ngIf=\"!commentsView\">\n\n  <ng-container *ngIf=\"viewMode === 'list'\">\n    <div class=\"d-flex align-items-center\">\n      <h5 class=\"m-0\">{{ labelText }}s</h5>\n      <app-techlify-icon name=\"add\" class=\"clickable d-print-none ml-1\" matTooltip=\"Add\"\n        (click)=\"addNote()\"></app-techlify-icon>\n    </div>\n\n    <div class=\"w-100 scroll-container\" infiniteScroll [infiniteScrollDistance]=\"1\" [infiniteScrollThrottle]=\"50\"\n      (scrolled)=\"onScroll()\" [scrollWindow]=\"false\">\n      <table mat-table [dataSource]=\"models\" class=\"w-100\" multiTemplateDataRows>\n\n        <!-- Index Column -->\n        <ng-container matColumnDef=\"index\">\n          <th mat-header-cell *matHeaderCellDef> #</th>\n          <td mat-cell *matCellDef=\"let note; let i = dataIndex\"> {{ i + 1 }}</td>\n        </ng-container>\n\n\n        <ng-container matColumnDef=\"note\">\n          <th mat-header-cell *matHeaderCellDef> {{ labelText }}</th>\n          <td mat-cell *matCellDef=\"let note\">\n            {{ note?.note }}\n          </td>\n        </ng-container>\n\n        <ng-container matColumnDef=\"actions\">\n          <th mat-header-cell *matHeaderCellDef class=\"d-print-none\"> Actions</th>\n          <td mat-cell *matCellDef=\"let note\" class=\"d-print-none text-secondary\">\n            <div fxLayoutAlign=\"start center\">\n              <app-techlify-icon name=\"edit\" class=\"clickable\" matTooltip=\"Update\"\n                (click)=\"editNote(note)\"></app-techlify-icon>\n              <app-techlify-icon name=\"delete\" class=\"clickable ml-1\" matTooltip=\"Delete\"\n                (click)=\"deleteNote(note)\"></app-techlify-icon>\n            </div>\n          </td>\n        </ng-container>\n        <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n        <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n      </table>\n      <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isWorking\"></mat-progress-bar>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"viewMode === 'timeline'\">\n    <mat-card>\n      <mat-card-content class=\"d-flex justify-content-start align-items-center gap-2\">\n        <h5 class=\"mb-0\">Notes</h5>\n        <span class=\"badge badge-info ml-1\" *ngIf=\"total\">{{ total }}</span>\n      </mat-card-content>\n      <mat-card-content class=\"mt-2\">\n        <form (ngSubmit)=\"saveNote()\">\n          <mat-form-field class=\"w-100\" appearance=\"outline\">\n            <input [(ngModel)]=\"note\" [ngModelOptions]=\"{standalone: true}\" type=\"text\" matInput\n              placeholder=\"Write your notes here...\" [disabled]=\"isSaving\">\n            <mat-icon *ngIf=\"!isSaving\" matSuffix class=\"cursor-pointer\" (click)=\"saveNote()\">send</mat-icon>\n            <mat-progress-spinner matSuffix mode=\"indeterminate\" diameter=\"20\" *ngIf=\"isSaving\"></mat-progress-spinner>\n          </mat-form-field>\n        </form>\n      </mat-card-content>\n      <mat-card-content>\n        <div *ngFor=\"let note of models;last as isLast\">\n          <div class=\"d-flex justify-content-between align-items-center gap-2\">\n            <div class=\"d-flex flex-column\">\n              <p class=\"mb-0\">{{ note?.creator?.name }}</p>\n              <small class=\"text-secondary\">On {{ note?.created_at | date: 'medium' }}</small>\n            </div>\n            <div class=\"d-flex justify-content-end align-items-center gap-1\">\n              <app-techlify-icon name=\"edit\" class=\"clickable\" matTooltip=\"Update\"\n                (click)=\"editNote(note)\"></app-techlify-icon>\n              <app-techlify-icon name=\"delete\" class=\"clickable\" matTooltip=\"Delete\"\n                (click)=\"deleteNote(note)\"></app-techlify-icon>\n            </div>\n          </div>\n          <div>{{ note?.note }}</div>\n          <mat-divider class=\"my-2\" *ngIf=\"!isLast\"></mat-divider>\n        </div>\n        <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isWorking\"></mat-progress-bar>\n      </mat-card-content>\n    </mat-card>\n  </ng-container>\n\n</div>\n\n<div fxLayout=\"column\" fxLayoutGap=\"1.5rem\" *ngIf=\"commentsView\">\n  <div fxLayout fxLayoutAlign=\"center center\" fxLayoutGap=\"1rem\">\n    <h5 class=\"m-0\">{{ labelText }}s</h5>\n  </div>\n\n  <div fxLayout=\"column\" fxLayoutAlign=\"start\" fxFlex=\"100%\">\n    <div class=\"w-100 scroll-container jumbotron\" infiniteScroll [infiniteScrollDistance]=\"1\"\n      [infiniteScrollThrottle]=\"50\" (scrolled)=\"onScroll()\" [scrollWindow]=\"false\">\n      <app-comment-form [commentData]=\"comment\" (action)=\"commentAction($event)\" *ngFor=\"let comment of models\">\n      </app-comment-form>\n      <app-comment-form (action)=\"commentAction($event)\"></app-comment-form>\n    </div>\n  </div>\n</div>", styles: [".scroll-container{max-height:400px;overflow-y:auto}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i6$2.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "directive", type: 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: i8$4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8$4.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$3.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i12.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i12.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i12.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i12.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i12.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i12.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i12.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i12.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i12.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i12.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$3.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"] }, { kind: "component", type: i11$2.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$5.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: TechlifyIconComponent, selector: "app-techlify-icon", inputs: ["name", "size"] }, { kind: "component", type: CommentFormComponent, selector: "app-comment-form", inputs: ["commentData"], outputs: ["action"] }, { kind: "pipe", type: i3.DatePipe, name: "date" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NumberSelector, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NoteListComponent, decorators: [{
             type: Component,
-            args: [{ selector: "number-selector", template: "<div class=\"number-selector-wrapper\">\n    <select name=\"selectedValue\" [(ngModel)]=\"selectedValue\" class=\"form-control\" (change)=\"numChanged()\">\n        <option value=\"\">-- Student Status --</option>\n        <option *ngFor=\"let start_value of items;\" value=\"{{start_value}}\">{{start_value}}</option>\n    </select>\n</div>" }]
-        }], ctorParameters: () => [], propDecorators: { start_value: [{
+            args: [{ selector: 'app-note-list', template: "<div fxLayout=\"column\" fxLayoutGap=\"1.5rem\" *ngIf=\"!commentsView\">\n\n  <ng-container *ngIf=\"viewMode === 'list'\">\n    <div class=\"d-flex align-items-center\">\n      <h5 class=\"m-0\">{{ labelText }}s</h5>\n      <app-techlify-icon name=\"add\" class=\"clickable d-print-none ml-1\" matTooltip=\"Add\"\n        (click)=\"addNote()\"></app-techlify-icon>\n    </div>\n\n    <div class=\"w-100 scroll-container\" infiniteScroll [infiniteScrollDistance]=\"1\" [infiniteScrollThrottle]=\"50\"\n      (scrolled)=\"onScroll()\" [scrollWindow]=\"false\">\n      <table mat-table [dataSource]=\"models\" class=\"w-100\" multiTemplateDataRows>\n\n        <!-- Index Column -->\n        <ng-container matColumnDef=\"index\">\n          <th mat-header-cell *matHeaderCellDef> #</th>\n          <td mat-cell *matCellDef=\"let note; let i = dataIndex\"> {{ i + 1 }}</td>\n        </ng-container>\n\n\n        <ng-container matColumnDef=\"note\">\n          <th mat-header-cell *matHeaderCellDef> {{ labelText }}</th>\n          <td mat-cell *matCellDef=\"let note\">\n            {{ note?.note }}\n          </td>\n        </ng-container>\n\n        <ng-container matColumnDef=\"actions\">\n          <th mat-header-cell *matHeaderCellDef class=\"d-print-none\"> Actions</th>\n          <td mat-cell *matCellDef=\"let note\" class=\"d-print-none text-secondary\">\n            <div fxLayoutAlign=\"start center\">\n              <app-techlify-icon name=\"edit\" class=\"clickable\" matTooltip=\"Update\"\n                (click)=\"editNote(note)\"></app-techlify-icon>\n              <app-techlify-icon name=\"delete\" class=\"clickable ml-1\" matTooltip=\"Delete\"\n                (click)=\"deleteNote(note)\"></app-techlify-icon>\n            </div>\n          </td>\n        </ng-container>\n        <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n        <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n      </table>\n      <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isWorking\"></mat-progress-bar>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"viewMode === 'timeline'\">\n    <mat-card>\n      <mat-card-content class=\"d-flex justify-content-start align-items-center gap-2\">\n        <h5 class=\"mb-0\">Notes</h5>\n        <span class=\"badge badge-info ml-1\" *ngIf=\"total\">{{ total }}</span>\n      </mat-card-content>\n      <mat-card-content class=\"mt-2\">\n        <form (ngSubmit)=\"saveNote()\">\n          <mat-form-field class=\"w-100\" appearance=\"outline\">\n            <input [(ngModel)]=\"note\" [ngModelOptions]=\"{standalone: true}\" type=\"text\" matInput\n              placeholder=\"Write your notes here...\" [disabled]=\"isSaving\">\n            <mat-icon *ngIf=\"!isSaving\" matSuffix class=\"cursor-pointer\" (click)=\"saveNote()\">send</mat-icon>\n            <mat-progress-spinner matSuffix mode=\"indeterminate\" diameter=\"20\" *ngIf=\"isSaving\"></mat-progress-spinner>\n          </mat-form-field>\n        </form>\n      </mat-card-content>\n      <mat-card-content>\n        <div *ngFor=\"let note of models;last as isLast\">\n          <div class=\"d-flex justify-content-between align-items-center gap-2\">\n            <div class=\"d-flex flex-column\">\n              <p class=\"mb-0\">{{ note?.creator?.name }}</p>\n              <small class=\"text-secondary\">On {{ note?.created_at | date: 'medium' }}</small>\n            </div>\n            <div class=\"d-flex justify-content-end align-items-center gap-1\">\n              <app-techlify-icon name=\"edit\" class=\"clickable\" matTooltip=\"Update\"\n                (click)=\"editNote(note)\"></app-techlify-icon>\n              <app-techlify-icon name=\"delete\" class=\"clickable\" matTooltip=\"Delete\"\n                (click)=\"deleteNote(note)\"></app-techlify-icon>\n            </div>\n          </div>\n          <div>{{ note?.note }}</div>\n          <mat-divider class=\"my-2\" *ngIf=\"!isLast\"></mat-divider>\n        </div>\n        <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isWorking\"></mat-progress-bar>\n      </mat-card-content>\n    </mat-card>\n  </ng-container>\n\n</div>\n\n<div fxLayout=\"column\" fxLayoutGap=\"1.5rem\" *ngIf=\"commentsView\">\n  <div fxLayout fxLayoutAlign=\"center center\" fxLayoutGap=\"1rem\">\n    <h5 class=\"m-0\">{{ labelText }}s</h5>\n  </div>\n\n  <div fxLayout=\"column\" fxLayoutAlign=\"start\" fxFlex=\"100%\">\n    <div class=\"w-100 scroll-container jumbotron\" infiniteScroll [infiniteScrollDistance]=\"1\"\n      [infiniteScrollThrottle]=\"50\" (scrolled)=\"onScroll()\" [scrollWindow]=\"false\">\n      <app-comment-form [commentData]=\"comment\" (action)=\"commentAction($event)\" *ngFor=\"let comment of models\">\n      </app-comment-form>\n      <app-comment-form (action)=\"commentAction($event)\"></app-comment-form>\n    </div>\n  </div>\n</div>", styles: [".scroll-container{max-height:400px;overflow-y:auto}\n"] }]
+        }], ctorParameters: () => [{ type: NoteService }, { type: i1.MatDialog }, { type: AlertService }], propDecorators: { relatedModelId: [{
                 type: Input
-            }], end_value: [{
+            }], modelType: [{
                 type: Input
-            }], selectedValueChange: [{
-                type: Output
-            }], selectedValue: [{
+            }], readonly: [{
+                type: Input
+            }], labelText: [{
+                type: Input
+            }], commentsView: [{
+                type: Input
+            }], viewMode: [{
                 type: Input
             }] } });
 
-class Timeline {
-    static { this.CUSTOM = 1; }
-    static { this.TODAY = 2; }
-    static { this.YESTERDAY = 3; }
-    static { this.THIS_WEEK = 4; }
-    static { this.LAST_WEEK = 5; }
-    static { this.THIS_MONTH = 6; }
-    static { this.LAST_MONTH = 7; }
-    static { this.THIS_QUARTER = 8; }
-    static { this.LAST_QUARTER = 9; }
-    static { this.THIS_YEAR = 10; }
-    static { this.LAST_YEAR = 11; }
-    static { this.ALL = 12; }
-    static { this.TOMMOROW = 13; }
-    static { this.NEXT_WEEK = 14; }
-    static { this.NEXT_MONTH = 15; }
-}
-
-function calculateTimeline(value, dateFrom, dateTo) {
-    const date = new Date();
-    const data = {
-        date_from: date,
-        date_to: date,
-        show_custom_field: false
-    };
-    switch (value) {
-        case Timeline.CUSTOM: { // Custom
-            data.show_custom_field = true;
-            data.date_from = dateFrom ? moment(dateFrom).toISOString() : '';
-            data.date_to = dateTo ? moment(dateTo).toISOString() : '';
-            break;
-        }
-        case Timeline.TODAY: { // Today
-            const now = moment();
-            data.date_from = now.startOf('day').toISOString();
-            data.date_to = now.endOf('day').toISOString();
-            break;
-        }
-        case Timeline.YESTERDAY: { // Yesterday
-            const now = moment().subtract(1, 'day');
-            data.date_from = now.startOf('day').toISOString();
-            data.date_to = now.endOf('day').toISOString();
-            break;
-        }
-        case Timeline.THIS_WEEK: { // This Week
-            const now = moment();
-            data.date_from = now.startOf('isoWeek').toISOString();
-            data.date_to = now.endOf('isoWeek').toISOString();
-            break;
-        }
-        case Timeline.LAST_WEEK: { // Last Week
-            const now = moment().subtract(1, 'week');
-            data.date_from = now.startOf('isoWeek').toISOString();
-            data.date_to = now.endOf('isoWeek').toISOString();
-            break;
-        }
-        case Timeline.THIS_MONTH: { // This Month
-            const now = moment();
-            data.date_from = now.startOf('month').toISOString();
-            data.date_to = now.endOf('month').toISOString();
-            break;
-        }
-        case Timeline.LAST_MONTH: { // Last Month
-            const now = moment().subtract(1, 'month');
-            data.date_from = now.startOf('month').toISOString();
-            data.date_to = now.endOf('month').toISOString();
-            break;
-        }
-        case Timeline.THIS_QUARTER: { // This Quarter
-            const now = moment();
-            data.date_from = now.startOf('quarter').toISOString();
-            data.date_to = now.endOf('quarter').toISOString();
-            break;
-        }
-        case Timeline.LAST_QUARTER: { // Last Quarter
-            const now = moment().subtract(1, 'quarter');
-            data.date_from = now.startOf('quarter').toISOString();
-            data.date_to = now.endOf('quarter').toISOString();
-            break;
-        }
-        case Timeline.THIS_YEAR: { // This Year
-            const now = moment();
-            data.date_from = now.startOf('year').toISOString();
-            data.date_to = now.endOf('year').toISOString();
-            break;
-        }
-        case Timeline.LAST_YEAR: { // Last Year
-            const now = moment().subtract(1, 'year');
-            data.date_from = now.startOf('year').toISOString();
-            data.date_to = now.endOf('year').toISOString();
-            break;
-        }
-        case Timeline.TOMMOROW: {
-            const now = moment().add(1, 'day');
-            data.date_from = now.startOf('day').toISOString();
-            data.date_to = now.endOf('day').toISOString();
-            break;
-        }
-        case Timeline.NEXT_WEEK: {
-            const now = moment().add(1, 'week');
-            data.date_from = now.startOf('isoWeek').toISOString();
-            data.date_to = now.endOf('isoWeek').toISOString();
-            break;
-        }
-        case Timeline.NEXT_MONTH: {
-            const now = moment().add(1, 'month');
-            data.date_from = now.startOf('month').toISOString();
-            data.date_to = now.endOf('month').toISOString();
-            break;
-        }
-        default: { // All
-            data.date_from = '';
-            data.date_to = '';
-            break;
-        }
-    }
-    return data;
-}
-
-var TimelineFilterComponent_1;
-let TimelineFilterComponent = class TimelineFilterComponent {
-    static { TimelineFilterComponent_1 = this; }
-    set defaultValue(value) {
-        this.value = value;
-    }
+class SearchableSelectorComponent {
+    static { this.nextId = 0; }
     get empty() {
         const { value: { select_value } } = this.selectorForm;
         return !select_value;
@@ -4724,227 +4468,491 @@ let TimelineFilterComponent = class TimelineFilterComponent {
     get shouldLabelFloat() { return this.focused || !this.empty; }
     get required() { return this._required; }
     set required(value) {
-        this.selectorForm?.get('select_value')?.setValidators(Validators.required);
+        this.selectorForm.get('select_value').setValidators(Validators.required);
         this._required = coerceBooleanProperty(value);
         this.stateChanges.next();
     }
     get disabled() { return this._disabled; }
     set disabled(value) {
         this._disabled = coerceBooleanProperty(value);
-        this._disabled ? this.selectorForm.disable() : this.selectorForm.enable();
+        this._disabled
+            ? this.selectorForm.disable({ emitEvent: false })
+            : this.selectorForm.enable({ emitEvent: false });
         this.stateChanges.next();
     }
     get value() {
-        if (this.selectorForm.valid) {
-            return this.selectorForm.value.select_value;
-        }
-        return '';
+        return this.selectorForm.get('select_value')?.value || '';
     }
     set value(data) {
-        this.selectorForm.patchValue({ select_value: parseInt(data) || '' }, { emitEvent: false });
+        this.selectorForm.patchValue({ select_value: data || '' });
         this.stateChanges.next();
-        //If the selection is custom, validate if date is selected
-        if (this.value == Timeline.CUSTOM) {
-            if (this.isInitialised) {
-                //If initialised already, open the calendar
-                this.openCalendar();
-            }
-            else {
-                //Apply default ranges from form if exist
-                this.applyRange((this.getFieldValue(this.dateFrom) ?? null), (this.getFieldValue(this.dateTo) ?? null));
-            }
-        }
-        else {
-            this.changeTimeline(parseInt(data) || '');
-        }
-        this.isInitialised = true;
     }
-    static { this.nextId = 0; }
-    get timelineValue() {
-        return this.selectorForm.get('select_value');
-    }
-    get isCustomSelected() {
-        return this.value == Timeline.CUSTOM;
-    }
-    get customDateFrom() {
-        return this.selectorForm.get('custom_date_from');
-    }
-    get customDateTo() {
-        return this.selectorForm.get('custom_date_to');
-    }
-    constructor(formBuilder, ngControl, datePipe) {
+    constructor(formBuilder, _focusMonitor, http, _elementRef, dialog, ngControl) {
+        this._focusMonitor = _focusMonitor;
+        this.http = http;
+        this._elementRef = _elementRef;
+        this.dialog = dialog;
         this.ngControl = ngControl;
-        this.datePipe = datePipe;
-        this.isInitialised = false;
-        this.timelines = [
-            { value: Timeline.CUSTOM, viewValue: 'Custom' },
-            { value: Timeline.TODAY, viewValue: 'Today' },
-            { value: Timeline.YESTERDAY, viewValue: 'Yesterday' },
-            { value: Timeline.TOMMOROW, viewValue: 'Tomorrow' },
-            { value: Timeline.THIS_WEEK, viewValue: 'This Week' },
-            { value: Timeline.LAST_WEEK, viewValue: 'Last Week' },
-            { value: Timeline.NEXT_WEEK, viewValue: 'Next Week' },
-            { value: Timeline.THIS_MONTH, viewValue: 'This Month' },
-            { value: Timeline.LAST_MONTH, viewValue: 'Last Month' },
-            { value: Timeline.NEXT_MONTH, viewValue: 'Next Month' },
-            { value: Timeline.THIS_QUARTER, viewValue: 'This Quarter' },
-            { value: Timeline.LAST_QUARTER, viewValue: 'Last Quarter' },
-            { value: Timeline.THIS_YEAR, viewValue: 'This Year' },
-            { value: Timeline.LAST_YEAR, viewValue: 'Last Year' },
-            { value: Timeline.ALL, viewValue: 'All dates' },
-        ];
-        this.dateFrom = 'date_from';
-        this.dateTo = 'date_to';
-        this.appearance = 'fill';
-        this.showClearButton = false;
-        this.labelText = 'Select Timeline';
+        this.valueField = 'id';
+        this.titleField = 'title';
+        this.multiple = false;
+        this.selectedValueChange = new EventEmitter();
+        this.enableSearch = true;
+        this.add = false;
+        this.edit = false;
+        this.sort = true;
+        this.items = [];
+        this.apiDataProperty = 'data';
+        this.cache = false;
+        this.perPage = 50;
+        this.inDataSearch = false;
+        this.panelWidth = '';
         this.selectionChange = new EventEmitter();
+        this.itemsChange = new EventEmitter();
+        this.focusSearchOnOpen = false;
+        this.isItemsEmpty = new EventEmitter();
+        /**
+         * If this is set to true, if there is a pre-selected entity,
+         * the entity that is populated will be emitted when it is set
+         */
+        this.isEmitInitialEvent = false;
+        this.isLoading = false;
+        this.onChange = () => { };
+        this.onTouched = () => { };
         this.stateChanges = new Subject();
-        this.controlType = 'timeline-filter';
-        this.id = `timeline-filter-${TimelineFilterComponent_1.nextId++}`;
-        this.describedBy = '';
         this.focused = false;
+        this.controlType = 'searchable-selctor';
+        this.id = `searchable-selctor-${SearchableSelectorComponent.nextId++}`;
+        this.describedBy = '';
+        this.cachedItems = [];
+        this.subscriptions = new Subscription();
         this._required = false;
         this._disabled = false;
-        this.onChange = () => { };
-        this.onTouched = () => { };
-        //Custom range
-        this.selectedRangeLabel = '';
         this.selectorForm = formBuilder.group({
-            select_value: [''],
-            custom_date_from: [''],
-            custom_date_to: [''],
+            select_value: [null],
+            search: ''
         });
+        this.subscriptions.add(_focusMonitor.monitor(_elementRef, true).subscribe(origin => {
+            if (this.focused && !origin) {
+                this.onTouched();
+            }
+            this.focused = !!origin;
+            this.stateChanges.next();
+        }));
         if (this.ngControl != null) {
             this.ngControl.valueAccessor = this;
         }
     }
-    ngOnInit() {
-        this.timelineValue.valueChanges.
-            pipe(debounceTime(100), distinctUntilChanged(), untilDestroyed(this)).subscribe(value => this.value = value);
-        //Listen only to custom date to, since it is range selector it always safe to listen date to
-        this.customDateTo.valueChanges.pipe(distinctUntilChanged(), untilDestroyed(this)).subscribe(val => {
-            if (val && !this.isCustomDatePatching) {
-                this.applyRange();
+    openedChange(opened) {
+        if (this.dataItems.length === 0 && this.selectorForm.get('search').value) {
+            this.selectorForm.get('search').setValue('');
+        }
+        if (opened && this.enableSearch && this.focusSearchOnOpen) {
+            // Focus the search input field
+            setTimeout(() => this.searchInput.nativeElement.focus(), 0);
+        }
+    }
+    get dataItems() {
+        let items = [];
+        if (this.multiple && this.selectedValue && (this.selectedValue.length > 0))
+            items = [...this.selectedValue, ...this.items];
+        else if ((!this.multiple) && this.selectedValue)
+            items = [this.selectedValue, ...this.items];
+        else
+            items = this.items;
+        items = items.filter((v, i, a) => a.findIndex(v => v[this.valueField] === a[i][this.valueField]) === i);
+        //Emit the items to any child component
+        this.itemsChange.emit(items);
+        return items;
+    }
+    ngOnInit() {
+        this.subscriptions.add(this.selectorForm.get('search').valueChanges
+            .pipe(debounceTime(500), distinctUntilChanged()).subscribe(value => {
+            if (this.enableSearch)
+                this.search(value);
+        }));
+        this.filters = {
+            perPage: this.perPage,
+            search: '',
+            page: 1,
+            lastPage: 1
+        };
+        if (this.sort) {
+            this.filters.sort_by = this.sortBy || `${this.titleField}|asc`;
+        }
+        //Fetch Items only if it is not present, can be used in places where we load many entries.
+        if (this.items.length === 0) {
+            this.fetchItemList();
+        }
+    }
+    fetchItemList() {
+        this.isLoading = true;
+        let request = this.http.get(this.apiUrl, { params: this.filters });
+        if (this.cache) {
+            request = this.http.cache().get(this.apiUrl, { params: this.filters });
+        }
+        this.subscriptions.add(of().pipe(startWith(true), switchMap((_) => from(request)), finalize$1(() => this.isLoading = false)).subscribe((result) => {
+            this.items = this.items.concat(result[this.apiDataProperty]);
+            if (this.items.length == 0 && (!this.filters?.search)) {
+                //If there is no items and search is empty, then we emit items empty event.
+                this.isItemsEmpty.emit(true);
+            }
+            if (this.cache) {
+                this.cachedItems = this.items;
+            }
+            this.filters.page = result?.current_page || 1;
+            this.filters.lastPage = result?.last_page || 1;
+            /**
+             * If we are required to emit the selected entity when it is initially set,
+             * let's go ahead and emit it.
+             **/
+            if (this.isEmitInitialEvent && this.value) {
+                this._handleInput();
+                //Once the initial event is emitted, reset back to avoid continuous events
+                this.isEmitInitialEvent = false;
+            }
+        }));
+    }
+    setDescribedByIds(ids) {
+        this.describedBy = ids.join(' ');
+    }
+    onContainerClick(event) {
+        event.stopPropagation();
+    }
+    writeValue(data) {
+        this.value = data;
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    getPropertyValue(ele, keyString) {
+        keyString = keyString.replace(/\[(\w+)\]/g, ".$1"); // convert indexes to properties
+        keyString = keyString.replace(/^\./, ""); // strip a leading dot
+        const keyList = keyString.split(".");
+        for (let i = 0, n = keyList.length; i < n; ++i) {
+            const key = keyList[i];
+            if (ele && key in ele) {
+                ele = ele[key];
+            }
+            else {
+                return;
+            }
+        }
+        return ele;
+    }
+    _handleInput() {
+        //Trigger on change only when initial event is false, to avoid double loading
+        if (!this.isEmitInitialEvent) {
+            this.onChange(this.value);
+        }
+        if (this.multiple)
+            this.selectedValue = (this.value || []).map(x => this.dataItems.find(y => y[this.valueField] === x));
+        else
+            this.selectedValue = this.dataItems.find(x => x[this.valueField] === this.value);
+        this.selectedValueChange.emit(this.selectedValue);
+        this.selectionChange.emit(this.value);
+    }
+    get errorState() {
+        return (this.ngControl && this.ngControl.invalid && (this.ngControl.touched || this.ngControl.dirty));
+    }
+    onScroll() {
+        if (!this.isLoading && this.filters.lastPage > this.filters.page) {
+            this.filters.page += 1;
+            this.fetchItemList();
+        }
+    }
+    reloadData() {
+        this.items = [];
+        this.filters.page = 1;
+        this.filters.lastPage = 1;
+        this.fetchItemList();
+    }
+    search(event) {
+        if (this.searchField) {
+            this.filters[this.searchField] = event;
+        }
+        else {
+            this.filters.search = event;
+        }
+        // we need search field to search in data
+        if (this.inDataSearch && this.searchField) {
+            this.filterItems(event);
+        }
+        else {
+            this.reloadData();
+        }
+    }
+    filterItems(event) {
+        if (event) {
+            this.items = this.cachedItems.filter((value) => {
+                return value[this.searchField].toLowerCase().search(event.toLowerCase()) != -1;
+            });
+        }
+        else {
+            this.items = this.cachedItems;
+        }
+    }
+    addItem(event) {
+        const dialogRef = this.dialog.open(this.itemComponent, {
+            width: '400px',
+            autoFocus: false,
+            data: {},
+            ...this.addConfig
+        });
+        dialogRef.afterClosed().subscribe((model) => {
+            if (model) {
+                this.items.push(model);
+                this.selectorForm.get('select_value').setValue(model[this.valueField]);
+                this._handleInput();
             }
         });
+        event.stopPropagation();
     }
-    resetFieldValue(field) {
-        this.form?.get(field)?.setValue('');
-    }
-    getFieldValue(field) {
-        return this.form?.get(field)?.value;
-    }
-    setFieldValue(field, value, emitEvent = true) {
-        this.form?.get(field)?.setValue(value, { emitEvent: emitEvent });
+    editItem(event) {
+        const dialogRef = this.dialog.open(this.itemComponent, {
+            width: '400px',
+            autoFocus: false,
+            data: {
+                item: this.selectedValue
+            },
+            ...this.editConfig
+        });
+        dialogRef.afterClosed().subscribe((result) => {
+            if (result) {
+                this.items = this.items.filter(x => x[this.valueField] !== this.selectedValue[this.valueField]);
+                this.items.push(result.item);
+                this.selectedValue = null;
+                this.selectorForm.get('select_value').setValue(result.item[this.valueField]);
+                this._handleInput();
+            }
+        });
+        event.stopPropagation();
     }
-    changeTimeline(value) {
-        value = parseInt(value);
-        this.selectedRangeLabel = '';
-        const timeline = calculateTimeline(value, this.dateFrom, this.dateTo);
-        if (timeline) {
-            this.setCustomDates('', '');
-            this.setFieldValue(this.dateFrom, this.datePipe.transform(timeline.date_from, 'yyyy-MM-dd'));
-            this.setFieldValue(this.dateTo, this.datePipe.transform(timeline.date_to, 'yyyy-MM-dd'));
-        }
-        this.onChange(this.value);
-        this.selectionChange.emit(timeline);
+    ngOnDestroy() {
+        this.stateChanges.complete();
+        this._focusMonitor.stopMonitoring(this._elementRef);
+        this.subscriptions.unsubscribe();
     }
-    openCalendar() {
-        this.picker.open();
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SearchableSelectorComponent, deps: [{ token: i1$5.UntypedFormBuilder }, { token: i1$4.FocusMonitor }, { token: HttpService }, { token: i0.ElementRef }, { token: i1.MatDialog }, { token: i1$5.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: SearchableSelectorComponent, selector: "app-searchable-selector", inputs: { valueField: "valueField", titleField: "titleField", subtitleField: "subtitleField", apiUrl: "apiUrl", multiple: "multiple", selectedValue: "selectedValue", enableSearch: "enableSearch", add: "add", addConfig: "addConfig", edit: "edit", editConfig: "editConfig", sort: "sort", sortBy: "sortBy", searchField: "searchField", itemComponent: "itemComponent", items: "items", apiDataProperty: "apiDataProperty", cache: "cache", perPage: "perPage", inDataSearch: "inDataSearch", panelWidth: "panelWidth", focusSearchOnOpen: "focusSearchOnOpen", isEmitInitialEvent: "isEmitInitialEvent", required: "required", disabled: "disabled", value: "value" }, outputs: { selectedValueChange: "selectedValueChange", selectionChange: "selectionChange", itemsChange: "itemsChange", isItemsEmpty: "isItemsEmpty" }, providers: [
+            {
+                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: i1$5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i8$4.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.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$2.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,
+            args: [{ selector: 'app-searchable-selector', providers: [
+                        {
+                            provide: MatFormFieldControl,
+                            useExisting: SearchableSelectorComponent
+                        }
+                    ], 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"] }]
+        }], ctorParameters: () => [{ type: i1$5.UntypedFormBuilder }, { type: i1$4.FocusMonitor }, { type: HttpService }, { type: i0.ElementRef }, { type: i1.MatDialog }, { type: i1$5.NgControl, decorators: [{
+                    type: Optional
+                }, {
+                    type: Self
+                }] }], propDecorators: { searchInput: [{
+                type: ViewChild,
+                args: ['searchInput']
+            }], valueField: [{
+                type: Input
+            }], titleField: [{
+                type: Input
+            }], subtitleField: [{
+                type: Input
+            }], apiUrl: [{
+                type: Input
+            }], multiple: [{
+                type: Input
+            }], selectedValue: [{
+                type: Input
+            }], selectedValueChange: [{
+                type: Output
+            }], enableSearch: [{
+                type: Input
+            }], add: [{
+                type: Input
+            }], addConfig: [{
+                type: Input
+            }], edit: [{
+                type: Input
+            }], editConfig: [{
+                type: Input
+            }], sort: [{
+                type: Input
+            }], sortBy: [{
+                type: Input
+            }], searchField: [{
+                type: Input
+            }], itemComponent: [{
+                type: Input
+            }], items: [{
+                type: Input
+            }], apiDataProperty: [{
+                type: Input
+            }], cache: [{
+                type: Input
+            }], perPage: [{
+                type: Input
+            }], inDataSearch: [{
+                type: Input
+            }], panelWidth: [{
+                type: Input
+            }], selectionChange: [{
+                type: Output
+            }], itemsChange: [{
+                type: Output
+            }], focusSearchOnOpen: [{
+                type: Input
+            }], isItemsEmpty: [{
+                type: Output
+            }], isEmitInitialEvent: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }] } });
+
+/**
+ * Component to generate a num items selector
+ *
+ * @author Floyd Kissoon
+ * @since 20170817
+ */
+class NumItemsSelector {
+    constructor() {
+        this.numItemsChange = new EventEmitter();
     }
-    applyRange(defaultFrom, defaultTo) {
-        const from = defaultFrom ?? this.selectorForm.get('custom_date_from')?.value;
-        const to = defaultTo ?? this.selectorForm.get('custom_date_to')?.value;
-        if (from && to) {
-            this.selectedRangeLabel = `<b>${this.datePipe.transform(from, 'yyyy-MM-dd')}</b>:<b>${this.datePipe.transform(to, 'yyyy-MM-dd')}</b`;
-            this.setFieldValue(this.dateFrom, this.datePipe.transform(from, 'yyyy-MM-dd'));
-            this.setFieldValue(this.dateTo, this.datePipe.transform(to, 'yyyy-MM-dd'));
-            this.onChange(this.value);
-            this.selectionChange.emit(this.value);
-            this.setCustomDates(from, to);
-        }
+    /**
+     * Called when an item has been selected
+     */
+    numItemsChanged() {
+        this.numItemsChange.emit(this.numItems);
     }
-    setCustomDates(from, to) {
-        // update form fields silently
-        this.isCustomDatePatching = true;
-        this.selectorForm.get('custom_date_from')?.setValue(from, { emitEvent: false });
-        this.selectorForm.get('custom_date_to')?.setValue(to, { emitEvent: false });
-        this.isCustomDatePatching = false;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NumItemsSelector, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: NumItemsSelector, selector: "num-items-selector", inputs: { numItems: "numItems" }, outputs: { numItemsChange: "numItemsChange" }, ngImport: i0, template: "<select [(ngModel)]=\"numItems\" class=\"form-control\" id=\"numItems\" name=\"numItems\" (change)=\"numItemsChanged()\">\r\n    <option value=\"25\">25</option>\r\n    <option value=\"50\">50</option>\r\n    <option value=\"100\">100</option>\r\n    <option value=\"250\">250</option>\r\n    <option value=\"500\">500</option>\r\n    <option value=\"1000\">1000</option>\r\n    <option value=\"2000\">2000</option>\r\n    <option value=\"3000\">3000</option>\r\n    <option value=\"4000\">4000</option>\r\n    <option value=\"5000\">5000</option>\r\n    <option value=\"5000000000\">All</option>\r\n</select> ", dependencies: [{ kind: "directive", type: i1$5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NumItemsSelector, decorators: [{
+            type: Component,
+            args: [{ selector: "num-items-selector", template: "<select [(ngModel)]=\"numItems\" class=\"form-control\" id=\"numItems\" name=\"numItems\" (change)=\"numItemsChanged()\">\r\n    <option value=\"25\">25</option>\r\n    <option value=\"50\">50</option>\r\n    <option value=\"100\">100</option>\r\n    <option value=\"250\">250</option>\r\n    <option value=\"500\">500</option>\r\n    <option value=\"1000\">1000</option>\r\n    <option value=\"2000\">2000</option>\r\n    <option value=\"3000\">3000</option>\r\n    <option value=\"4000\">4000</option>\r\n    <option value=\"5000\">5000</option>\r\n    <option value=\"5000000000\">All</option>\r\n</select> " }]
+        }], ctorParameters: () => [], propDecorators: { numItems: [{
+                type: Input
+            }], numItemsChange: [{
+                type: Output
+            }] } });
+
+/**
+ * Service that provides utility functions for dates
+ *
+ * @author Joshua Kissoon
+ * @since 20170726
+ */
+class DateUtils {
+    /**
+     * Takes in a date object and outputs the string value
+     */
+    getYYYYMMDDString(inputDate) {
+        var year = inputDate.getFullYear();
+        var month = (inputDate.getMonth() + 1) < 10 ? ("0" + (inputDate.getMonth() + 1)) : (inputDate.getMonth() + 1);
+        var date = inputDate.getDate() < 10 ? ("0" + inputDate.getDate()) : inputDate.getDate();
+        return year + "-" + month + "-" + date;
     }
-    setDescribedByIds(ids) {
-        this.describedBy = ids.join(' ');
+    /**
+     * Takes in a date object and outputs the year
+     */
+    getYYYY(inputDate) {
+        var year = inputDate.getFullYear();
+        return year;
     }
-    onContainerClick(event) {
-        event.stopPropagation();
+    /**
+     * Takes in a date object and outputs the Month
+     */
+    getMM(inputDate) {
+        var month = inputDate.getMonth() + 1;
+        return month;
     }
-    writeValue(data) {
-        this.value = data;
+    //         var n = this.rfidCardUseManualEntry.manual_date.toLocaleTimeString();
+    getDateTime(inputDate) {
+        var year = inputDate.getFullYear();
+        var month = (inputDate.getMonth() + 1) < 10 ? ("0" + (inputDate.getMonth() + 1)) : (inputDate.getMonth() + 1);
+        var date = inputDate.getDate() < 10 ? ("0" + inputDate.getDate()) : inputDate.getDate();
+        var time = inputDate.toLocaleTimeString();
+        return year + "-" + month + "-" + date + " " + time;
     }
-    registerOnChange(fn) {
-        this.onChange = fn;
+    getMonthName(month) {
+        const months = [
+            'January',
+            'February',
+            'March',
+            'April',
+            'May',
+            'June',
+            'July',
+            'August',
+            'September',
+            'October',
+            'November',
+            'December'
+        ];
+        return months[month - 1] ?? '';
     }
-    registerOnTouched(fn) {
-        this.onTouched = fn;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DateUtils, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DateUtils, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DateUtils, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+/**
+ * Component to generate a number selector
+ *
+ * @author Floyd Kissoon
+ * @since 20180628
+ */
+class NumberSelector {
+    constructor() {
+        this.items = new Array();
+        this.selectedValueChange = new EventEmitter();
     }
-    setDisabledState(isDisabled) {
-        this.disabled = isDisabled;
+    /**
+     * Called when an item has been selected
+     */
+    numChanged() {
+        this.selectedValueChange.emit(this.selectedValue);
     }
-    ngOnDestroy() {
-        this.stateChanges.complete();
+    ngOnInit() {
+        for (var i = this.start_value; i < this.end_value + 1; i++) {
+            this.items.push(i);
+        }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TimelineFilterComponent, deps: [{ token: i1$5.UntypedFormBuilder }, { token: i1$5.NgControl, optional: true, self: true }, { token: i3.DatePipe }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: TimelineFilterComponent, selector: "app-timeline-filter", inputs: { defaultValue: "defaultValue", required: "required", disabled: "disabled", value: "value", timelines: "timelines", dateFrom: "dateFrom", dateTo: "dateTo", appearance: "appearance", showClearButton: "showClearButton", form: "form", labelText: "labelText" }, outputs: { selectionChange: "selectionChange" }, providers: [
-            DatePipe,
-            {
-                provide: MatFormFieldControl,
-                useExisting: TimelineFilterComponent
-            }
-        ], viewQueries: [{ propertyName: "picker", first: true, predicate: ["picker"], descendants: true }], ngImport: i0, template: "<ng-container [formGroup]=\"selectorForm\">\n    <mat-form-field [appearance]=\"appearance\" class=\"fl-sm\">\n        <mat-label>{{labelText}}</mat-label>\n        <mat-select formControlName=\"select_value\">\n            <mat-option *ngFor=\"let timeline of timelines\" [value]=\"timeline.value\">\n                {{timeline.viewValue}}\n            </mat-option>\n        </mat-select>\n        <button *ngIf=\"showClearButton && timelineValue.value\" matSuffix mat-icon-button\n            (click)=\"timelineValue.setValue('')\">\n            <mat-icon>close</mat-icon>\n        </button>\n        <mat-hint *ngIf=\"isCustomSelected && selectedRangeLabel\" (click)=\"openCalendar()\" class=\"clickable\" fxLayout>\n            <span [innerHTML]=\"selectedRangeLabel\" style=\"font-size: 10px;\"></span>\n            <app-techlify-icon name=\"edit\" class=\"clickable\" size=\"xs\" style=\"margin-left:2px\"></app-techlify-icon>\n        </mat-hint>\n        <mat-hint *ngIf=\"isCustomSelected && !selectedRangeLabel\" (click)=\"openCalendar()\" class=\"clickable\" fxLayout>\n            <span style=\"font-size: 10px;\">Select Range</span>\n            <app-techlify-icon name=\"edit\" class=\"clickable\" size=\"xs\" style=\"margin-left:2px\"></app-techlify-icon>\n        </mat-hint>\n        <mat-date-range-input class=\"offscreen-range-input\" [rangePicker]=\"picker\">\n            <input matStartDate formControlName=\"custom_date_from\" placeholder=\"From date\" readonly />\n            <input matEndDate formControlName=\"custom_date_to\" placeholder=\"To date\" readonly />\n        </mat-date-range-input>\n        <mat-date-range-picker #picker></mat-date-range-picker>\n    </mat-form-field>\n</ng-container>", styles: [".icon-md{height:24px!important;width:24px!important;font-size:24px!important;margin:0 1px}.icon-sm{height:20px!important;width:20px!important;font-size:20px!important}.icon-xs{height:16px!important;width:16px!important;font-size:16px!important}.fl-md{width:200px!important}.fl-md .mat-mdc-form-field{width:100%!important}.fl-sm{width:150px!important}.fl-sm .mat-mdc-form-field{width:100%!important}.mat-btn-md{height:25px!important;padding:0 8px!important}.fs-12{font-size:12px!important}.fs-16{font-size:16px!important}.fs-13{font-size:13px!important}.fs-18{font-size:18px!important}.clickable:hover{cursor:pointer}.mat-mdc-form-field-hint-wrapper{padding:0 4px!important}.nil-subscript-wrapper .mat-mdc-form-field-subscript-wrapper{height:0!important}.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}.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: i1$5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i8$4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8$4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8$4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i8$4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i9$2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i5.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$1.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i11$1.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i11$1.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i11$1.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "component", type: TechlifyIconComponent, selector: "app-techlify-icon", inputs: ["name", "size"] }] }); }
-};
-TimelineFilterComponent = TimelineFilterComponent_1 = __decorate([
-    UntilDestroy()
-], TimelineFilterComponent);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TimelineFilterComponent, decorators: [{
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NumberSelector, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: NumberSelector, selector: "number-selector", inputs: { start_value: "start_value", end_value: "end_value", selectedValue: "selectedValue" }, outputs: { selectedValueChange: "selectedValueChange" }, ngImport: i0, template: "<div class=\"number-selector-wrapper\">\n    <select name=\"selectedValue\" [(ngModel)]=\"selectedValue\" class=\"form-control\" (change)=\"numChanged()\">\n        <option value=\"\">-- Student Status --</option>\n        <option *ngFor=\"let start_value of items;\" value=\"{{start_value}}\">{{start_value}}</option>\n    </select>\n</div>", dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NumberSelector, decorators: [{
             type: Component,
-            args: [{ selector: 'app-timeline-filter', providers: [
-                        DatePipe,
-                        {
-                            provide: MatFormFieldControl,
-                            useExisting: TimelineFilterComponent
-                        }
-                    ], 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}.offscreen-range-input{position:absolute;opacity:0;pointer-events:none;display:flex!important}\n"] }]
-        }], ctorParameters: () => [{ type: i1$5.UntypedFormBuilder }, { type: i1$5.NgControl, decorators: [{
-                    type: Optional
-                }, {
-                    type: Self
-                }] }, { type: i3.DatePipe }], propDecorators: { defaultValue: [{
-                type: Input
-            }], required: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], value: [{
-                type: Input
-            }], picker: [{
-                type: ViewChild,
-                args: ['picker']
-            }], timelines: [{
-                type: Input
-            }], dateFrom: [{
-                type: Input
-            }], dateTo: [{
-                type: Input
-            }], appearance: [{
-                type: Input
-            }], showClearButton: [{
-                type: Input
-            }], form: [{
+            args: [{ selector: "number-selector", template: "<div class=\"number-selector-wrapper\">\n    <select name=\"selectedValue\" [(ngModel)]=\"selectedValue\" class=\"form-control\" (change)=\"numChanged()\">\n        <option value=\"\">-- Student Status --</option>\n        <option *ngFor=\"let start_value of items;\" value=\"{{start_value}}\">{{start_value}}</option>\n    </select>\n</div>" }]
+        }], ctorParameters: () => [], propDecorators: { start_value: [{
                 type: Input
-            }], labelText: [{
+            }], end_value: [{
                 type: Input
-            }], selectionChange: [{
+            }], selectedValueChange: [{
                 type: Output
+            }], selectedValue: [{
+                type: Input
             }] } });
 
 class LoaderComponent {
@@ -5174,6 +5182,69 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 }]
         }] });
 
+const routes$J = [];
+class TimelineFilterRoutingModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TimelineFilterRoutingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: TimelineFilterRoutingModule, imports: [i1$2.RouterModule], exports: [RouterModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TimelineFilterRoutingModule, imports: [RouterModule.forChild(routes$J), RouterModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TimelineFilterRoutingModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [RouterModule.forChild(routes$J)],
+                    exports: [RouterModule]
+                }]
+        }] });
+
+class TimelineFilterModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TimelineFilterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: TimelineFilterModule, declarations: [TimelineFilterComponent], imports: [CommonModule,
+            TimelineFilterRoutingModule,
+            FlexLayoutModule,
+            ReactiveFormsModule,
+            MatFormFieldModule,
+            MatSelectModule,
+            MatButtonModule,
+            MatIconModule,
+            MatInputModule,
+            MatDatepickerModule,
+            MatNativeDateModule,
+            TechlifyIconModule], exports: [TimelineFilterComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TimelineFilterModule, imports: [CommonModule,
+            TimelineFilterRoutingModule,
+            FlexLayoutModule,
+            ReactiveFormsModule,
+            MatFormFieldModule,
+            MatSelectModule,
+            MatButtonModule,
+            MatIconModule,
+            MatInputModule,
+            MatDatepickerModule,
+            MatNativeDateModule,
+            TechlifyIconModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TimelineFilterModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [TimelineFilterComponent],
+                    imports: [
+                        CommonModule,
+                        TimelineFilterRoutingModule,
+                        FlexLayoutModule,
+                        ReactiveFormsModule,
+                        MatFormFieldModule,
+                        MatSelectModule,
+                        MatButtonModule,
+                        MatIconModule,
+                        MatInputModule,
+                        MatDatepickerModule,
+                        MatNativeDateModule,
+                        TechlifyIconModule
+                    ],
+                    exports: [TimelineFilterComponent]
+                }]
+        }] });
+
 class SearchableSelectorModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SearchableSelectorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: SearchableSelectorModule, declarations: [SearchableSelectorComponent], imports: [CommonModule,
@@ -5240,6 +5311,7 @@ class SharedModule {
             ReactiveFormsModule,
             SearchableSelectorModule,
             TechlifyDeleteButtonComponent,
+            TimelineFilterModule,
             TechlifyFormButtonComponent,
             TechlifyIconModule] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SharedModule, imports: [TechlifyDeleteButtonComponent,
@@ -5249,6 +5321,7 @@ class SharedModule {
             MaterialModule,
             ReactiveFormsModule,
             SearchableSelectorModule,
+            TimelineFilterModule,
             TechlifyIconModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SharedModule, decorators: [{
@@ -5268,6 +5341,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         ReactiveFormsModule,
                         SearchableSelectorModule,
                         TechlifyDeleteButtonComponent,
+                        TimelineFilterModule,
                         TechlifyFormButtonComponent,
                         TechlifyIconModule,
                     ]
@@ -5384,69 +5458,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 }]
         }] });
 
-const routes$J = [];
-class TimelineFilterRoutingModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TimelineFilterRoutingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: TimelineFilterRoutingModule, imports: [i1$2.RouterModule], exports: [RouterModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TimelineFilterRoutingModule, imports: [RouterModule.forChild(routes$J), RouterModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TimelineFilterRoutingModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [RouterModule.forChild(routes$J)],
-                    exports: [RouterModule]
-                }]
-        }] });
-
-class TimelineFilterModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TimelineFilterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: TimelineFilterModule, declarations: [TimelineFilterComponent], imports: [CommonModule,
-            TimelineFilterRoutingModule,
-            FlexLayoutModule,
-            ReactiveFormsModule,
-            MatFormFieldModule,
-            MatSelectModule,
-            MatButtonModule,
-            MatIconModule,
-            MatInputModule,
-            MatDatepickerModule,
-            MatNativeDateModule,
-            TechlifyIconModule], exports: [TimelineFilterComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TimelineFilterModule, imports: [CommonModule,
-            TimelineFilterRoutingModule,
-            FlexLayoutModule,
-            ReactiveFormsModule,
-            MatFormFieldModule,
-            MatSelectModule,
-            MatButtonModule,
-            MatIconModule,
-            MatInputModule,
-            MatDatepickerModule,
-            MatNativeDateModule,
-            TechlifyIconModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TimelineFilterModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [TimelineFilterComponent],
-                    imports: [
-                        CommonModule,
-                        TimelineFilterRoutingModule,
-                        FlexLayoutModule,
-                        ReactiveFormsModule,
-                        MatFormFieldModule,
-                        MatSelectModule,
-                        MatButtonModule,
-                        MatIconModule,
-                        MatInputModule,
-                        MatDatepickerModule,
-                        MatNativeDateModule,
-                        TechlifyIconModule
-                    ],
-                    exports: [TimelineFilterComponent]
-                }]
-        }] });
-
 class LoaderModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LoaderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: LoaderModule, declarations: [LoaderComponent], imports: [CommonModule,
@@ -5982,7 +5993,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: i8$4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8$4.MatLabel, selector: "mat-label" }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i9$2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i11.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i11.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i12.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i12.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i12.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i12.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i12.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i12.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i12.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i12.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i12.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i12.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: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: EmailSubscriptionUserListFilterComponent, selector: "app-email-subscription-user-list-filter", outputs: ["valueChange"] }, { kind: "pipe", type: i3.DatePipe, name: "date" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.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: i8$4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8$4.MatLabel, selector: "mat-label" }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5.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: i11.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i11.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i12.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i12.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i12.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i12.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i12.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i12.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i12.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i12.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i12.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i12.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: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: EmailSubscriptionUserListFilterComponent, selector: "app-email-subscription-user-list-filter", outputs: ["valueChange"] }, { kind: "pipe", type: i3.DatePipe, name: "date" }] }); }
 };
 EmailSubscriptionUserListComponent = __decorate([
     UntilDestroy()
@@ -6394,7 +6405,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: i8$4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8$4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8$4.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.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i9$2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i11.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i11.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i12.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i12.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i12.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i12.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i12.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i12.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i12.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i12.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i12.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i12.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: i1$5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i6$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: i8$4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8$4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8$4.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.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: i11.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i11.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i12.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i12.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i12.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i12.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i12.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i12.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i12.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i12.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i12.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i12.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: i1$5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i6$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()
@@ -7606,7 +7617,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: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i8$4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8$4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8$4.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.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i9$2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: SearchableSelectorComponent, selector: "app-searchable-selector", inputs: ["valueField", "titleField", "subtitleField", "apiUrl", "multiple", "selectedValue", "enableSearch", "add", "addConfig", "edit", "editConfig", "sort", "sortBy", "searchField", "itemComponent", "items", "apiDataProperty", "cache", "perPage", "inDataSearch", "panelWidth", "focusSearchOnOpen", "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: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i8$4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8$4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8$4.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.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()
@@ -8360,7 +8371,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: i1$5.UntypedFormBuilder }, { token: FormValidatorService }, { token: i0.ChangeDetectorRef }, { token: i3.Location }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.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: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$5.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1$5.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "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$4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8$4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8$4.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.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i9$2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6$3.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: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$5.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1$5.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "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$4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8$4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8$4.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.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$3.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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FieldMappingComponent, decorators: [{
             type: Component,
@@ -9498,6 +9509,9 @@ class UserFormComponent {
     get roleForms() {
         return this.userForm.get('roles');
     }
+    get canUpdateUserCredential() {
+        return (this.user?.user_clients || [])?.length <= 1;
+    }
     ngOnInit() {
         this.userTypes = this.config.userConfig.showUserTypes
             ? this.config.userConfig.userTypes
@@ -9542,6 +9556,10 @@ class UserFormComponent {
                 width: '100%'
             }
         };
+        if (!this.canUpdateUserCredential) {
+            this.userForm.get('email').disable();
+            this.userForm.get('password').disable();
+        }
     }
     loadRoles() {
         this.isWorking = true;
@@ -9639,7 +9657,7 @@ class UserFormComponent {
             .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: AlertService }, { token: ErrorHandlerService }, { token: i1$5.UntypedFormBuilder }, { token: FormValidatorService }, { token: UserService }, { token: UserConfigService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: UserFormComponent, selector: "user-form", inputs: { userId: "userId" }, outputs: { onSave: "onSave" }, ngImport: i0, template: "<form [formGroup]=\"userForm\" (ngSubmit)=\"save()\">\n  <div class=\"d-flex flex-column justify-content-start align-items center gap-1\" mat-dialog-content>\n    <h5 class=\"fw-bold text-center\">{{ updateMode ? 'Edit' : 'Create ' }} User</h5>\n    <div fxLayout>\n      <div fxLayout=\"column\" fxFlex fxLayoutGap=\"0.25rem\">\n        <mat-form-field>\n          <mat-label>Full name</mat-label>\n          <input [required]=\"!!userForm.get('name').validator\" autocomplete=\"off\" formControlName=\"name\" matInput\n            placeholder=\"Full Name\" type=\"text\" />\n          <mat-error *ngIf=\"isFieldValid('name') && !!userForm.get('name').validator\">{{ getErrorMessage('name') }}\n          </mat-error>\n        </mat-form-field>\n        <mat-form-field>\n          <mat-label>Email</mat-label>\n          <input [required]=\"!!userForm.get('email').validator\" formControlName=\"email\" matInput placeholder=\"Email\"\n            type=\"email\" />\n          <mat-error *ngIf=\"isFieldValid('email') && !!userForm.get('email').validator\">\n            {{ getErrorMessage('email') }}\n          </mat-error>\n        </mat-form-field>\n        <mat-form-field *ngIf=\"this.config.userConfig.showPhone\">\n          <mat-label>Phone</mat-label>\n          <input autocomplete=\"off\" formControlName=\"phone\" matInput placeholder=\"Phone\" type=\"text\" />\n        </mat-form-field>\n        <mat-form-field>\n          <mat-label>Password</mat-label>\n          <input [required]=\"isPasswordRequired && !!userForm.get('password').validator\" autocomplete=\"off\"\n            formControlName=\"password\" matInput placeholder=\"Password\" type=\"password\" />\n          <mat-error *ngIf=\"isFieldValid('password') && !!userForm.get('password').validator\">\n            {{ getErrorMessage('password') }}\n          </mat-error>\n        </mat-form-field>\n\n        <div class=\"d-flex flex-column justify-content-start gap-1\">\n          <mat-checkbox formControlName=\"is_temporary_password\">Is Temporary Password?</mat-checkbox>\n          <small class=\"text-secondary\">Should this user to update password on first login?</small>\n        </div>\n\n        <div *ngIf=\"this.config.userConfig.showSignature\">\n          <ng-template #fileUpload>\n            <section class=\"col-12\">\n              <div>User Signature</div>\n              <app-file-dropper (fileChanged)=\"fileChanged($event)\" [config]=\"fileConfig\" [fileArray]=\"fileList\">\n              </app-file-dropper>\n            </section>\n          </ng-template>\n          <div *ngIf=\"userForm.get('signature').value;else fileUpload;\" class=\"col-12\">\n            <app-document-viewer (remove)=\"removeFile()\" [config]=\"this.viewerConfig\"\n              [fileUrl]=\"userForm.get('signature_url').value\" [file]=\"userForm.get('signature').value\">\n            </app-document-viewer>\n          </div>\n        </div>\n        <mat-form-field *ngIf=\"this.config.userConfig.showUserTypes\">\n          <mat-label>User Type</mat-label>\n          <mat-select autocomplete=\"off\" formControlName=\"user_type_id\" required>\n            <mat-option *ngFor=\"let userType of userTypes\" [value]=\"userType.value\">\n              {{ userType.title }}\n            </mat-option>\n          </mat-select>\n          <mat-error *ngIf=\"isFieldValid('user_type_id')\">{{ getErrorMessage('user_type_id') }}</mat-error>\n        </mat-form-field>\n      </div>\n\n      <div\n        *ngIf=\"(this.config.userConfig.showRoles || this.config.userConfig.showFormRoles) && this.userForm.get('user_type_id').value == 3\"\n        fxFlex class=\"ml-4\">\n        <p class=\"mb-0 fw-bold\">\n          Roles\n        </p>\n        <div *ngFor=\"let role of roles\" fxLayout=\"column\">\n          <mat-checkbox (change)=\"roleSelected($event, role.id)\" [checked]=\"role.selected\">\n            {{ role.label }}\n          </mat-checkbox>\n        </div>\n      </div>\n\n    </div>\n    <div class=\"d-flex justify-content-end align-items-center gap-3\">\n      <button [disabled]=\"isWorking\" color=\"primary\" mat-raised-button type=\"submit\">\n        Save\n      </button>\n      <button (click)=\"closeDialog()\" [disabled]=\"isWorking\" mat-flat-button type=\"button\">\n        Cancel\n      </button>\n    </div>\n  </div>\n</form>", dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i8$1.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: i8$4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8$4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8$4.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.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i9$2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: 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: "directive", type: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: FileDropperComponent, selector: "app-file-dropper", inputs: ["fileArray", "config", "styles"], outputs: ["fileChanged"] }, { kind: "component", type: DocumentViewerComponent, selector: "app-document-viewer", inputs: ["config", "file", "fileUrl", "disableEdit"], outputs: ["remove"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: UserFormComponent, selector: "user-form", inputs: { userId: "userId" }, outputs: { onSave: "onSave" }, ngImport: i0, template: "<form [formGroup]=\"userForm\" (ngSubmit)=\"save()\">\n  <div class=\"d-flex flex-column justify-content-start align-items center gap-1\" mat-dialog-content>\n    <h5 class=\"fw-bold text-center\">{{ updateMode ? 'Edit' : 'Create ' }} User</h5>\n    <div fxLayout>\n      <div fxLayout=\"column\" fxFlex fxLayoutGap=\"0.25rem\">\n        <mat-form-field>\n          <mat-label>Full name</mat-label>\n          <input [required]=\"!!userForm.get('name').validator\" autocomplete=\"off\" formControlName=\"name\" matInput\n            placeholder=\"Full Name\" type=\"text\" />\n          <mat-error *ngIf=\"isFieldValid('name') && !!userForm.get('name').validator\">{{ getErrorMessage('name') }}\n          </mat-error>\n        </mat-form-field>\n        <mat-form-field>\n          <mat-label>Email</mat-label>\n          <input [required]=\"!!userForm.get('email').validator\" formControlName=\"email\" matInput placeholder=\"Email\"\n            type=\"email\" />\n          <mat-error *ngIf=\"isFieldValid('email') && !!userForm.get('email').validator\">\n            {{ getErrorMessage('email') }}\n          </mat-error>\n        </mat-form-field>\n        <mat-form-field *ngIf=\"this.config.userConfig.showPhone\">\n          <mat-label>Phone</mat-label>\n          <input autocomplete=\"off\" formControlName=\"phone\" matInput placeholder=\"Phone\" type=\"text\" />\n        </mat-form-field>\n        <mat-form-field>\n          <mat-label>Password</mat-label>\n          <input [required]=\"isPasswordRequired && !!userForm.get('password').validator\" autocomplete=\"off\"\n            formControlName=\"password\" matInput placeholder=\"Password\" type=\"password\" />\n          <mat-error *ngIf=\"isFieldValid('password') && !!userForm.get('password').validator\">\n            {{ getErrorMessage('password') }}\n          </mat-error>\n        </mat-form-field>\n\n        <div class=\"d-flex flex-column justify-content-start gap-1\">\n          <mat-checkbox formControlName=\"is_temporary_password\">Is Temporary Password?</mat-checkbox>\n          <small class=\"text-secondary\">Should this user to update password on first login?</small>\n        </div>\n\n        <div *ngIf=\"this.config.userConfig.showSignature\">\n          <ng-template #fileUpload>\n            <section class=\"col-12\">\n              <div>User Signature</div>\n              <app-file-dropper (fileChanged)=\"fileChanged($event)\" [config]=\"fileConfig\" [fileArray]=\"fileList\">\n              </app-file-dropper>\n            </section>\n          </ng-template>\n          <div *ngIf=\"userForm.get('signature').value;else fileUpload;\" class=\"col-12\">\n            <app-document-viewer (remove)=\"removeFile()\" [config]=\"this.viewerConfig\"\n              [fileUrl]=\"userForm.get('signature_url').value\" [file]=\"userForm.get('signature').value\">\n            </app-document-viewer>\n          </div>\n        </div>\n        <mat-form-field *ngIf=\"this.config.userConfig.showUserTypes\">\n          <mat-label>User Type</mat-label>\n          <mat-select autocomplete=\"off\" formControlName=\"user_type_id\" required>\n            <mat-option *ngFor=\"let userType of userTypes\" [value]=\"userType.value\">\n              {{ userType.title }}\n            </mat-option>\n          </mat-select>\n          <mat-error *ngIf=\"isFieldValid('user_type_id')\">{{ getErrorMessage('user_type_id') }}</mat-error>\n        </mat-form-field>\n      </div>\n\n      <div\n        *ngIf=\"(this.config.userConfig.showRoles || this.config.userConfig.showFormRoles) && this.userForm.get('user_type_id').value == 3\"\n        fxFlex class=\"ml-4\">\n        <p class=\"mb-0 fw-bold\">\n          Roles\n        </p>\n        <div *ngFor=\"let role of roles\" fxLayout=\"column\">\n          <mat-checkbox (change)=\"roleSelected($event, role.id)\" [checked]=\"role.selected\">\n            {{ role.label }}\n          </mat-checkbox>\n        </div>\n      </div>\n\n    </div>\n    <div class=\"d-flex justify-content-end align-items-center gap-3\">\n      <button [disabled]=\"isWorking\" color=\"primary\" mat-raised-button type=\"submit\">\n        Save\n      </button>\n      <button (click)=\"closeDialog()\" [disabled]=\"isWorking\" mat-flat-button type=\"button\">\n        Cancel\n      </button>\n    </div>\n  </div>\n</form>", dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i8$1.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: i8$4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8$4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8$4.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.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: 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: "directive", type: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: FileDropperComponent, selector: "app-file-dropper", inputs: ["fileArray", "config", "styles"], outputs: ["fileChanged"] }, { kind: "component", type: DocumentViewerComponent, selector: "app-document-viewer", inputs: ["config", "file", "fileUrl", "disableEdit"], outputs: ["remove"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: UserFormComponent, decorators: [{
             type: Component,
@@ -11235,11 +11253,11 @@ 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: i1$5.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\" />\n                </div>\n              </td>\n            </ng-container>\n          </tr>\n        </tbody>\n      </table>\n    </form>\n  </mat-card>\n</div>", dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$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: i8$4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8$4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8$4.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.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i9$2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4.MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.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: i8$4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8$4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8$4.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.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: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PermissionsManagementComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'role-permissions-management', 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\" />\n                </div>\n              </td>\n            </ng-container>\n          </tr>\n        </tbody>\n      </table>\n    </form>\n  </mat-card>\n</div>" }]
+            args: [{ selector: 'role-permissions-management', 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"] }]
         }], ctorParameters: () => [{ type: HttpService }, { type: AlertService }, { type: i1$2.ActivatedRoute }, { type: CredentialsService }, { type: ErrorHandlerService }, { type: UserConfigService }, { type: i1$5.FormBuilder }], propDecorators: { clientId: [{
                 type: Input
             }] } });
@@ -11431,7 +11449,7 @@ class UserSelectorComponent {
                 useExisting: forwardRef(() => UserSelectorComponent),
                 multi: true
             }
-        ], ngImport: i0, template: "<mat-form-field class=\"col-12 pl-0 pr-0\">\n    <mat-label>User</mat-label>\n    <mat-select [(ngModel)]=\"value\" (selectionChange)=\"itemSelected()\" [required]=\"isRequired\">\n        <mat-option *ngFor=\"let user of items\" [value]=\"user.id\">{{user.name}}</mat-option>\n    </mat-select>\n    <mat-error>User is required</mat-error>\n</mat-form-field>", dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i8$4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8$4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8$4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i9$2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }] }); }
+        ], ngImport: i0, template: "<mat-form-field class=\"col-12 pl-0 pr-0\">\n    <mat-label>User</mat-label>\n    <mat-select [(ngModel)]=\"value\" (selectionChange)=\"itemSelected()\" [required]=\"isRequired\">\n        <mat-option *ngFor=\"let user of items\" [value]=\"user.id\">{{user.name}}</mat-option>\n    </mat-select>\n    <mat-error>User is required</mat-error>\n</mat-form-field>", dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i8$4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8$4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8$4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i5.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,
@@ -13144,7 +13162,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: i8$4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8$4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8$4.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.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i9$2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i1$5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
+        ], ngImport: i0, template: "<div fxLayout fxLayoutGap=\"10px\" class=\"w-100\">\n  <mat-form-field fxFlex=\"calc(85% - 10px)\">\n    <mat-label>{{ label }}</mat-label>\n    <input type=\"text\" matInput placeholder=\"IP Range\" [formControl]=\"ipAddressControl\">\n    <mat-hint>\n      What is the ip address or range that we should block? Format can be either a single IP like\n      <code>192.175.32.133</code> OR a range specifying the subnet like <code>192.175.32.0/24</code>\n    </mat-hint>\n  </mat-form-field>\n  <mat-form-field fxFlex=\"calc(15% - 10px)\">\n    <mat-select [formControl]=\"subnetControl\">\n      <mat-option *ngFor=\"let subnet of subnetOptions\" [value]=\"subnet.value\">\n        /{{ subnet.value }}\n      </mat-option>\n    </mat-select>\n  </mat-form-field>\n</div>\n", styles: [".custom-suffix{background:gray;margin-top:-20px;position:absolute;right:0;top:20px;height:50px;border-radius:4px;padding-top:20px}\n"], dependencies: [{ kind: "directive", type: 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: i8$4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8$4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8$4.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.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: i1$5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IpRangeSelectorComponent, decorators: [{
             type: Component,
@@ -13233,7 +13251,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: i1$5.FormBuilder }, { token: i3.Location }, { token: RequestHelperService }, { token: AlertService }, { token: RestrictorService }, { token: i3.DatePipe }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.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: i8$4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8$4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8$4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: i11$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i11$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "directive", type: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i9$2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i5.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: i8$4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8$4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8$4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: i11$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i11$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "directive", type: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i9$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.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,
@@ -13913,7 +13931,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: i8$4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8$4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8$4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i9$2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i1$5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i8.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: i8$4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8$4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8$4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i5.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: i1$5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i8.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,
@@ -15084,7 +15102,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: i1$5.UntypedFormBuilder }, { token: i1.MatDialog }, { token: i3.DatePipe }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.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: i8$4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8$4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8$4.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.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i9$2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i11.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i11.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i12.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i12.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i12.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i12.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i12.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i12.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i12.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i12.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i12.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i12.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$2.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: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: SubscriptionFormComponent, selector: "app-subscription-form", inputs: ["isUpdate", "subscriptionPackage", "tenantSubscriptionInfo"], outputs: ["success"] }, { kind: "directive", type: 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: i8$4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8$4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8$4.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.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: i11.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i11.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i12.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i12.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i12.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i12.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i12.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i12.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i12.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i12.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i12.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i12.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$2.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: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: SubscriptionFormComponent, selector: "app-subscription-form", inputs: ["isUpdate", "subscriptionPackage", "tenantSubscriptionInfo"], outputs: ["success"] }, { kind: "directive", type: 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()
@@ -16572,40 +16590,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 }]
         }] });
 
-class UserTenantAcceptInvitationService extends TechlifyService {
-    constructor(http) {
-        super(http, 'user-tenant-accept-invitation');
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: UserTenantAcceptInvitationService, deps: [{ token: HttpService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: UserTenantAcceptInvitationService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: UserTenantAcceptInvitationService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: () => [{ type: HttpService }] });
-
-class UserTenantAcceptInvitationComponent {
-    constructor(activatedRoute, userTenantAcceptInvitationService) {
-        this.activatedRoute = activatedRoute;
-        this.userTenantAcceptInvitationService = userTenantAcceptInvitationService;
-    }
-    ngOnInit() {
-        this.activatedRoute.paramMap.pipe(switchMap$1((paramMap) => {
-            this.invitationCode = paramMap.get('invitationCode');
-            return this.userTenantAcceptInvitationService.show(this.invitationCode);
-        }))
-            .subscribe((res) => this.userTenant = res?.item);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: UserTenantAcceptInvitationComponent, deps: [{ token: i1$2.ActivatedRoute }, { token: UserTenantAcceptInvitationService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: UserTenantAcceptInvitationComponent, isStandalone: true, selector: "app-user-tenant-accept-invitation", ngImport: i0, template: "<div *ngIf=\"!userTenant\" class=\"jumbotron-primary container mt-4\">\n    <p class=\"mb-0\">\n        We are working on adding you to the company.\n    </p>\n</div>\n\n<div class=\"jumbotron-success container mt-4\" *ngIf=\"userTenant\">\n    <p class=\"mb-0\">\n        You have accepted the invitation and are now able to access {{userTenant?.tenant?.name}} via your user menu.\n    </p>\n</div>", styles: [".jumbotron-primary{padding:2rem;margin-bottom:1.5rem;border-radius:.5rem;background:#e7f1ff;border:1px solid #b6d4fe;color:#084298}.jumbotron-success{padding:2rem;margin-bottom:1.5rem;border-radius:.5rem;background:#d1e7dd;border:1px solid #a3cfbb;color:#0f5132}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: UserTenantAcceptInvitationComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-user-tenant-accept-invitation', standalone: true, imports: [CommonModule], template: "<div *ngIf=\"!userTenant\" class=\"jumbotron-primary container mt-4\">\n    <p class=\"mb-0\">\n        We are working on adding you to the company.\n    </p>\n</div>\n\n<div class=\"jumbotron-success container mt-4\" *ngIf=\"userTenant\">\n    <p class=\"mb-0\">\n        You have accepted the invitation and are now able to access {{userTenant?.tenant?.name}} via your user menu.\n    </p>\n</div>", styles: [".jumbotron-primary{padding:2rem;margin-bottom:1.5rem;border-radius:.5rem;background:#e7f1ff;border:1px solid #b6d4fe;color:#084298}.jumbotron-success{padding:2rem;margin-bottom:1.5rem;border-radius:.5rem;background:#d1e7dd;border:1px solid #a3cfbb;color:#0f5132}\n"] }]
-        }], ctorParameters: () => [{ type: i1$2.ActivatedRoute }, { type: UserTenantAcceptInvitationService }] });
-
 /*
  * Public API Surface of ngx-techlify-core
  */
@@ -16614,5 +16598,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AccessControlConfigModule, ActionPopup, ActionPopupComponent, ActionPopupModule, AdminRoleListComponent, AdminRoleListModule, AdminRolePermissionFormComponent, AdminRolePermissionFormModule, AdminRoleService, AlertService, ApiPrefixInterceptor, AppAdminHomeComponent, AppAdminModule, AppAdminUserViewComponent, AppAdminUserViewModule, AuditLogForModelComponent, AuditLogForModelModule, AuditLogForModelRoutingModule, AuditLogListComponent, AuditLogListFilterComponent, AuditLogListFilterModule, AuditLogListFilterRoutingModule, AuditLogListModule, AuditLogListRoutingModule, AuditLogModule, AuditLogRoutingModule, AuditLogViewComponent, AuditLogViewModelComponent, AuditLogViewModelModule, AuditLogViewModelRoutingModule, AuditLogViewModule, AuditLogViewRoutingModule, AuditLogsViewModelComponent, AuditLogsViewModelModule, AuditLogsViewModelRoutingModule, AuthenticationGuard, AuthenticationService, CacheInterceptor, ChangePasswordModule, ClientService, ColumnConfig, ColumnSelectorComponent, ColumnSelectorModule, CommentFormComponent, CompanyInfoDisplayComponent, CompanyInformationComponent, ConfigService, CoreModule, CredentialsService, CurrentUserService, CustomIconComponent, CustomIconModule, DEFAULT_SELECTED_VALUE, DataManager, DataTable, DataTableComponent, DataTableModule, DateUtils, 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, 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, NoteFormComponent, NoteListComponent, NoteModule, NumItemsSelector, NumberInputButtonComponent, NumberInputButtonModule, NumberSelector, PageEvent, PdfButtonComponent, PdfButtonModule, Permission, PermissionModule, PermissionRoutingProvider, PermissionsManagementComponent, ProfileEditComponent, ProfileModule, ProfileRoutingModule, ReadMoreComponent, ReadMoreModule, RequestHelperService, ResetPasswordComponent, ResetPasswordModule, ResetPasswordRoutingModule, ResetPasswordService, RestrictorTypeSelectorComponent, RestrictorTypeSelectorModule, RestrictorsModule, Role, RoleFormButtonComponent, RoleFormComponent, 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, UserListPageConfig, UserMenuComponent, UserMenuModule, UserModule, UserRoutingProvider, UserSelectorComponent, UserSelectorModule, UserService, UserSessionsComponent, UserSessionsModule, UserTenantAcceptInvitationComponent, UserTenantAcceptInvitationService, UserViewComponent, UsersViewAllComponent, 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, AppAdminUserViewComponent, AppAdminUserViewModule, AuditLogForModelComponent, AuditLogForModelModule, AuditLogForModelRoutingModule, AuditLogListComponent, AuditLogListFilterComponent, AuditLogListFilterModule, AuditLogListFilterRoutingModule, AuditLogListModule, AuditLogListRoutingModule, AuditLogModule, AuditLogRoutingModule, AuditLogViewComponent, AuditLogViewModelComponent, AuditLogViewModelModule, AuditLogViewModelRoutingModule, AuditLogViewModule, AuditLogViewRoutingModule, AuditLogsViewModelComponent, AuditLogsViewModelModule, AuditLogsViewModelRoutingModule, AuthenticationGuard, AuthenticationService, CacheInterceptor, ChangePasswordModule, ClientService, ColumnConfig, ColumnSelectorComponent, ColumnSelectorModule, CommentFormComponent, CompanyInfoDisplayComponent, CompanyInformationComponent, ConfigService, CoreModule, CredentialsService, CurrentUserService, CustomIconComponent, CustomIconModule, DEFAULT_SELECTED_VALUE, DataManager, DataTable, DataTableComponent, DataTableModule, DateUtils, 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, 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, NoteFormComponent, NoteListComponent, NoteModule, NumItemsSelector, NumberInputButtonComponent, NumberInputButtonModule, NumberSelector, PageEvent, PdfButtonComponent, PdfButtonModule, Permission, PermissionModule, PermissionRoutingProvider, PermissionsManagementComponent, ProfileEditComponent, ProfileModule, ProfileRoutingModule, ReadMoreComponent, ReadMoreModule, RequestHelperService, ResetPasswordComponent, ResetPasswordModule, ResetPasswordRoutingModule, ResetPasswordService, RestrictorTypeSelectorComponent, RestrictorTypeSelectorModule, RestrictorsModule, Role, RoleFormButtonComponent, RoleFormComponent, 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, UserListPageConfig, UserMenuComponent, UserMenuModule, UserModule, UserRoutingProvider, UserSelectorComponent, UserSelectorModule, UserService, UserSessionsComponent, UserSessionsModule, UserViewComponent, UsersViewAllComponent, UtilityModule, ViewerConfig, WrapPipe, calculateTimeline, dateValidator, esfur, estlr, esulr, parseLocalDate, techlifyFormContract, techlifyListContract };
 //# sourceMappingURL=ngx-techlify-core.mjs.map