npm - @cqa-lib/cqa-ui - Versions diffs - 1.1.222 → 1.1.224 - Mend

@cqa-lib/cqa-ui 1.1.222 → 1.1.224

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

Files changed (20) hide show

package/fesm2015/cqa-lib-cqa-ui.mjs CHANGED Viewed

@@ -38,6 +38,8 @@ import * as i1$5 from '@angular/cdk/overlay';
 import { OverlayContainer, OverlayConfig, OverlayModule } from '@angular/cdk/overlay';
 import * as i3 from '@angular/cdk/portal';
 import { TemplatePortal, CdkPortalOutlet, ComponentPortal, PortalModule } from '@angular/cdk/portal';
+import * as i2$3 from '@angular/cdk/scrolling';
+import { ScrollingModule } from '@angular/cdk/scrolling';
 import * as i3$4 from 'ngx-typed-js';
 import { NgxTypedJsModule } from 'ngx-typed-js';
 import { __awaiter } from 'tslib';
@@ -8557,6 +8559,9 @@ class VisualComparisonComponent {
                 return 'cqa-text-[#9CA3AF] cqa-bg-[#f8f8f8]';
         }
     }
+    trackByLogIndex(index) {
+        return index;
+    }
     onImageClick(type) {
         var _a, _b, _c;
         const dialogData = {
@@ -8580,10 +8585,10 @@ class VisualComparisonComponent {
     }
 }
 VisualComparisonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: VisualComparisonComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$4.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
-VisualComparisonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: VisualComparisonComponent, selector: "cqa-visual-comparison", inputs: { screenshots: "screenshots", logs: "logs", showFullLogsLink: "showFullLogsLink", isUploadingBaseline: "isUploadingBaseline", isMakingCurrentBaseline: "isMakingCurrentBaseline", isLive: "isLive", testStepResultId: "testStepResultId" }, outputs: { makeCurrentBaseline: "makeCurrentBaseline", uploadBaseline: "uploadBaseline", analyze: "analyze", viewFullLogs: "viewFullLogs" }, host: { classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }, { propertyName: "baselineImage", first: true, predicate: ["baselineImage"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-grid cqa-grid-cols-12 cqa-gap-x-4 cqa-w-full cqa-max-h-[200px] cqa-h-full cqa-overflow-hidden\">\n  <!-- Left Panel: Screenshots & Visual Comparison -->\n  <div class=\"cqa-col-span-9 cqa-border cqa-border-solid cqa-border-[##E5E5E5] cqa-rounded-[10px] cqa-pt-2 cqa-px-3 cqa-pb-1 cqa-h-full cqa-max-h-[200px] cqa-overflow-auto cqa-font-inter\"\n    style=\"scrollbar-width: thin;\">\n    <div class=\"cqa-text-[12px] cqa-leading-[15px] cqa-font-medium cqa-text-[#0A0A0A] cqa-flex cqa-items-center cqa-gap-2 cqa-mb-2\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M12.6667 2H3.33333C2.59695 2 2 2.59695 2 3.33333V12.6667C2 13.403 2.59695 14 3.33333 14H12.6667C13.403 14 14 13.403 14 12.6667V3.33333C14 2.59695 13.403 2 12.6667 2Z\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6.00033 7.33268C6.73671 7.33268 7.33366 6.73573 7.33366 5.99935C7.33366 5.26297 6.73671 4.66602 6.00033 4.66602C5.26395 4.66602 4.66699 5.26297 4.66699 5.99935C4.66699 6.73573 5.26395 7.33268 6.00033 7.33268Z\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M14 10.0004L11.9427 7.94312C11.6926 7.69315 11.3536 7.55273 11 7.55273C10.6464 7.55273 10.3074 7.69315 10.0573 7.94312L4 14.0004\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      Screenshots & Visual Comparison\n    </div>\n    \n    <!-- Screenshot Comparison Grid -->\n    <div class=\"cqa-grid cqa-grid-cols-3 cqa-gap-3 cqa-mb-2\">\n      <!-- Baseline -->\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n        <div class=\"cqa-text-[11px] cqa-leading-[100%] cqa-text-[#737373]\">Baseline</div>\n        <div class=\"cqa-bg-[#F5F5F5] cqa-rounded-[10px] cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-flex cqa-items-center cqa-justify-center cqa-h-[112px] cqa-cursor-pointer\" (click)=\"onImageClick('baseline')\">\n          <div *ngIf=\"!screenshots?.baseline\">\n            <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M25.3333 4H6.66667C5.19391 4 4 5.19391 4 6.66667V25.3333C4 26.8061 5.19391 28 6.66667 28H25.3333C26.8061 28 28 26.8061 28 25.3333V6.66667C28 5.19391 26.8061 4 25.3333 4Z\" stroke=\"#737373\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11.9997 14.6673C13.4724 14.6673 14.6663 13.4734 14.6663 12.0007C14.6663 10.5279 13.4724 9.33398 11.9997 9.33398C10.5269 9.33398 9.33301 10.5279 9.33301 12.0007C9.33301 13.4734 10.5269 14.6673 11.9997 14.6673Z\" stroke=\"#737373\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M28 20.0009L23.8853 15.8862C23.3853 15.3863 22.7071 15.1055 22 15.1055C21.2929 15.1055 20.6147 15.3863 20.1147 15.8862L8 28.0009\" stroke=\"#737373\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n          </div>\n          <img #baselineImage *ngIf=\"baselineImageUrl\" [src]=\"baselineImageUrl\" alt=\"Baseline\" class=\"cqa-w-full cqa-h-full cqa-object-cover cqa-rounded-lg\" />\n        </div>\n      </div>\n\n      <!-- Current -->\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n        <div class=\"cqa-text-[11px] cqa-leading-[100%] cqa-text-[#737373]\">Current</div>\n        <div class=\"cqa-bg-[#FEF2F3] cqa-rounded-[10px] cqa-border cqa-border-solid cqa-border-[#F9C2C5] cqa-flex cqa-items-center cqa-justify-center cqa-h-[112px] cqa-cursor-pointer\" (click)=\"onImageClick('current')\">\n          <div *ngIf=\"!screenshots?.current\" class=\"cqa-flex cqa-flex-col cqa-items-center cqa-gap-2 cqa-text-[#EF4444]\">\n            <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M25.3333 4H6.66667C5.19391 4 4 5.19391 4 6.66667V25.3333C4 26.8061 5.19391 28 6.66667 28H25.3333C26.8061 28 28 26.8061 28 25.3333V6.66667C28 5.19391 26.8061 4 25.3333 4Z\" stroke=\"#E7000B\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11.9997 14.6673C13.4724 14.6673 14.6663 13.4734 14.6663 12.0007C14.6663 10.5279 13.4724 9.33398 11.9997 9.33398C10.5269 9.33398 9.33301 10.5279 9.33301 12.0007C9.33301 13.4734 10.5269 14.6673 11.9997 14.6673Z\" stroke=\"#E7000B\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M28 20.0009L23.8853 15.8862C23.3853 15.3863 22.7071 15.1055 22 15.1055C21.2929 15.1055 20.6147 15.3863 20.1147 15.8862L8 28.0009\" stroke=\"#E7000B\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n          </div>\n          <img *ngIf=\"screenshots?.current\" [src]=\"screenshots.current\" alt=\"Current\" class=\"cqa-w-full cqa-h-full cqa-object-cover cqa-rounded-lg\" />\n        </div>\n      </div>\n\n      <!-- Difference -->\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n        <div class=\"cqa-text-[11px] cqa-leading-[100%] cqa-text-[#737373]\">Difference</div>\n        <div class=\"cqa-bg-[#FEF2F3] cqa-rounded-[10px] cqa-border cqa-border-solid cqa-border-[#F9C2C5] cqa-flex cqa-items-center cqa-justify-center cqa-h-[112px] cqa-cursor-pointer\" (click)=\"onImageClick('difference')\">\n          <div *ngIf=\"!screenshots?.difference\" class=\"cqa-flex cqa-flex-col cqa-items-center cqa-gap-2 cqa-text-[#EF4444]\">\n            <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M25.3333 4H6.66667C5.19391 4 4 5.19391 4 6.66667V25.3333C4 26.8061 5.19391 28 6.66667 28H25.3333C26.8061 28 28 26.8061 28 25.3333V6.66667C28 5.19391 26.8061 4 25.3333 4Z\" stroke=\"#E7000B\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11.9997 14.6673C13.4724 14.6673 14.6663 13.4734 14.6663 12.0007C14.6663 10.5279 13.4724 9.33398 11.9997 9.33398C10.5269 9.33398 9.33301 10.5279 9.33301 12.0007C9.33301 13.4734 10.5269 14.6673 11.9997 14.6673Z\" stroke=\"#E7000B\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M28 20.0009L23.8853 15.8862C23.3853 15.3863 22.7071 15.1055 22 15.1055C21.2929 15.1055 20.6147 15.3863 20.1147 15.8862L8 28.0009\" stroke=\"#E7000B\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n          </div>\n          <img *ngIf=\"screenshots?.difference\" [src]=\"screenshots.difference\" alt=\"Difference\" class=\"cqa-w-full cqa-h-full cqa-object-cover cqa-rounded-lg\" />\n        </div>\n      </div>\n    </div>\n\n    <!-- Action Buttons -->\n    <div class=\"cqa-flex cqa-items-center cqa-justify-end cqa-gap-2 cqa-flex-wrap\">\n      <button \n        (click)=\"onMakeCurrentBaseline()\"\n        [disabled]=\"!isCurrentImageAvailable || isMakingCurrentBaseline?.[testStepResultId] === true\"\n        [class.cqa-opacity-50]=\"!isCurrentImageAvailable || isMakingCurrentBaseline?.[testStepResultId] === true\"\n        [class.cqa-cursor-not-allowed]=\"!isCurrentImageAvailable || isMakingCurrentBaseline?.[testStepResultId] === true\"\n        class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-pl-2 cqa-pr-4 cqa-py-[2px] cqa-rounded-lg cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-transparent cqa-text-[#212122] cqa-border cqa-border-solid cqa-border-[#212122] disabled:cqa-cursor-not-allowed\">\n        <svg *ngIf=\"!isMakingCurrentBaseline?.[testStepResultId]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M4.39754 7.93752L2.31254 5.85252L1.60254 6.55752L4.39754 9.35252L10.3975 3.35252L9.69254 2.64752L4.39754 7.93752Z\" fill=\"black\"/></svg>\n        <svg *ngIf=\"isMakingCurrentBaseline?.[testStepResultId] === true\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-dasharray=\"8 4\" opacity=\"0.3\"/>\n          <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-dasharray=\"8 4\" stroke-dashoffset=\"2\">\n            <animateTransform attributeName=\"transform\" type=\"rotate\" values=\"0 6 6;360 6 6\" dur=\"1s\" repeatCount=\"indefinite\"/>\n          </circle>\n        </svg>\n        <span>{{ isMakingCurrentBaseline?.[testStepResultId] === true ? 'Loading...' : 'Make current baseline' }}</span>\n      </button>\n      <button \n        (click)=\"onUploadBaseline()\"\n        [disabled]=\"isUploadingBaseline?.[testStepResultId] === true\"\n        [class.cqa-opacity-50]=\"isUploadingBaseline?.[testStepResultId] === true\"\n        [class.cqa-cursor-not-allowed]=\"isUploadingBaseline?.[testStepResultId] === true\"\n        class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-pl-2 cqa-pr-4 cqa-py-[2px] cqa-rounded-lg cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-transparent cqa-text-[#212122] cqa-border cqa-border-solid cqa-border-[#212122] disabled:cqa-cursor-not-allowed\">\n        <svg *ngIf=\"!isUploadingBaseline?.[testStepResultId]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M9 7.5V9H3V7.5H2V9C2 9.55 2.45 10 3 10H9C9.55 10 10 9.55 10 9V7.5H9ZM3.5 4.5L4.205 5.205L5.5 3.915V8H6.5V3.915L7.795 5.205L8.5 4.5L6 2L3.5 4.5Z\" fill=\"black\"/></svg>\n        <svg *ngIf=\"isUploadingBaseline?.[testStepResultId] === true\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" style=\"animation: spin 1s linear infinite;\">\n          <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-dasharray=\"8 4\" opacity=\"0.3\"/>\n          <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-dasharray=\"8 4\" stroke-dashoffset=\"2\"/>\n        </svg>\n        <span>{{ isUploadingBaseline?.[testStepResultId] === true ? 'Uploading...' : 'Upload baseline' }}</span>\n      </button>\n      <!-- Hidden file input -->\n      <input \n        #fileInput\n        type=\"file\" \n        accept=\"image/png,image/jpeg,image/jpg,image/webp\"\n        (change)=\"onFileSelected($event)\"\n        style=\"display: none;\" \n      />\n      <!-- <button \n        (click)=\"onAnalyze()\"\n        class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-pl-2 cqa-pr-4 cqa-py-[2px] cqa-rounded-lg cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-transparent cqa-text-[#212122] cqa-border cqa-border-solid cqa-border-[#212122]\">\n        <svg width=\"11\" height=\"12\" viewBox=\"0 0 11 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.5115 0C5.57931 0.0303178 5.60828 0.104354 5.63604 0.173128C5.64996 0.2132 5.66273 0.253489 5.67513 0.2941C5.67998 0.309662 5.68484 0.325224 5.68984 0.341258C5.7543 0.550673 5.81172 0.762331 5.86946 0.97384C5.88251 1.02159 5.89563 1.06932 5.90874 1.11704C5.97551 1.36005 6.04177 1.6032 6.10767 1.84646C6.11693 1.88062 6.12619 1.91479 6.13545 1.94895C6.16156 2.04527 6.18764 2.14159 6.21357 2.23796C6.26837 2.44159 6.32467 2.64463 6.38463 2.84668C6.38986 2.86435 6.3951 2.88203 6.4005 2.90024C6.55624 3.42 6.77701 3.88583 7.13888 4.28262C7.14784 4.29294 7.1568 4.30325 7.16603 4.31388C7.3205 4.48583 7.51873 4.62361 7.71687 4.73481C7.72696 4.74057 7.73705 4.74632 7.74745 4.75225C8.33051 5.079 9.03162 5.22272 9.66313 5.414C9.93984 5.49787 10.2157 5.58438 10.4905 5.6747C10.5099 5.68105 10.5292 5.68738 10.5485 5.6937C10.6062 5.7126 10.6639 5.73182 10.7215 5.7513C10.7349 5.75572 10.7483 5.76015 10.7621 5.76471C10.8415 5.79208 10.9174 5.82439 10.9825 5.88036C11.0023 5.92558 11.0023 5.92558 10.9969 5.9708C10.9336 6.03648 10.8707 6.06728 10.7871 6.09733C10.7751 6.10176 10.7632 6.1062 10.7508 6.11077C10.6096 6.16244 10.4665 6.20766 10.3232 6.25247C10.2938 6.26174 10.2644 6.27101 10.235 6.28028C10.0537 6.33735 9.87199 6.3932 9.69014 6.44842C9.45061 6.52117 9.21143 6.59512 8.97249 6.66991C8.93334 6.68216 8.89418 6.69437 8.85501 6.70654C8.64931 6.77048 8.44462 6.83671 8.24162 6.90944C8.22478 6.91545 8.20794 6.92147 8.19059 6.92766C7.51069 7.17443 6.99245 7.63478 6.66809 8.30799C6.49321 8.68634 6.39006 9.09548 6.28483 9.49929C6.25637 9.60825 6.22611 9.7166 6.1955 9.82492C6.17149 9.91015 6.14803 9.99551 6.12515 10.0811C6.12243 10.0913 6.1197 10.1014 6.1169 10.1119C6.1037 10.1612 6.09056 10.2106 6.07752 10.2599C6.04413 10.3851 6.00817 10.5092 5.97123 10.6332C5.90567 10.8536 5.84601 11.0757 5.78672 11.298C5.69732 11.6328 5.69732 11.6328 5.64662 11.7937C5.64326 11.8045 5.6399 11.8153 5.63644 11.8264C5.61793 11.8837 5.5989 11.9364 5.56388 11.9849C5.5106 11.9972 5.5106 11.9972 5.46273 12C5.40801 11.9168 5.37177 11.8361 5.34273 11.7401C5.33851 11.7265 5.33428 11.7129 5.32993 11.6989C5.27614 11.5233 5.22807 11.3459 5.17999 11.1686C5.16898 11.1281 5.15791 11.0875 5.14685 11.047C5.0644 10.7448 4.98331 10.4423 4.90234 10.1397C4.56509 8.64299 4.56509 8.64299 3.71433 7.43288C3.7007 7.42128 3.68706 7.40968 3.67302 7.39773C3.1156 6.93203 2.3813 6.75959 1.70885 6.55751C1.54254 6.50749 1.37628 6.45724 1.21004 6.40697C1.1955 6.40258 1.1955 6.40258 1.18067 6.39809C0.940881 6.32556 0.701157 6.25283 0.462274 6.17711C0.452168 6.17393 0.442063 6.17075 0.431651 6.16747C0.0646543 6.05178 0.0646543 6.05178 0.000790211 5.9708C-0.00101599 5.93406 -0.00101599 5.93406 0.0152398 5.89543C0.0819909 5.8272 0.14676 5.79797 0.234862 5.76825C0.247618 5.76378 0.260375 5.75931 0.273518 5.75471C0.312587 5.7411 0.351741 5.72779 0.390929 5.71455C0.402112 5.71073 0.413295 5.7069 0.424817 5.70296C0.503904 5.6759 0.583275 5.64986 0.662762 5.62412C0.682294 5.61777 0.682294 5.61777 0.70222 5.61129C1.04166 5.50116 1.38332 5.39867 1.72487 5.29595C1.97939 5.21939 2.23347 5.14157 2.48674 5.06065C2.49838 5.05694 2.51001 5.05324 2.52201 5.04943C3.10872 4.86262 3.68229 4.59755 4.06112 4.0716C4.06679 4.0638 4.07247 4.05599 4.07831 4.04796C4.50019 3.4642 4.6647 2.7543 4.8485 2.06161C4.90896 1.83379 4.97015 1.60619 5.03155 1.37865C5.04856 1.31564 5.06553 1.25263 5.08244 1.18959C5.15037 0.936385 5.21932 0.683523 5.29222 0.431818C5.29904 0.408248 5.30583 0.384667 5.31259 0.361076C5.41466 0.00531681 5.41466 0.00531681 5.5115 0Z\" fill=\"#161617\"/><path d=\"M8.84391 0.740443C8.91024 0.818762 8.92349 0.910806 8.94415 1.01081C9.01305 1.32499 9.09241 1.61388 9.36787 1.79638C9.53782 1.89443 9.74037 1.93904 9.92867 1.98118C10.0082 1.99933 10.0753 2.02341 10.1435 2.07158C10.1588 2.09701 10.1588 2.09701 10.1579 2.14129C10.1421 2.19513 10.1282 2.2125 10.0866 2.24774C10.041 2.26364 10.041 2.26364 9.98633 2.27601C9.96564 2.28096 9.94496 2.28597 9.9243 2.29102C9.91322 2.2937 9.90215 2.29638 9.89075 2.29914C9.55401 2.38039 9.55401 2.38039 9.26295 2.56428C9.25348 2.57222 9.24402 2.58017 9.23427 2.58836C9.02625 2.7797 8.98226 3.098 8.91963 3.36464C8.91605 3.37928 8.91246 3.39393 8.90876 3.40901C8.90566 3.42198 8.90255 3.43494 8.89935 3.4483C8.88584 3.48788 8.87183 3.51369 8.84391 3.54402C8.76614 3.55432 8.76614 3.55432 8.72831 3.54402C8.66814 3.49537 8.65468 3.43996 8.63896 3.3655C8.63633 3.35397 8.63369 3.34244 8.63098 3.33056C8.62259 3.29374 8.61447 3.25686 8.60639 3.21995C8.54302 2.93259 8.47148 2.65064 8.21879 2.4822C8.02131 2.36732 7.78118 2.31298 7.56045 2.26911C7.49996 2.25597 7.4653 2.23944 7.42785 2.18745C7.41972 2.1347 7.41972 2.1347 7.42785 2.08194C7.48541 2.01979 7.54597 2.00462 7.62382 1.98585C7.64835 1.97952 7.67286 1.97314 7.69737 1.96671C7.71003 1.96342 7.72269 1.96012 7.73574 1.95673C7.80032 1.93939 7.86425 1.91995 7.92817 1.90012C7.93978 1.89661 7.95139 1.89309 7.96336 1.88947C8.09329 1.84895 8.20541 1.79712 8.30927 1.70512C8.31896 1.6968 8.32864 1.68848 8.33862 1.67992C8.50026 1.52817 8.55518 1.3002 8.60504 1.08748C8.60884 1.07133 8.61264 1.05518 8.61655 1.03854C8.62411 1.0061 8.63154 0.973622 8.63882 0.94111C8.64403 0.918489 8.64403 0.918489 8.64935 0.895412C8.65238 0.881899 8.65542 0.868385 8.65855 0.854462C8.67186 0.811441 8.68935 0.77766 8.71386 0.740443C8.76096 0.715878 8.79401 0.726983 8.84391 0.740443Z\" fill=\"#414146\"/><path d=\"M2.19446 8.32962C2.21166 8.32975 2.21166 8.32975 2.22919 8.32988C2.35253 8.3338 2.43597 8.37503 2.5268 8.46151C2.6325 8.58061 2.6813 8.71497 2.67852 8.87549C2.66666 9.00565 2.59307 9.11929 2.50282 9.20727C2.39658 9.29672 2.28941 9.32628 2.15366 9.32215C2.03919 9.30825 1.93151 9.25153 1.85038 9.16618C1.7495 9.02258 1.72 8.89087 1.73479 8.71398C1.76533 8.57472 1.85337 8.46167 1.96598 8.38238C2.04421 8.34101 2.10713 8.32886 2.19446 8.32962Z\" fill=\"#4C4C51\"/></svg>\n        Analyze\n      </button> -->\n    </div>\n  </div>\n\n  <!-- Right Panel: Logs -->\n  <div class=\"cqa-col-span-3 cqa-border cqa-border-solid cqa-border-[##E5E5E5] cqa-rounded-[10px] cqa-py-2 cqa-px-3 cqa-h-full cqa-max-h-[200px] cqa-overflow-auto\"\n    style=\"scrollbar-width: thin;\">\n    <div class=\"cqa-text-[12px] cqa-leading-[15px] cqa-font-medium cqa-text-[#0A0A0A] cqa-flex cqa-items-center cqa-gap-2 cqa-mb-2\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10.6666 12L14.6666 8L10.6666 4\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M5.33337 4L1.33337 8L5.33337 12\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      Logs\n    </div>\n    \n    <div class=\"cqa-flex cqa-flex-col cqa-gap-2 \">\n      <div class=\"cqa-text-[11px] cqa-leading-[100%] cqa-text-[#737373]\">Console</div>\n      \n      <div *ngFor=\"let log of logs\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-break-words\" [ngClass]=\"getLogClass(log.level)\">\n        {{ log.message }}\n      </div>\n      \n      <div *ngIf=\"!logs || logs.length === 0\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#9CA3AF] cqa-bg-[#f8f8f8] cqa-text-center\">\n        No logs available\n      </div>\n    </div>\n\n    <!-- <a \n      *ngIf=\"showFullLogsLink && logs?.length\"\n      (click)=\"onViewFullLogs()\"\n      class=\"cqa-text-[10px] cqa-leading-[15px] cqa-text-[#3F43EE] cqa-font-medium cqa-flex cqa-items-center cqa-justify-end cqa-gap-[2px] cqa-cursor-pointer hover:cqa-underline cqa-mt-4\">\n      View full logs Iterations\n      <div><svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03833 6.74335L2.62833 7.33335L5.96166 4.00002L2.62833 0.666687L2.03833 1.25669L4.78166 4.00002L2.03833 6.74335Z\" fill=\"#3F43EE\"/></svg></div>\n    </a> -->\n  </div>\n</div>\n\n<style>\n  @keyframes spin {\n    from { transform: rotate(0deg); }\n    to { transform: rotate(360deg); }\n  }\n</style>", styles: ["\n  @keyframes spin {\n    from { transform: rotate(0deg); }\n    to { transform: rotate(360deg); }\n  }\n"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+VisualComparisonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: VisualComparisonComponent, selector: "cqa-visual-comparison", inputs: { screenshots: "screenshots", logs: "logs", showFullLogsLink: "showFullLogsLink", isUploadingBaseline: "isUploadingBaseline", isMakingCurrentBaseline: "isMakingCurrentBaseline", isLive: "isLive", testStepResultId: "testStepResultId" }, outputs: { makeCurrentBaseline: "makeCurrentBaseline", uploadBaseline: "uploadBaseline", analyze: "analyze", viewFullLogs: "viewFullLogs" }, host: { classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }, { propertyName: "baselineImage", first: true, predicate: ["baselineImage"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-grid cqa-grid-cols-12 cqa-gap-x-4 cqa-w-full cqa-max-h-[200px] cqa-h-full cqa-overflow-hidden\">\n  <!-- Left Panel: Screenshots & Visual Comparison -->\n  <div class=\"cqa-col-span-9 cqa-border cqa-border-solid cqa-border-[##E5E5E5] cqa-rounded-[10px] cqa-pt-2 cqa-px-3 cqa-pb-1 cqa-h-full cqa-max-h-[200px] cqa-overflow-auto cqa-font-inter\"\n    style=\"scrollbar-width: thin;\">\n    <div class=\"cqa-text-[12px] cqa-leading-[15px] cqa-font-medium cqa-text-[#0A0A0A] cqa-flex cqa-items-center cqa-gap-2 cqa-mb-2\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M12.6667 2H3.33333C2.59695 2 2 2.59695 2 3.33333V12.6667C2 13.403 2.59695 14 3.33333 14H12.6667C13.403 14 14 13.403 14 12.6667V3.33333C14 2.59695 13.403 2 12.6667 2Z\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6.00033 7.33268C6.73671 7.33268 7.33366 6.73573 7.33366 5.99935C7.33366 5.26297 6.73671 4.66602 6.00033 4.66602C5.26395 4.66602 4.66699 5.26297 4.66699 5.99935C4.66699 6.73573 5.26395 7.33268 6.00033 7.33268Z\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M14 10.0004L11.9427 7.94312C11.6926 7.69315 11.3536 7.55273 11 7.55273C10.6464 7.55273 10.3074 7.69315 10.0573 7.94312L4 14.0004\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      Screenshots & Visual Comparison\n    </div>\n    \n    <!-- Screenshot Comparison Grid -->\n    <div class=\"cqa-grid cqa-grid-cols-3 cqa-gap-3 cqa-mb-2\">\n      <!-- Baseline -->\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n        <div class=\"cqa-text-[11px] cqa-leading-[100%] cqa-text-[#737373]\">Baseline</div>\n        <div class=\"cqa-bg-[#F5F5F5] cqa-rounded-[10px] cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-flex cqa-items-center cqa-justify-center cqa-h-[112px] cqa-cursor-pointer\" (click)=\"onImageClick('baseline')\">\n          <div *ngIf=\"!screenshots?.baseline\">\n            <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M25.3333 4H6.66667C5.19391 4 4 5.19391 4 6.66667V25.3333C4 26.8061 5.19391 28 6.66667 28H25.3333C26.8061 28 28 26.8061 28 25.3333V6.66667C28 5.19391 26.8061 4 25.3333 4Z\" stroke=\"#737373\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11.9997 14.6673C13.4724 14.6673 14.6663 13.4734 14.6663 12.0007C14.6663 10.5279 13.4724 9.33398 11.9997 9.33398C10.5269 9.33398 9.33301 10.5279 9.33301 12.0007C9.33301 13.4734 10.5269 14.6673 11.9997 14.6673Z\" stroke=\"#737373\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M28 20.0009L23.8853 15.8862C23.3853 15.3863 22.7071 15.1055 22 15.1055C21.2929 15.1055 20.6147 15.3863 20.1147 15.8862L8 28.0009\" stroke=\"#737373\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n          </div>\n          <img #baselineImage *ngIf=\"baselineImageUrl\" [src]=\"baselineImageUrl\" alt=\"Baseline\" class=\"cqa-w-full cqa-h-full cqa-object-cover cqa-rounded-lg\" />\n        </div>\n      </div>\n\n      <!-- Current -->\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n        <div class=\"cqa-text-[11px] cqa-leading-[100%] cqa-text-[#737373]\">Current</div>\n        <div class=\"cqa-bg-[#FEF2F3] cqa-rounded-[10px] cqa-border cqa-border-solid cqa-border-[#F9C2C5] cqa-flex cqa-items-center cqa-justify-center cqa-h-[112px] cqa-cursor-pointer\" (click)=\"onImageClick('current')\">\n          <div *ngIf=\"!screenshots?.current\" class=\"cqa-flex cqa-flex-col cqa-items-center cqa-gap-2 cqa-text-[#EF4444]\">\n            <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M25.3333 4H6.66667C5.19391 4 4 5.19391 4 6.66667V25.3333C4 26.8061 5.19391 28 6.66667 28H25.3333C26.8061 28 28 26.8061 28 25.3333V6.66667C28 5.19391 26.8061 4 25.3333 4Z\" stroke=\"#E7000B\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11.9997 14.6673C13.4724 14.6673 14.6663 13.4734 14.6663 12.0007C14.6663 10.5279 13.4724 9.33398 11.9997 9.33398C10.5269 9.33398 9.33301 10.5279 9.33301 12.0007C9.33301 13.4734 10.5269 14.6673 11.9997 14.6673Z\" stroke=\"#E7000B\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M28 20.0009L23.8853 15.8862C23.3853 15.3863 22.7071 15.1055 22 15.1055C21.2929 15.1055 20.6147 15.3863 20.1147 15.8862L8 28.0009\" stroke=\"#E7000B\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n          </div>\n          <img *ngIf=\"screenshots?.current\" [src]=\"screenshots.current\" alt=\"Current\" class=\"cqa-w-full cqa-h-full cqa-object-cover cqa-rounded-lg\" />\n        </div>\n      </div>\n\n      <!-- Difference -->\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n        <div class=\"cqa-text-[11px] cqa-leading-[100%] cqa-text-[#737373]\">Difference</div>\n        <div class=\"cqa-bg-[#FEF2F3] cqa-rounded-[10px] cqa-border cqa-border-solid cqa-border-[#F9C2C5] cqa-flex cqa-items-center cqa-justify-center cqa-h-[112px] cqa-cursor-pointer\" (click)=\"onImageClick('difference')\">\n          <div *ngIf=\"!screenshots?.difference\" class=\"cqa-flex cqa-flex-col cqa-items-center cqa-gap-2 cqa-text-[#EF4444]\">\n            <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M25.3333 4H6.66667C5.19391 4 4 5.19391 4 6.66667V25.3333C4 26.8061 5.19391 28 6.66667 28H25.3333C26.8061 28 28 26.8061 28 25.3333V6.66667C28 5.19391 26.8061 4 25.3333 4Z\" stroke=\"#E7000B\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11.9997 14.6673C13.4724 14.6673 14.6663 13.4734 14.6663 12.0007C14.6663 10.5279 13.4724 9.33398 11.9997 9.33398C10.5269 9.33398 9.33301 10.5279 9.33301 12.0007C9.33301 13.4734 10.5269 14.6673 11.9997 14.6673Z\" stroke=\"#E7000B\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M28 20.0009L23.8853 15.8862C23.3853 15.3863 22.7071 15.1055 22 15.1055C21.2929 15.1055 20.6147 15.3863 20.1147 15.8862L8 28.0009\" stroke=\"#E7000B\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n          </div>\n          <img *ngIf=\"screenshots?.difference\" [src]=\"screenshots.difference\" alt=\"Difference\" class=\"cqa-w-full cqa-h-full cqa-object-cover cqa-rounded-lg\" />\n        </div>\n      </div>\n    </div>\n\n    <!-- Action Buttons -->\n    <div class=\"cqa-flex cqa-items-center cqa-justify-end cqa-gap-2 cqa-flex-wrap\">\n      <button \n        (click)=\"onMakeCurrentBaseline()\"\n        [disabled]=\"!isCurrentImageAvailable || isMakingCurrentBaseline?.[testStepResultId] === true\"\n        [class.cqa-opacity-50]=\"!isCurrentImageAvailable || isMakingCurrentBaseline?.[testStepResultId] === true\"\n        [class.cqa-cursor-not-allowed]=\"!isCurrentImageAvailable || isMakingCurrentBaseline?.[testStepResultId] === true\"\n        class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-pl-2 cqa-pr-4 cqa-py-[2px] cqa-rounded-lg cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-transparent cqa-text-[#212122] cqa-border cqa-border-solid cqa-border-[#212122] disabled:cqa-cursor-not-allowed\">\n        <svg *ngIf=\"!isMakingCurrentBaseline?.[testStepResultId]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M4.39754 7.93752L2.31254 5.85252L1.60254 6.55752L4.39754 9.35252L10.3975 3.35252L9.69254 2.64752L4.39754 7.93752Z\" fill=\"black\"/></svg>\n        <svg *ngIf=\"isMakingCurrentBaseline?.[testStepResultId] === true\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-dasharray=\"8 4\" opacity=\"0.3\"/>\n          <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-dasharray=\"8 4\" stroke-dashoffset=\"2\">\n            <animateTransform attributeName=\"transform\" type=\"rotate\" values=\"0 6 6;360 6 6\" dur=\"1s\" repeatCount=\"indefinite\"/>\n          </circle>\n        </svg>\n        <span>{{ isMakingCurrentBaseline?.[testStepResultId] === true ? 'Loading...' : 'Make current baseline' }}</span>\n      </button>\n      <button \n        (click)=\"onUploadBaseline()\"\n        [disabled]=\"isUploadingBaseline?.[testStepResultId] === true\"\n        [class.cqa-opacity-50]=\"isUploadingBaseline?.[testStepResultId] === true\"\n        [class.cqa-cursor-not-allowed]=\"isUploadingBaseline?.[testStepResultId] === true\"\n        class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-pl-2 cqa-pr-4 cqa-py-[2px] cqa-rounded-lg cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-transparent cqa-text-[#212122] cqa-border cqa-border-solid cqa-border-[#212122] disabled:cqa-cursor-not-allowed\">\n        <svg *ngIf=\"!isUploadingBaseline?.[testStepResultId]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M9 7.5V9H3V7.5H2V9C2 9.55 2.45 10 3 10H9C9.55 10 10 9.55 10 9V7.5H9ZM3.5 4.5L4.205 5.205L5.5 3.915V8H6.5V3.915L7.795 5.205L8.5 4.5L6 2L3.5 4.5Z\" fill=\"black\"/></svg>\n        <svg *ngIf=\"isUploadingBaseline?.[testStepResultId] === true\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" style=\"animation: spin 1s linear infinite;\">\n          <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-dasharray=\"8 4\" opacity=\"0.3\"/>\n          <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-dasharray=\"8 4\" stroke-dashoffset=\"2\"/>\n        </svg>\n        <span>{{ isUploadingBaseline?.[testStepResultId] === true ? 'Uploading...' : 'Upload baseline' }}</span>\n      </button>\n      <!-- Hidden file input -->\n      <input \n        #fileInput\n        type=\"file\" \n        accept=\"image/png,image/jpeg,image/jpg,image/webp\"\n        (change)=\"onFileSelected($event)\"\n        style=\"display: none;\" \n      />\n      <!-- <button \n        (click)=\"onAnalyze()\"\n        class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-pl-2 cqa-pr-4 cqa-py-[2px] cqa-rounded-lg cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-transparent cqa-text-[#212122] cqa-border cqa-border-solid cqa-border-[#212122]\">\n        <svg width=\"11\" height=\"12\" viewBox=\"0 0 11 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.5115 0C5.57931 0.0303178 5.60828 0.104354 5.63604 0.173128C5.64996 0.2132 5.66273 0.253489 5.67513 0.2941C5.67998 0.309662 5.68484 0.325224 5.68984 0.341258C5.7543 0.550673 5.81172 0.762331 5.86946 0.97384C5.88251 1.02159 5.89563 1.06932 5.90874 1.11704C5.97551 1.36005 6.04177 1.6032 6.10767 1.84646C6.11693 1.88062 6.12619 1.91479 6.13545 1.94895C6.16156 2.04527 6.18764 2.14159 6.21357 2.23796C6.26837 2.44159 6.32467 2.64463 6.38463 2.84668C6.38986 2.86435 6.3951 2.88203 6.4005 2.90024C6.55624 3.42 6.77701 3.88583 7.13888 4.28262C7.14784 4.29294 7.1568 4.30325 7.16603 4.31388C7.3205 4.48583 7.51873 4.62361 7.71687 4.73481C7.72696 4.74057 7.73705 4.74632 7.74745 4.75225C8.33051 5.079 9.03162 5.22272 9.66313 5.414C9.93984 5.49787 10.2157 5.58438 10.4905 5.6747C10.5099 5.68105 10.5292 5.68738 10.5485 5.6937C10.6062 5.7126 10.6639 5.73182 10.7215 5.7513C10.7349 5.75572 10.7483 5.76015 10.7621 5.76471C10.8415 5.79208 10.9174 5.82439 10.9825 5.88036C11.0023 5.92558 11.0023 5.92558 10.9969 5.9708C10.9336 6.03648 10.8707 6.06728 10.7871 6.09733C10.7751 6.10176 10.7632 6.1062 10.7508 6.11077C10.6096 6.16244 10.4665 6.20766 10.3232 6.25247C10.2938 6.26174 10.2644 6.27101 10.235 6.28028C10.0537 6.33735 9.87199 6.3932 9.69014 6.44842C9.45061 6.52117 9.21143 6.59512 8.97249 6.66991C8.93334 6.68216 8.89418 6.69437 8.85501 6.70654C8.64931 6.77048 8.44462 6.83671 8.24162 6.90944C8.22478 6.91545 8.20794 6.92147 8.19059 6.92766C7.51069 7.17443 6.99245 7.63478 6.66809 8.30799C6.49321 8.68634 6.39006 9.09548 6.28483 9.49929C6.25637 9.60825 6.22611 9.7166 6.1955 9.82492C6.17149 9.91015 6.14803 9.99551 6.12515 10.0811C6.12243 10.0913 6.1197 10.1014 6.1169 10.1119C6.1037 10.1612 6.09056 10.2106 6.07752 10.2599C6.04413 10.3851 6.00817 10.5092 5.97123 10.6332C5.90567 10.8536 5.84601 11.0757 5.78672 11.298C5.69732 11.6328 5.69732 11.6328 5.64662 11.7937C5.64326 11.8045 5.6399 11.8153 5.63644 11.8264C5.61793 11.8837 5.5989 11.9364 5.56388 11.9849C5.5106 11.9972 5.5106 11.9972 5.46273 12C5.40801 11.9168 5.37177 11.8361 5.34273 11.7401C5.33851 11.7265 5.33428 11.7129 5.32993 11.6989C5.27614 11.5233 5.22807 11.3459 5.17999 11.1686C5.16898 11.1281 5.15791 11.0875 5.14685 11.047C5.0644 10.7448 4.98331 10.4423 4.90234 10.1397C4.56509 8.64299 4.56509 8.64299 3.71433 7.43288C3.7007 7.42128 3.68706 7.40968 3.67302 7.39773C3.1156 6.93203 2.3813 6.75959 1.70885 6.55751C1.54254 6.50749 1.37628 6.45724 1.21004 6.40697C1.1955 6.40258 1.1955 6.40258 1.18067 6.39809C0.940881 6.32556 0.701157 6.25283 0.462274 6.17711C0.452168 6.17393 0.442063 6.17075 0.431651 6.16747C0.0646543 6.05178 0.0646543 6.05178 0.000790211 5.9708C-0.00101599 5.93406 -0.00101599 5.93406 0.0152398 5.89543C0.0819909 5.8272 0.14676 5.79797 0.234862 5.76825C0.247618 5.76378 0.260375 5.75931 0.273518 5.75471C0.312587 5.7411 0.351741 5.72779 0.390929 5.71455C0.402112 5.71073 0.413295 5.7069 0.424817 5.70296C0.503904 5.6759 0.583275 5.64986 0.662762 5.62412C0.682294 5.61777 0.682294 5.61777 0.70222 5.61129C1.04166 5.50116 1.38332 5.39867 1.72487 5.29595C1.97939 5.21939 2.23347 5.14157 2.48674 5.06065C2.49838 5.05694 2.51001 5.05324 2.52201 5.04943C3.10872 4.86262 3.68229 4.59755 4.06112 4.0716C4.06679 4.0638 4.07247 4.05599 4.07831 4.04796C4.50019 3.4642 4.6647 2.7543 4.8485 2.06161C4.90896 1.83379 4.97015 1.60619 5.03155 1.37865C5.04856 1.31564 5.06553 1.25263 5.08244 1.18959C5.15037 0.936385 5.21932 0.683523 5.29222 0.431818C5.29904 0.408248 5.30583 0.384667 5.31259 0.361076C5.41466 0.00531681 5.41466 0.00531681 5.5115 0Z\" fill=\"#161617\"/><path d=\"M8.84391 0.740443C8.91024 0.818762 8.92349 0.910806 8.94415 1.01081C9.01305 1.32499 9.09241 1.61388 9.36787 1.79638C9.53782 1.89443 9.74037 1.93904 9.92867 1.98118C10.0082 1.99933 10.0753 2.02341 10.1435 2.07158C10.1588 2.09701 10.1588 2.09701 10.1579 2.14129C10.1421 2.19513 10.1282 2.2125 10.0866 2.24774C10.041 2.26364 10.041 2.26364 9.98633 2.27601C9.96564 2.28096 9.94496 2.28597 9.9243 2.29102C9.91322 2.2937 9.90215 2.29638 9.89075 2.29914C9.55401 2.38039 9.55401 2.38039 9.26295 2.56428C9.25348 2.57222 9.24402 2.58017 9.23427 2.58836C9.02625 2.7797 8.98226 3.098 8.91963 3.36464C8.91605 3.37928 8.91246 3.39393 8.90876 3.40901C8.90566 3.42198 8.90255 3.43494 8.89935 3.4483C8.88584 3.48788 8.87183 3.51369 8.84391 3.54402C8.76614 3.55432 8.76614 3.55432 8.72831 3.54402C8.66814 3.49537 8.65468 3.43996 8.63896 3.3655C8.63633 3.35397 8.63369 3.34244 8.63098 3.33056C8.62259 3.29374 8.61447 3.25686 8.60639 3.21995C8.54302 2.93259 8.47148 2.65064 8.21879 2.4822C8.02131 2.36732 7.78118 2.31298 7.56045 2.26911C7.49996 2.25597 7.4653 2.23944 7.42785 2.18745C7.41972 2.1347 7.41972 2.1347 7.42785 2.08194C7.48541 2.01979 7.54597 2.00462 7.62382 1.98585C7.64835 1.97952 7.67286 1.97314 7.69737 1.96671C7.71003 1.96342 7.72269 1.96012 7.73574 1.95673C7.80032 1.93939 7.86425 1.91995 7.92817 1.90012C7.93978 1.89661 7.95139 1.89309 7.96336 1.88947C8.09329 1.84895 8.20541 1.79712 8.30927 1.70512C8.31896 1.6968 8.32864 1.68848 8.33862 1.67992C8.50026 1.52817 8.55518 1.3002 8.60504 1.08748C8.60884 1.07133 8.61264 1.05518 8.61655 1.03854C8.62411 1.0061 8.63154 0.973622 8.63882 0.94111C8.64403 0.918489 8.64403 0.918489 8.64935 0.895412C8.65238 0.881899 8.65542 0.868385 8.65855 0.854462C8.67186 0.811441 8.68935 0.77766 8.71386 0.740443C8.76096 0.715878 8.79401 0.726983 8.84391 0.740443Z\" fill=\"#414146\"/><path d=\"M2.19446 8.32962C2.21166 8.32975 2.21166 8.32975 2.22919 8.32988C2.35253 8.3338 2.43597 8.37503 2.5268 8.46151C2.6325 8.58061 2.6813 8.71497 2.67852 8.87549C2.66666 9.00565 2.59307 9.11929 2.50282 9.20727C2.39658 9.29672 2.28941 9.32628 2.15366 9.32215C2.03919 9.30825 1.93151 9.25153 1.85038 9.16618C1.7495 9.02258 1.72 8.89087 1.73479 8.71398C1.76533 8.57472 1.85337 8.46167 1.96598 8.38238C2.04421 8.34101 2.10713 8.32886 2.19446 8.32962Z\" fill=\"#4C4C51\"/></svg>\n        Analyze\n      </button> -->\n    </div>\n  </div>\n\n  <!-- Right Panel: Logs -->\n  <div class=\"cqa-col-span-3 cqa-border cqa-border-solid cqa-border-[##E5E5E5] cqa-rounded-[10px] cqa-py-2 cqa-px-3 cqa-h-full cqa-max-h-[200px] cqa-overflow-auto\"\n    style=\"scrollbar-width: thin;\">\n    <div class=\"cqa-text-[12px] cqa-leading-[15px] cqa-font-medium cqa-text-[#0A0A0A] cqa-flex cqa-items-center cqa-gap-2 cqa-mb-2\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10.6666 12L14.6666 8L10.6666 4\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M5.33337 4L1.33337 8L5.33337 12\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      Logs\n    </div>\n    \n    <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-flex-1 cqa-min-h-0 cqa-h-[calc(100%-24px)]\">\n      <div class=\"cqa-text-[11px] cqa-leading-[100%] cqa-text-[#737373] cqa-shrink-0\">Console</div>\n      \n      <div *ngIf=\"!logs || logs.length === 0\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#9CA3AF] cqa-bg-[#f8f8f8] cqa-text-center\">\n        No logs available\n      </div>\n      \n      <cdk-virtual-scroll-viewport\n        *ngIf=\"logs?.length\"\n        itemSize=\"28\"\n        minBufferPx=\"200\"\n        maxBufferPx=\"300\"\n        class=\"cqa-h-full cqa-w-full cqa-overflow-x-hidden\" style=\"scrollbar-width: thin;\">\n        <div *cdkVirtualFor=\"let log of logs; trackBy: trackByLogIndex\" \n          class=\"cqa-px-2 cqa-py-[2px] cqa-rounded cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-break-words cqa-overflow-hidden\" \n          [ngClass]=\"getLogClass(log.level)\">\n          {{ log.message }}\n        </div>\n      </cdk-virtual-scroll-viewport>\n    </div>\n\n    <!-- <a \n      *ngIf=\"showFullLogsLink && logs?.length\"\n      (click)=\"onViewFullLogs()\"\n      class=\"cqa-text-[10px] cqa-leading-[15px] cqa-text-[#3F43EE] cqa-font-medium cqa-flex cqa-items-center cqa-justify-end cqa-gap-[2px] cqa-cursor-pointer hover:cqa-underline cqa-mt-4\">\n      View full logs Iterations\n      <div><svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03833 6.74335L2.62833 7.33335L5.96166 4.00002L2.62833 0.666687L2.03833 1.25669L4.78166 4.00002L2.03833 6.74335Z\" fill=\"#3F43EE\"/></svg></div>\n    </a> -->\n  </div>\n</div>\n\n<style>\n  @keyframes spin {\n    from { transform: rotate(0deg); }\n    to { transform: rotate(360deg); }\n  }\n</style>", styles: ["\n  @keyframes spin {\n    from { transform: rotate(0deg); }\n    to { transform: rotate(360deg); }\n  }\n"], components: [{ type: i2$3.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$3.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { type: i2$3.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: VisualComparisonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-visual-comparison', host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-grid cqa-grid-cols-12 cqa-gap-x-4 cqa-w-full cqa-max-h-[200px] cqa-h-full cqa-overflow-hidden\">\n  <!-- Left Panel: Screenshots & Visual Comparison -->\n  <div class=\"cqa-col-span-9 cqa-border cqa-border-solid cqa-border-[##E5E5E5] cqa-rounded-[10px] cqa-pt-2 cqa-px-3 cqa-pb-1 cqa-h-full cqa-max-h-[200px] cqa-overflow-auto cqa-font-inter\"\n    style=\"scrollbar-width: thin;\">\n    <div class=\"cqa-text-[12px] cqa-leading-[15px] cqa-font-medium cqa-text-[#0A0A0A] cqa-flex cqa-items-center cqa-gap-2 cqa-mb-2\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M12.6667 2H3.33333C2.59695 2 2 2.59695 2 3.33333V12.6667C2 13.403 2.59695 14 3.33333 14H12.6667C13.403 14 14 13.403 14 12.6667V3.33333C14 2.59695 13.403 2 12.6667 2Z\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6.00033 7.33268C6.73671 7.33268 7.33366 6.73573 7.33366 5.99935C7.33366 5.26297 6.73671 4.66602 6.00033 4.66602C5.26395 4.66602 4.66699 5.26297 4.66699 5.99935C4.66699 6.73573 5.26395 7.33268 6.00033 7.33268Z\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M14 10.0004L11.9427 7.94312C11.6926 7.69315 11.3536 7.55273 11 7.55273C10.6464 7.55273 10.3074 7.69315 10.0573 7.94312L4 14.0004\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      Screenshots & Visual Comparison\n    </div>\n    \n    <!-- Screenshot Comparison Grid -->\n    <div class=\"cqa-grid cqa-grid-cols-3 cqa-gap-3 cqa-mb-2\">\n      <!-- Baseline -->\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n        <div class=\"cqa-text-[11px] cqa-leading-[100%] cqa-text-[#737373]\">Baseline</div>\n        <div class=\"cqa-bg-[#F5F5F5] cqa-rounded-[10px] cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-flex cqa-items-center cqa-justify-center cqa-h-[112px] cqa-cursor-pointer\" (click)=\"onImageClick('baseline')\">\n          <div *ngIf=\"!screenshots?.baseline\">\n            <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M25.3333 4H6.66667C5.19391 4 4 5.19391 4 6.66667V25.3333C4 26.8061 5.19391 28 6.66667 28H25.3333C26.8061 28 28 26.8061 28 25.3333V6.66667C28 5.19391 26.8061 4 25.3333 4Z\" stroke=\"#737373\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11.9997 14.6673C13.4724 14.6673 14.6663 13.4734 14.6663 12.0007C14.6663 10.5279 13.4724 9.33398 11.9997 9.33398C10.5269 9.33398 9.33301 10.5279 9.33301 12.0007C9.33301 13.4734 10.5269 14.6673 11.9997 14.6673Z\" stroke=\"#737373\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M28 20.0009L23.8853 15.8862C23.3853 15.3863 22.7071 15.1055 22 15.1055C21.2929 15.1055 20.6147 15.3863 20.1147 15.8862L8 28.0009\" stroke=\"#737373\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n          </div>\n          <img #baselineImage *ngIf=\"baselineImageUrl\" [src]=\"baselineImageUrl\" alt=\"Baseline\" class=\"cqa-w-full cqa-h-full cqa-object-cover cqa-rounded-lg\" />\n        </div>\n      </div>\n\n      <!-- Current -->\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n        <div class=\"cqa-text-[11px] cqa-leading-[100%] cqa-text-[#737373]\">Current</div>\n        <div class=\"cqa-bg-[#FEF2F3] cqa-rounded-[10px] cqa-border cqa-border-solid cqa-border-[#F9C2C5] cqa-flex cqa-items-center cqa-justify-center cqa-h-[112px] cqa-cursor-pointer\" (click)=\"onImageClick('current')\">\n          <div *ngIf=\"!screenshots?.current\" class=\"cqa-flex cqa-flex-col cqa-items-center cqa-gap-2 cqa-text-[#EF4444]\">\n            <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M25.3333 4H6.66667C5.19391 4 4 5.19391 4 6.66667V25.3333C4 26.8061 5.19391 28 6.66667 28H25.3333C26.8061 28 28 26.8061 28 25.3333V6.66667C28 5.19391 26.8061 4 25.3333 4Z\" stroke=\"#E7000B\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11.9997 14.6673C13.4724 14.6673 14.6663 13.4734 14.6663 12.0007C14.6663 10.5279 13.4724 9.33398 11.9997 9.33398C10.5269 9.33398 9.33301 10.5279 9.33301 12.0007C9.33301 13.4734 10.5269 14.6673 11.9997 14.6673Z\" stroke=\"#E7000B\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M28 20.0009L23.8853 15.8862C23.3853 15.3863 22.7071 15.1055 22 15.1055C21.2929 15.1055 20.6147 15.3863 20.1147 15.8862L8 28.0009\" stroke=\"#E7000B\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n          </div>\n          <img *ngIf=\"screenshots?.current\" [src]=\"screenshots.current\" alt=\"Current\" class=\"cqa-w-full cqa-h-full cqa-object-cover cqa-rounded-lg\" />\n        </div>\n      </div>\n\n      <!-- Difference -->\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n        <div class=\"cqa-text-[11px] cqa-leading-[100%] cqa-text-[#737373]\">Difference</div>\n        <div class=\"cqa-bg-[#FEF2F3] cqa-rounded-[10px] cqa-border cqa-border-solid cqa-border-[#F9C2C5] cqa-flex cqa-items-center cqa-justify-center cqa-h-[112px] cqa-cursor-pointer\" (click)=\"onImageClick('difference')\">\n          <div *ngIf=\"!screenshots?.difference\" class=\"cqa-flex cqa-flex-col cqa-items-center cqa-gap-2 cqa-text-[#EF4444]\">\n            <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M25.3333 4H6.66667C5.19391 4 4 5.19391 4 6.66667V25.3333C4 26.8061 5.19391 28 6.66667 28H25.3333C26.8061 28 28 26.8061 28 25.3333V6.66667C28 5.19391 26.8061 4 25.3333 4Z\" stroke=\"#E7000B\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11.9997 14.6673C13.4724 14.6673 14.6663 13.4734 14.6663 12.0007C14.6663 10.5279 13.4724 9.33398 11.9997 9.33398C10.5269 9.33398 9.33301 10.5279 9.33301 12.0007C9.33301 13.4734 10.5269 14.6673 11.9997 14.6673Z\" stroke=\"#E7000B\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M28 20.0009L23.8853 15.8862C23.3853 15.3863 22.7071 15.1055 22 15.1055C21.2929 15.1055 20.6147 15.3863 20.1147 15.8862L8 28.0009\" stroke=\"#E7000B\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n          </div>\n          <img *ngIf=\"screenshots?.difference\" [src]=\"screenshots.difference\" alt=\"Difference\" class=\"cqa-w-full cqa-h-full cqa-object-cover cqa-rounded-lg\" />\n        </div>\n      </div>\n    </div>\n\n    <!-- Action Buttons -->\n    <div class=\"cqa-flex cqa-items-center cqa-justify-end cqa-gap-2 cqa-flex-wrap\">\n      <button \n        (click)=\"onMakeCurrentBaseline()\"\n        [disabled]=\"!isCurrentImageAvailable || isMakingCurrentBaseline?.[testStepResultId] === true\"\n        [class.cqa-opacity-50]=\"!isCurrentImageAvailable || isMakingCurrentBaseline?.[testStepResultId] === true\"\n        [class.cqa-cursor-not-allowed]=\"!isCurrentImageAvailable || isMakingCurrentBaseline?.[testStepResultId] === true\"\n        class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-pl-2 cqa-pr-4 cqa-py-[2px] cqa-rounded-lg cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-transparent cqa-text-[#212122] cqa-border cqa-border-solid cqa-border-[#212122] disabled:cqa-cursor-not-allowed\">\n        <svg *ngIf=\"!isMakingCurrentBaseline?.[testStepResultId]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M4.39754 7.93752L2.31254 5.85252L1.60254 6.55752L4.39754 9.35252L10.3975 3.35252L9.69254 2.64752L4.39754 7.93752Z\" fill=\"black\"/></svg>\n        <svg *ngIf=\"isMakingCurrentBaseline?.[testStepResultId] === true\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-dasharray=\"8 4\" opacity=\"0.3\"/>\n          <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-dasharray=\"8 4\" stroke-dashoffset=\"2\">\n            <animateTransform attributeName=\"transform\" type=\"rotate\" values=\"0 6 6;360 6 6\" dur=\"1s\" repeatCount=\"indefinite\"/>\n          </circle>\n        </svg>\n        <span>{{ isMakingCurrentBaseline?.[testStepResultId] === true ? 'Loading...' : 'Make current baseline' }}</span>\n      </button>\n      <button \n        (click)=\"onUploadBaseline()\"\n        [disabled]=\"isUploadingBaseline?.[testStepResultId] === true\"\n        [class.cqa-opacity-50]=\"isUploadingBaseline?.[testStepResultId] === true\"\n        [class.cqa-cursor-not-allowed]=\"isUploadingBaseline?.[testStepResultId] === true\"\n        class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-pl-2 cqa-pr-4 cqa-py-[2px] cqa-rounded-lg cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-transparent cqa-text-[#212122] cqa-border cqa-border-solid cqa-border-[#212122] disabled:cqa-cursor-not-allowed\">\n        <svg *ngIf=\"!isUploadingBaseline?.[testStepResultId]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M9 7.5V9H3V7.5H2V9C2 9.55 2.45 10 3 10H9C9.55 10 10 9.55 10 9V7.5H9ZM3.5 4.5L4.205 5.205L5.5 3.915V8H6.5V3.915L7.795 5.205L8.5 4.5L6 2L3.5 4.5Z\" fill=\"black\"/></svg>\n        <svg *ngIf=\"isUploadingBaseline?.[testStepResultId] === true\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" style=\"animation: spin 1s linear infinite;\">\n          <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-dasharray=\"8 4\" opacity=\"0.3\"/>\n          <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-dasharray=\"8 4\" stroke-dashoffset=\"2\"/>\n        </svg>\n        <span>{{ isUploadingBaseline?.[testStepResultId] === true ? 'Uploading...' : 'Upload baseline' }}</span>\n      </button>\n      <!-- Hidden file input -->\n      <input \n        #fileInput\n        type=\"file\" \n        accept=\"image/png,image/jpeg,image/jpg,image/webp\"\n        (change)=\"onFileSelected($event)\"\n        style=\"display: none;\" \n      />\n      <!-- <button \n        (click)=\"onAnalyze()\"\n        class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-pl-2 cqa-pr-4 cqa-py-[2px] cqa-rounded-lg cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-transparent cqa-text-[#212122] cqa-border cqa-border-solid cqa-border-[#212122]\">\n        <svg width=\"11\" height=\"12\" viewBox=\"0 0 11 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.5115 0C5.57931 0.0303178 5.60828 0.104354 5.63604 0.173128C5.64996 0.2132 5.66273 0.253489 5.67513 0.2941C5.67998 0.309662 5.68484 0.325224 5.68984 0.341258C5.7543 0.550673 5.81172 0.762331 5.86946 0.97384C5.88251 1.02159 5.89563 1.06932 5.90874 1.11704C5.97551 1.36005 6.04177 1.6032 6.10767 1.84646C6.11693 1.88062 6.12619 1.91479 6.13545 1.94895C6.16156 2.04527 6.18764 2.14159 6.21357 2.23796C6.26837 2.44159 6.32467 2.64463 6.38463 2.84668C6.38986 2.86435 6.3951 2.88203 6.4005 2.90024C6.55624 3.42 6.77701 3.88583 7.13888 4.28262C7.14784 4.29294 7.1568 4.30325 7.16603 4.31388C7.3205 4.48583 7.51873 4.62361 7.71687 4.73481C7.72696 4.74057 7.73705 4.74632 7.74745 4.75225C8.33051 5.079 9.03162 5.22272 9.66313 5.414C9.93984 5.49787 10.2157 5.58438 10.4905 5.6747C10.5099 5.68105 10.5292 5.68738 10.5485 5.6937C10.6062 5.7126 10.6639 5.73182 10.7215 5.7513C10.7349 5.75572 10.7483 5.76015 10.7621 5.76471C10.8415 5.79208 10.9174 5.82439 10.9825 5.88036C11.0023 5.92558 11.0023 5.92558 10.9969 5.9708C10.9336 6.03648 10.8707 6.06728 10.7871 6.09733C10.7751 6.10176 10.7632 6.1062 10.7508 6.11077C10.6096 6.16244 10.4665 6.20766 10.3232 6.25247C10.2938 6.26174 10.2644 6.27101 10.235 6.28028C10.0537 6.33735 9.87199 6.3932 9.69014 6.44842C9.45061 6.52117 9.21143 6.59512 8.97249 6.66991C8.93334 6.68216 8.89418 6.69437 8.85501 6.70654C8.64931 6.77048 8.44462 6.83671 8.24162 6.90944C8.22478 6.91545 8.20794 6.92147 8.19059 6.92766C7.51069 7.17443 6.99245 7.63478 6.66809 8.30799C6.49321 8.68634 6.39006 9.09548 6.28483 9.49929C6.25637 9.60825 6.22611 9.7166 6.1955 9.82492C6.17149 9.91015 6.14803 9.99551 6.12515 10.0811C6.12243 10.0913 6.1197 10.1014 6.1169 10.1119C6.1037 10.1612 6.09056 10.2106 6.07752 10.2599C6.04413 10.3851 6.00817 10.5092 5.97123 10.6332C5.90567 10.8536 5.84601 11.0757 5.78672 11.298C5.69732 11.6328 5.69732 11.6328 5.64662 11.7937C5.64326 11.8045 5.6399 11.8153 5.63644 11.8264C5.61793 11.8837 5.5989 11.9364 5.56388 11.9849C5.5106 11.9972 5.5106 11.9972 5.46273 12C5.40801 11.9168 5.37177 11.8361 5.34273 11.7401C5.33851 11.7265 5.33428 11.7129 5.32993 11.6989C5.27614 11.5233 5.22807 11.3459 5.17999 11.1686C5.16898 11.1281 5.15791 11.0875 5.14685 11.047C5.0644 10.7448 4.98331 10.4423 4.90234 10.1397C4.56509 8.64299 4.56509 8.64299 3.71433 7.43288C3.7007 7.42128 3.68706 7.40968 3.67302 7.39773C3.1156 6.93203 2.3813 6.75959 1.70885 6.55751C1.54254 6.50749 1.37628 6.45724 1.21004 6.40697C1.1955 6.40258 1.1955 6.40258 1.18067 6.39809C0.940881 6.32556 0.701157 6.25283 0.462274 6.17711C0.452168 6.17393 0.442063 6.17075 0.431651 6.16747C0.0646543 6.05178 0.0646543 6.05178 0.000790211 5.9708C-0.00101599 5.93406 -0.00101599 5.93406 0.0152398 5.89543C0.0819909 5.8272 0.14676 5.79797 0.234862 5.76825C0.247618 5.76378 0.260375 5.75931 0.273518 5.75471C0.312587 5.7411 0.351741 5.72779 0.390929 5.71455C0.402112 5.71073 0.413295 5.7069 0.424817 5.70296C0.503904 5.6759 0.583275 5.64986 0.662762 5.62412C0.682294 5.61777 0.682294 5.61777 0.70222 5.61129C1.04166 5.50116 1.38332 5.39867 1.72487 5.29595C1.97939 5.21939 2.23347 5.14157 2.48674 5.06065C2.49838 5.05694 2.51001 5.05324 2.52201 5.04943C3.10872 4.86262 3.68229 4.59755 4.06112 4.0716C4.06679 4.0638 4.07247 4.05599 4.07831 4.04796C4.50019 3.4642 4.6647 2.7543 4.8485 2.06161C4.90896 1.83379 4.97015 1.60619 5.03155 1.37865C5.04856 1.31564 5.06553 1.25263 5.08244 1.18959C5.15037 0.936385 5.21932 0.683523 5.29222 0.431818C5.29904 0.408248 5.30583 0.384667 5.31259 0.361076C5.41466 0.00531681 5.41466 0.00531681 5.5115 0Z\" fill=\"#161617\"/><path d=\"M8.84391 0.740443C8.91024 0.818762 8.92349 0.910806 8.94415 1.01081C9.01305 1.32499 9.09241 1.61388 9.36787 1.79638C9.53782 1.89443 9.74037 1.93904 9.92867 1.98118C10.0082 1.99933 10.0753 2.02341 10.1435 2.07158C10.1588 2.09701 10.1588 2.09701 10.1579 2.14129C10.1421 2.19513 10.1282 2.2125 10.0866 2.24774C10.041 2.26364 10.041 2.26364 9.98633 2.27601C9.96564 2.28096 9.94496 2.28597 9.9243 2.29102C9.91322 2.2937 9.90215 2.29638 9.89075 2.29914C9.55401 2.38039 9.55401 2.38039 9.26295 2.56428C9.25348 2.57222 9.24402 2.58017 9.23427 2.58836C9.02625 2.7797 8.98226 3.098 8.91963 3.36464C8.91605 3.37928 8.91246 3.39393 8.90876 3.40901C8.90566 3.42198 8.90255 3.43494 8.89935 3.4483C8.88584 3.48788 8.87183 3.51369 8.84391 3.54402C8.76614 3.55432 8.76614 3.55432 8.72831 3.54402C8.66814 3.49537 8.65468 3.43996 8.63896 3.3655C8.63633 3.35397 8.63369 3.34244 8.63098 3.33056C8.62259 3.29374 8.61447 3.25686 8.60639 3.21995C8.54302 2.93259 8.47148 2.65064 8.21879 2.4822C8.02131 2.36732 7.78118 2.31298 7.56045 2.26911C7.49996 2.25597 7.4653 2.23944 7.42785 2.18745C7.41972 2.1347 7.41972 2.1347 7.42785 2.08194C7.48541 2.01979 7.54597 2.00462 7.62382 1.98585C7.64835 1.97952 7.67286 1.97314 7.69737 1.96671C7.71003 1.96342 7.72269 1.96012 7.73574 1.95673C7.80032 1.93939 7.86425 1.91995 7.92817 1.90012C7.93978 1.89661 7.95139 1.89309 7.96336 1.88947C8.09329 1.84895 8.20541 1.79712 8.30927 1.70512C8.31896 1.6968 8.32864 1.68848 8.33862 1.67992C8.50026 1.52817 8.55518 1.3002 8.60504 1.08748C8.60884 1.07133 8.61264 1.05518 8.61655 1.03854C8.62411 1.0061 8.63154 0.973622 8.63882 0.94111C8.64403 0.918489 8.64403 0.918489 8.64935 0.895412C8.65238 0.881899 8.65542 0.868385 8.65855 0.854462C8.67186 0.811441 8.68935 0.77766 8.71386 0.740443C8.76096 0.715878 8.79401 0.726983 8.84391 0.740443Z\" fill=\"#414146\"/><path d=\"M2.19446 8.32962C2.21166 8.32975 2.21166 8.32975 2.22919 8.32988C2.35253 8.3338 2.43597 8.37503 2.5268 8.46151C2.6325 8.58061 2.6813 8.71497 2.67852 8.87549C2.66666 9.00565 2.59307 9.11929 2.50282 9.20727C2.39658 9.29672 2.28941 9.32628 2.15366 9.32215C2.03919 9.30825 1.93151 9.25153 1.85038 9.16618C1.7495 9.02258 1.72 8.89087 1.73479 8.71398C1.76533 8.57472 1.85337 8.46167 1.96598 8.38238C2.04421 8.34101 2.10713 8.32886 2.19446 8.32962Z\" fill=\"#4C4C51\"/></svg>\n        Analyze\n      </button> -->\n    </div>\n  </div>\n\n  <!-- Right Panel: Logs -->\n  <div class=\"cqa-col-span-3 cqa-border cqa-border-solid cqa-border-[##E5E5E5] cqa-rounded-[10px] cqa-py-2 cqa-px-3 cqa-h-full cqa-max-h-[200px] cqa-overflow-auto\"\n    style=\"scrollbar-width: thin;\">\n    <div class=\"cqa-text-[12px] cqa-leading-[15px] cqa-font-medium cqa-text-[#0A0A0A] cqa-flex cqa-items-center cqa-gap-2 cqa-mb-2\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10.6666 12L14.6666 8L10.6666 4\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M5.33337 4L1.33337 8L5.33337 12\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      Logs\n    </div>\n    \n    <div class=\"cqa-flex cqa-flex-col cqa-gap-2 \">\n      <div class=\"cqa-text-[11px] cqa-leading-[100%] cqa-text-[#737373]\">Console</div>\n      \n      <div *ngFor=\"let log of logs\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-break-words\" [ngClass]=\"getLogClass(log.level)\">\n        {{ log.message }}\n      </div>\n      \n      <div *ngIf=\"!logs || logs.length === 0\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#9CA3AF] cqa-bg-[#f8f8f8] cqa-text-center\">\n        No logs available\n      </div>\n    </div>\n\n    <!-- <a \n      *ngIf=\"showFullLogsLink && logs?.length\"\n      (click)=\"onViewFullLogs()\"\n      class=\"cqa-text-[10px] cqa-leading-[15px] cqa-text-[#3F43EE] cqa-font-medium cqa-flex cqa-items-center cqa-justify-end cqa-gap-[2px] cqa-cursor-pointer hover:cqa-underline cqa-mt-4\">\n      View full logs Iterations\n      <div><svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03833 6.74335L2.62833 7.33335L5.96166 4.00002L2.62833 0.666687L2.03833 1.25669L4.78166 4.00002L2.03833 6.74335Z\" fill=\"#3F43EE\"/></svg></div>\n    </a> -->\n  </div>\n</div>\n\n<style>\n  @keyframes spin {\n    from { transform: rotate(0deg); }\n    to { transform: rotate(360deg); }\n  }\n</style>", styles: ["\n  @keyframes spin {\n    from { transform: rotate(0deg); }\n    to { transform: rotate(360deg); }\n  }\n"] }]
+            args: [{ selector: 'cqa-visual-comparison', host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-grid cqa-grid-cols-12 cqa-gap-x-4 cqa-w-full cqa-max-h-[200px] cqa-h-full cqa-overflow-hidden\">\n  <!-- Left Panel: Screenshots & Visual Comparison -->\n  <div class=\"cqa-col-span-9 cqa-border cqa-border-solid cqa-border-[##E5E5E5] cqa-rounded-[10px] cqa-pt-2 cqa-px-3 cqa-pb-1 cqa-h-full cqa-max-h-[200px] cqa-overflow-auto cqa-font-inter\"\n    style=\"scrollbar-width: thin;\">\n    <div class=\"cqa-text-[12px] cqa-leading-[15px] cqa-font-medium cqa-text-[#0A0A0A] cqa-flex cqa-items-center cqa-gap-2 cqa-mb-2\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M12.6667 2H3.33333C2.59695 2 2 2.59695 2 3.33333V12.6667C2 13.403 2.59695 14 3.33333 14H12.6667C13.403 14 14 13.403 14 12.6667V3.33333C14 2.59695 13.403 2 12.6667 2Z\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M6.00033 7.33268C6.73671 7.33268 7.33366 6.73573 7.33366 5.99935C7.33366 5.26297 6.73671 4.66602 6.00033 4.66602C5.26395 4.66602 4.66699 5.26297 4.66699 5.99935C4.66699 6.73573 5.26395 7.33268 6.00033 7.33268Z\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M14 10.0004L11.9427 7.94312C11.6926 7.69315 11.3536 7.55273 11 7.55273C10.6464 7.55273 10.3074 7.69315 10.0573 7.94312L4 14.0004\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      Screenshots & Visual Comparison\n    </div>\n    \n    <!-- Screenshot Comparison Grid -->\n    <div class=\"cqa-grid cqa-grid-cols-3 cqa-gap-3 cqa-mb-2\">\n      <!-- Baseline -->\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n        <div class=\"cqa-text-[11px] cqa-leading-[100%] cqa-text-[#737373]\">Baseline</div>\n        <div class=\"cqa-bg-[#F5F5F5] cqa-rounded-[10px] cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-flex cqa-items-center cqa-justify-center cqa-h-[112px] cqa-cursor-pointer\" (click)=\"onImageClick('baseline')\">\n          <div *ngIf=\"!screenshots?.baseline\">\n            <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M25.3333 4H6.66667C5.19391 4 4 5.19391 4 6.66667V25.3333C4 26.8061 5.19391 28 6.66667 28H25.3333C26.8061 28 28 26.8061 28 25.3333V6.66667C28 5.19391 26.8061 4 25.3333 4Z\" stroke=\"#737373\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11.9997 14.6673C13.4724 14.6673 14.6663 13.4734 14.6663 12.0007C14.6663 10.5279 13.4724 9.33398 11.9997 9.33398C10.5269 9.33398 9.33301 10.5279 9.33301 12.0007C9.33301 13.4734 10.5269 14.6673 11.9997 14.6673Z\" stroke=\"#737373\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M28 20.0009L23.8853 15.8862C23.3853 15.3863 22.7071 15.1055 22 15.1055C21.2929 15.1055 20.6147 15.3863 20.1147 15.8862L8 28.0009\" stroke=\"#737373\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n          </div>\n          <img #baselineImage *ngIf=\"baselineImageUrl\" [src]=\"baselineImageUrl\" alt=\"Baseline\" class=\"cqa-w-full cqa-h-full cqa-object-cover cqa-rounded-lg\" />\n        </div>\n      </div>\n\n      <!-- Current -->\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n        <div class=\"cqa-text-[11px] cqa-leading-[100%] cqa-text-[#737373]\">Current</div>\n        <div class=\"cqa-bg-[#FEF2F3] cqa-rounded-[10px] cqa-border cqa-border-solid cqa-border-[#F9C2C5] cqa-flex cqa-items-center cqa-justify-center cqa-h-[112px] cqa-cursor-pointer\" (click)=\"onImageClick('current')\">\n          <div *ngIf=\"!screenshots?.current\" class=\"cqa-flex cqa-flex-col cqa-items-center cqa-gap-2 cqa-text-[#EF4444]\">\n            <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M25.3333 4H6.66667C5.19391 4 4 5.19391 4 6.66667V25.3333C4 26.8061 5.19391 28 6.66667 28H25.3333C26.8061 28 28 26.8061 28 25.3333V6.66667C28 5.19391 26.8061 4 25.3333 4Z\" stroke=\"#E7000B\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11.9997 14.6673C13.4724 14.6673 14.6663 13.4734 14.6663 12.0007C14.6663 10.5279 13.4724 9.33398 11.9997 9.33398C10.5269 9.33398 9.33301 10.5279 9.33301 12.0007C9.33301 13.4734 10.5269 14.6673 11.9997 14.6673Z\" stroke=\"#E7000B\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M28 20.0009L23.8853 15.8862C23.3853 15.3863 22.7071 15.1055 22 15.1055C21.2929 15.1055 20.6147 15.3863 20.1147 15.8862L8 28.0009\" stroke=\"#E7000B\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n          </div>\n          <img *ngIf=\"screenshots?.current\" [src]=\"screenshots.current\" alt=\"Current\" class=\"cqa-w-full cqa-h-full cqa-object-cover cqa-rounded-lg\" />\n        </div>\n      </div>\n\n      <!-- Difference -->\n      <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n        <div class=\"cqa-text-[11px] cqa-leading-[100%] cqa-text-[#737373]\">Difference</div>\n        <div class=\"cqa-bg-[#FEF2F3] cqa-rounded-[10px] cqa-border cqa-border-solid cqa-border-[#F9C2C5] cqa-flex cqa-items-center cqa-justify-center cqa-h-[112px] cqa-cursor-pointer\" (click)=\"onImageClick('difference')\">\n          <div *ngIf=\"!screenshots?.difference\" class=\"cqa-flex cqa-flex-col cqa-items-center cqa-gap-2 cqa-text-[#EF4444]\">\n            <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M25.3333 4H6.66667C5.19391 4 4 5.19391 4 6.66667V25.3333C4 26.8061 5.19391 28 6.66667 28H25.3333C26.8061 28 28 26.8061 28 25.3333V6.66667C28 5.19391 26.8061 4 25.3333 4Z\" stroke=\"#E7000B\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11.9997 14.6673C13.4724 14.6673 14.6663 13.4734 14.6663 12.0007C14.6663 10.5279 13.4724 9.33398 11.9997 9.33398C10.5269 9.33398 9.33301 10.5279 9.33301 12.0007C9.33301 13.4734 10.5269 14.6673 11.9997 14.6673Z\" stroke=\"#E7000B\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M28 20.0009L23.8853 15.8862C23.3853 15.3863 22.7071 15.1055 22 15.1055C21.2929 15.1055 20.6147 15.3863 20.1147 15.8862L8 28.0009\" stroke=\"#E7000B\" stroke-opacity=\"0.5\" stroke-width=\"2.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n          </div>\n          <img *ngIf=\"screenshots?.difference\" [src]=\"screenshots.difference\" alt=\"Difference\" class=\"cqa-w-full cqa-h-full cqa-object-cover cqa-rounded-lg\" />\n        </div>\n      </div>\n    </div>\n\n    <!-- Action Buttons -->\n    <div class=\"cqa-flex cqa-items-center cqa-justify-end cqa-gap-2 cqa-flex-wrap\">\n      <button \n        (click)=\"onMakeCurrentBaseline()\"\n        [disabled]=\"!isCurrentImageAvailable || isMakingCurrentBaseline?.[testStepResultId] === true\"\n        [class.cqa-opacity-50]=\"!isCurrentImageAvailable || isMakingCurrentBaseline?.[testStepResultId] === true\"\n        [class.cqa-cursor-not-allowed]=\"!isCurrentImageAvailable || isMakingCurrentBaseline?.[testStepResultId] === true\"\n        class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-pl-2 cqa-pr-4 cqa-py-[2px] cqa-rounded-lg cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-transparent cqa-text-[#212122] cqa-border cqa-border-solid cqa-border-[#212122] disabled:cqa-cursor-not-allowed\">\n        <svg *ngIf=\"!isMakingCurrentBaseline?.[testStepResultId]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M4.39754 7.93752L2.31254 5.85252L1.60254 6.55752L4.39754 9.35252L10.3975 3.35252L9.69254 2.64752L4.39754 7.93752Z\" fill=\"black\"/></svg>\n        <svg *ngIf=\"isMakingCurrentBaseline?.[testStepResultId] === true\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-dasharray=\"8 4\" opacity=\"0.3\"/>\n          <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-dasharray=\"8 4\" stroke-dashoffset=\"2\">\n            <animateTransform attributeName=\"transform\" type=\"rotate\" values=\"0 6 6;360 6 6\" dur=\"1s\" repeatCount=\"indefinite\"/>\n          </circle>\n        </svg>\n        <span>{{ isMakingCurrentBaseline?.[testStepResultId] === true ? 'Loading...' : 'Make current baseline' }}</span>\n      </button>\n      <button \n        (click)=\"onUploadBaseline()\"\n        [disabled]=\"isUploadingBaseline?.[testStepResultId] === true\"\n        [class.cqa-opacity-50]=\"isUploadingBaseline?.[testStepResultId] === true\"\n        [class.cqa-cursor-not-allowed]=\"isUploadingBaseline?.[testStepResultId] === true\"\n        class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-pl-2 cqa-pr-4 cqa-py-[2px] cqa-rounded-lg cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-transparent cqa-text-[#212122] cqa-border cqa-border-solid cqa-border-[#212122] disabled:cqa-cursor-not-allowed\">\n        <svg *ngIf=\"!isUploadingBaseline?.[testStepResultId]\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M9 7.5V9H3V7.5H2V9C2 9.55 2.45 10 3 10H9C9.55 10 10 9.55 10 9V7.5H9ZM3.5 4.5L4.205 5.205L5.5 3.915V8H6.5V3.915L7.795 5.205L8.5 4.5L6 2L3.5 4.5Z\" fill=\"black\"/></svg>\n        <svg *ngIf=\"isUploadingBaseline?.[testStepResultId] === true\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" style=\"animation: spin 1s linear infinite;\">\n          <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-dasharray=\"8 4\" opacity=\"0.3\"/>\n          <circle cx=\"6\" cy=\"6\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-dasharray=\"8 4\" stroke-dashoffset=\"2\"/>\n        </svg>\n        <span>{{ isUploadingBaseline?.[testStepResultId] === true ? 'Uploading...' : 'Upload baseline' }}</span>\n      </button>\n      <!-- Hidden file input -->\n      <input \n        #fileInput\n        type=\"file\" \n        accept=\"image/png,image/jpeg,image/jpg,image/webp\"\n        (change)=\"onFileSelected($event)\"\n        style=\"display: none;\" \n      />\n      <!-- <button \n        (click)=\"onAnalyze()\"\n        class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-pl-2 cqa-pr-4 cqa-py-[2px] cqa-rounded-lg cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-transparent cqa-text-[#212122] cqa-border cqa-border-solid cqa-border-[#212122]\">\n        <svg width=\"11\" height=\"12\" viewBox=\"0 0 11 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.5115 0C5.57931 0.0303178 5.60828 0.104354 5.63604 0.173128C5.64996 0.2132 5.66273 0.253489 5.67513 0.2941C5.67998 0.309662 5.68484 0.325224 5.68984 0.341258C5.7543 0.550673 5.81172 0.762331 5.86946 0.97384C5.88251 1.02159 5.89563 1.06932 5.90874 1.11704C5.97551 1.36005 6.04177 1.6032 6.10767 1.84646C6.11693 1.88062 6.12619 1.91479 6.13545 1.94895C6.16156 2.04527 6.18764 2.14159 6.21357 2.23796C6.26837 2.44159 6.32467 2.64463 6.38463 2.84668C6.38986 2.86435 6.3951 2.88203 6.4005 2.90024C6.55624 3.42 6.77701 3.88583 7.13888 4.28262C7.14784 4.29294 7.1568 4.30325 7.16603 4.31388C7.3205 4.48583 7.51873 4.62361 7.71687 4.73481C7.72696 4.74057 7.73705 4.74632 7.74745 4.75225C8.33051 5.079 9.03162 5.22272 9.66313 5.414C9.93984 5.49787 10.2157 5.58438 10.4905 5.6747C10.5099 5.68105 10.5292 5.68738 10.5485 5.6937C10.6062 5.7126 10.6639 5.73182 10.7215 5.7513C10.7349 5.75572 10.7483 5.76015 10.7621 5.76471C10.8415 5.79208 10.9174 5.82439 10.9825 5.88036C11.0023 5.92558 11.0023 5.92558 10.9969 5.9708C10.9336 6.03648 10.8707 6.06728 10.7871 6.09733C10.7751 6.10176 10.7632 6.1062 10.7508 6.11077C10.6096 6.16244 10.4665 6.20766 10.3232 6.25247C10.2938 6.26174 10.2644 6.27101 10.235 6.28028C10.0537 6.33735 9.87199 6.3932 9.69014 6.44842C9.45061 6.52117 9.21143 6.59512 8.97249 6.66991C8.93334 6.68216 8.89418 6.69437 8.85501 6.70654C8.64931 6.77048 8.44462 6.83671 8.24162 6.90944C8.22478 6.91545 8.20794 6.92147 8.19059 6.92766C7.51069 7.17443 6.99245 7.63478 6.66809 8.30799C6.49321 8.68634 6.39006 9.09548 6.28483 9.49929C6.25637 9.60825 6.22611 9.7166 6.1955 9.82492C6.17149 9.91015 6.14803 9.99551 6.12515 10.0811C6.12243 10.0913 6.1197 10.1014 6.1169 10.1119C6.1037 10.1612 6.09056 10.2106 6.07752 10.2599C6.04413 10.3851 6.00817 10.5092 5.97123 10.6332C5.90567 10.8536 5.84601 11.0757 5.78672 11.298C5.69732 11.6328 5.69732 11.6328 5.64662 11.7937C5.64326 11.8045 5.6399 11.8153 5.63644 11.8264C5.61793 11.8837 5.5989 11.9364 5.56388 11.9849C5.5106 11.9972 5.5106 11.9972 5.46273 12C5.40801 11.9168 5.37177 11.8361 5.34273 11.7401C5.33851 11.7265 5.33428 11.7129 5.32993 11.6989C5.27614 11.5233 5.22807 11.3459 5.17999 11.1686C5.16898 11.1281 5.15791 11.0875 5.14685 11.047C5.0644 10.7448 4.98331 10.4423 4.90234 10.1397C4.56509 8.64299 4.56509 8.64299 3.71433 7.43288C3.7007 7.42128 3.68706 7.40968 3.67302 7.39773C3.1156 6.93203 2.3813 6.75959 1.70885 6.55751C1.54254 6.50749 1.37628 6.45724 1.21004 6.40697C1.1955 6.40258 1.1955 6.40258 1.18067 6.39809C0.940881 6.32556 0.701157 6.25283 0.462274 6.17711C0.452168 6.17393 0.442063 6.17075 0.431651 6.16747C0.0646543 6.05178 0.0646543 6.05178 0.000790211 5.9708C-0.00101599 5.93406 -0.00101599 5.93406 0.0152398 5.89543C0.0819909 5.8272 0.14676 5.79797 0.234862 5.76825C0.247618 5.76378 0.260375 5.75931 0.273518 5.75471C0.312587 5.7411 0.351741 5.72779 0.390929 5.71455C0.402112 5.71073 0.413295 5.7069 0.424817 5.70296C0.503904 5.6759 0.583275 5.64986 0.662762 5.62412C0.682294 5.61777 0.682294 5.61777 0.70222 5.61129C1.04166 5.50116 1.38332 5.39867 1.72487 5.29595C1.97939 5.21939 2.23347 5.14157 2.48674 5.06065C2.49838 5.05694 2.51001 5.05324 2.52201 5.04943C3.10872 4.86262 3.68229 4.59755 4.06112 4.0716C4.06679 4.0638 4.07247 4.05599 4.07831 4.04796C4.50019 3.4642 4.6647 2.7543 4.8485 2.06161C4.90896 1.83379 4.97015 1.60619 5.03155 1.37865C5.04856 1.31564 5.06553 1.25263 5.08244 1.18959C5.15037 0.936385 5.21932 0.683523 5.29222 0.431818C5.29904 0.408248 5.30583 0.384667 5.31259 0.361076C5.41466 0.00531681 5.41466 0.00531681 5.5115 0Z\" fill=\"#161617\"/><path d=\"M8.84391 0.740443C8.91024 0.818762 8.92349 0.910806 8.94415 1.01081C9.01305 1.32499 9.09241 1.61388 9.36787 1.79638C9.53782 1.89443 9.74037 1.93904 9.92867 1.98118C10.0082 1.99933 10.0753 2.02341 10.1435 2.07158C10.1588 2.09701 10.1588 2.09701 10.1579 2.14129C10.1421 2.19513 10.1282 2.2125 10.0866 2.24774C10.041 2.26364 10.041 2.26364 9.98633 2.27601C9.96564 2.28096 9.94496 2.28597 9.9243 2.29102C9.91322 2.2937 9.90215 2.29638 9.89075 2.29914C9.55401 2.38039 9.55401 2.38039 9.26295 2.56428C9.25348 2.57222 9.24402 2.58017 9.23427 2.58836C9.02625 2.7797 8.98226 3.098 8.91963 3.36464C8.91605 3.37928 8.91246 3.39393 8.90876 3.40901C8.90566 3.42198 8.90255 3.43494 8.89935 3.4483C8.88584 3.48788 8.87183 3.51369 8.84391 3.54402C8.76614 3.55432 8.76614 3.55432 8.72831 3.54402C8.66814 3.49537 8.65468 3.43996 8.63896 3.3655C8.63633 3.35397 8.63369 3.34244 8.63098 3.33056C8.62259 3.29374 8.61447 3.25686 8.60639 3.21995C8.54302 2.93259 8.47148 2.65064 8.21879 2.4822C8.02131 2.36732 7.78118 2.31298 7.56045 2.26911C7.49996 2.25597 7.4653 2.23944 7.42785 2.18745C7.41972 2.1347 7.41972 2.1347 7.42785 2.08194C7.48541 2.01979 7.54597 2.00462 7.62382 1.98585C7.64835 1.97952 7.67286 1.97314 7.69737 1.96671C7.71003 1.96342 7.72269 1.96012 7.73574 1.95673C7.80032 1.93939 7.86425 1.91995 7.92817 1.90012C7.93978 1.89661 7.95139 1.89309 7.96336 1.88947C8.09329 1.84895 8.20541 1.79712 8.30927 1.70512C8.31896 1.6968 8.32864 1.68848 8.33862 1.67992C8.50026 1.52817 8.55518 1.3002 8.60504 1.08748C8.60884 1.07133 8.61264 1.05518 8.61655 1.03854C8.62411 1.0061 8.63154 0.973622 8.63882 0.94111C8.64403 0.918489 8.64403 0.918489 8.64935 0.895412C8.65238 0.881899 8.65542 0.868385 8.65855 0.854462C8.67186 0.811441 8.68935 0.77766 8.71386 0.740443C8.76096 0.715878 8.79401 0.726983 8.84391 0.740443Z\" fill=\"#414146\"/><path d=\"M2.19446 8.32962C2.21166 8.32975 2.21166 8.32975 2.22919 8.32988C2.35253 8.3338 2.43597 8.37503 2.5268 8.46151C2.6325 8.58061 2.6813 8.71497 2.67852 8.87549C2.66666 9.00565 2.59307 9.11929 2.50282 9.20727C2.39658 9.29672 2.28941 9.32628 2.15366 9.32215C2.03919 9.30825 1.93151 9.25153 1.85038 9.16618C1.7495 9.02258 1.72 8.89087 1.73479 8.71398C1.76533 8.57472 1.85337 8.46167 1.96598 8.38238C2.04421 8.34101 2.10713 8.32886 2.19446 8.32962Z\" fill=\"#4C4C51\"/></svg>\n        Analyze\n      </button> -->\n    </div>\n  </div>\n\n  <!-- Right Panel: Logs -->\n  <div class=\"cqa-col-span-3 cqa-border cqa-border-solid cqa-border-[##E5E5E5] cqa-rounded-[10px] cqa-py-2 cqa-px-3 cqa-h-full cqa-max-h-[200px] cqa-overflow-auto\"\n    style=\"scrollbar-width: thin;\">\n    <div class=\"cqa-text-[12px] cqa-leading-[15px] cqa-font-medium cqa-text-[#0A0A0A] cqa-flex cqa-items-center cqa-gap-2 cqa-mb-2\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10.6666 12L14.6666 8L10.6666 4\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M5.33337 4L1.33337 8L5.33337 12\" stroke=\"#0A0A0A\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      Logs\n    </div>\n    \n    <div class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-flex-1 cqa-min-h-0 cqa-h-[calc(100%-24px)]\">\n      <div class=\"cqa-text-[11px] cqa-leading-[100%] cqa-text-[#737373] cqa-shrink-0\">Console</div>\n      \n      <div *ngIf=\"!logs || logs.length === 0\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-text-[#9CA3AF] cqa-bg-[#f8f8f8] cqa-text-center\">\n        No logs available\n      </div>\n      \n      <cdk-virtual-scroll-viewport\n        *ngIf=\"logs?.length\"\n        itemSize=\"28\"\n        minBufferPx=\"200\"\n        maxBufferPx=\"300\"\n        class=\"cqa-h-full cqa-w-full cqa-overflow-x-hidden\" style=\"scrollbar-width: thin;\">\n        <div *cdkVirtualFor=\"let log of logs; trackBy: trackByLogIndex\" \n          class=\"cqa-px-2 cqa-py-[2px] cqa-rounded cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-break-words cqa-overflow-hidden\" \n          [ngClass]=\"getLogClass(log.level)\">\n          {{ log.message }}\n        </div>\n      </cdk-virtual-scroll-viewport>\n    </div>\n\n    <!-- <a \n      *ngIf=\"showFullLogsLink && logs?.length\"\n      (click)=\"onViewFullLogs()\"\n      class=\"cqa-text-[10px] cqa-leading-[15px] cqa-text-[#3F43EE] cqa-font-medium cqa-flex cqa-items-center cqa-justify-end cqa-gap-[2px] cqa-cursor-pointer hover:cqa-underline cqa-mt-4\">\n      View full logs Iterations\n      <div><svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03833 6.74335L2.62833 7.33335L5.96166 4.00002L2.62833 0.666687L2.03833 1.25669L4.78166 4.00002L2.03833 6.74335Z\" fill=\"#3F43EE\"/></svg></div>\n    </a> -->\n  </div>\n</div>\n\n<style>\n  @keyframes spin {\n    from { transform: rotate(0deg); }\n    to { transform: rotate(360deg); }\n  }\n</style>", styles: ["\n  @keyframes spin {\n    from { transform: rotate(0deg); }\n    to { transform: rotate(360deg); }\n  }\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$4.MatDialog }]; }, propDecorators: { screenshots: [{
                 type: Input
             }], logs: [{
@@ -12933,6 +12938,7 @@ class MainStepCollapseComponent {
     constructor() {
         this.title = 'Prerequisites';
         this.expanded = true;
+        this.countLoading = false;
         /** When true, "View steps" redirects to URL instead of expanding inline. URL comes from item.viewStepsUrl or getViewStepsUrl(item). */
         this.viewStepsAsRedirect = false;
         /** When redirecting, open link in new tab. Default true */
@@ -13069,10 +13075,10 @@ class MainStepCollapseComponent {
     }
 }
 MainStepCollapseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: MainStepCollapseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-MainStepCollapseComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: MainStepCollapseComponent, selector: "cqa-main-step-collapse", inputs: { title: "title", items: "items", expanded: "expanded", icon: "icon", count: "count", itemContentTemplate: "itemContentTemplate", headerButtons: "headerButtons", viewStepsAsRedirect: "viewStepsAsRedirect", getViewStepsUrl: "getViewStepsUrl", viewStepsOpenInNewTab: "viewStepsOpenInNewTab", initialExpandedItemId: "initialExpandedItemId", isDebug: "isDebug", addStepMenuOptions: "addStepMenuOptions", stepMoreMenuOptions: "stepMoreMenuOptions" }, outputs: { viewSteps: "viewSteps", editStep: "editStep", addStepOptionSelect: "addStepOptionSelect", stepMoreOptionSelect: "stepMoreOptionSelect", headerButtonClick: "headerButtonClick", expandedChange: "expandedChange" }, host: { classAttribute: "cqa-ui-root" }, queries: [{ propertyName: "itemContentTpl", first: true, predicate: ["itemContent"], descendants: true, read: TemplateRef }], usesOnChanges: true, ngImport: i0, template: "<!-- Header -->\n<div\n  class=\"cqa-mt-2 cqa-flex cqa-items-center cqa-justify-between cqa-gap-3 cqa-px-3 cqa-py-2 cqa-cursor-pointer cqa-bg-[#EEF2FF] cqa-rounded-[4px] cqa-border cqa-border-[#C6D2FF] cqa-border-solid\"\n  (click)=\"toggle()\">\n  <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-w-full\">\n    <!-- Chevron Icon (Left) -->\n    <!-- <svg [class.cqa-rotate-180]=\"isExpanded\" class=\"cqa-transition-transform\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path d=\"M4 6L8 10L12 6\" stroke=\"#3F51B5\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg> -->\n    <div><svg [class.cqa-rotate-180]=\"isExpanded\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M4 6L8 10L12 6\" stroke=\"#4F39F6\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n          stroke-linejoin=\"round\" />\n      </svg></div>\n\n    <!-- Chain-Link Icon (if configured, otherwise default) -->\n    <!-- <div *ngIf=\"icon && icon.type === 'folder'\">\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <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=\"#3F51B5\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  </div>\n  <div *ngIf=\"icon && icon.type === 'loop'\">\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <rect width=\"16\" height=\"16\" rx=\"4\" fill=\"#EBECFD\"/>\n      <path d=\"M9.66663 4.66666L11 5.99999L9.66663 7.33332\" stroke=\"#3F51B5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      <path d=\"M5 7.66667V7.33333C5 6.97971 5.14048 6.64057 5.39052 6.39052C5.64057 6.14048 5.97971 6 6.33333 6H11\" stroke=\"#3F51B5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      <path d=\"M6.33333 11.3333L5 9.99999L6.33333 8.66666\" stroke=\"#3F51B5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      <path d=\"M11 8.33334V8.66668C11 9.0203 10.8595 9.35944 10.6095 9.60949C10.3594 9.85953 10.0203 10 9.66667 10H5\" stroke=\"#3F51B5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  </div> -->\n    <!-- Bar Icon (Bulleted List) -->\n    <div *ngIf=\"icon && icon.type === 'bar'\">\n      <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <!-- First bullet and line -->\n        <circle cx=\"3\" cy=\"5\" r=\"2\" fill=\"#4F39F6\"/>\n        <line x1=\"7\" y1=\"5\" x2=\"17\" y2=\"5\" stroke=\"#4F39F6\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n        <!-- Second bullet and line -->\n        <circle cx=\"3\" cy=\"10\" r=\"2\" fill=\"#4F39F6\"/>\n        <line x1=\"7\" y1=\"10\" x2=\"17\" y2=\"10\" stroke=\"#4F39F6\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n        <!-- Third bullet and line -->\n        <circle cx=\"3\" cy=\"15\" r=\"2\" fill=\"#4F39F6\"/>\n        <line x1=\"7\" y1=\"15\" x2=\"17\" y2=\"15\" stroke=\"#4F39F6\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n      </svg>\n    </div>\n\n    <!-- Default Chain-Link Icon (when no icon or icon type is not specified) -->\n    <div *ngIf=\"!icon || (icon.type !== 'bar' && icon.type !== 'folder' && icon.type !== 'loop' && icon.type !== 'custom')\">\n      <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path\n          d=\"M7.50033 14.1663H5.83366C4.72859 14.1663 3.66878 13.7274 2.88738 12.946C2.10598 12.1646 1.66699 11.1047 1.66699 9.99967C1.66699 8.89461 2.10598 7.8348 2.88738 7.0534C3.66878 6.27199 4.72859 5.83301 5.83366 5.83301H7.50033\"\n          stroke=\"#4F39F6\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path\n          d=\"M12.5 5.83301H14.1667C15.2717 5.83301 16.3315 6.27199 17.1129 7.0534C17.8943 7.8348 18.3333 8.89461 18.3333 9.99967C18.3333 11.1047 17.8943 12.1646 17.1129 12.946C16.3315 13.7274 15.2717 14.1663 14.1667 14.1663H12.5\"\n          stroke=\"#4F39F6\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path d=\"M6.66699 10H13.3337\" stroke=\"#4F39F6\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\n          stroke-linejoin=\"round\" />\n      </svg>\n    </div>\n\n    <!-- Custom Icon -->\n    <div *ngIf=\"icon && icon.type === 'custom' && icon.svg\" [innerHTML]=\"icon.svg\"></div>\n\n    <!-- Title -->\n    <span class=\"cqa-font-semibold cqa-text-[14px] cqa-leading-[17px] cqa-text-[#312C85] cqa-flex-1\">\n      {{ title }}\n    </span>\n\n    <!-- Badge and dynamic header buttons -->\n    <div class=\"cqa-flex cqa-items-center cqa-gap-2\" (click)=\"$event.stopPropagation()\">\n      <ng-container *ngFor=\"let btn of headerButtons; let i = index\">\n        <cqa-button\n          [text]=\"btn.text\"\n          [icon]=\"btn.icon\"\n          [variant]=\"btn.variant || 'outlined'\"\n          [disabled]=\"btn.disabled\"\n          [tooltip]=\"btn.tooltip\"\n          [customClass]=\"btn.customClass\"\n          [btnSize]=\"btn.btnSize || 'sm'\"\n          (clicked)=\"onHeaderButtonClick(btn, i, $event)\">\n        </cqa-button>\n      </ng-container>\n      <span\n        class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-bg-[#C6D2FF] cqa-text-[12px] cqa-leading-[16px] cqa-text-[#432DD7]\">\n        {{ getDisplayCount() }}\n      </span>\n    </div>\n  </div>\n</div>\n\n<!-- Expanded Content -->\n<div *ngIf=\"isExpanded\" class=\"cqa-mt-2 cqa-flex cqa-flex-col cqa-gap-2 cqa-px-2.5\">\n  <!-- When there are no items, display ng-content directly -->\n  <ng-container *ngIf=\"!items || items.length === 0\">\n      <ng-content></ng-content>\n  </ng-container>\n\n  <!-- When items exist, display them -->\n  <div *ngFor=\"let item of items\">\n\n    <!-- Item Header -->\n    <div class=\"cqa-bg-white cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-rounded-md cqa-overflow-hidden\">\n      <div class=\"cqa-py-2 cqa-px-3 cqa-flex cqa-items-center cqa-justify-between cqa-gap-3\">\n        <!-- Left side: Status and Title -->\n        <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-1\">\n          <!-- Status Icon (Filled Green Circle with Checkmark) -->\n          <div>\n            <!-- Success -->\n            <svg *ngIf=\"item.status === 'success'\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\">\n              <g clip-path=\"url(#clip0_48_121)\">\n                <path\n                  d=\"M10.0003 18.3337C14.6027 18.3337 18.3337 14.6027 18.3337 10.0003C18.3337 5.39795 14.6027 1.66699 10.0003 1.66699C5.39795 1.66699 1.66699 5.39795 1.66699 10.0003C1.66699 14.6027 5.39795 18.3337 10.0003 18.3337Z\"\n                  stroke=\"#00A63E\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                <path d=\"M7.5 9.99967L9.16667 11.6663L12.5 8.33301\" stroke=\"#00A63E\" stroke-width=\"1.66667\"\n                  stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n              </g>\n              <defs>\n                <clipPath id=\"clip0_48_121\">\n                  <rect width=\"20\" height=\"20\" fill=\"white\" />\n                </clipPath>\n              </defs>\n            </svg>\n            <!-- Failed -->\n            <svg *ngIf=\"item.status === 'failed'\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\">\n              <circle cx=\"10\" cy=\"10\" r=\"8\" fill=\"#EF4444\" />\n              <path d=\"M7 7L13 13M13 7L7 13\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\"\n                stroke-linejoin=\"round\" />\n            </svg>\n            <!-- Pending -->\n            <svg *ngIf=\"item.status === 'pending'\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\">\n              <circle cx=\"10\" cy=\"10\" r=\"8\" fill=\"#9CA3AF\" />\n              <path d=\"M10 6V10L13 12\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            </svg>\n            <!-- Running -->\n            <svg *ngIf=\"item.status === 'running'\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\">\n              <circle cx=\"10\" cy=\"10\" r=\"8\" fill=\"#3B82F6\" />\n              <path d=\"M10 6V10L13 12\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            </svg>\n          </div>\n  \n          <!-- Title -->\n          <span class=\"cqa-text-[14px] cqa-leading-[18px]\" style=\"word-break: break-word;\">\n            {{ item.title }}\n          </span>\n        </div>\n  \n        <!-- Right side: Duration and View Steps Link -->\n        <div class=\"cqa-flex cqa-items-center cqa-gap-3\">\n          <!-- Step action icons (only when isDebug) -->\n          <div *ngIf=\"isDebug\" class=\"cqa-flex cqa-items-center cqa-gap-0.5 cqa-text-[#9CA3AF]\" (click)=\"$event.stopPropagation()\">\n            <button 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(item, $event)\">\n              <mat-icon class=\"!cqa-text-[14px] !cqa-w-[14px] !cqa-h-[14px]\">edit</mat-icon>\n            </button>\n            <button 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(item, opt, $event)\">{{ opt.label }}</button>\n            </mat-menu>\n            <button 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 stepMoreMenuOptions\" (click)=\"onStepMoreOptionSelect(item, opt, $event)\">{{ opt.label }}</button>\n            </mat-menu>\n          </div>\n          <!-- Duration with Clock Icon -->\n          <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n            <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                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\"\n                stroke=\"#6A7282\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n              <path d=\"M6 3V6L8 7\" stroke=\"#6A7282\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            </svg>\n            <span class=\"cqa-text-[14px] cqa-leading-[20px] cqa-text-[#6A7282]\">\n              {{ formatDuration(item.duration) }}\n            </span>\n          </div>\n  \n          <!-- View Steps Link: redirect mode (navigates to URL) or inline mode (toggle expand) -->\n          <a *ngIf=\"hasViewStepsRedirectUrl(item)\"\n            [href]=\"getItemViewStepsUrl(item)\"\n            [attr.target]=\"viewStepsOpenInNewTab ? '_blank' : null\"\n            [attr.rel]=\"viewStepsOpenInNewTab ? 'noopener noreferrer' : null\"\n            class=\"cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold cqa-text-[#3F43EE] cqa-no-underline cqa-flex cqa-items-center cqa-gap-1 hover:cqa-underline\">\n            <span>View steps</span>\n            <svg class=\"cqa-transition-transform\" width=\"16\" height=\"15\"\n              viewBox=\"0 0 16 15\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                d=\"M8.6552 12.8184L7.55413 11.7668L10.852 8.5864H2.83984V7.05032H10.852L7.55413 3.87506L8.6552 2.81836L13.8398 7.81836L8.6552 12.8184Z\"\n                fill=\"#3F43EE\" />\n            </svg>\n          </a>\n          <a *ngIf=\"!hasViewStepsRedirectUrl(item)\" href=\"#\" (click)=\"onViewSteps(item, $event)\"\n            class=\"cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold cqa-text-[#3F43EE] cqa-no-underline cqa-flex cqa-items-center cqa-gap-1 hover:cqa-underline\">\n            <span>{{ isItemExpanded(item.id) ? 'Hide steps' : 'View steps' }}</span>\n            <svg [class.cqa-rotate-90]=\"isItemExpanded(item.id)\" class=\"cqa-transition-transform\" width=\"16\" height=\"15\"\n              viewBox=\"0 0 16 15\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                d=\"M8.6552 12.8184L7.55413 11.7668L10.852 8.5864H2.83984V7.05032H10.852L7.55413 3.87506L8.6552 2.81836L13.8398 7.81836L8.6552 12.8184Z\"\n                fill=\"#3F43EE\" />\n            </svg>\n          </a>\n        </div>\n      </div>\n    </div>\n\n    <!-- Steps Content (shown when item is expanded) -->\n    <div *ngIf=\"isItemExpanded(item.id)\">\n      <!-- Custom template via TemplateRef (from @ContentChild or @Input) - passes item as context -->\n      <ng-container *ngIf=\"itemContentTpl || itemContentTemplate\">\n        <div class=\"cqa-p-3\">\n          <ng-container\n            *ngTemplateOutlet=\"(itemContentTpl || itemContentTemplate)!; context: { $implicit: item, item: item }\"></ng-container>\n        </div>\n      </ng-container>\n\n      <!-- Custom content projection via ng-content - displayed for all expanded items -->\n      <ng-content select=\"[itemContent]\"></ng-content>\n    </div>\n  </div>\n</div>\n\n<!-- Custom content projection after all items - for steps loaded after API call -->\n<ng-content select=\"[afterItems]\"></ng-content>", components: [{ type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i2$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i2$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+MainStepCollapseComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: MainStepCollapseComponent, selector: "cqa-main-step-collapse", inputs: { title: "title", items: "items", expanded: "expanded", icon: "icon", count: "count", countLoading: "countLoading", itemContentTemplate: "itemContentTemplate", headerButtons: "headerButtons", viewStepsAsRedirect: "viewStepsAsRedirect", getViewStepsUrl: "getViewStepsUrl", viewStepsOpenInNewTab: "viewStepsOpenInNewTab", initialExpandedItemId: "initialExpandedItemId", isDebug: "isDebug", addStepMenuOptions: "addStepMenuOptions", stepMoreMenuOptions: "stepMoreMenuOptions" }, outputs: { viewSteps: "viewSteps", editStep: "editStep", addStepOptionSelect: "addStepOptionSelect", stepMoreOptionSelect: "stepMoreOptionSelect", headerButtonClick: "headerButtonClick", expandedChange: "expandedChange" }, host: { classAttribute: "cqa-ui-root" }, queries: [{ propertyName: "itemContentTpl", first: true, predicate: ["itemContent"], descendants: true, read: TemplateRef }], usesOnChanges: true, ngImport: i0, template: "<!-- Header -->\n<div\n  class=\"cqa-mt-2 cqa-flex cqa-items-center cqa-justify-between cqa-gap-3 cqa-px-3 cqa-py-2 cqa-cursor-pointer cqa-bg-[#EEF2FF] cqa-rounded-[4px] cqa-border cqa-border-[#C6D2FF] cqa-border-solid\"\n  (click)=\"toggle()\">\n  <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-w-full\">\n    <!-- Chevron Icon (Left) -->\n    <!-- <svg [class.cqa-rotate-180]=\"isExpanded\" class=\"cqa-transition-transform\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path d=\"M4 6L8 10L12 6\" stroke=\"#3F51B5\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg> -->\n    <div><svg [class.cqa-rotate-180]=\"isExpanded\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M4 6L8 10L12 6\" stroke=\"#4F39F6\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n          stroke-linejoin=\"round\" />\n      </svg></div>\n\n    <!-- Chain-Link Icon (if configured, otherwise default) -->\n    <!-- <div *ngIf=\"icon && icon.type === 'folder'\">\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <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=\"#3F51B5\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  </div>\n  <div *ngIf=\"icon && icon.type === 'loop'\">\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <rect width=\"16\" height=\"16\" rx=\"4\" fill=\"#EBECFD\"/>\n      <path d=\"M9.66663 4.66666L11 5.99999L9.66663 7.33332\" stroke=\"#3F51B5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      <path d=\"M5 7.66667V7.33333C5 6.97971 5.14048 6.64057 5.39052 6.39052C5.64057 6.14048 5.97971 6 6.33333 6H11\" stroke=\"#3F51B5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      <path d=\"M6.33333 11.3333L5 9.99999L6.33333 8.66666\" stroke=\"#3F51B5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      <path d=\"M11 8.33334V8.66668C11 9.0203 10.8595 9.35944 10.6095 9.60949C10.3594 9.85953 10.0203 10 9.66667 10H5\" stroke=\"#3F51B5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  </div> -->\n    <!-- Bar Icon (Bulleted List) -->\n    <div *ngIf=\"icon && icon.type === 'bar'\">\n      <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <!-- First bullet and line -->\n        <circle cx=\"3\" cy=\"5\" r=\"2\" fill=\"#4F39F6\"/>\n        <line x1=\"7\" y1=\"5\" x2=\"17\" y2=\"5\" stroke=\"#4F39F6\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n        <!-- Second bullet and line -->\n        <circle cx=\"3\" cy=\"10\" r=\"2\" fill=\"#4F39F6\"/>\n        <line x1=\"7\" y1=\"10\" x2=\"17\" y2=\"10\" stroke=\"#4F39F6\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n        <!-- Third bullet and line -->\n        <circle cx=\"3\" cy=\"15\" r=\"2\" fill=\"#4F39F6\"/>\n        <line x1=\"7\" y1=\"15\" x2=\"17\" y2=\"15\" stroke=\"#4F39F6\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n      </svg>\n    </div>\n\n    <!-- Default Chain-Link Icon (when no icon or icon type is not specified) -->\n    <div *ngIf=\"!icon || (icon.type !== 'bar' && icon.type !== 'folder' && icon.type !== 'loop' && icon.type !== 'custom')\">\n      <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path\n          d=\"M7.50033 14.1663H5.83366C4.72859 14.1663 3.66878 13.7274 2.88738 12.946C2.10598 12.1646 1.66699 11.1047 1.66699 9.99967C1.66699 8.89461 2.10598 7.8348 2.88738 7.0534C3.66878 6.27199 4.72859 5.83301 5.83366 5.83301H7.50033\"\n          stroke=\"#4F39F6\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path\n          d=\"M12.5 5.83301H14.1667C15.2717 5.83301 16.3315 6.27199 17.1129 7.0534C17.8943 7.8348 18.3333 8.89461 18.3333 9.99967C18.3333 11.1047 17.8943 12.1646 17.1129 12.946C16.3315 13.7274 15.2717 14.1663 14.1667 14.1663H12.5\"\n          stroke=\"#4F39F6\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path d=\"M6.66699 10H13.3337\" stroke=\"#4F39F6\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\n          stroke-linejoin=\"round\" />\n      </svg>\n    </div>\n\n    <!-- Custom Icon -->\n    <div *ngIf=\"icon && icon.type === 'custom' && icon.svg\" [innerHTML]=\"icon.svg\"></div>\n\n    <!-- Title -->\n    <span class=\"cqa-font-semibold cqa-text-[14px] cqa-leading-[17px] cqa-text-[#312C85] cqa-flex-1\">\n      {{ title }}\n    </span>\n\n    <!-- Badge and dynamic header buttons -->\n    <div class=\"cqa-flex cqa-items-center cqa-gap-2\" (click)=\"$event.stopPropagation()\">\n      <ng-container *ngFor=\"let btn of headerButtons; let i = index\">\n        <cqa-button\n          [text]=\"btn.text\"\n          [icon]=\"btn.icon\"\n          [variant]=\"btn.variant || 'outlined'\"\n          [disabled]=\"btn.disabled\"\n          [tooltip]=\"btn.tooltip\"\n          [customClass]=\"btn.customClass\"\n          [btnSize]=\"btn.btnSize || 'sm'\"\n          (clicked)=\"onHeaderButtonClick(btn, i, $event)\">\n        </cqa-button>\n      </ng-container>\n      <span\n        class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-bg-[#C6D2FF] cqa-text-[12px] cqa-leading-[16px] cqa-text-[#432DD7] cqa-inline-flex cqa-items-center cqa-justify-center cqa-min-w-[24px]\">\n        <mat-spinner *ngIf=\"countLoading\" diameter=\"16\" class=\"cqa-inline-block\"></mat-spinner>\n        <span *ngIf=\"!countLoading\">{{ getDisplayCount() }}</span>\n      </span>\n    </div>\n  </div>\n</div>\n\n<!-- Expanded Content -->\n<div *ngIf=\"isExpanded\" class=\"cqa-mt-2 cqa-flex cqa-flex-col cqa-gap-2 cqa-px-2.5\">\n  <!-- When there are no items, display ng-content directly -->\n  <ng-container *ngIf=\"!items || items.length === 0\">\n      <ng-content></ng-content>\n  </ng-container>\n\n  <!-- When items exist, display them -->\n  <div *ngFor=\"let item of items\">\n\n    <!-- Item Header -->\n    <div class=\"cqa-bg-white cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-rounded-md cqa-overflow-hidden\">\n      <div class=\"cqa-py-2 cqa-px-3 cqa-flex cqa-items-center cqa-justify-between cqa-gap-3\">\n        <!-- Left side: Status and Title -->\n        <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-1\">\n          <!-- Status Icon (Filled Green Circle with Checkmark) -->\n          <div>\n            <!-- Success -->\n            <svg *ngIf=\"item.status === 'success'\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\">\n              <g clip-path=\"url(#clip0_48_121)\">\n                <path\n                  d=\"M10.0003 18.3337C14.6027 18.3337 18.3337 14.6027 18.3337 10.0003C18.3337 5.39795 14.6027 1.66699 10.0003 1.66699C5.39795 1.66699 1.66699 5.39795 1.66699 10.0003C1.66699 14.6027 5.39795 18.3337 10.0003 18.3337Z\"\n                  stroke=\"#00A63E\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                <path d=\"M7.5 9.99967L9.16667 11.6663L12.5 8.33301\" stroke=\"#00A63E\" stroke-width=\"1.66667\"\n                  stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n              </g>\n              <defs>\n                <clipPath id=\"clip0_48_121\">\n                  <rect width=\"20\" height=\"20\" fill=\"white\" />\n                </clipPath>\n              </defs>\n            </svg>\n            <!-- Failed -->\n            <svg *ngIf=\"item.status === 'failed'\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\">\n              <circle cx=\"10\" cy=\"10\" r=\"8\" fill=\"#EF4444\" />\n              <path d=\"M7 7L13 13M13 7L7 13\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\"\n                stroke-linejoin=\"round\" />\n            </svg>\n            <!-- Pending -->\n            <svg *ngIf=\"item.status === 'pending'\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\">\n              <circle cx=\"10\" cy=\"10\" r=\"8\" fill=\"#9CA3AF\" />\n              <path d=\"M10 6V10L13 12\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            </svg>\n            <!-- Running -->\n            <svg *ngIf=\"item.status === 'running'\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\">\n              <circle cx=\"10\" cy=\"10\" r=\"8\" fill=\"#3B82F6\" />\n              <path d=\"M10 6V10L13 12\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            </svg>\n          </div>\n  \n          <!-- Title -->\n          <span class=\"cqa-text-[14px] cqa-leading-[18px]\" style=\"word-break: break-word;\">\n            {{ item.title }}\n          </span>\n        </div>\n  \n        <!-- Right side: Duration and View Steps Link -->\n        <div class=\"cqa-flex cqa-items-center cqa-gap-3\">\n          <!-- Step action icons (only when isDebug) -->\n          <div *ngIf=\"isDebug\" class=\"cqa-flex cqa-items-center cqa-gap-0.5 cqa-text-[#9CA3AF]\" (click)=\"$event.stopPropagation()\">\n            <button 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(item, $event)\">\n              <mat-icon class=\"!cqa-text-[14px] !cqa-w-[14px] !cqa-h-[14px]\">edit</mat-icon>\n            </button>\n            <button 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(item, opt, $event)\">{{ opt.label }}</button>\n            </mat-menu>\n            <button 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 stepMoreMenuOptions\" (click)=\"onStepMoreOptionSelect(item, opt, $event)\">{{ opt.label }}</button>\n            </mat-menu>\n          </div>\n          <!-- Duration with Clock Icon -->\n          <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n            <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                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\"\n                stroke=\"#6A7282\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n              <path d=\"M6 3V6L8 7\" stroke=\"#6A7282\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            </svg>\n            <span class=\"cqa-text-[14px] cqa-leading-[20px] cqa-text-[#6A7282]\">\n              {{ formatDuration(item.duration) }}\n            </span>\n          </div>\n  \n          <!-- View Steps Link: redirect mode (navigates to URL) or inline mode (toggle expand) -->\n          <a *ngIf=\"hasViewStepsRedirectUrl(item)\"\n            [href]=\"getItemViewStepsUrl(item)\"\n            [attr.target]=\"viewStepsOpenInNewTab ? '_blank' : null\"\n            [attr.rel]=\"viewStepsOpenInNewTab ? 'noopener noreferrer' : null\"\n            class=\"cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold cqa-text-[#3F43EE] cqa-no-underline cqa-flex cqa-items-center cqa-gap-1 hover:cqa-underline\">\n            <span>View steps</span>\n            <svg class=\"cqa-transition-transform\" width=\"16\" height=\"15\"\n              viewBox=\"0 0 16 15\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                d=\"M8.6552 12.8184L7.55413 11.7668L10.852 8.5864H2.83984V7.05032H10.852L7.55413 3.87506L8.6552 2.81836L13.8398 7.81836L8.6552 12.8184Z\"\n                fill=\"#3F43EE\" />\n            </svg>\n          </a>\n          <a *ngIf=\"!hasViewStepsRedirectUrl(item)\" href=\"#\" (click)=\"onViewSteps(item, $event)\"\n            class=\"cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold cqa-text-[#3F43EE] cqa-no-underline cqa-flex cqa-items-center cqa-gap-1 hover:cqa-underline\">\n            <span>{{ isItemExpanded(item.id) ? 'Hide steps' : 'View steps' }}</span>\n            <svg [class.cqa-rotate-90]=\"isItemExpanded(item.id)\" class=\"cqa-transition-transform\" width=\"16\" height=\"15\"\n              viewBox=\"0 0 16 15\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                d=\"M8.6552 12.8184L7.55413 11.7668L10.852 8.5864H2.83984V7.05032H10.852L7.55413 3.87506L8.6552 2.81836L13.8398 7.81836L8.6552 12.8184Z\"\n                fill=\"#3F43EE\" />\n            </svg>\n          </a>\n        </div>\n      </div>\n    </div>\n\n    <!-- Steps Content (shown when item is expanded) -->\n    <div *ngIf=\"isItemExpanded(item.id)\">\n      <!-- Custom template via TemplateRef (from @ContentChild or @Input) - passes item as context -->\n      <ng-container *ngIf=\"itemContentTpl || itemContentTemplate\">\n        <div class=\"cqa-p-3\">\n          <ng-container\n            *ngTemplateOutlet=\"(itemContentTpl || itemContentTemplate)!; context: { $implicit: item, item: item }\"></ng-container>\n        </div>\n      </ng-container>\n\n      <!-- Custom content projection via ng-content - displayed for all expanded items -->\n      <ng-content select=\"[itemContent]\"></ng-content>\n    </div>\n  </div>\n</div>\n\n<!-- Custom content projection after all items - for steps loaded after API call -->\n<ng-content select=\"[afterItems]\"></ng-content>", components: [{ type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: i3$3.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i2$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i2$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: MainStepCollapseComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-main-step-collapse', host: { class: 'cqa-ui-root' }, template: "<!-- Header -->\n<div\n  class=\"cqa-mt-2 cqa-flex cqa-items-center cqa-justify-between cqa-gap-3 cqa-px-3 cqa-py-2 cqa-cursor-pointer cqa-bg-[#EEF2FF] cqa-rounded-[4px] cqa-border cqa-border-[#C6D2FF] cqa-border-solid\"\n  (click)=\"toggle()\">\n  <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-w-full\">\n    <!-- Chevron Icon (Left) -->\n    <!-- <svg [class.cqa-rotate-180]=\"isExpanded\" class=\"cqa-transition-transform\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path d=\"M4 6L8 10L12 6\" stroke=\"#3F51B5\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg> -->\n    <div><svg [class.cqa-rotate-180]=\"isExpanded\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M4 6L8 10L12 6\" stroke=\"#4F39F6\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n          stroke-linejoin=\"round\" />\n      </svg></div>\n\n    <!-- Chain-Link Icon (if configured, otherwise default) -->\n    <!-- <div *ngIf=\"icon && icon.type === 'folder'\">\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <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=\"#3F51B5\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  </div>\n  <div *ngIf=\"icon && icon.type === 'loop'\">\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <rect width=\"16\" height=\"16\" rx=\"4\" fill=\"#EBECFD\"/>\n      <path d=\"M9.66663 4.66666L11 5.99999L9.66663 7.33332\" stroke=\"#3F51B5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      <path d=\"M5 7.66667V7.33333C5 6.97971 5.14048 6.64057 5.39052 6.39052C5.64057 6.14048 5.97971 6 6.33333 6H11\" stroke=\"#3F51B5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      <path d=\"M6.33333 11.3333L5 9.99999L6.33333 8.66666\" stroke=\"#3F51B5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      <path d=\"M11 8.33334V8.66668C11 9.0203 10.8595 9.35944 10.6095 9.60949C10.3594 9.85953 10.0203 10 9.66667 10H5\" stroke=\"#3F51B5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  </div> -->\n    <!-- Bar Icon (Bulleted List) -->\n    <div *ngIf=\"icon && icon.type === 'bar'\">\n      <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <!-- First bullet and line -->\n        <circle cx=\"3\" cy=\"5\" r=\"2\" fill=\"#4F39F6\"/>\n        <line x1=\"7\" y1=\"5\" x2=\"17\" y2=\"5\" stroke=\"#4F39F6\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n        <!-- Second bullet and line -->\n        <circle cx=\"3\" cy=\"10\" r=\"2\" fill=\"#4F39F6\"/>\n        <line x1=\"7\" y1=\"10\" x2=\"17\" y2=\"10\" stroke=\"#4F39F6\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n        <!-- Third bullet and line -->\n        <circle cx=\"3\" cy=\"15\" r=\"2\" fill=\"#4F39F6\"/>\n        <line x1=\"7\" y1=\"15\" x2=\"17\" y2=\"15\" stroke=\"#4F39F6\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n      </svg>\n    </div>\n\n    <!-- Default Chain-Link Icon (when no icon or icon type is not specified) -->\n    <div *ngIf=\"!icon || (icon.type !== 'bar' && icon.type !== 'folder' && icon.type !== 'loop' && icon.type !== 'custom')\">\n      <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path\n          d=\"M7.50033 14.1663H5.83366C4.72859 14.1663 3.66878 13.7274 2.88738 12.946C2.10598 12.1646 1.66699 11.1047 1.66699 9.99967C1.66699 8.89461 2.10598 7.8348 2.88738 7.0534C3.66878 6.27199 4.72859 5.83301 5.83366 5.83301H7.50033\"\n          stroke=\"#4F39F6\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path\n          d=\"M12.5 5.83301H14.1667C15.2717 5.83301 16.3315 6.27199 17.1129 7.0534C17.8943 7.8348 18.3333 8.89461 18.3333 9.99967C18.3333 11.1047 17.8943 12.1646 17.1129 12.946C16.3315 13.7274 15.2717 14.1663 14.1667 14.1663H12.5\"\n          stroke=\"#4F39F6\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path d=\"M6.66699 10H13.3337\" stroke=\"#4F39F6\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\n          stroke-linejoin=\"round\" />\n      </svg>\n    </div>\n\n    <!-- Custom Icon -->\n    <div *ngIf=\"icon && icon.type === 'custom' && icon.svg\" [innerHTML]=\"icon.svg\"></div>\n\n    <!-- Title -->\n    <span class=\"cqa-font-semibold cqa-text-[14px] cqa-leading-[17px] cqa-text-[#312C85] cqa-flex-1\">\n      {{ title }}\n    </span>\n\n    <!-- Badge and dynamic header buttons -->\n    <div class=\"cqa-flex cqa-items-center cqa-gap-2\" (click)=\"$event.stopPropagation()\">\n      <ng-container *ngFor=\"let btn of headerButtons; let i = index\">\n        <cqa-button\n          [text]=\"btn.text\"\n          [icon]=\"btn.icon\"\n          [variant]=\"btn.variant || 'outlined'\"\n          [disabled]=\"btn.disabled\"\n          [tooltip]=\"btn.tooltip\"\n          [customClass]=\"btn.customClass\"\n          [btnSize]=\"btn.btnSize || 'sm'\"\n          (clicked)=\"onHeaderButtonClick(btn, i, $event)\">\n        </cqa-button>\n      </ng-container>\n      <span\n        class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-bg-[#C6D2FF] cqa-text-[12px] cqa-leading-[16px] cqa-text-[#432DD7]\">\n        {{ getDisplayCount() }}\n      </span>\n    </div>\n  </div>\n</div>\n\n<!-- Expanded Content -->\n<div *ngIf=\"isExpanded\" class=\"cqa-mt-2 cqa-flex cqa-flex-col cqa-gap-2 cqa-px-2.5\">\n  <!-- When there are no items, display ng-content directly -->\n  <ng-container *ngIf=\"!items || items.length === 0\">\n      <ng-content></ng-content>\n  </ng-container>\n\n  <!-- When items exist, display them -->\n  <div *ngFor=\"let item of items\">\n\n    <!-- Item Header -->\n    <div class=\"cqa-bg-white cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-rounded-md cqa-overflow-hidden\">\n      <div class=\"cqa-py-2 cqa-px-3 cqa-flex cqa-items-center cqa-justify-between cqa-gap-3\">\n        <!-- Left side: Status and Title -->\n        <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-1\">\n          <!-- Status Icon (Filled Green Circle with Checkmark) -->\n          <div>\n            <!-- Success -->\n            <svg *ngIf=\"item.status === 'success'\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\">\n              <g clip-path=\"url(#clip0_48_121)\">\n                <path\n                  d=\"M10.0003 18.3337C14.6027 18.3337 18.3337 14.6027 18.3337 10.0003C18.3337 5.39795 14.6027 1.66699 10.0003 1.66699C5.39795 1.66699 1.66699 5.39795 1.66699 10.0003C1.66699 14.6027 5.39795 18.3337 10.0003 18.3337Z\"\n                  stroke=\"#00A63E\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                <path d=\"M7.5 9.99967L9.16667 11.6663L12.5 8.33301\" stroke=\"#00A63E\" stroke-width=\"1.66667\"\n                  stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n              </g>\n              <defs>\n                <clipPath id=\"clip0_48_121\">\n                  <rect width=\"20\" height=\"20\" fill=\"white\" />\n                </clipPath>\n              </defs>\n            </svg>\n            <!-- Failed -->\n            <svg *ngIf=\"item.status === 'failed'\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\">\n              <circle cx=\"10\" cy=\"10\" r=\"8\" fill=\"#EF4444\" />\n              <path d=\"M7 7L13 13M13 7L7 13\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\"\n                stroke-linejoin=\"round\" />\n            </svg>\n            <!-- Pending -->\n            <svg *ngIf=\"item.status === 'pending'\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\">\n              <circle cx=\"10\" cy=\"10\" r=\"8\" fill=\"#9CA3AF\" />\n              <path d=\"M10 6V10L13 12\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            </svg>\n            <!-- Running -->\n            <svg *ngIf=\"item.status === 'running'\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\">\n              <circle cx=\"10\" cy=\"10\" r=\"8\" fill=\"#3B82F6\" />\n              <path d=\"M10 6V10L13 12\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            </svg>\n          </div>\n  \n          <!-- Title -->\n          <span class=\"cqa-text-[14px] cqa-leading-[18px]\" style=\"word-break: break-word;\">\n            {{ item.title }}\n          </span>\n        </div>\n  \n        <!-- Right side: Duration and View Steps Link -->\n        <div class=\"cqa-flex cqa-items-center cqa-gap-3\">\n          <!-- Step action icons (only when isDebug) -->\n          <div *ngIf=\"isDebug\" class=\"cqa-flex cqa-items-center cqa-gap-0.5 cqa-text-[#9CA3AF]\" (click)=\"$event.stopPropagation()\">\n            <button 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(item, $event)\">\n              <mat-icon class=\"!cqa-text-[14px] !cqa-w-[14px] !cqa-h-[14px]\">edit</mat-icon>\n            </button>\n            <button 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(item, opt, $event)\">{{ opt.label }}</button>\n            </mat-menu>\n            <button 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 stepMoreMenuOptions\" (click)=\"onStepMoreOptionSelect(item, opt, $event)\">{{ opt.label }}</button>\n            </mat-menu>\n          </div>\n          <!-- Duration with Clock Icon -->\n          <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n            <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                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\"\n                stroke=\"#6A7282\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n              <path d=\"M6 3V6L8 7\" stroke=\"#6A7282\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            </svg>\n            <span class=\"cqa-text-[14px] cqa-leading-[20px] cqa-text-[#6A7282]\">\n              {{ formatDuration(item.duration) }}\n            </span>\n          </div>\n  \n          <!-- View Steps Link: redirect mode (navigates to URL) or inline mode (toggle expand) -->\n          <a *ngIf=\"hasViewStepsRedirectUrl(item)\"\n            [href]=\"getItemViewStepsUrl(item)\"\n            [attr.target]=\"viewStepsOpenInNewTab ? '_blank' : null\"\n            [attr.rel]=\"viewStepsOpenInNewTab ? 'noopener noreferrer' : null\"\n            class=\"cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold cqa-text-[#3F43EE] cqa-no-underline cqa-flex cqa-items-center cqa-gap-1 hover:cqa-underline\">\n            <span>View steps</span>\n            <svg class=\"cqa-transition-transform\" width=\"16\" height=\"15\"\n              viewBox=\"0 0 16 15\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                d=\"M8.6552 12.8184L7.55413 11.7668L10.852 8.5864H2.83984V7.05032H10.852L7.55413 3.87506L8.6552 2.81836L13.8398 7.81836L8.6552 12.8184Z\"\n                fill=\"#3F43EE\" />\n            </svg>\n          </a>\n          <a *ngIf=\"!hasViewStepsRedirectUrl(item)\" href=\"#\" (click)=\"onViewSteps(item, $event)\"\n            class=\"cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold cqa-text-[#3F43EE] cqa-no-underline cqa-flex cqa-items-center cqa-gap-1 hover:cqa-underline\">\n            <span>{{ isItemExpanded(item.id) ? 'Hide steps' : 'View steps' }}</span>\n            <svg [class.cqa-rotate-90]=\"isItemExpanded(item.id)\" class=\"cqa-transition-transform\" width=\"16\" height=\"15\"\n              viewBox=\"0 0 16 15\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                d=\"M8.6552 12.8184L7.55413 11.7668L10.852 8.5864H2.83984V7.05032H10.852L7.55413 3.87506L8.6552 2.81836L13.8398 7.81836L8.6552 12.8184Z\"\n                fill=\"#3F43EE\" />\n            </svg>\n          </a>\n        </div>\n      </div>\n    </div>\n\n    <!-- Steps Content (shown when item is expanded) -->\n    <div *ngIf=\"isItemExpanded(item.id)\">\n      <!-- Custom template via TemplateRef (from @ContentChild or @Input) - passes item as context -->\n      <ng-container *ngIf=\"itemContentTpl || itemContentTemplate\">\n        <div class=\"cqa-p-3\">\n          <ng-container\n            *ngTemplateOutlet=\"(itemContentTpl || itemContentTemplate)!; context: { $implicit: item, item: item }\"></ng-container>\n        </div>\n      </ng-container>\n\n      <!-- Custom content projection via ng-content - displayed for all expanded items -->\n      <ng-content select=\"[itemContent]\"></ng-content>\n    </div>\n  </div>\n</div>\n\n<!-- Custom content projection after all items - for steps loaded after API call -->\n<ng-content select=\"[afterItems]\"></ng-content>", styles: [] }]
+            args: [{ selector: 'cqa-main-step-collapse', host: { class: 'cqa-ui-root' }, template: "<!-- Header -->\n<div\n  class=\"cqa-mt-2 cqa-flex cqa-items-center cqa-justify-between cqa-gap-3 cqa-px-3 cqa-py-2 cqa-cursor-pointer cqa-bg-[#EEF2FF] cqa-rounded-[4px] cqa-border cqa-border-[#C6D2FF] cqa-border-solid\"\n  (click)=\"toggle()\">\n  <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-w-full\">\n    <!-- Chevron Icon (Left) -->\n    <!-- <svg [class.cqa-rotate-180]=\"isExpanded\" class=\"cqa-transition-transform\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <path d=\"M4 6L8 10L12 6\" stroke=\"#3F51B5\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n  </svg> -->\n    <div><svg [class.cqa-rotate-180]=\"isExpanded\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M4 6L8 10L12 6\" stroke=\"#4F39F6\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n          stroke-linejoin=\"round\" />\n      </svg></div>\n\n    <!-- Chain-Link Icon (if configured, otherwise default) -->\n    <!-- <div *ngIf=\"icon && icon.type === 'folder'\">\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <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=\"#3F51B5\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  </div>\n  <div *ngIf=\"icon && icon.type === 'loop'\">\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <rect width=\"16\" height=\"16\" rx=\"4\" fill=\"#EBECFD\"/>\n      <path d=\"M9.66663 4.66666L11 5.99999L9.66663 7.33332\" stroke=\"#3F51B5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      <path d=\"M5 7.66667V7.33333C5 6.97971 5.14048 6.64057 5.39052 6.39052C5.64057 6.14048 5.97971 6 6.33333 6H11\" stroke=\"#3F51B5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      <path d=\"M6.33333 11.3333L5 9.99999L6.33333 8.66666\" stroke=\"#3F51B5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      <path d=\"M11 8.33334V8.66668C11 9.0203 10.8595 9.35944 10.6095 9.60949C10.3594 9.85953 10.0203 10 9.66667 10H5\" stroke=\"#3F51B5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n    </svg>\n  </div> -->\n    <!-- Bar Icon (Bulleted List) -->\n    <div *ngIf=\"icon && icon.type === 'bar'\">\n      <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <!-- First bullet and line -->\n        <circle cx=\"3\" cy=\"5\" r=\"2\" fill=\"#4F39F6\"/>\n        <line x1=\"7\" y1=\"5\" x2=\"17\" y2=\"5\" stroke=\"#4F39F6\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n        <!-- Second bullet and line -->\n        <circle cx=\"3\" cy=\"10\" r=\"2\" fill=\"#4F39F6\"/>\n        <line x1=\"7\" y1=\"10\" x2=\"17\" y2=\"10\" stroke=\"#4F39F6\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n        <!-- Third bullet and line -->\n        <circle cx=\"3\" cy=\"15\" r=\"2\" fill=\"#4F39F6\"/>\n        <line x1=\"7\" y1=\"15\" x2=\"17\" y2=\"15\" stroke=\"#4F39F6\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n      </svg>\n    </div>\n\n    <!-- Default Chain-Link Icon (when no icon or icon type is not specified) -->\n    <div *ngIf=\"!icon || (icon.type !== 'bar' && icon.type !== 'folder' && icon.type !== 'loop' && icon.type !== 'custom')\">\n      <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path\n          d=\"M7.50033 14.1663H5.83366C4.72859 14.1663 3.66878 13.7274 2.88738 12.946C2.10598 12.1646 1.66699 11.1047 1.66699 9.99967C1.66699 8.89461 2.10598 7.8348 2.88738 7.0534C3.66878 6.27199 4.72859 5.83301 5.83366 5.83301H7.50033\"\n          stroke=\"#4F39F6\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path\n          d=\"M12.5 5.83301H14.1667C15.2717 5.83301 16.3315 6.27199 17.1129 7.0534C17.8943 7.8348 18.3333 8.89461 18.3333 9.99967C18.3333 11.1047 17.8943 12.1646 17.1129 12.946C16.3315 13.7274 15.2717 14.1663 14.1667 14.1663H12.5\"\n          stroke=\"#4F39F6\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path d=\"M6.66699 10H13.3337\" stroke=\"#4F39F6\" stroke-width=\"1.66667\" stroke-linecap=\"round\"\n          stroke-linejoin=\"round\" />\n      </svg>\n    </div>\n\n    <!-- Custom Icon -->\n    <div *ngIf=\"icon && icon.type === 'custom' && icon.svg\" [innerHTML]=\"icon.svg\"></div>\n\n    <!-- Title -->\n    <span class=\"cqa-font-semibold cqa-text-[14px] cqa-leading-[17px] cqa-text-[#312C85] cqa-flex-1\">\n      {{ title }}\n    </span>\n\n    <!-- Badge and dynamic header buttons -->\n    <div class=\"cqa-flex cqa-items-center cqa-gap-2\" (click)=\"$event.stopPropagation()\">\n      <ng-container *ngFor=\"let btn of headerButtons; let i = index\">\n        <cqa-button\n          [text]=\"btn.text\"\n          [icon]=\"btn.icon\"\n          [variant]=\"btn.variant || 'outlined'\"\n          [disabled]=\"btn.disabled\"\n          [tooltip]=\"btn.tooltip\"\n          [customClass]=\"btn.customClass\"\n          [btnSize]=\"btn.btnSize || 'sm'\"\n          (clicked)=\"onHeaderButtonClick(btn, i, $event)\">\n        </cqa-button>\n      </ng-container>\n      <span\n        class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-bg-[#C6D2FF] cqa-text-[12px] cqa-leading-[16px] cqa-text-[#432DD7] cqa-inline-flex cqa-items-center cqa-justify-center cqa-min-w-[24px]\">\n        <mat-spinner *ngIf=\"countLoading\" diameter=\"16\" class=\"cqa-inline-block\"></mat-spinner>\n        <span *ngIf=\"!countLoading\">{{ getDisplayCount() }}</span>\n      </span>\n    </div>\n  </div>\n</div>\n\n<!-- Expanded Content -->\n<div *ngIf=\"isExpanded\" class=\"cqa-mt-2 cqa-flex cqa-flex-col cqa-gap-2 cqa-px-2.5\">\n  <!-- When there are no items, display ng-content directly -->\n  <ng-container *ngIf=\"!items || items.length === 0\">\n      <ng-content></ng-content>\n  </ng-container>\n\n  <!-- When items exist, display them -->\n  <div *ngFor=\"let item of items\">\n\n    <!-- Item Header -->\n    <div class=\"cqa-bg-white cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-rounded-md cqa-overflow-hidden\">\n      <div class=\"cqa-py-2 cqa-px-3 cqa-flex cqa-items-center cqa-justify-between cqa-gap-3\">\n        <!-- Left side: Status and Title -->\n        <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-1\">\n          <!-- Status Icon (Filled Green Circle with Checkmark) -->\n          <div>\n            <!-- Success -->\n            <svg *ngIf=\"item.status === 'success'\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\">\n              <g clip-path=\"url(#clip0_48_121)\">\n                <path\n                  d=\"M10.0003 18.3337C14.6027 18.3337 18.3337 14.6027 18.3337 10.0003C18.3337 5.39795 14.6027 1.66699 10.0003 1.66699C5.39795 1.66699 1.66699 5.39795 1.66699 10.0003C1.66699 14.6027 5.39795 18.3337 10.0003 18.3337Z\"\n                  stroke=\"#00A63E\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                <path d=\"M7.5 9.99967L9.16667 11.6663L12.5 8.33301\" stroke=\"#00A63E\" stroke-width=\"1.66667\"\n                  stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n              </g>\n              <defs>\n                <clipPath id=\"clip0_48_121\">\n                  <rect width=\"20\" height=\"20\" fill=\"white\" />\n                </clipPath>\n              </defs>\n            </svg>\n            <!-- Failed -->\n            <svg *ngIf=\"item.status === 'failed'\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\">\n              <circle cx=\"10\" cy=\"10\" r=\"8\" fill=\"#EF4444\" />\n              <path d=\"M7 7L13 13M13 7L7 13\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\"\n                stroke-linejoin=\"round\" />\n            </svg>\n            <!-- Pending -->\n            <svg *ngIf=\"item.status === 'pending'\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\">\n              <circle cx=\"10\" cy=\"10\" r=\"8\" fill=\"#9CA3AF\" />\n              <path d=\"M10 6V10L13 12\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            </svg>\n            <!-- Running -->\n            <svg *ngIf=\"item.status === 'running'\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\">\n              <circle cx=\"10\" cy=\"10\" r=\"8\" fill=\"#3B82F6\" />\n              <path d=\"M10 6V10L13 12\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            </svg>\n          </div>\n  \n          <!-- Title -->\n          <span class=\"cqa-text-[14px] cqa-leading-[18px]\" style=\"word-break: break-word;\">\n            {{ item.title }}\n          </span>\n        </div>\n  \n        <!-- Right side: Duration and View Steps Link -->\n        <div class=\"cqa-flex cqa-items-center cqa-gap-3\">\n          <!-- Step action icons (only when isDebug) -->\n          <div *ngIf=\"isDebug\" class=\"cqa-flex cqa-items-center cqa-gap-0.5 cqa-text-[#9CA3AF]\" (click)=\"$event.stopPropagation()\">\n            <button 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(item, $event)\">\n              <mat-icon class=\"!cqa-text-[14px] !cqa-w-[14px] !cqa-h-[14px]\">edit</mat-icon>\n            </button>\n            <button 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(item, opt, $event)\">{{ opt.label }}</button>\n            </mat-menu>\n            <button 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 stepMoreMenuOptions\" (click)=\"onStepMoreOptionSelect(item, opt, $event)\">{{ opt.label }}</button>\n            </mat-menu>\n          </div>\n          <!-- Duration with Clock Icon -->\n          <div class=\"cqa-flex cqa-items-center cqa-gap-1\">\n            <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                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\"\n                stroke=\"#6A7282\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n              <path d=\"M6 3V6L8 7\" stroke=\"#6A7282\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            </svg>\n            <span class=\"cqa-text-[14px] cqa-leading-[20px] cqa-text-[#6A7282]\">\n              {{ formatDuration(item.duration) }}\n            </span>\n          </div>\n  \n          <!-- View Steps Link: redirect mode (navigates to URL) or inline mode (toggle expand) -->\n          <a *ngIf=\"hasViewStepsRedirectUrl(item)\"\n            [href]=\"getItemViewStepsUrl(item)\"\n            [attr.target]=\"viewStepsOpenInNewTab ? '_blank' : null\"\n            [attr.rel]=\"viewStepsOpenInNewTab ? 'noopener noreferrer' : null\"\n            class=\"cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold cqa-text-[#3F43EE] cqa-no-underline cqa-flex cqa-items-center cqa-gap-1 hover:cqa-underline\">\n            <span>View steps</span>\n            <svg class=\"cqa-transition-transform\" width=\"16\" height=\"15\"\n              viewBox=\"0 0 16 15\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                d=\"M8.6552 12.8184L7.55413 11.7668L10.852 8.5864H2.83984V7.05032H10.852L7.55413 3.87506L8.6552 2.81836L13.8398 7.81836L8.6552 12.8184Z\"\n                fill=\"#3F43EE\" />\n            </svg>\n          </a>\n          <a *ngIf=\"!hasViewStepsRedirectUrl(item)\" href=\"#\" (click)=\"onViewSteps(item, $event)\"\n            class=\"cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold cqa-text-[#3F43EE] cqa-no-underline cqa-flex cqa-items-center cqa-gap-1 hover:cqa-underline\">\n            <span>{{ isItemExpanded(item.id) ? 'Hide steps' : 'View steps' }}</span>\n            <svg [class.cqa-rotate-90]=\"isItemExpanded(item.id)\" class=\"cqa-transition-transform\" width=\"16\" height=\"15\"\n              viewBox=\"0 0 16 15\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                d=\"M8.6552 12.8184L7.55413 11.7668L10.852 8.5864H2.83984V7.05032H10.852L7.55413 3.87506L8.6552 2.81836L13.8398 7.81836L8.6552 12.8184Z\"\n                fill=\"#3F43EE\" />\n            </svg>\n          </a>\n        </div>\n      </div>\n    </div>\n\n    <!-- Steps Content (shown when item is expanded) -->\n    <div *ngIf=\"isItemExpanded(item.id)\">\n      <!-- Custom template via TemplateRef (from @ContentChild or @Input) - passes item as context -->\n      <ng-container *ngIf=\"itemContentTpl || itemContentTemplate\">\n        <div class=\"cqa-p-3\">\n          <ng-container\n            *ngTemplateOutlet=\"(itemContentTpl || itemContentTemplate)!; context: { $implicit: item, item: item }\"></ng-container>\n        </div>\n      </ng-container>\n\n      <!-- Custom content projection via ng-content - displayed for all expanded items -->\n      <ng-content select=\"[itemContent]\"></ng-content>\n    </div>\n  </div>\n</div>\n\n<!-- Custom content projection after all items - for steps loaded after API call -->\n<ng-content select=\"[afterItems]\"></ng-content>", styles: [] }]
         }], propDecorators: { title: [{
                 type: Input
             }], items: [{
@@ -13083,6 +13089,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Input
             }], count: [{
                 type: Input
+            }], countLoading: [{
+                type: Input
             }], itemContentTemplate: [{
                 type: Input
             }], headerButtons: [{
@@ -19338,11 +19346,16 @@ class TestCaseDetailsRendererComponent {
         this.renderStep();
     }
     ngOnChanges(changes) {
+        var _a;
         if (changes['step'] || changes['index'] || changes['isNested'] || changes['isInsideLoop'] || changes['isReorder'] ||
             changes['dataProfileOptions'] || changes['hasMoreDataProfiles'] || changes['isLoadingDataProfiles'] ||
             changes['naturalTextActionsOptions'] || changes['setConditionTemplateVariables']) {
             this.renderStep();
         }
+        else if (changes['selected'] && ((_a = this.componentRef) === null || _a === void 0 ? void 0 : _a.instance) != null) {
+            this.componentRef.instance.selected = this.selected;
+            this.cdr.detectChanges();
+        }
     }
     getComponentType(step) {
         if (isStepGroupConfig(step))
@@ -19586,7 +19599,7 @@ class TestCaseDetailsRendererComponent {
     }
 }
 TestCaseDetailsRendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseDetailsRendererComponent, deps: [{ token: TEST_CASE_STEP_COMPONENT_MAP }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-TestCaseDetailsRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestCaseDetailsRendererComponent, selector: "cqa-test-case-details-renderer", inputs: { step: "step", index: "index", isNested: "isNested", isInsideLoop: "isInsideLoop", branch: "branch", isReorder: "isReorder", addStepBetweenAbove: "addStepBetweenAbove", addStepBetweenBelow: "addStepBetweenBelow", addStepBetween: "addStepBetween", dataProfileOptions: "dataProfileOptions", hasMoreDataProfiles: "hasMoreDataProfiles", isLoadingDataProfiles: "isLoadingDataProfiles", naturalTextActionsOptions: "naturalTextActionsOptions", setConditionTemplateVariables: "setConditionTemplateVariables" }, outputs: { nestedStepChange: "nestedStepChange", addStep: "addStep", deleteStep: "deleteStep", toggleExpanded: "toggleExpanded", groupNameChange: "groupNameChange", descriptionChange: "descriptionChange", reusableChange: "reusableChange", openExternal: "openExternal", edit: "edit", link: "link", duplicate: "duplicate", delete: "delete", viewDetails: "viewDetails", selectionChange: "selectionChange", conditionChange: "conditionChange", branchStepChange: "branchStepChange", addStepForBranch: "addStepForBranch", deleteStepWithBranch: "deleteStepWithBranch", addBranch: "addBranch", addElse: "addElse", deleteBranch: "deleteBranch", testDataProfileChange: "testDataProfileChange", startStepChange: "startStepChange", endStepChange: "endStepChange", maxIterationsChange: "maxIterationsChange", eventTypeChange: "eventTypeChange", parameterChange: "parameterChange", clickAction: "clickAction", dndDropInZone: "dndDropInZone", loadMoreDataProfiles: "loadMoreDataProfiles", searchDataProfiles: "searchDataProfiles", stepUpdate: "stepUpdate", addStepBetweenClick: "addStepBetweenClick", editInDepth: "editInDepth" }, host: { classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "stepHost", first: true, predicate: ["stepHost"], descendants: true, read: ViewContainerRef }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-relative cqa-step-renderer-hover-container\">\n    <button *ngIf=\"!isReorder && (addStepBetweenAbove && addStepBetween)\"\n        class=\"cqa-absolute cqa-top-[calc(0 - 12px)] cqa-left-[50%] cqa-translate-x-[-50%] cqa-p-0 cqa-z-[1] cqa-add-step-between-btn\"\n        style=\"top: -12px;\" (click)=\"addStepBetweenClick.emit({step: step, index: index, position: 'ABOVE'})\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <rect x=\"1\" y=\"1\" width=\"21.1822\" height=\"22\" rx=\"10.5911\" fill=\"white\" />\n            <rect x=\"1\" y=\"1\" width=\"21.1822\" height=\"22\" rx=\"10.5911\" stroke=\"#3F43EE\" stroke-width=\"2\" />\n            <path d=\"M8.5 12H15.5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            <path d=\"M12 8.5V15.5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        </svg>\n    </button>\n    <div class=\"cqa-step-host-wrapper\">\n        <ng-container #stepHost></ng-container>\n    </div>\n    <button *ngIf=\"!isReorder && (addStepBetweenBelow && addStepBetween)\"\n        class=\"cqa-absolute cqa-top-[calc(100%-12px)] cqa-left-[50%] cqa-translate-x-[-50%] cqa-p-0 cqa-z-[1] cqa-add-step-between-btn\"\n        (click)=\"addStepBetweenClick.emit({step: step, index: index, position: 'BELOW'})\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <rect x=\"1\" y=\"1\" width=\"21.1822\" height=\"22\" rx=\"10.5911\" fill=\"white\" />\n            <rect x=\"1\" y=\"1\" width=\"21.1822\" height=\"22\" rx=\"10.5911\" stroke=\"#3F43EE\" stroke-width=\"2\" />\n            <path d=\"M8.5 12H15.5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            <path d=\"M12 8.5V15.5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        </svg>\n    </button>\n</div>", directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+TestCaseDetailsRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestCaseDetailsRendererComponent, selector: "cqa-test-case-details-renderer", inputs: { step: "step", index: "index", isNested: "isNested", isInsideLoop: "isInsideLoop", branch: "branch", isReorder: "isReorder", selected: "selected", addStepBetweenAbove: "addStepBetweenAbove", addStepBetweenBelow: "addStepBetweenBelow", addStepBetween: "addStepBetween", dataProfileOptions: "dataProfileOptions", hasMoreDataProfiles: "hasMoreDataProfiles", isLoadingDataProfiles: "isLoadingDataProfiles", naturalTextActionsOptions: "naturalTextActionsOptions", setConditionTemplateVariables: "setConditionTemplateVariables" }, outputs: { nestedStepChange: "nestedStepChange", addStep: "addStep", deleteStep: "deleteStep", toggleExpanded: "toggleExpanded", groupNameChange: "groupNameChange", descriptionChange: "descriptionChange", reusableChange: "reusableChange", openExternal: "openExternal", edit: "edit", link: "link", duplicate: "duplicate", delete: "delete", viewDetails: "viewDetails", selectionChange: "selectionChange", conditionChange: "conditionChange", branchStepChange: "branchStepChange", addStepForBranch: "addStepForBranch", deleteStepWithBranch: "deleteStepWithBranch", addBranch: "addBranch", addElse: "addElse", deleteBranch: "deleteBranch", testDataProfileChange: "testDataProfileChange", startStepChange: "startStepChange", endStepChange: "endStepChange", maxIterationsChange: "maxIterationsChange", eventTypeChange: "eventTypeChange", parameterChange: "parameterChange", clickAction: "clickAction", dndDropInZone: "dndDropInZone", loadMoreDataProfiles: "loadMoreDataProfiles", searchDataProfiles: "searchDataProfiles", stepUpdate: "stepUpdate", addStepBetweenClick: "addStepBetweenClick", editInDepth: "editInDepth" }, host: { classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "stepHost", first: true, predicate: ["stepHost"], descendants: true, read: ViewContainerRef }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-relative cqa-step-renderer-hover-container\">\n    <button *ngIf=\"!isReorder && (addStepBetweenAbove && addStepBetween)\"\n        class=\"cqa-absolute cqa-top-[calc(0 - 12px)] cqa-left-[50%] cqa-translate-x-[-50%] cqa-p-0 cqa-z-[1] cqa-add-step-between-btn\"\n        style=\"top: -12px;\" (click)=\"addStepBetweenClick.emit({step: step, index: index, position: 'ABOVE'})\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <rect x=\"1\" y=\"1\" width=\"21.1822\" height=\"22\" rx=\"10.5911\" fill=\"white\" />\n            <rect x=\"1\" y=\"1\" width=\"21.1822\" height=\"22\" rx=\"10.5911\" stroke=\"#3F43EE\" stroke-width=\"2\" />\n            <path d=\"M8.5 12H15.5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            <path d=\"M12 8.5V15.5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        </svg>\n    </button>\n    <div class=\"cqa-step-host-wrapper\">\n        <ng-container #stepHost></ng-container>\n    </div>\n    <button *ngIf=\"!isReorder && (addStepBetweenBelow && addStepBetween)\"\n        class=\"cqa-absolute cqa-top-[calc(100%-12px)] cqa-left-[50%] cqa-translate-x-[-50%] cqa-p-0 cqa-z-[1] cqa-add-step-between-btn\"\n        (click)=\"addStepBetweenClick.emit({step: step, index: index, position: 'BELOW'})\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <rect x=\"1\" y=\"1\" width=\"21.1822\" height=\"22\" rx=\"10.5911\" fill=\"white\" />\n            <rect x=\"1\" y=\"1\" width=\"21.1822\" height=\"22\" rx=\"10.5911\" stroke=\"#3F43EE\" stroke-width=\"2\" />\n            <path d=\"M8.5 12H15.5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            <path d=\"M12 8.5V15.5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        </svg>\n    </button>\n</div>", directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseDetailsRendererComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cqa-test-case-details-renderer', host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-relative cqa-step-renderer-hover-container\">\n    <button *ngIf=\"!isReorder && (addStepBetweenAbove && addStepBetween)\"\n        class=\"cqa-absolute cqa-top-[calc(0 - 12px)] cqa-left-[50%] cqa-translate-x-[-50%] cqa-p-0 cqa-z-[1] cqa-add-step-between-btn\"\n        style=\"top: -12px;\" (click)=\"addStepBetweenClick.emit({step: step, index: index, position: 'ABOVE'})\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <rect x=\"1\" y=\"1\" width=\"21.1822\" height=\"22\" rx=\"10.5911\" fill=\"white\" />\n            <rect x=\"1\" y=\"1\" width=\"21.1822\" height=\"22\" rx=\"10.5911\" stroke=\"#3F43EE\" stroke-width=\"2\" />\n            <path d=\"M8.5 12H15.5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            <path d=\"M12 8.5V15.5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        </svg>\n    </button>\n    <div class=\"cqa-step-host-wrapper\">\n        <ng-container #stepHost></ng-container>\n    </div>\n    <button *ngIf=\"!isReorder && (addStepBetweenBelow && addStepBetween)\"\n        class=\"cqa-absolute cqa-top-[calc(100%-12px)] cqa-left-[50%] cqa-translate-x-[-50%] cqa-p-0 cqa-z-[1] cqa-add-step-between-btn\"\n        (click)=\"addStepBetweenClick.emit({step: step, index: index, position: 'BELOW'})\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <rect x=\"1\" y=\"1\" width=\"21.1822\" height=\"22\" rx=\"10.5911\" fill=\"white\" />\n            <rect x=\"1\" y=\"1\" width=\"21.1822\" height=\"22\" rx=\"10.5911\" stroke=\"#3F43EE\" stroke-width=\"2\" />\n            <path d=\"M8.5 12H15.5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            <path d=\"M12 8.5V15.5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        </svg>\n    </button>\n</div>" }]
@@ -19610,6 +19623,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Input
             }], isReorder: [{
                 type: Input
+            }], selected: [{
+                type: Input
             }], addStepBetweenAbove: [{
                 type: Input
             }], addStepBetweenBelow: [{
@@ -19705,6 +19720,7 @@ class TestCaseLoopStepComponent {
         this.isNested = false;
         this.isInsideLoop = false;
         this.isReorder = false;
+        this.selected = false;
         /** Options for the data profile dropdown - accepts DataProfileOption objects */
         this.dataProfileOptions = [];
         /** Indicates if more data profiles are available for loading */
@@ -19744,6 +19760,7 @@ class TestCaseLoopStepComponent {
         this.clickAction = new EventEmitter();
         /** Re-emit addStepBetweenClick from nested renderers */
         this.addStepBetweenClick = new EventEmitter();
+        this.selectionChange = new EventEmitter();
         /** Expose global constructors for template (Angular templates don't have String/Number) */
         this.stringFn = String;
         this.numberFn = Number;
@@ -19769,11 +19786,15 @@ class TestCaseLoopStepComponent {
             this.endStep = this.config.endStep;
             this.nestedSteps = this.config.nestedSteps || [];
             this.expanded = this.config.expanded !== undefined ? this.config.expanded : true;
+            this.selected = this.config.selected || false;
         }
         this.buildEditForm();
         this.buildSelectConfigs();
     }
     ngOnChanges(changes) {
+        if (changes['config'] && this.config) {
+            this.selected = this.config.selected || false;
+        }
         if (changes['dataProfileOptions'] || changes['hasMoreDataProfiles'] || changes['isLoadingDataProfiles']) {
             this.updateTestDataProfileSelectConfig();
         }
@@ -20109,15 +20130,19 @@ class TestCaseLoopStepComponent {
     onDelete() {
         this.delete.emit();
     }
+    onSelectionChange(checked) {
+        this.selected = checked;
+        this.selectionChange.emit(checked);
+    }
     onMoreOptions() {
         this.moreOptions.emit();
     }
 }
 TestCaseLoopStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseLoopStepComponent, deps: [{ token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-TestCaseLoopStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestCaseLoopStepComponent, selector: "cqa-test-case-loop-step", inputs: { config: "config", id: "id", loopType: "loopType", stepNumber: "stepNumber", condition: "condition", maxIterations: "maxIterations", testDataProfile: "testDataProfile", startStep: "startStep", endStep: "endStep", nestedSteps: "nestedSteps", expanded: "expanded", isNested: "isNested", isInsideLoop: "isInsideLoop", isReorder: "isReorder", dataProfileOptions: "dataProfileOptions", hasMoreDataProfiles: "hasMoreDataProfiles", isLoadingDataProfiles: "isLoadingDataProfiles", naturalTextActionsOptions: "naturalTextActionsOptions", addStepBetweenAbove: "addStepBetweenAbove", addStepBetweenBelow: "addStepBetweenBelow", addStepBetween: "addStepBetween" }, outputs: { toggleExpanded: "toggleExpanded", testDataProfileChange: "testDataProfileChange", startStepChange: "startStepChange", endStepChange: "endStepChange", conditionChange: "conditionChange", maxIterationsChange: "maxIterationsChange", nestedStepChange: "nestedStepChange", addStep: "addStep", deleteStep: "deleteStep", duplicate: "duplicate", delete: "delete", moreOptions: "moreOptions", editInDepth: "editInDepth", edit: "edit", dndDropInZone: "dndDropInZone", loadMoreDataProfiles: "loadMoreDataProfiles", searchDataProfiles: "searchDataProfiles", stepUpdate: "stepUpdate", clickAction: "clickAction", addStepBetweenClick: "addStepBetweenClick" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col\">\n  <!-- Inline Edit Mode: Frame 2147224910 - flex row, 1056\u00D736, gap 12px, flex-none -->\n  <div *ngIf=\"isEditing\" class=\"cqa-py-2.5 cqa-px-4 cqa-flex cqa-items-center cqa-gap-3 cqa-justify-between\">\n    <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-grow\">\n      <!-- Loop Type Label -->\n      <div class=\"cqa-font-semibold cqa-text-[#1C398E] cqa-text-[12px] cqa-leading-[15px]\">\n        {{ getLoopTypeLabel() }}\n      </div>\n\n      <!-- FOR LOOP inline edit: cqa-dynamic-select (same usage as default stories) -->\n      <ng-container *ngIf=\"loopType === 'for'\">\n        <!-- First select: width 216.25px, height 36px, gap 4px, opacity 1 -->\n        <cqa-dynamic-select [form]=\"editForm\" [config]=\"forOptionTypeSelectConfig\"\n          class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-dynamic-select>\n        <cqa-dynamic-select [form]=\"editForm\" [config]=\"testDataProfileSelectConfig\"\n          class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-dynamic-select>\n        <cqa-dynamic-select [form]=\"editForm\" [config]=\"startStepSelectConfig\"\n          class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-dynamic-select>\n        <cqa-dynamic-select [form]=\"editForm\" [config]=\"endStepSelectConfig\"\n          class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-dynamic-select>\n      </ng-container>\n\n      <!-- WHILE LOOP inline edit -->\n      <ng-container *ngIf=\"isWhileLoop()\">\n        <cqa-dynamic-select [form]=\"editForm\" [config]=\"conditionSelectConfig\"\n          class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-dynamic-select>\n      </ng-container>\n\n      <!-- Edit In depth link -->\n      <a href=\"#\" (click)=\"onEditInDepth(); $event.preventDefault()\"\n        class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-[2px] cqa-no-underline\">\n        Edit In depth\n        <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\"\n            fill=\"#3F43EE\" />\n        </svg>\n      </a>\n    </div>\n\n    <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n      <!-- Cancel / Apply -->\n      <cqa-button variant=\"outlined\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Cancel'\"\n        (clicked)=\"onEditCancel()\"></cqa-button>\n      <cqa-button variant=\"filled\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Apply'\"\n        (clicked)=\"onEditApply()\"></cqa-button>\n    </div>\n  </div>\n\n  <!-- Loop Header (normal view when not editing) -->\n  <div *ngIf=\"!isEditing\"\n    [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 ' + (isInsideLoop ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4')\">\n    <!-- Expand/Collapse Icon -->\n    <button type=\"button\" (click)=\"onToggleExpanded()\" class=\"cqa-p-0\">\n      <svg [class.cqa-rotate-180]=\"!expanded\" class=\"cqa-transition-transform\" width=\"16\" height=\"16\"\n        viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M12 10L8 6L4 10\" stroke=\"#6B7280\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n          stroke-linejoin=\"round\" />\n      </svg>\n    </button>\n\n    <!-- Loop Icon -->\n    <div *ngIf=\"loopType === 'for'\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M11.334 1.33325L14.0007 3.99992L11.334 6.66659\" stroke=\"#1C398E\" stroke-width=\"1.33333\"\n          stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path d=\"M2 7.33333V6.66667C2 5.95942 2.28095 5.28115 2.78105 4.78105C3.28115 4.28095 3.95942 4 4.66667 4H14\"\n          stroke=\"#1C398E\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path d=\"M4.66667 14.6666L2 11.9999L4.66667 9.33325\" stroke=\"#1C398E\" stroke-width=\"1.33333\"\n          stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path\n          d=\"M14 8.66675V9.33341C14 10.0407 13.719 10.7189 13.219 11.219C12.7189 11.7191 12.0406 12.0001 11.3333 12.0001H2\"\n          stroke=\"#1C398E\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n      </svg>\n    </div>\n    <div *ngIf=\"loopType === 'while'\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M11.334 1.33325L14.0007 3.99992L11.334 6.66659\" stroke=\"#59168B\" stroke-width=\"1.33333\"\n          stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path d=\"M2 7.33333V6.66667C2 5.95942 2.28095 5.28115 2.78105 4.78105C3.28115 4.28095 3.95942 4 4.66667 4H14\"\n          stroke=\"#59168B\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path d=\"M4.66667 14.6666L2 11.9999L4.66667 9.33325\" stroke=\"#59168B\" stroke-width=\"1.33333\"\n          stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path\n          d=\"M14 8.66675V9.33341C14 10.0407 13.719 10.7189 13.219 11.219C12.7189 11.7191 12.0406 12.0001 11.3333 12.0001H2\"\n          stroke=\"#59168B\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n      </svg>\n    </div>\n\n    <!-- Loop Type Label -->\n    <span class=\"cqa-font-semibold cqa-text-[#1C398E] cqa-text-[12px] cqa-leading-none\">\n      {{ getLoopTypeLabel() }}\n    </span>\n\n    <!-- For Loop Controls -->\n    <div *ngIf=\"loopType === 'for'\" class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-ml-2\">\n      <!-- Test Data Profile Button -->\n      <button type=\"button\" [class.cqa-bg-primary-100]=\"testDataProfile\" [class.cqa-text-primary]=\"testDataProfile\"\n        class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\">\n        {{ getTestDataProfileLabel() }}\n      </button>\n\n      <!-- Start Button -->\n      <button type=\"button\" [class.cqa-bg-primary-100]=\"startStep\" [class.cqa-text-primary]=\"startStep\"\n        class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\">\n        {{ getStartStepLabel() }}\n      </button>\n\n      <!-- End Button -->\n      <button type=\"button\" [class.cqa-bg-primary-100]=\"endStep\" [class.cqa-text-primary]=\"endStep\"\n        class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\">\n        {{ getEndStepLabel() }}\n      </button>\n    </div>\n\n    <!-- While Loop Condition (only show if condition exists) -->\n    <div *ngIf=\"isWhileLoop() && condition\" class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-ml-2 cqa-flex-1\">\n      <span class=\"cqa-text-gray-700 cqa-text-sm\">\n        While\n      </span>\n      <span class=\"cqa-text-gray-900 cqa-text-sm\" [innerHTML]=\"getConditionDisplay()\"></span>\n    </div>\n\n    <!-- Steps Summary -->\n    <div\n      class=\"cqa-ml-auto cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-rounded-lg cqa-py-0.5 cqa-px-2 cqa-text-[#0A0A0A] cqa-text-[12px] cqa-leading-[15px]\">\n      {{ getStepsSummary() }}\n    </div>\n\n    <!-- Action Icons: Edit, Link, Duplicate, Delete (show on hover) -->\n    <div class=\"step-actions cqa-flex cqa-items-center cqa-gap-3 cqa-px-[7px]\">\n      <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\"\n        class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M7 11.6666H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path\n            d=\"M9.55208 2.1128C9.7843 1.88058 10.0993 1.75012 10.4277 1.75012C10.7561 1.75012 11.071 1.88058 11.3033 2.1128C11.5355 2.34502 11.6659 2.65998 11.6659 2.98838C11.6659 3.31679 11.5355 3.63175 11.3033 3.86397L4.29742 10.8704C4.15864 11.0092 3.9871 11.1107 3.79867 11.1656L2.12333 11.6544C2.07314 11.669 2.01993 11.6699 1.96928 11.6569C1.91863 11.6439 1.8724 11.6176 1.83543 11.5806C1.79846 11.5437 1.7721 11.4974 1.75913 11.4468C1.74615 11.3961 1.74703 11.3429 1.76167 11.2927L2.2505 9.61738C2.30546 9.42916 2.40698 9.25783 2.54567 9.11922L9.55208 2.1128Z\"\n            stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        </svg>\n      </button>\n      <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\"\n        class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\"\n            stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path\n            d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\"\n            stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\n      </button>\n      <button type=\"button\" (click)=\"onDuplicate(); $event.stopPropagation()\" title=\"Duplicate\"\n        class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\"\n            stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path\n            d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\"\n            stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        </svg>\n      </button>\n      <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\"\n        class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M1.75 3.5H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path\n            d=\"M11.0827 3.5V11.6667C11.0827 12.25 10.4993 12.8333 9.91602 12.8333H4.08268C3.49935 12.8333 2.91602 12.25 2.91602 11.6667V3.5\"\n            stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path\n            d=\"M4.66602 3.49996V2.33329C4.66602 1.74996 5.24935 1.16663 5.83268 1.16663H8.16602C8.74935 1.16663 9.33268 1.74996 9.33268 2.33329V3.49996\"\n            stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path d=\"M5.83398 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path d=\"M8.16602 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\n      </button>\n    </div>\n  </div>\n\n  <!-- Expanded Content with Nested Steps (renderer dispatches by step type, n-level nesting) -->\n  <div *ngIf=\"expanded\" class=\"cqa-flex cqa-flex-col\">\n    <div *ngIf=\"!isReorder\" class=\"cqa-flex cqa-flex-col\">\n      <cqa-test-case-details-renderer *ngFor=\"let step of nestedSteps; let i = index\" [step]=\"step\" [index]=\"i\"\n        [isNested]=\"true\" [isInsideLoop]=\"true\" [isReorder]=\"isReorder\" \n        [addStepBetween]=\"addStepBetween\"\n        [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n        [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n        (nestedStepChange)=\"onNestedStepChange($event.step, $event.index)\"\n        (addStep)=\"onAddStep()\" (deleteStep)=\"onDeleteStep($event)\"\n        (toggleExpanded)=\"onNestedToggleExpanded($event, step, i)\"\n        (groupNameChange)=\"$any(step).groupName = $event; onNestedStepChange(step, i)\"\n        (descriptionChange)=\"$any(step).description = $event; onNestedStepChange(step, i)\"\n        (reusableChange)=\"$any(step).reusable = $event; onNestedStepChange(step, i)\"\n        (openExternal)=\"onNestedStepChange(step, i)\" (edit)=\"onNestedStepChange(step, i)\"\n        (link)=\"onNestedStepChange(step, i)\" (duplicate)=\"onNestedStepChange(step, i)\" (delete)=\"onDeleteStep(i)\"\n        (conditionChange)=\"$any(step).condition = $event; onNestedStepChange(step, i)\"\n        (branchStepChange)=\"onNestedStepChange(step, i)\" (addBranch)=\"onNestedConditionAddBranch($any(step), i)\"\n        (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event, i)\"\n        (testDataProfileChange)=\"$any(step).testDataProfile = $event; onNestedStepChange(step, i)\"\n        (startStepChange)=\"$any(step).startStep = $event; onNestedStepChange(step, i)\"\n        (endStepChange)=\"$any(step).endStep = $event; onNestedStepChange(step, i)\"\n        (maxIterationsChange)=\"$any(step).maxIterations = $event; onNestedStepChange(step, i)\"\n        (eventTypeChange)=\"$any(step).eventType = $event; onNestedStepChange(step, i)\"\n        (parameterChange)=\"onNestedStepChange(step, i)\"\n        (selectionChange)=\"$any(step).selected = $event; onNestedStepChange(step, i)\"\n        (loadMoreDataProfiles)=\"loadMoreDataProfiles.emit($event)\"\n        (searchDataProfiles)=\"searchDataProfiles.emit($event)\"\n        (dndDropInZone)=\"dndDropInZone.emit($event)\"\n        (clickAction)=\"clickAction.emit($event)\"\n        (editInDepth)=\"editInDepth.emit($event)\"\n        (addStepBetweenClick)=\"addStepBetweenClick.emit($event)\">\n      </cqa-test-case-details-renderer>\n    </div>\n    <div *ngIf=\"isReorder\" class=\"cqa-flex cqa-flex-col nested-step-drop-list\"\n         [dndDropzone]=\"['step']\"\n         dndEffectAllowed=\"move\"\n         dndDragoverClass=\"dndDragover\"\n         (dndDrop)=\"onDndDrop($event)\">\n      <div dndPlaceholderRef class=\"step-drag-placeholder-nested cqa-my-1 cqa-min-h-[50px] cqa-border-2 cqa-border-dashed cqa-border-[#3F43EE] cqa-rounded cqa-bg-[rgba(63,67,238,0.08)] cqa-flex cqa-items-center cqa-justify-center cqa-text-[#3F43EE] cqa-text-xs\">Drop here</div>\n      <div *ngFor=\"let step of nestedSteps; let i = index\" class=\"nested-step-drag-item\"\n           [dndDraggable]=\"step\"\n           dndEffectAllowed=\"move\"\n           dndType=\"step\">\n        <cqa-test-case-details-renderer [step]=\"step\" [index]=\"i\"\n          [isNested]=\"true\" [isInsideLoop]=\"true\" [isReorder]=\"isReorder\"\n          [addStepBetweenAbove]=\"addStepBetweenAbove\"\n          [addStepBetweenBelow]=\"addStepBetweenBelow\"\n          [addStepBetween]=\"addStepBetween\"\n          [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n          [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n          (nestedStepChange)=\"onNestedStepChange($event.step, $event.index)\"\n          (addStep)=\"onAddStep()\" (deleteStep)=\"onDeleteStep($event)\"\n          (toggleExpanded)=\"onNestedToggleExpanded($event, step, i)\"\n          (groupNameChange)=\"$any(step).groupName = $event; onNestedStepChange(step, i)\"\n          (descriptionChange)=\"$any(step).description = $event; onNestedStepChange(step, i)\"\n          (reusableChange)=\"$any(step).reusable = $event; onNestedStepChange(step, i)\"\n          (openExternal)=\"onNestedStepChange(step, i)\" (edit)=\"onNestedStepChange(step, i)\"\n          (link)=\"onNestedStepChange(step, i)\" (duplicate)=\"onNestedStepChange(step, i)\" (delete)=\"onDeleteStep(i)\"\n          (conditionChange)=\"$any(step).condition = $event; onNestedStepChange(step, i)\"\n          (branchStepChange)=\"onNestedStepChange(step, i)\" (addBranch)=\"onNestedConditionAddBranch($any(step), i)\"\n          (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event, i)\"\n          (testDataProfileChange)=\"$any(step).testDataProfile = $event; onNestedStepChange(step, i)\"\n          (startStepChange)=\"$any(step).startStep = $event; onNestedStepChange(step, i)\"\n          (endStepChange)=\"$any(step).endStep = $event; onNestedStepChange(step, i)\"\n          (maxIterationsChange)=\"$any(step).maxIterations = $event; onNestedStepChange(step, i)\"\n          (eventTypeChange)=\"$any(step).eventType = $event; onNestedStepChange(step, i)\"\n          (parameterChange)=\"onNestedStepChange(step, i)\"\n          (selectionChange)=\"$any(step).selected = $event; onNestedStepChange(step, i)\"\n        (loadMoreDataProfiles)=\"loadMoreDataProfiles.emit($event)\"\n        (searchDataProfiles)=\"searchDataProfiles.emit($event)\"\n        (dndDropInZone)=\"dndDropInZone.emit($event)\"\n        (clickAction)=\"clickAction.emit($event)\"\n        (editInDepth)=\"editInDepth.emit($event)\"\n        (addStepBetweenClick)=\"addStepBetweenClick.emit($event)\">\n        </cqa-test-case-details-renderer>\n      </div>\n    </div>\n\n    <!-- END Marker -->\n    <div\n      [class]=\"'cqa-pl-4 cqa-py-1 cqa-bg-[#DBEAFE80] cqa-text-[#1C398E] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium'\"\n      style=\"border-top: 1px solid #BEDBFF;\">\n      {{ getEndLabel() }}\n    </div>\n  </div>\n</div>", styles: [".step-actions{opacity:0;transition:opacity .15s ease}.step-row:hover .step-actions{opacity:1}\n"], components: [{ type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: TestCaseDetailsRendererComponent, selector: "cqa-test-case-details-renderer", inputs: ["step", "index", "isNested", "isInsideLoop", "branch", "isReorder", "addStepBetweenAbove", "addStepBetweenBelow", "addStepBetween", "dataProfileOptions", "hasMoreDataProfiles", "isLoadingDataProfiles", "naturalTextActionsOptions", "setConditionTemplateVariables"], outputs: ["nestedStepChange", "addStep", "deleteStep", "toggleExpanded", "groupNameChange", "descriptionChange", "reusableChange", "openExternal", "edit", "link", "duplicate", "delete", "viewDetails", "selectionChange", "conditionChange", "branchStepChange", "addStepForBranch", "deleteStepWithBranch", "addBranch", "addElse", "deleteBranch", "testDataProfileChange", "startStepChange", "endStepChange", "maxIterationsChange", "eventTypeChange", "parameterChange", "clickAction", "dndDropInZone", "loadMoreDataProfiles", "searchDataProfiles", "stepUpdate", "addStepBetweenClick", "editInDepth"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.DndDropzoneDirective, selector: "[dndDropzone]", inputs: ["dndDropzone", "dndEffectAllowed", "dndAllowExternal", "dndHorizontal", "dndDragoverClass", "dndDropzoneDisabledClass", "dndDisableIf", "dndDisableDropIf"], outputs: ["dndDragover", "dndDrop"] }, { type: i5.DndPlaceholderRefDirective, selector: "[dndPlaceholderRef]" }, { type: i5.DndDraggableDirective, selector: "[dndDraggable]", inputs: ["dndDraggable", "dndEffectAllowed", "dndType", "dndDraggingClass", "dndDraggingSourceClass", "dndDraggableDisabledClass", "dndDragImageOffsetFunction", "dndDisableIf", "dndDisableDragIf"], outputs: ["dndStart", "dndDrag", "dndEnd", "dndMoved", "dndCopied", "dndLinked", "dndCanceled"] }] });
+TestCaseLoopStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestCaseLoopStepComponent, selector: "cqa-test-case-loop-step", inputs: { config: "config", id: "id", loopType: "loopType", stepNumber: "stepNumber", condition: "condition", maxIterations: "maxIterations", testDataProfile: "testDataProfile", startStep: "startStep", endStep: "endStep", nestedSteps: "nestedSteps", expanded: "expanded", isNested: "isNested", isInsideLoop: "isInsideLoop", isReorder: "isReorder", selected: "selected", dataProfileOptions: "dataProfileOptions", hasMoreDataProfiles: "hasMoreDataProfiles", isLoadingDataProfiles: "isLoadingDataProfiles", naturalTextActionsOptions: "naturalTextActionsOptions", addStepBetweenAbove: "addStepBetweenAbove", addStepBetweenBelow: "addStepBetweenBelow", addStepBetween: "addStepBetween" }, outputs: { toggleExpanded: "toggleExpanded", testDataProfileChange: "testDataProfileChange", startStepChange: "startStepChange", endStepChange: "endStepChange", conditionChange: "conditionChange", maxIterationsChange: "maxIterationsChange", nestedStepChange: "nestedStepChange", addStep: "addStep", deleteStep: "deleteStep", duplicate: "duplicate", delete: "delete", moreOptions: "moreOptions", editInDepth: "editInDepth", edit: "edit", dndDropInZone: "dndDropInZone", loadMoreDataProfiles: "loadMoreDataProfiles", searchDataProfiles: "searchDataProfiles", stepUpdate: "stepUpdate", clickAction: "clickAction", addStepBetweenClick: "addStepBetweenClick", selectionChange: "selectionChange" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col\">\n  <!-- Inline Edit Mode: Frame 2147224910 - flex row, 1056\u00D736, gap 12px, flex-none -->\n  <div *ngIf=\"isEditing\" class=\"cqa-py-2.5 cqa-px-4 cqa-flex cqa-items-center cqa-gap-3 cqa-justify-between\">\n    <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-grow\">\n      <!-- Loop Type Label -->\n      <div class=\"cqa-font-semibold cqa-text-[#1C398E] cqa-text-[12px] cqa-leading-[15px]\">\n        {{ getLoopTypeLabel() }}\n      </div>\n\n      <!-- FOR LOOP inline edit: cqa-dynamic-select (same usage as default stories) -->\n      <ng-container *ngIf=\"loopType === 'for'\">\n        <!-- First select: width 216.25px, height 36px, gap 4px, opacity 1 -->\n        <cqa-dynamic-select [form]=\"editForm\" [config]=\"forOptionTypeSelectConfig\"\n          class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-dynamic-select>\n        <cqa-dynamic-select [form]=\"editForm\" [config]=\"testDataProfileSelectConfig\"\n          class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-dynamic-select>\n        <cqa-dynamic-select [form]=\"editForm\" [config]=\"startStepSelectConfig\"\n          class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-dynamic-select>\n        <cqa-dynamic-select [form]=\"editForm\" [config]=\"endStepSelectConfig\"\n          class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-dynamic-select>\n      </ng-container>\n\n      <!-- WHILE LOOP inline edit -->\n      <ng-container *ngIf=\"isWhileLoop()\">\n        <cqa-dynamic-select [form]=\"editForm\" [config]=\"conditionSelectConfig\"\n          class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-dynamic-select>\n      </ng-container>\n\n      <!-- Edit In depth link -->\n      <a href=\"#\" (click)=\"onEditInDepth(); $event.preventDefault()\"\n        class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-[2px] cqa-no-underline\">\n        Edit In depth\n        <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\"\n            fill=\"#3F43EE\" />\n        </svg>\n      </a>\n    </div>\n\n    <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n      <!-- Cancel / Apply -->\n      <cqa-button variant=\"outlined\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Cancel'\"\n        (clicked)=\"onEditCancel()\"></cqa-button>\n      <cqa-button variant=\"filled\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Apply'\"\n        (clicked)=\"onEditApply()\"></cqa-button>\n    </div>\n  </div>\n\n  <!-- Loop Header (normal view when not editing) -->\n  <div *ngIf=\"!isEditing\"\n    [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 ' + (isInsideLoop ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4')\">\n    <!-- Drag Handle Icon (when isReorder is true) -->\n    <div *ngIf=\"isReorder\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\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    <!-- Checkbox (when isReorder is false) -->\n    <label *ngIf=\"!isReorder\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative\">\n      <input type=\"checkbox\"\n        [ngModel]=\"selected\"\n        (ngModelChange)=\"onSelectionChange($event)\"\n        class=\"cqa-h-4 cqa-w-4 cqa-cursor-pointer cqa-transition-all cqa-appearance-none cqa-rounded shadow hover:cqa-shadow-md cqa-border cqa-border-solid cqa-border-slate-300 cqa-flex-shrink-0\"\n        [class.cqa-bg-[#3F43EE]]=\"selected\"\n        [class.cqa-border-[#3F43EE]]=\"selected\"\n        id=\"check-loop-step\" />\n      <span class=\"cqa-absolute cqa-text-white cqa-top-1/2 cqa-left-1/2 cqa--translate-x-1/2 cqa--translate-y-1/2 cqa-pointer-events-none cqa-flex cqa-items-center cqa-justify-center\"\n        [class.cqa-opacity-0]=\"!selected\"\n        [class.cqa-opacity-100]=\"selected\">\n        <svg width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 3.125L4.5 8.625L2 6.125\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      </span>\n    </label>\n    <!-- Expand/Collapse Icon -->\n    <button type=\"button\" (click)=\"onToggleExpanded()\" class=\"cqa-p-0\">\n      <svg [class.cqa-rotate-180]=\"!expanded\" class=\"cqa-transition-transform\" width=\"16\" height=\"16\"\n        viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M12 10L8 6L4 10\" stroke=\"#6B7280\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n          stroke-linejoin=\"round\" />\n      </svg>\n    </button>\n\n    <!-- Loop Icon -->\n    <div *ngIf=\"loopType === 'for'\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M11.334 1.33325L14.0007 3.99992L11.334 6.66659\" stroke=\"#1C398E\" stroke-width=\"1.33333\"\n          stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path d=\"M2 7.33333V6.66667C2 5.95942 2.28095 5.28115 2.78105 4.78105C3.28115 4.28095 3.95942 4 4.66667 4H14\"\n          stroke=\"#1C398E\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path d=\"M4.66667 14.6666L2 11.9999L4.66667 9.33325\" stroke=\"#1C398E\" stroke-width=\"1.33333\"\n          stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path\n          d=\"M14 8.66675V9.33341C14 10.0407 13.719 10.7189 13.219 11.219C12.7189 11.7191 12.0406 12.0001 11.3333 12.0001H2\"\n          stroke=\"#1C398E\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n      </svg>\n    </div>\n    <div *ngIf=\"loopType === 'while'\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M11.334 1.33325L14.0007 3.99992L11.334 6.66659\" stroke=\"#59168B\" stroke-width=\"1.33333\"\n          stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path d=\"M2 7.33333V6.66667C2 5.95942 2.28095 5.28115 2.78105 4.78105C3.28115 4.28095 3.95942 4 4.66667 4H14\"\n          stroke=\"#59168B\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path d=\"M4.66667 14.6666L2 11.9999L4.66667 9.33325\" stroke=\"#59168B\" stroke-width=\"1.33333\"\n          stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path\n          d=\"M14 8.66675V9.33341C14 10.0407 13.719 10.7189 13.219 11.219C12.7189 11.7191 12.0406 12.0001 11.3333 12.0001H2\"\n          stroke=\"#59168B\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n      </svg>\n    </div>\n\n    <!-- Loop Type Label -->\n    <span class=\"cqa-font-semibold cqa-text-[#1C398E] cqa-text-[12px] cqa-leading-none\">\n      {{ getLoopTypeLabel() }}\n    </span>\n\n    <!-- For Loop Controls -->\n    <div *ngIf=\"loopType === 'for'\" class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-ml-2\">\n      <!-- Test Data Profile Button -->\n      <button type=\"button\" [class.cqa-bg-primary-100]=\"testDataProfile\" [class.cqa-text-primary]=\"testDataProfile\"\n        class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\">\n        {{ getTestDataProfileLabel() }}\n      </button>\n\n      <!-- Start Button -->\n      <button type=\"button\" [class.cqa-bg-primary-100]=\"startStep\" [class.cqa-text-primary]=\"startStep\"\n        class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\">\n        {{ getStartStepLabel() }}\n      </button>\n\n      <!-- End Button -->\n      <button type=\"button\" [class.cqa-bg-primary-100]=\"endStep\" [class.cqa-text-primary]=\"endStep\"\n        class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\">\n        {{ getEndStepLabel() }}\n      </button>\n    </div>\n\n    <!-- While Loop Condition (only show if condition exists) -->\n    <div *ngIf=\"isWhileLoop() && condition\" class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-ml-2 cqa-flex-1\">\n      <span class=\"cqa-text-gray-700 cqa-text-sm\">\n        While\n      </span>\n      <span class=\"cqa-text-gray-900 cqa-text-sm\" [innerHTML]=\"getConditionDisplay()\"></span>\n    </div>\n\n    <!-- Steps Summary -->\n    <div\n      class=\"cqa-ml-auto cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-rounded-lg cqa-py-0.5 cqa-px-2 cqa-text-[#0A0A0A] cqa-text-[12px] cqa-leading-[15px]\">\n      {{ getStepsSummary() }}\n    </div>\n\n    <!-- Action Icons: Edit, Link, Duplicate, Delete (show on hover) -->\n    <div class=\"step-actions cqa-flex cqa-items-center cqa-gap-3 cqa-px-[7px]\">\n      <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\"\n        class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M7 11.6666H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path\n            d=\"M9.55208 2.1128C9.7843 1.88058 10.0993 1.75012 10.4277 1.75012C10.7561 1.75012 11.071 1.88058 11.3033 2.1128C11.5355 2.34502 11.6659 2.65998 11.6659 2.98838C11.6659 3.31679 11.5355 3.63175 11.3033 3.86397L4.29742 10.8704C4.15864 11.0092 3.9871 11.1107 3.79867 11.1656L2.12333 11.6544C2.07314 11.669 2.01993 11.6699 1.96928 11.6569C1.91863 11.6439 1.8724 11.6176 1.83543 11.5806C1.79846 11.5437 1.7721 11.4974 1.75913 11.4468C1.74615 11.3961 1.74703 11.3429 1.76167 11.2927L2.2505 9.61738C2.30546 9.42916 2.40698 9.25783 2.54567 9.11922L9.55208 2.1128Z\"\n            stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        </svg>\n      </button>\n      <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\"\n        class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\"\n            stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path\n            d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\"\n            stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\n      </button>\n      <button type=\"button\" (click)=\"onDuplicate(); $event.stopPropagation()\" title=\"Duplicate\"\n        class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\"\n            stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path\n            d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\"\n            stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        </svg>\n      </button>\n      <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\"\n        class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M1.75 3.5H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path\n            d=\"M11.0827 3.5V11.6667C11.0827 12.25 10.4993 12.8333 9.91602 12.8333H4.08268C3.49935 12.8333 2.91602 12.25 2.91602 11.6667V3.5\"\n            stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path\n            d=\"M4.66602 3.49996V2.33329C4.66602 1.74996 5.24935 1.16663 5.83268 1.16663H8.16602C8.74935 1.16663 9.33268 1.74996 9.33268 2.33329V3.49996\"\n            stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path d=\"M5.83398 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path d=\"M8.16602 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\n      </button>\n    </div>\n  </div>\n\n  <!-- Expanded Content with Nested Steps (renderer dispatches by step type, n-level nesting) -->\n  <div *ngIf=\"expanded\" class=\"cqa-flex cqa-flex-col\">\n    <div *ngIf=\"!isReorder\" class=\"cqa-flex cqa-flex-col\">\n      <cqa-test-case-details-renderer *ngFor=\"let step of nestedSteps; let i = index\" [step]=\"step\" [index]=\"i\"\n        [selected]=\"$any(step).selected\"\n        [isNested]=\"true\" [isInsideLoop]=\"true\" [isReorder]=\"isReorder\"\n        [addStepBetween]=\"addStepBetween\"\n        [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n        [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n        (nestedStepChange)=\"onNestedStepChange($event.step, $event.index)\"\n        (addStep)=\"onAddStep()\" (deleteStep)=\"onDeleteStep($event)\"\n        (toggleExpanded)=\"onNestedToggleExpanded($event, step, i)\"\n        (groupNameChange)=\"$any(step).groupName = $event; onNestedStepChange(step, i)\"\n        (descriptionChange)=\"$any(step).description = $event; onNestedStepChange(step, i)\"\n        (reusableChange)=\"$any(step).reusable = $event; onNestedStepChange(step, i)\"\n        (openExternal)=\"onNestedStepChange(step, i)\" (edit)=\"onNestedStepChange(step, i)\"\n        (link)=\"onNestedStepChange(step, i)\" (duplicate)=\"onNestedStepChange(step, i)\" (delete)=\"onDeleteStep(i)\"\n        (conditionChange)=\"$any(step).condition = $event; onNestedStepChange(step, i)\"\n        (branchStepChange)=\"onNestedStepChange(step, i)\" (addBranch)=\"onNestedConditionAddBranch($any(step), i)\"\n        (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event, i)\"\n        (testDataProfileChange)=\"$any(step).testDataProfile = $event; onNestedStepChange(step, i)\"\n        (startStepChange)=\"$any(step).startStep = $event; onNestedStepChange(step, i)\"\n        (endStepChange)=\"$any(step).endStep = $event; onNestedStepChange(step, i)\"\n        (maxIterationsChange)=\"$any(step).maxIterations = $event; onNestedStepChange(step, i)\"\n        (eventTypeChange)=\"$any(step).eventType = $event; onNestedStepChange(step, i)\"\n        (parameterChange)=\"onNestedStepChange(step, i)\"\n        (selectionChange)=\"$any(step).selected = $event; onNestedStepChange(step, i)\"\n        (loadMoreDataProfiles)=\"loadMoreDataProfiles.emit($event)\"\n        (searchDataProfiles)=\"searchDataProfiles.emit($event)\"\n        (dndDropInZone)=\"dndDropInZone.emit($event)\"\n        (clickAction)=\"clickAction.emit($event)\"\n        (editInDepth)=\"editInDepth.emit($event)\"\n        (addStepBetweenClick)=\"addStepBetweenClick.emit($event)\">\n      </cqa-test-case-details-renderer>\n    </div>\n    <div *ngIf=\"isReorder\" class=\"cqa-flex cqa-flex-col nested-step-drop-list\"\n         [dndDropzone]=\"['step']\"\n         dndEffectAllowed=\"move\"\n         dndDragoverClass=\"dndDragover\"\n         (dndDrop)=\"onDndDrop($event)\">\n      <div dndPlaceholderRef class=\"step-drag-placeholder-nested cqa-my-1 cqa-min-h-[50px] cqa-border-2 cqa-border-dashed cqa-border-[#3F43EE] cqa-rounded cqa-bg-[rgba(63,67,238,0.08)] cqa-flex cqa-items-center cqa-justify-center cqa-text-[#3F43EE] cqa-text-xs\">Drop here</div>\n      <div *ngFor=\"let step of nestedSteps; let i = index\" class=\"nested-step-drag-item\"\n           [dndDraggable]=\"step\"\n           dndEffectAllowed=\"move\"\n           dndType=\"step\">\n        <cqa-test-case-details-renderer [step]=\"step\" [index]=\"i\"\n          [selected]=\"$any(step).selected\"\n          [isNested]=\"true\" [isInsideLoop]=\"true\" [isReorder]=\"isReorder\"\n          [addStepBetweenAbove]=\"addStepBetweenAbove\"\n          [addStepBetweenBelow]=\"addStepBetweenBelow\"\n          [addStepBetween]=\"addStepBetween\"\n          [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n          [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n          (nestedStepChange)=\"onNestedStepChange($event.step, $event.index)\"\n          (addStep)=\"onAddStep()\" (deleteStep)=\"onDeleteStep($event)\"\n          (toggleExpanded)=\"onNestedToggleExpanded($event, step, i)\"\n          (groupNameChange)=\"$any(step).groupName = $event; onNestedStepChange(step, i)\"\n          (descriptionChange)=\"$any(step).description = $event; onNestedStepChange(step, i)\"\n          (reusableChange)=\"$any(step).reusable = $event; onNestedStepChange(step, i)\"\n          (openExternal)=\"onNestedStepChange(step, i)\" (edit)=\"onNestedStepChange(step, i)\"\n          (link)=\"onNestedStepChange(step, i)\" (duplicate)=\"onNestedStepChange(step, i)\" (delete)=\"onDeleteStep(i)\"\n          (conditionChange)=\"$any(step).condition = $event; onNestedStepChange(step, i)\"\n          (branchStepChange)=\"onNestedStepChange(step, i)\" (addBranch)=\"onNestedConditionAddBranch($any(step), i)\"\n          (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event, i)\"\n          (testDataProfileChange)=\"$any(step).testDataProfile = $event; onNestedStepChange(step, i)\"\n          (startStepChange)=\"$any(step).startStep = $event; onNestedStepChange(step, i)\"\n          (endStepChange)=\"$any(step).endStep = $event; onNestedStepChange(step, i)\"\n          (maxIterationsChange)=\"$any(step).maxIterations = $event; onNestedStepChange(step, i)\"\n          (eventTypeChange)=\"$any(step).eventType = $event; onNestedStepChange(step, i)\"\n          (parameterChange)=\"onNestedStepChange(step, i)\"\n          (selectionChange)=\"$any(step).selected = $event; onNestedStepChange(step, i)\"\n        (loadMoreDataProfiles)=\"loadMoreDataProfiles.emit($event)\"\n        (searchDataProfiles)=\"searchDataProfiles.emit($event)\"\n        (dndDropInZone)=\"dndDropInZone.emit($event)\"\n        (clickAction)=\"clickAction.emit($event)\"\n        (editInDepth)=\"editInDepth.emit($event)\"\n        (addStepBetweenClick)=\"addStepBetweenClick.emit($event)\">\n        </cqa-test-case-details-renderer>\n      </div>\n    </div>\n\n    <!-- END Marker -->\n    <div\n      [class]=\"'cqa-pl-4 cqa-py-1 cqa-bg-[#DBEAFE80] cqa-text-[#1C398E] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium'\"\n      style=\"border-top: 1px solid #BEDBFF;\">\n      {{ getEndLabel() }}\n    </div>\n  </div>\n</div>", styles: [".step-actions{opacity:0;transition:opacity .15s ease}.step-row:hover .step-actions{opacity:1}\n"], components: [{ type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: TestCaseDetailsRendererComponent, selector: "cqa-test-case-details-renderer", inputs: ["step", "index", "isNested", "isInsideLoop", "branch", "isReorder", "selected", "addStepBetweenAbove", "addStepBetweenBelow", "addStepBetween", "dataProfileOptions", "hasMoreDataProfiles", "isLoadingDataProfiles", "naturalTextActionsOptions", "setConditionTemplateVariables"], outputs: ["nestedStepChange", "addStep", "deleteStep", "toggleExpanded", "groupNameChange", "descriptionChange", "reusableChange", "openExternal", "edit", "link", "duplicate", "delete", "viewDetails", "selectionChange", "conditionChange", "branchStepChange", "addStepForBranch", "deleteStepWithBranch", "addBranch", "addElse", "deleteBranch", "testDataProfileChange", "startStepChange", "endStepChange", "maxIterationsChange", "eventTypeChange", "parameterChange", "clickAction", "dndDropInZone", "loadMoreDataProfiles", "searchDataProfiles", "stepUpdate", "addStepBetweenClick", "editInDepth"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.DndDropzoneDirective, selector: "[dndDropzone]", inputs: ["dndDropzone", "dndEffectAllowed", "dndAllowExternal", "dndHorizontal", "dndDragoverClass", "dndDropzoneDisabledClass", "dndDisableIf", "dndDisableDropIf"], outputs: ["dndDragover", "dndDrop"] }, { type: i5.DndPlaceholderRefDirective, selector: "[dndPlaceholderRef]" }, { type: i5.DndDraggableDirective, selector: "[dndDraggable]", inputs: ["dndDraggable", "dndEffectAllowed", "dndType", "dndDraggingClass", "dndDraggingSourceClass", "dndDraggableDisabledClass", "dndDragImageOffsetFunction", "dndDisableIf", "dndDisableDragIf"], outputs: ["dndStart", "dndDrag", "dndEnd", "dndMoved", "dndCopied", "dndLinked", "dndCanceled"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseLoopStepComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-test-case-loop-step', host: { class: 'cqa-ui-root' }, styles: [STEP_ROW_ACTIONS_STYLES], template: "<div class=\"cqa-flex cqa-flex-col\">\n  <!-- Inline Edit Mode: Frame 2147224910 - flex row, 1056\u00D736, gap 12px, flex-none -->\n  <div *ngIf=\"isEditing\" class=\"cqa-py-2.5 cqa-px-4 cqa-flex cqa-items-center cqa-gap-3 cqa-justify-between\">\n    <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-grow\">\n      <!-- Loop Type Label -->\n      <div class=\"cqa-font-semibold cqa-text-[#1C398E] cqa-text-[12px] cqa-leading-[15px]\">\n        {{ getLoopTypeLabel() }}\n      </div>\n\n      <!-- FOR LOOP inline edit: cqa-dynamic-select (same usage as default stories) -->\n      <ng-container *ngIf=\"loopType === 'for'\">\n        <!-- First select: width 216.25px, height 36px, gap 4px, opacity 1 -->\n        <cqa-dynamic-select [form]=\"editForm\" [config]=\"forOptionTypeSelectConfig\"\n          class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-dynamic-select>\n        <cqa-dynamic-select [form]=\"editForm\" [config]=\"testDataProfileSelectConfig\"\n          class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-dynamic-select>\n        <cqa-dynamic-select [form]=\"editForm\" [config]=\"startStepSelectConfig\"\n          class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-dynamic-select>\n        <cqa-dynamic-select [form]=\"editForm\" [config]=\"endStepSelectConfig\"\n          class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-dynamic-select>\n      </ng-container>\n\n      <!-- WHILE LOOP inline edit -->\n      <ng-container *ngIf=\"isWhileLoop()\">\n        <cqa-dynamic-select [form]=\"editForm\" [config]=\"conditionSelectConfig\"\n          class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-dynamic-select>\n      </ng-container>\n\n      <!-- Edit In depth link -->\n      <a href=\"#\" (click)=\"onEditInDepth(); $event.preventDefault()\"\n        class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-[2px] cqa-no-underline\">\n        Edit In depth\n        <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\"\n            fill=\"#3F43EE\" />\n        </svg>\n      </a>\n    </div>\n\n    <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n      <!-- Cancel / Apply -->\n      <cqa-button variant=\"outlined\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Cancel'\"\n        (clicked)=\"onEditCancel()\"></cqa-button>\n      <cqa-button variant=\"filled\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Apply'\"\n        (clicked)=\"onEditApply()\"></cqa-button>\n    </div>\n  </div>\n\n  <!-- Loop Header (normal view when not editing) -->\n  <div *ngIf=\"!isEditing\"\n    [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 ' + (isInsideLoop ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4')\">\n    <!-- Expand/Collapse Icon -->\n    <button type=\"button\" (click)=\"onToggleExpanded()\" class=\"cqa-p-0\">\n      <svg [class.cqa-rotate-180]=\"!expanded\" class=\"cqa-transition-transform\" width=\"16\" height=\"16\"\n        viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M12 10L8 6L4 10\" stroke=\"#6B7280\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n          stroke-linejoin=\"round\" />\n      </svg>\n    </button>\n\n    <!-- Loop Icon -->\n    <div *ngIf=\"loopType === 'for'\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M11.334 1.33325L14.0007 3.99992L11.334 6.66659\" stroke=\"#1C398E\" stroke-width=\"1.33333\"\n          stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path d=\"M2 7.33333V6.66667C2 5.95942 2.28095 5.28115 2.78105 4.78105C3.28115 4.28095 3.95942 4 4.66667 4H14\"\n          stroke=\"#1C398E\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path d=\"M4.66667 14.6666L2 11.9999L4.66667 9.33325\" stroke=\"#1C398E\" stroke-width=\"1.33333\"\n          stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path\n          d=\"M14 8.66675V9.33341C14 10.0407 13.719 10.7189 13.219 11.219C12.7189 11.7191 12.0406 12.0001 11.3333 12.0001H2\"\n          stroke=\"#1C398E\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n      </svg>\n    </div>\n    <div *ngIf=\"loopType === 'while'\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M11.334 1.33325L14.0007 3.99992L11.334 6.66659\" stroke=\"#59168B\" stroke-width=\"1.33333\"\n          stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path d=\"M2 7.33333V6.66667C2 5.95942 2.28095 5.28115 2.78105 4.78105C3.28115 4.28095 3.95942 4 4.66667 4H14\"\n          stroke=\"#59168B\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path d=\"M4.66667 14.6666L2 11.9999L4.66667 9.33325\" stroke=\"#59168B\" stroke-width=\"1.33333\"\n          stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path\n          d=\"M14 8.66675V9.33341C14 10.0407 13.719 10.7189 13.219 11.219C12.7189 11.7191 12.0406 12.0001 11.3333 12.0001H2\"\n          stroke=\"#59168B\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n      </svg>\n    </div>\n\n    <!-- Loop Type Label -->\n    <span class=\"cqa-font-semibold cqa-text-[#1C398E] cqa-text-[12px] cqa-leading-none\">\n      {{ getLoopTypeLabel() }}\n    </span>\n\n    <!-- For Loop Controls -->\n    <div *ngIf=\"loopType === 'for'\" class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-ml-2\">\n      <!-- Test Data Profile Button -->\n      <button type=\"button\" [class.cqa-bg-primary-100]=\"testDataProfile\" [class.cqa-text-primary]=\"testDataProfile\"\n        class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\">\n        {{ getTestDataProfileLabel() }}\n      </button>\n\n      <!-- Start Button -->\n      <button type=\"button\" [class.cqa-bg-primary-100]=\"startStep\" [class.cqa-text-primary]=\"startStep\"\n        class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\">\n        {{ getStartStepLabel() }}\n      </button>\n\n      <!-- End Button -->\n      <button type=\"button\" [class.cqa-bg-primary-100]=\"endStep\" [class.cqa-text-primary]=\"endStep\"\n        class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\">\n        {{ getEndStepLabel() }}\n      </button>\n    </div>\n\n    <!-- While Loop Condition (only show if condition exists) -->\n    <div *ngIf=\"isWhileLoop() && condition\" class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-ml-2 cqa-flex-1\">\n      <span class=\"cqa-text-gray-700 cqa-text-sm\">\n        While\n      </span>\n      <span class=\"cqa-text-gray-900 cqa-text-sm\" [innerHTML]=\"getConditionDisplay()\"></span>\n    </div>\n\n    <!-- Steps Summary -->\n    <div\n      class=\"cqa-ml-auto cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-rounded-lg cqa-py-0.5 cqa-px-2 cqa-text-[#0A0A0A] cqa-text-[12px] cqa-leading-[15px]\">\n      {{ getStepsSummary() }}\n    </div>\n\n    <!-- Action Icons: Edit, Link, Duplicate, Delete (show on hover) -->\n    <div class=\"step-actions cqa-flex cqa-items-center cqa-gap-3 cqa-px-[7px]\">\n      <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\"\n        class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M7 11.6666H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path\n            d=\"M9.55208 2.1128C9.7843 1.88058 10.0993 1.75012 10.4277 1.75012C10.7561 1.75012 11.071 1.88058 11.3033 2.1128C11.5355 2.34502 11.6659 2.65998 11.6659 2.98838C11.6659 3.31679 11.5355 3.63175 11.3033 3.86397L4.29742 10.8704C4.15864 11.0092 3.9871 11.1107 3.79867 11.1656L2.12333 11.6544C2.07314 11.669 2.01993 11.6699 1.96928 11.6569C1.91863 11.6439 1.8724 11.6176 1.83543 11.5806C1.79846 11.5437 1.7721 11.4974 1.75913 11.4468C1.74615 11.3961 1.74703 11.3429 1.76167 11.2927L2.2505 9.61738C2.30546 9.42916 2.40698 9.25783 2.54567 9.11922L9.55208 2.1128Z\"\n            stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        </svg>\n      </button>\n      <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\"\n        class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\"\n            stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path\n            d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\"\n            stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\n      </button>\n      <button type=\"button\" (click)=\"onDuplicate(); $event.stopPropagation()\" title=\"Duplicate\"\n        class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\"\n            stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path\n            d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\"\n            stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        </svg>\n      </button>\n      <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\"\n        class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M1.75 3.5H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path\n            d=\"M11.0827 3.5V11.6667C11.0827 12.25 10.4993 12.8333 9.91602 12.8333H4.08268C3.49935 12.8333 2.91602 12.25 2.91602 11.6667V3.5\"\n            stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path\n            d=\"M4.66602 3.49996V2.33329C4.66602 1.74996 5.24935 1.16663 5.83268 1.16663H8.16602C8.74935 1.16663 9.33268 1.74996 9.33268 2.33329V3.49996\"\n            stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path d=\"M5.83398 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path d=\"M8.16602 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\n      </button>\n    </div>\n  </div>\n\n  <!-- Expanded Content with Nested Steps (renderer dispatches by step type, n-level nesting) -->\n  <div *ngIf=\"expanded\" class=\"cqa-flex cqa-flex-col\">\n    <div *ngIf=\"!isReorder\" class=\"cqa-flex cqa-flex-col\">\n      <cqa-test-case-details-renderer *ngFor=\"let step of nestedSteps; let i = index\" [step]=\"step\" [index]=\"i\"\n        [isNested]=\"true\" [isInsideLoop]=\"true\" [isReorder]=\"isReorder\" \n        [addStepBetween]=\"addStepBetween\"\n        [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n        [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n        (nestedStepChange)=\"onNestedStepChange($event.step, $event.index)\"\n        (addStep)=\"onAddStep()\" (deleteStep)=\"onDeleteStep($event)\"\n        (toggleExpanded)=\"onNestedToggleExpanded($event, step, i)\"\n        (groupNameChange)=\"$any(step).groupName = $event; onNestedStepChange(step, i)\"\n        (descriptionChange)=\"$any(step).description = $event; onNestedStepChange(step, i)\"\n        (reusableChange)=\"$any(step).reusable = $event; onNestedStepChange(step, i)\"\n        (openExternal)=\"onNestedStepChange(step, i)\" (edit)=\"onNestedStepChange(step, i)\"\n        (link)=\"onNestedStepChange(step, i)\" (duplicate)=\"onNestedStepChange(step, i)\" (delete)=\"onDeleteStep(i)\"\n        (conditionChange)=\"$any(step).condition = $event; onNestedStepChange(step, i)\"\n        (branchStepChange)=\"onNestedStepChange(step, i)\" (addBranch)=\"onNestedConditionAddBranch($any(step), i)\"\n        (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event, i)\"\n        (testDataProfileChange)=\"$any(step).testDataProfile = $event; onNestedStepChange(step, i)\"\n        (startStepChange)=\"$any(step).startStep = $event; onNestedStepChange(step, i)\"\n        (endStepChange)=\"$any(step).endStep = $event; onNestedStepChange(step, i)\"\n        (maxIterationsChange)=\"$any(step).maxIterations = $event; onNestedStepChange(step, i)\"\n        (eventTypeChange)=\"$any(step).eventType = $event; onNestedStepChange(step, i)\"\n        (parameterChange)=\"onNestedStepChange(step, i)\"\n        (selectionChange)=\"$any(step).selected = $event; onNestedStepChange(step, i)\"\n        (loadMoreDataProfiles)=\"loadMoreDataProfiles.emit($event)\"\n        (searchDataProfiles)=\"searchDataProfiles.emit($event)\"\n        (dndDropInZone)=\"dndDropInZone.emit($event)\"\n        (clickAction)=\"clickAction.emit($event)\"\n        (editInDepth)=\"editInDepth.emit($event)\"\n        (addStepBetweenClick)=\"addStepBetweenClick.emit($event)\">\n      </cqa-test-case-details-renderer>\n    </div>\n    <div *ngIf=\"isReorder\" class=\"cqa-flex cqa-flex-col nested-step-drop-list\"\n         [dndDropzone]=\"['step']\"\n         dndEffectAllowed=\"move\"\n         dndDragoverClass=\"dndDragover\"\n         (dndDrop)=\"onDndDrop($event)\">\n      <div dndPlaceholderRef class=\"step-drag-placeholder-nested cqa-my-1 cqa-min-h-[50px] cqa-border-2 cqa-border-dashed cqa-border-[#3F43EE] cqa-rounded cqa-bg-[rgba(63,67,238,0.08)] cqa-flex cqa-items-center cqa-justify-center cqa-text-[#3F43EE] cqa-text-xs\">Drop here</div>\n      <div *ngFor=\"let step of nestedSteps; let i = index\" class=\"nested-step-drag-item\"\n           [dndDraggable]=\"step\"\n           dndEffectAllowed=\"move\"\n           dndType=\"step\">\n        <cqa-test-case-details-renderer [step]=\"step\" [index]=\"i\"\n          [isNested]=\"true\" [isInsideLoop]=\"true\" [isReorder]=\"isReorder\"\n          [addStepBetweenAbove]=\"addStepBetweenAbove\"\n          [addStepBetweenBelow]=\"addStepBetweenBelow\"\n          [addStepBetween]=\"addStepBetween\"\n          [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n          [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n          (nestedStepChange)=\"onNestedStepChange($event.step, $event.index)\"\n          (addStep)=\"onAddStep()\" (deleteStep)=\"onDeleteStep($event)\"\n          (toggleExpanded)=\"onNestedToggleExpanded($event, step, i)\"\n          (groupNameChange)=\"$any(step).groupName = $event; onNestedStepChange(step, i)\"\n          (descriptionChange)=\"$any(step).description = $event; onNestedStepChange(step, i)\"\n          (reusableChange)=\"$any(step).reusable = $event; onNestedStepChange(step, i)\"\n          (openExternal)=\"onNestedStepChange(step, i)\" (edit)=\"onNestedStepChange(step, i)\"\n          (link)=\"onNestedStepChange(step, i)\" (duplicate)=\"onNestedStepChange(step, i)\" (delete)=\"onDeleteStep(i)\"\n          (conditionChange)=\"$any(step).condition = $event; onNestedStepChange(step, i)\"\n          (branchStepChange)=\"onNestedStepChange(step, i)\" (addBranch)=\"onNestedConditionAddBranch($any(step), i)\"\n          (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event, i)\"\n          (testDataProfileChange)=\"$any(step).testDataProfile = $event; onNestedStepChange(step, i)\"\n          (startStepChange)=\"$any(step).startStep = $event; onNestedStepChange(step, i)\"\n          (endStepChange)=\"$any(step).endStep = $event; onNestedStepChange(step, i)\"\n          (maxIterationsChange)=\"$any(step).maxIterations = $event; onNestedStepChange(step, i)\"\n          (eventTypeChange)=\"$any(step).eventType = $event; onNestedStepChange(step, i)\"\n          (parameterChange)=\"onNestedStepChange(step, i)\"\n          (selectionChange)=\"$any(step).selected = $event; onNestedStepChange(step, i)\"\n        (loadMoreDataProfiles)=\"loadMoreDataProfiles.emit($event)\"\n        (searchDataProfiles)=\"searchDataProfiles.emit($event)\"\n        (dndDropInZone)=\"dndDropInZone.emit($event)\"\n        (clickAction)=\"clickAction.emit($event)\"\n        (editInDepth)=\"editInDepth.emit($event)\"\n        (addStepBetweenClick)=\"addStepBetweenClick.emit($event)\">\n        </cqa-test-case-details-renderer>\n      </div>\n    </div>\n\n    <!-- END Marker -->\n    <div\n      [class]=\"'cqa-pl-4 cqa-py-1 cqa-bg-[#DBEAFE80] cqa-text-[#1C398E] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium'\"\n      style=\"border-top: 1px solid #BEDBFF;\">\n      {{ getEndLabel() }}\n    </div>\n  </div>\n</div>" }]
+            args: [{ selector: 'cqa-test-case-loop-step', host: { class: 'cqa-ui-root' }, styles: [STEP_ROW_ACTIONS_STYLES], template: "<div class=\"cqa-flex cqa-flex-col\">\n  <!-- Inline Edit Mode: Frame 2147224910 - flex row, 1056\u00D736, gap 12px, flex-none -->\n  <div *ngIf=\"isEditing\" class=\"cqa-py-2.5 cqa-px-4 cqa-flex cqa-items-center cqa-gap-3 cqa-justify-between\">\n    <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-grow\">\n      <!-- Loop Type Label -->\n      <div class=\"cqa-font-semibold cqa-text-[#1C398E] cqa-text-[12px] cqa-leading-[15px]\">\n        {{ getLoopTypeLabel() }}\n      </div>\n\n      <!-- FOR LOOP inline edit: cqa-dynamic-select (same usage as default stories) -->\n      <ng-container *ngIf=\"loopType === 'for'\">\n        <!-- First select: width 216.25px, height 36px, gap 4px, opacity 1 -->\n        <cqa-dynamic-select [form]=\"editForm\" [config]=\"forOptionTypeSelectConfig\"\n          class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-dynamic-select>\n        <cqa-dynamic-select [form]=\"editForm\" [config]=\"testDataProfileSelectConfig\"\n          class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-dynamic-select>\n        <cqa-dynamic-select [form]=\"editForm\" [config]=\"startStepSelectConfig\"\n          class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-dynamic-select>\n        <cqa-dynamic-select [form]=\"editForm\" [config]=\"endStepSelectConfig\"\n          class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-dynamic-select>\n      </ng-container>\n\n      <!-- WHILE LOOP inline edit -->\n      <ng-container *ngIf=\"isWhileLoop()\">\n        <cqa-dynamic-select [form]=\"editForm\" [config]=\"conditionSelectConfig\"\n          class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-dynamic-select>\n      </ng-container>\n\n      <!-- Edit In depth link -->\n      <a href=\"#\" (click)=\"onEditInDepth(); $event.preventDefault()\"\n        class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-[2px] cqa-no-underline\">\n        Edit In depth\n        <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\"\n            fill=\"#3F43EE\" />\n        </svg>\n      </a>\n    </div>\n\n    <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n      <!-- Cancel / Apply -->\n      <cqa-button variant=\"outlined\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Cancel'\"\n        (clicked)=\"onEditCancel()\"></cqa-button>\n      <cqa-button variant=\"filled\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Apply'\"\n        (clicked)=\"onEditApply()\"></cqa-button>\n    </div>\n  </div>\n\n  <!-- Loop Header (normal view when not editing) -->\n  <div *ngIf=\"!isEditing\"\n    [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 ' + (isInsideLoop ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4')\">\n    <!-- Drag Handle Icon (when isReorder is true) -->\n    <div *ngIf=\"isReorder\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\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    <!-- Checkbox (when isReorder is false) -->\n    <label *ngIf=\"!isReorder\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative\">\n      <input type=\"checkbox\"\n        [ngModel]=\"selected\"\n        (ngModelChange)=\"onSelectionChange($event)\"\n        class=\"cqa-h-4 cqa-w-4 cqa-cursor-pointer cqa-transition-all cqa-appearance-none cqa-rounded shadow hover:cqa-shadow-md cqa-border cqa-border-solid cqa-border-slate-300 cqa-flex-shrink-0\"\n        [class.cqa-bg-[#3F43EE]]=\"selected\"\n        [class.cqa-border-[#3F43EE]]=\"selected\"\n        id=\"check-loop-step\" />\n      <span class=\"cqa-absolute cqa-text-white cqa-top-1/2 cqa-left-1/2 cqa--translate-x-1/2 cqa--translate-y-1/2 cqa-pointer-events-none cqa-flex cqa-items-center cqa-justify-center\"\n        [class.cqa-opacity-0]=\"!selected\"\n        [class.cqa-opacity-100]=\"selected\">\n        <svg width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 3.125L4.5 8.625L2 6.125\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      </span>\n    </label>\n    <!-- Expand/Collapse Icon -->\n    <button type=\"button\" (click)=\"onToggleExpanded()\" class=\"cqa-p-0\">\n      <svg [class.cqa-rotate-180]=\"!expanded\" class=\"cqa-transition-transform\" width=\"16\" height=\"16\"\n        viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M12 10L8 6L4 10\" stroke=\"#6B7280\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n          stroke-linejoin=\"round\" />\n      </svg>\n    </button>\n\n    <!-- Loop Icon -->\n    <div *ngIf=\"loopType === 'for'\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M11.334 1.33325L14.0007 3.99992L11.334 6.66659\" stroke=\"#1C398E\" stroke-width=\"1.33333\"\n          stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path d=\"M2 7.33333V6.66667C2 5.95942 2.28095 5.28115 2.78105 4.78105C3.28115 4.28095 3.95942 4 4.66667 4H14\"\n          stroke=\"#1C398E\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path d=\"M4.66667 14.6666L2 11.9999L4.66667 9.33325\" stroke=\"#1C398E\" stroke-width=\"1.33333\"\n          stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path\n          d=\"M14 8.66675V9.33341C14 10.0407 13.719 10.7189 13.219 11.219C12.7189 11.7191 12.0406 12.0001 11.3333 12.0001H2\"\n          stroke=\"#1C398E\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n      </svg>\n    </div>\n    <div *ngIf=\"loopType === 'while'\">\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M11.334 1.33325L14.0007 3.99992L11.334 6.66659\" stroke=\"#59168B\" stroke-width=\"1.33333\"\n          stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path d=\"M2 7.33333V6.66667C2 5.95942 2.28095 5.28115 2.78105 4.78105C3.28115 4.28095 3.95942 4 4.66667 4H14\"\n          stroke=\"#59168B\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path d=\"M4.66667 14.6666L2 11.9999L4.66667 9.33325\" stroke=\"#59168B\" stroke-width=\"1.33333\"\n          stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path\n          d=\"M14 8.66675V9.33341C14 10.0407 13.719 10.7189 13.219 11.219C12.7189 11.7191 12.0406 12.0001 11.3333 12.0001H2\"\n          stroke=\"#59168B\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n      </svg>\n    </div>\n\n    <!-- Loop Type Label -->\n    <span class=\"cqa-font-semibold cqa-text-[#1C398E] cqa-text-[12px] cqa-leading-none\">\n      {{ getLoopTypeLabel() }}\n    </span>\n\n    <!-- For Loop Controls -->\n    <div *ngIf=\"loopType === 'for'\" class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-ml-2\">\n      <!-- Test Data Profile Button -->\n      <button type=\"button\" [class.cqa-bg-primary-100]=\"testDataProfile\" [class.cqa-text-primary]=\"testDataProfile\"\n        class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\">\n        {{ getTestDataProfileLabel() }}\n      </button>\n\n      <!-- Start Button -->\n      <button type=\"button\" [class.cqa-bg-primary-100]=\"startStep\" [class.cqa-text-primary]=\"startStep\"\n        class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\">\n        {{ getStartStepLabel() }}\n      </button>\n\n      <!-- End Button -->\n      <button type=\"button\" [class.cqa-bg-primary-100]=\"endStep\" [class.cqa-text-primary]=\"endStep\"\n        class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\">\n        {{ getEndStepLabel() }}\n      </button>\n    </div>\n\n    <!-- While Loop Condition (only show if condition exists) -->\n    <div *ngIf=\"isWhileLoop() && condition\" class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-ml-2 cqa-flex-1\">\n      <span class=\"cqa-text-gray-700 cqa-text-sm\">\n        While\n      </span>\n      <span class=\"cqa-text-gray-900 cqa-text-sm\" [innerHTML]=\"getConditionDisplay()\"></span>\n    </div>\n\n    <!-- Steps Summary -->\n    <div\n      class=\"cqa-ml-auto cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-rounded-lg cqa-py-0.5 cqa-px-2 cqa-text-[#0A0A0A] cqa-text-[12px] cqa-leading-[15px]\">\n      {{ getStepsSummary() }}\n    </div>\n\n    <!-- Action Icons: Edit, Link, Duplicate, Delete (show on hover) -->\n    <div class=\"step-actions cqa-flex cqa-items-center cqa-gap-3 cqa-px-[7px]\">\n      <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\"\n        class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M7 11.6666H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path\n            d=\"M9.55208 2.1128C9.7843 1.88058 10.0993 1.75012 10.4277 1.75012C10.7561 1.75012 11.071 1.88058 11.3033 2.1128C11.5355 2.34502 11.6659 2.65998 11.6659 2.98838C11.6659 3.31679 11.5355 3.63175 11.3033 3.86397L4.29742 10.8704C4.15864 11.0092 3.9871 11.1107 3.79867 11.1656L2.12333 11.6544C2.07314 11.669 2.01993 11.6699 1.96928 11.6569C1.91863 11.6439 1.8724 11.6176 1.83543 11.5806C1.79846 11.5437 1.7721 11.4974 1.75913 11.4468C1.74615 11.3961 1.74703 11.3429 1.76167 11.2927L2.2505 9.61738C2.30546 9.42916 2.40698 9.25783 2.54567 9.11922L9.55208 2.1128Z\"\n            stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        </svg>\n      </button>\n      <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\"\n        class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\"\n            stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path\n            d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\"\n            stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\n      </button>\n      <button type=\"button\" (click)=\"onDuplicate(); $event.stopPropagation()\" title=\"Duplicate\"\n        class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\"\n            stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path\n            d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\"\n            stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        </svg>\n      </button>\n      <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\"\n        class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M1.75 3.5H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path\n            d=\"M11.0827 3.5V11.6667C11.0827 12.25 10.4993 12.8333 9.91602 12.8333H4.08268C3.49935 12.8333 2.91602 12.25 2.91602 11.6667V3.5\"\n            stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path\n            d=\"M4.66602 3.49996V2.33329C4.66602 1.74996 5.24935 1.16663 5.83268 1.16663H8.16602C8.74935 1.16663 9.33268 1.74996 9.33268 2.33329V3.49996\"\n            stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path d=\"M5.83398 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n          <path d=\"M8.16602 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\n      </button>\n    </div>\n  </div>\n\n  <!-- Expanded Content with Nested Steps (renderer dispatches by step type, n-level nesting) -->\n  <div *ngIf=\"expanded\" class=\"cqa-flex cqa-flex-col\">\n    <div *ngIf=\"!isReorder\" class=\"cqa-flex cqa-flex-col\">\n      <cqa-test-case-details-renderer *ngFor=\"let step of nestedSteps; let i = index\" [step]=\"step\" [index]=\"i\"\n        [selected]=\"$any(step).selected\"\n        [isNested]=\"true\" [isInsideLoop]=\"true\" [isReorder]=\"isReorder\"\n        [addStepBetween]=\"addStepBetween\"\n        [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n        [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n        (nestedStepChange)=\"onNestedStepChange($event.step, $event.index)\"\n        (addStep)=\"onAddStep()\" (deleteStep)=\"onDeleteStep($event)\"\n        (toggleExpanded)=\"onNestedToggleExpanded($event, step, i)\"\n        (groupNameChange)=\"$any(step).groupName = $event; onNestedStepChange(step, i)\"\n        (descriptionChange)=\"$any(step).description = $event; onNestedStepChange(step, i)\"\n        (reusableChange)=\"$any(step).reusable = $event; onNestedStepChange(step, i)\"\n        (openExternal)=\"onNestedStepChange(step, i)\" (edit)=\"onNestedStepChange(step, i)\"\n        (link)=\"onNestedStepChange(step, i)\" (duplicate)=\"onNestedStepChange(step, i)\" (delete)=\"onDeleteStep(i)\"\n        (conditionChange)=\"$any(step).condition = $event; onNestedStepChange(step, i)\"\n        (branchStepChange)=\"onNestedStepChange(step, i)\" (addBranch)=\"onNestedConditionAddBranch($any(step), i)\"\n        (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event, i)\"\n        (testDataProfileChange)=\"$any(step).testDataProfile = $event; onNestedStepChange(step, i)\"\n        (startStepChange)=\"$any(step).startStep = $event; onNestedStepChange(step, i)\"\n        (endStepChange)=\"$any(step).endStep = $event; onNestedStepChange(step, i)\"\n        (maxIterationsChange)=\"$any(step).maxIterations = $event; onNestedStepChange(step, i)\"\n        (eventTypeChange)=\"$any(step).eventType = $event; onNestedStepChange(step, i)\"\n        (parameterChange)=\"onNestedStepChange(step, i)\"\n        (selectionChange)=\"$any(step).selected = $event; onNestedStepChange(step, i)\"\n        (loadMoreDataProfiles)=\"loadMoreDataProfiles.emit($event)\"\n        (searchDataProfiles)=\"searchDataProfiles.emit($event)\"\n        (dndDropInZone)=\"dndDropInZone.emit($event)\"\n        (clickAction)=\"clickAction.emit($event)\"\n        (editInDepth)=\"editInDepth.emit($event)\"\n        (addStepBetweenClick)=\"addStepBetweenClick.emit($event)\">\n      </cqa-test-case-details-renderer>\n    </div>\n    <div *ngIf=\"isReorder\" class=\"cqa-flex cqa-flex-col nested-step-drop-list\"\n         [dndDropzone]=\"['step']\"\n         dndEffectAllowed=\"move\"\n         dndDragoverClass=\"dndDragover\"\n         (dndDrop)=\"onDndDrop($event)\">\n      <div dndPlaceholderRef class=\"step-drag-placeholder-nested cqa-my-1 cqa-min-h-[50px] cqa-border-2 cqa-border-dashed cqa-border-[#3F43EE] cqa-rounded cqa-bg-[rgba(63,67,238,0.08)] cqa-flex cqa-items-center cqa-justify-center cqa-text-[#3F43EE] cqa-text-xs\">Drop here</div>\n      <div *ngFor=\"let step of nestedSteps; let i = index\" class=\"nested-step-drag-item\"\n           [dndDraggable]=\"step\"\n           dndEffectAllowed=\"move\"\n           dndType=\"step\">\n        <cqa-test-case-details-renderer [step]=\"step\" [index]=\"i\"\n          [selected]=\"$any(step).selected\"\n          [isNested]=\"true\" [isInsideLoop]=\"true\" [isReorder]=\"isReorder\"\n          [addStepBetweenAbove]=\"addStepBetweenAbove\"\n          [addStepBetweenBelow]=\"addStepBetweenBelow\"\n          [addStepBetween]=\"addStepBetween\"\n          [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n          [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n          (nestedStepChange)=\"onNestedStepChange($event.step, $event.index)\"\n          (addStep)=\"onAddStep()\" (deleteStep)=\"onDeleteStep($event)\"\n          (toggleExpanded)=\"onNestedToggleExpanded($event, step, i)\"\n          (groupNameChange)=\"$any(step).groupName = $event; onNestedStepChange(step, i)\"\n          (descriptionChange)=\"$any(step).description = $event; onNestedStepChange(step, i)\"\n          (reusableChange)=\"$any(step).reusable = $event; onNestedStepChange(step, i)\"\n          (openExternal)=\"onNestedStepChange(step, i)\" (edit)=\"onNestedStepChange(step, i)\"\n          (link)=\"onNestedStepChange(step, i)\" (duplicate)=\"onNestedStepChange(step, i)\" (delete)=\"onDeleteStep(i)\"\n          (conditionChange)=\"$any(step).condition = $event; onNestedStepChange(step, i)\"\n          (branchStepChange)=\"onNestedStepChange(step, i)\" (addBranch)=\"onNestedConditionAddBranch($any(step), i)\"\n          (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event, i)\"\n          (testDataProfileChange)=\"$any(step).testDataProfile = $event; onNestedStepChange(step, i)\"\n          (startStepChange)=\"$any(step).startStep = $event; onNestedStepChange(step, i)\"\n          (endStepChange)=\"$any(step).endStep = $event; onNestedStepChange(step, i)\"\n          (maxIterationsChange)=\"$any(step).maxIterations = $event; onNestedStepChange(step, i)\"\n          (eventTypeChange)=\"$any(step).eventType = $event; onNestedStepChange(step, i)\"\n          (parameterChange)=\"onNestedStepChange(step, i)\"\n          (selectionChange)=\"$any(step).selected = $event; onNestedStepChange(step, i)\"\n        (loadMoreDataProfiles)=\"loadMoreDataProfiles.emit($event)\"\n        (searchDataProfiles)=\"searchDataProfiles.emit($event)\"\n        (dndDropInZone)=\"dndDropInZone.emit($event)\"\n        (clickAction)=\"clickAction.emit($event)\"\n        (editInDepth)=\"editInDepth.emit($event)\"\n        (addStepBetweenClick)=\"addStepBetweenClick.emit($event)\">\n        </cqa-test-case-details-renderer>\n      </div>\n    </div>\n\n    <!-- END Marker -->\n    <div\n      [class]=\"'cqa-pl-4 cqa-py-1 cqa-bg-[#DBEAFE80] cqa-text-[#1C398E] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium'\"\n      style=\"border-top: 1px solid #BEDBFF;\">\n      {{ getEndLabel() }}\n    </div>\n  </div>\n</div>" }]
         }], ctorParameters: function () { return [{ type: i1$1.FormBuilder }]; }, propDecorators: { config: [{
                 type: Input
             }], id: [{
@@ -20146,6 +20171,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Input
             }], isReorder: [{
                 type: Input
+            }], selected: [{
+                type: Input
             }], dataProfileOptions: [{
                 type: Input
             }], hasMoreDataProfiles: [{
@@ -20200,6 +20227,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Output
             }], addStepBetweenClick: [{
                 type: Output
+            }], selectionChange: [{
+                type: Output
             }] } });
 class TestCaseConditionStepComponent {
@@ -20211,6 +20240,7 @@ class TestCaseConditionStepComponent {
         this.isNested = false;
         this.isInsideLoop = false;
         this.isReorder = false;
+        this.selected = false;
         /** Options for the data profile dropdown */
         this.dataProfileOptions = [];
         /** Indicates if more data profiles are available for loading */
@@ -20261,6 +20291,7 @@ class TestCaseConditionStepComponent {
         this.clickAction = new EventEmitter();
         /** Re-emit addStepBetweenClick from nested renderers */
         this.addStepBetweenClick = new EventEmitter();
+        this.selectionChange = new EventEmitter();
     }
     onDndDrop(event, branch) {
         this.dndDropInZone.emit({ event, targetList: branch.nestedSteps });
@@ -20272,12 +20303,16 @@ class TestCaseConditionStepComponent {
             this.condition = this.config.condition;
             this.branches = this.config.branches || [];
             this.expanded = this.config.expanded !== undefined ? this.config.expanded : true;
+            this.selected = this.config.selected || false;
         }
         this.buildEditForm();
         this.buildOperatorSelectConfig();
         this.updateConditionLeftSelectConfig();
     }
     ngOnChanges(changes) {
+        if (changes['config'] && this.config) {
+            this.selected = this.config.selected || false;
+        }
         if (changes['naturalTextActionsOptions']) {
             this.updateConditionLeftSelectConfig();
             // Rebuild form when options are loaded to populate initial value from naturalTextActionId
@@ -20897,6 +20932,10 @@ class TestCaseConditionStepComponent {
     onDelete() {
         this.delete.emit();
     }
+    onSelectionChange(checked) {
+        this.selected = checked;
+        this.selectionChange.emit(checked);
+    }
     onMoreOptions() {
         this.moreOptions.emit();
     }
@@ -20934,10 +20973,10 @@ class TestCaseConditionStepComponent {
     }
 }
 TestCaseConditionStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseConditionStepComponent, deps: [{ token: i1$1.FormBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-TestCaseConditionStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestCaseConditionStepComponent, selector: "cqa-test-case-condition-step", inputs: { config: "config", id: "id", stepNumber: "stepNumber", condition: "condition", branches: "branches", expanded: "expanded", isNested: "isNested", isInsideLoop: "isInsideLoop", isReorder: "isReorder", dataProfileOptions: "dataProfileOptions", hasMoreDataProfiles: "hasMoreDataProfiles", isLoadingDataProfiles: "isLoadingDataProfiles", naturalTextActionsOptions: "naturalTextActionsOptions", setConditionTemplateVariables: "setConditionTemplateVariables", addStepBetweenAbove: "addStepBetweenAbove", addStepBetweenBelow: "addStepBetweenBelow", addStepBetween: "addStepBetween" }, outputs: { toggleExpanded: "toggleExpanded", conditionChange: "conditionChange", branchStepChange: "branchStepChange", addStep: "addStep", deleteStep: "deleteStep", addBranch: "addBranch", addElse: "addElse", deleteBranch: "deleteBranch", duplicate: "duplicate", delete: "delete", moreOptions: "moreOptions", editInDepth: "editInDepth", dndDropInZone: "dndDropInZone", loadMoreDataProfiles: "loadMoreDataProfiles", searchDataProfiles: "searchDataProfiles", stepUpdate: "stepUpdate", clickAction: "clickAction", addStepBetweenClick: "addStepBetweenClick" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div [class]=\"'cqa-flex cqa-flex-col cqa-border cqa-border-solid cqa-border-[#E5E7EB] ' + (isNested ? ' cqa-pl-[24px]' : '')\">\n  <!-- Inline Edit Mode: CONDITION tag, three fields, IF/ELSE chips, Edit In depth, Cancel/Apply -->\n  <div *ngIf=\"isEditing\" class=\"cqa-py-2.5 cqa-px-4 cqa-flex cqa-flex-col cqa-gap-3\">\n    <!-- First Row: CONDITION tag, autocomplete, IF/ELSE indicators, Edit In depth, Cancel/Apply -->\n    <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-justify-between\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-grow\">\n        <!-- CONDITION Tag (orange) -->\n        <span class=\"cqa-px-1.5 cqa-rounded-md cqa-text-[#EA580C] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-[#FFEDD5]\">\n          CONDITION\n        </span>\n\n        <!-- First field: left operand (e.g. Usertype) - autocomplete with IF_CONDITION natural text actions -->\n        <cqa-autocomplete\n          *ngIf=\"editForm\"\n          [options]=\"conditionLeftAutocompleteOptions\"\n          [value]=\"editForm.get('conditionLeft')?.value ?? ''\"\n          (valueChange)=\"onEditFormFieldChange('conditionLeft', $event)\"\n          (optionSelect)=\"onConditionLeftSelect($event)\"\n          placeholder=\"Select condition\"\n          [fullWidth]=\"true\"\n          class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-autocomplete>\n\n        <!-- Second Row: Template Variables Section (shown when template is selected, inline before Edit In depth) -->\n        <div *ngIf=\"selectedTemplate && templateVariables && templateVariables.length > 0\" class=\"cqa-flex cqa-flex-row cqa-flex-wrap cqa-gap-3\">\n          <ng-container *ngFor=\"let variable of templateVariables\">\n            <!-- Boolean variables with mat-slide-toggle -->\n            <ng-container *ngIf=\"variable.type === 'boolean'\">\n              <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n                <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700\">\n                  {{ variable.label }}\n                </label>\n                <mat-slide-toggle\n                  [checked]=\"templateVariablesForm.get(variable.name)?.value || variable.value || false\"\n                  (change)=\"templateVariablesForm.get(variable.name)?.setValue($event.checked)\"\n                  color=\"primary\">\n                </mat-slide-toggle>\n              </div>\n            </ng-container>\n            \n            <!-- Non-boolean variables -->\n            <ng-container *ngIf=\"variable.type !== 'boolean' && variable.name !== 'custom_code'\">\n              <!-- Dropdown for select variables -->\n              <ng-container *ngIf=\"variable.name === 'type' || variable.name === 'scrollTo' || variable.options\">\n                <div class=\"cqa-flex cqa-flex-col\" style=\"min-width: 150px;\">\n                  <!-- <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                    {{ variable.label }}\n                  </label> -->\n                  <cqa-dynamic-select \n                    [form]=\"templateVariablesForm\"\n                    [config]=\"getSelectConfigForVariable(variable, false)\">\n                  </cqa-dynamic-select>\n                </div>\n              </ng-container>\n              <!-- Text Input for other variables -->\n              <ng-container *ngIf=\"variable.name !== 'type' && variable.name !== 'scrollTo' && !variable.options\">\n                <div class=\"cqa-flex cqa-flex-col\" style=\"min-width: 150px;\">\n                  <!-- <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                    {{ variable.label }}\n                  </label> -->\n                  <cqa-custom-input\n                    [placeholder]=\"'Enter ' + variable.label\"\n                    [value]=\"templateVariablesForm.get(variable.name)?.value || variable.value || ''\"\n                    [fullWidth]=\"true\"\n                    (valueChange)=\"templateVariablesForm.get(variable.name)?.setValue($event)\">\n                  </cqa-custom-input>\n                </div>\n              </ng-container>\n            </ng-container>\n          </ng-container>\n        </div>\n\n        <!-- IF / ELSE indicators -->\n        <span class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#DCFCE7] cqa-text-[#008236] cqa-border cqa-border-solid cqa-border-[#B9F8CF] cqa-flex cqa-items-center cqa-gap-1.5\">\n          <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6.66634 2L2.99967 5.66667L1.33301 4\" stroke=\"#008236\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n          IF\n        </span>\n        <!-- Add ELSE IF button - always visible -->\n        <button\n          type=\"button\"\n          (click)=\"onAddElse()\"\n          class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#F3F4F6] cqa-text-[#99A1AF] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-flex cqa-items-center cqa-gap-1.5 cqa-cursor-pointer hover:cqa-bg-[#E5E7EB] cqa-transition-colors\">\n          Add ELSE IF\n        </button>\n        <!-- Add Else button - calls API to create CONDITION_ELSE step -->\n        <button\n          type=\"button\"\n          (click)=\"onAddElseBranch()\"\n          class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#F3F4F6] cqa-text-[#99A1AF] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-flex cqa-items-center cqa-gap-1.5 cqa-cursor-pointer hover:cqa-bg-[#E5E7EB] cqa-transition-colors\">\n          Add Else\n        </button>\n\n        <!-- Edit In depth link -->\n        <a href=\"#\" (click)=\"onEditInDepth(); $event.preventDefault()\"\n          class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-[2px] cqa-no-underline\">\n          Edit In depth\n          <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg>\n        </a>      \n      </div>\n      <!-- Cancel / Apply buttons - shown on IF row when no ELSE IF branches are present -->\n      <div *ngIf=\"elseIfBranches.length === 0\" class=\"cqa-flex cqa-items-center cqa-gap-2\">\n        <cqa-button variant=\"outlined\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Cancel'\" (clicked)=\"onEditCancel()\"></cqa-button>\n        <cqa-button variant=\"filled\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Apply'\" (clicked)=\"onEditApply()\"></cqa-button>\n      </div>\n    </div>\n    \n    \n  </div>\n\n  <!-- ELSE IF Sections in Edit Mode - Loop through all ELSE IF branches -->\n  <ng-container *ngFor=\"let branch of elseIfBranches; let i = index\">\n    <div *ngIf=\"isEditing\" class=\"cqa-py-2.5 cqa-px-4 cqa-flex cqa-flex-col cqa-gap-3 cqa-border-t cqa-border-solid cqa-border-[#E5E7EB]\">\n      <!-- First Row: Remove ELSE IF button, autocomplete, Edit In depth, Cancel/Apply -->\n      <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-justify-between\">\n        <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-grow\">\n          <!-- Remove ELSE IF button -->\n          <button\n            type=\"button\"\n            (click)=\"onRemoveElse(branch.id)\"\n            class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#F3F4F6] cqa-text-[#99A1AF] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-cursor-pointer hover:cqa-bg-[#E5E7EB] cqa-transition-colors\">\n            Remove ELSE IF\n          </button>\n\n          <!-- ELSE IF autocomplete field: same as IF condition -->\n          <cqa-autocomplete\n            *ngIf=\"branch.form\"\n            [options]=\"conditionLeftAutocompleteOptions\"\n            [value]=\"branch.form.get('conditionLeft')?.value ?? ''\"\n            (valueChange)=\"branch.form.get('conditionLeft')?.setValue($event)\"\n            (optionSelect)=\"onElseConditionLeftSelect($event, branch.id)\"\n            placeholder=\"Select condition\"\n            [fullWidth]=\"true\"\n            class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-autocomplete>\n          \n          <!-- Second Row: ELSE IF Template Variables Section (shown when template is selected, inline before Edit In depth) -->\n          <div *ngIf=\"branch.selectedTemplate && branch.templateVariables && branch.templateVariables.length > 0\" class=\"cqa-flex cqa-flex-row cqa-flex-wrap cqa-gap-3\">\n            <ng-container *ngFor=\"let variable of branch.templateVariables\">\n              <!-- Boolean variables with mat-slide-toggle -->\n              <ng-container *ngIf=\"variable.type === 'boolean'\">\n                <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n                  <!-- <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700\">\n                    {{ variable.label }}\n                  </label> -->\n                  <mat-slide-toggle\n                    [checked]=\"branch.templateVariablesForm.get(variable.name)?.value || variable.value || false\"\n                    (change)=\"branch.templateVariablesForm.get(variable.name)?.setValue($event.checked)\"\n                    color=\"primary\">\n                  </mat-slide-toggle>\n                </div>\n              </ng-container>\n              \n              <!-- Non-boolean variables -->\n              <ng-container *ngIf=\"variable.type !== 'boolean' && variable.name !== 'custom_code'\">\n                <!-- Dropdown for select variables -->\n                <ng-container *ngIf=\"variable.name === 'type' || variable.name === 'scrollTo' || variable.options\">\n                  <div class=\"cqa-flex cqa-flex-col\" style=\"min-width: 150px;\">\n                    <!-- <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                      {{ variable.label }}\n                    </label> -->\n                    <cqa-dynamic-select \n                      [form]=\"branch.templateVariablesForm\"\n                      [config]=\"getSelectConfigForVariable(variable, branch.id)\">\n                    </cqa-dynamic-select>\n                  </div>\n                </ng-container>\n                \n                <!-- Text Input for other variables -->\n                <ng-container *ngIf=\"variable.name !== 'type' && variable.name !== 'scrollTo' && !variable.options\">\n                  <div class=\"cqa-flex cqa-flex-col\" style=\"min-width: 150px;\">\n                    <!-- <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                      {{ variable.label }}\n                    </label> -->\n                    <cqa-custom-input\n                      [value]=\"branch.templateVariablesForm.get(variable.name)?.value || variable.value || ''\"\n                      (valueChange)=\"branch.templateVariablesForm.get(variable.name)?.setValue($event)\"\n                      [placeholder]=\"variable.label\">\n                    </cqa-custom-input>\n                  </div>\n                </ng-container>\n              </ng-container>\n            </ng-container>\n          </div>\n\n          <!-- Edit In depth link -->\n          <a href=\"#\" (click)=\"onEditInDepth(); $event.preventDefault()\"\n            class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-[2px] cqa-no-underline\">\n            Edit In depth\n            <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg>\n          </a>\n        </div>\n        <!-- Cancel / Apply buttons - shown in last ELSE IF row -->\n        <div *ngIf=\"i === elseIfBranches.length - 1\" class=\"cqa-flex cqa-items-center cqa-gap-2\">\n          <cqa-button variant=\"outlined\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Cancel'\" (clicked)=\"onEditCancel()\"></cqa-button>\n          <cqa-button variant=\"filled\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Apply'\" (clicked)=\"onEditApply()\"></cqa-button>\n        </div>\n      </div>\n    </div>\n  </ng-container>\n\n  <!-- Condition Header (normal view when not editing) -->\n  <div *ngIf=\"!isEditing\" [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 ' + (isInsideLoop ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4')\">\n    <!-- Expand/Collapse Icon -->\n    <button type=\"button\" (click)=\"onToggleExpanded()\" class=\"cqa-p-0\">\n      <svg [class.cqa-rotate-180]=\"!expanded\" class=\"cqa-transition-transform\" width=\"16\" height=\"16\"\n        viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M12 10L8 6L4 10\" stroke=\"#6B7280\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n          stroke-linejoin=\"round\" />\n      </svg>\n    </button>\n\n    <!-- IF/ELSE Icon -->\n    <div><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M4 2V10\" stroke=\"#7B3306\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path\n          d=\"M12 6C13.1046 6 14 5.10457 14 4C14 2.89543 13.1046 2 12 2C10.8954 2 10 2.89543 10 4C10 5.10457 10.8954 6 12 6Z\"\n          stroke=\"#7B3306\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path\n          d=\"M4 14C5.10457 14 6 13.1046 6 12C6 10.8954 5.10457 10 4 10C2.89543 10 2 10.8954 2 12C2 13.1046 2.89543 14 4 14Z\"\n          stroke=\"#7B3306\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path d=\"M12 6C12 7.5913 11.3679 9.11742 10.2426 10.2426C9.11742 11.3679 7.5913 12 6 12\" stroke=\"#7B3306\"\n          stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n      </svg></div>\n\n    <!-- IF/ELSE Label -->\n    <span class=\"cqa-font-semibold cqa-text-[#7B3306] cqa-text-[12px] cqa-leading-none\">\n      IF / ELSE\n    </span>\n\n    <!-- Condition Input -->\n    <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-ml-2 cqa-flex-1\">\n      <span [innerHTML]=\"condition\"></span>\n      <!-- <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px]\">\n        If\n      </span>\n      <span\n        class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\">.success-message</span>\n      <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px]\">\n        is visible\n      </span> -->\n      <!-- <input\n        type=\"text\"\n        [value]=\"condition\"\n        (input)=\"onConditionChange($any($event.target).value)\"\n        placeholder=\"element `.success-message` is visible\"\n        class=\"cqa-px-3 cqa-py-1.5 cqa-rounded-lg cqa-border cqa-border-gray-300 cqa-bg-white cqa-text-gray-900 cqa-text-sm cqa-flex-1 cqa-max-w-md cqa-outline-none focus:cqa-ring-2 focus:cqa-ring-primary focus:cqa-ring-opacity-50\"\n      /> -->\n    </div>\n\n    <!-- Steps Summary -->\n    <div\n      class=\"cqa-ml-auto cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-rounded-lg cqa-py-0.5 cqa-px-2 cqa-text-[#0A0A0A] cqa-text-[12px] cqa-leading-[15px]\">\n      {{ getStepsSummary() }}\n    </div>\n\n    <!-- Action Icons: Edit, Link, Duplicate, Delete (show on hover) -->\n    <div class=\"step-actions cqa-flex cqa-items-center cqa-gap-3 cqa-px-[7px]\">\n      <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M7 11.6666H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M9.55208 2.1128C9.7843 1.88058 10.0993 1.75012 10.4277 1.75012C10.7561 1.75012 11.071 1.88058 11.3033 2.1128C11.5355 2.34502 11.6659 2.65998 11.6659 2.98838C11.6659 3.31679 11.5355 3.63175 11.3033 3.86397L4.29742 10.8704C4.15864 11.0092 3.9871 11.1107 3.79867 11.1656L2.12333 11.6544C2.07314 11.669 2.01993 11.6699 1.96928 11.6569C1.91863 11.6439 1.8724 11.6176 1.83543 11.5806C1.79846 11.5437 1.7721 11.4974 1.75913 11.4468C1.74615 11.3961 1.74703 11.3429 1.76167 11.2927L2.2505 9.61738C2.30546 9.42916 2.40698 9.25783 2.54567 9.11922L9.55208 2.1128Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      </button>\n      <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      </button>\n      <button type=\"button\" (click)=\"onDuplicate(); $event.stopPropagation()\" title=\"Duplicate\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      </button>\n      <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\" class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1.75 3.5H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11.0827 3.5V11.6667C11.0827 12.25 10.4993 12.8333 9.91602 12.8333H4.08268C3.49935 12.8333 2.91602 12.25 2.91602 11.6667V3.5\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.66602 3.49996V2.33329C4.66602 1.74996 5.24935 1.16663 5.83268 1.16663H8.16602C8.74935 1.16663 9.33268 1.74996 9.33268 2.33329V3.49996\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M5.83398 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M8.16602 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      </button>\n    </div>\n  </div>\n\n  <!-- Expanded Content with Branches -->\n  <div *ngIf=\"expanded\" class=\"cqa-flex cqa-flex-col\">\n    <!-- Branches (IF TRUE, ELSE IF, ELSE) -->\n    <div *ngFor=\"let branch of branches\" class=\"cqa-flex cqa-flex-col\">\n      <!-- Branch Header -->\n      <div\n        [class]=\"'cqa-px-4 cqa-py-2 cqa-text-[12px] cqa-leading-[15px] cqa-flex cqa-items-center cqa-gap-2 ' + getBranchTextColor(branch) + ' ' + getBranchColorClass(branch)\">\n        <span>{{ getBranchLabel(branch) }}</span>\n        <span *ngIf=\"branch.action\" [innerHTML]=\"branch.action\" class=\"cqa-text-[#111827]\"></span>\n      </div>\n\n      <!-- Branch Content (Nested Steps \u2013 renderer dispatches by step type, n-level nesting) -->\n      <div *ngIf=\"!isReorder\" class=\"cqa-flex cqa-flex-col\">\n        <cqa-test-case-details-renderer\n          *ngFor=\"let step of branch.nestedSteps; let i = index\"\n          [step]=\"step\"\n          [index]=\"i\"\n          [branch]=\"branch\"\n          [isNested]=\"true\"\n          [isReorder]=\"isReorder\"\n          [addStepBetween]=\"addStepBetween\"\n          [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n          [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n          (branchStepChange)=\"onBranchStepChange($event.branch, $event.step, $event.stepIndex)\"\n          (addStepForBranch)=\"onAddStep($event.branch)\"\n          (deleteStepWithBranch)=\"onDeleteStep($event.branch, $event.stepIndex)\"\n          (toggleExpanded)=\"onNestedToggleExpanded($event, branch, step, i)\"\n          (groupNameChange)=\"$any(step).groupName = $event; onBranchStepChange(branch, step, i)\"\n          (descriptionChange)=\"$any(step).description = $event; onBranchStepChange(branch, step, i)\"\n          (reusableChange)=\"$any(step).reusable = $event; onBranchStepChange(branch, step, i)\"\n          (openExternal)=\"onBranchStepChange(branch, step, i)\"\n          (edit)=\"onBranchStepChange(branch, step, i)\"\n          (link)=\"onBranchStepChange(branch, step, i)\"\n          (duplicate)=\"onBranchStepChange(branch, step, i)\"\n          (conditionChange)=\"$any(step).condition = $event; onBranchStepChange(branch, step, i)\"\n          (addBranch)=\"onNestedConditionAddBranch($any(step)); onBranchStepChange(branch, step, i)\"\n          (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event); onBranchStepChange(branch, step, i)\"\n          (testDataProfileChange)=\"$any(step).testDataProfile = $event; onBranchStepChange(branch, step, i)\"\n          (startStepChange)=\"$any(step).startStep = $event; onBranchStepChange(branch, step, i)\"\n          (endStepChange)=\"$any(step).endStep = $event; onBranchStepChange(branch, step, i)\"\n          (maxIterationsChange)=\"$any(step).maxIterations = $event; onBranchStepChange(branch, step, i)\"\n          (eventTypeChange)=\"$any(step).eventType = $event; onBranchStepChange(branch, step, i)\"\n          (parameterChange)=\"onBranchStepChange(branch, step, i)\"\n          (selectionChange)=\"$any(step).selected = $event; onBranchStepChange(branch, step, i)\"\n          (loadMoreDataProfiles)=\"loadMoreDataProfiles.emit($event)\"\n          (searchDataProfiles)=\"searchDataProfiles.emit($event)\"\n          (stepUpdate)=\"stepUpdate.emit($event)\"\n          (dndDropInZone)=\"dndDropInZone.emit($event)\"\n          (clickAction)=\"clickAction.emit($event)\"\n          (editInDepth)=\"editInDepth.emit($event)\"\n          (addStepBetweenClick)=\"addStepBetweenClick.emit($event)\"\n        >\n        </cqa-test-case-details-renderer>\n      </div>\n      <div *ngIf=\"isReorder\" class=\"cqa-flex cqa-flex-col nested-step-drop-list\"\n           [dndDropzone]=\"['step']\"\n           dndEffectAllowed=\"move\"\n           dndDragoverClass=\"dndDragover\"\n           (dndDrop)=\"onDndDrop($event, branch)\">\n        <div dndPlaceholderRef class=\"step-drag-placeholder-nested cqa-my-1 cqa-min-h-[50px] cqa-border-2 cqa-border-dashed cqa-border-[#3F43EE] cqa-rounded cqa-bg-[rgba(63,67,238,0.08)] cqa-flex cqa-items-center cqa-justify-center cqa-text-[#3F43EE] cqa-text-xs\">Drop here</div>\n        <div *ngFor=\"let step of branch.nestedSteps; let i = index\" class=\"nested-step-drag-item\"\n             [dndDraggable]=\"step\"\n             dndEffectAllowed=\"move\"\n             dndType=\"step\">\n          <cqa-test-case-details-renderer\n            [step]=\"step\"\n            [index]=\"i\"\n            [branch]=\"branch\"\n            [isNested]=\"true\"\n            [isReorder]=\"isReorder\"\n            [addStepBetweenAbove]=\"addStepBetweenAbove\"\n            [addStepBetweenBelow]=\"addStepBetweenBelow\"\n            [addStepBetween]=\"addStepBetween\"\n            [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n            [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n            (branchStepChange)=\"onBranchStepChange($event.branch, $event.step, $event.stepIndex)\"\n            (addStepForBranch)=\"onAddStep($event.branch)\"\n            (deleteStepWithBranch)=\"onDeleteStep($event.branch, $event.stepIndex)\"\n            (toggleExpanded)=\"onNestedToggleExpanded($event, branch, step, i)\"\n            (groupNameChange)=\"$any(step).groupName = $event; onBranchStepChange(branch, step, i)\"\n            (descriptionChange)=\"$any(step).description = $event; onBranchStepChange(branch, step, i)\"\n            (reusableChange)=\"$any(step).reusable = $event; onBranchStepChange(branch, step, i)\"\n            (openExternal)=\"onBranchStepChange(branch, step, i)\"\n            (edit)=\"onBranchStepChange(branch, step, i)\"\n            (link)=\"onBranchStepChange(branch, step, i)\"\n            (duplicate)=\"onBranchStepChange(branch, step, i)\"\n            (conditionChange)=\"$any(step).condition = $event; onBranchStepChange(branch, step, i)\"\n            (addBranch)=\"onNestedConditionAddBranch($any(step)); onBranchStepChange(branch, step, i)\"\n            (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event); onBranchStepChange(branch, step, i)\"\n            (testDataProfileChange)=\"$any(step).testDataProfile = $event; onBranchStepChange(branch, step, i)\"\n            (startStepChange)=\"$any(step).startStep = $event; onBranchStepChange(branch, step, i)\"\n            (endStepChange)=\"$any(step).endStep = $event; onBranchStepChange(branch, step, i)\"\n            (maxIterationsChange)=\"$any(step).maxIterations = $event; onBranchStepChange(branch, step, i)\"\n            (eventTypeChange)=\"$any(step).eventType = $event; onBranchStepChange(branch, step, i)\"\n            (parameterChange)=\"onBranchStepChange(branch, step, i)\"\n            (selectionChange)=\"$any(step).selected = $event; onBranchStepChange(branch, step, i)\"\n            (loadMoreDataProfiles)=\"loadMoreDataProfiles.emit($event)\"\n            (searchDataProfiles)=\"searchDataProfiles.emit($event)\"\n            (stepUpdate)=\"stepUpdate.emit($event)\"\n            (dndDropInZone)=\"dndDropInZone.emit($event)\"\n            (clickAction)=\"clickAction.emit($event)\"\n            (editInDepth)=\"editInDepth.emit($event)\"\n            (addStepBetweenClick)=\"addStepBetweenClick.emit($event)\"\n          >\n          </cqa-test-case-details-renderer>\n        </div>\n      </div>\n    </div>\n\n    <!-- END IF Marker -->\n    <div [class]=\"'cqa-pl-4 cqa-py-1 cqa-text-[#7B3306] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium'\" style=\"border-top: 1px solid #E5E7EB;\">\n      END IF\n    </div>\n  </div>\n</div>", styles: [".step-actions{opacity:0;transition:opacity .15s ease}.step-row:hover .step-actions{opacity:1}\n"], components: [{ type: AutocompleteComponent, selector: "cqa-autocomplete", inputs: ["placeholder", "options", "value", "disabled", "showClear", "ariaLabel", "autoFocus", "size", "fullWidth"], outputs: ["valueChange", "optionSelect", "cleared"] }, { type: i5$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: TestCaseDetailsRendererComponent, selector: "cqa-test-case-details-renderer", inputs: ["step", "index", "isNested", "isInsideLoop", "branch", "isReorder", "addStepBetweenAbove", "addStepBetweenBelow", "addStepBetween", "dataProfileOptions", "hasMoreDataProfiles", "isLoadingDataProfiles", "naturalTextActionsOptions", "setConditionTemplateVariables"], outputs: ["nestedStepChange", "addStep", "deleteStep", "toggleExpanded", "groupNameChange", "descriptionChange", "reusableChange", "openExternal", "edit", "link", "duplicate", "delete", "viewDetails", "selectionChange", "conditionChange", "branchStepChange", "addStepForBranch", "deleteStepWithBranch", "addBranch", "addElse", "deleteBranch", "testDataProfileChange", "startStepChange", "endStepChange", "maxIterationsChange", "eventTypeChange", "parameterChange", "clickAction", "dndDropInZone", "loadMoreDataProfiles", "searchDataProfiles", "stepUpdate", "addStepBetweenClick", "editInDepth"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.DndDropzoneDirective, selector: "[dndDropzone]", inputs: ["dndDropzone", "dndEffectAllowed", "dndAllowExternal", "dndHorizontal", "dndDragoverClass", "dndDropzoneDisabledClass", "dndDisableIf", "dndDisableDropIf"], outputs: ["dndDragover", "dndDrop"] }, { type: i5.DndPlaceholderRefDirective, selector: "[dndPlaceholderRef]" }, { type: i5.DndDraggableDirective, selector: "[dndDraggable]", inputs: ["dndDraggable", "dndEffectAllowed", "dndType", "dndDraggingClass", "dndDraggingSourceClass", "dndDraggableDisabledClass", "dndDragImageOffsetFunction", "dndDisableIf", "dndDisableDragIf"], outputs: ["dndStart", "dndDrag", "dndEnd", "dndMoved", "dndCopied", "dndLinked", "dndCanceled"] }] });
+TestCaseConditionStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestCaseConditionStepComponent, selector: "cqa-test-case-condition-step", inputs: { config: "config", id: "id", stepNumber: "stepNumber", condition: "condition", branches: "branches", expanded: "expanded", isNested: "isNested", isInsideLoop: "isInsideLoop", isReorder: "isReorder", selected: "selected", dataProfileOptions: "dataProfileOptions", hasMoreDataProfiles: "hasMoreDataProfiles", isLoadingDataProfiles: "isLoadingDataProfiles", naturalTextActionsOptions: "naturalTextActionsOptions", setConditionTemplateVariables: "setConditionTemplateVariables", addStepBetweenAbove: "addStepBetweenAbove", addStepBetweenBelow: "addStepBetweenBelow", addStepBetween: "addStepBetween" }, outputs: { toggleExpanded: "toggleExpanded", conditionChange: "conditionChange", branchStepChange: "branchStepChange", addStep: "addStep", deleteStep: "deleteStep", addBranch: "addBranch", addElse: "addElse", deleteBranch: "deleteBranch", duplicate: "duplicate", delete: "delete", moreOptions: "moreOptions", editInDepth: "editInDepth", dndDropInZone: "dndDropInZone", loadMoreDataProfiles: "loadMoreDataProfiles", searchDataProfiles: "searchDataProfiles", stepUpdate: "stepUpdate", clickAction: "clickAction", addStepBetweenClick: "addStepBetweenClick", selectionChange: "selectionChange" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div [class]=\"'cqa-flex cqa-flex-col cqa-border cqa-border-solid cqa-border-[#E5E7EB] ' + (isNested ? ' cqa-pl-[24px]' : '')\">\n  <!-- Inline Edit Mode: CONDITION tag, three fields, IF/ELSE chips, Edit In depth, Cancel/Apply -->\n  <div *ngIf=\"isEditing\" class=\"cqa-py-2.5 cqa-px-4 cqa-flex cqa-flex-col cqa-gap-3\">\n    <!-- First Row: CONDITION tag, autocomplete, IF/ELSE indicators, Edit In depth, Cancel/Apply -->\n    <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-justify-between\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-grow\">\n        <!-- CONDITION Tag (orange) -->\n        <span class=\"cqa-px-1.5 cqa-rounded-md cqa-text-[#EA580C] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-[#FFEDD5]\">\n          CONDITION\n        </span>\n\n        <!-- First field: left operand (e.g. Usertype) - autocomplete with IF_CONDITION natural text actions -->\n        <cqa-autocomplete\n          *ngIf=\"editForm\"\n          [options]=\"conditionLeftAutocompleteOptions\"\n          [value]=\"editForm.get('conditionLeft')?.value ?? ''\"\n          (valueChange)=\"onEditFormFieldChange('conditionLeft', $event)\"\n          (optionSelect)=\"onConditionLeftSelect($event)\"\n          placeholder=\"Select condition\"\n          [fullWidth]=\"true\"\n          class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-autocomplete>\n\n        <!-- Second Row: Template Variables Section (shown when template is selected, inline before Edit In depth) -->\n        <div *ngIf=\"selectedTemplate && templateVariables && templateVariables.length > 0\" class=\"cqa-flex cqa-flex-row cqa-flex-wrap cqa-gap-3\">\n          <ng-container *ngFor=\"let variable of templateVariables\">\n            <!-- Boolean variables with mat-slide-toggle -->\n            <ng-container *ngIf=\"variable.type === 'boolean'\">\n              <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n                <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700\">\n                  {{ variable.label }}\n                </label>\n                <mat-slide-toggle\n                  [checked]=\"templateVariablesForm.get(variable.name)?.value || variable.value || false\"\n                  (change)=\"templateVariablesForm.get(variable.name)?.setValue($event.checked)\"\n                  color=\"primary\">\n                </mat-slide-toggle>\n              </div>\n            </ng-container>\n            \n            <!-- Non-boolean variables -->\n            <ng-container *ngIf=\"variable.type !== 'boolean' && variable.name !== 'custom_code'\">\n              <!-- Dropdown for select variables -->\n              <ng-container *ngIf=\"variable.name === 'type' || variable.name === 'scrollTo' || variable.options\">\n                <div class=\"cqa-flex cqa-flex-col\" style=\"min-width: 150px;\">\n                  <!-- <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                    {{ variable.label }}\n                  </label> -->\n                  <cqa-dynamic-select \n                    [form]=\"templateVariablesForm\"\n                    [config]=\"getSelectConfigForVariable(variable, false)\">\n                  </cqa-dynamic-select>\n                </div>\n              </ng-container>\n              <!-- Text Input for other variables -->\n              <ng-container *ngIf=\"variable.name !== 'type' && variable.name !== 'scrollTo' && !variable.options\">\n                <div class=\"cqa-flex cqa-flex-col\" style=\"min-width: 150px;\">\n                  <!-- <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                    {{ variable.label }}\n                  </label> -->\n                  <cqa-custom-input\n                    [placeholder]=\"'Enter ' + variable.label\"\n                    [value]=\"templateVariablesForm.get(variable.name)?.value || variable.value || ''\"\n                    [fullWidth]=\"true\"\n                    (valueChange)=\"templateVariablesForm.get(variable.name)?.setValue($event)\">\n                  </cqa-custom-input>\n                </div>\n              </ng-container>\n            </ng-container>\n          </ng-container>\n        </div>\n\n        <!-- IF / ELSE indicators -->\n        <span class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#DCFCE7] cqa-text-[#008236] cqa-border cqa-border-solid cqa-border-[#B9F8CF] cqa-flex cqa-items-center cqa-gap-1.5\">\n          <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6.66634 2L2.99967 5.66667L1.33301 4\" stroke=\"#008236\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n          IF\n        </span>\n        <!-- Add ELSE IF button - always visible -->\n        <button\n          type=\"button\"\n          (click)=\"onAddElse()\"\n          class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#F3F4F6] cqa-text-[#99A1AF] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-flex cqa-items-center cqa-gap-1.5 cqa-cursor-pointer hover:cqa-bg-[#E5E7EB] cqa-transition-colors\">\n          Add ELSE IF\n        </button>\n        <!-- Add Else button - calls API to create CONDITION_ELSE step -->\n        <button\n          type=\"button\"\n          (click)=\"onAddElseBranch()\"\n          class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#F3F4F6] cqa-text-[#99A1AF] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-flex cqa-items-center cqa-gap-1.5 cqa-cursor-pointer hover:cqa-bg-[#E5E7EB] cqa-transition-colors\">\n          Add Else\n        </button>\n\n        <!-- Edit In depth link -->\n        <a href=\"#\" (click)=\"onEditInDepth(); $event.preventDefault()\"\n          class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-[2px] cqa-no-underline\">\n          Edit In depth\n          <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg>\n        </a>      \n      </div>\n      <!-- Cancel / Apply buttons - shown on IF row when no ELSE IF branches are present -->\n      <div *ngIf=\"elseIfBranches.length === 0\" class=\"cqa-flex cqa-items-center cqa-gap-2\">\n        <cqa-button variant=\"outlined\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Cancel'\" (clicked)=\"onEditCancel()\"></cqa-button>\n        <cqa-button variant=\"filled\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Apply'\" (clicked)=\"onEditApply()\"></cqa-button>\n      </div>\n    </div>\n    \n    \n  </div>\n\n  <!-- ELSE IF Sections in Edit Mode - Loop through all ELSE IF branches -->\n  <ng-container *ngFor=\"let branch of elseIfBranches; let i = index\">\n    <div *ngIf=\"isEditing\" class=\"cqa-py-2.5 cqa-px-4 cqa-flex cqa-flex-col cqa-gap-3 cqa-border-t cqa-border-solid cqa-border-[#E5E7EB]\">\n      <!-- First Row: Remove ELSE IF button, autocomplete, Edit In depth, Cancel/Apply -->\n      <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-justify-between\">\n        <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-grow\">\n          <!-- Remove ELSE IF button -->\n          <button\n            type=\"button\"\n            (click)=\"onRemoveElse(branch.id)\"\n            class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#F3F4F6] cqa-text-[#99A1AF] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-cursor-pointer hover:cqa-bg-[#E5E7EB] cqa-transition-colors\">\n            Remove ELSE IF\n          </button>\n\n          <!-- ELSE IF autocomplete field: same as IF condition -->\n          <cqa-autocomplete\n            *ngIf=\"branch.form\"\n            [options]=\"conditionLeftAutocompleteOptions\"\n            [value]=\"branch.form.get('conditionLeft')?.value ?? ''\"\n            (valueChange)=\"branch.form.get('conditionLeft')?.setValue($event)\"\n            (optionSelect)=\"onElseConditionLeftSelect($event, branch.id)\"\n            placeholder=\"Select condition\"\n            [fullWidth]=\"true\"\n            class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-autocomplete>\n          \n          <!-- Second Row: ELSE IF Template Variables Section (shown when template is selected, inline before Edit In depth) -->\n          <div *ngIf=\"branch.selectedTemplate && branch.templateVariables && branch.templateVariables.length > 0\" class=\"cqa-flex cqa-flex-row cqa-flex-wrap cqa-gap-3\">\n            <ng-container *ngFor=\"let variable of branch.templateVariables\">\n              <!-- Boolean variables with mat-slide-toggle -->\n              <ng-container *ngIf=\"variable.type === 'boolean'\">\n                <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n                  <!-- <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700\">\n                    {{ variable.label }}\n                  </label> -->\n                  <mat-slide-toggle\n                    [checked]=\"branch.templateVariablesForm.get(variable.name)?.value || variable.value || false\"\n                    (change)=\"branch.templateVariablesForm.get(variable.name)?.setValue($event.checked)\"\n                    color=\"primary\">\n                  </mat-slide-toggle>\n                </div>\n              </ng-container>\n              \n              <!-- Non-boolean variables -->\n              <ng-container *ngIf=\"variable.type !== 'boolean' && variable.name !== 'custom_code'\">\n                <!-- Dropdown for select variables -->\n                <ng-container *ngIf=\"variable.name === 'type' || variable.name === 'scrollTo' || variable.options\">\n                  <div class=\"cqa-flex cqa-flex-col\" style=\"min-width: 150px;\">\n                    <!-- <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                      {{ variable.label }}\n                    </label> -->\n                    <cqa-dynamic-select \n                      [form]=\"branch.templateVariablesForm\"\n                      [config]=\"getSelectConfigForVariable(variable, branch.id)\">\n                    </cqa-dynamic-select>\n                  </div>\n                </ng-container>\n                \n                <!-- Text Input for other variables -->\n                <ng-container *ngIf=\"variable.name !== 'type' && variable.name !== 'scrollTo' && !variable.options\">\n                  <div class=\"cqa-flex cqa-flex-col\" style=\"min-width: 150px;\">\n                    <!-- <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                      {{ variable.label }}\n                    </label> -->\n                    <cqa-custom-input\n                      [value]=\"branch.templateVariablesForm.get(variable.name)?.value || variable.value || ''\"\n                      (valueChange)=\"branch.templateVariablesForm.get(variable.name)?.setValue($event)\"\n                      [placeholder]=\"variable.label\">\n                    </cqa-custom-input>\n                  </div>\n                </ng-container>\n              </ng-container>\n            </ng-container>\n          </div>\n\n          <!-- Edit In depth link -->\n          <a href=\"#\" (click)=\"onEditInDepth(); $event.preventDefault()\"\n            class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-[2px] cqa-no-underline\">\n            Edit In depth\n            <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg>\n          </a>\n        </div>\n        <!-- Cancel / Apply buttons - shown in last ELSE IF row -->\n        <div *ngIf=\"i === elseIfBranches.length - 1\" class=\"cqa-flex cqa-items-center cqa-gap-2\">\n          <cqa-button variant=\"outlined\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Cancel'\" (clicked)=\"onEditCancel()\"></cqa-button>\n          <cqa-button variant=\"filled\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Apply'\" (clicked)=\"onEditApply()\"></cqa-button>\n        </div>\n      </div>\n    </div>\n  </ng-container>\n\n  <!-- Condition Header (normal view when not editing) -->\n  <div *ngIf=\"!isEditing\" [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 ' + (isInsideLoop ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4')\">\n    <!-- Drag Handle Icon (when isReorder is true) -->\n    <div *ngIf=\"isReorder\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\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    <!-- Checkbox (when isReorder is false) -->\n    <label *ngIf=\"!isReorder\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative\">\n      <input type=\"checkbox\"\n        [ngModel]=\"selected\"\n        (ngModelChange)=\"onSelectionChange($event)\"\n        class=\"cqa-h-4 cqa-w-4 cqa-cursor-pointer cqa-transition-all cqa-appearance-none cqa-rounded shadow hover:cqa-shadow-md cqa-border cqa-border-solid cqa-border-slate-300 cqa-flex-shrink-0\"\n        [class.cqa-bg-[#3F43EE]]=\"selected\"\n        [class.cqa-border-[#3F43EE]]=\"selected\"\n        id=\"check-condition\" />\n      <span class=\"cqa-absolute cqa-text-white cqa-top-1/2 cqa-left-1/2 cqa--translate-x-1/2 cqa--translate-y-1/2 cqa-pointer-events-none cqa-flex cqa-items-center cqa-justify-center\"\n        [class.cqa-opacity-0]=\"!selected\"\n        [class.cqa-opacity-100]=\"selected\">\n        <svg width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 3.125L4.5 8.625L2 6.125\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      </span>\n    </label>\n    <!-- Expand/Collapse Icon -->\n    <button type=\"button\" (click)=\"onToggleExpanded()\" class=\"cqa-p-0\">\n      <svg [class.cqa-rotate-180]=\"!expanded\" class=\"cqa-transition-transform\" width=\"16\" height=\"16\"\n        viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M12 10L8 6L4 10\" stroke=\"#6B7280\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n          stroke-linejoin=\"round\" />\n      </svg>\n    </button>\n\n    <!-- IF/ELSE Icon -->\n    <div><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M4 2V10\" stroke=\"#7B3306\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path\n          d=\"M12 6C13.1046 6 14 5.10457 14 4C14 2.89543 13.1046 2 12 2C10.8954 2 10 2.89543 10 4C10 5.10457 10.8954 6 12 6Z\"\n          stroke=\"#7B3306\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path\n          d=\"M4 14C5.10457 14 6 13.1046 6 12C6 10.8954 5.10457 10 4 10C2.89543 10 2 10.8954 2 12C2 13.1046 2.89543 14 4 14Z\"\n          stroke=\"#7B3306\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path d=\"M12 6C12 7.5913 11.3679 9.11742 10.2426 10.2426C9.11742 11.3679 7.5913 12 6 12\" stroke=\"#7B3306\"\n          stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n      </svg></div>\n\n    <!-- IF/ELSE Label -->\n    <span class=\"cqa-font-semibold cqa-text-[#7B3306] cqa-text-[12px] cqa-leading-none\">\n      IF / ELSE\n    </span>\n\n    <!-- Condition Input -->\n    <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-ml-2 cqa-flex-1\">\n      <span [innerHTML]=\"condition\"></span>\n      <!-- <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px]\">\n        If\n      </span>\n      <span\n        class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\">.success-message</span>\n      <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px]\">\n        is visible\n      </span> -->\n      <!-- <input\n        type=\"text\"\n        [value]=\"condition\"\n        (input)=\"onConditionChange($any($event.target).value)\"\n        placeholder=\"element `.success-message` is visible\"\n        class=\"cqa-px-3 cqa-py-1.5 cqa-rounded-lg cqa-border cqa-border-gray-300 cqa-bg-white cqa-text-gray-900 cqa-text-sm cqa-flex-1 cqa-max-w-md cqa-outline-none focus:cqa-ring-2 focus:cqa-ring-primary focus:cqa-ring-opacity-50\"\n      /> -->\n    </div>\n\n    <!-- Steps Summary -->\n    <div\n      class=\"cqa-ml-auto cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-rounded-lg cqa-py-0.5 cqa-px-2 cqa-text-[#0A0A0A] cqa-text-[12px] cqa-leading-[15px]\">\n      {{ getStepsSummary() }}\n    </div>\n\n    <!-- Action Icons: Edit, Link, Duplicate, Delete (show on hover) -->\n    <div class=\"step-actions cqa-flex cqa-items-center cqa-gap-3 cqa-px-[7px]\">\n      <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M7 11.6666H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M9.55208 2.1128C9.7843 1.88058 10.0993 1.75012 10.4277 1.75012C10.7561 1.75012 11.071 1.88058 11.3033 2.1128C11.5355 2.34502 11.6659 2.65998 11.6659 2.98838C11.6659 3.31679 11.5355 3.63175 11.3033 3.86397L4.29742 10.8704C4.15864 11.0092 3.9871 11.1107 3.79867 11.1656L2.12333 11.6544C2.07314 11.669 2.01993 11.6699 1.96928 11.6569C1.91863 11.6439 1.8724 11.6176 1.83543 11.5806C1.79846 11.5437 1.7721 11.4974 1.75913 11.4468C1.74615 11.3961 1.74703 11.3429 1.76167 11.2927L2.2505 9.61738C2.30546 9.42916 2.40698 9.25783 2.54567 9.11922L9.55208 2.1128Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      </button>\n      <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      </button>\n      <button type=\"button\" (click)=\"onDuplicate(); $event.stopPropagation()\" title=\"Duplicate\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      </button>\n      <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\" class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1.75 3.5H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11.0827 3.5V11.6667C11.0827 12.25 10.4993 12.8333 9.91602 12.8333H4.08268C3.49935 12.8333 2.91602 12.25 2.91602 11.6667V3.5\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.66602 3.49996V2.33329C4.66602 1.74996 5.24935 1.16663 5.83268 1.16663H8.16602C8.74935 1.16663 9.33268 1.74996 9.33268 2.33329V3.49996\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M5.83398 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M8.16602 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      </button>\n    </div>\n  </div>\n\n  <!-- Expanded Content with Branches -->\n  <div *ngIf=\"expanded\" class=\"cqa-flex cqa-flex-col\">\n    <!-- Branches (IF TRUE, ELSE IF, ELSE) -->\n    <div *ngFor=\"let branch of branches\" class=\"cqa-flex cqa-flex-col\">\n      <!-- Branch Header -->\n      <div\n        [class]=\"'cqa-px-4 cqa-py-2 cqa-text-[12px] cqa-leading-[15px] cqa-flex cqa-items-center cqa-gap-2 ' + getBranchTextColor(branch) + ' ' + getBranchColorClass(branch)\">\n        <span>{{ getBranchLabel(branch) }}</span>\n        <span *ngIf=\"branch.action\" [innerHTML]=\"branch.action\" class=\"cqa-text-[#111827]\"></span>\n      </div>\n\n      <!-- Branch Content (Nested Steps \u2013 renderer dispatches by step type, n-level nesting) -->\n      <div *ngIf=\"!isReorder\" class=\"cqa-flex cqa-flex-col\">\n        <cqa-test-case-details-renderer\n          *ngFor=\"let step of branch.nestedSteps; let i = index\"\n          [step]=\"step\"\n          [index]=\"i\"\n          [selected]=\"$any(step).selected\"\n          [branch]=\"branch\"\n          [isNested]=\"true\"\n          [isReorder]=\"isReorder\"\n          [addStepBetween]=\"addStepBetween\"\n          [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n          [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n          (branchStepChange)=\"onBranchStepChange($event.branch, $event.step, $event.stepIndex)\"\n          (addStepForBranch)=\"onAddStep($event.branch)\"\n          (deleteStepWithBranch)=\"onDeleteStep($event.branch, $event.stepIndex)\"\n          (toggleExpanded)=\"onNestedToggleExpanded($event, branch, step, i)\"\n          (groupNameChange)=\"$any(step).groupName = $event; onBranchStepChange(branch, step, i)\"\n          (descriptionChange)=\"$any(step).description = $event; onBranchStepChange(branch, step, i)\"\n          (reusableChange)=\"$any(step).reusable = $event; onBranchStepChange(branch, step, i)\"\n          (openExternal)=\"onBranchStepChange(branch, step, i)\"\n          (edit)=\"onBranchStepChange(branch, step, i)\"\n          (link)=\"onBranchStepChange(branch, step, i)\"\n          (duplicate)=\"onBranchStepChange(branch, step, i)\"\n          (conditionChange)=\"$any(step).condition = $event; onBranchStepChange(branch, step, i)\"\n          (addBranch)=\"onNestedConditionAddBranch($any(step)); onBranchStepChange(branch, step, i)\"\n          (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event); onBranchStepChange(branch, step, i)\"\n          (testDataProfileChange)=\"$any(step).testDataProfile = $event; onBranchStepChange(branch, step, i)\"\n          (startStepChange)=\"$any(step).startStep = $event; onBranchStepChange(branch, step, i)\"\n          (endStepChange)=\"$any(step).endStep = $event; onBranchStepChange(branch, step, i)\"\n          (maxIterationsChange)=\"$any(step).maxIterations = $event; onBranchStepChange(branch, step, i)\"\n          (eventTypeChange)=\"$any(step).eventType = $event; onBranchStepChange(branch, step, i)\"\n          (parameterChange)=\"onBranchStepChange(branch, step, i)\"\n          (selectionChange)=\"$any(step).selected = $event; onBranchStepChange(branch, step, i)\"\n          (loadMoreDataProfiles)=\"loadMoreDataProfiles.emit($event)\"\n          (searchDataProfiles)=\"searchDataProfiles.emit($event)\"\n          (stepUpdate)=\"stepUpdate.emit($event)\"\n          (dndDropInZone)=\"dndDropInZone.emit($event)\"\n          (clickAction)=\"clickAction.emit($event)\"\n          (editInDepth)=\"editInDepth.emit($event)\"\n          (addStepBetweenClick)=\"addStepBetweenClick.emit($event)\"\n        >\n        </cqa-test-case-details-renderer>\n      </div>\n      <div *ngIf=\"isReorder\" class=\"cqa-flex cqa-flex-col nested-step-drop-list\"\n           [dndDropzone]=\"['step']\"\n           dndEffectAllowed=\"move\"\n           dndDragoverClass=\"dndDragover\"\n           (dndDrop)=\"onDndDrop($event, branch)\">\n        <div dndPlaceholderRef class=\"step-drag-placeholder-nested cqa-my-1 cqa-min-h-[50px] cqa-border-2 cqa-border-dashed cqa-border-[#3F43EE] cqa-rounded cqa-bg-[rgba(63,67,238,0.08)] cqa-flex cqa-items-center cqa-justify-center cqa-text-[#3F43EE] cqa-text-xs\">Drop here</div>\n        <div *ngFor=\"let step of branch.nestedSteps; let i = index\" class=\"nested-step-drag-item\"\n             [dndDraggable]=\"step\"\n             dndEffectAllowed=\"move\"\n             dndType=\"step\">\n          <cqa-test-case-details-renderer\n            [step]=\"step\"\n            [index]=\"i\"\n            [selected]=\"$any(step).selected\"\n            [branch]=\"branch\"\n            [isNested]=\"true\"\n            [isReorder]=\"isReorder\"\n            [addStepBetweenAbove]=\"addStepBetweenAbove\"\n            [addStepBetweenBelow]=\"addStepBetweenBelow\"\n            [addStepBetween]=\"addStepBetween\"\n            [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n            [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n            (branchStepChange)=\"onBranchStepChange($event.branch, $event.step, $event.stepIndex)\"\n            (addStepForBranch)=\"onAddStep($event.branch)\"\n            (deleteStepWithBranch)=\"onDeleteStep($event.branch, $event.stepIndex)\"\n            (toggleExpanded)=\"onNestedToggleExpanded($event, branch, step, i)\"\n            (groupNameChange)=\"$any(step).groupName = $event; onBranchStepChange(branch, step, i)\"\n            (descriptionChange)=\"$any(step).description = $event; onBranchStepChange(branch, step, i)\"\n            (reusableChange)=\"$any(step).reusable = $event; onBranchStepChange(branch, step, i)\"\n            (openExternal)=\"onBranchStepChange(branch, step, i)\"\n            (edit)=\"onBranchStepChange(branch, step, i)\"\n            (link)=\"onBranchStepChange(branch, step, i)\"\n            (duplicate)=\"onBranchStepChange(branch, step, i)\"\n            (conditionChange)=\"$any(step).condition = $event; onBranchStepChange(branch, step, i)\"\n            (addBranch)=\"onNestedConditionAddBranch($any(step)); onBranchStepChange(branch, step, i)\"\n            (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event); onBranchStepChange(branch, step, i)\"\n            (testDataProfileChange)=\"$any(step).testDataProfile = $event; onBranchStepChange(branch, step, i)\"\n            (startStepChange)=\"$any(step).startStep = $event; onBranchStepChange(branch, step, i)\"\n            (endStepChange)=\"$any(step).endStep = $event; onBranchStepChange(branch, step, i)\"\n            (maxIterationsChange)=\"$any(step).maxIterations = $event; onBranchStepChange(branch, step, i)\"\n            (eventTypeChange)=\"$any(step).eventType = $event; onBranchStepChange(branch, step, i)\"\n            (parameterChange)=\"onBranchStepChange(branch, step, i)\"\n            (selectionChange)=\"$any(step).selected = $event; onBranchStepChange(branch, step, i)\"\n            (loadMoreDataProfiles)=\"loadMoreDataProfiles.emit($event)\"\n            (searchDataProfiles)=\"searchDataProfiles.emit($event)\"\n            (stepUpdate)=\"stepUpdate.emit($event)\"\n            (dndDropInZone)=\"dndDropInZone.emit($event)\"\n            (clickAction)=\"clickAction.emit($event)\"\n            (editInDepth)=\"editInDepth.emit($event)\"\n            (addStepBetweenClick)=\"addStepBetweenClick.emit($event)\"\n          >\n          </cqa-test-case-details-renderer>\n        </div>\n      </div>\n    </div>\n\n    <!-- END IF Marker -->\n    <div [class]=\"'cqa-pl-4 cqa-py-1 cqa-text-[#7B3306] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium'\" style=\"border-top: 1px solid #E5E7EB;\">\n      END IF\n    </div>\n  </div>\n</div>", styles: [".step-actions{opacity:0;transition:opacity .15s ease}.step-row:hover .step-actions{opacity:1}\n"], components: [{ type: AutocompleteComponent, selector: "cqa-autocomplete", inputs: ["placeholder", "options", "value", "disabled", "showClear", "ariaLabel", "autoFocus", "size", "fullWidth"], outputs: ["valueChange", "optionSelect", "cleared"] }, { type: i5$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: TestCaseDetailsRendererComponent, selector: "cqa-test-case-details-renderer", inputs: ["step", "index", "isNested", "isInsideLoop", "branch", "isReorder", "selected", "addStepBetweenAbove", "addStepBetweenBelow", "addStepBetween", "dataProfileOptions", "hasMoreDataProfiles", "isLoadingDataProfiles", "naturalTextActionsOptions", "setConditionTemplateVariables"], outputs: ["nestedStepChange", "addStep", "deleteStep", "toggleExpanded", "groupNameChange", "descriptionChange", "reusableChange", "openExternal", "edit", "link", "duplicate", "delete", "viewDetails", "selectionChange", "conditionChange", "branchStepChange", "addStepForBranch", "deleteStepWithBranch", "addBranch", "addElse", "deleteBranch", "testDataProfileChange", "startStepChange", "endStepChange", "maxIterationsChange", "eventTypeChange", "parameterChange", "clickAction", "dndDropInZone", "loadMoreDataProfiles", "searchDataProfiles", "stepUpdate", "addStepBetweenClick", "editInDepth"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i5.DndDropzoneDirective, selector: "[dndDropzone]", inputs: ["dndDropzone", "dndEffectAllowed", "dndAllowExternal", "dndHorizontal", "dndDragoverClass", "dndDropzoneDisabledClass", "dndDisableIf", "dndDisableDropIf"], outputs: ["dndDragover", "dndDrop"] }, { type: i5.DndPlaceholderRefDirective, selector: "[dndPlaceholderRef]" }, { type: i5.DndDraggableDirective, selector: "[dndDraggable]", inputs: ["dndDraggable", "dndEffectAllowed", "dndType", "dndDraggingClass", "dndDraggingSourceClass", "dndDraggableDisabledClass", "dndDragImageOffsetFunction", "dndDisableIf", "dndDisableDragIf"], outputs: ["dndStart", "dndDrag", "dndEnd", "dndMoved", "dndCopied", "dndLinked", "dndCanceled"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseConditionStepComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-test-case-condition-step', host: { class: 'cqa-ui-root' }, styles: [STEP_ROW_ACTIONS_STYLES], template: "<div [class]=\"'cqa-flex cqa-flex-col cqa-border cqa-border-solid cqa-border-[#E5E7EB] ' + (isNested ? ' cqa-pl-[24px]' : '')\">\n  <!-- Inline Edit Mode: CONDITION tag, three fields, IF/ELSE chips, Edit In depth, Cancel/Apply -->\n  <div *ngIf=\"isEditing\" class=\"cqa-py-2.5 cqa-px-4 cqa-flex cqa-flex-col cqa-gap-3\">\n    <!-- First Row: CONDITION tag, autocomplete, IF/ELSE indicators, Edit In depth, Cancel/Apply -->\n    <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-justify-between\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-grow\">\n        <!-- CONDITION Tag (orange) -->\n        <span class=\"cqa-px-1.5 cqa-rounded-md cqa-text-[#EA580C] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-[#FFEDD5]\">\n          CONDITION\n        </span>\n\n        <!-- First field: left operand (e.g. Usertype) - autocomplete with IF_CONDITION natural text actions -->\n        <cqa-autocomplete\n          *ngIf=\"editForm\"\n          [options]=\"conditionLeftAutocompleteOptions\"\n          [value]=\"editForm.get('conditionLeft')?.value ?? ''\"\n          (valueChange)=\"onEditFormFieldChange('conditionLeft', $event)\"\n          (optionSelect)=\"onConditionLeftSelect($event)\"\n          placeholder=\"Select condition\"\n          [fullWidth]=\"true\"\n          class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-autocomplete>\n\n        <!-- Second Row: Template Variables Section (shown when template is selected, inline before Edit In depth) -->\n        <div *ngIf=\"selectedTemplate && templateVariables && templateVariables.length > 0\" class=\"cqa-flex cqa-flex-row cqa-flex-wrap cqa-gap-3\">\n          <ng-container *ngFor=\"let variable of templateVariables\">\n            <!-- Boolean variables with mat-slide-toggle -->\n            <ng-container *ngIf=\"variable.type === 'boolean'\">\n              <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n                <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700\">\n                  {{ variable.label }}\n                </label>\n                <mat-slide-toggle\n                  [checked]=\"templateVariablesForm.get(variable.name)?.value || variable.value || false\"\n                  (change)=\"templateVariablesForm.get(variable.name)?.setValue($event.checked)\"\n                  color=\"primary\">\n                </mat-slide-toggle>\n              </div>\n            </ng-container>\n            \n            <!-- Non-boolean variables -->\n            <ng-container *ngIf=\"variable.type !== 'boolean' && variable.name !== 'custom_code'\">\n              <!-- Dropdown for select variables -->\n              <ng-container *ngIf=\"variable.name === 'type' || variable.name === 'scrollTo' || variable.options\">\n                <div class=\"cqa-flex cqa-flex-col\" style=\"min-width: 150px;\">\n                  <!-- <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                    {{ variable.label }}\n                  </label> -->\n                  <cqa-dynamic-select \n                    [form]=\"templateVariablesForm\"\n                    [config]=\"getSelectConfigForVariable(variable, false)\">\n                  </cqa-dynamic-select>\n                </div>\n              </ng-container>\n              <!-- Text Input for other variables -->\n              <ng-container *ngIf=\"variable.name !== 'type' && variable.name !== 'scrollTo' && !variable.options\">\n                <div class=\"cqa-flex cqa-flex-col\" style=\"min-width: 150px;\">\n                  <!-- <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                    {{ variable.label }}\n                  </label> -->\n                  <cqa-custom-input\n                    [placeholder]=\"'Enter ' + variable.label\"\n                    [value]=\"templateVariablesForm.get(variable.name)?.value || variable.value || ''\"\n                    [fullWidth]=\"true\"\n                    (valueChange)=\"templateVariablesForm.get(variable.name)?.setValue($event)\">\n                  </cqa-custom-input>\n                </div>\n              </ng-container>\n            </ng-container>\n          </ng-container>\n        </div>\n\n        <!-- IF / ELSE indicators -->\n        <span class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#DCFCE7] cqa-text-[#008236] cqa-border cqa-border-solid cqa-border-[#B9F8CF] cqa-flex cqa-items-center cqa-gap-1.5\">\n          <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6.66634 2L2.99967 5.66667L1.33301 4\" stroke=\"#008236\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n          IF\n        </span>\n        <!-- Add ELSE IF button - always visible -->\n        <button\n          type=\"button\"\n          (click)=\"onAddElse()\"\n          class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#F3F4F6] cqa-text-[#99A1AF] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-flex cqa-items-center cqa-gap-1.5 cqa-cursor-pointer hover:cqa-bg-[#E5E7EB] cqa-transition-colors\">\n          Add ELSE IF\n        </button>\n        <!-- Add Else button - calls API to create CONDITION_ELSE step -->\n        <button\n          type=\"button\"\n          (click)=\"onAddElseBranch()\"\n          class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#F3F4F6] cqa-text-[#99A1AF] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-flex cqa-items-center cqa-gap-1.5 cqa-cursor-pointer hover:cqa-bg-[#E5E7EB] cqa-transition-colors\">\n          Add Else\n        </button>\n\n        <!-- Edit In depth link -->\n        <a href=\"#\" (click)=\"onEditInDepth(); $event.preventDefault()\"\n          class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-[2px] cqa-no-underline\">\n          Edit In depth\n          <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg>\n        </a>      \n      </div>\n      <!-- Cancel / Apply buttons - shown on IF row when no ELSE IF branches are present -->\n      <div *ngIf=\"elseIfBranches.length === 0\" class=\"cqa-flex cqa-items-center cqa-gap-2\">\n        <cqa-button variant=\"outlined\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Cancel'\" (clicked)=\"onEditCancel()\"></cqa-button>\n        <cqa-button variant=\"filled\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Apply'\" (clicked)=\"onEditApply()\"></cqa-button>\n      </div>\n    </div>\n    \n    \n  </div>\n\n  <!-- ELSE IF Sections in Edit Mode - Loop through all ELSE IF branches -->\n  <ng-container *ngFor=\"let branch of elseIfBranches; let i = index\">\n    <div *ngIf=\"isEditing\" class=\"cqa-py-2.5 cqa-px-4 cqa-flex cqa-flex-col cqa-gap-3 cqa-border-t cqa-border-solid cqa-border-[#E5E7EB]\">\n      <!-- First Row: Remove ELSE IF button, autocomplete, Edit In depth, Cancel/Apply -->\n      <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-justify-between\">\n        <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-grow\">\n          <!-- Remove ELSE IF button -->\n          <button\n            type=\"button\"\n            (click)=\"onRemoveElse(branch.id)\"\n            class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#F3F4F6] cqa-text-[#99A1AF] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-cursor-pointer hover:cqa-bg-[#E5E7EB] cqa-transition-colors\">\n            Remove ELSE IF\n          </button>\n\n          <!-- ELSE IF autocomplete field: same as IF condition -->\n          <cqa-autocomplete\n            *ngIf=\"branch.form\"\n            [options]=\"conditionLeftAutocompleteOptions\"\n            [value]=\"branch.form.get('conditionLeft')?.value ?? ''\"\n            (valueChange)=\"branch.form.get('conditionLeft')?.setValue($event)\"\n            (optionSelect)=\"onElseConditionLeftSelect($event, branch.id)\"\n            placeholder=\"Select condition\"\n            [fullWidth]=\"true\"\n            class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-autocomplete>\n          \n          <!-- Second Row: ELSE IF Template Variables Section (shown when template is selected, inline before Edit In depth) -->\n          <div *ngIf=\"branch.selectedTemplate && branch.templateVariables && branch.templateVariables.length > 0\" class=\"cqa-flex cqa-flex-row cqa-flex-wrap cqa-gap-3\">\n            <ng-container *ngFor=\"let variable of branch.templateVariables\">\n              <!-- Boolean variables with mat-slide-toggle -->\n              <ng-container *ngIf=\"variable.type === 'boolean'\">\n                <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n                  <!-- <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700\">\n                    {{ variable.label }}\n                  </label> -->\n                  <mat-slide-toggle\n                    [checked]=\"branch.templateVariablesForm.get(variable.name)?.value || variable.value || false\"\n                    (change)=\"branch.templateVariablesForm.get(variable.name)?.setValue($event.checked)\"\n                    color=\"primary\">\n                  </mat-slide-toggle>\n                </div>\n              </ng-container>\n              \n              <!-- Non-boolean variables -->\n              <ng-container *ngIf=\"variable.type !== 'boolean' && variable.name !== 'custom_code'\">\n                <!-- Dropdown for select variables -->\n                <ng-container *ngIf=\"variable.name === 'type' || variable.name === 'scrollTo' || variable.options\">\n                  <div class=\"cqa-flex cqa-flex-col\" style=\"min-width: 150px;\">\n                    <!-- <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                      {{ variable.label }}\n                    </label> -->\n                    <cqa-dynamic-select \n                      [form]=\"branch.templateVariablesForm\"\n                      [config]=\"getSelectConfigForVariable(variable, branch.id)\">\n                    </cqa-dynamic-select>\n                  </div>\n                </ng-container>\n                \n                <!-- Text Input for other variables -->\n                <ng-container *ngIf=\"variable.name !== 'type' && variable.name !== 'scrollTo' && !variable.options\">\n                  <div class=\"cqa-flex cqa-flex-col\" style=\"min-width: 150px;\">\n                    <!-- <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                      {{ variable.label }}\n                    </label> -->\n                    <cqa-custom-input\n                      [value]=\"branch.templateVariablesForm.get(variable.name)?.value || variable.value || ''\"\n                      (valueChange)=\"branch.templateVariablesForm.get(variable.name)?.setValue($event)\"\n                      [placeholder]=\"variable.label\">\n                    </cqa-custom-input>\n                  </div>\n                </ng-container>\n              </ng-container>\n            </ng-container>\n          </div>\n\n          <!-- Edit In depth link -->\n          <a href=\"#\" (click)=\"onEditInDepth(); $event.preventDefault()\"\n            class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-[2px] cqa-no-underline\">\n            Edit In depth\n            <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg>\n          </a>\n        </div>\n        <!-- Cancel / Apply buttons - shown in last ELSE IF row -->\n        <div *ngIf=\"i === elseIfBranches.length - 1\" class=\"cqa-flex cqa-items-center cqa-gap-2\">\n          <cqa-button variant=\"outlined\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Cancel'\" (clicked)=\"onEditCancel()\"></cqa-button>\n          <cqa-button variant=\"filled\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Apply'\" (clicked)=\"onEditApply()\"></cqa-button>\n        </div>\n      </div>\n    </div>\n  </ng-container>\n\n  <!-- Condition Header (normal view when not editing) -->\n  <div *ngIf=\"!isEditing\" [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 ' + (isInsideLoop ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4')\">\n    <!-- Expand/Collapse Icon -->\n    <button type=\"button\" (click)=\"onToggleExpanded()\" class=\"cqa-p-0\">\n      <svg [class.cqa-rotate-180]=\"!expanded\" class=\"cqa-transition-transform\" width=\"16\" height=\"16\"\n        viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M12 10L8 6L4 10\" stroke=\"#6B7280\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n          stroke-linejoin=\"round\" />\n      </svg>\n    </button>\n\n    <!-- IF/ELSE Icon -->\n    <div><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M4 2V10\" stroke=\"#7B3306\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path\n          d=\"M12 6C13.1046 6 14 5.10457 14 4C14 2.89543 13.1046 2 12 2C10.8954 2 10 2.89543 10 4C10 5.10457 10.8954 6 12 6Z\"\n          stroke=\"#7B3306\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path\n          d=\"M4 14C5.10457 14 6 13.1046 6 12C6 10.8954 5.10457 10 4 10C2.89543 10 2 10.8954 2 12C2 13.1046 2.89543 14 4 14Z\"\n          stroke=\"#7B3306\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path d=\"M12 6C12 7.5913 11.3679 9.11742 10.2426 10.2426C9.11742 11.3679 7.5913 12 6 12\" stroke=\"#7B3306\"\n          stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n      </svg></div>\n\n    <!-- IF/ELSE Label -->\n    <span class=\"cqa-font-semibold cqa-text-[#7B3306] cqa-text-[12px] cqa-leading-none\">\n      IF / ELSE\n    </span>\n\n    <!-- Condition Input -->\n    <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-ml-2 cqa-flex-1\">\n      <span [innerHTML]=\"condition\"></span>\n      <!-- <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px]\">\n        If\n      </span>\n      <span\n        class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\">.success-message</span>\n      <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px]\">\n        is visible\n      </span> -->\n      <!-- <input\n        type=\"text\"\n        [value]=\"condition\"\n        (input)=\"onConditionChange($any($event.target).value)\"\n        placeholder=\"element `.success-message` is visible\"\n        class=\"cqa-px-3 cqa-py-1.5 cqa-rounded-lg cqa-border cqa-border-gray-300 cqa-bg-white cqa-text-gray-900 cqa-text-sm cqa-flex-1 cqa-max-w-md cqa-outline-none focus:cqa-ring-2 focus:cqa-ring-primary focus:cqa-ring-opacity-50\"\n      /> -->\n    </div>\n\n    <!-- Steps Summary -->\n    <div\n      class=\"cqa-ml-auto cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-rounded-lg cqa-py-0.5 cqa-px-2 cqa-text-[#0A0A0A] cqa-text-[12px] cqa-leading-[15px]\">\n      {{ getStepsSummary() }}\n    </div>\n\n    <!-- Action Icons: Edit, Link, Duplicate, Delete (show on hover) -->\n    <div class=\"step-actions cqa-flex cqa-items-center cqa-gap-3 cqa-px-[7px]\">\n      <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M7 11.6666H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M9.55208 2.1128C9.7843 1.88058 10.0993 1.75012 10.4277 1.75012C10.7561 1.75012 11.071 1.88058 11.3033 2.1128C11.5355 2.34502 11.6659 2.65998 11.6659 2.98838C11.6659 3.31679 11.5355 3.63175 11.3033 3.86397L4.29742 10.8704C4.15864 11.0092 3.9871 11.1107 3.79867 11.1656L2.12333 11.6544C2.07314 11.669 2.01993 11.6699 1.96928 11.6569C1.91863 11.6439 1.8724 11.6176 1.83543 11.5806C1.79846 11.5437 1.7721 11.4974 1.75913 11.4468C1.74615 11.3961 1.74703 11.3429 1.76167 11.2927L2.2505 9.61738C2.30546 9.42916 2.40698 9.25783 2.54567 9.11922L9.55208 2.1128Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      </button>\n      <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      </button>\n      <button type=\"button\" (click)=\"onDuplicate(); $event.stopPropagation()\" title=\"Duplicate\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      </button>\n      <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\" class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1.75 3.5H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11.0827 3.5V11.6667C11.0827 12.25 10.4993 12.8333 9.91602 12.8333H4.08268C3.49935 12.8333 2.91602 12.25 2.91602 11.6667V3.5\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.66602 3.49996V2.33329C4.66602 1.74996 5.24935 1.16663 5.83268 1.16663H8.16602C8.74935 1.16663 9.33268 1.74996 9.33268 2.33329V3.49996\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M5.83398 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M8.16602 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      </button>\n    </div>\n  </div>\n\n  <!-- Expanded Content with Branches -->\n  <div *ngIf=\"expanded\" class=\"cqa-flex cqa-flex-col\">\n    <!-- Branches (IF TRUE, ELSE IF, ELSE) -->\n    <div *ngFor=\"let branch of branches\" class=\"cqa-flex cqa-flex-col\">\n      <!-- Branch Header -->\n      <div\n        [class]=\"'cqa-px-4 cqa-py-2 cqa-text-[12px] cqa-leading-[15px] cqa-flex cqa-items-center cqa-gap-2 ' + getBranchTextColor(branch) + ' ' + getBranchColorClass(branch)\">\n        <span>{{ getBranchLabel(branch) }}</span>\n        <span *ngIf=\"branch.action\" [innerHTML]=\"branch.action\" class=\"cqa-text-[#111827]\"></span>\n      </div>\n\n      <!-- Branch Content (Nested Steps \u2013 renderer dispatches by step type, n-level nesting) -->\n      <div *ngIf=\"!isReorder\" class=\"cqa-flex cqa-flex-col\">\n        <cqa-test-case-details-renderer\n          *ngFor=\"let step of branch.nestedSteps; let i = index\"\n          [step]=\"step\"\n          [index]=\"i\"\n          [branch]=\"branch\"\n          [isNested]=\"true\"\n          [isReorder]=\"isReorder\"\n          [addStepBetween]=\"addStepBetween\"\n          [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n          [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n          (branchStepChange)=\"onBranchStepChange($event.branch, $event.step, $event.stepIndex)\"\n          (addStepForBranch)=\"onAddStep($event.branch)\"\n          (deleteStepWithBranch)=\"onDeleteStep($event.branch, $event.stepIndex)\"\n          (toggleExpanded)=\"onNestedToggleExpanded($event, branch, step, i)\"\n          (groupNameChange)=\"$any(step).groupName = $event; onBranchStepChange(branch, step, i)\"\n          (descriptionChange)=\"$any(step).description = $event; onBranchStepChange(branch, step, i)\"\n          (reusableChange)=\"$any(step).reusable = $event; onBranchStepChange(branch, step, i)\"\n          (openExternal)=\"onBranchStepChange(branch, step, i)\"\n          (edit)=\"onBranchStepChange(branch, step, i)\"\n          (link)=\"onBranchStepChange(branch, step, i)\"\n          (duplicate)=\"onBranchStepChange(branch, step, i)\"\n          (conditionChange)=\"$any(step).condition = $event; onBranchStepChange(branch, step, i)\"\n          (addBranch)=\"onNestedConditionAddBranch($any(step)); onBranchStepChange(branch, step, i)\"\n          (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event); onBranchStepChange(branch, step, i)\"\n          (testDataProfileChange)=\"$any(step).testDataProfile = $event; onBranchStepChange(branch, step, i)\"\n          (startStepChange)=\"$any(step).startStep = $event; onBranchStepChange(branch, step, i)\"\n          (endStepChange)=\"$any(step).endStep = $event; onBranchStepChange(branch, step, i)\"\n          (maxIterationsChange)=\"$any(step).maxIterations = $event; onBranchStepChange(branch, step, i)\"\n          (eventTypeChange)=\"$any(step).eventType = $event; onBranchStepChange(branch, step, i)\"\n          (parameterChange)=\"onBranchStepChange(branch, step, i)\"\n          (selectionChange)=\"$any(step).selected = $event; onBranchStepChange(branch, step, i)\"\n          (loadMoreDataProfiles)=\"loadMoreDataProfiles.emit($event)\"\n          (searchDataProfiles)=\"searchDataProfiles.emit($event)\"\n          (stepUpdate)=\"stepUpdate.emit($event)\"\n          (dndDropInZone)=\"dndDropInZone.emit($event)\"\n          (clickAction)=\"clickAction.emit($event)\"\n          (editInDepth)=\"editInDepth.emit($event)\"\n          (addStepBetweenClick)=\"addStepBetweenClick.emit($event)\"\n        >\n        </cqa-test-case-details-renderer>\n      </div>\n      <div *ngIf=\"isReorder\" class=\"cqa-flex cqa-flex-col nested-step-drop-list\"\n           [dndDropzone]=\"['step']\"\n           dndEffectAllowed=\"move\"\n           dndDragoverClass=\"dndDragover\"\n           (dndDrop)=\"onDndDrop($event, branch)\">\n        <div dndPlaceholderRef class=\"step-drag-placeholder-nested cqa-my-1 cqa-min-h-[50px] cqa-border-2 cqa-border-dashed cqa-border-[#3F43EE] cqa-rounded cqa-bg-[rgba(63,67,238,0.08)] cqa-flex cqa-items-center cqa-justify-center cqa-text-[#3F43EE] cqa-text-xs\">Drop here</div>\n        <div *ngFor=\"let step of branch.nestedSteps; let i = index\" class=\"nested-step-drag-item\"\n             [dndDraggable]=\"step\"\n             dndEffectAllowed=\"move\"\n             dndType=\"step\">\n          <cqa-test-case-details-renderer\n            [step]=\"step\"\n            [index]=\"i\"\n            [branch]=\"branch\"\n            [isNested]=\"true\"\n            [isReorder]=\"isReorder\"\n            [addStepBetweenAbove]=\"addStepBetweenAbove\"\n            [addStepBetweenBelow]=\"addStepBetweenBelow\"\n            [addStepBetween]=\"addStepBetween\"\n            [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n            [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n            (branchStepChange)=\"onBranchStepChange($event.branch, $event.step, $event.stepIndex)\"\n            (addStepForBranch)=\"onAddStep($event.branch)\"\n            (deleteStepWithBranch)=\"onDeleteStep($event.branch, $event.stepIndex)\"\n            (toggleExpanded)=\"onNestedToggleExpanded($event, branch, step, i)\"\n            (groupNameChange)=\"$any(step).groupName = $event; onBranchStepChange(branch, step, i)\"\n            (descriptionChange)=\"$any(step).description = $event; onBranchStepChange(branch, step, i)\"\n            (reusableChange)=\"$any(step).reusable = $event; onBranchStepChange(branch, step, i)\"\n            (openExternal)=\"onBranchStepChange(branch, step, i)\"\n            (edit)=\"onBranchStepChange(branch, step, i)\"\n            (link)=\"onBranchStepChange(branch, step, i)\"\n            (duplicate)=\"onBranchStepChange(branch, step, i)\"\n            (conditionChange)=\"$any(step).condition = $event; onBranchStepChange(branch, step, i)\"\n            (addBranch)=\"onNestedConditionAddBranch($any(step)); onBranchStepChange(branch, step, i)\"\n            (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event); onBranchStepChange(branch, step, i)\"\n            (testDataProfileChange)=\"$any(step).testDataProfile = $event; onBranchStepChange(branch, step, i)\"\n            (startStepChange)=\"$any(step).startStep = $event; onBranchStepChange(branch, step, i)\"\n            (endStepChange)=\"$any(step).endStep = $event; onBranchStepChange(branch, step, i)\"\n            (maxIterationsChange)=\"$any(step).maxIterations = $event; onBranchStepChange(branch, step, i)\"\n            (eventTypeChange)=\"$any(step).eventType = $event; onBranchStepChange(branch, step, i)\"\n            (parameterChange)=\"onBranchStepChange(branch, step, i)\"\n            (selectionChange)=\"$any(step).selected = $event; onBranchStepChange(branch, step, i)\"\n            (loadMoreDataProfiles)=\"loadMoreDataProfiles.emit($event)\"\n            (searchDataProfiles)=\"searchDataProfiles.emit($event)\"\n            (stepUpdate)=\"stepUpdate.emit($event)\"\n            (dndDropInZone)=\"dndDropInZone.emit($event)\"\n            (clickAction)=\"clickAction.emit($event)\"\n            (editInDepth)=\"editInDepth.emit($event)\"\n            (addStepBetweenClick)=\"addStepBetweenClick.emit($event)\"\n          >\n          </cqa-test-case-details-renderer>\n        </div>\n      </div>\n    </div>\n\n    <!-- END IF Marker -->\n    <div [class]=\"'cqa-pl-4 cqa-py-1 cqa-text-[#7B3306] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium'\" style=\"border-top: 1px solid #E5E7EB;\">\n      END IF\n    </div>\n  </div>\n</div>" }]
+            args: [{ selector: 'cqa-test-case-condition-step', host: { class: 'cqa-ui-root' }, styles: [STEP_ROW_ACTIONS_STYLES], template: "<div [class]=\"'cqa-flex cqa-flex-col cqa-border cqa-border-solid cqa-border-[#E5E7EB] ' + (isNested ? ' cqa-pl-[24px]' : '')\">\n  <!-- Inline Edit Mode: CONDITION tag, three fields, IF/ELSE chips, Edit In depth, Cancel/Apply -->\n  <div *ngIf=\"isEditing\" class=\"cqa-py-2.5 cqa-px-4 cqa-flex cqa-flex-col cqa-gap-3\">\n    <!-- First Row: CONDITION tag, autocomplete, IF/ELSE indicators, Edit In depth, Cancel/Apply -->\n    <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-justify-between\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-grow\">\n        <!-- CONDITION Tag (orange) -->\n        <span class=\"cqa-px-1.5 cqa-rounded-md cqa-text-[#EA580C] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-[#FFEDD5]\">\n          CONDITION\n        </span>\n\n        <!-- First field: left operand (e.g. Usertype) - autocomplete with IF_CONDITION natural text actions -->\n        <cqa-autocomplete\n          *ngIf=\"editForm\"\n          [options]=\"conditionLeftAutocompleteOptions\"\n          [value]=\"editForm.get('conditionLeft')?.value ?? ''\"\n          (valueChange)=\"onEditFormFieldChange('conditionLeft', $event)\"\n          (optionSelect)=\"onConditionLeftSelect($event)\"\n          placeholder=\"Select condition\"\n          [fullWidth]=\"true\"\n          class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-autocomplete>\n\n        <!-- Second Row: Template Variables Section (shown when template is selected, inline before Edit In depth) -->\n        <div *ngIf=\"selectedTemplate && templateVariables && templateVariables.length > 0\" class=\"cqa-flex cqa-flex-row cqa-flex-wrap cqa-gap-3\">\n          <ng-container *ngFor=\"let variable of templateVariables\">\n            <!-- Boolean variables with mat-slide-toggle -->\n            <ng-container *ngIf=\"variable.type === 'boolean'\">\n              <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n                <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700\">\n                  {{ variable.label }}\n                </label>\n                <mat-slide-toggle\n                  [checked]=\"templateVariablesForm.get(variable.name)?.value || variable.value || false\"\n                  (change)=\"templateVariablesForm.get(variable.name)?.setValue($event.checked)\"\n                  color=\"primary\">\n                </mat-slide-toggle>\n              </div>\n            </ng-container>\n            \n            <!-- Non-boolean variables -->\n            <ng-container *ngIf=\"variable.type !== 'boolean' && variable.name !== 'custom_code'\">\n              <!-- Dropdown for select variables -->\n              <ng-container *ngIf=\"variable.name === 'type' || variable.name === 'scrollTo' || variable.options\">\n                <div class=\"cqa-flex cqa-flex-col\" style=\"min-width: 150px;\">\n                  <!-- <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                    {{ variable.label }}\n                  </label> -->\n                  <cqa-dynamic-select \n                    [form]=\"templateVariablesForm\"\n                    [config]=\"getSelectConfigForVariable(variable, false)\">\n                  </cqa-dynamic-select>\n                </div>\n              </ng-container>\n              <!-- Text Input for other variables -->\n              <ng-container *ngIf=\"variable.name !== 'type' && variable.name !== 'scrollTo' && !variable.options\">\n                <div class=\"cqa-flex cqa-flex-col\" style=\"min-width: 150px;\">\n                  <!-- <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                    {{ variable.label }}\n                  </label> -->\n                  <cqa-custom-input\n                    [placeholder]=\"'Enter ' + variable.label\"\n                    [value]=\"templateVariablesForm.get(variable.name)?.value || variable.value || ''\"\n                    [fullWidth]=\"true\"\n                    (valueChange)=\"templateVariablesForm.get(variable.name)?.setValue($event)\">\n                  </cqa-custom-input>\n                </div>\n              </ng-container>\n            </ng-container>\n          </ng-container>\n        </div>\n\n        <!-- IF / ELSE indicators -->\n        <span class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#DCFCE7] cqa-text-[#008236] cqa-border cqa-border-solid cqa-border-[#B9F8CF] cqa-flex cqa-items-center cqa-gap-1.5\">\n          <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6.66634 2L2.99967 5.66667L1.33301 4\" stroke=\"#008236\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n          IF\n        </span>\n        <!-- Add ELSE IF button - always visible -->\n        <button\n          type=\"button\"\n          (click)=\"onAddElse()\"\n          class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#F3F4F6] cqa-text-[#99A1AF] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-flex cqa-items-center cqa-gap-1.5 cqa-cursor-pointer hover:cqa-bg-[#E5E7EB] cqa-transition-colors\">\n          Add ELSE IF\n        </button>\n        <!-- Add Else button - calls API to create CONDITION_ELSE step -->\n        <button\n          type=\"button\"\n          (click)=\"onAddElseBranch()\"\n          class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#F3F4F6] cqa-text-[#99A1AF] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-flex cqa-items-center cqa-gap-1.5 cqa-cursor-pointer hover:cqa-bg-[#E5E7EB] cqa-transition-colors\">\n          Add Else\n        </button>\n\n        <!-- Edit In depth link -->\n        <a href=\"#\" (click)=\"onEditInDepth(); $event.preventDefault()\"\n          class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-[2px] cqa-no-underline\">\n          Edit In depth\n          <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg>\n        </a>      \n      </div>\n      <!-- Cancel / Apply buttons - shown on IF row when no ELSE IF branches are present -->\n      <div *ngIf=\"elseIfBranches.length === 0\" class=\"cqa-flex cqa-items-center cqa-gap-2\">\n        <cqa-button variant=\"outlined\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Cancel'\" (clicked)=\"onEditCancel()\"></cqa-button>\n        <cqa-button variant=\"filled\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Apply'\" (clicked)=\"onEditApply()\"></cqa-button>\n      </div>\n    </div>\n    \n    \n  </div>\n\n  <!-- ELSE IF Sections in Edit Mode - Loop through all ELSE IF branches -->\n  <ng-container *ngFor=\"let branch of elseIfBranches; let i = index\">\n    <div *ngIf=\"isEditing\" class=\"cqa-py-2.5 cqa-px-4 cqa-flex cqa-flex-col cqa-gap-3 cqa-border-t cqa-border-solid cqa-border-[#E5E7EB]\">\n      <!-- First Row: Remove ELSE IF button, autocomplete, Edit In depth, Cancel/Apply -->\n      <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-justify-between\">\n        <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-grow\">\n          <!-- Remove ELSE IF button -->\n          <button\n            type=\"button\"\n            (click)=\"onRemoveElse(branch.id)\"\n            class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#F3F4F6] cqa-text-[#99A1AF] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-cursor-pointer hover:cqa-bg-[#E5E7EB] cqa-transition-colors\">\n            Remove ELSE IF\n          </button>\n\n          <!-- ELSE IF autocomplete field: same as IF condition -->\n          <cqa-autocomplete\n            *ngIf=\"branch.form\"\n            [options]=\"conditionLeftAutocompleteOptions\"\n            [value]=\"branch.form.get('conditionLeft')?.value ?? ''\"\n            (valueChange)=\"branch.form.get('conditionLeft')?.setValue($event)\"\n            (optionSelect)=\"onElseConditionLeftSelect($event, branch.id)\"\n            placeholder=\"Select condition\"\n            [fullWidth]=\"true\"\n            class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-autocomplete>\n          \n          <!-- Second Row: ELSE IF Template Variables Section (shown when template is selected, inline before Edit In depth) -->\n          <div *ngIf=\"branch.selectedTemplate && branch.templateVariables && branch.templateVariables.length > 0\" class=\"cqa-flex cqa-flex-row cqa-flex-wrap cqa-gap-3\">\n            <ng-container *ngFor=\"let variable of branch.templateVariables\">\n              <!-- Boolean variables with mat-slide-toggle -->\n              <ng-container *ngIf=\"variable.type === 'boolean'\">\n                <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n                  <!-- <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700\">\n                    {{ variable.label }}\n                  </label> -->\n                  <mat-slide-toggle\n                    [checked]=\"branch.templateVariablesForm.get(variable.name)?.value || variable.value || false\"\n                    (change)=\"branch.templateVariablesForm.get(variable.name)?.setValue($event.checked)\"\n                    color=\"primary\">\n                  </mat-slide-toggle>\n                </div>\n              </ng-container>\n              \n              <!-- Non-boolean variables -->\n              <ng-container *ngIf=\"variable.type !== 'boolean' && variable.name !== 'custom_code'\">\n                <!-- Dropdown for select variables -->\n                <ng-container *ngIf=\"variable.name === 'type' || variable.name === 'scrollTo' || variable.options\">\n                  <div class=\"cqa-flex cqa-flex-col\" style=\"min-width: 150px;\">\n                    <!-- <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                      {{ variable.label }}\n                    </label> -->\n                    <cqa-dynamic-select \n                      [form]=\"branch.templateVariablesForm\"\n                      [config]=\"getSelectConfigForVariable(variable, branch.id)\">\n                    </cqa-dynamic-select>\n                  </div>\n                </ng-container>\n                \n                <!-- Text Input for other variables -->\n                <ng-container *ngIf=\"variable.name !== 'type' && variable.name !== 'scrollTo' && !variable.options\">\n                  <div class=\"cqa-flex cqa-flex-col\" style=\"min-width: 150px;\">\n                    <!-- <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n                      {{ variable.label }}\n                    </label> -->\n                    <cqa-custom-input\n                      [value]=\"branch.templateVariablesForm.get(variable.name)?.value || variable.value || ''\"\n                      (valueChange)=\"branch.templateVariablesForm.get(variable.name)?.setValue($event)\"\n                      [placeholder]=\"variable.label\">\n                    </cqa-custom-input>\n                  </div>\n                </ng-container>\n              </ng-container>\n            </ng-container>\n          </div>\n\n          <!-- Edit In depth link -->\n          <a href=\"#\" (click)=\"onEditInDepth(); $event.preventDefault()\"\n            class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-[2px] cqa-no-underline\">\n            Edit In depth\n            <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg>\n          </a>\n        </div>\n        <!-- Cancel / Apply buttons - shown in last ELSE IF row -->\n        <div *ngIf=\"i === elseIfBranches.length - 1\" class=\"cqa-flex cqa-items-center cqa-gap-2\">\n          <cqa-button variant=\"outlined\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Cancel'\" (clicked)=\"onEditCancel()\"></cqa-button>\n          <cqa-button variant=\"filled\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Apply'\" (clicked)=\"onEditApply()\"></cqa-button>\n        </div>\n      </div>\n    </div>\n  </ng-container>\n\n  <!-- Condition Header (normal view when not editing) -->\n  <div *ngIf=\"!isEditing\" [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 ' + (isInsideLoop ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4')\">\n    <!-- Drag Handle Icon (when isReorder is true) -->\n    <div *ngIf=\"isReorder\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\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    <!-- Checkbox (when isReorder is false) -->\n    <label *ngIf=\"!isReorder\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative\">\n      <input type=\"checkbox\"\n        [ngModel]=\"selected\"\n        (ngModelChange)=\"onSelectionChange($event)\"\n        class=\"cqa-h-4 cqa-w-4 cqa-cursor-pointer cqa-transition-all cqa-appearance-none cqa-rounded shadow hover:cqa-shadow-md cqa-border cqa-border-solid cqa-border-slate-300 cqa-flex-shrink-0\"\n        [class.cqa-bg-[#3F43EE]]=\"selected\"\n        [class.cqa-border-[#3F43EE]]=\"selected\"\n        id=\"check-condition\" />\n      <span class=\"cqa-absolute cqa-text-white cqa-top-1/2 cqa-left-1/2 cqa--translate-x-1/2 cqa--translate-y-1/2 cqa-pointer-events-none cqa-flex cqa-items-center cqa-justify-center\"\n        [class.cqa-opacity-0]=\"!selected\"\n        [class.cqa-opacity-100]=\"selected\">\n        <svg width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 3.125L4.5 8.625L2 6.125\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      </span>\n    </label>\n    <!-- Expand/Collapse Icon -->\n    <button type=\"button\" (click)=\"onToggleExpanded()\" class=\"cqa-p-0\">\n      <svg [class.cqa-rotate-180]=\"!expanded\" class=\"cqa-transition-transform\" width=\"16\" height=\"16\"\n        viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M12 10L8 6L4 10\" stroke=\"#6B7280\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n          stroke-linejoin=\"round\" />\n      </svg>\n    </button>\n\n    <!-- IF/ELSE Icon -->\n    <div><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M4 2V10\" stroke=\"#7B3306\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path\n          d=\"M12 6C13.1046 6 14 5.10457 14 4C14 2.89543 13.1046 2 12 2C10.8954 2 10 2.89543 10 4C10 5.10457 10.8954 6 12 6Z\"\n          stroke=\"#7B3306\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path\n          d=\"M4 14C5.10457 14 6 13.1046 6 12C6 10.8954 5.10457 10 4 10C2.89543 10 2 10.8954 2 12C2 13.1046 2.89543 14 4 14Z\"\n          stroke=\"#7B3306\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        <path d=\"M12 6C12 7.5913 11.3679 9.11742 10.2426 10.2426C9.11742 11.3679 7.5913 12 6 12\" stroke=\"#7B3306\"\n          stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n      </svg></div>\n\n    <!-- IF/ELSE Label -->\n    <span class=\"cqa-font-semibold cqa-text-[#7B3306] cqa-text-[12px] cqa-leading-none\">\n      IF / ELSE\n    </span>\n\n    <!-- Condition Input -->\n    <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-ml-2 cqa-flex-1\">\n      <span [innerHTML]=\"condition\"></span>\n      <!-- <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px]\">\n        If\n      </span>\n      <span\n        class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\">.success-message</span>\n      <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px]\">\n        is visible\n      </span> -->\n      <!-- <input\n        type=\"text\"\n        [value]=\"condition\"\n        (input)=\"onConditionChange($any($event.target).value)\"\n        placeholder=\"element `.success-message` is visible\"\n        class=\"cqa-px-3 cqa-py-1.5 cqa-rounded-lg cqa-border cqa-border-gray-300 cqa-bg-white cqa-text-gray-900 cqa-text-sm cqa-flex-1 cqa-max-w-md cqa-outline-none focus:cqa-ring-2 focus:cqa-ring-primary focus:cqa-ring-opacity-50\"\n      /> -->\n    </div>\n\n    <!-- Steps Summary -->\n    <div\n      class=\"cqa-ml-auto cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-rounded-lg cqa-py-0.5 cqa-px-2 cqa-text-[#0A0A0A] cqa-text-[12px] cqa-leading-[15px]\">\n      {{ getStepsSummary() }}\n    </div>\n\n    <!-- Action Icons: Edit, Link, Duplicate, Delete (show on hover) -->\n    <div class=\"step-actions cqa-flex cqa-items-center cqa-gap-3 cqa-px-[7px]\">\n      <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M7 11.6666H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M9.55208 2.1128C9.7843 1.88058 10.0993 1.75012 10.4277 1.75012C10.7561 1.75012 11.071 1.88058 11.3033 2.1128C11.5355 2.34502 11.6659 2.65998 11.6659 2.98838C11.6659 3.31679 11.5355 3.63175 11.3033 3.86397L4.29742 10.8704C4.15864 11.0092 3.9871 11.1107 3.79867 11.1656L2.12333 11.6544C2.07314 11.669 2.01993 11.6699 1.96928 11.6569C1.91863 11.6439 1.8724 11.6176 1.83543 11.5806C1.79846 11.5437 1.7721 11.4974 1.75913 11.4468C1.74615 11.3961 1.74703 11.3429 1.76167 11.2927L2.2505 9.61738C2.30546 9.42916 2.40698 9.25783 2.54567 9.11922L9.55208 2.1128Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      </button>\n      <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      </button>\n      <button type=\"button\" (click)=\"onDuplicate(); $event.stopPropagation()\" title=\"Duplicate\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      </button>\n      <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\" class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1.75 3.5H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11.0827 3.5V11.6667C11.0827 12.25 10.4993 12.8333 9.91602 12.8333H4.08268C3.49935 12.8333 2.91602 12.25 2.91602 11.6667V3.5\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.66602 3.49996V2.33329C4.66602 1.74996 5.24935 1.16663 5.83268 1.16663H8.16602C8.74935 1.16663 9.33268 1.74996 9.33268 2.33329V3.49996\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M5.83398 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M8.16602 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      </button>\n    </div>\n  </div>\n\n  <!-- Expanded Content with Branches -->\n  <div *ngIf=\"expanded\" class=\"cqa-flex cqa-flex-col\">\n    <!-- Branches (IF TRUE, ELSE IF, ELSE) -->\n    <div *ngFor=\"let branch of branches\" class=\"cqa-flex cqa-flex-col\">\n      <!-- Branch Header -->\n      <div\n        [class]=\"'cqa-px-4 cqa-py-2 cqa-text-[12px] cqa-leading-[15px] cqa-flex cqa-items-center cqa-gap-2 ' + getBranchTextColor(branch) + ' ' + getBranchColorClass(branch)\">\n        <span>{{ getBranchLabel(branch) }}</span>\n        <span *ngIf=\"branch.action\" [innerHTML]=\"branch.action\" class=\"cqa-text-[#111827]\"></span>\n      </div>\n\n      <!-- Branch Content (Nested Steps \u2013 renderer dispatches by step type, n-level nesting) -->\n      <div *ngIf=\"!isReorder\" class=\"cqa-flex cqa-flex-col\">\n        <cqa-test-case-details-renderer\n          *ngFor=\"let step of branch.nestedSteps; let i = index\"\n          [step]=\"step\"\n          [index]=\"i\"\n          [selected]=\"$any(step).selected\"\n          [branch]=\"branch\"\n          [isNested]=\"true\"\n          [isReorder]=\"isReorder\"\n          [addStepBetween]=\"addStepBetween\"\n          [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n          [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n          (branchStepChange)=\"onBranchStepChange($event.branch, $event.step, $event.stepIndex)\"\n          (addStepForBranch)=\"onAddStep($event.branch)\"\n          (deleteStepWithBranch)=\"onDeleteStep($event.branch, $event.stepIndex)\"\n          (toggleExpanded)=\"onNestedToggleExpanded($event, branch, step, i)\"\n          (groupNameChange)=\"$any(step).groupName = $event; onBranchStepChange(branch, step, i)\"\n          (descriptionChange)=\"$any(step).description = $event; onBranchStepChange(branch, step, i)\"\n          (reusableChange)=\"$any(step).reusable = $event; onBranchStepChange(branch, step, i)\"\n          (openExternal)=\"onBranchStepChange(branch, step, i)\"\n          (edit)=\"onBranchStepChange(branch, step, i)\"\n          (link)=\"onBranchStepChange(branch, step, i)\"\n          (duplicate)=\"onBranchStepChange(branch, step, i)\"\n          (conditionChange)=\"$any(step).condition = $event; onBranchStepChange(branch, step, i)\"\n          (addBranch)=\"onNestedConditionAddBranch($any(step)); onBranchStepChange(branch, step, i)\"\n          (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event); onBranchStepChange(branch, step, i)\"\n          (testDataProfileChange)=\"$any(step).testDataProfile = $event; onBranchStepChange(branch, step, i)\"\n          (startStepChange)=\"$any(step).startStep = $event; onBranchStepChange(branch, step, i)\"\n          (endStepChange)=\"$any(step).endStep = $event; onBranchStepChange(branch, step, i)\"\n          (maxIterationsChange)=\"$any(step).maxIterations = $event; onBranchStepChange(branch, step, i)\"\n          (eventTypeChange)=\"$any(step).eventType = $event; onBranchStepChange(branch, step, i)\"\n          (parameterChange)=\"onBranchStepChange(branch, step, i)\"\n          (selectionChange)=\"$any(step).selected = $event; onBranchStepChange(branch, step, i)\"\n          (loadMoreDataProfiles)=\"loadMoreDataProfiles.emit($event)\"\n          (searchDataProfiles)=\"searchDataProfiles.emit($event)\"\n          (stepUpdate)=\"stepUpdate.emit($event)\"\n          (dndDropInZone)=\"dndDropInZone.emit($event)\"\n          (clickAction)=\"clickAction.emit($event)\"\n          (editInDepth)=\"editInDepth.emit($event)\"\n          (addStepBetweenClick)=\"addStepBetweenClick.emit($event)\"\n        >\n        </cqa-test-case-details-renderer>\n      </div>\n      <div *ngIf=\"isReorder\" class=\"cqa-flex cqa-flex-col nested-step-drop-list\"\n           [dndDropzone]=\"['step']\"\n           dndEffectAllowed=\"move\"\n           dndDragoverClass=\"dndDragover\"\n           (dndDrop)=\"onDndDrop($event, branch)\">\n        <div dndPlaceholderRef class=\"step-drag-placeholder-nested cqa-my-1 cqa-min-h-[50px] cqa-border-2 cqa-border-dashed cqa-border-[#3F43EE] cqa-rounded cqa-bg-[rgba(63,67,238,0.08)] cqa-flex cqa-items-center cqa-justify-center cqa-text-[#3F43EE] cqa-text-xs\">Drop here</div>\n        <div *ngFor=\"let step of branch.nestedSteps; let i = index\" class=\"nested-step-drag-item\"\n             [dndDraggable]=\"step\"\n             dndEffectAllowed=\"move\"\n             dndType=\"step\">\n          <cqa-test-case-details-renderer\n            [step]=\"step\"\n            [index]=\"i\"\n            [selected]=\"$any(step).selected\"\n            [branch]=\"branch\"\n            [isNested]=\"true\"\n            [isReorder]=\"isReorder\"\n            [addStepBetweenAbove]=\"addStepBetweenAbove\"\n            [addStepBetweenBelow]=\"addStepBetweenBelow\"\n            [addStepBetween]=\"addStepBetween\"\n            [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n            [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n            (branchStepChange)=\"onBranchStepChange($event.branch, $event.step, $event.stepIndex)\"\n            (addStepForBranch)=\"onAddStep($event.branch)\"\n            (deleteStepWithBranch)=\"onDeleteStep($event.branch, $event.stepIndex)\"\n            (toggleExpanded)=\"onNestedToggleExpanded($event, branch, step, i)\"\n            (groupNameChange)=\"$any(step).groupName = $event; onBranchStepChange(branch, step, i)\"\n            (descriptionChange)=\"$any(step).description = $event; onBranchStepChange(branch, step, i)\"\n            (reusableChange)=\"$any(step).reusable = $event; onBranchStepChange(branch, step, i)\"\n            (openExternal)=\"onBranchStepChange(branch, step, i)\"\n            (edit)=\"onBranchStepChange(branch, step, i)\"\n            (link)=\"onBranchStepChange(branch, step, i)\"\n            (duplicate)=\"onBranchStepChange(branch, step, i)\"\n            (conditionChange)=\"$any(step).condition = $event; onBranchStepChange(branch, step, i)\"\n            (addBranch)=\"onNestedConditionAddBranch($any(step)); onBranchStepChange(branch, step, i)\"\n            (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event); onBranchStepChange(branch, step, i)\"\n            (testDataProfileChange)=\"$any(step).testDataProfile = $event; onBranchStepChange(branch, step, i)\"\n            (startStepChange)=\"$any(step).startStep = $event; onBranchStepChange(branch, step, i)\"\n            (endStepChange)=\"$any(step).endStep = $event; onBranchStepChange(branch, step, i)\"\n            (maxIterationsChange)=\"$any(step).maxIterations = $event; onBranchStepChange(branch, step, i)\"\n            (eventTypeChange)=\"$any(step).eventType = $event; onBranchStepChange(branch, step, i)\"\n            (parameterChange)=\"onBranchStepChange(branch, step, i)\"\n            (selectionChange)=\"$any(step).selected = $event; onBranchStepChange(branch, step, i)\"\n            (loadMoreDataProfiles)=\"loadMoreDataProfiles.emit($event)\"\n            (searchDataProfiles)=\"searchDataProfiles.emit($event)\"\n            (stepUpdate)=\"stepUpdate.emit($event)\"\n            (dndDropInZone)=\"dndDropInZone.emit($event)\"\n            (clickAction)=\"clickAction.emit($event)\"\n            (editInDepth)=\"editInDepth.emit($event)\"\n            (addStepBetweenClick)=\"addStepBetweenClick.emit($event)\"\n          >\n          </cqa-test-case-details-renderer>\n        </div>\n      </div>\n    </div>\n\n    <!-- END IF Marker -->\n    <div [class]=\"'cqa-pl-4 cqa-py-1 cqa-text-[#7B3306] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium'\" style=\"border-top: 1px solid #E5E7EB;\">\n      END IF\n    </div>\n  </div>\n</div>" }]
         }], ctorParameters: function () { return [{ type: i1$1.FormBuilder }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { config: [{
                 type: Input
             }], id: [{
@@ -20956,6 +20995,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Input
             }], isReorder: [{
                 type: Input
+            }], selected: [{
+                type: Input
             }], dataProfileOptions: [{
                 type: Input
             }], hasMoreDataProfiles: [{
@@ -21008,6 +21049,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Output
             }], addStepBetweenClick: [{
                 type: Output
+            }], selectionChange: [{
+                type: Output
             }] } });
 class TestCaseStepGroupComponent {
@@ -21019,6 +21062,7 @@ class TestCaseStepGroupComponent {
         this.isNested = false;
         this.isInsideLoop = false;
         this.isReorder = false;
+        this.selected = false;
         this.loading = false;
         /** Options for the data profile dropdown */
         this.dataProfileOptions = [];
@@ -21058,6 +21102,7 @@ class TestCaseStepGroupComponent {
         this.stepUpdate = new EventEmitter();
         /** Re-emit addStepBetweenClick from nested renderers */
         this.addStepBetweenClick = new EventEmitter();
+        this.selectionChange = new EventEmitter();
     }
     onDndDrop(event) {
         this.dndDropInZone.emit({ event, targetList: this.nestedSteps });
@@ -21110,6 +21155,7 @@ class TestCaseStepGroupComponent {
             this.description = this.config.description;
             this.reusable = this.config.reusable || false;
             this.loading = this.config.loading || false;
+            this.selected = this.config.selected || false;
             // Update nestedSteps from config if available, otherwise use the input directly
             if (this.config.nestedSteps !== undefined) {
                 this.nestedSteps = this.config.nestedSteps;
@@ -21196,6 +21242,10 @@ class TestCaseStepGroupComponent {
     onDelete() {
         this.delete.emit();
     }
+    onSelectionChange(checked) {
+        this.selected = checked;
+        this.selectionChange.emit(checked);
+    }
     isNormalStep(step) {
         return 'eventType' in step;
     }
@@ -21240,10 +21290,10 @@ class TestCaseStepGroupComponent {
     }
 }
 TestCaseStepGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseStepGroupComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-TestCaseStepGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestCaseStepGroupComponent, selector: "cqa-test-case-step-group", inputs: { config: "config", id: "id", stepNumber: "stepNumber", groupName: "groupName", description: "description", reusable: "reusable", nestedSteps: "nestedSteps", expanded: "expanded", isNested: "isNested", isInsideLoop: "isInsideLoop", isReorder: "isReorder", loading: "loading", dataProfileOptions: "dataProfileOptions", hasMoreDataProfiles: "hasMoreDataProfiles", isLoadingDataProfiles: "isLoadingDataProfiles", naturalTextActionsOptions: "naturalTextActionsOptions", addStepBetweenAbove: "addStepBetweenAbove", addStepBetweenBelow: "addStepBetweenBelow", addStepBetween: "addStepBetween" }, outputs: { toggleExpanded: "toggleExpanded", groupNameChange: "groupNameChange", descriptionChange: "descriptionChange", reusableChange: "reusableChange", nestedStepChange: "nestedStepChange", addStep: "addStep", deleteStep: "deleteStep", openExternal: "openExternal", edit: "edit", editInDepth: "editInDepth", link: "link", duplicate: "duplicate", delete: "delete", dndDropInZone: "dndDropInZone", loadMoreDataProfiles: "loadMoreDataProfiles", searchDataProfiles: "searchDataProfiles", stepUpdate: "stepUpdate", addStepBetweenClick: "addStepBetweenClick" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div [class]=\"'cqa-flex cqa-flex-col'\">\n  <!-- Step Group Header -->\n  <div [class]=\"'step-row cqa-flex cqa-gap-3 cqa-items-center cqa-py-2 ' + (isInsideLoop ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4')\">\n    <!-- Expand/Collapse Icon -->\n    <button type=\"button\" (click)=\"onToggleExpanded()\" class=\"cqa-p-0\">\n      <svg [class.cqa-rotate-180]=\"expanded\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M4 6L8 10L12 6\" stroke=\"#6B7280\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n          stroke-linejoin=\"round\" />\n      </svg>\n    </button>\n\n    <!-- Folder Icon -->\n    <div>\n      <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path\n          d=\"M15 15C15.3978 15 15.7794 14.842 16.0607 14.5607C16.342 14.2794 16.5 13.8978 16.5 13.5V6C16.5 5.60217 16.342 5.22064 16.0607 4.93934C15.7794 4.65804 15.3978 4.5 15 4.5H9.075C8.82413 4.50246 8.57666 4.44196 8.35523 4.32403C8.13379 4.20611 7.94547 4.03453 7.8075 3.825L7.2 2.925C7.06342 2.7176 6.87748 2.54736 6.65887 2.42955C6.44027 2.31174 6.19583 2.25004 5.9475 2.25H3C2.60218 2.25 2.22064 2.40804 1.93934 2.68934C1.65804 2.97064 1.5 3.35218 1.5 3.75V13.5C1.5 13.8978 1.65804 14.2794 1.93934 14.5607C2.22064 14.842 2.60218 15 3 15H15Z\"\n          fill=\"#EFF6FF\" stroke=\"#60A5FA\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n      </svg>\n    </div>\n\n    <!-- Group Name and Description -->\n    <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-gap-[2px]\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n        <!-- Group Name Input -->\n        <p class=\"cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[18px] cqa-font-bold\">{{groupName}}</p>\n        <!-- Reusable Tag -->\n        <span *ngIf=\"reusable\"\n          class=\"cqa-px-2 cqa-py-[1.5px] cqa-rounded-lg cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-[#D8D9FC] cqa-border cqa-border-solid cqa-border-[#8A8CF4]\">\n          Reusable\n        </span>\n      </div>\n\n      <!-- Description -->\n      <p class=\"cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px]\">{{description}}</p>\n    </div>\n\n    <!-- Steps Summary and Action Icons -->\n    <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n\n      <!-- External Link Icon -->\n      <button type=\"button\" (click)=\"onOpenExternal(); $event.stopPropagation()\" title=\"Open in new tab\"\n        class=\"cqa-p-0 cqa-text-[#99999E] hover:cqa-text-[#1447E6]\">\n        <svg width=\"16\" height=\"17\" viewBox=\"0 0 16 17\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M12 8.66667V12.6667C12 13.0203 11.8595 13.3594 11.6095 13.6095C11.3594 13.8595 11.0203 14 10.6667 14H3.33333C2.97971 14 2.64057 13.8595 2.39052 13.6095C2.14048 13.3594 2 13.0203 2 12.6667V5.33333C2 4.97971 2.14048 4.64057 2.39052 4.39052C2.64057 4.14048 2.97971 4 3.33333 4H7.33333M10 2H14M14 2V6M14 2L6.66667 9.33333\"\n            stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        </svg>\n      </button>\n\n      <!-- Steps Summary -->\n      <span class=\"cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-rounded-lg cqa-py-0.5 cqa-px-2 cqa-text-[#0A0A0A] cqa-text-[12px] cqa-leading-[15px]\">\n        {{ getStepsSummary() }}\n      </span>\n\n      <!-- Action Icons (show on hover, same as API step) -->\n      <div class=\"step-actions cqa-flex cqa-items-center cqa-gap-[14px] cqa-ml-auto cqa-px-[7px]\">\n\n        <!-- Edit Icon -->\n        <!-- <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M7 11.6666H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n            <path\n              d=\"M9.55208 2.1128C9.7843 1.88058 10.0993 1.75012 10.4277 1.75012C10.7561 1.75012 11.071 1.88058 11.3033 2.1128C11.5355 2.34502 11.6659 2.65998 11.6659 2.98838C11.6659 3.31679 11.5355 3.63175 11.3033 3.86397L4.29742 10.8704C4.15864 11.0092 3.9871 11.1107 3.79867 11.1656L2.12333 11.6544C2.07314 11.669 2.01993 11.6699 1.96928 11.6569C1.91863 11.6439 1.8724 11.6176 1.83543 11.5806C1.79846 11.5437 1.7721 11.4974 1.75913 11.4468C1.74615 11.3961 1.74703 11.3429 1.76167 11.2927L2.2505 9.61738C2.30546 9.42916 2.40698 9.25783 2.54567 9.11922L9.55208 2.1128Z\"\n              stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          </svg>\n        </button> -->\n\n        <!-- Link Icon -->\n        <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <g clip-path=\"url(#clip0_609_26588)\">\n              <path\n                d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\"\n                stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n              <path\n                d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\"\n                stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n              <path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n                stroke-linejoin=\"round\" />\n            </g>\n            <defs>\n              <clipPath id=\"clip0_609_26588\">\n                <rect width=\"14\" height=\"14\" fill=\"white\" />\n              </clipPath>\n            </defs>\n          </svg>\n        </button>\n\n        <!-- Duplicate Icon -->\n        <button type=\"button\" (click)=\"onDuplicate(); $event.stopPropagation()\" title=\"Duplicate\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\"\n              stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            <path\n              d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\"\n              stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          </svg>\n        </button>\n\n        <!-- Delete Icon -->\n        <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\" class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\">\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M1.75 3.5H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n            <path\n              d=\"M11.0827 3.5V11.6667C11.0827 12.25 10.4993 12.8333 9.91602 12.8333H4.08268C3.49935 12.8333 2.91602 12.25 2.91602 11.6667V3.5\"\n              stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            <path\n              d=\"M4.66602 3.49996V2.33329C4.66602 1.74996 5.24935 1.16663 5.83268 1.16663H8.16602C8.74935 1.16663 9.33268 1.74996 9.33268 2.33329V3.49996\"\n              stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            <path d=\"M5.83398 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n            <path d=\"M8.16602 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n          </svg>\n        </button>\n      </div>\n    </div>\n  </div>\n\n  <!-- Expanded Content with Nested Steps (renderer dispatches by step type, n-level nesting) -->\n  <div *ngIf=\"expanded\" class=\"cqa-flex cqa-flex-col\">\n    <!-- Loading Indicator -->\n    <div *ngIf=\"loading\" class=\"cqa-flex cqa-items-center cqa-justify-center cqa-py-8 cqa-px-4\">\n      <div class=\"cqa-flex cqa-flex-col cqa-items-center cqa-gap-3\">\n        <!-- Spinner -->\n        <svg class=\"cqa-animate-spin cqa-h-6 cqa-w-6 cqa-text-[#3F43EE]\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n          <circle class=\"cqa-opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n          <path class=\"cqa-opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n        </svg>\n        <span class=\"cqa-text-[#6B7280] cqa-text-sm\">Loading steps...</span>\n      </div>\n    </div>\n    \n    <!-- Nested Steps Content (only show when not loading) -->\n    <div *ngIf=\"!loading\" class=\"cqa-flex cqa-flex-col\">\n      <div class=\"cqa-flex cqa-flex-col\" *ngIf=\"!isReorder\">\n      <cqa-test-case-details-renderer\n        *ngFor=\"let step of nestedSteps; let i = index\"\n        [step]=\"step\"\n        [index]=\"i\"\n        [isNested]=\"true\"\n        [isReorder]=\"isReorder\"\n        [addStepBetween]=\"false\"\n        [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n        [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n        (nestedStepChange)=\"onNestedStepChange($event.step, $event.index)\"\n        (addStep)=\"onAddStep()\"\n        (deleteStep)=\"onDeleteStep($event)\"\n        (toggleExpanded)=\"onNestedToggleExpanded($event, step, i)\"\n        (groupNameChange)=\"$any(step).groupName = $event; onNestedStepChange(step, i)\"\n        (descriptionChange)=\"$any(step).description = $event; onNestedStepChange(step, i)\"\n        (reusableChange)=\"$any(step).reusable = $event; onNestedStepChange(step, i)\"\n        (openExternal)=\"onNestedStepChange(step, i)\"\n        (edit)=\"onNestedStepChange(step, i)\"\n        (link)=\"onNestedStepChange(step, i)\"\n        (duplicate)=\"onNestedStepChange(step, i)\"\n        (delete)=\"onDeleteStep(i)\"\n        (conditionChange)=\"$any(step).condition = $event; onNestedStepChange(step, i)\"\n        (branchStepChange)=\"onNestedStepChange(step, i)\"\n        (addBranch)=\"onNestedConditionAddBranch($any(step), i)\"\n        (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event, i)\"\n        (testDataProfileChange)=\"$any(step).testDataProfile = $event; onNestedStepChange(step, i)\"\n        (startStepChange)=\"$any(step).startStep = $event; onNestedStepChange(step, i)\"\n        (endStepChange)=\"$any(step).endStep = $event; onNestedStepChange(step, i)\"\n        (maxIterationsChange)=\"$any(step).maxIterations = $event; onNestedStepChange(step, i)\"\n        (eventTypeChange)=\"$any(step).eventType = $event; onNestedStepChange(step, i)\"\n        (parameterChange)=\"onNestedStepChange(step, i)\"\n        (selectionChange)=\"$any(step).selected = $event; onNestedStepChange(step, i)\"\n        (loadMoreDataProfiles)=\"loadMoreDataProfiles.emit($event)\"\n        (searchDataProfiles)=\"searchDataProfiles.emit($event)\"\n        (stepUpdate)=\"stepUpdate.emit($event)\"\n        (dndDropInZone)=\"dndDropInZone.emit($event)\"\n        (addStepBetweenClick)=\"addStepBetweenClick.emit($event)\"\n      >\n      </cqa-test-case-details-renderer>\n    </div>\n    <div *ngIf=\"isReorder\" class=\"cqa-flex cqa-flex-col nested-step-drop-list\"\n         [dndDropzone]=\"['step']\"\n         dndEffectAllowed=\"move\"\n         dndDragoverClass=\"dndDragover\"\n         (dndDrop)=\"onDndDrop($event)\">\n      <div dndPlaceholderRef class=\"step-drag-placeholder-nested cqa-my-1 cqa-min-h-[50px] cqa-border-2 cqa-border-dashed cqa-border-[#3F43EE] cqa-rounded cqa-bg-[rgba(63,67,238,0.08)] cqa-flex cqa-items-center cqa-justify-center cqa-text-[#3F43EE] cqa-text-xs\">Drop here</div>\n      <div *ngFor=\"let step of nestedSteps; let i = index\" class=\"nested-step-drag-item\"\n           [dndDraggable]=\"step\"\n           dndEffectAllowed=\"move\"\n           dndType=\"step\">\n        <cqa-test-case-details-renderer\n          [step]=\"step\"\n          [index]=\"i\"\n          [isNested]=\"true\"\n          [isReorder]=\"isReorder\"\n          [addStepBetween]=\"false\"\n          [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n          [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n          (nestedStepChange)=\"onNestedStepChange($event.step, $event.index)\"\n          (addStep)=\"onAddStep()\"\n          (deleteStep)=\"onDeleteStep($event)\"\n          (toggleExpanded)=\"onNestedToggleExpanded($event, step, i)\"\n          (groupNameChange)=\"$any(step).groupName = $event; onNestedStepChange(step, i)\"\n          (descriptionChange)=\"$any(step).description = $event; onNestedStepChange(step, i)\"\n          (reusableChange)=\"$any(step).reusable = $event; onNestedStepChange(step, i)\"\n          (openExternal)=\"onNestedStepChange(step, i)\"\n          (edit)=\"onNestedStepChange(step, i)\"\n          (link)=\"onNestedStepChange(step, i)\"\n          (duplicate)=\"onNestedStepChange(step, i)\"\n          (delete)=\"onDeleteStep(i)\"\n          (conditionChange)=\"$any(step).condition = $event; onNestedStepChange(step, i)\"\n          (branchStepChange)=\"onNestedStepChange(step, i)\"\n          (addBranch)=\"onNestedConditionAddBranch($any(step), i)\"\n          (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event, i)\"\n          (testDataProfileChange)=\"$any(step).testDataProfile = $event; onNestedStepChange(step, i)\"\n          (startStepChange)=\"$any(step).startStep = $event; onNestedStepChange(step, i)\"\n          (endStepChange)=\"$any(step).endStep = $event; onNestedStepChange(step, i)\"\n          (maxIterationsChange)=\"$any(step).maxIterations = $event; onNestedStepChange(step, i)\"\n          (eventTypeChange)=\"$any(step).eventType = $event; onNestedStepChange(step, i)\"\n          (parameterChange)=\"onNestedStepChange(step, i)\"\n          (selectionChange)=\"$any(step).selected = $event; onNestedStepChange(step, i)\"\n          (loadMoreDataProfiles)=\"loadMoreDataProfiles.emit($event)\"\n          (searchDataProfiles)=\"searchDataProfiles.emit($event)\"\n          (stepUpdate)=\"stepUpdate.emit($event)\"\n          (dndDropInZone)=\"dndDropInZone.emit($event)\"\n          (addStepBetweenClick)=\"addStepBetweenClick.emit($event)\"\n        >\n        </cqa-test-case-details-renderer>\n      </div>\n    </div>\n\n      <!-- END GROUP Marker -->\n      <div [class]=\"'cqa-pl-8 cqa-py-2 cqa-border-t cqa-border-[#D1C4E9] cqa-bg-[#D1C4E9]'\">\n        <span class=\"cqa-font-bold cqa-text-white cqa-text-sm cqa-uppercase\">\n          END GROUP\n        </span>\n      </div>\n    </div>\n  </div>\n</div>", styles: [".step-actions{opacity:0;transition:opacity .15s ease}.step-row:hover .step-actions{opacity:1}\n"], components: [{ type: TestCaseDetailsRendererComponent, selector: "cqa-test-case-details-renderer", inputs: ["step", "index", "isNested", "isInsideLoop", "branch", "isReorder", "addStepBetweenAbove", "addStepBetweenBelow", "addStepBetween", "dataProfileOptions", "hasMoreDataProfiles", "isLoadingDataProfiles", "naturalTextActionsOptions", "setConditionTemplateVariables"], outputs: ["nestedStepChange", "addStep", "deleteStep", "toggleExpanded", "groupNameChange", "descriptionChange", "reusableChange", "openExternal", "edit", "link", "duplicate", "delete", "viewDetails", "selectionChange", "conditionChange", "branchStepChange", "addStepForBranch", "deleteStepWithBranch", "addBranch", "addElse", "deleteBranch", "testDataProfileChange", "startStepChange", "endStepChange", "maxIterationsChange", "eventTypeChange", "parameterChange", "clickAction", "dndDropInZone", "loadMoreDataProfiles", "searchDataProfiles", "stepUpdate", "addStepBetweenClick", "editInDepth"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.DndDropzoneDirective, selector: "[dndDropzone]", inputs: ["dndDropzone", "dndEffectAllowed", "dndAllowExternal", "dndHorizontal", "dndDragoverClass", "dndDropzoneDisabledClass", "dndDisableIf", "dndDisableDropIf"], outputs: ["dndDragover", "dndDrop"] }, { type: i5.DndPlaceholderRefDirective, selector: "[dndPlaceholderRef]" }, { type: i5.DndDraggableDirective, selector: "[dndDraggable]", inputs: ["dndDraggable", "dndEffectAllowed", "dndType", "dndDraggingClass", "dndDraggingSourceClass", "dndDraggableDisabledClass", "dndDragImageOffsetFunction", "dndDisableIf", "dndDisableDragIf"], outputs: ["dndStart", "dndDrag", "dndEnd", "dndMoved", "dndCopied", "dndLinked", "dndCanceled"] }] });
+TestCaseStepGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestCaseStepGroupComponent, selector: "cqa-test-case-step-group", inputs: { config: "config", id: "id", stepNumber: "stepNumber", groupName: "groupName", description: "description", reusable: "reusable", nestedSteps: "nestedSteps", expanded: "expanded", isNested: "isNested", isInsideLoop: "isInsideLoop", isReorder: "isReorder", selected: "selected", loading: "loading", dataProfileOptions: "dataProfileOptions", hasMoreDataProfiles: "hasMoreDataProfiles", isLoadingDataProfiles: "isLoadingDataProfiles", naturalTextActionsOptions: "naturalTextActionsOptions", addStepBetweenAbove: "addStepBetweenAbove", addStepBetweenBelow: "addStepBetweenBelow", addStepBetween: "addStepBetween" }, outputs: { toggleExpanded: "toggleExpanded", groupNameChange: "groupNameChange", descriptionChange: "descriptionChange", reusableChange: "reusableChange", nestedStepChange: "nestedStepChange", addStep: "addStep", deleteStep: "deleteStep", openExternal: "openExternal", edit: "edit", editInDepth: "editInDepth", link: "link", duplicate: "duplicate", delete: "delete", dndDropInZone: "dndDropInZone", loadMoreDataProfiles: "loadMoreDataProfiles", searchDataProfiles: "searchDataProfiles", stepUpdate: "stepUpdate", addStepBetweenClick: "addStepBetweenClick", selectionChange: "selectionChange" }, host: { classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div [class]=\"'cqa-flex cqa-flex-col'\">\n  <!-- Step Group Header -->\n  <div [class]=\"'step-row cqa-flex cqa-gap-3 cqa-items-center cqa-py-2 ' + (isInsideLoop ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4')\">\n    <!-- Drag Handle Icon (when isReorder is true) -->\n    <div *ngIf=\"isReorder\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\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    <!-- Checkbox (when isReorder is false) -->\n    <label *ngIf=\"!isReorder\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative\">\n      <input type=\"checkbox\"\n        [ngModel]=\"selected\"\n        (ngModelChange)=\"onSelectionChange($event)\"\n        class=\"cqa-h-4 cqa-w-4 cqa-cursor-pointer cqa-transition-all cqa-appearance-none cqa-rounded shadow hover:cqa-shadow-md cqa-border cqa-border-solid cqa-border-slate-300 cqa-flex-shrink-0\"\n        [class.cqa-bg-[#3F43EE]]=\"selected\"\n        [class.cqa-border-[#3F43EE]]=\"selected\"\n        id=\"check-step-group\" />\n      <span class=\"cqa-absolute cqa-text-white cqa-top-1/2 cqa-left-1/2 cqa--translate-x-1/2 cqa--translate-y-1/2 cqa-pointer-events-none cqa-flex cqa-items-center cqa-justify-center\"\n        [class.cqa-opacity-0]=\"!selected\"\n        [class.cqa-opacity-100]=\"selected\">\n        <svg width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 3.125L4.5 8.625L2 6.125\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      </span>\n    </label>\n    <!-- Expand/Collapse Icon -->\n    <button type=\"button\" (click)=\"onToggleExpanded()\" class=\"cqa-p-0\">\n      <svg [class.cqa-rotate-180]=\"expanded\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M4 6L8 10L12 6\" stroke=\"#6B7280\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n          stroke-linejoin=\"round\" />\n      </svg>\n    </button>\n\n    <!-- Folder Icon -->\n    <div>\n      <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path\n          d=\"M15 15C15.3978 15 15.7794 14.842 16.0607 14.5607C16.342 14.2794 16.5 13.8978 16.5 13.5V6C16.5 5.60217 16.342 5.22064 16.0607 4.93934C15.7794 4.65804 15.3978 4.5 15 4.5H9.075C8.82413 4.50246 8.57666 4.44196 8.35523 4.32403C8.13379 4.20611 7.94547 4.03453 7.8075 3.825L7.2 2.925C7.06342 2.7176 6.87748 2.54736 6.65887 2.42955C6.44027 2.31174 6.19583 2.25004 5.9475 2.25H3C2.60218 2.25 2.22064 2.40804 1.93934 2.68934C1.65804 2.97064 1.5 3.35218 1.5 3.75V13.5C1.5 13.8978 1.65804 14.2794 1.93934 14.5607C2.22064 14.842 2.60218 15 3 15H15Z\"\n          fill=\"#EFF6FF\" stroke=\"#60A5FA\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n      </svg>\n    </div>\n\n    <!-- Group Name and Description -->\n    <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-gap-[2px]\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n        <!-- Group Name Input -->\n        <p class=\"cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[18px] cqa-font-bold\">{{groupName}}</p>\n        <!-- Reusable Tag -->\n        <span *ngIf=\"reusable\"\n          class=\"cqa-px-2 cqa-py-[1.5px] cqa-rounded-lg cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-[#D8D9FC] cqa-border cqa-border-solid cqa-border-[#8A8CF4]\">\n          Reusable\n        </span>\n      </div>\n\n      <!-- Description -->\n      <p class=\"cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px]\">{{description}}</p>\n    </div>\n\n    <!-- Steps Summary and Action Icons -->\n    <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n\n      <!-- External Link Icon -->\n      <button type=\"button\" (click)=\"onOpenExternal(); $event.stopPropagation()\" title=\"Open in new tab\"\n        class=\"cqa-p-0 cqa-text-[#99999E] hover:cqa-text-[#1447E6]\">\n        <svg width=\"16\" height=\"17\" viewBox=\"0 0 16 17\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M12 8.66667V12.6667C12 13.0203 11.8595 13.3594 11.6095 13.6095C11.3594 13.8595 11.0203 14 10.6667 14H3.33333C2.97971 14 2.64057 13.8595 2.39052 13.6095C2.14048 13.3594 2 13.0203 2 12.6667V5.33333C2 4.97971 2.14048 4.64057 2.39052 4.39052C2.64057 4.14048 2.97971 4 3.33333 4H7.33333M10 2H14M14 2V6M14 2L6.66667 9.33333\"\n            stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        </svg>\n      </button>\n\n      <!-- Steps Summary -->\n      <span class=\"cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-rounded-lg cqa-py-0.5 cqa-px-2 cqa-text-[#0A0A0A] cqa-text-[12px] cqa-leading-[15px]\">\n        {{ getStepsSummary() }}\n      </span>\n\n      <!-- Action Icons (show on hover, same as API step) -->\n      <div class=\"step-actions cqa-flex cqa-items-center cqa-gap-[14px] cqa-ml-auto cqa-px-[7px]\">\n\n        <!-- Edit Icon -->\n        <!-- <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M7 11.6666H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n            <path\n              d=\"M9.55208 2.1128C9.7843 1.88058 10.0993 1.75012 10.4277 1.75012C10.7561 1.75012 11.071 1.88058 11.3033 2.1128C11.5355 2.34502 11.6659 2.65998 11.6659 2.98838C11.6659 3.31679 11.5355 3.63175 11.3033 3.86397L4.29742 10.8704C4.15864 11.0092 3.9871 11.1107 3.79867 11.1656L2.12333 11.6544C2.07314 11.669 2.01993 11.6699 1.96928 11.6569C1.91863 11.6439 1.8724 11.6176 1.83543 11.5806C1.79846 11.5437 1.7721 11.4974 1.75913 11.4468C1.74615 11.3961 1.74703 11.3429 1.76167 11.2927L2.2505 9.61738C2.30546 9.42916 2.40698 9.25783 2.54567 9.11922L9.55208 2.1128Z\"\n              stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          </svg>\n        </button> -->\n\n        <!-- Link Icon -->\n        <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <g clip-path=\"url(#clip0_609_26588)\">\n              <path\n                d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\"\n                stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n              <path\n                d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\"\n                stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n              <path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n                stroke-linejoin=\"round\" />\n            </g>\n            <defs>\n              <clipPath id=\"clip0_609_26588\">\n                <rect width=\"14\" height=\"14\" fill=\"white\" />\n              </clipPath>\n            </defs>\n          </svg>\n        </button>\n\n        <!-- Duplicate Icon -->\n        <button type=\"button\" (click)=\"onDuplicate(); $event.stopPropagation()\" title=\"Duplicate\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\"\n              stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            <path\n              d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\"\n              stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          </svg>\n        </button>\n\n        <!-- Delete Icon -->\n        <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\" class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\">\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M1.75 3.5H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n            <path\n              d=\"M11.0827 3.5V11.6667C11.0827 12.25 10.4993 12.8333 9.91602 12.8333H4.08268C3.49935 12.8333 2.91602 12.25 2.91602 11.6667V3.5\"\n              stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            <path\n              d=\"M4.66602 3.49996V2.33329C4.66602 1.74996 5.24935 1.16663 5.83268 1.16663H8.16602C8.74935 1.16663 9.33268 1.74996 9.33268 2.33329V3.49996\"\n              stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            <path d=\"M5.83398 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n            <path d=\"M8.16602 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n          </svg>\n        </button>\n      </div>\n    </div>\n  </div>\n\n  <!-- Expanded Content with Nested Steps (renderer dispatches by step type, n-level nesting) -->\n  <div *ngIf=\"expanded\" class=\"cqa-flex cqa-flex-col\">\n    <!-- Loading Indicator -->\n    <div *ngIf=\"loading\" class=\"cqa-flex cqa-items-center cqa-justify-center cqa-py-8 cqa-px-4\">\n      <div class=\"cqa-flex cqa-flex-col cqa-items-center cqa-gap-3\">\n        <!-- Spinner -->\n        <svg class=\"cqa-animate-spin cqa-h-6 cqa-w-6 cqa-text-[#3F43EE]\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n          <circle class=\"cqa-opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n          <path class=\"cqa-opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n        </svg>\n        <span class=\"cqa-text-[#6B7280] cqa-text-sm\">Loading steps...</span>\n      </div>\n    </div>\n    \n    <!-- Nested Steps Content (only show when not loading) -->\n    <div *ngIf=\"!loading\" class=\"cqa-flex cqa-flex-col\">\n      <div class=\"cqa-flex cqa-flex-col\" *ngIf=\"!isReorder\">\n      <cqa-test-case-details-renderer\n        *ngFor=\"let step of nestedSteps; let i = index\"\n        [step]=\"step\"\n        [index]=\"i\"\n        [selected]=\"$any(step).selected\"\n        [isNested]=\"true\"\n        [isReorder]=\"isReorder\"\n        [addStepBetween]=\"false\"\n        [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n        [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n        (nestedStepChange)=\"onNestedStepChange($event.step, $event.index)\"\n        (addStep)=\"onAddStep()\"\n        (deleteStep)=\"onDeleteStep($event)\"\n        (toggleExpanded)=\"onNestedToggleExpanded($event, step, i)\"\n        (groupNameChange)=\"$any(step).groupName = $event; onNestedStepChange(step, i)\"\n        (descriptionChange)=\"$any(step).description = $event; onNestedStepChange(step, i)\"\n        (reusableChange)=\"$any(step).reusable = $event; onNestedStepChange(step, i)\"\n        (openExternal)=\"onNestedStepChange(step, i)\"\n        (edit)=\"onNestedStepChange(step, i)\"\n        (link)=\"onNestedStepChange(step, i)\"\n        (duplicate)=\"onNestedStepChange(step, i)\"\n        (delete)=\"onDeleteStep(i)\"\n        (conditionChange)=\"$any(step).condition = $event; onNestedStepChange(step, i)\"\n        (branchStepChange)=\"onNestedStepChange(step, i)\"\n        (addBranch)=\"onNestedConditionAddBranch($any(step), i)\"\n        (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event, i)\"\n        (testDataProfileChange)=\"$any(step).testDataProfile = $event; onNestedStepChange(step, i)\"\n        (startStepChange)=\"$any(step).startStep = $event; onNestedStepChange(step, i)\"\n        (endStepChange)=\"$any(step).endStep = $event; onNestedStepChange(step, i)\"\n        (maxIterationsChange)=\"$any(step).maxIterations = $event; onNestedStepChange(step, i)\"\n        (eventTypeChange)=\"$any(step).eventType = $event; onNestedStepChange(step, i)\"\n        (parameterChange)=\"onNestedStepChange(step, i)\"\n        (selectionChange)=\"$any(step).selected = $event; onNestedStepChange(step, i)\"\n        (loadMoreDataProfiles)=\"loadMoreDataProfiles.emit($event)\"\n        (searchDataProfiles)=\"searchDataProfiles.emit($event)\"\n        (stepUpdate)=\"stepUpdate.emit($event)\"\n        (dndDropInZone)=\"dndDropInZone.emit($event)\"\n        (addStepBetweenClick)=\"addStepBetweenClick.emit($event)\"\n      >\n      </cqa-test-case-details-renderer>\n    </div>\n    <div *ngIf=\"isReorder\" class=\"cqa-flex cqa-flex-col nested-step-drop-list\"\n         [dndDropzone]=\"['step']\"\n         dndEffectAllowed=\"move\"\n         dndDragoverClass=\"dndDragover\"\n         (dndDrop)=\"onDndDrop($event)\">\n      <div dndPlaceholderRef class=\"step-drag-placeholder-nested cqa-my-1 cqa-min-h-[50px] cqa-border-2 cqa-border-dashed cqa-border-[#3F43EE] cqa-rounded cqa-bg-[rgba(63,67,238,0.08)] cqa-flex cqa-items-center cqa-justify-center cqa-text-[#3F43EE] cqa-text-xs\">Drop here</div>\n      <div *ngFor=\"let step of nestedSteps; let i = index\" class=\"nested-step-drag-item\"\n           [dndDraggable]=\"step\"\n           dndEffectAllowed=\"move\"\n           dndType=\"step\">\n        <cqa-test-case-details-renderer\n          [step]=\"step\"\n          [index]=\"i\"\n          [selected]=\"$any(step).selected\"\n          [isNested]=\"true\"\n          [isReorder]=\"isReorder\"\n          [addStepBetween]=\"false\"\n          [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n          [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n          (nestedStepChange)=\"onNestedStepChange($event.step, $event.index)\"\n          (addStep)=\"onAddStep()\"\n          (deleteStep)=\"onDeleteStep($event)\"\n          (toggleExpanded)=\"onNestedToggleExpanded($event, step, i)\"\n          (groupNameChange)=\"$any(step).groupName = $event; onNestedStepChange(step, i)\"\n          (descriptionChange)=\"$any(step).description = $event; onNestedStepChange(step, i)\"\n          (reusableChange)=\"$any(step).reusable = $event; onNestedStepChange(step, i)\"\n          (openExternal)=\"onNestedStepChange(step, i)\"\n          (edit)=\"onNestedStepChange(step, i)\"\n          (link)=\"onNestedStepChange(step, i)\"\n          (duplicate)=\"onNestedStepChange(step, i)\"\n          (delete)=\"onDeleteStep(i)\"\n          (conditionChange)=\"$any(step).condition = $event; onNestedStepChange(step, i)\"\n          (branchStepChange)=\"onNestedStepChange(step, i)\"\n          (addBranch)=\"onNestedConditionAddBranch($any(step), i)\"\n          (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event, i)\"\n          (testDataProfileChange)=\"$any(step).testDataProfile = $event; onNestedStepChange(step, i)\"\n          (startStepChange)=\"$any(step).startStep = $event; onNestedStepChange(step, i)\"\n          (endStepChange)=\"$any(step).endStep = $event; onNestedStepChange(step, i)\"\n          (maxIterationsChange)=\"$any(step).maxIterations = $event; onNestedStepChange(step, i)\"\n          (eventTypeChange)=\"$any(step).eventType = $event; onNestedStepChange(step, i)\"\n          (parameterChange)=\"onNestedStepChange(step, i)\"\n          (selectionChange)=\"$any(step).selected = $event; onNestedStepChange(step, i)\"\n          (loadMoreDataProfiles)=\"loadMoreDataProfiles.emit($event)\"\n          (searchDataProfiles)=\"searchDataProfiles.emit($event)\"\n          (stepUpdate)=\"stepUpdate.emit($event)\"\n          (dndDropInZone)=\"dndDropInZone.emit($event)\"\n          (addStepBetweenClick)=\"addStepBetweenClick.emit($event)\"\n        >\n        </cqa-test-case-details-renderer>\n      </div>\n    </div>\n\n      <!-- END GROUP Marker -->\n      <div [class]=\"'cqa-pl-8 cqa-py-2 cqa-border-t cqa-border-[#D1C4E9] cqa-bg-[#D1C4E9]'\">\n        <span class=\"cqa-font-bold cqa-text-white cqa-text-sm cqa-uppercase\">\n          END GROUP\n        </span>\n      </div>\n    </div>\n  </div>\n</div>", styles: [".step-actions{opacity:0;transition:opacity .15s ease}.step-row:hover .step-actions{opacity:1}\n"], components: [{ type: TestCaseDetailsRendererComponent, selector: "cqa-test-case-details-renderer", inputs: ["step", "index", "isNested", "isInsideLoop", "branch", "isReorder", "selected", "addStepBetweenAbove", "addStepBetweenBelow", "addStepBetween", "dataProfileOptions", "hasMoreDataProfiles", "isLoadingDataProfiles", "naturalTextActionsOptions", "setConditionTemplateVariables"], outputs: ["nestedStepChange", "addStep", "deleteStep", "toggleExpanded", "groupNameChange", "descriptionChange", "reusableChange", "openExternal", "edit", "link", "duplicate", "delete", "viewDetails", "selectionChange", "conditionChange", "branchStepChange", "addStepForBranch", "deleteStepWithBranch", "addBranch", "addElse", "deleteBranch", "testDataProfileChange", "startStepChange", "endStepChange", "maxIterationsChange", "eventTypeChange", "parameterChange", "clickAction", "dndDropInZone", "loadMoreDataProfiles", "searchDataProfiles", "stepUpdate", "addStepBetweenClick", "editInDepth"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.DndDropzoneDirective, selector: "[dndDropzone]", inputs: ["dndDropzone", "dndEffectAllowed", "dndAllowExternal", "dndHorizontal", "dndDragoverClass", "dndDropzoneDisabledClass", "dndDisableIf", "dndDisableDropIf"], outputs: ["dndDragover", "dndDrop"] }, { type: i5.DndPlaceholderRefDirective, selector: "[dndPlaceholderRef]" }, { type: i5.DndDraggableDirective, selector: "[dndDraggable]", inputs: ["dndDraggable", "dndEffectAllowed", "dndType", "dndDraggingClass", "dndDraggingSourceClass", "dndDraggableDisabledClass", "dndDragImageOffsetFunction", "dndDisableIf", "dndDisableDragIf"], outputs: ["dndStart", "dndDrag", "dndEnd", "dndMoved", "dndCopied", "dndLinked", "dndCanceled"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseStepGroupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cqa-test-case-step-group', host: { class: 'cqa-ui-root' }, styles: [STEP_ROW_ACTIONS_STYLES], template: "<div [class]=\"'cqa-flex cqa-flex-col'\">\n  <!-- Step Group Header -->\n  <div [class]=\"'step-row cqa-flex cqa-gap-3 cqa-items-center cqa-py-2 ' + (isInsideLoop ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4')\">\n    <!-- Expand/Collapse Icon -->\n    <button type=\"button\" (click)=\"onToggleExpanded()\" class=\"cqa-p-0\">\n      <svg [class.cqa-rotate-180]=\"expanded\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M4 6L8 10L12 6\" stroke=\"#6B7280\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n          stroke-linejoin=\"round\" />\n      </svg>\n    </button>\n\n    <!-- Folder Icon -->\n    <div>\n      <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path\n          d=\"M15 15C15.3978 15 15.7794 14.842 16.0607 14.5607C16.342 14.2794 16.5 13.8978 16.5 13.5V6C16.5 5.60217 16.342 5.22064 16.0607 4.93934C15.7794 4.65804 15.3978 4.5 15 4.5H9.075C8.82413 4.50246 8.57666 4.44196 8.35523 4.32403C8.13379 4.20611 7.94547 4.03453 7.8075 3.825L7.2 2.925C7.06342 2.7176 6.87748 2.54736 6.65887 2.42955C6.44027 2.31174 6.19583 2.25004 5.9475 2.25H3C2.60218 2.25 2.22064 2.40804 1.93934 2.68934C1.65804 2.97064 1.5 3.35218 1.5 3.75V13.5C1.5 13.8978 1.65804 14.2794 1.93934 14.5607C2.22064 14.842 2.60218 15 3 15H15Z\"\n          fill=\"#EFF6FF\" stroke=\"#60A5FA\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n      </svg>\n    </div>\n\n    <!-- Group Name and Description -->\n    <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-gap-[2px]\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n        <!-- Group Name Input -->\n        <p class=\"cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[18px] cqa-font-bold\">{{groupName}}</p>\n        <!-- Reusable Tag -->\n        <span *ngIf=\"reusable\"\n          class=\"cqa-px-2 cqa-py-[1.5px] cqa-rounded-lg cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-[#D8D9FC] cqa-border cqa-border-solid cqa-border-[#8A8CF4]\">\n          Reusable\n        </span>\n      </div>\n\n      <!-- Description -->\n      <p class=\"cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px]\">{{description}}</p>\n    </div>\n\n    <!-- Steps Summary and Action Icons -->\n    <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n\n      <!-- External Link Icon -->\n      <button type=\"button\" (click)=\"onOpenExternal(); $event.stopPropagation()\" title=\"Open in new tab\"\n        class=\"cqa-p-0 cqa-text-[#99999E] hover:cqa-text-[#1447E6]\">\n        <svg width=\"16\" height=\"17\" viewBox=\"0 0 16 17\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M12 8.66667V12.6667C12 13.0203 11.8595 13.3594 11.6095 13.6095C11.3594 13.8595 11.0203 14 10.6667 14H3.33333C2.97971 14 2.64057 13.8595 2.39052 13.6095C2.14048 13.3594 2 13.0203 2 12.6667V5.33333C2 4.97971 2.14048 4.64057 2.39052 4.39052C2.64057 4.14048 2.97971 4 3.33333 4H7.33333M10 2H14M14 2V6M14 2L6.66667 9.33333\"\n            stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        </svg>\n      </button>\n\n      <!-- Steps Summary -->\n      <span class=\"cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-rounded-lg cqa-py-0.5 cqa-px-2 cqa-text-[#0A0A0A] cqa-text-[12px] cqa-leading-[15px]\">\n        {{ getStepsSummary() }}\n      </span>\n\n      <!-- Action Icons (show on hover, same as API step) -->\n      <div class=\"step-actions cqa-flex cqa-items-center cqa-gap-[14px] cqa-ml-auto cqa-px-[7px]\">\n\n        <!-- Edit Icon -->\n        <!-- <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M7 11.6666H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n            <path\n              d=\"M9.55208 2.1128C9.7843 1.88058 10.0993 1.75012 10.4277 1.75012C10.7561 1.75012 11.071 1.88058 11.3033 2.1128C11.5355 2.34502 11.6659 2.65998 11.6659 2.98838C11.6659 3.31679 11.5355 3.63175 11.3033 3.86397L4.29742 10.8704C4.15864 11.0092 3.9871 11.1107 3.79867 11.1656L2.12333 11.6544C2.07314 11.669 2.01993 11.6699 1.96928 11.6569C1.91863 11.6439 1.8724 11.6176 1.83543 11.5806C1.79846 11.5437 1.7721 11.4974 1.75913 11.4468C1.74615 11.3961 1.74703 11.3429 1.76167 11.2927L2.2505 9.61738C2.30546 9.42916 2.40698 9.25783 2.54567 9.11922L9.55208 2.1128Z\"\n              stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          </svg>\n        </button> -->\n\n        <!-- Link Icon -->\n        <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <g clip-path=\"url(#clip0_609_26588)\">\n              <path\n                d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\"\n                stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n              <path\n                d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\"\n                stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n              <path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n                stroke-linejoin=\"round\" />\n            </g>\n            <defs>\n              <clipPath id=\"clip0_609_26588\">\n                <rect width=\"14\" height=\"14\" fill=\"white\" />\n              </clipPath>\n            </defs>\n          </svg>\n        </button>\n\n        <!-- Duplicate Icon -->\n        <button type=\"button\" (click)=\"onDuplicate(); $event.stopPropagation()\" title=\"Duplicate\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\"\n              stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            <path\n              d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\"\n              stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          </svg>\n        </button>\n\n        <!-- Delete Icon -->\n        <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\" class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\">\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M1.75 3.5H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n            <path\n              d=\"M11.0827 3.5V11.6667C11.0827 12.25 10.4993 12.8333 9.91602 12.8333H4.08268C3.49935 12.8333 2.91602 12.25 2.91602 11.6667V3.5\"\n              stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            <path\n              d=\"M4.66602 3.49996V2.33329C4.66602 1.74996 5.24935 1.16663 5.83268 1.16663H8.16602C8.74935 1.16663 9.33268 1.74996 9.33268 2.33329V3.49996\"\n              stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            <path d=\"M5.83398 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n            <path d=\"M8.16602 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n          </svg>\n        </button>\n      </div>\n    </div>\n  </div>\n\n  <!-- Expanded Content with Nested Steps (renderer dispatches by step type, n-level nesting) -->\n  <div *ngIf=\"expanded\" class=\"cqa-flex cqa-flex-col\">\n    <!-- Loading Indicator -->\n    <div *ngIf=\"loading\" class=\"cqa-flex cqa-items-center cqa-justify-center cqa-py-8 cqa-px-4\">\n      <div class=\"cqa-flex cqa-flex-col cqa-items-center cqa-gap-3\">\n        <!-- Spinner -->\n        <svg class=\"cqa-animate-spin cqa-h-6 cqa-w-6 cqa-text-[#3F43EE]\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n          <circle class=\"cqa-opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n          <path class=\"cqa-opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n        </svg>\n        <span class=\"cqa-text-[#6B7280] cqa-text-sm\">Loading steps...</span>\n      </div>\n    </div>\n    \n    <!-- Nested Steps Content (only show when not loading) -->\n    <div *ngIf=\"!loading\" class=\"cqa-flex cqa-flex-col\">\n      <div class=\"cqa-flex cqa-flex-col\" *ngIf=\"!isReorder\">\n      <cqa-test-case-details-renderer\n        *ngFor=\"let step of nestedSteps; let i = index\"\n        [step]=\"step\"\n        [index]=\"i\"\n        [isNested]=\"true\"\n        [isReorder]=\"isReorder\"\n        [addStepBetween]=\"false\"\n        [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n        [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n        (nestedStepChange)=\"onNestedStepChange($event.step, $event.index)\"\n        (addStep)=\"onAddStep()\"\n        (deleteStep)=\"onDeleteStep($event)\"\n        (toggleExpanded)=\"onNestedToggleExpanded($event, step, i)\"\n        (groupNameChange)=\"$any(step).groupName = $event; onNestedStepChange(step, i)\"\n        (descriptionChange)=\"$any(step).description = $event; onNestedStepChange(step, i)\"\n        (reusableChange)=\"$any(step).reusable = $event; onNestedStepChange(step, i)\"\n        (openExternal)=\"onNestedStepChange(step, i)\"\n        (edit)=\"onNestedStepChange(step, i)\"\n        (link)=\"onNestedStepChange(step, i)\"\n        (duplicate)=\"onNestedStepChange(step, i)\"\n        (delete)=\"onDeleteStep(i)\"\n        (conditionChange)=\"$any(step).condition = $event; onNestedStepChange(step, i)\"\n        (branchStepChange)=\"onNestedStepChange(step, i)\"\n        (addBranch)=\"onNestedConditionAddBranch($any(step), i)\"\n        (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event, i)\"\n        (testDataProfileChange)=\"$any(step).testDataProfile = $event; onNestedStepChange(step, i)\"\n        (startStepChange)=\"$any(step).startStep = $event; onNestedStepChange(step, i)\"\n        (endStepChange)=\"$any(step).endStep = $event; onNestedStepChange(step, i)\"\n        (maxIterationsChange)=\"$any(step).maxIterations = $event; onNestedStepChange(step, i)\"\n        (eventTypeChange)=\"$any(step).eventType = $event; onNestedStepChange(step, i)\"\n        (parameterChange)=\"onNestedStepChange(step, i)\"\n        (selectionChange)=\"$any(step).selected = $event; onNestedStepChange(step, i)\"\n        (loadMoreDataProfiles)=\"loadMoreDataProfiles.emit($event)\"\n        (searchDataProfiles)=\"searchDataProfiles.emit($event)\"\n        (stepUpdate)=\"stepUpdate.emit($event)\"\n        (dndDropInZone)=\"dndDropInZone.emit($event)\"\n        (addStepBetweenClick)=\"addStepBetweenClick.emit($event)\"\n      >\n      </cqa-test-case-details-renderer>\n    </div>\n    <div *ngIf=\"isReorder\" class=\"cqa-flex cqa-flex-col nested-step-drop-list\"\n         [dndDropzone]=\"['step']\"\n         dndEffectAllowed=\"move\"\n         dndDragoverClass=\"dndDragover\"\n         (dndDrop)=\"onDndDrop($event)\">\n      <div dndPlaceholderRef class=\"step-drag-placeholder-nested cqa-my-1 cqa-min-h-[50px] cqa-border-2 cqa-border-dashed cqa-border-[#3F43EE] cqa-rounded cqa-bg-[rgba(63,67,238,0.08)] cqa-flex cqa-items-center cqa-justify-center cqa-text-[#3F43EE] cqa-text-xs\">Drop here</div>\n      <div *ngFor=\"let step of nestedSteps; let i = index\" class=\"nested-step-drag-item\"\n           [dndDraggable]=\"step\"\n           dndEffectAllowed=\"move\"\n           dndType=\"step\">\n        <cqa-test-case-details-renderer\n          [step]=\"step\"\n          [index]=\"i\"\n          [isNested]=\"true\"\n          [isReorder]=\"isReorder\"\n          [addStepBetween]=\"false\"\n          [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n          [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n          (nestedStepChange)=\"onNestedStepChange($event.step, $event.index)\"\n          (addStep)=\"onAddStep()\"\n          (deleteStep)=\"onDeleteStep($event)\"\n          (toggleExpanded)=\"onNestedToggleExpanded($event, step, i)\"\n          (groupNameChange)=\"$any(step).groupName = $event; onNestedStepChange(step, i)\"\n          (descriptionChange)=\"$any(step).description = $event; onNestedStepChange(step, i)\"\n          (reusableChange)=\"$any(step).reusable = $event; onNestedStepChange(step, i)\"\n          (openExternal)=\"onNestedStepChange(step, i)\"\n          (edit)=\"onNestedStepChange(step, i)\"\n          (link)=\"onNestedStepChange(step, i)\"\n          (duplicate)=\"onNestedStepChange(step, i)\"\n          (delete)=\"onDeleteStep(i)\"\n          (conditionChange)=\"$any(step).condition = $event; onNestedStepChange(step, i)\"\n          (branchStepChange)=\"onNestedStepChange(step, i)\"\n          (addBranch)=\"onNestedConditionAddBranch($any(step), i)\"\n          (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event, i)\"\n          (testDataProfileChange)=\"$any(step).testDataProfile = $event; onNestedStepChange(step, i)\"\n          (startStepChange)=\"$any(step).startStep = $event; onNestedStepChange(step, i)\"\n          (endStepChange)=\"$any(step).endStep = $event; onNestedStepChange(step, i)\"\n          (maxIterationsChange)=\"$any(step).maxIterations = $event; onNestedStepChange(step, i)\"\n          (eventTypeChange)=\"$any(step).eventType = $event; onNestedStepChange(step, i)\"\n          (parameterChange)=\"onNestedStepChange(step, i)\"\n          (selectionChange)=\"$any(step).selected = $event; onNestedStepChange(step, i)\"\n          (loadMoreDataProfiles)=\"loadMoreDataProfiles.emit($event)\"\n          (searchDataProfiles)=\"searchDataProfiles.emit($event)\"\n          (stepUpdate)=\"stepUpdate.emit($event)\"\n          (dndDropInZone)=\"dndDropInZone.emit($event)\"\n          (addStepBetweenClick)=\"addStepBetweenClick.emit($event)\"\n        >\n        </cqa-test-case-details-renderer>\n      </div>\n    </div>\n\n      <!-- END GROUP Marker -->\n      <div [class]=\"'cqa-pl-8 cqa-py-2 cqa-border-t cqa-border-[#D1C4E9] cqa-bg-[#D1C4E9]'\">\n        <span class=\"cqa-font-bold cqa-text-white cqa-text-sm cqa-uppercase\">\n          END GROUP\n        </span>\n      </div>\n    </div>\n  </div>\n</div>" }]
+            args: [{ selector: 'cqa-test-case-step-group', host: { class: 'cqa-ui-root' }, styles: [STEP_ROW_ACTIONS_STYLES], template: "<div [class]=\"'cqa-flex cqa-flex-col'\">\n  <!-- Step Group Header -->\n  <div [class]=\"'step-row cqa-flex cqa-gap-3 cqa-items-center cqa-py-2 ' + (isInsideLoop ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4')\">\n    <!-- Drag Handle Icon (when isReorder is true) -->\n    <div *ngIf=\"isReorder\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\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    <!-- Checkbox (when isReorder is false) -->\n    <label *ngIf=\"!isReorder\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative\">\n      <input type=\"checkbox\"\n        [ngModel]=\"selected\"\n        (ngModelChange)=\"onSelectionChange($event)\"\n        class=\"cqa-h-4 cqa-w-4 cqa-cursor-pointer cqa-transition-all cqa-appearance-none cqa-rounded shadow hover:cqa-shadow-md cqa-border cqa-border-solid cqa-border-slate-300 cqa-flex-shrink-0\"\n        [class.cqa-bg-[#3F43EE]]=\"selected\"\n        [class.cqa-border-[#3F43EE]]=\"selected\"\n        id=\"check-step-group\" />\n      <span class=\"cqa-absolute cqa-text-white cqa-top-1/2 cqa-left-1/2 cqa--translate-x-1/2 cqa--translate-y-1/2 cqa-pointer-events-none cqa-flex cqa-items-center cqa-justify-center\"\n        [class.cqa-opacity-0]=\"!selected\"\n        [class.cqa-opacity-100]=\"selected\">\n        <svg width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 3.125L4.5 8.625L2 6.125\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      </span>\n    </label>\n    <!-- Expand/Collapse Icon -->\n    <button type=\"button\" (click)=\"onToggleExpanded()\" class=\"cqa-p-0\">\n      <svg [class.cqa-rotate-180]=\"expanded\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M4 6L8 10L12 6\" stroke=\"#6B7280\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n          stroke-linejoin=\"round\" />\n      </svg>\n    </button>\n\n    <!-- Folder Icon -->\n    <div>\n      <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path\n          d=\"M15 15C15.3978 15 15.7794 14.842 16.0607 14.5607C16.342 14.2794 16.5 13.8978 16.5 13.5V6C16.5 5.60217 16.342 5.22064 16.0607 4.93934C15.7794 4.65804 15.3978 4.5 15 4.5H9.075C8.82413 4.50246 8.57666 4.44196 8.35523 4.32403C8.13379 4.20611 7.94547 4.03453 7.8075 3.825L7.2 2.925C7.06342 2.7176 6.87748 2.54736 6.65887 2.42955C6.44027 2.31174 6.19583 2.25004 5.9475 2.25H3C2.60218 2.25 2.22064 2.40804 1.93934 2.68934C1.65804 2.97064 1.5 3.35218 1.5 3.75V13.5C1.5 13.8978 1.65804 14.2794 1.93934 14.5607C2.22064 14.842 2.60218 15 3 15H15Z\"\n          fill=\"#EFF6FF\" stroke=\"#60A5FA\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n      </svg>\n    </div>\n\n    <!-- Group Name and Description -->\n    <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-gap-[2px]\">\n      <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n        <!-- Group Name Input -->\n        <p class=\"cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[18px] cqa-font-bold\">{{groupName}}</p>\n        <!-- Reusable Tag -->\n        <span *ngIf=\"reusable\"\n          class=\"cqa-px-2 cqa-py-[1.5px] cqa-rounded-lg cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-[#D8D9FC] cqa-border cqa-border-solid cqa-border-[#8A8CF4]\">\n          Reusable\n        </span>\n      </div>\n\n      <!-- Description -->\n      <p class=\"cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px]\">{{description}}</p>\n    </div>\n\n    <!-- Steps Summary and Action Icons -->\n    <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n\n      <!-- External Link Icon -->\n      <button type=\"button\" (click)=\"onOpenExternal(); $event.stopPropagation()\" title=\"Open in new tab\"\n        class=\"cqa-p-0 cqa-text-[#99999E] hover:cqa-text-[#1447E6]\">\n        <svg width=\"16\" height=\"17\" viewBox=\"0 0 16 17\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path\n            d=\"M12 8.66667V12.6667C12 13.0203 11.8595 13.3594 11.6095 13.6095C11.3594 13.8595 11.0203 14 10.6667 14H3.33333C2.97971 14 2.64057 13.8595 2.39052 13.6095C2.14048 13.3594 2 13.0203 2 12.6667V5.33333C2 4.97971 2.14048 4.64057 2.39052 4.39052C2.64057 4.14048 2.97971 4 3.33333 4H7.33333M10 2H14M14 2V6M14 2L6.66667 9.33333\"\n            stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        </svg>\n      </button>\n\n      <!-- Steps Summary -->\n      <span class=\"cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-rounded-lg cqa-py-0.5 cqa-px-2 cqa-text-[#0A0A0A] cqa-text-[12px] cqa-leading-[15px]\">\n        {{ getStepsSummary() }}\n      </span>\n\n      <!-- Action Icons (show on hover, same as API step) -->\n      <div class=\"step-actions cqa-flex cqa-items-center cqa-gap-[14px] cqa-ml-auto cqa-px-[7px]\">\n\n        <!-- Edit Icon -->\n        <!-- <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M7 11.6666H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n            <path\n              d=\"M9.55208 2.1128C9.7843 1.88058 10.0993 1.75012 10.4277 1.75012C10.7561 1.75012 11.071 1.88058 11.3033 2.1128C11.5355 2.34502 11.6659 2.65998 11.6659 2.98838C11.6659 3.31679 11.5355 3.63175 11.3033 3.86397L4.29742 10.8704C4.15864 11.0092 3.9871 11.1107 3.79867 11.1656L2.12333 11.6544C2.07314 11.669 2.01993 11.6699 1.96928 11.6569C1.91863 11.6439 1.8724 11.6176 1.83543 11.5806C1.79846 11.5437 1.7721 11.4974 1.75913 11.4468C1.74615 11.3961 1.74703 11.3429 1.76167 11.2927L2.2505 9.61738C2.30546 9.42916 2.40698 9.25783 2.54567 9.11922L9.55208 2.1128Z\"\n              stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          </svg>\n        </button> -->\n\n        <!-- Link Icon -->\n        <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <g clip-path=\"url(#clip0_609_26588)\">\n              <path\n                d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\"\n                stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n              <path\n                d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\"\n                stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n              <path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n                stroke-linejoin=\"round\" />\n            </g>\n            <defs>\n              <clipPath id=\"clip0_609_26588\">\n                <rect width=\"14\" height=\"14\" fill=\"white\" />\n              </clipPath>\n            </defs>\n          </svg>\n        </button>\n\n        <!-- Duplicate Icon -->\n        <button type=\"button\" (click)=\"onDuplicate(); $event.stopPropagation()\" title=\"Duplicate\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\"\n              stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            <path\n              d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\"\n              stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          </svg>\n        </button>\n\n        <!-- Delete Icon -->\n        <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\" class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\">\n          <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M1.75 3.5H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n            <path\n              d=\"M11.0827 3.5V11.6667C11.0827 12.25 10.4993 12.8333 9.91602 12.8333H4.08268C3.49935 12.8333 2.91602 12.25 2.91602 11.6667V3.5\"\n              stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            <path\n              d=\"M4.66602 3.49996V2.33329C4.66602 1.74996 5.24935 1.16663 5.83268 1.16663H8.16602C8.74935 1.16663 9.33268 1.74996 9.33268 2.33329V3.49996\"\n              stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            <path d=\"M5.83398 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n            <path d=\"M8.16602 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n              stroke-linejoin=\"round\" />\n          </svg>\n        </button>\n      </div>\n    </div>\n  </div>\n\n  <!-- Expanded Content with Nested Steps (renderer dispatches by step type, n-level nesting) -->\n  <div *ngIf=\"expanded\" class=\"cqa-flex cqa-flex-col\">\n    <!-- Loading Indicator -->\n    <div *ngIf=\"loading\" class=\"cqa-flex cqa-items-center cqa-justify-center cqa-py-8 cqa-px-4\">\n      <div class=\"cqa-flex cqa-flex-col cqa-items-center cqa-gap-3\">\n        <!-- Spinner -->\n        <svg class=\"cqa-animate-spin cqa-h-6 cqa-w-6 cqa-text-[#3F43EE]\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n          <circle class=\"cqa-opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n          <path class=\"cqa-opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n        </svg>\n        <span class=\"cqa-text-[#6B7280] cqa-text-sm\">Loading steps...</span>\n      </div>\n    </div>\n    \n    <!-- Nested Steps Content (only show when not loading) -->\n    <div *ngIf=\"!loading\" class=\"cqa-flex cqa-flex-col\">\n      <div class=\"cqa-flex cqa-flex-col\" *ngIf=\"!isReorder\">\n      <cqa-test-case-details-renderer\n        *ngFor=\"let step of nestedSteps; let i = index\"\n        [step]=\"step\"\n        [index]=\"i\"\n        [selected]=\"$any(step).selected\"\n        [isNested]=\"true\"\n        [isReorder]=\"isReorder\"\n        [addStepBetween]=\"false\"\n        [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n        [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n        (nestedStepChange)=\"onNestedStepChange($event.step, $event.index)\"\n        (addStep)=\"onAddStep()\"\n        (deleteStep)=\"onDeleteStep($event)\"\n        (toggleExpanded)=\"onNestedToggleExpanded($event, step, i)\"\n        (groupNameChange)=\"$any(step).groupName = $event; onNestedStepChange(step, i)\"\n        (descriptionChange)=\"$any(step).description = $event; onNestedStepChange(step, i)\"\n        (reusableChange)=\"$any(step).reusable = $event; onNestedStepChange(step, i)\"\n        (openExternal)=\"onNestedStepChange(step, i)\"\n        (edit)=\"onNestedStepChange(step, i)\"\n        (link)=\"onNestedStepChange(step, i)\"\n        (duplicate)=\"onNestedStepChange(step, i)\"\n        (delete)=\"onDeleteStep(i)\"\n        (conditionChange)=\"$any(step).condition = $event; onNestedStepChange(step, i)\"\n        (branchStepChange)=\"onNestedStepChange(step, i)\"\n        (addBranch)=\"onNestedConditionAddBranch($any(step), i)\"\n        (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event, i)\"\n        (testDataProfileChange)=\"$any(step).testDataProfile = $event; onNestedStepChange(step, i)\"\n        (startStepChange)=\"$any(step).startStep = $event; onNestedStepChange(step, i)\"\n        (endStepChange)=\"$any(step).endStep = $event; onNestedStepChange(step, i)\"\n        (maxIterationsChange)=\"$any(step).maxIterations = $event; onNestedStepChange(step, i)\"\n        (eventTypeChange)=\"$any(step).eventType = $event; onNestedStepChange(step, i)\"\n        (parameterChange)=\"onNestedStepChange(step, i)\"\n        (selectionChange)=\"$any(step).selected = $event; onNestedStepChange(step, i)\"\n        (loadMoreDataProfiles)=\"loadMoreDataProfiles.emit($event)\"\n        (searchDataProfiles)=\"searchDataProfiles.emit($event)\"\n        (stepUpdate)=\"stepUpdate.emit($event)\"\n        (dndDropInZone)=\"dndDropInZone.emit($event)\"\n        (addStepBetweenClick)=\"addStepBetweenClick.emit($event)\"\n      >\n      </cqa-test-case-details-renderer>\n    </div>\n    <div *ngIf=\"isReorder\" class=\"cqa-flex cqa-flex-col nested-step-drop-list\"\n         [dndDropzone]=\"['step']\"\n         dndEffectAllowed=\"move\"\n         dndDragoverClass=\"dndDragover\"\n         (dndDrop)=\"onDndDrop($event)\">\n      <div dndPlaceholderRef class=\"step-drag-placeholder-nested cqa-my-1 cqa-min-h-[50px] cqa-border-2 cqa-border-dashed cqa-border-[#3F43EE] cqa-rounded cqa-bg-[rgba(63,67,238,0.08)] cqa-flex cqa-items-center cqa-justify-center cqa-text-[#3F43EE] cqa-text-xs\">Drop here</div>\n      <div *ngFor=\"let step of nestedSteps; let i = index\" class=\"nested-step-drag-item\"\n           [dndDraggable]=\"step\"\n           dndEffectAllowed=\"move\"\n           dndType=\"step\">\n        <cqa-test-case-details-renderer\n          [step]=\"step\"\n          [index]=\"i\"\n          [selected]=\"$any(step).selected\"\n          [isNested]=\"true\"\n          [isReorder]=\"isReorder\"\n          [addStepBetween]=\"false\"\n          [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n          [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n          (nestedStepChange)=\"onNestedStepChange($event.step, $event.index)\"\n          (addStep)=\"onAddStep()\"\n          (deleteStep)=\"onDeleteStep($event)\"\n          (toggleExpanded)=\"onNestedToggleExpanded($event, step, i)\"\n          (groupNameChange)=\"$any(step).groupName = $event; onNestedStepChange(step, i)\"\n          (descriptionChange)=\"$any(step).description = $event; onNestedStepChange(step, i)\"\n          (reusableChange)=\"$any(step).reusable = $event; onNestedStepChange(step, i)\"\n          (openExternal)=\"onNestedStepChange(step, i)\"\n          (edit)=\"onNestedStepChange(step, i)\"\n          (link)=\"onNestedStepChange(step, i)\"\n          (duplicate)=\"onNestedStepChange(step, i)\"\n          (delete)=\"onDeleteStep(i)\"\n          (conditionChange)=\"$any(step).condition = $event; onNestedStepChange(step, i)\"\n          (branchStepChange)=\"onNestedStepChange(step, i)\"\n          (addBranch)=\"onNestedConditionAddBranch($any(step), i)\"\n          (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event, i)\"\n          (testDataProfileChange)=\"$any(step).testDataProfile = $event; onNestedStepChange(step, i)\"\n          (startStepChange)=\"$any(step).startStep = $event; onNestedStepChange(step, i)\"\n          (endStepChange)=\"$any(step).endStep = $event; onNestedStepChange(step, i)\"\n          (maxIterationsChange)=\"$any(step).maxIterations = $event; onNestedStepChange(step, i)\"\n          (eventTypeChange)=\"$any(step).eventType = $event; onNestedStepChange(step, i)\"\n          (parameterChange)=\"onNestedStepChange(step, i)\"\n          (selectionChange)=\"$any(step).selected = $event; onNestedStepChange(step, i)\"\n          (loadMoreDataProfiles)=\"loadMoreDataProfiles.emit($event)\"\n          (searchDataProfiles)=\"searchDataProfiles.emit($event)\"\n          (stepUpdate)=\"stepUpdate.emit($event)\"\n          (dndDropInZone)=\"dndDropInZone.emit($event)\"\n          (addStepBetweenClick)=\"addStepBetweenClick.emit($event)\"\n        >\n        </cqa-test-case-details-renderer>\n      </div>\n    </div>\n\n      <!-- END GROUP Marker -->\n      <div [class]=\"'cqa-pl-8 cqa-py-2 cqa-border-t cqa-border-[#D1C4E9] cqa-bg-[#D1C4E9]'\">\n        <span class=\"cqa-font-bold cqa-text-white cqa-text-sm cqa-uppercase\">\n          END GROUP\n        </span>\n      </div>\n    </div>\n  </div>\n</div>" }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { config: [{
                 type: Input
             }], id: [{
@@ -21266,6 +21316,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Input
             }], isReorder: [{
                 type: Input
+            }], selected: [{
+                type: Input
             }], loading: [{
                 type: Input
             }], dataProfileOptions: [{
@@ -21318,6 +21370,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Output
             }], addStepBetweenClick: [{
                 type: Output
+            }], selectionChange: [{
+                type: Output
             }] } });
 class TestCaseApiStepComponent {
@@ -29588,6 +29642,7 @@ UiKitModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "1
         MatInputModule,
         OverlayModule,
         PortalModule,
+        ScrollingModule,
         NgxTypedJsModule,
         DndModule], exports: [ButtonComponent,
         SearchBarComponent,
@@ -29770,6 +29825,7 @@ UiKitModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "1
             MatInputModule,
             OverlayModule,
             PortalModule,
+            ScrollingModule,
             NgxTypedJsModule,
             DndModule
         ]] });
@@ -29922,6 +29978,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                         MatInputModule,
                         OverlayModule,
                         PortalModule,
+                        ScrollingModule,
                         NgxTypedJsModule,
                         DndModule
                     ],