@cqa-lib/cqa-ui 1.1.387 → 1.1.389

package/fesm2020/cqa-lib-cqa-ui.mjs

@@ -5421,6 +5421,14 @@ class AddPrerequisiteCasesSectionComponent {
         }
         this.cdr.markForCheck();
     }
+    /** True when the row at the given index has a selected value */
+    rowHasValue(index) {
+        if (!this.form || !this.rows.length || index < 0 || index >= this.rows.length)
+            return false;
+        const row = this.rows[index];
+        const val = this.form.get(row.key)?.value;
+        return val != null && val !== '';
+    }
     /** True when every row has a non-empty value (no placeholders) */
     allRowsHaveValues() {
         if (!this.form || !this.rows.length)
@@ -5466,10 +5474,10 @@ class AddPrerequisiteCasesSectionComponent {
     }
 }
 AddPrerequisiteCasesSectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: AddPrerequisiteCasesSectionComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AddPrerequisiteCasesSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: AddPrerequisiteCasesSectionComponent, selector: "cqa-add-prerequisite-cases-section", inputs: { expanded: "expanded", form: "form", rows: "rows", options: "options", getSelectConfig: "getSelectConfig", label: "label", infoTooltip: "infoTooltip", addAnotherText: "addAnotherText", updateText: "updateText", cancelText: "cancelText", addTriggerText: "addTriggerText", hideAddPrerequisite: "hideAddPrerequisite", updateDisabled: "updateDisabled", isUpdating: "isUpdating", enableServerSearch: "enableServerSearch", hasMoreOptions: "hasMoreOptions", isLoadingOptions: "isLoadingOptions", selectFirstValidationMessage: "selectFirstValidationMessage" }, outputs: { expandedChange: "expandedChange", addRow: "addRow", removeRow: "removeRow", rowsReordered: "rowsReordered", update: "update", cancel: "cancel", selectionChange: "selectionChange", searchOptions: "searchOptions", loadMoreOptions: "loadMoreOptions", prerequisitesChange: "prerequisitesChange" }, host: { classAttribute: "cqa-ui-root cqa-add-prerequisite-cases-section-host" }, queries: [{ propertyName: "selectBodyTpl", first: true, predicate: ["selectBody"], descendants: true, read: TemplateRef }], ngImport: i0, template: "<!-- Add Prerequisite trigger - only when collapsed and no rows (user must click to expand); hide when parent has prerequisites -->\n<ng-container *ngIf=\"rows.length === 0 && !expanded && !hideAddPrerequisite\">\n  <div\n    class=\"cqa-border-2 cqa-border-dashed cqa-border-[#D8D9FC] cqa-rounded-lg cqa-p-1 cqa-mt-4 cqa-bg-white cqa-cursor-pointer cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-flex cqa-items-center cqa-justify-center cqa-gap-2  cqa-w-full cqa-hover:cqa-border-[#9999ee] cqa-hover:cqa-bg-[#f8f8ff] cqa-active:cqa-border-[#7c7ce0] cqa-active:cqa-bg-[#eff6ff]\"\n    (click)=\"onAddPrerequisiteClick()\">\n    <mat-icon class=\"cqa-text-[12px] cqa-w-[12px] cqa-h-[12px] cqa-text-[#3F43EE]\">add</mat-icon>\n    <span class=\"cqa-font-regular cqa-font-inter cqa-text-sm cqa-text-[#3F43EE]\">{{ addTriggerText }}</span>\n  </div>\n</ng-container>\n\n<!-- Collapsed summary when we have rows but expanded=false -->\n<ng-container *ngIf=\"rows.length > 0 && !expanded\">\n  <div\n    class=\"cqa-border-2 cqa-border-dashed cqa-border-[#D8D9FC] cqa-rounded-lg cqa-p-1.5 cqa-mt-4 cqa-bg-white cqa-cursor-pointer cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-flex cqa-items-center cqa-justify-between cqa-min-h-[27px] cqa-hover:cqa-border-[#9ca3af] cqa-hover:cqa-bg-[#f9fafb] cqa-active:cqa-border-[#6366f1] cqa-active:cqa-bg-[#eff6ff]\"\n    (click)=\"toggleExpanded(true)\">\n    <span class=\"cqa-text-[#4a5565] cqa-font-normal cqa-font-inter cqa-text-xs\">{{ rows.length }} prerequisite{{ rows.length !== 1 ? 's' : '' }}</span>\n    <mat-icon class=\"cqa-text-[14px] cqa-w-[14px] cqa-h-[14px] cqa-text-[#4a5565]\">expand_more</mat-icon>\n  </div>\n</ng-container>\n\n<!-- Expanded form - when expanded=true (with or without rows; no Add Prerequisite trigger) -->\n<ng-container *ngIf=\"expanded\">\n  <div class=\"cqa-p-3 cqa-bg-white cqa-border cqa-border-[#e5e7eb] cqa-rounded-lg\">\n    <div class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-mb-3\">\n      <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-m-0 cqa-leading-none\">{{ label }}</label>\n      <mat-icon class=\"cqa-inline-flex cqa-mt-1 cqa-items-center cqa-justify-center cqa-w-4 cqa-h-4 cqa-text-sm cqa-text-[#6b7280] cqa-cursor-help cqa-flex-shrink-0\" [matTooltip]=\"infoTooltip\" matTooltipPosition=\"above\" matTooltipShowDelay=\"300\">info</mat-icon>\n      <button\n        type=\"button\"\n        class=\"cqa-ml-auto cqa-flex cqa-items-center cqa-justify-center cqa-w-7 cqa-h-7 cqa-p-0 cqa-bg-transparent cqa-border-none cqa-rounded-md cqa-text-[#6b7280] cqa-cursor-pointer cqa-hover:cqa-bg-[#f3f4f6] cqa-hover:cqa-text-[#374151]\"\n        (click)=\"toggleExpanded(false)\"\n        matTooltip=\"Close\">\n        <mat-icon class=\"cqa-text-xl cqa-w-5 cqa-h-5\">expand_less</mat-icon>\n      </button>\n    </div>\n\n    <div\n      class=\"prerequisite-drop-list cqa-flex cqa-flex-col cqa-gap-2 cqa-mb-3\"\n      [dndDropzone]=\"['prerequisite-row']\"\n      dndEffectAllowed=\"move\"\n      dndDragoverClass=\"dndDragover\"\n      (dndDrop)=\"onDndDrop($event)\">\n      <div dndPlaceholderRef class=\"prerequisite-drag-placeholder\">Drop here</div>\n      <div\n        *ngFor=\"let row of rows; let i = index; trackBy: trackByKey\"\n        class=\"prerequisite-drag-item cqa-flex cqa-items-center cqa-gap-2\"\n        [dndDraggable]=\"row\"\n        [dndDisableIf]=\"rows.length <= 1\"\n        dndEffectAllowed=\"move\"\n        dndType=\"prerequisite-row\">\n        <!-- 9-dot grid drag handle (only when multiple rows to reorder) -->\n        <div *ngIf=\"rows.length > 1\" dndHandle class=\"cqa-flex cqa-flex-shrink-0 cqa-items-center cqa-justify-center cqa-cursor-grab cqa-text-[#6B7280] cqa-hover:cqa-text-[#111827] active:cqa-cursor-grabbing\" matTooltip=\"Drag to reorder\">\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n            <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n            <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n            <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n            <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n            <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n            <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n            <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n            <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n          </svg>\n        </div>\n\n      <div class=\"cqa-flex-1 cqa-min-w-0\">\n        <!-- Custom template (e.g. parent-provided cqa-dynamic-select) -->\n        <ng-container *ngIf=\"selectBodyTpl\">\n          <ng-container\n            *ngTemplateOutlet=\"selectBodyTpl; context: {\n              $implicit: row,\n              index: i,\n              form: form,\n              config: getConfig(i)\n            }\">\n          </ng-container>\n        </ng-container>\n        <!-- Default: built-in cqa-dynamic-select -->\n        <cqa-dynamic-select\n          *ngIf=\"!selectBodyTpl && form\"\n          [form]=\"form\"\n          [config]=\"getConfig(i)\"\n          (selectionChange)=\"onSelectionChange($event, i)\">\n        </cqa-dynamic-select>\n      </div>\n\n      <button\n        type=\"button\"\n        class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-8 cqa-h-8 cqa-min-w-[32px] cqa-bg-transparent cqa-border-none cqa-rounded-md cqa-text-[#6b7280] cqa-cursor-pointer cqa-p-0 cqa-hover:cqa-bg-[#f3f4f6] cqa-hover:cqa-text-[#374151]\"\n        (click)=\"onRemoveRow(i)\"\n        matTooltip=\"Cancel\">\n        <mat-icon class=\"cqa-text-lg cqa-w-[18px] cqa-h-[18px]\">close</mat-icon>\n      </button>\n    </div>\n    </div>\n\n    <div *ngIf=\"showAddAnotherValidation && !allRowsHaveValues()\" class=\"cqa-text-xs cqa-text-[#dc2626] cqa-mb-2\">\n      {{ selectFirstValidationMessage }}\n    </div>\n    <!-- Add Prerequisite button only in empty state; hide when parent has prerequisites (e.g. collapsing after update) -->\n    <div\n      *ngIf=\"rows.length === 0 && !hideAddPrerequisite\"\n      class=\"cqa-border-2 cqa-border-dashed cqa-border-[#ccccff] cqa-rounded-lg cqa-p-3 cqa-mb-3 cqa-bg-white cqa-cursor-pointer cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-flex cqa-items-center cqa-justify-center cqa-gap-2 cqa-min-h-[40px] cqa-w-full cqa-hover:cqa-border-[#9999ee] cqa-hover:cqa-bg-[#f8f8ff] cqa-active:cqa-border-[#7c7ce0] cqa-active:cqa-bg-[#eff6ff]\"\n      (click)=\"onAddRow()\">\n      <mat-icon class=\"cqa-text-[18px] cqa-w-[18px] cqa-h-[18px] cqa-text-[#3b82f6]\">add</mat-icon>\n      <span class=\"cqa-font-medium cqa-font-inter cqa-text-sm cqa-text-[#3b82f6]\">{{ addTriggerText }}</span>\n    </div>\n    <!-- Add Another link when we already have at least one row -->\n    <button\n      *ngIf=\"rows.length > 0 && !hideAddPrerequisite\"\n      type=\"button\"\n      class=\"cqa-mb-3 cqa-flex cqa-items-center cqa-gap-2 cqa-bg-transparent cqa-border-none cqa-p-0 cqa-cursor-pointer cqa-font-inter cqa-text-sm cqa-text-[#4242DB] cqa-hover:cqa-underline\"\n      (click)=\"onAddRow()\">\n      <mat-icon class=\"cqa-text-[18px] cqa-w-[18px] cqa-h-[18px]\">add</mat-icon>\n      <span>{{ addAnotherText }}</span>\n    </button>\n    <div class=\"cqa-flex cqa-gap-3 cqa-justify-end\">\n      <button\n        type=\"button\"\n        class=\"cqa-py-2.5 cqa-px-4 cqa-bg-white cqa-text-[#374151] cqa-border cqa-border-[#d1d5db] cqa-rounded-md cqa-text-sm cqa-font-semibold cqa-cursor-pointer cqa-hover:cqa-bg-[#f9fafb]\"\n        (click)=\"onCancel()\">\n        {{ cancelText }}\n      </button>\n      <button\n        type=\"button\"\n        class=\"cqa-py-2.5 cqa-px-4 cqa-rounded-md cqa-text-sm cqa-font-semibold cqa-border-none cqa-cursor-pointer disabled:cqa-opacity-50 disabled:cqa-cursor-not-allowed cqa-bg-[#1a56db] cqa-text-white cqa-hover:cqa-bg-[#1647b8] disabled:cqa-bg-[#1a56db] cqa-flex cqa-items-center cqa-justify-center cqa-gap-2\"\n        [style.pointer-events]=\"isUpdating ? 'none' : 'auto'\"\n        [style.cursor]=\"isUpdating ? 'not-allowed' : 'pointer'\"\n        [disabled]=\"isUpdateDisabled()\"\n        (click)=\"onUpdate()\">\n        <mat-spinner *ngIf=\"isUpdating\" diameter=\"16\" class=\"cqa-inline-block update-spinner-white\"></mat-spinner>\n        <span>{{ updateText }}</span>\n      </button>\n    </div>\n  </div>\n</ng-container>\n", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: i4$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i6$1.DndDropzoneDirective, selector: "[dndDropzone]", inputs: ["dndDropzone", "dndEffectAllowed", "dndAllowExternal", "dndHorizontal", "dndDragoverClass", "dndDropzoneDisabledClass", "dndDisableIf", "dndDisableDropIf"], outputs: ["dndDragover", "dndDrop"] }, { type: i6$1.DndPlaceholderRefDirective, selector: "[dndPlaceholderRef]" }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6$1.DndDraggableDirective, selector: "[dndDraggable]", inputs: ["dndDraggable", "dndEffectAllowed", "dndType", "dndDraggingClass", "dndDraggingSourceClass", "dndDraggableDisabledClass", "dndDragImageOffsetFunction", "dndDisableIf", "dndDisableDragIf"], outputs: ["dndStart", "dndDrag", "dndEnd", "dndMoved", "dndCopied", "dndLinked", "dndCanceled"] }, { type: i6$1.DndHandleDirective, selector: "[dndHandle]" }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+AddPrerequisiteCasesSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: AddPrerequisiteCasesSectionComponent, selector: "cqa-add-prerequisite-cases-section", inputs: { expanded: "expanded", form: "form", rows: "rows", options: "options", getSelectConfig: "getSelectConfig", label: "label", infoTooltip: "infoTooltip", addAnotherText: "addAnotherText", updateText: "updateText", cancelText: "cancelText", addTriggerText: "addTriggerText", hideAddPrerequisite: "hideAddPrerequisite", updateDisabled: "updateDisabled", isUpdating: "isUpdating", enableServerSearch: "enableServerSearch", hasMoreOptions: "hasMoreOptions", isLoadingOptions: "isLoadingOptions", selectFirstValidationMessage: "selectFirstValidationMessage" }, outputs: { expandedChange: "expandedChange", addRow: "addRow", removeRow: "removeRow", rowsReordered: "rowsReordered", update: "update", cancel: "cancel", selectionChange: "selectionChange", searchOptions: "searchOptions", loadMoreOptions: "loadMoreOptions", prerequisitesChange: "prerequisitesChange" }, host: { classAttribute: "cqa-ui-root cqa-add-prerequisite-cases-section-host" }, queries: [{ propertyName: "selectBodyTpl", first: true, predicate: ["selectBody"], descendants: true, read: TemplateRef }], ngImport: i0, template: "<!-- Add Prerequisite trigger - only when collapsed and no rows (user must click to expand); hide when parent has prerequisites -->\n<ng-container *ngIf=\"rows.length === 0 && !expanded && !hideAddPrerequisite\">\n  <div\n    class=\"cqa-border-2 cqa-border-dashed cqa-border-[#D8D9FC] cqa-rounded-lg cqa-p-1 cqa-mt-4 cqa-bg-white cqa-cursor-pointer cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-flex cqa-items-center cqa-justify-center cqa-gap-2  cqa-w-full cqa-hover:cqa-border-[#9999ee] cqa-hover:cqa-bg-[#f8f8ff] cqa-active:cqa-border-[#7c7ce0] cqa-active:cqa-bg-[#eff6ff]\"\n    (click)=\"onAddPrerequisiteClick()\">\n    <mat-icon class=\"cqa-text-[12px] cqa-w-[12px] cqa-h-[12px] cqa-text-[#3F43EE]\">add</mat-icon>\n    <span class=\"cqa-font-regular cqa-font-inter cqa-text-sm cqa-text-[#3F43EE]\">{{ addTriggerText }}</span>\n  </div>\n</ng-container>\n\n<!-- Collapsed summary when we have rows but expanded=false -->\n<ng-container *ngIf=\"rows.length > 0 && !expanded\">\n  <div\n    class=\"cqa-border-2 cqa-border-dashed cqa-border-[#D8D9FC] cqa-rounded-lg cqa-p-1.5 cqa-mt-4 cqa-bg-white cqa-cursor-pointer cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-flex cqa-items-center cqa-justify-between cqa-min-h-[27px] cqa-hover:cqa-border-[#9ca3af] cqa-hover:cqa-bg-[#f9fafb] cqa-active:cqa-border-[#6366f1] cqa-active:cqa-bg-[#eff6ff]\"\n    (click)=\"toggleExpanded(true)\">\n    <span class=\"cqa-text-[#4a5565] cqa-font-normal cqa-font-inter cqa-text-xs\">{{ rows.length }} prerequisite{{ rows.length !== 1 ? 's' : '' }}</span>\n    <mat-icon class=\"cqa-text-[14px] cqa-w-[14px] cqa-h-[14px] cqa-text-[#4a5565]\">expand_more</mat-icon>\n  </div>\n</ng-container>\n\n<!-- Expanded form - when expanded=true (with or without rows; no Add Prerequisite trigger) -->\n<ng-container *ngIf=\"expanded\">\n  <div class=\"cqa-p-3 cqa-bg-white cqa-border cqa-border-[#e5e7eb] cqa-rounded-lg\">\n    <div class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-mb-3\">\n      <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-m-0 cqa-leading-none\">{{ label }}</label>\n      <mat-icon class=\"cqa-inline-flex cqa-mt-1 cqa-items-center cqa-justify-center cqa-w-4 cqa-h-4 cqa-text-sm cqa-text-[#6b7280] cqa-cursor-help cqa-flex-shrink-0\" [matTooltip]=\"infoTooltip\" matTooltipPosition=\"above\" matTooltipShowDelay=\"300\">info</mat-icon>\n      <button\n        type=\"button\"\n        class=\"cqa-ml-auto cqa-flex cqa-items-center cqa-justify-center cqa-w-7 cqa-h-7 cqa-p-0 cqa-bg-transparent cqa-border-none cqa-rounded-md cqa-text-[#6b7280] cqa-cursor-pointer cqa-hover:cqa-bg-[#f3f4f6] cqa-hover:cqa-text-[#374151]\"\n        (click)=\"toggleExpanded(false)\"\n        matTooltip=\"Close\">\n        <mat-icon class=\"cqa-text-xl cqa-w-5 cqa-h-5\">expand_less</mat-icon>\n      </button>\n    </div>\n\n    <div\n      class=\"prerequisite-drop-list cqa-flex cqa-flex-col cqa-gap-2 cqa-mb-3\"\n      [dndDropzone]=\"['prerequisite-row']\"\n      dndEffectAllowed=\"move\"\n      dndDragoverClass=\"dndDragover\"\n      (dndDrop)=\"onDndDrop($event)\">\n      <div dndPlaceholderRef class=\"prerequisite-drag-placeholder\">Drop here</div>\n      <div\n        *ngFor=\"let row of rows; let i = index; trackBy: trackByKey\"\n        class=\"prerequisite-drag-item cqa-flex cqa-items-center cqa-gap-2\"\n        [dndDraggable]=\"row\"\n        [dndDisableIf]=\"rows.length <= 1\"\n        dndEffectAllowed=\"move\"\n        dndType=\"prerequisite-row\">\n        <!-- 9-dot grid drag handle (only when multiple rows to reorder) -->\n        <div *ngIf=\"rows.length > 1\" dndHandle class=\"cqa-flex cqa-flex-shrink-0 cqa-items-center cqa-justify-center cqa-cursor-grab cqa-text-[#6B7280] cqa-hover:cqa-text-[#111827] active:cqa-cursor-grabbing\" matTooltip=\"Drag to reorder\">\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n            <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n            <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n            <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n            <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n            <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n            <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n            <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n            <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n          </svg>\n        </div>\n\n      <div class=\"cqa-flex-1 cqa-min-w-0\">\n        <!-- Custom template (e.g. parent-provided cqa-dynamic-select) -->\n        <ng-container *ngIf=\"selectBodyTpl\">\n          <ng-container\n            *ngTemplateOutlet=\"selectBodyTpl; context: {\n              $implicit: row,\n              index: i,\n              form: form,\n              config: getConfig(i)\n            }\">\n          </ng-container>\n        </ng-container>\n        <!-- Default: built-in cqa-dynamic-select -->\n        <cqa-dynamic-select\n          *ngIf=\"!selectBodyTpl && form\"\n          [form]=\"form\"\n          [config]=\"getConfig(i)\"\n          (selectionChange)=\"onSelectionChange($event, i)\">\n        </cqa-dynamic-select>\n      </div>\n\n      <button\n        *ngIf=\"rowHasValue(i)\"\n        type=\"button\"\n        class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-8 cqa-h-8 cqa-min-w-[32px] cqa-bg-transparent cqa-border-none cqa-rounded-md cqa-text-[#6b7280] cqa-cursor-pointer cqa-p-0 cqa-hover:cqa-bg-[#f3f4f6] cqa-hover:cqa-text-[#374151]\"\n        (click)=\"onRemoveRow(i)\"\n        matTooltip=\"Remove Prerequisite\">\n        <mat-icon class=\"cqa-text-lg cqa-w-[18px] cqa-h-[18px]\">close</mat-icon>\n      </button>\n    </div>\n    </div>\n\n    <div *ngIf=\"showAddAnotherValidation && !allRowsHaveValues()\" class=\"cqa-text-xs cqa-text-[#dc2626] cqa-mb-2\">\n      {{ selectFirstValidationMessage }}\n    </div>\n    <!-- Add Prerequisite button only in empty state; hide when parent has prerequisites (e.g. collapsing after update) -->\n    <div\n      *ngIf=\"rows.length === 0 && !hideAddPrerequisite\"\n      class=\"cqa-border-2 cqa-border-dashed cqa-border-[#ccccff] cqa-rounded-lg cqa-p-3 cqa-mb-3 cqa-bg-white cqa-cursor-pointer cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-flex cqa-items-center cqa-justify-center cqa-gap-2 cqa-min-h-[40px] cqa-w-full cqa-hover:cqa-border-[#9999ee] cqa-hover:cqa-bg-[#f8f8ff] cqa-active:cqa-border-[#7c7ce0] cqa-active:cqa-bg-[#eff6ff]\"\n      (click)=\"onAddRow()\">\n      <mat-icon class=\"cqa-text-[18px] cqa-w-[18px] cqa-h-[18px] cqa-text-[#3b82f6]\">add</mat-icon>\n      <span class=\"cqa-font-medium cqa-font-inter cqa-text-sm cqa-text-[#3b82f6]\">{{ addTriggerText }}</span>\n    </div>\n    <!-- Add Another link when we already have at least one row -->\n    <button\n      *ngIf=\"rows.length > 0 && !hideAddPrerequisite\"\n      type=\"button\"\n      class=\"cqa-mb-3 cqa-flex cqa-items-center cqa-gap-2 cqa-bg-transparent cqa-border-none cqa-p-0 cqa-cursor-pointer cqa-font-inter cqa-text-sm cqa-text-[#4242DB] cqa-hover:cqa-underline\"\n      (click)=\"onAddRow()\">\n      <mat-icon class=\"cqa-text-[18px] cqa-w-[18px] cqa-h-[18px]\">add</mat-icon>\n      <span>{{ addAnotherText }}</span>\n    </button>\n    <div class=\"cqa-flex cqa-gap-3 cqa-justify-end\">\n      <button\n        type=\"button\"\n        class=\"cqa-py-2.5 cqa-px-4 cqa-bg-white cqa-text-[#374151] cqa-border cqa-border-[#d1d5db] cqa-rounded-md cqa-text-sm cqa-font-semibold cqa-cursor-pointer cqa-hover:cqa-bg-[#f9fafb]\"\n        (click)=\"onCancel()\">\n        {{ cancelText }}\n      </button>\n      <button\n        type=\"button\"\n        class=\"cqa-py-2.5 cqa-px-4 cqa-rounded-md cqa-text-sm cqa-font-semibold cqa-border-none cqa-cursor-pointer disabled:cqa-opacity-50 disabled:cqa-cursor-not-allowed cqa-bg-[#1a56db] cqa-text-white cqa-hover:cqa-bg-[#1647b8] disabled:cqa-bg-[#1a56db] cqa-flex cqa-items-center cqa-justify-center cqa-gap-2\"\n        [style.pointer-events]=\"isUpdating ? 'none' : 'auto'\"\n        [style.cursor]=\"isUpdating ? 'not-allowed' : 'pointer'\"\n        [disabled]=\"isUpdateDisabled()\"\n        (click)=\"onUpdate()\">\n        <mat-spinner *ngIf=\"isUpdating\" diameter=\"16\" class=\"cqa-inline-block update-spinner-white\"></mat-spinner>\n        <span>{{ updateText }}</span>\n      </button>\n    </div>\n  </div>\n</ng-container>\n", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: i4$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i6$1.DndDropzoneDirective, selector: "[dndDropzone]", inputs: ["dndDropzone", "dndEffectAllowed", "dndAllowExternal", "dndHorizontal", "dndDragoverClass", "dndDropzoneDisabledClass", "dndDisableIf", "dndDisableDropIf"], outputs: ["dndDragover", "dndDrop"] }, { type: i6$1.DndPlaceholderRefDirective, selector: "[dndPlaceholderRef]" }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6$1.DndDraggableDirective, selector: "[dndDraggable]", inputs: ["dndDraggable", "dndEffectAllowed", "dndType", "dndDraggingClass", "dndDraggingSourceClass", "dndDraggableDisabledClass", "dndDragImageOffsetFunction", "dndDisableIf", "dndDisableDragIf"], outputs: ["dndStart", "dndDrag", "dndEnd", "dndMoved", "dndCopied", "dndLinked", "dndCanceled"] }, { type: i6$1.DndHandleDirective, selector: "[dndHandle]" }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: AddPrerequisiteCasesSectionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-add-prerequisite-cases-section', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'cqa-ui-root cqa-add-prerequisite-cases-section-host' }, template: "<!-- Add Prerequisite trigger - only when collapsed and no rows (user must click to expand); hide when parent has prerequisites -->\n<ng-container *ngIf=\"rows.length === 0 && !expanded && !hideAddPrerequisite\">\n  <div\n    class=\"cqa-border-2 cqa-border-dashed cqa-border-[#D8D9FC] cqa-rounded-lg cqa-p-1 cqa-mt-4 cqa-bg-white cqa-cursor-pointer cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-flex cqa-items-center cqa-justify-center cqa-gap-2  cqa-w-full cqa-hover:cqa-border-[#9999ee] cqa-hover:cqa-bg-[#f8f8ff] cqa-active:cqa-border-[#7c7ce0] cqa-active:cqa-bg-[#eff6ff]\"\n    (click)=\"onAddPrerequisiteClick()\">\n    <mat-icon class=\"cqa-text-[12px] cqa-w-[12px] cqa-h-[12px] cqa-text-[#3F43EE]\">add</mat-icon>\n    <span class=\"cqa-font-regular cqa-font-inter cqa-text-sm cqa-text-[#3F43EE]\">{{ addTriggerText }}</span>\n  </div>\n</ng-container>\n\n<!-- Collapsed summary when we have rows but expanded=false -->\n<ng-container *ngIf=\"rows.length > 0 && !expanded\">\n  <div\n    class=\"cqa-border-2 cqa-border-dashed cqa-border-[#D8D9FC] cqa-rounded-lg cqa-p-1.5 cqa-mt-4 cqa-bg-white cqa-cursor-pointer cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-flex cqa-items-center cqa-justify-between cqa-min-h-[27px] cqa-hover:cqa-border-[#9ca3af] cqa-hover:cqa-bg-[#f9fafb] cqa-active:cqa-border-[#6366f1] cqa-active:cqa-bg-[#eff6ff]\"\n    (click)=\"toggleExpanded(true)\">\n    <span class=\"cqa-text-[#4a5565] cqa-font-normal cqa-font-inter cqa-text-xs\">{{ rows.length }} prerequisite{{ rows.length !== 1 ? 's' : '' }}</span>\n    <mat-icon class=\"cqa-text-[14px] cqa-w-[14px] cqa-h-[14px] cqa-text-[#4a5565]\">expand_more</mat-icon>\n  </div>\n</ng-container>\n\n<!-- Expanded form - when expanded=true (with or without rows; no Add Prerequisite trigger) -->\n<ng-container *ngIf=\"expanded\">\n  <div class=\"cqa-p-3 cqa-bg-white cqa-border cqa-border-[#e5e7eb] cqa-rounded-lg\">\n    <div class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-mb-3\">\n      <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-m-0 cqa-leading-none\">{{ label }}</label>\n      <mat-icon class=\"cqa-inline-flex cqa-mt-1 cqa-items-center cqa-justify-center cqa-w-4 cqa-h-4 cqa-text-sm cqa-text-[#6b7280] cqa-cursor-help cqa-flex-shrink-0\" [matTooltip]=\"infoTooltip\" matTooltipPosition=\"above\" matTooltipShowDelay=\"300\">info</mat-icon>\n      <button\n        type=\"button\"\n        class=\"cqa-ml-auto cqa-flex cqa-items-center cqa-justify-center cqa-w-7 cqa-h-7 cqa-p-0 cqa-bg-transparent cqa-border-none cqa-rounded-md cqa-text-[#6b7280] cqa-cursor-pointer cqa-hover:cqa-bg-[#f3f4f6] cqa-hover:cqa-text-[#374151]\"\n        (click)=\"toggleExpanded(false)\"\n        matTooltip=\"Close\">\n        <mat-icon class=\"cqa-text-xl cqa-w-5 cqa-h-5\">expand_less</mat-icon>\n      </button>\n    </div>\n\n    <div\n      class=\"prerequisite-drop-list cqa-flex cqa-flex-col cqa-gap-2 cqa-mb-3\"\n      [dndDropzone]=\"['prerequisite-row']\"\n      dndEffectAllowed=\"move\"\n      dndDragoverClass=\"dndDragover\"\n      (dndDrop)=\"onDndDrop($event)\">\n      <div dndPlaceholderRef class=\"prerequisite-drag-placeholder\">Drop here</div>\n      <div\n        *ngFor=\"let row of rows; let i = index; trackBy: trackByKey\"\n        class=\"prerequisite-drag-item cqa-flex cqa-items-center cqa-gap-2\"\n        [dndDraggable]=\"row\"\n        [dndDisableIf]=\"rows.length <= 1\"\n        dndEffectAllowed=\"move\"\n        dndType=\"prerequisite-row\">\n        <!-- 9-dot grid drag handle (only when multiple rows to reorder) -->\n        <div *ngIf=\"rows.length > 1\" dndHandle class=\"cqa-flex cqa-flex-shrink-0 cqa-items-center cqa-justify-center cqa-cursor-grab cqa-text-[#6B7280] cqa-hover:cqa-text-[#111827] active:cqa-cursor-grabbing\" matTooltip=\"Drag to reorder\">\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n            <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n            <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n            <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n            <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n            <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n            <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n            <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n            <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n          </svg>\n        </div>\n\n      <div class=\"cqa-flex-1 cqa-min-w-0\">\n        <!-- Custom template (e.g. parent-provided cqa-dynamic-select) -->\n        <ng-container *ngIf=\"selectBodyTpl\">\n          <ng-container\n            *ngTemplateOutlet=\"selectBodyTpl; context: {\n              $implicit: row,\n              index: i,\n              form: form,\n              config: getConfig(i)\n            }\">\n          </ng-container>\n        </ng-container>\n        <!-- Default: built-in cqa-dynamic-select -->\n        <cqa-dynamic-select\n          *ngIf=\"!selectBodyTpl && form\"\n          [form]=\"form\"\n          [config]=\"getConfig(i)\"\n          (selectionChange)=\"onSelectionChange($event, i)\">\n        </cqa-dynamic-select>\n      </div>\n\n      <button\n        type=\"button\"\n        class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-8 cqa-h-8 cqa-min-w-[32px] cqa-bg-transparent cqa-border-none cqa-rounded-md cqa-text-[#6b7280] cqa-cursor-pointer cqa-p-0 cqa-hover:cqa-bg-[#f3f4f6] cqa-hover:cqa-text-[#374151]\"\n        (click)=\"onRemoveRow(i)\"\n        matTooltip=\"Cancel\">\n        <mat-icon class=\"cqa-text-lg cqa-w-[18px] cqa-h-[18px]\">close</mat-icon>\n      </button>\n    </div>\n    </div>\n\n    <div *ngIf=\"showAddAnotherValidation && !allRowsHaveValues()\" class=\"cqa-text-xs cqa-text-[#dc2626] cqa-mb-2\">\n      {{ selectFirstValidationMessage }}\n    </div>\n    <!-- Add Prerequisite button only in empty state; hide when parent has prerequisites (e.g. collapsing after update) -->\n    <div\n      *ngIf=\"rows.length === 0 && !hideAddPrerequisite\"\n      class=\"cqa-border-2 cqa-border-dashed cqa-border-[#ccccff] cqa-rounded-lg cqa-p-3 cqa-mb-3 cqa-bg-white cqa-cursor-pointer cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-flex cqa-items-center cqa-justify-center cqa-gap-2 cqa-min-h-[40px] cqa-w-full cqa-hover:cqa-border-[#9999ee] cqa-hover:cqa-bg-[#f8f8ff] cqa-active:cqa-border-[#7c7ce0] cqa-active:cqa-bg-[#eff6ff]\"\n      (click)=\"onAddRow()\">\n      <mat-icon class=\"cqa-text-[18px] cqa-w-[18px] cqa-h-[18px] cqa-text-[#3b82f6]\">add</mat-icon>\n      <span class=\"cqa-font-medium cqa-font-inter cqa-text-sm cqa-text-[#3b82f6]\">{{ addTriggerText }}</span>\n    </div>\n    <!-- Add Another link when we already have at least one row -->\n    <button\n      *ngIf=\"rows.length > 0 && !hideAddPrerequisite\"\n      type=\"button\"\n      class=\"cqa-mb-3 cqa-flex cqa-items-center cqa-gap-2 cqa-bg-transparent cqa-border-none cqa-p-0 cqa-cursor-pointer cqa-font-inter cqa-text-sm cqa-text-[#4242DB] cqa-hover:cqa-underline\"\n      (click)=\"onAddRow()\">\n      <mat-icon class=\"cqa-text-[18px] cqa-w-[18px] cqa-h-[18px]\">add</mat-icon>\n      <span>{{ addAnotherText }}</span>\n    </button>\n    <div class=\"cqa-flex cqa-gap-3 cqa-justify-end\">\n      <button\n        type=\"button\"\n        class=\"cqa-py-2.5 cqa-px-4 cqa-bg-white cqa-text-[#374151] cqa-border cqa-border-[#d1d5db] cqa-rounded-md cqa-text-sm cqa-font-semibold cqa-cursor-pointer cqa-hover:cqa-bg-[#f9fafb]\"\n        (click)=\"onCancel()\">\n        {{ cancelText }}\n      </button>\n      <button\n        type=\"button\"\n        class=\"cqa-py-2.5 cqa-px-4 cqa-rounded-md cqa-text-sm cqa-font-semibold cqa-border-none cqa-cursor-pointer disabled:cqa-opacity-50 disabled:cqa-cursor-not-allowed cqa-bg-[#1a56db] cqa-text-white cqa-hover:cqa-bg-[#1647b8] disabled:cqa-bg-[#1a56db] cqa-flex cqa-items-center cqa-justify-center cqa-gap-2\"\n        [style.pointer-events]=\"isUpdating ? 'none' : 'auto'\"\n        [style.cursor]=\"isUpdating ? 'not-allowed' : 'pointer'\"\n        [disabled]=\"isUpdateDisabled()\"\n        (click)=\"onUpdate()\">\n        <mat-spinner *ngIf=\"isUpdating\" diameter=\"16\" class=\"cqa-inline-block update-spinner-white\"></mat-spinner>\n        <span>{{ updateText }}</span>\n      </button>\n    </div>\n  </div>\n</ng-container>\n", styles: [] }]
+            args: [{ selector: 'cqa-add-prerequisite-cases-section', changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'cqa-ui-root cqa-add-prerequisite-cases-section-host' }, template: "<!-- Add Prerequisite trigger - only when collapsed and no rows (user must click to expand); hide when parent has prerequisites -->\n<ng-container *ngIf=\"rows.length === 0 && !expanded && !hideAddPrerequisite\">\n  <div\n    class=\"cqa-border-2 cqa-border-dashed cqa-border-[#D8D9FC] cqa-rounded-lg cqa-p-1 cqa-mt-4 cqa-bg-white cqa-cursor-pointer cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-flex cqa-items-center cqa-justify-center cqa-gap-2  cqa-w-full cqa-hover:cqa-border-[#9999ee] cqa-hover:cqa-bg-[#f8f8ff] cqa-active:cqa-border-[#7c7ce0] cqa-active:cqa-bg-[#eff6ff]\"\n    (click)=\"onAddPrerequisiteClick()\">\n    <mat-icon class=\"cqa-text-[12px] cqa-w-[12px] cqa-h-[12px] cqa-text-[#3F43EE]\">add</mat-icon>\n    <span class=\"cqa-font-regular cqa-font-inter cqa-text-sm cqa-text-[#3F43EE]\">{{ addTriggerText }}</span>\n  </div>\n</ng-container>\n\n<!-- Collapsed summary when we have rows but expanded=false -->\n<ng-container *ngIf=\"rows.length > 0 && !expanded\">\n  <div\n    class=\"cqa-border-2 cqa-border-dashed cqa-border-[#D8D9FC] cqa-rounded-lg cqa-p-1.5 cqa-mt-4 cqa-bg-white cqa-cursor-pointer cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-flex cqa-items-center cqa-justify-between cqa-min-h-[27px] cqa-hover:cqa-border-[#9ca3af] cqa-hover:cqa-bg-[#f9fafb] cqa-active:cqa-border-[#6366f1] cqa-active:cqa-bg-[#eff6ff]\"\n    (click)=\"toggleExpanded(true)\">\n    <span class=\"cqa-text-[#4a5565] cqa-font-normal cqa-font-inter cqa-text-xs\">{{ rows.length }} prerequisite{{ rows.length !== 1 ? 's' : '' }}</span>\n    <mat-icon class=\"cqa-text-[14px] cqa-w-[14px] cqa-h-[14px] cqa-text-[#4a5565]\">expand_more</mat-icon>\n  </div>\n</ng-container>\n\n<!-- Expanded form - when expanded=true (with or without rows; no Add Prerequisite trigger) -->\n<ng-container *ngIf=\"expanded\">\n  <div class=\"cqa-p-3 cqa-bg-white cqa-border cqa-border-[#e5e7eb] cqa-rounded-lg\">\n    <div class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-mb-3\">\n      <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-m-0 cqa-leading-none\">{{ label }}</label>\n      <mat-icon class=\"cqa-inline-flex cqa-mt-1 cqa-items-center cqa-justify-center cqa-w-4 cqa-h-4 cqa-text-sm cqa-text-[#6b7280] cqa-cursor-help cqa-flex-shrink-0\" [matTooltip]=\"infoTooltip\" matTooltipPosition=\"above\" matTooltipShowDelay=\"300\">info</mat-icon>\n      <button\n        type=\"button\"\n        class=\"cqa-ml-auto cqa-flex cqa-items-center cqa-justify-center cqa-w-7 cqa-h-7 cqa-p-0 cqa-bg-transparent cqa-border-none cqa-rounded-md cqa-text-[#6b7280] cqa-cursor-pointer cqa-hover:cqa-bg-[#f3f4f6] cqa-hover:cqa-text-[#374151]\"\n        (click)=\"toggleExpanded(false)\"\n        matTooltip=\"Close\">\n        <mat-icon class=\"cqa-text-xl cqa-w-5 cqa-h-5\">expand_less</mat-icon>\n      </button>\n    </div>\n\n    <div\n      class=\"prerequisite-drop-list cqa-flex cqa-flex-col cqa-gap-2 cqa-mb-3\"\n      [dndDropzone]=\"['prerequisite-row']\"\n      dndEffectAllowed=\"move\"\n      dndDragoverClass=\"dndDragover\"\n      (dndDrop)=\"onDndDrop($event)\">\n      <div dndPlaceholderRef class=\"prerequisite-drag-placeholder\">Drop here</div>\n      <div\n        *ngFor=\"let row of rows; let i = index; trackBy: trackByKey\"\n        class=\"prerequisite-drag-item cqa-flex cqa-items-center cqa-gap-2\"\n        [dndDraggable]=\"row\"\n        [dndDisableIf]=\"rows.length <= 1\"\n        dndEffectAllowed=\"move\"\n        dndType=\"prerequisite-row\">\n        <!-- 9-dot grid drag handle (only when multiple rows to reorder) -->\n        <div *ngIf=\"rows.length > 1\" dndHandle class=\"cqa-flex cqa-flex-shrink-0 cqa-items-center cqa-justify-center cqa-cursor-grab cqa-text-[#6B7280] cqa-hover:cqa-text-[#111827] active:cqa-cursor-grabbing\" matTooltip=\"Drag to reorder\">\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n            <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n            <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n            <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n            <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n            <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n            <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n            <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n            <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n          </svg>\n        </div>\n\n      <div class=\"cqa-flex-1 cqa-min-w-0\">\n        <!-- Custom template (e.g. parent-provided cqa-dynamic-select) -->\n        <ng-container *ngIf=\"selectBodyTpl\">\n          <ng-container\n            *ngTemplateOutlet=\"selectBodyTpl; context: {\n              $implicit: row,\n              index: i,\n              form: form,\n              config: getConfig(i)\n            }\">\n          </ng-container>\n        </ng-container>\n        <!-- Default: built-in cqa-dynamic-select -->\n        <cqa-dynamic-select\n          *ngIf=\"!selectBodyTpl && form\"\n          [form]=\"form\"\n          [config]=\"getConfig(i)\"\n          (selectionChange)=\"onSelectionChange($event, i)\">\n        </cqa-dynamic-select>\n      </div>\n\n      <button\n        *ngIf=\"rowHasValue(i)\"\n        type=\"button\"\n        class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-8 cqa-h-8 cqa-min-w-[32px] cqa-bg-transparent cqa-border-none cqa-rounded-md cqa-text-[#6b7280] cqa-cursor-pointer cqa-p-0 cqa-hover:cqa-bg-[#f3f4f6] cqa-hover:cqa-text-[#374151]\"\n        (click)=\"onRemoveRow(i)\"\n        matTooltip=\"Remove Prerequisite\">\n        <mat-icon class=\"cqa-text-lg cqa-w-[18px] cqa-h-[18px]\">close</mat-icon>\n      </button>\n    </div>\n    </div>\n\n    <div *ngIf=\"showAddAnotherValidation && !allRowsHaveValues()\" class=\"cqa-text-xs cqa-text-[#dc2626] cqa-mb-2\">\n      {{ selectFirstValidationMessage }}\n    </div>\n    <!-- Add Prerequisite button only in empty state; hide when parent has prerequisites (e.g. collapsing after update) -->\n    <div\n      *ngIf=\"rows.length === 0 && !hideAddPrerequisite\"\n      class=\"cqa-border-2 cqa-border-dashed cqa-border-[#ccccff] cqa-rounded-lg cqa-p-3 cqa-mb-3 cqa-bg-white cqa-cursor-pointer cqa-transition-all cqa-duration-200 cqa-ease-in-out cqa-flex cqa-items-center cqa-justify-center cqa-gap-2 cqa-min-h-[40px] cqa-w-full cqa-hover:cqa-border-[#9999ee] cqa-hover:cqa-bg-[#f8f8ff] cqa-active:cqa-border-[#7c7ce0] cqa-active:cqa-bg-[#eff6ff]\"\n      (click)=\"onAddRow()\">\n      <mat-icon class=\"cqa-text-[18px] cqa-w-[18px] cqa-h-[18px] cqa-text-[#3b82f6]\">add</mat-icon>\n      <span class=\"cqa-font-medium cqa-font-inter cqa-text-sm cqa-text-[#3b82f6]\">{{ addTriggerText }}</span>\n    </div>\n    <!-- Add Another link when we already have at least one row -->\n    <button\n      *ngIf=\"rows.length > 0 && !hideAddPrerequisite\"\n      type=\"button\"\n      class=\"cqa-mb-3 cqa-flex cqa-items-center cqa-gap-2 cqa-bg-transparent cqa-border-none cqa-p-0 cqa-cursor-pointer cqa-font-inter cqa-text-sm cqa-text-[#4242DB] cqa-hover:cqa-underline\"\n      (click)=\"onAddRow()\">\n      <mat-icon class=\"cqa-text-[18px] cqa-w-[18px] cqa-h-[18px]\">add</mat-icon>\n      <span>{{ addAnotherText }}</span>\n    </button>\n    <div class=\"cqa-flex cqa-gap-3 cqa-justify-end\">\n      <button\n        type=\"button\"\n        class=\"cqa-py-2.5 cqa-px-4 cqa-bg-white cqa-text-[#374151] cqa-border cqa-border-[#d1d5db] cqa-rounded-md cqa-text-sm cqa-font-semibold cqa-cursor-pointer cqa-hover:cqa-bg-[#f9fafb]\"\n        (click)=\"onCancel()\">\n        {{ cancelText }}\n      </button>\n      <button\n        type=\"button\"\n        class=\"cqa-py-2.5 cqa-px-4 cqa-rounded-md cqa-text-sm cqa-font-semibold cqa-border-none cqa-cursor-pointer disabled:cqa-opacity-50 disabled:cqa-cursor-not-allowed cqa-bg-[#1a56db] cqa-text-white cqa-hover:cqa-bg-[#1647b8] disabled:cqa-bg-[#1a56db] cqa-flex cqa-items-center cqa-justify-center cqa-gap-2\"\n        [style.pointer-events]=\"isUpdating ? 'none' : 'auto'\"\n        [style.cursor]=\"isUpdating ? 'not-allowed' : 'pointer'\"\n        [disabled]=\"isUpdateDisabled()\"\n        (click)=\"onUpdate()\">\n        <mat-spinner *ngIf=\"isUpdating\" diameter=\"16\" class=\"cqa-inline-block update-spinner-white\"></mat-spinner>\n        <span>{{ updateText }}</span>\n      </button>\n    </div>\n  </div>\n</ng-container>\n", styles: [] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { expanded: [{
                 type: Input
             }], form: [{
@@ -10749,10 +10757,10 @@ class StepGroupComponent extends BaseStepComponent {
     }
 }
 StepGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepGroupComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-StepGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepGroupComponent, selector: "cqa-step-group", inputs: { id: "id", testStepResultId: "testStepResultId", stepNumber: "stepNumber", title: "title", status: "status", duration: "duration", timingBreakdown: "timingBreakdown", expanded: "expanded", groupName: "groupName", steps: "steps", hasChild: "hasChild", isLoading: "isLoading", stepDeleted: "stepDeleted", isDebug: "isDebug", debugPointSet: "debugPointSet", parentSkipped: "parentSkipped", getDebugPointSetHandler: "getDebugPointSetHandler", onDebugPointChangeHandler: "onDebugPointChangeHandler", addStepMenuOptions: "addStepMenuOptions", stepMoreMenuOptions: "stepMoreMenuOptions", onExpandHandler: "onExpandHandler", onEditStepHandler: "onEditStepHandler", onAddStepOptionSelectHandler: "onAddStepOptionSelectHandler", onStepMoreOptionSelectHandler: "onStepMoreOptionSelectHandler", getAddStepMenuOptionsForNested: "getAddStepMenuOptionsForNested", getStepMoreMenuOptionsForNested: "getStepMoreMenuOptionsForNested", getConditionBranchesHandler: "getConditionBranchesHandler", onConditionBranchClickHandler: "onConditionBranchClickHandler", isStepLoadingHandler: "isStepLoadingHandler", isStepExpandedHandler: "isStepExpandedHandler", convertMsToSecondsHandler: "convertMsToSecondsHandler", formatFailureDetailsHandler: "formatFailureDetailsHandler", getSelfHealAnalysisHandler: "getSelfHealAnalysisHandler", onMakeCurrentBaselineHandler: "onMakeCurrentBaselineHandler", onUploadBaselineHandler: "onUploadBaselineHandler", onAnalyzeHandler: "onAnalyzeHandler", onViewFullLogsHandler: "onViewFullLogsHandler", onSelfHealActionHandler: "onSelfHealActionHandler", getSelfHealLoadingStatesHandler: "getSelfHealLoadingStatesHandler", getLoopIterationsHandler: "getLoopIterationsHandler", getApiAssertionsHandler: "getApiAssertionsHandler", formatActionsHandler: "formatActionsHandler", onViewAllIterationsHandler: "onViewAllIterationsHandler", onStepClickHandler: "onStepClickHandler", onJsonPathCopiedHandler: "onJsonPathCopiedHandler", onDownloadHandler: "onDownloadHandler", onFilePathCopiedHandler: "onFilePathCopiedHandler", onTextCopiedHandler: "onTextCopiedHandler", jumpToTimestampHandler: "jumpToTimestampHandler", downloadingStepId: "downloadingStepId", isUploadingBaseline: "isUploadingBaseline", isMakingCurrentBaseline: "isMakingCurrentBaseline", isLive: "isLive", step: "step" }, outputs: { debugPointChange: "debugPointChange", editStep: "editStep", addStepOptionSelect: "addStepOptionSelect", stepMoreOptionSelect: "stepMoreOptionSelect", onExpand: "onExpand" }, host: { classAttribute: "cqa-ui-root cqa-w-full" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-font-inter cqa-w-full\" [class.cqa-opacity-50]=\"isDebug && isSkipped && !parentSkipped\" style=\"border-bottom: '1px solid #F3F4F6'\" [style.background-color]=\"!isDebug ? null : config.status.toLowerCase() === 'paused' ? '#FFF9E9' : config.status.toLowerCase() === 'failed' ? '#FEF2F2' : null\" (click)=\"$event.stopPropagation()\">\n  <!-- Header -->\n  <div\n    class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-p-2 cqa-cursor-pointer\"\n    (click)=\"toggle($event)\">\n    <div *ngIf=\"showDebugIcon\" class=\"cqa-flex cqa-items-center cqa-justify-center\"\n      [matTooltip]=\"status.toLowerCase() === 'running' ? 'Breakpoint cannot be set on a running step' : (isStepDeleted ? 'Breakpoint cannot be set on deleted steps' : ((!!parentSkipped && !step?.debugPointDisabled) ? 'Breakpoint cannot be set on a running step' : (!!step?.debugPointDisabled ? 'Breakpoint cannot be set on skipped steps' : '')))\"\n      matTooltipPosition=\"right\">\n      <button type=\"button\" class=\"cqa-p-0 cqa-border-0 cqa-bg-transparent cqa-rounded-full cqa-transition-opacity focus:cqa-outline-none\"\n        [ngClass]=\"status.toLowerCase() === 'running' || !!step?.debugPointDisabled || !!parentSkipped || isStepDeleted ? 'cqa-cursor-not-allowed cqa-opacity-40 cqa-pointer-events-none' : 'cqa-cursor-pointer hover:cqa-opacity-80'\"\n        [disabled]=\"status.toLowerCase() === 'running' || !!step?.debugPointDisabled || !!parentSkipped || isStepDeleted\"\n        (click)=\"onDebugPointClick($event)\" [attr.aria-label]=\"debugPointSet ? 'Remove debug point' : 'Set debug point'\">\n        <svg *ngIf=\"debugPointSet\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <circle cx=\"7\" cy=\"7\" r=\"6\" [attr.fill]=\"!!step?.debugPointDisabled || !!parentSkipped || isStepDeleted ? '#9E9E9E' : '#C63535'\"/>\n        </svg>\n        <svg *ngIf=\"!debugPointSet\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <circle cx=\"7\" cy=\"7\" r=\"6\" [attr.stroke]=\"!!step?.debugPointDisabled || !!parentSkipped || isStepDeleted ? '#9E9E9E' : '#C63535'\" stroke-width=\"1.5\" fill=\"none\"/>\n        </svg>\n      </button>\n    </div>\n    <!-- Status Icon -->\n    <div class=\"cqa-flex cqa-items-center cqa-justify-center\">\n      <!-- Success -->\n      <svg *ngIf=\"config.status.toLowerCase() === 'success'\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10.9005 4.99999C11.1289 6.12064 10.9662 7.28571 10.4395 8.30089C9.91279 9.31608 9.054 10.12 8.00631 10.5787C6.95862 11.0373 5.78536 11.1229 4.6822 10.8212C3.57904 10.5195 2.61265 9.84869 1.94419 8.92071C1.27573 7.99272 0.945611 6.86361 1.00888 5.72169C1.07215 4.57976 1.52499 3.49404 2.29188 2.64558C3.05876 1.79712 4.09334 1.23721 5.22308 1.05922C6.35282 0.881233 7.50944 1.09592 8.50005 1.66749\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 5.5L6 7L11 2\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      <!-- Failed -->\n      <svg *ngIf=\"config.status.toLowerCase() === 'failure' || config.status.toLowerCase() === 'failed'\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#EF4444\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4 4L8 8M8 4L4 8\" stroke=\"#EF4444\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      <!-- Pending -->\n      <svg *ngIf=\"config.status.toLowerCase() === 'pending'\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      <!-- Running -->\n      <svg *ngIf=\"config.status.toLowerCase() === 'running'\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#3B82F6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#3B82F6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      \n      <span *ngIf=\"config.status.toLowerCase() === 'skipped'\" class=\"material-symbols-outlined cqa-text-[#9CA3AF] cqa-text-[12px]\">\n        skip_next\n      </span>\n      <div *ngIf=\"config.status.toLowerCase() === 'paused'\"><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M8.5 2H7.5C7.22386 2 7 2.22386 7 2.5V9.5C7 9.77614 7.22386 10 7.5 10H8.5C8.77614 10 9 9.77614 9 9.5V2.5C9 2.22386 8.77614 2 8.5 2Z\" stroke=\"#E17100\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 2H3.5C3.22386 2 3 2.22386 3 2.5V9.5C3 9.77614 3.22386 10 3.5 10H4.5C4.77614 10 5 9.77614 5 9.5V2.5C5 2.22386 4.77614 2 4.5 2Z\" stroke=\"#E17100\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n    </div>\n\n    <!-- Folder Icon -->\n    <div><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M11.6666 11.6667C11.976 11.6667 12.2728 11.5437 12.4916 11.325C12.7104 11.1062 12.8333 10.8094 12.8333 10.5V4.66667C12.8333 4.35725 12.7104 4.0605 12.4916 3.84171C12.2728 3.62292 11.976 3.5 11.6666 3.5H7.05829C6.86318 3.50191 6.67069 3.45486 6.49847 3.36314C6.32624 3.27142 6.17977 3.13797 6.07246 2.975L5.59996 2.275C5.49373 2.11369 5.34911 1.98128 5.17908 1.88965C5.00906 1.79802 4.81894 1.75003 4.62579 1.75H2.33329C2.02387 1.75 1.72713 1.87292 1.50833 2.09171C1.28954 2.3105 1.16663 2.60725 1.16663 2.91667V10.5C1.16663 10.8094 1.28954 11.1062 1.50833 11.325C1.72713 11.5437 2.02387 11.6667 2.33329 11.6667H11.6666Z\" fill=\"#EFF6FF\" stroke=\"#60A5FA\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n\n    <!-- Step Number and Title -->\n    <div class=\"cqa-font-semibold cqa-flex-1 cqa-text-[#334155] cqa-text-[14px] cqa-leading-[18px] cqa-font-inter cqa-flex cqa-items-center cqa-gap-1\" style=\"word-break: break-word;\">\n      <span>{{ config?.stepNumber }}. Step group: {{ config.groupName }}</span>\n      <span *ngIf=\"config.stepDeleted\" class=\"cqa-px-1.5 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[10px] cqa-leading-[12px] cqa-font-medium cqa-text-[#B42318] cqa-bg-[#FEF3F2] cqa-border cqa-border-[#FEE4E2]\">\n        Deleted\n      </span>\n    </div>\n\n    <div class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-font-inter\">\n      <!-- Step Change Badges (debug only) -->\n      <ng-container *ngIf=\"isDebug\">\n        <ng-container *ngFor=\"let badge of stepBadges\">\n        <cqa-badge\n          *ngIf=\"badge === 'skipped'\"\n          label=\"Skipped\"\n          size=\"small\"\n          [textColor]=\"'#4A5565'\"\n          [borderColor]=\"'#99A1AF'\"\n          [backgroundColor]=\"'#FFFFFF'\">\n        </cqa-badge>\n        <cqa-badge\n          *ngIf=\"badge === 'edited'\"\n          label=\"Edited\"\n          size=\"small\"\n          [textColor]=\"'#FBBF24'\"\n          [borderColor]=\"'#FDDF92'\"\n          [backgroundColor]=\"'#FFF9E9'\">\n        </cqa-badge>\n        <cqa-badge\n          *ngIf=\"badge === 'added'\"\n          label=\"Added\"\n          size=\"small\"\n          [textColor]=\"'#0DBD7D'\"\n          [borderColor]=\"'#5ED3A8'\"\n          [backgroundColor]=\"'#CFF2E5'\">\n        </cqa-badge>\n        <cqa-badge\n          *ngIf=\"badge === 'removed'\"\n          label=\"Removed\"\n          size=\"small\"\n          [textColor]=\"'#EE3F3F'\"\n          [borderColor]=\"'#F47F7F'\"\n          [backgroundColor]=\"'#FCD9D9'\">\n        </cqa-badge>\n        </ng-container>\n      </ng-container>\n      <div class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-rounded-[4px] cqa-py-0.5 cqa-px-1 cqa-bg-[#6366F11A] cqa-ml-1 cqa-cursor-pointer hover:cqa-opacity-80 cqa-transition-opacity\"\n           *ngIf=\"step?.executedResult?.video_start_time\" \n           [matTooltip]=\"'Jump to video time'\" \n           matTooltipPosition=\"below\"\n           (click)=\"onJumpToTimestamp($event)\">\n        <mat-icon class=\"cqa-text-[#636363] !cqa-text-[10px] !cqa-w-[10px] !cqa-h-[10px]\">\n          play_arrow\n        </mat-icon>\n        <span class=\"cqa-text-[8px] cqa-leading-[12px] cqa-font-normal cqa-text-[#636363]\">\n          {{ formatDurationClock(step?.executedResult?.video_start_time || 0) }}\n        </span>\n      </div>\n      <div *ngIf=\"isDebug\" class=\"cqa-flex cqa-items-center cqa-gap-0.5 cqa-text-[#9CA3AF]\" (click)=\"$event.stopPropagation()\">\n        <button *ngIf=\"!step?.isStepGroupChildren\" type=\"button\" class=\"cqa-p-0 cqa-border-0 cqa-bg-transparent cqa-cursor-pointer hover:cqa-opacity-80 cqa-transition-opacity focus:cqa-outline-none\" aria-label=\"Edit\" (click)=\"onEditStep($event)\">\n          <mat-icon class=\"!cqa-text-[14px] !cqa-w-[14px] !cqa-h-[14px]\">edit</mat-icon>\n        </button>\n        <button *ngIf=\"!step?.isStepGroupChildren\" type=\"button\" class=\"cqa-p-0 cqa-border-0 cqa-bg-transparent cqa-cursor-pointer hover:cqa-opacity-80 cqa-transition-opacity focus:cqa-outline-none\" aria-label=\"Add\" [matMenuTriggerFor]=\"addStepMenu\">\n          <mat-icon class=\"!cqa-text-[14px] !cqa-w-[14px] !cqa-h-[14px]\">add</mat-icon>\n        </button>\n        <mat-menu #addStepMenu=\"matMenu\" class=\"cqa-add-step-menu\" xPosition=\"before\" yPosition=\"below\">\n          <button mat-menu-item *ngFor=\"let opt of addStepMenuOptions\" (click)=\"onAddStepOptionSelect(opt, $event)\">\n            {{ opt.label }}\n          </button>\n        </mat-menu>\n        <button *ngIf=\"effectiveStepMoreMenuOptions.length\" type=\"button\" class=\"cqa-p-0 cqa-border-0 cqa-bg-transparent cqa-cursor-pointer hover:cqa-opacity-80 cqa-transition-opacity focus:cqa-outline-none\" aria-label=\"More options\" [matMenuTriggerFor]=\"stepMoreMenu\">\n          <mat-icon class=\"!cqa-text-[14px] !cqa-w-[14px] !cqa-h-[14px]\">more_vert</mat-icon>\n        </button>\n        <mat-menu #stepMoreMenu=\"matMenu\" class=\"cqa-step-more-menu\" xPosition=\"before\" yPosition=\"below\">\n          <button mat-menu-item *ngFor=\"let opt of effectiveStepMoreMenuOptions\" (click)=\"onStepMoreOptionSelect(opt, $event)\">{{ opt.label }}</button>\n        </mat-menu>\n      </div>\n      <span class=\"cqa-text-[12px] cqa-leading-[15px] cqa-font-medium cqa-text-[#9CA3AF]\">\n        {{ formatDuration(config.duration) }}\n      </span>\n      <svg [class.cqa-rotate-180]=\"isExpanded\" class=\"cqa-transition-transform\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M3.5 5L7 8.5L10.5 5\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n    </div>\n  </div>\n\n  <!-- Expanded Content -->\n  <div *ngIf=\"isExpanded\">\n    <!-- Nested Steps -->\n    <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-mt-2 cqa-ml-[18px]\">\n      <!-- Loading indicator for nested steps -->\n      <div *ngIf=\"hasChild && (!config.steps || config.steps.length === 0) && isStepLoading()\" \n           class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-py-2 cqa-px-3\">\n        <svg class=\"cqa-animate-spin cqa-text-[#3B82F6]\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <circle cx=\"7\" cy=\"7\" r=\"6\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" opacity=\"0.25\"/>\n          <path d=\"M7 1A6 6 0 0 1 13 7\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" stroke-linecap=\"round\"/>\n        </svg>\n        <span class=\"cqa-text-[11px] cqa-leading-[13px] cqa-text-[#737373]\">Loading nested steps...</span>\n      </div>\n\n      <ng-container *ngFor=\"let step of config.steps; index as i\">\n        <!-- Wrapper to show skeleton while step-renderer is loading -->\n        <div\n          class=\"cqa-step-renderer-wrapper\"\n          [attr.id]=\"'exc-' + step.id\"\n          [class.loaded]=\"!isNestedStepLoading(step)\">\n          <!-- Loading skeleton overlay -->\n          <!-- <div *ngIf=\"isNestedStepLoading(step)\" class=\"cqa-step-skeleton-overlay\">\n            <div class=\"cqa-step-skeleton cqa-mx-3 cqa-my-1\"></div>\n          </div> -->\n          <!-- Use step-renderer for all nested steps to avoid circular dependencies -->\n          <!-- The step-renderer will dynamically load the appropriate component and pass handlers -->\n          <cqa-step-renderer \n            [step]=\"step\"\n            [stepNumber]=\"step.stepNumber || (stepNumber + '.' + (i + 1))\"\n            [onExpandHandler]=\"onExpandHandler\"\n            [getConditionBranchesHandler]=\"getConditionBranchesHandler\"\n            [onConditionBranchClickHandler]=\"onConditionBranchClickHandler\"\n            [isStepLoadingHandler]=\"isStepLoadingHandler\"\n            [isStepExpandedHandler]=\"isStepExpandedHandler\"\n            [convertMsToSecondsHandler]=\"convertMsToSecondsHandler\"\n            [formatFailureDetailsHandler]=\"formatFailureDetailsHandler\"\n            [getSelfHealAnalysisHandler]=\"getSelfHealAnalysisHandler\"\n            [getSelfHealLoadingStatesHandler]=\"getSelfHealLoadingStatesHandler\"\n            [getLoopIterationsHandler]=\"getLoopIterationsHandler\"\n            [getApiAssertionsHandler]=\"getApiAssertionsHandler\"\n            [formatActionsHandler]=\"formatActionsHandler\"\n            [onViewAllIterationsHandler]=\"onViewAllIterationsHandler\"\n            [onMakeCurrentBaselineHandler]=\"onMakeCurrentBaselineHandler\"\n            [onUploadBaselineHandler]=\"onUploadBaselineHandler\"\n            [onAnalyzeHandler]=\"onAnalyzeHandler\"\n            [onViewFullLogsHandler]=\"onViewFullLogsHandler\"\n            [onSelfHealActionHandler]=\"onSelfHealActionHandler\"\n            [onStepClickHandler]=\"onStepClickHandler\"\n            [onJsonPathCopiedHandler]=\"onJsonPathCopiedHandler\"\n            [onDownloadHandler]=\"onDownloadHandler\"\n            [onFilePathCopiedHandler]=\"onFilePathCopiedHandler\"\n            [onTextCopiedHandler]=\"onTextCopiedHandler\"\n            [jumpToTimestampHandler]=\"jumpToTimestampHandler\"\n            [downloadingStepId]=\"downloadingStepId\"\n            [isUploadingBaseline]=\"isUploadingBaseline\"\n            [isMakingCurrentBaseline]=\"isMakingCurrentBaseline\"\n            [selectedIterationId]=\"step?.selectedIterationId || ''\"\n            [isLive]=\"isLive\"\n            [isDebug]=\"isDebug\"\n            [parentSkipped]=\"selfDebugDisabled\"\n            [debugPointSet]=\"getDebugPointSetHandler ? getDebugPointSetHandler(step) : debugPointSet\"\n            [getDebugPointSetHandler]=\"getDebugPointSetHandler\"\n            [onDebugPointChangeHandler]=\"onDebugPointChangeHandler\"\n            [onEditStepHandler]=\"onEditStepHandler\"\n            [addStepMenuOptions]=\"getAddStepMenuOptionsForNested ? getAddStepMenuOptionsForNested(step) : addStepMenuOptions\"\n            [onAddStepOptionSelectHandler]=\"onAddStepOptionSelectHandler\"\n            [stepMoreMenuOptions]=\"getStepMoreMenuOptionsForNested ? getStepMoreMenuOptionsForNested(step) : stepMoreMenuOptions\"\n            [onStepMoreOptionSelectHandler]=\"onStepMoreOptionSelectHandler\"\n            [getAddStepMenuOptionsForNested]=\"getAddStepMenuOptionsForNested\"\n            [getStepMoreMenuOptionsForNested]=\"getStepMoreMenuOptionsForNested\"\n            (componentReady)=\"markStepLoaded(step)\">\n          </cqa-step-renderer>\n        </div>\n      </ng-container>\n    </div>\n  </div>\n</div>\n", components: [{ type: BadgeComponent, selector: "cqa-badge", inputs: ["type", "label", "icon", "iconLibrary", "variant", "size", "backgroundColor", "textColor", "borderColor", "iconBackgroundColor", "iconColor", "iconSize", "inlineStyles", "key", "value", "keyTextColor", "valueTextColor", "isLoading", "fullWidth", "centerContent", "title"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i3$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i3$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { type: StepRendererComponent, selector: "cqa-step-renderer", inputs: ["step", "onExpandHandler", "getConditionBranchesHandler", "isStepLoadingHandler", "isStepExpandedHandler", "convertMsToSecondsHandler", "formatFailureDetailsHandler", "getSelfHealAnalysisHandler", "onMakeCurrentBaselineHandler", "onUploadBaselineHandler", "onAnalyzeHandler", "onViewFullLogsHandler", "onSelfHealActionHandler", "getSelfHealLoadingStatesHandler", "isUploadingBaseline", "isMakingCurrentBaseline", "selectedIterationId", "getLoopIterationsHandler", "getApiAssertionsHandler", "formatActionsHandler", "onViewAllIterationsHandler", "onConditionBranchClickHandler", "onStepClickHandler", "onJsonPathCopiedHandler", "onDownloadHandler", "onFilePathCopiedHandler", "onTextCopiedHandler", "jumpToTimestampHandler", "downloadingStepId", "isLive", "isDebug", "debugPointSet", "getDebugPointSetHandler", "onDebugPointChangeHandler", "onEditStepHandler", "addStepMenuOptions", "onAddStepOptionSelectHandler", "stepMoreMenuOptions", "onStepMoreOptionSelectHandler", "getAddStepMenuOptionsForNested", "getStepMoreMenuOptionsForNested", "stepNumber", "parentSkipped"], outputs: ["addStepOptionSelect", "stepMoreOptionSelect", "addStepInsideLoop", "componentReady"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }] });
+StepGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepGroupComponent, selector: "cqa-step-group", inputs: { id: "id", testStepResultId: "testStepResultId", stepNumber: "stepNumber", title: "title", status: "status", duration: "duration", timingBreakdown: "timingBreakdown", expanded: "expanded", groupName: "groupName", steps: "steps", hasChild: "hasChild", isLoading: "isLoading", stepDeleted: "stepDeleted", isDebug: "isDebug", debugPointSet: "debugPointSet", parentSkipped: "parentSkipped", getDebugPointSetHandler: "getDebugPointSetHandler", onDebugPointChangeHandler: "onDebugPointChangeHandler", addStepMenuOptions: "addStepMenuOptions", stepMoreMenuOptions: "stepMoreMenuOptions", onExpandHandler: "onExpandHandler", onEditStepHandler: "onEditStepHandler", onAddStepOptionSelectHandler: "onAddStepOptionSelectHandler", onStepMoreOptionSelectHandler: "onStepMoreOptionSelectHandler", getAddStepMenuOptionsForNested: "getAddStepMenuOptionsForNested", getStepMoreMenuOptionsForNested: "getStepMoreMenuOptionsForNested", getConditionBranchesHandler: "getConditionBranchesHandler", onConditionBranchClickHandler: "onConditionBranchClickHandler", isStepLoadingHandler: "isStepLoadingHandler", isStepExpandedHandler: "isStepExpandedHandler", convertMsToSecondsHandler: "convertMsToSecondsHandler", formatFailureDetailsHandler: "formatFailureDetailsHandler", getSelfHealAnalysisHandler: "getSelfHealAnalysisHandler", onMakeCurrentBaselineHandler: "onMakeCurrentBaselineHandler", onUploadBaselineHandler: "onUploadBaselineHandler", onAnalyzeHandler: "onAnalyzeHandler", onViewFullLogsHandler: "onViewFullLogsHandler", onSelfHealActionHandler: "onSelfHealActionHandler", getSelfHealLoadingStatesHandler: "getSelfHealLoadingStatesHandler", getLoopIterationsHandler: "getLoopIterationsHandler", getApiAssertionsHandler: "getApiAssertionsHandler", formatActionsHandler: "formatActionsHandler", onViewAllIterationsHandler: "onViewAllIterationsHandler", onStepClickHandler: "onStepClickHandler", onJsonPathCopiedHandler: "onJsonPathCopiedHandler", onDownloadHandler: "onDownloadHandler", onFilePathCopiedHandler: "onFilePathCopiedHandler", onTextCopiedHandler: "onTextCopiedHandler", jumpToTimestampHandler: "jumpToTimestampHandler", downloadingStepId: "downloadingStepId", isUploadingBaseline: "isUploadingBaseline", isMakingCurrentBaseline: "isMakingCurrentBaseline", isLive: "isLive", step: "step" }, outputs: { debugPointChange: "debugPointChange", editStep: "editStep", addStepOptionSelect: "addStepOptionSelect", stepMoreOptionSelect: "stepMoreOptionSelect", onExpand: "onExpand" }, host: { classAttribute: "cqa-ui-root cqa-w-full" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-font-inter cqa-w-full\" [class.cqa-opacity-50]=\"isDebug && isSkipped && !parentSkipped\" style=\"border-bottom: '1px solid #F3F4F6'\" [style.background-color]=\"!isDebug ? null : config.status.toLowerCase() === 'paused' ? '#FFF9E9' : config.status.toLowerCase() === 'failed' ? '#FEF2F2' : null\" (click)=\"$event.stopPropagation()\">\n  <!-- Header -->\n  <div\n    class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-p-2 cqa-cursor-pointer\"\n    (click)=\"toggle($event)\">\n    <div *ngIf=\"showDebugIcon\" class=\"cqa-flex cqa-items-center cqa-justify-center\"\n      [matTooltip]=\"status.toLowerCase() === 'running' ? 'Breakpoint cannot be set on a running step' : (isStepDeleted ? 'Breakpoint cannot be set on deleted steps' : ((!!parentSkipped && !step?.debugPointDisabled) ? 'Breakpoint cannot be set on a running step' : (!!step?.debugPointDisabled ? 'Breakpoint cannot be set on skipped steps' : '')))\"\n      matTooltipPosition=\"right\">\n      <button type=\"button\" class=\"cqa-p-0 cqa-border-0 cqa-bg-transparent cqa-rounded-full cqa-transition-opacity focus:cqa-outline-none\"\n        [ngClass]=\"status.toLowerCase() === 'running' || !!step?.debugPointDisabled || !!parentSkipped || isStepDeleted ? 'cqa-cursor-not-allowed cqa-opacity-40 cqa-pointer-events-none' : 'cqa-cursor-pointer hover:cqa-opacity-80'\"\n        [disabled]=\"status.toLowerCase() === 'running' || !!step?.debugPointDisabled || !!parentSkipped || isStepDeleted\"\n        (click)=\"onDebugPointClick($event)\" [attr.aria-label]=\"debugPointSet ? 'Remove debug point' : 'Set debug point'\">\n        <svg *ngIf=\"debugPointSet\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <circle cx=\"7\" cy=\"7\" r=\"6\" [attr.fill]=\"!!step?.debugPointDisabled || !!parentSkipped || isStepDeleted ? '#9E9E9E' : '#C63535'\"/>\n        </svg>\n        <svg *ngIf=\"!debugPointSet\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <circle cx=\"7\" cy=\"7\" r=\"6\" [attr.stroke]=\"!!step?.debugPointDisabled || !!parentSkipped || isStepDeleted ? '#9E9E9E' : '#C63535'\" stroke-width=\"1.5\" fill=\"none\"/>\n        </svg>\n      </button>\n    </div>\n    <!-- Status Icon -->\n    <div class=\"cqa-flex cqa-items-center cqa-justify-center\">\n      <!-- Success -->\n      <svg *ngIf=\"config.status.toLowerCase() === 'success'\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10.9005 4.99999C11.1289 6.12064 10.9662 7.28571 10.4395 8.30089C9.91279 9.31608 9.054 10.12 8.00631 10.5787C6.95862 11.0373 5.78536 11.1229 4.6822 10.8212C3.57904 10.5195 2.61265 9.84869 1.94419 8.92071C1.27573 7.99272 0.945611 6.86361 1.00888 5.72169C1.07215 4.57976 1.52499 3.49404 2.29188 2.64558C3.05876 1.79712 4.09334 1.23721 5.22308 1.05922C6.35282 0.881233 7.50944 1.09592 8.50005 1.66749\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 5.5L6 7L11 2\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      <!-- Failed -->\n      <svg *ngIf=\"config.status.toLowerCase() === 'failure' || config.status.toLowerCase() === 'failed'\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#EF4444\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4 4L8 8M8 4L4 8\" stroke=\"#EF4444\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      <!-- Pending -->\n      <svg *ngIf=\"config.status.toLowerCase() === 'pending'\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      <!-- Running -->\n      <svg *ngIf=\"config.status.toLowerCase() === 'running'\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#3B82F6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#3B82F6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      \n      <span *ngIf=\"config.status.toLowerCase() === 'skipped'\" class=\"material-symbols-outlined cqa-text-[#9CA3AF] cqa-text-[12px]\">\n        skip_next\n      </span>\n      <div *ngIf=\"config.status.toLowerCase() === 'paused'\"><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M8.5 2H7.5C7.22386 2 7 2.22386 7 2.5V9.5C7 9.77614 7.22386 10 7.5 10H8.5C8.77614 10 9 9.77614 9 9.5V2.5C9 2.22386 8.77614 2 8.5 2Z\" stroke=\"#E17100\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 2H3.5C3.22386 2 3 2.22386 3 2.5V9.5C3 9.77614 3.22386 10 3.5 10H4.5C4.77614 10 5 9.77614 5 9.5V2.5C5 2.22386 4.77614 2 4.5 2Z\" stroke=\"#E17100\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n    </div>\n\n    <!-- Folder Icon -->\n    <div><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M11.6666 11.6667C11.976 11.6667 12.2728 11.5437 12.4916 11.325C12.7104 11.1062 12.8333 10.8094 12.8333 10.5V4.66667C12.8333 4.35725 12.7104 4.0605 12.4916 3.84171C12.2728 3.62292 11.976 3.5 11.6666 3.5H7.05829C6.86318 3.50191 6.67069 3.45486 6.49847 3.36314C6.32624 3.27142 6.17977 3.13797 6.07246 2.975L5.59996 2.275C5.49373 2.11369 5.34911 1.98128 5.17908 1.88965C5.00906 1.79802 4.81894 1.75003 4.62579 1.75H2.33329C2.02387 1.75 1.72713 1.87292 1.50833 2.09171C1.28954 2.3105 1.16663 2.60725 1.16663 2.91667V10.5C1.16663 10.8094 1.28954 11.1062 1.50833 11.325C1.72713 11.5437 2.02387 11.6667 2.33329 11.6667H11.6666Z\" fill=\"#EFF6FF\" stroke=\"#60A5FA\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n\n    <!-- Step Number and Title -->\n    <div class=\"cqa-font-semibold cqa-flex-1 cqa-text-[#334155] cqa-text-[14px] cqa-leading-[18px] cqa-font-inter cqa-flex cqa-items-center cqa-gap-1\" style=\"word-break: break-word;\">\n      <span>{{ config?.stepNumber }}. Step group: {{ config.groupName }}</span>\n      <span *ngIf=\"config.stepDeleted\" class=\"cqa-px-1.5 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[10px] cqa-leading-[12px] cqa-font-medium cqa-text-[#B42318] cqa-bg-[#FEF3F2] cqa-border cqa-border-[#FEE4E2]\">\n        Deleted\n      </span>\n    </div>\n\n    <div class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-font-inter\">\n      <!-- Step Change Badges (debug only) -->\n      <ng-container *ngIf=\"isDebug\">\n        <ng-container *ngFor=\"let badge of stepBadges\">\n        <cqa-badge\n          *ngIf=\"badge === 'skipped'\"\n          label=\"Skipped\"\n          size=\"small\"\n          [textColor]=\"'#4A5565'\"\n          [borderColor]=\"'#99A1AF'\"\n          [backgroundColor]=\"'#FFFFFF'\">\n        </cqa-badge>\n        <cqa-badge\n          *ngIf=\"badge === 'edited'\"\n          label=\"Edited\"\n          size=\"small\"\n          [textColor]=\"'#FBBF24'\"\n          [borderColor]=\"'#FDDF92'\"\n          [backgroundColor]=\"'#FFF9E9'\">\n        </cqa-badge>\n        <cqa-badge\n          *ngIf=\"badge === 'added'\"\n          label=\"Added\"\n          size=\"small\"\n          [textColor]=\"'#0DBD7D'\"\n          [borderColor]=\"'#5ED3A8'\"\n          [backgroundColor]=\"'#CFF2E5'\">\n        </cqa-badge>\n        <cqa-badge\n          *ngIf=\"badge === 'removed'\"\n          label=\"Removed\"\n          size=\"small\"\n          [textColor]=\"'#EE3F3F'\"\n          [borderColor]=\"'#F47F7F'\"\n          [backgroundColor]=\"'#FCD9D9'\">\n        </cqa-badge>\n        </ng-container>\n      </ng-container>\n      <div class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-rounded-[4px] cqa-py-0.5 cqa-px-1 cqa-bg-[#6366F11A] cqa-ml-1 cqa-cursor-pointer hover:cqa-opacity-80 cqa-transition-opacity\"\n           *ngIf=\"step?.executedResult?.video_start_time\" \n           [matTooltip]=\"'Jump to video time'\" \n           matTooltipPosition=\"below\"\n           (click)=\"onJumpToTimestamp($event)\">\n        <mat-icon class=\"cqa-text-[#636363] !cqa-text-[10px] !cqa-w-[10px] !cqa-h-[10px]\">\n          play_arrow\n        </mat-icon>\n        <span class=\"cqa-text-[8px] cqa-leading-[12px] cqa-font-normal cqa-text-[#636363]\">\n          {{ formatDurationClock(step?.executedResult?.video_start_time || 0) }}\n        </span>\n      </div>\n      <div *ngIf=\"isDebug\" class=\"cqa-flex cqa-items-center cqa-gap-0.5 cqa-text-[#9CA3AF]\" (click)=\"$event.stopPropagation()\">\n        <button *ngIf=\"!step?.isStepGroupChildren\" type=\"button\" class=\"cqa-p-0 cqa-border-0 cqa-bg-transparent cqa-cursor-pointer hover:cqa-opacity-80 cqa-transition-opacity focus:cqa-outline-none\" aria-label=\"Edit\" (click)=\"onEditStep($event)\">\n          <mat-icon class=\"!cqa-text-[14px] !cqa-w-[14px] !cqa-h-[14px]\">edit</mat-icon>\n        </button>\n        <button *ngIf=\"!step?.isStepGroupChildren\" type=\"button\" class=\"cqa-p-0 cqa-border-0 cqa-bg-transparent cqa-cursor-pointer hover:cqa-opacity-80 cqa-transition-opacity focus:cqa-outline-none\" aria-label=\"Add\" [matMenuTriggerFor]=\"addStepMenu\">\n          <mat-icon class=\"!cqa-text-[14px] !cqa-w-[14px] !cqa-h-[14px]\">add</mat-icon>\n        </button>\n        <mat-menu #addStepMenu=\"matMenu\" class=\"cqa-add-step-menu\" xPosition=\"before\" yPosition=\"below\">\n          <button mat-menu-item *ngFor=\"let opt of addStepMenuOptions\" (click)=\"onAddStepOptionSelect(opt, $event)\">\n            {{ opt.label }}\n          </button>\n        </mat-menu>\n        <button *ngIf=\"effectiveStepMoreMenuOptions.length\" type=\"button\" class=\"cqa-p-0 cqa-border-0 cqa-bg-transparent cqa-cursor-pointer hover:cqa-opacity-80 cqa-transition-opacity focus:cqa-outline-none\" aria-label=\"More options\" [matMenuTriggerFor]=\"stepMoreMenu\">\n          <mat-icon class=\"!cqa-text-[14px] !cqa-w-[14px] !cqa-h-[14px]\">more_vert</mat-icon>\n        </button>\n        <mat-menu #stepMoreMenu=\"matMenu\" class=\"cqa-step-more-menu\" xPosition=\"before\" yPosition=\"below\">\n          <button mat-menu-item *ngFor=\"let opt of effectiveStepMoreMenuOptions\" (click)=\"onStepMoreOptionSelect(opt, $event)\">{{ opt.label }}</button>\n        </mat-menu>\n      </div>\n      <span class=\"cqa-text-[12px] cqa-leading-[15px] cqa-font-medium cqa-text-[#9CA3AF]\">\n        {{ formatDuration(config.duration) }}\n      </span>\n      <svg [class.cqa-rotate-180]=\"isExpanded\" class=\"cqa-transition-transform\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M3.5 5L7 8.5L10.5 5\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n    </div>\n  </div>\n\n  <!-- Expanded Content -->\n  <div *ngIf=\"isExpanded\">\n    <!-- Nested Steps -->\n    <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-mt-2 cqa-ml-[18px]\">\n      <!-- Loading indicator for nested steps -->\n      <div *ngIf=\"hasChild && (!config.steps || config.steps.length === 0) && isStepLoading()\" \n           class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-py-2 cqa-px-3\">\n        <svg class=\"cqa-animate-spin cqa-text-[#3B82F6]\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <circle cx=\"7\" cy=\"7\" r=\"6\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" opacity=\"0.25\"/>\n          <path d=\"M7 1A6 6 0 0 1 13 7\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" stroke-linecap=\"round\"/>\n        </svg>\n        <span class=\"cqa-text-[11px] cqa-leading-[13px] cqa-text-[#737373]\">Loading nested steps...</span>\n      </div>\n\n      <ng-container *ngFor=\"let step of config.steps; index as i\">\n        <!-- Wrapper to show skeleton while step-renderer is loading -->\n        <div\n          class=\"cqa-step-renderer-wrapper\"\n          [attr.id]=\"'exc-' + step.id\"\n          [class.loaded]=\"!isNestedStepLoading(step)\">\n          <!-- Loading skeleton overlay -->\n          <!-- <div *ngIf=\"isNestedStepLoading(step)\" class=\"cqa-step-skeleton-overlay\">\n            <div class=\"cqa-step-skeleton cqa-mx-3 cqa-my-1\"></div>\n          </div> -->\n          <!-- Use step-renderer for all nested steps to avoid circular dependencies -->\n          <!-- The step-renderer will dynamically load the appropriate component and pass handlers -->\n          <cqa-step-renderer \n            [step]=\"step\"\n            [stepNumber]=\"step?.stepNumber || (stepNumber + '.' + (i + 1))\"\n            [onExpandHandler]=\"onExpandHandler\"\n            [getConditionBranchesHandler]=\"getConditionBranchesHandler\"\n            [onConditionBranchClickHandler]=\"onConditionBranchClickHandler\"\n            [isStepLoadingHandler]=\"isStepLoadingHandler\"\n            [isStepExpandedHandler]=\"isStepExpandedHandler\"\n            [convertMsToSecondsHandler]=\"convertMsToSecondsHandler\"\n            [formatFailureDetailsHandler]=\"formatFailureDetailsHandler\"\n            [getSelfHealAnalysisHandler]=\"getSelfHealAnalysisHandler\"\n            [getSelfHealLoadingStatesHandler]=\"getSelfHealLoadingStatesHandler\"\n            [getLoopIterationsHandler]=\"getLoopIterationsHandler\"\n            [getApiAssertionsHandler]=\"getApiAssertionsHandler\"\n            [formatActionsHandler]=\"formatActionsHandler\"\n            [onViewAllIterationsHandler]=\"onViewAllIterationsHandler\"\n            [onMakeCurrentBaselineHandler]=\"onMakeCurrentBaselineHandler\"\n            [onUploadBaselineHandler]=\"onUploadBaselineHandler\"\n            [onAnalyzeHandler]=\"onAnalyzeHandler\"\n            [onViewFullLogsHandler]=\"onViewFullLogsHandler\"\n            [onSelfHealActionHandler]=\"onSelfHealActionHandler\"\n            [onStepClickHandler]=\"onStepClickHandler\"\n            [onJsonPathCopiedHandler]=\"onJsonPathCopiedHandler\"\n            [onDownloadHandler]=\"onDownloadHandler\"\n            [onFilePathCopiedHandler]=\"onFilePathCopiedHandler\"\n            [onTextCopiedHandler]=\"onTextCopiedHandler\"\n            [jumpToTimestampHandler]=\"jumpToTimestampHandler\"\n            [downloadingStepId]=\"downloadingStepId\"\n            [isUploadingBaseline]=\"isUploadingBaseline\"\n            [isMakingCurrentBaseline]=\"isMakingCurrentBaseline\"\n            [selectedIterationId]=\"step?.selectedIterationId || ''\"\n            [isLive]=\"isLive\"\n            [isDebug]=\"isDebug\"\n            [parentSkipped]=\"selfDebugDisabled\"\n            [debugPointSet]=\"getDebugPointSetHandler ? getDebugPointSetHandler(step) : debugPointSet\"\n            [getDebugPointSetHandler]=\"getDebugPointSetHandler\"\n            [onDebugPointChangeHandler]=\"onDebugPointChangeHandler\"\n            [onEditStepHandler]=\"onEditStepHandler\"\n            [addStepMenuOptions]=\"getAddStepMenuOptionsForNested ? getAddStepMenuOptionsForNested(step) : addStepMenuOptions\"\n            [onAddStepOptionSelectHandler]=\"onAddStepOptionSelectHandler\"\n            [stepMoreMenuOptions]=\"getStepMoreMenuOptionsForNested ? getStepMoreMenuOptionsForNested(step) : stepMoreMenuOptions\"\n            [onStepMoreOptionSelectHandler]=\"onStepMoreOptionSelectHandler\"\n            [getAddStepMenuOptionsForNested]=\"getAddStepMenuOptionsForNested\"\n            [getStepMoreMenuOptionsForNested]=\"getStepMoreMenuOptionsForNested\"\n            (componentReady)=\"markStepLoaded(step)\">\n          </cqa-step-renderer>\n        </div>\n      </ng-container>\n    </div>\n  </div>\n</div>\n", components: [{ type: BadgeComponent, selector: "cqa-badge", inputs: ["type", "label", "icon", "iconLibrary", "variant", "size", "backgroundColor", "textColor", "borderColor", "iconBackgroundColor", "iconColor", "iconSize", "inlineStyles", "key", "value", "keyTextColor", "valueTextColor", "isLoading", "fullWidth", "centerContent", "title"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i3$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i3$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { type: StepRendererComponent, selector: "cqa-step-renderer", inputs: ["step", "onExpandHandler", "getConditionBranchesHandler", "isStepLoadingHandler", "isStepExpandedHandler", "convertMsToSecondsHandler", "formatFailureDetailsHandler", "getSelfHealAnalysisHandler", "onMakeCurrentBaselineHandler", "onUploadBaselineHandler", "onAnalyzeHandler", "onViewFullLogsHandler", "onSelfHealActionHandler", "getSelfHealLoadingStatesHandler", "isUploadingBaseline", "isMakingCurrentBaseline", "selectedIterationId", "getLoopIterationsHandler", "getApiAssertionsHandler", "formatActionsHandler", "onViewAllIterationsHandler", "onConditionBranchClickHandler", "onStepClickHandler", "onJsonPathCopiedHandler", "onDownloadHandler", "onFilePathCopiedHandler", "onTextCopiedHandler", "jumpToTimestampHandler", "downloadingStepId", "isLive", "isDebug", "debugPointSet", "getDebugPointSetHandler", "onDebugPointChangeHandler", "onEditStepHandler", "addStepMenuOptions", "onAddStepOptionSelectHandler", "stepMoreMenuOptions", "onStepMoreOptionSelectHandler", "getAddStepMenuOptionsForNested", "getStepMoreMenuOptionsForNested", "stepNumber", "parentSkipped"], outputs: ["addStepOptionSelect", "stepMoreOptionSelect", "addStepInsideLoop", "componentReady"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepGroupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-step-group', host: { class: 'cqa-ui-root cqa-w-full' }, template: "<div class=\"cqa-font-inter cqa-w-full\" [class.cqa-opacity-50]=\"isDebug && isSkipped && !parentSkipped\" style=\"border-bottom: '1px solid #F3F4F6'\" [style.background-color]=\"!isDebug ? null : config.status.toLowerCase() === 'paused' ? '#FFF9E9' : config.status.toLowerCase() === 'failed' ? '#FEF2F2' : null\" (click)=\"$event.stopPropagation()\">\n  <!-- Header -->\n  <div\n    class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-p-2 cqa-cursor-pointer\"\n    (click)=\"toggle($event)\">\n    <div *ngIf=\"showDebugIcon\" class=\"cqa-flex cqa-items-center cqa-justify-center\"\n      [matTooltip]=\"status.toLowerCase() === 'running' ? 'Breakpoint cannot be set on a running step' : (isStepDeleted ? 'Breakpoint cannot be set on deleted steps' : ((!!parentSkipped && !step?.debugPointDisabled) ? 'Breakpoint cannot be set on a running step' : (!!step?.debugPointDisabled ? 'Breakpoint cannot be set on skipped steps' : '')))\"\n      matTooltipPosition=\"right\">\n      <button type=\"button\" class=\"cqa-p-0 cqa-border-0 cqa-bg-transparent cqa-rounded-full cqa-transition-opacity focus:cqa-outline-none\"\n        [ngClass]=\"status.toLowerCase() === 'running' || !!step?.debugPointDisabled || !!parentSkipped || isStepDeleted ? 'cqa-cursor-not-allowed cqa-opacity-40 cqa-pointer-events-none' : 'cqa-cursor-pointer hover:cqa-opacity-80'\"\n        [disabled]=\"status.toLowerCase() === 'running' || !!step?.debugPointDisabled || !!parentSkipped || isStepDeleted\"\n        (click)=\"onDebugPointClick($event)\" [attr.aria-label]=\"debugPointSet ? 'Remove debug point' : 'Set debug point'\">\n        <svg *ngIf=\"debugPointSet\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <circle cx=\"7\" cy=\"7\" r=\"6\" [attr.fill]=\"!!step?.debugPointDisabled || !!parentSkipped || isStepDeleted ? '#9E9E9E' : '#C63535'\"/>\n        </svg>\n        <svg *ngIf=\"!debugPointSet\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <circle cx=\"7\" cy=\"7\" r=\"6\" [attr.stroke]=\"!!step?.debugPointDisabled || !!parentSkipped || isStepDeleted ? '#9E9E9E' : '#C63535'\" stroke-width=\"1.5\" fill=\"none\"/>\n        </svg>\n      </button>\n    </div>\n    <!-- Status Icon -->\n    <div class=\"cqa-flex cqa-items-center cqa-justify-center\">\n      <!-- Success -->\n      <svg *ngIf=\"config.status.toLowerCase() === 'success'\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10.9005 4.99999C11.1289 6.12064 10.9662 7.28571 10.4395 8.30089C9.91279 9.31608 9.054 10.12 8.00631 10.5787C6.95862 11.0373 5.78536 11.1229 4.6822 10.8212C3.57904 10.5195 2.61265 9.84869 1.94419 8.92071C1.27573 7.99272 0.945611 6.86361 1.00888 5.72169C1.07215 4.57976 1.52499 3.49404 2.29188 2.64558C3.05876 1.79712 4.09334 1.23721 5.22308 1.05922C6.35282 0.881233 7.50944 1.09592 8.50005 1.66749\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 5.5L6 7L11 2\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      <!-- Failed -->\n      <svg *ngIf=\"config.status.toLowerCase() === 'failure' || config.status.toLowerCase() === 'failed'\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#EF4444\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4 4L8 8M8 4L4 8\" stroke=\"#EF4444\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      <!-- Pending -->\n      <svg *ngIf=\"config.status.toLowerCase() === 'pending'\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      <!-- Running -->\n      <svg *ngIf=\"config.status.toLowerCase() === 'running'\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#3B82F6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#3B82F6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      \n      <span *ngIf=\"config.status.toLowerCase() === 'skipped'\" class=\"material-symbols-outlined cqa-text-[#9CA3AF] cqa-text-[12px]\">\n        skip_next\n      </span>\n      <div *ngIf=\"config.status.toLowerCase() === 'paused'\"><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M8.5 2H7.5C7.22386 2 7 2.22386 7 2.5V9.5C7 9.77614 7.22386 10 7.5 10H8.5C8.77614 10 9 9.77614 9 9.5V2.5C9 2.22386 8.77614 2 8.5 2Z\" stroke=\"#E17100\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 2H3.5C3.22386 2 3 2.22386 3 2.5V9.5C3 9.77614 3.22386 10 3.5 10H4.5C4.77614 10 5 9.77614 5 9.5V2.5C5 2.22386 4.77614 2 4.5 2Z\" stroke=\"#E17100\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n    </div>\n\n    <!-- Folder Icon -->\n    <div><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M11.6666 11.6667C11.976 11.6667 12.2728 11.5437 12.4916 11.325C12.7104 11.1062 12.8333 10.8094 12.8333 10.5V4.66667C12.8333 4.35725 12.7104 4.0605 12.4916 3.84171C12.2728 3.62292 11.976 3.5 11.6666 3.5H7.05829C6.86318 3.50191 6.67069 3.45486 6.49847 3.36314C6.32624 3.27142 6.17977 3.13797 6.07246 2.975L5.59996 2.275C5.49373 2.11369 5.34911 1.98128 5.17908 1.88965C5.00906 1.79802 4.81894 1.75003 4.62579 1.75H2.33329C2.02387 1.75 1.72713 1.87292 1.50833 2.09171C1.28954 2.3105 1.16663 2.60725 1.16663 2.91667V10.5C1.16663 10.8094 1.28954 11.1062 1.50833 11.325C1.72713 11.5437 2.02387 11.6667 2.33329 11.6667H11.6666Z\" fill=\"#EFF6FF\" stroke=\"#60A5FA\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n\n    <!-- Step Number and Title -->\n    <div class=\"cqa-font-semibold cqa-flex-1 cqa-text-[#334155] cqa-text-[14px] cqa-leading-[18px] cqa-font-inter cqa-flex cqa-items-center cqa-gap-1\" style=\"word-break: break-word;\">\n      <span>{{ config?.stepNumber }}. Step group: {{ config.groupName }}</span>\n      <span *ngIf=\"config.stepDeleted\" class=\"cqa-px-1.5 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[10px] cqa-leading-[12px] cqa-font-medium cqa-text-[#B42318] cqa-bg-[#FEF3F2] cqa-border cqa-border-[#FEE4E2]\">\n        Deleted\n      </span>\n    </div>\n\n    <div class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-font-inter\">\n      <!-- Step Change Badges (debug only) -->\n      <ng-container *ngIf=\"isDebug\">\n        <ng-container *ngFor=\"let badge of stepBadges\">\n        <cqa-badge\n          *ngIf=\"badge === 'skipped'\"\n          label=\"Skipped\"\n          size=\"small\"\n          [textColor]=\"'#4A5565'\"\n          [borderColor]=\"'#99A1AF'\"\n          [backgroundColor]=\"'#FFFFFF'\">\n        </cqa-badge>\n        <cqa-badge\n          *ngIf=\"badge === 'edited'\"\n          label=\"Edited\"\n          size=\"small\"\n          [textColor]=\"'#FBBF24'\"\n          [borderColor]=\"'#FDDF92'\"\n          [backgroundColor]=\"'#FFF9E9'\">\n        </cqa-badge>\n        <cqa-badge\n          *ngIf=\"badge === 'added'\"\n          label=\"Added\"\n          size=\"small\"\n          [textColor]=\"'#0DBD7D'\"\n          [borderColor]=\"'#5ED3A8'\"\n          [backgroundColor]=\"'#CFF2E5'\">\n        </cqa-badge>\n        <cqa-badge\n          *ngIf=\"badge === 'removed'\"\n          label=\"Removed\"\n          size=\"small\"\n          [textColor]=\"'#EE3F3F'\"\n          [borderColor]=\"'#F47F7F'\"\n          [backgroundColor]=\"'#FCD9D9'\">\n        </cqa-badge>\n        </ng-container>\n      </ng-container>\n      <div class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-rounded-[4px] cqa-py-0.5 cqa-px-1 cqa-bg-[#6366F11A] cqa-ml-1 cqa-cursor-pointer hover:cqa-opacity-80 cqa-transition-opacity\"\n           *ngIf=\"step?.executedResult?.video_start_time\" \n           [matTooltip]=\"'Jump to video time'\" \n           matTooltipPosition=\"below\"\n           (click)=\"onJumpToTimestamp($event)\">\n        <mat-icon class=\"cqa-text-[#636363] !cqa-text-[10px] !cqa-w-[10px] !cqa-h-[10px]\">\n          play_arrow\n        </mat-icon>\n        <span class=\"cqa-text-[8px] cqa-leading-[12px] cqa-font-normal cqa-text-[#636363]\">\n          {{ formatDurationClock(step?.executedResult?.video_start_time || 0) }}\n        </span>\n      </div>\n      <div *ngIf=\"isDebug\" class=\"cqa-flex cqa-items-center cqa-gap-0.5 cqa-text-[#9CA3AF]\" (click)=\"$event.stopPropagation()\">\n        <button *ngIf=\"!step?.isStepGroupChildren\" type=\"button\" class=\"cqa-p-0 cqa-border-0 cqa-bg-transparent cqa-cursor-pointer hover:cqa-opacity-80 cqa-transition-opacity focus:cqa-outline-none\" aria-label=\"Edit\" (click)=\"onEditStep($event)\">\n          <mat-icon class=\"!cqa-text-[14px] !cqa-w-[14px] !cqa-h-[14px]\">edit</mat-icon>\n        </button>\n        <button *ngIf=\"!step?.isStepGroupChildren\" type=\"button\" class=\"cqa-p-0 cqa-border-0 cqa-bg-transparent cqa-cursor-pointer hover:cqa-opacity-80 cqa-transition-opacity focus:cqa-outline-none\" aria-label=\"Add\" [matMenuTriggerFor]=\"addStepMenu\">\n          <mat-icon class=\"!cqa-text-[14px] !cqa-w-[14px] !cqa-h-[14px]\">add</mat-icon>\n        </button>\n        <mat-menu #addStepMenu=\"matMenu\" class=\"cqa-add-step-menu\" xPosition=\"before\" yPosition=\"below\">\n          <button mat-menu-item *ngFor=\"let opt of addStepMenuOptions\" (click)=\"onAddStepOptionSelect(opt, $event)\">\n            {{ opt.label }}\n          </button>\n        </mat-menu>\n        <button *ngIf=\"effectiveStepMoreMenuOptions.length\" type=\"button\" class=\"cqa-p-0 cqa-border-0 cqa-bg-transparent cqa-cursor-pointer hover:cqa-opacity-80 cqa-transition-opacity focus:cqa-outline-none\" aria-label=\"More options\" [matMenuTriggerFor]=\"stepMoreMenu\">\n          <mat-icon class=\"!cqa-text-[14px] !cqa-w-[14px] !cqa-h-[14px]\">more_vert</mat-icon>\n        </button>\n        <mat-menu #stepMoreMenu=\"matMenu\" class=\"cqa-step-more-menu\" xPosition=\"before\" yPosition=\"below\">\n          <button mat-menu-item *ngFor=\"let opt of effectiveStepMoreMenuOptions\" (click)=\"onStepMoreOptionSelect(opt, $event)\">{{ opt.label }}</button>\n        </mat-menu>\n      </div>\n      <span class=\"cqa-text-[12px] cqa-leading-[15px] cqa-font-medium cqa-text-[#9CA3AF]\">\n        {{ formatDuration(config.duration) }}\n      </span>\n      <svg [class.cqa-rotate-180]=\"isExpanded\" class=\"cqa-transition-transform\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M3.5 5L7 8.5L10.5 5\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n    </div>\n  </div>\n\n  <!-- Expanded Content -->\n  <div *ngIf=\"isExpanded\">\n    <!-- Nested Steps -->\n    <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-mt-2 cqa-ml-[18px]\">\n      <!-- Loading indicator for nested steps -->\n      <div *ngIf=\"hasChild && (!config.steps || config.steps.length === 0) && isStepLoading()\" \n           class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-py-2 cqa-px-3\">\n        <svg class=\"cqa-animate-spin cqa-text-[#3B82F6]\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <circle cx=\"7\" cy=\"7\" r=\"6\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" opacity=\"0.25\"/>\n          <path d=\"M7 1A6 6 0 0 1 13 7\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" stroke-linecap=\"round\"/>\n        </svg>\n        <span class=\"cqa-text-[11px] cqa-leading-[13px] cqa-text-[#737373]\">Loading nested steps...</span>\n      </div>\n\n      <ng-container *ngFor=\"let step of config.steps; index as i\">\n        <!-- Wrapper to show skeleton while step-renderer is loading -->\n        <div\n          class=\"cqa-step-renderer-wrapper\"\n          [attr.id]=\"'exc-' + step.id\"\n          [class.loaded]=\"!isNestedStepLoading(step)\">\n          <!-- Loading skeleton overlay -->\n          <!-- <div *ngIf=\"isNestedStepLoading(step)\" class=\"cqa-step-skeleton-overlay\">\n            <div class=\"cqa-step-skeleton cqa-mx-3 cqa-my-1\"></div>\n          </div> -->\n          <!-- Use step-renderer for all nested steps to avoid circular dependencies -->\n          <!-- The step-renderer will dynamically load the appropriate component and pass handlers -->\n          <cqa-step-renderer \n            [step]=\"step\"\n            [stepNumber]=\"step.stepNumber || (stepNumber + '.' + (i + 1))\"\n            [onExpandHandler]=\"onExpandHandler\"\n            [getConditionBranchesHandler]=\"getConditionBranchesHandler\"\n            [onConditionBranchClickHandler]=\"onConditionBranchClickHandler\"\n            [isStepLoadingHandler]=\"isStepLoadingHandler\"\n            [isStepExpandedHandler]=\"isStepExpandedHandler\"\n            [convertMsToSecondsHandler]=\"convertMsToSecondsHandler\"\n            [formatFailureDetailsHandler]=\"formatFailureDetailsHandler\"\n            [getSelfHealAnalysisHandler]=\"getSelfHealAnalysisHandler\"\n            [getSelfHealLoadingStatesHandler]=\"getSelfHealLoadingStatesHandler\"\n            [getLoopIterationsHandler]=\"getLoopIterationsHandler\"\n            [getApiAssertionsHandler]=\"getApiAssertionsHandler\"\n            [formatActionsHandler]=\"formatActionsHandler\"\n            [onViewAllIterationsHandler]=\"onViewAllIterationsHandler\"\n            [onMakeCurrentBaselineHandler]=\"onMakeCurrentBaselineHandler\"\n            [onUploadBaselineHandler]=\"onUploadBaselineHandler\"\n            [onAnalyzeHandler]=\"onAnalyzeHandler\"\n            [onViewFullLogsHandler]=\"onViewFullLogsHandler\"\n            [onSelfHealActionHandler]=\"onSelfHealActionHandler\"\n            [onStepClickHandler]=\"onStepClickHandler\"\n            [onJsonPathCopiedHandler]=\"onJsonPathCopiedHandler\"\n            [onDownloadHandler]=\"onDownloadHandler\"\n            [onFilePathCopiedHandler]=\"onFilePathCopiedHandler\"\n            [onTextCopiedHandler]=\"onTextCopiedHandler\"\n            [jumpToTimestampHandler]=\"jumpToTimestampHandler\"\n            [downloadingStepId]=\"downloadingStepId\"\n            [isUploadingBaseline]=\"isUploadingBaseline\"\n            [isMakingCurrentBaseline]=\"isMakingCurrentBaseline\"\n            [selectedIterationId]=\"step?.selectedIterationId || ''\"\n            [isLive]=\"isLive\"\n            [isDebug]=\"isDebug\"\n            [parentSkipped]=\"selfDebugDisabled\"\n            [debugPointSet]=\"getDebugPointSetHandler ? getDebugPointSetHandler(step) : debugPointSet\"\n            [getDebugPointSetHandler]=\"getDebugPointSetHandler\"\n            [onDebugPointChangeHandler]=\"onDebugPointChangeHandler\"\n            [onEditStepHandler]=\"onEditStepHandler\"\n            [addStepMenuOptions]=\"getAddStepMenuOptionsForNested ? getAddStepMenuOptionsForNested(step) : addStepMenuOptions\"\n            [onAddStepOptionSelectHandler]=\"onAddStepOptionSelectHandler\"\n            [stepMoreMenuOptions]=\"getStepMoreMenuOptionsForNested ? getStepMoreMenuOptionsForNested(step) : stepMoreMenuOptions\"\n            [onStepMoreOptionSelectHandler]=\"onStepMoreOptionSelectHandler\"\n            [getAddStepMenuOptionsForNested]=\"getAddStepMenuOptionsForNested\"\n            [getStepMoreMenuOptionsForNested]=\"getStepMoreMenuOptionsForNested\"\n            (componentReady)=\"markStepLoaded(step)\">\n          </cqa-step-renderer>\n        </div>\n      </ng-container>\n    </div>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'cqa-step-group', host: { class: 'cqa-ui-root cqa-w-full' }, template: "<div class=\"cqa-font-inter cqa-w-full\" [class.cqa-opacity-50]=\"isDebug && isSkipped && !parentSkipped\" style=\"border-bottom: '1px solid #F3F4F6'\" [style.background-color]=\"!isDebug ? null : config.status.toLowerCase() === 'paused' ? '#FFF9E9' : config.status.toLowerCase() === 'failed' ? '#FEF2F2' : null\" (click)=\"$event.stopPropagation()\">\n  <!-- Header -->\n  <div\n    class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-p-2 cqa-cursor-pointer\"\n    (click)=\"toggle($event)\">\n    <div *ngIf=\"showDebugIcon\" class=\"cqa-flex cqa-items-center cqa-justify-center\"\n      [matTooltip]=\"status.toLowerCase() === 'running' ? 'Breakpoint cannot be set on a running step' : (isStepDeleted ? 'Breakpoint cannot be set on deleted steps' : ((!!parentSkipped && !step?.debugPointDisabled) ? 'Breakpoint cannot be set on a running step' : (!!step?.debugPointDisabled ? 'Breakpoint cannot be set on skipped steps' : '')))\"\n      matTooltipPosition=\"right\">\n      <button type=\"button\" class=\"cqa-p-0 cqa-border-0 cqa-bg-transparent cqa-rounded-full cqa-transition-opacity focus:cqa-outline-none\"\n        [ngClass]=\"status.toLowerCase() === 'running' || !!step?.debugPointDisabled || !!parentSkipped || isStepDeleted ? 'cqa-cursor-not-allowed cqa-opacity-40 cqa-pointer-events-none' : 'cqa-cursor-pointer hover:cqa-opacity-80'\"\n        [disabled]=\"status.toLowerCase() === 'running' || !!step?.debugPointDisabled || !!parentSkipped || isStepDeleted\"\n        (click)=\"onDebugPointClick($event)\" [attr.aria-label]=\"debugPointSet ? 'Remove debug point' : 'Set debug point'\">\n        <svg *ngIf=\"debugPointSet\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <circle cx=\"7\" cy=\"7\" r=\"6\" [attr.fill]=\"!!step?.debugPointDisabled || !!parentSkipped || isStepDeleted ? '#9E9E9E' : '#C63535'\"/>\n        </svg>\n        <svg *ngIf=\"!debugPointSet\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <circle cx=\"7\" cy=\"7\" r=\"6\" [attr.stroke]=\"!!step?.debugPointDisabled || !!parentSkipped || isStepDeleted ? '#9E9E9E' : '#C63535'\" stroke-width=\"1.5\" fill=\"none\"/>\n        </svg>\n      </button>\n    </div>\n    <!-- Status Icon -->\n    <div class=\"cqa-flex cqa-items-center cqa-justify-center\">\n      <!-- Success -->\n      <svg *ngIf=\"config.status.toLowerCase() === 'success'\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10.9005 4.99999C11.1289 6.12064 10.9662 7.28571 10.4395 8.30089C9.91279 9.31608 9.054 10.12 8.00631 10.5787C6.95862 11.0373 5.78536 11.1229 4.6822 10.8212C3.57904 10.5195 2.61265 9.84869 1.94419 8.92071C1.27573 7.99272 0.945611 6.86361 1.00888 5.72169C1.07215 4.57976 1.52499 3.49404 2.29188 2.64558C3.05876 1.79712 4.09334 1.23721 5.22308 1.05922C6.35282 0.881233 7.50944 1.09592 8.50005 1.66749\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 5.5L6 7L11 2\" stroke=\"#22C55E\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      <!-- Failed -->\n      <svg *ngIf=\"config.status.toLowerCase() === 'failure' || config.status.toLowerCase() === 'failed'\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#EF4444\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4 4L8 8M8 4L4 8\" stroke=\"#EF4444\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      <!-- Pending -->\n      <svg *ngIf=\"config.status.toLowerCase() === 'pending'\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#9CA3AF\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      <!-- Running -->\n      <svg *ngIf=\"config.status.toLowerCase() === 'running'\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11Z\" stroke=\"#3B82F6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6 3V6L8 7\" stroke=\"#3B82F6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      \n      <span *ngIf=\"config.status.toLowerCase() === 'skipped'\" class=\"material-symbols-outlined cqa-text-[#9CA3AF] cqa-text-[12px]\">\n        skip_next\n      </span>\n      <div *ngIf=\"config.status.toLowerCase() === 'paused'\"><svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M8.5 2H7.5C7.22386 2 7 2.22386 7 2.5V9.5C7 9.77614 7.22386 10 7.5 10H8.5C8.77614 10 9 9.77614 9 9.5V2.5C9 2.22386 8.77614 2 8.5 2Z\" stroke=\"#E17100\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.5 2H3.5C3.22386 2 3 2.22386 3 2.5V9.5C3 9.77614 3.22386 10 3.5 10H4.5C4.77614 10 5 9.77614 5 9.5V2.5C5 2.22386 4.77614 2 4.5 2Z\" stroke=\"#E17100\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n    </div>\n\n    <!-- Folder Icon -->\n    <div><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M11.6666 11.6667C11.976 11.6667 12.2728 11.5437 12.4916 11.325C12.7104 11.1062 12.8333 10.8094 12.8333 10.5V4.66667C12.8333 4.35725 12.7104 4.0605 12.4916 3.84171C12.2728 3.62292 11.976 3.5 11.6666 3.5H7.05829C6.86318 3.50191 6.67069 3.45486 6.49847 3.36314C6.32624 3.27142 6.17977 3.13797 6.07246 2.975L5.59996 2.275C5.49373 2.11369 5.34911 1.98128 5.17908 1.88965C5.00906 1.79802 4.81894 1.75003 4.62579 1.75H2.33329C2.02387 1.75 1.72713 1.87292 1.50833 2.09171C1.28954 2.3105 1.16663 2.60725 1.16663 2.91667V10.5C1.16663 10.8094 1.28954 11.1062 1.50833 11.325C1.72713 11.5437 2.02387 11.6667 2.33329 11.6667H11.6666Z\" fill=\"#EFF6FF\" stroke=\"#60A5FA\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></div>\n\n    <!-- Step Number and Title -->\n    <div class=\"cqa-font-semibold cqa-flex-1 cqa-text-[#334155] cqa-text-[14px] cqa-leading-[18px] cqa-font-inter cqa-flex cqa-items-center cqa-gap-1\" style=\"word-break: break-word;\">\n      <span>{{ config?.stepNumber }}. Step group: {{ config.groupName }}</span>\n      <span *ngIf=\"config.stepDeleted\" class=\"cqa-px-1.5 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[10px] cqa-leading-[12px] cqa-font-medium cqa-text-[#B42318] cqa-bg-[#FEF3F2] cqa-border cqa-border-[#FEE4E2]\">\n        Deleted\n      </span>\n    </div>\n\n    <div class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-font-inter\">\n      <!-- Step Change Badges (debug only) -->\n      <ng-container *ngIf=\"isDebug\">\n        <ng-container *ngFor=\"let badge of stepBadges\">\n        <cqa-badge\n          *ngIf=\"badge === 'skipped'\"\n          label=\"Skipped\"\n          size=\"small\"\n          [textColor]=\"'#4A5565'\"\n          [borderColor]=\"'#99A1AF'\"\n          [backgroundColor]=\"'#FFFFFF'\">\n        </cqa-badge>\n        <cqa-badge\n          *ngIf=\"badge === 'edited'\"\n          label=\"Edited\"\n          size=\"small\"\n          [textColor]=\"'#FBBF24'\"\n          [borderColor]=\"'#FDDF92'\"\n          [backgroundColor]=\"'#FFF9E9'\">\n        </cqa-badge>\n        <cqa-badge\n          *ngIf=\"badge === 'added'\"\n          label=\"Added\"\n          size=\"small\"\n          [textColor]=\"'#0DBD7D'\"\n          [borderColor]=\"'#5ED3A8'\"\n          [backgroundColor]=\"'#CFF2E5'\">\n        </cqa-badge>\n        <cqa-badge\n          *ngIf=\"badge === 'removed'\"\n          label=\"Removed\"\n          size=\"small\"\n          [textColor]=\"'#EE3F3F'\"\n          [borderColor]=\"'#F47F7F'\"\n          [backgroundColor]=\"'#FCD9D9'\">\n        </cqa-badge>\n        </ng-container>\n      </ng-container>\n      <div class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-rounded-[4px] cqa-py-0.5 cqa-px-1 cqa-bg-[#6366F11A] cqa-ml-1 cqa-cursor-pointer hover:cqa-opacity-80 cqa-transition-opacity\"\n           *ngIf=\"step?.executedResult?.video_start_time\" \n           [matTooltip]=\"'Jump to video time'\" \n           matTooltipPosition=\"below\"\n           (click)=\"onJumpToTimestamp($event)\">\n        <mat-icon class=\"cqa-text-[#636363] !cqa-text-[10px] !cqa-w-[10px] !cqa-h-[10px]\">\n          play_arrow\n        </mat-icon>\n        <span class=\"cqa-text-[8px] cqa-leading-[12px] cqa-font-normal cqa-text-[#636363]\">\n          {{ formatDurationClock(step?.executedResult?.video_start_time || 0) }}\n        </span>\n      </div>\n      <div *ngIf=\"isDebug\" class=\"cqa-flex cqa-items-center cqa-gap-0.5 cqa-text-[#9CA3AF]\" (click)=\"$event.stopPropagation()\">\n        <button *ngIf=\"!step?.isStepGroupChildren\" type=\"button\" class=\"cqa-p-0 cqa-border-0 cqa-bg-transparent cqa-cursor-pointer hover:cqa-opacity-80 cqa-transition-opacity focus:cqa-outline-none\" aria-label=\"Edit\" (click)=\"onEditStep($event)\">\n          <mat-icon class=\"!cqa-text-[14px] !cqa-w-[14px] !cqa-h-[14px]\">edit</mat-icon>\n        </button>\n        <button *ngIf=\"!step?.isStepGroupChildren\" type=\"button\" class=\"cqa-p-0 cqa-border-0 cqa-bg-transparent cqa-cursor-pointer hover:cqa-opacity-80 cqa-transition-opacity focus:cqa-outline-none\" aria-label=\"Add\" [matMenuTriggerFor]=\"addStepMenu\">\n          <mat-icon class=\"!cqa-text-[14px] !cqa-w-[14px] !cqa-h-[14px]\">add</mat-icon>\n        </button>\n        <mat-menu #addStepMenu=\"matMenu\" class=\"cqa-add-step-menu\" xPosition=\"before\" yPosition=\"below\">\n          <button mat-menu-item *ngFor=\"let opt of addStepMenuOptions\" (click)=\"onAddStepOptionSelect(opt, $event)\">\n            {{ opt.label }}\n          </button>\n        </mat-menu>\n        <button *ngIf=\"effectiveStepMoreMenuOptions.length\" type=\"button\" class=\"cqa-p-0 cqa-border-0 cqa-bg-transparent cqa-cursor-pointer hover:cqa-opacity-80 cqa-transition-opacity focus:cqa-outline-none\" aria-label=\"More options\" [matMenuTriggerFor]=\"stepMoreMenu\">\n          <mat-icon class=\"!cqa-text-[14px] !cqa-w-[14px] !cqa-h-[14px]\">more_vert</mat-icon>\n        </button>\n        <mat-menu #stepMoreMenu=\"matMenu\" class=\"cqa-step-more-menu\" xPosition=\"before\" yPosition=\"below\">\n          <button mat-menu-item *ngFor=\"let opt of effectiveStepMoreMenuOptions\" (click)=\"onStepMoreOptionSelect(opt, $event)\">{{ opt.label }}</button>\n        </mat-menu>\n      </div>\n      <span class=\"cqa-text-[12px] cqa-leading-[15px] cqa-font-medium cqa-text-[#9CA3AF]\">\n        {{ formatDuration(config.duration) }}\n      </span>\n      <svg [class.cqa-rotate-180]=\"isExpanded\" class=\"cqa-transition-transform\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M3.5 5L7 8.5L10.5 5\" stroke=\"#9CA3AF\" stroke-width=\"0.833333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n    </div>\n  </div>\n\n  <!-- Expanded Content -->\n  <div *ngIf=\"isExpanded\">\n    <!-- Nested Steps -->\n    <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-mt-2 cqa-ml-[18px]\">\n      <!-- Loading indicator for nested steps -->\n      <div *ngIf=\"hasChild && (!config.steps || config.steps.length === 0) && isStepLoading()\" \n           class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-py-2 cqa-px-3\">\n        <svg class=\"cqa-animate-spin cqa-text-[#3B82F6]\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <circle cx=\"7\" cy=\"7\" r=\"6\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" opacity=\"0.25\"/>\n          <path d=\"M7 1A6 6 0 0 1 13 7\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" stroke-linecap=\"round\"/>\n        </svg>\n        <span class=\"cqa-text-[11px] cqa-leading-[13px] cqa-text-[#737373]\">Loading nested steps...</span>\n      </div>\n\n      <ng-container *ngFor=\"let step of config.steps; index as i\">\n        <!-- Wrapper to show skeleton while step-renderer is loading -->\n        <div\n          class=\"cqa-step-renderer-wrapper\"\n          [attr.id]=\"'exc-' + step.id\"\n          [class.loaded]=\"!isNestedStepLoading(step)\">\n          <!-- Loading skeleton overlay -->\n          <!-- <div *ngIf=\"isNestedStepLoading(step)\" class=\"cqa-step-skeleton-overlay\">\n            <div class=\"cqa-step-skeleton cqa-mx-3 cqa-my-1\"></div>\n          </div> -->\n          <!-- Use step-renderer for all nested steps to avoid circular dependencies -->\n          <!-- The step-renderer will dynamically load the appropriate component and pass handlers -->\n          <cqa-step-renderer \n            [step]=\"step\"\n            [stepNumber]=\"step?.stepNumber || (stepNumber + '.' + (i + 1))\"\n            [onExpandHandler]=\"onExpandHandler\"\n            [getConditionBranchesHandler]=\"getConditionBranchesHandler\"\n            [onConditionBranchClickHandler]=\"onConditionBranchClickHandler\"\n            [isStepLoadingHandler]=\"isStepLoadingHandler\"\n            [isStepExpandedHandler]=\"isStepExpandedHandler\"\n            [convertMsToSecondsHandler]=\"convertMsToSecondsHandler\"\n            [formatFailureDetailsHandler]=\"formatFailureDetailsHandler\"\n            [getSelfHealAnalysisHandler]=\"getSelfHealAnalysisHandler\"\n            [getSelfHealLoadingStatesHandler]=\"getSelfHealLoadingStatesHandler\"\n            [getLoopIterationsHandler]=\"getLoopIterationsHandler\"\n            [getApiAssertionsHandler]=\"getApiAssertionsHandler\"\n            [formatActionsHandler]=\"formatActionsHandler\"\n            [onViewAllIterationsHandler]=\"onViewAllIterationsHandler\"\n            [onMakeCurrentBaselineHandler]=\"onMakeCurrentBaselineHandler\"\n            [onUploadBaselineHandler]=\"onUploadBaselineHandler\"\n            [onAnalyzeHandler]=\"onAnalyzeHandler\"\n            [onViewFullLogsHandler]=\"onViewFullLogsHandler\"\n            [onSelfHealActionHandler]=\"onSelfHealActionHandler\"\n            [onStepClickHandler]=\"onStepClickHandler\"\n            [onJsonPathCopiedHandler]=\"onJsonPathCopiedHandler\"\n            [onDownloadHandler]=\"onDownloadHandler\"\n            [onFilePathCopiedHandler]=\"onFilePathCopiedHandler\"\n            [onTextCopiedHandler]=\"onTextCopiedHandler\"\n            [jumpToTimestampHandler]=\"jumpToTimestampHandler\"\n            [downloadingStepId]=\"downloadingStepId\"\n            [isUploadingBaseline]=\"isUploadingBaseline\"\n            [isMakingCurrentBaseline]=\"isMakingCurrentBaseline\"\n            [selectedIterationId]=\"step?.selectedIterationId || ''\"\n            [isLive]=\"isLive\"\n            [isDebug]=\"isDebug\"\n            [parentSkipped]=\"selfDebugDisabled\"\n            [debugPointSet]=\"getDebugPointSetHandler ? getDebugPointSetHandler(step) : debugPointSet\"\n            [getDebugPointSetHandler]=\"getDebugPointSetHandler\"\n            [onDebugPointChangeHandler]=\"onDebugPointChangeHandler\"\n            [onEditStepHandler]=\"onEditStepHandler\"\n            [addStepMenuOptions]=\"getAddStepMenuOptionsForNested ? getAddStepMenuOptionsForNested(step) : addStepMenuOptions\"\n            [onAddStepOptionSelectHandler]=\"onAddStepOptionSelectHandler\"\n            [stepMoreMenuOptions]=\"getStepMoreMenuOptionsForNested ? getStepMoreMenuOptionsForNested(step) : stepMoreMenuOptions\"\n            [onStepMoreOptionSelectHandler]=\"onStepMoreOptionSelectHandler\"\n            [getAddStepMenuOptionsForNested]=\"getAddStepMenuOptionsForNested\"\n            [getStepMoreMenuOptionsForNested]=\"getStepMoreMenuOptionsForNested\"\n            (componentReady)=\"markStepLoaded(step)\">\n          </cqa-step-renderer>\n        </div>\n      </ng-container>\n    </div>\n  </div>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { id: [{
                 type: Input
             }], testStepResultId: [{