npm - @memberjunction/ng-core-entity-forms - Versions diffs - 5.0.0 → 5.1.0 - Mend

@memberjunction/ng-core-entity-forms 5.0.0 → 5.1.0

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

Files changed (2433) hide show

package/dist/lib/custom/AIPrompts/template-selector-dialog.component.js CHANGED Viewed

@@ -439,5 +439,5 @@ export class TemplateSelectorDialogComponent {
         type: Component,
         args: [{ selector: 'mj-template-selector-dialog', standalone: true, imports: [CommonModule, ReactiveFormsModule], template: "<!-- Template Selector Dialog -->\n<div class=\"template-selector-dialog\">\n  <!-- Header -->\n  <div class=\"dialog-header\">\n    <h3>{{ config.title }}</h3>\n    <div class=\"header-actions\">\n      <button\n        kendoButton\n        size=\"small\"\n        (click)=\"toggleViewMode()\"\n      >\n        <i [class]=\"viewMode === 'list' ? 'fa-solid fa-th' : 'fa-solid fa-list'\"></i>\n        {{ viewMode === 'list' ? 'Grid' : 'List' }}\n      </button>\n    </div>\n  </div>\n\n  <!-- Search and Filter Section -->\n  <div class=\"search-filter-section\">\n    <!-- Search Input -->\n    <div class=\"search-container\">\n      <input\n        class=\"k-input k-textbox\"\n        [formControl]=\"searchControl\"\n        placeholder=\"Search templates...\"\n      />\n      <i class=\"fa-solid fa-search search-icon\"></i>\n    </div>\n\n    <!-- Category Filter -->\n    <div class=\"category-filter\">\n      <select\n        class=\"k-input k-dropdown\"\n        [value]=\"selectedCategory || ''\"\n        (change)=\"onCategoryChange($any($event.target).value || null)\"\n      >\n        <option value=\"\">All Categories</option>\n        @for (category of categories$ | async; track category.ID) {\n          <option [value]=\"category.ID\">{{ category.Name }}</option>\n        }\n      </select>\n    </div>\n  </div>\n\n  <!-- Loading State -->\n  @if (isLoading$ | async) {\n    <div class=\"loading-container\">\n      <i class=\"fa-solid fa-spinner fa-spin\"></i>\n      <span>Loading templates...</span>\n    </div>\n  }\n\n  <!-- Template List/Grid -->\n  @if (!(isLoading$ | async)) {\n    <div class=\"templates-container\" [class.grid-mode]=\"viewMode === 'grid'\">\n      @for (template of filteredTemplates$ | async; track template.ID) {\n        <div \n          class=\"template-item\"\n          [class.selected]=\"isTemplateSelected(template)\"\n          (click)=\"toggleTemplateSelection(template)\"\n        >\n          <!-- Selection Checkbox -->\n          <div class=\"selection-indicator\">\n            @if (config.multiSelect) {\n              <input\n                type=\"checkbox\"\n                [checked]=\"isTemplateSelected(template)\"\n                (change)=\"toggleTemplateSelection(template)\"\n              />\n            } @else {\n              <input\n                type=\"radio\"\n                [checked]=\"isTemplateSelected(template)\"\n                (change)=\"toggleTemplateSelection(template)\"\n              />\n            }\n          </div>\n\n          <!-- Template Info -->\n          <div class=\"template-info\">\n            <div class=\"template-header\">\n              <h4 class=\"template-name\">{{ template.Name }}</h4>\n              <div class=\"template-status\">\n                <span \n                  class=\"status-badge\"\n                  [style.background-color]=\"getTemplateStatusColor(template)\"\n                >\n                  {{ getTemplateStatusText(template) }}\n                </span>\n              </div>\n            </div>\n\n            <!-- Template Description -->\n            @if (template.Description) {\n              <div class=\"template-description\">\n                {{ getTemplatePreview(template) }}\n              </div>\n            }\n\n            <!-- Template Metadata -->\n            <div class=\"template-metadata\">\n              <div class=\"metadata-item\">\n                <i class=\"fa-solid fa-user\"></i>\n                <span>{{ template.User || 'Unknown User' }}</span>\n              </div>\n              \n              @if (template.Category) {\n                <div class=\"metadata-item\">\n                  <i class=\"fa-solid fa-folder\"></i>\n                  <span>{{ template.Category }}</span>\n                </div>\n              }\n              \n              @if (template.__mj_CreatedAt) {\n                <div class=\"metadata-item\">\n                  <i class=\"fa-solid fa-calendar\"></i>\n                  <span>{{ formatDate(template.__mj_CreatedAt) }}</span>\n                </div>\n              }\n            </div>\n          </div>\n        </div>\n      } @empty {\n        <div class=\"no-templates\">\n          <i class=\"fa-solid fa-file-alt fa-3x\"></i>\n          <h4>No templates found</h4>\n          <p>No templates match your current search criteria.</p>\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Dialog Actions -->\n  <div class=\"dialog-actions\">\n    <div class=\"action-buttons\">\n      @if (config.showCreateNew) {\n        <button\n          kendoButton\n          themeColor=\"secondary\"\n          (click)=\"createNew()\"\n        >\n          <i class=\"fa-solid fa-plus\"></i>\n          Create New\n        </button>\n      }\n      \n      <button\n        kendoButton\n        (click)=\"cancel()\"\n      >\n        Cancel\n      </button>\n      \n      <button\n        kendoButton\n        themeColor=\"primary\"\n        (click)=\"selectTemplates()\"\n        [disabled]=\"selectedTemplates.size === 0\"\n      >\n        <i class=\"fa-solid fa-check\"></i>\n        Select {{ selectedTemplates.size > 0 ? '(' + selectedTemplates.size + ')' : '' }}\n      </button>\n    </div>\n  </div>\n</div>", styles: ["/* Template Selector Dialog Styles */\n.template-selector-dialog {\n  padding: 20px;\n  width: 100%;\n  max-width: 800px;\n  height: 600px;\n  display: flex;\n  flex-direction: column;\n}\n\n/* Header */\n.dialog-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 20px;\n  padding-bottom: 15px;\n  border-bottom: 1px solid #e0e0e0;\n}\n\n.dialog-header h3 {\n  margin: 0;\n  font-size: 1.5rem;\n  color: #333;\n}\n\n.header-actions {\n  display: flex;\n  gap: 10px;\n}\n\n/* Search and Filter Section */\n.search-filter-section {\n  display: flex;\n  gap: 15px;\n  margin-bottom: 20px;\n}\n\n.search-container {\n  flex: 1;\n  position: relative;\n}\n\n.search-icon {\n  position: absolute;\n  left: 10px;\n  top: 50%;\n  transform: translateY(-50%);\n  color: #999;\n  pointer-events: none;\n}\n\n.search-container input {\n  padding-left: 35px;\n  width: 100%;\n}\n\n.category-filter {\n  min-width: 200px;\n}\n\n.category-filter select {\n  width: 100%;\n}\n\n/* Loading State */\n.loading-container {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 10px;\n  padding: 60px;\n  font-size: 1.1rem;\n  color: #666;\n}\n\n.loading-container i {\n  font-size: 1.5rem;\n  color: #007bff;\n}\n\n/* Templates Container */\n.templates-container {\n  flex: 1;\n  overflow-y: auto;\n  border: 1px solid #e0e0e0;\n  border-radius: 4px;\n  background: white;\n  padding: 10px;\n}\n\n.templates-container.grid-mode {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n  gap: 15px;\n}\n\n/* Template Item */\n.template-item {\n  display: flex;\n  align-items: flex-start;\n  gap: 12px;\n  padding: 15px;\n  border: 2px solid transparent;\n  border-radius: 6px;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  background: #f8f9fa;\n  margin-bottom: 8px;\n}\n\n.template-item:hover {\n  border-color: #007bff;\n  background: #e3f2fd;\n}\n\n.template-item.selected {\n  border-color: #007bff;\n  background: #e3f2fd;\n}\n\n.grid-mode .template-item {\n  flex-direction: column;\n  margin-bottom: 0;\n}\n\n.grid-mode .template-item .selection-indicator {\n  align-self: flex-end;\n}\n\n/* Selection Indicator */\n.selection-indicator {\n  flex-shrink: 0;\n  margin-top: 2px;\n}\n\n.selection-indicator input[type=\"checkbox\"],\n.selection-indicator input[type=\"radio\"] {\n  width: 16px;\n  height: 16px;\n  cursor: pointer;\n}\n\n/* Template Info */\n.template-info {\n  flex: 1;\n  min-width: 0;\n}\n\n.template-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  margin-bottom: 8px;\n}\n\n.template-name {\n  margin: 0;\n  font-size: 1.1rem;\n  font-weight: 600;\n  color: #333;\n  word-break: break-word;\n}\n\n.template-status {\n  flex-shrink: 0;\n  margin-left: 10px;\n}\n\n.status-badge {\n  display: inline-block;\n  padding: 2px 8px;\n  border-radius: 12px;\n  font-size: 0.75rem;\n  font-weight: 500;\n  color: white;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n/* Template Description */\n.template-description {\n  margin-bottom: 12px;\n  color: #666;\n  font-size: 0.9rem;\n  line-height: 1.4;\n}\n\n/* Template Metadata */\n.template-metadata {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 15px;\n  font-size: 0.85rem;\n  color: #777;\n}\n\n.metadata-item {\n  display: flex;\n  align-items: center;\n  gap: 5px;\n}\n\n.metadata-item i {\n  font-size: 0.8rem;\n  color: #999;\n}\n\n/* No Templates State */\n.no-templates {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 60px 20px;\n  text-align: center;\n  color: #666;\n}\n\n.no-templates i {\n  margin-bottom: 20px;\n  color: #ccc;\n}\n\n.no-templates h4 {\n  margin: 0 0 10px 0;\n  font-size: 1.2rem;\n}\n\n.no-templates p {\n  margin: 0;\n  font-size: 0.9rem;\n  color: #999;\n}\n\n/* Dialog Actions */\n.dialog-actions {\n  margin-top: 20px;\n  padding-top: 20px;\n  border-top: 1px solid #e0e0e0;\n}\n\n.action-buttons {\n  display: flex;\n  justify-content: flex-end;\n  gap: 10px;\n}\n\n.action-buttons button {\n  min-width: 100px;\n}\n\n.action-buttons button i {\n  margin-right: 5px;\n}\n\n/* Responsive Design */\n@media (max-width: 768px) {\n  .template-selector-dialog {\n    padding: 15px;\n    height: 500px;\n  }\n  \n  .search-filter-section {\n    flex-direction: column;\n    gap: 10px;\n  }\n  \n  .category-filter {\n    min-width: auto;\n  }\n  \n  .templates-container.grid-mode {\n    grid-template-columns: 1fr;\n  }\n  \n  .template-header {\n    flex-direction: column;\n    align-items: flex-start;\n  }\n  \n  .template-status {\n    margin-left: 0;\n    margin-top: 5px;\n  }\n  \n  .template-metadata {\n    flex-direction: column;\n    gap: 8px;\n  }\n  \n  .action-buttons {\n    flex-direction: column;\n  }\n  \n  .action-buttons button {\n    min-width: auto;\n  }\n}\n\n/* Scrollbar Styling */\n.templates-container::-webkit-scrollbar {\n  width: 8px;\n}\n\n.templates-container::-webkit-scrollbar-track {\n  background: #f1f1f1;\n  border-radius: 4px;\n}\n\n.templates-container::-webkit-scrollbar-thumb {\n  background: #c1c1c1;\n  border-radius: 4px;\n}\n\n.templates-container::-webkit-scrollbar-thumb:hover {\n  background: #a8a8a8;\n}"] }]
     }], () => [{ type: i1.DialogRef }, { type: i0.ChangeDetectorRef }], null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TemplateSelectorDialogComponent, { className: "TemplateSelectorDialogComponent", filePath: "src/lib/custom/aiprompts/template-selector-dialog.component.ts", lineNumber: 43 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TemplateSelectorDialogComponent, { className: "TemplateSelectorDialogComponent", filePath: "src/lib/custom/AIPrompts/template-selector-dialog.component.ts", lineNumber: 43 }); })();
 //# sourceMappingURL=template-selector-dialog.component.js.map

package/dist/lib/custom/Actions/action-execution-log-form.component.js CHANGED Viewed

@@ -564,5 +564,5 @@ export { ActionExecutionLogFormComponentExtended };
         type: Component,
         args: [{ standalone: false, selector: 'mj-action-execution-log-form', template: "<div class=\"record-form-container action-execution-log-form\">\n    <div class=\"record-form\">\n        <!-- Header -->\n        <div class=\"header\">\n            <div class=\"header-content\">\n                <div class=\"header-left\">\n                    <div class=\"icon-wrapper\">\n                        <i class=\"fas fa-terminal\"></i>\n                    </div>\n                    <div class=\"header-info\">\n                        <h2>Action Execution Log</h2>\n                        <div class=\"meta-info\">\n                            @if (action) {\n                                <span class=\"action-name\">{{ action.Name }}</span>\n                            }\n                            <span class=\"log-id\">{{ record.ID }}</span>\n                        </div>\n                    </div>\n                </div>\n                <div class=\"header-right\">\n                    <div class=\"status-badge\" [attr.data-status]=\"record.ResultCode?.toLowerCase()\">\n                        <i class=\"fas\" [ngClass]=\"getResultCodeIcon()\"></i>\n                        {{ record.ResultCode || 'UNKNOWN' }}\n                    </div>\n                    <div class=\"execution-time\">\n                        <i class=\"fas fa-clock\"></i>\n                        {{ formatDuration(getExecutionDuration()) }}\n                    </div>\n                </div>\n            </div>\n            <div class=\"header-stats\">\n                <div class=\"stat\">\n                    <span class=\"label\">Started</span>\n                    <span class=\"value\">{{ record.StartedAt | date:'short' }}</span>\n                </div>\n                @if (record.EndedAt) {\n                    <div class=\"stat\">\n                        <span class=\"label\">Ended</span>\n                        <span class=\"value\">{{ record.EndedAt | date:'short' }}</span>\n                    </div>\n                }\n                @if (action) {\n                    <div class=\"stat\">\n                        <span class=\"label\">Action</span>\n                        <span class=\"value\">\n                            <button class=\"btn-link\" (click)=\"navigateToAction()\">\n                                {{ action.Name }}\n                                <i class=\"fas fa-external-link-alt\"></i>\n                            </button>\n                        </span>\n                    </div>\n                }\n                @if (user) {\n                    <div class=\"stat\">\n                        <span class=\"label\">User</span>\n                        <span class=\"value\">\n                            <button class=\"btn-link\" (click)=\"navigateToUser()\">\n                                {{ user.Name }}\n                                <i class=\"fas fa-external-link-alt\"></i>\n                            </button>\n                        </span>\n                    </div>\n                }\n            </div>\n        </div>\n\n        <!-- Content Area -->\n        <div class=\"content-area\">\n            <kendo-panelbar [keepItemContent]=\"true\">\n                <!-- Execution Details -->\n                <kendo-panelbar-item title=\"Execution Details\" [expanded]=\"true\">\n                    <ng-template kendoPanelBarContent>\n                        <div class=\"details-grid\">\n                            <div class=\"detail-item\">\n                                <label>Execution ID</label>\n                                <span class=\"monospace\">{{ record.ID }}</span>\n                            </div>\n                            <div class=\"detail-item\">\n                                <label>Action ID</label>\n                                <span class=\"monospace\">{{ record.ActionID }}</span>\n                            </div>\n                            <div class=\"detail-item\">\n                                <label>User ID</label>\n                                <span class=\"monospace\">{{ record.UserID }}</span>\n                            </div>\n                            <div class=\"detail-item\">\n                                <label>Result Code</label>\n                                <span class=\"detail-value\">\n                                    <i class=\"fas\" [ngClass]=\"getResultCodeIcon()\" [style.color]=\"getResultCodeColor()\"></i>\n                                    <span [style.color]=\"getResultCodeColor()\">{{ record.ResultCode || 'N/A' }}</span>\n                                </span>\n                            </div>\n                            <div class=\"detail-item\">\n                                <label>Duration</label>\n                                <span>{{ formatDuration(getExecutionDuration()) }}</span>\n                            </div>\n                            <div class=\"detail-item\">\n                                <label>Retention Period</label>\n                                <span>{{ record.RetentionPeriod ? record.RetentionPeriod + ' days' : 'Indefinite' }}</span>\n                            </div>\n                        </div>\n                    </ng-template>\n                </kendo-panelbar-item>\n\n                <!-- Input Parameters Only -->\n                @if (hasInputParams && formattedInputParams) {\n                    <kendo-panelbar-item title=\"Input Parameters\" [expanded]=\"expandedSections.inputParams\">\n                        <ng-template kendoPanelBarContent>\n                            <div class=\"json-viewer\">\n                                <div class=\"json-toolbar\">\n                                    <span class=\"json-label\">JSON (Input Parameters Only)</span>\n                                    <button class=\"btn-icon\" title=\"Copy JSON\" (click)=\"copyToClipboard(formattedInputParams)\">\n                                        <i class=\"fas fa-copy\"></i>\n                                    </button>\n                                </div>\n                                <mj-code-editor \n                                    [(ngModel)]=\"formattedInputParams\"\n                                    name=\"formattedInputParams\"\n                                    [readonly]=\"true\"\n                                    [language]=\"'json'\"\n                                    [lineWrapping]=\"true\"\n                                    style=\"height: 300px; width: 100%;\">\n                                </mj-code-editor>\n                            </div>\n                        </ng-template>\n                    </kendo-panelbar-item>\n                }\n\n                <!-- Output Parameters Only -->\n                @if (hasOutputParams && formattedOutputParams) {\n                    <kendo-panelbar-item title=\"Output Parameters\" [expanded]=\"expandedSections.outputParams\">\n                        <ng-template kendoPanelBarContent>\n                            <div class=\"json-viewer\">\n                                <div class=\"json-toolbar\">\n                                    <span class=\"json-label\">JSON (Output Parameters Only)</span>\n                                    <button class=\"btn-icon\" title=\"Copy JSON\" (click)=\"copyToClipboard(formattedOutputParams)\">\n                                        <i class=\"fas fa-copy\"></i>\n                                    </button>\n                                </div>\n                                <mj-code-editor \n                                    [(ngModel)]=\"formattedOutputParams\"\n                                    name=\"formattedOutputParams\"\n                                    [readonly]=\"true\"\n                                    [language]=\"'json'\"\n                                    [lineWrapping]=\"true\"\n                                    style=\"height: 300px; width: 100%;\">\n                                </mj-code-editor>\n                            </div>\n                        </ng-template>\n                    </kendo-panelbar-item>\n                }\n\n                <!-- Input+Output Parameters -->\n                @if (hasBothParams && formattedBothParams) {\n                    <kendo-panelbar-item title=\"Input+Output Parameters\" [expanded]=\"expandedSections.bothParams\">\n                        <ng-template kendoPanelBarContent>\n                            <div class=\"json-viewer\">\n                                <div class=\"json-toolbar\">\n                                    <span class=\"json-label\">JSON (Input+Output Parameters)</span>\n                                    <button class=\"btn-icon\" title=\"Copy JSON\" (click)=\"copyToClipboard(formattedBothParams)\">\n                                        <i class=\"fas fa-copy\"></i>\n                                    </button>\n                                </div>\n                                <mj-code-editor \n                                    [(ngModel)]=\"formattedBothParams\"\n                                    name=\"formattedBothParams\"\n                                    [readonly]=\"true\"\n                                    [language]=\"'json'\"\n                                    [lineWrapping]=\"true\"\n                                    style=\"height: 300px; width: 100%;\">\n                                </mj-code-editor>\n                            </div>\n                        </ng-template>\n                    </kendo-panelbar-item>\n                }\n\n                <!-- Output Message -->\n                @if (record.Message) {\n                    <kendo-panelbar-item title=\"Output Message\" [expanded]=\"expandedSections.output\">\n                        <ng-template kendoPanelBarContent>\n                            <div class=\"json-viewer\">\n                                <div class=\"json-toolbar\">\n                                    <span class=\"json-label\">JSON</span>\n                                    <button class=\"btn-icon\" title=\"Copy JSON\" (click)=\"copyToClipboard(formattedMessage)\">\n                                        <i class=\"fas fa-copy\"></i>\n                                    </button>\n                                </div>\n                                <mj-code-editor \n                                    [(ngModel)]=\"formattedMessage\"\n                                    name=\"formattedMessage\"\n                                    [readonly]=\"true\"\n                                    [language]=\"'json'\"\n                                    [lineWrapping]=\"true\"\n                                    style=\"height: 300px; width: 100%;\">\n                                </mj-code-editor>\n                            </div>\n                        </ng-template>\n                    </kendo-panelbar-item>\n                }\n\n                <!-- Empty States for missing data -->\n                @if (!record.Params && !record.Message && !hasInputParams && !hasOutputParams && !hasBothParams) {\n                    <kendo-panelbar-item title=\"Execution Data\" [expanded]=\"true\">\n                        <ng-template kendoPanelBarContent>\n                            <div class=\"empty-state\">\n                                <i class=\"fas fa-inbox\"></i>\n                                <p>No execution data recorded</p>\n                            </div>\n                        </ng-template>\n                    </kendo-panelbar-item>\n                }\n            </kendo-panelbar>\n        </div>\n    </div>\n</div>", styles: ["/* Action Execution Log Form Styles */\n.action-execution-log-form {\n  height: 100%;\n  overflow: hidden;\n  background: #f5f7fa;\n}\n\n/* Header Styles */\n.header {\n  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);\n  border-bottom: 1px solid #e0e6ed;\n  padding: 20px;\n  box-shadow: 0 2px 4px rgba(0,0,0,0.04);\n}\n\n.header-content {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  margin-bottom: 16px;\n}\n\n.header-left {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n}\n\n.icon-wrapper {\n  width: 48px;\n  height: 48px;\n  background: linear-gradient(135deg, #17a2b8, #138496);\n  border-radius: 12px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: white;\n  font-size: 20px;\n  box-shadow: 0 4px 12px rgba(23, 162, 184, 0.2);\n}\n\n.header-info h2 {\n  margin: 0;\n  font-size: 24px;\n  font-weight: 600;\n  color: #2c3e50;\n}\n\n.meta-info {\n  display: flex;\n  gap: 12px;\n  margin-top: 4px;\n  font-size: 14px;\n  color: #6c757d;\n}\n\n.action-name {\n  font-weight: 500;\n  color: #495057;\n}\n\n.log-id {\n  font-family: monospace;\n  font-size: 12px;\n  opacity: 0.7;\n}\n\n.header-right {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n}\n\n.status-badge {\n  padding: 6px 16px;\n  border-radius: 20px;\n  font-size: 13px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  color: white;\n}\n\n.execution-time {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 14px;\n  color: #6c757d;\n}\n\n.header-stats {\n  display: flex;\n  gap: 24px;\n  padding-top: 12px;\n  border-top: 1px solid #e9ecef;\n}\n\n.stat {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.stat .label {\n  font-size: 12px;\n  color: #6c757d;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.stat .value {\n  font-size: 14px;\n  font-weight: 500;\n  color: #495057;\n}\n\n/* Content Area */\n.content-area {\n  height: calc(100% - 180px);\n  overflow-y: auto;\n  padding: 20px;\n}\n\n/* Details Grid */\n.details-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n  gap: 20px;\n  padding: 20px;\n}\n\n.detail-item {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.detail-item label {\n  font-size: 12px;\n  color: #6c757d;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  font-weight: 600;\n}\n\n.detail-value {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.btn-link {\n  background: none;\n  border: none;\n  color: #2196f3;\n  cursor: pointer;\n  font-size: 14px;\n  padding: 4px;\n}\n\n.btn-link:hover {\n  color: #1976d2;\n}\n\n.loading {\n  color: #6c757d;\n  font-size: 13px;\n}\n\n/* JSON Viewer */\n.json-viewer {\n  padding: 20px;\n  background: #f8f9fa;\n  border-radius: 8px;\n  margin-bottom: 20px;\n}\n\n.json-toolbar {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 12px;\n}\n\n.json-label {\n  background: #17a2b8;\n  color: white;\n  padding: 4px 12px;\n  border-radius: 12px;\n  font-size: 11px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.btn-icon {\n  width: 32px;\n  height: 32px;\n  border: 1px solid #dee2e6;\n  background: white;\n  border-radius: 6px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  color: #6c757d;\n}\n\n.btn-icon:hover {\n  background: #f8f9fa;\n  border-color: #adb5bd;\n  color: #495057;\n}\n\n/* Status badge colors based on data-status attribute */\n.status-badge[data-status=\"success\"],\n.status-badge[data-status=\"ok\"],\n.status-badge[data-status=\"completed\"],\n.status-badge[data-status=\"200\"] {\n  background-color: #28a745;\n  color: white;\n}\n\n.status-badge[data-status=\"error\"],\n.status-badge[data-status=\"failed\"],\n.status-badge[data-status=\"failure\"] {\n  background-color: #dc3545;\n  color: white;\n}\n\n.status-badge[data-status=\"warning\"],\n.status-badge[data-status=\"pending\"] {\n  background-color: #ffc107;\n  color: #212529;\n}\n\n.status-badge[data-status=\"info\"],\n.status-badge[data-status=\"running\"] {\n  background-color: #17a2b8;\n  color: white;\n}\n\n.status-badge {\n  background-color: #6c757d;\n  color: white;\n}\n\n/* Panel Bar overrides */\n.k-panelbar-item-content {\n  padding: 0;\n}\n\n.k-panelbar > .k-item > .k-link {\n  padding: 12px 16px;\n  font-weight: 600;\n  color: #495057;\n}\n\n.k-panelbar > .k-item > .k-link i {\n  margin-right: 8px;\n  color: #6c757d;\n}\n\n/* Empty state */\n.empty-state {\n  text-align: center;\n  padding: 40px;\n  color: #6c757d;\n}\n\n.empty-state i {\n  font-size: 48px;\n  opacity: 0.3;\n  margin-bottom: 16px;\n}\n\n.monospace {\n  font-family: 'Courier New', Courier, monospace;\n  font-size: 13px;\n}\n\n/* Responsive adjustments */\n@media (max-width: 768px) {\n  .header-content {\n    flex-direction: column;\n    gap: 16px;\n  }\n  \n  .header-stats {\n    flex-wrap: wrap;\n  }\n  \n  .details-grid {\n    grid-template-columns: 1fr;\n  }\n}"] }]
     }], null, null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ActionExecutionLogFormComponentExtended, { className: "ActionExecutionLogFormComponentExtended", filePath: "src/lib/custom/actions/action-execution-log-form.component.ts", lineNumber: 22 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ActionExecutionLogFormComponentExtended, { className: "ActionExecutionLogFormComponentExtended", filePath: "src/lib/custom/Actions/action-execution-log-form.component.ts", lineNumber: 22 }); })();
 //# sourceMappingURL=action-execution-log-form.component.js.map

package/dist/lib/custom/Actions/action-form.component.js CHANGED Viewed

@@ -1871,5 +1871,5 @@ export { ActionFormComponentExtended };
         type: Component,
         args: [{ standalone: false, selector: 'mj-action-form', template: "<div class=\"record-form-container\">\n    @if (record) {\n        <form class=\"record-form\" #form=\"ngForm\">\n            <mj-form-toolbar [Form]=\"this\"></mj-form-toolbar>\n\n            <!-- Main Content Area -->\n            <div class=\"action-main-area\" style=\"display: flex; flex-direction: column; height: 100%; overflow-y: auto;\">\n                \n                <!-- Header Section -->\n                <div class=\"action-header\" style=\"flex-shrink: 0; padding: 20px; background: #f8f9fa; border-bottom: 2px solid #e9ecef;\">\n                    <div style=\"display: flex; justify-content: space-between; align-items: flex-start; gap: 20px;\">\n                        \n                        <!-- Left: Action Info -->\n                        <div style=\"flex: 1; min-width: 0;\">\n                            <div style=\"display: flex; align-items: center; gap: 12px; margin-bottom: 8px;\">\n                                <i [class]=\"getActionIcon()\" [style.color]=\"getTypeColor()\" style=\"font-size: 1.4em;\"></i>\n                                @if (EditMode) {\n                                    <kendo-textbox [(ngModel)]=\"record.Name\" \n                                                  name=\"actionName\"\n                                                  placeholder=\"Enter action name...\"\n                                                  style=\"font-size: 1.2em; font-weight: 600; min-width: 300px; flex: 1;\">\n                                    </kendo-textbox>\n                                } @else {\n                                    <h4 style=\"margin: 0; color: #495057; font-weight: 600; flex: 1;\">{{ record.Name || 'Untitled Action' }}</h4>\n                                    <span class=\"status-badge\" [style.background-color]=\"getStatusColor()\" \n                                          style=\"color: white; padding: 4px 10px; border-radius: 12px; font-size: 0.75em; font-weight: 500;\">\n                                        {{ record.Status }}\n                                    </span>\n                                }\n                            </div>\n                            \n                            <!-- Status and Type Editors when in edit mode -->\n                            @if (EditMode) {\n                                <div style=\"display: flex; gap: 16px; margin-bottom: 12px; flex-wrap: wrap;\">\n                                    <div>\n                                        <label style=\"display: block; margin-bottom: 4px; font-weight: 600; color: #495057; font-size: 0.9em;\">Status</label>\n                                        <kendo-dropdownlist [(ngModel)]=\"record.Status\"\n                                                           name=\"actionStatus\"\n                                                           [data]=\"[{text: 'Active', value: 'Active'}, {text: 'Pending', value: 'Pending'}, {text: 'Disabled', value: 'Disabled'}]\"\n                                                           textField=\"text\"\n                                                           valueField=\"value\"\n                                                           [valuePrimitive]=\"true\"\n                                                           style=\"width: 150px;\">\n                                        </kendo-dropdownlist>\n                                    </div>\n                                    <div>\n                                        <label style=\"display: block; margin-bottom: 4px; font-weight: 600; color: #495057; font-size: 0.9em;\">\n                                            Type <span style=\"color: #dc3545;\">*</span>\n                                        </label>\n                                        <kendo-dropdownlist [(ngModel)]=\"record.Type\"\n                                                           name=\"actionType\"\n                                                           [data]=\"[{text: 'Generated', value: 'Generated'}, {text: 'Custom', value: 'Custom'}]\"\n                                                           textField=\"text\"\n                                                           valueField=\"value\"\n                                                           [valuePrimitive]=\"true\"\n                                                           style=\"width: 150px;\">\n                                        </kendo-dropdownlist>\n                                    </div>\n                                    <div>\n                                        <label style=\"display: block; margin-bottom: 4px; font-weight: 600; color: #495057; font-size: 0.9em;\">\n                                            Category <span style=\"color: #dc3545;\">*</span>\n                                        </label>\n                                        <kendo-dropdownlist [(ngModel)]=\"record.CategoryID\"\n                                                           name=\"categoryID\"\n                                                           [data]=\"[]\"\n                                                           placeholder=\"Select category...\"\n                                                           style=\"width: 200px;\">\n                                        </kendo-dropdownlist>\n                                    </div>\n                                </div>\n                            }\n                            \n                            @if (EditMode) {\n                                <kendo-textarea [(ngModel)]=\"record.Description\" \n                                               name=\"actionDescription\"\n                                               [rows]=\"2\"\n                                               placeholder=\"Enter action description...\"\n                                               style=\"width: 100%; max-width: 600px; margin-bottom: 12px;\">\n                                </kendo-textarea>\n                            } @else if (record.Description) {\n                                <p style=\"margin: 0 0 12px 0; color: #6c757d; font-size: 0.9em; line-height: 1.4;\">{{ record.Description }}</p>\n                            }\n                            \n                            <!-- Quick Config Row -->\n                            <div class=\"quick-config\" style=\"display: flex; align-items: center; gap: 16px; flex-wrap: wrap;\">\n                                @if (category) {\n                                    <div class=\"config-item\" style=\"display: flex; align-items: center; gap: 6px; font-size: 0.85em;\">\n                                        <i class=\"fa-solid fa-folder\" style=\"color: #6c757d;\"></i>\n                                        <span style=\"color: #6c757d;\">Category:</span>\n                                        <span style=\"color: #495057; font-weight: 500; cursor: pointer;\" (click)=\"navigateToCategory()\">\n                                            {{ category.Name }}\n                                            <i class=\"fa-solid fa-external-link\" style=\"font-size: 0.75em; margin-left: 4px;\"></i>\n                                        </span>\n                                    </div>\n                                }\n                                \n                                <div class=\"config-item\" style=\"display: flex; align-items: center; gap: 6px; font-size: 0.85em;\">\n                                    <i class=\"fa-solid fa-cube\" style=\"color: #6c757d;\"></i>\n                                    <span style=\"color: #6c757d;\">Type:</span>\n                                    <span style=\"color: #495057; font-weight: 500;\">{{ record.Type }}</span>\n                                </div>\n                                \n                                @if (record.Type === 'Generated' && record.CodeApprovalStatus) {\n                                    <div class=\"config-item\" style=\"display: flex; align-items: center; gap: 6px; font-size: 0.85em;\">\n                                        <i [class]=\"'fa-solid ' + getApprovalStatusIcon()\" [style.color]=\"getApprovalStatusColor()\"></i>\n                                        <span style=\"color: #6c757d;\">Code:</span>\n                                        <span [style.color]=\"getApprovalStatusColor()\" style=\"font-weight: 500;\">{{ record.CodeApprovalStatus }}</span>\n                                    </div>\n                                }\n                                \n                                @if (actionParams.length > 0) {\n                                    <div class=\"config-item\" style=\"display: flex; align-items: center; gap: 6px; font-size: 0.85em;\">\n                                        <i class=\"fa-solid fa-sliders\" style=\"color: #6c757d;\"></i>\n                                        <span style=\"color: #495057; font-weight: 500;\">{{ actionParams.length }} Parameters</span>\n                                    </div>\n                                }\n                            </div>\n                        </div>\n                        \n                        <!-- Right: Action Buttons -->\n                        <div class=\"action-buttons\" style=\"display: flex; flex-direction: column; gap: 8px; align-items: flex-end;\">\n                            <div style=\"display: flex; gap: 8px;\">\n                                @if (record.ID) {\n                                    <button kendoButton themeColor=\"primary\" size=\"large\"\n                                                (click)=\"openTestHarness()\"\n                                                title=\"Open Run Harness\"\n                                                [disabled]=\"record.Status !== 'Active'\">\n                                        <i class=\"fa-solid fa-play\"></i> Run\n                                    </button>\n                                }\n                                @if (EditMode && record.Type === 'Generated') {\n                                    <button kendoButton themeColor=\"info\" size=\"medium\"\n                                                (click)=\"regenerateCode()\"\n                                                title=\"Regenerate Code\">\n                                        <i class=\"fa-solid fa-robot\"></i> Regenerate\n                                    </button>\n                                }\n                            </div>\n                            \n                            @if (EditMode && record.CodeApprovalStatus === 'Pending' && record.Type === 'Generated') {\n                                <div style=\"display: flex; gap: 8px;\">\n                                    <button kendoButton themeColor=\"success\" size=\"small\"\n                                                (click)=\"approveCode()\">\n                                        <i class=\"fa-solid fa-check\"></i> Approve\n                                    </button>\n                                    <button kendoButton themeColor=\"error\" size=\"small\"\n                                                (click)=\"rejectCode()\">\n                                        <i class=\"fa-solid fa-times\"></i> Reject\n                                    </button>\n                                </div>\n                            }\n                            \n                            @if (!EditMode && record.Status !== 'Active' && record.ID) {\n                                <div style=\"font-size: 0.75em; color: #dc3545; text-align: right;\">\n                                    Action must be Active to execute\n                                </div>\n                            }\n                        </div>\n                    </div>\n                </div>\n\n                <!-- Configuration Sections with Expansion Panels -->\n                <div class=\"configuration-sections\" style=\"flex: 1; background: white; border-top: 2px solid #e9ecef; padding: 16px; min-height: 0;\">\n                    \n                    <!-- Parameters Section (FIRST) -->\n                    <kendo-expansionpanel \n                        [expanded]=\"true\"\n                        style=\"margin-bottom: 12px;\">\n                        <ng-template kendoExpansionPanelTitleDirective>\n                            <span style=\"display: flex; align-items: center; gap: 8px; font-weight: 600;\">\n                                <i class=\"fa-solid fa-sliders\" style=\"color: #6c757d;\"></i>\n                                Parameters\n                                @if (actionParams.length > 0) {\n                                    <span style=\"background: #17a2b8; color: white; padding: 2px 6px; border-radius: 10px; font-size: 0.7em;\">\n                                        {{ actionParams.length }}\n                                    </span>\n                                }\n                            </span>\n                        </ng-template>\n                        \n                        <div style=\"padding: 16px;\">\n                            @if (isLoadingParams) {\n                                <div class=\"loading-state\">\n                                    <i class=\"fa-solid fa-spinner fa-spin\"></i>\n                                    Loading parameters...\n                                </div>\n                            } @else if (actionParams.length === 0) {\n                                <div class=\"empty-state\" style=\"padding: 30px; text-align: center;\">\n                                    <i class=\"fa-solid fa-sliders\" style=\"font-size: 2em; color: #6c757d; opacity: 0.3;\"></i>\n                                    <p style=\"margin: 12px 0 0 0; color: #6c757d;\">No parameters defined</p>\n                                    @if (EditMode && record.IsSaved) {\n                                        <p style=\"margin: 8px 0 0 0; font-size: 0.85em; color: #6c757d;\">Add parameters to define inputs and outputs for this action</p>\n                                    }\n                                </div>\n                            } @else {\n                                <!-- Input Parameters Grid -->\n                                <div class=\"params-section\">\n                                    <div class=\"params-header\">\n                                        <h3><i class=\"fa-solid fa-sign-in-alt\"></i> Input Parameters</h3>\n                                        @if (EditMode && record.IsSaved) {\n                                            <button kendoButton fillMode=\"flat\" size=\"small\" (click)=\"addParameter('Input')\">\n                                                <i class=\"fa-solid fa-plus\"></i> Add Input\n                                            </button>\n                                        }\n                                    </div>\n                                    \n                                    @if (getInputParams().length === 0) {\n                                        <div class=\"empty-state\" style=\"padding: 30px; text-align: center;\">\n                                            <i class=\"fa-solid fa-inbox\" style=\"font-size: 2em; color: #6c757d; opacity: 0.3;\"></i>\n                                            <p style=\"margin: 12px 0 0 0; color: #6c757d;\">No input parameters defined</p>\n                                        </div>\n                                    } @else {\n                                        <div class=\"params-grid\">\n                                            @for (param of getInputParams(); track param.ID) {\n                                                <div class=\"param-card\" [class.required]=\"param.IsRequired\" \n                                                     [class.clickable]=\"true\"\n                                                     (click)=\"onParamClick(param, $event)\">\n                                                    <div class=\"param-header\">\n                                                        <span class=\"param-name\">{{ param.Name }}</span>\n                                                        <div class=\"param-badges\">\n                                                            @if (param.IsRequired) {\n                                                                <span class=\"required-badge\">Required</span>\n                                                            }\n                                                            @if (param.IsArray) {\n                                                                <span class=\"array-badge\">Array</span>\n                                                            }\n                                                            @if (EditMode) {\n                                                                <button class=\"param-edit-btn\" (click)=\"editParameter(param)\" title=\"Edit parameter\">\n                                                                    <i class=\"fa-solid fa-edit\"></i>\n                                                                </button>\n                                                                <button class=\"param-delete-btn\" (click)=\"deleteParameter(param)\" title=\"Delete parameter\">\n                                                                    <i class=\"fa-solid fa-trash\"></i>\n                                                                </button>\n                                                            }\n                                                        </div>\n                                                    </div>\n                                                    <div class=\"param-details\">\n                                                        <div class=\"param-type\">{{ param.ValueType }}</div>\n                                                        @if (param.Description) {\n                                                            <div class=\"param-description\">{{ param.Description }}</div>\n                                                        }\n                                                        @if (param.DefaultValue) {\n                                                            <div class=\"param-default\">\n                                                                <span class=\"default-label\">Default:</span>\n                                                                <code>{{ param.DefaultValue }}</code>\n                                                            </div>\n                                                        }\n                                                    </div>\n                                                </div>\n                                            }\n                                        </div>\n                                    }\n                                </div>\n\n                                <!-- Output Parameters Grid -->\n                                <div class=\"params-section\" style=\"margin-top: 24px;\" \n                                     [class.params-section-compact]=\"getOutputParams().length === 0\">\n                                    <div class=\"params-header\">\n                                        <h3><i class=\"fa-solid fa-sign-out-alt\"></i> Output Parameters</h3>\n                                        @if (EditMode && record.IsSaved) {\n                                            <button kendoButton fillMode=\"flat\" size=\"small\" (click)=\"addParameter('Output')\">\n                                                <i class=\"fa-solid fa-plus\"></i> Add Output\n                                            </button>\n                                        }\n                                    </div>\n                                    \n                                    @if (getOutputParams().length === 0) {\n                                        <div class=\"empty-state\" style=\"padding: 20px; text-align: center;\">\n                                            <i class=\"fa-solid fa-inbox\" style=\"font-size: 2em; color: #6c757d; opacity: 0.3;\"></i>\n                                            <p style=\"margin: 12px 0 0 0; color: #6c757d;\">No output parameters defined</p>\n                                        </div>\n                                    } @else {\n                                        <div class=\"params-grid\">\n                                            @for (param of getOutputParams(); track param.ID) {\n                                                <div class=\"param-card\"\n                                                     [class.clickable]=\"true\"\n                                                     (click)=\"onParamClick(param, $event)\">\n                                                    <div class=\"param-header\">\n                                                        <span class=\"param-name\">{{ param.Name }}</span>\n                                                        <div class=\"param-badges\">\n                                                            @if (param.IsArray) {\n                                                                <span class=\"array-badge\">Array</span>\n                                                            }\n                                                            @if (EditMode) {\n                                                                <button class=\"param-edit-btn\" (click)=\"editParameter(param)\" title=\"Edit parameter\">\n                                                                    <i class=\"fa-solid fa-edit\"></i>\n                                                                </button>\n                                                                <button class=\"param-delete-btn\" (click)=\"deleteParameter(param)\" title=\"Delete parameter\">\n                                                                    <i class=\"fa-solid fa-trash\"></i>\n                                                                </button>\n                                                            }\n                                                        </div>\n                                                    </div>\n                                                    <div class=\"param-details\">\n                                                        <div class=\"param-type\">{{ param.ValueType }}</div>\n                                                        @if (param.Description) {\n                                                            <div class=\"param-description\">{{ param.Description }}</div>\n                                                        }\n                                                        @if (param.DefaultValue) {\n                                                            <div class=\"param-default\">\n                                                                <span class=\"default-label\">Default:</span>\n                                                                <code>{{ param.DefaultValue }}</code>\n                                                            </div>\n                                                        }\n                                                    </div>\n                                                </div>\n                                            }\n                                        </div>\n                                    }\n                                </div>\n                            }\n                        </div>\n                    </kendo-expansionpanel>\n\n                    <!-- Code & Generation Section (Only for Generated type) -->\n                    @if (record.Type === 'Generated') {\n                        <kendo-expansionpanel \n                            [expanded]=\"expandedSections.code\"\n                            style=\"margin-bottom: 12px;\">\n                            <ng-template kendoExpansionPanelTitleDirective>\n                                <span style=\"display: flex; align-items: center; gap: 8px; font-weight: 600;\">\n                                    <i class=\"fa-solid fa-code\" style=\"color: #6c757d;\"></i>\n                                    Code & Generation\n                                    @if (record.CodeLocked) {\n                                        <span style=\"background: #ffc107; color: #856404; padding: 2px 6px; border-radius: 10px; font-size: 0.7em;\">\n                                            <i class=\"fa-solid fa-lock\"></i> Locked\n                                        </span>\n                                    }\n                                </span>\n                            </ng-template>\n                            \n                            <div style=\"padding: 16px;\">\n                                @if (EditMode) {\n                                    <div class=\"generation-panel\">\n                                        <h3><i class=\"fa-solid fa-robot\"></i> AI Generation</h3>\n                                        <div class=\"prompt-section\">\n                                            <label>User Prompt</label>\n                                            <kendo-textarea [(ngModel)]=\"record.UserPrompt\"\n                                                           name=\"userPrompt\"\n                                                           [rows]=\"8\"\n                                                           placeholder=\"Describe what this action should do...\"\n                                                           style=\"width: 100%; min-height: 120px;\">\n                                            </kendo-textarea>\n                                        </div>\n                                        <div class=\"comments-section\">\n                                            <label>Internal Comments (not sent to AI)</label>\n                                            <kendo-textarea [(ngModel)]=\"record.UserComments\"\n                                                           name=\"userComments\"\n                                                           [rows]=\"2\"\n                                                           placeholder=\"Internal notes...\"\n                                                           style=\"width: 100%;\">\n                                            </kendo-textarea>\n                                        </div>\n                                        <div class=\"generation-controls\">\n                                            <kendo-switch [(ngModel)]=\"record.CodeLocked\"\n                                                         name=\"codeLocked\">\n                                            </kendo-switch>\n                                            <label style=\"margin-left: 8px;\">Lock Code (prevent regeneration)</label>\n                                        </div>\n                                    </div>\n                                }\n                                \n                                <div class=\"code-editor-section\">\n                                    <div class=\"code-toolbar\">\n                                        <h3><i class=\"fa-solid fa-file-code\"></i> Action Code</h3>\n                                        <div class=\"code-actions\">\n                                            @if (record.CodeComments) {\n                                                <button kendoButton fillMode=\"flat\" size=\"small\" (click)=\"toggleCodeComments()\">\n                                                    <i class=\"fa-solid fa-comment\"></i> \n                                                    {{ showCodeComments ? 'Hide' : 'Show' }} AI Comments\n                                                </button>\n                                            }\n                                            <button kendoButton fillMode=\"flat\" size=\"small\" (click)=\"copyToClipboard(record.Code || '')\">\n                                                <i class=\"fa-solid fa-copy\"></i> Copy\n                                            </button>\n                                        </div>\n                                    </div>\n                                    <mj-code-editor \n                                        [(ngModel)]=\"record.Code\"\n                                        name=\"actionCode\"\n                                        [readonly]=\"!EditMode || record.CodeLocked\"\n                                        [language]=\"codeLanguage\"\n                                        [lineWrapping]=\"true\"\n                                        style=\"height: 400px; width: 100%;\">\n                                    </mj-code-editor>\n                                    \n                                    @if (showCodeComments && record.CodeComments) {\n                                        <div class=\"code-comments\">\n                                            <h4><i class=\"fa-solid fa-robot\"></i> AI Explanation</h4>\n                                            <p>{{ record.CodeComments }}</p>\n                                        </div>\n                                    }\n                                    \n                                    @if (EditMode && record.CodeApprovalStatus === 'Rejected') {\n                                        <div class=\"approval-comments\">\n                                            <label>Rejection Comments</label>\n                                            <kendo-textarea [(ngModel)]=\"record.CodeApprovalComments\"\n                                                           name=\"codeApprovalComments\"\n                                                           [rows]=\"2\"\n                                                           placeholder=\"Explain why the code was rejected...\"\n                                                           style=\"width: 100%;\">\n                                            </kendo-textarea>\n                                        </div>\n                                    }\n                                </div>\n                            </div>\n                        </kendo-expansionpanel>\n                    }\n\n                    <!-- Result Codes Section -->\n                    <kendo-expansionpanel \n                        [expanded]=\"expandedSections.resultCodes\"\n                        style=\"margin-bottom: 12px;\">\n                        <ng-template kendoExpansionPanelTitleDirective>\n                            <span style=\"display: flex; align-items: center; gap: 8px; font-weight: 600;\">\n                                <i class=\"fa-solid fa-flag-checkered\" style=\"color: #6c757d;\"></i>\n                                Result Codes\n                                @if (resultCodes.length > 0) {\n                                    <span style=\"background: #28a745; color: white; padding: 2px 6px; border-radius: 10px; font-size: 0.7em;\">\n                                        {{ resultCodes.length }}\n                                    </span>\n                                }\n                            </span>\n                        </ng-template>\n                        \n                        <div style=\"padding: 16px;\">\n                            <!-- Add Result Code Button -->\n                            @if (EditMode && record.IsSaved) {\n                                <div style=\"display: flex; justify-content: flex-end; margin-bottom: 12px;\">\n                                    <button kendoButton [primary]=\"true\" size=\"small\" (click)=\"addResultCode()\">\n                                        <i class=\"fa-solid fa-plus\"></i> Add Result Code\n                                    </button>\n                                </div>\n                            }\n                            \n                            @if (isLoadingResultCodes) {\n                                <div class=\"loading-state\">\n                                    <i class=\"fa-solid fa-spinner fa-spin\"></i>\n                                    Loading result codes...\n                                </div>\n                            } @else if (resultCodes.length === 0) {\n                                <div class=\"empty-state\" style=\"padding: 30px; text-align: center;\">\n                                    <i class=\"fa-solid fa-flag-checkered\" style=\"font-size: 2em; color: #6c757d; opacity: 0.3;\"></i>\n                                    <p style=\"margin: 12px 0 0 0; color: #6c757d;\">No result codes defined</p>\n                                    @if (EditMode && record.IsSaved) {\n                                        <p style=\"margin: 8px 0 0 0; font-size: 0.85em; color: #6c757d;\">Add result codes to define possible outcomes</p>\n                                    }\n                                </div>\n                            } @else {\n                                <div class=\"result-codes-grid\">\n                                    @for (code of resultCodes; track code.ID) {\n                                        <div class=\"result-code-card\" \n                                             [class.success]=\"code.IsSuccess\" \n                                             [class.failure]=\"!code.IsSuccess\"\n                                             [class.clickable]=\"true\"\n                                             (click)=\"onResultCodeClick(code, $event)\">\n                                            <div class=\"result-icon\">\n                                                <i [class]=\"code.IsSuccess ? 'fa-solid fa-check-circle' : 'fa-solid fa-times-circle'\"></i>\n                                            </div>\n                                            <div class=\"result-content\">\n                                                <div class=\"result-code\">{{ code.ResultCode }}</div>\n                                                @if (code.Description) {\n                                                    <div class=\"result-description\">{{ code.Description }}</div>\n                                                }\n                                            </div>\n                                            @if (EditMode) {\n                                                <div class=\"result-actions\">\n                                                    <button class=\"result-edit-btn\" (click)=\"editResultCode(code); $event.stopPropagation()\" title=\"Edit result code\">\n                                                        <i class=\"fa-solid fa-edit\"></i>\n                                                    </button>\n                                                    <button class=\"result-delete-btn\" (click)=\"deleteResultCode(code); $event.stopPropagation()\" title=\"Delete result code\">\n                                                        <i class=\"fa-solid fa-trash\"></i>\n                                                    </button>\n                                                </div>\n                                            }\n                                        </div>\n                                    }\n                                </div>\n                            }\n                        </div>\n                    </kendo-expansionpanel>\n\n                    <!-- Execution & Monitoring Section -->\n                    @if (record.IsSaved) {\n                        <kendo-expansionpanel \n                            [expanded]=\"expandedSections.execution\"\n                            style=\"margin-bottom: 12px;\">\n                            <ng-template kendoExpansionPanelTitleDirective>\n                                <span style=\"display: flex; align-items: center; gap: 8px; font-weight: 600;\">\n                                    <i class=\"fa-solid fa-chart-line\" style=\"color: #6c757d;\"></i>\n                                    Execution & Monitoring\n                                </span>\n                            </ng-template>\n                            \n                            <div style=\"padding: 16px;\">\n                                @if (isLoadingExecutions) {\n                                    <div class=\"loading-state\">\n                                        <i class=\"fa-solid fa-spinner fa-spin\"></i>\n                                        Loading executions...\n                                    </div>\n                                } @else if (recentExecutions.length === 0) {\n                                    <div class=\"empty-state\" style=\"padding: 30px; text-align: center;\">\n                                        <i class=\"fa-solid fa-chart-line\" style=\"font-size: 2em; color: #6c757d; opacity: 0.3;\"></i>\n                                        <p style=\"margin: 12px 0 0 0; color: #6c757d;\">No executions yet</p>\n                                    </div>\n                                } @else {\n                                    <div class=\"execution-stats-row\">\n                                        <div class=\"stat-box\">\n                                            <i class=\"fa-solid fa-tachometer-alt\"></i>\n                                            <div class=\"stat-info\">\n                                                <div class=\"stat-label\" style=\"color: #212529;\">Avg Duration</div>\n                                                <div class=\"stat-value\" style=\"color: #212529;\">{{ formatDuration(executionStats.avgDuration) }}</div>\n                                            </div>\n                                        </div>\n                                        <div class=\"stat-box\">\n                                            <i class=\"fa-solid fa-check-circle\" [style.color]=\"getSuccessRateColor()\"></i>\n                                            <div class=\"stat-info\">\n                                                <div class=\"stat-label\" style=\"color: #212529;\">Success Rate</div>\n                                                <div class=\"stat-value\" [style.color]=\"getSuccessRateColor()\" style=\"font-weight: 600;\">{{ executionStats.successRate.toFixed(0) }}%</div>\n                                            </div>\n                                        </div>\n                                        <div class=\"stat-box\">\n                                            <i class=\"fa-solid fa-play-circle\"></i>\n                                            <div class=\"stat-info\">\n                                                <div class=\"stat-label\" style=\"color: #212529;\">Total Runs</div>\n                                                <div class=\"stat-value\" style=\"color: #212529;\">{{ executionStats.totalRuns }}</div>\n                                            </div>\n                                        </div>\n                                    </div>\n\n                                    <h3 style=\"margin-top: 24px;\"><i class=\"fa-solid fa-history\"></i> Recent Executions</h3>\n                                    <div class=\"executions-table\">\n                                        <table>\n                                            <thead>\n                                                <tr>\n                                                    <th>Started</th>\n                                                    <th>Duration</th>\n                                                    <th>User</th>\n                                                    <th>Result</th>\n                                                    <th>Actions</th>\n                                                </tr>\n                                            </thead>\n                                            <tbody>\n                                                @for (execution of recentExecutions; track execution.ID) {\n                                                    <tr class=\"execution-row\" [class.success]=\"isExecutionSuccess(execution)\">\n                                                        <td>{{ execution.StartedAt | date:'short' }}</td>\n                                                        <td>\n                                                            @if (execution.EndedAt) {\n                                                                {{ formatDuration(getExecutionDuration(execution)) }}\n                                                            } @else {\n                                                                <span class=\"running\">Running...</span>\n                                                            }\n                                                        </td>\n                                                        <td>{{ execution.User }}</td>\n                                                        <td>\n                                                            <span class=\"result-code\" \n                                                                  [class.success]=\"isExecutionSuccess(execution)\"\n                                                                  [class.failure]=\"!isExecutionSuccess(execution)\">\n                                                                {{ execution.ResultCode }}\n                                                            </span>\n                                                        </td>\n                                                        <td>\n                                                            <button kendoButton fillMode=\"flat\" size=\"small\" (click)=\"navigateToExecution(execution.ID)\">\n                                                                <i class=\"fa-solid fa-external-link\"></i>\n                                                            </button>\n                                                        </td>\n                                                    </tr>\n                                                }\n                                            </tbody>\n                                        </table>\n                                    </div>\n                                }\n                            </div>\n                        </kendo-expansionpanel>\n                    }\n\n                    <!-- Related Configuration Section -->\n                    @if (record.IsSaved) {\n                        <kendo-expansionpanel \n                            [expanded]=\"expandedSections.configuration\"\n                            style=\"margin-bottom: 12px;\">\n                            <ng-template kendoExpansionPanelTitleDirective>\n                                <span style=\"display: flex; align-items: center; gap: 8px; font-weight: 600;\">\n                                    <i class=\"fa-solid fa-cogs\" style=\"color: #6c757d;\"></i>\n                                    Related Configuration\n                                </span>\n                            </ng-template>\n                            \n                            <div style=\"padding: 16px;\">\n                                <!-- Libraries -->\n                                <div class=\"config-subsection\">\n                                    <h3><i class=\"fa-solid fa-book\"></i> Libraries</h3>\n                                    @if (isLoadingLibraries) {\n                                        <div class=\"loading-state\">\n                                            <i class=\"fa-solid fa-spinner fa-spin\"></i>\n                                            Loading libraries...\n                                        </div>\n                                    } @else if (actionLibraries.length === 0) {\n                                        <div class=\"empty-state mini\">\n                                            <p>No libraries configured</p>\n                                        </div>\n                                    } @else {\n                                        <div class=\"library-cards\">\n                                            @for (lib of libraries; track lib.ID; let i = $index) {\n                                                <div class=\"library-card\" (click)=\"navigateToLibrary(lib.ID)\">\n                                                    <i class=\"fa-solid fa-book\"></i>\n                                                    <div class=\"library-info\">\n                                                        <div class=\"library-name\">{{ lib.Name }}</div>\n                                                        @if (actionLibraries[i].ItemsUsed) {\n                                                            <div class=\"library-items\">{{ actionLibraries[i].ItemsUsed }}</div>\n                                                        }\n                                                    </div>\n                                                    <i class=\"fa-solid fa-external-link\"></i>\n                                                </div>\n                                            }\n                                        </div>\n                                    }\n                                </div>\n\n                                <!-- Other Related Entities -->\n                                <div class=\"related-entities-grid\">\n                                    <div class=\"related-entity-link\">\n                                        <i class=\"fa-solid fa-shield-alt\"></i>\n                                        <span>Authorizations</span>\n                                        <span class=\"entity-count\">View</span>\n                                    </div>\n                                    <div class=\"related-entity-link\">\n                                        <i class=\"fa-solid fa-layer-group\"></i>\n                                        <span>Contexts</span>\n                                        <span class=\"entity-count\">View</span>\n                                    </div>\n                                    <div class=\"related-entity-link\">\n                                        <i class=\"fa-solid fa-calendar\"></i>\n                                        <span>Scheduled Actions</span>\n                                        <span class=\"entity-count\">View</span>\n                                    </div>\n                                    <div class=\"related-entity-link\">\n                                        <i class=\"fa-solid fa-cube\"></i>\n                                        <span>Entity Actions</span>\n                                        <span class=\"entity-count\">View</span>\n                                    </div>\n                                </div>\n                            </div>\n                        </kendo-expansionpanel>\n                    }\n                </div>\n            </div>\n        </form>\n    }\n</div>\n\n<!-- Action Test Harness Dialog -->\n<mj-action-test-harness-dialog\n    [Action]=\"record\"\n    [ActionParams]=\"actionParams\"\n    [IsOpen]=\"showTestHarness\"\n    (Close)=\"onTestHarnessVisibilityChanged(false)\">\n</mj-action-test-harness-dialog>", styles: ["/* Hero Header Section */\n.action-hero-header {\n    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n    color: white;\n    padding: 32px;\n    margin: -20px -20px 24px -20px;\n    border-radius: 0 0 16px 16px;\n    box-shadow: 0 4px 20px rgba(0,0,0,0.1);\n}\n\n.hero-content {\n    max-width: 1400px;\n    margin: 0 auto;\n}\n\n.action-identity {\n    display: flex;\n    align-items: flex-start;\n    gap: 24px;\n    margin-bottom: 24px;\n}\n\n.action-icon-wrapper {\n    width: 80px;\n    height: 80px;\n    border-radius: 16px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    background: rgba(255,255,255,0.2);\n    backdrop-filter: blur(10px);\n}\n\n.action-icon-wrapper i {\n    font-size: 36px;\n}\n\n.action-info {\n    flex: 1;\n    min-width: 0;\n}\n\n.action-title-row {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n    margin-bottom: 12px;\n    flex-wrap: wrap;\n}\n\n.action-title {\n    margin: 0;\n    font-size: 2em;\n    font-weight: 600;\n    color: white;\n}\n\n.action-name-input {\n    font-size: 1.8em;\n    font-weight: 600;\n    background: rgba(255,255,255,0.2);\n    border: 2px solid rgba(255,255,255,0.3);\n    color: white;\n    padding: 8px 16px;\n    border-radius: 8px;\n    min-width: 400px;\n}\n\n.action-name-input::placeholder {\n    color: rgba(255,255,255,0.6);\n}\n\n.action-badges {\n    display: flex;\n    gap: 8px;\n    flex-wrap: wrap;\n}\n\n.status-badge, .type-badge, .approval-badge {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 6px 14px;\n    border-radius: 20px;\n    font-size: 0.85em;\n    font-weight: 500;\n    background: rgba(255,255,255,0.2);\n    backdrop-filter: blur(10px);\n    border: 1px solid rgba(255,255,255,0.3);\n}\n\n.action-category {\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n    color: rgba(255,255,255,0.9);\n    font-size: 0.95em;\n    cursor: pointer;\n    transition: all 0.2s;\n    margin-bottom: 12px;\n}\n\n.action-category:hover {\n    color: white;\n    transform: translateX(4px);\n}\n\n.action-description {\n    color: rgba(255,255,255,0.9);\n    font-size: 1.05em;\n    line-height: 1.5;\n    margin: 0;\n}\n\n.action-description-input {\n    width: 100%;\n    max-width: 600px;\n    background: rgba(255,255,255,0.2);\n    border: 2px solid rgba(255,255,255,0.3);\n    color: white;\n    border-radius: 8px;\n}\n\n.action-description-input::placeholder {\n    color: rgba(255,255,255,0.6);\n}\n\n/* Quick Stats */\n.action-stats {\n    display: flex;\n    gap: 24px;\n    margin-bottom: 24px;\n    flex-wrap: wrap;\n}\n\n.stat-card {\n    background: rgba(255,255,255,0.1);\n    backdrop-filter: blur(10px);\n    border: 1px solid rgba(255,255,255,0.2);\n    border-radius: 12px;\n    padding: 16px 24px;\n    display: flex;\n    align-items: center;\n    gap: 16px;\n    min-width: 160px;\n}\n\n.stat-card i {\n    font-size: 24px;\n    color: rgba(255,255,255,0.8);\n}\n\n.stat-content {\n    display: flex;\n    flex-direction: column;\n}\n\n.stat-value {\n    font-size: 1.4em;\n    font-weight: 700;\n    color: white;\n}\n\n.stat-label {\n    font-size: 0.85em;\n    color: rgba(255,255,255,0.7);\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n/* Hero Actions */\n.hero-actions {\n    display: flex;\n    gap: 12px;\n    flex-wrap: wrap;\n}\n\n.hero-actions kendo-button {\n    backdrop-filter: blur(10px);\n}\n\n/* Main Content Sections */\n.action-content {\n    padding: 0 20px 20px;\n}\n\n.content-section {\n    background: white;\n    border: 1px solid #e9ecef;\n    border-radius: 12px;\n    margin-bottom: 20px;\n    overflow: hidden;\n    transition: all 0.3s ease;\n}\n\n.content-section:hover {\n    box-shadow: 0 4px 12px rgba(0,0,0,0.08);\n}\n\n.section-header {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 20px;\n    background: #f8f9fa;\n    cursor: pointer;\n    user-select: none;\n    transition: background 0.2s;\n}\n\n.section-header:hover {\n    background: #e9ecef;\n}\n\n.section-header h2 {\n    margin: 0;\n    font-size: 1.3em;\n    color: #2c3e50;\n    flex: 1;\n}\n\n.section-header i:first-child {\n    font-size: 1.2em;\n    color: #6c757d;\n}\n\n.section-count {\n    background: #007bff;\n    color: white;\n    padding: 2px 8px;\n    border-radius: 12px;\n    font-size: 0.85em;\n    font-weight: 500;\n}\n\n.toggle-icon {\n    color: #6c757d;\n    transition: transform 0.3s;\n}\n\n.toggle-icon.rotated {\n    transform: rotate(-90deg);\n}\n\n.section-content {\n    padding: 24px;\n    animation: slideDown 0.3s ease;\n}\n\n@keyframes slideDown {\n    from {\n        opacity: 0;\n        transform: translateY(-10px);\n    }\n    to {\n        opacity: 1;\n        transform: translateY(0);\n    }\n}\n\n/* Overview Section */\n.overview-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n    gap: 20px;\n}\n\n.overview-field {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.overview-field label {\n    font-weight: 600;\n    color: #495057;\n    font-size: 0.9em;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n.required {\n    color: #dc3545;\n}\n\n.full-width {\n    width: 100%;\n}\n\n.overview-display {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n    gap: 24px;\n}\n\n.display-field {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n}\n\n.display-field label {\n    font-size: 0.85em;\n    color: #6c757d;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n.display-value {\n    font-size: 1.1em;\n    color: #2c3e50;\n}\n\n.display-value.code {\n    font-family: 'Courier New', monospace;\n    background: #f8f9fa;\n    padding: 4px 8px;\n    border-radius: 4px;\n}\n\n.approval-date {\n    color: #6c757d;\n    font-size: 0.85em;\n    margin-left: 8px;\n}\n\n/* Code Section */\n.generation-panel {\n    background: #f8f9fa;\n    border: 1px solid #e9ecef;\n    border-radius: 8px;\n    padding: 20px;\n    margin-bottom: 24px;\n}\n\n.generation-panel h3 {\n    margin: 0 0 16px 0;\n    color: #6f42c1;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.prompt-section, .comments-section {\n    margin-bottom: 16px;\n}\n\n.prompt-section label, .comments-section label {\n    display: block;\n    margin-bottom: 8px;\n    font-weight: 600;\n    color: #495057;\n}\n\n.generation-controls {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding-top: 12px;\n    border-top: 1px solid #dee2e6;\n}\n\n.code-locked-badge {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    padding: 4px 10px;\n    background: #ffc107;\n    color: #856404;\n    border-radius: 12px;\n    font-size: 0.8em;\n    font-weight: 500;\n}\n\n.code-editor-section {\n    border: 1px solid #e9ecef;\n    border-radius: 8px;\n    overflow: hidden;\n}\n\n.code-toolbar {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 12px 16px;\n    background: #f8f9fa;\n    border-bottom: 1px solid #e9ecef;\n}\n\n.code-toolbar h3 {\n    margin: 0;\n    font-size: 1.1em;\n    color: #495057;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.code-actions {\n    display: flex;\n    gap: 8px;\n}\n\n.code-comments {\n    background: #e3f2fd;\n    border: 1px solid #90caf9;\n    border-radius: 8px;\n    padding: 16px;\n    margin-top: 16px;\n}\n\n.code-comments h4 {\n    margin: 0 0 8px 0;\n    color: #1976d2;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.code-comments p {\n    margin: 0;\n    color: #424242;\n    line-height: 1.5;\n}\n\n.approval-comments {\n    margin-top: 16px;\n}\n\n.approval-comments label {\n    display: block;\n    margin-bottom: 8px;\n    font-weight: 600;\n    color: #dc3545;\n}\n\n/* Parameters Section */\n.params-section {\n    background: #f8f9fa;\n    border-radius: 12px;\n    padding: 20px;\n}\n\n.params-section.params-section-compact {\n    padding: 12px 20px;\n}\n\n.params-section-compact .empty-state {\n    padding: 12px !important;\n}\n\n.params-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin-bottom: 16px;\n}\n\n.params-header h3 {\n    margin: 0;\n    color: #495057;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.params-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n    gap: 16px;\n}\n\n.param-card {\n    background: white;\n    border: 2px solid #e9ecef;\n    border-radius: 8px;\n    padding: 16px;\n    transition: all 0.2s;\n}\n\n.param-card:hover {\n    border-color: #007bff;\n    box-shadow: 0 2px 8px rgba(0,123,255,0.1);\n}\n\n.param-card.required {\n    border-color: #ffc107;\n}\n\n.param-card.clickable {\n    cursor: pointer;\n}\n\n.param-card.clickable:hover {\n    background: #e7f3ff;\n    border-color: #2196f3;\n    transform: translateY(-1px);\n}\n\n.param-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin-bottom: 8px;\n}\n\n.param-name {\n    font-weight: 600;\n    color: #2c3e50;\n}\n\n.param-badges {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n}\n\n.param-edit-btn,\n.param-delete-btn {\n    background: none;\n    border: none;\n    padding: 4px 8px;\n    cursor: pointer;\n    color: #6c757d;\n    border-radius: 4px;\n    transition: all 0.2s;\n}\n\n.param-edit-btn:hover {\n    background: #e3f2fd;\n    color: #2196f3;\n}\n\n.param-delete-btn:hover {\n    background: #ffebee;\n    color: #f44336;\n}\n\n.param-details {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.required-badge {\n    background: #ffc107;\n    color: #856404;\n    padding: 2px 6px;\n    border-radius: 4px;\n    font-size: 0.75em;\n    font-weight: 500;\n}\n\n.array-badge {\n    background: #6f42c1;\n    color: white;\n    padding: 2px 6px;\n    border-radius: 4px;\n    font-size: 0.75em;\n    font-weight: 500;\n}\n\n.param-type {\n    color: #6c757d;\n    font-size: 0.9em;\n    margin-bottom: 8px;\n}\n\n.param-description {\n    color: #495057;\n    font-size: 0.9em;\n    line-height: 1.4;\n    margin-bottom: 8px;\n}\n\n.param-default {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    margin-top: 8px;\n    padding-top: 8px;\n    border-top: 1px solid #e9ecef;\n}\n\n.default-label {\n    color: #6c757d;\n    font-size: 0.85em;\n}\n\n.param-default code {\n    background: #f8f9fa;\n    padding: 2px 6px;\n    border-radius: 4px;\n    font-family: 'Courier New', monospace;\n    color: #e83e8c;\n}\n\n\n/* Result Codes Section */\n.result-codes-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n    gap: 16px;\n}\n\n.result-code-card {\n    display: flex;\n    align-items: flex-start;\n    gap: 16px;\n    padding: 16px;\n    border: 2px solid #e9ecef;\n    border-radius: 8px;\n    background: white;\n    transition: all 0.2s;\n    position: relative;\n}\n\n.result-code-card.clickable {\n    cursor: pointer;\n}\n\n.result-code-card:hover {\n    transform: translateY(-2px);\n    box-shadow: 0 4px 12px rgba(0,0,0,0.1);\n}\n\n.result-code-card.success {\n    border-color: #28a745;\n    background: #d4edda;\n}\n\n.result-code-card.failure {\n    border-color: #dc3545;\n    background: #f8d7da;\n}\n\n.result-actions {\n    position: absolute;\n    top: 8px;\n    right: 8px;\n    display: flex;\n    gap: 4px;\n    opacity: 0;\n    transition: opacity 0.2s;\n}\n\n.result-code-card:hover .result-actions {\n    opacity: 1;\n}\n\n.result-edit-btn,\n.result-delete-btn {\n    background: white;\n    border: 1px solid #dee2e6;\n    border-radius: 4px;\n    padding: 4px 8px;\n    cursor: pointer;\n    transition: all 0.2s;\n    font-size: 0.85em;\n}\n\n.result-edit-btn:hover {\n    background: #007bff;\n    color: white;\n    border-color: #007bff;\n}\n\n.result-delete-btn:hover {\n    background: #dc3545;\n    color: white;\n    border-color: #dc3545;\n}\n\n.result-icon {\n    font-size: 1.5em;\n    flex-shrink: 0;\n}\n\n.result-code-card.success .result-icon {\n    color: #28a745;\n}\n\n.result-code-card.failure .result-icon {\n    color: #dc3545;\n}\n\n.result-content {\n    flex: 1;\n    min-width: 0;\n}\n\n.result-code {\n    font-weight: 600;\n    color: #2c3e50;\n    margin-bottom: 4px;\n    font-family: 'Courier New', monospace;\n}\n\n.result-description {\n    color: #495057;\n    font-size: 0.9em;\n    line-height: 1.4;\n}\n\n/* Execution Section */\n.execution-stats-row {\n    display: flex;\n    gap: 20px;\n    margin-bottom: 32px;\n    flex-wrap: wrap;\n}\n\n.stat-box {\n    flex: 1;\n    min-width: 200px;\n    background: #f8f9fa;\n    border: 1px solid #e9ecef;\n    border-radius: 8px;\n    padding: 20px;\n    display: flex;\n    align-items: center;\n    gap: 16px;\n}\n\n.stat-box i {\n    font-size: 2em;\n    color: #6c757d;\n}\n\n.stat-info {\n    flex: 1;\n}\n\n.executions-table {\n    overflow-x: auto;\n    border: 1px solid #e9ecef;\n    border-radius: 8px;\n}\n\n.executions-table table {\n    width: 100%;\n    border-collapse: collapse;\n}\n\n.executions-table th {\n    background: #f8f9fa;\n    padding: 12px;\n    text-align: left;\n    font-weight: 600;\n    color: #495057;\n    border-bottom: 2px solid #e9ecef;\n}\n\n.executions-table td {\n    padding: 12px;\n    border-bottom: 1px solid #e9ecef;\n}\n\n.execution-row {\n    transition: background 0.2s;\n}\n\n.execution-row:hover {\n    background: #f8f9fa;\n}\n\n.execution-row.success {\n    background: #d4edda20;\n}\n\n.running {\n    color: #ffc107;\n    font-style: italic;\n}\n\n.result-code {\n    display: inline-block;\n    padding: 4px 8px;\n    border-radius: 4px;\n    font-size: 0.85em;\n    font-weight: 500;\n    font-family: 'Courier New', monospace;\n}\n\n.result-code.success {\n    background: #d4edda;\n    color: #155724;\n}\n\n.result-code.failure {\n    background: #f8d7da;\n    color: #721c24;\n}\n\n/* Configuration Section */\n.config-subsection {\n    margin-bottom: 32px;\n}\n\n.config-subsection h3 {\n    margin: 0 0 16px 0;\n    color: #495057;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.library-cards {\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n}\n\n.library-card {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n    padding: 16px;\n    background: #f8f9fa;\n    border: 1px solid #e9ecef;\n    border-radius: 8px;\n    cursor: pointer;\n    transition: all 0.2s;\n}\n\n.library-card:hover {\n    background: #e9ecef;\n    transform: translateX(4px);\n}\n\n.library-card i:first-child {\n    font-size: 1.5em;\n    color: #6c757d;\n}\n\n.library-info {\n    flex: 1;\n    min-width: 0;\n}\n\n.library-name {\n    font-weight: 600;\n    color: #2c3e50;\n    margin-bottom: 4px;\n}\n\n.library-items {\n    color: #6c757d;\n    font-size: 0.9em;\n    font-family: 'Courier New', monospace;\n}\n\n.related-entities-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n    gap: 12px;\n}\n\n.related-entity-link {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 16px;\n    background: #f8f9fa;\n    border: 1px solid #e9ecef;\n    border-radius: 8px;\n    cursor: pointer;\n    transition: all 0.2s;\n}\n\n.related-entity-link:hover {\n    background: #e9ecef;\n    border-color: #007bff;\n}\n\n.related-entity-link i {\n    font-size: 1.2em;\n    color: #6c757d;\n}\n\n.related-entity-link span:first-of-type {\n    flex: 1;\n    font-weight: 500;\n    color: #495057;\n}\n\n.entity-count {\n    color: #007bff;\n    font-size: 0.9em;\n}\n\n/* Common States */\n.loading-state {\n    text-align: center;\n    padding: 60px;\n    color: #6c757d;\n}\n\n.loading-state i {\n    font-size: 2em;\n    margin-bottom: 12px;\n}\n\n.empty-state {\n    text-align: center;\n    padding: 60px;\n    color: #6c757d;\n}\n\n.empty-state.mini {\n    padding: 20px;\n}\n\n.empty-state i {\n    font-size: 3em;\n    margin-bottom: 16px;\n    opacity: 0.3;\n}\n\n.empty-state p {\n    margin: 0;\n    font-size: 1.1em;\n}\n\n.empty-hint {\n    margin-top: 8px !important;\n    font-size: 0.9em !important;\n    opacity: 0.7;\n}\n\n.no-params {\n    text-align: center;\n    padding: 20px;\n    color: #6c757d;\n    font-style: italic;\n}\n\n.no-params p {\n    margin: 0;\n}\n\n/* Responsive Design */\n@media (max-width: 768px) {\n    .action-hero-header {\n        padding: 20px;\n    }\n    \n    .action-identity {\n        flex-direction: column;\n        text-align: center;\n    }\n    \n    .action-icon-wrapper {\n        margin: 0 auto;\n    }\n    \n    .action-title-row {\n        justify-content: center;\n    }\n    \n    .action-stats {\n        justify-content: center;\n    }\n    \n    .params-grid {\n        grid-template-columns: 1fr;\n    }\n}"] }]
     }], null, null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ActionFormComponentExtended, { className: "ActionFormComponentExtended", filePath: "src/lib/custom/actions/action-form.component.ts", lineNumber: 18 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ActionFormComponentExtended, { className: "ActionFormComponentExtended", filePath: "src/lib/custom/Actions/action-form.component.ts", lineNumber: 18 }); })();
 //# sourceMappingURL=action-form.component.js.map