@cqa-lib/cqa-ui 1.1.546 → 1.1.548

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 (13) hide show
  1. package/esm2020/lib/step-builder/step-builder-document/step-builder-document.component.mjs +43 -13
  2. package/esm2020/lib/test-case-details/ai-agent-step/ai-agent-step.component.mjs +8 -3
  3. package/esm2020/lib/test-case-details/ai-verify-step/ai-verify-step.component.mjs +13 -18
  4. package/esm2020/lib/test-case-details/normal-step/normal-step.component.mjs +9 -6
  5. package/fesm2015/cqa-lib-cqa-ui.mjs +67 -33
  6. package/fesm2015/cqa-lib-cqa-ui.mjs.map +1 -1
  7. package/fesm2020/cqa-lib-cqa-ui.mjs +66 -33
  8. package/fesm2020/cqa-lib-cqa-ui.mjs.map +1 -1
  9. package/lib/step-builder/step-builder-document/step-builder-document.component.d.ts +11 -3
  10. package/lib/test-case-details/ai-agent-step/ai-agent-step.component.d.ts +2 -0
  11. package/lib/test-case-details/ai-verify-step/ai-verify-step.component.d.ts +3 -7
  12. package/package.json +1 -1
  13. package/styles.css +1 -1
package/fesm2015/cqa-lib-cqa-ui.mjs CHANGED
@@ -29411,9 +29411,12 @@ class TestCaseNormalStepComponent {
29411
29411
  // return '';
29412
29412
  // }
29413
29413
  if (this.action) {
29414
- const html = this.eventType === 'ai-agent'
29415
- ? this.normalizeAiAgentNewlinesForDisplay(this.action)
29416
- : this.action;
29414
+ let html = this.action;
29415
+ if (this.eventType === 'ai-agent') {
29416
+ html = this.normalizeAiAgentNewlinesForDisplay(html);
29417
+ // Strip leading "AI Agent" prefix — rendered as a separate label span (see template).
29418
+ html = html.replace(/^\s*(?:<[^>]+>\s*)*AI\s+Agent\s*:?\s*/i, '');
29419
+ }
29417
29420
  return html ? this.sanitizer.bypassSecurityTrustHtml(html) : '';
29418
29421
  }
29419
29422
  return '';
@@ -29712,10 +29715,10 @@ class TestCaseNormalStepComponent {
29712
29715
  }
29713
29716
  }
29714
29717
  TestCaseNormalStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseNormalStepComponent, deps: [{ token: CustomEditStepService }, { token: ElementPopupService }, { token: TestDataModalService }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i1$2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
29715
- TestCaseNormalStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestCaseNormalStepComponent, selector: "cqa-test-case-normal-step", inputs: { config: "config", stepNumber: "stepNumber", index: "index", action: "action", eventType: "eventType", parameters: "parameters", selected: "selected", disabled: "disabled", isNested: "isNested", isInsideLoop: "isInsideLoop", isInsideStepGroup: "isInsideStepGroup", isReorder: "isReorder", isParentSkipped: "isParentSkipped", editable: "editable", stepIndex: "stepIndex", isDuplicating: "isDuplicating", nestingLevel: "nestingLevel" }, outputs: { eventTypeChange: "eventTypeChange", parameterChange: "parameterChange", edit: "edit", editInDepth: "editInDepth", link: "link", duplicate: "duplicate", delete: "delete", moreOptions: "moreOptions", viewDetails: "viewDetails", selectionChange: "selectionChange", clickAction: "clickAction", stepUpdate: "stepUpdate" }, host: { listeners: { "document:click": "onDocumentClick($event)" }, classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "dropdownContainer", first: true, predicate: ["dropdownContainer"], descendants: true }, { propertyName: "descriptionTrigger", first: true, predicate: ["descriptionTrigger"], descendants: true }, { propertyName: "testDataTrigger", first: true, predicate: ["testDataTrigger"], descendants: true }, { propertyName: "editTrigger", first: true, predicate: ["editTrigger"], descendants: true }, { propertyName: "elementTrigger", first: true, predicate: ["elementTrigger"], descendants: true }, { propertyName: "clickElementTrigger", first: true, predicate: ["clickElementTrigger"], descendants: true }, { propertyName: "viewDetailsTrigger", first: true, predicate: ["viewDetailsTrigger"], descendants: true }], ngImport: i0, template: "<div\n [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 cqa-pr-4' + ((config?.shouldSkip || isParentSkipped) ? ' cqa-step-skipped' : '')\"\n [style.opacity]=\"(config?.shouldSkip || isParentSkipped) ? '0.6' : null\"\n [style.padding-left.px]=\"getRowPaddingLeftPx()\"\n [style.border-top]=\"isInsideStepGroup ? '1px solid #BEDBFF' : '1px solid #E5E7EB'\"\n style=\"border-bottom: 1px solid #E5E7EB;\">\n\n <div *ngIf=\"!isInsideStepGroup\" class=\"cqa-inline-flex cqa-items-center\">\n <!-- Drag Handle Icon (when isReorder is true and not inside step group - steps inside step groups cannot be reordered) -->\n <div *ngIf=\"isReorder && !isInsideStepGroup\" 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, editable, and not inside step group - hide for steps inside step groups) -->\n <label *ngIf=\"editable && !isReorder && !isInsideStepGroup\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative cqa-mr-2\">\n <input type=\"checkbox\"\n [ngModel]=\"selected\"\n [disabled]=\"disabled\"\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\" />\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 </div>\n <div *ngIf=\"isInsideStepGroup\" class=\"cqa-flex cqa-flex-shrink-0 cqa-items-center cqa-pl-0 cqa-pr-1 cqa-text-[#9CA3AF]\" aria-hidden=\"true\" title=\"Step is inside a group\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M11.9998 5.66667H11.3332V4.33333C11.3332 2.49333 9.83984 1 7.99984 1C6.15984 1 4.6665 2.49333 4.6665 4.33333V5.66667H3.99984C3.2665 5.66667 2.6665 6.26667 2.6665 7V13.6667C2.6665 14.4 3.2665 15 3.99984 15H11.9998C12.7332 15 13.3332 14.4 13.3332 13.6667V7C13.3332 6.26667 12.7332 5.66667 11.9998 5.66667ZM5.99984 4.33333C5.99984 3.22667 6.89317 2.33333 7.99984 2.33333C9.1065 2.33333 9.99984 3.22667 9.99984 4.33333V5.66667H5.99984V4.33333ZM11.9998 13.6667H3.99984V7H11.9998V13.6667ZM7.99984 11.6667C8.73317 11.6667 9.33317 11.0667 9.33317 10.3333C9.33317 9.6 8.73317 9 7.99984 9C7.2665 9 6.6665 9.6 6.6665 10.3333C6.6665 11.0667 7.2665 11.6667 7.99984 11.6667Z\" fill=\"currentColor\"/>\n </svg>\n </div>\n\n <!-- Step Number -->\n <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px] cqa-min-w-[32px]\">\n {{ stepNumber }}\n </span>\n\n <!-- Event Type Selector (Pill Button) #### (click)=\"toggleEventTypeDropdown(); $event.stopPropagation()\" -->\n <div class=\"cqa-relative\" #dropdownContainer>\n <button type=\"button\" \n [attr.title]=\"getCurrentEventTypeConfig().label\"\n [style.background-color]=\"getCurrentEventTypeConfig().backgroundColor\"\n [style.color]=\"getCurrentEventTypeConfig().color\"\n class=\"cqa-w-8 cqa-h-8 cqa-rounded-lg cqa-flex cqa-items-center cqa-justify-center cqa-flex-shrink-0 cqa-cursor-pointer\">\n <!-- Icon -->\n <span *ngIf=\"getCurrentEventTypeConfig().icon === 'paper_plane'\">\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 6.41663L12.8333 1.16663L7.58333 12.25L6.41667 7.58329L1.75 6.41663Z\" stroke=\"currentColor\"\n stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </span>\n <span *ngIf=\"getCurrentEventTypeConfig().icon === 'star'\">\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.797 9.04165C5.74492 8.83977 5.63969 8.65554 5.49227 8.50812C5.34485 8.3607 5.16062 8.25548 4.95875 8.2034L1.38 7.28057C1.31894 7.26324 1.2652 7.22646 1.22694 7.17583C1.18867 7.12519 1.16797 7.06345 1.16797 6.99998C1.16797 6.93651 1.18867 6.87478 1.22694 6.82414C1.2652 6.7735 1.31894 6.73673 1.38 6.7194L4.95875 5.79598C5.16055 5.74395 5.34473 5.63882 5.49215 5.49151C5.63956 5.34419 5.74483 5.16008 5.797 4.95832L6.71983 1.37957C6.73698 1.31827 6.77372 1.26427 6.82443 1.2258C6.87515 1.18733 6.93705 1.1665 7.0007 1.1665C7.06436 1.1665 7.12626 1.18733 7.17698 1.2258C7.22769 1.26427 7.26442 1.31827 7.28158 1.37957L8.20383 4.95832C8.25591 5.16019 8.36113 5.34442 8.50855 5.49184C8.65597 5.63926 8.8402 5.74449 9.04208 5.79657L12.6208 6.71882C12.6824 6.73579 12.7366 6.77249 12.7753 6.82328C12.814 6.87407 12.8349 6.93614 12.8349 6.99998C12.8349 7.06382 12.814 7.1259 12.7753 7.17669C12.7366 7.22748 12.6824 7.26417 12.6208 7.28115L9.04208 8.2034C8.8402 8.25548 8.65597 8.3607 8.50855 8.50812C8.36113 8.65554 8.25591 8.83977 8.20383 9.04165L7.281 12.6204C7.26384 12.6817 7.22711 12.7357 7.17639 12.7742C7.12568 12.8126 7.06377 12.8335 7.00012 12.8335C6.93647 12.8335 6.87456 12.8126 6.82385 12.7742C6.77314 12.7357 6.7364 12.6817 6.71925 12.6204L5.797 9.04165Z\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M11.666 1.75V4.08333\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M12.8333 2.91663H10.5\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M2.33398 9.91663V11.0833\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M2.91667 10.5H1.75\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </span>\n <span *ngIf=\"getCurrentEventTypeConfig().icon === 'T'\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M2.33398 4.08325V2.33325H11.6673V4.08325\" stroke=\"currentColor\" stroke-width=\"1.16667\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M5.25 11.6667H8.75\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M7 2.33325V11.6666\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </span>\n <span *ngIf=\"getCurrentEventTypeConfig().icon === 'cursor'\">\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 1.75L5.87417 11.6492L7.33833 7.33833L11.6492 5.87417L1.75 1.75Z\" stroke=\"currentColor\"\n stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M7.58398 7.58325L11.084 11.0833\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </span>\n <span *ngIf=\"getCurrentEventTypeConfig().icon === 'cursor-double'\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M8.16667 2.3916L7 3.49993\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.97487 4.66662L1.2832 4.19995\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M3.50091 7L2.39258 8.16667\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.19922 1.28345L4.66589 2.97511\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M5.27114 5.65255C5.24852 5.59926 5.24234 5.54043 5.25338 5.48361C5.26443 5.42678 5.2922 5.37455 5.33313 5.33362C5.37407 5.29269 5.4263 5.26492 5.48312 5.25387C5.53994 5.24283 5.59877 5.24901 5.65206 5.27163L12.0687 7.89663C12.1258 7.92006 12.174 7.961 12.2064 8.01357C12.2388 8.06613 12.2536 8.12761 12.2488 8.18915C12.244 8.25069 12.2198 8.30912 12.1797 8.35603C12.1396 8.40295 12.0856 8.43592 12.0256 8.45021L9.48864 9.05746C9.38391 9.08248 9.28815 9.13599 9.21196 9.21208C9.13578 9.28816 9.08213 9.38385 9.05698 9.48855L8.45031 12.026C8.43617 12.0863 8.40323 12.1405 8.35626 12.1808C8.30928 12.2211 8.25071 12.2454 8.189 12.2502C8.1273 12.255 8.06567 12.2401 8.01302 12.2075C7.96037 12.175 7.91944 12.1266 7.89614 12.0692L5.27114 5.65255Z\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </span>\n <span *ngIf=\"getCurrentEventTypeConfig().icon === 'enter'\" class=\"cqa-enter-key-icon cqa-inline-flex cqa-flex-shrink-0\" style=\"width: 20px; height: 20px;\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 32 32\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-w-full cqa-h-full\">\n <path fill=\"#6B7280\" transform=\"translate(14,5)\" d=\"M0 0 C4.29 0 8.58 0 13 0 C13 7.26 13 14.52 13 22 C5.74 22 -1.52 22 -9 22 C-9 16.72 -9 11.44 -9 6 C-6.03 6 -3.06 6 0 6 C0 4.02 0 2.04 0 0 Z M2 2 C2 3.98 2 5.96 2 8 C-0.97 8 -3.94 8 -7 8 C-7 11.96 -7 15.92 -7 20 C-1.06 20 4.88 20 11 20 C11 14.06 11 8.12 11 2 C8.03 2 5.06 2 2 2 Z\"/>\n <path fill=\"#6B7280\" transform=\"translate(19,13)\" d=\"M0 0 C0.66 0 1.32 0 2 0 C2 2.31 2 4.62 2 7 C0.02 7 -1.96 7 -4 7 C-4.33 8.32 -4.66 9.64 -5 11 C-6.65 9.68 -8.3 8.36 -10 7 C-8.63016497 3.83884224 -8.0109362 3.0072908 -5 1 C-4.67 2.32 -4.34 3.64 -4 5 C-2.68 5 -1.36 5 0 5 C0 3.35 0 1.7 0 0 Z\"/>\n </svg>\n </span>\n <span *ngIf=\"getCurrentEventTypeConfig().icon === 'clock'\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M6.99935 12.8334C10.221 12.8334 12.8327 10.2217 12.8327 7.00008C12.8327 3.77842 10.221 1.16675 6.99935 1.16675C3.77769 1.16675 1.16602 3.77842 1.16602 7.00008C1.16602 10.2217 3.77769 12.8334 6.99935 12.8334Z\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M7 3.5V7L9.33333 8.16667\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </span>\n <span *ngIf=\"getCurrentEventTypeConfig().icon === 'settings'\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M7 4.66667C5.71133 4.66667 4.66667 5.71133 4.66667 7C4.66667 8.28867 5.71133 9.33333 7 9.33333C8.28867 9.33333 9.33333 8.28867 9.33333 7C9.33333 5.71133 8.28867 4.66667 7 4.66667Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M11.0833 7.58333C11.1417 7.29167 11.1417 6.70833 11.0833 6.41667L12.25 5.83333C12.4167 5.70833 12.4833 5.48333 12.4167 5.25L11.6667 3.41667C11.6 3.18333 11.3917 3.04167 11.1417 3.04167L9.91667 3.5C9.56667 3.20833 9.19167 2.95833 8.75 2.79167L8.4 1.45833C8.34167 1.225 8.14167 1.16667 7.93333 1.16667H6.06667C5.85833 1.16667 5.65833 1.225 5.6 1.45833L5.25 2.79167C4.80833 2.95833 4.43333 3.20833 4.08333 3.5L2.85833 3.04167C2.60833 3.04167 2.4 3.18333 2.33333 3.41667L1.58333 5.25C1.51667 5.48333 1.58333 5.70833 1.75 5.83333L2.91667 6.41667C2.85833 6.70833 2.85833 7.29167 2.91667 7.58333L1.75 8.16667C1.58333 8.29167 1.51667 8.51667 1.58333 8.75L2.33333 10.5833C2.4 10.8167 2.60833 10.9583 2.85833 10.9583L4.08333 10.5C4.43333 10.7917 4.80833 11.0417 5.25 11.2083L5.6 12.5417C5.65833 12.775 5.85833 12.8333 6.06667 12.8333H7.93333C8.14167 12.8333 8.34167 12.775 8.4 12.5417L8.75 11.2083C9.19167 11.0417 9.56667 10.7917 9.91667 10.5L11.1417 10.9583C11.3917 10.9583 11.6 10.8167 11.6667 10.5833L12.4167 8.75C12.4833 8.51667 12.4167 8.29167 12.25 8.16667L11.0833 7.58333Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </span>\n <span *ngIf=\"getCurrentEventTypeConfig().icon === 'check'\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M11.6667 3.5L5.25 10.5L2.33333 7.58333\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </span>\n\n <!-- Label (show only when no icon; all types have icon now \u2013 tooltip on button) -->\n <span *ngIf=\"!getCurrentEventTypeConfig().icon\" class=\"cqa-text-[#432DD7] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium\">{{\n getCurrentEventTypeConfig().label }}</span>\n </button>\n\n <!-- Dropdown Menu -->\n <div *ngIf=\"eventTypeDropdownOpen\" (click)=\"$event.stopPropagation()\"\n class=\"cqa-absolute cqa-top-full cqa-left-0 cqa-mt-1 cqa-bg-white cqa-rounded-lg cqa-shadow-lg cqa-border cqa-border-gray-200 cqa-z-50 cqa-min-w-[150px] cqa-py-1\">\n <button *ngFor=\"let etc of eventTypeConfigs\" type=\"button\" (click)=\"onEventTypeSelect(etc.type)\"\n [class.cqa-bg-primary-50]=\"eventType === etc.type\"\n class=\"cqa-w-full cqa-px-3 cqa-py-2 cqa-text-left cqa-flex cqa-items-center cqa-gap-2 hover:cqa-bg-gray-50 cqa-transition-colors\">\n <span *ngIf=\"etc.icon === 'paper_plane'\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M1 5.5L11 1M11 1L7.5 11L6 6.5L1 5.5M11 1L1 5.5\" stroke=\"currentColor\" stroke-width=\"1.5\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </span>\n <span *ngIf=\"etc.icon === 'star'\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M6 1L7.5 4.5L11 5L7.5 5.5L6 9L4.5 5.5L1 5L4.5 4.5L6 1Z\" fill=\"currentColor\" />\n </svg>\n </span>\n <span *ngIf=\"etc.icon === 'T'\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M2.33398 4.08325V2.33325H11.6673V4.08325\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M5.25 11.6667H8.75\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M7 2.33325V11.6666\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </span>\n <span *ngIf=\"etc.icon === 'cursor'\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M2 2L9 1L10 8L7 7L5 9L4 7L2 2Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </span>\n <span *ngIf=\"etc.icon === 'cursor-double'\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M8.16667 2.3916L7 3.49993\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.97487 4.66662L1.2832 4.19995\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M3.50091 7L2.39258 8.16667\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.19922 1.28345L4.66589 2.97511\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M5.27114 5.65255C5.24852 5.59926 5.24234 5.54043 5.25338 5.48361C5.26443 5.42678 5.2922 5.37455 5.33313 5.33362C5.37407 5.29269 5.4263 5.26492 5.48312 5.25387C5.53994 5.24283 5.59877 5.24901 5.65206 5.27163L12.0687 7.89663C12.1258 7.92006 12.174 7.961 12.2064 8.01357C12.2388 8.06613 12.2536 8.12761 12.2488 8.18915C12.244 8.25069 12.2198 8.30912 12.1797 8.35603C12.1396 8.40295 12.0856 8.43592 12.0256 8.45021L9.48864 9.05746C9.38391 9.08248 9.28815 9.13599 9.21196 9.21208C9.13578 9.28816 9.08213 9.38385 9.05698 9.48855L8.45031 12.026C8.43617 12.0863 8.40323 12.1405 8.35626 12.1808C8.30928 12.2211 8.25071 12.2454 8.189 12.2502C8.1273 12.255 8.06567 12.2401 8.01302 12.2075C7.96037 12.175 7.91944 12.1266 7.89614 12.0692L5.27114 5.65255Z\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg> \n </span>\n <span *ngIf=\"etc.icon === 'enter'\" class=\"cqa-enter-key-icon cqa-inline-flex cqa-flex-shrink-0\" style=\"width: 16px; height: 16px;\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 32 32\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-w-full cqa-h-full\">\n <path fill=\"#6B7280\" transform=\"translate(14,5)\" d=\"M0 0 C4.29 0 8.58 0 13 0 C13 7.26 13 14.52 13 22 C5.74 22 -1.52 22 -9 22 C-9 16.72 -9 11.44 -9 6 C-6.03 6 -3.06 6 0 6 C0 4.02 0 2.04 0 0 Z M2 2 C2 3.98 2 5.96 2 8 C-0.97 8 -3.94 8 -7 8 C-7 11.96 -7 15.92 -7 20 C-1.06 20 4.88 20 11 20 C11 14.06 11 8.12 11 2 C8.03 2 5.06 2 2 2 Z\"/>\n <path fill=\"#6B7280\" transform=\"translate(19,13)\" d=\"M0 0 C0.66 0 1.32 0 2 0 C2 2.31 2 4.62 2 7 C0.02 7 -1.96 7 -4 7 C-4.33 8.32 -4.66 9.64 -5 11 C-6.65 9.68 -8.3 8.36 -10 7 C-8.63016497 3.83884224 -8.0109362 3.0072908 -5 1 C-4.67 2.32 -4.34 3.64 -4 5 C-2.68 5 -1.36 5 0 5 C0 3.35 0 1.7 0 0 Z\"/>\n </svg>\n </span>\n <span *ngIf=\"etc.icon === 'clock'\">\n <svg 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\" />\n <path d=\"M6 3V6L8 7\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" />\n </svg>\n </span>\n <span *ngIf=\"etc.icon === 'settings'\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M7 4.66667C5.71133 4.66667 4.66667 5.71133 4.66667 7C4.66667 8.28867 5.71133 9.33333 7 9.33333C8.28867 9.33333 9.33333 8.28867 9.33333 7C9.33333 5.71133 8.28867 4.66667 7 4.66667Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M11.0833 7.58333C11.1417 7.29167 11.1417 6.70833 11.0833 6.41667L12.25 5.83333C12.4167 5.70833 12.4833 5.48333 12.4167 5.25L11.6667 3.41667C11.6 3.18333 11.3917 3.04167 11.1417 3.04167L9.91667 3.5C9.56667 3.20833 9.19167 2.95833 8.75 2.79167L8.4 1.45833C8.34167 1.225 8.14167 1.16667 7.93333 1.16667H6.06667C5.85833 1.16667 5.65833 1.225 5.6 1.45833L5.25 2.79167C4.80833 2.95833 4.43333 3.20833 4.08333 3.5L2.85833 3.04167C2.60833 3.04167 2.4 3.18333 2.33333 3.41667L1.58333 5.25C1.51667 5.48333 1.58333 5.70833 1.75 5.83333L2.91667 6.41667C2.85833 6.70833 2.85833 7.29167 2.91667 7.58333L1.75 8.16667C1.58333 8.29167 1.51667 8.51667 1.58333 8.75L2.33333 10.5833C2.4 10.8167 2.60833 10.9583 2.85833 10.9583L4.08333 10.5C4.43333 10.7917 4.80833 11.0417 5.25 11.2083L5.6 12.5417C5.65833 12.775 5.85833 12.8333 6.06667 12.8333H7.93333C8.14167 12.8333 8.34167 12.775 8.4 12.5417L8.75 11.2083C9.19167 11.0417 9.56667 10.7917 9.91667 10.5L11.1417 10.9583C11.3917 10.9583 11.6 10.8167 11.6667 10.5833L12.4167 8.75C12.4833 8.51667 12.4167 8.29167 12.25 8.16667L11.0833 7.58333Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </span>\n <span *ngIf=\"etc.icon === 'check'\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M11.6667 3.5L5.25 10.5L2.33333 7.58333\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </span>\n <span>{{ etc.label }}</span>\n </button>\n </div>\n </div>\n\n <!-- AI Agent: single cohesive box for action line + task content (ai_task) -->\n <div\n *ngIf=\"eventType === 'ai-agent' && getActionDescription()\"\n class=\"cqa-ai-agent-unified-box cqa-min-w-0 cqa-flex-1\">\n <span\n class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px] !cqa-inline-flex cqa-items-center cqa-action-format cqa-ai-agent-unified-inner\"\n style=\"white-space: pre-wrap;\"\n [innerHTML]=\"getActionDescription()\"\n (click)=\"clickOnAction($event)\">\n </span>\n </div>\n <!-- Other step types: action HTML as before -->\n <span\n class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px] cqa-action-format cqa-align-middle cqa-min-w-0 cqa-flex-1\"\n *ngIf=\"eventType !== 'ai-agent' && getActionDescription()\"\n [innerHTML]=\"getActionDescription()\"\n (click)=\"clickOnAction($event)\">\n </span>\n <!-- <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px]\" *ngIf=\"getActionDescription()\">\n {{ getActionDescription() }}\n </span> -->\n\n <!-- Parameters -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-3\" *ngIf=\"false\">\n <!-- Navigate: URL as clickable trigger for Test Data modal -->\n <span *ngIf=\"eventType === 'navigate' && getNavigateUrlParameter()\" #testDataTrigger\n (click)=\"openTestDataModal($event)\"\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] cqa-cursor-pointer hover:cqa-opacity-90\">\n {{ getNavigateUrlParameter()?.value || getNavigateUrlParameter()?.displayValue }}\n </span>\n \n <!-- Other event types: loop through parameters (navigate excluded) -->\n <ng-container *ngFor=\"let param of parameters; let i = index\">\n <!-- Skip navigate parameters in the loop (already shown above) -->\n <ng-container *ngIf=\"eventType !== 'navigate'\">\n\n <!-- Type: First param (text value like {{username}}) -->\n <span *ngIf=\"eventType === 'type' && i === 0\" class=\"cqa-text-gray-900 cqa-text-sm\">\n {{ param.value }}\n </span>\n\n <!-- Type: \"into\" text -->\n <span *ngIf=\"eventType === 'type' && i === 0\" class=\"cqa-text-gray-900 cqa-text-sm\">\n into\n </span>\n\n <!-- Type: Second param (selector) -->\n <span *ngIf=\"eventType === 'type' && i === 1\"\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 {{ param.displayValue || param.value }}\n </span>\n\n <!-- Click: Selector input/display -->\n <span *ngIf=\"eventType === 'click' && param.name === 'element'\"\n #clickElementTrigger\n (click)=\"openElementPopup($event)\"\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-cursor-pointer cqa-bg-[#D8D9FC]\">\n {{ param.displayValue || param.value }}\n </span>\n\n <!-- Click: Suffix text (like \"if Present\") -->\n <span *ngIf=\"eventType === 'click' && param.name === 'suffix'\" class=\"cqa-text-gray-900 cqa-text-sm\">\n {{ param.value }}\n </span>\n\n <!-- Double Click: Selector input/display -->\n <span *ngIf=\"eventType === 'doubleClick' && i === 0\"\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 {{ param.displayValue || param.value }}\n </span>\n\n <!-- Press Enter: Selector input/display with HTML support -->\n <span *ngIf=\"eventType === 'pressEnter' && i === 0\"\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 [innerHTML]=\"param.displayValue || param.value\">\n </span>\n\n <!-- Enter: Value display with quotes (like click action) -->\n <span *ngIf=\"eventType === 'enter' && param.name === 'value'\"\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 {{ param.displayValue || param.value }}\n </span>\n\n <!-- Enter: \"in the\" text -->\n <span *ngIf=\"eventType === 'enter' && param.name === 'value'\" class=\"cqa-text-gray-900 cqa-text-sm\">\n in the\n </span>\n\n <!-- Enter: Label display with quotes (like click action) -->\n <span *ngIf=\"eventType === 'enter' && param.name === 'label'\"\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 {{ param.displayValue || param.value }}\n </span>\n\n <!-- Enter: \"field\" text -->\n <span *ngIf=\"eventType === 'enter' && param.name === 'label'\" class=\"cqa-text-gray-900 cqa-text-sm\">\n field\n </span>\n\n <!-- Wait: Duration input -->\n <input *ngIf=\"eventType === 'wait' && param.name === 'duration'\" type=\"number\" [value]=\"param.value\"\n (input)=\"onParameterChange(param, $any($event.target).value)\" placeholder=\"2\"\n class=\"cqa-w-16 cqa-px-2 cqa-py-1.5 cqa-rounded-lg cqa-border cqa-border-solid cqa-border-[#9E9EE3] cqa-bg-[#D1C4E9] cqa-text-[#3F43EE] cqa-text-sm cqa-font-medium cqa-outline-none focus:cqa-ring-2 focus:cqa-ring-[#3F43EE] focus:cqa-ring-opacity-50\" />\n <span *ngIf=\"eventType === 'wait' && param.name === 'duration'\" class=\"cqa-text-gray-900 cqa-text-sm\">\n seconds\n </span>\n\n <!-- Wait: Element selector -->\n <span *ngIf=\"eventType === 'wait' && param.name === 'element'\" class=\"cqa-text-gray-900 cqa-text-sm\">\n for element\n </span>\n <span *ngIf=\"eventType === 'wait' && param.name === 'element'\" \n #elementTrigger\n (click)=\"openElementPopup($event)\"\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-cursor-pointer cqa-bg-[#D8D9FC]\">\n {{ param.displayValue || param.value }}\n </span>\n <span *ngIf=\"eventType === 'wait' && param.name === 'element'\" class=\"cqa-text-gray-900 cqa-text-sm\">\n to be visible\n </span>\n\n <!-- Custom: Description (clickable to open Step Description modal; pass $event so modal opens below this trigger) -->\n <span *ngIf=\"eventType === 'custom'\" #descriptionTrigger\n (click)=\"openStepDescriptionModal($event)\"\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] cqa-cursor-pointer hover:cqa-opacity-90\"\n [innerHTML]=\"param.displayValue || param.value\">\n </span>\n\n <!-- AI Agent: Instructions -->\n <span *ngIf=\"eventType === 'ai-agent'\"\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 {{ param.displayValue || param.value }}\n </span>\n </ng-container>\n </ng-container>\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-ml-auto cqa-self-center\">\n <span *ngIf=\"config?.shouldSkip\" 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] cqa-flex-shrink-0\">Skipped</span>\n <!-- Action Icons: Edit, Link, Duplicate, Delete (show on hover; hidden when step is inside step-group) - placed first -->\n <div *ngIf=\"editable && !isInsideStepGroup && !isReorder\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-1.5 cqa-pr-2\">\n <button type=\"button\" #editTrigger (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\" stroke-linejoin=\"round\"/>\n <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\"/>\n </svg>\n </button>\n <!-- Skip / Unskip (after Edit icon) -->\n <button\n type=\"button\"\n (click)=\"onSkipToggle(); $event.stopPropagation()\"\n [disabled]=\"isParentSkipped\"\n [attr.title]=\"isParentSkipped ? 'Cannot change skip while parent step is skipped' : (config?.shouldSkip ? 'Unskip step' : 'Skip step')\"\n [style.color]=\"config?.shouldSkip ? '#1447E6' : null\"\n class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6] disabled:cqa-opacity-50 disabled:cqa-cursor-not-allowed\"\n >\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M8.25 8.75C9.2165 8.75 10 7.9665 10 7C10 6.0335 9.2165 5.25 8.25 5.25C7.2835 5.25 6.5 6.0335 6.5 7C6.5 7.9665 7.2835 8.75 8.25 8.75Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M8.75033 2.91663H5.25033C2.99516 2.91663 1.16699 4.7448 1.16699 6.99996C1.16699 9.25512 2.99516 11.0833 5.25033 11.0833H8.75033C11.0055 11.0833 12.8337 9.25512 12.8337 6.99996C12.8337 4.7448 11.0055 2.91663 8.75033 2.91663Z\" 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\" 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=\"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\"/>\n <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\"/>\n <path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button> -->\n <button\n type=\"button\"\n (click)=\"onDuplicate(); $event.stopPropagation()\"\n [disabled]=\"isDuplicating\"\n [attr.title]=\"isDuplicating ? 'Duplicating...' : 'Duplicate'\"\n class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6] disabled:cqa-opacity-60 disabled:cqa-cursor-not-allowed\"\n >\n <svg *ngIf=\"!isDuplicating\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <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\"/>\n <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\"/>\n </svg>\n <svg *ngIf=\"isDuplicating\" width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-label=\"Duplicating\">\n <circle cx=\"8\" cy=\"8\" r=\"6\" stroke=\"currentColor\" stroke-opacity=\"0.2\" stroke-width=\"2\"></circle>\n <path d=\"M14 8A6 6 0 0 0 8 2\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\">\n <animateTransform attributeName=\"transform\" type=\"rotate\" from=\"0 8 8\" to=\"360 8 8\" dur=\"0.8s\" repeatCount=\"indefinite\"/>\n </path>\n </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\">\n <path d=\"M1.75 3.5H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <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\"/>\n <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\"/>\n <path d=\"M5.83398 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M8.16602 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n </div>\n\n <!-- View Details Link (show only if description is not empty) -->\n <a *ngIf=\"config.description && config.description.trim() !== ''\" #viewDetailsTrigger href=\"#\" (click)=\"onViewDetails($event)\" class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-1 cqa-no-underline\">View Details<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></a>\n\n <!-- Created Date (from API) - last so aligned across all steps, format: 25 Feb 2026 -->\n <span *ngIf=\"config.createdDate\" class=\"step-date cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px] cqa-ml-auto cqa-flex-shrink-0\">\n {{ config.createdDate | date:'d MMM yyyy' }}\n </span>\n </div>\n</div>", styles: [".step-actions{opacity:0;transition:opacity .15s ease}.step-row:hover .step-actions{opacity:1}.step-row{vertical-align:middle;letter-spacing:normal}\n"], 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"] }], pipes: { "date": i2.DatePipe } });
29718
+ TestCaseNormalStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestCaseNormalStepComponent, selector: "cqa-test-case-normal-step", inputs: { config: "config", stepNumber: "stepNumber", index: "index", action: "action", eventType: "eventType", parameters: "parameters", selected: "selected", disabled: "disabled", isNested: "isNested", isInsideLoop: "isInsideLoop", isInsideStepGroup: "isInsideStepGroup", isReorder: "isReorder", isParentSkipped: "isParentSkipped", editable: "editable", stepIndex: "stepIndex", isDuplicating: "isDuplicating", nestingLevel: "nestingLevel" }, outputs: { eventTypeChange: "eventTypeChange", parameterChange: "parameterChange", edit: "edit", editInDepth: "editInDepth", link: "link", duplicate: "duplicate", delete: "delete", moreOptions: "moreOptions", viewDetails: "viewDetails", selectionChange: "selectionChange", clickAction: "clickAction", stepUpdate: "stepUpdate" }, host: { listeners: { "document:click": "onDocumentClick($event)" }, classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "dropdownContainer", first: true, predicate: ["dropdownContainer"], descendants: true }, { propertyName: "descriptionTrigger", first: true, predicate: ["descriptionTrigger"], descendants: true }, { propertyName: "testDataTrigger", first: true, predicate: ["testDataTrigger"], descendants: true }, { propertyName: "editTrigger", first: true, predicate: ["editTrigger"], descendants: true }, { propertyName: "elementTrigger", first: true, predicate: ["elementTrigger"], descendants: true }, { propertyName: "clickElementTrigger", first: true, predicate: ["clickElementTrigger"], descendants: true }, { propertyName: "viewDetailsTrigger", first: true, predicate: ["viewDetailsTrigger"], descendants: true }], ngImport: i0, template: "<div\n [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 cqa-pr-4' + ((config?.shouldSkip || isParentSkipped) ? ' cqa-step-skipped' : '')\"\n [style.opacity]=\"(config?.shouldSkip || isParentSkipped) ? '0.6' : null\"\n [style.padding-left.px]=\"getRowPaddingLeftPx()\"\n [style.border-top]=\"isInsideStepGroup ? '1px solid #BEDBFF' : '1px solid #E5E7EB'\"\n style=\"border-bottom: 1px solid #E5E7EB;\">\n\n <div *ngIf=\"!isInsideStepGroup\" class=\"cqa-inline-flex cqa-items-center\">\n <!-- Drag Handle Icon (when isReorder is true and not inside step group - steps inside step groups cannot be reordered) -->\n <div *ngIf=\"isReorder && !isInsideStepGroup\" 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, editable, and not inside step group - hide for steps inside step groups) -->\n <label *ngIf=\"editable && !isReorder && !isInsideStepGroup\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative cqa-mr-2\">\n <input type=\"checkbox\"\n [ngModel]=\"selected\"\n [disabled]=\"disabled\"\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\" />\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 </div>\n <div *ngIf=\"isInsideStepGroup\" class=\"cqa-flex cqa-flex-shrink-0 cqa-items-center cqa-pl-0 cqa-pr-1 cqa-text-[#9CA3AF]\" aria-hidden=\"true\" title=\"Step is inside a group\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M11.9998 5.66667H11.3332V4.33333C11.3332 2.49333 9.83984 1 7.99984 1C6.15984 1 4.6665 2.49333 4.6665 4.33333V5.66667H3.99984C3.2665 5.66667 2.6665 6.26667 2.6665 7V13.6667C2.6665 14.4 3.2665 15 3.99984 15H11.9998C12.7332 15 13.3332 14.4 13.3332 13.6667V7C13.3332 6.26667 12.7332 5.66667 11.9998 5.66667ZM5.99984 4.33333C5.99984 3.22667 6.89317 2.33333 7.99984 2.33333C9.1065 2.33333 9.99984 3.22667 9.99984 4.33333V5.66667H5.99984V4.33333ZM11.9998 13.6667H3.99984V7H11.9998V13.6667ZM7.99984 11.6667C8.73317 11.6667 9.33317 11.0667 9.33317 10.3333C9.33317 9.6 8.73317 9 7.99984 9C7.2665 9 6.6665 9.6 6.6665 10.3333C6.6665 11.0667 7.2665 11.6667 7.99984 11.6667Z\" fill=\"currentColor\"/>\n </svg>\n </div>\n\n <!-- Step Number -->\n <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px] cqa-min-w-[32px]\">\n {{ stepNumber }}\n </span>\n\n <!-- Event Type Selector (Pill Button) #### (click)=\"toggleEventTypeDropdown(); $event.stopPropagation()\" -->\n <div class=\"cqa-relative\" #dropdownContainer>\n <button type=\"button\" \n [attr.title]=\"getCurrentEventTypeConfig().label\"\n [style.background-color]=\"getCurrentEventTypeConfig().backgroundColor\"\n [style.color]=\"getCurrentEventTypeConfig().color\"\n class=\"cqa-w-8 cqa-h-8 cqa-rounded-lg cqa-flex cqa-items-center cqa-justify-center cqa-flex-shrink-0 cqa-cursor-pointer\">\n <!-- Icon -->\n <span *ngIf=\"getCurrentEventTypeConfig().icon === 'paper_plane'\">\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 6.41663L12.8333 1.16663L7.58333 12.25L6.41667 7.58329L1.75 6.41663Z\" stroke=\"currentColor\"\n stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </span>\n <span *ngIf=\"getCurrentEventTypeConfig().icon === 'star'\">\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.797 9.04165C5.74492 8.83977 5.63969 8.65554 5.49227 8.50812C5.34485 8.3607 5.16062 8.25548 4.95875 8.2034L1.38 7.28057C1.31894 7.26324 1.2652 7.22646 1.22694 7.17583C1.18867 7.12519 1.16797 7.06345 1.16797 6.99998C1.16797 6.93651 1.18867 6.87478 1.22694 6.82414C1.2652 6.7735 1.31894 6.73673 1.38 6.7194L4.95875 5.79598C5.16055 5.74395 5.34473 5.63882 5.49215 5.49151C5.63956 5.34419 5.74483 5.16008 5.797 4.95832L6.71983 1.37957C6.73698 1.31827 6.77372 1.26427 6.82443 1.2258C6.87515 1.18733 6.93705 1.1665 7.0007 1.1665C7.06436 1.1665 7.12626 1.18733 7.17698 1.2258C7.22769 1.26427 7.26442 1.31827 7.28158 1.37957L8.20383 4.95832C8.25591 5.16019 8.36113 5.34442 8.50855 5.49184C8.65597 5.63926 8.8402 5.74449 9.04208 5.79657L12.6208 6.71882C12.6824 6.73579 12.7366 6.77249 12.7753 6.82328C12.814 6.87407 12.8349 6.93614 12.8349 6.99998C12.8349 7.06382 12.814 7.1259 12.7753 7.17669C12.7366 7.22748 12.6824 7.26417 12.6208 7.28115L9.04208 8.2034C8.8402 8.25548 8.65597 8.3607 8.50855 8.50812C8.36113 8.65554 8.25591 8.83977 8.20383 9.04165L7.281 12.6204C7.26384 12.6817 7.22711 12.7357 7.17639 12.7742C7.12568 12.8126 7.06377 12.8335 7.00012 12.8335C6.93647 12.8335 6.87456 12.8126 6.82385 12.7742C6.77314 12.7357 6.7364 12.6817 6.71925 12.6204L5.797 9.04165Z\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M11.666 1.75V4.08333\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M12.8333 2.91663H10.5\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M2.33398 9.91663V11.0833\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M2.91667 10.5H1.75\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </span>\n <span *ngIf=\"getCurrentEventTypeConfig().icon === 'T'\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M2.33398 4.08325V2.33325H11.6673V4.08325\" stroke=\"currentColor\" stroke-width=\"1.16667\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M5.25 11.6667H8.75\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M7 2.33325V11.6666\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </span>\n <span *ngIf=\"getCurrentEventTypeConfig().icon === 'cursor'\">\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 1.75L5.87417 11.6492L7.33833 7.33833L11.6492 5.87417L1.75 1.75Z\" stroke=\"currentColor\"\n stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M7.58398 7.58325L11.084 11.0833\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </span>\n <span *ngIf=\"getCurrentEventTypeConfig().icon === 'cursor-double'\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M8.16667 2.3916L7 3.49993\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.97487 4.66662L1.2832 4.19995\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M3.50091 7L2.39258 8.16667\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.19922 1.28345L4.66589 2.97511\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M5.27114 5.65255C5.24852 5.59926 5.24234 5.54043 5.25338 5.48361C5.26443 5.42678 5.2922 5.37455 5.33313 5.33362C5.37407 5.29269 5.4263 5.26492 5.48312 5.25387C5.53994 5.24283 5.59877 5.24901 5.65206 5.27163L12.0687 7.89663C12.1258 7.92006 12.174 7.961 12.2064 8.01357C12.2388 8.06613 12.2536 8.12761 12.2488 8.18915C12.244 8.25069 12.2198 8.30912 12.1797 8.35603C12.1396 8.40295 12.0856 8.43592 12.0256 8.45021L9.48864 9.05746C9.38391 9.08248 9.28815 9.13599 9.21196 9.21208C9.13578 9.28816 9.08213 9.38385 9.05698 9.48855L8.45031 12.026C8.43617 12.0863 8.40323 12.1405 8.35626 12.1808C8.30928 12.2211 8.25071 12.2454 8.189 12.2502C8.1273 12.255 8.06567 12.2401 8.01302 12.2075C7.96037 12.175 7.91944 12.1266 7.89614 12.0692L5.27114 5.65255Z\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </span>\n <span *ngIf=\"getCurrentEventTypeConfig().icon === 'enter'\" class=\"cqa-enter-key-icon cqa-inline-flex cqa-flex-shrink-0\" style=\"width: 20px; height: 20px;\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 32 32\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-w-full cqa-h-full\">\n <path fill=\"#6B7280\" transform=\"translate(14,5)\" d=\"M0 0 C4.29 0 8.58 0 13 0 C13 7.26 13 14.52 13 22 C5.74 22 -1.52 22 -9 22 C-9 16.72 -9 11.44 -9 6 C-6.03 6 -3.06 6 0 6 C0 4.02 0 2.04 0 0 Z M2 2 C2 3.98 2 5.96 2 8 C-0.97 8 -3.94 8 -7 8 C-7 11.96 -7 15.92 -7 20 C-1.06 20 4.88 20 11 20 C11 14.06 11 8.12 11 2 C8.03 2 5.06 2 2 2 Z\"/>\n <path fill=\"#6B7280\" transform=\"translate(19,13)\" d=\"M0 0 C0.66 0 1.32 0 2 0 C2 2.31 2 4.62 2 7 C0.02 7 -1.96 7 -4 7 C-4.33 8.32 -4.66 9.64 -5 11 C-6.65 9.68 -8.3 8.36 -10 7 C-8.63016497 3.83884224 -8.0109362 3.0072908 -5 1 C-4.67 2.32 -4.34 3.64 -4 5 C-2.68 5 -1.36 5 0 5 C0 3.35 0 1.7 0 0 Z\"/>\n </svg>\n </span>\n <span *ngIf=\"getCurrentEventTypeConfig().icon === 'clock'\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M6.99935 12.8334C10.221 12.8334 12.8327 10.2217 12.8327 7.00008C12.8327 3.77842 10.221 1.16675 6.99935 1.16675C3.77769 1.16675 1.16602 3.77842 1.16602 7.00008C1.16602 10.2217 3.77769 12.8334 6.99935 12.8334Z\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M7 3.5V7L9.33333 8.16667\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </span>\n <span *ngIf=\"getCurrentEventTypeConfig().icon === 'settings'\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M7 4.66667C5.71133 4.66667 4.66667 5.71133 4.66667 7C4.66667 8.28867 5.71133 9.33333 7 9.33333C8.28867 9.33333 9.33333 8.28867 9.33333 7C9.33333 5.71133 8.28867 4.66667 7 4.66667Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M11.0833 7.58333C11.1417 7.29167 11.1417 6.70833 11.0833 6.41667L12.25 5.83333C12.4167 5.70833 12.4833 5.48333 12.4167 5.25L11.6667 3.41667C11.6 3.18333 11.3917 3.04167 11.1417 3.04167L9.91667 3.5C9.56667 3.20833 9.19167 2.95833 8.75 2.79167L8.4 1.45833C8.34167 1.225 8.14167 1.16667 7.93333 1.16667H6.06667C5.85833 1.16667 5.65833 1.225 5.6 1.45833L5.25 2.79167C4.80833 2.95833 4.43333 3.20833 4.08333 3.5L2.85833 3.04167C2.60833 3.04167 2.4 3.18333 2.33333 3.41667L1.58333 5.25C1.51667 5.48333 1.58333 5.70833 1.75 5.83333L2.91667 6.41667C2.85833 6.70833 2.85833 7.29167 2.91667 7.58333L1.75 8.16667C1.58333 8.29167 1.51667 8.51667 1.58333 8.75L2.33333 10.5833C2.4 10.8167 2.60833 10.9583 2.85833 10.9583L4.08333 10.5C4.43333 10.7917 4.80833 11.0417 5.25 11.2083L5.6 12.5417C5.65833 12.775 5.85833 12.8333 6.06667 12.8333H7.93333C8.14167 12.8333 8.34167 12.775 8.4 12.5417L8.75 11.2083C9.19167 11.0417 9.56667 10.7917 9.91667 10.5L11.1417 10.9583C11.3917 10.9583 11.6 10.8167 11.6667 10.5833L12.4167 8.75C12.4833 8.51667 12.4167 8.29167 12.25 8.16667L11.0833 7.58333Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </span>\n <span *ngIf=\"getCurrentEventTypeConfig().icon === 'check'\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M11.6667 3.5L5.25 10.5L2.33333 7.58333\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </span>\n\n <!-- Label (show only when no icon; all types have icon now \u2013 tooltip on button) -->\n <span *ngIf=\"!getCurrentEventTypeConfig().icon\" class=\"cqa-text-[#432DD7] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium\">{{\n getCurrentEventTypeConfig().label }}</span>\n </button>\n\n <!-- Dropdown Menu -->\n <div *ngIf=\"eventTypeDropdownOpen\" (click)=\"$event.stopPropagation()\"\n class=\"cqa-absolute cqa-top-full cqa-left-0 cqa-mt-1 cqa-bg-white cqa-rounded-lg cqa-shadow-lg cqa-border cqa-border-gray-200 cqa-z-50 cqa-min-w-[150px] cqa-py-1\">\n <button *ngFor=\"let etc of eventTypeConfigs\" type=\"button\" (click)=\"onEventTypeSelect(etc.type)\"\n [class.cqa-bg-primary-50]=\"eventType === etc.type\"\n class=\"cqa-w-full cqa-px-3 cqa-py-2 cqa-text-left cqa-flex cqa-items-center cqa-gap-2 hover:cqa-bg-gray-50 cqa-transition-colors\">\n <span *ngIf=\"etc.icon === 'paper_plane'\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M1 5.5L11 1M11 1L7.5 11L6 6.5L1 5.5M11 1L1 5.5\" stroke=\"currentColor\" stroke-width=\"1.5\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </span>\n <span *ngIf=\"etc.icon === 'star'\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M6 1L7.5 4.5L11 5L7.5 5.5L6 9L4.5 5.5L1 5L4.5 4.5L6 1Z\" fill=\"currentColor\" />\n </svg>\n </span>\n <span *ngIf=\"etc.icon === 'T'\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M2.33398 4.08325V2.33325H11.6673V4.08325\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M5.25 11.6667H8.75\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M7 2.33325V11.6666\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </span>\n <span *ngIf=\"etc.icon === 'cursor'\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M2 2L9 1L10 8L7 7L5 9L4 7L2 2Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </span>\n <span *ngIf=\"etc.icon === 'cursor-double'\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M8.16667 2.3916L7 3.49993\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.97487 4.66662L1.2832 4.19995\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M3.50091 7L2.39258 8.16667\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.19922 1.28345L4.66589 2.97511\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M5.27114 5.65255C5.24852 5.59926 5.24234 5.54043 5.25338 5.48361C5.26443 5.42678 5.2922 5.37455 5.33313 5.33362C5.37407 5.29269 5.4263 5.26492 5.48312 5.25387C5.53994 5.24283 5.59877 5.24901 5.65206 5.27163L12.0687 7.89663C12.1258 7.92006 12.174 7.961 12.2064 8.01357C12.2388 8.06613 12.2536 8.12761 12.2488 8.18915C12.244 8.25069 12.2198 8.30912 12.1797 8.35603C12.1396 8.40295 12.0856 8.43592 12.0256 8.45021L9.48864 9.05746C9.38391 9.08248 9.28815 9.13599 9.21196 9.21208C9.13578 9.28816 9.08213 9.38385 9.05698 9.48855L8.45031 12.026C8.43617 12.0863 8.40323 12.1405 8.35626 12.1808C8.30928 12.2211 8.25071 12.2454 8.189 12.2502C8.1273 12.255 8.06567 12.2401 8.01302 12.2075C7.96037 12.175 7.91944 12.1266 7.89614 12.0692L5.27114 5.65255Z\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg> \n </span>\n <span *ngIf=\"etc.icon === 'enter'\" class=\"cqa-enter-key-icon cqa-inline-flex cqa-flex-shrink-0\" style=\"width: 16px; height: 16px;\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 32 32\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-w-full cqa-h-full\">\n <path fill=\"#6B7280\" transform=\"translate(14,5)\" d=\"M0 0 C4.29 0 8.58 0 13 0 C13 7.26 13 14.52 13 22 C5.74 22 -1.52 22 -9 22 C-9 16.72 -9 11.44 -9 6 C-6.03 6 -3.06 6 0 6 C0 4.02 0 2.04 0 0 Z M2 2 C2 3.98 2 5.96 2 8 C-0.97 8 -3.94 8 -7 8 C-7 11.96 -7 15.92 -7 20 C-1.06 20 4.88 20 11 20 C11 14.06 11 8.12 11 2 C8.03 2 5.06 2 2 2 Z\"/>\n <path fill=\"#6B7280\" transform=\"translate(19,13)\" d=\"M0 0 C0.66 0 1.32 0 2 0 C2 2.31 2 4.62 2 7 C0.02 7 -1.96 7 -4 7 C-4.33 8.32 -4.66 9.64 -5 11 C-6.65 9.68 -8.3 8.36 -10 7 C-8.63016497 3.83884224 -8.0109362 3.0072908 -5 1 C-4.67 2.32 -4.34 3.64 -4 5 C-2.68 5 -1.36 5 0 5 C0 3.35 0 1.7 0 0 Z\"/>\n </svg>\n </span>\n <span *ngIf=\"etc.icon === 'clock'\">\n <svg 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\" />\n <path d=\"M6 3V6L8 7\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" />\n </svg>\n </span>\n <span *ngIf=\"etc.icon === 'settings'\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M7 4.66667C5.71133 4.66667 4.66667 5.71133 4.66667 7C4.66667 8.28867 5.71133 9.33333 7 9.33333C8.28867 9.33333 9.33333 8.28867 9.33333 7C9.33333 5.71133 8.28867 4.66667 7 4.66667Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M11.0833 7.58333C11.1417 7.29167 11.1417 6.70833 11.0833 6.41667L12.25 5.83333C12.4167 5.70833 12.4833 5.48333 12.4167 5.25L11.6667 3.41667C11.6 3.18333 11.3917 3.04167 11.1417 3.04167L9.91667 3.5C9.56667 3.20833 9.19167 2.95833 8.75 2.79167L8.4 1.45833C8.34167 1.225 8.14167 1.16667 7.93333 1.16667H6.06667C5.85833 1.16667 5.65833 1.225 5.6 1.45833L5.25 2.79167C4.80833 2.95833 4.43333 3.20833 4.08333 3.5L2.85833 3.04167C2.60833 3.04167 2.4 3.18333 2.33333 3.41667L1.58333 5.25C1.51667 5.48333 1.58333 5.70833 1.75 5.83333L2.91667 6.41667C2.85833 6.70833 2.85833 7.29167 2.91667 7.58333L1.75 8.16667C1.58333 8.29167 1.51667 8.51667 1.58333 8.75L2.33333 10.5833C2.4 10.8167 2.60833 10.9583 2.85833 10.9583L4.08333 10.5C4.43333 10.7917 4.80833 11.0417 5.25 11.2083L5.6 12.5417C5.65833 12.775 5.85833 12.8333 6.06667 12.8333H7.93333C8.14167 12.8333 8.34167 12.775 8.4 12.5417L8.75 11.2083C9.19167 11.0417 9.56667 10.7917 9.91667 10.5L11.1417 10.9583C11.3917 10.9583 11.6 10.8167 11.6667 10.5833L12.4167 8.75C12.4833 8.51667 12.4167 8.29167 12.25 8.16667L11.0833 7.58333Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </span>\n <span *ngIf=\"etc.icon === 'check'\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M11.6667 3.5L5.25 10.5L2.33333 7.58333\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </span>\n <span>{{ etc.label }}</span>\n </button>\n </div>\n </div>\n\n <!-- AI Agent: label + single cohesive box for action line + task content (ai_task) -->\n <span\n *ngIf=\"eventType === 'ai-agent' && getActionDescription()\"\n style=\"white-space: nowrap; flex-shrink: 0; min-width: fit-content;\"\n class=\"cqa-min-w-fit cqa-flex-shrink-0 cqa-whitespace-nowrap cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px]\">AI Agent</span>\n <div\n *ngIf=\"eventType === 'ai-agent' && getActionDescription()\"\n class=\"cqa-ai-agent-unified-box cqa-min-w-0 cqa-flex-1\">\n <span\n class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px] !cqa-inline-flex cqa-items-center cqa-action-format cqa-ai-agent-unified-inner\"\n style=\"white-space: pre-wrap;\"\n [innerHTML]=\"getActionDescription()\"\n (click)=\"clickOnAction($event)\">\n </span>\n </div>\n <!-- Other step types: action HTML as before -->\n <span\n class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px] cqa-action-format cqa-align-middle cqa-min-w-0 cqa-flex-1\"\n *ngIf=\"eventType !== 'ai-agent' && getActionDescription()\"\n [innerHTML]=\"getActionDescription()\"\n (click)=\"clickOnAction($event)\">\n </span>\n <!-- <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px]\" *ngIf=\"getActionDescription()\">\n {{ getActionDescription() }}\n </span> -->\n\n <!-- Parameters -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-3\" *ngIf=\"false\">\n <!-- Navigate: URL as clickable trigger for Test Data modal -->\n <span *ngIf=\"eventType === 'navigate' && getNavigateUrlParameter()\" #testDataTrigger\n (click)=\"openTestDataModal($event)\"\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] cqa-cursor-pointer hover:cqa-opacity-90\">\n {{ getNavigateUrlParameter()?.value || getNavigateUrlParameter()?.displayValue }}\n </span>\n \n <!-- Other event types: loop through parameters (navigate excluded) -->\n <ng-container *ngFor=\"let param of parameters; let i = index\">\n <!-- Skip navigate parameters in the loop (already shown above) -->\n <ng-container *ngIf=\"eventType !== 'navigate'\">\n\n <!-- Type: First param (text value like {{username}}) -->\n <span *ngIf=\"eventType === 'type' && i === 0\" class=\"cqa-text-gray-900 cqa-text-sm\">\n {{ param.value }}\n </span>\n\n <!-- Type: \"into\" text -->\n <span *ngIf=\"eventType === 'type' && i === 0\" class=\"cqa-text-gray-900 cqa-text-sm\">\n into\n </span>\n\n <!-- Type: Second param (selector) -->\n <span *ngIf=\"eventType === 'type' && i === 1\"\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 {{ param.displayValue || param.value }}\n </span>\n\n <!-- Click: Selector input/display -->\n <span *ngIf=\"eventType === 'click' && param.name === 'element'\"\n #clickElementTrigger\n (click)=\"openElementPopup($event)\"\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-cursor-pointer cqa-bg-[#D8D9FC]\">\n {{ param.displayValue || param.value }}\n </span>\n\n <!-- Click: Suffix text (like \"if Present\") -->\n <span *ngIf=\"eventType === 'click' && param.name === 'suffix'\" class=\"cqa-text-gray-900 cqa-text-sm\">\n {{ param.value }}\n </span>\n\n <!-- Double Click: Selector input/display -->\n <span *ngIf=\"eventType === 'doubleClick' && i === 0\"\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 {{ param.displayValue || param.value }}\n </span>\n\n <!-- Press Enter: Selector input/display with HTML support -->\n <span *ngIf=\"eventType === 'pressEnter' && i === 0\"\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 [innerHTML]=\"param.displayValue || param.value\">\n </span>\n\n <!-- Enter: Value display with quotes (like click action) -->\n <span *ngIf=\"eventType === 'enter' && param.name === 'value'\"\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 {{ param.displayValue || param.value }}\n </span>\n\n <!-- Enter: \"in the\" text -->\n <span *ngIf=\"eventType === 'enter' && param.name === 'value'\" class=\"cqa-text-gray-900 cqa-text-sm\">\n in the\n </span>\n\n <!-- Enter: Label display with quotes (like click action) -->\n <span *ngIf=\"eventType === 'enter' && param.name === 'label'\"\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 {{ param.displayValue || param.value }}\n </span>\n\n <!-- Enter: \"field\" text -->\n <span *ngIf=\"eventType === 'enter' && param.name === 'label'\" class=\"cqa-text-gray-900 cqa-text-sm\">\n field\n </span>\n\n <!-- Wait: Duration input -->\n <input *ngIf=\"eventType === 'wait' && param.name === 'duration'\" type=\"number\" [value]=\"param.value\"\n (input)=\"onParameterChange(param, $any($event.target).value)\" placeholder=\"2\"\n class=\"cqa-w-16 cqa-px-2 cqa-py-1.5 cqa-rounded-lg cqa-border cqa-border-solid cqa-border-[#9E9EE3] cqa-bg-[#D1C4E9] cqa-text-[#3F43EE] cqa-text-sm cqa-font-medium cqa-outline-none focus:cqa-ring-2 focus:cqa-ring-[#3F43EE] focus:cqa-ring-opacity-50\" />\n <span *ngIf=\"eventType === 'wait' && param.name === 'duration'\" class=\"cqa-text-gray-900 cqa-text-sm\">\n seconds\n </span>\n\n <!-- Wait: Element selector -->\n <span *ngIf=\"eventType === 'wait' && param.name === 'element'\" class=\"cqa-text-gray-900 cqa-text-sm\">\n for element\n </span>\n <span *ngIf=\"eventType === 'wait' && param.name === 'element'\" \n #elementTrigger\n (click)=\"openElementPopup($event)\"\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-cursor-pointer cqa-bg-[#D8D9FC]\">\n {{ param.displayValue || param.value }}\n </span>\n <span *ngIf=\"eventType === 'wait' && param.name === 'element'\" class=\"cqa-text-gray-900 cqa-text-sm\">\n to be visible\n </span>\n\n <!-- Custom: Description (clickable to open Step Description modal; pass $event so modal opens below this trigger) -->\n <span *ngIf=\"eventType === 'custom'\" #descriptionTrigger\n (click)=\"openStepDescriptionModal($event)\"\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] cqa-cursor-pointer hover:cqa-opacity-90\"\n [innerHTML]=\"param.displayValue || param.value\">\n </span>\n\n <!-- AI Agent: Instructions -->\n <span *ngIf=\"eventType === 'ai-agent'\"\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 {{ param.displayValue || param.value }}\n </span>\n </ng-container>\n </ng-container>\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-ml-auto cqa-self-center\">\n <span *ngIf=\"config?.shouldSkip\" 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] cqa-flex-shrink-0\">Skipped</span>\n <!-- Action Icons: Edit, Link, Duplicate, Delete (show on hover; hidden when step is inside step-group) - placed first -->\n <div *ngIf=\"editable && !isInsideStepGroup && !isReorder\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-1.5 cqa-pr-2\">\n <button type=\"button\" #editTrigger (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\" stroke-linejoin=\"round\"/>\n <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\"/>\n </svg>\n </button>\n <!-- Skip / Unskip (after Edit icon) -->\n <button\n type=\"button\"\n (click)=\"onSkipToggle(); $event.stopPropagation()\"\n [disabled]=\"isParentSkipped\"\n [attr.title]=\"isParentSkipped ? 'Cannot change skip while parent step is skipped' : (config?.shouldSkip ? 'Unskip step' : 'Skip step')\"\n [style.color]=\"config?.shouldSkip ? '#1447E6' : null\"\n class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6] disabled:cqa-opacity-50 disabled:cqa-cursor-not-allowed\"\n >\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M8.25 8.75C9.2165 8.75 10 7.9665 10 7C10 6.0335 9.2165 5.25 8.25 5.25C7.2835 5.25 6.5 6.0335 6.5 7C6.5 7.9665 7.2835 8.75 8.25 8.75Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M8.75033 2.91663H5.25033C2.99516 2.91663 1.16699 4.7448 1.16699 6.99996C1.16699 9.25512 2.99516 11.0833 5.25033 11.0833H8.75033C11.0055 11.0833 12.8337 9.25512 12.8337 6.99996C12.8337 4.7448 11.0055 2.91663 8.75033 2.91663Z\" 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\" 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=\"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\"/>\n <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\"/>\n <path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button> -->\n <button\n type=\"button\"\n (click)=\"onDuplicate(); $event.stopPropagation()\"\n [disabled]=\"isDuplicating\"\n [attr.title]=\"isDuplicating ? 'Duplicating...' : 'Duplicate'\"\n class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6] disabled:cqa-opacity-60 disabled:cqa-cursor-not-allowed\"\n >\n <svg *ngIf=\"!isDuplicating\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <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\"/>\n <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\"/>\n </svg>\n <svg *ngIf=\"isDuplicating\" width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-label=\"Duplicating\">\n <circle cx=\"8\" cy=\"8\" r=\"6\" stroke=\"currentColor\" stroke-opacity=\"0.2\" stroke-width=\"2\"></circle>\n <path d=\"M14 8A6 6 0 0 0 8 2\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\">\n <animateTransform attributeName=\"transform\" type=\"rotate\" from=\"0 8 8\" to=\"360 8 8\" dur=\"0.8s\" repeatCount=\"indefinite\"/>\n </path>\n </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\">\n <path d=\"M1.75 3.5H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <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\"/>\n <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\"/>\n <path d=\"M5.83398 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M8.16602 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n </div>\n\n <!-- View Details Link (show only if description is not empty) -->\n <a *ngIf=\"config.description && config.description.trim() !== ''\" #viewDetailsTrigger href=\"#\" (click)=\"onViewDetails($event)\" class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-1 cqa-no-underline\">View Details<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></a>\n\n <!-- Created Date (from API) - last so aligned across all steps, format: 25 Feb 2026 -->\n <span *ngIf=\"config.createdDate\" class=\"step-date cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px] cqa-ml-auto cqa-flex-shrink-0\">\n {{ config.createdDate | date:'d MMM yyyy' }}\n </span>\n </div>\n</div>", styles: [".step-actions{opacity:0;transition:opacity .15s ease}.step-row:hover .step-actions{opacity:1}.step-row{vertical-align:middle;letter-spacing:normal}\n"], 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"] }], pipes: { "date": i2.DatePipe } });
29716
29719
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseNormalStepComponent, decorators: [{
29717
29720
  type: Component,
29718
- args: [{ selector: 'cqa-test-case-normal-step', host: { class: 'cqa-ui-root' }, styles: [STEP_ROW_ACTIONS_STYLES], template: "<div\n [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 cqa-pr-4' + ((config?.shouldSkip || isParentSkipped) ? ' cqa-step-skipped' : '')\"\n [style.opacity]=\"(config?.shouldSkip || isParentSkipped) ? '0.6' : null\"\n [style.padding-left.px]=\"getRowPaddingLeftPx()\"\n [style.border-top]=\"isInsideStepGroup ? '1px solid #BEDBFF' : '1px solid #E5E7EB'\"\n style=\"border-bottom: 1px solid #E5E7EB;\">\n\n <div *ngIf=\"!isInsideStepGroup\" class=\"cqa-inline-flex cqa-items-center\">\n <!-- Drag Handle Icon (when isReorder is true and not inside step group - steps inside step groups cannot be reordered) -->\n <div *ngIf=\"isReorder && !isInsideStepGroup\" 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, editable, and not inside step group - hide for steps inside step groups) -->\n <label *ngIf=\"editable && !isReorder && !isInsideStepGroup\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative cqa-mr-2\">\n <input type=\"checkbox\"\n [ngModel]=\"selected\"\n [disabled]=\"disabled\"\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\" />\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 </div>\n <div *ngIf=\"isInsideStepGroup\" class=\"cqa-flex cqa-flex-shrink-0 cqa-items-center cqa-pl-0 cqa-pr-1 cqa-text-[#9CA3AF]\" aria-hidden=\"true\" title=\"Step is inside a group\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M11.9998 5.66667H11.3332V4.33333C11.3332 2.49333 9.83984 1 7.99984 1C6.15984 1 4.6665 2.49333 4.6665 4.33333V5.66667H3.99984C3.2665 5.66667 2.6665 6.26667 2.6665 7V13.6667C2.6665 14.4 3.2665 15 3.99984 15H11.9998C12.7332 15 13.3332 14.4 13.3332 13.6667V7C13.3332 6.26667 12.7332 5.66667 11.9998 5.66667ZM5.99984 4.33333C5.99984 3.22667 6.89317 2.33333 7.99984 2.33333C9.1065 2.33333 9.99984 3.22667 9.99984 4.33333V5.66667H5.99984V4.33333ZM11.9998 13.6667H3.99984V7H11.9998V13.6667ZM7.99984 11.6667C8.73317 11.6667 9.33317 11.0667 9.33317 10.3333C9.33317 9.6 8.73317 9 7.99984 9C7.2665 9 6.6665 9.6 6.6665 10.3333C6.6665 11.0667 7.2665 11.6667 7.99984 11.6667Z\" fill=\"currentColor\"/>\n </svg>\n </div>\n\n <!-- Step Number -->\n <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px] cqa-min-w-[32px]\">\n {{ stepNumber }}\n </span>\n\n <!-- Event Type Selector (Pill Button) #### (click)=\"toggleEventTypeDropdown(); $event.stopPropagation()\" -->\n <div class=\"cqa-relative\" #dropdownContainer>\n <button type=\"button\" \n [attr.title]=\"getCurrentEventTypeConfig().label\"\n [style.background-color]=\"getCurrentEventTypeConfig().backgroundColor\"\n [style.color]=\"getCurrentEventTypeConfig().color\"\n class=\"cqa-w-8 cqa-h-8 cqa-rounded-lg cqa-flex cqa-items-center cqa-justify-center cqa-flex-shrink-0 cqa-cursor-pointer\">\n <!-- Icon -->\n <span *ngIf=\"getCurrentEventTypeConfig().icon === 'paper_plane'\">\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 6.41663L12.8333 1.16663L7.58333 12.25L6.41667 7.58329L1.75 6.41663Z\" stroke=\"currentColor\"\n stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </span>\n <span *ngIf=\"getCurrentEventTypeConfig().icon === 'star'\">\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.797 9.04165C5.74492 8.83977 5.63969 8.65554 5.49227 8.50812C5.34485 8.3607 5.16062 8.25548 4.95875 8.2034L1.38 7.28057C1.31894 7.26324 1.2652 7.22646 1.22694 7.17583C1.18867 7.12519 1.16797 7.06345 1.16797 6.99998C1.16797 6.93651 1.18867 6.87478 1.22694 6.82414C1.2652 6.7735 1.31894 6.73673 1.38 6.7194L4.95875 5.79598C5.16055 5.74395 5.34473 5.63882 5.49215 5.49151C5.63956 5.34419 5.74483 5.16008 5.797 4.95832L6.71983 1.37957C6.73698 1.31827 6.77372 1.26427 6.82443 1.2258C6.87515 1.18733 6.93705 1.1665 7.0007 1.1665C7.06436 1.1665 7.12626 1.18733 7.17698 1.2258C7.22769 1.26427 7.26442 1.31827 7.28158 1.37957L8.20383 4.95832C8.25591 5.16019 8.36113 5.34442 8.50855 5.49184C8.65597 5.63926 8.8402 5.74449 9.04208 5.79657L12.6208 6.71882C12.6824 6.73579 12.7366 6.77249 12.7753 6.82328C12.814 6.87407 12.8349 6.93614 12.8349 6.99998C12.8349 7.06382 12.814 7.1259 12.7753 7.17669C12.7366 7.22748 12.6824 7.26417 12.6208 7.28115L9.04208 8.2034C8.8402 8.25548 8.65597 8.3607 8.50855 8.50812C8.36113 8.65554 8.25591 8.83977 8.20383 9.04165L7.281 12.6204C7.26384 12.6817 7.22711 12.7357 7.17639 12.7742C7.12568 12.8126 7.06377 12.8335 7.00012 12.8335C6.93647 12.8335 6.87456 12.8126 6.82385 12.7742C6.77314 12.7357 6.7364 12.6817 6.71925 12.6204L5.797 9.04165Z\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M11.666 1.75V4.08333\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M12.8333 2.91663H10.5\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M2.33398 9.91663V11.0833\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M2.91667 10.5H1.75\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </span>\n <span *ngIf=\"getCurrentEventTypeConfig().icon === 'T'\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M2.33398 4.08325V2.33325H11.6673V4.08325\" stroke=\"currentColor\" stroke-width=\"1.16667\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M5.25 11.6667H8.75\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M7 2.33325V11.6666\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </span>\n <span *ngIf=\"getCurrentEventTypeConfig().icon === 'cursor'\">\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 1.75L5.87417 11.6492L7.33833 7.33833L11.6492 5.87417L1.75 1.75Z\" stroke=\"currentColor\"\n stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M7.58398 7.58325L11.084 11.0833\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </span>\n <span *ngIf=\"getCurrentEventTypeConfig().icon === 'cursor-double'\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M8.16667 2.3916L7 3.49993\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.97487 4.66662L1.2832 4.19995\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M3.50091 7L2.39258 8.16667\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.19922 1.28345L4.66589 2.97511\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M5.27114 5.65255C5.24852 5.59926 5.24234 5.54043 5.25338 5.48361C5.26443 5.42678 5.2922 5.37455 5.33313 5.33362C5.37407 5.29269 5.4263 5.26492 5.48312 5.25387C5.53994 5.24283 5.59877 5.24901 5.65206 5.27163L12.0687 7.89663C12.1258 7.92006 12.174 7.961 12.2064 8.01357C12.2388 8.06613 12.2536 8.12761 12.2488 8.18915C12.244 8.25069 12.2198 8.30912 12.1797 8.35603C12.1396 8.40295 12.0856 8.43592 12.0256 8.45021L9.48864 9.05746C9.38391 9.08248 9.28815 9.13599 9.21196 9.21208C9.13578 9.28816 9.08213 9.38385 9.05698 9.48855L8.45031 12.026C8.43617 12.0863 8.40323 12.1405 8.35626 12.1808C8.30928 12.2211 8.25071 12.2454 8.189 12.2502C8.1273 12.255 8.06567 12.2401 8.01302 12.2075C7.96037 12.175 7.91944 12.1266 7.89614 12.0692L5.27114 5.65255Z\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </span>\n <span *ngIf=\"getCurrentEventTypeConfig().icon === 'enter'\" class=\"cqa-enter-key-icon cqa-inline-flex cqa-flex-shrink-0\" style=\"width: 20px; height: 20px;\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 32 32\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-w-full cqa-h-full\">\n <path fill=\"#6B7280\" transform=\"translate(14,5)\" d=\"M0 0 C4.29 0 8.58 0 13 0 C13 7.26 13 14.52 13 22 C5.74 22 -1.52 22 -9 22 C-9 16.72 -9 11.44 -9 6 C-6.03 6 -3.06 6 0 6 C0 4.02 0 2.04 0 0 Z M2 2 C2 3.98 2 5.96 2 8 C-0.97 8 -3.94 8 -7 8 C-7 11.96 -7 15.92 -7 20 C-1.06 20 4.88 20 11 20 C11 14.06 11 8.12 11 2 C8.03 2 5.06 2 2 2 Z\"/>\n <path fill=\"#6B7280\" transform=\"translate(19,13)\" d=\"M0 0 C0.66 0 1.32 0 2 0 C2 2.31 2 4.62 2 7 C0.02 7 -1.96 7 -4 7 C-4.33 8.32 -4.66 9.64 -5 11 C-6.65 9.68 -8.3 8.36 -10 7 C-8.63016497 3.83884224 -8.0109362 3.0072908 -5 1 C-4.67 2.32 -4.34 3.64 -4 5 C-2.68 5 -1.36 5 0 5 C0 3.35 0 1.7 0 0 Z\"/>\n </svg>\n </span>\n <span *ngIf=\"getCurrentEventTypeConfig().icon === 'clock'\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M6.99935 12.8334C10.221 12.8334 12.8327 10.2217 12.8327 7.00008C12.8327 3.77842 10.221 1.16675 6.99935 1.16675C3.77769 1.16675 1.16602 3.77842 1.16602 7.00008C1.16602 10.2217 3.77769 12.8334 6.99935 12.8334Z\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M7 3.5V7L9.33333 8.16667\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </span>\n <span *ngIf=\"getCurrentEventTypeConfig().icon === 'settings'\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M7 4.66667C5.71133 4.66667 4.66667 5.71133 4.66667 7C4.66667 8.28867 5.71133 9.33333 7 9.33333C8.28867 9.33333 9.33333 8.28867 9.33333 7C9.33333 5.71133 8.28867 4.66667 7 4.66667Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M11.0833 7.58333C11.1417 7.29167 11.1417 6.70833 11.0833 6.41667L12.25 5.83333C12.4167 5.70833 12.4833 5.48333 12.4167 5.25L11.6667 3.41667C11.6 3.18333 11.3917 3.04167 11.1417 3.04167L9.91667 3.5C9.56667 3.20833 9.19167 2.95833 8.75 2.79167L8.4 1.45833C8.34167 1.225 8.14167 1.16667 7.93333 1.16667H6.06667C5.85833 1.16667 5.65833 1.225 5.6 1.45833L5.25 2.79167C4.80833 2.95833 4.43333 3.20833 4.08333 3.5L2.85833 3.04167C2.60833 3.04167 2.4 3.18333 2.33333 3.41667L1.58333 5.25C1.51667 5.48333 1.58333 5.70833 1.75 5.83333L2.91667 6.41667C2.85833 6.70833 2.85833 7.29167 2.91667 7.58333L1.75 8.16667C1.58333 8.29167 1.51667 8.51667 1.58333 8.75L2.33333 10.5833C2.4 10.8167 2.60833 10.9583 2.85833 10.9583L4.08333 10.5C4.43333 10.7917 4.80833 11.0417 5.25 11.2083L5.6 12.5417C5.65833 12.775 5.85833 12.8333 6.06667 12.8333H7.93333C8.14167 12.8333 8.34167 12.775 8.4 12.5417L8.75 11.2083C9.19167 11.0417 9.56667 10.7917 9.91667 10.5L11.1417 10.9583C11.3917 10.9583 11.6 10.8167 11.6667 10.5833L12.4167 8.75C12.4833 8.51667 12.4167 8.29167 12.25 8.16667L11.0833 7.58333Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </span>\n <span *ngIf=\"getCurrentEventTypeConfig().icon === 'check'\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M11.6667 3.5L5.25 10.5L2.33333 7.58333\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </span>\n\n <!-- Label (show only when no icon; all types have icon now \u2013 tooltip on button) -->\n <span *ngIf=\"!getCurrentEventTypeConfig().icon\" class=\"cqa-text-[#432DD7] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium\">{{\n getCurrentEventTypeConfig().label }}</span>\n </button>\n\n <!-- Dropdown Menu -->\n <div *ngIf=\"eventTypeDropdownOpen\" (click)=\"$event.stopPropagation()\"\n class=\"cqa-absolute cqa-top-full cqa-left-0 cqa-mt-1 cqa-bg-white cqa-rounded-lg cqa-shadow-lg cqa-border cqa-border-gray-200 cqa-z-50 cqa-min-w-[150px] cqa-py-1\">\n <button *ngFor=\"let etc of eventTypeConfigs\" type=\"button\" (click)=\"onEventTypeSelect(etc.type)\"\n [class.cqa-bg-primary-50]=\"eventType === etc.type\"\n class=\"cqa-w-full cqa-px-3 cqa-py-2 cqa-text-left cqa-flex cqa-items-center cqa-gap-2 hover:cqa-bg-gray-50 cqa-transition-colors\">\n <span *ngIf=\"etc.icon === 'paper_plane'\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M1 5.5L11 1M11 1L7.5 11L6 6.5L1 5.5M11 1L1 5.5\" stroke=\"currentColor\" stroke-width=\"1.5\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </span>\n <span *ngIf=\"etc.icon === 'star'\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M6 1L7.5 4.5L11 5L7.5 5.5L6 9L4.5 5.5L1 5L4.5 4.5L6 1Z\" fill=\"currentColor\" />\n </svg>\n </span>\n <span *ngIf=\"etc.icon === 'T'\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M2.33398 4.08325V2.33325H11.6673V4.08325\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M5.25 11.6667H8.75\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M7 2.33325V11.6666\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </span>\n <span *ngIf=\"etc.icon === 'cursor'\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M2 2L9 1L10 8L7 7L5 9L4 7L2 2Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </span>\n <span *ngIf=\"etc.icon === 'cursor-double'\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M8.16667 2.3916L7 3.49993\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.97487 4.66662L1.2832 4.19995\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M3.50091 7L2.39258 8.16667\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.19922 1.28345L4.66589 2.97511\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M5.27114 5.65255C5.24852 5.59926 5.24234 5.54043 5.25338 5.48361C5.26443 5.42678 5.2922 5.37455 5.33313 5.33362C5.37407 5.29269 5.4263 5.26492 5.48312 5.25387C5.53994 5.24283 5.59877 5.24901 5.65206 5.27163L12.0687 7.89663C12.1258 7.92006 12.174 7.961 12.2064 8.01357C12.2388 8.06613 12.2536 8.12761 12.2488 8.18915C12.244 8.25069 12.2198 8.30912 12.1797 8.35603C12.1396 8.40295 12.0856 8.43592 12.0256 8.45021L9.48864 9.05746C9.38391 9.08248 9.28815 9.13599 9.21196 9.21208C9.13578 9.28816 9.08213 9.38385 9.05698 9.48855L8.45031 12.026C8.43617 12.0863 8.40323 12.1405 8.35626 12.1808C8.30928 12.2211 8.25071 12.2454 8.189 12.2502C8.1273 12.255 8.06567 12.2401 8.01302 12.2075C7.96037 12.175 7.91944 12.1266 7.89614 12.0692L5.27114 5.65255Z\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg> \n </span>\n <span *ngIf=\"etc.icon === 'enter'\" class=\"cqa-enter-key-icon cqa-inline-flex cqa-flex-shrink-0\" style=\"width: 16px; height: 16px;\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 32 32\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-w-full cqa-h-full\">\n <path fill=\"#6B7280\" transform=\"translate(14,5)\" d=\"M0 0 C4.29 0 8.58 0 13 0 C13 7.26 13 14.52 13 22 C5.74 22 -1.52 22 -9 22 C-9 16.72 -9 11.44 -9 6 C-6.03 6 -3.06 6 0 6 C0 4.02 0 2.04 0 0 Z M2 2 C2 3.98 2 5.96 2 8 C-0.97 8 -3.94 8 -7 8 C-7 11.96 -7 15.92 -7 20 C-1.06 20 4.88 20 11 20 C11 14.06 11 8.12 11 2 C8.03 2 5.06 2 2 2 Z\"/>\n <path fill=\"#6B7280\" transform=\"translate(19,13)\" d=\"M0 0 C0.66 0 1.32 0 2 0 C2 2.31 2 4.62 2 7 C0.02 7 -1.96 7 -4 7 C-4.33 8.32 -4.66 9.64 -5 11 C-6.65 9.68 -8.3 8.36 -10 7 C-8.63016497 3.83884224 -8.0109362 3.0072908 -5 1 C-4.67 2.32 -4.34 3.64 -4 5 C-2.68 5 -1.36 5 0 5 C0 3.35 0 1.7 0 0 Z\"/>\n </svg>\n </span>\n <span *ngIf=\"etc.icon === 'clock'\">\n <svg 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\" />\n <path d=\"M6 3V6L8 7\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" />\n </svg>\n </span>\n <span *ngIf=\"etc.icon === 'settings'\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M7 4.66667C5.71133 4.66667 4.66667 5.71133 4.66667 7C4.66667 8.28867 5.71133 9.33333 7 9.33333C8.28867 9.33333 9.33333 8.28867 9.33333 7C9.33333 5.71133 8.28867 4.66667 7 4.66667Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M11.0833 7.58333C11.1417 7.29167 11.1417 6.70833 11.0833 6.41667L12.25 5.83333C12.4167 5.70833 12.4833 5.48333 12.4167 5.25L11.6667 3.41667C11.6 3.18333 11.3917 3.04167 11.1417 3.04167L9.91667 3.5C9.56667 3.20833 9.19167 2.95833 8.75 2.79167L8.4 1.45833C8.34167 1.225 8.14167 1.16667 7.93333 1.16667H6.06667C5.85833 1.16667 5.65833 1.225 5.6 1.45833L5.25 2.79167C4.80833 2.95833 4.43333 3.20833 4.08333 3.5L2.85833 3.04167C2.60833 3.04167 2.4 3.18333 2.33333 3.41667L1.58333 5.25C1.51667 5.48333 1.58333 5.70833 1.75 5.83333L2.91667 6.41667C2.85833 6.70833 2.85833 7.29167 2.91667 7.58333L1.75 8.16667C1.58333 8.29167 1.51667 8.51667 1.58333 8.75L2.33333 10.5833C2.4 10.8167 2.60833 10.9583 2.85833 10.9583L4.08333 10.5C4.43333 10.7917 4.80833 11.0417 5.25 11.2083L5.6 12.5417C5.65833 12.775 5.85833 12.8333 6.06667 12.8333H7.93333C8.14167 12.8333 8.34167 12.775 8.4 12.5417L8.75 11.2083C9.19167 11.0417 9.56667 10.7917 9.91667 10.5L11.1417 10.9583C11.3917 10.9583 11.6 10.8167 11.6667 10.5833L12.4167 8.75C12.4833 8.51667 12.4167 8.29167 12.25 8.16667L11.0833 7.58333Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </span>\n <span *ngIf=\"etc.icon === 'check'\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M11.6667 3.5L5.25 10.5L2.33333 7.58333\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </span>\n <span>{{ etc.label }}</span>\n </button>\n </div>\n </div>\n\n <!-- AI Agent: single cohesive box for action line + task content (ai_task) -->\n <div\n *ngIf=\"eventType === 'ai-agent' && getActionDescription()\"\n class=\"cqa-ai-agent-unified-box cqa-min-w-0 cqa-flex-1\">\n <span\n class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px] !cqa-inline-flex cqa-items-center cqa-action-format cqa-ai-agent-unified-inner\"\n style=\"white-space: pre-wrap;\"\n [innerHTML]=\"getActionDescription()\"\n (click)=\"clickOnAction($event)\">\n </span>\n </div>\n <!-- Other step types: action HTML as before -->\n <span\n class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px] cqa-action-format cqa-align-middle cqa-min-w-0 cqa-flex-1\"\n *ngIf=\"eventType !== 'ai-agent' && getActionDescription()\"\n [innerHTML]=\"getActionDescription()\"\n (click)=\"clickOnAction($event)\">\n </span>\n <!-- <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px]\" *ngIf=\"getActionDescription()\">\n {{ getActionDescription() }}\n </span> -->\n\n <!-- Parameters -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-3\" *ngIf=\"false\">\n <!-- Navigate: URL as clickable trigger for Test Data modal -->\n <span *ngIf=\"eventType === 'navigate' && getNavigateUrlParameter()\" #testDataTrigger\n (click)=\"openTestDataModal($event)\"\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] cqa-cursor-pointer hover:cqa-opacity-90\">\n {{ getNavigateUrlParameter()?.value || getNavigateUrlParameter()?.displayValue }}\n </span>\n \n <!-- Other event types: loop through parameters (navigate excluded) -->\n <ng-container *ngFor=\"let param of parameters; let i = index\">\n <!-- Skip navigate parameters in the loop (already shown above) -->\n <ng-container *ngIf=\"eventType !== 'navigate'\">\n\n <!-- Type: First param (text value like {{username}}) -->\n <span *ngIf=\"eventType === 'type' && i === 0\" class=\"cqa-text-gray-900 cqa-text-sm\">\n {{ param.value }}\n </span>\n\n <!-- Type: \"into\" text -->\n <span *ngIf=\"eventType === 'type' && i === 0\" class=\"cqa-text-gray-900 cqa-text-sm\">\n into\n </span>\n\n <!-- Type: Second param (selector) -->\n <span *ngIf=\"eventType === 'type' && i === 1\"\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 {{ param.displayValue || param.value }}\n </span>\n\n <!-- Click: Selector input/display -->\n <span *ngIf=\"eventType === 'click' && param.name === 'element'\"\n #clickElementTrigger\n (click)=\"openElementPopup($event)\"\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-cursor-pointer cqa-bg-[#D8D9FC]\">\n {{ param.displayValue || param.value }}\n </span>\n\n <!-- Click: Suffix text (like \"if Present\") -->\n <span *ngIf=\"eventType === 'click' && param.name === 'suffix'\" class=\"cqa-text-gray-900 cqa-text-sm\">\n {{ param.value }}\n </span>\n\n <!-- Double Click: Selector input/display -->\n <span *ngIf=\"eventType === 'doubleClick' && i === 0\"\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 {{ param.displayValue || param.value }}\n </span>\n\n <!-- Press Enter: Selector input/display with HTML support -->\n <span *ngIf=\"eventType === 'pressEnter' && i === 0\"\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 [innerHTML]=\"param.displayValue || param.value\">\n </span>\n\n <!-- Enter: Value display with quotes (like click action) -->\n <span *ngIf=\"eventType === 'enter' && param.name === 'value'\"\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 {{ param.displayValue || param.value }}\n </span>\n\n <!-- Enter: \"in the\" text -->\n <span *ngIf=\"eventType === 'enter' && param.name === 'value'\" class=\"cqa-text-gray-900 cqa-text-sm\">\n in the\n </span>\n\n <!-- Enter: Label display with quotes (like click action) -->\n <span *ngIf=\"eventType === 'enter' && param.name === 'label'\"\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 {{ param.displayValue || param.value }}\n </span>\n\n <!-- Enter: \"field\" text -->\n <span *ngIf=\"eventType === 'enter' && param.name === 'label'\" class=\"cqa-text-gray-900 cqa-text-sm\">\n field\n </span>\n\n <!-- Wait: Duration input -->\n <input *ngIf=\"eventType === 'wait' && param.name === 'duration'\" type=\"number\" [value]=\"param.value\"\n (input)=\"onParameterChange(param, $any($event.target).value)\" placeholder=\"2\"\n class=\"cqa-w-16 cqa-px-2 cqa-py-1.5 cqa-rounded-lg cqa-border cqa-border-solid cqa-border-[#9E9EE3] cqa-bg-[#D1C4E9] cqa-text-[#3F43EE] cqa-text-sm cqa-font-medium cqa-outline-none focus:cqa-ring-2 focus:cqa-ring-[#3F43EE] focus:cqa-ring-opacity-50\" />\n <span *ngIf=\"eventType === 'wait' && param.name === 'duration'\" class=\"cqa-text-gray-900 cqa-text-sm\">\n seconds\n </span>\n\n <!-- Wait: Element selector -->\n <span *ngIf=\"eventType === 'wait' && param.name === 'element'\" class=\"cqa-text-gray-900 cqa-text-sm\">\n for element\n </span>\n <span *ngIf=\"eventType === 'wait' && param.name === 'element'\" \n #elementTrigger\n (click)=\"openElementPopup($event)\"\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-cursor-pointer cqa-bg-[#D8D9FC]\">\n {{ param.displayValue || param.value }}\n </span>\n <span *ngIf=\"eventType === 'wait' && param.name === 'element'\" class=\"cqa-text-gray-900 cqa-text-sm\">\n to be visible\n </span>\n\n <!-- Custom: Description (clickable to open Step Description modal; pass $event so modal opens below this trigger) -->\n <span *ngIf=\"eventType === 'custom'\" #descriptionTrigger\n (click)=\"openStepDescriptionModal($event)\"\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] cqa-cursor-pointer hover:cqa-opacity-90\"\n [innerHTML]=\"param.displayValue || param.value\">\n </span>\n\n <!-- AI Agent: Instructions -->\n <span *ngIf=\"eventType === 'ai-agent'\"\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 {{ param.displayValue || param.value }}\n </span>\n </ng-container>\n </ng-container>\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-ml-auto cqa-self-center\">\n <span *ngIf=\"config?.shouldSkip\" 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] cqa-flex-shrink-0\">Skipped</span>\n <!-- Action Icons: Edit, Link, Duplicate, Delete (show on hover; hidden when step is inside step-group) - placed first -->\n <div *ngIf=\"editable && !isInsideStepGroup && !isReorder\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-1.5 cqa-pr-2\">\n <button type=\"button\" #editTrigger (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\" stroke-linejoin=\"round\"/>\n <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\"/>\n </svg>\n </button>\n <!-- Skip / Unskip (after Edit icon) -->\n <button\n type=\"button\"\n (click)=\"onSkipToggle(); $event.stopPropagation()\"\n [disabled]=\"isParentSkipped\"\n [attr.title]=\"isParentSkipped ? 'Cannot change skip while parent step is skipped' : (config?.shouldSkip ? 'Unskip step' : 'Skip step')\"\n [style.color]=\"config?.shouldSkip ? '#1447E6' : null\"\n class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6] disabled:cqa-opacity-50 disabled:cqa-cursor-not-allowed\"\n >\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M8.25 8.75C9.2165 8.75 10 7.9665 10 7C10 6.0335 9.2165 5.25 8.25 5.25C7.2835 5.25 6.5 6.0335 6.5 7C6.5 7.9665 7.2835 8.75 8.25 8.75Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M8.75033 2.91663H5.25033C2.99516 2.91663 1.16699 4.7448 1.16699 6.99996C1.16699 9.25512 2.99516 11.0833 5.25033 11.0833H8.75033C11.0055 11.0833 12.8337 9.25512 12.8337 6.99996C12.8337 4.7448 11.0055 2.91663 8.75033 2.91663Z\" 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\" 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=\"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\"/>\n <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\"/>\n <path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button> -->\n <button\n type=\"button\"\n (click)=\"onDuplicate(); $event.stopPropagation()\"\n [disabled]=\"isDuplicating\"\n [attr.title]=\"isDuplicating ? 'Duplicating...' : 'Duplicate'\"\n class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6] disabled:cqa-opacity-60 disabled:cqa-cursor-not-allowed\"\n >\n <svg *ngIf=\"!isDuplicating\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <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\"/>\n <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\"/>\n </svg>\n <svg *ngIf=\"isDuplicating\" width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-label=\"Duplicating\">\n <circle cx=\"8\" cy=\"8\" r=\"6\" stroke=\"currentColor\" stroke-opacity=\"0.2\" stroke-width=\"2\"></circle>\n <path d=\"M14 8A6 6 0 0 0 8 2\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\">\n <animateTransform attributeName=\"transform\" type=\"rotate\" from=\"0 8 8\" to=\"360 8 8\" dur=\"0.8s\" repeatCount=\"indefinite\"/>\n </path>\n </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\">\n <path d=\"M1.75 3.5H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <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\"/>\n <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\"/>\n <path d=\"M5.83398 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M8.16602 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n </div>\n\n <!-- View Details Link (show only if description is not empty) -->\n <a *ngIf=\"config.description && config.description.trim() !== ''\" #viewDetailsTrigger href=\"#\" (click)=\"onViewDetails($event)\" class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-1 cqa-no-underline\">View Details<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></a>\n\n <!-- Created Date (from API) - last so aligned across all steps, format: 25 Feb 2026 -->\n <span *ngIf=\"config.createdDate\" class=\"step-date cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px] cqa-ml-auto cqa-flex-shrink-0\">\n {{ config.createdDate | date:'d MMM yyyy' }}\n </span>\n </div>\n</div>" }]
29721
+ args: [{ selector: 'cqa-test-case-normal-step', host: { class: 'cqa-ui-root' }, styles: [STEP_ROW_ACTIONS_STYLES], template: "<div\n [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 cqa-pr-4' + ((config?.shouldSkip || isParentSkipped) ? ' cqa-step-skipped' : '')\"\n [style.opacity]=\"(config?.shouldSkip || isParentSkipped) ? '0.6' : null\"\n [style.padding-left.px]=\"getRowPaddingLeftPx()\"\n [style.border-top]=\"isInsideStepGroup ? '1px solid #BEDBFF' : '1px solid #E5E7EB'\"\n style=\"border-bottom: 1px solid #E5E7EB;\">\n\n <div *ngIf=\"!isInsideStepGroup\" class=\"cqa-inline-flex cqa-items-center\">\n <!-- Drag Handle Icon (when isReorder is true and not inside step group - steps inside step groups cannot be reordered) -->\n <div *ngIf=\"isReorder && !isInsideStepGroup\" 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, editable, and not inside step group - hide for steps inside step groups) -->\n <label *ngIf=\"editable && !isReorder && !isInsideStepGroup\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative cqa-mr-2\">\n <input type=\"checkbox\"\n [ngModel]=\"selected\"\n [disabled]=\"disabled\"\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\" />\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 </div>\n <div *ngIf=\"isInsideStepGroup\" class=\"cqa-flex cqa-flex-shrink-0 cqa-items-center cqa-pl-0 cqa-pr-1 cqa-text-[#9CA3AF]\" aria-hidden=\"true\" title=\"Step is inside a group\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M11.9998 5.66667H11.3332V4.33333C11.3332 2.49333 9.83984 1 7.99984 1C6.15984 1 4.6665 2.49333 4.6665 4.33333V5.66667H3.99984C3.2665 5.66667 2.6665 6.26667 2.6665 7V13.6667C2.6665 14.4 3.2665 15 3.99984 15H11.9998C12.7332 15 13.3332 14.4 13.3332 13.6667V7C13.3332 6.26667 12.7332 5.66667 11.9998 5.66667ZM5.99984 4.33333C5.99984 3.22667 6.89317 2.33333 7.99984 2.33333C9.1065 2.33333 9.99984 3.22667 9.99984 4.33333V5.66667H5.99984V4.33333ZM11.9998 13.6667H3.99984V7H11.9998V13.6667ZM7.99984 11.6667C8.73317 11.6667 9.33317 11.0667 9.33317 10.3333C9.33317 9.6 8.73317 9 7.99984 9C7.2665 9 6.6665 9.6 6.6665 10.3333C6.6665 11.0667 7.2665 11.6667 7.99984 11.6667Z\" fill=\"currentColor\"/>\n </svg>\n </div>\n\n <!-- Step Number -->\n <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px] cqa-min-w-[32px]\">\n {{ stepNumber }}\n </span>\n\n <!-- Event Type Selector (Pill Button) #### (click)=\"toggleEventTypeDropdown(); $event.stopPropagation()\" -->\n <div class=\"cqa-relative\" #dropdownContainer>\n <button type=\"button\" \n [attr.title]=\"getCurrentEventTypeConfig().label\"\n [style.background-color]=\"getCurrentEventTypeConfig().backgroundColor\"\n [style.color]=\"getCurrentEventTypeConfig().color\"\n class=\"cqa-w-8 cqa-h-8 cqa-rounded-lg cqa-flex cqa-items-center cqa-justify-center cqa-flex-shrink-0 cqa-cursor-pointer\">\n <!-- Icon -->\n <span *ngIf=\"getCurrentEventTypeConfig().icon === 'paper_plane'\">\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 6.41663L12.8333 1.16663L7.58333 12.25L6.41667 7.58329L1.75 6.41663Z\" stroke=\"currentColor\"\n stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </span>\n <span *ngIf=\"getCurrentEventTypeConfig().icon === 'star'\">\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.797 9.04165C5.74492 8.83977 5.63969 8.65554 5.49227 8.50812C5.34485 8.3607 5.16062 8.25548 4.95875 8.2034L1.38 7.28057C1.31894 7.26324 1.2652 7.22646 1.22694 7.17583C1.18867 7.12519 1.16797 7.06345 1.16797 6.99998C1.16797 6.93651 1.18867 6.87478 1.22694 6.82414C1.2652 6.7735 1.31894 6.73673 1.38 6.7194L4.95875 5.79598C5.16055 5.74395 5.34473 5.63882 5.49215 5.49151C5.63956 5.34419 5.74483 5.16008 5.797 4.95832L6.71983 1.37957C6.73698 1.31827 6.77372 1.26427 6.82443 1.2258C6.87515 1.18733 6.93705 1.1665 7.0007 1.1665C7.06436 1.1665 7.12626 1.18733 7.17698 1.2258C7.22769 1.26427 7.26442 1.31827 7.28158 1.37957L8.20383 4.95832C8.25591 5.16019 8.36113 5.34442 8.50855 5.49184C8.65597 5.63926 8.8402 5.74449 9.04208 5.79657L12.6208 6.71882C12.6824 6.73579 12.7366 6.77249 12.7753 6.82328C12.814 6.87407 12.8349 6.93614 12.8349 6.99998C12.8349 7.06382 12.814 7.1259 12.7753 7.17669C12.7366 7.22748 12.6824 7.26417 12.6208 7.28115L9.04208 8.2034C8.8402 8.25548 8.65597 8.3607 8.50855 8.50812C8.36113 8.65554 8.25591 8.83977 8.20383 9.04165L7.281 12.6204C7.26384 12.6817 7.22711 12.7357 7.17639 12.7742C7.12568 12.8126 7.06377 12.8335 7.00012 12.8335C6.93647 12.8335 6.87456 12.8126 6.82385 12.7742C6.77314 12.7357 6.7364 12.6817 6.71925 12.6204L5.797 9.04165Z\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M11.666 1.75V4.08333\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M12.8333 2.91663H10.5\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M2.33398 9.91663V11.0833\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M2.91667 10.5H1.75\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </span>\n <span *ngIf=\"getCurrentEventTypeConfig().icon === 'T'\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M2.33398 4.08325V2.33325H11.6673V4.08325\" stroke=\"currentColor\" stroke-width=\"1.16667\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M5.25 11.6667H8.75\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M7 2.33325V11.6666\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </span>\n <span *ngIf=\"getCurrentEventTypeConfig().icon === 'cursor'\">\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 1.75L5.87417 11.6492L7.33833 7.33833L11.6492 5.87417L1.75 1.75Z\" stroke=\"currentColor\"\n stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M7.58398 7.58325L11.084 11.0833\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </span>\n <span *ngIf=\"getCurrentEventTypeConfig().icon === 'cursor-double'\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M8.16667 2.3916L7 3.49993\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.97487 4.66662L1.2832 4.19995\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M3.50091 7L2.39258 8.16667\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.19922 1.28345L4.66589 2.97511\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M5.27114 5.65255C5.24852 5.59926 5.24234 5.54043 5.25338 5.48361C5.26443 5.42678 5.2922 5.37455 5.33313 5.33362C5.37407 5.29269 5.4263 5.26492 5.48312 5.25387C5.53994 5.24283 5.59877 5.24901 5.65206 5.27163L12.0687 7.89663C12.1258 7.92006 12.174 7.961 12.2064 8.01357C12.2388 8.06613 12.2536 8.12761 12.2488 8.18915C12.244 8.25069 12.2198 8.30912 12.1797 8.35603C12.1396 8.40295 12.0856 8.43592 12.0256 8.45021L9.48864 9.05746C9.38391 9.08248 9.28815 9.13599 9.21196 9.21208C9.13578 9.28816 9.08213 9.38385 9.05698 9.48855L8.45031 12.026C8.43617 12.0863 8.40323 12.1405 8.35626 12.1808C8.30928 12.2211 8.25071 12.2454 8.189 12.2502C8.1273 12.255 8.06567 12.2401 8.01302 12.2075C7.96037 12.175 7.91944 12.1266 7.89614 12.0692L5.27114 5.65255Z\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </span>\n <span *ngIf=\"getCurrentEventTypeConfig().icon === 'enter'\" class=\"cqa-enter-key-icon cqa-inline-flex cqa-flex-shrink-0\" style=\"width: 20px; height: 20px;\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 32 32\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-w-full cqa-h-full\">\n <path fill=\"#6B7280\" transform=\"translate(14,5)\" d=\"M0 0 C4.29 0 8.58 0 13 0 C13 7.26 13 14.52 13 22 C5.74 22 -1.52 22 -9 22 C-9 16.72 -9 11.44 -9 6 C-6.03 6 -3.06 6 0 6 C0 4.02 0 2.04 0 0 Z M2 2 C2 3.98 2 5.96 2 8 C-0.97 8 -3.94 8 -7 8 C-7 11.96 -7 15.92 -7 20 C-1.06 20 4.88 20 11 20 C11 14.06 11 8.12 11 2 C8.03 2 5.06 2 2 2 Z\"/>\n <path fill=\"#6B7280\" transform=\"translate(19,13)\" d=\"M0 0 C0.66 0 1.32 0 2 0 C2 2.31 2 4.62 2 7 C0.02 7 -1.96 7 -4 7 C-4.33 8.32 -4.66 9.64 -5 11 C-6.65 9.68 -8.3 8.36 -10 7 C-8.63016497 3.83884224 -8.0109362 3.0072908 -5 1 C-4.67 2.32 -4.34 3.64 -4 5 C-2.68 5 -1.36 5 0 5 C0 3.35 0 1.7 0 0 Z\"/>\n </svg>\n </span>\n <span *ngIf=\"getCurrentEventTypeConfig().icon === 'clock'\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M6.99935 12.8334C10.221 12.8334 12.8327 10.2217 12.8327 7.00008C12.8327 3.77842 10.221 1.16675 6.99935 1.16675C3.77769 1.16675 1.16602 3.77842 1.16602 7.00008C1.16602 10.2217 3.77769 12.8334 6.99935 12.8334Z\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M7 3.5V7L9.33333 8.16667\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </span>\n <span *ngIf=\"getCurrentEventTypeConfig().icon === 'settings'\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M7 4.66667C5.71133 4.66667 4.66667 5.71133 4.66667 7C4.66667 8.28867 5.71133 9.33333 7 9.33333C8.28867 9.33333 9.33333 8.28867 9.33333 7C9.33333 5.71133 8.28867 4.66667 7 4.66667Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M11.0833 7.58333C11.1417 7.29167 11.1417 6.70833 11.0833 6.41667L12.25 5.83333C12.4167 5.70833 12.4833 5.48333 12.4167 5.25L11.6667 3.41667C11.6 3.18333 11.3917 3.04167 11.1417 3.04167L9.91667 3.5C9.56667 3.20833 9.19167 2.95833 8.75 2.79167L8.4 1.45833C8.34167 1.225 8.14167 1.16667 7.93333 1.16667H6.06667C5.85833 1.16667 5.65833 1.225 5.6 1.45833L5.25 2.79167C4.80833 2.95833 4.43333 3.20833 4.08333 3.5L2.85833 3.04167C2.60833 3.04167 2.4 3.18333 2.33333 3.41667L1.58333 5.25C1.51667 5.48333 1.58333 5.70833 1.75 5.83333L2.91667 6.41667C2.85833 6.70833 2.85833 7.29167 2.91667 7.58333L1.75 8.16667C1.58333 8.29167 1.51667 8.51667 1.58333 8.75L2.33333 10.5833C2.4 10.8167 2.60833 10.9583 2.85833 10.9583L4.08333 10.5C4.43333 10.7917 4.80833 11.0417 5.25 11.2083L5.6 12.5417C5.65833 12.775 5.85833 12.8333 6.06667 12.8333H7.93333C8.14167 12.8333 8.34167 12.775 8.4 12.5417L8.75 11.2083C9.19167 11.0417 9.56667 10.7917 9.91667 10.5L11.1417 10.9583C11.3917 10.9583 11.6 10.8167 11.6667 10.5833L12.4167 8.75C12.4833 8.51667 12.4167 8.29167 12.25 8.16667L11.0833 7.58333Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </span>\n <span *ngIf=\"getCurrentEventTypeConfig().icon === 'check'\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M11.6667 3.5L5.25 10.5L2.33333 7.58333\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </span>\n\n <!-- Label (show only when no icon; all types have icon now \u2013 tooltip on button) -->\n <span *ngIf=\"!getCurrentEventTypeConfig().icon\" class=\"cqa-text-[#432DD7] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium\">{{\n getCurrentEventTypeConfig().label }}</span>\n </button>\n\n <!-- Dropdown Menu -->\n <div *ngIf=\"eventTypeDropdownOpen\" (click)=\"$event.stopPropagation()\"\n class=\"cqa-absolute cqa-top-full cqa-left-0 cqa-mt-1 cqa-bg-white cqa-rounded-lg cqa-shadow-lg cqa-border cqa-border-gray-200 cqa-z-50 cqa-min-w-[150px] cqa-py-1\">\n <button *ngFor=\"let etc of eventTypeConfigs\" type=\"button\" (click)=\"onEventTypeSelect(etc.type)\"\n [class.cqa-bg-primary-50]=\"eventType === etc.type\"\n class=\"cqa-w-full cqa-px-3 cqa-py-2 cqa-text-left cqa-flex cqa-items-center cqa-gap-2 hover:cqa-bg-gray-50 cqa-transition-colors\">\n <span *ngIf=\"etc.icon === 'paper_plane'\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M1 5.5L11 1M11 1L7.5 11L6 6.5L1 5.5M11 1L1 5.5\" stroke=\"currentColor\" stroke-width=\"1.5\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </span>\n <span *ngIf=\"etc.icon === 'star'\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M6 1L7.5 4.5L11 5L7.5 5.5L6 9L4.5 5.5L1 5L4.5 4.5L6 1Z\" fill=\"currentColor\" />\n </svg>\n </span>\n <span *ngIf=\"etc.icon === 'T'\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M2.33398 4.08325V2.33325H11.6673V4.08325\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M5.25 11.6667H8.75\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M7 2.33325V11.6666\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </span>\n <span *ngIf=\"etc.icon === 'cursor'\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M2 2L9 1L10 8L7 7L5 9L4 7L2 2Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </span>\n <span *ngIf=\"etc.icon === 'cursor-double'\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M8.16667 2.3916L7 3.49993\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.97487 4.66662L1.2832 4.19995\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M3.50091 7L2.39258 8.16667\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.19922 1.28345L4.66589 2.97511\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M5.27114 5.65255C5.24852 5.59926 5.24234 5.54043 5.25338 5.48361C5.26443 5.42678 5.2922 5.37455 5.33313 5.33362C5.37407 5.29269 5.4263 5.26492 5.48312 5.25387C5.53994 5.24283 5.59877 5.24901 5.65206 5.27163L12.0687 7.89663C12.1258 7.92006 12.174 7.961 12.2064 8.01357C12.2388 8.06613 12.2536 8.12761 12.2488 8.18915C12.244 8.25069 12.2198 8.30912 12.1797 8.35603C12.1396 8.40295 12.0856 8.43592 12.0256 8.45021L9.48864 9.05746C9.38391 9.08248 9.28815 9.13599 9.21196 9.21208C9.13578 9.28816 9.08213 9.38385 9.05698 9.48855L8.45031 12.026C8.43617 12.0863 8.40323 12.1405 8.35626 12.1808C8.30928 12.2211 8.25071 12.2454 8.189 12.2502C8.1273 12.255 8.06567 12.2401 8.01302 12.2075C7.96037 12.175 7.91944 12.1266 7.89614 12.0692L5.27114 5.65255Z\" stroke=\"currentColor\" stroke-width=\"1.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg> \n </span>\n <span *ngIf=\"etc.icon === 'enter'\" class=\"cqa-enter-key-icon cqa-inline-flex cqa-flex-shrink-0\" style=\"width: 16px; height: 16px;\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 32 32\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-w-full cqa-h-full\">\n <path fill=\"#6B7280\" transform=\"translate(14,5)\" d=\"M0 0 C4.29 0 8.58 0 13 0 C13 7.26 13 14.52 13 22 C5.74 22 -1.52 22 -9 22 C-9 16.72 -9 11.44 -9 6 C-6.03 6 -3.06 6 0 6 C0 4.02 0 2.04 0 0 Z M2 2 C2 3.98 2 5.96 2 8 C-0.97 8 -3.94 8 -7 8 C-7 11.96 -7 15.92 -7 20 C-1.06 20 4.88 20 11 20 C11 14.06 11 8.12 11 2 C8.03 2 5.06 2 2 2 Z\"/>\n <path fill=\"#6B7280\" transform=\"translate(19,13)\" d=\"M0 0 C0.66 0 1.32 0 2 0 C2 2.31 2 4.62 2 7 C0.02 7 -1.96 7 -4 7 C-4.33 8.32 -4.66 9.64 -5 11 C-6.65 9.68 -8.3 8.36 -10 7 C-8.63016497 3.83884224 -8.0109362 3.0072908 -5 1 C-4.67 2.32 -4.34 3.64 -4 5 C-2.68 5 -1.36 5 0 5 C0 3.35 0 1.7 0 0 Z\"/>\n </svg>\n </span>\n <span *ngIf=\"etc.icon === 'clock'\">\n <svg 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\" />\n <path d=\"M6 3V6L8 7\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" />\n </svg>\n </span>\n <span *ngIf=\"etc.icon === 'settings'\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M7 4.66667C5.71133 4.66667 4.66667 5.71133 4.66667 7C4.66667 8.28867 5.71133 9.33333 7 9.33333C8.28867 9.33333 9.33333 8.28867 9.33333 7C9.33333 5.71133 8.28867 4.66667 7 4.66667Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M11.0833 7.58333C11.1417 7.29167 11.1417 6.70833 11.0833 6.41667L12.25 5.83333C12.4167 5.70833 12.4833 5.48333 12.4167 5.25L11.6667 3.41667C11.6 3.18333 11.3917 3.04167 11.1417 3.04167L9.91667 3.5C9.56667 3.20833 9.19167 2.95833 8.75 2.79167L8.4 1.45833C8.34167 1.225 8.14167 1.16667 7.93333 1.16667H6.06667C5.85833 1.16667 5.65833 1.225 5.6 1.45833L5.25 2.79167C4.80833 2.95833 4.43333 3.20833 4.08333 3.5L2.85833 3.04167C2.60833 3.04167 2.4 3.18333 2.33333 3.41667L1.58333 5.25C1.51667 5.48333 1.58333 5.70833 1.75 5.83333L2.91667 6.41667C2.85833 6.70833 2.85833 7.29167 2.91667 7.58333L1.75 8.16667C1.58333 8.29167 1.51667 8.51667 1.58333 8.75L2.33333 10.5833C2.4 10.8167 2.60833 10.9583 2.85833 10.9583L4.08333 10.5C4.43333 10.7917 4.80833 11.0417 5.25 11.2083L5.6 12.5417C5.65833 12.775 5.85833 12.8333 6.06667 12.8333H7.93333C8.14167 12.8333 8.34167 12.775 8.4 12.5417L8.75 11.2083C9.19167 11.0417 9.56667 10.7917 9.91667 10.5L11.1417 10.9583C11.3917 10.9583 11.6 10.8167 11.6667 10.5833L12.4167 8.75C12.4833 8.51667 12.4167 8.29167 12.25 8.16667L11.0833 7.58333Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </span>\n <span *ngIf=\"etc.icon === 'check'\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M11.6667 3.5L5.25 10.5L2.33333 7.58333\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </span>\n <span>{{ etc.label }}</span>\n </button>\n </div>\n </div>\n\n <!-- AI Agent: label + single cohesive box for action line + task content (ai_task) -->\n <span\n *ngIf=\"eventType === 'ai-agent' && getActionDescription()\"\n style=\"white-space: nowrap; flex-shrink: 0; min-width: fit-content;\"\n class=\"cqa-min-w-fit cqa-flex-shrink-0 cqa-whitespace-nowrap cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px]\">AI Agent</span>\n <div\n *ngIf=\"eventType === 'ai-agent' && getActionDescription()\"\n class=\"cqa-ai-agent-unified-box cqa-min-w-0 cqa-flex-1\">\n <span\n class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px] !cqa-inline-flex cqa-items-center cqa-action-format cqa-ai-agent-unified-inner\"\n style=\"white-space: pre-wrap;\"\n [innerHTML]=\"getActionDescription()\"\n (click)=\"clickOnAction($event)\">\n </span>\n </div>\n <!-- Other step types: action HTML as before -->\n <span\n class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px] cqa-action-format cqa-align-middle cqa-min-w-0 cqa-flex-1\"\n *ngIf=\"eventType !== 'ai-agent' && getActionDescription()\"\n [innerHTML]=\"getActionDescription()\"\n (click)=\"clickOnAction($event)\">\n </span>\n <!-- <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px]\" *ngIf=\"getActionDescription()\">\n {{ getActionDescription() }}\n </span> -->\n\n <!-- Parameters -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-3\" *ngIf=\"false\">\n <!-- Navigate: URL as clickable trigger for Test Data modal -->\n <span *ngIf=\"eventType === 'navigate' && getNavigateUrlParameter()\" #testDataTrigger\n (click)=\"openTestDataModal($event)\"\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] cqa-cursor-pointer hover:cqa-opacity-90\">\n {{ getNavigateUrlParameter()?.value || getNavigateUrlParameter()?.displayValue }}\n </span>\n \n <!-- Other event types: loop through parameters (navigate excluded) -->\n <ng-container *ngFor=\"let param of parameters; let i = index\">\n <!-- Skip navigate parameters in the loop (already shown above) -->\n <ng-container *ngIf=\"eventType !== 'navigate'\">\n\n <!-- Type: First param (text value like {{username}}) -->\n <span *ngIf=\"eventType === 'type' && i === 0\" class=\"cqa-text-gray-900 cqa-text-sm\">\n {{ param.value }}\n </span>\n\n <!-- Type: \"into\" text -->\n <span *ngIf=\"eventType === 'type' && i === 0\" class=\"cqa-text-gray-900 cqa-text-sm\">\n into\n </span>\n\n <!-- Type: Second param (selector) -->\n <span *ngIf=\"eventType === 'type' && i === 1\"\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 {{ param.displayValue || param.value }}\n </span>\n\n <!-- Click: Selector input/display -->\n <span *ngIf=\"eventType === 'click' && param.name === 'element'\"\n #clickElementTrigger\n (click)=\"openElementPopup($event)\"\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-cursor-pointer cqa-bg-[#D8D9FC]\">\n {{ param.displayValue || param.value }}\n </span>\n\n <!-- Click: Suffix text (like \"if Present\") -->\n <span *ngIf=\"eventType === 'click' && param.name === 'suffix'\" class=\"cqa-text-gray-900 cqa-text-sm\">\n {{ param.value }}\n </span>\n\n <!-- Double Click: Selector input/display -->\n <span *ngIf=\"eventType === 'doubleClick' && i === 0\"\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 {{ param.displayValue || param.value }}\n </span>\n\n <!-- Press Enter: Selector input/display with HTML support -->\n <span *ngIf=\"eventType === 'pressEnter' && i === 0\"\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 [innerHTML]=\"param.displayValue || param.value\">\n </span>\n\n <!-- Enter: Value display with quotes (like click action) -->\n <span *ngIf=\"eventType === 'enter' && param.name === 'value'\"\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 {{ param.displayValue || param.value }}\n </span>\n\n <!-- Enter: \"in the\" text -->\n <span *ngIf=\"eventType === 'enter' && param.name === 'value'\" class=\"cqa-text-gray-900 cqa-text-sm\">\n in the\n </span>\n\n <!-- Enter: Label display with quotes (like click action) -->\n <span *ngIf=\"eventType === 'enter' && param.name === 'label'\"\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 {{ param.displayValue || param.value }}\n </span>\n\n <!-- Enter: \"field\" text -->\n <span *ngIf=\"eventType === 'enter' && param.name === 'label'\" class=\"cqa-text-gray-900 cqa-text-sm\">\n field\n </span>\n\n <!-- Wait: Duration input -->\n <input *ngIf=\"eventType === 'wait' && param.name === 'duration'\" type=\"number\" [value]=\"param.value\"\n (input)=\"onParameterChange(param, $any($event.target).value)\" placeholder=\"2\"\n class=\"cqa-w-16 cqa-px-2 cqa-py-1.5 cqa-rounded-lg cqa-border cqa-border-solid cqa-border-[#9E9EE3] cqa-bg-[#D1C4E9] cqa-text-[#3F43EE] cqa-text-sm cqa-font-medium cqa-outline-none focus:cqa-ring-2 focus:cqa-ring-[#3F43EE] focus:cqa-ring-opacity-50\" />\n <span *ngIf=\"eventType === 'wait' && param.name === 'duration'\" class=\"cqa-text-gray-900 cqa-text-sm\">\n seconds\n </span>\n\n <!-- Wait: Element selector -->\n <span *ngIf=\"eventType === 'wait' && param.name === 'element'\" class=\"cqa-text-gray-900 cqa-text-sm\">\n for element\n </span>\n <span *ngIf=\"eventType === 'wait' && param.name === 'element'\" \n #elementTrigger\n (click)=\"openElementPopup($event)\"\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-cursor-pointer cqa-bg-[#D8D9FC]\">\n {{ param.displayValue || param.value }}\n </span>\n <span *ngIf=\"eventType === 'wait' && param.name === 'element'\" class=\"cqa-text-gray-900 cqa-text-sm\">\n to be visible\n </span>\n\n <!-- Custom: Description (clickable to open Step Description modal; pass $event so modal opens below this trigger) -->\n <span *ngIf=\"eventType === 'custom'\" #descriptionTrigger\n (click)=\"openStepDescriptionModal($event)\"\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] cqa-cursor-pointer hover:cqa-opacity-90\"\n [innerHTML]=\"param.displayValue || param.value\">\n </span>\n\n <!-- AI Agent: Instructions -->\n <span *ngIf=\"eventType === 'ai-agent'\"\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 {{ param.displayValue || param.value }}\n </span>\n </ng-container>\n </ng-container>\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-ml-auto cqa-self-center\">\n <span *ngIf=\"config?.shouldSkip\" 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] cqa-flex-shrink-0\">Skipped</span>\n <!-- Action Icons: Edit, Link, Duplicate, Delete (show on hover; hidden when step is inside step-group) - placed first -->\n <div *ngIf=\"editable && !isInsideStepGroup && !isReorder\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-1.5 cqa-pr-2\">\n <button type=\"button\" #editTrigger (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\" stroke-linejoin=\"round\"/>\n <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\"/>\n </svg>\n </button>\n <!-- Skip / Unskip (after Edit icon) -->\n <button\n type=\"button\"\n (click)=\"onSkipToggle(); $event.stopPropagation()\"\n [disabled]=\"isParentSkipped\"\n [attr.title]=\"isParentSkipped ? 'Cannot change skip while parent step is skipped' : (config?.shouldSkip ? 'Unskip step' : 'Skip step')\"\n [style.color]=\"config?.shouldSkip ? '#1447E6' : null\"\n class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6] disabled:cqa-opacity-50 disabled:cqa-cursor-not-allowed\"\n >\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M8.25 8.75C9.2165 8.75 10 7.9665 10 7C10 6.0335 9.2165 5.25 8.25 5.25C7.2835 5.25 6.5 6.0335 6.5 7C6.5 7.9665 7.2835 8.75 8.25 8.75Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M8.75033 2.91663H5.25033C2.99516 2.91663 1.16699 4.7448 1.16699 6.99996C1.16699 9.25512 2.99516 11.0833 5.25033 11.0833H8.75033C11.0055 11.0833 12.8337 9.25512 12.8337 6.99996C12.8337 4.7448 11.0055 2.91663 8.75033 2.91663Z\" 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\" 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=\"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\"/>\n <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\"/>\n <path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button> -->\n <button\n type=\"button\"\n (click)=\"onDuplicate(); $event.stopPropagation()\"\n [disabled]=\"isDuplicating\"\n [attr.title]=\"isDuplicating ? 'Duplicating...' : 'Duplicate'\"\n class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6] disabled:cqa-opacity-60 disabled:cqa-cursor-not-allowed\"\n >\n <svg *ngIf=\"!isDuplicating\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <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\"/>\n <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\"/>\n </svg>\n <svg *ngIf=\"isDuplicating\" width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-label=\"Duplicating\">\n <circle cx=\"8\" cy=\"8\" r=\"6\" stroke=\"currentColor\" stroke-opacity=\"0.2\" stroke-width=\"2\"></circle>\n <path d=\"M14 8A6 6 0 0 0 8 2\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\">\n <animateTransform attributeName=\"transform\" type=\"rotate\" from=\"0 8 8\" to=\"360 8 8\" dur=\"0.8s\" repeatCount=\"indefinite\"/>\n </path>\n </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\">\n <path d=\"M1.75 3.5H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <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\"/>\n <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\"/>\n <path d=\"M5.83398 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M8.16602 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n </div>\n\n <!-- View Details Link (show only if description is not empty) -->\n <a *ngIf=\"config.description && config.description.trim() !== ''\" #viewDetailsTrigger href=\"#\" (click)=\"onViewDetails($event)\" class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-1 cqa-no-underline\">View Details<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></a>\n\n <!-- Created Date (from API) - last so aligned across all steps, format: 25 Feb 2026 -->\n <span *ngIf=\"config.createdDate\" class=\"step-date cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px] cqa-ml-auto cqa-flex-shrink-0\">\n {{ config.createdDate | date:'d MMM yyyy' }}\n </span>\n </div>\n</div>" }]
29719
29722
  }], ctorParameters: function () { return [{ type: CustomEditStepService }, { type: ElementPopupService }, { type: TestDataModalService }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i1$2.DomSanitizer }]; }, propDecorators: { dropdownContainer: [{
29720
29723
  type: ViewChild,
29721
29724
  args: ['dropdownContainer', { static: false }]
@@ -34170,12 +34173,17 @@ class TestCaseAiAgentStepComponent {
34170
34173
  }
34171
34174
  }
34172
34175
  onSelectionChange(checked) { this.selected = checked; this.selectionChange.emit(checked); }
34176
+ /** Strips the leading "AI Agent" prefix because it is rendered as a separate label span. */
34177
+ get displayInstructions() {
34178
+ const raw = this.instructions || '';
34179
+ return raw.replace(/^\s*(?:<[^>]+>\s*)*AI\s+Agent\s*:?\s*/i, '');
34180
+ }
34173
34181
  }
34174
34182
  TestCaseAiAgentStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseAiAgentStepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
34175
- TestCaseAiAgentStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestCaseAiAgentStepComponent, selector: "cqa-test-case-ai-agent-step", inputs: { config: "config", stepNumber: "stepNumber", instructions: "instructions", description: "description", selected: "selected", disabled: "disabled", isNested: "isNested", isInsideStepGroup: "isInsideStepGroup", isInsideLoop: "isInsideLoop", nestingLevel: "nestingLevel", isReorder: "isReorder", editable: "editable" }, outputs: { edit: "edit", editInDepth: "editInDepth", link: "link", duplicate: "duplicate", delete: "delete", moreOptions: "moreOptions", viewDetails: "viewDetails", selectionChange: "selectionChange", stepUpdate: "stepUpdate" }, host: { classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "viewDetailsTrigger", first: true, predicate: ["viewDetailsTrigger"], descendants: true }], ngImport: i0, template: "<div [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 cqa-pr-4' + (config?.shouldSkip ? ' cqa-step-skipped' : '') \" [style.opacity]=\"config?.shouldSkip ? '0.6' : null\" [style.padding-left.px]=\"getRowPaddingLeftPx()\" [style.border-bottom]=\"isInsideStepGroup ? '1px solid #BEDBFF' : '1px solid #E5E7EB'\" [style.border-top]=\"isInsideStepGroup ? '1px solid #BEDBFF' : null\">\n <div *ngIf=\"!isInsideStepGroup\" class=\"cqa-inline-flex cqa-items-center\">\n <!-- Drag Handle Icon (when isReorder is true and not inside step group - steps inside step groups cannot be reordered) -->\n <div *ngIf=\"isReorder && !isInsideStepGroup\" 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 and not inside step group - hide for steps inside step groups) -->\n <label *ngIf=\"editable && !isReorder && !isInsideStepGroup\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative cqa-mr-2\">\n <input type=\"checkbox\"\n [ngModel]=\"selected\"\n [disabled]=\"disabled\"\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\" />\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 </div>\n <div *ngIf=\"isInsideStepGroup\" class=\"cqa-flex cqa-flex-shrink-0 cqa-items-center cqa-pl-0 cqa-pr-1 cqa-text-[#9CA3AF]\" aria-hidden=\"true\" title=\"Step is inside a group\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M11.9998 5.66667H11.3332V4.33333C11.3332 2.49333 9.83984 1 7.99984 1C6.15984 1 4.6665 2.49333 4.6665 4.33333V5.66667H3.99984C3.2665 5.66667 2.6665 6.26667 2.6665 7V13.6667C2.6665 14.4 3.2665 15 3.99984 15H11.9998C12.7332 15 13.3332 14.4 13.3332 13.6667V7C13.3332 6.26667 12.7332 5.66667 11.9998 5.66667ZM5.99984 4.33333C5.99984 3.22667 6.89317 2.33333 7.99984 2.33333C9.1065 2.33333 9.99984 3.22667 9.99984 4.33333V5.66667H5.99984V4.33333ZM11.9998 13.6667H3.99984V7H11.9998V13.6667ZM7.99984 11.6667C8.73317 11.6667 9.33317 11.0667 9.33317 10.3333C9.33317 9.6 8.73317 9 7.99984 9C7.2665 9 6.6665 9.6 6.6665 10.3333C6.6665 11.0667 7.2665 11.6667 7.99984 11.6667Z\" fill=\"currentColor\"/>\n </svg>\n </div>\n <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px] cqa-min-w-[32px]\">{{ stepNumber }}</span>\n <span title=\"AI Agent\" class=\"cqa-w-8 cqa-h-8 cqa-rounded-lg cqa-flex cqa-items-center cqa-justify-center cqa-flex-shrink-0 cqa-bg-[#EDE9FE] cqa-text-[#7C3AED]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.797 9.04165C5.74492 8.83977 5.63969 8.65554 5.49227 8.50812C5.34485 8.3607 5.16062 8.25548 4.95875 8.2034L1.38 7.28057C1.31894 7.26324 1.2652 7.22646 1.22694 7.17583C1.18867 7.12519 1.16797 7.06345 1.16797 6.99998C1.16797 6.93651 1.18867 6.87478 1.22694 6.82414C1.2652 6.7735 1.31894 6.73673 1.38 6.7194L4.95875 5.79598C5.16055 5.74395 5.34473 5.63882 5.49215 5.49151C5.63956 5.34419 5.74483 5.16008 5.797 4.95832L6.71983 1.37957C6.73698 1.31827 6.77372 1.26427 6.82443 1.2258C6.87515 1.18733 6.93705 1.1665 7.0007 1.1665C7.06436 1.1665 7.12626 1.18733 7.17698 1.2258C7.22769 1.26427 7.26442 1.31827 7.28158 1.37957L8.20383 4.95832C8.25591 5.16019 8.36113 5.34442 8.50855 5.49184C8.65597 5.63926 8.8402 5.74449 9.04208 5.79657L12.6208 6.71882C12.6824 6.73579 12.7366 6.77249 12.7753 6.82328C12.814 6.87407 12.8349 6.93614 12.8349 6.99998C12.8349 7.06382 12.814 7.1259 12.7753 7.17669C12.7366 7.22748 12.6824 7.26417 12.6208 7.28115L9.04208 8.2034C8.8402 8.25548 8.65597 8.3607 8.50855 8.50812C8.36113 8.65554 8.25591 8.83977 8.20383 9.04165L7.281 12.6204C7.26384 12.6817 7.22711 12.7357 7.17639 12.7742C7.12568 12.8126 7.06377 12.8335 7.00012 12.8335C6.93647 12.8335 6.87456 12.8126 6.82385 12.7742C6.77314 12.7357 6.7364 12.6817 6.71925 12.6204L5.797 9.04165Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11.666 1.75V4.08333\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M12.8333 2.91663H10.5\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.33398 9.91663V11.0833\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.91667 10.5H1.75\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </span>\n <div class=\"cqa-min-w-0 cqa-flex-1\">\n <span class=\"cqa-action-format cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px] cqa-block cqa-break-words\" [innerHTML]=\"instructions | cqaSafeHtml\"></span>\n </div>\n <div class=\"cqa-flex-grow\"></div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-self-center\">\n <span *ngIf=\"config?.shouldSkip\" 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] cqa-flex-shrink-0\">Skipped</span>\n <div *ngIf=\"editable && !isInsideStepGroup && !isReorder\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-1.5 cqa-pr-2\">\n <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><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></button>\n <button type=\"button\" (click)=\"onSkipToggle(); $event.stopPropagation()\" [attr.title]=\"config?.shouldSkip ? 'Unskip step' : 'Skip step'\" [style.color]=\"config?.shouldSkip ? '#1447E6' : null\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M8.25 8.75C9.2165 8.75 10 7.9665 10 7C10 6.0335 9.2165 5.25 8.25 5.25C7.2835 5.25 6.5 6.0335 6.5 7C6.5 7.9665 7.2835 8.75 8.25 8.75Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M8.75033 2.91663H5.25033C2.99516 2.91663 1.16699 4.7448 1.16699 6.99996C1.16699 9.25512 2.99516 11.0833 5.25033 11.0833H8.75033C11.0055 11.0833 12.8337 9.25512 12.8337 6.99996C12.8337 4.7448 11.0055 2.91663 8.75033 2.91663Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></button>\n <!-- <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><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></button> -->\n <button type=\"button\" (click)=\"onDuplicate(); $event.stopPropagation()\" title=\"Duplicate\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><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></button>\n <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\" class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\"><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></button>\n </div>\n <a *ngIf=\"description && description.trim() !== ''\" #viewDetailsTrigger href=\"#\" (click)=\"onViewDetails($event)\" class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-1 cqa-no-underline\">View Details<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></a>\n <!-- Created Date (from API) - last so aligned across all steps, format: 25 Feb 2026 -->\n <span *ngIf=\"config.createdDate\" class=\"step-date cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px] cqa-ml-auto cqa-flex-shrink-0\">\n {{ config.createdDate | date:'d MMM yyyy' }}\n </span>\n </div>\n</div>\n", styles: [".step-actions{opacity:0;transition:opacity .15s ease}.step-row:hover .step-actions{opacity:1}.step-row{vertical-align:middle;letter-spacing:normal}\n"], 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"] }], pipes: { "cqaSafeHtml": SafeHtmlPipe, "date": i2.DatePipe } });
34183
+ TestCaseAiAgentStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestCaseAiAgentStepComponent, selector: "cqa-test-case-ai-agent-step", inputs: { config: "config", stepNumber: "stepNumber", instructions: "instructions", description: "description", selected: "selected", disabled: "disabled", isNested: "isNested", isInsideStepGroup: "isInsideStepGroup", isInsideLoop: "isInsideLoop", nestingLevel: "nestingLevel", isReorder: "isReorder", editable: "editable" }, outputs: { edit: "edit", editInDepth: "editInDepth", link: "link", duplicate: "duplicate", delete: "delete", moreOptions: "moreOptions", viewDetails: "viewDetails", selectionChange: "selectionChange", stepUpdate: "stepUpdate" }, host: { classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "viewDetailsTrigger", first: true, predicate: ["viewDetailsTrigger"], descendants: true }], ngImport: i0, template: "<div [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 cqa-pr-4' + (config?.shouldSkip ? ' cqa-step-skipped' : '') \" [style.opacity]=\"config?.shouldSkip ? '0.6' : null\" [style.padding-left.px]=\"getRowPaddingLeftPx()\" [style.border-bottom]=\"isInsideStepGroup ? '1px solid #BEDBFF' : '1px solid #E5E7EB'\" [style.border-top]=\"isInsideStepGroup ? '1px solid #BEDBFF' : null\">\n <div *ngIf=\"!isInsideStepGroup\" class=\"cqa-inline-flex cqa-items-center\">\n <!-- Drag Handle Icon (when isReorder is true and not inside step group - steps inside step groups cannot be reordered) -->\n <div *ngIf=\"isReorder && !isInsideStepGroup\" 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 and not inside step group - hide for steps inside step groups) -->\n <label *ngIf=\"editable && !isReorder && !isInsideStepGroup\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative cqa-mr-2\">\n <input type=\"checkbox\"\n [ngModel]=\"selected\"\n [disabled]=\"disabled\"\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\" />\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 </div>\n <div *ngIf=\"isInsideStepGroup\" class=\"cqa-flex cqa-flex-shrink-0 cqa-items-center cqa-pl-0 cqa-pr-1 cqa-text-[#9CA3AF]\" aria-hidden=\"true\" title=\"Step is inside a group\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M11.9998 5.66667H11.3332V4.33333C11.3332 2.49333 9.83984 1 7.99984 1C6.15984 1 4.6665 2.49333 4.6665 4.33333V5.66667H3.99984C3.2665 5.66667 2.6665 6.26667 2.6665 7V13.6667C2.6665 14.4 3.2665 15 3.99984 15H11.9998C12.7332 15 13.3332 14.4 13.3332 13.6667V7C13.3332 6.26667 12.7332 5.66667 11.9998 5.66667ZM5.99984 4.33333C5.99984 3.22667 6.89317 2.33333 7.99984 2.33333C9.1065 2.33333 9.99984 3.22667 9.99984 4.33333V5.66667H5.99984V4.33333ZM11.9998 13.6667H3.99984V7H11.9998V13.6667ZM7.99984 11.6667C8.73317 11.6667 9.33317 11.0667 9.33317 10.3333C9.33317 9.6 8.73317 9 7.99984 9C7.2665 9 6.6665 9.6 6.6665 10.3333C6.6665 11.0667 7.2665 11.6667 7.99984 11.6667Z\" fill=\"currentColor\"/>\n </svg>\n </div>\n <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px] cqa-min-w-[32px]\">{{ stepNumber }}</span>\n <span title=\"AI Agent\" class=\"cqa-w-8 cqa-h-8 cqa-rounded-lg cqa-flex cqa-items-center cqa-justify-center cqa-flex-shrink-0 cqa-bg-[#EDE9FE] cqa-text-[#7C3AED]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.797 9.04165C5.74492 8.83977 5.63969 8.65554 5.49227 8.50812C5.34485 8.3607 5.16062 8.25548 4.95875 8.2034L1.38 7.28057C1.31894 7.26324 1.2652 7.22646 1.22694 7.17583C1.18867 7.12519 1.16797 7.06345 1.16797 6.99998C1.16797 6.93651 1.18867 6.87478 1.22694 6.82414C1.2652 6.7735 1.31894 6.73673 1.38 6.7194L4.95875 5.79598C5.16055 5.74395 5.34473 5.63882 5.49215 5.49151C5.63956 5.34419 5.74483 5.16008 5.797 4.95832L6.71983 1.37957C6.73698 1.31827 6.77372 1.26427 6.82443 1.2258C6.87515 1.18733 6.93705 1.1665 7.0007 1.1665C7.06436 1.1665 7.12626 1.18733 7.17698 1.2258C7.22769 1.26427 7.26442 1.31827 7.28158 1.37957L8.20383 4.95832C8.25591 5.16019 8.36113 5.34442 8.50855 5.49184C8.65597 5.63926 8.8402 5.74449 9.04208 5.79657L12.6208 6.71882C12.6824 6.73579 12.7366 6.77249 12.7753 6.82328C12.814 6.87407 12.8349 6.93614 12.8349 6.99998C12.8349 7.06382 12.814 7.1259 12.7753 7.17669C12.7366 7.22748 12.6824 7.26417 12.6208 7.28115L9.04208 8.2034C8.8402 8.25548 8.65597 8.3607 8.50855 8.50812C8.36113 8.65554 8.25591 8.83977 8.20383 9.04165L7.281 12.6204C7.26384 12.6817 7.22711 12.7357 7.17639 12.7742C7.12568 12.8126 7.06377 12.8335 7.00012 12.8335C6.93647 12.8335 6.87456 12.8126 6.82385 12.7742C6.77314 12.7357 6.7364 12.6817 6.71925 12.6204L5.797 9.04165Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11.666 1.75V4.08333\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M12.8333 2.91663H10.5\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.33398 9.91663V11.0833\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.91667 10.5H1.75\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </span>\n <span style=\"white-space: nowrap; flex-shrink: 0; min-width: fit-content;\" class=\"cqa-min-w-fit cqa-flex-shrink-0 cqa-whitespace-nowrap cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px]\">AI Agent</span>\n <div class=\"cqa-ai-agent-unified-box cqa-min-w-0 cqa-flex-1\">\n <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px] !cqa-inline-flex cqa-items-center cqa-action-format cqa-ai-agent-unified-inner\"\n style=\"white-space: pre-wrap;\"\n [innerHTML]=\"displayInstructions | cqaSafeHtml\"></span>\n </div>\n <div class=\"cqa-flex-grow\"></div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-self-center\">\n <span *ngIf=\"config?.shouldSkip\" 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] cqa-flex-shrink-0\">Skipped</span>\n <div *ngIf=\"editable && !isInsideStepGroup && !isReorder\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-1.5 cqa-pr-2\">\n <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><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></button>\n <button type=\"button\" (click)=\"onSkipToggle(); $event.stopPropagation()\" [attr.title]=\"config?.shouldSkip ? 'Unskip step' : 'Skip step'\" [style.color]=\"config?.shouldSkip ? '#1447E6' : null\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M8.25 8.75C9.2165 8.75 10 7.9665 10 7C10 6.0335 9.2165 5.25 8.25 5.25C7.2835 5.25 6.5 6.0335 6.5 7C6.5 7.9665 7.2835 8.75 8.25 8.75Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M8.75033 2.91663H5.25033C2.99516 2.91663 1.16699 4.7448 1.16699 6.99996C1.16699 9.25512 2.99516 11.0833 5.25033 11.0833H8.75033C11.0055 11.0833 12.8337 9.25512 12.8337 6.99996C12.8337 4.7448 11.0055 2.91663 8.75033 2.91663Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></button>\n <!-- <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><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></button> -->\n <button type=\"button\" (click)=\"onDuplicate(); $event.stopPropagation()\" title=\"Duplicate\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><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></button>\n <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\" class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\"><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></button>\n </div>\n <a *ngIf=\"description && description.trim() !== ''\" #viewDetailsTrigger href=\"#\" (click)=\"onViewDetails($event)\" class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-1 cqa-no-underline\">View Details<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></a>\n <!-- Created Date (from API) - last so aligned across all steps, format: 25 Feb 2026 -->\n <span *ngIf=\"config.createdDate\" class=\"step-date cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px] cqa-ml-auto cqa-flex-shrink-0\">\n {{ config.createdDate | date:'d MMM yyyy' }}\n </span>\n </div>\n</div>\n", styles: [".step-actions{opacity:0;transition:opacity .15s ease}.step-row:hover .step-actions{opacity:1}.step-row{vertical-align:middle;letter-spacing:normal}\n"], 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"] }], pipes: { "cqaSafeHtml": SafeHtmlPipe, "date": i2.DatePipe } });
34176
34184
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseAiAgentStepComponent, decorators: [{
34177
34185
  type: Component,
34178
- args: [{ selector: 'cqa-test-case-ai-agent-step', host: { class: 'cqa-ui-root' }, styles: [STEP_ROW_ACTIONS_STYLES], template: "<div [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 cqa-pr-4' + (config?.shouldSkip ? ' cqa-step-skipped' : '') \" [style.opacity]=\"config?.shouldSkip ? '0.6' : null\" [style.padding-left.px]=\"getRowPaddingLeftPx()\" [style.border-bottom]=\"isInsideStepGroup ? '1px solid #BEDBFF' : '1px solid #E5E7EB'\" [style.border-top]=\"isInsideStepGroup ? '1px solid #BEDBFF' : null\">\n <div *ngIf=\"!isInsideStepGroup\" class=\"cqa-inline-flex cqa-items-center\">\n <!-- Drag Handle Icon (when isReorder is true and not inside step group - steps inside step groups cannot be reordered) -->\n <div *ngIf=\"isReorder && !isInsideStepGroup\" 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 and not inside step group - hide for steps inside step groups) -->\n <label *ngIf=\"editable && !isReorder && !isInsideStepGroup\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative cqa-mr-2\">\n <input type=\"checkbox\"\n [ngModel]=\"selected\"\n [disabled]=\"disabled\"\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\" />\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 </div>\n <div *ngIf=\"isInsideStepGroup\" class=\"cqa-flex cqa-flex-shrink-0 cqa-items-center cqa-pl-0 cqa-pr-1 cqa-text-[#9CA3AF]\" aria-hidden=\"true\" title=\"Step is inside a group\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M11.9998 5.66667H11.3332V4.33333C11.3332 2.49333 9.83984 1 7.99984 1C6.15984 1 4.6665 2.49333 4.6665 4.33333V5.66667H3.99984C3.2665 5.66667 2.6665 6.26667 2.6665 7V13.6667C2.6665 14.4 3.2665 15 3.99984 15H11.9998C12.7332 15 13.3332 14.4 13.3332 13.6667V7C13.3332 6.26667 12.7332 5.66667 11.9998 5.66667ZM5.99984 4.33333C5.99984 3.22667 6.89317 2.33333 7.99984 2.33333C9.1065 2.33333 9.99984 3.22667 9.99984 4.33333V5.66667H5.99984V4.33333ZM11.9998 13.6667H3.99984V7H11.9998V13.6667ZM7.99984 11.6667C8.73317 11.6667 9.33317 11.0667 9.33317 10.3333C9.33317 9.6 8.73317 9 7.99984 9C7.2665 9 6.6665 9.6 6.6665 10.3333C6.6665 11.0667 7.2665 11.6667 7.99984 11.6667Z\" fill=\"currentColor\"/>\n </svg>\n </div>\n <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px] cqa-min-w-[32px]\">{{ stepNumber }}</span>\n <span title=\"AI Agent\" class=\"cqa-w-8 cqa-h-8 cqa-rounded-lg cqa-flex cqa-items-center cqa-justify-center cqa-flex-shrink-0 cqa-bg-[#EDE9FE] cqa-text-[#7C3AED]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.797 9.04165C5.74492 8.83977 5.63969 8.65554 5.49227 8.50812C5.34485 8.3607 5.16062 8.25548 4.95875 8.2034L1.38 7.28057C1.31894 7.26324 1.2652 7.22646 1.22694 7.17583C1.18867 7.12519 1.16797 7.06345 1.16797 6.99998C1.16797 6.93651 1.18867 6.87478 1.22694 6.82414C1.2652 6.7735 1.31894 6.73673 1.38 6.7194L4.95875 5.79598C5.16055 5.74395 5.34473 5.63882 5.49215 5.49151C5.63956 5.34419 5.74483 5.16008 5.797 4.95832L6.71983 1.37957C6.73698 1.31827 6.77372 1.26427 6.82443 1.2258C6.87515 1.18733 6.93705 1.1665 7.0007 1.1665C7.06436 1.1665 7.12626 1.18733 7.17698 1.2258C7.22769 1.26427 7.26442 1.31827 7.28158 1.37957L8.20383 4.95832C8.25591 5.16019 8.36113 5.34442 8.50855 5.49184C8.65597 5.63926 8.8402 5.74449 9.04208 5.79657L12.6208 6.71882C12.6824 6.73579 12.7366 6.77249 12.7753 6.82328C12.814 6.87407 12.8349 6.93614 12.8349 6.99998C12.8349 7.06382 12.814 7.1259 12.7753 7.17669C12.7366 7.22748 12.6824 7.26417 12.6208 7.28115L9.04208 8.2034C8.8402 8.25548 8.65597 8.3607 8.50855 8.50812C8.36113 8.65554 8.25591 8.83977 8.20383 9.04165L7.281 12.6204C7.26384 12.6817 7.22711 12.7357 7.17639 12.7742C7.12568 12.8126 7.06377 12.8335 7.00012 12.8335C6.93647 12.8335 6.87456 12.8126 6.82385 12.7742C6.77314 12.7357 6.7364 12.6817 6.71925 12.6204L5.797 9.04165Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11.666 1.75V4.08333\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M12.8333 2.91663H10.5\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.33398 9.91663V11.0833\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.91667 10.5H1.75\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </span>\n <div class=\"cqa-min-w-0 cqa-flex-1\">\n <span class=\"cqa-action-format cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px] cqa-block cqa-break-words\" [innerHTML]=\"instructions | cqaSafeHtml\"></span>\n </div>\n <div class=\"cqa-flex-grow\"></div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-self-center\">\n <span *ngIf=\"config?.shouldSkip\" 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] cqa-flex-shrink-0\">Skipped</span>\n <div *ngIf=\"editable && !isInsideStepGroup && !isReorder\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-1.5 cqa-pr-2\">\n <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><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></button>\n <button type=\"button\" (click)=\"onSkipToggle(); $event.stopPropagation()\" [attr.title]=\"config?.shouldSkip ? 'Unskip step' : 'Skip step'\" [style.color]=\"config?.shouldSkip ? '#1447E6' : null\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M8.25 8.75C9.2165 8.75 10 7.9665 10 7C10 6.0335 9.2165 5.25 8.25 5.25C7.2835 5.25 6.5 6.0335 6.5 7C6.5 7.9665 7.2835 8.75 8.25 8.75Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M8.75033 2.91663H5.25033C2.99516 2.91663 1.16699 4.7448 1.16699 6.99996C1.16699 9.25512 2.99516 11.0833 5.25033 11.0833H8.75033C11.0055 11.0833 12.8337 9.25512 12.8337 6.99996C12.8337 4.7448 11.0055 2.91663 8.75033 2.91663Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></button>\n <!-- <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><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></button> -->\n <button type=\"button\" (click)=\"onDuplicate(); $event.stopPropagation()\" title=\"Duplicate\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><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></button>\n <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\" class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\"><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></button>\n </div>\n <a *ngIf=\"description && description.trim() !== ''\" #viewDetailsTrigger href=\"#\" (click)=\"onViewDetails($event)\" class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-1 cqa-no-underline\">View Details<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></a>\n <!-- Created Date (from API) - last so aligned across all steps, format: 25 Feb 2026 -->\n <span *ngIf=\"config.createdDate\" class=\"step-date cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px] cqa-ml-auto cqa-flex-shrink-0\">\n {{ config.createdDate | date:'d MMM yyyy' }}\n </span>\n </div>\n</div>\n" }]
34186
+ args: [{ selector: 'cqa-test-case-ai-agent-step', host: { class: 'cqa-ui-root' }, styles: [STEP_ROW_ACTIONS_STYLES], template: "<div [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 cqa-pr-4' + (config?.shouldSkip ? ' cqa-step-skipped' : '') \" [style.opacity]=\"config?.shouldSkip ? '0.6' : null\" [style.padding-left.px]=\"getRowPaddingLeftPx()\" [style.border-bottom]=\"isInsideStepGroup ? '1px solid #BEDBFF' : '1px solid #E5E7EB'\" [style.border-top]=\"isInsideStepGroup ? '1px solid #BEDBFF' : null\">\n <div *ngIf=\"!isInsideStepGroup\" class=\"cqa-inline-flex cqa-items-center\">\n <!-- Drag Handle Icon (when isReorder is true and not inside step group - steps inside step groups cannot be reordered) -->\n <div *ngIf=\"isReorder && !isInsideStepGroup\" 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 and not inside step group - hide for steps inside step groups) -->\n <label *ngIf=\"editable && !isReorder && !isInsideStepGroup\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative cqa-mr-2\">\n <input type=\"checkbox\"\n [ngModel]=\"selected\"\n [disabled]=\"disabled\"\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\" />\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 </div>\n <div *ngIf=\"isInsideStepGroup\" class=\"cqa-flex cqa-flex-shrink-0 cqa-items-center cqa-pl-0 cqa-pr-1 cqa-text-[#9CA3AF]\" aria-hidden=\"true\" title=\"Step is inside a group\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M11.9998 5.66667H11.3332V4.33333C11.3332 2.49333 9.83984 1 7.99984 1C6.15984 1 4.6665 2.49333 4.6665 4.33333V5.66667H3.99984C3.2665 5.66667 2.6665 6.26667 2.6665 7V13.6667C2.6665 14.4 3.2665 15 3.99984 15H11.9998C12.7332 15 13.3332 14.4 13.3332 13.6667V7C13.3332 6.26667 12.7332 5.66667 11.9998 5.66667ZM5.99984 4.33333C5.99984 3.22667 6.89317 2.33333 7.99984 2.33333C9.1065 2.33333 9.99984 3.22667 9.99984 4.33333V5.66667H5.99984V4.33333ZM11.9998 13.6667H3.99984V7H11.9998V13.6667ZM7.99984 11.6667C8.73317 11.6667 9.33317 11.0667 9.33317 10.3333C9.33317 9.6 8.73317 9 7.99984 9C7.2665 9 6.6665 9.6 6.6665 10.3333C6.6665 11.0667 7.2665 11.6667 7.99984 11.6667Z\" fill=\"currentColor\"/>\n </svg>\n </div>\n <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px] cqa-min-w-[32px]\">{{ stepNumber }}</span>\n <span title=\"AI Agent\" class=\"cqa-w-8 cqa-h-8 cqa-rounded-lg cqa-flex cqa-items-center cqa-justify-center cqa-flex-shrink-0 cqa-bg-[#EDE9FE] cqa-text-[#7C3AED]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.797 9.04165C5.74492 8.83977 5.63969 8.65554 5.49227 8.50812C5.34485 8.3607 5.16062 8.25548 4.95875 8.2034L1.38 7.28057C1.31894 7.26324 1.2652 7.22646 1.22694 7.17583C1.18867 7.12519 1.16797 7.06345 1.16797 6.99998C1.16797 6.93651 1.18867 6.87478 1.22694 6.82414C1.2652 6.7735 1.31894 6.73673 1.38 6.7194L4.95875 5.79598C5.16055 5.74395 5.34473 5.63882 5.49215 5.49151C5.63956 5.34419 5.74483 5.16008 5.797 4.95832L6.71983 1.37957C6.73698 1.31827 6.77372 1.26427 6.82443 1.2258C6.87515 1.18733 6.93705 1.1665 7.0007 1.1665C7.06436 1.1665 7.12626 1.18733 7.17698 1.2258C7.22769 1.26427 7.26442 1.31827 7.28158 1.37957L8.20383 4.95832C8.25591 5.16019 8.36113 5.34442 8.50855 5.49184C8.65597 5.63926 8.8402 5.74449 9.04208 5.79657L12.6208 6.71882C12.6824 6.73579 12.7366 6.77249 12.7753 6.82328C12.814 6.87407 12.8349 6.93614 12.8349 6.99998C12.8349 7.06382 12.814 7.1259 12.7753 7.17669C12.7366 7.22748 12.6824 7.26417 12.6208 7.28115L9.04208 8.2034C8.8402 8.25548 8.65597 8.3607 8.50855 8.50812C8.36113 8.65554 8.25591 8.83977 8.20383 9.04165L7.281 12.6204C7.26384 12.6817 7.22711 12.7357 7.17639 12.7742C7.12568 12.8126 7.06377 12.8335 7.00012 12.8335C6.93647 12.8335 6.87456 12.8126 6.82385 12.7742C6.77314 12.7357 6.7364 12.6817 6.71925 12.6204L5.797 9.04165Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11.666 1.75V4.08333\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M12.8333 2.91663H10.5\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.33398 9.91663V11.0833\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.91667 10.5H1.75\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </span>\n <span style=\"white-space: nowrap; flex-shrink: 0; min-width: fit-content;\" class=\"cqa-min-w-fit cqa-flex-shrink-0 cqa-whitespace-nowrap cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px]\">AI Agent</span>\n <div class=\"cqa-ai-agent-unified-box cqa-min-w-0 cqa-flex-1\">\n <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px] !cqa-inline-flex cqa-items-center cqa-action-format cqa-ai-agent-unified-inner\"\n style=\"white-space: pre-wrap;\"\n [innerHTML]=\"displayInstructions | cqaSafeHtml\"></span>\n </div>\n <div class=\"cqa-flex-grow\"></div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-self-center\">\n <span *ngIf=\"config?.shouldSkip\" 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] cqa-flex-shrink-0\">Skipped</span>\n <div *ngIf=\"editable && !isInsideStepGroup && !isReorder\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-1.5 cqa-pr-2\">\n <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><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></button>\n <button type=\"button\" (click)=\"onSkipToggle(); $event.stopPropagation()\" [attr.title]=\"config?.shouldSkip ? 'Unskip step' : 'Skip step'\" [style.color]=\"config?.shouldSkip ? '#1447E6' : null\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M8.25 8.75C9.2165 8.75 10 7.9665 10 7C10 6.0335 9.2165 5.25 8.25 5.25C7.2835 5.25 6.5 6.0335 6.5 7C6.5 7.9665 7.2835 8.75 8.25 8.75Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M8.75033 2.91663H5.25033C2.99516 2.91663 1.16699 4.7448 1.16699 6.99996C1.16699 9.25512 2.99516 11.0833 5.25033 11.0833H8.75033C11.0055 11.0833 12.8337 9.25512 12.8337 6.99996C12.8337 4.7448 11.0055 2.91663 8.75033 2.91663Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></button>\n <!-- <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><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></button> -->\n <button type=\"button\" (click)=\"onDuplicate(); $event.stopPropagation()\" title=\"Duplicate\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><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></button>\n <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\" class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\"><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></button>\n </div>\n <a *ngIf=\"description && description.trim() !== ''\" #viewDetailsTrigger href=\"#\" (click)=\"onViewDetails($event)\" class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-1 cqa-no-underline\">View Details<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></a>\n <!-- Created Date (from API) - last so aligned across all steps, format: 25 Feb 2026 -->\n <span *ngIf=\"config.createdDate\" class=\"step-date cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px] cqa-ml-auto cqa-flex-shrink-0\">\n {{ config.createdDate | date:'d MMM yyyy' }}\n </span>\n </div>\n</div>\n" }]
34179
34187
  }], ctorParameters: function () { return []; }, propDecorators: { config: [{
34180
34188
  type: Input
34181
34189
  }], stepNumber: [{
@@ -34224,8 +34232,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
34224
34232
  }] } });
34225
34233
 
34226
34234
  class TestCaseAiVerifyStepComponent {
34227
- constructor(sanitizer) {
34228
- this.sanitizer = sanitizer;
34235
+ constructor() {
34229
34236
  this.instructions = '';
34230
34237
  this.selected = false;
34231
34238
  this.disabled = false;
@@ -34295,22 +34302,18 @@ class TestCaseAiVerifyStepComponent {
34295
34302
  }
34296
34303
  }
34297
34304
  onSelectionChange(checked) { this.selected = checked; this.selectionChange.emit(checked); }
34298
- /**
34299
- * Get sanitized HTML for instructions to preserve data-key and data-event-key attributes
34300
- */
34301
- getSanitizedInstructions() {
34302
- if (this.instructions) {
34303
- return this.sanitizer.bypassSecurityTrustHtml(this.instructions);
34304
- }
34305
- return this.sanitizer.bypassSecurityTrustHtml('');
34305
+ /** Strips the leading "AI Verification" / "AI Verify" prefix because it is rendered as a separate label span. */
34306
+ get displayInstructions() {
34307
+ const raw = this.instructions || '';
34308
+ return raw.replace(/^\s*(?:<[^>]+>\s*)*AI\s+Verif(?:ication|y)\s*:?\s*/i, '');
34306
34309
  }
34307
34310
  }
34308
- TestCaseAiVerifyStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseAiVerifyStepComponent, deps: [{ token: i1$2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
34309
- TestCaseAiVerifyStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestCaseAiVerifyStepComponent, selector: "cqa-test-case-ai-verify-step", inputs: { config: "config", stepNumber: "stepNumber", index: "index", instructions: "instructions", description: "description", selected: "selected", disabled: "disabled", isNested: "isNested", isInsideStepGroup: "isInsideStepGroup", isInsideLoop: "isInsideLoop", isReorder: "isReorder", editable: "editable", nestingLevel: "nestingLevel" }, outputs: { edit: "edit", editInDepth: "editInDepth", link: "link", duplicate: "duplicate", delete: "delete", moreOptions: "moreOptions", viewDetails: "viewDetails", selectionChange: "selectionChange", stepUpdate: "stepUpdate" }, host: { classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "viewDetailsTrigger", first: true, predicate: ["viewDetailsTrigger"], descendants: true }], ngImport: i0, template: "<div\n [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 cqa-pr-4' + (config?.shouldSkip ? ' cqa-step-skipped' : '')\"\n [style.opacity]=\"config?.shouldSkip ? '0.6' : null\"\n [style.border-top]=\"isInsideStepGroup ? '1px solid #BEDBFF' : '1px solid #E5E7EB'\"\n [style.padding-left.px]=\"getRowPaddingLeftPx()\"\n>\n <div *ngIf=\"!isInsideStepGroup\" class=\"cqa-inline-flex cqa-items-center\">\n <!-- Drag Handle Icon (when isReorder is true and not inside step group - steps inside step groups cannot be reordered) -->\n <div *ngIf=\"isReorder && !isInsideStepGroup\" 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 and not inside step group - hide for steps inside step groups) -->\n <label *ngIf=\"editable && !isReorder && !isInsideStepGroup\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative cqa-mr-2\">\n <input type=\"checkbox\"\n [ngModel]=\"selected\"\n [disabled]=\"disabled\"\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\" />\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 </div>\n <div *ngIf=\"isInsideStepGroup\" class=\"cqa-flex cqa-flex-shrink-0 cqa-items-center cqa-pl-0 cqa-pr-1 cqa-text-[#9CA3AF]\" aria-hidden=\"true\" title=\"Step is inside a group\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M11.9998 5.66667H11.3332V4.33333C11.3332 2.49333 9.83984 1 7.99984 1C6.15984 1 4.6665 2.49333 4.6665 4.33333V5.66667H3.99984C3.2665 5.66667 2.6665 6.26667 2.6665 7V13.6667C2.6665 14.4 3.2665 15 3.99984 15H11.9998C12.7332 15 13.3332 14.4 13.3332 13.6667V7C13.3332 6.26667 12.7332 5.66667 11.9998 5.66667ZM5.99984 4.33333C5.99984 3.22667 6.89317 2.33333 7.99984 2.33333C9.1065 2.33333 9.99984 3.22667 9.99984 4.33333V5.66667H5.99984V4.33333ZM11.9998 13.6667H3.99984V7H11.9998V13.6667ZM7.99984 11.6667C8.73317 11.6667 9.33317 11.0667 9.33317 10.3333C9.33317 9.6 8.73317 9 7.99984 9C7.2665 9 6.6665 9.6 6.6665 10.3333C6.6665 11.0667 7.2665 11.6667 7.99984 11.6667Z\" fill=\"currentColor\"/>\n </svg>\n </div>\n <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px] cqa-min-w-[32px]\">{{ stepNumber }}</span>\n <span title=\"AI Verify\" class=\"cqa-w-8 cqa-h-8 cqa-rounded-lg cqa-flex cqa-items-center cqa-justify-center cqa-flex-shrink-0 cqa-bg-[#F3E8FF] cqa-text-[#7E22CE]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.797 9.04165C5.74492 8.83977 5.63969 8.65554 5.49227 8.50812C5.34485 8.3607 5.16062 8.25548 4.95875 8.2034L1.38 7.28057C1.31894 7.26324 1.2652 7.22646 1.22694 7.17583C1.18867 7.12519 1.16797 7.06345 1.16797 6.99998C1.16797 6.93651 1.18867 6.87478 1.22694 6.82414C1.2652 6.7735 1.31894 6.73673 1.38 6.7194L4.95875 5.79598C5.16055 5.74395 5.34473 5.63882 5.49215 5.49151C5.63956 5.34419 5.74483 5.16008 5.797 4.95832L6.71983 1.37957C6.73698 1.31827 6.77372 1.26427 6.82443 1.2258C6.87515 1.18733 6.93705 1.1665 7.0007 1.1665C7.06436 1.1665 7.12626 1.18733 7.17698 1.2258C7.22769 1.26427 7.26442 1.31827 7.28158 1.37957L8.20383 4.95832C8.25591 5.16019 8.36113 5.34442 8.50855 5.49184C8.65597 5.63926 8.8402 5.74449 9.04208 5.79657L12.6208 6.71882C12.6824 6.73579 12.7366 6.77249 12.7753 6.82328C12.814 6.87407 12.8349 6.93614 12.8349 6.99998C12.8349 7.06382 12.814 7.1259 12.7753 7.17669C12.7366 7.22748 12.6824 7.26417 12.6208 7.28115L9.04208 8.2034C8.8402 8.25548 8.65597 8.3607 8.50855 8.50812C8.36113 8.65554 8.25591 8.83977 8.20383 9.04165L7.281 12.6204C7.26384 12.6817 7.22711 12.7357 7.17639 12.7742C7.12568 12.8126 7.06377 12.8335 7.00012 12.8335C6.93647 12.8335 6.87456 12.8126 6.82385 12.7742C6.77314 12.7357 6.7364 12.6817 6.71925 12.6204L5.797 9.04165Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11.666 1.75V4.08333\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M12.8333 2.91663H10.5\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.33398 9.91663V11.0833\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.91667 10.5H1.75\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </span>\n <div class=\"cqa-min-w-0 cqa-flex-1\">\n <span class=\"cqa-action-format cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px] cqa-block cqa-break-words\" [innerHTML]=\"getSanitizedInstructions()\"></span>\n </div>\n <div class=\"cqa-flex-grow\"></div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-self-center\">\n <span *ngIf=\"config?.shouldSkip\" 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] cqa-flex-shrink-0\">Skipped</span>\n <div *ngIf=\"editable && !isInsideStepGroup && !isReorder\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-1.5 cqa-pr-2\">\n <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><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></button>\n <button type=\"button\" (click)=\"onSkipToggle(); $event.stopPropagation()\" [attr.title]=\"config?.shouldSkip ? 'Unskip step' : 'Skip step'\" [style.color]=\"config?.shouldSkip ? '#1447E6' : null\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M8.25 8.75C9.2165 8.75 10 7.9665 10 7C10 6.0335 9.2165 5.25 8.25 5.25C7.2835 5.25 6.5 6.0335 6.5 7C6.5 7.9665 7.2835 8.75 8.25 8.75Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M8.75033 2.91663H5.25033C2.99516 2.91663 1.16699 4.7448 1.16699 6.99996C1.16699 9.25512 2.99516 11.0833 5.25033 11.0833H8.75033C11.0055 11.0833 12.8337 9.25512 12.8337 6.99996C12.8337 4.7448 11.0055 2.91663 8.75033 2.91663Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></button>\n <!-- <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><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></button> -->\n <button type=\"button\" (click)=\"onDuplicate(); $event.stopPropagation()\" title=\"Duplicate\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><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></button>\n <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\" class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\"><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></button>\n </div>\n <a *ngIf=\"description && description.trim() !== ''\" #viewDetailsTrigger href=\"#\" (click)=\"onViewDetails($event)\" class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-1 cqa-no-underline\">View Details<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></a>\n <!-- Created Date (from API) - last so aligned across all steps, format: 25 Feb 2026 -->\n <span *ngIf=\"config.createdDate\" class=\"step-date cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px] cqa-ml-auto cqa-flex-shrink-0\">\n {{ config.createdDate | date:'d MMM yyyy' }}\n </span>\n </div>\n</div>\n", styles: [".step-actions{opacity:0;transition:opacity .15s ease}.step-row:hover .step-actions{opacity:1}.step-row{vertical-align:middle;letter-spacing:normal}\n"], 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"] }], pipes: { "date": i2.DatePipe } });
34311
+ TestCaseAiVerifyStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseAiVerifyStepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
34312
+ TestCaseAiVerifyStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestCaseAiVerifyStepComponent, selector: "cqa-test-case-ai-verify-step", inputs: { config: "config", stepNumber: "stepNumber", index: "index", instructions: "instructions", description: "description", selected: "selected", disabled: "disabled", isNested: "isNested", isInsideStepGroup: "isInsideStepGroup", isInsideLoop: "isInsideLoop", isReorder: "isReorder", editable: "editable", nestingLevel: "nestingLevel" }, outputs: { edit: "edit", editInDepth: "editInDepth", link: "link", duplicate: "duplicate", delete: "delete", moreOptions: "moreOptions", viewDetails: "viewDetails", selectionChange: "selectionChange", stepUpdate: "stepUpdate" }, host: { classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "viewDetailsTrigger", first: true, predicate: ["viewDetailsTrigger"], descendants: true }], ngImport: i0, template: "<div\n [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 cqa-pr-4' + (config?.shouldSkip ? ' cqa-step-skipped' : '')\"\n [style.opacity]=\"config?.shouldSkip ? '0.6' : null\"\n [style.border-top]=\"isInsideStepGroup ? '1px solid #BEDBFF' : '1px solid #E5E7EB'\"\n [style.padding-left.px]=\"getRowPaddingLeftPx()\"\n>\n <div *ngIf=\"!isInsideStepGroup\" class=\"cqa-inline-flex cqa-items-center\">\n <!-- Drag Handle Icon (when isReorder is true and not inside step group - steps inside step groups cannot be reordered) -->\n <div *ngIf=\"isReorder && !isInsideStepGroup\" 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 and not inside step group - hide for steps inside step groups) -->\n <label *ngIf=\"editable && !isReorder && !isInsideStepGroup\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative cqa-mr-2\">\n <input type=\"checkbox\"\n [ngModel]=\"selected\"\n [disabled]=\"disabled\"\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\" />\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 </div>\n <div *ngIf=\"isInsideStepGroup\" class=\"cqa-flex cqa-flex-shrink-0 cqa-items-center cqa-pl-0 cqa-pr-1 cqa-text-[#9CA3AF]\" aria-hidden=\"true\" title=\"Step is inside a group\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M11.9998 5.66667H11.3332V4.33333C11.3332 2.49333 9.83984 1 7.99984 1C6.15984 1 4.6665 2.49333 4.6665 4.33333V5.66667H3.99984C3.2665 5.66667 2.6665 6.26667 2.6665 7V13.6667C2.6665 14.4 3.2665 15 3.99984 15H11.9998C12.7332 15 13.3332 14.4 13.3332 13.6667V7C13.3332 6.26667 12.7332 5.66667 11.9998 5.66667ZM5.99984 4.33333C5.99984 3.22667 6.89317 2.33333 7.99984 2.33333C9.1065 2.33333 9.99984 3.22667 9.99984 4.33333V5.66667H5.99984V4.33333ZM11.9998 13.6667H3.99984V7H11.9998V13.6667ZM7.99984 11.6667C8.73317 11.6667 9.33317 11.0667 9.33317 10.3333C9.33317 9.6 8.73317 9 7.99984 9C7.2665 9 6.6665 9.6 6.6665 10.3333C6.6665 11.0667 7.2665 11.6667 7.99984 11.6667Z\" fill=\"currentColor\"/>\n </svg>\n </div>\n <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px] cqa-min-w-[32px]\">{{ stepNumber }}</span>\n <span title=\"AI Verify\" class=\"cqa-w-8 cqa-h-8 cqa-rounded-lg cqa-flex cqa-items-center cqa-justify-center cqa-flex-shrink-0 cqa-bg-[#F3E8FF] cqa-text-[#7E22CE]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.797 9.04165C5.74492 8.83977 5.63969 8.65554 5.49227 8.50812C5.34485 8.3607 5.16062 8.25548 4.95875 8.2034L1.38 7.28057C1.31894 7.26324 1.2652 7.22646 1.22694 7.17583C1.18867 7.12519 1.16797 7.06345 1.16797 6.99998C1.16797 6.93651 1.18867 6.87478 1.22694 6.82414C1.2652 6.7735 1.31894 6.73673 1.38 6.7194L4.95875 5.79598C5.16055 5.74395 5.34473 5.63882 5.49215 5.49151C5.63956 5.34419 5.74483 5.16008 5.797 4.95832L6.71983 1.37957C6.73698 1.31827 6.77372 1.26427 6.82443 1.2258C6.87515 1.18733 6.93705 1.1665 7.0007 1.1665C7.06436 1.1665 7.12626 1.18733 7.17698 1.2258C7.22769 1.26427 7.26442 1.31827 7.28158 1.37957L8.20383 4.95832C8.25591 5.16019 8.36113 5.34442 8.50855 5.49184C8.65597 5.63926 8.8402 5.74449 9.04208 5.79657L12.6208 6.71882C12.6824 6.73579 12.7366 6.77249 12.7753 6.82328C12.814 6.87407 12.8349 6.93614 12.8349 6.99998C12.8349 7.06382 12.814 7.1259 12.7753 7.17669C12.7366 7.22748 12.6824 7.26417 12.6208 7.28115L9.04208 8.2034C8.8402 8.25548 8.65597 8.3607 8.50855 8.50812C8.36113 8.65554 8.25591 8.83977 8.20383 9.04165L7.281 12.6204C7.26384 12.6817 7.22711 12.7357 7.17639 12.7742C7.12568 12.8126 7.06377 12.8335 7.00012 12.8335C6.93647 12.8335 6.87456 12.8126 6.82385 12.7742C6.77314 12.7357 6.7364 12.6817 6.71925 12.6204L5.797 9.04165Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11.666 1.75V4.08333\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M12.8333 2.91663H10.5\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.33398 9.91663V11.0833\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.91667 10.5H1.75\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </span>\n <span style=\"white-space: nowrap; flex-shrink: 0; min-width: fit-content;\" class=\"cqa-min-w-fit cqa-flex-shrink-0 cqa-whitespace-nowrap cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px]\">AI Verification</span>\n <div class=\"cqa-ai-agent-unified-box cqa-min-w-0 cqa-flex-1\">\n <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px] !cqa-inline-flex cqa-items-center cqa-action-format cqa-ai-agent-unified-inner\"\n style=\"white-space: pre-wrap;\"\n [innerHTML]=\"displayInstructions | cqaSafeHtml\"></span>\n </div>\n <div class=\"cqa-flex-grow\"></div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-self-center\">\n <span *ngIf=\"config?.shouldSkip\" 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] cqa-flex-shrink-0\">Skipped</span>\n <div *ngIf=\"editable && !isInsideStepGroup && !isReorder\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-1.5 cqa-pr-2\">\n <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><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></button>\n <button type=\"button\" (click)=\"onSkipToggle(); $event.stopPropagation()\" [attr.title]=\"config?.shouldSkip ? 'Unskip step' : 'Skip step'\" [style.color]=\"config?.shouldSkip ? '#1447E6' : null\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M8.25 8.75C9.2165 8.75 10 7.9665 10 7C10 6.0335 9.2165 5.25 8.25 5.25C7.2835 5.25 6.5 6.0335 6.5 7C6.5 7.9665 7.2835 8.75 8.25 8.75Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M8.75033 2.91663H5.25033C2.99516 2.91663 1.16699 4.7448 1.16699 6.99996C1.16699 9.25512 2.99516 11.0833 5.25033 11.0833H8.75033C11.0055 11.0833 12.8337 9.25512 12.8337 6.99996C12.8337 4.7448 11.0055 2.91663 8.75033 2.91663Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></button>\n <!-- <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><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></button> -->\n <button type=\"button\" (click)=\"onDuplicate(); $event.stopPropagation()\" title=\"Duplicate\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><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></button>\n <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\" class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\"><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></button>\n </div>\n <a *ngIf=\"description && description.trim() !== ''\" #viewDetailsTrigger href=\"#\" (click)=\"onViewDetails($event)\" class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-1 cqa-no-underline\">View Details<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></a>\n <!-- Created Date (from API) - last so aligned across all steps, format: 25 Feb 2026 -->\n <span *ngIf=\"config.createdDate\" class=\"step-date cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px] cqa-ml-auto cqa-flex-shrink-0\">\n {{ config.createdDate | date:'d MMM yyyy' }}\n </span>\n </div>\n</div>\n", styles: [".step-actions{opacity:0;transition:opacity .15s ease}.step-row:hover .step-actions{opacity:1}.step-row{vertical-align:middle;letter-spacing:normal}\n"], 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"] }], pipes: { "cqaSafeHtml": SafeHtmlPipe, "date": i2.DatePipe } });
34310
34313
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseAiVerifyStepComponent, decorators: [{
34311
34314
  type: Component,
34312
- args: [{ selector: 'cqa-test-case-ai-verify-step', host: { class: 'cqa-ui-root' }, styles: [STEP_ROW_ACTIONS_STYLES], template: "<div\n [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 cqa-pr-4' + (config?.shouldSkip ? ' cqa-step-skipped' : '')\"\n [style.opacity]=\"config?.shouldSkip ? '0.6' : null\"\n [style.border-top]=\"isInsideStepGroup ? '1px solid #BEDBFF' : '1px solid #E5E7EB'\"\n [style.padding-left.px]=\"getRowPaddingLeftPx()\"\n>\n <div *ngIf=\"!isInsideStepGroup\" class=\"cqa-inline-flex cqa-items-center\">\n <!-- Drag Handle Icon (when isReorder is true and not inside step group - steps inside step groups cannot be reordered) -->\n <div *ngIf=\"isReorder && !isInsideStepGroup\" 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 and not inside step group - hide for steps inside step groups) -->\n <label *ngIf=\"editable && !isReorder && !isInsideStepGroup\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative cqa-mr-2\">\n <input type=\"checkbox\"\n [ngModel]=\"selected\"\n [disabled]=\"disabled\"\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\" />\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 </div>\n <div *ngIf=\"isInsideStepGroup\" class=\"cqa-flex cqa-flex-shrink-0 cqa-items-center cqa-pl-0 cqa-pr-1 cqa-text-[#9CA3AF]\" aria-hidden=\"true\" title=\"Step is inside a group\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M11.9998 5.66667H11.3332V4.33333C11.3332 2.49333 9.83984 1 7.99984 1C6.15984 1 4.6665 2.49333 4.6665 4.33333V5.66667H3.99984C3.2665 5.66667 2.6665 6.26667 2.6665 7V13.6667C2.6665 14.4 3.2665 15 3.99984 15H11.9998C12.7332 15 13.3332 14.4 13.3332 13.6667V7C13.3332 6.26667 12.7332 5.66667 11.9998 5.66667ZM5.99984 4.33333C5.99984 3.22667 6.89317 2.33333 7.99984 2.33333C9.1065 2.33333 9.99984 3.22667 9.99984 4.33333V5.66667H5.99984V4.33333ZM11.9998 13.6667H3.99984V7H11.9998V13.6667ZM7.99984 11.6667C8.73317 11.6667 9.33317 11.0667 9.33317 10.3333C9.33317 9.6 8.73317 9 7.99984 9C7.2665 9 6.6665 9.6 6.6665 10.3333C6.6665 11.0667 7.2665 11.6667 7.99984 11.6667Z\" fill=\"currentColor\"/>\n </svg>\n </div>\n <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px] cqa-min-w-[32px]\">{{ stepNumber }}</span>\n <span title=\"AI Verify\" class=\"cqa-w-8 cqa-h-8 cqa-rounded-lg cqa-flex cqa-items-center cqa-justify-center cqa-flex-shrink-0 cqa-bg-[#F3E8FF] cqa-text-[#7E22CE]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.797 9.04165C5.74492 8.83977 5.63969 8.65554 5.49227 8.50812C5.34485 8.3607 5.16062 8.25548 4.95875 8.2034L1.38 7.28057C1.31894 7.26324 1.2652 7.22646 1.22694 7.17583C1.18867 7.12519 1.16797 7.06345 1.16797 6.99998C1.16797 6.93651 1.18867 6.87478 1.22694 6.82414C1.2652 6.7735 1.31894 6.73673 1.38 6.7194L4.95875 5.79598C5.16055 5.74395 5.34473 5.63882 5.49215 5.49151C5.63956 5.34419 5.74483 5.16008 5.797 4.95832L6.71983 1.37957C6.73698 1.31827 6.77372 1.26427 6.82443 1.2258C6.87515 1.18733 6.93705 1.1665 7.0007 1.1665C7.06436 1.1665 7.12626 1.18733 7.17698 1.2258C7.22769 1.26427 7.26442 1.31827 7.28158 1.37957L8.20383 4.95832C8.25591 5.16019 8.36113 5.34442 8.50855 5.49184C8.65597 5.63926 8.8402 5.74449 9.04208 5.79657L12.6208 6.71882C12.6824 6.73579 12.7366 6.77249 12.7753 6.82328C12.814 6.87407 12.8349 6.93614 12.8349 6.99998C12.8349 7.06382 12.814 7.1259 12.7753 7.17669C12.7366 7.22748 12.6824 7.26417 12.6208 7.28115L9.04208 8.2034C8.8402 8.25548 8.65597 8.3607 8.50855 8.50812C8.36113 8.65554 8.25591 8.83977 8.20383 9.04165L7.281 12.6204C7.26384 12.6817 7.22711 12.7357 7.17639 12.7742C7.12568 12.8126 7.06377 12.8335 7.00012 12.8335C6.93647 12.8335 6.87456 12.8126 6.82385 12.7742C6.77314 12.7357 6.7364 12.6817 6.71925 12.6204L5.797 9.04165Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11.666 1.75V4.08333\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M12.8333 2.91663H10.5\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.33398 9.91663V11.0833\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.91667 10.5H1.75\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </span>\n <div class=\"cqa-min-w-0 cqa-flex-1\">\n <span class=\"cqa-action-format cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px] cqa-block cqa-break-words\" [innerHTML]=\"getSanitizedInstructions()\"></span>\n </div>\n <div class=\"cqa-flex-grow\"></div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-self-center\">\n <span *ngIf=\"config?.shouldSkip\" 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] cqa-flex-shrink-0\">Skipped</span>\n <div *ngIf=\"editable && !isInsideStepGroup && !isReorder\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-1.5 cqa-pr-2\">\n <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><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></button>\n <button type=\"button\" (click)=\"onSkipToggle(); $event.stopPropagation()\" [attr.title]=\"config?.shouldSkip ? 'Unskip step' : 'Skip step'\" [style.color]=\"config?.shouldSkip ? '#1447E6' : null\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M8.25 8.75C9.2165 8.75 10 7.9665 10 7C10 6.0335 9.2165 5.25 8.25 5.25C7.2835 5.25 6.5 6.0335 6.5 7C6.5 7.9665 7.2835 8.75 8.25 8.75Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M8.75033 2.91663H5.25033C2.99516 2.91663 1.16699 4.7448 1.16699 6.99996C1.16699 9.25512 2.99516 11.0833 5.25033 11.0833H8.75033C11.0055 11.0833 12.8337 9.25512 12.8337 6.99996C12.8337 4.7448 11.0055 2.91663 8.75033 2.91663Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></button>\n <!-- <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><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></button> -->\n <button type=\"button\" (click)=\"onDuplicate(); $event.stopPropagation()\" title=\"Duplicate\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><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></button>\n <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\" class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\"><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></button>\n </div>\n <a *ngIf=\"description && description.trim() !== ''\" #viewDetailsTrigger href=\"#\" (click)=\"onViewDetails($event)\" class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-1 cqa-no-underline\">View Details<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></a>\n <!-- Created Date (from API) - last so aligned across all steps, format: 25 Feb 2026 -->\n <span *ngIf=\"config.createdDate\" class=\"step-date cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px] cqa-ml-auto cqa-flex-shrink-0\">\n {{ config.createdDate | date:'d MMM yyyy' }}\n </span>\n </div>\n</div>\n" }]
34313
- }], ctorParameters: function () { return [{ type: i1$2.DomSanitizer }]; }, propDecorators: { config: [{
34315
+ args: [{ selector: 'cqa-test-case-ai-verify-step', host: { class: 'cqa-ui-root' }, styles: [STEP_ROW_ACTIONS_STYLES], template: "<div\n [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 cqa-pr-4' + (config?.shouldSkip ? ' cqa-step-skipped' : '')\"\n [style.opacity]=\"config?.shouldSkip ? '0.6' : null\"\n [style.border-top]=\"isInsideStepGroup ? '1px solid #BEDBFF' : '1px solid #E5E7EB'\"\n [style.padding-left.px]=\"getRowPaddingLeftPx()\"\n>\n <div *ngIf=\"!isInsideStepGroup\" class=\"cqa-inline-flex cqa-items-center\">\n <!-- Drag Handle Icon (when isReorder is true and not inside step group - steps inside step groups cannot be reordered) -->\n <div *ngIf=\"isReorder && !isInsideStepGroup\" 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 and not inside step group - hide for steps inside step groups) -->\n <label *ngIf=\"editable && !isReorder && !isInsideStepGroup\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative cqa-mr-2\">\n <input type=\"checkbox\"\n [ngModel]=\"selected\"\n [disabled]=\"disabled\"\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\" />\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 </div>\n <div *ngIf=\"isInsideStepGroup\" class=\"cqa-flex cqa-flex-shrink-0 cqa-items-center cqa-pl-0 cqa-pr-1 cqa-text-[#9CA3AF]\" aria-hidden=\"true\" title=\"Step is inside a group\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M11.9998 5.66667H11.3332V4.33333C11.3332 2.49333 9.83984 1 7.99984 1C6.15984 1 4.6665 2.49333 4.6665 4.33333V5.66667H3.99984C3.2665 5.66667 2.6665 6.26667 2.6665 7V13.6667C2.6665 14.4 3.2665 15 3.99984 15H11.9998C12.7332 15 13.3332 14.4 13.3332 13.6667V7C13.3332 6.26667 12.7332 5.66667 11.9998 5.66667ZM5.99984 4.33333C5.99984 3.22667 6.89317 2.33333 7.99984 2.33333C9.1065 2.33333 9.99984 3.22667 9.99984 4.33333V5.66667H5.99984V4.33333ZM11.9998 13.6667H3.99984V7H11.9998V13.6667ZM7.99984 11.6667C8.73317 11.6667 9.33317 11.0667 9.33317 10.3333C9.33317 9.6 8.73317 9 7.99984 9C7.2665 9 6.6665 9.6 6.6665 10.3333C6.6665 11.0667 7.2665 11.6667 7.99984 11.6667Z\" fill=\"currentColor\"/>\n </svg>\n </div>\n <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px] cqa-min-w-[32px]\">{{ stepNumber }}</span>\n <span title=\"AI Verify\" class=\"cqa-w-8 cqa-h-8 cqa-rounded-lg cqa-flex cqa-items-center cqa-justify-center cqa-flex-shrink-0 cqa-bg-[#F3E8FF] cqa-text-[#7E22CE]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.797 9.04165C5.74492 8.83977 5.63969 8.65554 5.49227 8.50812C5.34485 8.3607 5.16062 8.25548 4.95875 8.2034L1.38 7.28057C1.31894 7.26324 1.2652 7.22646 1.22694 7.17583C1.18867 7.12519 1.16797 7.06345 1.16797 6.99998C1.16797 6.93651 1.18867 6.87478 1.22694 6.82414C1.2652 6.7735 1.31894 6.73673 1.38 6.7194L4.95875 5.79598C5.16055 5.74395 5.34473 5.63882 5.49215 5.49151C5.63956 5.34419 5.74483 5.16008 5.797 4.95832L6.71983 1.37957C6.73698 1.31827 6.77372 1.26427 6.82443 1.2258C6.87515 1.18733 6.93705 1.1665 7.0007 1.1665C7.06436 1.1665 7.12626 1.18733 7.17698 1.2258C7.22769 1.26427 7.26442 1.31827 7.28158 1.37957L8.20383 4.95832C8.25591 5.16019 8.36113 5.34442 8.50855 5.49184C8.65597 5.63926 8.8402 5.74449 9.04208 5.79657L12.6208 6.71882C12.6824 6.73579 12.7366 6.77249 12.7753 6.82328C12.814 6.87407 12.8349 6.93614 12.8349 6.99998C12.8349 7.06382 12.814 7.1259 12.7753 7.17669C12.7366 7.22748 12.6824 7.26417 12.6208 7.28115L9.04208 8.2034C8.8402 8.25548 8.65597 8.3607 8.50855 8.50812C8.36113 8.65554 8.25591 8.83977 8.20383 9.04165L7.281 12.6204C7.26384 12.6817 7.22711 12.7357 7.17639 12.7742C7.12568 12.8126 7.06377 12.8335 7.00012 12.8335C6.93647 12.8335 6.87456 12.8126 6.82385 12.7742C6.77314 12.7357 6.7364 12.6817 6.71925 12.6204L5.797 9.04165Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11.666 1.75V4.08333\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M12.8333 2.91663H10.5\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.33398 9.91663V11.0833\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.91667 10.5H1.75\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </span>\n <span style=\"white-space: nowrap; flex-shrink: 0; min-width: fit-content;\" class=\"cqa-min-w-fit cqa-flex-shrink-0 cqa-whitespace-nowrap cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px]\">AI Verification</span>\n <div class=\"cqa-ai-agent-unified-box cqa-min-w-0 cqa-flex-1\">\n <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px] !cqa-inline-flex cqa-items-center cqa-action-format cqa-ai-agent-unified-inner\"\n style=\"white-space: pre-wrap;\"\n [innerHTML]=\"displayInstructions | cqaSafeHtml\"></span>\n </div>\n <div class=\"cqa-flex-grow\"></div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-self-center\">\n <span *ngIf=\"config?.shouldSkip\" 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] cqa-flex-shrink-0\">Skipped</span>\n <div *ngIf=\"editable && !isInsideStepGroup && !isReorder\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-1.5 cqa-pr-2\">\n <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><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></button>\n <button type=\"button\" (click)=\"onSkipToggle(); $event.stopPropagation()\" [attr.title]=\"config?.shouldSkip ? 'Unskip step' : 'Skip step'\" [style.color]=\"config?.shouldSkip ? '#1447E6' : null\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M8.25 8.75C9.2165 8.75 10 7.9665 10 7C10 6.0335 9.2165 5.25 8.25 5.25C7.2835 5.25 6.5 6.0335 6.5 7C6.5 7.9665 7.2835 8.75 8.25 8.75Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M8.75033 2.91663H5.25033C2.99516 2.91663 1.16699 4.7448 1.16699 6.99996C1.16699 9.25512 2.99516 11.0833 5.25033 11.0833H8.75033C11.0055 11.0833 12.8337 9.25512 12.8337 6.99996C12.8337 4.7448 11.0055 2.91663 8.75033 2.91663Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></button>\n <!-- <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><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></button> -->\n <button type=\"button\" (click)=\"onDuplicate(); $event.stopPropagation()\" title=\"Duplicate\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><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></button>\n <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\" class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\"><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></button>\n </div>\n <a *ngIf=\"description && description.trim() !== ''\" #viewDetailsTrigger href=\"#\" (click)=\"onViewDetails($event)\" class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-1 cqa-no-underline\">View Details<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></a>\n <!-- Created Date (from API) - last so aligned across all steps, format: 25 Feb 2026 -->\n <span *ngIf=\"config.createdDate\" class=\"step-date cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px] cqa-ml-auto cqa-flex-shrink-0\">\n {{ config.createdDate | date:'d MMM yyyy' }}\n </span>\n </div>\n</div>\n" }]
34316
+ }], ctorParameters: function () { return []; }, propDecorators: { config: [{
34314
34317
  type: Input
34315
34318
  }], stepNumber: [{
34316
34319
  type: Input
@@ -45823,11 +45826,17 @@ class StepBuilderDocumentComponent {
45823
45826
  if (this.initialMappings && this.initialMappings.length > 0) {
45824
45827
  this.initialMappings.forEach(mapping => {
45825
45828
  var _a;
45829
+ const legacy = mapping;
45830
+ const seedEntries = Array.isArray(mapping.values) && mapping.values.length > 0
45831
+ ? mapping.values
45832
+ : (legacy.valueType !== undefined || legacy.value !== undefined)
45833
+ ? [{ valueType: legacy.valueType || 'variable', value: legacy.value || '' }]
45834
+ : [{ valueType: 'variable', value: '' }];
45835
+ const valuesArray = this.fb.array(seedEntries.map(entry => this.buildValueEntry(entry)));
45826
45836
  const mappingGroup = this.fb.group({
45827
45837
  key: [mapping.key || '', Validators.required],
45828
- valueType: [mapping.valueType || 'variable', Validators.required],
45829
- value: [mapping.value || '', Validators.required],
45830
- enabled: [(_a = mapping.enabled) !== null && _a !== void 0 ? _a : false]
45838
+ enabled: [(_a = mapping.enabled) !== null && _a !== void 0 ? _a : false],
45839
+ values: valuesArray
45831
45840
  });
45832
45841
  this.mappingsFormArray.push(mappingGroup);
45833
45842
  });
@@ -45860,7 +45869,7 @@ class StepBuilderDocumentComponent {
45860
45869
  options: this.templateOptions
45861
45870
  };
45862
45871
  }
45863
- getValueTypeConfig(index) {
45872
+ getValueTypeConfig(rowIndex, valueIndex) {
45864
45873
  return {
45865
45874
  key: 'valueType',
45866
45875
  placeholder: 'Value Type',
@@ -45937,9 +45946,8 @@ class StepBuilderDocumentComponent {
45937
45946
  addMapping() {
45938
45947
  const mappingGroup = this.fb.group({
45939
45948
  key: ['', Validators.required],
45940
- valueType: ['variable', Validators.required],
45941
- value: ['', Validators.required],
45942
- enabled: [false]
45949
+ enabled: [false],
45950
+ values: this.fb.array([this.buildValueEntry()])
45943
45951
  });
45944
45952
  this.mappingsFormArray.push(mappingGroup);
45945
45953
  }
@@ -45949,6 +45957,30 @@ class StepBuilderDocumentComponent {
45949
45957
  getMappingFormGroup(index) {
45950
45958
  return this.mappingsFormArray.at(index);
45951
45959
  }
45960
+ buildValueEntry(seed) {
45961
+ var _a, _b;
45962
+ return this.fb.group({
45963
+ valueType: [(_a = seed === null || seed === void 0 ? void 0 : seed.valueType) !== null && _a !== void 0 ? _a : 'variable', Validators.required],
45964
+ value: [(_b = seed === null || seed === void 0 ? void 0 : seed.value) !== null && _b !== void 0 ? _b : '', Validators.required]
45965
+ });
45966
+ }
45967
+ getValuesFormArray(rowIndex) {
45968
+ return this.getMappingFormGroup(rowIndex).get('values');
45969
+ }
45970
+ getValueFormGroup(rowIndex, valueIndex) {
45971
+ return this.getValuesFormArray(rowIndex).at(valueIndex);
45972
+ }
45973
+ addValueEntry(rowIndex) {
45974
+ this.getValuesFormArray(rowIndex).push(this.buildValueEntry());
45975
+ }
45976
+ removeValueEntry(rowIndex, valueIndex) {
45977
+ const arr = this.getValuesFormArray(rowIndex);
45978
+ if (arr.length > 1) {
45979
+ arr.removeAt(valueIndex);
45980
+ }
45981
+ // The last entry can't be removed via the per-value × button —
45982
+ // users delete the whole key via the row trash icon instead.
45983
+ }
45952
45984
  /** True when every mapping row has enabled === true */
45953
45985
  get allMappingsSelected() {
45954
45986
  var _a;
@@ -46103,9 +46135,11 @@ class StepBuilderDocumentComponent {
46103
46135
  var _a;
46104
46136
  return ({
46105
46137
  key: m.key || '',
46106
- valueType: m.valueType || 'variable',
46107
- value: m.value || '',
46108
- enabled: (_a = m.enabled) !== null && _a !== void 0 ? _a : false
46138
+ enabled: (_a = m.enabled) !== null && _a !== void 0 ? _a : false,
46139
+ values: (m.values || []).map((v) => ({
46140
+ valueType: v.valueType || 'variable',
46141
+ value: v.value || ''
46142
+ }))
46109
46143
  });
46110
46144
  }), advancedSettingsVariables: this.advancedSettingsVariables.length > 0 ? this.advancedSettingsVariables : undefined });
46111
46145
  this.createStep.emit(stepData);
@@ -46118,10 +46152,10 @@ class StepBuilderDocumentComponent {
46118
46152
  }
46119
46153
  }
46120
46154
  StepBuilderDocumentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderDocumentComponent, deps: [{ token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
46121
- StepBuilderDocumentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepBuilderDocumentComponent, selector: "cqa-step-builder-document", inputs: { documentTypeOptions: "documentTypeOptions", templateOptions: "templateOptions", valueTypeOptions: "valueTypeOptions", delimeterTypeOptions: "delimeterTypeOptions", setAdvancedSettingsVariables: "setAdvancedSettingsVariables", template: "template", testStep: "testStep", mapperHelpUrl: "mapperHelpUrl", mapperHelpTooltipText: "mapperHelpTooltipText", initialDocumentType: "initialDocumentType", initialOutputVariable: "initialOutputVariable", initialTemplateSource: "initialTemplateSource", initialTemplateId: "initialTemplateId", initialTemplateName: "initialTemplateName", initialTemplateDescription: "initialTemplateDescription", initialMappings: "initialMappings", initialFileName: "initialFileName", initialSeprator: "initialSeprator", initialDelimeter: "initialDelimeter", initialFileFormatHeader: "initialFileFormatHeader", initialDescription: "initialDescription", editMode: "editMode", isCreatingStep: "isCreatingStep" }, outputs: { createStep: "createStep", cancelled: "cancelled", createTemplate: "createTemplate" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-ui-root cqa-block cqa-w-full cqa-min-w-0 cqa-step-builder-document\" style=\"height: 100%;width: 100%;\">\n <div\n class=\"cqa-flex cqa-flex-col cqa-w-full cqa-min-w-0 cqa-h-full cqa-bg-white cqa-border cqa-box-border cqa-max-w-full cqa-opacity-100 cqa-h-full cqa-w-full\">\n <!-- Content area: padding 16px, gap 12px between sections (no flex-1 to avoid gap above footer) -->\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-overflow-y-auto cqa-p-4 cqa-gap-3\">\n <!-- Header: Document Generation Template Step (left-aligned, Inter 600 12px line-height 100%) -->\n <h2\n class=\"cqa-text-[12px] cqa-leading-[100%] cqa-font-semibold cqa-text-[#111827] cqa-m-0 cqa-text-left cqa-flex-shrink-0 cqa-align-middle\">\n Document Generation Template Step\n </h2>\n\n <!-- File Name and Document Type Row -->\n <div class=\"cqa-flex cqa-flex-wrap cqa-flex-shrink-0 cqa-gap-14\">\n <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)]\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n File Name <span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-custom-input\n placeholder=\"File Name\"\n [value]=\"documentForm.get('fileName')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"documentForm.get('fileName')?.setValue($event)\">\n </cqa-custom-input>\n <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n The name of the file to be generated\n </p>\n </div>\n <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)] \">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n Document Type <span class=\"cqa-text-red-500\">*</span>\n </label>\n <div class=\"document-type-select\">\n <cqa-dynamic-select\n [form]=\"documentForm\"\n [config]=\"getDocumentTypeConfig()\">\n </cqa-dynamic-select>\n </div>\n <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n Choose the file format you want to generate.\n </p>\n </div>\n </div>\n\n <!-- Output Variable and Conditional Fields Row -->\n <div class=\"cqa-flex cqa-flex-wrap cqa-flex-shrink-0 cqa-gap-14\">\n <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)]\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n Output Variable <span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-custom-input\n placeholder=\"Input\"\n [value]=\"documentForm.get('outputVariable')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"documentForm.get('outputVariable')?.setValue($event)\">\n </cqa-custom-input>\n <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n Stores the generated file so it can be used in later steps.\n </p>\n </div>\n <!-- Seprator (shown when documentType is 'txt') -->\n <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)]\" *ngIf=\"isTxtSelected\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n Seprator\n </label>\n <cqa-custom-input\n placeholder=\"Seprator\"\n [value]=\"documentForm.get('seprator')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"documentForm.get('seprator')?.setValue($event)\">\n </cqa-custom-input>\n <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n The seprator to be used to separate the values in the generated file\n </p>\n </div>\n <!-- Delimeter Type (shown when documentType is 'csv') -->\n <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)]\" *ngIf=\"isCsvSelected\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n Delimeter Type\n </label>\n <div class=\"document-type-select\">\n <cqa-dynamic-select\n [form]=\"documentForm\"\n [config]=\"getDelimeterConfig()\">\n </cqa-dynamic-select>\n </div>\n <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n Choose the delimeter type for the CSV file\n </p>\n </div>\n </div>\n\n <!-- File Format Header (shown when documentType is 'txt') -->\n <div class=\"cqa-flex cqa-flex-wrap cqa-flex-shrink-0 cqa-gap-14\" *ngIf=\"isTxtSelected\">\n <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)]\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n File Format Header\n </label>\n <cqa-custom-input\n placeholder=\"File Format Header\"\n [value]=\"documentForm.get('fileFormatHeader')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"documentForm.get('fileFormatHeader')?.setValue($event)\">\n </cqa-custom-input>\n <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n Header text for the generated txt file\n </p>\n </div>\n </div>\n\n <!-- Template Source Section: label left, tabs right on same row -->\n <!-- <div class=\"cqa-flex cqa-flex-col cqa-flex-shrink-0 cqa-gap-3\">\n \n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-4\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-m-0 cqa-flex-shrink-0\">\n Template Source\n </label>\n <cqa-segment-control\n class=\"cqa-flex-shrink-0\"\n [segments]=\"[\n { label: 'Use Existing Template', value: 'existing' },\n { label: 'Upload Template', value: 'upload' },\n { label: 'Create New', value: 'createNew' }\n ]\"\n [value]=\"selectedTemplateSource\"\n (valueChange)=\"onTemplateSourceChange($event)\">\n </cqa-segment-control>\n </div>\n <div class=\"document-type-select\" *ngIf=\"selectedTemplateSource === 'existing'\">\n <cqa-dynamic-select\n [form]=\"documentForm\"\n [config]=\"getTemplateSelectConfig()\">\n </cqa-dynamic-select>\n </div>\n\n <div *ngIf=\"selectedTemplateSource === 'upload'\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-m-0\">\n Attachment <span class=\"cqa-text-red-500\">*</span>\n </label>\n <input\n #fileInput\n type=\"file\"\n accept=\".pdf,.doc,.docx,.txt\"\n class=\"cqa-hidden\"\n (change)=\"onFileSelected($event)\">\n <div\n class=\"cqa-w-full cqa-min-h-[140px] cqa-rounded cqa-border-2 cqa-border-dashed cqa-border-gray-300 cqa-bg-white cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-gap-3 cqa-p-6 cqa-cursor-pointer cqa-transition-colors\"\n [class.cqa-ring-2]=\"isDragOver\"\n [class.cqa-ring-[#3F43EE]]=\"isDragOver\"\n [class.cqa-ring-inset]=\"isDragOver\"\n (click)=\"fileInput.click()\"\n (dragover)=\"onDragOver($event)\"\n (dragleave)=\"onDragLeave($event)\"\n (drop)=\"onDrop($event)\"\n role=\"button\"\n tabindex=\"0\"\n (keydown.enter)=\"fileInput.click()\"\n (keydown.space)=\"fileInput.click()\"\n aria-label=\"Upload template file\">\n <svg class=\"cqa-w-8 cqa-h-8 cqa-font-bold\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n <path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"/>\n <polyline points=\"17 8 12 3 7 8\"/>\n <line x1=\"12\" y1=\"3\" x2=\"12\" y2=\"15\"/>\n </svg>\n <p class=\"cqa-text-base cqa-text-[#374151] cqa-m-0 cqa-text-center cqa-font-bold\">\n Drag and drop files here or <span class=\"cqa-text-[#3F43EE] cqa-font-medium hover:cqa-underline\">browse</span>\n </p>\n <p class=\"cqa-text-sm cqa-text-[#6B7280] cqa-m-0\">\n PDF, DOC, or TXT files\n </p>\n </div>\n <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-m-0\">\n Choose the file format you want to generate.\n </p>\n </div>\n <div *ngIf=\"selectedTemplateSource === 'createNew'\" class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n <div class=\"cqa-flex cqa-flex-wrap cqa-gap-3\">\n <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(50%-6px)]\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n Template Name <span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-custom-input\n placeholder=\"PDF Document (.pdf)\"\n [value]=\"documentForm.get('templateName')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"documentForm.get('templateName')?.setValue($event)\">\n </cqa-custom-input>\n </div>\n <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(50%-6px)]\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n Template Description <span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-custom-input\n placeholder=\"PDF Document (.pdf)\"\n [value]=\"documentForm.get('templateDescription')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"documentForm.get('templateDescription')?.setValue($event)\">\n </cqa-custom-input>\n </div>\n </div>\n <div class=\"cqa-flex cqa-justify-end\">\n <cqa-button\n variant=\"filled\"\n btnSize=\"lg\"\n text=\"Create Template\"\n [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#3F43EE] cqa-bg-[#3F43EE]'\"\n (clicked)=\"onCreateTemplate()\">\n </cqa-button>\n </div>\n </div>\n </div> -->\n\n <!-- Document Mapper Section: title + subtitle left, Need help? right (CQA table below) -->\n <div class=\"cqa-flex cqa-flex-col cqa-flex-shrink-0 cqa-gap-3\">\n <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-gap-4\">\n <div class=\"cqa-flex cqa-flex-col cqa-min-w-0\">\n <h3 class=\"cqa-text-base cqa-font-semibold cqa-text-[#111827] cqa-text-[14px] cqa-m-0 cqa-leading-tight\">\n Document Mapper\n </h3>\n <p class=\"cqa-text-[12px] cqa-text-[#6B7280] cqa-m-0 cqa-mt-0.5\">\n Map placeholders to dynamic values.\n </p>\n </div>\n <div class=\"cqa-relative cqa-inline-flex cqa-flex-shrink-0\"\n (mouseenter)=\"showHelpTooltip = true\"\n (mouseleave)=\"showHelpTooltip = false\">\n <a *ngIf=\"mapperHelpUrl\"\n href=\"#\"\n (click)=\"onMapperHelpClick($event)\"\n class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[21px] cqa-no-underline cqa-cursor-pointer\">\n <svg width=\"17\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-flex-shrink-0 cqa-text-[#3F43EE]\" aria-hidden=\"true\">\n <g clip-path=\"url(#help-icon-clip-doc)\">\n <path d=\"M8.50033 14.6663C12.4123 14.6663 15.5837 11.6816 15.5837 7.99967C15.5837 4.31778 12.4123 1.33301 8.50033 1.33301C4.58831 1.33301 1.41699 4.31778 1.41699 7.99967C1.41699 11.6816 4.58831 14.6663 8.50033 14.6663Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M6.43848 6.00038C6.60501 5.55483 6.93371 5.17912 7.36636 4.9398C7.79901 4.70049 8.30769 4.61301 8.80231 4.69285C9.29693 4.7727 9.74556 5.01473 10.0687 5.37607C10.3919 5.7374 10.5688 6.19473 10.5681 6.66705C10.5681 8.00038 8.44306 8.66705 8.44306 8.66705\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M8.5 11.333H8.50966\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </g>\n <defs>\n <clipPath id=\"help-icon-clip-doc\">\n <rect width=\"17\" height=\"16\" fill=\"white\"/>\n </clipPath>\n </defs>\n </svg>\n Need help ?\n </a>\n <span *ngIf=\"!mapperHelpUrl\" class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-font-[500] cqa-text-[10px] cqa-cursor-default cqa-text-[#374151]\">\n <svg width=\"17\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-flex-shrink-0 cqa-text-[#3F43EE]\" aria-hidden=\"true\">\n <g clip-path=\"url(#help-icon-clip-doc-nolink)\">\n <path d=\"M8.50033 14.6663C12.4123 14.6663 15.5837 11.6816 15.5837 7.99967C15.5837 4.31778 12.4123 1.33301 8.50033 1.33301C4.58831 1.33301 1.41699 4.31778 1.41699 7.99967C1.41699 11.6816 4.58831 14.6663 8.50033 14.6663Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M6.43848 6.00038C6.60501 5.55483 6.93371 5.17912 7.36636 4.9398C7.79901 4.70049 8.30769 4.61301 8.80231 4.69285C9.29693 4.7727 9.74556 5.01473 10.0687 5.37607C10.3919 5.7374 10.5688 6.19473 10.5681 6.66705C10.5681 8.00038 8.44306 8.66705 8.44306 8.66705\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M8.5 11.333H8.50966\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </g>\n <defs>\n <clipPath id=\"help-icon-clip-doc-nolink\">\n <rect width=\"17\" height=\"16\" fill=\"white\"/>\n </clipPath>\n </defs>\n </svg>\n Need help ?\n </span>\n <div *ngIf=\"showHelpTooltip\" class=\"cqa-absolute cqa-pointer-events-none cqa-z-[100] cqa-top-[-24px] cqa-left-[-203px]\" role=\"tooltip\">\n <div class=\"cqa-text-white cqa-text-center cqa-whitespace-nowrap cqa-w-[306px] cqa-min-h-5 cqa-rounded-[6px] cqa-opacity-100 cqa-px-2 cqa-py-1 cqa-bg-[#0A0A0A] cqa-leading-5 cqa-text-[8px]\">\n {{ mapperHelpTooltipText }}\n </div>\n </div>\n </div>\n </div>\n <!-- Table or empty state: same container, header always visible -->\n <div class=\"cqa-rounded-lg cqa-overflow-hidden cqa-bg-white cqa-shadow-sm cqa-border cqa-border-solid cqa-border-gray-200\">\n <table class=\"cqa-w-full\">\n <thead>\n <tr class=\"cqa-items-center cqa-bg-[#D8D9FC4D]\">\n <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-w-[40px] cqa-border-b cqa-border-gray-200\">\n <mat-checkbox [checked]=\"allMappingsSelected\"\n [indeterminate]=\"someMappingsSelected && !allMappingsSelected\"\n (change)=\"onSelectAllMappings($event.checked)\"\n color=\"primary\"\n aria-label=\"Select all mappings\">\n </mat-checkbox>\n </th>\n <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-border-b cqa-border-gray-200\">Key</th>\n <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-border-b cqa-border-gray-200 cqa-w-[120px]\">Value Type</th>\n <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-border-b cqa-border-gray-200\">Value</th>\n <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-border-b cqa-border-gray-200 cqa-w-[48px]\">\n <span class=\"cqa-sr-only\">Delete</span>\n </th>\n </tr>\n </thead>\n <tbody class=\"cqa-w-full\">\n <!-- Empty state when no mappings -->\n <tr *ngIf=\"mappingsFormArray.length === 0\">\n <td colspan=\"5\" class=\"cqa-p-0 cqa-align-middle cqa-border-b cqa-border-gray-200\">\n <div class=\"cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-py-12 cqa-px-4 cqa-bg-white\">\n <p class=\"cqa-text-sm cqa-text-[#6B7280] cqa-m-0 cqa-mb-4\">Start mapping placeholders to values.</p>\n <button\n type=\"button\"\n class=\"cqa-rounded-lg cqa-px-4 cqa-py-2.5 cqa-text-sm cqa-font-semibold cqa-text-white cqa-bg-[#4F46E5] cqa-border-none cqa-cursor-pointer hover:cqa-opacity-90 cqa-transition-opacity\"\n (click)=\"addMapping()\">\n Add first mapping\n </button>\n </div>\n </td>\n </tr>\n <!-- Data rows when there are mappings -->\n <tr *ngFor=\"let mapping of mappingsFormArray.controls; let i = index\"\n class=\"cqa-bg-white hover:cqa-bg-[#F9FAFB]\">\n <td class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-middle cqa-border-b cqa-border-gray-200\">\n <mat-checkbox [checked]=\"getMappingFormGroup(i).get('enabled')?.value\"\n (change)=\"getMappingFormGroup(i).get('enabled')?.setValue($event.checked)\"\n color=\"primary\"\n aria-label=\"Enable mapping\">\n </mat-checkbox>\n </td>\n <td class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-middle cqa-border-b cqa-border-gray-200 \">\n <cqa-custom-input\n [placeholder]=\"'Key'\"\n [value]=\"getMappingFormGroup(i).get('key')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"getMappingFormGroup(i).get('key')?.setValue($event)\">\n </cqa-custom-input>\n </td>\n <td class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-middle cqa-border-b cqa-border-gray-200\">\n <div class=\"document-type-select\">\n <cqa-dynamic-select\n [form]=\"getMappingFormGroup(i)\"\n [config]=\"getValueTypeConfig(i)\">\n </cqa-dynamic-select>\n </div>\n </td>\n <td class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-middle cqa-border-b cqa-border-gray-200\">\n <cqa-custom-input\n [placeholder]=\"'Value'\"\n [value]=\"getMappingFormGroup(i).get('value')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"getMappingFormGroup(i).get('value')?.setValue($event)\">\n </cqa-custom-input>\n </td>\n <td class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-middle cqa-border-b cqa-border-gray-200\">\n <button\n type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-9 cqa-h-9 cqa-rounded cqa-text-[#E57373] cqa-transition-colors cqa-border-none cqa-bg-transparent cqa-cursor-pointer hover:cqa-opacity-80\"\n (click)=\"removeMapping(i)\"\n [attr.aria-label]=\"'Delete mapping'\">\n <svg class=\"cqa-w-5 cqa-h-5 cqa-flex-shrink-0\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n <path d=\"M3 6h18M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2m3 0v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6h14z\"/>\n <path d=\"M10 11v6M14 11v6\"/>\n </svg>\n </button>\n </td>\n </tr>\n </tbody>\n \n </table>\n <div class=\"cqa-flex cqa-justify-end\" *ngIf=\"mappingsFormArray.length > 0\">\n <button\n type=\"button\"\n class=\"cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-3\"\n (click)=\"addMapping()\">\n + Add Mapping\n </button>\n </div>\n </div>\n <!-- <div class=\"cqa-flex cqa-justify-end\" *ngIf=\"mappingsFormArray.length > 0\">\n <button\n type=\"button\"\n class=\"cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-0\"\n (click)=\"addMapping()\">\n + Add Mapping\n </button>\n </div> -->\n </div>\n\n <!-- Description (after Document Mapper) -->\n <div class=\"cqa-flex cqa-flex-wrap cqa-flex-shrink-0 cqa-gap-14\">\n <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)]\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n Description\n </label>\n <cqa-custom-input\n placeholder=\"Description\"\n [value]=\"documentForm.get('description')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"documentForm.get('description')?.setValue($event)\">\n </cqa-custom-input>\n <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n Optional description for this document generation step\n </p>\n </div>\n </div>\n </div>\n\n <!-- Advanced Settings Variables Form -->\n <div *ngIf=\"advancedSettingsVariables.length > 0\" class=\"cqa-flex-shrink-0 cqa-px-4 cqa-pb-3\">\n <div class=\"cqa-flex cqa-flex-col cqa-w-full\">\n <button type=\"button\"\n class=\"cqa-flex cqa-w-full cqa-items-center cqa-justify-between cqa-gap-2 cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-0 cqa-mb-1.5\"\n (click)=\"toggleAdvanced()\">\n <span class=\"cqa-text-[10px]\">Advanced</span>\n <mat-icon class=\"cqa-text-base\" [class.cqa-rotate-180]=\"advancedExpanded\">\n expand_more\n </mat-icon>\n </button>\n <div *ngIf=\"advancedExpanded\" class=\"cqa-mt-2\">\n <cqa-advanced-variables-form \n [advancedVariables]=\"advancedSettingsVariables\"\n [advancedVariableForm]=\"advancedVariablesForm\"\n (variableBooleanChange)=\"onAdvancedVariableBooleanChange($event.name, $event.value)\">\n </cqa-advanced-variables-form>\n </div>\n </div>\n </div>\n \n\n <!-- Divider above footer -->\n <div class=\"cqa-flex-shrink-0\">\n <div class=\"cqa-h-px cqa-w-full\" role=\"presentation\"></div>\n </div>\n\n <!-- Action Buttons -->\n <div class=\"cqa-flex cqa-items-stretch cqa-w-full cqa-p-4 cqa-gap-3\">\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <cqa-button\n variant=\"outlined\"\n btnSize=\"lg\"\n text=\"Cancel\"\n [fullWidth]=\"true\"\n [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#414146]'\"\n (clicked)=\"onCancel()\">\n </cqa-button>\n </div>\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <cqa-button *ngIf=\"!isCreatingStep\"\n variant=\"filled\"\n btnSize=\"lg\"\n [text]=\"editMode ? 'Update Step' : 'Create Step'\"\n [fullWidth]=\"true\"\n [disabled]=\"!isFormValid()\"\n [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#3F43EE]'\"\n (clicked)=\"onCreateStep()\">\n </cqa-button>\n <div *ngIf=\"isCreatingStep\" class=\"cqa-min-h-[38px] cqa-rounded-[8px]\">\n <cqa-badge label=\"Creating\u2026\" icon=\"autorenew\" [isLoading]=\"true\" [fullWidth]=\"true\" [centerContent]=\"true\"\n [inlineStyles]=\"'min-height: 38px; height: 38px; box-sizing: border-box; display: flex; align-items: center; justify-content: center;'\"\n variant=\"info\" size=\"medium\"></cqa-badge>\n </div>\n </div>\n </div>\n</div>\n", components: [{ type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["inputId", "label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: i3$3.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: AdvancedVariablesFormComponent, selector: "cqa-advanced-variables-form", inputs: ["advancedVariables", "advancedVariableForm"], outputs: ["variableBooleanChange", "variableValueChange"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "loading", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: BadgeComponent, selector: "cqa-badge", inputs: ["type", "label", "icon", "iconLibrary", "variant", "size", "backgroundColor", "textColor", "borderColor", "iconBackgroundColor", "iconColor", "iconSize", "inlineStyles", "key", "value", "keyTextColor", "valueTextColor", "isLoading", "fullWidth", "centerContent", "title"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
46155
+ StepBuilderDocumentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: StepBuilderDocumentComponent, selector: "cqa-step-builder-document", inputs: { documentTypeOptions: "documentTypeOptions", templateOptions: "templateOptions", valueTypeOptions: "valueTypeOptions", delimeterTypeOptions: "delimeterTypeOptions", setAdvancedSettingsVariables: "setAdvancedSettingsVariables", template: "template", testStep: "testStep", mapperHelpUrl: "mapperHelpUrl", mapperHelpTooltipText: "mapperHelpTooltipText", initialDocumentType: "initialDocumentType", initialOutputVariable: "initialOutputVariable", initialTemplateSource: "initialTemplateSource", initialTemplateId: "initialTemplateId", initialTemplateName: "initialTemplateName", initialTemplateDescription: "initialTemplateDescription", initialMappings: "initialMappings", initialFileName: "initialFileName", initialSeprator: "initialSeprator", initialDelimeter: "initialDelimeter", initialFileFormatHeader: "initialFileFormatHeader", initialDescription: "initialDescription", editMode: "editMode", isCreatingStep: "isCreatingStep" }, outputs: { createStep: "createStep", cancelled: "cancelled", createTemplate: "createTemplate" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-ui-root cqa-block cqa-w-full cqa-min-w-0 cqa-step-builder-document\" style=\"height: 100%;width: 100%;\">\n <div\n class=\"cqa-flex cqa-flex-col cqa-w-full cqa-min-w-0 cqa-h-full cqa-bg-white cqa-border cqa-box-border cqa-max-w-full cqa-opacity-100 cqa-h-full cqa-w-full\">\n <!-- Content area: padding 16px, gap 12px between sections (no flex-1 to avoid gap above footer) -->\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-overflow-y-auto cqa-p-4 cqa-gap-3\">\n <!-- Header: Document Generation Template Step (left-aligned, Inter 600 12px line-height 100%) -->\n <h2\n class=\"cqa-text-[12px] cqa-leading-[100%] cqa-font-semibold cqa-text-[#111827] cqa-m-0 cqa-text-left cqa-flex-shrink-0 cqa-align-middle\">\n Document Generation Template Step\n </h2>\n\n <!-- File Name and Document Type Row -->\n <div class=\"cqa-flex cqa-flex-wrap cqa-flex-shrink-0 cqa-gap-14\">\n <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)]\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n File Name <span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-custom-input\n placeholder=\"File Name\"\n [value]=\"documentForm.get('fileName')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"documentForm.get('fileName')?.setValue($event)\">\n </cqa-custom-input>\n <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n The name of the file to be generated\n </p>\n </div>\n <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)] \">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n Document Type <span class=\"cqa-text-red-500\">*</span>\n </label>\n <div class=\"document-type-select\">\n <cqa-dynamic-select\n [form]=\"documentForm\"\n [config]=\"getDocumentTypeConfig()\">\n </cqa-dynamic-select>\n </div>\n <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n Choose the file format you want to generate.\n </p>\n </div>\n </div>\n\n <!-- Output Variable and Conditional Fields Row -->\n <div class=\"cqa-flex cqa-flex-wrap cqa-flex-shrink-0 cqa-gap-14\">\n <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)]\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n Output Variable <span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-custom-input\n placeholder=\"Input\"\n [value]=\"documentForm.get('outputVariable')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"documentForm.get('outputVariable')?.setValue($event)\">\n </cqa-custom-input>\n <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n Stores the generated file so it can be used in later steps.\n </p>\n </div>\n <!-- Seprator (shown when documentType is 'txt') -->\n <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)]\" *ngIf=\"isTxtSelected\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n Seprator\n </label>\n <cqa-custom-input\n placeholder=\"Seprator\"\n [value]=\"documentForm.get('seprator')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"documentForm.get('seprator')?.setValue($event)\">\n </cqa-custom-input>\n <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n The seprator to be used to separate the values in the generated file\n </p>\n </div>\n <!-- Delimeter Type (shown when documentType is 'csv') -->\n <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)]\" *ngIf=\"isCsvSelected\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n Delimeter Type\n </label>\n <div class=\"document-type-select\">\n <cqa-dynamic-select\n [form]=\"documentForm\"\n [config]=\"getDelimeterConfig()\">\n </cqa-dynamic-select>\n </div>\n <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n Choose the delimeter type for the CSV file\n </p>\n </div>\n </div>\n\n <!-- File Format Header (shown when documentType is 'txt') -->\n <div class=\"cqa-flex cqa-flex-wrap cqa-flex-shrink-0 cqa-gap-14\" *ngIf=\"isTxtSelected\">\n <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)]\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n File Format Header\n </label>\n <cqa-custom-input\n placeholder=\"File Format Header\"\n [value]=\"documentForm.get('fileFormatHeader')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"documentForm.get('fileFormatHeader')?.setValue($event)\">\n </cqa-custom-input>\n <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n Header text for the generated txt file\n </p>\n </div>\n </div>\n\n <!-- Template Source Section: label left, tabs right on same row -->\n <!-- <div class=\"cqa-flex cqa-flex-col cqa-flex-shrink-0 cqa-gap-3\">\n \n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-4\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-m-0 cqa-flex-shrink-0\">\n Template Source\n </label>\n <cqa-segment-control\n class=\"cqa-flex-shrink-0\"\n [segments]=\"[\n { label: 'Use Existing Template', value: 'existing' },\n { label: 'Upload Template', value: 'upload' },\n { label: 'Create New', value: 'createNew' }\n ]\"\n [value]=\"selectedTemplateSource\"\n (valueChange)=\"onTemplateSourceChange($event)\">\n </cqa-segment-control>\n </div>\n <div class=\"document-type-select\" *ngIf=\"selectedTemplateSource === 'existing'\">\n <cqa-dynamic-select\n [form]=\"documentForm\"\n [config]=\"getTemplateSelectConfig()\">\n </cqa-dynamic-select>\n </div>\n\n <div *ngIf=\"selectedTemplateSource === 'upload'\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-m-0\">\n Attachment <span class=\"cqa-text-red-500\">*</span>\n </label>\n <input\n #fileInput\n type=\"file\"\n accept=\".pdf,.doc,.docx,.txt\"\n class=\"cqa-hidden\"\n (change)=\"onFileSelected($event)\">\n <div\n class=\"cqa-w-full cqa-min-h-[140px] cqa-rounded cqa-border-2 cqa-border-dashed cqa-border-gray-300 cqa-bg-white cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-gap-3 cqa-p-6 cqa-cursor-pointer cqa-transition-colors\"\n [class.cqa-ring-2]=\"isDragOver\"\n [class.cqa-ring-[#3F43EE]]=\"isDragOver\"\n [class.cqa-ring-inset]=\"isDragOver\"\n (click)=\"fileInput.click()\"\n (dragover)=\"onDragOver($event)\"\n (dragleave)=\"onDragLeave($event)\"\n (drop)=\"onDrop($event)\"\n role=\"button\"\n tabindex=\"0\"\n (keydown.enter)=\"fileInput.click()\"\n (keydown.space)=\"fileInput.click()\"\n aria-label=\"Upload template file\">\n <svg class=\"cqa-w-8 cqa-h-8 cqa-font-bold\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n <path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"/>\n <polyline points=\"17 8 12 3 7 8\"/>\n <line x1=\"12\" y1=\"3\" x2=\"12\" y2=\"15\"/>\n </svg>\n <p class=\"cqa-text-base cqa-text-[#374151] cqa-m-0 cqa-text-center cqa-font-bold\">\n Drag and drop files here or <span class=\"cqa-text-[#3F43EE] cqa-font-medium hover:cqa-underline\">browse</span>\n </p>\n <p class=\"cqa-text-sm cqa-text-[#6B7280] cqa-m-0\">\n PDF, DOC, or TXT files\n </p>\n </div>\n <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-m-0\">\n Choose the file format you want to generate.\n </p>\n </div>\n <div *ngIf=\"selectedTemplateSource === 'createNew'\" class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n <div class=\"cqa-flex cqa-flex-wrap cqa-gap-3\">\n <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(50%-6px)]\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n Template Name <span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-custom-input\n placeholder=\"PDF Document (.pdf)\"\n [value]=\"documentForm.get('templateName')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"documentForm.get('templateName')?.setValue($event)\">\n </cqa-custom-input>\n </div>\n <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(50%-6px)]\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n Template Description <span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-custom-input\n placeholder=\"PDF Document (.pdf)\"\n [value]=\"documentForm.get('templateDescription')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"documentForm.get('templateDescription')?.setValue($event)\">\n </cqa-custom-input>\n </div>\n </div>\n <div class=\"cqa-flex cqa-justify-end\">\n <cqa-button\n variant=\"filled\"\n btnSize=\"lg\"\n text=\"Create Template\"\n [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#3F43EE] cqa-bg-[#3F43EE]'\"\n (clicked)=\"onCreateTemplate()\">\n </cqa-button>\n </div>\n </div>\n </div> -->\n\n <!-- Document Mapper Section: title + subtitle left, Need help? right (CQA table below) -->\n <div class=\"cqa-flex cqa-flex-col cqa-flex-shrink-0 cqa-gap-3\">\n <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-gap-4\">\n <div class=\"cqa-flex cqa-flex-col cqa-min-w-0\">\n <h3 class=\"cqa-text-base cqa-font-semibold cqa-text-[#111827] cqa-text-[14px] cqa-m-0 cqa-leading-tight\">\n Document Mapper\n </h3>\n <p class=\"cqa-text-[12px] cqa-text-[#6B7280] cqa-m-0 cqa-mt-0.5\">\n Map placeholders to dynamic values.\n </p>\n </div>\n <div class=\"cqa-relative cqa-inline-flex cqa-flex-shrink-0\"\n (mouseenter)=\"showHelpTooltip = true\"\n (mouseleave)=\"showHelpTooltip = false\">\n <a *ngIf=\"mapperHelpUrl\"\n href=\"#\"\n (click)=\"onMapperHelpClick($event)\"\n class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[21px] cqa-no-underline cqa-cursor-pointer\">\n <svg width=\"17\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-flex-shrink-0 cqa-text-[#3F43EE]\" aria-hidden=\"true\">\n <g clip-path=\"url(#help-icon-clip-doc)\">\n <path d=\"M8.50033 14.6663C12.4123 14.6663 15.5837 11.6816 15.5837 7.99967C15.5837 4.31778 12.4123 1.33301 8.50033 1.33301C4.58831 1.33301 1.41699 4.31778 1.41699 7.99967C1.41699 11.6816 4.58831 14.6663 8.50033 14.6663Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M6.43848 6.00038C6.60501 5.55483 6.93371 5.17912 7.36636 4.9398C7.79901 4.70049 8.30769 4.61301 8.80231 4.69285C9.29693 4.7727 9.74556 5.01473 10.0687 5.37607C10.3919 5.7374 10.5688 6.19473 10.5681 6.66705C10.5681 8.00038 8.44306 8.66705 8.44306 8.66705\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M8.5 11.333H8.50966\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </g>\n <defs>\n <clipPath id=\"help-icon-clip-doc\">\n <rect width=\"17\" height=\"16\" fill=\"white\"/>\n </clipPath>\n </defs>\n </svg>\n Need help ?\n </a>\n <span *ngIf=\"!mapperHelpUrl\" class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-font-[500] cqa-text-[10px] cqa-cursor-default cqa-text-[#374151]\">\n <svg width=\"17\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-flex-shrink-0 cqa-text-[#3F43EE]\" aria-hidden=\"true\">\n <g clip-path=\"url(#help-icon-clip-doc-nolink)\">\n <path d=\"M8.50033 14.6663C12.4123 14.6663 15.5837 11.6816 15.5837 7.99967C15.5837 4.31778 12.4123 1.33301 8.50033 1.33301C4.58831 1.33301 1.41699 4.31778 1.41699 7.99967C1.41699 11.6816 4.58831 14.6663 8.50033 14.6663Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M6.43848 6.00038C6.60501 5.55483 6.93371 5.17912 7.36636 4.9398C7.79901 4.70049 8.30769 4.61301 8.80231 4.69285C9.29693 4.7727 9.74556 5.01473 10.0687 5.37607C10.3919 5.7374 10.5688 6.19473 10.5681 6.66705C10.5681 8.00038 8.44306 8.66705 8.44306 8.66705\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M8.5 11.333H8.50966\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </g>\n <defs>\n <clipPath id=\"help-icon-clip-doc-nolink\">\n <rect width=\"17\" height=\"16\" fill=\"white\"/>\n </clipPath>\n </defs>\n </svg>\n Need help ?\n </span>\n <div *ngIf=\"showHelpTooltip\" class=\"cqa-absolute cqa-pointer-events-none cqa-z-[100] cqa-top-[-24px] cqa-left-[-203px]\" role=\"tooltip\">\n <div class=\"cqa-text-white cqa-text-center cqa-whitespace-nowrap cqa-w-[306px] cqa-min-h-5 cqa-rounded-[6px] cqa-opacity-100 cqa-px-2 cqa-py-1 cqa-bg-[#0A0A0A] cqa-leading-5 cqa-text-[8px]\">\n {{ mapperHelpTooltipText }}\n </div>\n </div>\n </div>\n </div>\n <!-- Table or empty state: same container, header always visible -->\n <div class=\"cqa-rounded-lg cqa-overflow-hidden cqa-bg-white cqa-shadow-sm cqa-border cqa-border-solid cqa-border-gray-200\">\n <table class=\"cqa-w-full\">\n <thead>\n <tr class=\"cqa-items-center cqa-bg-[#D8D9FC4D]\">\n <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-w-[40px] cqa-border-b cqa-border-gray-200\">\n <mat-checkbox [checked]=\"allMappingsSelected\"\n [indeterminate]=\"someMappingsSelected && !allMappingsSelected\"\n (change)=\"onSelectAllMappings($event.checked)\"\n color=\"primary\"\n aria-label=\"Select all mappings\">\n </mat-checkbox>\n </th>\n <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-border-b cqa-border-gray-200\">Key</th>\n <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-border-b cqa-border-gray-200 cqa-w-[120px]\">Value Type</th>\n <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-border-b cqa-border-gray-200\">Value</th>\n <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-border-b cqa-border-gray-200 cqa-w-[48px]\">\n <span class=\"cqa-sr-only\">Delete row</span>\n </th>\n </tr>\n </thead>\n <tbody class=\"cqa-w-full\">\n <!-- Empty state when no mappings -->\n <tr *ngIf=\"mappingsFormArray.length === 0\">\n <td colspan=\"5\" class=\"cqa-p-0 cqa-align-middle cqa-border-b cqa-border-gray-200\">\n <div class=\"cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-py-12 cqa-px-4 cqa-bg-white\">\n <p class=\"cqa-text-sm cqa-text-[#6B7280] cqa-m-0 cqa-mb-4\">Start mapping placeholders to values.</p>\n <button\n type=\"button\"\n class=\"cqa-rounded-lg cqa-px-4 cqa-py-2.5 cqa-text-sm cqa-font-semibold cqa-text-white cqa-bg-[#4F46E5] cqa-border-none cqa-cursor-pointer hover:cqa-opacity-90 cqa-transition-opacity\"\n (click)=\"addMapping()\">\n Add first mapping\n </button>\n </div>\n </td>\n </tr>\n <!-- Data rows when there are mappings -->\n <tr *ngFor=\"let mapping of mappingsFormArray.controls; let i = index\"\n class=\"cqa-bg-white hover:cqa-bg-[#F9FAFB]\">\n <td class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-top cqa-border-b cqa-border-gray-200\">\n <mat-checkbox [checked]=\"getMappingFormGroup(i).get('enabled')?.value\"\n (change)=\"getMappingFormGroup(i).get('enabled')?.setValue($event.checked)\"\n color=\"primary\"\n aria-label=\"Enable mapping\">\n </mat-checkbox>\n </td>\n <td class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-top cqa-border-b cqa-border-gray-200 \">\n <cqa-custom-input\n [placeholder]=\"'Key'\"\n [value]=\"getMappingFormGroup(i).get('key')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"getMappingFormGroup(i).get('key')?.setValue($event)\">\n </cqa-custom-input>\n </td>\n <td colspan=\"2\" class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-top cqa-border-b cqa-border-gray-200\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <div *ngFor=\"let entry of getValuesFormArray(i).controls; let j = index\"\n class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div class=\"document-type-select cqa-w-[120px] cqa-flex-shrink-0\">\n <cqa-dynamic-select\n [form]=\"getValueFormGroup(i, j)\"\n [config]=\"getValueTypeConfig(i, j)\">\n </cqa-dynamic-select>\n </div>\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <cqa-custom-input\n [placeholder]=\"'Value'\"\n [value]=\"getValueFormGroup(i, j).get('value')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"getValueFormGroup(i, j).get('value')?.setValue($event)\">\n </cqa-custom-input>\n </div>\n <button\n type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-7 cqa-h-7 cqa-rounded cqa-text-[#9CA3AF] cqa-transition-colors cqa-border-none cqa-bg-transparent cqa-cursor-pointer hover:cqa-text-[#374151] disabled:cqa-opacity-30 disabled:cqa-cursor-not-allowed\"\n [disabled]=\"getValuesFormArray(i).length <= 1\"\n (click)=\"removeValueEntry(i, j)\"\n [attr.aria-label]=\"'Remove value'\"\n [attr.title]=\"getValuesFormArray(i).length <= 1 ? 'A key needs at least one value' : 'Remove this value'\">\n <mat-icon class=\"cqa-text-[18px] cqa-w-[18px] cqa-h-[18px] cqa-leading-[18px]\">close</mat-icon>\n </button>\n </div>\n <button\n type=\"button\"\n class=\"cqa-self-start cqa-flex cqa-items-center cqa-gap-1 cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-0 cqa-mt-1\"\n (click)=\"addValueEntry(i)\"\n [attr.aria-label]=\"'Add value'\">\n <mat-icon class=\"cqa-text-[16px] cqa-w-4 cqa-h-4 cqa-leading-4\">add</mat-icon>\n Add value\n </button>\n </div>\n </td>\n <td class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-top cqa-border-b cqa-border-gray-200\">\n <button\n type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-9 cqa-h-9 cqa-rounded cqa-text-[#E57373] cqa-transition-colors cqa-border-none cqa-bg-transparent cqa-cursor-pointer hover:cqa-opacity-80\"\n (click)=\"removeMapping(i)\"\n [attr.aria-label]=\"'Delete key row'\"\n title=\"Delete this key and all its values\">\n <svg class=\"cqa-w-5 cqa-h-5 cqa-flex-shrink-0\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n <path d=\"M3 6h18M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2m3 0v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6h14z\"/>\n <path d=\"M10 11v6M14 11v6\"/>\n </svg>\n </button>\n </td>\n </tr>\n </tbody>\n \n </table>\n <div class=\"cqa-flex cqa-justify-end\" *ngIf=\"mappingsFormArray.length > 0\">\n <button\n type=\"button\"\n class=\"cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-3\"\n (click)=\"addMapping()\">\n + Add Mapping\n </button>\n </div>\n </div>\n <!-- <div class=\"cqa-flex cqa-justify-end\" *ngIf=\"mappingsFormArray.length > 0\">\n <button\n type=\"button\"\n class=\"cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-0\"\n (click)=\"addMapping()\">\n + Add Mapping\n </button>\n </div> -->\n </div>\n\n <!-- Description (after Document Mapper) -->\n <div class=\"cqa-flex cqa-flex-wrap cqa-flex-shrink-0 cqa-gap-14\">\n <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)]\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n Description\n </label>\n <cqa-custom-input\n placeholder=\"Description\"\n [value]=\"documentForm.get('description')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"documentForm.get('description')?.setValue($event)\">\n </cqa-custom-input>\n <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n Optional description for this document generation step\n </p>\n </div>\n </div>\n </div>\n\n <!-- Advanced Settings Variables Form -->\n <div *ngIf=\"advancedSettingsVariables.length > 0\" class=\"cqa-flex-shrink-0 cqa-px-4 cqa-pb-3\">\n <div class=\"cqa-flex cqa-flex-col cqa-w-full\">\n <button type=\"button\"\n class=\"cqa-flex cqa-w-full cqa-items-center cqa-justify-between cqa-gap-2 cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-0 cqa-mb-1.5\"\n (click)=\"toggleAdvanced()\">\n <span class=\"cqa-text-[10px]\">Advanced</span>\n <mat-icon class=\"cqa-text-base\" [class.cqa-rotate-180]=\"advancedExpanded\">\n expand_more\n </mat-icon>\n </button>\n <div *ngIf=\"advancedExpanded\" class=\"cqa-mt-2\">\n <cqa-advanced-variables-form \n [advancedVariables]=\"advancedSettingsVariables\"\n [advancedVariableForm]=\"advancedVariablesForm\"\n (variableBooleanChange)=\"onAdvancedVariableBooleanChange($event.name, $event.value)\">\n </cqa-advanced-variables-form>\n </div>\n </div>\n </div>\n \n\n <!-- Divider above footer -->\n <div class=\"cqa-flex-shrink-0\">\n <div class=\"cqa-h-px cqa-w-full\" role=\"presentation\"></div>\n </div>\n\n <!-- Action Buttons -->\n <div class=\"cqa-flex cqa-items-stretch cqa-w-full cqa-p-4 cqa-gap-3\">\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <cqa-button\n variant=\"outlined\"\n btnSize=\"lg\"\n text=\"Cancel\"\n [fullWidth]=\"true\"\n [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#414146]'\"\n (clicked)=\"onCancel()\">\n </cqa-button>\n </div>\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <cqa-button *ngIf=\"!isCreatingStep\"\n variant=\"filled\"\n btnSize=\"lg\"\n [text]=\"editMode ? 'Update Step' : 'Create Step'\"\n [fullWidth]=\"true\"\n [disabled]=\"!isFormValid()\"\n [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#3F43EE]'\"\n (clicked)=\"onCreateStep()\">\n </cqa-button>\n <div *ngIf=\"isCreatingStep\" class=\"cqa-min-h-[38px] cqa-rounded-[8px]\">\n <cqa-badge label=\"Creating\u2026\" icon=\"autorenew\" [isLoading]=\"true\" [fullWidth]=\"true\" [centerContent]=\"true\"\n [inlineStyles]=\"'min-height: 38px; height: 38px; box-sizing: border-box; display: flex; align-items: center; justify-content: center;'\"\n variant=\"info\" size=\"medium\"></cqa-badge>\n </div>\n </div>\n </div>\n</div>\n", components: [{ type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["inputId", "label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: i3$3.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: AdvancedVariablesFormComponent, selector: "cqa-advanced-variables-form", inputs: ["advancedVariables", "advancedVariableForm"], outputs: ["variableBooleanChange", "variableValueChange"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "loading", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: BadgeComponent, selector: "cqa-badge", inputs: ["type", "label", "icon", "iconLibrary", "variant", "size", "backgroundColor", "textColor", "borderColor", "iconBackgroundColor", "iconColor", "iconSize", "inlineStyles", "key", "value", "keyTextColor", "valueTextColor", "isLoading", "fullWidth", "centerContent", "title"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
46122
46156
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: StepBuilderDocumentComponent, decorators: [{
46123
46157
  type: Component,
46124
- args: [{ selector: 'cqa-step-builder-document', template: "<div class=\"cqa-ui-root cqa-block cqa-w-full cqa-min-w-0 cqa-step-builder-document\" style=\"height: 100%;width: 100%;\">\n <div\n class=\"cqa-flex cqa-flex-col cqa-w-full cqa-min-w-0 cqa-h-full cqa-bg-white cqa-border cqa-box-border cqa-max-w-full cqa-opacity-100 cqa-h-full cqa-w-full\">\n <!-- Content area: padding 16px, gap 12px between sections (no flex-1 to avoid gap above footer) -->\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-overflow-y-auto cqa-p-4 cqa-gap-3\">\n <!-- Header: Document Generation Template Step (left-aligned, Inter 600 12px line-height 100%) -->\n <h2\n class=\"cqa-text-[12px] cqa-leading-[100%] cqa-font-semibold cqa-text-[#111827] cqa-m-0 cqa-text-left cqa-flex-shrink-0 cqa-align-middle\">\n Document Generation Template Step\n </h2>\n\n <!-- File Name and Document Type Row -->\n <div class=\"cqa-flex cqa-flex-wrap cqa-flex-shrink-0 cqa-gap-14\">\n <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)]\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n File Name <span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-custom-input\n placeholder=\"File Name\"\n [value]=\"documentForm.get('fileName')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"documentForm.get('fileName')?.setValue($event)\">\n </cqa-custom-input>\n <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n The name of the file to be generated\n </p>\n </div>\n <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)] \">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n Document Type <span class=\"cqa-text-red-500\">*</span>\n </label>\n <div class=\"document-type-select\">\n <cqa-dynamic-select\n [form]=\"documentForm\"\n [config]=\"getDocumentTypeConfig()\">\n </cqa-dynamic-select>\n </div>\n <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n Choose the file format you want to generate.\n </p>\n </div>\n </div>\n\n <!-- Output Variable and Conditional Fields Row -->\n <div class=\"cqa-flex cqa-flex-wrap cqa-flex-shrink-0 cqa-gap-14\">\n <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)]\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n Output Variable <span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-custom-input\n placeholder=\"Input\"\n [value]=\"documentForm.get('outputVariable')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"documentForm.get('outputVariable')?.setValue($event)\">\n </cqa-custom-input>\n <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n Stores the generated file so it can be used in later steps.\n </p>\n </div>\n <!-- Seprator (shown when documentType is 'txt') -->\n <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)]\" *ngIf=\"isTxtSelected\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n Seprator\n </label>\n <cqa-custom-input\n placeholder=\"Seprator\"\n [value]=\"documentForm.get('seprator')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"documentForm.get('seprator')?.setValue($event)\">\n </cqa-custom-input>\n <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n The seprator to be used to separate the values in the generated file\n </p>\n </div>\n <!-- Delimeter Type (shown when documentType is 'csv') -->\n <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)]\" *ngIf=\"isCsvSelected\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n Delimeter Type\n </label>\n <div class=\"document-type-select\">\n <cqa-dynamic-select\n [form]=\"documentForm\"\n [config]=\"getDelimeterConfig()\">\n </cqa-dynamic-select>\n </div>\n <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n Choose the delimeter type for the CSV file\n </p>\n </div>\n </div>\n\n <!-- File Format Header (shown when documentType is 'txt') -->\n <div class=\"cqa-flex cqa-flex-wrap cqa-flex-shrink-0 cqa-gap-14\" *ngIf=\"isTxtSelected\">\n <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)]\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n File Format Header\n </label>\n <cqa-custom-input\n placeholder=\"File Format Header\"\n [value]=\"documentForm.get('fileFormatHeader')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"documentForm.get('fileFormatHeader')?.setValue($event)\">\n </cqa-custom-input>\n <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n Header text for the generated txt file\n </p>\n </div>\n </div>\n\n <!-- Template Source Section: label left, tabs right on same row -->\n <!-- <div class=\"cqa-flex cqa-flex-col cqa-flex-shrink-0 cqa-gap-3\">\n \n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-4\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-m-0 cqa-flex-shrink-0\">\n Template Source\n </label>\n <cqa-segment-control\n class=\"cqa-flex-shrink-0\"\n [segments]=\"[\n { label: 'Use Existing Template', value: 'existing' },\n { label: 'Upload Template', value: 'upload' },\n { label: 'Create New', value: 'createNew' }\n ]\"\n [value]=\"selectedTemplateSource\"\n (valueChange)=\"onTemplateSourceChange($event)\">\n </cqa-segment-control>\n </div>\n <div class=\"document-type-select\" *ngIf=\"selectedTemplateSource === 'existing'\">\n <cqa-dynamic-select\n [form]=\"documentForm\"\n [config]=\"getTemplateSelectConfig()\">\n </cqa-dynamic-select>\n </div>\n\n <div *ngIf=\"selectedTemplateSource === 'upload'\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-m-0\">\n Attachment <span class=\"cqa-text-red-500\">*</span>\n </label>\n <input\n #fileInput\n type=\"file\"\n accept=\".pdf,.doc,.docx,.txt\"\n class=\"cqa-hidden\"\n (change)=\"onFileSelected($event)\">\n <div\n class=\"cqa-w-full cqa-min-h-[140px] cqa-rounded cqa-border-2 cqa-border-dashed cqa-border-gray-300 cqa-bg-white cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-gap-3 cqa-p-6 cqa-cursor-pointer cqa-transition-colors\"\n [class.cqa-ring-2]=\"isDragOver\"\n [class.cqa-ring-[#3F43EE]]=\"isDragOver\"\n [class.cqa-ring-inset]=\"isDragOver\"\n (click)=\"fileInput.click()\"\n (dragover)=\"onDragOver($event)\"\n (dragleave)=\"onDragLeave($event)\"\n (drop)=\"onDrop($event)\"\n role=\"button\"\n tabindex=\"0\"\n (keydown.enter)=\"fileInput.click()\"\n (keydown.space)=\"fileInput.click()\"\n aria-label=\"Upload template file\">\n <svg class=\"cqa-w-8 cqa-h-8 cqa-font-bold\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n <path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"/>\n <polyline points=\"17 8 12 3 7 8\"/>\n <line x1=\"12\" y1=\"3\" x2=\"12\" y2=\"15\"/>\n </svg>\n <p class=\"cqa-text-base cqa-text-[#374151] cqa-m-0 cqa-text-center cqa-font-bold\">\n Drag and drop files here or <span class=\"cqa-text-[#3F43EE] cqa-font-medium hover:cqa-underline\">browse</span>\n </p>\n <p class=\"cqa-text-sm cqa-text-[#6B7280] cqa-m-0\">\n PDF, DOC, or TXT files\n </p>\n </div>\n <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-m-0\">\n Choose the file format you want to generate.\n </p>\n </div>\n <div *ngIf=\"selectedTemplateSource === 'createNew'\" class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n <div class=\"cqa-flex cqa-flex-wrap cqa-gap-3\">\n <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(50%-6px)]\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n Template Name <span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-custom-input\n placeholder=\"PDF Document (.pdf)\"\n [value]=\"documentForm.get('templateName')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"documentForm.get('templateName')?.setValue($event)\">\n </cqa-custom-input>\n </div>\n <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(50%-6px)]\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n Template Description <span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-custom-input\n placeholder=\"PDF Document (.pdf)\"\n [value]=\"documentForm.get('templateDescription')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"documentForm.get('templateDescription')?.setValue($event)\">\n </cqa-custom-input>\n </div>\n </div>\n <div class=\"cqa-flex cqa-justify-end\">\n <cqa-button\n variant=\"filled\"\n btnSize=\"lg\"\n text=\"Create Template\"\n [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#3F43EE] cqa-bg-[#3F43EE]'\"\n (clicked)=\"onCreateTemplate()\">\n </cqa-button>\n </div>\n </div>\n </div> -->\n\n <!-- Document Mapper Section: title + subtitle left, Need help? right (CQA table below) -->\n <div class=\"cqa-flex cqa-flex-col cqa-flex-shrink-0 cqa-gap-3\">\n <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-gap-4\">\n <div class=\"cqa-flex cqa-flex-col cqa-min-w-0\">\n <h3 class=\"cqa-text-base cqa-font-semibold cqa-text-[#111827] cqa-text-[14px] cqa-m-0 cqa-leading-tight\">\n Document Mapper\n </h3>\n <p class=\"cqa-text-[12px] cqa-text-[#6B7280] cqa-m-0 cqa-mt-0.5\">\n Map placeholders to dynamic values.\n </p>\n </div>\n <div class=\"cqa-relative cqa-inline-flex cqa-flex-shrink-0\"\n (mouseenter)=\"showHelpTooltip = true\"\n (mouseleave)=\"showHelpTooltip = false\">\n <a *ngIf=\"mapperHelpUrl\"\n href=\"#\"\n (click)=\"onMapperHelpClick($event)\"\n class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[21px] cqa-no-underline cqa-cursor-pointer\">\n <svg width=\"17\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-flex-shrink-0 cqa-text-[#3F43EE]\" aria-hidden=\"true\">\n <g clip-path=\"url(#help-icon-clip-doc)\">\n <path d=\"M8.50033 14.6663C12.4123 14.6663 15.5837 11.6816 15.5837 7.99967C15.5837 4.31778 12.4123 1.33301 8.50033 1.33301C4.58831 1.33301 1.41699 4.31778 1.41699 7.99967C1.41699 11.6816 4.58831 14.6663 8.50033 14.6663Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M6.43848 6.00038C6.60501 5.55483 6.93371 5.17912 7.36636 4.9398C7.79901 4.70049 8.30769 4.61301 8.80231 4.69285C9.29693 4.7727 9.74556 5.01473 10.0687 5.37607C10.3919 5.7374 10.5688 6.19473 10.5681 6.66705C10.5681 8.00038 8.44306 8.66705 8.44306 8.66705\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M8.5 11.333H8.50966\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </g>\n <defs>\n <clipPath id=\"help-icon-clip-doc\">\n <rect width=\"17\" height=\"16\" fill=\"white\"/>\n </clipPath>\n </defs>\n </svg>\n Need help ?\n </a>\n <span *ngIf=\"!mapperHelpUrl\" class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-font-[500] cqa-text-[10px] cqa-cursor-default cqa-text-[#374151]\">\n <svg width=\"17\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-flex-shrink-0 cqa-text-[#3F43EE]\" aria-hidden=\"true\">\n <g clip-path=\"url(#help-icon-clip-doc-nolink)\">\n <path d=\"M8.50033 14.6663C12.4123 14.6663 15.5837 11.6816 15.5837 7.99967C15.5837 4.31778 12.4123 1.33301 8.50033 1.33301C4.58831 1.33301 1.41699 4.31778 1.41699 7.99967C1.41699 11.6816 4.58831 14.6663 8.50033 14.6663Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M6.43848 6.00038C6.60501 5.55483 6.93371 5.17912 7.36636 4.9398C7.79901 4.70049 8.30769 4.61301 8.80231 4.69285C9.29693 4.7727 9.74556 5.01473 10.0687 5.37607C10.3919 5.7374 10.5688 6.19473 10.5681 6.66705C10.5681 8.00038 8.44306 8.66705 8.44306 8.66705\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M8.5 11.333H8.50966\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </g>\n <defs>\n <clipPath id=\"help-icon-clip-doc-nolink\">\n <rect width=\"17\" height=\"16\" fill=\"white\"/>\n </clipPath>\n </defs>\n </svg>\n Need help ?\n </span>\n <div *ngIf=\"showHelpTooltip\" class=\"cqa-absolute cqa-pointer-events-none cqa-z-[100] cqa-top-[-24px] cqa-left-[-203px]\" role=\"tooltip\">\n <div class=\"cqa-text-white cqa-text-center cqa-whitespace-nowrap cqa-w-[306px] cqa-min-h-5 cqa-rounded-[6px] cqa-opacity-100 cqa-px-2 cqa-py-1 cqa-bg-[#0A0A0A] cqa-leading-5 cqa-text-[8px]\">\n {{ mapperHelpTooltipText }}\n </div>\n </div>\n </div>\n </div>\n <!-- Table or empty state: same container, header always visible -->\n <div class=\"cqa-rounded-lg cqa-overflow-hidden cqa-bg-white cqa-shadow-sm cqa-border cqa-border-solid cqa-border-gray-200\">\n <table class=\"cqa-w-full\">\n <thead>\n <tr class=\"cqa-items-center cqa-bg-[#D8D9FC4D]\">\n <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-w-[40px] cqa-border-b cqa-border-gray-200\">\n <mat-checkbox [checked]=\"allMappingsSelected\"\n [indeterminate]=\"someMappingsSelected && !allMappingsSelected\"\n (change)=\"onSelectAllMappings($event.checked)\"\n color=\"primary\"\n aria-label=\"Select all mappings\">\n </mat-checkbox>\n </th>\n <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-border-b cqa-border-gray-200\">Key</th>\n <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-border-b cqa-border-gray-200 cqa-w-[120px]\">Value Type</th>\n <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-border-b cqa-border-gray-200\">Value</th>\n <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-border-b cqa-border-gray-200 cqa-w-[48px]\">\n <span class=\"cqa-sr-only\">Delete</span>\n </th>\n </tr>\n </thead>\n <tbody class=\"cqa-w-full\">\n <!-- Empty state when no mappings -->\n <tr *ngIf=\"mappingsFormArray.length === 0\">\n <td colspan=\"5\" class=\"cqa-p-0 cqa-align-middle cqa-border-b cqa-border-gray-200\">\n <div class=\"cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-py-12 cqa-px-4 cqa-bg-white\">\n <p class=\"cqa-text-sm cqa-text-[#6B7280] cqa-m-0 cqa-mb-4\">Start mapping placeholders to values.</p>\n <button\n type=\"button\"\n class=\"cqa-rounded-lg cqa-px-4 cqa-py-2.5 cqa-text-sm cqa-font-semibold cqa-text-white cqa-bg-[#4F46E5] cqa-border-none cqa-cursor-pointer hover:cqa-opacity-90 cqa-transition-opacity\"\n (click)=\"addMapping()\">\n Add first mapping\n </button>\n </div>\n </td>\n </tr>\n <!-- Data rows when there are mappings -->\n <tr *ngFor=\"let mapping of mappingsFormArray.controls; let i = index\"\n class=\"cqa-bg-white hover:cqa-bg-[#F9FAFB]\">\n <td class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-middle cqa-border-b cqa-border-gray-200\">\n <mat-checkbox [checked]=\"getMappingFormGroup(i).get('enabled')?.value\"\n (change)=\"getMappingFormGroup(i).get('enabled')?.setValue($event.checked)\"\n color=\"primary\"\n aria-label=\"Enable mapping\">\n </mat-checkbox>\n </td>\n <td class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-middle cqa-border-b cqa-border-gray-200 \">\n <cqa-custom-input\n [placeholder]=\"'Key'\"\n [value]=\"getMappingFormGroup(i).get('key')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"getMappingFormGroup(i).get('key')?.setValue($event)\">\n </cqa-custom-input>\n </td>\n <td class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-middle cqa-border-b cqa-border-gray-200\">\n <div class=\"document-type-select\">\n <cqa-dynamic-select\n [form]=\"getMappingFormGroup(i)\"\n [config]=\"getValueTypeConfig(i)\">\n </cqa-dynamic-select>\n </div>\n </td>\n <td class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-middle cqa-border-b cqa-border-gray-200\">\n <cqa-custom-input\n [placeholder]=\"'Value'\"\n [value]=\"getMappingFormGroup(i).get('value')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"getMappingFormGroup(i).get('value')?.setValue($event)\">\n </cqa-custom-input>\n </td>\n <td class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-middle cqa-border-b cqa-border-gray-200\">\n <button\n type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-9 cqa-h-9 cqa-rounded cqa-text-[#E57373] cqa-transition-colors cqa-border-none cqa-bg-transparent cqa-cursor-pointer hover:cqa-opacity-80\"\n (click)=\"removeMapping(i)\"\n [attr.aria-label]=\"'Delete mapping'\">\n <svg class=\"cqa-w-5 cqa-h-5 cqa-flex-shrink-0\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n <path d=\"M3 6h18M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2m3 0v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6h14z\"/>\n <path d=\"M10 11v6M14 11v6\"/>\n </svg>\n </button>\n </td>\n </tr>\n </tbody>\n \n </table>\n <div class=\"cqa-flex cqa-justify-end\" *ngIf=\"mappingsFormArray.length > 0\">\n <button\n type=\"button\"\n class=\"cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-3\"\n (click)=\"addMapping()\">\n + Add Mapping\n </button>\n </div>\n </div>\n <!-- <div class=\"cqa-flex cqa-justify-end\" *ngIf=\"mappingsFormArray.length > 0\">\n <button\n type=\"button\"\n class=\"cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-0\"\n (click)=\"addMapping()\">\n + Add Mapping\n </button>\n </div> -->\n </div>\n\n <!-- Description (after Document Mapper) -->\n <div class=\"cqa-flex cqa-flex-wrap cqa-flex-shrink-0 cqa-gap-14\">\n <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)]\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n Description\n </label>\n <cqa-custom-input\n placeholder=\"Description\"\n [value]=\"documentForm.get('description')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"documentForm.get('description')?.setValue($event)\">\n </cqa-custom-input>\n <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n Optional description for this document generation step\n </p>\n </div>\n </div>\n </div>\n\n <!-- Advanced Settings Variables Form -->\n <div *ngIf=\"advancedSettingsVariables.length > 0\" class=\"cqa-flex-shrink-0 cqa-px-4 cqa-pb-3\">\n <div class=\"cqa-flex cqa-flex-col cqa-w-full\">\n <button type=\"button\"\n class=\"cqa-flex cqa-w-full cqa-items-center cqa-justify-between cqa-gap-2 cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-0 cqa-mb-1.5\"\n (click)=\"toggleAdvanced()\">\n <span class=\"cqa-text-[10px]\">Advanced</span>\n <mat-icon class=\"cqa-text-base\" [class.cqa-rotate-180]=\"advancedExpanded\">\n expand_more\n </mat-icon>\n </button>\n <div *ngIf=\"advancedExpanded\" class=\"cqa-mt-2\">\n <cqa-advanced-variables-form \n [advancedVariables]=\"advancedSettingsVariables\"\n [advancedVariableForm]=\"advancedVariablesForm\"\n (variableBooleanChange)=\"onAdvancedVariableBooleanChange($event.name, $event.value)\">\n </cqa-advanced-variables-form>\n </div>\n </div>\n </div>\n \n\n <!-- Divider above footer -->\n <div class=\"cqa-flex-shrink-0\">\n <div class=\"cqa-h-px cqa-w-full\" role=\"presentation\"></div>\n </div>\n\n <!-- Action Buttons -->\n <div class=\"cqa-flex cqa-items-stretch cqa-w-full cqa-p-4 cqa-gap-3\">\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <cqa-button\n variant=\"outlined\"\n btnSize=\"lg\"\n text=\"Cancel\"\n [fullWidth]=\"true\"\n [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#414146]'\"\n (clicked)=\"onCancel()\">\n </cqa-button>\n </div>\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <cqa-button *ngIf=\"!isCreatingStep\"\n variant=\"filled\"\n btnSize=\"lg\"\n [text]=\"editMode ? 'Update Step' : 'Create Step'\"\n [fullWidth]=\"true\"\n [disabled]=\"!isFormValid()\"\n [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#3F43EE]'\"\n (clicked)=\"onCreateStep()\">\n </cqa-button>\n <div *ngIf=\"isCreatingStep\" class=\"cqa-min-h-[38px] cqa-rounded-[8px]\">\n <cqa-badge label=\"Creating\u2026\" icon=\"autorenew\" [isLoading]=\"true\" [fullWidth]=\"true\" [centerContent]=\"true\"\n [inlineStyles]=\"'min-height: 38px; height: 38px; box-sizing: border-box; display: flex; align-items: center; justify-content: center;'\"\n variant=\"info\" size=\"medium\"></cqa-badge>\n </div>\n </div>\n </div>\n</div>\n" }]
46158
+ args: [{ selector: 'cqa-step-builder-document', template: "<div class=\"cqa-ui-root cqa-block cqa-w-full cqa-min-w-0 cqa-step-builder-document\" style=\"height: 100%;width: 100%;\">\n <div\n class=\"cqa-flex cqa-flex-col cqa-w-full cqa-min-w-0 cqa-h-full cqa-bg-white cqa-border cqa-box-border cqa-max-w-full cqa-opacity-100 cqa-h-full cqa-w-full\">\n <!-- Content area: padding 16px, gap 12px between sections (no flex-1 to avoid gap above footer) -->\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-overflow-y-auto cqa-p-4 cqa-gap-3\">\n <!-- Header: Document Generation Template Step (left-aligned, Inter 600 12px line-height 100%) -->\n <h2\n class=\"cqa-text-[12px] cqa-leading-[100%] cqa-font-semibold cqa-text-[#111827] cqa-m-0 cqa-text-left cqa-flex-shrink-0 cqa-align-middle\">\n Document Generation Template Step\n </h2>\n\n <!-- File Name and Document Type Row -->\n <div class=\"cqa-flex cqa-flex-wrap cqa-flex-shrink-0 cqa-gap-14\">\n <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)]\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n File Name <span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-custom-input\n placeholder=\"File Name\"\n [value]=\"documentForm.get('fileName')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"documentForm.get('fileName')?.setValue($event)\">\n </cqa-custom-input>\n <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n The name of the file to be generated\n </p>\n </div>\n <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)] \">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n Document Type <span class=\"cqa-text-red-500\">*</span>\n </label>\n <div class=\"document-type-select\">\n <cqa-dynamic-select\n [form]=\"documentForm\"\n [config]=\"getDocumentTypeConfig()\">\n </cqa-dynamic-select>\n </div>\n <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n Choose the file format you want to generate.\n </p>\n </div>\n </div>\n\n <!-- Output Variable and Conditional Fields Row -->\n <div class=\"cqa-flex cqa-flex-wrap cqa-flex-shrink-0 cqa-gap-14\">\n <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)]\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n Output Variable <span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-custom-input\n placeholder=\"Input\"\n [value]=\"documentForm.get('outputVariable')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"documentForm.get('outputVariable')?.setValue($event)\">\n </cqa-custom-input>\n <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n Stores the generated file so it can be used in later steps.\n </p>\n </div>\n <!-- Seprator (shown when documentType is 'txt') -->\n <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)]\" *ngIf=\"isTxtSelected\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n Seprator\n </label>\n <cqa-custom-input\n placeholder=\"Seprator\"\n [value]=\"documentForm.get('seprator')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"documentForm.get('seprator')?.setValue($event)\">\n </cqa-custom-input>\n <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n The seprator to be used to separate the values in the generated file\n </p>\n </div>\n <!-- Delimeter Type (shown when documentType is 'csv') -->\n <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)]\" *ngIf=\"isCsvSelected\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n Delimeter Type\n </label>\n <div class=\"document-type-select\">\n <cqa-dynamic-select\n [form]=\"documentForm\"\n [config]=\"getDelimeterConfig()\">\n </cqa-dynamic-select>\n </div>\n <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n Choose the delimeter type for the CSV file\n </p>\n </div>\n </div>\n\n <!-- File Format Header (shown when documentType is 'txt') -->\n <div class=\"cqa-flex cqa-flex-wrap cqa-flex-shrink-0 cqa-gap-14\" *ngIf=\"isTxtSelected\">\n <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)]\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n File Format Header\n </label>\n <cqa-custom-input\n placeholder=\"File Format Header\"\n [value]=\"documentForm.get('fileFormatHeader')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"documentForm.get('fileFormatHeader')?.setValue($event)\">\n </cqa-custom-input>\n <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n Header text for the generated txt file\n </p>\n </div>\n </div>\n\n <!-- Template Source Section: label left, tabs right on same row -->\n <!-- <div class=\"cqa-flex cqa-flex-col cqa-flex-shrink-0 cqa-gap-3\">\n \n <div class=\"cqa-flex cqa-items-center cqa-justify-between cqa-gap-4\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-m-0 cqa-flex-shrink-0\">\n Template Source\n </label>\n <cqa-segment-control\n class=\"cqa-flex-shrink-0\"\n [segments]=\"[\n { label: 'Use Existing Template', value: 'existing' },\n { label: 'Upload Template', value: 'upload' },\n { label: 'Create New', value: 'createNew' }\n ]\"\n [value]=\"selectedTemplateSource\"\n (valueChange)=\"onTemplateSourceChange($event)\">\n </cqa-segment-control>\n </div>\n <div class=\"document-type-select\" *ngIf=\"selectedTemplateSource === 'existing'\">\n <cqa-dynamic-select\n [form]=\"documentForm\"\n [config]=\"getTemplateSelectConfig()\">\n </cqa-dynamic-select>\n </div>\n\n <div *ngIf=\"selectedTemplateSource === 'upload'\" class=\"cqa-flex cqa-flex-col cqa-gap-1.5\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-m-0\">\n Attachment <span class=\"cqa-text-red-500\">*</span>\n </label>\n <input\n #fileInput\n type=\"file\"\n accept=\".pdf,.doc,.docx,.txt\"\n class=\"cqa-hidden\"\n (change)=\"onFileSelected($event)\">\n <div\n class=\"cqa-w-full cqa-min-h-[140px] cqa-rounded cqa-border-2 cqa-border-dashed cqa-border-gray-300 cqa-bg-white cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-gap-3 cqa-p-6 cqa-cursor-pointer cqa-transition-colors\"\n [class.cqa-ring-2]=\"isDragOver\"\n [class.cqa-ring-[#3F43EE]]=\"isDragOver\"\n [class.cqa-ring-inset]=\"isDragOver\"\n (click)=\"fileInput.click()\"\n (dragover)=\"onDragOver($event)\"\n (dragleave)=\"onDragLeave($event)\"\n (drop)=\"onDrop($event)\"\n role=\"button\"\n tabindex=\"0\"\n (keydown.enter)=\"fileInput.click()\"\n (keydown.space)=\"fileInput.click()\"\n aria-label=\"Upload template file\">\n <svg class=\"cqa-w-8 cqa-h-8 cqa-font-bold\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n <path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"/>\n <polyline points=\"17 8 12 3 7 8\"/>\n <line x1=\"12\" y1=\"3\" x2=\"12\" y2=\"15\"/>\n </svg>\n <p class=\"cqa-text-base cqa-text-[#374151] cqa-m-0 cqa-text-center cqa-font-bold\">\n Drag and drop files here or <span class=\"cqa-text-[#3F43EE] cqa-font-medium hover:cqa-underline\">browse</span>\n </p>\n <p class=\"cqa-text-sm cqa-text-[#6B7280] cqa-m-0\">\n PDF, DOC, or TXT files\n </p>\n </div>\n <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-m-0\">\n Choose the file format you want to generate.\n </p>\n </div>\n <div *ngIf=\"selectedTemplateSource === 'createNew'\" class=\"cqa-flex cqa-flex-col cqa-gap-3\">\n <div class=\"cqa-flex cqa-flex-wrap cqa-gap-3\">\n <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(50%-6px)]\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n Template Name <span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-custom-input\n placeholder=\"PDF Document (.pdf)\"\n [value]=\"documentForm.get('templateName')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"documentForm.get('templateName')?.setValue($event)\">\n </cqa-custom-input>\n </div>\n <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(50%-6px)]\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n Template Description <span class=\"cqa-text-red-500\">*</span>\n </label>\n <cqa-custom-input\n placeholder=\"PDF Document (.pdf)\"\n [value]=\"documentForm.get('templateDescription')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"documentForm.get('templateDescription')?.setValue($event)\">\n </cqa-custom-input>\n </div>\n </div>\n <div class=\"cqa-flex cqa-justify-end\">\n <cqa-button\n variant=\"filled\"\n btnSize=\"lg\"\n text=\"Create Template\"\n [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#3F43EE] cqa-bg-[#3F43EE]'\"\n (clicked)=\"onCreateTemplate()\">\n </cqa-button>\n </div>\n </div>\n </div> -->\n\n <!-- Document Mapper Section: title + subtitle left, Need help? right (CQA table below) -->\n <div class=\"cqa-flex cqa-flex-col cqa-flex-shrink-0 cqa-gap-3\">\n <div class=\"cqa-flex cqa-items-start cqa-justify-between cqa-gap-4\">\n <div class=\"cqa-flex cqa-flex-col cqa-min-w-0\">\n <h3 class=\"cqa-text-base cqa-font-semibold cqa-text-[#111827] cqa-text-[14px] cqa-m-0 cqa-leading-tight\">\n Document Mapper\n </h3>\n <p class=\"cqa-text-[12px] cqa-text-[#6B7280] cqa-m-0 cqa-mt-0.5\">\n Map placeholders to dynamic values.\n </p>\n </div>\n <div class=\"cqa-relative cqa-inline-flex cqa-flex-shrink-0\"\n (mouseenter)=\"showHelpTooltip = true\"\n (mouseleave)=\"showHelpTooltip = false\">\n <a *ngIf=\"mapperHelpUrl\"\n href=\"#\"\n (click)=\"onMapperHelpClick($event)\"\n class=\"cqa-flex cqa-items-center cqa-gap-1 cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[21px] cqa-no-underline cqa-cursor-pointer\">\n <svg width=\"17\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-flex-shrink-0 cqa-text-[#3F43EE]\" aria-hidden=\"true\">\n <g clip-path=\"url(#help-icon-clip-doc)\">\n <path d=\"M8.50033 14.6663C12.4123 14.6663 15.5837 11.6816 15.5837 7.99967C15.5837 4.31778 12.4123 1.33301 8.50033 1.33301C4.58831 1.33301 1.41699 4.31778 1.41699 7.99967C1.41699 11.6816 4.58831 14.6663 8.50033 14.6663Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M6.43848 6.00038C6.60501 5.55483 6.93371 5.17912 7.36636 4.9398C7.79901 4.70049 8.30769 4.61301 8.80231 4.69285C9.29693 4.7727 9.74556 5.01473 10.0687 5.37607C10.3919 5.7374 10.5688 6.19473 10.5681 6.66705C10.5681 8.00038 8.44306 8.66705 8.44306 8.66705\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M8.5 11.333H8.50966\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </g>\n <defs>\n <clipPath id=\"help-icon-clip-doc\">\n <rect width=\"17\" height=\"16\" fill=\"white\"/>\n </clipPath>\n </defs>\n </svg>\n Need help ?\n </a>\n <span *ngIf=\"!mapperHelpUrl\" class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-font-[500] cqa-text-[10px] cqa-cursor-default cqa-text-[#374151]\">\n <svg width=\"17\" height=\"16\" viewBox=\"0 0 17 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cqa-flex-shrink-0 cqa-text-[#3F43EE]\" aria-hidden=\"true\">\n <g clip-path=\"url(#help-icon-clip-doc-nolink)\">\n <path d=\"M8.50033 14.6663C12.4123 14.6663 15.5837 11.6816 15.5837 7.99967C15.5837 4.31778 12.4123 1.33301 8.50033 1.33301C4.58831 1.33301 1.41699 4.31778 1.41699 7.99967C1.41699 11.6816 4.58831 14.6663 8.50033 14.6663Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M6.43848 6.00038C6.60501 5.55483 6.93371 5.17912 7.36636 4.9398C7.79901 4.70049 8.30769 4.61301 8.80231 4.69285C9.29693 4.7727 9.74556 5.01473 10.0687 5.37607C10.3919 5.7374 10.5688 6.19473 10.5681 6.66705C10.5681 8.00038 8.44306 8.66705 8.44306 8.66705\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M8.5 11.333H8.50966\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </g>\n <defs>\n <clipPath id=\"help-icon-clip-doc-nolink\">\n <rect width=\"17\" height=\"16\" fill=\"white\"/>\n </clipPath>\n </defs>\n </svg>\n Need help ?\n </span>\n <div *ngIf=\"showHelpTooltip\" class=\"cqa-absolute cqa-pointer-events-none cqa-z-[100] cqa-top-[-24px] cqa-left-[-203px]\" role=\"tooltip\">\n <div class=\"cqa-text-white cqa-text-center cqa-whitespace-nowrap cqa-w-[306px] cqa-min-h-5 cqa-rounded-[6px] cqa-opacity-100 cqa-px-2 cqa-py-1 cqa-bg-[#0A0A0A] cqa-leading-5 cqa-text-[8px]\">\n {{ mapperHelpTooltipText }}\n </div>\n </div>\n </div>\n </div>\n <!-- Table or empty state: same container, header always visible -->\n <div class=\"cqa-rounded-lg cqa-overflow-hidden cqa-bg-white cqa-shadow-sm cqa-border cqa-border-solid cqa-border-gray-200\">\n <table class=\"cqa-w-full\">\n <thead>\n <tr class=\"cqa-items-center cqa-bg-[#D8D9FC4D]\">\n <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-w-[40px] cqa-border-b cqa-border-gray-200\">\n <mat-checkbox [checked]=\"allMappingsSelected\"\n [indeterminate]=\"someMappingsSelected && !allMappingsSelected\"\n (change)=\"onSelectAllMappings($event.checked)\"\n color=\"primary\"\n aria-label=\"Select all mappings\">\n </mat-checkbox>\n </th>\n <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-border-b cqa-border-gray-200\">Key</th>\n <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-border-b cqa-border-gray-200 cqa-w-[120px]\">Value Type</th>\n <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-border-b cqa-border-gray-200\">Value</th>\n <th class=\"cqa-py-[13.25px] cqa-px-[10.5px] cqa-text-xs cqa-font-semibold cqa-text-[#374151] cqa-text-left cqa-border-b cqa-border-gray-200 cqa-w-[48px]\">\n <span class=\"cqa-sr-only\">Delete row</span>\n </th>\n </tr>\n </thead>\n <tbody class=\"cqa-w-full\">\n <!-- Empty state when no mappings -->\n <tr *ngIf=\"mappingsFormArray.length === 0\">\n <td colspan=\"5\" class=\"cqa-p-0 cqa-align-middle cqa-border-b cqa-border-gray-200\">\n <div class=\"cqa-flex cqa-flex-col cqa-items-center cqa-justify-center cqa-py-12 cqa-px-4 cqa-bg-white\">\n <p class=\"cqa-text-sm cqa-text-[#6B7280] cqa-m-0 cqa-mb-4\">Start mapping placeholders to values.</p>\n <button\n type=\"button\"\n class=\"cqa-rounded-lg cqa-px-4 cqa-py-2.5 cqa-text-sm cqa-font-semibold cqa-text-white cqa-bg-[#4F46E5] cqa-border-none cqa-cursor-pointer hover:cqa-opacity-90 cqa-transition-opacity\"\n (click)=\"addMapping()\">\n Add first mapping\n </button>\n </div>\n </td>\n </tr>\n <!-- Data rows when there are mappings -->\n <tr *ngFor=\"let mapping of mappingsFormArray.controls; let i = index\"\n class=\"cqa-bg-white hover:cqa-bg-[#F9FAFB]\">\n <td class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-top cqa-border-b cqa-border-gray-200\">\n <mat-checkbox [checked]=\"getMappingFormGroup(i).get('enabled')?.value\"\n (change)=\"getMappingFormGroup(i).get('enabled')?.setValue($event.checked)\"\n color=\"primary\"\n aria-label=\"Enable mapping\">\n </mat-checkbox>\n </td>\n <td class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-top cqa-border-b cqa-border-gray-200 \">\n <cqa-custom-input\n [placeholder]=\"'Key'\"\n [value]=\"getMappingFormGroup(i).get('key')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"getMappingFormGroup(i).get('key')?.setValue($event)\">\n </cqa-custom-input>\n </td>\n <td colspan=\"2\" class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-top cqa-border-b cqa-border-gray-200\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-2\">\n <div *ngFor=\"let entry of getValuesFormArray(i).controls; let j = index\"\n class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <div class=\"document-type-select cqa-w-[120px] cqa-flex-shrink-0\">\n <cqa-dynamic-select\n [form]=\"getValueFormGroup(i, j)\"\n [config]=\"getValueTypeConfig(i, j)\">\n </cqa-dynamic-select>\n </div>\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <cqa-custom-input\n [placeholder]=\"'Value'\"\n [value]=\"getValueFormGroup(i, j).get('value')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"getValueFormGroup(i, j).get('value')?.setValue($event)\">\n </cqa-custom-input>\n </div>\n <button\n type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-7 cqa-h-7 cqa-rounded cqa-text-[#9CA3AF] cqa-transition-colors cqa-border-none cqa-bg-transparent cqa-cursor-pointer hover:cqa-text-[#374151] disabled:cqa-opacity-30 disabled:cqa-cursor-not-allowed\"\n [disabled]=\"getValuesFormArray(i).length <= 1\"\n (click)=\"removeValueEntry(i, j)\"\n [attr.aria-label]=\"'Remove value'\"\n [attr.title]=\"getValuesFormArray(i).length <= 1 ? 'A key needs at least one value' : 'Remove this value'\">\n <mat-icon class=\"cqa-text-[18px] cqa-w-[18px] cqa-h-[18px] cqa-leading-[18px]\">close</mat-icon>\n </button>\n </div>\n <button\n type=\"button\"\n class=\"cqa-self-start cqa-flex cqa-items-center cqa-gap-1 cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-0 cqa-mt-1\"\n (click)=\"addValueEntry(i)\"\n [attr.aria-label]=\"'Add value'\">\n <mat-icon class=\"cqa-text-[16px] cqa-w-4 cqa-h-4 cqa-leading-4\">add</mat-icon>\n Add value\n </button>\n </div>\n </td>\n <td class=\"cqa-px-[10.5px] cqa-py-[11px] cqa-align-top cqa-border-b cqa-border-gray-200\">\n <button\n type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-w-9 cqa-h-9 cqa-rounded cqa-text-[#E57373] cqa-transition-colors cqa-border-none cqa-bg-transparent cqa-cursor-pointer hover:cqa-opacity-80\"\n (click)=\"removeMapping(i)\"\n [attr.aria-label]=\"'Delete key row'\"\n title=\"Delete this key and all its values\">\n <svg class=\"cqa-w-5 cqa-h-5 cqa-flex-shrink-0\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n <path d=\"M3 6h18M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2m3 0v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6h14z\"/>\n <path d=\"M10 11v6M14 11v6\"/>\n </svg>\n </button>\n </td>\n </tr>\n </tbody>\n \n </table>\n <div class=\"cqa-flex cqa-justify-end\" *ngIf=\"mappingsFormArray.length > 0\">\n <button\n type=\"button\"\n class=\"cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-3\"\n (click)=\"addMapping()\">\n + Add Mapping\n </button>\n </div>\n </div>\n <!-- <div class=\"cqa-flex cqa-justify-end\" *ngIf=\"mappingsFormArray.length > 0\">\n <button\n type=\"button\"\n class=\"cqa-text-[#3F43EE] cqa-text-[12px] cqa-leading-[18px] cqa-font-medium cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-0\"\n (click)=\"addMapping()\">\n + Add Mapping\n </button>\n </div> -->\n </div>\n\n <!-- Description (after Document Mapper) -->\n <div class=\"cqa-flex cqa-flex-wrap cqa-flex-shrink-0 cqa-gap-14\">\n <div class=\"cqa-flex-1 cqa-min-w-0 cqa-min-w-[calc(45%-6px)]\">\n <label class=\"cqa-text-sm cqa-font-medium cqa-text-[#374151] cqa-mb-1.5 cqa-block\">\n Description\n </label>\n <cqa-custom-input\n placeholder=\"Description\"\n [value]=\"documentForm.get('description')?.value\"\n [fullWidth]=\"true\"\n (valueChange)=\"documentForm.get('description')?.setValue($event)\">\n </cqa-custom-input>\n <p class=\"cqa-text-xs cqa-text-[#0A0A0A] cqa-mt-1 cqa-m-0\">\n Optional description for this document generation step\n </p>\n </div>\n </div>\n </div>\n\n <!-- Advanced Settings Variables Form -->\n <div *ngIf=\"advancedSettingsVariables.length > 0\" class=\"cqa-flex-shrink-0 cqa-px-4 cqa-pb-3\">\n <div class=\"cqa-flex cqa-flex-col cqa-w-full\">\n <button type=\"button\"\n class=\"cqa-flex cqa-w-full cqa-items-center cqa-justify-between cqa-gap-2 cqa-text-sm cqa-font-medium cqa-text-gray-700 cqa-bg-transparent cqa-border-none cqa-cursor-pointer cqa-p-0 cqa-mb-1.5\"\n (click)=\"toggleAdvanced()\">\n <span class=\"cqa-text-[10px]\">Advanced</span>\n <mat-icon class=\"cqa-text-base\" [class.cqa-rotate-180]=\"advancedExpanded\">\n expand_more\n </mat-icon>\n </button>\n <div *ngIf=\"advancedExpanded\" class=\"cqa-mt-2\">\n <cqa-advanced-variables-form \n [advancedVariables]=\"advancedSettingsVariables\"\n [advancedVariableForm]=\"advancedVariablesForm\"\n (variableBooleanChange)=\"onAdvancedVariableBooleanChange($event.name, $event.value)\">\n </cqa-advanced-variables-form>\n </div>\n </div>\n </div>\n \n\n <!-- Divider above footer -->\n <div class=\"cqa-flex-shrink-0\">\n <div class=\"cqa-h-px cqa-w-full\" role=\"presentation\"></div>\n </div>\n\n <!-- Action Buttons -->\n <div class=\"cqa-flex cqa-items-stretch cqa-w-full cqa-p-4 cqa-gap-3\">\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <cqa-button\n variant=\"outlined\"\n btnSize=\"lg\"\n text=\"Cancel\"\n [fullWidth]=\"true\"\n [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#414146]'\"\n (clicked)=\"onCancel()\">\n </cqa-button>\n </div>\n <div class=\"cqa-flex-1 cqa-min-w-0\">\n <cqa-button *ngIf=\"!isCreatingStep\"\n variant=\"filled\"\n btnSize=\"lg\"\n [text]=\"editMode ? 'Update Step' : 'Create Step'\"\n [fullWidth]=\"true\"\n [disabled]=\"!isFormValid()\"\n [customClass]=\"'cqa-text-[14px] cqa-py-[9px] cqa-border-[#3F43EE]'\"\n (clicked)=\"onCreateStep()\">\n </cqa-button>\n <div *ngIf=\"isCreatingStep\" class=\"cqa-min-h-[38px] cqa-rounded-[8px]\">\n <cqa-badge label=\"Creating\u2026\" icon=\"autorenew\" [isLoading]=\"true\" [fullWidth]=\"true\" [centerContent]=\"true\"\n [inlineStyles]=\"'min-height: 38px; height: 38px; box-sizing: border-box; display: flex; align-items: center; justify-content: center;'\"\n variant=\"info\" size=\"medium\"></cqa-badge>\n </div>\n </div>\n </div>\n</div>\n" }]
46125
46159
  }], ctorParameters: function () { return [{ type: i1$1.FormBuilder }]; }, propDecorators: { documentTypeOptions: [{
46126
46160
  type: Input
46127
46161
  }], templateOptions: [{