@memberjunction/ng-core-entity-forms 5.12.0 → 5.13.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.
- package/dist/lib/custom/AIPromptRuns/ai-prompt-run-form.component.js +3 -3
- package/dist/lib/custom/AIPromptRuns/ai-prompt-run-form.component.js.map +1 -1
- package/dist/lib/custom/Actions/action-execution-log-form.component.js +3 -3
- package/dist/lib/custom/Actions/action-execution-log-form.component.js.map +1 -1
- package/dist/lib/custom/Actions/action-form.component.js +3 -3
- package/dist/lib/custom/Actions/action-form.component.js.map +1 -1
- package/dist/lib/custom/EntityActions/entityaction.form.component.js +3 -3
- package/dist/lib/custom/EntityActions/entityaction.form.component.js.map +1 -1
- package/dist/lib/custom/Lists/list-form.component.js +7 -7
- package/dist/lib/custom/Lists/list-form.component.js.map +1 -1
- package/package.json +31 -31
|
@@ -1849,7 +1849,7 @@ let MJActionFormComponentExtended = class MJActionFormComponentExtended extends
|
|
|
1849
1849
|
this.cdr.detectChanges();
|
|
1850
1850
|
}
|
|
1851
1851
|
static { this.ɵfac = /*@__PURE__*/ (() => { let ɵMJActionFormComponentExtended_BaseFactory; return function MJActionFormComponentExtended_Factory(__ngFactoryType__) { return (ɵMJActionFormComponentExtended_BaseFactory || (ɵMJActionFormComponentExtended_BaseFactory = i0.ɵɵgetInheritedFactory(MJActionFormComponentExtended)))(__ngFactoryType__ || MJActionFormComponentExtended); }; })(); }
|
|
1852
|
-
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MJActionFormComponentExtended, selectors: [["mj-action-form"]], standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 3, vars: 4, consts: [["form", "ngForm"], [1, "record-form-container"], [1, "record-form"], [3, "Close", "Action", "ActionParams", "IsOpen"], [3, "Form"], [1, "action-main-area", 2, "display", "flex", "flex-direction", "column", "height", "
|
|
1852
|
+
static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MJActionFormComponentExtended, selectors: [["mj-action-form"]], standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 3, vars: 4, consts: [["form", "ngForm"], [1, "record-form-container", 2, "height", "100%", "display", "flex", "flex-direction", "column"], [1, "record-form", 2, "display", "flex", "flex-direction", "column", "height", "100%", "overflow", "hidden"], [3, "Close", "Action", "ActionParams", "IsOpen"], [3, "Form"], [1, "action-main-area", 2, "display", "flex", "flex-direction", "column", "flex", "1", "min-height", "0", "overflow-y", "auto"], [1, "action-header", 2, "flex-shrink", "0", "padding", "20px", "background", "var(--mj-bg-surface-card)", "border-bottom", "2px solid var(--mj-border-default)"], [2, "display", "flex", "justify-content", "space-between", "align-items", "flex-start", "gap", "20px"], [2, "flex", "1", "min-width", "0"], [2, "display", "flex", "align-items", "center", "gap", "12px", "margin-bottom", "8px"], [2, "font-size", "1.4em"], ["name", "actionName", "placeholder", "Enter action name...", 2, "font-size", "1.2em", "font-weight", "600", "min-width", "300px", "flex", "1", 3, "ngModel"], [2, "display", "flex", "gap", "16px", "margin-bottom", "12px", "flex-wrap", "wrap"], ["name", "actionDescription", "placeholder", "Enter action description...", 2, "width", "100%", "max-width", "600px", "margin-bottom", "12px", 3, "ngModel", "rows"], [2, "margin", "0 0 12px 0", "color", "var(--mj-text-muted)", "font-size", "0.9em", "line-height", "1.4"], [1, "quick-config", 2, "display", "flex", "align-items", "center", "gap", "16px", "flex-wrap", "wrap"], [1, "config-item", 2, "display", "flex", "align-items", "center", "gap", "6px", "font-size", "0.85em"], [1, "fa-solid", "fa-cube", 2, "color", "var(--mj-text-muted)"], [2, "color", "var(--mj-text-muted)"], [2, "color", "var(--mj-text-secondary)", "font-weight", "500"], [1, "action-buttons", 2, "display", "flex", "flex-direction", "column", "gap", "8px", "align-items", "flex-end"], [2, "display", "flex", "gap", "8px"], ["kendoButton", "", "themeColor", "primary", "size", "large", "title", "Open Run Harness", 3, "disabled"], ["kendoButton", "", "themeColor", "info", "size", "medium", "title", "Regenerate Code"], [2, "font-size", "0.75em", "color", "var(--mj-status-error)", "text-align", "right"], [1, "configuration-sections", 2, "flex", "1", "background", "var(--mj-bg-surface-card)", "border-top", "2px solid var(--mj-border-default)", "padding", "16px", "min-height", "0"], [2, "margin-bottom", "12px", 3, "expanded"], ["kendoExpansionPanelTitleDirective", ""], [2, "padding", "16px"], [1, "loading-state"], [1, "empty-state", 2, "padding", "30px", "text-align", "center"], [2, "display", "flex", "justify-content", "flex-end", "margin-bottom", "12px"], [1, "result-codes-grid"], ["name", "actionName", "placeholder", "Enter action name...", 2, "font-size", "1.2em", "font-weight", "600", "min-width", "300px", "flex", "1", 3, "ngModelChange", "ngModel"], [2, "margin", "0", "color", "var(--mj-text-secondary)", "font-weight", "600", "flex", "1"], ["kendoButton", "", "size", "small", 2, "pointer-events", "none", "cursor", "default", 3, "themeColor"], [2, "display", "block", "margin-bottom", "4px", "font-weight", "600", "color", "var(--mj-text-secondary)", "font-size", "0.9em"], ["name", "actionStatus", "textField", "text", "valueField", "value", 2, "width", "150px", 3, "ngModelChange", "ngModel", "data", "valuePrimitive"], [2, "color", "var(--mj-status-error)"], ["name", "actionType", "textField", "text", "valueField", "value", 2, "width", "150px", 3, "ngModelChange", "ngModel", "data", "valuePrimitive"], ["name", "categoryID", "placeholder", "Select category...", 2, "width", "200px", 3, "ngModelChange", "ngModel", "data"], ["name", "actionDescription", "placeholder", "Enter action description...", 2, "width", "100%", "max-width", "600px", "margin-bottom", "12px", 3, "ngModelChange", "ngModel", "rows"], [1, "fa-solid", "fa-folder", 2, "color", "var(--mj-text-muted)"], [2, "color", "var(--mj-text-secondary)", "font-weight", "500", "cursor", "pointer", 3, "click"], [1, "fa-solid", "fa-external-link", 2, "font-size", "0.75em", "margin-left", "4px"], [2, "font-weight", "500"], [1, "fa-solid", "fa-sliders", 2, "color", "var(--mj-text-muted)"], ["kendoButton", "", "themeColor", "primary", "size", "large", "title", "Open Run Harness", 3, "click", "disabled"], [1, "fa-solid", "fa-play"], ["kendoButton", "", "themeColor", "info", "size", "medium", "title", "Regenerate Code", 3, "click"], [1, "fa-solid", "fa-robot"], ["kendoButton", "", "themeColor", "success", "size", "small", 3, "click"], [1, "fa-solid", "fa-check"], ["kendoButton", "", "themeColor", "error", "size", "small", 3, "click"], [1, "fa-solid", "fa-times"], [2, "display", "flex", "align-items", "center", "gap", "8px", "font-weight", "600"], [2, "background", "var(--mj-status-info)", "color", "var(--mj-text-inverse)", "padding", "2px 6px", "border-radius", "10px", "font-size", "0.7em"], [1, "fa-solid", "fa-spinner", "fa-spin"], [1, "fa-solid", "fa-sliders", 2, "font-size", "2em", "color", "var(--mj-text-muted)", "opacity", "0.3"], [2, "margin", "12px 0 0 0", "color", "var(--mj-text-muted)"], [2, "margin", "8px 0 0 0", "font-size", "0.85em", "color", "var(--mj-text-muted)"], [1, "params-section"], [1, "params-header"], [1, "fa-solid", "fa-sign-in-alt"], ["kendoButton", "", "fillMode", "flat", "size", "small"], [1, "params-grid"], [1, "params-section", 2, "margin-top", "24px"], [1, "fa-solid", "fa-sign-out-alt"], [1, "empty-state", 2, "padding", "20px", "text-align", "center"], ["kendoButton", "", "fillMode", "flat", "size", "small", 3, "click"], [1, "fa-solid", "fa-plus"], [1, "fa-solid", "fa-inbox", 2, "font-size", "2em", "color", "var(--mj-text-muted)", "opacity", "0.3"], [1, "param-card", 3, "required", "clickable"], [1, "param-card", 3, "click"], [1, "param-header"], [1, "param-name"], [1, "param-badges"], [1, "required-badge"], [1, "array-badge"], [1, "param-details"], [1, "param-type"], [1, "param-description"], [1, "param-default"], ["title", "Edit parameter", 1, "param-edit-btn", 3, "click"], [1, "fa-solid", "fa-edit"], ["title", "Delete parameter", 1, "param-delete-btn", 3, "click"], [1, "fa-solid", "fa-trash"], [1, "default-label"], [1, "param-card", 3, "clickable"], [1, "generation-panel"], [1, "code-editor-section"], [1, "code-toolbar"], [1, "fa-solid", "fa-file-code"], [1, "code-actions"], [1, "fa-solid", "fa-copy"], ["name", "actionCode", 2, "height", "400px", "width", "100%", 3, "ngModelChange", "ngModel", "readonly", "language", "lineWrapping"], [1, "code-comments"], [1, "approval-comments"], [1, "fa-solid", "fa-code", 2, "color", "var(--mj-text-muted)"], [2, "background", "var(--mj-status-warning)", "color", "var(--mj-color-warning-800)", "padding", "2px 6px", "border-radius", "10px", "font-size", "0.7em"], [1, "fa-solid", "fa-lock"], [1, "prompt-section"], ["name", "userPrompt", "placeholder", "Describe what this action should do...", 2, "width", "100%", "min-height", "120px", 3, "ngModelChange", "ngModel", "rows"], [1, "comments-section"], ["name", "userComments", "placeholder", "Internal notes...", 2, "width", "100%", 3, "ngModelChange", "ngModel", "rows"], [1, "generation-controls"], ["name", "codeLocked", 3, "ngModelChange", "ngModel"], [2, "margin-left", "8px"], [1, "fa-solid", "fa-comment"], ["name", "codeApprovalComments", "placeholder", "Explain why the code was rejected...", 2, "width", "100%", 3, "ngModelChange", "ngModel", "rows"], [1, "fa-solid", "fa-flag-checkered", 2, "color", "var(--mj-text-muted)"], [2, "background", "var(--mj-status-success)", "color", "var(--mj-text-inverse)", "padding", "2px 6px", "border-radius", "10px", "font-size", "0.7em"], ["kendoButton", "", "size", "small", 3, "click", "primary"], [1, "fa-solid", "fa-flag-checkered", 2, "font-size", "2em", "color", "var(--mj-text-muted)", "opacity", "0.3"], [1, "result-code-card", 3, "success", "failure", "clickable"], [1, "result-code-card", 3, "click"], [1, "result-icon"], [1, "result-content"], [1, "result-code"], [1, "result-description"], [1, "result-actions"], ["title", "Edit result code", 1, "result-edit-btn", 3, "click"], ["title", "Delete result code", 1, "result-delete-btn", 3, "click"], [1, "fa-solid", "fa-chart-line", 2, "color", "var(--mj-text-muted)"], [1, "fa-solid", "fa-chart-line", 2, "font-size", "2em", "color", "var(--mj-text-muted)", "opacity", "0.3"], [1, "execution-stats-row"], [1, "stat-box"], [1, "fa-solid", "fa-tachometer-alt"], [1, "stat-info"], [1, "stat-label", 2, "color", "var(--mj-text-primary)"], [1, "stat-value", 2, "color", "var(--mj-text-primary)"], [1, "fa-solid", "fa-check-circle"], [1, "stat-value", 2, "font-weight", "600"], [1, "fa-solid", "fa-play-circle"], [2, "margin-top", "24px"], [1, "fa-solid", "fa-history"], [1, "executions-table"], [1, "execution-row", 3, "success"], [1, "execution-row"], [1, "running"], [1, "fa-solid", "fa-external-link"], [1, "config-subsection"], [1, "fa-solid", "fa-book"], [1, "empty-state", "mini"], [1, "library-cards"], [1, "related-entities-grid"], [1, "related-entity-link"], [1, "fa-solid", "fa-shield-alt"], [1, "entity-count"], [1, "fa-solid", "fa-layer-group"], [1, "fa-solid", "fa-calendar"], [1, "fa-solid", "fa-cube"], [1, "fa-solid", "fa-cogs", 2, "color", "var(--mj-text-muted)"], [1, "library-card"], [1, "library-card", 3, "click"], [1, "library-info"], [1, "library-name"], [1, "library-items"]], template: function MJActionFormComponentExtended_Template(rf, ctx) { if (rf & 1) {
|
|
1853
1853
|
i0.ɵɵelementStart(0, "div", 1);
|
|
1854
1854
|
i0.ɵɵconditionalCreate(1, MJActionFormComponentExtended_Conditional_1_Template, 47, 24, "form", 2);
|
|
1855
1855
|
i0.ɵɵelementEnd();
|
|
@@ -1861,7 +1861,7 @@ let MJActionFormComponentExtended = class MJActionFormComponentExtended extends
|
|
|
1861
1861
|
i0.ɵɵconditional(ctx.record ? 1 : -1);
|
|
1862
1862
|
i0.ɵɵadvance();
|
|
1863
1863
|
i0.ɵɵproperty("Action", ctx.record)("ActionParams", ctx.actionParams)("IsOpen", ctx.showTestHarness);
|
|
1864
|
-
} }, dependencies: [i1.ɵNgNoValidate, i1.NgControlStatus, i1.NgControlStatusGroup, i1.NgModel, i1.NgForm, i2.ExpansionPanelComponent, i2.ExpansionPanelTitleDirective, i3.TextBoxComponent, i3.TextAreaComponent, i3.SwitchComponent, i4.DropDownListComponent, i5.ButtonComponent, i6.MjFormToolbarComponent, i7.CodeEditorComponent, i8.ActionTestHarnessDialogComponent, i9.DatePipe], styles: ["\n\n.action-hero-header[_ngcontent-%COMP%] {\n background: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n padding: 32px;\n margin: -20px -20px 24px -20px;\n border-radius: 0 0 var(--mj-radius-lg) var(--mj-radius-lg);\n box-shadow: var(--mj-shadow-md);\n}\n\n.hero-content[_ngcontent-%COMP%] {\n max-width: 1400px;\n margin: 0 auto;\n}\n\n.action-identity[_ngcontent-%COMP%] {\n display: flex;\n align-items: flex-start;\n gap: 24px;\n margin-bottom: 24px;\n}\n\n.action-icon-wrapper[_ngcontent-%COMP%] {\n width: 80px;\n height: 80px;\n border-radius: var(--mj-radius-lg);\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n background: color-mix(in srgb, var(--mj-text-inverse) 20%, transparent);\n backdrop-filter: blur(10px);\n}\n\n.action-icon-wrapper[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: var(--mj-text-4xl);\n}\n\n.action-info[_ngcontent-%COMP%] {\n flex: 1;\n min-width: 0;\n}\n\n.action-title-row[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 16px;\n margin-bottom: 12px;\n flex-wrap: wrap;\n}\n\n.action-title[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 2em;\n font-weight: var(--mj-font-semibold);\n color: var(--mj-text-inverse);\n}\n\n.action-name-input[_ngcontent-%COMP%] {\n font-size: 1.8em;\n font-weight: var(--mj-font-semibold);\n background: color-mix(in srgb, var(--mj-text-inverse) 20%, transparent);\n border: 2px solid color-mix(in srgb, var(--mj-text-inverse) 30%, transparent);\n color: var(--mj-text-inverse);\n padding: 8px 16px;\n border-radius: var(--mj-radius-md);\n min-width: 400px;\n}\n\n.action-name-input[_ngcontent-%COMP%]::placeholder {\n color: color-mix(in srgb, var(--mj-text-inverse) 60%, transparent);\n}\n\n.action-badges[_ngcontent-%COMP%] {\n display: flex;\n gap: 8px;\n flex-wrap: wrap;\n}\n\n.status-badge[_ngcontent-%COMP%], .type-badge[_ngcontent-%COMP%], .approval-badge[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 6px 14px;\n border-radius: var(--mj-radius-full);\n font-size: var(--mj-text-sm);\n font-weight: var(--mj-font-medium);\n background: color-mix(in srgb, var(--mj-text-inverse) 20%, transparent);\n backdrop-filter: blur(10px);\n border: 1px solid color-mix(in srgb, var(--mj-text-inverse) 30%, transparent);\n}\n\n.action-category[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n color: color-mix(in srgb, var(--mj-text-inverse) 90%, transparent);\n font-size: 0.95em;\n cursor: pointer;\n transition: all var(--mj-transition-base);\n margin-bottom: 12px;\n}\n\n.action-category[_ngcontent-%COMP%]:hover {\n color: var(--mj-text-inverse);\n transform: translateX(4px);\n}\n\n.action-description[_ngcontent-%COMP%] {\n color: color-mix(in srgb, var(--mj-text-inverse) 90%, transparent);\n font-size: 1.05em;\n line-height: var(--mj-leading-relaxed);\n margin: 0;\n}\n\n.action-description-input[_ngcontent-%COMP%] {\n width: 100%;\n max-width: 600px;\n background: color-mix(in srgb, var(--mj-text-inverse) 20%, transparent);\n border: 2px solid color-mix(in srgb, var(--mj-text-inverse) 30%, transparent);\n color: var(--mj-text-inverse);\n border-radius: var(--mj-radius-md);\n}\n\n.action-description-input[_ngcontent-%COMP%]::placeholder {\n color: color-mix(in srgb, var(--mj-text-inverse) 60%, transparent);\n}\n\n\n\n.action-stats[_ngcontent-%COMP%] {\n display: flex;\n gap: 24px;\n margin-bottom: 24px;\n flex-wrap: wrap;\n}\n\n.stat-card[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--mj-text-inverse) 10%, transparent);\n backdrop-filter: blur(10px);\n border: 1px solid color-mix(in srgb, var(--mj-text-inverse) 20%, transparent);\n border-radius: var(--mj-radius-lg);\n padding: 16px 24px;\n display: flex;\n align-items: center;\n gap: 16px;\n min-width: 160px;\n}\n\n.stat-card[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: var(--mj-text-2xl);\n color: color-mix(in srgb, var(--mj-text-inverse) 80%, transparent);\n}\n\n.stat-content[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n}\n\n.stat-value[_ngcontent-%COMP%] {\n font-size: 1.4em;\n font-weight: var(--mj-font-bold);\n color: var(--mj-text-inverse);\n}\n\n.stat-label[_ngcontent-%COMP%] {\n font-size: var(--mj-text-sm);\n color: color-mix(in srgb, var(--mj-text-inverse) 70%, transparent);\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n\n\n.hero-actions[_ngcontent-%COMP%] {\n display: flex;\n gap: 12px;\n flex-wrap: wrap;\n}\n\n.hero-actions[_ngcontent-%COMP%] kendo-button[_ngcontent-%COMP%] {\n backdrop-filter: blur(10px);\n}\n\n\n\n.action-content[_ngcontent-%COMP%] {\n padding: 0 20px 20px;\n}\n\n.content-section[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface-card);\n border: 1px solid var(--mj-border-default);\n border-radius: var(--mj-radius-lg);\n margin-bottom: 20px;\n overflow: hidden;\n transition: all var(--mj-transition-base);\n}\n\n.content-section[_ngcontent-%COMP%]:hover {\n box-shadow: var(--mj-shadow-md);\n}\n\n.section-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 20px;\n background: var(--mj-bg-surface-elevated);\n cursor: pointer;\n user-select: none;\n transition: background var(--mj-transition-base);\n}\n\n.section-header[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-hover);\n}\n\n.section-header[_ngcontent-%COMP%] h2[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 1.3em;\n color: var(--mj-text-primary);\n flex: 1;\n}\n\n.section-header[_ngcontent-%COMP%] i[_ngcontent-%COMP%]:first-child {\n font-size: 1.2em;\n color: var(--mj-text-muted);\n}\n\n.section-count[_ngcontent-%COMP%] {\n background: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n padding: 2px 8px;\n border-radius: var(--mj-radius-full);\n font-size: var(--mj-text-sm);\n font-weight: var(--mj-font-medium);\n}\n\n.toggle-icon[_ngcontent-%COMP%] {\n color: var(--mj-text-muted);\n transition: transform 0.3s;\n}\n\n.toggle-icon.rotated[_ngcontent-%COMP%] {\n transform: rotate(-90deg);\n}\n\n.section-content[_ngcontent-%COMP%] {\n padding: 24px;\n animation: _ngcontent-%COMP%_slideDown 0.3s ease;\n}\n\n@keyframes _ngcontent-%COMP%_slideDown {\n from {\n opacity: 0;\n transform: translateY(-10px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n\n\n.overview-grid[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 20px;\n}\n\n.overview-field[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.overview-field[_ngcontent-%COMP%] label[_ngcontent-%COMP%] {\n font-weight: var(--mj-font-semibold);\n color: var(--mj-text-secondary);\n font-size: var(--mj-text-sm);\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.required[_ngcontent-%COMP%] {\n color: var(--mj-status-error);\n}\n\n.full-width[_ngcontent-%COMP%] {\n width: 100%;\n}\n\n.overview-display[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 24px;\n}\n\n.display-field[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.display-field[_ngcontent-%COMP%] label[_ngcontent-%COMP%] {\n font-size: var(--mj-text-sm);\n color: var(--mj-text-muted);\n font-weight: var(--mj-font-semibold);\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.display-value[_ngcontent-%COMP%] {\n font-size: 1.1em;\n color: var(--mj-text-primary);\n}\n\n.display-value.code[_ngcontent-%COMP%] {\n font-family: 'Courier New', monospace;\n background: var(--mj-bg-surface-sunken);\n padding: 4px 8px;\n border-radius: var(--mj-radius-sm);\n}\n\n.approval-date[_ngcontent-%COMP%] {\n color: var(--mj-text-muted);\n font-size: var(--mj-text-sm);\n margin-left: 8px;\n}\n\n\n\n.generation-panel[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface-sunken);\n border: 1px solid var(--mj-border-default);\n border-radius: var(--mj-radius-md);\n padding: 20px;\n margin-bottom: 24px;\n}\n\n.generation-panel[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] {\n margin: 0 0 16px 0;\n color: var(--mj-color-indigo-500);\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.prompt-section[_ngcontent-%COMP%], .comments-section[_ngcontent-%COMP%] {\n margin-bottom: 16px;\n}\n\n.prompt-section[_ngcontent-%COMP%] label[_ngcontent-%COMP%], .comments-section[_ngcontent-%COMP%] label[_ngcontent-%COMP%] {\n display: block;\n margin-bottom: 8px;\n font-weight: var(--mj-font-semibold);\n color: var(--mj-text-secondary);\n}\n\n.generation-controls[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n padding-top: 12px;\n border-top: 1px solid var(--mj-border-default);\n}\n\n.code-locked-badge[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 4px 10px;\n background: var(--mj-status-warning);\n color: var(--mj-color-warning-800);\n border-radius: var(--mj-radius-full);\n font-size: var(--mj-text-xs);\n font-weight: var(--mj-font-medium);\n}\n\n.code-editor-section[_ngcontent-%COMP%] {\n border: 1px solid var(--mj-border-default);\n border-radius: var(--mj-radius-md);\n overflow: hidden;\n}\n\n.code-toolbar[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 12px 16px;\n background: var(--mj-bg-surface-sunken);\n border-bottom: 1px solid var(--mj-border-default);\n}\n\n.code-toolbar[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 1.1em;\n color: var(--mj-text-secondary);\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.code-actions[_ngcontent-%COMP%] {\n display: flex;\n gap: 8px;\n}\n\n.code-comments[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--mj-status-info) 10%, var(--mj-bg-surface));\n border: 1px solid color-mix(in srgb, var(--mj-status-info) 30%, transparent);\n border-radius: var(--mj-radius-md);\n padding: 16px;\n margin-top: 16px;\n}\n\n.code-comments[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] {\n margin: 0 0 8px 0;\n color: var(--mj-status-info);\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.code-comments[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n margin: 0;\n color: var(--mj-text-secondary);\n line-height: var(--mj-leading-relaxed);\n}\n\n.approval-comments[_ngcontent-%COMP%] {\n margin-top: 16px;\n}\n\n.approval-comments[_ngcontent-%COMP%] label[_ngcontent-%COMP%] {\n display: block;\n margin-bottom: 8px;\n font-weight: var(--mj-font-semibold);\n color: var(--mj-status-error);\n}\n\n\n\n.params-section[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface-sunken);\n border-radius: var(--mj-radius-lg);\n padding: 20px;\n}\n\n.params-section.params-section-compact[_ngcontent-%COMP%] {\n padding: 12px 20px;\n}\n\n.params-section-compact[_ngcontent-%COMP%] .empty-state[_ngcontent-%COMP%] {\n padding: 12px !important;\n}\n\n.params-header[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 16px;\n}\n\n.params-header[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] {\n margin: 0;\n color: var(--mj-text-secondary);\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.params-grid[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n gap: 16px;\n}\n\n.param-card[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface);\n border: 2px solid var(--mj-border-default);\n border-radius: var(--mj-radius-md);\n padding: 16px;\n transition: all var(--mj-transition-base);\n}\n\n.param-card[_ngcontent-%COMP%]:hover {\n border-color: var(--mj-brand-primary);\n box-shadow: var(--mj-shadow-sm);\n}\n\n.param-card.required[_ngcontent-%COMP%] {\n border-color: var(--mj-status-warning);\n}\n\n.param-card.clickable[_ngcontent-%COMP%] {\n cursor: pointer;\n}\n\n.param-card.clickable[_ngcontent-%COMP%]:hover {\n background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n border-color: var(--mj-brand-primary);\n transform: translateY(-1px);\n}\n\n.param-header[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 8px;\n}\n\n.param-name[_ngcontent-%COMP%] {\n font-weight: var(--mj-font-semibold);\n color: var(--mj-text-primary);\n}\n\n.param-badges[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.param-edit-btn[_ngcontent-%COMP%], \n.param-delete-btn[_ngcontent-%COMP%] {\n background: none;\n border: none;\n padding: 4px 8px;\n cursor: pointer;\n color: var(--mj-text-muted);\n border-radius: var(--mj-radius-sm);\n transition: all var(--mj-transition-base);\n}\n\n.param-edit-btn[_ngcontent-%COMP%]:hover {\n background: color-mix(in srgb, var(--mj-status-info) 10%, var(--mj-bg-surface));\n color: var(--mj-status-info);\n}\n\n.param-delete-btn[_ngcontent-%COMP%]:hover {\n background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n color: var(--mj-status-error);\n}\n\n.param-details[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.required-badge[_ngcontent-%COMP%] {\n background: var(--mj-status-warning);\n color: var(--mj-color-warning-800);\n padding: 2px 6px;\n border-radius: var(--mj-radius-sm);\n font-size: var(--mj-text-xs);\n font-weight: var(--mj-font-medium);\n}\n\n.array-badge[_ngcontent-%COMP%] {\n background: var(--mj-color-indigo-500);\n color: var(--mj-text-inverse);\n padding: 2px 6px;\n border-radius: var(--mj-radius-sm);\n font-size: var(--mj-text-xs);\n font-weight: var(--mj-font-medium);\n}\n\n.param-type[_ngcontent-%COMP%] {\n color: var(--mj-text-muted);\n font-size: var(--mj-text-sm);\n margin-bottom: 8px;\n}\n\n.param-description[_ngcontent-%COMP%] {\n color: var(--mj-text-secondary);\n font-size: var(--mj-text-sm);\n line-height: 1.4;\n margin-bottom: 8px;\n}\n\n.param-default[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-top: 8px;\n padding-top: 8px;\n border-top: 1px solid var(--mj-border-default);\n}\n\n.default-label[_ngcontent-%COMP%] {\n color: var(--mj-text-muted);\n font-size: var(--mj-text-sm);\n}\n\n.param-default[_ngcontent-%COMP%] code[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface-sunken);\n padding: 2px 6px;\n border-radius: var(--mj-radius-sm);\n font-family: 'Courier New', monospace;\n color: var(--mj-color-error-400);\n}\n\n\n\n\n.result-codes-grid[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n gap: 16px;\n}\n\n.result-code-card[_ngcontent-%COMP%] {\n display: flex;\n align-items: flex-start;\n gap: 16px;\n padding: 16px;\n border: 2px solid var(--mj-border-default);\n border-radius: var(--mj-radius-md);\n background: var(--mj-bg-surface);\n transition: all var(--mj-transition-base);\n position: relative;\n}\n\n.result-code-card.clickable[_ngcontent-%COMP%] {\n cursor: pointer;\n}\n\n.result-code-card[_ngcontent-%COMP%]:hover {\n transform: translateY(-2px);\n box-shadow: var(--mj-shadow-md);\n}\n\n.result-code-card.success[_ngcontent-%COMP%] {\n border-color: var(--mj-status-success);\n background: color-mix(in srgb, var(--mj-status-success) 10%, var(--mj-bg-surface));\n}\n\n.result-code-card.failure[_ngcontent-%COMP%] {\n border-color: var(--mj-status-error);\n background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n}\n\n.result-actions[_ngcontent-%COMP%] {\n position: absolute;\n top: 8px;\n right: 8px;\n display: flex;\n gap: 4px;\n opacity: 0;\n transition: opacity var(--mj-transition-base);\n}\n\n.result-code-card[_ngcontent-%COMP%]:hover .result-actions[_ngcontent-%COMP%] {\n opacity: 1;\n}\n\n.result-edit-btn[_ngcontent-%COMP%], \n.result-delete-btn[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface);\n border: 1px solid var(--mj-border-default);\n border-radius: var(--mj-radius-sm);\n padding: 4px 8px;\n cursor: pointer;\n transition: all var(--mj-transition-base);\n font-size: var(--mj-text-sm);\n}\n\n.result-edit-btn[_ngcontent-%COMP%]:hover {\n background: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n border-color: var(--mj-brand-primary);\n}\n\n.result-delete-btn[_ngcontent-%COMP%]:hover {\n background: var(--mj-status-error);\n color: var(--mj-text-inverse);\n border-color: var(--mj-status-error);\n}\n\n.result-icon[_ngcontent-%COMP%] {\n font-size: 1.5em;\n flex-shrink: 0;\n}\n\n.result-code-card.success[_ngcontent-%COMP%] .result-icon[_ngcontent-%COMP%] {\n color: var(--mj-status-success);\n}\n\n.result-code-card.failure[_ngcontent-%COMP%] .result-icon[_ngcontent-%COMP%] {\n color: var(--mj-status-error);\n}\n\n.result-content[_ngcontent-%COMP%] {\n flex: 1;\n min-width: 0;\n}\n\n.result-code[_ngcontent-%COMP%] {\n font-weight: var(--mj-font-semibold);\n color: var(--mj-text-primary);\n margin-bottom: 4px;\n font-family: 'Courier New', monospace;\n}\n\n.result-description[_ngcontent-%COMP%] {\n color: var(--mj-text-secondary);\n font-size: var(--mj-text-sm);\n line-height: 1.4;\n}\n\n\n\n.execution-stats-row[_ngcontent-%COMP%] {\n display: flex;\n gap: 20px;\n margin-bottom: 32px;\n flex-wrap: wrap;\n}\n\n.stat-box[_ngcontent-%COMP%] {\n flex: 1;\n min-width: 200px;\n background: var(--mj-bg-surface-sunken);\n border: 1px solid var(--mj-border-default);\n border-radius: var(--mj-radius-md);\n padding: 20px;\n display: flex;\n align-items: center;\n gap: 16px;\n}\n\n.stat-box[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 2em;\n color: var(--mj-text-muted);\n}\n\n.stat-info[_ngcontent-%COMP%] {\n flex: 1;\n}\n\n.executions-table[_ngcontent-%COMP%] {\n overflow-x: auto;\n border: 1px solid var(--mj-border-default);\n border-radius: var(--mj-radius-md);\n}\n\n.executions-table[_ngcontent-%COMP%] table[_ngcontent-%COMP%] {\n width: 100%;\n border-collapse: collapse;\n}\n\n.executions-table[_ngcontent-%COMP%] th[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface-sunken);\n padding: 12px;\n text-align: left;\n font-weight: var(--mj-font-semibold);\n color: var(--mj-text-secondary);\n border-bottom: 2px solid var(--mj-border-default);\n}\n\n.executions-table[_ngcontent-%COMP%] td[_ngcontent-%COMP%] {\n padding: 12px;\n border-bottom: 1px solid var(--mj-border-default);\n color: var(--mj-text-primary);\n}\n\n.execution-row[_ngcontent-%COMP%] {\n transition: background var(--mj-transition-base);\n}\n\n.execution-row[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-hover);\n}\n\n.execution-row.success[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--mj-status-success) 5%, transparent);\n}\n\n.running[_ngcontent-%COMP%] {\n color: var(--mj-status-warning);\n font-style: italic;\n}\n\n.result-code[_ngcontent-%COMP%] {\n display: inline-block;\n padding: 4px 8px;\n border-radius: var(--mj-radius-sm);\n font-size: var(--mj-text-sm);\n font-weight: var(--mj-font-medium);\n font-family: 'Courier New', monospace;\n}\n\n.result-code.success[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n color: var(--mj-status-success);\n}\n\n.result-code.failure[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n color: var(--mj-status-error);\n}\n\n\n\n.config-subsection[_ngcontent-%COMP%] {\n margin-bottom: 32px;\n}\n\n.config-subsection[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] {\n margin: 0 0 16px 0;\n color: var(--mj-text-secondary);\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.library-cards[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 12px;\n}\n\n.library-card[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 16px;\n padding: 16px;\n background: var(--mj-bg-surface-sunken);\n border: 1px solid var(--mj-border-default);\n border-radius: var(--mj-radius-md);\n cursor: pointer;\n transition: all var(--mj-transition-base);\n}\n\n.library-card[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-hover);\n transform: translateX(4px);\n}\n\n.library-card[_ngcontent-%COMP%] i[_ngcontent-%COMP%]:first-child {\n font-size: 1.5em;\n color: var(--mj-text-muted);\n}\n\n.library-info[_ngcontent-%COMP%] {\n flex: 1;\n min-width: 0;\n}\n\n.library-name[_ngcontent-%COMP%] {\n font-weight: var(--mj-font-semibold);\n color: var(--mj-text-primary);\n margin-bottom: 4px;\n}\n\n.library-items[_ngcontent-%COMP%] {\n color: var(--mj-text-muted);\n font-size: var(--mj-text-sm);\n font-family: 'Courier New', monospace;\n}\n\n.related-entities-grid[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 12px;\n}\n\n.related-entity-link[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 16px;\n background: var(--mj-bg-surface-sunken);\n border: 1px solid var(--mj-border-default);\n border-radius: var(--mj-radius-md);\n cursor: pointer;\n transition: all var(--mj-transition-base);\n}\n\n.related-entity-link[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-hover);\n border-color: var(--mj-brand-primary);\n}\n\n.related-entity-link[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 1.2em;\n color: var(--mj-text-muted);\n}\n\n.related-entity-link[_ngcontent-%COMP%] span[_ngcontent-%COMP%]:first-of-type {\n flex: 1;\n font-weight: var(--mj-font-medium);\n color: var(--mj-text-secondary);\n}\n\n.entity-count[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n font-size: var(--mj-text-sm);\n}\n\n\n\n.loading-state[_ngcontent-%COMP%] {\n text-align: center;\n padding: 60px;\n color: var(--mj-text-muted);\n}\n\n.loading-state[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 2em;\n margin-bottom: 12px;\n}\n\n.empty-state[_ngcontent-%COMP%] {\n text-align: center;\n padding: 60px;\n color: var(--mj-text-muted);\n}\n\n.empty-state.mini[_ngcontent-%COMP%] {\n padding: 20px;\n}\n\n.empty-state[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 3em;\n margin-bottom: 16px;\n opacity: 0.3;\n}\n\n.empty-state[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 1.1em;\n}\n\n.empty-hint[_ngcontent-%COMP%] {\n margin-top: 8px !important;\n font-size: var(--mj-text-sm) !important;\n opacity: 0.7;\n}\n\n.no-params[_ngcontent-%COMP%] {\n text-align: center;\n padding: 20px;\n color: var(--mj-text-muted);\n font-style: italic;\n}\n\n.no-params[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n margin: 0;\n}\n\n\n\n@media (max-width: 768px) {\n .action-hero-header[_ngcontent-%COMP%] {\n padding: 20px;\n }\n\n .action-identity[_ngcontent-%COMP%] {\n flex-direction: column;\n text-align: center;\n }\n\n .action-icon-wrapper[_ngcontent-%COMP%] {\n margin: 0 auto;\n }\n\n .action-title-row[_ngcontent-%COMP%] {\n justify-content: center;\n }\n\n .action-stats[_ngcontent-%COMP%] {\n justify-content: center;\n }\n\n .params-grid[_ngcontent-%COMP%] {\n grid-template-columns: 1fr;\n }\n}\n\n\n\n\n\n .k-expander {\n background: var(--mj-bg-surface-card) !important;\n border-color: var(--mj-border-default) !important;\n color: var(--mj-text-primary) !important;\n}\n\n .k-expander-header {\n background: var(--mj-bg-surface-elevated) !important;\n color: var(--mj-text-primary) !important;\n border-color: var(--mj-border-default) !important;\n}\n\n .k-expander-header:hover {\n background: var(--mj-bg-surface-hover) !important;\n}\n\n .k-expander-title {\n color: var(--mj-text-primary) !important;\n}\n\n .k-expander-indicator .k-icon, \n .k-expander-indicator .k-svg-icon {\n color: var(--mj-text-muted) !important;\n}\n\n .k-expander-content-wrapper {\n border-color: var(--mj-border-default) !important;\n}\n\n .k-expander-content {\n background: var(--mj-bg-surface-card) !important;\n border-color: var(--mj-border-default) !important;\n color: var(--mj-text-primary) !important;\n}"] }); }
|
|
1864
|
+
} }, dependencies: [i1.ɵNgNoValidate, i1.NgControlStatus, i1.NgControlStatusGroup, i1.NgModel, i1.NgForm, i2.ExpansionPanelComponent, i2.ExpansionPanelTitleDirective, i3.TextBoxComponent, i3.TextAreaComponent, i3.SwitchComponent, i4.DropDownListComponent, i5.ButtonComponent, i6.MjFormToolbarComponent, i7.CodeEditorComponent, i8.ActionTestHarnessDialogComponent, i9.DatePipe], styles: ["\n\n[_nghost-%COMP%] {\n display: block;\n height: 100%;\n}\n\n.record-form-container[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n height: 100%;\n min-height: 0;\n overflow: hidden;\n}\n\n.record-form[_ngcontent-%COMP%] {\n min-height: 0 !important;\n}\n\n\n\n.action-hero-header[_ngcontent-%COMP%] {\n background: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n padding: 32px;\n margin: -20px -20px 24px -20px;\n border-radius: 0 0 var(--mj-radius-lg) var(--mj-radius-lg);\n box-shadow: var(--mj-shadow-md);\n}\n\n.hero-content[_ngcontent-%COMP%] {\n max-width: 1400px;\n margin: 0 auto;\n}\n\n.action-identity[_ngcontent-%COMP%] {\n display: flex;\n align-items: flex-start;\n gap: 24px;\n margin-bottom: 24px;\n}\n\n.action-icon-wrapper[_ngcontent-%COMP%] {\n width: 80px;\n height: 80px;\n border-radius: var(--mj-radius-lg);\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n background: color-mix(in srgb, var(--mj-text-inverse) 20%, transparent);\n backdrop-filter: blur(10px);\n}\n\n.action-icon-wrapper[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: var(--mj-text-4xl);\n}\n\n.action-info[_ngcontent-%COMP%] {\n flex: 1;\n min-width: 0;\n}\n\n.action-title-row[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 16px;\n margin-bottom: 12px;\n flex-wrap: wrap;\n}\n\n.action-title[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 2em;\n font-weight: var(--mj-font-semibold);\n color: var(--mj-text-inverse);\n}\n\n.action-name-input[_ngcontent-%COMP%] {\n font-size: 1.8em;\n font-weight: var(--mj-font-semibold);\n background: color-mix(in srgb, var(--mj-text-inverse) 20%, transparent);\n border: 2px solid color-mix(in srgb, var(--mj-text-inverse) 30%, transparent);\n color: var(--mj-text-inverse);\n padding: 8px 16px;\n border-radius: var(--mj-radius-md);\n min-width: 400px;\n}\n\n.action-name-input[_ngcontent-%COMP%]::placeholder {\n color: color-mix(in srgb, var(--mj-text-inverse) 60%, transparent);\n}\n\n.action-badges[_ngcontent-%COMP%] {\n display: flex;\n gap: 8px;\n flex-wrap: wrap;\n}\n\n.status-badge[_ngcontent-%COMP%], .type-badge[_ngcontent-%COMP%], .approval-badge[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 6px 14px;\n border-radius: var(--mj-radius-full);\n font-size: var(--mj-text-sm);\n font-weight: var(--mj-font-medium);\n background: color-mix(in srgb, var(--mj-text-inverse) 20%, transparent);\n backdrop-filter: blur(10px);\n border: 1px solid color-mix(in srgb, var(--mj-text-inverse) 30%, transparent);\n}\n\n.action-category[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n color: color-mix(in srgb, var(--mj-text-inverse) 90%, transparent);\n font-size: 0.95em;\n cursor: pointer;\n transition: all var(--mj-transition-base);\n margin-bottom: 12px;\n}\n\n.action-category[_ngcontent-%COMP%]:hover {\n color: var(--mj-text-inverse);\n transform: translateX(4px);\n}\n\n.action-description[_ngcontent-%COMP%] {\n color: color-mix(in srgb, var(--mj-text-inverse) 90%, transparent);\n font-size: 1.05em;\n line-height: var(--mj-leading-relaxed);\n margin: 0;\n}\n\n.action-description-input[_ngcontent-%COMP%] {\n width: 100%;\n max-width: 600px;\n background: color-mix(in srgb, var(--mj-text-inverse) 20%, transparent);\n border: 2px solid color-mix(in srgb, var(--mj-text-inverse) 30%, transparent);\n color: var(--mj-text-inverse);\n border-radius: var(--mj-radius-md);\n}\n\n.action-description-input[_ngcontent-%COMP%]::placeholder {\n color: color-mix(in srgb, var(--mj-text-inverse) 60%, transparent);\n}\n\n\n\n.action-stats[_ngcontent-%COMP%] {\n display: flex;\n gap: 24px;\n margin-bottom: 24px;\n flex-wrap: wrap;\n}\n\n.stat-card[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--mj-text-inverse) 10%, transparent);\n backdrop-filter: blur(10px);\n border: 1px solid color-mix(in srgb, var(--mj-text-inverse) 20%, transparent);\n border-radius: var(--mj-radius-lg);\n padding: 16px 24px;\n display: flex;\n align-items: center;\n gap: 16px;\n min-width: 160px;\n}\n\n.stat-card[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: var(--mj-text-2xl);\n color: color-mix(in srgb, var(--mj-text-inverse) 80%, transparent);\n}\n\n.stat-content[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n}\n\n.stat-value[_ngcontent-%COMP%] {\n font-size: 1.4em;\n font-weight: var(--mj-font-bold);\n color: var(--mj-text-inverse);\n}\n\n.stat-label[_ngcontent-%COMP%] {\n font-size: var(--mj-text-sm);\n color: color-mix(in srgb, var(--mj-text-inverse) 70%, transparent);\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n\n\n.hero-actions[_ngcontent-%COMP%] {\n display: flex;\n gap: 12px;\n flex-wrap: wrap;\n}\n\n.hero-actions[_ngcontent-%COMP%] kendo-button[_ngcontent-%COMP%] {\n backdrop-filter: blur(10px);\n}\n\n\n\n.action-content[_ngcontent-%COMP%] {\n padding: 0 20px 20px;\n}\n\n.content-section[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface-card);\n border: 1px solid var(--mj-border-default);\n border-radius: var(--mj-radius-lg);\n margin-bottom: 20px;\n overflow: hidden;\n transition: all var(--mj-transition-base);\n}\n\n.content-section[_ngcontent-%COMP%]:hover {\n box-shadow: var(--mj-shadow-md);\n}\n\n.section-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 20px;\n background: var(--mj-bg-surface-elevated);\n cursor: pointer;\n user-select: none;\n transition: background var(--mj-transition-base);\n}\n\n.section-header[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-hover);\n}\n\n.section-header[_ngcontent-%COMP%] h2[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 1.3em;\n color: var(--mj-text-primary);\n flex: 1;\n}\n\n.section-header[_ngcontent-%COMP%] i[_ngcontent-%COMP%]:first-child {\n font-size: 1.2em;\n color: var(--mj-text-muted);\n}\n\n.section-count[_ngcontent-%COMP%] {\n background: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n padding: 2px 8px;\n border-radius: var(--mj-radius-full);\n font-size: var(--mj-text-sm);\n font-weight: var(--mj-font-medium);\n}\n\n.toggle-icon[_ngcontent-%COMP%] {\n color: var(--mj-text-muted);\n transition: transform 0.3s;\n}\n\n.toggle-icon.rotated[_ngcontent-%COMP%] {\n transform: rotate(-90deg);\n}\n\n.section-content[_ngcontent-%COMP%] {\n padding: 24px;\n animation: _ngcontent-%COMP%_slideDown 0.3s ease;\n}\n\n@keyframes _ngcontent-%COMP%_slideDown {\n from {\n opacity: 0;\n transform: translateY(-10px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n\n\n.overview-grid[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 20px;\n}\n\n.overview-field[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.overview-field[_ngcontent-%COMP%] label[_ngcontent-%COMP%] {\n font-weight: var(--mj-font-semibold);\n color: var(--mj-text-secondary);\n font-size: var(--mj-text-sm);\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.required[_ngcontent-%COMP%] {\n color: var(--mj-status-error);\n}\n\n.full-width[_ngcontent-%COMP%] {\n width: 100%;\n}\n\n.overview-display[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 24px;\n}\n\n.display-field[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.display-field[_ngcontent-%COMP%] label[_ngcontent-%COMP%] {\n font-size: var(--mj-text-sm);\n color: var(--mj-text-muted);\n font-weight: var(--mj-font-semibold);\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.display-value[_ngcontent-%COMP%] {\n font-size: 1.1em;\n color: var(--mj-text-primary);\n}\n\n.display-value.code[_ngcontent-%COMP%] {\n font-family: 'Courier New', monospace;\n background: var(--mj-bg-surface-sunken);\n padding: 4px 8px;\n border-radius: var(--mj-radius-sm);\n}\n\n.approval-date[_ngcontent-%COMP%] {\n color: var(--mj-text-muted);\n font-size: var(--mj-text-sm);\n margin-left: 8px;\n}\n\n\n\n.generation-panel[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface-sunken);\n border: 1px solid var(--mj-border-default);\n border-radius: var(--mj-radius-md);\n padding: 20px;\n margin-bottom: 24px;\n}\n\n.generation-panel[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] {\n margin: 0 0 16px 0;\n color: var(--mj-color-indigo-500);\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.prompt-section[_ngcontent-%COMP%], .comments-section[_ngcontent-%COMP%] {\n margin-bottom: 16px;\n}\n\n.prompt-section[_ngcontent-%COMP%] label[_ngcontent-%COMP%], .comments-section[_ngcontent-%COMP%] label[_ngcontent-%COMP%] {\n display: block;\n margin-bottom: 8px;\n font-weight: var(--mj-font-semibold);\n color: var(--mj-text-secondary);\n}\n\n.generation-controls[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n padding-top: 12px;\n border-top: 1px solid var(--mj-border-default);\n}\n\n.code-locked-badge[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 4px 10px;\n background: var(--mj-status-warning);\n color: var(--mj-color-warning-800);\n border-radius: var(--mj-radius-full);\n font-size: var(--mj-text-xs);\n font-weight: var(--mj-font-medium);\n}\n\n.code-editor-section[_ngcontent-%COMP%] {\n border: 1px solid var(--mj-border-default);\n border-radius: var(--mj-radius-md);\n overflow: hidden;\n}\n\n.code-toolbar[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 12px 16px;\n background: var(--mj-bg-surface-sunken);\n border-bottom: 1px solid var(--mj-border-default);\n}\n\n.code-toolbar[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 1.1em;\n color: var(--mj-text-secondary);\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.code-actions[_ngcontent-%COMP%] {\n display: flex;\n gap: 8px;\n}\n\n.code-comments[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--mj-status-info) 10%, var(--mj-bg-surface));\n border: 1px solid color-mix(in srgb, var(--mj-status-info) 30%, transparent);\n border-radius: var(--mj-radius-md);\n padding: 16px;\n margin-top: 16px;\n}\n\n.code-comments[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] {\n margin: 0 0 8px 0;\n color: var(--mj-status-info);\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.code-comments[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n margin: 0;\n color: var(--mj-text-secondary);\n line-height: var(--mj-leading-relaxed);\n}\n\n.approval-comments[_ngcontent-%COMP%] {\n margin-top: 16px;\n}\n\n.approval-comments[_ngcontent-%COMP%] label[_ngcontent-%COMP%] {\n display: block;\n margin-bottom: 8px;\n font-weight: var(--mj-font-semibold);\n color: var(--mj-status-error);\n}\n\n\n\n.params-section[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface-sunken);\n border-radius: var(--mj-radius-lg);\n padding: 20px;\n}\n\n.params-section.params-section-compact[_ngcontent-%COMP%] {\n padding: 12px 20px;\n}\n\n.params-section-compact[_ngcontent-%COMP%] .empty-state[_ngcontent-%COMP%] {\n padding: 12px !important;\n}\n\n.params-header[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 16px;\n}\n\n.params-header[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] {\n margin: 0;\n color: var(--mj-text-secondary);\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.params-grid[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n gap: 16px;\n}\n\n.param-card[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface);\n border: 2px solid var(--mj-border-default);\n border-radius: var(--mj-radius-md);\n padding: 16px;\n transition: all var(--mj-transition-base);\n}\n\n.param-card[_ngcontent-%COMP%]:hover {\n border-color: var(--mj-brand-primary);\n box-shadow: var(--mj-shadow-sm);\n}\n\n.param-card.required[_ngcontent-%COMP%] {\n border-color: var(--mj-status-warning);\n}\n\n.param-card.clickable[_ngcontent-%COMP%] {\n cursor: pointer;\n}\n\n.param-card.clickable[_ngcontent-%COMP%]:hover {\n background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n border-color: var(--mj-brand-primary);\n transform: translateY(-1px);\n}\n\n.param-header[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 8px;\n}\n\n.param-name[_ngcontent-%COMP%] {\n font-weight: var(--mj-font-semibold);\n color: var(--mj-text-primary);\n}\n\n.param-badges[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.param-edit-btn[_ngcontent-%COMP%], \n.param-delete-btn[_ngcontent-%COMP%] {\n background: none;\n border: none;\n padding: 4px 8px;\n cursor: pointer;\n color: var(--mj-text-muted);\n border-radius: var(--mj-radius-sm);\n transition: all var(--mj-transition-base);\n}\n\n.param-edit-btn[_ngcontent-%COMP%]:hover {\n background: color-mix(in srgb, var(--mj-status-info) 10%, var(--mj-bg-surface));\n color: var(--mj-status-info);\n}\n\n.param-delete-btn[_ngcontent-%COMP%]:hover {\n background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n color: var(--mj-status-error);\n}\n\n.param-details[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.required-badge[_ngcontent-%COMP%] {\n background: var(--mj-status-warning);\n color: var(--mj-color-warning-800);\n padding: 2px 6px;\n border-radius: var(--mj-radius-sm);\n font-size: var(--mj-text-xs);\n font-weight: var(--mj-font-medium);\n}\n\n.array-badge[_ngcontent-%COMP%] {\n background: var(--mj-color-indigo-500);\n color: var(--mj-text-inverse);\n padding: 2px 6px;\n border-radius: var(--mj-radius-sm);\n font-size: var(--mj-text-xs);\n font-weight: var(--mj-font-medium);\n}\n\n.param-type[_ngcontent-%COMP%] {\n color: var(--mj-text-muted);\n font-size: var(--mj-text-sm);\n margin-bottom: 8px;\n}\n\n.param-description[_ngcontent-%COMP%] {\n color: var(--mj-text-secondary);\n font-size: var(--mj-text-sm);\n line-height: 1.4;\n margin-bottom: 8px;\n}\n\n.param-default[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-top: 8px;\n padding-top: 8px;\n border-top: 1px solid var(--mj-border-default);\n}\n\n.default-label[_ngcontent-%COMP%] {\n color: var(--mj-text-muted);\n font-size: var(--mj-text-sm);\n}\n\n.param-default[_ngcontent-%COMP%] code[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface-sunken);\n padding: 2px 6px;\n border-radius: var(--mj-radius-sm);\n font-family: 'Courier New', monospace;\n color: var(--mj-color-error-400);\n}\n\n\n\n\n.result-codes-grid[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n gap: 16px;\n}\n\n.result-code-card[_ngcontent-%COMP%] {\n display: flex;\n align-items: flex-start;\n gap: 16px;\n padding: 16px;\n border: 2px solid var(--mj-border-default);\n border-radius: var(--mj-radius-md);\n background: var(--mj-bg-surface);\n transition: all var(--mj-transition-base);\n position: relative;\n}\n\n.result-code-card.clickable[_ngcontent-%COMP%] {\n cursor: pointer;\n}\n\n.result-code-card[_ngcontent-%COMP%]:hover {\n transform: translateY(-2px);\n box-shadow: var(--mj-shadow-md);\n}\n\n.result-code-card.success[_ngcontent-%COMP%] {\n border-color: var(--mj-status-success);\n background: color-mix(in srgb, var(--mj-status-success) 10%, var(--mj-bg-surface));\n}\n\n.result-code-card.failure[_ngcontent-%COMP%] {\n border-color: var(--mj-status-error);\n background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n}\n\n.result-actions[_ngcontent-%COMP%] {\n position: absolute;\n top: 8px;\n right: 8px;\n display: flex;\n gap: 4px;\n opacity: 0;\n transition: opacity var(--mj-transition-base);\n}\n\n.result-code-card[_ngcontent-%COMP%]:hover .result-actions[_ngcontent-%COMP%] {\n opacity: 1;\n}\n\n.result-edit-btn[_ngcontent-%COMP%], \n.result-delete-btn[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface);\n border: 1px solid var(--mj-border-default);\n border-radius: var(--mj-radius-sm);\n padding: 4px 8px;\n cursor: pointer;\n transition: all var(--mj-transition-base);\n font-size: var(--mj-text-sm);\n}\n\n.result-edit-btn[_ngcontent-%COMP%]:hover {\n background: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n border-color: var(--mj-brand-primary);\n}\n\n.result-delete-btn[_ngcontent-%COMP%]:hover {\n background: var(--mj-status-error);\n color: var(--mj-text-inverse);\n border-color: var(--mj-status-error);\n}\n\n.result-icon[_ngcontent-%COMP%] {\n font-size: 1.5em;\n flex-shrink: 0;\n}\n\n.result-code-card.success[_ngcontent-%COMP%] .result-icon[_ngcontent-%COMP%] {\n color: var(--mj-status-success);\n}\n\n.result-code-card.failure[_ngcontent-%COMP%] .result-icon[_ngcontent-%COMP%] {\n color: var(--mj-status-error);\n}\n\n.result-content[_ngcontent-%COMP%] {\n flex: 1;\n min-width: 0;\n}\n\n.result-code[_ngcontent-%COMP%] {\n font-weight: var(--mj-font-semibold);\n color: var(--mj-text-primary);\n margin-bottom: 4px;\n font-family: 'Courier New', monospace;\n}\n\n.result-description[_ngcontent-%COMP%] {\n color: var(--mj-text-secondary);\n font-size: var(--mj-text-sm);\n line-height: 1.4;\n}\n\n\n\n.execution-stats-row[_ngcontent-%COMP%] {\n display: flex;\n gap: 20px;\n margin-bottom: 32px;\n flex-wrap: wrap;\n}\n\n.stat-box[_ngcontent-%COMP%] {\n flex: 1;\n min-width: 200px;\n background: var(--mj-bg-surface-sunken);\n border: 1px solid var(--mj-border-default);\n border-radius: var(--mj-radius-md);\n padding: 20px;\n display: flex;\n align-items: center;\n gap: 16px;\n}\n\n.stat-box[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 2em;\n color: var(--mj-text-muted);\n}\n\n.stat-info[_ngcontent-%COMP%] {\n flex: 1;\n}\n\n.executions-table[_ngcontent-%COMP%] {\n overflow-x: auto;\n border: 1px solid var(--mj-border-default);\n border-radius: var(--mj-radius-md);\n}\n\n.executions-table[_ngcontent-%COMP%] table[_ngcontent-%COMP%] {\n width: 100%;\n border-collapse: collapse;\n}\n\n.executions-table[_ngcontent-%COMP%] th[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface-sunken);\n padding: 12px;\n text-align: left;\n font-weight: var(--mj-font-semibold);\n color: var(--mj-text-secondary);\n border-bottom: 2px solid var(--mj-border-default);\n}\n\n.executions-table[_ngcontent-%COMP%] td[_ngcontent-%COMP%] {\n padding: 12px;\n border-bottom: 1px solid var(--mj-border-default);\n color: var(--mj-text-primary);\n}\n\n.execution-row[_ngcontent-%COMP%] {\n transition: background var(--mj-transition-base);\n}\n\n.execution-row[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-hover);\n}\n\n.execution-row.success[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--mj-status-success) 5%, transparent);\n}\n\n.running[_ngcontent-%COMP%] {\n color: var(--mj-status-warning);\n font-style: italic;\n}\n\n.result-code[_ngcontent-%COMP%] {\n display: inline-block;\n padding: 4px 8px;\n border-radius: var(--mj-radius-sm);\n font-size: var(--mj-text-sm);\n font-weight: var(--mj-font-medium);\n font-family: 'Courier New', monospace;\n}\n\n.result-code.success[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n color: var(--mj-status-success);\n}\n\n.result-code.failure[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n color: var(--mj-status-error);\n}\n\n\n\n.config-subsection[_ngcontent-%COMP%] {\n margin-bottom: 32px;\n}\n\n.config-subsection[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] {\n margin: 0 0 16px 0;\n color: var(--mj-text-secondary);\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.library-cards[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 12px;\n}\n\n.library-card[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 16px;\n padding: 16px;\n background: var(--mj-bg-surface-sunken);\n border: 1px solid var(--mj-border-default);\n border-radius: var(--mj-radius-md);\n cursor: pointer;\n transition: all var(--mj-transition-base);\n}\n\n.library-card[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-hover);\n transform: translateX(4px);\n}\n\n.library-card[_ngcontent-%COMP%] i[_ngcontent-%COMP%]:first-child {\n font-size: 1.5em;\n color: var(--mj-text-muted);\n}\n\n.library-info[_ngcontent-%COMP%] {\n flex: 1;\n min-width: 0;\n}\n\n.library-name[_ngcontent-%COMP%] {\n font-weight: var(--mj-font-semibold);\n color: var(--mj-text-primary);\n margin-bottom: 4px;\n}\n\n.library-items[_ngcontent-%COMP%] {\n color: var(--mj-text-muted);\n font-size: var(--mj-text-sm);\n font-family: 'Courier New', monospace;\n}\n\n.related-entities-grid[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 12px;\n}\n\n.related-entity-link[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 16px;\n background: var(--mj-bg-surface-sunken);\n border: 1px solid var(--mj-border-default);\n border-radius: var(--mj-radius-md);\n cursor: pointer;\n transition: all var(--mj-transition-base);\n}\n\n.related-entity-link[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-hover);\n border-color: var(--mj-brand-primary);\n}\n\n.related-entity-link[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 1.2em;\n color: var(--mj-text-muted);\n}\n\n.related-entity-link[_ngcontent-%COMP%] span[_ngcontent-%COMP%]:first-of-type {\n flex: 1;\n font-weight: var(--mj-font-medium);\n color: var(--mj-text-secondary);\n}\n\n.entity-count[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n font-size: var(--mj-text-sm);\n}\n\n\n\n.loading-state[_ngcontent-%COMP%] {\n text-align: center;\n padding: 60px;\n color: var(--mj-text-muted);\n}\n\n.loading-state[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 2em;\n margin-bottom: 12px;\n}\n\n.empty-state[_ngcontent-%COMP%] {\n text-align: center;\n padding: 60px;\n color: var(--mj-text-muted);\n}\n\n.empty-state.mini[_ngcontent-%COMP%] {\n padding: 20px;\n}\n\n.empty-state[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 3em;\n margin-bottom: 16px;\n opacity: 0.3;\n}\n\n.empty-state[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 1.1em;\n}\n\n.empty-hint[_ngcontent-%COMP%] {\n margin-top: 8px !important;\n font-size: var(--mj-text-sm) !important;\n opacity: 0.7;\n}\n\n.no-params[_ngcontent-%COMP%] {\n text-align: center;\n padding: 20px;\n color: var(--mj-text-muted);\n font-style: italic;\n}\n\n.no-params[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n margin: 0;\n}\n\n\n\n@media (max-width: 768px) {\n .action-hero-header[_ngcontent-%COMP%] {\n padding: 20px;\n }\n\n .action-identity[_ngcontent-%COMP%] {\n flex-direction: column;\n text-align: center;\n }\n\n .action-icon-wrapper[_ngcontent-%COMP%] {\n margin: 0 auto;\n }\n\n .action-title-row[_ngcontent-%COMP%] {\n justify-content: center;\n }\n\n .action-stats[_ngcontent-%COMP%] {\n justify-content: center;\n }\n\n .params-grid[_ngcontent-%COMP%] {\n grid-template-columns: 1fr;\n }\n}\n\n\n\n\n\n .k-expander {\n background: var(--mj-bg-surface-card) !important;\n border-color: var(--mj-border-default) !important;\n color: var(--mj-text-primary) !important;\n}\n\n .k-expander-header {\n background: var(--mj-bg-surface-elevated) !important;\n color: var(--mj-text-primary) !important;\n border-color: var(--mj-border-default) !important;\n}\n\n .k-expander-header:hover {\n background: var(--mj-bg-surface-hover) !important;\n}\n\n .k-expander-title {\n color: var(--mj-text-primary) !important;\n}\n\n .k-expander-indicator .k-icon, \n .k-expander-indicator .k-svg-icon {\n color: var(--mj-text-muted) !important;\n}\n\n .k-expander-content-wrapper {\n border-color: var(--mj-border-default) !important;\n}\n\n .k-expander-content {\n background: var(--mj-bg-surface-card) !important;\n border-color: var(--mj-border-default) !important;\n color: var(--mj-text-primary) !important;\n}"] }); }
|
|
1865
1865
|
};
|
|
1866
1866
|
MJActionFormComponentExtended = __decorate([
|
|
1867
1867
|
RegisterClass(BaseFormComponent, 'MJ: Actions')
|
|
@@ -1869,7 +1869,7 @@ MJActionFormComponentExtended = __decorate([
|
|
|
1869
1869
|
export { MJActionFormComponentExtended };
|
|
1870
1870
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MJActionFormComponentExtended, [{
|
|
1871
1871
|
type: Component,
|
|
1872
|
-
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: var(--mj-bg-surface-card); border-bottom: 2px solid var(--mj-border-default);\">\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: var(--mj-text-secondary); font-weight: 600; flex: 1;\">{{ record.Name || 'Untitled Action' }}</h4>\n <button kendoButton\n [themeColor]=\"record.Status === 'Active' ? 'success' : record.Status === 'Pending' ? 'warning' : 'error'\"\n size=\"small\"\n style=\"pointer-events: none; cursor: default;\">\n {{ record.Status }}\n </button>\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: var(--mj-text-secondary); 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: var(--mj-text-secondary); font-size: 0.9em;\">\n Type <span style=\"color: var(--mj-status-error);\">*</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: var(--mj-text-secondary); font-size: 0.9em;\">\n Category <span style=\"color: var(--mj-status-error);\">*</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: var(--mj-text-muted); 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: var(--mj-text-muted);\"></i>\n <span style=\"color: var(--mj-text-muted);\">Category:</span>\n <span style=\"color: var(--mj-text-secondary); 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: var(--mj-text-muted);\"></i>\n <span style=\"color: var(--mj-text-muted);\">Type:</span>\n <span style=\"color: var(--mj-text-secondary); 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: var(--mj-text-muted);\">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: var(--mj-text-muted);\"></i>\n <span style=\"color: var(--mj-text-secondary); 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: var(--mj-status-error); 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: var(--mj-bg-surface-card); border-top: 2px solid var(--mj-border-default); 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: var(--mj-text-muted);\"></i>\n Parameters\n @if (actionParams.length > 0) {\n <span style=\"background: var(--mj-status-info); color: var(--mj-text-inverse); 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: var(--mj-text-muted); opacity: 0.3;\"></i>\n <p style=\"margin: 12px 0 0 0; color: var(--mj-text-muted);\">No parameters defined</p>\n @if (EditMode && record.IsSaved) {\n <p style=\"margin: 8px 0 0 0; font-size: 0.85em; color: var(--mj-text-muted);\">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: var(--mj-text-muted); opacity: 0.3;\"></i>\n <p style=\"margin: 12px 0 0 0; color: var(--mj-text-muted);\">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: var(--mj-text-muted); opacity: 0.3;\"></i>\n <p style=\"margin: 12px 0 0 0; color: var(--mj-text-muted);\">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: var(--mj-text-muted);\"></i>\n Code & Generation\n @if (record.CodeLocked) {\n <span style=\"background: var(--mj-status-warning); color: var(--mj-color-warning-800); 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: var(--mj-text-muted);\"></i>\n Result Codes\n @if (resultCodes.length > 0) {\n <span style=\"background: var(--mj-status-success); color: var(--mj-text-inverse); 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: var(--mj-text-muted); opacity: 0.3;\"></i>\n <p style=\"margin: 12px 0 0 0; color: var(--mj-text-muted);\">No result codes defined</p>\n @if (EditMode && record.IsSaved) {\n <p style=\"margin: 8px 0 0 0; font-size: 0.85em; color: var(--mj-text-muted);\">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: var(--mj-text-muted);\"></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: var(--mj-text-muted); opacity: 0.3;\"></i>\n <p style=\"margin: 12px 0 0 0; color: var(--mj-text-muted);\">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: var(--mj-text-primary);\">Avg Duration</div>\n <div class=\"stat-value\" style=\"color: var(--mj-text-primary);\">{{ 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: var(--mj-text-primary);\">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: var(--mj-text-primary);\">Total Runs</div>\n <div class=\"stat-value\" style=\"color: var(--mj-text-primary);\">{{ 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: var(--mj-text-muted);\"></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: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n padding: 32px;\n margin: -20px -20px 24px -20px;\n border-radius: 0 0 var(--mj-radius-lg) var(--mj-radius-lg);\n box-shadow: var(--mj-shadow-md);\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: var(--mj-radius-lg);\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n background: color-mix(in srgb, var(--mj-text-inverse) 20%, transparent);\n backdrop-filter: blur(10px);\n}\n\n.action-icon-wrapper i {\n font-size: var(--mj-text-4xl);\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: var(--mj-font-semibold);\n color: var(--mj-text-inverse);\n}\n\n.action-name-input {\n font-size: 1.8em;\n font-weight: var(--mj-font-semibold);\n background: color-mix(in srgb, var(--mj-text-inverse) 20%, transparent);\n border: 2px solid color-mix(in srgb, var(--mj-text-inverse) 30%, transparent);\n color: var(--mj-text-inverse);\n padding: 8px 16px;\n border-radius: var(--mj-radius-md);\n min-width: 400px;\n}\n\n.action-name-input::placeholder {\n color: color-mix(in srgb, var(--mj-text-inverse) 60%, transparent);\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: var(--mj-radius-full);\n font-size: var(--mj-text-sm);\n font-weight: var(--mj-font-medium);\n background: color-mix(in srgb, var(--mj-text-inverse) 20%, transparent);\n backdrop-filter: blur(10px);\n border: 1px solid color-mix(in srgb, var(--mj-text-inverse) 30%, transparent);\n}\n\n.action-category {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n color: color-mix(in srgb, var(--mj-text-inverse) 90%, transparent);\n font-size: 0.95em;\n cursor: pointer;\n transition: all var(--mj-transition-base);\n margin-bottom: 12px;\n}\n\n.action-category:hover {\n color: var(--mj-text-inverse);\n transform: translateX(4px);\n}\n\n.action-description {\n color: color-mix(in srgb, var(--mj-text-inverse) 90%, transparent);\n font-size: 1.05em;\n line-height: var(--mj-leading-relaxed);\n margin: 0;\n}\n\n.action-description-input {\n width: 100%;\n max-width: 600px;\n background: color-mix(in srgb, var(--mj-text-inverse) 20%, transparent);\n border: 2px solid color-mix(in srgb, var(--mj-text-inverse) 30%, transparent);\n color: var(--mj-text-inverse);\n border-radius: var(--mj-radius-md);\n}\n\n.action-description-input::placeholder {\n color: color-mix(in srgb, var(--mj-text-inverse) 60%, transparent);\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: color-mix(in srgb, var(--mj-text-inverse) 10%, transparent);\n backdrop-filter: blur(10px);\n border: 1px solid color-mix(in srgb, var(--mj-text-inverse) 20%, transparent);\n border-radius: var(--mj-radius-lg);\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: var(--mj-text-2xl);\n color: color-mix(in srgb, var(--mj-text-inverse) 80%, transparent);\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: var(--mj-font-bold);\n color: var(--mj-text-inverse);\n}\n\n.stat-label {\n font-size: var(--mj-text-sm);\n color: color-mix(in srgb, var(--mj-text-inverse) 70%, transparent);\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: var(--mj-bg-surface-card);\n border: 1px solid var(--mj-border-default);\n border-radius: var(--mj-radius-lg);\n margin-bottom: 20px;\n overflow: hidden;\n transition: all var(--mj-transition-base);\n}\n\n.content-section:hover {\n box-shadow: var(--mj-shadow-md);\n}\n\n.section-header {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 20px;\n background: var(--mj-bg-surface-elevated);\n cursor: pointer;\n user-select: none;\n transition: background var(--mj-transition-base);\n}\n\n.section-header:hover {\n background: var(--mj-bg-surface-hover);\n}\n\n.section-header h2 {\n margin: 0;\n font-size: 1.3em;\n color: var(--mj-text-primary);\n flex: 1;\n}\n\n.section-header i:first-child {\n font-size: 1.2em;\n color: var(--mj-text-muted);\n}\n\n.section-count {\n background: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n padding: 2px 8px;\n border-radius: var(--mj-radius-full);\n font-size: var(--mj-text-sm);\n font-weight: var(--mj-font-medium);\n}\n\n.toggle-icon {\n color: var(--mj-text-muted);\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: var(--mj-font-semibold);\n color: var(--mj-text-secondary);\n font-size: var(--mj-text-sm);\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.required {\n color: var(--mj-status-error);\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: var(--mj-text-sm);\n color: var(--mj-text-muted);\n font-weight: var(--mj-font-semibold);\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.display-value {\n font-size: 1.1em;\n color: var(--mj-text-primary);\n}\n\n.display-value.code {\n font-family: 'Courier New', monospace;\n background: var(--mj-bg-surface-sunken);\n padding: 4px 8px;\n border-radius: var(--mj-radius-sm);\n}\n\n.approval-date {\n color: var(--mj-text-muted);\n font-size: var(--mj-text-sm);\n margin-left: 8px;\n}\n\n/* Code Section */\n.generation-panel {\n background: var(--mj-bg-surface-sunken);\n border: 1px solid var(--mj-border-default);\n border-radius: var(--mj-radius-md);\n padding: 20px;\n margin-bottom: 24px;\n}\n\n.generation-panel h3 {\n margin: 0 0 16px 0;\n color: var(--mj-color-indigo-500);\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: var(--mj-font-semibold);\n color: var(--mj-text-secondary);\n}\n\n.generation-controls {\n display: flex;\n align-items: center;\n gap: 12px;\n padding-top: 12px;\n border-top: 1px solid var(--mj-border-default);\n}\n\n.code-locked-badge {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 4px 10px;\n background: var(--mj-status-warning);\n color: var(--mj-color-warning-800);\n border-radius: var(--mj-radius-full);\n font-size: var(--mj-text-xs);\n font-weight: var(--mj-font-medium);\n}\n\n.code-editor-section {\n border: 1px solid var(--mj-border-default);\n border-radius: var(--mj-radius-md);\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: var(--mj-bg-surface-sunken);\n border-bottom: 1px solid var(--mj-border-default);\n}\n\n.code-toolbar h3 {\n margin: 0;\n font-size: 1.1em;\n color: var(--mj-text-secondary);\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: color-mix(in srgb, var(--mj-status-info) 10%, var(--mj-bg-surface));\n border: 1px solid color-mix(in srgb, var(--mj-status-info) 30%, transparent);\n border-radius: var(--mj-radius-md);\n padding: 16px;\n margin-top: 16px;\n}\n\n.code-comments h4 {\n margin: 0 0 8px 0;\n color: var(--mj-status-info);\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.code-comments p {\n margin: 0;\n color: var(--mj-text-secondary);\n line-height: var(--mj-leading-relaxed);\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: var(--mj-font-semibold);\n color: var(--mj-status-error);\n}\n\n/* Parameters Section */\n.params-section {\n background: var(--mj-bg-surface-sunken);\n border-radius: var(--mj-radius-lg);\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: var(--mj-text-secondary);\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: var(--mj-bg-surface);\n border: 2px solid var(--mj-border-default);\n border-radius: var(--mj-radius-md);\n padding: 16px;\n transition: all var(--mj-transition-base);\n}\n\n.param-card:hover {\n border-color: var(--mj-brand-primary);\n box-shadow: var(--mj-shadow-sm);\n}\n\n.param-card.required {\n border-color: var(--mj-status-warning);\n}\n\n.param-card.clickable {\n cursor: pointer;\n}\n\n.param-card.clickable:hover {\n background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n border-color: var(--mj-brand-primary);\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: var(--mj-font-semibold);\n color: var(--mj-text-primary);\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: var(--mj-text-muted);\n border-radius: var(--mj-radius-sm);\n transition: all var(--mj-transition-base);\n}\n\n.param-edit-btn:hover {\n background: color-mix(in srgb, var(--mj-status-info) 10%, var(--mj-bg-surface));\n color: var(--mj-status-info);\n}\n\n.param-delete-btn:hover {\n background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n color: var(--mj-status-error);\n}\n\n.param-details {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.required-badge {\n background: var(--mj-status-warning);\n color: var(--mj-color-warning-800);\n padding: 2px 6px;\n border-radius: var(--mj-radius-sm);\n font-size: var(--mj-text-xs);\n font-weight: var(--mj-font-medium);\n}\n\n.array-badge {\n background: var(--mj-color-indigo-500);\n color: var(--mj-text-inverse);\n padding: 2px 6px;\n border-radius: var(--mj-radius-sm);\n font-size: var(--mj-text-xs);\n font-weight: var(--mj-font-medium);\n}\n\n.param-type {\n color: var(--mj-text-muted);\n font-size: var(--mj-text-sm);\n margin-bottom: 8px;\n}\n\n.param-description {\n color: var(--mj-text-secondary);\n font-size: var(--mj-text-sm);\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 var(--mj-border-default);\n}\n\n.default-label {\n color: var(--mj-text-muted);\n font-size: var(--mj-text-sm);\n}\n\n.param-default code {\n background: var(--mj-bg-surface-sunken);\n padding: 2px 6px;\n border-radius: var(--mj-radius-sm);\n font-family: 'Courier New', monospace;\n color: var(--mj-color-error-400);\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 var(--mj-border-default);\n border-radius: var(--mj-radius-md);\n background: var(--mj-bg-surface);\n transition: all var(--mj-transition-base);\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: var(--mj-shadow-md);\n}\n\n.result-code-card.success {\n border-color: var(--mj-status-success);\n background: color-mix(in srgb, var(--mj-status-success) 10%, var(--mj-bg-surface));\n}\n\n.result-code-card.failure {\n border-color: var(--mj-status-error);\n background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\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 var(--mj-transition-base);\n}\n\n.result-code-card:hover .result-actions {\n opacity: 1;\n}\n\n.result-edit-btn,\n.result-delete-btn {\n background: var(--mj-bg-surface);\n border: 1px solid var(--mj-border-default);\n border-radius: var(--mj-radius-sm);\n padding: 4px 8px;\n cursor: pointer;\n transition: all var(--mj-transition-base);\n font-size: var(--mj-text-sm);\n}\n\n.result-edit-btn:hover {\n background: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n border-color: var(--mj-brand-primary);\n}\n\n.result-delete-btn:hover {\n background: var(--mj-status-error);\n color: var(--mj-text-inverse);\n border-color: var(--mj-status-error);\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: var(--mj-status-success);\n}\n\n.result-code-card.failure .result-icon {\n color: var(--mj-status-error);\n}\n\n.result-content {\n flex: 1;\n min-width: 0;\n}\n\n.result-code {\n font-weight: var(--mj-font-semibold);\n color: var(--mj-text-primary);\n margin-bottom: 4px;\n font-family: 'Courier New', monospace;\n}\n\n.result-description {\n color: var(--mj-text-secondary);\n font-size: var(--mj-text-sm);\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: var(--mj-bg-surface-sunken);\n border: 1px solid var(--mj-border-default);\n border-radius: var(--mj-radius-md);\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: var(--mj-text-muted);\n}\n\n.stat-info {\n flex: 1;\n}\n\n.executions-table {\n overflow-x: auto;\n border: 1px solid var(--mj-border-default);\n border-radius: var(--mj-radius-md);\n}\n\n.executions-table table {\n width: 100%;\n border-collapse: collapse;\n}\n\n.executions-table th {\n background: var(--mj-bg-surface-sunken);\n padding: 12px;\n text-align: left;\n font-weight: var(--mj-font-semibold);\n color: var(--mj-text-secondary);\n border-bottom: 2px solid var(--mj-border-default);\n}\n\n.executions-table td {\n padding: 12px;\n border-bottom: 1px solid var(--mj-border-default);\n color: var(--mj-text-primary);\n}\n\n.execution-row {\n transition: background var(--mj-transition-base);\n}\n\n.execution-row:hover {\n background: var(--mj-bg-surface-hover);\n}\n\n.execution-row.success {\n background: color-mix(in srgb, var(--mj-status-success) 5%, transparent);\n}\n\n.running {\n color: var(--mj-status-warning);\n font-style: italic;\n}\n\n.result-code {\n display: inline-block;\n padding: 4px 8px;\n border-radius: var(--mj-radius-sm);\n font-size: var(--mj-text-sm);\n font-weight: var(--mj-font-medium);\n font-family: 'Courier New', monospace;\n}\n\n.result-code.success {\n background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n color: var(--mj-status-success);\n}\n\n.result-code.failure {\n background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n color: var(--mj-status-error);\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: var(--mj-text-secondary);\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: var(--mj-bg-surface-sunken);\n border: 1px solid var(--mj-border-default);\n border-radius: var(--mj-radius-md);\n cursor: pointer;\n transition: all var(--mj-transition-base);\n}\n\n.library-card:hover {\n background: var(--mj-bg-surface-hover);\n transform: translateX(4px);\n}\n\n.library-card i:first-child {\n font-size: 1.5em;\n color: var(--mj-text-muted);\n}\n\n.library-info {\n flex: 1;\n min-width: 0;\n}\n\n.library-name {\n font-weight: var(--mj-font-semibold);\n color: var(--mj-text-primary);\n margin-bottom: 4px;\n}\n\n.library-items {\n color: var(--mj-text-muted);\n font-size: var(--mj-text-sm);\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: var(--mj-bg-surface-sunken);\n border: 1px solid var(--mj-border-default);\n border-radius: var(--mj-radius-md);\n cursor: pointer;\n transition: all var(--mj-transition-base);\n}\n\n.related-entity-link:hover {\n background: var(--mj-bg-surface-hover);\n border-color: var(--mj-brand-primary);\n}\n\n.related-entity-link i {\n font-size: 1.2em;\n color: var(--mj-text-muted);\n}\n\n.related-entity-link span:first-of-type {\n flex: 1;\n font-weight: var(--mj-font-medium);\n color: var(--mj-text-secondary);\n}\n\n.entity-count {\n color: var(--mj-brand-primary);\n font-size: var(--mj-text-sm);\n}\n\n/* Common States */\n.loading-state {\n text-align: center;\n padding: 60px;\n color: var(--mj-text-muted);\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: var(--mj-text-muted);\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: var(--mj-text-sm) !important;\n opacity: 0.7;\n}\n\n.no-params {\n text-align: center;\n padding: 20px;\n color: var(--mj-text-muted);\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}\n\n/* ============================================\n KENDO EXPANSION PANEL OVERRIDES\n ============================================ */\n::ng-deep .k-expander {\n background: var(--mj-bg-surface-card) !important;\n border-color: var(--mj-border-default) !important;\n color: var(--mj-text-primary) !important;\n}\n\n::ng-deep .k-expander-header {\n background: var(--mj-bg-surface-elevated) !important;\n color: var(--mj-text-primary) !important;\n border-color: var(--mj-border-default) !important;\n}\n\n::ng-deep .k-expander-header:hover {\n background: var(--mj-bg-surface-hover) !important;\n}\n\n::ng-deep .k-expander-title {\n color: var(--mj-text-primary) !important;\n}\n\n::ng-deep .k-expander-indicator .k-icon,\n::ng-deep .k-expander-indicator .k-svg-icon {\n color: var(--mj-text-muted) !important;\n}\n\n::ng-deep .k-expander-content-wrapper {\n border-color: var(--mj-border-default) !important;\n}\n\n::ng-deep .k-expander-content {\n background: var(--mj-bg-surface-card) !important;\n border-color: var(--mj-border-default) !important;\n color: var(--mj-text-primary) !important;\n}\n"] }]
|
|
1872
|
+
args: [{ standalone: false, selector: 'mj-action-form', template: "<div class=\"record-form-container\" style=\"height: 100%; display: flex; flex-direction: column;\">\n @if (record) {\n <form class=\"record-form\" #form=\"ngForm\" style=\"display: flex; flex-direction: column; height: 100%; overflow: hidden;\">\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; flex: 1; min-height: 0; overflow-y: auto;\">\n \n <!-- Header Section -->\n <div class=\"action-header\" style=\"flex-shrink: 0; padding: 20px; background: var(--mj-bg-surface-card); border-bottom: 2px solid var(--mj-border-default);\">\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: var(--mj-text-secondary); font-weight: 600; flex: 1;\">{{ record.Name || 'Untitled Action' }}</h4>\n <button kendoButton\n [themeColor]=\"record.Status === 'Active' ? 'success' : record.Status === 'Pending' ? 'warning' : 'error'\"\n size=\"small\"\n style=\"pointer-events: none; cursor: default;\">\n {{ record.Status }}\n </button>\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: var(--mj-text-secondary); 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: var(--mj-text-secondary); font-size: 0.9em;\">\n Type <span style=\"color: var(--mj-status-error);\">*</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: var(--mj-text-secondary); font-size: 0.9em;\">\n Category <span style=\"color: var(--mj-status-error);\">*</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: var(--mj-text-muted); 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: var(--mj-text-muted);\"></i>\n <span style=\"color: var(--mj-text-muted);\">Category:</span>\n <span style=\"color: var(--mj-text-secondary); 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: var(--mj-text-muted);\"></i>\n <span style=\"color: var(--mj-text-muted);\">Type:</span>\n <span style=\"color: var(--mj-text-secondary); 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: var(--mj-text-muted);\">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: var(--mj-text-muted);\"></i>\n <span style=\"color: var(--mj-text-secondary); 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: var(--mj-status-error); 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: var(--mj-bg-surface-card); border-top: 2px solid var(--mj-border-default); 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: var(--mj-text-muted);\"></i>\n Parameters\n @if (actionParams.length > 0) {\n <span style=\"background: var(--mj-status-info); color: var(--mj-text-inverse); 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: var(--mj-text-muted); opacity: 0.3;\"></i>\n <p style=\"margin: 12px 0 0 0; color: var(--mj-text-muted);\">No parameters defined</p>\n @if (EditMode && record.IsSaved) {\n <p style=\"margin: 8px 0 0 0; font-size: 0.85em; color: var(--mj-text-muted);\">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: var(--mj-text-muted); opacity: 0.3;\"></i>\n <p style=\"margin: 12px 0 0 0; color: var(--mj-text-muted);\">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: var(--mj-text-muted); opacity: 0.3;\"></i>\n <p style=\"margin: 12px 0 0 0; color: var(--mj-text-muted);\">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: var(--mj-text-muted);\"></i>\n Code & Generation\n @if (record.CodeLocked) {\n <span style=\"background: var(--mj-status-warning); color: var(--mj-color-warning-800); 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: var(--mj-text-muted);\"></i>\n Result Codes\n @if (resultCodes.length > 0) {\n <span style=\"background: var(--mj-status-success); color: var(--mj-text-inverse); 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: var(--mj-text-muted); opacity: 0.3;\"></i>\n <p style=\"margin: 12px 0 0 0; color: var(--mj-text-muted);\">No result codes defined</p>\n @if (EditMode && record.IsSaved) {\n <p style=\"margin: 8px 0 0 0; font-size: 0.85em; color: var(--mj-text-muted);\">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: var(--mj-text-muted);\"></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: var(--mj-text-muted); opacity: 0.3;\"></i>\n <p style=\"margin: 12px 0 0 0; color: var(--mj-text-muted);\">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: var(--mj-text-primary);\">Avg Duration</div>\n <div class=\"stat-value\" style=\"color: var(--mj-text-primary);\">{{ 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: var(--mj-text-primary);\">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: var(--mj-text-primary);\">Total Runs</div>\n <div class=\"stat-value\" style=\"color: var(--mj-text-primary);\">{{ 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: var(--mj-text-muted);\"></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: ["/* Enable flex layout for full-height scrolling */\n:host {\n display: block;\n height: 100%;\n}\n\n.record-form-container {\n display: flex;\n flex-direction: column;\n height: 100%;\n min-height: 0;\n overflow: hidden;\n}\n\n.record-form {\n min-height: 0 !important;\n}\n\n/* Hero Header Section */\n.action-hero-header {\n background: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n padding: 32px;\n margin: -20px -20px 24px -20px;\n border-radius: 0 0 var(--mj-radius-lg) var(--mj-radius-lg);\n box-shadow: var(--mj-shadow-md);\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: var(--mj-radius-lg);\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n background: color-mix(in srgb, var(--mj-text-inverse) 20%, transparent);\n backdrop-filter: blur(10px);\n}\n\n.action-icon-wrapper i {\n font-size: var(--mj-text-4xl);\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: var(--mj-font-semibold);\n color: var(--mj-text-inverse);\n}\n\n.action-name-input {\n font-size: 1.8em;\n font-weight: var(--mj-font-semibold);\n background: color-mix(in srgb, var(--mj-text-inverse) 20%, transparent);\n border: 2px solid color-mix(in srgb, var(--mj-text-inverse) 30%, transparent);\n color: var(--mj-text-inverse);\n padding: 8px 16px;\n border-radius: var(--mj-radius-md);\n min-width: 400px;\n}\n\n.action-name-input::placeholder {\n color: color-mix(in srgb, var(--mj-text-inverse) 60%, transparent);\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: var(--mj-radius-full);\n font-size: var(--mj-text-sm);\n font-weight: var(--mj-font-medium);\n background: color-mix(in srgb, var(--mj-text-inverse) 20%, transparent);\n backdrop-filter: blur(10px);\n border: 1px solid color-mix(in srgb, var(--mj-text-inverse) 30%, transparent);\n}\n\n.action-category {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n color: color-mix(in srgb, var(--mj-text-inverse) 90%, transparent);\n font-size: 0.95em;\n cursor: pointer;\n transition: all var(--mj-transition-base);\n margin-bottom: 12px;\n}\n\n.action-category:hover {\n color: var(--mj-text-inverse);\n transform: translateX(4px);\n}\n\n.action-description {\n color: color-mix(in srgb, var(--mj-text-inverse) 90%, transparent);\n font-size: 1.05em;\n line-height: var(--mj-leading-relaxed);\n margin: 0;\n}\n\n.action-description-input {\n width: 100%;\n max-width: 600px;\n background: color-mix(in srgb, var(--mj-text-inverse) 20%, transparent);\n border: 2px solid color-mix(in srgb, var(--mj-text-inverse) 30%, transparent);\n color: var(--mj-text-inverse);\n border-radius: var(--mj-radius-md);\n}\n\n.action-description-input::placeholder {\n color: color-mix(in srgb, var(--mj-text-inverse) 60%, transparent);\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: color-mix(in srgb, var(--mj-text-inverse) 10%, transparent);\n backdrop-filter: blur(10px);\n border: 1px solid color-mix(in srgb, var(--mj-text-inverse) 20%, transparent);\n border-radius: var(--mj-radius-lg);\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: var(--mj-text-2xl);\n color: color-mix(in srgb, var(--mj-text-inverse) 80%, transparent);\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: var(--mj-font-bold);\n color: var(--mj-text-inverse);\n}\n\n.stat-label {\n font-size: var(--mj-text-sm);\n color: color-mix(in srgb, var(--mj-text-inverse) 70%, transparent);\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: var(--mj-bg-surface-card);\n border: 1px solid var(--mj-border-default);\n border-radius: var(--mj-radius-lg);\n margin-bottom: 20px;\n overflow: hidden;\n transition: all var(--mj-transition-base);\n}\n\n.content-section:hover {\n box-shadow: var(--mj-shadow-md);\n}\n\n.section-header {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 20px;\n background: var(--mj-bg-surface-elevated);\n cursor: pointer;\n user-select: none;\n transition: background var(--mj-transition-base);\n}\n\n.section-header:hover {\n background: var(--mj-bg-surface-hover);\n}\n\n.section-header h2 {\n margin: 0;\n font-size: 1.3em;\n color: var(--mj-text-primary);\n flex: 1;\n}\n\n.section-header i:first-child {\n font-size: 1.2em;\n color: var(--mj-text-muted);\n}\n\n.section-count {\n background: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n padding: 2px 8px;\n border-radius: var(--mj-radius-full);\n font-size: var(--mj-text-sm);\n font-weight: var(--mj-font-medium);\n}\n\n.toggle-icon {\n color: var(--mj-text-muted);\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: var(--mj-font-semibold);\n color: var(--mj-text-secondary);\n font-size: var(--mj-text-sm);\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.required {\n color: var(--mj-status-error);\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: var(--mj-text-sm);\n color: var(--mj-text-muted);\n font-weight: var(--mj-font-semibold);\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.display-value {\n font-size: 1.1em;\n color: var(--mj-text-primary);\n}\n\n.display-value.code {\n font-family: 'Courier New', monospace;\n background: var(--mj-bg-surface-sunken);\n padding: 4px 8px;\n border-radius: var(--mj-radius-sm);\n}\n\n.approval-date {\n color: var(--mj-text-muted);\n font-size: var(--mj-text-sm);\n margin-left: 8px;\n}\n\n/* Code Section */\n.generation-panel {\n background: var(--mj-bg-surface-sunken);\n border: 1px solid var(--mj-border-default);\n border-radius: var(--mj-radius-md);\n padding: 20px;\n margin-bottom: 24px;\n}\n\n.generation-panel h3 {\n margin: 0 0 16px 0;\n color: var(--mj-color-indigo-500);\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: var(--mj-font-semibold);\n color: var(--mj-text-secondary);\n}\n\n.generation-controls {\n display: flex;\n align-items: center;\n gap: 12px;\n padding-top: 12px;\n border-top: 1px solid var(--mj-border-default);\n}\n\n.code-locked-badge {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 4px 10px;\n background: var(--mj-status-warning);\n color: var(--mj-color-warning-800);\n border-radius: var(--mj-radius-full);\n font-size: var(--mj-text-xs);\n font-weight: var(--mj-font-medium);\n}\n\n.code-editor-section {\n border: 1px solid var(--mj-border-default);\n border-radius: var(--mj-radius-md);\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: var(--mj-bg-surface-sunken);\n border-bottom: 1px solid var(--mj-border-default);\n}\n\n.code-toolbar h3 {\n margin: 0;\n font-size: 1.1em;\n color: var(--mj-text-secondary);\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: color-mix(in srgb, var(--mj-status-info) 10%, var(--mj-bg-surface));\n border: 1px solid color-mix(in srgb, var(--mj-status-info) 30%, transparent);\n border-radius: var(--mj-radius-md);\n padding: 16px;\n margin-top: 16px;\n}\n\n.code-comments h4 {\n margin: 0 0 8px 0;\n color: var(--mj-status-info);\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.code-comments p {\n margin: 0;\n color: var(--mj-text-secondary);\n line-height: var(--mj-leading-relaxed);\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: var(--mj-font-semibold);\n color: var(--mj-status-error);\n}\n\n/* Parameters Section */\n.params-section {\n background: var(--mj-bg-surface-sunken);\n border-radius: var(--mj-radius-lg);\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: var(--mj-text-secondary);\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: var(--mj-bg-surface);\n border: 2px solid var(--mj-border-default);\n border-radius: var(--mj-radius-md);\n padding: 16px;\n transition: all var(--mj-transition-base);\n}\n\n.param-card:hover {\n border-color: var(--mj-brand-primary);\n box-shadow: var(--mj-shadow-sm);\n}\n\n.param-card.required {\n border-color: var(--mj-status-warning);\n}\n\n.param-card.clickable {\n cursor: pointer;\n}\n\n.param-card.clickable:hover {\n background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n border-color: var(--mj-brand-primary);\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: var(--mj-font-semibold);\n color: var(--mj-text-primary);\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: var(--mj-text-muted);\n border-radius: var(--mj-radius-sm);\n transition: all var(--mj-transition-base);\n}\n\n.param-edit-btn:hover {\n background: color-mix(in srgb, var(--mj-status-info) 10%, var(--mj-bg-surface));\n color: var(--mj-status-info);\n}\n\n.param-delete-btn:hover {\n background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n color: var(--mj-status-error);\n}\n\n.param-details {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.required-badge {\n background: var(--mj-status-warning);\n color: var(--mj-color-warning-800);\n padding: 2px 6px;\n border-radius: var(--mj-radius-sm);\n font-size: var(--mj-text-xs);\n font-weight: var(--mj-font-medium);\n}\n\n.array-badge {\n background: var(--mj-color-indigo-500);\n color: var(--mj-text-inverse);\n padding: 2px 6px;\n border-radius: var(--mj-radius-sm);\n font-size: var(--mj-text-xs);\n font-weight: var(--mj-font-medium);\n}\n\n.param-type {\n color: var(--mj-text-muted);\n font-size: var(--mj-text-sm);\n margin-bottom: 8px;\n}\n\n.param-description {\n color: var(--mj-text-secondary);\n font-size: var(--mj-text-sm);\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 var(--mj-border-default);\n}\n\n.default-label {\n color: var(--mj-text-muted);\n font-size: var(--mj-text-sm);\n}\n\n.param-default code {\n background: var(--mj-bg-surface-sunken);\n padding: 2px 6px;\n border-radius: var(--mj-radius-sm);\n font-family: 'Courier New', monospace;\n color: var(--mj-color-error-400);\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 var(--mj-border-default);\n border-radius: var(--mj-radius-md);\n background: var(--mj-bg-surface);\n transition: all var(--mj-transition-base);\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: var(--mj-shadow-md);\n}\n\n.result-code-card.success {\n border-color: var(--mj-status-success);\n background: color-mix(in srgb, var(--mj-status-success) 10%, var(--mj-bg-surface));\n}\n\n.result-code-card.failure {\n border-color: var(--mj-status-error);\n background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\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 var(--mj-transition-base);\n}\n\n.result-code-card:hover .result-actions {\n opacity: 1;\n}\n\n.result-edit-btn,\n.result-delete-btn {\n background: var(--mj-bg-surface);\n border: 1px solid var(--mj-border-default);\n border-radius: var(--mj-radius-sm);\n padding: 4px 8px;\n cursor: pointer;\n transition: all var(--mj-transition-base);\n font-size: var(--mj-text-sm);\n}\n\n.result-edit-btn:hover {\n background: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n border-color: var(--mj-brand-primary);\n}\n\n.result-delete-btn:hover {\n background: var(--mj-status-error);\n color: var(--mj-text-inverse);\n border-color: var(--mj-status-error);\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: var(--mj-status-success);\n}\n\n.result-code-card.failure .result-icon {\n color: var(--mj-status-error);\n}\n\n.result-content {\n flex: 1;\n min-width: 0;\n}\n\n.result-code {\n font-weight: var(--mj-font-semibold);\n color: var(--mj-text-primary);\n margin-bottom: 4px;\n font-family: 'Courier New', monospace;\n}\n\n.result-description {\n color: var(--mj-text-secondary);\n font-size: var(--mj-text-sm);\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: var(--mj-bg-surface-sunken);\n border: 1px solid var(--mj-border-default);\n border-radius: var(--mj-radius-md);\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: var(--mj-text-muted);\n}\n\n.stat-info {\n flex: 1;\n}\n\n.executions-table {\n overflow-x: auto;\n border: 1px solid var(--mj-border-default);\n border-radius: var(--mj-radius-md);\n}\n\n.executions-table table {\n width: 100%;\n border-collapse: collapse;\n}\n\n.executions-table th {\n background: var(--mj-bg-surface-sunken);\n padding: 12px;\n text-align: left;\n font-weight: var(--mj-font-semibold);\n color: var(--mj-text-secondary);\n border-bottom: 2px solid var(--mj-border-default);\n}\n\n.executions-table td {\n padding: 12px;\n border-bottom: 1px solid var(--mj-border-default);\n color: var(--mj-text-primary);\n}\n\n.execution-row {\n transition: background var(--mj-transition-base);\n}\n\n.execution-row:hover {\n background: var(--mj-bg-surface-hover);\n}\n\n.execution-row.success {\n background: color-mix(in srgb, var(--mj-status-success) 5%, transparent);\n}\n\n.running {\n color: var(--mj-status-warning);\n font-style: italic;\n}\n\n.result-code {\n display: inline-block;\n padding: 4px 8px;\n border-radius: var(--mj-radius-sm);\n font-size: var(--mj-text-sm);\n font-weight: var(--mj-font-medium);\n font-family: 'Courier New', monospace;\n}\n\n.result-code.success {\n background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n color: var(--mj-status-success);\n}\n\n.result-code.failure {\n background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n color: var(--mj-status-error);\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: var(--mj-text-secondary);\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: var(--mj-bg-surface-sunken);\n border: 1px solid var(--mj-border-default);\n border-radius: var(--mj-radius-md);\n cursor: pointer;\n transition: all var(--mj-transition-base);\n}\n\n.library-card:hover {\n background: var(--mj-bg-surface-hover);\n transform: translateX(4px);\n}\n\n.library-card i:first-child {\n font-size: 1.5em;\n color: var(--mj-text-muted);\n}\n\n.library-info {\n flex: 1;\n min-width: 0;\n}\n\n.library-name {\n font-weight: var(--mj-font-semibold);\n color: var(--mj-text-primary);\n margin-bottom: 4px;\n}\n\n.library-items {\n color: var(--mj-text-muted);\n font-size: var(--mj-text-sm);\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: var(--mj-bg-surface-sunken);\n border: 1px solid var(--mj-border-default);\n border-radius: var(--mj-radius-md);\n cursor: pointer;\n transition: all var(--mj-transition-base);\n}\n\n.related-entity-link:hover {\n background: var(--mj-bg-surface-hover);\n border-color: var(--mj-brand-primary);\n}\n\n.related-entity-link i {\n font-size: 1.2em;\n color: var(--mj-text-muted);\n}\n\n.related-entity-link span:first-of-type {\n flex: 1;\n font-weight: var(--mj-font-medium);\n color: var(--mj-text-secondary);\n}\n\n.entity-count {\n color: var(--mj-brand-primary);\n font-size: var(--mj-text-sm);\n}\n\n/* Common States */\n.loading-state {\n text-align: center;\n padding: 60px;\n color: var(--mj-text-muted);\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: var(--mj-text-muted);\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: var(--mj-text-sm) !important;\n opacity: 0.7;\n}\n\n.no-params {\n text-align: center;\n padding: 20px;\n color: var(--mj-text-muted);\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}\n\n/* ============================================\n KENDO EXPANSION PANEL OVERRIDES\n ============================================ */\n::ng-deep .k-expander {\n background: var(--mj-bg-surface-card) !important;\n border-color: var(--mj-border-default) !important;\n color: var(--mj-text-primary) !important;\n}\n\n::ng-deep .k-expander-header {\n background: var(--mj-bg-surface-elevated) !important;\n color: var(--mj-text-primary) !important;\n border-color: var(--mj-border-default) !important;\n}\n\n::ng-deep .k-expander-header:hover {\n background: var(--mj-bg-surface-hover) !important;\n}\n\n::ng-deep .k-expander-title {\n color: var(--mj-text-primary) !important;\n}\n\n::ng-deep .k-expander-indicator .k-icon,\n::ng-deep .k-expander-indicator .k-svg-icon {\n color: var(--mj-text-muted) !important;\n}\n\n::ng-deep .k-expander-content-wrapper {\n border-color: var(--mj-border-default) !important;\n}\n\n::ng-deep .k-expander-content {\n background: var(--mj-bg-surface-card) !important;\n border-color: var(--mj-border-default) !important;\n color: var(--mj-text-primary) !important;\n}\n"] }]
|
|
1873
1873
|
}], null, null); })();
|
|
1874
1874
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MJActionFormComponentExtended, { className: "MJActionFormComponentExtended", filePath: "src/lib/custom/Actions/action-form.component.ts", lineNumber: 18 }); })();
|
|
1875
1875
|
//# sourceMappingURL=action-form.component.js.map
|