ngx-techlify-core 11.4.9 → 11.5.0

package/bundles/ngx-techlify-core.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/material/dialog'), require('@angular/material/table'), require('@angular/material/sort'), require('@ngneat/until-destroy'), require('@angular/common'), require('@angular/forms'), require('@angular/common/http'), require('rxjs'), require('rxjs/operators'), require('@angular/material/snack-bar'), require('@angular/cdk/a11y'), require('@angular/cdk/coercion'), require('@angular/material/form-field'), require('@angular/material/select'), require('moment'), require('@angular/material/icon'), require('@angular/router'), require('@angular/material/tooltip'), require('@angular/material/core'), require('@angular/material/button'), require('@angular/material/checkbox'), require('@angular/material/input'), require('@angular/material/menu'), require('@angular/material/progress-spinner'), require('@angular/material/card'), require('@angular/material/divider'), require('@angular/material/chips'), require('@angular/material/datepicker'), require('@angular/material/list'), require('@angular/material/button-toggle'), require('@angular/flex-layout'), require('ngx-infinite-scroll'), require('ngx-doc-viewer'), require('@angular/cdk/keycodes'), require('@angular/material/autocomplete'), require('ngx-editor'), require('xlsx'), require('@angular/platform-browser'), require('jsondiffpatch'), require('@angular/material/slide-toggle')) :
-    typeof define === 'function' && define.amd ? define('ngx-techlify-core', ['exports', '@angular/core', '@angular/material/dialog', '@angular/material/table', '@angular/material/sort', '@ngneat/until-destroy', '@angular/common', '@angular/forms', '@angular/common/http', 'rxjs', 'rxjs/operators', '@angular/material/snack-bar', '@angular/cdk/a11y', '@angular/cdk/coercion', '@angular/material/form-field', '@angular/material/select', 'moment', '@angular/material/icon', '@angular/router', '@angular/material/tooltip', '@angular/material/core', '@angular/material/button', '@angular/material/checkbox', '@angular/material/input', '@angular/material/menu', '@angular/material/progress-spinner', '@angular/material/card', '@angular/material/divider', '@angular/material/chips', '@angular/material/datepicker', '@angular/material/list', '@angular/material/button-toggle', '@angular/flex-layout', 'ngx-infinite-scroll', 'ngx-doc-viewer', '@angular/cdk/keycodes', '@angular/material/autocomplete', 'ngx-editor', 'xlsx', '@angular/platform-browser', 'jsondiffpatch', '@angular/material/slide-toggle'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global['ngx-techlify-core'] = {}, global.ng.core, global.ng.material.dialog, global.ng.material.table, global.ng.material.sort, global['@ngneat/until-destroy'], global.ng.common, global.ng.forms, global.ng.common.http, global.rxjs, global.rxjs.operators, global.ng.material.snackBar, global.ng.cdk.a11y, global.ng.cdk.coercion, global.ng.material.formField, global.ng.material.select, global.moment, global.ng.material.icon, global.ng.router, global.ng.material.tooltip, global.ng.material.core, global.ng.material.button, global.ng.material.checkbox, global.ng.material.input, global.ng.material.menu, global.ng.material.progressSpinner, global.ng.material.card, global.ng.material.divider, global.ng.material.chips, global.ng.material.datepicker, global.ng.material.list, global.ng.material.buttonToggle, global.ng.flexLayout, global['ngx-infinite-scroll'], global['ngx-doc-viewer'], global.ng.cdk.keycodes, global.ng.material.autocomplete, global['ngx-editor'], global.xlsx, global.ng.platformBrowser, global.jsondiffpatch, global.ng.material.slideToggle));
-}(this, (function (exports, i0, dialog, table, sort, untilDestroy, common, forms, i1$1, rxjs, operators, i1, a11y, coercion, formField, select, moment_, icon, i1$2, tooltip, core, button, checkbox, input, menu, progressSpinner, card, divider, chips, datepicker, list, buttonToggle, flexLayout, ngxInfiniteScroll, ngxDocViewer, keycodes, autocomplete, ngxEditor, XLSX, platformBrowser, jsondiffpatch, slideToggle) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/material/dialog'), require('@angular/material/table'), require('@angular/material/sort'), require('@ngneat/until-destroy'), require('@angular/common'), require('@angular/forms'), require('@angular/common/http'), require('rxjs'), require('rxjs/operators'), require('@angular/material/snack-bar'), require('@angular/cdk/a11y'), require('@angular/cdk/coercion'), require('@angular/material/form-field'), require('@angular/material/select'), require('moment'), require('@angular/material/icon'), require('@angular/router'), require('@angular/material/tooltip'), require('@angular/material/core'), require('@angular/material/button'), require('@angular/material/checkbox'), require('@angular/material/input'), require('@angular/material/menu'), require('@angular/material/progress-spinner'), require('@angular/material/card'), require('@angular/material/divider'), require('@angular/material/chips'), require('@angular/material/datepicker'), require('@angular/material/list'), require('@angular/material/button-toggle'), require('@angular/material/sidenav'), require('@angular/flex-layout'), require('ngx-infinite-scroll'), require('ngx-doc-viewer'), require('@angular/cdk/keycodes'), require('@angular/material/autocomplete'), require('ngx-editor'), require('xlsx'), require('@angular/platform-browser'), require('jsondiffpatch'), require('@angular/material/slide-toggle')) :
+    typeof define === 'function' && define.amd ? define('ngx-techlify-core', ['exports', '@angular/core', '@angular/material/dialog', '@angular/material/table', '@angular/material/sort', '@ngneat/until-destroy', '@angular/common', '@angular/forms', '@angular/common/http', 'rxjs', 'rxjs/operators', '@angular/material/snack-bar', '@angular/cdk/a11y', '@angular/cdk/coercion', '@angular/material/form-field', '@angular/material/select', 'moment', '@angular/material/icon', '@angular/router', '@angular/material/tooltip', '@angular/material/core', '@angular/material/button', '@angular/material/checkbox', '@angular/material/input', '@angular/material/menu', '@angular/material/progress-spinner', '@angular/material/card', '@angular/material/divider', '@angular/material/chips', '@angular/material/datepicker', '@angular/material/list', '@angular/material/button-toggle', '@angular/material/sidenav', '@angular/flex-layout', 'ngx-infinite-scroll', 'ngx-doc-viewer', '@angular/cdk/keycodes', '@angular/material/autocomplete', 'ngx-editor', 'xlsx', '@angular/platform-browser', 'jsondiffpatch', '@angular/material/slide-toggle'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global['ngx-techlify-core'] = {}, global.ng.core, global.ng.material.dialog, global.ng.material.table, global.ng.material.sort, global['@ngneat/until-destroy'], global.ng.common, global.ng.forms, global.ng.common.http, global.rxjs, global.rxjs.operators, global.ng.material.snackBar, global.ng.cdk.a11y, global.ng.cdk.coercion, global.ng.material.formField, global.ng.material.select, global.moment, global.ng.material.icon, global.ng.router, global.ng.material.tooltip, global.ng.material.core, global.ng.material.button, global.ng.material.checkbox, global.ng.material.input, global.ng.material.menu, global.ng.material.progressSpinner, global.ng.material.card, global.ng.material.divider, global.ng.material.chips, global.ng.material.datepicker, global.ng.material.list, global.ng.material.buttonToggle, global.ng.material.sidenav, global.ng.flexLayout, global['ngx-infinite-scroll'], global['ngx-doc-viewer'], global.ng.cdk.keycodes, global.ng.material.autocomplete, global['ngx-editor'], global.xlsx, global.ng.platformBrowser, global.jsondiffpatch, global.ng.material.slideToggle));
+}(this, (function (exports, i0, dialog, table, sort, untilDestroy, common, forms, i1$1, rxjs, operators, i1, a11y, coercion, formField, select, moment_, icon, i1$2, tooltip, core, button, checkbox, input, menu, progressSpinner, card, divider, chips, datepicker, list, buttonToggle, sidenav, flexLayout, ngxInfiniteScroll, ngxDocViewer, keycodes, autocomplete, ngxEditor, XLSX, platformBrowser, jsondiffpatch, slideToggle) { 'use strict';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -1570,6 +1570,9 @@
                 .skipHeader()
                 .post("api/entity-files-upload", formData).toPromise();
         };
+        EntityFileService.prototype.bulkUpdate = function (model) {
+            return this.http.post("api/entity-files/bulk-update", model).toPromise();
+        };
         return EntityFileService;
     }());
     EntityFileService.ɵprov = i0.ɵɵdefineInjectable({ factory: function EntityFileService_Factory() { return new EntityFileService(i0.ɵɵinject(HttpService)); }, token: EntityFileService, providedIn: "root" });
@@ -1774,14 +1777,18 @@
     ]; };
 
     exports.ɵo = /** @class */ (function () {
-        function EntityFilesViewAllComponent(entityFileService, location, alertService, dialog, fb) {
+        function EntityFilesViewAllComponent(entityFileService, location, alertService, dialog, fb, errorHandler) {
             this.entityFileService = entityFileService;
             this.location = location;
             this.alertService = alertService;
             this.dialog = dialog;
             this.fb = fb;
+            this.errorHandler = errorHandler;
             this.viewOnly = false;
             this.allowMultipleFiles = false;
+            this.allowBulkUpdate = false;
+            this.documentIds = [];
+            this.isAllSelected = false;
             /**
              * Should we allow tagging entity-files?
              */
@@ -1801,10 +1808,17 @@
             this.perPage = 25;
             this.lastPage = 0;
             this.fileList = [];
+            this.dataSource = new table.MatTableDataSource();
+            this.isReload = false;
             this.filterFormGroup = this.fb.group({
                 title: [""],
                 tag_ids: [""]
             });
+            this.updateRowForm = this.fb.group({
+                title: [''],
+                details: [''],
+                tag_ids: [''],
+            });
         }
         EntityFilesViewAllComponent.prototype.ngOnInit = function () {
             //File dropper config
@@ -1846,6 +1860,9 @@
             if (!this.viewOnly) {
                 this.displayedColumns.push('actions');
             }
+            if (this.allowBulkUpdate) {
+                this.displayedColumns.push('select');
+            }
         };
         EntityFilesViewAllComponent.prototype.listenRoutes = function () {
             var _this = this;
@@ -1871,6 +1888,7 @@
                             result = _a.sent();
                             this.lastPage = result.last_page || this.page;
                             this.entityFiles = this.entityFiles.concat(result.data);
+                            this.dataSource = new table.MatTableDataSource(this.entityFiles);
                             this.isWorking = false;
                             return [2 /*return*/];
                     }
@@ -1898,6 +1916,7 @@
                         files = __spread(this.entityFiles);
                         files.push(result);
                         this.entityFiles = files;
+                        this.dataSource = new table.MatTableDataSource(this.entityFiles);
                     }
                     return [2 /*return*/];
                 });
@@ -1957,6 +1976,8 @@
         };
         EntityFilesViewAllComponent.prototype.reload = function () {
             this.entityFiles = [];
+            this.documentIds = [];
+            this.isReload = false;
             this.page = 1;
             if (!this.isWorking) {
                 this.fetchEntityFilesDetails();
@@ -2007,12 +2028,74 @@
                 });
             });
         };
+        EntityFilesViewAllComponent.prototype.selectAll = function () {
+            var _this = this;
+            this.documentIds = [];
+            this.entityFiles.map(function (employee) {
+                employee.is_selected = _this.isAllSelected;
+                if (_this.isAllSelected) {
+                    _this.documentIds.push(employee.id);
+                }
+            });
+            this.dataSource = new table.MatTableDataSource(this.entityFiles);
+        };
+        EntityFilesViewAllComponent.prototype.employeeListModified = function (event, employee) {
+            this.isAllSelected = false;
+            if (event.checked) {
+                this.documentIds.push(employee.id);
+            }
+            else {
+                this.documentIds = this.documentIds.filter(function (employeeData) { return employeeData != employee.id; });
+            }
+        };
+        EntityFilesViewAllComponent.prototype.unCheckAll = function () {
+            this.isAllSelected = false;
+            this.documentIds = [];
+            this.entityFiles.map(function (employee) {
+                employee.is_selected = false;
+            });
+            this.dataSource = new table.MatTableDataSource(this.entityFiles);
+        };
+        EntityFilesViewAllComponent.prototype.resetFieldValueOfRow = function (field, event) {
+            event.stopPropagation();
+            this.updateRowForm.get(field).setValue("");
+        };
+        EntityFilesViewAllComponent.prototype.bulkUpdate = function (fieldName) {
+            return __awaiter(this, void 0, void 0, function () {
+                var data, error_1;
+                var _this = this;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            data = this.updateRowForm.value;
+                            this.isReload = this.isWorking = true;
+                            data.field_name = fieldName;
+                            data.document_ids = this.documentIds;
+                            _a.label = 1;
+                        case 1:
+                            _a.trys.push([1, 3, , 4]);
+                            return [4 /*yield*/, this.entityFileService.bulkUpdate(data).then(function (res) {
+                                    _this.alertService.addAlert("Successfully updated", "success");
+                                    _this.isWorking = false;
+                                })];
+                        case 2:
+                            _a.sent();
+                            return [3 /*break*/, 4];
+                        case 3:
+                            error_1 = _a.sent();
+                            this.errorHandler.handleError(error_1);
+                            return [3 /*break*/, 4];
+                        case 4: return [2 /*return*/];
+                    }
+                });
+            });
+        };
         return EntityFilesViewAllComponent;
     }());
     exports.ɵo.decorators = [
         { type: i0.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>\n        <div 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        </div>\n      </mat-card-title>\n      <mat-card-subtitle>\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 && !isWorking\">\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-subtitle>\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\">\n              <app-read-more [text]=\"element.details\" [maxLength]=\"50\"></app-read-more>\n            </td>\n          </ng-container>\n\n          <!-- File size Column -->\n          <ng-container matColumnDef=\"file_size\">\n            <th mat-header-cell *matHeaderCellDef> File Size </th>\n            <td mat-cell *matCellDef=\"let element\"> {{ sizeOf(element.file_size)}} </td>\n          </ng-container>\n\n          <!-- Tags Column -->\n          <ng-container matColumnDef=\"tag\">\n            <th mat-header-cell *matHeaderCellDef> Tag </th>\n            <td mat-cell *matCellDef=\"let element\" class=\"p-1\">\n              <mat-chip-list aria-label=\"Tags\">\n                <mat-chip *ngFor=\"let taggerModel of element.tags\">\n                  {{taggerModel?.tag?.title}}\n                </mat-chip>\n              </mat-chip-list>\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",
+                    template: "<mat-drawer-container>\n  <mat-drawer style=\"z-index: 1;\" fxLayout=\"column\" [fxHide]=\"!this.documentIds.length\" fxHide.xs fxHide.sm fxHide.lt-md\n    mode=\"side\" position=\"end\" opened>\n    <mat-card class=\"update_card\" *ngIf=\"this.documentIds.length\">\n      <mat-card-header>\n        <mat-card-title>\n          <div mat-dialog-title class=\"mt-2 ml-2 text-center\">\n            <div>Update Selected Rows</div>\n          </div>\n        </mat-card-title>\n      </mat-card-header>\n      <mat-card-content fxLayout=\"column\">\n        <form [formGroup]=\"updateRowForm\">\n          <div fxLayout=\"column\">\n\n            <mat-form-field fxFlex=\"100%\" class=\"px-1\">\n              <input matInput formControlName=\"title\" placeholder=\"Title\" autocomplete=\"off\" />\n              <button mat-button *ngIf=\"updateRowForm.get('title').value || updateRowForm.get('title').value===0\"\n                matSuffix mat-icon-button style=\"color:red\" (click)=\"resetFieldValueOfRow('title', $event)\">\n                <mat-icon>close</mat-icon>\n              </button>\n              <button mat-button matSuffix mat-icon-button type=\"button\" style=\"color:green\" *ngIf=\"(updateRowForm.get('title').value || updateRowForm.get('title').value===0)\n                && updateRowForm.get('title').valid\" (click)=\"bulkUpdate('title')\">\n                <mat-icon>done</mat-icon>\n              </button>\n            </mat-form-field>\n\n            <mat-form-field fxFlex=\"100%\" class=\"px-1\">\n              <textarea matInput formControlName=\"details\" placeholder=\"Details\" autocomplete=\"off\"></textarea>\n              <button mat-button *ngIf=\"updateRowForm.get('details').value || updateRowForm.get('details').value===0\"\n                matSuffix mat-icon-button style=\"color:red\" (click)=\"resetFieldValueOfRow('details', $event)\">\n                <mat-icon>close</mat-icon>\n              </button>\n              <button mat-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 mat-button *ngIf=\"updateRowForm.get('tag_ids').value || updateRowForm.get('tag_ids').value===0\"\n                  matSuffix mat-icon-button style=\"color:red\" (click)=\"resetFieldValueOfRow('tag_ids', $event)\">\n                  <mat-icon>close</mat-icon>\n                </button>\n                <button mat-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  </mat-drawer>\n\n  <mat-drawer-content>\n    <div class=\"mat-typography\" *ngIf=\"!displayMode\">\n      <div fxLayout=\"row\" fxLayoutGap=\"1rem\">\n        <mat-card [fxFlex]=\"this.documentIds.length ? '100%' : '70%'\">\n          <mat-card-title>\n            <div 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            </div>\n          </mat-card-title>\n          <mat-card-subtitle>\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\"\n                  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 && !isWorking\">\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              <button mat-icon-button (click)=\"reload()\" *ngIf=\"isReload\" type=\"button\" matTooltip=\"Refresh\">\n                <mat-icon>\n                  <span class=\"material-icons\">\n                    refresh\n                  </span>\n                </mat-icon>\n              </button>\n            </form>\n          </mat-card-subtitle>\n          <mat-card-content class=\"entity-file-card\">\n            <table mat-table [dataSource]=\"dataSource\" class=\"w-100\" matSort multiTemplateDataRows infiniteScroll\n              [infiniteScrollDistance]=\"1.5\" [infiniteScrollThrottle]=\"50\" (scrolled)=\"onScroll()\">\n\n              <!-- Select Column -->\n              <ng-container matColumnDef=\"select\">\n                <th mat-header-cell *matHeaderCellDef style=\"width:30px\">\n                  <mat-checkbox name=\"employee\" [(ngModel)]=\"isAllSelected\" (change)=\"selectAll()\">\n                  </mat-checkbox>\n                </th>\n                <td mat-cell *matCellDef=\"let element\" style=\"width:30px\">\n                  <mat-checkbox name=\"employee[{{element?.id}}]\" (click)=\"$event.stopPropagation()\"\n                    [(ngModel)]=\"element.is_selected\" (change)=\"employeeListModified($event, element)\"\n                    [disabled]=\"!entityFiles.length\">\n                  </mat-checkbox>\n                </td>\n              </ng-container>\n\n              <!-- Index Column -->\n              <ng-container matColumnDef=\"index\">\n                <th mat-header-cell *matHeaderCellDef> # </th>\n                <td mat-cell *matCellDef=\"let element; let i = dataIndex\"> {{ i+1 }} </td>\n              </ng-container>\n\n              <!-- Title Column -->\n              <ng-container matColumnDef=\"title\">\n                <th mat-header-cell *matHeaderCellDef> Title </th>\n                <td mat-cell *matCellDef=\"let element\">\n                  <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\">\n                  <app-read-more [text]=\"element.details\" [maxLength]=\"50\"></app-read-more>\n                </td>\n              </ng-container>\n\n              <!-- File size Column -->\n              <ng-container matColumnDef=\"file_size\">\n                <th mat-header-cell *matHeaderCellDef> File Size </th>\n                <td mat-cell *matCellDef=\"let element\"> {{ sizeOf(element.file_size)}} </td>\n              </ng-container>\n\n              <!-- Tags Column -->\n              <ng-container matColumnDef=\"tag\">\n                <th mat-header-cell *matHeaderCellDef> Tag </th>\n                <td mat-cell *matCellDef=\"let element\" class=\"p-1\">\n                  <mat-chip-list aria-label=\"Tags\">\n                    <mat-chip *ngFor=\"let taggerModel of element.tags\">\n                      {{taggerModel?.tag?.title}}\n                    </mat-chip>\n                  </mat-chip-list>\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%\" *ngIf=\"!this.documentIds.length\">\n          <app-file-dropper [config]=\"fileConfig\" (fileChanged)=\"fileChanged($event)\" [fileArray]=\"fileList\">\n          </app-file-dropper>\n        </section>\n      </div>\n    </div>\n  </mat-drawer-content>\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: [""]
                 },] }
     ];
@@ -2021,7 +2104,8 @@
         { type: common.Location },
         { type: AlertService },
         { type: dialog.MatDialog },
-        { type: forms.FormBuilder }
+        { type: forms.FormBuilder },
+        { type: ErrorHandlerService }
     ]; };
     exports.ɵo.propDecorators = {
         entityId: [{ type: i0.Input }],
@@ -2031,6 +2115,7 @@
         hideTitleAndDetails: [{ type: i0.Input }],
         displayMode: [{ type: i0.Input }],
         allowMultipleFiles: [{ type: i0.Input }],
+        allowBulkUpdate: [{ type: i0.Input }],
         useTechlifyTags: [{ type: i0.Input }],
         title: [{ type: i0.Input }]
     };
@@ -2554,7 +2639,7 @@
     };
 
     var SearchableSelectorComponent_1;
-    exports.ɵq = SearchableSelectorComponent_1 = /** @class */ (function () {
+    exports.ɵs = SearchableSelectorComponent_1 = /** @class */ (function () {
         function SearchableSelectorComponent(formBuilder, _focusMonitor, http, _elementRef, dialog, ngControl) {
             var _this = this;
             this._focusMonitor = _focusMonitor;
@@ -2832,8 +2917,8 @@
         };
         return SearchableSelectorComponent;
     }());
-    exports.ɵq.nextId = 0;
-    exports.ɵq.decorators = [
+    exports.ɵs.nextId = 0;
+    exports.ɵs.decorators = [
         { type: i0.Component, args: [{
                     selector: 'app-searchable-selector',
                     template: "<div [formGroup]=\"selectorForm\" class=\"searchable-selctor-container\">\n    <mat-select formControlName=\"select_value\" focused=\"false\" [multiple]=\"multiple\" [required]=\"required\"\n        autocomplete=\"off\" (selectionChange)=\"_handleInput()\" msInfiniteScroll (infiniteScroll)=\"onScroll()\"\n        (openedChange)=\"openedChange($event)\">\n        <mat-form-field *ngIf=\"enableSearch\" class=\"p-1 w-100\">\n            <input matInput formControlName=\"search\" placeholder=\"Search...\" (keydown)=\"$event.stopPropagation();\"\n                autocomplete=\"off\">\n        </mat-form-field>\n        <div>\n            <!-- TODO:Implement scroll only for options and have search fixed -->\n            <mat-option *ngFor=\" let item of dataItems\" [value]=\"getPropertyValue(item,valueField)\">\n                {{getPropertyValue(item,titleField)}}\n            </mat-option>\n        </div>\n        <div fxlayout=\"column\" class=\"w-100\" fxLayoutAlign=\"center center\">\n            <mat-spinner class=\"my-4\" color=\"primary\" diameter=\"30\" *ngIf=\"isLoading\"></mat-spinner>\n        </div>\n    </mat-select>\n    <mat-icon *ngIf=\"add\" class=\"relative-icon\" matSuffix (click)=\"addItem($event)\">add_circle_outline</mat-icon>\n    <mat-icon *ngIf=\"edit && selectedValue\" class=\"relative-icon\" matSuffix (click)=\"editItem($event)\">edit</mat-icon>\n</div>",
@@ -2846,7 +2931,7 @@
                     styles: [".searchable-selctor-container{display:flex}.relative-icon{position:relative;top:-4px}"]
                 },] }
     ];
-    exports.ɵq.ctorParameters = function () { return [
+    exports.ɵs.ctorParameters = function () { return [
         { type: forms.FormBuilder },
         { type: a11y.FocusMonitor },
         { type: HttpService },
@@ -2854,7 +2939,7 @@
         { type: dialog.MatDialog },
         { type: forms.NgControl, decorators: [{ type: i0.Optional }, { type: i0.Self }] }
     ]; };
-    exports.ɵq.propDecorators = {
+    exports.ɵs.propDecorators = {
         valueField: [{ type: i0.Input }],
         titleField: [{ type: i0.Input }],
         apiUrl: [{ type: i0.Input }],
@@ -2881,9 +2966,9 @@
         disabled: [{ type: i0.Input }],
         value: [{ type: i0.Input }]
     };
-    exports.ɵq = SearchableSelectorComponent_1 = __decorate([
+    exports.ɵs = SearchableSelectorComponent_1 = __decorate([
         untilDestroy.UntilDestroy()
-    ], exports.ɵq);
+    ], exports.ɵs);
 
     var MatSelectInfiniteScrollDirective = /** @class */ (function () {
         function MatSelectInfiniteScrollDirective(matSelect, ngZone) {
@@ -3205,7 +3290,7 @@
     }
 
     var TimelineFilterComponent_1;
-    exports.ɵbb = TimelineFilterComponent_1 = /** @class */ (function () {
+    exports.ɵbc = TimelineFilterComponent_1 = /** @class */ (function () {
         function TimelineFilterComponent(formBuilder, ngControl, datePipe) {
             this.ngControl = ngControl;
             this.datePipe = datePipe;
@@ -3381,8 +3466,8 @@
         };
         return TimelineFilterComponent;
     }());
-    exports.ɵbb.nextId = 0;
-    exports.ɵbb.decorators = [
+    exports.ɵbc.nextId = 0;
+    exports.ɵbc.decorators = [
         { type: i0.Component, args: [{
                     selector: 'app-timeline-filter',
                     template: "<ng-container *ngIf=\"form\" [formGroup]=\"form\">\n  <mat-form-field [appearance]=\"appearance\">\n      <mat-label>{{labelText}}</mat-label>\n      <mat-select [formControl]=\"timelineValue\">\n          <mat-option *ngFor=\"let timeline of timelines\" [value]=\"timeline.value\">\n              {{timeline.viewValue}}\n          </mat-option>\n      </mat-select>\n      <button mat-button *ngIf=\"showClearbutton && timelineValue.value\" matSuffix mat-icon-button\n          (click)=\"timelineValue.setValue('')\">\n          <mat-icon>close</mat-icon>\n      </button>\n  </mat-form-field>\n\n  <ng-container *ngIf=\"showCustomDateFields\">\n      <mat-form-field [appearance]=\"appearance\">\n          <mat-label>From Date</mat-label>\n          <input matInput formControlName=\"{{dateFrom}}\" [matDatepicker]=\"fromPicker\" (click)=\"fromPicker.open()\"\n              placeholder=\"From Date\" readonly />\n          <mat-datepicker-toggle matSuffix [for]=\"fromPicker\"></mat-datepicker-toggle>\n          <mat-datepicker #fromPicker></mat-datepicker>\n          <button mat-button *ngIf=\"getFieldValue(dateFrom)\" matSuffix mat-icon-button\n              (click)=\"resetFieldValue(dateFrom)\">\n              <mat-icon>close</mat-icon>\n          </button>\n      </mat-form-field>\n\n      <mat-form-field [appearance]=\"appearance\">\n          <mat-label>To Date</mat-label>\n          <input matInput formControlName=\"{{dateTo}}\" [matDatepicker]=\"toPicker\" (click)=\"toPicker.open()\"\n              placeholder=\"To Date\" readonly />\n          <mat-datepicker-toggle matSuffix [for]=\"\"></mat-datepicker-toggle>\n          <mat-datepicker #toPicker></mat-datepicker>\n          <button mat-button *ngIf=\"getFieldValue(dateTo)\" matSuffix mat-icon-button\n              (click)=\"resetFieldValue(dateTo)\">\n              <mat-icon>close</mat-icon>\n          </button>\n      </mat-form-field>\n\n  </ng-container>\n</ng-container>\n<div *ngIf=\"!form\" [formGroup]=\"selectorForm\">\n  <mat-select formControlName=\"select_value\" focused=\"false\" [required]=\"required\"\n      autocomplete=\"off\" (selectionChange)=\"_handleInput()\">\n      <mat-option *ngFor=\"let timeline of timelines\" [value]=\"timeline?.value\">\n          {{ timeline?.viewValue }} {{ selectedRange?.show_custom_field && timeline?.value == 1 ? getDateRangeString() : '' }}\n      </mat-option>\n  </mat-select>\n  <mat-date-range-input hidden (dateChange)=\"onCustomDateChange($event)\" [rangePicker]=\"picker\">\n      <input matStartDate #customStartDate>\n      <input matEndDate (dateChange)=\"dateRangeChange(customStartDate, customEndDate)\" #customEndDate>\n  </mat-date-range-input>\n  <mat-date-range-picker #picker [touchUi]=\"touchUi\"></mat-date-range-picker>\n</div>\n",
@@ -3395,12 +3480,12 @@
                     styles: [""]
                 },] }
     ];
-    exports.ɵbb.ctorParameters = function () { return [
+    exports.ɵbc.ctorParameters = function () { return [
         { type: forms.FormBuilder },
         { type: forms.NgControl, decorators: [{ type: i0.Optional }, { type: i0.Self }] },
         { type: common.DatePipe }
     ]; };
-    exports.ɵbb.propDecorators = {
+    exports.ɵbc.propDecorators = {
         picker: [{ type: i0.ViewChild, args: ['picker',] }],
         timelineValue: [{ type: i0.Input }],
         timelines: [{ type: i0.Input }],
@@ -3419,9 +3504,9 @@
         disabled: [{ type: i0.Input }],
         value: [{ type: i0.Input }]
     };
-    exports.ɵbb = TimelineFilterComponent_1 = __decorate([
+    exports.ɵbc = TimelineFilterComponent_1 = __decorate([
         untilDestroy.UntilDestroy()
-    ], exports.ɵbb);
+    ], exports.ɵbc);
 
     var LoaderComponent = /** @class */ (function () {
         function LoaderComponent() {
@@ -3783,7 +3868,8 @@
                         datepicker.MatDatepickerModule,
                         list.MatListModule,
                         tooltip.MatTooltipModule,
-                        buttonToggle.MatButtonToggleModule
+                        buttonToggle.MatButtonToggleModule,
+                        sidenav.MatSidenavModule
                     ]
                 },] }
     ];
@@ -4274,11 +4360,11 @@
                         MaterialModule
                     ],
                     declarations: [
-                        exports.ɵq,
+                        exports.ɵs,
                         MatSelectInfiniteScrollDirective
                     ],
                     exports: [
-                        exports.ɵq,
+                        exports.ɵs,
                         MatSelectInfiniteScrollDirective
                     ]
                 },] }
@@ -4441,7 +4527,7 @@
     }());
     TimelineFilterModule.decorators = [
         { type: i0.NgModule, args: [{
-                    declarations: [exports.ɵbb],
+                    declarations: [exports.ɵbc],
                     imports: [
                         common.CommonModule,
                         TimelineFilterRoutingModule,
@@ -4449,7 +4535,7 @@
                         MaterialModule,
                         forms.ReactiveFormsModule
                     ],
-                    exports: [exports.ɵbb]
+                    exports: [exports.ɵbc]
                 },] }
     ];
 
@@ -4551,7 +4637,7 @@
             required: "Email Type is required"
         },
     };
-    exports.ɵbe = /** @class */ (function () {
+    exports.ɵbf = /** @class */ (function () {
         function EmailSubscriptionUserFormComponent(fb, formValidatorService, alertService, dialogRef, data, http) {
             this.fb = fb;
             this.formValidatorService = formValidatorService;
@@ -4613,14 +4699,14 @@
         };
         return EmailSubscriptionUserFormComponent;
     }());
-    exports.ɵbe.decorators = [
+    exports.ɵbf.decorators = [
         { type: i0.Component, args: [{
                     selector: 'app-email-subscription-user-form',
                     template: "<form [formGroup]=\"esUserFormGroup\" (ngSubmit)=\"submit()\" class=\"mat-typography\">\n    <div fxLayout=\"column\">\n        <div mat-dialog-title class=\"text-center\">\n            <div>Email Subscription User</div>\n        </div>\n\n        <div mat-dialog-content fxLayout=\"column\">\n            <div fxLayout=\"row wrap\" fxLayoutAlign=\"space-between center\">\n\n                <mat-form-field fxFlex=\"48%\" class=\"mt-1\">\n                    <mat-label>User</mat-label>\n                    <app-searchable-selector formControlName=\"user_id\" apiUrl=\"api/users\" titleField=\"name\" required\n                        [selectedValue]=\"selectedUser\">\n                    </app-searchable-selector>\n                    <mat-error *ngIf=\"isFieldValid('user_id')\">{{getErrorMessage('user_id')}}</mat-error>\n                </mat-form-field>\n\n                <mat-form-field fxFlex=\"48%\" class=\"mt-1\">\n                    <mat-label>Email Type</mat-label>\n                    <app-searchable-selector formControlName=\"email_type_id\" apiUrl=\"api/email-subscription-types\"\n                        required [selectedValue]=\"selectedType\">\n                    </app-searchable-selector>\n                    <mat-error *ngIf=\"isFieldValid('email_type_id')\">{{getErrorMessage('email_type_id')}}</mat-error>\n                </mat-form-field>\n\n                <div class=\"my-2\" fxLayout=\"row\" fxLayoutGap=\"30px\" fxLayoutAlign=\"end\" fxFlex=\"100%\">\n                    <button mat-raised-button type=\"button\" (click)=\"cancel()\">Cancel</button>\n                    <button mat-raised-button type=\"submit\" color=\"primary\" [disabled]=\"isSubmitLoading\">\n                        <app-loader class=\"inline-loader\" [isLoading]=\"isSubmitLoading\"></app-loader>\n                        Save\n                    </button>\n                </div>\n            </div>\n        </div>\n\n\n    </div>\n</form>",
                     styles: [""]
                 },] }
     ];
-    exports.ɵbe.ctorParameters = function () { return [
+    exports.ɵbf.ctorParameters = function () { return [
         { type: forms.FormBuilder },
         { type: FormValidatorService },
         { type: AlertService },
@@ -4628,9 +4714,9 @@
         { type: undefined, decorators: [{ type: i0.Inject, args: [dialog.MAT_DIALOG_DATA,] }] },
         { type: HttpService }
     ]; };
-    exports.ɵbe = __decorate([
+    exports.ɵbf = __decorate([
         untilDestroy.UntilDestroy()
-    ], exports.ɵbe);
+    ], exports.ɵbf);
 
     var EmailSubscriptionUserFormModule = /** @class */ (function () {
         function EmailSubscriptionUserFormModule() {
@@ -4639,7 +4725,7 @@
     }());
     EmailSubscriptionUserFormModule.decorators = [
         { type: i0.NgModule, args: [{
-                    declarations: [exports.ɵbe],
+                    declarations: [exports.ɵbf],
                     imports: [
                         common.CommonModule,
                         MaterialModule,
@@ -4649,12 +4735,12 @@
                         EmailSubscriptionUserFormRoutingModule,
                         LoaderModule
                     ],
-                    entryComponents: [exports.ɵbe]
+                    entryComponents: [exports.ɵbf]
                 },] }
     ];
 
     var log$4 = new Logger('EmailSubscriptionUser list');
-    exports.ɵbf = /** @class */ (function () {
+    exports.ɵbg = /** @class */ (function () {
         function EmailSubscriptionUserListComponent(dialog, http, router) {
             this.dialog = dialog;
             this.http = http;
@@ -4715,7 +4801,7 @@
         };
         EmailSubscriptionUserListComponent.prototype.addEmailSubscriptionUser = function () {
             var _this = this;
-            var dialogRef = this.dialog.open(exports.ɵbe, {
+            var dialogRef = this.dialog.open(exports.ɵbf, {
                 width: '800px',
                 autoFocus: false,
                 data: {} // Any data passed here will be injected into the model
@@ -4730,7 +4816,7 @@
         EmailSubscriptionUserListComponent.prototype.editEmailSubscriptionUser = function (event, esUser) {
             var _this = this;
             event.stopPropagation();
-            var dialogRef = this.dialog.open(exports.ɵbe, {
+            var dialogRef = this.dialog.open(exports.ɵbf, {
                 width: '800px',
                 autoFocus: false,
                 data: {
@@ -4788,24 +4874,24 @@
         };
         return EmailSubscriptionUserListComponent;
     }());
-    exports.ɵbf.decorators = [
+    exports.ɵbg.decorators = [
         { type: i0.Component, args: [{
                     selector: 'app-email-subscription-user-list',
                     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}"]
                 },] }
     ];
-    exports.ɵbf.ctorParameters = function () { return [
+    exports.ɵbg.ctorParameters = function () { return [
         { type: dialog.MatDialog },
         { type: HttpService },
         { type: i1$2.Router }
     ]; };
-    exports.ɵbf.propDecorators = {
+    exports.ɵbg.propDecorators = {
         sort: [{ type: i0.ViewChild, args: [sort.MatSort, { static: true },] }]
     };
-    exports.ɵbf = __decorate([
+    exports.ɵbg = __decorate([
         untilDestroy.UntilDestroy()
-    ], exports.ɵbf);
+    ], exports.ɵbg);
 
     var esulr = {
         title: 'Email Subscription Users',
@@ -4817,7 +4903,7 @@
     var routes$4 = [
         {
             path: '',
-            component: exports.ɵbf,
+            component: exports.ɵbg,
             canActivate: [AuthenticationGuard],
             data: esulr
         },
@@ -4847,7 +4933,7 @@
                 },] }
     ];
 
-    exports.ɵbh = /** @class */ (function () {
+    exports.ɵbi = /** @class */ (function () {
         function EmailSubscriptionUserListFilterComponent(fb) {
             this.fb = fb;
             this.valueChange = new i0.EventEmitter();
@@ -4876,22 +4962,22 @@
         };
         return EmailSubscriptionUserListFilterComponent;
     }());
-    exports.ɵbh.decorators = [
+    exports.ɵbi.decorators = [
         { type: i0.Component, args: [{
                     selector: 'app-email-subscription-user-list-filter',
                     template: "<form [formGroup]=\"esUserFilterForm\" fxLayout=\"row wrap\" fxLayoutGap=\"1rem\" fxLayoutAlign=\"start center\">\n    <mat-form-field class=\"ml-3\">\n        <mat-label>User</mat-label>\n        <app-searchable-selector formControlName=\"user_id\" apiUrl=\"api/users\" titleField=\"name\">\n        </app-searchable-selector>\n        <button mat-button *ngIf=\"getFieldValue('user_id')\" matSuffix mat-icon-button\n            (click)=\"resetFieldValue('user_id')\">\n            <mat-icon>close</mat-icon>\n        </button>\n    </mat-form-field>\n\n    <mat-form-field class=\"ml-3\">\n        <mat-label>Email Type</mat-label>\n        <app-searchable-selector formControlName=\"email_type_id\" apiUrl=\"api/email-subscription-types\">\n        </app-searchable-selector>\n        <button mat-button *ngIf=\"getFieldValue('email_type_id')\" matSuffix mat-icon-button\n            (click)=\"resetFieldValue('email_type_id')\">\n            <mat-icon>close</mat-icon>\n        </button>\n    </mat-form-field>\n</form>",
                     styles: [""]
                 },] }
     ];
-    exports.ɵbh.ctorParameters = function () { return [
+    exports.ɵbi.ctorParameters = function () { return [
         { type: forms.FormBuilder }
     ]; };
-    exports.ɵbh.propDecorators = {
+    exports.ɵbi.propDecorators = {
         valueChange: [{ type: i0.Output }]
     };
-    exports.ɵbh = __decorate([
+    exports.ɵbi = __decorate([
         untilDestroy.UntilDestroy()
-    ], exports.ɵbh);
+    ], exports.ɵbi);
 
     var EmailSubscriptionUserListFilterModule = /** @class */ (function () {
         function EmailSubscriptionUserListFilterModule() {
@@ -4900,7 +4986,7 @@
     }());
     EmailSubscriptionUserListFilterModule.decorators = [
         { type: i0.NgModule, args: [{
-                    declarations: [exports.ɵbh],
+                    declarations: [exports.ɵbi],
                     imports: [
                         common.CommonModule,
                         MaterialModule,
@@ -4909,7 +4995,7 @@
                         SearchableSelectorModule,
                         EmailSubscriptionUserListFilterRoutingModule
                     ],
-                    exports: [exports.ɵbh]
+                    exports: [exports.ɵbi]
                 },] }
     ];
 
@@ -4920,7 +5006,7 @@
     }());
     EmailSubscriptionUserListModule.decorators = [
         { type: i0.NgModule, args: [{
-                    declarations: [exports.ɵbf],
+                    declarations: [exports.ɵbg],
                     imports: [
                         common.CommonModule,
                         ngxInfiniteScroll.InfiniteScrollModule,
@@ -4931,7 +5017,7 @@
                         EmailSubscriptionUserFormModule,
                         EmailSubscriptionUserListFilterModule
                     ],
-                    exports: [exports.ɵbf]
+                    exports: [exports.ɵbg]
                 },] }
     ];
 
@@ -4987,7 +5073,7 @@
             required: "Frequency is required"
         },
     };
-    exports.ɵbi = /** @class */ (function () {
+    exports.ɵbj = /** @class */ (function () {
         function EmailSubscriptionTypeFormComponent(fb, formValidatorService, alertService, dialogRef, data, http) {
             this.fb = fb;
             this.formValidatorService = formValidatorService;
@@ -5051,14 +5137,14 @@
         };
         return EmailSubscriptionTypeFormComponent;
     }());
-    exports.ɵbi.decorators = [
+    exports.ɵbj.decorators = [
         { type: i0.Component, args: [{
                     selector: 'app-email-subscription-type-form',
                     template: "<form [formGroup]=\"emailSubscriptionTypeFormGroup\" (ngSubmit)=\"submit()\" class=\"mat-typography\">\n    <div fxLayout=\"column\">\n        <div mat-dialog-title class=\"text-center\">\n            <div>Email Subscription Type</div>\n        </div>\n\n        <div mat-dialog-content fxLayout=\"column\">\n            <div fxLayout=\"row wrap\" fxLayoutAlign=\"space-between center\">\n\n                <mat-form-field fxFlex=\"100%\" class=\"mt-1\">\n                    <input matInput formControlName=\"title\" placeholder=\"Title\" autocomplete=\"off\" required />\n                    <mat-error *ngIf=\"isFieldValid('title')\">{{getErrorMessage('title')}}</mat-error>\n                </mat-form-field>\n\n                <mat-form-field fxFlex=\"100%\" class=\"mt-1\">\n                    <input matInput formControlName=\"code\" placeholder=\"Code\" autocomplete=\"off\" required />\n                    <mat-hint align=\"end\">Unique Value</mat-hint>\n                    <mat-error *ngIf=\"isFieldValid('code')\">{{getErrorMessage('code')}}</mat-error>\n                </mat-form-field>\n\n                <mat-form-field fxFlex=\"100%\" class=\"mt-1\">\n                    <mat-label>Frequency</mat-label>\n                    <app-searchable-selector formControlName=\"frequency_id\" apiUrl=\"api/email-subscription-frequencies\"\n                        [(selectedValue)]=\"selectedFrequency\" [enableSearch]=\"false\" required>\n                    </app-searchable-selector>\n                    <mat-error *ngIf=\"isFieldValid('frequency_id')\">{{getErrorMessage('frequency_id')}}\n                    </mat-error>\n                </mat-form-field>\n\n                <mat-form-field fxFlex=\"100%\" class=\"mt-1\">\n                    <textarea matInput formControlName=\"description\" placeholder=\"Description\"\n                        autocomplete=\"off\"></textarea>\n                </mat-form-field>\n\n                <div class=\"my-2\" fxLayout=\"row\" fxLayoutGap=\"30px\" fxLayoutAlign=\"end\" fxFlex=\"100%\">\n                    <button mat-raised-button type=\"button\" (click)=\"cancel()\">Cancel</button>\n                    <button mat-raised-button type=\"submit\" color=\"primary\" [disabled]=\"isSubmitLoading\">\n                        <app-loader class=\"inline-loader\" [isLoading]=\"isSubmitLoading\"></app-loader>\n                        Save\n                    </button>\n                </div>\n            </div>\n        </div>\n\n\n    </div>\n</form>",
                     styles: [""]
                 },] }
     ];
-    exports.ɵbi.ctorParameters = function () { return [
+    exports.ɵbj.ctorParameters = function () { return [
         { type: forms.FormBuilder },
         { type: FormValidatorService },
         { type: AlertService },
@@ -5066,9 +5152,9 @@
         { type: undefined, decorators: [{ type: i0.Inject, args: [dialog.MAT_DIALOG_DATA,] }] },
         { type: HttpService }
     ]; };
-    exports.ɵbi = __decorate([
+    exports.ɵbj = __decorate([
         untilDestroy.UntilDestroy()
-    ], exports.ɵbi);
+    ], exports.ɵbj);
 
     var EmailSubscriptionTypeFormModule = /** @class */ (function () {
         function EmailSubscriptionTypeFormModule() {
@@ -5077,7 +5163,7 @@
     }());
     EmailSubscriptionTypeFormModule.decorators = [
         { type: i0.NgModule, args: [{
-                    declarations: [exports.ɵbi],
+                    declarations: [exports.ɵbj],
                     imports: [
                         common.CommonModule,
                         MaterialModule,
@@ -5087,12 +5173,12 @@
                         EmailSubscriptionTypeFormRoutingModule,
                         LoaderModule
                     ],
-                    exports: [exports.ɵbi],
-                    entryComponents: [exports.ɵbi]
+                    exports: [exports.ɵbj],
+                    entryComponents: [exports.ɵbj]
                 },] }
     ];
 
-    exports.ɵbj = /** @class */ (function () {
+    exports.ɵbk = /** @class */ (function () {
         function EmailSubscriptionTypeListComponent(dialog, http) {
             this.dialog = dialog;
             this.http = http;
@@ -5156,7 +5242,7 @@
         };
         EmailSubscriptionTypeListComponent.prototype.addEmailSubscriptionType = function () {
             var _this = this;
-            var dialogRef = this.dialog.open(exports.ɵbi, {
+            var dialogRef = this.dialog.open(exports.ɵbj, {
                 width: '400px',
                 autoFocus: false,
                 data: {} // Any data passed here will be injected into the model
@@ -5170,7 +5256,7 @@
         EmailSubscriptionTypeListComponent.prototype.editEmailSubscriptionType = function (event, emailSubscriptionType) {
             var _this = this;
             event.stopPropagation();
-            var dialogRef = this.dialog.open(exports.ɵbi, {
+            var dialogRef = this.dialog.open(exports.ɵbj, {
                 width: '400px',
                 autoFocus: false,
                 data: {
@@ -5227,23 +5313,23 @@
         };
         return EmailSubscriptionTypeListComponent;
     }());
-    exports.ɵbj.decorators = [
+    exports.ɵbk.decorators = [
         { type: i0.Component, args: [{
                     selector: 'app-email-subscription-type-list',
                     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 mat-button matSuffix mat-icon-button>\n                <mat-icon>search</mat-icon>\n            </button>\n            <button mat-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}"]
                 },] }
     ];
-    exports.ɵbj.ctorParameters = function () { return [
+    exports.ɵbk.ctorParameters = function () { return [
         { type: dialog.MatDialog },
         { type: HttpService }
     ]; };
-    exports.ɵbj.propDecorators = {
+    exports.ɵbk.propDecorators = {
         sort: [{ type: i0.ViewChild, args: [sort.MatSort, { static: true },] }]
     };
-    exports.ɵbj = __decorate([
+    exports.ɵbk = __decorate([
         untilDestroy.UntilDestroy()
-    ], exports.ɵbj);
+    ], exports.ɵbk);
 
     var estlr = {
         title: 'Email Subscription Type',
@@ -5255,7 +5341,7 @@
     var routes$8 = [
         {
             path: '',
-            component: exports.ɵbj,
+            component: exports.ɵbk,
             canActivate: [AuthenticationGuard],
             data: estlr
         },
@@ -5279,7 +5365,7 @@
     }());
     EmailSubscriptionTypeListModule.decorators = [
         { type: i0.NgModule, args: [{
-                    declarations: [exports.ɵbj],
+                    declarations: [exports.ɵbk],
                     imports: [
                         common.CommonModule,
                         MaterialModule,
@@ -5289,11 +5375,11 @@
                         EmailSubscriptionTypeFormModule,
                         EmailSubscriptionTypeListRoutingModule
                     ],
-                    exports: [exports.ɵbj]
+                    exports: [exports.ɵbk]
                 },] }
     ];
 
-    exports.ɵbk = /** @class */ (function () {
+    exports.ɵbl = /** @class */ (function () {
         function EmailSubscriptionForUserComponent(http) {
             this.http = http;
             this.subscriptions = [];
@@ -5348,19 +5434,19 @@
         };
         return EmailSubscriptionForUserComponent;
     }());
-    exports.ɵbk.decorators = [
+    exports.ɵbl.decorators = [
         { type: i0.Component, args: [{
                     selector: 'app-email-subscription-for-user',
                     template: "<div fxLayout=\"column\" class=\"container my-4\">\n\n    <div class=\"scroll-container\" infiniteScroll [infiniteScrollDistance]=\"2\" [infiniteScrollThrottle]=\"50\"\n        (scrolled)=\"onScroll()\" [scrollWindow]=\"false\">\n        <mat-list>\n            <div mat-subheader>Available Subscriptions</div>\n            <mat-list-item *ngFor=\"let sub of subscriptions\">\n                <mat-icon mat-list-icon>email</mat-icon>\n                <div mat-line>{{sub?.title}} </div>\n                <div mat-line class=\"text-secondary\">{{sub?.frequency?.title}}</div>\n                <div mat-line> {{sub?.description}} </div>\n                <div fxLayout fxLayoutAlign=\"end\">\n                    <button type=\"button\" *ngIf=\"!sub?.current_user_subscription\" mat-raised-button color=\"primary\"\n                        (click)=\"subscribe(sub)\">Subscribe</button>\n                    <button type=\"button\" *ngIf=\"sub?.current_user_subscription\" mat-stroked-button color=\"primary\"\n                        (click)=\"unsubscribe(sub)\">Unsubscribe</button>\n                </div>\n                <mat-divider></mat-divider>\n            </mat-list-item>\n        </mat-list>\n    </div>\n\n</div>",
                     styles: [".scroll-container{max-height:800px;overflow-y:auto}"]
                 },] }
     ];
-    exports.ɵbk.ctorParameters = function () { return [
+    exports.ɵbl.ctorParameters = function () { return [
         { type: HttpService }
     ]; };
-    exports.ɵbk = __decorate([
+    exports.ɵbl = __decorate([
         untilDestroy.UntilDestroy()
-    ], exports.ɵbk);
+    ], exports.ɵbl);
 
     var esfur = {
         permissions: {
@@ -5370,7 +5456,7 @@
     var routes$9 = [
         {
             path: '',
-            component: exports.ɵbk,
+            component: exports.ɵbl,
             canActivate: [AuthenticationGuard],
             data: esfur
         },
@@ -5394,7 +5480,7 @@
     }());
     EmailSubscriptionForUserModule.decorators = [
         { type: i0.NgModule, args: [{
-                    declarations: [exports.ɵbk],
+                    declarations: [exports.ɵbl],
                     imports: [
                         common.CommonModule,
                         ngxInfiniteScroll.InfiniteScrollModule,
@@ -5402,7 +5488,7 @@
                         flexLayout.FlexLayoutModule,
                         EmailSubscriptionForUserRoutingModule
                     ],
-                    exports: [exports.ɵbk]
+                    exports: [exports.ɵbl]
                 },] }
     ];
 
@@ -5594,7 +5680,7 @@
                 },] }
     ];
 
-    exports.ɵbl = /** @class */ (function () {
+    exports.ɵbm = /** @class */ (function () {
         function TechlifyUpdatesListComponent(dialog, alertService, techlifyUpdateService, fb) {
             this.dialog = dialog;
             this.alertService = alertService;
@@ -5754,26 +5840,26 @@
         };
         return TechlifyUpdatesListComponent;
     }());
-    exports.ɵbl.decorators = [
+    exports.ɵbm.decorators = [
         { type: i0.Component, args: [{
                     selector: 'app-techlify-updates-list',
                     template: "<section class=\"p-4\" fxLayout=\"column\">\n  <h3 class=\"primary-color text-center\">\n    App Updates\n    <button mat-raised-button (click)=\"modifyTechlifyUpdate()\" class=\"primary-bg text-white\">\n      <mat-icon>\n        add\n      </mat-icon>\n      Create\n    </button>\n  </h3>\n  <form [formGroup]=\"filterFormGroup\" fxLayout=\"row wrap\" fxLayoutGap=\"0.5rem\" fxFlex=\"100%\" style=\"font-size: 12px;\">\n    <mat-form-field fxFlex=\"0 1 calc(100% - 0.5rem)\" fxFlex.gt-md=\"0 1 calc(15% - 0.5rem)\" appearance=\"outline\"\n      fxFlex.gt-sm=\"0 1 calc(20% - 0.5rem)\">\n      <input type=\"text\" matInput formControlName=\"search\" placeholder=\"Title\" autocomplete=\"off\" />\n      <button mat-button *ngIf=\"filterFormGroup.get('search').value\" matSuffix mat-icon-button\n        (click)=\"resetFieldValue('search')\">\n        <mat-icon>close</mat-icon>\n      </button>\n    </mat-form-field>\n    <mat-form-field fxFlex=\"0 1 calc(100% - 0.5rem)\" fxFlex.gt-md=\"0 1 calc(15% - 0.5rem)\" appearance=\"outline\"\n      fxFlex.gt-sm=\"0 1 calc(20% - 0.5rem)\">\n      <input type=\"text\" matInput formControlName=\"version\" placeholder=\"Version\" autocomplete=\"off\" />\n      <button mat-button *ngIf=\"filterFormGroup.get('version').value\" matSuffix mat-icon-button\n        (click)=\"resetFieldValue('version')\">\n        <mat-icon>close</mat-icon>\n      </button>\n    </mat-form-field>\n  </form>\n\n  <table mat-table [dataSource]=\"techlifyUpdates\" class=\"mat-elevation-z8 w-100\" matSort multiTemplateDataRows\n    (matSortChange)=\"sortColumn($event)\" infiniteScroll [infiniteScrollDistance]=\"2\" [infiniteScrollThrottle]=\"50\"\n    (scrolled)=\"onScroll()\">\n\n    <!-- Index Column -->\n    <ng-container matColumnDef=\"index\">\n      <th mat-header-cell *matHeaderCellDef> # </th>\n      <td mat-cell *matCellDef=\"let element;let i=dataIndex\"> {{ i+1 }} </td>\n    </ng-container>\n\n    <!-- Course Column -->\n    <ng-container matColumnDef=\"title\">\n      <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear> Title </th>\n      <td mat-cell *matCellDef=\"let element\"> {{element?.title}} </td>\n    </ng-container>\n\n    <!-- Version Column -->\n    <ng-container matColumnDef=\"version\">\n      <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear> Version </th>\n      <td mat-cell *matCellDef=\"let element\"> {{element?.version}} </td>\n    </ng-container>\n\n    <!-- Released On Column -->\n    <ng-container matColumnDef=\"released_on\">\n      <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear> Released On </th>\n      <td mat-cell *matCellDef=\"let element\"> {{element?.released_on | date:'mediumDate'}} </td>\n    </ng-container>\n\n    <!-- Learn More Link Column -->\n    <ng-container matColumnDef=\"learn_more_link\">\n      <th mat-header-cell *matHeaderCellDef> Learn more link </th>\n      <td mat-cell *matCellDef=\"let element\">\n        <a [href]=\"element?.learn_more_link\" target=\"_blank\">\n          {{element?.learn_more_link}}\n        </a>\n      </td>\n    </ng-container>\n\n    <!-- Description Column -->\n    <ng-container matColumnDef=\"description\">\n      <th mat-header-cell *matHeaderCellDef> Description </th>\n      <td mat-cell *matCellDef=\"let element\">\n        <app-read-more [text]=\"element?.description\" [maxLength]=\"50\"></app-read-more>\n      </td>\n    </ng-container>\n\n    <!-- Creator Column -->\n    <ng-container matColumnDef=\"creator\">\n      <th mat-header-cell *matHeaderCellDef> Creator </th>\n      <td mat-cell *matCellDef=\"let element\">\n        {{element?.creator?.name}}\n        <div fxLayout class=\"small\">\n          {{element?.created_at | date : 'mediumDate'}}\n        </div>\n      </td>\n    </ng-container>\n\n    <!-- Actions Column -->\n    <ng-container matColumnDef=\"actions\">\n      <th mat-header-cell *matHeaderCellDef> Actions </th>\n      <td mat-cell *matCellDef=\"let element\" class=\"secondary-color\">\n        <button type=\"button\" class=\"secondary-color\" mat-icon-button (click)=\"modifyTechlifyUpdate(element)\">\n          <mat-icon>edit</mat-icon>\n        </button>\n\n        <button type=\"button\" class=\"secondary-color\" mat-icon-button (click)=\"deleteTechlifyUpdate(element)\">\n          <mat-icon>delete</mat-icon>\n        </button>\n      </td>\n    </ng-container>\n\n    <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n    <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n  </table>\n</section>\n",
                     styles: [""]
                 },] }
     ];
-    exports.ɵbl.ctorParameters = function () { return [
+    exports.ɵbm.ctorParameters = function () { return [
         { type: dialog.MatDialog },
         { type: AlertService },
         { type: TechlifyUpdateService },
         { type: forms.FormBuilder }
     ]; };
-    exports.ɵbl = __decorate([
+    exports.ɵbm = __decorate([
         untilDestroy.UntilDestroy()
-    ], exports.ɵbl);
+    ], exports.ɵbm);
 
     var routes$a = [
         { path: '', redirectTo: 'all', pathMatch: 'full' },
-        { path: 'all', component: exports.ɵbl },
+        { path: 'all', component: exports.ɵbm },
         //fallback
         {
             path: '**',
@@ -5800,7 +5886,7 @@
     }());
     TechlifyUpdateModule.decorators = [
         { type: i0.NgModule, args: [{
-                    declarations: [exports.ɵbl],
+                    declarations: [exports.ɵbm],
                     imports: [
                         common.CommonModule,
                         forms.ReactiveFormsModule,
@@ -5847,7 +5933,7 @@
         { type: i1$2.Router }
     ]; };
 
-    exports.ɵbr = /** @class */ (function () {
+    exports.ɵbs = /** @class */ (function () {
         function TechlifyUpdateHistoryComponent(dialog, techlifyUpdateService, fb, alertService) {
             this.dialog = dialog;
             this.techlifyUpdateService = techlifyUpdateService;
@@ -5984,26 +6070,26 @@
         };
         return TechlifyUpdateHistoryComponent;
     }());
-    exports.ɵbr.decorators = [
+    exports.ɵbs.decorators = [
         { type: i0.Component, args: [{
                     selector: 'app-techlify-update-history',
                     template: "<section class=\"p-4\" fxLayout=\"column\">\n  <h3 class=\"primary-color text-center\">\n    App Updates\n  </h3>\n  <form [formGroup]=\"filterFormGroup\" fxLayout=\"row wrap\" fxLayoutGap=\"0.5rem\" fxFlex=\"100%\" style=\"font-size: 12px;\">\n    <mat-form-field fxFlex=\"0 1 calc(100% - 0.5rem)\" fxFlex.gt-md=\"0 1 calc(15% - 0.5rem)\" appearance=\"outline\"\n      fxFlex.gt-sm=\"0 1 calc(20% - 0.5rem)\">\n      <input type=\"text\" matInput formControlName=\"search\" placeholder=\"Title\" autocomplete=\"off\" />\n      <button mat-button *ngIf=\"filterFormGroup.get('search').value\" matSuffix mat-icon-button\n        (click)=\"resetFieldValue('search')\">\n        <mat-icon>close</mat-icon>\n      </button>\n    </mat-form-field>\n    <mat-form-field fxFlex=\"0 1 calc(100% - 0.5rem)\" fxFlex.gt-md=\"0 1 calc(15% - 0.5rem)\" appearance=\"outline\"\n      fxFlex.gt-sm=\"0 1 calc(20% - 0.5rem)\">\n      <input type=\"text\" matInput formControlName=\"version\" placeholder=\"Version\" autocomplete=\"off\" />\n      <button mat-button *ngIf=\"filterFormGroup.get('version').value\" matSuffix mat-icon-button\n        (click)=\"resetFieldValue('version')\">\n        <mat-icon>close</mat-icon>\n      </button>\n    </mat-form-field>\n  </form>\n\n  <table mat-table [dataSource]=\"techlifyUpdates\" class=\"mat-elevation-z8 w-100\" matSort multiTemplateDataRows\n    (matSortChange)=\"sortColumn($event)\" infiniteScroll [infiniteScrollDistance]=\"2\" [infiniteScrollThrottle]=\"50\"\n    (scrolled)=\"onScroll()\">\n\n    <!-- Index Column -->\n    <ng-container matColumnDef=\"index\">\n      <th mat-header-cell *matHeaderCellDef> # </th>\n      <td mat-cell *matCellDef=\"let element;let i=dataIndex\"> {{ i+1 }} </td>\n    </ng-container>\n\n    <!-- Course Column -->\n    <ng-container matColumnDef=\"title\">\n      <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear> Title </th>\n      <td mat-cell *matCellDef=\"let element\"> {{element?.title}} </td>\n    </ng-container>\n\n    <!-- Version Column -->\n    <ng-container matColumnDef=\"version\">\n      <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear> Version </th>\n      <td mat-cell *matCellDef=\"let element\"> {{element?.version}} </td>\n    </ng-container>\n\n    <!-- Released On Column -->\n    <ng-container matColumnDef=\"released_on\">\n      <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear> Released On </th>\n      <td mat-cell *matCellDef=\"let element\"> {{element?.released_on | date:'mediumDate'}} </td>\n    </ng-container>\n\n    <!-- Learn More Link Column -->\n    <ng-container matColumnDef=\"learn_more_link\">\n      <th mat-header-cell *matHeaderCellDef> Learn more link </th>\n      <td mat-cell *matCellDef=\"let element\">\n        <a [href]=\"element?.learn_more_link\" target=\"_blank\">\n          {{element?.learn_more_link}}\n        </a>\n      </td>\n    </ng-container>\n\n    <!-- Description Column -->\n    <ng-container matColumnDef=\"description\">\n      <th mat-header-cell *matHeaderCellDef> Description </th>\n      <td mat-cell *matCellDef=\"let element\">\n        <app-read-more [text]=\"element?.description\" [maxLength]=\"50\"></app-read-more>\n      </td>\n    </ng-container>\n\n    <!-- Creator Column -->\n    <ng-container matColumnDef=\"creator\">\n      <th mat-header-cell *matHeaderCellDef> Creator </th>\n      <td mat-cell *matCellDef=\"let element\">\n        {{element?.creator?.name}}\n        <div fxLayout class=\"small\">\n          {{element?.created_at | date : 'mediumDate'}}\n        </div>\n      </td>\n    </ng-container>\n\n    <!-- Actions Column -->\n    <ng-container matColumnDef=\"actions\">\n      <th mat-header-cell *matHeaderCellDef> Actions </th>\n      <td mat-cell *matCellDef=\"let element\" class=\"secondary-color\">\n        <button type=\"button\" class=\"secondary-color\" mat-icon-button (click)=\"openUpdateView(element)\">\n          <mat-icon>remove_red_eye</mat-icon>\n        </button>\n      </td>\n    </ng-container>\n\n    <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n    <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n  </table>\n</section>\n",
                     styles: [""]
                 },] }
     ];
-    exports.ɵbr.ctorParameters = function () { return [
+    exports.ɵbs.ctorParameters = function () { return [
         { type: dialog.MatDialog },
         { type: TechlifyUpdateService },
         { type: forms.FormBuilder },
         { type: AlertService }
     ]; };
-    exports.ɵbr = __decorate([
+    exports.ɵbs = __decorate([
         untilDestroy.UntilDestroy()
-    ], exports.ɵbr);
+    ], exports.ɵbs);
 
     var routes$b = [
         { path: '', redirectTo: 'update-history', pathMatch: 'full' },
-        { path: 'update-history', component: exports.ɵbr },
+        { path: 'update-history', component: exports.ɵbs },
         //fallback
         {
             path: '**',
@@ -6040,7 +6126,7 @@
                         ReadMoreModule,
                         TechlifyUpdateHistoryRoutingModule
                     ],
-                    declarations: [exports.ɵbr]
+                    declarations: [exports.ɵbs]
                 },] }
     ];
 
@@ -8226,24 +8312,24 @@
     exports.DateValidator = DateValidator;
     exports.DocumentViewerComponent = DocumentViewerComponent;
     exports.DocumentViewerModule = DocumentViewerModule;
-    exports.EmailSubscriptionForUserComponent = exports.ɵbk;
+    exports.EmailSubscriptionForUserComponent = exports.ɵbl;
     exports.EmailSubscriptionForUserModule = EmailSubscriptionForUserModule;
     exports.EmailSubscriptionForUserRoutingModule = EmailSubscriptionForUserRoutingModule;
     exports.EmailSubscriptionModule = EmailSubscriptionModule;
     exports.EmailSubscriptionRoutingModule = EmailSubscriptionRoutingModule;
-    exports.EmailSubscriptionTypeFormComponent = exports.ɵbi;
+    exports.EmailSubscriptionTypeFormComponent = exports.ɵbj;
     exports.EmailSubscriptionTypeFormModule = EmailSubscriptionTypeFormModule;
     exports.EmailSubscriptionTypeFormRoutingModule = EmailSubscriptionTypeFormRoutingModule;
-    exports.EmailSubscriptionTypeListComponent = exports.ɵbj;
+    exports.EmailSubscriptionTypeListComponent = exports.ɵbk;
     exports.EmailSubscriptionTypeListModule = EmailSubscriptionTypeListModule;
     exports.EmailSubscriptionTypeListRoutingModule = EmailSubscriptionTypeListRoutingModule;
     exports.EmailSubscriptionTypeModule = EmailSubscriptionTypeModule;
     exports.EmailSubscriptionTypeRoutingModule = EmailSubscriptionTypeRoutingModule;
-    exports.EmailSubscriptionUserFormComponent = exports.ɵbe;
+    exports.EmailSubscriptionUserFormComponent = exports.ɵbf;
     exports.EmailSubscriptionUserFormModule = EmailSubscriptionUserFormModule;
     exports.EmailSubscriptionUserFormRoutingModule = EmailSubscriptionUserFormRoutingModule;
-    exports.EmailSubscriptionUserListComponent = exports.ɵbf;
-    exports.EmailSubscriptionUserListFilterComponent = exports.ɵbh;
+    exports.EmailSubscriptionUserListComponent = exports.ɵbg;
+    exports.EmailSubscriptionUserListFilterComponent = exports.ɵbi;
     exports.EmailSubscriptionUserListFilterModule = EmailSubscriptionUserListFilterModule;
     exports.EmailSubscriptionUserListFilterRoutingModule = EmailSubscriptionUserListFilterRoutingModule;
     exports.EmailSubscriptionUserListModule = EmailSubscriptionUserListModule;
@@ -8282,7 +8368,7 @@
     exports.ReadMoreComponent = ReadMoreComponent;
     exports.ReadMoreModule = ReadMoreModule;
     exports.RouteReusableStrategy = RouteReusableStrategy;
-    exports.SearchableSelectorComponent = exports.ɵq;
+    exports.SearchableSelectorComponent = exports.ɵs;
     exports.SearchableSelectorModule = SearchableSelectorModule;
     exports.SnackModule = SnackModule;
     exports.StorageService = StorageService;
@@ -8300,7 +8386,7 @@
     exports.TechlifyUpdateHistoryModule = TechlifyUpdateHistoryModule;
     exports.TechlifyUpdateModule = TechlifyUpdateModule;
     exports.Timeline = Timeline;
-    exports.TimelineFilterComponent = exports.ɵbb;
+    exports.TimelineFilterComponent = exports.ɵbc;
     exports.TimelineFilterModule = TimelineFilterModule;
     exports.TokenInterceptor = TokenInterceptor;
     exports.UpdateNotifierComponent = UpdateNotifierComponent;
@@ -8313,20 +8399,20 @@
     exports.esulr = esulr;
     exports.ɵa = SnackModule;
     exports.ɵb = SuccessSnackComponent;
-    exports.ɵba = NumberSelector;
-    exports.ɵbc = TimelineFilterRoutingModule;
-    exports.ɵbd = LoaderComponent;
-    exports.ɵbg = AuthenticationGuard;
-    exports.ɵbm = TechlifyUpdateService;
-    exports.ɵbn = TechlifyUpdateRoutingModule;
-    exports.ɵbo = TechlifyUpdateFormModule;
-    exports.ɵbp = TechlifyUpdateFormComponent;
-    exports.ɵbq = TechlifyUpdateHistoryRoutingModule;
-    exports.ɵbs = UpdateNotifierSnackComponent;
-    exports.ɵbt = UpdateViewModule;
-    exports.ɵbu = UpdateViewComponent;
-    exports.ɵbv = DataManager;
-    exports.ɵbw = ErrorHandlerService;
+    exports.ɵba = NumItemsSelector;
+    exports.ɵbb = NumberSelector;
+    exports.ɵbd = TimelineFilterRoutingModule;
+    exports.ɵbe = LoaderComponent;
+    exports.ɵbh = AuthenticationGuard;
+    exports.ɵbn = TechlifyUpdateService;
+    exports.ɵbo = TechlifyUpdateRoutingModule;
+    exports.ɵbp = TechlifyUpdateFormModule;
+    exports.ɵbq = TechlifyUpdateFormComponent;
+    exports.ɵbr = TechlifyUpdateHistoryRoutingModule;
+    exports.ɵbt = UpdateNotifierSnackComponent;
+    exports.ɵbu = UpdateViewModule;
+    exports.ɵbv = UpdateViewComponent;
+    exports.ɵbw = DataManager;
     exports.ɵbx = FieldMappingComponent;
     exports.ɵby = FailedItemsListComponent;
     exports.ɵbz = ImportHistoryListComponent;
@@ -8346,16 +8432,16 @@
     exports.ɵl = FormValidatorService;
     exports.ɵm = EntityFileService;
     exports.ɵn = AlertService;
-    exports.ɵp = FileDropperComponent;
-    exports.ɵr = MatSelectInfiniteScrollDirective;
-    exports.ɵs = NoteListComponent;
-    exports.ɵt = NoteService;
-    exports.ɵu = NoteFormComponent;
-    exports.ɵv = CommentFormComponent;
-    exports.ɵw = CredentialsService;
-    exports.ɵx = ConfigService;
-    exports.ɵy = TechlifyConfig;
-    exports.ɵz = NumItemsSelector;
+    exports.ɵp = ErrorHandlerService;
+    exports.ɵq = TechlifyConfig;
+    exports.ɵr = FileDropperComponent;
+    exports.ɵt = MatSelectInfiniteScrollDirective;
+    exports.ɵu = NoteListComponent;
+    exports.ɵv = NoteService;
+    exports.ɵw = NoteFormComponent;
+    exports.ɵx = CommentFormComponent;
+    exports.ɵy = CredentialsService;
+    exports.ɵz = ConfigService;
 
     Object.defineProperty(exports, '__esModule', { value: true });