@memberjunction/ng-entity-viewer 5.43.0 → 5.44.0

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

@@ -1,10 +1,12 @@
 import { Component, Input, Output, EventEmitter, ViewEncapsulation } from '@angular/core';
 import { UserViewEngine } from '@memberjunction/core-entities';
 import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
 import { UUIDsEqual } from '@memberjunction/global';
 import { BaseAngularComponent } from '@memberjunction/ng-base-types';
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/forms";
+import * as i2 from "@memberjunction/ng-ui-components";
 const _forTrack0 = ($index, $item) => $item.id;
 function ViewSelectorComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
@@ -30,12 +32,12 @@ function ViewSelectorComponent_Conditional_9_Conditional_18_Template(rf, ctx) {
     i0.ɵɵelement(0, "i", 32);
 } }
 function ViewSelectorComponent_Conditional_9_Conditional_19_For_8_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 44);
+    i0.ɵɵelementStart(0, "span", 45);
     i0.ɵɵtext(1, "Default");
     i0.ɵɵelementEnd();
 } }
 function ViewSelectorComponent_Conditional_9_Conditional_19_For_8_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 45);
+    i0.ɵɵelementStart(0, "div", 46);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -45,7 +47,7 @@ function ViewSelectorComponent_Conditional_9_Conditional_19_For_8_Conditional_7_
 } }
 function ViewSelectorComponent_Conditional_9_Conditional_19_For_8_Conditional_8_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
-    i0.ɵɵelement(1, "i", 54);
+    i0.ɵɵelement(1, "i", 55);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -56,7 +58,7 @@ function ViewSelectorComponent_Conditional_9_Conditional_19_For_8_Conditional_8_
 } }
 function ViewSelectorComponent_Conditional_9_Conditional_19_For_8_Conditional_8_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
-    i0.ɵɵelement(1, "i", 55);
+    i0.ɵɵelement(1, "i", 56);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -67,7 +69,7 @@ function ViewSelectorComponent_Conditional_9_Conditional_19_For_8_Conditional_8_
 } }
 function ViewSelectorComponent_Conditional_9_Conditional_19_For_8_Conditional_8_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
-    i0.ɵɵelement(1, "i", 56);
+    i0.ɵɵelement(1, "i", 57);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -77,7 +79,7 @@ function ViewSelectorComponent_Conditional_9_Conditional_19_For_8_Conditional_8_
     i0.ɵɵtextInterpolate1(" ", ctx_r1.GetViewSortInfo(view_r5));
 } }
 function ViewSelectorComponent_Conditional_9_Conditional_19_For_8_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 46);
+    i0.ɵɵelementStart(0, "div", 47);
     i0.ɵɵconditionalCreate(1, ViewSelectorComponent_Conditional_9_Conditional_19_For_8_Conditional_8_Conditional_1_Template, 3, 2, "span");
     i0.ɵɵconditionalCreate(2, ViewSelectorComponent_Conditional_9_Conditional_19_For_8_Conditional_8_Conditional_2_Template, 3, 2, "span");
     i0.ɵɵconditionalCreate(3, ViewSelectorComponent_Conditional_9_Conditional_19_For_8_Conditional_8_Conditional_3_Template, 3, 1, "span");
@@ -100,26 +102,26 @@ function ViewSelectorComponent_Conditional_9_Conditional_19_For_8_Template(rf, c
     i0.ɵɵelementStart(0, "div", 27);
     i0.ɵɵlistener("click", function ViewSelectorComponent_Conditional_9_Conditional_19_For_8_Template_div_click_0_listener() { const view_r5 = i0.ɵɵrestoreView(_r4).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.SelectView(view_r5)); });
     i0.ɵɵelementStart(1, "div", 28);
-    i0.ɵɵelement(2, "i", 43);
+    i0.ɵɵelement(2, "i", 44);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(3, "div", 30)(4, "div", 31);
     i0.ɵɵtext(5);
-    i0.ɵɵconditionalCreate(6, ViewSelectorComponent_Conditional_9_Conditional_19_For_8_Conditional_6_Template, 2, 0, "span", 44);
+    i0.ɵɵconditionalCreate(6, ViewSelectorComponent_Conditional_9_Conditional_19_For_8_Conditional_6_Template, 2, 0, "span", 45);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(7, ViewSelectorComponent_Conditional_9_Conditional_19_For_8_Conditional_7_Template, 2, 1, "div", 45);
-    i0.ɵɵconditionalCreate(8, ViewSelectorComponent_Conditional_9_Conditional_19_For_8_Conditional_8_Template, 4, 3, "div", 46);
+    i0.ɵɵconditionalCreate(7, ViewSelectorComponent_Conditional_9_Conditional_19_For_8_Conditional_7_Template, 2, 1, "div", 46);
+    i0.ɵɵconditionalCreate(8, ViewSelectorComponent_Conditional_9_Conditional_19_For_8_Conditional_8_Template, 4, 3, "div", 47);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "div", 47)(10, "button", 48);
+    i0.ɵɵelementStart(9, "div", 48)(10, "button", 49);
     i0.ɵɵlistener("click", function ViewSelectorComponent_Conditional_9_Conditional_19_For_8_Template_button_click_10_listener($event) { const view_r5 = i0.ɵɵrestoreView(_r4).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnDuplicateView(view_r5.id, $event)); });
-    i0.ɵɵelement(11, "i", 49);
+    i0.ɵɵelement(11, "i", 50);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(12, "button", 50);
+    i0.ɵɵelementStart(12, "button", 51);
     i0.ɵɵlistener("click", function ViewSelectorComponent_Conditional_9_Conditional_19_For_8_Template_button_click_12_listener($event) { const view_r5 = i0.ɵɵrestoreView(_r4).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnConfigureViewById(view_r5.id, $event)); });
-    i0.ɵɵelement(13, "i", 51);
+    i0.ɵɵelement(13, "i", 52);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(14, "button", 52);
+    i0.ɵɵelementStart(14, "button", 53);
     i0.ɵɵlistener("click", function ViewSelectorComponent_Conditional_9_Conditional_19_For_8_Template_button_click_14_listener($event) { const view_r5 = i0.ɵɵrestoreView(_r4).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnOpenViewInTab(view_r5.id, $event)); });
-    i0.ɵɵelement(15, "i", 53);
+    i0.ɵɵelement(15, "i", 54);
     i0.ɵɵelementEnd()();
     i0.ɵɵconditionalCreate(16, ViewSelectorComponent_Conditional_9_Conditional_19_For_8_Conditional_16_Template, 1, 0, "i", 32);
     i0.ɵɵelementEnd();
@@ -141,15 +143,15 @@ function ViewSelectorComponent_Conditional_9_Conditional_19_For_8_Template(rf, c
     i0.ɵɵconditional(ctx_r1.SelectedViewID === view_r5.id ? 16 : -1);
 } }
 function ViewSelectorComponent_Conditional_9_Conditional_19_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 26)(1, "div", 39);
-    i0.ɵɵelement(2, "i", 40);
+    i0.ɵɵelementStart(0, "div", 26)(1, "div", 40);
+    i0.ɵɵelement(2, "i", 41);
     i0.ɵɵelementStart(3, "span");
     i0.ɵɵtext(4, "My Views");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "span", 41);
+    i0.ɵɵelementStart(5, "span", 42);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd()();
-    i0.ɵɵrepeaterCreate(7, ViewSelectorComponent_Conditional_9_Conditional_19_For_8_Template, 17, 9, "div", 42, _forTrack0);
+    i0.ɵɵrepeaterCreate(7, ViewSelectorComponent_Conditional_9_Conditional_19_For_8_Template, 17, 9, "div", 43, _forTrack0);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -159,17 +161,17 @@ function ViewSelectorComponent_Conditional_9_Conditional_19_Template(rf, ctx) {
     i0.ɵɵrepeater(ctx_r1.FilteredMyViews);
 } }
 function ViewSelectorComponent_Conditional_9_Conditional_20_For_8_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 60);
+    i0.ɵɵelementStart(0, "span", 61);
     i0.ɵɵtext(1, "View Only");
     i0.ɵɵelementEnd();
 } }
 function ViewSelectorComponent_Conditional_9_Conditional_20_For_8_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 61);
+    i0.ɵɵelementStart(0, "span", 62);
     i0.ɵɵtext(1, "Can Edit");
     i0.ɵɵelementEnd();
 } }
 function ViewSelectorComponent_Conditional_9_Conditional_20_For_8_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 45);
+    i0.ɵɵelementStart(0, "div", 46);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -179,7 +181,7 @@ function ViewSelectorComponent_Conditional_9_Conditional_20_For_8_Conditional_8_
 } }
 function ViewSelectorComponent_Conditional_9_Conditional_20_For_8_Conditional_9_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
-    i0.ɵɵelement(1, "i", 54);
+    i0.ɵɵelement(1, "i", 55);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -190,7 +192,7 @@ function ViewSelectorComponent_Conditional_9_Conditional_20_For_8_Conditional_9_
 } }
 function ViewSelectorComponent_Conditional_9_Conditional_20_For_8_Conditional_9_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
-    i0.ɵɵelement(1, "i", 55);
+    i0.ɵɵelement(1, "i", 56);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -200,7 +202,7 @@ function ViewSelectorComponent_Conditional_9_Conditional_20_For_8_Conditional_9_
     i0.ɵɵtextInterpolate2(" ", ctx_r1.GetViewColumnCount(view_r7), " col", ctx_r1.GetViewColumnCount(view_r7) !== 1 ? "s" : "");
 } }
 function ViewSelectorComponent_Conditional_9_Conditional_20_For_8_Conditional_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 46);
+    i0.ɵɵelementStart(0, "div", 47);
     i0.ɵɵconditionalCreate(1, ViewSelectorComponent_Conditional_9_Conditional_20_For_8_Conditional_9_Conditional_1_Template, 3, 2, "span");
     i0.ɵɵconditionalCreate(2, ViewSelectorComponent_Conditional_9_Conditional_20_For_8_Conditional_9_Conditional_2_Template, 3, 2, "span");
     i0.ɵɵelementEnd();
@@ -214,9 +216,9 @@ function ViewSelectorComponent_Conditional_9_Conditional_20_For_8_Conditional_9_
 } }
 function ViewSelectorComponent_Conditional_9_Conditional_20_For_8_Conditional_13_Template(rf, ctx) { if (rf & 1) {
     const _r8 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 50);
+    i0.ɵɵelementStart(0, "button", 51);
     i0.ɵɵlistener("click", function ViewSelectorComponent_Conditional_9_Conditional_20_For_8_Conditional_13_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r8); const view_r7 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnConfigureViewById(view_r7.id, $event)); });
-    i0.ɵɵelement(1, "i", 51);
+    i0.ɵɵelement(1, "i", 52);
     i0.ɵɵelementEnd();
 } }
 function ViewSelectorComponent_Conditional_9_Conditional_20_For_8_Conditional_14_Template(rf, ctx) { if (rf & 1) {
@@ -226,21 +228,21 @@ function ViewSelectorComponent_Conditional_9_Conditional_20_For_8_Template(rf, c
     const _r6 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 27);
     i0.ɵɵlistener("click", function ViewSelectorComponent_Conditional_9_Conditional_20_For_8_Template_div_click_0_listener() { const view_r7 = i0.ɵɵrestoreView(_r6).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.SelectView(view_r7)); });
-    i0.ɵɵelementStart(1, "div", 58);
-    i0.ɵɵelement(2, "i", 59);
+    i0.ɵɵelementStart(1, "div", 59);
+    i0.ɵɵelement(2, "i", 60);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(3, "div", 30)(4, "div", 31);
     i0.ɵɵtext(5);
-    i0.ɵɵconditionalCreate(6, ViewSelectorComponent_Conditional_9_Conditional_20_For_8_Conditional_6_Template, 2, 0, "span", 60)(7, ViewSelectorComponent_Conditional_9_Conditional_20_For_8_Conditional_7_Template, 2, 0, "span", 61);
+    i0.ɵɵconditionalCreate(6, ViewSelectorComponent_Conditional_9_Conditional_20_For_8_Conditional_6_Template, 2, 0, "span", 61)(7, ViewSelectorComponent_Conditional_9_Conditional_20_For_8_Conditional_7_Template, 2, 0, "span", 62);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(8, ViewSelectorComponent_Conditional_9_Conditional_20_For_8_Conditional_8_Template, 2, 1, "div", 45);
-    i0.ɵɵconditionalCreate(9, ViewSelectorComponent_Conditional_9_Conditional_20_For_8_Conditional_9_Template, 3, 2, "div", 46);
+    i0.ɵɵconditionalCreate(8, ViewSelectorComponent_Conditional_9_Conditional_20_For_8_Conditional_8_Template, 2, 1, "div", 46);
+    i0.ɵɵconditionalCreate(9, ViewSelectorComponent_Conditional_9_Conditional_20_For_8_Conditional_9_Template, 3, 2, "div", 47);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(10, "div", 47)(11, "button", 62);
+    i0.ɵɵelementStart(10, "div", 48)(11, "button", 63);
     i0.ɵɵlistener("click", function ViewSelectorComponent_Conditional_9_Conditional_20_For_8_Template_button_click_11_listener($event) { const view_r7 = i0.ɵɵrestoreView(_r6).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnDuplicateView(view_r7.id, $event)); });
-    i0.ɵɵelement(12, "i", 49);
+    i0.ɵɵelement(12, "i", 50);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(13, ViewSelectorComponent_Conditional_9_Conditional_20_For_8_Conditional_13_Template, 2, 0, "button", 63);
+    i0.ɵɵconditionalCreate(13, ViewSelectorComponent_Conditional_9_Conditional_20_For_8_Conditional_13_Template, 2, 0, "button", 64);
     i0.ɵɵelementEnd();
     i0.ɵɵconditionalCreate(14, ViewSelectorComponent_Conditional_9_Conditional_20_For_8_Conditional_14_Template, 1, 0, "i", 32);
     i0.ɵɵelementEnd();
@@ -262,15 +264,15 @@ function ViewSelectorComponent_Conditional_9_Conditional_20_For_8_Template(rf, c
     i0.ɵɵconditional(ctx_r1.SelectedViewID === view_r7.id ? 14 : -1);
 } }
 function ViewSelectorComponent_Conditional_9_Conditional_20_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 26)(1, "div", 39);
-    i0.ɵɵelement(2, "i", 57);
+    i0.ɵɵelementStart(0, "div", 26)(1, "div", 40);
+    i0.ɵɵelement(2, "i", 58);
     i0.ɵɵelementStart(3, "span");
     i0.ɵɵtext(4, "Shared With Me");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "span", 41);
+    i0.ɵɵelementStart(5, "span", 42);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd()();
-    i0.ɵɵrepeaterCreate(7, ViewSelectorComponent_Conditional_9_Conditional_20_For_8_Template, 15, 8, "div", 42, _forTrack0);
+    i0.ɵɵrepeaterCreate(7, ViewSelectorComponent_Conditional_9_Conditional_20_For_8_Template, 15, 8, "div", 43, _forTrack0);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -280,29 +282,17 @@ function ViewSelectorComponent_Conditional_9_Conditional_20_Template(rf, ctx) {
     i0.ɵɵrepeater(ctx_r1.FilteredSharedViews);
 } }
 function ViewSelectorComponent_Conditional_9_Conditional_21_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 33);
-    i0.ɵɵelement(1, "i", 64);
-    i0.ɵɵelementStart(2, "div", 65)(3, "strong");
-    i0.ɵɵtext(4, "No saved views yet");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "span");
-    i0.ɵɵtext(6, "Save your current configuration as a view");
-    i0.ɵɵelementEnd()()();
+    i0.ɵɵelement(0, "mj-empty-state", 33);
 } }
 function ViewSelectorComponent_Conditional_9_Conditional_22_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 33);
-    i0.ɵɵelement(1, "i", 66);
-    i0.ɵɵelementStart(2, "span");
-    i0.ɵɵtext(3);
-    i0.ɵɵelementEnd()();
+    i0.ɵɵelement(0, "mj-empty-state", 34);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate1("No views match \"", ctx_r1.SearchText, "\"");
+    i0.ɵɵproperty("Title", ctx_r1.NoViewsMatchMessage);
 } }
 function ViewSelectorComponent_Conditional_9_Conditional_23_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 34);
-    i0.ɵɵelement(1, "i", 67);
+    i0.ɵɵelementStart(0, "div", 35);
+    i0.ɵɵelement(1, "i", 65);
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3, "Loading views...");
     i0.ɵɵelementEnd()();
@@ -335,19 +325,19 @@ function ViewSelectorComponent_Conditional_9_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementEnd()();
     i0.ɵɵconditionalCreate(19, ViewSelectorComponent_Conditional_9_Conditional_19_Template, 9, 1, "div", 26);
     i0.ɵɵconditionalCreate(20, ViewSelectorComponent_Conditional_9_Conditional_20_Template, 9, 1, "div", 26);
-    i0.ɵɵconditionalCreate(21, ViewSelectorComponent_Conditional_9_Conditional_21_Template, 7, 0, "div", 33);
-    i0.ɵɵconditionalCreate(22, ViewSelectorComponent_Conditional_9_Conditional_22_Template, 4, 1, "div", 33);
-    i0.ɵɵconditionalCreate(23, ViewSelectorComponent_Conditional_9_Conditional_23_Template, 4, 0, "div", 34);
+    i0.ɵɵconditionalCreate(21, ViewSelectorComponent_Conditional_9_Conditional_21_Template, 1, 0, "mj-empty-state", 33);
+    i0.ɵɵconditionalCreate(22, ViewSelectorComponent_Conditional_9_Conditional_22_Template, 1, 1, "mj-empty-state", 34);
+    i0.ɵɵconditionalCreate(23, ViewSelectorComponent_Conditional_9_Conditional_23_Template, 4, 0, "div", 35);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(24, "div", 35)(25, "button", 36);
+    i0.ɵɵelementStart(24, "div", 36)(25, "button", 37);
     i0.ɵɵlistener("click", function ViewSelectorComponent_Conditional_9_Template_button_click_25_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnQuickSave()); });
     i0.ɵɵelement(26, "i", 13);
     i0.ɵɵelementStart(27, "span");
     i0.ɵɵtext(28, "New View");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(29, "button", 37);
+    i0.ɵɵelementStart(29, "button", 38);
     i0.ɵɵlistener("click", function ViewSelectorComponent_Conditional_9_Template_button_click_29_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnResetToDefault()); });
-    i0.ɵɵelement(30, "i", 38);
+    i0.ɵɵelement(30, "i", 39);
     i0.ɵɵelementStart(31, "span");
     i0.ɵɵtext(32, "Reset to Default");
     i0.ɵɵelementEnd()()()();
@@ -376,9 +366,9 @@ function ViewSelectorComponent_Conditional_9_Template(rf, ctx) { if (rf & 1) {
 } }
 function ViewSelectorComponent_Conditional_10_Template(rf, ctx) { if (rf & 1) {
     const _r9 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 68);
+    i0.ɵɵelementStart(0, "button", 66);
     i0.ɵɵlistener("click", function ViewSelectorComponent_Conditional_10_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnOpenInTab()); });
-    i0.ɵɵelement(1, "i", 69);
+    i0.ɵɵelement(1, "i", 67);
     i0.ɵɵelementEnd();
 } }
 /**
@@ -453,6 +443,8 @@ export class ViewSelectorComponent extends BaseAngularComponent {
     SelectedView = null;
     SearchText = '';
     destroy$ = new Subject();
+    /** Guards the one-time reactive subscription to UserViewEngine set up in {@link ensureEngineSubscription}. */
+    subscribedToEngine = false;
     get metadata() { return this.ProviderToUse; }
     constructor(cdr) {
         super();
@@ -461,7 +453,7 @@ export class ViewSelectorComponent extends BaseAngularComponent {
     ngOnChanges(changes) {
         if (changes['Entity']) {
             if (this.Entity) {
-                this.LoadViews();
+                void this.LoadViews();
             }
             else {
                 this.MyViews = [];
@@ -479,7 +471,14 @@ export class ViewSelectorComponent extends BaseAngularComponent {
         this.destroy$.complete();
     }
     /**
-     * Load views for the current entity
+     * Ensure the {@link UserViewEngine} cache is loaded, establish a one-time reactive
+     * subscription to it, and (re)derive the view lists for the current entity.
+     *
+     * The subscription is what keeps this dropdown correct: BaseEntity `.Save()`/`.Delete()`
+     * on a User View auto-invalidates the engine cache (an in-place array mutation), which
+     * emits on `ObserveProperty('_views')`. So when the workspace creates, updates, duplicates,
+     * or deletes a view, the list here re-derives automatically — no manual reload required,
+     * and no stale-cache race between a fire-and-forget reload and the async cache update.
      */
     async LoadViews() {
         if (!this.Entity) {
@@ -488,11 +487,49 @@ export class ViewSelectorComponent extends BaseAngularComponent {
         this.IsLoading = true;
         this.cdr.detectChanges();
         try {
-            const userId = this.metadata.CurrentUser?.ID;
-            // Use UserViewEngine cache instead of a direct RunView to avoid redundant DB calls.
-            // The engine is initialized once and caches all views; GetAccessibleViewsForEntity()
-            // already filters by owned + shared and checks UserCanView.
+            // Load once; subsequent calls are cheap no-ops. We never force a refresh here — the
+            // reactive subscription below keeps the lists fresh once data has changed.
             await UserViewEngine.Instance.Config(false);
+        }
+        catch (error) {
+            console.error('Failed to load views:', error);
+        }
+        finally {
+            this.IsLoading = false;
+        }
+        this.ensureEngineSubscription();
+        this.recomputeViews();
+    }
+    /**
+     * Subscribe (once for the component's lifetime) to the engine's cached `_views` array.
+     * The BehaviorSubject replays the current array on subscribe and re-emits on every
+     * subsequent create/update/delete/refresh, so {@link recomputeViews} runs whenever the
+     * underlying data actually changes.
+     */
+    ensureEngineSubscription() {
+        if (this.subscribedToEngine) {
+            return;
+        }
+        this.subscribedToEngine = true;
+        UserViewEngine.Instance
+            .ObserveProperty('_views')
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(() => this.recomputeViews());
+    }
+    /**
+     * Re-derive the owned/shared view lists for the current entity from the engine cache.
+     * `GetAccessibleViewsForEntity()` already filters by owned + shared and checks UserCanView.
+     */
+    recomputeViews() {
+        if (!this.Entity) {
+            this.MyViews = [];
+            this.SharedViews = [];
+            this.SelectedView = null;
+            this.cdr.detectChanges();
+            return;
+        }
+        try {
+            const userId = this.metadata.CurrentUser?.ID;
             const accessibleViews = UserViewEngine.Instance.GetAccessibleViewsForEntity(this.Entity.ID);
             // Separate into owned and shared
             this.MyViews = accessibleViews
@@ -505,10 +542,9 @@ export class ViewSelectorComponent extends BaseAngularComponent {
             this.updateSelectedViewFromId();
         }
         catch (error) {
-            console.error('Failed to load views:', error);
+            console.error('Failed to derive views:', error);
         }
         finally {
-            this.IsLoading = false;
             this.cdr.detectChanges();
         }
     }
@@ -662,6 +698,12 @@ export class ViewSelectorComponent extends BaseAngularComponent {
     get HasViews() {
         return this.MyViews.length > 0 || this.SharedViews.length > 0;
     }
+    /**
+     * Title for the "no search results" empty state — echoes the current search term.
+     */
+    get NoViewsMatchMessage() {
+        return `No views match "${this.SearchText}"`;
+    }
     /**
      * Check if the current user can edit the selected view
      */
@@ -782,7 +824,7 @@ export class ViewSelectorComponent extends BaseAngularComponent {
         this.SelectDefault();
     }
     static ɵfac = function ViewSelectorComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ViewSelectorComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ViewSelectorComponent, selectors: [["mj-view-selector"]], inputs: { Entity: "Entity", SelectedViewID: "SelectedViewID", ViewModified: "ViewModified" }, outputs: { ViewSelected: "ViewSelected", SaveViewRequested: "SaveViewRequested", ManageViewsRequested: "ManageViewsRequested", OpenInTabRequested: "OpenInTabRequested", ConfigureViewRequested: "ConfigureViewRequested", CreateNewRecordRequested: "CreateNewRecordRequested", ExportRequested: "ExportRequested", DuplicateViewRequested: "DuplicateViewRequested", QuickSaveRequested: "QuickSaveRequested", RevertRequested: "RevertRequested" }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], decls: 17, vars: 12, consts: [[1, "vs-container"], [1, "vs-backdrop"], [1, "vs-wrapper"], ["title", "Select a saved view", 1, "vs-button", 3, "click", "disabled"], [1, "fa-solid", "fa-layer-group", "vs-btn-icon"], [1, "vs-btn-name"], ["title", "View has unsaved changes", 1, "vs-modified-dot"], [1, "fa-solid", "fa-chevron-down", "vs-arrow"], [1, "vs-panel"], ["title", "Open this view in a new tab", 1, "vs-icon-btn"], ["title", "Configure view settings (columns, filters, sorting)", 1, "vs-icon-btn", 3, "click"], [1, "fa-solid", "fa-sliders-h"], ["title", "Create new record", 1, "vs-icon-btn", 3, "click"], [1, "fa-solid", "fa-plus"], ["title", "Export to Excel", 1, "vs-icon-btn", "vs-export-btn", 3, "click"], [1, "fa-solid", "fa-file-excel"], [1, "vs-backdrop", 3, "click"], [1, "vs-panel-header"], [1, "fa-solid", "fa-table-list", "vs-header-icon"], [1, "vs-panel-title"], [1, "vs-Entity-badge"], ["title", "Close", 1, "vs-close-btn", 3, "click"], [1, "fa-solid", "fa-times"], [1, "vs-panel-search"], ["type", "text", "placeholder", "Search views...", 1, "vs-search-input", 3, "ngModelChange", "keydown.escape", "ngModel"], [1, "vs-panel-body"], [1, "vs-section"], [1, "vs-card", 3, "click"], [1, "vs-card-icon"], [1, "fa-solid", "fa-table"], [1, "vs-card-content"], [1, "vs-card-name"], [1, "fa-solid", "fa-check", "vs-card-check"], [1, "vs-empty-message"], [1, "vs-loading"], [1, "vs-panel-footer"], ["title", "Save current view configuration", 1, "vs-panel-btn", "primary", 3, "click"], ["title", "Reset to default view", 1, "vs-panel-btn", 3, "click"], [1, "fa-solid", "fa-arrow-rotate-left"], [1, "vs-section-header"], [1, "fa-solid", "fa-user"], [1, "vs-section-count"], [1, "vs-card", 3, "active"], [1, "fa-solid", "fa-table-list"], [1, "vs-default-badge"], [1, "vs-card-desc"], [1, "vs-card-meta"], [1, "vs-card-actions"], ["title", "Duplicate", 1, "vs-action-btn", 3, "click"], [1, "fa-regular", "fa-copy"], ["title", "Configure", 1, "vs-action-btn", 3, "click"], [1, "fa-solid", "fa-sliders"], ["title", "Open in Tab", 1, "vs-action-btn", 3, "click"], [1, "fa-solid", "fa-up-right-from-square"], [1, "fa-solid", "fa-filter"], [1, "fa-solid", "fa-table-columns"], [1, "fa-solid", "fa-arrow-down-short-wide"], [1, "fa-solid", "fa-share-nodes"], [1, "vs-card-icon", "shared"], [1, "fa-solid", "fa-users"], [1, "vs-shared-badge"], [1, "vs-shared-badge", "editable"], ["title", "Duplicate as My View", 1, "vs-action-btn", 3, "click"], ["title", "Configure", 1, "vs-action-btn"], [1, "fa-solid", "fa-bookmark"], [1, "vs-empty-text"], [1, "fa-solid", "fa-search"], [1, "fa-solid", "fa-spinner", "fa-spin"], ["title", "Open this view in a new tab", 1, "vs-icon-btn", 3, "click"], [1, "fa-solid", "fa-external-link-alt"]], template: function ViewSelectorComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ViewSelectorComponent, selectors: [["mj-view-selector"]], inputs: { Entity: "Entity", SelectedViewID: "SelectedViewID", ViewModified: "ViewModified" }, outputs: { ViewSelected: "ViewSelected", SaveViewRequested: "SaveViewRequested", ManageViewsRequested: "ManageViewsRequested", OpenInTabRequested: "OpenInTabRequested", ConfigureViewRequested: "ConfigureViewRequested", CreateNewRecordRequested: "CreateNewRecordRequested", ExportRequested: "ExportRequested", DuplicateViewRequested: "DuplicateViewRequested", QuickSaveRequested: "QuickSaveRequested", RevertRequested: "RevertRequested" }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], decls: 17, vars: 12, consts: [[1, "vs-container"], [1, "vs-backdrop"], [1, "vs-wrapper"], ["title", "Select a saved view", 1, "vs-button", 3, "click", "disabled"], [1, "fa-solid", "fa-layer-group", "vs-btn-icon"], [1, "vs-btn-name"], ["title", "View has unsaved changes", 1, "vs-modified-dot"], [1, "fa-solid", "fa-chevron-down", "vs-arrow"], [1, "vs-panel"], ["title", "Open this view in a new tab", 1, "vs-icon-btn"], ["title", "Configure view settings (columns, filters, sorting)", 1, "vs-icon-btn", 3, "click"], [1, "fa-solid", "fa-sliders-h"], ["title", "Create new record", 1, "vs-icon-btn", 3, "click"], [1, "fa-solid", "fa-plus"], ["title", "Export to Excel", 1, "vs-icon-btn", "vs-export-btn", 3, "click"], [1, "fa-solid", "fa-file-excel"], [1, "vs-backdrop", 3, "click"], [1, "vs-panel-header"], [1, "fa-solid", "fa-table-list", "vs-header-icon"], [1, "vs-panel-title"], [1, "vs-Entity-badge"], ["title", "Close", 1, "vs-close-btn", 3, "click"], [1, "fa-solid", "fa-times"], [1, "vs-panel-search"], ["type", "text", "placeholder", "Search views...", 1, "vs-search-input", 3, "ngModelChange", "keydown.escape", "ngModel"], [1, "vs-panel-body"], [1, "vs-section"], [1, "vs-card", 3, "click"], [1, "vs-card-icon"], [1, "fa-solid", "fa-table"], [1, "vs-card-content"], [1, "vs-card-name"], [1, "fa-solid", "fa-check", "vs-card-check"], ["Size", "compact", "Icon", "fa-solid fa-bookmark", "Title", "No saved views yet", "Message", "Save your current configuration as a view"], ["Size", "compact", "Variant", "no-results", 3, "Title"], [1, "vs-loading"], [1, "vs-panel-footer"], ["title", "Save current view configuration", 1, "vs-panel-btn", "primary", 3, "click"], ["title", "Reset to default view", 1, "vs-panel-btn", 3, "click"], [1, "fa-solid", "fa-arrow-rotate-left"], [1, "vs-section-header"], [1, "fa-solid", "fa-user"], [1, "vs-section-count"], [1, "vs-card", 3, "active"], [1, "fa-solid", "fa-table-list"], [1, "vs-default-badge"], [1, "vs-card-desc"], [1, "vs-card-meta"], [1, "vs-card-actions"], ["title", "Duplicate", 1, "vs-action-btn", 3, "click"], [1, "fa-regular", "fa-copy"], ["title", "Configure", 1, "vs-action-btn", 3, "click"], [1, "fa-solid", "fa-sliders"], ["title", "Open in Tab", 1, "vs-action-btn", 3, "click"], [1, "fa-solid", "fa-up-right-from-square"], [1, "fa-solid", "fa-filter"], [1, "fa-solid", "fa-table-columns"], [1, "fa-solid", "fa-arrow-down-short-wide"], [1, "fa-solid", "fa-share-nodes"], [1, "vs-card-icon", "shared"], [1, "fa-solid", "fa-users"], [1, "vs-shared-badge"], [1, "vs-shared-badge", "editable"], ["title", "Duplicate as My View", 1, "vs-action-btn", 3, "click"], ["title", "Configure", 1, "vs-action-btn"], [1, "fa-solid", "fa-spinner", "fa-spin"], ["title", "Open this view in a new tab", 1, "vs-icon-btn", 3, "click"], [1, "fa-solid", "fa-external-link-alt"]], template: function ViewSelectorComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0);
             i0.ɵɵconditionalCreate(1, ViewSelectorComponent_Conditional_1_Template, 1, 0, "div", 1);
             i0.ɵɵelementStart(2, "div", 2)(3, "button", 3);
@@ -825,11 +867,11 @@ export class ViewSelectorComponent extends BaseAngularComponent {
             i0.ɵɵconditional(ctx.IsDropdownOpen ? 9 : -1);
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.SelectedViewID ? 10 : -1);
-        } }, dependencies: [i1.DefaultValueAccessor, i1.NgControlStatus, i1.NgModel], styles: ["/* ========================================\n   VIEW SELECTOR - All classes prefixed vs-\n   to avoid conflicts (ViewEncapsulation.None)\n   ======================================== */\n\n/* Container */\n.vs-container {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  position: relative;\n}\n\n/* Backdrop for closing panel */\n.vs-backdrop {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  z-index: 999;\n  background: transparent;\n}\n\n.vs-wrapper {\n  position: relative;\n}\n\n/* Main Button */\n.vs-button {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 6px 12px;\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 4px;\n  cursor: pointer;\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--mj-text-primary);\n  transition: all 0.15s ease;\n  min-width: 140px;\n  max-width: 280px;\n}\n\n.vs-button:hover {\n  border-color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 5%, var(--mj-bg-surface));\n}\n\n.vs-button:disabled {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n\n.vs-button.open {\n  border-color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 5%, var(--mj-bg-surface));\n}\n\n.vs-button.modified {\n  border-color: var(--mj-status-warning);\n}\n\n.vs-btn-icon {\n  color: var(--mj-brand-primary);\n  font-size: 12px;\n}\n\n.vs-btn-name {\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  text-align: left;\n}\n\n.vs-modified-dot {\n  color: var(--mj-status-warning);\n  font-weight: bold;\n  font-size: 18px;\n  line-height: 1;\n}\n\n.vs-arrow {\n  color: var(--mj-text-muted);\n  font-size: 10px;\n  transition: transform 0.2s ease;\n}\n\n.vs-arrow.rotated {\n  transform: rotate(180deg);\n}\n\n/* ========================================\n   RICH VIEW PANEL\n   Styles ported directly from prototype\n   ======================================== */\n\n/* Reset inherited styles inside panel */\n.vs-panel,\n.vs-panel * {\n  box-sizing: border-box;\n  line-height: 1.5;\n  text-align: left;\n}\n\n.vs-panel {\n  position: absolute;\n  top: calc(100% + 4px);\n  left: 0;\n  width: 400px;\n  max-width: calc(100vw - 40px);\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 12px;\n  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.16);\n  z-index: 1000;\n  overflow: hidden;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n  font-size: 13px;\n  color: var(--mj-text-primary);\n}\n\n/* Panel Header */\n.vs-panel-header {\n  padding: 16px 20px;\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.vs-header-icon {\n  color: var(--mj-brand-primary);\n  font-size: 14px;\n}\n\n.vs-panel-title {\n  font-size: 15px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.vs-entity-badge {\n  font-size: 11px;\n  font-weight: 500;\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n  padding: 2px 8px;\n  border-radius: 10px;\n}\n\n.vs-close-btn {\n  margin-left: auto;\n  background: none;\n  border: none;\n  cursor: pointer;\n  color: var(--mj-text-muted);\n  font-size: 16px;\n  padding: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.vs-close-btn:hover {\n  color: var(--mj-text-primary);\n}\n\n/* Panel Search */\n.vs-panel-search {\n  padding: 12px 20px;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.vs-search-input {\n  width: 100%;\n  padding: 6px 12px 6px 32px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 4px;\n  font-size: 13px;\n  background: var(--mj-bg-surface-card) url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='%23999'%3E%3Cpath d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208z'/%3E%3C/svg%3E\") no-repeat 10px center;\n  background-size: 14px;\n  box-sizing: border-box;\n  font-family: inherit;\n}\n\n.vs-search-input:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n}\n\n.vs-search-input::placeholder {\n  color: var(--mj-text-muted);\n}\n\n/* Panel Body */\n.vs-panel-body {\n  max-height: 400px;\n  overflow-y: auto;\n}\n\n/* View Section */\n.vs-section {\n  padding: 8px 0;\n}\n\n.vs-section-header {\n  padding: 6px 20px;\n  font-size: 11px;\n  font-weight: 700;\n  color: var(--mj-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.vs-section-header i {\n  font-size: 10px;\n}\n\n.vs-section-count {\n  background: var(--mj-border-default);\n  padding: 0 6px;\n  border-radius: 8px;\n  font-size: 10px;\n}\n\n/* View Card */\n.vs-card {\n  padding: 10px 20px;\n  cursor: pointer;\n  transition: background 0.1s;\n  display: flex;\n  align-items: flex-start;\n  gap: 12px;\n}\n\n.vs-card:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 5%, var(--mj-bg-surface));\n}\n\n.vs-card.active {\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n  border-left: 3px solid var(--mj-brand-primary);\n  padding-left: 17px;\n}\n\n/* View Card Icon */\n.vs-card-icon {\n  width: 32px;\n  height: 32px;\n  border-radius: 6px;\n  background: var(--mj-bg-surface-card);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--mj-text-muted);\n  font-size: 14px;\n  flex-shrink: 0;\n  margin-top: 2px;\n}\n\n.vs-card-icon.active {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n}\n\n.vs-card-icon.shared {\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-muted);\n}\n\n/* View Card Content */\n.vs-card-content {\n  flex: 1;\n  min-width: 0;\n  padding-top: 4px;\n}\n\n.vs-card-name {\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--mj-text-primary);\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.vs-card.active .vs-card-name {\n  color: var(--mj-brand-primary);\n  font-weight: 600;\n}\n\n.vs-default-badge {\n  font-size: 9px;\n  font-weight: 600;\n  background: var(--mj-status-success-bg);\n  color: var(--mj-status-success-text);\n  padding: 1px 5px;\n  border-radius: 6px;\n  text-transform: uppercase;\n  letter-spacing: 0.3px;\n}\n\n.vs-shared-badge {\n  font-size: 9px;\n  font-weight: 600;\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n  padding: 1px 5px;\n  border-radius: 6px;\n}\n\n.vs-shared-badge.editable {\n  background: var(--mj-status-success-bg);\n  color: var(--mj-status-success-text);\n}\n\n.vs-card-desc {\n  font-size: 12px;\n  color: var(--mj-text-muted);\n  margin-top: 2px;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n\n.vs-card-meta {\n  display: flex;\n  gap: 10px;\n  margin-top: 4px;\n  font-size: 11px;\n  color: var(--mj-text-muted);\n}\n\n.vs-card-meta span {\n  display: flex;\n  align-items: center;\n  gap: 3px;\n}\n\n.vs-card-meta i {\n  font-size: 10px;\n}\n\n/* View Card Check */\n.vs-card-check {\n  color: var(--mj-brand-primary);\n  font-size: 12px;\n  flex-shrink: 0;\n  margin-top: 2px;\n}\n\n/* View Card Actions (hover reveal) */\n.vs-card-actions {\n  display: flex;\n  gap: 2px;\n  opacity: 0;\n  transition: opacity 0.15s;\n  flex-shrink: 0;\n  margin-top: 2px;\n}\n\n.vs-card:hover .vs-card-actions {\n  opacity: 1;\n}\n\n.vs-action-btn {\n  width: 26px;\n  height: 26px;\n  border-radius: 4px;\n  border: none;\n  background: none;\n  cursor: pointer;\n  color: var(--mj-text-muted);\n  font-size: 12px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.vs-action-btn:hover {\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-primary);\n}\n\n/* Empty State */\n.vs-empty-message {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 20px;\n  color: var(--mj-text-muted);\n  font-size: 13px;\n}\n\n.vs-empty-message i {\n  font-size: 16px;\n  opacity: 0.5;\n}\n\n.vs-empty-text {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n.vs-empty-text strong {\n  color: var(--mj-text-secondary);\n  font-size: 13px;\n}\n\n.vs-empty-text span {\n  font-size: 12px;\n}\n\n/* Loading */\n.vs-loading {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  padding: 20px;\n  color: var(--mj-text-muted);\n  font-size: 13px;\n  text-align: center;\n}\n\n/* Panel Footer */\n.vs-panel-footer {\n  padding: 12px 20px;\n  border-top: 1px solid var(--mj-border-default);\n  display: flex;\n  gap: 8px;\n}\n\n.vs-panel-btn {\n  flex: 1;\n  padding: 8px 12px;\n  border-radius: 4px;\n  border: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  cursor: pointer;\n  font-size: 12px;\n  font-weight: 500;\n  color: var(--mj-text-secondary);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  transition: all 0.15s;\n  font-family: inherit;\n  text-align: center;\n}\n\n.vs-panel-btn:hover {\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-brand-primary);\n}\n\n.vs-panel-btn.primary {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border-color: var(--mj-brand-primary);\n}\n\n.vs-panel-btn.primary:hover {\n  background: var(--mj-brand-primary-hover);\n}\n\n.vs-panel-btn i {\n  font-size: 11px;\n}\n\n/* ========================================\n   ICON BUTTONS (outside panel)\n   ======================================== */\n\n.vs-icon-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  cursor: pointer;\n  color: var(--mj-text-secondary);\n  transition: all 0.15s ease;\n}\n\n.vs-icon-btn:hover {\n  background: var(--mj-bg-surface-hover);\n  border-color: var(--mj-border-strong);\n  color: var(--mj-brand-primary);\n}\n\n.vs-icon-btn i {\n  font-size: 12px;\n}\n\n.vs-export-btn:hover {\n  color: var(--mj-status-success);\n}\n\n/* Responsive */\n@media (max-width: 768px) {\n  .vs-button {\n    min-width: 100px;\n    max-width: 180px;\n    padding: 6px 10px;\n  }\n\n  .vs-panel {\n    width: calc(100vw - 32px);\n    max-width: 400px;\n  }\n}\n"], encapsulation: 2 });
+        } }, dependencies: [i1.DefaultValueAccessor, i1.NgControlStatus, i1.NgModel, i2.MJEmptyStateComponent], styles: ["/* ========================================\n   VIEW SELECTOR - All classes prefixed vs-\n   to avoid conflicts (ViewEncapsulation.None)\n   ======================================== */\n\n/* Container */\n.vs-container {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  position: relative;\n}\n\n/* Backdrop for closing panel */\n.vs-backdrop {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  z-index: 999;\n  background: transparent;\n}\n\n.vs-wrapper {\n  position: relative;\n}\n\n/* Main Button */\n.vs-button {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 6px 12px;\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 4px;\n  cursor: pointer;\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--mj-text-primary);\n  transition: all 0.15s ease;\n  min-width: 140px;\n  max-width: 280px;\n}\n\n.vs-button:hover {\n  border-color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 5%, var(--mj-bg-surface));\n}\n\n.vs-button:disabled {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n\n.vs-button.open {\n  border-color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 5%, var(--mj-bg-surface));\n}\n\n.vs-button.modified {\n  border-color: var(--mj-status-warning);\n}\n\n.vs-btn-icon {\n  color: var(--mj-brand-primary);\n  font-size: 12px;\n}\n\n.vs-btn-name {\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  text-align: left;\n}\n\n.vs-modified-dot {\n  color: var(--mj-status-warning);\n  font-weight: bold;\n  font-size: 18px;\n  line-height: 1;\n}\n\n.vs-arrow {\n  color: var(--mj-text-muted);\n  font-size: 10px;\n  transition: transform 0.2s ease;\n}\n\n.vs-arrow.rotated {\n  transform: rotate(180deg);\n}\n\n/* ========================================\n   RICH VIEW PANEL\n   Styles ported directly from prototype\n   ======================================== */\n\n/* Reset inherited styles inside panel */\n.vs-panel,\n.vs-panel * {\n  box-sizing: border-box;\n  line-height: 1.5;\n  text-align: left;\n}\n\n.vs-panel {\n  position: absolute;\n  top: calc(100% + 4px);\n  left: 0;\n  width: 400px;\n  max-width: calc(100vw - 40px);\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 12px;\n  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.16);\n  z-index: 1000;\n  overflow: hidden;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n  font-size: 13px;\n  color: var(--mj-text-primary);\n}\n\n/* Panel Header */\n.vs-panel-header {\n  padding: 16px 20px;\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.vs-header-icon {\n  color: var(--mj-brand-primary);\n  font-size: 14px;\n}\n\n.vs-panel-title {\n  font-size: 15px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.vs-entity-badge {\n  font-size: 11px;\n  font-weight: 500;\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n  padding: 2px 8px;\n  border-radius: 10px;\n}\n\n.vs-close-btn {\n  margin-left: auto;\n  background: none;\n  border: none;\n  cursor: pointer;\n  color: var(--mj-text-muted);\n  font-size: 16px;\n  padding: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.vs-close-btn:hover {\n  color: var(--mj-text-primary);\n}\n\n/* Panel Search */\n.vs-panel-search {\n  padding: 12px 20px;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.vs-search-input {\n  width: 100%;\n  padding: 6px 12px 6px 32px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 4px;\n  font-size: 13px;\n  background: var(--mj-bg-surface-card) url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='%23999'%3E%3Cpath d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208z'/%3E%3C/svg%3E\") no-repeat 10px center;\n  background-size: 14px;\n  box-sizing: border-box;\n  font-family: inherit;\n}\n\n.vs-search-input:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n}\n\n.vs-search-input::placeholder {\n  color: var(--mj-text-muted);\n}\n\n/* Panel Body */\n.vs-panel-body {\n  max-height: 400px;\n  overflow-y: auto;\n}\n\n/* View Section */\n.vs-section {\n  padding: 8px 0;\n}\n\n.vs-section-header {\n  padding: 6px 20px;\n  font-size: 11px;\n  font-weight: 700;\n  color: var(--mj-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.vs-section-header i {\n  font-size: 10px;\n}\n\n.vs-section-count {\n  background: var(--mj-border-default);\n  padding: 0 6px;\n  border-radius: 8px;\n  font-size: 10px;\n}\n\n/* View Card */\n.vs-card {\n  padding: 10px 20px;\n  cursor: pointer;\n  transition: background 0.1s;\n  display: flex;\n  align-items: flex-start;\n  gap: 12px;\n}\n\n.vs-card:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 5%, var(--mj-bg-surface));\n}\n\n.vs-card.active {\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n  border-left: 3px solid var(--mj-brand-primary);\n  padding-left: 17px;\n}\n\n/* View Card Icon */\n.vs-card-icon {\n  width: 32px;\n  height: 32px;\n  border-radius: 6px;\n  background: var(--mj-bg-surface-card);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--mj-text-muted);\n  font-size: 14px;\n  flex-shrink: 0;\n  margin-top: 2px;\n}\n\n.vs-card-icon.active {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n}\n\n.vs-card-icon.shared {\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-muted);\n}\n\n/* View Card Content */\n.vs-card-content {\n  flex: 1;\n  min-width: 0;\n  padding-top: 4px;\n}\n\n.vs-card-name {\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--mj-text-primary);\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.vs-card.active .vs-card-name {\n  color: var(--mj-brand-primary);\n  font-weight: 600;\n}\n\n.vs-default-badge {\n  font-size: 9px;\n  font-weight: 600;\n  background: var(--mj-status-success-bg);\n  color: var(--mj-status-success-text);\n  padding: 1px 5px;\n  border-radius: 6px;\n  text-transform: uppercase;\n  letter-spacing: 0.3px;\n}\n\n.vs-shared-badge {\n  font-size: 9px;\n  font-weight: 600;\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n  padding: 1px 5px;\n  border-radius: 6px;\n}\n\n.vs-shared-badge.editable {\n  background: var(--mj-status-success-bg);\n  color: var(--mj-status-success-text);\n}\n\n.vs-card-desc {\n  font-size: 12px;\n  color: var(--mj-text-muted);\n  margin-top: 2px;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n\n.vs-card-meta {\n  display: flex;\n  gap: 10px;\n  margin-top: 4px;\n  font-size: 11px;\n  color: var(--mj-text-muted);\n}\n\n.vs-card-meta span {\n  display: flex;\n  align-items: center;\n  gap: 3px;\n}\n\n.vs-card-meta i {\n  font-size: 10px;\n}\n\n/* View Card Check */\n.vs-card-check {\n  color: var(--mj-brand-primary);\n  font-size: 12px;\n  flex-shrink: 0;\n  margin-top: 2px;\n}\n\n/* View Card Actions (hover reveal) */\n.vs-card-actions {\n  display: flex;\n  gap: 2px;\n  opacity: 0;\n  transition: opacity 0.15s;\n  flex-shrink: 0;\n  margin-top: 2px;\n}\n\n.vs-card:hover .vs-card-actions {\n  opacity: 1;\n}\n\n.vs-action-btn {\n  width: 26px;\n  height: 26px;\n  border-radius: 4px;\n  border: none;\n  background: none;\n  cursor: pointer;\n  color: var(--mj-text-muted);\n  font-size: 12px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.vs-action-btn:hover {\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-primary);\n}\n\n/* Loading */\n.vs-loading {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  padding: 20px;\n  color: var(--mj-text-muted);\n  font-size: 13px;\n  text-align: center;\n}\n\n/* Panel Footer */\n.vs-panel-footer {\n  padding: 12px 20px;\n  border-top: 1px solid var(--mj-border-default);\n  display: flex;\n  gap: 8px;\n}\n\n.vs-panel-btn {\n  flex: 1;\n  padding: 8px 12px;\n  border-radius: 4px;\n  border: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  cursor: pointer;\n  font-size: 12px;\n  font-weight: 500;\n  color: var(--mj-text-secondary);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  transition: all 0.15s;\n  font-family: inherit;\n  text-align: center;\n}\n\n.vs-panel-btn:hover {\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-brand-primary);\n}\n\n.vs-panel-btn.primary {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border-color: var(--mj-brand-primary);\n}\n\n.vs-panel-btn.primary:hover {\n  background: var(--mj-brand-primary-hover);\n}\n\n.vs-panel-btn i {\n  font-size: 11px;\n}\n\n/* ========================================\n   ICON BUTTONS (outside panel)\n   ======================================== */\n\n.vs-icon-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  cursor: pointer;\n  color: var(--mj-text-secondary);\n  transition: all 0.15s ease;\n}\n\n.vs-icon-btn:hover {\n  background: var(--mj-bg-surface-hover);\n  border-color: var(--mj-border-strong);\n  color: var(--mj-brand-primary);\n}\n\n.vs-icon-btn i {\n  font-size: 12px;\n}\n\n.vs-export-btn:hover {\n  color: var(--mj-status-success);\n}\n\n/* Responsive */\n@media (max-width: 768px) {\n  .vs-button {\n    min-width: 100px;\n    max-width: 180px;\n    padding: 6px 10px;\n  }\n\n  .vs-panel {\n    width: calc(100vw - 32px);\n    max-width: 400px;\n  }\n}\n"], encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ViewSelectorComponent, [{
         type: Component,
-        args: [{ standalone: false, selector: 'mj-view-selector', encapsulation: ViewEncapsulation.None, template: "<div class=\"vs-container\">\n  <!-- Backdrop for closing panel -->\n  @if (IsDropdownOpen) {\n    <div class=\"vs-backdrop\" (click)=\"CloseDropdown()\"></div>\n  }\n\n  <!-- Main View Selector Button -->\n  <div class=\"vs-wrapper\">\n    <button\n      class=\"vs-button\"\n      [class.modified]=\"ViewModified\"\n      [class.open]=\"IsDropdownOpen\"\n      (click)=\"ToggleDropdown()\"\n      [disabled]=\"IsLoading\"\n      title=\"Select a saved view\">\n      <i class=\"fa-solid fa-layer-group vs-btn-icon\"></i>\n      <span class=\"vs-btn-name\">{{ DisplayName }}</span>\n      @if (ViewModified) {\n        <span class=\"vs-modified-dot\" title=\"View has unsaved changes\">\u2022</span>\n      }\n      <i class=\"fa-solid fa-chevron-down vs-arrow\" [class.rotated]=\"IsDropdownOpen\"></i>\n    </button>\n\n    <!-- Rich View Panel -->\n    @if (IsDropdownOpen) {\n      <div class=\"vs-panel\">\n        <!-- Panel Header -->\n        <div class=\"vs-panel-header\">\n          <i class=\"fa-solid fa-table-list vs-header-icon\"></i>\n          <span class=\"vs-panel-title\">Views</span>\n          @if (Entity) {\n            <span class=\"vs-Entity-badge\">{{ Entity.DisplayNameOrName }}</span>\n          }\n          <button class=\"vs-close-btn\" (click)=\"CloseDropdown()\" title=\"Close\">\n            <i class=\"fa-solid fa-times\"></i>\n          </button>\n        </div>\n\n        <!-- Search -->\n        <div class=\"vs-panel-search\">\n          <input\n            type=\"text\"\n            class=\"vs-search-input\"\n            placeholder=\"Search views...\"\n            [(ngModel)]=\"SearchText\"\n            (keydown.escape)=\"SearchText = ''\"\n          />\n        </div>\n\n        <!-- Panel Body -->\n        <div class=\"vs-panel-body\">\n          <!-- Default Option -->\n          <div class=\"vs-section\">\n            <div\n              class=\"vs-card\"\n              [class.active]=\"!SelectedViewID\"\n              (click)=\"SelectDefault()\">\n              <div class=\"vs-card-icon\" [class.active]=\"!SelectedViewID\">\n                <i class=\"fa-solid fa-table\"></i>\n              </div>\n              <div class=\"vs-card-content\">\n                <div class=\"vs-card-name\">(Default)</div>\n              </div>\n              @if (!SelectedViewID) {\n                <i class=\"fa-solid fa-check vs-card-check\"></i>\n              }\n            </div>\n          </div>\n\n          <!-- My Views Section -->\n          @if (FilteredMyViews.length > 0) {\n            <div class=\"vs-section\">\n              <div class=\"vs-section-header\">\n                <i class=\"fa-solid fa-user\"></i>\n                <span>My Views</span>\n                <span class=\"vs-section-count\">{{ FilteredMyViews.length }}</span>\n              </div>\n              @for (view of FilteredMyViews; track view.id) {\n                <div\n                  class=\"vs-card\"\n                  [class.active]=\"SelectedViewID === view.id\"\n                  (click)=\"SelectView(view)\">\n                  <div class=\"vs-card-icon\" [class.active]=\"SelectedViewID === view.id\">\n                    <i class=\"fa-solid fa-table-list\"></i>\n                  </div>\n                  <div class=\"vs-card-content\">\n                    <div class=\"vs-card-name\">\n                      {{ view.name }}\n                      @if (view.isDefault) {\n                        <span class=\"vs-default-badge\">Default</span>\n                      }\n                    </div>\n                    @if (view.entity.Description) {\n                      <div class=\"vs-card-desc\">{{ view.entity.Description }}</div>\n                    }\n                    @if (GetViewFilterCount(view) > 0 || GetViewColumnCount(view) > 0 || GetViewSortInfo(view)) {\n                      <div class=\"vs-card-meta\">\n                        @if (GetViewFilterCount(view) > 0) {\n                          <span><i class=\"fa-solid fa-filter\"></i> {{ GetViewFilterCount(view) }} filter{{ GetViewFilterCount(view) !== 1 ? 's' : '' }}</span>\n                        }\n                        @if (GetViewColumnCount(view) > 0) {\n                          <span><i class=\"fa-solid fa-table-columns\"></i> {{ GetViewColumnCount(view) }} col{{ GetViewColumnCount(view) !== 1 ? 's' : '' }}</span>\n                        }\n                        @if (GetViewSortInfo(view)) {\n                          <span><i class=\"fa-solid fa-arrow-down-short-wide\"></i> {{ GetViewSortInfo(view) }}</span>\n                        }\n                      </div>\n                    }\n                  </div>\n                  <div class=\"vs-card-actions\">\n                    <button\n                      class=\"vs-action-btn\"\n                      (click)=\"OnDuplicateView(view.id, $event)\"\n                      title=\"Duplicate\">\n                      <i class=\"fa-regular fa-copy\"></i>\n                    </button>\n                    <button\n                      class=\"vs-action-btn\"\n                      (click)=\"OnConfigureViewById(view.id, $event)\"\n                      title=\"Configure\">\n                      <i class=\"fa-solid fa-sliders\"></i>\n                    </button>\n                    <button\n                      class=\"vs-action-btn\"\n                      (click)=\"OnOpenViewInTab(view.id, $event)\"\n                      title=\"Open in Tab\">\n                      <i class=\"fa-solid fa-up-right-from-square\"></i>\n                    </button>\n                  </div>\n                  @if (SelectedViewID === view.id) {\n                    <i class=\"fa-solid fa-check vs-card-check\"></i>\n                  }\n                </div>\n              }\n            </div>\n          }\n\n          <!-- Shared Views Section -->\n          @if (FilteredSharedViews.length > 0) {\n            <div class=\"vs-section\">\n              <div class=\"vs-section-header\">\n                <i class=\"fa-solid fa-share-nodes\"></i>\n                <span>Shared With Me</span>\n                <span class=\"vs-section-count\">{{ FilteredSharedViews.length }}</span>\n              </div>\n              @for (view of FilteredSharedViews; track view.id) {\n                <div\n                  class=\"vs-card\"\n                  [class.active]=\"SelectedViewID === view.id\"\n                  (click)=\"SelectView(view)\">\n                  <div class=\"vs-card-icon shared\">\n                    <i class=\"fa-solid fa-users\"></i>\n                  </div>\n                  <div class=\"vs-card-content\">\n                    <div class=\"vs-card-name\">\n                      {{ view.name }}\n                      @if (!view.userCanEdit) {\n                        <span class=\"vs-shared-badge\">View Only</span>\n                      } @else {\n                        <span class=\"vs-shared-badge editable\">Can Edit</span>\n                      }\n                    </div>\n                    @if (view.entity.Description) {\n                      <div class=\"vs-card-desc\">{{ view.entity.Description }}</div>\n                    }\n                    @if (GetViewFilterCount(view) > 0 || GetViewColumnCount(view) > 0) {\n                      <div class=\"vs-card-meta\">\n                        @if (GetViewFilterCount(view) > 0) {\n                          <span><i class=\"fa-solid fa-filter\"></i> {{ GetViewFilterCount(view) }} filter{{ GetViewFilterCount(view) !== 1 ? 's' : '' }}</span>\n                        }\n                        @if (GetViewColumnCount(view) > 0) {\n                          <span><i class=\"fa-solid fa-table-columns\"></i> {{ GetViewColumnCount(view) }} col{{ GetViewColumnCount(view) !== 1 ? 's' : '' }}</span>\n                        }\n                      </div>\n                    }\n                  </div>\n                  <div class=\"vs-card-actions\">\n                    <button\n                      class=\"vs-action-btn\"\n                      (click)=\"OnDuplicateView(view.id, $event)\"\n                      title=\"Duplicate as My View\">\n                      <i class=\"fa-regular fa-copy\"></i>\n                    </button>\n                    @if (view.userCanEdit) {\n                      <button\n                        class=\"vs-action-btn\"\n                        (click)=\"OnConfigureViewById(view.id, $event)\"\n                        title=\"Configure\">\n                        <i class=\"fa-solid fa-sliders\"></i>\n                      </button>\n                    }\n                  </div>\n                  @if (SelectedViewID === view.id) {\n                    <i class=\"fa-solid fa-check vs-card-check\"></i>\n                  }\n                </div>\n              }\n            </div>\n          }\n\n          <!-- No Views Message -->\n          @if (!HasViews && !IsLoading) {\n            <div class=\"vs-empty-message\">\n              <i class=\"fa-solid fa-bookmark\"></i>\n              <div class=\"vs-empty-text\">\n                <strong>No saved views yet</strong>\n                <span>Save your current configuration as a view</span>\n              </div>\n            </div>\n          }\n\n          <!-- No Search Results -->\n          @if (HasViews && FilteredMyViews.length === 0 && FilteredSharedViews.length === 0 && SearchText) {\n            <div class=\"vs-empty-message\">\n              <i class=\"fa-solid fa-search\"></i>\n              <span>No views match \"{{ SearchText }}\"</span>\n            </div>\n          }\n\n          <!-- Loading Indicator -->\n          @if (IsLoading) {\n            <div class=\"vs-loading\">\n              <i class=\"fa-solid fa-spinner fa-spin\"></i>\n              <span>Loading views...</span>\n            </div>\n          }\n        </div>\n\n        <!-- Panel Footer -->\n        <div class=\"vs-panel-footer\">\n          <button\n            class=\"vs-panel-btn primary\"\n            (click)=\"OnQuickSave()\"\n            title=\"Save current view configuration\">\n            <i class=\"fa-solid fa-plus\"></i>\n            <span>New View</span>\n          </button>\n          <button\n            class=\"vs-panel-btn\"\n            (click)=\"OnResetToDefault()\"\n            title=\"Reset to default view\">\n            <i class=\"fa-solid fa-arrow-rotate-left\"></i>\n            <span>Reset to Default</span>\n          </button>\n        </div>\n      </div>\n    }\n  </div>\n\n  <!-- Open in Tab Button (only visible when a view is selected) -->\n  @if (SelectedViewID) {\n    <button\n      class=\"vs-icon-btn\"\n      (click)=\"OnOpenInTab()\"\n      title=\"Open this view in a new tab\">\n      <i class=\"fa-solid fa-external-link-alt\"></i>\n    </button>\n  }\n\n  <!-- Configure View Button -->\n  <button\n    class=\"vs-icon-btn\"\n    (click)=\"OnConfigureView()\"\n    title=\"Configure view settings (columns, filters, sorting)\">\n    <i class=\"fa-solid fa-sliders-h\"></i>\n  </button>\n\n  <!-- Create New Record Button -->\n  <button\n    class=\"vs-icon-btn\"\n    (click)=\"OnCreateNewRecord()\"\n    title=\"Create new record\">\n    <i class=\"fa-solid fa-plus\"></i>\n  </button>\n\n  <!-- Export Button -->\n  <button\n    class=\"vs-icon-btn vs-export-btn\"\n    (click)=\"OnExport()\"\n    title=\"Export to Excel\">\n    <i class=\"fa-solid fa-file-excel\"></i>\n  </button>\n</div>\n", styles: ["/* ========================================\n   VIEW SELECTOR - All classes prefixed vs-\n   to avoid conflicts (ViewEncapsulation.None)\n   ======================================== */\n\n/* Container */\n.vs-container {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  position: relative;\n}\n\n/* Backdrop for closing panel */\n.vs-backdrop {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  z-index: 999;\n  background: transparent;\n}\n\n.vs-wrapper {\n  position: relative;\n}\n\n/* Main Button */\n.vs-button {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 6px 12px;\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 4px;\n  cursor: pointer;\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--mj-text-primary);\n  transition: all 0.15s ease;\n  min-width: 140px;\n  max-width: 280px;\n}\n\n.vs-button:hover {\n  border-color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 5%, var(--mj-bg-surface));\n}\n\n.vs-button:disabled {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n\n.vs-button.open {\n  border-color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 5%, var(--mj-bg-surface));\n}\n\n.vs-button.modified {\n  border-color: var(--mj-status-warning);\n}\n\n.vs-btn-icon {\n  color: var(--mj-brand-primary);\n  font-size: 12px;\n}\n\n.vs-btn-name {\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  text-align: left;\n}\n\n.vs-modified-dot {\n  color: var(--mj-status-warning);\n  font-weight: bold;\n  font-size: 18px;\n  line-height: 1;\n}\n\n.vs-arrow {\n  color: var(--mj-text-muted);\n  font-size: 10px;\n  transition: transform 0.2s ease;\n}\n\n.vs-arrow.rotated {\n  transform: rotate(180deg);\n}\n\n/* ========================================\n   RICH VIEW PANEL\n   Styles ported directly from prototype\n   ======================================== */\n\n/* Reset inherited styles inside panel */\n.vs-panel,\n.vs-panel * {\n  box-sizing: border-box;\n  line-height: 1.5;\n  text-align: left;\n}\n\n.vs-panel {\n  position: absolute;\n  top: calc(100% + 4px);\n  left: 0;\n  width: 400px;\n  max-width: calc(100vw - 40px);\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 12px;\n  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.16);\n  z-index: 1000;\n  overflow: hidden;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n  font-size: 13px;\n  color: var(--mj-text-primary);\n}\n\n/* Panel Header */\n.vs-panel-header {\n  padding: 16px 20px;\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.vs-header-icon {\n  color: var(--mj-brand-primary);\n  font-size: 14px;\n}\n\n.vs-panel-title {\n  font-size: 15px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.vs-entity-badge {\n  font-size: 11px;\n  font-weight: 500;\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n  padding: 2px 8px;\n  border-radius: 10px;\n}\n\n.vs-close-btn {\n  margin-left: auto;\n  background: none;\n  border: none;\n  cursor: pointer;\n  color: var(--mj-text-muted);\n  font-size: 16px;\n  padding: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.vs-close-btn:hover {\n  color: var(--mj-text-primary);\n}\n\n/* Panel Search */\n.vs-panel-search {\n  padding: 12px 20px;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.vs-search-input {\n  width: 100%;\n  padding: 6px 12px 6px 32px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 4px;\n  font-size: 13px;\n  background: var(--mj-bg-surface-card) url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='%23999'%3E%3Cpath d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208z'/%3E%3C/svg%3E\") no-repeat 10px center;\n  background-size: 14px;\n  box-sizing: border-box;\n  font-family: inherit;\n}\n\n.vs-search-input:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n}\n\n.vs-search-input::placeholder {\n  color: var(--mj-text-muted);\n}\n\n/* Panel Body */\n.vs-panel-body {\n  max-height: 400px;\n  overflow-y: auto;\n}\n\n/* View Section */\n.vs-section {\n  padding: 8px 0;\n}\n\n.vs-section-header {\n  padding: 6px 20px;\n  font-size: 11px;\n  font-weight: 700;\n  color: var(--mj-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.vs-section-header i {\n  font-size: 10px;\n}\n\n.vs-section-count {\n  background: var(--mj-border-default);\n  padding: 0 6px;\n  border-radius: 8px;\n  font-size: 10px;\n}\n\n/* View Card */\n.vs-card {\n  padding: 10px 20px;\n  cursor: pointer;\n  transition: background 0.1s;\n  display: flex;\n  align-items: flex-start;\n  gap: 12px;\n}\n\n.vs-card:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 5%, var(--mj-bg-surface));\n}\n\n.vs-card.active {\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n  border-left: 3px solid var(--mj-brand-primary);\n  padding-left: 17px;\n}\n\n/* View Card Icon */\n.vs-card-icon {\n  width: 32px;\n  height: 32px;\n  border-radius: 6px;\n  background: var(--mj-bg-surface-card);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--mj-text-muted);\n  font-size: 14px;\n  flex-shrink: 0;\n  margin-top: 2px;\n}\n\n.vs-card-icon.active {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n}\n\n.vs-card-icon.shared {\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-muted);\n}\n\n/* View Card Content */\n.vs-card-content {\n  flex: 1;\n  min-width: 0;\n  padding-top: 4px;\n}\n\n.vs-card-name {\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--mj-text-primary);\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.vs-card.active .vs-card-name {\n  color: var(--mj-brand-primary);\n  font-weight: 600;\n}\n\n.vs-default-badge {\n  font-size: 9px;\n  font-weight: 600;\n  background: var(--mj-status-success-bg);\n  color: var(--mj-status-success-text);\n  padding: 1px 5px;\n  border-radius: 6px;\n  text-transform: uppercase;\n  letter-spacing: 0.3px;\n}\n\n.vs-shared-badge {\n  font-size: 9px;\n  font-weight: 600;\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n  padding: 1px 5px;\n  border-radius: 6px;\n}\n\n.vs-shared-badge.editable {\n  background: var(--mj-status-success-bg);\n  color: var(--mj-status-success-text);\n}\n\n.vs-card-desc {\n  font-size: 12px;\n  color: var(--mj-text-muted);\n  margin-top: 2px;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n\n.vs-card-meta {\n  display: flex;\n  gap: 10px;\n  margin-top: 4px;\n  font-size: 11px;\n  color: var(--mj-text-muted);\n}\n\n.vs-card-meta span {\n  display: flex;\n  align-items: center;\n  gap: 3px;\n}\n\n.vs-card-meta i {\n  font-size: 10px;\n}\n\n/* View Card Check */\n.vs-card-check {\n  color: var(--mj-brand-primary);\n  font-size: 12px;\n  flex-shrink: 0;\n  margin-top: 2px;\n}\n\n/* View Card Actions (hover reveal) */\n.vs-card-actions {\n  display: flex;\n  gap: 2px;\n  opacity: 0;\n  transition: opacity 0.15s;\n  flex-shrink: 0;\n  margin-top: 2px;\n}\n\n.vs-card:hover .vs-card-actions {\n  opacity: 1;\n}\n\n.vs-action-btn {\n  width: 26px;\n  height: 26px;\n  border-radius: 4px;\n  border: none;\n  background: none;\n  cursor: pointer;\n  color: var(--mj-text-muted);\n  font-size: 12px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.vs-action-btn:hover {\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-primary);\n}\n\n/* Empty State */\n.vs-empty-message {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 20px;\n  color: var(--mj-text-muted);\n  font-size: 13px;\n}\n\n.vs-empty-message i {\n  font-size: 16px;\n  opacity: 0.5;\n}\n\n.vs-empty-text {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n.vs-empty-text strong {\n  color: var(--mj-text-secondary);\n  font-size: 13px;\n}\n\n.vs-empty-text span {\n  font-size: 12px;\n}\n\n/* Loading */\n.vs-loading {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  padding: 20px;\n  color: var(--mj-text-muted);\n  font-size: 13px;\n  text-align: center;\n}\n\n/* Panel Footer */\n.vs-panel-footer {\n  padding: 12px 20px;\n  border-top: 1px solid var(--mj-border-default);\n  display: flex;\n  gap: 8px;\n}\n\n.vs-panel-btn {\n  flex: 1;\n  padding: 8px 12px;\n  border-radius: 4px;\n  border: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  cursor: pointer;\n  font-size: 12px;\n  font-weight: 500;\n  color: var(--mj-text-secondary);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  transition: all 0.15s;\n  font-family: inherit;\n  text-align: center;\n}\n\n.vs-panel-btn:hover {\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-brand-primary);\n}\n\n.vs-panel-btn.primary {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border-color: var(--mj-brand-primary);\n}\n\n.vs-panel-btn.primary:hover {\n  background: var(--mj-brand-primary-hover);\n}\n\n.vs-panel-btn i {\n  font-size: 11px;\n}\n\n/* ========================================\n   ICON BUTTONS (outside panel)\n   ======================================== */\n\n.vs-icon-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  cursor: pointer;\n  color: var(--mj-text-secondary);\n  transition: all 0.15s ease;\n}\n\n.vs-icon-btn:hover {\n  background: var(--mj-bg-surface-hover);\n  border-color: var(--mj-border-strong);\n  color: var(--mj-brand-primary);\n}\n\n.vs-icon-btn i {\n  font-size: 12px;\n}\n\n.vs-export-btn:hover {\n  color: var(--mj-status-success);\n}\n\n/* Responsive */\n@media (max-width: 768px) {\n  .vs-button {\n    min-width: 100px;\n    max-width: 180px;\n    padding: 6px 10px;\n  }\n\n  .vs-panel {\n    width: calc(100vw - 32px);\n    max-width: 400px;\n  }\n}\n"] }]
+        args: [{ standalone: false, selector: 'mj-view-selector', encapsulation: ViewEncapsulation.None, template: "<div class=\"vs-container\">\n  <!-- Backdrop for closing panel -->\n  @if (IsDropdownOpen) {\n    <div class=\"vs-backdrop\" (click)=\"CloseDropdown()\"></div>\n  }\n\n  <!-- Main View Selector Button -->\n  <div class=\"vs-wrapper\">\n    <button\n      class=\"vs-button\"\n      [class.modified]=\"ViewModified\"\n      [class.open]=\"IsDropdownOpen\"\n      (click)=\"ToggleDropdown()\"\n      [disabled]=\"IsLoading\"\n      title=\"Select a saved view\">\n      <i class=\"fa-solid fa-layer-group vs-btn-icon\"></i>\n      <span class=\"vs-btn-name\">{{ DisplayName }}</span>\n      @if (ViewModified) {\n        <span class=\"vs-modified-dot\" title=\"View has unsaved changes\">\u2022</span>\n      }\n      <i class=\"fa-solid fa-chevron-down vs-arrow\" [class.rotated]=\"IsDropdownOpen\"></i>\n    </button>\n\n    <!-- Rich View Panel -->\n    @if (IsDropdownOpen) {\n      <div class=\"vs-panel\">\n        <!-- Panel Header -->\n        <div class=\"vs-panel-header\">\n          <i class=\"fa-solid fa-table-list vs-header-icon\"></i>\n          <span class=\"vs-panel-title\">Views</span>\n          @if (Entity) {\n            <span class=\"vs-Entity-badge\">{{ Entity.DisplayNameOrName }}</span>\n          }\n          <button class=\"vs-close-btn\" (click)=\"CloseDropdown()\" title=\"Close\">\n            <i class=\"fa-solid fa-times\"></i>\n          </button>\n        </div>\n\n        <!-- Search -->\n        <div class=\"vs-panel-search\">\n          <input\n            type=\"text\"\n            class=\"vs-search-input\"\n            placeholder=\"Search views...\"\n            [(ngModel)]=\"SearchText\"\n            (keydown.escape)=\"SearchText = ''\"\n          />\n        </div>\n\n        <!-- Panel Body -->\n        <div class=\"vs-panel-body\">\n          <!-- Default Option -->\n          <div class=\"vs-section\">\n            <div\n              class=\"vs-card\"\n              [class.active]=\"!SelectedViewID\"\n              (click)=\"SelectDefault()\">\n              <div class=\"vs-card-icon\" [class.active]=\"!SelectedViewID\">\n                <i class=\"fa-solid fa-table\"></i>\n              </div>\n              <div class=\"vs-card-content\">\n                <div class=\"vs-card-name\">(Default)</div>\n              </div>\n              @if (!SelectedViewID) {\n                <i class=\"fa-solid fa-check vs-card-check\"></i>\n              }\n            </div>\n          </div>\n\n          <!-- My Views Section -->\n          @if (FilteredMyViews.length > 0) {\n            <div class=\"vs-section\">\n              <div class=\"vs-section-header\">\n                <i class=\"fa-solid fa-user\"></i>\n                <span>My Views</span>\n                <span class=\"vs-section-count\">{{ FilteredMyViews.length }}</span>\n              </div>\n              @for (view of FilteredMyViews; track view.id) {\n                <div\n                  class=\"vs-card\"\n                  [class.active]=\"SelectedViewID === view.id\"\n                  (click)=\"SelectView(view)\">\n                  <div class=\"vs-card-icon\" [class.active]=\"SelectedViewID === view.id\">\n                    <i class=\"fa-solid fa-table-list\"></i>\n                  </div>\n                  <div class=\"vs-card-content\">\n                    <div class=\"vs-card-name\">\n                      {{ view.name }}\n                      @if (view.isDefault) {\n                        <span class=\"vs-default-badge\">Default</span>\n                      }\n                    </div>\n                    @if (view.entity.Description) {\n                      <div class=\"vs-card-desc\">{{ view.entity.Description }}</div>\n                    }\n                    @if (GetViewFilterCount(view) > 0 || GetViewColumnCount(view) > 0 || GetViewSortInfo(view)) {\n                      <div class=\"vs-card-meta\">\n                        @if (GetViewFilterCount(view) > 0) {\n                          <span><i class=\"fa-solid fa-filter\"></i> {{ GetViewFilterCount(view) }} filter{{ GetViewFilterCount(view) !== 1 ? 's' : '' }}</span>\n                        }\n                        @if (GetViewColumnCount(view) > 0) {\n                          <span><i class=\"fa-solid fa-table-columns\"></i> {{ GetViewColumnCount(view) }} col{{ GetViewColumnCount(view) !== 1 ? 's' : '' }}</span>\n                        }\n                        @if (GetViewSortInfo(view)) {\n                          <span><i class=\"fa-solid fa-arrow-down-short-wide\"></i> {{ GetViewSortInfo(view) }}</span>\n                        }\n                      </div>\n                    }\n                  </div>\n                  <div class=\"vs-card-actions\">\n                    <button\n                      class=\"vs-action-btn\"\n                      (click)=\"OnDuplicateView(view.id, $event)\"\n                      title=\"Duplicate\">\n                      <i class=\"fa-regular fa-copy\"></i>\n                    </button>\n                    <button\n                      class=\"vs-action-btn\"\n                      (click)=\"OnConfigureViewById(view.id, $event)\"\n                      title=\"Configure\">\n                      <i class=\"fa-solid fa-sliders\"></i>\n                    </button>\n                    <button\n                      class=\"vs-action-btn\"\n                      (click)=\"OnOpenViewInTab(view.id, $event)\"\n                      title=\"Open in Tab\">\n                      <i class=\"fa-solid fa-up-right-from-square\"></i>\n                    </button>\n                  </div>\n                  @if (SelectedViewID === view.id) {\n                    <i class=\"fa-solid fa-check vs-card-check\"></i>\n                  }\n                </div>\n              }\n            </div>\n          }\n\n          <!-- Shared Views Section -->\n          @if (FilteredSharedViews.length > 0) {\n            <div class=\"vs-section\">\n              <div class=\"vs-section-header\">\n                <i class=\"fa-solid fa-share-nodes\"></i>\n                <span>Shared With Me</span>\n                <span class=\"vs-section-count\">{{ FilteredSharedViews.length }}</span>\n              </div>\n              @for (view of FilteredSharedViews; track view.id) {\n                <div\n                  class=\"vs-card\"\n                  [class.active]=\"SelectedViewID === view.id\"\n                  (click)=\"SelectView(view)\">\n                  <div class=\"vs-card-icon shared\">\n                    <i class=\"fa-solid fa-users\"></i>\n                  </div>\n                  <div class=\"vs-card-content\">\n                    <div class=\"vs-card-name\">\n                      {{ view.name }}\n                      @if (!view.userCanEdit) {\n                        <span class=\"vs-shared-badge\">View Only</span>\n                      } @else {\n                        <span class=\"vs-shared-badge editable\">Can Edit</span>\n                      }\n                    </div>\n                    @if (view.entity.Description) {\n                      <div class=\"vs-card-desc\">{{ view.entity.Description }}</div>\n                    }\n                    @if (GetViewFilterCount(view) > 0 || GetViewColumnCount(view) > 0) {\n                      <div class=\"vs-card-meta\">\n                        @if (GetViewFilterCount(view) > 0) {\n                          <span><i class=\"fa-solid fa-filter\"></i> {{ GetViewFilterCount(view) }} filter{{ GetViewFilterCount(view) !== 1 ? 's' : '' }}</span>\n                        }\n                        @if (GetViewColumnCount(view) > 0) {\n                          <span><i class=\"fa-solid fa-table-columns\"></i> {{ GetViewColumnCount(view) }} col{{ GetViewColumnCount(view) !== 1 ? 's' : '' }}</span>\n                        }\n                      </div>\n                    }\n                  </div>\n                  <div class=\"vs-card-actions\">\n                    <button\n                      class=\"vs-action-btn\"\n                      (click)=\"OnDuplicateView(view.id, $event)\"\n                      title=\"Duplicate as My View\">\n                      <i class=\"fa-regular fa-copy\"></i>\n                    </button>\n                    @if (view.userCanEdit) {\n                      <button\n                        class=\"vs-action-btn\"\n                        (click)=\"OnConfigureViewById(view.id, $event)\"\n                        title=\"Configure\">\n                        <i class=\"fa-solid fa-sliders\"></i>\n                      </button>\n                    }\n                  </div>\n                  @if (SelectedViewID === view.id) {\n                    <i class=\"fa-solid fa-check vs-card-check\"></i>\n                  }\n                </div>\n              }\n            </div>\n          }\n\n          <!-- No Views Message -->\n          @if (!HasViews && !IsLoading) {\n            <mj-empty-state\n              Size=\"compact\"\n              Icon=\"fa-solid fa-bookmark\"\n              Title=\"No saved views yet\"\n              Message=\"Save your current configuration as a view\" />\n          }\n\n          <!-- No Search Results -->\n          @if (HasViews && FilteredMyViews.length === 0 && FilteredSharedViews.length === 0 && SearchText) {\n            <mj-empty-state\n              Size=\"compact\"\n              Variant=\"no-results\"\n              [Title]=\"NoViewsMatchMessage\" />\n          }\n\n          <!-- Loading Indicator -->\n          @if (IsLoading) {\n            <div class=\"vs-loading\">\n              <i class=\"fa-solid fa-spinner fa-spin\"></i>\n              <span>Loading views...</span>\n            </div>\n          }\n        </div>\n\n        <!-- Panel Footer -->\n        <div class=\"vs-panel-footer\">\n          <button\n            class=\"vs-panel-btn primary\"\n            (click)=\"OnQuickSave()\"\n            title=\"Save current view configuration\">\n            <i class=\"fa-solid fa-plus\"></i>\n            <span>New View</span>\n          </button>\n          <button\n            class=\"vs-panel-btn\"\n            (click)=\"OnResetToDefault()\"\n            title=\"Reset to default view\">\n            <i class=\"fa-solid fa-arrow-rotate-left\"></i>\n            <span>Reset to Default</span>\n          </button>\n        </div>\n      </div>\n    }\n  </div>\n\n  <!-- Open in Tab Button (only visible when a view is selected) -->\n  @if (SelectedViewID) {\n    <button\n      class=\"vs-icon-btn\"\n      (click)=\"OnOpenInTab()\"\n      title=\"Open this view in a new tab\">\n      <i class=\"fa-solid fa-external-link-alt\"></i>\n    </button>\n  }\n\n  <!-- Configure View Button -->\n  <button\n    class=\"vs-icon-btn\"\n    (click)=\"OnConfigureView()\"\n    title=\"Configure view settings (columns, filters, sorting)\">\n    <i class=\"fa-solid fa-sliders-h\"></i>\n  </button>\n\n  <!-- Create New Record Button -->\n  <button\n    class=\"vs-icon-btn\"\n    (click)=\"OnCreateNewRecord()\"\n    title=\"Create new record\">\n    <i class=\"fa-solid fa-plus\"></i>\n  </button>\n\n  <!-- Export Button -->\n  <button\n    class=\"vs-icon-btn vs-export-btn\"\n    (click)=\"OnExport()\"\n    title=\"Export to Excel\">\n    <i class=\"fa-solid fa-file-excel\"></i>\n  </button>\n</div>\n", styles: ["/* ========================================\n   VIEW SELECTOR - All classes prefixed vs-\n   to avoid conflicts (ViewEncapsulation.None)\n   ======================================== */\n\n/* Container */\n.vs-container {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  position: relative;\n}\n\n/* Backdrop for closing panel */\n.vs-backdrop {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  z-index: 999;\n  background: transparent;\n}\n\n.vs-wrapper {\n  position: relative;\n}\n\n/* Main Button */\n.vs-button {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 6px 12px;\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 4px;\n  cursor: pointer;\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--mj-text-primary);\n  transition: all 0.15s ease;\n  min-width: 140px;\n  max-width: 280px;\n}\n\n.vs-button:hover {\n  border-color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 5%, var(--mj-bg-surface));\n}\n\n.vs-button:disabled {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n\n.vs-button.open {\n  border-color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 5%, var(--mj-bg-surface));\n}\n\n.vs-button.modified {\n  border-color: var(--mj-status-warning);\n}\n\n.vs-btn-icon {\n  color: var(--mj-brand-primary);\n  font-size: 12px;\n}\n\n.vs-btn-name {\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  text-align: left;\n}\n\n.vs-modified-dot {\n  color: var(--mj-status-warning);\n  font-weight: bold;\n  font-size: 18px;\n  line-height: 1;\n}\n\n.vs-arrow {\n  color: var(--mj-text-muted);\n  font-size: 10px;\n  transition: transform 0.2s ease;\n}\n\n.vs-arrow.rotated {\n  transform: rotate(180deg);\n}\n\n/* ========================================\n   RICH VIEW PANEL\n   Styles ported directly from prototype\n   ======================================== */\n\n/* Reset inherited styles inside panel */\n.vs-panel,\n.vs-panel * {\n  box-sizing: border-box;\n  line-height: 1.5;\n  text-align: left;\n}\n\n.vs-panel {\n  position: absolute;\n  top: calc(100% + 4px);\n  left: 0;\n  width: 400px;\n  max-width: calc(100vw - 40px);\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 12px;\n  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.16);\n  z-index: 1000;\n  overflow: hidden;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n  font-size: 13px;\n  color: var(--mj-text-primary);\n}\n\n/* Panel Header */\n.vs-panel-header {\n  padding: 16px 20px;\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.vs-header-icon {\n  color: var(--mj-brand-primary);\n  font-size: 14px;\n}\n\n.vs-panel-title {\n  font-size: 15px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.vs-entity-badge {\n  font-size: 11px;\n  font-weight: 500;\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n  padding: 2px 8px;\n  border-radius: 10px;\n}\n\n.vs-close-btn {\n  margin-left: auto;\n  background: none;\n  border: none;\n  cursor: pointer;\n  color: var(--mj-text-muted);\n  font-size: 16px;\n  padding: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.vs-close-btn:hover {\n  color: var(--mj-text-primary);\n}\n\n/* Panel Search */\n.vs-panel-search {\n  padding: 12px 20px;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.vs-search-input {\n  width: 100%;\n  padding: 6px 12px 6px 32px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 4px;\n  font-size: 13px;\n  background: var(--mj-bg-surface-card) url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='%23999'%3E%3Cpath d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208z'/%3E%3C/svg%3E\") no-repeat 10px center;\n  background-size: 14px;\n  box-sizing: border-box;\n  font-family: inherit;\n}\n\n.vs-search-input:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n}\n\n.vs-search-input::placeholder {\n  color: var(--mj-text-muted);\n}\n\n/* Panel Body */\n.vs-panel-body {\n  max-height: 400px;\n  overflow-y: auto;\n}\n\n/* View Section */\n.vs-section {\n  padding: 8px 0;\n}\n\n.vs-section-header {\n  padding: 6px 20px;\n  font-size: 11px;\n  font-weight: 700;\n  color: var(--mj-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.vs-section-header i {\n  font-size: 10px;\n}\n\n.vs-section-count {\n  background: var(--mj-border-default);\n  padding: 0 6px;\n  border-radius: 8px;\n  font-size: 10px;\n}\n\n/* View Card */\n.vs-card {\n  padding: 10px 20px;\n  cursor: pointer;\n  transition: background 0.1s;\n  display: flex;\n  align-items: flex-start;\n  gap: 12px;\n}\n\n.vs-card:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 5%, var(--mj-bg-surface));\n}\n\n.vs-card.active {\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n  border-left: 3px solid var(--mj-brand-primary);\n  padding-left: 17px;\n}\n\n/* View Card Icon */\n.vs-card-icon {\n  width: 32px;\n  height: 32px;\n  border-radius: 6px;\n  background: var(--mj-bg-surface-card);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--mj-text-muted);\n  font-size: 14px;\n  flex-shrink: 0;\n  margin-top: 2px;\n}\n\n.vs-card-icon.active {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n}\n\n.vs-card-icon.shared {\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-muted);\n}\n\n/* View Card Content */\n.vs-card-content {\n  flex: 1;\n  min-width: 0;\n  padding-top: 4px;\n}\n\n.vs-card-name {\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--mj-text-primary);\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.vs-card.active .vs-card-name {\n  color: var(--mj-brand-primary);\n  font-weight: 600;\n}\n\n.vs-default-badge {\n  font-size: 9px;\n  font-weight: 600;\n  background: var(--mj-status-success-bg);\n  color: var(--mj-status-success-text);\n  padding: 1px 5px;\n  border-radius: 6px;\n  text-transform: uppercase;\n  letter-spacing: 0.3px;\n}\n\n.vs-shared-badge {\n  font-size: 9px;\n  font-weight: 600;\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n  padding: 1px 5px;\n  border-radius: 6px;\n}\n\n.vs-shared-badge.editable {\n  background: var(--mj-status-success-bg);\n  color: var(--mj-status-success-text);\n}\n\n.vs-card-desc {\n  font-size: 12px;\n  color: var(--mj-text-muted);\n  margin-top: 2px;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n\n.vs-card-meta {\n  display: flex;\n  gap: 10px;\n  margin-top: 4px;\n  font-size: 11px;\n  color: var(--mj-text-muted);\n}\n\n.vs-card-meta span {\n  display: flex;\n  align-items: center;\n  gap: 3px;\n}\n\n.vs-card-meta i {\n  font-size: 10px;\n}\n\n/* View Card Check */\n.vs-card-check {\n  color: var(--mj-brand-primary);\n  font-size: 12px;\n  flex-shrink: 0;\n  margin-top: 2px;\n}\n\n/* View Card Actions (hover reveal) */\n.vs-card-actions {\n  display: flex;\n  gap: 2px;\n  opacity: 0;\n  transition: opacity 0.15s;\n  flex-shrink: 0;\n  margin-top: 2px;\n}\n\n.vs-card:hover .vs-card-actions {\n  opacity: 1;\n}\n\n.vs-action-btn {\n  width: 26px;\n  height: 26px;\n  border-radius: 4px;\n  border: none;\n  background: none;\n  cursor: pointer;\n  color: var(--mj-text-muted);\n  font-size: 12px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.vs-action-btn:hover {\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-primary);\n}\n\n/* Loading */\n.vs-loading {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  padding: 20px;\n  color: var(--mj-text-muted);\n  font-size: 13px;\n  text-align: center;\n}\n\n/* Panel Footer */\n.vs-panel-footer {\n  padding: 12px 20px;\n  border-top: 1px solid var(--mj-border-default);\n  display: flex;\n  gap: 8px;\n}\n\n.vs-panel-btn {\n  flex: 1;\n  padding: 8px 12px;\n  border-radius: 4px;\n  border: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  cursor: pointer;\n  font-size: 12px;\n  font-weight: 500;\n  color: var(--mj-text-secondary);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  transition: all 0.15s;\n  font-family: inherit;\n  text-align: center;\n}\n\n.vs-panel-btn:hover {\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-brand-primary);\n}\n\n.vs-panel-btn.primary {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border-color: var(--mj-brand-primary);\n}\n\n.vs-panel-btn.primary:hover {\n  background: var(--mj-brand-primary-hover);\n}\n\n.vs-panel-btn i {\n  font-size: 11px;\n}\n\n/* ========================================\n   ICON BUTTONS (outside panel)\n   ======================================== */\n\n.vs-icon-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  cursor: pointer;\n  color: var(--mj-text-secondary);\n  transition: all 0.15s ease;\n}\n\n.vs-icon-btn:hover {\n  background: var(--mj-bg-surface-hover);\n  border-color: var(--mj-border-strong);\n  color: var(--mj-brand-primary);\n}\n\n.vs-icon-btn i {\n  font-size: 12px;\n}\n\n.vs-export-btn:hover {\n  color: var(--mj-status-success);\n}\n\n/* Responsive */\n@media (max-width: 768px) {\n  .vs-button {\n    min-width: 100px;\n    max-width: 180px;\n    padding: 6px 10px;\n  }\n\n  .vs-panel {\n    width: calc(100vw - 32px);\n    max-width: 400px;\n  }\n}\n"] }]
     }], () => [{ type: i0.ChangeDetectorRef }], { Entity: [{
             type: Input
         }], SelectedViewID: [{