npm - @memberjunction/ng-dashboards - Versions diffs - 5.22.0 → 5.23.0 - Mend

@memberjunction/ng-dashboards 5.22.0 → 5.23.0

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

Files changed (204) hide show

package/dist/ComponentStudio/components/new-component-dialog/new-component-dialog.component.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"new-component-dialog.component.js","sourceRoot":"","sources":["../../../../src/ComponentStudio/components/new-component-dialog/new-component-dialog.component.ts","../../../../src/ComponentStudio/components/new-component-dialog/new-component-dialog.component.html"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AACvE,OAAO,EAA0B,UAAU,EAAE,MAAM,gBAAgB,CAAC~~;;;;;;;;~~ICsBtD,+BAGuC;IAArC,gOAAS,oCAA0B,KAAC;IACpC,+BAA4B;IAC1B,oBAA6B;IAC/B,iBAAM;IACN,+BAA6B;IAAA,YAAkB;IAAA,iBAAM;IACrD,+BAAmC;IAAA,YAAwB;IAC7D,AAD6D,iBAAM,EAC7D;;;;IAPJ,mEAAgD;IAG3C,eAAqB;IAArB,6BAAqB;IAEG,eAAkB;IAAlB,qCAAkB;IACZ,eAAwB;IAAxB,2CAAwB;;;;IA9BzE,~~uCAAmG~~;IAApD,~~qMAAS~~,iBAAU,KAAC;~~IAK3D~~,AADF,AAFF,AADF,+BAAyB,aACE,aAEC,eACyB;IAAA,qBAAK;IAAA,+BAAuB;IAAA,iBAAC;IAAO,AAAP,iBAAO,EAAQ;IAC3F,gCAOqB;IAFnB,8LAAS,qBAAc,KAAC;IAL1B,iBAOqB;IACrB,+BAAwB;IAAA,iDAAgC;IAC1D,AAD0D,iBAAO,EAC3D;IAIJ,AADF,+BAAwB,gBACI;IAAA,qBAAI;IAAA,iBAAQ;IACtC,gCAA0B;IACxB,+GAWC;IAEL,AADE,iBAAM,EACF;IAIJ,AADF,+BAAwB,iBAC0B;IAAA,sBAAK;IAAA,iBAAQ;IAC7D,6BAMqB;IACrB,gCAAwB;IAAA,gEAA+C;IACzE,AADyE,iBAAO,EAC1E;IAIJ,AADF,+BAAwB,iBACgC;IAAA,4BAAW;IAAA,iBAAQ;IACzE,gCAKsB;IACtB,gCAAwB;IAAA,gEAA+C;IAG7E,AADE,AADE,AADyE,iBAAO,EAC1E,EACF,EACD;IAGL,AADF,~~6CAAsB~~,~~kBACuE~~;~~IAAvE~~,gMAAS,iBAAU,KAAC;~~IACtC~~,4BAAsC;IAAC,yBACzC;IAAA,iBAAS;IACT,~~mCAAyC~~;IAArB,gMAAS,iBAAU,KAAC;IAAC,uBAAM;~~IAEnD~~,AADE,~~AADiD~~,iBAAS,EACnC,EACV;;;~~IArEmE~~,AAAd,~~AAAtD~~,~~8CAAgC~~,~~cAAmC~~,iBAAiB;~~IAC1F~~,cAAkB;IAAlB,uCAAkB;IAoBhB,gBAWC;IAXD,iCAWC;~~IAgCkC~~,gBAAwB;~~IAAC~~,~~AAAzB,sCAAwB,gCAAyB~~;;~~ADhDhG~~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~~uGAAe~~;;YAAf,sCAuEC;;;iFDtDY,2BAA2B;cANvC,SAAS;6BACI,KAAK,YACP,yBAAyB;;kBAMlC,KAAK;;kBACL,MAAM;;kFAHI,2BAA2B","sourcesContent":["import { Component, Input, Output, EventEmitter } from '@angular/core';\nimport { FormGroup, FormBuilder, Validators } from '@angular/forms';\nimport { NewComponentResult } from '../../component-studio-dashboard.component';\n\ninterface TypeOption {\n value: string;\n label: string;\n icon: string;\n description: string;\n}\n\n@Component({\n standalone: false,\n selector: 'mj-new-component-dialog',\n templateUrl: './new-component-dialog.component.html',\n styleUrls: ['./new-component-dialog.component.css']\n})\nexport class NewComponentDialogComponent {\n\n @Input() Visible: boolean = false;\n @Output() Close = new EventEmitter<NewComponentResult \| null>();\n\n public form: FormGroup;\n public SelectedType: string = 'dashboard';\n\n public TypeOptions: TypeOption[] = [\n { value: 'dashboard', label: 'Dashboard', icon: 'fa-solid fa-gauge-high', description: 'Interactive data dashboard' },\n { value: 'report', label: 'Report', icon: 'fa-solid fa-file-lines', description: 'Formatted data report' },\n { value: 'chart', label: 'Chart', icon: 'fa-solid fa-chart-bar', description: 'Data visualization chart' },\n { value: 'form', label: 'Form', icon: 'fa-solid fa-rectangle-list', description: 'Interactive input form' },\n { value: 'component', label: 'Component', icon: 'fa-solid fa-puzzle-piece', description: 'Reusable UI component' }\n ];\n\n private lastAutoFilledTitle: string = '';\n\n constructor(private fb: FormBuilder) {\n this.form = this.fb.group({\n name: ['', Validators.required],\n title: [''],\n description: ['']\n });\n }\n\n OnNameChange(): void {\n const nameValue = this.form.get('name')?.value \|\| '';\n const titleControl = this.form.get('title');\n if (!titleControl) return;\n\n const currentTitle = titleControl.value \|\| '';\n if (currentTitle === '' \|\| currentTitle === this.lastAutoFilledTitle) {\n titleControl.setValue(nameValue);\n this.lastAutoFilledTitle = nameValue;\n }\n }\n\n OnSelectType(type: string): void {\n this.SelectedType = type;\n }\n\n OnCreate(): void {\n if (!this.form.valid) return;\n\n const result: NewComponentResult = {\n name: this.form.get('name')?.value?.trim() \|\| '',\n title: this.form.get('title')?.value?.trim() \|\| this.form.get('name')?.value?.trim() \|\| '',\n description: this.form.get('description')?.value?.trim() \|\| '',\n type: this.SelectedType\n };\n\n this.resetForm();\n this.Close.emit(result);\n }\n\n OnCancel(): void {\n this.resetForm();\n this.Close.emit(null);\n }\n\n private resetForm(): void {\n this.form.reset();\n this.SelectedType = 'dashboard';\n this.lastAutoFilledTitle = '';\n }\n}\n","@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"]}
1	+ {"version":3,"file":"new-component-dialog.component.js","sourceRoot":"","sources":["../../../../src/ComponentStudio/components/new-component-dialog/new-component-dialog.component.ts","../../../../src/ComponentStudio/components/new-component-dialog/new-component-dialog.component.html"],"names":[],"mappings":"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","sourcesContent":["import { Component, Input, Output, EventEmitter } from '@angular/core';\nimport { FormGroup, FormBuilder, Validators } from '@angular/forms';\nimport { NewComponentResult } from '../../component-studio-dashboard.component';\n\ninterface TypeOption {\n value: string;\n label: string;\n icon: string;\n description: string;\n}\n\n@Component({\n standalone: false,\n selector: 'mj-new-component-dialog',\n templateUrl: './new-component-dialog.component.html',\n styleUrls: ['./new-component-dialog.component.css']\n})\nexport class NewComponentDialogComponent {\n\n @Input() Visible: boolean = false;\n @Output() Close = new EventEmitter<NewComponentResult \| null>();\n\n public form: FormGroup;\n public SelectedType: string = 'dashboard';\n\n public TypeOptions: TypeOption[] = [\n { value: 'dashboard', label: 'Dashboard', icon: 'fa-solid fa-gauge-high', description: 'Interactive data dashboard' },\n { value: 'report', label: 'Report', icon: 'fa-solid fa-file-lines', description: 'Formatted data report' },\n { value: 'chart', label: 'Chart', icon: 'fa-solid fa-chart-bar', description: 'Data visualization chart' },\n { value: 'form', label: 'Form', icon: 'fa-solid fa-rectangle-list', description: 'Interactive input form' },\n { value: 'component', label: 'Component', icon: 'fa-solid fa-puzzle-piece', description: 'Reusable UI component' }\n ];\n\n private lastAutoFilledTitle: string = '';\n\n constructor(private fb: FormBuilder) {\n this.form = this.fb.group({\n name: ['', Validators.required],\n title: [''],\n description: ['']\n });\n }\n\n OnNameChange(): void {\n const nameValue = this.form.get('name')?.value \|\| '';\n const titleControl = this.form.get('title');\n if (!titleControl) return;\n\n const currentTitle = titleControl.value \|\| '';\n if (currentTitle === '' \|\| currentTitle === this.lastAutoFilledTitle) {\n titleControl.setValue(nameValue);\n this.lastAutoFilledTitle = nameValue;\n }\n }\n\n OnSelectType(type: string): void {\n this.SelectedType = type;\n }\n\n OnCreate(): void {\n if (!this.form.valid) return;\n\n const result: NewComponentResult = {\n name: this.form.get('name')?.value?.trim() \|\| '',\n title: this.form.get('title')?.value?.trim() \|\| this.form.get('name')?.value?.trim() \|\| '',\n description: this.form.get('description')?.value?.trim() \|\| '',\n type: this.SelectedType\n };\n\n this.resetForm();\n this.Close.emit(result);\n }\n\n OnCancel(): void {\n this.resetForm();\n this.Close.emit(null);\n }\n\n private resetForm(): void {\n this.form.reset();\n this.SelectedType = 'dashboard';\n this.lastAutoFilledTitle = '';\n }\n}\n","@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"]}

package/dist/ComponentStudio/components/save-version-dialog/save-version-dialog.component.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"save-version-dialog.component.d.ts","sourceRoot":"","sources":["../../../../src/ComponentStudio/components/save-version-dialog/save-version-dialog.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,YAAY,EAAE,MAAM,eAAe,CAAC;;AAEvE,MAAM,WAAW,iBAAiB;IAChC,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,KAAK,GAAG,QAAQ,CAAC;CACxB;AAED,~~qBA0Ja~~,0BAA0B;IAC5B,OAAO,UAAS;IAChB,cAAc,SAAK;IAClB,IAAI,kCAAyC;IAC7C,MAAM,qBAA4B;IAE5C,OAAO,SAAM;IACb,IAAI,EAAE,KAAK,GAAG,QAAQ,CAAS;IAE/B,MAAM,IAAI,IAAI;IAQd,QAAQ,IAAI,IAAI;IAKhB,OAAO,CAAC,SAAS;yCAtBN,0BAA0B;2CAA1B,0BAA0B;CA0BtC"}
1	+ {"version":3,"file":"save-version-dialog.component.d.ts","sourceRoot":"","sources":["../../../../src/ComponentStudio/components/save-version-dialog/save-version-dialog.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,YAAY,EAAE,MAAM,eAAe,CAAC;;AAEvE,MAAM,WAAW,iBAAiB;IAChC,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,KAAK,GAAG,QAAQ,CAAC;CACxB;AAED,qBAqJa,0BAA0B;IAC5B,OAAO,UAAS;IAChB,cAAc,SAAK;IAClB,IAAI,kCAAyC;IAC7C,MAAM,qBAA4B;IAE5C,OAAO,SAAM;IACb,IAAI,EAAE,KAAK,GAAG,QAAQ,CAAS;IAE/B,MAAM,IAAI,IAAI;IAQd,QAAQ,IAAI,IAAI;IAKhB,OAAO,CAAC,SAAS;yCAtBN,0BAA0B;2CAA1B,0BAA0B;CA0BtC"}

package/dist/ComponentStudio/components/save-version-dialog/save-version-dialog.component.js CHANGED Viewed

@@ -1,9 +1,7 @@
 import { Component, Input, Output, EventEmitter } from '@angular/core';
 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-inputs";
-import * as i4 from "@progress/kendo-angular-dialog";
+import * as i2 from "@memberjunction/ng-ui-components";
 function SaveVersionDialogComponent_Conditional_0_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 4);
     i0.ɵɵtext(1);
@@ -20,22 +18,22 @@ function SaveVersionDialogComponent_Conditional_0_Conditional_4_Template(rf, ctx
 } }
 function SaveVersionDialogComponent_Conditional_0_Conditional_9_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 9)(1, "label", 12)(2, "input", 13);
+    i0.ɵɵelementStart(0, "div", 9)(1, "label", 13)(2, "input", 14);
     i0.ɵɵtwoWayListener("ngModelChange", function SaveVersionDialogComponent_Conditional_0_Conditional_9_Template_input_ngModelChange_2_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.Mode, $event) || (ctx_r1.Mode = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 14)(4, "span", 15);
+    i0.ɵɵelementStart(3, "div", 15)(4, "span", 16);
     i0.ɵɵtext(5, "Save as new version");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "span", 16);
+    i0.ɵɵelementStart(6, "span", 17);
     i0.ɵɵtext(7);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(8, "label", 12)(9, "input", 17);
+    i0.ɵɵelementStart(8, "label", 13)(9, "input", 18);
     i0.ɵɵtwoWayListener("ngModelChange", function SaveVersionDialogComponent_Conditional_0_Conditional_9_Template_input_ngModelChange_9_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.Mode, $event) || (ctx_r1.Mode = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(10, "div", 14)(11, "span", 15);
+    i0.ɵɵelementStart(10, "div", 15)(11, "span", 16);
     i0.ɵɵtext(12, "Update current version");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(13, "span", 16);
+    i0.ɵɵelementStart(13, "span", 17);
     i0.ɵɵtext(14);
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
@@ -55,8 +53,8 @@ function SaveVersionDialogComponent_Conditional_0_Conditional_9_Template(rf, ctx
 } }
 function SaveVersionDialogComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "kendo-dialog", 1);
-    i0.ɵɵlistener("close", function SaveVersionDialogComponent_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 SaveVersionDialogComponent_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, "div", 2)(2, "div", 3);
     i0.ɵɵconditionalCreate(3, SaveVersionDialogComponent_Conditional_0_Conditional_3_Template, 2, 1, "span", 4)(4, SaveVersionDialogComponent_Conditional_0_Conditional_4_Template, 2, 0, "span", 5);
     i0.ɵɵelementEnd();
@@ -68,28 +66,24 @@ function SaveVersionDialogComponent_Conditional_0_Template(rf, ctx) { if (rf & 1
     i0.ɵɵelementEnd()();
     i0.ɵɵconditionalCreate(9, SaveVersionDialogComponent_Conditional_0_Conditional_9_Template, 15, 8, "div", 9);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(10, "kendo-dialog-actions")(11, "button", 10);
+    i0.ɵɵelementStart(10, "mj-dialog-actions")(11, "button", 10);
     i0.ɵɵlistener("click", function SaveVersionDialogComponent_Conditional_0_Template_button_click_11_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnSave()); });
     i0.ɵɵelement(12, "i", 11);
     i0.ɵɵtext(13, " Save ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(14, "button", 10);
+    i0.ɵɵelementStart(14, "button", 12);
     i0.ɵɵlistener("click", function SaveVersionDialogComponent_Conditional_0_Template_button_click_14_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnCancel()); });
     i0.ɵɵtext(15, " Cancel ");
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("title", "Save Version")("width", 420);
+    i0.ɵɵproperty("Visible", true)("Width", 420);
     i0.ɵɵadvance(3);
     i0.ɵɵconditional(ctx_r1.CurrentVersion > 0 ? 3 : 4);
     i0.ɵɵadvance(5);
     i0.ɵɵtwoWayProperty("ngModel", ctx_r1.Comment);
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.CurrentVersion > 0 ? 9 : -1);
-    i0.ɵɵadvance(2);
-    i0.ɵɵproperty("themeColor", "primary");
-    i0.ɵɵadvance(3);
-    i0.ɵɵproperty("themeColor", "base");
 } }
 export class SaveVersionDialogComponent {
     Visible = false;
@@ -114,21 +108,17 @@ export class SaveVersionDialogComponent {
         this.Mode = 'new';
     }
     static ɵfac = function SaveVersionDialogComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SaveVersionDialogComponent)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SaveVersionDialogComponent, selectors: [["mj-save-version-dialog"]], inputs: { Visible: "Visible", CurrentVersion: "CurrentVersion" }, outputs: { Save: "Save", Cancel: "Cancel" }, standalone: false, decls: 1, vars: 1, consts: [[3, "title", "width"], [3, "close", "title", "width"], [1, "dialog-body"], [1, "version-context"], [1, "version-badge"], [1, "version-badge", "new-badge"], [1, "form-field"], ["for", "versionComment", 1, "field-label"], ["kendoTextBox", "", "id", "versionComment", "placeholder", "Describe what changed...", 1, "comment-input", 3, "ngModelChange", "ngModel"], [1, "save-mode"], ["kendoButton", "", 3, "click", "themeColor"], [1, "fa-solid", "fa-save"], [1, "radio-option"], ["type", "radio", "name", "saveMode", "value", "new", 3, "ngModelChange", "ngModel"], [1, "radio-content"], [1, "radio-label"], [1, "radio-desc"], ["type", "radio", "name", "saveMode", "value", "update", 3, "ngModelChange", "ngModel"]], template: function SaveVersionDialogComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵconditionalCreate(0, SaveVersionDialogComponent_Conditional_0_Template, 16, 7, "kendo-dialog", 0);
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SaveVersionDialogComponent, selectors: [["mj-save-version-dialog"]], inputs: { Visible: "Visible", CurrentVersion: "CurrentVersion" }, outputs: { Save: "Save", Cancel: "Cancel" }, standalone: false, decls: 1, vars: 1, consts: [["Title", "Save Version", 3, "Visible", "Width"], ["Title", "Save Version", 3, "Close", "Visible", "Width"], [1, "dialog-body"], [1, "version-context"], [1, "version-badge"], [1, "version-badge", "new-badge"], [1, "form-field"], ["for", "versionComment", 1, "field-label"], ["id", "versionComment", "placeholder", "Describe what changed...", 1, "mj-input", "comment-input", 3, "ngModelChange", "ngModel"], [1, "save-mode"], ["mjButton", "", "variant", "primary", 3, "click"], [1, "fa-solid", "fa-save"], ["mjButton", "", 3, "click"], [1, "radio-option"], ["type", "radio", "name", "saveMode", "value", "new", 3, "ngModelChange", "ngModel"], [1, "radio-content"], [1, "radio-label"], [1, "radio-desc"], ["type", "radio", "name", "saveMode", "value", "update", 3, "ngModelChange", "ngModel"]], template: function SaveVersionDialogComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵconditionalCreate(0, SaveVersionDialogComponent_Conditional_0_Template, 16, 5, "mj-dialog", 0);
         } if (rf & 2) {
             i0.ɵɵconditional(ctx.Visible ? 0 : -1);
-        } }, dependencies: [i1.DefaultValueAccessor, i1.RadioControlValueAccessor, i1.NgControlStatus, i1.NgModel, i2.ButtonComponent, i3.TextBoxDirective, i4.DialogComponent, i4.DialogActionsComponent], styles: [".dialog-body[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      gap: 16px;\n      padding: 4px 0;\n    }\n\n    .version-context[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n    }\n\n    .version-badge[_ngcontent-%COMP%] {\n      display: inline-flex;\n      align-items: center;\n      padding: 3px 10px;\n      border-radius: 12px;\n      font-size: 12px;\n      font-weight: 600;\n      background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n      color: var(--mj-brand-primary);\n    }\n\n    .new-badge[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n      color: var(--mj-brand-primary);\n    }\n\n    .form-field[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      gap: 6px;\n    }\n\n    .field-label[_ngcontent-%COMP%] {\n      font-size: 13px;\n      font-weight: 500;\n      color: var(--mj-text-primary);\n    }\n\n    .comment-input[_ngcontent-%COMP%] {\n      width: 100%;\n    }\n\n    .save-mode[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      gap: 8px;\n    }\n\n    .radio-option[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: flex-start;\n      gap: 10px;\n      padding: 10px 12px;\n      border: 1px solid var(--mj-border-default);\n      border-radius: 8px;\n      cursor: pointer;\n      transition: all 0.15s ease;\n    }\n\n    .radio-option[_ngcontent-%COMP%]:hover {\n      background: var(--mj-bg-surface-sunken);\n    }\n\n    .radio-option.selected[_ngcontent-%COMP%] {\n      border-color: var(--mj-brand-primary);\n      background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n    }\n\n    .radio-option[_ngcontent-%COMP%]   input[type=\"radio\"][_ngcontent-%COMP%] {\n      margin-top: 2px;\n      accent-color: var(--mj-brand-primary);\n    }\n\n    .radio-content[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      gap: 2px;\n    }\n\n    .radio-label[_ngcontent-%COMP%] {\n      font-size: 13px;\n      font-weight: 500;\n      color: var(--mj-text-primary);\n    }\n\n    .radio-desc[_ngcontent-%COMP%] {\n      font-size: 11px;\n      color: var(--mj-text-secondary);\n    }"] });
+        } }, dependencies: [i1.DefaultValueAccessor, i1.RadioControlValueAccessor, i1.NgControlStatus, i1.NgModel, i2.MJButtonDirective, i2.MJDialogComponent, i2.MJDialogActionsComponent], styles: [".dialog-body[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      gap: 16px;\n      padding: 4px 0;\n    }\n\n    .version-context[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n    }\n\n    .version-badge[_ngcontent-%COMP%] {\n      display: inline-flex;\n      align-items: center;\n      padding: 3px 10px;\n      border-radius: 12px;\n      font-size: 12px;\n      font-weight: 600;\n      background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n      color: var(--mj-brand-primary);\n    }\n\n    .new-badge[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n      color: var(--mj-brand-primary);\n    }\n\n    .form-field[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      gap: 6px;\n    }\n\n    .field-label[_ngcontent-%COMP%] {\n      font-size: 13px;\n      font-weight: 500;\n      color: var(--mj-text-primary);\n    }\n\n    .comment-input[_ngcontent-%COMP%] {\n      width: 100%;\n    }\n\n    .save-mode[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      gap: 8px;\n    }\n\n    .radio-option[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: flex-start;\n      gap: 10px;\n      padding: 10px 12px;\n      border: 1px solid var(--mj-border-default);\n      border-radius: 8px;\n      cursor: pointer;\n      transition: all 0.15s ease;\n    }\n\n    .radio-option[_ngcontent-%COMP%]:hover {\n      background: var(--mj-bg-surface-sunken);\n    }\n\n    .radio-option.selected[_ngcontent-%COMP%] {\n      border-color: var(--mj-brand-primary);\n      background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n    }\n\n    .radio-option[_ngcontent-%COMP%]   input[type=\"radio\"][_ngcontent-%COMP%] {\n      margin-top: 2px;\n      accent-color: var(--mj-brand-primary);\n    }\n\n    .radio-content[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      gap: 2px;\n    }\n\n    .radio-label[_ngcontent-%COMP%] {\n      font-size: 13px;\n      font-weight: 500;\n      color: var(--mj-text-primary);\n    }\n\n    .radio-desc[_ngcontent-%COMP%] {\n      font-size: 11px;\n      color: var(--mj-text-secondary);\n    }"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SaveVersionDialogComponent, [{
         type: Component,
         args: [{ standalone: false, selector: 'mj-save-version-dialog', template: `
     @if (Visible) {
-      <kendo-dialog
-        [title]="'Save Version'"
-        [width]="420"
-        (close)="OnCancel()">
+      <mj-dialog [Visible]="true" Title="Save Version" [Width]="420" (Close)="OnCancel()">
         <div class="dialog-body">
           <div class="version-context">
             @if (CurrentVersion > 0) {
@@ -141,11 +131,10 @@ export class SaveVersionDialogComponent {
           <div class="form-field">
             <label class="field-label" for="versionComment">Comment</label>
             <input
-              kendoTextBox
+              class="mj-input comment-input"
               id="versionComment"
               [(ngModel)]="Comment"
-              placeholder="Describe what changed..."
-              class="comment-input" />
+              placeholder="Describe what changed..." />
           </div>
           @if (CurrentVersion > 0) {
@@ -168,15 +157,15 @@ export class SaveVersionDialogComponent {
           }
         </div>
-        <kendo-dialog-actions>
-          <button kendoButton [themeColor]="'primary'" (click)="OnSave()">
+        <mj-dialog-actions>
+          <button mjButton variant="primary" (click)="OnSave()">
             <i class="fa-solid fa-save"></i> Save
           </button>
-          <button kendoButton [themeColor]="'base'" (click)="OnCancel()">
+          <button mjButton (click)="OnCancel()">
             Cancel
           </button>
-        </kendo-dialog-actions>
-      </kendo-dialog>
+        </mj-dialog-actions>
+      </mj-dialog>
     }
   `, styles: ["\n    .dialog-body {\n      display: flex;\n      flex-direction: column;\n      gap: 16px;\n      padding: 4px 0;\n    }\n\n    .version-context {\n      display: flex;\n      align-items: center;\n    }\n\n    .version-badge {\n      display: inline-flex;\n      align-items: center;\n      padding: 3px 10px;\n      border-radius: 12px;\n      font-size: 12px;\n      font-weight: 600;\n      background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n      color: var(--mj-brand-primary);\n    }\n\n    .new-badge {\n      background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n      color: var(--mj-brand-primary);\n    }\n\n    .form-field {\n      display: flex;\n      flex-direction: column;\n      gap: 6px;\n    }\n\n    .field-label {\n      font-size: 13px;\n      font-weight: 500;\n      color: var(--mj-text-primary);\n    }\n\n    .comment-input {\n      width: 100%;\n    }\n\n    .save-mode {\n      display: flex;\n      flex-direction: column;\n      gap: 8px;\n    }\n\n    .radio-option {\n      display: flex;\n      align-items: flex-start;\n      gap: 10px;\n      padding: 10px 12px;\n      border: 1px solid var(--mj-border-default);\n      border-radius: 8px;\n      cursor: pointer;\n      transition: all 0.15s ease;\n    }\n\n    .radio-option:hover {\n      background: var(--mj-bg-surface-sunken);\n    }\n\n    .radio-option.selected {\n      border-color: var(--mj-brand-primary);\n      background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n    }\n\n    .radio-option input[type=\"radio\"] {\n      margin-top: 2px;\n      accent-color: var(--mj-brand-primary);\n    }\n\n    .radio-content {\n      display: flex;\n      flex-direction: column;\n      gap: 2px;\n    }\n\n    .radio-label {\n      font-size: 13px;\n      font-weight: 500;\n      color: var(--mj-text-primary);\n    }\n\n    .radio-desc {\n      font-size: 11px;\n      color: var(--mj-text-secondary);\n    }\n  "] }]
     }], null, { Visible: [{
@@ -188,5 +177,5 @@ export class SaveVersionDialogComponent {
         }], Cancel: [{
             type: Output
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SaveVersionDialogComponent, { className: "SaveVersionDialogComponent", filePath: "src/ComponentStudio/components/save-version-dialog/save-version-dialog.component.ts", lineNumber: 162 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SaveVersionDialogComponent, { className: "SaveVersionDialogComponent", filePath: "src/ComponentStudio/components/save-version-dialog/save-version-dialog.component.ts", lineNumber: 157 }); })();
 //# sourceMappingURL=save-version-dialog.component.js.map

package/dist/ComponentStudio/components/save-version-dialog/save-version-dialog.component.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"save-version-dialog.component.js","sourceRoot":"","sources":["../../../../src/ComponentStudio/components/save-version-dialog/save-version-dialog.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC~~;;;;;;;IAoBzD~~,+BAA4B;IAAA,YAA8B;IAAA,iBAAO;;;IAArC,cAA8B;IAA9B,0DAA8B;;;IAE1D,+BAAsC;IAAA,6BAAa;IAAA,iBAAO;;;;~~IAiBxD~~,AADF,AADF,8BAAuB,gBACyC,gBACS;IAArB,yTAAkB;IAAlE,iBAAqE;IAEnE,AADF,+BAA2B,eACC;IAAA,mCAAmB;IAAA,iBAAO;IACpD,gCAAyB;IAAA,YAAiC;IAE9D,AADE,AAD4D,iBAAO,EAC7D,EACA;IAEN,AADF,iCAAiE,gBACS;IAArB,yTAAkB;IAArE,iBAAwE;IAEtE,AADF,gCAA2B,gBACC;IAAA,uCAAsB;IAAA,iBAAO;IACvD,iCAAyB;IAAA,aAAgC;IAG/D,AADE,AADE,AAD2D,iBAAO,EAC5D,EACA,EACJ;;;IAdwB,cAAiC;IAAjC,iDAAiC;IACX,cAAkB;IAAlB,2CAAkB;IAGvC,eAAiC;IAAjC,6DAAiC;IAGlC,cAAoC;IAApC,oDAAoC;IACX,cAAkB;IAAlB,2CAAkB;IAG1C,eAAgC;IAAhC,4DAAgC;;;;~~IArCrE~~,~~uCAGuB~~;IAArB,~~oMAAS~~,iBAAU,KAAC;~~IAGlB~~,AADF,8BAAyB,aACM;IAGzB,AAFF,2GAA0B,qFAEjB;IAGX,iBAAM;IAGJ,AADF,8BAAwB,eAC0B;IAAA,uBAAO;IAAA,iBAAQ;IAC/D,~~gCAK0B~~;~~IAFxB~~,gTAAqB;~~IAGzB~~,~~AANE~~,~~iBAK0B~~,~~EACtB~~;IAEN,2GAA0B;IAkB5B,iBAAM;IAGJ,AADF,~~6CAAsB~~,~~kBAC4C~~;IAAnB,+LAAS,eAAQ,KAAC;~~IAC7D~~,yBAAgC;IAAC,uBACnC;IAAA,iBAAS;IACT,~~mCAA+D~~;IAArB,+LAAS,iBAAU,KAAC;~~IAC5D~~,yBACF;IAEJ,AADE,AADE,iBAAS,~~EACY~~,EACV;;;~~IAlDb~~,~~AADA~~,~~sCAAwB~~,~~cACX~~;~~IAKT~~,eAIC;IAJD,mDAIC;IAQC,eAAqB;IAArB,8CAAqB;~~IAKzB~~,cAiBC;IAjBD,oDAiBC~~;IAImB,eAAwB;IAAxB,sCAAwB;IAGxB,eAAqB;IAArB,mCAAqB~~;;~~AAqGnD~~,MAAM,OAAO,0BAA0B;IAC5B,OAAO,GAAG,KAAK,CAAC;IAChB,cAAc,GAAG,CAAC,CAAC;IAClB,IAAI,GAAG,IAAI,YAAY,EAAqB,CAAC;IAC7C,MAAM,GAAG,IAAI,YAAY,EAAQ,CAAC;IAE5C,OAAO,GAAG,EAAE,CAAC;IACb,IAAI,GAAqB,KAAK,CAAC;IAE/B,MAAM;QACJ,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC;YACb,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,IAAI,EAAE,IAAI,CAAC,IAAI;SAChB,CAAC,CAAC;QACH,IAAI,CAAC,SAAS,EAAE,CAAC;IACnB,CAAC;IAED,QAAQ;QACN,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;QACnB,IAAI,CAAC,SAAS,EAAE,CAAC;IACnB,CAAC;IAEO,SAAS;QACf,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC;QAClB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;IACpB,CAAC;oHAzBU,0BAA0B;6DAA1B,0BAA0B;~~YAtJnC~~,~~sGAAe~~;;YAAf,~~sCAsDC~~;;;iFAgGQ,0BAA0B;~~cA1JtC~~,SAAS;6BACI,KAAK,YACP,wBAAwB,YACxB~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwDT~~;;kBAgGA,KAAK;;kBACL,KAAK;;kBACL,MAAM;;kBACN,MAAM;;kFAJI,0BAA0B","sourcesContent":["import { Component, Input, Output, EventEmitter } from '@angular/core';\n\nexport interface SaveVersionResult {\n Comment: string;\n Mode: 'new' \| 'update';\n}\n\n@Component({\n standalone: false,\n selector: 'mj-save-version-dialog',\n template: `\n @if (Visible) {\n <~~kendo~~-dialog\n [~~title~~]=\"'Save Version'\"\n [~~width~~]=\"420\"\n (~~close~~)=\"OnCancel()\">\n\n <div class=\"dialog-body\">\n <div class=\"version-context\">\n @if (CurrentVersion > 0) {\n <span class=\"version-badge\">Current: v{{ CurrentVersion }}</span>\n } @else {\n <span class=\"version-badge new-badge\">First version</span>\n }\n </div>\n\n <div class=\"form-field\">\n <label class=\"field-label\" for=\"versionComment\">Comment</label>\n <input\n ~~kendoTextBox~~\n id=\"versionComment\"\n [(ngModel)]=\"Comment\"\n placeholder=\"Describe what changed...\"~~\n class=\"comment-input\"~~ />\n </div>\n\n @if (CurrentVersion > 0) {\n <div class=\"save-mode\">\n <label class=\"radio-option\" [class.selected]=\"Mode === 'new'\">\n <input type=\"radio\" name=\"saveMode\" value=\"new\" [(ngModel)]=\"Mode\" />\n <div class=\"radio-content\">\n <span class=\"radio-label\">Save as new version</span>\n <span class=\"radio-desc\">Creates v{{ CurrentVersion + 1 }}</span>\n </div>\n </label>\n <label class=\"radio-option\" [class.selected]=\"Mode === 'update'\">\n <input type=\"radio\" name=\"saveMode\" value=\"update\" [(ngModel)]=\"Mode\" />\n <div class=\"radio-content\">\n <span class=\"radio-label\">Update current version</span>\n <span class=\"radio-desc\">Overwrites v{{ CurrentVersion }}</span>\n </div>\n </label>\n </div>\n }\n </div>\n\n <~~kendo~~-dialog-actions>\n <button ~~kendoButton~~ ~~[themeColor]~~=\"'primary'\" (click)=\"OnSave()\">\n <i class=\"fa-solid fa-save\"></i> Save\n </button>\n <button ~~kendoButton~~ ~~[themeColor]=\"'base'\"~~ (click)=\"OnCancel()\">\n Cancel\n </button>\n </~~kendo~~-dialog-actions>\n </~~kendo~~-dialog>\n }\n `,\n styles: [`\n .dialog-body {\n display: flex;\n flex-direction: column;\n gap: 16px;\n padding: 4px 0;\n }\n\n .version-context {\n display: flex;\n align-items: center;\n }\n\n .version-badge {\n display: inline-flex;\n align-items: center;\n padding: 3px 10px;\n border-radius: 12px;\n font-size: 12px;\n font-weight: 600;\n background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n color: var(--mj-brand-primary);\n }\n\n .new-badge {\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n color: var(--mj-brand-primary);\n }\n\n .form-field {\n display: flex;\n flex-direction: column;\n gap: 6px;\n }\n\n .field-label {\n font-size: 13px;\n font-weight: 500;\n color: var(--mj-text-primary);\n }\n\n .comment-input {\n width: 100%;\n }\n\n .save-mode {\n display: flex;\n flex-direction: column;\n gap: 8px;\n }\n\n .radio-option {\n display: flex;\n align-items: flex-start;\n gap: 10px;\n padding: 10px 12px;\n border: 1px solid var(--mj-border-default);\n border-radius: 8px;\n cursor: pointer;\n transition: all 0.15s ease;\n }\n\n .radio-option:hover {\n background: var(--mj-bg-surface-sunken);\n }\n\n .radio-option.selected {\n border-color: var(--mj-brand-primary);\n background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n }\n\n .radio-option input[type=\"radio\"] {\n margin-top: 2px;\n accent-color: var(--mj-brand-primary);\n }\n\n .radio-content {\n display: flex;\n flex-direction: column;\n gap: 2px;\n }\n\n .radio-label {\n font-size: 13px;\n font-weight: 500;\n color: var(--mj-text-primary);\n }\n\n .radio-desc {\n font-size: 11px;\n color: var(--mj-text-secondary);\n }\n `]\n})\nexport class SaveVersionDialogComponent {\n @Input() Visible = false;\n @Input() CurrentVersion = 0;\n @Output() Save = new EventEmitter<SaveVersionResult>();\n @Output() Cancel = new EventEmitter<void>();\n\n Comment = '';\n Mode: 'new' \| 'update' = 'new';\n\n OnSave(): void {\n this.Save.emit({\n Comment: this.Comment,\n Mode: this.Mode\n });\n this.ResetForm();\n }\n\n OnCancel(): void {\n this.Cancel.emit();\n this.ResetForm();\n }\n\n private ResetForm(): void {\n this.Comment = '';\n this.Mode = 'new';\n }\n}\n"]}
1	+ {"version":3,"file":"save-version-dialog.component.js","sourceRoot":"","sources":["../../../../src/ComponentStudio/components/save-version-dialog/save-version-dialog.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;;;;;IAgBzD,+BAA4B;IAAA,YAA8B;IAAA,iBAAO;;;IAArC,cAA8B;IAA9B,0DAA8B;;;IAE1D,+BAAsC;IAAA,6BAAa;IAAA,iBAAO;;;;IAgBxD,AADF,AADF,8BAAuB,gBACyC,gBACS;IAArB,yTAAkB;IAAlE,iBAAqE;IAEnE,AADF,+BAA2B,eACC;IAAA,mCAAmB;IAAA,iBAAO;IACpD,gCAAyB;IAAA,YAAiC;IAE9D,AADE,AAD4D,iBAAO,EAC7D,EACA;IAEN,AADF,iCAAiE,gBACS;IAArB,yTAAkB;IAArE,iBAAwE;IAEtE,AADF,gCAA2B,gBACC;IAAA,uCAAsB;IAAA,iBAAO;IACvD,iCAAyB;IAAA,aAAgC;IAG/D,AADE,AADE,AAD2D,iBAAO,EAC5D,EACA,EACJ;;;IAdwB,cAAiC;IAAjC,iDAAiC;IACX,cAAkB;IAAlB,2CAAkB;IAGvC,eAAiC;IAAjC,6DAAiC;IAGlC,cAAoC;IAApC,oDAAoC;IACX,cAAkB;IAAlB,2CAAkB;IAG1C,eAAgC;IAAhC,4DAAgC;;;;IAhCrE,oCAAoF;IAArB,iMAAS,iBAAU,KAAC;IAE/E,AADF,8BAAyB,aACM;IAGzB,AAFF,2GAA0B,qFAEjB;IAGX,iBAAM;IAGJ,AADF,8BAAwB,eAC0B;IAAA,uBAAO;IAAA,iBAAQ;IAC/D,gCAI2C;IADzC,gTAAqB;IAEzB,AALE,iBAI2C,EACvC;IAEN,2GAA0B;IAkB5B,iBAAM;IAGJ,AADF,0CAAmB,kBACqC;IAAnB,+LAAS,eAAQ,KAAC;IACnD,yBAAgC;IAAC,uBACnC;IAAA,iBAAS;IACT,mCAAsC;IAArB,+LAAS,iBAAU,KAAC;IACnC,yBACF;IAEJ,AADE,AADE,iBAAS,EACS,EACV;;;IA/CqC,AAAtC,8BAAgB,cAAmC;IAGxD,eAIC;IAJD,mDAIC;IAQC,eAAqB;IAArB,8CAAqB;IAIzB,cAiBC;IAjBD,oDAiBC;;AA4GX,MAAM,OAAO,0BAA0B;IAC5B,OAAO,GAAG,KAAK,CAAC;IAChB,cAAc,GAAG,CAAC,CAAC;IAClB,IAAI,GAAG,IAAI,YAAY,EAAqB,CAAC;IAC7C,MAAM,GAAG,IAAI,YAAY,EAAQ,CAAC;IAE5C,OAAO,GAAG,EAAE,CAAC;IACb,IAAI,GAAqB,KAAK,CAAC;IAE/B,MAAM;QACJ,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC;YACb,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,IAAI,EAAE,IAAI,CAAC,IAAI;SAChB,CAAC,CAAC;QACH,IAAI,CAAC,SAAS,EAAE,CAAC;IACnB,CAAC;IAED,QAAQ;QACN,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;QACnB,IAAI,CAAC,SAAS,EAAE,CAAC;IACnB,CAAC;IAEO,SAAS;QACf,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC;QAClB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;IACpB,CAAC;oHAzBU,0BAA0B;6DAA1B,0BAA0B;YAjJnC,mGAAe;;YAAf,sCAiDC;;;iFAgGQ,0BAA0B;cArJtC,SAAS;6BACI,KAAK,YACP,wBAAwB,YACxB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmDT;;kBAgGA,KAAK;;kBACL,KAAK;;kBACL,MAAM;;kBACN,MAAM;;kFAJI,0BAA0B","sourcesContent":["import { Component, Input, Output, EventEmitter } from '@angular/core';\n\nexport interface SaveVersionResult {\n Comment: string;\n Mode: 'new' \| 'update';\n}\n\n@Component({\n standalone: false,\n selector: 'mj-save-version-dialog',\n template: `\n @if (Visible) {\n <mj-dialog [Visible]=\"true\" Title=\"Save Version\" [Width]=\"420\" (Close)=\"OnCancel()\">\n <div class=\"dialog-body\">\n <div class=\"version-context\">\n @if (CurrentVersion > 0) {\n <span class=\"version-badge\">Current: v{{ CurrentVersion }}</span>\n } @else {\n <span class=\"version-badge new-badge\">First version</span>\n }\n </div>\n\n <div class=\"form-field\">\n <label class=\"field-label\" for=\"versionComment\">Comment</label>\n <input\n class=\"mj-input comment-input\"\n id=\"versionComment\"\n [(ngModel)]=\"Comment\"\n placeholder=\"Describe what changed...\" />\n </div>\n\n @if (CurrentVersion > 0) {\n <div class=\"save-mode\">\n <label class=\"radio-option\" [class.selected]=\"Mode === 'new'\">\n <input type=\"radio\" name=\"saveMode\" value=\"new\" [(ngModel)]=\"Mode\" />\n <div class=\"radio-content\">\n <span class=\"radio-label\">Save as new version</span>\n <span class=\"radio-desc\">Creates v{{ CurrentVersion + 1 }}</span>\n </div>\n </label>\n <label class=\"radio-option\" [class.selected]=\"Mode === 'update'\">\n <input type=\"radio\" name=\"saveMode\" value=\"update\" [(ngModel)]=\"Mode\" />\n <div class=\"radio-content\">\n <span class=\"radio-label\">Update current version</span>\n <span class=\"radio-desc\">Overwrites v{{ CurrentVersion }}</span>\n </div>\n </label>\n </div>\n }\n </div>\n\n <mj-dialog-actions>\n <button mjButton variant=\"primary\" (click)=\"OnSave()\">\n <i class=\"fa-solid fa-save\"></i> Save\n </button>\n <button mjButton (click)=\"OnCancel()\">\n Cancel\n </button>\n </mj-dialog-actions>\n </mj-dialog>\n }\n `,\n styles: [`\n .dialog-body {\n display: flex;\n flex-direction: column;\n gap: 16px;\n padding: 4px 0;\n }\n\n .version-context {\n display: flex;\n align-items: center;\n }\n\n .version-badge {\n display: inline-flex;\n align-items: center;\n padding: 3px 10px;\n border-radius: 12px;\n font-size: 12px;\n font-weight: 600;\n background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n color: var(--mj-brand-primary);\n }\n\n .new-badge {\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n color: var(--mj-brand-primary);\n }\n\n .form-field {\n display: flex;\n flex-direction: column;\n gap: 6px;\n }\n\n .field-label {\n font-size: 13px;\n font-weight: 500;\n color: var(--mj-text-primary);\n }\n\n .comment-input {\n width: 100%;\n }\n\n .save-mode {\n display: flex;\n flex-direction: column;\n gap: 8px;\n }\n\n .radio-option {\n display: flex;\n align-items: flex-start;\n gap: 10px;\n padding: 10px 12px;\n border: 1px solid var(--mj-border-default);\n border-radius: 8px;\n cursor: pointer;\n transition: all 0.15s ease;\n }\n\n .radio-option:hover {\n background: var(--mj-bg-surface-sunken);\n }\n\n .radio-option.selected {\n border-color: var(--mj-brand-primary);\n background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n }\n\n .radio-option input[type=\"radio\"] {\n margin-top: 2px;\n accent-color: var(--mj-brand-primary);\n }\n\n .radio-content {\n display: flex;\n flex-direction: column;\n gap: 2px;\n }\n\n .radio-label {\n font-size: 13px;\n font-weight: 500;\n color: var(--mj-text-primary);\n }\n\n .radio-desc {\n font-size: 11px;\n color: var(--mj-text-secondary);\n }\n `]\n})\nexport class SaveVersionDialogComponent {\n @Input() Visible = false;\n @Input() CurrentVersion = 0;\n @Output() Save = new EventEmitter<SaveVersionResult>();\n @Output() Cancel = new EventEmitter<void>();\n\n Comment = '';\n Mode: 'new' \| 'update' = 'new';\n\n OnSave(): void {\n this.Save.emit({\n Comment: this.Comment,\n Mode: this.Mode\n });\n this.ResetForm();\n }\n\n OnCancel(): void {\n this.Cancel.emit();\n this.ResetForm();\n }\n\n private ResetForm(): void {\n this.Comment = '';\n this.Mode = 'new';\n }\n}\n"]}

package/dist/ComponentStudio/components/text-import-dialog.component.js CHANGED Viewed

@@ -1,8 +1,8 @@
 import { Component, EventEmitter, Output } from '@angular/core';
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/forms";
-import * as i2 from "@progress/kendo-angular-buttons";
-import * as i3 from "@memberjunction/ng-code-editor";
+import * as i2 from "@memberjunction/ng-code-editor";
+import * as i3 from "@memberjunction/ng-ui-components";
 function TextImportDialogComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 4);
     i0.ɵɵelement(1, "i", 9);
@@ -42,7 +42,7 @@ export class TextImportDialogComponent {
         this.cancelDialog.emit();
     }
     static ɵfac = function TextImportDialogComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TextImportDialogComponent)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TextImportDialogComponent, selectors: [["app-text-import-dialog"]], outputs: { importSpec: "importSpec", cancelDialog: "cancelDialog" }, standalone: false, decls: 15, vars: 10, consts: [[1, "text-import-dialog-content"], [1, "dialog-header"], [1, "editor-container"], [2, "height", "400px", 3, "ngModelChange", "ngModel", "language", "autoFocus", "indentWithTab", "readonly", "placeholder"], [1, "error-message"], [1, "dialog-actions"], ["kendoButton", "", 3, "click", "themeColor"], ["kendoButton", "", 3, "click", "themeColor", "disabled"], [1, "fa-solid", "fa-file-import"], [1, "fa-solid", "fa-exclamation-triangle"]], template: function TextImportDialogComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TextImportDialogComponent, selectors: [["app-text-import-dialog"]], outputs: { importSpec: "importSpec", cancelDialog: "cancelDialog" }, standalone: false, decls: 15, vars: 8, consts: [[1, "text-import-dialog-content"], [1, "dialog-header"], [1, "editor-container"], [2, "height", "400px", 3, "ngModelChange", "ngModel", "language", "autoFocus", "indentWithTab", "readonly", "placeholder"], [1, "error-message"], [1, "dialog-actions"], ["mjButton", "", "variant", "primary", 3, "click", "disabled"], [1, "fa-solid", "fa-file-import"], ["mjButton", "", 3, "click"], [1, "fa-solid", "fa-exclamation-triangle"]], template: function TextImportDialogComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "h3");
             i0.ɵɵtext(3, "Import Component from Text");
             i0.ɵɵelementEnd();
@@ -54,13 +54,13 @@ export class TextImportDialogComponent {
             i0.ɵɵelementEnd()();
             i0.ɵɵconditionalCreate(8, TextImportDialogComponent_Conditional_8_Template, 3, 1, "div", 4);
             i0.ɵɵelementStart(9, "div", 5)(10, "button", 6);
-            i0.ɵɵlistener("click", function TextImportDialogComponent_Template_button_click_10_listener() { return ctx.cancel(); });
-            i0.ɵɵtext(11, " Cancel ");
+            i0.ɵɵlistener("click", function TextImportDialogComponent_Template_button_click_10_listener() { return ctx.import(); });
+            i0.ɵɵelement(11, "i", 7);
+            i0.ɵɵtext(12, " Import ");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(12, "button", 7);
-            i0.ɵɵlistener("click", function TextImportDialogComponent_Template_button_click_12_listener() { return ctx.import(); });
-            i0.ɵɵelement(13, "i", 8);
-            i0.ɵɵtext(14, " Import ");
+            i0.ɵɵelementStart(13, "button", 8);
+            i0.ɵɵlistener("click", function TextImportDialogComponent_Template_button_click_13_listener() { return ctx.cancel(); });
+            i0.ɵɵtext(14, " Cancel ");
             i0.ɵɵelementEnd()()();
         } if (rf & 2) {
             i0.ɵɵadvance(7);
@@ -69,10 +69,8 @@ export class TextImportDialogComponent {
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.errorMessage ? 8 : -1);
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("themeColor", "base");
-            i0.ɵɵadvance(2);
-            i0.ɵɵproperty("themeColor", "primary")("disabled", !ctx.componentJson);
-        } }, dependencies: [i1.NgControlStatus, i1.NgModel, i2.ButtonComponent, i3.CodeEditorComponent], styles: [".text-import-dialog-content[_ngcontent-%COMP%] {\n      padding: 20px;\n      display: flex;\n      flex-direction: column;\n      height: 100%;\n    }\n\n    .dialog-header[_ngcontent-%COMP%] {\n      margin-bottom: 15px;\n    }\n\n    .dialog-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n      margin: 0 0 10px 0;\n      color: var(--mj-text-primary);\n    }\n\n    .dialog-header[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n      margin: 0;\n      color: var(--mj-text-secondary);\n      font-size: 14px;\n    }\n\n    .editor-container[_ngcontent-%COMP%] {\n      flex: 1;\n      border: 1px solid var(--mj-border-default);\n      border-radius: 4px;\n      overflow: hidden;\n      margin-bottom: 15px;\n    }\n\n    .error-message[_ngcontent-%COMP%] {\n      background-color: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n      border: 1px solid var(--mj-status-error);\n      color: var(--mj-status-error);\n      padding: 10px;\n      border-radius: 4px;\n      margin-bottom: 15px;\n      font-size: 14px;\n    }\n\n    .error-message[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      margin-right: 8px;\n    }\n\n    .dialog-actions[_ngcontent-%COMP%] {\n      display: flex;\n      justify-content: flex-end;\n      gap: 10px;\n      padding-top: 15px;\n      border-top: 1px solid var(--mj-border-default);\n    }"] });
+            i0.ɵɵproperty("disabled", !ctx.componentJson);
+        } }, dependencies: [i1.NgControlStatus, i1.NgModel, i2.CodeEditorComponent, i3.MJButtonDirective], styles: [".text-import-dialog-content[_ngcontent-%COMP%] {\n      padding: 20px;\n      display: flex;\n      flex-direction: column;\n      height: 100%;\n    }\n\n    .dialog-header[_ngcontent-%COMP%] {\n      margin-bottom: 15px;\n    }\n\n    .dialog-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n      margin: 0 0 10px 0;\n      color: var(--mj-text-primary);\n    }\n\n    .dialog-header[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n      margin: 0;\n      color: var(--mj-text-secondary);\n      font-size: 14px;\n    }\n\n    .editor-container[_ngcontent-%COMP%] {\n      flex: 1;\n      border: 1px solid var(--mj-border-default);\n      border-radius: 4px;\n      overflow: hidden;\n      margin-bottom: 15px;\n    }\n\n    .error-message[_ngcontent-%COMP%] {\n      background-color: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n      border: 1px solid var(--mj-status-error);\n      color: var(--mj-status-error);\n      padding: 10px;\n      border-radius: 4px;\n      margin-bottom: 15px;\n      font-size: 14px;\n    }\n\n    .error-message[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      margin-right: 8px;\n    }\n\n    .dialog-actions[_ngcontent-%COMP%] {\n      display: flex;\n      justify-content: flex-end;\n      gap: 10px;\n      padding-top: 15px;\n      border-top: 1px solid var(--mj-border-default);\n    }"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TextImportDialogComponent, [{
         type: Component,
@@ -103,12 +101,12 @@ export class TextImportDialogComponent {
       }
       <div class="dialog-actions">
-        <button kendoButton (click)="cancel()" [themeColor]="'base'">
-          Cancel
-        </button>
-        <button kendoButton (click)="import()" [themeColor]="'primary'" [disabled]="!componentJson">
+        <button mjButton (click)="import()" variant="primary" [disabled]="!componentJson">
           <i class="fa-solid fa-file-import"></i> Import
         </button>
+        <button mjButton (click)="cancel()">
+          Cancel
+        </button>
       </div>
     </div>
   `, styles: ["\n    .text-import-dialog-content {\n      padding: 20px;\n      display: flex;\n      flex-direction: column;\n      height: 100%;\n    }\n\n    .dialog-header {\n      margin-bottom: 15px;\n    }\n\n    .dialog-header h3 {\n      margin: 0 0 10px 0;\n      color: var(--mj-text-primary);\n    }\n\n    .dialog-header p {\n      margin: 0;\n      color: var(--mj-text-secondary);\n      font-size: 14px;\n    }\n\n    .editor-container {\n      flex: 1;\n      border: 1px solid var(--mj-border-default);\n      border-radius: 4px;\n      overflow: hidden;\n      margin-bottom: 15px;\n    }\n\n    .error-message {\n      background-color: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n      border: 1px solid var(--mj-status-error);\n      color: var(--mj-status-error);\n      padding: 10px;\n      border-radius: 4px;\n      margin-bottom: 15px;\n      font-size: 14px;\n    }\n\n    .error-message i {\n      margin-right: 8px;\n    }\n\n    .dialog-actions {\n      display: flex;\n      justify-content: flex-end;\n      gap: 10px;\n      padding-top: 15px;\n      border-top: 1px solid var(--mj-border-default);\n    }\n  "] }]

package/dist/ComponentStudio/components/text-import-dialog.component.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"text-import-dialog.component.js","sourceRoot":"","sources":["../../../src/ComponentStudio/components/text-import-dialog.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;;;;;;IA0BxD,8BAA2B;IACzB,uBAAgD;IAChD,YACF;IAAA,iBAAM;;;IADJ,eACF;IADE,oDACF;;AAmER,MAAM,OAAO,yBAAyB;IAC1B,UAAU,GAAG,IAAI,YAAY,EAAiB,CAAC;IAC/C,YAAY,GAAG,IAAI,YAAY,EAAQ,CAAC;IAE3C,aAAa,GAAG,EAAE,CAAC;IACnB,YAAY,GAAG,EAAE,CAAC;IAElB,MAAM;QACX,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC;QAEvB,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,EAAE,CAAC;YAC/B,IAAI,CAAC,YAAY,GAAG,wCAAwC,CAAC;YAC7D,OAAO;QACT,CAAC;QAED,IAAI,CAAC;YACH,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,aAAa,CAAkB,CAAC;YAE7D,2BAA2B;YAC3B,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;gBAC7B,IAAI,CAAC,YAAY,GAAG,gEAAgE,CAAC;gBACrF,OAAO;YACT,CAAC;YAED,uBAAuB;YACvB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC7B,CAAC;QAAC,OAAO,KAAK,EAAE,CAAC;YACf,IAAI,CAAC,YAAY,GAAG,gDAAgD,CAAC;QACvE,CAAC;IACH,CAAC;IAEM,MAAM;QACX,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;IAC3B,CAAC;mHAjCU,yBAAyB;6DAAzB,yBAAyB;YAvF9B,AADF,AADF,8BAAwC,aACX,SACrB;YAAA,0CAA0B;YAAA,iBAAK;YACnC,yBAAG;YAAA,sEAAsD;YAC3D,AAD2D,iBAAI,EACzD;YAGJ,AADF,8BAA8B,wBAQH;YANvB,sOAA2B;YAQ/B,AADE,iBAAiB,EACb;YAEN,2FAAoB;YAQlB,AADF,8BAA4B,~~iBACmC~~;~~YAAzC~~,uGAAS,YAAQ,IAAC;~~YACpC~~,~~yBACF~~;YAAA,iBAAS;YACT,~~kCAA4F~~;~~YAAxE~~,uGAAS,YAAQ,IAAC;~~YACpC~~,~~wBAAuC~~;~~YAAC,yBAC1C;~~YAEJ,AADE,AADE,iBAAS,EACL,EACF;;YAzBA,eAA2B;YAA3B,iDAA2B;YAK3B,AADA,AADA,AADA,AADA,iCAAmB,mBACD,uBACI,mBACJ,kEAC+C;YAKrE,cAKC;YALD,2CAKC;~~YAGwC~~,~~eAAqB~~;~~YAArB~~,~~mCAAqB;YAGrB,eAAwB;YAAC,AAAzB,sCAAwB,gCAA4B~~;;;~~iFA4DtF~~,yBAAyB;cA7FrC,SAAS;6BACI,KAAK,YACP,wBAAwB,YACxB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCT;;kBAwDA,MAAM;;kBACN,MAAM;;kFAFI,yBAAyB","sourcesContent":["import { Component, EventEmitter, Output } from '@angular/core';\nimport { ComponentSpec } from '@memberjunction/interactive-component-types';\n\n@Component({\n standalone: false,\n selector: 'app-text-import-dialog',\n template: `\n <div class=\"text-import-dialog-content\">\n <div class=\"dialog-header\">\n <h3>Import Component from Text</h3>\n <p>Paste or type your component specification JSON below:</p>\n </div>\n \n <div class=\"editor-container\">\n <mj-code-editor\n [(ngModel)]=\"componentJson\"\n [language]=\"'json'\"\n [autoFocus]=\"true\"\n [indentWithTab]=\"true\"\n [readonly]=\"false\"\n [placeholder]=\"'Paste your component specification JSON here...'\"\n style=\"height: 400px;\">\n </mj-code-editor>\n </div>\n \n @if (errorMessage) {\n <div class=\"error-message\">\n <i class=\"fa-solid fa-exclamation-triangle\"></i>\n {{ errorMessage }}\n </div>\n }\n \n <div class=\"dialog-actions\">\n <button ~~kendoButton~~ (click)=\"~~cancel()\" [themeColor]=\"'base'\">\n Cancel\n </button>\n <button kendoButton (click)=\"~~import()\" ~~[themeColor]~~=\"'primary'\" [disabled]=\"!componentJson\">\n <i class=\"fa-solid fa-file-import\"></i> Import\n </button>\n </div>\n </div>\n `,\n styles: [`\n .text-import-dialog-content {\n padding: 20px;\n display: flex;\n flex-direction: column;\n height: 100%;\n }\n\n .dialog-header {\n margin-bottom: 15px;\n }\n\n .dialog-header h3 {\n margin: 0 0 10px 0;\n color: var(--mj-text-primary);\n }\n\n .dialog-header p {\n margin: 0;\n color: var(--mj-text-secondary);\n font-size: 14px;\n }\n\n .editor-container {\n flex: 1;\n border: 1px solid var(--mj-border-default);\n border-radius: 4px;\n overflow: hidden;\n margin-bottom: 15px;\n }\n\n .error-message {\n background-color: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n border: 1px solid var(--mj-status-error);\n color: var(--mj-status-error);\n padding: 10px;\n border-radius: 4px;\n margin-bottom: 15px;\n font-size: 14px;\n }\n\n .error-message i {\n margin-right: 8px;\n }\n\n .dialog-actions {\n display: flex;\n justify-content: flex-end;\n gap: 10px;\n padding-top: 15px;\n border-top: 1px solid var(--mj-border-default);\n }\n `]\n})\nexport class TextImportDialogComponent {\n @Output() importSpec = new EventEmitter<ComponentSpec>();\n @Output() cancelDialog = new EventEmitter<void>();\n \n public componentJson = '';\n public errorMessage = '';\n \n public import(): void {\n this.errorMessage = '';\n \n if (!this.componentJson.trim()) {\n this.errorMessage = 'Please enter a component specification';\n return;\n }\n \n try {\n const spec = JSON.parse(this.componentJson) as ComponentSpec;\n \n // Validate required fields\n if (!spec.name \|\| !spec.code) {\n this.errorMessage = 'Invalid specification: missing required fields (name and code)';\n return;\n }\n \n // Emit the parsed spec\n this.importSpec.emit(spec);\n } catch (error) {\n this.errorMessage = 'Invalid JSON format. Please check your syntax.';\n }\n }\n \n public cancel(): void {\n this.cancelDialog.emit();\n }\n}"]}
1	+ {"version":3,"file":"text-import-dialog.component.js","sourceRoot":"","sources":["../../../src/ComponentStudio/components/text-import-dialog.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;;;;;;IA0BxD,8BAA2B;IACzB,uBAAgD;IAChD,YACF;IAAA,iBAAM;;;IADJ,eACF;IADE,oDACF;;AAmER,MAAM,OAAO,yBAAyB;IAC1B,UAAU,GAAG,IAAI,YAAY,EAAiB,CAAC;IAC/C,YAAY,GAAG,IAAI,YAAY,EAAQ,CAAC;IAE3C,aAAa,GAAG,EAAE,CAAC;IACnB,YAAY,GAAG,EAAE,CAAC;IAElB,MAAM;QACX,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC;QAEvB,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,EAAE,CAAC;YAC/B,IAAI,CAAC,YAAY,GAAG,wCAAwC,CAAC;YAC7D,OAAO;QACT,CAAC;QAED,IAAI,CAAC;YACH,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,aAAa,CAAkB,CAAC;YAE7D,2BAA2B;YAC3B,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;gBAC7B,IAAI,CAAC,YAAY,GAAG,gEAAgE,CAAC;gBACrF,OAAO;YACT,CAAC;YAED,uBAAuB;YACvB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC7B,CAAC;QAAC,OAAO,KAAK,EAAE,CAAC;YACf,IAAI,CAAC,YAAY,GAAG,gDAAgD,CAAC;QACvE,CAAC;IACH,CAAC;IAEM,MAAM;QACX,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;IAC3B,CAAC;mHAjCU,yBAAyB;6DAAzB,yBAAyB;YAvF9B,AADF,AADF,8BAAwC,aACX,SACrB;YAAA,0CAA0B;YAAA,iBAAK;YACnC,yBAAG;YAAA,sEAAsD;YAC3D,AAD2D,iBAAI,EACzD;YAGJ,AADF,8BAA8B,wBAQH;YANvB,sOAA2B;YAQ/B,AADE,iBAAiB,EACb;YAEN,2FAAoB;YAQlB,AADF,8BAA4B,iBACwD;YAAjE,uGAAS,YAAQ,IAAC;YACjC,wBAAuC;YAAC,yBAC1C;YAAA,iBAAS;YACT,kCAAoC;YAAnB,uGAAS,YAAQ,IAAC;YACjC,yBACF;YAEJ,AADE,AADE,iBAAS,EACL,EACF;;YAzBA,eAA2B;YAA3B,iDAA2B;YAK3B,AADA,AADA,AADA,AADA,iCAAmB,mBACD,uBACI,mBACJ,kEAC+C;YAKrE,cAKC;YALD,2CAKC;YAGuD,eAA2B;YAA3B,6CAA2B;;;iFA+D5E,yBAAyB;cA7FrC,SAAS;6BACI,KAAK,YACP,wBAAwB,YACxB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCT;;kBAwDA,MAAM;;kBACN,MAAM;;kFAFI,yBAAyB","sourcesContent":["import { Component, EventEmitter, Output } from '@angular/core';\nimport { ComponentSpec } from '@memberjunction/interactive-component-types';\n\n@Component({\n standalone: false,\n selector: 'app-text-import-dialog',\n template: `\n <div class=\"text-import-dialog-content\">\n <div class=\"dialog-header\">\n <h3>Import Component from Text</h3>\n <p>Paste or type your component specification JSON below:</p>\n </div>\n \n <div class=\"editor-container\">\n <mj-code-editor\n [(ngModel)]=\"componentJson\"\n [language]=\"'json'\"\n [autoFocus]=\"true\"\n [indentWithTab]=\"true\"\n [readonly]=\"false\"\n [placeholder]=\"'Paste your component specification JSON here...'\"\n style=\"height: 400px;\">\n </mj-code-editor>\n </div>\n \n @if (errorMessage) {\n <div class=\"error-message\">\n <i class=\"fa-solid fa-exclamation-triangle\"></i>\n {{ errorMessage }}\n </div>\n }\n \n <div class=\"dialog-actions\">\n <button mjButton (click)=\"import()\" variant=\"primary\" [disabled]=\"!componentJson\">\n <i class=\"fa-solid fa-file-import\"></i> Import\n </button>\n <button mjButton (click)=\"cancel()\">\n Cancel\n </button>\n </div>\n </div>\n `,\n styles: [`\n .text-import-dialog-content {\n padding: 20px;\n display: flex;\n flex-direction: column;\n height: 100%;\n }\n\n .dialog-header {\n margin-bottom: 15px;\n }\n\n .dialog-header h3 {\n margin: 0 0 10px 0;\n color: var(--mj-text-primary);\n }\n\n .dialog-header p {\n margin: 0;\n color: var(--mj-text-secondary);\n font-size: 14px;\n }\n\n .editor-container {\n flex: 1;\n border: 1px solid var(--mj-border-default);\n border-radius: 4px;\n overflow: hidden;\n margin-bottom: 15px;\n }\n\n .error-message {\n background-color: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n border: 1px solid var(--mj-status-error);\n color: var(--mj-status-error);\n padding: 10px;\n border-radius: 4px;\n margin-bottom: 15px;\n font-size: 14px;\n }\n\n .error-message i {\n margin-right: 8px;\n }\n\n .dialog-actions {\n display: flex;\n justify-content: flex-end;\n gap: 10px;\n padding-top: 15px;\n border-top: 1px solid var(--mj-border-default);\n }\n `]\n})\nexport class TextImportDialogComponent {\n @Output() importSpec = new EventEmitter<ComponentSpec>();\n @Output() cancelDialog = new EventEmitter<void>();\n \n public componentJson = '';\n public errorMessage = '';\n \n public import(): void {\n this.errorMessage = '';\n \n if (!this.componentJson.trim()) {\n this.errorMessage = 'Please enter a component specification';\n return;\n }\n \n try {\n const spec = JSON.parse(this.componentJson) as ComponentSpec;\n \n // Validate required fields\n if (!spec.name \|\| !spec.code) {\n this.errorMessage = 'Invalid specification: missing required fields (name and code)';\n return;\n }\n \n // Emit the parsed spec\n this.importSpec.emit(spec);\n } catch (error) {\n this.errorMessage = 'Invalid JSON format. Please check your syntax.';\n }\n }\n \n public cancel(): void {\n this.cancelDialog.emit();\n }\n}"]}