@memberjunction/ng-dashboards 5.13.0 → 5.15.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 (80) hide show
  1. package/dist/AI/components/execution-monitoring.component.js +3 -3
  2. package/dist/APIKeys/api-applications-panel.component.js +4 -4
  3. package/dist/APIKeys/api-key-create-dialog.component.js +4 -4
  4. package/dist/APIKeys/api-key-edit-panel.component.js +4 -4
  5. package/dist/APIKeys/api-scopes-panel.component.js +5 -5
  6. package/dist/APIKeys/api-usage-panel.component.js +3 -3
  7. package/dist/Actions/components/actions-list-view.component.js +4 -4
  8. package/dist/Actions/components/actions-overview.component.js +5 -5
  9. package/dist/Actions/components/categories-list-view.component.js +4 -4
  10. package/dist/Actions/components/execution-monitoring.component.js +4 -4
  11. package/dist/Actions/components/explorer/action-toolbar.component.js +3 -3
  12. package/dist/Actions/components/explorer/action-tree-panel.component.js +3 -3
  13. package/dist/Actions/components/explorer/new-action-panel.component.js +4 -4
  14. package/dist/Actions/components/explorer/new-category-panel.component.js +4 -4
  15. package/dist/ComponentStudio/components/artifact-load-dialog.component.js +3 -3
  16. package/dist/ComponentStudio/components/artifact-selection-dialog.component.js +3 -3
  17. package/dist/ComponentStudio/components/browser/component-browser.component.js +3 -3
  18. package/dist/ComponentStudio/components/editors/code-editor-panel.component.js +3 -3
  19. package/dist/ComponentStudio/components/editors/data-requirements-editor.component.js +3 -3
  20. package/dist/ComponentStudio/components/editors/requirements-editor.component.js +3 -3
  21. package/dist/ComponentStudio/components/editors/spec-editor.component.js +3 -3
  22. package/dist/ComponentStudio/components/new-component-dialog/new-component-dialog.component.js +3 -3
  23. package/dist/ComponentStudio/components/save-version-dialog/save-version-dialog.component.js +4 -4
  24. package/dist/ComponentStudio/components/text-import-dialog.component.js +3 -3
  25. package/dist/DataExplorer/data-explorer-dashboard.component.js +1 -1
  26. package/dist/Home/home-dashboard.component.js +3 -3
  27. package/dist/QueryBrowser/query-browser-resource.component.js +3 -3
  28. package/dist/actions-dashboards.module.d.ts +42 -0
  29. package/dist/actions-dashboards.module.d.ts.map +1 -0
  30. package/dist/actions-dashboards.module.js +156 -0
  31. package/dist/actions-dashboards.module.js.map +1 -0
  32. package/dist/ai-dashboards.module.d.ts +43 -0
  33. package/dist/ai-dashboards.module.d.ts.map +1 -0
  34. package/dist/ai-dashboards.module.js +169 -0
  35. package/dist/ai-dashboards.module.js.map +1 -0
  36. package/dist/communication-dashboards.module.d.ts +26 -0
  37. package/dist/communication-dashboards.module.d.ts.map +1 -0
  38. package/dist/communication-dashboards.module.js +93 -0
  39. package/dist/communication-dashboards.module.js.map +1 -0
  40. package/dist/component-studio-dashboards.module.d.ts +37 -0
  41. package/dist/component-studio-dashboards.module.d.ts.map +1 -0
  42. package/dist/component-studio-dashboards.module.js +131 -0
  43. package/dist/component-studio-dashboards.module.js.map +1 -0
  44. package/dist/core-dashboards.module.d.ts +49 -0
  45. package/dist/core-dashboards.module.d.ts.map +1 -0
  46. package/dist/core-dashboards.module.js +197 -0
  47. package/dist/core-dashboards.module.js.map +1 -0
  48. package/dist/credentials-dashboards.module.d.ts +27 -0
  49. package/dist/credentials-dashboards.module.d.ts.map +1 -0
  50. package/dist/credentials-dashboards.module.js +100 -0
  51. package/dist/credentials-dashboards.module.js.map +1 -0
  52. package/dist/data-explorer-dashboards.module.d.ts +32 -0
  53. package/dist/data-explorer-dashboards.module.d.ts.map +1 -0
  54. package/dist/data-explorer-dashboards.module.js +110 -0
  55. package/dist/data-explorer-dashboards.module.js.map +1 -0
  56. package/dist/lists-dashboards.module.d.ts +25 -0
  57. package/dist/lists-dashboards.module.d.ts.map +1 -0
  58. package/dist/lists-dashboards.module.js +94 -0
  59. package/dist/lists-dashboards.module.js.map +1 -0
  60. package/dist/module.d.ts +31 -150
  61. package/dist/module.d.ts.map +1 -1
  62. package/dist/module.js +109 -735
  63. package/dist/module.js.map +1 -1
  64. package/dist/public-api.d.ts +11 -1
  65. package/dist/public-api.d.ts.map +1 -1
  66. package/dist/public-api.js +15 -2
  67. package/dist/public-api.js.map +1 -1
  68. package/dist/scheduling-dashboards.module.d.ts +29 -0
  69. package/dist/scheduling-dashboards.module.d.ts.map +1 -0
  70. package/dist/scheduling-dashboards.module.js +106 -0
  71. package/dist/scheduling-dashboards.module.js.map +1 -0
  72. package/dist/shared/shared-dashboard-widgets.module.d.ts +16 -0
  73. package/dist/shared/shared-dashboard-widgets.module.d.ts.map +1 -0
  74. package/dist/shared/shared-dashboard-widgets.module.js +40 -0
  75. package/dist/shared/shared-dashboard-widgets.module.js.map +1 -0
  76. package/dist/testing-dashboards.module.d.ts +38 -0
  77. package/dist/testing-dashboards.module.d.ts.map +1 -0
  78. package/dist/testing-dashboards.module.js +145 -0
  79. package/dist/testing-dashboards.module.js.map +1 -0
  80. package/package.json +100 -42
@@ -8,9 +8,9 @@ import * as i0 from "@angular/core";
8
8
  import * as i1 from "../../services/action-explorer-state.service";
9
9
  import * as i2 from "@memberjunction/ng-shared";
10
10
  import * as i3 from "@angular/forms";
11
- import * as i4 from "@progress/kendo-angular-dropdowns";
12
- import * as i5 from "@progress/kendo-angular-inputs";
13
- import * as i6 from "@progress/kendo-angular-buttons";
11
+ import * as i4 from "@progress/kendo-angular-buttons";
12
+ import * as i5 from "@progress/kendo-angular-dropdowns";
13
+ import * as i6 from "@progress/kendo-angular-inputs";
14
14
  const _forTrack0 = ($index, $item) => $item.value;
15
15
  function NewActionPanelComponent_Conditional_0_Conditional_9_Template(rf, ctx) { if (rf & 1) {
16
16
  i0.ɵɵelementStart(0, "div", 8);
@@ -322,7 +322,7 @@ export class NewActionPanelComponent {
322
322
  i0.ɵɵconditionalCreate(0, NewActionPanelComponent_Conditional_0_Template, 40, 24, "div", 0);
323
323
  } if (rf & 2) {
324
324
  i0.ɵɵconditional(ctx.IsOpen ? 0 : -1);
325
- } }, dependencies: [i3.NgControlStatus, i3.MaxLengthValidator, i3.NgModel, i4.DropDownListComponent, i5.TextBoxComponent, i5.TextAreaComponent, i6.ButtonComponent], styles: [".panel-backdrop[_ngcontent-%COMP%] {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: var(--mj-bg-overlay);\n z-index: 1000;\n display: flex;\n justify-content: flex-end;\n}\n\n.slide-panel[_ngcontent-%COMP%] {\n width: 500px;\n max-width: 100%;\n height: 100%;\n background: var(--mj-bg-surface-card);\n box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);\n display: flex;\n flex-direction: column;\n}\n\n.panel-header[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 20px 24px;\n border-bottom: 1px solid var(--mj-border-default);\n}\n\n.panel-header[_ngcontent-%COMP%] h2[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 18px;\n font-weight: 600;\n display: flex;\n align-items: center;\n gap: 10px;\n color: var(--mj-text-primary);\n}\n\n.panel-header[_ngcontent-%COMP%] h2[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n}\n\n.panel-content[_ngcontent-%COMP%] {\n flex: 1;\n padding: 24px;\n overflow-y: auto;\n}\n\n.error-banner[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 12px 16px;\n background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n color: var(--mj-status-error);\n border-radius: 8px;\n margin-bottom: 20px;\n font-size: 14px;\n}\n\n.error-banner[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 16px;\n}\n\n.form-group[_ngcontent-%COMP%] {\n margin-bottom: 20px;\n}\n\n.form-label[_ngcontent-%COMP%] {\n display: block;\n margin-bottom: 8px;\n font-size: 13px;\n font-weight: 600;\n color: var(--mj-text-primary);\n}\n\n.form-label.required[_ngcontent-%COMP%]::after {\n content: ' *';\n color: var(--mj-status-error);\n}\n\n\n\n.type-selector[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 10px;\n}\n\n.type-option[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 14px;\n padding: 14px 16px;\n border: 2px solid var(--mj-border-default);\n border-radius: 10px;\n background: var(--mj-bg-surface-card);\n cursor: pointer;\n transition: all 0.2s ease;\n text-align: left;\n}\n\n.type-option[_ngcontent-%COMP%]:hover {\n border-color: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n background: var(--mj-bg-surface-hover);\n}\n\n.type-option.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.type-icon[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 44px;\n height: 44px;\n border-radius: 10px;\n background: var(--mj-bg-surface-sunken);\n flex-shrink: 0;\n}\n\n.type-option.selected[_ngcontent-%COMP%] .type-icon[_ngcontent-%COMP%] {\n background: var(--mj-brand-primary);\n}\n\n.type-icon[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 18px;\n color: var(--mj-text-muted);\n}\n\n.type-option.selected[_ngcontent-%COMP%] .type-icon[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-text-inverse);\n}\n\n.type-info[_ngcontent-%COMP%] {\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n\n.type-label[_ngcontent-%COMP%] {\n font-size: 14px;\n font-weight: 600;\n color: var(--mj-text-primary);\n}\n\n.type-description[_ngcontent-%COMP%] {\n font-size: 12px;\n color: var(--mj-text-muted);\n}\n\n.check-icon[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n font-size: 16px;\n}\n\n\n\n.form-group[_ngcontent-%COMP%] kendo-textbox[_ngcontent-%COMP%], \n.form-group[_ngcontent-%COMP%] kendo-textarea[_ngcontent-%COMP%], \n.form-group[_ngcontent-%COMP%] kendo-dropdownlist[_ngcontent-%COMP%] {\n width: 100%;\n}\n\n.form-group[_ngcontent-%COMP%] kendo-textbox.invalid[_ngcontent-%COMP%], \n.form-group[_ngcontent-%COMP%] kendo-textarea.invalid[_ngcontent-%COMP%], \n.form-group[_ngcontent-%COMP%] kendo-dropdownlist.invalid[_ngcontent-%COMP%] {\n border-color: var(--mj-status-error);\n}\n\n.error-text[_ngcontent-%COMP%] {\n display: block;\n margin-top: 4px;\n font-size: 12px;\n color: var(--mj-status-error);\n}\n\n\n\n.info-box[_ngcontent-%COMP%] {\n display: flex;\n gap: 12px;\n padding: 14px 16px;\n background: color-mix(in srgb, var(--mj-status-info) 10%, var(--mj-bg-surface));\n border-radius: 8px;\n margin-top: 24px;\n}\n\n.info-box[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-status-info);\n font-size: 16px;\n flex-shrink: 0;\n margin-top: 2px;\n}\n\n.info-box[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 13px;\n color: var(--mj-text-primary);\n line-height: 1.5;\n}\n\n.panel-footer[_ngcontent-%COMP%] {\n display: flex;\n gap: 12px;\n padding: 16px 24px;\n border-top: 1px solid var(--mj-border-default);\n background: var(--mj-bg-page);\n}\n\n.panel-footer[_ngcontent-%COMP%] button[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n\n\n@media (max-width: 520px) {\n .slide-panel[_ngcontent-%COMP%] {\n width: 100%;\n }\n}"], data: { animation: [
325
+ } }, dependencies: [i3.NgControlStatus, i3.MaxLengthValidator, i3.NgModel, i4.ButtonComponent, i5.DropDownListComponent, i6.TextBoxComponent, i6.TextAreaComponent], styles: [".panel-backdrop[_ngcontent-%COMP%] {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: var(--mj-bg-overlay);\n z-index: 1000;\n display: flex;\n justify-content: flex-end;\n}\n\n.slide-panel[_ngcontent-%COMP%] {\n width: 500px;\n max-width: 100%;\n height: 100%;\n background: var(--mj-bg-surface-card);\n box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);\n display: flex;\n flex-direction: column;\n}\n\n.panel-header[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 20px 24px;\n border-bottom: 1px solid var(--mj-border-default);\n}\n\n.panel-header[_ngcontent-%COMP%] h2[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 18px;\n font-weight: 600;\n display: flex;\n align-items: center;\n gap: 10px;\n color: var(--mj-text-primary);\n}\n\n.panel-header[_ngcontent-%COMP%] h2[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n}\n\n.panel-content[_ngcontent-%COMP%] {\n flex: 1;\n padding: 24px;\n overflow-y: auto;\n}\n\n.error-banner[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 12px 16px;\n background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n color: var(--mj-status-error);\n border-radius: 8px;\n margin-bottom: 20px;\n font-size: 14px;\n}\n\n.error-banner[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 16px;\n}\n\n.form-group[_ngcontent-%COMP%] {\n margin-bottom: 20px;\n}\n\n.form-label[_ngcontent-%COMP%] {\n display: block;\n margin-bottom: 8px;\n font-size: 13px;\n font-weight: 600;\n color: var(--mj-text-primary);\n}\n\n.form-label.required[_ngcontent-%COMP%]::after {\n content: ' *';\n color: var(--mj-status-error);\n}\n\n\n\n.type-selector[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 10px;\n}\n\n.type-option[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 14px;\n padding: 14px 16px;\n border: 2px solid var(--mj-border-default);\n border-radius: 10px;\n background: var(--mj-bg-surface-card);\n cursor: pointer;\n transition: all 0.2s ease;\n text-align: left;\n}\n\n.type-option[_ngcontent-%COMP%]:hover {\n border-color: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n background: var(--mj-bg-surface-hover);\n}\n\n.type-option.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.type-icon[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 44px;\n height: 44px;\n border-radius: 10px;\n background: var(--mj-bg-surface-sunken);\n flex-shrink: 0;\n}\n\n.type-option.selected[_ngcontent-%COMP%] .type-icon[_ngcontent-%COMP%] {\n background: var(--mj-brand-primary);\n}\n\n.type-icon[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 18px;\n color: var(--mj-text-muted);\n}\n\n.type-option.selected[_ngcontent-%COMP%] .type-icon[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-text-inverse);\n}\n\n.type-info[_ngcontent-%COMP%] {\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n\n.type-label[_ngcontent-%COMP%] {\n font-size: 14px;\n font-weight: 600;\n color: var(--mj-text-primary);\n}\n\n.type-description[_ngcontent-%COMP%] {\n font-size: 12px;\n color: var(--mj-text-muted);\n}\n\n.check-icon[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n font-size: 16px;\n}\n\n\n\n.form-group[_ngcontent-%COMP%] kendo-textbox[_ngcontent-%COMP%], \n.form-group[_ngcontent-%COMP%] kendo-textarea[_ngcontent-%COMP%], \n.form-group[_ngcontent-%COMP%] kendo-dropdownlist[_ngcontent-%COMP%] {\n width: 100%;\n}\n\n.form-group[_ngcontent-%COMP%] kendo-textbox.invalid[_ngcontent-%COMP%], \n.form-group[_ngcontent-%COMP%] kendo-textarea.invalid[_ngcontent-%COMP%], \n.form-group[_ngcontent-%COMP%] kendo-dropdownlist.invalid[_ngcontent-%COMP%] {\n border-color: var(--mj-status-error);\n}\n\n.error-text[_ngcontent-%COMP%] {\n display: block;\n margin-top: 4px;\n font-size: 12px;\n color: var(--mj-status-error);\n}\n\n\n\n.info-box[_ngcontent-%COMP%] {\n display: flex;\n gap: 12px;\n padding: 14px 16px;\n background: color-mix(in srgb, var(--mj-status-info) 10%, var(--mj-bg-surface));\n border-radius: 8px;\n margin-top: 24px;\n}\n\n.info-box[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-status-info);\n font-size: 16px;\n flex-shrink: 0;\n margin-top: 2px;\n}\n\n.info-box[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 13px;\n color: var(--mj-text-primary);\n line-height: 1.5;\n}\n\n.panel-footer[_ngcontent-%COMP%] {\n display: flex;\n gap: 12px;\n padding: 16px 24px;\n border-top: 1px solid var(--mj-border-default);\n background: var(--mj-bg-page);\n}\n\n.panel-footer[_ngcontent-%COMP%] button[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n\n\n@media (max-width: 520px) {\n .slide-panel[_ngcontent-%COMP%] {\n width: 100%;\n }\n}"], data: { animation: [
326
326
  trigger('slideIn', [
327
327
  transition(':enter', [
328
328
  style({ transform: 'translateX(100%)', opacity: 0 }),
@@ -7,9 +7,9 @@ import { UUIDsEqual } from '@memberjunction/global';
7
7
  import * as i0 from "@angular/core";
8
8
  import * as i1 from "../../services/action-explorer-state.service";
9
9
  import * as i2 from "@angular/forms";
10
- import * as i3 from "@progress/kendo-angular-dropdowns";
11
- import * as i4 from "@progress/kendo-angular-inputs";
12
- import * as i5 from "@progress/kendo-angular-buttons";
10
+ import * as i3 from "@progress/kendo-angular-buttons";
11
+ import * as i4 from "@progress/kendo-angular-dropdowns";
12
+ import * as i5 from "@progress/kendo-angular-inputs";
13
13
  function NewCategoryPanelComponent_Conditional_0_Conditional_9_Template(rf, ctx) { if (rf & 1) {
14
14
  i0.ɵɵelementStart(0, "div", 8);
15
15
  i0.ɵɵelement(1, "i", 21);
@@ -245,7 +245,7 @@ export class NewCategoryPanelComponent {
245
245
  i0.ɵɵconditionalCreate(0, NewCategoryPanelComponent_Conditional_0_Template, 31, 22, "div", 0);
246
246
  } if (rf & 2) {
247
247
  i0.ɵɵconditional(ctx.IsOpen ? 0 : -1);
248
- } }, dependencies: [i2.NgControlStatus, i2.MaxLengthValidator, i2.NgModel, i3.DropDownListComponent, i4.TextBoxComponent, i4.TextAreaComponent, i5.ButtonComponent], styles: [".panel-backdrop[_ngcontent-%COMP%] {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: var(--mj-bg-overlay);\n z-index: 1000;\n display: flex;\n justify-content: flex-end;\n}\n\n.slide-panel[_ngcontent-%COMP%] {\n width: 450px;\n max-width: 100%;\n height: 100%;\n background: var(--mj-bg-surface-card);\n box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);\n display: flex;\n flex-direction: column;\n}\n\n.panel-header[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 20px 24px;\n border-bottom: 1px solid var(--mj-border-default);\n}\n\n.panel-header[_ngcontent-%COMP%] h2[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 18px;\n font-weight: 600;\n display: flex;\n align-items: center;\n gap: 10px;\n color: var(--mj-text-primary);\n}\n\n.panel-header[_ngcontent-%COMP%] h2[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n}\n\n.panel-content[_ngcontent-%COMP%] {\n flex: 1;\n padding: 24px;\n overflow-y: auto;\n}\n\n.error-banner[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 12px 16px;\n background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n color: var(--mj-status-error);\n border-radius: 8px;\n margin-bottom: 20px;\n font-size: 14px;\n}\n\n.error-banner[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 16px;\n}\n\n.form-group[_ngcontent-%COMP%] {\n margin-bottom: 20px;\n}\n\n.form-label[_ngcontent-%COMP%] {\n display: block;\n margin-bottom: 6px;\n font-size: 13px;\n font-weight: 600;\n color: var(--mj-text-primary);\n}\n\n.form-label.required[_ngcontent-%COMP%]::after {\n content: ' *';\n color: var(--mj-status-error);\n}\n\n.form-group[_ngcontent-%COMP%] kendo-textbox[_ngcontent-%COMP%], \n.form-group[_ngcontent-%COMP%] kendo-textarea[_ngcontent-%COMP%], \n.form-group[_ngcontent-%COMP%] kendo-dropdownlist[_ngcontent-%COMP%] {\n width: 100%;\n}\n\n.form-group[_ngcontent-%COMP%] kendo-textbox.invalid[_ngcontent-%COMP%], \n.form-group[_ngcontent-%COMP%] kendo-textarea.invalid[_ngcontent-%COMP%] {\n border-color: var(--mj-status-error);\n}\n\n.error-text[_ngcontent-%COMP%] {\n display: block;\n margin-top: 4px;\n font-size: 12px;\n color: var(--mj-status-error);\n}\n\n.help-text[_ngcontent-%COMP%] {\n display: block;\n margin-top: 4px;\n font-size: 12px;\n color: var(--mj-text-muted);\n}\n\n.panel-footer[_ngcontent-%COMP%] {\n display: flex;\n gap: 12px;\n padding: 16px 24px;\n border-top: 1px solid var(--mj-border-default);\n background: var(--mj-bg-page);\n}\n\n.panel-footer[_ngcontent-%COMP%] button[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n\n\n@media (max-width: 480px) {\n .slide-panel[_ngcontent-%COMP%] {\n width: 100%;\n }\n}"], data: { animation: [
248
+ } }, dependencies: [i2.NgControlStatus, i2.MaxLengthValidator, i2.NgModel, i3.ButtonComponent, i4.DropDownListComponent, i5.TextBoxComponent, i5.TextAreaComponent], styles: [".panel-backdrop[_ngcontent-%COMP%] {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: var(--mj-bg-overlay);\n z-index: 1000;\n display: flex;\n justify-content: flex-end;\n}\n\n.slide-panel[_ngcontent-%COMP%] {\n width: 450px;\n max-width: 100%;\n height: 100%;\n background: var(--mj-bg-surface-card);\n box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);\n display: flex;\n flex-direction: column;\n}\n\n.panel-header[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 20px 24px;\n border-bottom: 1px solid var(--mj-border-default);\n}\n\n.panel-header[_ngcontent-%COMP%] h2[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 18px;\n font-weight: 600;\n display: flex;\n align-items: center;\n gap: 10px;\n color: var(--mj-text-primary);\n}\n\n.panel-header[_ngcontent-%COMP%] h2[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n}\n\n.panel-content[_ngcontent-%COMP%] {\n flex: 1;\n padding: 24px;\n overflow-y: auto;\n}\n\n.error-banner[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 12px 16px;\n background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n color: var(--mj-status-error);\n border-radius: 8px;\n margin-bottom: 20px;\n font-size: 14px;\n}\n\n.error-banner[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 16px;\n}\n\n.form-group[_ngcontent-%COMP%] {\n margin-bottom: 20px;\n}\n\n.form-label[_ngcontent-%COMP%] {\n display: block;\n margin-bottom: 6px;\n font-size: 13px;\n font-weight: 600;\n color: var(--mj-text-primary);\n}\n\n.form-label.required[_ngcontent-%COMP%]::after {\n content: ' *';\n color: var(--mj-status-error);\n}\n\n.form-group[_ngcontent-%COMP%] kendo-textbox[_ngcontent-%COMP%], \n.form-group[_ngcontent-%COMP%] kendo-textarea[_ngcontent-%COMP%], \n.form-group[_ngcontent-%COMP%] kendo-dropdownlist[_ngcontent-%COMP%] {\n width: 100%;\n}\n\n.form-group[_ngcontent-%COMP%] kendo-textbox.invalid[_ngcontent-%COMP%], \n.form-group[_ngcontent-%COMP%] kendo-textarea.invalid[_ngcontent-%COMP%] {\n border-color: var(--mj-status-error);\n}\n\n.error-text[_ngcontent-%COMP%] {\n display: block;\n margin-top: 4px;\n font-size: 12px;\n color: var(--mj-status-error);\n}\n\n.help-text[_ngcontent-%COMP%] {\n display: block;\n margin-top: 4px;\n font-size: 12px;\n color: var(--mj-text-muted);\n}\n\n.panel-footer[_ngcontent-%COMP%] {\n display: flex;\n gap: 12px;\n padding: 16px 24px;\n border-top: 1px solid var(--mj-border-default);\n background: var(--mj-bg-page);\n}\n\n.panel-footer[_ngcontent-%COMP%] button[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n\n\n@media (max-width: 480px) {\n .slide-panel[_ngcontent-%COMP%] {\n width: 100%;\n }\n}"], data: { animation: [
249
249
  trigger('slideIn', [
250
250
  transition(':enter', [
251
251
  style({ transform: 'translateX(100%)', opacity: 0 }),
@@ -6,8 +6,8 @@ import { takeUntil } from 'rxjs/operators';
6
6
  import * as i0 from "@angular/core";
7
7
  import * as i1 from "@progress/kendo-angular-dialog";
8
8
  import * as i2 from "@angular/forms";
9
- import * as i3 from "@memberjunction/ng-code-editor";
10
- import * as i4 from "@progress/kendo-angular-buttons";
9
+ import * as i3 from "@progress/kendo-angular-buttons";
10
+ import * as i4 from "@memberjunction/ng-code-editor";
11
11
  import * as i5 from "@memberjunction/ng-shared-generic";
12
12
  import * as i6 from "@angular/common";
13
13
  const _forTrack0 = ($index, $item) => $item.ID;
@@ -840,7 +840,7 @@ export class ArtifactLoadDialogComponent {
840
840
  i0.ɵɵconditional(ctx.selectedArtifact ? 24 : -1);
841
841
  i0.ɵɵadvance(2);
842
842
  i0.ɵɵproperty("themeColor", "primary")("disabled", !ctx.canLoad());
843
- } }, 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}"] });
843
+ } }, dependencies: [i2.NgSelectOption, i2.ɵNgSelectMultipleOption, i2.DefaultValueAccessor, i2.SelectControlValueAccessor, i2.NgControlStatus, i2.NgModel, i3.ButtonComponent, i1.DialogTitleBarComponent, i1.DialogActionsComponent, i4.CodeEditorComponent, i5.LoadingComponent, i6.DatePipe], styles: ["\n\n.artifact-load-content[_ngcontent-%COMP%] {\n height: 100%;\n display: flex;\n flex-direction: row;\n}\n\n\n\n.filter-panel[_ngcontent-%COMP%] {\n height: 100%;\n display: flex;\n flex-direction: column;\n border-right: 1px solid var(--mj-border-default);\n transition: width 0.3s ease;\n flex-shrink: 0;\n background: var(--mj-bg-surface-sunken);\n}\n\n.panel-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 10px;\n border-bottom: 1px solid var(--mj-border-default);\n font-weight: bold;\n color: var(--mj-text-secondary);\n}\n\n.filter-content[_ngcontent-%COMP%] {\n flex: 1;\n padding: 15px;\n overflow-y: auto;\n}\n\n.filter-group[_ngcontent-%COMP%] {\n margin-bottom: 15px;\n}\n\n.filter-group[_ngcontent-%COMP%] label[_ngcontent-%COMP%] {\n display: block;\n margin-bottom: 5px;\n font-weight: 500;\n color: var(--mj-text-secondary);\n}\n\n.filter-input[_ngcontent-%COMP%], \n.filter-select[_ngcontent-%COMP%] {\n width: 100%;\n padding: 8px;\n border: 1px solid var(--mj-border-strong);\n border-radius: 4px;\n font-size: 14px;\n background: var(--mj-bg-surface);\n color: var(--mj-text-primary);\n}\n\n.filter-input[_ngcontent-%COMP%]:focus, \n.filter-select[_ngcontent-%COMP%]:focus {\n outline: none;\n border-color: var(--mj-brand-primary);\n box-shadow: 0 0 0 2px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.filter-count[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface-card);\n color: var(--mj-brand-primary);\n border-radius: 50%;\n min-width: 18px;\n height: 18px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-size: 10px;\n font-weight: bold;\n margin-left: 4px;\n}\n\n\n\n.main-content[_ngcontent-%COMP%] {\n height: 100%;\n display: flex;\n flex-direction: column;\n flex: 2;\n min-width: 0;\n}\n\n\n\n.tabs[_ngcontent-%COMP%] {\n display: flex;\n border-bottom: 1px solid var(--mj-border-default);\n background: var(--mj-bg-surface-sunken);\n}\n\n.tab[_ngcontent-%COMP%] {\n padding: 12px 20px;\n border: none;\n background: transparent;\n color: var(--mj-text-secondary);\n cursor: pointer;\n font-size: 14px;\n font-weight: 500;\n border-bottom: 2px solid transparent;\n transition: all 0.2s;\n}\n\n.tab[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-sunken);\n color: var(--mj-text-primary);\n}\n\n.tab.active[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n border-bottom-color: var(--mj-brand-primary);\n background: var(--mj-bg-surface);\n}\n\n.tab[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n margin-right: 6px;\n}\n\n\n\n.tab-content[_ngcontent-%COMP%] {\n flex: 1;\n overflow: hidden;\n display: flex;\n flex-direction: column;\n}\n\n.artifacts-view[_ngcontent-%COMP%], \n.collections-view[_ngcontent-%COMP%] {\n flex: 1;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n}\n\n\n\n.paging-controls[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 10px 15px;\n border-bottom: 1px solid var(--mj-border-default);\n background: var(--mj-bg-surface);\n}\n\n.page-info[_ngcontent-%COMP%] {\n color: var(--mj-text-secondary);\n font-size: 14px;\n}\n\n\n\n.artifacts-list[_ngcontent-%COMP%] {\n flex: 1;\n overflow-y: auto;\n padding: 10px 15px;\n background: var(--mj-bg-surface);\n}\n\n.artifact-item[_ngcontent-%COMP%] {\n border: 1px solid var(--mj-border-default);\n border-radius: 6px;\n margin: 10px 0;\n padding: 15px;\n cursor: pointer;\n transition: all 0.2s ease;\n background: var(--mj-bg-surface);\n}\n\n.artifact-item[_ngcontent-%COMP%]:hover {\n border-color: var(--mj-brand-primary);\n background: var(--mj-bg-surface-sunken);\n}\n\n.artifact-item.selected[_ngcontent-%COMP%] {\n border-color: var(--mj-brand-primary);\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.artifact-content[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n}\n\n.artifact-main[_ngcontent-%COMP%] {\n flex: 1;\n}\n\n.artifact-name[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n margin-bottom: 5px;\n}\n\n.artifact-name[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-text-secondary);\n margin-right: 8px;\n}\n\n.artifact-name[_ngcontent-%COMP%] span[_ngcontent-%COMP%] {\n font-weight: 600;\n color: var(--mj-text-primary);\n}\n\n.artifact-description[_ngcontent-%COMP%] {\n color: var(--mj-text-secondary);\n font-size: 14px;\n margin-top: 4px;\n}\n\n.artifact-meta[_ngcontent-%COMP%] {\n text-align: right;\n color: var(--mj-text-muted);\n font-size: 12px;\n}\n\n\n\n.collections-view[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: 1fr 1.5fr;\n gap: 15px;\n padding: 15px;\n overflow: hidden;\n}\n\n.collections-list[_ngcontent-%COMP%] {\n overflow-y: auto;\n border-right: 1px solid var(--mj-border-default);\n padding-right: 15px;\n}\n\n.collection-item[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 12px;\n border: 1px solid var(--mj-border-default);\n border-radius: 6px;\n margin-bottom: 10px;\n cursor: pointer;\n transition: all 0.2s;\n background: var(--mj-bg-surface);\n}\n\n.collection-item[_ngcontent-%COMP%]:hover {\n border-color: var(--mj-brand-primary);\n background: var(--mj-bg-surface-sunken);\n}\n\n.collection-item.selected[_ngcontent-%COMP%] {\n border-color: var(--mj-brand-primary);\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.collection-icon[_ngcontent-%COMP%] {\n font-size: 24px;\n color: var(--mj-brand-primary);\n}\n\n.collection-info[_ngcontent-%COMP%] {\n flex: 1;\n}\n\n.collection-name[_ngcontent-%COMP%] {\n font-weight: 600;\n color: var(--mj-text-primary);\n margin-bottom: 4px;\n}\n\n.collection-description[_ngcontent-%COMP%] {\n font-size: 13px;\n color: var(--mj-text-secondary);\n}\n\n.collection-artifacts[_ngcontent-%COMP%] {\n overflow-y: auto;\n}\n\n.section-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 10px;\n background: var(--mj-bg-surface-sunken);\n border-radius: 4px;\n font-weight: 600;\n color: var(--mj-text-secondary);\n margin-bottom: 10px;\n}\n\n\n\n.version-panel[_ngcontent-%COMP%] {\n width: 350px;\n height: 100%;\n display: flex;\n flex-direction: column;\n border-left: 1px solid var(--mj-border-default);\n flex-shrink: 0;\n background: var(--mj-bg-surface-sunken);\n}\n\n.version-content[_ngcontent-%COMP%] {\n flex: 1;\n overflow-y: auto;\n padding: 15px;\n}\n\n.version-list[_ngcontent-%COMP%] {\n margin-bottom: 20px;\n}\n\n.version-item[_ngcontent-%COMP%] {\n padding: 12px;\n border: 1px solid var(--mj-border-default);\n border-radius: 6px;\n margin-bottom: 10px;\n cursor: pointer;\n transition: all 0.2s;\n background: var(--mj-bg-surface);\n}\n\n.version-item[_ngcontent-%COMP%]:hover {\n border-color: var(--mj-brand-primary);\n background: var(--mj-bg-surface-sunken);\n}\n\n.version-item.selected[_ngcontent-%COMP%] {\n border-color: var(--mj-brand-primary);\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.version-number[_ngcontent-%COMP%] {\n font-weight: 600;\n color: var(--mj-text-primary);\n margin-bottom: 4px;\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.version-number[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 14px;\n color: var(--mj-brand-primary);\n}\n\n.version-meta[_ngcontent-%COMP%] {\n font-size: 12px;\n color: var(--mj-text-secondary);\n}\n\n.version-comments[_ngcontent-%COMP%] {\n margin-top: 4px;\n font-style: italic;\n color: var(--mj-text-muted);\n}\n\n\n\n.preview-section[_ngcontent-%COMP%] {\n border-top: 2px solid var(--mj-border-default);\n padding-top: 15px;\n margin-top: 15px;\n}\n\n.preview-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n font-weight: 600;\n color: var(--mj-text-secondary);\n margin-bottom: 12px;\n padding-bottom: 8px;\n border-bottom: 1px solid var(--mj-border-default);\n}\n\n.preview-content[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface);\n border: 1px solid var(--mj-border-default);\n border-radius: 6px;\n padding: 12px;\n}\n\n.preview-item[_ngcontent-%COMP%] {\n margin-bottom: 8px;\n font-size: 13px;\n}\n\n.preview-item[_ngcontent-%COMP%] strong[_ngcontent-%COMP%] {\n color: var(--mj-text-secondary);\n font-weight: 600;\n margin-right: 6px;\n}\n\n.preview-error[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n border: 1px solid var(--mj-status-warning);\n border-radius: 4px;\n padding: 10px;\n color: var(--mj-status-warning);\n font-size: 13px;\n}\n\n.preview-error[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n margin-right: 6px;\n}\n\n\n\n.loading-state[_ngcontent-%COMP%], \n.empty-state[_ngcontent-%COMP%] {\n text-align: center;\n padding: 40px;\n color: var(--mj-text-secondary);\n}\n\n.loading-state[_ngcontent-%COMP%] i[_ngcontent-%COMP%], \n.empty-state[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 36px;\n margin-bottom: 15px;\n color: var(--mj-text-muted);\n}\n\n.loading-state[_ngcontent-%COMP%] i.fa-spin[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n}\n\n.empty-state[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n margin: 5px 0;\n font-size: 14px;\n}\n\n\n\n.preview-json-section[_ngcontent-%COMP%] {\n margin-top: 15px;\n border-top: 1px solid var(--mj-border-default);\n padding-top: 10px;\n}\n\n.preview-json-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px;\n cursor: pointer;\n background: var(--mj-bg-surface-sunken);\n border-radius: 4px;\n transition: background 0.2s;\n}\n\n.preview-json-header[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-sunken);\n}\n\n.preview-json-header[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 12px;\n color: var(--mj-text-secondary);\n}\n\n.preview-json-header[_ngcontent-%COMP%] strong[_ngcontent-%COMP%] {\n font-size: 13px;\n color: var(--mj-text-primary);\n}\n\n.preview-json-content[_ngcontent-%COMP%] {\n margin-top: 10px;\n border: 1px solid var(--mj-border-default);\n border-radius: 4px;\n overflow: hidden;\n}"] });
844
844
  }
845
845
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ArtifactLoadDialogComponent, [{
846
846
  type: Component,
@@ -7,8 +7,8 @@ import * as i0 from "@angular/core";
7
7
  import * as i1 from "@progress/kendo-angular-dialog";
8
8
  import * as i2 from "@memberjunction/ng-notifications";
9
9
  import * as i3 from "@angular/forms";
10
- import * as i4 from "@progress/kendo-angular-inputs";
11
- import * as i5 from "@progress/kendo-angular-buttons";
10
+ import * as i4 from "@progress/kendo-angular-buttons";
11
+ import * as i5 from "@progress/kendo-angular-inputs";
12
12
  import * as i6 from "@memberjunction/ng-shared-generic";
13
13
  import * as i7 from "@angular/common";
14
14
  const _forTrack0 = ($index, $item) => $item.ID;
@@ -609,7 +609,7 @@ export class ArtifactSelectionDialogComponent {
609
609
  i0.ɵɵproperty("themeColor", ctx.versionAction === "update" && ctx.selectedVersion ? "warning" : "primary")("disabled", !ctx.canSave());
610
610
  i0.ɵɵadvance(2);
611
611
  i0.ɵɵtextInterpolate1(" ", ctx.getSaveButtonText(), " ");
612
- } }, 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}"] });
612
+ } }, dependencies: [i3.NgSelectOption, i3.ɵNgSelectMultipleOption, i3.DefaultValueAccessor, i3.SelectControlValueAccessor, i3.RadioControlValueAccessor, i3.NgControlStatus, i3.NgModel, i4.ButtonComponent, i5.TextBoxComponent, i5.TextAreaComponent, i1.DialogTitleBarComponent, i1.DialogActionsComponent, 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}"] });
613
613
  }
614
614
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ArtifactSelectionDialogComponent, [{
615
615
  type: Component,
@@ -2,8 +2,8 @@ import { Component, Output, EventEmitter } from '@angular/core';
2
2
  import * as i0 from "@angular/core";
3
3
  import * as i1 from "../../services/component-studio-state.service";
4
4
  import * as i2 from "@angular/common";
5
- import * as i3 from "@progress/kendo-angular-inputs";
6
- import * as i4 from "@progress/kendo-angular-buttons";
5
+ import * as i3 from "@progress/kendo-angular-buttons";
6
+ import * as i4 from "@progress/kendo-angular-inputs";
7
7
  import * as i5 from "@memberjunction/ng-shared-generic";
8
8
  function ComponentBrowserComponent_Conditional_11_Template(rf, ctx) { if (rf & 1) {
9
9
  const _r1 = i0.ɵɵgetCurrentView();
@@ -620,7 +620,7 @@ export class ComponentBrowserComponent {
620
620
  i0.ɵɵconditional(ctx.State.IsFilterPanelExpanded ? 21 : -1);
621
621
  i0.ɵɵadvance(2);
622
622
  i0.ɵɵconditional(ctx.State.IsLoading ? 23 : ctx.State.FilteredComponents.length === 0 ? 24 : 25);
623
- } }, dependencies: [i2.NgClass, i3.TextBoxComponent, i3.TextBoxPrefixTemplateDirective, i4.ButtonComponent, i5.LoadingComponent, i2.DatePipe], styles: ["\n\n\n\n\n\n\n[_nghost-%COMP%] {\n display: flex;\n flex-direction: column;\n height: 100%;\n overflow: hidden;\n}\n\n.component-browser[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n height: 100%;\n background: var(--mj-bg-surface-sunken);\n overflow: hidden;\n}\n\n\n\n\n\n\n\n\n.browser-header[_ngcontent-%COMP%] {\n padding: 12px 14px 8px;\n border-bottom: 1px solid var(--mj-border-default);\n background: var(--mj-bg-surface);\n flex-shrink: 0;\n}\n\n.browser-header[_ngcontent-%COMP%] .header-top-row[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-bottom: 8px;\n}\n\n.browser-header[_ngcontent-%COMP%] .header-controls-row[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.browser-header[_ngcontent-%COMP%] .component-count[_ngcontent-%COMP%] {\n font-size: 12px;\n color: var(--mj-text-secondary);\n margin-left: auto;\n}\n\n\n\n\n\n\n\n\n.import-dropdown[_ngcontent-%COMP%] {\n position: relative;\n}\n\n.import-dropdown[_ngcontent-%COMP%] .dropdown-chevron[_ngcontent-%COMP%] {\n margin-left: 4px;\n font-size: 10px;\n}\n\n.import-dropdown[_ngcontent-%COMP%] .dropdown-menu[_ngcontent-%COMP%] {\n position: absolute;\n top: 100%;\n left: 0;\n z-index: 1000;\n min-width: 180px;\n margin-top: 4px;\n background: var(--mj-bg-surface);\n border: 1px solid var(--mj-border-default);\n border-radius: 4px;\n box-shadow: var(--mj-shadow-md);\n overflow: hidden;\n}\n\n.import-dropdown[_ngcontent-%COMP%] .dropdown-menu[_ngcontent-%COMP%] .dropdown-item[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n width: 100%;\n padding: 8px 14px;\n border: none;\n background: none;\n font-size: 13px;\n color: var(--mj-text-primary);\n cursor: pointer;\n text-align: left;\n transition: background 0.15s;\n}\n\n.import-dropdown[_ngcontent-%COMP%] .dropdown-menu[_ngcontent-%COMP%] .dropdown-item[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-sunken);\n}\n\n.import-dropdown[_ngcontent-%COMP%] .dropdown-menu[_ngcontent-%COMP%] .dropdown-item[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n width: 16px;\n text-align: center;\n color: var(--mj-text-secondary);\n}\n\n\n\n\n\n\n\n\n.filter-toggle-btn[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 4px;\n padding: 5px 10px;\n border: 1px solid var(--mj-border-default);\n border-radius: 4px;\n background: var(--mj-bg-surface);\n color: var(--mj-text-secondary);\n font-size: 13px;\n cursor: pointer;\n transition: all 0.15s;\n position: relative;\n}\n\n.filter-toggle-btn[_ngcontent-%COMP%]:hover {\n border-color: var(--mj-text-secondary);\n color: var(--mj-text-primary);\n}\n\n.filter-toggle-btn.active[_ngcontent-%COMP%] {\n border-color: var(--mj-brand-primary);\n color: var(--mj-brand-primary);\n background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n}\n\n.filter-toggle-btn[_ngcontent-%COMP%] .filter-count-badge[_ngcontent-%COMP%] {\n position: absolute;\n top: -6px;\n right: -6px;\n min-width: 16px;\n height: 16px;\n padding: 0 4px;\n border-radius: 8px;\n background: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n font-size: 10px;\n font-weight: 600;\n line-height: 16px;\n text-align: center;\n}\n\n\n\n\n\n\n\n\n.search-box[_ngcontent-%COMP%] {\n padding: 8px 14px;\n flex-shrink: 0;\n}\n\n.search-box[_ngcontent-%COMP%] .search-icon[_ngcontent-%COMP%] {\n color: var(--mj-text-secondary);\n margin-left: 6px;\n}\n\n\n\n\n\n\n\n\n.filter-panel[_ngcontent-%COMP%] {\n border-bottom: 1px solid var(--mj-border-default);\n background: var(--mj-bg-surface);\n flex-shrink: 0;\n}\n\n.filter-panel[_ngcontent-%COMP%] .filter-panel-content[_ngcontent-%COMP%] {\n padding: 8px 14px 12px;\n}\n\n.filter-section[_ngcontent-%COMP%] {\n margin-bottom: 10px;\n}\n\n.filter-section[_ngcontent-%COMP%]:last-child {\n margin-bottom: 0;\n}\n\n.filter-section[_ngcontent-%COMP%] .filter-section-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.filter-options[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.filter-checkbox[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 4px 6px;\n border-radius: 4px;\n cursor: pointer;\n font-size: 13px;\n color: var(--mj-text-secondary);\n transition: background 0.15s;\n}\n\n.filter-checkbox[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-sunken);\n}\n\n.filter-checkbox[_ngcontent-%COMP%] input[type=\"checkbox\"][_ngcontent-%COMP%] {\n width: 14px;\n height: 14px;\n accent-color: var(--mj-brand-primary);\n cursor: pointer;\n}\n\n.filter-checkbox[_ngcontent-%COMP%] .filter-icon[_ngcontent-%COMP%] {\n font-size: 12px;\n}\n\n.filter-checkbox[_ngcontent-%COMP%] .favorites-icon[_ngcontent-%COMP%] {\n color: var(--mj-status-warning);\n}\n\n.filter-checkbox[_ngcontent-%COMP%] .deprecated-icon[_ngcontent-%COMP%] {\n color: var(--mj-text-muted);\n}\n\n.filter-checkbox[_ngcontent-%COMP%] .deprecated-count[_ngcontent-%COMP%] {\n color: var(--mj-text-muted);\n font-size: 12px;\n}\n\n\n\n\n\n\n\n\n.category-pills[_ngcontent-%COMP%] {\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n}\n\n.category-pill[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 3px 10px;\n border: 1px solid var(--mj-border-default);\n border-radius: 14px;\n background: var(--mj-bg-surface);\n font-size: 12px;\n color: var(--mj-text-secondary);\n cursor: pointer;\n transition: all 0.15s;\n}\n\n.category-pill[_ngcontent-%COMP%] .pill-name[_ngcontent-%COMP%] {\n max-width: 120px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.category-pill[_ngcontent-%COMP%] .pill-count[_ngcontent-%COMP%] {\n font-size: 10px;\n font-weight: 600;\n color: var(--mj-text-secondary);\n background: var(--mj-bg-surface-sunken);\n padding: 0 5px;\n border-radius: 8px;\n line-height: 16px;\n}\n\n.category-pill[_ngcontent-%COMP%]:hover {\n border-color: var(--pill-color, var(--mj-brand-primary));\n background: var(--mj-bg-surface);\n}\n\n.category-pill.active[_ngcontent-%COMP%] {\n border-color: var(--pill-color, var(--mj-brand-primary));\n background: var(--pill-color, var(--mj-brand-primary));\n color: var(--mj-text-inverse);\n}\n\n.category-pill.active[_ngcontent-%COMP%] .pill-count[_ngcontent-%COMP%] {\n background: rgba(255, 255, 255, 0.25);\n color: var(--mj-text-inverse);\n}\n\n.show-more-btn[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n margin-top: 6px;\n padding: 2px 0;\n border: none;\n background: none;\n font-size: 12px;\n color: var(--mj-brand-primary);\n cursor: pointer;\n}\n\n.show-more-btn[_ngcontent-%COMP%]:hover {\n color: var(--mj-brand-primary);\n text-decoration: underline;\n}\n\n.filter-panel-footer[_ngcontent-%COMP%] {\n margin-top: 8px;\n padding-top: 8px;\n border-top: 1px solid var(--mj-border-default);\n}\n\n.clear-all-btn[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 4px 10px;\n border: none;\n border-radius: 4px;\n background: none;\n font-size: 12px;\n color: var(--mj-status-error);\n cursor: pointer;\n transition: background 0.15s;\n}\n\n.clear-all-btn[_ngcontent-%COMP%]:hover {\n background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n}\n\n\n\n\n\n\n\n\n.component-list[_ngcontent-%COMP%] {\n flex: 1;\n overflow-y: auto;\n padding: 8px 10px;\n}\n\n\n\n\n\n\n\n\n.loading-state[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 40px 20px;\n}\n\n.empty-state[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 40px 20px;\n text-align: center;\n}\n\n.empty-state[_ngcontent-%COMP%] .empty-icon[_ngcontent-%COMP%] {\n font-size: 32px;\n color: var(--mj-border-default);\n margin-bottom: 12px;\n}\n\n.empty-state[_ngcontent-%COMP%] .empty-title[_ngcontent-%COMP%] {\n font-size: 14px;\n font-weight: 600;\n color: var(--mj-text-secondary);\n margin: 0 0 4px;\n}\n\n.empty-state[_ngcontent-%COMP%] .empty-subtitle[_ngcontent-%COMP%] {\n font-size: 13px;\n color: var(--mj-text-secondary);\n margin: 0;\n}\n\n\n\n\n\n\n\n\n.component-card[_ngcontent-%COMP%] {\n margin-bottom: 6px;\n border: 1px solid var(--mj-border-default);\n border-radius: 8px;\n background: var(--mj-bg-surface);\n transition: all 0.15s;\n overflow: hidden;\n}\n\n.component-card[_ngcontent-%COMP%]:hover {\n box-shadow: var(--mj-shadow-sm);\n border-color: var(--mj-border-default);\n}\n\n\n\n.component-card.running[_ngcontent-%COMP%] {\n border-left: 3px solid var(--mj-status-success);\n}\n\n\n\n.component-card.file-loaded[_ngcontent-%COMP%] {\n border-style: dashed;\n border-color: var(--mj-text-muted);\n}\n\n.component-card.file-loaded[_ngcontent-%COMP%]:hover {\n border-color: var(--mj-text-secondary);\n}\n\n\n\n.component-card.expanded[_ngcontent-%COMP%] {\n border-color: var(--mj-brand-primary);\n box-shadow: var(--mj-shadow-sm);\n}\n\n.component-card.expanded.running[_ngcontent-%COMP%] {\n border-color: var(--mj-brand-primary);\n border-left: 3px solid var(--mj-status-success);\n}\n\n.component-card.expanded.file-loaded[_ngcontent-%COMP%] {\n border-style: solid;\n border-color: var(--mj-brand-primary);\n}\n\n\n\n\n\n\n\n\n.card-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: flex-start;\n gap: 10px;\n padding: 10px 12px;\n cursor: pointer;\n user-select: none;\n}\n\n.card-header[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface);\n}\n\n.card-type-icon[_ngcontent-%COMP%] {\n flex-shrink: 0;\n width: 32px;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 16px;\n background: var(--mj-bg-surface-sunken);\n border-radius: 4px;\n margin-top: 2px;\n}\n\n.card-body[_ngcontent-%COMP%] {\n flex: 1;\n min-width: 0;\n}\n\n.card-title-row[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n flex-wrap: wrap;\n margin-bottom: 4px;\n}\n\n.card-name[_ngcontent-%COMP%] {\n font-size: 13px;\n font-weight: 600;\n color: var(--mj-text-primary);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.file-badge[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 3px;\n padding: 1px 6px;\n border-radius: 4px;\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n color: var(--mj-brand-primary);\n font-size: 10px;\n font-weight: 500;\n white-space: nowrap;\n max-width: 120px;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.card-meta-row[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n flex-wrap: wrap;\n}\n\n.version-badge[_ngcontent-%COMP%] {\n font-size: 11px;\n font-weight: 500;\n color: var(--mj-text-secondary);\n background: var(--mj-bg-surface-sunken);\n padding: 1px 6px;\n border-radius: 4px;\n}\n\n.status-badge[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n padding: 1px 7px;\n border-radius: 4px;\n font-size: 10px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.3px;\n}\n\n.status-badge.published[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n color: var(--mj-status-success);\n}\n\n.status-badge.draft[_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.status-badge.deprecated[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n color: var(--mj-status-error);\n}\n\n.status-badge.file[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n color: var(--mj-status-warning);\n}\n\n.status-badge.text[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n color: var(--mj-brand-primary);\n}\n\n.status-badge.artifact[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n color: var(--mj-brand-primary);\n}\n\n.namespace-chip[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 3px;\n padding: 1px 7px;\n border-radius: 10px;\n font-size: 10px;\n font-weight: 500;\n color: var(--mj-text-inverse);\n max-width: 160px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.namespace-chip[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 9px;\n opacity: 0.8;\n}\n\n\n\n\n\n\n\n\n.card-end[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 2px;\n flex-shrink: 0;\n margin-top: 2px;\n}\n\n.favorite-btn[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 28px;\n height: 28px;\n border: none;\n border-radius: 4px;\n background: none;\n color: var(--mj-border-default);\n font-size: 14px;\n cursor: pointer;\n transition: all 0.15s;\n}\n\n.favorite-btn[_ngcontent-%COMP%]:hover {\n color: var(--mj-status-warning);\n background: color-mix(in srgb, var(--mj-status-warning) 10%, var(--mj-bg-surface));\n}\n\n.favorite-btn.is-favorite[_ngcontent-%COMP%] {\n color: var(--mj-status-warning);\n}\n\n.remove-btn[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 28px;\n height: 28px;\n border: none;\n border-radius: 4px;\n background: none;\n color: var(--mj-border-default);\n font-size: 12px;\n cursor: pointer;\n transition: all 0.15s;\n}\n\n.remove-btn[_ngcontent-%COMP%]:hover {\n color: var(--mj-status-error);\n background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n}\n\n.card-chevron[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n color: var(--mj-text-secondary);\n font-size: 11px;\n}\n\n\n\n\n\n\n\n\n.card-details[_ngcontent-%COMP%] {\n padding: 0 12px 12px;\n border-top: 1px solid var(--mj-border-default);\n}\n\n.detail-description[_ngcontent-%COMP%] {\n padding: 8px 0;\n}\n\n.detail-description[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 13px;\n color: var(--mj-text-secondary);\n line-height: 1.5;\n}\n\n.detail-info-grid[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 6px 16px;\n padding: 8px 0;\n}\n\n.detail-info-grid[_ngcontent-%COMP%] .info-item[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 1px;\n}\n\n.detail-info-grid[_ngcontent-%COMP%] .info-label[_ngcontent-%COMP%] {\n font-size: 10px;\n font-weight: 600;\n color: var(--mj-text-secondary);\n text-transform: uppercase;\n letter-spacing: 0.4px;\n}\n\n.detail-info-grid[_ngcontent-%COMP%] .info-value[_ngcontent-%COMP%] {\n font-size: 13px;\n color: var(--mj-text-primary);\n}\n\n.detail-actions[_ngcontent-%COMP%] {\n display: flex;\n gap: 8px;\n padding-top: 8px;\n border-top: 1px solid var(--mj-border-default);\n}"] });
623
+ } }, dependencies: [i2.NgClass, i3.ButtonComponent, i4.TextBoxComponent, i4.TextBoxPrefixTemplateDirective, i5.LoadingComponent, i2.DatePipe], styles: ["\n\n\n\n\n\n\n[_nghost-%COMP%] {\n display: flex;\n flex-direction: column;\n height: 100%;\n overflow: hidden;\n}\n\n.component-browser[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n height: 100%;\n background: var(--mj-bg-surface-sunken);\n overflow: hidden;\n}\n\n\n\n\n\n\n\n\n.browser-header[_ngcontent-%COMP%] {\n padding: 12px 14px 8px;\n border-bottom: 1px solid var(--mj-border-default);\n background: var(--mj-bg-surface);\n flex-shrink: 0;\n}\n\n.browser-header[_ngcontent-%COMP%] .header-top-row[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-bottom: 8px;\n}\n\n.browser-header[_ngcontent-%COMP%] .header-controls-row[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.browser-header[_ngcontent-%COMP%] .component-count[_ngcontent-%COMP%] {\n font-size: 12px;\n color: var(--mj-text-secondary);\n margin-left: auto;\n}\n\n\n\n\n\n\n\n\n.import-dropdown[_ngcontent-%COMP%] {\n position: relative;\n}\n\n.import-dropdown[_ngcontent-%COMP%] .dropdown-chevron[_ngcontent-%COMP%] {\n margin-left: 4px;\n font-size: 10px;\n}\n\n.import-dropdown[_ngcontent-%COMP%] .dropdown-menu[_ngcontent-%COMP%] {\n position: absolute;\n top: 100%;\n left: 0;\n z-index: 1000;\n min-width: 180px;\n margin-top: 4px;\n background: var(--mj-bg-surface);\n border: 1px solid var(--mj-border-default);\n border-radius: 4px;\n box-shadow: var(--mj-shadow-md);\n overflow: hidden;\n}\n\n.import-dropdown[_ngcontent-%COMP%] .dropdown-menu[_ngcontent-%COMP%] .dropdown-item[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n width: 100%;\n padding: 8px 14px;\n border: none;\n background: none;\n font-size: 13px;\n color: var(--mj-text-primary);\n cursor: pointer;\n text-align: left;\n transition: background 0.15s;\n}\n\n.import-dropdown[_ngcontent-%COMP%] .dropdown-menu[_ngcontent-%COMP%] .dropdown-item[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-sunken);\n}\n\n.import-dropdown[_ngcontent-%COMP%] .dropdown-menu[_ngcontent-%COMP%] .dropdown-item[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n width: 16px;\n text-align: center;\n color: var(--mj-text-secondary);\n}\n\n\n\n\n\n\n\n\n.filter-toggle-btn[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 4px;\n padding: 5px 10px;\n border: 1px solid var(--mj-border-default);\n border-radius: 4px;\n background: var(--mj-bg-surface);\n color: var(--mj-text-secondary);\n font-size: 13px;\n cursor: pointer;\n transition: all 0.15s;\n position: relative;\n}\n\n.filter-toggle-btn[_ngcontent-%COMP%]:hover {\n border-color: var(--mj-text-secondary);\n color: var(--mj-text-primary);\n}\n\n.filter-toggle-btn.active[_ngcontent-%COMP%] {\n border-color: var(--mj-brand-primary);\n color: var(--mj-brand-primary);\n background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n}\n\n.filter-toggle-btn[_ngcontent-%COMP%] .filter-count-badge[_ngcontent-%COMP%] {\n position: absolute;\n top: -6px;\n right: -6px;\n min-width: 16px;\n height: 16px;\n padding: 0 4px;\n border-radius: 8px;\n background: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n font-size: 10px;\n font-weight: 600;\n line-height: 16px;\n text-align: center;\n}\n\n\n\n\n\n\n\n\n.search-box[_ngcontent-%COMP%] {\n padding: 8px 14px;\n flex-shrink: 0;\n}\n\n.search-box[_ngcontent-%COMP%] .search-icon[_ngcontent-%COMP%] {\n color: var(--mj-text-secondary);\n margin-left: 6px;\n}\n\n\n\n\n\n\n\n\n.filter-panel[_ngcontent-%COMP%] {\n border-bottom: 1px solid var(--mj-border-default);\n background: var(--mj-bg-surface);\n flex-shrink: 0;\n}\n\n.filter-panel[_ngcontent-%COMP%] .filter-panel-content[_ngcontent-%COMP%] {\n padding: 8px 14px 12px;\n}\n\n.filter-section[_ngcontent-%COMP%] {\n margin-bottom: 10px;\n}\n\n.filter-section[_ngcontent-%COMP%]:last-child {\n margin-bottom: 0;\n}\n\n.filter-section[_ngcontent-%COMP%] .filter-section-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.filter-options[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.filter-checkbox[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 4px 6px;\n border-radius: 4px;\n cursor: pointer;\n font-size: 13px;\n color: var(--mj-text-secondary);\n transition: background 0.15s;\n}\n\n.filter-checkbox[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-sunken);\n}\n\n.filter-checkbox[_ngcontent-%COMP%] input[type=\"checkbox\"][_ngcontent-%COMP%] {\n width: 14px;\n height: 14px;\n accent-color: var(--mj-brand-primary);\n cursor: pointer;\n}\n\n.filter-checkbox[_ngcontent-%COMP%] .filter-icon[_ngcontent-%COMP%] {\n font-size: 12px;\n}\n\n.filter-checkbox[_ngcontent-%COMP%] .favorites-icon[_ngcontent-%COMP%] {\n color: var(--mj-status-warning);\n}\n\n.filter-checkbox[_ngcontent-%COMP%] .deprecated-icon[_ngcontent-%COMP%] {\n color: var(--mj-text-muted);\n}\n\n.filter-checkbox[_ngcontent-%COMP%] .deprecated-count[_ngcontent-%COMP%] {\n color: var(--mj-text-muted);\n font-size: 12px;\n}\n\n\n\n\n\n\n\n\n.category-pills[_ngcontent-%COMP%] {\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n}\n\n.category-pill[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 3px 10px;\n border: 1px solid var(--mj-border-default);\n border-radius: 14px;\n background: var(--mj-bg-surface);\n font-size: 12px;\n color: var(--mj-text-secondary);\n cursor: pointer;\n transition: all 0.15s;\n}\n\n.category-pill[_ngcontent-%COMP%] .pill-name[_ngcontent-%COMP%] {\n max-width: 120px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.category-pill[_ngcontent-%COMP%] .pill-count[_ngcontent-%COMP%] {\n font-size: 10px;\n font-weight: 600;\n color: var(--mj-text-secondary);\n background: var(--mj-bg-surface-sunken);\n padding: 0 5px;\n border-radius: 8px;\n line-height: 16px;\n}\n\n.category-pill[_ngcontent-%COMP%]:hover {\n border-color: var(--pill-color, var(--mj-brand-primary));\n background: var(--mj-bg-surface);\n}\n\n.category-pill.active[_ngcontent-%COMP%] {\n border-color: var(--pill-color, var(--mj-brand-primary));\n background: var(--pill-color, var(--mj-brand-primary));\n color: var(--mj-text-inverse);\n}\n\n.category-pill.active[_ngcontent-%COMP%] .pill-count[_ngcontent-%COMP%] {\n background: rgba(255, 255, 255, 0.25);\n color: var(--mj-text-inverse);\n}\n\n.show-more-btn[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n margin-top: 6px;\n padding: 2px 0;\n border: none;\n background: none;\n font-size: 12px;\n color: var(--mj-brand-primary);\n cursor: pointer;\n}\n\n.show-more-btn[_ngcontent-%COMP%]:hover {\n color: var(--mj-brand-primary);\n text-decoration: underline;\n}\n\n.filter-panel-footer[_ngcontent-%COMP%] {\n margin-top: 8px;\n padding-top: 8px;\n border-top: 1px solid var(--mj-border-default);\n}\n\n.clear-all-btn[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 4px 10px;\n border: none;\n border-radius: 4px;\n background: none;\n font-size: 12px;\n color: var(--mj-status-error);\n cursor: pointer;\n transition: background 0.15s;\n}\n\n.clear-all-btn[_ngcontent-%COMP%]:hover {\n background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n}\n\n\n\n\n\n\n\n\n.component-list[_ngcontent-%COMP%] {\n flex: 1;\n overflow-y: auto;\n padding: 8px 10px;\n}\n\n\n\n\n\n\n\n\n.loading-state[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 40px 20px;\n}\n\n.empty-state[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 40px 20px;\n text-align: center;\n}\n\n.empty-state[_ngcontent-%COMP%] .empty-icon[_ngcontent-%COMP%] {\n font-size: 32px;\n color: var(--mj-border-default);\n margin-bottom: 12px;\n}\n\n.empty-state[_ngcontent-%COMP%] .empty-title[_ngcontent-%COMP%] {\n font-size: 14px;\n font-weight: 600;\n color: var(--mj-text-secondary);\n margin: 0 0 4px;\n}\n\n.empty-state[_ngcontent-%COMP%] .empty-subtitle[_ngcontent-%COMP%] {\n font-size: 13px;\n color: var(--mj-text-secondary);\n margin: 0;\n}\n\n\n\n\n\n\n\n\n.component-card[_ngcontent-%COMP%] {\n margin-bottom: 6px;\n border: 1px solid var(--mj-border-default);\n border-radius: 8px;\n background: var(--mj-bg-surface);\n transition: all 0.15s;\n overflow: hidden;\n}\n\n.component-card[_ngcontent-%COMP%]:hover {\n box-shadow: var(--mj-shadow-sm);\n border-color: var(--mj-border-default);\n}\n\n\n\n.component-card.running[_ngcontent-%COMP%] {\n border-left: 3px solid var(--mj-status-success);\n}\n\n\n\n.component-card.file-loaded[_ngcontent-%COMP%] {\n border-style: dashed;\n border-color: var(--mj-text-muted);\n}\n\n.component-card.file-loaded[_ngcontent-%COMP%]:hover {\n border-color: var(--mj-text-secondary);\n}\n\n\n\n.component-card.expanded[_ngcontent-%COMP%] {\n border-color: var(--mj-brand-primary);\n box-shadow: var(--mj-shadow-sm);\n}\n\n.component-card.expanded.running[_ngcontent-%COMP%] {\n border-color: var(--mj-brand-primary);\n border-left: 3px solid var(--mj-status-success);\n}\n\n.component-card.expanded.file-loaded[_ngcontent-%COMP%] {\n border-style: solid;\n border-color: var(--mj-brand-primary);\n}\n\n\n\n\n\n\n\n\n.card-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: flex-start;\n gap: 10px;\n padding: 10px 12px;\n cursor: pointer;\n user-select: none;\n}\n\n.card-header[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface);\n}\n\n.card-type-icon[_ngcontent-%COMP%] {\n flex-shrink: 0;\n width: 32px;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 16px;\n background: var(--mj-bg-surface-sunken);\n border-radius: 4px;\n margin-top: 2px;\n}\n\n.card-body[_ngcontent-%COMP%] {\n flex: 1;\n min-width: 0;\n}\n\n.card-title-row[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n flex-wrap: wrap;\n margin-bottom: 4px;\n}\n\n.card-name[_ngcontent-%COMP%] {\n font-size: 13px;\n font-weight: 600;\n color: var(--mj-text-primary);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.file-badge[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 3px;\n padding: 1px 6px;\n border-radius: 4px;\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n color: var(--mj-brand-primary);\n font-size: 10px;\n font-weight: 500;\n white-space: nowrap;\n max-width: 120px;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.card-meta-row[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n flex-wrap: wrap;\n}\n\n.version-badge[_ngcontent-%COMP%] {\n font-size: 11px;\n font-weight: 500;\n color: var(--mj-text-secondary);\n background: var(--mj-bg-surface-sunken);\n padding: 1px 6px;\n border-radius: 4px;\n}\n\n.status-badge[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n padding: 1px 7px;\n border-radius: 4px;\n font-size: 10px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.3px;\n}\n\n.status-badge.published[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n color: var(--mj-status-success);\n}\n\n.status-badge.draft[_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.status-badge.deprecated[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n color: var(--mj-status-error);\n}\n\n.status-badge.file[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n color: var(--mj-status-warning);\n}\n\n.status-badge.text[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n color: var(--mj-brand-primary);\n}\n\n.status-badge.artifact[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n color: var(--mj-brand-primary);\n}\n\n.namespace-chip[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 3px;\n padding: 1px 7px;\n border-radius: 10px;\n font-size: 10px;\n font-weight: 500;\n color: var(--mj-text-inverse);\n max-width: 160px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.namespace-chip[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 9px;\n opacity: 0.8;\n}\n\n\n\n\n\n\n\n\n.card-end[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 2px;\n flex-shrink: 0;\n margin-top: 2px;\n}\n\n.favorite-btn[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 28px;\n height: 28px;\n border: none;\n border-radius: 4px;\n background: none;\n color: var(--mj-border-default);\n font-size: 14px;\n cursor: pointer;\n transition: all 0.15s;\n}\n\n.favorite-btn[_ngcontent-%COMP%]:hover {\n color: var(--mj-status-warning);\n background: color-mix(in srgb, var(--mj-status-warning) 10%, var(--mj-bg-surface));\n}\n\n.favorite-btn.is-favorite[_ngcontent-%COMP%] {\n color: var(--mj-status-warning);\n}\n\n.remove-btn[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 28px;\n height: 28px;\n border: none;\n border-radius: 4px;\n background: none;\n color: var(--mj-border-default);\n font-size: 12px;\n cursor: pointer;\n transition: all 0.15s;\n}\n\n.remove-btn[_ngcontent-%COMP%]:hover {\n color: var(--mj-status-error);\n background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n}\n\n.card-chevron[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n color: var(--mj-text-secondary);\n font-size: 11px;\n}\n\n\n\n\n\n\n\n\n.card-details[_ngcontent-%COMP%] {\n padding: 0 12px 12px;\n border-top: 1px solid var(--mj-border-default);\n}\n\n.detail-description[_ngcontent-%COMP%] {\n padding: 8px 0;\n}\n\n.detail-description[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 13px;\n color: var(--mj-text-secondary);\n line-height: 1.5;\n}\n\n.detail-info-grid[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 6px 16px;\n padding: 8px 0;\n}\n\n.detail-info-grid[_ngcontent-%COMP%] .info-item[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 1px;\n}\n\n.detail-info-grid[_ngcontent-%COMP%] .info-label[_ngcontent-%COMP%] {\n font-size: 10px;\n font-weight: 600;\n color: var(--mj-text-secondary);\n text-transform: uppercase;\n letter-spacing: 0.4px;\n}\n\n.detail-info-grid[_ngcontent-%COMP%] .info-value[_ngcontent-%COMP%] {\n font-size: 13px;\n color: var(--mj-text-primary);\n}\n\n.detail-actions[_ngcontent-%COMP%] {\n display: flex;\n gap: 8px;\n padding-top: 8px;\n border-top: 1px solid var(--mj-border-default);\n}"] });
624
624
  }
625
625
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ComponentBrowserComponent, [{
626
626
  type: Component,
@@ -3,8 +3,8 @@ import { unifiedMergeView, getChunks, goToNextChunk, goToPreviousChunk } from '@
3
3
  import * as i0 from "@angular/core";
4
4
  import * as i1 from "../../services/component-studio-state.service";
5
5
  import * as i2 from "@angular/forms";
6
- import * as i3 from "@memberjunction/ng-code-editor";
7
- import * as i4 from "@progress/kendo-angular-buttons";
6
+ import * as i3 from "@progress/kendo-angular-buttons";
7
+ import * as i4 from "@memberjunction/ng-code-editor";
8
8
  const _c0 = ["diffEditor"];
9
9
  const _forTrack0 = ($index, $item) => $item.title;
10
10
  function CodeEditorPanelComponent_For_3_Conditional_1_Template(rf, ctx) { if (rf & 1) {
@@ -264,7 +264,7 @@ export class CodeEditorPanelComponent {
264
264
  i0.ɵɵconditional(ctx.State.IsEditingCode ? 17 : -1);
265
265
  i0.ɵɵadvance(2);
266
266
  i0.ɵɵconditional(ctx.ActiveSection ? 19 : 20);
267
- } }, dependencies: [i2.NgControlStatus, i2.NgModel, i3.CodeEditorComponent, i4.ButtonComponent], styles: [".code-editor-panel[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n height: 100%;\n }\n\n \n\n .code-tab-bar[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n padding: 0 8px;\n height: 36px;\n background: var(--mj-bg-surface-sunken);\n border-bottom: 1px solid var(--mj-border-default);\n flex-shrink: 0;\n gap: 2px;\n overflow-x: auto;\n }\n\n .code-tab[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 5px;\n padding: 5px 12px;\n border: none;\n border-radius: 8px;\n background: transparent;\n color: var(--mj-text-secondary);\n font-size: 12px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.15s ease;\n white-space: nowrap;\n font-family: inherit;\n position: relative;\n }\n\n .code-tab[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-sunken);\n color: var(--mj-text-primary);\n }\n\n .code-tab.active[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface);\n color: var(--mj-brand-primary);\n font-weight: 600;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);\n }\n\n .dep-icon[_ngcontent-%COMP%] {\n font-size: 10px;\n color: var(--mj-brand-primary);\n }\n\n .modified-dot[_ngcontent-%COMP%] {\n width: 6px;\n height: 6px;\n border-radius: 50%;\n background: var(--mj-status-error);\n display: inline-block;\n margin-left: 2px;\n }\n\n \n\n .code-toolbar[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n padding: 4px 8px;\n background: var(--mj-bg-surface);\n border-bottom: 1px solid var(--mj-border-default);\n flex-shrink: 0;\n gap: 8px;\n }\n\n .view-mode-toggle[_ngcontent-%COMP%] {\n display: inline-flex;\n border: 1px solid var(--mj-border-default);\n border-radius: 8px;\n overflow: hidden;\n }\n\n .mode-btn[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 4px 10px;\n border: none;\n background: transparent;\n color: var(--mj-text-secondary);\n font-size: 11px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.15s ease;\n font-family: inherit;\n }\n\n .mode-btn[_ngcontent-%COMP%]:not(:last-child) {\n border-right: 1px solid var(--mj-border-default);\n }\n\n .mode-btn[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-sunken);\n }\n\n .mode-btn.active[_ngcontent-%COMP%] {\n background: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n }\n\n .mode-btn[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 10px;\n }\n\n .toolbar-spacer[_ngcontent-%COMP%] {\n flex: 1;\n }\n\n .icon-btn[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 28px;\n height: 28px;\n border: none;\n border-radius: 6px;\n background: transparent;\n color: var(--mj-text-secondary);\n cursor: pointer;\n font-size: 13px;\n transition: all 0.15s ease;\n }\n\n .icon-btn[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-sunken);\n color: var(--mj-text-primary);\n }\n\n .action-buttons[_ngcontent-%COMP%] {\n display: flex;\n gap: 6px;\n }\n\n .diff-nav[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n margin-left: 4px;\n }\n\n .diff-count[_ngcontent-%COMP%] {\n font-size: 11px;\n font-weight: 500;\n color: var(--mj-text-secondary);\n padding: 0 4px;\n white-space: nowrap;\n }\n\n .icon-btn[_ngcontent-%COMP%]:disabled {\n opacity: 0.35;\n cursor: default;\n }\n\n \n\n .code-editor-body[_ngcontent-%COMP%] {\n flex: 1;\n overflow: hidden;\n display: flex;\n flex-direction: column;\n min-height: 0;\n }\n\n .editor-pane[_ngcontent-%COMP%] {\n flex: 1;\n overflow: hidden;\n min-height: 0;\n }\n\n .editor-pane[_ngcontent-%COMP%] mj-code-editor[_ngcontent-%COMP%] {\n display: block;\n height: 100%;\n }\n\n \n\n [_nghost-%COMP%] .diff-pane .cm-mergeView .cm-changedLine {\n background: color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n }\n\n [_nghost-%COMP%] .diff-pane .cm-mergeView .cm-deletedChunk {\n background: color-mix(in srgb, var(--mj-status-error) 8%, transparent);\n }\n\n \n\n .empty-state[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 40px 20px;\n color: var(--mj-text-secondary);\n flex: 1;\n }\n\n .empty-state[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 32px;\n margin-bottom: 12px;\n opacity: 0.4;\n }\n\n .empty-state[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 13px;\n text-align: center;\n }"] });
267
+ } }, dependencies: [i2.NgControlStatus, i2.NgModel, i3.ButtonComponent, i4.CodeEditorComponent], styles: [".code-editor-panel[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n height: 100%;\n }\n\n \n\n .code-tab-bar[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n padding: 0 8px;\n height: 36px;\n background: var(--mj-bg-surface-sunken);\n border-bottom: 1px solid var(--mj-border-default);\n flex-shrink: 0;\n gap: 2px;\n overflow-x: auto;\n }\n\n .code-tab[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 5px;\n padding: 5px 12px;\n border: none;\n border-radius: 8px;\n background: transparent;\n color: var(--mj-text-secondary);\n font-size: 12px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.15s ease;\n white-space: nowrap;\n font-family: inherit;\n position: relative;\n }\n\n .code-tab[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-sunken);\n color: var(--mj-text-primary);\n }\n\n .code-tab.active[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface);\n color: var(--mj-brand-primary);\n font-weight: 600;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);\n }\n\n .dep-icon[_ngcontent-%COMP%] {\n font-size: 10px;\n color: var(--mj-brand-primary);\n }\n\n .modified-dot[_ngcontent-%COMP%] {\n width: 6px;\n height: 6px;\n border-radius: 50%;\n background: var(--mj-status-error);\n display: inline-block;\n margin-left: 2px;\n }\n\n \n\n .code-toolbar[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n padding: 4px 8px;\n background: var(--mj-bg-surface);\n border-bottom: 1px solid var(--mj-border-default);\n flex-shrink: 0;\n gap: 8px;\n }\n\n .view-mode-toggle[_ngcontent-%COMP%] {\n display: inline-flex;\n border: 1px solid var(--mj-border-default);\n border-radius: 8px;\n overflow: hidden;\n }\n\n .mode-btn[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 4px 10px;\n border: none;\n background: transparent;\n color: var(--mj-text-secondary);\n font-size: 11px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.15s ease;\n font-family: inherit;\n }\n\n .mode-btn[_ngcontent-%COMP%]:not(:last-child) {\n border-right: 1px solid var(--mj-border-default);\n }\n\n .mode-btn[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-sunken);\n }\n\n .mode-btn.active[_ngcontent-%COMP%] {\n background: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n }\n\n .mode-btn[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 10px;\n }\n\n .toolbar-spacer[_ngcontent-%COMP%] {\n flex: 1;\n }\n\n .icon-btn[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 28px;\n height: 28px;\n border: none;\n border-radius: 6px;\n background: transparent;\n color: var(--mj-text-secondary);\n cursor: pointer;\n font-size: 13px;\n transition: all 0.15s ease;\n }\n\n .icon-btn[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-sunken);\n color: var(--mj-text-primary);\n }\n\n .action-buttons[_ngcontent-%COMP%] {\n display: flex;\n gap: 6px;\n }\n\n .diff-nav[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n margin-left: 4px;\n }\n\n .diff-count[_ngcontent-%COMP%] {\n font-size: 11px;\n font-weight: 500;\n color: var(--mj-text-secondary);\n padding: 0 4px;\n white-space: nowrap;\n }\n\n .icon-btn[_ngcontent-%COMP%]:disabled {\n opacity: 0.35;\n cursor: default;\n }\n\n \n\n .code-editor-body[_ngcontent-%COMP%] {\n flex: 1;\n overflow: hidden;\n display: flex;\n flex-direction: column;\n min-height: 0;\n }\n\n .editor-pane[_ngcontent-%COMP%] {\n flex: 1;\n overflow: hidden;\n min-height: 0;\n }\n\n .editor-pane[_ngcontent-%COMP%] mj-code-editor[_ngcontent-%COMP%] {\n display: block;\n height: 100%;\n }\n\n \n\n [_nghost-%COMP%] .diff-pane .cm-mergeView .cm-changedLine {\n background: color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n }\n\n [_nghost-%COMP%] .diff-pane .cm-mergeView .cm-deletedChunk {\n background: color-mix(in srgb, var(--mj-status-error) 8%, transparent);\n }\n\n \n\n .empty-state[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 40px 20px;\n color: var(--mj-text-secondary);\n flex: 1;\n }\n\n .empty-state[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 32px;\n margin-bottom: 12px;\n opacity: 0.4;\n }\n\n .empty-state[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 13px;\n text-align: center;\n }"] });
268
268
  }
269
269
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CodeEditorPanelComponent, [{
270
270
  type: Component,
@@ -2,8 +2,8 @@ import { Component } from '@angular/core';
2
2
  import * as i0 from "@angular/core";
3
3
  import * as i1 from "../../services/component-studio-state.service";
4
4
  import * as i2 from "@angular/forms";
5
- import * as i3 from "@memberjunction/ng-code-editor";
6
- import * as i4 from "@progress/kendo-angular-buttons";
5
+ import * as i3 from "@progress/kendo-angular-buttons";
6
+ import * as i4 from "@memberjunction/ng-code-editor";
7
7
  function DataRequirementsEditorComponent_Conditional_5_Template(rf, ctx) { if (rf & 1) {
8
8
  const _r1 = i0.ɵɵgetCurrentView();
9
9
  i0.ɵɵelementStart(0, "div", 4)(1, "button", 7);
@@ -158,7 +158,7 @@ export class DataRequirementsEditorComponent {
158
158
  i0.ɵɵconditional(ctx.IsEditing ? 5 : -1);
159
159
  i0.ɵɵadvance(2);
160
160
  i0.ɵɵconditional(ctx.State.SelectedComponent ? 7 : 8);
161
- } }, dependencies: [i2.NgControlStatus, i2.NgModel, i3.CodeEditorComponent, i4.ButtonComponent], styles: [".data-requirements-editor[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n height: 100%;\n }\n .editor-header[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 8px 12px;\n border-bottom: 1px solid var(--mj-border-default);\n background: var(--mj-bg-surface);\n flex-shrink: 0;\n }\n .header-title[_ngcontent-%COMP%] {\n font-weight: 600;\n font-size: 13px;\n color: var(--mj-text-primary);\n }\n .header-title[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n margin-right: 6px;\n color: var(--mj-text-secondary);\n }\n .action-buttons[_ngcontent-%COMP%] {\n display: flex;\n gap: 6px;\n }\n .summary-bar[_ngcontent-%COMP%] {\n display: flex;\n gap: 12px;\n padding: 6px 12px;\n background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n border-bottom: 1px solid var(--mj-border-default);\n font-size: 12px;\n color: var(--mj-brand-primary);\n flex-shrink: 0;\n }\n .summary-item[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 4px;\n }\n .mode-badge[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface-sunken);\n color: var(--mj-text-primary);\n padding: 1px 8px;\n border-radius: 10px;\n font-weight: 600;\n text-transform: uppercase;\n font-size: 10px;\n }\n .editor-body[_ngcontent-%COMP%] {\n flex: 1;\n overflow: hidden;\n display: flex;\n flex-direction: column;\n }\n .json-editor-container[_ngcontent-%COMP%] {\n flex: 1;\n overflow: hidden;\n }\n .json-editor-container[_ngcontent-%COMP%] mj-code-editor[_ngcontent-%COMP%] {\n display: block;\n height: 100%;\n }\n .empty-state[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 40px 20px;\n color: var(--mj-text-secondary);\n flex: 1;\n }\n .empty-state[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 32px;\n margin-bottom: 12px;\n }\n .empty-state[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 13px;\n text-align: center;\n }"] });
161
+ } }, dependencies: [i2.NgControlStatus, i2.NgModel, i3.ButtonComponent, i4.CodeEditorComponent], styles: [".data-requirements-editor[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n height: 100%;\n }\n .editor-header[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 8px 12px;\n border-bottom: 1px solid var(--mj-border-default);\n background: var(--mj-bg-surface);\n flex-shrink: 0;\n }\n .header-title[_ngcontent-%COMP%] {\n font-weight: 600;\n font-size: 13px;\n color: var(--mj-text-primary);\n }\n .header-title[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n margin-right: 6px;\n color: var(--mj-text-secondary);\n }\n .action-buttons[_ngcontent-%COMP%] {\n display: flex;\n gap: 6px;\n }\n .summary-bar[_ngcontent-%COMP%] {\n display: flex;\n gap: 12px;\n padding: 6px 12px;\n background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n border-bottom: 1px solid var(--mj-border-default);\n font-size: 12px;\n color: var(--mj-brand-primary);\n flex-shrink: 0;\n }\n .summary-item[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 4px;\n }\n .mode-badge[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface-sunken);\n color: var(--mj-text-primary);\n padding: 1px 8px;\n border-radius: 10px;\n font-weight: 600;\n text-transform: uppercase;\n font-size: 10px;\n }\n .editor-body[_ngcontent-%COMP%] {\n flex: 1;\n overflow: hidden;\n display: flex;\n flex-direction: column;\n }\n .json-editor-container[_ngcontent-%COMP%] {\n flex: 1;\n overflow: hidden;\n }\n .json-editor-container[_ngcontent-%COMP%] mj-code-editor[_ngcontent-%COMP%] {\n display: block;\n height: 100%;\n }\n .empty-state[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 40px 20px;\n color: var(--mj-text-secondary);\n flex: 1;\n }\n .empty-state[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 32px;\n margin-bottom: 12px;\n }\n .empty-state[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 13px;\n text-align: center;\n }"] });
162
162
  }
163
163
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DataRequirementsEditorComponent, [{
164
164
  type: Component,
@@ -3,8 +3,8 @@ import * as i0 from "@angular/core";
3
3
  import * as i1 from "../../services/component-studio-state.service";
4
4
  import * as i2 from "@angular/common";
5
5
  import * as i3 from "@angular/forms";
6
- import * as i4 from "@memberjunction/ng-code-editor";
7
- import * as i5 from "@progress/kendo-angular-buttons";
6
+ import * as i4 from "@progress/kendo-angular-buttons";
7
+ import * as i5 from "@memberjunction/ng-code-editor";
8
8
  import * as i6 from "@memberjunction/ng-markdown";
9
9
  function RequirementsEditorComponent_Conditional_6_Template(rf, ctx) { if (rf & 1) {
10
10
  const _r1 = i0.ɵɵgetCurrentView();
@@ -185,7 +185,7 @@ export class RequirementsEditorComponent {
185
185
  i0.ɵɵclassProp("active", ctx.ViewMode === "edit");
186
186
  i0.ɵɵadvance(4);
187
187
  i0.ɵɵconditional(ctx.State.SelectedComponent ? 15 : 16);
188
- } }, dependencies: [i2.NgClass, i3.NgControlStatus, i3.NgModel, i4.CodeEditorComponent, i5.ButtonComponent, i6.MarkdownComponent, i2.LowerCasePipe], styles: [".requirements-editor[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n height: 100%;\n }\n\n .editor-header[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 8px 12px;\n border-bottom: 1px solid var(--mj-border-default);\n background: var(--mj-bg-surface);\n flex-shrink: 0;\n gap: 8px;\n }\n\n .header-title[_ngcontent-%COMP%] {\n font-weight: 600;\n font-size: 13px;\n color: var(--mj-text-primary);\n white-space: nowrap;\n }\n\n .header-title[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n margin-right: 6px;\n color: var(--mj-brand-primary);\n }\n\n .header-right[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n }\n\n .action-buttons[_ngcontent-%COMP%] {\n display: flex;\n gap: 6px;\n }\n\n .action-btn[_ngcontent-%COMP%] {\n font-size: 12px;\n }\n\n .mode-toggle[_ngcontent-%COMP%] {\n display: inline-flex;\n border: 1px solid var(--mj-border-default);\n border-radius: 8px;\n overflow: hidden;\n }\n\n .mode-btn[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 4px 10px;\n border: none;\n background: transparent;\n color: var(--mj-text-secondary);\n font-size: 11px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.15s ease;\n font-family: inherit;\n }\n\n .mode-btn[_ngcontent-%COMP%]:not(:last-child) {\n border-right: 1px solid var(--mj-border-default);\n }\n\n .mode-btn[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-sunken);\n }\n\n .mode-btn.active[_ngcontent-%COMP%] {\n background: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n }\n\n .mode-btn[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 10px;\n }\n\n .editor-body[_ngcontent-%COMP%] {\n flex: 1;\n overflow: hidden;\n display: flex;\n flex-direction: column;\n }\n\n .preview-container[_ngcontent-%COMP%] {\n flex: 1;\n overflow: auto;\n padding: 16px 20px;\n }\n\n .code-editor-container[_ngcontent-%COMP%] {\n flex: 1;\n overflow: hidden;\n }\n\n .code-editor-container[_ngcontent-%COMP%] mj-code-editor[_ngcontent-%COMP%] {\n display: block;\n height: 100%;\n }\n\n .empty-preview[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 40px 20px;\n color: var(--mj-text-secondary);\n }\n\n .empty-preview[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 32px;\n margin-bottom: 12px;\n opacity: 0.4;\n }\n\n .empty-preview[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n margin: 0 0 12px;\n font-size: 13px;\n }\n\n .edit-link[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 5px;\n padding: 6px 14px;\n border: 1px solid var(--mj-border-default);\n border-radius: 8px;\n background: transparent;\n color: var(--mj-brand-primary);\n font-size: 12px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.15s ease;\n font-family: inherit;\n }\n\n .edit-link[_ngcontent-%COMP%]:hover {\n background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n }\n\n .empty-state[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 40px 20px;\n color: var(--mj-text-secondary);\n flex: 1;\n }\n\n .empty-state[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 32px;\n margin-bottom: 12px;\n opacity: 0.4;\n }\n\n .empty-state[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 13px;\n text-align: center;\n }"] });
188
+ } }, dependencies: [i2.NgClass, i3.NgControlStatus, i3.NgModel, i4.ButtonComponent, i5.CodeEditorComponent, i6.MarkdownComponent, i2.LowerCasePipe], styles: [".requirements-editor[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n height: 100%;\n }\n\n .editor-header[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 8px 12px;\n border-bottom: 1px solid var(--mj-border-default);\n background: var(--mj-bg-surface);\n flex-shrink: 0;\n gap: 8px;\n }\n\n .header-title[_ngcontent-%COMP%] {\n font-weight: 600;\n font-size: 13px;\n color: var(--mj-text-primary);\n white-space: nowrap;\n }\n\n .header-title[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n margin-right: 6px;\n color: var(--mj-brand-primary);\n }\n\n .header-right[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n }\n\n .action-buttons[_ngcontent-%COMP%] {\n display: flex;\n gap: 6px;\n }\n\n .action-btn[_ngcontent-%COMP%] {\n font-size: 12px;\n }\n\n .mode-toggle[_ngcontent-%COMP%] {\n display: inline-flex;\n border: 1px solid var(--mj-border-default);\n border-radius: 8px;\n overflow: hidden;\n }\n\n .mode-btn[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 4px 10px;\n border: none;\n background: transparent;\n color: var(--mj-text-secondary);\n font-size: 11px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.15s ease;\n font-family: inherit;\n }\n\n .mode-btn[_ngcontent-%COMP%]:not(:last-child) {\n border-right: 1px solid var(--mj-border-default);\n }\n\n .mode-btn[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-sunken);\n }\n\n .mode-btn.active[_ngcontent-%COMP%] {\n background: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n }\n\n .mode-btn[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 10px;\n }\n\n .editor-body[_ngcontent-%COMP%] {\n flex: 1;\n overflow: hidden;\n display: flex;\n flex-direction: column;\n }\n\n .preview-container[_ngcontent-%COMP%] {\n flex: 1;\n overflow: auto;\n padding: 16px 20px;\n }\n\n .code-editor-container[_ngcontent-%COMP%] {\n flex: 1;\n overflow: hidden;\n }\n\n .code-editor-container[_ngcontent-%COMP%] mj-code-editor[_ngcontent-%COMP%] {\n display: block;\n height: 100%;\n }\n\n .empty-preview[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 40px 20px;\n color: var(--mj-text-secondary);\n }\n\n .empty-preview[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 32px;\n margin-bottom: 12px;\n opacity: 0.4;\n }\n\n .empty-preview[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n margin: 0 0 12px;\n font-size: 13px;\n }\n\n .edit-link[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 5px;\n padding: 6px 14px;\n border: 1px solid var(--mj-border-default);\n border-radius: 8px;\n background: transparent;\n color: var(--mj-brand-primary);\n font-size: 12px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.15s ease;\n font-family: inherit;\n }\n\n .edit-link[_ngcontent-%COMP%]:hover {\n background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n }\n\n .empty-state[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 40px 20px;\n color: var(--mj-text-secondary);\n flex: 1;\n }\n\n .empty-state[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 32px;\n margin-bottom: 12px;\n opacity: 0.4;\n }\n\n .empty-state[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 13px;\n text-align: center;\n }"] });
189
189
  }
190
190
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(RequirementsEditorComponent, [{
191
191
  type: Component,
@@ -2,8 +2,8 @@ import { Component } from '@angular/core';
2
2
  import * as i0 from "@angular/core";
3
3
  import * as i1 from "../../services/component-studio-state.service";
4
4
  import * as i2 from "@angular/forms";
5
- import * as i3 from "@memberjunction/ng-code-editor";
6
- import * as i4 from "@progress/kendo-angular-buttons";
5
+ import * as i3 from "@progress/kendo-angular-buttons";
6
+ import * as i4 from "@memberjunction/ng-code-editor";
7
7
  function SpecEditorComponent_Conditional_9_Template(rf, ctx) { if (rf & 1) {
8
8
  const _r1 = i0.ɵɵgetCurrentView();
9
9
  i0.ɵɵelementStart(0, "div", 6)(1, "button", 10);
@@ -223,7 +223,7 @@ export class SpecEditorComponent {
223
223
  i0.ɵɵconditional(ctx.State.IsEditingSpec ? 9 : -1);
224
224
  i0.ɵɵadvance(2);
225
225
  i0.ɵɵconditional(ctx.Mode === "form" ? 11 : 12);
226
- } }, dependencies: [i2.NgSelectOption, i2.ɵNgSelectMultipleOption, i2.DefaultValueAccessor, i2.SelectControlValueAccessor, i2.NgControlStatus, i2.NgModel, i3.CodeEditorComponent, i4.ButtonComponent], styles: [".spec-editor[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n height: 100%;\n }\n\n .editor-header[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 8px 12px;\n border-bottom: 1px solid var(--mj-border-default);\n background: var(--mj-bg-surface);\n flex-shrink: 0;\n }\n\n .mode-toggle[_ngcontent-%COMP%] {\n display: inline-flex;\n border: 1px solid var(--mj-border-default);\n border-radius: 8px;\n overflow: hidden;\n }\n\n .mode-btn[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 4px 12px;\n border: none;\n background: transparent;\n color: var(--mj-text-secondary);\n font-size: 12px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.15s ease;\n font-family: inherit;\n }\n\n .mode-btn[_ngcontent-%COMP%]:not(:last-child) {\n border-right: 1px solid var(--mj-border-default);\n }\n\n .mode-btn[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-sunken);\n }\n\n .mode-btn.active[_ngcontent-%COMP%] {\n background: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n }\n\n .mode-btn[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 11px;\n }\n\n .action-buttons[_ngcontent-%COMP%] {\n display: flex;\n gap: 6px;\n }\n\n .action-btn[_ngcontent-%COMP%] {\n font-size: 12px;\n }\n\n .editor-body[_ngcontent-%COMP%] {\n flex: 1;\n overflow: auto;\n }\n\n .form-mode[_ngcontent-%COMP%] {\n padding: 16px;\n display: flex;\n flex-direction: column;\n gap: 14px;\n }\n\n .form-field[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 4px;\n flex: 1;\n }\n\n .form-label[_ngcontent-%COMP%] {\n font-size: 11px;\n font-weight: 600;\n color: var(--mj-text-secondary);\n text-transform: uppercase;\n letter-spacing: 0.5px;\n }\n\n .form-input[_ngcontent-%COMP%] {\n padding: 8px 12px;\n border: 1px solid var(--mj-border-strong);\n border-radius: 6px;\n background: var(--mj-bg-surface);\n color: var(--mj-text-primary);\n font-size: 13px;\n font-family: inherit;\n outline: none;\n transition: border-color 0.15s ease;\n }\n\n .form-input[_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 .form-textarea[_ngcontent-%COMP%] {\n padding: 8px 12px;\n border: 1px solid var(--mj-border-strong);\n border-radius: 6px;\n background: var(--mj-bg-surface);\n color: var(--mj-text-primary);\n font-size: 13px;\n font-family: inherit;\n resize: vertical;\n min-height: 60px;\n outline: none;\n transition: border-color 0.15s ease;\n }\n\n .form-textarea[_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 .form-select[_ngcontent-%COMP%] {\n padding: 8px 12px;\n border: 1px solid var(--mj-border-strong);\n border-radius: 6px;\n background: var(--mj-bg-surface);\n color: var(--mj-text-primary);\n font-size: 13px;\n font-family: inherit;\n outline: none;\n cursor: pointer;\n transition: border-color 0.15s ease;\n }\n\n .form-select[_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 .form-row[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 12px;\n }\n\n .json-mode[_ngcontent-%COMP%] {\n height: 100%;\n }\n\n .json-mode[_ngcontent-%COMP%] mj-code-editor[_ngcontent-%COMP%] {\n display: block;\n height: 100%;\n }"] });
226
+ } }, dependencies: [i2.NgSelectOption, i2.ɵNgSelectMultipleOption, i2.DefaultValueAccessor, i2.SelectControlValueAccessor, i2.NgControlStatus, i2.NgModel, i3.ButtonComponent, i4.CodeEditorComponent], styles: [".spec-editor[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n height: 100%;\n }\n\n .editor-header[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 8px 12px;\n border-bottom: 1px solid var(--mj-border-default);\n background: var(--mj-bg-surface);\n flex-shrink: 0;\n }\n\n .mode-toggle[_ngcontent-%COMP%] {\n display: inline-flex;\n border: 1px solid var(--mj-border-default);\n border-radius: 8px;\n overflow: hidden;\n }\n\n .mode-btn[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 4px 12px;\n border: none;\n background: transparent;\n color: var(--mj-text-secondary);\n font-size: 12px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.15s ease;\n font-family: inherit;\n }\n\n .mode-btn[_ngcontent-%COMP%]:not(:last-child) {\n border-right: 1px solid var(--mj-border-default);\n }\n\n .mode-btn[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-sunken);\n }\n\n .mode-btn.active[_ngcontent-%COMP%] {\n background: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n }\n\n .mode-btn[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 11px;\n }\n\n .action-buttons[_ngcontent-%COMP%] {\n display: flex;\n gap: 6px;\n }\n\n .action-btn[_ngcontent-%COMP%] {\n font-size: 12px;\n }\n\n .editor-body[_ngcontent-%COMP%] {\n flex: 1;\n overflow: auto;\n }\n\n .form-mode[_ngcontent-%COMP%] {\n padding: 16px;\n display: flex;\n flex-direction: column;\n gap: 14px;\n }\n\n .form-field[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 4px;\n flex: 1;\n }\n\n .form-label[_ngcontent-%COMP%] {\n font-size: 11px;\n font-weight: 600;\n color: var(--mj-text-secondary);\n text-transform: uppercase;\n letter-spacing: 0.5px;\n }\n\n .form-input[_ngcontent-%COMP%] {\n padding: 8px 12px;\n border: 1px solid var(--mj-border-strong);\n border-radius: 6px;\n background: var(--mj-bg-surface);\n color: var(--mj-text-primary);\n font-size: 13px;\n font-family: inherit;\n outline: none;\n transition: border-color 0.15s ease;\n }\n\n .form-input[_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 .form-textarea[_ngcontent-%COMP%] {\n padding: 8px 12px;\n border: 1px solid var(--mj-border-strong);\n border-radius: 6px;\n background: var(--mj-bg-surface);\n color: var(--mj-text-primary);\n font-size: 13px;\n font-family: inherit;\n resize: vertical;\n min-height: 60px;\n outline: none;\n transition: border-color 0.15s ease;\n }\n\n .form-textarea[_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 .form-select[_ngcontent-%COMP%] {\n padding: 8px 12px;\n border: 1px solid var(--mj-border-strong);\n border-radius: 6px;\n background: var(--mj-bg-surface);\n color: var(--mj-text-primary);\n font-size: 13px;\n font-family: inherit;\n outline: none;\n cursor: pointer;\n transition: border-color 0.15s ease;\n }\n\n .form-select[_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 .form-row[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 12px;\n }\n\n .json-mode[_ngcontent-%COMP%] {\n height: 100%;\n }\n\n .json-mode[_ngcontent-%COMP%] mj-code-editor[_ngcontent-%COMP%] {\n display: block;\n height: 100%;\n }"] });
227
227
  }
228
228
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SpecEditorComponent, [{
229
229
  type: Component,
@@ -2,8 +2,8 @@ import { Component, Input, Output, EventEmitter } from '@angular/core';
2
2
  import { Validators } from '@angular/forms';
3
3
  import * as i0 from "@angular/core";
4
4
  import * as i1 from "@angular/forms";
5
- import * as i2 from "@progress/kendo-angular-dialog";
6
- import * as i3 from "@progress/kendo-angular-buttons";
5
+ import * as i2 from "@progress/kendo-angular-buttons";
6
+ import * as i3 from "@progress/kendo-angular-dialog";
7
7
  const _forTrack0 = ($index, $item) => $item.value;
8
8
  function NewComponentDialogComponent_Conditional_0_For_16_Template(rf, ctx) { if (rf & 1) {
9
9
  const _r3 = i0.ɵɵgetCurrentView();
@@ -145,7 +145,7 @@ export class NewComponentDialogComponent {
145
145
  i0.ɵɵconditionalCreate(0, NewComponentDialogComponent_Conditional_0_Template, 35, 6, "kendo-dialog", 0);
146
146
  } if (rf & 2) {
147
147
  i0.ɵɵconditional(ctx.Visible ? 0 : -1);
148
- } }, dependencies: [i1.ɵNgNoValidate, i1.DefaultValueAccessor, i1.NgControlStatus, i1.NgControlStatusGroup, i1.FormGroupDirective, i1.FormControlName, i2.DialogComponent, i2.DialogActionsComponent, i3.ButtonComponent], styles: ["\n\n.dialog-form[_ngcontent-%COMP%] {\n padding: 16px 8px;\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n\n\n.form-field[_ngcontent-%COMP%] {\n margin-bottom: 16px;\n}\n\n\n\n.form-label[_ngcontent-%COMP%] {\n display: block;\n font-size: 12px;\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.form-label[_ngcontent-%COMP%] .required[_ngcontent-%COMP%] {\n color: var(--mj-status-error);\n margin-left: 2px;\n}\n\n\n\n.form-input[_ngcontent-%COMP%] {\n width: 100%;\n padding: 10px 12px;\n font-size: 14px;\n font-family: inherit;\n color: var(--mj-text-primary);\n background: var(--mj-bg-surface);\n border: 1px solid var(--mj-border-strong);\n border-radius: 6px;\n outline: none;\n transition: border-color 0.2s ease, box-shadow 0.2s ease;\n box-sizing: border-box;\n}\n\n.form-input[_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.form-input[_ngcontent-%COMP%]::placeholder {\n color: var(--mj-text-secondary);\n opacity: 0.6;\n}\n\n\n\n.form-textarea[_ngcontent-%COMP%] {\n width: 100%;\n padding: 10px 12px;\n font-size: 14px;\n font-family: inherit;\n color: var(--mj-text-primary);\n background: var(--mj-bg-surface);\n border: 1px solid var(--mj-border-strong);\n border-radius: 6px;\n outline: none;\n transition: border-color 0.2s ease, box-shadow 0.2s ease;\n box-sizing: border-box;\n resize: vertical;\n min-height: 72px;\n}\n\n.form-textarea[_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.form-textarea[_ngcontent-%COMP%]::placeholder {\n color: var(--mj-text-secondary);\n opacity: 0.6;\n}\n\n\n\n.form-hint[_ngcontent-%COMP%] {\n display: block;\n font-size: 11px;\n color: var(--mj-text-secondary);\n margin-top: 4px;\n opacity: 0.7;\n}\n\n\n\n.type-options[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 10px;\n}\n\n\n\n.type-card[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: 14px 10px 12px;\n border: 1.5px solid var(--mj-border-default);\n border-radius: 10px;\n background: var(--mj-bg-surface);\n cursor: pointer;\n transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;\n text-align: center;\n user-select: none;\n}\n\n.type-card[_ngcontent-%COMP%]:hover {\n border-color: var(--mj-brand-primary);\n background: var(--mj-bg-surface-sunken);\n}\n\n.type-card.selected[_ngcontent-%COMP%] {\n border-color: var(--mj-brand-primary);\n background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n box-shadow: 0 0 0 2px color-mix(in srgb, var(--mj-brand-primary) 20%, transparent);\n}\n\n\n\n.type-card-icon[_ngcontent-%COMP%] {\n font-size: 22px;\n color: var(--mj-text-secondary);\n margin-bottom: 6px;\n transition: color 0.2s ease;\n}\n\n.type-card.selected[_ngcontent-%COMP%] .type-card-icon[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n}\n\n\n\n.type-card-label[_ngcontent-%COMP%] {\n font-size: 13px;\n font-weight: 600;\n color: var(--mj-text-primary);\n margin-bottom: 2px;\n}\n\n.type-card.selected[_ngcontent-%COMP%] .type-card-label[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n}\n\n\n\n.type-card-description[_ngcontent-%COMP%] {\n font-size: 11px;\n color: var(--mj-text-secondary);\n line-height: 1.3;\n}\n\n.type-card.selected[_ngcontent-%COMP%] .type-card-description[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n opacity: 0.8;\n}"] });
148
+ } }, dependencies: [i1.ɵNgNoValidate, i1.DefaultValueAccessor, i1.NgControlStatus, i1.NgControlStatusGroup, i1.FormGroupDirective, i1.FormControlName, i2.ButtonComponent, i3.DialogComponent, i3.DialogActionsComponent], styles: ["\n\n.dialog-form[_ngcontent-%COMP%] {\n padding: 16px 8px;\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n\n\n.form-field[_ngcontent-%COMP%] {\n margin-bottom: 16px;\n}\n\n\n\n.form-label[_ngcontent-%COMP%] {\n display: block;\n font-size: 12px;\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.form-label[_ngcontent-%COMP%] .required[_ngcontent-%COMP%] {\n color: var(--mj-status-error);\n margin-left: 2px;\n}\n\n\n\n.form-input[_ngcontent-%COMP%] {\n width: 100%;\n padding: 10px 12px;\n font-size: 14px;\n font-family: inherit;\n color: var(--mj-text-primary);\n background: var(--mj-bg-surface);\n border: 1px solid var(--mj-border-strong);\n border-radius: 6px;\n outline: none;\n transition: border-color 0.2s ease, box-shadow 0.2s ease;\n box-sizing: border-box;\n}\n\n.form-input[_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.form-input[_ngcontent-%COMP%]::placeholder {\n color: var(--mj-text-secondary);\n opacity: 0.6;\n}\n\n\n\n.form-textarea[_ngcontent-%COMP%] {\n width: 100%;\n padding: 10px 12px;\n font-size: 14px;\n font-family: inherit;\n color: var(--mj-text-primary);\n background: var(--mj-bg-surface);\n border: 1px solid var(--mj-border-strong);\n border-radius: 6px;\n outline: none;\n transition: border-color 0.2s ease, box-shadow 0.2s ease;\n box-sizing: border-box;\n resize: vertical;\n min-height: 72px;\n}\n\n.form-textarea[_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.form-textarea[_ngcontent-%COMP%]::placeholder {\n color: var(--mj-text-secondary);\n opacity: 0.6;\n}\n\n\n\n.form-hint[_ngcontent-%COMP%] {\n display: block;\n font-size: 11px;\n color: var(--mj-text-secondary);\n margin-top: 4px;\n opacity: 0.7;\n}\n\n\n\n.type-options[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 10px;\n}\n\n\n\n.type-card[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: 14px 10px 12px;\n border: 1.5px solid var(--mj-border-default);\n border-radius: 10px;\n background: var(--mj-bg-surface);\n cursor: pointer;\n transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;\n text-align: center;\n user-select: none;\n}\n\n.type-card[_ngcontent-%COMP%]:hover {\n border-color: var(--mj-brand-primary);\n background: var(--mj-bg-surface-sunken);\n}\n\n.type-card.selected[_ngcontent-%COMP%] {\n border-color: var(--mj-brand-primary);\n background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n box-shadow: 0 0 0 2px color-mix(in srgb, var(--mj-brand-primary) 20%, transparent);\n}\n\n\n\n.type-card-icon[_ngcontent-%COMP%] {\n font-size: 22px;\n color: var(--mj-text-secondary);\n margin-bottom: 6px;\n transition: color 0.2s ease;\n}\n\n.type-card.selected[_ngcontent-%COMP%] .type-card-icon[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n}\n\n\n\n.type-card-label[_ngcontent-%COMP%] {\n font-size: 13px;\n font-weight: 600;\n color: var(--mj-text-primary);\n margin-bottom: 2px;\n}\n\n.type-card.selected[_ngcontent-%COMP%] .type-card-label[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n}\n\n\n\n.type-card-description[_ngcontent-%COMP%] {\n font-size: 11px;\n color: var(--mj-text-secondary);\n line-height: 1.3;\n}\n\n.type-card.selected[_ngcontent-%COMP%] .type-card-description[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n opacity: 0.8;\n}"] });
149
149
  }
150
150
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(NewComponentDialogComponent, [{
151
151
  type: Component,
@@ -1,9 +1,9 @@
1
1
  import { Component, Input, Output, EventEmitter } from '@angular/core';
2
2
  import * as i0 from "@angular/core";
3
3
  import * as i1 from "@angular/forms";
4
- import * as i2 from "@progress/kendo-angular-inputs";
5
- import * as i3 from "@progress/kendo-angular-dialog";
6
- import * as i4 from "@progress/kendo-angular-buttons";
4
+ import * as i2 from "@progress/kendo-angular-buttons";
5
+ import * as i3 from "@progress/kendo-angular-inputs";
6
+ import * as i4 from "@progress/kendo-angular-dialog";
7
7
  function SaveVersionDialogComponent_Conditional_0_Conditional_3_Template(rf, ctx) { if (rf & 1) {
8
8
  i0.ɵɵelementStart(0, "span", 4);
9
9
  i0.ɵɵtext(1);
@@ -118,7 +118,7 @@ export class SaveVersionDialogComponent {
118
118
  i0.ɵɵconditionalCreate(0, SaveVersionDialogComponent_Conditional_0_Template, 16, 7, "kendo-dialog", 0);
119
119
  } if (rf & 2) {
120
120
  i0.ɵɵconditional(ctx.Visible ? 0 : -1);
121
- } }, dependencies: [i1.DefaultValueAccessor, i1.RadioControlValueAccessor, i1.NgControlStatus, i1.NgModel, i2.TextBoxDirective, i3.DialogComponent, i3.DialogActionsComponent, i4.ButtonComponent], styles: [".dialog-body[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 16px;\n padding: 4px 0;\n }\n\n .version-context[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n }\n\n .version-badge[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n padding: 3px 10px;\n border-radius: 12px;\n font-size: 12px;\n font-weight: 600;\n background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n color: var(--mj-brand-primary);\n }\n\n .new-badge[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n color: var(--mj-brand-primary);\n }\n\n .form-field[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 6px;\n }\n\n .field-label[_ngcontent-%COMP%] {\n font-size: 13px;\n font-weight: 500;\n color: var(--mj-text-primary);\n }\n\n .comment-input[_ngcontent-%COMP%] {\n width: 100%;\n }\n\n .save-mode[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 8px;\n }\n\n .radio-option[_ngcontent-%COMP%] {\n display: flex;\n align-items: flex-start;\n gap: 10px;\n padding: 10px 12px;\n border: 1px solid var(--mj-border-default);\n border-radius: 8px;\n cursor: pointer;\n transition: all 0.15s ease;\n }\n\n .radio-option[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-sunken);\n }\n\n .radio-option.selected[_ngcontent-%COMP%] {\n border-color: var(--mj-brand-primary);\n background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n }\n\n .radio-option[_ngcontent-%COMP%] input[type=\"radio\"][_ngcontent-%COMP%] {\n margin-top: 2px;\n accent-color: var(--mj-brand-primary);\n }\n\n .radio-content[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 2px;\n }\n\n .radio-label[_ngcontent-%COMP%] {\n font-size: 13px;\n font-weight: 500;\n color: var(--mj-text-primary);\n }\n\n .radio-desc[_ngcontent-%COMP%] {\n font-size: 11px;\n color: var(--mj-text-secondary);\n }"] });
121
+ } }, dependencies: [i1.DefaultValueAccessor, i1.RadioControlValueAccessor, i1.NgControlStatus, i1.NgModel, i2.ButtonComponent, i3.TextBoxDirective, i4.DialogComponent, i4.DialogActionsComponent], styles: [".dialog-body[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 16px;\n padding: 4px 0;\n }\n\n .version-context[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n }\n\n .version-badge[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n padding: 3px 10px;\n border-radius: 12px;\n font-size: 12px;\n font-weight: 600;\n background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n color: var(--mj-brand-primary);\n }\n\n .new-badge[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n color: var(--mj-brand-primary);\n }\n\n .form-field[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 6px;\n }\n\n .field-label[_ngcontent-%COMP%] {\n font-size: 13px;\n font-weight: 500;\n color: var(--mj-text-primary);\n }\n\n .comment-input[_ngcontent-%COMP%] {\n width: 100%;\n }\n\n .save-mode[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 8px;\n }\n\n .radio-option[_ngcontent-%COMP%] {\n display: flex;\n align-items: flex-start;\n gap: 10px;\n padding: 10px 12px;\n border: 1px solid var(--mj-border-default);\n border-radius: 8px;\n cursor: pointer;\n transition: all 0.15s ease;\n }\n\n .radio-option[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-sunken);\n }\n\n .radio-option.selected[_ngcontent-%COMP%] {\n border-color: var(--mj-brand-primary);\n background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n }\n\n .radio-option[_ngcontent-%COMP%] input[type=\"radio\"][_ngcontent-%COMP%] {\n margin-top: 2px;\n accent-color: var(--mj-brand-primary);\n }\n\n .radio-content[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 2px;\n }\n\n .radio-label[_ngcontent-%COMP%] {\n font-size: 13px;\n font-weight: 500;\n color: var(--mj-text-primary);\n }\n\n .radio-desc[_ngcontent-%COMP%] {\n font-size: 11px;\n color: var(--mj-text-secondary);\n }"] });
122
122
  }
123
123
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SaveVersionDialogComponent, [{
124
124
  type: Component,
@@ -1,8 +1,8 @@
1
1
  import { Component, EventEmitter, Output } from '@angular/core';
2
2
  import * as i0 from "@angular/core";
3
3
  import * as i1 from "@angular/forms";
4
- import * as i2 from "@memberjunction/ng-code-editor";
5
- import * as i3 from "@progress/kendo-angular-buttons";
4
+ import * as i2 from "@progress/kendo-angular-buttons";
5
+ import * as i3 from "@memberjunction/ng-code-editor";
6
6
  function TextImportDialogComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
7
7
  i0.ɵɵelementStart(0, "div", 4);
8
8
  i0.ɵɵelement(1, "i", 9);
@@ -72,7 +72,7 @@ export class TextImportDialogComponent {
72
72
  i0.ɵɵproperty("themeColor", "base");
73
73
  i0.ɵɵadvance(2);
74
74
  i0.ɵɵproperty("themeColor", "primary")("disabled", !ctx.componentJson);
75
- } }, dependencies: [i1.NgControlStatus, i1.NgModel, i2.CodeEditorComponent, i3.ButtonComponent], styles: [".text-import-dialog-content[_ngcontent-%COMP%] {\n padding: 20px;\n display: flex;\n flex-direction: column;\n height: 100%;\n }\n\n .dialog-header[_ngcontent-%COMP%] {\n margin-bottom: 15px;\n }\n\n .dialog-header[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] {\n margin: 0 0 10px 0;\n color: var(--mj-text-primary);\n }\n\n .dialog-header[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n margin: 0;\n color: var(--mj-text-secondary);\n font-size: 14px;\n }\n\n .editor-container[_ngcontent-%COMP%] {\n flex: 1;\n border: 1px solid var(--mj-border-default);\n border-radius: 4px;\n overflow: hidden;\n margin-bottom: 15px;\n }\n\n .error-message[_ngcontent-%COMP%] {\n background-color: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n border: 1px solid var(--mj-status-error);\n color: var(--mj-status-error);\n padding: 10px;\n border-radius: 4px;\n margin-bottom: 15px;\n font-size: 14px;\n }\n\n .error-message[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n margin-right: 8px;\n }\n\n .dialog-actions[_ngcontent-%COMP%] {\n display: flex;\n justify-content: flex-end;\n gap: 10px;\n padding-top: 15px;\n border-top: 1px solid var(--mj-border-default);\n }"] });
75
+ } }, dependencies: [i1.NgControlStatus, i1.NgModel, i2.ButtonComponent, i3.CodeEditorComponent], styles: [".text-import-dialog-content[_ngcontent-%COMP%] {\n padding: 20px;\n display: flex;\n flex-direction: column;\n height: 100%;\n }\n\n .dialog-header[_ngcontent-%COMP%] {\n margin-bottom: 15px;\n }\n\n .dialog-header[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] {\n margin: 0 0 10px 0;\n color: var(--mj-text-primary);\n }\n\n .dialog-header[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n margin: 0;\n color: var(--mj-text-secondary);\n font-size: 14px;\n }\n\n .editor-container[_ngcontent-%COMP%] {\n flex: 1;\n border: 1px solid var(--mj-border-default);\n border-radius: 4px;\n overflow: hidden;\n margin-bottom: 15px;\n }\n\n .error-message[_ngcontent-%COMP%] {\n background-color: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n border: 1px solid var(--mj-status-error);\n color: var(--mj-status-error);\n padding: 10px;\n border-radius: 4px;\n margin-bottom: 15px;\n font-size: 14px;\n }\n\n .error-message[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n margin-right: 8px;\n }\n\n .dialog-actions[_ngcontent-%COMP%] {\n display: flex;\n justify-content: flex-end;\n gap: 10px;\n padding-top: 15px;\n border-top: 1px solid var(--mj-border-default);\n }"] });
76
76
  }
77
77
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TextImportDialogComponent, [{
78
78
  type: Component,