@memberjunction/ng-core-entity-forms 5.22.0 → 5.23.0

package/dist/lib/custom/Templates/template-params-grid.component.js

@@ -1,209 +1,21 @@
-import { Component, Input, ViewChild } from '@angular/core';
+import { Component, Input } from '@angular/core';
 import { Metadata, RunView } from '@memberjunction/core';
 import { MJNotificationService } from '@memberjunction/ng-notifications';
-import { GridComponent } from '@progress/kendo-angular-grid';
-import { FormGroup, FormControl, Validators } from '@angular/forms';
+import { ModuleRegistry, AllCommunityModule, themeAlpine, colorSchemeVariable } from 'ag-grid-community';
 import * as i0 from "@angular/core";
-import * as i1 from "@angular/forms";
-import * as i2 from "@progress/kendo-angular-grid";
-import * as i3 from "@progress/kendo-angular-inputs";
-import * as i4 from "@progress/kendo-angular-dropdowns";
-function TemplateParamsGridComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "kendo-grid-toolbar")(1, "button", 15);
-    i0.ɵɵelement(2, "i", 16);
+import * as i1 from "ag-grid-angular";
+import * as i2 from "@memberjunction/ng-ui-components";
+function TemplateParamsGridComponent_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 4)(1, "button", 7);
+    i0.ɵɵlistener("click", function TemplateParamsGridComponent_Conditional_7_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.addNewParam()); });
+    i0.ɵɵelement(2, "i", 8);
     i0.ɵɵtext(3, " Add Parameter ");
     i0.ɵɵelementEnd()();
 } }
-function TemplateParamsGridComponent_ng_template_10_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 18);
-    i0.ɵɵelement(1, "i", 19);
-    i0.ɵɵtext(2, " Required ");
-    i0.ɵɵelementEnd();
-} }
-function TemplateParamsGridComponent_ng_template_10_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 17)(1, "strong");
-    i0.ɵɵtext(2);
-    i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(3, TemplateParamsGridComponent_ng_template_10_Conditional_3_Template, 3, 0, "span", 18);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const dataItem_r1 = ctx.$implicit;
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(dataItem_r1.Name);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(dataItem_r1.IsRequired ? 3 : -1);
-} }
-function TemplateParamsGridComponent_ng_template_11_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 21);
-    i0.ɵɵtext(1, " Parameter name is required ");
-    i0.ɵɵelementEnd();
-} }
-function TemplateParamsGridComponent_ng_template_11_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "kendo-textbox", 20);
-    i0.ɵɵconditionalCreate(1, TemplateParamsGridComponent_ng_template_11_Conditional_1_Template, 2, 0, "span", 21);
-} if (rf & 2) {
-    let tmp_5_0;
-    const formGroup_r2 = ctx.formGroup;
-    i0.ɵɵstyleProp("width", 100, "%");
-    i0.ɵɵproperty("formControl", formGroup_r2.get("name"));
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(((tmp_5_0 = formGroup_r2.get("name")) == null ? null : tmp_5_0.touched) && ((tmp_5_0 = formGroup_r2.get("name")) == null ? null : tmp_5_0.errors == null ? null : tmp_5_0.errors["required"]) ? 1 : -1);
-} }
-function TemplateParamsGridComponent_ng_template_13_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 22);
-    i0.ɵɵelement(1, "i");
-    i0.ɵɵtext(2);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const dataItem_r3 = ctx.$implicit;
-    const ctx_r3 = i0.ɵɵnextContext();
-    i0.ɵɵadvance();
-    i0.ɵɵclassMap(i0.ɵɵinterpolate1("fa-solid ", ctx_r3.getTypeIcon(dataItem_r3.Type)));
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", dataItem_r3.Type, " ");
-} }
-function TemplateParamsGridComponent_ng_template_14_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "kendo-dropdownlist", 23);
-} if (rf & 2) {
-    const formGroup_r5 = ctx.formGroup;
-    const ctx_r3 = i0.ɵɵnextContext();
-    i0.ɵɵstyleProp("width", 100, "%");
-    i0.ɵɵproperty("formControl", formGroup_r5.get("type"))("data", ctx_r3.typeOptions)("valuePrimitive", true);
-} }
-function TemplateParamsGridComponent_ng_template_16_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 25);
-} }
-function TemplateParamsGridComponent_ng_template_16_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 26);
-} }
-function TemplateParamsGridComponent_ng_template_16_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 24);
-    i0.ɵɵconditionalCreate(1, TemplateParamsGridComponent_ng_template_16_Conditional_1_Template, 1, 0, "i", 25);
-    i0.ɵɵconditionalCreate(2, TemplateParamsGridComponent_ng_template_16_Conditional_2_Template, 1, 0, "i", 26);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const dataItem_r6 = ctx.$implicit;
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(dataItem_r6.IsRequired ? 1 : -1);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(!dataItem_r6.IsRequired ? 2 : -1);
-} }
-function TemplateParamsGridComponent_ng_template_17_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "kendo-switch", 27);
-} if (rf & 2) {
-    const formGroup_r7 = ctx.formGroup;
-    i0.ɵɵproperty("formControl", formGroup_r7.get("isRequired"));
-} }
-function TemplateParamsGridComponent_ng_template_19_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 28);
-    i0.ɵɵtext(1);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const dataItem_r8 = ctx.$implicit;
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", dataItem_r8.Description || "(No description)", " ");
-} }
-function TemplateParamsGridComponent_ng_template_20_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "kendo-textarea", 29);
-} if (rf & 2) {
-    const formGroup_r9 = ctx.formGroup;
-    i0.ɵɵstyleProp("width", 100, "%");
-    i0.ɵɵproperty("formControl", formGroup_r9.get("description"))("rows", 2);
-} }
-function TemplateParamsGridComponent_ng_template_22_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "code", 30);
-    i0.ɵɵtext(1);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const dataItem_r10 = i0.ɵɵnextContext().$implicit;
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(dataItem_r10.DefaultValue);
-} }
-function TemplateParamsGridComponent_ng_template_22_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 31);
-    i0.ɵɵtext(1, "(No default)");
-    i0.ɵɵelementEnd();
-} }
-function TemplateParamsGridComponent_ng_template_22_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, TemplateParamsGridComponent_ng_template_22_Conditional_0_Template, 2, 1, "code", 30);
-    i0.ɵɵconditionalCreate(1, TemplateParamsGridComponent_ng_template_22_Conditional_1_Template, 2, 0, "span", 31);
-} if (rf & 2) {
-    const dataItem_r10 = ctx.$implicit;
-    i0.ɵɵconditional(dataItem_r10.DefaultValue ? 0 : -1);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(!dataItem_r10.DefaultValue ? 1 : -1);
-} }
-function TemplateParamsGridComponent_ng_template_23_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "kendo-textarea", 32);
-} if (rf & 2) {
-    const formGroup_r11 = ctx.formGroup;
-    i0.ɵɵstyleProp("width", 100, "%");
-    i0.ɵɵproperty("formControl", formGroup_r11.get("defaultValue"))("rows", 2);
-} }
-function TemplateParamsGridComponent_Conditional_24_ng_template_1_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "button", 33);
-    i0.ɵɵelement(1, "i", 37);
-    i0.ɵɵelementEnd();
-} }
-function TemplateParamsGridComponent_Conditional_24_ng_template_1_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "button", 34);
-    i0.ɵɵelement(1, "i", 38);
-    i0.ɵɵelementEnd();
-} }
-function TemplateParamsGridComponent_Conditional_24_ng_template_1_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "button", 35);
-    i0.ɵɵelement(1, "i", 39);
-    i0.ɵɵelementEnd();
-} }
-function TemplateParamsGridComponent_Conditional_24_ng_template_1_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "button", 36);
-    i0.ɵɵelement(1, "i", 40);
-    i0.ɵɵelementEnd();
-} }
-function TemplateParamsGridComponent_Conditional_24_ng_template_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, TemplateParamsGridComponent_Conditional_24_ng_template_1_Conditional_0_Template, 2, 0, "button", 33);
-    i0.ɵɵconditionalCreate(1, TemplateParamsGridComponent_Conditional_24_ng_template_1_Conditional_1_Template, 2, 0, "button", 34);
-    i0.ɵɵconditionalCreate(2, TemplateParamsGridComponent_Conditional_24_ng_template_1_Conditional_2_Template, 2, 0, "button", 35);
-    i0.ɵɵconditionalCreate(3, TemplateParamsGridComponent_Conditional_24_ng_template_1_Conditional_3_Template, 2, 0, "button", 36);
-} if (rf & 2) {
-    const rowIndex_r12 = ctx.rowIndex;
-    const ctx_r3 = i0.ɵɵnextContext(2);
-    i0.ɵɵconditional(!ctx_r3.isInEditMode(rowIndex_r12) ? 0 : -1);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(!ctx_r3.isInEditMode(rowIndex_r12) ? 1 : -1);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r3.isInEditMode(rowIndex_r12) ? 2 : -1);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r3.isInEditMode(rowIndex_r12) ? 3 : -1);
-} }
-function TemplateParamsGridComponent_Conditional_24_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "kendo-grid-column", 12);
-    i0.ɵɵtemplate(1, TemplateParamsGridComponent_Conditional_24_ng_template_1_Template, 4, 4, "ng-template", 6);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    i0.ɵɵproperty("width", 120);
-} }
-function TemplateParamsGridComponent_ng_template_25_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "p");
-    i0.ɵɵtext(1, "Click \"Add Parameter\" to create your first parameter.");
-    i0.ɵɵelementEnd();
-} }
-function TemplateParamsGridComponent_ng_template_25_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 41);
-    i0.ɵɵelement(1, "i", 42);
-    i0.ɵɵelementStart(2, "p");
-    i0.ɵɵtext(3, "No parameters defined for this template.");
-    i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(4, TemplateParamsGridComponent_ng_template_25_Conditional_4_Template, 2, 0, "p");
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r3 = i0.ɵɵnextContext();
-    i0.ɵɵadvance(4);
-    i0.ɵɵconditional(ctx_r3.editMode ? 4 : -1);
-} }
-function TemplateParamsGridComponent_Conditional_26_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 14)(1, "h4");
-    i0.ɵɵelement(2, "i", 43);
+function TemplateParamsGridComponent_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 6)(1, "h4");
+    i0.ɵɵelement(2, "i", 9);
     i0.ɵɵtext(3, " Parameter Types");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(4, "ul")(5, "li")(6, "strong");
@@ -231,8 +43,8 @@ function TemplateParamsGridComponent_Conditional_26_Template(rf, ctx) { if (rf &
     i0.ɵɵelementEnd();
     i0.ɵɵtext(24, " Multiple records from a MemberJunction entity (can be filtered)");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(25, "p", 44);
-    i0.ɵɵelement(26, "i", 45);
+    i0.ɵɵelementStart(25, "p", 10);
+    i0.ɵɵelement(26, "i", 11);
     i0.ɵɵtext(27, " Use parameters in your template with the syntax: ");
     i0.ɵɵelementStart(28, "code");
     i0.ɵɵtext(29);
@@ -241,25 +53,42 @@ function TemplateParamsGridComponent_Conditional_26_Template(rf, ctx) { if (rf &
     i0.ɵɵadvance(29);
     i0.ɵɵtextInterpolate2("", "{{", " parameterName ", "}}");
 } }
+// Register AG Grid modules
+ModuleRegistry.registerModules([AllCommunityModule]);
 export class TemplateParamsGridComponent {
     constructor() {
         this.template = null;
         this.editMode = false;
         this.templateParams = [];
         this.isLoading = false;
-        // Grid editing
-        this.editedRowIndex = undefined;
-        this.editedParam = null;
         // Type options for dropdown
-        this.typeOptions = [
-            { text: 'Scalar', value: 'Scalar' },
-            { text: 'Array', value: 'Array' },
-            { text: 'Object', value: 'Object' },
-            { text: 'Record', value: 'Record' },
-            { text: 'Entity', value: 'Entity' }
-        ];
+        this.typeOptions = ['Scalar', 'Array', 'Object', 'Record', 'Entity'];
+        // AG Grid configuration
+        this.ColumnDefs = [];
+        this.DefaultColDef = {
+            sortable: true,
+            resizable: true,
+            filter: false,
+            flex: 1
+        };
+        this.GridTheme = themeAlpine.withPart(colorSchemeVariable);
+        this.gridApi = null;
+        /** Row currently being edited (for cancel/revert) */
+        this.editingRowBackup = null;
+        this.editingRowId = null;
+        this.noRowsTemplate = `
+        <div style="text-align: center; padding: 40px 20px; color: var(--mj-text-muted);">
+            <i class="fa-solid fa-info-circle" style="font-size: 2em; margin-bottom: 10px;"></i>
+            <p>No parameters defined for this template.</p>
+        </div>
+    `;
+        this.getRowId = (params) => {
+            // Use entity ID if saved, otherwise use a temporary key
+            return params.data.ID || `new_${params.data.Name}_${Date.now()}`;
+        };
     }
     ngOnInit() {
+        this.buildColumnDefs();
         if (this.template?.ID) {
             this.loadTemplateParams();
         }
@@ -268,6 +97,12 @@ export class TemplateParamsGridComponent {
         if (changes['template'] && this.template?.ID) {
             this.loadTemplateParams();
         }
+        if (changes['editMode']) {
+            this.buildColumnDefs();
+        }
+    }
+    onGridReady(event) {
+        this.gridApi = event.api;
     }
     async loadTemplateParams() {
         if (!this.template?.ID)
@@ -278,10 +113,12 @@ export class TemplateParamsGridComponent {
             const results = await rv.RunView({
                 EntityName: 'MJ: Template Params',
                 ExtraFilter: `TemplateID='${this.template.ID}'`,
-                OrderBy: 'Name ASC'
+                OrderBy: 'Name ASC',
+                ResultType: 'entity_object'
             });
             if (results.Success) {
-                this.templateParams = results.Results || [];
+                const entities = results.Results || [];
+                this.templateParams = entities.map(e => this.entityToRowData(e));
             }
             else {
                 console.error('Failed to load template params:', results.ErrorMessage);
@@ -296,138 +133,177 @@ export class TemplateParamsGridComponent {
             this.isLoading = false;
         }
     }
-    // Grid editing handlers
-    addHandler(args) {
+    // -- Grid editing lifecycle --
+    async addNewParam() {
         if (!this.editMode || !this.template?.ID)
             return;
-        // Create new parameter entity
-        this.createNewParam().then(newParam => {
-            if (newParam) {
-                // Close any existing edits
-                this.closeEditor();
-                // Add to array at the beginning
-                this.templateParams = [newParam, ...this.templateParams];
-                // Enter edit mode for the new row
-                this.editedRowIndex = 0;
-                this.editedParam = newParam;
-                this.formGroup = this.createFormGroup(newParam);
-                // Close the add new row
-                this.grid.closeRow(args.rowIndex);
-                // Edit the newly added row
-                this.grid.editRow(0, this.formGroup);
+        // Cancel any in-progress edit first
+        this.cancelCurrentEdit();
+        const newEntity = await this.createNewParamEntity();
+        if (!newEntity)
+            return;
+        const newRow = this.entityToRowData(newEntity);
+        newRow.IsNew = true;
+        // Prepend the new row
+        this.templateParams = [newRow, ...this.templateParams];
+        // Wait for grid to process the new row, then start editing it
+        setTimeout(() => {
+            if (!this.gridApi)
+                return;
+            const rowNode = this.gridApi.getDisplayedRowAtIndex(0);
+            if (rowNode) {
+                this.editingRowId = rowNode.id ?? null;
+                this.editingRowBackup = { ...newRow };
+                this.gridApi.startEditingCell({
+                    rowIndex: 0,
+                    colKey: 'Name'
+                });
+                this.gridApi.refreshCells({ columns: ['actions'], force: true });
             }
         });
     }
-    editHandler(args) {
-        if (!this.editMode)
+    startEditRow(params) {
+        if (!this.gridApi || !this.editMode)
             return;
-        const { dataItem, rowIndex } = args;
-        // Close any existing edits
-        this.closeEditor();
-        // Set up editing
-        this.editedRowIndex = rowIndex;
-        this.editedParam = dataItem;
-        this.formGroup = this.createFormGroup(dataItem);
+        // Cancel any in-progress edit first
+        this.cancelCurrentEdit();
+        const rowIndex = params.node.rowIndex;
+        if (rowIndex == null)
+            return;
+        this.editingRowId = params.node.id ?? null;
+        this.editingRowBackup = { ...params.data };
+        this.gridApi.startEditingCell({
+            rowIndex,
+            colKey: 'Name'
+        });
+        this.gridApi.refreshCells({ columns: ['actions'], force: true });
     }
-    cancelHandler(args) {
-        const { rowIndex, dataItem } = args;
-        // If this is a new unsaved parameter, remove it
-        if (!dataItem.ID && rowIndex !== undefined) {
-            this.templateParams.splice(rowIndex, 1);
-            this.templateParams = [...this.templateParams];
-        }
-        this.closeEditor();
+    cancelEditRow() {
+        this.cancelCurrentEdit();
     }
-    async saveHandler(args) {
-        if (!this.formGroup || !this.formGroup.valid)
+    saveEditRow() {
+        if (!this.gridApi)
             return;
-        const { dataItem, rowIndex } = args;
-        const formValue = this.formGroup.value;
-        // Update the entity with form values
-        dataItem.Name = formValue.name;
-        dataItem.Type = formValue.type;
-        dataItem.IsRequired = formValue.isRequired;
-        dataItem.Description = formValue.description;
-        dataItem.DefaultValue = formValue.defaultValue;
-        // Handle linked parameter fields for Entity type
-        if (formValue.type === 'Entity') {
-            dataItem.LinkedParameterName = formValue.linkedParameterName;
-            dataItem.LinkedParameterField = formValue.linkedParameterField;
-        }
-        else {
-            dataItem.LinkedParameterName = null;
-            dataItem.LinkedParameterField = null;
-        }
-        try {
-            const saved = await dataItem.Save();
-            if (saved) {
-                MJNotificationService.Instance.CreateSimpleNotification(`Parameter "${dataItem.Name}" saved successfully`, 'success');
-                // Update the array to trigger change detection
-                this.templateParams = [...this.templateParams];
+        // stopEditing triggers onRowEditingStopped, which handles the save
+        this.gridApi.stopEditing(false);
+        this.gridApi.refreshCells({ columns: ['actions'], force: true });
+    }
+    async onRowEditingStopped(event) {
+        const rowData = event.data;
+        if (!rowData)
+            return;
+        // If the user cancelled (via Escape or cancel button backup restore), skip save
+        if (this.editingRowBackup === null)
+            return;
+        // Validate: Name is required
+        if (!rowData.Name || rowData.Name.trim().length === 0) {
+            MJNotificationService.Instance.CreateSimpleNotification('Parameter name is required', 'error');
+            // If it was a new unsaved row, remove it
+            if (rowData.IsNew) {
+                this.templateParams = this.templateParams.filter(p => p !== rowData);
             }
-            else {
-                MJNotificationService.Instance.CreateSimpleNotification(`Failed to save parameter: ${dataItem.LatestResult?.Message || 'Unknown error'}`, 'error');
-                // Reload to revert changes
-                await this.loadTemplateParams();
+            else if (this.editingRowBackup) {
+                // Revert to backup
+                this.revertRow(event.node, this.editingRowBackup);
             }
+            this.clearEditState();
+            return;
         }
-        catch (error) {
-            console.error('Error saving parameter:', error);
-            MJNotificationService.Instance.CreateSimpleNotification('Error saving parameter', 'error');
-            // Reload to revert changes
-            await this.loadTemplateParams();
-        }
-        this.closeEditor();
+        await this.saveParamRow(rowData);
+        this.clearEditState();
     }
-    async removeHandler(args) {
+    async deleteRow(params) {
         if (!this.editMode)
             return;
-        const param = args.dataItem;
-        if (!confirm(`Are you sure you want to delete the parameter "${param.Name}"?`)) {
+        const rowData = params.data;
+        const entity = rowData.Entity;
+        if (!confirm(`Are you sure you want to delete the parameter "${rowData.Name}"?`)) {
             return;
         }
         try {
-            if (param.ID) {
-                const deleted = await param.Delete();
+            if (entity.ID) {
+                const deleted = await entity.Delete();
                 if (deleted) {
-                    MJNotificationService.Instance.CreateSimpleNotification(`Parameter "${param.Name}" deleted successfully`, 'success');
-                    // Remove from array
-                    const index = this.templateParams.indexOf(param);
-                    if (index > -1) {
-                        this.templateParams.splice(index, 1);
-                        this.templateParams = [...this.templateParams];
-                    }
+                    MJNotificationService.Instance.CreateSimpleNotification(`Parameter "${rowData.Name}" deleted successfully`, 'success');
+                    this.templateParams = this.templateParams.filter(p => p !== rowData);
                 }
                 else {
-                    MJNotificationService.Instance.CreateSimpleNotification(`Failed to delete parameter: ${param.LatestResult?.Message || 'Unknown error'}`, 'error');
+                    MJNotificationService.Instance.CreateSimpleNotification(`Failed to delete parameter: ${entity.LatestResult?.Message || 'Unknown error'}`, 'error');
                 }
             }
+            else {
+                // Not yet saved -- just remove from the array
+                this.templateParams = this.templateParams.filter(p => p !== rowData);
+            }
         }
         catch (error) {
             console.error('Error deleting parameter:', error);
             MJNotificationService.Instance.CreateSimpleNotification('Error deleting parameter', 'error');
         }
     }
-    createFormGroup(param) {
-        return new FormGroup({
-            name: new FormControl(param.Name, Validators.required),
-            type: new FormControl(param.Type || 'Scalar', Validators.required),
-            isRequired: new FormControl(param.IsRequired || false),
-            description: new FormControl(param.Description),
-            defaultValue: new FormControl(param.DefaultValue),
-            linkedParameterName: new FormControl(param.LinkedParameterName),
-            linkedParameterField: new FormControl(param.LinkedParameterField)
-        });
+    // -- Helpers --
+    getTypeIcon(type) {
+        switch (type) {
+            case 'Scalar': return 'fa-font';
+            case 'Array': return 'fa-list';
+            case 'Object': return 'fa-cube';
+            case 'Record': return 'fa-file';
+            case 'Entity': return 'fa-table';
+            default: return 'fa-question';
+        }
+    }
+    entityToRowData(entity) {
+        return {
+            Entity: entity,
+            ID: entity.ID || '',
+            Name: entity.Name || '',
+            Type: entity.Type || 'Scalar',
+            IsRequired: entity.IsRequired || false,
+            Description: entity.Description || '',
+            DefaultValue: entity.DefaultValue || '',
+            LinkedParameterName: entity.LinkedParameterName || '',
+            LinkedParameterField: entity.LinkedParameterField || '',
+            IsNew: false
+        };
     }
-    closeEditor() {
-        if (this.editedRowIndex !== undefined) {
-            this.grid.closeRow(this.editedRowIndex);
+    async saveParamRow(rowData) {
+        const entity = rowData.Entity;
+        entity.Name = rowData.Name;
+        entity.Type = rowData.Type;
+        entity.IsRequired = rowData.IsRequired;
+        entity.Description = rowData.Description;
+        entity.DefaultValue = rowData.DefaultValue;
+        // Handle linked parameter fields for Entity type
+        if (rowData.Type === 'Entity') {
+            entity.LinkedParameterName = rowData.LinkedParameterName;
+            entity.LinkedParameterField = rowData.LinkedParameterField;
+        }
+        else {
+            entity.LinkedParameterName = null;
+            entity.LinkedParameterField = null;
+        }
+        try {
+            const saved = await entity.Save();
+            if (saved) {
+                MJNotificationService.Instance.CreateSimpleNotification(`Parameter "${entity.Name}" saved successfully`, 'success');
+                // Update the row data with the saved entity ID
+                rowData.ID = entity.ID;
+                rowData.IsNew = false;
+                // Refresh the grid to pick up the new ID
+                this.templateParams = [...this.templateParams];
+            }
+            else {
+                MJNotificationService.Instance.CreateSimpleNotification(`Failed to save parameter: ${entity.LatestResult?.Message || 'Unknown error'}`, 'error');
+                await this.loadTemplateParams();
+            }
+        }
+        catch (error) {
+            console.error('Error saving parameter:', error);
+            MJNotificationService.Instance.CreateSimpleNotification('Error saving parameter', 'error');
+            await this.loadTemplateParams();
         }
-        this.editedRowIndex = undefined;
-        this.editedParam = null;
-        this.formGroup = undefined;
     }
-    async createNewParam() {
+    async createNewParamEntity() {
         if (!this.template?.ID)
             return null;
         try {
@@ -443,38 +319,122 @@ export class TemplateParamsGridComponent {
             return null;
         }
     }
-    isInEditMode(rowIndex) {
-        return this.editedRowIndex === rowIndex;
-    }
-    // Helper for displaying type with icon
-    getTypeIcon(type) {
-        switch (type) {
-            case 'Scalar': return 'fa-font';
-            case 'Array': return 'fa-list';
-            case 'Object': return 'fa-cube';
-            case 'Record': return 'fa-file';
-            case 'Entity': return 'fa-table';
-            default: return 'fa-question';
+    cancelCurrentEdit() {
+        if (!this.gridApi)
+            return;
+        if (this.editingRowBackup && this.editingRowId) {
+            const rowNode = this.gridApi.getRowNode(this.editingRowId);
+            if (rowNode) {
+                // If the row was new and unsaved, remove it
+                if (this.editingRowBackup.IsNew) {
+                    const backup = this.editingRowBackup;
+                    this.clearEditState();
+                    this.gridApi.stopEditing(true);
+                    this.templateParams = this.templateParams.filter(p => p.Entity !== backup.Entity);
+                    return;
+                }
+                // Revert to backup
+                this.revertRow(rowNode, this.editingRowBackup);
+            }
         }
+        this.clearEditState();
+        this.gridApi.stopEditing(true);
+        this.gridApi.refreshCells({ columns: ['actions'], force: true });
     }
-    // Helper for type descriptions
-    getTypeDescription(type) {
-        switch (type) {
-            case 'Scalar': return 'Single value (text, number, etc.)';
-            case 'Array': return 'List of values';
-            case 'Object': return 'JSON object';
-            case 'Record': return 'Single record from an entity';
-            case 'Entity': return 'Multiple records from an entity';
-            default: return '';
+    revertRow(rowNode, backup) {
+        rowNode.setData(backup);
+    }
+    clearEditState() {
+        this.editingRowBackup = null;
+        this.editingRowId = null;
+    }
+    buildColumnDefs() {
+        const self = this;
+        const cols = [
+            {
+                field: 'Name',
+                headerName: 'Parameter Name',
+                width: 200,
+                editable: this.editMode,
+                cellRenderer: (params) => {
+                    if (!params.value)
+                        return '';
+                    const row = params.data;
+                    let html = `<strong>${params.value}</strong>`;
+                    if (row.IsRequired) {
+                        html += ` <span style="display: inline-flex; align-items: center; gap: 4px; background-color: var(--mj-status-error); color: var(--mj-text-inverse); padding: 2px 8px; border-radius: 12px; font-size: 0.75em; font-weight: 500;"><i class="fa-solid fa-asterisk" style="font-size: 0.6em;"></i> Required</span>`;
+                    }
+                    return html;
+                }
+            },
+            {
+                field: 'Type',
+                headerName: 'Type',
+                width: 140,
+                editable: this.editMode,
+                cellEditor: 'agSelectCellEditor',
+                cellEditorParams: {
+                    values: this.typeOptions
+                },
+                cellRenderer: (params) => {
+                    if (!params.value)
+                        return '';
+                    const icon = self.getTypeIcon(params.value);
+                    return `<span style="display: flex; align-items: center; gap: 6px; color: var(--mj-text-secondary);"><i class="fa-solid ${icon}" style="color: var(--mj-text-muted);"></i> ${params.value}</span>`;
+                }
+            },
+            {
+                field: 'IsRequired',
+                headerName: 'Required',
+                width: 100,
+                editable: this.editMode,
+                cellDataType: 'boolean',
+                cellRenderer: (params) => {
+                    if (params.value) {
+                        return `<div style="text-align: center;"><i class="fa-solid fa-check" style="color: var(--mj-status-success);"></i></div>`;
+                    }
+                    return `<div style="text-align: center;"><i class="fa-solid fa-times" style="color: var(--mj-text-muted);"></i></div>`;
+                }
+            },
+            {
+                field: 'Description',
+                headerName: 'Description',
+                width: 300,
+                editable: this.editMode,
+                cellRenderer: (params) => {
+                    return params.value || '<span style="color: var(--mj-text-muted); font-style: italic; font-size: 0.9em;">(No description)</span>';
+                }
+            },
+            {
+                field: 'DefaultValue',
+                headerName: 'Default Value',
+                width: 200,
+                editable: this.editMode,
+                cellRenderer: (params) => {
+                    if (params.value) {
+                        return `<code style="background-color: var(--mj-bg-surface-card); padding: 2px 6px; border-radius: 3px; font-size: 0.85em; color: var(--mj-text-secondary);">${params.value}</code>`;
+                    }
+                    return '<span style="color: var(--mj-text-muted); font-style: italic; font-size: 0.9em;">(No default)</span>';
+                }
+            }
+        ];
+        if (this.editMode) {
+            cols.push({
+                headerName: 'Actions',
+                width: 120,
+                sortable: false,
+                resizable: false,
+                editable: false,
+                cellRenderer: ActionsCellRenderer,
+                cellRendererParams: {
+                    componentRef: self
+                }
+            });
         }
+        this.ColumnDefs = cols;
     }
     static { this.ɵfac = function TemplateParamsGridComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TemplateParamsGridComponent)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TemplateParamsGridComponent, selectors: [["mj-template-params-grid"]], viewQuery: function TemplateParamsGridComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(GridComponent, 5);
-        } if (rf & 2) {
-            let _t;
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.grid = _t.first);
-        } }, inputs: { template: "template", editMode: "editMode" }, standalone: false, features: [i0.ɵɵNgOnChangesFeature], decls: 27, vars: 14, consts: [[1, "template-params-grid"], [1, "params-header"], [1, "fa-solid", "fa-sliders"], [1, "params-description"], [3, "add", "edit", "cancel", "save", "remove", "data", "loading", "height", "pageable", "sortable", "resizable"], ["field", "Name", "title", "Parameter Name", 3, "width"], ["kendoGridCellTemplate", ""], ["kendoGridEditTemplate", ""], ["field", "Type", "title", "Type", 3, "width"], ["field", "IsRequired", "title", "Required", 3, "width"], ["field", "Description", "title", "Description", 3, "width"], ["field", "DefaultValue", "title", "Default Value", 3, "width"], ["title", "Actions", 3, "width"], ["kendoGridNoRecordsTemplate", ""], [1, "params-help"], ["kendoGridAddCommand", "", "type", "button", 1, "k-button", "k-button-md", "k-rounded-md", "k-button-solid", "k-button-solid-primary"], [1, "fa-solid", "fa-plus"], [1, "param-name"], [1, "required-badge"], [1, "fa-solid", "fa-asterisk"], ["placeholder", "Enter parameter name...", 3, "formControl"], [1, "k-invalid-msg"], [1, "param-type"], ["textField", "text", "valueField", "value", 3, "formControl", "data", "valuePrimitive"], [1, "text-center"], [1, "fa-solid", "fa-check", "text-success"], [1, "fa-solid", "fa-times", "text-muted"], [3, "formControl"], [1, "param-description"], ["placeholder", "Enter parameter description...", 3, "formControl", "rows"], [1, "default-value"], [1, "text-muted"], ["placeholder", "Enter default value...", 3, "formControl", "rows"], ["kendoGridEditCommand", "", "type", "button", "title", "Edit parameter", 1, "k-button", "k-button-md", "k-rounded-md", "k-button-solid", "k-button-solid-base"], ["kendoGridRemoveCommand", "", "type", "button", "title", "Delete parameter", 1, "k-button", "k-button-md", "k-rounded-md", "k-button-solid", "k-button-solid-base"], ["kendoGridSaveCommand", "", "type", "button", "title", "Save changes", 1, "k-button", "k-button-md", "k-rounded-md", "k-button-solid", "k-button-solid-primary"], ["kendoGridCancelCommand", "", "type", "button", "title", "Cancel changes", 1, "k-button", "k-button-md", "k-rounded-md", "k-button-solid", "k-button-solid-base"], [1, "fa-solid", "fa-edit"], [1, "fa-solid", "fa-trash"], [1, "fa-solid", "fa-check"], [1, "fa-solid", "fa-times"], [1, "no-params-message"], [1, "fa-solid", "fa-info-circle"], [1, "fa-solid", "fa-question-circle"], [1, "help-note"], [1, "fa-solid", "fa-lightbulb"]], template: function TemplateParamsGridComponent_Template(rf, ctx) { if (rf & 1) {
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TemplateParamsGridComponent, selectors: [["mj-template-params-grid"]], inputs: { template: "template", editMode: "editMode" }, standalone: false, features: [i0.ɵɵNgOnChangesFeature], decls: 10, vars: 10, consts: [[1, "template-params-grid"], [1, "params-header"], [1, "fa-solid", "fa-sliders"], [1, "params-description"], [1, "params-toolbar"], [1, "params-ag-grid", 2, "width", "100%", "height", "400px", 3, "gridReady", "rowEditingStopped", "theme", "rowData", "columnDefs", "defaultColDef", "editType", "getRowId", "suppressClickEdit", "overlayNoRowsTemplate"], [1, "params-help"], ["mjButton", "", "variant", "primary", 3, "click"], [1, "fa-solid", "fa-plus"], [1, "fa-solid", "fa-question-circle"], [1, "help-note"], [1, "fa-solid", "fa-lightbulb"]], template: function TemplateParamsGridComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "h3");
             i0.ɵɵelement(3, "i", 2);
             i0.ɵɵtext(4, " Template Parameters");
@@ -482,60 +442,96 @@ export class TemplateParamsGridComponent {
             i0.ɵɵelementStart(5, "p", 3);
             i0.ɵɵtext(6, " Define the parameters that can be used within this template. Parameters allow dynamic content injection at runtime. ");
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(7, "kendo-grid", 4);
-            i0.ɵɵlistener("add", function TemplateParamsGridComponent_Template_kendo_grid_add_7_listener($event) { return ctx.addHandler($event); })("edit", function TemplateParamsGridComponent_Template_kendo_grid_edit_7_listener($event) { return ctx.editHandler($event); })("cancel", function TemplateParamsGridComponent_Template_kendo_grid_cancel_7_listener($event) { return ctx.cancelHandler($event); })("save", function TemplateParamsGridComponent_Template_kendo_grid_save_7_listener($event) { return ctx.saveHandler($event); })("remove", function TemplateParamsGridComponent_Template_kendo_grid_remove_7_listener($event) { return ctx.removeHandler($event); });
-            i0.ɵɵconditionalCreate(8, TemplateParamsGridComponent_Conditional_8_Template, 4, 0, "kendo-grid-toolbar");
-            i0.ɵɵelementStart(9, "kendo-grid-column", 5);
-            i0.ɵɵtemplate(10, TemplateParamsGridComponent_ng_template_10_Template, 4, 2, "ng-template", 6)(11, TemplateParamsGridComponent_ng_template_11_Template, 2, 4, "ng-template", 7);
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(12, "kendo-grid-column", 8);
-            i0.ɵɵtemplate(13, TemplateParamsGridComponent_ng_template_13_Template, 3, 4, "ng-template", 6)(14, TemplateParamsGridComponent_ng_template_14_Template, 1, 5, "ng-template", 7);
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(15, "kendo-grid-column", 9);
-            i0.ɵɵtemplate(16, TemplateParamsGridComponent_ng_template_16_Template, 3, 2, "ng-template", 6)(17, TemplateParamsGridComponent_ng_template_17_Template, 1, 1, "ng-template", 7);
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(18, "kendo-grid-column", 10);
-            i0.ɵɵtemplate(19, TemplateParamsGridComponent_ng_template_19_Template, 2, 1, "ng-template", 6)(20, TemplateParamsGridComponent_ng_template_20_Template, 1, 4, "ng-template", 7);
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(21, "kendo-grid-column", 11);
-            i0.ɵɵtemplate(22, TemplateParamsGridComponent_ng_template_22_Template, 2, 2, "ng-template", 6)(23, TemplateParamsGridComponent_ng_template_23_Template, 1, 4, "ng-template", 7);
+            i0.ɵɵconditionalCreate(7, TemplateParamsGridComponent_Conditional_7_Template, 4, 0, "div", 4);
+            i0.ɵɵelementStart(8, "ag-grid-angular", 5);
+            i0.ɵɵlistener("gridReady", function TemplateParamsGridComponent_Template_ag_grid_angular_gridReady_8_listener($event) { return ctx.onGridReady($event); })("rowEditingStopped", function TemplateParamsGridComponent_Template_ag_grid_angular_rowEditingStopped_8_listener($event) { return ctx.onRowEditingStopped($event); });
             i0.ɵɵelementEnd();
-            i0.ɵɵconditionalCreate(24, TemplateParamsGridComponent_Conditional_24_Template, 2, 1, "kendo-grid-column", 12);
-            i0.ɵɵtemplate(25, TemplateParamsGridComponent_ng_template_25_Template, 5, 1, "ng-template", 13);
-            i0.ɵɵelementEnd();
-            i0.ɵɵconditionalCreate(26, TemplateParamsGridComponent_Conditional_26_Template, 30, 2, "div", 14);
+            i0.ɵɵconditionalCreate(9, TemplateParamsGridComponent_Conditional_9_Template, 30, 2, "div", 6);
             i0.ɵɵelementEnd();
         } if (rf & 2) {
             i0.ɵɵadvance(7);
-            i0.ɵɵproperty("data", ctx.templateParams)("loading", ctx.isLoading)("height", 400)("pageable", false)("sortable", true)("resizable", true);
+            i0.ɵɵconditional(ctx.editMode ? 7 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.editMode ? 8 : -1);
+            i0.ɵɵproperty("theme", ctx.GridTheme)("rowData", ctx.templateParams)("columnDefs", ctx.ColumnDefs)("defaultColDef", ctx.DefaultColDef)("editType", "fullRow")("getRowId", ctx.getRowId)("suppressClickEdit", true)("overlayNoRowsTemplate", ctx.noRowsTemplate);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("width", 200);
-            i0.ɵɵadvance(3);
-            i0.ɵɵproperty("width", 140);
-            i0.ɵɵadvance(3);
-            i0.ɵɵproperty("width", 100);
-            i0.ɵɵadvance(3);
-            i0.ɵɵproperty("width", 300);
-            i0.ɵɵadvance(3);
-            i0.ɵɵproperty("width", 200);
-            i0.ɵɵadvance(3);
-            i0.ɵɵconditional(ctx.editMode ? 24 : -1);
-            i0.ɵɵadvance(2);
-            i0.ɵɵconditional(ctx.editMode ? 26 : -1);
-        } }, dependencies: [i1.NgControlStatus, i1.FormControlDirective, i2.GridComponent, i2.ToolbarComponent, i2.GridToolbarFocusableDirective, i2.ColumnComponent, i2.FocusableDirective, i2.CellTemplateDirective, i2.EditTemplateDirective, i2.NoRecordsTemplateDirective, i2.EditCommandDirective, i2.CancelCommandDirective, i2.SaveCommandDirective, i2.RemoveCommandDirective, i2.AddCommandDirective, i3.TextBoxComponent, i3.TextAreaComponent, i3.SwitchComponent, i4.DropDownListComponent], styles: [".template-params-grid[_ngcontent-%COMP%] {\n    padding: 20px;\n}\n\n.params-header[_ngcontent-%COMP%] {\n    margin-bottom: 20px;\n}\n\n.params-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n    margin: 0 0 8px 0;\n    color: var(--mj-text-primary);\n    font-size: 1.2em;\n}\n\n.params-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    margin-right: 8px;\n    color: var(--mj-brand-primary);\n}\n\n.params-description[_ngcontent-%COMP%] {\n    margin: 0;\n    color: var(--mj-text-secondary);\n    font-size: 0.9em;\n}\n\n.param-name[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.required-badge[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    background-color: var(--mj-status-error);\n    color: var(--mj-text-inverse);\n    padding: 2px 8px;\n    border-radius: 12px;\n    font-size: 0.75em;\n    font-weight: 500;\n}\n\n.required-badge[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 0.6em;\n}\n\n.param-type[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    color: var(--mj-text-secondary);\n}\n\n.param-type[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-text-muted);\n}\n\n.param-description[_ngcontent-%COMP%] {\n    color: var(--mj-text-secondary);\n    font-size: 0.9em;\n    line-height: 1.4;\n}\n\n.default-value[_ngcontent-%COMP%] {\n    background-color: var(--mj-bg-surface-card);\n    padding: 2px 6px;\n    border-radius: 3px;\n    font-size: 0.85em;\n    color: var(--mj-text-secondary);\n    word-break: break-word;\n}\n\n.text-muted[_ngcontent-%COMP%] {\n    color: var(--mj-text-muted);\n    font-style: italic;\n    font-size: 0.9em;\n}\n\n.text-success[_ngcontent-%COMP%] {\n    color: var(--mj-status-success);\n}\n\n.text-center[_ngcontent-%COMP%] {\n    text-align: center;\n}\n\n.no-params-message[_ngcontent-%COMP%] {\n    text-align: center;\n    padding: 40px 20px;\n    color: var(--mj-text-muted);\n}\n\n.no-params-message[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 2em;\n    margin-bottom: 10px;\n    color: var(--mj-text-muted);\n}\n\n.no-params-message[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n    margin: 5px 0;\n}\n\n\n\n.params-help[_ngcontent-%COMP%] {\n    margin-top: 30px;\n    padding: 20px;\n    background-color: var(--mj-bg-surface-card);\n    border-radius: 8px;\n    border: 1px solid var(--mj-border-default);\n}\n\n.params-help[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n    margin: 0 0 15px 0;\n    color: var(--mj-text-primary);\n    font-size: 1em;\n}\n\n.params-help[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    margin-right: 6px;\n    color: var(--mj-brand-primary);\n}\n\n.params-help[_ngcontent-%COMP%]   ul[_ngcontent-%COMP%] {\n    margin: 10px 0;\n    padding-left: 25px;\n}\n\n.params-help[_ngcontent-%COMP%]   li[_ngcontent-%COMP%] {\n    margin-bottom: 8px;\n    color: var(--mj-text-secondary);\n    font-size: 0.9em;\n}\n\n.params-help[_ngcontent-%COMP%]   strong[_ngcontent-%COMP%] {\n    color: var(--mj-text-primary);\n}\n\n.help-note[_ngcontent-%COMP%] {\n    margin-top: 15px;\n    padding: 10px 15px;\n    background-color: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n    border-left: 4px solid var(--mj-brand-primary);\n    border-radius: 4px;\n    font-size: 0.9em;\n}\n\n.help-note[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    margin-right: 6px;\n    color: var(--mj-brand-primary);\n}\n\n.help-note[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {\n    background-color: var(--mj-bg-surface);\n    padding: 2px 4px;\n    border-radius: 3px;\n    font-family: 'Courier New', monospace;\n    color: var(--mj-status-error);\n}\n\n\n\n.k-grid-content[_ngcontent-%COMP%]   button[_ngcontent-%COMP%] {\n    margin-right: 4px;\n}\n\n\n\n.k-invalid-msg[_ngcontent-%COMP%] {\n    display: block;\n    color: var(--mj-status-error);\n    font-size: 0.85em;\n    margin-top: 4px;\n}\n\n\n\n.k-grid[_ngcontent-%COMP%]   .k-toolbar[_ngcontent-%COMP%] {\n    background-color: var(--mj-bg-surface-card);\n    border-bottom: 1px solid var(--mj-border-default);\n    padding: 12px;\n}\n\n.k-grid-header[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {\n    background-color: var(--mj-bg-surface-card);\n    font-weight: 600;\n    color: var(--mj-text-secondary);\n}\n\n\n\n@media (max-width: 768px) {\n    .template-params-grid[_ngcontent-%COMP%] {\n        padding: 10px;\n    }\n\n    .params-help[_ngcontent-%COMP%] {\n        padding: 15px;\n    }\n}"] }); }
+            i0.ɵɵconditional(ctx.editMode ? 9 : -1);
+        } }, dependencies: [i1.AgGridAngular, i2.MJButtonDirective], styles: [".template-params-grid[_ngcontent-%COMP%] {\n    padding: 20px;\n}\n\n.params-header[_ngcontent-%COMP%] {\n    margin-bottom: 20px;\n}\n\n.params-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n    margin: 0 0 8px 0;\n    color: var(--mj-text-primary);\n    font-size: 1.2em;\n}\n\n.params-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    margin-right: 8px;\n    color: var(--mj-brand-primary);\n}\n\n.params-description[_ngcontent-%COMP%] {\n    margin: 0;\n    color: var(--mj-text-secondary);\n    font-size: 0.9em;\n}\n\n\n\n.params-toolbar[_ngcontent-%COMP%] {\n    margin-bottom: 12px;\n    padding: 12px;\n    background-color: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px 6px 0 0;\n}\n\n\n\n.params-ag-grid[_ngcontent-%COMP%] {\n    border: 1px solid var(--mj-border-default);\n    border-radius: 0 0 6px 6px;\n}\n\n.params-toolbar[_ngcontent-%COMP%]    + .params-ag-grid[_ngcontent-%COMP%] {\n    border-top: none;\n}\n\n\n\n.params-help[_ngcontent-%COMP%] {\n    margin-top: 30px;\n    padding: 20px;\n    background-color: var(--mj-bg-surface-card);\n    border-radius: 8px;\n    border: 1px solid var(--mj-border-default);\n}\n\n.params-help[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n    margin: 0 0 15px 0;\n    color: var(--mj-text-primary);\n    font-size: 1em;\n}\n\n.params-help[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    margin-right: 6px;\n    color: var(--mj-brand-primary);\n}\n\n.params-help[_ngcontent-%COMP%]   ul[_ngcontent-%COMP%] {\n    margin: 10px 0;\n    padding-left: 25px;\n}\n\n.params-help[_ngcontent-%COMP%]   li[_ngcontent-%COMP%] {\n    margin-bottom: 8px;\n    color: var(--mj-text-secondary);\n    font-size: 0.9em;\n}\n\n.params-help[_ngcontent-%COMP%]   strong[_ngcontent-%COMP%] {\n    color: var(--mj-text-primary);\n}\n\n.help-note[_ngcontent-%COMP%] {\n    margin-top: 15px;\n    padding: 10px 15px;\n    background-color: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n    border-left: 4px solid var(--mj-brand-primary);\n    border-radius: 4px;\n    font-size: 0.9em;\n}\n\n.help-note[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    margin-right: 6px;\n    color: var(--mj-brand-primary);\n}\n\n.help-note[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {\n    background-color: var(--mj-bg-surface);\n    padding: 2px 4px;\n    border-radius: 3px;\n    font-family: 'Courier New', monospace;\n    color: var(--mj-status-error);\n}\n\n\n\n@media (max-width: 768px) {\n    .template-params-grid[_ngcontent-%COMP%] {\n        padding: 10px;\n    }\n\n    .params-help[_ngcontent-%COMP%] {\n        padding: 15px;\n    }\n}"] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TemplateParamsGridComponent, [{
         type: Component,
-        args: [{ standalone: false, selector: 'mj-template-params-grid', template: "<div class=\"template-params-grid\">\n  <div class=\"params-header\">\n    <h3><i class=\"fa-solid fa-sliders\"></i> Template Parameters</h3>\n    <p class=\"params-description\">\n      Define the parameters that can be used within this template. Parameters allow dynamic content injection at runtime.\n    </p>\n  </div>\n\n  <kendo-grid\n    [data]=\"templateParams\"\n    [loading]=\"isLoading\"\n    [height]=\"400\"\n    [pageable]=\"false\"\n    [sortable]=\"true\"\n    [resizable]=\"true\"\n    (add)=\"addHandler($event)\"\n    (edit)=\"editHandler($event)\"\n    (cancel)=\"cancelHandler($event)\"\n    (save)=\"saveHandler($event)\"\n    (remove)=\"removeHandler($event)\">\n\n    @if (editMode) {\n      <kendo-grid-toolbar>\n        <button kendoGridAddCommand type=\"button\" class=\"k-button k-button-md k-rounded-md k-button-solid k-button-solid-primary\">\n          <i class=\"fa-solid fa-plus\"></i> Add Parameter\n        </button>\n      </kendo-grid-toolbar>\n    }\n\n    <kendo-grid-column field=\"Name\" title=\"Parameter Name\" [width]=\"200\">\n      <ng-template kendoGridCellTemplate let-dataItem>\n        <div class=\"param-name\">\n          <strong>{{ dataItem.Name }}</strong>\n          @if (dataItem.IsRequired) {\n            <span class=\"required-badge\">\n              <i class=\"fa-solid fa-asterisk\"></i> Required\n            </span>\n          }\n        </div>\n      </ng-template>\n      <ng-template kendoGridEditTemplate let-dataItem=\"dataItem\" let-formGroup=\"formGroup\">\n        <kendo-textbox\n          [formControl]=\"formGroup.get('name')\"\n          placeholder=\"Enter parameter name...\"\n          [style.width.%]=\"100\">\n        </kendo-textbox>\n        @if (formGroup.get('name')?.touched && formGroup.get('name')?.errors?.['required']) {\n          <span class=\"k-invalid-msg\">\n            Parameter name is required\n          </span>\n        }\n      </ng-template>\n    </kendo-grid-column>\n\n    <kendo-grid-column field=\"Type\" title=\"Type\" [width]=\"140\">\n      <ng-template kendoGridCellTemplate let-dataItem>\n        <div class=\"param-type\">\n          <i class=\"fa-solid {{ getTypeIcon(dataItem.Type) }}\"></i>\n          {{ dataItem.Type }}\n        </div>\n      </ng-template>\n      <ng-template kendoGridEditTemplate let-dataItem=\"dataItem\" let-formGroup=\"formGroup\">\n        <kendo-dropdownlist\n          [formControl]=\"formGroup.get('type')\"\n          [data]=\"typeOptions\"\n          textField=\"text\"\n          valueField=\"value\"\n          [valuePrimitive]=\"true\"\n          [style.width.%]=\"100\">\n        </kendo-dropdownlist>\n      </ng-template>\n    </kendo-grid-column>\n\n    <kendo-grid-column field=\"IsRequired\" title=\"Required\" [width]=\"100\">\n      <ng-template kendoGridCellTemplate let-dataItem>\n        <div class=\"text-center\">\n          @if (dataItem.IsRequired) {\n            <i class=\"fa-solid fa-check text-success\"></i>\n          }\n          @if (!dataItem.IsRequired) {\n            <i class=\"fa-solid fa-times text-muted\"></i>\n          }\n        </div>\n      </ng-template>\n      <ng-template kendoGridEditTemplate let-dataItem=\"dataItem\" let-formGroup=\"formGroup\">\n        <kendo-switch [formControl]=\"formGroup.get('isRequired')\"></kendo-switch>\n      </ng-template>\n    </kendo-grid-column>\n\n    <kendo-grid-column field=\"Description\" title=\"Description\" [width]=\"300\">\n      <ng-template kendoGridCellTemplate let-dataItem>\n        <div class=\"param-description\">\n          {{ dataItem.Description || '(No description)' }}\n        </div>\n      </ng-template>\n      <ng-template kendoGridEditTemplate let-dataItem=\"dataItem\" let-formGroup=\"formGroup\">\n        <kendo-textarea\n          [formControl]=\"formGroup.get('description')\"\n          placeholder=\"Enter parameter description...\"\n          [rows]=\"2\"\n          [style.width.%]=\"100\">\n        </kendo-textarea>\n      </ng-template>\n    </kendo-grid-column>\n\n    <kendo-grid-column field=\"DefaultValue\" title=\"Default Value\" [width]=\"200\">\n      <ng-template kendoGridCellTemplate let-dataItem>\n        @if (dataItem.DefaultValue) {\n          <code class=\"default-value\">{{ dataItem.DefaultValue }}</code>\n        }\n        @if (!dataItem.DefaultValue) {\n          <span class=\"text-muted\">(No default)</span>\n        }\n      </ng-template>\n      <ng-template kendoGridEditTemplate let-dataItem=\"dataItem\" let-formGroup=\"formGroup\">\n        <kendo-textarea\n          [formControl]=\"formGroup.get('defaultValue')\"\n          placeholder=\"Enter default value...\"\n          [rows]=\"2\"\n          [style.width.%]=\"100\">\n        </kendo-textarea>\n      </ng-template>\n    </kendo-grid-column>\n\n    @if (editMode) {\n      <kendo-grid-column title=\"Actions\" [width]=\"120\">\n        <ng-template kendoGridCellTemplate let-dataItem let-rowIndex=\"rowIndex\">\n          @if (!isInEditMode(rowIndex)) {\n            <button\n              kendoGridEditCommand\n              type=\"button\"\n              class=\"k-button k-button-md k-rounded-md k-button-solid k-button-solid-base\"\n              title=\"Edit parameter\">\n              <i class=\"fa-solid fa-edit\"></i>\n            </button>\n          }\n          @if (!isInEditMode(rowIndex)) {\n            <button\n              kendoGridRemoveCommand\n              type=\"button\"\n              class=\"k-button k-button-md k-rounded-md k-button-solid k-button-solid-base\"\n              title=\"Delete parameter\">\n              <i class=\"fa-solid fa-trash\"></i>\n            </button>\n          }\n          @if (isInEditMode(rowIndex)) {\n            <button\n              kendoGridSaveCommand\n              type=\"button\"\n              class=\"k-button k-button-md k-rounded-md k-button-solid k-button-solid-primary\"\n              title=\"Save changes\">\n              <i class=\"fa-solid fa-check\"></i>\n            </button>\n          }\n          @if (isInEditMode(rowIndex)) {\n            <button\n              kendoGridCancelCommand\n              type=\"button\"\n              class=\"k-button k-button-md k-rounded-md k-button-solid k-button-solid-base\"\n              title=\"Cancel changes\">\n              <i class=\"fa-solid fa-times\"></i>\n            </button>\n          }\n        </ng-template>\n      </kendo-grid-column>\n    }\n\n    <ng-template kendoGridNoRecordsTemplate>\n      <div class=\"no-params-message\">\n        <i class=\"fa-solid fa-info-circle\"></i>\n        <p>No parameters defined for this template.</p>\n        @if (editMode) {\n          <p>Click \"Add Parameter\" to create your first parameter.</p>\n        }\n      </div>\n    </ng-template>\n  </kendo-grid>\n\n  <!-- Help Section -->\n  @if (editMode) {\n    <div class=\"params-help\">\n      <h4><i class=\"fa-solid fa-question-circle\"></i> Parameter Types</h4>\n      <ul>\n        <li><strong>Scalar:</strong> Single value like text, number, or boolean</li>\n        <li><strong>Array:</strong> List of values</li>\n        <li><strong>Object:</strong> JSON object with multiple properties</li>\n        <li><strong>Record:</strong> Single record from a MemberJunction entity</li>\n        <li><strong>Entity:</strong> Multiple records from a MemberJunction entity (can be filtered)</li>\n      </ul>\n      <p class=\"help-note\">\n        <i class=\"fa-solid fa-lightbulb\"></i>\n        Use parameters in your template with the syntax: <code>{{ '{{' }} parameterName {{ '}}' }}</code>\n      </p>\n    </div>\n  }\n</div>", styles: [".template-params-grid {\n    padding: 20px;\n}\n\n.params-header {\n    margin-bottom: 20px;\n}\n\n.params-header h3 {\n    margin: 0 0 8px 0;\n    color: var(--mj-text-primary);\n    font-size: 1.2em;\n}\n\n.params-header h3 i {\n    margin-right: 8px;\n    color: var(--mj-brand-primary);\n}\n\n.params-description {\n    margin: 0;\n    color: var(--mj-text-secondary);\n    font-size: 0.9em;\n}\n\n.param-name {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.required-badge {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    background-color: var(--mj-status-error);\n    color: var(--mj-text-inverse);\n    padding: 2px 8px;\n    border-radius: 12px;\n    font-size: 0.75em;\n    font-weight: 500;\n}\n\n.required-badge i {\n    font-size: 0.6em;\n}\n\n.param-type {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    color: var(--mj-text-secondary);\n}\n\n.param-type i {\n    color: var(--mj-text-muted);\n}\n\n.param-description {\n    color: var(--mj-text-secondary);\n    font-size: 0.9em;\n    line-height: 1.4;\n}\n\n.default-value {\n    background-color: var(--mj-bg-surface-card);\n    padding: 2px 6px;\n    border-radius: 3px;\n    font-size: 0.85em;\n    color: var(--mj-text-secondary);\n    word-break: break-word;\n}\n\n.text-muted {\n    color: var(--mj-text-muted);\n    font-style: italic;\n    font-size: 0.9em;\n}\n\n.text-success {\n    color: var(--mj-status-success);\n}\n\n.text-center {\n    text-align: center;\n}\n\n.no-params-message {\n    text-align: center;\n    padding: 40px 20px;\n    color: var(--mj-text-muted);\n}\n\n.no-params-message i {\n    font-size: 2em;\n    margin-bottom: 10px;\n    color: var(--mj-text-muted);\n}\n\n.no-params-message p {\n    margin: 5px 0;\n}\n\n/* Help Section */\n.params-help {\n    margin-top: 30px;\n    padding: 20px;\n    background-color: var(--mj-bg-surface-card);\n    border-radius: 8px;\n    border: 1px solid var(--mj-border-default);\n}\n\n.params-help h4 {\n    margin: 0 0 15px 0;\n    color: var(--mj-text-primary);\n    font-size: 1em;\n}\n\n.params-help h4 i {\n    margin-right: 6px;\n    color: var(--mj-brand-primary);\n}\n\n.params-help ul {\n    margin: 10px 0;\n    padding-left: 25px;\n}\n\n.params-help li {\n    margin-bottom: 8px;\n    color: var(--mj-text-secondary);\n    font-size: 0.9em;\n}\n\n.params-help strong {\n    color: var(--mj-text-primary);\n}\n\n.help-note {\n    margin-top: 15px;\n    padding: 10px 15px;\n    background-color: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n    border-left: 4px solid var(--mj-brand-primary);\n    border-radius: 4px;\n    font-size: 0.9em;\n}\n\n.help-note i {\n    margin-right: 6px;\n    color: var(--mj-brand-primary);\n}\n\n.help-note code {\n    background-color: var(--mj-bg-surface);\n    padding: 2px 4px;\n    border-radius: 3px;\n    font-family: 'Courier New', monospace;\n    color: var(--mj-status-error);\n}\n\n/* Grid action buttons */\n.k-grid-content button {\n    margin-right: 4px;\n}\n\n/* Form validation */\n.k-invalid-msg {\n    display: block;\n    color: var(--mj-status-error);\n    font-size: 0.85em;\n    margin-top: 4px;\n}\n\n/* Kendo overrides for consistent styling */\n.k-grid .k-toolbar {\n    background-color: var(--mj-bg-surface-card);\n    border-bottom: 1px solid var(--mj-border-default);\n    padding: 12px;\n}\n\n.k-grid-header th {\n    background-color: var(--mj-bg-surface-card);\n    font-weight: 600;\n    color: var(--mj-text-secondary);\n}\n\n/* Responsive adjustments */\n@media (max-width: 768px) {\n    .template-params-grid {\n        padding: 10px;\n    }\n\n    .params-help {\n        padding: 15px;\n    }\n}\n"] }]
-    }], () => [], { template: [{
+        args: [{ standalone: false, selector: 'mj-template-params-grid', template: "<div class=\"template-params-grid\">\n  <div class=\"params-header\">\n    <h3><i class=\"fa-solid fa-sliders\"></i> Template Parameters</h3>\n    <p class=\"params-description\">\n      Define the parameters that can be used within this template. Parameters allow dynamic content injection at runtime.\n    </p>\n  </div>\n\n  @if (editMode) {\n    <div class=\"params-toolbar\">\n      <button mjButton variant=\"primary\" (click)=\"addNewParam()\">\n        <i class=\"fa-solid fa-plus\"></i> Add Parameter\n      </button>\n    </div>\n  }\n\n  <ag-grid-angular\n    class=\"params-ag-grid\"\n    [theme]=\"GridTheme\"\n    [rowData]=\"templateParams\"\n    [columnDefs]=\"ColumnDefs\"\n    [defaultColDef]=\"DefaultColDef\"\n    [editType]=\"'fullRow'\"\n    [getRowId]=\"getRowId\"\n    [suppressClickEdit]=\"true\"\n    [overlayNoRowsTemplate]=\"noRowsTemplate\"\n    (gridReady)=\"onGridReady($event)\"\n    (rowEditingStopped)=\"onRowEditingStopped($event)\"\n    style=\"width: 100%; height: 400px;\">\n  </ag-grid-angular>\n\n  <!-- Help Section -->\n  @if (editMode) {\n    <div class=\"params-help\">\n      <h4><i class=\"fa-solid fa-question-circle\"></i> Parameter Types</h4>\n      <ul>\n        <li><strong>Scalar:</strong> Single value like text, number, or boolean</li>\n        <li><strong>Array:</strong> List of values</li>\n        <li><strong>Object:</strong> JSON object with multiple properties</li>\n        <li><strong>Record:</strong> Single record from a MemberJunction entity</li>\n        <li><strong>Entity:</strong> Multiple records from a MemberJunction entity (can be filtered)</li>\n      </ul>\n      <p class=\"help-note\">\n        <i class=\"fa-solid fa-lightbulb\"></i>\n        Use parameters in your template with the syntax: <code>{{ '{{' }} parameterName {{ '}}' }}</code>\n      </p>\n    </div>\n  }\n</div>\n", styles: [".template-params-grid {\n    padding: 20px;\n}\n\n.params-header {\n    margin-bottom: 20px;\n}\n\n.params-header h3 {\n    margin: 0 0 8px 0;\n    color: var(--mj-text-primary);\n    font-size: 1.2em;\n}\n\n.params-header h3 i {\n    margin-right: 8px;\n    color: var(--mj-brand-primary);\n}\n\n.params-description {\n    margin: 0;\n    color: var(--mj-text-secondary);\n    font-size: 0.9em;\n}\n\n/* Toolbar */\n.params-toolbar {\n    margin-bottom: 12px;\n    padding: 12px;\n    background-color: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px 6px 0 0;\n}\n\n/* AG Grid wrapper */\n.params-ag-grid {\n    border: 1px solid var(--mj-border-default);\n    border-radius: 0 0 6px 6px;\n}\n\n.params-toolbar + .params-ag-grid {\n    border-top: none;\n}\n\n/* Help Section */\n.params-help {\n    margin-top: 30px;\n    padding: 20px;\n    background-color: var(--mj-bg-surface-card);\n    border-radius: 8px;\n    border: 1px solid var(--mj-border-default);\n}\n\n.params-help h4 {\n    margin: 0 0 15px 0;\n    color: var(--mj-text-primary);\n    font-size: 1em;\n}\n\n.params-help h4 i {\n    margin-right: 6px;\n    color: var(--mj-brand-primary);\n}\n\n.params-help ul {\n    margin: 10px 0;\n    padding-left: 25px;\n}\n\n.params-help li {\n    margin-bottom: 8px;\n    color: var(--mj-text-secondary);\n    font-size: 0.9em;\n}\n\n.params-help strong {\n    color: var(--mj-text-primary);\n}\n\n.help-note {\n    margin-top: 15px;\n    padding: 10px 15px;\n    background-color: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n    border-left: 4px solid var(--mj-brand-primary);\n    border-radius: 4px;\n    font-size: 0.9em;\n}\n\n.help-note i {\n    margin-right: 6px;\n    color: var(--mj-brand-primary);\n}\n\n.help-note code {\n    background-color: var(--mj-bg-surface);\n    padding: 2px 4px;\n    border-radius: 3px;\n    font-family: 'Courier New', monospace;\n    color: var(--mj-status-error);\n}\n\n/* Responsive adjustments */\n@media (max-width: 768px) {\n    .template-params-grid {\n        padding: 10px;\n    }\n\n    .params-help {\n        padding: 15px;\n    }\n}\n"] }]
+    }], null, { template: [{
             type: Input
         }], editMode: [{
             type: Input
-        }], grid: [{
-            type: ViewChild,
-            args: [GridComponent]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TemplateParamsGridComponent, { className: "TemplateParamsGridComponent", filePath: "src/lib/custom/Templates/template-params-grid.component.ts", lineNumber: 14 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TemplateParamsGridComponent, { className: "TemplateParamsGridComponent", filePath: "src/lib/custom/Templates/template-params-grid.component.ts", lineNumber: 48 }); })();
+/**
+ * Inline cell renderer for edit/delete/save/cancel action buttons.
+ * This is a plain-JS AG Grid cell renderer (not an Angular component)
+ * because the grid doesn't support Angular component renderers without
+ * the AG Grid Enterprise "Framework Components" feature.
+ */
+function ActionsCellRenderer(params) {
+    const container = document.createElement('div');
+    container.style.display = 'flex';
+    container.style.gap = '4px';
+    container.style.alignItems = 'center';
+    const comp = params.componentRef;
+    const isEditing = params.node.rowIndex != null && params.api.getEditingCells().some(cell => cell.rowIndex === params.node.rowIndex);
+    if (isEditing) {
+        // Save button
+        const saveBtn = createActionButton('fa-check', 'Save changes', 'var(--mj-brand-primary)');
+        saveBtn.addEventListener('click', (e) => {
+            e.stopPropagation();
+            comp.saveEditRow();
+        });
+        container.appendChild(saveBtn);
+        // Cancel button
+        const cancelBtn = createActionButton('fa-times', 'Cancel changes', 'var(--mj-text-secondary)');
+        cancelBtn.addEventListener('click', (e) => {
+            e.stopPropagation();
+            comp.cancelEditRow();
+        });
+        container.appendChild(cancelBtn);
+    }
+    else {
+        // Edit button
+        const editBtn = createActionButton('fa-edit', 'Edit parameter', 'var(--mj-text-secondary)');
+        editBtn.addEventListener('click', (e) => {
+            e.stopPropagation();
+            comp.startEditRow(params);
+        });
+        container.appendChild(editBtn);
+        // Delete button
+        const deleteBtn = createActionButton('fa-trash', 'Delete parameter', 'var(--mj-status-error)');
+        deleteBtn.addEventListener('click', (e) => {
+            e.stopPropagation();
+            comp.deleteRow(params);
+        });
+        container.appendChild(deleteBtn);
+    }
+    return container;
+}
+function createActionButton(iconClass, title, color) {
+    const btn = document.createElement('button');
+    btn.type = 'button';
+    btn.title = title;
+    btn.style.cssText = `
+        border: 1px solid var(--mj-border-default);
+        background: var(--mj-bg-surface);
+        color: ${color};
+        border-radius: 4px;
+        padding: 4px 8px;
+        cursor: pointer;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 14px;
+    `;
+    const icon = document.createElement('i');
+    icon.className = `fa-solid ${iconClass}`;
+    btn.appendChild(icon);
+    return btn;
+}
 //# sourceMappingURL=template-params-grid.component.js.map