@memberjunction/ng-dashboards 5.22.0 → 5.23.0

package/dist/ComponentStudio/components/editors/requirements-editor.component.js

@@ -3,9 +3,9 @@ import * as i0 from "@angular/core";
 import * as i1 from "../../services/component-studio-state.service";
 import * as i2 from "@angular/common";
 import * as i3 from "@angular/forms";
-import * as i4 from "@progress/kendo-angular-buttons";
-import * as i5 from "@memberjunction/ng-code-editor";
-import * as i6 from "@memberjunction/ng-markdown";
+import * as i4 from "@memberjunction/ng-code-editor";
+import * as i5 from "@memberjunction/ng-markdown";
+import * as i6 from "@memberjunction/ng-ui-components";
 function RequirementsEditorComponent_Conditional_6_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 5)(1, "button", 12);
@@ -13,31 +13,26 @@ function RequirementsEditorComponent_Conditional_6_Template(rf, ctx) { if (rf &
     i0.ɵɵelement(2, "i", 13);
     i0.ɵɵtext(3, " Apply ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "button", 12);
+    i0.ɵɵelementStart(4, "button", 14);
     i0.ɵɵlistener("click", function RequirementsEditorComponent_Conditional_6_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.CancelChanges()); });
     i0.ɵɵtext(5, " Cancel ");
     i0.ɵɵelementEnd()();
-} if (rf & 2) {
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("themeColor", "primary");
-    i0.ɵɵadvance(3);
-    i0.ɵɵproperty("themeColor", "base");
 } }
 function RequirementsEditorComponent_Conditional_15_Conditional_0_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mj-markdown", 16);
+    i0.ɵɵelement(0, "mj-markdown", 17);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵproperty("data", ctx_r1.EditableContent)("enableCodeCopy", true);
 } }
 function RequirementsEditorComponent_Conditional_15_Conditional_0_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 17);
-    i0.ɵɵelement(1, "i", 18);
+    i0.ɵɵelementStart(0, "div", 18);
+    i0.ɵɵelement(1, "i", 19);
     i0.ɵɵelementStart(2, "p");
     i0.ɵɵtext(3);
     i0.ɵɵpipe(4, "lowercase");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "button", 19);
+    i0.ɵɵelementStart(5, "button", 20);
     i0.ɵɵlistener("click", function RequirementsEditorComponent_Conditional_15_Conditional_0_Conditional_2_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.SetViewMode("edit")); });
     i0.ɵɵelement(6, "i", 9);
     i0.ɵɵtext(7, " Start writing ");
@@ -48,8 +43,8 @@ function RequirementsEditorComponent_Conditional_15_Conditional_0_Conditional_2_
     i0.ɵɵtextInterpolate1("No ", i0.ɵɵpipeBind1(4, 1, ctx_r1.Title), " defined yet.");
 } }
 function RequirementsEditorComponent_Conditional_15_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 14);
-    i0.ɵɵconditionalCreate(1, RequirementsEditorComponent_Conditional_15_Conditional_0_Conditional_1_Template, 1, 2, "mj-markdown", 16)(2, RequirementsEditorComponent_Conditional_15_Conditional_0_Conditional_2_Template, 8, 3, "div", 17);
+    i0.ɵɵelementStart(0, "div", 15);
+    i0.ɵɵconditionalCreate(1, RequirementsEditorComponent_Conditional_15_Conditional_0_Conditional_1_Template, 1, 2, "mj-markdown", 17)(2, RequirementsEditorComponent_Conditional_15_Conditional_0_Conditional_2_Template, 8, 3, "div", 18);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -58,7 +53,7 @@ function RequirementsEditorComponent_Conditional_15_Conditional_0_Template(rf, c
 } }
 function RequirementsEditorComponent_Conditional_15_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 15)(1, "mj-code-editor", 20);
+    i0.ɵɵelementStart(0, "div", 16)(1, "mj-code-editor", 21);
     i0.ɵɵtwoWayListener("ngModelChange", function RequirementsEditorComponent_Conditional_15_Conditional_1_Template_mj_code_editor_ngModelChange_1_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.EditableContent, $event) || (ctx_r1.EditableContent = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵlistener("ngModelChange", function RequirementsEditorComponent_Conditional_15_Conditional_1_Template_mj_code_editor_ngModelChange_1_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnContentChanged()); });
     i0.ɵɵelementEnd()();
@@ -69,14 +64,14 @@ function RequirementsEditorComponent_Conditional_15_Conditional_1_Template(rf, c
     i0.ɵɵproperty("language", "markdown")("indentWithTab", true)("placeholder", "Enter " + ctx_r1.Title + " in markdown format...");
 } }
 function RequirementsEditorComponent_Conditional_15_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, RequirementsEditorComponent_Conditional_15_Conditional_0_Template, 3, 1, "div", 14)(1, RequirementsEditorComponent_Conditional_15_Conditional_1_Template, 2, 4, "div", 15);
+    i0.ɵɵconditionalCreate(0, RequirementsEditorComponent_Conditional_15_Conditional_0_Template, 3, 1, "div", 15)(1, RequirementsEditorComponent_Conditional_15_Conditional_1_Template, 2, 4, "div", 16);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵconditional(ctx_r1.ViewMode === "preview" ? 0 : 1);
 } }
 function RequirementsEditorComponent_Conditional_16_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 11);
-    i0.ɵɵelement(1, "i", 18);
+    i0.ɵɵelement(1, "i", 19);
     i0.ɵɵelementStart(2, "p");
     i0.ɵɵtext(3);
     i0.ɵɵpipe(4, "lowercase");
@@ -152,13 +147,13 @@ export class RequirementsEditorComponent {
         }
     }
     static ɵfac = function RequirementsEditorComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || RequirementsEditorComponent)(i0.ɵɵdirectiveInject(i1.ComponentStudioStateService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: RequirementsEditorComponent, selectors: [["mj-requirements-editor"]], inputs: { Field: "Field", Title: "Title" }, standalone: false, decls: 17, vars: 8, consts: [[1, "requirements-editor"], [1, "editor-header"], [1, "header-title"], [1, "fa-solid", 3, "ngClass"], [1, "header-right"], [1, "action-buttons"], [1, "mode-toggle"], [1, "mode-btn", 3, "click"], [1, "fa-solid", "fa-eye"], [1, "fa-solid", "fa-pencil"], [1, "editor-body"], [1, "empty-state"], ["kendoButton", "", 1, "action-btn", 3, "click", "themeColor"], [1, "fa-solid", "fa-check"], [1, "preview-container"], [1, "code-editor-container"], [3, "data", "enableCodeCopy"], [1, "empty-preview"], [1, "fa-solid", "fa-file-lines"], [1, "edit-link", 3, "click"], [3, "ngModelChange", "ngModel", "language", "indentWithTab", "placeholder"]], template: function RequirementsEditorComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: RequirementsEditorComponent, selectors: [["mj-requirements-editor"]], inputs: { Field: "Field", Title: "Title" }, standalone: false, decls: 17, vars: 8, consts: [[1, "requirements-editor"], [1, "editor-header"], [1, "header-title"], [1, "fa-solid", 3, "ngClass"], [1, "header-right"], [1, "action-buttons"], [1, "mode-toggle"], [1, "mode-btn", 3, "click"], [1, "fa-solid", "fa-eye"], [1, "fa-solid", "fa-pencil"], [1, "editor-body"], [1, "empty-state"], ["mjButton", "", "variant", "primary", 1, "action-btn", 3, "click"], [1, "fa-solid", "fa-check"], ["mjButton", "", 1, "action-btn", 3, "click"], [1, "preview-container"], [1, "code-editor-container"], [3, "data", "enableCodeCopy"], [1, "empty-preview"], [1, "fa-solid", "fa-file-lines"], [1, "edit-link", 3, "click"], [3, "ngModelChange", "ngModel", "language", "indentWithTab", "placeholder"]], template: function RequirementsEditorComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "span", 2);
             i0.ɵɵelement(3, "i", 3);
             i0.ɵɵtext(4);
             i0.ɵɵelementEnd();
             i0.ɵɵelementStart(5, "div", 4);
-            i0.ɵɵconditionalCreate(6, RequirementsEditorComponent_Conditional_6_Template, 6, 2, "div", 5);
+            i0.ɵɵconditionalCreate(6, RequirementsEditorComponent_Conditional_6_Template, 6, 0, "div", 5);
             i0.ɵɵelementStart(7, "div", 6)(8, "button", 7);
             i0.ɵɵlistener("click", function RequirementsEditorComponent_Template_button_click_8_listener() { return ctx.SetViewMode("preview"); });
             i0.ɵɵelement(9, "i", 8);
@@ -185,7 +180,7 @@ export class RequirementsEditorComponent {
             i0.ɵɵclassProp("active", ctx.ViewMode === "edit");
             i0.ɵɵadvance(4);
             i0.ɵɵconditional(ctx.State.SelectedComponent ? 15 : 16);
-        } }, 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    }"] });
+        } }, dependencies: [i2.NgClass, i3.NgControlStatus, i3.NgModel, i4.CodeEditorComponent, i5.MarkdownComponent, i6.MJButtonDirective, 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    }"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(RequirementsEditorComponent, [{
         type: Component,
@@ -199,10 +194,10 @@ export class RequirementsEditorComponent {
         <div class="header-right">
           @if (IsEditing) {
             <div class="action-buttons">
-              <button kendoButton [themeColor]="'primary'" (click)="ApplyChanges()" class="action-btn">
+              <button mjButton variant="primary" (click)="ApplyChanges()" class="action-btn">
                 <i class="fa-solid fa-check"></i> Apply
               </button>
-              <button kendoButton [themeColor]="'base'" (click)="CancelChanges()" class="action-btn">
+              <button mjButton (click)="CancelChanges()" class="action-btn">
                 Cancel
               </button>
             </div>

package/dist/ComponentStudio/components/editors/requirements-editor.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"requirements-editor.component.js","sourceRoot":"","sources":["../../../../src/ComponentStudio/components/editors/requirements-editor.component.ts"],"names":[],"mappings":"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","sourcesContent":["import { Component, Input, OnInit, OnDestroy, ChangeDetectorRef } from '@angular/core';\nimport { Subscription } from 'rxjs';\nimport { ComponentStudioStateService } from '../../services/component-studio-state.service';\nimport { ComponentSpec } from '@memberjunction/interactive-component-types';\n\ntype RequirementsField = 'functionalRequirements' | 'technicalDesign';\ntype EditorMode = 'preview' | 'edit';\n\n@Component({\n  standalone: false,\n  selector: 'mj-requirements-editor',\n  template: `\n    <div class=\"requirements-editor\">\n      <div class=\"editor-header\">\n        <span class=\"header-title\">\n          <i class=\"fa-solid\" [ngClass]=\"FieldIcon\"></i>\n          {{ Title }}\n        </span>\n        <div class=\"header-right\">\n          @if (IsEditing) {\n            <div class=\"action-buttons\">\n              <button kendoButton [themeColor]=\"'primary'\" (click)=\"ApplyChanges()\" class=\"action-btn\">\n                <i class=\"fa-solid fa-check\"></i> Apply\n              </button>\n              <button kendoButton [themeColor]=\"'base'\" (click)=\"CancelChanges()\" class=\"action-btn\">\n                Cancel\n              </button>\n            </div>\n          }\n          <div class=\"mode-toggle\">\n            <button class=\"mode-btn\" [class.active]=\"ViewMode === 'preview'\" (click)=\"SetViewMode('preview')\">\n              <i class=\"fa-solid fa-eye\"></i> Preview\n            </button>\n            <button class=\"mode-btn\" [class.active]=\"ViewMode === 'edit'\" (click)=\"SetViewMode('edit')\">\n              <i class=\"fa-solid fa-pencil\"></i> Edit\n            </button>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"editor-body\">\n        @if (State.SelectedComponent) {\n          @if (ViewMode === 'preview') {\n            <div class=\"preview-container\">\n              @if (EditableContent) {\n                <mj-markdown [data]=\"EditableContent\" [enableCodeCopy]=\"true\"></mj-markdown>\n              } @else {\n                <div class=\"empty-preview\">\n                  <i class=\"fa-solid fa-file-lines\"></i>\n                  <p>No {{ Title | lowercase }} defined yet.</p>\n                  <button class=\"edit-link\" (click)=\"SetViewMode('edit')\">\n                    <i class=\"fa-solid fa-pencil\"></i> Start writing\n                  </button>\n                </div>\n              }\n            </div>\n          } @else {\n            <div class=\"code-editor-container\">\n              <mj-code-editor\n                [(ngModel)]=\"EditableContent\"\n                [language]=\"'markdown'\"\n                [indentWithTab]=\"true\"\n                [placeholder]=\"'Enter ' + Title + ' in markdown format...'\"\n                (ngModelChange)=\"OnContentChanged()\">\n              </mj-code-editor>\n            </div>\n          }\n        } @else {\n          <div class=\"empty-state\">\n            <i class=\"fa-solid fa-file-lines\"></i>\n            <p>Select a component to view its {{ Title | lowercase }}.</p>\n          </div>\n        }\n      </div>\n    </div>\n  `,\n  styles: [`\n    .requirements-editor {\n      display: flex;\n      flex-direction: column;\n      height: 100%;\n    }\n\n    .editor-header {\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 {\n      font-weight: 600;\n      font-size: 13px;\n      color: var(--mj-text-primary);\n      white-space: nowrap;\n    }\n\n    .header-title i {\n      margin-right: 6px;\n      color: var(--mj-brand-primary);\n    }\n\n    .header-right {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .action-buttons {\n      display: flex;\n      gap: 6px;\n    }\n\n    .action-btn {\n      font-size: 12px;\n    }\n\n    .mode-toggle {\n      display: inline-flex;\n      border: 1px solid var(--mj-border-default);\n      border-radius: 8px;\n      overflow: hidden;\n    }\n\n    .mode-btn {\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:not(:last-child) {\n      border-right: 1px solid var(--mj-border-default);\n    }\n\n    .mode-btn:hover {\n      background: var(--mj-bg-surface-sunken);\n    }\n\n    .mode-btn.active {\n      background: var(--mj-brand-primary);\n      color: var(--mj-text-inverse);\n    }\n\n    .mode-btn i {\n      font-size: 10px;\n    }\n\n    .editor-body {\n      flex: 1;\n      overflow: hidden;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .preview-container {\n      flex: 1;\n      overflow: auto;\n      padding: 16px 20px;\n    }\n\n    .code-editor-container {\n      flex: 1;\n      overflow: hidden;\n    }\n\n    .code-editor-container mj-code-editor {\n      display: block;\n      height: 100%;\n    }\n\n    .empty-preview {\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 i {\n      font-size: 32px;\n      margin-bottom: 12px;\n      opacity: 0.4;\n    }\n\n    .empty-preview p {\n      margin: 0 0 12px;\n      font-size: 13px;\n    }\n\n    .edit-link {\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:hover {\n      background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n    }\n\n    .empty-state {\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 i {\n      font-size: 32px;\n      margin-bottom: 12px;\n      opacity: 0.4;\n    }\n\n    .empty-state p {\n      margin: 0;\n      font-size: 13px;\n      text-align: center;\n    }\n  `]\n})\nexport class RequirementsEditorComponent implements OnInit, OnDestroy {\n  @Input() Field: RequirementsField = 'functionalRequirements';\n  @Input() Title: string = 'Functional Requirements';\n\n  EditableContent: string = '';\n  IsEditing: boolean = false;\n  ViewMode: EditorMode = 'preview';\n\n  private stateChangedSub: Subscription | null = null;\n\n  constructor(\n    public State: ComponentStudioStateService,\n    private cdr: ChangeDetectorRef\n  ) {}\n\n  get FieldIcon(): string {\n    return this.Field === 'functionalRequirements' ? 'fa-clipboard-list' : 'fa-drafting-compass';\n  }\n\n  ngOnInit(): void {\n    this.loadContent();\n    this.stateChangedSub = this.State.StateChanged.subscribe(() => {\n      if (!this.IsEditing) {\n        this.loadContent();\n      }\n      this.cdr.detectChanges();\n    });\n  }\n\n  ngOnDestroy(): void {\n    if (this.stateChangedSub) {\n      this.stateChangedSub.unsubscribe();\n      this.stateChangedSub = null;\n    }\n  }\n\n  SetViewMode(mode: EditorMode): void {\n    this.ViewMode = mode;\n    this.cdr.detectChanges();\n  }\n\n  OnContentChanged(): void {\n    this.IsEditing = true;\n  }\n\n  ApplyChanges(): void {\n    try {\n      const spec: ComponentSpec = JSON.parse(this.State.EditableSpec);\n      spec[this.Field] = this.EditableContent;\n      this.State.UpdateSpec(spec);\n      this.IsEditing = false;\n      this.ViewMode = 'preview';\n    } catch (error) {\n      console.error('Error applying requirements changes:', error);\n    }\n  }\n\n  CancelChanges(): void {\n    this.loadContent();\n    this.IsEditing = false;\n    this.ViewMode = 'preview';\n    this.cdr.detectChanges();\n  }\n\n  private loadContent(): void {\n    try {\n      const spec = JSON.parse(this.State.EditableSpec);\n      this.EditableContent = spec[this.Field] || '';\n    } catch {\n      this.EditableContent = '';\n    }\n  }\n}\n"]}
+{"version":3,"file":"requirements-editor.component.js","sourceRoot":"","sources":["../../../../src/ComponentStudio/components/editors/requirements-editor.component.ts"],"names":[],"mappings":"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","sourcesContent":["import { Component, Input, OnInit, OnDestroy, ChangeDetectorRef } from '@angular/core';\nimport { Subscription } from 'rxjs';\nimport { ComponentStudioStateService } from '../../services/component-studio-state.service';\nimport { ComponentSpec } from '@memberjunction/interactive-component-types';\n\ntype RequirementsField = 'functionalRequirements' | 'technicalDesign';\ntype EditorMode = 'preview' | 'edit';\n\n@Component({\n  standalone: false,\n  selector: 'mj-requirements-editor',\n  template: `\n    <div class=\"requirements-editor\">\n      <div class=\"editor-header\">\n        <span class=\"header-title\">\n          <i class=\"fa-solid\" [ngClass]=\"FieldIcon\"></i>\n          {{ Title }}\n        </span>\n        <div class=\"header-right\">\n          @if (IsEditing) {\n            <div class=\"action-buttons\">\n              <button mjButton variant=\"primary\" (click)=\"ApplyChanges()\" class=\"action-btn\">\n                <i class=\"fa-solid fa-check\"></i> Apply\n              </button>\n              <button mjButton (click)=\"CancelChanges()\" class=\"action-btn\">\n                Cancel\n              </button>\n            </div>\n          }\n          <div class=\"mode-toggle\">\n            <button class=\"mode-btn\" [class.active]=\"ViewMode === 'preview'\" (click)=\"SetViewMode('preview')\">\n              <i class=\"fa-solid fa-eye\"></i> Preview\n            </button>\n            <button class=\"mode-btn\" [class.active]=\"ViewMode === 'edit'\" (click)=\"SetViewMode('edit')\">\n              <i class=\"fa-solid fa-pencil\"></i> Edit\n            </button>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"editor-body\">\n        @if (State.SelectedComponent) {\n          @if (ViewMode === 'preview') {\n            <div class=\"preview-container\">\n              @if (EditableContent) {\n                <mj-markdown [data]=\"EditableContent\" [enableCodeCopy]=\"true\"></mj-markdown>\n              } @else {\n                <div class=\"empty-preview\">\n                  <i class=\"fa-solid fa-file-lines\"></i>\n                  <p>No {{ Title | lowercase }} defined yet.</p>\n                  <button class=\"edit-link\" (click)=\"SetViewMode('edit')\">\n                    <i class=\"fa-solid fa-pencil\"></i> Start writing\n                  </button>\n                </div>\n              }\n            </div>\n          } @else {\n            <div class=\"code-editor-container\">\n              <mj-code-editor\n                [(ngModel)]=\"EditableContent\"\n                [language]=\"'markdown'\"\n                [indentWithTab]=\"true\"\n                [placeholder]=\"'Enter ' + Title + ' in markdown format...'\"\n                (ngModelChange)=\"OnContentChanged()\">\n              </mj-code-editor>\n            </div>\n          }\n        } @else {\n          <div class=\"empty-state\">\n            <i class=\"fa-solid fa-file-lines\"></i>\n            <p>Select a component to view its {{ Title | lowercase }}.</p>\n          </div>\n        }\n      </div>\n    </div>\n  `,\n  styles: [`\n    .requirements-editor {\n      display: flex;\n      flex-direction: column;\n      height: 100%;\n    }\n\n    .editor-header {\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 {\n      font-weight: 600;\n      font-size: 13px;\n      color: var(--mj-text-primary);\n      white-space: nowrap;\n    }\n\n    .header-title i {\n      margin-right: 6px;\n      color: var(--mj-brand-primary);\n    }\n\n    .header-right {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .action-buttons {\n      display: flex;\n      gap: 6px;\n    }\n\n    .action-btn {\n      font-size: 12px;\n    }\n\n    .mode-toggle {\n      display: inline-flex;\n      border: 1px solid var(--mj-border-default);\n      border-radius: 8px;\n      overflow: hidden;\n    }\n\n    .mode-btn {\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:not(:last-child) {\n      border-right: 1px solid var(--mj-border-default);\n    }\n\n    .mode-btn:hover {\n      background: var(--mj-bg-surface-sunken);\n    }\n\n    .mode-btn.active {\n      background: var(--mj-brand-primary);\n      color: var(--mj-text-inverse);\n    }\n\n    .mode-btn i {\n      font-size: 10px;\n    }\n\n    .editor-body {\n      flex: 1;\n      overflow: hidden;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .preview-container {\n      flex: 1;\n      overflow: auto;\n      padding: 16px 20px;\n    }\n\n    .code-editor-container {\n      flex: 1;\n      overflow: hidden;\n    }\n\n    .code-editor-container mj-code-editor {\n      display: block;\n      height: 100%;\n    }\n\n    .empty-preview {\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 i {\n      font-size: 32px;\n      margin-bottom: 12px;\n      opacity: 0.4;\n    }\n\n    .empty-preview p {\n      margin: 0 0 12px;\n      font-size: 13px;\n    }\n\n    .edit-link {\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:hover {\n      background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n    }\n\n    .empty-state {\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 i {\n      font-size: 32px;\n      margin-bottom: 12px;\n      opacity: 0.4;\n    }\n\n    .empty-state p {\n      margin: 0;\n      font-size: 13px;\n      text-align: center;\n    }\n  `]\n})\nexport class RequirementsEditorComponent implements OnInit, OnDestroy {\n  @Input() Field: RequirementsField = 'functionalRequirements';\n  @Input() Title: string = 'Functional Requirements';\n\n  EditableContent: string = '';\n  IsEditing: boolean = false;\n  ViewMode: EditorMode = 'preview';\n\n  private stateChangedSub: Subscription | null = null;\n\n  constructor(\n    public State: ComponentStudioStateService,\n    private cdr: ChangeDetectorRef\n  ) {}\n\n  get FieldIcon(): string {\n    return this.Field === 'functionalRequirements' ? 'fa-clipboard-list' : 'fa-drafting-compass';\n  }\n\n  ngOnInit(): void {\n    this.loadContent();\n    this.stateChangedSub = this.State.StateChanged.subscribe(() => {\n      if (!this.IsEditing) {\n        this.loadContent();\n      }\n      this.cdr.detectChanges();\n    });\n  }\n\n  ngOnDestroy(): void {\n    if (this.stateChangedSub) {\n      this.stateChangedSub.unsubscribe();\n      this.stateChangedSub = null;\n    }\n  }\n\n  SetViewMode(mode: EditorMode): void {\n    this.ViewMode = mode;\n    this.cdr.detectChanges();\n  }\n\n  OnContentChanged(): void {\n    this.IsEditing = true;\n  }\n\n  ApplyChanges(): void {\n    try {\n      const spec: ComponentSpec = JSON.parse(this.State.EditableSpec);\n      spec[this.Field] = this.EditableContent;\n      this.State.UpdateSpec(spec);\n      this.IsEditing = false;\n      this.ViewMode = 'preview';\n    } catch (error) {\n      console.error('Error applying requirements changes:', error);\n    }\n  }\n\n  CancelChanges(): void {\n    this.loadContent();\n    this.IsEditing = false;\n    this.ViewMode = 'preview';\n    this.cdr.detectChanges();\n  }\n\n  private loadContent(): void {\n    try {\n      const spec = JSON.parse(this.State.EditableSpec);\n      this.EditableContent = spec[this.Field] || '';\n    } catch {\n      this.EditableContent = '';\n    }\n  }\n}\n"]}

package/dist/ComponentStudio/components/editors/spec-editor.component.js

@@ -2,8 +2,8 @@ import { Component } from '@angular/core';
 import * as i0 from "@angular/core";
 import * as i1 from "../../services/component-studio-state.service";
 import * as i2 from "@angular/forms";
-import * as i3 from "@progress/kendo-angular-buttons";
-import * as i4 from "@memberjunction/ng-code-editor";
+import * as i3 from "@memberjunction/ng-code-editor";
+import * as i4 from "@memberjunction/ng-ui-components";
 function SpecEditorComponent_Conditional_9_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 6)(1, "button", 10);
@@ -11,18 +11,13 @@ function SpecEditorComponent_Conditional_9_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(2, "i", 11);
     i0.ɵɵtext(3, " Apply ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "button", 10);
+    i0.ɵɵelementStart(4, "button", 12);
     i0.ɵɵlistener("click", function SpecEditorComponent_Conditional_9_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.CancelChanges()); });
     i0.ɵɵtext(5, " Cancel ");
     i0.ɵɵelementEnd()();
-} if (rf & 2) {
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("themeColor", "primary");
-    i0.ɵɵadvance(3);
-    i0.ɵɵproperty("themeColor", "base");
 } }
 function SpecEditorComponent_Conditional_11_For_11_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "option", 17);
+    i0.ɵɵelementStart(0, "option", 18);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -33,51 +28,51 @@ function SpecEditorComponent_Conditional_11_For_11_Template(rf, ctx) { if (rf &
 } }
 function SpecEditorComponent_Conditional_11_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 8)(1, "div", 12)(2, "div", 13)(3, "label", 14);
+    i0.ɵɵelementStart(0, "div", 8)(1, "div", 13)(2, "div", 14)(3, "label", 15);
     i0.ɵɵtext(4, "Name");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "input", 15);
+    i0.ɵɵelementStart(5, "input", 16);
     i0.ɵɵtwoWayListener("ngModelChange", function SpecEditorComponent_Conditional_11_Template_input_ngModelChange_5_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.FormModel.name, $event) || (ctx_r1.FormModel.name = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵlistener("ngModelChange", function SpecEditorComponent_Conditional_11_Template_input_ngModelChange_5_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnFormChanged()); });
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(6, "div", 13)(7, "label", 14);
+    i0.ɵɵelementStart(6, "div", 14)(7, "label", 15);
     i0.ɵɵtext(8, "Type");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "select", 16);
+    i0.ɵɵelementStart(9, "select", 17);
     i0.ɵɵtwoWayListener("ngModelChange", function SpecEditorComponent_Conditional_11_Template_select_ngModelChange_9_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.FormModel.type, $event) || (ctx_r1.FormModel.type = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵlistener("ngModelChange", function SpecEditorComponent_Conditional_11_Template_select_ngModelChange_9_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnFormChanged()); });
-    i0.ɵɵrepeaterCreate(10, SpecEditorComponent_Conditional_11_For_11_Template, 2, 2, "option", 17, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵrepeaterCreate(10, SpecEditorComponent_Conditional_11_For_11_Template, 2, 2, "option", 18, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(12, "div", 13)(13, "label", 14);
+    i0.ɵɵelementStart(12, "div", 14)(13, "label", 15);
     i0.ɵɵtext(14, "Title");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(15, "input", 15);
+    i0.ɵɵelementStart(15, "input", 16);
     i0.ɵɵtwoWayListener("ngModelChange", function SpecEditorComponent_Conditional_11_Template_input_ngModelChange_15_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.FormModel.title, $event) || (ctx_r1.FormModel.title = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵlistener("ngModelChange", function SpecEditorComponent_Conditional_11_Template_input_ngModelChange_15_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnFormChanged()); });
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(16, "div", 13)(17, "label", 14);
+    i0.ɵɵelementStart(16, "div", 14)(17, "label", 15);
     i0.ɵɵtext(18, "Description");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(19, "textarea", 18);
+    i0.ɵɵelementStart(19, "textarea", 19);
     i0.ɵɵtwoWayListener("ngModelChange", function SpecEditorComponent_Conditional_11_Template_textarea_ngModelChange_19_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.FormModel.description, $event) || (ctx_r1.FormModel.description = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵlistener("ngModelChange", function SpecEditorComponent_Conditional_11_Template_textarea_ngModelChange_19_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnFormChanged()); });
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(20, "div", 12)(21, "div", 13)(22, "label", 14);
+    i0.ɵɵelementStart(20, "div", 13)(21, "div", 14)(22, "label", 15);
     i0.ɵɵtext(23, "Location");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(24, "select", 16);
+    i0.ɵɵelementStart(24, "select", 17);
     i0.ɵɵtwoWayListener("ngModelChange", function SpecEditorComponent_Conditional_11_Template_select_ngModelChange_24_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.FormModel.location, $event) || (ctx_r1.FormModel.location = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵlistener("ngModelChange", function SpecEditorComponent_Conditional_11_Template_select_ngModelChange_24_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnFormChanged()); });
-    i0.ɵɵelementStart(25, "option", 19);
+    i0.ɵɵelementStart(25, "option", 20);
     i0.ɵɵtext(26, "embedded");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(27, "option", 20);
+    i0.ɵɵelementStart(27, "option", 21);
     i0.ɵɵtext(28, "standalone");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(29, "div", 13)(30, "label", 14);
+    i0.ɵɵelementStart(29, "div", 14)(30, "label", 15);
     i0.ɵɵtext(31, "Example Usage");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(32, "input", 21);
+    i0.ɵɵelementStart(32, "input", 22);
     i0.ɵɵtwoWayListener("ngModelChange", function SpecEditorComponent_Conditional_11_Template_input_ngModelChange_32_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.FormModel.exampleUsage, $event) || (ctx_r1.FormModel.exampleUsage = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵlistener("ngModelChange", function SpecEditorComponent_Conditional_11_Template_input_ngModelChange_32_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnFormChanged()); });
     i0.ɵɵelementEnd()()()();
@@ -100,7 +95,7 @@ function SpecEditorComponent_Conditional_11_Template(rf, ctx) { if (rf & 1) {
 } }
 function SpecEditorComponent_Conditional_12_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 9)(1, "mj-code-editor", 22);
+    i0.ɵɵelementStart(0, "div", 9)(1, "mj-code-editor", 23);
     i0.ɵɵtwoWayListener("ngModelChange", function SpecEditorComponent_Conditional_12_Template_mj_code_editor_ngModelChange_1_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.State.EditableSpec, $event) || (ctx_r1.State.EditableSpec = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵlistener("ngModelChange", function SpecEditorComponent_Conditional_12_Template_mj_code_editor_ngModelChange_1_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnJsonChanged()); });
     i0.ɵɵelementEnd()();
@@ -198,7 +193,7 @@ export class SpecEditorComponent {
         }
     }
     static ɵfac = function SpecEditorComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SpecEditorComponent)(i0.ɵɵdirectiveInject(i1.ComponentStudioStateService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SpecEditorComponent, selectors: [["mj-spec-editor"]], standalone: false, decls: 13, vars: 6, consts: [[1, "spec-editor"], [1, "editor-header"], [1, "mode-toggle"], [1, "mode-btn", 3, "click"], [1, "fa-solid", "fa-wpforms"], [1, "fa-solid", "fa-code"], [1, "action-buttons"], [1, "editor-body"], [1, "form-mode"], [1, "json-mode"], ["kendoButton", "", 1, "action-btn", 3, "click", "themeColor"], [1, "fa-solid", "fa-check"], [1, "form-row"], [1, "form-field"], [1, "form-label"], [1, "form-input", 3, "ngModelChange", "ngModel"], [1, "form-select", 3, "ngModelChange", "ngModel"], [3, "value"], ["rows", "3", 1, "form-textarea", 3, "ngModelChange", "ngModel"], ["value", "embedded"], ["value", "standalone"], ["placeholder", "Optional", 1, "form-input", 3, "ngModelChange", "ngModel"], [3, "ngModelChange", "ngModel", "language", "indentWithTab"]], template: function SpecEditorComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SpecEditorComponent, selectors: [["mj-spec-editor"]], standalone: false, decls: 13, vars: 6, consts: [[1, "spec-editor"], [1, "editor-header"], [1, "mode-toggle"], [1, "mode-btn", 3, "click"], [1, "fa-solid", "fa-wpforms"], [1, "fa-solid", "fa-code"], [1, "action-buttons"], [1, "editor-body"], [1, "form-mode"], [1, "json-mode"], ["mjButton", "", "variant", "primary", 1, "action-btn", 3, "click"], [1, "fa-solid", "fa-check"], ["mjButton", "", 1, "action-btn", 3, "click"], [1, "form-row"], [1, "form-field"], [1, "form-label"], [1, "form-input", 3, "ngModelChange", "ngModel"], [1, "form-select", 3, "ngModelChange", "ngModel"], [3, "value"], ["rows", "3", 1, "form-textarea", 3, "ngModelChange", "ngModel"], ["value", "embedded"], ["value", "standalone"], ["placeholder", "Optional", 1, "form-input", 3, "ngModelChange", "ngModel"], [3, "ngModelChange", "ngModel", "language", "indentWithTab"]], template: function SpecEditorComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2)(3, "button", 3);
             i0.ɵɵlistener("click", function SpecEditorComponent_Template_button_click_3_listener() { return ctx.SetMode("form"); });
             i0.ɵɵelement(4, "i", 4);
@@ -209,7 +204,7 @@ export class SpecEditorComponent {
             i0.ɵɵelement(7, "i", 5);
             i0.ɵɵtext(8, " JSON ");
             i0.ɵɵelementEnd()();
-            i0.ɵɵconditionalCreate(9, SpecEditorComponent_Conditional_9_Template, 6, 2, "div", 6);
+            i0.ɵɵconditionalCreate(9, SpecEditorComponent_Conditional_9_Template, 6, 0, "div", 6);
             i0.ɵɵelementEnd();
             i0.ɵɵelementStart(10, "div", 7);
             i0.ɵɵconditionalCreate(11, SpecEditorComponent_Conditional_11_Template, 33, 6, "div", 8)(12, SpecEditorComponent_Conditional_12_Template, 2, 3, "div", 9);
@@ -223,7 +218,7 @@ export class SpecEditorComponent {
             i0.ɵɵconditional(ctx.State.IsEditingSpec ? 9 : -1);
             i0.ɵɵadvance(2);
             i0.ɵɵconditional(ctx.Mode === "form" ? 11 : 12);
-        } }, 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    }"] });
+        } }, dependencies: [i2.NgSelectOption, i2.ɵNgSelectMultipleOption, i2.DefaultValueAccessor, i2.SelectControlValueAccessor, i2.NgControlStatus, i2.NgModel, i3.CodeEditorComponent, i4.MJButtonDirective], 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    }"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SpecEditorComponent, [{
         type: Component,
@@ -240,10 +235,10 @@ export class SpecEditorComponent {
         </div>
         @if (State.IsEditingSpec) {
           <div class="action-buttons">
-            <button kendoButton [themeColor]="'primary'" (click)="ApplyChanges()" class="action-btn">
+            <button mjButton variant="primary" (click)="ApplyChanges()" class="action-btn">
               <i class="fa-solid fa-check"></i> Apply
             </button>
-            <button kendoButton [themeColor]="'base'" (click)="CancelChanges()" class="action-btn">
+            <button mjButton (click)="CancelChanges()" class="action-btn">
               Cancel
             </button>
           </div>

package/dist/ComponentStudio/components/editors/spec-editor.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"spec-editor.component.js","sourceRoot":"","sources":["../../../../src/ComponentStudio/components/editors/spec-editor.component.ts"],"names":[],"mappings":"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","sourcesContent":["import { Component, OnInit, OnDestroy, ChangeDetectorRef } from '@angular/core';\nimport { Subscription } from 'rxjs';\nimport { ComponentStudioStateService } from '../../services/component-studio-state.service';\n\ntype SpecEditorMode = 'form' | 'json';\n\ninterface SpecFormModel {\n  name: string;\n  title: string;\n  description: string;\n  type: string;\n  location: string;\n  exampleUsage: string;\n}\n\nconst COMPONENT_TYPES = [\n  'Report', 'Dashboard', 'Form', 'Chart', 'Table', 'Widget', 'Navigation', 'Search', 'Utility'\n];\n\n@Component({\n  standalone: false,\n  selector: 'mj-spec-editor',\n  template: `\n    <div class=\"spec-editor\">\n      <div class=\"editor-header\">\n        <div class=\"mode-toggle\">\n          <button class=\"mode-btn\" [class.active]=\"Mode === 'form'\" (click)=\"SetMode('form')\">\n            <i class=\"fa-solid fa-wpforms\"></i> Form\n          </button>\n          <button class=\"mode-btn\" [class.active]=\"Mode === 'json'\" (click)=\"SetMode('json')\">\n            <i class=\"fa-solid fa-code\"></i> JSON\n          </button>\n        </div>\n        @if (State.IsEditingSpec) {\n          <div class=\"action-buttons\">\n            <button kendoButton [themeColor]=\"'primary'\" (click)=\"ApplyChanges()\" class=\"action-btn\">\n              <i class=\"fa-solid fa-check\"></i> Apply\n            </button>\n            <button kendoButton [themeColor]=\"'base'\" (click)=\"CancelChanges()\" class=\"action-btn\">\n              Cancel\n            </button>\n          </div>\n        }\n      </div>\n\n      <div class=\"editor-body\">\n        @if (Mode === 'form') {\n          <div class=\"form-mode\">\n            <div class=\"form-row\">\n              <div class=\"form-field\">\n                <label class=\"form-label\">Name</label>\n                <input class=\"form-input\" [(ngModel)]=\"FormModel.name\" (ngModelChange)=\"OnFormChanged()\" />\n              </div>\n              <div class=\"form-field\">\n                <label class=\"form-label\">Type</label>\n                <select class=\"form-select\" [(ngModel)]=\"FormModel.type\" (ngModelChange)=\"OnFormChanged()\">\n                  @for (t of ComponentTypes; track t) {\n                    <option [value]=\"t\">{{ t }}</option>\n                  }\n                </select>\n              </div>\n            </div>\n            <div class=\"form-field\">\n              <label class=\"form-label\">Title</label>\n              <input class=\"form-input\" [(ngModel)]=\"FormModel.title\" (ngModelChange)=\"OnFormChanged()\" />\n            </div>\n            <div class=\"form-field\">\n              <label class=\"form-label\">Description</label>\n              <textarea class=\"form-textarea\" [(ngModel)]=\"FormModel.description\" (ngModelChange)=\"OnFormChanged()\" rows=\"3\"></textarea>\n            </div>\n            <div class=\"form-row\">\n              <div class=\"form-field\">\n                <label class=\"form-label\">Location</label>\n                <select class=\"form-select\" [(ngModel)]=\"FormModel.location\" (ngModelChange)=\"OnFormChanged()\">\n                  <option value=\"embedded\">embedded</option>\n                  <option value=\"standalone\">standalone</option>\n                </select>\n              </div>\n              <div class=\"form-field\">\n                <label class=\"form-label\">Example Usage</label>\n                <input class=\"form-input\" [(ngModel)]=\"FormModel.exampleUsage\" (ngModelChange)=\"OnFormChanged()\" placeholder=\"Optional\" />\n              </div>\n            </div>\n          </div>\n        } @else {\n          <div class=\"json-mode\">\n            <mj-code-editor\n              [(ngModel)]=\"State.EditableSpec\"\n              [language]=\"'json'\"\n              [indentWithTab]=\"true\"\n              (ngModelChange)=\"OnJsonChanged()\">\n            </mj-code-editor>\n          </div>\n        }\n      </div>\n    </div>\n  `,\n  styles: [`\n    .spec-editor {\n      display: flex;\n      flex-direction: column;\n      height: 100%;\n    }\n\n    .editor-header {\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 {\n      display: inline-flex;\n      border: 1px solid var(--mj-border-default);\n      border-radius: 8px;\n      overflow: hidden;\n    }\n\n    .mode-btn {\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:not(:last-child) {\n      border-right: 1px solid var(--mj-border-default);\n    }\n\n    .mode-btn:hover {\n      background: var(--mj-bg-surface-sunken);\n    }\n\n    .mode-btn.active {\n      background: var(--mj-brand-primary);\n      color: var(--mj-text-inverse);\n    }\n\n    .mode-btn i {\n      font-size: 11px;\n    }\n\n    .action-buttons {\n      display: flex;\n      gap: 6px;\n    }\n\n    .action-btn {\n      font-size: 12px;\n    }\n\n    .editor-body {\n      flex: 1;\n      overflow: auto;\n    }\n\n    .form-mode {\n      padding: 16px;\n      display: flex;\n      flex-direction: column;\n      gap: 14px;\n    }\n\n    .form-field {\n      display: flex;\n      flex-direction: column;\n      gap: 4px;\n      flex: 1;\n    }\n\n    .form-label {\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 {\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: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 {\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: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 {\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: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 {\n      display: grid;\n      grid-template-columns: 1fr 1fr;\n      gap: 12px;\n    }\n\n    .json-mode {\n      height: 100%;\n    }\n\n    .json-mode mj-code-editor {\n      display: block;\n      height: 100%;\n    }\n  `]\n})\nexport class SpecEditorComponent implements OnInit, OnDestroy {\n  Mode: SpecEditorMode = 'form';\n  FormModel: SpecFormModel = { name: '', title: '', description: '', type: '', location: '', exampleUsage: '' };\n  ComponentTypes: string[] = COMPONENT_TYPES;\n\n  private stateChangedSub: Subscription | null = null;\n\n  constructor(\n    public State: ComponentStudioStateService,\n    private cdr: ChangeDetectorRef\n  ) {}\n\n  ngOnInit(): void {\n    this.syncSpecToForm();\n    this.stateChangedSub = this.State.StateChanged.subscribe(() => {\n      if (this.Mode === 'form' && !this.State.IsEditingSpec) {\n        this.syncSpecToForm();\n      }\n      this.cdr.detectChanges();\n    });\n  }\n\n  ngOnDestroy(): void {\n    if (this.stateChangedSub) {\n      this.stateChangedSub.unsubscribe();\n      this.stateChangedSub = null;\n    }\n  }\n\n  SetMode(mode: SpecEditorMode): void {\n    if (mode === 'form') {\n      this.syncSpecToForm();\n    } else {\n      this.syncFormToSpec();\n    }\n    this.Mode = mode;\n  }\n\n  OnFormChanged(): void {\n    this.syncFormToSpec();\n    this.State.IsEditingSpec = true;\n  }\n\n  OnJsonChanged(): void {\n    this.State.IsEditingSpec = true;\n  }\n\n  ApplyChanges(): void {\n    if (this.Mode === 'form') {\n      this.syncFormToSpec();\n    }\n    this.State.ApplySpecChanges();\n  }\n\n  CancelChanges(): void {\n    this.State.InitializeEditors();\n    this.syncSpecToForm();\n    this.cdr.detectChanges();\n  }\n\n  private syncSpecToForm(): void {\n    try {\n      const spec = JSON.parse(this.State.EditableSpec);\n      this.FormModel = {\n        name: spec.name || '',\n        title: spec.title || '',\n        description: spec.description || '',\n        type: spec.type || '',\n        location: spec.location || '',\n        exampleUsage: spec.exampleUsage || ''\n      };\n    } catch {\n      // If JSON is invalid, keep current form values\n    }\n  }\n\n  private syncFormToSpec(): void {\n    try {\n      const spec = JSON.parse(this.State.EditableSpec);\n      spec.name = this.FormModel.name;\n      spec.title = this.FormModel.title;\n      spec.description = this.FormModel.description;\n      spec.type = this.FormModel.type;\n      spec.location = this.FormModel.location;\n      spec.exampleUsage = this.FormModel.exampleUsage;\n      this.State.EditableSpec = JSON.stringify(spec, null, 2);\n    } catch {\n      // If JSON is invalid, skip sync\n    }\n  }\n}\n"]}
+{"version":3,"file":"spec-editor.component.js","sourceRoot":"","sources":["../../../../src/ComponentStudio/components/editors/spec-editor.component.ts"],"names":[],"mappings":"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","sourcesContent":["import { Component, OnInit, OnDestroy, ChangeDetectorRef } from '@angular/core';\nimport { Subscription } from 'rxjs';\nimport { ComponentStudioStateService } from '../../services/component-studio-state.service';\n\ntype SpecEditorMode = 'form' | 'json';\n\ninterface SpecFormModel {\n  name: string;\n  title: string;\n  description: string;\n  type: string;\n  location: string;\n  exampleUsage: string;\n}\n\nconst COMPONENT_TYPES = [\n  'Report', 'Dashboard', 'Form', 'Chart', 'Table', 'Widget', 'Navigation', 'Search', 'Utility'\n];\n\n@Component({\n  standalone: false,\n  selector: 'mj-spec-editor',\n  template: `\n    <div class=\"spec-editor\">\n      <div class=\"editor-header\">\n        <div class=\"mode-toggle\">\n          <button class=\"mode-btn\" [class.active]=\"Mode === 'form'\" (click)=\"SetMode('form')\">\n            <i class=\"fa-solid fa-wpforms\"></i> Form\n          </button>\n          <button class=\"mode-btn\" [class.active]=\"Mode === 'json'\" (click)=\"SetMode('json')\">\n            <i class=\"fa-solid fa-code\"></i> JSON\n          </button>\n        </div>\n        @if (State.IsEditingSpec) {\n          <div class=\"action-buttons\">\n            <button mjButton variant=\"primary\" (click)=\"ApplyChanges()\" class=\"action-btn\">\n              <i class=\"fa-solid fa-check\"></i> Apply\n            </button>\n            <button mjButton (click)=\"CancelChanges()\" class=\"action-btn\">\n              Cancel\n            </button>\n          </div>\n        }\n      </div>\n\n      <div class=\"editor-body\">\n        @if (Mode === 'form') {\n          <div class=\"form-mode\">\n            <div class=\"form-row\">\n              <div class=\"form-field\">\n                <label class=\"form-label\">Name</label>\n                <input class=\"form-input\" [(ngModel)]=\"FormModel.name\" (ngModelChange)=\"OnFormChanged()\" />\n              </div>\n              <div class=\"form-field\">\n                <label class=\"form-label\">Type</label>\n                <select class=\"form-select\" [(ngModel)]=\"FormModel.type\" (ngModelChange)=\"OnFormChanged()\">\n                  @for (t of ComponentTypes; track t) {\n                    <option [value]=\"t\">{{ t }}</option>\n                  }\n                </select>\n              </div>\n            </div>\n            <div class=\"form-field\">\n              <label class=\"form-label\">Title</label>\n              <input class=\"form-input\" [(ngModel)]=\"FormModel.title\" (ngModelChange)=\"OnFormChanged()\" />\n            </div>\n            <div class=\"form-field\">\n              <label class=\"form-label\">Description</label>\n              <textarea class=\"form-textarea\" [(ngModel)]=\"FormModel.description\" (ngModelChange)=\"OnFormChanged()\" rows=\"3\"></textarea>\n            </div>\n            <div class=\"form-row\">\n              <div class=\"form-field\">\n                <label class=\"form-label\">Location</label>\n                <select class=\"form-select\" [(ngModel)]=\"FormModel.location\" (ngModelChange)=\"OnFormChanged()\">\n                  <option value=\"embedded\">embedded</option>\n                  <option value=\"standalone\">standalone</option>\n                </select>\n              </div>\n              <div class=\"form-field\">\n                <label class=\"form-label\">Example Usage</label>\n                <input class=\"form-input\" [(ngModel)]=\"FormModel.exampleUsage\" (ngModelChange)=\"OnFormChanged()\" placeholder=\"Optional\" />\n              </div>\n            </div>\n          </div>\n        } @else {\n          <div class=\"json-mode\">\n            <mj-code-editor\n              [(ngModel)]=\"State.EditableSpec\"\n              [language]=\"'json'\"\n              [indentWithTab]=\"true\"\n              (ngModelChange)=\"OnJsonChanged()\">\n            </mj-code-editor>\n          </div>\n        }\n      </div>\n    </div>\n  `,\n  styles: [`\n    .spec-editor {\n      display: flex;\n      flex-direction: column;\n      height: 100%;\n    }\n\n    .editor-header {\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 {\n      display: inline-flex;\n      border: 1px solid var(--mj-border-default);\n      border-radius: 8px;\n      overflow: hidden;\n    }\n\n    .mode-btn {\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:not(:last-child) {\n      border-right: 1px solid var(--mj-border-default);\n    }\n\n    .mode-btn:hover {\n      background: var(--mj-bg-surface-sunken);\n    }\n\n    .mode-btn.active {\n      background: var(--mj-brand-primary);\n      color: var(--mj-text-inverse);\n    }\n\n    .mode-btn i {\n      font-size: 11px;\n    }\n\n    .action-buttons {\n      display: flex;\n      gap: 6px;\n    }\n\n    .action-btn {\n      font-size: 12px;\n    }\n\n    .editor-body {\n      flex: 1;\n      overflow: auto;\n    }\n\n    .form-mode {\n      padding: 16px;\n      display: flex;\n      flex-direction: column;\n      gap: 14px;\n    }\n\n    .form-field {\n      display: flex;\n      flex-direction: column;\n      gap: 4px;\n      flex: 1;\n    }\n\n    .form-label {\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 {\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: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 {\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: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 {\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: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 {\n      display: grid;\n      grid-template-columns: 1fr 1fr;\n      gap: 12px;\n    }\n\n    .json-mode {\n      height: 100%;\n    }\n\n    .json-mode mj-code-editor {\n      display: block;\n      height: 100%;\n    }\n  `]\n})\nexport class SpecEditorComponent implements OnInit, OnDestroy {\n  Mode: SpecEditorMode = 'form';\n  FormModel: SpecFormModel = { name: '', title: '', description: '', type: '', location: '', exampleUsage: '' };\n  ComponentTypes: string[] = COMPONENT_TYPES;\n\n  private stateChangedSub: Subscription | null = null;\n\n  constructor(\n    public State: ComponentStudioStateService,\n    private cdr: ChangeDetectorRef\n  ) {}\n\n  ngOnInit(): void {\n    this.syncSpecToForm();\n    this.stateChangedSub = this.State.StateChanged.subscribe(() => {\n      if (this.Mode === 'form' && !this.State.IsEditingSpec) {\n        this.syncSpecToForm();\n      }\n      this.cdr.detectChanges();\n    });\n  }\n\n  ngOnDestroy(): void {\n    if (this.stateChangedSub) {\n      this.stateChangedSub.unsubscribe();\n      this.stateChangedSub = null;\n    }\n  }\n\n  SetMode(mode: SpecEditorMode): void {\n    if (mode === 'form') {\n      this.syncSpecToForm();\n    } else {\n      this.syncFormToSpec();\n    }\n    this.Mode = mode;\n  }\n\n  OnFormChanged(): void {\n    this.syncFormToSpec();\n    this.State.IsEditingSpec = true;\n  }\n\n  OnJsonChanged(): void {\n    this.State.IsEditingSpec = true;\n  }\n\n  ApplyChanges(): void {\n    if (this.Mode === 'form') {\n      this.syncFormToSpec();\n    }\n    this.State.ApplySpecChanges();\n  }\n\n  CancelChanges(): void {\n    this.State.InitializeEditors();\n    this.syncSpecToForm();\n    this.cdr.detectChanges();\n  }\n\n  private syncSpecToForm(): void {\n    try {\n      const spec = JSON.parse(this.State.EditableSpec);\n      this.FormModel = {\n        name: spec.name || '',\n        title: spec.title || '',\n        description: spec.description || '',\n        type: spec.type || '',\n        location: spec.location || '',\n        exampleUsage: spec.exampleUsage || ''\n      };\n    } catch {\n      // If JSON is invalid, keep current form values\n    }\n  }\n\n  private syncFormToSpec(): void {\n    try {\n      const spec = JSON.parse(this.State.EditableSpec);\n      spec.name = this.FormModel.name;\n      spec.title = this.FormModel.title;\n      spec.description = this.FormModel.description;\n      spec.type = this.FormModel.type;\n      spec.location = this.FormModel.location;\n      spec.exampleUsage = this.FormModel.exampleUsage;\n      this.State.EditableSpec = JSON.stringify(spec, null, 2);\n    } catch {\n      // If JSON is invalid, skip sync\n    }\n  }\n}\n"]}

package/dist/ComponentStudio/components/new-component-dialog/new-component-dialog.component.js

@@ -2,8 +2,7 @@ import { Component, Input, Output, EventEmitter } from '@angular/core';
 import { Validators } from '@angular/forms';
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/forms";
-import * as i2 from "@progress/kendo-angular-buttons";
-import * as i3 from "@progress/kendo-angular-dialog";
+import * as i2 from "@memberjunction/ng-ui-components";
 const _forTrack0 = ($index, $item) => $item.value;
 function NewComponentDialogComponent_Conditional_0_For_16_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
@@ -31,8 +30,8 @@ function NewComponentDialogComponent_Conditional_0_For_16_Template(rf, ctx) { if
 } }
 function NewComponentDialogComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "kendo-dialog", 1);
-    i0.ɵɵlistener("close", function NewComponentDialogComponent_Conditional_0_Template_kendo_dialog_close_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnCancel()); });
+    i0.ɵɵelementStart(0, "mj-dialog", 1);
+    i0.ɵɵlistener("Close", function NewComponentDialogComponent_Conditional_0_Template_mj_dialog_Close_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnCancel()); });
     i0.ɵɵelementStart(1, "form", 2)(2, "div", 3)(3, "div", 4)(4, "label", 5);
     i0.ɵɵtext(5, "Name ");
     i0.ɵɵelementStart(6, "span", 6);
@@ -64,7 +63,7 @@ function NewComponentDialogComponent_Conditional_0_Template(rf, ctx) { if (rf &
     i0.ɵɵelementStart(27, "span", 8);
     i0.ɵɵtext(28, "Optional description of the component's purpose");
     i0.ɵɵelementEnd()()()();
-    i0.ɵɵelementStart(29, "kendo-dialog-actions")(30, "button", 16);
+    i0.ɵɵelementStart(29, "mj-dialog-actions")(30, "button", 16);
     i0.ɵɵlistener("click", function NewComponentDialogComponent_Conditional_0_Template_button_click_30_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnCreate()); });
     i0.ɵɵelement(31, "span", 17);
     i0.ɵɵtext(32, " Create ");
@@ -75,13 +74,13 @@ function NewComponentDialogComponent_Conditional_0_Template(rf, ctx) { if (rf &
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("title", "Create New Component")("width", 520)("minWidth", 400);
+    i0.ɵɵproperty("Visible", true)("Width", 520)("MinWidth", 400);
     i0.ɵɵadvance();
     i0.ɵɵproperty("formGroup", ctx_r1.form);
     i0.ɵɵadvance(14);
     i0.ɵɵrepeater(ctx_r1.TypeOptions);
     i0.ɵɵadvance(15);
-    i0.ɵɵproperty("themeColor", "primary")("disabled", !ctx_r1.form.valid);
+    i0.ɵɵproperty("disabled", !ctx_r1.form.valid);
 } }
 export class NewComponentDialogComponent {
     fb;
@@ -141,15 +140,15 @@ export class NewComponentDialogComponent {
         this.lastAutoFilledTitle = '';
     }
     static ɵfac = function NewComponentDialogComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || NewComponentDialogComponent)(i0.ɵɵdirectiveInject(i1.FormBuilder)); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: NewComponentDialogComponent, selectors: [["mj-new-component-dialog"]], inputs: { Visible: "Visible" }, outputs: { Close: "Close" }, standalone: false, decls: 1, vars: 1, consts: [[3, "title", "width", "minWidth"], [3, "close", "title", "width", "minWidth"], [3, "formGroup"], [1, "dialog-form"], [1, "form-field"], ["for", "component-name", 1, "form-label"], [1, "required"], ["id", "component-name", "type", "text", "formControlName", "name", "placeholder", "e.g. Sales Overview Dashboard", "autocomplete", "off", 1, "form-input", 3, "input"], [1, "form-hint"], [1, "form-label"], [1, "type-options"], [1, "type-card", 3, "selected"], ["for", "component-title", 1, "form-label"], ["id", "component-title", "type", "text", "formControlName", "title", "placeholder", "Display title (auto-filled from name)", "autocomplete", "off", 1, "form-input"], ["for", "component-description", 1, "form-label"], ["id", "component-description", "formControlName", "description", "placeholder", "Describe what this component does...", "rows", "3", 1, "form-textarea"], ["kendoButton", "", 3, "click", "themeColor", "disabled"], [1, "fa-solid", "fa-plus"], ["kendoButton", "", 3, "click"], [1, "type-card", 3, "click"], [1, "type-card-icon"], [1, "type-card-label"], [1, "type-card-description"]], template: function NewComponentDialogComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵconditionalCreate(0, NewComponentDialogComponent_Conditional_0_Template, 35, 6, "kendo-dialog", 0);
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: NewComponentDialogComponent, selectors: [["mj-new-component-dialog"]], inputs: { Visible: "Visible" }, outputs: { Close: "Close" }, standalone: false, decls: 1, vars: 1, consts: [["Title", "Create New Component", 3, "Visible", "Width", "MinWidth"], ["Title", "Create New Component", 3, "Close", "Visible", "Width", "MinWidth"], [3, "formGroup"], [1, "dialog-form"], [1, "form-field"], ["for", "component-name", 1, "form-label"], [1, "required"], ["id", "component-name", "type", "text", "formControlName", "name", "placeholder", "e.g. Sales Overview Dashboard", "autocomplete", "off", 1, "form-input", 3, "input"], [1, "form-hint"], [1, "form-label"], [1, "type-options"], [1, "type-card", 3, "selected"], ["for", "component-title", 1, "form-label"], ["id", "component-title", "type", "text", "formControlName", "title", "placeholder", "Display title (auto-filled from name)", "autocomplete", "off", 1, "form-input"], ["for", "component-description", 1, "form-label"], ["id", "component-description", "formControlName", "description", "placeholder", "Describe what this component does...", "rows", "3", 1, "form-textarea"], ["mjButton", "", "variant", "primary", 3, "click", "disabled"], [1, "fa-solid", "fa-plus"], ["mjButton", "", 3, "click"], [1, "type-card", 3, "click"], [1, "type-card-icon"], [1, "type-card-label"], [1, "type-card-description"]], template: function NewComponentDialogComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵconditionalCreate(0, NewComponentDialogComponent_Conditional_0_Template, 35, 5, "mj-dialog", 0);
         } if (rf & 2) {
             i0.ɵɵconditional(ctx.Visible ? 0 : -1);
-        } }, 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}"] });
+        } }, dependencies: [i1.ɵNgNoValidate, i1.DefaultValueAccessor, i1.NgControlStatus, i1.NgControlStatusGroup, i1.FormGroupDirective, i1.FormControlName, i2.MJButtonDirective, i2.MJDialogComponent, i2.MJDialogActionsComponent], 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}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(NewComponentDialogComponent, [{
         type: Component,
-        args: [{ standalone: false, selector: 'mj-new-component-dialog', template: "@if (Visible) {\n  <kendo-dialog [title]=\"'Create New Component'\" (close)=\"OnCancel()\" [width]=\"520\" [minWidth]=\"400\">\n    <form [formGroup]=\"form\">\n      <div class=\"dialog-form\">\n        <!-- Name field (required) -->\n        <div class=\"form-field\">\n          <label class=\"form-label\" for=\"component-name\">Name <span class=\"required\">*</span></label>\n          <input\n            id=\"component-name\"\n            class=\"form-input\"\n            type=\"text\"\n            formControlName=\"name\"\n            (input)=\"OnNameChange()\"\n            placeholder=\"e.g. Sales Overview Dashboard\"\n            autocomplete=\"off\">\n          <span class=\"form-hint\">A unique name for your component</span>\n        </div>\n\n        <!-- Type selection (card grid) -->\n        <div class=\"form-field\">\n          <label class=\"form-label\">Type</label>\n          <div class=\"type-options\">\n            @for (option of TypeOptions; track option.value) {\n              <div\n                class=\"type-card\"\n                [class.selected]=\"SelectedType === option.value\"\n                (click)=\"OnSelectType(option.value)\">\n                <div class=\"type-card-icon\">\n                  <i [class]=\"option.icon\"></i>\n                </div>\n                <div class=\"type-card-label\">{{ option.label }}</div>\n                <div class=\"type-card-description\">{{ option.description }}</div>\n              </div>\n            }\n          </div>\n        </div>\n\n        <!-- Title field (auto-filled from name) -->\n        <div class=\"form-field\">\n          <label class=\"form-label\" for=\"component-title\">Title</label>\n          <input\n            id=\"component-title\"\n            class=\"form-input\"\n            type=\"text\"\n            formControlName=\"title\"\n            placeholder=\"Display title (auto-filled from name)\"\n            autocomplete=\"off\">\n          <span class=\"form-hint\">The display title shown in the component header</span>\n        </div>\n\n        <!-- Description (optional textarea) -->\n        <div class=\"form-field\">\n          <label class=\"form-label\" for=\"component-description\">Description</label>\n          <textarea\n            id=\"component-description\"\n            class=\"form-textarea\"\n            formControlName=\"description\"\n            placeholder=\"Describe what this component does...\"\n            rows=\"3\"></textarea>\n          <span class=\"form-hint\">Optional description of the component's purpose</span>\n        </div>\n      </div>\n    </form>\n\n    <kendo-dialog-actions>\n      <button kendoButton (click)=\"OnCreate()\" [themeColor]=\"'primary'\" [disabled]=\"!form.valid\">\n        <span class=\"fa-solid fa-plus\"></span> Create\n      </button>\n      <button kendoButton (click)=\"OnCancel()\">Cancel</button>\n    </kendo-dialog-actions>\n  </kendo-dialog>\n}\n", styles: ["/* Dialog form container */\n.dialog-form {\n  padding: 16px 8px;\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n/* Form field wrapper */\n.form-field {\n  margin-bottom: 16px;\n}\n\n/* Form label */\n.form-label {\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 .required {\n  color: var(--mj-status-error);\n  margin-left: 2px;\n}\n\n/* Text inputs */\n.form-input {\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: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::placeholder {\n  color: var(--mj-text-secondary);\n  opacity: 0.6;\n}\n\n/* Textarea */\n.form-textarea {\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: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::placeholder {\n  color: var(--mj-text-secondary);\n  opacity: 0.6;\n}\n\n/* Helper text */\n.form-hint {\n  display: block;\n  font-size: 11px;\n  color: var(--mj-text-secondary);\n  margin-top: 4px;\n  opacity: 0.7;\n}\n\n/* Type selection grid */\n.type-options {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 10px;\n}\n\n/* Type card */\n.type-card {\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:hover {\n  border-color: var(--mj-brand-primary);\n  background: var(--mj-bg-surface-sunken);\n}\n\n.type-card.selected {\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/* Type card icon */\n.type-card-icon {\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 .type-card-icon {\n  color: var(--mj-brand-primary);\n}\n\n/* Type card label */\n.type-card-label {\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin-bottom: 2px;\n}\n\n.type-card.selected .type-card-label {\n  color: var(--mj-brand-primary);\n}\n\n/* Type card description */\n.type-card-description {\n  font-size: 11px;\n  color: var(--mj-text-secondary);\n  line-height: 1.3;\n}\n\n.type-card.selected .type-card-description {\n  color: var(--mj-brand-primary);\n  opacity: 0.8;\n}\n"] }]
+        args: [{ standalone: false, selector: 'mj-new-component-dialog', template: "@if (Visible) {\n  <mj-dialog [Visible]=\"true\" Title=\"Create New Component\" (Close)=\"OnCancel()\" [Width]=\"520\" [MinWidth]=\"400\">\n    <form [formGroup]=\"form\">\n      <div class=\"dialog-form\">\n        <!-- Name field (required) -->\n        <div class=\"form-field\">\n          <label class=\"form-label\" for=\"component-name\">Name <span class=\"required\">*</span></label>\n          <input\n            id=\"component-name\"\n            class=\"form-input\"\n            type=\"text\"\n            formControlName=\"name\"\n            (input)=\"OnNameChange()\"\n            placeholder=\"e.g. Sales Overview Dashboard\"\n            autocomplete=\"off\">\n          <span class=\"form-hint\">A unique name for your component</span>\n        </div>\n\n        <!-- Type selection (card grid) -->\n        <div class=\"form-field\">\n          <label class=\"form-label\">Type</label>\n          <div class=\"type-options\">\n            @for (option of TypeOptions; track option.value) {\n              <div\n                class=\"type-card\"\n                [class.selected]=\"SelectedType === option.value\"\n                (click)=\"OnSelectType(option.value)\">\n                <div class=\"type-card-icon\">\n                  <i [class]=\"option.icon\"></i>\n                </div>\n                <div class=\"type-card-label\">{{ option.label }}</div>\n                <div class=\"type-card-description\">{{ option.description }}</div>\n              </div>\n            }\n          </div>\n        </div>\n\n        <!-- Title field (auto-filled from name) -->\n        <div class=\"form-field\">\n          <label class=\"form-label\" for=\"component-title\">Title</label>\n          <input\n            id=\"component-title\"\n            class=\"form-input\"\n            type=\"text\"\n            formControlName=\"title\"\n            placeholder=\"Display title (auto-filled from name)\"\n            autocomplete=\"off\">\n          <span class=\"form-hint\">The display title shown in the component header</span>\n        </div>\n\n        <!-- Description (optional textarea) -->\n        <div class=\"form-field\">\n          <label class=\"form-label\" for=\"component-description\">Description</label>\n          <textarea\n            id=\"component-description\"\n            class=\"form-textarea\"\n            formControlName=\"description\"\n            placeholder=\"Describe what this component does...\"\n            rows=\"3\"></textarea>\n          <span class=\"form-hint\">Optional description of the component's purpose</span>\n        </div>\n      </div>\n    </form>\n\n    <mj-dialog-actions>\n      <button mjButton variant=\"primary\" (click)=\"OnCreate()\" [disabled]=\"!form.valid\">\n        <span class=\"fa-solid fa-plus\"></span> Create\n      </button>\n      <button mjButton (click)=\"OnCancel()\">Cancel</button>\n    </mj-dialog-actions>\n  </mj-dialog>\n}\n", styles: ["/* Dialog form container */\n.dialog-form {\n  padding: 16px 8px;\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n/* Form field wrapper */\n.form-field {\n  margin-bottom: 16px;\n}\n\n/* Form label */\n.form-label {\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 .required {\n  color: var(--mj-status-error);\n  margin-left: 2px;\n}\n\n/* Text inputs */\n.form-input {\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: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::placeholder {\n  color: var(--mj-text-secondary);\n  opacity: 0.6;\n}\n\n/* Textarea */\n.form-textarea {\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: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::placeholder {\n  color: var(--mj-text-secondary);\n  opacity: 0.6;\n}\n\n/* Helper text */\n.form-hint {\n  display: block;\n  font-size: 11px;\n  color: var(--mj-text-secondary);\n  margin-top: 4px;\n  opacity: 0.7;\n}\n\n/* Type selection grid */\n.type-options {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 10px;\n}\n\n/* Type card */\n.type-card {\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:hover {\n  border-color: var(--mj-brand-primary);\n  background: var(--mj-bg-surface-sunken);\n}\n\n.type-card.selected {\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/* Type card icon */\n.type-card-icon {\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 .type-card-icon {\n  color: var(--mj-brand-primary);\n}\n\n/* Type card label */\n.type-card-label {\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin-bottom: 2px;\n}\n\n.type-card.selected .type-card-label {\n  color: var(--mj-brand-primary);\n}\n\n/* Type card description */\n.type-card-description {\n  font-size: 11px;\n  color: var(--mj-text-secondary);\n  line-height: 1.3;\n}\n\n.type-card.selected .type-card-description {\n  color: var(--mj-brand-primary);\n  opacity: 0.8;\n}\n"] }]
     }], () => [{ type: i1.FormBuilder }], { Visible: [{
             type: Input
         }], Close: [{