@memberjunction/ng-explorer-core 5.22.0 → 5.24.0

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

@@ -1,96 +1,128 @@
-import { Component, Input, ViewChild } from '@angular/core';
+import { Component, Input, ViewChild, HostListener } from '@angular/core';
 import { CompositeKey, LogError, LogErrorEx, LogStatus, Metadata, RunView } from '@memberjunction/core';
 import { Subject, debounceTime } from 'rxjs';
 import { UUIDsEqual, NormalizeUUID } from '@memberjunction/global';
 import * as i0 from "@angular/core";
 import * as i1 from "@memberjunction/ng-shared";
-import * as i2 from "@progress/kendo-angular-dialog";
-import * as i3 from "@progress/kendo-angular-buttons";
-import * as i4 from "@progress/kendo-angular-inputs";
-import * as i5 from "@progress/kendo-angular-progressbar";
-import * as i6 from "@memberjunction/ng-shared-generic";
-import * as i7 from "@memberjunction/ng-list-detail-grid";
+import * as i2 from "@memberjunction/ng-ui-components";
+import * as i3 from "@memberjunction/ng-shared-generic";
+import * as i4 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);
+const _forTrack0 = ($index, $item) => $item.Text;
+const _forTrack1 = ($index, $item) => $item.ID;
+function SingleListDetailComponent_Conditional_9_For_2_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 17);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
+    const option_r2 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1("(", ctx_r1.selectedKeys.length, " selected)");
+    i0.ɵɵtextInterpolate(option_r2.Description);
 } }
-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);
+function SingleListDetailComponent_Conditional_9_For_2_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 15);
+    i0.ɵɵlistener("click", function SingleListDetailComponent_Conditional_9_For_2_Template_div_click_0_listener() { const option_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onDropdownItemClick(option_r2)); });
+    i0.ɵɵelementStart(1, "span", 16);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(3, SingleListDetailComponent_Conditional_9_For_2_Conditional_3_Template, 2, 1, "span", 17);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const option_r2 = ctx.$implicit;
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(option_r2.Text);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(option_r2.Description ? 3 : -1);
+} }
+function SingleListDetailComponent_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 7);
+    i0.ɵɵrepeaterCreate(1, SingleListDetailComponent_Conditional_9_For_2_Template, 4, 2, "div", 14, _forTrack0);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r2.addOptions);
+} }
+function SingleListDetailComponent_Conditional_10_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 20);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1("(", ctx_r2.selectedKeys.length, " selected)");
+} }
+function SingleListDetailComponent_Conditional_10_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 26);
+    i0.ɵɵlistener("click", function SingleListDetailComponent_Conditional_10_Conditional_6_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r5); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.openRemoveDialog()); });
+    i0.ɵɵelement(1, "span", 27);
     i0.ɵɵtext(2, " Remove from List ");
     i0.ɵɵelementEnd();
 } }
-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);
+function SingleListDetailComponent_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 8)(1, "div", 18)(2, "span", 19);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(4, SingleListDetailComponent_Conditional_7_Conditional_4_Template, 2, 1, "span", 13);
+    i0.ɵɵconditionalCreate(4, SingleListDetailComponent_Conditional_10_Conditional_4_Template, 2, 1, "span", 20);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "div", 14);
-    i0.ɵɵconditionalCreate(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.ɵɵelementStart(5, "div", 21);
+    i0.ɵɵconditionalCreate(6, SingleListDetailComponent_Conditional_10_Conditional_6_Template, 3, 0, "button", 22);
+    i0.ɵɵelementStart(7, "button", 23);
+    i0.ɵɵlistener("click", function SingleListDetailComponent_Conditional_10_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onRefreshClick()); });
+    i0.ɵɵelement(8, "span", 24);
     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.ɵɵelementStart(10, "button", 23);
+    i0.ɵɵlistener("click", function SingleListDetailComponent_Conditional_10_Template_button_click_10_listener() { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onExportClick()); });
+    i0.ɵɵelement(11, "span", 25);
     i0.ɵɵtext(12, " Export ");
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
+    const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate2("", ctx_r1.rowCount, " row", ctx_r1.rowCount !== 1 ? "s" : "");
+    i0.ɵɵtextInterpolate2("", ctx_r2.rowCount, " row", ctx_r2.rowCount !== 1 ? "s" : "");
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.selectedKeys.length > 0 ? 4 : -1);
+    i0.ɵɵconditional(ctx_r2.selectedKeys.length > 0 ? 4 : -1);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r1.selectedKeys.length > 0 ? 6 : -1);
+    i0.ɵɵconditional(ctx_r2.selectedKeys.length > 0 ? 6 : -1);
 } }
-function SingleListDetailComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 6);
-    i0.ɵɵelement(1, "mj-loading", 21);
+function SingleListDetailComponent_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 9);
+    i0.ɵɵelement(1, "mj-loading", 28);
     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)); });
+function SingleListDetailComponent_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+    const _r6 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 10)(1, "mj-list-detail-grid", 29, 0);
+    i0.ɵɵlistener("rowClicked", function SingleListDetailComponent_Conditional_12_Template_mj_list_detail_grid_rowClicked_1_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onRowClicked($event)); })("rowDoubleClicked", function SingleListDetailComponent_Conditional_12_Template_mj_list_detail_grid_rowDoubleClicked_1_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onRowDoubleClicked($event)); })("selectionChange", function SingleListDetailComponent_Conditional_12_Template_mj_list_detail_grid_selectionChange_1_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onSelectionChange($event)); })("dataLoaded", function SingleListDetailComponent_Conditional_12_Template_mj_list_detail_grid_dataLoaded_1_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onDataLoaded($event)); });
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
+    const ctx_r2 = 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");
+    i0.ɵɵproperty("listId", ctx_r2.ListID)("listEntity", ctx_r2.listRecord)("autoNavigate", true)("height", "auto")("showToolbar", false)("toolbarConfig", ctx_r2.gridToolbarConfig)("selectionMode", "checkbox");
 } }
-function SingleListDetailComponent_Conditional_10_Conditional_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "kendo-progressbar", 30);
+function SingleListDetailComponent_Conditional_13_Conditional_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mj-progress-bar", 37);
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("min", 0)("max", ctx_r1.removeTotal)("value", ctx_r1.removeProgress)("label", false);
+    const ctx_r2 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("Value", ctx_r2.removeProgressPercent);
 } }
-function SingleListDetailComponent_Conditional_10_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 25);
-    i0.ɵɵelement(1, "mj-loading", 29);
-    i0.ɵɵconditionalCreate(2, SingleListDetailComponent_Conditional_10_Conditional_2_Conditional_2_Template, 1, 4, "kendo-progressbar", 30);
+function SingleListDetailComponent_Conditional_13_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 32);
+    i0.ɵɵelement(1, "mj-loading", 36);
+    i0.ɵɵconditionalCreate(2, SingleListDetailComponent_Conditional_13_Conditional_2_Conditional_2_Template, 1, 1, "mj-progress-bar", 37);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
+    const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r1.removeTotal > 0 ? 2 : -1);
+    i0.ɵɵconditional(ctx_r2.removeTotal > 0 ? 2 : -1);
 } }
-function SingleListDetailComponent_Conditional_10_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 26);
-    i0.ɵɵelement(1, "span", 31);
+function SingleListDetailComponent_Conditional_13_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 33);
+    i0.ɵɵelement(1, "span", 38);
     i0.ɵɵelementStart(2, "p");
     i0.ɵɵtext(3, "Are you sure you want to remove ");
     i0.ɵɵelementStart(4, "strong");
@@ -98,288 +130,287 @@ function SingleListDetailComponent_Conditional_10_Conditional_3_Template(rf, ctx
     i0.ɵɵelementEnd();
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "p", 32);
+    i0.ɵɵelementStart(7, "p", 39);
     i0.ɵɵtext(8, "This will not delete the records, only remove them from this list.");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
+    const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(5);
-    i0.ɵɵtextInterpolate(ctx_r1.selectedKeys.length);
+    i0.ɵɵtextInterpolate(ctx_r2.selectedKeys.length);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" record", ctx_r1.selectedKeys.length !== 1 ? "s" : "", " from this list?");
+    i0.ɵɵtextInterpolate1(" record", ctx_r2.selectedKeys.length !== 1 ? "s" : "", " from this list?");
 } }
-function SingleListDetailComponent_Conditional_10_Template(rf, ctx) { if (rf & 1) {
-    const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "kendo-dialog", 23);
-    i0.ɵɵlistener("close", function SingleListDetailComponent_Conditional_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.ɵɵconditionalCreate(2, SingleListDetailComponent_Conditional_10_Conditional_2_Template, 3, 1, "div", 25)(3, SingleListDetailComponent_Conditional_10_Conditional_3_Template, 9, 2, "div", 26);
+function SingleListDetailComponent_Conditional_13_Template(rf, ctx) { if (rf & 1) {
+    const _r7 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-dialog", 30);
+    i0.ɵɵlistener("Close", function SingleListDetailComponent_Conditional_13_Template_mj_dialog_Close_0_listener() { i0.ɵɵrestoreView(_r7); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.closeRemoveDialog()); });
+    i0.ɵɵelementStart(1, "div", 31);
+    i0.ɵɵconditionalCreate(2, SingleListDetailComponent_Conditional_13_Conditional_2_Template, 3, 1, "div", 32)(3, SingleListDetailComponent_Conditional_13_Conditional_3_Template, 9, 2, "div", 33);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "kendo-dialog-actions")(5, "button", 27);
-    i0.ɵɵlistener("click", function SingleListDetailComponent_Conditional_10_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.confirmRemoveFromList()); });
+    i0.ɵɵelementStart(4, "mj-dialog-actions")(5, "button", 34);
+    i0.ɵɵlistener("click", function SingleListDetailComponent_Conditional_13_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r7); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.confirmRemoveFromList()); });
     i0.ɵɵtext(6, " Remove ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "button", 28);
-    i0.ɵɵlistener("click", function SingleListDetailComponent_Conditional_10_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.closeRemoveDialog()); });
+    i0.ɵɵelementStart(7, "button", 35);
+    i0.ɵɵlistener("click", function SingleListDetailComponent_Conditional_13_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r7); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.closeRemoveDialog()); });
     i0.ɵɵtext(8, " Cancel ");
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("minWidth", 350)("width", 450);
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("Visible", true)("MinWidth", 350)("Width", 450);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r1.isRemoving ? 2 : 3);
+    i0.ɵɵconditional(ctx_r2.isRemoving ? 2 : 3);
     i0.ɵɵadvance(3);
-    i0.ɵɵproperty("disabled", ctx_r1.isRemoving);
+    i0.ɵɵproperty("disabled", ctx_r2.isRemoving);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("disabled", ctx_r1.isRemoving);
+    i0.ɵɵproperty("disabled", ctx_r2.isRemoving);
 } }
-function SingleListDetailComponent_Conditional_11_Conditional_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "kendo-progressbar", 30);
+function SingleListDetailComponent_Conditional_14_Conditional_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mj-progress-bar", 37);
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("min", 0)("max", ctx_r1.addTotal)("value", ctx_r1.addProgress)("label", false);
+    const ctx_r2 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("Value", ctx_r2.addProgressPercent);
 } }
-function SingleListDetailComponent_Conditional_11_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 25);
-    i0.ɵɵelement(1, "mj-loading", 36);
-    i0.ɵɵconditionalCreate(2, SingleListDetailComponent_Conditional_11_Conditional_2_Conditional_2_Template, 1, 4, "kendo-progressbar", 30);
+function SingleListDetailComponent_Conditional_14_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 32);
+    i0.ɵɵelement(1, "mj-loading", 43);
+    i0.ɵɵconditionalCreate(2, SingleListDetailComponent_Conditional_14_Conditional_2_Conditional_2_Template, 1, 1, "mj-progress-bar", 37);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
+    const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r1.addTotal > 0 ? 2 : -1);
+    i0.ɵɵconditional(ctx_r2.addTotal > 0 ? 2 : -1);
 } }
-function SingleListDetailComponent_Conditional_11_Conditional_3_ng_template_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "span", 44);
-} }
-function SingleListDetailComponent_Conditional_11_Conditional_3_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 42);
-    i0.ɵɵelement(1, "mj-loading", 45);
+function SingleListDetailComponent_Conditional_14_Conditional_3_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 50);
+    i0.ɵɵelement(1, "mj-loading", 52);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     i0.ɵɵadvance();
     i0.ɵɵproperty("showText", false);
 } }
-function SingleListDetailComponent_Conditional_11_Conditional_3_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 43);
-    i0.ɵɵelement(1, "span", 46);
+function SingleListDetailComponent_Conditional_14_Conditional_3_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 51);
+    i0.ɵɵelement(1, "span", 53);
     i0.ɵɵelementStart(2, "p");
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(3);
+    const ctx_r2 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate1("No records found matching \"", ctx_r1.addRecordsSearchFilter, "\"");
+    i0.ɵɵtextInterpolate1("No records found matching \"", ctx_r2.addRecordsSearchFilter, "\"");
 } }
-function SingleListDetailComponent_Conditional_11_Conditional_3_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 43);
-    i0.ɵɵelement(1, "span", 47);
+function SingleListDetailComponent_Conditional_14_Conditional_3_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 51);
+    i0.ɵɵelement(1, "span", 54);
     i0.ɵɵelementStart(2, "p");
     i0.ɵɵtext(3, "Search for records to add to this list");
     i0.ɵɵelementEnd()();
 } }
-function SingleListDetailComponent_Conditional_11_Conditional_3_Conditional_9_For_9_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "span", 55);
+function SingleListDetailComponent_Conditional_14_Conditional_3_Conditional_10_For_9_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "span", 62);
 } }
-function SingleListDetailComponent_Conditional_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_Conditional_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_Conditional_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)); });
+function SingleListDetailComponent_Conditional_14_Conditional_3_Conditional_10_For_9_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    const _r13 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "input", 66);
+    i0.ɵɵlistener("click", function SingleListDetailComponent_Conditional_14_Conditional_3_Conditional_10_For_9_Conditional_3_Template_input_click_0_listener($event) { i0.ɵɵrestoreView(_r13); return i0.ɵɵresetView($event.stopPropagation()); })("change", function SingleListDetailComponent_Conditional_14_Conditional_3_Conditional_10_For_9_Conditional_3_Template_input_change_0_listener() { i0.ɵɵrestoreView(_r13); const record_r12 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r2.toggleRecordSelection(record_r12)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const record_r10 = i0.ɵɵnextContext().$implicit;
-    i0.ɵɵproperty("checked", record_r10.isSelected);
+    const record_r12 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵproperty("checked", record_r12.isSelected);
 } }
-function SingleListDetailComponent_Conditional_11_Conditional_3_Conditional_9_For_9_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 58);
+function SingleListDetailComponent_Conditional_14_Conditional_3_Conditional_10_For_9_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 65);
     i0.ɵɵtext(1, "In List");
     i0.ɵɵelementEnd();
 } }
-function SingleListDetailComponent_Conditional_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_Conditional_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.ɵɵconditionalCreate(2, SingleListDetailComponent_Conditional_11_Conditional_3_Conditional_9_For_9_Conditional_2_Template, 1, 0, "span", 55)(3, SingleListDetailComponent_Conditional_11_Conditional_3_Conditional_9_For_9_Conditional_3_Template, 1, 1, "input", 56);
+function SingleListDetailComponent_Conditional_14_Conditional_3_Conditional_10_For_9_Template(rf, ctx) { if (rf & 1) {
+    const _r11 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 60);
+    i0.ɵɵlistener("click", function SingleListDetailComponent_Conditional_14_Conditional_3_Conditional_10_For_9_Template_div_click_0_listener() { const record_r12 = i0.ɵɵrestoreView(_r11).$implicit; const ctx_r2 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r2.toggleRecordSelection(record_r12)); });
+    i0.ɵɵelementStart(1, "div", 61);
+    i0.ɵɵconditionalCreate(2, SingleListDetailComponent_Conditional_14_Conditional_3_Conditional_10_For_9_Conditional_2_Template, 1, 0, "span", 62)(3, SingleListDetailComponent_Conditional_14_Conditional_3_Conditional_10_For_9_Conditional_3_Template, 1, 1, "input", 63);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 57);
+    i0.ɵɵelementStart(4, "div", 64);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(6, SingleListDetailComponent_Conditional_11_Conditional_3_Conditional_9_For_9_Conditional_6_Template, 2, 0, "span", 58);
+    i0.ɵɵconditionalCreate(6, SingleListDetailComponent_Conditional_14_Conditional_3_Conditional_10_For_9_Conditional_6_Template, 2, 0, "span", 65);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const record_r10 = ctx.$implicit;
-    i0.ɵɵclassProp("in-list", record_r10.isInList)("selected", record_r10.isSelected);
+    const record_r12 = ctx.$implicit;
+    i0.ɵɵclassProp("in-list", record_r12.isInList)("selected", record_r12.isSelected);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(record_r10.isInList ? 2 : 3);
+    i0.ɵɵconditional(record_r12.isInList ? 2 : 3);
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(record_r10.Name);
+    i0.ɵɵtextInterpolate(record_r12.Name);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(record_r10.isInList ? 6 : -1);
+    i0.ɵɵconditional(record_r12.isInList ? 6 : -1);
 } }
-function SingleListDetailComponent_Conditional_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_Conditional_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()); });
+function SingleListDetailComponent_Conditional_14_Conditional_3_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+    const _r10 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 55)(1, "button", 56);
+    i0.ɵɵlistener("click", function SingleListDetailComponent_Conditional_14_Conditional_3_Conditional_10_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r10); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.selectAllAddable()); });
     i0.ɵɵtext(2, "Select All");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "button", 49);
-    i0.ɵɵlistener("click", function SingleListDetailComponent_Conditional_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.ɵɵelementStart(3, "button", 56);
+    i0.ɵɵlistener("click", function SingleListDetailComponent_Conditional_14_Conditional_3_Conditional_10_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r10); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.deselectAllAddable()); });
     i0.ɵɵtext(4, "Deselect All");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "span", 50);
+    i0.ɵɵelementStart(5, "span", 57);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(7, "div", 51);
-    i0.ɵɵrepeaterCreate(8, SingleListDetailComponent_Conditional_11_Conditional_3_Conditional_9_For_9_Template, 7, 7, "div", 52, _forTrack0);
+    i0.ɵɵelementStart(7, "div", 58);
+    i0.ɵɵrepeaterCreate(8, SingleListDetailComponent_Conditional_14_Conditional_3_Conditional_10_For_9_Template, 7, 7, "div", 59, _forTrack1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(3);
+    const ctx_r2 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance(6);
-    i0.ɵɵtextInterpolate1("", ctx_r1.selectedAddableRecords.length, " selected");
+    i0.ɵɵtextInterpolate1("", ctx_r2.selectedAddableRecords.length, " selected");
     i0.ɵɵadvance(2);
-    i0.ɵɵrepeater(ctx_r1.addableRecords);
+    i0.ɵɵrepeater(ctx_r2.addableRecords);
 } }
-function SingleListDetailComponent_Conditional_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_Conditional_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_Conditional_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");
+function SingleListDetailComponent_Conditional_14_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    const _r9 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 44)(1, "div", 45);
+    i0.ɵɵelement(2, "span", 46);
+    i0.ɵɵelementStart(3, "input", 47);
+    i0.ɵɵlistener("input", function SingleListDetailComponent_Conditional_14_Conditional_3_Template_input_input_3_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onAddRecordsSearchInputEvent($event)); });
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(4, "span", 48);
+    i0.ɵɵtext(5, "Type at least 2 characters to search");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(5, "div", 41);
-    i0.ɵɵconditionalCreate(6, SingleListDetailComponent_Conditional_11_Conditional_3_Conditional_6_Template, 2, 1, "div", 42)(7, SingleListDetailComponent_Conditional_11_Conditional_3_Conditional_7_Template, 4, 1, "div", 43)(8, SingleListDetailComponent_Conditional_11_Conditional_3_Conditional_8_Template, 4, 0, "div", 43)(9, SingleListDetailComponent_Conditional_11_Conditional_3_Conditional_9_Template, 10, 1);
+    i0.ɵɵelementStart(6, "div", 49);
+    i0.ɵɵconditionalCreate(7, SingleListDetailComponent_Conditional_14_Conditional_3_Conditional_7_Template, 2, 1, "div", 50)(8, SingleListDetailComponent_Conditional_14_Conditional_3_Conditional_8_Template, 4, 1, "div", 51)(9, SingleListDetailComponent_Conditional_14_Conditional_3_Conditional_9_Template, 4, 0, "div", 51)(10, SingleListDetailComponent_Conditional_14_Conditional_3_Conditional_10_Template, 10, 1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵadvance();
-    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);
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("placeholder", "Search " + ((ctx_r2.listRecord == null ? null : ctx_r2.listRecord.Entity) || "records") + "...")("value", ctx_r2.addRecordsSearchFilter);
+    i0.ɵɵadvance(4);
+    i0.ɵɵconditional(ctx_r2.addDialogLoading ? 7 : ctx_r2.addableRecords.length === 0 && ctx_r2.addRecordsSearchFilter.length >= 2 ? 8 : ctx_r2.addableRecords.length === 0 ? 9 : 10);
 } }
-function SingleListDetailComponent_Conditional_11_Template(rf, ctx) { if (rf & 1) {
-    const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "kendo-dialog", 33);
-    i0.ɵɵlistener("close", function SingleListDetailComponent_Conditional_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.ɵɵconditionalCreate(2, SingleListDetailComponent_Conditional_11_Conditional_2_Template, 3, 1, "div", 25)(3, SingleListDetailComponent_Conditional_11_Conditional_3_Template, 10, 4);
+function SingleListDetailComponent_Conditional_14_Template(rf, ctx) { if (rf & 1) {
+    const _r8 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-dialog", 40);
+    i0.ɵɵlistener("Close", function SingleListDetailComponent_Conditional_14_Template_mj_dialog_Close_0_listener() { i0.ɵɵrestoreView(_r8); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.closeAddRecordsDialog()); });
+    i0.ɵɵelementStart(1, "div", 41);
+    i0.ɵɵconditionalCreate(2, SingleListDetailComponent_Conditional_14_Conditional_2_Template, 3, 1, "div", 32)(3, SingleListDetailComponent_Conditional_14_Conditional_3_Template, 11, 3);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "kendo-dialog-actions")(5, "button", 35);
-    i0.ɵɵlistener("click", function SingleListDetailComponent_Conditional_11_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.confirmAddRecords()); });
+    i0.ɵɵelementStart(4, "mj-dialog-actions")(5, "button", 42);
+    i0.ɵɵlistener("click", function SingleListDetailComponent_Conditional_14_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r8); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.confirmAddRecords()); });
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "button", 28);
-    i0.ɵɵlistener("click", function SingleListDetailComponent_Conditional_11_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.closeAddRecordsDialog()); });
+    i0.ɵɵelementStart(7, "button", 35);
+    i0.ɵɵlistener("click", function SingleListDetailComponent_Conditional_14_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r8); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.closeAddRecordsDialog()); });
     i0.ɵɵtext(8, " Cancel ");
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
-    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);
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("Visible", true)("Title", "Add " + ((ctx_r2.listRecord == null ? null : ctx_r2.listRecord.Entity) || "Records") + " to List")("MinWidth", 500)("Width", 700)("Height", 650);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r1.addDialogSaving ? 2 : 3);
+    i0.ɵɵconditional(ctx_r2.addDialogSaving ? 2 : 3);
     i0.ɵɵadvance(3);
-    i0.ɵɵproperty("disabled", ctx_r1.addDialogSaving || ctx_r1.selectedAddableRecords.length === 0);
+    i0.ɵɵproperty("disabled", ctx_r2.addDialogSaving || ctx_r2.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.ɵɵtextInterpolate2(" Add ", ctx_r2.selectedAddableRecords.length > 0 ? ctx_r2.selectedAddableRecords.length : "", " Record", ctx_r2.selectedAddableRecords.length !== 1 ? "s" : "", " ");
     i0.ɵɵadvance();
-    i0.ɵɵproperty("disabled", ctx_r1.addDialogSaving);
+    i0.ɵɵproperty("disabled", ctx_r2.addDialogSaving);
 } }
-function SingleListDetailComponent_Conditional_12_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 25);
-    i0.ɵɵelement(1, "mj-loading", 61);
+function SingleListDetailComponent_Conditional_15_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 32);
+    i0.ɵɵelement(1, "mj-loading", 68);
     i0.ɵɵelementEnd();
 } }
-function SingleListDetailComponent_Conditional_12_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 25);
-    i0.ɵɵelement(1, "mj-loading", 36)(2, "kendo-progressbar", 30);
+function SingleListDetailComponent_Conditional_15_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 32);
+    i0.ɵɵelement(1, "mj-loading", 43)(2, "mj-progress-bar", 37);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
+    const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("min", 0)("max", ctx_r1.addFromViewTotal)("value", ctx_r1.addFromViewProgress)("label", false);
+    i0.ɵɵproperty("Value", ctx_r2.addFromViewProgressPercent);
 } }
-function SingleListDetailComponent_Conditional_12_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 25);
-    i0.ɵɵelement(1, "mj-loading", 62);
+function SingleListDetailComponent_Conditional_15_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 32);
+    i0.ɵɵelement(1, "mj-loading", 69);
     i0.ɵɵelementEnd();
 } }
-function SingleListDetailComponent_Conditional_12_Conditional_5_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 43);
-    i0.ɵɵelement(1, "span", 65);
+function SingleListDetailComponent_Conditional_15_Conditional_5_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 51);
+    i0.ɵɵelement(1, "span", 72);
     i0.ɵɵelementStart(2, "p");
     i0.ɵɵtext(3, "No saved views found for this entity");
     i0.ɵɵelementEnd()();
 } }
-function SingleListDetailComponent_Conditional_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_Conditional_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_Conditional_12_Conditional_5_Conditional_4_For_1_Template_input_click_1_listener($event) { i0.ɵɵrestoreView(_r13); return i0.ɵɵresetView($event.stopPropagation()); })("change", function SingleListDetailComponent_Conditional_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);
+function SingleListDetailComponent_Conditional_15_Conditional_5_Conditional_4_For_1_Template(rf, ctx) { if (rf & 1) {
+    const _r15 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 74);
+    i0.ɵɵlistener("click", function SingleListDetailComponent_Conditional_15_Conditional_5_Conditional_4_For_1_Template_div_click_0_listener() { const view_r16 = i0.ɵɵrestoreView(_r15).$implicit; const ctx_r2 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r2.toggleViewSelection(view_r16)); });
+    i0.ɵɵelementStart(1, "input", 66);
+    i0.ɵɵlistener("click", function SingleListDetailComponent_Conditional_15_Conditional_5_Conditional_4_For_1_Template_input_click_1_listener($event) { i0.ɵɵrestoreView(_r15); return i0.ɵɵresetView($event.stopPropagation()); })("change", function SingleListDetailComponent_Conditional_15_Conditional_5_Conditional_4_For_1_Template_input_change_1_listener() { const view_r16 = i0.ɵɵrestoreView(_r15).$implicit; const ctx_r2 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r2.toggleViewSelection(view_r16)); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(2, "span", 75);
+    i0.ɵɵelementStart(3, "span", 76);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const view_r14 = ctx.$implicit;
-    const ctx_r1 = i0.ɵɵnextContext(4);
-    i0.ɵɵclassProp("selected", ctx_r1.isViewSelected(view_r14));
+    const view_r16 = ctx.$implicit;
+    const ctx_r2 = i0.ɵɵnextContext(4);
+    i0.ɵɵclassProp("selected", ctx_r2.isViewSelected(view_r16));
     i0.ɵɵadvance();
-    i0.ɵɵproperty("checked", ctx_r1.isViewSelected(view_r14));
+    i0.ɵɵproperty("checked", ctx_r2.isViewSelected(view_r16));
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(view_r14.Name);
+    i0.ɵɵtextInterpolate(view_r16.Name);
 } }
-function SingleListDetailComponent_Conditional_12_Conditional_5_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵrepeaterCreate(0, SingleListDetailComponent_Conditional_12_Conditional_5_Conditional_4_For_1_Template, 5, 4, "div", 66, _forTrack0);
+function SingleListDetailComponent_Conditional_15_Conditional_5_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵrepeaterCreate(0, SingleListDetailComponent_Conditional_15_Conditional_5_Conditional_4_For_1_Template, 5, 4, "div", 73, _forTrack1);
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(3);
-    i0.ɵɵrepeater(ctx_r1.userViews);
+    const ctx_r2 = i0.ɵɵnextContext(3);
+    i0.ɵɵrepeater(ctx_r2.userViews);
 } }
-function SingleListDetailComponent_Conditional_12_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "p", 63);
+function SingleListDetailComponent_Conditional_15_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 70);
     i0.ɵɵtext(1, "Select views to add their records to this list:");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(2, "div", 64);
-    i0.ɵɵconditionalCreate(3, SingleListDetailComponent_Conditional_12_Conditional_5_Conditional_3_Template, 4, 0, "div", 43)(4, SingleListDetailComponent_Conditional_12_Conditional_5_Conditional_4_Template, 2, 0);
+    i0.ɵɵelementStart(2, "div", 71);
+    i0.ɵɵconditionalCreate(3, SingleListDetailComponent_Conditional_15_Conditional_5_Conditional_3_Template, 4, 0, "div", 51)(4, SingleListDetailComponent_Conditional_15_Conditional_5_Conditional_4_Template, 2, 0);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
+    const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(3);
-    i0.ɵɵconditional(!ctx_r1.userViews || ctx_r1.userViews.length === 0 ? 3 : 4);
+    i0.ɵɵconditional(!ctx_r2.userViews || ctx_r2.userViews.length === 0 ? 3 : 4);
 } }
-function SingleListDetailComponent_Conditional_12_Template(rf, ctx) { if (rf & 1) {
-    const _r12 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "kendo-dialog", 60);
-    i0.ɵɵlistener("close", function SingleListDetailComponent_Conditional_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.ɵɵconditionalCreate(2, SingleListDetailComponent_Conditional_12_Conditional_2_Template, 2, 0, "div", 25)(3, SingleListDetailComponent_Conditional_12_Conditional_3_Template, 3, 4, "div", 25)(4, SingleListDetailComponent_Conditional_12_Conditional_4_Template, 2, 0, "div", 25)(5, SingleListDetailComponent_Conditional_12_Conditional_5_Template, 5, 1);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "kendo-dialog-actions")(7, "button", 35);
-    i0.ɵɵlistener("click", function SingleListDetailComponent_Conditional_12_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r12); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.confirmAddFromView()); });
+function SingleListDetailComponent_Conditional_15_Template(rf, ctx) { if (rf & 1) {
+    const _r14 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-dialog", 67);
+    i0.ɵɵlistener("Close", function SingleListDetailComponent_Conditional_15_Template_mj_dialog_Close_0_listener() { i0.ɵɵrestoreView(_r14); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.closeAddFromViewDialog()); });
+    i0.ɵɵelementStart(1, "div", 31);
+    i0.ɵɵconditionalCreate(2, SingleListDetailComponent_Conditional_15_Conditional_2_Template, 2, 0, "div", 32)(3, SingleListDetailComponent_Conditional_15_Conditional_3_Template, 3, 1, "div", 32)(4, SingleListDetailComponent_Conditional_15_Conditional_4_Template, 2, 0, "div", 32)(5, SingleListDetailComponent_Conditional_15_Conditional_5_Template, 5, 1);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "mj-dialog-actions")(7, "button", 42);
+    i0.ɵɵlistener("click", function SingleListDetailComponent_Conditional_15_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r14); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.confirmAddFromView()); });
     i0.ɵɵtext(8);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "button", 28);
-    i0.ɵɵlistener("click", function SingleListDetailComponent_Conditional_12_Template_button_click_9_listener() { i0.ɵɵrestoreView(_r12); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.closeAddFromViewDialog()); });
+    i0.ɵɵelementStart(9, "button", 35);
+    i0.ɵɵlistener("click", function SingleListDetailComponent_Conditional_15_Template_button_click_9_listener() { i0.ɵɵrestoreView(_r14); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.closeAddFromViewDialog()); });
     i0.ɵɵtext(10, " Cancel ");
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("minWidth", 400)("width", 600)("height", 500);
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("Visible", true)("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.ɵɵconditional(ctx_r2.showAddFromViewLoader && ctx_r2.fetchingRecordsToSave ? 2 : ctx_r2.showAddFromViewLoader && ctx_r2.addFromViewTotal > 0 ? 3 : ctx_r2.showAddFromViewLoader ? 4 : 5);
     i0.ɵɵadvance(5);
-    i0.ɵɵproperty("disabled", ctx_r1.showAddFromViewLoader || ctx_r1.userViewsToAdd.length === 0);
+    i0.ɵɵproperty("disabled", ctx_r2.showAddFromViewLoader || ctx_r2.userViewsToAdd.length === 0);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate2(" Add from ", ctx_r1.userViewsToAdd.length, " View", ctx_r1.userViewsToAdd.length !== 1 ? "s" : "", " ");
+    i0.ɵɵtextInterpolate2(" Add from ", ctx_r2.userViewsToAdd.length, " View", ctx_r2.userViewsToAdd.length !== 1 ? "s" : "", " ");
     i0.ɵɵadvance();
-    i0.ɵɵproperty("disabled", ctx_r1.showAddFromViewLoader);
+    i0.ɵɵproperty("disabled", ctx_r2.showAddFromViewLoader);
 } }
 export class SingleListDetailComponent {
     sharedService;
     cdr;
+    elementRef;
     ListID = "";
     listDetailGrid;
     // List record
@@ -421,6 +452,8 @@ export class SingleListDetailComponent {
     addFromViewProgress = 0;
     addFromViewTotal = 0;
     fetchingRecordsToSave = false;
+    // Dropdown button toggle state
+    showAddDropdown = false;
     // Dropdown menu options
     addOptions = [
         {
@@ -436,9 +469,18 @@ export class SingleListDetailComponent {
             Action: () => this.openAddFromViewDialog()
         }
     ];
-    constructor(sharedService, cdr) {
+    onDocumentClick(event) {
+        if (this.showAddDropdown) {
+            const target = event.target;
+            if (!this.elementRef.nativeElement.querySelector('.add-dropdown-wrapper')?.contains(target)) {
+                this.showAddDropdown = false;
+            }
+        }
+    }
+    constructor(sharedService, cdr, elementRef) {
         this.sharedService = sharedService;
         this.cdr = cdr;
+        this.elementRef = elementRef;
         // Debounce search input
         this.searchSubject
             .pipe(debounceTime(300))
@@ -497,6 +539,18 @@ export class SingleListDetailComponent {
     // ==========================================
     // Toolbar Actions
     // ==========================================
+    // ==========================================
+    // Progress Percentage Getters
+    // ==========================================
+    get removeProgressPercent() {
+        return this.removeTotal > 0 ? Math.round((this.removeProgress / this.removeTotal) * 100) : 0;
+    }
+    get addProgressPercent() {
+        return this.addTotal > 0 ? Math.round((this.addProgress / this.addTotal) * 100) : 0;
+    }
+    get addFromViewProgressPercent() {
+        return this.addFromViewTotal > 0 ? Math.round((this.addFromViewProgress / this.addFromViewTotal) * 100) : 0;
+    }
     onRefreshClick() {
         this.refreshGrid();
     }
@@ -506,7 +560,11 @@ export class SingleListDetailComponent {
             this.listDetailGrid.export();
         }
     }
+    toggleAddDropdown() {
+        this.showAddDropdown = !this.showAddDropdown;
+    }
     onDropdownItemClick(item) {
+        this.showAddDropdown = false;
         if (item.Action) {
             item.Action();
         }
@@ -622,6 +680,10 @@ export class SingleListDetailComponent {
             this.existingListDetailIds = new Set(result.Results.map(r => NormalizeUUID(r.RecordID)));
         }
     }
+    onAddRecordsSearchInputEvent(event) {
+        const value = event.target.value;
+        this.onAddRecordsSearchChange(value);
+    }
     onAddRecordsSearchChange(value) {
         this.addRecordsSearchFilter = value;
         this.searchSubject.next(value);
@@ -841,55 +903,63 @@ export class SingleListDetailComponent {
             this.showAddFromViewLoader = false;
         }
     }
-    static ɵfac = function SingleListDetailComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SingleListDetailComponent)(i0.ɵɵdirectiveInject(i1.SharedService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
+    static ɵfac = function SingleListDetailComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SingleListDetailComponent)(i0.ɵɵdirectiveInject(i1.SharedService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i0.ElementRef)); };
     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" }, standalone: false, 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"], [3, "title", "minWidth", "width", "height"], ["title", "Add Records from Views", 3, "minWidth", "width", "height"], [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) {
+        } }, hostBindings: function SingleListDetailComponent_HostBindings(rf, ctx) { if (rf & 1) {
+            i0.ɵɵlistener("click", function SingleListDetailComponent_click_HostBindingHandler($event) { return ctx.onDocumentClick($event); }, i0.ɵɵresolveDocument);
+        } }, inputs: { ListID: "ListID" }, standalone: false, decls: 16, vars: 8, consts: [["listDetailGrid", ""], [1, "list-detail-container"], [1, "list-header"], [1, "add-dropdown-wrapper"], ["mjButton", "", "variant", "primary", 1, "add-btn", 3, "click"], [1, "fa-solid", "fa-plus"], [1, "fa-solid", "fa-chevron-down", "add-dropdown-arrow"], [1, "add-dropdown-panel"], [1, "custom-toolbar"], [1, "loading-container"], [1, "grid-container"], ["Title", "Remove from List", 3, "Visible", "MinWidth", "Width"], [3, "Visible", "Title", "MinWidth", "Width", "Height"], ["Title", "Add Records from Views", 3, "Visible", "MinWidth", "Width", "Height"], [1, "add-dropdown-item"], [1, "add-dropdown-item", 3, "click"], [1, "add-dropdown-item-text"], [1, "add-dropdown-item-desc"], [1, "toolbar-left"], [1, "row-count"], [1, "selection-count"], [1, "toolbar-right"], ["mjButton", "", "variant", "flat", 1, "toolbar-button", "remove-btn"], ["mjButton", "", "variant", "flat", 1, "toolbar-button", 3, "click"], [1, "fa-solid", "fa-rotate"], [1, "fa-solid", "fa-file-export"], ["mjButton", "", "variant", "flat", 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", "Visible", "MinWidth", "Width"], [1, "dialog-content"], [1, "dialog-loading"], [1, "dialog-message"], ["mjButton", "", "variant", "danger", 3, "click", "disabled"], ["mjButton", "", "variant", "outline", 3, "click", "disabled"], ["text", "Removing records...", "size", "small"], [1, "progress-bar", 3, "Value"], [1, "fa-solid", "fa-triangle-exclamation", "warning-icon"], [1, "dialog-note"], [3, "Close", "Visible", "Title", "MinWidth", "Width", "Height"], [1, "dialog-content", "add-records-dialog"], ["mjButton", "", "variant", "primary", 3, "click", "disabled"], ["text", "Adding records to list...", "size", "small"], [1, "search-section"], [1, "search-input-wrapper"], [1, "fa-solid", "fa-search", "search-icon"], ["type", "text", 1, "mj-input", "search-input", 3, "input", "placeholder", "value"], [1, "search-hint"], [1, "records-list"], [1, "list-loading"], [1, "empty-results"], ["size", "small", 3, "showText"], [1, "fa-solid", "fa-search", "empty-icon"], [1, "fa-solid", "fa-list", "empty-icon"], [1, "selection-controls"], ["mjButton", "", "variant", "flat", "size", "sm", 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", "Visible", "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) { return ctx.onDropdownItemClick($event); });
-            i0.ɵɵelement(5, "span", 4);
-            i0.ɵɵtext(6, " Add to List ");
+            i0.ɵɵelementStart(4, "div", 3)(5, "button", 4);
+            i0.ɵɵlistener("click", function SingleListDetailComponent_Template_button_click_5_listener() { return ctx.toggleAddDropdown(); });
+            i0.ɵɵelement(6, "span", 5);
+            i0.ɵɵtext(7, " Add to List ");
+            i0.ɵɵelement(8, "span", 6);
+            i0.ɵɵelementEnd();
+            i0.ɵɵconditionalCreate(9, SingleListDetailComponent_Conditional_9_Template, 3, 0, "div", 7);
             i0.ɵɵelementEnd()();
-            i0.ɵɵconditionalCreate(7, SingleListDetailComponent_Conditional_7_Template, 13, 4, "div", 5);
-            i0.ɵɵconditionalCreate(8, SingleListDetailComponent_Conditional_8_Template, 2, 0, "div", 6);
-            i0.ɵɵconditionalCreate(9, SingleListDetailComponent_Conditional_9_Template, 3, 7, "div", 7);
+            i0.ɵɵconditionalCreate(10, SingleListDetailComponent_Conditional_10_Template, 13, 4, "div", 8);
+            i0.ɵɵconditionalCreate(11, SingleListDetailComponent_Conditional_11_Template, 2, 0, "div", 9);
+            i0.ɵɵconditionalCreate(12, SingleListDetailComponent_Conditional_12_Template, 3, 7, "div", 10);
             i0.ɵɵelementEnd();
-            i0.ɵɵconditionalCreate(10, SingleListDetailComponent_Conditional_10_Template, 9, 5, "kendo-dialog", 8);
-            i0.ɵɵconditionalCreate(11, SingleListDetailComponent_Conditional_11_Template, 9, 9, "kendo-dialog", 9);
-            i0.ɵɵconditionalCreate(12, SingleListDetailComponent_Conditional_12_Template, 11, 8, "kendo-dialog", 10);
+            i0.ɵɵconditionalCreate(13, SingleListDetailComponent_Conditional_13_Template, 9, 6, "mj-dialog", 11);
+            i0.ɵɵconditionalCreate(14, SingleListDetailComponent_Conditional_14_Template, 9, 10, "mj-dialog", 12);
+            i0.ɵɵconditionalCreate(15, SingleListDetailComponent_Conditional_15_Template, 11, 9, "mj-dialog", 13);
         } if (rf & 2) {
             i0.ɵɵadvance(3);
             i0.ɵɵtextInterpolate(ctx.listRecord ? ctx.listRecord.Name : "List");
+            i0.ɵɵadvance(6);
+            i0.ɵɵconditional(ctx.showAddDropdown ? 9 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("data", ctx.addOptions);
-            i0.ɵɵadvance(3);
-            i0.ɵɵconditional(!ctx.showLoader && ctx.listRecord ? 7 : -1);
+            i0.ɵɵconditional(!ctx.showLoader && ctx.listRecord ? 10 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.showLoader ? 8 : -1);
+            i0.ɵɵconditional(ctx.showLoader ? 11 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(!ctx.showLoader && ctx.listRecord ? 9 : -1);
+            i0.ɵɵconditional(!ctx.showLoader && ctx.listRecord ? 12 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.showRemoveDialog ? 10 : -1);
+            i0.ɵɵconditional(ctx.showRemoveDialog ? 13 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.showAddRecordsDialog ? 11 : -1);
+            i0.ɵɵconditional(ctx.showAddRecordsDialog ? 14 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.showAddFromViewDialog ? 12 : -1);
-        } }, dependencies: [i2.DialogComponent, i2.DialogActionsComponent, i3.ButtonComponent, i3.DropDownButtonComponent, i4.TextBoxComponent, i4.TextBoxPrefixTemplateDirective, i5.ProgressBarComponent, i6.LoadingComponent, i7.ListDetailGridComponent], styles: [".list-detail-container[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  padding: 20px;\n  background: var(--mj-bg-surface-card);\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: var(--mj-text-primary);\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: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\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: var(--mj-text-primary);\n}\n\n.selection-count[_ngcontent-%COMP%] {\n  font-size: 14px;\n  color: var(--mj-text-secondary);\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: var(--mj-status-error);\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: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\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(--mj-brand-primary);\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(--mj-brand-primary) !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(--mj-brand-primary) !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: var(--mj-status-warning);\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: var(--mj-text-primary);\n}\n\n.dialog-note[_ngcontent-%COMP%] {\n  color: var(--mj-text-secondary) !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 var(--mj-border-default);\n  margin-bottom: 12px;\n}\n\n.search-input[_ngcontent-%COMP%] {\n  width: 100%;\n}\n\n.search-icon[_ngcontent-%COMP%] {\n  color: var(--mj-text-disabled);\n  padding-left: 8px;\n}\n\n.search-hint[_ngcontent-%COMP%] {\n  display: block;\n  font-size: 12px;\n  color: var(--mj-text-disabled);\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: var(--mj-text-disabled);\n}\n\n.empty-icon[_ngcontent-%COMP%] {\n  font-size: 32px;\n  margin-bottom: 12px;\n  color: var(--mj-border-strong);\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 var(--mj-border-default);\n  margin-bottom: 8px;\n}\n\n.selection-info[_ngcontent-%COMP%] {\n  margin-left: auto;\n  font-size: 13px;\n  color: var(--mj-text-secondary);\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: var(--mj-bg-surface-card);\n}\n\n.record-item.selected[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.record-item.in-list[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-card);\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: var(--mj-status-success);\n  font-size: 14px;\n}\n\n.record-name[_ngcontent-%COMP%] {\n  flex: 1;\n  font-size: 14px;\n  color: var(--mj-text-primary);\n}\n\n.in-list-badge[_ngcontent-%COMP%] {\n  font-size: 11px;\n  padding: 2px 8px;\n  background: color-mix(in srgb, var(--mj-status-success) 10%, var(--mj-bg-surface));\n  color: var(--mj-status-success);\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: var(--mj-text-secondary);\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: var(--mj-bg-surface-card);\n}\n\n.view-item.selected[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\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: var(--mj-text-secondary);\n  font-size: 16px;\n}\n\n.view-name[_ngcontent-%COMP%] {\n  flex: 1;\n  font-size: 14px;\n  color: var(--mj-text-primary);\n}"] });
+            i0.ɵɵconditional(ctx.showAddFromViewDialog ? 15 : -1);
+        } }, dependencies: [i2.MJProgressBarComponent, i3.LoadingComponent, i4.ListDetailGridComponent, i2.MJButtonDirective, i2.MJDialogComponent, i2.MJDialogActionsComponent], styles: [".list-detail-container[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  padding: 20px;\n  background: var(--mj-bg-surface-card);\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: var(--mj-text-primary);\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: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\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: var(--mj-text-primary);\n}\n\n.selection-count[_ngcontent-%COMP%] {\n  font-size: 14px;\n  color: var(--mj-text-secondary);\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: var(--mj-status-error);\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: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 0 0 8px 8px;\n  overflow: hidden;\n}\n\n\n\n.add-dropdown-wrapper[_ngcontent-%COMP%] {\n  position: relative;\n}\n\n.add-btn[_ngcontent-%COMP%] {\n  font-size: 16px;\n  padding: 8px 25px;\n  border-radius: 10px;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.add-dropdown-arrow[_ngcontent-%COMP%] {\n  font-size: 12px;\n  margin-left: 4px;\n}\n\n.add-dropdown-panel[_ngcontent-%COMP%] {\n  position: absolute;\n  top: 100%;\n  right: 0;\n  margin-top: 4px;\n  min-width: 240px;\n  background: var(--mj-bg-surface-elevated);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);\n  z-index: 100;\n  overflow: hidden;\n}\n\n.add-dropdown-item[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  padding: 10px 16px;\n  cursor: pointer;\n  transition: background-color 0.15s;\n}\n\n.add-dropdown-item[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n}\n\n.add-dropdown-item-text[_ngcontent-%COMP%] {\n  font-size: 14px;\n  font-weight: 500;\n  color: var(--mj-text-primary);\n}\n\n.add-dropdown-item-desc[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n  margin-top: 2px;\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: var(--mj-status-warning);\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: var(--mj-text-primary);\n}\n\n.dialog-note[_ngcontent-%COMP%] {\n  color: var(--mj-text-secondary) !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 var(--mj-border-default);\n  margin-bottom: 12px;\n}\n\n.search-input-wrapper[_ngcontent-%COMP%] {\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n\n.search-input-wrapper[_ngcontent-%COMP%]   .search-icon[_ngcontent-%COMP%] {\n  position: absolute;\n  left: 10px;\n  color: var(--mj-text-disabled);\n  font-size: 14px;\n  pointer-events: none;\n}\n\n.search-input-wrapper[_ngcontent-%COMP%]   .search-input[_ngcontent-%COMP%] {\n  width: 100%;\n  padding-left: 32px;\n}\n\n.search-hint[_ngcontent-%COMP%] {\n  display: block;\n  font-size: 12px;\n  color: var(--mj-text-disabled);\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: var(--mj-text-disabled);\n}\n\n.empty-icon[_ngcontent-%COMP%] {\n  font-size: 32px;\n  margin-bottom: 12px;\n  color: var(--mj-border-strong);\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 var(--mj-border-default);\n  margin-bottom: 8px;\n}\n\n.selection-info[_ngcontent-%COMP%] {\n  margin-left: auto;\n  font-size: 13px;\n  color: var(--mj-text-secondary);\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: var(--mj-bg-surface-card);\n}\n\n.record-item.selected[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.record-item.in-list[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-card);\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: var(--mj-status-success);\n  font-size: 14px;\n}\n\n.record-name[_ngcontent-%COMP%] {\n  flex: 1;\n  font-size: 14px;\n  color: var(--mj-text-primary);\n}\n\n.in-list-badge[_ngcontent-%COMP%] {\n  font-size: 11px;\n  padding: 2px 8px;\n  background: color-mix(in srgb, var(--mj-status-success) 10%, var(--mj-bg-surface));\n  color: var(--mj-status-success);\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: var(--mj-text-secondary);\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: var(--mj-bg-surface-card);\n}\n\n.view-item.selected[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\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: var(--mj-text-secondary);\n  font-size: 16px;\n}\n\n.view-name[_ngcontent-%COMP%] {\n  flex: 1;\n  font-size: 14px;\n  color: var(--mj-text-primary);\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SingleListDetailComponent, [{
         type: Component,
-        args: [{ standalone: false, 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@if (showRemoveDialog) {\n  <kendo-dialog\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\n<!-- Add Records Dialog -->\n@if (showAddRecordsDialog) {\n  <kendo-dialog\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        <!-- 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            <!-- 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\n<!-- Add From View Dialog -->\n@if (showAddFromViewDialog) {\n  <kendo-dialog\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        <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}\n", styles: [".list-detail-container {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  padding: 20px;\n  background: var(--mj-bg-surface-card);\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: var(--mj-text-primary);\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: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\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: var(--mj-text-primary);\n}\n\n.selection-count {\n  font-size: 14px;\n  color: var(--mj-text-secondary);\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: var(--mj-status-error);\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: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\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(--mj-brand-primary);\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(--mj-brand-primary) !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(--mj-brand-primary) !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: var(--mj-status-warning);\n  margin-bottom: 16px;\n  display: block;\n}\n\n.dialog-message p {\n  margin: 8px 0;\n  font-size: 15px;\n  color: var(--mj-text-primary);\n}\n\n.dialog-note {\n  color: var(--mj-text-secondary) !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 var(--mj-border-default);\n  margin-bottom: 12px;\n}\n\n.search-input {\n  width: 100%;\n}\n\n.search-icon {\n  color: var(--mj-text-disabled);\n  padding-left: 8px;\n}\n\n.search-hint {\n  display: block;\n  font-size: 12px;\n  color: var(--mj-text-disabled);\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: var(--mj-text-disabled);\n}\n\n.empty-icon {\n  font-size: 32px;\n  margin-bottom: 12px;\n  color: var(--mj-border-strong);\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 var(--mj-border-default);\n  margin-bottom: 8px;\n}\n\n.selection-info {\n  margin-left: auto;\n  font-size: 13px;\n  color: var(--mj-text-secondary);\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: var(--mj-bg-surface-card);\n}\n\n.record-item.selected {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.record-item.in-list {\n  background: var(--mj-bg-surface-card);\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: var(--mj-status-success);\n  font-size: 14px;\n}\n\n.record-name {\n  flex: 1;\n  font-size: 14px;\n  color: var(--mj-text-primary);\n}\n\n.in-list-badge {\n  font-size: 11px;\n  padding: 2px 8px;\n  background: color-mix(in srgb, var(--mj-status-success) 10%, var(--mj-bg-surface));\n  color: var(--mj-status-success);\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: var(--mj-text-secondary);\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: var(--mj-bg-surface-card);\n}\n\n.view-item.selected {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.view-item input[type=\"checkbox\"] {\n  width: 16px;\n  height: 16px;\n  cursor: pointer;\n}\n\n.view-icon {\n  color: var(--mj-text-secondary);\n  font-size: 16px;\n}\n\n.view-name {\n  flex: 1;\n  font-size: 14px;\n  color: var(--mj-text-primary);\n}\n"] }]
-    }], () => [{ type: i1.SharedService }, { type: i0.ChangeDetectorRef }], { ListID: [{
+        args: [{ standalone: false, 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    <div class=\"add-dropdown-wrapper\">\n      <button mjButton variant=\"primary\" class=\"add-btn\" (click)=\"toggleAddDropdown()\">\n        <span class=\"fa-solid fa-plus\"></span>\n        Add to List\n        <span class=\"fa-solid fa-chevron-down add-dropdown-arrow\"></span>\n      </button>\n      @if (showAddDropdown) {\n        <div class=\"add-dropdown-panel\">\n          @for (option of addOptions; track option.Text) {\n            <div class=\"add-dropdown-item\" (click)=\"onDropdownItemClick(option)\">\n              <span class=\"add-dropdown-item-text\">{{ option.Text }}</span>\n              @if (option.Description) {\n                <span class=\"add-dropdown-item-desc\">{{ option.Description }}</span>\n              }\n            </div>\n          }\n        </div>\n      }\n    </div>\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 mjButton\n            (click)=\"openRemoveDialog()\"\n            variant=\"flat\"\n            class=\"toolbar-button remove-btn\">\n            <span class=\"fa-solid fa-trash\"></span>\n            Remove from List\n          </button>\n        }\n        <button mjButton\n          (click)=\"onRefreshClick()\"\n          variant=\"flat\"\n          class=\"toolbar-button\">\n          <span class=\"fa-solid fa-rotate\"></span>\n          Refresh\n        </button>\n        <button mjButton\n          (click)=\"onExportClick()\"\n          variant=\"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@if (showRemoveDialog) {\n  <mj-dialog\n    [Visible]=\"true\"\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            <mj-progress-bar\n              [Value]=\"removeProgressPercent\"\n              class=\"progress-bar\">\n            </mj-progress-bar>\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    <mj-dialog-actions>\n      <button mjButton\n        (click)=\"confirmRemoveFromList()\"\n        [disabled]=\"isRemoving\"\n        variant=\"danger\">\n        Remove\n      </button>\n      <button mjButton\n        (click)=\"closeRemoveDialog()\"\n        [disabled]=\"isRemoving\"\n        variant=\"outline\">\n        Cancel\n      </button>\n    </mj-dialog-actions>\n  </mj-dialog>\n}\n\n<!-- Add Records Dialog -->\n@if (showAddRecordsDialog) {\n  <mj-dialog\n    [Visible]=\"true\"\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            <mj-progress-bar\n              [Value]=\"addProgressPercent\"\n              class=\"progress-bar\">\n            </mj-progress-bar>\n          }\n        </div>\n      } @else {\n        <!-- Search Input -->\n        <div class=\"search-section\">\n          <div class=\"search-input-wrapper\">\n            <span class=\"fa-solid fa-search search-icon\"></span>\n            <input\n              class=\"mj-input search-input\"\n              type=\"text\"\n              [placeholder]=\"'Search ' + (listRecord?.Entity || 'records') + '...'\"\n              [value]=\"addRecordsSearchFilter\"\n              (input)=\"onAddRecordsSearchInputEvent($event)\" />\n          </div>\n          <span class=\"search-hint\">Type at least 2 characters to search</span>\n        </div>\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 mjButton variant=\"flat\" size=\"sm\" (click)=\"selectAllAddable()\">Select All</button>\n              <button mjButton variant=\"flat\" size=\"sm\" (click)=\"deselectAllAddable()\">Deselect All</button>\n              <span class=\"selection-info\">{{ selectedAddableRecords.length }} selected</span>\n            </div>\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    <mj-dialog-actions>\n      <button mjButton\n        (click)=\"confirmAddRecords()\"\n        [disabled]=\"addDialogSaving || selectedAddableRecords.length === 0\"\n        variant=\"primary\">\n        Add {{ selectedAddableRecords.length > 0 ? selectedAddableRecords.length : '' }} Record{{ selectedAddableRecords.length !== 1 ? 's' : '' }}\n      </button>\n      <button mjButton\n        (click)=\"closeAddRecordsDialog()\"\n        [disabled]=\"addDialogSaving\"\n        variant=\"outline\">\n        Cancel\n      </button>\n    </mj-dialog-actions>\n  </mj-dialog>\n}\n\n<!-- Add From View Dialog -->\n@if (showAddFromViewDialog) {\n  <mj-dialog\n    [Visible]=\"true\"\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          <mj-progress-bar\n            [Value]=\"addFromViewProgressPercent\"\n            class=\"progress-bar\">\n          </mj-progress-bar>\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        <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    <mj-dialog-actions>\n      <button mjButton\n        (click)=\"confirmAddFromView()\"\n        [disabled]=\"showAddFromViewLoader || userViewsToAdd.length === 0\"\n        variant=\"primary\">\n        Add from {{ userViewsToAdd.length }} View{{ userViewsToAdd.length !== 1 ? 's' : '' }}\n      </button>\n      <button mjButton\n        (click)=\"closeAddFromViewDialog()\"\n        [disabled]=\"showAddFromViewLoader\"\n        variant=\"outline\">\n        Cancel\n      </button>\n    </mj-dialog-actions>\n  </mj-dialog>\n}\n", styles: [".list-detail-container {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  padding: 20px;\n  background: var(--mj-bg-surface-card);\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: var(--mj-text-primary);\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: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\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: var(--mj-text-primary);\n}\n\n.selection-count {\n  font-size: 14px;\n  color: var(--mj-text-secondary);\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: var(--mj-status-error);\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: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 0 0 8px 8px;\n  overflow: hidden;\n}\n\n/* Add Dropdown Button */\n.add-dropdown-wrapper {\n  position: relative;\n}\n\n.add-btn {\n  font-size: 16px;\n  padding: 8px 25px;\n  border-radius: 10px;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.add-dropdown-arrow {\n  font-size: 12px;\n  margin-left: 4px;\n}\n\n.add-dropdown-panel {\n  position: absolute;\n  top: 100%;\n  right: 0;\n  margin-top: 4px;\n  min-width: 240px;\n  background: var(--mj-bg-surface-elevated);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);\n  z-index: 100;\n  overflow: hidden;\n}\n\n.add-dropdown-item {\n  display: flex;\n  flex-direction: column;\n  padding: 10px 16px;\n  cursor: pointer;\n  transition: background-color 0.15s;\n}\n\n.add-dropdown-item:hover {\n  background: var(--mj-bg-surface-hover);\n}\n\n.add-dropdown-item-text {\n  font-size: 14px;\n  font-weight: 500;\n  color: var(--mj-text-primary);\n}\n\n.add-dropdown-item-desc {\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n  margin-top: 2px;\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: var(--mj-status-warning);\n  margin-bottom: 16px;\n  display: block;\n}\n\n.dialog-message p {\n  margin: 8px 0;\n  font-size: 15px;\n  color: var(--mj-text-primary);\n}\n\n.dialog-note {\n  color: var(--mj-text-secondary) !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 var(--mj-border-default);\n  margin-bottom: 12px;\n}\n\n.search-input-wrapper {\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n\n.search-input-wrapper .search-icon {\n  position: absolute;\n  left: 10px;\n  color: var(--mj-text-disabled);\n  font-size: 14px;\n  pointer-events: none;\n}\n\n.search-input-wrapper .search-input {\n  width: 100%;\n  padding-left: 32px;\n}\n\n.search-hint {\n  display: block;\n  font-size: 12px;\n  color: var(--mj-text-disabled);\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: var(--mj-text-disabled);\n}\n\n.empty-icon {\n  font-size: 32px;\n  margin-bottom: 12px;\n  color: var(--mj-border-strong);\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 var(--mj-border-default);\n  margin-bottom: 8px;\n}\n\n.selection-info {\n  margin-left: auto;\n  font-size: 13px;\n  color: var(--mj-text-secondary);\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: var(--mj-bg-surface-card);\n}\n\n.record-item.selected {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.record-item.in-list {\n  background: var(--mj-bg-surface-card);\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: var(--mj-status-success);\n  font-size: 14px;\n}\n\n.record-name {\n  flex: 1;\n  font-size: 14px;\n  color: var(--mj-text-primary);\n}\n\n.in-list-badge {\n  font-size: 11px;\n  padding: 2px 8px;\n  background: color-mix(in srgb, var(--mj-status-success) 10%, var(--mj-bg-surface));\n  color: var(--mj-status-success);\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: var(--mj-text-secondary);\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: var(--mj-bg-surface-card);\n}\n\n.view-item.selected {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.view-item input[type=\"checkbox\"] {\n  width: 16px;\n  height: 16px;\n  cursor: pointer;\n}\n\n.view-icon {\n  color: var(--mj-text-secondary);\n  font-size: 16px;\n}\n\n.view-name {\n  flex: 1;\n  font-size: 14px;\n  color: var(--mj-text-primary);\n}\n"] }]
+    }], () => [{ type: i1.SharedService }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], { ListID: [{
             type: Input
         }], listDetailGrid: [{
             type: ViewChild,
             args: ['listDetailGrid']
+        }], onDocumentClick: [{
+            type: HostListener,
+            args: ['document:click', ['$event']]
         }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SingleListDetailComponent, { className: "SingleListDetailComponent", filePath: "src/lib/single-list-detail/single-list-detail.component.ts", lineNumber: 27 }); })();
 //# sourceMappingURL=single-list-detail.component.js.map