@memberjunction/ng-dashboards 5.22.0 → 5.23.0

package/dist/ComponentStudio/components/artifact-load-dialog.component.js

@@ -1,23 +1,22 @@
-import { Component } from '@angular/core';
+import { Component, Input, Output, EventEmitter } from '@angular/core';
 import { RunView, Metadata } from '@memberjunction/core';
 import { UUIDsEqual } from '@memberjunction/global';
 import { Subject, debounceTime, distinctUntilChanged } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import * as i0 from "@angular/core";
-import * as i1 from "@progress/kendo-angular-dialog";
-import * as i2 from "@angular/forms";
-import * as i3 from "@progress/kendo-angular-buttons";
-import * as i4 from "@memberjunction/ng-code-editor";
-import * as i5 from "@memberjunction/ng-shared-generic";
-import * as i6 from "@angular/common";
+import * as i1 from "@angular/forms";
+import * as i2 from "@memberjunction/ng-code-editor";
+import * as i3 from "@memberjunction/ng-shared-generic";
+import * as i4 from "@memberjunction/ng-ui-components";
+import * as i5 from "@angular/common";
 const _forTrack0 = ($index, $item) => $item.ID;
-function ArtifactLoadDialogComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+function ArtifactLoadDialogComponent_Conditional_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
     i0.ɵɵtext(1, "Filters");
     i0.ɵɵelementEnd();
 } }
-function ArtifactLoadDialogComponent_Conditional_11_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 8);
+function ArtifactLoadDialogComponent_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 6);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -25,39 +24,39 @@ function ArtifactLoadDialogComponent_Conditional_11_Template(rf, ctx) { if (rf &
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(ctx_r0.getActiveFilterCount());
 } }
-function ArtifactLoadDialogComponent_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+function ArtifactLoadDialogComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
     const _r2 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 9)(1, "div", 22)(2, "label");
+    i0.ɵɵelementStart(0, "div", 7)(1, "div", 20)(2, "label");
     i0.ɵɵtext(3, "Search");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "input", 23);
-    i0.ɵɵtwoWayListener("ngModelChange", function ArtifactLoadDialogComponent_Conditional_12_Template_input_ngModelChange_4_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r0.searchTerm, $event) || (ctx_r0.searchTerm = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵlistener("input", function ArtifactLoadDialogComponent_Conditional_12_Template_input_input_4_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onSearchInput()); });
+    i0.ɵɵelementStart(4, "input", 21);
+    i0.ɵɵtwoWayListener("ngModelChange", function ArtifactLoadDialogComponent_Conditional_8_Template_input_ngModelChange_4_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r0.searchTerm, $event) || (ctx_r0.searchTerm = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("input", function ArtifactLoadDialogComponent_Conditional_8_Template_input_input_4_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onSearchInput()); });
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(5, "div", 22)(6, "label");
+    i0.ɵɵelementStart(5, "div", 20)(6, "label");
     i0.ɵɵtext(7, "Artifact Type");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "select", 24);
-    i0.ɵɵtwoWayListener("ngModelChange", function ArtifactLoadDialogComponent_Conditional_12_Template_select_ngModelChange_8_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r0.selectedArtifactType, $event) || (ctx_r0.selectedArtifactType = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵlistener("change", function ArtifactLoadDialogComponent_Conditional_12_Template_select_change_8_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onArtifactTypeChange()); });
-    i0.ɵɵelementStart(9, "option", 25);
+    i0.ɵɵelementStart(8, "select", 22);
+    i0.ɵɵtwoWayListener("ngModelChange", function ArtifactLoadDialogComponent_Conditional_8_Template_select_ngModelChange_8_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r0.selectedArtifactType, $event) || (ctx_r0.selectedArtifactType = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("change", function ArtifactLoadDialogComponent_Conditional_8_Template_select_change_8_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onArtifactTypeChange()); });
+    i0.ɵɵelementStart(9, "option", 23);
     i0.ɵɵtext(10, "Component (default)");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(11, "option", 26);
+    i0.ɵɵelementStart(11, "option", 24);
     i0.ɵɵtext(12, "Component");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(13, "option", 27);
+    i0.ɵɵelementStart(13, "option", 25);
     i0.ɵɵtext(14, "Report");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(15, "option", 28);
+    i0.ɵɵelementStart(15, "option", 26);
     i0.ɵɵtext(16, "Dashboard");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(17, "div", 22)(18, "label");
+    i0.ɵɵelementStart(17, "div", 20)(18, "label");
     i0.ɵɵtext(19, "Filter by User");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(20, "input", 29);
-    i0.ɵɵtwoWayListener("ngModelChange", function ArtifactLoadDialogComponent_Conditional_12_Template_input_ngModelChange_20_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r0.userEmail, $event) || (ctx_r0.userEmail = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵlistener("input", function ArtifactLoadDialogComponent_Conditional_12_Template_input_input_20_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.filterArtifacts()); });
+    i0.ɵɵelementStart(20, "input", 27);
+    i0.ɵɵtwoWayListener("ngModelChange", function ArtifactLoadDialogComponent_Conditional_8_Template_input_ngModelChange_20_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r0.userEmail, $event) || (ctx_r0.userEmail = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("input", function ArtifactLoadDialogComponent_Conditional_8_Template_input_input_20_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.filterArtifacts()); });
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -68,20 +67,20 @@ function ArtifactLoadDialogComponent_Conditional_12_Template(rf, ctx) { if (rf &
     i0.ɵɵadvance(12);
     i0.ɵɵtwoWayProperty("ngModel", ctx_r0.userEmail);
 } }
-function ArtifactLoadDialogComponent_Conditional_22_Conditional_11_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 36);
-    i0.ɵɵelement(1, "mj-loading", 38);
+function ArtifactLoadDialogComponent_Conditional_18_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 34);
+    i0.ɵɵelement(1, "mj-loading", 36);
     i0.ɵɵelementEnd();
 } }
-function ArtifactLoadDialogComponent_Conditional_22_Conditional_12_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 37);
-    i0.ɵɵelement(1, "i", 39);
+function ArtifactLoadDialogComponent_Conditional_18_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 35);
+    i0.ɵɵelement(1, "i", 37);
     i0.ɵɵelementStart(2, "p");
     i0.ɵɵtext(3, "No artifacts found");
     i0.ɵɵelementEnd()();
 } }
-function ArtifactLoadDialogComponent_Conditional_22_Conditional_13_For_1_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 45);
+function ArtifactLoadDialogComponent_Conditional_18_Conditional_13_For_1_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 43);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -89,18 +88,18 @@ function ArtifactLoadDialogComponent_Conditional_22_Conditional_13_For_1_Conditi
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", artifact_r5.Description, " ");
 } }
-function ArtifactLoadDialogComponent_Conditional_22_Conditional_13_For_1_Template(rf, ctx) { if (rf & 1) {
+function ArtifactLoadDialogComponent_Conditional_18_Conditional_13_For_1_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 41);
-    i0.ɵɵlistener("click", function ArtifactLoadDialogComponent_Conditional_22_Conditional_13_For_1_Template_div_click_0_listener() { const artifact_r5 = i0.ɵɵrestoreView(_r4).$implicit; const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.selectArtifact(artifact_r5)); });
-    i0.ɵɵelementStart(1, "div", 42)(2, "div", 43)(3, "div", 44);
-    i0.ɵɵelement(4, "i", 13);
+    i0.ɵɵelementStart(0, "div", 39);
+    i0.ɵɵlistener("click", function ArtifactLoadDialogComponent_Conditional_18_Conditional_13_For_1_Template_div_click_0_listener() { const artifact_r5 = i0.ɵɵrestoreView(_r4).$implicit; const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.selectArtifact(artifact_r5)); });
+    i0.ɵɵelementStart(1, "div", 40)(2, "div", 41)(3, "div", 42);
+    i0.ɵɵelement(4, "i", 11);
     i0.ɵɵelementStart(5, "span");
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(7, ArtifactLoadDialogComponent_Conditional_22_Conditional_13_For_1_Conditional_7_Template, 2, 1, "div", 45);
+    i0.ɵɵconditionalCreate(7, ArtifactLoadDialogComponent_Conditional_18_Conditional_13_For_1_Conditional_7_Template, 2, 1, "div", 43);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "div", 46)(9, "div");
+    i0.ɵɵelementStart(8, "div", 44)(9, "div");
     i0.ɵɵtext(10);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(11, "div");
@@ -120,55 +119,55 @@ function ArtifactLoadDialogComponent_Conditional_22_Conditional_13_For_1_Templat
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(13, 6, artifact_r5.__mj_UpdatedAt, "short"));
 } }
-function ArtifactLoadDialogComponent_Conditional_22_Conditional_13_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵrepeaterCreate(0, ArtifactLoadDialogComponent_Conditional_22_Conditional_13_For_1_Template, 14, 9, "div", 40, _forTrack0);
+function ArtifactLoadDialogComponent_Conditional_18_Conditional_13_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵrepeaterCreate(0, ArtifactLoadDialogComponent_Conditional_18_Conditional_13_For_1_Template, 14, 9, "div", 38, _forTrack0);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵrepeater(ctx_r0.artifacts);
 } }
-function ArtifactLoadDialogComponent_Conditional_22_Template(rf, ctx) { if (rf & 1) {
+function ArtifactLoadDialogComponent_Conditional_18_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 16)(1, "div", 30)(2, "button", 31);
-    i0.ɵɵlistener("click", function ArtifactLoadDialogComponent_Conditional_22_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.previousPage()); });
-    i0.ɵɵelement(3, "i", 32);
+    i0.ɵɵelementStart(0, "div", 14)(1, "div", 28)(2, "button", 29);
+    i0.ɵɵlistener("click", function ArtifactLoadDialogComponent_Conditional_18_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.previousPage()); });
+    i0.ɵɵelement(3, "i", 30);
     i0.ɵɵtext(4, " Previous ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "span", 33);
+    i0.ɵɵelementStart(5, "span", 31);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "button", 31);
-    i0.ɵɵlistener("click", function ArtifactLoadDialogComponent_Conditional_22_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.nextPage()); });
+    i0.ɵɵelementStart(7, "button", 29);
+    i0.ɵɵlistener("click", function ArtifactLoadDialogComponent_Conditional_18_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.nextPage()); });
     i0.ɵɵtext(8, " Next ");
-    i0.ɵɵelement(9, "i", 34);
+    i0.ɵɵelement(9, "i", 32);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(10, "div", 35);
-    i0.ɵɵconditionalCreate(11, ArtifactLoadDialogComponent_Conditional_22_Conditional_11_Template, 2, 0, "div", 36)(12, ArtifactLoadDialogComponent_Conditional_22_Conditional_12_Template, 4, 0, "div", 37)(13, ArtifactLoadDialogComponent_Conditional_22_Conditional_13_Template, 2, 0);
+    i0.ɵɵelementStart(10, "div", 33);
+    i0.ɵɵconditionalCreate(11, ArtifactLoadDialogComponent_Conditional_18_Conditional_11_Template, 2, 0, "div", 34)(12, ArtifactLoadDialogComponent_Conditional_18_Conditional_12_Template, 4, 0, "div", 35)(13, ArtifactLoadDialogComponent_Conditional_18_Conditional_13_Template, 2, 0);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("disabled", !ctx_r0.canGoPrevious())("themeColor", "base");
+    i0.ɵɵproperty("disabled", !ctx_r0.canGoPrevious());
     i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate3(" Page ", ctx_r0.currentPage + 1, " of ", ctx_r0.getTotalPages(), " (", ctx_r0.totalArtifacts, " total) ");
     i0.ɵɵadvance();
-    i0.ɵɵproperty("disabled", !ctx_r0.canGoNext())("themeColor", "base");
+    i0.ɵɵproperty("disabled", !ctx_r0.canGoNext());
     i0.ɵɵadvance(4);
     i0.ɵɵconditional(ctx_r0.isLoading ? 11 : ctx_r0.artifacts.length === 0 ? 12 : 13);
 } }
-function ArtifactLoadDialogComponent_Conditional_23_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 36);
-    i0.ɵɵelement(1, "mj-loading", 49);
+function ArtifactLoadDialogComponent_Conditional_19_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 34);
+    i0.ɵɵelement(1, "mj-loading", 47);
     i0.ɵɵelementEnd();
 } }
-function ArtifactLoadDialogComponent_Conditional_23_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 37);
-    i0.ɵɵelement(1, "i", 50);
+function ArtifactLoadDialogComponent_Conditional_19_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 35);
+    i0.ɵɵelement(1, "i", 48);
     i0.ɵɵelementStart(2, "p");
     i0.ɵɵtext(3, "No collections found");
     i0.ɵɵelementEnd()();
 } }
-function ArtifactLoadDialogComponent_Conditional_23_Conditional_4_For_1_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 56);
+function ArtifactLoadDialogComponent_Conditional_19_Conditional_4_For_1_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 54);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -176,17 +175,17 @@ function ArtifactLoadDialogComponent_Conditional_23_Conditional_4_For_1_Conditio
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(collection_r7.Description);
 } }
-function ArtifactLoadDialogComponent_Conditional_23_Conditional_4_For_1_Template(rf, ctx) { if (rf & 1) {
+function ArtifactLoadDialogComponent_Conditional_19_Conditional_4_For_1_Template(rf, ctx) { if (rf & 1) {
     const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 52);
-    i0.ɵɵlistener("click", function ArtifactLoadDialogComponent_Conditional_23_Conditional_4_For_1_Template_div_click_0_listener() { const collection_r7 = i0.ɵɵrestoreView(_r6).$implicit; const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.selectCollection(collection_r7)); });
-    i0.ɵɵelementStart(1, "div", 53);
-    i0.ɵɵelement(2, "i", 14);
+    i0.ɵɵelementStart(0, "div", 50);
+    i0.ɵɵlistener("click", function ArtifactLoadDialogComponent_Conditional_19_Conditional_4_For_1_Template_div_click_0_listener() { const collection_r7 = i0.ɵɵrestoreView(_r6).$implicit; const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.selectCollection(collection_r7)); });
+    i0.ɵɵelementStart(1, "div", 51);
+    i0.ɵɵelement(2, "i", 12);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 54)(4, "div", 55);
+    i0.ɵɵelementStart(3, "div", 52)(4, "div", 53);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(6, ArtifactLoadDialogComponent_Conditional_23_Conditional_4_For_1_Conditional_6_Template, 2, 1, "div", 56);
+    i0.ɵɵconditionalCreate(6, ArtifactLoadDialogComponent_Conditional_19_Conditional_4_For_1_Conditional_6_Template, 2, 1, "div", 54);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const collection_r7 = ctx.$implicit;
@@ -197,21 +196,21 @@ function ArtifactLoadDialogComponent_Conditional_23_Conditional_4_For_1_Template
     i0.ɵɵadvance();
     i0.ɵɵconditional(collection_r7.Description ? 6 : -1);
 } }
-function ArtifactLoadDialogComponent_Conditional_23_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵrepeaterCreate(0, ArtifactLoadDialogComponent_Conditional_23_Conditional_4_For_1_Template, 7, 4, "div", 51, _forTrack0);
+function ArtifactLoadDialogComponent_Conditional_19_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵrepeaterCreate(0, ArtifactLoadDialogComponent_Conditional_19_Conditional_4_For_1_Template, 7, 4, "div", 49, _forTrack0);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵrepeater(ctx_r0.collections);
 } }
-function ArtifactLoadDialogComponent_Conditional_23_Conditional_5_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 37);
-    i0.ɵɵelement(1, "i", 39);
+function ArtifactLoadDialogComponent_Conditional_19_Conditional_5_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 35);
+    i0.ɵɵelement(1, "i", 37);
     i0.ɵɵelementStart(2, "p");
     i0.ɵɵtext(3, "No artifacts in this collection");
     i0.ɵɵelementEnd()();
 } }
-function ArtifactLoadDialogComponent_Conditional_23_Conditional_5_Conditional_5_For_1_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 45);
+function ArtifactLoadDialogComponent_Conditional_19_Conditional_5_Conditional_5_For_1_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 43);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -219,16 +218,16 @@ function ArtifactLoadDialogComponent_Conditional_23_Conditional_5_Conditional_5_
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", artifact_r9.Description, " ");
 } }
-function ArtifactLoadDialogComponent_Conditional_23_Conditional_5_Conditional_5_For_1_Template(rf, ctx) { if (rf & 1) {
+function ArtifactLoadDialogComponent_Conditional_19_Conditional_5_Conditional_5_For_1_Template(rf, ctx) { if (rf & 1) {
     const _r8 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 41);
-    i0.ɵɵlistener("click", function ArtifactLoadDialogComponent_Conditional_23_Conditional_5_Conditional_5_For_1_Template_div_click_0_listener() { const artifact_r9 = i0.ɵɵrestoreView(_r8).$implicit; const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.selectArtifact(artifact_r9)); });
-    i0.ɵɵelementStart(1, "div", 42)(2, "div", 43)(3, "div", 44);
-    i0.ɵɵelement(4, "i", 13);
+    i0.ɵɵelementStart(0, "div", 39);
+    i0.ɵɵlistener("click", function ArtifactLoadDialogComponent_Conditional_19_Conditional_5_Conditional_5_For_1_Template_div_click_0_listener() { const artifact_r9 = i0.ɵɵrestoreView(_r8).$implicit; const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.selectArtifact(artifact_r9)); });
+    i0.ɵɵelementStart(1, "div", 40)(2, "div", 41)(3, "div", 42);
+    i0.ɵɵelement(4, "i", 11);
     i0.ɵɵelementStart(5, "span");
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(7, ArtifactLoadDialogComponent_Conditional_23_Conditional_5_Conditional_5_For_1_Conditional_7_Template, 2, 1, "div", 45);
+    i0.ɵɵconditionalCreate(7, ArtifactLoadDialogComponent_Conditional_19_Conditional_5_Conditional_5_For_1_Conditional_7_Template, 2, 1, "div", 43);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const artifact_r9 = ctx.$implicit;
@@ -239,18 +238,18 @@ function ArtifactLoadDialogComponent_Conditional_23_Conditional_5_Conditional_5_
     i0.ɵɵadvance();
     i0.ɵɵconditional(artifact_r9.Description ? 7 : -1);
 } }
-function ArtifactLoadDialogComponent_Conditional_23_Conditional_5_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵrepeaterCreate(0, ArtifactLoadDialogComponent_Conditional_23_Conditional_5_Conditional_5_For_1_Template, 8, 4, "div", 40, _forTrack0);
+function ArtifactLoadDialogComponent_Conditional_19_Conditional_5_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵrepeaterCreate(0, ArtifactLoadDialogComponent_Conditional_19_Conditional_5_Conditional_5_For_1_Template, 8, 4, "div", 38, _forTrack0);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(3);
     i0.ɵɵrepeater(ctx_r0.collectionArtifacts);
 } }
-function ArtifactLoadDialogComponent_Conditional_23_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 48)(1, "div", 57);
-    i0.ɵɵelement(2, "i", 13);
+function ArtifactLoadDialogComponent_Conditional_19_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 46)(1, "div", 55);
+    i0.ɵɵelement(2, "i", 11);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(4, ArtifactLoadDialogComponent_Conditional_23_Conditional_5_Conditional_4_Template, 4, 0, "div", 37)(5, ArtifactLoadDialogComponent_Conditional_23_Conditional_5_Conditional_5_Template, 2, 0);
+    i0.ɵɵconditionalCreate(4, ArtifactLoadDialogComponent_Conditional_19_Conditional_5_Conditional_4_Template, 4, 0, "div", 35)(5, ArtifactLoadDialogComponent_Conditional_19_Conditional_5_Conditional_5_Template, 2, 0);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
@@ -259,11 +258,11 @@ function ArtifactLoadDialogComponent_Conditional_23_Conditional_5_Template(rf, c
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r0.collectionArtifacts.length === 0 ? 4 : 5);
 } }
-function ArtifactLoadDialogComponent_Conditional_23_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 17)(1, "div", 47);
-    i0.ɵɵconditionalCreate(2, ArtifactLoadDialogComponent_Conditional_23_Conditional_2_Template, 2, 0, "div", 36)(3, ArtifactLoadDialogComponent_Conditional_23_Conditional_3_Template, 4, 0, "div", 37)(4, ArtifactLoadDialogComponent_Conditional_23_Conditional_4_Template, 2, 0);
+function ArtifactLoadDialogComponent_Conditional_19_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 15)(1, "div", 45);
+    i0.ɵɵconditionalCreate(2, ArtifactLoadDialogComponent_Conditional_19_Conditional_2_Template, 2, 0, "div", 34)(3, ArtifactLoadDialogComponent_Conditional_19_Conditional_3_Template, 4, 0, "div", 35)(4, ArtifactLoadDialogComponent_Conditional_19_Conditional_4_Template, 2, 0);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(5, ArtifactLoadDialogComponent_Conditional_23_Conditional_5_Template, 6, 2, "div", 48);
+    i0.ɵɵconditionalCreate(5, ArtifactLoadDialogComponent_Conditional_19_Conditional_5_Template, 6, 2, "div", 46);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -272,20 +271,20 @@ function ArtifactLoadDialogComponent_Conditional_23_Template(rf, ctx) { if (rf &
     i0.ɵɵadvance(3);
     i0.ɵɵconditional(ctx_r0.selectedCollection ? 5 : -1);
 } }
-function ArtifactLoadDialogComponent_Conditional_24_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 36);
-    i0.ɵɵelement(1, "mj-loading", 60);
+function ArtifactLoadDialogComponent_Conditional_20_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 34);
+    i0.ɵɵelement(1, "mj-loading", 58);
     i0.ɵɵelementEnd();
 } }
-function ArtifactLoadDialogComponent_Conditional_24_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 37);
-    i0.ɵɵelement(1, "i", 61);
+function ArtifactLoadDialogComponent_Conditional_20_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 35);
+    i0.ɵɵelement(1, "i", 59);
     i0.ɵɵelementStart(2, "p");
     i0.ɵɵtext(3, "No versions available");
     i0.ɵɵelementEnd()();
 } }
-function ArtifactLoadDialogComponent_Conditional_24_Conditional_8_For_2_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 68);
+function ArtifactLoadDialogComponent_Conditional_20_Conditional_8_For_2_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 66);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -293,19 +292,19 @@ function ArtifactLoadDialogComponent_Conditional_24_Conditional_8_For_2_Conditio
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(version_r11.Comments);
 } }
-function ArtifactLoadDialogComponent_Conditional_24_Conditional_8_For_2_Template(rf, ctx) { if (rf & 1) {
+function ArtifactLoadDialogComponent_Conditional_20_Conditional_8_For_2_Template(rf, ctx) { if (rf & 1) {
     const _r10 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 65);
-    i0.ɵɵlistener("click", function ArtifactLoadDialogComponent_Conditional_24_Conditional_8_For_2_Template_div_click_0_listener() { const version_r11 = i0.ɵɵrestoreView(_r10).$implicit; const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.selectVersion(version_r11)); });
-    i0.ɵɵelementStart(1, "div", 66);
-    i0.ɵɵelement(2, "i", 58);
+    i0.ɵɵelementStart(0, "div", 63);
+    i0.ɵɵlistener("click", function ArtifactLoadDialogComponent_Conditional_20_Conditional_8_For_2_Template_div_click_0_listener() { const version_r11 = i0.ɵɵrestoreView(_r10).$implicit; const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.selectVersion(version_r11)); });
+    i0.ɵɵelementStart(1, "div", 64);
+    i0.ɵɵelement(2, "i", 56);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 67)(5, "div");
+    i0.ɵɵelementStart(4, "div", 65)(5, "div");
     i0.ɵɵtext(6);
     i0.ɵɵpipe(7, "date");
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(8, ArtifactLoadDialogComponent_Conditional_24_Conditional_8_For_2_Conditional_8_Template, 2, 1, "div", 68);
+    i0.ɵɵconditionalCreate(8, ArtifactLoadDialogComponent_Conditional_20_Conditional_8_For_2_Conditional_8_Template, 2, 1, "div", 66);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const version_r11 = ctx.$implicit;
@@ -318,9 +317,9 @@ function ArtifactLoadDialogComponent_Conditional_24_Conditional_8_For_2_Template
     i0.ɵɵadvance(2);
     i0.ɵɵconditional(version_r11.Comments ? 8 : -1);
 } }
-function ArtifactLoadDialogComponent_Conditional_24_Conditional_8_Conditional_3_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 71);
-    i0.ɵɵelement(1, "i", 73);
+function ArtifactLoadDialogComponent_Conditional_20_Conditional_8_Conditional_3_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 69);
+    i0.ɵɵelement(1, "i", 71);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -328,8 +327,8 @@ function ArtifactLoadDialogComponent_Conditional_24_Conditional_8_Conditional_3_
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1(" ", ctx_r0.previewError, " ");
 } }
-function ArtifactLoadDialogComponent_Conditional_24_Conditional_8_Conditional_3_Conditional_5_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 74)(1, "strong");
+function ArtifactLoadDialogComponent_Conditional_20_Conditional_8_Conditional_3_Conditional_5_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 72)(1, "strong");
     i0.ɵɵtext(2, "Description:");
     i0.ɵɵelementEnd();
     i0.ɵɵtext(3);
@@ -339,8 +338,8 @@ function ArtifactLoadDialogComponent_Conditional_24_Conditional_8_Conditional_3_
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate1(" ", ctx_r0.previewSpec.description, " ");
 } }
-function ArtifactLoadDialogComponent_Conditional_24_Conditional_8_Conditional_3_Conditional_5_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 74)(1, "strong");
+function ArtifactLoadDialogComponent_Conditional_20_Conditional_8_Conditional_3_Conditional_5_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 72)(1, "strong");
     i0.ɵɵtext(2, "Type:");
     i0.ɵɵelementEnd();
     i0.ɵɵtext(3);
@@ -350,8 +349,8 @@ function ArtifactLoadDialogComponent_Conditional_24_Conditional_8_Conditional_3_
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate1(" ", ctx_r0.previewSpec.type, " ");
 } }
-function ArtifactLoadDialogComponent_Conditional_24_Conditional_8_Conditional_3_Conditional_5_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 74)(1, "strong");
+function ArtifactLoadDialogComponent_Conditional_20_Conditional_8_Conditional_3_Conditional_5_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 72)(1, "strong");
     i0.ɵɵtext(2, "Namespace:");
     i0.ɵɵelementEnd();
     i0.ɵɵtext(3);
@@ -361,8 +360,8 @@ function ArtifactLoadDialogComponent_Conditional_24_Conditional_8_Conditional_3_
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate1(" ", ctx_r0.previewSpec.namespace, " ");
 } }
-function ArtifactLoadDialogComponent_Conditional_24_Conditional_8_Conditional_3_Conditional_5_Conditional_12_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 74)(1, "strong");
+function ArtifactLoadDialogComponent_Conditional_20_Conditional_8_Conditional_3_Conditional_5_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 72)(1, "strong");
     i0.ɵɵtext(2, "Dependencies:");
     i0.ɵɵelementEnd();
     i0.ɵɵtext(3);
@@ -372,38 +371,38 @@ function ArtifactLoadDialogComponent_Conditional_24_Conditional_8_Conditional_3_
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate1(" ", ctx_r0.previewSpec.dependencies.length, " ");
 } }
-function ArtifactLoadDialogComponent_Conditional_24_Conditional_8_Conditional_3_Conditional_5_Conditional_18_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 78);
-    i0.ɵɵelement(1, "mj-code-editor", 79);
+function ArtifactLoadDialogComponent_Conditional_20_Conditional_8_Conditional_3_Conditional_5_Conditional_18_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 76);
+    i0.ɵɵelement(1, "mj-code-editor", 77);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(5);
     i0.ɵɵadvance();
     i0.ɵɵproperty("value", ctx_r0.getPreviewJSON())("language", "json")("readonly", true)("lineWrapping", true)("setup", "basic");
 } }
-function ArtifactLoadDialogComponent_Conditional_24_Conditional_8_Conditional_3_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+function ArtifactLoadDialogComponent_Conditional_20_Conditional_8_Conditional_3_Conditional_5_Template(rf, ctx) { if (rf & 1) {
     const _r12 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 72)(1, "div", 74)(2, "strong");
+    i0.ɵɵelementStart(0, "div", 70)(1, "div", 72)(2, "strong");
     i0.ɵɵtext(3, "Name:");
     i0.ɵɵelementEnd();
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(5, ArtifactLoadDialogComponent_Conditional_24_Conditional_8_Conditional_3_Conditional_5_Conditional_5_Template, 4, 1, "div", 74);
-    i0.ɵɵconditionalCreate(6, ArtifactLoadDialogComponent_Conditional_24_Conditional_8_Conditional_3_Conditional_5_Conditional_6_Template, 4, 1, "div", 74);
-    i0.ɵɵconditionalCreate(7, ArtifactLoadDialogComponent_Conditional_24_Conditional_8_Conditional_3_Conditional_5_Conditional_7_Template, 4, 1, "div", 74);
-    i0.ɵɵelementStart(8, "div", 74)(9, "strong");
+    i0.ɵɵconditionalCreate(5, ArtifactLoadDialogComponent_Conditional_20_Conditional_8_Conditional_3_Conditional_5_Conditional_5_Template, 4, 1, "div", 72);
+    i0.ɵɵconditionalCreate(6, ArtifactLoadDialogComponent_Conditional_20_Conditional_8_Conditional_3_Conditional_5_Conditional_6_Template, 4, 1, "div", 72);
+    i0.ɵɵconditionalCreate(7, ArtifactLoadDialogComponent_Conditional_20_Conditional_8_Conditional_3_Conditional_5_Conditional_7_Template, 4, 1, "div", 72);
+    i0.ɵɵelementStart(8, "div", 72)(9, "strong");
     i0.ɵɵtext(10, "Has Code:");
     i0.ɵɵelementEnd();
     i0.ɵɵtext(11);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(12, ArtifactLoadDialogComponent_Conditional_24_Conditional_8_Conditional_3_Conditional_5_Conditional_12_Template, 4, 1, "div", 74);
-    i0.ɵɵelementStart(13, "div", 75)(14, "div", 76);
-    i0.ɵɵlistener("click", function ArtifactLoadDialogComponent_Conditional_24_Conditional_8_Conditional_3_Conditional_5_Template_div_click_14_listener() { i0.ɵɵrestoreView(_r12); const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.toggleJsonPreview()); });
-    i0.ɵɵelement(15, "i", 77);
+    i0.ɵɵconditionalCreate(12, ArtifactLoadDialogComponent_Conditional_20_Conditional_8_Conditional_3_Conditional_5_Conditional_12_Template, 4, 1, "div", 72);
+    i0.ɵɵelementStart(13, "div", 73)(14, "div", 74);
+    i0.ɵɵlistener("click", function ArtifactLoadDialogComponent_Conditional_20_Conditional_8_Conditional_3_Conditional_5_Template_div_click_14_listener() { i0.ɵɵrestoreView(_r12); const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.toggleJsonPreview()); });
+    i0.ɵɵelement(15, "i", 75);
     i0.ɵɵelementStart(16, "strong");
     i0.ɵɵtext(17, "Full Specification (JSON)");
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(18, ArtifactLoadDialogComponent_Conditional_24_Conditional_8_Conditional_3_Conditional_5_Conditional_18_Template, 2, 5, "div", 78);
+    i0.ɵɵconditionalCreate(18, ArtifactLoadDialogComponent_Conditional_20_Conditional_8_Conditional_3_Conditional_5_Conditional_18_Template, 2, 5, "div", 76);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(4);
@@ -424,23 +423,23 @@ function ArtifactLoadDialogComponent_Conditional_24_Conditional_8_Conditional_3_
     i0.ɵɵadvance(3);
     i0.ɵɵconditional(ctx_r0.showJsonPreview ? 18 : -1);
 } }
-function ArtifactLoadDialogComponent_Conditional_24_Conditional_8_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 64)(1, "div", 69);
-    i0.ɵɵelement(2, "i", 70);
+function ArtifactLoadDialogComponent_Conditional_20_Conditional_8_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 62)(1, "div", 67);
+    i0.ɵɵelement(2, "i", 68);
     i0.ɵɵtext(3, " Preview ");
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(4, ArtifactLoadDialogComponent_Conditional_24_Conditional_8_Conditional_3_Conditional_4_Template, 3, 1, "div", 71)(5, ArtifactLoadDialogComponent_Conditional_24_Conditional_8_Conditional_3_Conditional_5_Template, 19, 11, "div", 72);
+    i0.ɵɵconditionalCreate(4, ArtifactLoadDialogComponent_Conditional_20_Conditional_8_Conditional_3_Conditional_4_Template, 3, 1, "div", 69)(5, ArtifactLoadDialogComponent_Conditional_20_Conditional_8_Conditional_3_Conditional_5_Template, 19, 11, "div", 70);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance(4);
     i0.ɵɵconditional(ctx_r0.previewError ? 4 : ctx_r0.previewSpec ? 5 : -1);
 } }
-function ArtifactLoadDialogComponent_Conditional_24_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 62);
-    i0.ɵɵrepeaterCreate(1, ArtifactLoadDialogComponent_Conditional_24_Conditional_8_For_2_Template, 9, 8, "div", 63, _forTrack0);
+function ArtifactLoadDialogComponent_Conditional_20_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 60);
+    i0.ɵɵrepeaterCreate(1, ArtifactLoadDialogComponent_Conditional_20_Conditional_8_For_2_Template, 9, 8, "div", 61, _forTrack0);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(3, ArtifactLoadDialogComponent_Conditional_24_Conditional_8_Conditional_3_Template, 6, 1, "div", 64);
+    i0.ɵɵconditionalCreate(3, ArtifactLoadDialogComponent_Conditional_20_Conditional_8_Conditional_3_Template, 6, 1, "div", 62);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
@@ -448,13 +447,13 @@ function ArtifactLoadDialogComponent_Conditional_24_Conditional_8_Template(rf, c
     i0.ɵɵadvance(2);
     i0.ɵɵconditional(ctx_r0.selectedVersion ? 3 : -1);
 } }
-function ArtifactLoadDialogComponent_Conditional_24_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 18)(1, "div", 5)(2, "h4");
-    i0.ɵɵelement(3, "i", 58);
+function ArtifactLoadDialogComponent_Conditional_20_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 16)(1, "div", 3)(2, "h4");
+    i0.ɵɵelement(3, "i", 56);
     i0.ɵɵtext(4, " Versions");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(5, "div", 59);
-    i0.ɵɵconditionalCreate(6, ArtifactLoadDialogComponent_Conditional_24_Conditional_6_Template, 2, 0, "div", 36)(7, ArtifactLoadDialogComponent_Conditional_24_Conditional_7_Template, 4, 0, "div", 37)(8, ArtifactLoadDialogComponent_Conditional_24_Conditional_8_Template, 4, 1);
+    i0.ɵɵelementStart(5, "div", 57);
+    i0.ɵɵconditionalCreate(6, ArtifactLoadDialogComponent_Conditional_20_Conditional_6_Template, 2, 0, "div", 34)(7, ArtifactLoadDialogComponent_Conditional_20_Conditional_7_Template, 4, 0, "div", 35)(8, ArtifactLoadDialogComponent_Conditional_20_Conditional_8_Template, 4, 1);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -462,7 +461,8 @@ function ArtifactLoadDialogComponent_Conditional_24_Template(rf, ctx) { if (rf &
     i0.ɵɵconditional(ctx_r0.isLoadingVersions ? 6 : ctx_r0.artifactVersions.length === 0 ? 7 : 8);
 } }
 export class ArtifactLoadDialogComponent {
-    dialog;
+    Visible = false;
+    Close = new EventEmitter();
     // Tab state
     activeTab = 0; // 0 = Artifacts, 1 = Collections
     // Artifacts data
@@ -495,9 +495,6 @@ export class ArtifactLoadDialogComponent {
     metadata = new Metadata();
     destroy$ = new Subject();
     searchSubject = new Subject();
-    constructor(dialog) {
-        this.dialog = dialog;
-    }
     async ngOnInit() {
         // Setup search debouncing
         this.searchSubject.pipe(debounceTime(300), distinctUntilChanged(), takeUntil(this.destroy$)).subscribe(() => {
@@ -736,7 +733,7 @@ export class ArtifactLoadDialogComponent {
             this.previewSpec !== null;
     }
     cancel() {
-        this.dialog.close(undefined);
+        this.Close.emit(undefined);
     }
     load() {
         if (!this.canLoad())
@@ -748,7 +745,7 @@ export class ArtifactLoadDialogComponent {
             versionNumber: this.selectedVersion.VersionNumber,
             artifactName: this.selectedArtifact.Name
         };
-        this.dialog.close(result);
+        this.Close.emit(result);
     }
     onTabSelect(index) {
         this.activeTab = index;
@@ -774,77 +771,77 @@ export class ArtifactLoadDialogComponent {
     IsVersionSelected(version) {
         return UUIDsEqual(this.selectedVersion?.ID, version.ID);
     }
-    static ɵfac = function ArtifactLoadDialogComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ArtifactLoadDialogComponent)(i0.ɵɵdirectiveInject(i1.DialogRef)); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ArtifactLoadDialogComponent, selectors: [["app-artifact-load-dialog"]], standalone: false, decls: 31, vars: 18, consts: [[3, "close"], [2, "font-size", "18px"], [1, "fa-solid", "fa-database"], [1, "artifact-load-content"], [1, "filter-panel"], [1, "panel-header"], ["kendoButton", "", 3, "click", "fillMode", "themeColor"], [1, "fa-solid", "fa-filter"], [1, "filter-count"], [1, "filter-content"], [1, "main-content"], [1, "tabs"], [1, "tab", 3, "click"], [1, "fa-solid", "fa-file-code"], [1, "fa-solid", "fa-folder"], [1, "tab-content"], [1, "artifacts-view"], [1, "collections-view"], [1, "version-panel"], ["kendoButton", "", 3, "click", "themeColor", "disabled"], [1, "fa-solid", "fa-download"], ["kendoButton", "", 3, "click"], [1, "filter-group"], ["type", "text", "placeholder", "Name or description...", 1, "filter-input", 3, "ngModelChange", "input", "ngModel"], [1, "filter-select", 3, "ngModelChange", "change", "ngModel"], ["value", ""], ["value", "Component"], ["value", "Report"], ["value", "Dashboard"], ["type", "text", "placeholder", "Enter user email...", 1, "filter-input", 3, "ngModelChange", "input", "ngModel"], [1, "paging-controls"], ["kendoButton", "", 3, "click", "disabled", "themeColor"], [1, "fa-solid", "fa-chevron-left"], [1, "page-info"], [1, "fa-solid", "fa-chevron-right"], [1, "artifacts-list"], [1, "loading-state"], [1, "empty-state"], ["text", "Loading artifacts...", "size", "small"], [1, "fa-solid", "fa-inbox"], [1, "artifact-item", 3, "selected"], [1, "artifact-item", 3, "click"], [1, "artifact-content"], [1, "artifact-main"], [1, "artifact-name"], [1, "artifact-description"], [1, "artifact-meta"], [1, "collections-list"], [1, "collection-artifacts"], ["text", "Loading collections...", "size", "small"], [1, "fa-solid", "fa-folder-open"], [1, "collection-item", 3, "selected"], [1, "collection-item", 3, "click"], [1, "collection-icon"], [1, "collection-info"], [1, "collection-name"], [1, "collection-description"], [1, "section-header"], [1, "fa-solid", "fa-code-branch"], [1, "version-content"], ["text", "Loading versions...", "size", "small"], [1, "fa-solid", "fa-info-circle"], [1, "version-list"], [1, "version-item", 3, "selected"], [1, "preview-section"], [1, "version-item", 3, "click"], [1, "version-number"], [1, "version-meta"], [1, "version-comments"], [1, "preview-header"], [1, "fa-solid", "fa-eye"], [1, "preview-error"], [1, "preview-content"], [1, "fa-solid", "fa-exclamation-triangle"], [1, "preview-item"], [1, "preview-json-section"], [1, "preview-json-header", 3, "click"], [1, "fa-solid"], [1, "preview-json-content"], [2, "height", "300px", "width", "100%", 3, "value", "language", "readonly", "lineWrapping", "setup"]], template: function ArtifactLoadDialogComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelementStart(0, "div")(1, "kendo-dialog-titlebar", 0);
-            i0.ɵɵlistener("close", function ArtifactLoadDialogComponent_Template_kendo_dialog_titlebar_close_1_listener() { return ctx.cancel(); });
-            i0.ɵɵelementStart(2, "div", 1);
-            i0.ɵɵelement(3, "i", 2);
-            i0.ɵɵtext(4, " Load Component from Artifact ");
-            i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(5, "div", 3)(6, "div", 4)(7, "div", 5);
-            i0.ɵɵconditionalCreate(8, ArtifactLoadDialogComponent_Conditional_8_Template, 2, 0, "span");
-            i0.ɵɵelementStart(9, "button", 6);
-            i0.ɵɵlistener("click", function ArtifactLoadDialogComponent_Template_button_click_9_listener() { return ctx.toggleFilterPanel(); });
-            i0.ɵɵelement(10, "i", 7);
-            i0.ɵɵconditionalCreate(11, ArtifactLoadDialogComponent_Conditional_11_Template, 2, 1, "span", 8);
+    static ɵfac = function ArtifactLoadDialogComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ArtifactLoadDialogComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ArtifactLoadDialogComponent, selectors: [["app-artifact-load-dialog"]], inputs: { Visible: "Visible" }, outputs: { Close: "Close" }, standalone: false, decls: 27, vars: 18, consts: [["Title", "Load Component from Artifact", 3, "Close", "Visible", "Width", "MinWidth"], [1, "artifact-load-content"], [1, "filter-panel"], [1, "panel-header"], ["mjButton", "", "variant", "flat", 3, "click"], [1, "fa-solid", "fa-filter"], [1, "filter-count"], [1, "filter-content"], [1, "main-content"], [1, "tabs"], [1, "tab", 3, "click"], [1, "fa-solid", "fa-file-code"], [1, "fa-solid", "fa-folder"], [1, "tab-content"], [1, "artifacts-view"], [1, "collections-view"], [1, "version-panel"], ["mjButton", "", "variant", "primary", 3, "click", "disabled"], [1, "fa-solid", "fa-download"], ["mjButton", "", 3, "click"], [1, "filter-group"], ["type", "text", "placeholder", "Name or description...", 1, "filter-input", 3, "ngModelChange", "input", "ngModel"], [1, "filter-select", 3, "ngModelChange", "change", "ngModel"], ["value", ""], ["value", "Component"], ["value", "Report"], ["value", "Dashboard"], ["type", "text", "placeholder", "Enter user email...", 1, "filter-input", 3, "ngModelChange", "input", "ngModel"], [1, "paging-controls"], ["mjButton", "", 3, "click", "disabled"], [1, "fa-solid", "fa-chevron-left"], [1, "page-info"], [1, "fa-solid", "fa-chevron-right"], [1, "artifacts-list"], [1, "loading-state"], [1, "empty-state"], ["text", "Loading artifacts...", "size", "small"], [1, "fa-solid", "fa-inbox"], [1, "artifact-item", 3, "selected"], [1, "artifact-item", 3, "click"], [1, "artifact-content"], [1, "artifact-main"], [1, "artifact-name"], [1, "artifact-description"], [1, "artifact-meta"], [1, "collections-list"], [1, "collection-artifacts"], ["text", "Loading collections...", "size", "small"], [1, "fa-solid", "fa-folder-open"], [1, "collection-item", 3, "selected"], [1, "collection-item", 3, "click"], [1, "collection-icon"], [1, "collection-info"], [1, "collection-name"], [1, "collection-description"], [1, "section-header"], [1, "fa-solid", "fa-code-branch"], [1, "version-content"], ["text", "Loading versions...", "size", "small"], [1, "fa-solid", "fa-info-circle"], [1, "version-list"], [1, "version-item", 3, "selected"], [1, "preview-section"], [1, "version-item", 3, "click"], [1, "version-number"], [1, "version-meta"], [1, "version-comments"], [1, "preview-header"], [1, "fa-solid", "fa-eye"], [1, "preview-error"], [1, "preview-content"], [1, "fa-solid", "fa-exclamation-triangle"], [1, "preview-item"], [1, "preview-json-section"], [1, "preview-json-header", 3, "click"], [1, "fa-solid"], [1, "preview-json-content"], [2, "height", "300px", "width", "100%", 3, "value", "language", "readonly", "lineWrapping", "setup"]], template: function ArtifactLoadDialogComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "mj-dialog", 0);
+            i0.ɵɵlistener("Close", function ArtifactLoadDialogComponent_Template_mj_dialog_Close_0_listener() { return ctx.cancel(); });
+            i0.ɵɵelementStart(1, "div", 1)(2, "div", 2)(3, "div", 3);
+            i0.ɵɵconditionalCreate(4, ArtifactLoadDialogComponent_Conditional_4_Template, 2, 0, "span");
+            i0.ɵɵelementStart(5, "button", 4);
+            i0.ɵɵlistener("click", function ArtifactLoadDialogComponent_Template_button_click_5_listener() { return ctx.toggleFilterPanel(); });
+            i0.ɵɵelement(6, "i", 5);
+            i0.ɵɵconditionalCreate(7, ArtifactLoadDialogComponent_Conditional_7_Template, 2, 1, "span", 6);
             i0.ɵɵelementEnd()();
-            i0.ɵɵconditionalCreate(12, ArtifactLoadDialogComponent_Conditional_12_Template, 21, 3, "div", 9);
+            i0.ɵɵconditionalCreate(8, ArtifactLoadDialogComponent_Conditional_8_Template, 21, 3, "div", 7);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(13, "div", 10)(14, "div", 11)(15, "button", 12);
-            i0.ɵɵlistener("click", function ArtifactLoadDialogComponent_Template_button_click_15_listener() { return ctx.onTabSelect(0); });
-            i0.ɵɵelement(16, "i", 13);
-            i0.ɵɵtext(17, " All Artifacts ");
+            i0.ɵɵelementStart(9, "div", 8)(10, "div", 9)(11, "button", 10);
+            i0.ɵɵlistener("click", function ArtifactLoadDialogComponent_Template_button_click_11_listener() { return ctx.onTabSelect(0); });
+            i0.ɵɵelement(12, "i", 11);
+            i0.ɵɵtext(13, " All Artifacts ");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(18, "button", 12);
-            i0.ɵɵlistener("click", function ArtifactLoadDialogComponent_Template_button_click_18_listener() { return ctx.onTabSelect(1); });
-            i0.ɵɵelement(19, "i", 14);
-            i0.ɵɵtext(20, " Collections ");
+            i0.ɵɵelementStart(14, "button", 10);
+            i0.ɵɵlistener("click", function ArtifactLoadDialogComponent_Template_button_click_14_listener() { return ctx.onTabSelect(1); });
+            i0.ɵɵelement(15, "i", 12);
+            i0.ɵɵtext(16, " Collections ");
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(21, "div", 15);
-            i0.ɵɵconditionalCreate(22, ArtifactLoadDialogComponent_Conditional_22_Template, 14, 8, "div", 16);
-            i0.ɵɵconditionalCreate(23, ArtifactLoadDialogComponent_Conditional_23_Template, 6, 2, "div", 17);
+            i0.ɵɵelementStart(17, "div", 13);
+            i0.ɵɵconditionalCreate(18, ArtifactLoadDialogComponent_Conditional_18_Template, 14, 6, "div", 14);
+            i0.ɵɵconditionalCreate(19, ArtifactLoadDialogComponent_Conditional_19_Template, 6, 2, "div", 15);
             i0.ɵɵelementEnd()();
-            i0.ɵɵconditionalCreate(24, ArtifactLoadDialogComponent_Conditional_24_Template, 9, 1, "div", 18);
+            i0.ɵɵconditionalCreate(20, ArtifactLoadDialogComponent_Conditional_20_Template, 9, 1, "div", 16);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(25, "kendo-dialog-actions")(26, "button", 19);
-            i0.ɵɵlistener("click", function ArtifactLoadDialogComponent_Template_button_click_26_listener() { return ctx.load(); });
-            i0.ɵɵelement(27, "i", 20);
-            i0.ɵɵtext(28, " Load Component ");
+            i0.ɵɵelementStart(21, "mj-dialog-actions")(22, "button", 17);
+            i0.ɵɵlistener("click", function ArtifactLoadDialogComponent_Template_button_click_22_listener() { return ctx.load(); });
+            i0.ɵɵelement(23, "i", 18);
+            i0.ɵɵtext(24, " Load Component ");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(29, "button", 21);
-            i0.ɵɵlistener("click", function ArtifactLoadDialogComponent_Template_button_click_29_listener() { return ctx.cancel(); });
-            i0.ɵɵtext(30, "Cancel");
+            i0.ɵɵelementStart(25, "button", 19);
+            i0.ɵɵlistener("click", function ArtifactLoadDialogComponent_Template_button_click_25_listener() { return ctx.cancel(); });
+            i0.ɵɵtext(26, "Cancel");
             i0.ɵɵelementEnd()()();
         } if (rf & 2) {
-            i0.ɵɵadvance(6);
+            i0.ɵɵproperty("Visible", true)("Width", 1200)("MinWidth", 600);
+            i0.ɵɵadvance(2);
             i0.ɵɵstyleProp("width", ctx.isFilterPanelCollapsed ? "40px" : "280px");
             i0.ɵɵadvance(2);
-            i0.ɵɵconditional(!ctx.isFilterPanelCollapsed ? 8 : -1);
+            i0.ɵɵconditional(!ctx.isFilterPanelCollapsed ? 4 : -1);
             i0.ɵɵadvance();
             i0.ɵɵclassProp("filter-active", ctx.getActiveFilterCount() > 0);
-            i0.ɵɵproperty("fillMode", "flat")("themeColor", ctx.getActiveFilterCount() > 0 ? "primary" : "base");
             i0.ɵɵadvance(2);
-            i0.ɵɵconditional(ctx.isFilterPanelCollapsed && ctx.getActiveFilterCount() > 0 ? 11 : -1);
+            i0.ɵɵconditional(ctx.isFilterPanelCollapsed && ctx.getActiveFilterCount() > 0 ? 7 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(!ctx.isFilterPanelCollapsed ? 12 : -1);
+            i0.ɵɵconditional(!ctx.isFilterPanelCollapsed ? 8 : -1);
             i0.ɵɵadvance(3);
             i0.ɵɵclassProp("active", ctx.activeTab === 0);
             i0.ɵɵadvance(3);
             i0.ɵɵclassProp("active", ctx.activeTab === 1);
             i0.ɵɵadvance(4);
-            i0.ɵɵconditional(ctx.activeTab === 0 ? 22 : -1);
+            i0.ɵɵconditional(ctx.activeTab === 0 ? 18 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.activeTab === 1 ? 23 : -1);
+            i0.ɵɵconditional(ctx.activeTab === 1 ? 19 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.selectedArtifact ? 24 : -1);
+            i0.ɵɵconditional(ctx.selectedArtifact ? 20 : -1);
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("themeColor", "primary")("disabled", !ctx.canLoad());
-        } }, dependencies: [i2.NgSelectOption, i2.ɵNgSelectMultipleOption, i2.DefaultValueAccessor, i2.SelectControlValueAccessor, i2.NgControlStatus, i2.NgModel, i3.ButtonComponent, i1.DialogTitleBarComponent, i1.DialogActionsComponent, i4.CodeEditorComponent, i5.LoadingComponent, i6.DatePipe], styles: ["\n\n.artifact-load-content[_ngcontent-%COMP%] {\n  height: 100%;\n  display: flex;\n  flex-direction: row;\n}\n\n\n\n.filter-panel[_ngcontent-%COMP%] {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  border-right: 1px solid var(--mj-border-default);\n  transition: width 0.3s ease;\n  flex-shrink: 0;\n  background: var(--mj-bg-surface-sunken);\n}\n\n.panel-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 10px;\n  border-bottom: 1px solid var(--mj-border-default);\n  font-weight: bold;\n  color: var(--mj-text-secondary);\n}\n\n.filter-content[_ngcontent-%COMP%] {\n  flex: 1;\n  padding: 15px;\n  overflow-y: auto;\n}\n\n.filter-group[_ngcontent-%COMP%] {\n  margin-bottom: 15px;\n}\n\n.filter-group[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n  display: block;\n  margin-bottom: 5px;\n  font-weight: 500;\n  color: var(--mj-text-secondary);\n}\n\n.filter-input[_ngcontent-%COMP%], \n.filter-select[_ngcontent-%COMP%] {\n  width: 100%;\n  padding: 8px;\n  border: 1px solid var(--mj-border-strong);\n  border-radius: 4px;\n  font-size: 14px;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n}\n\n.filter-input[_ngcontent-%COMP%]:focus, \n.filter-select[_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 2px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.filter-count[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-brand-primary);\n  border-radius: 50%;\n  min-width: 18px;\n  height: 18px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 10px;\n  font-weight: bold;\n  margin-left: 4px;\n}\n\n\n\n.main-content[_ngcontent-%COMP%] {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  flex: 2;\n  min-width: 0;\n}\n\n\n\n.tabs[_ngcontent-%COMP%] {\n  display: flex;\n  border-bottom: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface-sunken);\n}\n\n.tab[_ngcontent-%COMP%] {\n  padding: 12px 20px;\n  border: none;\n  background: transparent;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  font-size: 14px;\n  font-weight: 500;\n  border-bottom: 2px solid transparent;\n  transition: all 0.2s;\n}\n\n.tab[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-primary);\n}\n\n.tab.active[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  border-bottom-color: var(--mj-brand-primary);\n  background: var(--mj-bg-surface);\n}\n\n.tab[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  margin-right: 6px;\n}\n\n\n\n.tab-content[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n}\n\n.artifacts-view[_ngcontent-%COMP%], \n.collections-view[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n\n\n\n.paging-controls[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 10px 15px;\n  border-bottom: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n}\n\n.page-info[_ngcontent-%COMP%] {\n  color: var(--mj-text-secondary);\n  font-size: 14px;\n}\n\n\n\n.artifacts-list[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  padding: 10px 15px;\n  background: var(--mj-bg-surface);\n}\n\n.artifact-item[_ngcontent-%COMP%] {\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  margin: 10px 0;\n  padding: 15px;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  background: var(--mj-bg-surface);\n}\n\n.artifact-item[_ngcontent-%COMP%]:hover {\n  border-color: var(--mj-brand-primary);\n  background: var(--mj-bg-surface-sunken);\n}\n\n.artifact-item.selected[_ngcontent-%COMP%] {\n  border-color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.artifact-content[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n}\n\n.artifact-main[_ngcontent-%COMP%] {\n  flex: 1;\n}\n\n.artifact-name[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  margin-bottom: 5px;\n}\n\n.artifact-name[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-text-secondary);\n  margin-right: 8px;\n}\n\n.artifact-name[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.artifact-description[_ngcontent-%COMP%] {\n  color: var(--mj-text-secondary);\n  font-size: 14px;\n  margin-top: 4px;\n}\n\n.artifact-meta[_ngcontent-%COMP%] {\n  text-align: right;\n  color: var(--mj-text-muted);\n  font-size: 12px;\n}\n\n\n\n.collections-view[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: 1fr 1.5fr;\n  gap: 15px;\n  padding: 15px;\n  overflow: hidden;\n}\n\n.collections-list[_ngcontent-%COMP%] {\n  overflow-y: auto;\n  border-right: 1px solid var(--mj-border-default);\n  padding-right: 15px;\n}\n\n.collection-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 12px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  margin-bottom: 10px;\n  cursor: pointer;\n  transition: all 0.2s;\n  background: var(--mj-bg-surface);\n}\n\n.collection-item[_ngcontent-%COMP%]:hover {\n  border-color: var(--mj-brand-primary);\n  background: var(--mj-bg-surface-sunken);\n}\n\n.collection-item.selected[_ngcontent-%COMP%] {\n  border-color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.collection-icon[_ngcontent-%COMP%] {\n  font-size: 24px;\n  color: var(--mj-brand-primary);\n}\n\n.collection-info[_ngcontent-%COMP%] {\n  flex: 1;\n}\n\n.collection-name[_ngcontent-%COMP%] {\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin-bottom: 4px;\n}\n\n.collection-description[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n}\n\n.collection-artifacts[_ngcontent-%COMP%] {\n  overflow-y: auto;\n}\n\n.section-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 10px;\n  background: var(--mj-bg-surface-sunken);\n  border-radius: 4px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  margin-bottom: 10px;\n}\n\n\n\n.version-panel[_ngcontent-%COMP%] {\n  width: 350px;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  border-left: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n  background: var(--mj-bg-surface-sunken);\n}\n\n.version-content[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  padding: 15px;\n}\n\n.version-list[_ngcontent-%COMP%] {\n  margin-bottom: 20px;\n}\n\n.version-item[_ngcontent-%COMP%] {\n  padding: 12px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  margin-bottom: 10px;\n  cursor: pointer;\n  transition: all 0.2s;\n  background: var(--mj-bg-surface);\n}\n\n.version-item[_ngcontent-%COMP%]:hover {\n  border-color: var(--mj-brand-primary);\n  background: var(--mj-bg-surface-sunken);\n}\n\n.version-item.selected[_ngcontent-%COMP%] {\n  border-color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.version-number[_ngcontent-%COMP%] {\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin-bottom: 4px;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.version-number[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 14px;\n  color: var(--mj-brand-primary);\n}\n\n.version-meta[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n}\n\n.version-comments[_ngcontent-%COMP%] {\n  margin-top: 4px;\n  font-style: italic;\n  color: var(--mj-text-muted);\n}\n\n\n\n.preview-section[_ngcontent-%COMP%] {\n  border-top: 2px solid var(--mj-border-default);\n  padding-top: 15px;\n  margin-top: 15px;\n}\n\n.preview-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  margin-bottom: 12px;\n  padding-bottom: 8px;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.preview-content[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  padding: 12px;\n}\n\n.preview-item[_ngcontent-%COMP%] {\n  margin-bottom: 8px;\n  font-size: 13px;\n}\n\n.preview-item[_ngcontent-%COMP%]   strong[_ngcontent-%COMP%] {\n  color: var(--mj-text-secondary);\n  font-weight: 600;\n  margin-right: 6px;\n}\n\n.preview-error[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  border: 1px solid var(--mj-status-warning);\n  border-radius: 4px;\n  padding: 10px;\n  color: var(--mj-status-warning);\n  font-size: 13px;\n}\n\n.preview-error[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  margin-right: 6px;\n}\n\n\n\n.loading-state[_ngcontent-%COMP%], \n.empty-state[_ngcontent-%COMP%] {\n  text-align: center;\n  padding: 40px;\n  color: var(--mj-text-secondary);\n}\n\n.loading-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%], \n.empty-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 36px;\n  margin-bottom: 15px;\n  color: var(--mj-text-muted);\n}\n\n.loading-state[_ngcontent-%COMP%]   i.fa-spin[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n.empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 5px 0;\n  font-size: 14px;\n}\n\n\n\n.preview-json-section[_ngcontent-%COMP%] {\n  margin-top: 15px;\n  border-top: 1px solid var(--mj-border-default);\n  padding-top: 10px;\n}\n\n.preview-json-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px;\n  cursor: pointer;\n  background: var(--mj-bg-surface-sunken);\n  border-radius: 4px;\n  transition: background 0.2s;\n}\n\n.preview-json-header[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n}\n\n.preview-json-header[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n}\n\n.preview-json-header[_ngcontent-%COMP%]   strong[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: var(--mj-text-primary);\n}\n\n.preview-json-content[_ngcontent-%COMP%] {\n  margin-top: 10px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 4px;\n  overflow: hidden;\n}"] });
+            i0.ɵɵproperty("disabled", !ctx.canLoad());
+        } }, dependencies: [i1.NgSelectOption, i1.ɵNgSelectMultipleOption, i1.DefaultValueAccessor, i1.SelectControlValueAccessor, i1.NgControlStatus, i1.NgModel, i2.CodeEditorComponent, i3.LoadingComponent, i4.MJButtonDirective, i4.MJDialogComponent, i4.MJDialogActionsComponent, i5.DatePipe], styles: ["\n\n.artifact-load-content[_ngcontent-%COMP%] {\n  height: 100%;\n  display: flex;\n  flex-direction: row;\n}\n\n\n\n.filter-panel[_ngcontent-%COMP%] {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  border-right: 1px solid var(--mj-border-default);\n  transition: width 0.3s ease;\n  flex-shrink: 0;\n  background: var(--mj-bg-surface-sunken);\n}\n\n.panel-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 10px;\n  border-bottom: 1px solid var(--mj-border-default);\n  font-weight: bold;\n  color: var(--mj-text-secondary);\n}\n\n.filter-content[_ngcontent-%COMP%] {\n  flex: 1;\n  padding: 15px;\n  overflow-y: auto;\n}\n\n.filter-group[_ngcontent-%COMP%] {\n  margin-bottom: 15px;\n}\n\n.filter-group[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n  display: block;\n  margin-bottom: 5px;\n  font-weight: 500;\n  color: var(--mj-text-secondary);\n}\n\n.filter-input[_ngcontent-%COMP%], \n.filter-select[_ngcontent-%COMP%] {\n  width: 100%;\n  padding: 8px;\n  border: 1px solid var(--mj-border-strong);\n  border-radius: 4px;\n  font-size: 14px;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n}\n\n.filter-input[_ngcontent-%COMP%]:focus, \n.filter-select[_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 2px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.filter-count[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-brand-primary);\n  border-radius: 50%;\n  min-width: 18px;\n  height: 18px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 10px;\n  font-weight: bold;\n  margin-left: 4px;\n}\n\n\n\n.main-content[_ngcontent-%COMP%] {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  flex: 2;\n  min-width: 0;\n}\n\n\n\n.tabs[_ngcontent-%COMP%] {\n  display: flex;\n  border-bottom: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface-sunken);\n}\n\n.tab[_ngcontent-%COMP%] {\n  padding: 12px 20px;\n  border: none;\n  background: transparent;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  font-size: 14px;\n  font-weight: 500;\n  border-bottom: 2px solid transparent;\n  transition: all 0.2s;\n}\n\n.tab[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-primary);\n}\n\n.tab.active[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  border-bottom-color: var(--mj-brand-primary);\n  background: var(--mj-bg-surface);\n}\n\n.tab[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  margin-right: 6px;\n}\n\n\n\n.tab-content[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n}\n\n.artifacts-view[_ngcontent-%COMP%], \n.collections-view[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n\n\n\n.paging-controls[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 10px 15px;\n  border-bottom: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n}\n\n.page-info[_ngcontent-%COMP%] {\n  color: var(--mj-text-secondary);\n  font-size: 14px;\n}\n\n\n\n.artifacts-list[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  padding: 10px 15px;\n  background: var(--mj-bg-surface);\n}\n\n.artifact-item[_ngcontent-%COMP%] {\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  margin: 10px 0;\n  padding: 15px;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  background: var(--mj-bg-surface);\n}\n\n.artifact-item[_ngcontent-%COMP%]:hover {\n  border-color: var(--mj-brand-primary);\n  background: var(--mj-bg-surface-sunken);\n}\n\n.artifact-item.selected[_ngcontent-%COMP%] {\n  border-color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.artifact-content[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n}\n\n.artifact-main[_ngcontent-%COMP%] {\n  flex: 1;\n}\n\n.artifact-name[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  margin-bottom: 5px;\n}\n\n.artifact-name[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-text-secondary);\n  margin-right: 8px;\n}\n\n.artifact-name[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.artifact-description[_ngcontent-%COMP%] {\n  color: var(--mj-text-secondary);\n  font-size: 14px;\n  margin-top: 4px;\n}\n\n.artifact-meta[_ngcontent-%COMP%] {\n  text-align: right;\n  color: var(--mj-text-muted);\n  font-size: 12px;\n}\n\n\n\n.collections-view[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: 1fr 1.5fr;\n  gap: 15px;\n  padding: 15px;\n  overflow: hidden;\n}\n\n.collections-list[_ngcontent-%COMP%] {\n  overflow-y: auto;\n  border-right: 1px solid var(--mj-border-default);\n  padding-right: 15px;\n}\n\n.collection-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 12px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  margin-bottom: 10px;\n  cursor: pointer;\n  transition: all 0.2s;\n  background: var(--mj-bg-surface);\n}\n\n.collection-item[_ngcontent-%COMP%]:hover {\n  border-color: var(--mj-brand-primary);\n  background: var(--mj-bg-surface-sunken);\n}\n\n.collection-item.selected[_ngcontent-%COMP%] {\n  border-color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.collection-icon[_ngcontent-%COMP%] {\n  font-size: 24px;\n  color: var(--mj-brand-primary);\n}\n\n.collection-info[_ngcontent-%COMP%] {\n  flex: 1;\n}\n\n.collection-name[_ngcontent-%COMP%] {\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin-bottom: 4px;\n}\n\n.collection-description[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n}\n\n.collection-artifacts[_ngcontent-%COMP%] {\n  overflow-y: auto;\n}\n\n.section-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 10px;\n  background: var(--mj-bg-surface-sunken);\n  border-radius: 4px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  margin-bottom: 10px;\n}\n\n\n\n.version-panel[_ngcontent-%COMP%] {\n  width: 350px;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  border-left: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n  background: var(--mj-bg-surface-sunken);\n}\n\n.version-content[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  padding: 15px;\n}\n\n.version-list[_ngcontent-%COMP%] {\n  margin-bottom: 20px;\n}\n\n.version-item[_ngcontent-%COMP%] {\n  padding: 12px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  margin-bottom: 10px;\n  cursor: pointer;\n  transition: all 0.2s;\n  background: var(--mj-bg-surface);\n}\n\n.version-item[_ngcontent-%COMP%]:hover {\n  border-color: var(--mj-brand-primary);\n  background: var(--mj-bg-surface-sunken);\n}\n\n.version-item.selected[_ngcontent-%COMP%] {\n  border-color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.version-number[_ngcontent-%COMP%] {\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin-bottom: 4px;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.version-number[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 14px;\n  color: var(--mj-brand-primary);\n}\n\n.version-meta[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n}\n\n.version-comments[_ngcontent-%COMP%] {\n  margin-top: 4px;\n  font-style: italic;\n  color: var(--mj-text-muted);\n}\n\n\n\n.preview-section[_ngcontent-%COMP%] {\n  border-top: 2px solid var(--mj-border-default);\n  padding-top: 15px;\n  margin-top: 15px;\n}\n\n.preview-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  margin-bottom: 12px;\n  padding-bottom: 8px;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.preview-content[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  padding: 12px;\n}\n\n.preview-item[_ngcontent-%COMP%] {\n  margin-bottom: 8px;\n  font-size: 13px;\n}\n\n.preview-item[_ngcontent-%COMP%]   strong[_ngcontent-%COMP%] {\n  color: var(--mj-text-secondary);\n  font-weight: 600;\n  margin-right: 6px;\n}\n\n.preview-error[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  border: 1px solid var(--mj-status-warning);\n  border-radius: 4px;\n  padding: 10px;\n  color: var(--mj-status-warning);\n  font-size: 13px;\n}\n\n.preview-error[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  margin-right: 6px;\n}\n\n\n\n.loading-state[_ngcontent-%COMP%], \n.empty-state[_ngcontent-%COMP%] {\n  text-align: center;\n  padding: 40px;\n  color: var(--mj-text-secondary);\n}\n\n.loading-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%], \n.empty-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 36px;\n  margin-bottom: 15px;\n  color: var(--mj-text-muted);\n}\n\n.loading-state[_ngcontent-%COMP%]   i.fa-spin[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n.empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 5px 0;\n  font-size: 14px;\n}\n\n\n\n.preview-json-section[_ngcontent-%COMP%] {\n  margin-top: 15px;\n  border-top: 1px solid var(--mj-border-default);\n  padding-top: 10px;\n}\n\n.preview-json-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px;\n  cursor: pointer;\n  background: var(--mj-bg-surface-sunken);\n  border-radius: 4px;\n  transition: background 0.2s;\n}\n\n.preview-json-header[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n}\n\n.preview-json-header[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n}\n\n.preview-json-header[_ngcontent-%COMP%]   strong[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: var(--mj-text-primary);\n}\n\n.preview-json-content[_ngcontent-%COMP%] {\n  margin-top: 10px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 4px;\n  overflow: hidden;\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ArtifactLoadDialogComponent, [{
         type: Component,
-        args: [{ standalone: false, selector: 'app-artifact-load-dialog', template: "<div>\n  <kendo-dialog-titlebar (close)=\"cancel()\">\n    <div style=\"font-size: 18px;\">\n      <i class=\"fa-solid fa-database\"></i> Load Component from Artifact\n    </div>\n  </kendo-dialog-titlebar>\n\n  <div class=\"artifact-load-content\">\n    <!-- Left Filter Panel -->\n    <div class=\"filter-panel\" [style.width]=\"isFilterPanelCollapsed ? '40px' : '280px'\">\n      <div class=\"panel-header\">\n        @if (!isFilterPanelCollapsed) {\n          <span>Filters</span>\n        }\n        <button kendoButton (click)=\"toggleFilterPanel()\"\n                [fillMode]=\"'flat'\"\n                [class.filter-active]=\"getActiveFilterCount() > 0\"\n                [themeColor]=\"getActiveFilterCount() > 0 ? 'primary' : 'base'\">\n          <i class=\"fa-solid fa-filter\"></i>\n          @if (isFilterPanelCollapsed && getActiveFilterCount() > 0) {\n            <span class=\"filter-count\">{{ getActiveFilterCount() }}</span>\n          }\n        </button>\n      </div>\n\n      @if (!isFilterPanelCollapsed) {\n        <div class=\"filter-content\">\n          <!-- Search -->\n          <div class=\"filter-group\">\n            <label>Search</label>\n            <input type=\"text\"\n                   [(ngModel)]=\"searchTerm\"\n                   (input)=\"onSearchInput()\"\n                   placeholder=\"Name or description...\"\n                   class=\"filter-input\">\n          </div>\n\n          <!-- Artifact Type -->\n          <div class=\"filter-group\">\n            <label>Artifact Type</label>\n            <select [(ngModel)]=\"selectedArtifactType\"\n                    (change)=\"onArtifactTypeChange()\"\n                    class=\"filter-select\">\n              <option value=\"\">Component (default)</option>\n              <option value=\"Component\">Component</option>\n              <option value=\"Report\">Report</option>\n              <option value=\"Dashboard\">Dashboard</option>\n            </select>\n          </div>\n\n          <!-- User Email -->\n          <div class=\"filter-group\">\n            <label>Filter by User</label>\n            <input type=\"text\"\n                   [(ngModel)]=\"userEmail\"\n                   (input)=\"filterArtifacts()\"\n                   placeholder=\"Enter user email...\"\n                   class=\"filter-input\">\n          </div>\n        </div>\n      }\n    </div>\n\n    <!-- Main Content Area -->\n    <div class=\"main-content\">\n      <!-- Tabs -->\n      <div class=\"tabs\">\n        <button class=\"tab\"\n                [class.active]=\"activeTab === 0\"\n                (click)=\"onTabSelect(0)\">\n          <i class=\"fa-solid fa-file-code\"></i> All Artifacts\n        </button>\n        <button class=\"tab\"\n                [class.active]=\"activeTab === 1\"\n                (click)=\"onTabSelect(1)\">\n          <i class=\"fa-solid fa-folder\"></i> Collections\n        </button>\n      </div>\n\n      <!-- Tab Content -->\n      <div class=\"tab-content\">\n        <!-- Artifacts Tab -->\n        @if (activeTab === 0) {\n          <div class=\"artifacts-view\">\n            <!-- Paging Controls -->\n            <div class=\"paging-controls\">\n              <button kendoButton\n                      (click)=\"previousPage()\"\n                      [disabled]=\"!canGoPrevious()\"\n                      [themeColor]=\"'base'\">\n                <i class=\"fa-solid fa-chevron-left\"></i> Previous\n              </button>\n              <span class=\"page-info\">\n                Page {{ currentPage + 1 }} of {{ getTotalPages() }}\n                ({{ totalArtifacts }} total)\n              </span>\n              <button kendoButton\n                      (click)=\"nextPage()\"\n                      [disabled]=\"!canGoNext()\"\n                      [themeColor]=\"'base'\">\n                Next <i class=\"fa-solid fa-chevron-right\"></i>\n              </button>\n            </div>\n\n            <!-- Artifacts List -->\n            <div class=\"artifacts-list\">\n              @if (isLoading) {\n                <div class=\"loading-state\">\n                  <mj-loading text=\"Loading artifacts...\" size=\"small\"></mj-loading>\n                </div>\n              }\n              @else if (artifacts.length === 0) {\n                <div class=\"empty-state\">\n                  <i class=\"fa-solid fa-inbox\"></i>\n                  <p>No artifacts found</p>\n                </div>\n              }\n              @else {\n                @for (artifact of artifacts; track artifact.ID) {\n                  <div class=\"artifact-item\"\n                       [class.selected]=\"IsArtifactSelected(artifact)\"\n                       (click)=\"selectArtifact(artifact)\">\n                    <div class=\"artifact-content\">\n                      <div class=\"artifact-main\">\n                        <div class=\"artifact-name\">\n                          <i class=\"fa-solid fa-file-code\"></i>\n                          <span>{{ artifact.Name }}</span>\n                        </div>\n                        @if (artifact.Description) {\n                          <div class=\"artifact-description\">\n                            {{ artifact.Description }}\n                          </div>\n                        }\n                      </div>\n                      <div class=\"artifact-meta\">\n                        <div>{{ artifact.Type }}</div>\n                        <div>{{ artifact.__mj_UpdatedAt | date:'short' }}</div>\n                      </div>\n                    </div>\n                  </div>\n                }\n              }\n            </div>\n          </div>\n        }\n\n        <!-- Collections Tab -->\n        @if (activeTab === 1) {\n          <div class=\"collections-view\">\n            <div class=\"collections-list\">\n              @if (isLoadingCollections) {\n                <div class=\"loading-state\">\n                  <mj-loading text=\"Loading collections...\" size=\"small\"></mj-loading>\n                </div>\n              }\n              @else if (collections.length === 0) {\n                <div class=\"empty-state\">\n                  <i class=\"fa-solid fa-folder-open\"></i>\n                  <p>No collections found</p>\n                </div>\n              }\n              @else {\n                @for (collection of collections; track collection.ID) {\n                  <div class=\"collection-item\"\n                       [class.selected]=\"IsCollectionSelected(collection)\"\n                       (click)=\"selectCollection(collection)\">\n                    <div class=\"collection-icon\">\n                      <i class=\"fa-solid fa-folder\"></i>\n                    </div>\n                    <div class=\"collection-info\">\n                      <div class=\"collection-name\">{{ collection.Name }}</div>\n                      @if (collection.Description) {\n                        <div class=\"collection-description\">{{ collection.Description }}</div>\n                      }\n                    </div>\n                  </div>\n                }\n              }\n            </div>\n\n            @if (selectedCollection) {\n              <div class=\"collection-artifacts\">\n                <div class=\"section-header\">\n                  <i class=\"fa-solid fa-file-code\"></i>\n                  Artifacts in \"{{ selectedCollection.Name }}\"\n                </div>\n                @if (collectionArtifacts.length === 0) {\n                  <div class=\"empty-state\">\n                    <i class=\"fa-solid fa-inbox\"></i>\n                    <p>No artifacts in this collection</p>\n                  </div>\n                }\n                @else {\n                  @for (artifact of collectionArtifacts; track artifact.ID) {\n                    <div class=\"artifact-item\"\n                         [class.selected]=\"IsArtifactSelected(artifact)\"\n                         (click)=\"selectArtifact(artifact)\">\n                      <div class=\"artifact-content\">\n                        <div class=\"artifact-main\">\n                          <div class=\"artifact-name\">\n                            <i class=\"fa-solid fa-file-code\"></i>\n                            <span>{{ artifact.Name }}</span>\n                          </div>\n                          @if (artifact.Description) {\n                            <div class=\"artifact-description\">\n                              {{ artifact.Description }}\n                            </div>\n                          }\n                        </div>\n                      </div>\n                    </div>\n                  }\n                }\n              </div>\n            }\n          </div>\n        }\n      </div>\n    </div>\n\n    <!-- Right Version/Preview Panel -->\n    @if (selectedArtifact) {\n      <div class=\"version-panel\">\n        <div class=\"panel-header\">\n          <h4><i class=\"fa-solid fa-code-branch\"></i> Versions</h4>\n        </div>\n\n        <div class=\"version-content\">\n          @if (isLoadingVersions) {\n            <div class=\"loading-state\">\n              <mj-loading text=\"Loading versions...\" size=\"small\"></mj-loading>\n            </div>\n          }\n          @else if (artifactVersions.length === 0) {\n            <div class=\"empty-state\">\n              <i class=\"fa-solid fa-info-circle\"></i>\n              <p>No versions available</p>\n            </div>\n          }\n          @else {\n            <div class=\"version-list\">\n              @for (version of artifactVersions; track version.ID) {\n                <div class=\"version-item\"\n                     [class.selected]=\"IsVersionSelected(version)\"\n                     (click)=\"selectVersion(version)\">\n                  <div class=\"version-number\">\n                    <i class=\"fa-solid fa-code-branch\"></i>\n                    Version {{ version.VersionNumber }}\n                  </div>\n                  <div class=\"version-meta\">\n                    <div>{{ version.__mj_UpdatedAt | date:'short' }}</div>\n                    @if (version.Comments) {\n                      <div class=\"version-comments\">{{ version.Comments }}</div>\n                    }\n                  </div>\n                </div>\n              }\n            </div>\n\n            <!-- Preview Section -->\n            @if (selectedVersion) {\n              <div class=\"preview-section\">\n                <div class=\"preview-header\">\n                  <i class=\"fa-solid fa-eye\"></i> Preview\n                </div>\n                @if (previewError) {\n                  <div class=\"preview-error\">\n                    <i class=\"fa-solid fa-exclamation-triangle\"></i>\n                    {{ previewError }}\n                  </div>\n                }\n                @else if (previewSpec) {\n                  <div class=\"preview-content\">\n                    <div class=\"preview-item\">\n                      <strong>Name:</strong> {{ previewSpec.name }}\n                    </div>\n                    @if (previewSpec.description) {\n                      <div class=\"preview-item\">\n                        <strong>Description:</strong> {{ previewSpec.description }}\n                      </div>\n                    }\n                    @if (previewSpec.type) {\n                      <div class=\"preview-item\">\n                        <strong>Type:</strong> {{ previewSpec.type }}\n                      </div>\n                    }\n                    @if (previewSpec.namespace) {\n                      <div class=\"preview-item\">\n                        <strong>Namespace:</strong> {{ previewSpec.namespace }}\n                      </div>\n                    }\n                    <div class=\"preview-item\">\n                      <strong>Has Code:</strong> {{ previewSpec.code ? 'Yes' : 'No' }}\n                    </div>\n                    @if (previewSpec.dependencies && previewSpec.dependencies.length > 0) {\n                      <div class=\"preview-item\">\n                        <strong>Dependencies:</strong> {{ previewSpec.dependencies.length }}\n                      </div>\n                    }\n\n                    <!-- Full Spec JSON Viewer -->\n                    <div class=\"preview-json-section\">\n                      <div class=\"preview-json-header\" (click)=\"toggleJsonPreview()\">\n                        <i class=\"fa-solid\" [class.fa-chevron-right]=\"!showJsonPreview\" [class.fa-chevron-down]=\"showJsonPreview\"></i>\n                        <strong>Full Specification (JSON)</strong>\n                      </div>\n                      @if (showJsonPreview) {\n                        <div class=\"preview-json-content\">\n                          <mj-code-editor\n                            [value]=\"getPreviewJSON()\"\n                            [language]=\"'json'\"\n                            [readonly]=\"true\"\n                            [lineWrapping]=\"true\"\n                            [setup]=\"'basic'\"\n                            style=\"height: 300px; width: 100%;\">\n                          </mj-code-editor>\n                        </div>\n                      }\n                    </div>\n                  </div>\n                }\n              </div>\n            }\n          }\n        </div>\n      </div>\n    }\n  </div>\n\n  <kendo-dialog-actions>\n    <button kendoButton\n            [themeColor]=\"'primary'\"\n            (click)=\"load()\"\n            [disabled]=\"!canLoad()\">\n      <i class=\"fa-solid fa-download\"></i>\n      Load Component\n    </button>\n    <button kendoButton (click)=\"cancel()\">Cancel</button>\n  </kendo-dialog-actions>\n</div>\n", styles: ["/* Main container */\n.artifact-load-content {\n  height: 100%;\n  display: flex;\n  flex-direction: row;\n}\n\n/* Filter Panel */\n.filter-panel {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  border-right: 1px solid var(--mj-border-default);\n  transition: width 0.3s ease;\n  flex-shrink: 0;\n  background: var(--mj-bg-surface-sunken);\n}\n\n.panel-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 10px;\n  border-bottom: 1px solid var(--mj-border-default);\n  font-weight: bold;\n  color: var(--mj-text-secondary);\n}\n\n.filter-content {\n  flex: 1;\n  padding: 15px;\n  overflow-y: auto;\n}\n\n.filter-group {\n  margin-bottom: 15px;\n}\n\n.filter-group label {\n  display: block;\n  margin-bottom: 5px;\n  font-weight: 500;\n  color: var(--mj-text-secondary);\n}\n\n.filter-input,\n.filter-select {\n  width: 100%;\n  padding: 8px;\n  border: 1px solid var(--mj-border-strong);\n  border-radius: 4px;\n  font-size: 14px;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n}\n\n.filter-input:focus,\n.filter-select:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 2px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.filter-count {\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-brand-primary);\n  border-radius: 50%;\n  min-width: 18px;\n  height: 18px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 10px;\n  font-weight: bold;\n  margin-left: 4px;\n}\n\n/* Main Content Panel */\n.main-content {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  flex: 2;\n  min-width: 0;\n}\n\n/* Tabs */\n.tabs {\n  display: flex;\n  border-bottom: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface-sunken);\n}\n\n.tab {\n  padding: 12px 20px;\n  border: none;\n  background: transparent;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  font-size: 14px;\n  font-weight: 500;\n  border-bottom: 2px solid transparent;\n  transition: all 0.2s;\n}\n\n.tab:hover {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-primary);\n}\n\n.tab.active {\n  color: var(--mj-brand-primary);\n  border-bottom-color: var(--mj-brand-primary);\n  background: var(--mj-bg-surface);\n}\n\n.tab i {\n  margin-right: 6px;\n}\n\n/* Tab Content */\n.tab-content {\n  flex: 1;\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n}\n\n.artifacts-view,\n.collections-view {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n\n/* Paging Controls */\n.paging-controls {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 10px 15px;\n  border-bottom: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n}\n\n.page-info {\n  color: var(--mj-text-secondary);\n  font-size: 14px;\n}\n\n/* Artifacts List */\n.artifacts-list {\n  flex: 1;\n  overflow-y: auto;\n  padding: 10px 15px;\n  background: var(--mj-bg-surface);\n}\n\n.artifact-item {\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  margin: 10px 0;\n  padding: 15px;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  background: var(--mj-bg-surface);\n}\n\n.artifact-item:hover {\n  border-color: var(--mj-brand-primary);\n  background: var(--mj-bg-surface-sunken);\n}\n\n.artifact-item.selected {\n  border-color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.artifact-content {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n}\n\n.artifact-main {\n  flex: 1;\n}\n\n.artifact-name {\n  display: flex;\n  align-items: center;\n  margin-bottom: 5px;\n}\n\n.artifact-name i {\n  color: var(--mj-text-secondary);\n  margin-right: 8px;\n}\n\n.artifact-name span {\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.artifact-description {\n  color: var(--mj-text-secondary);\n  font-size: 14px;\n  margin-top: 4px;\n}\n\n.artifact-meta {\n  text-align: right;\n  color: var(--mj-text-muted);\n  font-size: 12px;\n}\n\n/* Collections View */\n.collections-view {\n  display: grid;\n  grid-template-columns: 1fr 1.5fr;\n  gap: 15px;\n  padding: 15px;\n  overflow: hidden;\n}\n\n.collections-list {\n  overflow-y: auto;\n  border-right: 1px solid var(--mj-border-default);\n  padding-right: 15px;\n}\n\n.collection-item {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 12px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  margin-bottom: 10px;\n  cursor: pointer;\n  transition: all 0.2s;\n  background: var(--mj-bg-surface);\n}\n\n.collection-item:hover {\n  border-color: var(--mj-brand-primary);\n  background: var(--mj-bg-surface-sunken);\n}\n\n.collection-item.selected {\n  border-color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.collection-icon {\n  font-size: 24px;\n  color: var(--mj-brand-primary);\n}\n\n.collection-info {\n  flex: 1;\n}\n\n.collection-name {\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin-bottom: 4px;\n}\n\n.collection-description {\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n}\n\n.collection-artifacts {\n  overflow-y: auto;\n}\n\n.section-header {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 10px;\n  background: var(--mj-bg-surface-sunken);\n  border-radius: 4px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  margin-bottom: 10px;\n}\n\n/* Version Panel */\n.version-panel {\n  width: 350px;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  border-left: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n  background: var(--mj-bg-surface-sunken);\n}\n\n.version-content {\n  flex: 1;\n  overflow-y: auto;\n  padding: 15px;\n}\n\n.version-list {\n  margin-bottom: 20px;\n}\n\n.version-item {\n  padding: 12px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  margin-bottom: 10px;\n  cursor: pointer;\n  transition: all 0.2s;\n  background: var(--mj-bg-surface);\n}\n\n.version-item:hover {\n  border-color: var(--mj-brand-primary);\n  background: var(--mj-bg-surface-sunken);\n}\n\n.version-item.selected {\n  border-color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.version-number {\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin-bottom: 4px;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.version-number i {\n  font-size: 14px;\n  color: var(--mj-brand-primary);\n}\n\n.version-meta {\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n}\n\n.version-comments {\n  margin-top: 4px;\n  font-style: italic;\n  color: var(--mj-text-muted);\n}\n\n/* Preview Section */\n.preview-section {\n  border-top: 2px solid var(--mj-border-default);\n  padding-top: 15px;\n  margin-top: 15px;\n}\n\n.preview-header {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  margin-bottom: 12px;\n  padding-bottom: 8px;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.preview-content {\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  padding: 12px;\n}\n\n.preview-item {\n  margin-bottom: 8px;\n  font-size: 13px;\n}\n\n.preview-item strong {\n  color: var(--mj-text-secondary);\n  font-weight: 600;\n  margin-right: 6px;\n}\n\n.preview-error {\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  border: 1px solid var(--mj-status-warning);\n  border-radius: 4px;\n  padding: 10px;\n  color: var(--mj-status-warning);\n  font-size: 13px;\n}\n\n.preview-error i {\n  margin-right: 6px;\n}\n\n/* Loading & Empty States */\n.loading-state,\n.empty-state {\n  text-align: center;\n  padding: 40px;\n  color: var(--mj-text-secondary);\n}\n\n.loading-state i,\n.empty-state i {\n  font-size: 36px;\n  margin-bottom: 15px;\n  color: var(--mj-text-muted);\n}\n\n.loading-state i.fa-spin {\n  color: var(--mj-brand-primary);\n}\n\n.empty-state p {\n  margin: 5px 0;\n  font-size: 14px;\n}\n\n/* JSON Preview Section */\n.preview-json-section {\n  margin-top: 15px;\n  border-top: 1px solid var(--mj-border-default);\n  padding-top: 10px;\n}\n\n.preview-json-header {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px;\n  cursor: pointer;\n  background: var(--mj-bg-surface-sunken);\n  border-radius: 4px;\n  transition: background 0.2s;\n}\n\n.preview-json-header:hover {\n  background: var(--mj-bg-surface-sunken);\n}\n\n.preview-json-header i {\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n}\n\n.preview-json-header strong {\n  font-size: 13px;\n  color: var(--mj-text-primary);\n}\n\n.preview-json-content {\n  margin-top: 10px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 4px;\n  overflow: hidden;\n}\n"] }]
-    }], () => [{ type: i1.DialogRef }], null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ArtifactLoadDialogComponent, { className: "ArtifactLoadDialogComponent", filePath: "src/ComponentStudio/components/artifact-load-dialog.component.ts", lineNumber: 30 }); })();
+        args: [{ standalone: false, selector: 'app-artifact-load-dialog', template: "<mj-dialog [Visible]=\"true\" Title=\"Load Component from Artifact\" (Close)=\"cancel()\" [Width]=\"1200\" [MinWidth]=\"600\">\n  <div class=\"artifact-load-content\">\n    <!-- Left Filter Panel -->\n    <div class=\"filter-panel\" [style.width]=\"isFilterPanelCollapsed ? '40px' : '280px'\">\n      <div class=\"panel-header\">\n        @if (!isFilterPanelCollapsed) {\n          <span>Filters</span>\n        }\n        <button mjButton (click)=\"toggleFilterPanel()\"\n                variant=\"flat\"\n                [class.filter-active]=\"getActiveFilterCount() > 0\">\n          <i class=\"fa-solid fa-filter\"></i>\n          @if (isFilterPanelCollapsed && getActiveFilterCount() > 0) {\n            <span class=\"filter-count\">{{ getActiveFilterCount() }}</span>\n          }\n        </button>\n      </div>\n\n      @if (!isFilterPanelCollapsed) {\n        <div class=\"filter-content\">\n          <!-- Search -->\n          <div class=\"filter-group\">\n            <label>Search</label>\n            <input type=\"text\"\n                   [(ngModel)]=\"searchTerm\"\n                   (input)=\"onSearchInput()\"\n                   placeholder=\"Name or description...\"\n                   class=\"filter-input\">\n          </div>\n\n          <!-- Artifact Type -->\n          <div class=\"filter-group\">\n            <label>Artifact Type</label>\n            <select [(ngModel)]=\"selectedArtifactType\"\n                    (change)=\"onArtifactTypeChange()\"\n                    class=\"filter-select\">\n              <option value=\"\">Component (default)</option>\n              <option value=\"Component\">Component</option>\n              <option value=\"Report\">Report</option>\n              <option value=\"Dashboard\">Dashboard</option>\n            </select>\n          </div>\n\n          <!-- User Email -->\n          <div class=\"filter-group\">\n            <label>Filter by User</label>\n            <input type=\"text\"\n                   [(ngModel)]=\"userEmail\"\n                   (input)=\"filterArtifacts()\"\n                   placeholder=\"Enter user email...\"\n                   class=\"filter-input\">\n          </div>\n        </div>\n      }\n    </div>\n\n    <!-- Main Content Area -->\n    <div class=\"main-content\">\n      <!-- Tabs -->\n      <div class=\"tabs\">\n        <button class=\"tab\"\n                [class.active]=\"activeTab === 0\"\n                (click)=\"onTabSelect(0)\">\n          <i class=\"fa-solid fa-file-code\"></i> All Artifacts\n        </button>\n        <button class=\"tab\"\n                [class.active]=\"activeTab === 1\"\n                (click)=\"onTabSelect(1)\">\n          <i class=\"fa-solid fa-folder\"></i> Collections\n        </button>\n      </div>\n\n      <!-- Tab Content -->\n      <div class=\"tab-content\">\n        <!-- Artifacts Tab -->\n        @if (activeTab === 0) {\n          <div class=\"artifacts-view\">\n            <!-- Paging Controls -->\n            <div class=\"paging-controls\">\n              <button mjButton\n                      (click)=\"previousPage()\"\n                      [disabled]=\"!canGoPrevious()\">\n                <i class=\"fa-solid fa-chevron-left\"></i> Previous\n              </button>\n              <span class=\"page-info\">\n                Page {{ currentPage + 1 }} of {{ getTotalPages() }}\n                ({{ totalArtifacts }} total)\n              </span>\n              <button mjButton\n                      (click)=\"nextPage()\"\n                      [disabled]=\"!canGoNext()\">\n                Next <i class=\"fa-solid fa-chevron-right\"></i>\n              </button>\n            </div>\n\n            <!-- Artifacts List -->\n            <div class=\"artifacts-list\">\n              @if (isLoading) {\n                <div class=\"loading-state\">\n                  <mj-loading text=\"Loading artifacts...\" size=\"small\"></mj-loading>\n                </div>\n              }\n              @else if (artifacts.length === 0) {\n                <div class=\"empty-state\">\n                  <i class=\"fa-solid fa-inbox\"></i>\n                  <p>No artifacts found</p>\n                </div>\n              }\n              @else {\n                @for (artifact of artifacts; track artifact.ID) {\n                  <div class=\"artifact-item\"\n                       [class.selected]=\"IsArtifactSelected(artifact)\"\n                       (click)=\"selectArtifact(artifact)\">\n                    <div class=\"artifact-content\">\n                      <div class=\"artifact-main\">\n                        <div class=\"artifact-name\">\n                          <i class=\"fa-solid fa-file-code\"></i>\n                          <span>{{ artifact.Name }}</span>\n                        </div>\n                        @if (artifact.Description) {\n                          <div class=\"artifact-description\">\n                            {{ artifact.Description }}\n                          </div>\n                        }\n                      </div>\n                      <div class=\"artifact-meta\">\n                        <div>{{ artifact.Type }}</div>\n                        <div>{{ artifact.__mj_UpdatedAt | date:'short' }}</div>\n                      </div>\n                    </div>\n                  </div>\n                }\n              }\n            </div>\n          </div>\n        }\n\n        <!-- Collections Tab -->\n        @if (activeTab === 1) {\n          <div class=\"collections-view\">\n            <div class=\"collections-list\">\n              @if (isLoadingCollections) {\n                <div class=\"loading-state\">\n                  <mj-loading text=\"Loading collections...\" size=\"small\"></mj-loading>\n                </div>\n              }\n              @else if (collections.length === 0) {\n                <div class=\"empty-state\">\n                  <i class=\"fa-solid fa-folder-open\"></i>\n                  <p>No collections found</p>\n                </div>\n              }\n              @else {\n                @for (collection of collections; track collection.ID) {\n                  <div class=\"collection-item\"\n                       [class.selected]=\"IsCollectionSelected(collection)\"\n                       (click)=\"selectCollection(collection)\">\n                    <div class=\"collection-icon\">\n                      <i class=\"fa-solid fa-folder\"></i>\n                    </div>\n                    <div class=\"collection-info\">\n                      <div class=\"collection-name\">{{ collection.Name }}</div>\n                      @if (collection.Description) {\n                        <div class=\"collection-description\">{{ collection.Description }}</div>\n                      }\n                    </div>\n                  </div>\n                }\n              }\n            </div>\n\n            @if (selectedCollection) {\n              <div class=\"collection-artifacts\">\n                <div class=\"section-header\">\n                  <i class=\"fa-solid fa-file-code\"></i>\n                  Artifacts in \"{{ selectedCollection.Name }}\"\n                </div>\n                @if (collectionArtifacts.length === 0) {\n                  <div class=\"empty-state\">\n                    <i class=\"fa-solid fa-inbox\"></i>\n                    <p>No artifacts in this collection</p>\n                  </div>\n                }\n                @else {\n                  @for (artifact of collectionArtifacts; track artifact.ID) {\n                    <div class=\"artifact-item\"\n                         [class.selected]=\"IsArtifactSelected(artifact)\"\n                         (click)=\"selectArtifact(artifact)\">\n                      <div class=\"artifact-content\">\n                        <div class=\"artifact-main\">\n                          <div class=\"artifact-name\">\n                            <i class=\"fa-solid fa-file-code\"></i>\n                            <span>{{ artifact.Name }}</span>\n                          </div>\n                          @if (artifact.Description) {\n                            <div class=\"artifact-description\">\n                              {{ artifact.Description }}\n                            </div>\n                          }\n                        </div>\n                      </div>\n                    </div>\n                  }\n                }\n              </div>\n            }\n          </div>\n        }\n      </div>\n    </div>\n\n    <!-- Right Version/Preview Panel -->\n    @if (selectedArtifact) {\n      <div class=\"version-panel\">\n        <div class=\"panel-header\">\n          <h4><i class=\"fa-solid fa-code-branch\"></i> Versions</h4>\n        </div>\n\n        <div class=\"version-content\">\n          @if (isLoadingVersions) {\n            <div class=\"loading-state\">\n              <mj-loading text=\"Loading versions...\" size=\"small\"></mj-loading>\n            </div>\n          }\n          @else if (artifactVersions.length === 0) {\n            <div class=\"empty-state\">\n              <i class=\"fa-solid fa-info-circle\"></i>\n              <p>No versions available</p>\n            </div>\n          }\n          @else {\n            <div class=\"version-list\">\n              @for (version of artifactVersions; track version.ID) {\n                <div class=\"version-item\"\n                     [class.selected]=\"IsVersionSelected(version)\"\n                     (click)=\"selectVersion(version)\">\n                  <div class=\"version-number\">\n                    <i class=\"fa-solid fa-code-branch\"></i>\n                    Version {{ version.VersionNumber }}\n                  </div>\n                  <div class=\"version-meta\">\n                    <div>{{ version.__mj_UpdatedAt | date:'short' }}</div>\n                    @if (version.Comments) {\n                      <div class=\"version-comments\">{{ version.Comments }}</div>\n                    }\n                  </div>\n                </div>\n              }\n            </div>\n\n            <!-- Preview Section -->\n            @if (selectedVersion) {\n              <div class=\"preview-section\">\n                <div class=\"preview-header\">\n                  <i class=\"fa-solid fa-eye\"></i> Preview\n                </div>\n                @if (previewError) {\n                  <div class=\"preview-error\">\n                    <i class=\"fa-solid fa-exclamation-triangle\"></i>\n                    {{ previewError }}\n                  </div>\n                }\n                @else if (previewSpec) {\n                  <div class=\"preview-content\">\n                    <div class=\"preview-item\">\n                      <strong>Name:</strong> {{ previewSpec.name }}\n                    </div>\n                    @if (previewSpec.description) {\n                      <div class=\"preview-item\">\n                        <strong>Description:</strong> {{ previewSpec.description }}\n                      </div>\n                    }\n                    @if (previewSpec.type) {\n                      <div class=\"preview-item\">\n                        <strong>Type:</strong> {{ previewSpec.type }}\n                      </div>\n                    }\n                    @if (previewSpec.namespace) {\n                      <div class=\"preview-item\">\n                        <strong>Namespace:</strong> {{ previewSpec.namespace }}\n                      </div>\n                    }\n                    <div class=\"preview-item\">\n                      <strong>Has Code:</strong> {{ previewSpec.code ? 'Yes' : 'No' }}\n                    </div>\n                    @if (previewSpec.dependencies && previewSpec.dependencies.length > 0) {\n                      <div class=\"preview-item\">\n                        <strong>Dependencies:</strong> {{ previewSpec.dependencies.length }}\n                      </div>\n                    }\n\n                    <!-- Full Spec JSON Viewer -->\n                    <div class=\"preview-json-section\">\n                      <div class=\"preview-json-header\" (click)=\"toggleJsonPreview()\">\n                        <i class=\"fa-solid\" [class.fa-chevron-right]=\"!showJsonPreview\" [class.fa-chevron-down]=\"showJsonPreview\"></i>\n                        <strong>Full Specification (JSON)</strong>\n                      </div>\n                      @if (showJsonPreview) {\n                        <div class=\"preview-json-content\">\n                          <mj-code-editor\n                            [value]=\"getPreviewJSON()\"\n                            [language]=\"'json'\"\n                            [readonly]=\"true\"\n                            [lineWrapping]=\"true\"\n                            [setup]=\"'basic'\"\n                            style=\"height: 300px; width: 100%;\">\n                          </mj-code-editor>\n                        </div>\n                      }\n                    </div>\n                  </div>\n                }\n              </div>\n            }\n          }\n        </div>\n      </div>\n    }\n  </div>\n\n  <mj-dialog-actions>\n    <button mjButton\n            variant=\"primary\"\n            (click)=\"load()\"\n            [disabled]=\"!canLoad()\">\n      <i class=\"fa-solid fa-download\"></i>\n      Load Component\n    </button>\n    <button mjButton (click)=\"cancel()\">Cancel</button>\n  </mj-dialog-actions>\n</mj-dialog>\n", styles: ["/* Main container */\n.artifact-load-content {\n  height: 100%;\n  display: flex;\n  flex-direction: row;\n}\n\n/* Filter Panel */\n.filter-panel {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  border-right: 1px solid var(--mj-border-default);\n  transition: width 0.3s ease;\n  flex-shrink: 0;\n  background: var(--mj-bg-surface-sunken);\n}\n\n.panel-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 10px;\n  border-bottom: 1px solid var(--mj-border-default);\n  font-weight: bold;\n  color: var(--mj-text-secondary);\n}\n\n.filter-content {\n  flex: 1;\n  padding: 15px;\n  overflow-y: auto;\n}\n\n.filter-group {\n  margin-bottom: 15px;\n}\n\n.filter-group label {\n  display: block;\n  margin-bottom: 5px;\n  font-weight: 500;\n  color: var(--mj-text-secondary);\n}\n\n.filter-input,\n.filter-select {\n  width: 100%;\n  padding: 8px;\n  border: 1px solid var(--mj-border-strong);\n  border-radius: 4px;\n  font-size: 14px;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n}\n\n.filter-input:focus,\n.filter-select:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 2px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.filter-count {\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-brand-primary);\n  border-radius: 50%;\n  min-width: 18px;\n  height: 18px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 10px;\n  font-weight: bold;\n  margin-left: 4px;\n}\n\n/* Main Content Panel */\n.main-content {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  flex: 2;\n  min-width: 0;\n}\n\n/* Tabs */\n.tabs {\n  display: flex;\n  border-bottom: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface-sunken);\n}\n\n.tab {\n  padding: 12px 20px;\n  border: none;\n  background: transparent;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  font-size: 14px;\n  font-weight: 500;\n  border-bottom: 2px solid transparent;\n  transition: all 0.2s;\n}\n\n.tab:hover {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-primary);\n}\n\n.tab.active {\n  color: var(--mj-brand-primary);\n  border-bottom-color: var(--mj-brand-primary);\n  background: var(--mj-bg-surface);\n}\n\n.tab i {\n  margin-right: 6px;\n}\n\n/* Tab Content */\n.tab-content {\n  flex: 1;\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n}\n\n.artifacts-view,\n.collections-view {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n\n/* Paging Controls */\n.paging-controls {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 10px 15px;\n  border-bottom: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n}\n\n.page-info {\n  color: var(--mj-text-secondary);\n  font-size: 14px;\n}\n\n/* Artifacts List */\n.artifacts-list {\n  flex: 1;\n  overflow-y: auto;\n  padding: 10px 15px;\n  background: var(--mj-bg-surface);\n}\n\n.artifact-item {\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  margin: 10px 0;\n  padding: 15px;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  background: var(--mj-bg-surface);\n}\n\n.artifact-item:hover {\n  border-color: var(--mj-brand-primary);\n  background: var(--mj-bg-surface-sunken);\n}\n\n.artifact-item.selected {\n  border-color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.artifact-content {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n}\n\n.artifact-main {\n  flex: 1;\n}\n\n.artifact-name {\n  display: flex;\n  align-items: center;\n  margin-bottom: 5px;\n}\n\n.artifact-name i {\n  color: var(--mj-text-secondary);\n  margin-right: 8px;\n}\n\n.artifact-name span {\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.artifact-description {\n  color: var(--mj-text-secondary);\n  font-size: 14px;\n  margin-top: 4px;\n}\n\n.artifact-meta {\n  text-align: right;\n  color: var(--mj-text-muted);\n  font-size: 12px;\n}\n\n/* Collections View */\n.collections-view {\n  display: grid;\n  grid-template-columns: 1fr 1.5fr;\n  gap: 15px;\n  padding: 15px;\n  overflow: hidden;\n}\n\n.collections-list {\n  overflow-y: auto;\n  border-right: 1px solid var(--mj-border-default);\n  padding-right: 15px;\n}\n\n.collection-item {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 12px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  margin-bottom: 10px;\n  cursor: pointer;\n  transition: all 0.2s;\n  background: var(--mj-bg-surface);\n}\n\n.collection-item:hover {\n  border-color: var(--mj-brand-primary);\n  background: var(--mj-bg-surface-sunken);\n}\n\n.collection-item.selected {\n  border-color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.collection-icon {\n  font-size: 24px;\n  color: var(--mj-brand-primary);\n}\n\n.collection-info {\n  flex: 1;\n}\n\n.collection-name {\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin-bottom: 4px;\n}\n\n.collection-description {\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n}\n\n.collection-artifacts {\n  overflow-y: auto;\n}\n\n.section-header {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 10px;\n  background: var(--mj-bg-surface-sunken);\n  border-radius: 4px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  margin-bottom: 10px;\n}\n\n/* Version Panel */\n.version-panel {\n  width: 350px;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  border-left: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n  background: var(--mj-bg-surface-sunken);\n}\n\n.version-content {\n  flex: 1;\n  overflow-y: auto;\n  padding: 15px;\n}\n\n.version-list {\n  margin-bottom: 20px;\n}\n\n.version-item {\n  padding: 12px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  margin-bottom: 10px;\n  cursor: pointer;\n  transition: all 0.2s;\n  background: var(--mj-bg-surface);\n}\n\n.version-item:hover {\n  border-color: var(--mj-brand-primary);\n  background: var(--mj-bg-surface-sunken);\n}\n\n.version-item.selected {\n  border-color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.version-number {\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin-bottom: 4px;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.version-number i {\n  font-size: 14px;\n  color: var(--mj-brand-primary);\n}\n\n.version-meta {\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n}\n\n.version-comments {\n  margin-top: 4px;\n  font-style: italic;\n  color: var(--mj-text-muted);\n}\n\n/* Preview Section */\n.preview-section {\n  border-top: 2px solid var(--mj-border-default);\n  padding-top: 15px;\n  margin-top: 15px;\n}\n\n.preview-header {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  margin-bottom: 12px;\n  padding-bottom: 8px;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.preview-content {\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  padding: 12px;\n}\n\n.preview-item {\n  margin-bottom: 8px;\n  font-size: 13px;\n}\n\n.preview-item strong {\n  color: var(--mj-text-secondary);\n  font-weight: 600;\n  margin-right: 6px;\n}\n\n.preview-error {\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  border: 1px solid var(--mj-status-warning);\n  border-radius: 4px;\n  padding: 10px;\n  color: var(--mj-status-warning);\n  font-size: 13px;\n}\n\n.preview-error i {\n  margin-right: 6px;\n}\n\n/* Loading & Empty States */\n.loading-state,\n.empty-state {\n  text-align: center;\n  padding: 40px;\n  color: var(--mj-text-secondary);\n}\n\n.loading-state i,\n.empty-state i {\n  font-size: 36px;\n  margin-bottom: 15px;\n  color: var(--mj-text-muted);\n}\n\n.loading-state i.fa-spin {\n  color: var(--mj-brand-primary);\n}\n\n.empty-state p {\n  margin: 5px 0;\n  font-size: 14px;\n}\n\n/* JSON Preview Section */\n.preview-json-section {\n  margin-top: 15px;\n  border-top: 1px solid var(--mj-border-default);\n  padding-top: 10px;\n}\n\n.preview-json-header {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px;\n  cursor: pointer;\n  background: var(--mj-bg-surface-sunken);\n  border-radius: 4px;\n  transition: background 0.2s;\n}\n\n.preview-json-header:hover {\n  background: var(--mj-bg-surface-sunken);\n}\n\n.preview-json-header i {\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n}\n\n.preview-json-header strong {\n  font-size: 13px;\n  color: var(--mj-text-primary);\n}\n\n.preview-json-content {\n  margin-top: 10px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 4px;\n  overflow: hidden;\n}\n"] }]
+    }], null, { Visible: [{
+            type: Input
+        }], Close: [{
+            type: Output
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ArtifactLoadDialogComponent, { className: "ArtifactLoadDialogComponent", filePath: "src/ComponentStudio/components/artifact-load-dialog.component.ts", lineNumber: 29 }); })();
 //# sourceMappingURL=artifact-load-dialog.component.js.map