@memberjunction/ng-artifacts 2.105.0

package/dist/lib/components/artifact-viewer-panel.component.js

@@ -0,0 +1,942 @@
+import { Component, Input, Output, EventEmitter, ViewChild } from '@angular/core';
+import { Metadata, RunView, LogError } from '@memberjunction/core';
+import { ArtifactMetadataEngine } from '@memberjunction/core-entities';
+import { MJNotificationService } from '@memberjunction/ng-notifications';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import { ArtifactTypePluginViewerComponent } from './artifact-type-plugin-viewer.component';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+import * as i2 from "@angular/forms";
+import * as i3 from "ngx-markdown";
+import * as i4 from "@memberjunction/ng-code-editor";
+import * as i5 from "./artifact-type-plugin-viewer.component";
+const _forTrack0 = ($index, $item) => $item.ID;
+function ArtifactViewerPanelComponent_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 4);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r0.displayDescription);
+} }
+function ArtifactViewerPanelComponent_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 19);
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵclassProp("open", ctx_r0.showVersionDropdown);
+} }
+function ArtifactViewerPanelComponent_Conditional_13_For_2_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 25);
+} }
+function ArtifactViewerPanelComponent_Conditional_13_For_2_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 22);
+    i0.ɵɵlistener("click", function ArtifactViewerPanelComponent_Conditional_13_For_2_Template_div_click_0_listener($event) { const version_r4 = i0.ɵɵrestoreView(_r3).$implicit; const ctx_r0 = i0.ɵɵnextContext(2); ctx_r0.selectVersion(version_r4); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelementStart(1, "span", 23);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "span", 24);
+    i0.ɵɵtext(4);
+    i0.ɵɵpipe(5, "date");
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(6, ArtifactViewerPanelComponent_Conditional_13_For_2_Conditional_6_Template, 1, 0, "i", 25);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const version_r4 = ctx.$implicit;
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵclassProp("selected", version_r4.VersionNumber === ctx_r0.selectedVersionNumber);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1("v", version_r4.VersionNumber, "");
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(5, 5, version_r4.__mj_CreatedAt, "short"));
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(version_r4.VersionNumber === ctx_r0.selectedVersionNumber ? 6 : -1);
+} }
+function ArtifactViewerPanelComponent_Conditional_13_Template(rf, ctx) { if (rf & 1) {
+    const _r2 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 20);
+    i0.ɵɵlistener("click", function ArtifactViewerPanelComponent_Conditional_13_Template_div_click_0_listener($event) { i0.ɵɵrestoreView(_r2); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵrepeaterCreate(1, ArtifactViewerPanelComponent_Conditional_13_For_2_Template, 7, 8, "div", 21, _forTrack0);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r0.allVersions);
+} }
+function ArtifactViewerPanelComponent_Conditional_14_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 26);
+    i0.ɵɵlistener("click", function ArtifactViewerPanelComponent_Conditional_14_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r5); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onSaveToLibrary()); });
+    i0.ɵɵelement(1, "i", 27);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵclassProp("in-collection", ctx_r0.isInCollection);
+    i0.ɵɵproperty("title", ctx_r0.isInCollection ? "View in Collection" : "Save to Collection");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r0.isInCollection ? "fas fa-bookmark" : "far fa-bookmark");
+} }
+function ArtifactViewerPanelComponent_Conditional_18_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 15);
+    i0.ɵɵelement(1, "i", 28);
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3, "Loading artifact...");
+    i0.ɵɵelementEnd()();
+} }
+function ArtifactViewerPanelComponent_Conditional_19_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 16);
+    i0.ɵɵelement(1, "i", 29);
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(ctx_r0.error);
+} }
+function ArtifactViewerPanelComponent_Conditional_20_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    const _r7 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 32);
+    i0.ɵɵlistener("click", function ArtifactViewerPanelComponent_Conditional_20_Conditional_2_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r7); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.setActiveTab("display")); });
+    i0.ɵɵelement(1, "i", 38);
+    i0.ɵɵtext(2, " Display ");
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵclassProp("active", ctx_r0.activeTab === "display");
+} }
+function ArtifactViewerPanelComponent_Conditional_20_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    const _r8 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 32);
+    i0.ɵɵlistener("click", function ArtifactViewerPanelComponent_Conditional_20_Conditional_3_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r8); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.setActiveTab("json")); });
+    i0.ɵɵelement(1, "i", 39);
+    i0.ɵɵtext(2, " JSON ");
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵclassProp("active", ctx_r0.activeTab === "json");
+} }
+function ArtifactViewerPanelComponent_Conditional_20_Conditional_8_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mj-artifact-type-plugin-viewer", 40);
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("artifactVersion", ctx_r0.artifactVersion)("artifactTypeName", ctx_r0.artifactTypeName)("contentType", ctx_r0.contentType)("readonly", true);
+} }
+function ArtifactViewerPanelComponent_Conditional_20_Conditional_8_Conditional_2_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 44);
+    i0.ɵɵelement(1, "markdown", 46);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(4);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("data", ctx_r0.displayMarkdown);
+} }
+function ArtifactViewerPanelComponent_Conditional_20_Conditional_8_Conditional_2_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "div", 45);
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(4);
+    i0.ɵɵproperty("innerHTML", ctx_r0.displayHtml, i0.ɵɵsanitizeHtml);
+} }
+function ArtifactViewerPanelComponent_Conditional_20_Conditional_8_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    const _r9 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 41)(1, "button", 42);
+    i0.ɵɵlistener("click", function ArtifactViewerPanelComponent_Conditional_20_Conditional_8_Conditional_2_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r9); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.onCopyDisplayContent()); });
+    i0.ɵɵelement(2, "i", 43);
+    i0.ɵɵtext(3, " Copy ");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵtemplate(4, ArtifactViewerPanelComponent_Conditional_20_Conditional_8_Conditional_2_Conditional_4_Template, 2, 1, "div", 44)(5, ArtifactViewerPanelComponent_Conditional_20_Conditional_8_Conditional_2_Conditional_5_Template, 1, 1, "div", 45);
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(4);
+    i0.ɵɵconditional(ctx_r0.displayMarkdown ? 4 : ctx_r0.displayHtml ? 5 : -1);
+} }
+function ArtifactViewerPanelComponent_Conditional_20_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 35);
+    i0.ɵɵtemplate(1, ArtifactViewerPanelComponent_Conditional_20_Conditional_8_Conditional_1_Template, 1, 4, "mj-artifact-type-plugin-viewer", 40)(2, ArtifactViewerPanelComponent_Conditional_20_Conditional_8_Conditional_2_Template, 6, 1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.hasPlugin && ctx_r0.artifactVersion && ctx_r0.artifactTypeName ? 1 : ctx_r0.displayMarkdown || ctx_r0.displayHtml ? 2 : -1);
+} }
+function ArtifactViewerPanelComponent_Conditional_20_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    const _r10 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 36)(1, "div", 47)(2, "button", 48);
+    i0.ɵɵlistener("click", function ArtifactViewerPanelComponent_Conditional_20_Conditional_9_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r10); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.onCopyToClipboard()); });
+    i0.ɵɵelement(3, "i", 43);
+    i0.ɵɵtext(4, " Copy ");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(5, "div", 49)(6, "mj-code-editor", 50);
+    i0.ɵɵtwoWayListener("ngModelChange", function ArtifactViewerPanelComponent_Conditional_20_Conditional_9_Template_mj_code_editor_ngModelChange_6_listener($event) { i0.ɵɵrestoreView(_r10); const ctx_r0 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r0.jsonContent, $event) || (ctx_r0.jsonContent = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(6);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r0.jsonContent);
+    i0.ɵɵproperty("language", "json")("readonly", true);
+} }
+function ArtifactViewerPanelComponent_Conditional_20_Conditional_10_Conditional_24_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 53)(1, "label");
+    i0.ɵɵtext(2, "Artifact Description");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "span");
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate(ctx_r0.artifact.Description);
+} }
+function ArtifactViewerPanelComponent_Conditional_20_Conditional_10_Conditional_25_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 53)(1, "label");
+    i0.ɵɵtext(2, "Version Description");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "span");
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate(ctx_r0.artifactVersion == null ? null : ctx_r0.artifactVersion.Description);
+} }
+function ArtifactViewerPanelComponent_Conditional_20_Conditional_10_Conditional_26_For_5_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span");
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const attr_r11 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(attr_r11.Value);
+} }
+function ArtifactViewerPanelComponent_Conditional_20_Conditional_10_Conditional_26_For_5_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 57);
+    i0.ɵɵtext(1, "Empty");
+    i0.ɵɵelementEnd();
+} }
+function ArtifactViewerPanelComponent_Conditional_20_Conditional_10_Conditional_26_For_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 56)(1, "label");
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(3, ArtifactViewerPanelComponent_Conditional_20_Conditional_10_Conditional_26_For_5_Conditional_3_Template, 2, 1, "span")(4, ArtifactViewerPanelComponent_Conditional_20_Conditional_10_Conditional_26_For_5_Conditional_4_Template, 2, 0, "span", 57);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const attr_r11 = ctx.$implicit;
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(attr_r11.Name);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(attr_r11.Value ? 3 : 4);
+} }
+function ArtifactViewerPanelComponent_Conditional_20_Conditional_10_Conditional_26_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 54)(1, "h4");
+    i0.ɵɵtext(2, "Version Attributes");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "div", 55);
+    i0.ɵɵrepeaterCreate(4, ArtifactViewerPanelComponent_Conditional_20_Conditional_10_Conditional_26_For_5_Template, 5, 2, "div", 56, _forTrack0);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(4);
+    i0.ɵɵrepeater(ctx_r0.filteredAttributes);
+} }
+function ArtifactViewerPanelComponent_Conditional_20_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 37)(1, "div", 51)(2, "div", 52)(3, "label");
+    i0.ɵɵtext(4, "Type");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "span");
+    i0.ɵɵtext(6);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(7, "div", 52)(8, "label");
+    i0.ɵɵtext(9, "Version");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(10, "span");
+    i0.ɵɵtext(11);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(12, "div", 52)(13, "label");
+    i0.ɵɵtext(14, "Created");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(15, "span");
+    i0.ɵɵtext(16);
+    i0.ɵɵpipe(17, "date");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(18, "div", 52)(19, "label");
+    i0.ɵɵtext(20, "Updated");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(21, "span");
+    i0.ɵɵtext(22);
+    i0.ɵɵpipe(23, "date");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵtemplate(24, ArtifactViewerPanelComponent_Conditional_20_Conditional_10_Conditional_24_Template, 5, 1, "div", 53)(25, ArtifactViewerPanelComponent_Conditional_20_Conditional_10_Conditional_25_Template, 5, 1, "div", 53);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(26, ArtifactViewerPanelComponent_Conditional_20_Conditional_10_Conditional_26_Template, 6, 0, "div", 54);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(6);
+    i0.ɵɵtextInterpolate(ctx_r0.artifact.Type);
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate((ctx_r0.artifactVersion == null ? null : ctx_r0.artifactVersion.VersionNumber) || 1);
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(17, 7, ctx_r0.artifact.__mj_CreatedAt, "short"));
+    i0.ɵɵadvance(6);
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(23, 10, ctx_r0.artifactVersion == null ? null : ctx_r0.artifactVersion.__mj_UpdatedAt, "short"));
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r0.artifact.Description ? 24 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional((ctx_r0.artifactVersion == null ? null : ctx_r0.artifactVersion.Description) && ctx_r0.artifact.Description && (ctx_r0.artifactVersion == null ? null : ctx_r0.artifactVersion.Description) !== ctx_r0.artifact.Description ? 25 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.filteredAttributes.length > 0 ? 26 : -1);
+} }
+function ArtifactViewerPanelComponent_Conditional_20_Template(rf, ctx) { if (rf & 1) {
+    const _r6 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 17)(1, "div", 30);
+    i0.ɵɵtemplate(2, ArtifactViewerPanelComponent_Conditional_20_Conditional_2_Template, 3, 2, "button", 31)(3, ArtifactViewerPanelComponent_Conditional_20_Conditional_3_Template, 3, 2, "button", 31);
+    i0.ɵɵelementStart(4, "button", 32);
+    i0.ɵɵlistener("click", function ArtifactViewerPanelComponent_Conditional_20_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r6); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.setActiveTab("details")); });
+    i0.ɵɵelement(5, "i", 33);
+    i0.ɵɵtext(6, " Details ");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(7, "div", 34);
+    i0.ɵɵtemplate(8, ArtifactViewerPanelComponent_Conditional_20_Conditional_8_Template, 3, 1, "div", 35)(9, ArtifactViewerPanelComponent_Conditional_20_Conditional_9_Template, 7, 3, "div", 36)(10, ArtifactViewerPanelComponent_Conditional_20_Conditional_10_Template, 27, 13, "div", 37);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r0.hasDisplayTab ? 2 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.hasJsonTab ? 3 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("active", ctx_r0.activeTab === "details");
+    i0.ɵɵadvance(4);
+    i0.ɵɵconditional(ctx_r0.activeTab === "display" && ctx_r0.hasDisplayTab ? 8 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.activeTab === "json" && ctx_r0.hasJsonTab ? 9 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.activeTab === "details" ? 10 : -1);
+} }
+function ArtifactViewerPanelComponent_Conditional_21_For_16_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "option", 66);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const collection_r13 = ctx.$implicit;
+    i0.ɵɵproperty("ngValue", collection_r13.ID);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(collection_r13.Name);
+} }
+function ArtifactViewerPanelComponent_Conditional_21_Conditional_26_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 28);
+} }
+function ArtifactViewerPanelComponent_Conditional_21_Conditional_27_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 71);
+} }
+function ArtifactViewerPanelComponent_Conditional_21_Conditional_33_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 28);
+    i0.ɵɵtext(1, " Saving... ");
+} }
+function ArtifactViewerPanelComponent_Conditional_21_Conditional_34_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 75);
+    i0.ɵɵtext(1, " Save to Collection ");
+} }
+function ArtifactViewerPanelComponent_Conditional_21_Template(rf, ctx) { if (rf & 1) {
+    const _r12 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 58);
+    i0.ɵɵlistener("click", function ArtifactViewerPanelComponent_Conditional_21_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r12); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.cancelLibraryDialog()); });
+    i0.ɵɵelementStart(1, "div", 59);
+    i0.ɵɵlistener("click", function ArtifactViewerPanelComponent_Conditional_21_Template_div_click_1_listener($event) { i0.ɵɵrestoreView(_r12); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelementStart(2, "div", 60)(3, "h3");
+    i0.ɵɵelement(4, "i", 61);
+    i0.ɵɵtext(5, " Save to Collection ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "button", 62);
+    i0.ɵɵlistener("click", function ArtifactViewerPanelComponent_Conditional_21_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r12); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.cancelLibraryDialog()); });
+    i0.ɵɵelement(7, "i", 13);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(8, "div", 63)(9, "div", 64)(10, "label");
+    i0.ɵɵtext(11, "Select Collection");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(12, "select", 65);
+    i0.ɵɵtwoWayListener("ngModelChange", function ArtifactViewerPanelComponent_Conditional_21_Template_select_ngModelChange_12_listener($event) { i0.ɵɵrestoreView(_r12); const ctx_r0 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r0.selectedCollectionId, $event) || (ctx_r0.selectedCollectionId = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementStart(13, "option", 66);
+    i0.ɵɵtext(14, "-- Choose a collection --");
+    i0.ɵɵelementEnd();
+    i0.ɵɵrepeaterCreate(15, ArtifactViewerPanelComponent_Conditional_21_For_16_Template, 2, 2, "option", 66, _forTrack0);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(17, "div", 67)(18, "span");
+    i0.ɵɵtext(19, "OR");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(20, "div", 64)(21, "label");
+    i0.ɵɵtext(22, "Create New Collection");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(23, "div", 68)(24, "input", 69);
+    i0.ɵɵtwoWayListener("ngModelChange", function ArtifactViewerPanelComponent_Conditional_21_Template_input_ngModelChange_24_listener($event) { i0.ɵɵrestoreView(_r12); const ctx_r0 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r0.newCollectionName, $event) || (ctx_r0.newCollectionName = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("keyup.enter", function ArtifactViewerPanelComponent_Conditional_21_Template_input_keyup_enter_24_listener() { i0.ɵɵrestoreView(_r12); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.createNewCollection()); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(25, "button", 70);
+    i0.ɵɵlistener("click", function ArtifactViewerPanelComponent_Conditional_21_Template_button_click_25_listener() { i0.ɵɵrestoreView(_r12); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.createNewCollection()); });
+    i0.ɵɵtemplate(26, ArtifactViewerPanelComponent_Conditional_21_Conditional_26_Template, 1, 0, "i", 28)(27, ArtifactViewerPanelComponent_Conditional_21_Conditional_27_Template, 1, 0, "i", 71);
+    i0.ɵɵtext(28, " Create ");
+    i0.ɵɵelementEnd()()()();
+    i0.ɵɵelementStart(29, "div", 72)(30, "button", 73);
+    i0.ɵɵlistener("click", function ArtifactViewerPanelComponent_Conditional_21_Template_button_click_30_listener() { i0.ɵɵrestoreView(_r12); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.cancelLibraryDialog()); });
+    i0.ɵɵtext(31, " Cancel ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(32, "button", 74);
+    i0.ɵɵlistener("click", function ArtifactViewerPanelComponent_Conditional_21_Template_button_click_32_listener() { i0.ɵɵrestoreView(_r12); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.saveToSelectedCollection()); });
+    i0.ɵɵtemplate(33, ArtifactViewerPanelComponent_Conditional_21_Conditional_33_Template, 2, 0)(34, ArtifactViewerPanelComponent_Conditional_21_Conditional_34_Template, 2, 0);
+    i0.ɵɵelementEnd()()()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(12);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r0.selectedCollectionId);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngValue", null);
+    i0.ɵɵadvance(2);
+    i0.ɵɵrepeater(ctx_r0.collections);
+    i0.ɵɵadvance(9);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r0.newCollectionName);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("disabled", ctx_r0.isCreatingCollection || !ctx_r0.newCollectionName.trim());
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.isCreatingCollection ? 26 : 27);
+    i0.ɵɵadvance(6);
+    i0.ɵɵproperty("disabled", !ctx_r0.selectedCollectionId || ctx_r0.isSavingToLibrary);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.isSavingToLibrary ? 33 : 34);
+} }
+export class ArtifactViewerPanelComponent {
+    artifactId;
+    currentUser;
+    environmentId;
+    versionNumber; // Version to display
+    showSaveToCollection = true; // Control whether Save to Collection button is shown
+    refreshTrigger;
+    closed = new EventEmitter();
+    pluginViewer;
+    destroy$ = new Subject();
+    artifact = null;
+    artifactVersion = null;
+    allVersions = [];
+    selectedVersionNumber = 1;
+    isLoading = true;
+    error = null;
+    jsonContent = '';
+    showVersionDropdown = false;
+    showLibraryDialog = false;
+    collections = [];
+    selectedCollectionId = null;
+    newCollectionName = '';
+    isCreatingCollection = false;
+    isSavingToLibrary = false;
+    artifactCollections = [];
+    primaryCollection = null;
+    // Tabbed interface
+    activeTab = 'display';
+    displayMarkdown = null;
+    displayHtml = null;
+    versionAttributes = [];
+    artifactTypeDriverClass = null;
+    // Cache plugin state to avoid losing it when switching tabs
+    cachedPluginShouldShowRaw = false;
+    cachedPluginIsElevated = false;
+    async ngOnInit() {
+        // Subscribe to refresh trigger for dynamic version changes
+        if (this.refreshTrigger) {
+            this.refreshTrigger.pipe(takeUntil(this.destroy$)).subscribe(async (data) => {
+                if (data.artifactId === this.artifactId) {
+                    console.log(`📦 Refreshing artifact viewer to version ${data.versionNumber}`);
+                    // Reload all versions to get any new ones
+                    await this.loadArtifact(data.versionNumber);
+                }
+            });
+        }
+        // Load artifact with specified version if provided
+        await this.loadArtifact(this.versionNumber);
+    }
+    async ngOnChanges(changes) {
+        // Reload artifact when artifactId changes
+        if (changes['artifactId'] && !changes['artifactId'].firstChange) {
+            await this.loadArtifact(this.versionNumber);
+        }
+        // Switch to new version when versionNumber changes (but artifactId stays the same)
+        if (changes['versionNumber'] && !changes['versionNumber'].firstChange) {
+            const newVersionNumber = changes['versionNumber'].currentValue;
+            if (newVersionNumber != null) {
+                console.log(`📦 Version number changed to ${newVersionNumber}, switching version`);
+                // Check if we already have this version loaded (avoid reload if possible)
+                const targetVersion = this.allVersions.find(v => v.VersionNumber === newVersionNumber);
+                if (targetVersion) {
+                    // Just switch to the version we already have
+                    this.artifactVersion = targetVersion;
+                    this.selectedVersionNumber = targetVersion.VersionNumber || 1;
+                    this.jsonContent = targetVersion.Content || '{}';
+                    console.log(`📦 Switched to cached version ${this.selectedVersionNumber}`);
+                    // Load version attributes
+                    await this.loadVersionAttributes();
+                }
+                else {
+                    // Need to reload to get this version (shouldn't normally happen)
+                    await this.loadArtifact(newVersionNumber);
+                }
+            }
+        }
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    async loadArtifact(targetVersionNumber) {
+        try {
+            this.isLoading = true;
+            this.error = null;
+            // Reset cached plugin state when loading new artifact
+            this.cachedPluginShouldShowRaw = false;
+            this.cachedPluginIsElevated = false;
+            const md = new Metadata();
+            // Load artifact
+            this.artifact = await md.GetEntityObject('MJ: Artifacts', this.currentUser);
+            const loaded = await this.artifact.Load(this.artifactId);
+            if (!loaded) {
+                this.error = 'Failed to load artifact';
+                return;
+            }
+            // Load artifact type to check for DriverClass
+            await this.loadArtifactType();
+            // Load ALL versions
+            const rv = new RunView();
+            const result = await rv.RunView({
+                EntityName: 'MJ: Artifact Versions',
+                ExtraFilter: `ArtifactID='${this.artifactId}'`,
+                OrderBy: 'VersionNumber DESC',
+                ResultType: 'entity_object'
+            }, this.currentUser);
+            if (result.Success && result.Results && result.Results.length > 0) {
+                this.allVersions = result.Results;
+                // If target version specified, try to load it
+                if (targetVersionNumber) {
+                    const targetVersion = this.allVersions.find(v => v.VersionNumber === targetVersionNumber);
+                    if (targetVersion) {
+                        console.log(`📦 Loading specified version ${targetVersionNumber}`);
+                        this.artifactVersion = targetVersion;
+                        this.selectedVersionNumber = targetVersion.VersionNumber || 1;
+                        this.jsonContent = targetVersion.Content || '{}';
+                    }
+                    else {
+                        console.warn(`📦 Version ${targetVersionNumber} not found, defaulting to latest`);
+                        // Target version not found, default to latest
+                        this.artifactVersion = result.Results[0];
+                        this.selectedVersionNumber = this.artifactVersion.VersionNumber || 1;
+                        this.jsonContent = this.artifactVersion.Content || '{}';
+                    }
+                }
+                else {
+                    // No target version, default to latest version (first in DESC order)
+                    this.artifactVersion = result.Results[0];
+                    this.selectedVersionNumber = this.artifactVersion.VersionNumber || 1;
+                    this.jsonContent = this.artifactVersion.Content || '{}';
+                }
+                // Load version attributes
+                await this.loadVersionAttributes();
+                // Load collection associations
+                await this.loadCollectionAssociations();
+                console.log(`📦 Loaded ${this.allVersions.length} versions for artifact ${this.artifactId}, showing v${this.selectedVersionNumber}`);
+            }
+            else {
+                this.error = 'No artifact version found';
+            }
+        }
+        catch (err) {
+            console.error('Error loading artifact:', err);
+            this.error = 'Error loading artifact: ' + err.message;
+        }
+        finally {
+            this.isLoading = false;
+        }
+    }
+    async loadArtifactType() {
+        if (!this.artifact?.Type) {
+            return;
+        }
+        try {
+            await ArtifactMetadataEngine.Instance.Config(false, this.currentUser);
+            const artifactType = ArtifactMetadataEngine.Instance.FindArtifactType(this.artifact.Type);
+            if (artifactType) {
+                this.artifactTypeDriverClass = artifactType.DriverClass;
+                console.log(`📦 Loaded artifact type "${this.artifact.Type}", DriverClass: ${this.artifactTypeDriverClass || 'none'}`);
+            }
+        }
+        catch (err) {
+            console.error('Error loading artifact type:', err);
+            // Don't fail the whole load if we can't get the artifact type
+        }
+    }
+    async loadVersionAttributes() {
+        if (!this.artifactVersion)
+            return;
+        try {
+            const rv = new RunView();
+            const result = await rv.RunView({
+                EntityName: 'MJ: Artifact Version Attributes',
+                ExtraFilter: `ArtifactVersionID='${this.artifactVersion.ID}'`,
+                ResultType: 'entity_object'
+            }, this.currentUser);
+            if (result.Success && result.Results) {
+                this.versionAttributes = result.Results;
+                // Check for displayMarkdown or displayHtml attributes
+                const displayMarkdownAttr = this.versionAttributes.find(a => a.Name?.toLowerCase() === 'displaymarkdown');
+                const displayHtmlAttr = this.versionAttributes.find(a => a.Name?.toLowerCase() === 'displayhtml');
+                // Parse values - they might be JSON-encoded strings
+                this.displayMarkdown = this.parseAttributeValue(displayMarkdownAttr?.Value);
+                this.displayHtml = this.parseAttributeValue(displayHtmlAttr?.Value);
+                // Default to display tab if we have a plugin or extracted display content
+                // Otherwise default to JSON tab for JSON types, or Details tab as last resort
+                if (this.hasDisplayTab) {
+                    this.activeTab = 'display';
+                }
+                else if (this.jsonContent) {
+                    this.activeTab = 'json';
+                }
+                else {
+                    this.activeTab = 'details';
+                }
+                console.log(`📦 Loaded ${this.versionAttributes.length} attributes, displayMarkdown=${!!this.displayMarkdown}, displayHtml=${!!this.displayHtml}, hasDisplayTab=${this.hasDisplayTab}, activeTab=${this.activeTab}`);
+            }
+        }
+        catch (err) {
+            console.error('Error loading version attributes:', err);
+        }
+    }
+    get displayName() {
+        if (this.artifactVersion?.Name) {
+            return this.artifactVersion.Name;
+        }
+        return this.artifact?.Name || 'Artifact';
+    }
+    get displayDescription() {
+        if (this.artifactVersion?.Description) {
+            return this.artifactVersion.Description;
+        }
+        return this.artifact?.Description || null;
+    }
+    get hasDisplayTab() {
+        // Show Display tab if:
+        // 1. We have a plugin for this artifact type (check if artifact type exists), OR
+        // 2. We have displayMarkdown or displayHtml attributes from extract rules
+        return this.hasPlugin || !!this.displayMarkdown || !!this.displayHtml;
+    }
+    get hasPlugin() {
+        // Check if the artifact type has a DriverClass configured
+        // If DriverClass is set, we have a plugin available
+        return !!this.artifactTypeDriverClass;
+    }
+    get hasJsonTab() {
+        // Try to get fresh plugin state if plugin viewer is available
+        const pluginInstance = this.pluginViewer?.pluginInstance;
+        if (pluginInstance) {
+            // Update cache with current values
+            this.cachedPluginShouldShowRaw = pluginInstance.parentShouldShowRawContent;
+            this.cachedPluginIsElevated = pluginInstance.isShowingElevatedDisplay;
+        }
+        // Use cached value (or current value if plugin is available)
+        // This ensures the JSON tab doesn't disappear when switching to it
+        return this.cachedPluginShouldShowRaw;
+    }
+    get artifactTypeName() {
+        return this.artifact?.Type || '';
+    }
+    get contentType() {
+        // Try to get content type from artifact type or attributes
+        const contentTypeAttr = this.versionAttributes.find(a => a.Name?.toLowerCase() === 'contenttype');
+        return contentTypeAttr?.Value || undefined;
+    }
+    get filteredAttributes() {
+        // Filter out displayMarkdown and displayHtml as they're shown in the Display tab
+        return this.versionAttributes.filter(attr => {
+            const name = attr.Name?.toLowerCase();
+            return name !== 'displaymarkdown' && name !== 'displayhtml';
+        });
+    }
+    setActiveTab(tab) {
+        this.activeTab = tab;
+    }
+    parseAttributeValue(value) {
+        if (!value)
+            return null;
+        // Check if it's a JSON-encoded string (starts and ends with quotes)
+        if (value.startsWith('"') && value.endsWith('"')) {
+            try {
+                return JSON.parse(value);
+            }
+            catch (e) {
+                console.warn('Failed to parse attribute value as JSON:', e);
+                return value;
+            }
+        }
+        return value;
+    }
+    async loadCollectionAssociations() {
+        if (!this.artifactId)
+            return;
+        try {
+            const rv = new RunView();
+            const result = await rv.RunView({
+                EntityName: 'MJ: Collection Artifacts',
+                ExtraFilter: `ArtifactID='${this.artifactId}'`,
+                ResultType: 'entity_object'
+            }, this.currentUser);
+            if (result.Success && result.Results) {
+                this.artifactCollections = result.Results;
+                // Load the primary collection details if exists
+                if (this.artifactCollections.length > 0) {
+                    const collectionId = this.artifactCollections[0].CollectionID;
+                    const md = new Metadata();
+                    this.primaryCollection = await md.GetEntityObject('MJ: Collections', this.currentUser);
+                    await this.primaryCollection.Load(collectionId);
+                    console.log(`📦 Artifact is in ${this.artifactCollections.length} collection(s)`);
+                }
+                else {
+                    this.primaryCollection = null;
+                }
+            }
+        }
+        catch (err) {
+            console.error('Error loading collection associations:', err);
+        }
+    }
+    get isInCollection() {
+        return this.artifactCollections.length > 0;
+    }
+    onCopyToClipboard() {
+        if (this.jsonContent) {
+            navigator.clipboard.writeText(this.jsonContent);
+        }
+    }
+    onCopyDisplayContent() {
+        const content = this.displayMarkdown || this.displayHtml;
+        if (content) {
+            navigator.clipboard.writeText(content).then(() => {
+                console.log('✅ Copied display content to clipboard');
+            }).catch(err => {
+                console.error('Failed to copy to clipboard:', err);
+            });
+        }
+    }
+    toggleVersionDropdown() {
+        if (this.allVersions.length > 1) {
+            this.showVersionDropdown = !this.showVersionDropdown;
+        }
+    }
+    async selectVersion(version) {
+        this.artifactVersion = version;
+        this.selectedVersionNumber = version.VersionNumber || 1;
+        this.jsonContent = version.Content || '{}';
+        this.showVersionDropdown = false;
+        // Load attributes for the selected version
+        await this.loadVersionAttributes();
+        console.log(`📦 Switched to version ${this.selectedVersionNumber}`);
+    }
+    async onSaveToLibrary() {
+        // If already in a collection, navigate to that collection
+        if (this.isInCollection && this.primaryCollection) {
+            // TODO: Implement navigation to collection view
+            // For now, just log - will need ConversationStateService or similar to navigate
+            console.log('Navigate to collection:', this.primaryCollection.Name, this.primaryCollection.ID);
+            MJNotificationService.Instance.CreateSimpleNotification(`This artifact is saved in collection: ${this.primaryCollection.Name}`, 'info', 3000);
+            return;
+        }
+        // If not in a collection, show the save dialog
+        try {
+            // Load user's collections
+            const rv = new RunView();
+            const result = await rv.RunView({
+                EntityName: 'MJ: Collections',
+                ExtraFilter: `EnvironmentID='${this.environmentId}'`,
+                OrderBy: 'Name',
+                ResultType: 'entity_object'
+            }, this.currentUser);
+            if (result.Success) {
+                this.collections = result.Results || [];
+                this.showLibraryDialog = true;
+            }
+            else {
+                console.error('Failed to load collections:', result.ErrorMessage);
+                MJNotificationService.Instance.CreateSimpleNotification('Failed to load collections. Please try again.', 'error');
+            }
+        }
+        catch (err) {
+            console.error('Error loading collections:', err);
+            MJNotificationService.Instance.CreateSimpleNotification('Error loading collections. Please try again.', 'error');
+        }
+    }
+    async createNewCollection() {
+        if (!this.newCollectionName.trim()) {
+            MJNotificationService.Instance.CreateSimpleNotification('Please enter a collection name', 'warning', 2000);
+            return;
+        }
+        try {
+            this.isCreatingCollection = true;
+            const md = new Metadata();
+            const collection = await md.GetEntityObject('MJ: Collections', this.currentUser);
+            collection.EnvironmentID = this.environmentId;
+            collection.Name = this.newCollectionName.trim();
+            collection.Description = 'Created from conversation';
+            const saved = await collection.Save();
+            if (saved) {
+                this.collections.push(collection);
+                this.selectedCollectionId = collection.ID;
+                this.newCollectionName = '';
+                console.log('✅ Created new collection:', collection.Name);
+                MJNotificationService.Instance.CreateSimpleNotification(`Collection "${collection.Name}" created successfully!`, 'success', 3000);
+            }
+            else {
+                MJNotificationService.Instance.CreateSimpleNotification('Failed to create collection. Please try again.', 'error');
+            }
+        }
+        catch (err) {
+            console.error('Error creating collection:', err);
+            LogError(err);
+            MJNotificationService.Instance.CreateSimpleNotification('Error creating collection. Please try again.', 'error');
+        }
+        finally {
+            this.isCreatingCollection = false;
+        }
+    }
+    async saveToSelectedCollection() {
+        if (!this.selectedCollectionId) {
+            MJNotificationService.Instance.CreateSimpleNotification('Please select a collection', 'warning', 2000);
+            return;
+        }
+        if (!this.artifactId) {
+            MJNotificationService.Instance.CreateSimpleNotification('No artifact to save', 'error');
+            return;
+        }
+        try {
+            this.isSavingToLibrary = true;
+            // Check if artifact already exists in this collection
+            const rv = new RunView();
+            const existingResult = await rv.RunView({
+                EntityName: 'MJ: Collection Artifacts',
+                ExtraFilter: `CollectionID='${this.selectedCollectionId}' AND ArtifactID='${this.artifactId}'`,
+                ResultType: 'entity_object'
+            }, this.currentUser);
+            if (existingResult.Success && existingResult.Results && existingResult.Results.length > 0) {
+                MJNotificationService.Instance.CreateSimpleNotification('This artifact is already in the selected collection', 'info', 3000);
+                this.showLibraryDialog = false;
+                return;
+            }
+            // Create junction record
+            const md = new Metadata();
+            const collectionArtifact = await md.GetEntityObject('MJ: Collection Artifacts', this.currentUser);
+            collectionArtifact.CollectionID = this.selectedCollectionId;
+            collectionArtifact.ArtifactID = this.artifactId;
+            collectionArtifact.Sequence = 0; // Could calculate max sequence + 1 if needed
+            const saved = await collectionArtifact.Save();
+            if (saved) {
+                const collectionName = this.collections.find(c => c.ID === this.selectedCollectionId)?.Name || 'collection';
+                console.log(`✅ Saved artifact to ${collectionName}`);
+                MJNotificationService.Instance.CreateSimpleNotification(`Artifact saved to ${collectionName} successfully!`, 'success', 3000);
+                this.showLibraryDialog = false;
+                this.selectedCollectionId = null;
+                // Reload collection associations to update the bookmark icon state
+                await this.loadCollectionAssociations();
+            }
+            else {
+                MJNotificationService.Instance.CreateSimpleNotification('Failed to save artifact to collection. Please try again.', 'error');
+            }
+        }
+        catch (err) {
+            console.error('Error saving to collection:', err);
+            LogError(err);
+            MJNotificationService.Instance.CreateSimpleNotification('Error saving artifact to collection. Please try again.', 'error');
+        }
+        finally {
+            this.isSavingToLibrary = false;
+        }
+    }
+    cancelLibraryDialog() {
+        this.showLibraryDialog = false;
+        this.selectedCollectionId = null;
+        this.newCollectionName = '';
+    }
+    onClose() {
+        this.closed.emit();
+    }
+    static ɵfac = function ArtifactViewerPanelComponent_Factory(t) { return new (t || ArtifactViewerPanelComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ArtifactViewerPanelComponent, selectors: [["mj-artifact-viewer-panel"]], viewQuery: function ArtifactViewerPanelComponent_Query(rf, ctx) { if (rf & 1) {
+            i0.ɵɵviewQuery(ArtifactTypePluginViewerComponent, 5);
+        } if (rf & 2) {
+            let _t;
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.pluginViewer = _t.first);
+        } }, inputs: { artifactId: "artifactId", currentUser: "currentUser", environmentId: "environmentId", versionNumber: "versionNumber", showSaveToCollection: "showSaveToCollection", refreshTrigger: "refreshTrigger" }, outputs: { closed: "closed" }, features: [i0.ɵɵNgOnChangesFeature], decls: 22, vars: 12, consts: [[1, "artifact-viewer-panel"], [1, "panel-header"], [1, "panel-header-left"], [1, "fas", "fa-cube"], [1, "header-description"], [1, "panel-header-right"], [1, "version-selector", 3, "click"], [1, "fas", "fa-history"], [1, "version-label"], [1, "fas", "fa-chevron-down", "dropdown-icon", 3, "open"], [1, "version-dropdown"], [1, "save-to-collection-btn", 3, "in-collection", "title"], ["title", "Close", 1, "close-btn", 3, "click"], [1, "fas", "fa-times"], [1, "panel-content"], [1, "loading-state"], [1, "error-state"], [1, "artifact-content-wrapper"], [1, "modal-overlay"], [1, "fas", "fa-chevron-down", "dropdown-icon"], [1, "version-dropdown", 3, "click"], [1, "version-option", 3, "selected"], [1, "version-option", 3, "click"], [1, "version-number"], [1, "version-date"], [1, "fas", "fa-check"], [1, "save-to-collection-btn", 3, "click", "title"], [3, "ngClass"], [1, "fas", "fa-spinner", "fa-spin"], [1, "fas", "fa-exclamation-triangle"], [1, "tab-navigation"], [1, "tab-btn", 3, "active"], [1, "tab-btn", 3, "click"], [1, "fas", "fa-info-circle"], [1, "tab-content"], [1, "display-content"], [1, "json-viewer"], [1, "details-content"], [1, "fas", "fa-eye"], [1, "fas", "fa-code"], [3, "artifactVersion", "artifactTypeName", "contentType", "readonly"], [1, "display-toolbar"], ["title", "Copy Content", 1, "btn-icon", 3, "click"], [1, "fas", "fa-copy"], [1, "markdown-content"], [1, "html-content", 3, "innerHTML"], [3, "data"], [1, "json-toolbar"], ["title", "Copy JSON", 1, "btn-icon", 3, "click"], [1, "json-editor-container"], [2, "width", "100%", "height", "100%", 3, "ngModelChange", "ngModel", "language", "readonly"], [1, "artifact-meta"], [1, "meta-item"], [1, "meta-item", "full-width"], [1, "attributes-section"], [1, "attributes-list"], [1, "attribute-item"], [1, "attribute-empty-pill"], [1, "modal-overlay", 3, "click"], [1, "modal-content", "library-modal", 3, "click"], [1, "modal-header"], [1, "fas", "fa-bookmark"], [1, "close-btn", 3, "click"], [1, "modal-body"], [1, "form-section"], [1, "form-select", 3, "ngModelChange", "ngModel"], [3, "ngValue"], [1, "divider"], [1, "create-collection-row"], ["type", "text", "placeholder", "Enter collection name", 1, "form-input", 3, "ngModelChange", "keyup.enter", "ngModel"], [1, "btn", "btn-secondary", 3, "click", "disabled"], [1, "fas", "fa-plus"], [1, "modal-footer"], [1, "btn", "btn-secondary", 3, "click"], [1, "btn", "btn-primary", 3, "click", "disabled"], [1, "fas", "fa-save"]], template: function ArtifactViewerPanelComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2)(3, "h3");
+            i0.ɵɵelement(4, "i", 3);
+            i0.ɵɵtext(5);
+            i0.ɵɵelementEnd();
+            i0.ɵɵtemplate(6, ArtifactViewerPanelComponent_Conditional_6_Template, 2, 1, "p", 4);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(7, "div", 5)(8, "div", 6);
+            i0.ɵɵlistener("click", function ArtifactViewerPanelComponent_Template_div_click_8_listener() { return ctx.toggleVersionDropdown(); });
+            i0.ɵɵelement(9, "i", 7);
+            i0.ɵɵelementStart(10, "span", 8);
+            i0.ɵɵtext(11);
+            i0.ɵɵelementEnd();
+            i0.ɵɵtemplate(12, ArtifactViewerPanelComponent_Conditional_12_Template, 1, 2, "i", 9)(13, ArtifactViewerPanelComponent_Conditional_13_Template, 3, 0, "div", 10);
+            i0.ɵɵelementEnd();
+            i0.ɵɵtemplate(14, ArtifactViewerPanelComponent_Conditional_14_Template, 2, 4, "button", 11);
+            i0.ɵɵelementStart(15, "button", 12);
+            i0.ɵɵlistener("click", function ArtifactViewerPanelComponent_Template_button_click_15_listener() { return ctx.onClose(); });
+            i0.ɵɵelement(16, "i", 13);
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵelementStart(17, "div", 14);
+            i0.ɵɵtemplate(18, ArtifactViewerPanelComponent_Conditional_18_Template, 4, 0, "div", 15)(19, ArtifactViewerPanelComponent_Conditional_19_Template, 4, 1, "div", 16)(20, ArtifactViewerPanelComponent_Conditional_20_Template, 11, 7, "div", 17);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵtemplate(21, ArtifactViewerPanelComponent_Conditional_21_Template, 35, 7, "div", 18);
+        } if (rf & 2) {
+            i0.ɵɵadvance(5);
+            i0.ɵɵtextInterpolate1(" ", ctx.displayName, " ");
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.displayDescription ? 6 : -1);
+            i0.ɵɵadvance(2);
+            i0.ɵɵclassProp("clickable", ctx.allVersions.length > 1);
+            i0.ɵɵadvance(3);
+            i0.ɵɵtextInterpolate1("v", ctx.selectedVersionNumber, "");
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.allVersions.length > 1 ? 12 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.showVersionDropdown ? 13 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.showSaveToCollection ? 14 : -1);
+            i0.ɵɵadvance(4);
+            i0.ɵɵconditional(ctx.isLoading ? 18 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.error ? 19 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(!ctx.isLoading && !ctx.error && ctx.artifact ? 20 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.showLibraryDialog ? 21 : -1);
+        } }, dependencies: [i1.NgClass, i2.NgSelectOption, i2.ɵNgSelectMultipleOption, i2.DefaultValueAccessor, i2.SelectControlValueAccessor, i2.NgControlStatus, i2.NgModel, i3.MarkdownComponent, i4.CodeEditorComponent, i5.ArtifactTypePluginViewerComponent, i1.DatePipe], styles: [".artifact-viewer-panel[_ngcontent-%COMP%] {\n  height: 100%;\n  background: white;\n  border-left: 1px solid #E5E7EB;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n\n.panel-header[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 12px 16px;\n  border-bottom: 1px solid #E5E7EB;\n  background: white;\n  flex-shrink: 0;\n}\n\n.panel-header-left[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n}\n\n.panel-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 14px;\n  font-weight: 600;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.panel-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #6366F1;\n  flex-shrink: 0;\n}\n\n.header-description[_ngcontent-%COMP%] {\n  margin: 4px 0 0 0;\n  font-size: 12px;\n  color: #6B7280;\n  font-weight: normal;\n}\n\n.panel-header-right[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex-shrink: 0;\n}\n\n.version-selector[_ngcontent-%COMP%] {\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 10px;\n  background: #F3F4F6;\n  border-radius: 12px;\n  font-size: 12px;\n  color: #6B7280;\n  font-weight: 500;\n  transition: all 0.2s;\n}\n\n.version-selector.clickable[_ngcontent-%COMP%] {\n  cursor: pointer;\n}\n\n.version-selector.clickable[_ngcontent-%COMP%]:hover {\n  background: #E5E7EB;\n}\n\n.version-selector[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 11px;\n}\n\n.version-selector[_ngcontent-%COMP%]   .dropdown-icon[_ngcontent-%COMP%] {\n  margin-left: 2px;\n  transition: transform 0.2s;\n}\n\n.version-selector[_ngcontent-%COMP%]   .dropdown-icon.open[_ngcontent-%COMP%] {\n  transform: rotate(180deg);\n}\n\n.version-label[_ngcontent-%COMP%] {\n  font-family: monospace;\n}\n\n.version-dropdown[_ngcontent-%COMP%] {\n  position: absolute;\n  top: calc(100% + 4px);\n  right: 0;\n  min-width: 200px;\n  background: white;\n  border: 1px solid #E5E7EB;\n  border-radius: 8px;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n  z-index: 1000;\n  overflow: hidden;\n}\n\n.version-option[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 10px 12px;\n  cursor: pointer;\n  transition: background 0.15s;\n  font-size: 13px;\n}\n\n.version-option[_ngcontent-%COMP%]:hover {\n  background: #F9FAFB;\n}\n\n.version-option.selected[_ngcontent-%COMP%] {\n  background: #EEF2FF;\n  color: #4F46E5;\n}\n\n.version-option[_ngcontent-%COMP%]   .version-number[_ngcontent-%COMP%] {\n  font-family: monospace;\n  font-weight: 600;\n  min-width: 35px;\n}\n\n.version-option[_ngcontent-%COMP%]   .version-date[_ngcontent-%COMP%] {\n  flex: 1;\n  color: #6B7280;\n  font-size: 12px;\n}\n\n.version-option[_ngcontent-%COMP%]   i.fa-check[_ngcontent-%COMP%] {\n  color: #10B981;\n  margin-left: auto;\n}\n\n.save-to-collection-btn[_ngcontent-%COMP%] {\n  background: none;\n  border: none;\n  cursor: pointer;\n  color: #9CA3AF;\n  padding: 6px;\n  border-radius: 4px;\n  transition: all 0.2s;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n}\n\n.save-to-collection-btn[_ngcontent-%COMP%]:hover {\n  background: #F3F4F6;\n  color: #6B7280;\n}\n\n.save-to-collection-btn.in-collection[_ngcontent-%COMP%] {\n  color: #F59E0B;\n}\n\n.save-to-collection-btn.in-collection[_ngcontent-%COMP%]:hover {\n  background: #FEF3C7;\n  color: #D97706;\n}\n\n.save-to-collection-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 14px;\n}\n\n.close-btn[_ngcontent-%COMP%] {\n  background: none;\n  border: none;\n  cursor: pointer;\n  color: #6B7280;\n  padding: 6px;\n  border-radius: 4px;\n  transition: all 0.2s;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n}\n\n.close-btn[_ngcontent-%COMP%]:hover {\n  background: #F3F4F6;\n  color: #111827;\n}\n\n.close-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 14px;\n}\n\n.panel-content[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow: hidden;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n}\n\n.artifact-content-wrapper[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  min-height: 0;\n}\n\n.loading-state[_ngcontent-%COMP%], \n.error-state[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 12px;\n  padding: 40px 20px;\n  color: #6B7280;\n}\n\n.error-state[_ngcontent-%COMP%] {\n  color: #DC2626;\n}\n\n.loading-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 24px;\n}\n\n.artifact-meta[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\n  gap: 16px;\n  margin-bottom: 16px;\n  padding: 16px;\n  background: #F9FAFB;\n  border-radius: 8px;\n  flex-shrink: 0;\n}\n\n.meta-item[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.meta-item[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n  font-size: 12px;\n  font-weight: 500;\n  color: #6B7280;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.meta-item[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n  font-size: 14px;\n  color: #111827;\n}\n\n.artifact-description[_ngcontent-%COMP%] {\n  padding: 12px;\n  margin-bottom: 16px;\n  background: #EFF6FF;\n  border-left: 3px solid #3B82F6;\n  border-radius: 4px;\n  color: #1E40AF;\n  font-size: 14px;\n  flex-shrink: 0;\n}\n\n.json-viewer[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  border: 1px solid #E5E7EB;\n  border-radius: 8px;\n  overflow: hidden;\n  min-height: 0;\n}\n\n.json-editor-container[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow: hidden;\n  min-height: 0;\n}\n\n.json-toolbar[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: flex-end;\n  gap: 8px;\n  padding: 8px 12px;\n  background: #F9FAFB;\n  border-bottom: 1px solid #E5E7EB;\n  flex-shrink: 0;\n}\n\n.btn-icon[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  background: white;\n  border: 1px solid #D1D5DB;\n  border-radius: 4px;\n  padding: 6px 12px;\n  cursor: pointer;\n  color: #374151;\n  font-size: 14px;\n  transition: all 0.2s;\n}\n\n.btn-icon[_ngcontent-%COMP%]:hover {\n  background: #F3F4F6;\n  border-color: #9CA3AF;\n}\n\n.btn-icon.btn-primary[_ngcontent-%COMP%] {\n  background: #4F46E5;\n  border-color: #4F46E5;\n  color: white;\n}\n\n.btn-icon.btn-primary[_ngcontent-%COMP%]:hover {\n  background: #4338CA;\n  border-color: #4338CA;\n}\n\n.btn-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 14px;\n}\n\n\n\n.modal-overlay[_ngcontent-%COMP%] {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(0, 0, 0, 0.5);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 10000;\n}\n\n.modal-content[_ngcontent-%COMP%] {\n  background: white;\n  border-radius: 12px;\n  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);\n  max-width: 500px;\n  width: 90%;\n  max-height: 90vh;\n  display: flex;\n  flex-direction: column;\n}\n\n.modal-header[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 16px 20px;\n  border-bottom: 1px solid #E5E7EB;\n}\n\n.modal-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 16px;\n  font-weight: 600;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.modal-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #F59E0B;\n}\n\n.modal-body[_ngcontent-%COMP%] {\n  padding: 20px;\n  overflow-y: auto;\n}\n\n.modal-footer[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: flex-end;\n  gap: 12px;\n  padding: 16px 20px;\n  border-top: 1px solid #E5E7EB;\n}\n\n.form-section[_ngcontent-%COMP%] {\n  margin-bottom: 20px;\n}\n\n.form-section[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n  display: block;\n  margin-bottom: 8px;\n  font-size: 14px;\n  font-weight: 500;\n  color: #374151;\n}\n\n.form-select[_ngcontent-%COMP%], \n.form-input[_ngcontent-%COMP%] {\n  width: 100%;\n  padding: 10px 12px;\n  border: 1px solid #D1D5DB;\n  border-radius: 6px;\n  font-size: 14px;\n  color: #111827;\n  background: white;\n  transition: border-color 0.2s;\n}\n\n.form-select[_ngcontent-%COMP%]:focus, \n.form-input[_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: #4F46E5;\n  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);\n}\n\n.divider[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  margin: 24px 0;\n  color: #9CA3AF;\n  font-size: 12px;\n  font-weight: 500;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.divider[_ngcontent-%COMP%]::before, \n.divider[_ngcontent-%COMP%]::after {\n  content: '';\n  flex: 1;\n  height: 1px;\n  background: #E5E7EB;\n}\n\n.divider[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n  padding: 0 12px;\n}\n\n.create-collection-row[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 8px;\n}\n\n.create-collection-row[_ngcontent-%COMP%]   .form-input[_ngcontent-%COMP%] {\n  flex: 1;\n}\n\n.btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 16px;\n  border: none;\n  border-radius: 6px;\n  font-size: 14px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.2s;\n  white-space: nowrap;\n}\n\n.btn[_ngcontent-%COMP%]:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.btn-primary[_ngcontent-%COMP%] {\n  background: #4F46E5;\n  color: white;\n}\n\n.btn-primary[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: #4338CA;\n}\n\n.btn-secondary[_ngcontent-%COMP%] {\n  background: white;\n  border: 1px solid #D1D5DB;\n  color: #374151;\n}\n\n.btn-secondary[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: #F3F4F6;\n}\n\n\n\n.tab-navigation[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 0;\n  border-bottom: 2px solid #E5E7EB;\n  padding: 0 16px;\n  background: white;\n}\n\n.tab-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 12px 20px;\n  background: transparent;\n  border: none;\n  border-bottom: 2px solid transparent;\n  margin-bottom: -2px;\n  color: #6B7280;\n  font-size: 13px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 150ms ease;\n}\n\n.tab-btn[_ngcontent-%COMP%]:hover {\n  color: #1e40af;\n  background: #F9FAFB;\n}\n\n.tab-btn.active[_ngcontent-%COMP%] {\n  color: #1e40af;\n  border-bottom-color: #1e40af;\n}\n\n.tab-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 14px;\n}\n\n\n\n.tab-content[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow: auto;\n  width: 100%;\n}\n\n.display-content[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  width: 100%;\n  box-sizing: border-box;\n  overflow: hidden;\n  min-height: 0;\n}\n\n.display-toolbar[_ngcontent-%COMP%] {\n  position: absolute;\n  top: 12px;\n  right: 12px;\n  display: flex;\n  gap: 8px;\n  z-index: 10;\n}\n\n.markdown-content[_ngcontent-%COMP%], \n.html-content[_ngcontent-%COMP%] {\n  flex: 1;\n  font-size: 14px;\n  line-height: 1.6;\n  width: 100%;\n  padding: 20px;\n  box-sizing: border-box;\n  overflow: auto;\n  min-height: 0;\n}\n\n.details-content[_ngcontent-%COMP%] {\n  padding: 20px;\n  width: 100%;\n  box-sizing: border-box;\n}\n\n.details-content[_ngcontent-%COMP%]   .artifact-meta[_ngcontent-%COMP%] {\n  margin-bottom: 0;\n  padding: 20px;\n}\n\n.details-content[_ngcontent-%COMP%]   .meta-item.full-width[_ngcontent-%COMP%] {\n  grid-column: 1 / -1;\n}\n\n.attributes-section[_ngcontent-%COMP%] {\n  margin-top: 24px;\n  padding: 24px;\n  background: #F9FAFB;\n  border-radius: 8px;\n}\n\n.attributes-section[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n  margin: 0 0 16px 0;\n  font-size: 14px;\n  font-weight: 600;\n  color: #111827;\n}\n\n.attributes-list[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));\n  gap: 16px;\n}\n\n.attribute-item[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  padding: 12px;\n  background: white;\n  border-radius: 6px;\n  border: 1px solid #E5E7EB;\n}\n\n.attribute-item[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n  font-size: 11px;\n  font-weight: 600;\n  color: #6B7280;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.attribute-item[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: #111827;\n  word-break: break-word;\n}\n\n.attribute-empty-pill[_ngcontent-%COMP%] {\n  display: inline-block;\n  padding: 2px 8px;\n  background: #F3F4F6;\n  color: #9CA3AF;\n  font-size: 11px;\n  font-weight: 500;\n  border-radius: 4px;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ArtifactViewerPanelComponent, [{
+        type: Component,
+        args: [{ selector: 'mj-artifact-viewer-panel', template: "<div class=\"artifact-viewer-panel\">\n  <div class=\"panel-header\">\n    <div class=\"panel-header-left\">\n      <h3>\n        <i class=\"fas fa-cube\"></i>\n        {{ displayName }}\n      </h3>\n      @if (displayDescription) {\n        <p class=\"header-description\">{{ displayDescription }}</p>\n      }\n    </div>\n    <div class=\"panel-header-right\">\n      <div class=\"version-selector\" [class.clickable]=\"allVersions.length > 1\" (click)=\"toggleVersionDropdown()\">\n        <i class=\"fas fa-history\"></i>\n        <span class=\"version-label\">v{{ selectedVersionNumber }}</span>\n        @if (allVersions.length > 1) {\n          <i class=\"fas fa-chevron-down dropdown-icon\" [class.open]=\"showVersionDropdown\"></i>\n        }\n        @if (showVersionDropdown) {\n          <div class=\"version-dropdown\" (click)=\"$event.stopPropagation()\">\n            @for (version of allVersions; track version.ID) {\n              <div class=\"version-option\"\n                   [class.selected]=\"version.VersionNumber === selectedVersionNumber\"\n                   (click)=\"selectVersion(version); $event.stopPropagation()\">\n                <span class=\"version-number\">v{{ version.VersionNumber }}</span>\n                <span class=\"version-date\">{{ version.__mj_CreatedAt | date:'short' }}</span>\n                @if (version.VersionNumber === selectedVersionNumber) {\n                  <i class=\"fas fa-check\"></i>\n                }\n              </div>\n            }\n          </div>\n        }\n      </div>\n      @if (showSaveToCollection) {\n        <button class=\"save-to-collection-btn\"\n                [class.in-collection]=\"isInCollection\"\n                (click)=\"onSaveToLibrary()\"\n                [title]=\"isInCollection ? 'View in Collection' : 'Save to Collection'\">\n          <i [ngClass]=\"isInCollection ? 'fas fa-bookmark' : 'far fa-bookmark'\"></i>\n        </button>\n      }\n      <button class=\"close-btn\" (click)=\"onClose()\" title=\"Close\">\n        <i class=\"fas fa-times\"></i>\n      </button>\n    </div>\n  </div>\n\n  <div class=\"panel-content\">\n    @if (isLoading) {\n      <div class=\"loading-state\">\n        <i class=\"fas fa-spinner fa-spin\"></i>\n        <span>Loading artifact...</span>\n      </div>\n    }\n\n    @if (error) {\n      <div class=\"error-state\">\n        <i class=\"fas fa-exclamation-triangle\"></i>\n        <span>{{ error }}</span>\n      </div>\n    }\n\n    @if (!isLoading && !error && artifact) {\n      <div class=\"artifact-content-wrapper\">\n        <!-- Tab Navigation -->\n        <div class=\"tab-navigation\">\n          @if (hasDisplayTab) {\n            <button class=\"tab-btn\" [class.active]=\"activeTab === 'display'\" (click)=\"setActiveTab('display')\">\n              <i class=\"fas fa-eye\"></i> Display\n            </button>\n          }\n          @if (hasJsonTab) {\n            <button class=\"tab-btn\" [class.active]=\"activeTab === 'json'\" (click)=\"setActiveTab('json')\">\n              <i class=\"fas fa-code\"></i> JSON\n            </button>\n          }\n          <button class=\"tab-btn\" [class.active]=\"activeTab === 'details'\" (click)=\"setActiveTab('details')\">\n            <i class=\"fas fa-info-circle\"></i> Details\n          </button>\n        </div>\n\n        <!-- Tab Content -->\n        <div class=\"tab-content\">\n          <!-- Display Tab (uses plugin system OR extracted attributes) -->\n          @if (activeTab === 'display' && hasDisplayTab) {\n            <div class=\"display-content\">\n              @if (hasPlugin && artifactVersion && artifactTypeName) {\n                <!-- Use plugin viewer if available -->\n                <mj-artifact-type-plugin-viewer\n                  [artifactVersion]=\"artifactVersion\"\n                  [artifactTypeName]=\"artifactTypeName\"\n                  [contentType]=\"contentType\"\n                  [readonly]=\"true\">\n                </mj-artifact-type-plugin-viewer>\n              } @else if (displayMarkdown || displayHtml) {\n                <!-- Fallback to extracted markdown/HTML attributes -->\n                <div class=\"display-toolbar\">\n                  <button class=\"btn-icon\" title=\"Copy Content\" (click)=\"onCopyDisplayContent()\">\n                    <i class=\"fas fa-copy\"></i> Copy\n                  </button>\n                </div>\n                @if (displayMarkdown) {\n                  <div class=\"markdown-content\">\n                    <markdown [data]=\"displayMarkdown\"></markdown>\n                  </div>\n                } @else if (displayHtml) {\n                  <div class=\"html-content\" [innerHTML]=\"displayHtml\"></div>\n                }\n              }\n            </div>\n          }\n\n          <!-- JSON Tab (only shown for elevated displays with JSON content) -->\n          @if (activeTab === 'json' && hasJsonTab) {\n            <div class=\"json-viewer\">\n              <div class=\"json-toolbar\">\n                <button class=\"btn-icon\" title=\"Copy JSON\" (click)=\"onCopyToClipboard()\">\n                  <i class=\"fas fa-copy\"></i> Copy\n                </button>\n              </div>\n              <div class=\"json-editor-container\">\n                <mj-code-editor\n                  [(ngModel)]=\"jsonContent\"\n                  [language]=\"'json'\"\n                  [readonly]=\"true\"\n                  style=\"width: 100%; height: 100%;\">\n                </mj-code-editor>\n              </div>\n            </div>\n          }\n\n          <!-- Details Tab -->\n          @if (activeTab === 'details') {\n            <div class=\"details-content\">\n              <div class=\"artifact-meta\">\n                <div class=\"meta-item\">\n                  <label>Type</label>\n                  <span>{{ artifact.Type }}</span>\n                </div>\n                <div class=\"meta-item\">\n                  <label>Version</label>\n                  <span>{{ artifactVersion?.VersionNumber || 1 }}</span>\n                </div>\n                <div class=\"meta-item\">\n                  <label>Created</label>\n                  <span>{{ artifact.__mj_CreatedAt | date:'short' }}</span>\n                </div>\n                <div class=\"meta-item\">\n                  <label>Updated</label>\n                  <span>{{ artifactVersion?.__mj_UpdatedAt | date:'short' }}</span>\n                </div>\n                @if (artifact.Description) {\n                  <div class=\"meta-item full-width\">\n                    <label>Artifact Description</label>\n                    <span>{{ artifact.Description }}</span>\n                  </div>\n                }\n                @if (artifactVersion?.Description && artifact.Description && artifactVersion?.Description !== artifact.Description) {\n                  <div class=\"meta-item full-width\">\n                    <label>Version Description</label>\n                    <span>{{ artifactVersion?.Description }}</span>\n                  </div>\n                }\n              </div>\n\n              <!-- Version Attributes -->\n              @if (filteredAttributes.length > 0) {\n                <div class=\"attributes-section\">\n                  <h4>Version Attributes</h4>\n                  <div class=\"attributes-list\">\n                    @for (attr of filteredAttributes; track attr.ID) {\n                      <div class=\"attribute-item\">\n                        <label>{{ attr.Name }}</label>\n                        @if (attr.Value) {\n                          <span>{{ attr.Value }}</span>\n                        } @else {\n                          <span class=\"attribute-empty-pill\">Empty</span>\n                        }\n                      </div>\n                    }\n                  </div>\n                </div>\n              }\n            </div>\n          }\n        </div>\n      </div>\n    }\n  </div>\n</div>\n\n<!-- Save to Collection Dialog -->\n@if (showLibraryDialog) {\n  <div class=\"modal-overlay\" (click)=\"cancelLibraryDialog()\">\n    <div class=\"modal-content library-modal\" (click)=\"$event.stopPropagation()\">\n      <div class=\"modal-header\">\n        <h3>\n          <i class=\"fas fa-bookmark\"></i>\n          Save to Collection\n        </h3>\n        <button class=\"close-btn\" (click)=\"cancelLibraryDialog()\">\n          <i class=\"fas fa-times\"></i>\n        </button>\n      </div>\n      <div class=\"modal-body\">\n        <div class=\"form-section\">\n          <label>Select Collection</label>\n          <select [(ngModel)]=\"selectedCollectionId\" class=\"form-select\">\n            <option [ngValue]=\"null\">-- Choose a collection --</option>\n            @for (collection of collections; track collection.ID) {\n              <option [ngValue]=\"collection.ID\">{{ collection.Name }}</option>\n            }\n          </select>\n        </div>\n\n        <div class=\"divider\">\n          <span>OR</span>\n        </div>\n\n        <div class=\"form-section\">\n          <label>Create New Collection</label>\n          <div class=\"create-collection-row\">\n            <input\n              type=\"text\"\n              [(ngModel)]=\"newCollectionName\"\n              placeholder=\"Enter collection name\"\n              class=\"form-input\"\n              (keyup.enter)=\"createNewCollection()\">\n            <button\n              class=\"btn btn-secondary\"\n              (click)=\"createNewCollection()\"\n              [disabled]=\"isCreatingCollection || !newCollectionName.trim()\">\n              @if (isCreatingCollection) {\n                <i class=\"fas fa-spinner fa-spin\"></i>\n              } @else {\n                <i class=\"fas fa-plus\"></i>\n              }\n              Create\n            </button>\n          </div>\n        </div>\n      </div>\n      <div class=\"modal-footer\">\n        <button class=\"btn btn-secondary\" (click)=\"cancelLibraryDialog()\">\n          Cancel\n        </button>\n        <button\n          class=\"btn btn-primary\"\n          (click)=\"saveToSelectedCollection()\"\n          [disabled]=\"!selectedCollectionId || isSavingToLibrary\">\n          @if (isSavingToLibrary) {\n            <i class=\"fas fa-spinner fa-spin\"></i> Saving...\n          } @else {\n            <i class=\"fas fa-save\"></i> Save to Collection\n          }\n        </button>\n      </div>\n    </div>\n  </div>\n}\n", styles: [".artifact-viewer-panel {\n  height: 100%;\n  background: white;\n  border-left: 1px solid #E5E7EB;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n\n.panel-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 12px 16px;\n  border-bottom: 1px solid #E5E7EB;\n  background: white;\n  flex-shrink: 0;\n}\n\n.panel-header-left {\n  flex: 1;\n  min-width: 0;\n}\n\n.panel-header h3 {\n  margin: 0;\n  font-size: 14px;\n  font-weight: 600;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.panel-header h3 i {\n  color: #6366F1;\n  flex-shrink: 0;\n}\n\n.header-description {\n  margin: 4px 0 0 0;\n  font-size: 12px;\n  color: #6B7280;\n  font-weight: normal;\n}\n\n.panel-header-right {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex-shrink: 0;\n}\n\n.version-selector {\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 10px;\n  background: #F3F4F6;\n  border-radius: 12px;\n  font-size: 12px;\n  color: #6B7280;\n  font-weight: 500;\n  transition: all 0.2s;\n}\n\n.version-selector.clickable {\n  cursor: pointer;\n}\n\n.version-selector.clickable:hover {\n  background: #E5E7EB;\n}\n\n.version-selector i {\n  font-size: 11px;\n}\n\n.version-selector .dropdown-icon {\n  margin-left: 2px;\n  transition: transform 0.2s;\n}\n\n.version-selector .dropdown-icon.open {\n  transform: rotate(180deg);\n}\n\n.version-label {\n  font-family: monospace;\n}\n\n.version-dropdown {\n  position: absolute;\n  top: calc(100% + 4px);\n  right: 0;\n  min-width: 200px;\n  background: white;\n  border: 1px solid #E5E7EB;\n  border-radius: 8px;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n  z-index: 1000;\n  overflow: hidden;\n}\n\n.version-option {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 10px 12px;\n  cursor: pointer;\n  transition: background 0.15s;\n  font-size: 13px;\n}\n\n.version-option:hover {\n  background: #F9FAFB;\n}\n\n.version-option.selected {\n  background: #EEF2FF;\n  color: #4F46E5;\n}\n\n.version-option .version-number {\n  font-family: monospace;\n  font-weight: 600;\n  min-width: 35px;\n}\n\n.version-option .version-date {\n  flex: 1;\n  color: #6B7280;\n  font-size: 12px;\n}\n\n.version-option i.fa-check {\n  color: #10B981;\n  margin-left: auto;\n}\n\n.save-to-collection-btn {\n  background: none;\n  border: none;\n  cursor: pointer;\n  color: #9CA3AF;\n  padding: 6px;\n  border-radius: 4px;\n  transition: all 0.2s;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n}\n\n.save-to-collection-btn:hover {\n  background: #F3F4F6;\n  color: #6B7280;\n}\n\n.save-to-collection-btn.in-collection {\n  color: #F59E0B;\n}\n\n.save-to-collection-btn.in-collection:hover {\n  background: #FEF3C7;\n  color: #D97706;\n}\n\n.save-to-collection-btn i {\n  font-size: 14px;\n}\n\n.close-btn {\n  background: none;\n  border: none;\n  cursor: pointer;\n  color: #6B7280;\n  padding: 6px;\n  border-radius: 4px;\n  transition: all 0.2s;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n}\n\n.close-btn:hover {\n  background: #F3F4F6;\n  color: #111827;\n}\n\n.close-btn i {\n  font-size: 14px;\n}\n\n.panel-content {\n  flex: 1;\n  overflow: hidden;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n}\n\n.artifact-content-wrapper {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  min-height: 0;\n}\n\n.loading-state,\n.error-state {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 12px;\n  padding: 40px 20px;\n  color: #6B7280;\n}\n\n.error-state {\n  color: #DC2626;\n}\n\n.loading-state i {\n  font-size: 24px;\n}\n\n.artifact-meta {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\n  gap: 16px;\n  margin-bottom: 16px;\n  padding: 16px;\n  background: #F9FAFB;\n  border-radius: 8px;\n  flex-shrink: 0;\n}\n\n.meta-item {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.meta-item label {\n  font-size: 12px;\n  font-weight: 500;\n  color: #6B7280;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.meta-item span {\n  font-size: 14px;\n  color: #111827;\n}\n\n.artifact-description {\n  padding: 12px;\n  margin-bottom: 16px;\n  background: #EFF6FF;\n  border-left: 3px solid #3B82F6;\n  border-radius: 4px;\n  color: #1E40AF;\n  font-size: 14px;\n  flex-shrink: 0;\n}\n\n.json-viewer {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  border: 1px solid #E5E7EB;\n  border-radius: 8px;\n  overflow: hidden;\n  min-height: 0;\n}\n\n.json-editor-container {\n  flex: 1;\n  overflow: hidden;\n  min-height: 0;\n}\n\n.json-toolbar {\n  display: flex;\n  justify-content: flex-end;\n  gap: 8px;\n  padding: 8px 12px;\n  background: #F9FAFB;\n  border-bottom: 1px solid #E5E7EB;\n  flex-shrink: 0;\n}\n\n.btn-icon {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  background: white;\n  border: 1px solid #D1D5DB;\n  border-radius: 4px;\n  padding: 6px 12px;\n  cursor: pointer;\n  color: #374151;\n  font-size: 14px;\n  transition: all 0.2s;\n}\n\n.btn-icon:hover {\n  background: #F3F4F6;\n  border-color: #9CA3AF;\n}\n\n.btn-icon.btn-primary {\n  background: #4F46E5;\n  border-color: #4F46E5;\n  color: white;\n}\n\n.btn-icon.btn-primary:hover {\n  background: #4338CA;\n  border-color: #4338CA;\n}\n\n.btn-icon i {\n  font-size: 14px;\n}\n\n/* Library Dialog Styles */\n.modal-overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(0, 0, 0, 0.5);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 10000;\n}\n\n.modal-content {\n  background: white;\n  border-radius: 12px;\n  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);\n  max-width: 500px;\n  width: 90%;\n  max-height: 90vh;\n  display: flex;\n  flex-direction: column;\n}\n\n.modal-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 16px 20px;\n  border-bottom: 1px solid #E5E7EB;\n}\n\n.modal-header h3 {\n  margin: 0;\n  font-size: 16px;\n  font-weight: 600;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.modal-header h3 i {\n  color: #F59E0B;\n}\n\n.modal-body {\n  padding: 20px;\n  overflow-y: auto;\n}\n\n.modal-footer {\n  display: flex;\n  justify-content: flex-end;\n  gap: 12px;\n  padding: 16px 20px;\n  border-top: 1px solid #E5E7EB;\n}\n\n.form-section {\n  margin-bottom: 20px;\n}\n\n.form-section label {\n  display: block;\n  margin-bottom: 8px;\n  font-size: 14px;\n  font-weight: 500;\n  color: #374151;\n}\n\n.form-select,\n.form-input {\n  width: 100%;\n  padding: 10px 12px;\n  border: 1px solid #D1D5DB;\n  border-radius: 6px;\n  font-size: 14px;\n  color: #111827;\n  background: white;\n  transition: border-color 0.2s;\n}\n\n.form-select:focus,\n.form-input:focus {\n  outline: none;\n  border-color: #4F46E5;\n  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);\n}\n\n.divider {\n  display: flex;\n  align-items: center;\n  margin: 24px 0;\n  color: #9CA3AF;\n  font-size: 12px;\n  font-weight: 500;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.divider::before,\n.divider::after {\n  content: '';\n  flex: 1;\n  height: 1px;\n  background: #E5E7EB;\n}\n\n.divider span {\n  padding: 0 12px;\n}\n\n.create-collection-row {\n  display: flex;\n  gap: 8px;\n}\n\n.create-collection-row .form-input {\n  flex: 1;\n}\n\n.btn {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 16px;\n  border: none;\n  border-radius: 6px;\n  font-size: 14px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.2s;\n  white-space: nowrap;\n}\n\n.btn:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.btn-primary {\n  background: #4F46E5;\n  color: white;\n}\n\n.btn-primary:hover:not(:disabled) {\n  background: #4338CA;\n}\n\n.btn-secondary {\n  background: white;\n  border: 1px solid #D1D5DB;\n  color: #374151;\n}\n\n.btn-secondary:hover:not(:disabled) {\n  background: #F3F4F6;\n}\n\n/* Tab Navigation */\n.tab-navigation {\n  display: flex;\n  gap: 0;\n  border-bottom: 2px solid #E5E7EB;\n  padding: 0 16px;\n  background: white;\n}\n\n.tab-btn {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 12px 20px;\n  background: transparent;\n  border: none;\n  border-bottom: 2px solid transparent;\n  margin-bottom: -2px;\n  color: #6B7280;\n  font-size: 13px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 150ms ease;\n}\n\n.tab-btn:hover {\n  color: #1e40af;\n  background: #F9FAFB;\n}\n\n.tab-btn.active {\n  color: #1e40af;\n  border-bottom-color: #1e40af;\n}\n\n.tab-btn i {\n  font-size: 14px;\n}\n\n/* Tab Content */\n.tab-content {\n  flex: 1;\n  overflow: auto;\n  width: 100%;\n}\n\n.display-content {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  width: 100%;\n  box-sizing: border-box;\n  overflow: hidden;\n  min-height: 0;\n}\n\n.display-toolbar {\n  position: absolute;\n  top: 12px;\n  right: 12px;\n  display: flex;\n  gap: 8px;\n  z-index: 10;\n}\n\n.markdown-content,\n.html-content {\n  flex: 1;\n  font-size: 14px;\n  line-height: 1.6;\n  width: 100%;\n  padding: 20px;\n  box-sizing: border-box;\n  overflow: auto;\n  min-height: 0;\n}\n\n.details-content {\n  padding: 20px;\n  width: 100%;\n  box-sizing: border-box;\n}\n\n.details-content .artifact-meta {\n  margin-bottom: 0;\n  padding: 20px;\n}\n\n.details-content .meta-item.full-width {\n  grid-column: 1 / -1;\n}\n\n.attributes-section {\n  margin-top: 24px;\n  padding: 24px;\n  background: #F9FAFB;\n  border-radius: 8px;\n}\n\n.attributes-section h4 {\n  margin: 0 0 16px 0;\n  font-size: 14px;\n  font-weight: 600;\n  color: #111827;\n}\n\n.attributes-list {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));\n  gap: 16px;\n}\n\n.attribute-item {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  padding: 12px;\n  background: white;\n  border-radius: 6px;\n  border: 1px solid #E5E7EB;\n}\n\n.attribute-item label {\n  font-size: 11px;\n  font-weight: 600;\n  color: #6B7280;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.attribute-item span {\n  font-size: 13px;\n  color: #111827;\n  word-break: break-word;\n}\n\n.attribute-empty-pill {\n  display: inline-block;\n  padding: 2px 8px;\n  background: #F3F4F6;\n  color: #9CA3AF;\n  font-size: 11px;\n  font-weight: 500;\n  border-radius: 4px;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n"] }]
+    }], null, { artifactId: [{
+            type: Input
+        }], currentUser: [{
+            type: Input
+        }], environmentId: [{
+            type: Input
+        }], versionNumber: [{
+            type: Input
+        }], showSaveToCollection: [{
+            type: Input
+        }], refreshTrigger: [{
+            type: Input
+        }], closed: [{
+            type: Output
+        }], pluginViewer: [{
+            type: ViewChild,
+            args: [ArtifactTypePluginViewerComponent]
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ArtifactViewerPanelComponent, { className: "ArtifactViewerPanelComponent", filePath: "src/lib/components/artifact-viewer-panel.component.ts", lineNumber: 14 }); })();
+//# sourceMappingURL=artifact-viewer-panel.component.js.map