npm - @memberjunction/ng-dashboards - Versions diffs - 3.4.0 → 4.0.0 - Mend

@memberjunction/ng-dashboards 3.4.0 → 4.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (573) hide show

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

@@ -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