@memberjunction/ng-explorer-core 2.132.0 → 3.0.0

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

@@ -1,618 +1,887 @@
-import { Component, Input } from '@angular/core';
-import { EntityFieldTSType, LogError, LogStatus, Metadata, RunView } from '@memberjunction/core';
+import { Component, Input, ViewChild } from '@angular/core';
+import { CompositeKey, LogError, LogErrorEx, 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 "@progress/kendo-angular-grid";
-import * as i5 from "@progress/kendo-angular-dialog";
-import * as i6 from "@progress/kendo-angular-buttons";
-import * as i7 from "@progress/kendo-angular-inputs";
-import * as i8 from "@progress/kendo-angular-progressbar";
-import * as i9 from "@memberjunction/ng-shared-generic";
-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", 13);
+import * as i1 from "@memberjunction/ng-shared";
+import * as i2 from "@angular/common";
+import * as i3 from "@progress/kendo-angular-dialog";
+import * as i4 from "@progress/kendo-angular-buttons";
+import * as i5 from "@progress/kendo-angular-inputs";
+import * as i6 from "@progress/kendo-angular-progressbar";
+import * as i7 from "@memberjunction/ng-shared-generic";
+import * as i8 from "@memberjunction/ng-list-detail-grid";
+const _c0 = ["listDetailGrid"];
+const _forTrack0 = ($index, $item) => $item.ID;
+function SingleListDetailComponent_Conditional_7_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 13);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1("(", ctx_r1.selectedKeys.length, " selected)");
+} }
+function SingleListDetailComponent_Conditional_7_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 19);
+    i0.ɵɵlistener("click", function SingleListDetailComponent_Conditional_7_Conditional_6_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.openRemoveDialog()); });
+    i0.ɵɵelement(1, "span", 20);
+    i0.ɵɵtext(2, " Remove from List ");
+    i0.ɵɵelementEnd();
 } }
-function SingleListDetailComponent_Conditional_13_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mj-loading", 9);
+function SingleListDetailComponent_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 5)(1, "div", 11)(2, "span", 12);
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(4, SingleListDetailComponent_Conditional_7_Conditional_4_Template, 2, 1, "span", 13);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "div", 14);
+    i0.ɵɵtemplate(6, SingleListDetailComponent_Conditional_7_Conditional_6_Template, 3, 0, "button", 15);
+    i0.ɵɵelementStart(7, "button", 16);
+    i0.ɵɵlistener("click", function SingleListDetailComponent_Conditional_7_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onRefreshClick()); });
+    i0.ɵɵelement(8, "span", 17);
+    i0.ɵɵtext(9, " Refresh ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(10, "button", 16);
+    i0.ɵɵlistener("click", function SingleListDetailComponent_Conditional_7_Template_button_click_10_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onExportClick()); });
+    i0.ɵɵelement(11, "span", 18);
+    i0.ɵɵtext(12, " Export ");
+    i0.ɵɵelementEnd()()();
 } if (rf & 2) {
-    i0.ɵɵproperty("showText", false);
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate2("", ctx_r1.rowCount, " row", ctx_r1.rowCount !== 1 ? "s" : "", "");
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.selectedKeys.length > 0 ? 4 : -1);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r1.selectedKeys.length > 0 ? 6 : -1);
 } }
-function SingleListDetailComponent_Conditional_14_kendo_grid_checkbox_column_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "kendo-grid-checkbox-column", 16);
+function SingleListDetailComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 6);
+    i0.ɵɵelement(1, "mj-loading", 21);
+    i0.ɵɵelementEnd();
+} }
+function SingleListDetailComponent_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 7)(1, "mj-list-detail-grid", 22, 0);
+    i0.ɵɵlistener("rowClicked", function SingleListDetailComponent_Conditional_9_Template_mj_list_detail_grid_rowClicked_1_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onRowClicked($event)); })("rowDoubleClicked", function SingleListDetailComponent_Conditional_9_Template_mj_list_detail_grid_rowDoubleClicked_1_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onRowDoubleClicked($event)); })("selectionChange", function SingleListDetailComponent_Conditional_9_Template_mj_list_detail_grid_selectionChange_1_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onSelectionChange($event)); })("dataLoaded", function SingleListDetailComponent_Conditional_9_Template_mj_list_detail_grid_dataLoaded_1_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onDataLoaded($event)); });
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("listId", ctx_r1.ListID)("listEntity", ctx_r1.listRecord)("autoNavigate", true)("height", "auto")("showToolbar", false)("toolbarConfig", ctx_r1.gridToolbarConfig)("selectionMode", "checkbox");
+} }
+function SingleListDetailComponent_kendo_dialog_10_Conditional_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "kendo-progressbar", 30);
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("min", 0)("max", ctx_r1.removeTotal)("value", ctx_r1.removeProgress)("label", false);
+} }
+function SingleListDetailComponent_kendo_dialog_10_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 25);
+    i0.ɵɵelement(1, "mj-loading", 29);
+    i0.ɵɵtemplate(2, SingleListDetailComponent_kendo_dialog_10_Conditional_2_Conditional_2_Template, 1, 4, "kendo-progressbar", 30);
+    i0.ɵɵelementEnd();
 } if (rf & 2) {
-    i0.ɵɵstyleMap(i0.ɵɵpureFunction0(4, _c0));
-    i0.ɵɵproperty("width", 50)("headerStyle", i0.ɵɵpureFunction0(5, _c1));
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r1.removeTotal > 0 ? 2 : -1);
 } }
-function SingleListDetailComponent_Conditional_14_kendo_grid_column_2_1_ng_template_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtext(0);
-    i0.ɵɵpipe(1, "number");
-    i0.ɵɵpipe(2, "number");
-    i0.ɵɵelement(3, "br");
-    i0.ɵɵelementStart(4, "span", 20);
+function SingleListDetailComponent_kendo_dialog_10_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 26);
+    i0.ɵɵelement(1, "span", 31);
+    i0.ɵɵelementStart(2, "p");
+    i0.ɵɵtext(3, "Are you sure you want to remove ");
+    i0.ɵɵelementStart(4, "strong");
     i0.ɵɵtext(5);
-    i0.ɵɵpipe(6, "number");
     i0.ɵɵelementEnd();
+    i0.ɵɵtext(6);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(7, "p", 32);
+    i0.ɵɵtext(8, "This will not delete the records, only remove them from this list.");
+    i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(4);
-    i0.ɵɵtextInterpolate2(" ", i0.ɵɵpipeBind1(1, 3, ctx_r2.filteredGridData.length), "", ctx_r2.totalRowCount > ctx_r2.filteredGridData.length ? " of " + i0.ɵɵpipeBind1(2, 5, ctx_r2.totalRowCount) : " rows", "");
+    const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(5);
-    i0.ɵɵtextInterpolate1("", i0.ɵɵpipeBind2(6, 7, ctx_r2.viewExecutionTime, "1.2-2"), " seconds");
+    i0.ɵɵtextInterpolate(ctx_r1.selectedKeys.length);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" record", ctx_r1.selectedKeys.length !== 1 ? "s" : "", " from this list?");
+} }
+function SingleListDetailComponent_kendo_dialog_10_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "kendo-dialog", 23);
+    i0.ɵɵlistener("close", function SingleListDetailComponent_kendo_dialog_10_Template_kendo_dialog_close_0_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.closeRemoveDialog()); });
+    i0.ɵɵelementStart(1, "div", 24);
+    i0.ɵɵtemplate(2, SingleListDetailComponent_kendo_dialog_10_Conditional_2_Template, 3, 1, "div", 25)(3, SingleListDetailComponent_kendo_dialog_10_Conditional_3_Template, 9, 2, "div", 26);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "kendo-dialog-actions")(5, "button", 27);
+    i0.ɵɵlistener("click", function SingleListDetailComponent_kendo_dialog_10_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.confirmRemoveFromList()); });
+    i0.ɵɵtext(6, " Remove ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(7, "button", 28);
+    i0.ɵɵlistener("click", function SingleListDetailComponent_kendo_dialog_10_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.closeRemoveDialog()); });
+    i0.ɵɵtext(8, " Cancel ");
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("minWidth", 350)("width", 450);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r1.isRemoving ? 2 : 3);
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("disabled", ctx_r1.isRemoving);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("disabled", ctx_r1.isRemoving);
 } }
-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", 19);
+function SingleListDetailComponent_kendo_dialog_11_Conditional_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "kendo-progressbar", 30);
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("min", 0)("max", ctx_r1.addTotal)("value", ctx_r1.addProgress)("label", false);
 } }
-function SingleListDetailComponent_Conditional_14_kendo_grid_column_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "kendo-grid-column", 17);
-    i0.ɵɵtemplate(1, SingleListDetailComponent_Conditional_14_kendo_grid_column_2_1_Template, 1, 0, null, 18);
+function SingleListDetailComponent_kendo_dialog_11_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 25);
+    i0.ɵɵelement(1, "mj-loading", 36);
+    i0.ɵɵtemplate(2, SingleListDetailComponent_kendo_dialog_11_Conditional_2_Conditional_2_Template, 1, 4, "kendo-progressbar", 30);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const item_r4 = ctx.$implicit;
-    const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵstyleMap(ctx_r2.GetColumnCellStyle(item_r4));
-    i0.ɵɵproperty("field", item_r4.Name || "")("title", ctx_r2.GetColumnTitle(item_r4))("width", item_r4.width ? item_r4.width : 100)("editable", (item_r4.EntityField == null ? null : item_r4.EntityField.AllowUpdateAPI) || false)("editor", ctx_r2.getEditor(item_r4.EntityField))("headerStyle", i0.ɵɵpureFunction0(9, _c1));
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", item_r4 === ctx_r2.visibleColumns[0]);
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r1.addTotal > 0 ? 2 : -1);
 } }
-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", 14)(2, SingleListDetailComponent_Conditional_14_kendo_grid_column_2_Template, 2, 10, "kendo-grid-column", 15);
+function SingleListDetailComponent_kendo_dialog_11_Conditional_3_ng_template_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "span", 44);
+} }
+function SingleListDetailComponent_kendo_dialog_11_Conditional_3_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 42);
+    i0.ɵɵelement(1, "mj-loading", 45);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("data", ctx_r2.filteredGridData);
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r2.selectModeEnabled);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngForOf", ctx_r2.visibleColumns);
+    i0.ɵɵproperty("showText", false);
 } }
-function SingleListDetailComponent_kendo_dialog_15_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mj-loading", 25)(1, "kendo-progressbar", 26);
+function SingleListDetailComponent_kendo_dialog_11_Conditional_3_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 43);
+    i0.ɵɵelement(1, "span", 46);
+    i0.ɵɵelementStart(2, "p");
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("showText", false);
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("min", 0)("max", ctx_r2.recordsToSave)("value", ctx_r2.recordsSaved)("indeterminate", ctx_r2.fetchingRecordsToSave);
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate1("No records found matching \"", ctx_r1.addRecordsSearchFilter, "\"");
 } }
-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", 34);
-    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", 35);
-    i0.ɵɵtext(2, " Remove ");
+function SingleListDetailComponent_kendo_dialog_11_Conditional_3_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 43);
+    i0.ɵɵelement(1, "span", 47);
+    i0.ɵɵelementStart(2, "p");
+    i0.ɵɵtext(3, "Search for records to add to this list");
+    i0.ɵɵelementEnd()();
+} }
+function SingleListDetailComponent_kendo_dialog_11_Conditional_3_Conditional_9_For_9_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "span", 55);
+} }
+function SingleListDetailComponent_kendo_dialog_11_Conditional_3_Conditional_9_For_9_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    const _r11 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "input", 59);
+    i0.ɵɵlistener("click", function SingleListDetailComponent_kendo_dialog_11_Conditional_3_Conditional_9_For_9_Conditional_3_Template_input_click_0_listener($event) { i0.ɵɵrestoreView(_r11); return i0.ɵɵresetView($event.stopPropagation()); })("change", function SingleListDetailComponent_kendo_dialog_11_Conditional_3_Conditional_9_For_9_Conditional_3_Template_input_change_0_listener() { i0.ɵɵrestoreView(_r11); const record_r10 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.toggleRecordSelection(record_r10)); });
     i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const record_r10 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵproperty("checked", record_r10.isSelected);
 } }
-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", 36);
-    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", 37);
-    i0.ɵɵelement(2, "span", 4);
-    i0.ɵɵtext(3, " Add ");
-    i0.ɵɵelementEnd()();
+function SingleListDetailComponent_kendo_dialog_11_Conditional_3_Conditional_9_For_9_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 58);
+    i0.ɵɵtext(1, "In List");
+    i0.ɵɵelementEnd();
 } }
-function SingleListDetailComponent_kendo_dialog_15_Conditional_2_For_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 29)(1, "div", 30)(2, "div", 31);
-    i0.ɵɵtext(3);
+function SingleListDetailComponent_kendo_dialog_11_Conditional_3_Conditional_9_For_9_Template(rf, ctx) { if (rf & 1) {
+    const _r9 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 53);
+    i0.ɵɵlistener("click", function SingleListDetailComponent_kendo_dialog_11_Conditional_3_Conditional_9_For_9_Template_div_click_0_listener() { const record_r10 = i0.ɵɵrestoreView(_r9).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.toggleRecordSelection(record_r10)); });
+    i0.ɵɵelementStart(1, "div", 54);
+    i0.ɵɵtemplate(2, SingleListDetailComponent_kendo_dialog_11_Conditional_3_Conditional_9_For_9_Conditional_2_Template, 1, 0, "span", 55)(3, SingleListDetailComponent_kendo_dialog_11_Conditional_3_Conditional_9_For_9_Conditional_3_Template, 1, 1, "input", 56);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(4, SingleListDetailComponent_kendo_dialog_15_Conditional_2_For_4_Conditional_4_Template, 3, 0, "button", 32)(5, SingleListDetailComponent_kendo_dialog_15_Conditional_2_For_4_Conditional_5_Template, 4, 0, "button", 33);
+    i0.ɵɵelementStart(4, "div", 57);
+    i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(6, "hr");
+    i0.ɵɵtemplate(6, SingleListDetailComponent_kendo_dialog_11_Conditional_3_Conditional_9_For_9_Conditional_6_Template, 2, 0, "span", 58);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const userView_r7 = ctx.$implicit;
-    const ctx_r2 = i0.ɵɵnextContext(3);
+    const record_r10 = ctx.$implicit;
+    i0.ɵɵclassProp("in-list", record_r10.isInList)("selected", record_r10.isSelected);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(3, _c2, ctx_r2.userViewsToAdd.includes(userView_r7)));
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", userView_r7.Name, " ");
+    i0.ɵɵconditional(record_r10.isInList ? 2 : 3);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(record_r10.Name);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r2.userViewsToAdd.includes(userView_r7) ? 4 : 5);
+    i0.ɵɵconditional(record_r10.isInList ? 6 : -1);
 } }
-function SingleListDetailComponent_kendo_dialog_15_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 27);
-    i0.ɵɵelement(1, "kendo-textbox", 28);
+function SingleListDetailComponent_kendo_dialog_11_Conditional_3_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    const _r8 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 48)(1, "button", 49);
+    i0.ɵɵlistener("click", function SingleListDetailComponent_kendo_dialog_11_Conditional_3_Conditional_9_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.selectAllAddable()); });
+    i0.ɵɵtext(2, "Select All");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "button", 49);
+    i0.ɵɵlistener("click", function SingleListDetailComponent_kendo_dialog_11_Conditional_3_Conditional_9_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.deselectAllAddable()); });
+    i0.ɵɵtext(4, "Deselect All");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "span", 50);
+    i0.ɵɵtext(6);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(7, "div", 51);
+    i0.ɵɵrepeaterCreate(8, SingleListDetailComponent_kendo_dialog_11_Conditional_3_Conditional_9_For_9_Template, 7, 7, "div", 52, _forTrack0);
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(2, "hr");
-    i0.ɵɵrepeaterCreate(3, SingleListDetailComponent_kendo_dialog_15_Conditional_2_For_4_Template, 7, 5, "div", 29, i0.ɵɵrepeaterTrackByIdentity);
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("clearButton", true);
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(6);
+    i0.ɵɵtextInterpolate1("", ctx_r1.selectedAddableRecords.length, " selected");
     i0.ɵɵadvance(2);
-    i0.ɵɵrepeater(ctx_r2.userViews);
+    i0.ɵɵrepeater(ctx_r1.addableRecords);
 } }
-function SingleListDetailComponent_kendo_dialog_15_Template(rf, ctx) { if (rf & 1) {
-    const _r5 = i0.ɵɵgetCurrentView();
-    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, 5)(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(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()()();
+function SingleListDetailComponent_kendo_dialog_11_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    const _r7 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 37)(1, "kendo-textbox", 38);
+    i0.ɵɵlistener("valueChange", function SingleListDetailComponent_kendo_dialog_11_Conditional_3_Template_kendo_textbox_valueChange_1_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onAddRecordsSearchChange($event)); });
+    i0.ɵɵtemplate(2, SingleListDetailComponent_kendo_dialog_11_Conditional_3_ng_template_2_Template, 1, 0, "ng-template", 39);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "span", 40);
+    i0.ɵɵtext(4, "Type at least 2 characters to search");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(5, "div", 41);
+    i0.ɵɵtemplate(6, SingleListDetailComponent_kendo_dialog_11_Conditional_3_Conditional_6_Template, 2, 1, "div", 42)(7, SingleListDetailComponent_kendo_dialog_11_Conditional_3_Conditional_7_Template, 4, 1, "div", 43)(8, SingleListDetailComponent_kendo_dialog_11_Conditional_3_Conditional_8_Template, 4, 0, "div", 43)(9, SingleListDetailComponent_kendo_dialog_11_Conditional_3_Conditional_9_Template, 10, 1);
+    i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("minWidth", 250)("width", 650)("height", 550);
+    const ctx_r1 = i0.ɵɵnextContext(2);
     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);
+    i0.ɵɵproperty("placeholder", "Search " + ((ctx_r1.listRecord == null ? null : ctx_r1.listRecord.Entity) || "records") + "...")("clearButton", true)("value", ctx_r1.addRecordsSearchFilter);
+    i0.ɵɵadvance(5);
+    i0.ɵɵconditional(ctx_r1.addDialogLoading ? 6 : ctx_r1.addableRecords.length === 0 && ctx_r1.addRecordsSearchFilter.length >= 2 ? 7 : ctx_r1.addableRecords.length === 0 ? 8 : 9);
 } }
-function SingleListDetailComponent_kendo_dialog_16_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mj-loading", 25)(1, "kendo-progressbar", 26);
+function SingleListDetailComponent_kendo_dialog_11_Template(rf, ctx) { if (rf & 1) {
+    const _r6 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "kendo-dialog", 33);
+    i0.ɵɵlistener("close", function SingleListDetailComponent_kendo_dialog_11_Template_kendo_dialog_close_0_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.closeAddRecordsDialog()); });
+    i0.ɵɵelementStart(1, "div", 34);
+    i0.ɵɵtemplate(2, SingleListDetailComponent_kendo_dialog_11_Conditional_2_Template, 3, 1, "div", 25)(3, SingleListDetailComponent_kendo_dialog_11_Conditional_3_Template, 10, 4);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "kendo-dialog-actions")(5, "button", 35);
+    i0.ɵɵlistener("click", function SingleListDetailComponent_kendo_dialog_11_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.confirmAddRecords()); });
+    i0.ɵɵtext(6);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(7, "button", 28);
+    i0.ɵɵlistener("click", function SingleListDetailComponent_kendo_dialog_11_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.closeAddRecordsDialog()); });
+    i0.ɵɵtext(8, " Cancel ");
+    i0.ɵɵelementEnd()()();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("showText", false);
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("title", "Add " + ((ctx_r1.listRecord == null ? null : ctx_r1.listRecord.Entity) || "Records") + " to List")("minWidth", 500)("width", 700)("height", 650);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r1.addDialogSaving ? 2 : 3);
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("disabled", ctx_r1.addDialogSaving || ctx_r1.selectedAddableRecords.length === 0);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate2(" Add ", ctx_r1.selectedAddableRecords.length > 0 ? ctx_r1.selectedAddableRecords.length : "", " Record", ctx_r1.selectedAddableRecords.length !== 1 ? "s" : "", " ");
     i0.ɵɵadvance();
-    i0.ɵɵproperty("min", 0)("max", ctx_r2.recordsToSave)("value", ctx_r2.recordsSaved)("indeterminate", ctx_r2.fetchingRecordsToSave);
+    i0.ɵɵproperty("disabled", ctx_r1.addDialogSaving);
+} }
+function SingleListDetailComponent_kendo_dialog_12_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 25);
+    i0.ɵɵelement(1, "mj-loading", 61);
+    i0.ɵɵelementEnd();
 } }
-function SingleListDetailComponent_kendo_dialog_16_Conditional_2_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mj-loading", 25);
+function SingleListDetailComponent_kendo_dialog_12_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 25);
+    i0.ɵɵelement(1, "mj-loading", 36)(2, "kendo-progressbar", 30);
+    i0.ɵɵelementEnd();
 } if (rf & 2) {
-    i0.ɵɵproperty("showText", false);
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("min", 0)("max", ctx_r1.addFromViewTotal)("value", ctx_r1.addFromViewProgress)("label", false);
 } }
-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", 29)(1, "div", 30)(2, "div", 40);
-    i0.ɵɵtext(3);
+function SingleListDetailComponent_kendo_dialog_12_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 25);
+    i0.ɵɵelement(1, "mj-loading", 62);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "button", 36);
-    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", 37);
-    i0.ɵɵelement(6, "span", 4);
-    i0.ɵɵtext(7, " Add ");
-    i0.ɵɵelementEnd()()();
-    i0.ɵɵelement(8, "hr");
+} }
+function SingleListDetailComponent_kendo_dialog_12_Conditional_5_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 43);
+    i0.ɵɵelement(1, "span", 65);
+    i0.ɵɵelementStart(2, "p");
+    i0.ɵɵtext(3, "No saved views found for this entity");
+    i0.ɵɵelementEnd()();
+} }
+function SingleListDetailComponent_kendo_dialog_12_Conditional_5_Conditional_4_For_1_Template(rf, ctx) { if (rf & 1) {
+    const _r13 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 67);
+    i0.ɵɵlistener("click", function SingleListDetailComponent_kendo_dialog_12_Conditional_5_Conditional_4_For_1_Template_div_click_0_listener() { const view_r14 = i0.ɵɵrestoreView(_r13).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.toggleViewSelection(view_r14)); });
+    i0.ɵɵelementStart(1, "input", 59);
+    i0.ɵɵlistener("click", function SingleListDetailComponent_kendo_dialog_12_Conditional_5_Conditional_4_For_1_Template_input_click_1_listener($event) { i0.ɵɵrestoreView(_r13); return i0.ɵɵresetView($event.stopPropagation()); })("change", function SingleListDetailComponent_kendo_dialog_12_Conditional_5_Conditional_4_For_1_Template_input_change_1_listener() { const view_r14 = i0.ɵɵrestoreView(_r13).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.toggleViewSelection(view_r14)); });
     i0.ɵɵelementEnd();
+    i0.ɵɵelement(2, "span", 68);
+    i0.ɵɵelementStart(3, "span", 69);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const listRecord_r12 = ctx.$implicit;
+    const view_r14 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(4);
+    i0.ɵɵclassProp("selected", ctx_r1.isViewSelected(view_r14));
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("checked", ctx_r1.isViewSelected(view_r14));
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate1(" ", listRecord_r12.Name, " ");
+    i0.ɵɵtextInterpolate(view_r14.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", 29, i0.ɵɵrepeaterTrackByIdentity);
+function SingleListDetailComponent_kendo_dialog_12_Conditional_5_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵrepeaterCreate(0, SingleListDetailComponent_kendo_dialog_12_Conditional_5_Conditional_4_For_1_Template, 5, 4, "div", 66, _forTrack0);
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(3);
-    i0.ɵɵrepeater(ctx_r2.listRecords);
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵrepeater(ctx_r1.userViews);
 } }
-function SingleListDetailComponent_kendo_dialog_16_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    const _r10 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 27)(1, "kendo-textbox", 39);
-    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, 1, "mj-loading", 25)(4, SingleListDetailComponent_kendo_dialog_16_Conditional_2_Conditional_4_Template, 2, 0);
+function SingleListDetailComponent_kendo_dialog_12_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 63);
+    i0.ɵɵtext(1, "Select views to add their records to this list:");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(2, "div", 64);
+    i0.ɵɵtemplate(3, SingleListDetailComponent_kendo_dialog_12_Conditional_5_Conditional_3_Template, 4, 0, "div", 43)(4, SingleListDetailComponent_kendo_dialog_12_Conditional_5_Conditional_4_Template, 2, 0);
+    i0.ɵɵelementEnd();
 } 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);
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(3);
+    i0.ɵɵconditional(!ctx_r1.userViews || ctx_r1.userViews.length === 0 ? 3 : 4);
 } }
-function SingleListDetailComponent_kendo_dialog_16_Template(rf, ctx) { if (rf & 1) {
-    const _r9 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "kendo-dialog", 38);
-    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, 5)(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 ");
+function SingleListDetailComponent_kendo_dialog_12_Template(rf, ctx) { if (rf & 1) {
+    const _r12 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "kendo-dialog", 60);
+    i0.ɵɵlistener("close", function SingleListDetailComponent_kendo_dialog_12_Template_kendo_dialog_close_0_listener() { i0.ɵɵrestoreView(_r12); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.closeAddFromViewDialog()); });
+    i0.ɵɵelementStart(1, "div", 24);
+    i0.ɵɵtemplate(2, SingleListDetailComponent_kendo_dialog_12_Conditional_2_Template, 2, 0, "div", 25)(3, SingleListDetailComponent_kendo_dialog_12_Conditional_3_Template, 3, 4, "div", 25)(4, SingleListDetailComponent_kendo_dialog_12_Conditional_4_Template, 2, 0, "div", 25)(5, SingleListDetailComponent_kendo_dialog_12_Conditional_5_Template, 5, 1);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "kendo-dialog-actions")(7, "button", 35);
+    i0.ɵɵlistener("click", function SingleListDetailComponent_kendo_dialog_12_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r12); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.confirmAddFromView()); });
+    i0.ɵɵtext(8);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(9, "button", 28);
+    i0.ɵɵlistener("click", function SingleListDetailComponent_kendo_dialog_12_Template_button_click_9_listener() { i0.ɵɵrestoreView(_r12); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.closeAddFromViewDialog()); });
+    i0.ɵɵtext(10, " Cancel ");
     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);
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("minWidth", 400)("width", 600)("height", 500);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r1.showAddFromViewLoader && ctx_r1.fetchingRecordsToSave ? 2 : ctx_r1.showAddFromViewLoader && ctx_r1.addFromViewTotal > 0 ? 3 : ctx_r1.showAddFromViewLoader ? 4 : 5);
+    i0.ɵɵadvance(5);
+    i0.ɵɵproperty("disabled", ctx_r1.showAddFromViewLoader || ctx_r1.userViewsToAdd.length === 0);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r2.showDialogLoader ? 1 : 2);
-    i0.ɵɵadvance(3);
-    i0.ɵɵproperty("disabled", ctx_r2.showDialogLoader);
+    i0.ɵɵtextInterpolate2(" Add from ", ctx_r1.userViewsToAdd.length, " View", ctx_r1.userViewsToAdd.length !== 1 ? "s" : "", " ");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("disabled", ctx_r1.showAddFromViewLoader);
 } }
 export class SingleListDetailComponent {
-    router;
-    route;
     sharedService;
+    cdr;
     ListID = "";
+    listDetailGrid;
+    // List record
     listRecord = null;
-    sourceEntityInfo = null;
     showLoader = false;
-    sourceGridData = [];
-    filteredGridData = [];
-    showAddDialog = false;
-    showAddLoader = false;
-    showDialogLoader = false;
+    // Grid state
+    selectedKeys = [];
+    rowCount = 0;
+    // Toolbar config - hide EDG toolbar, we'll use our own
+    gridToolbarConfig = {
+        showSearch: false,
+        showRefresh: false,
+        showAdd: false,
+        showDelete: false,
+        showExport: false,
+        showRowCount: false,
+        showSelectionCount: false
+    };
+    // Remove from list dialog
+    showRemoveDialog = false;
+    isRemoving = false;
+    removeProgress = 0;
+    removeTotal = 0;
+    // Add records dialog
+    showAddRecordsDialog = false;
+    addDialogLoading = false;
+    addDialogSaving = false;
+    addableRecords = [];
+    addRecordsSearchFilter = "";
+    existingListDetailIds = new Set();
+    addProgress = 0;
+    addTotal = 0;
+    searchSubject = new Subject();
+    // Add from view dialog (existing)
+    showAddFromViewDialog = false;
+    showAddFromViewLoader = false;
     userViews = null;
-    filterDebounceTime = 250;
-    filterItemsSubject = new Subject();
-    filter = '';
     userViewsToAdd = [];
-    page = 0;
-    pageSize = 50;
-    gridHeight = 750;
-    sortSettings = [];
-    selectedKeys = [];
-    selectModeEnabled = false;
-    viewColumns = [];
-    visibleColumns = [];
-    totalRowCount = 0;
-    viewExecutionTime = 0;
-    recordsToSave = 0;
-    recordsSaved = 0;
+    addFromViewProgress = 0;
+    addFromViewTotal = 0;
     fetchingRecordsToSave = false;
-    showAddSingleRecordsDialog = false;
-    fetchingListRecords = false;
-    listRecords = [];
-    selectedListRecords = [];
-    searchFilter = "";
-    filterListrecordsSubject = new Subject();
+    // Dropdown menu options
     addOptions = [
         {
-            Text: 'Add From View',
-            Description: 'Add all records of a view to this list',
-            Icon: 'folder',
-            Action: () => {
-                this.toggleAddFromViewDialog(true);
-            }
+            Text: 'Add Records',
+            Description: 'Search and add specific records to this list',
+            Icon: 'search',
+            Action: () => this.openAddRecordsDialog()
         },
         {
-            Text: 'Add a Record',
-            Description: 'Add a specific record to the list',
+            Text: 'Add From View',
+            Description: 'Add all records from a saved view',
             Icon: 'folder',
-            Action: () => {
-                this.toggleAddRecordsDialog(true);
-            }
+            Action: () => this.openAddFromViewDialog()
         }
     ];
-    constructor(router, route, sharedService) {
-        this.router = router;
-        this.route = route;
+    constructor(sharedService, cdr) {
         this.sharedService = sharedService;
-        this.filterItemsSubject
-            .pipe(debounceTime(this.filterDebounceTime))
-            .subscribe(() => this.filterItems(this.filter));
-        this.filterListrecordsSubject
-            .pipe(debounceTime(this.filterDebounceTime))
-            .subscribe(() => this.loadListRecords());
+        this.cdr = cdr;
+        // Debounce search input
+        this.searchSubject
+            .pipe(debounceTime(300))
+            .subscribe((searchText) => this.searchRecords(searchText));
     }
     async ngOnInit() {
         if (this.ListID) {
-            await this.loadList(this.ListID);
+            await this.loadListRecord();
         }
     }
-    async loadList(listID) {
-        if (!listID) {
+    /**
+     * Load the list entity record
+     */
+    async loadListRecord() {
+        if (!this.ListID)
             return;
-        }
-        const startTime = new Date().getTime();
         this.showLoader = true;
-        const md = new Metadata();
-        const rv = new RunView();
-        this.listRecord = await md.GetEntityObject("Lists");
-        const loadResult = await this.listRecord.Load(listID);
-        if (!loadResult) {
-            LogError("Error loading list with ID " + listID, undefined, this.listRecord.LatestResult);
-            this.showLoader = false;
-            return;
+        try {
+            const md = new Metadata();
+            this.listRecord = await md.GetEntityObject("Lists");
+            const loadResult = await this.listRecord.Load(this.ListID);
+            if (!loadResult) {
+                LogError("Error loading list with ID " + this.ListID, undefined, this.listRecord.LatestResult);
+                this.listRecord = null;
+            }
         }
-        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 = await 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}`);
+        catch (error) {
+            LogError("Error loading list", undefined, error);
+            this.listRecord = null;
+        }
+        finally {
             this.showLoader = false;
-            return;
+            this.cdr.detectChanges();
         }
-        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);
+    // ==========================================
+    // Grid Event Handlers
+    // ==========================================
+    onRowClicked(_event) {
+        // Selection is handled by the grid
     }
-    GetColumnTitle(col) {
-        if (col.DisplayName) {
-            // use view's display name first if it exists
-            return col.DisplayName;
-        }
-        else if (col.EntityField && col.EntityField.DisplayName) {
-            // then use entity display name, if that exist
-            return col.EntityField.DisplayName;
-        }
-        else {
-            // otherwise just use the column name
-            return col.Name || '';
-        }
+    onRowDoubleClicked(_event) {
+        // Navigation is handled by mj-list-detail-grid
     }
-    getEditor(ef) {
-        if (!ef) {
-            return "text";
-        }
-        switch (ef.TSType) {
-            case EntityFieldTSType.Boolean:
-                return "boolean";
-            case EntityFieldTSType.Date:
-                return "date";
-            case EntityFieldTSType.Number:
-                return "numeric";
-            default:
-                return "text";
-        }
+    onSelectionChange(keys) {
+        this.selectedKeys = keys;
+    }
+    onDataLoaded(event) {
+        this.rowCount = event.totalCount;
     }
-    GetColumnCellStyle(col) {
-        if (!col || !col.EntityField) {
-            return { 'text-align': 'left', 'vertical-align': 'top' };
+    refreshGrid() {
+        if (this.listDetailGrid) {
+            this.listDetailGrid.refresh();
         }
-        const fieldType = col.EntityField.Type.trim().toLowerCase();
-        switch (fieldType) {
-            case "money":
-            case 'decimal':
-            case 'real':
-            case 'float':
-            case 'int':
-                // right align numbers,
-                return { 'text-align': 'right', 'vertical-align': 'top' };
-            default:
-                // left align everything else
-                return { 'text-align': 'left', 'vertical-align': 'top' };
+    }
+    // ==========================================
+    // Toolbar Actions
+    // ==========================================
+    onRefreshClick() {
+        this.refreshGrid();
+    }
+    onExportClick() {
+        // Trigger export on the underlying grid
+        if (this.listDetailGrid) {
+            this.listDetailGrid.export();
         }
     }
-    async toggleAddFromViewDialog(show) {
-        this.showAddDialog = show;
-        if (show && !this.userViews) {
-            await this.loadEntityViews();
+    onDropdownItemClick(item) {
+        if (item.Action) {
+            item.Action();
         }
     }
-    async loadEntityViews() {
-        this.showAddLoader = true;
-        if (!this.listRecord || !this.listRecord.Entity) {
+    // ==========================================
+    // Remove from List Dialog
+    // ==========================================
+    openRemoveDialog() {
+        if (this.selectedKeys.length === 0) {
+            this.sharedService.CreateSimpleNotification("Please select records to remove", 'warning', 2500);
             return;
         }
-        const rv = new RunView();
+        this.showRemoveDialog = true;
+    }
+    closeRemoveDialog() {
+        this.showRemoveDialog = false;
+        this.isRemoving = false;
+        this.removeProgress = 0;
+        this.removeTotal = 0;
+    }
+    async confirmRemoveFromList() {
+        if (!this.listRecord || this.selectedKeys.length === 0)
+            return;
+        this.isRemoving = true;
+        this.removeTotal = this.selectedKeys.length;
+        this.removeProgress = 0;
         const md = new Metadata();
-        const runViewResult = await rv.RunView({
-            EntityName: "User Views",
-            ExtraFilter: `UserID = '${md.CurrentUser.ID}' AND EntityID = '${this.listRecord.EntityID}'`,
+        const rv = new RunView();
+        const entityInfo = md.EntityByID(this.listRecord.EntityID);
+        // selectedKeys from grid are in concatenated format (ID|value)
+        // For single PK entities, RecordID in DB is just the raw value
+        // For composite PK entities, RecordID in DB is the concatenated format
+        // Extract the appropriate format for the query
+        const selectedRecordIds = this.selectedKeys.map(key => {
+            if (entityInfo && entityInfo.PrimaryKeys.length === 1) {
+                // Single PK: extract just the value from concatenated format
+                const compositeKey = new CompositeKey();
+                compositeKey.LoadFromConcatenatedString(key);
+                return compositeKey.KeyValuePairs[0]?.Value || key;
+            }
+            else {
+                // Composite PK: use full concatenated format as-is
+                return key;
+            }
+        });
+        const listDetailsFilter = `ListID = '${this.listRecord.ID}' AND RecordID IN (${selectedRecordIds.map(id => `'${id}'`).join(',')})`;
+        const listDetailsResult = await rv.RunView({
+            EntityName: 'List Details',
+            ExtraFilter: listDetailsFilter,
             ResultType: 'entity_object'
         }, md.CurrentUser);
-        if (!runViewResult.Success) {
-            this.showAddLoader = false;
-            LogError(`Error loading ${this.listRecord.Entity} User View records for user ${md.CurrentUser.ID}`);
+        if (!listDetailsResult.Success) {
+            LogError("Error loading list details for removal", undefined, listDetailsResult.ErrorMessage);
+            this.sharedService.CreateSimpleNotification("Failed to remove records", 'error', 2500);
+            this.isRemoving = false;
             return;
         }
-        this.userViews = runViewResult.Results;
-        this.showAddLoader = false;
-    }
-    async addTolist() {
-        if (!this.listRecord) {
-            return;
+        // Use transaction group for bulk delete
+        const tg = await md.CreateTransactionGroup();
+        const listDetails = listDetailsResult.Results;
+        for (const listDetail of listDetails) {
+            listDetail.TransactionGroup = tg;
+            await listDetail.Delete();
         }
-        if (!this.listRecord.Entity) {
-            return;
+        const success = await tg.Submit();
+        if (success) {
+            this.removeProgress = this.removeTotal;
+            this.sharedService.CreateSimpleNotification(`Removed ${listDetails.length} record${listDetails.length !== 1 ? 's' : ''} from list`, 'success', 2500);
+            this.closeRemoveDialog();
+            this.listDetailGrid?.clearSelection();
+            this.refreshGrid();
         }
-        this.showAddLoader = true;
-        this.fetchingRecordsToSave = true;
-        const rv = new RunView();
-        const md = new Metadata();
-        const hashMap = new Map();
-        await Promise.all(this.userViewsToAdd.map(async (userView) => {
-            const runViewResult = await 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.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
-        const recordIDs = [...hashMap.keys()];
-        const chunkSize = 100;
-        for (let i = 0; i < recordIDs.length; i += chunkSize) {
-            const chunk = recordIDs.slice(i, i + chunkSize);
-            await Promise.all(chunk.map(async (recordID) => {
-                const listDetail = await md.GetEntityObject("List Details");
-                listDetail.ListID = this.listRecord.ID;
-                listDetail.RecordID = recordID.toString();
-                listDetail.ContextCurrentUser = md.CurrentUser;
-                const saveResult = await listDetail.Save();
-                if (!saveResult) {
-                    LogError(`Error adding record ${recordID} to list ${this.listRecord.ID}`, undefined, listDetail.LatestResult);
-                }
-                this.recordsSaved++;
-            }));
+        else {
+            LogError("Error removing records from list");
+            this.sharedService.CreateSimpleNotification("Failed to remove some records", 'error', 2500);
+            this.isRemoving = false;
         }
-        this.showAddLoader = false;
-        this.toggleAddFromViewDialog(false);
-        this.loadList(this.listRecord.ID);
     }
-    onListSearchValueChange(Value) {
-        this.filter = Value;
-        this.filterItemsSubject.next(true);
+    // ==========================================
+    // Add Records Dialog
+    // ==========================================
+    async openAddRecordsDialog() {
+        this.showAddRecordsDialog = true;
+        this.addableRecords = [];
+        this.addRecordsSearchFilter = "";
+        this.addDialogLoading = true;
+        this.addDialogSaving = false;
+        // Load existing list detail IDs to mark which records are already in the list
+        await this.loadExistingListDetailIds();
+        this.addDialogLoading = false;
     }
-    onListRecordDialogValueChange(Value) {
-        this.searchFilter = Value;
-        this.filterListrecordsSubject.next(true);
+    closeAddRecordsDialog() {
+        this.showAddRecordsDialog = false;
+        this.addableRecords = [];
+        this.addRecordsSearchFilter = "";
+        this.existingListDetailIds.clear();
+        this.addDialogSaving = false;
+        this.addProgress = 0;
+        this.addTotal = 0;
     }
-    filterItems(filter) {
-        if (!filter || filter === "") {
-            this.filteredGridData = this.sourceGridData;
+    async loadExistingListDetailIds() {
+        if (!this.listRecord)
             return;
+        const md = new Metadata();
+        const rv = new RunView();
+        const result = await rv.RunView({
+            EntityName: 'List Details',
+            ExtraFilter: `ListID = '${this.listRecord.ID}'`,
+            Fields: ['RecordID'],
+            ResultType: 'simple'
+        }, md.CurrentUser);
+        if (result.Success) {
+            this.existingListDetailIds = new Set(result.Results.map(r => r.RecordID));
         }
-        if (!this.listRecord) {
+    }
+    onAddRecordsSearchChange(value) {
+        this.addRecordsSearchFilter = value;
+        this.searchSubject.next(value);
+    }
+    async searchRecords(searchText) {
+        if (!this.listRecord || !searchText || searchText.length < 2) {
+            this.addableRecords = [];
             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");
+        this.addDialogLoading = true;
+        const md = new Metadata();
+        const sourceEntityInfo = md.EntityByID(this.listRecord.EntityID);
+        if (!sourceEntityInfo) {
+            this.addDialogLoading = false;
             return;
         }
-        this.filteredGridData = this.sourceGridData.filter((data) => {
-            const name = data[nameField.Name];
-            return name.toLowerCase().includes(toLower);
+        const nameField = sourceEntityInfo.Fields.find(field => field.IsNameField);
+        const pkField = sourceEntityInfo.FirstPrimaryKey?.Name || 'ID';
+        let filter;
+        if (nameField) {
+            filter = `${nameField.Name} LIKE '%${searchText}%'`;
+        }
+        const rv = new RunView();
+        const result = await rv.RunView({
+            EntityName: this.listRecord.Entity,
+            ExtraFilter: filter,
+            MaxRows: 100,
+            ResultType: 'simple'
         });
+        if (result.Success) {
+            this.addableRecords = result.Results.map((record) => {
+                const recordId = String(record[pkField]);
+                return {
+                    ID: recordId,
+                    Name: nameField ? String(record[nameField.Name]) : recordId,
+                    isInList: this.existingListDetailIds.has(recordId),
+                    isSelected: false
+                };
+            });
+        }
+        this.addDialogLoading = false;
+        this.cdr.detectChanges();
     }
-    addViewToSelectedList(view) {
-        this.userViewsToAdd.push(view);
+    toggleRecordSelection(record) {
+        if (record.isInList)
+            return; // Can't select records already in list
+        record.isSelected = !record.isSelected;
     }
-    removeViewFromSelectedList(view) {
-        this.userViewsToAdd.filter((userView) => userView.ID !== view.ID);
+    get selectedAddableRecords() {
+        return this.addableRecords.filter(r => r.isSelected);
     }
-    onDropdownItemClick(item) {
-        if (!item.Action) {
+    selectAllAddable() {
+        this.addableRecords.forEach(r => {
+            if (!r.isInList)
+                r.isSelected = true;
+        });
+    }
+    deselectAllAddable() {
+        this.addableRecords.forEach(r => r.isSelected = false);
+    }
+    async confirmAddRecords() {
+        const recordsToAdd = this.selectedAddableRecords;
+        if (recordsToAdd.length === 0 || !this.listRecord)
             return;
+        this.addDialogSaving = true;
+        // Reserve 20% of progress for tg.Submit()
+        this.addTotal = recordsToAdd.length;
+        this.addProgress = 0;
+        const progressPerRecord = 0.8 / recordsToAdd.length; // 80% for individual saves
+        const md = new Metadata();
+        // Use transaction group for bulk insert
+        const tg = await md.CreateTransactionGroup();
+        for (let i = 0; i < recordsToAdd.length; i++) {
+            const record = recordsToAdd[i];
+            const listDetail = await md.GetEntityObject("List Details", md.CurrentUser);
+            listDetail.ListID = this.listRecord.ID;
+            listDetail.RecordID = record.ID;
+            listDetail.TransactionGroup = tg;
+            const result = await listDetail.Save();
+            if (!result) {
+                LogErrorEx({
+                    message: listDetail.LatestResult?.CompleteMessage
+                });
+            }
+            // Update progress (0-80%)
+            this.addProgress = Math.round((i + 1) * progressPerRecord * this.addTotal);
+        }
+        // Show 80% complete before submit
+        this.addProgress = Math.round(this.addTotal * 0.8);
+        const success = await tg.Submit();
+        if (success) {
+            this.addProgress = this.addTotal;
+            this.sharedService.CreateSimpleNotification(`Added ${recordsToAdd.length} record${recordsToAdd.length !== 1 ? 's' : ''} to list`, 'success', 2500);
+            this.closeAddRecordsDialog();
+            this.refreshGrid();
+        }
+        else {
+            LogError("Error adding records to list");
+            this.sharedService.CreateSimpleNotification("Failed to add some records", 'error', 2500);
+            this.addDialogSaving = false;
         }
-        item.Action();
     }
-    async toggleAddRecordsDialog(show) {
-        this.showAddSingleRecordsDialog = show;
-        if (show) {
-            this.listRecords = [];
-            this.searchFilter = "";
-            await this.loadListRecords();
+    // ==========================================
+    // Add From View Dialog (existing functionality, cleaned up)
+    // ==========================================
+    async openAddFromViewDialog() {
+        this.showAddFromViewDialog = true;
+        this.userViewsToAdd = [];
+        if (!this.userViews) {
+            await this.loadEntityViews();
         }
     }
-    async loadListRecords() {
-        if (!this.listRecord) {
-            LogError("Error loading list records. List record is null");
+    closeAddFromViewDialog() {
+        this.showAddFromViewDialog = false;
+        this.userViewsToAdd = [];
+        this.showAddFromViewLoader = false;
+        this.addFromViewProgress = 0;
+        this.addFromViewTotal = 0;
+    }
+    async loadEntityViews() {
+        if (!this.listRecord || !this.listRecord.Entity)
             return;
+        this.showAddFromViewLoader = true;
+        const rv = new RunView();
+        const md = new Metadata();
+        const runViewResult = await rv.RunView({
+            EntityName: "User Views",
+            ExtraFilter: `UserID = '${md.CurrentUser.ID}' AND EntityID = '${this.listRecord.EntityID}'`,
+            ResultType: 'entity_object'
+        }, md.CurrentUser);
+        if (!runViewResult.Success) {
+            LogError(`Error loading User Views for entity ${this.listRecord.Entity}`);
         }
-        if (!this.sourceEntityInfo) {
-            LogError("Error loading list records. Source entity info is null");
-            return;
+        else {
+            this.userViews = runViewResult.Results;
         }
-        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}%'`;
+        this.showAddFromViewLoader = false;
+    }
+    toggleViewSelection(view) {
+        const index = this.userViewsToAdd.findIndex(v => v.ID === view.ID);
+        if (index >= 0) {
+            this.userViewsToAdd.splice(index, 1);
         }
-        const rv = new RunView();
-        const rvResult = await 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;
+        else {
+            this.userViewsToAdd.push(view);
         }
-        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;
     }
-    async addListRecord(listRecord) {
-        if (!this.listRecord) {
-            LogError("Error adding list record. List record is null");
-            this.sharedService.CreateSimpleNotification("Unable to add record to list");
+    isViewSelected(view) {
+        return this.userViewsToAdd.some(v => v.ID === view.ID);
+    }
+    async confirmAddFromView() {
+        if (!this.listRecord || this.userViewsToAdd.length === 0)
             return;
-        }
+        this.showAddFromViewLoader = true;
+        this.fetchingRecordsToSave = true;
+        const rv = new RunView();
         const md = new Metadata();
-        const listEntity = await md.GetEntityObject("List Details", md.CurrentUser);
-        listEntity.ListID = this.listRecord.ID;
-        listEntity.RecordID = listRecord.ID;
-        const saveResult = await listEntity.Save();
-        if (!saveResult) {
-            LogError(`Error adding record ${listRecord.ID} to list ${this.listRecord.ID}`, undefined, listEntity.LatestResult);
-            const alreadyExists = listEntity.LatestResult.CompleteMessage.includes("already exists in List");
-            if (alreadyExists) {
-                this.sharedService.CreateSimpleNotification("Record already exists in this list", 'error', 2500);
-                return;
+        // Collect all unique record IDs from selected views
+        const recordIdSet = new Set();
+        for (const userView of this.userViewsToAdd) {
+            const runViewResult = await rv.RunView({
+                EntityName: "User Views",
+                ViewEntity: userView,
+                Fields: ["ID"]
+            }, md.CurrentUser);
+            if (runViewResult.Success) {
+                const records = runViewResult.Results;
+                records.forEach(r => recordIdSet.add(r.ID));
             }
-            this.sharedService.CreateSimpleNotification("Unable to add record to list", 'error', 2500);
+        }
+        // Filter out records already in the list
+        await this.loadExistingListDetailIds();
+        const recordsToAdd = [...recordIdSet].filter(id => !this.existingListDetailIds.has(id));
+        this.addFromViewTotal = recordsToAdd.length;
+        this.addFromViewProgress = 0;
+        this.fetchingRecordsToSave = false;
+        const progressPerRecord = 0.8 / Math.max(recordsToAdd.length, 1); // 80% for individual saves
+        if (recordsToAdd.length === 0) {
+            this.sharedService.CreateSimpleNotification("All records already in list", 'info', 2500);
+            this.showAddFromViewLoader = false;
             return;
         }
-        this.sharedService.CreateSimpleNotification("Unable to add record to list", 'success', 2500);
+        LogStatus(`Adding ${recordsToAdd.length} records to list`);
+        // Use transaction group for bulk insert
+        const tg = await md.CreateTransactionGroup();
+        for (let i = 0; i < recordsToAdd.length; i++) {
+            const recordID = recordsToAdd[i];
+            const listDetail = await md.GetEntityObject("List Details", md.CurrentUser);
+            listDetail.ListID = this.listRecord.ID;
+            listDetail.RecordID = recordID;
+            listDetail.TransactionGroup = tg;
+            const result = await listDetail.Save();
+            if (!result) {
+                LogErrorEx({
+                    message: listDetail.LatestResult?.CompleteMessage
+                });
+            }
+            // Update progress (0-80%)
+            this.addFromViewProgress = Math.round((i + 1) * progressPerRecord * this.addFromViewTotal);
+        }
+        // Show 80% complete before submit
+        this.addFromViewProgress = Math.round(this.addFromViewTotal * 0.8);
+        const success = await tg.Submit();
+        if (success) {
+            this.addFromViewProgress = this.addFromViewTotal;
+            this.sharedService.CreateSimpleNotification(`Added ${recordsToAdd.length} record${recordsToAdd.length !== 1 ? 's' : ''} to list`, 'success', 2500);
+            this.closeAddFromViewDialog();
+            this.refreshGrid();
+        }
+        else {
+            LogError("Error adding records from view to list");
+            this.sharedService.CreateSimpleNotification("Failed to add some records", 'error', 2500);
+            this.showAddFromViewLoader = false;
+        }
     }
-    static ɵfac = function SingleListDetailComponent_Factory(t) { return new (t || SingleListDetailComponent)(i0.ɵɵdirectiveInject(i1.Router), i0.ɵɵdirectiveInject(i1.ActivatedRoute), i0.ɵɵdirectiveInject(i2.SharedService)); };
-    static ɵ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"], ["size", "medium", 3, "showText"], [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"], ["size", "small", 3, "showText"], [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();
+    static ɵfac = function SingleListDetailComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SingleListDetailComponent)(i0.ɵɵdirectiveInject(i1.SharedService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SingleListDetailComponent, selectors: [["mj-list-detail"]], viewQuery: function SingleListDetailComponent_Query(rf, ctx) { if (rf & 1) {
+            i0.ɵɵviewQuery(_c0, 5);
+        } if (rf & 2) {
+            let _t;
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.listDetailGrid = _t.first);
+        } }, inputs: { ListID: "ListID" }, decls: 13, vars: 8, consts: [["listDetailGrid", ""], [1, "list-detail-container"], [1, "list-header"], ["textField", "Text", "themeColor", "info", 1, "add-btn", 3, "itemClick", "data"], [1, "fa-solid", "fa-plus"], [1, "custom-toolbar"], [1, "loading-container"], [1, "grid-container"], ["title", "Remove from List", 3, "minWidth", "width", "close", 4, "ngIf"], [3, "title", "minWidth", "width", "height", "close", 4, "ngIf"], ["title", "Add Records from Views", 3, "minWidth", "width", "height", "close", 4, "ngIf"], [1, "toolbar-left"], [1, "row-count"], [1, "selection-count"], [1, "toolbar-right"], ["kendoButton", "", "fillMode", "flat", "themeColor", "error", 1, "toolbar-button", "remove-btn"], ["kendoButton", "", "fillMode", "flat", 1, "toolbar-button", 3, "click"], [1, "fa-solid", "fa-rotate"], [1, "fa-solid", "fa-file-export"], ["kendoButton", "", "fillMode", "flat", "themeColor", "error", 1, "toolbar-button", "remove-btn", 3, "click"], [1, "fa-solid", "fa-trash"], ["text", "Loading list...", "size", "medium"], [3, "rowClicked", "rowDoubleClicked", "selectionChange", "dataLoaded", "listId", "listEntity", "autoNavigate", "height", "showToolbar", "toolbarConfig", "selectionMode"], ["title", "Remove from List", 3, "close", "minWidth", "width"], [1, "dialog-content"], [1, "dialog-loading"], [1, "dialog-message"], ["kendoButton", "", "themeColor", "error", 3, "click", "disabled"], ["kendoButton", "", "fillMode", "outline", 3, "click", "disabled"], ["text", "Removing records...", "size", "small"], [1, "progress-bar", 3, "min", "max", "value", "label"], [1, "fa-solid", "fa-triangle-exclamation", "warning-icon"], [1, "dialog-note"], [3, "close", "title", "minWidth", "width", "height"], [1, "dialog-content", "add-records-dialog"], ["kendoButton", "", "themeColor", "info", 3, "click", "disabled"], ["text", "Adding records to list...", "size", "small"], [1, "search-section"], [1, "search-input", 3, "valueChange", "placeholder", "clearButton", "value"], ["kendoTextBoxPrefixTemplate", ""], [1, "search-hint"], [1, "records-list"], [1, "list-loading"], [1, "empty-results"], [1, "fa-solid", "fa-search", "search-icon"], ["size", "small", 3, "showText"], [1, "fa-solid", "fa-search", "empty-icon"], [1, "fa-solid", "fa-list", "empty-icon"], [1, "selection-controls"], ["kendoButton", "", "fillMode", "flat", "size", "small", 3, "click"], [1, "selection-info"], [1, "records-scroll"], [1, "record-item", 3, "in-list", "selected"], [1, "record-item", 3, "click"], [1, "record-checkbox"], ["title", "Already in list", 1, "fa-solid", "fa-check", "in-list-icon"], ["type", "checkbox", 3, "checked"], [1, "record-name"], [1, "in-list-badge"], ["type", "checkbox", 3, "click", "change", "checked"], ["title", "Add Records from Views", 3, "close", "minWidth", "width", "height"], ["text", "Loading records from views...", "size", "small"], ["text", "Loading views...", "size", "small"], [1, "dialog-instruction"], [1, "views-list"], [1, "fa-solid", "fa-folder-open", "empty-icon"], [1, "view-item", 3, "selected"], [1, "view-item", 3, "click"], [1, "fa-solid", "fa-table-list", "view-icon"], [1, "view-name"]], template: function SingleListDetailComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 1)(1, "div", 2)(2, "h1");
             i0.ɵɵtext(3);
             i0.ɵɵelementEnd();
             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.ɵɵlistener("itemClick", function SingleListDetailComponent_Template_kendo_dropdownbutton_itemClick_4_listener($event) { return ctx.onDropdownItemClick($event); });
             i0.ɵɵelement(5, "span", 4);
             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.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, 1, "mj-loading", 9)(14, SingleListDetailComponent_Conditional_14_Template, 3, 3, "kendo-grid", 10);
+            i0.ɵɵtemplate(7, SingleListDetailComponent_Conditional_7_Template, 13, 4, "div", 5)(8, SingleListDetailComponent_Conditional_8_Template, 2, 0, "div", 6)(9, SingleListDetailComponent_Conditional_9_Template, 3, 7, "div", 7);
             i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(15, SingleListDetailComponent_kendo_dialog_15_Template, 8, 6, "kendo-dialog", 11)(16, SingleListDetailComponent_kendo_dialog_16_Template, 6, 6, "kendo-dialog", 12);
+            i0.ɵɵtemplate(10, SingleListDetailComponent_kendo_dialog_10_Template, 9, 5, "kendo-dialog", 8)(11, SingleListDetailComponent_kendo_dialog_11_Template, 9, 9, "kendo-dialog", 9)(12, SingleListDetailComponent_kendo_dialog_12_Template, 11, 8, "kendo-dialog", 10);
         } if (rf & 2) {
             i0.ɵɵadvance(3);
             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);
+            i0.ɵɵadvance(3);
+            i0.ɵɵconditional(!ctx.showLoader && ctx.listRecord ? 7 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.showLoader ? 8 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(!ctx.showLoader && ctx.listRecord ? 9 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", ctx.showRemoveDialog);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.showLoader ? 13 : 14);
-            i0.ɵɵadvance(2);
-            i0.ɵɵproperty("ngIf", ctx.showAddDialog);
+            i0.ɵɵproperty("ngIf", ctx.showAddRecordsDialog);
             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.ButtonComponent, i6.DropDownButtonComponent, i7.TextBoxComponent, i7.TextBoxPrefixTemplateDirective, i8.ProgressBarComponent, i9.LoadingComponent, 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}"] });
+            i0.ɵɵproperty("ngIf", ctx.showAddFromViewDialog);
+        } }, dependencies: [i2.NgIf, i3.DialogComponent, i3.DialogActionsComponent, i4.ButtonComponent, i4.DropDownButtonComponent, i5.TextBoxComponent, i5.TextBoxPrefixTemplateDirective, i6.ProgressBarComponent, i7.LoadingComponent, i8.ListDetailGridComponent], styles: [".list-detail-container[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  padding: 20px;\n  background: #fafafa;\n}\n\n.list-header[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding-bottom: 16px;\n  flex-shrink: 0;\n}\n\n.list-header[_ngcontent-%COMP%]   h1[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 24px;\n  font-weight: 600;\n  color: #333;\n}\n\n\n\n.custom-toolbar[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 12px 16px;\n  background: white;\n  border: 1px solid #e0e0e0;\n  border-bottom: none;\n  border-radius: 8px 8px 0 0;\n  flex-shrink: 0;\n}\n\n.toolbar-left[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n.toolbar-right[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.row-count[_ngcontent-%COMP%] {\n  font-size: 14px;\n  font-weight: 500;\n  color: #333;\n}\n\n.selection-count[_ngcontent-%COMP%] {\n  font-size: 14px;\n  color: #666;\n}\n\n.toolbar-button[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 13px;\n}\n\n.toolbar-button[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n  font-size: 14px;\n}\n\n.remove-btn[_ngcontent-%COMP%] {\n  color: #d32f2f;\n}\n\n.loading-container[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex: 1;\n  min-height: 200px;\n}\n\n.grid-container[_ngcontent-%COMP%] {\n  flex: 1;\n  min-height: 0;\n  background: white;\n  border: 1px solid #e0e0e0;\n  border-radius: 0 0 8px 8px;\n  overflow: hidden;\n}\n\n\n\n.add-btn[_ngcontent-%COMP%] {\n  padding: 10px 30px;\n  border-radius: 10px;\n  color: white;\n  background-color: var(--border-blue, #0078d4);\n  font-size: initial;\n  cursor: pointer;\n}\n\n.add-btn[_ngcontent-%COMP%]:hover {\n  filter: brightness(85%);\n}\n\n  .k-dropdown-button .k-button {\n  background: var(--border-blue, #0078d4) !important;\n  color: white !important;\n  font-size: 16px;\n  border: none;\n  padding: 8px 25px;\n  border-radius: 10px;\n}\n\n  .k-dropdown-button .k-button:hover {\n  background: var(--border-blue, #0078d4) !important;\n  filter: brightness(85%);\n}\n\n  .k-dropdown-button .k-button .k-button-text {\n  color: white !important;\n}\n\n  .k-dropdown-button .k-button .fa-plus {\n  color: white !important;\n}\n\n\n\n\n\n\n.dialog-content[_ngcontent-%COMP%] {\n  padding: 8px 0;\n}\n\n.dialog-loading[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 40px 20px;\n  gap: 20px;\n}\n\n.dialog-message[_ngcontent-%COMP%] {\n  text-align: center;\n  padding: 20px;\n}\n\n.warning-icon[_ngcontent-%COMP%] {\n  font-size: 48px;\n  color: #f57c00;\n  margin-bottom: 16px;\n  display: block;\n}\n\n.dialog-message[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 8px 0;\n  font-size: 15px;\n  color: #333;\n}\n\n.dialog-note[_ngcontent-%COMP%] {\n  color: #666 !important;\n  font-size: 13px !important;\n}\n\n.progress-bar[_ngcontent-%COMP%] {\n  width: 100%;\n  max-width: 300px;\n}\n\n\n\n\n\n\n.add-records-dialog[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}\n\n.search-section[_ngcontent-%COMP%] {\n  padding-bottom: 12px;\n  border-bottom: 1px solid #eee;\n  margin-bottom: 12px;\n}\n\n.search-input[_ngcontent-%COMP%] {\n  width: 100%;\n}\n\n.search-icon[_ngcontent-%COMP%] {\n  color: #999;\n  padding-left: 8px;\n}\n\n.search-hint[_ngcontent-%COMP%] {\n  display: block;\n  font-size: 12px;\n  color: #999;\n  margin-top: 6px;\n}\n\n.records-list[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n}\n\n.list-loading[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: center;\n  padding: 40px;\n}\n\n.empty-results[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 40px;\n  color: #999;\n}\n\n.empty-icon[_ngcontent-%COMP%] {\n  font-size: 32px;\n  margin-bottom: 12px;\n  color: #ccc;\n}\n\n.empty-results[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 14px;\n}\n\n.selection-controls[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 0;\n  border-bottom: 1px solid #eee;\n  margin-bottom: 8px;\n}\n\n.selection-info[_ngcontent-%COMP%] {\n  margin-left: auto;\n  font-size: 13px;\n  color: #666;\n}\n\n.records-scroll[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  max-height: 280px;\n}\n\n.record-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  padding: 10px 12px;\n  border-radius: 6px;\n  cursor: pointer;\n  transition: background-color 0.15s;\n  gap: 12px;\n}\n\n.record-item[_ngcontent-%COMP%]:hover:not(.in-list) {\n  background: #f5f5f5;\n}\n\n.record-item.selected[_ngcontent-%COMP%] {\n  background: #e3f2fd;\n}\n\n.record-item.in-list[_ngcontent-%COMP%] {\n  background: #f9f9f9;\n  cursor: default;\n  opacity: 0.7;\n}\n\n.record-checkbox[_ngcontent-%COMP%] {\n  width: 20px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.record-checkbox[_ngcontent-%COMP%]   input[type=\"checkbox\"][_ngcontent-%COMP%] {\n  width: 16px;\n  height: 16px;\n  cursor: pointer;\n}\n\n.in-list-icon[_ngcontent-%COMP%] {\n  color: #4caf50;\n  font-size: 14px;\n}\n\n.record-name[_ngcontent-%COMP%] {\n  flex: 1;\n  font-size: 14px;\n  color: #333;\n}\n\n.in-list-badge[_ngcontent-%COMP%] {\n  font-size: 11px;\n  padding: 2px 8px;\n  background: #e8f5e9;\n  color: #2e7d32;\n  border-radius: 10px;\n  font-weight: 500;\n}\n\n\n\n\n\n\n.dialog-instruction[_ngcontent-%COMP%] {\n  margin: 0 0 16px 0;\n  font-size: 14px;\n  color: #666;\n}\n\n.views-list[_ngcontent-%COMP%] {\n  max-height: 320px;\n  overflow-y: auto;\n}\n\n.view-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  padding: 12px;\n  border-radius: 6px;\n  cursor: pointer;\n  transition: background-color 0.15s;\n  gap: 12px;\n}\n\n.view-item[_ngcontent-%COMP%]:hover {\n  background: #f5f5f5;\n}\n\n.view-item.selected[_ngcontent-%COMP%] {\n  background: #e3f2fd;\n}\n\n.view-item[_ngcontent-%COMP%]   input[type=\"checkbox\"][_ngcontent-%COMP%] {\n  width: 16px;\n  height: 16px;\n  cursor: pointer;\n}\n\n.view-icon[_ngcontent-%COMP%] {\n  color: #666;\n  font-size: 16px;\n}\n\n.view-name[_ngcontent-%COMP%] {\n  flex: 1;\n  font-size: 14px;\n  color: #333;\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>{{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        <mj-loading [showText]=\"false\" size=\"medium\"></mj-loading>\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    <mj-loading [showText]=\"false\" size=\"small\"></mj-loading>\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    <mj-loading [showText]=\"false\" size=\"small\"></mj-loading>\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        <mj-loading [showText]=\"false\" size=\"small\"></mj-loading>\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}"] }]
-    }], () => [{ type: i1.Router }, { type: i1.ActivatedRoute }, { type: i2.SharedService }], { ListID: [{
+        args: [{ selector: 'mj-list-detail', template: "<div class=\"list-detail-container\">\n  <!-- Header with title and Add button -->\n  <div class=\"list-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\n  <!-- Custom Toolbar -->\n  @if (!showLoader && listRecord) {\n    <div class=\"custom-toolbar\">\n      <div class=\"toolbar-left\">\n        <span class=\"row-count\">{{ rowCount }} row{{ rowCount !== 1 ? 's' : '' }}</span>\n        @if (selectedKeys.length > 0) {\n          <span class=\"selection-count\">({{ selectedKeys.length }} selected)</span>\n        }\n      </div>\n      <div class=\"toolbar-right\">\n        @if (selectedKeys.length > 0) {\n          <button kendoButton\n                  (click)=\"openRemoveDialog()\"\n                  fillMode=\"flat\"\n                  themeColor=\"error\"\n                  class=\"toolbar-button remove-btn\">\n            <span class=\"fa-solid fa-trash\"></span>\n            Remove from List\n          </button>\n        }\n        <button kendoButton\n                (click)=\"onRefreshClick()\"\n                fillMode=\"flat\"\n                class=\"toolbar-button\">\n          <span class=\"fa-solid fa-rotate\"></span>\n          Refresh\n        </button>\n        <button kendoButton\n                (click)=\"onExportClick()\"\n                fillMode=\"flat\"\n                class=\"toolbar-button\">\n          <span class=\"fa-solid fa-file-export\"></span>\n          Export\n        </button>\n      </div>\n    </div>\n  }\n\n  <!-- Loading State -->\n  @if (showLoader) {\n    <div class=\"loading-container\">\n      <mj-loading text=\"Loading list...\" size=\"medium\"></mj-loading>\n    </div>\n  }\n\n  <!-- Grid -->\n  @if (!showLoader && listRecord) {\n    <div class=\"grid-container\">\n      <mj-list-detail-grid\n        #listDetailGrid\n        [listId]=\"ListID\"\n        [listEntity]=\"listRecord\"\n        [autoNavigate]=\"true\"\n        [height]=\"'auto'\"\n        [showToolbar]=\"false\"\n        [toolbarConfig]=\"gridToolbarConfig\"\n        [selectionMode]=\"'checkbox'\"\n        (rowClicked)=\"onRowClicked($event)\"\n        (rowDoubleClicked)=\"onRowDoubleClicked($event)\"\n        (selectionChange)=\"onSelectionChange($event)\"\n        (dataLoaded)=\"onDataLoaded($event)\">\n      </mj-list-detail-grid>\n    </div>\n  }\n</div>\n\n<!-- Remove from List Confirmation Dialog -->\n<kendo-dialog\n  *ngIf=\"showRemoveDialog\"\n  title=\"Remove from List\"\n  (close)=\"closeRemoveDialog()\"\n  [minWidth]=\"350\"\n  [width]=\"450\">\n  <div class=\"dialog-content\">\n    @if (isRemoving) {\n      <div class=\"dialog-loading\">\n        <mj-loading text=\"Removing records...\" size=\"small\"></mj-loading>\n        @if (removeTotal > 0) {\n          <kendo-progressbar\n            [min]=\"0\"\n            [max]=\"removeTotal\"\n            [value]=\"removeProgress\"\n            [label]=\"false\"\n            class=\"progress-bar\">\n          </kendo-progressbar>\n        }\n      </div>\n    } @else {\n      <div class=\"dialog-message\">\n        <span class=\"fa-solid fa-triangle-exclamation warning-icon\"></span>\n        <p>Are you sure you want to remove <strong>{{ selectedKeys.length }}</strong> record{{ selectedKeys.length !== 1 ? 's' : '' }} from this list?</p>\n        <p class=\"dialog-note\">This will not delete the records, only remove them from this list.</p>\n      </div>\n    }\n  </div>\n  <kendo-dialog-actions>\n    <button kendoButton\n            (click)=\"confirmRemoveFromList()\"\n            [disabled]=\"isRemoving\"\n            themeColor=\"error\">\n      Remove\n    </button>\n    <button kendoButton\n            (click)=\"closeRemoveDialog()\"\n            [disabled]=\"isRemoving\"\n            fillMode=\"outline\">\n      Cancel\n    </button>\n  </kendo-dialog-actions>\n</kendo-dialog>\n\n<!-- Add Records Dialog -->\n<kendo-dialog\n  *ngIf=\"showAddRecordsDialog\"\n  [title]=\"'Add ' + (listRecord?.Entity || 'Records') + ' to List'\"\n  (close)=\"closeAddRecordsDialog()\"\n  [minWidth]=\"500\"\n  [width]=\"700\"\n  [height]=\"650\">\n  <div class=\"dialog-content add-records-dialog\">\n    @if (addDialogSaving) {\n      <div class=\"dialog-loading\">\n        <mj-loading text=\"Adding records to list...\" size=\"small\"></mj-loading>\n        @if (addTotal > 0) {\n          <kendo-progressbar\n            [min]=\"0\"\n            [max]=\"addTotal\"\n            [value]=\"addProgress\"\n            [label]=\"false\"\n            class=\"progress-bar\">\n          </kendo-progressbar>\n        }\n      </div>\n    } @else {\n      <!-- Search Input -->\n      <div class=\"search-section\">\n        <kendo-textbox\n          [placeholder]=\"'Search ' + (listRecord?.Entity || 'records') + '...'\"\n          [clearButton]=\"true\"\n          (valueChange)=\"onAddRecordsSearchChange($event)\"\n          [value]=\"addRecordsSearchFilter\"\n          class=\"search-input\">\n          <ng-template kendoTextBoxPrefixTemplate>\n            <span class=\"fa-solid fa-search search-icon\"></span>\n          </ng-template>\n        </kendo-textbox>\n        <span class=\"search-hint\">Type at least 2 characters to search</span>\n      </div>\n\n      <!-- Records List -->\n      <div class=\"records-list\">\n        @if (addDialogLoading) {\n          <div class=\"list-loading\">\n            <mj-loading [showText]=\"false\" size=\"small\"></mj-loading>\n          </div>\n        } @else if (addableRecords.length === 0 && addRecordsSearchFilter.length >= 2) {\n          <div class=\"empty-results\">\n            <span class=\"fa-solid fa-search empty-icon\"></span>\n            <p>No records found matching \"{{ addRecordsSearchFilter }}\"</p>\n          </div>\n        } @else if (addableRecords.length === 0) {\n          <div class=\"empty-results\">\n            <span class=\"fa-solid fa-list empty-icon\"></span>\n            <p>Search for records to add to this list</p>\n          </div>\n        } @else {\n          <!-- Selection controls -->\n          <div class=\"selection-controls\">\n            <button kendoButton fillMode=\"flat\" size=\"small\" (click)=\"selectAllAddable()\">Select All</button>\n            <button kendoButton fillMode=\"flat\" size=\"small\" (click)=\"deselectAllAddable()\">Deselect All</button>\n            <span class=\"selection-info\">{{ selectedAddableRecords.length }} selected</span>\n          </div>\n\n          <!-- Records -->\n          <div class=\"records-scroll\">\n            @for (record of addableRecords; track record.ID) {\n              <div class=\"record-item\"\n                   [class.in-list]=\"record.isInList\"\n                   [class.selected]=\"record.isSelected\"\n                   (click)=\"toggleRecordSelection(record)\">\n                <div class=\"record-checkbox\">\n                  @if (record.isInList) {\n                    <span class=\"fa-solid fa-check in-list-icon\" title=\"Already in list\"></span>\n                  } @else {\n                    <input type=\"checkbox\"\n                           [checked]=\"record.isSelected\"\n                           (click)=\"$event.stopPropagation()\"\n                           (change)=\"toggleRecordSelection(record)\">\n                  }\n                </div>\n                <div class=\"record-name\">{{ record.Name }}</div>\n                @if (record.isInList) {\n                  <span class=\"in-list-badge\">In List</span>\n                }\n              </div>\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n  <kendo-dialog-actions>\n    <button kendoButton\n            (click)=\"confirmAddRecords()\"\n            [disabled]=\"addDialogSaving || selectedAddableRecords.length === 0\"\n            themeColor=\"info\">\n      Add {{ selectedAddableRecords.length > 0 ? selectedAddableRecords.length : '' }} Record{{ selectedAddableRecords.length !== 1 ? 's' : '' }}\n    </button>\n    <button kendoButton\n            (click)=\"closeAddRecordsDialog()\"\n            [disabled]=\"addDialogSaving\"\n            fillMode=\"outline\">\n      Cancel\n    </button>\n  </kendo-dialog-actions>\n</kendo-dialog>\n\n<!-- Add From View Dialog -->\n<kendo-dialog\n  *ngIf=\"showAddFromViewDialog\"\n  title=\"Add Records from Views\"\n  (close)=\"closeAddFromViewDialog()\"\n  [minWidth]=\"400\"\n  [width]=\"600\"\n  [height]=\"500\">\n  <div class=\"dialog-content\">\n    @if (showAddFromViewLoader && fetchingRecordsToSave) {\n      <div class=\"dialog-loading\">\n        <mj-loading text=\"Loading records from views...\" size=\"small\"></mj-loading>\n      </div>\n    } @else if (showAddFromViewLoader && addFromViewTotal > 0) {\n      <div class=\"dialog-loading\">\n        <mj-loading text=\"Adding records to list...\" size=\"small\"></mj-loading>\n        <kendo-progressbar\n          [min]=\"0\"\n          [max]=\"addFromViewTotal\"\n          [value]=\"addFromViewProgress\"\n          [label]=\"false\"\n          class=\"progress-bar\">\n        </kendo-progressbar>\n      </div>\n    } @else if (showAddFromViewLoader) {\n      <div class=\"dialog-loading\">\n        <mj-loading text=\"Loading views...\" size=\"small\"></mj-loading>\n      </div>\n    } @else {\n      <p class=\"dialog-instruction\">Select views to add their records to this list:</p>\n\n      <div class=\"views-list\">\n        @if (!userViews || userViews.length === 0) {\n          <div class=\"empty-results\">\n            <span class=\"fa-solid fa-folder-open empty-icon\"></span>\n            <p>No saved views found for this entity</p>\n          </div>\n        } @else {\n          @for (view of userViews; track view.ID) {\n            <div class=\"view-item\"\n                 [class.selected]=\"isViewSelected(view)\"\n                 (click)=\"toggleViewSelection(view)\">\n              <input type=\"checkbox\"\n                     [checked]=\"isViewSelected(view)\"\n                     (click)=\"$event.stopPropagation()\"\n                     (change)=\"toggleViewSelection(view)\">\n              <span class=\"fa-solid fa-table-list view-icon\"></span>\n              <span class=\"view-name\">{{ view.Name }}</span>\n            </div>\n          }\n        }\n      </div>\n    }\n  </div>\n  <kendo-dialog-actions>\n    <button kendoButton\n            (click)=\"confirmAddFromView()\"\n            [disabled]=\"showAddFromViewLoader || userViewsToAdd.length === 0\"\n            themeColor=\"info\">\n      Add from {{ userViewsToAdd.length }} View{{ userViewsToAdd.length !== 1 ? 's' : '' }}\n    </button>\n    <button kendoButton\n            (click)=\"closeAddFromViewDialog()\"\n            [disabled]=\"showAddFromViewLoader\"\n            fillMode=\"outline\">\n      Cancel\n    </button>\n  </kendo-dialog-actions>\n</kendo-dialog>\n", styles: [".list-detail-container {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  padding: 20px;\n  background: #fafafa;\n}\n\n.list-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding-bottom: 16px;\n  flex-shrink: 0;\n}\n\n.list-header h1 {\n  margin: 0;\n  font-size: 24px;\n  font-weight: 600;\n  color: #333;\n}\n\n/* Custom Toolbar */\n.custom-toolbar {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 12px 16px;\n  background: white;\n  border: 1px solid #e0e0e0;\n  border-bottom: none;\n  border-radius: 8px 8px 0 0;\n  flex-shrink: 0;\n}\n\n.toolbar-left {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n.toolbar-right {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.row-count {\n  font-size: 14px;\n  font-weight: 500;\n  color: #333;\n}\n\n.selection-count {\n  font-size: 14px;\n  color: #666;\n}\n\n.toolbar-button {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 13px;\n}\n\n.toolbar-button span {\n  font-size: 14px;\n}\n\n.remove-btn {\n  color: #d32f2f;\n}\n\n.loading-container {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex: 1;\n  min-height: 200px;\n}\n\n.grid-container {\n  flex: 1;\n  min-height: 0;\n  background: white;\n  border: 1px solid #e0e0e0;\n  border-radius: 0 0 8px 8px;\n  overflow: hidden;\n}\n\n/* Add Button */\n.add-btn {\n  padding: 10px 30px;\n  border-radius: 10px;\n  color: white;\n  background-color: var(--border-blue, #0078d4);\n  font-size: initial;\n  cursor: pointer;\n}\n\n.add-btn:hover {\n  filter: brightness(85%);\n}\n\n::ng-deep .k-dropdown-button .k-button {\n  background: var(--border-blue, #0078d4) !important;\n  color: white !important;\n  font-size: 16px;\n  border: none;\n  padding: 8px 25px;\n  border-radius: 10px;\n}\n\n::ng-deep .k-dropdown-button .k-button:hover {\n  background: var(--border-blue, #0078d4) !important;\n  filter: brightness(85%);\n}\n\n::ng-deep .k-dropdown-button .k-button .k-button-text {\n  color: white !important;\n}\n\n::ng-deep .k-dropdown-button .k-button .fa-plus {\n  color: white !important;\n}\n\n/* ==========================================\n   Dialog Styles\n   ========================================== */\n\n.dialog-content {\n  padding: 8px 0;\n}\n\n.dialog-loading {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 40px 20px;\n  gap: 20px;\n}\n\n.dialog-message {\n  text-align: center;\n  padding: 20px;\n}\n\n.warning-icon {\n  font-size: 48px;\n  color: #f57c00;\n  margin-bottom: 16px;\n  display: block;\n}\n\n.dialog-message p {\n  margin: 8px 0;\n  font-size: 15px;\n  color: #333;\n}\n\n.dialog-note {\n  color: #666 !important;\n  font-size: 13px !important;\n}\n\n.progress-bar {\n  width: 100%;\n  max-width: 300px;\n}\n\n/* ==========================================\n   Add Records Dialog\n   ========================================== */\n\n.add-records-dialog {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}\n\n.search-section {\n  padding-bottom: 12px;\n  border-bottom: 1px solid #eee;\n  margin-bottom: 12px;\n}\n\n.search-input {\n  width: 100%;\n}\n\n.search-icon {\n  color: #999;\n  padding-left: 8px;\n}\n\n.search-hint {\n  display: block;\n  font-size: 12px;\n  color: #999;\n  margin-top: 6px;\n}\n\n.records-list {\n  flex: 1;\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n}\n\n.list-loading {\n  display: flex;\n  justify-content: center;\n  padding: 40px;\n}\n\n.empty-results {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 40px;\n  color: #999;\n}\n\n.empty-icon {\n  font-size: 32px;\n  margin-bottom: 12px;\n  color: #ccc;\n}\n\n.empty-results p {\n  margin: 0;\n  font-size: 14px;\n}\n\n.selection-controls {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 0;\n  border-bottom: 1px solid #eee;\n  margin-bottom: 8px;\n}\n\n.selection-info {\n  margin-left: auto;\n  font-size: 13px;\n  color: #666;\n}\n\n.records-scroll {\n  flex: 1;\n  overflow-y: auto;\n  max-height: 280px;\n}\n\n.record-item {\n  display: flex;\n  align-items: center;\n  padding: 10px 12px;\n  border-radius: 6px;\n  cursor: pointer;\n  transition: background-color 0.15s;\n  gap: 12px;\n}\n\n.record-item:hover:not(.in-list) {\n  background: #f5f5f5;\n}\n\n.record-item.selected {\n  background: #e3f2fd;\n}\n\n.record-item.in-list {\n  background: #f9f9f9;\n  cursor: default;\n  opacity: 0.7;\n}\n\n.record-checkbox {\n  width: 20px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.record-checkbox input[type=\"checkbox\"] {\n  width: 16px;\n  height: 16px;\n  cursor: pointer;\n}\n\n.in-list-icon {\n  color: #4caf50;\n  font-size: 14px;\n}\n\n.record-name {\n  flex: 1;\n  font-size: 14px;\n  color: #333;\n}\n\n.in-list-badge {\n  font-size: 11px;\n  padding: 2px 8px;\n  background: #e8f5e9;\n  color: #2e7d32;\n  border-radius: 10px;\n  font-weight: 500;\n}\n\n/* ==========================================\n   Add From View Dialog\n   ========================================== */\n\n.dialog-instruction {\n  margin: 0 0 16px 0;\n  font-size: 14px;\n  color: #666;\n}\n\n.views-list {\n  max-height: 320px;\n  overflow-y: auto;\n}\n\n.view-item {\n  display: flex;\n  align-items: center;\n  padding: 12px;\n  border-radius: 6px;\n  cursor: pointer;\n  transition: background-color 0.15s;\n  gap: 12px;\n}\n\n.view-item:hover {\n  background: #f5f5f5;\n}\n\n.view-item.selected {\n  background: #e3f2fd;\n}\n\n.view-item input[type=\"checkbox\"] {\n  width: 16px;\n  height: 16px;\n  cursor: pointer;\n}\n\n.view-icon {\n  color: #666;\n  font-size: 16px;\n}\n\n.view-name {\n  flex: 1;\n  font-size: 14px;\n  color: #333;\n}\n"] }]
+    }], () => [{ type: i1.SharedService }, { type: i0.ChangeDetectorRef }], { ListID: [{
             type: Input
+        }], listDetailGrid: [{
+            type: ViewChild,
+            args: ['listDetailGrid']
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SingleListDetailComponent, { className: "SingleListDetailComponent", filePath: "src/lib/single-list-detail/single-list-detail.component.ts", lineNumber: 15 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SingleListDetailComponent, { className: "SingleListDetailComponent" }); })();
 //# sourceMappingURL=single-list-detail.component.js.map