npm - @memberjunction/ng-dashboards - Versions diffs - 5.11.0 → 5.13.0 - Mend

@memberjunction/ng-dashboards 5.11.0 → 5.13.0

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

Files changed (229) hide show

package/dist/ComponentStudio/components/ai-assistant/ai-assistant-panel.component.js CHANGED Viewed

@@ -384,11 +384,11 @@ export class AIAssistantPanelComponent {
             i0.ɵɵadvance(2);
             i0.ɵɵclassProp("active", ctx.InputText.trim().length > 0 && !ctx.IsWaitingForResponse);
             i0.ɵɵproperty("disabled", ctx.InputText.trim().length === 0 || ctx.IsWaitingForResponse);
-        } }, dependencies: [i2.NgSelectOption, i2.ɵNgSelectMultipleOption, i2.DefaultValueAccessor, i2.SelectControlValueAccessor, i2.NgControlStatus, i2.NgModel], styles: ["[_nghost-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}\n\n.ai-assistant-panel[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: var(--mat-sys-surface);\n  overflow: hidden;\n}\n\n\n\n\n\n\n\n\n.panel-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 12px 16px;\n  border-bottom: 1px solid var(--mat-sys-outline);\n  background: var(--mat-sys-surface-container-lowest);\n  flex-shrink: 0;\n}\n\n.panel-header[_ngcontent-%COMP%]   .header-title[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--mat-sys-on-surface);\n}\n\n.panel-header[_ngcontent-%COMP%]   .header-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mat-sys-primary);\n  font-size: 16px;\n}\n\n.panel-header[_ngcontent-%COMP%]   .collapse-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n  border: none;\n  background: transparent;\n  color: var(--mat-sys-on-surface-variant);\n  border-radius: var(--mat-sys-corner-extra-small);\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.panel-header[_ngcontent-%COMP%]   .collapse-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mat-sys-surface-container-high);\n  color: var(--mat-sys-on-surface);\n}\n\n\n\n\n\n\n\n\n.model-selector[_ngcontent-%COMP%] {\n  padding: 10px 16px;\n  border-bottom: 1px solid var(--mat-sys-outline);\n  flex-shrink: 0;\n}\n\n.model-selector[_ngcontent-%COMP%]   .model-label[_ngcontent-%COMP%] {\n  display: block;\n  font-size: 11px;\n  font-weight: 600;\n  color: var(--mat-sys-on-surface-variant);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  margin-bottom: 6px;\n}\n\n.model-selector[_ngcontent-%COMP%]   .model-dropdown-wrapper[_ngcontent-%COMP%] {\n  position: relative;\n}\n\n.model-selector[_ngcontent-%COMP%]   .model-dropdown[_ngcontent-%COMP%] {\n  width: 100%;\n  padding: 7px 10px;\n  border: 1px solid var(--mat-sys-outline);\n  border-radius: var(--mat-sys-corner-extra-small);\n  background: var(--mat-sys-surface);\n  color: var(--mat-sys-on-surface);\n  font-size: 12px;\n  cursor: pointer;\n  outline: none;\n  transition: border-color 0.15s ease;\n  appearance: none;\n  -webkit-appearance: none;\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  background-position: right 8px center;\n  padding-right: 28px;\n}\n\n.model-selector[_ngcontent-%COMP%]   .model-dropdown[_ngcontent-%COMP%]:focus {\n  border-color: var(--mat-sys-primary);\n  box-shadow: 0 0 0 2px color-mix(in srgb, var(--mat-sys-primary) 15%, transparent);\n}\n\n.model-selector[_ngcontent-%COMP%]   .model-dropdown[_ngcontent-%COMP%]:disabled {\n  background: var(--mat-sys-surface-variant);\n  color: var(--mat-sys-on-surface-variant);\n  cursor: not-allowed;\n}\n\n.model-selector[_ngcontent-%COMP%]   .model-loading[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 12px;\n  color: var(--mat-sys-on-surface-variant);\n  padding: 7px 0;\n}\n\n.model-selector[_ngcontent-%COMP%]   .model-loading[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 12px;\n}\n\n\n\n\n\n\n\n\n.quick-actions[_ngcontent-%COMP%] {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n  padding: 10px 16px;\n  border-bottom: 1px solid var(--mat-sys-outline);\n  background: var(--mat-sys-surface-container-low);\n  flex-shrink: 0;\n}\n\n.quick-actions[_ngcontent-%COMP%]   .quick-action-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 5px;\n  padding: 5px 10px;\n  border: 1px solid var(--mat-sys-outline);\n  border-radius: var(--mat-sys-corner-large);\n  background: var(--mat-sys-surface);\n  color: var(--mat-sys-on-surface);\n  font-size: 11px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  white-space: nowrap;\n}\n\n.quick-actions[_ngcontent-%COMP%]   .quick-action-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 11px;\n}\n\n.quick-actions[_ngcontent-%COMP%]   .quick-action-btn[_ngcontent-%COMP%]:hover:not(.disabled) {\n  background: var(--mat-sys-primary);\n  color: var(--mat-sys-surface);\n  border-color: var(--mat-sys-primary);\n}\n\n.quick-actions[_ngcontent-%COMP%]   .quick-action-btn.disabled[_ngcontent-%COMP%] {\n  opacity: 0.4;\n  cursor: not-allowed;\n  background: var(--mat-sys-surface-variant);\n}\n\n\n\n\n\n\n\n\n.chat-thread[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  padding: 16px;\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  scroll-behavior: smooth;\n}\n\n\n\n.chat-thread[_ngcontent-%COMP%]::-webkit-scrollbar {\n  width: 6px;\n}\n\n.chat-thread[_ngcontent-%COMP%]::-webkit-scrollbar-track {\n  background: transparent;\n}\n\n.chat-thread[_ngcontent-%COMP%]::-webkit-scrollbar-thumb {\n  background: var(--mat-sys-outline);\n  border-radius: 3px;\n}\n\n.chat-thread[_ngcontent-%COMP%]::-webkit-scrollbar-thumb:hover {\n  background: var(--mat-sys-on-surface-variant);\n}\n\n.empty-thread[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  flex: 1;\n  text-align: center;\n  color: var(--mat-sys-on-surface-variant);\n  padding: 32px 16px;\n}\n\n.empty-thread[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 36px;\n  margin-bottom: 12px;\n  opacity: 0.5;\n}\n\n.empty-thread[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  font-size: 13px;\n  line-height: 1.5;\n  margin: 0;\n  max-width: 220px;\n}\n\n\n\n\n\n\n\n\n.message-wrapper[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: flex-end;\n  gap: 8px;\n}\n\n.message-wrapper.user[_ngcontent-%COMP%] {\n  justify-content: flex-end;\n}\n\n.message-wrapper.assistant[_ngcontent-%COMP%] {\n  justify-content: flex-start;\n}\n\n.message-wrapper.system[_ngcontent-%COMP%] {\n  justify-content: center;\n}\n\n.message-avatar[_ngcontent-%COMP%] {\n  width: 28px;\n  height: 28px;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  font-size: 12px;\n}\n\n.message-avatar.assistant-avatar[_ngcontent-%COMP%] {\n  background: #eef2ff;\n  color: #6366f1;\n}\n\n.message-avatar.user-avatar[_ngcontent-%COMP%] {\n  background: #dbeafe;\n  color: #2563eb;\n}\n\n.message-bubble[_ngcontent-%COMP%] {\n  max-width: 80%;\n  padding: 10px 14px;\n  border-radius: var(--mat-sys-corner-large);\n  position: relative;\n}\n\n.message-bubble.user-bubble[_ngcontent-%COMP%] {\n  background: #2563eb;\n  color: #ffffff;\n  border-bottom-right-radius: 4px;\n}\n\n.message-bubble.user-bubble[_ngcontent-%COMP%]   .message-timestamp[_ngcontent-%COMP%] {\n  color: rgba(255, 255, 255, 0.7);\n}\n\n.message-bubble.assistant-bubble[_ngcontent-%COMP%] {\n  background: var(--mat-sys-surface-variant);\n  color: var(--mat-sys-on-surface);\n  border-bottom-left-radius: 4px;\n}\n\n.message-bubble.assistant-bubble[_ngcontent-%COMP%]   .message-timestamp[_ngcontent-%COMP%] {\n  color: var(--mat-sys-on-surface-variant);\n}\n\n.message-bubble.system-bubble[_ngcontent-%COMP%] {\n  background: #fef9c3;\n  color: #854d0e;\n  font-style: italic;\n  border-radius: var(--mat-sys-corner-small);\n  max-width: 90%;\n}\n\n.message-bubble.system-bubble[_ngcontent-%COMP%]   .message-timestamp[_ngcontent-%COMP%] {\n  color: #a16207;\n}\n\n.message-bubble.typing-bubble[_ngcontent-%COMP%] {\n  padding: 14px 18px;\n}\n\n.message-content[_ngcontent-%COMP%] {\n  font-size: 13px;\n  line-height: 1.5;\n  word-wrap: break-word;\n  white-space: pre-wrap;\n}\n\n.message-timestamp[_ngcontent-%COMP%] {\n  font-size: 10px;\n  margin-top: 4px;\n  text-align: right;\n}\n\n\n\n\n\n\n\n\n.typing-indicator[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.typing-indicator[_ngcontent-%COMP%]   .dot[_ngcontent-%COMP%] {\n  width: 7px;\n  height: 7px;\n  border-radius: 50%;\n  background: var(--mat-sys-on-surface-variant);\n  animation: _ngcontent-%COMP%_typingBounce 1.4s infinite ease-in-out both;\n}\n\n.typing-indicator[_ngcontent-%COMP%]   .dot[_ngcontent-%COMP%]:nth-child(1) {\n  animation-delay: 0s;\n}\n\n.typing-indicator[_ngcontent-%COMP%]   .dot[_ngcontent-%COMP%]:nth-child(2) {\n  animation-delay: 0.2s;\n}\n\n.typing-indicator[_ngcontent-%COMP%]   .dot[_ngcontent-%COMP%]:nth-child(3) {\n  animation-delay: 0.4s;\n}\n\n@keyframes _ngcontent-%COMP%_typingBounce {\n  0%, 60%, 100% {\n    transform: translateY(0);\n    opacity: 0.4;\n  }\n  30% {\n    transform: translateY(-6px);\n    opacity: 1;\n  }\n}\n\n\n\n\n\n\n\n\n.chat-input-area[_ngcontent-%COMP%] {\n  padding: 12px 16px;\n  border-top: 1px solid var(--mat-sys-outline);\n  background: var(--mat-sys-surface-container-lowest);\n  flex-shrink: 0;\n}\n\n.chat-input-area[_ngcontent-%COMP%]   .input-wrapper[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: flex-end;\n  gap: 8px;\n  background: var(--mat-sys-surface);\n  border: 1px solid var(--mat-sys-outline);\n  border-radius: var(--mat-sys-corner-medium);\n  padding: 4px 4px 4px 12px;\n  transition: border-color 0.15s ease, box-shadow 0.15s ease;\n}\n\n.chat-input-area[_ngcontent-%COMP%]   .input-wrapper[_ngcontent-%COMP%]:focus-within {\n  border-color: var(--mat-sys-primary);\n  box-shadow: 0 0 0 2px color-mix(in srgb, var(--mat-sys-primary) 15%, transparent);\n}\n\n.chat-input-area[_ngcontent-%COMP%]   .chat-textarea[_ngcontent-%COMP%] {\n  flex: 1;\n  border: none;\n  outline: none;\n  resize: none;\n  font-size: 13px;\n  line-height: 20px;\n  color: var(--mat-sys-on-surface);\n  background: transparent;\n  padding: 6px 0;\n  max-height: 80px;\n  font-family: inherit;\n}\n\n.chat-input-area[_ngcontent-%COMP%]   .chat-textarea[_ngcontent-%COMP%]::placeholder {\n  color: var(--mat-sys-on-surface-variant);\n}\n\n.chat-input-area[_ngcontent-%COMP%]   .chat-textarea[_ngcontent-%COMP%]:disabled {\n  color: var(--mat-sys-on-surface-variant);\n  cursor: not-allowed;\n}\n\n.chat-input-area[_ngcontent-%COMP%]   .send-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  border: none;\n  border-radius: var(--mat-sys-corner-small);\n  background: var(--mat-sys-surface-container-high);\n  color: var(--mat-sys-on-surface-variant);\n  cursor: not-allowed;\n  transition: all 0.15s ease;\n  flex-shrink: 0;\n}\n\n.chat-input-area[_ngcontent-%COMP%]   .send-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 13px;\n}\n\n.chat-input-area[_ngcontent-%COMP%]   .send-btn.active[_ngcontent-%COMP%] {\n  background: var(--mat-sys-primary);\n  color: var(--mat-sys-surface);\n  cursor: pointer;\n}\n\n.chat-input-area[_ngcontent-%COMP%]   .send-btn.active[_ngcontent-%COMP%]:hover {\n  background: var(--mat-sys-primary);\n}\n\n.chat-input-area[_ngcontent-%COMP%]   .send-btn[_ngcontent-%COMP%]:disabled {\n  cursor: not-allowed;\n}\n\n.chat-input-area[_ngcontent-%COMP%]   .input-hint[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: center;\n  margin-top: 6px;\n}\n\n.chat-input-area[_ngcontent-%COMP%]   .input-hint[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n  font-size: 10px;\n  color: var(--mat-sys-on-surface-variant);\n}\n\n.chat-input-area[_ngcontent-%COMP%]   .input-hint[_ngcontent-%COMP%]   kbd[_ngcontent-%COMP%] {\n  display: inline-block;\n  padding: 1px 4px;\n  font-size: 9px;\n  font-family: inherit;\n  color: var(--mat-sys-on-surface-variant);\n  background: var(--mat-sys-surface-variant);\n  border: 1px solid var(--mat-sys-outline);\n  border-radius: 3px;\n  margin: 0 2px;\n}"] });
+        } }, dependencies: [i2.NgSelectOption, i2.ɵNgSelectMultipleOption, i2.DefaultValueAccessor, i2.SelectControlValueAccessor, i2.NgControlStatus, i2.NgModel], styles: ["[_nghost-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}\n\n.ai-assistant-panel[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: var(--mj-bg-surface);\n  overflow: hidden;\n}\n\n\n\n\n\n\n\n\n.panel-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 12px 16px;\n  border-bottom: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  flex-shrink: 0;\n}\n\n.panel-header[_ngcontent-%COMP%]   .header-title[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.panel-header[_ngcontent-%COMP%]   .header-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  font-size: 16px;\n}\n\n.panel-header[_ngcontent-%COMP%]   .collapse-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n  border: none;\n  background: transparent;\n  color: var(--mj-text-secondary);\n  border-radius: 4px;\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.panel-header[_ngcontent-%COMP%]   .collapse-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-primary);\n}\n\n\n\n\n\n\n\n\n.model-selector[_ngcontent-%COMP%] {\n  padding: 10px 16px;\n  border-bottom: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n}\n\n.model-selector[_ngcontent-%COMP%]   .model-label[_ngcontent-%COMP%] {\n  display: block;\n  font-size: 11px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  margin-bottom: 6px;\n}\n\n.model-selector[_ngcontent-%COMP%]   .model-dropdown-wrapper[_ngcontent-%COMP%] {\n  position: relative;\n}\n\n.model-selector[_ngcontent-%COMP%]   .model-dropdown[_ngcontent-%COMP%] {\n  width: 100%;\n  padding: 7px 10px;\n  border: 1px solid var(--mj-border-strong);\n  border-radius: 4px;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n  font-size: 12px;\n  cursor: pointer;\n  outline: none;\n  transition: border-color 0.15s ease;\n  appearance: none;\n  -webkit-appearance: none;\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  background-position: right 8px center;\n  padding-right: 28px;\n}\n\n.model-selector[_ngcontent-%COMP%]   .model-dropdown[_ngcontent-%COMP%]:focus {\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 2px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.model-selector[_ngcontent-%COMP%]   .model-dropdown[_ngcontent-%COMP%]:disabled {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-secondary);\n  cursor: not-allowed;\n}\n\n.model-selector[_ngcontent-%COMP%]   .model-loading[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n  padding: 7px 0;\n}\n\n.model-selector[_ngcontent-%COMP%]   .model-loading[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 12px;\n}\n\n\n\n\n\n\n\n\n.quick-actions[_ngcontent-%COMP%] {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n  padding: 10px 16px;\n  border-bottom: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface-sunken);\n  flex-shrink: 0;\n}\n\n.quick-actions[_ngcontent-%COMP%]   .quick-action-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 5px;\n  padding: 5px 10px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 16px;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n  font-size: 11px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  white-space: nowrap;\n}\n\n.quick-actions[_ngcontent-%COMP%]   .quick-action-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 11px;\n}\n\n.quick-actions[_ngcontent-%COMP%]   .quick-action-btn[_ngcontent-%COMP%]:hover:not(.disabled) {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border-color: var(--mj-brand-primary);\n}\n\n.quick-actions[_ngcontent-%COMP%]   .quick-action-btn.disabled[_ngcontent-%COMP%] {\n  opacity: 0.4;\n  cursor: not-allowed;\n  background: var(--mj-bg-surface-sunken);\n}\n\n\n\n\n\n\n\n\n.chat-thread[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  padding: 16px;\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  scroll-behavior: smooth;\n}\n\n\n\n.chat-thread[_ngcontent-%COMP%]::-webkit-scrollbar {\n  width: 6px;\n}\n\n.chat-thread[_ngcontent-%COMP%]::-webkit-scrollbar-track {\n  background: transparent;\n}\n\n.chat-thread[_ngcontent-%COMP%]::-webkit-scrollbar-thumb {\n  background: var(--mj-border-default);\n  border-radius: 3px;\n}\n\n.chat-thread[_ngcontent-%COMP%]::-webkit-scrollbar-thumb:hover {\n  background: var(--mj-text-secondary);\n}\n\n.empty-thread[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  flex: 1;\n  text-align: center;\n  color: var(--mj-text-secondary);\n  padding: 32px 16px;\n}\n\n.empty-thread[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 36px;\n  margin-bottom: 12px;\n  opacity: 0.5;\n}\n\n.empty-thread[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  font-size: 13px;\n  line-height: 1.5;\n  margin: 0;\n  max-width: 220px;\n}\n\n\n\n\n\n\n\n\n.message-wrapper[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: flex-end;\n  gap: 8px;\n}\n\n.message-wrapper.user[_ngcontent-%COMP%] {\n  justify-content: flex-end;\n}\n\n.message-wrapper.assistant[_ngcontent-%COMP%] {\n  justify-content: flex-start;\n}\n\n.message-wrapper.system[_ngcontent-%COMP%] {\n  justify-content: center;\n}\n\n.message-avatar[_ngcontent-%COMP%] {\n  width: 28px;\n  height: 28px;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  font-size: 12px;\n}\n\n.message-avatar.assistant-avatar[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n}\n\n.message-avatar.user-avatar[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 20%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n}\n\n.message-bubble[_ngcontent-%COMP%] {\n  max-width: 80%;\n  padding: 10px 14px;\n  border-radius: 16px;\n  position: relative;\n}\n\n.message-bubble.user-bubble[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border-bottom-right-radius: 4px;\n}\n\n.message-bubble.user-bubble[_ngcontent-%COMP%]   .message-timestamp[_ngcontent-%COMP%] {\n  color: rgba(255, 255, 255, 0.7);\n}\n\n.message-bubble.assistant-bubble[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-primary);\n  border-bottom-left-radius: 4px;\n}\n\n.message-bubble.assistant-bubble[_ngcontent-%COMP%]   .message-timestamp[_ngcontent-%COMP%] {\n  color: var(--mj-text-secondary);\n}\n\n.message-bubble.system-bubble[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-warning);\n  font-style: italic;\n  border-radius: 8px;\n  max-width: 90%;\n}\n\n.message-bubble.system-bubble[_ngcontent-%COMP%]   .message-timestamp[_ngcontent-%COMP%] {\n  color: var(--mj-status-warning);\n}\n\n.message-bubble.typing-bubble[_ngcontent-%COMP%] {\n  padding: 14px 18px;\n}\n\n.message-content[_ngcontent-%COMP%] {\n  font-size: 13px;\n  line-height: 1.5;\n  word-wrap: break-word;\n  white-space: pre-wrap;\n}\n\n.message-timestamp[_ngcontent-%COMP%] {\n  font-size: 10px;\n  margin-top: 4px;\n  text-align: right;\n}\n\n\n\n\n\n\n\n\n.typing-indicator[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.typing-indicator[_ngcontent-%COMP%]   .dot[_ngcontent-%COMP%] {\n  width: 7px;\n  height: 7px;\n  border-radius: 50%;\n  background: var(--mj-text-secondary);\n  animation: _ngcontent-%COMP%_typingBounce 1.4s infinite ease-in-out both;\n}\n\n.typing-indicator[_ngcontent-%COMP%]   .dot[_ngcontent-%COMP%]:nth-child(1) {\n  animation-delay: 0s;\n}\n\n.typing-indicator[_ngcontent-%COMP%]   .dot[_ngcontent-%COMP%]:nth-child(2) {\n  animation-delay: 0.2s;\n}\n\n.typing-indicator[_ngcontent-%COMP%]   .dot[_ngcontent-%COMP%]:nth-child(3) {\n  animation-delay: 0.4s;\n}\n\n@keyframes _ngcontent-%COMP%_typingBounce {\n  0%, 60%, 100% {\n    transform: translateY(0);\n    opacity: 0.4;\n  }\n  30% {\n    transform: translateY(-6px);\n    opacity: 1;\n  }\n}\n\n\n\n\n\n\n\n\n.chat-input-area[_ngcontent-%COMP%] {\n  padding: 12px 16px;\n  border-top: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  flex-shrink: 0;\n}\n\n.chat-input-area[_ngcontent-%COMP%]   .input-wrapper[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: flex-end;\n  gap: 8px;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-strong);\n  border-radius: 12px;\n  padding: 4px 4px 4px 12px;\n  transition: border-color 0.15s ease, box-shadow 0.15s ease;\n}\n\n.chat-input-area[_ngcontent-%COMP%]   .input-wrapper[_ngcontent-%COMP%]:focus-within {\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 2px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.chat-input-area[_ngcontent-%COMP%]   .chat-textarea[_ngcontent-%COMP%] {\n  flex: 1;\n  border: none;\n  outline: none;\n  resize: none;\n  font-size: 13px;\n  line-height: 20px;\n  color: var(--mj-text-primary);\n  background: transparent;\n  padding: 6px 0;\n  max-height: 80px;\n  font-family: inherit;\n}\n\n.chat-input-area[_ngcontent-%COMP%]   .chat-textarea[_ngcontent-%COMP%]::placeholder {\n  color: var(--mj-text-secondary);\n}\n\n.chat-input-area[_ngcontent-%COMP%]   .chat-textarea[_ngcontent-%COMP%]:disabled {\n  color: var(--mj-text-secondary);\n  cursor: not-allowed;\n}\n\n.chat-input-area[_ngcontent-%COMP%]   .send-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  border: none;\n  border-radius: 8px;\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-secondary);\n  cursor: not-allowed;\n  transition: all 0.15s ease;\n  flex-shrink: 0;\n}\n\n.chat-input-area[_ngcontent-%COMP%]   .send-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 13px;\n}\n\n.chat-input-area[_ngcontent-%COMP%]   .send-btn.active[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  cursor: pointer;\n}\n\n.chat-input-area[_ngcontent-%COMP%]   .send-btn.active[_ngcontent-%COMP%]:hover {\n  background: var(--mj-brand-primary);\n}\n\n.chat-input-area[_ngcontent-%COMP%]   .send-btn[_ngcontent-%COMP%]:disabled {\n  cursor: not-allowed;\n}\n\n.chat-input-area[_ngcontent-%COMP%]   .input-hint[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: center;\n  margin-top: 6px;\n}\n\n.chat-input-area[_ngcontent-%COMP%]   .input-hint[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n  font-size: 10px;\n  color: var(--mj-text-secondary);\n}\n\n.chat-input-area[_ngcontent-%COMP%]   .input-hint[_ngcontent-%COMP%]   kbd[_ngcontent-%COMP%] {\n  display: inline-block;\n  padding: 1px 4px;\n  font-size: 9px;\n  font-family: inherit;\n  color: var(--mj-text-secondary);\n  background: var(--mj-bg-surface-sunken);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 3px;\n  margin: 0 2px;\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AIAssistantPanelComponent, [{
         type: Component,
-        args: [{ standalone: false, selector: 'mj-ai-assistant-panel', template: "<div class=\"ai-assistant-panel\">\n  <!-- Header -->\n  <div class=\"panel-header\">\n    <div class=\"header-title\">\n      <i class=\"fa-solid fa-robot\"></i>\n      <span>AI Assistant</span>\n    </div>\n    <button class=\"collapse-btn\" (click)=\"OnCollapsePanel()\" title=\"Collapse panel\">\n      <i class=\"fa-solid fa-chevron-right\"></i>\n    </button>\n  </div>\n\n  <!-- Model Selector -->\n  <div class=\"model-selector\">\n    <label class=\"model-label\">Model</label>\n    <div class=\"model-dropdown-wrapper\">\n      @if (IsLoadingModels) {\n        <div class=\"model-loading\">\n          <i class=\"fa-solid fa-spinner fa-spin\"></i>\n          <span>Loading models...</span>\n        </div>\n      } @else {\n        <select\n          class=\"model-dropdown\"\n          [(ngModel)]=\"SelectedModelID\"\n          [disabled]=\"AvailableModels.length === 0\">\n          @for (model of AvailableModels; track model.ID) {\n            <option [value]=\"model.ID\">{{ model.DisplayLabel }}</option>\n          }\n          @if (AvailableModels.length === 0) {\n            <option [value]=\"null\" disabled>No models available</option>\n          }\n        </select>\n      }\n    </div>\n  </div>\n\n  <!-- Quick Actions Bar -->\n  <div class=\"quick-actions\">\n    @for (action of QuickActions; track action.Label) {\n      <button\n        class=\"quick-action-btn\"\n        [class.disabled]=\"!IsQuickActionEnabled(action)\"\n        [disabled]=\"!IsQuickActionEnabled(action) || IsWaitingForResponse\"\n        (click)=\"OnQuickAction(action)\"\n        [title]=\"action.Label\">\n        <i class=\"fa-solid {{ action.Icon }}\"></i>\n        <span>{{ action.Label }}</span>\n      </button>\n    }\n  </div>\n\n  <!-- Chat Thread -->\n  <div class=\"chat-thread\" #chatThread>\n    @if (Messages.length === 0) {\n      <div class=\"empty-thread\">\n        <i class=\"fa-solid fa-comments\"></i>\n        <p>No messages yet. Start a conversation or use a quick action above.</p>\n      </div>\n    }\n\n    @for (message of Messages; track TrackByTimestamp($index, message)) {\n      <div class=\"message-wrapper\" [class.user]=\"message.Role === 'user'\" [class.assistant]=\"message.Role === 'assistant'\" [class.system]=\"message.Role === 'system'\">\n        @if (message.Role === 'assistant') {\n          <div class=\"message-avatar assistant-avatar\">\n            <i class=\"fa-solid fa-robot\"></i>\n          </div>\n        }\n\n        <div class=\"message-bubble\" [class.user-bubble]=\"message.Role === 'user'\" [class.assistant-bubble]=\"message.Role === 'assistant'\" [class.system-bubble]=\"message.Role === 'system'\">\n          <div class=\"message-content\">{{ message.Content }}</div>\n          <div class=\"message-timestamp\">{{ FormatTimestamp(message.Timestamp) }}</div>\n        </div>\n\n        @if (message.Role === 'user') {\n          <div class=\"message-avatar user-avatar\">\n            <i class=\"fa-solid fa-user\"></i>\n          </div>\n        }\n      </div>\n    }\n\n    <!-- Typing Indicator -->\n    @if (IsWaitingForResponse) {\n      <div class=\"message-wrapper assistant\">\n        <div class=\"message-avatar assistant-avatar\">\n          <i class=\"fa-solid fa-robot\"></i>\n        </div>\n        <div class=\"message-bubble assistant-bubble typing-bubble\">\n          <div class=\"typing-indicator\">\n            <span class=\"dot\"></span>\n            <span class=\"dot\"></span>\n            <span class=\"dot\"></span>\n          </div>\n        </div>\n      </div>\n    }\n  </div>\n\n  <!-- Chat Input Area -->\n  <div class=\"chat-input-area\">\n    <div class=\"input-wrapper\">\n      <textarea\n        #chatInput\n        class=\"chat-textarea\"\n        [(ngModel)]=\"InputText\"\n        (keydown)=\"OnInputKeydown($event)\"\n        (input)=\"OnInputChange()\"\n        [disabled]=\"IsWaitingForResponse\"\n        placeholder=\"Ask the AI assistant...\"\n        rows=\"1\"></textarea>\n      <button\n        class=\"send-btn\"\n        [class.active]=\"InputText.trim().length > 0 && !IsWaitingForResponse\"\n        [disabled]=\"InputText.trim().length === 0 || IsWaitingForResponse\"\n        (click)=\"OnSendMessage()\"\n        title=\"Send message\">\n        <i class=\"fa-solid fa-paper-plane\"></i>\n      </button>\n    </div>\n    <div class=\"input-hint\">\n      <span>Press <kbd>Enter</kbd> to send, <kbd>Shift+Enter</kbd> for new line</span>\n    </div>\n  </div>\n</div>\n", styles: [":host {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}\n\n.ai-assistant-panel {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: var(--mat-sys-surface);\n  overflow: hidden;\n}\n\n/* ============================================================ */\n/* HEADER                                                       */\n/* ============================================================ */\n\n.panel-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 12px 16px;\n  border-bottom: 1px solid var(--mat-sys-outline);\n  background: var(--mat-sys-surface-container-lowest);\n  flex-shrink: 0;\n}\n\n.panel-header .header-title {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--mat-sys-on-surface);\n}\n\n.panel-header .header-title i {\n  color: var(--mat-sys-primary);\n  font-size: 16px;\n}\n\n.panel-header .collapse-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n  border: none;\n  background: transparent;\n  color: var(--mat-sys-on-surface-variant);\n  border-radius: var(--mat-sys-corner-extra-small);\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.panel-header .collapse-btn:hover {\n  background: var(--mat-sys-surface-container-high);\n  color: var(--mat-sys-on-surface);\n}\n\n/* ============================================================ */\n/* MODEL SELECTOR                                               */\n/* ============================================================ */\n\n.model-selector {\n  padding: 10px 16px;\n  border-bottom: 1px solid var(--mat-sys-outline);\n  flex-shrink: 0;\n}\n\n.model-selector .model-label {\n  display: block;\n  font-size: 11px;\n  font-weight: 600;\n  color: var(--mat-sys-on-surface-variant);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  margin-bottom: 6px;\n}\n\n.model-selector .model-dropdown-wrapper {\n  position: relative;\n}\n\n.model-selector .model-dropdown {\n  width: 100%;\n  padding: 7px 10px;\n  border: 1px solid var(--mat-sys-outline);\n  border-radius: var(--mat-sys-corner-extra-small);\n  background: var(--mat-sys-surface);\n  color: var(--mat-sys-on-surface);\n  font-size: 12px;\n  cursor: pointer;\n  outline: none;\n  transition: border-color 0.15s ease;\n  appearance: none;\n  -webkit-appearance: none;\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  background-position: right 8px center;\n  padding-right: 28px;\n}\n\n.model-selector .model-dropdown:focus {\n  border-color: var(--mat-sys-primary);\n  box-shadow: 0 0 0 2px color-mix(in srgb, var(--mat-sys-primary) 15%, transparent);\n}\n\n.model-selector .model-dropdown:disabled {\n  background: var(--mat-sys-surface-variant);\n  color: var(--mat-sys-on-surface-variant);\n  cursor: not-allowed;\n}\n\n.model-selector .model-loading {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 12px;\n  color: var(--mat-sys-on-surface-variant);\n  padding: 7px 0;\n}\n\n.model-selector .model-loading i {\n  font-size: 12px;\n}\n\n/* ============================================================ */\n/* QUICK ACTIONS                                                */\n/* ============================================================ */\n\n.quick-actions {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n  padding: 10px 16px;\n  border-bottom: 1px solid var(--mat-sys-outline);\n  background: var(--mat-sys-surface-container-low);\n  flex-shrink: 0;\n}\n\n.quick-actions .quick-action-btn {\n  display: flex;\n  align-items: center;\n  gap: 5px;\n  padding: 5px 10px;\n  border: 1px solid var(--mat-sys-outline);\n  border-radius: var(--mat-sys-corner-large);\n  background: var(--mat-sys-surface);\n  color: var(--mat-sys-on-surface);\n  font-size: 11px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  white-space: nowrap;\n}\n\n.quick-actions .quick-action-btn i {\n  font-size: 11px;\n}\n\n.quick-actions .quick-action-btn:hover:not(.disabled) {\n  background: var(--mat-sys-primary);\n  color: var(--mat-sys-surface);\n  border-color: var(--mat-sys-primary);\n}\n\n.quick-actions .quick-action-btn.disabled {\n  opacity: 0.4;\n  cursor: not-allowed;\n  background: var(--mat-sys-surface-variant);\n}\n\n/* ============================================================ */\n/* CHAT THREAD                                                  */\n/* ============================================================ */\n\n.chat-thread {\n  flex: 1;\n  overflow-y: auto;\n  padding: 16px;\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  scroll-behavior: smooth;\n}\n\n/* Custom scrollbar */\n.chat-thread::-webkit-scrollbar {\n  width: 6px;\n}\n\n.chat-thread::-webkit-scrollbar-track {\n  background: transparent;\n}\n\n.chat-thread::-webkit-scrollbar-thumb {\n  background: var(--mat-sys-outline);\n  border-radius: 3px;\n}\n\n.chat-thread::-webkit-scrollbar-thumb:hover {\n  background: var(--mat-sys-on-surface-variant);\n}\n\n.empty-thread {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  flex: 1;\n  text-align: center;\n  color: var(--mat-sys-on-surface-variant);\n  padding: 32px 16px;\n}\n\n.empty-thread i {\n  font-size: 36px;\n  margin-bottom: 12px;\n  opacity: 0.5;\n}\n\n.empty-thread p {\n  font-size: 13px;\n  line-height: 1.5;\n  margin: 0;\n  max-width: 220px;\n}\n\n/* ============================================================ */\n/* MESSAGE BUBBLES                                              */\n/* ============================================================ */\n\n.message-wrapper {\n  display: flex;\n  align-items: flex-end;\n  gap: 8px;\n}\n\n.message-wrapper.user {\n  justify-content: flex-end;\n}\n\n.message-wrapper.assistant {\n  justify-content: flex-start;\n}\n\n.message-wrapper.system {\n  justify-content: center;\n}\n\n.message-avatar {\n  width: 28px;\n  height: 28px;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  font-size: 12px;\n}\n\n.message-avatar.assistant-avatar {\n  background: #eef2ff;\n  color: #6366f1;\n}\n\n.message-avatar.user-avatar {\n  background: #dbeafe;\n  color: #2563eb;\n}\n\n.message-bubble {\n  max-width: 80%;\n  padding: 10px 14px;\n  border-radius: var(--mat-sys-corner-large);\n  position: relative;\n}\n\n.message-bubble.user-bubble {\n  background: #2563eb;\n  color: #ffffff;\n  border-bottom-right-radius: 4px;\n}\n\n.message-bubble.user-bubble .message-timestamp {\n  color: rgba(255, 255, 255, 0.7);\n}\n\n.message-bubble.assistant-bubble {\n  background: var(--mat-sys-surface-variant);\n  color: var(--mat-sys-on-surface);\n  border-bottom-left-radius: 4px;\n}\n\n.message-bubble.assistant-bubble .message-timestamp {\n  color: var(--mat-sys-on-surface-variant);\n}\n\n.message-bubble.system-bubble {\n  background: #fef9c3;\n  color: #854d0e;\n  font-style: italic;\n  border-radius: var(--mat-sys-corner-small);\n  max-width: 90%;\n}\n\n.message-bubble.system-bubble .message-timestamp {\n  color: #a16207;\n}\n\n.message-bubble.typing-bubble {\n  padding: 14px 18px;\n}\n\n.message-content {\n  font-size: 13px;\n  line-height: 1.5;\n  word-wrap: break-word;\n  white-space: pre-wrap;\n}\n\n.message-timestamp {\n  font-size: 10px;\n  margin-top: 4px;\n  text-align: right;\n}\n\n/* ============================================================ */\n/* TYPING INDICATOR                                             */\n/* ============================================================ */\n\n.typing-indicator {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.typing-indicator .dot {\n  width: 7px;\n  height: 7px;\n  border-radius: 50%;\n  background: var(--mat-sys-on-surface-variant);\n  animation: typingBounce 1.4s infinite ease-in-out both;\n}\n\n.typing-indicator .dot:nth-child(1) {\n  animation-delay: 0s;\n}\n\n.typing-indicator .dot:nth-child(2) {\n  animation-delay: 0.2s;\n}\n\n.typing-indicator .dot:nth-child(3) {\n  animation-delay: 0.4s;\n}\n\n@keyframes typingBounce {\n  0%, 60%, 100% {\n    transform: translateY(0);\n    opacity: 0.4;\n  }\n  30% {\n    transform: translateY(-6px);\n    opacity: 1;\n  }\n}\n\n/* ============================================================ */\n/* CHAT INPUT AREA                                              */\n/* ============================================================ */\n\n.chat-input-area {\n  padding: 12px 16px;\n  border-top: 1px solid var(--mat-sys-outline);\n  background: var(--mat-sys-surface-container-lowest);\n  flex-shrink: 0;\n}\n\n.chat-input-area .input-wrapper {\n  display: flex;\n  align-items: flex-end;\n  gap: 8px;\n  background: var(--mat-sys-surface);\n  border: 1px solid var(--mat-sys-outline);\n  border-radius: var(--mat-sys-corner-medium);\n  padding: 4px 4px 4px 12px;\n  transition: border-color 0.15s ease, box-shadow 0.15s ease;\n}\n\n.chat-input-area .input-wrapper:focus-within {\n  border-color: var(--mat-sys-primary);\n  box-shadow: 0 0 0 2px color-mix(in srgb, var(--mat-sys-primary) 15%, transparent);\n}\n\n.chat-input-area .chat-textarea {\n  flex: 1;\n  border: none;\n  outline: none;\n  resize: none;\n  font-size: 13px;\n  line-height: 20px;\n  color: var(--mat-sys-on-surface);\n  background: transparent;\n  padding: 6px 0;\n  max-height: 80px;\n  font-family: inherit;\n}\n\n.chat-input-area .chat-textarea::placeholder {\n  color: var(--mat-sys-on-surface-variant);\n}\n\n.chat-input-area .chat-textarea:disabled {\n  color: var(--mat-sys-on-surface-variant);\n  cursor: not-allowed;\n}\n\n.chat-input-area .send-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  border: none;\n  border-radius: var(--mat-sys-corner-small);\n  background: var(--mat-sys-surface-container-high);\n  color: var(--mat-sys-on-surface-variant);\n  cursor: not-allowed;\n  transition: all 0.15s ease;\n  flex-shrink: 0;\n}\n\n.chat-input-area .send-btn i {\n  font-size: 13px;\n}\n\n.chat-input-area .send-btn.active {\n  background: var(--mat-sys-primary);\n  color: var(--mat-sys-surface);\n  cursor: pointer;\n}\n\n.chat-input-area .send-btn.active:hover {\n  background: var(--mat-sys-primary);\n}\n\n.chat-input-area .send-btn:disabled {\n  cursor: not-allowed;\n}\n\n.chat-input-area .input-hint {\n  display: flex;\n  justify-content: center;\n  margin-top: 6px;\n}\n\n.chat-input-area .input-hint span {\n  font-size: 10px;\n  color: var(--mat-sys-on-surface-variant);\n}\n\n.chat-input-area .input-hint kbd {\n  display: inline-block;\n  padding: 1px 4px;\n  font-size: 9px;\n  font-family: inherit;\n  color: var(--mat-sys-on-surface-variant);\n  background: var(--mat-sys-surface-variant);\n  border: 1px solid var(--mat-sys-outline);\n  border-radius: 3px;\n  margin: 0 2px;\n}\n"] }]
+        args: [{ standalone: false, selector: 'mj-ai-assistant-panel', template: "<div class=\"ai-assistant-panel\">\n  <!-- Header -->\n  <div class=\"panel-header\">\n    <div class=\"header-title\">\n      <i class=\"fa-solid fa-robot\"></i>\n      <span>AI Assistant</span>\n    </div>\n    <button class=\"collapse-btn\" (click)=\"OnCollapsePanel()\" title=\"Collapse panel\">\n      <i class=\"fa-solid fa-chevron-right\"></i>\n    </button>\n  </div>\n\n  <!-- Model Selector -->\n  <div class=\"model-selector\">\n    <label class=\"model-label\">Model</label>\n    <div class=\"model-dropdown-wrapper\">\n      @if (IsLoadingModels) {\n        <div class=\"model-loading\">\n          <i class=\"fa-solid fa-spinner fa-spin\"></i>\n          <span>Loading models...</span>\n        </div>\n      } @else {\n        <select\n          class=\"model-dropdown\"\n          [(ngModel)]=\"SelectedModelID\"\n          [disabled]=\"AvailableModels.length === 0\">\n          @for (model of AvailableModels; track model.ID) {\n            <option [value]=\"model.ID\">{{ model.DisplayLabel }}</option>\n          }\n          @if (AvailableModels.length === 0) {\n            <option [value]=\"null\" disabled>No models available</option>\n          }\n        </select>\n      }\n    </div>\n  </div>\n\n  <!-- Quick Actions Bar -->\n  <div class=\"quick-actions\">\n    @for (action of QuickActions; track action.Label) {\n      <button\n        class=\"quick-action-btn\"\n        [class.disabled]=\"!IsQuickActionEnabled(action)\"\n        [disabled]=\"!IsQuickActionEnabled(action) || IsWaitingForResponse\"\n        (click)=\"OnQuickAction(action)\"\n        [title]=\"action.Label\">\n        <i class=\"fa-solid {{ action.Icon }}\"></i>\n        <span>{{ action.Label }}</span>\n      </button>\n    }\n  </div>\n\n  <!-- Chat Thread -->\n  <div class=\"chat-thread\" #chatThread>\n    @if (Messages.length === 0) {\n      <div class=\"empty-thread\">\n        <i class=\"fa-solid fa-comments\"></i>\n        <p>No messages yet. Start a conversation or use a quick action above.</p>\n      </div>\n    }\n\n    @for (message of Messages; track TrackByTimestamp($index, message)) {\n      <div class=\"message-wrapper\" [class.user]=\"message.Role === 'user'\" [class.assistant]=\"message.Role === 'assistant'\" [class.system]=\"message.Role === 'system'\">\n        @if (message.Role === 'assistant') {\n          <div class=\"message-avatar assistant-avatar\">\n            <i class=\"fa-solid fa-robot\"></i>\n          </div>\n        }\n\n        <div class=\"message-bubble\" [class.user-bubble]=\"message.Role === 'user'\" [class.assistant-bubble]=\"message.Role === 'assistant'\" [class.system-bubble]=\"message.Role === 'system'\">\n          <div class=\"message-content\">{{ message.Content }}</div>\n          <div class=\"message-timestamp\">{{ FormatTimestamp(message.Timestamp) }}</div>\n        </div>\n\n        @if (message.Role === 'user') {\n          <div class=\"message-avatar user-avatar\">\n            <i class=\"fa-solid fa-user\"></i>\n          </div>\n        }\n      </div>\n    }\n\n    <!-- Typing Indicator -->\n    @if (IsWaitingForResponse) {\n      <div class=\"message-wrapper assistant\">\n        <div class=\"message-avatar assistant-avatar\">\n          <i class=\"fa-solid fa-robot\"></i>\n        </div>\n        <div class=\"message-bubble assistant-bubble typing-bubble\">\n          <div class=\"typing-indicator\">\n            <span class=\"dot\"></span>\n            <span class=\"dot\"></span>\n            <span class=\"dot\"></span>\n          </div>\n        </div>\n      </div>\n    }\n  </div>\n\n  <!-- Chat Input Area -->\n  <div class=\"chat-input-area\">\n    <div class=\"input-wrapper\">\n      <textarea\n        #chatInput\n        class=\"chat-textarea\"\n        [(ngModel)]=\"InputText\"\n        (keydown)=\"OnInputKeydown($event)\"\n        (input)=\"OnInputChange()\"\n        [disabled]=\"IsWaitingForResponse\"\n        placeholder=\"Ask the AI assistant...\"\n        rows=\"1\"></textarea>\n      <button\n        class=\"send-btn\"\n        [class.active]=\"InputText.trim().length > 0 && !IsWaitingForResponse\"\n        [disabled]=\"InputText.trim().length === 0 || IsWaitingForResponse\"\n        (click)=\"OnSendMessage()\"\n        title=\"Send message\">\n        <i class=\"fa-solid fa-paper-plane\"></i>\n      </button>\n    </div>\n    <div class=\"input-hint\">\n      <span>Press <kbd>Enter</kbd> to send, <kbd>Shift+Enter</kbd> for new line</span>\n    </div>\n  </div>\n</div>\n", styles: [":host {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}\n\n.ai-assistant-panel {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: var(--mj-bg-surface);\n  overflow: hidden;\n}\n\n/* ============================================================ */\n/* HEADER                                                       */\n/* ============================================================ */\n\n.panel-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 12px 16px;\n  border-bottom: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  flex-shrink: 0;\n}\n\n.panel-header .header-title {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.panel-header .header-title i {\n  color: var(--mj-brand-primary);\n  font-size: 16px;\n}\n\n.panel-header .collapse-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n  border: none;\n  background: transparent;\n  color: var(--mj-text-secondary);\n  border-radius: 4px;\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.panel-header .collapse-btn:hover {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-primary);\n}\n\n/* ============================================================ */\n/* MODEL SELECTOR                                               */\n/* ============================================================ */\n\n.model-selector {\n  padding: 10px 16px;\n  border-bottom: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n}\n\n.model-selector .model-label {\n  display: block;\n  font-size: 11px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  margin-bottom: 6px;\n}\n\n.model-selector .model-dropdown-wrapper {\n  position: relative;\n}\n\n.model-selector .model-dropdown {\n  width: 100%;\n  padding: 7px 10px;\n  border: 1px solid var(--mj-border-strong);\n  border-radius: 4px;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n  font-size: 12px;\n  cursor: pointer;\n  outline: none;\n  transition: border-color 0.15s ease;\n  appearance: none;\n  -webkit-appearance: none;\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  background-position: right 8px center;\n  padding-right: 28px;\n}\n\n.model-selector .model-dropdown:focus {\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 2px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.model-selector .model-dropdown:disabled {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-secondary);\n  cursor: not-allowed;\n}\n\n.model-selector .model-loading {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n  padding: 7px 0;\n}\n\n.model-selector .model-loading i {\n  font-size: 12px;\n}\n\n/* ============================================================ */\n/* QUICK ACTIONS                                                */\n/* ============================================================ */\n\n.quick-actions {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n  padding: 10px 16px;\n  border-bottom: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface-sunken);\n  flex-shrink: 0;\n}\n\n.quick-actions .quick-action-btn {\n  display: flex;\n  align-items: center;\n  gap: 5px;\n  padding: 5px 10px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 16px;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n  font-size: 11px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  white-space: nowrap;\n}\n\n.quick-actions .quick-action-btn i {\n  font-size: 11px;\n}\n\n.quick-actions .quick-action-btn:hover:not(.disabled) {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border-color: var(--mj-brand-primary);\n}\n\n.quick-actions .quick-action-btn.disabled {\n  opacity: 0.4;\n  cursor: not-allowed;\n  background: var(--mj-bg-surface-sunken);\n}\n\n/* ============================================================ */\n/* CHAT THREAD                                                  */\n/* ============================================================ */\n\n.chat-thread {\n  flex: 1;\n  overflow-y: auto;\n  padding: 16px;\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  scroll-behavior: smooth;\n}\n\n/* Custom scrollbar */\n.chat-thread::-webkit-scrollbar {\n  width: 6px;\n}\n\n.chat-thread::-webkit-scrollbar-track {\n  background: transparent;\n}\n\n.chat-thread::-webkit-scrollbar-thumb {\n  background: var(--mj-border-default);\n  border-radius: 3px;\n}\n\n.chat-thread::-webkit-scrollbar-thumb:hover {\n  background: var(--mj-text-secondary);\n}\n\n.empty-thread {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  flex: 1;\n  text-align: center;\n  color: var(--mj-text-secondary);\n  padding: 32px 16px;\n}\n\n.empty-thread i {\n  font-size: 36px;\n  margin-bottom: 12px;\n  opacity: 0.5;\n}\n\n.empty-thread p {\n  font-size: 13px;\n  line-height: 1.5;\n  margin: 0;\n  max-width: 220px;\n}\n\n/* ============================================================ */\n/* MESSAGE BUBBLES                                              */\n/* ============================================================ */\n\n.message-wrapper {\n  display: flex;\n  align-items: flex-end;\n  gap: 8px;\n}\n\n.message-wrapper.user {\n  justify-content: flex-end;\n}\n\n.message-wrapper.assistant {\n  justify-content: flex-start;\n}\n\n.message-wrapper.system {\n  justify-content: center;\n}\n\n.message-avatar {\n  width: 28px;\n  height: 28px;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  font-size: 12px;\n}\n\n.message-avatar.assistant-avatar {\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n}\n\n.message-avatar.user-avatar {\n  background: color-mix(in srgb, var(--mj-brand-primary) 20%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n}\n\n.message-bubble {\n  max-width: 80%;\n  padding: 10px 14px;\n  border-radius: 16px;\n  position: relative;\n}\n\n.message-bubble.user-bubble {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border-bottom-right-radius: 4px;\n}\n\n.message-bubble.user-bubble .message-timestamp {\n  color: rgba(255, 255, 255, 0.7);\n}\n\n.message-bubble.assistant-bubble {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-primary);\n  border-bottom-left-radius: 4px;\n}\n\n.message-bubble.assistant-bubble .message-timestamp {\n  color: var(--mj-text-secondary);\n}\n\n.message-bubble.system-bubble {\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-warning);\n  font-style: italic;\n  border-radius: 8px;\n  max-width: 90%;\n}\n\n.message-bubble.system-bubble .message-timestamp {\n  color: var(--mj-status-warning);\n}\n\n.message-bubble.typing-bubble {\n  padding: 14px 18px;\n}\n\n.message-content {\n  font-size: 13px;\n  line-height: 1.5;\n  word-wrap: break-word;\n  white-space: pre-wrap;\n}\n\n.message-timestamp {\n  font-size: 10px;\n  margin-top: 4px;\n  text-align: right;\n}\n\n/* ============================================================ */\n/* TYPING INDICATOR                                             */\n/* ============================================================ */\n\n.typing-indicator {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.typing-indicator .dot {\n  width: 7px;\n  height: 7px;\n  border-radius: 50%;\n  background: var(--mj-text-secondary);\n  animation: typingBounce 1.4s infinite ease-in-out both;\n}\n\n.typing-indicator .dot:nth-child(1) {\n  animation-delay: 0s;\n}\n\n.typing-indicator .dot:nth-child(2) {\n  animation-delay: 0.2s;\n}\n\n.typing-indicator .dot:nth-child(3) {\n  animation-delay: 0.4s;\n}\n\n@keyframes typingBounce {\n  0%, 60%, 100% {\n    transform: translateY(0);\n    opacity: 0.4;\n  }\n  30% {\n    transform: translateY(-6px);\n    opacity: 1;\n  }\n}\n\n/* ============================================================ */\n/* CHAT INPUT AREA                                              */\n/* ============================================================ */\n\n.chat-input-area {\n  padding: 12px 16px;\n  border-top: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  flex-shrink: 0;\n}\n\n.chat-input-area .input-wrapper {\n  display: flex;\n  align-items: flex-end;\n  gap: 8px;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-strong);\n  border-radius: 12px;\n  padding: 4px 4px 4px 12px;\n  transition: border-color 0.15s ease, box-shadow 0.15s ease;\n}\n\n.chat-input-area .input-wrapper:focus-within {\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 2px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.chat-input-area .chat-textarea {\n  flex: 1;\n  border: none;\n  outline: none;\n  resize: none;\n  font-size: 13px;\n  line-height: 20px;\n  color: var(--mj-text-primary);\n  background: transparent;\n  padding: 6px 0;\n  max-height: 80px;\n  font-family: inherit;\n}\n\n.chat-input-area .chat-textarea::placeholder {\n  color: var(--mj-text-secondary);\n}\n\n.chat-input-area .chat-textarea:disabled {\n  color: var(--mj-text-secondary);\n  cursor: not-allowed;\n}\n\n.chat-input-area .send-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  border: none;\n  border-radius: 8px;\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-secondary);\n  cursor: not-allowed;\n  transition: all 0.15s ease;\n  flex-shrink: 0;\n}\n\n.chat-input-area .send-btn i {\n  font-size: 13px;\n}\n\n.chat-input-area .send-btn.active {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  cursor: pointer;\n}\n\n.chat-input-area .send-btn.active:hover {\n  background: var(--mj-brand-primary);\n}\n\n.chat-input-area .send-btn:disabled {\n  cursor: not-allowed;\n}\n\n.chat-input-area .input-hint {\n  display: flex;\n  justify-content: center;\n  margin-top: 6px;\n}\n\n.chat-input-area .input-hint span {\n  font-size: 10px;\n  color: var(--mj-text-secondary);\n}\n\n.chat-input-area .input-hint kbd {\n  display: inline-block;\n  padding: 1px 4px;\n  font-size: 9px;\n  font-family: inherit;\n  color: var(--mj-text-secondary);\n  background: var(--mj-bg-surface-sunken);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 3px;\n  margin: 0 2px;\n}\n"] }]
     }], () => [{ type: i1.ComponentStudioStateService }, { type: i0.ChangeDetectorRef }], { chatThreadEl: [{
             type: ViewChild,
             args: ['chatThread']

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

@@ -840,11 +840,11 @@ export class ArtifactLoadDialogComponent {
             i0.ɵɵconditional(ctx.selectedArtifact ? 24 : -1);
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("themeColor", "primary")("disabled", !ctx.canLoad());
-        } }, dependencies: [i2.NgSelectOption, i2.ɵNgSelectMultipleOption, i2.DefaultValueAccessor, i2.SelectControlValueAccessor, i2.NgControlStatus, i2.NgModel, i1.DialogTitleBarComponent, i1.DialogActionsComponent, i3.CodeEditorComponent, i4.ButtonComponent, i5.LoadingComponent, i6.DatePipe], styles: ["\n\n.artifact-load-content[_ngcontent-%COMP%] {\n  height: 100%;\n  display: flex;\n  flex-direction: row;\n}\n\n\n\n.filter-panel[_ngcontent-%COMP%] {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  border-right: 1px solid #ddd;\n  transition: width 0.3s ease;\n  flex-shrink: 0;\n  background: #fafafa;\n}\n\n.panel-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 10px;\n  border-bottom: 1px solid #eee;\n  font-weight: bold;\n  color: #666;\n}\n\n.filter-content[_ngcontent-%COMP%] {\n  flex: 1;\n  padding: 15px;\n  overflow-y: auto;\n}\n\n.filter-group[_ngcontent-%COMP%] {\n  margin-bottom: 15px;\n}\n\n.filter-group[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n  display: block;\n  margin-bottom: 5px;\n  font-weight: 500;\n  color: #555;\n}\n\n.filter-input[_ngcontent-%COMP%], \n.filter-select[_ngcontent-%COMP%] {\n  width: 100%;\n  padding: 8px;\n  border: 1px solid #ccc;\n  border-radius: 4px;\n  font-size: 14px;\n}\n\n.filter-input[_ngcontent-%COMP%]:focus, \n.filter-select[_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: #2196f3;\n  box-shadow: 0 0 3px rgba(33, 150, 243, 0.3);\n}\n\n.filter-count[_ngcontent-%COMP%] {\n  background: #fff;\n  color: #2196f3;\n  border-radius: 50%;\n  min-width: 18px;\n  height: 18px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 10px;\n  font-weight: bold;\n  margin-left: 4px;\n}\n\n\n\n.main-content[_ngcontent-%COMP%] {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  flex: 2;\n  min-width: 0;\n}\n\n\n\n.tabs[_ngcontent-%COMP%] {\n  display: flex;\n  border-bottom: 1px solid #ddd;\n  background: #fafafa;\n}\n\n.tab[_ngcontent-%COMP%] {\n  padding: 12px 20px;\n  border: none;\n  background: transparent;\n  color: #666;\n  cursor: pointer;\n  font-size: 14px;\n  font-weight: 500;\n  border-bottom: 2px solid transparent;\n  transition: all 0.2s;\n}\n\n.tab[_ngcontent-%COMP%]:hover {\n  background: #f0f0f0;\n  color: #333;\n}\n\n.tab.active[_ngcontent-%COMP%] {\n  color: #2196f3;\n  border-bottom-color: #2196f3;\n  background: white;\n}\n\n.tab[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  margin-right: 6px;\n}\n\n\n\n.tab-content[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n}\n\n.artifacts-view[_ngcontent-%COMP%], \n.collections-view[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n\n\n\n.paging-controls[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 10px 15px;\n  border-bottom: 1px solid #eee;\n  background: white;\n}\n\n.page-info[_ngcontent-%COMP%] {\n  color: #666;\n  font-size: 14px;\n}\n\n\n\n.artifacts-list[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  padding: 10px 15px;\n  background: white;\n}\n\n.artifact-item[_ngcontent-%COMP%] {\n  border: 1px solid #ddd;\n  border-radius: 6px;\n  margin: 10px 0;\n  padding: 15px;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  background: white;\n}\n\n.artifact-item[_ngcontent-%COMP%]:hover {\n  border-color: #2196f3;\n  background: #fafafa;\n}\n\n.artifact-item.selected[_ngcontent-%COMP%] {\n  border-color: #2196f3;\n  background: #e8f4f8;\n}\n\n.artifact-content[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n}\n\n.artifact-main[_ngcontent-%COMP%] {\n  flex: 1;\n}\n\n.artifact-name[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  margin-bottom: 5px;\n}\n\n.artifact-name[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #666;\n  margin-right: 8px;\n}\n\n.artifact-name[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n  font-weight: 600;\n  color: #333;\n}\n\n.artifact-description[_ngcontent-%COMP%] {\n  color: #666;\n  font-size: 14px;\n  margin-top: 4px;\n}\n\n.artifact-meta[_ngcontent-%COMP%] {\n  text-align: right;\n  color: #999;\n  font-size: 12px;\n}\n\n\n\n.collections-view[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: 1fr 1.5fr;\n  gap: 15px;\n  padding: 15px;\n  overflow: hidden;\n}\n\n.collections-list[_ngcontent-%COMP%] {\n  overflow-y: auto;\n  border-right: 1px solid #eee;\n  padding-right: 15px;\n}\n\n.collection-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 12px;\n  border: 1px solid #ddd;\n  border-radius: 6px;\n  margin-bottom: 10px;\n  cursor: pointer;\n  transition: all 0.2s;\n  background: white;\n}\n\n.collection-item[_ngcontent-%COMP%]:hover {\n  border-color: #2196f3;\n  background: #fafafa;\n}\n\n.collection-item.selected[_ngcontent-%COMP%] {\n  border-color: #2196f3;\n  background: #e8f4f8;\n}\n\n.collection-icon[_ngcontent-%COMP%] {\n  font-size: 24px;\n  color: #2196f3;\n}\n\n.collection-info[_ngcontent-%COMP%] {\n  flex: 1;\n}\n\n.collection-name[_ngcontent-%COMP%] {\n  font-weight: 600;\n  color: #333;\n  margin-bottom: 4px;\n}\n\n.collection-description[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: #666;\n}\n\n.collection-artifacts[_ngcontent-%COMP%] {\n  overflow-y: auto;\n}\n\n.section-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 10px;\n  background: #f8f9fa;\n  border-radius: 4px;\n  font-weight: 600;\n  color: #555;\n  margin-bottom: 10px;\n}\n\n\n\n.version-panel[_ngcontent-%COMP%] {\n  width: 350px;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  border-left: 1px solid #ddd;\n  flex-shrink: 0;\n  background: #fafafa;\n}\n\n.version-content[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  padding: 15px;\n}\n\n.version-list[_ngcontent-%COMP%] {\n  margin-bottom: 20px;\n}\n\n.version-item[_ngcontent-%COMP%] {\n  padding: 12px;\n  border: 1px solid #ddd;\n  border-radius: 6px;\n  margin-bottom: 10px;\n  cursor: pointer;\n  transition: all 0.2s;\n  background: white;\n}\n\n.version-item[_ngcontent-%COMP%]:hover {\n  border-color: #2196f3;\n  background: #fafafa;\n}\n\n.version-item.selected[_ngcontent-%COMP%] {\n  border-color: #2196f3;\n  background: #e8f4f8;\n}\n\n.version-number[_ngcontent-%COMP%] {\n  font-weight: 600;\n  color: #333;\n  margin-bottom: 4px;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.version-number[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 14px;\n  color: #2196f3;\n}\n\n.version-meta[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: #666;\n}\n\n.version-comments[_ngcontent-%COMP%] {\n  margin-top: 4px;\n  font-style: italic;\n  color: #888;\n}\n\n\n\n.preview-section[_ngcontent-%COMP%] {\n  border-top: 2px solid #ddd;\n  padding-top: 15px;\n  margin-top: 15px;\n}\n\n.preview-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-weight: 600;\n  color: #555;\n  margin-bottom: 12px;\n  padding-bottom: 8px;\n  border-bottom: 1px solid #eee;\n}\n\n.preview-content[_ngcontent-%COMP%] {\n  background: white;\n  border: 1px solid #ddd;\n  border-radius: 6px;\n  padding: 12px;\n}\n\n.preview-item[_ngcontent-%COMP%] {\n  margin-bottom: 8px;\n  font-size: 13px;\n}\n\n.preview-item[_ngcontent-%COMP%]   strong[_ngcontent-%COMP%] {\n  color: #555;\n  font-weight: 600;\n  margin-right: 6px;\n}\n\n.preview-error[_ngcontent-%COMP%] {\n  background: #fff3cd;\n  border: 1px solid #ffeaa7;\n  border-radius: 4px;\n  padding: 10px;\n  color: #856404;\n  font-size: 13px;\n}\n\n.preview-error[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  margin-right: 6px;\n}\n\n\n\n.loading-state[_ngcontent-%COMP%], \n.empty-state[_ngcontent-%COMP%] {\n  text-align: center;\n  padding: 40px;\n  color: #666;\n}\n\n.loading-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%], \n.empty-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 36px;\n  margin-bottom: 15px;\n  color: #999;\n}\n\n.loading-state[_ngcontent-%COMP%]   i.fa-spin[_ngcontent-%COMP%] {\n  color: #2196f3;\n}\n\n.empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 5px 0;\n  font-size: 14px;\n}\n\n\n\n.preview-json-section[_ngcontent-%COMP%] {\n  margin-top: 15px;\n  border-top: 1px solid #e0e0e0;\n  padding-top: 10px;\n}\n\n.preview-json-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px;\n  cursor: pointer;\n  background: #f8f9fa;\n  border-radius: 4px;\n  transition: background 0.2s;\n}\n\n.preview-json-header[_ngcontent-%COMP%]:hover {\n  background: #e9ecef;\n}\n\n.preview-json-header[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: #666;\n}\n\n.preview-json-header[_ngcontent-%COMP%]   strong[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: #333;\n}\n\n.preview-json-content[_ngcontent-%COMP%] {\n  margin-top: 10px;\n  border: 1px solid #dee2e6;\n  border-radius: 4px;\n  overflow: hidden;\n}"] });
+        } }, dependencies: [i2.NgSelectOption, i2.ɵNgSelectMultipleOption, i2.DefaultValueAccessor, i2.SelectControlValueAccessor, i2.NgControlStatus, i2.NgModel, i1.DialogTitleBarComponent, i1.DialogActionsComponent, i3.CodeEditorComponent, i4.ButtonComponent, i5.LoadingComponent, i6.DatePipe], styles: ["\n\n.artifact-load-content[_ngcontent-%COMP%] {\n  height: 100%;\n  display: flex;\n  flex-direction: row;\n}\n\n\n\n.filter-panel[_ngcontent-%COMP%] {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  border-right: 1px solid var(--mj-border-default);\n  transition: width 0.3s ease;\n  flex-shrink: 0;\n  background: var(--mj-bg-surface-sunken);\n}\n\n.panel-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 10px;\n  border-bottom: 1px solid var(--mj-border-default);\n  font-weight: bold;\n  color: var(--mj-text-secondary);\n}\n\n.filter-content[_ngcontent-%COMP%] {\n  flex: 1;\n  padding: 15px;\n  overflow-y: auto;\n}\n\n.filter-group[_ngcontent-%COMP%] {\n  margin-bottom: 15px;\n}\n\n.filter-group[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n  display: block;\n  margin-bottom: 5px;\n  font-weight: 500;\n  color: var(--mj-text-secondary);\n}\n\n.filter-input[_ngcontent-%COMP%], \n.filter-select[_ngcontent-%COMP%] {\n  width: 100%;\n  padding: 8px;\n  border: 1px solid var(--mj-border-strong);\n  border-radius: 4px;\n  font-size: 14px;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n}\n\n.filter-input[_ngcontent-%COMP%]:focus, \n.filter-select[_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 2px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.filter-count[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-brand-primary);\n  border-radius: 50%;\n  min-width: 18px;\n  height: 18px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 10px;\n  font-weight: bold;\n  margin-left: 4px;\n}\n\n\n\n.main-content[_ngcontent-%COMP%] {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  flex: 2;\n  min-width: 0;\n}\n\n\n\n.tabs[_ngcontent-%COMP%] {\n  display: flex;\n  border-bottom: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface-sunken);\n}\n\n.tab[_ngcontent-%COMP%] {\n  padding: 12px 20px;\n  border: none;\n  background: transparent;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  font-size: 14px;\n  font-weight: 500;\n  border-bottom: 2px solid transparent;\n  transition: all 0.2s;\n}\n\n.tab[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-primary);\n}\n\n.tab.active[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  border-bottom-color: var(--mj-brand-primary);\n  background: var(--mj-bg-surface);\n}\n\n.tab[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  margin-right: 6px;\n}\n\n\n\n.tab-content[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n}\n\n.artifacts-view[_ngcontent-%COMP%], \n.collections-view[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n\n\n\n.paging-controls[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 10px 15px;\n  border-bottom: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n}\n\n.page-info[_ngcontent-%COMP%] {\n  color: var(--mj-text-secondary);\n  font-size: 14px;\n}\n\n\n\n.artifacts-list[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  padding: 10px 15px;\n  background: var(--mj-bg-surface);\n}\n\n.artifact-item[_ngcontent-%COMP%] {\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  margin: 10px 0;\n  padding: 15px;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  background: var(--mj-bg-surface);\n}\n\n.artifact-item[_ngcontent-%COMP%]:hover {\n  border-color: var(--mj-brand-primary);\n  background: var(--mj-bg-surface-sunken);\n}\n\n.artifact-item.selected[_ngcontent-%COMP%] {\n  border-color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.artifact-content[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n}\n\n.artifact-main[_ngcontent-%COMP%] {\n  flex: 1;\n}\n\n.artifact-name[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  margin-bottom: 5px;\n}\n\n.artifact-name[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-text-secondary);\n  margin-right: 8px;\n}\n\n.artifact-name[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.artifact-description[_ngcontent-%COMP%] {\n  color: var(--mj-text-secondary);\n  font-size: 14px;\n  margin-top: 4px;\n}\n\n.artifact-meta[_ngcontent-%COMP%] {\n  text-align: right;\n  color: var(--mj-text-muted);\n  font-size: 12px;\n}\n\n\n\n.collections-view[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: 1fr 1.5fr;\n  gap: 15px;\n  padding: 15px;\n  overflow: hidden;\n}\n\n.collections-list[_ngcontent-%COMP%] {\n  overflow-y: auto;\n  border-right: 1px solid var(--mj-border-default);\n  padding-right: 15px;\n}\n\n.collection-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 12px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  margin-bottom: 10px;\n  cursor: pointer;\n  transition: all 0.2s;\n  background: var(--mj-bg-surface);\n}\n\n.collection-item[_ngcontent-%COMP%]:hover {\n  border-color: var(--mj-brand-primary);\n  background: var(--mj-bg-surface-sunken);\n}\n\n.collection-item.selected[_ngcontent-%COMP%] {\n  border-color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.collection-icon[_ngcontent-%COMP%] {\n  font-size: 24px;\n  color: var(--mj-brand-primary);\n}\n\n.collection-info[_ngcontent-%COMP%] {\n  flex: 1;\n}\n\n.collection-name[_ngcontent-%COMP%] {\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin-bottom: 4px;\n}\n\n.collection-description[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n}\n\n.collection-artifacts[_ngcontent-%COMP%] {\n  overflow-y: auto;\n}\n\n.section-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 10px;\n  background: var(--mj-bg-surface-sunken);\n  border-radius: 4px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  margin-bottom: 10px;\n}\n\n\n\n.version-panel[_ngcontent-%COMP%] {\n  width: 350px;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  border-left: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n  background: var(--mj-bg-surface-sunken);\n}\n\n.version-content[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  padding: 15px;\n}\n\n.version-list[_ngcontent-%COMP%] {\n  margin-bottom: 20px;\n}\n\n.version-item[_ngcontent-%COMP%] {\n  padding: 12px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  margin-bottom: 10px;\n  cursor: pointer;\n  transition: all 0.2s;\n  background: var(--mj-bg-surface);\n}\n\n.version-item[_ngcontent-%COMP%]:hover {\n  border-color: var(--mj-brand-primary);\n  background: var(--mj-bg-surface-sunken);\n}\n\n.version-item.selected[_ngcontent-%COMP%] {\n  border-color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.version-number[_ngcontent-%COMP%] {\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin-bottom: 4px;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.version-number[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 14px;\n  color: var(--mj-brand-primary);\n}\n\n.version-meta[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n}\n\n.version-comments[_ngcontent-%COMP%] {\n  margin-top: 4px;\n  font-style: italic;\n  color: var(--mj-text-muted);\n}\n\n\n\n.preview-section[_ngcontent-%COMP%] {\n  border-top: 2px solid var(--mj-border-default);\n  padding-top: 15px;\n  margin-top: 15px;\n}\n\n.preview-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  margin-bottom: 12px;\n  padding-bottom: 8px;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.preview-content[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  padding: 12px;\n}\n\n.preview-item[_ngcontent-%COMP%] {\n  margin-bottom: 8px;\n  font-size: 13px;\n}\n\n.preview-item[_ngcontent-%COMP%]   strong[_ngcontent-%COMP%] {\n  color: var(--mj-text-secondary);\n  font-weight: 600;\n  margin-right: 6px;\n}\n\n.preview-error[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  border: 1px solid var(--mj-status-warning);\n  border-radius: 4px;\n  padding: 10px;\n  color: var(--mj-status-warning);\n  font-size: 13px;\n}\n\n.preview-error[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  margin-right: 6px;\n}\n\n\n\n.loading-state[_ngcontent-%COMP%], \n.empty-state[_ngcontent-%COMP%] {\n  text-align: center;\n  padding: 40px;\n  color: var(--mj-text-secondary);\n}\n\n.loading-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%], \n.empty-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 36px;\n  margin-bottom: 15px;\n  color: var(--mj-text-muted);\n}\n\n.loading-state[_ngcontent-%COMP%]   i.fa-spin[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n.empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 5px 0;\n  font-size: 14px;\n}\n\n\n\n.preview-json-section[_ngcontent-%COMP%] {\n  margin-top: 15px;\n  border-top: 1px solid var(--mj-border-default);\n  padding-top: 10px;\n}\n\n.preview-json-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px;\n  cursor: pointer;\n  background: var(--mj-bg-surface-sunken);\n  border-radius: 4px;\n  transition: background 0.2s;\n}\n\n.preview-json-header[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n}\n\n.preview-json-header[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n}\n\n.preview-json-header[_ngcontent-%COMP%]   strong[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: var(--mj-text-primary);\n}\n\n.preview-json-content[_ngcontent-%COMP%] {\n  margin-top: 10px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 4px;\n  overflow: hidden;\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ArtifactLoadDialogComponent, [{
         type: Component,
-        args: [{ standalone: false, selector: 'app-artifact-load-dialog', template: "<div>\n  <kendo-dialog-titlebar (close)=\"cancel()\">\n    <div style=\"font-size: 18px;\">\n      <i class=\"fa-solid fa-database\"></i> Load Component from Artifact\n    </div>\n  </kendo-dialog-titlebar>\n\n  <div class=\"artifact-load-content\">\n    <!-- Left Filter Panel -->\n    <div class=\"filter-panel\" [style.width]=\"isFilterPanelCollapsed ? '40px' : '280px'\">\n      <div class=\"panel-header\">\n        @if (!isFilterPanelCollapsed) {\n          <span>Filters</span>\n        }\n        <button kendoButton (click)=\"toggleFilterPanel()\"\n                [fillMode]=\"'flat'\"\n                [class.filter-active]=\"getActiveFilterCount() > 0\"\n                [themeColor]=\"getActiveFilterCount() > 0 ? 'primary' : 'base'\">\n          <i class=\"fa-solid fa-filter\"></i>\n          @if (isFilterPanelCollapsed && getActiveFilterCount() > 0) {\n            <span class=\"filter-count\">{{ getActiveFilterCount() }}</span>\n          }\n        </button>\n      </div>\n\n      @if (!isFilterPanelCollapsed) {\n        <div class=\"filter-content\">\n          <!-- Search -->\n          <div class=\"filter-group\">\n            <label>Search</label>\n            <input type=\"text\"\n                   [(ngModel)]=\"searchTerm\"\n                   (input)=\"onSearchInput()\"\n                   placeholder=\"Name or description...\"\n                   class=\"filter-input\">\n          </div>\n\n          <!-- Artifact Type -->\n          <div class=\"filter-group\">\n            <label>Artifact Type</label>\n            <select [(ngModel)]=\"selectedArtifactType\"\n                    (change)=\"onArtifactTypeChange()\"\n                    class=\"filter-select\">\n              <option value=\"\">Component (default)</option>\n              <option value=\"Component\">Component</option>\n              <option value=\"Report\">Report</option>\n              <option value=\"Dashboard\">Dashboard</option>\n            </select>\n          </div>\n\n          <!-- User Email -->\n          <div class=\"filter-group\">\n            <label>Filter by User</label>\n            <input type=\"text\"\n                   [(ngModel)]=\"userEmail\"\n                   (input)=\"filterArtifacts()\"\n                   placeholder=\"Enter user email...\"\n                   class=\"filter-input\">\n          </div>\n        </div>\n      }\n    </div>\n\n    <!-- Main Content Area -->\n    <div class=\"main-content\">\n      <!-- Tabs -->\n      <div class=\"tabs\">\n        <button class=\"tab\"\n                [class.active]=\"activeTab === 0\"\n                (click)=\"onTabSelect(0)\">\n          <i class=\"fa-solid fa-file-code\"></i> All Artifacts\n        </button>\n        <button class=\"tab\"\n                [class.active]=\"activeTab === 1\"\n                (click)=\"onTabSelect(1)\">\n          <i class=\"fa-solid fa-folder\"></i> Collections\n        </button>\n      </div>\n\n      <!-- Tab Content -->\n      <div class=\"tab-content\">\n        <!-- Artifacts Tab -->\n        @if (activeTab === 0) {\n          <div class=\"artifacts-view\">\n            <!-- Paging Controls -->\n            <div class=\"paging-controls\">\n              <button kendoButton\n                      (click)=\"previousPage()\"\n                      [disabled]=\"!canGoPrevious()\"\n                      [themeColor]=\"'base'\">\n                <i class=\"fa-solid fa-chevron-left\"></i> Previous\n              </button>\n              <span class=\"page-info\">\n                Page {{ currentPage + 1 }} of {{ getTotalPages() }}\n                ({{ totalArtifacts }} total)\n              </span>\n              <button kendoButton\n                      (click)=\"nextPage()\"\n                      [disabled]=\"!canGoNext()\"\n                      [themeColor]=\"'base'\">\n                Next <i class=\"fa-solid fa-chevron-right\"></i>\n              </button>\n            </div>\n\n            <!-- Artifacts List -->\n            <div class=\"artifacts-list\">\n              @if (isLoading) {\n                <div class=\"loading-state\">\n                  <mj-loading text=\"Loading artifacts...\" size=\"small\"></mj-loading>\n                </div>\n              }\n              @else if (artifacts.length === 0) {\n                <div class=\"empty-state\">\n                  <i class=\"fa-solid fa-inbox\"></i>\n                  <p>No artifacts found</p>\n                </div>\n              }\n              @else {\n                @for (artifact of artifacts; track artifact.ID) {\n                  <div class=\"artifact-item\"\n                       [class.selected]=\"IsArtifactSelected(artifact)\"\n                       (click)=\"selectArtifact(artifact)\">\n                    <div class=\"artifact-content\">\n                      <div class=\"artifact-main\">\n                        <div class=\"artifact-name\">\n                          <i class=\"fa-solid fa-file-code\"></i>\n                          <span>{{ artifact.Name }}</span>\n                        </div>\n                        @if (artifact.Description) {\n                          <div class=\"artifact-description\">\n                            {{ artifact.Description }}\n                          </div>\n                        }\n                      </div>\n                      <div class=\"artifact-meta\">\n                        <div>{{ artifact.Type }}</div>\n                        <div>{{ artifact.__mj_UpdatedAt | date:'short' }}</div>\n                      </div>\n                    </div>\n                  </div>\n                }\n              }\n            </div>\n          </div>\n        }\n\n        <!-- Collections Tab -->\n        @if (activeTab === 1) {\n          <div class=\"collections-view\">\n            <div class=\"collections-list\">\n              @if (isLoadingCollections) {\n                <div class=\"loading-state\">\n                  <mj-loading text=\"Loading collections...\" size=\"small\"></mj-loading>\n                </div>\n              }\n              @else if (collections.length === 0) {\n                <div class=\"empty-state\">\n                  <i class=\"fa-solid fa-folder-open\"></i>\n                  <p>No collections found</p>\n                </div>\n              }\n              @else {\n                @for (collection of collections; track collection.ID) {\n                  <div class=\"collection-item\"\n                       [class.selected]=\"IsCollectionSelected(collection)\"\n                       (click)=\"selectCollection(collection)\">\n                    <div class=\"collection-icon\">\n                      <i class=\"fa-solid fa-folder\"></i>\n                    </div>\n                    <div class=\"collection-info\">\n                      <div class=\"collection-name\">{{ collection.Name }}</div>\n                      @if (collection.Description) {\n                        <div class=\"collection-description\">{{ collection.Description }}</div>\n                      }\n                    </div>\n                  </div>\n                }\n              }\n            </div>\n\n            @if (selectedCollection) {\n              <div class=\"collection-artifacts\">\n                <div class=\"section-header\">\n                  <i class=\"fa-solid fa-file-code\"></i>\n                  Artifacts in \"{{ selectedCollection.Name }}\"\n                </div>\n                @if (collectionArtifacts.length === 0) {\n                  <div class=\"empty-state\">\n                    <i class=\"fa-solid fa-inbox\"></i>\n                    <p>No artifacts in this collection</p>\n                  </div>\n                }\n                @else {\n                  @for (artifact of collectionArtifacts; track artifact.ID) {\n                    <div class=\"artifact-item\"\n                         [class.selected]=\"IsArtifactSelected(artifact)\"\n                         (click)=\"selectArtifact(artifact)\">\n                      <div class=\"artifact-content\">\n                        <div class=\"artifact-main\">\n                          <div class=\"artifact-name\">\n                            <i class=\"fa-solid fa-file-code\"></i>\n                            <span>{{ artifact.Name }}</span>\n                          </div>\n                          @if (artifact.Description) {\n                            <div class=\"artifact-description\">\n                              {{ artifact.Description }}\n                            </div>\n                          }\n                        </div>\n                      </div>\n                    </div>\n                  }\n                }\n              </div>\n            }\n          </div>\n        }\n      </div>\n    </div>\n\n    <!-- Right Version/Preview Panel -->\n    @if (selectedArtifact) {\n      <div class=\"version-panel\">\n        <div class=\"panel-header\">\n          <h4><i class=\"fa-solid fa-code-branch\"></i> Versions</h4>\n        </div>\n\n        <div class=\"version-content\">\n          @if (isLoadingVersions) {\n            <div class=\"loading-state\">\n              <mj-loading text=\"Loading versions...\" size=\"small\"></mj-loading>\n            </div>\n          }\n          @else if (artifactVersions.length === 0) {\n            <div class=\"empty-state\">\n              <i class=\"fa-solid fa-info-circle\"></i>\n              <p>No versions available</p>\n            </div>\n          }\n          @else {\n            <div class=\"version-list\">\n              @for (version of artifactVersions; track version.ID) {\n                <div class=\"version-item\"\n                     [class.selected]=\"IsVersionSelected(version)\"\n                     (click)=\"selectVersion(version)\">\n                  <div class=\"version-number\">\n                    <i class=\"fa-solid fa-code-branch\"></i>\n                    Version {{ version.VersionNumber }}\n                  </div>\n                  <div class=\"version-meta\">\n                    <div>{{ version.__mj_UpdatedAt | date:'short' }}</div>\n                    @if (version.Comments) {\n                      <div class=\"version-comments\">{{ version.Comments }}</div>\n                    }\n                  </div>\n                </div>\n              }\n            </div>\n\n            <!-- Preview Section -->\n            @if (selectedVersion) {\n              <div class=\"preview-section\">\n                <div class=\"preview-header\">\n                  <i class=\"fa-solid fa-eye\"></i> Preview\n                </div>\n                @if (previewError) {\n                  <div class=\"preview-error\">\n                    <i class=\"fa-solid fa-exclamation-triangle\"></i>\n                    {{ previewError }}\n                  </div>\n                }\n                @else if (previewSpec) {\n                  <div class=\"preview-content\">\n                    <div class=\"preview-item\">\n                      <strong>Name:</strong> {{ previewSpec.name }}\n                    </div>\n                    @if (previewSpec.description) {\n                      <div class=\"preview-item\">\n                        <strong>Description:</strong> {{ previewSpec.description }}\n                      </div>\n                    }\n                    @if (previewSpec.type) {\n                      <div class=\"preview-item\">\n                        <strong>Type:</strong> {{ previewSpec.type }}\n                      </div>\n                    }\n                    @if (previewSpec.namespace) {\n                      <div class=\"preview-item\">\n                        <strong>Namespace:</strong> {{ previewSpec.namespace }}\n                      </div>\n                    }\n                    <div class=\"preview-item\">\n                      <strong>Has Code:</strong> {{ previewSpec.code ? 'Yes' : 'No' }}\n                    </div>\n                    @if (previewSpec.dependencies && previewSpec.dependencies.length > 0) {\n                      <div class=\"preview-item\">\n                        <strong>Dependencies:</strong> {{ previewSpec.dependencies.length }}\n                      </div>\n                    }\n\n                    <!-- Full Spec JSON Viewer -->\n                    <div class=\"preview-json-section\">\n                      <div class=\"preview-json-header\" (click)=\"toggleJsonPreview()\">\n                        <i class=\"fa-solid\" [class.fa-chevron-right]=\"!showJsonPreview\" [class.fa-chevron-down]=\"showJsonPreview\"></i>\n                        <strong>Full Specification (JSON)</strong>\n                      </div>\n                      @if (showJsonPreview) {\n                        <div class=\"preview-json-content\">\n                          <mj-code-editor\n                            [value]=\"getPreviewJSON()\"\n                            [language]=\"'json'\"\n                            [readonly]=\"true\"\n                            [lineWrapping]=\"true\"\n                            [setup]=\"'basic'\"\n                            style=\"height: 300px; width: 100%;\">\n                          </mj-code-editor>\n                        </div>\n                      }\n                    </div>\n                  </div>\n                }\n              </div>\n            }\n          }\n        </div>\n      </div>\n    }\n  </div>\n\n  <kendo-dialog-actions>\n    <button kendoButton\n            [themeColor]=\"'primary'\"\n            (click)=\"load()\"\n            [disabled]=\"!canLoad()\">\n      <i class=\"fa-solid fa-download\"></i>\n      Load Component\n    </button>\n    <button kendoButton (click)=\"cancel()\">Cancel</button>\n  </kendo-dialog-actions>\n</div>\n", styles: ["/* Main container */\n.artifact-load-content {\n  height: 100%;\n  display: flex;\n  flex-direction: row;\n}\n\n/* Filter Panel */\n.filter-panel {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  border-right: 1px solid #ddd;\n  transition: width 0.3s ease;\n  flex-shrink: 0;\n  background: #fafafa;\n}\n\n.panel-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 10px;\n  border-bottom: 1px solid #eee;\n  font-weight: bold;\n  color: #666;\n}\n\n.filter-content {\n  flex: 1;\n  padding: 15px;\n  overflow-y: auto;\n}\n\n.filter-group {\n  margin-bottom: 15px;\n}\n\n.filter-group label {\n  display: block;\n  margin-bottom: 5px;\n  font-weight: 500;\n  color: #555;\n}\n\n.filter-input,\n.filter-select {\n  width: 100%;\n  padding: 8px;\n  border: 1px solid #ccc;\n  border-radius: 4px;\n  font-size: 14px;\n}\n\n.filter-input:focus,\n.filter-select:focus {\n  outline: none;\n  border-color: #2196f3;\n  box-shadow: 0 0 3px rgba(33, 150, 243, 0.3);\n}\n\n.filter-count {\n  background: #fff;\n  color: #2196f3;\n  border-radius: 50%;\n  min-width: 18px;\n  height: 18px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 10px;\n  font-weight: bold;\n  margin-left: 4px;\n}\n\n/* Main Content Panel */\n.main-content {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  flex: 2;\n  min-width: 0;\n}\n\n/* Tabs */\n.tabs {\n  display: flex;\n  border-bottom: 1px solid #ddd;\n  background: #fafafa;\n}\n\n.tab {\n  padding: 12px 20px;\n  border: none;\n  background: transparent;\n  color: #666;\n  cursor: pointer;\n  font-size: 14px;\n  font-weight: 500;\n  border-bottom: 2px solid transparent;\n  transition: all 0.2s;\n}\n\n.tab:hover {\n  background: #f0f0f0;\n  color: #333;\n}\n\n.tab.active {\n  color: #2196f3;\n  border-bottom-color: #2196f3;\n  background: white;\n}\n\n.tab i {\n  margin-right: 6px;\n}\n\n/* Tab Content */\n.tab-content {\n  flex: 1;\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n}\n\n.artifacts-view,\n.collections-view {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n\n/* Paging Controls */\n.paging-controls {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 10px 15px;\n  border-bottom: 1px solid #eee;\n  background: white;\n}\n\n.page-info {\n  color: #666;\n  font-size: 14px;\n}\n\n/* Artifacts List */\n.artifacts-list {\n  flex: 1;\n  overflow-y: auto;\n  padding: 10px 15px;\n  background: white;\n}\n\n.artifact-item {\n  border: 1px solid #ddd;\n  border-radius: 6px;\n  margin: 10px 0;\n  padding: 15px;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  background: white;\n}\n\n.artifact-item:hover {\n  border-color: #2196f3;\n  background: #fafafa;\n}\n\n.artifact-item.selected {\n  border-color: #2196f3;\n  background: #e8f4f8;\n}\n\n.artifact-content {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n}\n\n.artifact-main {\n  flex: 1;\n}\n\n.artifact-name {\n  display: flex;\n  align-items: center;\n  margin-bottom: 5px;\n}\n\n.artifact-name i {\n  color: #666;\n  margin-right: 8px;\n}\n\n.artifact-name span {\n  font-weight: 600;\n  color: #333;\n}\n\n.artifact-description {\n  color: #666;\n  font-size: 14px;\n  margin-top: 4px;\n}\n\n.artifact-meta {\n  text-align: right;\n  color: #999;\n  font-size: 12px;\n}\n\n/* Collections View */\n.collections-view {\n  display: grid;\n  grid-template-columns: 1fr 1.5fr;\n  gap: 15px;\n  padding: 15px;\n  overflow: hidden;\n}\n\n.collections-list {\n  overflow-y: auto;\n  border-right: 1px solid #eee;\n  padding-right: 15px;\n}\n\n.collection-item {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 12px;\n  border: 1px solid #ddd;\n  border-radius: 6px;\n  margin-bottom: 10px;\n  cursor: pointer;\n  transition: all 0.2s;\n  background: white;\n}\n\n.collection-item:hover {\n  border-color: #2196f3;\n  background: #fafafa;\n}\n\n.collection-item.selected {\n  border-color: #2196f3;\n  background: #e8f4f8;\n}\n\n.collection-icon {\n  font-size: 24px;\n  color: #2196f3;\n}\n\n.collection-info {\n  flex: 1;\n}\n\n.collection-name {\n  font-weight: 600;\n  color: #333;\n  margin-bottom: 4px;\n}\n\n.collection-description {\n  font-size: 13px;\n  color: #666;\n}\n\n.collection-artifacts {\n  overflow-y: auto;\n}\n\n.section-header {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 10px;\n  background: #f8f9fa;\n  border-radius: 4px;\n  font-weight: 600;\n  color: #555;\n  margin-bottom: 10px;\n}\n\n/* Version Panel */\n.version-panel {\n  width: 350px;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  border-left: 1px solid #ddd;\n  flex-shrink: 0;\n  background: #fafafa;\n}\n\n.version-content {\n  flex: 1;\n  overflow-y: auto;\n  padding: 15px;\n}\n\n.version-list {\n  margin-bottom: 20px;\n}\n\n.version-item {\n  padding: 12px;\n  border: 1px solid #ddd;\n  border-radius: 6px;\n  margin-bottom: 10px;\n  cursor: pointer;\n  transition: all 0.2s;\n  background: white;\n}\n\n.version-item:hover {\n  border-color: #2196f3;\n  background: #fafafa;\n}\n\n.version-item.selected {\n  border-color: #2196f3;\n  background: #e8f4f8;\n}\n\n.version-number {\n  font-weight: 600;\n  color: #333;\n  margin-bottom: 4px;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.version-number i {\n  font-size: 14px;\n  color: #2196f3;\n}\n\n.version-meta {\n  font-size: 12px;\n  color: #666;\n}\n\n.version-comments {\n  margin-top: 4px;\n  font-style: italic;\n  color: #888;\n}\n\n/* Preview Section */\n.preview-section {\n  border-top: 2px solid #ddd;\n  padding-top: 15px;\n  margin-top: 15px;\n}\n\n.preview-header {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-weight: 600;\n  color: #555;\n  margin-bottom: 12px;\n  padding-bottom: 8px;\n  border-bottom: 1px solid #eee;\n}\n\n.preview-content {\n  background: white;\n  border: 1px solid #ddd;\n  border-radius: 6px;\n  padding: 12px;\n}\n\n.preview-item {\n  margin-bottom: 8px;\n  font-size: 13px;\n}\n\n.preview-item strong {\n  color: #555;\n  font-weight: 600;\n  margin-right: 6px;\n}\n\n.preview-error {\n  background: #fff3cd;\n  border: 1px solid #ffeaa7;\n  border-radius: 4px;\n  padding: 10px;\n  color: #856404;\n  font-size: 13px;\n}\n\n.preview-error i {\n  margin-right: 6px;\n}\n\n/* Loading & Empty States */\n.loading-state,\n.empty-state {\n  text-align: center;\n  padding: 40px;\n  color: #666;\n}\n\n.loading-state i,\n.empty-state i {\n  font-size: 36px;\n  margin-bottom: 15px;\n  color: #999;\n}\n\n.loading-state i.fa-spin {\n  color: #2196f3;\n}\n\n.empty-state p {\n  margin: 5px 0;\n  font-size: 14px;\n}\n\n/* JSON Preview Section */\n.preview-json-section {\n  margin-top: 15px;\n  border-top: 1px solid #e0e0e0;\n  padding-top: 10px;\n}\n\n.preview-json-header {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px;\n  cursor: pointer;\n  background: #f8f9fa;\n  border-radius: 4px;\n  transition: background 0.2s;\n}\n\n.preview-json-header:hover {\n  background: #e9ecef;\n}\n\n.preview-json-header i {\n  font-size: 12px;\n  color: #666;\n}\n\n.preview-json-header strong {\n  font-size: 13px;\n  color: #333;\n}\n\n.preview-json-content {\n  margin-top: 10px;\n  border: 1px solid #dee2e6;\n  border-radius: 4px;\n  overflow: hidden;\n}\n"] }]
+        args: [{ standalone: false, selector: 'app-artifact-load-dialog', template: "<div>\n  <kendo-dialog-titlebar (close)=\"cancel()\">\n    <div style=\"font-size: 18px;\">\n      <i class=\"fa-solid fa-database\"></i> Load Component from Artifact\n    </div>\n  </kendo-dialog-titlebar>\n\n  <div class=\"artifact-load-content\">\n    <!-- Left Filter Panel -->\n    <div class=\"filter-panel\" [style.width]=\"isFilterPanelCollapsed ? '40px' : '280px'\">\n      <div class=\"panel-header\">\n        @if (!isFilterPanelCollapsed) {\n          <span>Filters</span>\n        }\n        <button kendoButton (click)=\"toggleFilterPanel()\"\n                [fillMode]=\"'flat'\"\n                [class.filter-active]=\"getActiveFilterCount() > 0\"\n                [themeColor]=\"getActiveFilterCount() > 0 ? 'primary' : 'base'\">\n          <i class=\"fa-solid fa-filter\"></i>\n          @if (isFilterPanelCollapsed && getActiveFilterCount() > 0) {\n            <span class=\"filter-count\">{{ getActiveFilterCount() }}</span>\n          }\n        </button>\n      </div>\n\n      @if (!isFilterPanelCollapsed) {\n        <div class=\"filter-content\">\n          <!-- Search -->\n          <div class=\"filter-group\">\n            <label>Search</label>\n            <input type=\"text\"\n                   [(ngModel)]=\"searchTerm\"\n                   (input)=\"onSearchInput()\"\n                   placeholder=\"Name or description...\"\n                   class=\"filter-input\">\n          </div>\n\n          <!-- Artifact Type -->\n          <div class=\"filter-group\">\n            <label>Artifact Type</label>\n            <select [(ngModel)]=\"selectedArtifactType\"\n                    (change)=\"onArtifactTypeChange()\"\n                    class=\"filter-select\">\n              <option value=\"\">Component (default)</option>\n              <option value=\"Component\">Component</option>\n              <option value=\"Report\">Report</option>\n              <option value=\"Dashboard\">Dashboard</option>\n            </select>\n          </div>\n\n          <!-- User Email -->\n          <div class=\"filter-group\">\n            <label>Filter by User</label>\n            <input type=\"text\"\n                   [(ngModel)]=\"userEmail\"\n                   (input)=\"filterArtifacts()\"\n                   placeholder=\"Enter user email...\"\n                   class=\"filter-input\">\n          </div>\n        </div>\n      }\n    </div>\n\n    <!-- Main Content Area -->\n    <div class=\"main-content\">\n      <!-- Tabs -->\n      <div class=\"tabs\">\n        <button class=\"tab\"\n                [class.active]=\"activeTab === 0\"\n                (click)=\"onTabSelect(0)\">\n          <i class=\"fa-solid fa-file-code\"></i> All Artifacts\n        </button>\n        <button class=\"tab\"\n                [class.active]=\"activeTab === 1\"\n                (click)=\"onTabSelect(1)\">\n          <i class=\"fa-solid fa-folder\"></i> Collections\n        </button>\n      </div>\n\n      <!-- Tab Content -->\n      <div class=\"tab-content\">\n        <!-- Artifacts Tab -->\n        @if (activeTab === 0) {\n          <div class=\"artifacts-view\">\n            <!-- Paging Controls -->\n            <div class=\"paging-controls\">\n              <button kendoButton\n                      (click)=\"previousPage()\"\n                      [disabled]=\"!canGoPrevious()\"\n                      [themeColor]=\"'base'\">\n                <i class=\"fa-solid fa-chevron-left\"></i> Previous\n              </button>\n              <span class=\"page-info\">\n                Page {{ currentPage + 1 }} of {{ getTotalPages() }}\n                ({{ totalArtifacts }} total)\n              </span>\n              <button kendoButton\n                      (click)=\"nextPage()\"\n                      [disabled]=\"!canGoNext()\"\n                      [themeColor]=\"'base'\">\n                Next <i class=\"fa-solid fa-chevron-right\"></i>\n              </button>\n            </div>\n\n            <!-- Artifacts List -->\n            <div class=\"artifacts-list\">\n              @if (isLoading) {\n                <div class=\"loading-state\">\n                  <mj-loading text=\"Loading artifacts...\" size=\"small\"></mj-loading>\n                </div>\n              }\n              @else if (artifacts.length === 0) {\n                <div class=\"empty-state\">\n                  <i class=\"fa-solid fa-inbox\"></i>\n                  <p>No artifacts found</p>\n                </div>\n              }\n              @else {\n                @for (artifact of artifacts; track artifact.ID) {\n                  <div class=\"artifact-item\"\n                       [class.selected]=\"IsArtifactSelected(artifact)\"\n                       (click)=\"selectArtifact(artifact)\">\n                    <div class=\"artifact-content\">\n                      <div class=\"artifact-main\">\n                        <div class=\"artifact-name\">\n                          <i class=\"fa-solid fa-file-code\"></i>\n                          <span>{{ artifact.Name }}</span>\n                        </div>\n                        @if (artifact.Description) {\n                          <div class=\"artifact-description\">\n                            {{ artifact.Description }}\n                          </div>\n                        }\n                      </div>\n                      <div class=\"artifact-meta\">\n                        <div>{{ artifact.Type }}</div>\n                        <div>{{ artifact.__mj_UpdatedAt | date:'short' }}</div>\n                      </div>\n                    </div>\n                  </div>\n                }\n              }\n            </div>\n          </div>\n        }\n\n        <!-- Collections Tab -->\n        @if (activeTab === 1) {\n          <div class=\"collections-view\">\n            <div class=\"collections-list\">\n              @if (isLoadingCollections) {\n                <div class=\"loading-state\">\n                  <mj-loading text=\"Loading collections...\" size=\"small\"></mj-loading>\n                </div>\n              }\n              @else if (collections.length === 0) {\n                <div class=\"empty-state\">\n                  <i class=\"fa-solid fa-folder-open\"></i>\n                  <p>No collections found</p>\n                </div>\n              }\n              @else {\n                @for (collection of collections; track collection.ID) {\n                  <div class=\"collection-item\"\n                       [class.selected]=\"IsCollectionSelected(collection)\"\n                       (click)=\"selectCollection(collection)\">\n                    <div class=\"collection-icon\">\n                      <i class=\"fa-solid fa-folder\"></i>\n                    </div>\n                    <div class=\"collection-info\">\n                      <div class=\"collection-name\">{{ collection.Name }}</div>\n                      @if (collection.Description) {\n                        <div class=\"collection-description\">{{ collection.Description }}</div>\n                      }\n                    </div>\n                  </div>\n                }\n              }\n            </div>\n\n            @if (selectedCollection) {\n              <div class=\"collection-artifacts\">\n                <div class=\"section-header\">\n                  <i class=\"fa-solid fa-file-code\"></i>\n                  Artifacts in \"{{ selectedCollection.Name }}\"\n                </div>\n                @if (collectionArtifacts.length === 0) {\n                  <div class=\"empty-state\">\n                    <i class=\"fa-solid fa-inbox\"></i>\n                    <p>No artifacts in this collection</p>\n                  </div>\n                }\n                @else {\n                  @for (artifact of collectionArtifacts; track artifact.ID) {\n                    <div class=\"artifact-item\"\n                         [class.selected]=\"IsArtifactSelected(artifact)\"\n                         (click)=\"selectArtifact(artifact)\">\n                      <div class=\"artifact-content\">\n                        <div class=\"artifact-main\">\n                          <div class=\"artifact-name\">\n                            <i class=\"fa-solid fa-file-code\"></i>\n                            <span>{{ artifact.Name }}</span>\n                          </div>\n                          @if (artifact.Description) {\n                            <div class=\"artifact-description\">\n                              {{ artifact.Description }}\n                            </div>\n                          }\n                        </div>\n                      </div>\n                    </div>\n                  }\n                }\n              </div>\n            }\n          </div>\n        }\n      </div>\n    </div>\n\n    <!-- Right Version/Preview Panel -->\n    @if (selectedArtifact) {\n      <div class=\"version-panel\">\n        <div class=\"panel-header\">\n          <h4><i class=\"fa-solid fa-code-branch\"></i> Versions</h4>\n        </div>\n\n        <div class=\"version-content\">\n          @if (isLoadingVersions) {\n            <div class=\"loading-state\">\n              <mj-loading text=\"Loading versions...\" size=\"small\"></mj-loading>\n            </div>\n          }\n          @else if (artifactVersions.length === 0) {\n            <div class=\"empty-state\">\n              <i class=\"fa-solid fa-info-circle\"></i>\n              <p>No versions available</p>\n            </div>\n          }\n          @else {\n            <div class=\"version-list\">\n              @for (version of artifactVersions; track version.ID) {\n                <div class=\"version-item\"\n                     [class.selected]=\"IsVersionSelected(version)\"\n                     (click)=\"selectVersion(version)\">\n                  <div class=\"version-number\">\n                    <i class=\"fa-solid fa-code-branch\"></i>\n                    Version {{ version.VersionNumber }}\n                  </div>\n                  <div class=\"version-meta\">\n                    <div>{{ version.__mj_UpdatedAt | date:'short' }}</div>\n                    @if (version.Comments) {\n                      <div class=\"version-comments\">{{ version.Comments }}</div>\n                    }\n                  </div>\n                </div>\n              }\n            </div>\n\n            <!-- Preview Section -->\n            @if (selectedVersion) {\n              <div class=\"preview-section\">\n                <div class=\"preview-header\">\n                  <i class=\"fa-solid fa-eye\"></i> Preview\n                </div>\n                @if (previewError) {\n                  <div class=\"preview-error\">\n                    <i class=\"fa-solid fa-exclamation-triangle\"></i>\n                    {{ previewError }}\n                  </div>\n                }\n                @else if (previewSpec) {\n                  <div class=\"preview-content\">\n                    <div class=\"preview-item\">\n                      <strong>Name:</strong> {{ previewSpec.name }}\n                    </div>\n                    @if (previewSpec.description) {\n                      <div class=\"preview-item\">\n                        <strong>Description:</strong> {{ previewSpec.description }}\n                      </div>\n                    }\n                    @if (previewSpec.type) {\n                      <div class=\"preview-item\">\n                        <strong>Type:</strong> {{ previewSpec.type }}\n                      </div>\n                    }\n                    @if (previewSpec.namespace) {\n                      <div class=\"preview-item\">\n                        <strong>Namespace:</strong> {{ previewSpec.namespace }}\n                      </div>\n                    }\n                    <div class=\"preview-item\">\n                      <strong>Has Code:</strong> {{ previewSpec.code ? 'Yes' : 'No' }}\n                    </div>\n                    @if (previewSpec.dependencies && previewSpec.dependencies.length > 0) {\n                      <div class=\"preview-item\">\n                        <strong>Dependencies:</strong> {{ previewSpec.dependencies.length }}\n                      </div>\n                    }\n\n                    <!-- Full Spec JSON Viewer -->\n                    <div class=\"preview-json-section\">\n                      <div class=\"preview-json-header\" (click)=\"toggleJsonPreview()\">\n                        <i class=\"fa-solid\" [class.fa-chevron-right]=\"!showJsonPreview\" [class.fa-chevron-down]=\"showJsonPreview\"></i>\n                        <strong>Full Specification (JSON)</strong>\n                      </div>\n                      @if (showJsonPreview) {\n                        <div class=\"preview-json-content\">\n                          <mj-code-editor\n                            [value]=\"getPreviewJSON()\"\n                            [language]=\"'json'\"\n                            [readonly]=\"true\"\n                            [lineWrapping]=\"true\"\n                            [setup]=\"'basic'\"\n                            style=\"height: 300px; width: 100%;\">\n                          </mj-code-editor>\n                        </div>\n                      }\n                    </div>\n                  </div>\n                }\n              </div>\n            }\n          }\n        </div>\n      </div>\n    }\n  </div>\n\n  <kendo-dialog-actions>\n    <button kendoButton\n            [themeColor]=\"'primary'\"\n            (click)=\"load()\"\n            [disabled]=\"!canLoad()\">\n      <i class=\"fa-solid fa-download\"></i>\n      Load Component\n    </button>\n    <button kendoButton (click)=\"cancel()\">Cancel</button>\n  </kendo-dialog-actions>\n</div>\n", styles: ["/* Main container */\n.artifact-load-content {\n  height: 100%;\n  display: flex;\n  flex-direction: row;\n}\n\n/* Filter Panel */\n.filter-panel {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  border-right: 1px solid var(--mj-border-default);\n  transition: width 0.3s ease;\n  flex-shrink: 0;\n  background: var(--mj-bg-surface-sunken);\n}\n\n.panel-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 10px;\n  border-bottom: 1px solid var(--mj-border-default);\n  font-weight: bold;\n  color: var(--mj-text-secondary);\n}\n\n.filter-content {\n  flex: 1;\n  padding: 15px;\n  overflow-y: auto;\n}\n\n.filter-group {\n  margin-bottom: 15px;\n}\n\n.filter-group label {\n  display: block;\n  margin-bottom: 5px;\n  font-weight: 500;\n  color: var(--mj-text-secondary);\n}\n\n.filter-input,\n.filter-select {\n  width: 100%;\n  padding: 8px;\n  border: 1px solid var(--mj-border-strong);\n  border-radius: 4px;\n  font-size: 14px;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n}\n\n.filter-input:focus,\n.filter-select:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 2px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.filter-count {\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-brand-primary);\n  border-radius: 50%;\n  min-width: 18px;\n  height: 18px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 10px;\n  font-weight: bold;\n  margin-left: 4px;\n}\n\n/* Main Content Panel */\n.main-content {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  flex: 2;\n  min-width: 0;\n}\n\n/* Tabs */\n.tabs {\n  display: flex;\n  border-bottom: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface-sunken);\n}\n\n.tab {\n  padding: 12px 20px;\n  border: none;\n  background: transparent;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  font-size: 14px;\n  font-weight: 500;\n  border-bottom: 2px solid transparent;\n  transition: all 0.2s;\n}\n\n.tab:hover {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-primary);\n}\n\n.tab.active {\n  color: var(--mj-brand-primary);\n  border-bottom-color: var(--mj-brand-primary);\n  background: var(--mj-bg-surface);\n}\n\n.tab i {\n  margin-right: 6px;\n}\n\n/* Tab Content */\n.tab-content {\n  flex: 1;\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n}\n\n.artifacts-view,\n.collections-view {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n\n/* Paging Controls */\n.paging-controls {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 10px 15px;\n  border-bottom: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n}\n\n.page-info {\n  color: var(--mj-text-secondary);\n  font-size: 14px;\n}\n\n/* Artifacts List */\n.artifacts-list {\n  flex: 1;\n  overflow-y: auto;\n  padding: 10px 15px;\n  background: var(--mj-bg-surface);\n}\n\n.artifact-item {\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  margin: 10px 0;\n  padding: 15px;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  background: var(--mj-bg-surface);\n}\n\n.artifact-item:hover {\n  border-color: var(--mj-brand-primary);\n  background: var(--mj-bg-surface-sunken);\n}\n\n.artifact-item.selected {\n  border-color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.artifact-content {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n}\n\n.artifact-main {\n  flex: 1;\n}\n\n.artifact-name {\n  display: flex;\n  align-items: center;\n  margin-bottom: 5px;\n}\n\n.artifact-name i {\n  color: var(--mj-text-secondary);\n  margin-right: 8px;\n}\n\n.artifact-name span {\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.artifact-description {\n  color: var(--mj-text-secondary);\n  font-size: 14px;\n  margin-top: 4px;\n}\n\n.artifact-meta {\n  text-align: right;\n  color: var(--mj-text-muted);\n  font-size: 12px;\n}\n\n/* Collections View */\n.collections-view {\n  display: grid;\n  grid-template-columns: 1fr 1.5fr;\n  gap: 15px;\n  padding: 15px;\n  overflow: hidden;\n}\n\n.collections-list {\n  overflow-y: auto;\n  border-right: 1px solid var(--mj-border-default);\n  padding-right: 15px;\n}\n\n.collection-item {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 12px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  margin-bottom: 10px;\n  cursor: pointer;\n  transition: all 0.2s;\n  background: var(--mj-bg-surface);\n}\n\n.collection-item:hover {\n  border-color: var(--mj-brand-primary);\n  background: var(--mj-bg-surface-sunken);\n}\n\n.collection-item.selected {\n  border-color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.collection-icon {\n  font-size: 24px;\n  color: var(--mj-brand-primary);\n}\n\n.collection-info {\n  flex: 1;\n}\n\n.collection-name {\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin-bottom: 4px;\n}\n\n.collection-description {\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n}\n\n.collection-artifacts {\n  overflow-y: auto;\n}\n\n.section-header {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 10px;\n  background: var(--mj-bg-surface-sunken);\n  border-radius: 4px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  margin-bottom: 10px;\n}\n\n/* Version Panel */\n.version-panel {\n  width: 350px;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  border-left: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n  background: var(--mj-bg-surface-sunken);\n}\n\n.version-content {\n  flex: 1;\n  overflow-y: auto;\n  padding: 15px;\n}\n\n.version-list {\n  margin-bottom: 20px;\n}\n\n.version-item {\n  padding: 12px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  margin-bottom: 10px;\n  cursor: pointer;\n  transition: all 0.2s;\n  background: var(--mj-bg-surface);\n}\n\n.version-item:hover {\n  border-color: var(--mj-brand-primary);\n  background: var(--mj-bg-surface-sunken);\n}\n\n.version-item.selected {\n  border-color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.version-number {\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin-bottom: 4px;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.version-number i {\n  font-size: 14px;\n  color: var(--mj-brand-primary);\n}\n\n.version-meta {\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n}\n\n.version-comments {\n  margin-top: 4px;\n  font-style: italic;\n  color: var(--mj-text-muted);\n}\n\n/* Preview Section */\n.preview-section {\n  border-top: 2px solid var(--mj-border-default);\n  padding-top: 15px;\n  margin-top: 15px;\n}\n\n.preview-header {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  margin-bottom: 12px;\n  padding-bottom: 8px;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.preview-content {\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  padding: 12px;\n}\n\n.preview-item {\n  margin-bottom: 8px;\n  font-size: 13px;\n}\n\n.preview-item strong {\n  color: var(--mj-text-secondary);\n  font-weight: 600;\n  margin-right: 6px;\n}\n\n.preview-error {\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  border: 1px solid var(--mj-status-warning);\n  border-radius: 4px;\n  padding: 10px;\n  color: var(--mj-status-warning);\n  font-size: 13px;\n}\n\n.preview-error i {\n  margin-right: 6px;\n}\n\n/* Loading & Empty States */\n.loading-state,\n.empty-state {\n  text-align: center;\n  padding: 40px;\n  color: var(--mj-text-secondary);\n}\n\n.loading-state i,\n.empty-state i {\n  font-size: 36px;\n  margin-bottom: 15px;\n  color: var(--mj-text-muted);\n}\n\n.loading-state i.fa-spin {\n  color: var(--mj-brand-primary);\n}\n\n.empty-state p {\n  margin: 5px 0;\n  font-size: 14px;\n}\n\n/* JSON Preview Section */\n.preview-json-section {\n  margin-top: 15px;\n  border-top: 1px solid var(--mj-border-default);\n  padding-top: 10px;\n}\n\n.preview-json-header {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px;\n  cursor: pointer;\n  background: var(--mj-bg-surface-sunken);\n  border-radius: 4px;\n  transition: background 0.2s;\n}\n\n.preview-json-header:hover {\n  background: var(--mj-bg-surface-sunken);\n}\n\n.preview-json-header i {\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n}\n\n.preview-json-header strong {\n  font-size: 13px;\n  color: var(--mj-text-primary);\n}\n\n.preview-json-content {\n  margin-top: 10px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 4px;\n  overflow: hidden;\n}\n"] }]
     }], () => [{ type: i1.DialogRef }], null); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ArtifactLoadDialogComponent, { className: "ArtifactLoadDialogComponent", filePath: "src/ComponentStudio/components/artifact-load-dialog.component.ts", lineNumber: 30 }); })();
 //# sourceMappingURL=artifact-load-dialog.component.js.map

package/dist/ComponentStudio/components/artifact-selection-dialog.component.js CHANGED Viewed

@@ -609,11 +609,11 @@ export class ArtifactSelectionDialogComponent {
             i0.ɵɵproperty("themeColor", ctx.versionAction === "update" && ctx.selectedVersion ? "warning" : "primary")("disabled", !ctx.canSave());
             i0.ɵɵadvance(2);
             i0.ɵɵtextInterpolate1(" ", ctx.getSaveButtonText(), " ");
-        } }, dependencies: [i3.NgSelectOption, i3.ɵNgSelectMultipleOption, i3.DefaultValueAccessor, i3.SelectControlValueAccessor, i3.RadioControlValueAccessor, i3.NgControlStatus, i3.NgModel, i4.TextBoxComponent, i4.TextAreaComponent, i1.DialogTitleBarComponent, i1.DialogActionsComponent, i5.ButtonComponent, i6.LoadingComponent, i7.DatePipe], styles: ["\n\n.artifact-selection-content[_ngcontent-%COMP%] {\n    height: 100%;\n    display: flex;\n    flex-direction: row;\n}\n\n\n\n.filter-panel[_ngcontent-%COMP%] {\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n    border-right: 1px solid #ddd;\n    transition: width 0.3s ease;\n    flex-shrink: 0;\n    background: #fafafa;\n}\n\n.panel-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 10px;\n    border-bottom: 1px solid #eee;\n    font-weight: bold;\n    color: #666;\n}\n\n.filter-content[_ngcontent-%COMP%] {\n    flex: 1;\n    padding: 15px;\n    overflow-y: auto;\n}\n\n.filter-group[_ngcontent-%COMP%] {\n    margin-bottom: 15px;\n}\n\n.filter-group[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n    display: block;\n    margin-bottom: 5px;\n    font-weight: 500;\n    color: #555;\n}\n\n.filter-input[_ngcontent-%COMP%], \n.filter-select[_ngcontent-%COMP%] {\n    width: 100%;\n    padding: 8px;\n    border: 1px solid #ccc;\n    border-radius: 4px;\n    font-size: 14px;\n}\n\n.filter-input[_ngcontent-%COMP%]:focus, \n.filter-select[_ngcontent-%COMP%]:focus {\n    outline: none;\n    border-color: #2196f3;\n    box-shadow: 0 0 3px rgba(33, 150, 243, 0.3);\n}\n\n\n\n.main-content[_ngcontent-%COMP%] {\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n    flex: 2;\n    min-width: 0; \n\n}\n\n.paging-controls[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 10px 15px;\n    border-bottom: 1px solid #eee;\n}\n\n.page-info[_ngcontent-%COMP%] {\n    color: #666;\n    font-size: 14px;\n}\n\n.artifacts-list[_ngcontent-%COMP%] {\n    flex: 1;\n    overflow-y: auto;\n    padding: 0 15px;\n}\n\n.loading-state[_ngcontent-%COMP%], \n.empty-state[_ngcontent-%COMP%] {\n    text-align: center;\n    padding: 40px;\n    color: #666;\n}\n\n.empty-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 48px;\n    margin-bottom: 15px;\n    color: #999;\n}\n\n.create-section[_ngcontent-%COMP%] {\n    padding: 15px;\n    border-top: 1px solid #eee;\n}\n\n.create-btn[_ngcontent-%COMP%] {\n    width: 100%;\n}\n\n.new-artifact-form[_ngcontent-%COMP%] {\n    margin-top: 15px;\n}\n\n.new-artifact-form[_ngcontent-%COMP%]   kendo-textbox[_ngcontent-%COMP%] {\n    width: 100%;\n    margin-bottom: 10px;\n}\n\n.new-artifact-form[_ngcontent-%COMP%]   kendo-textarea[_ngcontent-%COMP%] {\n    width: 100%;\n    height: 60px;\n}\n\n.divider[_ngcontent-%COMP%] {\n    text-align: center;\n    padding: 10px;\n    background: #f8f9fa;\n    color: #666;\n    font-size: 12px;\n    margin-bottom: 10px;\n}\n\n.artifact-item[_ngcontent-%COMP%] {\n    border: 1px solid #ddd;\n    border-radius: 6px;\n    margin: 10px 0;\n    padding: 15px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.artifact-item[_ngcontent-%COMP%]:hover {\n    border-color: #2196f3;\n    background: #fafafa;\n}\n\n.artifact-item.selected[_ngcontent-%COMP%] {\n    border-color: #2196f3;\n    background: #e8f4f8;\n}\n\n.artifact-content[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n}\n\n.artifact-main[_ngcontent-%COMP%] {\n    flex: 1;\n}\n\n.artifact-name[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    margin-bottom: 5px;\n}\n\n.artifact-name[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: #666;\n    margin-right: 8px;\n}\n\n.artifact-name[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n    font-weight: 600;\n    color: #333;\n}\n\n.artifact-description[_ngcontent-%COMP%] {\n    color: #666;\n    font-size: 14px;\n    margin-bottom: 8px;\n}\n\n.artifact-meta[_ngcontent-%COMP%] {\n    text-align: right;\n    color: #999;\n    font-size: 12px;\n}\n\n\n\n.version-panel[_ngcontent-%COMP%] {\n    width: 320px;\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n    border-left: 1px solid #ddd;\n    flex-shrink: 0;\n    background: #fafafa;\n}\n\n.version-content[_ngcontent-%COMP%] {\n    flex: 1;\n    padding: 15px;\n    overflow-y: auto;\n}\n\n.version-actions[_ngcontent-%COMP%] {\n    margin-bottom: 20px;\n}\n\n.version-actions[_ngcontent-%COMP%]   label[_ngcontent-%COMP%]:first-child {\n    display: block;\n    margin-bottom: 10px;\n    font-weight: 500;\n    color: #555;\n}\n\n.radio-label[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    margin-bottom: 8px;\n    cursor: pointer;\n}\n\n.radio-label[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {\n    margin-right: 8px;\n}\n\n.version-selection[_ngcontent-%COMP%] {\n    margin-bottom: 15px;\n}\n\n.version-selection[_ngcontent-%COMP%]    > label[_ngcontent-%COMP%]:first-child {\n    display: block;\n    margin-bottom: 8px;\n    font-weight: 500;\n    color: #555;\n}\n\n.version-item[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    margin-bottom: 8px;\n    padding: 8px;\n    border: 1px solid #eee;\n    border-radius: 4px;\n    cursor: pointer;\n}\n\n.version-item.selected[_ngcontent-%COMP%] {\n    background: #f0f8ff;\n}\n\n.version-item[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {\n    margin-right: 8px;\n}\n\n.version-info[_ngcontent-%COMP%] {\n    flex: 1;\n}\n\n.version-number[_ngcontent-%COMP%] {\n    font-weight: 500;\n}\n\n.version-date[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: #666;\n}\n\n.warning[_ngcontent-%COMP%] {\n    background: #fff3cd;\n    border: 1px solid #ffeaa7;\n    border-radius: 4px;\n    padding: 10px;\n}\n\n.warning[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: #856404;\n    margin-right: 5px;\n}\n\n.warning[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n    color: #856404;\n    font-size: 14px;\n}\n\n.info-state[_ngcontent-%COMP%], \n.empty-state[_ngcontent-%COMP%] {\n    padding: 15px;\n    text-align: center;\n    color: #666;\n}\n\n.info-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%], \n.empty-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    margin-bottom: 10px;\n    font-size: 24px;\n}\n\n.info-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%], \n.empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n    margin: 5px 0;\n}\n\n.info-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%]:last-child {\n    font-size: 14px;\n}\n\n\n\n.filter-count[_ngcontent-%COMP%] {\n    background: #fff;\n    color: #2196f3;\n    border-radius: 50%;\n    min-width: 18px;\n    height: 18px;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 10px;\n    font-weight: bold;\n    margin-left: 4px;\n}\n\n.filter-active[_ngcontent-%COMP%]   .filter-count[_ngcontent-%COMP%] {\n    background: #fff;\n    color: #2196f3;\n}"] });
+        } }, dependencies: [i3.NgSelectOption, i3.ɵNgSelectMultipleOption, i3.DefaultValueAccessor, i3.SelectControlValueAccessor, i3.RadioControlValueAccessor, i3.NgControlStatus, i3.NgModel, i4.TextBoxComponent, i4.TextAreaComponent, i1.DialogTitleBarComponent, i1.DialogActionsComponent, i5.ButtonComponent, i6.LoadingComponent, i7.DatePipe], styles: ["\n\n.artifact-selection-content[_ngcontent-%COMP%] {\n    height: 100%;\n    display: flex;\n    flex-direction: row;\n}\n\n\n\n.filter-panel[_ngcontent-%COMP%] {\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n    border-right: 1px solid var(--mj-border-default);\n    transition: width 0.3s ease;\n    flex-shrink: 0;\n    background: var(--mj-bg-surface-sunken);\n}\n\n.panel-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 10px;\n    border-bottom: 1px solid var(--mj-border-default);\n    font-weight: bold;\n    color: var(--mj-text-secondary);\n}\n\n.filter-content[_ngcontent-%COMP%] {\n    flex: 1;\n    padding: 15px;\n    overflow-y: auto;\n}\n\n.filter-group[_ngcontent-%COMP%] {\n    margin-bottom: 15px;\n}\n\n.filter-group[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n    display: block;\n    margin-bottom: 5px;\n    font-weight: 500;\n    color: var(--mj-text-secondary);\n}\n\n.filter-input[_ngcontent-%COMP%], \n.filter-select[_ngcontent-%COMP%] {\n    width: 100%;\n    padding: 8px;\n    border: 1px solid var(--mj-border-strong);\n    border-radius: 4px;\n    font-size: 14px;\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-primary);\n}\n\n.filter-input[_ngcontent-%COMP%]:focus, \n.filter-select[_ngcontent-%COMP%]:focus {\n    outline: none;\n    border-color: var(--mj-brand-primary);\n    box-shadow: 0 0 0 2px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n\n\n.main-content[_ngcontent-%COMP%] {\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n    flex: 2;\n    min-width: 0; \n\n}\n\n.paging-controls[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 10px 15px;\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.page-info[_ngcontent-%COMP%] {\n    color: var(--mj-text-secondary);\n    font-size: 14px;\n}\n\n.artifacts-list[_ngcontent-%COMP%] {\n    flex: 1;\n    overflow-y: auto;\n    padding: 0 15px;\n}\n\n.loading-state[_ngcontent-%COMP%], \n.empty-state[_ngcontent-%COMP%] {\n    text-align: center;\n    padding: 40px;\n    color: var(--mj-text-secondary);\n}\n\n.empty-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 48px;\n    margin-bottom: 15px;\n    color: var(--mj-text-muted);\n}\n\n.create-section[_ngcontent-%COMP%] {\n    padding: 15px;\n    border-top: 1px solid var(--mj-border-default);\n}\n\n.create-btn[_ngcontent-%COMP%] {\n    width: 100%;\n}\n\n.new-artifact-form[_ngcontent-%COMP%] {\n    margin-top: 15px;\n}\n\n.new-artifact-form[_ngcontent-%COMP%]   kendo-textbox[_ngcontent-%COMP%] {\n    width: 100%;\n    margin-bottom: 10px;\n}\n\n.new-artifact-form[_ngcontent-%COMP%]   kendo-textarea[_ngcontent-%COMP%] {\n    width: 100%;\n    height: 60px;\n}\n\n.divider[_ngcontent-%COMP%] {\n    text-align: center;\n    padding: 10px;\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-secondary);\n    font-size: 12px;\n    margin-bottom: 10px;\n}\n\n.artifact-item[_ngcontent-%COMP%] {\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    margin: 10px 0;\n    padding: 15px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.artifact-item[_ngcontent-%COMP%]:hover {\n    border-color: var(--mj-brand-primary);\n    background: var(--mj-bg-surface-sunken);\n}\n\n.artifact-item.selected[_ngcontent-%COMP%] {\n    border-color: var(--mj-brand-primary);\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.artifact-content[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n}\n\n.artifact-main[_ngcontent-%COMP%] {\n    flex: 1;\n}\n\n.artifact-name[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    margin-bottom: 5px;\n}\n\n.artifact-name[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-text-secondary);\n    margin-right: 8px;\n}\n\n.artifact-name[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n\n.artifact-description[_ngcontent-%COMP%] {\n    color: var(--mj-text-secondary);\n    font-size: 14px;\n    margin-bottom: 8px;\n}\n\n.artifact-meta[_ngcontent-%COMP%] {\n    text-align: right;\n    color: var(--mj-text-muted);\n    font-size: 12px;\n}\n\n\n\n.version-panel[_ngcontent-%COMP%] {\n    width: 320px;\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n    border-left: 1px solid var(--mj-border-default);\n    flex-shrink: 0;\n    background: var(--mj-bg-surface-sunken);\n}\n\n.version-content[_ngcontent-%COMP%] {\n    flex: 1;\n    padding: 15px;\n    overflow-y: auto;\n}\n\n.version-actions[_ngcontent-%COMP%] {\n    margin-bottom: 20px;\n}\n\n.version-actions[_ngcontent-%COMP%]   label[_ngcontent-%COMP%]:first-child {\n    display: block;\n    margin-bottom: 10px;\n    font-weight: 500;\n    color: var(--mj-text-secondary);\n}\n\n.radio-label[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    margin-bottom: 8px;\n    cursor: pointer;\n}\n\n.radio-label[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {\n    margin-right: 8px;\n}\n\n.version-selection[_ngcontent-%COMP%] {\n    margin-bottom: 15px;\n}\n\n.version-selection[_ngcontent-%COMP%]    > label[_ngcontent-%COMP%]:first-child {\n    display: block;\n    margin-bottom: 8px;\n    font-weight: 500;\n    color: var(--mj-text-secondary);\n}\n\n.version-item[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    margin-bottom: 8px;\n    padding: 8px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 4px;\n    cursor: pointer;\n}\n\n.version-item.selected[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.version-item[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {\n    margin-right: 8px;\n}\n\n.version-info[_ngcontent-%COMP%] {\n    flex: 1;\n}\n\n.version-number[_ngcontent-%COMP%] {\n    font-weight: 500;\n}\n\n.version-date[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: var(--mj-text-secondary);\n}\n\n.warning[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n    border: 1px solid var(--mj-status-warning);\n    border-radius: 4px;\n    padding: 10px;\n}\n\n.warning[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-status-warning);\n    margin-right: 5px;\n}\n\n.warning[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n    color: var(--mj-status-warning);\n    font-size: 14px;\n}\n\n.info-state[_ngcontent-%COMP%], \n.empty-state[_ngcontent-%COMP%] {\n    padding: 15px;\n    text-align: center;\n    color: var(--mj-text-secondary);\n}\n\n.info-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%], \n.empty-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    margin-bottom: 10px;\n    font-size: 24px;\n}\n\n.info-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%], \n.empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n    margin: 5px 0;\n}\n\n.info-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%]:last-child {\n    font-size: 14px;\n}\n\n\n\n.filter-count[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface-card);\n    color: var(--mj-brand-primary);\n    border-radius: 50%;\n    min-width: 18px;\n    height: 18px;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 10px;\n    font-weight: bold;\n    margin-left: 4px;\n}\n\n.filter-active[_ngcontent-%COMP%]   .filter-count[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface-card);\n    color: var(--mj-brand-primary);\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ArtifactSelectionDialogComponent, [{
         type: Component,
-        args: [{ standalone: false, selector: 'app-artifact-selection-dialog', template: "<div>\n    <kendo-dialog-titlebar (close)=\"cancel()\">\n        <div style=\"font-size: 18px;\">\n        <i class=\"fa-solid fa-save\"></i> Save Component to Artifact\n        </div>\n    </kendo-dialog-titlebar>\n\n    <div class=\"artifact-selection-content\">\n        <!-- Left Filter Panel -->\n        <div class=\"filter-panel\" [style.width]=\"isFilterPanelCollapsed ? '40px' : '280px'\">\n            <!-- Panel Header -->\n            <div class=\"panel-header\">\n                @if (!isFilterPanelCollapsed) {\n                    <span>Filters</span>\n                }\n                <button kendoButton (click)=\"toggleFilterPanel()\" \n                        [fillMode]=\"'flat'\"\n                        [class.filter-active]=\"getActiveFilterCount() > 0\"\n                        [themeColor]=\"getActiveFilterCount() > 0 ? 'primary' : 'base'\">\n                    <i class=\"fa-solid fa-filter\"></i>\n                    @if (isFilterPanelCollapsed && getActiveFilterCount() > 0) {\n                        <span class=\"filter-count\">{{ getActiveFilterCount() }}</span>\n                    }\n                </button>\n            </div>\n\n            @if (!isFilterPanelCollapsed) {\n                <div class=\"filter-content\">\n                    <!-- Search -->\n                    <div class=\"filter-group\">\n                        <label>Search</label>\n                        <input type=\"text\" \n                               [(ngModel)]=\"searchTerm\"\n                               (input)=\"onSearchInput()\"\n                               placeholder=\"Name or description...\"\n                               class=\"filter-input\">\n                    </div>\n\n                    <!-- Artifact Type -->\n                    <div class=\"filter-group\">\n                        <label>Artifact Type</label>\n                        <select [(ngModel)]=\"selectedArtifactType\" \n                                (change)=\"onArtifactTypeChange()\"\n                                class=\"filter-select\">\n                            <option value=\"\">All Types</option>\n                            <option value=\"Component\">Component</option>\n                            <option value=\"Report\">Report</option>\n                            <option value=\"Dashboard\">Dashboard</option>\n                        </select>\n                    </div>\n                    \n                    <!-- User Email -->\n                    <div class=\"filter-group\">\n                        <label>Filter by User</label>\n                        <input type=\"text\" \n                               [(ngModel)]=\"userEmail\"\n                               (input)=\"filterArtifacts()\"\n                               placeholder=\"Enter user email...\"\n                               class=\"filter-input\">\n                    </div>\n                </div>\n            }\n        </div>\n\n        <!-- Main Content Area -->\n        <div class=\"main-content\">\n            <!-- Paging Controls -->\n            <div class=\"paging-controls\">\n                <button kendoButton \n                    (click)=\"previousPage()\" \n                    [disabled]=\"!canGoPrevious()\"\n                    [themeColor]=\"'base'\">\n                    <i class=\"fa-solid fa-chevron-left\"></i> Previous\n                </button>\n                <span class=\"page-info\">\n                    Page {{ currentPage + 1 }} of {{ getTotalPages() }}\n                    ({{ totalArtifacts }} total items)\n                </span>\n                <button kendoButton \n                    (click)=\"nextPage()\" \n                    [disabled]=\"!canGoNext()\"\n                    [themeColor]=\"'base'\">\n                    Next <i class=\"fa-solid fa-chevron-right\"></i>\n                </button>\n            </div>\n\n            <!-- Existing Artifacts -->\n            <div class=\"artifacts-list\">\n                @if (isLoading) {\n                    <div class=\"loading-state\">\n                        <mj-loading text=\"Loading artifacts...\" size=\"small\"></mj-loading>\n                    </div>\n                } \n                @else if (artifacts.length === 0) {\n                    <div class=\"empty-state\">\n                        <i class=\"fa-solid fa-inbox\"></i>\n                        <p>No artifacts found</p>\n                    </div>\n                } \n                @else {\n                    @for (artifact of artifacts; track artifact.ID) {\n                        <div class=\"artifact-item\" \n                            [class.selected]=\"IsArtifactSelected(artifact)\"\n                            (click)=\"selectArtifact(artifact)\">\n                            <div class=\"artifact-content\">\n                                <div class=\"artifact-main\">\n                                    <div class=\"artifact-name\">\n                                        <i class=\"fa-solid fa-file-code\"></i>\n                                        <span>{{ artifact.Name }}</span>\n                                    </div>\n                                    @if (artifact.Description) {\n                                        <div class=\"artifact-description\">\n                                            {{ artifact.Description }}\n                                        </div>\n                                    }\n                                </div>\n                                <div class=\"artifact-meta\">\n                                    <div>{{ artifact.Type }}</div>\n                                    <div>{{ artifact.__mj_UpdatedAt | date:'short' }}</div>\n                                </div>\n                            </div>\n                        </div>\n                    }\n                }\n            </div>\n            \n            <!-- Create New Artifact Section (at bottom) -->\n            <div class=\"create-section\">\n                <div class=\"divider\">OR CREATE NEW ARTIFACT</div>\n                \n                <button kendoButton \n                (click)=\"selectCreateNew()\"\n                [themeColor]=\"'primary'\"\n                class=\"create-btn\">\n                <i class=\"fa-solid fa-plus\"></i> Create New Artifact\n                </button>\n                \n                @if (showNewArtifactForm) {\n                    <div class=\"new-artifact-form\">\n                        <kendo-textbox \n                        [(value)]=\"newArtifactName\"\n                        placeholder=\"Artifact name...\">\n                        </kendo-textbox>\n                        <kendo-textarea \n                        [(value)]=\"newArtifactDescription\"\n                        placeholder=\"Description (optional)...\">\n                        </kendo-textarea>\n                    </div>\n                }\n            </div>\n        </div>\n\n        <!-- Right Version Panel (only show when artifact selected) -->\n        @if (selectedArtifact) {\n            <div class=\"version-panel\">\n                <div class=\"panel-header\">\n                    <h4><i class=\"fa-solid fa-code-branch\"></i> Version</h4>\n                </div>\n                \n                @if (artifactVersions.length > 0) {\n                    <div class=\"version-content\">\n                        <div class=\"version-actions\">\n                            <label>Action</label>\n                            <label class=\"radio-label\">\n                                <input type=\"radio\" \n                                    name=\"versionAction\" \n                                    value=\"new\"\n                                    [(ngModel)]=\"versionAction\"\n                                    (change)=\"selectedVersion = null\">\n                                <span>Create New Version (v{{ getNextVersionNumber() }})</span>\n                            </label>\n                            \n                            <label class=\"radio-label\">\n                                <input type=\"radio\" \n                                    name=\"versionAction\" \n                                    value=\"update\"\n                                    [(ngModel)]=\"versionAction\">\n                                <span>Update Existing Version</span>\n                            </label>\n                        </div>\n                        \n                        @if (versionAction === 'update') {\n                            <div class=\"version-selection\">\n                                <label>Select Version</label>\n                                @for (version of artifactVersions; track version.ID) {\n                                    <label class=\"version-item\" \n                                           [class.selected]=\"IsVersionSelected(version)\">\n                                        <input type=\"radio\"\n                                            name=\"selectedVersion\"\n                                            [value]=\"version\"\n                                            [(ngModel)]=\"selectedVersion\">\n                                        <div class=\"version-info\">\n                                            <div class=\"version-number\">Version {{ version.VersionNumber }}</div>\n                                            <div class=\"version-date\">{{ version.__mj_UpdatedAt | date:'short' }}</div>\n                                        </div>\n                                    </label>\n                                }\n                            </div>\n                            \n                            @if (selectedVersion) {\n                                <div class=\"warning\">\n                                    <i class=\"fa-solid fa-exclamation-triangle\"></i>\n                                    <span>Warning: This will overwrite version {{ selectedVersion.VersionNumber }}</span>\n                                </div>\n                            }\n                        }\n                    </div>\n                } @else {\n                    <div class=\"info-state\">\n                        <i class=\"fa-solid fa-info-circle\"></i>\n                        <p>No versions available for this artifact.</p>\n                        <p>A new version will be created.</p>\n                    </div>\n                }\n            </div>\n        }\n    </div>\n\n    <kendo-dialog-actions>\n        <button kendoButton \n            [themeColor]=\"versionAction === 'update' && selectedVersion ? 'warning' : 'primary'\" \n            (click)=\"save()\"\n            [disabled]=\"!canSave()\">\n            <i class=\"fa-solid fa-save\"></i> \n            {{ getSaveButtonText() }}\n        </button>\n        <button kendoButton (click)=\"cancel()\">Cancel</button>\n    </kendo-dialog-actions>\n</div>\n", styles: ["/* Main container */\n.artifact-selection-content {\n    height: 100%;\n    display: flex;\n    flex-direction: row;\n}\n\n/* Filter Panel */\n.filter-panel {\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n    border-right: 1px solid #ddd;\n    transition: width 0.3s ease;\n    flex-shrink: 0;\n    background: #fafafa;\n}\n\n.panel-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 10px;\n    border-bottom: 1px solid #eee;\n    font-weight: bold;\n    color: #666;\n}\n\n.filter-content {\n    flex: 1;\n    padding: 15px;\n    overflow-y: auto;\n}\n\n.filter-group {\n    margin-bottom: 15px;\n}\n\n.filter-group label {\n    display: block;\n    margin-bottom: 5px;\n    font-weight: 500;\n    color: #555;\n}\n\n.filter-input,\n.filter-select {\n    width: 100%;\n    padding: 8px;\n    border: 1px solid #ccc;\n    border-radius: 4px;\n    font-size: 14px;\n}\n\n.filter-input:focus,\n.filter-select:focus {\n    outline: none;\n    border-color: #2196f3;\n    box-shadow: 0 0 3px rgba(33, 150, 243, 0.3);\n}\n\n/* Main Content Panel */\n.main-content {\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n    flex: 2;\n    min-width: 0; /* Prevents flex item from growing beyond container */\n}\n\n.paging-controls {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 10px 15px;\n    border-bottom: 1px solid #eee;\n}\n\n.page-info {\n    color: #666;\n    font-size: 14px;\n}\n\n.artifacts-list {\n    flex: 1;\n    overflow-y: auto;\n    padding: 0 15px;\n}\n\n.loading-state,\n.empty-state {\n    text-align: center;\n    padding: 40px;\n    color: #666;\n}\n\n.empty-state i {\n    font-size: 48px;\n    margin-bottom: 15px;\n    color: #999;\n}\n\n.create-section {\n    padding: 15px;\n    border-top: 1px solid #eee;\n}\n\n.create-btn {\n    width: 100%;\n}\n\n.new-artifact-form {\n    margin-top: 15px;\n}\n\n.new-artifact-form kendo-textbox {\n    width: 100%;\n    margin-bottom: 10px;\n}\n\n.new-artifact-form kendo-textarea {\n    width: 100%;\n    height: 60px;\n}\n\n.divider {\n    text-align: center;\n    padding: 10px;\n    background: #f8f9fa;\n    color: #666;\n    font-size: 12px;\n    margin-bottom: 10px;\n}\n\n.artifact-item {\n    border: 1px solid #ddd;\n    border-radius: 6px;\n    margin: 10px 0;\n    padding: 15px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.artifact-item:hover {\n    border-color: #2196f3;\n    background: #fafafa;\n}\n\n.artifact-item.selected {\n    border-color: #2196f3;\n    background: #e8f4f8;\n}\n\n.artifact-content {\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n}\n\n.artifact-main {\n    flex: 1;\n}\n\n.artifact-name {\n    display: flex;\n    align-items: center;\n    margin-bottom: 5px;\n}\n\n.artifact-name i {\n    color: #666;\n    margin-right: 8px;\n}\n\n.artifact-name span {\n    font-weight: 600;\n    color: #333;\n}\n\n.artifact-description {\n    color: #666;\n    font-size: 14px;\n    margin-bottom: 8px;\n}\n\n.artifact-meta {\n    text-align: right;\n    color: #999;\n    font-size: 12px;\n}\n\n/* Version Panel */\n.version-panel {\n    width: 320px;\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n    border-left: 1px solid #ddd;\n    flex-shrink: 0;\n    background: #fafafa;\n}\n\n.version-content {\n    flex: 1;\n    padding: 15px;\n    overflow-y: auto;\n}\n\n.version-actions {\n    margin-bottom: 20px;\n}\n\n.version-actions label:first-child {\n    display: block;\n    margin-bottom: 10px;\n    font-weight: 500;\n    color: #555;\n}\n\n.radio-label {\n    display: flex;\n    align-items: center;\n    margin-bottom: 8px;\n    cursor: pointer;\n}\n\n.radio-label input {\n    margin-right: 8px;\n}\n\n.version-selection {\n    margin-bottom: 15px;\n}\n\n.version-selection > label:first-child {\n    display: block;\n    margin-bottom: 8px;\n    font-weight: 500;\n    color: #555;\n}\n\n.version-item {\n    display: flex;\n    align-items: center;\n    margin-bottom: 8px;\n    padding: 8px;\n    border: 1px solid #eee;\n    border-radius: 4px;\n    cursor: pointer;\n}\n\n.version-item.selected {\n    background: #f0f8ff;\n}\n\n.version-item input {\n    margin-right: 8px;\n}\n\n.version-info {\n    flex: 1;\n}\n\n.version-number {\n    font-weight: 500;\n}\n\n.version-date {\n    font-size: 12px;\n    color: #666;\n}\n\n.warning {\n    background: #fff3cd;\n    border: 1px solid #ffeaa7;\n    border-radius: 4px;\n    padding: 10px;\n}\n\n.warning i {\n    color: #856404;\n    margin-right: 5px;\n}\n\n.warning span {\n    color: #856404;\n    font-size: 14px;\n}\n\n.info-state,\n.empty-state {\n    padding: 15px;\n    text-align: center;\n    color: #666;\n}\n\n.info-state i,\n.empty-state i {\n    margin-bottom: 10px;\n    font-size: 24px;\n}\n\n.info-state p,\n.empty-state p {\n    margin: 5px 0;\n}\n\n.info-state p:last-child {\n    font-size: 14px;\n}\n\n/* Filter button styling */\n.filter-count {\n    background: #fff;\n    color: #2196f3;\n    border-radius: 50%;\n    min-width: 18px;\n    height: 18px;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 10px;\n    font-weight: bold;\n    margin-left: 4px;\n}\n\n.filter-active .filter-count {\n    background: #fff;\n    color: #2196f3;\n}"] }]
+        args: [{ standalone: false, selector: 'app-artifact-selection-dialog', template: "<div>\n    <kendo-dialog-titlebar (close)=\"cancel()\">\n        <div style=\"font-size: 18px;\">\n        <i class=\"fa-solid fa-save\"></i> Save Component to Artifact\n        </div>\n    </kendo-dialog-titlebar>\n\n    <div class=\"artifact-selection-content\">\n        <!-- Left Filter Panel -->\n        <div class=\"filter-panel\" [style.width]=\"isFilterPanelCollapsed ? '40px' : '280px'\">\n            <!-- Panel Header -->\n            <div class=\"panel-header\">\n                @if (!isFilterPanelCollapsed) {\n                    <span>Filters</span>\n                }\n                <button kendoButton (click)=\"toggleFilterPanel()\" \n                        [fillMode]=\"'flat'\"\n                        [class.filter-active]=\"getActiveFilterCount() > 0\"\n                        [themeColor]=\"getActiveFilterCount() > 0 ? 'primary' : 'base'\">\n                    <i class=\"fa-solid fa-filter\"></i>\n                    @if (isFilterPanelCollapsed && getActiveFilterCount() > 0) {\n                        <span class=\"filter-count\">{{ getActiveFilterCount() }}</span>\n                    }\n                </button>\n            </div>\n\n            @if (!isFilterPanelCollapsed) {\n                <div class=\"filter-content\">\n                    <!-- Search -->\n                    <div class=\"filter-group\">\n                        <label>Search</label>\n                        <input type=\"text\" \n                               [(ngModel)]=\"searchTerm\"\n                               (input)=\"onSearchInput()\"\n                               placeholder=\"Name or description...\"\n                               class=\"filter-input\">\n                    </div>\n\n                    <!-- Artifact Type -->\n                    <div class=\"filter-group\">\n                        <label>Artifact Type</label>\n                        <select [(ngModel)]=\"selectedArtifactType\" \n                                (change)=\"onArtifactTypeChange()\"\n                                class=\"filter-select\">\n                            <option value=\"\">All Types</option>\n                            <option value=\"Component\">Component</option>\n                            <option value=\"Report\">Report</option>\n                            <option value=\"Dashboard\">Dashboard</option>\n                        </select>\n                    </div>\n                    \n                    <!-- User Email -->\n                    <div class=\"filter-group\">\n                        <label>Filter by User</label>\n                        <input type=\"text\" \n                               [(ngModel)]=\"userEmail\"\n                               (input)=\"filterArtifacts()\"\n                               placeholder=\"Enter user email...\"\n                               class=\"filter-input\">\n                    </div>\n                </div>\n            }\n        </div>\n\n        <!-- Main Content Area -->\n        <div class=\"main-content\">\n            <!-- Paging Controls -->\n            <div class=\"paging-controls\">\n                <button kendoButton \n                    (click)=\"previousPage()\" \n                    [disabled]=\"!canGoPrevious()\"\n                    [themeColor]=\"'base'\">\n                    <i class=\"fa-solid fa-chevron-left\"></i> Previous\n                </button>\n                <span class=\"page-info\">\n                    Page {{ currentPage + 1 }} of {{ getTotalPages() }}\n                    ({{ totalArtifacts }} total items)\n                </span>\n                <button kendoButton \n                    (click)=\"nextPage()\" \n                    [disabled]=\"!canGoNext()\"\n                    [themeColor]=\"'base'\">\n                    Next <i class=\"fa-solid fa-chevron-right\"></i>\n                </button>\n            </div>\n\n            <!-- Existing Artifacts -->\n            <div class=\"artifacts-list\">\n                @if (isLoading) {\n                    <div class=\"loading-state\">\n                        <mj-loading text=\"Loading artifacts...\" size=\"small\"></mj-loading>\n                    </div>\n                } \n                @else if (artifacts.length === 0) {\n                    <div class=\"empty-state\">\n                        <i class=\"fa-solid fa-inbox\"></i>\n                        <p>No artifacts found</p>\n                    </div>\n                } \n                @else {\n                    @for (artifact of artifacts; track artifact.ID) {\n                        <div class=\"artifact-item\" \n                            [class.selected]=\"IsArtifactSelected(artifact)\"\n                            (click)=\"selectArtifact(artifact)\">\n                            <div class=\"artifact-content\">\n                                <div class=\"artifact-main\">\n                                    <div class=\"artifact-name\">\n                                        <i class=\"fa-solid fa-file-code\"></i>\n                                        <span>{{ artifact.Name }}</span>\n                                    </div>\n                                    @if (artifact.Description) {\n                                        <div class=\"artifact-description\">\n                                            {{ artifact.Description }}\n                                        </div>\n                                    }\n                                </div>\n                                <div class=\"artifact-meta\">\n                                    <div>{{ artifact.Type }}</div>\n                                    <div>{{ artifact.__mj_UpdatedAt | date:'short' }}</div>\n                                </div>\n                            </div>\n                        </div>\n                    }\n                }\n            </div>\n            \n            <!-- Create New Artifact Section (at bottom) -->\n            <div class=\"create-section\">\n                <div class=\"divider\">OR CREATE NEW ARTIFACT</div>\n                \n                <button kendoButton \n                (click)=\"selectCreateNew()\"\n                [themeColor]=\"'primary'\"\n                class=\"create-btn\">\n                <i class=\"fa-solid fa-plus\"></i> Create New Artifact\n                </button>\n                \n                @if (showNewArtifactForm) {\n                    <div class=\"new-artifact-form\">\n                        <kendo-textbox \n                        [(value)]=\"newArtifactName\"\n                        placeholder=\"Artifact name...\">\n                        </kendo-textbox>\n                        <kendo-textarea \n                        [(value)]=\"newArtifactDescription\"\n                        placeholder=\"Description (optional)...\">\n                        </kendo-textarea>\n                    </div>\n                }\n            </div>\n        </div>\n\n        <!-- Right Version Panel (only show when artifact selected) -->\n        @if (selectedArtifact) {\n            <div class=\"version-panel\">\n                <div class=\"panel-header\">\n                    <h4><i class=\"fa-solid fa-code-branch\"></i> Version</h4>\n                </div>\n                \n                @if (artifactVersions.length > 0) {\n                    <div class=\"version-content\">\n                        <div class=\"version-actions\">\n                            <label>Action</label>\n                            <label class=\"radio-label\">\n                                <input type=\"radio\" \n                                    name=\"versionAction\" \n                                    value=\"new\"\n                                    [(ngModel)]=\"versionAction\"\n                                    (change)=\"selectedVersion = null\">\n                                <span>Create New Version (v{{ getNextVersionNumber() }})</span>\n                            </label>\n                            \n                            <label class=\"radio-label\">\n                                <input type=\"radio\" \n                                    name=\"versionAction\" \n                                    value=\"update\"\n                                    [(ngModel)]=\"versionAction\">\n                                <span>Update Existing Version</span>\n                            </label>\n                        </div>\n                        \n                        @if (versionAction === 'update') {\n                            <div class=\"version-selection\">\n                                <label>Select Version</label>\n                                @for (version of artifactVersions; track version.ID) {\n                                    <label class=\"version-item\" \n                                           [class.selected]=\"IsVersionSelected(version)\">\n                                        <input type=\"radio\"\n                                            name=\"selectedVersion\"\n                                            [value]=\"version\"\n                                            [(ngModel)]=\"selectedVersion\">\n                                        <div class=\"version-info\">\n                                            <div class=\"version-number\">Version {{ version.VersionNumber }}</div>\n                                            <div class=\"version-date\">{{ version.__mj_UpdatedAt | date:'short' }}</div>\n                                        </div>\n                                    </label>\n                                }\n                            </div>\n                            \n                            @if (selectedVersion) {\n                                <div class=\"warning\">\n                                    <i class=\"fa-solid fa-exclamation-triangle\"></i>\n                                    <span>Warning: This will overwrite version {{ selectedVersion.VersionNumber }}</span>\n                                </div>\n                            }\n                        }\n                    </div>\n                } @else {\n                    <div class=\"info-state\">\n                        <i class=\"fa-solid fa-info-circle\"></i>\n                        <p>No versions available for this artifact.</p>\n                        <p>A new version will be created.</p>\n                    </div>\n                }\n            </div>\n        }\n    </div>\n\n    <kendo-dialog-actions>\n        <button kendoButton \n            [themeColor]=\"versionAction === 'update' && selectedVersion ? 'warning' : 'primary'\" \n            (click)=\"save()\"\n            [disabled]=\"!canSave()\">\n            <i class=\"fa-solid fa-save\"></i> \n            {{ getSaveButtonText() }}\n        </button>\n        <button kendoButton (click)=\"cancel()\">Cancel</button>\n    </kendo-dialog-actions>\n</div>\n", styles: ["/* Main container */\n.artifact-selection-content {\n    height: 100%;\n    display: flex;\n    flex-direction: row;\n}\n\n/* Filter Panel */\n.filter-panel {\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n    border-right: 1px solid var(--mj-border-default);\n    transition: width 0.3s ease;\n    flex-shrink: 0;\n    background: var(--mj-bg-surface-sunken);\n}\n\n.panel-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 10px;\n    border-bottom: 1px solid var(--mj-border-default);\n    font-weight: bold;\n    color: var(--mj-text-secondary);\n}\n\n.filter-content {\n    flex: 1;\n    padding: 15px;\n    overflow-y: auto;\n}\n\n.filter-group {\n    margin-bottom: 15px;\n}\n\n.filter-group label {\n    display: block;\n    margin-bottom: 5px;\n    font-weight: 500;\n    color: var(--mj-text-secondary);\n}\n\n.filter-input,\n.filter-select {\n    width: 100%;\n    padding: 8px;\n    border: 1px solid var(--mj-border-strong);\n    border-radius: 4px;\n    font-size: 14px;\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-primary);\n}\n\n.filter-input:focus,\n.filter-select:focus {\n    outline: none;\n    border-color: var(--mj-brand-primary);\n    box-shadow: 0 0 0 2px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n/* Main Content Panel */\n.main-content {\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n    flex: 2;\n    min-width: 0; /* Prevents flex item from growing beyond container */\n}\n\n.paging-controls {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 10px 15px;\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.page-info {\n    color: var(--mj-text-secondary);\n    font-size: 14px;\n}\n\n.artifacts-list {\n    flex: 1;\n    overflow-y: auto;\n    padding: 0 15px;\n}\n\n.loading-state,\n.empty-state {\n    text-align: center;\n    padding: 40px;\n    color: var(--mj-text-secondary);\n}\n\n.empty-state i {\n    font-size: 48px;\n    margin-bottom: 15px;\n    color: var(--mj-text-muted);\n}\n\n.create-section {\n    padding: 15px;\n    border-top: 1px solid var(--mj-border-default);\n}\n\n.create-btn {\n    width: 100%;\n}\n\n.new-artifact-form {\n    margin-top: 15px;\n}\n\n.new-artifact-form kendo-textbox {\n    width: 100%;\n    margin-bottom: 10px;\n}\n\n.new-artifact-form kendo-textarea {\n    width: 100%;\n    height: 60px;\n}\n\n.divider {\n    text-align: center;\n    padding: 10px;\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-secondary);\n    font-size: 12px;\n    margin-bottom: 10px;\n}\n\n.artifact-item {\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    margin: 10px 0;\n    padding: 15px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.artifact-item:hover {\n    border-color: var(--mj-brand-primary);\n    background: var(--mj-bg-surface-sunken);\n}\n\n.artifact-item.selected {\n    border-color: var(--mj-brand-primary);\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.artifact-content {\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n}\n\n.artifact-main {\n    flex: 1;\n}\n\n.artifact-name {\n    display: flex;\n    align-items: center;\n    margin-bottom: 5px;\n}\n\n.artifact-name i {\n    color: var(--mj-text-secondary);\n    margin-right: 8px;\n}\n\n.artifact-name span {\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n\n.artifact-description {\n    color: var(--mj-text-secondary);\n    font-size: 14px;\n    margin-bottom: 8px;\n}\n\n.artifact-meta {\n    text-align: right;\n    color: var(--mj-text-muted);\n    font-size: 12px;\n}\n\n/* Version Panel */\n.version-panel {\n    width: 320px;\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n    border-left: 1px solid var(--mj-border-default);\n    flex-shrink: 0;\n    background: var(--mj-bg-surface-sunken);\n}\n\n.version-content {\n    flex: 1;\n    padding: 15px;\n    overflow-y: auto;\n}\n\n.version-actions {\n    margin-bottom: 20px;\n}\n\n.version-actions label:first-child {\n    display: block;\n    margin-bottom: 10px;\n    font-weight: 500;\n    color: var(--mj-text-secondary);\n}\n\n.radio-label {\n    display: flex;\n    align-items: center;\n    margin-bottom: 8px;\n    cursor: pointer;\n}\n\n.radio-label input {\n    margin-right: 8px;\n}\n\n.version-selection {\n    margin-bottom: 15px;\n}\n\n.version-selection > label:first-child {\n    display: block;\n    margin-bottom: 8px;\n    font-weight: 500;\n    color: var(--mj-text-secondary);\n}\n\n.version-item {\n    display: flex;\n    align-items: center;\n    margin-bottom: 8px;\n    padding: 8px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 4px;\n    cursor: pointer;\n}\n\n.version-item.selected {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.version-item input {\n    margin-right: 8px;\n}\n\n.version-info {\n    flex: 1;\n}\n\n.version-number {\n    font-weight: 500;\n}\n\n.version-date {\n    font-size: 12px;\n    color: var(--mj-text-secondary);\n}\n\n.warning {\n    background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n    border: 1px solid var(--mj-status-warning);\n    border-radius: 4px;\n    padding: 10px;\n}\n\n.warning i {\n    color: var(--mj-status-warning);\n    margin-right: 5px;\n}\n\n.warning span {\n    color: var(--mj-status-warning);\n    font-size: 14px;\n}\n\n.info-state,\n.empty-state {\n    padding: 15px;\n    text-align: center;\n    color: var(--mj-text-secondary);\n}\n\n.info-state i,\n.empty-state i {\n    margin-bottom: 10px;\n    font-size: 24px;\n}\n\n.info-state p,\n.empty-state p {\n    margin: 5px 0;\n}\n\n.info-state p:last-child {\n    font-size: 14px;\n}\n\n/* Filter button styling */\n.filter-count {\n    background: var(--mj-bg-surface-card);\n    color: var(--mj-brand-primary);\n    border-radius: 50%;\n    min-width: 18px;\n    height: 18px;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 10px;\n    font-weight: bold;\n    margin-left: 4px;\n}\n\n.filter-active .filter-count {\n    background: var(--mj-bg-surface-card);\n    color: var(--mj-brand-primary);\n}\n"] }]
     }], () => [{ type: i1.DialogRef }, { type: i2.MJNotificationService }], null); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ArtifactSelectionDialogComponent, { className: "ArtifactSelectionDialogComponent", filePath: "src/ComponentStudio/components/artifact-selection-dialog.component.ts", lineNumber: 22 }); })();
 //# sourceMappingURL=artifact-selection-dialog.component.js.map