@memberjunction/ng-dashboards 3.3.0 → 4.0.0

package/dist/Lists/components/lists-operations-resource.component.js

@@ -13,20 +13,19 @@ import { Subject } from 'rxjs';
 import * as i0 from "@angular/core";
 import * as i1 from "../services/list-set-operations.service";
 import * as i2 from "@memberjunction/ng-notifications";
-import * as i3 from "@angular/common";
-import * as i4 from "@angular/forms";
-import * as i5 from "@memberjunction/ng-shared-generic";
-import * as i6 from "./venn-diagram/venn-diagram.component";
-function ListsOperationsResource_button_7_Template(rf, ctx) { if (rf & 1) {
+import * as i3 from "@angular/forms";
+import * as i4 from "@memberjunction/ng-shared-generic";
+import * as i5 from "./venn-diagram/venn-diagram.component";
+function ListsOperationsResource_Conditional_7_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "button", 35);
-    i0.ɵɵlistener("click", function ListsOperationsResource_button_7_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.clearAllSelections()); });
+    i0.ɵɵlistener("click", function ListsOperationsResource_Conditional_7_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.clearAllSelections()); });
     i0.ɵɵelement(1, "i", 36);
     i0.ɵɵtext(2, " Clear ");
     i0.ɵɵelementEnd();
 } }
-function ListsOperationsResource_span_15_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 37);
+function ListsOperationsResource_Conditional_15_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 10);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -34,8 +33,8 @@ function ListsOperationsResource_span_15_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate2(" ", ctx_r1.selectedLists.length, "/", ctx_r1.maxLists, " ");
 } }
-function ListsOperationsResource_option_23_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "option", 38);
+function ListsOperationsResource_For_24_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "option", 16);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -44,19 +43,19 @@ function ListsOperationsResource_option_23_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate2(" ", entity_r3.name, " (", entity_r3.listCount, ") ");
 } }
-function ListsOperationsResource_div_25_Template(rf, ctx) { if (rf & 1) {
+function ListsOperationsResource_For_27_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 39);
-    i0.ɵɵelement(1, "div", 40);
-    i0.ɵɵelementStart(2, "div", 41)(3, "span", 42);
+    i0.ɵɵelementStart(0, "div", 18);
+    i0.ɵɵelement(1, "div", 37);
+    i0.ɵɵelementStart(2, "div", 38)(3, "span", 39);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "span", 43);
+    i0.ɵɵelementStart(5, "span", 40);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(7, "button", 44);
-    i0.ɵɵlistener("click", function ListsOperationsResource_div_25_Template_button_click_7_listener() { const i_r5 = i0.ɵɵrestoreView(_r4).index; const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.removeList(i_r5)); });
-    i0.ɵɵelement(8, "i", 45);
+    i0.ɵɵelementStart(7, "button", 41);
+    i0.ɵɵlistener("click", function ListsOperationsResource_For_27_Template_button_click_7_listener() { const ɵ$index_54_r5 = i0.ɵɵrestoreView(_r4).$index; const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.removeList(ɵ$index_54_r5)); });
+    i0.ɵɵelement(8, "i", 42);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const item_r6 = ctx.$implicit;
@@ -67,14 +66,14 @@ function ListsOperationsResource_div_25_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(item_r6.entityName);
 } }
-function ListsOperationsResource_div_26_div_4_div_3_Template(rf, ctx) { if (rf & 1) {
+function ListsOperationsResource_Conditional_28_Conditional_4_For_4_Template(rf, ctx) { if (rf & 1) {
     const _r9 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 55);
-    i0.ɵɵlistener("click", function ListsOperationsResource_div_26_div_4_div_3_Template_div_click_0_listener() { const list_r10 = i0.ɵɵrestoreView(_r9).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.addList(list_r10)); });
-    i0.ɵɵelementStart(1, "span", 56);
+    i0.ɵɵelementStart(0, "div", 50);
+    i0.ɵɵlistener("click", function ListsOperationsResource_Conditional_28_Conditional_4_For_4_Template_div_click_0_listener() { const list_r10 = i0.ɵɵrestoreView(_r9).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.addList(list_r10)); });
+    i0.ɵɵelementStart(1, "span", 51);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 57);
+    i0.ɵɵelementStart(3, "span", 52);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -84,39 +83,39 @@ function ListsOperationsResource_div_26_div_4_div_3_Template(rf, ctx) { if (rf &
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(list_r10.Entity);
 } }
-function ListsOperationsResource_div_26_div_4_Template(rf, ctx) { if (rf & 1) {
+function ListsOperationsResource_Conditional_28_Conditional_4_Template(rf, ctx) { if (rf & 1) {
     const _r8 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 51)(1, "div", 52);
-    i0.ɵɵlistener("click", function ListsOperationsResource_div_26_div_4_Template_div_click_1_listener() { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.showListDropdown = false); });
+    i0.ɵɵelementStart(0, "div", 46)(1, "div", 47);
+    i0.ɵɵlistener("click", function ListsOperationsResource_Conditional_28_Conditional_4_Template_div_click_1_listener() { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.showListDropdown = false); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(2, "div", 53);
-    i0.ɵɵtemplate(3, ListsOperationsResource_div_26_div_4_div_3_Template, 5, 2, "div", 54);
+    i0.ɵɵelementStart(2, "div", 48);
+    i0.ɵɵrepeaterCreate(3, ListsOperationsResource_Conditional_28_Conditional_4_For_4_Template, 5, 2, "div", 49, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(3);
-    i0.ɵɵproperty("ngForOf", ctx_r1.filteredAvailableLists);
+    i0.ɵɵrepeater(ctx_r1.filteredAvailableLists);
 } }
-function ListsOperationsResource_div_26_Template(rf, ctx) { if (rf & 1) {
+function ListsOperationsResource_Conditional_28_Template(rf, ctx) { if (rf & 1) {
     const _r7 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 46)(1, "div", 47);
-    i0.ɵɵelement(2, "i", 48);
-    i0.ɵɵelementStart(3, "input", 49);
-    i0.ɵɵtwoWayListener("ngModelChange", function ListsOperationsResource_div_26_Template_input_ngModelChange_3_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.listSearchTerm, $event) || (ctx_r1.listSearchTerm = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵlistener("ngModelChange", function ListsOperationsResource_div_26_Template_input_ngModelChange_3_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.filterAvailableLists()); })("focus", function ListsOperationsResource_div_26_Template_input_focus_3_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.showListDropdown = true); });
+    i0.ɵɵelementStart(0, "div", 19)(1, "div", 43);
+    i0.ɵɵelement(2, "i", 44);
+    i0.ɵɵelementStart(3, "input", 45);
+    i0.ɵɵtwoWayListener("ngModelChange", function ListsOperationsResource_Conditional_28_Template_input_ngModelChange_3_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.listSearchTerm, $event) || (ctx_r1.listSearchTerm = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("ngModelChange", function ListsOperationsResource_Conditional_28_Template_input_ngModelChange_3_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.filterAvailableLists()); })("focus", function ListsOperationsResource_Conditional_28_Template_input_focus_3_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.showListDropdown = true); });
     i0.ɵɵelementEnd()();
-    i0.ɵɵtemplate(4, ListsOperationsResource_div_26_div_4_Template, 4, 1, "div", 50);
+    i0.ɵɵconditionalCreate(4, ListsOperationsResource_Conditional_28_Conditional_4_Template, 5, 0, "div", 46);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance(3);
     i0.ɵɵtwoWayProperty("ngModel", ctx_r1.listSearchTerm);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r1.showListDropdown && ctx_r1.filteredAvailableLists.length > 0);
+    i0.ɵɵconditional(ctx_r1.showListDropdown && ctx_r1.filteredAvailableLists.length > 0 ? 4 : -1);
 } }
-function ListsOperationsResource_div_27_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 58);
-    i0.ɵɵelement(1, "i", 59);
+function ListsOperationsResource_Conditional_29_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 20);
+    i0.ɵɵelement(1, "i", 53);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -124,9 +123,9 @@ function ListsOperationsResource_div_27_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1(" Maximum ", ctx_r1.maxLists, " lists can be compared ");
 } }
-function ListsOperationsResource_div_28_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 60);
-    i0.ɵɵelement(1, "i", 59);
+function ListsOperationsResource_Conditional_30_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 21);
+    i0.ɵɵelement(1, "i", 53);
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3, "Comparing lists of type: ");
     i0.ɵɵelementStart(4, "strong");
@@ -137,26 +136,26 @@ function ListsOperationsResource_div_28_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance(5);
     i0.ɵɵtextInterpolate(ctx_r1.selectedLists[0].entityName);
 } }
-function ListsOperationsResource_div_29_Template(rf, ctx) { if (rf & 1) {
+function ListsOperationsResource_Conditional_31_Template(rf, ctx) { if (rf & 1) {
     const _r11 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 61)(1, "h4");
+    i0.ɵɵelementStart(0, "div", 22)(1, "h4");
     i0.ɵɵtext(2, "Quick Operations");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 62)(4, "button", 63);
-    i0.ɵɵlistener("click", function ListsOperationsResource_div_29_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.performOperation("union")); });
-    i0.ɵɵelement(5, "i", 64);
+    i0.ɵɵelementStart(3, "div", 54)(4, "button", 55);
+    i0.ɵɵlistener("click", function ListsOperationsResource_Conditional_31_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.performOperation("union")); });
+    i0.ɵɵelement(5, "i", 56);
     i0.ɵɵelementStart(6, "span");
     i0.ɵɵtext(7, "Union All");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(8, "button", 63);
-    i0.ɵɵlistener("click", function ListsOperationsResource_div_29_Template_button_click_8_listener() { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.performOperation("intersection")); });
-    i0.ɵɵelement(9, "i", 65);
+    i0.ɵɵelementStart(8, "button", 55);
+    i0.ɵɵlistener("click", function ListsOperationsResource_Conditional_31_Template_button_click_8_listener() { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.performOperation("intersection")); });
+    i0.ɵɵelement(9, "i", 57);
     i0.ɵɵelementStart(10, "span");
     i0.ɵɵtext(11, "Intersection");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(12, "button", 63);
-    i0.ɵɵlistener("click", function ListsOperationsResource_div_29_Template_button_click_12_listener() { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.performOperation("symmetric_difference")); });
-    i0.ɵɵelement(13, "i", 66);
+    i0.ɵɵelementStart(12, "button", 55);
+    i0.ɵɵlistener("click", function ListsOperationsResource_Conditional_31_Template_button_click_12_listener() { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.performOperation("symmetric_difference")); });
+    i0.ɵɵelement(13, "i", 58);
     i0.ɵɵelementStart(14, "span");
     i0.ɵɵtext(15, "Unique Each");
     i0.ɵɵelementEnd()()()();
@@ -169,18 +168,18 @@ function ListsOperationsResource_div_29_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance(4);
     i0.ɵɵproperty("disabled", ctx_r1.isCalculating);
 } }
-function ListsOperationsResource_mj_venn_diagram_31_Template(rf, ctx) { if (rf & 1) {
+function ListsOperationsResource_Conditional_33_Template(rf, ctx) { if (rf & 1) {
     const _r12 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-venn-diagram", 67);
-    i0.ɵɵlistener("regionClick", function ListsOperationsResource_mj_venn_diagram_31_Template_mj_venn_diagram_regionClick_0_listener($event) { i0.ɵɵrestoreView(_r12); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onRegionClick($event)); });
+    i0.ɵɵelementStart(0, "mj-venn-diagram", 59);
+    i0.ɵɵlistener("regionClick", function ListsOperationsResource_Conditional_33_Template_mj_venn_diagram_regionClick_0_listener($event) { i0.ɵɵrestoreView(_r12); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onRegionClick($event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵproperty("data", ctx_r1.vennData)("selectedRegion", ctx_r1.selectedRegion);
 } }
-function ListsOperationsResource_div_32_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 68)(1, "div", 69);
-    i0.ɵɵelement(2, "i", 70);
+function ListsOperationsResource_Conditional_34_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 25)(1, "div", 60);
+    i0.ɵɵelement(2, "i", 61);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(3, "h3");
     i0.ɵɵtext(4, "Add Lists to Compare");
@@ -189,13 +188,13 @@ function ListsOperationsResource_div_32_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(6, "Select 2-4 lists from the same entity to visualize their overlaps and perform set operations.");
     i0.ɵɵelementEnd()();
 } }
-function ListsOperationsResource_div_33_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 71);
-    i0.ɵɵelement(1, "mj-loading", 72);
+function ListsOperationsResource_Conditional_35_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 26);
+    i0.ɵɵelement(1, "mj-loading", 62);
     i0.ɵɵelementEnd();
 } }
-function ListsOperationsResource_div_39_div_16_div_4_span_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 94);
+function ListsOperationsResource_Conditional_41_Conditional_16_For_5_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 78);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -203,69 +202,69 @@ function ListsOperationsResource_div_39_div_16_div_4_span_4_Template(rf, ctx) {
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(record_r15.secondaryInfo);
 } }
-function ListsOperationsResource_div_39_div_16_div_4_Template(rf, ctx) { if (rf & 1) {
+function ListsOperationsResource_Conditional_41_Conditional_16_For_5_Template(rf, ctx) { if (rf & 1) {
     const _r14 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 88)(1, "div", 89)(2, "span", 90);
+    i0.ɵɵelementStart(0, "div", 74)(1, "div", 76)(2, "span", 77);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(4, ListsOperationsResource_div_39_div_16_div_4_span_4_Template, 2, 1, "span", 91);
+    i0.ɵɵconditionalCreate(4, ListsOperationsResource_Conditional_41_Conditional_16_For_5_Conditional_4_Template, 2, 1, "span", 78);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "button", 92);
-    i0.ɵɵlistener("click", function ListsOperationsResource_div_39_div_16_div_4_Template_button_click_5_listener() { const record_r15 = i0.ɵɵrestoreView(_r14).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.openRecord(record_r15)); });
-    i0.ɵɵelement(6, "i", 93);
+    i0.ɵɵelementStart(5, "button", 79);
+    i0.ɵɵlistener("click", function ListsOperationsResource_Conditional_41_Conditional_16_For_5_Template_button_click_5_listener() { const record_r15 = i0.ɵɵrestoreView(_r14).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.openRecord(record_r15)); });
+    i0.ɵɵelement(6, "i", 80);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const record_r15 = ctx.$implicit;
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate(record_r15.displayName);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", record_r15.secondaryInfo);
+    i0.ɵɵconditional(record_r15.secondaryInfo ? 4 : -1);
 } }
-function ListsOperationsResource_div_39_div_16_div_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 95);
-    i0.ɵɵelement(1, "mj-loading", 96);
+function ListsOperationsResource_Conditional_41_Conditional_16_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 75);
+    i0.ɵɵelement(1, "mj-loading", 81);
     i0.ɵɵelementEnd();
 } }
-function ListsOperationsResource_div_39_div_16_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 84)(1, "h5");
+function ListsOperationsResource_Conditional_41_Conditional_16_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 72)(1, "h5");
     i0.ɵɵtext(2, "Preview (first 10)");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 85);
-    i0.ɵɵtemplate(4, ListsOperationsResource_div_39_div_16_div_4_Template, 7, 2, "div", 86);
+    i0.ɵɵelementStart(3, "div", 73);
+    i0.ɵɵrepeaterCreate(4, ListsOperationsResource_Conditional_41_Conditional_16_For_5_Template, 7, 2, "div", 74, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(5, ListsOperationsResource_div_39_div_16_div_5_Template, 2, 0, "div", 87);
+    i0.ɵɵconditionalCreate(6, ListsOperationsResource_Conditional_41_Conditional_16_Conditional_6_Template, 2, 0, "div", 75);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(4);
-    i0.ɵɵproperty("ngForOf", ctx_r1.previewRecordsDisplay);
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r1.loadingPreview);
+    i0.ɵɵrepeater(ctx_r1.previewRecordsDisplay);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r1.loadingPreview ? 6 : -1);
 } }
-function ListsOperationsResource_div_39_Template(rf, ctx) { if (rf & 1) {
+function ListsOperationsResource_Conditional_41_Template(rf, ctx) { if (rf & 1) {
     const _r13 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 73)(1, "div", 74)(2, "span", 75);
+    i0.ɵɵelementStart(0, "div", 29)(1, "div", 63)(2, "span", 64);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "span", 76);
+    i0.ɵɵelementStart(4, "span", 65);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(6, "div", 77)(7, "button", 78);
-    i0.ɵɵlistener("click", function ListsOperationsResource_div_39_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r13); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.createListFromSelection()); });
-    i0.ɵɵelement(8, "i", 79);
+    i0.ɵɵelementStart(6, "div", 66)(7, "button", 67);
+    i0.ɵɵlistener("click", function ListsOperationsResource_Conditional_41_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r13); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.createListFromSelection()); });
+    i0.ɵɵelement(8, "i", 68);
     i0.ɵɵtext(9, " Create New List ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(10, "button", 80);
-    i0.ɵɵlistener("click", function ListsOperationsResource_div_39_Template_button_click_10_listener() { i0.ɵɵrestoreView(_r13); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.addToExistingList()); });
-    i0.ɵɵelement(11, "i", 81);
+    i0.ɵɵelementStart(10, "button", 69);
+    i0.ɵɵlistener("click", function ListsOperationsResource_Conditional_41_Template_button_click_10_listener() { i0.ɵɵrestoreView(_r13); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.addToExistingList()); });
+    i0.ɵɵelement(11, "i", 70);
     i0.ɵɵtext(12, " Add to List ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(13, "button", 80);
-    i0.ɵɵlistener("click", function ListsOperationsResource_div_39_Template_button_click_13_listener() { i0.ɵɵrestoreView(_r13); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.exportToExcel()); });
-    i0.ɵɵelement(14, "i", 82);
+    i0.ɵɵelementStart(13, "button", 69);
+    i0.ɵɵlistener("click", function ListsOperationsResource_Conditional_41_Template_button_click_13_listener() { i0.ɵɵrestoreView(_r13); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.exportToExcel()); });
+    i0.ɵɵelement(14, "i", 71);
     i0.ɵɵtext(15, " Export ");
     i0.ɵɵelementEnd()();
-    i0.ɵɵtemplate(16, ListsOperationsResource_div_39_div_16_Template, 6, 2, "div", 83);
+    i0.ɵɵconditionalCreate(16, ListsOperationsResource_Conditional_41_Conditional_16_Template, 7, 1, "div", 72);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -274,24 +273,24 @@ function ListsOperationsResource_div_39_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1("", ctx_r1.selectedRegion.size, " records");
     i0.ɵɵadvance(11);
-    i0.ɵɵproperty("ngIf", ctx_r1.previewRecordsDisplay.length > 0);
+    i0.ɵɵconditional(ctx_r1.previewRecordsDisplay.length > 0 ? 16 : -1);
 } }
-function ListsOperationsResource_div_40_Template(rf, ctx) { if (rf & 1) {
+function ListsOperationsResource_Conditional_42_Template(rf, ctx) { if (rf & 1) {
     const _r16 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 97)(1, "div", 98)(2, "span", 99);
+    i0.ɵɵelementStart(0, "div", 30)(1, "div", 82)(2, "span", 83);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "span", 100);
+    i0.ɵɵelementStart(4, "span", 84);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(6, "div", 77)(7, "button", 78);
-    i0.ɵɵlistener("click", function ListsOperationsResource_div_40_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r16); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.createListFromResult()); });
-    i0.ɵɵelement(8, "i", 79);
+    i0.ɵɵelementStart(6, "div", 66)(7, "button", 67);
+    i0.ɵɵlistener("click", function ListsOperationsResource_Conditional_42_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r16); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.createListFromResult()); });
+    i0.ɵɵelement(8, "i", 68);
     i0.ɵɵtext(9, " Create New List ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(10, "button", 80);
-    i0.ɵɵlistener("click", function ListsOperationsResource_div_40_Template_button_click_10_listener() { i0.ɵɵrestoreView(_r16); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.addResultToExistingList()); });
-    i0.ɵɵelement(11, "i", 81);
+    i0.ɵɵelementStart(10, "button", 69);
+    i0.ɵɵlistener("click", function ListsOperationsResource_Conditional_42_Template_button_click_10_listener() { i0.ɵɵrestoreView(_r16); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.addResultToExistingList()); });
+    i0.ɵɵelement(11, "i", 70);
     i0.ɵɵtext(12, " Add to List ");
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
@@ -301,54 +300,54 @@ function ListsOperationsResource_div_40_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1("", ctx_r1.lastOperationResult.resultCount, " records");
 } }
-function ListsOperationsResource_div_41_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 101);
-    i0.ɵɵelement(1, "i", 102);
+function ListsOperationsResource_Conditional_43_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 31);
+    i0.ɵɵelement(1, "i", 85);
     i0.ɵɵelementStart(2, "p");
     i0.ɵɵtext(3, "Click a region in the diagram or run an operation to see results");
     i0.ɵɵelementEnd()();
 } }
-function ListsOperationsResource_div_42_Template(rf, ctx) { if (rf & 1) {
+function ListsOperationsResource_Conditional_44_Template(rf, ctx) { if (rf & 1) {
     const _r17 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 103);
-    i0.ɵɵlistener("click", function ListsOperationsResource_div_42_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r17); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.cancelCreateDialog()); });
+    i0.ɵɵelementStart(0, "div", 86);
+    i0.ɵɵlistener("click", function ListsOperationsResource_Conditional_44_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r17); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.cancelCreateDialog()); });
     i0.ɵɵelementEnd();
 } }
-function ListsOperationsResource_div_43_i_20_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 116);
+function ListsOperationsResource_Conditional_45_Conditional_20_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 96);
 } }
-function ListsOperationsResource_div_43_Template(rf, ctx) { if (rf & 1) {
+function ListsOperationsResource_Conditional_45_Template(rf, ctx) { if (rf & 1) {
     const _r18 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 104)(1, "div", 105)(2, "h3");
+    i0.ɵɵelementStart(0, "div", 33)(1, "div", 87)(2, "h3");
     i0.ɵɵtext(3, "Create New List from Selection");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "button", 106);
-    i0.ɵɵlistener("click", function ListsOperationsResource_div_43_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r18); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.cancelCreateDialog()); });
-    i0.ɵɵelement(5, "i", 45);
+    i0.ɵɵelementStart(4, "button", 88);
+    i0.ɵɵlistener("click", function ListsOperationsResource_Conditional_45_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r18); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.cancelCreateDialog()); });
+    i0.ɵɵelement(5, "i", 42);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(6, "div", 107)(7, "div", 108)(8, "label");
+    i0.ɵɵelementStart(6, "div", 89)(7, "div", 90)(8, "label");
     i0.ɵɵtext(9, "List Name *");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(10, "input", 109);
-    i0.ɵɵtwoWayListener("ngModelChange", function ListsOperationsResource_div_43_Template_input_ngModelChange_10_listener($event) { i0.ɵɵrestoreView(_r18); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.newListName, $event) || (ctx_r1.newListName = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementStart(10, "input", 91);
+    i0.ɵɵtwoWayListener("ngModelChange", function ListsOperationsResource_Conditional_45_Template_input_ngModelChange_10_listener($event) { i0.ɵɵrestoreView(_r18); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.newListName, $event) || (ctx_r1.newListName = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(11, "div", 108)(12, "label");
+    i0.ɵɵelementStart(11, "div", 90)(12, "label");
     i0.ɵɵtext(13, "Description");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(14, "textarea", 110);
-    i0.ɵɵtwoWayListener("ngModelChange", function ListsOperationsResource_div_43_Template_textarea_ngModelChange_14_listener($event) { i0.ɵɵrestoreView(_r18); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.newListDescription, $event) || (ctx_r1.newListDescription = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementStart(14, "textarea", 92);
+    i0.ɵɵtwoWayListener("ngModelChange", function ListsOperationsResource_Conditional_45_Template_textarea_ngModelChange_14_listener($event) { i0.ɵɵrestoreView(_r18); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.newListDescription, $event) || (ctx_r1.newListDescription = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(15, "div", 111);
-    i0.ɵɵelement(16, "i", 59);
+    i0.ɵɵelementStart(15, "div", 93);
+    i0.ɵɵelement(16, "i", 53);
     i0.ɵɵtext(17);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(18, "div", 112)(19, "button", 113);
-    i0.ɵɵlistener("click", function ListsOperationsResource_div_43_Template_button_click_19_listener() { i0.ɵɵrestoreView(_r18); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.confirmCreateList()); });
-    i0.ɵɵtemplate(20, ListsOperationsResource_div_43_i_20_Template, 1, 0, "i", 114);
+    i0.ɵɵelementStart(18, "div", 94)(19, "button", 95);
+    i0.ɵɵlistener("click", function ListsOperationsResource_Conditional_45_Template_button_click_19_listener() { i0.ɵɵrestoreView(_r18); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.confirmCreateList()); });
+    i0.ɵɵconditionalCreate(20, ListsOperationsResource_Conditional_45_Conditional_20_Template, 1, 0, "i", 96);
     i0.ɵɵtext(21);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(22, "button", 115);
-    i0.ɵɵlistener("click", function ListsOperationsResource_div_43_Template_button_click_22_listener() { i0.ɵɵrestoreView(_r18); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.cancelCreateDialog()); });
+    i0.ɵɵelementStart(22, "button", 97);
+    i0.ɵɵlistener("click", function ListsOperationsResource_Conditional_45_Template_button_click_22_listener() { i0.ɵɵrestoreView(_r18); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.cancelCreateDialog()); });
     i0.ɵɵtext(23, "Cancel");
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
@@ -362,27 +361,27 @@ function ListsOperationsResource_div_43_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("disabled", !ctx_r1.newListName || ctx_r1.isSaving);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r1.isSaving);
+    i0.ɵɵconditional(ctx_r1.isSaving ? 20 : -1);
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r1.isSaving ? "Creating..." : "Create List", " ");
 } }
-function ListsOperationsResource_div_44_Template(rf, ctx) { if (rf & 1) {
+function ListsOperationsResource_Conditional_46_Template(rf, ctx) { if (rf & 1) {
     const _r19 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 103);
-    i0.ɵɵlistener("click", function ListsOperationsResource_div_44_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r19); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.cancelAddToListDialog()); });
+    i0.ɵɵelementStart(0, "div", 86);
+    i0.ɵɵlistener("click", function ListsOperationsResource_Conditional_46_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r19); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.cancelAddToListDialog()); });
     i0.ɵɵelementEnd();
 } }
-function ListsOperationsResource_div_45_div_14_Template(rf, ctx) { if (rf & 1) {
+function ListsOperationsResource_Conditional_47_For_15_Template(rf, ctx) { if (rf & 1) {
     const _r21 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 124);
-    i0.ɵɵlistener("click", function ListsOperationsResource_div_45_div_14_Template_div_click_0_listener() { const list_r22 = i0.ɵɵrestoreView(_r21).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.selectTargetList(list_r22.ID)); });
-    i0.ɵɵelementStart(1, "div", 125);
-    i0.ɵɵelement(2, "input", 126);
+    i0.ɵɵelementStart(0, "div", 104);
+    i0.ɵɵlistener("click", function ListsOperationsResource_Conditional_47_For_15_Template_div_click_0_listener() { const list_r22 = i0.ɵɵrestoreView(_r21).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.selectTargetList(list_r22.ID)); });
+    i0.ɵɵelementStart(1, "div", 105);
+    i0.ɵɵelement(2, "input", 106);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 127)(4, "span", 128);
+    i0.ɵɵelementStart(3, "div", 107)(4, "span", 108);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "span", 129);
+    i0.ɵɵelementStart(6, "span", 109);
     i0.ɵɵtext(7);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
@@ -396,9 +395,9 @@ function ListsOperationsResource_div_45_div_14_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(list_r22.Entity);
 } }
-function ListsOperationsResource_div_45_div_15_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 130);
-    i0.ɵɵelement(1, "i", 131);
+function ListsOperationsResource_Conditional_47_Conditional_16_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 103);
+    i0.ɵɵelement(1, "i", 110);
     i0.ɵɵelementStart(2, "p");
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd()();
@@ -407,39 +406,40 @@ function ListsOperationsResource_div_45_div_15_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate(ctx_r1.addToListSearchTerm ? "No lists match your search" : "No other lists available");
 } }
-function ListsOperationsResource_div_45_i_18_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 116);
+function ListsOperationsResource_Conditional_47_Conditional_19_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 96);
 } }
-function ListsOperationsResource_div_45_Template(rf, ctx) { if (rf & 1) {
+function ListsOperationsResource_Conditional_47_Template(rf, ctx) { if (rf & 1) {
     const _r20 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 117)(1, "div", 105)(2, "h3");
+    i0.ɵɵelementStart(0, "div", 34)(1, "div", 87)(2, "h3");
     i0.ɵɵtext(3, "Add to Existing List");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "button", 106);
-    i0.ɵɵlistener("click", function ListsOperationsResource_div_45_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r20); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.cancelAddToListDialog()); });
-    i0.ɵɵelement(5, "i", 45);
+    i0.ɵɵelementStart(4, "button", 88);
+    i0.ɵɵlistener("click", function ListsOperationsResource_Conditional_47_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r20); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.cancelAddToListDialog()); });
+    i0.ɵɵelement(5, "i", 42);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(6, "div", 107)(7, "div", 118);
-    i0.ɵɵelement(8, "i", 59);
+    i0.ɵɵelementStart(6, "div", 89)(7, "div", 98);
+    i0.ɵɵelement(8, "i", 53);
     i0.ɵɵtext(9);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(10, "div", 119);
-    i0.ɵɵelement(11, "i", 48);
-    i0.ɵɵelementStart(12, "input", 120);
-    i0.ɵɵtwoWayListener("ngModelChange", function ListsOperationsResource_div_45_Template_input_ngModelChange_12_listener($event) { i0.ɵɵrestoreView(_r20); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.addToListSearchTerm, $event) || (ctx_r1.addToListSearchTerm = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵlistener("ngModelChange", function ListsOperationsResource_div_45_Template_input_ngModelChange_12_listener() { i0.ɵɵrestoreView(_r20); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.filterAddToListOptions()); });
+    i0.ɵɵelementStart(10, "div", 99);
+    i0.ɵɵelement(11, "i", 44);
+    i0.ɵɵelementStart(12, "input", 100);
+    i0.ɵɵtwoWayListener("ngModelChange", function ListsOperationsResource_Conditional_47_Template_input_ngModelChange_12_listener($event) { i0.ɵɵrestoreView(_r20); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.addToListSearchTerm, $event) || (ctx_r1.addToListSearchTerm = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("ngModelChange", function ListsOperationsResource_Conditional_47_Template_input_ngModelChange_12_listener() { i0.ɵɵrestoreView(_r20); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.filterAddToListOptions()); });
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(13, "div", 121);
-    i0.ɵɵtemplate(14, ListsOperationsResource_div_45_div_14_Template, 8, 5, "div", 122)(15, ListsOperationsResource_div_45_div_15_Template, 4, 1, "div", 123);
+    i0.ɵɵelementStart(13, "div", 101);
+    i0.ɵɵrepeaterCreate(14, ListsOperationsResource_Conditional_47_For_15_Template, 8, 5, "div", 102, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵconditionalCreate(16, ListsOperationsResource_Conditional_47_Conditional_16_Template, 4, 1, "div", 103);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(16, "div", 112)(17, "button", 113);
-    i0.ɵɵlistener("click", function ListsOperationsResource_div_45_Template_button_click_17_listener() { i0.ɵɵrestoreView(_r20); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.confirmAddToList()); });
-    i0.ɵɵtemplate(18, ListsOperationsResource_div_45_i_18_Template, 1, 0, "i", 114);
-    i0.ɵɵtext(19);
+    i0.ɵɵelementStart(17, "div", 94)(18, "button", 95);
+    i0.ɵɵlistener("click", function ListsOperationsResource_Conditional_47_Template_button_click_18_listener() { i0.ɵɵrestoreView(_r20); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.confirmAddToList()); });
+    i0.ɵɵconditionalCreate(19, ListsOperationsResource_Conditional_47_Conditional_19_Template, 1, 0, "i", 96);
+    i0.ɵɵtext(20);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(20, "button", 115);
-    i0.ɵɵlistener("click", function ListsOperationsResource_div_45_Template_button_click_20_listener() { i0.ɵɵrestoreView(_r20); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.cancelAddToListDialog()); });
-    i0.ɵɵtext(21, "Cancel");
+    i0.ɵɵelementStart(21, "button", 97);
+    i0.ɵɵlistener("click", function ListsOperationsResource_Conditional_47_Template_button_click_21_listener() { i0.ɵɵrestoreView(_r20); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.cancelAddToListDialog()); });
+    i0.ɵɵtext(22, "Cancel");
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -448,19 +448,16 @@ function ListsOperationsResource_div_45_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance(3);
     i0.ɵɵtwoWayProperty("ngModel", ctx_r1.addToListSearchTerm);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngForOf", ctx_r1.filteredAddToListOptions);
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r1.filteredAddToListOptions.length === 0);
+    i0.ɵɵrepeater(ctx_r1.filteredAddToListOptions);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r1.filteredAddToListOptions.length === 0 ? 16 : -1);
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("disabled", !ctx_r1.selectedTargetListId || ctx_r1.isSaving);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r1.isSaving);
+    i0.ɵɵconditional(ctx_r1.isSaving ? 19 : -1);
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r1.isSaving ? "Adding..." : "Add to List", " ");
 } }
-export function LoadListsOperationsResource() {
-    // tree shaker
-}
 let ListsOperationsResource = class ListsOperationsResource extends BaseResourceComponent {
     cdr;
     setOperationsService;
@@ -1115,13 +1112,13 @@ let ListsOperationsResource = class ListsOperationsResource extends BaseResource
         }
     }
     static ɵfac = function ListsOperationsResource_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ListsOperationsResource)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i1.ListSetOperationsService), i0.ɵɵdirectiveInject(i2.MJNotificationService)); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ListsOperationsResource, selectors: [["mj-lists-operations-resource"]], features: [i0.ɵɵInheritDefinitionFeature], decls: 46, vars: 20, consts: [[1, "operations-container"], [1, "operations-header"], [1, "header-top"], [1, "header-title"], [1, "fa-solid", "fa-diagram-project"], ["class", "clear-all-btn", "title", "Clear all selections", 3, "click", 4, "ngIf"], [1, "header-subtitle"], [1, "operations-content"], [1, "selection-panel"], [1, "panel-header"], ["class", "list-count", 4, "ngIf"], [1, "entity-filter-section"], [1, "filter-label"], [1, "entity-selector"], [1, "entity-select", 3, "ngModelChange", "ngModel"], ["value", ""], [3, "value", 4, "ngFor", "ngForOf"], [1, "selected-lists"], ["class", "selected-item", 4, "ngFor", "ngForOf"], ["class", "add-list-area", 4, "ngIf"], ["class", "lists-full", 4, "ngIf"], ["class", "entity-note", 4, "ngIf"], ["class", "quick-operations", 4, "ngIf"], [1, "venn-panel"], [3, "data", "selectedRegion", "regionClick", 4, "ngIf"], ["class", "venn-empty", 4, "ngIf"], ["class", "loading-overlay", 4, "ngIf"], [1, "results-panel"], [1, "fa-solid", "fa-crosshairs"], ["class", "region-details", 4, "ngIf"], ["class", "operation-result", 4, "ngIf"], ["class", "results-empty", 4, "ngIf"], ["class", "modal-overlay", 3, "click", 4, "ngIf"], ["class", "modal-dialog", 4, "ngIf"], ["class", "modal-dialog add-to-list-dialog", 4, "ngIf"], ["title", "Clear all selections", 1, "clear-all-btn", 3, "click"], [1, "fa-solid", "fa-xmark"], [1, "list-count"], [3, "value"], [1, "selected-item"], [1, "item-color"], [1, "item-info"], [1, "item-name"], [1, "item-entity"], [1, "remove-btn", 3, "click"], [1, "fa-solid", "fa-times"], [1, "add-list-area"], [1, "add-list-search"], [1, "fa-solid", "fa-search"], ["type", "text", "placeholder", "Search lists to add...", 3, "ngModelChange", "focus", "ngModel"], ["class", "list-dropdown", 4, "ngIf"], [1, "list-dropdown"], [1, "dropdown-backdrop", 3, "click"], [1, "dropdown-content"], ["class", "dropdown-item", 3, "click", 4, "ngFor", "ngForOf"], [1, "dropdown-item", 3, "click"], [1, "dropdown-name"], [1, "dropdown-entity"], [1, "lists-full"], [1, "fa-solid", "fa-info-circle"], [1, "entity-note"], [1, "quick-operations"], [1, "operation-buttons"], [1, "op-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-layer-group"], [1, "fa-solid", "fa-circle-notch"], [1, "fa-solid", "fa-arrows-split-up-and-left"], [3, "regionClick", "data", "selectedRegion"], [1, "venn-empty"], [1, "empty-icon"], [1, "fa-solid", "fa-circle-nodes"], [1, "loading-overlay"], ["text", "Calculating..."], [1, "region-details"], [1, "region-header"], [1, "region-label"], [1, "region-count"], [1, "region-actions"], [1, "action-btn", "primary", 3, "click"], [1, "fa-solid", "fa-plus"], [1, "action-btn", 3, "click"], [1, "fa-solid", "fa-folder-plus"], [1, "fa-solid", "fa-file-excel"], ["class", "record-preview", 4, "ngIf"], [1, "record-preview"], [1, "preview-list"], ["class", "preview-card", 4, "ngFor", "ngForOf"], ["class", "preview-loading", 4, "ngIf"], [1, "preview-card"], [1, "preview-card-content"], [1, "preview-name"], ["class", "preview-secondary", 4, "ngIf"], ["title", "Open record", 1, "preview-open-btn", 3, "click"], [1, "fa-solid", "fa-external-link-alt"], [1, "preview-secondary"], [1, "preview-loading"], ["text", "Loading preview...", "size", "small"], [1, "operation-result"], [1, "result-header"], [1, "result-operation"], [1, "result-count"], [1, "results-empty"], [1, "fa-solid", "fa-hand-pointer"], [1, "modal-overlay", 3, "click"], [1, "modal-dialog"], [1, "modal-header"], [1, "modal-close", 3, "click"], [1, "modal-body"], [1, "form-group"], ["type", "text", "placeholder", "Enter list name", 1, "form-input", 3, "ngModelChange", "ngModel"], ["placeholder", "Optional description", "rows", "3", 1, "form-input", 3, "ngModelChange", "ngModel"], [1, "form-info"], [1, "modal-footer"], [1, "btn-primary", 3, "click", "disabled"], ["class", "fa-solid fa-spinner fa-spin", 4, "ngIf"], [1, "btn-secondary", 3, "click"], [1, "fa-solid", "fa-spinner", "fa-spin"], [1, "modal-dialog", "add-to-list-dialog"], [1, "form-info", 2, "margin-bottom", "16px"], [1, "list-search"], ["type", "text", "placeholder", "Search lists...", 1, "form-input", 3, "ngModelChange", "ngModel"], [1, "list-options"], ["class", "list-option", 3, "selected", "click", 4, "ngFor", "ngForOf"], ["class", "list-options-empty", 4, "ngIf"], [1, "list-option", 3, "click"], [1, "list-option-radio"], ["type", "radio", "name", "targetList", 3, "checked"], [1, "list-option-info"], [1, "list-option-name"], [1, "list-option-entity"], [1, "list-options-empty"], [1, "fa-solid", "fa-inbox"]], template: function ListsOperationsResource_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ListsOperationsResource, selectors: [["mj-lists-operations-resource"]], standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 48, vars: 18, consts: [[1, "operations-container"], [1, "operations-header"], [1, "header-top"], [1, "header-title"], [1, "fa-solid", "fa-diagram-project"], ["title", "Clear all selections", 1, "clear-all-btn"], [1, "header-subtitle"], [1, "operations-content"], [1, "selection-panel"], [1, "panel-header"], [1, "list-count"], [1, "entity-filter-section"], [1, "filter-label"], [1, "entity-selector"], [1, "entity-select", 3, "ngModelChange", "ngModel"], ["value", ""], [3, "value"], [1, "selected-lists"], [1, "selected-item"], [1, "add-list-area"], [1, "lists-full"], [1, "entity-note"], [1, "quick-operations"], [1, "venn-panel"], [3, "data", "selectedRegion"], [1, "venn-empty"], [1, "loading-overlay"], [1, "results-panel"], [1, "fa-solid", "fa-crosshairs"], [1, "region-details"], [1, "operation-result"], [1, "results-empty"], [1, "modal-overlay"], [1, "modal-dialog"], [1, "modal-dialog", "add-to-list-dialog"], ["title", "Clear all selections", 1, "clear-all-btn", 3, "click"], [1, "fa-solid", "fa-xmark"], [1, "item-color"], [1, "item-info"], [1, "item-name"], [1, "item-entity"], [1, "remove-btn", 3, "click"], [1, "fa-solid", "fa-times"], [1, "add-list-search"], [1, "fa-solid", "fa-search"], ["type", "text", "placeholder", "Search lists to add...", 3, "ngModelChange", "focus", "ngModel"], [1, "list-dropdown"], [1, "dropdown-backdrop", 3, "click"], [1, "dropdown-content"], [1, "dropdown-item"], [1, "dropdown-item", 3, "click"], [1, "dropdown-name"], [1, "dropdown-entity"], [1, "fa-solid", "fa-info-circle"], [1, "operation-buttons"], [1, "op-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-layer-group"], [1, "fa-solid", "fa-circle-notch"], [1, "fa-solid", "fa-arrows-split-up-and-left"], [3, "regionClick", "data", "selectedRegion"], [1, "empty-icon"], [1, "fa-solid", "fa-circle-nodes"], ["text", "Calculating..."], [1, "region-header"], [1, "region-label"], [1, "region-count"], [1, "region-actions"], [1, "action-btn", "primary", 3, "click"], [1, "fa-solid", "fa-plus"], [1, "action-btn", 3, "click"], [1, "fa-solid", "fa-folder-plus"], [1, "fa-solid", "fa-file-excel"], [1, "record-preview"], [1, "preview-list"], [1, "preview-card"], [1, "preview-loading"], [1, "preview-card-content"], [1, "preview-name"], [1, "preview-secondary"], ["title", "Open record", 1, "preview-open-btn", 3, "click"], [1, "fa-solid", "fa-external-link-alt"], ["text", "Loading preview...", "size", "small"], [1, "result-header"], [1, "result-operation"], [1, "result-count"], [1, "fa-solid", "fa-hand-pointer"], [1, "modal-overlay", 3, "click"], [1, "modal-header"], [1, "modal-close", 3, "click"], [1, "modal-body"], [1, "form-group"], ["type", "text", "placeholder", "Enter list name", 1, "form-input", 3, "ngModelChange", "ngModel"], ["placeholder", "Optional description", "rows", "3", 1, "form-input", 3, "ngModelChange", "ngModel"], [1, "form-info"], [1, "modal-footer"], [1, "btn-primary", 3, "click", "disabled"], [1, "fa-solid", "fa-spinner", "fa-spin"], [1, "btn-secondary", 3, "click"], [1, "form-info", 2, "margin-bottom", "16px"], [1, "list-search"], ["type", "text", "placeholder", "Search lists...", 1, "form-input", 3, "ngModelChange", "ngModel"], [1, "list-options"], [1, "list-option", 3, "selected"], [1, "list-options-empty"], [1, "list-option", 3, "click"], [1, "list-option-radio"], ["type", "radio", "name", "targetList", 3, "checked"], [1, "list-option-info"], [1, "list-option-name"], [1, "list-option-entity"], [1, "fa-solid", "fa-inbox"]], template: function ListsOperationsResource_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2)(3, "div", 3);
             i0.ɵɵelement(4, "i", 4);
             i0.ɵɵelementStart(5, "h2");
             i0.ɵɵtext(6, "List Operations");
             i0.ɵɵelementEnd()();
-            i0.ɵɵtemplate(7, ListsOperationsResource_button_7_Template, 3, 0, "button", 5);
+            i0.ɵɵconditionalCreate(7, ListsOperationsResource_Conditional_7_Template, 3, 0, "button", 5);
             i0.ɵɵelementEnd();
             i0.ɵɵelementStart(8, "div", 6);
             i0.ɵɵtext(9, " Visualize overlaps and perform set operations on your lists ");
@@ -1129,7 +1126,7 @@ let ListsOperationsResource = class ListsOperationsResource extends BaseResource
             i0.ɵɵelementStart(10, "div", 7)(11, "div", 8)(12, "div", 9)(13, "h3");
             i0.ɵɵtext(14, "Selected Lists");
             i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(15, ListsOperationsResource_span_15_Template, 2, 2, "span", 10);
+            i0.ɵɵconditionalCreate(15, ListsOperationsResource_Conditional_15_Template, 2, 2, "span", 10);
             i0.ɵɵelementEnd();
             i0.ɵɵelementStart(16, "div", 11)(17, "label", 12);
             i0.ɵɵtext(18, "Filter by Entity");
@@ -1140,66 +1137,76 @@ let ListsOperationsResource = class ListsOperationsResource extends BaseResource
             i0.ɵɵelementStart(21, "option", 15);
             i0.ɵɵtext(22, "All Entities");
             i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(23, ListsOperationsResource_option_23_Template, 2, 3, "option", 16);
+            i0.ɵɵrepeaterCreate(23, ListsOperationsResource_For_24_Template, 2, 3, "option", 16, i0.ɵɵrepeaterTrackByIdentity);
             i0.ɵɵelementEnd()()();
-            i0.ɵɵelementStart(24, "div", 17);
-            i0.ɵɵtemplate(25, ListsOperationsResource_div_25_Template, 9, 4, "div", 18)(26, ListsOperationsResource_div_26_Template, 5, 2, "div", 19)(27, ListsOperationsResource_div_27_Template, 3, 1, "div", 20);
+            i0.ɵɵelementStart(25, "div", 17);
+            i0.ɵɵrepeaterCreate(26, ListsOperationsResource_For_27_Template, 9, 4, "div", 18, i0.ɵɵrepeaterTrackByIdentity);
+            i0.ɵɵconditionalCreate(28, ListsOperationsResource_Conditional_28_Template, 5, 2, "div", 19);
+            i0.ɵɵconditionalCreate(29, ListsOperationsResource_Conditional_29_Template, 3, 1, "div", 20);
             i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(28, ListsOperationsResource_div_28_Template, 6, 1, "div", 21)(29, ListsOperationsResource_div_29_Template, 16, 3, "div", 22);
+            i0.ɵɵconditionalCreate(30, ListsOperationsResource_Conditional_30_Template, 6, 1, "div", 21);
+            i0.ɵɵconditionalCreate(31, ListsOperationsResource_Conditional_31_Template, 16, 3, "div", 22);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(30, "div", 23);
-            i0.ɵɵtemplate(31, ListsOperationsResource_mj_venn_diagram_31_Template, 1, 2, "mj-venn-diagram", 24)(32, ListsOperationsResource_div_32_Template, 7, 0, "div", 25)(33, ListsOperationsResource_div_33_Template, 2, 0, "div", 26);
+            i0.ɵɵelementStart(32, "div", 23);
+            i0.ɵɵconditionalCreate(33, ListsOperationsResource_Conditional_33_Template, 1, 2, "mj-venn-diagram", 24);
+            i0.ɵɵconditionalCreate(34, ListsOperationsResource_Conditional_34_Template, 7, 0, "div", 25);
+            i0.ɵɵconditionalCreate(35, ListsOperationsResource_Conditional_35_Template, 2, 0, "div", 26);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(34, "div", 27)(35, "div", 9)(36, "h3");
-            i0.ɵɵelement(37, "i", 28);
-            i0.ɵɵtext(38);
+            i0.ɵɵelementStart(36, "div", 27)(37, "div", 9)(38, "h3");
+            i0.ɵɵelement(39, "i", 28);
+            i0.ɵɵtext(40);
             i0.ɵɵelementEnd()();
-            i0.ɵɵtemplate(39, ListsOperationsResource_div_39_Template, 17, 3, "div", 29)(40, ListsOperationsResource_div_40_Template, 13, 2, "div", 30)(41, ListsOperationsResource_div_41_Template, 4, 0, "div", 31);
+            i0.ɵɵconditionalCreate(41, ListsOperationsResource_Conditional_41_Template, 17, 3, "div", 29);
+            i0.ɵɵconditionalCreate(42, ListsOperationsResource_Conditional_42_Template, 13, 2, "div", 30);
+            i0.ɵɵconditionalCreate(43, ListsOperationsResource_Conditional_43_Template, 4, 0, "div", 31);
             i0.ɵɵelementEnd()();
-            i0.ɵɵtemplate(42, ListsOperationsResource_div_42_Template, 1, 0, "div", 32)(43, ListsOperationsResource_div_43_Template, 24, 7, "div", 33)(44, ListsOperationsResource_div_44_Template, 1, 0, "div", 32)(45, ListsOperationsResource_div_45_Template, 22, 8, "div", 34);
+            i0.ɵɵconditionalCreate(44, ListsOperationsResource_Conditional_44_Template, 1, 0, "div", 32);
+            i0.ɵɵconditionalCreate(45, ListsOperationsResource_Conditional_45_Template, 24, 7, "div", 33);
+            i0.ɵɵconditionalCreate(46, ListsOperationsResource_Conditional_46_Template, 1, 0, "div", 32);
+            i0.ɵɵconditionalCreate(47, ListsOperationsResource_Conditional_47_Template, 23, 7, "div", 34);
             i0.ɵɵelementEnd();
         } if (rf & 2) {
             i0.ɵɵadvance(7);
-            i0.ɵɵproperty("ngIf", ctx.selectedLists.length > 0 || ctx.selectedEntityId);
+            i0.ɵɵconditional(ctx.selectedLists.length > 0 || ctx.selectedEntityId ? 7 : -1);
             i0.ɵɵadvance(8);
-            i0.ɵɵproperty("ngIf", ctx.selectedLists.length > 0);
+            i0.ɵɵconditional(ctx.selectedLists.length > 0 ? 15 : -1);
             i0.ɵɵadvance(5);
             i0.ɵɵtwoWayProperty("ngModel", ctx.selectedEntityId);
             i0.ɵɵadvance(3);
-            i0.ɵɵproperty("ngForOf", ctx.entityOptions);
+            i0.ɵɵrepeater(ctx.entityOptions);
+            i0.ɵɵadvance(3);
+            i0.ɵɵrepeater(ctx.selectedLists);
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("ngForOf", ctx.selectedLists);
-            i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", ctx.selectedLists.length < ctx.maxLists);
+            i0.ɵɵconditional(ctx.selectedLists.length < ctx.maxLists ? 28 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", ctx.selectedLists.length >= ctx.maxLists);
+            i0.ɵɵconditional(ctx.selectedLists.length >= ctx.maxLists ? 29 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", ctx.selectedLists.length > 0);
+            i0.ɵɵconditional(ctx.selectedLists.length > 0 ? 30 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", ctx.selectedLists.length >= 2);
+            i0.ɵɵconditional(ctx.selectedLists.length >= 2 ? 31 : -1);
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("ngIf", ctx.selectedLists.length > 0);
+            i0.ɵɵconditional(ctx.selectedLists.length > 0 ? 33 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", ctx.selectedLists.length === 0);
+            i0.ɵɵconditional(ctx.selectedLists.length === 0 ? 34 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", ctx.isCalculating);
+            i0.ɵɵconditional(ctx.isCalculating ? 35 : -1);
             i0.ɵɵadvance(5);
             i0.ɵɵtextInterpolate1(" ", ctx.selectedRegion ? "Selected Region" : "Results", " ");
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", ctx.selectedRegion);
+            i0.ɵɵconditional(ctx.selectedRegion ? 41 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", ctx.lastOperationResult && !ctx.selectedRegion);
+            i0.ɵɵconditional(ctx.lastOperationResult && !ctx.selectedRegion ? 42 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", !ctx.selectedRegion && !ctx.lastOperationResult);
+            i0.ɵɵconditional(!ctx.selectedRegion && !ctx.lastOperationResult ? 43 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", ctx.showCreateDialog);
+            i0.ɵɵconditional(ctx.showCreateDialog ? 44 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", ctx.showCreateDialog);
+            i0.ɵɵconditional(ctx.showCreateDialog ? 45 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", ctx.showAddToListDialog);
+            i0.ɵɵconditional(ctx.showAddToListDialog ? 46 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", ctx.showAddToListDialog);
-        } }, dependencies: [i3.NgForOf, i3.NgIf, i4.NgSelectOption, i4.ɵNgSelectMultipleOption, i4.DefaultValueAccessor, i4.SelectControlValueAccessor, i4.NgControlStatus, i4.NgModel, i5.LoadingComponent, i6.VennDiagramComponent], styles: ["\n    :host {\n      display: block;\n      width: 100%;\n      height: 100%;\n    }\n\n    .operations-container {\n      display: flex;\n      flex-direction: column;\n      height: 100%;\n      background: #f5f7fa;\n    }\n\n    .operations-header {\n      padding: 20px 24px;\n      background: white;\n      border-bottom: 1px solid #e0e0e0;\n    }\n\n    .header-top {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      margin-bottom: 4px;\n    }\n\n    .header-title {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n    }\n\n    .clear-all-btn {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      padding: 6px 12px;\n      background: #f5f5f5;\n      border: 1px solid #ddd;\n      border-radius: 6px;\n      font-size: 13px;\n      color: #666;\n      cursor: pointer;\n      transition: all 0.2s;\n    }\n\n    .clear-all-btn:hover {\n      background: #ffebee;\n      border-color: #f44336;\n      color: #d32f2f;\n    }\n\n    .clear-all-btn i {\n      font-size: 12px;\n    }\n\n    .header-title i {\n      font-size: 24px;\n      color: #9C27B0;\n    }\n\n    .header-title h2 {\n      margin: 0;\n      font-size: 20px;\n      font-weight: 600;\n      color: #333;\n    }\n\n    .header-subtitle {\n      color: #666;\n      font-size: 14px;\n    }\n\n    .operations-content {\n      display: grid;\n      grid-template-columns: 280px 1fr 300px;\n      gap: 16px;\n      flex: 1;\n      padding: 16px;\n      overflow: hidden;\n    }\n\n    /* Panels */\n    .selection-panel,\n    .results-panel {\n      background: white;\n      border-radius: 8px;\n      box-shadow: 0 1px 3px rgba(0,0,0,0.08);\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n    }\n\n    .venn-panel {\n      background: white;\n      border-radius: 8px;\n      box-shadow: 0 1px 3px rgba(0,0,0,0.08);\n      position: relative;\n      min-height: 400px;\n    }\n\n    .panel-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      padding: 16px;\n      border-bottom: 1px solid #f0f0f0;\n    }\n\n    .panel-header h3 {\n      margin: 0;\n      font-size: 14px;\n      font-weight: 600;\n      color: #333;\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .list-count {\n      font-size: 12px;\n      color: #999;\n      background: #f0f0f0;\n      padding: 2px 8px;\n      border-radius: 10px;\n    }\n\n    /* Entity Filter */\n    .entity-filter-section {\n      padding: 12px 16px;\n      border-bottom: 1px solid #f0f0f0;\n    }\n\n    .filter-label {\n      display: block;\n      font-size: 11px;\n      font-weight: 600;\n      color: #666;\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n      margin-bottom: 6px;\n    }\n\n    .entity-select {\n      width: 100%;\n      padding: 8px 12px;\n      font-size: 13px;\n      border: 1px solid #ddd;\n      border-radius: 6px;\n      background: white;\n      cursor: pointer;\n      outline: none;\n      transition: border-color 0.2s;\n    }\n\n    .entity-select:focus {\n      border-color: #9C27B0;\n    }\n\n    .entity-note {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      margin: 8px 12px;\n      padding: 8px 10px;\n      background: #e8f5e9;\n      border-radius: 6px;\n      font-size: 12px;\n      color: #2e7d32;\n    }\n\n    .entity-note i {\n      color: #4caf50;\n    }\n\n    /* Selected Lists */\n    .selected-lists {\n      flex: 1;\n      overflow-y: auto;\n      padding: 12px;\n    }\n\n    .selected-item {\n      display: flex;\n      align-items: center;\n      gap: 10px;\n      padding: 10px;\n      background: #f8f9fa;\n      border-radius: 6px;\n      margin-bottom: 8px;\n    }\n\n    .item-color {\n      width: 12px;\n      height: 12px;\n      border-radius: 3px;\n      flex-shrink: 0;\n    }\n\n    .item-info {\n      flex: 1;\n      min-width: 0;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .item-name {\n      font-size: 13px;\n      font-weight: 500;\n      color: #333;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .item-entity {\n      font-size: 11px;\n      color: #999;\n    }\n\n    .remove-btn {\n      background: none;\n      border: none;\n      color: #999;\n      cursor: pointer;\n      padding: 4px;\n      border-radius: 4px;\n    }\n\n    .remove-btn:hover {\n      background: #e0e0e0;\n      color: #666;\n    }\n\n    /* Add list area */\n    .add-list-area {\n      position: relative;\n    }\n\n    .add-list-search {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 8px 12px;\n      border: 1px dashed #ddd;\n      border-radius: 6px;\n      transition: border-color 0.2s;\n    }\n\n    .add-list-search:focus-within {\n      border-color: #9C27B0;\n    }\n\n    .add-list-search i {\n      color: #999;\n    }\n\n    .add-list-search input {\n      flex: 1;\n      border: none;\n      outline: none;\n      font-size: 13px;\n    }\n\n    .list-dropdown {\n      position: absolute;\n      top: 100%;\n      left: 0;\n      right: 0;\n      z-index: 100;\n      margin-top: 4px;\n    }\n\n    .dropdown-backdrop {\n      position: fixed;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n    }\n\n    .dropdown-content {\n      position: relative;\n      background: white;\n      border: 1px solid #ddd;\n      border-radius: 6px;\n      box-shadow: 0 4px 12px rgba(0,0,0,0.15);\n      max-height: 200px;\n      overflow-y: auto;\n    }\n\n    .dropdown-item {\n      display: flex;\n      flex-direction: column;\n      padding: 10px 12px;\n      cursor: pointer;\n      transition: background 0.15s;\n    }\n\n    .dropdown-item:hover {\n      background: #f5f5f5;\n    }\n\n    .dropdown-name {\n      font-size: 13px;\n      font-weight: 500;\n      color: #333;\n    }\n\n    .dropdown-entity {\n      font-size: 11px;\n      color: #999;\n    }\n\n    .lists-full {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 12px;\n      font-size: 12px;\n      color: #999;\n      background: #f8f9fa;\n      border-radius: 6px;\n    }\n\n    .entity-warning {\n      display: flex;\n      align-items: flex-start;\n      gap: 8px;\n      margin: 12px;\n      padding: 10px;\n      background: #fff8e1;\n      border-radius: 6px;\n      font-size: 12px;\n      color: #856404;\n    }\n\n    .entity-warning i {\n      color: #ffc107;\n      margin-top: 2px;\n    }\n\n    /* Quick Operations */\n    .quick-operations {\n      padding: 12px;\n      border-top: 1px solid #f0f0f0;\n    }\n\n    .quick-operations h4 {\n      margin: 0 0 10px;\n      font-size: 12px;\n      font-weight: 600;\n      color: #666;\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n    }\n\n    .operation-buttons {\n      display: flex;\n      flex-direction: column;\n      gap: 6px;\n    }\n\n    .op-btn {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 8px 12px;\n      background: #f8f9fa;\n      border: 1px solid #e0e0e0;\n      border-radius: 6px;\n      font-size: 13px;\n      color: #333;\n      cursor: pointer;\n      transition: all 0.2s;\n    }\n\n    .op-btn:hover:not(:disabled) {\n      background: #e8f4fd;\n      border-color: #9C27B0;\n      color: #9C27B0;\n    }\n\n    .op-btn:disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n\n    /* Venn Panel */\n    .venn-empty {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      height: 100%;\n      text-align: center;\n      padding: 40px;\n    }\n\n    .empty-icon {\n      width: 80px;\n      height: 80px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      background: linear-gradient(135deg, rgba(156, 39, 176, 0.1) 0%, rgba(156, 39, 176, 0.05) 100%);\n      border-radius: 50%;\n      margin-bottom: 20px;\n    }\n\n    .empty-icon i {\n      font-size: 36px;\n      color: #9C27B0;\n    }\n\n    .venn-empty h3 {\n      margin: 0 0 8px;\n      font-size: 18px;\n      color: #333;\n    }\n\n    .venn-empty p {\n      margin: 0;\n      color: #666;\n      font-size: 14px;\n      max-width: 300px;\n    }\n\n    .loading-overlay {\n      position: absolute;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      background: rgba(255,255,255,0.9);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n\n    /* Results Panel */\n    .region-details,\n    .operation-result {\n      padding: 16px;\n    }\n\n    .region-header,\n    .result-header {\n      margin-bottom: 16px;\n    }\n\n    .region-label,\n    .result-operation {\n      display: block;\n      font-size: 14px;\n      font-weight: 600;\n      color: #333;\n      margin-bottom: 4px;\n    }\n\n    .region-count,\n    .result-count {\n      font-size: 13px;\n      color: #9C27B0;\n      font-weight: 500;\n    }\n\n    .region-actions {\n      display: flex;\n      flex-direction: column;\n      gap: 8px;\n      margin-bottom: 16px;\n    }\n\n    .action-btn {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 10px 14px;\n      background: white;\n      border: 1px solid #ddd;\n      border-radius: 6px;\n      font-size: 13px;\n      color: #333;\n      cursor: pointer;\n      transition: all 0.2s;\n    }\n\n    .action-btn:hover {\n      background: #f5f5f5;\n    }\n\n    .action-btn.primary {\n      background: #9C27B0;\n      border-color: #9C27B0;\n      color: white;\n    }\n\n    .action-btn.primary:hover {\n      background: #7B1FA2;\n    }\n\n    .record-preview h5 {\n      margin: 0 0 8px;\n      font-size: 12px;\n      color: #666;\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n    }\n\n    .preview-list {\n      max-height: 200px;\n      overflow-y: auto;\n    }\n\n    .preview-card {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      padding: 10px 12px;\n      background: #f8f9fa;\n      border-radius: 6px;\n      margin-bottom: 6px;\n      transition: all 0.15s ease;\n    }\n\n    .preview-card:hover {\n      background: #eef1f5;\n      box-shadow: 0 1px 3px rgba(0,0,0,0.08);\n    }\n\n    .preview-card-content {\n      flex: 1;\n      min-width: 0;\n      display: flex;\n      flex-direction: column;\n      gap: 2px;\n    }\n\n    .preview-name {\n      font-size: 13px;\n      font-weight: 500;\n      color: #333;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .preview-secondary {\n      font-size: 11px;\n      color: #888;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .preview-open-btn {\n      background: none;\n      border: none;\n      color: #9C27B0;\n      cursor: pointer;\n      padding: 6px 8px;\n      border-radius: 4px;\n      opacity: 0.6;\n      transition: all 0.15s ease;\n      flex-shrink: 0;\n    }\n\n    .preview-open-btn:hover {\n      opacity: 1;\n      background: rgba(156, 39, 176, 0.1);\n    }\n\n    .preview-loading {\n      padding: 12px;\n      text-align: center;\n    }\n\n    .results-empty {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      height: 200px;\n      text-align: center;\n      color: #999;\n    }\n\n    .results-empty i {\n      font-size: 32px;\n      margin-bottom: 12px;\n      opacity: 0.5;\n    }\n\n    .results-empty p {\n      font-size: 13px;\n      margin: 0;\n      max-width: 200px;\n    }\n\n    /* Modal */\n    .modal-overlay {\n      position: fixed;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      background: rgba(0,0,0,0.5);\n      z-index: 1000;\n    }\n\n    .modal-dialog {\n      position: fixed;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n      background: white;\n      border-radius: 12px;\n      width: 420px;\n      max-width: 90vw;\n      z-index: 1001;\n    }\n\n    .modal-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      padding: 16px 20px;\n      border-bottom: 1px solid #e0e0e0;\n    }\n\n    .modal-header h3 {\n      margin: 0;\n      font-size: 16px;\n      color: #333;\n    }\n\n    .modal-close {\n      background: none;\n      border: none;\n      color: #999;\n      cursor: pointer;\n      padding: 4px 8px;\n    }\n\n    .modal-body {\n      padding: 20px;\n    }\n\n    .form-group {\n      margin-bottom: 16px;\n    }\n\n    .form-group label {\n      display: block;\n      margin-bottom: 6px;\n      font-size: 13px;\n      font-weight: 500;\n      color: #666;\n    }\n\n    .form-input {\n      width: 100%;\n      padding: 10px 12px;\n      border: 1px solid #ddd;\n      border-radius: 6px;\n      font-size: 14px;\n      box-sizing: border-box;\n    }\n\n    .form-input:focus {\n      outline: none;\n      border-color: #9C27B0;\n      box-shadow: 0 0 0 3px rgba(156, 39, 176, 0.1);\n    }\n\n    textarea.form-input {\n      resize: vertical;\n    }\n\n    .form-info {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 10px;\n      background: #f8f9fa;\n      border-radius: 6px;\n      font-size: 13px;\n      color: #666;\n    }\n\n    .form-info i {\n      color: #9C27B0;\n    }\n\n    .modal-footer {\n      display: flex;\n      gap: 12px;\n      padding: 16px 20px;\n      border-top: 1px solid #e0e0e0;\n      background: #fafafa;\n    }\n\n    .btn-primary {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 10px 20px;\n      background: #9C27B0;\n      color: white;\n      border: none;\n      border-radius: 6px;\n      font-size: 14px;\n      cursor: pointer;\n    }\n\n    .btn-primary:hover:not(:disabled) {\n      background: #7B1FA2;\n    }\n\n    .btn-primary:disabled {\n      opacity: 0.6;\n      cursor: not-allowed;\n    }\n\n    .btn-secondary {\n      padding: 10px 20px;\n      background: white;\n      color: #666;\n      border: 1px solid #ddd;\n      border-radius: 6px;\n      font-size: 14px;\n      cursor: pointer;\n    }\n\n    .btn-secondary:hover {\n      background: #f5f5f5;\n    }\n\n    /* Add to List Dialog */\n    .add-to-list-dialog {\n      width: 480px;\n    }\n\n    .add-to-list-dialog .modal-body {\n      max-height: 400px;\n      overflow-y: auto;\n    }\n\n    .list-search {\n      display: flex;\n      align-items: center;\n      gap: 10px;\n      padding: 10px 12px;\n      background: #f8f9fa;\n      border: 1px solid #e0e0e0;\n      border-radius: 6px;\n      margin-bottom: 12px;\n    }\n\n    .list-search i {\n      color: #999;\n      flex-shrink: 0;\n    }\n\n    .list-search .form-input {\n      flex: 1;\n      border: none;\n      background: transparent;\n      padding: 0;\n      font-size: 14px;\n    }\n\n    .list-search .form-input:focus {\n      box-shadow: none;\n      outline: none;\n    }\n\n    .list-options {\n      border: 1px solid #e0e0e0;\n      border-radius: 6px;\n      max-height: 250px;\n      overflow-y: auto;\n    }\n\n    .list-option {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      padding: 12px;\n      cursor: pointer;\n      transition: background 0.15s;\n      border-bottom: 1px solid #f0f0f0;\n    }\n\n    .list-option:last-child {\n      border-bottom: none;\n    }\n\n    .list-option:hover {\n      background: #f8f9fa;\n    }\n\n    .list-option.selected {\n      background: #f3e5f5;\n    }\n\n    .list-option-radio {\n      flex-shrink: 0;\n    }\n\n    .list-option-radio input[type=\"radio\"] {\n      width: 18px;\n      height: 18px;\n      cursor: pointer;\n      accent-color: #9C27B0;\n    }\n\n    .list-option-info {\n      flex: 1;\n      min-width: 0;\n      display: flex;\n      flex-direction: column;\n      gap: 2px;\n    }\n\n    .list-option-name {\n      font-size: 14px;\n      font-weight: 500;\n      color: #333;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .list-option-entity {\n      font-size: 12px;\n      color: #888;\n    }\n\n    .list-options-empty {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      padding: 30px 20px;\n      text-align: center;\n      color: #999;\n    }\n\n    .list-options-empty i {\n      font-size: 28px;\n      margin-bottom: 10px;\n      opacity: 0.5;\n    }\n\n    .list-options-empty p {\n      margin: 0;\n      font-size: 13px;\n    }\n\n    /* Responsive */\n    @media (max-width: 1024px) {\n      .operations-content {\n        grid-template-columns: 1fr;\n        grid-template-rows: auto 1fr auto;\n      }\n\n      .selection-panel {\n        order: 1;\n      }\n\n      .venn-panel {\n        order: 2;\n        min-height: 300px;\n      }\n\n      .results-panel {\n        order: 3;\n      }\n    }\n  "], encapsulation: 2 });
+            i0.ɵɵconditional(ctx.showAddToListDialog ? 47 : -1);
+        } }, dependencies: [i3.NgSelectOption, i3.ɵNgSelectMultipleOption, i3.DefaultValueAccessor, i3.SelectControlValueAccessor, i3.NgControlStatus, i3.NgModel, i4.LoadingComponent, i5.VennDiagramComponent], styles: ["\n    :host {\n      display: block;\n      width: 100%;\n      height: 100%;\n    }\n\n    .operations-container {\n      display: flex;\n      flex-direction: column;\n      height: 100%;\n      background: #f5f7fa;\n    }\n\n    .operations-header {\n      padding: 20px 24px;\n      background: white;\n      border-bottom: 1px solid #e0e0e0;\n    }\n\n    .header-top {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      margin-bottom: 4px;\n    }\n\n    .header-title {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n    }\n\n    .clear-all-btn {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      padding: 6px 12px;\n      background: #f5f5f5;\n      border: 1px solid #ddd;\n      border-radius: 6px;\n      font-size: 13px;\n      color: #666;\n      cursor: pointer;\n      transition: all 0.2s;\n    }\n\n    .clear-all-btn:hover {\n      background: #ffebee;\n      border-color: #f44336;\n      color: #d32f2f;\n    }\n\n    .clear-all-btn i {\n      font-size: 12px;\n    }\n\n    .header-title i {\n      font-size: 24px;\n      color: #9C27B0;\n    }\n\n    .header-title h2 {\n      margin: 0;\n      font-size: 20px;\n      font-weight: 600;\n      color: #333;\n    }\n\n    .header-subtitle {\n      color: #666;\n      font-size: 14px;\n    }\n\n    .operations-content {\n      display: grid;\n      grid-template-columns: 280px 1fr 300px;\n      gap: 16px;\n      flex: 1;\n      padding: 16px;\n      overflow: hidden;\n    }\n\n    /* Panels */\n    .selection-panel,\n    .results-panel {\n      background: white;\n      border-radius: 8px;\n      box-shadow: 0 1px 3px rgba(0,0,0,0.08);\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n    }\n\n    .venn-panel {\n      background: white;\n      border-radius: 8px;\n      box-shadow: 0 1px 3px rgba(0,0,0,0.08);\n      position: relative;\n      min-height: 400px;\n    }\n\n    .panel-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      padding: 16px;\n      border-bottom: 1px solid #f0f0f0;\n    }\n\n    .panel-header h3 {\n      margin: 0;\n      font-size: 14px;\n      font-weight: 600;\n      color: #333;\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .list-count {\n      font-size: 12px;\n      color: #999;\n      background: #f0f0f0;\n      padding: 2px 8px;\n      border-radius: 10px;\n    }\n\n    /* Entity Filter */\n    .entity-filter-section {\n      padding: 12px 16px;\n      border-bottom: 1px solid #f0f0f0;\n    }\n\n    .filter-label {\n      display: block;\n      font-size: 11px;\n      font-weight: 600;\n      color: #666;\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n      margin-bottom: 6px;\n    }\n\n    .entity-select {\n      width: 100%;\n      padding: 8px 12px;\n      font-size: 13px;\n      border: 1px solid #ddd;\n      border-radius: 6px;\n      background: white;\n      cursor: pointer;\n      outline: none;\n      transition: border-color 0.2s;\n    }\n\n    .entity-select:focus {\n      border-color: #9C27B0;\n    }\n\n    .entity-note {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      margin: 8px 12px;\n      padding: 8px 10px;\n      background: #e8f5e9;\n      border-radius: 6px;\n      font-size: 12px;\n      color: #2e7d32;\n    }\n\n    .entity-note i {\n      color: #4caf50;\n    }\n\n    /* Selected Lists */\n    .selected-lists {\n      flex: 1;\n      overflow-y: auto;\n      padding: 12px;\n    }\n\n    .selected-item {\n      display: flex;\n      align-items: center;\n      gap: 10px;\n      padding: 10px;\n      background: #f8f9fa;\n      border-radius: 6px;\n      margin-bottom: 8px;\n    }\n\n    .item-color {\n      width: 12px;\n      height: 12px;\n      border-radius: 3px;\n      flex-shrink: 0;\n    }\n\n    .item-info {\n      flex: 1;\n      min-width: 0;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .item-name {\n      font-size: 13px;\n      font-weight: 500;\n      color: #333;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .item-entity {\n      font-size: 11px;\n      color: #999;\n    }\n\n    .remove-btn {\n      background: none;\n      border: none;\n      color: #999;\n      cursor: pointer;\n      padding: 4px;\n      border-radius: 4px;\n    }\n\n    .remove-btn:hover {\n      background: #e0e0e0;\n      color: #666;\n    }\n\n    /* Add list area */\n    .add-list-area {\n      position: relative;\n    }\n\n    .add-list-search {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 8px 12px;\n      border: 1px dashed #ddd;\n      border-radius: 6px;\n      transition: border-color 0.2s;\n    }\n\n    .add-list-search:focus-within {\n      border-color: #9C27B0;\n    }\n\n    .add-list-search i {\n      color: #999;\n    }\n\n    .add-list-search input {\n      flex: 1;\n      border: none;\n      outline: none;\n      font-size: 13px;\n    }\n\n    .list-dropdown {\n      position: absolute;\n      top: 100%;\n      left: 0;\n      right: 0;\n      z-index: 100;\n      margin-top: 4px;\n    }\n\n    .dropdown-backdrop {\n      position: fixed;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n    }\n\n    .dropdown-content {\n      position: relative;\n      background: white;\n      border: 1px solid #ddd;\n      border-radius: 6px;\n      box-shadow: 0 4px 12px rgba(0,0,0,0.15);\n      max-height: 200px;\n      overflow-y: auto;\n    }\n\n    .dropdown-item {\n      display: flex;\n      flex-direction: column;\n      padding: 10px 12px;\n      cursor: pointer;\n      transition: background 0.15s;\n    }\n\n    .dropdown-item:hover {\n      background: #f5f5f5;\n    }\n\n    .dropdown-name {\n      font-size: 13px;\n      font-weight: 500;\n      color: #333;\n    }\n\n    .dropdown-entity {\n      font-size: 11px;\n      color: #999;\n    }\n\n    .lists-full {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 12px;\n      font-size: 12px;\n      color: #999;\n      background: #f8f9fa;\n      border-radius: 6px;\n    }\n\n    .entity-warning {\n      display: flex;\n      align-items: flex-start;\n      gap: 8px;\n      margin: 12px;\n      padding: 10px;\n      background: #fff8e1;\n      border-radius: 6px;\n      font-size: 12px;\n      color: #856404;\n    }\n\n    .entity-warning i {\n      color: #ffc107;\n      margin-top: 2px;\n    }\n\n    /* Quick Operations */\n    .quick-operations {\n      padding: 12px;\n      border-top: 1px solid #f0f0f0;\n    }\n\n    .quick-operations h4 {\n      margin: 0 0 10px;\n      font-size: 12px;\n      font-weight: 600;\n      color: #666;\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n    }\n\n    .operation-buttons {\n      display: flex;\n      flex-direction: column;\n      gap: 6px;\n    }\n\n    .op-btn {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 8px 12px;\n      background: #f8f9fa;\n      border: 1px solid #e0e0e0;\n      border-radius: 6px;\n      font-size: 13px;\n      color: #333;\n      cursor: pointer;\n      transition: all 0.2s;\n    }\n\n    .op-btn:hover:not(:disabled) {\n      background: #e8f4fd;\n      border-color: #9C27B0;\n      color: #9C27B0;\n    }\n\n    .op-btn:disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n\n    /* Venn Panel */\n    .venn-empty {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      height: 100%;\n      text-align: center;\n      padding: 40px;\n    }\n\n    .empty-icon {\n      width: 80px;\n      height: 80px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      background: linear-gradient(135deg, rgba(156, 39, 176, 0.1) 0%, rgba(156, 39, 176, 0.05) 100%);\n      border-radius: 50%;\n      margin-bottom: 20px;\n    }\n\n    .empty-icon i {\n      font-size: 36px;\n      color: #9C27B0;\n    }\n\n    .venn-empty h3 {\n      margin: 0 0 8px;\n      font-size: 18px;\n      color: #333;\n    }\n\n    .venn-empty p {\n      margin: 0;\n      color: #666;\n      font-size: 14px;\n      max-width: 300px;\n    }\n\n    .loading-overlay {\n      position: absolute;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      background: rgba(255,255,255,0.9);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n\n    /* Results Panel */\n    .region-details,\n    .operation-result {\n      padding: 16px;\n    }\n\n    .region-header,\n    .result-header {\n      margin-bottom: 16px;\n    }\n\n    .region-label,\n    .result-operation {\n      display: block;\n      font-size: 14px;\n      font-weight: 600;\n      color: #333;\n      margin-bottom: 4px;\n    }\n\n    .region-count,\n    .result-count {\n      font-size: 13px;\n      color: #9C27B0;\n      font-weight: 500;\n    }\n\n    .region-actions {\n      display: flex;\n      flex-direction: column;\n      gap: 8px;\n      margin-bottom: 16px;\n    }\n\n    .action-btn {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 10px 14px;\n      background: white;\n      border: 1px solid #ddd;\n      border-radius: 6px;\n      font-size: 13px;\n      color: #333;\n      cursor: pointer;\n      transition: all 0.2s;\n    }\n\n    .action-btn:hover {\n      background: #f5f5f5;\n    }\n\n    .action-btn.primary {\n      background: #9C27B0;\n      border-color: #9C27B0;\n      color: white;\n    }\n\n    .action-btn.primary:hover {\n      background: #7B1FA2;\n    }\n\n    .record-preview h5 {\n      margin: 0 0 8px;\n      font-size: 12px;\n      color: #666;\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n    }\n\n    .preview-list {\n      max-height: 200px;\n      overflow-y: auto;\n    }\n\n    .preview-card {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      padding: 10px 12px;\n      background: #f8f9fa;\n      border-radius: 6px;\n      margin-bottom: 6px;\n      transition: all 0.15s ease;\n    }\n\n    .preview-card:hover {\n      background: #eef1f5;\n      box-shadow: 0 1px 3px rgba(0,0,0,0.08);\n    }\n\n    .preview-card-content {\n      flex: 1;\n      min-width: 0;\n      display: flex;\n      flex-direction: column;\n      gap: 2px;\n    }\n\n    .preview-name {\n      font-size: 13px;\n      font-weight: 500;\n      color: #333;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .preview-secondary {\n      font-size: 11px;\n      color: #888;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .preview-open-btn {\n      background: none;\n      border: none;\n      color: #9C27B0;\n      cursor: pointer;\n      padding: 6px 8px;\n      border-radius: 4px;\n      opacity: 0.6;\n      transition: all 0.15s ease;\n      flex-shrink: 0;\n    }\n\n    .preview-open-btn:hover {\n      opacity: 1;\n      background: rgba(156, 39, 176, 0.1);\n    }\n\n    .preview-loading {\n      padding: 12px;\n      text-align: center;\n    }\n\n    .results-empty {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      height: 200px;\n      text-align: center;\n      color: #999;\n    }\n\n    .results-empty i {\n      font-size: 32px;\n      margin-bottom: 12px;\n      opacity: 0.5;\n    }\n\n    .results-empty p {\n      font-size: 13px;\n      margin: 0;\n      max-width: 200px;\n    }\n\n    /* Modal */\n    .modal-overlay {\n      position: fixed;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      background: rgba(0,0,0,0.5);\n      z-index: 1000;\n    }\n\n    .modal-dialog {\n      position: fixed;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n      background: white;\n      border-radius: 12px;\n      width: 420px;\n      max-width: 90vw;\n      z-index: 1001;\n    }\n\n    .modal-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      padding: 16px 20px;\n      border-bottom: 1px solid #e0e0e0;\n    }\n\n    .modal-header h3 {\n      margin: 0;\n      font-size: 16px;\n      color: #333;\n    }\n\n    .modal-close {\n      background: none;\n      border: none;\n      color: #999;\n      cursor: pointer;\n      padding: 4px 8px;\n    }\n\n    .modal-body {\n      padding: 20px;\n    }\n\n    .form-group {\n      margin-bottom: 16px;\n    }\n\n    .form-group label {\n      display: block;\n      margin-bottom: 6px;\n      font-size: 13px;\n      font-weight: 500;\n      color: #666;\n    }\n\n    .form-input {\n      width: 100%;\n      padding: 10px 12px;\n      border: 1px solid #ddd;\n      border-radius: 6px;\n      font-size: 14px;\n      box-sizing: border-box;\n    }\n\n    .form-input:focus {\n      outline: none;\n      border-color: #9C27B0;\n      box-shadow: 0 0 0 3px rgba(156, 39, 176, 0.1);\n    }\n\n    textarea.form-input {\n      resize: vertical;\n    }\n\n    .form-info {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 10px;\n      background: #f8f9fa;\n      border-radius: 6px;\n      font-size: 13px;\n      color: #666;\n    }\n\n    .form-info i {\n      color: #9C27B0;\n    }\n\n    .modal-footer {\n      display: flex;\n      gap: 12px;\n      padding: 16px 20px;\n      border-top: 1px solid #e0e0e0;\n      background: #fafafa;\n    }\n\n    .btn-primary {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 10px 20px;\n      background: #9C27B0;\n      color: white;\n      border: none;\n      border-radius: 6px;\n      font-size: 14px;\n      cursor: pointer;\n    }\n\n    .btn-primary:hover:not(:disabled) {\n      background: #7B1FA2;\n    }\n\n    .btn-primary:disabled {\n      opacity: 0.6;\n      cursor: not-allowed;\n    }\n\n    .btn-secondary {\n      padding: 10px 20px;\n      background: white;\n      color: #666;\n      border: 1px solid #ddd;\n      border-radius: 6px;\n      font-size: 14px;\n      cursor: pointer;\n    }\n\n    .btn-secondary:hover {\n      background: #f5f5f5;\n    }\n\n    /* Add to List Dialog */\n    .add-to-list-dialog {\n      width: 480px;\n    }\n\n    .add-to-list-dialog .modal-body {\n      max-height: 400px;\n      overflow-y: auto;\n    }\n\n    .list-search {\n      display: flex;\n      align-items: center;\n      gap: 10px;\n      padding: 10px 12px;\n      background: #f8f9fa;\n      border: 1px solid #e0e0e0;\n      border-radius: 6px;\n      margin-bottom: 12px;\n    }\n\n    .list-search i {\n      color: #999;\n      flex-shrink: 0;\n    }\n\n    .list-search .form-input {\n      flex: 1;\n      border: none;\n      background: transparent;\n      padding: 0;\n      font-size: 14px;\n    }\n\n    .list-search .form-input:focus {\n      box-shadow: none;\n      outline: none;\n    }\n\n    .list-options {\n      border: 1px solid #e0e0e0;\n      border-radius: 6px;\n      max-height: 250px;\n      overflow-y: auto;\n    }\n\n    .list-option {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      padding: 12px;\n      cursor: pointer;\n      transition: background 0.15s;\n      border-bottom: 1px solid #f0f0f0;\n    }\n\n    .list-option:last-child {\n      border-bottom: none;\n    }\n\n    .list-option:hover {\n      background: #f8f9fa;\n    }\n\n    .list-option.selected {\n      background: #f3e5f5;\n    }\n\n    .list-option-radio {\n      flex-shrink: 0;\n    }\n\n    .list-option-radio input[type=\"radio\"] {\n      width: 18px;\n      height: 18px;\n      cursor: pointer;\n      accent-color: #9C27B0;\n    }\n\n    .list-option-info {\n      flex: 1;\n      min-width: 0;\n      display: flex;\n      flex-direction: column;\n      gap: 2px;\n    }\n\n    .list-option-name {\n      font-size: 14px;\n      font-weight: 500;\n      color: #333;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .list-option-entity {\n      font-size: 12px;\n      color: #888;\n    }\n\n    .list-options-empty {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      padding: 30px 20px;\n      text-align: center;\n      color: #999;\n    }\n\n    .list-options-empty i {\n      font-size: 28px;\n      margin-bottom: 10px;\n      opacity: 0.5;\n    }\n\n    .list-options-empty p {\n      margin: 0;\n      font-size: 13px;\n    }\n\n    /* Responsive */\n    @media (max-width: 1024px) {\n      .operations-content {\n        grid-template-columns: 1fr;\n        grid-template-rows: auto 1fr auto;\n      }\n\n      .selection-panel {\n        order: 1;\n      }\n\n      .venn-panel {\n        order: 2;\n        min-height: 300px;\n      }\n\n      .results-panel {\n        order: 3;\n      }\n    }\n  "], encapsulation: 2 });
 };
 ListsOperationsResource = __decorate([
     RegisterClass(BaseResourceComponent, 'ListsOperationsResource')
@@ -1207,7 +1214,7 @@ ListsOperationsResource = __decorate([
 export { ListsOperationsResource };
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ListsOperationsResource, [{
         type: Component,
-        args: [{ selector: 'mj-lists-operations-resource', template: `
+        args: [{ standalone: false, selector: 'mj-lists-operations-resource', template: `
     <div class="operations-container">
       <!-- Header -->
       <div class="operations-header">
@@ -1216,30 +1223,34 @@ export { ListsOperationsResource };
             <i class="fa-solid fa-diagram-project"></i>
             <h2>List Operations</h2>
           </div>
-          <button *ngIf="selectedLists.length > 0 || selectedEntityId"
-                  class="clear-all-btn"
-                  (click)="clearAllSelections()"
-                  title="Clear all selections">
-            <i class="fa-solid fa-xmark"></i>
-            Clear
-          </button>
+          @if (selectedLists.length > 0 || selectedEntityId) {
+            <button
+              class="clear-all-btn"
+              (click)="clearAllSelections()"
+              title="Clear all selections">
+              <i class="fa-solid fa-xmark"></i>
+              Clear
+            </button>
+          }
         </div>
         <div class="header-subtitle">
           Visualize overlaps and perform set operations on your lists
         </div>
       </div>
-
+    
       <!-- Main Content -->
       <div class="operations-content">
         <!-- Left Panel: List Selection -->
         <div class="selection-panel">
           <div class="panel-header">
             <h3>Selected Lists</h3>
-            <span class="list-count" *ngIf="selectedLists.length > 0">
-              {{selectedLists.length}}/{{maxLists}}
-            </span>
+            @if (selectedLists.length > 0) {
+              <span class="list-count">
+                {{selectedLists.length}}/{{maxLists}}
+              </span>
+            }
           </div>
-
+    
           <!-- Entity Filter Selector -->
           <div class="entity-filter-section">
             <label class="filter-label">Filter by Entity</label>
@@ -1249,106 +1260,125 @@ export { ListsOperationsResource };
                 (ngModelChange)="onEntityFilterChange()"
                 class="entity-select">
                 <option value="">All Entities</option>
-                <option *ngFor="let entity of entityOptions" [value]="entity.id">
-                  {{entity.name}} ({{entity.listCount}})
-                </option>
+                @for (entity of entityOptions; track entity) {
+                  <option [value]="entity.id">
+                    {{entity.name}} ({{entity.listCount}})
+                  </option>
+                }
               </select>
             </div>
           </div>
-
+    
           <!-- Selected lists -->
           <div class="selected-lists">
-            <div class="selected-item" *ngFor="let item of selectedLists; let i = index">
-              <div class="item-color" [style.background-color]="item.color"></div>
-              <div class="item-info">
-                <span class="item-name">{{item.list.Name}}</span>
-                <span class="item-entity">{{item.entityName}}</span>
-              </div>
-              <button class="remove-btn" (click)="removeList(i)">
-                <i class="fa-solid fa-times"></i>
-              </button>
-            </div>
-
-            <div class="add-list-area" *ngIf="selectedLists.length < maxLists">
-              <div class="add-list-search">
-                <i class="fa-solid fa-search"></i>
-                <input
-                  type="text"
-                  [(ngModel)]="listSearchTerm"
-                  (ngModelChange)="filterAvailableLists()"
-                  placeholder="Search lists to add..."
-                  (focus)="showListDropdown = true" />
+            @for (item of selectedLists; track item; let i = $index) {
+              <div class="selected-item">
+                <div class="item-color" [style.background-color]="item.color"></div>
+                <div class="item-info">
+                  <span class="item-name">{{item.list.Name}}</span>
+                  <span class="item-entity">{{item.entityName}}</span>
+                </div>
+                <button class="remove-btn" (click)="removeList(i)">
+                  <i class="fa-solid fa-times"></i>
+                </button>
               </div>
-
-              <!-- Available lists dropdown -->
-              <div class="list-dropdown" *ngIf="showListDropdown && filteredAvailableLists.length > 0">
-                <div class="dropdown-backdrop" (click)="showListDropdown = false"></div>
-                <div class="dropdown-content">
-                  <div
-                    class="dropdown-item"
-                    *ngFor="let list of filteredAvailableLists"
-                    (click)="addList(list)">
-                    <span class="dropdown-name">{{list.Name}}</span>
-                    <span class="dropdown-entity">{{list.Entity}}</span>
-                  </div>
+            }
+    
+            @if (selectedLists.length < maxLists) {
+              <div class="add-list-area">
+                <div class="add-list-search">
+                  <i class="fa-solid fa-search"></i>
+                  <input
+                    type="text"
+                    [(ngModel)]="listSearchTerm"
+                    (ngModelChange)="filterAvailableLists()"
+                    placeholder="Search lists to add..."
+                    (focus)="showListDropdown = true" />
                 </div>
+                <!-- Available lists dropdown -->
+                @if (showListDropdown && filteredAvailableLists.length > 0) {
+                  <div class="list-dropdown">
+                    <div class="dropdown-backdrop" (click)="showListDropdown = false"></div>
+                    <div class="dropdown-content">
+                      @for (list of filteredAvailableLists; track list) {
+                        <div
+                          class="dropdown-item"
+                          (click)="addList(list)">
+                          <span class="dropdown-name">{{list.Name}}</span>
+                          <span class="dropdown-entity">{{list.Entity}}</span>
+                        </div>
+                      }
+                    </div>
+                  </div>
+                }
               </div>
-            </div>
-
-            <div class="lists-full" *ngIf="selectedLists.length >= maxLists">
-              <i class="fa-solid fa-info-circle"></i>
-              Maximum {{maxLists}} lists can be compared
-            </div>
+            }
+    
+            @if (selectedLists.length >= maxLists) {
+              <div class="lists-full">
+                <i class="fa-solid fa-info-circle"></i>
+                Maximum {{maxLists}} lists can be compared
+              </div>
+            }
           </div>
-
+    
           <!-- Entity consistency note -->
-          <div class="entity-note" *ngIf="selectedLists.length > 0">
-            <i class="fa-solid fa-info-circle"></i>
-            <span>Comparing lists of type: <strong>{{selectedLists[0].entityName}}</strong></span>
-          </div>
-
+          @if (selectedLists.length > 0) {
+            <div class="entity-note">
+              <i class="fa-solid fa-info-circle"></i>
+              <span>Comparing lists of type: <strong>{{selectedLists[0].entityName}}</strong></span>
+            </div>
+          }
+    
           <!-- Quick Operations -->
-          <div class="quick-operations" *ngIf="selectedLists.length >= 2">
-            <h4>Quick Operations</h4>
-            <div class="operation-buttons">
-              <button class="op-btn" (click)="performOperation('union')" [disabled]="isCalculating">
-                <i class="fa-solid fa-layer-group"></i>
-                <span>Union All</span>
-              </button>
-              <button class="op-btn" (click)="performOperation('intersection')" [disabled]="isCalculating">
-                <i class="fa-solid fa-circle-notch"></i>
-                <span>Intersection</span>
-              </button>
-              <button class="op-btn" (click)="performOperation('symmetric_difference')" [disabled]="isCalculating">
-                <i class="fa-solid fa-arrows-split-up-and-left"></i>
-                <span>Unique Each</span>
-              </button>
+          @if (selectedLists.length >= 2) {
+            <div class="quick-operations">
+              <h4>Quick Operations</h4>
+              <div class="operation-buttons">
+                <button class="op-btn" (click)="performOperation('union')" [disabled]="isCalculating">
+                  <i class="fa-solid fa-layer-group"></i>
+                  <span>Union All</span>
+                </button>
+                <button class="op-btn" (click)="performOperation('intersection')" [disabled]="isCalculating">
+                  <i class="fa-solid fa-circle-notch"></i>
+                  <span>Intersection</span>
+                </button>
+                <button class="op-btn" (click)="performOperation('symmetric_difference')" [disabled]="isCalculating">
+                  <i class="fa-solid fa-arrows-split-up-and-left"></i>
+                  <span>Unique Each</span>
+                </button>
+              </div>
             </div>
-          </div>
+          }
         </div>
-
+    
         <!-- Center: Venn Diagram -->
         <div class="venn-panel">
-          <mj-venn-diagram
-            *ngIf="selectedLists.length > 0"
-            [data]="vennData"
-            [selectedRegion]="selectedRegion"
-            (regionClick)="onRegionClick($event)">
-          </mj-venn-diagram>
-
-          <div class="venn-empty" *ngIf="selectedLists.length === 0">
-            <div class="empty-icon">
-              <i class="fa-solid fa-circle-nodes"></i>
+          @if (selectedLists.length > 0) {
+            <mj-venn-diagram
+              [data]="vennData"
+              [selectedRegion]="selectedRegion"
+              (regionClick)="onRegionClick($event)">
+            </mj-venn-diagram>
+          }
+    
+          @if (selectedLists.length === 0) {
+            <div class="venn-empty">
+              <div class="empty-icon">
+                <i class="fa-solid fa-circle-nodes"></i>
+              </div>
+              <h3>Add Lists to Compare</h3>
+              <p>Select 2-4 lists from the same entity to visualize their overlaps and perform set operations.</p>
             </div>
-            <h3>Add Lists to Compare</h3>
-            <p>Select 2-4 lists from the same entity to visualize their overlaps and perform set operations.</p>
-          </div>
-
-          <div class="loading-overlay" *ngIf="isCalculating">
-            <mj-loading text="Calculating..."></mj-loading>
-          </div>
+          }
+    
+          @if (isCalculating) {
+            <div class="loading-overlay">
+              <mj-loading text="Calculating..."></mj-loading>
+            </div>
+          }
         </div>
-
+    
         <!-- Right Panel: Selected Region / Results -->
         <div class="results-panel">
           <div class="panel-header">
@@ -1357,176 +1387,199 @@ export { ListsOperationsResource };
               {{selectedRegion ? 'Selected Region' : 'Results'}}
             </h3>
           </div>
-
+    
           <!-- Selected region details -->
-          <div class="region-details" *ngIf="selectedRegion">
-            <div class="region-header">
-              <span class="region-label">{{selectedRegion.label}}</span>
-              <span class="region-count">{{selectedRegion.size}} records</span>
-            </div>
-
-            <div class="region-actions">
-              <button class="action-btn primary" (click)="createListFromSelection()">
-                <i class="fa-solid fa-plus"></i>
-                Create New List
-              </button>
-              <button class="action-btn" (click)="addToExistingList()">
-                <i class="fa-solid fa-folder-plus"></i>
-                Add to List
-              </button>
-              <button class="action-btn" (click)="exportToExcel()">
-                <i class="fa-solid fa-file-excel"></i>
-                Export
-              </button>
-            </div>
-
-            <div class="record-preview" *ngIf="previewRecordsDisplay.length > 0">
-              <h5>Preview (first 10)</h5>
-              <div class="preview-list">
-                <div class="preview-card" *ngFor="let record of previewRecordsDisplay">
-                  <div class="preview-card-content">
-                    <span class="preview-name">{{record.displayName}}</span>
-                    <span class="preview-secondary" *ngIf="record.secondaryInfo">{{record.secondaryInfo}}</span>
-                  </div>
-                  <button class="preview-open-btn" (click)="openRecord(record)" title="Open record">
-                    <i class="fa-solid fa-external-link-alt"></i>
-                  </button>
-                </div>
+          @if (selectedRegion) {
+            <div class="region-details">
+              <div class="region-header">
+                <span class="region-label">{{selectedRegion.label}}</span>
+                <span class="region-count">{{selectedRegion.size}} records</span>
               </div>
-              <div class="preview-loading" *ngIf="loadingPreview">
-                <mj-loading text="Loading preview..." size="small"></mj-loading>
+              <div class="region-actions">
+                <button class="action-btn primary" (click)="createListFromSelection()">
+                  <i class="fa-solid fa-plus"></i>
+                  Create New List
+                </button>
+                <button class="action-btn" (click)="addToExistingList()">
+                  <i class="fa-solid fa-folder-plus"></i>
+                  Add to List
+                </button>
+                <button class="action-btn" (click)="exportToExcel()">
+                  <i class="fa-solid fa-file-excel"></i>
+                  Export
+                </button>
               </div>
+              @if (previewRecordsDisplay.length > 0) {
+                <div class="record-preview">
+                  <h5>Preview (first 10)</h5>
+                  <div class="preview-list">
+                    @for (record of previewRecordsDisplay; track record) {
+                      <div class="preview-card">
+                        <div class="preview-card-content">
+                          <span class="preview-name">{{record.displayName}}</span>
+                          @if (record.secondaryInfo) {
+                            <span class="preview-secondary">{{record.secondaryInfo}}</span>
+                          }
+                        </div>
+                        <button class="preview-open-btn" (click)="openRecord(record)" title="Open record">
+                          <i class="fa-solid fa-external-link-alt"></i>
+                        </button>
+                      </div>
+                    }
+                  </div>
+                  @if (loadingPreview) {
+                    <div class="preview-loading">
+                      <mj-loading text="Loading preview..." size="small"></mj-loading>
+                    </div>
+                  }
+                </div>
+              }
             </div>
-          </div>
-
+          }
+    
           <!-- Operation result -->
-          <div class="operation-result" *ngIf="lastOperationResult && !selectedRegion">
-            <div class="result-header">
-              <span class="result-operation">{{getOperationLabel(lastOperationResult.operation)}}</span>
-              <span class="result-count">{{lastOperationResult.resultCount}} records</span>
-            </div>
-
-            <div class="region-actions">
-              <button class="action-btn primary" (click)="createListFromResult()">
-                <i class="fa-solid fa-plus"></i>
-                Create New List
-              </button>
-              <button class="action-btn" (click)="addResultToExistingList()">
-                <i class="fa-solid fa-folder-plus"></i>
-                Add to List
-              </button>
+          @if (lastOperationResult && !selectedRegion) {
+            <div class="operation-result">
+              <div class="result-header">
+                <span class="result-operation">{{getOperationLabel(lastOperationResult.operation)}}</span>
+                <span class="result-count">{{lastOperationResult.resultCount}} records</span>
+              </div>
+              <div class="region-actions">
+                <button class="action-btn primary" (click)="createListFromResult()">
+                  <i class="fa-solid fa-plus"></i>
+                  Create New List
+                </button>
+                <button class="action-btn" (click)="addResultToExistingList()">
+                  <i class="fa-solid fa-folder-plus"></i>
+                  Add to List
+                </button>
+              </div>
             </div>
-          </div>
-
+          }
+    
           <!-- Empty state -->
-          <div class="results-empty" *ngIf="!selectedRegion && !lastOperationResult">
-            <i class="fa-solid fa-hand-pointer"></i>
-            <p>Click a region in the diagram or run an operation to see results</p>
-          </div>
+          @if (!selectedRegion && !lastOperationResult) {
+            <div class="results-empty">
+              <i class="fa-solid fa-hand-pointer"></i>
+              <p>Click a region in the diagram or run an operation to see results</p>
+            </div>
+          }
         </div>
       </div>
-
+    
       <!-- Create List Dialog -->
-      <div class="modal-overlay" *ngIf="showCreateDialog" (click)="cancelCreateDialog()"></div>
-      <div class="modal-dialog" *ngIf="showCreateDialog">
-        <div class="modal-header">
-          <h3>Create New List from Selection</h3>
-          <button class="modal-close" (click)="cancelCreateDialog()">
-            <i class="fa-solid fa-times"></i>
-          </button>
-        </div>
-        <div class="modal-body">
-          <div class="form-group">
-            <label>List Name *</label>
-            <input
-              type="text"
-              [(ngModel)]="newListName"
-              placeholder="Enter list name"
-              class="form-input" />
+      @if (showCreateDialog) {
+        <div class="modal-overlay" (click)="cancelCreateDialog()"></div>
+      }
+      @if (showCreateDialog) {
+        <div class="modal-dialog">
+          <div class="modal-header">
+            <h3>Create New List from Selection</h3>
+            <button class="modal-close" (click)="cancelCreateDialog()">
+              <i class="fa-solid fa-times"></i>
+            </button>
           </div>
-          <div class="form-group">
-            <label>Description</label>
-            <textarea
-              [(ngModel)]="newListDescription"
-              placeholder="Optional description"
-              class="form-input"
+          <div class="modal-body">
+            <div class="form-group">
+              <label>List Name *</label>
+              <input
+                type="text"
+                [(ngModel)]="newListName"
+                placeholder="Enter list name"
+                class="form-input" />
+            </div>
+            <div class="form-group">
+              <label>Description</label>
+              <textarea
+                [(ngModel)]="newListDescription"
+                placeholder="Optional description"
+                class="form-input"
               rows="3"></textarea>
+            </div>
+            <div class="form-info">
+              <i class="fa-solid fa-info-circle"></i>
+              {{recordsToAdd.length}} record{{recordsToAdd.length !== 1 ? 's' : ''}} will be added to this list
+            </div>
           </div>
-          <div class="form-info">
-            <i class="fa-solid fa-info-circle"></i>
-            {{recordsToAdd.length}} record{{recordsToAdd.length !== 1 ? 's' : ''}} will be added to this list
+          <div class="modal-footer">
+            <button class="btn-primary" (click)="confirmCreateList()" [disabled]="!newListName || isSaving">
+              @if (isSaving) {
+                <i class="fa-solid fa-spinner fa-spin"></i>
+              }
+              {{isSaving ? 'Creating...' : 'Create List'}}
+            </button>
+            <button class="btn-secondary" (click)="cancelCreateDialog()">Cancel</button>
           </div>
         </div>
-        <div class="modal-footer">
-          <button class="btn-primary" (click)="confirmCreateList()" [disabled]="!newListName || isSaving">
-            <i *ngIf="isSaving" class="fa-solid fa-spinner fa-spin"></i>
-            {{isSaving ? 'Creating...' : 'Create List'}}
-          </button>
-          <button class="btn-secondary" (click)="cancelCreateDialog()">Cancel</button>
-        </div>
-      </div>
-
+      }
+    
       <!-- Add to Existing List Dialog -->
-      <div class="modal-overlay" *ngIf="showAddToListDialog" (click)="cancelAddToListDialog()"></div>
-      <div class="modal-dialog add-to-list-dialog" *ngIf="showAddToListDialog">
-        <div class="modal-header">
-          <h3>Add to Existing List</h3>
-          <button class="modal-close" (click)="cancelAddToListDialog()">
-            <i class="fa-solid fa-times"></i>
-          </button>
-        </div>
-        <div class="modal-body">
-          <div class="form-info" style="margin-bottom: 16px;">
-            <i class="fa-solid fa-info-circle"></i>
-            {{recordsToAdd.length}} record{{recordsToAdd.length !== 1 ? 's' : ''}} will be added
+      @if (showAddToListDialog) {
+        <div class="modal-overlay" (click)="cancelAddToListDialog()"></div>
+      }
+      @if (showAddToListDialog) {
+        <div class="modal-dialog add-to-list-dialog">
+          <div class="modal-header">
+            <h3>Add to Existing List</h3>
+            <button class="modal-close" (click)="cancelAddToListDialog()">
+              <i class="fa-solid fa-times"></i>
+            </button>
           </div>
-
-          <!-- Search input -->
-          <div class="list-search">
-            <i class="fa-solid fa-search"></i>
-            <input
-              type="text"
-              [(ngModel)]="addToListSearchTerm"
-              (ngModelChange)="filterAddToListOptions()"
-              placeholder="Search lists..."
-              class="form-input" />
-          </div>
-
-          <!-- List options -->
-          <div class="list-options">
-            <div
-              class="list-option"
-              *ngFor="let list of filteredAddToListOptions"
-              [class.selected]="selectedTargetListId === list.ID"
-              (click)="selectTargetList(list.ID)">
-              <div class="list-option-radio">
-                <input
-                  type="radio"
-                  [checked]="selectedTargetListId === list.ID"
-                  name="targetList" />
-              </div>
-              <div class="list-option-info">
-                <span class="list-option-name">{{list.Name}}</span>
-                <span class="list-option-entity">{{list.Entity}}</span>
-              </div>
+          <div class="modal-body">
+            <div class="form-info" style="margin-bottom: 16px;">
+              <i class="fa-solid fa-info-circle"></i>
+              {{recordsToAdd.length}} record{{recordsToAdd.length !== 1 ? 's' : ''}} will be added
             </div>
-
-            <div class="list-options-empty" *ngIf="filteredAddToListOptions.length === 0">
-              <i class="fa-solid fa-inbox"></i>
-              <p>{{addToListSearchTerm ? 'No lists match your search' : 'No other lists available'}}</p>
+            <!-- Search input -->
+            <div class="list-search">
+              <i class="fa-solid fa-search"></i>
+              <input
+                type="text"
+                [(ngModel)]="addToListSearchTerm"
+                (ngModelChange)="filterAddToListOptions()"
+                placeholder="Search lists..."
+                class="form-input" />
+            </div>
+            <!-- List options -->
+            <div class="list-options">
+              @for (list of filteredAddToListOptions; track list) {
+                <div
+                  class="list-option"
+                  [class.selected]="selectedTargetListId === list.ID"
+                  (click)="selectTargetList(list.ID)">
+                  <div class="list-option-radio">
+                    <input
+                      type="radio"
+                      [checked]="selectedTargetListId === list.ID"
+                      name="targetList" />
+                  </div>
+                  <div class="list-option-info">
+                    <span class="list-option-name">{{list.Name}}</span>
+                    <span class="list-option-entity">{{list.Entity}}</span>
+                  </div>
+                </div>
+              }
+              @if (filteredAddToListOptions.length === 0) {
+                <div class="list-options-empty">
+                  <i class="fa-solid fa-inbox"></i>
+                  <p>{{addToListSearchTerm ? 'No lists match your search' : 'No other lists available'}}</p>
+                </div>
+              }
             </div>
           </div>
+          <div class="modal-footer">
+            <button class="btn-primary" (click)="confirmAddToList()" [disabled]="!selectedTargetListId || isSaving">
+              @if (isSaving) {
+                <i class="fa-solid fa-spinner fa-spin"></i>
+              }
+              {{isSaving ? 'Adding...' : 'Add to List'}}
+            </button>
+            <button class="btn-secondary" (click)="cancelAddToListDialog()">Cancel</button>
+          </div>
         </div>
-        <div class="modal-footer">
-          <button class="btn-primary" (click)="confirmAddToList()" [disabled]="!selectedTargetListId || isSaving">
-            <i *ngIf="isSaving" class="fa-solid fa-spinner fa-spin"></i>
-            {{isSaving ? 'Adding...' : 'Add to List'}}
-          </button>
-          <button class="btn-secondary" (click)="cancelAddToListDialog()">Cancel</button>
-        </div>
-      </div>
+      }
     </div>
-  `, encapsulation: ViewEncapsulation.None, styles: ["\n    :host {\n      display: block;\n      width: 100%;\n      height: 100%;\n    }\n\n    .operations-container {\n      display: flex;\n      flex-direction: column;\n      height: 100%;\n      background: #f5f7fa;\n    }\n\n    .operations-header {\n      padding: 20px 24px;\n      background: white;\n      border-bottom: 1px solid #e0e0e0;\n    }\n\n    .header-top {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      margin-bottom: 4px;\n    }\n\n    .header-title {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n    }\n\n    .clear-all-btn {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      padding: 6px 12px;\n      background: #f5f5f5;\n      border: 1px solid #ddd;\n      border-radius: 6px;\n      font-size: 13px;\n      color: #666;\n      cursor: pointer;\n      transition: all 0.2s;\n    }\n\n    .clear-all-btn:hover {\n      background: #ffebee;\n      border-color: #f44336;\n      color: #d32f2f;\n    }\n\n    .clear-all-btn i {\n      font-size: 12px;\n    }\n\n    .header-title i {\n      font-size: 24px;\n      color: #9C27B0;\n    }\n\n    .header-title h2 {\n      margin: 0;\n      font-size: 20px;\n      font-weight: 600;\n      color: #333;\n    }\n\n    .header-subtitle {\n      color: #666;\n      font-size: 14px;\n    }\n\n    .operations-content {\n      display: grid;\n      grid-template-columns: 280px 1fr 300px;\n      gap: 16px;\n      flex: 1;\n      padding: 16px;\n      overflow: hidden;\n    }\n\n    /* Panels */\n    .selection-panel,\n    .results-panel {\n      background: white;\n      border-radius: 8px;\n      box-shadow: 0 1px 3px rgba(0,0,0,0.08);\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n    }\n\n    .venn-panel {\n      background: white;\n      border-radius: 8px;\n      box-shadow: 0 1px 3px rgba(0,0,0,0.08);\n      position: relative;\n      min-height: 400px;\n    }\n\n    .panel-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      padding: 16px;\n      border-bottom: 1px solid #f0f0f0;\n    }\n\n    .panel-header h3 {\n      margin: 0;\n      font-size: 14px;\n      font-weight: 600;\n      color: #333;\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .list-count {\n      font-size: 12px;\n      color: #999;\n      background: #f0f0f0;\n      padding: 2px 8px;\n      border-radius: 10px;\n    }\n\n    /* Entity Filter */\n    .entity-filter-section {\n      padding: 12px 16px;\n      border-bottom: 1px solid #f0f0f0;\n    }\n\n    .filter-label {\n      display: block;\n      font-size: 11px;\n      font-weight: 600;\n      color: #666;\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n      margin-bottom: 6px;\n    }\n\n    .entity-select {\n      width: 100%;\n      padding: 8px 12px;\n      font-size: 13px;\n      border: 1px solid #ddd;\n      border-radius: 6px;\n      background: white;\n      cursor: pointer;\n      outline: none;\n      transition: border-color 0.2s;\n    }\n\n    .entity-select:focus {\n      border-color: #9C27B0;\n    }\n\n    .entity-note {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      margin: 8px 12px;\n      padding: 8px 10px;\n      background: #e8f5e9;\n      border-radius: 6px;\n      font-size: 12px;\n      color: #2e7d32;\n    }\n\n    .entity-note i {\n      color: #4caf50;\n    }\n\n    /* Selected Lists */\n    .selected-lists {\n      flex: 1;\n      overflow-y: auto;\n      padding: 12px;\n    }\n\n    .selected-item {\n      display: flex;\n      align-items: center;\n      gap: 10px;\n      padding: 10px;\n      background: #f8f9fa;\n      border-radius: 6px;\n      margin-bottom: 8px;\n    }\n\n    .item-color {\n      width: 12px;\n      height: 12px;\n      border-radius: 3px;\n      flex-shrink: 0;\n    }\n\n    .item-info {\n      flex: 1;\n      min-width: 0;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .item-name {\n      font-size: 13px;\n      font-weight: 500;\n      color: #333;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .item-entity {\n      font-size: 11px;\n      color: #999;\n    }\n\n    .remove-btn {\n      background: none;\n      border: none;\n      color: #999;\n      cursor: pointer;\n      padding: 4px;\n      border-radius: 4px;\n    }\n\n    .remove-btn:hover {\n      background: #e0e0e0;\n      color: #666;\n    }\n\n    /* Add list area */\n    .add-list-area {\n      position: relative;\n    }\n\n    .add-list-search {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 8px 12px;\n      border: 1px dashed #ddd;\n      border-radius: 6px;\n      transition: border-color 0.2s;\n    }\n\n    .add-list-search:focus-within {\n      border-color: #9C27B0;\n    }\n\n    .add-list-search i {\n      color: #999;\n    }\n\n    .add-list-search input {\n      flex: 1;\n      border: none;\n      outline: none;\n      font-size: 13px;\n    }\n\n    .list-dropdown {\n      position: absolute;\n      top: 100%;\n      left: 0;\n      right: 0;\n      z-index: 100;\n      margin-top: 4px;\n    }\n\n    .dropdown-backdrop {\n      position: fixed;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n    }\n\n    .dropdown-content {\n      position: relative;\n      background: white;\n      border: 1px solid #ddd;\n      border-radius: 6px;\n      box-shadow: 0 4px 12px rgba(0,0,0,0.15);\n      max-height: 200px;\n      overflow-y: auto;\n    }\n\n    .dropdown-item {\n      display: flex;\n      flex-direction: column;\n      padding: 10px 12px;\n      cursor: pointer;\n      transition: background 0.15s;\n    }\n\n    .dropdown-item:hover {\n      background: #f5f5f5;\n    }\n\n    .dropdown-name {\n      font-size: 13px;\n      font-weight: 500;\n      color: #333;\n    }\n\n    .dropdown-entity {\n      font-size: 11px;\n      color: #999;\n    }\n\n    .lists-full {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 12px;\n      font-size: 12px;\n      color: #999;\n      background: #f8f9fa;\n      border-radius: 6px;\n    }\n\n    .entity-warning {\n      display: flex;\n      align-items: flex-start;\n      gap: 8px;\n      margin: 12px;\n      padding: 10px;\n      background: #fff8e1;\n      border-radius: 6px;\n      font-size: 12px;\n      color: #856404;\n    }\n\n    .entity-warning i {\n      color: #ffc107;\n      margin-top: 2px;\n    }\n\n    /* Quick Operations */\n    .quick-operations {\n      padding: 12px;\n      border-top: 1px solid #f0f0f0;\n    }\n\n    .quick-operations h4 {\n      margin: 0 0 10px;\n      font-size: 12px;\n      font-weight: 600;\n      color: #666;\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n    }\n\n    .operation-buttons {\n      display: flex;\n      flex-direction: column;\n      gap: 6px;\n    }\n\n    .op-btn {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 8px 12px;\n      background: #f8f9fa;\n      border: 1px solid #e0e0e0;\n      border-radius: 6px;\n      font-size: 13px;\n      color: #333;\n      cursor: pointer;\n      transition: all 0.2s;\n    }\n\n    .op-btn:hover:not(:disabled) {\n      background: #e8f4fd;\n      border-color: #9C27B0;\n      color: #9C27B0;\n    }\n\n    .op-btn:disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n\n    /* Venn Panel */\n    .venn-empty {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      height: 100%;\n      text-align: center;\n      padding: 40px;\n    }\n\n    .empty-icon {\n      width: 80px;\n      height: 80px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      background: linear-gradient(135deg, rgba(156, 39, 176, 0.1) 0%, rgba(156, 39, 176, 0.05) 100%);\n      border-radius: 50%;\n      margin-bottom: 20px;\n    }\n\n    .empty-icon i {\n      font-size: 36px;\n      color: #9C27B0;\n    }\n\n    .venn-empty h3 {\n      margin: 0 0 8px;\n      font-size: 18px;\n      color: #333;\n    }\n\n    .venn-empty p {\n      margin: 0;\n      color: #666;\n      font-size: 14px;\n      max-width: 300px;\n    }\n\n    .loading-overlay {\n      position: absolute;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      background: rgba(255,255,255,0.9);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n\n    /* Results Panel */\n    .region-details,\n    .operation-result {\n      padding: 16px;\n    }\n\n    .region-header,\n    .result-header {\n      margin-bottom: 16px;\n    }\n\n    .region-label,\n    .result-operation {\n      display: block;\n      font-size: 14px;\n      font-weight: 600;\n      color: #333;\n      margin-bottom: 4px;\n    }\n\n    .region-count,\n    .result-count {\n      font-size: 13px;\n      color: #9C27B0;\n      font-weight: 500;\n    }\n\n    .region-actions {\n      display: flex;\n      flex-direction: column;\n      gap: 8px;\n      margin-bottom: 16px;\n    }\n\n    .action-btn {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 10px 14px;\n      background: white;\n      border: 1px solid #ddd;\n      border-radius: 6px;\n      font-size: 13px;\n      color: #333;\n      cursor: pointer;\n      transition: all 0.2s;\n    }\n\n    .action-btn:hover {\n      background: #f5f5f5;\n    }\n\n    .action-btn.primary {\n      background: #9C27B0;\n      border-color: #9C27B0;\n      color: white;\n    }\n\n    .action-btn.primary:hover {\n      background: #7B1FA2;\n    }\n\n    .record-preview h5 {\n      margin: 0 0 8px;\n      font-size: 12px;\n      color: #666;\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n    }\n\n    .preview-list {\n      max-height: 200px;\n      overflow-y: auto;\n    }\n\n    .preview-card {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      padding: 10px 12px;\n      background: #f8f9fa;\n      border-radius: 6px;\n      margin-bottom: 6px;\n      transition: all 0.15s ease;\n    }\n\n    .preview-card:hover {\n      background: #eef1f5;\n      box-shadow: 0 1px 3px rgba(0,0,0,0.08);\n    }\n\n    .preview-card-content {\n      flex: 1;\n      min-width: 0;\n      display: flex;\n      flex-direction: column;\n      gap: 2px;\n    }\n\n    .preview-name {\n      font-size: 13px;\n      font-weight: 500;\n      color: #333;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .preview-secondary {\n      font-size: 11px;\n      color: #888;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .preview-open-btn {\n      background: none;\n      border: none;\n      color: #9C27B0;\n      cursor: pointer;\n      padding: 6px 8px;\n      border-radius: 4px;\n      opacity: 0.6;\n      transition: all 0.15s ease;\n      flex-shrink: 0;\n    }\n\n    .preview-open-btn:hover {\n      opacity: 1;\n      background: rgba(156, 39, 176, 0.1);\n    }\n\n    .preview-loading {\n      padding: 12px;\n      text-align: center;\n    }\n\n    .results-empty {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      height: 200px;\n      text-align: center;\n      color: #999;\n    }\n\n    .results-empty i {\n      font-size: 32px;\n      margin-bottom: 12px;\n      opacity: 0.5;\n    }\n\n    .results-empty p {\n      font-size: 13px;\n      margin: 0;\n      max-width: 200px;\n    }\n\n    /* Modal */\n    .modal-overlay {\n      position: fixed;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      background: rgba(0,0,0,0.5);\n      z-index: 1000;\n    }\n\n    .modal-dialog {\n      position: fixed;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n      background: white;\n      border-radius: 12px;\n      width: 420px;\n      max-width: 90vw;\n      z-index: 1001;\n    }\n\n    .modal-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      padding: 16px 20px;\n      border-bottom: 1px solid #e0e0e0;\n    }\n\n    .modal-header h3 {\n      margin: 0;\n      font-size: 16px;\n      color: #333;\n    }\n\n    .modal-close {\n      background: none;\n      border: none;\n      color: #999;\n      cursor: pointer;\n      padding: 4px 8px;\n    }\n\n    .modal-body {\n      padding: 20px;\n    }\n\n    .form-group {\n      margin-bottom: 16px;\n    }\n\n    .form-group label {\n      display: block;\n      margin-bottom: 6px;\n      font-size: 13px;\n      font-weight: 500;\n      color: #666;\n    }\n\n    .form-input {\n      width: 100%;\n      padding: 10px 12px;\n      border: 1px solid #ddd;\n      border-radius: 6px;\n      font-size: 14px;\n      box-sizing: border-box;\n    }\n\n    .form-input:focus {\n      outline: none;\n      border-color: #9C27B0;\n      box-shadow: 0 0 0 3px rgba(156, 39, 176, 0.1);\n    }\n\n    textarea.form-input {\n      resize: vertical;\n    }\n\n    .form-info {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 10px;\n      background: #f8f9fa;\n      border-radius: 6px;\n      font-size: 13px;\n      color: #666;\n    }\n\n    .form-info i {\n      color: #9C27B0;\n    }\n\n    .modal-footer {\n      display: flex;\n      gap: 12px;\n      padding: 16px 20px;\n      border-top: 1px solid #e0e0e0;\n      background: #fafafa;\n    }\n\n    .btn-primary {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 10px 20px;\n      background: #9C27B0;\n      color: white;\n      border: none;\n      border-radius: 6px;\n      font-size: 14px;\n      cursor: pointer;\n    }\n\n    .btn-primary:hover:not(:disabled) {\n      background: #7B1FA2;\n    }\n\n    .btn-primary:disabled {\n      opacity: 0.6;\n      cursor: not-allowed;\n    }\n\n    .btn-secondary {\n      padding: 10px 20px;\n      background: white;\n      color: #666;\n      border: 1px solid #ddd;\n      border-radius: 6px;\n      font-size: 14px;\n      cursor: pointer;\n    }\n\n    .btn-secondary:hover {\n      background: #f5f5f5;\n    }\n\n    /* Add to List Dialog */\n    .add-to-list-dialog {\n      width: 480px;\n    }\n\n    .add-to-list-dialog .modal-body {\n      max-height: 400px;\n      overflow-y: auto;\n    }\n\n    .list-search {\n      display: flex;\n      align-items: center;\n      gap: 10px;\n      padding: 10px 12px;\n      background: #f8f9fa;\n      border: 1px solid #e0e0e0;\n      border-radius: 6px;\n      margin-bottom: 12px;\n    }\n\n    .list-search i {\n      color: #999;\n      flex-shrink: 0;\n    }\n\n    .list-search .form-input {\n      flex: 1;\n      border: none;\n      background: transparent;\n      padding: 0;\n      font-size: 14px;\n    }\n\n    .list-search .form-input:focus {\n      box-shadow: none;\n      outline: none;\n    }\n\n    .list-options {\n      border: 1px solid #e0e0e0;\n      border-radius: 6px;\n      max-height: 250px;\n      overflow-y: auto;\n    }\n\n    .list-option {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      padding: 12px;\n      cursor: pointer;\n      transition: background 0.15s;\n      border-bottom: 1px solid #f0f0f0;\n    }\n\n    .list-option:last-child {\n      border-bottom: none;\n    }\n\n    .list-option:hover {\n      background: #f8f9fa;\n    }\n\n    .list-option.selected {\n      background: #f3e5f5;\n    }\n\n    .list-option-radio {\n      flex-shrink: 0;\n    }\n\n    .list-option-radio input[type=\"radio\"] {\n      width: 18px;\n      height: 18px;\n      cursor: pointer;\n      accent-color: #9C27B0;\n    }\n\n    .list-option-info {\n      flex: 1;\n      min-width: 0;\n      display: flex;\n      flex-direction: column;\n      gap: 2px;\n    }\n\n    .list-option-name {\n      font-size: 14px;\n      font-weight: 500;\n      color: #333;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .list-option-entity {\n      font-size: 12px;\n      color: #888;\n    }\n\n    .list-options-empty {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      padding: 30px 20px;\n      text-align: center;\n      color: #999;\n    }\n\n    .list-options-empty i {\n      font-size: 28px;\n      margin-bottom: 10px;\n      opacity: 0.5;\n    }\n\n    .list-options-empty p {\n      margin: 0;\n      font-size: 13px;\n    }\n\n    /* Responsive */\n    @media (max-width: 1024px) {\n      .operations-content {\n        grid-template-columns: 1fr;\n        grid-template-rows: auto 1fr auto;\n      }\n\n      .selection-panel {\n        order: 1;\n      }\n\n      .venn-panel {\n        order: 2;\n        min-height: 300px;\n      }\n\n      .results-panel {\n        order: 3;\n      }\n    }\n  "] }]
+    `, encapsulation: ViewEncapsulation.None, styles: ["\n    :host {\n      display: block;\n      width: 100%;\n      height: 100%;\n    }\n\n    .operations-container {\n      display: flex;\n      flex-direction: column;\n      height: 100%;\n      background: #f5f7fa;\n    }\n\n    .operations-header {\n      padding: 20px 24px;\n      background: white;\n      border-bottom: 1px solid #e0e0e0;\n    }\n\n    .header-top {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      margin-bottom: 4px;\n    }\n\n    .header-title {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n    }\n\n    .clear-all-btn {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      padding: 6px 12px;\n      background: #f5f5f5;\n      border: 1px solid #ddd;\n      border-radius: 6px;\n      font-size: 13px;\n      color: #666;\n      cursor: pointer;\n      transition: all 0.2s;\n    }\n\n    .clear-all-btn:hover {\n      background: #ffebee;\n      border-color: #f44336;\n      color: #d32f2f;\n    }\n\n    .clear-all-btn i {\n      font-size: 12px;\n    }\n\n    .header-title i {\n      font-size: 24px;\n      color: #9C27B0;\n    }\n\n    .header-title h2 {\n      margin: 0;\n      font-size: 20px;\n      font-weight: 600;\n      color: #333;\n    }\n\n    .header-subtitle {\n      color: #666;\n      font-size: 14px;\n    }\n\n    .operations-content {\n      display: grid;\n      grid-template-columns: 280px 1fr 300px;\n      gap: 16px;\n      flex: 1;\n      padding: 16px;\n      overflow: hidden;\n    }\n\n    /* Panels */\n    .selection-panel,\n    .results-panel {\n      background: white;\n      border-radius: 8px;\n      box-shadow: 0 1px 3px rgba(0,0,0,0.08);\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n    }\n\n    .venn-panel {\n      background: white;\n      border-radius: 8px;\n      box-shadow: 0 1px 3px rgba(0,0,0,0.08);\n      position: relative;\n      min-height: 400px;\n    }\n\n    .panel-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      padding: 16px;\n      border-bottom: 1px solid #f0f0f0;\n    }\n\n    .panel-header h3 {\n      margin: 0;\n      font-size: 14px;\n      font-weight: 600;\n      color: #333;\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .list-count {\n      font-size: 12px;\n      color: #999;\n      background: #f0f0f0;\n      padding: 2px 8px;\n      border-radius: 10px;\n    }\n\n    /* Entity Filter */\n    .entity-filter-section {\n      padding: 12px 16px;\n      border-bottom: 1px solid #f0f0f0;\n    }\n\n    .filter-label {\n      display: block;\n      font-size: 11px;\n      font-weight: 600;\n      color: #666;\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n      margin-bottom: 6px;\n    }\n\n    .entity-select {\n      width: 100%;\n      padding: 8px 12px;\n      font-size: 13px;\n      border: 1px solid #ddd;\n      border-radius: 6px;\n      background: white;\n      cursor: pointer;\n      outline: none;\n      transition: border-color 0.2s;\n    }\n\n    .entity-select:focus {\n      border-color: #9C27B0;\n    }\n\n    .entity-note {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      margin: 8px 12px;\n      padding: 8px 10px;\n      background: #e8f5e9;\n      border-radius: 6px;\n      font-size: 12px;\n      color: #2e7d32;\n    }\n\n    .entity-note i {\n      color: #4caf50;\n    }\n\n    /* Selected Lists */\n    .selected-lists {\n      flex: 1;\n      overflow-y: auto;\n      padding: 12px;\n    }\n\n    .selected-item {\n      display: flex;\n      align-items: center;\n      gap: 10px;\n      padding: 10px;\n      background: #f8f9fa;\n      border-radius: 6px;\n      margin-bottom: 8px;\n    }\n\n    .item-color {\n      width: 12px;\n      height: 12px;\n      border-radius: 3px;\n      flex-shrink: 0;\n    }\n\n    .item-info {\n      flex: 1;\n      min-width: 0;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .item-name {\n      font-size: 13px;\n      font-weight: 500;\n      color: #333;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .item-entity {\n      font-size: 11px;\n      color: #999;\n    }\n\n    .remove-btn {\n      background: none;\n      border: none;\n      color: #999;\n      cursor: pointer;\n      padding: 4px;\n      border-radius: 4px;\n    }\n\n    .remove-btn:hover {\n      background: #e0e0e0;\n      color: #666;\n    }\n\n    /* Add list area */\n    .add-list-area {\n      position: relative;\n    }\n\n    .add-list-search {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 8px 12px;\n      border: 1px dashed #ddd;\n      border-radius: 6px;\n      transition: border-color 0.2s;\n    }\n\n    .add-list-search:focus-within {\n      border-color: #9C27B0;\n    }\n\n    .add-list-search i {\n      color: #999;\n    }\n\n    .add-list-search input {\n      flex: 1;\n      border: none;\n      outline: none;\n      font-size: 13px;\n    }\n\n    .list-dropdown {\n      position: absolute;\n      top: 100%;\n      left: 0;\n      right: 0;\n      z-index: 100;\n      margin-top: 4px;\n    }\n\n    .dropdown-backdrop {\n      position: fixed;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n    }\n\n    .dropdown-content {\n      position: relative;\n      background: white;\n      border: 1px solid #ddd;\n      border-radius: 6px;\n      box-shadow: 0 4px 12px rgba(0,0,0,0.15);\n      max-height: 200px;\n      overflow-y: auto;\n    }\n\n    .dropdown-item {\n      display: flex;\n      flex-direction: column;\n      padding: 10px 12px;\n      cursor: pointer;\n      transition: background 0.15s;\n    }\n\n    .dropdown-item:hover {\n      background: #f5f5f5;\n    }\n\n    .dropdown-name {\n      font-size: 13px;\n      font-weight: 500;\n      color: #333;\n    }\n\n    .dropdown-entity {\n      font-size: 11px;\n      color: #999;\n    }\n\n    .lists-full {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 12px;\n      font-size: 12px;\n      color: #999;\n      background: #f8f9fa;\n      border-radius: 6px;\n    }\n\n    .entity-warning {\n      display: flex;\n      align-items: flex-start;\n      gap: 8px;\n      margin: 12px;\n      padding: 10px;\n      background: #fff8e1;\n      border-radius: 6px;\n      font-size: 12px;\n      color: #856404;\n    }\n\n    .entity-warning i {\n      color: #ffc107;\n      margin-top: 2px;\n    }\n\n    /* Quick Operations */\n    .quick-operations {\n      padding: 12px;\n      border-top: 1px solid #f0f0f0;\n    }\n\n    .quick-operations h4 {\n      margin: 0 0 10px;\n      font-size: 12px;\n      font-weight: 600;\n      color: #666;\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n    }\n\n    .operation-buttons {\n      display: flex;\n      flex-direction: column;\n      gap: 6px;\n    }\n\n    .op-btn {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 8px 12px;\n      background: #f8f9fa;\n      border: 1px solid #e0e0e0;\n      border-radius: 6px;\n      font-size: 13px;\n      color: #333;\n      cursor: pointer;\n      transition: all 0.2s;\n    }\n\n    .op-btn:hover:not(:disabled) {\n      background: #e8f4fd;\n      border-color: #9C27B0;\n      color: #9C27B0;\n    }\n\n    .op-btn:disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n\n    /* Venn Panel */\n    .venn-empty {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      height: 100%;\n      text-align: center;\n      padding: 40px;\n    }\n\n    .empty-icon {\n      width: 80px;\n      height: 80px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      background: linear-gradient(135deg, rgba(156, 39, 176, 0.1) 0%, rgba(156, 39, 176, 0.05) 100%);\n      border-radius: 50%;\n      margin-bottom: 20px;\n    }\n\n    .empty-icon i {\n      font-size: 36px;\n      color: #9C27B0;\n    }\n\n    .venn-empty h3 {\n      margin: 0 0 8px;\n      font-size: 18px;\n      color: #333;\n    }\n\n    .venn-empty p {\n      margin: 0;\n      color: #666;\n      font-size: 14px;\n      max-width: 300px;\n    }\n\n    .loading-overlay {\n      position: absolute;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      background: rgba(255,255,255,0.9);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n\n    /* Results Panel */\n    .region-details,\n    .operation-result {\n      padding: 16px;\n    }\n\n    .region-header,\n    .result-header {\n      margin-bottom: 16px;\n    }\n\n    .region-label,\n    .result-operation {\n      display: block;\n      font-size: 14px;\n      font-weight: 600;\n      color: #333;\n      margin-bottom: 4px;\n    }\n\n    .region-count,\n    .result-count {\n      font-size: 13px;\n      color: #9C27B0;\n      font-weight: 500;\n    }\n\n    .region-actions {\n      display: flex;\n      flex-direction: column;\n      gap: 8px;\n      margin-bottom: 16px;\n    }\n\n    .action-btn {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 10px 14px;\n      background: white;\n      border: 1px solid #ddd;\n      border-radius: 6px;\n      font-size: 13px;\n      color: #333;\n      cursor: pointer;\n      transition: all 0.2s;\n    }\n\n    .action-btn:hover {\n      background: #f5f5f5;\n    }\n\n    .action-btn.primary {\n      background: #9C27B0;\n      border-color: #9C27B0;\n      color: white;\n    }\n\n    .action-btn.primary:hover {\n      background: #7B1FA2;\n    }\n\n    .record-preview h5 {\n      margin: 0 0 8px;\n      font-size: 12px;\n      color: #666;\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n    }\n\n    .preview-list {\n      max-height: 200px;\n      overflow-y: auto;\n    }\n\n    .preview-card {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      padding: 10px 12px;\n      background: #f8f9fa;\n      border-radius: 6px;\n      margin-bottom: 6px;\n      transition: all 0.15s ease;\n    }\n\n    .preview-card:hover {\n      background: #eef1f5;\n      box-shadow: 0 1px 3px rgba(0,0,0,0.08);\n    }\n\n    .preview-card-content {\n      flex: 1;\n      min-width: 0;\n      display: flex;\n      flex-direction: column;\n      gap: 2px;\n    }\n\n    .preview-name {\n      font-size: 13px;\n      font-weight: 500;\n      color: #333;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .preview-secondary {\n      font-size: 11px;\n      color: #888;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .preview-open-btn {\n      background: none;\n      border: none;\n      color: #9C27B0;\n      cursor: pointer;\n      padding: 6px 8px;\n      border-radius: 4px;\n      opacity: 0.6;\n      transition: all 0.15s ease;\n      flex-shrink: 0;\n    }\n\n    .preview-open-btn:hover {\n      opacity: 1;\n      background: rgba(156, 39, 176, 0.1);\n    }\n\n    .preview-loading {\n      padding: 12px;\n      text-align: center;\n    }\n\n    .results-empty {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      height: 200px;\n      text-align: center;\n      color: #999;\n    }\n\n    .results-empty i {\n      font-size: 32px;\n      margin-bottom: 12px;\n      opacity: 0.5;\n    }\n\n    .results-empty p {\n      font-size: 13px;\n      margin: 0;\n      max-width: 200px;\n    }\n\n    /* Modal */\n    .modal-overlay {\n      position: fixed;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      background: rgba(0,0,0,0.5);\n      z-index: 1000;\n    }\n\n    .modal-dialog {\n      position: fixed;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n      background: white;\n      border-radius: 12px;\n      width: 420px;\n      max-width: 90vw;\n      z-index: 1001;\n    }\n\n    .modal-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      padding: 16px 20px;\n      border-bottom: 1px solid #e0e0e0;\n    }\n\n    .modal-header h3 {\n      margin: 0;\n      font-size: 16px;\n      color: #333;\n    }\n\n    .modal-close {\n      background: none;\n      border: none;\n      color: #999;\n      cursor: pointer;\n      padding: 4px 8px;\n    }\n\n    .modal-body {\n      padding: 20px;\n    }\n\n    .form-group {\n      margin-bottom: 16px;\n    }\n\n    .form-group label {\n      display: block;\n      margin-bottom: 6px;\n      font-size: 13px;\n      font-weight: 500;\n      color: #666;\n    }\n\n    .form-input {\n      width: 100%;\n      padding: 10px 12px;\n      border: 1px solid #ddd;\n      border-radius: 6px;\n      font-size: 14px;\n      box-sizing: border-box;\n    }\n\n    .form-input:focus {\n      outline: none;\n      border-color: #9C27B0;\n      box-shadow: 0 0 0 3px rgba(156, 39, 176, 0.1);\n    }\n\n    textarea.form-input {\n      resize: vertical;\n    }\n\n    .form-info {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 10px;\n      background: #f8f9fa;\n      border-radius: 6px;\n      font-size: 13px;\n      color: #666;\n    }\n\n    .form-info i {\n      color: #9C27B0;\n    }\n\n    .modal-footer {\n      display: flex;\n      gap: 12px;\n      padding: 16px 20px;\n      border-top: 1px solid #e0e0e0;\n      background: #fafafa;\n    }\n\n    .btn-primary {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 10px 20px;\n      background: #9C27B0;\n      color: white;\n      border: none;\n      border-radius: 6px;\n      font-size: 14px;\n      cursor: pointer;\n    }\n\n    .btn-primary:hover:not(:disabled) {\n      background: #7B1FA2;\n    }\n\n    .btn-primary:disabled {\n      opacity: 0.6;\n      cursor: not-allowed;\n    }\n\n    .btn-secondary {\n      padding: 10px 20px;\n      background: white;\n      color: #666;\n      border: 1px solid #ddd;\n      border-radius: 6px;\n      font-size: 14px;\n      cursor: pointer;\n    }\n\n    .btn-secondary:hover {\n      background: #f5f5f5;\n    }\n\n    /* Add to List Dialog */\n    .add-to-list-dialog {\n      width: 480px;\n    }\n\n    .add-to-list-dialog .modal-body {\n      max-height: 400px;\n      overflow-y: auto;\n    }\n\n    .list-search {\n      display: flex;\n      align-items: center;\n      gap: 10px;\n      padding: 10px 12px;\n      background: #f8f9fa;\n      border: 1px solid #e0e0e0;\n      border-radius: 6px;\n      margin-bottom: 12px;\n    }\n\n    .list-search i {\n      color: #999;\n      flex-shrink: 0;\n    }\n\n    .list-search .form-input {\n      flex: 1;\n      border: none;\n      background: transparent;\n      padding: 0;\n      font-size: 14px;\n    }\n\n    .list-search .form-input:focus {\n      box-shadow: none;\n      outline: none;\n    }\n\n    .list-options {\n      border: 1px solid #e0e0e0;\n      border-radius: 6px;\n      max-height: 250px;\n      overflow-y: auto;\n    }\n\n    .list-option {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      padding: 12px;\n      cursor: pointer;\n      transition: background 0.15s;\n      border-bottom: 1px solid #f0f0f0;\n    }\n\n    .list-option:last-child {\n      border-bottom: none;\n    }\n\n    .list-option:hover {\n      background: #f8f9fa;\n    }\n\n    .list-option.selected {\n      background: #f3e5f5;\n    }\n\n    .list-option-radio {\n      flex-shrink: 0;\n    }\n\n    .list-option-radio input[type=\"radio\"] {\n      width: 18px;\n      height: 18px;\n      cursor: pointer;\n      accent-color: #9C27B0;\n    }\n\n    .list-option-info {\n      flex: 1;\n      min-width: 0;\n      display: flex;\n      flex-direction: column;\n      gap: 2px;\n    }\n\n    .list-option-name {\n      font-size: 14px;\n      font-weight: 500;\n      color: #333;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .list-option-entity {\n      font-size: 12px;\n      color: #888;\n    }\n\n    .list-options-empty {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      padding: 30px 20px;\n      text-align: center;\n      color: #999;\n    }\n\n    .list-options-empty i {\n      font-size: 28px;\n      margin-bottom: 10px;\n      opacity: 0.5;\n    }\n\n    .list-options-empty p {\n      margin: 0;\n      font-size: 13px;\n    }\n\n    /* Responsive */\n    @media (max-width: 1024px) {\n      .operations-content {\n        grid-template-columns: 1fr;\n        grid-template-rows: auto 1fr auto;\n      }\n\n      .selection-panel {\n        order: 1;\n      }\n\n      .venn-panel {\n        order: 2;\n        min-height: 300px;\n      }\n\n      .results-panel {\n        order: 3;\n      }\n    }\n  "] }]
     }], () => [{ type: i0.ChangeDetectorRef }, { type: i1.ListSetOperationsService }, { type: i2.MJNotificationService }], null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ListsOperationsResource, { className: "ListsOperationsResource", filePath: "src/Lists/components/lists-operations-resource.component.ts", lineNumber: 1248 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ListsOperationsResource, { className: "ListsOperationsResource", filePath: "src/lists/components/lists-operations-resource.component.ts", lineNumber: 1290 }); })();
 //# sourceMappingURL=lists-operations-resource.component.js.map