ngx-techlify-core 11.4.6 → 11.4.8-beta.2

package/fesm2015/ngx-techlify-core.js

@@ -5,7 +5,7 @@ import { MatTableDataSource, MatTableModule } from '@angular/material/table';
 import { MatSort, MatSortModule } from '@angular/material/sort';
 import { untilDestroyed, UntilDestroy } from '@ngneat/until-destroy';
 import { Location, DatePipe, CommonModule } from '@angular/common';
-import { Validators, FormBuilder, FormControl, NgControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { Validators, FormBuilder, NgControl, FormControl, ReactiveFormsModule, FormsModule } from '@angular/forms';
 import { HttpResponse, HttpClient, HttpHandler, HttpClientModule } from '@angular/common/http';
 import { throwError, Observable, Subject, of, from, fromEvent } from 'rxjs';
 import { catchError, debounceTime, distinctUntilChanged, startWith, switchMap, finalize, takeUntil, tap, concatMap, filter } from 'rxjs/operators';
@@ -33,12 +33,12 @@ import { MatButtonToggleModule } from '@angular/material/button-toggle';
 import { FlexLayoutModule } from '@angular/flex-layout';
 import { InfiniteScrollModule } from 'ngx-infinite-scroll';
 import { NgxDocViewerModule } from 'ngx-doc-viewer';
+import { ENTER, COMMA } from '@angular/cdk/keycodes';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { Editor, NgxEditorModule } from 'ngx-editor';
 import { utils, writeFile, read } from 'xlsx';
 import { DomSanitizer } from '@angular/platform-browser';
 import { diff, formatters } from 'jsondiffpatch';
-import { ENTER, COMMA } from '@angular/cdk/keycodes';
-import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 
 class ActionPopup {
@@ -73,6 +73,162 @@ ActionPopupComponent.ctorParameters = () => [
     { type: ActionPopup, decorators: [{ type: Inject, args: [MAT_DIALOG_DATA,] }] }
 ];
 
+/**
+ * Interface used to ensure we have a consistent structure across our form components
+ *
+ * It also provides some abstraction of repeated code to reduce our codebase size
+ *
+ * @todo This should be moved to ngx-techlify-core
+ *
+ * Advantages of this abstract class
+ * - Less code, less maintenance, less bugs
+ * - more consistent code
+ * - comments on more code
+ * - save time, save energy
+ */
+class TechlifyFormComponentInterface {
+    constructor(formValidatorService) {
+        this.formValidatorService = formValidatorService;
+    }
+    /**
+     * Resets the value of a field in the HTML form
+     *
+     * @param event
+     * @param field
+     */
+    resetFieldValue(event, field) {
+        var _a, _b;
+        (_b = (_a = this.form) === null || _a === void 0 ? void 0 : _a.get(field)) === null || _b === void 0 ? void 0 : _b.setValue('');
+    }
+    /**
+     * Retrieves the value of a field from the HTML form
+     *
+     * @param field
+     * @returns
+     */
+    getFieldValue(field) {
+        var _a, _b;
+        return (_b = (_a = this.form) === null || _a === void 0 ? void 0 : _a.get(field)) === null || _b === void 0 ? void 0 : _b.value;
+    }
+    /**
+     * Method to evaluate form fields
+     * */
+    isFieldValid(field) {
+        return this.formValidatorService.isFieldValid(field, this.form, true);
+    }
+    /**
+     * Method to find error in form fields
+     * */
+    getErrorMessage(field) {
+        return this.formValidatorService.getErrorMessage(field, this.form, this.errorMessages);
+    }
+}
+
+/**
+ * Interface used to ensure we have a consistent structure across our listing pages
+ *
+ * @todo This should be moved to ngx-techlify-core
+ *
+ * Advantages of this abstract class
+ * - Less code, less maintenance, less bugs
+ * - more consistent code
+ * - comments on more code
+ * - save time, save energy
+ */
+class TechlifyListingControllerInterface {
+    constructor() {
+        this.models = [];
+        this.page = 1;
+        this.perPage = 25;
+        this.lastPage = 500;
+        this.isWorking = false;
+    }
+    /**
+     * Reload all data from page 1
+     */
+    reload() {
+        this.models = [];
+        this.page = 1;
+        if (!this.isWorking) {
+            this.loadData();
+        }
+    }
+    /**
+     * Can be called when the user is scrolling,
+     * to trigger loading a new page of data
+     */
+    onScroll() {
+        if (!this.isWorking && this.page < this.lastPage) {
+            this.page += 1;
+            this.loadData();
+        }
+    }
+}
+
+/**
+ * Interface used to ensure we have a consistent structure across our listing pages
+ *
+ * @todo This should be moved to ngx-techlify-core
+ *
+ * Advantages of this abstract class
+ * - Less code, less maintenance, less bugs
+ * - more consistent code
+ * - comments on more code
+ * - save time, save energy
+ */
+class TechlifyServiceBaseClass {
+    constructor(http, baseUrl) {
+        this.http = http;
+        this.baseUrl = "you-forgot-to-set-a-base-url";
+        this.baseUrl = baseUrl;
+    }
+    /**
+     * Loads a set of the model this service is for
+     *
+     * @param filters Restrictors to filter the set of models
+     * @returns
+     */
+    index(filters) {
+        return this.http.get(`api/${this.baseUrl}`, { params: Object.assign({}, filters) }).toPromise();
+    }
+    /**
+     * Add a new record to the database
+     *
+     * @param model The data of the model to add
+     * @returns
+     */
+    store(model) {
+        return this.http.post(`api/${this.baseUrl}`, model).toPromise();
+    }
+    /**
+     * Load a single model record, often with all relations and related data
+     *
+     * @param modelId ID of the model to load
+     * @returns
+     */
+    show(modelId) {
+        return this.http.get(`api/${this.baseUrl}/${modelId}`).toPromise();
+    }
+    /**
+     * Update fields of a single existing model
+     *
+     * @param model Model to update
+     * @returns
+     */
+    update(model) {
+        return this.http.put(`api/${this.baseUrl}/${model.id}`, model).toPromise();
+    }
+    /**
+     * Delete a single model
+     *
+     * @param model Model to delete
+     * @returns
+     */
+    delete(model) {
+        return this.http.delete(`api/${this.baseUrl}/${model.id}`).toPromise();
+    }
+}
+
 var DataTableComponent_1;
 let DataTableComponent = DataTableComponent_1 = class DataTableComponent {
     constructor() {
@@ -1118,6 +1274,10 @@ class EntityFileFormComponent {
         this.entityFileService = entityFileService;
         this.alertService = alertService;
         this.fileList = [];
+        /**
+         * Should we allow tagging entity-files?
+         */
+        this.useTechlifyTags = false;
         this.createForm();
     }
     /** Method to create a form **/
@@ -1132,10 +1292,11 @@ class EntityFileFormComponent {
             file: ['', Validators.required],
             url: ['', Validators.required],
             file_size: ['', Validators.required],
+            tag_ids: [[]]
         });
     }
     ngOnInit() {
-        var _a, _b;
+        var _a, _b, _c, _d;
         if (this.data.entity) {
             this.entityFileGroup.get('entity_type').setValue(this.data.entity.entity_type);
             this.entityFileGroup.get('entity_id').setValue(this.data.entity.entity_id);
@@ -1147,6 +1308,9 @@ class EntityFileFormComponent {
         if ((_a = this.data) === null || _a === void 0 ? void 0 : _a.hideTitleAndDetails) {
             this.hideTitleAndDetails = (_b = this.data) === null || _b === void 0 ? void 0 : _b.hideTitleAndDetails;
         }
+        if ((_c = this.data) === null || _c === void 0 ? void 0 : _c.useTechlifyTags) {
+            this.useTechlifyTags = (_d = this.data) === null || _d === void 0 ? void 0 : _d.useTechlifyTags;
+        }
         //File dropper config
         this.fileConfig = {
             fileId: "subjectFile",
@@ -1177,6 +1341,7 @@ class EntityFileFormComponent {
             if (this.hideTitleAndDetails) {
                 model.title = model.file;
             }
+            model.tag_ids = model.tag_ids.toString();
             const result = this.updateMode
                 ? yield this.entityFileService.updateEntityFile(model)
                 : yield this.entityFileService.createEntityFile(model);
@@ -1222,7 +1387,7 @@ class EntityFileFormComponent {
 EntityFileFormComponent.decorators = [
     { type: Component, args: [{
                 selector: 'entity-file-form',
-                template: "<form [formGroup]=\"entityFileGroup\" (ngSubmit)=\"submit()\">\n  <div fxLayout=\"column\" class=\"mat-typography\">\n    <div mat-dialog-title class=\"text-center\">\n      <div>Entity File</div>\n    </div>\n    <div mat-dialog-content fxLayout=\"column\" fxLayoutAlign.=\"start\">\n      <ng-container *ngIf=\"!hideTitleAndDetails\">\n        <mat-form-field>\n          <input type=\"text\" matInput formControlName=\"title\" placeholder=\"Title\" autocomplete=\"off\">\n        </mat-form-field>\n        <mat-form-field>\n          <textarea matInput formControlName=\"details\" placeholder=\"Details\" autocomplete=\"off\"></textarea>\n        </mat-form-field>\n      </ng-container>\n      <ng-template #fileUpload>\n        <section fxFlex=\"100%\">\n          <div>Entity File*</div>\n          <app-file-dropper [config]=\"fileConfig\" (fileChanged)=\"fileChanged($event)\" [fileArray]=\"fileList\">\n          </app-file-dropper>\n          <div class=\"text-danger\" *ngIf=\"isFieldValid('url')\">\n            {{getErrorMessage(\"url\")}}\n          </div>\n        </section>\n      </ng-template>\n      <div fxFlex=\"100%\" class=\"mt-2\" *ngIf=\"entityFileGroup.get('url').value;else fileUpload;\">\n        <app-document-viewer [file]=\"entityFileGroup.get('file').value\" [fileUrl]=\"entityFileGroup.get('url').value\"\n          [config]=\"this.viewerConfig\" (remove)=\"removeFile()\" [disableEdit]=\"updateMode\">\n        </app-document-viewer>\n      </div>\n      <div class=\"mt-4 mb-2\" fxLayout=\"row\" fxLayoutGap=\"30px\" fxLayoutAlign=\"end\" fxFlex=\"100%\">\n        <button mat-raised-button type=\"button\" (click)=\"dialogRef.close()\">\n          Cancel\n        </button>\n        <button mat-raised-button type=\"submit\" color=\"primary\">Save</button>\n      </div>\n    </div>\n  </div>\n</form>\n",
+                template: "<form [formGroup]=\"entityFileGroup\" (ngSubmit)=\"submit()\">\n  <div fxLayout=\"column\" class=\"mat-typography\">\n    <div mat-dialog-title class=\"text-center\">\n      <div>Entity File</div>\n    </div>\n    <div mat-dialog-content fxLayout=\"column\" fxLayoutAlign.=\"start\">\n      <ng-container *ngIf=\"!hideTitleAndDetails\">\n        <mat-form-field>\n          <input type=\"text\" matInput formControlName=\"title\" placeholder=\"Title\" autocomplete=\"off\">\n        </mat-form-field>\n        <mat-form-field>\n          <textarea matInput formControlName=\"details\" placeholder=\"Details\" autocomplete=\"off\"></textarea>\n        </mat-form-field>\n      </ng-container>\n      <ng-container *ngIf=\"useTechlifyTags\">\n        <mat-form-field>\n          <mat-label>Tag</mat-label>\n          <app-techlify-tagger-tag-form-field modelType=\"entity-file\" formControlName=\"tag_ids\"\n            [modelId]=\"entityFileGroup.get('id').value\"></app-techlify-tagger-tag-form-field>\n        </mat-form-field>\n      </ng-container>\n      <ng-template #fileUpload>\n        <section fxFlex=\"100%\">\n          <div>Entity File*</div>\n          <app-file-dropper [config]=\"fileConfig\" (fileChanged)=\"fileChanged($event)\" [fileArray]=\"fileList\">\n          </app-file-dropper>\n          <div class=\"text-danger\" *ngIf=\"isFieldValid('url')\">\n            {{getErrorMessage(\"url\")}}\n          </div>\n        </section>\n      </ng-template>\n      <div fxFlex=\"100%\" class=\"mt-2\" *ngIf=\"entityFileGroup.get('url').value;else fileUpload;\">\n        <app-document-viewer [file]=\"entityFileGroup.get('file').value\" [fileUrl]=\"entityFileGroup.get('url').value\"\n          [config]=\"this.viewerConfig\" (remove)=\"removeFile()\" [disableEdit]=\"updateMode\">\n        </app-document-viewer>\n      </div>\n      <div class=\"mt-4 mb-2\" fxLayout=\"row\" fxLayoutGap=\"30px\" fxLayoutAlign=\"end\" fxFlex=\"100%\">\n        <button mat-raised-button type=\"button\" (click)=\"dialogRef.close()\">\n          Cancel\n        </button>\n        <button mat-raised-button type=\"submit\" color=\"primary\">Save</button>\n      </div>\n    </div>\n  </div>\n</form>\n",
                 styles: [""]
             },] }
 ];
@@ -1236,12 +1401,18 @@ EntityFileFormComponent.ctorParameters = () => [
 ];
 
 let EntityFilesViewAllComponent = class EntityFilesViewAllComponent {
-    constructor(entityFileService, location, alertService, dialog) {
+    constructor(entityFileService, location, alertService, dialog, fb) {
         this.entityFileService = entityFileService;
         this.location = location;
         this.alertService = alertService;
         this.dialog = dialog;
+        this.fb = fb;
         this.viewOnly = false;
+        this.allowMultipleFiles = false;
+        /**
+         * Should we allow tagging entity-files?
+         */
+        this.useTechlifyTags = false;
         this.title = "File";
         this.filters = {};
         this.entityFiles = [];
@@ -1253,11 +1424,14 @@ let EntityFilesViewAllComponent = class EntityFilesViewAllComponent {
             'uploaded_on',
         ];
         this.isWorking = false;
-        this.search = new FormControl('');
         this.page = 1;
         this.perPage = 25;
         this.lastPage = 0;
         this.fileList = [];
+        this.filterFormGroup = this.fb.group({
+            title: [""],
+            tag_ids: [""]
+        });
     }
     ngOnInit() {
         //File dropper config
@@ -1267,7 +1441,7 @@ let EntityFilesViewAllComponent = class EntityFilesViewAllComponent {
             styles: {
                 height: "500px"
             },
-            multiple: false,
+            multiple: this.allowMultipleFiles,
             acceptFile: "*",
             maxSize: 10,
             acceptFileText: "All Files"
@@ -1286,24 +1460,33 @@ let EntityFilesViewAllComponent = class EntityFilesViewAllComponent {
         if (this.hideTitleAndDetails) {
             this.displayedColumns = this.displayedColumns.filter(x => (x !== 'details') && (x !== 'title'));
         }
+        this.listenRoutes();
         this.filters = {
             entity_type: this.entityType,
             entity_id: this.entityId,
             title: ""
         };
-        this.search.valueChanges.pipe(debounceTime(500), distinctUntilChanged(), untilDestroyed(this)).subscribe(value => {
-            this.filters.title = value;
-            this.reload();
-        });
         this.fetchEntityFilesDetails();
+        if (this.useTechlifyTags) {
+            this.displayedColumns.push('tag');
+        }
         if (!this.viewOnly) {
             this.displayedColumns.push('actions');
         }
     }
+    listenRoutes() {
+        this.filterFormGroup.valueChanges.pipe(debounceTime(500), untilDestroyed(this))
+            .subscribe(changes => {
+            this.reload();
+        });
+    }
     fetchEntityFilesDetails() {
         return __awaiter(this, void 0, void 0, function* () {
             this.filters.page = this.page;
             this.filters.perPage = this.perPage;
+            let formGroup = this.filterFormGroup.value;
+            formGroup.tag_ids = formGroup.tag_ids.toString();
+            this.filters = Object.assign(Object.assign({}, this.filters), formGroup);
             this.isWorking = true;
             const result = yield this.entityFileService.getEntityFiles(this.filters);
             this.lastPage = result.last_page || this.page;
@@ -1316,7 +1499,8 @@ let EntityFilesViewAllComponent = class EntityFilesViewAllComponent {
             width: "700px",
             data: {
                 entity: this.filters,
-                hideTitleAndDetails: this.hideTitleAndDetails
+                hideTitleAndDetails: this.hideTitleAndDetails,
+                useTechlifyTags: this.useTechlifyTags,
             },
             autoFocus: false,
             restoreFocus: false
@@ -1335,7 +1519,8 @@ let EntityFilesViewAllComponent = class EntityFilesViewAllComponent {
             autoFocus: false,
             data: {
                 file: file,
-                hideTitleAndDetails: this.hideTitleAndDetails
+                hideTitleAndDetails: this.hideTitleAndDetails,
+                useTechlifyTags: this.useTechlifyTags,
             } // Any data passed here will be injected into the model
         });
         dialogRef.afterClosed().subscribe(result => {
@@ -1376,8 +1561,9 @@ let EntityFilesViewAllComponent = class EntityFilesViewAllComponent {
         }
     }
     ngOnDestroy() { }
-    resetFieldValue() {
-        this.search.setValue("");
+    resetFieldValue(event, field) {
+        event.stopPropagation();
+        this.filterFormGroup.get(field).setValue("");
     }
     sizeOf(bytes) {
         if (!bytes) {
@@ -1390,13 +1576,15 @@ let EntityFilesViewAllComponent = class EntityFilesViewAllComponent {
         return __awaiter(this, void 0, void 0, function* () {
             this.fileList = event;
             if (this.fileList.length > 0) {
-                const result = yield this.entityFileService.uploadEntityFile(this.fileList[0], {
-                    entity_type: this.entityType,
-                    entity_id: this.entityId,
-                });
+                yield this.fileList.forEach((file) => __awaiter(this, void 0, void 0, function* () {
+                    const result = yield this.entityFileService.uploadEntityFile(file, {
+                        entity_type: this.entityType,
+                        entity_id: this.entityId,
+                    });
+                    this.reload();
+                }));
                 this.fileList = [];
                 this.alertService.addAlert('Successfull uploaded', 'success');
-                this.reload();
             }
         });
     }
@@ -1404,7 +1592,7 @@ let EntityFilesViewAllComponent = class EntityFilesViewAllComponent {
 EntityFilesViewAllComponent.decorators = [
     { type: Component, args: [{
                 selector: 'app-entity-files-view-all',
-                template: "<div class=\"mat-typography\" *ngIf=\"!displayMode\">\n  <div fxLayout=\"row\" fxLayoutGap=\"1rem\">\n    <mat-card fxFlex=\"70%\">\n      <mat-card-title fxLayout fxLayoutGap=\"1rem\">\n        <h3 class=\"font-weight-bold primary-color\" fxLayout=\"center center\">\n          <mat-icon>\n            <span class=\"material-icons\">\n              description\n            </span>\n          </mat-icon>\n          {{title}}s\n        </h3>\n        <div>\n          <button type=\"button\" class=\"mx-1\" mat-raised-button color=\"primary\" (click)=\"addEntityFile()\"\n            *ngIf=\"!viewOnly\">\n            <mat-icon>\n              <span class=\"material-icons\">\n                add_circle_outline\n              </span>\n            </mat-icon>\n            {{title}}\n          </button>\n        </div>\n        <mat-form-field *ngIf=\"!removeSearch\" appearance=\"outline\" style=\"font-size: 10px;\">\n          <mat-label>Search</mat-label>\n          <input type=\"text\" matInput [formControl]=\"search\" placeholder=\"Search\" name=\"title\" autocomplete=\"off\" />\n          <button mat-button *ngIf=\"filters.title\" matSuffix mat-icon-button (click)=\"resetFieldValue()\">\n            <mat-icon>close</mat-icon>\n          </button>\n        </mat-form-field>\n      </mat-card-title>\n      <mat-card-content class=\"entity-file-card\">\n        <table mat-table [dataSource]=\"entityFiles\" class=\"w-100\" matSort multiTemplateDataRows infiniteScroll\n          [infiniteScrollDistance]=\"1.5\" [infiniteScrollThrottle]=\"50\" (scrolled)=\"onScroll()\">\n\n          <!-- Index Column -->\n          <ng-container matColumnDef=\"index\">\n            <th mat-header-cell *matHeaderCellDef> # </th>\n            <td mat-cell *matCellDef=\"let element; let i = dataIndex\"> {{ i+1 }} </td>\n          </ng-container>\n\n          <!-- Title Column -->\n          <ng-container matColumnDef=\"title\">\n            <th mat-header-cell *matHeaderCellDef> Title </th>\n            <td mat-cell *matCellDef=\"let element\">\n              <div>\n                <span>\n                  {{element.title}}\n                </span>\n                <span>\n                  <a href=\"{{element.url}}\" target=\"_blank\" class=\"text-decoration-none text-muted\">\n                    <button mat-icon-button type=\"button\">\n                      <mat-icon>download</mat-icon>\n                    </button>\n                  </a>\n                </span>\n              </div>\n            </td>\n          </ng-container>\n\n          <!-- Details Column -->\n          <ng-container matColumnDef=\"details\">\n            <th mat-header-cell *matHeaderCellDef> Details </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.details}} </td>\n          </ng-container>\n\n          <!-- File size Column -->\n          <ng-container matColumnDef=\"file_size\">\n            <th mat-header-cell *matHeaderCellDef> File Size </th>\n            <td mat-cell *matCellDef=\"let element\"> {{ sizeOf(element.file_size)}} </td>\n          </ng-container>\n\n          <!-- Uploaded On Column -->\n          <ng-container matColumnDef=\"uploaded_on\">\n            <th mat-header-cell *matHeaderCellDef> Uploaded On </th>\n            <td mat-cell *matCellDef=\"let element\">\n              <div>\n                {{element.created_at | date: 'mediumDate'}}\n              </div>\n              <div class=\"text-muted\">\n                By {{element.creator?.name}}\n              </div>\n            </td>\n          </ng-container>\n\n          <!-- Actions Column -->\n          <ng-container matColumnDef=\"actions\">\n            <th mat-header-cell *matHeaderCellDef> Actions </th>\n            <td mat-cell *matCellDef=\"let element\" style=\"min-width:110px\" class=\"text-muted\">\n              <button type=\"button\" mat-icon-button (click)=\"editEntityFile(element)\">\n                <mat-icon>edit</mat-icon>\n              </button>\n              <button type=\"button\" mat-icon-button (click)=\"deleteEntityFile(element)\">\n                <mat-icon>delete</mat-icon>\n              </button>\n            </td>\n          </ng-container>\n\n          <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n          <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n        </table>\n      </mat-card-content>\n    </mat-card>\n    <section fxFlex=\"30%\">\n      <app-file-dropper [config]=\"fileConfig\" (fileChanged)=\"fileChanged($event)\" [fileArray]=\"fileList\">\n      </app-file-dropper>\n    </section>\n  </div>\n</div>\n\n<div fxLayout=\"row wrap\" fxLayoutGap=\"1rem\" class=\"mat-typography p-4\" *ngIf=\"displayMode\">\n  <div *ngFor=\"let efile of entityFiles\">\n    <app-document-viewer [file]=\"efile.file\" [fileUrl]=\"efile.url\" [config]=\"this.viewerConfig\" [disableEdit]=\"true\">\n    </app-document-viewer>\n    <a href=\"{{efile.url}}\" target=\"_blank\">\n      <button mat-button type=\"button\">View</button>\n    </a>\n  </div>\n</div>\n",
+                template: "<div class=\"mat-typography\" *ngIf=\"!displayMode\">\n  <div fxLayout=\"row\" fxLayoutGap=\"1rem\">\n    <mat-card fxFlex=\"70%\">\n      <mat-card-title fxLayout fxLayoutGap=\"1rem\">\n        <h3 class=\"font-weight-bold primary-color\" fxLayout=\"center center\">\n          <mat-icon>\n            <span class=\"material-icons\">\n              description\n            </span>\n          </mat-icon>\n          {{title}}s\n        </h3>\n        <div>\n          <button type=\"button\" class=\"mx-1\" mat-raised-button color=\"primary\" (click)=\"addEntityFile()\"\n            *ngIf=\"!viewOnly\">\n            <mat-icon>\n              <span class=\"material-icons\">\n                add_circle_outline\n              </span>\n            </mat-icon>\n            {{title}}\n          </button>\n        </div>\n        <form [formGroup]=\"filterFormGroup\" style=\"font-size: 10px;\" fxLayout fxLayoutGap=\"1rem\">\n          <mat-form-field *ngIf=\"!removeSearch\" appearance=\"outline\">\n            <mat-label>Search</mat-label>\n            <input type=\"text\" matInput formControlName=\"title\" placeholder=\"Search\" name=\"title\" autocomplete=\"off\" />\n            <button mat-button *ngIf=\"filters.title\" matSuffix mat-icon-button\n              (click)=\"resetFieldValue($event, 'title')\">\n              <mat-icon>close</mat-icon>\n            </button>\n          </mat-form-field>\n          <mat-form-field appearance=\"outline\" *ngIf=\"useTechlifyTags\">\n            <mat-label>Tag</mat-label>\n            <app-searchable-selector formControlName=\"tag_ids\" apiUrl=\"api/techlify-tagger-tags\" [multiple]=\"true\"\n              placeHolder=\"Tag\">\n            </app-searchable-selector>\n            <button mat-icon-button matSuffix *ngIf=\"filterFormGroup.get('tag_ids').value.length\"\n              (click)=\"resetFieldValue($event, 'tag_ids')\">\n              <mat-icon>close</mat-icon>\n            </button>\n          </mat-form-field>\n        </form>\n      </mat-card-title>\n      <mat-card-content class=\"entity-file-card\">\n        <table mat-table [dataSource]=\"entityFiles\" class=\"w-100\" matSort multiTemplateDataRows infiniteScroll\n          [infiniteScrollDistance]=\"1.5\" [infiniteScrollThrottle]=\"50\" (scrolled)=\"onScroll()\">\n\n          <!-- Index Column -->\n          <ng-container matColumnDef=\"index\">\n            <th mat-header-cell *matHeaderCellDef> # </th>\n            <td mat-cell *matCellDef=\"let element; let i = dataIndex\"> {{ i+1 }} </td>\n          </ng-container>\n\n          <!-- Title Column -->\n          <ng-container matColumnDef=\"title\">\n            <th mat-header-cell *matHeaderCellDef> Title </th>\n            <td mat-cell *matCellDef=\"let element\">\n              <div>\n                <span>\n                  {{element.title}}\n                </span>\n                <span>\n                  <a href=\"{{element.url}}\" target=\"_blank\" class=\"text-decoration-none text-muted\">\n                    <button mat-icon-button type=\"button\">\n                      <mat-icon>download</mat-icon>\n                    </button>\n                  </a>\n                </span>\n              </div>\n            </td>\n          </ng-container>\n\n          <!-- Details Column -->\n          <ng-container matColumnDef=\"details\">\n            <th mat-header-cell *matHeaderCellDef> Details </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.details}} </td>\n          </ng-container>\n\n          <!-- File size Column -->\n          <ng-container matColumnDef=\"file_size\">\n            <th mat-header-cell *matHeaderCellDef> File Size </th>\n            <td mat-cell *matCellDef=\"let element\"> {{ sizeOf(element.file_size)}} </td>\n          </ng-container>\n\n          <!-- Tags Column -->\n          <ng-container matColumnDef=\"tag\">\n            <th mat-header-cell *matHeaderCellDef> Tag </th>\n            <td mat-cell *matCellDef=\"let element\" class=\"text-muted\">\n              <ng-container *ngFor=\"let taggerModel of element.tags\">\n                {{taggerModel?.tag?.title}},\n              </ng-container>\n            </td>\n          </ng-container>\n\n          <!-- Uploaded On Column -->\n          <ng-container matColumnDef=\"uploaded_on\">\n            <th mat-header-cell *matHeaderCellDef> Uploaded On </th>\n            <td mat-cell *matCellDef=\"let element\">\n              <div>\n                {{element.created_at | date: 'mediumDate'}}\n              </div>\n              <div class=\"text-muted\">\n                By {{element.creator?.name}}\n              </div>\n            </td>\n          </ng-container>\n\n          <!-- Actions Column -->\n          <ng-container matColumnDef=\"actions\">\n            <th mat-header-cell *matHeaderCellDef> Actions </th>\n            <td mat-cell *matCellDef=\"let element\" style=\"min-width:110px\" class=\"text-muted\">\n              <button type=\"button\" mat-icon-button (click)=\"editEntityFile(element)\">\n                <mat-icon>edit</mat-icon>\n              </button>\n              <button type=\"button\" mat-icon-button (click)=\"deleteEntityFile(element)\">\n                <mat-icon>delete</mat-icon>\n              </button>\n            </td>\n          </ng-container>\n\n          <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n          <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n        </table>\n      </mat-card-content>\n    </mat-card>\n    <section fxFlex=\"30%\">\n      <app-file-dropper [config]=\"fileConfig\" (fileChanged)=\"fileChanged($event)\" [fileArray]=\"fileList\">\n      </app-file-dropper>\n    </section>\n  </div>\n</div>\n\n<div fxLayout=\"row wrap\" fxLayoutGap=\"1rem\" class=\"mat-typography p-4\" *ngIf=\"displayMode\">\n  <div *ngFor=\"let efile of entityFiles\">\n    <app-document-viewer [file]=\"efile.file\" [fileUrl]=\"efile.url\" [config]=\"this.viewerConfig\" [disableEdit]=\"true\">\n    </app-document-viewer>\n    <a href=\"{{efile.url}}\" target=\"_blank\">\n      <button mat-button type=\"button\">View</button>\n    </a>\n  </div>\n</div>\n",
                 styles: [""]
             },] }
 ];
@@ -1412,7 +1600,8 @@ EntityFilesViewAllComponent.ctorParameters = () => [
     { type: EntityFileService },
     { type: Location },
     { type: AlertService },
-    { type: MatDialog }
+    { type: MatDialog },
+    { type: FormBuilder }
 ];
 EntityFilesViewAllComponent.propDecorators = {
     entityId: [{ type: Input }],
@@ -1421,6 +1610,8 @@ EntityFilesViewAllComponent.propDecorators = {
     removeSearch: [{ type: Input }],
     hideTitleAndDetails: [{ type: Input }],
     displayMode: [{ type: Input }],
+    allowMultipleFiles: [{ type: Input }],
+    useTechlifyTags: [{ type: Input }],
     title: [{ type: Input }]
 };
 EntityFilesViewAllComponent = __decorate([
@@ -3118,109 +3309,292 @@ FileDropperModule.decorators = [
             },] }
 ];
 
-class EntityFilesViewAllModule {
+class TechlifyTaggerTagFormConfigModel {
+    constructor() {
+        this.selectable = true;
+        this.removable = true;
+        this.separatorKeysCodes = [ENTER, COMMA];
+        this.placeholder = 'New Tag..';
+        this.apiUrl = 'api/techlify-tagger-tags';
+        this.createApiUrl = 'api/techlify-tagger-tags';
+        this.isCreateable = true;
+        this.isCacheTags = false;
+        this.isSingle = false;
+    }
 }
-EntityFilesViewAllModule.decorators = [
-    { type: NgModule, args: [{
-                declarations: [EntityFileFormComponent, EntityFilesViewAllComponent],
-                imports: [
-                    CommonModule,
-                    FormsModule,
-                    ReactiveFormsModule,
-                    FlexLayoutModule,
-                    FileDropperModule,
-                    DocumentViewerModule,
-                    InfiniteScrollModule,
-                    ActionPopupModule,
-                    MaterialModule
-                ],
-                exports: [
-                    EntityFilesViewAllComponent
-                ],
-                entryComponents: [EntityFileFormComponent]
-            },] }
-];
 
-class ReadMoreComponent {
-    constructor() {
-        this.maxLength = 100;
-        this.hideToggle = true;
-        this.isCollapsed = true;
+var TechlifyTaggerTagFormFieldComponent_1;
+let TechlifyTaggerTagFormFieldComponent = TechlifyTaggerTagFormFieldComponent_1 = class TechlifyTaggerTagFormFieldComponent {
+    constructor(_focusMonitor, _elementRef, httpService, _formField, ngControl) {
+        this._focusMonitor = _focusMonitor;
+        this._elementRef = _elementRef;
+        this.httpService = httpService;
+        this._formField = _formField;
+        this.ngControl = ngControl;
+        this.stateChanges = new Subject();
+        this.focused = false;
+        this.controlType = 'techlify-tagger-form-field';
+        this.id = `techlify-tagger-form-field-${TechlifyTaggerTagFormFieldComponent_1.nextId++}`;
+        this.onChange = (_) => { };
+        this.onTouched = () => { };
+        this.tagInputCtrl = new FormControl();
+        /**Pass the configuration for Techlify Tagger */
+        this.config = new TechlifyTaggerTagFormConfigModel();
+        /**Pass the default list of tags */
+        this._allTags = [];
+        /**Pass the Categories to filter for a model */
+        this.categories = [];
+        this._required = false;
+        this._disabled = false;
+        this._value = [];
+        this.tagInputCtrl.valueChanges
+            .subscribe(filterValue => {
+            this.filterString = filterValue;
+        });
+        //Set Focus Monitor
+        _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.determineView();
+    get allTags() {
+        return this._allTags;
     }
-    toggleView() {
-        this.isCollapsed = !this.isCollapsed;
-        this.determineView();
+    set allTags(value) {
+        this._allTags = value;
     }
-    determineView() {
-        if (!this.text || this.text.length <= this.maxLength) {
-            this.currentText = this.text;
-            this.isCollapsed = false;
-            this.hideToggle = true;
-            return;
-        }
-        this.hideToggle = false;
-        if (this.isCollapsed == true) {
-            this.currentText = this.text.substring(0, this.maxLength) + "...";
-        }
-        else if (this.isCollapsed == false) {
-            this.currentText = this.text;
-        }
+    get tags() {
+        return this.allTags.filter(x => this.value.some(y => y == x.id));
     }
-}
-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}"]
-            },] }
-];
-ReadMoreComponent.ctorParameters = () => [];
-ReadMoreComponent.propDecorators = {
-    text: [{ type: Input }],
-    maxLength: [{ type: Input }]
-};
-
-class ReadMoreModule {
-}
-ReadMoreModule.decorators = [
-    { type: NgModule, args: [{
-                declarations: [ReadMoreComponent],
-                imports: [
-                    CommonModule,
-                    MaterialModule,
-                    FlexLayoutModule
-                ],
-                exports: [
-                    ReadMoreComponent
-                ]
-            },] }
-];
-
-class NoteModule {
-}
-NoteModule.decorators = [
-    { type: NgModule, args: [{
-                declarations: [
-                    NoteListComponent,
-                    NoteFormComponent,
-                    CommentFormComponent,
-                ],
+    //Default Getter and Setters for a Form Field Implementation
+    get empty() {
+        return this.value.length == 0;
+    }
+    get shouldLabelFloat() {
+        return this.focused || !this.empty || this.tagInputCtrl.value;
+    }
+    get required() {
+        return this._required;
+    }
+    set required(value) {
+        this._required = coerceBooleanProperty(value);
+        this.stateChanges.next();
+    }
+    get disabled() {
+        return this._disabled;
+    }
+    set disabled(value) {
+        this._disabled = coerceBooleanProperty(value);
+        this._disabled ? this.tagInputCtrl.disable() : this.tagInputCtrl.enable();
+        this.stateChanges.next();
+    }
+    get value() {
+        return this._value;
+    }
+    set value(tagIds) {
+        this._value = tagIds || [];
+        this.stateChanges.next();
+    }
+    get errorState() {
+        return this.tagInputCtrl.dirty && this.required && (this.value.length == 0);
+    }
+    get placeholder() {
+        return this._placeholder;
+    }
+    set placeholder(value) {
+        this._placeholder = value;
+        this.stateChanges.next();
+    }
+    ngOnInit() {
+    }
+    ngOnChanges(changes) {
+        //API to load all tags for the model type
+        if (this.allTags.length == 0) {
+            this.httpService
+                .cache(!this.config.isCacheTags)
+                .get(this.config.apiUrl, {
+                params: {
+                    categories: this.categories.join(','),
+                    perPage: '1000'
+                }
+            }).pipe(debounceTime(500), untilDestroyed(this)).subscribe((result) => {
+                this.allTags = result.data;
+            });
+        }
+        //API to load only the selected tags for the model
+        if (this.modelId && this.value.length == 0) {
+            //Model Id is passed and no tags are present, so we query db for the avilable tags for the model ID.
+            this.httpService
+                .cache(!this.config.isCacheTags)
+                .get(this.config.apiUrl, {
+                params: {
+                    categories: this.categories.join(','),
+                    model_type: this.modelType,
+                    model_id: this.modelId,
+                    perPage: '1000'
+                }
+            }).pipe(debounceTime(500), untilDestroyed(this)).subscribe((result) => {
+                this.value = ((result === null || result === void 0 ? void 0 : result.data) || []).map((x) => x.id);
+                this._handleInput();
+            });
+        }
+    }
+    init() {
+        if (this.modelId && this.allTags.length == 0) {
+            //Model Id is passed and no tags are passed, so we query db for the avilable tags for the model ID.
+            this.httpService
+                .cache(!this.config.isCacheTags)
+                .get(this.config.apiUrl, {
+                params: {
+                    categories: this.categories.join(','),
+                    model_type: this.modelType,
+                    model_id: this.modelId
+                }
+            }).pipe(untilDestroyed(this)).subscribe((result) => {
+                this.allTags = result.data;
+            });
+        }
+    }
+    get filteredTags() {
+        return this._filter();
+    }
+    setDescribedByIds(ids) {
+        // Just a empty implementation for Mat Form Field Interface
+    }
+    onContainerClick() {
+        // Just a empty implementation for Mat Form Field Interface
+    }
+    add(event) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const value = (event.value || '').trim();
+            // Add our tag
+            // Validate for single mode
+            if (!this.config.isSingle || (this.value.length === 0)) {
+                if (value && this.config.isCreateable) {
+                    const tags = this.allTags;
+                    let tag = tags.find((item) => item.title.toLowerCase() == value.toLowerCase());
+                    if (!tag) {
+                        //No tag present in the list
+                        try {
+                            const result = yield this.httpService.post(this.config.createApiUrl, {
+                                title: value,
+                                description: value,
+                                category_title: (this.categories.length > 0) ? (this.defaultCreateCategory ? this.defaultCreateCategory : this.categories[0]) : ''
+                            }).toPromise();
+                            tag = result.item;
+                        }
+                        catch (error) {
+                            return;
+                        }
+                        this.allTags.push(tag);
+                    }
+                    else {
+                        //Optionally clean the existing value, to avoid duplicate
+                        this.remove(tag);
+                    }
+                    this.value.push(tag.id);
+                    this._handleInput();
+                }
+            }
+            // Clear the input value
+            event.input.value = '';
+            this.tagInputCtrl.setValue(null);
+        });
+    }
+    remove(tag) {
+        this.value = this.value.filter(x => x !== tag.id);
+        this._handleInput();
+    }
+    selected(event) {
+        // Validate for single mode
+        if (!this.config.isSingle || (this.value.length === 0)) {
+            //Clean the existing value, to avoid duplicate
+            this.remove({ id: event.option.value });
+            this.value.push(event.option.value);
+            this._handleInput();
+        }
+        this.tagInput.nativeElement.value = '';
+        this.tagInputCtrl.setValue(null);
+    }
+    _filter() {
+        const filterValue = this.filterString ? this.filterString.toString().toLowerCase() : null;
+        const availableTags = this.allTags.filter((tag) => !this.value.some((item) => item == tag.id));
+        return filterValue ? availableTags.filter((tag) => tag.title.toLowerCase().includes(filterValue)) : availableTags;
+    }
+    writeValue(tagIds) {
+        this.value = tagIds || [];
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    _handleInput() {
+        this.onChange(this.value);
+    }
+    ngOnDestroy() {
+        this.stateChanges.complete();
+        this._focusMonitor.stopMonitoring(this._elementRef);
+    }
+};
+TechlifyTaggerTagFormFieldComponent.nextId = 0;
+TechlifyTaggerTagFormFieldComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'app-techlify-tagger-tag-form-field',
+                template: "<mat-chip-list #chipList aria-label=\"Tag Selection\">\n    <mat-chip *ngFor=\"let tag of tags\" [selectable]=\"config.selectable\" [removable]=\"config.removable\"\n        (removed)=\"remove(tag)\">\n        {{tag.title}}\n        <button matChipRemove *ngIf=\"config.removable\" class=\"border-0\">\n            <mat-icon class=\"mat-relative-icon\">cancel</mat-icon>\n        </button>\n    </mat-chip>\n    <input placeholder=\"{{config.isCreateable? config.placeholder:''}}\" #tagInput [formControl]=\"tagInputCtrl\"\n        [matAutocomplete]=\"auto\" [matChipInputFor]=\"chipList\"\n        [matChipInputSeparatorKeyCodes]=\"config.separatorKeysCodes\" (matChipInputTokenEnd)=\"add($event)\"\n        #trigger=\"matAutocompleteTrigger\" (click)=\"trigger.openPanel()\">\n</mat-chip-list>\n<mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"selected($event)\">\n    <mat-option *ngFor=\"let tag of filteredTags\" [value]=\"tag.id\">\n        {{tag.title}}\n    </mat-option>\n</mat-autocomplete>",
+                providers: [{ provide: MatFormFieldControl, useExisting: TechlifyTaggerTagFormFieldComponent_1 }],
+                styles: [".mat-relative-icon{font-size:20px;position:relative;right:7px;top:-3px}"]
+            },] }
+];
+TechlifyTaggerTagFormFieldComponent.ctorParameters = () => [
+    { type: FocusMonitor },
+    { type: ElementRef },
+    { type: HttpService },
+    { type: MatFormField, decorators: [{ type: Optional }, { type: Inject, args: [MAT_FORM_FIELD,] }] },
+    { type: NgControl, decorators: [{ type: Optional }, { type: Self }] }
+];
+TechlifyTaggerTagFormFieldComponent.propDecorators = {
+    tagInput: [{ type: ViewChild, args: ['tagInput',] }],
+    config: [{ type: Input }],
+    modelType: [{ type: Input }],
+    modelId: [{ type: Input }],
+    allTags: [{ type: Input }],
+    categories: [{ type: Input }],
+    defaultCreateCategory: [{ type: Input }],
+    required: [{ type: Input }],
+    disabled: [{ type: Input }],
+    value: [{ type: Input }],
+    placeholder: [{ type: Input }]
+};
+TechlifyTaggerTagFormFieldComponent = TechlifyTaggerTagFormFieldComponent_1 = __decorate([
+    UntilDestroy()
+], TechlifyTaggerTagFormFieldComponent);
+
+class TechlifyTaggerTagFormFieldModule {
+}
+TechlifyTaggerTagFormFieldModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [
+                    TechlifyTaggerTagFormFieldComponent
+                ],
                 imports: [
                     CommonModule,
-                    ReactiveFormsModule,
-                    InfiniteScrollModule,
-                    FlexLayoutModule,
-                    ActionPopupModule,
                     MaterialModule,
-                    ReadMoreModule
-                ],
-                exports: [
-                    NoteListComponent
+                    FlexLayoutModule,
+                    MatAutocompleteModule,
+                    ReactiveFormsModule
                 ],
-                entryComponents: [NoteFormComponent]
+                exports: [TechlifyTaggerTagFormFieldComponent]
             },] }
 ];
 
@@ -3245,28 +3619,136 @@ SearchableSelectorModule.decorators = [
             },] }
 ];
 
-class UtilityModule {
+class EntityFilesViewAllModule {
 }
-UtilityModule.decorators = [
+EntityFilesViewAllModule.decorators = [
     { type: NgModule, args: [{
+                declarations: [EntityFileFormComponent, EntityFilesViewAllComponent],
                 imports: [
                     CommonModule,
                     FormsModule,
+                    ReactiveFormsModule,
+                    FlexLayoutModule,
+                    FileDropperModule,
+                    DocumentViewerModule,
+                    InfiniteScrollModule,
+                    ActionPopupModule,
+                    MaterialModule,
+                    TechlifyTaggerTagFormFieldModule,
+                    SearchableSelectorModule
                 ],
-                declarations: [
-                    NumItemsSelector, NumberSelector,
+                exports: [
+                    EntityFilesViewAllComponent
                 ],
-                exports: [NumItemsSelector, NumberSelector]
-            },] }
-];
-
-const routes = [];
-class TimelineFilterRoutingModule {
-}
-TimelineFilterRoutingModule.decorators = [
-    { type: NgModule, args: [{
-                imports: [RouterModule.forChild(routes)],
-                exports: [RouterModule]
+                entryComponents: [EntityFileFormComponent]
+            },] }
+];
+
+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;
+        }
+        this.hideToggle = false;
+        if (this.isCollapsed == true) {
+            this.currentText = this.text.substring(0, this.maxLength) + "...";
+        }
+        else if (this.isCollapsed == false) {
+            this.currentText = this.text;
+        }
+    }
+}
+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}"]
+            },] }
+];
+ReadMoreComponent.ctorParameters = () => [];
+ReadMoreComponent.propDecorators = {
+    text: [{ type: Input }],
+    maxLength: [{ type: Input }]
+};
+
+class ReadMoreModule {
+}
+ReadMoreModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [ReadMoreComponent],
+                imports: [
+                    CommonModule,
+                    MaterialModule,
+                    FlexLayoutModule
+                ],
+                exports: [
+                    ReadMoreComponent
+                ]
+            },] }
+];
+
+class NoteModule {
+}
+NoteModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [
+                    NoteListComponent,
+                    NoteFormComponent,
+                    CommentFormComponent,
+                ],
+                imports: [
+                    CommonModule,
+                    ReactiveFormsModule,
+                    InfiniteScrollModule,
+                    FlexLayoutModule,
+                    ActionPopupModule,
+                    MaterialModule,
+                    ReadMoreModule
+                ],
+                exports: [
+                    NoteListComponent
+                ],
+                entryComponents: [NoteFormComponent]
+            },] }
+];
+
+class UtilityModule {
+}
+UtilityModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [
+                    CommonModule,
+                    FormsModule,
+                ],
+                declarations: [
+                    NumItemsSelector, NumberSelector,
+                ],
+                exports: [NumItemsSelector, NumberSelector]
+            },] }
+];
+
+const routes = [];
+class TimelineFilterRoutingModule {
+}
+TimelineFilterRoutingModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [RouterModule.forChild(routes)],
+                exports: [RouterModule]
             },] }
 ];
 
@@ -6087,295 +6569,6 @@ LoginHistoryForUserModule.decorators = [
             },] }
 ];
 
-class TechlifyTaggerTagFormConfigModel {
-    constructor() {
-        this.selectable = true;
-        this.removable = true;
-        this.separatorKeysCodes = [ENTER, COMMA];
-        this.placeholder = 'New Tag..';
-        this.apiUrl = 'api/techlify-tagger-tags';
-        this.createApiUrl = 'api/techlify-tagger-tags';
-        this.isCreateable = true;
-        this.isCacheTags = false;
-        this.isSingle = false;
-    }
-}
-
-var TechlifyTaggerTagFormFieldComponent_1;
-let TechlifyTaggerTagFormFieldComponent = TechlifyTaggerTagFormFieldComponent_1 = class TechlifyTaggerTagFormFieldComponent {
-    constructor(_focusMonitor, _elementRef, httpService, _formField, ngControl) {
-        this._focusMonitor = _focusMonitor;
-        this._elementRef = _elementRef;
-        this.httpService = httpService;
-        this._formField = _formField;
-        this.ngControl = ngControl;
-        this.stateChanges = new Subject();
-        this.focused = false;
-        this.controlType = 'techlify-tagger-form-field';
-        this.id = `techlify-tagger-form-field-${TechlifyTaggerTagFormFieldComponent_1.nextId++}`;
-        this.onChange = (_) => { };
-        this.onTouched = () => { };
-        this.tagInputCtrl = new FormControl();
-        /**Pass the configuration for Techlify Tagger */
-        this.config = new TechlifyTaggerTagFormConfigModel();
-        /**Pass the default list of tags */
-        this._allTags = [];
-        /**Pass the Categories to filter for a model */
-        this.categories = [];
-        this._required = false;
-        this._disabled = false;
-        this._value = [];
-        this.tagInputCtrl.valueChanges
-            .subscribe(filterValue => {
-            this.filterString = filterValue;
-        });
-        //Set Focus Monitor
-        _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;
-        }
-    }
-    get allTags() {
-        return this._allTags;
-    }
-    set allTags(value) {
-        this._allTags = value;
-    }
-    get tags() {
-        return this.allTags.filter(x => this.value.some(y => y == x.id));
-    }
-    //Default Getter and Setters for a Form Field Implementation
-    get empty() {
-        return this.value.length == 0;
-    }
-    get shouldLabelFloat() {
-        return this.focused || !this.empty || this.tagInputCtrl.value;
-    }
-    get required() {
-        return this._required;
-    }
-    set required(value) {
-        this._required = coerceBooleanProperty(value);
-        this.stateChanges.next();
-    }
-    get disabled() {
-        return this._disabled;
-    }
-    set disabled(value) {
-        this._disabled = coerceBooleanProperty(value);
-        this._disabled ? this.tagInputCtrl.disable() : this.tagInputCtrl.enable();
-        this.stateChanges.next();
-    }
-    get value() {
-        return this._value;
-    }
-    set value(tagIds) {
-        this._value = tagIds || [];
-        this.stateChanges.next();
-    }
-    get errorState() {
-        return this.tagInputCtrl.dirty && this.required && (this.value.length == 0);
-    }
-    get placeholder() {
-        return this._placeholder;
-    }
-    set placeholder(value) {
-        this._placeholder = value;
-        this.stateChanges.next();
-    }
-    ngOnInit() {
-    }
-    ngOnChanges(changes) {
-        //API to load all tags for the model type
-        if (this.allTags.length == 0) {
-            this.httpService
-                .cache(!this.config.isCacheTags)
-                .get(this.config.apiUrl, {
-                params: {
-                    categories: this.categories.join(','),
-                    perPage: '1000'
-                }
-            }).pipe(debounceTime(500), untilDestroyed(this)).subscribe((result) => {
-                this.allTags = result.data;
-            });
-        }
-        //API to load only the selected tags for the model
-        if (this.modelId && this.value.length == 0) {
-            //Model Id is passed and no tags are present, so we query db for the avilable tags for the model ID.
-            this.httpService
-                .cache(!this.config.isCacheTags)
-                .get(this.config.apiUrl, {
-                params: {
-                    categories: this.categories.join(','),
-                    model_type: this.modelType,
-                    model_id: this.modelId,
-                    perPage: '1000'
-                }
-            }).pipe(debounceTime(500), untilDestroyed(this)).subscribe((result) => {
-                this.value = ((result === null || result === void 0 ? void 0 : result.data) || []).map((x) => x.id);
-                this._handleInput();
-            });
-        }
-    }
-    init() {
-        if (this.modelId && this.allTags.length == 0) {
-            //Model Id is passed and no tags are passed, so we query db for the avilable tags for the model ID.
-            this.httpService
-                .cache(!this.config.isCacheTags)
-                .get(this.config.apiUrl, {
-                params: {
-                    categories: this.categories.join(','),
-                    model_type: this.modelType,
-                    model_id: this.modelId
-                }
-            }).pipe(untilDestroyed(this)).subscribe((result) => {
-                this.allTags = result.data;
-            });
-        }
-    }
-    get filteredTags() {
-        return this._filter();
-    }
-    setDescribedByIds(ids) {
-        // Just a empty implementation for Mat Form Field Interface
-    }
-    onContainerClick() {
-        // Just a empty implementation for Mat Form Field Interface
-    }
-    add(event) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const value = (event.value || '').trim();
-            // Add our tag
-            // Validate for single mode
-            if (!this.config.isSingle || (this.value.length === 0)) {
-                if (value && this.config.isCreateable) {
-                    const tags = this.allTags;
-                    let tag = tags.find((item) => item.title.toLowerCase() == value.toLowerCase());
-                    if (!tag) {
-                        //No tag present in the list
-                        try {
-                            const result = yield this.httpService.post(this.config.createApiUrl, {
-                                title: value,
-                                description: value,
-                                category_title: (this.categories.length > 0) ? (this.defaultCreateCategory ? this.defaultCreateCategory : this.categories[0]) : ''
-                            }).toPromise();
-                            tag = result.item;
-                        }
-                        catch (error) {
-                            return;
-                        }
-                        this.allTags.push(tag);
-                    }
-                    else {
-                        //Optionally clean the existing value, to avoid duplicate
-                        this.remove(tag);
-                    }
-                    this.value.push(tag.id);
-                    this._handleInput();
-                }
-            }
-            // Clear the input value
-            event.input.value = '';
-            this.tagInputCtrl.setValue(null);
-        });
-    }
-    remove(tag) {
-        this.value = this.value.filter(x => x !== tag.id);
-        this._handleInput();
-    }
-    selected(event) {
-        // Validate for single mode
-        if (!this.config.isSingle || (this.value.length === 0)) {
-            //Clean the existing value, to avoid duplicate
-            this.remove({ id: event.option.value });
-            this.value.push(event.option.value);
-            this._handleInput();
-        }
-        this.tagInput.nativeElement.value = '';
-        this.tagInputCtrl.setValue(null);
-    }
-    _filter() {
-        const filterValue = this.filterString ? this.filterString.toString().toLowerCase() : null;
-        const availableTags = this.allTags.filter((tag) => !this.value.some((item) => item == tag.id));
-        return filterValue ? availableTags.filter((tag) => tag.title.toLowerCase().includes(filterValue)) : availableTags;
-    }
-    writeValue(tagIds) {
-        this.value = tagIds || [];
-    }
-    registerOnChange(fn) {
-        this.onChange = fn;
-    }
-    registerOnTouched(fn) {
-        this.onTouched = fn;
-    }
-    setDisabledState(isDisabled) {
-        this.disabled = isDisabled;
-    }
-    _handleInput() {
-        this.onChange(this.value);
-    }
-    ngOnDestroy() {
-        this.stateChanges.complete();
-        this._focusMonitor.stopMonitoring(this._elementRef);
-    }
-};
-TechlifyTaggerTagFormFieldComponent.nextId = 0;
-TechlifyTaggerTagFormFieldComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'app-techlify-tagger-tag-form-field',
-                template: "<mat-chip-list #chipList aria-label=\"Tag Selection\">\n    <mat-chip *ngFor=\"let tag of tags\" [selectable]=\"config.selectable\" [removable]=\"config.removable\"\n        (removed)=\"remove(tag)\">\n        {{tag.title}}\n        <button matChipRemove *ngIf=\"config.removable\" class=\"border-0\">\n            <mat-icon class=\"mat-relative-icon\">cancel</mat-icon>\n        </button>\n    </mat-chip>\n    <input placeholder=\"{{config.isCreateable? config.placeholder:''}}\" #tagInput [formControl]=\"tagInputCtrl\"\n        [matAutocomplete]=\"auto\" [matChipInputFor]=\"chipList\"\n        [matChipInputSeparatorKeyCodes]=\"config.separatorKeysCodes\" (matChipInputTokenEnd)=\"add($event)\"\n        #trigger=\"matAutocompleteTrigger\" (click)=\"trigger.openPanel()\">\n</mat-chip-list>\n<mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"selected($event)\">\n    <mat-option *ngFor=\"let tag of filteredTags\" [value]=\"tag.id\">\n        {{tag.title}}\n    </mat-option>\n</mat-autocomplete>",
-                providers: [{ provide: MatFormFieldControl, useExisting: TechlifyTaggerTagFormFieldComponent_1 }],
-                styles: [".mat-relative-icon{font-size:20px;position:relative;right:7px;top:-3px}"]
-            },] }
-];
-TechlifyTaggerTagFormFieldComponent.ctorParameters = () => [
-    { type: FocusMonitor },
-    { type: ElementRef },
-    { type: HttpService },
-    { type: MatFormField, decorators: [{ type: Optional }, { type: Inject, args: [MAT_FORM_FIELD,] }] },
-    { type: NgControl, decorators: [{ type: Optional }, { type: Self }] }
-];
-TechlifyTaggerTagFormFieldComponent.propDecorators = {
-    tagInput: [{ type: ViewChild, args: ['tagInput',] }],
-    config: [{ type: Input }],
-    modelType: [{ type: Input }],
-    modelId: [{ type: Input }],
-    allTags: [{ type: Input }],
-    categories: [{ type: Input }],
-    defaultCreateCategory: [{ type: Input }],
-    required: [{ type: Input }],
-    disabled: [{ type: Input }],
-    value: [{ type: Input }],
-    placeholder: [{ type: Input }]
-};
-TechlifyTaggerTagFormFieldComponent = TechlifyTaggerTagFormFieldComponent_1 = __decorate([
-    UntilDestroy()
-], TechlifyTaggerTagFormFieldComponent);
-
-class TechlifyTaggerTagFormFieldModule {
-}
-TechlifyTaggerTagFormFieldModule.decorators = [
-    { type: NgModule, args: [{
-                declarations: [
-                    TechlifyTaggerTagFormFieldComponent
-                ],
-                imports: [
-                    CommonModule,
-                    MaterialModule,
-                    FlexLayoutModule,
-                    MatAutocompleteModule,
-                    ReactiveFormsModule
-                ],
-                exports: [TechlifyTaggerTagFormFieldComponent]
-            },] }
-];
-
 var TechlifyTaggerTagSelectorComponent_1;
 let TechlifyTaggerTagSelectorComponent = TechlifyTaggerTagSelectorComponent_1 = class TechlifyTaggerTagSelectorComponent {
     constructor(_focusMonitor, _elementRef, httpService, _formField, ngControl) {
@@ -6875,5 +7068,5 @@ TechlifyFeatureModule.decorators = [
  * Generated bundle index. Do not edit.
  */
 
-export { ActionPopup, ActionPopupComponent, ActionPopupModule, AlertService, ApiPrefixInterceptor, AuditLogForModelComponent, AuditLogForModelModule, AuditLogForModelRoutingModule, AuditLogListComponent, AuditLogListFilterComponent, AuditLogListFilterModule, AuditLogListFilterRoutingModule, AuditLogListModule, AuditLogListRoutingModule, AuditLogModule, AuditLogRoutingModule, AuditLogViewComponent, AuditLogViewModelComponent, AuditLogViewModelModule, AuditLogViewModelRoutingModule, AuditLogViewModule, AuditLogViewRoutingModule, AuditLogsViewModelComponent, AuditLogsViewModelModule, AuditLogsViewModelRoutingModule, AuthenticationGuard, AuthenticationService, CacheInterceptor, CommentFormComponent, ConfigService, CoreModule, CredentialsService, DataManager, DataTable, DataTableComponent, DataTableModule, DateUtils, DateValidator, DocumentViewerComponent, DocumentViewerModule, EmailSubscriptionForUserComponent, EmailSubscriptionForUserModule, EmailSubscriptionForUserRoutingModule, EmailSubscriptionModule, EmailSubscriptionRoutingModule, EmailSubscriptionTypeFormComponent, EmailSubscriptionTypeFormModule, EmailSubscriptionTypeFormRoutingModule, EmailSubscriptionTypeListComponent, EmailSubscriptionTypeListModule, EmailSubscriptionTypeListRoutingModule, EmailSubscriptionTypeModule, EmailSubscriptionTypeRoutingModule, EmailSubscriptionUserFormComponent, EmailSubscriptionUserFormModule, EmailSubscriptionUserFormRoutingModule, EmailSubscriptionUserListComponent, EmailSubscriptionUserListFilterComponent, EmailSubscriptionUserListFilterModule, EmailSubscriptionUserListFilterRoutingModule, EmailSubscriptionUserListModule, EmailSubscriptionUserListRoutingModule, EmailSubscriptionUserModule, EmailSubscriptionUserRoutingModule, EntityFileFormComponent, EntityFilesViewAllComponent, EntityFilesViewAllModule, ErrorHandlerInterceptor, ErrorHandlerService, ErrorSnackComponent, ExportExcelButtonComponent, ExportExcelModule, FileDropperComponent, FileDropperConfig, FileDropperModule, FormValidatorService, HTTP_DYNAMIC_INTERCEPTORS, HttpCacheService, HttpService, ImportCsvComponent, ImportCsvModule, LoaderComponent, LoaderModule, LogLevel, Logger, LoginHistoryForUserComponent, LoginHistoryForUserModule, LoginHistoryForUserRoutingModule, MatSelectInfiniteScrollDirective, MaterialModule, NoteFormComponent, NoteListComponent, NoteModule, NumItemsSelector, NumberSelector, PageEvent, ReadMoreComponent, ReadMoreModule, RouteReusableStrategy, SearchableSelectorComponent, SearchableSelectorModule, SnackModule, StorageService, SuccessSnackComponent, TechlifyConfig, TechlifyFeatureEnabledDirective, TechlifyFeatureListingComponent, TechlifyFeatureModule, TechlifyFeatureRoutes, TechlifyTaggerTagFormConfigModel, TechlifyTaggerTagFormFieldComponent, TechlifyTaggerTagFormFieldModule, TechlifyTaggerTagSelectorComponent, TechlifyTaggerTagSelectorModule, TechlifyUpdateHistoryModule, TechlifyUpdateModule, Timeline, TimelineFilterComponent, TimelineFilterModule, TokenInterceptor, UpdateNotifierComponent, UpdateNotifierModule, UtilityModule, ViewerConfig, calculateTimeline, esfur, estlr, esulr, SnackModule as ɵa, SuccessSnackComponent as ɵb, NumberSelector as ɵba, TimelineFilterComponent as ɵbb, TimelineFilterRoutingModule as ɵbc, LoaderComponent as ɵbd, EmailSubscriptionUserFormComponent as ɵbe, EmailSubscriptionUserListComponent as ɵbf, AuthenticationGuard as ɵbg, EmailSubscriptionUserListFilterComponent as ɵbh, EmailSubscriptionTypeFormComponent as ɵbi, EmailSubscriptionTypeListComponent as ɵbj, EmailSubscriptionForUserComponent as ɵbk, TechlifyUpdatesListComponent as ɵbl, TechlifyUpdateService as ɵbm, TechlifyUpdateRoutingModule as ɵbn, TechlifyUpdateFormModule as ɵbo, TechlifyUpdateFormComponent as ɵbp, TechlifyUpdateHistoryRoutingModule as ɵbq, TechlifyUpdateHistoryComponent as ɵbr, UpdateNotifierSnackComponent as ɵbs, UpdateViewModule as ɵbt, UpdateViewComponent as ɵbu, DataManager as ɵbv, ErrorHandlerService as ɵbw, FieldMappingComponent as ɵbx, FailedItemsListComponent as ɵby, ImportHistoryListComponent as ɵbz, ErrorSnackComponent as ɵc, ImportSuccessComponent as ɵca, DataImportComponent as ɵcb, StorageService as ɵcc, TechlifyFeatureService as ɵcd, OnOffSwitchComponent as ɵce, HTTP_DYNAMIC_INTERCEPTORS as ɵd, HttpService as ɵe, RouteReusableStrategy as ɵf, ActionPopupComponent as ɵg, ActionPopup as ɵh, DataTableComponent as ɵi, DocumentViewerComponent as ɵj, EntityFileFormComponent as ɵk, FormValidatorService as ɵl, EntityFileService as ɵm, AlertService as ɵn, EntityFilesViewAllComponent as ɵo, FileDropperComponent as ɵp, NoteListComponent as ɵq, NoteService as ɵr, NoteFormComponent as ɵs, CommentFormComponent as ɵt, CredentialsService as ɵu, ConfigService as ɵv, TechlifyConfig as ɵw, SearchableSelectorComponent as ɵx, MatSelectInfiniteScrollDirective as ɵy, NumItemsSelector as ɵz };
+export { ActionPopup, ActionPopupComponent, ActionPopupModule, AlertService, ApiPrefixInterceptor, AuditLogForModelComponent, AuditLogForModelModule, AuditLogForModelRoutingModule, AuditLogListComponent, AuditLogListFilterComponent, AuditLogListFilterModule, AuditLogListFilterRoutingModule, AuditLogListModule, AuditLogListRoutingModule, AuditLogModule, AuditLogRoutingModule, AuditLogViewComponent, AuditLogViewModelComponent, AuditLogViewModelModule, AuditLogViewModelRoutingModule, AuditLogViewModule, AuditLogViewRoutingModule, AuditLogsViewModelComponent, AuditLogsViewModelModule, AuditLogsViewModelRoutingModule, AuthenticationGuard, AuthenticationService, CacheInterceptor, CommentFormComponent, ConfigService, CoreModule, CredentialsService, DataManager, DataTable, DataTableComponent, DataTableModule, DateUtils, DateValidator, DocumentViewerComponent, DocumentViewerModule, EmailSubscriptionForUserComponent, EmailSubscriptionForUserModule, EmailSubscriptionForUserRoutingModule, EmailSubscriptionModule, EmailSubscriptionRoutingModule, EmailSubscriptionTypeFormComponent, EmailSubscriptionTypeFormModule, EmailSubscriptionTypeFormRoutingModule, EmailSubscriptionTypeListComponent, EmailSubscriptionTypeListModule, EmailSubscriptionTypeListRoutingModule, EmailSubscriptionTypeModule, EmailSubscriptionTypeRoutingModule, EmailSubscriptionUserFormComponent, EmailSubscriptionUserFormModule, EmailSubscriptionUserFormRoutingModule, EmailSubscriptionUserListComponent, EmailSubscriptionUserListFilterComponent, EmailSubscriptionUserListFilterModule, EmailSubscriptionUserListFilterRoutingModule, EmailSubscriptionUserListModule, EmailSubscriptionUserListRoutingModule, EmailSubscriptionUserModule, EmailSubscriptionUserRoutingModule, EntityFileFormComponent, EntityFilesViewAllComponent, EntityFilesViewAllModule, ErrorHandlerInterceptor, ErrorHandlerService, ErrorSnackComponent, ExportExcelButtonComponent, ExportExcelModule, FileDropperComponent, FileDropperConfig, FileDropperModule, FormValidatorService, HTTP_DYNAMIC_INTERCEPTORS, HttpCacheService, HttpService, ImportCsvComponent, ImportCsvModule, LoaderComponent, LoaderModule, LogLevel, Logger, LoginHistoryForUserComponent, LoginHistoryForUserModule, LoginHistoryForUserRoutingModule, MatSelectInfiniteScrollDirective, MaterialModule, NoteFormComponent, NoteListComponent, NoteModule, NumItemsSelector, NumberSelector, PageEvent, ReadMoreComponent, ReadMoreModule, RouteReusableStrategy, SearchableSelectorComponent, SearchableSelectorModule, SnackModule, StorageService, SuccessSnackComponent, TechlifyConfig, TechlifyFeatureEnabledDirective, TechlifyFeatureListingComponent, TechlifyFeatureModule, TechlifyFeatureRoutes, TechlifyFormComponentInterface, TechlifyListingControllerInterface, TechlifyServiceBaseClass, TechlifyTaggerTagFormConfigModel, TechlifyTaggerTagFormFieldComponent, TechlifyTaggerTagFormFieldModule, TechlifyTaggerTagSelectorComponent, TechlifyTaggerTagSelectorModule, TechlifyUpdateHistoryModule, TechlifyUpdateModule, Timeline, TimelineFilterComponent, TimelineFilterModule, TokenInterceptor, UpdateNotifierComponent, UpdateNotifierModule, UtilityModule, ViewerConfig, calculateTimeline, esfur, estlr, esulr, SnackModule as ɵa, SuccessSnackComponent as ɵb, NumberSelector as ɵba, TimelineFilterComponent as ɵbb, TimelineFilterRoutingModule as ɵbc, LoaderComponent as ɵbd, EmailSubscriptionUserFormComponent as ɵbe, EmailSubscriptionUserListComponent as ɵbf, AuthenticationGuard as ɵbg, EmailSubscriptionUserListFilterComponent as ɵbh, EmailSubscriptionTypeFormComponent as ɵbi, EmailSubscriptionTypeListComponent as ɵbj, EmailSubscriptionForUserComponent as ɵbk, TechlifyUpdatesListComponent as ɵbl, TechlifyUpdateService as ɵbm, TechlifyUpdateRoutingModule as ɵbn, TechlifyUpdateFormModule as ɵbo, TechlifyUpdateFormComponent as ɵbp, TechlifyUpdateHistoryRoutingModule as ɵbq, TechlifyUpdateHistoryComponent as ɵbr, UpdateNotifierSnackComponent as ɵbs, UpdateViewModule as ɵbt, UpdateViewComponent as ɵbu, DataManager as ɵbv, ErrorHandlerService as ɵbw, FieldMappingComponent as ɵbx, FailedItemsListComponent as ɵby, ImportHistoryListComponent as ɵbz, ErrorSnackComponent as ɵc, ImportSuccessComponent as ɵca, DataImportComponent as ɵcb, StorageService as ɵcc, TechlifyFeatureService as ɵcd, OnOffSwitchComponent as ɵce, HTTP_DYNAMIC_INTERCEPTORS as ɵd, HttpService as ɵe, RouteReusableStrategy as ɵf, ActionPopupComponent as ɵg, ActionPopup as ɵh, DataTableComponent as ɵi, DocumentViewerComponent as ɵj, EntityFileFormComponent as ɵk, FormValidatorService as ɵl, EntityFileService as ɵm, AlertService as ɵn, EntityFilesViewAllComponent as ɵo, FileDropperComponent as ɵp, SearchableSelectorComponent as ɵq, MatSelectInfiniteScrollDirective as ɵr, NoteListComponent as ɵs, NoteService as ɵt, NoteFormComponent as ɵu, CommentFormComponent as ɵv, CredentialsService as ɵw, ConfigService as ɵx, TechlifyConfig as ɵy, NumItemsSelector as ɵz };
 //# sourceMappingURL=ngx-techlify-core.js.map