@memberjunction/ng-artifacts 3.0.0 → 3.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/lib/components/artifact-message-card.component.js +1 -1
- package/dist/lib/components/artifact-type-plugin-viewer.component.js +1 -1
- package/dist/lib/components/artifact-version-history.component.js +1 -1
- package/dist/lib/components/artifact-viewer-panel.component.d.ts +5 -1
- package/dist/lib/components/artifact-viewer-panel.component.d.ts.map +1 -1
- package/dist/lib/components/artifact-viewer-panel.component.js +338 -295
- package/dist/lib/components/artifact-viewer-panel.component.js.map +1 -1
- package/dist/lib/components/base-artifact-viewer.component.js +1 -1
- package/dist/lib/components/plugins/code-artifact-viewer.component.js +1 -1
- package/dist/lib/components/plugins/component-artifact-viewer.component.js +1 -1
- package/dist/lib/components/plugins/data-requirements-viewer/data-requirements-viewer.component.js +1 -1
- package/dist/lib/components/plugins/html-artifact-viewer.component.js +1 -1
- package/dist/lib/components/plugins/json-artifact-viewer.component.js +1 -1
- package/dist/lib/components/plugins/markdown-artifact-viewer.component.js +1 -1
- package/dist/lib/components/plugins/svg-artifact-viewer.component.js +1 -1
- package/package.json +11 -11
|
@@ -17,445 +17,516 @@ import * as i6 from "@memberjunction/ng-code-editor";
|
|
|
17
17
|
import * as i7 from "./artifact-type-plugin-viewer.component";
|
|
18
18
|
const _forTrack0 = ($index, $item) => $item.ID;
|
|
19
19
|
const _forTrack1 = ($index, $item) => $item.id;
|
|
20
|
-
function
|
|
21
|
-
i0.ɵɵelementStart(0, "p",
|
|
20
|
+
function ArtifactViewerPanelComponent_Conditional_1_Conditional_5_Template(rf, ctx) { if (rf & 1) {
|
|
21
|
+
i0.ɵɵelementStart(0, "p", 8);
|
|
22
22
|
i0.ɵɵtext(1);
|
|
23
23
|
i0.ɵɵelementEnd();
|
|
24
24
|
} if (rf & 2) {
|
|
25
|
-
const
|
|
25
|
+
const ctx_r1 = i0.ɵɵnextContext(2);
|
|
26
26
|
i0.ɵɵadvance();
|
|
27
|
-
i0.ɵɵtextInterpolate(
|
|
27
|
+
i0.ɵɵtextInterpolate(ctx_r1.displayDescription);
|
|
28
28
|
} }
|
|
29
|
-
function
|
|
30
|
-
i0.ɵɵelement(0, "i",
|
|
29
|
+
function ArtifactViewerPanelComponent_Conditional_1_Conditional_11_Template(rf, ctx) { if (rf & 1) {
|
|
30
|
+
i0.ɵɵelement(0, "i", 19);
|
|
31
31
|
} if (rf & 2) {
|
|
32
|
-
const
|
|
33
|
-
i0.ɵɵclassProp("open",
|
|
32
|
+
const ctx_r1 = i0.ɵɵnextContext(2);
|
|
33
|
+
i0.ɵɵclassProp("open", ctx_r1.showVersionDropdown);
|
|
34
34
|
} }
|
|
35
|
-
function
|
|
36
|
-
i0.ɵɵelement(0, "i",
|
|
35
|
+
function ArtifactViewerPanelComponent_Conditional_1_Conditional_12_For_2_Conditional_6_Template(rf, ctx) { if (rf & 1) {
|
|
36
|
+
i0.ɵɵelement(0, "i", 25);
|
|
37
37
|
} }
|
|
38
|
-
function
|
|
39
|
-
const
|
|
40
|
-
i0.ɵɵelementStart(0, "div",
|
|
41
|
-
i0.ɵɵlistener("click", function
|
|
42
|
-
i0.ɵɵelementStart(1, "span",
|
|
38
|
+
function ArtifactViewerPanelComponent_Conditional_1_Conditional_12_For_2_Template(rf, ctx) { if (rf & 1) {
|
|
39
|
+
const _r4 = i0.ɵɵgetCurrentView();
|
|
40
|
+
i0.ɵɵelementStart(0, "div", 22);
|
|
41
|
+
i0.ɵɵlistener("click", function ArtifactViewerPanelComponent_Conditional_1_Conditional_12_For_2_Template_div_click_0_listener($event) { const version_r5 = i0.ɵɵrestoreView(_r4).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); ctx_r1.selectVersion(version_r5); return i0.ɵɵresetView($event.stopPropagation()); });
|
|
42
|
+
i0.ɵɵelementStart(1, "span", 23);
|
|
43
43
|
i0.ɵɵtext(2);
|
|
44
44
|
i0.ɵɵelementEnd();
|
|
45
|
-
i0.ɵɵelementStart(3, "span",
|
|
45
|
+
i0.ɵɵelementStart(3, "span", 24);
|
|
46
46
|
i0.ɵɵtext(4);
|
|
47
47
|
i0.ɵɵpipe(5, "date");
|
|
48
48
|
i0.ɵɵelementEnd();
|
|
49
|
-
i0.ɵɵtemplate(6,
|
|
49
|
+
i0.ɵɵtemplate(6, ArtifactViewerPanelComponent_Conditional_1_Conditional_12_For_2_Conditional_6_Template, 1, 0, "i", 25);
|
|
50
50
|
i0.ɵɵelementEnd();
|
|
51
51
|
} if (rf & 2) {
|
|
52
|
-
const
|
|
53
|
-
const
|
|
54
|
-
i0.ɵɵclassProp("selected",
|
|
52
|
+
const version_r5 = ctx.$implicit;
|
|
53
|
+
const ctx_r1 = i0.ɵɵnextContext(3);
|
|
54
|
+
i0.ɵɵclassProp("selected", version_r5.VersionNumber === ctx_r1.selectedVersionNumber);
|
|
55
55
|
i0.ɵɵadvance(2);
|
|
56
|
-
i0.ɵɵtextInterpolate1("v",
|
|
56
|
+
i0.ɵɵtextInterpolate1("v", version_r5.VersionNumber, "");
|
|
57
57
|
i0.ɵɵadvance(2);
|
|
58
|
-
i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(5, 5,
|
|
58
|
+
i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(5, 5, version_r5.__mj_CreatedAt, "short"));
|
|
59
59
|
i0.ɵɵadvance(2);
|
|
60
|
-
i0.ɵɵconditional(
|
|
60
|
+
i0.ɵɵconditional(version_r5.VersionNumber === ctx_r1.selectedVersionNumber ? 6 : -1);
|
|
61
61
|
} }
|
|
62
|
-
function
|
|
63
|
-
const
|
|
64
|
-
i0.ɵɵelementStart(0, "div",
|
|
65
|
-
i0.ɵɵlistener("click", function
|
|
66
|
-
i0.ɵɵrepeaterCreate(1,
|
|
62
|
+
function ArtifactViewerPanelComponent_Conditional_1_Conditional_12_Template(rf, ctx) { if (rf & 1) {
|
|
63
|
+
const _r3 = i0.ɵɵgetCurrentView();
|
|
64
|
+
i0.ɵɵelementStart(0, "div", 20);
|
|
65
|
+
i0.ɵɵlistener("click", function ArtifactViewerPanelComponent_Conditional_1_Conditional_12_Template_div_click_0_listener($event) { i0.ɵɵrestoreView(_r3); return i0.ɵɵresetView($event.stopPropagation()); });
|
|
66
|
+
i0.ɵɵrepeaterCreate(1, ArtifactViewerPanelComponent_Conditional_1_Conditional_12_For_2_Template, 7, 8, "div", 21, _forTrack0);
|
|
67
67
|
i0.ɵɵelementEnd();
|
|
68
68
|
} if (rf & 2) {
|
|
69
|
-
const
|
|
69
|
+
const ctx_r1 = i0.ɵɵnextContext(2);
|
|
70
70
|
i0.ɵɵadvance();
|
|
71
|
-
i0.ɵɵrepeater(
|
|
71
|
+
i0.ɵɵrepeater(ctx_r1.allVersions);
|
|
72
72
|
} }
|
|
73
|
-
function
|
|
74
|
-
const
|
|
75
|
-
i0.ɵɵelementStart(0, "button",
|
|
76
|
-
i0.ɵɵlistener("click", function
|
|
73
|
+
function ArtifactViewerPanelComponent_Conditional_1_Conditional_13_Template(rf, ctx) { if (rf & 1) {
|
|
74
|
+
const _r6 = i0.ɵɵgetCurrentView();
|
|
75
|
+
i0.ɵɵelementStart(0, "button", 26);
|
|
76
|
+
i0.ɵɵlistener("click", function ArtifactViewerPanelComponent_Conditional_1_Conditional_13_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onSaveToLibrary()); });
|
|
77
77
|
i0.ɵɵelement(1, "i");
|
|
78
78
|
i0.ɵɵelementEnd();
|
|
79
79
|
} if (rf & 2) {
|
|
80
|
-
const
|
|
81
|
-
i0.ɵɵclassProp("in-collection",
|
|
82
|
-
i0.ɵɵproperty("title",
|
|
80
|
+
const ctx_r1 = i0.ɵɵnextContext(2);
|
|
81
|
+
i0.ɵɵclassProp("in-collection", ctx_r1.isInCollection);
|
|
82
|
+
i0.ɵɵproperty("title", ctx_r1.isInCollection ? "Current version saved to " + ctx_r1.currentVersionCollections.length + " collection(s)" : "Save to Collection");
|
|
83
83
|
i0.ɵɵadvance();
|
|
84
|
-
i0.ɵɵclassMap(
|
|
84
|
+
i0.ɵɵclassMap(ctx_r1.isInCollection ? "fas fa-bookmark" : "far fa-bookmark");
|
|
85
85
|
} }
|
|
86
|
-
function
|
|
87
|
-
const
|
|
88
|
-
i0.ɵɵelementStart(0, "button",
|
|
89
|
-
i0.ɵɵlistener("click", function
|
|
90
|
-
i0.ɵɵelement(1, "i",
|
|
86
|
+
function ArtifactViewerPanelComponent_Conditional_1_Conditional_14_Template(rf, ctx) { if (rf & 1) {
|
|
87
|
+
const _r7 = i0.ɵɵgetCurrentView();
|
|
88
|
+
i0.ɵɵelementStart(0, "button", 27);
|
|
89
|
+
i0.ɵɵlistener("click", function ArtifactViewerPanelComponent_Conditional_1_Conditional_14_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onShare()); });
|
|
90
|
+
i0.ɵɵelement(1, "i", 28);
|
|
91
|
+
i0.ɵɵelementEnd();
|
|
92
|
+
} }
|
|
93
|
+
function ArtifactViewerPanelComponent_Conditional_1_Conditional_15_Template(rf, ctx) { if (rf & 1) {
|
|
94
|
+
const _r8 = i0.ɵɵgetCurrentView();
|
|
95
|
+
i0.ɵɵelementStart(0, "button", 29);
|
|
96
|
+
i0.ɵɵlistener("click", function ArtifactViewerPanelComponent_Conditional_1_Conditional_15_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onMaximizeToggle()); });
|
|
97
|
+
i0.ɵɵelement(1, "i", 7);
|
|
98
|
+
i0.ɵɵelementEnd();
|
|
99
|
+
} if (rf & 2) {
|
|
100
|
+
const ctx_r1 = i0.ɵɵnextContext(2);
|
|
101
|
+
i0.ɵɵproperty("title", ctx_r1.isMaximized ? "Restore Width" : "Maximize Width");
|
|
102
|
+
i0.ɵɵadvance();
|
|
103
|
+
i0.ɵɵproperty("ngClass", ctx_r1.isMaximized ? "fa-compress-arrows-alt" : "fa-arrows-left-right");
|
|
104
|
+
} }
|
|
105
|
+
function ArtifactViewerPanelComponent_Conditional_1_Conditional_16_Template(rf, ctx) { if (rf & 1) {
|
|
106
|
+
const _r9 = i0.ɵɵgetCurrentView();
|
|
107
|
+
i0.ɵɵelementStart(0, "button", 30);
|
|
108
|
+
i0.ɵɵlistener("click", function ArtifactViewerPanelComponent_Conditional_1_Conditional_16_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onClose()); });
|
|
109
|
+
i0.ɵɵelement(1, "i", 31);
|
|
91
110
|
i0.ɵɵelementEnd();
|
|
92
111
|
} }
|
|
93
|
-
function
|
|
94
|
-
i0.ɵɵ
|
|
95
|
-
i0.ɵɵ
|
|
112
|
+
function ArtifactViewerPanelComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
|
|
113
|
+
const _r1 = i0.ɵɵgetCurrentView();
|
|
114
|
+
i0.ɵɵelementStart(0, "div", 1)(1, "div", 6)(2, "h3");
|
|
115
|
+
i0.ɵɵelement(3, "i", 7);
|
|
116
|
+
i0.ɵɵtext(4);
|
|
117
|
+
i0.ɵɵelementEnd();
|
|
118
|
+
i0.ɵɵtemplate(5, ArtifactViewerPanelComponent_Conditional_1_Conditional_5_Template, 2, 1, "p", 8);
|
|
119
|
+
i0.ɵɵelementEnd();
|
|
120
|
+
i0.ɵɵelementStart(6, "div", 9)(7, "div", 10);
|
|
121
|
+
i0.ɵɵlistener("click", function ArtifactViewerPanelComponent_Conditional_1_Template_div_click_7_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.viewContext !== "collection" && ctx_r1.toggleVersionDropdown()); });
|
|
122
|
+
i0.ɵɵelement(8, "i", 11);
|
|
123
|
+
i0.ɵɵelementStart(9, "span", 12);
|
|
124
|
+
i0.ɵɵtext(10);
|
|
125
|
+
i0.ɵɵelementEnd();
|
|
126
|
+
i0.ɵɵtemplate(11, ArtifactViewerPanelComponent_Conditional_1_Conditional_11_Template, 1, 2, "i", 13)(12, ArtifactViewerPanelComponent_Conditional_1_Conditional_12_Template, 3, 0, "div", 14);
|
|
127
|
+
i0.ɵɵelementEnd();
|
|
128
|
+
i0.ɵɵtemplate(13, ArtifactViewerPanelComponent_Conditional_1_Conditional_13_Template, 2, 5, "button", 15)(14, ArtifactViewerPanelComponent_Conditional_1_Conditional_14_Template, 2, 0, "button", 16)(15, ArtifactViewerPanelComponent_Conditional_1_Conditional_15_Template, 2, 2, "button", 17)(16, ArtifactViewerPanelComponent_Conditional_1_Conditional_16_Template, 2, 0, "button", 18);
|
|
129
|
+
i0.ɵɵelementEnd()();
|
|
130
|
+
} if (rf & 2) {
|
|
131
|
+
const ctx_r1 = i0.ɵɵnextContext();
|
|
132
|
+
i0.ɵɵadvance(3);
|
|
133
|
+
i0.ɵɵproperty("ngClass", ctx_r1.getArtifactIcon());
|
|
134
|
+
i0.ɵɵadvance();
|
|
135
|
+
i0.ɵɵtextInterpolate1(" ", ctx_r1.displayName, " ");
|
|
136
|
+
i0.ɵɵadvance();
|
|
137
|
+
i0.ɵɵconditional(ctx_r1.displayDescription ? 5 : -1);
|
|
138
|
+
i0.ɵɵadvance(2);
|
|
139
|
+
i0.ɵɵclassProp("clickable", ctx_r1.allVersions.length > 1 && ctx_r1.viewContext !== "collection");
|
|
140
|
+
i0.ɵɵadvance(3);
|
|
141
|
+
i0.ɵɵtextInterpolate1("v", ctx_r1.selectedVersionNumber, "");
|
|
142
|
+
i0.ɵɵadvance();
|
|
143
|
+
i0.ɵɵconditional(ctx_r1.allVersions.length > 1 && ctx_r1.viewContext !== "collection" ? 11 : -1);
|
|
144
|
+
i0.ɵɵadvance();
|
|
145
|
+
i0.ɵɵconditional(ctx_r1.showVersionDropdown ? 12 : -1);
|
|
146
|
+
i0.ɵɵadvance();
|
|
147
|
+
i0.ɵɵconditional(ctx_r1.showSaveToCollection ? 13 : -1);
|
|
148
|
+
i0.ɵɵadvance();
|
|
149
|
+
i0.ɵɵconditional(ctx_r1.canShare ? 14 : -1);
|
|
150
|
+
i0.ɵɵadvance();
|
|
151
|
+
i0.ɵɵconditional(ctx_r1.showMaximizeButton ? 15 : -1);
|
|
152
|
+
i0.ɵɵadvance();
|
|
153
|
+
i0.ɵɵconditional(ctx_r1.showCloseButton ? 16 : -1);
|
|
154
|
+
} }
|
|
155
|
+
function ArtifactViewerPanelComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
|
|
156
|
+
i0.ɵɵelementStart(0, "div", 3);
|
|
157
|
+
i0.ɵɵelement(1, "i", 32);
|
|
96
158
|
i0.ɵɵelementStart(2, "span");
|
|
97
159
|
i0.ɵɵtext(3, "Loading artifact...");
|
|
98
160
|
i0.ɵɵelementEnd()();
|
|
99
161
|
} }
|
|
100
|
-
function
|
|
101
|
-
i0.ɵɵelementStart(0, "div",
|
|
102
|
-
i0.ɵɵelement(1, "i",
|
|
162
|
+
function ArtifactViewerPanelComponent_Conditional_4_Template(rf, ctx) { if (rf & 1) {
|
|
163
|
+
i0.ɵɵelementStart(0, "div", 4);
|
|
164
|
+
i0.ɵɵelement(1, "i", 33);
|
|
103
165
|
i0.ɵɵelementStart(2, "span");
|
|
104
166
|
i0.ɵɵtext(3);
|
|
105
167
|
i0.ɵɵelementEnd()();
|
|
106
168
|
} if (rf & 2) {
|
|
107
|
-
const
|
|
169
|
+
const ctx_r1 = i0.ɵɵnextContext();
|
|
108
170
|
i0.ɵɵadvance(3);
|
|
109
|
-
i0.ɵɵtextInterpolate(
|
|
171
|
+
i0.ɵɵtextInterpolate(ctx_r1.error);
|
|
110
172
|
} }
|
|
111
|
-
function
|
|
173
|
+
function ArtifactViewerPanelComponent_Conditional_5_Conditional_1_For_2_Conditional_1_Template(rf, ctx) { if (rf & 1) {
|
|
112
174
|
i0.ɵɵelement(0, "i");
|
|
113
175
|
} if (rf & 2) {
|
|
114
|
-
const
|
|
115
|
-
const
|
|
116
|
-
i0.ɵɵclassMap(
|
|
176
|
+
const tab_r11 = i0.ɵɵnextContext().$implicit;
|
|
177
|
+
const ctx_r1 = i0.ɵɵnextContext(3);
|
|
178
|
+
i0.ɵɵclassMap(ctx_r1.GetTabIcon(tab_r11));
|
|
117
179
|
} }
|
|
118
|
-
function
|
|
119
|
-
const
|
|
120
|
-
i0.ɵɵelementStart(0, "button",
|
|
121
|
-
i0.ɵɵlistener("click", function
|
|
122
|
-
i0.ɵɵtemplate(1,
|
|
180
|
+
function ArtifactViewerPanelComponent_Conditional_5_Conditional_1_For_2_Template(rf, ctx) { if (rf & 1) {
|
|
181
|
+
const _r10 = i0.ɵɵgetCurrentView();
|
|
182
|
+
i0.ɵɵelementStart(0, "button", 48);
|
|
183
|
+
i0.ɵɵlistener("click", function ArtifactViewerPanelComponent_Conditional_5_Conditional_1_For_2_Template_button_click_0_listener() { const tab_r11 = i0.ɵɵrestoreView(_r10).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.SetActiveTab(tab_r11)); });
|
|
184
|
+
i0.ɵɵtemplate(1, ArtifactViewerPanelComponent_Conditional_5_Conditional_1_For_2_Conditional_1_Template, 1, 2, "i", 49);
|
|
123
185
|
i0.ɵɵtext(2);
|
|
124
186
|
i0.ɵɵelementEnd();
|
|
125
187
|
} if (rf & 2) {
|
|
126
|
-
const
|
|
127
|
-
const
|
|
128
|
-
i0.ɵɵclassProp("active",
|
|
188
|
+
const tab_r11 = ctx.$implicit;
|
|
189
|
+
const ctx_r1 = i0.ɵɵnextContext(3);
|
|
190
|
+
i0.ɵɵclassProp("active", ctx_r1.activeTab === tab_r11.toLowerCase());
|
|
129
191
|
i0.ɵɵadvance();
|
|
130
|
-
i0.ɵɵconditional(
|
|
192
|
+
i0.ɵɵconditional(ctx_r1.GetTabIcon(tab_r11) ? 1 : -1);
|
|
131
193
|
i0.ɵɵadvance();
|
|
132
|
-
i0.ɵɵtextInterpolate1(" ",
|
|
194
|
+
i0.ɵɵtextInterpolate1(" ", tab_r11, " ");
|
|
133
195
|
} }
|
|
134
|
-
function
|
|
135
|
-
|
|
136
|
-
i0.ɵɵ
|
|
137
|
-
i0.ɵɵ
|
|
196
|
+
function ArtifactViewerPanelComponent_Conditional_5_Conditional_1_Template(rf, ctx) { if (rf & 1) {
|
|
197
|
+
i0.ɵɵelementStart(0, "div", 35);
|
|
198
|
+
i0.ɵɵrepeaterCreate(1, ArtifactViewerPanelComponent_Conditional_5_Conditional_1_For_2_Template, 3, 4, "button", 47, i0.ɵɵrepeaterTrackByIdentity);
|
|
199
|
+
i0.ɵɵelementEnd();
|
|
200
|
+
} if (rf & 2) {
|
|
201
|
+
const ctx_r1 = i0.ɵɵnextContext(2);
|
|
202
|
+
i0.ɵɵadvance();
|
|
203
|
+
i0.ɵɵrepeater(ctx_r1.allTabs);
|
|
204
|
+
} }
|
|
205
|
+
function ArtifactViewerPanelComponent_Conditional_5_Conditional_3_Template(rf, ctx) { if (rf & 1) {
|
|
206
|
+
const _r12 = i0.ɵɵgetCurrentView();
|
|
207
|
+
i0.ɵɵelementStart(0, "div", 50)(1, "mj-artifact-type-plugin-viewer", 51);
|
|
208
|
+
i0.ɵɵlistener("openEntityRecord", function ArtifactViewerPanelComponent_Conditional_5_Conditional_3_Template_mj_artifact_type_plugin_viewer_openEntityRecord_1_listener($event) { i0.ɵɵrestoreView(_r12); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onOpenEntityRecord($event)); })("pluginLoaded", function ArtifactViewerPanelComponent_Conditional_5_Conditional_3_Template_mj_artifact_type_plugin_viewer_pluginLoaded_1_listener() { i0.ɵɵrestoreView(_r12); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onPluginLoaded()); });
|
|
138
209
|
i0.ɵɵelementEnd()();
|
|
139
210
|
} if (rf & 2) {
|
|
140
|
-
const
|
|
141
|
-
i0.ɵɵstyleProp("display",
|
|
211
|
+
const ctx_r1 = i0.ɵɵnextContext(2);
|
|
212
|
+
i0.ɵɵstyleProp("display", ctx_r1.activeTab === "display" ? "block" : "none");
|
|
142
213
|
i0.ɵɵadvance();
|
|
143
|
-
i0.ɵɵproperty("artifactVersion",
|
|
214
|
+
i0.ɵɵproperty("artifactVersion", ctx_r1.artifactVersion)("artifactTypeName", ctx_r1.artifactTypeName)("contentType", ctx_r1.contentType)("readonly", true);
|
|
144
215
|
} }
|
|
145
|
-
function
|
|
146
|
-
i0.ɵɵelementStart(0, "div",
|
|
147
|
-
i0.ɵɵelement(1, "mj-markdown",
|
|
216
|
+
function ArtifactViewerPanelComponent_Conditional_5_Conditional_4_Conditional_1_Conditional_7_Template(rf, ctx) { if (rf & 1) {
|
|
217
|
+
i0.ɵɵelementStart(0, "div", 57);
|
|
218
|
+
i0.ɵɵelement(1, "mj-markdown", 59);
|
|
148
219
|
i0.ɵɵelementEnd();
|
|
149
220
|
} if (rf & 2) {
|
|
150
|
-
const
|
|
221
|
+
const ctx_r1 = i0.ɵɵnextContext(4);
|
|
151
222
|
i0.ɵɵadvance();
|
|
152
|
-
i0.ɵɵproperty("data",
|
|
223
|
+
i0.ɵɵproperty("data", ctx_r1.displayMarkdown)("enableCollapsibleHeadings", true)("enableLineNumbers", true)("enableSmartypants", true)("enableHtml", true);
|
|
153
224
|
} }
|
|
154
|
-
function
|
|
155
|
-
i0.ɵɵelement(0, "div",
|
|
225
|
+
function ArtifactViewerPanelComponent_Conditional_5_Conditional_4_Conditional_1_Conditional_8_Template(rf, ctx) { if (rf & 1) {
|
|
226
|
+
i0.ɵɵelement(0, "div", 58);
|
|
156
227
|
} if (rf & 2) {
|
|
157
|
-
const
|
|
158
|
-
i0.ɵɵproperty("innerHTML",
|
|
228
|
+
const ctx_r1 = i0.ɵɵnextContext(4);
|
|
229
|
+
i0.ɵɵproperty("innerHTML", ctx_r1.displayHtml, i0.ɵɵsanitizeHtml);
|
|
159
230
|
} }
|
|
160
|
-
function
|
|
161
|
-
const
|
|
162
|
-
i0.ɵɵelementStart(0, "div",
|
|
163
|
-
i0.ɵɵlistener("click", function
|
|
164
|
-
i0.ɵɵelement(2, "i",
|
|
231
|
+
function ArtifactViewerPanelComponent_Conditional_5_Conditional_4_Conditional_1_Template(rf, ctx) { if (rf & 1) {
|
|
232
|
+
const _r13 = i0.ɵɵgetCurrentView();
|
|
233
|
+
i0.ɵɵelementStart(0, "div", 52)(1, "button", 53);
|
|
234
|
+
i0.ɵɵlistener("click", function ArtifactViewerPanelComponent_Conditional_5_Conditional_4_Conditional_1_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r13); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onPrintDisplayContent()); });
|
|
235
|
+
i0.ɵɵelement(2, "i", 54);
|
|
165
236
|
i0.ɵɵtext(3, " Print ");
|
|
166
237
|
i0.ɵɵelementEnd();
|
|
167
|
-
i0.ɵɵelementStart(4, "button",
|
|
168
|
-
i0.ɵɵlistener("click", function
|
|
169
|
-
i0.ɵɵelement(5, "i",
|
|
238
|
+
i0.ɵɵelementStart(4, "button", 55);
|
|
239
|
+
i0.ɵɵlistener("click", function ArtifactViewerPanelComponent_Conditional_5_Conditional_4_Conditional_1_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r13); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onCopyDisplayContent()); });
|
|
240
|
+
i0.ɵɵelement(5, "i", 56);
|
|
170
241
|
i0.ɵɵtext(6, " Copy ");
|
|
171
242
|
i0.ɵɵelementEnd()();
|
|
172
|
-
i0.ɵɵtemplate(7,
|
|
243
|
+
i0.ɵɵtemplate(7, ArtifactViewerPanelComponent_Conditional_5_Conditional_4_Conditional_1_Conditional_7_Template, 2, 5, "div", 57)(8, ArtifactViewerPanelComponent_Conditional_5_Conditional_4_Conditional_1_Conditional_8_Template, 1, 1, "div", 58);
|
|
173
244
|
} if (rf & 2) {
|
|
174
|
-
const
|
|
245
|
+
const ctx_r1 = i0.ɵɵnextContext(3);
|
|
175
246
|
i0.ɵɵadvance(7);
|
|
176
|
-
i0.ɵɵconditional(
|
|
247
|
+
i0.ɵɵconditional(ctx_r1.displayMarkdown ? 7 : ctx_r1.displayHtml ? 8 : -1);
|
|
177
248
|
} }
|
|
178
|
-
function
|
|
179
|
-
i0.ɵɵelementStart(0, "div",
|
|
180
|
-
i0.ɵɵtemplate(1,
|
|
249
|
+
function ArtifactViewerPanelComponent_Conditional_5_Conditional_4_Template(rf, ctx) { if (rf & 1) {
|
|
250
|
+
i0.ɵɵelementStart(0, "div", 38);
|
|
251
|
+
i0.ɵɵtemplate(1, ArtifactViewerPanelComponent_Conditional_5_Conditional_4_Conditional_1_Template, 9, 1);
|
|
181
252
|
i0.ɵɵelementEnd();
|
|
182
253
|
} if (rf & 2) {
|
|
183
|
-
const
|
|
254
|
+
const ctx_r1 = i0.ɵɵnextContext(2);
|
|
184
255
|
i0.ɵɵadvance();
|
|
185
|
-
i0.ɵɵconditional(
|
|
256
|
+
i0.ɵɵconditional(ctx_r1.displayMarkdown || ctx_r1.displayHtml ? 1 : -1);
|
|
186
257
|
} }
|
|
187
|
-
function
|
|
188
|
-
i0.ɵɵelementStart(0, "div",
|
|
258
|
+
function ArtifactViewerPanelComponent_Conditional_5_Conditional_29_Template(rf, ctx) { if (rf & 1) {
|
|
259
|
+
i0.ɵɵelementStart(0, "div", 42)(1, "label");
|
|
189
260
|
i0.ɵɵtext(2, "Artifact Description");
|
|
190
261
|
i0.ɵɵelementEnd();
|
|
191
262
|
i0.ɵɵelementStart(3, "span");
|
|
192
263
|
i0.ɵɵtext(4);
|
|
193
264
|
i0.ɵɵelementEnd()();
|
|
194
265
|
} if (rf & 2) {
|
|
195
|
-
const
|
|
266
|
+
const ctx_r1 = i0.ɵɵnextContext(2);
|
|
196
267
|
i0.ɵɵadvance(4);
|
|
197
|
-
i0.ɵɵtextInterpolate(
|
|
268
|
+
i0.ɵɵtextInterpolate(ctx_r1.artifact.Description);
|
|
198
269
|
} }
|
|
199
|
-
function
|
|
200
|
-
i0.ɵɵelementStart(0, "div",
|
|
270
|
+
function ArtifactViewerPanelComponent_Conditional_5_Conditional_30_Template(rf, ctx) { if (rf & 1) {
|
|
271
|
+
i0.ɵɵelementStart(0, "div", 42)(1, "label");
|
|
201
272
|
i0.ɵɵtext(2, "Version Description");
|
|
202
273
|
i0.ɵɵelementEnd();
|
|
203
274
|
i0.ɵɵelementStart(3, "span");
|
|
204
275
|
i0.ɵɵtext(4);
|
|
205
276
|
i0.ɵɵelementEnd()();
|
|
206
277
|
} if (rf & 2) {
|
|
207
|
-
const
|
|
278
|
+
const ctx_r1 = i0.ɵɵnextContext(2);
|
|
208
279
|
i0.ɵɵadvance(4);
|
|
209
|
-
i0.ɵɵtextInterpolate(
|
|
280
|
+
i0.ɵɵtextInterpolate(ctx_r1.artifactVersion == null ? null : ctx_r1.artifactVersion.Description);
|
|
210
281
|
} }
|
|
211
|
-
function
|
|
282
|
+
function ArtifactViewerPanelComponent_Conditional_5_Conditional_31_For_5_Conditional_3_Template(rf, ctx) { if (rf & 1) {
|
|
212
283
|
i0.ɵɵelementStart(0, "span");
|
|
213
284
|
i0.ɵɵtext(1);
|
|
214
285
|
i0.ɵɵelementEnd();
|
|
215
286
|
} if (rf & 2) {
|
|
216
|
-
const
|
|
287
|
+
const attr_r14 = i0.ɵɵnextContext().$implicit;
|
|
217
288
|
i0.ɵɵadvance();
|
|
218
|
-
i0.ɵɵtextInterpolate(
|
|
289
|
+
i0.ɵɵtextInterpolate(attr_r14.Value);
|
|
219
290
|
} }
|
|
220
|
-
function
|
|
221
|
-
i0.ɵɵelementStart(0, "span",
|
|
291
|
+
function ArtifactViewerPanelComponent_Conditional_5_Conditional_31_For_5_Conditional_4_Template(rf, ctx) { if (rf & 1) {
|
|
292
|
+
i0.ɵɵelementStart(0, "span", 62);
|
|
222
293
|
i0.ɵɵtext(1, "Empty");
|
|
223
294
|
i0.ɵɵelementEnd();
|
|
224
295
|
} }
|
|
225
|
-
function
|
|
226
|
-
i0.ɵɵelementStart(0, "div",
|
|
296
|
+
function ArtifactViewerPanelComponent_Conditional_5_Conditional_31_For_5_Template(rf, ctx) { if (rf & 1) {
|
|
297
|
+
i0.ɵɵelementStart(0, "div", 61)(1, "label");
|
|
227
298
|
i0.ɵɵtext(2);
|
|
228
299
|
i0.ɵɵelementEnd();
|
|
229
|
-
i0.ɵɵtemplate(3,
|
|
300
|
+
i0.ɵɵtemplate(3, ArtifactViewerPanelComponent_Conditional_5_Conditional_31_For_5_Conditional_3_Template, 2, 1, "span")(4, ArtifactViewerPanelComponent_Conditional_5_Conditional_31_For_5_Conditional_4_Template, 2, 0, "span", 62);
|
|
230
301
|
i0.ɵɵelementEnd();
|
|
231
302
|
} if (rf & 2) {
|
|
232
|
-
const
|
|
303
|
+
const attr_r14 = ctx.$implicit;
|
|
233
304
|
i0.ɵɵadvance(2);
|
|
234
|
-
i0.ɵɵtextInterpolate(
|
|
305
|
+
i0.ɵɵtextInterpolate(attr_r14.Name);
|
|
235
306
|
i0.ɵɵadvance();
|
|
236
|
-
i0.ɵɵconditional(
|
|
307
|
+
i0.ɵɵconditional(attr_r14.Value ? 3 : 4);
|
|
237
308
|
} }
|
|
238
|
-
function
|
|
239
|
-
i0.ɵɵelementStart(0, "div",
|
|
309
|
+
function ArtifactViewerPanelComponent_Conditional_5_Conditional_31_Template(rf, ctx) { if (rf & 1) {
|
|
310
|
+
i0.ɵɵelementStart(0, "div", 43)(1, "h4");
|
|
240
311
|
i0.ɵɵtext(2, "Version Attributes");
|
|
241
312
|
i0.ɵɵelementEnd();
|
|
242
|
-
i0.ɵɵelementStart(3, "div",
|
|
243
|
-
i0.ɵɵrepeaterCreate(4,
|
|
313
|
+
i0.ɵɵelementStart(3, "div", 60);
|
|
314
|
+
i0.ɵɵrepeaterCreate(4, ArtifactViewerPanelComponent_Conditional_5_Conditional_31_For_5_Template, 5, 2, "div", 61, _forTrack0);
|
|
244
315
|
i0.ɵɵelementEnd()();
|
|
245
316
|
} if (rf & 2) {
|
|
246
|
-
const
|
|
317
|
+
const ctx_r1 = i0.ɵɵnextContext(2);
|
|
247
318
|
i0.ɵɵadvance(4);
|
|
248
|
-
i0.ɵɵrepeater(
|
|
319
|
+
i0.ɵɵrepeater(ctx_r1.filteredAttributes);
|
|
249
320
|
} }
|
|
250
|
-
function
|
|
251
|
-
i0.ɵɵelement(0, "i",
|
|
321
|
+
function ArtifactViewerPanelComponent_Conditional_5_Conditional_33_For_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
|
|
322
|
+
i0.ɵɵelement(0, "i", 66);
|
|
252
323
|
} }
|
|
253
|
-
function
|
|
254
|
-
i0.ɵɵelement(0, "i",
|
|
324
|
+
function ArtifactViewerPanelComponent_Conditional_5_Conditional_33_For_2_Conditional_3_Template(rf, ctx) { if (rf & 1) {
|
|
325
|
+
i0.ɵɵelement(0, "i", 67);
|
|
255
326
|
} }
|
|
256
|
-
function
|
|
257
|
-
const
|
|
258
|
-
i0.ɵɵelementStart(0, "div",
|
|
259
|
-
i0.ɵɵlistener("click", function
|
|
260
|
-
i0.ɵɵelementStart(1, "div",
|
|
261
|
-
i0.ɵɵtemplate(2,
|
|
327
|
+
function ArtifactViewerPanelComponent_Conditional_5_Conditional_33_For_2_Template(rf, ctx) { if (rf & 1) {
|
|
328
|
+
const _r15 = i0.ɵɵgetCurrentView();
|
|
329
|
+
i0.ɵɵelementStart(0, "div", 64);
|
|
330
|
+
i0.ɵɵlistener("click", function ArtifactViewerPanelComponent_Conditional_5_Conditional_33_For_2_Template_div_click_0_listener() { const link_r16 = i0.ɵɵrestoreView(_r15).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(link_r16.hasAccess ? ctx_r1.onNavigateToLink(link_r16) : null); });
|
|
331
|
+
i0.ɵɵelementStart(1, "div", 65);
|
|
332
|
+
i0.ɵɵtemplate(2, ArtifactViewerPanelComponent_Conditional_5_Conditional_33_For_2_Conditional_2_Template, 1, 0, "i", 66)(3, ArtifactViewerPanelComponent_Conditional_5_Conditional_33_For_2_Conditional_3_Template, 1, 0, "i", 67);
|
|
262
333
|
i0.ɵɵelementEnd();
|
|
263
|
-
i0.ɵɵelementStart(4, "div",
|
|
334
|
+
i0.ɵɵelementStart(4, "div", 68)(5, "div", 69);
|
|
264
335
|
i0.ɵɵtext(6);
|
|
265
336
|
i0.ɵɵelementEnd();
|
|
266
|
-
i0.ɵɵelementStart(7, "div",
|
|
337
|
+
i0.ɵɵelementStart(7, "div", 70);
|
|
267
338
|
i0.ɵɵtext(8);
|
|
268
339
|
i0.ɵɵelementEnd()();
|
|
269
|
-
i0.ɵɵelementStart(9, "div",
|
|
270
|
-
i0.ɵɵelement(10, "i",
|
|
340
|
+
i0.ɵɵelementStart(9, "div", 71);
|
|
341
|
+
i0.ɵɵelement(10, "i", 72);
|
|
271
342
|
i0.ɵɵelementEnd()();
|
|
272
343
|
} if (rf & 2) {
|
|
273
|
-
const
|
|
274
|
-
i0.ɵɵclassProp("disabled", !
|
|
275
|
-
i0.ɵɵproperty("title",
|
|
344
|
+
const link_r16 = ctx.$implicit;
|
|
345
|
+
i0.ɵɵclassProp("disabled", !link_r16.hasAccess)("clickable", link_r16.hasAccess);
|
|
346
|
+
i0.ɵɵproperty("title", link_r16.hasAccess ? "Click to open" : "No access");
|
|
276
347
|
i0.ɵɵadvance(2);
|
|
277
|
-
i0.ɵɵconditional(
|
|
348
|
+
i0.ɵɵconditional(link_r16.type === "conversation" ? 2 : 3);
|
|
278
349
|
i0.ɵɵadvance(4);
|
|
279
|
-
i0.ɵɵtextInterpolate(
|
|
350
|
+
i0.ɵɵtextInterpolate(link_r16.name);
|
|
280
351
|
i0.ɵɵadvance(2);
|
|
281
|
-
i0.ɵɵtextInterpolate(
|
|
352
|
+
i0.ɵɵtextInterpolate(link_r16.type === "conversation" ? "Conversation" : "Collection");
|
|
282
353
|
} }
|
|
283
|
-
function
|
|
284
|
-
i0.ɵɵelementStart(0, "div",
|
|
285
|
-
i0.ɵɵrepeaterCreate(1,
|
|
354
|
+
function ArtifactViewerPanelComponent_Conditional_5_Conditional_33_Template(rf, ctx) { if (rf & 1) {
|
|
355
|
+
i0.ɵɵelementStart(0, "div", 45);
|
|
356
|
+
i0.ɵɵrepeaterCreate(1, ArtifactViewerPanelComponent_Conditional_5_Conditional_33_For_2_Template, 11, 8, "div", 63, _forTrack1);
|
|
286
357
|
i0.ɵɵelementEnd();
|
|
287
358
|
} if (rf & 2) {
|
|
288
|
-
const
|
|
359
|
+
const ctx_r1 = i0.ɵɵnextContext(2);
|
|
289
360
|
i0.ɵɵadvance();
|
|
290
|
-
i0.ɵɵrepeater(
|
|
361
|
+
i0.ɵɵrepeater(ctx_r1.linksToShow);
|
|
291
362
|
} }
|
|
292
|
-
function
|
|
293
|
-
i0.ɵɵelementStart(0, "div",
|
|
294
|
-
i0.ɵɵelement(1, "i",
|
|
363
|
+
function ArtifactViewerPanelComponent_Conditional_5_Conditional_34_Template(rf, ctx) { if (rf & 1) {
|
|
364
|
+
i0.ɵɵelementStart(0, "div", 46);
|
|
365
|
+
i0.ɵɵelement(1, "i", 73);
|
|
295
366
|
i0.ɵɵelementStart(2, "p");
|
|
296
367
|
i0.ɵɵtext(3, "No links available");
|
|
297
368
|
i0.ɵɵelementEnd()();
|
|
298
369
|
} }
|
|
299
|
-
function
|
|
370
|
+
function ArtifactViewerPanelComponent_Conditional_5_Conditional_35_Conditional_0_ng_container_1_Template(rf, ctx) { if (rf & 1) {
|
|
300
371
|
i0.ɵɵelementContainer(0);
|
|
301
372
|
} }
|
|
302
|
-
function
|
|
303
|
-
i0.ɵɵelementStart(0, "div",
|
|
304
|
-
i0.ɵɵtemplate(1,
|
|
373
|
+
function ArtifactViewerPanelComponent_Conditional_5_Conditional_35_Conditional_0_Template(rf, ctx) { if (rf & 1) {
|
|
374
|
+
i0.ɵɵelementStart(0, "div", 74);
|
|
375
|
+
i0.ɵɵtemplate(1, ArtifactViewerPanelComponent_Conditional_5_Conditional_35_Conditional_0_ng_container_1_Template, 1, 0, "ng-container", 75);
|
|
305
376
|
i0.ɵɵelementEnd();
|
|
306
377
|
} if (rf & 2) {
|
|
307
|
-
const
|
|
378
|
+
const ctx_r1 = i0.ɵɵnextContext(3);
|
|
308
379
|
i0.ɵɵadvance();
|
|
309
|
-
i0.ɵɵproperty("ngComponentOutlet", ctx)("ngComponentOutletInputs",
|
|
380
|
+
i0.ɵɵproperty("ngComponentOutlet", ctx)("ngComponentOutletInputs", ctx_r1.GetComponentInputs(ctx_r1.activeTab));
|
|
310
381
|
} }
|
|
311
|
-
function
|
|
312
|
-
i0.ɵɵelementStart(0, "div",
|
|
313
|
-
i0.ɵɵelement(1, "mj-markdown",
|
|
382
|
+
function ArtifactViewerPanelComponent_Conditional_5_Conditional_35_Conditional_1_Conditional_0_Case_1_Template(rf, ctx) { if (rf & 1) {
|
|
383
|
+
i0.ɵɵelementStart(0, "div", 77);
|
|
384
|
+
i0.ɵɵelement(1, "mj-markdown", 59);
|
|
314
385
|
i0.ɵɵelementEnd();
|
|
315
386
|
} if (rf & 2) {
|
|
316
|
-
const
|
|
387
|
+
const tabData_r17 = i0.ɵɵnextContext();
|
|
317
388
|
i0.ɵɵadvance();
|
|
318
|
-
i0.ɵɵproperty("data",
|
|
389
|
+
i0.ɵɵproperty("data", tabData_r17.content)("enableCollapsibleHeadings", true)("enableLineNumbers", true)("enableSmartypants", true)("enableHtml", true);
|
|
319
390
|
} }
|
|
320
|
-
function
|
|
321
|
-
const
|
|
322
|
-
i0.ɵɵelementStart(0, "div",
|
|
323
|
-
i0.ɵɵlistener("click", function
|
|
324
|
-
i0.ɵɵelement(3, "i",
|
|
391
|
+
function ArtifactViewerPanelComponent_Conditional_5_Conditional_35_Conditional_1_Conditional_0_Case_2_Template(rf, ctx) { if (rf & 1) {
|
|
392
|
+
const _r18 = i0.ɵɵgetCurrentView();
|
|
393
|
+
i0.ɵɵelementStart(0, "div", 78)(1, "div", 82)(2, "button", 83);
|
|
394
|
+
i0.ɵɵlistener("click", function ArtifactViewerPanelComponent_Conditional_5_Conditional_35_Conditional_1_Conditional_0_Case_2_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r18); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.onCopyToClipboard()); });
|
|
395
|
+
i0.ɵɵelement(3, "i", 56);
|
|
325
396
|
i0.ɵɵtext(4, " Copy ");
|
|
326
397
|
i0.ɵɵelementEnd()();
|
|
327
|
-
i0.ɵɵelementStart(5, "div",
|
|
328
|
-
i0.ɵɵelement(6, "mj-code-editor",
|
|
398
|
+
i0.ɵɵelementStart(5, "div", 84);
|
|
399
|
+
i0.ɵɵelement(6, "mj-code-editor", 85);
|
|
329
400
|
i0.ɵɵelementEnd()();
|
|
330
401
|
} if (rf & 2) {
|
|
331
|
-
const
|
|
402
|
+
const tabData_r17 = i0.ɵɵnextContext();
|
|
332
403
|
i0.ɵɵadvance(6);
|
|
333
|
-
i0.ɵɵproperty("value",
|
|
404
|
+
i0.ɵɵproperty("value", tabData_r17.content)("language", "json")("readonly", true)("lineWrapping", true);
|
|
334
405
|
} }
|
|
335
|
-
function
|
|
336
|
-
const
|
|
337
|
-
i0.ɵɵelementStart(0, "div",
|
|
338
|
-
i0.ɵɵlistener("click", function
|
|
339
|
-
i0.ɵɵelement(3, "i",
|
|
406
|
+
function ArtifactViewerPanelComponent_Conditional_5_Conditional_35_Conditional_1_Conditional_0_Case_3_Template(rf, ctx) { if (rf & 1) {
|
|
407
|
+
const _r19 = i0.ɵɵgetCurrentView();
|
|
408
|
+
i0.ɵɵelementStart(0, "div", 79)(1, "div", 86)(2, "button", 87);
|
|
409
|
+
i0.ɵɵlistener("click", function ArtifactViewerPanelComponent_Conditional_5_Conditional_35_Conditional_1_Conditional_0_Case_3_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r19); const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.onCopyToClipboard()); });
|
|
410
|
+
i0.ɵɵelement(3, "i", 56);
|
|
340
411
|
i0.ɵɵtext(4, " Copy ");
|
|
341
412
|
i0.ɵɵelementEnd()();
|
|
342
|
-
i0.ɵɵelementStart(5, "div",
|
|
343
|
-
i0.ɵɵelement(6, "mj-code-editor",
|
|
413
|
+
i0.ɵɵelementStart(5, "div", 88);
|
|
414
|
+
i0.ɵɵelement(6, "mj-code-editor", 85);
|
|
344
415
|
i0.ɵɵelementEnd()();
|
|
345
416
|
} if (rf & 2) {
|
|
346
|
-
const
|
|
417
|
+
const tabData_r17 = i0.ɵɵnextContext();
|
|
347
418
|
i0.ɵɵadvance(6);
|
|
348
|
-
i0.ɵɵproperty("value",
|
|
419
|
+
i0.ɵɵproperty("value", tabData_r17.content)("language", tabData_r17.language || "typescript")("readonly", true)("lineWrapping", true);
|
|
349
420
|
} }
|
|
350
|
-
function
|
|
351
|
-
i0.ɵɵelement(0, "div",
|
|
421
|
+
function ArtifactViewerPanelComponent_Conditional_5_Conditional_35_Conditional_1_Conditional_0_Case_4_Template(rf, ctx) { if (rf & 1) {
|
|
422
|
+
i0.ɵɵelement(0, "div", 80);
|
|
352
423
|
} if (rf & 2) {
|
|
353
|
-
const
|
|
354
|
-
i0.ɵɵproperty("innerHTML",
|
|
424
|
+
const tabData_r17 = i0.ɵɵnextContext();
|
|
425
|
+
i0.ɵɵproperty("innerHTML", tabData_r17.content, i0.ɵɵsanitizeHtml);
|
|
355
426
|
} }
|
|
356
|
-
function
|
|
357
|
-
i0.ɵɵelementStart(0, "pre",
|
|
427
|
+
function ArtifactViewerPanelComponent_Conditional_5_Conditional_35_Conditional_1_Conditional_0_Case_5_Template(rf, ctx) { if (rf & 1) {
|
|
428
|
+
i0.ɵɵelementStart(0, "pre", 81);
|
|
358
429
|
i0.ɵɵtext(1);
|
|
359
430
|
i0.ɵɵelementEnd();
|
|
360
431
|
} if (rf & 2) {
|
|
361
|
-
const
|
|
432
|
+
const tabData_r17 = i0.ɵɵnextContext();
|
|
362
433
|
i0.ɵɵadvance();
|
|
363
|
-
i0.ɵɵtextInterpolate(
|
|
434
|
+
i0.ɵɵtextInterpolate(tabData_r17.content);
|
|
364
435
|
} }
|
|
365
|
-
function
|
|
366
|
-
i0.ɵɵelementStart(0, "div",
|
|
367
|
-
i0.ɵɵtemplate(1,
|
|
436
|
+
function ArtifactViewerPanelComponent_Conditional_5_Conditional_35_Conditional_1_Conditional_0_Template(rf, ctx) { if (rf & 1) {
|
|
437
|
+
i0.ɵɵelementStart(0, "div", 76);
|
|
438
|
+
i0.ɵɵtemplate(1, ArtifactViewerPanelComponent_Conditional_5_Conditional_35_Conditional_1_Conditional_0_Case_1_Template, 2, 5, "div", 77)(2, ArtifactViewerPanelComponent_Conditional_5_Conditional_35_Conditional_1_Conditional_0_Case_2_Template, 7, 4, "div", 78)(3, ArtifactViewerPanelComponent_Conditional_5_Conditional_35_Conditional_1_Conditional_0_Case_3_Template, 7, 4, "div", 79)(4, ArtifactViewerPanelComponent_Conditional_5_Conditional_35_Conditional_1_Conditional_0_Case_4_Template, 1, 1, "div", 80)(5, ArtifactViewerPanelComponent_Conditional_5_Conditional_35_Conditional_1_Conditional_0_Case_5_Template, 2, 1, "pre", 81);
|
|
368
439
|
i0.ɵɵelementEnd();
|
|
369
440
|
} if (rf & 2) {
|
|
370
441
|
let tmp_5_0;
|
|
371
442
|
i0.ɵɵadvance();
|
|
372
443
|
i0.ɵɵconditional((tmp_5_0 = ctx.type) === "markdown" ? 1 : tmp_5_0 === "json" ? 2 : tmp_5_0 === "code" ? 3 : tmp_5_0 === "html" ? 4 : tmp_5_0 === "plaintext" ? 5 : -1);
|
|
373
444
|
} }
|
|
374
|
-
function
|
|
375
|
-
i0.ɵɵtemplate(0,
|
|
445
|
+
function ArtifactViewerPanelComponent_Conditional_5_Conditional_35_Conditional_1_Template(rf, ctx) { if (rf & 1) {
|
|
446
|
+
i0.ɵɵtemplate(0, ArtifactViewerPanelComponent_Conditional_5_Conditional_35_Conditional_1_Conditional_0_Template, 6, 1, "div", 76);
|
|
376
447
|
} if (rf & 2) {
|
|
377
448
|
let tmp_3_0;
|
|
378
|
-
const
|
|
379
|
-
i0.ɵɵconditional((tmp_3_0 =
|
|
449
|
+
const ctx_r1 = i0.ɵɵnextContext(3);
|
|
450
|
+
i0.ɵɵconditional((tmp_3_0 = ctx_r1.GetTabContent(ctx_r1.activeTab)) ? 0 : -1, tmp_3_0);
|
|
380
451
|
} }
|
|
381
|
-
function
|
|
382
|
-
i0.ɵɵtemplate(0,
|
|
452
|
+
function ArtifactViewerPanelComponent_Conditional_5_Conditional_35_Template(rf, ctx) { if (rf & 1) {
|
|
453
|
+
i0.ɵɵtemplate(0, ArtifactViewerPanelComponent_Conditional_5_Conditional_35_Conditional_0_Template, 2, 2, "div", 74)(1, ArtifactViewerPanelComponent_Conditional_5_Conditional_35_Conditional_1_Template, 1, 1);
|
|
383
454
|
} if (rf & 2) {
|
|
384
455
|
let tmp_2_0;
|
|
385
|
-
const
|
|
386
|
-
i0.ɵɵconditional((tmp_2_0 =
|
|
456
|
+
const ctx_r1 = i0.ɵɵnextContext(2);
|
|
457
|
+
i0.ɵɵconditional((tmp_2_0 = ctx_r1.GetComponentTabType(ctx_r1.activeTab)) ? 0 : 1, tmp_2_0);
|
|
387
458
|
} }
|
|
388
|
-
function
|
|
389
|
-
i0.ɵɵelementStart(0, "div",
|
|
390
|
-
i0.ɵɵ
|
|
391
|
-
i0.ɵɵ
|
|
392
|
-
i0.ɵɵ
|
|
393
|
-
i0.ɵɵ
|
|
394
|
-
i0.ɵɵ
|
|
395
|
-
i0.ɵɵtext(11, "Type");
|
|
459
|
+
function ArtifactViewerPanelComponent_Conditional_5_Template(rf, ctx) { if (rf & 1) {
|
|
460
|
+
i0.ɵɵelementStart(0, "div", 34);
|
|
461
|
+
i0.ɵɵtemplate(1, ArtifactViewerPanelComponent_Conditional_5_Conditional_1_Template, 3, 0, "div", 35);
|
|
462
|
+
i0.ɵɵelementStart(2, "div", 36);
|
|
463
|
+
i0.ɵɵtemplate(3, ArtifactViewerPanelComponent_Conditional_5_Conditional_3_Template, 2, 6, "div", 37)(4, ArtifactViewerPanelComponent_Conditional_5_Conditional_4_Template, 2, 1, "div", 38);
|
|
464
|
+
i0.ɵɵelementStart(5, "div", 39)(6, "div", 40)(7, "div", 41)(8, "label");
|
|
465
|
+
i0.ɵɵtext(9, "Type");
|
|
396
466
|
i0.ɵɵelementEnd();
|
|
397
|
-
i0.ɵɵelementStart(
|
|
398
|
-
i0.ɵɵtext(
|
|
467
|
+
i0.ɵɵelementStart(10, "span");
|
|
468
|
+
i0.ɵɵtext(11);
|
|
399
469
|
i0.ɵɵelementEnd()();
|
|
400
|
-
i0.ɵɵelementStart(
|
|
401
|
-
i0.ɵɵtext(
|
|
470
|
+
i0.ɵɵelementStart(12, "div", 41)(13, "label");
|
|
471
|
+
i0.ɵɵtext(14, "Version");
|
|
402
472
|
i0.ɵɵelementEnd();
|
|
403
|
-
i0.ɵɵelementStart(
|
|
404
|
-
i0.ɵɵtext(
|
|
473
|
+
i0.ɵɵelementStart(15, "span");
|
|
474
|
+
i0.ɵɵtext(16);
|
|
405
475
|
i0.ɵɵelementEnd()();
|
|
406
|
-
i0.ɵɵelementStart(
|
|
407
|
-
i0.ɵɵtext(
|
|
476
|
+
i0.ɵɵelementStart(17, "div", 41)(18, "label");
|
|
477
|
+
i0.ɵɵtext(19, "Created");
|
|
408
478
|
i0.ɵɵelementEnd();
|
|
409
|
-
i0.ɵɵelementStart(
|
|
410
|
-
i0.ɵɵtext(
|
|
411
|
-
i0.ɵɵpipe(
|
|
479
|
+
i0.ɵɵelementStart(20, "span");
|
|
480
|
+
i0.ɵɵtext(21);
|
|
481
|
+
i0.ɵɵpipe(22, "date");
|
|
412
482
|
i0.ɵɵelementEnd()();
|
|
413
|
-
i0.ɵɵelementStart(
|
|
414
|
-
i0.ɵɵtext(
|
|
483
|
+
i0.ɵɵelementStart(23, "div", 41)(24, "label");
|
|
484
|
+
i0.ɵɵtext(25, "Updated");
|
|
415
485
|
i0.ɵɵelementEnd();
|
|
416
|
-
i0.ɵɵelementStart(
|
|
417
|
-
i0.ɵɵtext(
|
|
418
|
-
i0.ɵɵpipe(
|
|
486
|
+
i0.ɵɵelementStart(26, "span");
|
|
487
|
+
i0.ɵɵtext(27);
|
|
488
|
+
i0.ɵɵpipe(28, "date");
|
|
419
489
|
i0.ɵɵelementEnd()();
|
|
420
|
-
i0.ɵɵtemplate(
|
|
490
|
+
i0.ɵɵtemplate(29, ArtifactViewerPanelComponent_Conditional_5_Conditional_29_Template, 5, 1, "div", 42)(30, ArtifactViewerPanelComponent_Conditional_5_Conditional_30_Template, 5, 1, "div", 42);
|
|
421
491
|
i0.ɵɵelementEnd();
|
|
422
|
-
i0.ɵɵtemplate(
|
|
492
|
+
i0.ɵɵtemplate(31, ArtifactViewerPanelComponent_Conditional_5_Conditional_31_Template, 6, 0, "div", 43);
|
|
423
493
|
i0.ɵɵelementEnd();
|
|
424
|
-
i0.ɵɵelementStart(
|
|
425
|
-
i0.ɵɵtemplate(
|
|
494
|
+
i0.ɵɵelementStart(32, "div", 44);
|
|
495
|
+
i0.ɵɵtemplate(33, ArtifactViewerPanelComponent_Conditional_5_Conditional_33_Template, 3, 0, "div", 45)(34, ArtifactViewerPanelComponent_Conditional_5_Conditional_34_Template, 4, 0, "div", 46);
|
|
426
496
|
i0.ɵɵelementEnd();
|
|
427
|
-
i0.ɵɵtemplate(
|
|
497
|
+
i0.ɵɵtemplate(35, ArtifactViewerPanelComponent_Conditional_5_Conditional_35_Template, 2, 1);
|
|
428
498
|
i0.ɵɵelementEnd()();
|
|
429
499
|
} if (rf & 2) {
|
|
430
|
-
const
|
|
500
|
+
const ctx_r1 = i0.ɵɵnextContext();
|
|
501
|
+
i0.ɵɵclassProp("no-tabs", !ctx_r1.showTabs);
|
|
502
|
+
i0.ɵɵadvance();
|
|
503
|
+
i0.ɵɵconditional(ctx_r1.showTabs ? 1 : -1);
|
|
431
504
|
i0.ɵɵadvance(2);
|
|
432
|
-
i0.ɵɵ
|
|
433
|
-
i0.ɵɵadvance(3);
|
|
434
|
-
i0.ɵɵconditional(ctx_r0.hasPlugin && ctx_r0.artifactVersion && ctx_r0.artifactTypeName ? 5 : -1);
|
|
505
|
+
i0.ɵɵconditional(ctx_r1.hasPlugin && ctx_r1.artifactVersion && ctx_r1.artifactTypeName ? 3 : -1);
|
|
435
506
|
i0.ɵɵadvance();
|
|
436
|
-
i0.ɵɵconditional(
|
|
507
|
+
i0.ɵɵconditional(ctx_r1.activeTab === "display" && (!ctx_r1.hasPlugin || !ctx_r1.artifactVersion) ? 4 : -1);
|
|
437
508
|
i0.ɵɵadvance();
|
|
438
|
-
i0.ɵɵstyleProp("display",
|
|
509
|
+
i0.ɵɵstyleProp("display", ctx_r1.activeTab === "details" ? "block" : "none");
|
|
439
510
|
i0.ɵɵadvance(6);
|
|
440
|
-
i0.ɵɵtextInterpolate(
|
|
511
|
+
i0.ɵɵtextInterpolate(ctx_r1.artifact.Type);
|
|
441
512
|
i0.ɵɵadvance(5);
|
|
442
|
-
i0.ɵɵtextInterpolate((
|
|
513
|
+
i0.ɵɵtextInterpolate((ctx_r1.artifactVersion == null ? null : ctx_r1.artifactVersion.VersionNumber) || 1);
|
|
443
514
|
i0.ɵɵadvance(5);
|
|
444
|
-
i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(
|
|
515
|
+
i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(22, 18, ctx_r1.artifact.__mj_CreatedAt, "short"));
|
|
445
516
|
i0.ɵɵadvance(6);
|
|
446
|
-
i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(
|
|
517
|
+
i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(28, 21, ctx_r1.artifactVersion == null ? null : ctx_r1.artifactVersion.__mj_UpdatedAt, "short"));
|
|
447
518
|
i0.ɵɵadvance(2);
|
|
448
|
-
i0.ɵɵconditional(
|
|
519
|
+
i0.ɵɵconditional(ctx_r1.artifact.Description ? 29 : -1);
|
|
449
520
|
i0.ɵɵadvance();
|
|
450
|
-
i0.ɵɵconditional((
|
|
521
|
+
i0.ɵɵconditional((ctx_r1.artifactVersion == null ? null : ctx_r1.artifactVersion.Description) && ctx_r1.artifact.Description && (ctx_r1.artifactVersion == null ? null : ctx_r1.artifactVersion.Description) !== ctx_r1.artifact.Description ? 30 : -1);
|
|
451
522
|
i0.ɵɵadvance();
|
|
452
|
-
i0.ɵɵconditional(
|
|
523
|
+
i0.ɵɵconditional(ctx_r1.filteredAttributes.length > 0 ? 31 : -1);
|
|
453
524
|
i0.ɵɵadvance();
|
|
454
|
-
i0.ɵɵstyleProp("display",
|
|
525
|
+
i0.ɵɵstyleProp("display", ctx_r1.activeTab === "links" ? "block" : "none");
|
|
455
526
|
i0.ɵɵadvance();
|
|
456
|
-
i0.ɵɵconditional(
|
|
527
|
+
i0.ɵɵconditional(ctx_r1.linksToShow.length > 0 ? 33 : 34);
|
|
457
528
|
i0.ɵɵadvance(2);
|
|
458
|
-
i0.ɵɵconditional(
|
|
529
|
+
i0.ɵɵconditional(ctx_r1.activeTab !== "display" && ctx_r1.activeTab !== "details" && ctx_r1.activeTab !== "links" ? 35 : -1);
|
|
459
530
|
} }
|
|
460
531
|
export class ArtifactViewerPanelComponent {
|
|
461
532
|
notificationService;
|
|
@@ -466,6 +537,10 @@ export class ArtifactViewerPanelComponent {
|
|
|
466
537
|
environmentId;
|
|
467
538
|
versionNumber; // Version to display
|
|
468
539
|
showSaveToCollection = true; // Control whether Save to Collection button is shown
|
|
540
|
+
showHeader = true; // Control whether the header section is shown
|
|
541
|
+
showTabs = true; // Control whether the tab navigation is shown (false = show only Display tab content)
|
|
542
|
+
showCloseButton = true; // Control whether the close button is shown in header
|
|
543
|
+
showMaximizeButton = true; // Control whether the maximize/restore button is shown in header
|
|
469
544
|
refreshTrigger;
|
|
470
545
|
viewContext = null; // Where artifact is being viewed
|
|
471
546
|
contextCollectionId; // If viewing in collection, which collection
|
|
@@ -1396,67 +1471,27 @@ export class ArtifactViewerPanelComponent {
|
|
|
1396
1471
|
} if (rf & 2) {
|
|
1397
1472
|
let _t;
|
|
1398
1473
|
i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.pluginViewer = _t.first);
|
|
1399
|
-
} }, inputs: { artifactId: "artifactId", currentUser: "currentUser", environmentId: "environmentId", versionNumber: "versionNumber", showSaveToCollection: "showSaveToCollection", refreshTrigger: "refreshTrigger", viewContext: "viewContext", contextCollectionId: "contextCollectionId", canShare: "canShare", canEdit: "canEdit", isMaximized: "isMaximized" }, outputs: { closed: "closed", saveToCollectionRequested: "saveToCollectionRequested", navigateToLink: "navigateToLink", shareRequested: "shareRequested", maximizeToggled: "maximizeToggled", openEntityRecord: "openEntityRecord" }, features: [i0.ɵɵNgOnChangesFeature], decls:
|
|
1400
|
-
i0.ɵɵelementStart(0, "div", 0)
|
|
1401
|
-
i0.ɵɵ
|
|
1402
|
-
i0.ɵɵ
|
|
1403
|
-
i0.ɵɵ
|
|
1404
|
-
i0.ɵɵtemplate(6, ArtifactViewerPanelComponent_Conditional_6_Template, 2, 1, "p", 4);
|
|
1405
|
-
i0.ɵɵelementEnd();
|
|
1406
|
-
i0.ɵɵelementStart(7, "div", 5)(8, "div", 6);
|
|
1407
|
-
i0.ɵɵlistener("click", function ArtifactViewerPanelComponent_Template_div_click_8_listener() { return ctx.viewContext !== "collection" && ctx.toggleVersionDropdown(); });
|
|
1408
|
-
i0.ɵɵelement(9, "i", 7);
|
|
1409
|
-
i0.ɵɵelementStart(10, "span", 8);
|
|
1410
|
-
i0.ɵɵtext(11);
|
|
1411
|
-
i0.ɵɵelementEnd();
|
|
1412
|
-
i0.ɵɵtemplate(12, ArtifactViewerPanelComponent_Conditional_12_Template, 1, 2, "i", 9)(13, ArtifactViewerPanelComponent_Conditional_13_Template, 3, 0, "div", 10);
|
|
1413
|
-
i0.ɵɵelementEnd();
|
|
1414
|
-
i0.ɵɵtemplate(14, ArtifactViewerPanelComponent_Conditional_14_Template, 2, 5, "button", 11)(15, ArtifactViewerPanelComponent_Conditional_15_Template, 2, 0, "button", 12);
|
|
1415
|
-
i0.ɵɵelementStart(16, "button", 13);
|
|
1416
|
-
i0.ɵɵlistener("click", function ArtifactViewerPanelComponent_Template_button_click_16_listener() { return ctx.onMaximizeToggle(); });
|
|
1417
|
-
i0.ɵɵelement(17, "i", 3);
|
|
1418
|
-
i0.ɵɵelementEnd();
|
|
1419
|
-
i0.ɵɵelementStart(18, "button", 14);
|
|
1420
|
-
i0.ɵɵlistener("click", function ArtifactViewerPanelComponent_Template_button_click_18_listener() { return ctx.onClose(); });
|
|
1421
|
-
i0.ɵɵelement(19, "i", 15);
|
|
1422
|
-
i0.ɵɵelementEnd()()();
|
|
1423
|
-
i0.ɵɵelementStart(20, "div", 16);
|
|
1424
|
-
i0.ɵɵtemplate(21, ArtifactViewerPanelComponent_Conditional_21_Template, 4, 0, "div", 17)(22, ArtifactViewerPanelComponent_Conditional_22_Template, 4, 1, "div", 18)(23, ArtifactViewerPanelComponent_Conditional_23_Template, 38, 21, "div", 19);
|
|
1474
|
+
} }, inputs: { artifactId: "artifactId", currentUser: "currentUser", environmentId: "environmentId", versionNumber: "versionNumber", showSaveToCollection: "showSaveToCollection", showHeader: "showHeader", showTabs: "showTabs", showCloseButton: "showCloseButton", showMaximizeButton: "showMaximizeButton", refreshTrigger: "refreshTrigger", viewContext: "viewContext", contextCollectionId: "contextCollectionId", canShare: "canShare", canEdit: "canEdit", isMaximized: "isMaximized" }, outputs: { closed: "closed", saveToCollectionRequested: "saveToCollectionRequested", navigateToLink: "navigateToLink", shareRequested: "shareRequested", maximizeToggled: "maximizeToggled", openEntityRecord: "openEntityRecord" }, features: [i0.ɵɵNgOnChangesFeature], decls: 6, vars: 6, consts: [[1, "artifact-viewer-panel"], [1, "panel-header"], [1, "panel-content"], [1, "loading-state"], [1, "error-state"], [1, "artifact-content-wrapper", 3, "no-tabs"], [1, "panel-header-left"], [1, "fas", 3, "ngClass"], [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", "Share", 1, "share-btn"], [1, "maximize-btn", 3, "title"], ["title", "Close", 1, "close-btn"], [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"], ["title", "Share", 1, "share-btn", 3, "click"], [1, "fas", "fa-share-nodes"], [1, "maximize-btn", 3, "click", "title"], ["title", "Close", 1, "close-btn", 3, "click"], [1, "fas", "fa-times"], [1, "fas", "fa-spinner", "fa-spin"], [1, "fas", "fa-exclamation-triangle"], [1, "artifact-content-wrapper"], [1, "tab-navigation"], [1, "tab-content"], [1, "plugin-container", 3, "display"], [1, "display-content"], [1, "details-content"], [1, "artifact-meta"], [1, "meta-item"], [1, "meta-item", "full-width"], [1, "attributes-section"], [1, "links-container"], [1, "links-section"], [1, "empty-state"], [1, "tab-btn", 3, "active"], [1, "tab-btn", 3, "click"], [3, "class"], [1, "plugin-container"], [3, "openEntityRecord", "pluginLoaded", "artifactVersion", "artifactTypeName", "contentType", "readonly"], [1, "display-toolbar"], ["title", "Print", 1, "btn-icon", 3, "click"], [1, "fas", "fa-print"], ["title", "Copy Content", 1, "btn-icon", 3, "click"], [1, "fas", "fa-copy"], [1, "markdown-content"], [1, "html-content", 3, "innerHTML"], [3, "data", "enableCollapsibleHeadings", "enableLineNumbers", "enableSmartypants", "enableHtml"], [1, "attributes-list"], [1, "attribute-item"], [1, "attribute-empty-pill"], [1, "link-item", 3, "disabled", "clickable", "title"], [1, "link-item", 3, "click", "title"], [1, "link-icon"], [1, "fas", "fa-comments"], [1, "fas", "fa-folder"], [1, "link-content"], [1, "link-name"], [1, "link-type"], [1, "link-actions"], [1, "fas", "fa-arrow-right"], [1, "fas", "fa-link"], [1, "component-tab-content"], [4, "ngComponentOutlet", "ngComponentOutletInputs"], [1, "dynamic-tab-content"], [1, "markdown-viewer"], [1, "json-viewer"], [1, "code-viewer"], [1, "html-viewer", 3, "innerHTML"], [1, "plaintext-viewer"], [1, "json-toolbar"], ["title", "Copy JSON", 1, "btn-icon", 3, "click"], [1, "json-editor-container"], [2, "width", "100%", "height", "100%", 3, "value", "language", "readonly", "lineWrapping"], [1, "code-toolbar"], ["title", "Copy Code", 1, "btn-icon", 3, "click"], [1, "code-editor-container"]], template: function ArtifactViewerPanelComponent_Template(rf, ctx) { if (rf & 1) {
|
|
1475
|
+
i0.ɵɵelementStart(0, "div", 0);
|
|
1476
|
+
i0.ɵɵtemplate(1, ArtifactViewerPanelComponent_Conditional_1_Template, 17, 12, "div", 1);
|
|
1477
|
+
i0.ɵɵelementStart(2, "div", 2);
|
|
1478
|
+
i0.ɵɵtemplate(3, ArtifactViewerPanelComponent_Conditional_3_Template, 4, 0, "div", 3)(4, ArtifactViewerPanelComponent_Conditional_4_Template, 4, 1, "div", 4)(5, ArtifactViewerPanelComponent_Conditional_5_Template, 36, 24, "div", 5);
|
|
1425
1479
|
i0.ɵɵelementEnd()();
|
|
1426
1480
|
} if (rf & 2) {
|
|
1427
|
-
i0.ɵɵ
|
|
1428
|
-
i0.ɵɵproperty("ngClass", ctx.getArtifactIcon());
|
|
1481
|
+
i0.ɵɵclassProp("no-header", !ctx.showHeader);
|
|
1429
1482
|
i0.ɵɵadvance();
|
|
1430
|
-
i0.ɵɵ
|
|
1431
|
-
i0.ɵɵadvance();
|
|
1432
|
-
i0.ɵɵconditional(ctx.displayDescription ? 6 : -1);
|
|
1483
|
+
i0.ɵɵconditional(ctx.showHeader ? 1 : -1);
|
|
1433
1484
|
i0.ɵɵadvance(2);
|
|
1434
|
-
i0.ɵɵ
|
|
1435
|
-
i0.ɵɵadvance(3);
|
|
1436
|
-
i0.ɵɵtextInterpolate1("v", ctx.selectedVersionNumber, "");
|
|
1437
|
-
i0.ɵɵadvance();
|
|
1438
|
-
i0.ɵɵconditional(ctx.allVersions.length > 1 && ctx.viewContext !== "collection" ? 12 : -1);
|
|
1439
|
-
i0.ɵɵadvance();
|
|
1440
|
-
i0.ɵɵconditional(ctx.showVersionDropdown ? 13 : -1);
|
|
1441
|
-
i0.ɵɵadvance();
|
|
1442
|
-
i0.ɵɵconditional(ctx.showSaveToCollection ? 14 : -1);
|
|
1485
|
+
i0.ɵɵconditional(ctx.isLoading ? 3 : -1);
|
|
1443
1486
|
i0.ɵɵadvance();
|
|
1444
|
-
i0.ɵɵconditional(ctx.
|
|
1487
|
+
i0.ɵɵconditional(ctx.error ? 4 : -1);
|
|
1445
1488
|
i0.ɵɵadvance();
|
|
1446
|
-
i0.ɵɵ
|
|
1447
|
-
i0.ɵɵadvance();
|
|
1448
|
-
i0.ɵɵproperty("ngClass", ctx.isMaximized ? "fa-compress-arrows-alt" : "fa-arrows-left-right");
|
|
1449
|
-
i0.ɵɵadvance(4);
|
|
1450
|
-
i0.ɵɵconditional(ctx.isLoading ? 21 : -1);
|
|
1451
|
-
i0.ɵɵadvance();
|
|
1452
|
-
i0.ɵɵconditional(ctx.error ? 22 : -1);
|
|
1453
|
-
i0.ɵɵadvance();
|
|
1454
|
-
i0.ɵɵconditional(!ctx.isLoading && !ctx.error && ctx.artifact ? 23 : -1);
|
|
1489
|
+
i0.ɵɵconditional(!ctx.isLoading && !ctx.error && ctx.artifact ? 5 : -1);
|
|
1455
1490
|
} }, dependencies: [i4.NgClass, i4.NgComponentOutlet, i5.MarkdownComponent, i6.CodeEditorComponent, i7.ArtifactTypePluginViewerComponent, i4.DatePipe], styles: [".artifact-viewer-panel[_ngcontent-%COMP%] {\n width: 100%;\n height: 100%;\n background: white;\n border-left: 1px solid #E5E7EB;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n box-sizing: border-box;\n}\n\n.panel-header[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n padding: 12px 16px;\n border-bottom: 1px solid #E5E7EB;\n background: white;\n flex-shrink: 0;\n width: 100%;\n box-sizing: border-box;\n}\n\n.panel-header-left[_ngcontent-%COMP%] {\n flex: 1;\n min-width: 0;\n margin-right: 16px;\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: flex-start;\n gap: 8px;\n word-wrap: break-word;\n overflow-wrap: break-word;\n}\n\n.panel-header[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #6366F1;\n flex-shrink: 0;\n margin-top: 2px;\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 word-wrap: break-word;\n overflow-wrap: break-word;\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[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 14px;\n}\n\n.save-to-collection-btn.in-collection[_ngcontent-%COMP%] {\n color: #6366F1; \n\n}\n\n.save-to-collection-btn.in-collection[_ngcontent-%COMP%]:hover {\n background: #EEF2FF;\n color: #4F46E5;\n}\n\n.share-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.share-btn[_ngcontent-%COMP%]:hover {\n background: #F3F4F6;\n color: #6366F1;\n}\n\n.share-btn[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 14px;\n}\n\n.maximize-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.maximize-btn[_ngcontent-%COMP%]:hover {\n background: #F3F4F6;\n color: #111827;\n}\n\n.maximize-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 width: 100%;\n box-sizing: border-box;\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 width: 100%;\n box-sizing: border-box;\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 box-sizing: border-box;\n margin-bottom: 5px;\n min-width: 0;\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 min-width: 0;\n padding: 7px;\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 10px 5px 20px; \n\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}\n\n\n\n.links-container[_ngcontent-%COMP%] {\n padding: 20px;\n}\n\n.links-section[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 12px;\n}\n\n.link-item[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 12px;\n background: #F9FAFB;\n border: 1px solid #E5E7EB;\n border-radius: 8px;\n transition: all 0.15s;\n}\n\n.link-item.clickable[_ngcontent-%COMP%] {\n cursor: pointer;\n}\n\n.link-item.clickable[_ngcontent-%COMP%]:hover {\n border-color: #1e40af;\n box-shadow: 0 2px 4px rgba(0,0,0,0.05);\n background: #F3F4F6;\n}\n\n.link-item.disabled[_ngcontent-%COMP%] {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.link-item[_ngcontent-%COMP%]:hover {\n border-color: #1e40af;\n box-shadow: 0 2px 4px rgba(0,0,0,0.05);\n}\n\n.link-icon[_ngcontent-%COMP%] {\n width: 40px;\n height: 40px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: white;\n border-radius: 8px;\n flex-shrink: 0;\n}\n\n.link-icon[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 18px;\n color: #1e40af;\n}\n\n.link-content[_ngcontent-%COMP%] {\n flex: 1;\n min-width: 0;\n}\n\n.link-name[_ngcontent-%COMP%] {\n font-size: 14px;\n font-weight: 500;\n color: #111827;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.link-type[_ngcontent-%COMP%] {\n font-size: 12px;\n color: #6B7280;\n margin-top: 2px;\n}\n\n.link-actions[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n flex-shrink: 0;\n}\n\n.link-actions[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 14px;\n color: #6B7280;\n transition: all 0.15s;\n}\n\n.link-item.clickable[_ngcontent-%COMP%]:hover .link-actions[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #1e40af;\n transform: translateX(2px);\n}\n\n.links-container[_ngcontent-%COMP%] .empty-state[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 48px 24px;\n color: #9CA3AF;\n text-align: center;\n}\n\n.links-container[_ngcontent-%COMP%] .empty-state[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 48px;\n margin-bottom: 16px;\n opacity: 0.3;\n}\n\n.links-container[_ngcontent-%COMP%] .empty-state[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 14px;\n}\n\n\n\n.dynamic-tab-content[_ngcontent-%COMP%] {\n flex: 1;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n padding: 16px;\n}\n\n\n\n.component-tab-content[_ngcontent-%COMP%] {\n flex: 1;\n display: flex;\n flex-direction: column;\n overflow: auto;\n padding: 16px;\n}\n\n.markdown-viewer[_ngcontent-%COMP%] {\n flex: 1;\n overflow: auto;\n padding: 20px;\n background: white;\n line-height: 1.6;\n}\n\n.markdown-viewer[_ngcontent-%COMP%] h1[_ngcontent-%COMP%], .markdown-viewer[_ngcontent-%COMP%] h2[_ngcontent-%COMP%], .markdown-viewer[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] {\n margin-top: 24px;\n margin-bottom: 12px;\n font-weight: 600;\n}\n\n.markdown-viewer[_ngcontent-%COMP%] h1[_ngcontent-%COMP%] { font-size: 24px; }\n.markdown-viewer[_ngcontent-%COMP%] h2[_ngcontent-%COMP%] { font-size: 20px; }\n.markdown-viewer[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] { font-size: 18px; }\n\n.markdown-viewer[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n margin-bottom: 12px;\n}\n\n.markdown-viewer[_ngcontent-%COMP%] ul[_ngcontent-%COMP%], .markdown-viewer[_ngcontent-%COMP%] ol[_ngcontent-%COMP%] {\n margin-bottom: 12px;\n padding-left: 24px;\n}\n\n.markdown-viewer[_ngcontent-%COMP%] code[_ngcontent-%COMP%] {\n background: #f3f4f6;\n padding: 2px 6px;\n border-radius: 3px;\n font-family: 'Courier New', monospace;\n font-size: 13px;\n}\n\n.markdown-viewer[_ngcontent-%COMP%] pre[_ngcontent-%COMP%] {\n background: #f3f4f6;\n padding: 12px;\n border-radius: 6px;\n overflow-x: auto;\n margin-bottom: 12px;\n}\n\n.markdown-viewer[_ngcontent-%COMP%] pre[_ngcontent-%COMP%] code[_ngcontent-%COMP%] {\n background: none;\n padding: 0;\n}\n\n.code-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.code-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.code-editor-container[_ngcontent-%COMP%] {\n flex: 1;\n overflow: hidden;\n min-height: 0;\n}\n\n.plaintext-viewer[_ngcontent-%COMP%] {\n flex: 1;\n overflow: auto;\n padding: 12px;\n background: #f9fafb;\n font-family: 'Courier New', monospace;\n font-size: 13px;\n white-space: pre-wrap;\n}\n\n.html-viewer[_ngcontent-%COMP%] {\n flex: 1;\n overflow: auto;\n padding: 20px;\n background: white;\n}\n\n\n\n@media (max-width: 768px) {\n \n\n .artifact-viewer-panel[_ngcontent-%COMP%] {\n border-top: 3px solid #3B82F6;\n position: relative;\n }\n\n \n\n .artifact-viewer-panel[_ngcontent-%COMP%]::before {\n content: '';\n position: absolute;\n top: -8px;\n left: 0;\n right: 0;\n height: 8px;\n background: #092340; \n\n }\n\n .tab-navigation[_ngcontent-%COMP%] {\n padding: 0 8px;\n overflow-x: auto;\n overflow-y: hidden;\n -webkit-overflow-scrolling: touch;\n scrollbar-width: none;\n }\n\n .tab-navigation[_ngcontent-%COMP%]::-webkit-scrollbar {\n display: none;\n }\n\n .tab-btn[_ngcontent-%COMP%] {\n padding: 10px 12px;\n font-size: 12px;\n white-space: nowrap;\n flex-shrink: 0;\n }\n\n .tab-btn[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 13px;\n }\n\n .panel-header[_ngcontent-%COMP%] {\n padding: 12px;\n }\n\n .dynamic-tab-content[_ngcontent-%COMP%] {\n padding: 12px;\n }\n\n .markdown-viewer[_ngcontent-%COMP%] {\n padding: 12px;\n }\n}\n\n\n\n@media (max-width: 480px) {\n .tab-navigation[_ngcontent-%COMP%] {\n padding: 0 4px;\n }\n\n .tab-btn[_ngcontent-%COMP%] {\n padding: 8px 10px;\n font-size: 11px;\n gap: 4px;\n }\n\n .tab-btn[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 12px;\n }\n\n .panel-header[_ngcontent-%COMP%] {\n padding: 8px;\n }\n\n .dynamic-tab-content[_ngcontent-%COMP%] {\n padding: 8px;\n }\n\n .markdown-viewer[_ngcontent-%COMP%] {\n padding: 8px;\n }\n}"] });
|
|
1456
1491
|
}
|
|
1457
1492
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ArtifactViewerPanelComponent, [{
|
|
1458
1493
|
type: Component,
|
|
1459
|
-
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\" [ngClass]=\"getArtifactIcon()\"></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\"\n [class.clickable]=\"allVersions.length > 1 && viewContext !== 'collection'\"\n (click)=\"viewContext !== 'collection' && toggleVersionDropdown()\">\n <i class=\"fas fa-history\"></i>\n <span class=\"version-label\">v{{ selectedVersionNumber }}</span>\n @if (allVersions.length > 1 && viewContext !== 'collection') {\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 ? 'Current version saved to ' + currentVersionCollections.length + ' collection(s)' : 'Save to Collection'\">\n <i [class]=\"isInCollection ? 'fas fa-bookmark' : 'far fa-bookmark'\"></i>\n </button>\n }\n @if (canShare) {\n <button class=\"share-btn\"\n (click)=\"onShare()\"\n title=\"Share\">\n <i class=\"fas fa-share-nodes\"></i>\n </button>\n }\n <button class=\"maximize-btn\"\n (click)=\"onMaximizeToggle()\"\n [title]=\"isMaximized ? 'Restore Width' : 'Maximize Width'\">\n <i class=\"fas\" [ngClass]=\"isMaximized ? 'fa-compress-arrows-alt' : 'fa-arrows-left-right'\"></i>\n </button>\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 (Dynamic) -->\n <div class=\"tab-navigation\">\n @for (tab of allTabs; track tab) {\n <button class=\"tab-btn\"\n [class.active]=\"activeTab === tab.toLowerCase()\"\n (click)=\"SetActiveTab(tab)\">\n @if (GetTabIcon(tab)) {\n <i [class]=\"GetTabIcon(tab)!\"></i>\n }\n {{ tab }}\n </button>\n }\n </div>\n\n <!-- Tab Content (Dynamic) -->\n <div class=\"tab-content\">\n <!-- Plugin Viewer - Created once, kept alive, shown/hidden with CSS -->\n @if (hasPlugin && artifactVersion && artifactTypeName) {\n <div class=\"plugin-container\" [style.display]=\"activeTab === 'display' ? 'block' : 'none'\">\n <mj-artifact-type-plugin-viewer\n [artifactVersion]=\"artifactVersion\"\n [artifactTypeName]=\"artifactTypeName\"\n [contentType]=\"contentType\"\n [readonly]=\"true\"\n (openEntityRecord)=\"onOpenEntityRecord($event)\"\n (pluginLoaded)=\"onPluginLoaded()\">\n </mj-artifact-type-plugin-viewer>\n </div>\n }\n\n <!-- Display Tab - Fallback content when no plugin -->\n @if (activeTab === 'display' && (!hasPlugin || !artifactVersion)) {\n <div class=\"display-content\">\n @if (displayMarkdown || displayHtml) {\n <!-- Fallback to extracted markdown/HTML attributes -->\n <div class=\"display-toolbar\">\n <button class=\"btn-icon\" title=\"Print\" (click)=\"onPrintDisplayContent()\">\n <i class=\"fas fa-print\"></i> Print\n </button>\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 <mj-markdown [data]=\"displayMarkdown\"\n [enableCollapsibleHeadings]=\"true\"\n [enableLineNumbers]=\"true\"\n [enableSmartypants]=\"true\"\n [enableHtml]=\"true\"></mj-markdown>\n </div>\n } @else if (displayHtml) {\n <div class=\"html-content\" [innerHTML]=\"displayHtml\"></div>\n }\n }\n </div>\n }\n\n <!-- Details Tab - Artifact metadata (always in DOM, hidden with CSS) -->\n <div class=\"details-content\" [style.display]=\"activeTab === 'details' ? 'block' : 'none'\">\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 <!-- Links Tab - Conversations and Collections (always in DOM, hidden with CSS) -->\n <div class=\"links-container\" [style.display]=\"activeTab === 'links' ? 'block' : 'none'\">\n @if (linksToShow.length > 0) {\n <div class=\"links-section\">\n @for (link of linksToShow; track link.id) {\n <div class=\"link-item\"\n [class.disabled]=\"!link.hasAccess\"\n [class.clickable]=\"link.hasAccess\"\n (click)=\"link.hasAccess ? onNavigateToLink(link) : null\"\n [title]=\"link.hasAccess ? 'Click to open' : 'No access'\">\n <div class=\"link-icon\">\n @if (link.type === 'conversation') {\n <i class=\"fas fa-comments\"></i>\n } @else {\n <i class=\"fas fa-folder\"></i>\n }\n </div>\n <div class=\"link-content\">\n <div class=\"link-name\">{{ link.name }}</div>\n <div class=\"link-type\">{{ link.type === 'conversation' ? 'Conversation' : 'Collection' }}</div>\n </div>\n <div class=\"link-actions\">\n <i class=\"fas fa-arrow-right\"></i>\n </div>\n </div>\n }\n </div>\n } @else {\n <div class=\"empty-state\">\n <i class=\"fas fa-link\"></i>\n <p>No links available</p>\n </div>\n }\n </div>\n\n <!-- Dynamic Plugin Tabs and Base Tabs (JSON, etc.) -->\n @if (activeTab !== 'display' && activeTab !== 'details' && activeTab !== 'links') {\n <!-- Check if this is a component tab -->\n @if (GetComponentTabType(activeTab); as componentType) {\n <div class=\"component-tab-content\">\n <ng-container *ngComponentOutlet=\"componentType; inputs: GetComponentInputs(activeTab)\"></ng-container>\n </div>\n } @else {\n @if (GetTabContent(activeTab); as tabData) {\n <div class=\"dynamic-tab-content\">\n @switch (tabData.type) {\n @case ('markdown') {\n <div class=\"markdown-viewer\">\n <mj-markdown [data]=\"tabData.content\"\n [enableCollapsibleHeadings]=\"true\"\n [enableLineNumbers]=\"true\"\n [enableSmartypants]=\"true\"\n [enableHtml]=\"true\"></mj-markdown>\n </div>\n }\n @case ('json') {\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 [value]=\"tabData.content\"\n [language]=\"'json'\"\n [readonly]=\"true\"\n [lineWrapping]=\"true\"\n style=\"width: 100%; height: 100%;\">\n </mj-code-editor>\n </div>\n </div>\n }\n @case ('code') {\n <div class=\"code-viewer\">\n <div class=\"code-toolbar\">\n <button class=\"btn-icon\" title=\"Copy Code\" (click)=\"onCopyToClipboard()\">\n <i class=\"fas fa-copy\"></i> Copy\n </button>\n </div>\n <div class=\"code-editor-container\">\n <mj-code-editor\n [value]=\"tabData.content\"\n [language]=\"tabData.language || 'typescript'\"\n [readonly]=\"true\"\n [lineWrapping]=\"true\"\n style=\"width: 100%; height: 100%;\">\n </mj-code-editor>\n </div>\n </div>\n }\n @case ('html') {\n <div class=\"html-viewer\" [innerHTML]=\"tabData.content\"></div>\n }\n @case ('plaintext') {\n <pre class=\"plaintext-viewer\">{{ tabData.content }}</pre>\n }\n }\n </div>\n }\n }\n }\n </div>\n </div>\n }\n </div>\n</div>\n\n", styles: [".artifact-viewer-panel {\n width: 100%;\n height: 100%;\n background: white;\n border-left: 1px solid #E5E7EB;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n box-sizing: border-box;\n}\n\n.panel-header {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n padding: 12px 16px;\n border-bottom: 1px solid #E5E7EB;\n background: white;\n flex-shrink: 0;\n width: 100%;\n box-sizing: border-box;\n}\n\n.panel-header-left {\n flex: 1;\n min-width: 0;\n margin-right: 16px;\n}\n\n.panel-header h3 {\n margin: 0;\n font-size: 14px;\n font-weight: 600;\n display: flex;\n align-items: flex-start;\n gap: 8px;\n word-wrap: break-word;\n overflow-wrap: break-word;\n}\n\n.panel-header h3 i {\n color: #6366F1;\n flex-shrink: 0;\n margin-top: 2px;\n}\n\n.header-description {\n margin: 4px 0 0 0;\n font-size: 12px;\n color: #6B7280;\n font-weight: normal;\n word-wrap: break-word;\n overflow-wrap: break-word;\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 i {\n font-size: 14px;\n}\n\n.save-to-collection-btn.in-collection {\n color: #6366F1; /* Indigo color to indicate it's saved */\n}\n\n.save-to-collection-btn.in-collection:hover {\n background: #EEF2FF;\n color: #4F46E5;\n}\n\n.share-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.share-btn:hover {\n background: #F3F4F6;\n color: #6366F1;\n}\n\n.share-btn i {\n font-size: 14px;\n}\n\n.maximize-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.maximize-btn:hover {\n background: #F3F4F6;\n color: #111827;\n}\n\n.maximize-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 width: 100%;\n box-sizing: border-box;\n}\n\n.artifact-content-wrapper {\n flex: 1;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n min-height: 0;\n width: 100%;\n box-sizing: border-box;\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 box-sizing: border-box;\n margin-bottom: 5px;\n min-width: 0;\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 min-width: 0;\n padding: 7px;\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 10px 5px 20px; /* top right bottom left */\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\n/* Links Tab */\n.links-container {\n padding: 20px;\n}\n\n.links-section {\n display: flex;\n flex-direction: column;\n gap: 12px;\n}\n\n.link-item {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 12px;\n background: #F9FAFB;\n border: 1px solid #E5E7EB;\n border-radius: 8px;\n transition: all 0.15s;\n}\n\n.link-item.clickable {\n cursor: pointer;\n}\n\n.link-item.clickable:hover {\n border-color: #1e40af;\n box-shadow: 0 2px 4px rgba(0,0,0,0.05);\n background: #F3F4F6;\n}\n\n.link-item.disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.link-item:hover {\n border-color: #1e40af;\n box-shadow: 0 2px 4px rgba(0,0,0,0.05);\n}\n\n.link-icon {\n width: 40px;\n height: 40px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: white;\n border-radius: 8px;\n flex-shrink: 0;\n}\n\n.link-icon i {\n font-size: 18px;\n color: #1e40af;\n}\n\n.link-content {\n flex: 1;\n min-width: 0;\n}\n\n.link-name {\n font-size: 14px;\n font-weight: 500;\n color: #111827;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.link-type {\n font-size: 12px;\n color: #6B7280;\n margin-top: 2px;\n}\n\n.link-actions {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n flex-shrink: 0;\n}\n\n.link-actions i {\n font-size: 14px;\n color: #6B7280;\n transition: all 0.15s;\n}\n\n.link-item.clickable:hover .link-actions i {\n color: #1e40af;\n transform: translateX(2px);\n}\n\n.links-container .empty-state {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 48px 24px;\n color: #9CA3AF;\n text-align: center;\n}\n\n.links-container .empty-state i {\n font-size: 48px;\n margin-bottom: 16px;\n opacity: 0.3;\n}\n\n.links-container .empty-state p {\n margin: 0;\n font-size: 14px;\n}\n\n/* Dynamic Tab Content Styles */\n.dynamic-tab-content {\n flex: 1;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n padding: 16px;\n}\n\n/* Custom component tab content */\n.component-tab-content {\n flex: 1;\n display: flex;\n flex-direction: column;\n overflow: auto;\n padding: 16px;\n}\n\n.markdown-viewer {\n flex: 1;\n overflow: auto;\n padding: 20px;\n background: white;\n line-height: 1.6;\n}\n\n.markdown-viewer h1, .markdown-viewer h2, .markdown-viewer h3 {\n margin-top: 24px;\n margin-bottom: 12px;\n font-weight: 600;\n}\n\n.markdown-viewer h1 { font-size: 24px; }\n.markdown-viewer h2 { font-size: 20px; }\n.markdown-viewer h3 { font-size: 18px; }\n\n.markdown-viewer p {\n margin-bottom: 12px;\n}\n\n.markdown-viewer ul, .markdown-viewer ol {\n margin-bottom: 12px;\n padding-left: 24px;\n}\n\n.markdown-viewer code {\n background: #f3f4f6;\n padding: 2px 6px;\n border-radius: 3px;\n font-family: 'Courier New', monospace;\n font-size: 13px;\n}\n\n.markdown-viewer pre {\n background: #f3f4f6;\n padding: 12px;\n border-radius: 6px;\n overflow-x: auto;\n margin-bottom: 12px;\n}\n\n.markdown-viewer pre code {\n background: none;\n padding: 0;\n}\n\n.code-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.code-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.code-editor-container {\n flex: 1;\n overflow: hidden;\n min-height: 0;\n}\n\n.plaintext-viewer {\n flex: 1;\n overflow: auto;\n padding: 12px;\n background: #f9fafb;\n font-family: 'Courier New', monospace;\n font-size: 13px;\n white-space: pre-wrap;\n}\n\n.html-viewer {\n flex: 1;\n overflow: auto;\n padding: 20px;\n background: white;\n}\n\n/* Mobile adjustments: 481px - 768px */\n@media (max-width: 768px) {\n /* Add top border with slight visual separation from top nav */\n .artifact-viewer-panel {\n border-top: 3px solid #3B82F6;\n position: relative;\n }\n\n /* Create a small dark strip above the blue border to separate from top nav */\n .artifact-viewer-panel::before {\n content: '';\n position: absolute;\n top: -8px;\n left: 0;\n right: 0;\n height: 8px;\n background: #092340; /* Match the top nav dark background color */\n }\n\n .tab-navigation {\n padding: 0 8px;\n overflow-x: auto;\n overflow-y: hidden;\n -webkit-overflow-scrolling: touch;\n scrollbar-width: none;\n }\n\n .tab-navigation::-webkit-scrollbar {\n display: none;\n }\n\n .tab-btn {\n padding: 10px 12px;\n font-size: 12px;\n white-space: nowrap;\n flex-shrink: 0;\n }\n\n .tab-btn i {\n font-size: 13px;\n }\n\n .panel-header {\n padding: 12px;\n }\n\n .dynamic-tab-content {\n padding: 12px;\n }\n\n .markdown-viewer {\n padding: 12px;\n }\n}\n\n/* Small Phone adjustments: <= 480px */\n@media (max-width: 480px) {\n .tab-navigation {\n padding: 0 4px;\n }\n\n .tab-btn {\n padding: 8px 10px;\n font-size: 11px;\n gap: 4px;\n }\n\n .tab-btn i {\n font-size: 12px;\n }\n\n .panel-header {\n padding: 8px;\n }\n\n .dynamic-tab-content {\n padding: 8px;\n }\n\n .markdown-viewer {\n padding: 8px;\n }\n}\n"] }]
|
|
1494
|
+
args: [{ selector: 'mj-artifact-viewer-panel', template: "<div class=\"artifact-viewer-panel\" [class.no-header]=\"!showHeader\">\n @if (showHeader) {\n <div class=\"panel-header\">\n <div class=\"panel-header-left\">\n <h3>\n <i class=\"fas\" [ngClass]=\"getArtifactIcon()\"></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\"\n [class.clickable]=\"allVersions.length > 1 && viewContext !== 'collection'\"\n (click)=\"viewContext !== 'collection' && toggleVersionDropdown()\">\n <i class=\"fas fa-history\"></i>\n <span class=\"version-label\">v{{ selectedVersionNumber }}</span>\n @if (allVersions.length > 1 && viewContext !== 'collection') {\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 ? 'Current version saved to ' + currentVersionCollections.length + ' collection(s)' : 'Save to Collection'\">\n <i [class]=\"isInCollection ? 'fas fa-bookmark' : 'far fa-bookmark'\"></i>\n </button>\n }\n @if (canShare) {\n <button class=\"share-btn\"\n (click)=\"onShare()\"\n title=\"Share\">\n <i class=\"fas fa-share-nodes\"></i>\n </button>\n }\n @if (showMaximizeButton) {\n <button class=\"maximize-btn\"\n (click)=\"onMaximizeToggle()\"\n [title]=\"isMaximized ? 'Restore Width' : 'Maximize Width'\">\n <i class=\"fas\" [ngClass]=\"isMaximized ? 'fa-compress-arrows-alt' : 'fa-arrows-left-right'\"></i>\n </button>\n }\n @if (showCloseButton) {\n <button class=\"close-btn\" (click)=\"onClose()\" title=\"Close\">\n <i class=\"fas fa-times\"></i>\n </button>\n }\n </div>\n </div>\n }\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\" [class.no-tabs]=\"!showTabs\">\n <!-- Tab Navigation (Dynamic) - Hidden when showTabs is false -->\n @if (showTabs) {\n <div class=\"tab-navigation\">\n @for (tab of allTabs; track tab) {\n <button class=\"tab-btn\"\n [class.active]=\"activeTab === tab.toLowerCase()\"\n (click)=\"SetActiveTab(tab)\">\n @if (GetTabIcon(tab)) {\n <i [class]=\"GetTabIcon(tab)!\"></i>\n }\n {{ tab }}\n </button>\n }\n </div>\n }\n\n <!-- Tab Content (Dynamic) -->\n <div class=\"tab-content\">\n <!-- Plugin Viewer - Created once, kept alive, shown/hidden with CSS -->\n @if (hasPlugin && artifactVersion && artifactTypeName) {\n <div class=\"plugin-container\" [style.display]=\"activeTab === 'display' ? 'block' : 'none'\">\n <mj-artifact-type-plugin-viewer\n [artifactVersion]=\"artifactVersion\"\n [artifactTypeName]=\"artifactTypeName\"\n [contentType]=\"contentType\"\n [readonly]=\"true\"\n (openEntityRecord)=\"onOpenEntityRecord($event)\"\n (pluginLoaded)=\"onPluginLoaded()\">\n </mj-artifact-type-plugin-viewer>\n </div>\n }\n\n <!-- Display Tab - Fallback content when no plugin -->\n @if (activeTab === 'display' && (!hasPlugin || !artifactVersion)) {\n <div class=\"display-content\">\n @if (displayMarkdown || displayHtml) {\n <!-- Fallback to extracted markdown/HTML attributes -->\n <div class=\"display-toolbar\">\n <button class=\"btn-icon\" title=\"Print\" (click)=\"onPrintDisplayContent()\">\n <i class=\"fas fa-print\"></i> Print\n </button>\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 <mj-markdown [data]=\"displayMarkdown\"\n [enableCollapsibleHeadings]=\"true\"\n [enableLineNumbers]=\"true\"\n [enableSmartypants]=\"true\"\n [enableHtml]=\"true\"></mj-markdown>\n </div>\n } @else if (displayHtml) {\n <div class=\"html-content\" [innerHTML]=\"displayHtml\"></div>\n }\n }\n </div>\n }\n\n <!-- Details Tab - Artifact metadata (always in DOM, hidden with CSS) -->\n <div class=\"details-content\" [style.display]=\"activeTab === 'details' ? 'block' : 'none'\">\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 <!-- Links Tab - Conversations and Collections (always in DOM, hidden with CSS) -->\n <div class=\"links-container\" [style.display]=\"activeTab === 'links' ? 'block' : 'none'\">\n @if (linksToShow.length > 0) {\n <div class=\"links-section\">\n @for (link of linksToShow; track link.id) {\n <div class=\"link-item\"\n [class.disabled]=\"!link.hasAccess\"\n [class.clickable]=\"link.hasAccess\"\n (click)=\"link.hasAccess ? onNavigateToLink(link) : null\"\n [title]=\"link.hasAccess ? 'Click to open' : 'No access'\">\n <div class=\"link-icon\">\n @if (link.type === 'conversation') {\n <i class=\"fas fa-comments\"></i>\n } @else {\n <i class=\"fas fa-folder\"></i>\n }\n </div>\n <div class=\"link-content\">\n <div class=\"link-name\">{{ link.name }}</div>\n <div class=\"link-type\">{{ link.type === 'conversation' ? 'Conversation' : 'Collection' }}</div>\n </div>\n <div class=\"link-actions\">\n <i class=\"fas fa-arrow-right\"></i>\n </div>\n </div>\n }\n </div>\n } @else {\n <div class=\"empty-state\">\n <i class=\"fas fa-link\"></i>\n <p>No links available</p>\n </div>\n }\n </div>\n\n <!-- Dynamic Plugin Tabs and Base Tabs (JSON, etc.) -->\n @if (activeTab !== 'display' && activeTab !== 'details' && activeTab !== 'links') {\n <!-- Check if this is a component tab -->\n @if (GetComponentTabType(activeTab); as componentType) {\n <div class=\"component-tab-content\">\n <ng-container *ngComponentOutlet=\"componentType; inputs: GetComponentInputs(activeTab)\"></ng-container>\n </div>\n } @else {\n @if (GetTabContent(activeTab); as tabData) {\n <div class=\"dynamic-tab-content\">\n @switch (tabData.type) {\n @case ('markdown') {\n <div class=\"markdown-viewer\">\n <mj-markdown [data]=\"tabData.content\"\n [enableCollapsibleHeadings]=\"true\"\n [enableLineNumbers]=\"true\"\n [enableSmartypants]=\"true\"\n [enableHtml]=\"true\"></mj-markdown>\n </div>\n }\n @case ('json') {\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 [value]=\"tabData.content\"\n [language]=\"'json'\"\n [readonly]=\"true\"\n [lineWrapping]=\"true\"\n style=\"width: 100%; height: 100%;\">\n </mj-code-editor>\n </div>\n </div>\n }\n @case ('code') {\n <div class=\"code-viewer\">\n <div class=\"code-toolbar\">\n <button class=\"btn-icon\" title=\"Copy Code\" (click)=\"onCopyToClipboard()\">\n <i class=\"fas fa-copy\"></i> Copy\n </button>\n </div>\n <div class=\"code-editor-container\">\n <mj-code-editor\n [value]=\"tabData.content\"\n [language]=\"tabData.language || 'typescript'\"\n [readonly]=\"true\"\n [lineWrapping]=\"true\"\n style=\"width: 100%; height: 100%;\">\n </mj-code-editor>\n </div>\n </div>\n }\n @case ('html') {\n <div class=\"html-viewer\" [innerHTML]=\"tabData.content\"></div>\n }\n @case ('plaintext') {\n <pre class=\"plaintext-viewer\">{{ tabData.content }}</pre>\n }\n }\n </div>\n }\n }\n }\n </div>\n </div>\n }\n </div>\n</div>\n\n", styles: [".artifact-viewer-panel {\n width: 100%;\n height: 100%;\n background: white;\n border-left: 1px solid #E5E7EB;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n box-sizing: border-box;\n}\n\n.panel-header {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n padding: 12px 16px;\n border-bottom: 1px solid #E5E7EB;\n background: white;\n flex-shrink: 0;\n width: 100%;\n box-sizing: border-box;\n}\n\n.panel-header-left {\n flex: 1;\n min-width: 0;\n margin-right: 16px;\n}\n\n.panel-header h3 {\n margin: 0;\n font-size: 14px;\n font-weight: 600;\n display: flex;\n align-items: flex-start;\n gap: 8px;\n word-wrap: break-word;\n overflow-wrap: break-word;\n}\n\n.panel-header h3 i {\n color: #6366F1;\n flex-shrink: 0;\n margin-top: 2px;\n}\n\n.header-description {\n margin: 4px 0 0 0;\n font-size: 12px;\n color: #6B7280;\n font-weight: normal;\n word-wrap: break-word;\n overflow-wrap: break-word;\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 i {\n font-size: 14px;\n}\n\n.save-to-collection-btn.in-collection {\n color: #6366F1; /* Indigo color to indicate it's saved */\n}\n\n.save-to-collection-btn.in-collection:hover {\n background: #EEF2FF;\n color: #4F46E5;\n}\n\n.share-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.share-btn:hover {\n background: #F3F4F6;\n color: #6366F1;\n}\n\n.share-btn i {\n font-size: 14px;\n}\n\n.maximize-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.maximize-btn:hover {\n background: #F3F4F6;\n color: #111827;\n}\n\n.maximize-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 width: 100%;\n box-sizing: border-box;\n}\n\n.artifact-content-wrapper {\n flex: 1;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n min-height: 0;\n width: 100%;\n box-sizing: border-box;\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 box-sizing: border-box;\n margin-bottom: 5px;\n min-width: 0;\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 min-width: 0;\n padding: 7px;\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 10px 5px 20px; /* top right bottom left */\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\n/* Links Tab */\n.links-container {\n padding: 20px;\n}\n\n.links-section {\n display: flex;\n flex-direction: column;\n gap: 12px;\n}\n\n.link-item {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 12px;\n background: #F9FAFB;\n border: 1px solid #E5E7EB;\n border-radius: 8px;\n transition: all 0.15s;\n}\n\n.link-item.clickable {\n cursor: pointer;\n}\n\n.link-item.clickable:hover {\n border-color: #1e40af;\n box-shadow: 0 2px 4px rgba(0,0,0,0.05);\n background: #F3F4F6;\n}\n\n.link-item.disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.link-item:hover {\n border-color: #1e40af;\n box-shadow: 0 2px 4px rgba(0,0,0,0.05);\n}\n\n.link-icon {\n width: 40px;\n height: 40px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: white;\n border-radius: 8px;\n flex-shrink: 0;\n}\n\n.link-icon i {\n font-size: 18px;\n color: #1e40af;\n}\n\n.link-content {\n flex: 1;\n min-width: 0;\n}\n\n.link-name {\n font-size: 14px;\n font-weight: 500;\n color: #111827;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.link-type {\n font-size: 12px;\n color: #6B7280;\n margin-top: 2px;\n}\n\n.link-actions {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n flex-shrink: 0;\n}\n\n.link-actions i {\n font-size: 14px;\n color: #6B7280;\n transition: all 0.15s;\n}\n\n.link-item.clickable:hover .link-actions i {\n color: #1e40af;\n transform: translateX(2px);\n}\n\n.links-container .empty-state {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 48px 24px;\n color: #9CA3AF;\n text-align: center;\n}\n\n.links-container .empty-state i {\n font-size: 48px;\n margin-bottom: 16px;\n opacity: 0.3;\n}\n\n.links-container .empty-state p {\n margin: 0;\n font-size: 14px;\n}\n\n/* Dynamic Tab Content Styles */\n.dynamic-tab-content {\n flex: 1;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n padding: 16px;\n}\n\n/* Custom component tab content */\n.component-tab-content {\n flex: 1;\n display: flex;\n flex-direction: column;\n overflow: auto;\n padding: 16px;\n}\n\n.markdown-viewer {\n flex: 1;\n overflow: auto;\n padding: 20px;\n background: white;\n line-height: 1.6;\n}\n\n.markdown-viewer h1, .markdown-viewer h2, .markdown-viewer h3 {\n margin-top: 24px;\n margin-bottom: 12px;\n font-weight: 600;\n}\n\n.markdown-viewer h1 { font-size: 24px; }\n.markdown-viewer h2 { font-size: 20px; }\n.markdown-viewer h3 { font-size: 18px; }\n\n.markdown-viewer p {\n margin-bottom: 12px;\n}\n\n.markdown-viewer ul, .markdown-viewer ol {\n margin-bottom: 12px;\n padding-left: 24px;\n}\n\n.markdown-viewer code {\n background: #f3f4f6;\n padding: 2px 6px;\n border-radius: 3px;\n font-family: 'Courier New', monospace;\n font-size: 13px;\n}\n\n.markdown-viewer pre {\n background: #f3f4f6;\n padding: 12px;\n border-radius: 6px;\n overflow-x: auto;\n margin-bottom: 12px;\n}\n\n.markdown-viewer pre code {\n background: none;\n padding: 0;\n}\n\n.code-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.code-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.code-editor-container {\n flex: 1;\n overflow: hidden;\n min-height: 0;\n}\n\n.plaintext-viewer {\n flex: 1;\n overflow: auto;\n padding: 12px;\n background: #f9fafb;\n font-family: 'Courier New', monospace;\n font-size: 13px;\n white-space: pre-wrap;\n}\n\n.html-viewer {\n flex: 1;\n overflow: auto;\n padding: 20px;\n background: white;\n}\n\n/* Mobile adjustments: 481px - 768px */\n@media (max-width: 768px) {\n /* Add top border with slight visual separation from top nav */\n .artifact-viewer-panel {\n border-top: 3px solid #3B82F6;\n position: relative;\n }\n\n /* Create a small dark strip above the blue border to separate from top nav */\n .artifact-viewer-panel::before {\n content: '';\n position: absolute;\n top: -8px;\n left: 0;\n right: 0;\n height: 8px;\n background: #092340; /* Match the top nav dark background color */\n }\n\n .tab-navigation {\n padding: 0 8px;\n overflow-x: auto;\n overflow-y: hidden;\n -webkit-overflow-scrolling: touch;\n scrollbar-width: none;\n }\n\n .tab-navigation::-webkit-scrollbar {\n display: none;\n }\n\n .tab-btn {\n padding: 10px 12px;\n font-size: 12px;\n white-space: nowrap;\n flex-shrink: 0;\n }\n\n .tab-btn i {\n font-size: 13px;\n }\n\n .panel-header {\n padding: 12px;\n }\n\n .dynamic-tab-content {\n padding: 12px;\n }\n\n .markdown-viewer {\n padding: 12px;\n }\n}\n\n/* Small Phone adjustments: <= 480px */\n@media (max-width: 480px) {\n .tab-navigation {\n padding: 0 4px;\n }\n\n .tab-btn {\n padding: 8px 10px;\n font-size: 11px;\n gap: 4px;\n }\n\n .tab-btn i {\n font-size: 12px;\n }\n\n .panel-header {\n padding: 8px;\n }\n\n .dynamic-tab-content {\n padding: 8px;\n }\n\n .markdown-viewer {\n padding: 8px;\n }\n}\n"] }]
|
|
1460
1495
|
}], () => [{ type: i1.MJNotificationService }, { type: i2.DomSanitizer }, { type: i3.ArtifactIconService }], { artifactId: [{
|
|
1461
1496
|
type: Input
|
|
1462
1497
|
}], currentUser: [{
|
|
@@ -1467,6 +1502,14 @@ export class ArtifactViewerPanelComponent {
|
|
|
1467
1502
|
type: Input
|
|
1468
1503
|
}], showSaveToCollection: [{
|
|
1469
1504
|
type: Input
|
|
1505
|
+
}], showHeader: [{
|
|
1506
|
+
type: Input
|
|
1507
|
+
}], showTabs: [{
|
|
1508
|
+
type: Input
|
|
1509
|
+
}], showCloseButton: [{
|
|
1510
|
+
type: Input
|
|
1511
|
+
}], showMaximizeButton: [{
|
|
1512
|
+
type: Input
|
|
1470
1513
|
}], refreshTrigger: [{
|
|
1471
1514
|
type: Input
|
|
1472
1515
|
}], viewContext: [{
|
|
@@ -1495,5 +1538,5 @@ export class ArtifactViewerPanelComponent {
|
|
|
1495
1538
|
type: ViewChild,
|
|
1496
1539
|
args: [ArtifactTypePluginViewerComponent]
|
|
1497
1540
|
}] }); })();
|
|
1498
|
-
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ArtifactViewerPanelComponent, { className: "ArtifactViewerPanelComponent" }); })();
|
|
1541
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ArtifactViewerPanelComponent, { className: "ArtifactViewerPanelComponent", filePath: "src/lib/components/artifact-viewer-panel.component.ts", lineNumber: 19 }); })();
|
|
1499
1542
|
//# sourceMappingURL=artifact-viewer-panel.component.js.map
|