@memberjunction/ng-explorer-core 1.8.0 → 2.0.0

package/dist/lib/single-list-detail/single-list-detail.component.js

@@ -8,63 +8,103 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { Component } from '@angular/core';
-import { LogError, Metadata, RunView } from '@memberjunction/core';
+import { LogError, LogStatus, Metadata, RunView } from '@memberjunction/core';
+import { Subject, debounceTime } from 'rxjs';
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/router";
 import * as i2 from "@memberjunction/ng-shared";
 import * as i3 from "@angular/common";
-import * as i4 from "@angular/forms";
-import * as i5 from "@progress/kendo-angular-grid";
-import * as i6 from "@progress/kendo-angular-dialog";
-import * as i7 from "@progress/kendo-angular-indicators";
-import * as i8 from "@progress/kendo-angular-buttons";
-import * as i9 from "@progress/kendo-angular-label";
-import * as i10 from "@progress/kendo-angular-dropdowns";
-function SingleListDetailComponent_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "kendo-loader", 4);
+import * as i4 from "@progress/kendo-angular-grid";
+import * as i5 from "@progress/kendo-angular-dialog";
+import * as i6 from "@progress/kendo-angular-indicators";
+import * as i7 from "@progress/kendo-angular-buttons";
+import * as i8 from "@progress/kendo-angular-inputs";
+const _c0 = a0 => ({ "list-selected": a0 });
+function SingleListDetailComponent_ng_template_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "span", 12);
 } }
-function SingleListDetailComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "kendo-grid", 5);
+function SingleListDetailComponent_Conditional_13_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "kendo-loader", 9);
+} }
+function SingleListDetailComponent_Conditional_14_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "kendo-grid", 10);
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("data", ctx_r0.gridData);
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("data", ctx_r2.filteredGridData);
 } }
-function SingleListDetailComponent_kendo_dialog_9_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "kendo-loader", 4);
+function SingleListDetailComponent_kendo_dialog_15_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "kendo-loader", 9);
 } }
-function SingleListDetailComponent_kendo_dialog_9_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 8)(1, "kendo-label", 12)(2, "kendo-dropdownlist", 13);
-    i0.ɵɵtwoWayListener("ngModelChange", function SingleListDetailComponent_kendo_dialog_9_Conditional_2_Template_kendo_dropdownlist_ngModelChange_2_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r0.selectedUserView, $event) || (ctx_r0.selectedUserView = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵelementEnd()()();
+function SingleListDetailComponent_kendo_dialog_15_Conditional_6_For_1_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 24);
+    i0.ɵɵlistener("click", function SingleListDetailComponent_kendo_dialog_15_Conditional_6_For_1_Conditional_3_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r5); const userView_r6 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.removeViewFromSelectedList(userView_r6)); });
+    i0.ɵɵelement(1, "span", 25);
+    i0.ɵɵtext(2, " Remove ");
+    i0.ɵɵelementEnd();
+} }
+function SingleListDetailComponent_kendo_dialog_15_Conditional_6_For_1_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    const _r7 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 26);
+    i0.ɵɵlistener("click", function SingleListDetailComponent_kendo_dialog_15_Conditional_6_For_1_Conditional_4_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r7); const userView_r6 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.addViewToSelectedList(userView_r6)); });
+    i0.ɵɵelementStart(1, "div", 27);
+    i0.ɵɵelement(2, "span", 4);
+    i0.ɵɵtext(3, " Add ");
+    i0.ɵɵelementEnd()();
+} }
+function SingleListDetailComponent_kendo_dialog_15_Conditional_6_For_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 20)(1, "div", 21);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(3, SingleListDetailComponent_kendo_dialog_15_Conditional_6_For_1_Conditional_3_Template, 3, 0, "button", 22)(4, SingleListDetailComponent_kendo_dialog_15_Conditional_6_For_1_Conditional_4_Template, 4, 0, "button", 23);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(5, "hr");
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(2);
-    i0.ɵɵadvance(2);
-    i0.ɵɵproperty("data", ctx_r0.userViews)("filterable", true);
-    i0.ɵɵtwoWayProperty("ngModel", ctx_r0.selectedUserView);
+    const userView_r6 = ctx.$implicit;
+    const ctx_r2 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(3, _c0, ctx_r2.userViewsToAdd.includes(userView_r6)));
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", userView_r6.Name, " ");
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r2.userViewsToAdd.includes(userView_r6) ? 3 : 4);
 } }
-function SingleListDetailComponent_kendo_dialog_9_Template(rf, ctx) { if (rf & 1) {
-    const _r2 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "kendo-dialog", 7);
-    i0.ɵɵlistener("close", function SingleListDetailComponent_kendo_dialog_9_Template_kendo_dialog_close_0_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.toggleAddDialog(false)); });
-    i0.ɵɵtemplate(1, SingleListDetailComponent_kendo_dialog_9_Conditional_1_Template, 1, 0, "kendo-loader", 4)(2, SingleListDetailComponent_kendo_dialog_9_Conditional_2_Template, 3, 3, "div", 8);
-    i0.ɵɵelementStart(3, "kendo-dialog-actions", 9)(4, "button", 10);
-    i0.ɵɵlistener("click", function SingleListDetailComponent_kendo_dialog_9_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.addTolist()); });
-    i0.ɵɵtext(5, " Create ");
+function SingleListDetailComponent_kendo_dialog_15_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵrepeaterCreate(0, SingleListDetailComponent_kendo_dialog_15_Conditional_6_For_1_Template, 6, 5, null, null, i0.ɵɵrepeaterTrackByIdentity);
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵrepeater(ctx_r2.userViews);
+} }
+function SingleListDetailComponent_kendo_dialog_15_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "kendo-dialog", 13);
+    i0.ɵɵlistener("close", function SingleListDetailComponent_kendo_dialog_15_Template_kendo_dialog_close_0_listener() { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.toggleAddDialog(false)); });
+    i0.ɵɵelementStart(1, "div", 14);
+    i0.ɵɵelement(2, "kendo-textbox", 15);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(3, "hr");
+    i0.ɵɵelementStart(4, "div", 16);
+    i0.ɵɵtemplate(5, SingleListDetailComponent_kendo_dialog_15_Conditional_5_Template, 1, 0, "kendo-loader", 9)(6, SingleListDetailComponent_kendo_dialog_15_Conditional_6_Template, 2, 0);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "button", 11);
-    i0.ɵɵlistener("click", function SingleListDetailComponent_kendo_dialog_9_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.toggleAddDialog(false)); });
-    i0.ɵɵtext(7, " Cancel ");
+    i0.ɵɵelementStart(7, "kendo-dialog-actions", 17)(8, "button", 18);
+    i0.ɵɵlistener("click", function SingleListDetailComponent_kendo_dialog_15_Template_button_click_8_listener() { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.addTolist()); });
+    i0.ɵɵtext(9, " Done ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(10, "button", 19);
+    i0.ɵɵlistener("click", function SingleListDetailComponent_kendo_dialog_15_Template_button_click_10_listener() { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.toggleAddDialog(false)); });
+    i0.ɵɵtext(11, " Cancel ");
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext();
+    const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵproperty("minWidth", 250)("width", 650)("height", 550);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r0.showAddLoader ? 1 : 2);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("clearButton", true);
+    i0.ɵɵadvance(3);
+    i0.ɵɵconditional(ctx_r2.showAddLoader ? 5 : 6);
     i0.ɵɵadvance(3);
-    i0.ɵɵproperty("disabled", ctx_r0.showAddLoader || !ctx_r0.selectedUserView);
+    i0.ɵɵproperty("disabled", ctx_r2.showAddLoader);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("disabled", ctx_r0.showAddLoader);
+    i0.ɵɵproperty("disabled", ctx_r2.showAddLoader);
 } }
 export class SingleListDetailComponent {
     constructor(router, route, sharedService) {
@@ -73,141 +113,213 @@ export class SingleListDetailComponent {
         this.sharedService = sharedService;
         this.listRecord = null;
         this.showLoader = false;
-        this.gridData = [];
+        this.sourceGridData = [];
+        this.filteredGridData = [];
         this.listName = "";
         this.showAddDialog = false;
         this.showAddLoader = false;
-        this.userViews = [];
-        this.selectedUserView = null;
+        this.userViews = null;
+        this._resizeDebounceTime = 250;
+        this.filterItemsSubject = new Subject();
+        this.filter = '';
+        this.userViewsToAdd = [];
+        this.filterItemsSubject
+            .pipe(debounceTime(this._resizeDebounceTime))
+            .subscribe(() => this.filterItems(this.filter));
     }
     ngOnInit() {
         return __awaiter(this, void 0, void 0, function* () {
-            this.showLoader = true;
             this.route.paramMap.subscribe((params) => __awaiter(this, void 0, void 0, function* () {
                 const listID = params.get('listID');
                 if (listID) {
-                    const md = new Metadata();
-                    const rv = new RunView();
-                    const listRunViewResult = yield rv.RunView({
-                        EntityName: 'Lists',
-                        ResultType: 'entity_object',
-                        ExtraFilter: `ID = ${listID}`
-                    }, md.CurrentUser);
-                    if (!listRunViewResult.Success || listRunViewResult.Results.length === 0) {
-                        LogError("Error loading list with ID " + listID);
-                        return;
-                    }
-                    const listEntity = listRunViewResult.Results[0];
-                    const entity = md.EntityFromEntityID(listEntity.EntityID);
-                    if (!entity) {
-                        LogError("Error fetching EntityInfo with ID " + listEntity.EntityID);
-                        return;
-                    }
-                    this.listName = listEntity.Name;
-                    this.listRecord = listEntity;
-                    const runViewResult = yield rv.RunView({
-                        EntityName: 'List Details',
-                        ResultType: 'entity_object',
-                        ExtraFilter: `ListID = ${listID}`
+                    yield this.loadList(listID);
+                }
+            }));
+        });
+    }
+    loadList(listID) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (listID) {
+                this.showLoader = true;
+                const md = new Metadata();
+                const rv = new RunView();
+                const listRunViewResult = yield rv.RunView({
+                    EntityName: 'Lists',
+                    ResultType: 'entity_object',
+                    ExtraFilter: `ID = '${listID}'`
+                }, md.CurrentUser);
+                if (!listRunViewResult.Success || listRunViewResult.Results.length === 0) {
+                    LogError("Error loading list with ID " + listID);
+                    return;
+                }
+                const listEntity = listRunViewResult.Results[0];
+                const entity = md.EntityFromEntityID(listEntity.EntityID);
+                if (!entity) {
+                    LogError("Error fetching EntityInfo with ID " + listEntity.EntityID);
+                    return;
+                }
+                this.listName = listEntity.Name;
+                this.listRecord = listEntity;
+                const runViewResult = yield rv.RunView({
+                    EntityName: 'List Details',
+                    ResultType: 'entity_object',
+                    ExtraFilter: `ListID = '${listID}'`
+                }, md.CurrentUser);
+                if (!runViewResult.Success) {
+                    LogError("Error loading list details for list with ID " + listID);
+                    return;
+                }
+                const listDetailRecords = runViewResult.Results;
+                if (listDetailRecords.length > 0) {
+                    const recordIDs = listDetailRecords.map(ld => `'${ld.RecordID}'`).join(',');
+                    let extraFilter = `ID IN (${recordIDs})`;
+                    const rvResult = yield rv.RunView({
+                        EntityName: entity.Name,
+                        ExtraFilter: extraFilter
                     }, md.CurrentUser);
-                    if (!runViewResult.Success) {
-                        LogError("Error loading list details for list with ID " + listID);
+                    if (!rvResult.Success) {
+                        LogError(`Error loading ${entity.Name} records with extra filter ${extraFilter}`);
                         return;
                     }
-                    const listDetailRecords = runViewResult.Results;
-                    if (listDetailRecords.length > 0) {
-                        const recordIDs = listDetailRecords.map(ld => ld.RecordID).join(',');
-                        let extraFilter = `ID IN (${recordIDs})`;
-                        const rvResult = yield rv.RunView({
-                            EntityName: entity.Name,
-                            ExtraFilter: extraFilter
-                        }, md.CurrentUser);
-                        if (!rvResult.Success) {
-                            LogError(`Error loading ${entity.Name} records with extra filter ${extraFilter}`);
-                            return;
-                        }
-                        this.gridData = rvResult.Results;
-                    }
+                    this.sourceGridData = this.filteredGridData = rvResult.Results;
                 }
                 this.showLoader = false;
-            }));
+            }
         });
     }
     toggleAddDialog(show) {
         return __awaiter(this, void 0, void 0, function* () {
-            return;
             this.showAddDialog = show;
-            if (show && this.userViews.length === 0) {
+            if (show && !this.userViews) {
                 yield this.loadEntityViews();
             }
         });
     }
-    addTolist() {
+    loadEntityViews() {
         return __awaiter(this, void 0, void 0, function* () {
-            if (!this.selectedUserView || !this.selectedUserView.Get("ID") || !this.listRecord || !this.listRecord.Entity) {
+            this.showAddLoader = true;
+            if (!this.listRecord || !this.listRecord.Entity) {
                 return;
             }
-            this.showAddLoader = true;
             const rv = new RunView();
             const md = new Metadata();
             const runViewResult = yield rv.RunView({
-                EntityName: this.listRecord.Entity,
-                ExtraFilter: `UserID = ${md.CurrentUser.ID} AND EntityID = ${this.listRecord.EntityID} AND ID = ${this.selectedUserView.Get("ID")}`,
+                EntityName: "User Views",
+                ExtraFilter: `UserID = '${md.CurrentUser.ID}' AND EntityID = '${this.listRecord.EntityID}'`,
                 ResultType: 'entity_object'
             }, md.CurrentUser);
             if (!runViewResult.Success) {
-                this.showAddLoader = true;
-                LogError(`Error loading ${this.listRecord.Entity} User View record for user ${md.CurrentUser.ID}`);
+                this.showAddLoader = false;
+                LogError(`Error loading ${this.listRecord.Entity} User View records for user ${md.CurrentUser.ID}`);
                 return;
             }
+            this.userViews = runViewResult.Results;
+            this.showAddLoader = false;
         });
     }
-    loadEntityViews() {
+    addTolist() {
         return __awaiter(this, void 0, void 0, function* () {
-            this.showAddLoader = true;
             if (!this.listRecord || !this.listRecord.Entity) {
                 return;
             }
+            this.showAddLoader = true;
             const rv = new RunView();
             const md = new Metadata();
-            const runViewResult = yield rv.RunView({
-                EntityName: "User Views",
-                ExtraFilter: `UserID = ${md.CurrentUser.ID} AND EntityID = ${this.listRecord.EntityID}`,
-                ResultType: 'entity_object'
-            }, md.CurrentUser);
-            if (!runViewResult.Success) {
-                this.showAddLoader = true;
-                LogError(`Error loading ${this.listRecord.Entity} User View records for user ${md.CurrentUser.ID}`);
-                return;
+            const hashMap = new Map();
+            for (const userView of this.userViewsToAdd) {
+                const userView = this.userViewsToAdd[0];
+                const runViewResult = yield rv.RunView({
+                    EntityName: "User Views",
+                    ViewEntity: userView,
+                    Fields: ["ID"]
+                }, md.CurrentUser);
+                if (!runViewResult.Success) {
+                    LogError(`Error loading view ${userView.Name} for user ${md.CurrentUser.ID}`);
+                    return;
+                }
+                const records = runViewResult.Results;
+                for (const record of records) {
+                    hashMap.set(record.ID, record);
+                }
             }
-            this.userViews = runViewResult.Results;
-            this.showAddLoader = false;
+            LogStatus(`Adding ${hashMap.size} records to list ${this.listRecord.ID}`);
+            //now add the records to the list
+            let count = 0;
+            for (const [recordID, record] of hashMap) {
+                const listDetail = yield md.GetEntityObject("List Details");
+                listDetail.ListID = this.listRecord.ID;
+                listDetail.RecordID = recordID.toString();
+                listDetail.ContextCurrentUser = md.CurrentUser;
+                listDetail.Save().then((result) => {
+                    if (!result) {
+                        LogError(`Error adding record ${recordID} to list ${this.listRecord.ID}`, undefined, listDetail.LatestResult);
+                    }
+                    count = count + 1;
+                    if (count === hashMap.size) {
+                        this.showAddLoader = false;
+                        this.toggleAddDialog(false);
+                        this.loadList(this.listRecord.ID.toString());
+                    }
+                });
+            }
+        });
+    }
+    onKeyup(Value) {
+        this.filter = Value;
+        this.filterItemsSubject.next(true);
+    }
+    filterItems(filter) {
+        if (!filter) {
+            return;
+        }
+        if (!this.sourceGridData) {
+            this.sourceGridData = [];
+        }
+        const toLower = filter.toLowerCase();
+        this.filteredGridData = this.sourceGridData.filter((data) => {
+            const name = data.Get("Name") || '';
+            return name.toLowerCase().includes(toLower);
         });
     }
+    addViewToSelectedList(view) {
+        this.userViewsToAdd.push(view);
+    }
+    removeViewFromSelectedList(view) {
+        this.userViewsToAdd.filter((userView) => userView.ID !== view.ID);
+    }
 }
 SingleListDetailComponent.ɵfac = function SingleListDetailComponent_Factory(t) { return new (t || SingleListDetailComponent)(i0.ɵɵdirectiveInject(i1.Router), i0.ɵɵdirectiveInject(i1.ActivatedRoute), i0.ɵɵdirectiveInject(i2.SharedService)); };
-SingleListDetailComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SingleListDetailComponent, selectors: [["mj-list-detail"]], decls: 10, vars: 3, consts: [[1, "app-container"], [1, "flex-display-row-header"], ["kendobutton", "", "themeColor", "info", 3, "click"], [1, "fa-solid", "fa-plus"], ["type", "converging-spinner"], [3, "data"], ["title", "Add to List", 3, "minWidth", "width", "height", "close", 4, "ngIf"], ["title", "Add to List", 3, "close", "minWidth", "width", "height"], [1, "mt-10"], [1, "popup-actions-btn"], ["kendoButton", "", "themeColor", "info", 1, "cancel-btn", 3, "click", "disabled"], ["kendoButton", "", "fillMode", "outline", "themeColor", "info", 1, "yes-btn", 3, "click", "disabled"], ["text", "Select a View"], ["textField", "Name", "valueField", "ID", 1, "mt-10", 3, "ngModelChange", "data", "filterable", "ngModel"]], template: function SingleListDetailComponent_Template(rf, ctx) { if (rf & 1) {
-        i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "h1");
+SingleListDetailComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SingleListDetailComponent, selectors: [["mj-list-detail"]], decls: 16, vars: 5, consts: [["searchInput", ""], [1, "app-container"], [1, "flex-display-row-header"], ["kendobutton", "", "themeColor", "info", 1, "add-btn", 3, "click"], [1, "fa-solid", "fa-plus"], [1, "title-wrapper"], [1, "search"], ["type", "text", "placeholder", "Search in List", "size", "large", "rounded", "large", "fillMode", "solid", 3, "keyup", "clearButton"], ["kendoTextBoxPrefixTemplate", "", 3, "showSeparator"], ["type", "converging-spinner"], [3, "data"], ["class", "dialog-wrapper", "title", "Select Views to Add", 3, "minWidth", "width", "height", "close", 4, "ngIf"], [1, "fa-solid", "fa-magnifying-glass", "margin-left-small"], ["title", "Select Views to Add", 1, "dialog-wrapper", 3, "close", "minWidth", "width", "height"], [1, "search-header"], ["id", "listSearch", "placeholder", "Search Views...", "kendoTextBox", "", 1, "search-bar", 3, "clearButton"], [1, "overflow-y-scroll"], [1, "popup-actions-btn"], ["kendoButton", "", "themeColor", "info", 1, "cancel-btn", 3, "click", "disabled"], ["kendoButton", "", "fillMode", "outline", "themeColor", "info", 1, "yes-btn", 3, "click", "disabled"], [1, "list-item"], [1, "list-text", 3, "ngClass"], ["kendoButton", "", 1, "btn-no-border", "btn-selected"], ["kendoButton", "", 1, "btn-no-border"], ["kendoButton", "", 1, "btn-no-border", "btn-selected", 3, "click"], [1, "fa-solid", "fa-minus"], ["kendoButton", "", 1, "btn-no-border", 3, "click"], [1, "btn-margin-right"]], template: function SingleListDetailComponent_Template(rf, ctx) { if (rf & 1) {
+        const _r1 = i0.ɵɵgetCurrentView();
+        i0.ɵɵelementStart(0, "div", 1)(1, "div", 2)(2, "h1");
         i0.ɵɵtext(3);
         i0.ɵɵelementEnd();
-        i0.ɵɵelementStart(4, "button", 2);
-        i0.ɵɵlistener("click", function SingleListDetailComponent_Template_button_click_4_listener() { return ctx.toggleAddDialog(true); });
-        i0.ɵɵelement(5, "span", 3);
-        i0.ɵɵtext(6, " Add to List ");
+        i0.ɵɵelementStart(4, "button", 3);
+        i0.ɵɵlistener("click", function SingleListDetailComponent_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.toggleAddDialog(true)); });
+        i0.ɵɵelement(5, "span", 4);
+        i0.ɵɵtext(6, " Add More Records ");
         i0.ɵɵelementEnd()();
-        i0.ɵɵtemplate(7, SingleListDetailComponent_Conditional_7_Template, 1, 0, "kendo-loader", 4)(8, SingleListDetailComponent_Conditional_8_Template, 1, 1, "kendo-grid", 5);
+        i0.ɵɵelementStart(7, "div")(8, "div", 5)(9, "div", 6)(10, "kendo-textbox", 7, 0);
+        i0.ɵɵlistener("keyup", function SingleListDetailComponent_Template_kendo_textbox_keyup_10_listener() { i0.ɵɵrestoreView(_r1); const searchInput_r2 = i0.ɵɵreference(11); return i0.ɵɵresetView(ctx.onKeyup(searchInput_r2.value)); });
+        i0.ɵɵtemplate(12, SingleListDetailComponent_ng_template_12_Template, 1, 0, "ng-template", 8);
+        i0.ɵɵelementEnd()()()();
+        i0.ɵɵtemplate(13, SingleListDetailComponent_Conditional_13_Template, 1, 0, "kendo-loader", 9)(14, SingleListDetailComponent_Conditional_14_Template, 1, 1, "kendo-grid", 10);
         i0.ɵɵelementEnd();
-        i0.ɵɵtemplate(9, SingleListDetailComponent_kendo_dialog_9_Template, 8, 6, "kendo-dialog", 6);
+        i0.ɵɵtemplate(15, SingleListDetailComponent_kendo_dialog_15_Template, 12, 7, "kendo-dialog", 11);
     } if (rf & 2) {
         i0.ɵɵadvance(3);
         i0.ɵɵtextInterpolate(ctx.listName);
-        i0.ɵɵadvance(4);
-        i0.ɵɵconditional(ctx.showLoader ? 7 : 8);
+        i0.ɵɵadvance(7);
+        i0.ɵɵproperty("clearButton", true);
+        i0.ɵɵadvance(2);
+        i0.ɵɵproperty("showSeparator", true);
+        i0.ɵɵadvance();
+        i0.ɵɵconditional(ctx.showLoader ? 13 : 14);
         i0.ɵɵadvance(2);
         i0.ɵɵproperty("ngIf", ctx.showAddDialog);
-    } }, dependencies: [i3.NgIf, i4.NgControlStatus, i4.NgModel, i5.GridComponent, i6.DialogComponent, i6.DialogActionsComponent, i7.LoaderComponent, i8.ButtonComponent, i9.LabelComponent, i10.DropDownListComponent] });
+    } }, dependencies: [i3.NgClass, i3.NgIf, i4.GridComponent, i5.DialogComponent, i5.DialogActionsComponent, i6.LoaderComponent, i7.ButtonComponent, i8.TextBoxComponent, i8.TextBoxPrefixTemplateDirective], styles: [".app-container[_ngcontent-%COMP%] {\n    padding: 20px;\n}\n\n.flex-display-row-header[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding-bottom: 10px;\n}\n\n.title-wrapper[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 14px 0;\n    border-bottom: 1px solid var(--med-gray);\n}\n\n.title-wrapper[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n    margin: 0;\n    font-size: 24px;\n    line-height: 28px;\n}\n\n.title-wrapper[_ngcontent-%COMP%]   .search[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {\n    width: 100%;\n    height: 100%;\n    font-size: 16px;\n    background: transparent;\n    border: none;\n    box-sizing: border-box;\n    padding-left: 40px;\n}\n\n .title-wrapper[_ngcontent-%COMP%]   .search[_ngcontent-%COMP%]  {\n    background: var(--light-shade);\n    width: 360px;\n    height: 44px;\n    position: relative;\n    border-radius: 10px;\n}\n\n.title-wrapper[_ngcontent-%COMP%]   .search[_ngcontent-%COMP%]   svg[_ngcontent-%COMP%] {\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    left: 12px;\n}\n\n.add-btn[_ngcontent-%COMP%] {\n    padding: 10px 30px;\n    border-radius: 10px;\n    color: white;\n    background-color: var(--border-blue);\n    font-size: initial;\n    cursor: pointer;\n}\n\n.add-btn[_ngcontent-%COMP%]:hover {\n    filter: brightness(85%);\n}\n\n.margin-left-small[_ngcontent-%COMP%] {\n    margin-left: 10px;\n}\n\n\n.overflow-y-scroll[_ngcontent-%COMP%] {\n    overflow-y: auto;\n    max-height: 300px;\n}\n\n.padding-bottom-small[_ngcontent-%COMP%] {\n    padding-bottom: 10px;\n}\n\n.list-item[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    padding-bottom: 5px;\n    align-items: center;\n}\n\n.btn-no-border[_ngcontent-%COMP%] {\n    border: none;\n    background: none;\n    color: var(--border-blue);\n    font-size: 16px;\n    font-weight: 500;\n    cursor: pointer;\n}\n\n.btn-selected[_ngcontent-%COMP%] {\n    font-weight: bold;\n}\n\n.list-text[_ngcontent-%COMP%] {\n    font-size: large;\n}\n.list-selected[_ngcontent-%COMP%] {\n    font-weight: bold;\n    color: var(--border-blue);\n}\n\n.btn-margin-right[_ngcontent-%COMP%] {\n    margin-right: 35px;\n}\n\n.divider[_ngcontent-%COMP%] {\n    color: lightgray\n}\n\n.search-header[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 10px 0;\n}\n\n.search-bar[_ngcontent-%COMP%] {\n    width: 65%;\n    padding-bottom: 10px;\n}\n\n.dialog-wrapper[_ngcontent-%COMP%] {\n    padding: 15px 25px;\n}\n\n.btn-outline[_ngcontent-%COMP%] {\n    border: 2px solid var(--border-blue);\n    border-radius: 8px;\n    padding: 5px 30px;\n\n    background: none;\n    color: var(--border-blue);\n    font-size: 16px;\n    font-weight: 500;\n    cursor: pointer;\n}"] });
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SingleListDetailComponent, [{
         type: Component,
-        args: [{ selector: 'mj-list-detail', template: "<div class=\"app-container\">\n    <div class=\"flex-display-row-header\">\n        <h1>{{listName}}</h1>\n        <button kendobutton (click)=\"toggleAddDialog(true)\" themeColor=\"info\">\n            <span class=\"fa-solid fa-plus\"></span>\n            Add to List\n        </button>\n    </div>\n    @if(showLoader){\n        <kendo-loader type=\"converging-spinner\"></kendo-loader>\n    }\n    @else{\n        <kendo-grid [data]=\"gridData\"></kendo-grid>\n    }\n</div>\n<kendo-dialog\ntitle=\"Add to List\"\n*ngIf=\"showAddDialog\"\n(close)=\"toggleAddDialog(false)\"\n[minWidth]=\"250\"\n[width]=\"650\"\n[height]=\"550\"\n>\n    @if(showAddLoader){\n        <kendo-loader type=\"converging-spinner\"></kendo-loader>\n    }\n    @else {\n        <div class=\"mt-10\">\n            <kendo-label text=\"Select a View\">\n                <kendo-dropdownlist \n                    class=\"mt-10\"\n                    [data]=\"userViews\"\n                    [filterable]=\"true\"\n                    textField=\"Name\"\n                    valueField=\"ID\"\n                    [(ngModel)]=\"selectedUserView\"\n                />\n            </kendo-label>\n        </div>\n    }\n    <kendo-dialog-actions class=\"popup-actions-btn\">\n        <button class=\"cancel-btn\" (click)=\"addTolist()\" [disabled]=\"showAddLoader || !selectedUserView\" kendoButton themeColor=\"info\">\n          Create\n        </button>\n        <button  class=\"yes-btn\" (click)=\"toggleAddDialog(false)\" [disabled]=\"showAddLoader\" kendoButton fillMode=\"outline\" themeColor=\"info\">\n          Cancel\n        </button>\n    </kendo-dialog-actions>\n</kendo-dialog>" }]
+        args: [{ selector: 'mj-list-detail', template: "<div class=\"app-container\">\n    <div class=\"flex-display-row-header\">\n        <h1>{{listName}}</h1>\n        <button kendobutton class=\"add-btn\" (click)=\"toggleAddDialog(true)\" themeColor=\"info\">\n            <span class=\"fa-solid fa-plus\"></span>\n            Add More Records\n        </button>\n    </div>\n    <div>\n        <div class=\"title-wrapper\">\n            <div class=\"search\">\n              <kendo-textbox \n              type=\"text\" \n              #searchInput \n              placeholder=\"Search in List\" \n              (keyup)=\"onKeyup(searchInput.value)\"\n              [clearButton]=\"true\"\n              size=\"large\"\n              rounded=\"large\"\n              fillMode=\"solid\"\n              >\n                <ng-template kendoTextBoxPrefixTemplate [showSeparator]=\"true\">\n                  <span class=\"fa-solid fa-magnifying-glass margin-left-small\"></span>\n                </ng-template>\n              </kendo-textbox>\n            </div>\n          </div>\n    </div>\n    @if(showLoader){\n        <kendo-loader type=\"converging-spinner\"></kendo-loader>\n    }\n    @else{\n        <kendo-grid [data]=\"filteredGridData\"></kendo-grid>\n    }\n</div>\n\n<kendo-dialog\nclass=\"dialog-wrapper\"\ntitle=\"Select Views to Add\"\n*ngIf=\"showAddDialog\"\n(close)=\"toggleAddDialog(false)\"\n[minWidth]=\"250\"\n[width]=\"650\"\n[height]=\"550\"\n>\n<div class=\"search-header\">\n    <kendo-textbox\n  id=\"listSearch\"\n  placeholder=\"Search Views...\"\n  kendoTextBox\n  [clearButton]=\"true\"\n  class=\"search-bar\"\n></kendo-textbox>\n<!--\n<button kendoButton class=\"btn-no-border btn-outline\">\n    <span class=\"fa-solid fa-plus\"></span>\n    New View\n</button>\n-->\n</div>\n<hr>\n<div class=\"overflow-y-scroll\">\n    @if(showAddLoader){\n        <kendo-loader type=\"converging-spinner\"></kendo-loader>\n    }\n    @else {\n        @for(userView of userViews; track userView){\n            <div class=\"list-item\">\n                <div class=\"list-text\" [ngClass]=\"{'list-selected': userViewsToAdd.includes(userView)}\">\n                    {{userView.Name}}\n                </div>\n                @if(userViewsToAdd.includes(userView)){\n                    <button kendoButton class=\"btn-no-border btn-selected\" (click)=\"removeViewFromSelectedList(userView)\">\n                        <span class=\"fa-solid fa-minus\"></span>\n                        Remove\n                    </button>\n                }\n                @else {\n                    <button kendoButton class=\"btn-no-border\" (click)=\"addViewToSelectedList(userView)\">\n                        <div class=\"btn-margin-right\">\n                            <span class=\"fa-solid fa-plus\"></span>\n                            Add\n                        </div>\n                    </button>\n                }\n            </div>\n            <hr>\n        }\n    }\n</div>\n<kendo-dialog-actions class=\"popup-actions-btn\">\n    <button class=\"cancel-btn\" (click)=\"addTolist()\" [disabled]=\"showAddLoader\" kendoButton themeColor=\"info\">\n      Done\n    </button>\n    <button  class=\"yes-btn\" (click)=\"toggleAddDialog(false)\" [disabled]=\"showAddLoader\" kendoButton fillMode=\"outline\" themeColor=\"info\">\n      Cancel\n    </button>\n</kendo-dialog-actions>\n</kendo-dialog>", styles: [".app-container {\n    padding: 20px;\n}\n\n.flex-display-row-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding-bottom: 10px;\n}\n\n.title-wrapper {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 14px 0;\n    border-bottom: 1px solid var(--med-gray);\n}\n\n.title-wrapper h4 {\n    margin: 0;\n    font-size: 24px;\n    line-height: 28px;\n}\n\n.title-wrapper .search input {\n    width: 100%;\n    height: 100%;\n    font-size: 16px;\n    background: transparent;\n    border: none;\n    box-sizing: border-box;\n    padding-left: 40px;\n}\n\n .title-wrapper .search  {\n    background: var(--light-shade);\n    width: 360px;\n    height: 44px;\n    position: relative;\n    border-radius: 10px;\n}\n\n.title-wrapper .search svg {\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    left: 12px;\n}\n\n.add-btn {\n    padding: 10px 30px;\n    border-radius: 10px;\n    color: white;\n    background-color: var(--border-blue);\n    font-size: initial;\n    cursor: pointer;\n}\n\n.add-btn:hover {\n    filter: brightness(85%);\n}\n\n.margin-left-small {\n    margin-left: 10px;\n}\n\n\n.overflow-y-scroll {\n    overflow-y: auto;\n    max-height: 300px;\n}\n\n.padding-bottom-small {\n    padding-bottom: 10px;\n}\n\n.list-item {\n    display: flex;\n    justify-content: space-between;\n    padding-bottom: 5px;\n    align-items: center;\n}\n\n.btn-no-border {\n    border: none;\n    background: none;\n    color: var(--border-blue);\n    font-size: 16px;\n    font-weight: 500;\n    cursor: pointer;\n}\n\n.btn-selected {\n    font-weight: bold;\n}\n\n.list-text {\n    font-size: large;\n}\n.list-selected {\n    font-weight: bold;\n    color: var(--border-blue);\n}\n\n.btn-margin-right {\n    margin-right: 35px;\n}\n\n.divider {\n    color: lightgray\n}\n\n.search-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 10px 0;\n}\n\n.search-bar {\n    width: 65%;\n    padding-bottom: 10px;\n}\n\n.dialog-wrapper {\n    padding: 15px 25px;\n}\n\n.btn-outline {\n    border: 2px solid var(--border-blue);\n    border-radius: 8px;\n    padding: 5px 30px;\n\n    background: none;\n    color: var(--border-blue);\n    font-size: 16px;\n    font-weight: 500;\n    cursor: pointer;\n}"] }]
     }], () => [{ type: i1.Router }, { type: i1.ActivatedRoute }, { type: i2.SharedService }], null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SingleListDetailComponent, { className: "SingleListDetailComponent", filePath: "src/lib/single-list-detail/single-list-detail.component.ts", lineNumber: 12 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SingleListDetailComponent, { className: "SingleListDetailComponent" }); })();

package/dist/lib/single-query/single-query.component.d.ts

@@ -3,7 +3,7 @@ import { QueryEntity } from '@memberjunction/core-entities';
 import { QueryGridComponent } from '@memberjunction/ng-query-grid';
 import * as i0 from "@angular/core";
 export declare class SingleQueryComponent implements OnInit {
-    queryId: number;
+    queryId: string;
     loadComplete: EventEmitter<any>;
     loadStarted: EventEmitter<any>;
     theQuery: QueryGridComponent;

package/dist/lib/single-query/single-query.component.js

@@ -67,4 +67,4 @@ SingleQueryComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Single
             type: ViewChild,
             args: ['theQuery', { static: true }]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SingleQueryComponent, { className: "SingleQueryComponent", filePath: "src/lib/single-query/single-query.component.ts", lineNumber: 11 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SingleQueryComponent, { className: "SingleQueryComponent" }); })();

package/dist/lib/single-record/single-record.component.js

@@ -146,4 +146,4 @@ SingleRecordComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Singl
         }], recordSaved: [{
             type: Output
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SingleRecordComponent, { className: "SingleRecordComponent", filePath: "src/lib/single-record/single-record.component.ts", lineNumber: 14 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SingleRecordComponent, { className: "SingleRecordComponent" }); })();

package/dist/lib/single-report/single-report.component.d.ts

@@ -4,7 +4,7 @@ import { DynamicReportComponent } from '@memberjunction/ng-ask-skip';
 import { SkipColumnInfo, SkipAPIAnalysisCompleteResponse } from '@memberjunction/skip-types';
 import * as i0 from "@angular/core";
 export declare class SingleReportComponent implements OnInit {
-    reportId: number;
+    reportId: string;
     loadComplete: EventEmitter<any>;
     loadStarted: EventEmitter<any>;
     theReport: DynamicReportComponent;

package/dist/lib/single-report/single-report.component.js

@@ -83,4 +83,4 @@ SingleReportComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Singl
             type: ViewChild,
             args: ['theReport', { static: true }]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SingleReportComponent, { className: "SingleReportComponent", filePath: "src/lib/single-report/single-report.component.ts", lineNumber: 11 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SingleReportComponent, { className: "SingleReportComponent" }); })();

package/dist/lib/single-search-result/single-search-result.component.js

@@ -58,4 +58,4 @@ SingleSearchResultComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
             type: ViewChild,
             args: [UserViewGridComponent]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SingleSearchResultComponent, { className: "SingleSearchResultComponent", filePath: "src/lib/single-search-result/single-search-result.component.ts", lineNumber: 10 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SingleSearchResultComponent, { className: "SingleSearchResultComponent" }); })();

package/dist/lib/single-view/single-view.component.d.ts

@@ -11,7 +11,7 @@ export declare class SingleViewComponent implements AfterViewInit, OnInit {
     private route;
     private sharedService;
     viewGridWithAnalysis: UserViewGridWithAnalysisComponent;
-    viewId: number | null;
+    viewId: string | null;
     viewName: string | null;
     selectedView: UserViewEntity | null;
     extraFilter: string | null;

package/dist/lib/single-view/single-view.component.js

@@ -104,7 +104,7 @@ export class SingleViewComponent {
     LoadView(viewInfo) {
         return __awaiter(this, void 0, void 0, function* () {
             // load up the view
-            if (viewInfo && viewInfo.ID && viewInfo.ID > 0)
+            if (viewInfo && viewInfo.ID && viewInfo.ID.length > 0)
                 this.selectedView = viewInfo;
             yield this.viewGridWithAnalysis.Refresh({
                 ViewEntity: viewInfo,
@@ -201,4 +201,4 @@ SingleViewComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SingleV
         }], loadComplete: [{
             type: Output
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SingleViewComponent, { className: "SingleViewComponent", filePath: "src/lib/single-view/single-view.component.ts", lineNumber: 16 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SingleViewComponent, { className: "SingleViewComponent" }); })();

package/dist/lib/user-notifications/user-notifications.component.js

@@ -119,7 +119,7 @@ function UserNotificationsComponent_ng_template_16_Template(rf, ctx) { if (rf &
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(dataItem_r11.Title);
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(6, 9, dataItem_r11.CreatedAt, "long"));
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(6, 9, dataItem_r11.__mj_CreatedAt, "long"));
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate(dataItem_r11.Message);
     i0.ɵɵadvance(2);
@@ -168,7 +168,7 @@ export class UserNotificationsComponent {
         let url = [];
         let queryString = '';
         if (notification.ResourceRecordID && notification.ResourceRecordID > 0 &&
-            notification.ResourceTypeID && notification.ResourceTypeID > 0) {
+            notification.ResourceTypeID && notification.ResourceTypeID.length > 0) {
             // we have a resource here, like a Report, Dashboard, etc
             // we can generate a url to navigate to it
             const rt = this.sharedService.ResourceTypeByID(notification.ResourceTypeID);
@@ -386,7 +386,7 @@ UserNotificationsComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
     } }, dependencies: [i3.NgIf, i4.ButtonComponent, i5.TextBoxComponent, i5.TextBoxSuffixTemplateDirective, i6.FillContainer, i7.ItemTemplateDirective, i7.ListViewComponent, i3.DatePipe], styles: [".notification-list-wrap[_ngcontent-%COMP%] {\n  height: 800px;\n  overflow-y: auto;\n  overflow-x: hidden;\n  border: solid 1px lightgray;\n}\n\n.k-listview[_ngcontent-%COMP%] {\n  font-family: sans-serif;\n  border: 0;\n}\n.product[_ngcontent-%COMP%] {\n  width: 100%;\n}\n.header[_ngcontent-%COMP%] {\n  display: flex;\n  background-color: lightgray;\n  padding: 12px;\n  height: 24px;\n}\n\n.header[_ngcontent-%COMP%]   button[_ngcontent-%COMP%] { \n\n  margin-right: 10px; \n}\n\n.title[_ngcontent-%COMP%] {\n  flex: 1;\n  font-size: 22px;\n  font-weight: bold;\n}\n.filter-input[_ngcontent-%COMP%] {\n  width: 200px;\n}\n.radio-label[_ngcontent-%COMP%] {\n  cursor: pointer;\n  margin-right: 10px;\n}\n\n.notification-wrap[_ngcontent-%COMP%] {\n  padding-left: 10px;\n  padding-right: 10px;\n  padding-top: 10px;\n  padding-bottom: 10px;\n  border-bottom: dashed 1px lightgray;\n  background-color: white;\n}\n\n.notification-wrap-unread[_ngcontent-%COMP%] {\n  background-color: aliceblue;\n}\n\n.notification-wrap-clickable[_ngcontent-%COMP%] {\n  cursor: pointer;\n}\n\n.notification-title[_ngcontent-%COMP%] {\n  font-size: 16px;\n}\n.notification-wrap-clickable[_ngcontent-%COMP%]    > .notification-title[_ngcontent-%COMP%] {\n  color: blue;\n  text-decoration: underline;\n}\n.notification-title-unread[_ngcontent-%COMP%] {\n  font-weight: bold;\n}\n\n.notification-body[_ngcontent-%COMP%] {\n  font-size: 14px;\n}\n\n.notification-date[_ngcontent-%COMP%] {\n  margin-left: 1px;\n  font-size: 12px;\n  color: gray;\n  font-style: italic;\n}"] });
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(UserNotificationsComponent, [{
         type: Component,
-        args: [{ selector: 'app-user-notifications', template: "<div class=\"notification-list-wrap\" mjFillContainer [bottomMargin]=\"5\"> \n  <div class=\"header\">\n    <div class=\"title\">\n      Notifications\n    </div>\n    <div>\n      <button *ngIf=\"UnreadNotifications.length > 0\" kendoButton (click)=\"markAllAsRead()\">Mark All as Read</button>\n      <button *ngIf=\"ReadNotifications.length > 0\" kendoButton (click)=\"markAllAsUnread()\">Mark All as Unread</button>\n      <input *ngIf=\"AllNotifications.length > 0\" #allRadio checked type=\"radio\" name=\"UnreadStatus\" value=\"All\" (change)=\"onReadRadioChanged($event)\" /><span *ngIf=\"AllNotifications.length > 0\" class=\"radio-label\"  \n            (click)=\"selectReadOption('All')\">All</span>\n      <input *ngIf=\"UnreadNotifications.length > 0 && ReadNotifications.length > 0\" #unreadRadio type=\"radio\" name=\"UnreadStatus\" value=\"Unread\" (change)=\"onReadRadioChanged($event)\" /><span *ngIf=\"UnreadNotifications.length > 0 && ReadNotifications.length > 0\" class=\"radio-label\"  \n            (click)=\"selectReadOption('Unread')\">Unread</span>\n      <input *ngIf=\"ReadNotifications.length > 0 && UnreadNotifications.length > 0\" #readRadio type=\"radio\" name=\"UnreadStatus\" value=\"Read\" (change)=\"onReadRadioChanged($event)\" /><span *ngIf=\"ReadNotifications.length > 0 && UnreadNotifications.length > 0\" class=\"radio-label\" \n            (click)=\"selectReadOption('Read')\">Read</span>\n      <kendo-textbox\n        class=\"filter-input\"\n        placeholder=\"Filter items...\"\n        (valueChange)=\"onFilterChanged($event)\"\n      >\n        <ng-template kendoTextBoxSuffixTemplate>\n          <span class=\"fa-solid fa-magnifying-glass\"></span>\n        </ng-template>\n      </kendo-textbox>  \n    </div>\n  </div> \n\n  <kendo-listview [data]=\"NotificationsToShow\">\n    <ng-template kendoListViewItemTemplate let-dataItem=\"dataItem\">\n      <div [class]=\"getItemWrapperClass(dataItem)\">\n        <div [class]=\"getItemTitleClass(dataItem)\" (click)=\"notificationClicked(dataItem)\">{{dataItem.Title}}</div>\n        <div class=\"notification-body\"  (click)=\"notificationClicked(dataItem)\">\n          <div class=\"notification-date\">{{dataItem.CreatedAt | date:'long'}}</div>\n          <div class=\"notification-message\">{{dataItem.Message}}</div>\n        </div>\n        <div>\n          <button kendoButton *ngIf=\"dataItem.Unread\" (click)=\"markAsRead(dataItem, true, null)\">Mark as Read</button>\n          <button kendoButton *ngIf=\"!dataItem.Unread\" (click)=\"markAsRead(dataItem, false, null)\">Mark as Unread</button>\n        </div>  \n      </div>\n    </ng-template>\n  </kendo-listview>\n</div>\n", styles: [".notification-list-wrap {\n  height: 800px;\n  overflow-y: auto;\n  overflow-x: hidden;\n  border: solid 1px lightgray;\n}\n\n.k-listview {\n  font-family: sans-serif;\n  border: 0;\n}\n.product {\n  width: 100%;\n}\n.header {\n  display: flex;\n  background-color: lightgray;\n  padding: 12px;\n  height: 24px;\n}\n\n.header button { /*buttons within the header*/\n  margin-right: 10px; \n}\n\n.title {\n  flex: 1;\n  font-size: 22px;\n  font-weight: bold;\n}\n.filter-input {\n  width: 200px;\n}\n.radio-label {\n  cursor: pointer;\n  margin-right: 10px;\n}\n\n.notification-wrap {\n  padding-left: 10px;\n  padding-right: 10px;\n  padding-top: 10px;\n  padding-bottom: 10px;\n  border-bottom: dashed 1px lightgray;\n  background-color: white;\n}\n\n.notification-wrap-unread {\n  background-color: aliceblue;\n}\n\n.notification-wrap-clickable {\n  cursor: pointer;\n}\n\n.notification-title {\n  font-size: 16px;\n}\n.notification-wrap-clickable > .notification-title {\n  color: blue;\n  text-decoration: underline;\n}\n.notification-title-unread {\n  font-weight: bold;\n}\n\n.notification-body {\n  font-size: 14px;\n}\n\n.notification-date {\n  margin-left: 1px;\n  font-size: 12px;\n  color: gray;\n  font-style: italic;\n}"] }]
+        args: [{ selector: 'app-user-notifications', template: "<div class=\"notification-list-wrap\" mjFillContainer [bottomMargin]=\"5\"> \n  <div class=\"header\">\n    <div class=\"title\">\n      Notifications\n    </div>\n    <div>\n      <button *ngIf=\"UnreadNotifications.length > 0\" kendoButton (click)=\"markAllAsRead()\">Mark All as Read</button>\n      <button *ngIf=\"ReadNotifications.length > 0\" kendoButton (click)=\"markAllAsUnread()\">Mark All as Unread</button>\n      <input *ngIf=\"AllNotifications.length > 0\" #allRadio checked type=\"radio\" name=\"UnreadStatus\" value=\"All\" (change)=\"onReadRadioChanged($event)\" /><span *ngIf=\"AllNotifications.length > 0\" class=\"radio-label\"  \n            (click)=\"selectReadOption('All')\">All</span>\n      <input *ngIf=\"UnreadNotifications.length > 0 && ReadNotifications.length > 0\" #unreadRadio type=\"radio\" name=\"UnreadStatus\" value=\"Unread\" (change)=\"onReadRadioChanged($event)\" /><span *ngIf=\"UnreadNotifications.length > 0 && ReadNotifications.length > 0\" class=\"radio-label\"  \n            (click)=\"selectReadOption('Unread')\">Unread</span>\n      <input *ngIf=\"ReadNotifications.length > 0 && UnreadNotifications.length > 0\" #readRadio type=\"radio\" name=\"UnreadStatus\" value=\"Read\" (change)=\"onReadRadioChanged($event)\" /><span *ngIf=\"ReadNotifications.length > 0 && UnreadNotifications.length > 0\" class=\"radio-label\" \n            (click)=\"selectReadOption('Read')\">Read</span>\n      <kendo-textbox\n        class=\"filter-input\"\n        placeholder=\"Filter items...\"\n        (valueChange)=\"onFilterChanged($event)\"\n      >\n        <ng-template kendoTextBoxSuffixTemplate>\n          <span class=\"fa-solid fa-magnifying-glass\"></span>\n        </ng-template>\n      </kendo-textbox>  \n    </div>\n  </div> \n\n  <kendo-listview [data]=\"NotificationsToShow\">\n    <ng-template kendoListViewItemTemplate let-dataItem=\"dataItem\">\n      <div [class]=\"getItemWrapperClass(dataItem)\">\n        <div [class]=\"getItemTitleClass(dataItem)\" (click)=\"notificationClicked(dataItem)\">{{dataItem.Title}}</div>\n        <div class=\"notification-body\"  (click)=\"notificationClicked(dataItem)\">\n          <div class=\"notification-date\">{{dataItem.__mj_CreatedAt | date:'long'}}</div>\n          <div class=\"notification-message\">{{dataItem.Message}}</div>\n        </div>\n        <div>\n          <button kendoButton *ngIf=\"dataItem.Unread\" (click)=\"markAsRead(dataItem, true, null)\">Mark as Read</button>\n          <button kendoButton *ngIf=\"!dataItem.Unread\" (click)=\"markAsRead(dataItem, false, null)\">Mark as Unread</button>\n        </div>  \n      </div>\n    </ng-template>\n  </kendo-listview>\n</div>\n", styles: [".notification-list-wrap {\n  height: 800px;\n  overflow-y: auto;\n  overflow-x: hidden;\n  border: solid 1px lightgray;\n}\n\n.k-listview {\n  font-family: sans-serif;\n  border: 0;\n}\n.product {\n  width: 100%;\n}\n.header {\n  display: flex;\n  background-color: lightgray;\n  padding: 12px;\n  height: 24px;\n}\n\n.header button { /*buttons within the header*/\n  margin-right: 10px; \n}\n\n.title {\n  flex: 1;\n  font-size: 22px;\n  font-weight: bold;\n}\n.filter-input {\n  width: 200px;\n}\n.radio-label {\n  cursor: pointer;\n  margin-right: 10px;\n}\n\n.notification-wrap {\n  padding-left: 10px;\n  padding-right: 10px;\n  padding-top: 10px;\n  padding-bottom: 10px;\n  border-bottom: dashed 1px lightgray;\n  background-color: white;\n}\n\n.notification-wrap-unread {\n  background-color: aliceblue;\n}\n\n.notification-wrap-clickable {\n  cursor: pointer;\n}\n\n.notification-title {\n  font-size: 16px;\n}\n.notification-wrap-clickable > .notification-title {\n  color: blue;\n  text-decoration: underline;\n}\n.notification-title-unread {\n  font-weight: bold;\n}\n\n.notification-body {\n  font-size: 14px;\n}\n\n.notification-date {\n  margin-left: 1px;\n  font-size: 12px;\n  color: gray;\n  font-style: italic;\n}"] }]
     }], () => [{ type: i1.SharedService }, { type: i2.Router }], { allRadio: [{
             type: ViewChild,
             args: ['allRadio']
@@ -397,4 +397,4 @@ UserNotificationsComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
             type: ViewChild,
             args: ['readRadio']
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(UserNotificationsComponent, { className: "UserNotificationsComponent", filePath: "src/lib/user-notifications/user-notifications.component.ts", lineNumber: 12 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(UserNotificationsComponent, { className: "UserNotificationsComponent" }); })();