@memberjunction/ng-dashboards 3.4.0 → 4.1.0

package/dist/APIKeys/api-scopes-panel.component.js

@@ -10,12 +10,12 @@ import * as i6 from "@progress/kendo-angular-buttons";
 import * as i7 from "@memberjunction/ng-shared-generic";
 const _c0 = a0 => ({ node: a0 });
 const _c1 = () => ({ FullPath: "(No Parent - Root Level)", ID: null });
-function APIScopesPanelComponent_mj_loading_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mj-loading", 5);
+function APIScopesPanelComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mj-loading", 2);
 } }
-function APIScopesPanelComponent_ng_container_2_div_24_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 29);
-    i0.ɵɵelement(1, "i", 16);
+function APIScopesPanelComponent_Conditional_2_Conditional_23_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 22);
+    i0.ɵɵelement(1, "i", 14);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -23,9 +23,9 @@ function APIScopesPanelComponent_ng_container_2_div_24_Template(rf, ctx) { if (r
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1(" ", ctx_r1.SuccessMessage, " ");
 } }
-function APIScopesPanelComponent_ng_container_2_div_25_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 30);
-    i0.ɵɵelement(1, "i", 31);
+function APIScopesPanelComponent_Conditional_2_Conditional_24_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 23);
+    i0.ɵɵelement(1, "i", 26);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -33,23 +33,20 @@ function APIScopesPanelComponent_ng_container_2_div_25_Template(rf, ctx) { if (r
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1(" ", ctx_r1.ErrorMessage, " ");
 } }
-function APIScopesPanelComponent_ng_container_2_ng_container_27_ng_container_1_Template(rf, ctx) { if (rf & 1) {
+function APIScopesPanelComponent_Conditional_2_For_27_ng_container_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
 } }
-function APIScopesPanelComponent_ng_container_2_ng_container_27_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementContainerStart(0);
-    i0.ɵɵtemplate(1, APIScopesPanelComponent_ng_container_2_ng_container_27_ng_container_1_Template, 1, 0, "ng-container", 32);
-    i0.ɵɵelementContainerEnd();
+function APIScopesPanelComponent_Conditional_2_For_27_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, APIScopesPanelComponent_Conditional_2_For_27_ng_container_0_Template, 1, 0, "ng-container", 27);
 } if (rf & 2) {
     const node_r3 = ctx.$implicit;
     i0.ɵɵnextContext();
     const scopeNode_r4 = i0.ɵɵreference(30);
-    i0.ɵɵadvance();
     i0.ɵɵproperty("ngTemplateOutlet", scopeNode_r4)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c0, node_r3));
 } }
-function APIScopesPanelComponent_ng_container_2_div_28_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 33);
-    i0.ɵɵelement(1, "i", 9);
+function APIScopesPanelComponent_Conditional_2_Conditional_28_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 25);
+    i0.ɵɵelement(1, "i", 7);
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3, "No scopes configured");
     i0.ɵɵelementEnd();
@@ -57,22 +54,22 @@ function APIScopesPanelComponent_ng_container_2_div_28_Template(rf, ctx) { if (r
     i0.ɵɵtext(5, "Create scopes to define API access permissions");
     i0.ɵɵelementEnd()();
 } }
-function APIScopesPanelComponent_ng_container_2_ng_template_29_button_2_Template(rf, ctx) { if (rf & 1) {
+function APIScopesPanelComponent_Conditional_2_ng_template_29_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 53);
-    i0.ɵɵlistener("click", function APIScopesPanelComponent_ng_container_2_ng_template_29_button_2_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r6); const node_r7 = i0.ɵɵnextContext().node; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleExpanded(node_r7)); });
-    i0.ɵɵelement(1, "i", 54);
+    i0.ɵɵelementStart(0, "button", 47);
+    i0.ɵɵlistener("click", function APIScopesPanelComponent_Conditional_2_ng_template_29_Conditional_2_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r6); const node_r7 = i0.ɵɵnextContext().node; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleExpanded(node_r7)); });
+    i0.ɵɵelement(1, "i", 48);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const node_r7 = i0.ɵɵnextContext().node;
     i0.ɵɵadvance();
     i0.ɵɵclassProp("fa-chevron-right", !node_r7.expanded)("fa-chevron-down", node_r7.expanded);
 } }
-function APIScopesPanelComponent_ng_container_2_ng_template_29_span_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "span", 55);
+function APIScopesPanelComponent_Conditional_2_ng_template_29_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "span", 31);
 } }
-function APIScopesPanelComponent_ng_container_2_ng_template_29_span_10_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 56);
+function APIScopesPanelComponent_Conditional_2_ng_template_29_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 36);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -80,13 +77,13 @@ function APIScopesPanelComponent_ng_container_2_ng_template_29_span_10_Template(
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", node_r7.scope.FullPath, " ");
 } }
-function APIScopesPanelComponent_ng_container_2_ng_template_29_span_11_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 57);
+function APIScopesPanelComponent_Conditional_2_ng_template_29_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 37);
     i0.ɵɵtext(1, "Inactive");
     i0.ɵɵelementEnd();
 } }
-function APIScopesPanelComponent_ng_container_2_ng_template_29_span_15_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 58);
+function APIScopesPanelComponent_Conditional_2_ng_template_29_Conditional_15_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 40);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -94,8 +91,8 @@ function APIScopesPanelComponent_ng_container_2_ng_template_29_span_15_Template(
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", node_r7.scope.ResourceType, " ");
 } }
-function APIScopesPanelComponent_ng_container_2_ng_template_29_span_16_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 59);
+function APIScopesPanelComponent_Conditional_2_ng_template_29_Conditional_16_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 41);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -103,56 +100,56 @@ function APIScopesPanelComponent_ng_container_2_ng_template_29_span_16_Template(
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", node_r7.scope.Description, " ");
 } }
-function APIScopesPanelComponent_ng_container_2_ng_template_29_div_22_ng_container_1_ng_container_1_Template(rf, ctx) { if (rf & 1) {
+function APIScopesPanelComponent_Conditional_2_ng_template_29_Conditional_22_For_2_ng_container_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
 } }
-function APIScopesPanelComponent_ng_container_2_ng_template_29_div_22_ng_container_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementContainerStart(0);
-    i0.ɵɵtemplate(1, APIScopesPanelComponent_ng_container_2_ng_template_29_div_22_ng_container_1_ng_container_1_Template, 1, 0, "ng-container", 32);
-    i0.ɵɵelementContainerEnd();
+function APIScopesPanelComponent_Conditional_2_ng_template_29_Conditional_22_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, APIScopesPanelComponent_Conditional_2_ng_template_29_Conditional_22_For_2_ng_container_0_Template, 1, 0, "ng-container", 27);
 } if (rf & 2) {
     const child_r8 = ctx.$implicit;
     i0.ɵɵnextContext(3);
     const scopeNode_r4 = i0.ɵɵreference(30);
-    i0.ɵɵadvance();
     i0.ɵɵproperty("ngTemplateOutlet", scopeNode_r4)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c0, child_r8));
 } }
-function APIScopesPanelComponent_ng_container_2_ng_template_29_div_22_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 60);
-    i0.ɵɵtemplate(1, APIScopesPanelComponent_ng_container_2_ng_template_29_div_22_ng_container_1_Template, 2, 4, "ng-container", 27);
+function APIScopesPanelComponent_Conditional_2_ng_template_29_Conditional_22_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 46);
+    i0.ɵɵrepeaterCreate(1, APIScopesPanelComponent_Conditional_2_ng_template_29_Conditional_22_For_2_Template, 1, 4, "ng-container", null, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const node_r7 = i0.ɵɵnextContext().node;
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngForOf", node_r7.children);
+    i0.ɵɵrepeater(node_r7.children);
 } }
-function APIScopesPanelComponent_ng_container_2_ng_template_29_Template(rf, ctx) { if (rf & 1) {
+function APIScopesPanelComponent_Conditional_2_ng_template_29_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 34)(1, "div", 35);
-    i0.ɵɵtemplate(2, APIScopesPanelComponent_ng_container_2_ng_template_29_button_2_Template, 2, 4, "button", 36)(3, APIScopesPanelComponent_ng_container_2_ng_template_29_span_3_Template, 1, 0, "span", 37);
-    i0.ɵɵelementStart(4, "div", 38);
-    i0.ɵɵlistener("click", function APIScopesPanelComponent_ng_container_2_ng_template_29_Template_div_click_4_listener() { const node_r7 = i0.ɵɵrestoreView(_r5).node; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.openEditDialog(node_r7.scope)); });
-    i0.ɵɵelementStart(5, "div", 39);
-    i0.ɵɵelement(6, "i", 14);
+    i0.ɵɵelementStart(0, "div", 28)(1, "div", 29);
+    i0.ɵɵconditionalCreate(2, APIScopesPanelComponent_Conditional_2_ng_template_29_Conditional_2_Template, 2, 4, "button", 30);
+    i0.ɵɵconditionalCreate(3, APIScopesPanelComponent_Conditional_2_ng_template_29_Conditional_3_Template, 1, 0, "span", 31);
+    i0.ɵɵelementStart(4, "div", 32);
+    i0.ɵɵlistener("click", function APIScopesPanelComponent_Conditional_2_ng_template_29_Template_div_click_4_listener() { const node_r7 = i0.ɵɵrestoreView(_r5).node; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.openEditDialog(node_r7.scope)); });
+    i0.ɵɵelementStart(5, "div", 33);
+    i0.ɵɵelement(6, "i", 12);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "div", 40)(8, "div", 41);
+    i0.ɵɵelementStart(7, "div", 34)(8, "div", 35);
     i0.ɵɵtext(9);
-    i0.ɵɵtemplate(10, APIScopesPanelComponent_ng_container_2_ng_template_29_span_10_Template, 2, 1, "span", 42)(11, APIScopesPanelComponent_ng_container_2_ng_template_29_span_11_Template, 2, 0, "span", 43);
+    i0.ɵɵconditionalCreate(10, APIScopesPanelComponent_Conditional_2_ng_template_29_Conditional_10_Template, 2, 1, "span", 36);
+    i0.ɵɵconditionalCreate(11, APIScopesPanelComponent_Conditional_2_ng_template_29_Conditional_11_Template, 2, 0, "span", 37);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(12, "div", 44)(13, "span", 45);
+    i0.ɵɵelementStart(12, "div", 38)(13, "span", 39);
     i0.ɵɵtext(14);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(15, APIScopesPanelComponent_ng_container_2_ng_template_29_span_15_Template, 2, 1, "span", 46)(16, APIScopesPanelComponent_ng_container_2_ng_template_29_span_16_Template, 2, 1, "span", 47);
+    i0.ɵɵconditionalCreate(15, APIScopesPanelComponent_Conditional_2_ng_template_29_Conditional_15_Template, 2, 1, "span", 40);
+    i0.ɵɵconditionalCreate(16, APIScopesPanelComponent_Conditional_2_ng_template_29_Conditional_16_Template, 2, 1, "span", 41);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(17, "div", 48)(18, "button", 49);
-    i0.ɵɵlistener("click", function APIScopesPanelComponent_ng_container_2_ng_template_29_Template_button_click_18_listener() { const node_r7 = i0.ɵɵrestoreView(_r5).node; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.openCreateDialog(node_r7.scope)); });
-    i0.ɵɵelement(19, "i", 23);
+    i0.ɵɵelementStart(17, "div", 42)(18, "button", 43);
+    i0.ɵɵlistener("click", function APIScopesPanelComponent_Conditional_2_ng_template_29_Template_button_click_18_listener() { const node_r7 = i0.ɵɵrestoreView(_r5).node; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.openCreateDialog(node_r7.scope)); });
+    i0.ɵɵelement(19, "i", 21);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(20, "button", 50);
-    i0.ɵɵlistener("click", function APIScopesPanelComponent_ng_container_2_ng_template_29_Template_button_click_20_listener() { const node_r7 = i0.ɵɵrestoreView(_r5).node; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.openEditDialog(node_r7.scope)); });
-    i0.ɵɵelement(21, "i", 51);
+    i0.ɵɵelementStart(20, "button", 44);
+    i0.ɵɵlistener("click", function APIScopesPanelComponent_Conditional_2_ng_template_29_Template_button_click_20_listener() { const node_r7 = i0.ɵɵrestoreView(_r5).node; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.openEditDialog(node_r7.scope)); });
+    i0.ɵɵelement(21, "i", 45);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵtemplate(22, APIScopesPanelComponent_ng_container_2_ng_template_29_div_22_Template, 2, 1, "div", 52);
+    i0.ɵɵconditionalCreate(22, APIScopesPanelComponent_Conditional_2_ng_template_29_Conditional_22_Template, 3, 0, "div", 46);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const node_r7 = ctx.node;
@@ -161,82 +158,82 @@ function APIScopesPanelComponent_ng_container_2_ng_template_29_Template(rf, ctx)
     i0.ɵɵadvance();
     i0.ɵɵclassProp("inactive", !node_r7.scope.IsActive);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", node_r7.children.length > 0);
+    i0.ɵɵconditional(node_r7.children.length > 0 ? 2 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", node_r7.children.length === 0);
+    i0.ɵɵconditional(node_r7.children.length === 0 ? 3 : -1);
     i0.ɵɵadvance(2);
     i0.ɵɵstyleProp("background-color", ctx_r1.getCategoryColor(node_r7.scope.Category));
     i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate1(" ", node_r7.scope.Name, " ");
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", node_r7.scope.FullPath && node_r7.scope.FullPath !== node_r7.scope.Name);
+    i0.ɵɵconditional(node_r7.scope.FullPath && node_r7.scope.FullPath !== node_r7.scope.Name ? 10 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", !node_r7.scope.IsActive);
+    i0.ɵɵconditional(!node_r7.scope.IsActive ? 11 : -1);
     i0.ɵɵadvance(2);
     i0.ɵɵstyleProp("color", ctx_r1.getCategoryColor(node_r7.scope.Category));
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", node_r7.scope.Category, " ");
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", node_r7.scope.ResourceType);
+    i0.ɵɵconditional(node_r7.scope.ResourceType ? 15 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", node_r7.scope.Description);
+    i0.ɵɵconditional(node_r7.scope.Description ? 16 : -1);
     i0.ɵɵadvance(6);
-    i0.ɵɵproperty("ngIf", node_r7.expanded && node_r7.children.length > 0);
+    i0.ɵɵconditional(node_r7.expanded && node_r7.children.length > 0 ? 22 : -1);
 } }
-function APIScopesPanelComponent_ng_container_2_Template(rf, ctx) { if (rf & 1) {
+function APIScopesPanelComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementContainerStart(0);
-    i0.ɵɵelementStart(1, "div", 6)(2, "div", 7)(3, "h3", 8);
-    i0.ɵɵelement(4, "i", 9);
-    i0.ɵɵtext(5, " API Scopes ");
+    i0.ɵɵelementStart(0, "div", 4)(1, "div", 5)(2, "h3", 6);
+    i0.ɵɵelement(3, "i", 7);
+    i0.ɵɵtext(4, " API Scopes ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "p", 10);
-    i0.ɵɵtext(7, "Manage hierarchical permission scopes for API access");
+    i0.ɵɵelementStart(5, "p", 8);
+    i0.ɵɵtext(6, "Manage hierarchical permission scopes for API access");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(8, "div", 11)(9, "div", 12)(10, "span", 13);
-    i0.ɵɵelement(11, "i", 14);
-    i0.ɵɵtext(12);
+    i0.ɵɵelementStart(7, "div", 9)(8, "div", 10)(9, "span", 11);
+    i0.ɵɵelement(10, "i", 12);
+    i0.ɵɵtext(11);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(13, "span", 15);
-    i0.ɵɵelement(14, "i", 16);
-    i0.ɵɵtext(15);
+    i0.ɵɵelementStart(12, "span", 13);
+    i0.ɵɵelement(13, "i", 14);
+    i0.ɵɵtext(14);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(16, "div", 17)(17, "button", 18);
-    i0.ɵɵlistener("click", function APIScopesPanelComponent_ng_container_2_Template_button_click_17_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.expandAll()); });
-    i0.ɵɵelement(18, "i", 19);
+    i0.ɵɵelementStart(15, "div", 15)(16, "button", 16);
+    i0.ɵɵlistener("click", function APIScopesPanelComponent_Conditional_2_Template_button_click_16_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.expandAll()); });
+    i0.ɵɵelement(17, "i", 17);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(19, "button", 20);
-    i0.ɵɵlistener("click", function APIScopesPanelComponent_ng_container_2_Template_button_click_19_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.collapseAll()); });
-    i0.ɵɵelement(20, "i", 21);
+    i0.ɵɵelementStart(18, "button", 18);
+    i0.ɵɵlistener("click", function APIScopesPanelComponent_Conditional_2_Template_button_click_18_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.collapseAll()); });
+    i0.ɵɵelement(19, "i", 19);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(21, "button", 22);
-    i0.ɵɵlistener("click", function APIScopesPanelComponent_ng_container_2_Template_button_click_21_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.openCreateDialog()); });
-    i0.ɵɵelement(22, "i", 23);
-    i0.ɵɵtext(23, " New Scope ");
+    i0.ɵɵelementStart(20, "button", 20);
+    i0.ɵɵlistener("click", function APIScopesPanelComponent_Conditional_2_Template_button_click_20_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.openCreateDialog()); });
+    i0.ɵɵelement(21, "i", 21);
+    i0.ɵɵtext(22, " New Scope ");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵtemplate(24, APIScopesPanelComponent_ng_container_2_div_24_Template, 3, 1, "div", 24)(25, APIScopesPanelComponent_ng_container_2_div_25_Template, 3, 1, "div", 25);
-    i0.ɵɵelementStart(26, "div", 26);
-    i0.ɵɵtemplate(27, APIScopesPanelComponent_ng_container_2_ng_container_27_Template, 2, 4, "ng-container", 27)(28, APIScopesPanelComponent_ng_container_2_div_28_Template, 6, 0, "div", 28);
+    i0.ɵɵconditionalCreate(23, APIScopesPanelComponent_Conditional_2_Conditional_23_Template, 3, 1, "div", 22);
+    i0.ɵɵconditionalCreate(24, APIScopesPanelComponent_Conditional_2_Conditional_24_Template, 3, 1, "div", 23);
+    i0.ɵɵelementStart(25, "div", 24);
+    i0.ɵɵrepeaterCreate(26, APIScopesPanelComponent_Conditional_2_For_27_Template, 1, 4, "ng-container", null, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵconditionalCreate(28, APIScopesPanelComponent_Conditional_2_Conditional_28_Template, 6, 0, "div", 25);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(29, APIScopesPanelComponent_ng_container_2_ng_template_29_Template, 23, 17, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor);
-    i0.ɵɵelementContainerEnd();
+    i0.ɵɵtemplate(29, APIScopesPanelComponent_Conditional_2_ng_template_29_Template, 23, 17, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵadvance(12);
+    i0.ɵɵadvance(11);
     i0.ɵɵtextInterpolate1(" ", ctx_r1.getTotalCount(), " total ");
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate1(" ", ctx_r1.getActiveCount(), " active ");
     i0.ɵɵadvance(9);
-    i0.ɵɵproperty("ngIf", ctx_r1.SuccessMessage);
+    i0.ɵɵconditional(ctx_r1.SuccessMessage ? 23 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r1.ErrorMessage);
+    i0.ɵɵconditional(ctx_r1.ErrorMessage ? 24 : -1);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngForOf", ctx_r1.ScopeTree);
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r1.ScopeTree.length === 0);
+    i0.ɵɵrepeater(ctx_r1.ScopeTree);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r1.ScopeTree.length === 0 ? 28 : -1);
 } }
-function APIScopesPanelComponent_kendo_window_3_span_19_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 68);
+function APIScopesPanelComponent_Conditional_3_Conditional_19_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 56);
     i0.ɵɵtext(1, " Full path will be: ");
     i0.ɵɵelementStart(2, "code");
     i0.ɵɵtext(3);
@@ -244,16 +241,16 @@ function APIScopesPanelComponent_kendo_window_3_span_19_Template(rf, ctx) { if (
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate2("", ctx_r1.SelectedParentScope.FullPath, ":", ctx_r1.EditName || "...", "");
+    i0.ɵɵtextInterpolate2("", ctx_r1.SelectedParentScope.FullPath, ":", ctx_r1.EditName || "...");
 } }
-function APIScopesPanelComponent_kendo_window_3_mj_loading_43_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mj-loading", 83);
+function APIScopesPanelComponent_Conditional_3_Conditional_43_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mj-loading", 68);
 } if (rf & 2) {
     i0.ɵɵproperty("showText", false);
 } }
-function APIScopesPanelComponent_kendo_window_3_span_44_Template(rf, ctx) { if (rf & 1) {
+function APIScopesPanelComponent_Conditional_3_Conditional_44_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
-    i0.ɵɵelement(1, "i", 84);
+    i0.ɵɵelement(1, "i", 70);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -261,69 +258,70 @@ function APIScopesPanelComponent_kendo_window_3_span_44_Template(rf, ctx) { if (
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1(" ", ctx_r1.EditingScope ? "Update" : "Create", " ");
 } }
-function APIScopesPanelComponent_kendo_window_3_Template(rf, ctx) { if (rf & 1) {
+function APIScopesPanelComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     const _r9 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "kendo-window", 61);
-    i0.ɵɵlistener("close", function APIScopesPanelComponent_kendo_window_3_Template_kendo_window_close_0_listener() { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.closeDialogs()); });
-    i0.ɵɵelementStart(1, "kendo-window-titlebar")(2, "div", 62);
-    i0.ɵɵelement(3, "i", 9);
+    i0.ɵɵelementStart(0, "kendo-window", 49);
+    i0.ɵɵlistener("close", function APIScopesPanelComponent_Conditional_3_Template_kendo_window_close_0_listener() { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.closeDialogs()); });
+    i0.ɵɵelementStart(1, "kendo-window-titlebar")(2, "div", 50);
+    i0.ɵɵelement(3, "i", 7);
     i0.ɵɵelementStart(4, "span");
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(6, "button", 63);
-    i0.ɵɵlistener("click", function APIScopesPanelComponent_kendo_window_3_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.closeDialogs()); });
-    i0.ɵɵelement(7, "i", 64);
+    i0.ɵɵelementStart(6, "button", 51);
+    i0.ɵɵlistener("click", function APIScopesPanelComponent_Conditional_3_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.closeDialogs()); });
+    i0.ɵɵelement(7, "i", 52);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(8, "div", 65)(9, "div", 66)(10, "label");
+    i0.ɵɵelementStart(8, "div", 53)(9, "div", 54)(10, "label");
     i0.ɵɵtext(11, "Scope Name *");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(12, "input", 67);
-    i0.ɵɵtwoWayListener("ngModelChange", function APIScopesPanelComponent_kendo_window_3_Template_input_ngModelChange_12_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.EditName, $event) || (ctx_r1.EditName = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementStart(12, "input", 55);
+    i0.ɵɵtwoWayListener("ngModelChange", function APIScopesPanelComponent_Conditional_3_Template_input_ngModelChange_12_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.EditName, $event) || (ctx_r1.EditName = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(13, "span", 68);
+    i0.ɵɵelementStart(13, "span", 56);
     i0.ɵɵtext(14, "Use lowercase, single word. Will be combined with parent for full path.");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(15, "div", 66)(16, "label");
+    i0.ɵɵelementStart(15, "div", 54)(16, "label");
     i0.ɵɵtext(17, "Parent Scope");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(18, "kendo-dropdownlist", 69);
-    i0.ɵɵtwoWayListener("ngModelChange", function APIScopesPanelComponent_kendo_window_3_Template_kendo_dropdownlist_ngModelChange_18_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.EditParentId, $event) || (ctx_r1.EditParentId = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementStart(18, "kendo-dropdownlist", 57);
+    i0.ɵɵtwoWayListener("ngModelChange", function APIScopesPanelComponent_Conditional_3_Template_kendo_dropdownlist_ngModelChange_18_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.EditParentId, $event) || (ctx_r1.EditParentId = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(19, APIScopesPanelComponent_kendo_window_3_span_19_Template, 4, 2, "span", 70);
+    i0.ɵɵconditionalCreate(19, APIScopesPanelComponent_Conditional_3_Conditional_19_Template, 4, 2, "span", 56);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(20, "div", 71)(21, "div", 72)(22, "label");
+    i0.ɵɵelementStart(20, "div", 58)(21, "div", 59)(22, "label");
     i0.ɵɵtext(23, "Category");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(24, "kendo-dropdownlist", 73);
-    i0.ɵɵtwoWayListener("ngModelChange", function APIScopesPanelComponent_kendo_window_3_Template_kendo_dropdownlist_ngModelChange_24_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.EditCategory, $event) || (ctx_r1.EditCategory = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementStart(24, "kendo-dropdownlist", 60);
+    i0.ɵɵtwoWayListener("ngModelChange", function APIScopesPanelComponent_Conditional_3_Template_kendo_dropdownlist_ngModelChange_24_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.EditCategory, $event) || (ctx_r1.EditCategory = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(25, "div", 72)(26, "label");
+    i0.ɵɵelementStart(25, "div", 59)(26, "label");
     i0.ɵɵtext(27, "Resource Type");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(28, "kendo-dropdownlist", 74);
-    i0.ɵɵtwoWayListener("ngModelChange", function APIScopesPanelComponent_kendo_window_3_Template_kendo_dropdownlist_ngModelChange_28_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.EditResourceType, $event) || (ctx_r1.EditResourceType = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementStart(28, "kendo-dropdownlist", 61);
+    i0.ɵɵtwoWayListener("ngModelChange", function APIScopesPanelComponent_Conditional_3_Template_kendo_dropdownlist_ngModelChange_28_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.EditResourceType, $event) || (ctx_r1.EditResourceType = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(29, "div", 66)(30, "label");
+    i0.ɵɵelementStart(29, "div", 54)(30, "label");
     i0.ɵɵtext(31, "Description");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(32, "textarea", 75);
-    i0.ɵɵtwoWayListener("ngModelChange", function APIScopesPanelComponent_kendo_window_3_Template_textarea_ngModelChange_32_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.EditDescription, $event) || (ctx_r1.EditDescription = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementStart(32, "textarea", 62);
+    i0.ɵɵtwoWayListener("ngModelChange", function APIScopesPanelComponent_Conditional_3_Template_textarea_ngModelChange_32_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.EditDescription, $event) || (ctx_r1.EditDescription = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(33, "div", 66)(34, "label", 76)(35, "input", 77);
-    i0.ɵɵtwoWayListener("ngModelChange", function APIScopesPanelComponent_kendo_window_3_Template_input_ngModelChange_35_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.EditIsActive, $event) || (ctx_r1.EditIsActive = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementStart(33, "div", 54)(34, "label", 63)(35, "input", 64);
+    i0.ɵɵtwoWayListener("ngModelChange", function APIScopesPanelComponent_Conditional_3_Template_input_ngModelChange_35_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.EditIsActive, $event) || (ctx_r1.EditIsActive = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(36, "div")(37, "span");
     i0.ɵɵtext(38, "Active");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(39, "span", 78);
+    i0.ɵɵelementStart(39, "span", 65);
     i0.ɵɵtext(40, "Inactive scopes cannot be assigned to keys or applications");
     i0.ɵɵelementEnd()()()();
-    i0.ɵɵelementStart(41, "div", 79)(42, "button", 80);
-    i0.ɵɵlistener("click", function APIScopesPanelComponent_kendo_window_3_Template_button_click_42_listener() { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.saveScope()); });
-    i0.ɵɵtemplate(43, APIScopesPanelComponent_kendo_window_3_mj_loading_43_Template, 1, 1, "mj-loading", 81)(44, APIScopesPanelComponent_kendo_window_3_span_44_Template, 3, 1, "span", 3);
+    i0.ɵɵelementStart(41, "div", 66)(42, "button", 67);
+    i0.ɵɵlistener("click", function APIScopesPanelComponent_Conditional_3_Template_button_click_42_listener() { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.saveScope()); });
+    i0.ɵɵconditionalCreate(43, APIScopesPanelComponent_Conditional_3_Conditional_43_Template, 1, 1, "mj-loading", 68);
+    i0.ɵɵconditionalCreate(44, APIScopesPanelComponent_Conditional_3_Conditional_44_Template, 3, 1, "span");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(45, "button", 82);
-    i0.ɵɵlistener("click", function APIScopesPanelComponent_kendo_window_3_Template_button_click_45_listener() { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.closeDialogs()); });
+    i0.ɵɵelementStart(45, "button", 69);
+    i0.ɵɵlistener("click", function APIScopesPanelComponent_Conditional_3_Template_button_click_45_listener() { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.closeDialogs()); });
     i0.ɵɵtext(46, "Cancel");
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
@@ -337,7 +335,7 @@ function APIScopesPanelComponent_kendo_window_3_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵtwoWayProperty("ngModel", ctx_r1.EditParentId);
     i0.ɵɵproperty("data", ctx_r1.getParentOptions())("textField", "FullPath")("valueField", "ID")("valuePrimitive", true)("defaultItem", i0.ɵɵpureFunction0(29, _c1));
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r1.SelectedParentScope);
+    i0.ɵɵconditional(ctx_r1.SelectedParentScope ? 19 : -1);
     i0.ɵɵadvance(5);
     i0.ɵɵtwoWayProperty("ngModel", ctx_r1.EditCategory);
     i0.ɵɵproperty("data", ctx_r1.Categories)("valuePrimitive", true);
@@ -352,14 +350,10 @@ function APIScopesPanelComponent_kendo_window_3_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵadvance(7);
     i0.ɵɵproperty("themeColor", "primary")("disabled", !ctx_r1.EditName.trim() || ctx_r1.IsSaving);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r1.IsSaving);
+    i0.ɵɵconditional(ctx_r1.IsSaving ? 43 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", !ctx_r1.IsSaving);
+    i0.ɵɵconditional(!ctx_r1.IsSaving ? 44 : -1);
 } }
-/** Tree shaking prevention function */
-export function LoadAPIScopesPanel() {
-    // This function prevents tree shaking
-}
 /**
  * API Scopes Panel Component
  * Manages API Scopes in a hierarchical tree structure
@@ -629,24 +623,26 @@ export class APIScopesPanelComponent {
         return this.FlatScopes.filter(s => s.IsActive).length;
     }
     static ɵfac = function APIScopesPanelComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || APIScopesPanelComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: APIScopesPanelComponent, selectors: [["mj-api-scopes-panel"]], outputs: { ScopeUpdated: "ScopeUpdated" }, decls: 4, vars: 3, consts: [["scopeNode", ""], [1, "scopes-panel"], ["text", "Loading scopes...", 4, "ngIf"], [4, "ngIf"], [3, "width", "minWidth", "minHeight", "resizable", "draggable", "top", "close", 4, "ngIf"], ["text", "Loading scopes..."], [1, "panel-header"], [1, "header-left"], [1, "panel-title"], [1, "fa-solid", "fa-shield-halved"], [1, "panel-subtitle"], [1, "header-actions"], [1, "scope-stats"], [1, "stat"], [1, "fa-solid", "fa-shield"], [1, "stat", "active"], [1, "fa-solid", "fa-check-circle"], [1, "tree-controls"], ["title", "Expand All", 1, "btn-icon", 3, "click"], [1, "fa-solid", "fa-plus-square"], ["title", "Collapse All", 1, "btn-icon", 3, "click"], [1, "fa-solid", "fa-minus-square"], [1, "btn-create", 3, "click"], [1, "fa-solid", "fa-plus"], ["class", "message success", 4, "ngIf"], ["class", "message error", 4, "ngIf"], [1, "scope-tree"], [4, "ngFor", "ngForOf"], ["class", "empty-state", 4, "ngIf"], [1, "message", "success"], [1, "message", "error"], [1, "fa-solid", "fa-circle-exclamation"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], [1, "empty-state"], [1, "scope-node"], [1, "node-content"], ["class", "expand-btn", 3, "click", 4, "ngIf"], ["class", "expand-placeholder", 4, "ngIf"], [1, "scope-info", 3, "click"], [1, "scope-icon"], [1, "scope-details"], [1, "scope-name"], ["class", "full-path", 4, "ngIf"], ["class", "status-badge", 4, "ngIf"], [1, "scope-meta"], [1, "category"], ["class", "resource-type", 4, "ngIf"], ["class", "description", 4, "ngIf"], [1, "node-actions"], ["title", "Add Child Scope", 1, "btn-node-action", 3, "click"], ["title", "Edit Scope", 1, "btn-node-action", 3, "click"], [1, "fa-solid", "fa-pencil"], ["class", "children", 4, "ngIf"], [1, "expand-btn", 3, "click"], [1, "fa-solid"], [1, "expand-placeholder"], [1, "full-path"], [1, "status-badge"], [1, "resource-type"], [1, "description"], [1, "children"], [3, "close", "width", "minWidth", "minHeight", "resizable", "draggable", "top"], [1, "dialog-title"], ["kendoButton", "", "fillMode", "flat", "title", "Close (Esc)", 1, "window-close-btn", 3, "click"], [1, "fa-solid", "fa-times"], [1, "dialog-content"], [1, "form-field"], ["kendoTextBox", "", "placeholder", "e.g., runview, create, execute", 1, "form-input", 3, "ngModelChange", "ngModel"], [1, "field-hint"], [3, "ngModelChange", "ngModel", "data", "textField", "valueField", "valuePrimitive", "defaultItem"], ["class", "field-hint", 4, "ngIf"], [1, "form-row"], [1, "form-field", "half"], [3, "ngModelChange", "ngModel", "data", "valuePrimitive"], [3, "ngModelChange", "ngModel", "data", "valuePrimitive", "defaultItem"], ["kendoTextArea", "", "placeholder", "Describe what this scope allows...", 1, "form-textarea", 3, "ngModelChange", "ngModel", "rows"], [1, "checkbox-label"], ["type", "checkbox", "kendoCheckBox", "", 3, "ngModelChange", "ngModel"], [1, "checkbox-hint"], [1, "dialog-actions"], ["kendoButton", "", 3, "click", "themeColor", "disabled"], ["size", "small", 3, "showText", 4, "ngIf"], ["kendoButton", "", 3, "click"], ["size", "small", 3, "showText"], [1, "fa-solid", "fa-save"]], template: function APIScopesPanelComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: APIScopesPanelComponent, selectors: [["mj-api-scopes-panel"]], outputs: { ScopeUpdated: "ScopeUpdated" }, standalone: false, decls: 4, vars: 3, consts: [["scopeNode", ""], [1, "scopes-panel"], ["text", "Loading scopes..."], [3, "width", "minWidth", "minHeight", "resizable", "draggable", "top"], [1, "panel-header"], [1, "header-left"], [1, "panel-title"], [1, "fa-solid", "fa-shield-halved"], [1, "panel-subtitle"], [1, "header-actions"], [1, "scope-stats"], [1, "stat"], [1, "fa-solid", "fa-shield"], [1, "stat", "active"], [1, "fa-solid", "fa-check-circle"], [1, "tree-controls"], ["title", "Expand All", 1, "btn-icon", 3, "click"], [1, "fa-solid", "fa-plus-square"], ["title", "Collapse All", 1, "btn-icon", 3, "click"], [1, "fa-solid", "fa-minus-square"], [1, "btn-create", 3, "click"], [1, "fa-solid", "fa-plus"], [1, "message", "success"], [1, "message", "error"], [1, "scope-tree"], [1, "empty-state"], [1, "fa-solid", "fa-circle-exclamation"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], [1, "scope-node"], [1, "node-content"], [1, "expand-btn"], [1, "expand-placeholder"], [1, "scope-info", 3, "click"], [1, "scope-icon"], [1, "scope-details"], [1, "scope-name"], [1, "full-path"], [1, "status-badge"], [1, "scope-meta"], [1, "category"], [1, "resource-type"], [1, "description"], [1, "node-actions"], ["title", "Add Child Scope", 1, "btn-node-action", 3, "click"], ["title", "Edit Scope", 1, "btn-node-action", 3, "click"], [1, "fa-solid", "fa-pencil"], [1, "children"], [1, "expand-btn", 3, "click"], [1, "fa-solid"], [3, "close", "width", "minWidth", "minHeight", "resizable", "draggable", "top"], [1, "dialog-title"], ["kendoButton", "", "fillMode", "flat", "title", "Close (Esc)", 1, "window-close-btn", 3, "click"], [1, "fa-solid", "fa-times"], [1, "dialog-content"], [1, "form-field"], ["kendoTextBox", "", "placeholder", "e.g., runview, create, execute", 1, "form-input", 3, "ngModelChange", "ngModel"], [1, "field-hint"], [3, "ngModelChange", "ngModel", "data", "textField", "valueField", "valuePrimitive", "defaultItem"], [1, "form-row"], [1, "form-field", "half"], [3, "ngModelChange", "ngModel", "data", "valuePrimitive"], [3, "ngModelChange", "ngModel", "data", "valuePrimitive", "defaultItem"], ["kendoTextArea", "", "placeholder", "Describe what this scope allows...", 1, "form-textarea", 3, "ngModelChange", "ngModel", "rows"], [1, "checkbox-label"], ["type", "checkbox", "kendoCheckBox", "", 3, "ngModelChange", "ngModel"], [1, "checkbox-hint"], [1, "dialog-actions"], ["kendoButton", "", 3, "click", "themeColor", "disabled"], ["size", "small", 3, "showText"], ["kendoButton", "", 3, "click"], [1, "fa-solid", "fa-save"]], template: function APIScopesPanelComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 1);
-            i0.ɵɵtemplate(1, APIScopesPanelComponent_mj_loading_1_Template, 1, 0, "mj-loading", 2)(2, APIScopesPanelComponent_ng_container_2_Template, 31, 6, "ng-container", 3)(3, APIScopesPanelComponent_kendo_window_3_Template, 47, 30, "kendo-window", 4);
+            i0.ɵɵconditionalCreate(1, APIScopesPanelComponent_Conditional_1_Template, 1, 0, "mj-loading", 2);
+            i0.ɵɵconditionalCreate(2, APIScopesPanelComponent_Conditional_2_Template, 31, 5);
+            i0.ɵɵconditionalCreate(3, APIScopesPanelComponent_Conditional_3_Template, 47, 30, "kendo-window", 3);
             i0.ɵɵelementEnd();
         } if (rf & 2) {
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", ctx.IsLoading);
+            i0.ɵɵconditional(ctx.IsLoading ? 1 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", !ctx.IsLoading);
+            i0.ɵɵconditional(!ctx.IsLoading ? 2 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", ctx.ShowCreateDialog || ctx.ShowEditDialog);
-        } }, dependencies: [i1.NgForOf, i1.NgIf, i1.NgTemplateOutlet, i2.DefaultValueAccessor, i2.CheckboxControlValueAccessor, i2.NgControlStatus, i2.NgModel, i3.DropDownListComponent, i4.TextAreaDirective, i4.TextBoxDirective, i4.CheckBoxDirective, i5.WindowComponent, i5.WindowTitleBarComponent, i6.ButtonComponent, i7.LoadingComponent], styles: [".scopes-panel[_ngcontent-%COMP%] {\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n}\n\n\n\n.panel-header[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n    margin-bottom: 24px;\n    flex-wrap: wrap;\n    gap: 16px;\n}\n\n.header-left[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 200px;\n}\n\n.panel-title[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    font-size: 18px;\n    font-weight: 600;\n    color: var(--text-primary, #1f2937);\n    margin: 0 0 4px 0;\n}\n\n.panel-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: #10b981;\n}\n\n.panel-subtitle[_ngcontent-%COMP%] {\n    font-size: 14px;\n    color: var(--text-secondary, #6b7280);\n    margin: 0;\n}\n\n.header-actions[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n}\n\n.scope-stats[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 16px;\n}\n\n.stat[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 13px;\n    color: var(--text-secondary, #6b7280);\n}\n\n.stat.active[_ngcontent-%COMP%] {\n    color: #10b981;\n}\n\n.stat[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 14px;\n}\n\n.tree-controls[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 4px;\n}\n\n.btn-icon[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 32px;\n    height: 32px;\n    background: var(--card-background, #ffffff);\n    border: 1px solid var(--border-color, #e5e7eb);\n    border-radius: 6px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.btn-icon[_ngcontent-%COMP%]:hover {\n    background: var(--item-hover, #f3f4f6);\n}\n\n.btn-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 14px;\n    color: var(--text-secondary, #6b7280);\n}\n\n.btn-create[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 10px 20px;\n    background: linear-gradient(135deg, #10b981 0%, #059669 100%);\n    color: white;\n    border: none;\n    border-radius: 8px;\n    font-weight: 600;\n    font-size: 14px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.btn-create[_ngcontent-%COMP%]:hover {\n    transform: translateY(-1px);\n    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);\n}\n\n\n\n.message[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    padding: 12px 16px;\n    border-radius: 8px;\n    margin-bottom: 16px;\n    font-size: 14px;\n}\n\n.message.success[_ngcontent-%COMP%] {\n    background: #d1fae5;\n    color: #065f46;\n    border: 1px solid #a7f3d0;\n}\n\n.message.error[_ngcontent-%COMP%] {\n    background: #fee2e2;\n    color: #991b1b;\n    border: 1px solid #fca5a5;\n}\n\n\n\n.scope-tree[_ngcontent-%COMP%] {\n    flex: 1;\n    overflow-y: auto;\n    background: var(--card-background, #ffffff);\n    border-radius: 12px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n}\n\n.scope-node[_ngcontent-%COMP%] {\n    border-bottom: 1px solid var(--border-color, #e5e7eb);\n}\n\n.scope-node[_ngcontent-%COMP%]:last-child {\n    border-bottom: none;\n}\n\n.node-content[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    padding: 12px 16px;\n    transition: background 0.2s ease;\n}\n\n.node-content[_ngcontent-%COMP%]:hover {\n    background: var(--item-hover, #f9fafb);\n}\n\n.node-content.inactive[_ngcontent-%COMP%] {\n    opacity: 0.6;\n}\n\n.expand-btn[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 24px;\n    height: 24px;\n    background: none;\n    border: none;\n    cursor: pointer;\n    color: var(--text-tertiary, #9ca3af);\n    transition: transform 0.2s ease;\n    flex-shrink: 0;\n}\n\n.expand-btn[_ngcontent-%COMP%]:hover {\n    color: var(--text-secondary, #6b7280);\n}\n\n.expand-placeholder[_ngcontent-%COMP%] {\n    width: 24px;\n    flex-shrink: 0;\n}\n\n.scope-info[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    flex: 1;\n    min-width: 0;\n    cursor: pointer;\n}\n\n.scope-icon[_ngcontent-%COMP%] {\n    width: 32px;\n    height: 32px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 8px;\n    margin-right: 12px;\n    flex-shrink: 0;\n}\n\n.scope-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 14px;\n    color: white;\n}\n\n.scope-details[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 0;\n}\n\n.scope-name[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-size: 14px;\n    font-weight: 500;\n    color: var(--text-primary, #1f2937);\n    flex-wrap: wrap;\n}\n\n.full-path[_ngcontent-%COMP%] {\n    font-family: monospace;\n    font-size: 12px;\n    color: var(--text-tertiary, #9ca3af);\n    background: var(--tag-background, #f3f4f6);\n    padding: 2px 6px;\n    border-radius: 4px;\n}\n\n.status-badge[_ngcontent-%COMP%] {\n    font-size: 10px;\n    font-weight: 500;\n    padding: 2px 6px;\n    border-radius: 4px;\n    background: #f3f4f6;\n    color: #6b7280;\n}\n\n.scope-meta[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    margin-top: 4px;\n    font-size: 12px;\n    flex-wrap: wrap;\n}\n\n.category[_ngcontent-%COMP%] {\n    font-weight: 500;\n}\n\n.resource-type[_ngcontent-%COMP%] {\n    color: var(--text-secondary, #6b7280);\n    background: var(--tag-background, #f3f4f6);\n    padding: 2px 6px;\n    border-radius: 4px;\n}\n\n.description[_ngcontent-%COMP%] {\n    color: var(--text-tertiary, #9ca3af);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    max-width: 300px;\n}\n\n.node-actions[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 4px;\n    margin-left: 12px;\n    opacity: 0;\n    transition: opacity 0.2s ease;\n}\n\n.node-content[_ngcontent-%COMP%]:hover   .node-actions[_ngcontent-%COMP%] {\n    opacity: 1;\n}\n\n.btn-node-action[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 28px;\n    height: 28px;\n    background: var(--card-background, #ffffff);\n    border: 1px solid var(--border-color, #e5e7eb);\n    border-radius: 6px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.btn-node-action[_ngcontent-%COMP%]:hover {\n    background: #10b981;\n    border-color: #10b981;\n    color: white;\n}\n\n.btn-node-action[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 12px;\n}\n\n.children[_ngcontent-%COMP%] {\n    margin-left: 0;\n}\n\n\n\n.empty-state[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 48px;\n    color: var(--text-secondary, #6b7280);\n    text-align: center;\n}\n\n.empty-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 48px;\n    margin-bottom: 16px;\n    opacity: 0.5;\n}\n\n.empty-state[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n    font-size: 16px;\n    font-weight: 500;\n}\n\n.empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n    font-size: 14px;\n    margin-top: 8px;\n}\n\n\n\n\n\n\n\n\n[_nghost-%COMP%]     kendo-window {\n    border-radius: 16px !important;\n    overflow: hidden;\n    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15),\n                0 10px 30px rgba(0, 0, 0, 0.1),\n                0 0 0 1px rgba(0, 0, 0, 0.05) !important;\n}\n\n[_nghost-%COMP%]     kendo-window .k-window-content {\n    padding: 0 !important;\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\n}\n\n[_nghost-%COMP%]     kendo-window-titlebar {\n    display: flex !important;\n    align-items: center;\n    justify-content: space-between;\n    padding: 18px 24px !important;\n    background: linear-gradient(135deg, #fafafa 0%, #f3f4f6 100%) !important;\n    border-bottom: 1px solid #e5e7eb !important;\n}\n\n.dialog-title[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    font-weight: 600;\n    font-size: 17px;\n    color: #1f2937;\n}\n\n.dialog-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: #10b981;\n    font-size: 18px;\n}\n\n.window-close-btn[_ngcontent-%COMP%] {\n    margin-left: auto;\n    color: #9ca3af;\n    transition: all 0.2s ease;\n    width: 32px;\n    height: 32px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 8px;\n}\n\n.window-close-btn[_ngcontent-%COMP%]:hover {\n    color: #374151;\n    background: rgba(0, 0, 0, 0.05);\n}\n\n.window-close-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 16px;\n}\n\n\n\n.dialog-content[_ngcontent-%COMP%] {\n    padding: 24px;\n    flex: 1;\n    overflow-y: auto;\n}\n\n\n\n.form-field[_ngcontent-%COMP%] {\n    margin-bottom: 20px;\n}\n\n.form-field[_ngcontent-%COMP%]:last-of-type {\n    margin-bottom: 0;\n}\n\n.form-field[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n    display: block;\n    font-size: 13px;\n    font-weight: 600;\n    color: #374151;\n    margin-bottom: 8px;\n    letter-spacing: 0.01em;\n}\n\n.form-input[_ngcontent-%COMP%] {\n    width: 100%;\n}\n\n.form-textarea[_ngcontent-%COMP%] {\n    width: 100%;\n    resize: vertical;\n    min-height: 80px;\n}\n\n[_nghost-%COMP%]     .form-input .k-input, \n[_nghost-%COMP%]     .form-textarea .k-input-inner, \n[_nghost-%COMP%]     .form-field .k-dropdownlist {\n    padding: 10px 14px;\n    border-radius: 8px;\n    font-size: 14px;\n    border-color: #e5e7eb;\n    transition: all 0.2s ease;\n}\n\n[_nghost-%COMP%]     .form-input:focus-within, \n[_nghost-%COMP%]     .form-textarea:focus-within, \n[_nghost-%COMP%]     .form-field .k-dropdownlist.k-focus {\n    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);\n}\n\n.field-hint[_ngcontent-%COMP%] {\n    display: block;\n    font-size: 12px;\n    color: #6b7280;\n    margin-top: 6px;\n    line-height: 1.4;\n}\n\n.form-row[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 16px;\n}\n\n.form-field.half[_ngcontent-%COMP%] {\n    flex: 1;\n}\n\n.checkbox-label[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: flex-start;\n    gap: 12px;\n    cursor: pointer;\n    padding: 12px 16px;\n    background: #f9fafb;\n    border-radius: 10px;\n    border: 1px solid #e5e7eb;\n    transition: all 0.2s ease;\n}\n\n.checkbox-label[_ngcontent-%COMP%]:hover {\n    background: #f3f4f6;\n    border-color: #d1d5db;\n}\n\n.checkbox-label[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {\n    margin-top: 2px;\n    flex-shrink: 0;\n}\n\n.checkbox-label[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]:first-of-type {\n    font-weight: 600;\n    color: #374151;\n    font-size: 14px;\n}\n\n.checkbox-hint[_ngcontent-%COMP%] {\n    display: block;\n    font-size: 12px;\n    color: #6b7280;\n    margin-top: 4px;\n    line-height: 1.4;\n}\n\n\n\n.dialog-actions[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 12px;\n    padding: 20px 24px;\n    background: #f9fafb;\n    border-top: 1px solid #e5e7eb;\n    margin: 0 -24px -24px -24px;\n}\n\n[_nghost-%COMP%]     .dialog-actions .k-button {\n    min-width: 100px;\n    padding: 10px 20px;\n    font-weight: 600;\n    border-radius: 8px;\n    transition: all 0.2s ease;\n}\n\n[_nghost-%COMP%]     .dialog-actions .k-button-solid-primary {\n    background: linear-gradient(135deg, #10b981 0%, #059669 100%);\n    border: none;\n    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);\n}\n\n[_nghost-%COMP%]     .dialog-actions .k-button-solid-primary:hover {\n    transform: translateY(-1px);\n    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);\n}"] });
+            i0.ɵɵconditional(ctx.ShowCreateDialog || ctx.ShowEditDialog ? 3 : -1);
+        } }, dependencies: [i1.NgTemplateOutlet, i2.DefaultValueAccessor, i2.CheckboxControlValueAccessor, i2.NgControlStatus, i2.NgModel, i3.DropDownListComponent, i4.TextBoxDirective, i4.TextAreaDirective, i4.CheckBoxDirective, i5.WindowComponent, i5.WindowTitleBarComponent, i6.ButtonComponent, i7.LoadingComponent], styles: [".scopes-panel[_ngcontent-%COMP%] {\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n}\n\n\n\n.panel-header[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n    margin-bottom: 24px;\n    flex-wrap: wrap;\n    gap: 16px;\n}\n\n.header-left[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 200px;\n}\n\n.panel-title[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    font-size: 18px;\n    font-weight: 600;\n    color: var(--text-primary, #1f2937);\n    margin: 0 0 4px 0;\n}\n\n.panel-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: #10b981;\n}\n\n.panel-subtitle[_ngcontent-%COMP%] {\n    font-size: 14px;\n    color: var(--text-secondary, #6b7280);\n    margin: 0;\n}\n\n.header-actions[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n}\n\n.scope-stats[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 16px;\n}\n\n.stat[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 13px;\n    color: var(--text-secondary, #6b7280);\n}\n\n.stat.active[_ngcontent-%COMP%] {\n    color: #10b981;\n}\n\n.stat[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 14px;\n}\n\n.tree-controls[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 4px;\n}\n\n.btn-icon[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 32px;\n    height: 32px;\n    background: var(--card-background, #ffffff);\n    border: 1px solid var(--border-color, #e5e7eb);\n    border-radius: 6px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.btn-icon[_ngcontent-%COMP%]:hover {\n    background: var(--item-hover, #f3f4f6);\n}\n\n.btn-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 14px;\n    color: var(--text-secondary, #6b7280);\n}\n\n.btn-create[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 10px 20px;\n    background: linear-gradient(135deg, #10b981 0%, #059669 100%);\n    color: white;\n    border: none;\n    border-radius: 8px;\n    font-weight: 600;\n    font-size: 14px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.btn-create[_ngcontent-%COMP%]:hover {\n    transform: translateY(-1px);\n    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);\n}\n\n\n\n.message[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    padding: 12px 16px;\n    border-radius: 8px;\n    margin-bottom: 16px;\n    font-size: 14px;\n}\n\n.message.success[_ngcontent-%COMP%] {\n    background: #d1fae5;\n    color: #065f46;\n    border: 1px solid #a7f3d0;\n}\n\n.message.error[_ngcontent-%COMP%] {\n    background: #fee2e2;\n    color: #991b1b;\n    border: 1px solid #fca5a5;\n}\n\n\n\n.scope-tree[_ngcontent-%COMP%] {\n    flex: 1;\n    overflow-y: auto;\n    background: var(--card-background, #ffffff);\n    border-radius: 12px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n}\n\n.scope-node[_ngcontent-%COMP%] {\n    border-bottom: 1px solid var(--border-color, #e5e7eb);\n}\n\n.scope-node[_ngcontent-%COMP%]:last-child {\n    border-bottom: none;\n}\n\n.node-content[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    padding: 12px 16px;\n    transition: background 0.2s ease;\n}\n\n.node-content[_ngcontent-%COMP%]:hover {\n    background: var(--item-hover, #f9fafb);\n}\n\n.node-content.inactive[_ngcontent-%COMP%] {\n    opacity: 0.6;\n}\n\n.expand-btn[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 24px;\n    height: 24px;\n    background: none;\n    border: none;\n    cursor: pointer;\n    color: var(--text-tertiary, #9ca3af);\n    transition: transform 0.2s ease;\n    flex-shrink: 0;\n}\n\n.expand-btn[_ngcontent-%COMP%]:hover {\n    color: var(--text-secondary, #6b7280);\n}\n\n.expand-placeholder[_ngcontent-%COMP%] {\n    width: 24px;\n    flex-shrink: 0;\n}\n\n.scope-info[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    flex: 1;\n    min-width: 0;\n    cursor: pointer;\n}\n\n.scope-icon[_ngcontent-%COMP%] {\n    width: 32px;\n    height: 32px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 8px;\n    margin-right: 12px;\n    flex-shrink: 0;\n}\n\n.scope-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 14px;\n    color: white;\n}\n\n.scope-details[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 0;\n}\n\n.scope-name[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-size: 14px;\n    font-weight: 500;\n    color: var(--text-primary, #1f2937);\n    flex-wrap: wrap;\n}\n\n.full-path[_ngcontent-%COMP%] {\n    font-family: monospace;\n    font-size: 12px;\n    color: var(--text-tertiary, #9ca3af);\n    background: var(--tag-background, #f3f4f6);\n    padding: 2px 6px;\n    border-radius: 4px;\n}\n\n.status-badge[_ngcontent-%COMP%] {\n    font-size: 10px;\n    font-weight: 500;\n    padding: 2px 6px;\n    border-radius: 4px;\n    background: #f3f4f6;\n    color: #6b7280;\n}\n\n.scope-meta[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    margin-top: 4px;\n    font-size: 12px;\n    flex-wrap: wrap;\n}\n\n.category[_ngcontent-%COMP%] {\n    font-weight: 500;\n}\n\n.resource-type[_ngcontent-%COMP%] {\n    color: var(--text-secondary, #6b7280);\n    background: var(--tag-background, #f3f4f6);\n    padding: 2px 6px;\n    border-radius: 4px;\n}\n\n.description[_ngcontent-%COMP%] {\n    color: var(--text-tertiary, #9ca3af);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    max-width: 300px;\n}\n\n.node-actions[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 4px;\n    margin-left: 12px;\n    opacity: 0;\n    transition: opacity 0.2s ease;\n}\n\n.node-content[_ngcontent-%COMP%]:hover   .node-actions[_ngcontent-%COMP%] {\n    opacity: 1;\n}\n\n.btn-node-action[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 28px;\n    height: 28px;\n    background: var(--card-background, #ffffff);\n    border: 1px solid var(--border-color, #e5e7eb);\n    border-radius: 6px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.btn-node-action[_ngcontent-%COMP%]:hover {\n    background: #10b981;\n    border-color: #10b981;\n    color: white;\n}\n\n.btn-node-action[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 12px;\n}\n\n.children[_ngcontent-%COMP%] {\n    margin-left: 0;\n}\n\n\n\n.empty-state[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 48px;\n    color: var(--text-secondary, #6b7280);\n    text-align: center;\n}\n\n.empty-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 48px;\n    margin-bottom: 16px;\n    opacity: 0.5;\n}\n\n.empty-state[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n    font-size: 16px;\n    font-weight: 500;\n}\n\n.empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n    font-size: 14px;\n    margin-top: 8px;\n}\n\n\n\n\n\n\n\n\n[_nghost-%COMP%]     kendo-window {\n    border-radius: 16px !important;\n    overflow: hidden;\n    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15),\n                0 10px 30px rgba(0, 0, 0, 0.1),\n                0 0 0 1px rgba(0, 0, 0, 0.05) !important;\n}\n\n[_nghost-%COMP%]     kendo-window .k-window-content {\n    padding: 0 !important;\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\n}\n\n[_nghost-%COMP%]     kendo-window-titlebar {\n    display: flex !important;\n    align-items: center;\n    justify-content: space-between;\n    padding: 18px 24px !important;\n    background: linear-gradient(135deg, #fafafa 0%, #f3f4f6 100%) !important;\n    border-bottom: 1px solid #e5e7eb !important;\n}\n\n.dialog-title[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    font-weight: 600;\n    font-size: 17px;\n    color: #1f2937;\n}\n\n.dialog-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: #10b981;\n    font-size: 18px;\n}\n\n.window-close-btn[_ngcontent-%COMP%] {\n    margin-left: auto;\n    color: #9ca3af;\n    transition: all 0.2s ease;\n    width: 32px;\n    height: 32px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 8px;\n}\n\n.window-close-btn[_ngcontent-%COMP%]:hover {\n    color: #374151;\n    background: rgba(0, 0, 0, 0.05);\n}\n\n.window-close-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 16px;\n}\n\n\n\n.dialog-content[_ngcontent-%COMP%] {\n    padding: 24px;\n    flex: 1;\n    overflow-y: auto;\n}\n\n\n\n.form-field[_ngcontent-%COMP%] {\n    margin-bottom: 20px;\n}\n\n.form-field[_ngcontent-%COMP%]:last-of-type {\n    margin-bottom: 0;\n}\n\n.form-field[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n    display: block;\n    font-size: 13px;\n    font-weight: 600;\n    color: #374151;\n    margin-bottom: 8px;\n    letter-spacing: 0.01em;\n}\n\n.form-input[_ngcontent-%COMP%] {\n    width: 100%;\n}\n\n.form-textarea[_ngcontent-%COMP%] {\n    width: 100%;\n    resize: vertical;\n    min-height: 80px;\n}\n\n[_nghost-%COMP%]     .form-input .k-input, \n[_nghost-%COMP%]     .form-textarea .k-input-inner, \n[_nghost-%COMP%]     .form-field .k-dropdownlist {\n    padding: 10px 14px;\n    border-radius: 8px;\n    font-size: 14px;\n    border-color: #e5e7eb;\n    transition: all 0.2s ease;\n}\n\n[_nghost-%COMP%]     .form-input:focus-within, \n[_nghost-%COMP%]     .form-textarea:focus-within, \n[_nghost-%COMP%]     .form-field .k-dropdownlist.k-focus {\n    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);\n}\n\n.field-hint[_ngcontent-%COMP%] {\n    display: block;\n    font-size: 12px;\n    color: #6b7280;\n    margin-top: 6px;\n    line-height: 1.4;\n}\n\n.form-row[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 16px;\n}\n\n.form-field.half[_ngcontent-%COMP%] {\n    flex: 1;\n}\n\n.checkbox-label[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: flex-start;\n    gap: 12px;\n    cursor: pointer;\n    padding: 12px 16px;\n    background: #f9fafb;\n    border-radius: 10px;\n    border: 1px solid #e5e7eb;\n    transition: all 0.2s ease;\n}\n\n.checkbox-label[_ngcontent-%COMP%]:hover {\n    background: #f3f4f6;\n    border-color: #d1d5db;\n}\n\n.checkbox-label[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {\n    margin-top: 2px;\n    flex-shrink: 0;\n}\n\n.checkbox-label[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]:first-of-type {\n    font-weight: 600;\n    color: #374151;\n    font-size: 14px;\n}\n\n.checkbox-hint[_ngcontent-%COMP%] {\n    display: block;\n    font-size: 12px;\n    color: #6b7280;\n    margin-top: 4px;\n    line-height: 1.4;\n}\n\n\n\n.dialog-actions[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 12px;\n    padding: 20px 24px;\n    background: #f9fafb;\n    border-top: 1px solid #e5e7eb;\n    margin: 0 -24px -24px -24px;\n}\n\n[_nghost-%COMP%]     .dialog-actions .k-button {\n    min-width: 100px;\n    padding: 10px 20px;\n    font-weight: 600;\n    border-radius: 8px;\n    transition: all 0.2s ease;\n}\n\n[_nghost-%COMP%]     .dialog-actions .k-button-solid-primary {\n    background: linear-gradient(135deg, #10b981 0%, #059669 100%);\n    border: none;\n    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);\n}\n\n[_nghost-%COMP%]     .dialog-actions .k-button-solid-primary:hover {\n    transform: translateY(-1px);\n    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(APIScopesPanelComponent, [{
         type: Component,
-        args: [{ selector: 'mj-api-scopes-panel', template: "<div class=\"scopes-panel\">\n    <mj-loading *ngIf=\"IsLoading\" text=\"Loading scopes...\"></mj-loading>\n\n    <ng-container *ngIf=\"!IsLoading\">\n        <!-- Header -->\n        <div class=\"panel-header\">\n            <div class=\"header-left\">\n                <h3 class=\"panel-title\">\n                    <i class=\"fa-solid fa-shield-halved\"></i>\n                    API Scopes\n                </h3>\n                <p class=\"panel-subtitle\">Manage hierarchical permission scopes for API access</p>\n            </div>\n            <div class=\"header-actions\">\n                <div class=\"scope-stats\">\n                    <span class=\"stat\">\n                        <i class=\"fa-solid fa-shield\"></i>\n                        {{getTotalCount()}} total\n                    </span>\n                    <span class=\"stat active\">\n                        <i class=\"fa-solid fa-check-circle\"></i>\n                        {{getActiveCount()}} active\n                    </span>\n                </div>\n                <div class=\"tree-controls\">\n                    <button class=\"btn-icon\" (click)=\"expandAll()\" title=\"Expand All\">\n                        <i class=\"fa-solid fa-plus-square\"></i>\n                    </button>\n                    <button class=\"btn-icon\" (click)=\"collapseAll()\" title=\"Collapse All\">\n                        <i class=\"fa-solid fa-minus-square\"></i>\n                    </button>\n                </div>\n                <button class=\"btn-create\" (click)=\"openCreateDialog()\">\n                    <i class=\"fa-solid fa-plus\"></i>\n                    New Scope\n                </button>\n            </div>\n        </div>\n\n        <!-- Messages -->\n        <div class=\"message success\" *ngIf=\"SuccessMessage\">\n            <i class=\"fa-solid fa-check-circle\"></i>\n            {{SuccessMessage}}\n        </div>\n        <div class=\"message error\" *ngIf=\"ErrorMessage\">\n            <i class=\"fa-solid fa-circle-exclamation\"></i>\n            {{ErrorMessage}}\n        </div>\n\n        <!-- Scope Tree -->\n        <div class=\"scope-tree\">\n            <ng-container *ngFor=\"let node of ScopeTree\">\n                <ng-container *ngTemplateOutlet=\"scopeNode; context: { node: node }\"></ng-container>\n            </ng-container>\n\n            <!-- Empty State -->\n            <div class=\"empty-state\" *ngIf=\"ScopeTree.length === 0\">\n                <i class=\"fa-solid fa-shield-halved\"></i>\n                <span>No scopes configured</span>\n                <p>Create scopes to define API access permissions</p>\n            </div>\n        </div>\n\n        <!-- Recursive Node Template -->\n        <ng-template #scopeNode let-node=\"node\">\n            <div class=\"scope-node\" [style.padding-left.px]=\"node.level * 24\">\n                <div class=\"node-content\" [class.inactive]=\"!node.scope.IsActive\">\n                    <button class=\"expand-btn\"\n                            *ngIf=\"node.children.length > 0\"\n                            (click)=\"toggleExpanded(node)\">\n                        <i class=\"fa-solid\"\n                           [class.fa-chevron-right]=\"!node.expanded\"\n                           [class.fa-chevron-down]=\"node.expanded\"></i>\n                    </button>\n                    <span class=\"expand-placeholder\" *ngIf=\"node.children.length === 0\"></span>\n\n                    <div class=\"scope-info\" (click)=\"openEditDialog(node.scope)\">\n                        <div class=\"scope-icon\" [style.backgroundColor]=\"getCategoryColor(node.scope.Category)\">\n                            <i class=\"fa-solid fa-shield\"></i>\n                        </div>\n                        <div class=\"scope-details\">\n                            <div class=\"scope-name\">\n                                {{node.scope.Name}}\n                                <span class=\"full-path\" *ngIf=\"node.scope.FullPath && node.scope.FullPath !== node.scope.Name\">\n                                    {{node.scope.FullPath}}\n                                </span>\n                                <span class=\"status-badge\" *ngIf=\"!node.scope.IsActive\">Inactive</span>\n                            </div>\n                            <div class=\"scope-meta\">\n                                <span class=\"category\" [style.color]=\"getCategoryColor(node.scope.Category)\">\n                                    {{node.scope.Category}}\n                                </span>\n                                <span class=\"resource-type\" *ngIf=\"node.scope.ResourceType\">\n                                    {{node.scope.ResourceType}}\n                                </span>\n                                <span class=\"description\" *ngIf=\"node.scope.Description\">\n                                    {{node.scope.Description}}\n                                </span>\n                            </div>\n                        </div>\n                    </div>\n\n                    <div class=\"node-actions\">\n                        <button class=\"btn-node-action\" (click)=\"openCreateDialog(node.scope)\" title=\"Add Child Scope\">\n                            <i class=\"fa-solid fa-plus\"></i>\n                        </button>\n                        <button class=\"btn-node-action\" (click)=\"openEditDialog(node.scope)\" title=\"Edit Scope\">\n                            <i class=\"fa-solid fa-pencil\"></i>\n                        </button>\n                    </div>\n                </div>\n\n                <div class=\"children\" *ngIf=\"node.expanded && node.children.length > 0\">\n                    <ng-container *ngFor=\"let child of node.children\">\n                        <ng-container *ngTemplateOutlet=\"scopeNode; context: { node: child }\"></ng-container>\n                    </ng-container>\n                </div>\n            </div>\n        </ng-template>\n    </ng-container>\n\n    <!-- Create/Edit Dialog -->\n    <kendo-window *ngIf=\"ShowCreateDialog || ShowEditDialog\"\n                  [width]=\"560\"\n                  [minWidth]=\"420\"\n                  [minHeight]=\"480\"\n                  [resizable]=\"true\"\n                  [draggable]=\"true\"\n                  [top]=\"80\"\n                  (close)=\"closeDialogs()\">\n        <kendo-window-titlebar>\n            <div class=\"dialog-title\">\n                <i class=\"fa-solid fa-shield-halved\"></i>\n                <span>{{EditingScope ? 'Edit Scope' : 'New Scope'}}</span>\n            </div>\n            <button kendoButton fillMode=\"flat\" (click)=\"closeDialogs()\" class=\"window-close-btn\" title=\"Close (Esc)\">\n                <i class=\"fa-solid fa-times\"></i>\n            </button>\n        </kendo-window-titlebar>\n\n        <div class=\"dialog-content\">\n            <div class=\"form-field\">\n                <label>Scope Name *</label>\n                <input kendoTextBox [(ngModel)]=\"EditName\"\n                       placeholder=\"e.g., runview, create, execute\"\n                       class=\"form-input\" />\n                <span class=\"field-hint\">Use lowercase, single word. Will be combined with parent for full path.</span>\n            </div>\n\n            <div class=\"form-field\">\n                <label>Parent Scope</label>\n                <kendo-dropdownlist [(ngModel)]=\"EditParentId\"\n                                    [data]=\"getParentOptions()\"\n                                    [textField]=\"'FullPath'\"\n                                    [valueField]=\"'ID'\"\n                                    [valuePrimitive]=\"true\"\n                                    [defaultItem]=\"{ FullPath: '(No Parent - Root Level)', ID: null }\">\n                </kendo-dropdownlist>\n                <span class=\"field-hint\" *ngIf=\"SelectedParentScope\">\n                    Full path will be: <code>{{SelectedParentScope.FullPath}}:{{EditName || '...'}}</code>\n                </span>\n            </div>\n\n            <div class=\"form-row\">\n                <div class=\"form-field half\">\n                    <label>Category</label>\n                    <kendo-dropdownlist [(ngModel)]=\"EditCategory\"\n                                        [data]=\"Categories\"\n                                        [valuePrimitive]=\"true\">\n                    </kendo-dropdownlist>\n                </div>\n                <div class=\"form-field half\">\n                    <label>Resource Type</label>\n                    <kendo-dropdownlist [(ngModel)]=\"EditResourceType\"\n                                        [data]=\"ResourceTypes\"\n                                        [valuePrimitive]=\"true\"\n                                        [defaultItem]=\"''\">\n                    </kendo-dropdownlist>\n                </div>\n            </div>\n\n            <div class=\"form-field\">\n                <label>Description</label>\n                <textarea kendoTextArea [(ngModel)]=\"EditDescription\"\n                          placeholder=\"Describe what this scope allows...\"\n                          [rows]=\"3\"\n                          class=\"form-textarea\"></textarea>\n            </div>\n\n            <div class=\"form-field\">\n                <label class=\"checkbox-label\">\n                    <input type=\"checkbox\" kendoCheckBox [(ngModel)]=\"EditIsActive\" />\n                    <div>\n                        <span>Active</span>\n                        <span class=\"checkbox-hint\">Inactive scopes cannot be assigned to keys or applications</span>\n                    </div>\n                </label>\n            </div>\n\n            <div class=\"dialog-actions\">\n                <button kendoButton [themeColor]=\"'primary'\"\n                        [disabled]=\"!EditName.trim() || IsSaving\"\n                        (click)=\"saveScope()\">\n                    <mj-loading *ngIf=\"IsSaving\" [showText]=\"false\" size=\"small\"></mj-loading>\n                    <span *ngIf=\"!IsSaving\">\n                        <i class=\"fa-solid fa-save\"></i>\n                        {{EditingScope ? 'Update' : 'Create'}}\n                    </span>\n                </button>\n                <button kendoButton (click)=\"closeDialogs()\">Cancel</button>\n            </div>\n        </div>\n    </kendo-window>\n</div>\n", styles: [".scopes-panel {\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n}\n\n/* Panel Header */\n.panel-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n    margin-bottom: 24px;\n    flex-wrap: wrap;\n    gap: 16px;\n}\n\n.header-left {\n    flex: 1;\n    min-width: 200px;\n}\n\n.panel-title {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    font-size: 18px;\n    font-weight: 600;\n    color: var(--text-primary, #1f2937);\n    margin: 0 0 4px 0;\n}\n\n.panel-title i {\n    color: #10b981;\n}\n\n.panel-subtitle {\n    font-size: 14px;\n    color: var(--text-secondary, #6b7280);\n    margin: 0;\n}\n\n.header-actions {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n}\n\n.scope-stats {\n    display: flex;\n    gap: 16px;\n}\n\n.stat {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 13px;\n    color: var(--text-secondary, #6b7280);\n}\n\n.stat.active {\n    color: #10b981;\n}\n\n.stat i {\n    font-size: 14px;\n}\n\n.tree-controls {\n    display: flex;\n    gap: 4px;\n}\n\n.btn-icon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 32px;\n    height: 32px;\n    background: var(--card-background, #ffffff);\n    border: 1px solid var(--border-color, #e5e7eb);\n    border-radius: 6px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.btn-icon:hover {\n    background: var(--item-hover, #f3f4f6);\n}\n\n.btn-icon i {\n    font-size: 14px;\n    color: var(--text-secondary, #6b7280);\n}\n\n.btn-create {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 10px 20px;\n    background: linear-gradient(135deg, #10b981 0%, #059669 100%);\n    color: white;\n    border: none;\n    border-radius: 8px;\n    font-weight: 600;\n    font-size: 14px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.btn-create:hover {\n    transform: translateY(-1px);\n    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);\n}\n\n/* Messages */\n.message {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    padding: 12px 16px;\n    border-radius: 8px;\n    margin-bottom: 16px;\n    font-size: 14px;\n}\n\n.message.success {\n    background: #d1fae5;\n    color: #065f46;\n    border: 1px solid #a7f3d0;\n}\n\n.message.error {\n    background: #fee2e2;\n    color: #991b1b;\n    border: 1px solid #fca5a5;\n}\n\n/* Scope Tree */\n.scope-tree {\n    flex: 1;\n    overflow-y: auto;\n    background: var(--card-background, #ffffff);\n    border-radius: 12px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n}\n\n.scope-node {\n    border-bottom: 1px solid var(--border-color, #e5e7eb);\n}\n\n.scope-node:last-child {\n    border-bottom: none;\n}\n\n.node-content {\n    display: flex;\n    align-items: center;\n    padding: 12px 16px;\n    transition: background 0.2s ease;\n}\n\n.node-content:hover {\n    background: var(--item-hover, #f9fafb);\n}\n\n.node-content.inactive {\n    opacity: 0.6;\n}\n\n.expand-btn {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 24px;\n    height: 24px;\n    background: none;\n    border: none;\n    cursor: pointer;\n    color: var(--text-tertiary, #9ca3af);\n    transition: transform 0.2s ease;\n    flex-shrink: 0;\n}\n\n.expand-btn:hover {\n    color: var(--text-secondary, #6b7280);\n}\n\n.expand-placeholder {\n    width: 24px;\n    flex-shrink: 0;\n}\n\n.scope-info {\n    display: flex;\n    align-items: center;\n    flex: 1;\n    min-width: 0;\n    cursor: pointer;\n}\n\n.scope-icon {\n    width: 32px;\n    height: 32px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 8px;\n    margin-right: 12px;\n    flex-shrink: 0;\n}\n\n.scope-icon i {\n    font-size: 14px;\n    color: white;\n}\n\n.scope-details {\n    flex: 1;\n    min-width: 0;\n}\n\n.scope-name {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-size: 14px;\n    font-weight: 500;\n    color: var(--text-primary, #1f2937);\n    flex-wrap: wrap;\n}\n\n.full-path {\n    font-family: monospace;\n    font-size: 12px;\n    color: var(--text-tertiary, #9ca3af);\n    background: var(--tag-background, #f3f4f6);\n    padding: 2px 6px;\n    border-radius: 4px;\n}\n\n.status-badge {\n    font-size: 10px;\n    font-weight: 500;\n    padding: 2px 6px;\n    border-radius: 4px;\n    background: #f3f4f6;\n    color: #6b7280;\n}\n\n.scope-meta {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    margin-top: 4px;\n    font-size: 12px;\n    flex-wrap: wrap;\n}\n\n.category {\n    font-weight: 500;\n}\n\n.resource-type {\n    color: var(--text-secondary, #6b7280);\n    background: var(--tag-background, #f3f4f6);\n    padding: 2px 6px;\n    border-radius: 4px;\n}\n\n.description {\n    color: var(--text-tertiary, #9ca3af);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    max-width: 300px;\n}\n\n.node-actions {\n    display: flex;\n    gap: 4px;\n    margin-left: 12px;\n    opacity: 0;\n    transition: opacity 0.2s ease;\n}\n\n.node-content:hover .node-actions {\n    opacity: 1;\n}\n\n.btn-node-action {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 28px;\n    height: 28px;\n    background: var(--card-background, #ffffff);\n    border: 1px solid var(--border-color, #e5e7eb);\n    border-radius: 6px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.btn-node-action:hover {\n    background: #10b981;\n    border-color: #10b981;\n    color: white;\n}\n\n.btn-node-action i {\n    font-size: 12px;\n}\n\n.children {\n    margin-left: 0;\n}\n\n/* Empty State */\n.empty-state {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 48px;\n    color: var(--text-secondary, #6b7280);\n    text-align: center;\n}\n\n.empty-state i {\n    font-size: 48px;\n    margin-bottom: 16px;\n    opacity: 0.5;\n}\n\n.empty-state span {\n    font-size: 16px;\n    font-weight: 500;\n}\n\n.empty-state p {\n    font-size: 14px;\n    margin-top: 8px;\n}\n\n/* ========================================\n   Dialog Styles - Polished & Professional\n   ======================================== */\n\n/* Window styling */\n:host ::ng-deep kendo-window {\n    border-radius: 16px !important;\n    overflow: hidden;\n    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15),\n                0 10px 30px rgba(0, 0, 0, 0.1),\n                0 0 0 1px rgba(0, 0, 0, 0.05) !important;\n}\n\n:host ::ng-deep kendo-window .k-window-content {\n    padding: 0 !important;\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\n}\n\n:host ::ng-deep kendo-window-titlebar {\n    display: flex !important;\n    align-items: center;\n    justify-content: space-between;\n    padding: 18px 24px !important;\n    background: linear-gradient(135deg, #fafafa 0%, #f3f4f6 100%) !important;\n    border-bottom: 1px solid #e5e7eb !important;\n}\n\n.dialog-title {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    font-weight: 600;\n    font-size: 17px;\n    color: #1f2937;\n}\n\n.dialog-title i {\n    color: #10b981;\n    font-size: 18px;\n}\n\n.window-close-btn {\n    margin-left: auto;\n    color: #9ca3af;\n    transition: all 0.2s ease;\n    width: 32px;\n    height: 32px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 8px;\n}\n\n.window-close-btn:hover {\n    color: #374151;\n    background: rgba(0, 0, 0, 0.05);\n}\n\n.window-close-btn i {\n    font-size: 16px;\n}\n\n/* Dialog Content */\n.dialog-content {\n    padding: 24px;\n    flex: 1;\n    overflow-y: auto;\n}\n\n/* Form Fields */\n.form-field {\n    margin-bottom: 20px;\n}\n\n.form-field:last-of-type {\n    margin-bottom: 0;\n}\n\n.form-field label {\n    display: block;\n    font-size: 13px;\n    font-weight: 600;\n    color: #374151;\n    margin-bottom: 8px;\n    letter-spacing: 0.01em;\n}\n\n.form-input {\n    width: 100%;\n}\n\n.form-textarea {\n    width: 100%;\n    resize: vertical;\n    min-height: 80px;\n}\n\n:host ::ng-deep .form-input .k-input,\n:host ::ng-deep .form-textarea .k-input-inner,\n:host ::ng-deep .form-field .k-dropdownlist {\n    padding: 10px 14px;\n    border-radius: 8px;\n    font-size: 14px;\n    border-color: #e5e7eb;\n    transition: all 0.2s ease;\n}\n\n:host ::ng-deep .form-input:focus-within,\n:host ::ng-deep .form-textarea:focus-within,\n:host ::ng-deep .form-field .k-dropdownlist.k-focus {\n    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);\n}\n\n.field-hint {\n    display: block;\n    font-size: 12px;\n    color: #6b7280;\n    margin-top: 6px;\n    line-height: 1.4;\n}\n\n.form-row {\n    display: flex;\n    gap: 16px;\n}\n\n.form-field.half {\n    flex: 1;\n}\n\n.checkbox-label {\n    display: flex;\n    align-items: flex-start;\n    gap: 12px;\n    cursor: pointer;\n    padding: 12px 16px;\n    background: #f9fafb;\n    border-radius: 10px;\n    border: 1px solid #e5e7eb;\n    transition: all 0.2s ease;\n}\n\n.checkbox-label:hover {\n    background: #f3f4f6;\n    border-color: #d1d5db;\n}\n\n.checkbox-label input {\n    margin-top: 2px;\n    flex-shrink: 0;\n}\n\n.checkbox-label span:first-of-type {\n    font-weight: 600;\n    color: #374151;\n    font-size: 14px;\n}\n\n.checkbox-hint {\n    display: block;\n    font-size: 12px;\n    color: #6b7280;\n    margin-top: 4px;\n    line-height: 1.4;\n}\n\n/* Dialog Actions */\n.dialog-actions {\n    display: flex;\n    gap: 12px;\n    padding: 20px 24px;\n    background: #f9fafb;\n    border-top: 1px solid #e5e7eb;\n    margin: 0 -24px -24px -24px;\n}\n\n:host ::ng-deep .dialog-actions .k-button {\n    min-width: 100px;\n    padding: 10px 20px;\n    font-weight: 600;\n    border-radius: 8px;\n    transition: all 0.2s ease;\n}\n\n:host ::ng-deep .dialog-actions .k-button-solid-primary {\n    background: linear-gradient(135deg, #10b981 0%, #059669 100%);\n    border: none;\n    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);\n}\n\n:host ::ng-deep .dialog-actions .k-button-solid-primary:hover {\n    transform: translateY(-1px);\n    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);\n}\n"] }]
+        args: [{ standalone: false, selector: 'mj-api-scopes-panel', template: "<div class=\"scopes-panel\">\n  @if (IsLoading) {\n    <mj-loading text=\"Loading scopes...\"></mj-loading>\n  }\n\n  @if (!IsLoading) {\n    <!-- Header -->\n    <div class=\"panel-header\">\n      <div class=\"header-left\">\n        <h3 class=\"panel-title\">\n          <i class=\"fa-solid fa-shield-halved\"></i>\n          API Scopes\n        </h3>\n        <p class=\"panel-subtitle\">Manage hierarchical permission scopes for API access</p>\n      </div>\n      <div class=\"header-actions\">\n        <div class=\"scope-stats\">\n          <span class=\"stat\">\n            <i class=\"fa-solid fa-shield\"></i>\n            {{getTotalCount()}} total\n          </span>\n          <span class=\"stat active\">\n            <i class=\"fa-solid fa-check-circle\"></i>\n            {{getActiveCount()}} active\n          </span>\n        </div>\n        <div class=\"tree-controls\">\n          <button class=\"btn-icon\" (click)=\"expandAll()\" title=\"Expand All\">\n            <i class=\"fa-solid fa-plus-square\"></i>\n          </button>\n          <button class=\"btn-icon\" (click)=\"collapseAll()\" title=\"Collapse All\">\n            <i class=\"fa-solid fa-minus-square\"></i>\n          </button>\n        </div>\n        <button class=\"btn-create\" (click)=\"openCreateDialog()\">\n          <i class=\"fa-solid fa-plus\"></i>\n          New Scope\n        </button>\n      </div>\n    </div>\n    <!-- Messages -->\n    @if (SuccessMessage) {\n      <div class=\"message success\">\n        <i class=\"fa-solid fa-check-circle\"></i>\n        {{SuccessMessage}}\n      </div>\n    }\n    @if (ErrorMessage) {\n      <div class=\"message error\">\n        <i class=\"fa-solid fa-circle-exclamation\"></i>\n        {{ErrorMessage}}\n      </div>\n    }\n    <!-- Scope Tree -->\n    <div class=\"scope-tree\">\n      @for (node of ScopeTree; track node) {\n        <ng-container *ngTemplateOutlet=\"scopeNode; context: { node: node }\"></ng-container>\n      }\n      <!-- Empty State -->\n      @if (ScopeTree.length === 0) {\n        <div class=\"empty-state\">\n          <i class=\"fa-solid fa-shield-halved\"></i>\n          <span>No scopes configured</span>\n          <p>Create scopes to define API access permissions</p>\n        </div>\n      }\n    </div>\n    <!-- Recursive Node Template -->\n    <ng-template #scopeNode let-node=\"node\">\n      <div class=\"scope-node\" [style.padding-left.px]=\"node.level * 24\">\n        <div class=\"node-content\" [class.inactive]=\"!node.scope.IsActive\">\n          @if (node.children.length > 0) {\n            <button class=\"expand-btn\"\n              (click)=\"toggleExpanded(node)\">\n              <i class=\"fa-solid\"\n                [class.fa-chevron-right]=\"!node.expanded\"\n              [class.fa-chevron-down]=\"node.expanded\"></i>\n            </button>\n          }\n          @if (node.children.length === 0) {\n            <span class=\"expand-placeholder\"></span>\n          }\n          <div class=\"scope-info\" (click)=\"openEditDialog(node.scope)\">\n            <div class=\"scope-icon\" [style.backgroundColor]=\"getCategoryColor(node.scope.Category)\">\n              <i class=\"fa-solid fa-shield\"></i>\n            </div>\n            <div class=\"scope-details\">\n              <div class=\"scope-name\">\n                {{node.scope.Name}}\n                @if (node.scope.FullPath && node.scope.FullPath !== node.scope.Name) {\n                  <span class=\"full-path\">\n                    {{node.scope.FullPath}}\n                  </span>\n                }\n                @if (!node.scope.IsActive) {\n                  <span class=\"status-badge\">Inactive</span>\n                }\n              </div>\n              <div class=\"scope-meta\">\n                <span class=\"category\" [style.color]=\"getCategoryColor(node.scope.Category)\">\n                  {{node.scope.Category}}\n                </span>\n                @if (node.scope.ResourceType) {\n                  <span class=\"resource-type\">\n                    {{node.scope.ResourceType}}\n                  </span>\n                }\n                @if (node.scope.Description) {\n                  <span class=\"description\">\n                    {{node.scope.Description}}\n                  </span>\n                }\n              </div>\n            </div>\n          </div>\n          <div class=\"node-actions\">\n            <button class=\"btn-node-action\" (click)=\"openCreateDialog(node.scope)\" title=\"Add Child Scope\">\n              <i class=\"fa-solid fa-plus\"></i>\n            </button>\n            <button class=\"btn-node-action\" (click)=\"openEditDialog(node.scope)\" title=\"Edit Scope\">\n              <i class=\"fa-solid fa-pencil\"></i>\n            </button>\n          </div>\n        </div>\n        @if (node.expanded && node.children.length > 0) {\n          <div class=\"children\">\n            @for (child of node.children; track child) {\n              <ng-container *ngTemplateOutlet=\"scopeNode; context: { node: child }\"></ng-container>\n            }\n          </div>\n        }\n      </div>\n    </ng-template>\n  }\n\n  <!-- Create/Edit Dialog -->\n  @if (ShowCreateDialog || ShowEditDialog) {\n    <kendo-window\n      [width]=\"560\"\n      [minWidth]=\"420\"\n      [minHeight]=\"480\"\n      [resizable]=\"true\"\n      [draggable]=\"true\"\n      [top]=\"80\"\n      (close)=\"closeDialogs()\">\n      <kendo-window-titlebar>\n        <div class=\"dialog-title\">\n          <i class=\"fa-solid fa-shield-halved\"></i>\n          <span>{{EditingScope ? 'Edit Scope' : 'New Scope'}}</span>\n        </div>\n        <button kendoButton fillMode=\"flat\" (click)=\"closeDialogs()\" class=\"window-close-btn\" title=\"Close (Esc)\">\n          <i class=\"fa-solid fa-times\"></i>\n        </button>\n      </kendo-window-titlebar>\n      <div class=\"dialog-content\">\n        <div class=\"form-field\">\n          <label>Scope Name *</label>\n          <input kendoTextBox [(ngModel)]=\"EditName\"\n            placeholder=\"e.g., runview, create, execute\"\n            class=\"form-input\" />\n          <span class=\"field-hint\">Use lowercase, single word. Will be combined with parent for full path.</span>\n        </div>\n        <div class=\"form-field\">\n          <label>Parent Scope</label>\n          <kendo-dropdownlist [(ngModel)]=\"EditParentId\"\n            [data]=\"getParentOptions()\"\n            [textField]=\"'FullPath'\"\n            [valueField]=\"'ID'\"\n            [valuePrimitive]=\"true\"\n            [defaultItem]=\"{ FullPath: '(No Parent - Root Level)', ID: null }\">\n          </kendo-dropdownlist>\n          @if (SelectedParentScope) {\n            <span class=\"field-hint\">\n              Full path will be: <code>{{SelectedParentScope.FullPath}}:{{EditName || '...'}}</code>\n            </span>\n          }\n        </div>\n        <div class=\"form-row\">\n          <div class=\"form-field half\">\n            <label>Category</label>\n            <kendo-dropdownlist [(ngModel)]=\"EditCategory\"\n              [data]=\"Categories\"\n              [valuePrimitive]=\"true\">\n            </kendo-dropdownlist>\n          </div>\n          <div class=\"form-field half\">\n            <label>Resource Type</label>\n            <kendo-dropdownlist [(ngModel)]=\"EditResourceType\"\n              [data]=\"ResourceTypes\"\n              [valuePrimitive]=\"true\"\n              [defaultItem]=\"''\">\n            </kendo-dropdownlist>\n          </div>\n        </div>\n        <div class=\"form-field\">\n          <label>Description</label>\n          <textarea kendoTextArea [(ngModel)]=\"EditDescription\"\n            placeholder=\"Describe what this scope allows...\"\n            [rows]=\"3\"\n          class=\"form-textarea\"></textarea>\n        </div>\n        <div class=\"form-field\">\n          <label class=\"checkbox-label\">\n            <input type=\"checkbox\" kendoCheckBox [(ngModel)]=\"EditIsActive\" />\n            <div>\n              <span>Active</span>\n              <span class=\"checkbox-hint\">Inactive scopes cannot be assigned to keys or applications</span>\n            </div>\n          </label>\n        </div>\n        <div class=\"dialog-actions\">\n          <button kendoButton [themeColor]=\"'primary'\"\n            [disabled]=\"!EditName.trim() || IsSaving\"\n            (click)=\"saveScope()\">\n            @if (IsSaving) {\n              <mj-loading [showText]=\"false\" size=\"small\"></mj-loading>\n            }\n            @if (!IsSaving) {\n              <span>\n                <i class=\"fa-solid fa-save\"></i>\n                {{EditingScope ? 'Update' : 'Create'}}\n              </span>\n            }\n          </button>\n          <button kendoButton (click)=\"closeDialogs()\">Cancel</button>\n        </div>\n      </div>\n    </kendo-window>\n  }\n</div>\n", styles: [".scopes-panel {\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n}\n\n/* Panel Header */\n.panel-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n    margin-bottom: 24px;\n    flex-wrap: wrap;\n    gap: 16px;\n}\n\n.header-left {\n    flex: 1;\n    min-width: 200px;\n}\n\n.panel-title {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    font-size: 18px;\n    font-weight: 600;\n    color: var(--text-primary, #1f2937);\n    margin: 0 0 4px 0;\n}\n\n.panel-title i {\n    color: #10b981;\n}\n\n.panel-subtitle {\n    font-size: 14px;\n    color: var(--text-secondary, #6b7280);\n    margin: 0;\n}\n\n.header-actions {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n}\n\n.scope-stats {\n    display: flex;\n    gap: 16px;\n}\n\n.stat {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 13px;\n    color: var(--text-secondary, #6b7280);\n}\n\n.stat.active {\n    color: #10b981;\n}\n\n.stat i {\n    font-size: 14px;\n}\n\n.tree-controls {\n    display: flex;\n    gap: 4px;\n}\n\n.btn-icon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 32px;\n    height: 32px;\n    background: var(--card-background, #ffffff);\n    border: 1px solid var(--border-color, #e5e7eb);\n    border-radius: 6px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.btn-icon:hover {\n    background: var(--item-hover, #f3f4f6);\n}\n\n.btn-icon i {\n    font-size: 14px;\n    color: var(--text-secondary, #6b7280);\n}\n\n.btn-create {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 10px 20px;\n    background: linear-gradient(135deg, #10b981 0%, #059669 100%);\n    color: white;\n    border: none;\n    border-radius: 8px;\n    font-weight: 600;\n    font-size: 14px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.btn-create:hover {\n    transform: translateY(-1px);\n    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);\n}\n\n/* Messages */\n.message {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    padding: 12px 16px;\n    border-radius: 8px;\n    margin-bottom: 16px;\n    font-size: 14px;\n}\n\n.message.success {\n    background: #d1fae5;\n    color: #065f46;\n    border: 1px solid #a7f3d0;\n}\n\n.message.error {\n    background: #fee2e2;\n    color: #991b1b;\n    border: 1px solid #fca5a5;\n}\n\n/* Scope Tree */\n.scope-tree {\n    flex: 1;\n    overflow-y: auto;\n    background: var(--card-background, #ffffff);\n    border-radius: 12px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n}\n\n.scope-node {\n    border-bottom: 1px solid var(--border-color, #e5e7eb);\n}\n\n.scope-node:last-child {\n    border-bottom: none;\n}\n\n.node-content {\n    display: flex;\n    align-items: center;\n    padding: 12px 16px;\n    transition: background 0.2s ease;\n}\n\n.node-content:hover {\n    background: var(--item-hover, #f9fafb);\n}\n\n.node-content.inactive {\n    opacity: 0.6;\n}\n\n.expand-btn {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 24px;\n    height: 24px;\n    background: none;\n    border: none;\n    cursor: pointer;\n    color: var(--text-tertiary, #9ca3af);\n    transition: transform 0.2s ease;\n    flex-shrink: 0;\n}\n\n.expand-btn:hover {\n    color: var(--text-secondary, #6b7280);\n}\n\n.expand-placeholder {\n    width: 24px;\n    flex-shrink: 0;\n}\n\n.scope-info {\n    display: flex;\n    align-items: center;\n    flex: 1;\n    min-width: 0;\n    cursor: pointer;\n}\n\n.scope-icon {\n    width: 32px;\n    height: 32px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 8px;\n    margin-right: 12px;\n    flex-shrink: 0;\n}\n\n.scope-icon i {\n    font-size: 14px;\n    color: white;\n}\n\n.scope-details {\n    flex: 1;\n    min-width: 0;\n}\n\n.scope-name {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-size: 14px;\n    font-weight: 500;\n    color: var(--text-primary, #1f2937);\n    flex-wrap: wrap;\n}\n\n.full-path {\n    font-family: monospace;\n    font-size: 12px;\n    color: var(--text-tertiary, #9ca3af);\n    background: var(--tag-background, #f3f4f6);\n    padding: 2px 6px;\n    border-radius: 4px;\n}\n\n.status-badge {\n    font-size: 10px;\n    font-weight: 500;\n    padding: 2px 6px;\n    border-radius: 4px;\n    background: #f3f4f6;\n    color: #6b7280;\n}\n\n.scope-meta {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    margin-top: 4px;\n    font-size: 12px;\n    flex-wrap: wrap;\n}\n\n.category {\n    font-weight: 500;\n}\n\n.resource-type {\n    color: var(--text-secondary, #6b7280);\n    background: var(--tag-background, #f3f4f6);\n    padding: 2px 6px;\n    border-radius: 4px;\n}\n\n.description {\n    color: var(--text-tertiary, #9ca3af);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    max-width: 300px;\n}\n\n.node-actions {\n    display: flex;\n    gap: 4px;\n    margin-left: 12px;\n    opacity: 0;\n    transition: opacity 0.2s ease;\n}\n\n.node-content:hover .node-actions {\n    opacity: 1;\n}\n\n.btn-node-action {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 28px;\n    height: 28px;\n    background: var(--card-background, #ffffff);\n    border: 1px solid var(--border-color, #e5e7eb);\n    border-radius: 6px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.btn-node-action:hover {\n    background: #10b981;\n    border-color: #10b981;\n    color: white;\n}\n\n.btn-node-action i {\n    font-size: 12px;\n}\n\n.children {\n    margin-left: 0;\n}\n\n/* Empty State */\n.empty-state {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 48px;\n    color: var(--text-secondary, #6b7280);\n    text-align: center;\n}\n\n.empty-state i {\n    font-size: 48px;\n    margin-bottom: 16px;\n    opacity: 0.5;\n}\n\n.empty-state span {\n    font-size: 16px;\n    font-weight: 500;\n}\n\n.empty-state p {\n    font-size: 14px;\n    margin-top: 8px;\n}\n\n/* ========================================\n   Dialog Styles - Polished & Professional\n   ======================================== */\n\n/* Window styling */\n:host ::ng-deep kendo-window {\n    border-radius: 16px !important;\n    overflow: hidden;\n    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15),\n                0 10px 30px rgba(0, 0, 0, 0.1),\n                0 0 0 1px rgba(0, 0, 0, 0.05) !important;\n}\n\n:host ::ng-deep kendo-window .k-window-content {\n    padding: 0 !important;\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\n}\n\n:host ::ng-deep kendo-window-titlebar {\n    display: flex !important;\n    align-items: center;\n    justify-content: space-between;\n    padding: 18px 24px !important;\n    background: linear-gradient(135deg, #fafafa 0%, #f3f4f6 100%) !important;\n    border-bottom: 1px solid #e5e7eb !important;\n}\n\n.dialog-title {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    font-weight: 600;\n    font-size: 17px;\n    color: #1f2937;\n}\n\n.dialog-title i {\n    color: #10b981;\n    font-size: 18px;\n}\n\n.window-close-btn {\n    margin-left: auto;\n    color: #9ca3af;\n    transition: all 0.2s ease;\n    width: 32px;\n    height: 32px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 8px;\n}\n\n.window-close-btn:hover {\n    color: #374151;\n    background: rgba(0, 0, 0, 0.05);\n}\n\n.window-close-btn i {\n    font-size: 16px;\n}\n\n/* Dialog Content */\n.dialog-content {\n    padding: 24px;\n    flex: 1;\n    overflow-y: auto;\n}\n\n/* Form Fields */\n.form-field {\n    margin-bottom: 20px;\n}\n\n.form-field:last-of-type {\n    margin-bottom: 0;\n}\n\n.form-field label {\n    display: block;\n    font-size: 13px;\n    font-weight: 600;\n    color: #374151;\n    margin-bottom: 8px;\n    letter-spacing: 0.01em;\n}\n\n.form-input {\n    width: 100%;\n}\n\n.form-textarea {\n    width: 100%;\n    resize: vertical;\n    min-height: 80px;\n}\n\n:host ::ng-deep .form-input .k-input,\n:host ::ng-deep .form-textarea .k-input-inner,\n:host ::ng-deep .form-field .k-dropdownlist {\n    padding: 10px 14px;\n    border-radius: 8px;\n    font-size: 14px;\n    border-color: #e5e7eb;\n    transition: all 0.2s ease;\n}\n\n:host ::ng-deep .form-input:focus-within,\n:host ::ng-deep .form-textarea:focus-within,\n:host ::ng-deep .form-field .k-dropdownlist.k-focus {\n    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);\n}\n\n.field-hint {\n    display: block;\n    font-size: 12px;\n    color: #6b7280;\n    margin-top: 6px;\n    line-height: 1.4;\n}\n\n.form-row {\n    display: flex;\n    gap: 16px;\n}\n\n.form-field.half {\n    flex: 1;\n}\n\n.checkbox-label {\n    display: flex;\n    align-items: flex-start;\n    gap: 12px;\n    cursor: pointer;\n    padding: 12px 16px;\n    background: #f9fafb;\n    border-radius: 10px;\n    border: 1px solid #e5e7eb;\n    transition: all 0.2s ease;\n}\n\n.checkbox-label:hover {\n    background: #f3f4f6;\n    border-color: #d1d5db;\n}\n\n.checkbox-label input {\n    margin-top: 2px;\n    flex-shrink: 0;\n}\n\n.checkbox-label span:first-of-type {\n    font-weight: 600;\n    color: #374151;\n    font-size: 14px;\n}\n\n.checkbox-hint {\n    display: block;\n    font-size: 12px;\n    color: #6b7280;\n    margin-top: 4px;\n    line-height: 1.4;\n}\n\n/* Dialog Actions */\n.dialog-actions {\n    display: flex;\n    gap: 12px;\n    padding: 20px 24px;\n    background: #f9fafb;\n    border-top: 1px solid #e5e7eb;\n    margin: 0 -24px -24px -24px;\n}\n\n:host ::ng-deep .dialog-actions .k-button {\n    min-width: 100px;\n    padding: 10px 20px;\n    font-weight: 600;\n    border-radius: 8px;\n    transition: all 0.2s ease;\n}\n\n:host ::ng-deep .dialog-actions .k-button-solid-primary {\n    background: linear-gradient(135deg, #10b981 0%, #059669 100%);\n    border: none;\n    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);\n}\n\n:host ::ng-deep .dialog-actions .k-button-solid-primary:hover {\n    transform: translateY(-1px);\n    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);\n}\n"] }]
     }], () => [{ type: i0.ChangeDetectorRef }], { ScopeUpdated: [{
             type: Output
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(APIScopesPanelComponent, { className: "APIScopesPanelComponent", filePath: "src/APIKeys/api-scopes-panel.component.ts", lineNumber: 27 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(APIScopesPanelComponent, { className: "APIScopesPanelComponent", filePath: "src/APIKeys/api-scopes-panel.component.ts", lineNumber: 22 }); })();
 //# sourceMappingURL=api-scopes-panel.component.js.map