@memberjunction/ng-explorer-core 2.10.0 → 2.12.0

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

@@ -7,7 +7,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { Component } from '@angular/core';
+import { Component, Input } from '@angular/core';
 import { EntityFieldTSType, LogError, LogStatus, Metadata, RunView } from '@memberjunction/core';
 import { Subject, debounceTime } from 'rxjs';
 import * as i0 from "@angular/core";
@@ -19,17 +19,18 @@ 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";
+import * as i9 from "@progress/kendo-angular-progressbar";
 const _c0 = () => ({ "text-align": "center", "vertical-align": "center" });
 const _c1 = () => ({ "font-weight": "bold", "background-color": "white" });
 const _c2 = a0 => ({ "list-selected": a0 });
 function SingleListDetailComponent_ng_template_12_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "span", 12);
+    i0.ɵɵelement(0, "span", 13);
 } }
 function SingleListDetailComponent_Conditional_13_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "kendo-loader", 9);
 } }
 function SingleListDetailComponent_Conditional_14_kendo_grid_checkbox_column_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "kendo-grid-checkbox-column", 15);
+    i0.ɵɵelement(0, "kendo-grid-checkbox-column", 16);
 } if (rf & 2) {
     i0.ɵɵstyleMap(i0.ɵɵpureFunction0(4, _c0));
     i0.ɵɵproperty("width", 50)("headerStyle", i0.ɵɵpureFunction0(5, _c1));
@@ -39,7 +40,7 @@ function SingleListDetailComponent_Conditional_14_kendo_grid_column_2_1_ng_templ
     i0.ɵɵpipe(1, "number");
     i0.ɵɵpipe(2, "number");
     i0.ɵɵelement(3, "br");
-    i0.ɵɵelementStart(4, "span", 19);
+    i0.ɵɵelementStart(4, "span", 20);
     i0.ɵɵtext(5);
     i0.ɵɵpipe(6, "number");
     i0.ɵɵelementEnd();
@@ -50,11 +51,11 @@ function SingleListDetailComponent_Conditional_14_kendo_grid_column_2_1_ng_templ
     i0.ɵɵtextInterpolate1("", i0.ɵɵpipeBind2(6, 7, ctx_r2.viewExecutionTime, "1.2-2"), " seconds");
 } }
 function SingleListDetailComponent_Conditional_14_kendo_grid_column_2_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, SingleListDetailComponent_Conditional_14_kendo_grid_column_2_1_ng_template_0_Template, 7, 10, "ng-template", 18);
+    i0.ɵɵtemplate(0, SingleListDetailComponent_Conditional_14_kendo_grid_column_2_1_ng_template_0_Template, 7, 10, "ng-template", 19);
 } }
 function SingleListDetailComponent_Conditional_14_kendo_grid_column_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "kendo-grid-column", 16);
-    i0.ɵɵtemplate(1, SingleListDetailComponent_Conditional_14_kendo_grid_column_2_1_Template, 1, 0, null, 17);
+    i0.ɵɵelementStart(0, "kendo-grid-column", 17);
+    i0.ɵɵtemplate(1, SingleListDetailComponent_Conditional_14_kendo_grid_column_2_1_Template, 1, 0, null, 18);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const item_r4 = ctx.$implicit;
@@ -66,7 +67,7 @@ function SingleListDetailComponent_Conditional_14_kendo_grid_column_2_Template(r
 } }
 function SingleListDetailComponent_Conditional_14_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "kendo-grid", 10);
-    i0.ɵɵtemplate(1, SingleListDetailComponent_Conditional_14_kendo_grid_checkbox_column_1_Template, 1, 6, "kendo-grid-checkbox-column", 13)(2, SingleListDetailComponent_Conditional_14_kendo_grid_column_2_Template, 2, 10, "kendo-grid-column", 14);
+    i0.ɵɵtemplate(1, SingleListDetailComponent_Conditional_14_kendo_grid_checkbox_column_1_Template, 1, 6, "kendo-grid-checkbox-column", 14)(2, SingleListDetailComponent_Conditional_14_kendo_grid_column_2_Template, 2, 10, "kendo-grid-column", 15);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
@@ -76,95 +77,165 @@ function SingleListDetailComponent_Conditional_14_Template(rf, ctx) { if (rf & 1
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngForOf", ctx_r2.visibleColumns);
 } }
-function SingleListDetailComponent_kendo_dialog_15_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "kendo-loader", 9);
+function SingleListDetailComponent_kendo_dialog_15_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "kendo-loader", 9)(1, "kendo-progressbar", 25);
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("min", 0)("max", ctx_r2.recordsToSave)("value", ctx_r2.recordsSaved)("indeterminate", ctx_r2.fetchingRecordsToSave);
 } }
-function SingleListDetailComponent_kendo_dialog_15_Conditional_6_For_1_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+function SingleListDetailComponent_kendo_dialog_15_Conditional_2_For_4_Conditional_4_Template(rf, ctx) { if (rf & 1) {
     const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 31);
-    i0.ɵɵlistener("click", function SingleListDetailComponent_kendo_dialog_15_Conditional_6_For_1_Conditional_3_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r6); const userView_r7 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.removeViewFromSelectedList(userView_r7)); });
-    i0.ɵɵelement(1, "span", 32);
+    i0.ɵɵelementStart(0, "button", 33);
+    i0.ɵɵlistener("click", function SingleListDetailComponent_kendo_dialog_15_Conditional_2_For_4_Conditional_4_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r6); const userView_r7 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.removeViewFromSelectedList(userView_r7)); });
+    i0.ɵɵelement(1, "span", 34);
     i0.ɵɵtext(2, " Remove ");
     i0.ɵɵelementEnd();
 } }
-function SingleListDetailComponent_kendo_dialog_15_Conditional_6_For_1_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+function SingleListDetailComponent_kendo_dialog_15_Conditional_2_For_4_Conditional_5_Template(rf, ctx) { if (rf & 1) {
     const _r8 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 33);
-    i0.ɵɵlistener("click", function SingleListDetailComponent_kendo_dialog_15_Conditional_6_For_1_Conditional_4_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r8); const userView_r7 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.addViewToSelectedList(userView_r7)); });
-    i0.ɵɵelementStart(1, "div", 34);
+    i0.ɵɵelementStart(0, "button", 35);
+    i0.ɵɵlistener("click", function SingleListDetailComponent_kendo_dialog_15_Conditional_2_For_4_Conditional_5_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r8); const userView_r7 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.addViewToSelectedList(userView_r7)); });
+    i0.ɵɵelementStart(1, "div", 36);
     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", 27)(1, "div", 28);
-    i0.ɵɵtext(2);
+function SingleListDetailComponent_kendo_dialog_15_Conditional_2_For_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 28)(1, "div", 29)(2, "div", 30);
+    i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(3, SingleListDetailComponent_kendo_dialog_15_Conditional_6_For_1_Conditional_3_Template, 3, 0, "button", 29)(4, SingleListDetailComponent_kendo_dialog_15_Conditional_6_For_1_Conditional_4_Template, 4, 0, "button", 30);
+    i0.ɵɵtemplate(4, SingleListDetailComponent_kendo_dialog_15_Conditional_2_For_4_Conditional_4_Template, 3, 0, "button", 31)(5, SingleListDetailComponent_kendo_dialog_15_Conditional_2_For_4_Conditional_5_Template, 4, 0, "button", 32);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(6, "hr");
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(5, "hr");
 } if (rf & 2) {
     const userView_r7 = ctx.$implicit;
     const ctx_r2 = i0.ɵɵnextContext(3);
-    i0.ɵɵadvance();
+    i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(3, _c2, ctx_r2.userViewsToAdd.includes(userView_r7)));
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", userView_r7.Name, " ");
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r2.userViewsToAdd.includes(userView_r7) ? 3 : 4);
+    i0.ɵɵconditional(ctx_r2.userViewsToAdd.includes(userView_r7) ? 4 : 5);
 } }
-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);
+function SingleListDetailComponent_kendo_dialog_15_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 26);
+    i0.ɵɵelement(1, "kendo-textbox", 27);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(2, "hr");
+    i0.ɵɵrepeaterCreate(3, SingleListDetailComponent_kendo_dialog_15_Conditional_2_For_4_Template, 7, 5, "div", 28, i0.ɵɵrepeaterTrackByIdentity);
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("clearButton", true);
+    i0.ɵɵadvance(2);
     i0.ɵɵrepeater(ctx_r2.userViews);
 } }
 function SingleListDetailComponent_kendo_dialog_15_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "kendo-dialog", 20);
-    i0.ɵɵlistener("close", function SingleListDetailComponent_kendo_dialog_15_Template_kendo_dialog_close_0_listener() { i0.ɵɵrestoreView(_r5); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.toggleAddDialog(false)); });
-    i0.ɵɵelementStart(1, "div", 21);
-    i0.ɵɵelement(2, "kendo-textbox", 22);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelement(3, "hr");
-    i0.ɵɵelementStart(4, "div", 23);
-    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(7, "kendo-dialog-actions", 24)(8, "button", 25);
-    i0.ɵɵlistener("click", function SingleListDetailComponent_kendo_dialog_15_Template_button_click_8_listener() { i0.ɵɵrestoreView(_r5); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.addTolist()); });
-    i0.ɵɵtext(9, " Done ");
+    i0.ɵɵelementStart(0, "kendo-dialog", 21);
+    i0.ɵɵlistener("close", function SingleListDetailComponent_kendo_dialog_15_Template_kendo_dialog_close_0_listener() { i0.ɵɵrestoreView(_r5); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.toggleAddFromViewDialog(false)); });
+    i0.ɵɵtemplate(1, SingleListDetailComponent_kendo_dialog_15_Conditional_1_Template, 2, 4)(2, SingleListDetailComponent_kendo_dialog_15_Conditional_2_Template, 5, 1);
+    i0.ɵɵelementStart(3, "kendo-dialog-actions", 22)(4, "button", 23);
+    i0.ɵɵlistener("click", function SingleListDetailComponent_kendo_dialog_15_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r5); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.addTolist()); });
+    i0.ɵɵtext(5, " Done ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(10, "button", 26);
-    i0.ɵɵlistener("click", function SingleListDetailComponent_kendo_dialog_15_Template_button_click_10_listener() { i0.ɵɵrestoreView(_r5); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.toggleAddDialog(false)); });
-    i0.ɵɵtext(11, " Cancel ");
+    i0.ɵɵelementStart(6, "button", 24);
+    i0.ɵɵlistener("click", function SingleListDetailComponent_kendo_dialog_15_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r5); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.toggleAddFromViewDialog(false)); });
+    i0.ɵɵtext(7, " Cancel ");
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵproperty("minWidth", 250)("width", 650)("height", 550);
-    i0.ɵɵadvance(2);
-    i0.ɵɵproperty("clearButton", true);
-    i0.ɵɵadvance(3);
-    i0.ɵɵconditional(ctx_r2.showAddLoader ? 5 : 6);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r2.showAddLoader ? 1 : 2);
     i0.ɵɵadvance(3);
     i0.ɵɵproperty("disabled", ctx_r2.showAddLoader);
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("disabled", ctx_r2.showAddLoader);
 } }
+function SingleListDetailComponent_kendo_dialog_16_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "kendo-loader", 9)(1, "kendo-progressbar", 25);
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("min", 0)("max", ctx_r2.recordsToSave)("value", ctx_r2.recordsSaved)("indeterminate", ctx_r2.fetchingRecordsToSave);
+} }
+function SingleListDetailComponent_kendo_dialog_16_Conditional_2_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "kendo-loader", 9);
+} }
+function SingleListDetailComponent_kendo_dialog_16_Conditional_2_Conditional_4_For_1_Template(rf, ctx) { if (rf & 1) {
+    const _r11 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 28)(1, "div", 29)(2, "div", 39);
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "button", 35);
+    i0.ɵɵlistener("click", function SingleListDetailComponent_kendo_dialog_16_Conditional_2_Conditional_4_For_1_Template_button_click_4_listener() { const listRecord_r12 = i0.ɵɵrestoreView(_r11).$implicit; const ctx_r2 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r2.addListRecord(listRecord_r12)); });
+    i0.ɵɵelementStart(5, "div", 36);
+    i0.ɵɵelement(6, "span", 4);
+    i0.ɵɵtext(7, " Add ");
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelement(8, "hr");
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const listRecord_r12 = ctx.$implicit;
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate1(" ", listRecord_r12.Name, " ");
+} }
+function SingleListDetailComponent_kendo_dialog_16_Conditional_2_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵrepeaterCreate(0, SingleListDetailComponent_kendo_dialog_16_Conditional_2_Conditional_4_For_1_Template, 9, 1, "div", 28, i0.ɵɵrepeaterTrackByIdentity);
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(3);
+    i0.ɵɵrepeater(ctx_r2.listRecords);
+} }
+function SingleListDetailComponent_kendo_dialog_16_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    const _r10 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 26)(1, "kendo-textbox", 38);
+    i0.ɵɵlistener("valueChange", function SingleListDetailComponent_kendo_dialog_16_Conditional_2_Template_kendo_textbox_valueChange_1_listener($event) { i0.ɵɵrestoreView(_r10); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onListRecordDialogValueChange($event)); });
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelement(2, "hr");
+    i0.ɵɵtemplate(3, SingleListDetailComponent_kendo_dialog_16_Conditional_2_Conditional_3_Template, 1, 0, "kendo-loader", 9)(4, SingleListDetailComponent_kendo_dialog_16_Conditional_2_Conditional_4_Template, 2, 0);
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("placeholder", "Search " + (ctx_r2.listRecord ? ctx_r2.listRecord.Entity : "Records") + "...")("clearButton", true);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r2.fetchingListRecords ? 3 : 4);
+} }
+function SingleListDetailComponent_kendo_dialog_16_Template(rf, ctx) { if (rf & 1) {
+    const _r9 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "kendo-dialog", 37);
+    i0.ɵɵlistener("close", function SingleListDetailComponent_kendo_dialog_16_Template_kendo_dialog_close_0_listener() { i0.ɵɵrestoreView(_r9); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.toggleAddRecordsDialog(false)); });
+    i0.ɵɵtemplate(1, SingleListDetailComponent_kendo_dialog_16_Conditional_1_Template, 2, 4)(2, SingleListDetailComponent_kendo_dialog_16_Conditional_2_Template, 5, 3);
+    i0.ɵɵelementStart(3, "kendo-dialog-actions", 22)(4, "button", 24);
+    i0.ɵɵlistener("click", function SingleListDetailComponent_kendo_dialog_16_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r9); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.toggleAddRecordsDialog(false)); });
+    i0.ɵɵtext(5, " Close ");
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("title", "Select " + (ctx_r2.listRecord ? ctx_r2.listRecord.Entity : "Records") + " to Add to List")("minWidth", 250)("width", 650)("height", 550);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r2.showDialogLoader ? 1 : 2);
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("disabled", ctx_r2.showDialogLoader);
+} }
 export class SingleListDetailComponent {
     constructor(router, route, sharedService) {
         this.router = router;
         this.route = route;
         this.sharedService = sharedService;
+        this.ListID = "";
         this.listRecord = null;
-        this.listID = "";
+        this.sourceEntityInfo = null;
         this.showLoader = false;
         this.sourceGridData = [];
         this.filteredGridData = [];
-        this.listName = "";
         this.showAddDialog = false;
         this.showAddLoader = false;
+        this.showDialogLoader = false;
         this.userViews = null;
-        this._resizeDebounceTime = 250;
+        this.filterDebounceTime = 250;
         this.filterItemsSubject = new Subject();
         this.filter = '';
         this.userViewsToAdd = [];
@@ -178,103 +249,99 @@ export class SingleListDetailComponent {
         this.visibleColumns = [];
         this.totalRowCount = 0;
         this.viewExecutionTime = 0;
+        this.recordsToSave = 0;
+        this.recordsSaved = 0;
+        this.fetchingRecordsToSave = false;
+        this.showAddSingleRecordsDialog = false;
+        this.fetchingListRecords = false;
+        this.listRecords = [];
+        this.selectedListRecords = [];
+        this.searchFilter = "";
+        this.filterListrecordsSubject = new Subject();
+        this.addOptions = [
+            {
+                Text: 'Add From View',
+                Description: 'Add all records of a view to this list',
+                Icon: 'folder',
+                Action: () => {
+                    this.toggleAddFromViewDialog(true);
+                }
+            },
+            {
+                Text: 'Add a Record',
+                Description: 'Add a specific record to the list',
+                Icon: 'folder',
+                Action: () => {
+                    this.toggleAddRecordsDialog(true);
+                }
+            }
+        ];
         this.filterItemsSubject
-            .pipe(debounceTime(this._resizeDebounceTime))
+            .pipe(debounceTime(this.filterDebounceTime))
             .subscribe(() => this.filterItems(this.filter));
+        this.filterListrecordsSubject
+            .pipe(debounceTime(this.filterDebounceTime))
+            .subscribe(() => this.loadListRecords());
     }
     ngOnInit() {
         return __awaiter(this, void 0, void 0, function* () {
-            this.route.paramMap.subscribe((params) => __awaiter(this, void 0, void 0, function* () {
-                const listID = params.get('listID');
-                if (listID) {
-                    yield this.loadList(listID);
-                }
-            }));
+            if (this.ListID) {
+                yield this.loadList(this.ListID);
+            }
         });
     }
     loadList(listID) {
         return __awaiter(this, void 0, void 0, function* () {
+            if (!listID) {
+                return;
+            }
             const startTime = new Date().getTime();
-            if (listID) {
-                this.listID = 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;
-                }
-                for (const field of entity.Fields) {
-                    if (!field.DefaultInView) {
-                        continue;
-                    }
-                    let column = {
-                        ID: field.ID,
-                        Name: field.CodeName,
-                        DisplayName: field.DisplayName,
-                        EntityField: field,
-                        hidden: false,
-                        orderIndex: field.Sequence,
-                        width: field.DefaultColumnWidth || 100
-                    };
-                    this.viewColumns.push(column);
-                }
-                /*make sure there is an entity field linked*/
-                this.visibleColumns = this.viewColumns.filter(x => x.hidden === false && x.EntityField).sort((a, b) => {
-                    const aOrder = a.orderIndex != null ? a.orderIndex : 9999;
-                    const bOrder = b.orderIndex != null ? b.orderIndex : 9999;
-                    return aOrder - bOrder;
-                });
-                this.listName = listEntity.Name;
-                this.listRecord = listEntity;
-                const runViewResult = yield rv.RunView({
-                    EntityName: 'List Details',
-                    ResultType: 'entity_object',
-                    ExtraFilter: `ListID = '${listID}'`,
-                    MaxRows: this.pageSize,
-                    IgnoreMaxRows: false,
-                    StartRow: Math.max(0, (this.page - 1) * this.pageSize)
-                }, md.CurrentUser);
-                if (!runViewResult.Success) {
-                    LogError("Error loading list details for list with ID " + listID);
-                    return;
-                }
-                this.totalRowCount = runViewResult.TotalRowCount;
-                const listDetailRecords = runViewResult.Results;
-                LogStatus(`Found ${listDetailRecords.length} records in list ${listID}`);
-                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;
-                    }
-                    LogStatus(`Found ${rvResult.Results.length} records in entity ${entity.Name}`);
-                    this.sourceGridData = this.filteredGridData = rvResult.Results;
-                    this.viewExecutionTime = (new Date().getTime() - startTime) / 1000; // in seconds
-                }
+            this.showLoader = true;
+            const md = new Metadata();
+            const rv = new RunView();
+            this.listRecord = yield md.GetEntityObject("Lists");
+            const loadResult = yield this.listRecord.Load(listID);
+            if (!loadResult) {
+                LogError("Error loading list with ID " + listID, undefined, this.listRecord.LatestResult);
                 this.showLoader = false;
+                return;
             }
+            this.sourceEntityInfo = md.EntityByID(this.listRecord.EntityID);
+            this.viewColumns = this.sourceEntityInfo.Fields.filter((field) => field.DefaultInView).map((field) => {
+                return {
+                    ID: field.ID,
+                    Name: field.CodeName,
+                    DisplayName: field.DisplayName,
+                    EntityField: field,
+                    hidden: false,
+                    orderIndex: field.Sequence,
+                    width: field.DefaultColumnWidth || 100,
+                };
+            });
+            /*make sure there is an entity field linked*/
+            this.visibleColumns = this.viewColumns.filter(x => x.hidden === false && x.EntityField).sort((a, b) => {
+                const aOrder = a.orderIndex != null ? a.orderIndex : 9999;
+                const bOrder = b.orderIndex != null ? b.orderIndex : 9999;
+                return aOrder - bOrder;
+            });
+            const primaryKeyName = this.sourceEntityInfo.FirstPrimaryKey.Name;
+            const rvResult = yield rv.RunView({
+                EntityName: this.listRecord.Entity,
+                ExtraFilter: `${primaryKeyName} IN (SELECT [RecordID] FROM ${md.ConfigData.MJCoreSchemaName}.[vwListDetails] WHERE ListID = '${this.listRecord.ID}')`
+            }, md.CurrentUser);
+            if (!rvResult.Success) {
+                LogError(`Error loading ${this.listRecord.Entity} records: ${rvResult.ErrorMessage}`);
+                this.showLoader = false;
+                return;
+            }
+            this.sourceGridData = this.filteredGridData = rvResult.Results;
+            this.viewExecutionTime = (new Date().getTime() - startTime) / 1000; // in seconds
+            this.showLoader = false;
         });
     }
     pageChange(event) {
         this.page = event.skip;
-        this.loadList(this.listID);
+        this.loadList(this.ListID);
     }
     GetColumnTitle(col) {
         if (col.DisplayName) {
@@ -323,7 +390,7 @@ export class SingleListDetailComponent {
                 return { 'text-align': 'left', 'vertical-align': 'top' };
         }
     }
-    toggleAddDialog(show) {
+    toggleAddFromViewDialog(show) {
         return __awaiter(this, void 0, void 0, function* () {
             this.showAddDialog = show;
             if (show && !this.userViews) {
@@ -355,15 +422,18 @@ export class SingleListDetailComponent {
     }
     addTolist() {
         return __awaiter(this, void 0, void 0, function* () {
-            if (!this.listRecord || !this.listRecord.Entity) {
+            if (!this.listRecord) {
+                return;
+            }
+            if (!this.listRecord.Entity) {
                 return;
             }
             this.showAddLoader = true;
+            this.fetchingRecordsToSave = true;
             const rv = new RunView();
             const md = new Metadata();
             const hashMap = new Map();
-            for (const userView of this.userViewsToAdd) {
-                const userView = this.userViewsToAdd[0];
+            yield Promise.all(this.userViewsToAdd.map((userView) => __awaiter(this, void 0, void 0, function* () {
                 const runViewResult = yield rv.RunView({
                     EntityName: "User Views",
                     ViewEntity: userView,
@@ -377,43 +447,60 @@ export class SingleListDetailComponent {
                 for (const record of records) {
                     hashMap.set(record.ID, record);
                 }
-            }
+            })));
+            this.recordsToSave = hashMap.size;
+            this.recordsSaved = 0;
+            this.fetchingRecordsToSave = 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) {
+            const recordIDs = [...hashMap.keys()];
+            const chunkSize = 100;
+            for (let i = 0; i < recordIDs.length; i += chunkSize) {
+                const chunk = recordIDs.slice(i, i + chunkSize);
+                yield Promise.all(chunk.map((recordID) => __awaiter(this, void 0, void 0, function* () {
+                    const listDetail = yield md.GetEntityObject("List Details");
+                    listDetail.ListID = this.listRecord.ID;
+                    listDetail.RecordID = recordID.toString();
+                    listDetail.ContextCurrentUser = md.CurrentUser;
+                    const saveResult = yield listDetail.Save();
+                    if (!saveResult) {
                         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);
-                    }
-                });
+                    this.recordsSaved++;
+                })));
             }
+            this.showAddLoader = false;
+            this.toggleAddFromViewDialog(false);
+            this.loadList(this.listRecord.ID);
         });
     }
-    onKeyup(Value) {
+    onListSearchValueChange(Value) {
         this.filter = Value;
         this.filterItemsSubject.next(true);
     }
+    onListRecordDialogValueChange(Value) {
+        this.searchFilter = Value;
+        this.filterListrecordsSubject.next(true);
+    }
     filterItems(filter) {
-        if (!filter) {
+        if (!filter || filter === "") {
+            this.filteredGridData = this.sourceGridData;
+            return;
+        }
+        if (!this.listRecord) {
             return;
         }
         if (!this.sourceGridData) {
             this.sourceGridData = [];
         }
         const toLower = filter.toLowerCase();
+        const nameField = this.listRecord.EntityInfo.Fields.find((field) => field.IsNameField);
+        if (!nameField) {
+            LogError("Unable to filter list: No name field found");
+            return;
+        }
         this.filteredGridData = this.sourceGridData.filter((data) => {
-            const name = data.Get("Name") || '';
+            const name = data[nameField.Name];
             return name.toLowerCase().includes(toLower);
         });
     }
@@ -423,29 +510,110 @@ export class SingleListDetailComponent {
     removeViewFromSelectedList(view) {
         this.userViewsToAdd.filter((userView) => userView.ID !== view.ID);
     }
+    onDropdownItemClick(item) {
+        if (!item.Action) {
+            return;
+        }
+        item.Action();
+    }
+    toggleAddRecordsDialog(show) {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.showAddSingleRecordsDialog = show;
+            if (show) {
+                this.listRecords = [];
+                this.searchFilter = "";
+                yield this.loadListRecords();
+            }
+        });
+    }
+    loadListRecords() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!this.listRecord) {
+                LogError("Error loading list records. List record is null");
+                return;
+            }
+            if (!this.sourceEntityInfo) {
+                LogError("Error loading list records. Source entity info is null");
+                return;
+            }
+            this.fetchingListRecords = true;
+            const primaryKeyName = this.sourceEntityInfo.FirstPrimaryKey.Name;
+            let filter = undefined;
+            const nameField = this.sourceEntityInfo.Fields.find((field) => field.IsNameField);
+            if (nameField && this.searchFilter) {
+                filter = `${nameField.Name} LIKE '%${this.searchFilter}%'`;
+            }
+            const rv = new RunView();
+            const rvResult = yield rv.RunView({
+                EntityName: this.listRecord.Entity,
+                ExtraFilter: filter,
+                MaxRows: 50
+            });
+            if (!rvResult.Success) {
+                LogError(`Error loading list records for list ${this.listRecord.ID}`, undefined, rvResult.ErrorMessage);
+                this.fetchingListRecords = false;
+                return;
+            }
+            this.listRecords = rvResult.Results.filter((record) => {
+                const alreadyExits = this.sourceGridData.some((selectedRecord) => selectedRecord.ID === record[primaryKeyName]);
+                return !alreadyExits;
+            }).map((record) => {
+                let result = { ID: record[primaryKeyName], Name: record[nameField.Name] };
+                return result;
+            });
+            this.fetchingListRecords = false;
+        });
+    }
+    addListRecord(listRecord) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!this.listRecord) {
+                LogError("Error adding list record. List record is null");
+                this.sharedService.CreateSimpleNotification("Unable to add record to list");
+                return;
+            }
+            const md = new Metadata();
+            const listEntity = yield md.GetEntityObject("List Details", md.CurrentUser);
+            listEntity.ListID = this.listRecord.ID;
+            listEntity.RecordID = listRecord.ID;
+            const saveResult = yield listEntity.Save();
+            if (!saveResult) {
+                LogError(`Error adding record ${listRecord.ID} to list ${this.listRecord.ID}`, undefined, listEntity.LatestResult);
+                const alreadyExists = listEntity.LatestResult.Message.includes("already exists in List");
+                if (alreadyExists) {
+                    this.sharedService.CreateSimpleNotification("Record already exists in this list", 'error', 2500);
+                    return;
+                }
+                this.sharedService.CreateSimpleNotification("Unable to add record to list", 'error', 2500);
+                return;
+            }
+            this.sharedService.CreateSimpleNotification("Unable to add record to list", 'success', 2500);
+        });
+    }
 }
 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: 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"], [3, "width", "headerStyle", "style", 4, "ngIf"], [3, "field", "title", "width", "editable", "editor", "headerStyle", "style", 4, "ngFor", "ngForOf"], [3, "width", "headerStyle"], [3, "field", "title", "width", "editable", "editor", "headerStyle"], [4, "ngIf"], ["kendoGridFooterTemplate", ""], [2, "font-size", "smaller", "font-weight", "normal"], ["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) {
+SingleListDetailComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SingleListDetailComponent, selectors: [["mj-list-detail"]], inputs: { ListID: "ListID" }, decls: 17, vars: 7, consts: [["searchInput", ""], [1, "app-container"], [1, "flex-display-row-header"], ["textField", "Text", "themeColor", "info", 1, "add-btn", 3, "itemClick", "data"], [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"], ["class", "dialog-wrapper", 3, "title", "minWidth", "width", "height", "close", 4, "ngIf"], [1, "fa-solid", "fa-magnifying-glass", "margin-left-small"], [3, "width", "headerStyle", "style", 4, "ngIf"], [3, "field", "title", "width", "editable", "editor", "headerStyle", "style", 4, "ngFor", "ngForOf"], [3, "width", "headerStyle"], [3, "field", "title", "width", "editable", "editor", "headerStyle"], [4, "ngIf"], ["kendoGridFooterTemplate", ""], [2, "font-size", "smaller", "font-weight", "normal"], ["title", "Select Views to Add", 1, "dialog-wrapper", 3, "close", "minWidth", "width", "height"], [1, "popup-actions-btn"], ["kendoButton", "", "themeColor", "info", 1, "cancel-btn", 3, "click", "disabled"], ["kendoButton", "", "fillMode", "outline", "themeColor", "info", 1, "yes-btn", 3, "click", "disabled"], [3, "min", "max", "value", "indeterminate"], [1, "search-header"], ["id", "listSearch", "placeholder", "Search Views...", "kendoTextBox", "", 1, "search-bar", 3, "clearButton"], [1, "overflow-y-scroll"], [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"], [1, "dialog-wrapper", 3, "close", "title", "minWidth", "width", "height"], ["id", "listRecordSearch", "kendoTextBox", "", 1, "search-bar", 3, "valueChange", "placeholder", "clearButton"], [1, "list-text"]], 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", 3);
-        i0.ɵɵlistener("click", function SingleListDetailComponent_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.toggleAddDialog(true)); });
+        i0.ɵɵelementStart(4, "kendo-dropdownbutton", 3);
+        i0.ɵɵlistener("itemClick", function SingleListDetailComponent_Template_kendo_dropdownbutton_itemClick_4_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onDropdownItemClick($event)); });
         i0.ɵɵelement(5, "span", 4);
-        i0.ɵɵtext(6, " Add More Records ");
+        i0.ɵɵtext(6, " Add to List ");
         i0.ɵɵelementEnd()();
         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.ɵɵlistener("keyup", function SingleListDetailComponent_Template_kendo_textbox_keyup_10_listener() { i0.ɵɵrestoreView(_r1); const searchInput_r2 = i0.ɵɵreference(11); return i0.ɵɵresetView(ctx.onListSearchValueChange(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, 3, 3, "kendo-grid", 10);
         i0.ɵɵelementEnd();
-        i0.ɵɵtemplate(15, SingleListDetailComponent_kendo_dialog_15_Template, 12, 7, "kendo-dialog", 11);
+        i0.ɵɵtemplate(15, SingleListDetailComponent_kendo_dialog_15_Template, 8, 6, "kendo-dialog", 11)(16, SingleListDetailComponent_kendo_dialog_16_Template, 6, 6, "kendo-dialog", 12);
     } if (rf & 2) {
         i0.ɵɵadvance(3);
-        i0.ɵɵtextInterpolate(ctx.listName);
-        i0.ɵɵadvance(7);
+        i0.ɵɵtextInterpolate(ctx.listRecord ? ctx.listRecord.Name : "List");
+        i0.ɵɵadvance();
+        i0.ɵɵproperty("data", ctx.addOptions);
+        i0.ɵɵadvance(6);
         i0.ɵɵproperty("clearButton", true);
         i0.ɵɵadvance(2);
         i0.ɵɵproperty("showSeparator", true);
@@ -453,10 +621,14 @@ SingleListDetailComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: S
         i0.ɵɵconditional(ctx.showLoader ? 13 : 14);
         i0.ɵɵadvance(2);
         i0.ɵɵproperty("ngIf", ctx.showAddDialog);
-    } }, dependencies: [i3.NgClass, i3.NgForOf, i3.NgIf, i4.GridComponent, i4.ColumnComponent, i4.FooterTemplateDirective, i4.CheckboxColumnComponent, i5.DialogComponent, i5.DialogActionsComponent, i6.LoaderComponent, i7.ButtonComponent, i8.TextBoxComponent, i8.TextBoxPrefixTemplateDirective, i3.DecimalPipe], 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}"] });
+        i0.ɵɵadvance();
+        i0.ɵɵproperty("ngIf", ctx.showAddSingleRecordsDialog);
+    } }, dependencies: [i3.NgClass, i3.NgForOf, i3.NgIf, i4.GridComponent, i4.ColumnComponent, i4.FooterTemplateDirective, i4.CheckboxColumnComponent, i5.DialogComponent, i5.DialogActionsComponent, i6.LoaderComponent, i7.ButtonComponent, i7.DropDownButtonComponent, i8.TextBoxComponent, i8.TextBoxPrefixTemplateDirective, i9.ProgressBarComponent, i3.DecimalPipe], 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}\n\n.k-dropdown-button[_ngcontent-%COMP%]   .k-button[_ngcontent-%COMP%] {\n    background: var(--border-blue);\n    color: var(--white-color);\n    font-size: 16px;\n    border: none;\n    padding: 8px 25px;\n    border-radius: 10px;\n}\n\n.k-dropdown-button[_ngcontent-%COMP%]   .k-button[_ngcontent-%COMP%]   .k-button-text[_ngcontent-%COMP%]   .card-header-entity[_ngcontent-%COMP%]   .add-item[_ngcontent-%COMP%]   .k-button[_ngcontent-%COMP%]   .k-button-text[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.btn-cmn[_ngcontent-%COMP%] {\n    width: 44px;\n    height: 44px;\n    min-width: 44px;\n    background: transparent;\n    border-radius: 8px;\n    border: 1px solid var(--gray-color);\n}\n\n.btn-cmn.active[_ngcontent-%COMP%] {\n    border: 1px solid var(--border-blue);\n}", ".main-area[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  width: 100%;\n  gap: 24px;\n  padding: 24px 0;\n}\n.list-view[_ngcontent-%COMP%] {\n  padding: 16px;\n  min-width: 300px;\n  border-radius: 4px;\n  background:  #FAFAFA;\n  border: none;\n}\n  .list-view .k-listview-header, \n  .list-view .k-listview-footer {\n  border: none;\n}\n  .list-view .k-listview-content {\n  border: 1px solid rgba(0, 0, 0, 0.08);\n  border-radius: 4px;\n  background: #fff;\n  padding: 16px;\n}\n\n.header[_ngcontent-%COMP%], \n.footer[_ngcontent-%COMP%] {\n  color: #424242;\n  font-size: 16px;\n  height: auto;\n  margin:0;\n}\n\n.header[_ngcontent-%COMP%] {\n  color: #424242;\n  margin-bottom: 16px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n.header[_ngcontent-%COMP%]   .head-tag[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color:  #424242;\nfont-size: 16px;\nfont-style: normal;\nfont-weight: 400;\nline-height: 20px;\n}\n\n.header[_ngcontent-%COMP%]   .count[_ngcontent-%COMP%] {\n  width: 24px;\n  height: 24px;\n  min-width: 24px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  font-size: 10px;\n  background: rgba(0, 0, 0, 0.08);\n  border-radius: 50%;\n}\n.footer[_ngcontent-%COMP%] {\n  font-size: 14px;\n  margin-top: 16px;\n}\n\n.list-item[_ngcontent-%COMP%] {\n  color:  #424242;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 30px;\n  cursor: pointer;\n  margin: 4px;\n}\n.card-container[_ngcontent-%COMP%] {\n  margin: 0;\n  padding: 0;\n  box-shadow: none;\n}\n.card-header-entity[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  padding-bottom: 20px;\n  border-bottom: 1px solid rgba(0, 0, 0, 0.08);\n}\n.card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%]   h1[_ngcontent-%COMP%] {\n  color: #424242;\n  font-size: 28px;\n  font-style: normal;\n  font-weight: 300;\n  line-height: 28px;\n  margin-bottom: 15px;\n}\n.card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n}\n.card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color: #424242;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n}\n\n\n\n\n \n.view-card[_ngcontent-%COMP%]   .view-icon[_ngcontent-%COMP%] {\n  color: var(--sideNav);\n}\n.card-wrapper[_ngcontent-%COMP%] {\n  border: 1px solid rgba(0, 0, 0, 0.08);\n  border-radius: 6px;\n  width: 100% !important;\n}\n.card-wrapper[_ngcontent-%COMP%]   .k-card-body[_ngcontent-%COMP%] {\n  background: #fff;\n  padding: 12px 20px;\n}\n.card-wrapper[_ngcontent-%COMP%]   .view-card[_ngcontent-%COMP%] {\n  overflow: auto;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  background: #fafafa;\n  padding: 4px 15px;\n}\n.view-card[_ngcontent-%COMP%]   .btn-wrapper[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n}\n\n.k-card-body[_ngcontent-%COMP%]   .view-card-content[_ngcontent-%COMP%]   h5[_ngcontent-%COMP%] {\n  color: #424242;\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n  margin-bottom: 0;\n  letter-spacing: 0.18px;\n}\n.k-card-body[_ngcontent-%COMP%]   .view-card-content[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  color: #666;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n  height: 48px;\n  margin-bottom: 0;\n}\n.card-container[_ngcontent-%COMP%] {\n  padding: 0;\n  margin: 0;\n  box-shadow: none;\n}\n.card-header-entity[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  padding-bottom: 20px;\n  border-bottom: 1px solid rgba(0, 0, 0, 0.08);\n}\n\n.card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%]   h1[_ngcontent-%COMP%] {\n  color: #424242;\n  font-size: 28px;\n  font-style: normal;\n  font-weight: 300;\n  line-height: 28px;\n  margin-bottom: 15px;\n}\n.card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n}\n.card-header-entity[_ngcontent-%COMP%]   .title-wrap[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color: #424242;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n}\n.main-area[_ngcontent-%COMP%]   .card-list[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  gap: 20px;\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 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\n        <!--\n        <kendo-grid #kendoGrid\n            mjFillContainer\n            [resizable]=\"true\"\n            [data]=\"gridView\" \n            [skip]=\"skip\"\n            [pageSize]=\"pageSize\"\n            scrollable=\"virtual\"\n            [rowHeight]=\"36\"\n            (pageChange)=\"pageChange($event)\"\n            [loading]=\"isLoading\"\n            [height]=\"gridHeight\"\n            [sortable]=\"true\"\n            [sort]=\"sortSettings\" \n            [resizable]=\"true\"\n            [reorderable]=\"true\"\n            [selectable]=\"true\"\n            kendoGridSelectBy\n            [(selectedKeys)]=\"selectedKeys\"\n            (cellClick)=\"cellClickHandler($event)\"\n            (cellClose)=\"cellCloseHandler($event)\"\n            (columnReorder)=\"columnReorder($event)\"\n            (columnResize)=\"columnResize($event)\"\n            (selectionChange)=\"selectionChange($event)\"\n            (sortChange)=\"sortChanged($event)\"\n            >\n        -->\n\n        <kendo-grid [data]=\"filteredGridData\">\n            <kendo-grid-checkbox-column \n                *ngIf=\"selectModeEnabled\" \n                [width]=\"50\" \n                [headerStyle]=\"{ 'font-weight' : 'bold', 'background-color': 'white' }\" \n                [style]=\"{'text-align': 'center', 'vertical-align': 'center'}\">\n            </kendo-grid-checkbox-column>\n            \n            <kendo-grid-column \n                *ngFor=\"let item of visibleColumns\" \n                [field]=\"item.Name || ''\" \n                [title]=\"GetColumnTitle(item)\"\n                [width]=\"item.width ? item.width : 100\"\n                [editable]=\"item.EntityField?.AllowUpdateAPI || false\"\n                [editor]=\"getEditor(item.EntityField)\"\n                [headerStyle]=\"{ 'font-weight' : 'bold', 'background-color': 'white' }\"\n                [style]=\"this.GetColumnCellStyle(item)\"\n                >\n                <ng-template *ngIf=\"item===visibleColumns[0]\" kendoGridFooterTemplate >\n                    {{this.filteredGridData.length | number}}{{this.totalRowCount > this.filteredGridData.length ? ' of ' + (this.totalRowCount | number) : ' rows'}}<br/><span style=\"font-size: smaller; font-weight: normal;\">{{viewExecutionTime | number:'1.2-2'}} seconds</span>\n                </ng-template>\n            </kendo-grid-column>\n\n            <!--\n            <kendo-excelexport #excelExport [data]=\"exportData\" [fileName]=\"(_viewEntity ? _viewEntity.Get('Name') : _entityInfo?.Name) + '.xlsx'\">\n                <kendo-excelexport-column *ngFor=\"let exportCol of exportColumns\" [field]=\"exportCol.Name\" [title]=\"exportCol.Name\">\n                </kendo-excelexport-column>\n            </kendo-excelexport>\n            -->\n        </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: 14 }); })();
+        args: [{ selector: 'mj-list-detail', template: "<div class=\"app-container\">\n    <div class=\"flex-display-row-header\">\n        <h1>{{listRecord ? listRecord.Name: \"List\"}}</h1>\n        <kendo-dropdownbutton \n          class=\"add-btn\" \n          (itemClick)=\"onDropdownItemClick($event)\" \n          [data]=\"addOptions\" \n          textField=\"Text\"\n          themeColor=\"info\">\n            <span class=\"fa-solid fa-plus\"></span>\n              Add to List\n        </kendo-dropdownbutton> \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)=\"onListSearchValueChange(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\">\n            <kendo-grid-checkbox-column \n                *ngIf=\"selectModeEnabled\" \n                [width]=\"50\" \n                [headerStyle]=\"{ 'font-weight' : 'bold', 'background-color': 'white' }\" \n                [style]=\"{'text-align': 'center', 'vertical-align': 'center'}\">\n            </kendo-grid-checkbox-column>\n            \n            <kendo-grid-column \n                *ngFor=\"let item of visibleColumns\" \n                [field]=\"item.Name || ''\" \n                [title]=\"GetColumnTitle(item)\"\n                [width]=\"item.width ? item.width : 100\"\n                [editable]=\"item.EntityField?.AllowUpdateAPI || false\"\n                [editor]=\"getEditor(item.EntityField)\"\n                [headerStyle]=\"{ 'font-weight' : 'bold', 'background-color': 'white' }\"\n                [style]=\"this.GetColumnCellStyle(item)\"\n                >\n                <ng-template *ngIf=\"item===visibleColumns[0]\" kendoGridFooterTemplate >\n                    {{this.filteredGridData.length | number}}{{this.totalRowCount > this.filteredGridData.length ? ' of ' + (this.totalRowCount | number) : ' rows'}}<br/><span style=\"font-size: smaller; font-weight: normal;\">{{viewExecutionTime | number:'1.2-2'}} seconds</span>\n                </ng-template>\n            </kendo-grid-column>\n\n            <!--\n            <kendo-excelexport #excelExport [data]=\"exportData\" [fileName]=\"(_viewEntity ? _viewEntity.Get('Name') : _entityInfo?.Name) + '.xlsx'\">\n                <kendo-excelexport-column *ngFor=\"let exportCol of exportColumns\" [field]=\"exportCol.Name\" [title]=\"exportCol.Name\">\n                </kendo-excelexport-column>\n            </kendo-excelexport>\n            -->\n        </kendo-grid>\n    }\n</div>\n\n<kendo-dialog\nclass=\"dialog-wrapper\"\ntitle=\"Select Views to Add\"\n*ngIf=\"showAddDialog\"\n(close)=\"toggleAddFromViewDialog(false)\"\n[minWidth]=\"250\"\n[width]=\"650\"\n[height]=\"550\"\n>\n@if(showAddLoader){\n    <kendo-loader type=\"converging-spinner\"></kendo-loader>\n    <kendo-progressbar \n        [min]=\"0\"\n        [max]=\"recordsToSave\"\n        [value]=\"recordsSaved\"\n        [indeterminate]=\"fetchingRecordsToSave\"\n    />\n}\n@else {\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        />\n    </div>\n    <hr>\n    @for(userView of userViews; track userView){\n        <div class=\"overflow-y-scroll\">\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        </div>\n    }\n}\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)=\"toggleAddFromViewDialog(false)\" [disabled]=\"showAddLoader\" kendoButton fillMode=\"outline\" themeColor=\"info\">\n            Cancel\n        </button>\n    </kendo-dialog-actions>\n</kendo-dialog>\n\n<kendo-dialog\nclass=\"dialog-wrapper\"\n[title]=\"'Select ' + (listRecord ? listRecord.Entity : 'Records') + ' to Add to List'\"\n*ngIf=\"showAddSingleRecordsDialog\"\n(close)=\"toggleAddRecordsDialog(false)\"\n[minWidth]=\"250\"\n[width]=\"650\"\n[height]=\"550\"\n>\n@if(showDialogLoader){\n    <kendo-loader type=\"converging-spinner\"></kendo-loader>\n    <kendo-progressbar \n        [min]=\"0\"\n        [max]=\"recordsToSave\"\n        [value]=\"recordsSaved\"\n        [indeterminate]=\"fetchingRecordsToSave\"\n    />\n}\n@else {\n    <div class=\"search-header\">\n        <kendo-textbox\n            id=\"listRecordSearch\"\n            (valueChange)=\"onListRecordDialogValueChange($event)\"\n            [placeholder]=\"'Search ' + (listRecord ? listRecord.Entity : 'Records') + '...'\"\n            kendoTextBox\n            [clearButton]=\"true\"\n            class=\"search-bar\"\n        />\n    </div>\n    <hr>\n    @if(fetchingListRecords){\n        <kendo-loader type=\"converging-spinner\"></kendo-loader>\n    }\n    @else {\n        @for(listRecord of listRecords; track listRecord){\n            <div class=\"overflow-y-scroll\">\n                <div class=\"list-item\">\n                    <div class=\"list-text\">\n                        {{listRecord.Name}}\n                    </div>\n                    <button kendoButton class=\"btn-no-border\" (click)=\"addListRecord(listRecord)\">\n                        <div class=\"btn-margin-right\">\n                            <span class=\"fa-solid fa-plus\"></span>\n                            Add\n                        </div>\n                    </button>\n                </div>\n                <hr>\n            </div>\n        }\n    }\n}\n    <kendo-dialog-actions class=\"popup-actions-btn\">\n        <button  class=\"yes-btn\" (click)=\"toggleAddRecordsDialog(false)\" [disabled]=\"showDialogLoader\" kendoButton fillMode=\"outline\" themeColor=\"info\">\n            Close\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}\n\n.k-dropdown-button .k-button {\n    background: var(--border-blue);\n    color: var(--white-color);\n    font-size: 16px;\n    border: none;\n    padding: 8px 25px;\n    border-radius: 10px;\n}\n\n.k-dropdown-button .k-button .k-button-text .card-header-entity .add-item .k-button .k-button-text {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.btn-cmn {\n    width: 44px;\n    height: 44px;\n    min-width: 44px;\n    background: transparent;\n    border-radius: 8px;\n    border: 1px solid var(--gray-color);\n}\n\n.btn-cmn.active {\n    border: 1px solid var(--border-blue);\n}", "\n.main-area {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  width: 100%;\n  gap: 24px;\n  padding: 24px 0;\n}\n.list-view {\n  padding: 16px;\n  min-width: 300px;\n  border-radius: 4px;\n  background:  #FAFAFA;\n  border: none;\n}\n::ng-deep .list-view .k-listview-header, \n::ng-deep .list-view .k-listview-footer {\n  border: none;\n}\n::ng-deep .list-view .k-listview-content {\n  border: 1px solid rgba(0, 0, 0, 0.08);\n  border-radius: 4px;\n  background: #fff;\n  padding: 16px;\n}\n\n.header,\n.footer {\n  color: #424242;\n  font-size: 16px;\n  height: auto;\n  margin:0;\n}\n\n.header {\n  color: #424242;\n  margin-bottom: 16px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n.header .head-tag {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color:  #424242;\nfont-size: 16px;\nfont-style: normal;\nfont-weight: 400;\nline-height: 20px;\n}\n\n.header .count {\n  width: 24px;\n  height: 24px;\n  min-width: 24px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  font-size: 10px;\n  background: rgba(0, 0, 0, 0.08);\n  border-radius: 50%;\n}\n.footer {\n  font-size: 14px;\n  margin-top: 16px;\n}\n\n.list-item {\n  color:  #424242;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 30px;\n  cursor: pointer;\n  margin: 4px;\n}\n.card-container {\n  margin: 0;\n  padding: 0;\n  box-shadow: none;\n}\n.card-header-entity {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  padding-bottom: 20px;\n  border-bottom: 1px solid rgba(0, 0, 0, 0.08);\n}\n.card-header-entity .title-wrap h1 {\n  color: #424242;\n  font-size: 28px;\n  font-style: normal;\n  font-weight: 300;\n  line-height: 28px;\n  margin-bottom: 15px;\n}\n.card-header-entity .title-wrap {\n  display: flex;\n  flex-direction: column;\n}\n.card-header-entity .title-wrap p {\n  margin: 0;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color: #424242;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n}\n\n\n\n\n \n.view-card .view-icon {\n  color: var(--sideNav);\n}\n.card-wrapper {\n  border: 1px solid rgba(0, 0, 0, 0.08);\n  border-radius: 6px;\n  width: 100% !important;\n}\n.card-wrapper .k-card-body {\n  background: #fff;\n  padding: 12px 20px;\n}\n.card-wrapper .view-card {\n  overflow: auto;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  background: #fafafa;\n  padding: 4px 15px;\n}\n.view-card .btn-wrapper {\n  display: flex;\n  align-items: center;\n}\n\n.k-card-body .view-card-content h5 {\n  color: #424242;\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n  margin-bottom: 0;\n  letter-spacing: 0.18px;\n}\n.k-card-body .view-card-content p {\n  color: #666;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n  height: 48px;\n  margin-bottom: 0;\n}\n.card-container {\n  padding: 0;\n  margin: 0;\n  box-shadow: none;\n}\n.card-header-entity {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  padding-bottom: 20px;\n  border-bottom: 1px solid rgba(0, 0, 0, 0.08);\n}\n\n.card-header-entity .title-wrap h1 {\n  color: #424242;\n  font-size: 28px;\n  font-style: normal;\n  font-weight: 300;\n  line-height: 28px;\n  margin-bottom: 15px;\n}\n.card-header-entity .title-wrap {\n  display: flex;\n  flex-direction: column;\n}\n.card-header-entity .title-wrap p {\n  margin: 0;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color: #424242;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n}\n.main-area .card-list {\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  gap: 20px;\n}\n"] }]
+    }], () => [{ type: i1.Router }, { type: i1.ActivatedRoute }, { type: i2.SharedService }], { ListID: [{
+            type: Input
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SingleListDetailComponent, { className: "SingleListDetailComponent", filePath: "src/lib/single-list-detail/single-list-detail.component.ts", lineNumber: 15 }); })();
 //# sourceMappingURL=single-list-detail.component.js.map