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

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

@@ -10,6 +10,8 @@ import { BaseFormComponent } from '@memberjunction/ng-base-forms';
 import { SharedService } from '@memberjunction/ng-shared';
 import { CompositeKey } from '@memberjunction/core';
 import { MJActionExecutionLogFormComponent } from '../../generated/Entities/MJActionExecutionLog/mjactionexecutionlog.form.component';
+import { JoinHeroSummary } from '../../shared/phone-hero';
+import { PhoneSectionsState } from '../../shared/phone-sections-state';
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/common";
 import * as i2 from "@angular/forms";
@@ -51,10 +53,10 @@ function MJActionExecutionLogFormComponentExtended_Conditional_30_Template(rf, c
     i0.ɵɵelementStart(0, "div", 18)(1, "span", 19);
     i0.ɵɵtext(2, "Action");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 20)(4, "button", 29);
+    i0.ɵɵelementStart(3, "span", 20)(4, "button", 34);
     i0.ɵɵlistener("click", function MJActionExecutionLogFormComponentExtended_Conditional_30_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.navigateToAction()); });
     i0.ɵɵtext(5);
-    i0.ɵɵelement(6, "i", 30);
+    i0.ɵɵelement(6, "i", 35);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -66,24 +68,39 @@ function MJActionExecutionLogFormComponentExtended_Conditional_31_Template(rf, c
     i0.ɵɵelementStart(0, "div", 18)(1, "span", 19);
     i0.ɵɵtext(2, "User");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 20)(4, "button", 29);
+    i0.ɵɵelementStart(3, "span", 20)(4, "button", 34);
     i0.ɵɵlistener("click", function MJActionExecutionLogFormComponentExtended_Conditional_31_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.navigateToUser()); });
     i0.ɵɵtext(5);
-    i0.ɵɵelement(6, "i", 30);
+    i0.ɵɵelement(6, "i", 35);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵadvance(5);
     i0.ɵɵtextInterpolate1(" ", ctx_r0.user.Name, " ");
 } }
-function MJActionExecutionLogFormComponentExtended_ng_template_35_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 31);
+function MJActionExecutionLogFormComponentExtended_Conditional_32_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 36);
+    i0.ɵɵlistener("click", function MJActionExecutionLogFormComponentExtended_Conditional_32_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r4); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.ToggleHeroDetails()); });
+    i0.ɵɵelementStart(1, "span", 37);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(3, "i", 38);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵattribute("aria-expanded", ctx_r0.HeroDetailsOpen);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r0.HeroSummary);
+} }
+function MJActionExecutionLogFormComponentExtended_ng_template_37_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 39);
     i0.ɵɵtext(1, " Execution Details ");
 } }
-function MJActionExecutionLogFormComponentExtended_Conditional_69_ng_template_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 54);
+function MJActionExecutionLogFormComponentExtended_Conditional_71_ng_template_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 62);
     i0.ɵɵtext(1, " Parameters ");
-    i0.ɵɵelementStart(2, "span", 55);
+    i0.ɵɵelementStart(2, "span", 63);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -91,36 +108,36 @@ function MJActionExecutionLogFormComponentExtended_Conditional_69_ng_template_1_
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate(ctx_r0.paramCounts.All);
 } }
-function MJActionExecutionLogFormComponentExtended_Conditional_69_Conditional_28_Template(rf, ctx) { if (rf & 1) {
-    const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 56);
-    i0.ɵɵlistener("click", function MJActionExecutionLogFormComponentExtended_Conditional_69_Conditional_28_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r5); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.searchText = ""); });
-    i0.ɵɵelement(1, "i", 57);
+function MJActionExecutionLogFormComponentExtended_Conditional_71_Conditional_28_Template(rf, ctx) { if (rf & 1) {
+    const _r6 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 64);
+    i0.ɵɵlistener("click", function MJActionExecutionLogFormComponentExtended_Conditional_71_Conditional_28_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r6); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.searchText = ""); });
+    i0.ɵɵelement(1, "i", 65);
     i0.ɵɵelementEnd();
 } }
-function MJActionExecutionLogFormComponentExtended_Conditional_69_Conditional_32_Template(rf, ctx) { if (rf & 1) {
+function MJActionExecutionLogFormComponentExtended_Conditional_71_Conditional_32_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "i", 14);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("ngClass", ctx_r0.sortDir === "asc" ? "fa-arrow-down-short-wide" : "fa-arrow-up-wide-short");
 } }
-function MJActionExecutionLogFormComponentExtended_Conditional_69_Conditional_35_Template(rf, ctx) { if (rf & 1) {
+function MJActionExecutionLogFormComponentExtended_Conditional_71_Conditional_35_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "i", 14);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("ngClass", ctx_r0.sortDir === "asc" ? "fa-arrow-down-a-z" : "fa-arrow-up-z-a");
 } }
-function MJActionExecutionLogFormComponentExtended_Conditional_69_Conditional_39_Template(rf, ctx) { if (rf & 1) {
-    const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 53)(1, "div", 58)(2, "span", 59);
+function MJActionExecutionLogFormComponentExtended_Conditional_71_Conditional_39_Template(rf, ctx) { if (rf & 1) {
+    const _r7 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 61)(1, "div", 66)(2, "span", 67);
     i0.ɵɵtext(3, "Raw JSON");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "button", 60);
-    i0.ɵɵlistener("click", function MJActionExecutionLogFormComponentExtended_Conditional_69_Conditional_39_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r6); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.copyToClipboard(ctx_r0.formattedParams)); });
-    i0.ɵɵelement(5, "i", 61);
+    i0.ɵɵelementStart(4, "button", 68);
+    i0.ɵɵlistener("click", function MJActionExecutionLogFormComponentExtended_Conditional_71_Conditional_39_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r7); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.copyToClipboard(ctx_r0.formattedParams)); });
+    i0.ɵɵelement(5, "i", 69);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(6, "mj-code-editor", 62);
-    i0.ɵɵtwoWayListener("ngModelChange", function MJActionExecutionLogFormComponentExtended_Conditional_69_Conditional_39_Template_mj_code_editor_ngModelChange_6_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r0 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r0.formattedParams, $event) || (ctx_r0.formattedParams = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementStart(6, "mj-code-editor", 70);
+    i0.ɵɵtwoWayListener("ngModelChange", function MJActionExecutionLogFormComponentExtended_Conditional_71_Conditional_39_Template_mj_code_editor_ngModelChange_6_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r0 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r0.formattedParams, $event) || (ctx_r0.formattedParams = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
@@ -128,169 +145,169 @@ function MJActionExecutionLogFormComponentExtended_Conditional_69_Conditional_39
     i0.ɵɵtwoWayProperty("ngModel", ctx_r0.formattedParams);
     i0.ɵɵproperty("readonly", true)("language", "json")("lineWrapping", true);
 } }
-function MJActionExecutionLogFormComponentExtended_Conditional_69_Conditional_40_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    const _r7 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-empty-state", 65);
-    i0.ɵɵlistener("Action", function MJActionExecutionLogFormComponentExtended_Conditional_69_Conditional_40_Conditional_0_Template_mj_empty_state_Action_0_listener() { i0.ɵɵrestoreView(_r7); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.clearFilters()); });
+function MJActionExecutionLogFormComponentExtended_Conditional_71_Conditional_40_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    const _r8 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-empty-state", 73);
+    i0.ɵɵlistener("Action", function MJActionExecutionLogFormComponentExtended_Conditional_71_Conditional_40_Conditional_0_Template_mj_empty_state_Action_0_listener() { i0.ɵɵrestoreView(_r8); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.clearFilters()); });
     i0.ɵɵelementEnd();
 } }
-function MJActionExecutionLogFormComponentExtended_Conditional_69_Conditional_40_Conditional_1_For_2_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 38);
+function MJActionExecutionLogFormComponentExtended_Conditional_71_Conditional_40_Conditional_1_For_2_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 46);
 } }
-function MJActionExecutionLogFormComponentExtended_Conditional_69_Conditional_40_Conditional_1_For_2_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 42);
+function MJActionExecutionLogFormComponentExtended_Conditional_71_Conditional_40_Conditional_1_For_2_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 50);
 } }
-function MJActionExecutionLogFormComponentExtended_Conditional_69_Conditional_40_Conditional_1_For_2_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 40);
+function MJActionExecutionLogFormComponentExtended_Conditional_71_Conditional_40_Conditional_1_For_2_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 48);
 } }
-function MJActionExecutionLogFormComponentExtended_Conditional_69_Conditional_40_Conditional_1_For_2_Conditional_14_Template(rf, ctx) { if (rf & 1) {
-    const _r9 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 77);
-    i0.ɵɵlistener("click", function MJActionExecutionLogFormComponentExtended_Conditional_69_Conditional_40_Conditional_1_For_2_Conditional_14_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r9); const p_r10 = i0.ɵɵnextContext().$implicit; const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.toggleExpanded(p_r10)); });
+function MJActionExecutionLogFormComponentExtended_Conditional_71_Conditional_40_Conditional_1_For_2_Conditional_14_Template(rf, ctx) { if (rf & 1) {
+    const _r10 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 85);
+    i0.ɵɵlistener("click", function MJActionExecutionLogFormComponentExtended_Conditional_71_Conditional_40_Conditional_1_For_2_Conditional_14_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r10); const p_r11 = i0.ɵɵnextContext().$implicit; const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.toggleExpanded(p_r11)); });
     i0.ɵɵelement(1, "i", 14);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const p_r10 = i0.ɵɵnextContext().$implicit;
-    i0.ɵɵclassProp("is-expanded", p_r10.Expanded);
-    i0.ɵɵproperty("title", p_r10.Expanded ? "Collapse" : "Expand");
+    const p_r11 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵclassProp("is-expanded", p_r11.Expanded);
+    i0.ɵɵproperty("title", p_r11.Expanded ? "Collapse" : "Expand");
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngClass", p_r10.Expanded ? "fa-chevron-up" : "fa-chevron-down");
+    i0.ɵɵproperty("ngClass", p_r11.Expanded ? "fa-chevron-up" : "fa-chevron-down");
 } }
-function MJActionExecutionLogFormComponentExtended_Conditional_69_Conditional_40_Conditional_1_For_2_Conditional_19_Template(rf, ctx) { if (rf & 1) {
-    const _r11 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 76)(1, "mj-code-editor", 78);
-    i0.ɵɵtwoWayListener("ngModelChange", function MJActionExecutionLogFormComponentExtended_Conditional_69_Conditional_40_Conditional_1_For_2_Conditional_19_Template_mj_code_editor_ngModelChange_1_listener($event) { i0.ɵɵrestoreView(_r11); const p_r10 = i0.ɵɵnextContext().$implicit; i0.ɵɵtwoWayBindingSet(p_r10.FormattedValue, $event) || (p_r10.FormattedValue = $event); return i0.ɵɵresetView($event); });
+function MJActionExecutionLogFormComponentExtended_Conditional_71_Conditional_40_Conditional_1_For_2_Conditional_19_Template(rf, ctx) { if (rf & 1) {
+    const _r12 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 84)(1, "mj-code-editor", 86);
+    i0.ɵɵtwoWayListener("ngModelChange", function MJActionExecutionLogFormComponentExtended_Conditional_71_Conditional_40_Conditional_1_For_2_Conditional_19_Template_mj_code_editor_ngModelChange_1_listener($event) { i0.ɵɵrestoreView(_r12); const p_r11 = i0.ɵɵnextContext().$implicit; i0.ɵɵtwoWayBindingSet(p_r11.FormattedValue, $event) || (p_r11.FormattedValue = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const p_r10 = i0.ɵɵnextContext().$implicit;
+    const p_r11 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵtwoWayProperty("ngModel", p_r10.FormattedValue);
-    i0.ɵɵproperty("name", "param-" + p_r10.Name)("readonly", true)("language", "json")("lineWrapping", true);
+    i0.ɵɵtwoWayProperty("ngModel", p_r11.FormattedValue);
+    i0.ɵɵproperty("name", "param-" + p_r11.Name)("readonly", true)("language", "json")("lineWrapping", true);
 } }
-function MJActionExecutionLogFormComponentExtended_Conditional_69_Conditional_40_Conditional_1_For_2_Template(rf, ctx) { if (rf & 1) {
-    const _r8 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "li", 66)(1, "div", 67)(2, "span", 68);
-    i0.ɵɵconditionalCreate(3, MJActionExecutionLogFormComponentExtended_Conditional_69_Conditional_40_Conditional_1_For_2_Conditional_3_Template, 1, 0, "i", 38)(4, MJActionExecutionLogFormComponentExtended_Conditional_69_Conditional_40_Conditional_1_For_2_Conditional_4_Template, 1, 0, "i", 42)(5, MJActionExecutionLogFormComponentExtended_Conditional_69_Conditional_40_Conditional_1_For_2_Conditional_5_Template, 1, 0, "i", 40);
+function MJActionExecutionLogFormComponentExtended_Conditional_71_Conditional_40_Conditional_1_For_2_Template(rf, ctx) { if (rf & 1) {
+    const _r9 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "li", 74)(1, "div", 75)(2, "span", 76);
+    i0.ɵɵconditionalCreate(3, MJActionExecutionLogFormComponentExtended_Conditional_71_Conditional_40_Conditional_1_For_2_Conditional_3_Template, 1, 0, "i", 46)(4, MJActionExecutionLogFormComponentExtended_Conditional_71_Conditional_40_Conditional_1_For_2_Conditional_4_Template, 1, 0, "i", 50)(5, MJActionExecutionLogFormComponentExtended_Conditional_71_Conditional_40_Conditional_1_For_2_Conditional_5_Template, 1, 0, "i", 48);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "div", 69)(8, "span", 70);
+    i0.ɵɵelementStart(7, "div", 77)(8, "span", 78);
     i0.ɵɵtext(9);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(10, "span", 71);
+    i0.ɵɵelementStart(10, "span", 79);
     i0.ɵɵelement(11, "i", 14);
     i0.ɵɵtext(12);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(13, "div", 72);
-    i0.ɵɵconditionalCreate(14, MJActionExecutionLogFormComponentExtended_Conditional_69_Conditional_40_Conditional_1_For_2_Conditional_14_Template, 2, 4, "button", 73);
-    i0.ɵɵelementStart(15, "button", 74);
-    i0.ɵɵlistener("click", function MJActionExecutionLogFormComponentExtended_Conditional_69_Conditional_40_Conditional_1_For_2_Template_button_click_15_listener() { const p_r10 = i0.ɵɵrestoreView(_r8).$implicit; const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.copyParamValue(p_r10)); });
-    i0.ɵɵelement(16, "i", 61);
+    i0.ɵɵelementStart(13, "div", 80);
+    i0.ɵɵconditionalCreate(14, MJActionExecutionLogFormComponentExtended_Conditional_71_Conditional_40_Conditional_1_For_2_Conditional_14_Template, 2, 4, "button", 81);
+    i0.ɵɵelementStart(15, "button", 82);
+    i0.ɵɵlistener("click", function MJActionExecutionLogFormComponentExtended_Conditional_71_Conditional_40_Conditional_1_For_2_Template_button_click_15_listener() { const p_r11 = i0.ɵɵrestoreView(_r9).$implicit; const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.copyParamValue(p_r11)); });
+    i0.ɵɵelement(16, "i", 69);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(17, "div", 75);
+    i0.ɵɵelementStart(17, "div", 83);
     i0.ɵɵtext(18);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(19, MJActionExecutionLogFormComponentExtended_Conditional_69_Conditional_40_Conditional_1_For_2_Conditional_19_Template, 2, 5, "div", 76);
+    i0.ɵɵconditionalCreate(19, MJActionExecutionLogFormComponentExtended_Conditional_71_Conditional_40_Conditional_1_For_2_Conditional_19_Template, 2, 5, "div", 84);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const p_r10 = ctx.$implicit;
+    const p_r11 = ctx.$implicit;
     const ctx_r0 = i0.ɵɵnextContext(4);
-    i0.ɵɵattribute("data-type", p_r10.Type);
+    i0.ɵɵattribute("data-type", p_r11.Type);
     i0.ɵɵadvance(2);
-    i0.ɵɵattribute("data-type", p_r10.Type);
+    i0.ɵɵattribute("data-type", p_r11.Type);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(p_r10.Type === "Input" ? 3 : p_r10.Type === "Output" ? 4 : 5);
+    i0.ɵɵconditional(p_r11.Type === "Input" ? 3 : p_r11.Type === "Output" ? 4 : 5);
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate1(" ", ctx_r0.getTypeLabel(p_r10.Type), " ");
+    i0.ɵɵtextInterpolate1(" ", ctx_r0.getTypeLabel(p_r11.Type), " ");
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(p_r10.Name);
+    i0.ɵɵtextInterpolate(p_r11.Name);
     i0.ɵɵadvance();
-    i0.ɵɵattribute("data-kind", p_r10.ValueKind);
+    i0.ɵɵattribute("data-kind", p_r11.ValueKind);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngClass", ctx_r0.getValueKindIcon(p_r10.ValueKind));
+    i0.ɵɵproperty("ngClass", ctx_r0.getValueKindIcon(p_r11.ValueKind));
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", p_r10.ValueKind, " ");
+    i0.ɵɵtextInterpolate1(" ", p_r11.ValueKind, " ");
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(p_r10.IsExpandable ? 14 : -1);
+    i0.ɵɵconditional(p_r11.IsExpandable ? 14 : -1);
     i0.ɵɵadvance(3);
-    i0.ɵɵattribute("data-kind", p_r10.ValueKind);
+    i0.ɵɵattribute("data-kind", p_r11.ValueKind);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(p_r10.Preview);
+    i0.ɵɵtextInterpolate(p_r11.Preview);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(p_r10.IsExpandable && p_r10.Expanded ? 19 : -1);
+    i0.ɵɵconditional(p_r11.IsExpandable && p_r11.Expanded ? 19 : -1);
 } }
-function MJActionExecutionLogFormComponentExtended_Conditional_69_Conditional_40_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "ul", 64);
-    i0.ɵɵrepeaterCreate(1, MJActionExecutionLogFormComponentExtended_Conditional_69_Conditional_40_Conditional_1_For_2_Template, 20, 12, "li", 66, i0.ɵɵcomponentInstance().trackParam, true);
+function MJActionExecutionLogFormComponentExtended_Conditional_71_Conditional_40_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "ul", 72);
+    i0.ɵɵrepeaterCreate(1, MJActionExecutionLogFormComponentExtended_Conditional_71_Conditional_40_Conditional_1_For_2_Template, 20, 12, "li", 74, i0.ɵɵcomponentInstance().trackParam, true);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
     i0.ɵɵrepeater(ctx_r0.filteredParameters);
 } }
-function MJActionExecutionLogFormComponentExtended_Conditional_69_Conditional_40_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, MJActionExecutionLogFormComponentExtended_Conditional_69_Conditional_40_Conditional_0_Template, 1, 0, "mj-empty-state", 63)(1, MJActionExecutionLogFormComponentExtended_Conditional_69_Conditional_40_Conditional_1_Template, 3, 0, "ul", 64);
+function MJActionExecutionLogFormComponentExtended_Conditional_71_Conditional_40_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, MJActionExecutionLogFormComponentExtended_Conditional_71_Conditional_40_Conditional_0_Template, 1, 0, "mj-empty-state", 71)(1, MJActionExecutionLogFormComponentExtended_Conditional_71_Conditional_40_Conditional_1_Template, 3, 0, "ul", 72);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵconditional(ctx_r0.filteredParameters.length === 0 ? 0 : 1);
 } }
-function MJActionExecutionLogFormComponentExtended_Conditional_69_Template(rf, ctx) { if (rf & 1) {
-    const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-accordion-panel", 23);
-    i0.ɵɵtemplate(1, MJActionExecutionLogFormComponentExtended_Conditional_69_ng_template_1_Template, 4, 1, "ng-template", 24);
-    i0.ɵɵelementStart(2, "div", 32)(3, "div", 33)(4, "div", 34)(5, "button", 35);
-    i0.ɵɵlistener("click", function MJActionExecutionLogFormComponentExtended_Conditional_69_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r4); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.setTypeFilter("All")); });
+function MJActionExecutionLogFormComponentExtended_Conditional_71_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-accordion-panel", 31);
+    i0.ɵɵtemplate(1, MJActionExecutionLogFormComponentExtended_Conditional_71_ng_template_1_Template, 4, 1, "ng-template", 26);
+    i0.ɵɵelementStart(2, "div", 40)(3, "div", 41)(4, "div", 42)(5, "button", 43);
+    i0.ɵɵlistener("click", function MJActionExecutionLogFormComponentExtended_Conditional_71_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r5); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.setTypeFilter("All")); });
     i0.ɵɵtext(6, " All ");
-    i0.ɵɵelementStart(7, "span", 36);
+    i0.ɵɵelementStart(7, "span", 44);
     i0.ɵɵtext(8);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(9, "button", 37);
-    i0.ɵɵlistener("click", function MJActionExecutionLogFormComponentExtended_Conditional_69_Template_button_click_9_listener() { i0.ɵɵrestoreView(_r4); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.setTypeFilter("Input")); });
-    i0.ɵɵelement(10, "i", 38);
+    i0.ɵɵelementStart(9, "button", 45);
+    i0.ɵɵlistener("click", function MJActionExecutionLogFormComponentExtended_Conditional_71_Template_button_click_9_listener() { i0.ɵɵrestoreView(_r5); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.setTypeFilter("Input")); });
+    i0.ɵɵelement(10, "i", 46);
     i0.ɵɵtext(11, " Input ");
-    i0.ɵɵelementStart(12, "span", 36);
+    i0.ɵɵelementStart(12, "span", 44);
     i0.ɵɵtext(13);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(14, "button", 39);
-    i0.ɵɵlistener("click", function MJActionExecutionLogFormComponentExtended_Conditional_69_Template_button_click_14_listener() { i0.ɵɵrestoreView(_r4); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.setTypeFilter("Both")); });
-    i0.ɵɵelement(15, "i", 40);
+    i0.ɵɵelementStart(14, "button", 47);
+    i0.ɵɵlistener("click", function MJActionExecutionLogFormComponentExtended_Conditional_71_Template_button_click_14_listener() { i0.ɵɵrestoreView(_r5); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.setTypeFilter("Both")); });
+    i0.ɵɵelement(15, "i", 48);
     i0.ɵɵtext(16, " In/Out ");
-    i0.ɵɵelementStart(17, "span", 36);
+    i0.ɵɵelementStart(17, "span", 44);
     i0.ɵɵtext(18);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(19, "button", 41);
-    i0.ɵɵlistener("click", function MJActionExecutionLogFormComponentExtended_Conditional_69_Template_button_click_19_listener() { i0.ɵɵrestoreView(_r4); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.setTypeFilter("Output")); });
-    i0.ɵɵelement(20, "i", 42);
+    i0.ɵɵelementStart(19, "button", 49);
+    i0.ɵɵlistener("click", function MJActionExecutionLogFormComponentExtended_Conditional_71_Template_button_click_19_listener() { i0.ɵɵrestoreView(_r5); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.setTypeFilter("Output")); });
+    i0.ɵɵelement(20, "i", 50);
     i0.ɵɵtext(21, " Output ");
-    i0.ɵɵelementStart(22, "span", 36);
+    i0.ɵɵelementStart(22, "span", 44);
     i0.ɵɵtext(23);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(24, "div", 43)(25, "div", 44);
-    i0.ɵɵelement(26, "i", 45);
-    i0.ɵɵelementStart(27, "input", 46);
-    i0.ɵɵtwoWayListener("ngModelChange", function MJActionExecutionLogFormComponentExtended_Conditional_69_Template_input_ngModelChange_27_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r0 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r0.searchText, $event) || (ctx_r0.searchText = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementStart(24, "div", 51)(25, "div", 52);
+    i0.ɵɵelement(26, "i", 53);
+    i0.ɵɵelementStart(27, "input", 54);
+    i0.ɵɵtwoWayListener("ngModelChange", function MJActionExecutionLogFormComponentExtended_Conditional_71_Template_input_ngModelChange_27_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r0 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r0.searchText, $event) || (ctx_r0.searchText = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(28, MJActionExecutionLogFormComponentExtended_Conditional_69_Conditional_28_Template, 2, 0, "button", 47);
+    i0.ɵɵconditionalCreate(28, MJActionExecutionLogFormComponentExtended_Conditional_71_Conditional_28_Template, 2, 0, "button", 55);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(29, "div", 48)(30, "button", 49);
-    i0.ɵɵlistener("click", function MJActionExecutionLogFormComponentExtended_Conditional_69_Template_button_click_30_listener() { i0.ɵɵrestoreView(_r4); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.toggleSort("type")); });
+    i0.ɵɵelementStart(29, "div", 56)(30, "button", 57);
+    i0.ɵɵlistener("click", function MJActionExecutionLogFormComponentExtended_Conditional_71_Template_button_click_30_listener() { i0.ɵɵrestoreView(_r5); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.toggleSort("type")); });
     i0.ɵɵtext(31, " Type ");
-    i0.ɵɵconditionalCreate(32, MJActionExecutionLogFormComponentExtended_Conditional_69_Conditional_32_Template, 1, 1, "i", 14);
+    i0.ɵɵconditionalCreate(32, MJActionExecutionLogFormComponentExtended_Conditional_71_Conditional_32_Template, 1, 1, "i", 14);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(33, "button", 50);
-    i0.ɵɵlistener("click", function MJActionExecutionLogFormComponentExtended_Conditional_69_Template_button_click_33_listener() { i0.ɵɵrestoreView(_r4); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.toggleSort("name")); });
+    i0.ɵɵelementStart(33, "button", 58);
+    i0.ɵɵlistener("click", function MJActionExecutionLogFormComponentExtended_Conditional_71_Template_button_click_33_listener() { i0.ɵɵrestoreView(_r5); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.toggleSort("name")); });
     i0.ɵɵtext(34, " Name ");
-    i0.ɵɵconditionalCreate(35, MJActionExecutionLogFormComponentExtended_Conditional_69_Conditional_35_Template, 1, 1, "i", 14);
+    i0.ɵɵconditionalCreate(35, MJActionExecutionLogFormComponentExtended_Conditional_71_Conditional_35_Template, 1, 1, "i", 14);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(36, "button", 51);
-    i0.ɵɵlistener("click", function MJActionExecutionLogFormComponentExtended_Conditional_69_Template_button_click_36_listener() { i0.ɵɵrestoreView(_r4); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.toggleRawJson()); });
-    i0.ɵɵelement(37, "i", 52);
+    i0.ɵɵelementStart(36, "button", 59);
+    i0.ɵɵlistener("click", function MJActionExecutionLogFormComponentExtended_Conditional_71_Template_button_click_36_listener() { i0.ɵɵrestoreView(_r5); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.toggleRawJson()); });
+    i0.ɵɵelement(37, "i", 60);
     i0.ɵɵtext(38, " Raw ");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵconditionalCreate(39, MJActionExecutionLogFormComponentExtended_Conditional_69_Conditional_39_Template, 7, 4, "div", 53)(40, MJActionExecutionLogFormComponentExtended_Conditional_69_Conditional_40_Template, 2, 1);
+    i0.ɵɵconditionalCreate(39, MJActionExecutionLogFormComponentExtended_Conditional_71_Conditional_39_Template, 7, 4, "div", 61)(40, MJActionExecutionLogFormComponentExtended_Conditional_71_Conditional_40_Template, 2, 1);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("Expanded", true);
+    i0.ɵɵproperty("SectionCount", ctx_r0.paramCounts.All)("Expanded", true);
     i0.ɵɵadvance(5);
     i0.ɵɵclassProp("active", ctx_r0.typeFilter === "All");
     i0.ɵɵadvance(3);
@@ -327,23 +344,23 @@ function MJActionExecutionLogFormComponentExtended_Conditional_69_Template(rf, c
     i0.ɵɵadvance(3);
     i0.ɵɵconditional(ctx_r0.showRawJson ? 39 : 40);
 } }
-function MJActionExecutionLogFormComponentExtended_Conditional_70_ng_template_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 81);
+function MJActionExecutionLogFormComponentExtended_Conditional_72_ng_template_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 89);
     i0.ɵɵtext(1, " Output Message ");
 } }
-function MJActionExecutionLogFormComponentExtended_Conditional_70_Template(rf, ctx) { if (rf & 1) {
-    const _r12 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-accordion-panel", 23);
-    i0.ɵɵtemplate(1, MJActionExecutionLogFormComponentExtended_Conditional_70_ng_template_1_Template, 2, 0, "ng-template", 24);
-    i0.ɵɵelementStart(2, "div", 79)(3, "div", 58)(4, "span", 59);
+function MJActionExecutionLogFormComponentExtended_Conditional_72_Template(rf, ctx) { if (rf & 1) {
+    const _r13 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-accordion-panel", 32);
+    i0.ɵɵtemplate(1, MJActionExecutionLogFormComponentExtended_Conditional_72_ng_template_1_Template, 2, 0, "ng-template", 26);
+    i0.ɵɵelementStart(2, "div", 87)(3, "div", 66)(4, "span", 67);
     i0.ɵɵtext(5, "JSON");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "button", 60);
-    i0.ɵɵlistener("click", function MJActionExecutionLogFormComponentExtended_Conditional_70_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r12); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.copyToClipboard(ctx_r0.formattedMessage)); });
-    i0.ɵɵelement(7, "i", 61);
+    i0.ɵɵelementStart(6, "button", 68);
+    i0.ɵɵlistener("click", function MJActionExecutionLogFormComponentExtended_Conditional_72_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r13); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.copyToClipboard(ctx_r0.formattedMessage)); });
+    i0.ɵɵelement(7, "i", 69);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(8, "mj-code-editor", 80);
-    i0.ɵɵtwoWayListener("ngModelChange", function MJActionExecutionLogFormComponentExtended_Conditional_70_Template_mj_code_editor_ngModelChange_8_listener($event) { i0.ɵɵrestoreView(_r12); const ctx_r0 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r0.formattedMessage, $event) || (ctx_r0.formattedMessage = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementStart(8, "mj-code-editor", 88);
+    i0.ɵɵtwoWayListener("ngModelChange", function MJActionExecutionLogFormComponentExtended_Conditional_72_Template_mj_code_editor_ngModelChange_8_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r0 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r0.formattedMessage, $event) || (ctx_r0.formattedMessage = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -352,14 +369,14 @@ function MJActionExecutionLogFormComponentExtended_Conditional_70_Template(rf, c
     i0.ɵɵtwoWayProperty("ngModel", ctx_r0.formattedMessage);
     i0.ɵɵproperty("readonly", true)("language", "json")("lineWrapping", true);
 } }
-function MJActionExecutionLogFormComponentExtended_Conditional_71_ng_template_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 83);
+function MJActionExecutionLogFormComponentExtended_Conditional_73_ng_template_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 91);
     i0.ɵɵtext(1, " Execution Data ");
 } }
-function MJActionExecutionLogFormComponentExtended_Conditional_71_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "mj-accordion-panel", 23);
-    i0.ɵɵtemplate(1, MJActionExecutionLogFormComponentExtended_Conditional_71_ng_template_1_Template, 2, 0, "ng-template", 24);
-    i0.ɵɵelement(2, "mj-empty-state", 82);
+function MJActionExecutionLogFormComponentExtended_Conditional_73_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "mj-accordion-panel", 33);
+    i0.ɵɵtemplate(1, MJActionExecutionLogFormComponentExtended_Conditional_73_ng_template_1_Template, 2, 0, "ng-template", 26);
+    i0.ɵɵelement(2, "mj-empty-state", 90);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     i0.ɵɵproperty("Expanded", true);
@@ -367,6 +384,10 @@ function MJActionExecutionLogFormComponentExtended_Conditional_71_Template(rf, c
 let MJActionExecutionLogFormComponentExtended = class MJActionExecutionLogFormComponentExtended extends MJActionExecutionLogFormComponent {
     constructor() {
         super(...arguments);
+        /** Phone width shows the stacked accordions as sections behind one picker (design call 7A). */
+        this.Phone = new PhoneSectionsState(() => this.cdr.markForCheck());
+        /** Phone hero (6A): whether the summary line is expanded to show the rest of the hero. */
+        this.HeroDetailsOpen = false;
         // Related entities
         this.Action = null;
         this.User = null;
@@ -387,6 +408,23 @@ let MJActionExecutionLogFormComponentExtended = class MJActionExecutionLogFormCo
         this.SortDir = 'asc';
         this.ShowRawJson = false;
     }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+        this.Phone.Stop();
+    }
+    /** Toggles the phone hero between its compact identity row and the full hero. */
+    ToggleHeroDetails() {
+        this.HeroDetailsOpen = !this.HeroDetailsOpen;
+        this.cdr.markForCheck();
+    }
+    /** The phone hero's one-line summary of what the compact hero leaves out. */
+    get HeroSummary() {
+        return JoinHeroSummary([
+            this.Action?.Name,
+            this.formatDuration(this.getExecutionDuration()),
+            this.User?.Name,
+        ]);
+    }
     /** @deprecated Use {@link Action}. */
     get action() {
         return this.Action;
@@ -898,7 +936,7 @@ let MJActionExecutionLogFormComponentExtended = class MJActionExecutionLogFormCo
         return this.CopyToClipboard(text);
     }
     static { this.ɵfac = /*@__PURE__*/ (() => { let ɵMJActionExecutionLogFormComponentExtended_BaseFactory; return function MJActionExecutionLogFormComponentExtended_Factory(__ngFactoryType__) { return (ɵMJActionExecutionLogFormComponentExtended_BaseFactory || (ɵMJActionExecutionLogFormComponentExtended_BaseFactory = i0.ɵɵgetInheritedFactory(MJActionExecutionLogFormComponentExtended)))(__ngFactoryType__ || MJActionExecutionLogFormComponentExtended); }; })(); }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MJActionExecutionLogFormComponentExtended, selectors: [["mj-action-execution-log-form"]], standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 72, vars: 29, consts: [[1, "record-form-container", "action-execution-log-form", 2, "height", "100%", "display", "flex", "flex-direction", "column"], [1, "record-form", 2, "display", "flex", "flex-direction", "column", "height", "100%", "overflow", "hidden"], [1, "header"], [1, "header-content"], [1, "header-left"], [1, "icon-wrapper"], [3, "ngClass"], [1, "fas", "fa-terminal"], [1, "header-info"], [1, "meta-info"], [1, "action-name"], [1, "log-id"], [1, "header-right"], [1, "status-badge"], [1, "fas", 3, "ngClass"], [1, "execution-time"], [1, "fas", "fa-clock"], [1, "header-stats"], [1, "stat"], [1, "label"], [1, "value"], [1, "content-area"], [1, "accordion-container"], [3, "Expanded"], ["mjAccordionTitle", ""], [1, "details-grid"], [1, "detail-item"], [1, "monospace"], [1, "detail-value"], [1, "btn-link", 3, "click"], [1, "fas", "fa-external-link-alt"], [1, "fas", "fa-info-circle"], [1, "params-panel"], [1, "params-toolbar"], [1, "filter-chips"], ["type", "button", 1, "chip", 3, "click"], [1, "chip-count"], ["type", "button", 1, "chip", "chip-input", 3, "click", "disabled"], [1, "fas", "fa-sign-in-alt"], ["type", "button", 1, "chip", "chip-both", 3, "click", "disabled"], [1, "fas", "fa-exchange-alt"], ["type", "button", 1, "chip", "chip-output", 3, "click", "disabled"], [1, "fas", "fa-sign-out-alt"], [1, "toolbar-right"], [1, "search-wrapper"], [1, "fas", "fa-search", "search-icon"], ["type", "text", "placeholder", "Search name or value\u2026", "name", "paramSearch", 1, "mj-input", "params-search", 3, "ngModelChange", "ngModel"], ["type", "button", "title", "Clear search", 1, "search-clear"], ["role", "group", "aria-label", "Sort parameters", 1, "sort-group"], ["type", "button", "title", "Sort by type", 1, "sort-btn", 3, "click"], ["type", "button", "title", "Sort by name", 1, "sort-btn", 3, "click"], ["type", "button", "title", "Toggle raw JSON view", 1, "raw-toggle", 3, "click"], [1, "fas", "fa-code"], [1, "json-viewer", "raw-json-viewer"], [1, "fas", "fa-sliders-h"], [1, "mj-accordion-badge", "mj-accordion-badge--right"], ["type", "button", "title", "Clear search", 1, "search-clear", 3, "click"], [1, "fas", "fa-times"], [1, "json-toolbar"], [1, "json-label"], ["title", "Copy JSON", 1, "btn-icon", 3, "click"], [1, "fas", "fa-copy"], ["name", "formattedParamsRaw", 2, "height", "360px", "width", "100%", 3, "ngModelChange", "ngModel", "readonly", "language", "lineWrapping"], ["Variant", "no-results", "Size", "compact", "Icon", "fa-solid fa-filter-circle-xmark", "Title", "No parameters match the current filter.", "ActionText", "Clear filters", "ActionIcon", "fa-solid fa-rotate-left", "ActionVariant", "flat"], [1, "params-list"], ["Variant", "no-results", "Size", "compact", "Icon", "fa-solid fa-filter-circle-xmark", "Title", "No parameters match the current filter.", "ActionText", "Clear filters", "ActionIcon", "fa-solid fa-rotate-left", "ActionVariant", "flat", 3, "Action"], [1, "param-row"], [1, "param-header"], [1, "type-badge"], [1, "param-name-wrap"], [1, "param-name"], [1, "value-kind-chip"], [1, "param-actions"], ["type", "button", 1, "btn-icon", "param-expand", 3, "is-expanded", "title"], ["type", "button", "title", "Copy value", 1, "btn-icon", 3, "click"], [1, "param-preview"], [1, "param-expanded"], ["type", "button", 1, "btn-icon", "param-expand", 3, "click", "title"], [2, "height", "240px", "width", "100%", 3, "ngModelChange", "ngModel", "name", "readonly", "language", "lineWrapping"], [1, "json-viewer"], ["name", "formattedMessage", 2, "height", "300px", "width", "100%", 3, "ngModelChange", "ngModel", "readonly", "language", "lineWrapping"], [1, "fas", "fa-comment-alt"], ["Size", "compact", "Icon", "fa-solid fa-inbox", "Title", "No execution data recorded"], [1, "fas", "fa-database"]], template: function MJActionExecutionLogFormComponentExtended_Template(rf, ctx) { if (rf & 1) {
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MJActionExecutionLogFormComponentExtended, selectors: [["mj-action-execution-log-form"]], standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 74, vars: 36, consts: [[1, "record-form-container", "action-execution-log-form", 2, "height", "100%", "display", "flex", "flex-direction", "column"], [1, "record-form", 2, "display", "flex", "flex-direction", "column", "height", "100%", "overflow", "hidden"], [1, "header", "phone-hero"], [1, "header-content"], [1, "header-left"], [1, "icon-wrapper"], [3, "ngClass"], [1, "fas", "fa-terminal"], [1, "header-info"], [1, "meta-info", "phone-hero-detail"], [1, "action-name"], [1, "log-id"], [1, "header-right"], [1, "status-badge"], [1, "fas", 3, "ngClass"], [1, "execution-time", "phone-hero-detail"], [1, "fas", "fa-clock"], [1, "header-stats", "phone-hero-detail", "phone-hero-stats"], [1, "stat"], [1, "label"], [1, "value"], ["type", "button", 1, "phone-hero-summary"], [1, "content-area"], [1, "accordion-container"], [3, "ActiveKeyChange", "Enabled", "ActiveKey"], ["SectionKey", "details", "SectionTitle", "Execution Details", "SectionIcon", "fas fa-info-circle", 3, "Expanded"], ["mjAccordionTitle", ""], [1, "details-grid"], [1, "detail-item"], [1, "monospace"], [1, "detail-value"], ["SectionKey", "parameters", "SectionTitle", "Parameters", "SectionIcon", "fas fa-sliders-h", 3, "SectionCount", "Expanded"], ["SectionKey", "message", "SectionTitle", "Output Message", "SectionIcon", "fas fa-comment-alt", 3, "Expanded"], ["SectionKey", "data", "SectionTitle", "Execution Data", "SectionIcon", "fas fa-database", 3, "Expanded"], [1, "btn-link", 3, "click"], [1, "fas", "fa-external-link-alt"], ["type", "button", 1, "phone-hero-summary", 3, "click"], [1, "phone-hero-summary-text"], ["aria-hidden", "true", 1, "fa-solid", "fa-chevron-down"], [1, "fas", "fa-info-circle"], [1, "params-panel"], [1, "params-toolbar"], [1, "filter-chips"], ["type", "button", 1, "chip", 3, "click"], [1, "chip-count"], ["type", "button", 1, "chip", "chip-input", 3, "click", "disabled"], [1, "fas", "fa-sign-in-alt"], ["type", "button", 1, "chip", "chip-both", 3, "click", "disabled"], [1, "fas", "fa-exchange-alt"], ["type", "button", 1, "chip", "chip-output", 3, "click", "disabled"], [1, "fas", "fa-sign-out-alt"], [1, "toolbar-right"], [1, "search-wrapper"], [1, "fas", "fa-search", "search-icon"], ["type", "text", "placeholder", "Search name or value\u2026", "name", "paramSearch", 1, "mj-input", "params-search", 3, "ngModelChange", "ngModel"], ["type", "button", "title", "Clear search", 1, "search-clear"], ["role", "group", "aria-label", "Sort parameters", 1, "sort-group"], ["type", "button", "title", "Sort by type", 1, "sort-btn", 3, "click"], ["type", "button", "title", "Sort by name", 1, "sort-btn", 3, "click"], ["type", "button", "title", "Toggle raw JSON view", 1, "raw-toggle", 3, "click"], [1, "fas", "fa-code"], [1, "json-viewer", "raw-json-viewer"], [1, "fas", "fa-sliders-h"], [1, "mj-accordion-badge", "mj-accordion-badge--right"], ["type", "button", "title", "Clear search", 1, "search-clear", 3, "click"], [1, "fas", "fa-times"], [1, "json-toolbar"], [1, "json-label"], ["title", "Copy JSON", 1, "btn-icon", 3, "click"], [1, "fas", "fa-copy"], ["name", "formattedParamsRaw", 2, "height", "360px", "width", "100%", 3, "ngModelChange", "ngModel", "readonly", "language", "lineWrapping"], ["Variant", "no-results", "Size", "compact", "Icon", "fa-solid fa-filter-circle-xmark", "Title", "No parameters match the current filter.", "ActionText", "Clear filters", "ActionIcon", "fa-solid fa-rotate-left", "ActionVariant", "flat"], [1, "params-list"], ["Variant", "no-results", "Size", "compact", "Icon", "fa-solid fa-filter-circle-xmark", "Title", "No parameters match the current filter.", "ActionText", "Clear filters", "ActionIcon", "fa-solid fa-rotate-left", "ActionVariant", "flat", 3, "Action"], [1, "param-row"], [1, "param-header"], [1, "type-badge"], [1, "param-name-wrap"], [1, "param-name"], [1, "value-kind-chip"], [1, "param-actions"], ["type", "button", 1, "btn-icon", "param-expand", 3, "is-expanded", "title"], ["type", "button", "title", "Copy value", 1, "btn-icon", 3, "click"], [1, "param-preview"], [1, "param-expanded"], ["type", "button", 1, "btn-icon", "param-expand", 3, "click", "title"], [2, "height", "240px", "width", "100%", 3, "ngModelChange", "ngModel", "name", "readonly", "language", "lineWrapping"], [1, "json-viewer"], ["name", "formattedMessage", 2, "height", "300px", "width", "100%", 3, "ngModelChange", "ngModel", "readonly", "language", "lineWrapping"], [1, "fas", "fa-comment-alt"], ["Size", "compact", "Icon", "fa-solid fa-inbox", "Title", "No execution data recorded"], [1, "fas", "fa-database"]], template: function MJActionExecutionLogFormComponentExtended_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2)(3, "div", 3)(4, "div", 4)(5, "div", 5);
             i0.ɵɵconditionalCreate(6, MJActionExecutionLogFormComponentExtended_Conditional_6_Template, 1, 1, "i", 6)(7, MJActionExecutionLogFormComponentExtended_Conditional_7_Template, 1, 0, "i", 7);
             i0.ɵɵelementEnd();
@@ -928,53 +966,59 @@ let MJActionExecutionLogFormComponentExtended = class MJActionExecutionLogFormCo
             i0.ɵɵconditionalCreate(29, MJActionExecutionLogFormComponentExtended_Conditional_29_Template, 6, 4, "div", 18);
             i0.ɵɵconditionalCreate(30, MJActionExecutionLogFormComponentExtended_Conditional_30_Template, 7, 1, "div", 18);
             i0.ɵɵconditionalCreate(31, MJActionExecutionLogFormComponentExtended_Conditional_31_Template, 7, 1, "div", 18);
-            i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(32, "div", 21)(33, "div", 22)(34, "mj-accordion-panel", 23);
-            i0.ɵɵtemplate(35, MJActionExecutionLogFormComponentExtended_ng_template_35_Template, 2, 0, "ng-template", 24);
-            i0.ɵɵelementStart(36, "div", 25)(37, "div", 26)(38, "label");
-            i0.ɵɵtext(39, "Execution ID");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(40, "span", 27);
-            i0.ɵɵtext(41);
+            i0.ɵɵconditionalCreate(32, MJActionExecutionLogFormComponentExtended_Conditional_32_Template, 4, 2, "button", 21);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(33, "div", 22)(34, "div", 23)(35, "mj-accordion-sections", 24);
+            i0.ɵɵlistener("ActiveKeyChange", function MJActionExecutionLogFormComponentExtended_Template_mj_accordion_sections_ActiveKeyChange_35_listener($event) { return ctx.Phone.Pick($event); });
+            i0.ɵɵelementStart(36, "mj-accordion-panel", 25);
+            i0.ɵɵtemplate(37, MJActionExecutionLogFormComponentExtended_ng_template_37_Template, 2, 0, "ng-template", 26);
+            i0.ɵɵelementStart(38, "div", 27)(39, "div", 28)(40, "label");
+            i0.ɵɵtext(41, "Execution ID");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(42, "span", 29);
+            i0.ɵɵtext(43);
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(42, "div", 26)(43, "label");
-            i0.ɵɵtext(44, "Action ID");
+            i0.ɵɵelementStart(44, "div", 28)(45, "label");
+            i0.ɵɵtext(46, "Action ID");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(45, "span", 27);
-            i0.ɵɵtext(46);
+            i0.ɵɵelementStart(47, "span", 29);
+            i0.ɵɵtext(48);
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(47, "div", 26)(48, "label");
-            i0.ɵɵtext(49, "User ID");
+            i0.ɵɵelementStart(49, "div", 28)(50, "label");
+            i0.ɵɵtext(51, "User ID");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(50, "span", 27);
-            i0.ɵɵtext(51);
+            i0.ɵɵelementStart(52, "span", 29);
+            i0.ɵɵtext(53);
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(52, "div", 26)(53, "label");
-            i0.ɵɵtext(54, "Result Code");
+            i0.ɵɵelementStart(54, "div", 28)(55, "label");
+            i0.ɵɵtext(56, "Result Code");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(55, "span", 28);
-            i0.ɵɵelement(56, "i", 14);
-            i0.ɵɵelementStart(57, "span");
-            i0.ɵɵtext(58);
+            i0.ɵɵelementStart(57, "span", 30);
+            i0.ɵɵelement(58, "i", 14);
+            i0.ɵɵelementStart(59, "span");
+            i0.ɵɵtext(60);
             i0.ɵɵelementEnd()()();
-            i0.ɵɵelementStart(59, "div", 26)(60, "label");
-            i0.ɵɵtext(61, "Duration");
+            i0.ɵɵelementStart(61, "div", 28)(62, "label");
+            i0.ɵɵtext(63, "Duration");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(62, "span");
-            i0.ɵɵtext(63);
+            i0.ɵɵelementStart(64, "span");
+            i0.ɵɵtext(65);
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(64, "div", 26)(65, "label");
-            i0.ɵɵtext(66, "Retention Period");
+            i0.ɵɵelementStart(66, "div", 28)(67, "label");
+            i0.ɵɵtext(68, "Retention Period");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(67, "span");
-            i0.ɵɵtext(68);
-            i0.ɵɵelementEnd()()()();
-            i0.ɵɵconditionalCreate(69, MJActionExecutionLogFormComponentExtended_Conditional_69_Template, 41, 27, "mj-accordion-panel", 23);
-            i0.ɵɵconditionalCreate(70, MJActionExecutionLogFormComponentExtended_Conditional_70_Template, 9, 5, "mj-accordion-panel", 23);
-            i0.ɵɵconditionalCreate(71, MJActionExecutionLogFormComponentExtended_Conditional_71_Template, 3, 1, "mj-accordion-panel", 23);
+            i0.ɵɵelementStart(69, "span");
+            i0.ɵɵtext(70);
             i0.ɵɵelementEnd()()()();
+            i0.ɵɵconditionalCreate(71, MJActionExecutionLogFormComponentExtended_Conditional_71_Template, 41, 28, "mj-accordion-panel", 31);
+            i0.ɵɵconditionalCreate(72, MJActionExecutionLogFormComponentExtended_Conditional_72_Template, 9, 5, "mj-accordion-panel", 32);
+            i0.ɵɵconditionalCreate(73, MJActionExecutionLogFormComponentExtended_Conditional_73_Template, 3, 1, "mj-accordion-panel", 33);
+            i0.ɵɵelementEnd()()()()();
         } if (rf & 2) {
-            i0.ɵɵadvance(6);
+            i0.ɵɵadvance(2);
+            i0.ɵɵclassProp("hero-view", !ctx.EditMode)("hero-compact", !ctx.EditMode && !ctx.HeroDetailsOpen);
+            i0.ɵɵadvance(4);
             i0.ɵɵconditional(ctx.action && ctx.action.IconClass ? 6 : 7);
             i0.ɵɵadvance(6);
             i0.ɵɵconditional(ctx.action ? 12 : -1);
@@ -989,14 +1033,18 @@ let MJActionExecutionLogFormComponentExtended = class MJActionExecutionLogFormCo
             i0.ɵɵadvance(3);
             i0.ɵɵtextInterpolate1(" ", ctx.formatDuration(ctx.getExecutionDuration()), " ");
             i0.ɵɵadvance(6);
-            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(28, 26, ctx.record.StartedAt, "short"));
+            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(28, 33, ctx.record.StartedAt, "short"));
             i0.ɵɵadvance(2);
             i0.ɵɵconditional(ctx.record.EndedAt ? 29 : -1);
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.action ? 30 : -1);
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.user ? 31 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(!ctx.EditMode && ctx.HeroSummary ? 32 : -1);
             i0.ɵɵadvance(3);
+            i0.ɵɵproperty("Enabled", ctx.Phone.IsPhone)("ActiveKey", ctx.Phone.Section);
+            i0.ɵɵadvance();
             i0.ɵɵproperty("Expanded", true);
             i0.ɵɵadvance(7);
             i0.ɵɵtextInterpolate(ctx.record.ID);
@@ -1016,12 +1064,12 @@ let MJActionExecutionLogFormComponentExtended = class MJActionExecutionLogFormCo
             i0.ɵɵadvance(5);
             i0.ɵɵtextInterpolate(ctx.record.RetentionPeriod ? ctx.record.RetentionPeriod + " days" : "Indefinite");
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.hasAnyParameters ? 69 : -1);
+            i0.ɵɵconditional(ctx.hasAnyParameters ? 71 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.record.Message ? 70 : -1);
+            i0.ɵɵconditional(ctx.record.Message ? 72 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(!ctx.record.Params && !ctx.record.Message && !ctx.hasAnyParameters ? 71 : -1);
-        } }, dependencies: [i1.NgClass, i2.DefaultValueAccessor, i2.NgControlStatus, i2.NgModel, i3.MJEmptyStateComponent, i3.MJAccordionPanelComponent, i3.MJAccordionTitleDirective, i4.CodeEditorComponent, i1.DatePipe], styles: ["\n[_nghost-%COMP%] {\n  display: block;\n  height: 100%;\n}\n\n.action-execution-log-form[_ngcontent-%COMP%] {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  background: var(--mj-bg-page);\n  color: var(--mj-text-primary);\n}\n\n\n.header[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-card);\n  border-bottom: 1px solid var(--mj-border-default);\n  padding: 20px;\n  box-shadow: var(--mj-shadow-sm);\n}\n\n.header-content[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  margin-bottom: 16px;\n}\n\n.header-left[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n}\n\n.icon-wrapper[_ngcontent-%COMP%] {\n  width: 48px;\n  height: 48px;\n  background: var(--mj-status-info);\n  border-radius: var(--mj-radius-lg);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--mj-text-inverse);\n  font-size: var(--mj-text-xl);\n  box-shadow: var(--mj-shadow-sm);\n}\n\n.header-info[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: var(--mj-text-2xl);\n  font-weight: var(--mj-font-semibold);\n  color: var(--mj-text-primary);\n}\n\n.meta-info[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 12px;\n  margin-top: 4px;\n  font-size: var(--mj-text-sm);\n  color: var(--mj-text-muted);\n}\n\n.action-name[_ngcontent-%COMP%] {\n  font-weight: var(--mj-font-medium);\n  color: var(--mj-text-secondary);\n}\n\n.log-id[_ngcontent-%COMP%] {\n  font-family: monospace;\n  font-size: var(--mj-text-xs);\n  opacity: 0.7;\n}\n\n.header-right[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n}\n\n.status-badge[_ngcontent-%COMP%] {\n  padding: 6px 16px;\n  border-radius: var(--mj-radius-full);\n  font-size: var(--mj-text-xs);\n  font-weight: var(--mj-font-semibold);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  color: var(--mj-text-inverse);\n}\n\n.execution-time[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: var(--mj-text-sm);\n  color: var(--mj-text-muted);\n}\n\n.header-stats[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 24px;\n  padding-top: 12px;\n  border-top: 1px solid var(--mj-border-default);\n}\n\n.stat[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.stat[_ngcontent-%COMP%]   .label[_ngcontent-%COMP%] {\n  font-size: var(--mj-text-xs);\n  color: var(--mj-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.stat[_ngcontent-%COMP%]   .value[_ngcontent-%COMP%] {\n  font-size: var(--mj-text-sm);\n  font-weight: var(--mj-font-medium);\n  color: var(--mj-text-secondary);\n}\n\n.record-form[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  min-height: 0;\n}\n\n\n.content-area[_ngcontent-%COMP%] {\n  flex: 1;\n  min-height: 0;\n  overflow-y: auto;\n  padding: 20px;\n}\n\n\n.details-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n  gap: 20px;\n  padding: 20px;\n}\n\n.detail-item[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.detail-item[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n  font-size: var(--mj-text-xs);\n  color: var(--mj-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  font-weight: var(--mj-font-semibold);\n}\n\n.detail-value[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color: var(--mj-text-primary);\n}\n\n.btn-link[_ngcontent-%COMP%] {\n  background: none;\n  border: none;\n  color: var(--mj-brand-primary);\n  cursor: pointer;\n  font-size: var(--mj-text-sm);\n  padding: 4px;\n}\n\n.btn-link[_ngcontent-%COMP%]:hover {\n  color: var(--mj-brand-primary-hover);\n}\n\n.loading[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n  font-size: var(--mj-text-xs);\n}\n\n\n.json-viewer[_ngcontent-%COMP%] {\n  padding: 20px;\n  background: var(--mj-bg-surface-sunken);\n  border-radius: var(--mj-radius-md);\n  margin-bottom: 20px;\n}\n\n.json-toolbar[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 12px;\n}\n\n.json-label[_ngcontent-%COMP%] {\n  background: var(--mj-status-info);\n  color: var(--mj-text-inverse);\n  padding: 4px 12px;\n  border-radius: var(--mj-radius-full);\n  font-size: 11px;\n  font-weight: var(--mj-font-semibold);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.btn-icon[_ngcontent-%COMP%] {\n  width: 32px;\n  height: 32px;\n  border: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  border-radius: var(--mj-radius-sm);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  transition: all var(--mj-transition-base);\n  color: var(--mj-text-muted);\n}\n\n.btn-icon[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n  border-color: var(--mj-border-strong);\n  color: var(--mj-text-secondary);\n}\n\n\n.status-badge[data-status=\"success\"][_ngcontent-%COMP%], \n.status-badge[data-status=\"ok\"][_ngcontent-%COMP%], \n.status-badge[data-status=\"completed\"][_ngcontent-%COMP%], \n.status-badge[data-status=\"200\"][_ngcontent-%COMP%] {\n  background-color: var(--mj-status-success);\n  color: var(--mj-text-inverse);\n}\n\n.status-badge[data-status=\"error\"][_ngcontent-%COMP%], \n.status-badge[data-status=\"failed\"][_ngcontent-%COMP%], \n.status-badge[data-status=\"failure\"][_ngcontent-%COMP%] {\n  background-color: var(--mj-status-error);\n  color: var(--mj-text-inverse);\n}\n\n.status-badge[data-status=\"warning\"][_ngcontent-%COMP%], \n.status-badge[data-status=\"pending\"][_ngcontent-%COMP%] {\n  background-color: var(--mj-status-warning);\n  color: var(--mj-color-warning-800);\n}\n\n.status-badge[data-status=\"info\"][_ngcontent-%COMP%], \n.status-badge[data-status=\"running\"][_ngcontent-%COMP%] {\n  background-color: var(--mj-status-info);\n  color: var(--mj-text-inverse);\n}\n\n.status-badge[_ngcontent-%COMP%] {\n  background-color: var(--mj-text-muted);\n  color: var(--mj-text-inverse);\n}\n\n.monospace[_ngcontent-%COMP%] {\n  font-family: 'Courier New', Courier, monospace;\n  font-size: var(--mj-text-xs);\n}\n\n\n\n\n\n.params-panel[_ngcontent-%COMP%] {\n  padding: 18px 20px 22px;\n}\n\n\n.params-toolbar[_ngcontent-%COMP%] {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 14px;\n  align-items: center;\n  justify-content: space-between;\n  padding: 12px 14px;\n  margin-bottom: 14px;\n  background: var(--mj-bg-surface-sunken);\n  border: 1px solid var(--mj-border-subtle);\n  border-radius: var(--mj-radius-lg);\n}\n\n.filter-chips[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 6px;\n  flex-wrap: wrap;\n}\n\n.chip[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  padding: 6px 13px;\n  border-radius: var(--mj-radius-full);\n  border: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-secondary);\n  font-size: var(--mj-text-sm);\n  font-weight: var(--mj-font-medium);\n  cursor: pointer;\n  transition: all var(--mj-transition-base);\n}\n.chip[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: var(--mj-bg-surface-hover);\n  border-color: var(--mj-border-strong);\n  color: var(--mj-text-primary);\n}\n.chip[_ngcontent-%COMP%]:disabled {\n  opacity: 0.45;\n  cursor: not-allowed;\n}\n.chip[_ngcontent-%COMP%]   .chip-count[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 20px;\n  height: 18px;\n  padding: 0 6px;\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-muted);\n  border-radius: var(--mj-radius-full);\n  font-size: 11px;\n  font-weight: var(--mj-font-semibold);\n}\n.chip[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 11px;\n}\n\n.chip.active[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 22%, transparent);\n}\n.chip.active[_ngcontent-%COMP%]   .chip-count[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-text-inverse) 25%, transparent);\n  color: var(--mj-text-inverse);\n}\n\n\n.chip.chip-input.active[_ngcontent-%COMP%] {\n  background: var(--mj-status-info);\n  border-color: var(--mj-status-info);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-status-info) 22%, transparent);\n}\n.chip.chip-output.active[_ngcontent-%COMP%] {\n  background: var(--mj-status-success);\n  border-color: var(--mj-status-success);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-status-success) 22%, transparent);\n}\n.chip.chip-both.active[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 75%, var(--mj-status-warning) 25%);\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 75%, var(--mj-status-warning) 25%);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 22%, transparent);\n}\n\n.toolbar-right[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 8px;\n  align-items: center;\n  flex-wrap: wrap;\n}\n\n.search-wrapper[_ngcontent-%COMP%] {\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n.search-icon[_ngcontent-%COMP%] {\n  position: absolute;\n  left: 10px;\n  color: var(--mj-text-muted);\n  font-size: 12px;\n  pointer-events: none;\n}\n.params-search[_ngcontent-%COMP%] {\n  min-width: 220px;\n  padding: 7px 30px 7px 30px;\n  border-radius: var(--mj-radius-md);\n  font-size: var(--mj-text-sm);\n}\n.search-clear[_ngcontent-%COMP%] {\n  position: absolute;\n  right: 6px;\n  width: 22px;\n  height: 22px;\n  border: none;\n  background: transparent;\n  color: var(--mj-text-muted);\n  border-radius: var(--mj-radius-full);\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n.search-clear[_ngcontent-%COMP%]:hover {\n  color: var(--mj-text-primary);\n  background: var(--mj-bg-surface-hover);\n}\n\n.sort-group[_ngcontent-%COMP%] {\n  display: inline-flex;\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  overflow: hidden;\n  background: var(--mj-bg-surface);\n}\n.sort-btn[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 7px 12px;\n  background: transparent;\n  border: none;\n  color: var(--mj-text-secondary);\n  font-size: var(--mj-text-sm);\n  font-weight: var(--mj-font-medium);\n  cursor: pointer;\n  transition: background var(--mj-transition-base);\n}\n.sort-btn[_ngcontent-%COMP%]    + .sort-btn[_ngcontent-%COMP%] {\n  border-left: 1px solid var(--mj-border-default);\n}\n.sort-btn[_ngcontent-%COMP%]:hover { background: var(--mj-bg-surface-hover); color: var(--mj-text-primary); }\n.sort-btn.active[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n}\n.sort-btn.active[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { color: var(--mj-brand-primary); }\n\n.raw-toggle[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 7px 12px;\n  border: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-secondary);\n  border-radius: var(--mj-radius-md);\n  font-size: var(--mj-text-sm);\n  font-weight: var(--mj-font-medium);\n  cursor: pointer;\n  transition: all var(--mj-transition-base);\n}\n.raw-toggle[_ngcontent-%COMP%]:hover { background: var(--mj-bg-surface-hover); color: var(--mj-text-primary); }\n.raw-toggle.active[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 35%, var(--mj-border-default));\n}\n\n\n.params-list[_ngcontent-%COMP%] {\n  list-style: none;\n  padding: 0;\n  margin: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.param-row[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-left: 3px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  padding: 12px 14px;\n  transition: border-color var(--mj-transition-base), box-shadow var(--mj-transition-base);\n}\n.param-row[_ngcontent-%COMP%]:hover {\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 35%, var(--mj-border-default));\n  box-shadow: 0 1px 3px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n.param-row[data-type=\"Input\"][_ngcontent-%COMP%]  { border-left-color: var(--mj-status-info); }\n.param-row[data-type=\"Output\"][_ngcontent-%COMP%] { border-left-color: var(--mj-status-success); }\n.param-row[data-type=\"Both\"][_ngcontent-%COMP%]   { border-left-color: color-mix(in srgb, var(--mj-brand-primary) 75%, var(--mj-status-warning) 25%); }\n\n.param-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n.type-badge[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 3px 10px;\n  border-radius: var(--mj-radius-full);\n  font-size: 11px;\n  font-weight: var(--mj-font-semibold);\n  text-transform: uppercase;\n  letter-spacing: 0.4px;\n  flex-shrink: 0;\n}\n.type-badge[data-type=\"Input\"][_ngcontent-%COMP%] {\n  background: var(--mj-status-info-bg);\n  color: var(--mj-status-info-text);\n  border: 1px solid color-mix(in srgb, var(--mj-status-info) 30%, transparent);\n}\n.type-badge[data-type=\"Output\"][_ngcontent-%COMP%] {\n  background: var(--mj-status-success-bg);\n  color: var(--mj-status-success-text);\n  border: 1px solid color-mix(in srgb, var(--mj-status-success) 30%, transparent);\n}\n.type-badge[data-type=\"Both\"][_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n  border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 35%, transparent);\n}\n\n.param-name-wrap[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  min-width: 0;\n}\n.param-name[_ngcontent-%COMP%] {\n  font-family: 'SF Mono', 'Fira Code', Menlo, Consolas, monospace;\n  font-size: var(--mj-text-sm);\n  font-weight: var(--mj-font-semibold);\n  color: var(--mj-text-primary);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.value-kind-chip[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 2px 8px;\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-muted);\n  border-radius: var(--mj-radius-full);\n  font-size: 10px;\n  font-weight: var(--mj-font-medium);\n  text-transform: lowercase;\n  letter-spacing: 0.3px;\n  flex-shrink: 0;\n}\n.value-kind-chip[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { font-size: 9px; }\n.value-kind-chip[data-kind=\"number\"][_ngcontent-%COMP%]  { color: var(--mj-status-info-text); background: var(--mj-status-info-bg); }\n.value-kind-chip[data-kind=\"boolean\"][_ngcontent-%COMP%] { color: var(--mj-status-warning-text); background: var(--mj-status-warning-bg); }\n.value-kind-chip[data-kind=\"array\"][_ngcontent-%COMP%]   { color: var(--mj-brand-primary); background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface)); }\n.value-kind-chip[data-kind=\"object\"][_ngcontent-%COMP%]  { color: var(--mj-brand-primary); background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface)); }\n.value-kind-chip[data-kind=\"null\"][_ngcontent-%COMP%], \n.value-kind-chip[data-kind=\"undefined\"][_ngcontent-%COMP%] {\n  color: var(--mj-text-disabled);\n  background: var(--mj-bg-surface-sunken);\n}\n\n.param-actions[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 4px;\n  flex-shrink: 0;\n}\n.param-actions[_ngcontent-%COMP%]   .btn-icon[_ngcontent-%COMP%] {\n  width: 28px;\n  height: 28px;\n}\n.param-expand.is-expanded[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 35%, var(--mj-border-default));\n}\n\n.param-preview[_ngcontent-%COMP%] {\n  margin-top: 8px;\n  padding-left: calc(64px + 12px); \n  font-family: 'SF Mono', 'Fira Code', Menlo, Consolas, monospace;\n  font-size: var(--mj-text-sm);\n  color: var(--mj-text-secondary);\n  word-break: break-word;\n  line-height: 1.55;\n}\n.param-preview[data-kind=\"string\"][_ngcontent-%COMP%]   { color: var(--mj-status-success-text); }\n.param-preview[data-kind=\"number\"][_ngcontent-%COMP%]   { color: var(--mj-status-info-text); }\n.param-preview[data-kind=\"boolean\"][_ngcontent-%COMP%]  { color: var(--mj-status-warning-text); }\n.param-preview[data-kind=\"null\"][_ngcontent-%COMP%], \n.param-preview[data-kind=\"undefined\"][_ngcontent-%COMP%] { color: var(--mj-text-disabled); font-style: italic; }\n.param-preview[data-kind=\"array\"][_ngcontent-%COMP%], \n.param-preview[data-kind=\"object\"][_ngcontent-%COMP%]   { color: var(--mj-brand-primary); }\n\n.param-expanded[_ngcontent-%COMP%] {\n  margin-top: 10px;\n  margin-left: calc(64px + 12px);\n  border: 1px solid var(--mj-border-subtle);\n  border-radius: var(--mj-radius-md);\n  overflow: hidden;\n  background: var(--mj-bg-surface-sunken);\n}\n\n.raw-json-viewer[_ngcontent-%COMP%] { margin-top: 4px; }\n\n\n@media (max-width: 768px) {\n  .header-content[_ngcontent-%COMP%] {\n    flex-direction: column;\n    gap: 16px;\n  }\n\n  .header-stats[_ngcontent-%COMP%] {\n    flex-wrap: wrap;\n  }\n\n  .details-grid[_ngcontent-%COMP%] {\n    grid-template-columns: 1fr;\n  }\n\n  .params-toolbar[_ngcontent-%COMP%] {\n    flex-direction: column;\n    align-items: stretch;\n  }\n  .toolbar-right[_ngcontent-%COMP%] {\n    justify-content: space-between;\n  }\n  .params-search[_ngcontent-%COMP%] { min-width: 0; width: 100%; }\n  .search-wrapper[_ngcontent-%COMP%] { flex: 1; }\n\n  .param-preview[_ngcontent-%COMP%], \n   .param-expanded[_ngcontent-%COMP%] {\n    padding-left: 0;\n    margin-left: 0;\n  }\n}"] }); }
+            i0.ɵɵconditional(!ctx.record.Params && !ctx.record.Message && !ctx.hasAnyParameters ? 73 : -1);
+        } }, dependencies: [i1.NgClass, i2.DefaultValueAccessor, i2.NgControlStatus, i2.NgModel, i3.MJEmptyStateComponent, i3.MJAccordionSectionsComponent, i3.MJAccordionPanelComponent, i3.MJAccordionTitleDirective, i4.CodeEditorComponent, i1.DatePipe], styles: ["\n[_nghost-%COMP%] {\n  display: block;\n  height: 100%;\n}\n\n.action-execution-log-form[_ngcontent-%COMP%] {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  background: var(--mj-bg-page);\n  color: var(--mj-text-primary);\n}\n\n\n.header[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-card);\n  border-bottom: 1px solid var(--mj-border-default);\n  padding: 20px;\n  box-shadow: var(--mj-shadow-sm);\n}\n\n.header-content[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  margin-bottom: 16px;\n}\n\n.header-left[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n}\n\n.icon-wrapper[_ngcontent-%COMP%] {\n  width: 48px;\n  height: 48px;\n  background: var(--mj-status-info);\n  border-radius: var(--mj-radius-lg);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--mj-text-inverse);\n  font-size: var(--mj-text-xl);\n  box-shadow: var(--mj-shadow-sm);\n}\n\n.header-info[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: var(--mj-text-2xl);\n  font-weight: var(--mj-font-semibold);\n  color: var(--mj-text-primary);\n}\n\n.meta-info[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 12px;\n  margin-top: 4px;\n  font-size: var(--mj-text-sm);\n  color: var(--mj-text-muted);\n}\n\n.action-name[_ngcontent-%COMP%] {\n  font-weight: var(--mj-font-medium);\n  color: var(--mj-text-secondary);\n}\n\n.log-id[_ngcontent-%COMP%] {\n  font-family: monospace;\n  font-size: var(--mj-text-xs);\n  opacity: 0.7;\n}\n\n.header-right[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n}\n\n.status-badge[_ngcontent-%COMP%] {\n  padding: 6px 16px;\n  border-radius: var(--mj-radius-full);\n  font-size: var(--mj-text-xs);\n  font-weight: var(--mj-font-semibold);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  color: var(--mj-text-inverse);\n}\n\n.execution-time[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: var(--mj-text-sm);\n  color: var(--mj-text-muted);\n}\n\n.header-stats[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 24px;\n  padding-top: 12px;\n  border-top: 1px solid var(--mj-border-default);\n}\n\n.stat[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.stat[_ngcontent-%COMP%]   .label[_ngcontent-%COMP%] {\n  font-size: var(--mj-text-xs);\n  color: var(--mj-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.stat[_ngcontent-%COMP%]   .value[_ngcontent-%COMP%] {\n  font-size: var(--mj-text-sm);\n  font-weight: var(--mj-font-medium);\n  color: var(--mj-text-secondary);\n}\n\n.record-form[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  min-height: 0;\n}\n\n\n.content-area[_ngcontent-%COMP%] {\n  flex: 1;\n  min-height: 0;\n  overflow-y: auto;\n  padding: 20px;\n}\n\n\n.details-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n  gap: 20px;\n  padding: 20px;\n}\n\n.detail-item[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.detail-item[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n  font-size: var(--mj-text-xs);\n  color: var(--mj-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  font-weight: var(--mj-font-semibold);\n}\n\n.detail-value[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color: var(--mj-text-primary);\n}\n\n.btn-link[_ngcontent-%COMP%] {\n  background: none;\n  border: none;\n  color: var(--mj-brand-primary);\n  cursor: pointer;\n  font-size: var(--mj-text-sm);\n  padding: 4px;\n}\n\n.btn-link[_ngcontent-%COMP%]:hover {\n  color: var(--mj-brand-primary-hover);\n}\n\n.loading[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n  font-size: var(--mj-text-xs);\n}\n\n\n.json-viewer[_ngcontent-%COMP%] {\n  padding: 20px;\n  background: var(--mj-bg-surface-sunken);\n  border-radius: var(--mj-radius-md);\n  margin-bottom: 20px;\n}\n\n.json-toolbar[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 12px;\n}\n\n.json-label[_ngcontent-%COMP%] {\n  background: var(--mj-status-info);\n  color: var(--mj-text-inverse);\n  padding: 4px 12px;\n  border-radius: var(--mj-radius-full);\n  font-size: 11px;\n  font-weight: var(--mj-font-semibold);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.btn-icon[_ngcontent-%COMP%] {\n  width: 32px;\n  height: 32px;\n  border: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  border-radius: var(--mj-radius-sm);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  transition: all var(--mj-transition-base);\n  color: var(--mj-text-muted);\n}\n\n.btn-icon[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n  border-color: var(--mj-border-strong);\n  color: var(--mj-text-secondary);\n}\n\n\n.status-badge[data-status=\"success\"][_ngcontent-%COMP%], \n.status-badge[data-status=\"ok\"][_ngcontent-%COMP%], \n.status-badge[data-status=\"completed\"][_ngcontent-%COMP%], \n.status-badge[data-status=\"200\"][_ngcontent-%COMP%] {\n  background-color: var(--mj-status-success);\n  color: var(--mj-text-inverse);\n}\n\n.status-badge[data-status=\"error\"][_ngcontent-%COMP%], \n.status-badge[data-status=\"failed\"][_ngcontent-%COMP%], \n.status-badge[data-status=\"failure\"][_ngcontent-%COMP%] {\n  background-color: var(--mj-status-error);\n  color: var(--mj-text-inverse);\n}\n\n.status-badge[data-status=\"warning\"][_ngcontent-%COMP%], \n.status-badge[data-status=\"pending\"][_ngcontent-%COMP%] {\n  background-color: var(--mj-status-warning);\n  color: var(--mj-color-warning-800);\n}\n\n.status-badge[data-status=\"info\"][_ngcontent-%COMP%], \n.status-badge[data-status=\"running\"][_ngcontent-%COMP%] {\n  background-color: var(--mj-status-info);\n  color: var(--mj-text-inverse);\n}\n\n.status-badge[_ngcontent-%COMP%] {\n  background-color: var(--mj-text-muted);\n  color: var(--mj-text-inverse);\n}\n\n.monospace[_ngcontent-%COMP%] {\n  font-family: 'Courier New', Courier, monospace;\n  font-size: var(--mj-text-xs);\n}\n\n\n\n\n\n.params-panel[_ngcontent-%COMP%] {\n  padding: 18px 20px 22px;\n}\n\n\n.params-toolbar[_ngcontent-%COMP%] {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 14px;\n  align-items: center;\n  justify-content: space-between;\n  padding: 12px 14px;\n  margin-bottom: 14px;\n  background: var(--mj-bg-surface-sunken);\n  border: 1px solid var(--mj-border-subtle);\n  border-radius: var(--mj-radius-lg);\n}\n\n.filter-chips[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 6px;\n  flex-wrap: wrap;\n}\n\n.chip[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  padding: 6px 13px;\n  border-radius: var(--mj-radius-full);\n  border: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-secondary);\n  font-size: var(--mj-text-sm);\n  font-weight: var(--mj-font-medium);\n  cursor: pointer;\n  transition: all var(--mj-transition-base);\n}\n.chip[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: var(--mj-bg-surface-hover);\n  border-color: var(--mj-border-strong);\n  color: var(--mj-text-primary);\n}\n.chip[_ngcontent-%COMP%]:disabled {\n  opacity: 0.45;\n  cursor: not-allowed;\n}\n.chip[_ngcontent-%COMP%]   .chip-count[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 20px;\n  height: 18px;\n  padding: 0 6px;\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-muted);\n  border-radius: var(--mj-radius-full);\n  font-size: 11px;\n  font-weight: var(--mj-font-semibold);\n}\n.chip[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 11px;\n}\n\n.chip.active[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 22%, transparent);\n}\n.chip.active[_ngcontent-%COMP%]   .chip-count[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-text-inverse) 25%, transparent);\n  color: var(--mj-text-inverse);\n}\n\n\n.chip.chip-input.active[_ngcontent-%COMP%] {\n  background: var(--mj-status-info);\n  border-color: var(--mj-status-info);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-status-info) 22%, transparent);\n}\n.chip.chip-output.active[_ngcontent-%COMP%] {\n  background: var(--mj-status-success);\n  border-color: var(--mj-status-success);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-status-success) 22%, transparent);\n}\n.chip.chip-both.active[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 75%, var(--mj-status-warning) 25%);\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 75%, var(--mj-status-warning) 25%);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 22%, transparent);\n}\n\n.toolbar-right[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 8px;\n  align-items: center;\n  flex-wrap: wrap;\n}\n\n.search-wrapper[_ngcontent-%COMP%] {\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n.search-icon[_ngcontent-%COMP%] {\n  position: absolute;\n  left: 10px;\n  color: var(--mj-text-muted);\n  font-size: 12px;\n  pointer-events: none;\n}\n.params-search[_ngcontent-%COMP%] {\n  min-width: 220px;\n  padding: 7px 30px 7px 30px;\n  border-radius: var(--mj-radius-md);\n  font-size: var(--mj-text-sm);\n}\n.search-clear[_ngcontent-%COMP%] {\n  position: absolute;\n  right: 6px;\n  width: 22px;\n  height: 22px;\n  border: none;\n  background: transparent;\n  color: var(--mj-text-muted);\n  border-radius: var(--mj-radius-full);\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n.search-clear[_ngcontent-%COMP%]:hover {\n  color: var(--mj-text-primary);\n  background: var(--mj-bg-surface-hover);\n}\n\n.sort-group[_ngcontent-%COMP%] {\n  display: inline-flex;\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  overflow: hidden;\n  background: var(--mj-bg-surface);\n}\n.sort-btn[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 7px 12px;\n  background: transparent;\n  border: none;\n  color: var(--mj-text-secondary);\n  font-size: var(--mj-text-sm);\n  font-weight: var(--mj-font-medium);\n  cursor: pointer;\n  transition: background var(--mj-transition-base);\n}\n.sort-btn[_ngcontent-%COMP%]    + .sort-btn[_ngcontent-%COMP%] {\n  border-left: 1px solid var(--mj-border-default);\n}\n.sort-btn[_ngcontent-%COMP%]:hover { background: var(--mj-bg-surface-hover); color: var(--mj-text-primary); }\n.sort-btn.active[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n}\n.sort-btn.active[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { color: var(--mj-brand-primary); }\n\n.raw-toggle[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 7px 12px;\n  border: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-secondary);\n  border-radius: var(--mj-radius-md);\n  font-size: var(--mj-text-sm);\n  font-weight: var(--mj-font-medium);\n  cursor: pointer;\n  transition: all var(--mj-transition-base);\n}\n.raw-toggle[_ngcontent-%COMP%]:hover { background: var(--mj-bg-surface-hover); color: var(--mj-text-primary); }\n.raw-toggle.active[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 35%, var(--mj-border-default));\n}\n\n\n.params-list[_ngcontent-%COMP%] {\n  list-style: none;\n  padding: 0;\n  margin: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.param-row[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-left: 3px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  padding: 12px 14px;\n  transition: border-color var(--mj-transition-base), box-shadow var(--mj-transition-base);\n}\n.param-row[_ngcontent-%COMP%]:hover {\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 35%, var(--mj-border-default));\n  box-shadow: 0 1px 3px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n.param-row[data-type=\"Input\"][_ngcontent-%COMP%]  { border-left-color: var(--mj-status-info); }\n.param-row[data-type=\"Output\"][_ngcontent-%COMP%] { border-left-color: var(--mj-status-success); }\n.param-row[data-type=\"Both\"][_ngcontent-%COMP%]   { border-left-color: color-mix(in srgb, var(--mj-brand-primary) 75%, var(--mj-status-warning) 25%); }\n\n.param-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n.type-badge[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 3px 10px;\n  border-radius: var(--mj-radius-full);\n  font-size: 11px;\n  font-weight: var(--mj-font-semibold);\n  text-transform: uppercase;\n  letter-spacing: 0.4px;\n  flex-shrink: 0;\n}\n.type-badge[data-type=\"Input\"][_ngcontent-%COMP%] {\n  background: var(--mj-status-info-bg);\n  color: var(--mj-status-info-text);\n  border: 1px solid color-mix(in srgb, var(--mj-status-info) 30%, transparent);\n}\n.type-badge[data-type=\"Output\"][_ngcontent-%COMP%] {\n  background: var(--mj-status-success-bg);\n  color: var(--mj-status-success-text);\n  border: 1px solid color-mix(in srgb, var(--mj-status-success) 30%, transparent);\n}\n.type-badge[data-type=\"Both\"][_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n  border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 35%, transparent);\n}\n\n.param-name-wrap[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  min-width: 0;\n}\n.param-name[_ngcontent-%COMP%] {\n  font-family: 'SF Mono', 'Fira Code', Menlo, Consolas, monospace;\n  font-size: var(--mj-text-sm);\n  font-weight: var(--mj-font-semibold);\n  color: var(--mj-text-primary);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.value-kind-chip[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 2px 8px;\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-muted);\n  border-radius: var(--mj-radius-full);\n  font-size: 10px;\n  font-weight: var(--mj-font-medium);\n  text-transform: lowercase;\n  letter-spacing: 0.3px;\n  flex-shrink: 0;\n}\n.value-kind-chip[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { font-size: 9px; }\n.value-kind-chip[data-kind=\"number\"][_ngcontent-%COMP%]  { color: var(--mj-status-info-text); background: var(--mj-status-info-bg); }\n.value-kind-chip[data-kind=\"boolean\"][_ngcontent-%COMP%] { color: var(--mj-status-warning-text); background: var(--mj-status-warning-bg); }\n.value-kind-chip[data-kind=\"array\"][_ngcontent-%COMP%]   { color: var(--mj-brand-primary); background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface)); }\n.value-kind-chip[data-kind=\"object\"][_ngcontent-%COMP%]  { color: var(--mj-brand-primary); background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface)); }\n.value-kind-chip[data-kind=\"null\"][_ngcontent-%COMP%], \n.value-kind-chip[data-kind=\"undefined\"][_ngcontent-%COMP%] {\n  color: var(--mj-text-disabled);\n  background: var(--mj-bg-surface-sunken);\n}\n\n.param-actions[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 4px;\n  flex-shrink: 0;\n}\n.param-actions[_ngcontent-%COMP%]   .btn-icon[_ngcontent-%COMP%] {\n  width: 28px;\n  height: 28px;\n}\n.param-expand.is-expanded[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 35%, var(--mj-border-default));\n}\n\n.param-preview[_ngcontent-%COMP%] {\n  margin-top: 8px;\n  padding-left: calc(64px + 12px); \n  font-family: 'SF Mono', 'Fira Code', Menlo, Consolas, monospace;\n  font-size: var(--mj-text-sm);\n  color: var(--mj-text-secondary);\n  word-break: break-word;\n  line-height: 1.55;\n}\n.param-preview[data-kind=\"string\"][_ngcontent-%COMP%]   { color: var(--mj-status-success-text); }\n.param-preview[data-kind=\"number\"][_ngcontent-%COMP%]   { color: var(--mj-status-info-text); }\n.param-preview[data-kind=\"boolean\"][_ngcontent-%COMP%]  { color: var(--mj-status-warning-text); }\n.param-preview[data-kind=\"null\"][_ngcontent-%COMP%], \n.param-preview[data-kind=\"undefined\"][_ngcontent-%COMP%] { color: var(--mj-text-disabled); font-style: italic; }\n.param-preview[data-kind=\"array\"][_ngcontent-%COMP%], \n.param-preview[data-kind=\"object\"][_ngcontent-%COMP%]   { color: var(--mj-brand-primary); }\n\n.param-expanded[_ngcontent-%COMP%] {\n  margin-top: 10px;\n  margin-left: calc(64px + 12px);\n  border: 1px solid var(--mj-border-subtle);\n  border-radius: var(--mj-radius-md);\n  overflow: hidden;\n  background: var(--mj-bg-surface-sunken);\n}\n\n.raw-json-viewer[_ngcontent-%COMP%] { margin-top: 4px; }\n\n\n@media (max-width: 768px) {\n  .header-content[_ngcontent-%COMP%] {\n    flex-direction: column;\n    gap: 16px;\n  }\n\n  .header-stats[_ngcontent-%COMP%] {\n    flex-wrap: wrap;\n  }\n\n  .details-grid[_ngcontent-%COMP%] {\n    grid-template-columns: 1fr;\n  }\n\n  .params-toolbar[_ngcontent-%COMP%] {\n    flex-direction: column;\n    align-items: stretch;\n  }\n  .toolbar-right[_ngcontent-%COMP%] {\n    justify-content: space-between;\n  }\n  .params-search[_ngcontent-%COMP%] { min-width: 0; width: 100%; }\n  .search-wrapper[_ngcontent-%COMP%] { flex: 1; }\n\n  .param-preview[_ngcontent-%COMP%], \n   .param-expanded[_ngcontent-%COMP%] {\n    padding-left: 0;\n    margin-left: 0;\n  }\n}\n\n\n\n\n@media (max-width: 768px) {\n    .content-area[_ngcontent-%COMP%] {\n        padding: 12px;\n    }\n\n    .params-panel[_ngcontent-%COMP%] {\n        padding-left: 0;\n        padding-right: 0;\n    }\n\n    .param-header[_ngcontent-%COMP%], \n   .param-name[_ngcontent-%COMP%] {\n        min-width: 0;\n    }\n}", "\n\n\n\n\n\n\n\n\n\n\n\n\n\n.phone-hero-summary[_ngcontent-%COMP%], \n.phone-hero-only[_ngcontent-%COMP%] {\n    display: none;\n}\n\n@media (max-width: 768px) {\n    .phone-hero[_ngcontent-%COMP%] {\n        padding: 12px !important;\n    }\n\n    \n    .phone-hero.hero-compact[_ngcontent-%COMP%]   .phone-hero-detail[_ngcontent-%COMP%], \n   .phone-hero.hero-view[_ngcontent-%COMP%]   .phone-hero-hide[_ngcontent-%COMP%] {\n        display: none !important;\n    }\n\n    .phone-hero-only[_ngcontent-%COMP%] {\n        display: inline-flex;\n    }\n\n    \n    .phone-hero[_ngcontent-%COMP%]   .phone-hero-stats[_ngcontent-%COMP%] {\n        display: grid !important;\n        grid-template-columns: repeat(2, minmax(0, 1fr));\n        gap: 8px;\n    }\n\n    .phone-hero-status[_ngcontent-%COMP%] {\n        align-items: center;\n        gap: 4px;\n        margin-left: 8px;\n        padding: 2px 8px;\n        border-radius: var(--mj-radius-full, 999px);\n        color: var(--mj-text-secondary);\n        background: var(--mj-bg-surface-sunken);\n        font-size: var(--mj-text-xs);\n        font-weight: var(--mj-font-semibold);\n        vertical-align: middle;\n        white-space: nowrap;\n    }\n\n    \n    .phone-hero-status[data-status=\"running\"][_ngcontent-%COMP%] { color: var(--mj-status-warning-text); background: var(--mj-status-warning-bg); }\n    .phone-hero-status[data-status=\"success\"][_ngcontent-%COMP%] { color: var(--mj-status-success-text); background: var(--mj-status-success-bg); }\n    .phone-hero-status[data-status=\"error\"][_ngcontent-%COMP%]   { color: var(--mj-status-error-text);   background: var(--mj-status-error-bg); }\n    .phone-hero-status[data-status=\"info\"][_ngcontent-%COMP%]    { color: var(--mj-status-info-text);    background: var(--mj-status-info-bg); }\n\n    .phone-hero-top[_ngcontent-%COMP%] {\n        flex-direction: column;\n        align-items: stretch;\n        gap: 10px;\n    }\n\n    .phone-hero-actions[_ngcontent-%COMP%] {\n        width: 100%;\n    }\n\n    .phone-hero[_ngcontent-%COMP%]   .phone-hero-run[_ngcontent-%COMP%] {\n        width: 100%;\n        min-height: 44px;\n        justify-content: center;\n    }\n\n    \n\n    .phone-hero-summary[_ngcontent-%COMP%] {\n        display: flex;\n        align-items: center;\n        gap: 8px;\n        width: 100%;\n        min-height: 44px;\n        margin-top: 8px;\n        padding: 0 4px;\n        border: 0;\n        border-top: 1px solid color-mix(in srgb, currentColor 20%, transparent);\n        background: transparent;\n        color: inherit;\n        font: inherit;\n        font-size: var(--mj-text-sm);\n        text-align: left;\n        cursor: pointer;\n        opacity: 0.85;\n    }\n\n    .phone-hero-summary[_ngcontent-%COMP%]:focus-visible {\n        outline: none;\n        box-shadow: var(--mj-focus-ring);\n    }\n\n    .phone-hero-summary-text[_ngcontent-%COMP%] {\n        flex: 1 1 auto;\n        min-width: 0;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n    }\n\n    .phone-hero-summary[_ngcontent-%COMP%]    > i[_ngcontent-%COMP%] {\n        flex-shrink: 0;\n        transition: transform 0.15s ease;\n    }\n\n    .phone-hero-summary[aria-expanded=\"true\"][_ngcontent-%COMP%]    > i[_ngcontent-%COMP%] {\n        transform: rotate(180deg);\n    }\n}\n\n@media (prefers-reduced-motion: reduce) {\n    .phone-hero-summary[_ngcontent-%COMP%]    > i[_ngcontent-%COMP%] {\n        transition: none;\n    }\n}"] }); }
 };
 MJActionExecutionLogFormComponentExtended = __decorate([
     RegisterClass(BaseFormComponent, 'MJ: Action Execution Logs')
@@ -1029,7 +1077,7 @@ MJActionExecutionLogFormComponentExtended = __decorate([
 export { MJActionExecutionLogFormComponentExtended };
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MJActionExecutionLogFormComponentExtended, [{
         type: Component,
-        args: [{ standalone: false, selector: 'mj-action-execution-log-form', template: "<div class=\"record-form-container action-execution-log-form\" style=\"height: 100%; display: flex; flex-direction: column;\">\n    <div class=\"record-form\" style=\"display: flex; flex-direction: column; height: 100%; overflow: hidden;\">\n        <!-- Header -->\n        <div class=\"header\">\n            <div class=\"header-content\">\n                <div class=\"header-left\">\n                    <div class=\"icon-wrapper\">\n                        <!-- The action's own icon when it has one, matching how the same action is\n                             drawn in the run timeline. `fa-terminal` stays as the fallback: it is\n                             what this form has always shown, and it is the honest answer for an\n                             action whose metadata names no icon. -->\n                        @if (action && action.IconClass) {\n                            <i [ngClass]=\"action.IconClass\"></i>\n                        } @else {\n                            <i class=\"fas fa-terminal\"></i>\n                        }\n                    </div>\n                    <div class=\"header-info\">\n                        <h2>Action Execution Log</h2>\n                        <div class=\"meta-info\">\n                            @if (action) {\n                                <span class=\"action-name\">{{ action.Name }}</span>\n                            }\n                            <span class=\"log-id\">{{ record.ID }}</span>\n                        </div>\n                    </div>\n                </div>\n                <div class=\"header-right\">\n                    <div class=\"status-badge\" [attr.data-status]=\"record.ResultCode?.toLowerCase()\">\n                        <i class=\"fas\" [ngClass]=\"getResultCodeIcon()\"></i>\n                        {{ record.ResultCode || 'UNKNOWN' }}\n                    </div>\n                    <div class=\"execution-time\">\n                        <i class=\"fas fa-clock\"></i>\n                        {{ formatDuration(getExecutionDuration()) }}\n                    </div>\n                </div>\n            </div>\n            <div class=\"header-stats\">\n                <div class=\"stat\">\n                    <span class=\"label\">Started</span>\n                    <span class=\"value\">{{ record.StartedAt | date:'short' }}</span>\n                </div>\n                @if (record.EndedAt) {\n                    <div class=\"stat\">\n                        <span class=\"label\">Ended</span>\n                        <span class=\"value\">{{ record.EndedAt | date:'short' }}</span>\n                    </div>\n                }\n                @if (action) {\n                    <div class=\"stat\">\n                        <span class=\"label\">Action</span>\n                        <span class=\"value\">\n                            <button class=\"btn-link\" (click)=\"navigateToAction()\">\n                                {{ action.Name }}\n                                <i class=\"fas fa-external-link-alt\"></i>\n                            </button>\n                        </span>\n                    </div>\n                }\n                @if (user) {\n                    <div class=\"stat\">\n                        <span class=\"label\">User</span>\n                        <span class=\"value\">\n                            <button class=\"btn-link\" (click)=\"navigateToUser()\">\n                                {{ user.Name }}\n                                <i class=\"fas fa-external-link-alt\"></i>\n                            </button>\n                        </span>\n                    </div>\n                }\n            </div>\n        </div>\n\n        <!-- Content Area -->\n        <div class=\"content-area\">\n            <div class=\"accordion-container\">\n                <!-- Execution Details -->\n                <mj-accordion-panel [Expanded]=\"true\">\n                    <ng-template mjAccordionTitle>\n                      <i class=\"fas fa-info-circle\"></i> Execution Details\n                    </ng-template>\n                        <div class=\"details-grid\">\n                            <div class=\"detail-item\">\n                                <label>Execution ID</label>\n                                <span class=\"monospace\">{{ record.ID }}</span>\n                            </div>\n                            <div class=\"detail-item\">\n                                <label>Action ID</label>\n                                <span class=\"monospace\">{{ record.ActionID }}</span>\n                            </div>\n                            <div class=\"detail-item\">\n                                <label>User ID</label>\n                                <span class=\"monospace\">{{ record.UserID }}</span>\n                            </div>\n                            <div class=\"detail-item\">\n                                <label>Result Code</label>\n                                <span class=\"detail-value\">\n                                    <i class=\"fas\" [ngClass]=\"getResultCodeIcon()\" [style.color]=\"getResultCodeColor()\"></i>\n                                    <span [style.color]=\"getResultCodeColor()\">{{ record.ResultCode || 'N/A' }}</span>\n                                </span>\n                            </div>\n                            <div class=\"detail-item\">\n                                <label>Duration</label>\n                                <span>{{ formatDuration(getExecutionDuration()) }}</span>\n                            </div>\n                            <div class=\"detail-item\">\n                                <label>Retention Period</label>\n                                <span>{{ record.RetentionPeriod ? record.RetentionPeriod + ' days' : 'Indefinite' }}</span>\n                            </div>\n                        </div>\n                </mj-accordion-panel>\n\n                <!-- Unified Parameters section -->\n                @if (hasAnyParameters) {\n                    <mj-accordion-panel [Expanded]=\"true\">\n                        <ng-template mjAccordionTitle>\n                          <i class=\"fas fa-sliders-h\"></i>\n                          Parameters\n                          <span class=\"mj-accordion-badge mj-accordion-badge--right\">{{ paramCounts.All }}</span>\n                        </ng-template>\n                        <div class=\"params-panel\">\n                            <!-- Toolbar: filter chips, search, sort, raw toggle -->\n                            <div class=\"params-toolbar\">\n                                <div class=\"filter-chips\">\n                                    <button\n                                        type=\"button\"\n                                        class=\"chip\"\n                                        [class.active]=\"typeFilter === 'All'\"\n                                        (click)=\"setTypeFilter('All')\">\n                                        All <span class=\"chip-count\">{{ paramCounts.All }}</span>\n                                    </button>\n                                    <button\n                                        type=\"button\"\n                                        class=\"chip chip-input\"\n                                        [class.active]=\"typeFilter === 'Input'\"\n                                        [disabled]=\"paramCounts.Input === 0\"\n                                        (click)=\"setTypeFilter('Input')\">\n                                        <i class=\"fas fa-sign-in-alt\"></i>\n                                        Input <span class=\"chip-count\">{{ paramCounts.Input }}</span>\n                                    </button>\n                                    <button\n                                        type=\"button\"\n                                        class=\"chip chip-both\"\n                                        [class.active]=\"typeFilter === 'Both'\"\n                                        [disabled]=\"paramCounts.Both === 0\"\n                                        (click)=\"setTypeFilter('Both')\">\n                                        <i class=\"fas fa-exchange-alt\"></i>\n                                        In/Out <span class=\"chip-count\">{{ paramCounts.Both }}</span>\n                                    </button>\n                                    <button\n                                        type=\"button\"\n                                        class=\"chip chip-output\"\n                                        [class.active]=\"typeFilter === 'Output'\"\n                                        [disabled]=\"paramCounts.Output === 0\"\n                                        (click)=\"setTypeFilter('Output')\">\n                                        <i class=\"fas fa-sign-out-alt\"></i>\n                                        Output <span class=\"chip-count\">{{ paramCounts.Output }}</span>\n                                    </button>\n                                </div>\n\n                                <div class=\"toolbar-right\">\n                                    <div class=\"search-wrapper\">\n                                        <i class=\"fas fa-search search-icon\"></i>\n                                        <input\n                                            type=\"text\"\n                                            class=\"mj-input params-search\"\n                                            placeholder=\"Search name or value\u2026\"\n                                            [(ngModel)]=\"searchText\"\n                                            name=\"paramSearch\" />\n                                        @if (searchText) {\n                                            <button type=\"button\" class=\"search-clear\" (click)=\"searchText = ''\" title=\"Clear search\">\n                                                <i class=\"fas fa-times\"></i>\n                                            </button>\n                                        }\n                                    </div>\n\n                                    <div class=\"sort-group\" role=\"group\" aria-label=\"Sort parameters\">\n                                        <button\n                                            type=\"button\"\n                                            class=\"sort-btn\"\n                                            [class.active]=\"sortKey === 'type'\"\n                                            (click)=\"toggleSort('type')\"\n                                            title=\"Sort by type\">\n                                            Type\n                                            @if (sortKey === 'type') {\n                                                <i class=\"fas\" [ngClass]=\"sortDir === 'asc' ? 'fa-arrow-down-short-wide' : 'fa-arrow-up-wide-short'\"></i>\n                                            }\n                                        </button>\n                                        <button\n                                            type=\"button\"\n                                            class=\"sort-btn\"\n                                            [class.active]=\"sortKey === 'name'\"\n                                            (click)=\"toggleSort('name')\"\n                                            title=\"Sort by name\">\n                                            Name\n                                            @if (sortKey === 'name') {\n                                                <i class=\"fas\" [ngClass]=\"sortDir === 'asc' ? 'fa-arrow-down-a-z' : 'fa-arrow-up-z-a'\"></i>\n                                            }\n                                        </button>\n                                    </div>\n\n                                    <button\n                                        type=\"button\"\n                                        class=\"raw-toggle\"\n                                        [class.active]=\"showRawJson\"\n                                        (click)=\"toggleRawJson()\"\n                                        title=\"Toggle raw JSON view\">\n                                        <i class=\"fas fa-code\"></i>\n                                        Raw\n                                    </button>\n                                </div>\n                            </div>\n\n                            @if (showRawJson) {\n                                <div class=\"json-viewer raw-json-viewer\">\n                                    <div class=\"json-toolbar\">\n                                        <span class=\"json-label\">Raw JSON</span>\n                                        <button class=\"btn-icon\" title=\"Copy JSON\" (click)=\"copyToClipboard(formattedParams)\">\n                                            <i class=\"fas fa-copy\"></i>\n                                        </button>\n                                    </div>\n                                    <mj-code-editor\n                                        [(ngModel)]=\"formattedParams\"\n                                        name=\"formattedParamsRaw\"\n                                        [readonly]=\"true\"\n                                        [language]=\"'json'\"\n                                        [lineWrapping]=\"true\"\n                                        style=\"height: 360px; width: 100%;\">\n                                    </mj-code-editor>\n                                </div>\n                            } @else {\n                                <!-- Rich param list -->\n                                @if (filteredParameters.length === 0) {\n                                    <mj-empty-state\n                                        Variant=\"no-results\"\n                                        Size=\"compact\"\n                                        Icon=\"fa-solid fa-filter-circle-xmark\"\n                                        Title=\"No parameters match the current filter.\"\n                                        ActionText=\"Clear filters\"\n                                        ActionIcon=\"fa-solid fa-rotate-left\"\n                                        ActionVariant=\"flat\"\n                                        (Action)=\"clearFilters()\" />\n                                } @else {\n                                    <ul class=\"params-list\">\n                                        @for (p of filteredParameters; track trackParam($index, p)) {\n                                            <li class=\"param-row\" [attr.data-type]=\"p.Type\">\n                                                <div class=\"param-header\">\n                                                    <span class=\"type-badge\" [attr.data-type]=\"p.Type\">\n                                                        @if (p.Type === 'Input') {\n                                                            <i class=\"fas fa-sign-in-alt\"></i>\n                                                        } @else if (p.Type === 'Output') {\n                                                            <i class=\"fas fa-sign-out-alt\"></i>\n                                                        } @else {\n                                                            <i class=\"fas fa-exchange-alt\"></i>\n                                                        }\n                                                        {{ getTypeLabel(p.Type) }}\n                                                    </span>\n                                                    <div class=\"param-name-wrap\">\n                                                        <span class=\"param-name\">{{ p.Name }}</span>\n                                                        <span class=\"value-kind-chip\" [attr.data-kind]=\"p.ValueKind\">\n                                                            <i class=\"fas\" [ngClass]=\"getValueKindIcon(p.ValueKind)\"></i>\n                                                            {{ p.ValueKind }}\n                                                        </span>\n                                                    </div>\n                                                    <div class=\"param-actions\">\n                                                        @if (p.IsExpandable) {\n                                                            <button type=\"button\" class=\"btn-icon param-expand\" [class.is-expanded]=\"p.Expanded\" (click)=\"toggleExpanded(p)\" [title]=\"p.Expanded ? 'Collapse' : 'Expand'\">\n                                                                <i class=\"fas\" [ngClass]=\"p.Expanded ? 'fa-chevron-up' : 'fa-chevron-down'\"></i>\n                                                            </button>\n                                                        }\n                                                        <button type=\"button\" class=\"btn-icon\" (click)=\"copyParamValue(p)\" title=\"Copy value\">\n                                                            <i class=\"fas fa-copy\"></i>\n                                                        </button>\n                                                    </div>\n                                                </div>\n                                                <div class=\"param-preview\" [attr.data-kind]=\"p.ValueKind\">{{ p.Preview }}</div>\n                                                @if (p.IsExpandable && p.Expanded) {\n                                                    <div class=\"param-expanded\">\n                                                        <mj-code-editor\n                                                            [(ngModel)]=\"p.FormattedValue\"\n                                                            [name]=\"'param-' + p.Name\"\n                                                            [readonly]=\"true\"\n                                                            [language]=\"'json'\"\n                                                            [lineWrapping]=\"true\"\n                                                            style=\"height: 240px; width: 100%;\">\n                                                        </mj-code-editor>\n                                                    </div>\n                                                }\n                                            </li>\n                                        }\n                                    </ul>\n                                }\n                            }\n                        </div>\n                    </mj-accordion-panel>\n                }\n\n                <!-- Output Message -->\n                @if (record.Message) {\n                    <mj-accordion-panel [Expanded]=\"true\">\n                        <ng-template mjAccordionTitle>\n                          <i class=\"fas fa-comment-alt\"></i> Output Message\n                        </ng-template>\n                            <div class=\"json-viewer\">\n                                <div class=\"json-toolbar\">\n                                    <span class=\"json-label\">JSON</span>\n                                    <button class=\"btn-icon\" title=\"Copy JSON\" (click)=\"copyToClipboard(formattedMessage)\">\n                                        <i class=\"fas fa-copy\"></i>\n                                    </button>\n                                </div>\n                                <mj-code-editor \n                                    [(ngModel)]=\"formattedMessage\"\n                                    name=\"formattedMessage\"\n                                    [readonly]=\"true\"\n                                    [language]=\"'json'\"\n                                    [lineWrapping]=\"true\"\n                                    style=\"height: 300px; width: 100%;\">\n                                </mj-code-editor>\n                            </div>\n                    </mj-accordion-panel>\n                }\n\n                <!-- Empty States for missing data -->\n                @if (!record.Params && !record.Message && !hasAnyParameters) {\n                    <mj-accordion-panel [Expanded]=\"true\">\n                        <ng-template mjAccordionTitle>\n                          <i class=\"fas fa-database\"></i> Execution Data\n                        </ng-template>\n                            <mj-empty-state\n                                Size=\"compact\"\n                                Icon=\"fa-solid fa-inbox\"\n                                Title=\"No execution data recorded\" />\n                    </mj-accordion-panel>\n                }\n            </div>\n        </div>\n    </div>\n</div>", styles: ["/* Action Execution Log Form Styles */\n:host {\n  display: block;\n  height: 100%;\n}\n\n.action-execution-log-form {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  background: var(--mj-bg-page);\n  color: var(--mj-text-primary);\n}\n\n/* Header Styles */\n.header {\n  background: var(--mj-bg-surface-card);\n  border-bottom: 1px solid var(--mj-border-default);\n  padding: 20px;\n  box-shadow: var(--mj-shadow-sm);\n}\n\n.header-content {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  margin-bottom: 16px;\n}\n\n.header-left {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n}\n\n.icon-wrapper {\n  width: 48px;\n  height: 48px;\n  background: var(--mj-status-info);\n  border-radius: var(--mj-radius-lg);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--mj-text-inverse);\n  font-size: var(--mj-text-xl);\n  box-shadow: var(--mj-shadow-sm);\n}\n\n.header-info h2 {\n  margin: 0;\n  font-size: var(--mj-text-2xl);\n  font-weight: var(--mj-font-semibold);\n  color: var(--mj-text-primary);\n}\n\n.meta-info {\n  display: flex;\n  gap: 12px;\n  margin-top: 4px;\n  font-size: var(--mj-text-sm);\n  color: var(--mj-text-muted);\n}\n\n.action-name {\n  font-weight: var(--mj-font-medium);\n  color: var(--mj-text-secondary);\n}\n\n.log-id {\n  font-family: monospace;\n  font-size: var(--mj-text-xs);\n  opacity: 0.7;\n}\n\n.header-right {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n}\n\n.status-badge {\n  padding: 6px 16px;\n  border-radius: var(--mj-radius-full);\n  font-size: var(--mj-text-xs);\n  font-weight: var(--mj-font-semibold);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  color: var(--mj-text-inverse);\n}\n\n.execution-time {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: var(--mj-text-sm);\n  color: var(--mj-text-muted);\n}\n\n.header-stats {\n  display: flex;\n  gap: 24px;\n  padding-top: 12px;\n  border-top: 1px solid var(--mj-border-default);\n}\n\n.stat {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.stat .label {\n  font-size: var(--mj-text-xs);\n  color: var(--mj-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.stat .value {\n  font-size: var(--mj-text-sm);\n  font-weight: var(--mj-font-medium);\n  color: var(--mj-text-secondary);\n}\n\n.record-form {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  min-height: 0;\n}\n\n/* Content Area */\n.content-area {\n  flex: 1;\n  min-height: 0;\n  overflow-y: auto;\n  padding: 20px;\n}\n\n/* Details Grid */\n.details-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n  gap: 20px;\n  padding: 20px;\n}\n\n.detail-item {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.detail-item label {\n  font-size: var(--mj-text-xs);\n  color: var(--mj-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  font-weight: var(--mj-font-semibold);\n}\n\n.detail-value {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color: var(--mj-text-primary);\n}\n\n.btn-link {\n  background: none;\n  border: none;\n  color: var(--mj-brand-primary);\n  cursor: pointer;\n  font-size: var(--mj-text-sm);\n  padding: 4px;\n}\n\n.btn-link:hover {\n  color: var(--mj-brand-primary-hover);\n}\n\n.loading {\n  color: var(--mj-text-muted);\n  font-size: var(--mj-text-xs);\n}\n\n/* JSON Viewer */\n.json-viewer {\n  padding: 20px;\n  background: var(--mj-bg-surface-sunken);\n  border-radius: var(--mj-radius-md);\n  margin-bottom: 20px;\n}\n\n.json-toolbar {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 12px;\n}\n\n.json-label {\n  background: var(--mj-status-info);\n  color: var(--mj-text-inverse);\n  padding: 4px 12px;\n  border-radius: var(--mj-radius-full);\n  font-size: 11px;\n  font-weight: var(--mj-font-semibold);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.btn-icon {\n  width: 32px;\n  height: 32px;\n  border: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  border-radius: var(--mj-radius-sm);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  transition: all var(--mj-transition-base);\n  color: var(--mj-text-muted);\n}\n\n.btn-icon:hover {\n  background: var(--mj-bg-surface-hover);\n  border-color: var(--mj-border-strong);\n  color: var(--mj-text-secondary);\n}\n\n/* Status badge colors based on data-status attribute */\n.status-badge[data-status=\"success\"],\n.status-badge[data-status=\"ok\"],\n.status-badge[data-status=\"completed\"],\n.status-badge[data-status=\"200\"] {\n  background-color: var(--mj-status-success);\n  color: var(--mj-text-inverse);\n}\n\n.status-badge[data-status=\"error\"],\n.status-badge[data-status=\"failed\"],\n.status-badge[data-status=\"failure\"] {\n  background-color: var(--mj-status-error);\n  color: var(--mj-text-inverse);\n}\n\n.status-badge[data-status=\"warning\"],\n.status-badge[data-status=\"pending\"] {\n  background-color: var(--mj-status-warning);\n  color: var(--mj-color-warning-800);\n}\n\n.status-badge[data-status=\"info\"],\n.status-badge[data-status=\"running\"] {\n  background-color: var(--mj-status-info);\n  color: var(--mj-text-inverse);\n}\n\n.status-badge {\n  background-color: var(--mj-text-muted);\n  color: var(--mj-text-inverse);\n}\n\n.monospace {\n  font-family: 'Courier New', Courier, monospace;\n  font-size: var(--mj-text-xs);\n}\n\n/* ============================================================\n   Unified Parameters Panel\n   ============================================================ */\n\n.params-panel {\n  padding: 18px 20px 22px;\n}\n\n/* Toolbar --------------------------------------------------------------- */\n.params-toolbar {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 14px;\n  align-items: center;\n  justify-content: space-between;\n  padding: 12px 14px;\n  margin-bottom: 14px;\n  background: var(--mj-bg-surface-sunken);\n  border: 1px solid var(--mj-border-subtle);\n  border-radius: var(--mj-radius-lg);\n}\n\n.filter-chips {\n  display: flex;\n  gap: 6px;\n  flex-wrap: wrap;\n}\n\n.chip {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  padding: 6px 13px;\n  border-radius: var(--mj-radius-full);\n  border: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-secondary);\n  font-size: var(--mj-text-sm);\n  font-weight: var(--mj-font-medium);\n  cursor: pointer;\n  transition: all var(--mj-transition-base);\n}\n.chip:hover:not(:disabled) {\n  background: var(--mj-bg-surface-hover);\n  border-color: var(--mj-border-strong);\n  color: var(--mj-text-primary);\n}\n.chip:disabled {\n  opacity: 0.45;\n  cursor: not-allowed;\n}\n.chip .chip-count {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 20px;\n  height: 18px;\n  padding: 0 6px;\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-muted);\n  border-radius: var(--mj-radius-full);\n  font-size: 11px;\n  font-weight: var(--mj-font-semibold);\n}\n.chip i {\n  font-size: 11px;\n}\n\n.chip.active {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 22%, transparent);\n}\n.chip.active .chip-count {\n  background: color-mix(in srgb, var(--mj-text-inverse) 25%, transparent);\n  color: var(--mj-text-inverse);\n}\n\n/* Chip type flavors (active state tints per Input/Output/Both). */\n.chip.chip-input.active {\n  background: var(--mj-status-info);\n  border-color: var(--mj-status-info);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-status-info) 22%, transparent);\n}\n.chip.chip-output.active {\n  background: var(--mj-status-success);\n  border-color: var(--mj-status-success);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-status-success) 22%, transparent);\n}\n.chip.chip-both.active {\n  background: color-mix(in srgb, var(--mj-brand-primary) 75%, var(--mj-status-warning) 25%);\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 75%, var(--mj-status-warning) 25%);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 22%, transparent);\n}\n\n.toolbar-right {\n  display: flex;\n  gap: 8px;\n  align-items: center;\n  flex-wrap: wrap;\n}\n\n.search-wrapper {\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n.search-icon {\n  position: absolute;\n  left: 10px;\n  color: var(--mj-text-muted);\n  font-size: 12px;\n  pointer-events: none;\n}\n.params-search {\n  min-width: 220px;\n  padding: 7px 30px 7px 30px;\n  border-radius: var(--mj-radius-md);\n  font-size: var(--mj-text-sm);\n}\n.search-clear {\n  position: absolute;\n  right: 6px;\n  width: 22px;\n  height: 22px;\n  border: none;\n  background: transparent;\n  color: var(--mj-text-muted);\n  border-radius: var(--mj-radius-full);\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n.search-clear:hover {\n  color: var(--mj-text-primary);\n  background: var(--mj-bg-surface-hover);\n}\n\n.sort-group {\n  display: inline-flex;\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  overflow: hidden;\n  background: var(--mj-bg-surface);\n}\n.sort-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 7px 12px;\n  background: transparent;\n  border: none;\n  color: var(--mj-text-secondary);\n  font-size: var(--mj-text-sm);\n  font-weight: var(--mj-font-medium);\n  cursor: pointer;\n  transition: background var(--mj-transition-base);\n}\n.sort-btn + .sort-btn {\n  border-left: 1px solid var(--mj-border-default);\n}\n.sort-btn:hover { background: var(--mj-bg-surface-hover); color: var(--mj-text-primary); }\n.sort-btn.active {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n}\n.sort-btn.active i { color: var(--mj-brand-primary); }\n\n.raw-toggle {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 7px 12px;\n  border: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-secondary);\n  border-radius: var(--mj-radius-md);\n  font-size: var(--mj-text-sm);\n  font-weight: var(--mj-font-medium);\n  cursor: pointer;\n  transition: all var(--mj-transition-base);\n}\n.raw-toggle:hover { background: var(--mj-bg-surface-hover); color: var(--mj-text-primary); }\n.raw-toggle.active {\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 35%, var(--mj-border-default));\n}\n\n/* Param list rows -------------------------------------------------------- */\n.params-list {\n  list-style: none;\n  padding: 0;\n  margin: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.param-row {\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-left: 3px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  padding: 12px 14px;\n  transition: border-color var(--mj-transition-base), box-shadow var(--mj-transition-base);\n}\n.param-row:hover {\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 35%, var(--mj-border-default));\n  box-shadow: 0 1px 3px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n.param-row[data-type=\"Input\"]  { border-left-color: var(--mj-status-info); }\n.param-row[data-type=\"Output\"] { border-left-color: var(--mj-status-success); }\n.param-row[data-type=\"Both\"]   { border-left-color: color-mix(in srgb, var(--mj-brand-primary) 75%, var(--mj-status-warning) 25%); }\n\n.param-header {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n.type-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 3px 10px;\n  border-radius: var(--mj-radius-full);\n  font-size: 11px;\n  font-weight: var(--mj-font-semibold);\n  text-transform: uppercase;\n  letter-spacing: 0.4px;\n  flex-shrink: 0;\n}\n.type-badge[data-type=\"Input\"] {\n  background: var(--mj-status-info-bg);\n  color: var(--mj-status-info-text);\n  border: 1px solid color-mix(in srgb, var(--mj-status-info) 30%, transparent);\n}\n.type-badge[data-type=\"Output\"] {\n  background: var(--mj-status-success-bg);\n  color: var(--mj-status-success-text);\n  border: 1px solid color-mix(in srgb, var(--mj-status-success) 30%, transparent);\n}\n.type-badge[data-type=\"Both\"] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n  border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 35%, transparent);\n}\n\n.param-name-wrap {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  min-width: 0;\n}\n.param-name {\n  font-family: 'SF Mono', 'Fira Code', Menlo, Consolas, monospace;\n  font-size: var(--mj-text-sm);\n  font-weight: var(--mj-font-semibold);\n  color: var(--mj-text-primary);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.value-kind-chip {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 2px 8px;\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-muted);\n  border-radius: var(--mj-radius-full);\n  font-size: 10px;\n  font-weight: var(--mj-font-medium);\n  text-transform: lowercase;\n  letter-spacing: 0.3px;\n  flex-shrink: 0;\n}\n.value-kind-chip i { font-size: 9px; }\n.value-kind-chip[data-kind=\"number\"]  { color: var(--mj-status-info-text); background: var(--mj-status-info-bg); }\n.value-kind-chip[data-kind=\"boolean\"] { color: var(--mj-status-warning-text); background: var(--mj-status-warning-bg); }\n.value-kind-chip[data-kind=\"array\"]   { color: var(--mj-brand-primary); background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface)); }\n.value-kind-chip[data-kind=\"object\"]  { color: var(--mj-brand-primary); background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface)); }\n.value-kind-chip[data-kind=\"null\"],\n.value-kind-chip[data-kind=\"undefined\"] {\n  color: var(--mj-text-disabled);\n  background: var(--mj-bg-surface-sunken);\n}\n\n.param-actions {\n  display: flex;\n  gap: 4px;\n  flex-shrink: 0;\n}\n.param-actions .btn-icon {\n  width: 28px;\n  height: 28px;\n}\n.param-expand.is-expanded {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 35%, var(--mj-border-default));\n}\n\n.param-preview {\n  margin-top: 8px;\n  padding-left: calc(64px + 12px); /* align under param name (after type badge) */\n  font-family: 'SF Mono', 'Fira Code', Menlo, Consolas, monospace;\n  font-size: var(--mj-text-sm);\n  color: var(--mj-text-secondary);\n  word-break: break-word;\n  line-height: 1.55;\n}\n.param-preview[data-kind=\"string\"]   { color: var(--mj-status-success-text); }\n.param-preview[data-kind=\"number\"]   { color: var(--mj-status-info-text); }\n.param-preview[data-kind=\"boolean\"]  { color: var(--mj-status-warning-text); }\n.param-preview[data-kind=\"null\"],\n.param-preview[data-kind=\"undefined\"] { color: var(--mj-text-disabled); font-style: italic; }\n.param-preview[data-kind=\"array\"],\n.param-preview[data-kind=\"object\"]   { color: var(--mj-brand-primary); }\n\n.param-expanded {\n  margin-top: 10px;\n  margin-left: calc(64px + 12px);\n  border: 1px solid var(--mj-border-subtle);\n  border-radius: var(--mj-radius-md);\n  overflow: hidden;\n  background: var(--mj-bg-surface-sunken);\n}\n\n.raw-json-viewer { margin-top: 4px; }\n\n/* Responsive adjustments */\n@media (max-width: 768px) {\n  .header-content {\n    flex-direction: column;\n    gap: 16px;\n  }\n\n  .header-stats {\n    flex-wrap: wrap;\n  }\n\n  .details-grid {\n    grid-template-columns: 1fr;\n  }\n\n  .params-toolbar {\n    flex-direction: column;\n    align-items: stretch;\n  }\n  .toolbar-right {\n    justify-content: space-between;\n  }\n  .params-search { min-width: 0; width: 100%; }\n  .search-wrapper { flex: 1; }\n\n  .param-preview,\n  .param-expanded {\n    padding-left: 0;\n    margin-left: 0;\n  }\n}\n"] }]
+        args: [{ standalone: false, selector: 'mj-action-execution-log-form', template: "<div class=\"record-form-container action-execution-log-form\" style=\"height: 100%; display: flex; flex-direction: column;\">\n    <div class=\"record-form\" style=\"display: flex; flex-direction: column; height: 100%; overflow: hidden;\">\n        <!-- Header -->\n        <div class=\"header phone-hero\" [class.hero-view]=\"!EditMode\" [class.hero-compact]=\"!EditMode && !HeroDetailsOpen\">\n            <div class=\"header-content\">\n                <div class=\"header-left\">\n                    <div class=\"icon-wrapper\">\n                        <!-- The action's own icon when it has one, matching how the same action is\n                             drawn in the run timeline. `fa-terminal` stays as the fallback: it is\n                             what this form has always shown, and it is the honest answer for an\n                             action whose metadata names no icon. -->\n                        @if (action && action.IconClass) {\n                            <i [ngClass]=\"action.IconClass\"></i>\n                        } @else {\n                            <i class=\"fas fa-terminal\"></i>\n                        }\n                    </div>\n                    <div class=\"header-info\">\n                        <h2>Action Execution Log</h2>\n                        <div class=\"meta-info phone-hero-detail\">\n                            @if (action) {\n                                <span class=\"action-name\">{{ action.Name }}</span>\n                            }\n                            <span class=\"log-id\">{{ record.ID }}</span>\n                        </div>\n                    </div>\n                </div>\n                <div class=\"header-right\">\n                    <div class=\"status-badge\" [attr.data-status]=\"record.ResultCode?.toLowerCase()\">\n                        <i class=\"fas\" [ngClass]=\"getResultCodeIcon()\"></i>\n                        {{ record.ResultCode || 'UNKNOWN' }}\n                    </div>\n                    <div class=\"execution-time phone-hero-detail\">\n                        <i class=\"fas fa-clock\"></i>\n                        {{ formatDuration(getExecutionDuration()) }}\n                    </div>\n                </div>\n            </div>\n            <div class=\"header-stats phone-hero-detail phone-hero-stats\">\n                <div class=\"stat\">\n                    <span class=\"label\">Started</span>\n                    <span class=\"value\">{{ record.StartedAt | date:'short' }}</span>\n                </div>\n                @if (record.EndedAt) {\n                    <div class=\"stat\">\n                        <span class=\"label\">Ended</span>\n                        <span class=\"value\">{{ record.EndedAt | date:'short' }}</span>\n                    </div>\n                }\n                @if (action) {\n                    <div class=\"stat\">\n                        <span class=\"label\">Action</span>\n                        <span class=\"value\">\n                            <button class=\"btn-link\" (click)=\"navigateToAction()\">\n                                {{ action.Name }}\n                                <i class=\"fas fa-external-link-alt\"></i>\n                            </button>\n                        </span>\n                    </div>\n                }\n                @if (user) {\n                    <div class=\"stat\">\n                        <span class=\"label\">User</span>\n                        <span class=\"value\">\n                            <button class=\"btn-link\" (click)=\"navigateToUser()\">\n                                {{ user.Name }}\n                                <i class=\"fas fa-external-link-alt\"></i>\n                            </button>\n                        </span>\n                    </div>\n                }\n            </div>\n          @if (!EditMode && HeroSummary) {\n            <button type=\"button\" class=\"phone-hero-summary\" [attr.aria-expanded]=\"HeroDetailsOpen\" (click)=\"ToggleHeroDetails()\">\n              <span class=\"phone-hero-summary-text\">{{ HeroSummary }}</span>\n              <i class=\"fa-solid fa-chevron-down\" aria-hidden=\"true\"></i>\n            </button>\n          }\n        </div>\n\n        <!-- Content Area -->\n        <div class=\"content-area\">\n            <div class=\"accordion-container\">\n                <!-- Phone: one section at a time behind a picker; desktop keeps the accordions -->\n                <mj-accordion-sections [Enabled]=\"Phone.IsPhone\" [ActiveKey]=\"Phone.Section\" (ActiveKeyChange)=\"Phone.Pick($event)\">\n                <!-- Execution Details -->\n                <mj-accordion-panel SectionKey=\"details\" SectionTitle=\"Execution Details\" SectionIcon=\"fas fa-info-circle\" [Expanded]=\"true\">\n                    <ng-template mjAccordionTitle>\n                      <i class=\"fas fa-info-circle\"></i> Execution Details\n                    </ng-template>\n                        <div class=\"details-grid\">\n                            <div class=\"detail-item\">\n                                <label>Execution ID</label>\n                                <span class=\"monospace\">{{ record.ID }}</span>\n                            </div>\n                            <div class=\"detail-item\">\n                                <label>Action ID</label>\n                                <span class=\"monospace\">{{ record.ActionID }}</span>\n                            </div>\n                            <div class=\"detail-item\">\n                                <label>User ID</label>\n                                <span class=\"monospace\">{{ record.UserID }}</span>\n                            </div>\n                            <div class=\"detail-item\">\n                                <label>Result Code</label>\n                                <span class=\"detail-value\">\n                                    <i class=\"fas\" [ngClass]=\"getResultCodeIcon()\" [style.color]=\"getResultCodeColor()\"></i>\n                                    <span [style.color]=\"getResultCodeColor()\">{{ record.ResultCode || 'N/A' }}</span>\n                                </span>\n                            </div>\n                            <div class=\"detail-item\">\n                                <label>Duration</label>\n                                <span>{{ formatDuration(getExecutionDuration()) }}</span>\n                            </div>\n                            <div class=\"detail-item\">\n                                <label>Retention Period</label>\n                                <span>{{ record.RetentionPeriod ? record.RetentionPeriod + ' days' : 'Indefinite' }}</span>\n                            </div>\n                        </div>\n                </mj-accordion-panel>\n\n                <!-- Unified Parameters section -->\n                @if (hasAnyParameters) {\n                    <mj-accordion-panel SectionKey=\"parameters\" SectionTitle=\"Parameters\" SectionIcon=\"fas fa-sliders-h\" [SectionCount]=\"paramCounts.All\" [Expanded]=\"true\">\n                        <ng-template mjAccordionTitle>\n                          <i class=\"fas fa-sliders-h\"></i>\n                          Parameters\n                          <span class=\"mj-accordion-badge mj-accordion-badge--right\">{{ paramCounts.All }}</span>\n                        </ng-template>\n                        <div class=\"params-panel\">\n                            <!-- Toolbar: filter chips, search, sort, raw toggle -->\n                            <div class=\"params-toolbar\">\n                                <div class=\"filter-chips\">\n                                    <button\n                                        type=\"button\"\n                                        class=\"chip\"\n                                        [class.active]=\"typeFilter === 'All'\"\n                                        (click)=\"setTypeFilter('All')\">\n                                        All <span class=\"chip-count\">{{ paramCounts.All }}</span>\n                                    </button>\n                                    <button\n                                        type=\"button\"\n                                        class=\"chip chip-input\"\n                                        [class.active]=\"typeFilter === 'Input'\"\n                                        [disabled]=\"paramCounts.Input === 0\"\n                                        (click)=\"setTypeFilter('Input')\">\n                                        <i class=\"fas fa-sign-in-alt\"></i>\n                                        Input <span class=\"chip-count\">{{ paramCounts.Input }}</span>\n                                    </button>\n                                    <button\n                                        type=\"button\"\n                                        class=\"chip chip-both\"\n                                        [class.active]=\"typeFilter === 'Both'\"\n                                        [disabled]=\"paramCounts.Both === 0\"\n                                        (click)=\"setTypeFilter('Both')\">\n                                        <i class=\"fas fa-exchange-alt\"></i>\n                                        In/Out <span class=\"chip-count\">{{ paramCounts.Both }}</span>\n                                    </button>\n                                    <button\n                                        type=\"button\"\n                                        class=\"chip chip-output\"\n                                        [class.active]=\"typeFilter === 'Output'\"\n                                        [disabled]=\"paramCounts.Output === 0\"\n                                        (click)=\"setTypeFilter('Output')\">\n                                        <i class=\"fas fa-sign-out-alt\"></i>\n                                        Output <span class=\"chip-count\">{{ paramCounts.Output }}</span>\n                                    </button>\n                                </div>\n\n                                <div class=\"toolbar-right\">\n                                    <div class=\"search-wrapper\">\n                                        <i class=\"fas fa-search search-icon\"></i>\n                                        <input\n                                            type=\"text\"\n                                            class=\"mj-input params-search\"\n                                            placeholder=\"Search name or value\u2026\"\n                                            [(ngModel)]=\"searchText\"\n                                            name=\"paramSearch\" />\n                                        @if (searchText) {\n                                            <button type=\"button\" class=\"search-clear\" (click)=\"searchText = ''\" title=\"Clear search\">\n                                                <i class=\"fas fa-times\"></i>\n                                            </button>\n                                        }\n                                    </div>\n\n                                    <div class=\"sort-group\" role=\"group\" aria-label=\"Sort parameters\">\n                                        <button\n                                            type=\"button\"\n                                            class=\"sort-btn\"\n                                            [class.active]=\"sortKey === 'type'\"\n                                            (click)=\"toggleSort('type')\"\n                                            title=\"Sort by type\">\n                                            Type\n                                            @if (sortKey === 'type') {\n                                                <i class=\"fas\" [ngClass]=\"sortDir === 'asc' ? 'fa-arrow-down-short-wide' : 'fa-arrow-up-wide-short'\"></i>\n                                            }\n                                        </button>\n                                        <button\n                                            type=\"button\"\n                                            class=\"sort-btn\"\n                                            [class.active]=\"sortKey === 'name'\"\n                                            (click)=\"toggleSort('name')\"\n                                            title=\"Sort by name\">\n                                            Name\n                                            @if (sortKey === 'name') {\n                                                <i class=\"fas\" [ngClass]=\"sortDir === 'asc' ? 'fa-arrow-down-a-z' : 'fa-arrow-up-z-a'\"></i>\n                                            }\n                                        </button>\n                                    </div>\n\n                                    <button\n                                        type=\"button\"\n                                        class=\"raw-toggle\"\n                                        [class.active]=\"showRawJson\"\n                                        (click)=\"toggleRawJson()\"\n                                        title=\"Toggle raw JSON view\">\n                                        <i class=\"fas fa-code\"></i>\n                                        Raw\n                                    </button>\n                                </div>\n                            </div>\n\n                            @if (showRawJson) {\n                                <div class=\"json-viewer raw-json-viewer\">\n                                    <div class=\"json-toolbar\">\n                                        <span class=\"json-label\">Raw JSON</span>\n                                        <button class=\"btn-icon\" title=\"Copy JSON\" (click)=\"copyToClipboard(formattedParams)\">\n                                            <i class=\"fas fa-copy\"></i>\n                                        </button>\n                                    </div>\n                                    <mj-code-editor\n                                        [(ngModel)]=\"formattedParams\"\n                                        name=\"formattedParamsRaw\"\n                                        [readonly]=\"true\"\n                                        [language]=\"'json'\"\n                                        [lineWrapping]=\"true\"\n                                        style=\"height: 360px; width: 100%;\">\n                                    </mj-code-editor>\n                                </div>\n                            } @else {\n                                <!-- Rich param list -->\n                                @if (filteredParameters.length === 0) {\n                                    <mj-empty-state\n                                        Variant=\"no-results\"\n                                        Size=\"compact\"\n                                        Icon=\"fa-solid fa-filter-circle-xmark\"\n                                        Title=\"No parameters match the current filter.\"\n                                        ActionText=\"Clear filters\"\n                                        ActionIcon=\"fa-solid fa-rotate-left\"\n                                        ActionVariant=\"flat\"\n                                        (Action)=\"clearFilters()\" />\n                                } @else {\n                                    <ul class=\"params-list\">\n                                        @for (p of filteredParameters; track trackParam($index, p)) {\n                                            <li class=\"param-row\" [attr.data-type]=\"p.Type\">\n                                                <div class=\"param-header\">\n                                                    <span class=\"type-badge\" [attr.data-type]=\"p.Type\">\n                                                        @if (p.Type === 'Input') {\n                                                            <i class=\"fas fa-sign-in-alt\"></i>\n                                                        } @else if (p.Type === 'Output') {\n                                                            <i class=\"fas fa-sign-out-alt\"></i>\n                                                        } @else {\n                                                            <i class=\"fas fa-exchange-alt\"></i>\n                                                        }\n                                                        {{ getTypeLabel(p.Type) }}\n                                                    </span>\n                                                    <div class=\"param-name-wrap\">\n                                                        <span class=\"param-name\">{{ p.Name }}</span>\n                                                        <span class=\"value-kind-chip\" [attr.data-kind]=\"p.ValueKind\">\n                                                            <i class=\"fas\" [ngClass]=\"getValueKindIcon(p.ValueKind)\"></i>\n                                                            {{ p.ValueKind }}\n                                                        </span>\n                                                    </div>\n                                                    <div class=\"param-actions\">\n                                                        @if (p.IsExpandable) {\n                                                            <button type=\"button\" class=\"btn-icon param-expand\" [class.is-expanded]=\"p.Expanded\" (click)=\"toggleExpanded(p)\" [title]=\"p.Expanded ? 'Collapse' : 'Expand'\">\n                                                                <i class=\"fas\" [ngClass]=\"p.Expanded ? 'fa-chevron-up' : 'fa-chevron-down'\"></i>\n                                                            </button>\n                                                        }\n                                                        <button type=\"button\" class=\"btn-icon\" (click)=\"copyParamValue(p)\" title=\"Copy value\">\n                                                            <i class=\"fas fa-copy\"></i>\n                                                        </button>\n                                                    </div>\n                                                </div>\n                                                <div class=\"param-preview\" [attr.data-kind]=\"p.ValueKind\">{{ p.Preview }}</div>\n                                                @if (p.IsExpandable && p.Expanded) {\n                                                    <div class=\"param-expanded\">\n                                                        <mj-code-editor\n                                                            [(ngModel)]=\"p.FormattedValue\"\n                                                            [name]=\"'param-' + p.Name\"\n                                                            [readonly]=\"true\"\n                                                            [language]=\"'json'\"\n                                                            [lineWrapping]=\"true\"\n                                                            style=\"height: 240px; width: 100%;\">\n                                                        </mj-code-editor>\n                                                    </div>\n                                                }\n                                            </li>\n                                        }\n                                    </ul>\n                                }\n                            }\n                        </div>\n                    </mj-accordion-panel>\n                }\n\n                <!-- Output Message -->\n                @if (record.Message) {\n                    <mj-accordion-panel SectionKey=\"message\" SectionTitle=\"Output Message\" SectionIcon=\"fas fa-comment-alt\" [Expanded]=\"true\">\n                        <ng-template mjAccordionTitle>\n                          <i class=\"fas fa-comment-alt\"></i> Output Message\n                        </ng-template>\n                            <div class=\"json-viewer\">\n                                <div class=\"json-toolbar\">\n                                    <span class=\"json-label\">JSON</span>\n                                    <button class=\"btn-icon\" title=\"Copy JSON\" (click)=\"copyToClipboard(formattedMessage)\">\n                                        <i class=\"fas fa-copy\"></i>\n                                    </button>\n                                </div>\n                                <mj-code-editor \n                                    [(ngModel)]=\"formattedMessage\"\n                                    name=\"formattedMessage\"\n                                    [readonly]=\"true\"\n                                    [language]=\"'json'\"\n                                    [lineWrapping]=\"true\"\n                                    style=\"height: 300px; width: 100%;\">\n                                </mj-code-editor>\n                            </div>\n                    </mj-accordion-panel>\n                }\n\n                <!-- Empty States for missing data -->\n                @if (!record.Params && !record.Message && !hasAnyParameters) {\n                    <mj-accordion-panel SectionKey=\"data\" SectionTitle=\"Execution Data\" SectionIcon=\"fas fa-database\" [Expanded]=\"true\">\n                        <ng-template mjAccordionTitle>\n                          <i class=\"fas fa-database\"></i> Execution Data\n                        </ng-template>\n                            <mj-empty-state\n                                Size=\"compact\"\n                                Icon=\"fa-solid fa-inbox\"\n                                Title=\"No execution data recorded\" />\n                    </mj-accordion-panel>\n                }\n                </mj-accordion-sections>\n            </div>\n        </div>\n    </div>\n</div>", styles: ["/* Action Execution Log Form Styles */\n:host {\n  display: block;\n  height: 100%;\n}\n\n.action-execution-log-form {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  background: var(--mj-bg-page);\n  color: var(--mj-text-primary);\n}\n\n/* Header Styles */\n.header {\n  background: var(--mj-bg-surface-card);\n  border-bottom: 1px solid var(--mj-border-default);\n  padding: 20px;\n  box-shadow: var(--mj-shadow-sm);\n}\n\n.header-content {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  margin-bottom: 16px;\n}\n\n.header-left {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n}\n\n.icon-wrapper {\n  width: 48px;\n  height: 48px;\n  background: var(--mj-status-info);\n  border-radius: var(--mj-radius-lg);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--mj-text-inverse);\n  font-size: var(--mj-text-xl);\n  box-shadow: var(--mj-shadow-sm);\n}\n\n.header-info h2 {\n  margin: 0;\n  font-size: var(--mj-text-2xl);\n  font-weight: var(--mj-font-semibold);\n  color: var(--mj-text-primary);\n}\n\n.meta-info {\n  display: flex;\n  gap: 12px;\n  margin-top: 4px;\n  font-size: var(--mj-text-sm);\n  color: var(--mj-text-muted);\n}\n\n.action-name {\n  font-weight: var(--mj-font-medium);\n  color: var(--mj-text-secondary);\n}\n\n.log-id {\n  font-family: monospace;\n  font-size: var(--mj-text-xs);\n  opacity: 0.7;\n}\n\n.header-right {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n}\n\n.status-badge {\n  padding: 6px 16px;\n  border-radius: var(--mj-radius-full);\n  font-size: var(--mj-text-xs);\n  font-weight: var(--mj-font-semibold);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  color: var(--mj-text-inverse);\n}\n\n.execution-time {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: var(--mj-text-sm);\n  color: var(--mj-text-muted);\n}\n\n.header-stats {\n  display: flex;\n  gap: 24px;\n  padding-top: 12px;\n  border-top: 1px solid var(--mj-border-default);\n}\n\n.stat {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.stat .label {\n  font-size: var(--mj-text-xs);\n  color: var(--mj-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.stat .value {\n  font-size: var(--mj-text-sm);\n  font-weight: var(--mj-font-medium);\n  color: var(--mj-text-secondary);\n}\n\n.record-form {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  min-height: 0;\n}\n\n/* Content Area */\n.content-area {\n  flex: 1;\n  min-height: 0;\n  overflow-y: auto;\n  padding: 20px;\n}\n\n/* Details Grid */\n.details-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n  gap: 20px;\n  padding: 20px;\n}\n\n.detail-item {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.detail-item label {\n  font-size: var(--mj-text-xs);\n  color: var(--mj-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  font-weight: var(--mj-font-semibold);\n}\n\n.detail-value {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color: var(--mj-text-primary);\n}\n\n.btn-link {\n  background: none;\n  border: none;\n  color: var(--mj-brand-primary);\n  cursor: pointer;\n  font-size: var(--mj-text-sm);\n  padding: 4px;\n}\n\n.btn-link:hover {\n  color: var(--mj-brand-primary-hover);\n}\n\n.loading {\n  color: var(--mj-text-muted);\n  font-size: var(--mj-text-xs);\n}\n\n/* JSON Viewer */\n.json-viewer {\n  padding: 20px;\n  background: var(--mj-bg-surface-sunken);\n  border-radius: var(--mj-radius-md);\n  margin-bottom: 20px;\n}\n\n.json-toolbar {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 12px;\n}\n\n.json-label {\n  background: var(--mj-status-info);\n  color: var(--mj-text-inverse);\n  padding: 4px 12px;\n  border-radius: var(--mj-radius-full);\n  font-size: 11px;\n  font-weight: var(--mj-font-semibold);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.btn-icon {\n  width: 32px;\n  height: 32px;\n  border: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  border-radius: var(--mj-radius-sm);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  transition: all var(--mj-transition-base);\n  color: var(--mj-text-muted);\n}\n\n.btn-icon:hover {\n  background: var(--mj-bg-surface-hover);\n  border-color: var(--mj-border-strong);\n  color: var(--mj-text-secondary);\n}\n\n/* Status badge colors based on data-status attribute */\n.status-badge[data-status=\"success\"],\n.status-badge[data-status=\"ok\"],\n.status-badge[data-status=\"completed\"],\n.status-badge[data-status=\"200\"] {\n  background-color: var(--mj-status-success);\n  color: var(--mj-text-inverse);\n}\n\n.status-badge[data-status=\"error\"],\n.status-badge[data-status=\"failed\"],\n.status-badge[data-status=\"failure\"] {\n  background-color: var(--mj-status-error);\n  color: var(--mj-text-inverse);\n}\n\n.status-badge[data-status=\"warning\"],\n.status-badge[data-status=\"pending\"] {\n  background-color: var(--mj-status-warning);\n  color: var(--mj-color-warning-800);\n}\n\n.status-badge[data-status=\"info\"],\n.status-badge[data-status=\"running\"] {\n  background-color: var(--mj-status-info);\n  color: var(--mj-text-inverse);\n}\n\n.status-badge {\n  background-color: var(--mj-text-muted);\n  color: var(--mj-text-inverse);\n}\n\n.monospace {\n  font-family: 'Courier New', Courier, monospace;\n  font-size: var(--mj-text-xs);\n}\n\n/* ============================================================\n   Unified Parameters Panel\n   ============================================================ */\n\n.params-panel {\n  padding: 18px 20px 22px;\n}\n\n/* Toolbar --------------------------------------------------------------- */\n.params-toolbar {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 14px;\n  align-items: center;\n  justify-content: space-between;\n  padding: 12px 14px;\n  margin-bottom: 14px;\n  background: var(--mj-bg-surface-sunken);\n  border: 1px solid var(--mj-border-subtle);\n  border-radius: var(--mj-radius-lg);\n}\n\n.filter-chips {\n  display: flex;\n  gap: 6px;\n  flex-wrap: wrap;\n}\n\n.chip {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  padding: 6px 13px;\n  border-radius: var(--mj-radius-full);\n  border: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-secondary);\n  font-size: var(--mj-text-sm);\n  font-weight: var(--mj-font-medium);\n  cursor: pointer;\n  transition: all var(--mj-transition-base);\n}\n.chip:hover:not(:disabled) {\n  background: var(--mj-bg-surface-hover);\n  border-color: var(--mj-border-strong);\n  color: var(--mj-text-primary);\n}\n.chip:disabled {\n  opacity: 0.45;\n  cursor: not-allowed;\n}\n.chip .chip-count {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 20px;\n  height: 18px;\n  padding: 0 6px;\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-muted);\n  border-radius: var(--mj-radius-full);\n  font-size: 11px;\n  font-weight: var(--mj-font-semibold);\n}\n.chip i {\n  font-size: 11px;\n}\n\n.chip.active {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 22%, transparent);\n}\n.chip.active .chip-count {\n  background: color-mix(in srgb, var(--mj-text-inverse) 25%, transparent);\n  color: var(--mj-text-inverse);\n}\n\n/* Chip type flavors (active state tints per Input/Output/Both). */\n.chip.chip-input.active {\n  background: var(--mj-status-info);\n  border-color: var(--mj-status-info);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-status-info) 22%, transparent);\n}\n.chip.chip-output.active {\n  background: var(--mj-status-success);\n  border-color: var(--mj-status-success);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-status-success) 22%, transparent);\n}\n.chip.chip-both.active {\n  background: color-mix(in srgb, var(--mj-brand-primary) 75%, var(--mj-status-warning) 25%);\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 75%, var(--mj-status-warning) 25%);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 22%, transparent);\n}\n\n.toolbar-right {\n  display: flex;\n  gap: 8px;\n  align-items: center;\n  flex-wrap: wrap;\n}\n\n.search-wrapper {\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n.search-icon {\n  position: absolute;\n  left: 10px;\n  color: var(--mj-text-muted);\n  font-size: 12px;\n  pointer-events: none;\n}\n.params-search {\n  min-width: 220px;\n  padding: 7px 30px 7px 30px;\n  border-radius: var(--mj-radius-md);\n  font-size: var(--mj-text-sm);\n}\n.search-clear {\n  position: absolute;\n  right: 6px;\n  width: 22px;\n  height: 22px;\n  border: none;\n  background: transparent;\n  color: var(--mj-text-muted);\n  border-radius: var(--mj-radius-full);\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n.search-clear:hover {\n  color: var(--mj-text-primary);\n  background: var(--mj-bg-surface-hover);\n}\n\n.sort-group {\n  display: inline-flex;\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  overflow: hidden;\n  background: var(--mj-bg-surface);\n}\n.sort-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 7px 12px;\n  background: transparent;\n  border: none;\n  color: var(--mj-text-secondary);\n  font-size: var(--mj-text-sm);\n  font-weight: var(--mj-font-medium);\n  cursor: pointer;\n  transition: background var(--mj-transition-base);\n}\n.sort-btn + .sort-btn {\n  border-left: 1px solid var(--mj-border-default);\n}\n.sort-btn:hover { background: var(--mj-bg-surface-hover); color: var(--mj-text-primary); }\n.sort-btn.active {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n}\n.sort-btn.active i { color: var(--mj-brand-primary); }\n\n.raw-toggle {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 7px 12px;\n  border: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-secondary);\n  border-radius: var(--mj-radius-md);\n  font-size: var(--mj-text-sm);\n  font-weight: var(--mj-font-medium);\n  cursor: pointer;\n  transition: all var(--mj-transition-base);\n}\n.raw-toggle:hover { background: var(--mj-bg-surface-hover); color: var(--mj-text-primary); }\n.raw-toggle.active {\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 35%, var(--mj-border-default));\n}\n\n/* Param list rows -------------------------------------------------------- */\n.params-list {\n  list-style: none;\n  padding: 0;\n  margin: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.param-row {\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-left: 3px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  padding: 12px 14px;\n  transition: border-color var(--mj-transition-base), box-shadow var(--mj-transition-base);\n}\n.param-row:hover {\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 35%, var(--mj-border-default));\n  box-shadow: 0 1px 3px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n.param-row[data-type=\"Input\"]  { border-left-color: var(--mj-status-info); }\n.param-row[data-type=\"Output\"] { border-left-color: var(--mj-status-success); }\n.param-row[data-type=\"Both\"]   { border-left-color: color-mix(in srgb, var(--mj-brand-primary) 75%, var(--mj-status-warning) 25%); }\n\n.param-header {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n.type-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 3px 10px;\n  border-radius: var(--mj-radius-full);\n  font-size: 11px;\n  font-weight: var(--mj-font-semibold);\n  text-transform: uppercase;\n  letter-spacing: 0.4px;\n  flex-shrink: 0;\n}\n.type-badge[data-type=\"Input\"] {\n  background: var(--mj-status-info-bg);\n  color: var(--mj-status-info-text);\n  border: 1px solid color-mix(in srgb, var(--mj-status-info) 30%, transparent);\n}\n.type-badge[data-type=\"Output\"] {\n  background: var(--mj-status-success-bg);\n  color: var(--mj-status-success-text);\n  border: 1px solid color-mix(in srgb, var(--mj-status-success) 30%, transparent);\n}\n.type-badge[data-type=\"Both\"] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n  border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 35%, transparent);\n}\n\n.param-name-wrap {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  min-width: 0;\n}\n.param-name {\n  font-family: 'SF Mono', 'Fira Code', Menlo, Consolas, monospace;\n  font-size: var(--mj-text-sm);\n  font-weight: var(--mj-font-semibold);\n  color: var(--mj-text-primary);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.value-kind-chip {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 2px 8px;\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-muted);\n  border-radius: var(--mj-radius-full);\n  font-size: 10px;\n  font-weight: var(--mj-font-medium);\n  text-transform: lowercase;\n  letter-spacing: 0.3px;\n  flex-shrink: 0;\n}\n.value-kind-chip i { font-size: 9px; }\n.value-kind-chip[data-kind=\"number\"]  { color: var(--mj-status-info-text); background: var(--mj-status-info-bg); }\n.value-kind-chip[data-kind=\"boolean\"] { color: var(--mj-status-warning-text); background: var(--mj-status-warning-bg); }\n.value-kind-chip[data-kind=\"array\"]   { color: var(--mj-brand-primary); background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface)); }\n.value-kind-chip[data-kind=\"object\"]  { color: var(--mj-brand-primary); background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface)); }\n.value-kind-chip[data-kind=\"null\"],\n.value-kind-chip[data-kind=\"undefined\"] {\n  color: var(--mj-text-disabled);\n  background: var(--mj-bg-surface-sunken);\n}\n\n.param-actions {\n  display: flex;\n  gap: 4px;\n  flex-shrink: 0;\n}\n.param-actions .btn-icon {\n  width: 28px;\n  height: 28px;\n}\n.param-expand.is-expanded {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 35%, var(--mj-border-default));\n}\n\n.param-preview {\n  margin-top: 8px;\n  padding-left: calc(64px + 12px); /* align under param name (after type badge) */\n  font-family: 'SF Mono', 'Fira Code', Menlo, Consolas, monospace;\n  font-size: var(--mj-text-sm);\n  color: var(--mj-text-secondary);\n  word-break: break-word;\n  line-height: 1.55;\n}\n.param-preview[data-kind=\"string\"]   { color: var(--mj-status-success-text); }\n.param-preview[data-kind=\"number\"]   { color: var(--mj-status-info-text); }\n.param-preview[data-kind=\"boolean\"]  { color: var(--mj-status-warning-text); }\n.param-preview[data-kind=\"null\"],\n.param-preview[data-kind=\"undefined\"] { color: var(--mj-text-disabled); font-style: italic; }\n.param-preview[data-kind=\"array\"],\n.param-preview[data-kind=\"object\"]   { color: var(--mj-brand-primary); }\n\n.param-expanded {\n  margin-top: 10px;\n  margin-left: calc(64px + 12px);\n  border: 1px solid var(--mj-border-subtle);\n  border-radius: var(--mj-radius-md);\n  overflow: hidden;\n  background: var(--mj-bg-surface-sunken);\n}\n\n.raw-json-viewer { margin-top: 4px; }\n\n/* Responsive adjustments */\n@media (max-width: 768px) {\n  .header-content {\n    flex-direction: column;\n    gap: 16px;\n  }\n\n  .header-stats {\n    flex-wrap: wrap;\n  }\n\n  .details-grid {\n    grid-template-columns: 1fr;\n  }\n\n  .params-toolbar {\n    flex-direction: column;\n    align-items: stretch;\n  }\n  .toolbar-right {\n    justify-content: space-between;\n  }\n  .params-search { min-width: 0; width: 100%; }\n  .search-wrapper { flex: 1; }\n\n  .param-preview,\n  .param-expanded {\n    padding-left: 0;\n    margin-left: 0;\n  }\n}\n\n/* Phone: sections sit on the page's 12px gutter instead of the desktop 20px content padding,\n   and the params panel drops its own sides for the same reason. The param header can shrink,\n   so a long name ellipses instead of widening the row. */\n@media (max-width: 768px) {\n    .content-area {\n        padding: 12px;\n    }\n\n    .params-panel {\n        padding-left: 0;\n        padding-right: 0;\n    }\n\n    .param-header,\n    .param-name {\n        min-width: 0;\n    }\n}\n", "/* ============================================\n   PHONE HERO (design call 6A), shared by the custom forms that own a hero.\n   Under 768px the hero keeps icon, name, status and the primary action. Anything tagged\n   .phone-hero-detail hides while the hero is compact and comes back when the summary line is\n   tapped. Edit mode is untouched: the host only gets .hero-compact / .hero-view in view mode.\n   Host:    .phone-hero [class.hero-view]=\"!EditMode\" [class.hero-compact]=\"!EditMode && !HeroDetailsOpen\"\n   Tags:    .phone-hero-detail  hidden while compact\n            .phone-hero-hide    hidden in view mode (said elsewhere on the phone hero)\n            .phone-hero-only    shown only on phones\n            .phone-hero-top     a title + action row that stacks\n            .phone-hero-actions / .phone-hero-run   the primary action, full width at 44px\n            .phone-hero-stats   a metric row that reflows to a 2-up grid when the hero is expanded\n            .phone-hero-status  a status chip in the identity row (with .phone-hero-only)\n   ============================================ */\n.phone-hero-summary,\n.phone-hero-only {\n    display: none;\n}\n\n@media (max-width: 768px) {\n    .phone-hero {\n        padding: 12px !important;\n    }\n\n    /* !important: several heroes carry inline display/padding styles on these rows */\n    .phone-hero.hero-compact .phone-hero-detail,\n    .phone-hero.hero-view .phone-hero-hide {\n        display: none !important;\n    }\n\n    .phone-hero-only {\n        display: inline-flex;\n    }\n\n    /* Lower specificity than the compact rule above, so a compact hero still hides it */\n    .phone-hero .phone-hero-stats {\n        display: grid !important;\n        grid-template-columns: repeat(2, minmax(0, 1fr));\n        gap: 8px;\n    }\n\n    .phone-hero-status {\n        align-items: center;\n        gap: 4px;\n        margin-left: 8px;\n        padding: 2px 8px;\n        border-radius: var(--mj-radius-full, 999px);\n        color: var(--mj-text-secondary);\n        background: var(--mj-bg-surface-sunken);\n        font-size: var(--mj-text-xs);\n        font-weight: var(--mj-font-semibold);\n        vertical-align: middle;\n        white-space: nowrap;\n    }\n\n    /* data-status comes from RunStatusKind(); the -text / -bg pairs keep contrast in both themes */\n    .phone-hero-status[data-status=\"running\"] { color: var(--mj-status-warning-text); background: var(--mj-status-warning-bg); }\n    .phone-hero-status[data-status=\"success\"] { color: var(--mj-status-success-text); background: var(--mj-status-success-bg); }\n    .phone-hero-status[data-status=\"error\"]   { color: var(--mj-status-error-text);   background: var(--mj-status-error-bg); }\n    .phone-hero-status[data-status=\"info\"]    { color: var(--mj-status-info-text);    background: var(--mj-status-info-bg); }\n\n    .phone-hero-top {\n        flex-direction: column;\n        align-items: stretch;\n        gap: 10px;\n    }\n\n    .phone-hero-actions {\n        width: 100%;\n    }\n\n    .phone-hero .phone-hero-run {\n        width: 100%;\n        min-height: 44px;\n        justify-content: center;\n    }\n\n    /* Inherits the hero's text colour, so it reads on light heroes and on the brand-blue\n       Queries hero alike; a muted token would be grey on blue. */\n    .phone-hero-summary {\n        display: flex;\n        align-items: center;\n        gap: 8px;\n        width: 100%;\n        min-height: 44px;\n        margin-top: 8px;\n        padding: 0 4px;\n        border: 0;\n        border-top: 1px solid color-mix(in srgb, currentColor 20%, transparent);\n        background: transparent;\n        color: inherit;\n        font: inherit;\n        font-size: var(--mj-text-sm);\n        text-align: left;\n        cursor: pointer;\n        opacity: 0.85;\n    }\n\n    .phone-hero-summary:focus-visible {\n        outline: none;\n        box-shadow: var(--mj-focus-ring);\n    }\n\n    .phone-hero-summary-text {\n        flex: 1 1 auto;\n        min-width: 0;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n    }\n\n    .phone-hero-summary > i {\n        flex-shrink: 0;\n        transition: transform 0.15s ease;\n    }\n\n    .phone-hero-summary[aria-expanded=\"true\"] > i {\n        transform: rotate(180deg);\n    }\n}\n\n@media (prefers-reduced-motion: reduce) {\n    .phone-hero-summary > i {\n        transition: none;\n    }\n}\n"] }]
     }], null, null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MJActionExecutionLogFormComponentExtended, { className: "MJActionExecutionLogFormComponentExtended", filePath: "src/lib/custom/Actions/action-execution-log-form.component.ts", lineNumber: 35 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MJActionExecutionLogFormComponentExtended, { className: "MJActionExecutionLogFormComponentExtended", filePath: "src/lib/custom/Actions/action-execution-log-form.component.ts", lineNumber: 37 }); })();
 //# sourceMappingURL=action-execution-log-form.component.js.map