ngx-techlify-core 11.3.3 → 11.3.7

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('@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/flex-layout'), require('ngx-infinite-scroll'), require('ngx-doc-viewer'), require('ngx-editor'), require('xlsx'), require('@angular/platform-browser'), require('jsondiffpatch'), require('@angular/cdk/keycodes'), require('@angular/material/autocomplete'), require('@angular/material/button-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', '@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/flex-layout', 'ngx-infinite-scroll', 'ngx-doc-viewer', 'ngx-editor', 'xlsx', '@angular/platform-browser', 'jsondiffpatch', '@angular/cdk/keycodes', '@angular/material/autocomplete', '@angular/material/button-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.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.flexLayout, global['ngx-infinite-scroll'], global['ngx-doc-viewer'], global['ngx-editor'], global.xlsx, global.ng.platformBrowser, global.jsondiffpatch, global.ng.cdk.keycodes, global.ng.material.autocomplete, global.ng.material.buttonToggle));
-}(this, (function (exports, i0, dialog, table, sort, untilDestroy, common, forms, i1$1, rxjs, operators, i1, a11y, coercion, formField, select, icon, i1$2, tooltip, core, button, checkbox, input, menu, progressSpinner, card, divider, chips, datepicker, list, flexLayout, ngxInfiniteScroll, ngxDocViewer, ngxEditor, XLSX, platformBrowser, jsondiffpatch, keycodes, autocomplete, buttonToggle) { '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('@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/flex-layout'), require('ngx-infinite-scroll'), require('ngx-doc-viewer'), require('ngx-editor'), require('xlsx'), require('@angular/platform-browser'), require('jsondiffpatch'), require('@angular/cdk/keycodes'), require('@angular/material/autocomplete'), require('@angular/material/button-toggle'), 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', '@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/flex-layout', 'ngx-infinite-scroll', 'ngx-doc-viewer', 'ngx-editor', 'xlsx', '@angular/platform-browser', 'jsondiffpatch', '@angular/cdk/keycodes', '@angular/material/autocomplete', '@angular/material/button-toggle', '@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.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.flexLayout, global['ngx-infinite-scroll'], global['ngx-doc-viewer'], global['ngx-editor'], global.xlsx, global.ng.platformBrowser, global.jsondiffpatch, global.ng.cdk.keycodes, global.ng.material.autocomplete, global.ng.material.buttonToggle, global.ng.material.slideToggle));
+}(this, (function (exports, i0, dialog, table, sort, untilDestroy, common, forms, i1$1, rxjs, operators, i1, a11y, coercion, formField, select, icon, i1$2, tooltip, core, button, checkbox, input, menu, progressSpinner, card, divider, chips, datepicker, list, flexLayout, ngxInfiniteScroll, ngxDocViewer, ngxEditor, XLSX, platformBrowser, jsondiffpatch, keycodes, autocomplete, buttonToggle, slideToggle) { 'use strict';
 
     var ActionPopup = /** @class */ (function () {
         function ActionPopup() {
@@ -2000,6 +2000,7 @@
             this.dialog = dialog;
             this.readonly = false;
             this.labelText = 'Note';
+            this.commentsView = false;
             this.notes = [];
             this.displayedColumns = [
                 'index',
@@ -2113,12 +2114,57 @@
                 this.loadData();
             }
         };
+        NoteListComponent.prototype.commentAction = function (event) {
+            if (event.type === "save") {
+                if (event.value.id) {
+                    this.editComment(event.value);
+                    return;
+                }
+                this.addComment(event.value);
+                return;
+            }
+            this.deleteNote(event.value);
+        };
+        NoteListComponent.prototype.editComment = function (comment) {
+            return __awaiter(this, void 0, void 0, function () {
+                var result, index;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, this.noteService.editNote(comment)];
+                        case 1:
+                            result = _a.sent();
+                            index = this.notes.findIndex(function (x) { return x.id === comment.id; });
+                            if (index !== -1) {
+                                this.notes[index] = result.item;
+                            }
+                            return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        NoteListComponent.prototype.addComment = function (comment) {
+            return __awaiter(this, void 0, void 0, function () {
+                var result;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            comment.related_model_id = this.relatedModelId;
+                            comment.model_type = this.modelType;
+                            return [4 /*yield*/, this.noteService.addNote(comment)];
+                        case 1:
+                            result = _a.sent();
+                            this.notes.push(result.item);
+                            return [2 /*return*/];
+                    }
+                });
+            });
+        };
         return NoteListComponent;
     }());
     NoteListComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'app-note-list',
-                    template: "<div fxLayout=\"column\" fxLayoutGap=\"1.5rem\" class=\"m-4\">\n\n    <div fxLayout fxLayoutAlign=\"center center\" fxLayoutGap=\"1rem\">\n        <h3 class=\"m-0 font-weight-bold mr-3\">{{labelText}}s</h3>\n        <button class=\"d-print-none\" *ngIf=\"!readonly\" mat-raised-button color=\"primary\" type=\"button\"\n            (click)=\"addNote()\">+ Add</button>\n    </div>\n\n    <div class=\"w-00 scroll-container\" infiniteScroll [infiniteScrollDistance]=\"1\" [infiniteScrollThrottle]=\"50\"\n        (scrolled)=\"onScroll()\" [scrollWindow]=\"false\">\n        <table mat-table [dataSource]=\"notes\" class=\"w-100\" multiTemplateDataRows>\n\n            <!-- Index Column -->\n            <ng-container matColumnDef=\"index\">\n                <th mat-header-cell *matHeaderCellDef> # </th>\n                <td mat-cell *matCellDef=\"let note; let i = dataIndex\"> {{ i+1 }} </td>\n            </ng-container>\n\n\n            <ng-container matColumnDef=\"note\">\n                <th mat-header-cell *matHeaderCellDef> {{labelText}} </th>\n                <td mat-cell *matCellDef=\"let note\">\n                    {{note?.note}}\n                </td>\n            </ng-container>\n\n            <ng-container matColumnDef=\"actions\">\n                <th mat-header-cell *matHeaderCellDef class=\"d-print-none\"> Actions </th>\n                <td mat-cell *matCellDef=\"let note\" class=\"d-print-none\">\n                    <button type=\"button\" mat-icon-button (click)=\"editNote(note)\">\n                        <mat-icon>edit</mat-icon>\n                    </button>\n                    <button type=\"button\" mat-icon-button (click)=\"deleteNote(note)\">\n                        <mat-icon>delete</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</div>",
+                    template: "<div fxLayout=\"column\" fxLayoutGap=\"1.5rem\" class=\"m-4\" *ngIf=\"!commentsView\">\n\n  <div fxLayout fxLayoutAlign=\"center center\" fxLayoutGap=\"1rem\">\n    <h3 class=\"m-0 font-weight-bold mr-3\">{{labelText}}s</h3>\n    <button class=\"d-print-none\" *ngIf=\"!readonly\" mat-raised-button color=\"primary\" type=\"button\" (click)=\"addNote()\">+\n      Add</button>\n  </div>\n\n  <div class=\"w-100 scroll-container\" infiniteScroll [infiniteScrollDistance]=\"1\" [infiniteScrollThrottle]=\"50\"\n    (scrolled)=\"onScroll()\" [scrollWindow]=\"false\">\n    <table mat-table [dataSource]=\"notes\" class=\"w-100\" multiTemplateDataRows>\n\n      <!-- Index Column -->\n      <ng-container matColumnDef=\"index\">\n        <th mat-header-cell *matHeaderCellDef> # </th>\n        <td mat-cell *matCellDef=\"let note; let i = dataIndex\"> {{ i+1 }} </td>\n      </ng-container>\n\n\n      <ng-container matColumnDef=\"note\">\n        <th mat-header-cell *matHeaderCellDef> {{labelText}} </th>\n        <td mat-cell *matCellDef=\"let note\">\n          {{note?.note}}\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"actions\">\n        <th mat-header-cell *matHeaderCellDef class=\"d-print-none\"> Actions </th>\n        <td mat-cell *matCellDef=\"let note\" class=\"d-print-none\">\n          <button type=\"button\" mat-icon-button (click)=\"editNote(note)\">\n            <mat-icon>edit</mat-icon>\n          </button>\n          <button type=\"button\" mat-icon-button (click)=\"deleteNote(note)\">\n            <mat-icon>delete</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</div>\n\n<div fxLayout=\"column\" fxLayoutGap=\"1.5rem\" *ngIf=\"commentsView\">\n  <div fxLayout fxLayoutAlign=\"center center\" fxLayoutGap=\"1rem\">\n    <h3 class=\"m-0 font-weight-bold mr-3\">{{labelText}}s</h3>\n  </div>\n\n  <div fxLayout=\"column\" fxLayoutAlign=\"start\" fxFlex=\"100%\">\n    <div class=\"w-100 scroll-container jumbotron\" infiniteScroll [infiniteScrollDistance]=\"1\"\n      [infiniteScrollThrottle]=\"50\" (scrolled)=\"onScroll()\" [scrollWindow]=\"false\">\n      <app-comment-form [commentData]=\"comment\" (action)=\"commentAction($event)\" *ngFor=\"let comment of notes\">\n      </app-comment-form>\n      <app-comment-form (action)=\"commentAction($event)\"></app-comment-form>\n    </div>\n  </div>\n</div>\n",
                     styles: [".scroll-container{max-height:400px;overflow-y:auto}"]
                 },] }
     ];
@@ -2130,11 +2176,95 @@
         relatedModelId: [{ type: i0.Input }],
         modelType: [{ type: i0.Input }],
         readonly: [{ type: i0.Input }],
-        labelText: [{ type: i0.Input }]
+        labelText: [{ type: i0.Input }],
+        commentsView: [{ type: i0.Input }]
+    };
+
+    var CommentFormComponent = /** @class */ (function () {
+        function CommentFormComponent(fb, credentialService) {
+            this.fb = fb;
+            this.credentialService = credentialService;
+            this.action = new i0.EventEmitter();
+            this.createForm();
+        }
+        Object.defineProperty(CommentFormComponent.prototype, "commentData", {
+            set: function (data) {
+                this.view = !!data;
+                this._commentData = data;
+                this.commentFormGroup.patchValue(data);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        CommentFormComponent.prototype.ngOnInit = function () { };
+        Object.defineProperty(CommentFormComponent.prototype, "isLoggedIn", {
+            get: function () {
+                return this.credentialService.isAuthenticated;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(CommentFormComponent.prototype, "currentUser", {
+            get: function () {
+                return this.credentialService.credentials.user;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        CommentFormComponent.prototype.createForm = function () {
+            //TODO: Finialize and add more validations.
+            this.commentFormGroup = this.fb.group({
+                id: [""],
+                note: [""],
+                model_type: [""],
+                related_model_id: [""],
+            });
+        };
+        CommentFormComponent.prototype.submit = function () {
+            if (this.commentFormGroup.get("note").value) {
+                if (this._commentData) {
+                    this.view = !this.view;
+                }
+                this.action.emit({ type: "save", value: this.commentFormGroup.value });
+                this.commentFormGroup.reset();
+            }
+            else if (this.commentFormGroup.get("id").value) {
+                this.deleteComment();
+            }
+        };
+        CommentFormComponent.prototype.hideEdit = function () {
+            if (this.commentFormGroup.get("id").value) {
+                this.view = !this.view;
+            }
+        };
+        CommentFormComponent.prototype.editComment = function () {
+            this.view = !this.view;
+            this.commentFormGroup.patchValue(this._commentData);
+        };
+        CommentFormComponent.prototype.deleteComment = function () {
+            this.action.emit({ type: "delete", value: this.commentFormGroup.value });
+        };
+        CommentFormComponent.prototype.ngOnDestroy = function () { };
+        return CommentFormComponent;
+    }());
+    CommentFormComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: "app-comment-form",
+                    template: "<form (ngSubmit)=\"submit()\" [formGroup]=\"commentFormGroup\">\n  <div fxLayout=\"column\" class=\"my-2\" [ngClass]=\"{ 'border border-primary shadow rounded ': view}\">\n    <div *ngIf=\"!view\" fxLayout=\"column\">\n      <mat-form-field appearance=\"outline\" style=\"background-color:white;\">\n        <mat-label>Comment</mat-label>\n        <textarea matInput rows=\"5\" placeholder=\"Add a comment...\" formControlName=\"note\" autocomplete=\"off\"></textarea>\n      </mat-form-field>\n\n      <div fxLayout fxLayoutGap=\"1rem\" class=\"mt-2\">\n        <span fxFlex></span>\n        <button *ngIf=\"_commentData\" mat-button type=\"button\" (click)=\"view = !view\">\n          Cancel\n        </button>\n        <button mat-raised-button color=\"primary\" type=\"submit\">\n          {{ _commentData ? \"Update\" : \"Post comment\" }}\n        </button>\n      </div>\n    </div>\n\n    <div fxLayout=\"column\" *ngIf=\"view\" class=\"p-2 m-2\">\n      <div fxLayout=\"row wrap\" fxLayoutGap=\".5rem\">\n        <div fxFlex=\"20%\" fxLayoutAlign=\"start\">\n          <button mat-icon-button type=\"button\" style=\"color:grey\">\n            <mat-icon style=\"font-size:60px\">account_circle</mat-icon>\n          </button>\n        </div>\n        <div fxFlex=\"75%\">\n          <div fxLayout=\"column\" fxLayoutGap=\".5rem\">\n            <div class=\"font-weight-bold\">{{ _commentData?.creator?.name }}</div>\n            <div class=\"text-muted\">{{ _commentData.updated_at | date:'medium' }}</div>\n          </div>\n        </div>\n      </div>\n      <app-read-more class=\"mt-2\" [text]=\"_commentData.note\"></app-read-more>\n      <div fxLayout class=\"mt-1\" fxLayoutGap=\"1rem\" *ngIf=\"isLoggedIn && currentUser.id === _commentData.creator_id\">\n        <a href=\"javascript:;\" (click)=\"editComment()\">\n          Edit\n        </a>\n        <a href=\"javascript:;\" (click)=\"deleteComment()\">\n          Delete\n        </a>\n      </div>\n    </div>\n  </div>\n</form>",
+                    styles: [":host ::ng-deep .mat-form-field-wrapper{margin:0!important;padding-bottom:0!important}"]
+                },] }
+    ];
+    CommentFormComponent.ctorParameters = function () { return [
+        { type: forms.FormBuilder },
+        { type: CredentialsService }
+    ]; };
+    CommentFormComponent.propDecorators = {
+        commentData: [{ type: i0.Input }],
+        action: [{ type: i0.Output }]
     };
 
     var SearchableSelectorComponent_1;
-    exports.ɵt = SearchableSelectorComponent_1 = /** @class */ (function () {
+    exports.ɵx = SearchableSelectorComponent_1 = /** @class */ (function () {
         function SearchableSelectorComponent(formBuilder, _focusMonitor, http, _elementRef, dialog, ngControl) {
             var _this = this;
             this._focusMonitor = _focusMonitor;
@@ -2383,8 +2513,8 @@
         };
         return SearchableSelectorComponent;
     }());
-    exports.ɵt.nextId = 0;
-    exports.ɵt.decorators = [
+    exports.ɵx.nextId = 0;
+    exports.ɵx.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>",
@@ -2397,7 +2527,7 @@
                     styles: [".searchable-selctor-container{display:flex}.relative-icon{position:relative;top:-4px}"]
                 },] }
     ];
-    exports.ɵt.ctorParameters = function () { return [
+    exports.ɵx.ctorParameters = function () { return [
         { type: forms.FormBuilder },
         { type: a11y.FocusMonitor },
         { type: HttpService },
@@ -2405,7 +2535,7 @@
         { type: dialog.MatDialog },
         { type: forms.NgControl, decorators: [{ type: i0.Optional }, { type: i0.Self }] }
     ]; };
-    exports.ɵt.propDecorators = {
+    exports.ɵx.propDecorators = {
         valueField: [{ type: i0.Input }],
         titleField: [{ type: i0.Input }],
         apiUrl: [{ type: i0.Input }],
@@ -2428,9 +2558,9 @@
         disabled: [{ type: i0.Input }],
         value: [{ type: i0.Input }]
     };
-    exports.ɵt = SearchableSelectorComponent_1 = __decorate([
+    exports.ɵx = SearchableSelectorComponent_1 = __decorate([
         untilDestroy.UntilDestroy()
-    ], exports.ɵt);
+    ], exports.ɵx);
 
     var MatSelectInfiniteScrollDirective = /** @class */ (function () {
         function MatSelectInfiniteScrollDirective(matSelect, ngZone) {
@@ -2738,7 +2868,7 @@
     Timeline.LAST_YEAR = 11;
     Timeline.ALL = 12;
 
-    exports.ɵx = /** @class */ (function () {
+    exports.ɵbb = /** @class */ (function () {
         function TimelineFilterComponent() {
             this.timelineValue = new forms.FormControl('');
             this.timelines = [
@@ -2794,15 +2924,15 @@
         };
         return TimelineFilterComponent;
     }());
-    exports.ɵx.decorators = [
+    exports.ɵbb.decorators = [
         { type: i0.Component, args: [{
                     selector: 'app-timeline-filter',
                     template: "<ng-container [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>",
                     styles: [""]
                 },] }
     ];
-    exports.ɵx.ctorParameters = function () { return []; };
-    exports.ɵx.propDecorators = {
+    exports.ɵbb.ctorParameters = function () { return []; };
+    exports.ɵbb.propDecorators = {
         timelineValue: [{ type: i0.Input }],
         timelines: [{ type: i0.Input }],
         labelText: [{ type: i0.Input }],
@@ -2813,9 +2943,9 @@
         form: [{ type: i0.Input }],
         defaultValue: [{ type: i0.Input }]
     };
-    exports.ɵx = __decorate([
+    exports.ɵbb = __decorate([
         untilDestroy.UntilDestroy()
-    ], exports.ɵx);
+    ], exports.ɵbb);
 
     var LoaderComponent = /** @class */ (function () {
         function LoaderComponent() {
@@ -3330,6 +3460,68 @@
                 },] }
     ];
 
+    var ReadMoreComponent = /** @class */ (function () {
+        function ReadMoreComponent() {
+            this.maxLength = 100;
+            this.hideToggle = true;
+            this.isCollapsed = true;
+        }
+        ReadMoreComponent.prototype.ngOnInit = function () {
+            this.determineView();
+        };
+        ReadMoreComponent.prototype.toggleView = function () {
+            this.isCollapsed = !this.isCollapsed;
+            this.determineView();
+        };
+        ReadMoreComponent.prototype.determineView = function () {
+            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;
+            }
+        };
+        return ReadMoreComponent;
+    }());
+    ReadMoreComponent.decorators = [
+        { type: i0.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 = function () { return []; };
+    ReadMoreComponent.propDecorators = {
+        text: [{ type: i0.Input }],
+        maxLength: [{ type: i0.Input }]
+    };
+
+    var ReadMoreModule = /** @class */ (function () {
+        function ReadMoreModule() {
+        }
+        return ReadMoreModule;
+    }());
+    ReadMoreModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    declarations: [ReadMoreComponent],
+                    imports: [
+                        common.CommonModule,
+                        MaterialModule,
+                        flexLayout.FlexLayoutModule
+                    ],
+                    exports: [
+                        ReadMoreComponent
+                    ]
+                },] }
+    ];
+
     var NoteModule = /** @class */ (function () {
         function NoteModule() {
         }
@@ -3339,7 +3531,8 @@
         { type: i0.NgModule, args: [{
                     declarations: [
                         NoteListComponent,
-                        NoteFormComponent
+                        NoteFormComponent,
+                        CommentFormComponent,
                     ],
                     imports: [
                         common.CommonModule,
@@ -3347,7 +3540,8 @@
                         ngxInfiniteScroll.InfiniteScrollModule,
                         flexLayout.FlexLayoutModule,
                         ActionPopupModule,
-                        MaterialModule
+                        MaterialModule,
+                        ReadMoreModule
                     ],
                     exports: [
                         NoteListComponent
@@ -3370,11 +3564,11 @@
                         MaterialModule
                     ],
                     declarations: [
-                        exports.ɵt,
+                        exports.ɵx,
                         MatSelectInfiniteScrollDirective
                     ],
                     exports: [
-                        exports.ɵt,
+                        exports.ɵx,
                         MatSelectInfiniteScrollDirective
                     ]
                 },] }
@@ -3418,7 +3612,7 @@
     }());
     TimelineFilterModule.decorators = [
         { type: i0.NgModule, args: [{
-                    declarations: [exports.ɵx],
+                    declarations: [exports.ɵbb],
                     imports: [
                         common.CommonModule,
                         TimelineFilterRoutingModule,
@@ -3426,7 +3620,7 @@
                         MaterialModule,
                         forms.ReactiveFormsModule
                     ],
-                    exports: [exports.ɵx]
+                    exports: [exports.ɵbb]
                 },] }
     ];
 
@@ -3528,7 +3722,7 @@
             required: "Email Type is required"
         },
     };
-    exports.ɵba = /** @class */ (function () {
+    exports.ɵbe = /** @class */ (function () {
         function EmailSubscriptionUserFormComponent(fb, formValidatorService, alertService, dialogRef, data, http) {
             this.fb = fb;
             this.formValidatorService = formValidatorService;
@@ -3590,14 +3784,14 @@
         };
         return EmailSubscriptionUserFormComponent;
     }());
-    exports.ɵba.decorators = [
+    exports.ɵbe.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.ɵba.ctorParameters = function () { return [
+    exports.ɵbe.ctorParameters = function () { return [
         { type: forms.FormBuilder },
         { type: FormValidatorService },
         { type: AlertService },
@@ -3605,9 +3799,9 @@
         { type: undefined, decorators: [{ type: i0.Inject, args: [dialog.MAT_DIALOG_DATA,] }] },
         { type: HttpService }
     ]; };
-    exports.ɵba = __decorate([
+    exports.ɵbe = __decorate([
         untilDestroy.UntilDestroy()
-    ], exports.ɵba);
+    ], exports.ɵbe);
 
     var EmailSubscriptionUserFormModule = /** @class */ (function () {
         function EmailSubscriptionUserFormModule() {
@@ -3616,7 +3810,7 @@
     }());
     EmailSubscriptionUserFormModule.decorators = [
         { type: i0.NgModule, args: [{
-                    declarations: [exports.ɵba],
+                    declarations: [exports.ɵbe],
                     imports: [
                         common.CommonModule,
                         MaterialModule,
@@ -3626,12 +3820,12 @@
                         EmailSubscriptionUserFormRoutingModule,
                         LoaderModule
                     ],
-                    entryComponents: [exports.ɵba]
+                    entryComponents: [exports.ɵbe]
                 },] }
     ];
 
     var log$4 = new Logger('EmailSubscriptionUser list');
-    exports.ɵbb = /** @class */ (function () {
+    exports.ɵbf = /** @class */ (function () {
         function EmailSubscriptionUserListComponent(dialog, http, router) {
             this.dialog = dialog;
             this.http = http;
@@ -3692,7 +3886,7 @@
         };
         EmailSubscriptionUserListComponent.prototype.addEmailSubscriptionUser = function () {
             var _this = this;
-            var dialogRef = this.dialog.open(exports.ɵba, {
+            var dialogRef = this.dialog.open(exports.ɵbe, {
                 width: '800px',
                 autoFocus: false,
                 data: {} // Any data passed here will be injected into the model
@@ -3707,7 +3901,7 @@
         EmailSubscriptionUserListComponent.prototype.editEmailSubscriptionUser = function (event, esUser) {
             var _this = this;
             event.stopPropagation();
-            var dialogRef = this.dialog.open(exports.ɵba, {
+            var dialogRef = this.dialog.open(exports.ɵbe, {
                 width: '800px',
                 autoFocus: false,
                 data: {
@@ -3765,24 +3959,24 @@
         };
         return EmailSubscriptionUserListComponent;
     }());
-    exports.ɵbb.decorators = [
+    exports.ɵbf.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.ɵbb.ctorParameters = function () { return [
+    exports.ɵbf.ctorParameters = function () { return [
         { type: dialog.MatDialog },
         { type: HttpService },
         { type: i1$2.Router }
     ]; };
-    exports.ɵbb.propDecorators = {
+    exports.ɵbf.propDecorators = {
         sort: [{ type: i0.ViewChild, args: [sort.MatSort, { static: true },] }]
     };
-    exports.ɵbb = __decorate([
+    exports.ɵbf = __decorate([
         untilDestroy.UntilDestroy()
-    ], exports.ɵbb);
+    ], exports.ɵbf);
 
     var esulr = {
         title: 'Email Subscription Users',
@@ -3794,7 +3988,7 @@
     var routes$4 = [
         {
             path: '',
-            component: exports.ɵbb,
+            component: exports.ɵbf,
             canActivate: [AuthenticationGuard],
             data: esulr
         },
@@ -3824,7 +4018,7 @@
                 },] }
     ];
 
-    exports.ɵbg = /** @class */ (function () {
+    exports.ɵbh = /** @class */ (function () {
         function EmailSubscriptionUserListFilterComponent(fb) {
             this.fb = fb;
             this.valueChange = new i0.EventEmitter();
@@ -3853,22 +4047,22 @@
         };
         return EmailSubscriptionUserListFilterComponent;
     }());
-    exports.ɵbg.decorators = [
+    exports.ɵbh.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('user_id')\" matSuffix mat-icon-button\n            (click)=\"resetFieldValue('user_id')\">\n            <mat-icon>close</mat-icon>\n        </button>\n    </mat-form-field>\n</form>",
                     styles: [""]
                 },] }
     ];
-    exports.ɵbg.ctorParameters = function () { return [
+    exports.ɵbh.ctorParameters = function () { return [
         { type: forms.FormBuilder }
     ]; };
-    exports.ɵbg.propDecorators = {
+    exports.ɵbh.propDecorators = {
         valueChange: [{ type: i0.Output }]
     };
-    exports.ɵbg = __decorate([
+    exports.ɵbh = __decorate([
         untilDestroy.UntilDestroy()
-    ], exports.ɵbg);
+    ], exports.ɵbh);
 
     var EmailSubscriptionUserListFilterModule = /** @class */ (function () {
         function EmailSubscriptionUserListFilterModule() {
@@ -3877,7 +4071,7 @@
     }());
     EmailSubscriptionUserListFilterModule.decorators = [
         { type: i0.NgModule, args: [{
-                    declarations: [exports.ɵbg],
+                    declarations: [exports.ɵbh],
                     imports: [
                         common.CommonModule,
                         MaterialModule,
@@ -3886,7 +4080,7 @@
                         SearchableSelectorModule,
                         EmailSubscriptionUserListFilterRoutingModule
                     ],
-                    exports: [exports.ɵbg]
+                    exports: [exports.ɵbh]
                 },] }
     ];
 
@@ -3897,7 +4091,7 @@
     }());
     EmailSubscriptionUserListModule.decorators = [
         { type: i0.NgModule, args: [{
-                    declarations: [exports.ɵbb],
+                    declarations: [exports.ɵbf],
                     imports: [
                         common.CommonModule,
                         ngxInfiniteScroll.InfiniteScrollModule,
@@ -3908,7 +4102,7 @@
                         EmailSubscriptionUserFormModule,
                         EmailSubscriptionUserListFilterModule
                     ],
-                    exports: [exports.ɵbb]
+                    exports: [exports.ɵbf]
                 },] }
     ];
 
@@ -3964,7 +4158,7 @@
             required: "Frequency is required"
         },
     };
-    exports.ɵbh = /** @class */ (function () {
+    exports.ɵbi = /** @class */ (function () {
         function EmailSubscriptionTypeFormComponent(fb, formValidatorService, alertService, dialogRef, data, http) {
             this.fb = fb;
             this.formValidatorService = formValidatorService;
@@ -4028,14 +4222,14 @@
         };
         return EmailSubscriptionTypeFormComponent;
     }());
-    exports.ɵbh.decorators = [
+    exports.ɵbi.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.ɵbh.ctorParameters = function () { return [
+    exports.ɵbi.ctorParameters = function () { return [
         { type: forms.FormBuilder },
         { type: FormValidatorService },
         { type: AlertService },
@@ -4043,9 +4237,9 @@
         { type: undefined, decorators: [{ type: i0.Inject, args: [dialog.MAT_DIALOG_DATA,] }] },
         { type: HttpService }
     ]; };
-    exports.ɵbh = __decorate([
+    exports.ɵbi = __decorate([
         untilDestroy.UntilDestroy()
-    ], exports.ɵbh);
+    ], exports.ɵbi);
 
     var EmailSubscriptionTypeFormModule = /** @class */ (function () {
         function EmailSubscriptionTypeFormModule() {
@@ -4054,7 +4248,7 @@
     }());
     EmailSubscriptionTypeFormModule.decorators = [
         { type: i0.NgModule, args: [{
-                    declarations: [exports.ɵbh],
+                    declarations: [exports.ɵbi],
                     imports: [
                         common.CommonModule,
                         MaterialModule,
@@ -4064,12 +4258,12 @@
                         EmailSubscriptionTypeFormRoutingModule,
                         LoaderModule
                     ],
-                    exports: [exports.ɵbh],
-                    entryComponents: [exports.ɵbh]
+                    exports: [exports.ɵbi],
+                    entryComponents: [exports.ɵbi]
                 },] }
     ];
 
-    exports.ɵbi = /** @class */ (function () {
+    exports.ɵbj = /** @class */ (function () {
         function EmailSubscriptionTypeListComponent(dialog, http) {
             this.dialog = dialog;
             this.http = http;
@@ -4133,7 +4327,7 @@
         };
         EmailSubscriptionTypeListComponent.prototype.addEmailSubscriptionType = function () {
             var _this = this;
-            var dialogRef = this.dialog.open(exports.ɵbh, {
+            var dialogRef = this.dialog.open(exports.ɵbi, {
                 width: '400px',
                 autoFocus: false,
                 data: {} // Any data passed here will be injected into the model
@@ -4147,7 +4341,7 @@
         EmailSubscriptionTypeListComponent.prototype.editEmailSubscriptionType = function (event, emailSubscriptionType) {
             var _this = this;
             event.stopPropagation();
-            var dialogRef = this.dialog.open(exports.ɵbh, {
+            var dialogRef = this.dialog.open(exports.ɵbi, {
                 width: '400px',
                 autoFocus: false,
                 data: {
@@ -4204,23 +4398,23 @@
         };
         return EmailSubscriptionTypeListComponent;
     }());
-    exports.ɵbi.decorators = [
+    exports.ɵbj.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> Code </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.ɵbi.ctorParameters = function () { return [
+    exports.ɵbj.ctorParameters = function () { return [
         { type: dialog.MatDialog },
         { type: HttpService }
     ]; };
-    exports.ɵbi.propDecorators = {
+    exports.ɵbj.propDecorators = {
         sort: [{ type: i0.ViewChild, args: [sort.MatSort, { static: true },] }]
     };
-    exports.ɵbi = __decorate([
+    exports.ɵbj = __decorate([
         untilDestroy.UntilDestroy()
-    ], exports.ɵbi);
+    ], exports.ɵbj);
 
     var estlr = {
         title: 'Email Subscription Type',
@@ -4232,7 +4426,7 @@
     var routes$8 = [
         {
             path: '',
-            component: exports.ɵbi,
+            component: exports.ɵbj,
             canActivate: [AuthenticationGuard],
             data: estlr
         },
@@ -4256,7 +4450,7 @@
     }());
     EmailSubscriptionTypeListModule.decorators = [
         { type: i0.NgModule, args: [{
-                    declarations: [exports.ɵbi],
+                    declarations: [exports.ɵbj],
                     imports: [
                         common.CommonModule,
                         MaterialModule,
@@ -4266,11 +4460,11 @@
                         EmailSubscriptionTypeFormModule,
                         EmailSubscriptionTypeListRoutingModule
                     ],
-                    exports: [exports.ɵbi]
+                    exports: [exports.ɵbj]
                 },] }
     ];
 
-    exports.ɵbj = /** @class */ (function () {
+    exports.ɵbk = /** @class */ (function () {
         function EmailSubscriptionForUserComponent(http) {
             this.http = http;
             this.subscriptions = [];
@@ -4325,19 +4519,19 @@
         };
         return EmailSubscriptionForUserComponent;
     }());
-    exports.ɵbj.decorators = [
+    exports.ɵbk.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.ɵbj.ctorParameters = function () { return [
+    exports.ɵbk.ctorParameters = function () { return [
         { type: HttpService }
     ]; };
-    exports.ɵbj = __decorate([
+    exports.ɵbk = __decorate([
         untilDestroy.UntilDestroy()
-    ], exports.ɵbj);
+    ], exports.ɵbk);
 
     var esfur = {
         permissions: {
@@ -4347,7 +4541,7 @@
     var routes$9 = [
         {
             path: '',
-            component: exports.ɵbj,
+            component: exports.ɵbk,
             canActivate: [AuthenticationGuard],
             data: esfur
         },
@@ -4371,7 +4565,7 @@
     }());
     EmailSubscriptionForUserModule.decorators = [
         { type: i0.NgModule, args: [{
-                    declarations: [exports.ɵbj],
+                    declarations: [exports.ɵbk],
                     imports: [
                         common.CommonModule,
                         ngxInfiniteScroll.InfiniteScrollModule,
@@ -4379,69 +4573,7 @@
                         flexLayout.FlexLayoutModule,
                         EmailSubscriptionForUserRoutingModule
                     ],
-                    exports: [exports.ɵbj]
-                },] }
-    ];
-
-    var ReadMoreComponent = /** @class */ (function () {
-        function ReadMoreComponent() {
-            this.maxLength = 100;
-            this.hideToggle = true;
-            this.isCollapsed = true;
-        }
-        ReadMoreComponent.prototype.ngOnInit = function () {
-            this.determineView();
-        };
-        ReadMoreComponent.prototype.toggleView = function () {
-            this.isCollapsed = !this.isCollapsed;
-            this.determineView();
-        };
-        ReadMoreComponent.prototype.determineView = function () {
-            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;
-            }
-        };
-        return ReadMoreComponent;
-    }());
-    ReadMoreComponent.decorators = [
-        { type: i0.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}"]
-                },] }
-    ];
-    ReadMoreComponent.ctorParameters = function () { return []; };
-    ReadMoreComponent.propDecorators = {
-        text: [{ type: i0.Input }],
-        maxLength: [{ type: i0.Input }]
-    };
-
-    var ReadMoreModule = /** @class */ (function () {
-        function ReadMoreModule() {
-        }
-        return ReadMoreModule;
-    }());
-    ReadMoreModule.decorators = [
-        { type: i0.NgModule, args: [{
-                    declarations: [ReadMoreComponent],
-                    imports: [
-                        common.CommonModule,
-                        MaterialModule,
-                        flexLayout.FlexLayoutModule
-                    ],
-                    exports: [
-                        ReadMoreComponent
-                    ]
+                    exports: [exports.ɵbk]
                 },] }
     ];
 
@@ -4633,7 +4765,7 @@
                 },] }
     ];
 
-    exports.ɵbk = /** @class */ (function () {
+    exports.ɵbl = /** @class */ (function () {
         function TechlifyUpdatesListComponent(dialog, alertService, techlifyUpdateService, fb) {
             this.dialog = dialog;
             this.alertService = alertService;
@@ -4793,26 +4925,26 @@
         };
         return TechlifyUpdatesListComponent;
     }());
-    exports.ɵbk.decorators = [
+    exports.ɵbl.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.ɵbk.ctorParameters = function () { return [
+    exports.ɵbl.ctorParameters = function () { return [
         { type: dialog.MatDialog },
         { type: AlertService },
         { type: TechlifyUpdateService },
         { type: forms.FormBuilder }
     ]; };
-    exports.ɵbk = __decorate([
+    exports.ɵbl = __decorate([
         untilDestroy.UntilDestroy()
-    ], exports.ɵbk);
+    ], exports.ɵbl);
 
     var routes$a = [
         { path: '', redirectTo: 'all', pathMatch: 'full' },
-        { path: 'all', component: exports.ɵbk },
+        { path: 'all', component: exports.ɵbl },
         //fallback
         {
             path: '**',
@@ -4839,7 +4971,7 @@
     }());
     TechlifyUpdateModule.decorators = [
         { type: i0.NgModule, args: [{
-                    declarations: [exports.ɵbk],
+                    declarations: [exports.ɵbl],
                     imports: [
                         common.CommonModule,
                         forms.ReactiveFormsModule,
@@ -4886,7 +5018,7 @@
         { type: i1$2.Router }
     ]; };
 
-    exports.ɵbs = /** @class */ (function () {
+    exports.ɵbr = /** @class */ (function () {
         function TechlifyUpdateHistoryComponent(dialog, techlifyUpdateService, fb, alertService) {
             this.dialog = dialog;
             this.techlifyUpdateService = techlifyUpdateService;
@@ -5023,26 +5155,26 @@
         };
         return TechlifyUpdateHistoryComponent;
     }());
-    exports.ɵbs.decorators = [
+    exports.ɵbr.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.ɵbs.ctorParameters = function () { return [
+    exports.ɵbr.ctorParameters = function () { return [
         { type: dialog.MatDialog },
         { type: TechlifyUpdateService },
         { type: forms.FormBuilder },
         { type: AlertService }
     ]; };
-    exports.ɵbs = __decorate([
+    exports.ɵbr = __decorate([
         untilDestroy.UntilDestroy()
-    ], exports.ɵbs);
+    ], exports.ɵbr);
 
     var routes$b = [
         { path: '', redirectTo: 'update-history', pathMatch: 'full' },
-        { path: 'update-history', component: exports.ɵbs },
+        { path: 'update-history', component: exports.ɵbr },
         //fallback
         {
             path: '**',
@@ -5079,7 +5211,7 @@
                         ReadMoreModule,
                         TechlifyUpdateHistoryRoutingModule
                     ],
-                    declarations: [exports.ɵbs]
+                    declarations: [exports.ɵbr]
                 },] }
     ];
 
@@ -7029,6 +7161,390 @@
                 },] }
     ];
 
+    var TechlifyFeatureService = /** @class */ (function () {
+        function TechlifyFeatureService(dataManager) {
+            this.dataManager = dataManager;
+        }
+        TechlifyFeatureService.prototype.getFeatures = function () {
+            return this.dataManager.GET("api/features");
+        };
+        TechlifyFeatureService.prototype.disableFeature = function (id) {
+            return this.dataManager.GET("api/feature/" + id + "/disable");
+        };
+        TechlifyFeatureService.prototype.enableFeature = function (id) {
+            return this.dataManager.GET("api/feature/" + id + "/enable");
+        };
+        return TechlifyFeatureService;
+    }());
+    TechlifyFeatureService.ɵprov = i0.ɵɵdefineInjectable({ factory: function TechlifyFeatureService_Factory() { return new TechlifyFeatureService(i0.ɵɵinject(DataManager)); }, token: TechlifyFeatureService, providedIn: "root" });
+    TechlifyFeatureService.decorators = [
+        { type: i0.Injectable, args: [{
+                    providedIn: 'root'
+                },] }
+    ];
+    TechlifyFeatureService.ctorParameters = function () { return [
+        { type: DataManager }
+    ]; };
+
+    exports.TechlifyFeatureListingComponent = /** @class */ (function () {
+        function TechlifyFeatureListingComponent(dataManager, errorHandler, fb, alertService, dialog, storage, featureService) {
+            this.dataManager = dataManager;
+            this.errorHandler = errorHandler;
+            this.fb = fb;
+            this.alertService = alertService;
+            this.dialog = dialog;
+            this.storage = storage;
+            this.featureService = featureService;
+            this.features = [];
+            this.displayedColumns = [
+                'index',
+                'feature',
+                'description',
+                'actions',
+            ];
+            this.dataSource = new table.MatTableDataSource();
+            this.page = 1;
+            this.perPage = 25;
+            this.isWorking = false;
+            this.filterFormGroup = this.fb.group({
+                num_items: [""]
+            });
+        }
+        TechlifyFeatureListingComponent.prototype.ngOnInit = function () {
+            this.loadData();
+            this.listenForChanges();
+        };
+        TechlifyFeatureListingComponent.prototype.listenForChanges = function () {
+            var _this = this;
+            this.filterFormGroup.valueChanges
+                .pipe(operators.debounceTime(500), untilDestroy.untilDestroyed(this))
+                .subscribe(function (changes) {
+                _this.reload();
+            });
+        };
+        TechlifyFeatureListingComponent.prototype.loadData = function () {
+            return __awaiter(this, void 0, void 0, function () {
+                var result, filter, error_1;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            _a.trys.push([0, 2, 3, 4]);
+                            this.isWorking = true;
+                            filter = this.filterFormGroup.value;
+                            filter.page = this.page;
+                            filter.perPage = this.perPage;
+                            return [4 /*yield*/, this.dataManager.GET("api/features", filter)];
+                        case 1:
+                            result = _a.sent();
+                            this.features = this.features.concat(result.data);
+                            this.dataSource = new table.MatTableDataSource(this.features);
+                            if (!this.storage.getItem('features')) {
+                                this.setStorage(this.features);
+                            }
+                            this.isWorking = false;
+                            return [3 /*break*/, 4];
+                        case 2:
+                            error_1 = _a.sent();
+                            this.errorHandler.handleError(error_1);
+                            return [3 /*break*/, 4];
+                        case 3:
+                            this.isWorking = false;
+                            return [7 /*endfinally*/];
+                        case 4: return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        TechlifyFeatureListingComponent.prototype.toggeleFeature = function (element, feature) {
+            return __awaiter(this, void 0, void 0, function () {
+                var status, data, dialogRef;
+                var _this = this;
+                return __generator(this, function (_a) {
+                    status = element ? 'Off' : "On";
+                    dialogRef = this.dialog.open(ActionPopupComponent, {
+                        width: "400px",
+                        data: {
+                            title: "Turn this feature " + status + "?",
+                            message: "Would you like to turn " + feature.title + " feature " + status
+                        }
+                    });
+                    dialogRef.afterClosed().subscribe(function (result) { return __awaiter(_this, void 0, void 0, function () {
+                        var _a, error_2;
+                        return __generator(this, function (_b) {
+                            switch (_b.label) {
+                                case 0:
+                                    if (!result) return [3 /*break*/, 9];
+                                    _b.label = 1;
+                                case 1:
+                                    _b.trys.push([1, 6, 7, 8]);
+                                    if (!element) return [3 /*break*/, 3];
+                                    return [4 /*yield*/, this.featureService.disableFeature(feature.id)];
+                                case 2:
+                                    _a = _b.sent();
+                                    return [3 /*break*/, 5];
+                                case 3: return [4 /*yield*/, this.featureService.enableFeature(feature.id)];
+                                case 4:
+                                    _a = _b.sent();
+                                    _b.label = 5;
+                                case 5:
+                                    data = _a;
+                                    return [3 /*break*/, 8];
+                                case 6:
+                                    error_2 = _b.sent();
+                                    this.errorHandler.handleError(error_2);
+                                    return [3 /*break*/, 8];
+                                case 7:
+                                    this.alertService.addAlert("You have just turned " + status + " the feature " + feature.title, 'success');
+                                    this.reload();
+                                    this.storage.removeItem('features');
+                                    this.setStorage(this.features);
+                                    this.isWorking = false;
+                                    return [7 /*endfinally*/];
+                                case 8: return [3 /*break*/, 10];
+                                case 9:
+                                    this.reload();
+                                    _b.label = 10;
+                                case 10: return [2 /*return*/];
+                            }
+                        });
+                    }); });
+                    return [2 /*return*/];
+                });
+            });
+        };
+        TechlifyFeatureListingComponent.prototype.setStorage = function (features) {
+            var e_1, _a;
+            var localFeatures = [];
+            try {
+                for (var features_1 = __values(features), features_1_1 = features_1.next(); !features_1_1.done; features_1_1 = features_1.next()) {
+                    var feature = features_1_1.value;
+                    if (!feature.client_feature) {
+                        if (feature.is_enabled_default) {
+                            localFeatures.push(feature.code);
+                        }
+                    }
+                    else {
+                        if (feature.client_feature.is_enabled) {
+                            localFeatures.push(feature.code);
+                        }
+                    }
+                }
+            }
+            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            finally {
+                try {
+                    if (features_1_1 && !features_1_1.done && (_a = features_1.return)) _a.call(features_1);
+                }
+                finally { if (e_1) throw e_1.error; }
+            }
+            this.storage.setItem("features", localFeatures);
+        };
+        TechlifyFeatureListingComponent.prototype.reload = function () {
+            this.features = [];
+            this.page = 1;
+            if (!this.isWorking) {
+                this.loadData();
+            }
+        };
+        TechlifyFeatureListingComponent.prototype.onScroll = function () {
+            if (!this.isWorking && this.page < this.lastPage) {
+                this.page += 1;
+                this.loadData();
+            }
+        };
+        TechlifyFeatureListingComponent.prototype.sortColumn = function (event) {
+            var direction = event.direction.toString().toUpperCase();
+            this.assignFilter(event.active, direction);
+            this.reload();
+        };
+        TechlifyFeatureListingComponent.prototype.assignFilter = function (column, direction) {
+            switch (column) {
+                case 'name': {
+                    return this.filterFormGroup
+                        .get('sort_by')
+                        .setValue('first_name|' + direction);
+                }
+                case 'added_on': {
+                    return this.filterFormGroup
+                        .get('sort_by')
+                        .setValue('created_at|' + direction);
+                }
+            }
+        };
+        return TechlifyFeatureListingComponent;
+    }());
+    exports.TechlifyFeatureListingComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'app-techlify-listing-feature',
+                    template: "<div fxLayout=\"column\" fxLayoutGap=\"3rem\" class=\"p-3\">\n  <div fxLayout=\"column\" fxLayoutAlign=\"center center\" class=\"primary-color mt-3\">\n    <h3>Features Configuration</h3>\n    <mat-hint>\n      <i> Here you can specify which optional features you'd like to have available to your team </i>\n    </mat-hint>\n  </div>\n\n\n  <div>\n    <mat-card>\n      <mat-card-content fxlayout=\"column\" style=\"overflow: auto; height: 700px\" class=\"classifications-card\">\n        <table mat-table [dataSource]=\"dataSource\" class=\"mat-elevation-z8 w-100\" matSort multiTemplateDataRows\n          (matSortChange)=\"sortColumn($event)\" infiniteScroll [infiniteScrollDistance]=\"2\" [infiniteScrollThrottle]=\"50\"\n          (scrolled)=\"onScroll()\" [fromRoot]=\"true\" [infiniteScrollContainer]=\"'.classifications-card'\">\n          <!-- Index Column -->\n          <ng-container matColumnDef=\"index\">\n            <th mat-header-cell *matHeaderCellDef>#</th>\n            <td mat-cell *matCellDef=\"let element; let i = dataIndex\">\n              {{ i + 1 }}\n            </td>\n          </ng-container>\n\n          <!-- Title Column -->\n          <ng-container matColumnDef=\"feature\">\n            <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear>\n              Feature\n            </th>\n            <td mat-cell *matCellDef=\"let element\">{{ element?.title }}</td>\n          </ng-container>\n\n          <!-- Description Column -->\n          <ng-container matColumnDef=\"description\">\n            <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear>\n              Descriptions\n            </th>\n            <td mat-cell *matCellDef=\"let element\">\n              {{ element?.description }}\n            </td>\n          </ng-container>\n\n          <!-- Actions Column -->\n          <ng-container matColumnDef=\"actions\">\n            <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear>\n              Actions\n            </th>\n            <td mat-cell *matCellDef=\"let element\">\n              <div *ngIf=\"!element?.client_feature\">\n                <app-on-off-switch [value]=\"element?.is_enabled_default\"\n                  (click)=\"toggeleFeature(element?.is_enabled_default, element)\"></app-on-off-switch>\n              </div>\n              <div *ngIf=\"element?.client_feature\">\n                <app-on-off-switch [value]=\"element?.client_feature?.is_enabled\"\n                  (click)=\"toggeleFeature(element?.client_feature?.is_enabled, element)\"></app-on-off-switch>\n              </div>\n            </td>\n          </ng-container>\n\n          <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n          <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n        </table>\n      </mat-card-content>\n    </mat-card>\n  </div>\n</div>\n",
+                    styles: [""]
+                },] }
+    ];
+    exports.TechlifyFeatureListingComponent.ctorParameters = function () { return [
+        { type: DataManager },
+        { type: ErrorHandlerService },
+        { type: forms.FormBuilder },
+        { type: AlertService },
+        { type: dialog.MatDialog },
+        { type: StorageService },
+        { type: TechlifyFeatureService }
+    ]; };
+    exports.TechlifyFeatureListingComponent = __decorate([
+        untilDestroy.UntilDestroy()
+    ], exports.TechlifyFeatureListingComponent);
+
+    var routes$n = [
+        {
+            path: '',
+            component: exports.TechlifyFeatureListingComponent,
+            canActivate: [AuthenticationGuard]
+        },
+    ];
+    var TechlifyFeatureRoutes = i1$2.RouterModule.forChild(routes$n);
+
+    var OnOffSwitchComponent = /** @class */ (function () {
+        function OnOffSwitchComponent(fb) {
+            this.fb = fb;
+            this.slideToggle = this.fb.group({
+                toggle: [""]
+            });
+        }
+        OnOffSwitchComponent.prototype.ngOnInit = function () {
+            this.slideToggle.get('toggle').setValue(this.value);
+        };
+        return OnOffSwitchComponent;
+    }());
+    OnOffSwitchComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'app-on-off-switch',
+                    template: "<form [formGroup]=\"slideToggle\">\n  <mat-slide-toggle formControlName=\"toggle\">On / Off\n  </mat-slide-toggle>\n</form>\n",
+                    styles: [""]
+                },] }
+    ];
+    OnOffSwitchComponent.ctorParameters = function () { return [
+        { type: forms.FormBuilder }
+    ]; };
+    OnOffSwitchComponent.propDecorators = {
+        value: [{ type: i0.Input }]
+    };
+
+    var TechlifyFeatureEnabledDirective = /** @class */ (function () {
+        function TechlifyFeatureEnabledDirective(el, featureService, errorHandler, storage) {
+            this.el = el;
+            this.featureService = featureService;
+            this.errorHandler = errorHandler;
+            this.storage = storage;
+            this.localFeatures = [];
+        }
+        TechlifyFeatureEnabledDirective.prototype.ngOnInit = function () {
+            if (!this.storage.getItem('features')) {
+                this.getFeatures();
+            }
+            else {
+                this.checkForFeatureEnabled();
+            }
+        };
+        TechlifyFeatureEnabledDirective.prototype.getFeatures = function () {
+            return __awaiter(this, void 0, void 0, function () {
+                var features, _a, _b, feature, error_1;
+                var e_1, _c;
+                return __generator(this, function (_d) {
+                    switch (_d.label) {
+                        case 0:
+                            _d.trys.push([0, 2, 3, 4]);
+                            return [4 /*yield*/, this.featureService.getFeatures()];
+                        case 1:
+                            features = _d.sent();
+                            try {
+                                for (_a = __values(features.data), _b = _a.next(); !_b.done; _b = _a.next()) {
+                                    feature = _b.value;
+                                    if (!feature.client_feature) {
+                                        if (feature.is_enabled_default) {
+                                            this.localFeatures.push(feature.code);
+                                        }
+                                    }
+                                    else {
+                                        if (feature.client_feature.is_enabled) {
+                                            this.localFeatures.push(feature.code);
+                                        }
+                                    }
+                                }
+                            }
+                            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+                            finally {
+                                try {
+                                    if (_b && !_b.done && (_c = _a.return)) _c.call(_a);
+                                }
+                                finally { if (e_1) throw e_1.error; }
+                            }
+                            this.storage.setItem("features", this.localFeatures);
+                            return [3 /*break*/, 4];
+                        case 2:
+                            error_1 = _d.sent();
+                            this.errorHandler.handleError(error_1);
+                            return [3 /*break*/, 4];
+                        case 3:
+                            this.checkForFeatureEnabled();
+                            return [7 /*endfinally*/];
+                        case 4: return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        TechlifyFeatureEnabledDirective.prototype.checkForFeatureEnabled = function () {
+            try {
+                var features = this.storage.getItem('features');
+                var features_split = features.split(',');
+                if (features_split.includes(this.enabledFeature)) {
+                    this.el.nativeElement.style.display = "show";
+                }
+                else {
+                    this.el.nativeElement.remove();
+                }
+            }
+            catch (error) {
+                this.errorHandler.handleError(error);
+            }
+        };
+        return TechlifyFeatureEnabledDirective;
+    }());
+    TechlifyFeatureEnabledDirective.decorators = [
+        { type: i0.Directive, args: [{
+                    selector: '[techlifyFeatureEnabled]'
+                },] }
+    ];
+    TechlifyFeatureEnabledDirective.ctorParameters = function () { return [
+        { type: i0.ElementRef },
+        { type: TechlifyFeatureService },
+        { type: ErrorHandlerService },
+        { type: StorageService }
+    ]; };
+    TechlifyFeatureEnabledDirective.propDecorators = {
+        enabledFeature: [{ type: i0.Input, args: ['techlifyFeatureEnabled',] }]
+    };
+
+    var TechlifyFeatureModule = /** @class */ (function () {
+        function TechlifyFeatureModule() {
+        }
+        return TechlifyFeatureModule;
+    }());
+    TechlifyFeatureModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    imports: [
+                        common.CommonModule,
+                        MaterialModule,
+                        flexLayout.FlexLayoutModule,
+                        TechlifyFeatureRoutes,
+                        slideToggle.MatSlideToggleModule,
+                        forms.FormsModule,
+                        forms.ReactiveFormsModule,
+                        ngxInfiniteScroll.InfiniteScrollModule
+                    ],
+                    declarations: [exports.TechlifyFeatureListingComponent, OnOffSwitchComponent, TechlifyFeatureEnabledDirective],
+                    exports: [exports.TechlifyFeatureListingComponent, TechlifyFeatureEnabledDirective]
+                },] }
+    ];
+
     /*
      * Public API Surface of ngx-techlify-core
      */
@@ -7061,6 +7577,7 @@
     exports.AuthenticationGuard = AuthenticationGuard;
     exports.AuthenticationService = AuthenticationService;
     exports.CacheInterceptor = CacheInterceptor;
+    exports.CommentFormComponent = CommentFormComponent;
     exports.ConfigService = ConfigService;
     exports.CoreModule = CoreModule;
     exports.CredentialsService = CredentialsService;
@@ -7072,24 +7589,24 @@
     exports.DateValidator = DateValidator;
     exports.DocumentViewerComponent = DocumentViewerComponent;
     exports.DocumentViewerModule = DocumentViewerModule;
-    exports.EmailSubscriptionForUserComponent = exports.ɵbj;
+    exports.EmailSubscriptionForUserComponent = exports.ɵbk;
     exports.EmailSubscriptionForUserModule = EmailSubscriptionForUserModule;
     exports.EmailSubscriptionForUserRoutingModule = EmailSubscriptionForUserRoutingModule;
     exports.EmailSubscriptionModule = EmailSubscriptionModule;
     exports.EmailSubscriptionRoutingModule = EmailSubscriptionRoutingModule;
-    exports.EmailSubscriptionTypeFormComponent = exports.ɵbh;
+    exports.EmailSubscriptionTypeFormComponent = exports.ɵbi;
     exports.EmailSubscriptionTypeFormModule = EmailSubscriptionTypeFormModule;
     exports.EmailSubscriptionTypeFormRoutingModule = EmailSubscriptionTypeFormRoutingModule;
-    exports.EmailSubscriptionTypeListComponent = exports.ɵbi;
+    exports.EmailSubscriptionTypeListComponent = exports.ɵbj;
     exports.EmailSubscriptionTypeListModule = EmailSubscriptionTypeListModule;
     exports.EmailSubscriptionTypeListRoutingModule = EmailSubscriptionTypeListRoutingModule;
     exports.EmailSubscriptionTypeModule = EmailSubscriptionTypeModule;
     exports.EmailSubscriptionTypeRoutingModule = EmailSubscriptionTypeRoutingModule;
-    exports.EmailSubscriptionUserFormComponent = exports.ɵba;
+    exports.EmailSubscriptionUserFormComponent = exports.ɵbe;
     exports.EmailSubscriptionUserFormModule = EmailSubscriptionUserFormModule;
     exports.EmailSubscriptionUserFormRoutingModule = EmailSubscriptionUserFormRoutingModule;
-    exports.EmailSubscriptionUserListComponent = exports.ɵbb;
-    exports.EmailSubscriptionUserListFilterComponent = exports.ɵbg;
+    exports.EmailSubscriptionUserListComponent = exports.ɵbf;
+    exports.EmailSubscriptionUserListFilterComponent = exports.ɵbh;
     exports.EmailSubscriptionUserListFilterModule = EmailSubscriptionUserListFilterModule;
     exports.EmailSubscriptionUserListFilterRoutingModule = EmailSubscriptionUserListFilterRoutingModule;
     exports.EmailSubscriptionUserListModule = EmailSubscriptionUserListModule;
@@ -7133,20 +7650,25 @@
     exports.NumItemsSelector = NumItemsSelector;
     exports.NumberSelector = NumberSelector;
     exports.PageEvent = PageEvent;
+    exports.ReadMoreComponent = ReadMoreComponent;
+    exports.ReadMoreModule = ReadMoreModule;
     exports.RouteReusableStrategy = RouteReusableStrategy;
-    exports.SearchableSelectorComponent = exports.ɵt;
+    exports.SearchableSelectorComponent = exports.ɵx;
     exports.SearchableSelectorModule = SearchableSelectorModule;
     exports.SnackModule = SnackModule;
     exports.StorageService = StorageService;
     exports.SuccessSnackComponent = SuccessSnackComponent;
     exports.TechlifyConfig = TechlifyConfig;
+    exports.TechlifyFeatureEnabledDirective = TechlifyFeatureEnabledDirective;
+    exports.TechlifyFeatureModule = TechlifyFeatureModule;
+    exports.TechlifyFeatureRoutes = TechlifyFeatureRoutes;
     exports.TechlifyTaggerTagFormConfigModel = TechlifyTaggerTagFormConfigModel;
     exports.TechlifyTaggerTagFormFieldModule = TechlifyTaggerTagFormFieldModule;
     exports.TechlifyTaggerTagSelectorModule = TechlifyTaggerTagSelectorModule;
     exports.TechlifyUpdateHistoryModule = TechlifyUpdateHistoryModule;
     exports.TechlifyUpdateModule = TechlifyUpdateModule;
     exports.Timeline = Timeline;
-    exports.TimelineFilterComponent = exports.ɵx;
+    exports.TimelineFilterComponent = exports.ɵbb;
     exports.TimelineFilterModule = TimelineFilterModule;
     exports.TokenInterceptor = TokenInterceptor;
     exports.UpdateNotifierComponent = UpdateNotifierComponent;
@@ -7159,22 +7681,27 @@
     exports.esulr = esulr;
     exports.ɵa = SnackModule;
     exports.ɵb = SuccessSnackComponent;
-    exports.ɵbc = AuthenticationGuard;
-    exports.ɵbd = CredentialsService;
-    exports.ɵbe = ConfigService;
-    exports.ɵbf = TechlifyConfig;
-    exports.ɵbl = TechlifyUpdateService;
-    exports.ɵbm = TechlifyUpdateRoutingModule;
-    exports.ɵbn = TechlifyUpdateFormModule;
-    exports.ɵbo = TechlifyUpdateFormComponent;
-    exports.ɵbp = ReadMoreModule;
-    exports.ɵbq = ReadMoreComponent;
-    exports.ɵbr = TechlifyUpdateHistoryRoutingModule;
-    exports.ɵbt = UpdateNotifierSnackComponent;
-    exports.ɵbu = UpdateViewModule;
-    exports.ɵbv = UpdateViewComponent;
+    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 = DataManager;
+    exports.ɵbx = ErrorHandlerService;
+    exports.ɵby = AlertService;
+    exports.ɵbz = StorageService;
     exports.ɵc = ErrorSnackComponent;
+    exports.ɵca = TechlifyFeatureService;
+    exports.ɵcb = AuthenticationGuard;
+    exports.ɵcc = OnOffSwitchComponent;
     exports.ɵd = HTTP_DYNAMIC_INTERCEPTORS;
     exports.ɵe = HttpService;
     exports.ɵf = RouteReusableStrategy;
@@ -7189,11 +7716,12 @@
     exports.ɵq = NoteListComponent;
     exports.ɵr = NoteService;
     exports.ɵs = NoteFormComponent;
-    exports.ɵu = MatSelectInfiniteScrollDirective;
-    exports.ɵv = NumItemsSelector;
-    exports.ɵw = NumberSelector;
-    exports.ɵy = TimelineFilterRoutingModule;
-    exports.ɵz = LoaderComponent;
+    exports.ɵt = CommentFormComponent;
+    exports.ɵu = CredentialsService;
+    exports.ɵv = ConfigService;
+    exports.ɵw = TechlifyConfig;
+    exports.ɵy = MatSelectInfiniteScrollDirective;
+    exports.ɵz = NumItemsSelector;
 
     Object.defineProperty(exports, '__esModule', { value: true });