@memberjunction/ng-core-entity-forms 6.2.0 → 6.3.0-edge.0

package/dist/lib/custom/Queries/query-run-dialog.component.js

@@ -923,11 +923,11 @@ export class QueryRunDialogComponent extends BaseAngularComponent {
             i0.ɵɵconditionalCreate(0, QueryRunDialogComponent_Conditional_0_Template, 11, 5, "mj-dialog", 0);
         } if (rf & 2) {
             i0.ɵɵconditional(ctx.isVisible ? 0 : -1);
-        } }, dependencies: [i1.DefaultValueAccessor, i1.NumberValueAccessor, i1.NgControlStatus, i1.MinValidator, i1.NgModel, i2.MJAlertComponent, i2.MJButtonDirective, i2.MJAccordionPanelComponent, i2.MJAccordionTitleDirective, i2.MJDialogComponent, i2.MJDialogTitlebarComponent, i2.MJDialogActionsComponent], styles: [".param-value[_ngcontent-%COMP%]   textarea[_ngcontent-%COMP%] {\n    resize: vertical;\n    min-height: 60px;\n}\n\n.loading-state[_ngcontent-%COMP%] {\n    color: var(--mj-text-muted);\n}\n\n.badge[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n}\n\n\n.results-table-container[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface);\n    box-shadow: var(--mj-shadow-sm);\n    display: flex;\n    flex-direction: column;\n}\n\n.results-table-container[_ngcontent-%COMP%]::-webkit-scrollbar {\n    width: 8px;\n    height: 8px;\n}\n\n.results-table-container[_ngcontent-%COMP%]::-webkit-scrollbar-track {\n    background: var(--mj-bg-surface-sunken);\n}\n\n.results-table-container[_ngcontent-%COMP%]::-webkit-scrollbar-thumb {\n    background: var(--mj-border-strong);\n    border-radius: var(--mj-radius-sm);\n}\n\n.results-table-container[_ngcontent-%COMP%]::-webkit-scrollbar-thumb:hover {\n    background: var(--mj-text-disabled);\n}\n\n.results-table[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:hover {\n    background-color: var(--mj-bg-surface-card) !important;\n}\n\n.results-table[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:nth-child(even) {\n    background-color: var(--mj-bg-surface-card);\n}\n\n.dialog-content[_ngcontent-%COMP%] {\n    overflow-y: auto;\n}\n\n.header-section[_ngcontent-%COMP%] {\n    flex-shrink: 0;\n}\n\n.param-actions[_ngcontent-%COMP%]   button[_ngcontent-%COMP%] {\n    min-width: 30px;\n    padding: 4px 6px;\n}\n\n\n  .k-expander-content-wrapper {\n    display: flex;\n    flex-direction: column;\n    flex: 1;\n    min-height: 0;\n    overflow: hidden;\n}\n\n  .k-expander-content {\n    display: flex;\n    flex-direction: column;\n    flex: 1;\n    min-height: 0;\n    overflow: hidden;\n}"] }); }
+        } }, dependencies: [i1.DefaultValueAccessor, i1.NumberValueAccessor, i1.NgControlStatus, i1.MinValidator, i1.NgModel, i2.MJAlertComponent, i2.MJButtonDirective, i2.MJAccordionPanelComponent, i2.MJAccordionTitleDirective, i2.MJDialogComponent, i2.MJDialogTitlebarComponent, i2.MJDialogActionsComponent], styles: [".param-value[_ngcontent-%COMP%]   textarea[_ngcontent-%COMP%] {\n    resize: vertical;\n    min-height: 60px;\n}\n\n.loading-state[_ngcontent-%COMP%] {\n    color: var(--mj-text-muted);\n}\n\n.badge[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n}\n\n\n.results-table-container[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface);\n    box-shadow: var(--mj-shadow-sm);\n    display: flex;\n    flex-direction: column;\n}\n\n.results-table-container[_ngcontent-%COMP%]::-webkit-scrollbar {\n    width: 8px;\n    height: 8px;\n}\n\n.results-table-container[_ngcontent-%COMP%]::-webkit-scrollbar-track {\n    background: var(--mj-bg-surface-sunken);\n}\n\n.results-table-container[_ngcontent-%COMP%]::-webkit-scrollbar-thumb {\n    background: var(--mj-border-strong);\n    border-radius: var(--mj-radius-sm);\n}\n\n.results-table-container[_ngcontent-%COMP%]::-webkit-scrollbar-thumb:hover {\n    background: var(--mj-text-disabled);\n}\n\n.results-table[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:hover {\n    background-color: var(--mj-bg-surface-card) !important;\n}\n\n.results-table[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:nth-child(even) {\n    background-color: var(--mj-bg-surface-card);\n}\n\n.dialog-content[_ngcontent-%COMP%] {\n    overflow-y: auto;\n}\n\n.header-section[_ngcontent-%COMP%] {\n    flex-shrink: 0;\n}\n\n.param-actions[_ngcontent-%COMP%]   button[_ngcontent-%COMP%] {\n    min-width: 30px;\n    padding: 4px 6px;\n}"] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(QueryRunDialogComponent, [{
         type: Component,
-        args: [{ standalone: false, selector: 'mj-query-run-dialog', template: "@if (isVisible) {\n  <mj-dialog\n    [Visible]=\"true\"\n    [Width]=\"900\"\n    (Close)=\"close()\">\n    <mj-dialog-titlebar>\n      <div style=\"display: flex; align-items: center; gap: 8px;\">\n        <i class=\"fa-solid fa-play-circle\" style=\"color: var(--mj-brand-primary);\"></i>\n        Run Query: {{ query?.Name || 'Untitled' }}\n      </div>\n    </mj-dialog-titlebar>\n    <div style=\"display: flex; flex-direction: column; height: 100%; overflow-y: auto; overflow-x: hidden;\">\n      @if (isLoadingParams) {\n        <div style=\"display: flex; align-items: center; justify-content: center; padding: 40px;\">\n          <i class=\"fa-solid fa-spinner fa-spin\" style=\"font-size: 24px; color: var(--mj-text-muted); margin-right: 12px;\"></i>\n          <span style=\"color: var(--mj-text-muted);\">Loading query parameters...</span>\n        </div>\n      } @else {\n        <!-- Query Parameters Section -->\n        @if (parameterPairs.length > 0) {\n          <mj-accordion-panel\n            [(Expanded)]=\"parametersExpanded\"\n            style=\"margin-bottom: 16px; flex-shrink: 0;\">\n            <ng-template mjAccordionTitle>\n              <span style=\"display: flex; align-items: center; gap: 8px; font-weight: 600;\">\n                <i class=\"fa-solid fa-sliders\" style=\"color: var(--mj-text-muted);\"></i>\n                Query Parameters\n                <span style=\"background: var(--mj-status-info); color: var(--mj-text-inverse); padding: 2px 6px; border-radius: 10px; font-size: 0.7em;\">\n                  {{ parameterPairs.length }}\n                </span>\n              </span>\n            </ng-template>\n            <div style=\"padding: 12px 0;\">\n              <div style=\"margin-bottom: 12px; color: var(--mj-text-muted); font-size: 0.85em;\">\n                <i class=\"fa-solid fa-info-circle\"></i>\n                Configure parameter values for query execution.\n              </div>\n              <!-- Parameters List -->\n              <div style=\"display: flex; flex-direction: column; gap: 16px;\">\n                @for (param of parameterPairs; track param.name) {\n                  <div style=\"background: var(--mj-bg-surface-sunken); border: 1px solid var(--mj-border-default); border-radius: 6px; padding: 16px;\">\n                    <div style=\"display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px;\">\n                      <div>\n                        <label style=\"font-weight: 600; color: var(--mj-text-secondary); display: flex; align-items: center; gap: 6px;\">\n                          <i class=\"fa-solid fa-at\" style=\"color: var(--mj-brand-primary);\"></i>\n                          {{ param.name }}\n                          @if (param.isRequired) {\n                            <span style=\"color: #dc3545;\">*</span>\n                          }\n                        </label>\n                        @if (param.description) {\n                          <div style=\"font-size: 0.85em; color: var(--mj-text-muted); margin-top: 4px;\">\n                            {{ param.description }}\n                          </div>\n                        }\n                      </div>\n                      <div style=\"display: flex; gap: 8px; align-items: center;\">\n                        <span class=\"badge\" style=\"background: var(--mj-text-muted); color: white; padding: 2px 6px; border-radius: 4px; font-size: 0.75em;\">\n                          {{ param.type }}\n                        </span>\n                        @if (!isParameterValid(param)) {\n                          <i class=\"fa-solid fa-exclamation-triangle\" style=\"color: #dc3545;\" title=\"Required parameter is empty\"></i>\n                        }\n                      </div>\n                    </div>\n                    <!-- Parameter Value Input -->\n                    @if (param.type === 'number') {\n                      <input type=\"number\" class=\"mj-input\"\n                        [(ngModel)]=\"param.value\"\n                        placeholder=\"Enter number value...\"\n                        style=\"width: 100%;\" />\n                    } @else {\n                      <textarea class=\"mj-input\"\n                        [(ngModel)]=\"param.value\"\n                        rows=\"2\"\n                        placeholder=\"Enter value (JSON, string, or number)...\"\n                        style=\"width: 100%; font-family: 'Courier New', monospace;\">\n                      </textarea>\n                    }\n                    @if (param.defaultValue) {\n                      <div style=\"font-size: 0.8em; color: var(--mj-text-muted); margin-top: 4px;\">\n                        Default: <code style=\"background: var(--mj-bg-surface-sunken); padding: 2px 4px; border-radius: 3px;\">{{ param.defaultValue }}</code>\n                      </div>\n                    }\n                  </div>\n                }\n              </div>\n            </div>\n          </mj-accordion-panel>\n        } @else {\n          <div style=\"padding: 20px; background: var(--mj-bg-surface-sunken); border-radius: 6px; margin-bottom: 16px; text-align: center; color: var(--mj-text-muted);\">\n            <i class=\"fa-solid fa-info-circle\"></i> This query has no parameters.\n          </div>\n        }\n        <!-- Pagination Settings -->\n        <mj-accordion-panel\n          [(Expanded)]=\"paginationExpanded\"\n          style=\"margin-bottom: 16px;\">\n          <ng-template mjAccordionTitle>\n            <span style=\"display: flex; align-items: center; gap: 8px; font-weight: 600;\">\n              <i class=\"fa-solid fa-table-list\" style=\"color: var(--mj-text-muted);\"></i>\n              Pagination Settings\n              @if (maxRows && maxRows > 0) {\n                <span style=\"background: var(--mj-text-muted); color: var(--mj-text-inverse); padding: 2px 6px; border-radius: 10px; font-size: 0.7em;\">\n                  {{ maxRows }} rows/page\n                </span>\n              }\n            </span>\n          </ng-template>\n          <div style=\"padding: 12px 0;\">\n            <div style=\"display: flex; flex-direction: column; gap: 12px;\">\n              <!-- Max Rows -->\n              <div style=\"display: flex; align-items: center; gap: 12px;\">\n                <label style=\"font-weight: 600; color: var(--mj-text-secondary); white-space: nowrap; min-width: 100px;\">\n                  <i class=\"fa-solid fa-list-ol\" style=\"color: var(--mj-text-muted); margin-right: 6px;\"></i>\n                  Max Rows:\n                </label>\n                <input type=\"number\" class=\"mj-input\"\n                  [(ngModel)]=\"maxRows\"\n                  min=\"1\"\n                  step=\"100\"\n                  placeholder=\"All rows\"\n                  style=\"width: 150px;\" />\n                <span style=\"font-size: 0.85em; color: var(--mj-text-muted);\">\n                  Leave empty to return all rows\n                </span>\n              </div>\n              <!-- Start Row -->\n              <div style=\"display: flex; align-items: center; gap: 12px;\">\n                <label style=\"font-weight: 600; color: var(--mj-text-secondary); white-space: nowrap; min-width: 100px;\">\n                  <i class=\"fa-solid fa-forward\" style=\"color: var(--mj-text-muted); margin-right: 6px;\"></i>\n                  Start Row:\n                </label>\n                <input type=\"number\" class=\"mj-input\"\n                  [(ngModel)]=\"startRow\"\n                  min=\"0\"\n                  step=\"1\"\n                  placeholder=\"0\"\n                  style=\"width: 150px;\" />\n                <span style=\"font-size: 0.85em; color: var(--mj-text-muted);\">\n                  0-based offset for pagination\n                </span>\n              </div>\n            </div>\n          </div>\n        </mj-accordion-panel>\n        <!-- Results Section -->\n        @if (runResult) {\n          <mj-accordion-panel\n            [(Expanded)]=\"resultsExpanded\"\n            style=\"flex: 1; display: flex; flex-direction: column; overflow: hidden; min-height: 0;\">\n            <ng-template mjAccordionTitle>\n              <span style=\"display: flex; align-items: center; gap: 8px; font-weight: 600;\">\n                @if (runResult.Success) {\n                  <i class=\"fa-solid fa-table\" style=\"color: var(--mj-status-success);\"></i>\n                  Query Results\n                  <span style=\"background: var(--mj-status-success); color: var(--mj-text-inverse); padding: 2px 6px; border-radius: 10px; font-size: 0.7em;\">\n                    {{ runResult.RowCount }} rows@if (runResult.TotalRowCount > runResult.RowCount) { of {{ runResult.TotalRowCount }} total}\n                  </span>\n                  @if (runResult.ExecutionTime) {\n                    <span style=\"color: var(--mj-text-muted); font-size: 0.85em; font-weight: normal;\">&mdash; {{ runResult.ExecutionTime }}ms</span>\n                  }\n                } @else {\n                  <i class=\"fa-solid fa-exclamation-circle\" style=\"color: var(--mj-status-error);\"></i>\n                  Query Results &mdash; Error\n                }\n              </span>\n            </ng-template>\n            <div style=\"flex: 1; display: flex; flex-direction: column; overflow: hidden; min-height: 0;\">\n              @if (runResult.Success) {\n                @if (resultRows.length > 0) {\n                  <!-- Export and Pagination Controls -->\n                  <div style=\"display: flex; justify-content: space-between; align-items: center; padding: 12px; border-bottom: 1px solid var(--mj-border-default);\">\n                    <!-- Pagination Info and Controls -->\n                    <div style=\"display: flex; align-items: center; gap: 12px;\">\n                      @if (runResult.TotalRowCount > runResult.RowCount || startRow > 0) {\n                        <span style=\"font-size: 0.9em; color: var(--mj-text-muted);\">\n                          Showing rows {{ startRow + 1 }} - {{ startRow + runResult.RowCount }} of {{ runResult.TotalRowCount }}\n                        </span>\n                        <div style=\"display: flex; gap: 4px;\">\n                          <button mjButton\n                            variant=\"flat\"\n                            [disabled]=\"startRow === 0\"\n                            (click)=\"goToFirstPage()\"\n                            title=\"First page\">\n                            <i class=\"fa-solid fa-angles-left\"></i>\n                          </button>\n                          <button mjButton\n                            variant=\"flat\"\n                            [disabled]=\"startRow === 0\"\n                            (click)=\"goToPreviousPage()\"\n                            title=\"Previous page\">\n                            <i class=\"fa-solid fa-angle-left\"></i>\n                          </button>\n                          <button mjButton\n                            variant=\"flat\"\n                            [disabled]=\"startRow + runResult.RowCount >= runResult.TotalRowCount\"\n                            (click)=\"goToNextPage()\"\n                            title=\"Next page\">\n                            <i class=\"fa-solid fa-angle-right\"></i>\n                          </button>\n                          <button mjButton\n                            variant=\"flat\"\n                            [disabled]=\"startRow + runResult.RowCount >= runResult.TotalRowCount\"\n                            (click)=\"goToLastPage()\"\n                            title=\"Last page\">\n                            <i class=\"fa-solid fa-angles-right\"></i>\n                          </button>\n                        </div>\n                      }\n                    </div>\n                    <!-- Export Buttons -->\n                    <div style=\"display: flex; gap: 8px;\">\n                      <button mjButton\n                        variant=\"flat\"\n                        (click)=\"copyToClipboard()\"\n                        title=\"Copy to clipboard\">\n                        <i class=\"fa-solid fa-copy\"></i> Copy\n                      </button>\n                      <button mjButton\n                        variant=\"flat\"\n                        (click)=\"exportToCSV()\"\n                        title=\"Export to CSV\">\n                        <i class=\"fa-solid fa-download\"></i> Export CSV\n                      </button>\n                    </div>\n                  </div>\n                  <!-- Results Grid -->\n                  <div class=\"results-table-container\" style=\"flex: 1; overflow: auto; border: 1px solid var(--mj-border-default); border-radius: 4px; min-height: 0;\">\n                    <table class=\"results-table\" style=\"width: 100%; border-collapse: collapse; font-size: 14px;\">\n                      <thead style=\"position: sticky; top: 0; background: var(--mj-bg-surface-sunken); z-index: 10;\">\n                        <tr>\n                          @for (col of resultColumns; track col.field) {\n                            <th style=\"padding: 12px 16px; text-align: left; font-weight: 600; color: var(--mj-text-secondary); border-bottom: 2px solid var(--mj-border-default); background: var(--mj-bg-surface-sunken); white-space: nowrap;\">\n                              {{ col.title }}\n                            </th>\n                          }\n                        </tr>\n                      </thead>\n                      <tbody>\n                        @for (row of resultRows; track $index) {\n                          <tr style=\"border-bottom: 1px solid var(--mj-border-default); transition: background-color 0.2s;\">\n                            @for (col of resultColumns; track col.field) {\n                              <td style=\"padding: 10px 16px; color: var(--mj-text-primary); max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;\"\n                                [title]=\"row[col.field]\">\n                                {{ row[col.field] || '' }}\n                              </td>\n                            }\n                          </tr>\n                        }\n                      </tbody>\n                    </table>\n                    @if (resultRows.length === 0) {\n                      <div style=\"padding: 40px; text-align: center; color: var(--mj-text-muted);\">\n                        <i class=\"fa-solid fa-table\" style=\"font-size: 48px; margin-bottom: 12px; opacity: 0.3;\"></i>\n                        <p>No data in results</p>\n                      </div>\n                    }\n                  </div>\n                } @else {\n                  <div style=\"display: flex; align-items: center; justify-content: center; height: 200px; color: var(--mj-text-muted);\">\n                    <i class=\"fa-solid fa-inbox\" style=\"font-size: 48px; margin-bottom: 12px;\"></i>\n                    <p>No results returned</p>\n                  </div>\n                }\n              } @else {\n                <mj-alert Variant=\"error\" Title=\"Query execution failed\">\n                  @if (runResult.ErrorMessage) {\n                    <div style=\"margin-top: 8px; font-family: 'Courier New', monospace; font-size: 0.9em;\">\n                      {{ runResult.ErrorMessage }}\n                    </div>\n                  }\n                </mj-alert>\n              }\n            </div>\n          </mj-accordion-panel>\n        }\n      }\n    </div>\n    <mj-dialog-actions>\n      @if (!runResult) {\n        <button mjButton (click)=\"close()\">\n          <i class=\"fa-solid fa-times\"></i> Cancel\n        </button>\n        <button mjButton\n          variant=\"primary\"\n          [disabled]=\"isRunning || hasInvalidParameters()\"\n          (click)=\"runQuery()\">\n          @if (isRunning) {\n            <i class=\"fa-solid fa-spinner fa-spin\"></i> Running...\n          } @else {\n            <i class=\"fa-solid fa-play\"></i> Run Query\n          }\n        </button>\n      } @else {\n        <button mjButton (click)=\"close()\">\n          <i class=\"fa-solid fa-times\"></i> Close\n        </button>\n        <button mjButton\n          variant=\"primary\"\n          [disabled]=\"isRunning\"\n          (click)=\"runQuery()\">\n          <i class=\"fa-solid fa-refresh\"></i> Run Again\n        </button>\n      }\n    </mj-dialog-actions>\n  </mj-dialog>\n}\n", styles: [".param-value textarea {\n    resize: vertical;\n    min-height: 60px;\n}\n\n.loading-state {\n    color: var(--mj-text-muted);\n}\n\n.badge {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n}\n\n/* Professional Results Table Styling */\n.results-table-container {\n    background: var(--mj-bg-surface);\n    box-shadow: var(--mj-shadow-sm);\n    display: flex;\n    flex-direction: column;\n}\n\n.results-table-container::-webkit-scrollbar {\n    width: 8px;\n    height: 8px;\n}\n\n.results-table-container::-webkit-scrollbar-track {\n    background: var(--mj-bg-surface-sunken);\n}\n\n.results-table-container::-webkit-scrollbar-thumb {\n    background: var(--mj-border-strong);\n    border-radius: var(--mj-radius-sm);\n}\n\n.results-table-container::-webkit-scrollbar-thumb:hover {\n    background: var(--mj-text-disabled);\n}\n\n.results-table tbody tr:hover {\n    background-color: var(--mj-bg-surface-card) !important;\n}\n\n.results-table tbody tr:nth-child(even) {\n    background-color: var(--mj-bg-surface-card);\n}\n\n.dialog-content {\n    overflow-y: auto;\n}\n\n.header-section {\n    flex-shrink: 0;\n}\n\n.param-actions button {\n    min-width: 30px;\n    padding: 4px 6px;\n}\n\n/* Ensure expansion panel content flexes properly */\n::ng-deep .k-expander-content-wrapper {\n    display: flex;\n    flex-direction: column;\n    flex: 1;\n    min-height: 0;\n    overflow: hidden;\n}\n\n::ng-deep .k-expander-content {\n    display: flex;\n    flex-direction: column;\n    flex: 1;\n    min-height: 0;\n    overflow: hidden;\n}\n"] }]
+        args: [{ standalone: false, selector: 'mj-query-run-dialog', template: "@if (isVisible) {\n  <mj-dialog\n    [Visible]=\"true\"\n    [Width]=\"900\"\n    (Close)=\"close()\">\n    <mj-dialog-titlebar>\n      <div style=\"display: flex; align-items: center; gap: 8px;\">\n        <i class=\"fa-solid fa-play-circle\" style=\"color: var(--mj-brand-primary);\"></i>\n        Run Query: {{ query?.Name || 'Untitled' }}\n      </div>\n    </mj-dialog-titlebar>\n    <div style=\"display: flex; flex-direction: column; height: 100%; overflow-y: auto; overflow-x: hidden;\">\n      @if (isLoadingParams) {\n        <div style=\"display: flex; align-items: center; justify-content: center; padding: 40px;\">\n          <i class=\"fa-solid fa-spinner fa-spin\" style=\"font-size: 24px; color: var(--mj-text-muted); margin-right: 12px;\"></i>\n          <span style=\"color: var(--mj-text-muted);\">Loading query parameters...</span>\n        </div>\n      } @else {\n        <!-- Query Parameters Section -->\n        @if (parameterPairs.length > 0) {\n          <mj-accordion-panel\n            [(Expanded)]=\"parametersExpanded\"\n            style=\"margin-bottom: 16px; flex-shrink: 0;\">\n            <ng-template mjAccordionTitle>\n              <span style=\"display: flex; align-items: center; gap: 8px; font-weight: 600;\">\n                <i class=\"fa-solid fa-sliders\" style=\"color: var(--mj-text-muted);\"></i>\n                Query Parameters\n                <span style=\"background: var(--mj-status-info); color: var(--mj-text-inverse); padding: 2px 6px; border-radius: 10px; font-size: 0.7em;\">\n                  {{ parameterPairs.length }}\n                </span>\n              </span>\n            </ng-template>\n            <div style=\"padding: 12px 0;\">\n              <div style=\"margin-bottom: 12px; color: var(--mj-text-muted); font-size: 0.85em;\">\n                <i class=\"fa-solid fa-info-circle\"></i>\n                Configure parameter values for query execution.\n              </div>\n              <!-- Parameters List -->\n              <div style=\"display: flex; flex-direction: column; gap: 16px;\">\n                @for (param of parameterPairs; track param.name) {\n                  <div style=\"background: var(--mj-bg-surface-sunken); border: 1px solid var(--mj-border-default); border-radius: 6px; padding: 16px;\">\n                    <div style=\"display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px;\">\n                      <div>\n                        <label style=\"font-weight: 600; color: var(--mj-text-secondary); display: flex; align-items: center; gap: 6px;\">\n                          <i class=\"fa-solid fa-at\" style=\"color: var(--mj-brand-primary);\"></i>\n                          {{ param.name }}\n                          @if (param.isRequired) {\n                            <span style=\"color: #dc3545;\">*</span>\n                          }\n                        </label>\n                        @if (param.description) {\n                          <div style=\"font-size: 0.85em; color: var(--mj-text-muted); margin-top: 4px;\">\n                            {{ param.description }}\n                          </div>\n                        }\n                      </div>\n                      <div style=\"display: flex; gap: 8px; align-items: center;\">\n                        <span class=\"badge\" style=\"background: var(--mj-text-muted); color: white; padding: 2px 6px; border-radius: 4px; font-size: 0.75em;\">\n                          {{ param.type }}\n                        </span>\n                        @if (!isParameterValid(param)) {\n                          <i class=\"fa-solid fa-exclamation-triangle\" style=\"color: #dc3545;\" title=\"Required parameter is empty\"></i>\n                        }\n                      </div>\n                    </div>\n                    <!-- Parameter Value Input -->\n                    @if (param.type === 'number') {\n                      <input type=\"number\" class=\"mj-input\"\n                        [(ngModel)]=\"param.value\"\n                        placeholder=\"Enter number value...\"\n                        style=\"width: 100%;\" />\n                    } @else {\n                      <textarea class=\"mj-input\"\n                        [(ngModel)]=\"param.value\"\n                        rows=\"2\"\n                        placeholder=\"Enter value (JSON, string, or number)...\"\n                        style=\"width: 100%; font-family: 'Courier New', monospace;\">\n                      </textarea>\n                    }\n                    @if (param.defaultValue) {\n                      <div style=\"font-size: 0.8em; color: var(--mj-text-muted); margin-top: 4px;\">\n                        Default: <code style=\"background: var(--mj-bg-surface-sunken); padding: 2px 4px; border-radius: 3px;\">{{ param.defaultValue }}</code>\n                      </div>\n                    }\n                  </div>\n                }\n              </div>\n            </div>\n          </mj-accordion-panel>\n        } @else {\n          <div style=\"padding: 20px; background: var(--mj-bg-surface-sunken); border-radius: 6px; margin-bottom: 16px; text-align: center; color: var(--mj-text-muted);\">\n            <i class=\"fa-solid fa-info-circle\"></i> This query has no parameters.\n          </div>\n        }\n        <!-- Pagination Settings -->\n        <mj-accordion-panel\n          [(Expanded)]=\"paginationExpanded\"\n          style=\"margin-bottom: 16px;\">\n          <ng-template mjAccordionTitle>\n            <span style=\"display: flex; align-items: center; gap: 8px; font-weight: 600;\">\n              <i class=\"fa-solid fa-table-list\" style=\"color: var(--mj-text-muted);\"></i>\n              Pagination Settings\n              @if (maxRows && maxRows > 0) {\n                <span style=\"background: var(--mj-text-muted); color: var(--mj-text-inverse); padding: 2px 6px; border-radius: 10px; font-size: 0.7em;\">\n                  {{ maxRows }} rows/page\n                </span>\n              }\n            </span>\n          </ng-template>\n          <div style=\"padding: 12px 0;\">\n            <div style=\"display: flex; flex-direction: column; gap: 12px;\">\n              <!-- Max Rows -->\n              <div style=\"display: flex; align-items: center; gap: 12px;\">\n                <label style=\"font-weight: 600; color: var(--mj-text-secondary); white-space: nowrap; min-width: 100px;\">\n                  <i class=\"fa-solid fa-list-ol\" style=\"color: var(--mj-text-muted); margin-right: 6px;\"></i>\n                  Max Rows:\n                </label>\n                <input type=\"number\" class=\"mj-input\"\n                  [(ngModel)]=\"maxRows\"\n                  min=\"1\"\n                  step=\"100\"\n                  placeholder=\"All rows\"\n                  style=\"width: 150px;\" />\n                <span style=\"font-size: 0.85em; color: var(--mj-text-muted);\">\n                  Leave empty to return all rows\n                </span>\n              </div>\n              <!-- Start Row -->\n              <div style=\"display: flex; align-items: center; gap: 12px;\">\n                <label style=\"font-weight: 600; color: var(--mj-text-secondary); white-space: nowrap; min-width: 100px;\">\n                  <i class=\"fa-solid fa-forward\" style=\"color: var(--mj-text-muted); margin-right: 6px;\"></i>\n                  Start Row:\n                </label>\n                <input type=\"number\" class=\"mj-input\"\n                  [(ngModel)]=\"startRow\"\n                  min=\"0\"\n                  step=\"1\"\n                  placeholder=\"0\"\n                  style=\"width: 150px;\" />\n                <span style=\"font-size: 0.85em; color: var(--mj-text-muted);\">\n                  0-based offset for pagination\n                </span>\n              </div>\n            </div>\n          </div>\n        </mj-accordion-panel>\n        <!-- Results Section -->\n        @if (runResult) {\n          <mj-accordion-panel\n            [(Expanded)]=\"resultsExpanded\"\n            style=\"flex: 1; display: flex; flex-direction: column; overflow: hidden; min-height: 0;\">\n            <ng-template mjAccordionTitle>\n              <span style=\"display: flex; align-items: center; gap: 8px; font-weight: 600;\">\n                @if (runResult.Success) {\n                  <i class=\"fa-solid fa-table\" style=\"color: var(--mj-status-success);\"></i>\n                  Query Results\n                  <span style=\"background: var(--mj-status-success); color: var(--mj-text-inverse); padding: 2px 6px; border-radius: 10px; font-size: 0.7em;\">\n                    {{ runResult.RowCount }} rows@if (runResult.TotalRowCount > runResult.RowCount) { of {{ runResult.TotalRowCount }} total}\n                  </span>\n                  @if (runResult.ExecutionTime) {\n                    <span style=\"color: var(--mj-text-muted); font-size: 0.85em; font-weight: normal;\">&mdash; {{ runResult.ExecutionTime }}ms</span>\n                  }\n                } @else {\n                  <i class=\"fa-solid fa-exclamation-circle\" style=\"color: var(--mj-status-error);\"></i>\n                  Query Results &mdash; Error\n                }\n              </span>\n            </ng-template>\n            <div style=\"flex: 1; display: flex; flex-direction: column; overflow: hidden; min-height: 0;\">\n              @if (runResult.Success) {\n                @if (resultRows.length > 0) {\n                  <!-- Export and Pagination Controls -->\n                  <div style=\"display: flex; justify-content: space-between; align-items: center; padding: 12px; border-bottom: 1px solid var(--mj-border-default);\">\n                    <!-- Pagination Info and Controls -->\n                    <div style=\"display: flex; align-items: center; gap: 12px;\">\n                      @if (runResult.TotalRowCount > runResult.RowCount || startRow > 0) {\n                        <span style=\"font-size: 0.9em; color: var(--mj-text-muted);\">\n                          Showing rows {{ startRow + 1 }} - {{ startRow + runResult.RowCount }} of {{ runResult.TotalRowCount }}\n                        </span>\n                        <div style=\"display: flex; gap: 4px;\">\n                          <button mjButton\n                            variant=\"flat\"\n                            [disabled]=\"startRow === 0\"\n                            (click)=\"goToFirstPage()\"\n                            title=\"First page\">\n                            <i class=\"fa-solid fa-angles-left\"></i>\n                          </button>\n                          <button mjButton\n                            variant=\"flat\"\n                            [disabled]=\"startRow === 0\"\n                            (click)=\"goToPreviousPage()\"\n                            title=\"Previous page\">\n                            <i class=\"fa-solid fa-angle-left\"></i>\n                          </button>\n                          <button mjButton\n                            variant=\"flat\"\n                            [disabled]=\"startRow + runResult.RowCount >= runResult.TotalRowCount\"\n                            (click)=\"goToNextPage()\"\n                            title=\"Next page\">\n                            <i class=\"fa-solid fa-angle-right\"></i>\n                          </button>\n                          <button mjButton\n                            variant=\"flat\"\n                            [disabled]=\"startRow + runResult.RowCount >= runResult.TotalRowCount\"\n                            (click)=\"goToLastPage()\"\n                            title=\"Last page\">\n                            <i class=\"fa-solid fa-angles-right\"></i>\n                          </button>\n                        </div>\n                      }\n                    </div>\n                    <!-- Export Buttons -->\n                    <div style=\"display: flex; gap: 8px;\">\n                      <button mjButton\n                        variant=\"flat\"\n                        (click)=\"copyToClipboard()\"\n                        title=\"Copy to clipboard\">\n                        <i class=\"fa-solid fa-copy\"></i> Copy\n                      </button>\n                      <button mjButton\n                        variant=\"flat\"\n                        (click)=\"exportToCSV()\"\n                        title=\"Export to CSV\">\n                        <i class=\"fa-solid fa-download\"></i> Export CSV\n                      </button>\n                    </div>\n                  </div>\n                  <!-- Results Grid -->\n                  <div class=\"results-table-container\" style=\"flex: 1; overflow: auto; border: 1px solid var(--mj-border-default); border-radius: 4px; min-height: 0;\">\n                    <table class=\"results-table\" style=\"width: 100%; border-collapse: collapse; font-size: 14px;\">\n                      <thead style=\"position: sticky; top: 0; background: var(--mj-bg-surface-sunken); z-index: 10;\">\n                        <tr>\n                          @for (col of resultColumns; track col.field) {\n                            <th style=\"padding: 12px 16px; text-align: left; font-weight: 600; color: var(--mj-text-secondary); border-bottom: 2px solid var(--mj-border-default); background: var(--mj-bg-surface-sunken); white-space: nowrap;\">\n                              {{ col.title }}\n                            </th>\n                          }\n                        </tr>\n                      </thead>\n                      <tbody>\n                        @for (row of resultRows; track $index) {\n                          <tr style=\"border-bottom: 1px solid var(--mj-border-default); transition: background-color 0.2s;\">\n                            @for (col of resultColumns; track col.field) {\n                              <td style=\"padding: 10px 16px; color: var(--mj-text-primary); max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;\"\n                                [title]=\"row[col.field]\">\n                                {{ row[col.field] || '' }}\n                              </td>\n                            }\n                          </tr>\n                        }\n                      </tbody>\n                    </table>\n                    @if (resultRows.length === 0) {\n                      <div style=\"padding: 40px; text-align: center; color: var(--mj-text-muted);\">\n                        <i class=\"fa-solid fa-table\" style=\"font-size: 48px; margin-bottom: 12px; opacity: 0.3;\"></i>\n                        <p>No data in results</p>\n                      </div>\n                    }\n                  </div>\n                } @else {\n                  <div style=\"display: flex; align-items: center; justify-content: center; height: 200px; color: var(--mj-text-muted);\">\n                    <i class=\"fa-solid fa-inbox\" style=\"font-size: 48px; margin-bottom: 12px;\"></i>\n                    <p>No results returned</p>\n                  </div>\n                }\n              } @else {\n                <mj-alert Variant=\"error\" Title=\"Query execution failed\">\n                  @if (runResult.ErrorMessage) {\n                    <div style=\"margin-top: 8px; font-family: 'Courier New', monospace; font-size: 0.9em;\">\n                      {{ runResult.ErrorMessage }}\n                    </div>\n                  }\n                </mj-alert>\n              }\n            </div>\n          </mj-accordion-panel>\n        }\n      }\n    </div>\n    <mj-dialog-actions>\n      @if (!runResult) {\n        <button mjButton (click)=\"close()\">\n          <i class=\"fa-solid fa-times\"></i> Cancel\n        </button>\n        <button mjButton\n          variant=\"primary\"\n          [disabled]=\"isRunning || hasInvalidParameters()\"\n          (click)=\"runQuery()\">\n          @if (isRunning) {\n            <i class=\"fa-solid fa-spinner fa-spin\"></i> Running...\n          } @else {\n            <i class=\"fa-solid fa-play\"></i> Run Query\n          }\n        </button>\n      } @else {\n        <button mjButton (click)=\"close()\">\n          <i class=\"fa-solid fa-times\"></i> Close\n        </button>\n        <button mjButton\n          variant=\"primary\"\n          [disabled]=\"isRunning\"\n          (click)=\"runQuery()\">\n          <i class=\"fa-solid fa-refresh\"></i> Run Again\n        </button>\n      }\n    </mj-dialog-actions>\n  </mj-dialog>\n}\n", styles: [".param-value textarea {\n    resize: vertical;\n    min-height: 60px;\n}\n\n.loading-state {\n    color: var(--mj-text-muted);\n}\n\n.badge {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n}\n\n/* Professional Results Table Styling */\n.results-table-container {\n    background: var(--mj-bg-surface);\n    box-shadow: var(--mj-shadow-sm);\n    display: flex;\n    flex-direction: column;\n}\n\n.results-table-container::-webkit-scrollbar {\n    width: 8px;\n    height: 8px;\n}\n\n.results-table-container::-webkit-scrollbar-track {\n    background: var(--mj-bg-surface-sunken);\n}\n\n.results-table-container::-webkit-scrollbar-thumb {\n    background: var(--mj-border-strong);\n    border-radius: var(--mj-radius-sm);\n}\n\n.results-table-container::-webkit-scrollbar-thumb:hover {\n    background: var(--mj-text-disabled);\n}\n\n.results-table tbody tr:hover {\n    background-color: var(--mj-bg-surface-card) !important;\n}\n\n.results-table tbody tr:nth-child(even) {\n    background-color: var(--mj-bg-surface-card);\n}\n\n.dialog-content {\n    overflow-y: auto;\n}\n\n.header-section {\n    flex-shrink: 0;\n}\n\n.param-actions button {\n    min-width: 30px;\n    padding: 4px 6px;\n}\n"] }]
     }], null, { query: [{
             type: Input
         }], parameters: [{

package/dist/lib/custom/Templates/template-param-dialog.component.js

@@ -745,11 +745,11 @@ export class TemplateParamDialogComponent extends BaseAngularComponent {
             i0.ɵɵconditionalCreate(0, TemplateParamDialogComponent_Conditional_0_Template, 27, 8, "mj-dialog", 0);
         } if (rf & 2) {
             i0.ɵɵconditional(ctx._isVisible ? 0 : -1);
-        } }, dependencies: [i1.DefaultValueAccessor, i1.NgControlStatus, i1.NgModel, i2.MJEmptyStateComponent, i2.MJButtonDirective, i2.MJAccordionPanelComponent, i2.MJAccordionTitleDirective, i2.MJDialogComponent, i2.MJDialogTitlebarComponent, i2.MJDialogActionsComponent], styles: [".dialog-content[_ngcontent-%COMP%] {\n    min-height: 500px;\n    max-height: 650px;\n}\n\n.parameter-row[_ngcontent-%COMP%]:hover {\n    background-color: var(--mj-bg-surface-card) !important;\n}\n\n.parameter-row[_ngcontent-%COMP%]:last-child {\n    border-bottom: none;\n}\n\n.param-name[_ngcontent-%COMP%], \n.param-value[_ngcontent-%COMP%] {\n    min-width: 0;\n}\n\n.param-name[_ngcontent-%COMP%]   .mj-input[_ngcontent-%COMP%], \n.param-value[_ngcontent-%COMP%]   .mj-textarea[_ngcontent-%COMP%] {\n    width: 100%;\n}\n\n.json-preview[_ngcontent-%COMP%]   pre[_ngcontent-%COMP%] {\n    line-height: 1.3;\n}\n\n.test-results[_ngcontent-%COMP%] {\n    box-shadow: 0 2px 4px var(--mj-shadow-sm);\n}\n\n.result-content[_ngcontent-%COMP%]   pre[_ngcontent-%COMP%] {\n    line-height: 1.4;\n}\n\n\n.parameters-list[_ngcontent-%COMP%]::-webkit-scrollbar, \n.result-content[_ngcontent-%COMP%]::-webkit-scrollbar, \n.json-preview[_ngcontent-%COMP%]    > div[_ngcontent-%COMP%]::-webkit-scrollbar {\n    width: 6px;\n}\n\n.parameters-list[_ngcontent-%COMP%]::-webkit-scrollbar-track, \n.result-content[_ngcontent-%COMP%]::-webkit-scrollbar-track, \n.json-preview[_ngcontent-%COMP%]    > div[_ngcontent-%COMP%]::-webkit-scrollbar-track {\n    background: var(--mj-bg-surface-card);\n    border-radius: 3px;\n}\n\n.parameters-list[_ngcontent-%COMP%]::-webkit-scrollbar-thumb, \n.result-content[_ngcontent-%COMP%]::-webkit-scrollbar-thumb, \n.json-preview[_ngcontent-%COMP%]    > div[_ngcontent-%COMP%]::-webkit-scrollbar-thumb {\n    background: var(--mj-border-strong);\n    border-radius: 3px;\n}\n\n.parameters-list[_ngcontent-%COMP%]::-webkit-scrollbar-thumb:hover, \n.result-content[_ngcontent-%COMP%]::-webkit-scrollbar-thumb:hover, \n.json-preview[_ngcontent-%COMP%]    > div[_ngcontent-%COMP%]::-webkit-scrollbar-thumb:hover {\n    background: var(--mj-text-muted);\n}\n\n.parameter-row[_ngcontent-%COMP%] {\n    align-items: flex-start;\n}\n\n.parameters-section[_ngcontent-%COMP%] {\n    flex-shrink: 0;\n}\n\n.param-name[_ngcontent-%COMP%]    > div[_ngcontent-%COMP%] {\n    word-wrap: break-word;\n    overflow-wrap: break-word;\n}\n\n.header-section[_ngcontent-%COMP%]    > div[_ngcontent-%COMP%]:first-child:hover, \n.json-preview-header[_ngcontent-%COMP%]    > div[_ngcontent-%COMP%]:first-child:hover, \n.result-header[_ngcontent-%COMP%]:hover {\n    background-color: var(--mj-bg-surface-card) !important;\n    transition: background-color 0.2s ease;\n}\n\n.fa-chevron-down[_ngcontent-%COMP%], \n.fa-chevron-right[_ngcontent-%COMP%] {\n    transition: transform 0.2s ease;\n}\n\n.test-results[_ngcontent-%COMP%]   .result-header[_ngcontent-%COMP%]   [mjButton][_ngcontent-%COMP%] {\n    opacity: 0.8;\n    transition: opacity 0.2s ease;\n}\n\n.test-results[_ngcontent-%COMP%]   .result-header[_ngcontent-%COMP%]:hover   [mjButton][_ngcontent-%COMP%] {\n    opacity: 1;\n}\n\n\n.dlg-header[_ngcontent-%COMP%] {\n    margin-bottom: 20px;\n    padding-bottom: 16px;\n    border-bottom: 2px solid var(--mj-border-default);\n}\n\n.dlg-header-row[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    margin-bottom: 8px;\n}\n\n.dlg-header-row[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-text-muted);\n    font-size: 1.2em;\n}\n\n.dlg-header-row[_ngcontent-%COMP%]   h5[_ngcontent-%COMP%] {\n    margin: 0;\n    color: var(--mj-text-primary);\n    font-weight: 600;\n}\n\n.dlg-header[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n    margin: 0;\n    color: var(--mj-text-muted);\n    font-size: 0.9em;\n}\n\n.dlg-header[_ngcontent-%COMP%]   .required-marker[_ngcontent-%COMP%] {\n    color: var(--mj-status-error);\n}\n\n\n.dlg-loading[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 40px;\n}\n\n.dlg-loading[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 24px;\n    color: var(--mj-text-muted);\n    margin-right: 12px;\n}\n\n.dlg-loading[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n    color: var(--mj-text-muted);\n}\n\n\n.dlg-panel-title[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-weight: 600;\n}\n\n.dlg-panel-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-text-muted);\n}\n\n\n\n.dlg-info-text[_ngcontent-%COMP%] {\n    margin-bottom: 12px;\n    color: var(--mj-text-muted);\n    font-size: 0.85em;\n}\n\n\n.params-table[_ngcontent-%COMP%] {\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    background: var(--mj-bg-surface-card);\n}\n\n.params-table-header[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: 200px 1fr 60px;\n    gap: 12px;\n    padding: 12px 16px;\n    background: var(--mj-bg-surface-sunken);\n    font-weight: 600;\n    font-size: 0.85em;\n    color: var(--mj-text-secondary);\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.params-table-row[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: 200px 1fr 60px;\n    gap: 12px;\n    padding: 12px 16px;\n    border-bottom: 1px solid var(--mj-border-default);\n    align-items: start;\n    background: var(--mj-bg-surface);\n}\n\n.param-source-icon-template[_ngcontent-%COMP%] {\n    color: var(--mj-status-success);\n    font-size: 0.75em;\n}\n\n.param-source-icon-custom[_ngcontent-%COMP%] {\n    color: var(--mj-status-warning);\n    font-size: 0.75em;\n}\n\n.param-required-marker[_ngcontent-%COMP%] {\n    color: var(--mj-status-error);\n    font-weight: bold;\n}\n\n.param-key-text[_ngcontent-%COMP%] {\n    font-family: 'Courier New', monospace;\n    font-size: 0.9em;\n    font-weight: 500;\n    color: var(--mj-text-primary);\n    padding: 4px 0;\n    word-break: break-word;\n}\n\n.param-description-text[_ngcontent-%COMP%] {\n    font-size: 0.75em;\n    color: var(--mj-text-muted);\n    margin-top: 2px;\n    font-style: italic;\n    word-break: break-word;\n}\n\n.param-type-text[_ngcontent-%COMP%] {\n    font-size: 0.7em;\n    color: var(--mj-brand-primary);\n    margin-top: 2px;\n}\n\n.param-actions[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: start;\n    justify-content: center;\n    padding-top: 4px;\n}\n\n\n.add-param-row[_ngcontent-%COMP%] {\n    padding: 12px 16px;\n    text-align: center;\n    background: var(--mj-bg-surface);\n    border-top: 1px solid var(--mj-border-default);\n}\n\n\n.json-preview-box[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 4px;\n    padding: 12px;\n    font-family: 'Courier New', monospace;\n    font-size: 0.85em;\n    color: var(--mj-text-primary);\n    max-height: 200px;\n    overflow-y: auto;\n}\n\n.json-preview-box[_ngcontent-%COMP%]   pre[_ngcontent-%COMP%] {\n    margin: 0;\n    white-space: pre-wrap;\n}\n\n\n.result-badge-success[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-success);\n    border: 1px solid color-mix(in srgb, var(--mj-status-success) 30%, transparent);\n    padding: 2px 6px;\n    border-radius: 10px;\n    font-size: 0.7em;\n    font-weight: 600;\n}\n\n.result-badge-error[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-error);\n    border: 1px solid color-mix(in srgb, var(--mj-status-error) 30%, transparent);\n    padding: 2px 6px;\n    border-radius: 10px;\n    font-size: 0.7em;\n    font-weight: 600;\n}\n\n\n.result-stats[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));\n    gap: 12px;\n    margin-bottom: 16px;\n    padding: 12px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n}\n\n.result-stats.success[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-success) 10%, var(--mj-bg-surface));\n}\n\n.result-stats.error[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n}\n\n.result-stat[_ngcontent-%COMP%] {\n    text-align: center;\n}\n\n.result-stat-label[_ngcontent-%COMP%] {\n    font-size: 0.75em;\n    margin-bottom: 2px;\n    color: var(--mj-text-muted);\n}\n\n.result-stat-value[_ngcontent-%COMP%] {\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n\n\n.output-header[_ngcontent-%COMP%] {\n    margin: 0 0 8px 0;\n    color: var(--mj-text-primary);\n    display: flex;\n    align-items: center;\n    gap: 6px;\n}\n\n.output-header[_ngcontent-%COMP%]   .success-icon[_ngcontent-%COMP%] {\n    color: var(--mj-status-success);\n}\n\n.output-header[_ngcontent-%COMP%]   .error-icon[_ngcontent-%COMP%] {\n    color: var(--mj-status-error);\n}\n\n.output-box[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 4px;\n    padding: 12px;\n    font-family: 'Courier New', monospace;\n    font-size: 0.9em;\n    white-space: pre-wrap;\n    overflow: auto;\n    height: 150px;\n    color: var(--mj-text-primary);\n}\n\n.error-output-box[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-error) 8%, var(--mj-bg-surface));\n    border: 1px solid color-mix(in srgb, var(--mj-status-error) 20%, var(--mj-bg-surface));\n    border-radius: 4px;\n    padding: 12px;\n    color: var(--mj-status-error);\n    font-family: 'Courier New', monospace;\n    font-size: 0.9em;\n    white-space: pre-wrap;\n    overflow: auto;\n    height: 150px;\n}\n\n\nmj-empty-state.no-results-state[_ngcontent-%COMP%] {\n    flex: 1;\n}"] }); }
+        } }, dependencies: [i1.DefaultValueAccessor, i1.NgControlStatus, i1.NgModel, i2.MJEmptyStateComponent, i2.MJButtonDirective, i2.MJAccordionPanelComponent, i2.MJAccordionTitleDirective, i2.MJDialogComponent, i2.MJDialogTitlebarComponent, i2.MJDialogActionsComponent], styles: [".dialog-content[_ngcontent-%COMP%] {\n    min-height: 500px;\n    max-height: 650px;\n}\n\n.parameter-row[_ngcontent-%COMP%]:hover {\n    background-color: var(--mj-bg-surface-card) !important;\n}\n\n.parameter-row[_ngcontent-%COMP%]:last-child {\n    border-bottom: none;\n}\n\n.param-name[_ngcontent-%COMP%], \n.param-value[_ngcontent-%COMP%] {\n    min-width: 0;\n}\n\n.param-name[_ngcontent-%COMP%]   .mj-input[_ngcontent-%COMP%], \n.param-value[_ngcontent-%COMP%]   .mj-textarea[_ngcontent-%COMP%] {\n    width: 100%;\n}\n\n.json-preview[_ngcontent-%COMP%]   pre[_ngcontent-%COMP%] {\n    line-height: 1.3;\n}\n\n.test-results[_ngcontent-%COMP%] {\n    box-shadow: 0 2px 4px var(--mj-shadow-sm);\n}\n\n.result-content[_ngcontent-%COMP%]   pre[_ngcontent-%COMP%] {\n    line-height: 1.4;\n}\n\n\n.parameters-list[_ngcontent-%COMP%]::-webkit-scrollbar, \n.result-content[_ngcontent-%COMP%]::-webkit-scrollbar, \n.json-preview[_ngcontent-%COMP%]    > div[_ngcontent-%COMP%]::-webkit-scrollbar {\n    width: 6px;\n}\n\n.parameters-list[_ngcontent-%COMP%]::-webkit-scrollbar-track, \n.result-content[_ngcontent-%COMP%]::-webkit-scrollbar-track, \n.json-preview[_ngcontent-%COMP%]    > div[_ngcontent-%COMP%]::-webkit-scrollbar-track {\n    background: var(--mj-bg-surface-card);\n    border-radius: 3px;\n}\n\n.parameters-list[_ngcontent-%COMP%]::-webkit-scrollbar-thumb, \n.result-content[_ngcontent-%COMP%]::-webkit-scrollbar-thumb, \n.json-preview[_ngcontent-%COMP%]    > div[_ngcontent-%COMP%]::-webkit-scrollbar-thumb {\n    background: var(--mj-border-strong);\n    border-radius: 3px;\n}\n\n.parameters-list[_ngcontent-%COMP%]::-webkit-scrollbar-thumb:hover, \n.result-content[_ngcontent-%COMP%]::-webkit-scrollbar-thumb:hover, \n.json-preview[_ngcontent-%COMP%]    > div[_ngcontent-%COMP%]::-webkit-scrollbar-thumb:hover {\n    background: var(--mj-text-muted);\n}\n\n.parameter-row[_ngcontent-%COMP%] {\n    align-items: flex-start;\n}\n\n.parameters-section[_ngcontent-%COMP%] {\n    flex-shrink: 0;\n}\n\n.param-name[_ngcontent-%COMP%]    > div[_ngcontent-%COMP%] {\n    word-wrap: break-word;\n    overflow-wrap: break-word;\n}\n\n.header-section[_ngcontent-%COMP%]    > div[_ngcontent-%COMP%]:first-child:hover, \n.json-preview-header[_ngcontent-%COMP%]    > div[_ngcontent-%COMP%]:first-child:hover, \n.result-header[_ngcontent-%COMP%]:hover {\n    background-color: var(--mj-bg-surface-card) !important;\n    transition: background-color 0.2s ease;\n}\n\n.fa-chevron-down[_ngcontent-%COMP%], \n.fa-chevron-right[_ngcontent-%COMP%] {\n    transition: transform 0.2s ease;\n}\n\n.test-results[_ngcontent-%COMP%]   .result-header[_ngcontent-%COMP%]   [mjButton][_ngcontent-%COMP%] {\n    opacity: 0.8;\n    transition: opacity 0.2s ease;\n}\n\n.test-results[_ngcontent-%COMP%]   .result-header[_ngcontent-%COMP%]:hover   [mjButton][_ngcontent-%COMP%] {\n    opacity: 1;\n}\n\n\n.dlg-header[_ngcontent-%COMP%] {\n    margin-bottom: 20px;\n    padding-bottom: 16px;\n    border-bottom: 2px solid var(--mj-border-default);\n}\n\n.dlg-header-row[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    margin-bottom: 8px;\n}\n\n.dlg-header-row[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-text-muted);\n    font-size: 1.2em;\n}\n\n.dlg-header-row[_ngcontent-%COMP%]   h5[_ngcontent-%COMP%] {\n    margin: 0;\n    color: var(--mj-text-primary);\n    font-weight: 600;\n}\n\n.dlg-header[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n    margin: 0;\n    color: var(--mj-text-muted);\n    font-size: 0.9em;\n}\n\n.dlg-header[_ngcontent-%COMP%]   .required-marker[_ngcontent-%COMP%] {\n    color: var(--mj-status-error);\n}\n\n\n.dlg-loading[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 40px;\n}\n\n.dlg-loading[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 24px;\n    color: var(--mj-text-muted);\n    margin-right: 12px;\n}\n\n.dlg-loading[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n    color: var(--mj-text-muted);\n}\n\n\n.dlg-panel-title[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-weight: 600;\n}\n\n.dlg-panel-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-text-muted);\n}\n\n\n\n.dlg-info-text[_ngcontent-%COMP%] {\n    margin-bottom: 12px;\n    color: var(--mj-text-muted);\n    font-size: 0.85em;\n}\n\n\n.params-table[_ngcontent-%COMP%] {\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    background: var(--mj-bg-surface-card);\n}\n\n.params-table-header[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: 200px 1fr 60px;\n    gap: 12px;\n    padding: 12px 16px;\n    background: var(--mj-bg-surface-sunken);\n    font-weight: 600;\n    font-size: 0.85em;\n    color: var(--mj-text-secondary);\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.params-table-row[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: 200px 1fr 60px;\n    gap: 12px;\n    padding: 12px 16px;\n    border-bottom: 1px solid var(--mj-border-default);\n    align-items: start;\n    background: var(--mj-bg-surface);\n}\n\n.param-source-icon-template[_ngcontent-%COMP%] {\n    color: var(--mj-status-success);\n    font-size: 0.75em;\n}\n\n.param-source-icon-custom[_ngcontent-%COMP%] {\n    color: var(--mj-status-warning);\n    font-size: 0.75em;\n}\n\n.param-required-marker[_ngcontent-%COMP%] {\n    color: var(--mj-status-error);\n    font-weight: bold;\n}\n\n.param-key-text[_ngcontent-%COMP%] {\n    font-family: 'Courier New', monospace;\n    font-size: 0.9em;\n    font-weight: 500;\n    color: var(--mj-text-primary);\n    padding: 4px 0;\n    word-break: break-word;\n}\n\n.param-description-text[_ngcontent-%COMP%] {\n    font-size: 0.75em;\n    color: var(--mj-text-muted);\n    margin-top: 2px;\n    font-style: italic;\n    word-break: break-word;\n}\n\n.param-type-text[_ngcontent-%COMP%] {\n    font-size: 0.7em;\n    color: var(--mj-brand-primary);\n    margin-top: 2px;\n}\n\n.param-actions[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: start;\n    justify-content: center;\n    padding-top: 4px;\n}\n\n\n.add-param-row[_ngcontent-%COMP%] {\n    padding: 12px 16px;\n    text-align: center;\n    background: var(--mj-bg-surface);\n    border-top: 1px solid var(--mj-border-default);\n}\n\n\n.json-preview-box[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 4px;\n    padding: 12px;\n    font-family: 'Courier New', monospace;\n    font-size: 0.85em;\n    color: var(--mj-text-primary);\n    max-height: 200px;\n    overflow-y: auto;\n}\n\n.json-preview-box[_ngcontent-%COMP%]   pre[_ngcontent-%COMP%] {\n    margin: 0;\n    white-space: pre-wrap;\n}\n\n\n.result-badge-success[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-success);\n    border: 1px solid color-mix(in srgb, var(--mj-status-success) 30%, transparent);\n    padding: 2px 6px;\n    border-radius: 10px;\n    font-size: 0.7em;\n    font-weight: 600;\n}\n\n.result-badge-error[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-error);\n    border: 1px solid color-mix(in srgb, var(--mj-status-error) 30%, transparent);\n    padding: 2px 6px;\n    border-radius: 10px;\n    font-size: 0.7em;\n    font-weight: 600;\n}\n\n\n.result-stats[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));\n    gap: 12px;\n    margin-bottom: 16px;\n    padding: 12px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n}\n\n.result-stats.success[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-success) 10%, var(--mj-bg-surface));\n}\n\n.result-stats.error[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n}\n\n.result-stat[_ngcontent-%COMP%] {\n    text-align: center;\n}\n\n.result-stat-label[_ngcontent-%COMP%] {\n    font-size: 0.75em;\n    margin-bottom: 2px;\n    color: var(--mj-text-muted);\n}\n\n.result-stat-value[_ngcontent-%COMP%] {\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n\n\n.output-header[_ngcontent-%COMP%] {\n    margin: 0 0 8px 0;\n    color: var(--mj-text-primary);\n    display: flex;\n    align-items: center;\n    gap: 6px;\n}\n\n.output-header[_ngcontent-%COMP%]   .success-icon[_ngcontent-%COMP%] {\n    color: var(--mj-status-success);\n}\n\n.output-header[_ngcontent-%COMP%]   .error-icon[_ngcontent-%COMP%] {\n    color: var(--mj-status-error);\n}\n\n.output-box[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 4px;\n    padding: 12px;\n    font-family: 'Courier New', monospace;\n    font-size: 0.9em;\n    white-space: pre-wrap;\n    overflow: auto;\n    height: 150px;\n    color: var(--mj-text-primary);\n}\n\n.error-output-box[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-error) 8%, var(--mj-bg-surface));\n    border: 1px solid color-mix(in srgb, var(--mj-status-error) 20%, var(--mj-bg-surface));\n    border-radius: 4px;\n    padding: 12px;\n    color: var(--mj-status-error);\n    font-family: 'Courier New', monospace;\n    font-size: 0.9em;\n    white-space: pre-wrap;\n    overflow: auto;\n    height: 150px;\n}\n\n\nmj-empty-state.no-results-state[_ngcontent-%COMP%] {\n    flex: 1;\n}\n\n\n\n@media (max-width: 768px) {\n    .params-table-header[_ngcontent-%COMP%] {\n        display: none;\n    }\n\n    .params-table-row[_ngcontent-%COMP%] {\n        grid-template-columns: minmax(0, 1fr) auto;\n        grid-template-areas:\n            \"name actions\"\n            \"value value\";\n        gap: 8px;\n        padding: 12px;\n    }\n\n    .params-table-row[_ngcontent-%COMP%]    > .param-name[_ngcontent-%COMP%] { grid-area: name; }\n    .params-table-row[_ngcontent-%COMP%]    > .param-value[_ngcontent-%COMP%] { grid-area: value; }\n\n    .params-table-row[_ngcontent-%COMP%]    > .param-actions[_ngcontent-%COMP%] {\n        grid-area: actions;\n        padding-top: 0;\n    }\n\n    .param-actions[_ngcontent-%COMP%]    > button[_ngcontent-%COMP%] {\n        min-width: 44px;\n        min-height: 44px;\n    }\n}"] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TemplateParamDialogComponent, [{
         type: Component,
-        args: [{ standalone: false, selector: 'mj-template-param-dialog', template: "@if (_isVisible) {\n  <mj-dialog\n    [Visible]=\"true\"\n    [Width]=\"800\"\n    (Close)=\"close()\">\n    <mj-dialog-titlebar>Test Template: {{ template?.Name || 'Unknown' }}</mj-dialog-titlebar>\n    <div class=\"dialog-content\" style=\"display: flex; flex-direction: column; height: 100%; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\">\n      <!-- Header Section -->\n      <div class=\"dlg-header\">\n        <div class=\"dlg-header-row\">\n          <i class=\"fa-solid fa-sliders\"></i>\n          <h5>Template Testing</h5>\n        </div>\n        <p>\n          Configure parameter values for testing. Parameters with <span class=\"required-marker\">*</span> are required.\n        </p>\n      </div>\n      <!-- Loading State -->\n      @if (isLoading) {\n        <div class=\"dlg-loading\">\n          <i class=\"fa-solid fa-spinner fa-spin\"></i>\n          <span>Loading template parameters...</span>\n        </div>\n      } @else {\n        <!-- Template Parameters Section -->\n        <mj-accordion-panel\n          [(Expanded)]=\"parametersExpanded\"\n          style=\"margin-bottom: 16px; flex-shrink: 0;\">\n          <ng-template mjAccordionTitle>\n            <span class=\"dlg-panel-title\">\n              <i class=\"fa-solid fa-sliders\"></i>\n              Template Parameters\n              @if (parameters.length > 0) {\n                <span class=\"mj-accordion-badge mj-accordion-badge--right\">{{ parameters.length }}</span>\n              }\n            </span>\n          </ng-template>\n          <div style=\"padding: 12px 0;\">\n            <div class=\"dlg-info-text\">\n              <i class=\"fa-solid fa-info-circle\"></i>\n              Configure parameter values for template testing. Values can be JSON objects, strings, or numbers.\n            </div>\n            <!-- Parameters Table -->\n            @if (parameters.length > 0) {\n              <div class=\"params-table\">\n                <!-- Header -->\n                <div class=\"params-table-header\">\n                  <div>Parameter Name</div>\n                  <div>Value</div>\n                  <div>Actions</div>\n                </div>\n                <!-- Parameter Rows -->\n                @for (param of parameters; track $index; let i = $index) {\n                  <div class=\"params-table-row\">\n                    <!-- Parameter Name -->\n                    <div class=\"param-name\" style=\"display: flex; flex-direction: column;\">\n                      <div style=\"display: flex; align-items: center; gap: 4px; margin-bottom: 4px;\">\n                        @if (param.isFromTemplate) {\n                          <i class=\"fa-solid fa-database param-source-icon-template\" title=\"From template definition\"></i>\n                        } @else {\n                          <i class=\"fa-solid fa-edit param-source-icon-custom\" title=\"Custom parameter\"></i>\n                        }\n                        @if (param.isRequired) {\n                          <span class=\"param-required-marker\">*</span>\n                        }\n                      </div>\n                      @if (param.isFromTemplate) {\n                        <div class=\"param-key-text\">\n                          {{ param.key }}\n                        </div>\n                        @if (param.description) {\n                          <div class=\"param-description-text\">\n                            {{ param.description }}\n                          </div>\n                        }\n                        @if (param.type && param.type !== 'Scalar') {\n                          <div class=\"param-type-text\">\n                            Type: {{ param.type }}\n                          </div>\n                        }\n                      } @else {\n                        <input type=\"text\" class=\"mj-input\"\n                          [(ngModel)]=\"param.key\"\n                          (ngModelChange)=\"onParameterChange()\"\n                          placeholder=\"Parameter name...\"\n                          [disabled]=\"isRunning\"\n                          style=\"font-family: 'Courier New', monospace; width: 100%;\" />\n                      }\n                    </div>\n                    <!-- Parameter Value -->\n                    <div class=\"param-value\">\n                      <textarea class=\"mj-textarea\"\n                        [(ngModel)]=\"param.value\"\n                        (ngModelChange)=\"onParameterChange()\"\n                        [rows]=\"2\"\n                        placeholder=\"Enter value (JSON strings, numbers, objects)...\"\n                        [disabled]=\"isRunning\"\n                        style=\"font-family: 'Courier New', monospace; font-size: 0.9em; width: 100%;\"></textarea>\n                    </div>\n                    <!-- Actions -->\n                    <div class=\"param-actions\">\n                      @if (!param.isFromTemplate && parameters.length > 1) {\n                        <button mjButton variant=\"danger\" size=\"sm\"\n                          (click)=\"removeParameter(i)\"\n                          [disabled]=\"isRunning\"\n                          title=\"Remove parameter\">\n                          <i class=\"fa-solid fa-times\"></i>\n                        </button>\n                      }\n                    </div>\n                  </div>\n                }\n                <!-- Add Parameter Row -->\n                <div class=\"add-param-row\">\n                  <button mjButton variant=\"success\" size=\"sm\"\n                    (click)=\"addParameter()\"\n                    [disabled]=\"isRunning\">\n                    <i class=\"fa-solid fa-plus\"></i> Add Parameter\n                  </button>\n                </div>\n              </div>\n            } @else {\n              <mj-empty-state\n                Size=\"compact\"\n                Icon=\"fa-solid fa-circle-info\"\n                Title=\"No parameters defined yet\">\n                <button ngProjectAs=\"[actions]\" mjButton variant=\"primary\" size=\"sm\"\n                  (click)=\"addParameter()\"\n                  [disabled]=\"isRunning\">\n                  <i class=\"fa-solid fa-plus\"></i> Add First Parameter\n                </button>\n              </mj-empty-state>\n            }\n          </div>\n        </mj-accordion-panel>\n        <!-- JSON Preview Section -->\n        <mj-accordion-panel\n          [(Expanded)]=\"jsonPreviewExpanded\"\n          style=\"margin-bottom: 16px; flex-shrink: 0;\">\n          <ng-template mjAccordionTitle>\n            <span class=\"dlg-panel-title\">\n              <i class=\"fa-solid fa-code\"></i>\n              Context Data (JSON)\n            </span>\n          </ng-template>\n          <div style=\"padding: 12px 0;\">\n            <div class=\"json-preview-box\">\n              <pre>{{ parametersAsJson }}</pre>\n            </div>\n          </div>\n        </mj-accordion-panel>\n        <!-- Test Results Section -->\n        <mj-accordion-panel\n          [(Expanded)]=\"resultsExpanded\"\n          style=\"margin-bottom: 16px; flex: 1; display: flex; flex-direction: column;\">\n          <ng-template mjAccordionTitle>\n            <span class=\"dlg-panel-title\">\n              <i class=\"fa-solid fa-chart-line\"></i>\n              Test Results\n              @if (testResult) {\n                @if (testResult.Success) {\n                  <span class=\"result-badge success\"><i class=\"fa-solid fa-check\"></i> Success</span>\n                } @else {\n                  <span class=\"result-badge error\"><i class=\"fa-solid fa-times\"></i> Failed</span>\n                }\n              }\n            </span>\n          </ng-template>\n          <div style=\"padding: 12px 0; flex: 1; display: flex; flex-direction: column;\">\n            @if (isRunning) {\n              <div class=\"dlg-loading\" style=\"flex: 1;\">\n                <i class=\"fa-solid fa-spinner fa-spin\"></i>\n                <span>Running template...</span>\n              </div>\n            } @else if (testResult) {\n              <div style=\"flex: 1; display: flex; flex-direction: column;\">\n                <!-- Result Header with Stats -->\n                <div class=\"result-stats\" [class.success]=\"testResult.Success\" [class.error]=\"!testResult.Success\">\n                  <div class=\"result-stat\">\n                    <div class=\"result-stat-label\">STATUS</div>\n                    <div class=\"result-stat-value\">\n                      {{ testResult.Success ? 'Success' : 'Failed' }}\n                    </div>\n                  </div>\n                  @if (testResult.ExecutionTimeMs) {\n                    <div class=\"result-stat\">\n                      <div class=\"result-stat-label\">EXECUTION TIME</div>\n                      <div class=\"result-stat-value\">{{ testResult.ExecutionTimeMs }}ms</div>\n                    </div>\n                  }\n                  <div class=\"result-stat\">\n                    <div class=\"result-stat-label\">ACTIONS</div>\n                    <button mjButton variant=\"flat\" size=\"sm\"\n                      (click)=\"saveResults()\"\n                      title=\"Save results to file\">\n                      <i class=\"fa-solid fa-download\"></i>\n                    </button>\n                  </div>\n                </div>\n                <!-- Result Content -->\n                <div style=\"flex: 1; display: flex; flex-direction: column;\">\n                  @if (testResult.Success && testResult.Output) {\n                    <div style=\"margin-bottom: 12px; flex: 1; display: flex; flex-direction: column;\">\n                      <h6 class=\"output-header\">\n                        <i class=\"fa-solid fa-check-circle success-icon\"></i>\n                        Template Output\n                      </h6>\n                      <div class=\"output-box\">\n                        {{ testResult.Output }}\n                      </div>\n                    </div>\n                  } @else if (!testResult.Success && testResult.Error) {\n                    <div style=\"margin-bottom: 12px; flex: 1; display: flex; flex-direction: column;\">\n                      <h6 class=\"output-header\">\n                        <i class=\"fa-solid fa-exclamation-triangle error-icon\"></i>\n                        Error Details\n                      </h6>\n                      <div class=\"error-output-box\">{{ testResult.Error }}</div>\n                    </div>\n                  }\n                </div>\n              </div>\n            } @else {\n              <mj-empty-state class=\"no-results-state\"\n                Size=\"compact\"\n                Icon=\"fa-solid fa-circle-play\"\n                Title=\"No test results yet. Run the template to see results here.\" />\n            }\n          </div>\n        </mj-accordion-panel>\n      }\n    </div>\n    <!-- Dialog Actions -->\n    <mj-dialog-actions>\n      <div style=\"display: flex; justify-content: space-between; align-items: center; width: 100%;\">\n        <div>\n          @if (hasUnsavedParameters) {\n            <button mjButton variant=\"outline\"\n              (click)=\"updateTemplateParams()\"\n              [disabled]=\"isRunning\">\n              <i class=\"fa-solid fa-save\"></i> Update Template Params\n            </button>\n          }\n        </div>\n        <div style=\"display: flex; gap: 8px;\">\n          <button mjButton variant=\"outline\" (click)=\"close()\">\n            Close\n          </button>\n          @if (testResult) {\n            <button mjButton variant=\"outline\" (click)=\"saveResults()\">\n              <i class=\"fa-solid fa-download\"></i> Save Results\n            </button>\n          }\n          <button mjButton variant=\"primary\"\n            [disabled]=\"isRunning || isLoading\"\n            (click)=\"runTemplate()\">\n            @if (isRunning) {\n              <i class=\"fa-solid fa-spinner fa-spin\"></i> Running...\n            } @else {\n              <i class=\"fa-solid fa-play\"></i> Run Template\n            }\n          </button>\n        </div>\n      </div>\n    </mj-dialog-actions>\n  </mj-dialog>\n}\n", styles: [".dialog-content {\n    min-height: 500px;\n    max-height: 650px;\n}\n\n.parameter-row:hover {\n    background-color: var(--mj-bg-surface-card) !important;\n}\n\n.parameter-row:last-child {\n    border-bottom: none;\n}\n\n.param-name,\n.param-value {\n    min-width: 0;\n}\n\n.param-name .mj-input,\n.param-value .mj-textarea {\n    width: 100%;\n}\n\n.json-preview pre {\n    line-height: 1.3;\n}\n\n.test-results {\n    box-shadow: 0 2px 4px var(--mj-shadow-sm);\n}\n\n.result-content pre {\n    line-height: 1.4;\n}\n\n/* Scrollbar styling */\n.parameters-list::-webkit-scrollbar,\n.result-content::-webkit-scrollbar,\n.json-preview > div::-webkit-scrollbar {\n    width: 6px;\n}\n\n.parameters-list::-webkit-scrollbar-track,\n.result-content::-webkit-scrollbar-track,\n.json-preview > div::-webkit-scrollbar-track {\n    background: var(--mj-bg-surface-card);\n    border-radius: 3px;\n}\n\n.parameters-list::-webkit-scrollbar-thumb,\n.result-content::-webkit-scrollbar-thumb,\n.json-preview > div::-webkit-scrollbar-thumb {\n    background: var(--mj-border-strong);\n    border-radius: 3px;\n}\n\n.parameters-list::-webkit-scrollbar-thumb:hover,\n.result-content::-webkit-scrollbar-thumb:hover,\n.json-preview > div::-webkit-scrollbar-thumb:hover {\n    background: var(--mj-text-muted);\n}\n\n.parameter-row {\n    align-items: flex-start;\n}\n\n.parameters-section {\n    flex-shrink: 0;\n}\n\n.param-name > div {\n    word-wrap: break-word;\n    overflow-wrap: break-word;\n}\n\n.header-section > div:first-child:hover,\n.json-preview-header > div:first-child:hover,\n.result-header:hover {\n    background-color: var(--mj-bg-surface-card) !important;\n    transition: background-color 0.2s ease;\n}\n\n.fa-chevron-down,\n.fa-chevron-right {\n    transition: transform 0.2s ease;\n}\n\n.test-results .result-header [mjButton] {\n    opacity: 0.8;\n    transition: opacity 0.2s ease;\n}\n\n.test-results .result-header:hover [mjButton] {\n    opacity: 1;\n}\n\n/* Dialog header section */\n.dlg-header {\n    margin-bottom: 20px;\n    padding-bottom: 16px;\n    border-bottom: 2px solid var(--mj-border-default);\n}\n\n.dlg-header-row {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    margin-bottom: 8px;\n}\n\n.dlg-header-row i {\n    color: var(--mj-text-muted);\n    font-size: 1.2em;\n}\n\n.dlg-header-row h5 {\n    margin: 0;\n    color: var(--mj-text-primary);\n    font-weight: 600;\n}\n\n.dlg-header p {\n    margin: 0;\n    color: var(--mj-text-muted);\n    font-size: 0.9em;\n}\n\n.dlg-header .required-marker {\n    color: var(--mj-status-error);\n}\n\n/* Loading state */\n.dlg-loading {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 40px;\n}\n\n.dlg-loading i {\n    font-size: 24px;\n    color: var(--mj-text-muted);\n    margin-right: 12px;\n}\n\n.dlg-loading span {\n    color: var(--mj-text-muted);\n}\n\n/* Panel title */\n.dlg-panel-title {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-weight: 600;\n}\n\n.dlg-panel-title i {\n    color: var(--mj-text-muted);\n}\n\n\n/* Info text */\n.dlg-info-text {\n    margin-bottom: 12px;\n    color: var(--mj-text-muted);\n    font-size: 0.85em;\n}\n\n/* Parameters table */\n.params-table {\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    background: var(--mj-bg-surface-card);\n}\n\n.params-table-header {\n    display: grid;\n    grid-template-columns: 200px 1fr 60px;\n    gap: 12px;\n    padding: 12px 16px;\n    background: var(--mj-bg-surface-sunken);\n    font-weight: 600;\n    font-size: 0.85em;\n    color: var(--mj-text-secondary);\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.params-table-row {\n    display: grid;\n    grid-template-columns: 200px 1fr 60px;\n    gap: 12px;\n    padding: 12px 16px;\n    border-bottom: 1px solid var(--mj-border-default);\n    align-items: start;\n    background: var(--mj-bg-surface);\n}\n\n.param-source-icon-template {\n    color: var(--mj-status-success);\n    font-size: 0.75em;\n}\n\n.param-source-icon-custom {\n    color: var(--mj-status-warning);\n    font-size: 0.75em;\n}\n\n.param-required-marker {\n    color: var(--mj-status-error);\n    font-weight: bold;\n}\n\n.param-key-text {\n    font-family: 'Courier New', monospace;\n    font-size: 0.9em;\n    font-weight: 500;\n    color: var(--mj-text-primary);\n    padding: 4px 0;\n    word-break: break-word;\n}\n\n.param-description-text {\n    font-size: 0.75em;\n    color: var(--mj-text-muted);\n    margin-top: 2px;\n    font-style: italic;\n    word-break: break-word;\n}\n\n.param-type-text {\n    font-size: 0.7em;\n    color: var(--mj-brand-primary);\n    margin-top: 2px;\n}\n\n.param-actions {\n    display: flex;\n    align-items: start;\n    justify-content: center;\n    padding-top: 4px;\n}\n\n/* Add parameter row */\n.add-param-row {\n    padding: 12px 16px;\n    text-align: center;\n    background: var(--mj-bg-surface);\n    border-top: 1px solid var(--mj-border-default);\n}\n\n/* JSON preview */\n.json-preview-box {\n    background: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 4px;\n    padding: 12px;\n    font-family: 'Courier New', monospace;\n    font-size: 0.85em;\n    color: var(--mj-text-primary);\n    max-height: 200px;\n    overflow-y: auto;\n}\n\n.json-preview-box pre {\n    margin: 0;\n    white-space: pre-wrap;\n}\n\n/* Result status badges */\n.result-badge-success {\n    background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-success);\n    border: 1px solid color-mix(in srgb, var(--mj-status-success) 30%, transparent);\n    padding: 2px 6px;\n    border-radius: 10px;\n    font-size: 0.7em;\n    font-weight: 600;\n}\n\n.result-badge-error {\n    background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-error);\n    border: 1px solid color-mix(in srgb, var(--mj-status-error) 30%, transparent);\n    padding: 2px 6px;\n    border-radius: 10px;\n    font-size: 0.7em;\n    font-weight: 600;\n}\n\n/* Result stats box */\n.result-stats {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));\n    gap: 12px;\n    margin-bottom: 16px;\n    padding: 12px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n}\n\n.result-stats.success {\n    background: color-mix(in srgb, var(--mj-status-success) 10%, var(--mj-bg-surface));\n}\n\n.result-stats.error {\n    background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n}\n\n.result-stat {\n    text-align: center;\n}\n\n.result-stat-label {\n    font-size: 0.75em;\n    margin-bottom: 2px;\n    color: var(--mj-text-muted);\n}\n\n.result-stat-value {\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n\n/* Output section */\n.output-header {\n    margin: 0 0 8px 0;\n    color: var(--mj-text-primary);\n    display: flex;\n    align-items: center;\n    gap: 6px;\n}\n\n.output-header .success-icon {\n    color: var(--mj-status-success);\n}\n\n.output-header .error-icon {\n    color: var(--mj-status-error);\n}\n\n.output-box {\n    background: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 4px;\n    padding: 12px;\n    font-family: 'Courier New', monospace;\n    font-size: 0.9em;\n    white-space: pre-wrap;\n    overflow: auto;\n    height: 150px;\n    color: var(--mj-text-primary);\n}\n\n.error-output-box {\n    background: color-mix(in srgb, var(--mj-status-error) 8%, var(--mj-bg-surface));\n    border: 1px solid color-mix(in srgb, var(--mj-status-error) 20%, var(--mj-bg-surface));\n    border-radius: 4px;\n    padding: 12px;\n    color: var(--mj-status-error);\n    font-family: 'Courier New', monospace;\n    font-size: 0.9em;\n    white-space: pre-wrap;\n    overflow: auto;\n    height: 150px;\n}\n\n/* No results state \u2014 fills the results pane */\nmj-empty-state.no-results-state {\n    flex: 1;\n}\n"] }]
+        args: [{ standalone: false, selector: 'mj-template-param-dialog', template: "@if (_isVisible) {\n  <mj-dialog\n    [Visible]=\"true\"\n    [Width]=\"800\"\n    (Close)=\"close()\">\n    <mj-dialog-titlebar>Test Template: {{ template?.Name || 'Unknown' }}</mj-dialog-titlebar>\n    <div class=\"dialog-content\" style=\"display: flex; flex-direction: column; height: 100%; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\">\n      <!-- Header Section -->\n      <div class=\"dlg-header\">\n        <div class=\"dlg-header-row\">\n          <i class=\"fa-solid fa-sliders\"></i>\n          <h5>Template Testing</h5>\n        </div>\n        <p>\n          Configure parameter values for testing. Parameters with <span class=\"required-marker\">*</span> are required.\n        </p>\n      </div>\n      <!-- Loading State -->\n      @if (isLoading) {\n        <div class=\"dlg-loading\">\n          <i class=\"fa-solid fa-spinner fa-spin\"></i>\n          <span>Loading template parameters...</span>\n        </div>\n      } @else {\n        <!-- Template Parameters Section -->\n        <mj-accordion-panel\n          [(Expanded)]=\"parametersExpanded\"\n          style=\"margin-bottom: 16px; flex-shrink: 0;\">\n          <ng-template mjAccordionTitle>\n            <span class=\"dlg-panel-title\">\n              <i class=\"fa-solid fa-sliders\"></i>\n              Template Parameters\n              @if (parameters.length > 0) {\n                <span class=\"mj-accordion-badge mj-accordion-badge--right\">{{ parameters.length }}</span>\n              }\n            </span>\n          </ng-template>\n          <div style=\"padding: 12px 0;\">\n            <div class=\"dlg-info-text\">\n              <i class=\"fa-solid fa-info-circle\"></i>\n              Configure parameter values for template testing. Values can be JSON objects, strings, or numbers.\n            </div>\n            <!-- Parameters Table -->\n            @if (parameters.length > 0) {\n              <div class=\"params-table\">\n                <!-- Header -->\n                <div class=\"params-table-header\">\n                  <div>Parameter Name</div>\n                  <div>Value</div>\n                  <div>Actions</div>\n                </div>\n                <!-- Parameter Rows -->\n                @for (param of parameters; track $index; let i = $index) {\n                  <div class=\"params-table-row\">\n                    <!-- Parameter Name -->\n                    <div class=\"param-name\" style=\"display: flex; flex-direction: column;\">\n                      <div style=\"display: flex; align-items: center; gap: 4px; margin-bottom: 4px;\">\n                        @if (param.isFromTemplate) {\n                          <i class=\"fa-solid fa-database param-source-icon-template\" title=\"From template definition\"></i>\n                        } @else {\n                          <i class=\"fa-solid fa-edit param-source-icon-custom\" title=\"Custom parameter\"></i>\n                        }\n                        @if (param.isRequired) {\n                          <span class=\"param-required-marker\">*</span>\n                        }\n                      </div>\n                      @if (param.isFromTemplate) {\n                        <div class=\"param-key-text\">\n                          {{ param.key }}\n                        </div>\n                        @if (param.description) {\n                          <div class=\"param-description-text\">\n                            {{ param.description }}\n                          </div>\n                        }\n                        @if (param.type && param.type !== 'Scalar') {\n                          <div class=\"param-type-text\">\n                            Type: {{ param.type }}\n                          </div>\n                        }\n                      } @else {\n                        <input type=\"text\" class=\"mj-input\"\n                          [(ngModel)]=\"param.key\"\n                          (ngModelChange)=\"onParameterChange()\"\n                          placeholder=\"Parameter name...\"\n                          [disabled]=\"isRunning\"\n                          style=\"font-family: 'Courier New', monospace; width: 100%;\" />\n                      }\n                    </div>\n                    <!-- Parameter Value -->\n                    <div class=\"param-value\">\n                      <textarea class=\"mj-textarea\"\n                        [(ngModel)]=\"param.value\"\n                        (ngModelChange)=\"onParameterChange()\"\n                        [rows]=\"2\"\n                        placeholder=\"Enter value (JSON strings, numbers, objects)...\"\n                        [disabled]=\"isRunning\"\n                        style=\"font-family: 'Courier New', monospace; font-size: 0.9em; width: 100%;\"></textarea>\n                    </div>\n                    <!-- Actions -->\n                    <div class=\"param-actions\">\n                      @if (!param.isFromTemplate && parameters.length > 1) {\n                        <button mjButton variant=\"danger\" size=\"sm\"\n                          (click)=\"removeParameter(i)\"\n                          [disabled]=\"isRunning\"\n                          title=\"Remove parameter\">\n                          <i class=\"fa-solid fa-times\"></i>\n                        </button>\n                      }\n                    </div>\n                  </div>\n                }\n                <!-- Add Parameter Row -->\n                <div class=\"add-param-row\">\n                  <button mjButton variant=\"success\" size=\"sm\"\n                    (click)=\"addParameter()\"\n                    [disabled]=\"isRunning\">\n                    <i class=\"fa-solid fa-plus\"></i> Add Parameter\n                  </button>\n                </div>\n              </div>\n            } @else {\n              <mj-empty-state\n                Size=\"compact\"\n                Icon=\"fa-solid fa-circle-info\"\n                Title=\"No parameters defined yet\">\n                <button ngProjectAs=\"[actions]\" mjButton variant=\"primary\" size=\"sm\"\n                  (click)=\"addParameter()\"\n                  [disabled]=\"isRunning\">\n                  <i class=\"fa-solid fa-plus\"></i> Add First Parameter\n                </button>\n              </mj-empty-state>\n            }\n          </div>\n        </mj-accordion-panel>\n        <!-- JSON Preview Section -->\n        <mj-accordion-panel\n          [(Expanded)]=\"jsonPreviewExpanded\"\n          style=\"margin-bottom: 16px; flex-shrink: 0;\">\n          <ng-template mjAccordionTitle>\n            <span class=\"dlg-panel-title\">\n              <i class=\"fa-solid fa-code\"></i>\n              Context Data (JSON)\n            </span>\n          </ng-template>\n          <div style=\"padding: 12px 0;\">\n            <div class=\"json-preview-box\">\n              <pre>{{ parametersAsJson }}</pre>\n            </div>\n          </div>\n        </mj-accordion-panel>\n        <!-- Test Results Section -->\n        <mj-accordion-panel\n          [(Expanded)]=\"resultsExpanded\"\n          style=\"margin-bottom: 16px; flex: 1; display: flex; flex-direction: column;\">\n          <ng-template mjAccordionTitle>\n            <span class=\"dlg-panel-title\">\n              <i class=\"fa-solid fa-chart-line\"></i>\n              Test Results\n              @if (testResult) {\n                @if (testResult.Success) {\n                  <span class=\"result-badge success\"><i class=\"fa-solid fa-check\"></i> Success</span>\n                } @else {\n                  <span class=\"result-badge error\"><i class=\"fa-solid fa-times\"></i> Failed</span>\n                }\n              }\n            </span>\n          </ng-template>\n          <div style=\"padding: 12px 0; flex: 1; display: flex; flex-direction: column;\">\n            @if (isRunning) {\n              <div class=\"dlg-loading\" style=\"flex: 1;\">\n                <i class=\"fa-solid fa-spinner fa-spin\"></i>\n                <span>Running template...</span>\n              </div>\n            } @else if (testResult) {\n              <div style=\"flex: 1; display: flex; flex-direction: column;\">\n                <!-- Result Header with Stats -->\n                <div class=\"result-stats\" [class.success]=\"testResult.Success\" [class.error]=\"!testResult.Success\">\n                  <div class=\"result-stat\">\n                    <div class=\"result-stat-label\">STATUS</div>\n                    <div class=\"result-stat-value\">\n                      {{ testResult.Success ? 'Success' : 'Failed' }}\n                    </div>\n                  </div>\n                  @if (testResult.ExecutionTimeMs) {\n                    <div class=\"result-stat\">\n                      <div class=\"result-stat-label\">EXECUTION TIME</div>\n                      <div class=\"result-stat-value\">{{ testResult.ExecutionTimeMs }}ms</div>\n                    </div>\n                  }\n                  <div class=\"result-stat\">\n                    <div class=\"result-stat-label\">ACTIONS</div>\n                    <button mjButton variant=\"flat\" size=\"sm\"\n                      (click)=\"saveResults()\"\n                      title=\"Save results to file\">\n                      <i class=\"fa-solid fa-download\"></i>\n                    </button>\n                  </div>\n                </div>\n                <!-- Result Content -->\n                <div style=\"flex: 1; display: flex; flex-direction: column;\">\n                  @if (testResult.Success && testResult.Output) {\n                    <div style=\"margin-bottom: 12px; flex: 1; display: flex; flex-direction: column;\">\n                      <h6 class=\"output-header\">\n                        <i class=\"fa-solid fa-check-circle success-icon\"></i>\n                        Template Output\n                      </h6>\n                      <div class=\"output-box\">\n                        {{ testResult.Output }}\n                      </div>\n                    </div>\n                  } @else if (!testResult.Success && testResult.Error) {\n                    <div style=\"margin-bottom: 12px; flex: 1; display: flex; flex-direction: column;\">\n                      <h6 class=\"output-header\">\n                        <i class=\"fa-solid fa-exclamation-triangle error-icon\"></i>\n                        Error Details\n                      </h6>\n                      <div class=\"error-output-box\">{{ testResult.Error }}</div>\n                    </div>\n                  }\n                </div>\n              </div>\n            } @else {\n              <mj-empty-state class=\"no-results-state\"\n                Size=\"compact\"\n                Icon=\"fa-solid fa-circle-play\"\n                Title=\"No test results yet. Run the template to see results here.\" />\n            }\n          </div>\n        </mj-accordion-panel>\n      }\n    </div>\n    <!-- Dialog Actions -->\n    <mj-dialog-actions>\n      <div style=\"display: flex; justify-content: space-between; align-items: center; width: 100%;\">\n        <div>\n          @if (hasUnsavedParameters) {\n            <button mjButton variant=\"outline\"\n              (click)=\"updateTemplateParams()\"\n              [disabled]=\"isRunning\">\n              <i class=\"fa-solid fa-save\"></i> Update Template Params\n            </button>\n          }\n        </div>\n        <div style=\"display: flex; gap: 8px;\">\n          <button mjButton variant=\"outline\" (click)=\"close()\">\n            Close\n          </button>\n          @if (testResult) {\n            <button mjButton variant=\"outline\" (click)=\"saveResults()\">\n              <i class=\"fa-solid fa-download\"></i> Save Results\n            </button>\n          }\n          <button mjButton variant=\"primary\"\n            [disabled]=\"isRunning || isLoading\"\n            (click)=\"runTemplate()\">\n            @if (isRunning) {\n              <i class=\"fa-solid fa-spinner fa-spin\"></i> Running...\n            } @else {\n              <i class=\"fa-solid fa-play\"></i> Run Template\n            }\n          </button>\n        </div>\n      </div>\n    </mj-dialog-actions>\n  </mj-dialog>\n}\n", styles: [".dialog-content {\n    min-height: 500px;\n    max-height: 650px;\n}\n\n.parameter-row:hover {\n    background-color: var(--mj-bg-surface-card) !important;\n}\n\n.parameter-row:last-child {\n    border-bottom: none;\n}\n\n.param-name,\n.param-value {\n    min-width: 0;\n}\n\n.param-name .mj-input,\n.param-value .mj-textarea {\n    width: 100%;\n}\n\n.json-preview pre {\n    line-height: 1.3;\n}\n\n.test-results {\n    box-shadow: 0 2px 4px var(--mj-shadow-sm);\n}\n\n.result-content pre {\n    line-height: 1.4;\n}\n\n/* Scrollbar styling */\n.parameters-list::-webkit-scrollbar,\n.result-content::-webkit-scrollbar,\n.json-preview > div::-webkit-scrollbar {\n    width: 6px;\n}\n\n.parameters-list::-webkit-scrollbar-track,\n.result-content::-webkit-scrollbar-track,\n.json-preview > div::-webkit-scrollbar-track {\n    background: var(--mj-bg-surface-card);\n    border-radius: 3px;\n}\n\n.parameters-list::-webkit-scrollbar-thumb,\n.result-content::-webkit-scrollbar-thumb,\n.json-preview > div::-webkit-scrollbar-thumb {\n    background: var(--mj-border-strong);\n    border-radius: 3px;\n}\n\n.parameters-list::-webkit-scrollbar-thumb:hover,\n.result-content::-webkit-scrollbar-thumb:hover,\n.json-preview > div::-webkit-scrollbar-thumb:hover {\n    background: var(--mj-text-muted);\n}\n\n.parameter-row {\n    align-items: flex-start;\n}\n\n.parameters-section {\n    flex-shrink: 0;\n}\n\n.param-name > div {\n    word-wrap: break-word;\n    overflow-wrap: break-word;\n}\n\n.header-section > div:first-child:hover,\n.json-preview-header > div:first-child:hover,\n.result-header:hover {\n    background-color: var(--mj-bg-surface-card) !important;\n    transition: background-color 0.2s ease;\n}\n\n.fa-chevron-down,\n.fa-chevron-right {\n    transition: transform 0.2s ease;\n}\n\n.test-results .result-header [mjButton] {\n    opacity: 0.8;\n    transition: opacity 0.2s ease;\n}\n\n.test-results .result-header:hover [mjButton] {\n    opacity: 1;\n}\n\n/* Dialog header section */\n.dlg-header {\n    margin-bottom: 20px;\n    padding-bottom: 16px;\n    border-bottom: 2px solid var(--mj-border-default);\n}\n\n.dlg-header-row {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    margin-bottom: 8px;\n}\n\n.dlg-header-row i {\n    color: var(--mj-text-muted);\n    font-size: 1.2em;\n}\n\n.dlg-header-row h5 {\n    margin: 0;\n    color: var(--mj-text-primary);\n    font-weight: 600;\n}\n\n.dlg-header p {\n    margin: 0;\n    color: var(--mj-text-muted);\n    font-size: 0.9em;\n}\n\n.dlg-header .required-marker {\n    color: var(--mj-status-error);\n}\n\n/* Loading state */\n.dlg-loading {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 40px;\n}\n\n.dlg-loading i {\n    font-size: 24px;\n    color: var(--mj-text-muted);\n    margin-right: 12px;\n}\n\n.dlg-loading span {\n    color: var(--mj-text-muted);\n}\n\n/* Panel title */\n.dlg-panel-title {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-weight: 600;\n}\n\n.dlg-panel-title i {\n    color: var(--mj-text-muted);\n}\n\n\n/* Info text */\n.dlg-info-text {\n    margin-bottom: 12px;\n    color: var(--mj-text-muted);\n    font-size: 0.85em;\n}\n\n/* Parameters table */\n.params-table {\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    background: var(--mj-bg-surface-card);\n}\n\n.params-table-header {\n    display: grid;\n    grid-template-columns: 200px 1fr 60px;\n    gap: 12px;\n    padding: 12px 16px;\n    background: var(--mj-bg-surface-sunken);\n    font-weight: 600;\n    font-size: 0.85em;\n    color: var(--mj-text-secondary);\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.params-table-row {\n    display: grid;\n    grid-template-columns: 200px 1fr 60px;\n    gap: 12px;\n    padding: 12px 16px;\n    border-bottom: 1px solid var(--mj-border-default);\n    align-items: start;\n    background: var(--mj-bg-surface);\n}\n\n.param-source-icon-template {\n    color: var(--mj-status-success);\n    font-size: 0.75em;\n}\n\n.param-source-icon-custom {\n    color: var(--mj-status-warning);\n    font-size: 0.75em;\n}\n\n.param-required-marker {\n    color: var(--mj-status-error);\n    font-weight: bold;\n}\n\n.param-key-text {\n    font-family: 'Courier New', monospace;\n    font-size: 0.9em;\n    font-weight: 500;\n    color: var(--mj-text-primary);\n    padding: 4px 0;\n    word-break: break-word;\n}\n\n.param-description-text {\n    font-size: 0.75em;\n    color: var(--mj-text-muted);\n    margin-top: 2px;\n    font-style: italic;\n    word-break: break-word;\n}\n\n.param-type-text {\n    font-size: 0.7em;\n    color: var(--mj-brand-primary);\n    margin-top: 2px;\n}\n\n.param-actions {\n    display: flex;\n    align-items: start;\n    justify-content: center;\n    padding-top: 4px;\n}\n\n/* Add parameter row */\n.add-param-row {\n    padding: 12px 16px;\n    text-align: center;\n    background: var(--mj-bg-surface);\n    border-top: 1px solid var(--mj-border-default);\n}\n\n/* JSON preview */\n.json-preview-box {\n    background: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 4px;\n    padding: 12px;\n    font-family: 'Courier New', monospace;\n    font-size: 0.85em;\n    color: var(--mj-text-primary);\n    max-height: 200px;\n    overflow-y: auto;\n}\n\n.json-preview-box pre {\n    margin: 0;\n    white-space: pre-wrap;\n}\n\n/* Result status badges */\n.result-badge-success {\n    background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-success);\n    border: 1px solid color-mix(in srgb, var(--mj-status-success) 30%, transparent);\n    padding: 2px 6px;\n    border-radius: 10px;\n    font-size: 0.7em;\n    font-weight: 600;\n}\n\n.result-badge-error {\n    background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-error);\n    border: 1px solid color-mix(in srgb, var(--mj-status-error) 30%, transparent);\n    padding: 2px 6px;\n    border-radius: 10px;\n    font-size: 0.7em;\n    font-weight: 600;\n}\n\n/* Result stats box */\n.result-stats {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));\n    gap: 12px;\n    margin-bottom: 16px;\n    padding: 12px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n}\n\n.result-stats.success {\n    background: color-mix(in srgb, var(--mj-status-success) 10%, var(--mj-bg-surface));\n}\n\n.result-stats.error {\n    background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n}\n\n.result-stat {\n    text-align: center;\n}\n\n.result-stat-label {\n    font-size: 0.75em;\n    margin-bottom: 2px;\n    color: var(--mj-text-muted);\n}\n\n.result-stat-value {\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n\n/* Output section */\n.output-header {\n    margin: 0 0 8px 0;\n    color: var(--mj-text-primary);\n    display: flex;\n    align-items: center;\n    gap: 6px;\n}\n\n.output-header .success-icon {\n    color: var(--mj-status-success);\n}\n\n.output-header .error-icon {\n    color: var(--mj-status-error);\n}\n\n.output-box {\n    background: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 4px;\n    padding: 12px;\n    font-family: 'Courier New', monospace;\n    font-size: 0.9em;\n    white-space: pre-wrap;\n    overflow: auto;\n    height: 150px;\n    color: var(--mj-text-primary);\n}\n\n.error-output-box {\n    background: color-mix(in srgb, var(--mj-status-error) 8%, var(--mj-bg-surface));\n    border: 1px solid color-mix(in srgb, var(--mj-status-error) 20%, var(--mj-bg-surface));\n    border-radius: 4px;\n    padding: 12px;\n    color: var(--mj-status-error);\n    font-family: 'Courier New', monospace;\n    font-size: 0.9em;\n    white-space: pre-wrap;\n    overflow: auto;\n    height: 150px;\n}\n\n/* No results state \u2014 fills the results pane */\nmj-empty-state.no-results-state {\n    flex: 1;\n}\n\n/* Phone: the three-column table (a fixed 200px name column) cannot fit a 375px dialog, so each\n   parameter becomes a card: name with its remove action beside it, the value full width under it. */\n@media (max-width: 768px) {\n    .params-table-header {\n        display: none;\n    }\n\n    .params-table-row {\n        grid-template-columns: minmax(0, 1fr) auto;\n        grid-template-areas:\n            \"name actions\"\n            \"value value\";\n        gap: 8px;\n        padding: 12px;\n    }\n\n    .params-table-row > .param-name { grid-area: name; }\n    .params-table-row > .param-value { grid-area: value; }\n\n    .params-table-row > .param-actions {\n        grid-area: actions;\n        padding-top: 0;\n    }\n\n    .param-actions > button {\n        min-width: 44px;\n        min-height: 44px;\n    }\n}\n"] }]
     }], null, { Template: [{
             type: Input
         }], template: [{

package/dist/lib/custom/Templates/templates-form.component.d.ts

@@ -4,8 +4,17 @@ import { MJTemplateFormComponent } from '../../generated/Entities/MJTemplate/mjt
 import { LanguageDescription } from '@codemirror/language';
 import { CodeEditorComponent } from '@memberjunction/ng-code-editor';
 import { TemplateEditorComponent, TemplateEditorConfig } from '../../shared/components/template-editor.component';
+import { PhoneSectionsState } from '../../shared/phone-sections-state';
 import * as i0 from "@angular/core";
 export declare class MJTemplateFormComponentExtended extends MJTemplateFormComponent implements OnInit, OnDestroy, AfterViewInit {
+    /** Phone width shows the stacked accordions as sections behind one picker (design call 7A). */
+    Phone: PhoneSectionsState;
+    /** Phone hero (6A): whether the summary line is expanded to show the rest of the hero. */
+    HeroDetailsOpen: boolean;
+    /** Toggles the phone hero between its compact identity row and the full hero. */
+    ToggleHeroDetails(): void;
+    /** The phone hero's one-line summary of what the compact hero leaves out. */
+    get HeroSummary(): string;
     record: MJTemplateEntity;
     readonly ToolbarConfig: import("@memberjunction/ng-base-forms").FormToolbarConfig;
     /** @deprecated Use {@link ToolbarConfig}. */

package/dist/lib/custom/Templates/templates-form.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"templates-form.component.d.ts","sourceRoot":"","sources":["../../../../src/lib/custom/Templates/templates-form.component.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"templates-form.component.d.ts","sourceRoot":"","sources":["../../../../src/lib/custom/Templates/templates-form.component.ts"],"names":[],"mappings":"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"}