@cqa-lib/cqa-ui 1.1.408 → 1.1.409
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2020/lib/test-case-details/ai-agent-step/ai-agent-step.component.mjs +3 -3
- package/esm2020/lib/test-case-details/ai-verify-step/ai-verify-step.component.mjs +3 -3
- package/esm2020/lib/test-case-details/api-step/api-step.component.mjs +3 -3
- package/esm2020/lib/test-case-details/condition-step/condition-step.component.mjs +58 -9
- package/esm2020/lib/test-case-details/custom-code-step/custom-code-step.component.mjs +3 -3
- package/esm2020/lib/test-case-details/database-step/database-step.component.mjs +3 -3
- package/esm2020/lib/test-case-details/loop-step/loop-step.component.mjs +47 -11
- package/esm2020/lib/test-case-details/normal-step/normal-step.component.mjs +3 -3
- package/esm2020/lib/test-case-details/restore-session-step/restore-session-step.component.mjs +3 -3
- package/esm2020/lib/test-case-details/screenshot-step/screenshot-step.component.mjs +3 -3
- package/esm2020/lib/test-case-details/scroll-step/scroll-step.component.mjs +3 -3
- package/esm2020/lib/test-case-details/step-group/step-group.component.mjs +46 -3
- package/esm2020/lib/test-case-details/test-case-details-renderer/test-case-details-renderer.component.mjs +13 -2
- package/esm2020/lib/test-case-details/upload-step/upload-step.component.mjs +3 -3
- package/esm2020/lib/test-case-details/verify-url-step/verify-url-step.component.mjs +3 -3
- package/fesm2015/cqa-lib-cqa-ui.mjs +192 -45
- package/fesm2015/cqa-lib-cqa-ui.mjs.map +1 -1
- package/fesm2020/cqa-lib-cqa-ui.mjs +182 -43
- package/fesm2020/cqa-lib-cqa-ui.mjs.map +1 -1
- package/lib/test-case-details/condition-step/condition-step.component.d.ts +31 -2
- package/lib/test-case-details/loop-step/loop-step.component.d.ts +7 -1
- package/lib/test-case-details/step-group/step-group.component.d.ts +12 -1
- package/lib/test-case-details/test-case-details-renderer/test-case-details-renderer.component.d.ts +5 -1
- package/package.json +1 -1
- package/styles.css +1 -1
|
@@ -22879,10 +22879,10 @@ class TestCaseNormalStepComponent {
|
|
|
22879
22879
|
}
|
|
22880
22880
|
}
|
|
22881
22881
|
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 });
|
|
22882
|
-
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", 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\"\n [style.padding-left.px]=\"getRowPaddingLeftPx()\"\n style=\"border-top: 1px solid #E5E7EB; border-bottom: 1px solid #E5E7EB;\">\n\n <div 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\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 [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 <!-- 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 <!-- <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 } });
|
|
22882
|
+
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", 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'\"\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 [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 <!-- 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 <!-- <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 } });
|
|
22883
22883
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseNormalStepComponent, decorators: [{
|
|
22884
22884
|
type: Component,
|
|
22885
|
-
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\"\n [style.padding-left.px]=\"getRowPaddingLeftPx()\"\n style=\"border-top: 1px solid #E5E7EB; border-bottom: 1px solid #E5E7EB;\">\n\n <div 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\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 [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 <!-- 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 <!-- <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>" }]
|
|
22885
|
+
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'\"\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 [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 <!-- 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 <!-- <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>" }]
|
|
22886
22886
|
}], ctorParameters: function () { return [{ type: CustomEditStepService }, { type: ElementPopupService }, { type: TestDataModalService }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i1$2.DomSanitizer }]; }, propDecorators: { dropdownContainer: [{
|
|
22887
22887
|
type: ViewChild,
|
|
22888
22888
|
args: ['dropdownContainer', { static: false }]
|
|
@@ -23135,6 +23135,11 @@ class TestCaseDetailsRendererComponent {
|
|
|
23135
23135
|
this.componentRef.instance.isDuplicating = this.isDuplicating;
|
|
23136
23136
|
this.cdr.detectChanges();
|
|
23137
23137
|
}
|
|
23138
|
+
else if (changes['currentTestCaseId'] && this.componentRef?.instance != null &&
|
|
23139
|
+
(isStepGroupConfig(this.step) || isLoopStepConfig(this.step) || isConditionStepConfig(this.step))) {
|
|
23140
|
+
this.componentRef.instance.currentTestCaseId = this.currentTestCaseId;
|
|
23141
|
+
this.cdr.detectChanges();
|
|
23142
|
+
}
|
|
23138
23143
|
}
|
|
23139
23144
|
/** Update only data profile / options inputs on existing instance (avoids full recreate and losing isEditing). */
|
|
23140
23145
|
updateOptionsInputs(instance) {
|
|
@@ -23230,6 +23235,7 @@ class TestCaseDetailsRendererComponent {
|
|
|
23230
23235
|
instance.branches = this.step.branches;
|
|
23231
23236
|
// Pass data profile inputs to step instances that can contain nested loop steps
|
|
23232
23237
|
if (isLoopStepConfig(this.step) || isConditionStepConfig(this.step) || isStepGroupConfig(this.step)) {
|
|
23238
|
+
instance.currentTestCaseId = this.currentTestCaseId;
|
|
23233
23239
|
instance.dataProfileOptions = this.dataProfileOptions;
|
|
23234
23240
|
instance.hasMoreDataProfiles = this.hasMoreDataProfiles;
|
|
23235
23241
|
instance.isLoadingDataProfiles = this.isLoadingDataProfiles;
|
|
@@ -23401,6 +23407,9 @@ class TestCaseDetailsRendererComponent {
|
|
|
23401
23407
|
if (v.isCreateMode) {
|
|
23402
23408
|
payload.isCreateMode = true;
|
|
23403
23409
|
}
|
|
23410
|
+
if (v.createModeBranchData != null) {
|
|
23411
|
+
payload.createModeBranchData = v.createModeBranchData;
|
|
23412
|
+
}
|
|
23404
23413
|
this.editInDepth.emit(payload);
|
|
23405
23414
|
}
|
|
23406
23415
|
else {
|
|
@@ -23438,7 +23447,7 @@ class TestCaseDetailsRendererComponent {
|
|
|
23438
23447
|
}
|
|
23439
23448
|
}
|
|
23440
23449
|
TestCaseDetailsRendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseDetailsRendererComponent, deps: [{ token: TEST_CASE_STEP_COMPONENT_MAP }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
23441
|
-
TestCaseDetailsRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestCaseDetailsRendererComponent, selector: "cqa-test-case-details-renderer", inputs: { step: "step", index: "index", isNested: "isNested", isInsideLoop: "isInsideLoop", isInsideStepGroup: "isInsideStepGroup", nestingLevel: "nestingLevel", branch: "branch", isReorder: "isReorder", selected: "selected", isDuplicating: "isDuplicating", addStepBetweenAbove: "addStepBetweenAbove", addStepBetweenBelow: "addStepBetweenBelow", addStepBetween: "addStepBetween", editable: "editable", dataProfileOptions: "dataProfileOptions", hasMoreDataProfiles: "hasMoreDataProfiles", isLoadingDataProfiles: "isLoadingDataProfiles", naturalTextActionsOptions: "naturalTextActionsOptions", setConditionTemplateVariables: "setConditionTemplateVariables" }, outputs: { nestedStepChange: "nestedStepChange", addStep: "addStep", deleteStep: "deleteStep", toggleExpanded: "toggleExpanded", groupNameChange: "groupNameChange", descriptionChange: "descriptionChange", reusableChange: "reusableChange", openExternal: "openExternal", edit: "edit", link: "link", duplicate: "duplicate", delete: "delete", viewDetails: "viewDetails", selectionChange: "selectionChange", conditionChange: "conditionChange", branchStepChange: "branchStepChange", addStepForBranch: "addStepForBranch", addStepForLoop: "addStepForLoop", deleteStepWithBranch: "deleteStepWithBranch", addBranch: "addBranch", addElse: "addElse", deleteBranch: "deleteBranch", testDataProfileChange: "testDataProfileChange", startStepChange: "startStepChange", endStepChange: "endStepChange", maxIterationsChange: "maxIterationsChange", eventTypeChange: "eventTypeChange", parameterChange: "parameterChange", clickAction: "clickAction", dndDropInZone: "dndDropInZone", loadMoreDataProfiles: "loadMoreDataProfiles", searchDataProfiles: "searchDataProfiles", stepUpdate: "stepUpdate", addStepBetweenClick: "addStepBetweenClick", editInDepth: "editInDepth" }, host: { classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "stepHost", first: true, predicate: ["stepHost"], descendants: true, read: ViewContainerRef }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-relative cqa-step-renderer-hover-container\">\n <button *ngIf=\"editable && !isReorder && (addStepBetweenAbove && addStepBetween)\"\n class=\"cqa-absolute cqa-top-[calc(0 - 12px)] cqa-left-[50%] cqa-translate-x-[-50%] cqa-p-0 cqa-z-[1] cqa-add-step-between-btn\"\n style=\"top: -12px;\" (click)=\"addStepBetweenClick.emit({step: step, index: index, position: 'ABOVE'})\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect x=\"1\" y=\"1\" width=\"21.1822\" height=\"22\" rx=\"10.5911\" fill=\"white\" />\n <rect x=\"1\" y=\"1\" width=\"21.1822\" height=\"22\" rx=\"10.5911\" stroke=\"#3F43EE\" stroke-width=\"2\" />\n <path d=\"M8.5 12H15.5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M12 8.5V15.5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </button>\n <div class=\"cqa-step-host-wrapper\">\n <ng-container #stepHost></ng-container>\n </div>\n <button *ngIf=\"editable && !isReorder && (addStepBetweenBelow && addStepBetween)\"\n class=\"cqa-absolute cqa-top-[calc(100%-12px)] cqa-left-[50%] cqa-translate-x-[-50%] cqa-p-0 cqa-z-[1] cqa-add-step-between-btn\"\n (click)=\"addStepBetweenClick.emit({step: step, index: index, position: 'BELOW'})\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect x=\"1\" y=\"1\" width=\"21.1822\" height=\"22\" rx=\"10.5911\" fill=\"white\" />\n <rect x=\"1\" y=\"1\" width=\"21.1822\" height=\"22\" rx=\"10.5911\" stroke=\"#3F43EE\" stroke-width=\"2\" />\n <path d=\"M8.5 12H15.5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M12 8.5V15.5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </button>\n</div>", directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
23450
|
+
TestCaseDetailsRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestCaseDetailsRendererComponent, selector: "cqa-test-case-details-renderer", inputs: { step: "step", index: "index", isNested: "isNested", isInsideLoop: "isInsideLoop", isInsideStepGroup: "isInsideStepGroup", nestingLevel: "nestingLevel", branch: "branch", isReorder: "isReorder", selected: "selected", isDuplicating: "isDuplicating", addStepBetweenAbove: "addStepBetweenAbove", addStepBetweenBelow: "addStepBetweenBelow", addStepBetween: "addStepBetween", editable: "editable", currentTestCaseId: "currentTestCaseId", dataProfileOptions: "dataProfileOptions", hasMoreDataProfiles: "hasMoreDataProfiles", isLoadingDataProfiles: "isLoadingDataProfiles", naturalTextActionsOptions: "naturalTextActionsOptions", setConditionTemplateVariables: "setConditionTemplateVariables" }, outputs: { nestedStepChange: "nestedStepChange", addStep: "addStep", deleteStep: "deleteStep", toggleExpanded: "toggleExpanded", groupNameChange: "groupNameChange", descriptionChange: "descriptionChange", reusableChange: "reusableChange", openExternal: "openExternal", edit: "edit", link: "link", duplicate: "duplicate", delete: "delete", viewDetails: "viewDetails", selectionChange: "selectionChange", conditionChange: "conditionChange", branchStepChange: "branchStepChange", addStepForBranch: "addStepForBranch", addStepForLoop: "addStepForLoop", deleteStepWithBranch: "deleteStepWithBranch", addBranch: "addBranch", addElse: "addElse", deleteBranch: "deleteBranch", testDataProfileChange: "testDataProfileChange", startStepChange: "startStepChange", endStepChange: "endStepChange", maxIterationsChange: "maxIterationsChange", eventTypeChange: "eventTypeChange", parameterChange: "parameterChange", clickAction: "clickAction", dndDropInZone: "dndDropInZone", loadMoreDataProfiles: "loadMoreDataProfiles", searchDataProfiles: "searchDataProfiles", stepUpdate: "stepUpdate", addStepBetweenClick: "addStepBetweenClick", editInDepth: "editInDepth" }, host: { classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "stepHost", first: true, predicate: ["stepHost"], descendants: true, read: ViewContainerRef }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-relative cqa-step-renderer-hover-container\">\n <button *ngIf=\"editable && !isReorder && (addStepBetweenAbove && addStepBetween)\"\n class=\"cqa-absolute cqa-top-[calc(0 - 12px)] cqa-left-[50%] cqa-translate-x-[-50%] cqa-p-0 cqa-z-[1] cqa-add-step-between-btn\"\n style=\"top: -12px;\" (click)=\"addStepBetweenClick.emit({step: step, index: index, position: 'ABOVE'})\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect x=\"1\" y=\"1\" width=\"21.1822\" height=\"22\" rx=\"10.5911\" fill=\"white\" />\n <rect x=\"1\" y=\"1\" width=\"21.1822\" height=\"22\" rx=\"10.5911\" stroke=\"#3F43EE\" stroke-width=\"2\" />\n <path d=\"M8.5 12H15.5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M12 8.5V15.5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </button>\n <div class=\"cqa-step-host-wrapper\">\n <ng-container #stepHost></ng-container>\n </div>\n <button *ngIf=\"editable && !isReorder && (addStepBetweenBelow && addStepBetween)\"\n class=\"cqa-absolute cqa-top-[calc(100%-12px)] cqa-left-[50%] cqa-translate-x-[-50%] cqa-p-0 cqa-z-[1] cqa-add-step-between-btn\"\n (click)=\"addStepBetweenClick.emit({step: step, index: index, position: 'BELOW'})\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect x=\"1\" y=\"1\" width=\"21.1822\" height=\"22\" rx=\"10.5911\" fill=\"white\" />\n <rect x=\"1\" y=\"1\" width=\"21.1822\" height=\"22\" rx=\"10.5911\" stroke=\"#3F43EE\" stroke-width=\"2\" />\n <path d=\"M8.5 12H15.5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M12 8.5V15.5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </button>\n</div>", directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
23442
23451
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseDetailsRendererComponent, decorators: [{
|
|
23443
23452
|
type: Component,
|
|
23444
23453
|
args: [{ selector: 'cqa-test-case-details-renderer', host: { class: 'cqa-ui-root' }, template: "<div class=\"cqa-relative cqa-step-renderer-hover-container\">\n <button *ngIf=\"editable && !isReorder && (addStepBetweenAbove && addStepBetween)\"\n class=\"cqa-absolute cqa-top-[calc(0 - 12px)] cqa-left-[50%] cqa-translate-x-[-50%] cqa-p-0 cqa-z-[1] cqa-add-step-between-btn\"\n style=\"top: -12px;\" (click)=\"addStepBetweenClick.emit({step: step, index: index, position: 'ABOVE'})\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect x=\"1\" y=\"1\" width=\"21.1822\" height=\"22\" rx=\"10.5911\" fill=\"white\" />\n <rect x=\"1\" y=\"1\" width=\"21.1822\" height=\"22\" rx=\"10.5911\" stroke=\"#3F43EE\" stroke-width=\"2\" />\n <path d=\"M8.5 12H15.5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M12 8.5V15.5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </button>\n <div class=\"cqa-step-host-wrapper\">\n <ng-container #stepHost></ng-container>\n </div>\n <button *ngIf=\"editable && !isReorder && (addStepBetweenBelow && addStepBetween)\"\n class=\"cqa-absolute cqa-top-[calc(100%-12px)] cqa-left-[50%] cqa-translate-x-[-50%] cqa-p-0 cqa-z-[1] cqa-add-step-between-btn\"\n (click)=\"addStepBetweenClick.emit({step: step, index: index, position: 'BELOW'})\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect x=\"1\" y=\"1\" width=\"21.1822\" height=\"22\" rx=\"10.5911\" fill=\"white\" />\n <rect x=\"1\" y=\"1\" width=\"21.1822\" height=\"22\" rx=\"10.5911\" stroke=\"#3F43EE\" stroke-width=\"2\" />\n <path d=\"M8.5 12H15.5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M12 8.5V15.5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </button>\n</div>" }]
|
|
@@ -23476,6 +23485,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
23476
23485
|
type: Input
|
|
23477
23486
|
}], editable: [{
|
|
23478
23487
|
type: Input
|
|
23488
|
+
}], currentTestCaseId: [{
|
|
23489
|
+
type: Input
|
|
23479
23490
|
}], nestedStepChange: [{
|
|
23480
23491
|
type: Output
|
|
23481
23492
|
}], addStep: [{
|
|
@@ -23672,6 +23683,18 @@ class TestCaseLoopStepComponent {
|
|
|
23672
23683
|
onLoopActionClick(event) {
|
|
23673
23684
|
if (this.isInsideStepGroup)
|
|
23674
23685
|
return;
|
|
23686
|
+
// FOR loop: profile / start / end values are read-only badges — do not bubble to step-list (which opens test-data modal)
|
|
23687
|
+
if (this.loopType === 'for') {
|
|
23688
|
+
const node = event.target;
|
|
23689
|
+
const el = node.nodeType === Node.ELEMENT_NODE
|
|
23690
|
+
? node
|
|
23691
|
+
: node.parentElement;
|
|
23692
|
+
if (el?.closest('.test_data, [data-key="test-data"]')) {
|
|
23693
|
+
event.preventDefault();
|
|
23694
|
+
event.stopPropagation();
|
|
23695
|
+
return;
|
|
23696
|
+
}
|
|
23697
|
+
}
|
|
23675
23698
|
this.clickAction.emit({ event, step: this.config });
|
|
23676
23699
|
}
|
|
23677
23700
|
/** Forward clickAction from nested steps only when not inside a step-group (Element/Test Data modals disabled there). */
|
|
@@ -24235,6 +24258,26 @@ class TestCaseLoopStepComponent {
|
|
|
24235
24258
|
getEndLabel() {
|
|
24236
24259
|
return this.loopType === 'for' ? 'END FOR' : 'END WHILE';
|
|
24237
24260
|
}
|
|
24261
|
+
/** START loop body marker: first nested step's step number, or the loop row's step number if empty. */
|
|
24262
|
+
getLoopMarkerStartStepDisplay() {
|
|
24263
|
+
const first = this.nestedSteps?.[0];
|
|
24264
|
+
if (first?.stepNumber != null && first.stepNumber !== '') {
|
|
24265
|
+
return String(first.stepNumber);
|
|
24266
|
+
}
|
|
24267
|
+
return String(this.stepNumber ?? '');
|
|
24268
|
+
}
|
|
24269
|
+
/** END loop body marker: last nested step's step number, or the loop row's step number if empty. */
|
|
24270
|
+
getLoopMarkerEndStepDisplay() {
|
|
24271
|
+
const steps = this.nestedSteps;
|
|
24272
|
+
if (!steps?.length) {
|
|
24273
|
+
return String(this.stepNumber ?? '');
|
|
24274
|
+
}
|
|
24275
|
+
const last = steps[steps.length - 1];
|
|
24276
|
+
if (last?.stepNumber != null && last.stepNumber !== '') {
|
|
24277
|
+
return String(last.stepNumber);
|
|
24278
|
+
}
|
|
24279
|
+
return String(this.stepNumber ?? '');
|
|
24280
|
+
}
|
|
24238
24281
|
/** Resolve display start index: prefer forLoopStartIndex from step (or dataMapJson/dataMapBean), else startStep, else from nested steps */
|
|
24239
24282
|
getDisplayStartIndex() {
|
|
24240
24283
|
const cfg = this.config;
|
|
@@ -24353,10 +24396,10 @@ class TestCaseLoopStepComponent {
|
|
|
24353
24396
|
/** Test Data profile part only - for vertical stack layout (row 1) */
|
|
24354
24397
|
getForLoopProfileDisplay() {
|
|
24355
24398
|
const cfg = this.config;
|
|
24356
|
-
|
|
24357
|
-
|
|
24358
|
-
|
|
24359
|
-
|
|
24399
|
+
// Always emit badges with data-event-key so portal preventPopup can suppress the test-data modal when needed
|
|
24400
|
+
if (cfg?.forLoopDisplayHtml && this.hasTestDataProfile()) {
|
|
24401
|
+
const name = this.getDisplayTestDataProfileName();
|
|
24402
|
+
return `Test Data profile: <span data-key="test-data" data-event-key="testDataProfile" class="test_data">${this.escapeForLoopHtml(name)}</span>`;
|
|
24360
24403
|
}
|
|
24361
24404
|
if (!this.hasTestDataProfile())
|
|
24362
24405
|
return '';
|
|
@@ -24380,10 +24423,12 @@ class TestCaseLoopStepComponent {
|
|
|
24380
24423
|
if (cfg?.forLoopDisplayHtml && parts.length === 0) {
|
|
24381
24424
|
const startMatch = cfg.forLoopDisplayHtml.match(/Start:\s*<[^>]*>([^<]*)</);
|
|
24382
24425
|
const endMatch = cfg.forLoopDisplayHtml.match(/End:\s*<[^>]*>([^<]*)</);
|
|
24383
|
-
if (startMatch)
|
|
24384
|
-
parts.push(`<span class="for-loop-range-part">Start: <span class="test_data">${startMatch[1]}</span></span>`);
|
|
24385
|
-
|
|
24386
|
-
|
|
24426
|
+
if (startMatch) {
|
|
24427
|
+
parts.push(`<span class="for-loop-range-part">Start: <span data-key="test-data" data-event-key="forLoopStartIndex" class="test_data">${this.escapeForLoopHtml(startMatch[1])}</span></span>`);
|
|
24428
|
+
}
|
|
24429
|
+
if (endMatch) {
|
|
24430
|
+
parts.push(`<span class="for-loop-range-part">End: <span data-key="test-data" data-event-key="forLoopEndIndex" class="test_data">${this.escapeForLoopHtml(endMatch[1])}</span></span>`);
|
|
24431
|
+
}
|
|
24387
24432
|
}
|
|
24388
24433
|
return parts.join('');
|
|
24389
24434
|
}
|
|
@@ -24802,14 +24847,14 @@ TestCaseLoopStepComponent.DEFAULT_LOOP_OPTIONS_MAX = 10;
|
|
|
24802
24847
|
TestCaseLoopStepComponent.LOOP_INDEX_START = -1;
|
|
24803
24848
|
TestCaseLoopStepComponent.LOOP_INDEX_END = -1;
|
|
24804
24849
|
TestCaseLoopStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseLoopStepComponent, deps: [{ token: i1$1.FormBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
24805
|
-
TestCaseLoopStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestCaseLoopStepComponent, selector: "cqa-test-case-loop-step", inputs: { config: "config", id: "id", loopType: "loopType", stepNumber: "stepNumber", index: "index", condition: "condition", maxIterations: "maxIterations", testDataProfile: "testDataProfile", startStep: "startStep", endStep: "endStep", nestedSteps: "nestedSteps", expanded: "expanded", isNested: "isNested", isInsideLoop: "isInsideLoop", isInsideStepGroup: "isInsideStepGroup", isReorder: "isReorder", selected: "selected", isDuplicating: "isDuplicating", dataProfileOptions: "dataProfileOptions", hasMoreDataProfiles: "hasMoreDataProfiles", isLoadingDataProfiles: "isLoadingDataProfiles", naturalTextActionsOptions: "naturalTextActionsOptions", setConditionTemplateVariables: "setConditionTemplateVariables", addStepBetweenAbove: "addStepBetweenAbove", addStepBetweenBelow: "addStepBetweenBelow", addStepBetween: "addStepBetween", editable: "editable", nestingLevel: "nestingLevel" }, outputs: { toggleExpanded: "toggleExpanded", testDataProfileChange: "testDataProfileChange", startStepChange: "startStepChange", endStepChange: "endStepChange", conditionChange: "conditionChange", maxIterationsChange: "maxIterationsChange", nestedStepChange: "nestedStepChange", addStep: "addStep", deleteStep: "deleteStep", duplicate: "duplicate", delete: "delete", moreOptions: "moreOptions", viewDetails: "viewDetails", editInDepth: "editInDepth", edit: "edit", dndDropInZone: "dndDropInZone", loadMoreDataProfiles: "loadMoreDataProfiles", searchDataProfiles: "searchDataProfiles", stepUpdate: "stepUpdate", clickAction: "clickAction", addStepBetweenClick: "addStepBetweenClick", selectionChange: "selectionChange", deleteBranch: "deleteBranch", addStepForBranch: "addStepForBranch", deleteStepWithBranch: "deleteStepWithBranch", openExternal: "openExternal" }, host: { classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "viewDetailsTrigger", first: true, predicate: ["viewDetailsTrigger"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"loop-step-row cqa-flex cqa-flex-col\">\n <!-- Inline Edit Mode: stop propagation so dropdown/select interactions don't bubble and collapse the step or start drag -->\n <div *ngIf=\"isEditing\" class=\"cqa-py-2.5 cqa-px-4 cqa-flex cqa-flex-col cqa-gap-3\" (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-justify-between\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-grow cqa-flex-wrap cqa-min-w-0\">\n <!-- Loop Type Label -->\n <div class=\"cqa-font-semibold cqa-text-[#1C398E] cqa-text-[12px] cqa-leading-[15px]\">\n {{ getLoopTypeLabel() }}\n </div>\n\n <!-- FOR LOOP inline edit: cqa-dynamic-select (same usage as default stories) -->\n <ng-container *ngIf=\"loopType === 'for'\">\n <!-- First select: width 216.25px, height 36px, gap 4px, opacity 1 -->\n <cqa-dynamic-select [form]=\"editForm\" [config]=\"forOptionTypeSelectConfig\"\n class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-dynamic-select>\n <cqa-dynamic-select [form]=\"editForm\" [config]=\"testDataProfileSelectConfig\"\n class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-dynamic-select>\n <cqa-dynamic-select [form]=\"editForm\" [config]=\"startStepSelectConfig\"\n class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-dynamic-select>\n <cqa-dynamic-select [form]=\"editForm\" [config]=\"endStepSelectConfig\"\n class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-dynamic-select>\n </ng-container>\n\n <!-- WHILE LOOP inline edit: cqa-autocomplete + template variables (same as condition-step) -->\n <ng-container *ngIf=\"isWhileLoop()\">\n <cqa-autocomplete\n *ngIf=\"editForm\"\n [options]=\"whileConditionAutocompleteOptions\"\n [value]=\"whileConditionDisplayValue\"\n (valueChange)=\"onEditFormFieldChange('condition', $event)\"\n (optionSelect)=\"onConditionSelect($event)\"\n placeholder=\"Select condition\"\n [fullWidth]=\"true\"\n class=\"cqa-w-full cqa-max-w-[216px]\">\n </cqa-autocomplete>\n <!-- Template variables hidden in while loop - use Edit In depth to configure -->\n </ng-container>\n\n <!-- Edit In depth link -->\n <a href=\"#\" *ngIf=\"isWhileLoop()\" (click)=\"onEditInDepth(); $event.preventDefault()\"\n class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-[2px] cqa-no-underline\">\n Edit In depth\n <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\"\n fill=\"#3F43EE\" />\n </svg>\n </a>\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n <!-- Cancel / Apply -->\n <cqa-button variant=\"outlined\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Cancel'\"\n (clicked)=\"onEditCancel()\"></cqa-button>\n <cqa-button variant=\"filled\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Apply'\"\n (clicked)=\"onEditApply()\"></cqa-button>\n </div>\n </div>\n </div>\n\n <!-- Loop Header (normal view when not editing) -->\n <div *ngIf=\"!isEditing\"\n [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 cqa-pr-4'\"\n [style.padding-left.px]=\"getRowPaddingLeftPx()\"\n style=\"border-bottom: 1px solid #E5E7EB;\">\n <div 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=\"!isReorder && !isInsideStepGroup\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative cqa-mr-2\">\n <input type=\"checkbox\"\n [ngModel]=\"selected\"\n (ngModelChange)=\"onSelectionChange($event)\"\n class=\"cqa-h-4 cqa-w-4 cqa-cursor-pointer cqa-transition-all cqa-appearance-none cqa-rounded shadow hover:cqa-shadow-md cqa-border cqa-border-solid cqa-border-slate-300 cqa-flex-shrink-0\"\n [class.cqa-bg-[#3F43EE]]=\"selected\"\n [class.cqa-border-[#3F43EE]]=\"selected\"\n id=\"check-loop-step\" />\n <span class=\"cqa-absolute cqa-text-white cqa-top-1/2 cqa-left-1/2 cqa--translate-x-1/2 cqa--translate-y-1/2 cqa-pointer-events-none cqa-flex cqa-items-center cqa-justify-center\"\n [class.cqa-opacity-0]=\"!selected\"\n [class.cqa-opacity-100]=\"selected\">\n <svg width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 3.125L4.5 8.625L2 6.125\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </span>\n </label>\n </div>\n <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px] cqa-min-w-[32px]\">{{ stepNumber }}</span>\n <!-- Expand/Collapse Icon -->\n <button type=\"button\" (click)=\"onToggleExpanded()\" class=\"cqa-p-0\">\n <svg [class.cqa-rotate-180]=\"!expanded\" class=\"cqa-transition-transform\" width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M12 10L8 6L4 10\" stroke=\"#6B7280\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button>\n\n <!-- Loop Icon -->\n <div *ngIf=\"loopType === 'for'\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M11.334 1.33325L14.0007 3.99992L11.334 6.66659\" stroke=\"#1C398E\" stroke-width=\"1.33333\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M2 7.33333V6.66667C2 5.95942 2.28095 5.28115 2.78105 4.78105C3.28115 4.28095 3.95942 4 4.66667 4H14\"\n stroke=\"#1C398E\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M4.66667 14.6666L2 11.9999L4.66667 9.33325\" stroke=\"#1C398E\" stroke-width=\"1.33333\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M14 8.66675V9.33341C14 10.0407 13.719 10.7189 13.219 11.219C12.7189 11.7191 12.0406 12.0001 11.3333 12.0001H2\"\n stroke=\"#1C398E\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </div>\n <div *ngIf=\"loopType === 'while'\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M11.334 1.33325L14.0007 3.99992L11.334 6.66659\" stroke=\"#59168B\" stroke-width=\"1.33333\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M2 7.33333V6.66667C2 5.95942 2.28095 5.28115 2.78105 4.78105C3.28115 4.28095 3.95942 4 4.66667 4H14\"\n stroke=\"#59168B\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M4.66667 14.6666L2 11.9999L4.66667 9.33325\" stroke=\"#59168B\" stroke-width=\"1.33333\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M14 8.66675V9.33341C14 10.0407 13.719 10.7189 13.219 11.219C12.7189 11.7191 12.0406 12.0001 11.3333 12.0001H2\"\n stroke=\"#59168B\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </div>\n\n <!-- Loop Type Label -->\n <span class=\"cqa-font-semibold cqa-text-[#1C398E] cqa-text-[12px] cqa-leading-none\">\n {{ getLoopTypeLabel() }}\n </span>\n\n <!-- For Loop Display: items flow on one row; only wrap to next line when there is not enough space -->\n <div *ngIf=\"loopType === 'for' && (hasTestDataProfile() || hasStartValue() || hasEndValue())\" class=\"cqa-flex cqa-flex-wrap cqa-items-center cqa-gap-x-3 cqa-gap-y-1 cqa-ml-2 cqa-flex-1 cqa-min-w-0\">\n <span *ngIf=\"getForLoopProfileDisplay()\" class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px] cqa-action-format\" [innerHTML]=\"getForLoopProfileDisplay()\" (click)=\"onLoopActionClick($event)\"></span>\n <span *ngIf=\"getForLoopRangeDisplay()\" class=\"for-loop-range-row cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px] cqa-action-format\" [innerHTML]=\"getForLoopRangeDisplay()\" (click)=\"onLoopActionClick($event)\"></span>\n <div *ngIf=\"getLoopEventDetailsForDisplay().length > 0\" class=\"cqa-flex cqa-flex-wrap cqa-gap-2 cqa-items-center\">\n <span *ngFor=\"let item of getLoopEventDetailsForDisplay()\" class=\"cqa-inline-flex cqa-items-center cqa-gap-1 cqa-py-0.5 cqa-px-2 cqa-rounded cqa-text-[12px] cqa-leading-[15px] cqa-bg-[#F3F4F6] cqa-text-[#374151] cqa-border cqa-border-solid cqa-border-[#E5E7EB]\" (click)=\"onLoopActionClick($event)\">\n <span class=\"cqa-font-medium cqa-text-[#6B7280]\">{{ item.key }}:</span>\n <span class=\"cqa-text-[#111827] cqa-break-words\">{{ item.value }}</span>\n </span>\n </div>\n </div>\n\n <!-- While Loop Condition (only show if condition exists) - same styling as condition step -->\n <div *ngIf=\"isWhileLoop() && condition\" class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-ml-2 cqa-flex-1 cqa-min-w-0\">\n <!-- While condition text (separate block) -->\n <div class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px] cqa-w-full !cqa-inline-flex cqa-items-center cqa-flex-wrap cqa-action-format\" [innerHTML]=\"getConditionDisplay()\" (click)=\"onLoopActionClick($event)\"></div>\n \n\n <!-- While event details chips (separate block) -->\n <div class=\"cqa-flex cqa-flex-wrap cqa-items-center cqa-gap-2\">\n <span *ngIf=\"maxIterations != null && maxIterations > 0\" class=\"cqa-inline-flex cqa-items-center cqa-gap-1 cqa-py-0.5 cqa-px-2 cqa-rounded cqa-text-[12px] cqa-leading-[15px] cqa-bg-[#F3F4F6] cqa-text-[#374151] cqa-border cqa-border-solid cqa-border-[#E5E7EB]\" (click)=\"onLoopActionClick($event)\" data-key=\"maxIterations\" data-event-key=\"maxIterations\">\n <span class=\"cqa-font-medium cqa-text-[#6B7280]\">max iterations:</span>\n <span class=\"cqa-text-[#111827]\">{{ maxIterations }}</span>\n </span>\n <ng-container *ngIf=\"getLoopEventDetailsForDisplay().length > 0\">\n <span *ngFor=\"let item of getLoopEventDetailsForDisplay()\" class=\"cqa-inline-flex cqa-items-center cqa-gap-1 cqa-py-0.5 cqa-px-2 cqa-rounded cqa-text-[12px] cqa-leading-[15px] cqa-bg-[#F3F4F6] cqa-text-[#374151] cqa-border cqa-border-solid cqa-border-[#E5E7EB]\" (click)=\"onLoopActionClick($event)\">\n <span class=\"cqa-font-medium cqa-text-[#6B7280]\">{{ item.key }}:</span>\n <span class=\"cqa-text-[#111827]\">{{ item.value }}</span>\n </span>\n </ng-container>\n </div>\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-ml-auto\">\n <!-- Steps Summary -->\n <div\n class=\"cqa-ml-auto cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-rounded-lg cqa-py-0.5 cqa-px-2 cqa-text-[#0A0A0A] cqa-text-[12px] cqa-leading-[15px]\">\n {{ getStepsSummary() }}\n </div>\n\n <!-- 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-2 cqa-no-underline cqa-ml-auto\">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 <!-- Action Icons: Edit, Link, Duplicate, Delete (show on hover; hidden when inside step-group) -->\n <div *ngIf=\"!isInsideStepGroup && !isReorder\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-3 cqa-px-[7px]\">\n <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\"\n class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M7 11.6666H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M9.55208 2.1128C9.7843 1.88058 10.0993 1.75012 10.4277 1.75012C10.7561 1.75012 11.071 1.88058 11.3033 2.1128C11.5355 2.34502 11.6659 2.65998 11.6659 2.98838C11.6659 3.31679 11.5355 3.63175 11.3033 3.86397L4.29742 10.8704C4.15864 11.0092 3.9871 11.1107 3.79867 11.1656L2.12333 11.6544C2.07314 11.669 2.01993 11.6699 1.96928 11.6569C1.91863 11.6439 1.8724 11.6176 1.83543 11.5806C1.79846 11.5437 1.7721 11.4974 1.75913 11.4468C1.74615 11.3961 1.74703 11.3429 1.76167 11.2927L2.2505 9.61738C2.30546 9.42916 2.40698 9.25783 2.54567 9.11922L9.55208 2.1128Z\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </button>\n <!-- <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\"\n class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\"\n stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\"\n stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button> -->\n <button\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\n d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n <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\"\n class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M1.75 3.5H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M11.0827 3.5V11.6667C11.0827 12.25 10.4993 12.8333 9.91602 12.8333H4.08268C3.49935 12.8333 2.91602 12.25 2.91602 11.6667V3.5\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M4.66602 3.49996V2.33329C4.66602 1.74996 5.24935 1.16663 5.83268 1.16663H8.16602C8.74935 1.16663 9.33268 1.74996 9.33268 2.33329V3.49996\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M5.83398 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M8.16602 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button>\n </div>\n <!-- 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\n <!-- Expanded Content with Nested Steps (renderer dispatches by step type, n-level nesting) -->\n <div *ngIf=\"expanded\" class=\"cqa-flex cqa-flex-col\">\n <!-- START Marker (centered with decorative lines) -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-py-1 cqa-px-4 cqa-bg-[#DBEAFE80]\" style=\"border-top: 1px solid #BEDBFF;\">\n <span class=\"cqa-flex-1 cqa-self-stretch cqa-border-t cqa-border-dashed cqa-border-[#1C398E] cqa-opacity-40\" style=\"min-width: 20px;\"></span>\n <span class=\"cqa-text-[#1C398E] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-whitespace-nowrap\">{{ getStartLabel() }}</span>\n <span class=\"cqa-flex-1 cqa-self-stretch cqa-border-t cqa-border-dashed cqa-border-[#1C398E] cqa-opacity-40\" style=\"min-width: 20px;\"></span>\n </div>\n <div *ngIf=\"!isReorder\" class=\"cqa-flex cqa-flex-col\">\n <cqa-test-case-details-renderer *ngFor=\"let step of nestedSteps; let i = index\" [step]=\"step\" [index]=\"i\"\n [selected]=\"$any(step).selected\"\n [isNested]=\"true\" [isInsideLoop]=\"true\" [isInsideStepGroup]=\"isInsideStepGroup\" [isReorder]=\"isReorder\"\n [nestingLevel]=\"nestingLevel + 1\"\n [addStepBetween]=\"addStepBetween\"\n [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n (nestedStepChange)=\"onNestedStepChange($event.step, $event.index)\"\n (addStep)=\"onAddStep()\" (addStepForLoop)=\"onAddStepForLoopFromNested($event)\" (deleteStep)=\"onDeleteStep($event)\"\n (addStepForBranch)=\"addStepForBranch.emit($event)\" (deleteStepWithBranch)=\"deleteStepWithBranch.emit($event)\"\n (toggleExpanded)=\"onNestedToggleExpanded($event, step, i)\"\n (groupNameChange)=\"$any(step).groupName = $event; onNestedStepChange(step, i)\"\n (descriptionChange)=\"$any(step).description = $event; onNestedStepChange(step, i)\"\n (reusableChange)=\"$any(step).reusable = $event; onNestedStepChange(step, i)\"\n (openExternal)=\"onNestedOpenExternal($event)\" (edit)=\"onNestedEdit($event)\"\n (link)=\"onNestedStepChange(step, i)\" (duplicate)=\"onNestedDuplicate($event, step)\" (delete)=\"onDeleteStep($event, i)\"\n (viewDetails)=\"viewDetails.emit($event)\"\n (conditionChange)=\"$any(step).condition = $event; onNestedStepChange(step, i)\"\n (branchStepChange)=\"onNestedStepChange(step, i)\" (addBranch)=\"onNestedConditionAddBranch($any(step), i)\"\n (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event, i)\"\n (testDataProfileChange)=\"$any(step).testDataProfile = $event; onNestedStepChange(step, i)\"\n (startStepChange)=\"$any(step).startStep = $event; onNestedStepChange(step, i)\"\n (endStepChange)=\"$any(step).endStep = $event; onNestedStepChange(step, i)\"\n (maxIterationsChange)=\"$any(step).maxIterations = $event; onNestedStepChange(step, i)\"\n (eventTypeChange)=\"$any(step).eventType = $event; onNestedStepChange(step, i)\"\n (parameterChange)=\"onNestedStepChange(step, i)\"\n (selectionChange)=\"$any(step).selected = $event; onNestedStepChange(step, i)\"\n (loadMoreDataProfiles)=\"loadMoreDataProfiles.emit($event)\"\n (searchDataProfiles)=\"searchDataProfiles.emit($event)\"\n (dndDropInZone)=\"dndDropInZone.emit($event)\"\n (clickAction)=\"clickAction.emit($event)\"\n (editInDepth)=\"editInDepth.emit($event)\"\n (addStepBetweenClick)=\"addStepBetweenClick.emit($event)\">\n </cqa-test-case-details-renderer>\n </div>\n <div *ngIf=\"isReorder\" class=\"cqa-flex cqa-flex-col nested-step-drop-list\"\n [style.min-height.px]=\"nestedSteps.length === 0 ? 52 : null\"\n [dndDropzone]=\"['step']\"\n dndEffectAllowed=\"move\"\n dndDragoverClass=\"dndDragover\"\n (dndDrop)=\"onDndDrop($event)\">\n <div dndPlaceholderRef class=\"step-drag-placeholder-nested cqa-my-1 cqa-min-h-[50px] cqa-border-2 cqa-border-dashed cqa-border-[#3F43EE] cqa-rounded cqa-bg-[rgba(63,67,238,0.08)] cqa-flex cqa-items-center cqa-justify-center cqa-text-[#3F43EE] cqa-text-xs\">Drop here</div>\n <div *ngFor=\"let step of nestedSteps; let i = index\" class=\"nested-step-drag-item\"\n [dndDraggable]=\"step\"\n dndEffectAllowed=\"move\"\n dndType=\"step\">\n <cqa-test-case-details-renderer [step]=\"step\" [index]=\"i\"\n [selected]=\"$any(step).selected\"\n [isNested]=\"true\" [isInsideLoop]=\"true\" [isInsideStepGroup]=\"isInsideStepGroup\" [isReorder]=\"isReorder\"\n [nestingLevel]=\"nestingLevel + 1\"\n [addStepBetweenAbove]=\"addStepBetweenAbove\"\n [addStepBetweenBelow]=\"addStepBetweenBelow\"\n [addStepBetween]=\"addStepBetween\"\n [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n (nestedStepChange)=\"onNestedStepChange($event.step, $event.index)\"\n (addStep)=\"onAddStep()\" (addStepForLoop)=\"onAddStepForLoopFromNested($event)\" (deleteStep)=\"onDeleteStep($event)\"\n (addStepForBranch)=\"addStepForBranch.emit($event)\" (deleteStepWithBranch)=\"deleteStepWithBranch.emit($event)\"\n (toggleExpanded)=\"onNestedToggleExpanded($event, step, i)\"\n (groupNameChange)=\"$any(step).groupName = $event; onNestedStepChange(step, i)\"\n (descriptionChange)=\"$any(step).description = $event; onNestedStepChange(step, i)\"\n (reusableChange)=\"$any(step).reusable = $event; onNestedStepChange(step, i)\"\n (openExternal)=\"onNestedOpenExternal($event)\" (edit)=\"onNestedStepChange(step, i)\"\n (link)=\"onNestedStepChange(step, i)\" (duplicate)=\"onNestedStepChange(step, i)\" (delete)=\"onDeleteStep($event, i)\"\n (viewDetails)=\"viewDetails.emit($event)\"\n (conditionChange)=\"$any(step).condition = $event; onNestedStepChange(step, i)\"\n (branchStepChange)=\"onNestedStepChange(step, i)\" (addBranch)=\"onNestedConditionAddBranch($any(step), i)\"\n (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event, i)\"\n (testDataProfileChange)=\"$any(step).testDataProfile = $event; onNestedStepChange(step, i)\"\n (startStepChange)=\"$any(step).startStep = $event; onNestedStepChange(step, i)\"\n (endStepChange)=\"$any(step).endStep = $event; onNestedStepChange(step, i)\"\n (maxIterationsChange)=\"$any(step).maxIterations = $event; onNestedStepChange(step, i)\"\n (eventTypeChange)=\"$any(step).eventType = $event; onNestedStepChange(step, i)\"\n (parameterChange)=\"onNestedStepChange(step, i)\"\n (selectionChange)=\"$any(step).selected = $event; onNestedStepChange(step, i)\"\n (loadMoreDataProfiles)=\"loadMoreDataProfiles.emit($event)\"\n (searchDataProfiles)=\"searchDataProfiles.emit($event)\"\n (dndDropInZone)=\"dndDropInZone.emit($event)\"\n (clickAction)=\"clickAction.emit($event)\"\n (editInDepth)=\"editInDepth.emit($event)\"\n (addStepBetweenClick)=\"addStepBetweenClick.emit($event)\">\n </cqa-test-case-details-renderer>\n </div>\n </div>\n\n <!-- Empty loop: show plus icon on hover when expanded and no steps.\n When rendered inside a step group or when reordering, hide this Add button entirely. -->\n <div *ngIf=\"nestedSteps.length === 0 && !isInsideStepGroup && !isReorder\" class=\"loop-step-empty cqa-min-h-[52px] cqa-flex cqa-items-center cqa-justify-center cqa-pl-4 cqa-pr-4\">\n <button type=\"button\" (click)=\"onAddStepEmpty(); $event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\" title=\"Add step\"\n class=\"loop-step-empty-add\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect x=\"1\" y=\"1\" width=\"21.1822\" height=\"22\" rx=\"10.5911\" fill=\"white\" />\n <rect x=\"1\" y=\"1\" width=\"21.1822\" height=\"22\" rx=\"10.5911\" stroke=\"#3F43EE\" stroke-width=\"2\" />\n <path d=\"M8.5 12H15.5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M12 8.5V15.5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </button>\n </div>\n\n <!-- END Marker (centered with decorative lines) -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-py-1 cqa-px-4 cqa-bg-[#DBEAFE80]\" style=\"border-top: 1px solid #BEDBFF;\">\n <span class=\"cqa-flex-1 cqa-self-stretch cqa-border-t cqa-border-dashed cqa-border-[#1C398E] cqa-opacity-40\" style=\"min-width: 20px;\"></span>\n <span class=\"cqa-text-[#1C398E] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-whitespace-nowrap\">{{ getEndLabel() }}</span>\n <span class=\"cqa-flex-1 cqa-self-stretch cqa-border-t cqa-border-dashed cqa-border-[#1C398E] cqa-opacity-40\" style=\"min-width: 20px;\"></span>\n </div>\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", ".loop-step-empty{opacity:1}.loop-step-empty-add{padding:0;background:transparent;border:0;cursor:pointer;color:#3f43ee;transition:opacity .15s ease}.loop-step-empty-add:hover{opacity:.9}\n", ".for-loop-range-row{display:inline-flex;align-items:center;gap:.5rem;flex-wrap:wrap}.for-loop-range-row .for-loop-range-part+.for-loop-range-part{margin-left:.25rem}\n"], components: [{ type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: AutocompleteComponent, selector: "cqa-autocomplete", inputs: ["placeholder", "options", "value", "disabled", "showClear", "ariaLabel", "autoFocus", "size", "fullWidth", "compact"], outputs: ["valueChange", "optionSelect", "cleared"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: TestCaseDetailsRendererComponent, selector: "cqa-test-case-details-renderer", inputs: ["step", "index", "isNested", "isInsideLoop", "isInsideStepGroup", "nestingLevel", "branch", "isReorder", "selected", "isDuplicating", "addStepBetweenAbove", "addStepBetweenBelow", "addStepBetween", "editable", "dataProfileOptions", "hasMoreDataProfiles", "isLoadingDataProfiles", "naturalTextActionsOptions", "setConditionTemplateVariables"], outputs: ["nestedStepChange", "addStep", "deleteStep", "toggleExpanded", "groupNameChange", "descriptionChange", "reusableChange", "openExternal", "edit", "link", "duplicate", "delete", "viewDetails", "selectionChange", "conditionChange", "branchStepChange", "addStepForBranch", "addStepForLoop", "deleteStepWithBranch", "addBranch", "addElse", "deleteBranch", "testDataProfileChange", "startStepChange", "endStepChange", "maxIterationsChange", "eventTypeChange", "parameterChange", "clickAction", "dndDropInZone", "loadMoreDataProfiles", "searchDataProfiles", "stepUpdate", "addStepBetweenClick", "editInDepth"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6$1.DndDropzoneDirective, selector: "[dndDropzone]", inputs: ["dndDropzone", "dndEffectAllowed", "dndAllowExternal", "dndHorizontal", "dndDragoverClass", "dndDropzoneDisabledClass", "dndDisableIf", "dndDisableDropIf"], outputs: ["dndDragover", "dndDrop"] }, { type: i6$1.DndPlaceholderRefDirective, selector: "[dndPlaceholderRef]" }, { type: i6$1.DndDraggableDirective, selector: "[dndDraggable]", inputs: ["dndDraggable", "dndEffectAllowed", "dndType", "dndDraggingClass", "dndDraggingSourceClass", "dndDraggableDisabledClass", "dndDragImageOffsetFunction", "dndDisableIf", "dndDisableDragIf"], outputs: ["dndStart", "dndDrag", "dndEnd", "dndMoved", "dndCopied", "dndLinked", "dndCanceled"] }], pipes: { "date": i2.DatePipe } });
|
|
24850
|
+
TestCaseLoopStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestCaseLoopStepComponent, selector: "cqa-test-case-loop-step", inputs: { config: "config", id: "id", loopType: "loopType", stepNumber: "stepNumber", index: "index", condition: "condition", maxIterations: "maxIterations", testDataProfile: "testDataProfile", startStep: "startStep", endStep: "endStep", nestedSteps: "nestedSteps", expanded: "expanded", isNested: "isNested", isInsideLoop: "isInsideLoop", isInsideStepGroup: "isInsideStepGroup", isReorder: "isReorder", selected: "selected", isDuplicating: "isDuplicating", dataProfileOptions: "dataProfileOptions", hasMoreDataProfiles: "hasMoreDataProfiles", isLoadingDataProfiles: "isLoadingDataProfiles", naturalTextActionsOptions: "naturalTextActionsOptions", currentTestCaseId: "currentTestCaseId", setConditionTemplateVariables: "setConditionTemplateVariables", addStepBetweenAbove: "addStepBetweenAbove", addStepBetweenBelow: "addStepBetweenBelow", addStepBetween: "addStepBetween", editable: "editable", nestingLevel: "nestingLevel" }, outputs: { toggleExpanded: "toggleExpanded", testDataProfileChange: "testDataProfileChange", startStepChange: "startStepChange", endStepChange: "endStepChange", conditionChange: "conditionChange", maxIterationsChange: "maxIterationsChange", nestedStepChange: "nestedStepChange", addStep: "addStep", deleteStep: "deleteStep", duplicate: "duplicate", delete: "delete", moreOptions: "moreOptions", viewDetails: "viewDetails", editInDepth: "editInDepth", edit: "edit", dndDropInZone: "dndDropInZone", loadMoreDataProfiles: "loadMoreDataProfiles", searchDataProfiles: "searchDataProfiles", stepUpdate: "stepUpdate", clickAction: "clickAction", addStepBetweenClick: "addStepBetweenClick", selectionChange: "selectionChange", deleteBranch: "deleteBranch", addStepForBranch: "addStepForBranch", deleteStepWithBranch: "deleteStepWithBranch", openExternal: "openExternal" }, host: { classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "viewDetailsTrigger", first: true, predicate: ["viewDetailsTrigger"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"loop-step-row cqa-flex cqa-flex-col\">\n <!-- Inline Edit Mode: stop propagation so dropdown/select interactions don't bubble and collapse the step or start drag -->\n <div *ngIf=\"isEditing\" class=\"cqa-py-2.5 cqa-px-4 cqa-flex cqa-flex-col cqa-gap-3\" (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-justify-between\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-grow cqa-flex-wrap cqa-min-w-0\">\n <!-- Loop Type Label -->\n <div class=\"cqa-font-semibold cqa-text-[#1C398E] cqa-text-[12px] cqa-leading-[15px]\">\n {{ getLoopTypeLabel() }}\n </div>\n\n <!-- FOR LOOP inline edit: cqa-dynamic-select (same usage as default stories) -->\n <ng-container *ngIf=\"loopType === 'for'\">\n <!-- First select: width 216.25px, height 36px, gap 4px, opacity 1 -->\n <cqa-dynamic-select [form]=\"editForm\" [config]=\"forOptionTypeSelectConfig\"\n class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-dynamic-select>\n <cqa-dynamic-select [form]=\"editForm\" [config]=\"testDataProfileSelectConfig\"\n class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-dynamic-select>\n <cqa-dynamic-select [form]=\"editForm\" [config]=\"startStepSelectConfig\"\n class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-dynamic-select>\n <cqa-dynamic-select [form]=\"editForm\" [config]=\"endStepSelectConfig\"\n class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-dynamic-select>\n </ng-container>\n\n <!-- WHILE LOOP inline edit: cqa-autocomplete + template variables (same as condition-step) -->\n <ng-container *ngIf=\"isWhileLoop()\">\n <cqa-autocomplete\n *ngIf=\"editForm\"\n [options]=\"whileConditionAutocompleteOptions\"\n [value]=\"whileConditionDisplayValue\"\n (valueChange)=\"onEditFormFieldChange('condition', $event)\"\n (optionSelect)=\"onConditionSelect($event)\"\n placeholder=\"Select condition\"\n [fullWidth]=\"true\"\n class=\"cqa-w-full cqa-max-w-[216px]\">\n </cqa-autocomplete>\n <!-- Template variables hidden in while loop - use Edit In depth to configure -->\n </ng-container>\n\n <!-- Edit In depth link -->\n <a href=\"#\" *ngIf=\"isWhileLoop()\" (click)=\"onEditInDepth(); $event.preventDefault()\"\n class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-[2px] cqa-no-underline\">\n Edit In depth\n <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\"\n fill=\"#3F43EE\" />\n </svg>\n </a>\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n <!-- Cancel / Apply -->\n <cqa-button variant=\"outlined\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Cancel'\"\n (clicked)=\"onEditCancel()\"></cqa-button>\n <cqa-button variant=\"filled\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Apply'\"\n (clicked)=\"onEditApply()\"></cqa-button>\n </div>\n </div>\n </div>\n\n <!-- Loop Header (normal view when not editing) -->\n <div *ngIf=\"!isEditing\"\n [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 cqa-pr-4'\"\n [style.padding-left.px]=\"getRowPaddingLeftPx()\"\n [style.border-top]=\"isInsideStepGroup ? '1px solid #BEDBFF' : null\"\n style=\"border-bottom: 1px solid #E5E7EB;\">\n <!-- Drag handle / checkbox \u2014 omit entirely when inside step group to avoid phantom flex gap -->\n <div *ngIf=\"!isInsideStepGroup\" class=\"cqa-inline-flex cqa-items-center\">\n <!-- Drag Handle Icon (when isReorder is true) -->\n <div *ngIf=\"isReorder\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n </svg>\n </div>\n <!-- Checkbox (when not reordering) -->\n <label *ngIf=\"!isReorder\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative cqa-mr-2\">\n <input type=\"checkbox\"\n [ngModel]=\"selected\"\n (ngModelChange)=\"onSelectionChange($event)\"\n class=\"cqa-h-4 cqa-w-4 cqa-cursor-pointer cqa-transition-all cqa-appearance-none cqa-rounded shadow hover:cqa-shadow-md cqa-border cqa-border-solid cqa-border-slate-300 cqa-flex-shrink-0\"\n [class.cqa-bg-[#3F43EE]]=\"selected\"\n [class.cqa-border-[#3F43EE]]=\"selected\"\n id=\"check-loop-step\" />\n <span class=\"cqa-absolute cqa-text-white cqa-top-1/2 cqa-left-1/2 cqa--translate-x-1/2 cqa--translate-y-1/2 cqa-pointer-events-none cqa-flex cqa-items-center cqa-justify-center\"\n [class.cqa-opacity-0]=\"!selected\"\n [class.cqa-opacity-100]=\"selected\">\n <svg width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 3.125L4.5 8.625L2 6.125\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </span>\n </label>\n </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 <!-- Expand/Collapse Icon -->\n <button type=\"button\" (click)=\"onToggleExpanded()\" class=\"cqa-p-0\">\n <svg [class.cqa-rotate-180]=\"!expanded\" class=\"cqa-transition-transform\" width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M12 10L8 6L4 10\" stroke=\"#6B7280\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button>\n\n <!-- Loop Icon -->\n <div *ngIf=\"loopType === 'for'\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M11.334 1.33325L14.0007 3.99992L11.334 6.66659\" stroke=\"#1C398E\" stroke-width=\"1.33333\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M2 7.33333V6.66667C2 5.95942 2.28095 5.28115 2.78105 4.78105C3.28115 4.28095 3.95942 4 4.66667 4H14\"\n stroke=\"#1C398E\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M4.66667 14.6666L2 11.9999L4.66667 9.33325\" stroke=\"#1C398E\" stroke-width=\"1.33333\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M14 8.66675V9.33341C14 10.0407 13.719 10.7189 13.219 11.219C12.7189 11.7191 12.0406 12.0001 11.3333 12.0001H2\"\n stroke=\"#1C398E\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </div>\n <div *ngIf=\"loopType === 'while'\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M11.334 1.33325L14.0007 3.99992L11.334 6.66659\" stroke=\"#59168B\" stroke-width=\"1.33333\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M2 7.33333V6.66667C2 5.95942 2.28095 5.28115 2.78105 4.78105C3.28115 4.28095 3.95942 4 4.66667 4H14\"\n stroke=\"#59168B\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M4.66667 14.6666L2 11.9999L4.66667 9.33325\" stroke=\"#59168B\" stroke-width=\"1.33333\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M14 8.66675V9.33341C14 10.0407 13.719 10.7189 13.219 11.219C12.7189 11.7191 12.0406 12.0001 11.3333 12.0001H2\"\n stroke=\"#59168B\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </div>\n\n <!-- Loop Type Label -->\n <span class=\"cqa-font-semibold cqa-text-[#1C398E] cqa-text-[12px] cqa-leading-none\">\n {{ getLoopTypeLabel() }}\n </span>\n\n <!-- For Loop Display: flex-col so profile/range each get a full row; no ml-2 since parent gap-3 handles spacing -->\n <div *ngIf=\"loopType === 'for' && (hasTestDataProfile() || hasStartValue() || hasEndValue())\" class=\"cqa-flex cqa-flex-col cqa-gap-y-1 cqa-flex-1 cqa-min-w-0\">\n <div class=\"cqa-flex cqa-flex-wrap cqa-items-center cqa-gap-x-2 cqa-gap-y-1 cqa-min-w-0\">\n <span *ngIf=\"getForLoopProfileDisplay()\" class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px] cqa-action-format cqa-inline-block cqa-max-w-full cqa-overflow-hidden\" [innerHTML]=\"getForLoopProfileDisplay()\" (click)=\"onLoopActionClick($event)\"></span>\n <span *ngIf=\"getForLoopRangeDisplay()\" class=\"for-loop-range-row cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px] cqa-action-format cqa-inline-block cqa-max-w-full cqa-overflow-hidden\" [innerHTML]=\"getForLoopRangeDisplay()\" (click)=\"onLoopActionClick($event)\"></span>\n </div>\n <div *ngIf=\"getLoopEventDetailsForDisplay().length > 0\" class=\"cqa-flex cqa-flex-wrap cqa-gap-2 cqa-items-center\">\n <span *ngFor=\"let item of getLoopEventDetailsForDisplay()\" class=\"cqa-inline-flex cqa-items-center cqa-gap-1 cqa-py-0.5 cqa-px-2 cqa-rounded cqa-text-[12px] cqa-leading-[15px] cqa-bg-[#F3F4F6] cqa-text-[#374151] cqa-border cqa-border-solid cqa-border-[#E5E7EB]\" (click)=\"onLoopActionClick($event)\">\n <span class=\"cqa-font-medium cqa-text-[#6B7280]\">{{ item.key }}:</span>\n <span class=\"cqa-text-[#111827] cqa-break-words\">{{ item.value }}</span>\n </span>\n </div>\n </div>\n\n <!-- While Loop Condition (only show if condition exists) - same styling as condition step -->\n <div *ngIf=\"isWhileLoop() && condition\" class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-flex-1 cqa-min-w-0\">\n <!-- While condition text (separate block) -->\n <div class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px] cqa-w-full !cqa-inline-flex cqa-items-center cqa-flex-wrap cqa-action-format\" [innerHTML]=\"getConditionDisplay()\" (click)=\"onLoopActionClick($event)\"></div>\n \n\n <!-- While event details chips (separate block) -->\n <div class=\"cqa-flex cqa-flex-wrap cqa-items-center cqa-gap-2\">\n <span *ngIf=\"maxIterations != null && maxIterations > 0\" class=\"cqa-inline-flex cqa-items-center cqa-gap-1 cqa-py-0.5 cqa-px-2 cqa-rounded cqa-text-[12px] cqa-leading-[15px] cqa-bg-[#F3F4F6] cqa-text-[#374151] cqa-border cqa-border-solid cqa-border-[#E5E7EB]\" (click)=\"onLoopActionClick($event)\" data-key=\"maxIterations\" data-event-key=\"maxIterations\">\n <span class=\"cqa-font-medium cqa-text-[#6B7280]\">max iterations:</span>\n <span class=\"cqa-text-[#111827]\">{{ maxIterations }}</span>\n </span>\n <ng-container *ngIf=\"getLoopEventDetailsForDisplay().length > 0\">\n <span *ngFor=\"let item of getLoopEventDetailsForDisplay()\" class=\"cqa-inline-flex cqa-items-center cqa-gap-1 cqa-py-0.5 cqa-px-2 cqa-rounded cqa-text-[12px] cqa-leading-[15px] cqa-bg-[#F3F4F6] cqa-text-[#374151] cqa-border cqa-border-solid cqa-border-[#E5E7EB]\" (click)=\"onLoopActionClick($event)\">\n <span class=\"cqa-font-medium cqa-text-[#6B7280]\">{{ item.key }}:</span>\n <span class=\"cqa-text-[#111827]\">{{ item.value }}</span>\n </span>\n </ng-container>\n </div>\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-ml-auto\">\n <!-- Action Icons: Edit, Link, Duplicate, Delete (show on hover; hidden when inside step-group) \u2014 before steps summary -->\n <div *ngIf=\"!isInsideStepGroup && !isReorder\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-3 cqa-px-[7px]\">\n <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\"\n class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M7 11.6666H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M9.55208 2.1128C9.7843 1.88058 10.0993 1.75012 10.4277 1.75012C10.7561 1.75012 11.071 1.88058 11.3033 2.1128C11.5355 2.34502 11.6659 2.65998 11.6659 2.98838C11.6659 3.31679 11.5355 3.63175 11.3033 3.86397L4.29742 10.8704C4.15864 11.0092 3.9871 11.1107 3.79867 11.1656L2.12333 11.6544C2.07314 11.669 2.01993 11.6699 1.96928 11.6569C1.91863 11.6439 1.8724 11.6176 1.83543 11.5806C1.79846 11.5437 1.7721 11.4974 1.75913 11.4468C1.74615 11.3961 1.74703 11.3429 1.76167 11.2927L2.2505 9.61738C2.30546 9.42916 2.40698 9.25783 2.54567 9.11922L9.55208 2.1128Z\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </button>\n <!-- <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\"\n class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\"\n stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\"\n stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button> -->\n <button\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\n d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n <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\"\n class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M1.75 3.5H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M11.0827 3.5V11.6667C11.0827 12.25 10.4993 12.8333 9.91602 12.8333H4.08268C3.49935 12.8333 2.91602 12.25 2.91602 11.6667V3.5\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M4.66602 3.49996V2.33329C4.66602 1.74996 5.24935 1.16663 5.83268 1.16663H8.16602C8.74935 1.16663 9.33268 1.74996 9.33268 2.33329V3.49996\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M5.83398 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M8.16602 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button>\n </div>\n\n <!-- Steps Summary (after action icons) -->\n <div\n 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-font-semibold\">\n {{ getStepsSummary() }}\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>\n\n <!-- Expanded Content with Nested Steps (renderer dispatches by step type, n-level nesting) -->\n <div *ngIf=\"expanded\" class=\"cqa-flex cqa-flex-col\">\n <!-- Nested inside a step group with no steps: single empty state (no START/END) -->\n <div\n *ngIf=\"isInsideStepGroup && nestedSteps.length === 0\"\n class=\"cqa-grid cqa-w-full cqa-place-items-center cqa-gap-0 cqa-py-[8px] cqa-px-4 cqa-border-0 cqa-text-center cqa-text-[#1C398E] cqa-font-semibold cqa-text-[12px] cqa-leading-[15px] cqa-bg-[rgba(219,234,254,0.5)]\">\n No steps added\n </div>\n\n <!-- Empty loop (not in step group): add icon only \u2014 no START/END until at least one nested step exists -->\n <div *ngIf=\"nestedSteps.length === 0 && !isInsideStepGroup && !isReorder\" class=\"loop-step-empty cqa-min-h-[52px] cqa-flex cqa-items-center cqa-justify-center cqa-pl-4 cqa-pr-4\">\n <button type=\"button\" (click)=\"onAddStepEmpty(); $event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\" title=\"Add step\"\n class=\"loop-step-empty-add\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect x=\"1\" y=\"1\" width=\"21.1822\" height=\"22\" rx=\"10.5911\" fill=\"white\" />\n <rect x=\"1\" y=\"1\" width=\"21.1822\" height=\"22\" rx=\"10.5911\" stroke=\"#3F43EE\" stroke-width=\"2\" />\n <path d=\"M8.5 12H15.5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M12 8.5V15.5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </button>\n </div>\n\n <!-- Reorder mode, empty body: drop zone only \u2014 no START/END (not used when nested in step group; that case shows \"No steps added\" above) -->\n <div *ngIf=\"nestedSteps.length === 0 && isReorder && !isInsideStepGroup\" class=\"cqa-flex cqa-flex-col nested-step-drop-list\"\n [style.min-height.px]=\"52\"\n [dndDropzone]=\"['step']\"\n dndEffectAllowed=\"move\"\n dndDragoverClass=\"dndDragover\"\n (dndDrop)=\"onDndDrop($event)\">\n <div dndPlaceholderRef class=\"step-drag-placeholder-nested cqa-my-1 cqa-min-h-[50px] cqa-border-2 cqa-border-dashed cqa-border-[#3F43EE] cqa-rounded cqa-bg-[rgba(63,67,238,0.08)] cqa-flex cqa-items-center cqa-justify-center cqa-text-[#3F43EE] cqa-text-xs\">Drop here</div>\n </div>\n\n <!-- At least one nested step: START marker, body, END marker -->\n <ng-container *ngIf=\"nestedSteps.length > 0\">\n <!-- START Marker (centered label) -->\n <div class=\"cqa-grid cqa-w-full cqa-place-items-center cqa-gap-0 cqa-py-[8px] cqa-px-4 cqa-border-0 cqa-bg-[rgba(219,234,254,0.5)]\">\n <span class=\"cqa-text-center cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold cqa-whitespace-nowrap cqa-bg-transparent cqa-text-[#1C398E]\">{{ getStartLabel() }} : {{ getLoopMarkerStartStepDisplay() }}</span>\n </div>\n <div *ngIf=\"!isReorder\" class=\"cqa-flex cqa-flex-col\">\n <cqa-test-case-details-renderer *ngFor=\"let step of nestedSteps; let i = index\" [step]=\"step\" [index]=\"i\"\n [selected]=\"$any(step).selected\"\n [isNested]=\"true\" [isInsideLoop]=\"true\" [isInsideStepGroup]=\"isInsideStepGroup\" [isReorder]=\"isReorder\"\n [nestingLevel]=\"nestingLevel + 1\"\n [addStepBetween]=\"addStepBetween\"\n [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n [currentTestCaseId]=\"currentTestCaseId\"\n (nestedStepChange)=\"onNestedStepChange($event.step, $event.index)\"\n (addStep)=\"onAddStep()\" (addStepForLoop)=\"onAddStepForLoopFromNested($event)\" (deleteStep)=\"onDeleteStep($event)\"\n (addStepForBranch)=\"addStepForBranch.emit($event)\" (deleteStepWithBranch)=\"deleteStepWithBranch.emit($event)\"\n (toggleExpanded)=\"onNestedToggleExpanded($event, step, i)\"\n (groupNameChange)=\"$any(step).groupName = $event; onNestedStepChange(step, i)\"\n (descriptionChange)=\"$any(step).description = $event; onNestedStepChange(step, i)\"\n (reusableChange)=\"$any(step).reusable = $event; onNestedStepChange(step, i)\"\n (openExternal)=\"onNestedOpenExternal($event)\" (edit)=\"onNestedEdit($event)\"\n (link)=\"onNestedStepChange(step, i)\" (duplicate)=\"onNestedDuplicate($event, step)\" (delete)=\"onDeleteStep($event, i)\"\n (viewDetails)=\"viewDetails.emit($event)\"\n (conditionChange)=\"$any(step).condition = $event; onNestedStepChange(step, i)\"\n (branchStepChange)=\"onNestedStepChange(step, i)\" (addBranch)=\"onNestedConditionAddBranch($any(step), i)\"\n (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event, i)\"\n (testDataProfileChange)=\"$any(step).testDataProfile = $event; onNestedStepChange(step, i)\"\n (startStepChange)=\"$any(step).startStep = $event; onNestedStepChange(step, i)\"\n (endStepChange)=\"$any(step).endStep = $event; onNestedStepChange(step, i)\"\n (maxIterationsChange)=\"$any(step).maxIterations = $event; onNestedStepChange(step, i)\"\n (eventTypeChange)=\"$any(step).eventType = $event; onNestedStepChange(step, i)\"\n (parameterChange)=\"onNestedStepChange(step, i)\"\n (selectionChange)=\"$any(step).selected = $event; onNestedStepChange(step, i)\"\n (loadMoreDataProfiles)=\"loadMoreDataProfiles.emit($event)\"\n (searchDataProfiles)=\"searchDataProfiles.emit($event)\"\n (dndDropInZone)=\"dndDropInZone.emit($event)\"\n (clickAction)=\"clickAction.emit($event)\"\n (editInDepth)=\"editInDepth.emit($event)\"\n (addStepBetweenClick)=\"addStepBetweenClick.emit($event)\">\n </cqa-test-case-details-renderer>\n </div>\n <div *ngIf=\"isReorder\" class=\"cqa-flex cqa-flex-col nested-step-drop-list\"\n [style.min-height.px]=\"nestedSteps.length === 0 ? 52 : null\"\n [dndDropzone]=\"['step']\"\n dndEffectAllowed=\"move\"\n dndDragoverClass=\"dndDragover\"\n (dndDrop)=\"onDndDrop($event)\">\n <div dndPlaceholderRef class=\"step-drag-placeholder-nested cqa-my-1 cqa-min-h-[50px] cqa-border-2 cqa-border-dashed cqa-border-[#3F43EE] cqa-rounded cqa-bg-[rgba(63,67,238,0.08)] cqa-flex cqa-items-center cqa-justify-center cqa-text-[#3F43EE] cqa-text-xs\">Drop here</div>\n <div *ngFor=\"let step of nestedSteps; let i = index\" class=\"nested-step-drag-item\"\n [dndDraggable]=\"step\"\n dndEffectAllowed=\"move\"\n dndType=\"step\">\n <cqa-test-case-details-renderer [step]=\"step\" [index]=\"i\"\n [selected]=\"$any(step).selected\"\n [isNested]=\"true\" [isInsideLoop]=\"true\" [isInsideStepGroup]=\"isInsideStepGroup\" [isReorder]=\"isReorder\"\n [nestingLevel]=\"nestingLevel + 1\"\n [addStepBetweenAbove]=\"addStepBetweenAbove\"\n [addStepBetweenBelow]=\"addStepBetweenBelow\"\n [addStepBetween]=\"addStepBetween\"\n [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n [currentTestCaseId]=\"currentTestCaseId\"\n (nestedStepChange)=\"onNestedStepChange($event.step, $event.index)\"\n (addStep)=\"onAddStep()\" (addStepForLoop)=\"onAddStepForLoopFromNested($event)\" (deleteStep)=\"onDeleteStep($event)\"\n (addStepForBranch)=\"addStepForBranch.emit($event)\" (deleteStepWithBranch)=\"deleteStepWithBranch.emit($event)\"\n (toggleExpanded)=\"onNestedToggleExpanded($event, step, i)\"\n (groupNameChange)=\"$any(step).groupName = $event; onNestedStepChange(step, i)\"\n (descriptionChange)=\"$any(step).description = $event; onNestedStepChange(step, i)\"\n (reusableChange)=\"$any(step).reusable = $event; onNestedStepChange(step, i)\"\n (openExternal)=\"onNestedOpenExternal($event)\" (edit)=\"onNestedStepChange(step, i)\"\n (link)=\"onNestedStepChange(step, i)\" (duplicate)=\"onNestedStepChange(step, i)\" (delete)=\"onDeleteStep($event, i)\"\n (viewDetails)=\"viewDetails.emit($event)\"\n (conditionChange)=\"$any(step).condition = $event; onNestedStepChange(step, i)\"\n (branchStepChange)=\"onNestedStepChange(step, i)\" (addBranch)=\"onNestedConditionAddBranch($any(step), i)\"\n (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event, i)\"\n (testDataProfileChange)=\"$any(step).testDataProfile = $event; onNestedStepChange(step, i)\"\n (startStepChange)=\"$any(step).startStep = $event; onNestedStepChange(step, i)\"\n (endStepChange)=\"$any(step).endStep = $event; onNestedStepChange(step, i)\"\n (maxIterationsChange)=\"$any(step).maxIterations = $event; onNestedStepChange(step, i)\"\n (eventTypeChange)=\"$any(step).eventType = $event; onNestedStepChange(step, i)\"\n (parameterChange)=\"onNestedStepChange(step, i)\"\n (selectionChange)=\"$any(step).selected = $event; onNestedStepChange(step, i)\"\n (loadMoreDataProfiles)=\"loadMoreDataProfiles.emit($event)\"\n (searchDataProfiles)=\"searchDataProfiles.emit($event)\"\n (dndDropInZone)=\"dndDropInZone.emit($event)\"\n (clickAction)=\"clickAction.emit($event)\"\n (editInDepth)=\"editInDepth.emit($event)\"\n (addStepBetweenClick)=\"addStepBetweenClick.emit($event)\">\n </cqa-test-case-details-renderer>\n </div>\n </div>\n\n <!-- END Marker (centered label) -->\n <div class=\"cqa-grid cqa-w-full cqa-place-items-center cqa-gap-0 cqa-py-[8px] cqa-px-4 cqa-border-0 cqa-bg-[rgba(219,234,254,0.5)]\">\n <span class=\"cqa-text-center cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold cqa-whitespace-nowrap cqa-bg-transparent cqa-text-[#1C398E]\">{{ getEndLabel() }} : {{ getLoopMarkerEndStepDisplay() }}</span>\n </div>\n </ng-container>\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", ".loop-step-empty{opacity:1}.loop-step-empty-add{padding:0;background:transparent;border:0;cursor:pointer;color:#3f43ee;transition:opacity .15s ease}.loop-step-empty-add:hover{opacity:.9}\n", ".for-loop-range-row{display:inline-flex;align-items:center;gap:.5rem;flex-wrap:wrap}.for-loop-range-row .for-loop-range-part+.for-loop-range-part{margin-left:.25rem}\n"], components: [{ type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: AutocompleteComponent, selector: "cqa-autocomplete", inputs: ["placeholder", "options", "value", "disabled", "showClear", "ariaLabel", "autoFocus", "size", "fullWidth", "compact"], outputs: ["valueChange", "optionSelect", "cleared"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: TestCaseDetailsRendererComponent, selector: "cqa-test-case-details-renderer", inputs: ["step", "index", "isNested", "isInsideLoop", "isInsideStepGroup", "nestingLevel", "branch", "isReorder", "selected", "isDuplicating", "addStepBetweenAbove", "addStepBetweenBelow", "addStepBetween", "editable", "currentTestCaseId", "dataProfileOptions", "hasMoreDataProfiles", "isLoadingDataProfiles", "naturalTextActionsOptions", "setConditionTemplateVariables"], outputs: ["nestedStepChange", "addStep", "deleteStep", "toggleExpanded", "groupNameChange", "descriptionChange", "reusableChange", "openExternal", "edit", "link", "duplicate", "delete", "viewDetails", "selectionChange", "conditionChange", "branchStepChange", "addStepForBranch", "addStepForLoop", "deleteStepWithBranch", "addBranch", "addElse", "deleteBranch", "testDataProfileChange", "startStepChange", "endStepChange", "maxIterationsChange", "eventTypeChange", "parameterChange", "clickAction", "dndDropInZone", "loadMoreDataProfiles", "searchDataProfiles", "stepUpdate", "addStepBetweenClick", "editInDepth"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6$1.DndDropzoneDirective, selector: "[dndDropzone]", inputs: ["dndDropzone", "dndEffectAllowed", "dndAllowExternal", "dndHorizontal", "dndDragoverClass", "dndDropzoneDisabledClass", "dndDisableIf", "dndDisableDropIf"], outputs: ["dndDragover", "dndDrop"] }, { type: i6$1.DndPlaceholderRefDirective, selector: "[dndPlaceholderRef]" }, { type: i6$1.DndDraggableDirective, selector: "[dndDraggable]", inputs: ["dndDraggable", "dndEffectAllowed", "dndType", "dndDraggingClass", "dndDraggingSourceClass", "dndDraggableDisabledClass", "dndDragImageOffsetFunction", "dndDisableIf", "dndDisableDragIf"], outputs: ["dndStart", "dndDrag", "dndEnd", "dndMoved", "dndCopied", "dndLinked", "dndCanceled"] }], pipes: { "date": i2.DatePipe } });
|
|
24806
24851
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseLoopStepComponent, decorators: [{
|
|
24807
24852
|
type: Component,
|
|
24808
24853
|
args: [{ selector: 'cqa-test-case-loop-step', host: { class: 'cqa-ui-root' }, styles: [
|
|
24809
24854
|
STEP_ROW_ACTIONS_STYLES,
|
|
24810
24855
|
LOOP_STEP_EMPTY_STYLES,
|
|
24811
24856
|
LOOP_STEP_FOR_DISPLAY_STYLES,
|
|
24812
|
-
], template: "<div class=\"loop-step-row cqa-flex cqa-flex-col\">\n <!-- Inline Edit Mode: stop propagation so dropdown/select interactions don't bubble and collapse the step or start drag -->\n <div *ngIf=\"isEditing\" class=\"cqa-py-2.5 cqa-px-4 cqa-flex cqa-flex-col cqa-gap-3\" (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-justify-between\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-grow cqa-flex-wrap cqa-min-w-0\">\n <!-- Loop Type Label -->\n <div class=\"cqa-font-semibold cqa-text-[#1C398E] cqa-text-[12px] cqa-leading-[15px]\">\n {{ getLoopTypeLabel() }}\n </div>\n\n <!-- FOR LOOP inline edit: cqa-dynamic-select (same usage as default stories) -->\n <ng-container *ngIf=\"loopType === 'for'\">\n <!-- First select: width 216.25px, height 36px, gap 4px, opacity 1 -->\n <cqa-dynamic-select [form]=\"editForm\" [config]=\"forOptionTypeSelectConfig\"\n class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-dynamic-select>\n <cqa-dynamic-select [form]=\"editForm\" [config]=\"testDataProfileSelectConfig\"\n class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-dynamic-select>\n <cqa-dynamic-select [form]=\"editForm\" [config]=\"startStepSelectConfig\"\n class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-dynamic-select>\n <cqa-dynamic-select [form]=\"editForm\" [config]=\"endStepSelectConfig\"\n class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-dynamic-select>\n </ng-container>\n\n <!-- WHILE LOOP inline edit: cqa-autocomplete + template variables (same as condition-step) -->\n <ng-container *ngIf=\"isWhileLoop()\">\n <cqa-autocomplete\n *ngIf=\"editForm\"\n [options]=\"whileConditionAutocompleteOptions\"\n [value]=\"whileConditionDisplayValue\"\n (valueChange)=\"onEditFormFieldChange('condition', $event)\"\n (optionSelect)=\"onConditionSelect($event)\"\n placeholder=\"Select condition\"\n [fullWidth]=\"true\"\n class=\"cqa-w-full cqa-max-w-[216px]\">\n </cqa-autocomplete>\n <!-- Template variables hidden in while loop - use Edit In depth to configure -->\n </ng-container>\n\n <!-- Edit In depth link -->\n <a href=\"#\" *ngIf=\"isWhileLoop()\" (click)=\"onEditInDepth(); $event.preventDefault()\"\n class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-[2px] cqa-no-underline\">\n Edit In depth\n <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\"\n fill=\"#3F43EE\" />\n </svg>\n </a>\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n <!-- Cancel / Apply -->\n <cqa-button variant=\"outlined\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Cancel'\"\n (clicked)=\"onEditCancel()\"></cqa-button>\n <cqa-button variant=\"filled\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Apply'\"\n (clicked)=\"onEditApply()\"></cqa-button>\n </div>\n </div>\n </div>\n\n <!-- Loop Header (normal view when not editing) -->\n <div *ngIf=\"!isEditing\"\n [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 cqa-pr-4'\"\n [style.padding-left.px]=\"getRowPaddingLeftPx()\"\n style=\"border-bottom: 1px solid #E5E7EB;\">\n <div 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=\"!isReorder && !isInsideStepGroup\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative cqa-mr-2\">\n <input type=\"checkbox\"\n [ngModel]=\"selected\"\n (ngModelChange)=\"onSelectionChange($event)\"\n class=\"cqa-h-4 cqa-w-4 cqa-cursor-pointer cqa-transition-all cqa-appearance-none cqa-rounded shadow hover:cqa-shadow-md cqa-border cqa-border-solid cqa-border-slate-300 cqa-flex-shrink-0\"\n [class.cqa-bg-[#3F43EE]]=\"selected\"\n [class.cqa-border-[#3F43EE]]=\"selected\"\n id=\"check-loop-step\" />\n <span class=\"cqa-absolute cqa-text-white cqa-top-1/2 cqa-left-1/2 cqa--translate-x-1/2 cqa--translate-y-1/2 cqa-pointer-events-none cqa-flex cqa-items-center cqa-justify-center\"\n [class.cqa-opacity-0]=\"!selected\"\n [class.cqa-opacity-100]=\"selected\">\n <svg width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 3.125L4.5 8.625L2 6.125\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </span>\n </label>\n </div>\n <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px] cqa-min-w-[32px]\">{{ stepNumber }}</span>\n <!-- Expand/Collapse Icon -->\n <button type=\"button\" (click)=\"onToggleExpanded()\" class=\"cqa-p-0\">\n <svg [class.cqa-rotate-180]=\"!expanded\" class=\"cqa-transition-transform\" width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M12 10L8 6L4 10\" stroke=\"#6B7280\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button>\n\n <!-- Loop Icon -->\n <div *ngIf=\"loopType === 'for'\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M11.334 1.33325L14.0007 3.99992L11.334 6.66659\" stroke=\"#1C398E\" stroke-width=\"1.33333\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M2 7.33333V6.66667C2 5.95942 2.28095 5.28115 2.78105 4.78105C3.28115 4.28095 3.95942 4 4.66667 4H14\"\n stroke=\"#1C398E\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M4.66667 14.6666L2 11.9999L4.66667 9.33325\" stroke=\"#1C398E\" stroke-width=\"1.33333\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M14 8.66675V9.33341C14 10.0407 13.719 10.7189 13.219 11.219C12.7189 11.7191 12.0406 12.0001 11.3333 12.0001H2\"\n stroke=\"#1C398E\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </div>\n <div *ngIf=\"loopType === 'while'\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M11.334 1.33325L14.0007 3.99992L11.334 6.66659\" stroke=\"#59168B\" stroke-width=\"1.33333\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M2 7.33333V6.66667C2 5.95942 2.28095 5.28115 2.78105 4.78105C3.28115 4.28095 3.95942 4 4.66667 4H14\"\n stroke=\"#59168B\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M4.66667 14.6666L2 11.9999L4.66667 9.33325\" stroke=\"#59168B\" stroke-width=\"1.33333\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M14 8.66675V9.33341C14 10.0407 13.719 10.7189 13.219 11.219C12.7189 11.7191 12.0406 12.0001 11.3333 12.0001H2\"\n stroke=\"#59168B\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </div>\n\n <!-- Loop Type Label -->\n <span class=\"cqa-font-semibold cqa-text-[#1C398E] cqa-text-[12px] cqa-leading-none\">\n {{ getLoopTypeLabel() }}\n </span>\n\n <!-- For Loop Display: items flow on one row; only wrap to next line when there is not enough space -->\n <div *ngIf=\"loopType === 'for' && (hasTestDataProfile() || hasStartValue() || hasEndValue())\" class=\"cqa-flex cqa-flex-wrap cqa-items-center cqa-gap-x-3 cqa-gap-y-1 cqa-ml-2 cqa-flex-1 cqa-min-w-0\">\n <span *ngIf=\"getForLoopProfileDisplay()\" class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px] cqa-action-format\" [innerHTML]=\"getForLoopProfileDisplay()\" (click)=\"onLoopActionClick($event)\"></span>\n <span *ngIf=\"getForLoopRangeDisplay()\" class=\"for-loop-range-row cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px] cqa-action-format\" [innerHTML]=\"getForLoopRangeDisplay()\" (click)=\"onLoopActionClick($event)\"></span>\n <div *ngIf=\"getLoopEventDetailsForDisplay().length > 0\" class=\"cqa-flex cqa-flex-wrap cqa-gap-2 cqa-items-center\">\n <span *ngFor=\"let item of getLoopEventDetailsForDisplay()\" class=\"cqa-inline-flex cqa-items-center cqa-gap-1 cqa-py-0.5 cqa-px-2 cqa-rounded cqa-text-[12px] cqa-leading-[15px] cqa-bg-[#F3F4F6] cqa-text-[#374151] cqa-border cqa-border-solid cqa-border-[#E5E7EB]\" (click)=\"onLoopActionClick($event)\">\n <span class=\"cqa-font-medium cqa-text-[#6B7280]\">{{ item.key }}:</span>\n <span class=\"cqa-text-[#111827] cqa-break-words\">{{ item.value }}</span>\n </span>\n </div>\n </div>\n\n <!-- While Loop Condition (only show if condition exists) - same styling as condition step -->\n <div *ngIf=\"isWhileLoop() && condition\" class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-ml-2 cqa-flex-1 cqa-min-w-0\">\n <!-- While condition text (separate block) -->\n <div class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px] cqa-w-full !cqa-inline-flex cqa-items-center cqa-flex-wrap cqa-action-format\" [innerHTML]=\"getConditionDisplay()\" (click)=\"onLoopActionClick($event)\"></div>\n \n\n <!-- While event details chips (separate block) -->\n <div class=\"cqa-flex cqa-flex-wrap cqa-items-center cqa-gap-2\">\n <span *ngIf=\"maxIterations != null && maxIterations > 0\" class=\"cqa-inline-flex cqa-items-center cqa-gap-1 cqa-py-0.5 cqa-px-2 cqa-rounded cqa-text-[12px] cqa-leading-[15px] cqa-bg-[#F3F4F6] cqa-text-[#374151] cqa-border cqa-border-solid cqa-border-[#E5E7EB]\" (click)=\"onLoopActionClick($event)\" data-key=\"maxIterations\" data-event-key=\"maxIterations\">\n <span class=\"cqa-font-medium cqa-text-[#6B7280]\">max iterations:</span>\n <span class=\"cqa-text-[#111827]\">{{ maxIterations }}</span>\n </span>\n <ng-container *ngIf=\"getLoopEventDetailsForDisplay().length > 0\">\n <span *ngFor=\"let item of getLoopEventDetailsForDisplay()\" class=\"cqa-inline-flex cqa-items-center cqa-gap-1 cqa-py-0.5 cqa-px-2 cqa-rounded cqa-text-[12px] cqa-leading-[15px] cqa-bg-[#F3F4F6] cqa-text-[#374151] cqa-border cqa-border-solid cqa-border-[#E5E7EB]\" (click)=\"onLoopActionClick($event)\">\n <span class=\"cqa-font-medium cqa-text-[#6B7280]\">{{ item.key }}:</span>\n <span class=\"cqa-text-[#111827]\">{{ item.value }}</span>\n </span>\n </ng-container>\n </div>\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-ml-auto\">\n <!-- Steps Summary -->\n <div\n class=\"cqa-ml-auto cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-rounded-lg cqa-py-0.5 cqa-px-2 cqa-text-[#0A0A0A] cqa-text-[12px] cqa-leading-[15px]\">\n {{ getStepsSummary() }}\n </div>\n\n <!-- 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-2 cqa-no-underline cqa-ml-auto\">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 <!-- Action Icons: Edit, Link, Duplicate, Delete (show on hover; hidden when inside step-group) -->\n <div *ngIf=\"!isInsideStepGroup && !isReorder\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-3 cqa-px-[7px]\">\n <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\"\n class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M7 11.6666H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M9.55208 2.1128C9.7843 1.88058 10.0993 1.75012 10.4277 1.75012C10.7561 1.75012 11.071 1.88058 11.3033 2.1128C11.5355 2.34502 11.6659 2.65998 11.6659 2.98838C11.6659 3.31679 11.5355 3.63175 11.3033 3.86397L4.29742 10.8704C4.15864 11.0092 3.9871 11.1107 3.79867 11.1656L2.12333 11.6544C2.07314 11.669 2.01993 11.6699 1.96928 11.6569C1.91863 11.6439 1.8724 11.6176 1.83543 11.5806C1.79846 11.5437 1.7721 11.4974 1.75913 11.4468C1.74615 11.3961 1.74703 11.3429 1.76167 11.2927L2.2505 9.61738C2.30546 9.42916 2.40698 9.25783 2.54567 9.11922L9.55208 2.1128Z\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </button>\n <!-- <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\"\n class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\"\n stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\"\n stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button> -->\n <button\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\n d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n <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\"\n class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M1.75 3.5H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M11.0827 3.5V11.6667C11.0827 12.25 10.4993 12.8333 9.91602 12.8333H4.08268C3.49935 12.8333 2.91602 12.25 2.91602 11.6667V3.5\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M4.66602 3.49996V2.33329C4.66602 1.74996 5.24935 1.16663 5.83268 1.16663H8.16602C8.74935 1.16663 9.33268 1.74996 9.33268 2.33329V3.49996\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M5.83398 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M8.16602 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button>\n </div>\n <!-- 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\n <!-- Expanded Content with Nested Steps (renderer dispatches by step type, n-level nesting) -->\n <div *ngIf=\"expanded\" class=\"cqa-flex cqa-flex-col\">\n <!-- START Marker (centered with decorative lines) -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-py-1 cqa-px-4 cqa-bg-[#DBEAFE80]\" style=\"border-top: 1px solid #BEDBFF;\">\n <span class=\"cqa-flex-1 cqa-self-stretch cqa-border-t cqa-border-dashed cqa-border-[#1C398E] cqa-opacity-40\" style=\"min-width: 20px;\"></span>\n <span class=\"cqa-text-[#1C398E] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-whitespace-nowrap\">{{ getStartLabel() }}</span>\n <span class=\"cqa-flex-1 cqa-self-stretch cqa-border-t cqa-border-dashed cqa-border-[#1C398E] cqa-opacity-40\" style=\"min-width: 20px;\"></span>\n </div>\n <div *ngIf=\"!isReorder\" class=\"cqa-flex cqa-flex-col\">\n <cqa-test-case-details-renderer *ngFor=\"let step of nestedSteps; let i = index\" [step]=\"step\" [index]=\"i\"\n [selected]=\"$any(step).selected\"\n [isNested]=\"true\" [isInsideLoop]=\"true\" [isInsideStepGroup]=\"isInsideStepGroup\" [isReorder]=\"isReorder\"\n [nestingLevel]=\"nestingLevel + 1\"\n [addStepBetween]=\"addStepBetween\"\n [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n (nestedStepChange)=\"onNestedStepChange($event.step, $event.index)\"\n (addStep)=\"onAddStep()\" (addStepForLoop)=\"onAddStepForLoopFromNested($event)\" (deleteStep)=\"onDeleteStep($event)\"\n (addStepForBranch)=\"addStepForBranch.emit($event)\" (deleteStepWithBranch)=\"deleteStepWithBranch.emit($event)\"\n (toggleExpanded)=\"onNestedToggleExpanded($event, step, i)\"\n (groupNameChange)=\"$any(step).groupName = $event; onNestedStepChange(step, i)\"\n (descriptionChange)=\"$any(step).description = $event; onNestedStepChange(step, i)\"\n (reusableChange)=\"$any(step).reusable = $event; onNestedStepChange(step, i)\"\n (openExternal)=\"onNestedOpenExternal($event)\" (edit)=\"onNestedEdit($event)\"\n (link)=\"onNestedStepChange(step, i)\" (duplicate)=\"onNestedDuplicate($event, step)\" (delete)=\"onDeleteStep($event, i)\"\n (viewDetails)=\"viewDetails.emit($event)\"\n (conditionChange)=\"$any(step).condition = $event; onNestedStepChange(step, i)\"\n (branchStepChange)=\"onNestedStepChange(step, i)\" (addBranch)=\"onNestedConditionAddBranch($any(step), i)\"\n (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event, i)\"\n (testDataProfileChange)=\"$any(step).testDataProfile = $event; onNestedStepChange(step, i)\"\n (startStepChange)=\"$any(step).startStep = $event; onNestedStepChange(step, i)\"\n (endStepChange)=\"$any(step).endStep = $event; onNestedStepChange(step, i)\"\n (maxIterationsChange)=\"$any(step).maxIterations = $event; onNestedStepChange(step, i)\"\n (eventTypeChange)=\"$any(step).eventType = $event; onNestedStepChange(step, i)\"\n (parameterChange)=\"onNestedStepChange(step, i)\"\n (selectionChange)=\"$any(step).selected = $event; onNestedStepChange(step, i)\"\n (loadMoreDataProfiles)=\"loadMoreDataProfiles.emit($event)\"\n (searchDataProfiles)=\"searchDataProfiles.emit($event)\"\n (dndDropInZone)=\"dndDropInZone.emit($event)\"\n (clickAction)=\"clickAction.emit($event)\"\n (editInDepth)=\"editInDepth.emit($event)\"\n (addStepBetweenClick)=\"addStepBetweenClick.emit($event)\">\n </cqa-test-case-details-renderer>\n </div>\n <div *ngIf=\"isReorder\" class=\"cqa-flex cqa-flex-col nested-step-drop-list\"\n [style.min-height.px]=\"nestedSteps.length === 0 ? 52 : null\"\n [dndDropzone]=\"['step']\"\n dndEffectAllowed=\"move\"\n dndDragoverClass=\"dndDragover\"\n (dndDrop)=\"onDndDrop($event)\">\n <div dndPlaceholderRef class=\"step-drag-placeholder-nested cqa-my-1 cqa-min-h-[50px] cqa-border-2 cqa-border-dashed cqa-border-[#3F43EE] cqa-rounded cqa-bg-[rgba(63,67,238,0.08)] cqa-flex cqa-items-center cqa-justify-center cqa-text-[#3F43EE] cqa-text-xs\">Drop here</div>\n <div *ngFor=\"let step of nestedSteps; let i = index\" class=\"nested-step-drag-item\"\n [dndDraggable]=\"step\"\n dndEffectAllowed=\"move\"\n dndType=\"step\">\n <cqa-test-case-details-renderer [step]=\"step\" [index]=\"i\"\n [selected]=\"$any(step).selected\"\n [isNested]=\"true\" [isInsideLoop]=\"true\" [isInsideStepGroup]=\"isInsideStepGroup\" [isReorder]=\"isReorder\"\n [nestingLevel]=\"nestingLevel + 1\"\n [addStepBetweenAbove]=\"addStepBetweenAbove\"\n [addStepBetweenBelow]=\"addStepBetweenBelow\"\n [addStepBetween]=\"addStepBetween\"\n [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n (nestedStepChange)=\"onNestedStepChange($event.step, $event.index)\"\n (addStep)=\"onAddStep()\" (addStepForLoop)=\"onAddStepForLoopFromNested($event)\" (deleteStep)=\"onDeleteStep($event)\"\n (addStepForBranch)=\"addStepForBranch.emit($event)\" (deleteStepWithBranch)=\"deleteStepWithBranch.emit($event)\"\n (toggleExpanded)=\"onNestedToggleExpanded($event, step, i)\"\n (groupNameChange)=\"$any(step).groupName = $event; onNestedStepChange(step, i)\"\n (descriptionChange)=\"$any(step).description = $event; onNestedStepChange(step, i)\"\n (reusableChange)=\"$any(step).reusable = $event; onNestedStepChange(step, i)\"\n (openExternal)=\"onNestedOpenExternal($event)\" (edit)=\"onNestedStepChange(step, i)\"\n (link)=\"onNestedStepChange(step, i)\" (duplicate)=\"onNestedStepChange(step, i)\" (delete)=\"onDeleteStep($event, i)\"\n (viewDetails)=\"viewDetails.emit($event)\"\n (conditionChange)=\"$any(step).condition = $event; onNestedStepChange(step, i)\"\n (branchStepChange)=\"onNestedStepChange(step, i)\" (addBranch)=\"onNestedConditionAddBranch($any(step), i)\"\n (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event, i)\"\n (testDataProfileChange)=\"$any(step).testDataProfile = $event; onNestedStepChange(step, i)\"\n (startStepChange)=\"$any(step).startStep = $event; onNestedStepChange(step, i)\"\n (endStepChange)=\"$any(step).endStep = $event; onNestedStepChange(step, i)\"\n (maxIterationsChange)=\"$any(step).maxIterations = $event; onNestedStepChange(step, i)\"\n (eventTypeChange)=\"$any(step).eventType = $event; onNestedStepChange(step, i)\"\n (parameterChange)=\"onNestedStepChange(step, i)\"\n (selectionChange)=\"$any(step).selected = $event; onNestedStepChange(step, i)\"\n (loadMoreDataProfiles)=\"loadMoreDataProfiles.emit($event)\"\n (searchDataProfiles)=\"searchDataProfiles.emit($event)\"\n (dndDropInZone)=\"dndDropInZone.emit($event)\"\n (clickAction)=\"clickAction.emit($event)\"\n (editInDepth)=\"editInDepth.emit($event)\"\n (addStepBetweenClick)=\"addStepBetweenClick.emit($event)\">\n </cqa-test-case-details-renderer>\n </div>\n </div>\n\n <!-- Empty loop: show plus icon on hover when expanded and no steps.\n When rendered inside a step group or when reordering, hide this Add button entirely. -->\n <div *ngIf=\"nestedSteps.length === 0 && !isInsideStepGroup && !isReorder\" class=\"loop-step-empty cqa-min-h-[52px] cqa-flex cqa-items-center cqa-justify-center cqa-pl-4 cqa-pr-4\">\n <button type=\"button\" (click)=\"onAddStepEmpty(); $event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\" title=\"Add step\"\n class=\"loop-step-empty-add\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect x=\"1\" y=\"1\" width=\"21.1822\" height=\"22\" rx=\"10.5911\" fill=\"white\" />\n <rect x=\"1\" y=\"1\" width=\"21.1822\" height=\"22\" rx=\"10.5911\" stroke=\"#3F43EE\" stroke-width=\"2\" />\n <path d=\"M8.5 12H15.5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M12 8.5V15.5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </button>\n </div>\n\n <!-- END Marker (centered with decorative lines) -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-py-1 cqa-px-4 cqa-bg-[#DBEAFE80]\" style=\"border-top: 1px solid #BEDBFF;\">\n <span class=\"cqa-flex-1 cqa-self-stretch cqa-border-t cqa-border-dashed cqa-border-[#1C398E] cqa-opacity-40\" style=\"min-width: 20px;\"></span>\n <span class=\"cqa-text-[#1C398E] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-whitespace-nowrap\">{{ getEndLabel() }}</span>\n <span class=\"cqa-flex-1 cqa-self-stretch cqa-border-t cqa-border-dashed cqa-border-[#1C398E] cqa-opacity-40\" style=\"min-width: 20px;\"></span>\n </div>\n </div>\n</div>" }]
|
|
24857
|
+
], template: "<div class=\"loop-step-row cqa-flex cqa-flex-col\">\n <!-- Inline Edit Mode: stop propagation so dropdown/select interactions don't bubble and collapse the step or start drag -->\n <div *ngIf=\"isEditing\" class=\"cqa-py-2.5 cqa-px-4 cqa-flex cqa-flex-col cqa-gap-3\" (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-justify-between\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-grow cqa-flex-wrap cqa-min-w-0\">\n <!-- Loop Type Label -->\n <div class=\"cqa-font-semibold cqa-text-[#1C398E] cqa-text-[12px] cqa-leading-[15px]\">\n {{ getLoopTypeLabel() }}\n </div>\n\n <!-- FOR LOOP inline edit: cqa-dynamic-select (same usage as default stories) -->\n <ng-container *ngIf=\"loopType === 'for'\">\n <!-- First select: width 216.25px, height 36px, gap 4px, opacity 1 -->\n <cqa-dynamic-select [form]=\"editForm\" [config]=\"forOptionTypeSelectConfig\"\n class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-dynamic-select>\n <cqa-dynamic-select [form]=\"editForm\" [config]=\"testDataProfileSelectConfig\"\n class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-dynamic-select>\n <cqa-dynamic-select [form]=\"editForm\" [config]=\"startStepSelectConfig\"\n class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-dynamic-select>\n <cqa-dynamic-select [form]=\"editForm\" [config]=\"endStepSelectConfig\"\n class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-dynamic-select>\n </ng-container>\n\n <!-- WHILE LOOP inline edit: cqa-autocomplete + template variables (same as condition-step) -->\n <ng-container *ngIf=\"isWhileLoop()\">\n <cqa-autocomplete\n *ngIf=\"editForm\"\n [options]=\"whileConditionAutocompleteOptions\"\n [value]=\"whileConditionDisplayValue\"\n (valueChange)=\"onEditFormFieldChange('condition', $event)\"\n (optionSelect)=\"onConditionSelect($event)\"\n placeholder=\"Select condition\"\n [fullWidth]=\"true\"\n class=\"cqa-w-full cqa-max-w-[216px]\">\n </cqa-autocomplete>\n <!-- Template variables hidden in while loop - use Edit In depth to configure -->\n </ng-container>\n\n <!-- Edit In depth link -->\n <a href=\"#\" *ngIf=\"isWhileLoop()\" (click)=\"onEditInDepth(); $event.preventDefault()\"\n class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-[2px] cqa-no-underline\">\n Edit In depth\n <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\"\n fill=\"#3F43EE\" />\n </svg>\n </a>\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-gap-1.5\">\n <!-- Cancel / Apply -->\n <cqa-button variant=\"outlined\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Cancel'\"\n (clicked)=\"onEditCancel()\"></cqa-button>\n <cqa-button variant=\"filled\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Apply'\"\n (clicked)=\"onEditApply()\"></cqa-button>\n </div>\n </div>\n </div>\n\n <!-- Loop Header (normal view when not editing) -->\n <div *ngIf=\"!isEditing\"\n [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 cqa-pr-4'\"\n [style.padding-left.px]=\"getRowPaddingLeftPx()\"\n [style.border-top]=\"isInsideStepGroup ? '1px solid #BEDBFF' : null\"\n style=\"border-bottom: 1px solid #E5E7EB;\">\n <!-- Drag handle / checkbox \u2014 omit entirely when inside step group to avoid phantom flex gap -->\n <div *ngIf=\"!isInsideStepGroup\" class=\"cqa-inline-flex cqa-items-center\">\n <!-- Drag Handle Icon (when isReorder is true) -->\n <div *ngIf=\"isReorder\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n </svg>\n </div>\n <!-- Checkbox (when not reordering) -->\n <label *ngIf=\"!isReorder\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative cqa-mr-2\">\n <input type=\"checkbox\"\n [ngModel]=\"selected\"\n (ngModelChange)=\"onSelectionChange($event)\"\n class=\"cqa-h-4 cqa-w-4 cqa-cursor-pointer cqa-transition-all cqa-appearance-none cqa-rounded shadow hover:cqa-shadow-md cqa-border cqa-border-solid cqa-border-slate-300 cqa-flex-shrink-0\"\n [class.cqa-bg-[#3F43EE]]=\"selected\"\n [class.cqa-border-[#3F43EE]]=\"selected\"\n id=\"check-loop-step\" />\n <span class=\"cqa-absolute cqa-text-white cqa-top-1/2 cqa-left-1/2 cqa--translate-x-1/2 cqa--translate-y-1/2 cqa-pointer-events-none cqa-flex cqa-items-center cqa-justify-center\"\n [class.cqa-opacity-0]=\"!selected\"\n [class.cqa-opacity-100]=\"selected\">\n <svg width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 3.125L4.5 8.625L2 6.125\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </span>\n </label>\n </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 <!-- Expand/Collapse Icon -->\n <button type=\"button\" (click)=\"onToggleExpanded()\" class=\"cqa-p-0\">\n <svg [class.cqa-rotate-180]=\"!expanded\" class=\"cqa-transition-transform\" width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M12 10L8 6L4 10\" stroke=\"#6B7280\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button>\n\n <!-- Loop Icon -->\n <div *ngIf=\"loopType === 'for'\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M11.334 1.33325L14.0007 3.99992L11.334 6.66659\" stroke=\"#1C398E\" stroke-width=\"1.33333\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M2 7.33333V6.66667C2 5.95942 2.28095 5.28115 2.78105 4.78105C3.28115 4.28095 3.95942 4 4.66667 4H14\"\n stroke=\"#1C398E\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M4.66667 14.6666L2 11.9999L4.66667 9.33325\" stroke=\"#1C398E\" stroke-width=\"1.33333\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M14 8.66675V9.33341C14 10.0407 13.719 10.7189 13.219 11.219C12.7189 11.7191 12.0406 12.0001 11.3333 12.0001H2\"\n stroke=\"#1C398E\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </div>\n <div *ngIf=\"loopType === 'while'\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M11.334 1.33325L14.0007 3.99992L11.334 6.66659\" stroke=\"#59168B\" stroke-width=\"1.33333\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M2 7.33333V6.66667C2 5.95942 2.28095 5.28115 2.78105 4.78105C3.28115 4.28095 3.95942 4 4.66667 4H14\"\n stroke=\"#59168B\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M4.66667 14.6666L2 11.9999L4.66667 9.33325\" stroke=\"#59168B\" stroke-width=\"1.33333\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M14 8.66675V9.33341C14 10.0407 13.719 10.7189 13.219 11.219C12.7189 11.7191 12.0406 12.0001 11.3333 12.0001H2\"\n stroke=\"#59168B\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </div>\n\n <!-- Loop Type Label -->\n <span class=\"cqa-font-semibold cqa-text-[#1C398E] cqa-text-[12px] cqa-leading-none\">\n {{ getLoopTypeLabel() }}\n </span>\n\n <!-- For Loop Display: flex-col so profile/range each get a full row; no ml-2 since parent gap-3 handles spacing -->\n <div *ngIf=\"loopType === 'for' && (hasTestDataProfile() || hasStartValue() || hasEndValue())\" class=\"cqa-flex cqa-flex-col cqa-gap-y-1 cqa-flex-1 cqa-min-w-0\">\n <div class=\"cqa-flex cqa-flex-wrap cqa-items-center cqa-gap-x-2 cqa-gap-y-1 cqa-min-w-0\">\n <span *ngIf=\"getForLoopProfileDisplay()\" class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px] cqa-action-format cqa-inline-block cqa-max-w-full cqa-overflow-hidden\" [innerHTML]=\"getForLoopProfileDisplay()\" (click)=\"onLoopActionClick($event)\"></span>\n <span *ngIf=\"getForLoopRangeDisplay()\" class=\"for-loop-range-row cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px] cqa-action-format cqa-inline-block cqa-max-w-full cqa-overflow-hidden\" [innerHTML]=\"getForLoopRangeDisplay()\" (click)=\"onLoopActionClick($event)\"></span>\n </div>\n <div *ngIf=\"getLoopEventDetailsForDisplay().length > 0\" class=\"cqa-flex cqa-flex-wrap cqa-gap-2 cqa-items-center\">\n <span *ngFor=\"let item of getLoopEventDetailsForDisplay()\" class=\"cqa-inline-flex cqa-items-center cqa-gap-1 cqa-py-0.5 cqa-px-2 cqa-rounded cqa-text-[12px] cqa-leading-[15px] cqa-bg-[#F3F4F6] cqa-text-[#374151] cqa-border cqa-border-solid cqa-border-[#E5E7EB]\" (click)=\"onLoopActionClick($event)\">\n <span class=\"cqa-font-medium cqa-text-[#6B7280]\">{{ item.key }}:</span>\n <span class=\"cqa-text-[#111827] cqa-break-words\">{{ item.value }}</span>\n </span>\n </div>\n </div>\n\n <!-- While Loop Condition (only show if condition exists) - same styling as condition step -->\n <div *ngIf=\"isWhileLoop() && condition\" class=\"cqa-flex cqa-flex-col cqa-gap-2 cqa-flex-1 cqa-min-w-0\">\n <!-- While condition text (separate block) -->\n <div class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px] cqa-w-full !cqa-inline-flex cqa-items-center cqa-flex-wrap cqa-action-format\" [innerHTML]=\"getConditionDisplay()\" (click)=\"onLoopActionClick($event)\"></div>\n \n\n <!-- While event details chips (separate block) -->\n <div class=\"cqa-flex cqa-flex-wrap cqa-items-center cqa-gap-2\">\n <span *ngIf=\"maxIterations != null && maxIterations > 0\" class=\"cqa-inline-flex cqa-items-center cqa-gap-1 cqa-py-0.5 cqa-px-2 cqa-rounded cqa-text-[12px] cqa-leading-[15px] cqa-bg-[#F3F4F6] cqa-text-[#374151] cqa-border cqa-border-solid cqa-border-[#E5E7EB]\" (click)=\"onLoopActionClick($event)\" data-key=\"maxIterations\" data-event-key=\"maxIterations\">\n <span class=\"cqa-font-medium cqa-text-[#6B7280]\">max iterations:</span>\n <span class=\"cqa-text-[#111827]\">{{ maxIterations }}</span>\n </span>\n <ng-container *ngIf=\"getLoopEventDetailsForDisplay().length > 0\">\n <span *ngFor=\"let item of getLoopEventDetailsForDisplay()\" class=\"cqa-inline-flex cqa-items-center cqa-gap-1 cqa-py-0.5 cqa-px-2 cqa-rounded cqa-text-[12px] cqa-leading-[15px] cqa-bg-[#F3F4F6] cqa-text-[#374151] cqa-border cqa-border-solid cqa-border-[#E5E7EB]\" (click)=\"onLoopActionClick($event)\">\n <span class=\"cqa-font-medium cqa-text-[#6B7280]\">{{ item.key }}:</span>\n <span class=\"cqa-text-[#111827]\">{{ item.value }}</span>\n </span>\n </ng-container>\n </div>\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-ml-auto\">\n <!-- Action Icons: Edit, Link, Duplicate, Delete (show on hover; hidden when inside step-group) \u2014 before steps summary -->\n <div *ngIf=\"!isInsideStepGroup && !isReorder\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-3 cqa-px-[7px]\">\n <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\"\n class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M7 11.6666H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M9.55208 2.1128C9.7843 1.88058 10.0993 1.75012 10.4277 1.75012C10.7561 1.75012 11.071 1.88058 11.3033 2.1128C11.5355 2.34502 11.6659 2.65998 11.6659 2.98838C11.6659 3.31679 11.5355 3.63175 11.3033 3.86397L4.29742 10.8704C4.15864 11.0092 3.9871 11.1107 3.79867 11.1656L2.12333 11.6544C2.07314 11.669 2.01993 11.6699 1.96928 11.6569C1.91863 11.6439 1.8724 11.6176 1.83543 11.5806C1.79846 11.5437 1.7721 11.4974 1.75913 11.4468C1.74615 11.3961 1.74703 11.3429 1.76167 11.2927L2.2505 9.61738C2.30546 9.42916 2.40698 9.25783 2.54567 9.11922L9.55208 2.1128Z\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </button>\n <!-- <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\"\n class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\"\n stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\"\n stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button> -->\n <button\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\n d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n <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\"\n class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M1.75 3.5H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M11.0827 3.5V11.6667C11.0827 12.25 10.4993 12.8333 9.91602 12.8333H4.08268C3.49935 12.8333 2.91602 12.25 2.91602 11.6667V3.5\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M4.66602 3.49996V2.33329C4.66602 1.74996 5.24935 1.16663 5.83268 1.16663H8.16602C8.74935 1.16663 9.33268 1.74996 9.33268 2.33329V3.49996\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M5.83398 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M8.16602 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button>\n </div>\n\n <!-- Steps Summary (after action icons) -->\n <div\n 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-font-semibold\">\n {{ getStepsSummary() }}\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>\n\n <!-- Expanded Content with Nested Steps (renderer dispatches by step type, n-level nesting) -->\n <div *ngIf=\"expanded\" class=\"cqa-flex cqa-flex-col\">\n <!-- Nested inside a step group with no steps: single empty state (no START/END) -->\n <div\n *ngIf=\"isInsideStepGroup && nestedSteps.length === 0\"\n class=\"cqa-grid cqa-w-full cqa-place-items-center cqa-gap-0 cqa-py-[8px] cqa-px-4 cqa-border-0 cqa-text-center cqa-text-[#1C398E] cqa-font-semibold cqa-text-[12px] cqa-leading-[15px] cqa-bg-[rgba(219,234,254,0.5)]\">\n No steps added\n </div>\n\n <!-- Empty loop (not in step group): add icon only \u2014 no START/END until at least one nested step exists -->\n <div *ngIf=\"nestedSteps.length === 0 && !isInsideStepGroup && !isReorder\" class=\"loop-step-empty cqa-min-h-[52px] cqa-flex cqa-items-center cqa-justify-center cqa-pl-4 cqa-pr-4\">\n <button type=\"button\" (click)=\"onAddStepEmpty(); $event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\" title=\"Add step\"\n class=\"loop-step-empty-add\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect x=\"1\" y=\"1\" width=\"21.1822\" height=\"22\" rx=\"10.5911\" fill=\"white\" />\n <rect x=\"1\" y=\"1\" width=\"21.1822\" height=\"22\" rx=\"10.5911\" stroke=\"#3F43EE\" stroke-width=\"2\" />\n <path d=\"M8.5 12H15.5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M12 8.5V15.5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </button>\n </div>\n\n <!-- Reorder mode, empty body: drop zone only \u2014 no START/END (not used when nested in step group; that case shows \"No steps added\" above) -->\n <div *ngIf=\"nestedSteps.length === 0 && isReorder && !isInsideStepGroup\" class=\"cqa-flex cqa-flex-col nested-step-drop-list\"\n [style.min-height.px]=\"52\"\n [dndDropzone]=\"['step']\"\n dndEffectAllowed=\"move\"\n dndDragoverClass=\"dndDragover\"\n (dndDrop)=\"onDndDrop($event)\">\n <div dndPlaceholderRef class=\"step-drag-placeholder-nested cqa-my-1 cqa-min-h-[50px] cqa-border-2 cqa-border-dashed cqa-border-[#3F43EE] cqa-rounded cqa-bg-[rgba(63,67,238,0.08)] cqa-flex cqa-items-center cqa-justify-center cqa-text-[#3F43EE] cqa-text-xs\">Drop here</div>\n </div>\n\n <!-- At least one nested step: START marker, body, END marker -->\n <ng-container *ngIf=\"nestedSteps.length > 0\">\n <!-- START Marker (centered label) -->\n <div class=\"cqa-grid cqa-w-full cqa-place-items-center cqa-gap-0 cqa-py-[8px] cqa-px-4 cqa-border-0 cqa-bg-[rgba(219,234,254,0.5)]\">\n <span class=\"cqa-text-center cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold cqa-whitespace-nowrap cqa-bg-transparent cqa-text-[#1C398E]\">{{ getStartLabel() }} : {{ getLoopMarkerStartStepDisplay() }}</span>\n </div>\n <div *ngIf=\"!isReorder\" class=\"cqa-flex cqa-flex-col\">\n <cqa-test-case-details-renderer *ngFor=\"let step of nestedSteps; let i = index\" [step]=\"step\" [index]=\"i\"\n [selected]=\"$any(step).selected\"\n [isNested]=\"true\" [isInsideLoop]=\"true\" [isInsideStepGroup]=\"isInsideStepGroup\" [isReorder]=\"isReorder\"\n [nestingLevel]=\"nestingLevel + 1\"\n [addStepBetween]=\"addStepBetween\"\n [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n [currentTestCaseId]=\"currentTestCaseId\"\n (nestedStepChange)=\"onNestedStepChange($event.step, $event.index)\"\n (addStep)=\"onAddStep()\" (addStepForLoop)=\"onAddStepForLoopFromNested($event)\" (deleteStep)=\"onDeleteStep($event)\"\n (addStepForBranch)=\"addStepForBranch.emit($event)\" (deleteStepWithBranch)=\"deleteStepWithBranch.emit($event)\"\n (toggleExpanded)=\"onNestedToggleExpanded($event, step, i)\"\n (groupNameChange)=\"$any(step).groupName = $event; onNestedStepChange(step, i)\"\n (descriptionChange)=\"$any(step).description = $event; onNestedStepChange(step, i)\"\n (reusableChange)=\"$any(step).reusable = $event; onNestedStepChange(step, i)\"\n (openExternal)=\"onNestedOpenExternal($event)\" (edit)=\"onNestedEdit($event)\"\n (link)=\"onNestedStepChange(step, i)\" (duplicate)=\"onNestedDuplicate($event, step)\" (delete)=\"onDeleteStep($event, i)\"\n (viewDetails)=\"viewDetails.emit($event)\"\n (conditionChange)=\"$any(step).condition = $event; onNestedStepChange(step, i)\"\n (branchStepChange)=\"onNestedStepChange(step, i)\" (addBranch)=\"onNestedConditionAddBranch($any(step), i)\"\n (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event, i)\"\n (testDataProfileChange)=\"$any(step).testDataProfile = $event; onNestedStepChange(step, i)\"\n (startStepChange)=\"$any(step).startStep = $event; onNestedStepChange(step, i)\"\n (endStepChange)=\"$any(step).endStep = $event; onNestedStepChange(step, i)\"\n (maxIterationsChange)=\"$any(step).maxIterations = $event; onNestedStepChange(step, i)\"\n (eventTypeChange)=\"$any(step).eventType = $event; onNestedStepChange(step, i)\"\n (parameterChange)=\"onNestedStepChange(step, i)\"\n (selectionChange)=\"$any(step).selected = $event; onNestedStepChange(step, i)\"\n (loadMoreDataProfiles)=\"loadMoreDataProfiles.emit($event)\"\n (searchDataProfiles)=\"searchDataProfiles.emit($event)\"\n (dndDropInZone)=\"dndDropInZone.emit($event)\"\n (clickAction)=\"clickAction.emit($event)\"\n (editInDepth)=\"editInDepth.emit($event)\"\n (addStepBetweenClick)=\"addStepBetweenClick.emit($event)\">\n </cqa-test-case-details-renderer>\n </div>\n <div *ngIf=\"isReorder\" class=\"cqa-flex cqa-flex-col nested-step-drop-list\"\n [style.min-height.px]=\"nestedSteps.length === 0 ? 52 : null\"\n [dndDropzone]=\"['step']\"\n dndEffectAllowed=\"move\"\n dndDragoverClass=\"dndDragover\"\n (dndDrop)=\"onDndDrop($event)\">\n <div dndPlaceholderRef class=\"step-drag-placeholder-nested cqa-my-1 cqa-min-h-[50px] cqa-border-2 cqa-border-dashed cqa-border-[#3F43EE] cqa-rounded cqa-bg-[rgba(63,67,238,0.08)] cqa-flex cqa-items-center cqa-justify-center cqa-text-[#3F43EE] cqa-text-xs\">Drop here</div>\n <div *ngFor=\"let step of nestedSteps; let i = index\" class=\"nested-step-drag-item\"\n [dndDraggable]=\"step\"\n dndEffectAllowed=\"move\"\n dndType=\"step\">\n <cqa-test-case-details-renderer [step]=\"step\" [index]=\"i\"\n [selected]=\"$any(step).selected\"\n [isNested]=\"true\" [isInsideLoop]=\"true\" [isInsideStepGroup]=\"isInsideStepGroup\" [isReorder]=\"isReorder\"\n [nestingLevel]=\"nestingLevel + 1\"\n [addStepBetweenAbove]=\"addStepBetweenAbove\"\n [addStepBetweenBelow]=\"addStepBetweenBelow\"\n [addStepBetween]=\"addStepBetween\"\n [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n [currentTestCaseId]=\"currentTestCaseId\"\n (nestedStepChange)=\"onNestedStepChange($event.step, $event.index)\"\n (addStep)=\"onAddStep()\" (addStepForLoop)=\"onAddStepForLoopFromNested($event)\" (deleteStep)=\"onDeleteStep($event)\"\n (addStepForBranch)=\"addStepForBranch.emit($event)\" (deleteStepWithBranch)=\"deleteStepWithBranch.emit($event)\"\n (toggleExpanded)=\"onNestedToggleExpanded($event, step, i)\"\n (groupNameChange)=\"$any(step).groupName = $event; onNestedStepChange(step, i)\"\n (descriptionChange)=\"$any(step).description = $event; onNestedStepChange(step, i)\"\n (reusableChange)=\"$any(step).reusable = $event; onNestedStepChange(step, i)\"\n (openExternal)=\"onNestedOpenExternal($event)\" (edit)=\"onNestedStepChange(step, i)\"\n (link)=\"onNestedStepChange(step, i)\" (duplicate)=\"onNestedStepChange(step, i)\" (delete)=\"onDeleteStep($event, i)\"\n (viewDetails)=\"viewDetails.emit($event)\"\n (conditionChange)=\"$any(step).condition = $event; onNestedStepChange(step, i)\"\n (branchStepChange)=\"onNestedStepChange(step, i)\" (addBranch)=\"onNestedConditionAddBranch($any(step), i)\"\n (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event, i)\"\n (testDataProfileChange)=\"$any(step).testDataProfile = $event; onNestedStepChange(step, i)\"\n (startStepChange)=\"$any(step).startStep = $event; onNestedStepChange(step, i)\"\n (endStepChange)=\"$any(step).endStep = $event; onNestedStepChange(step, i)\"\n (maxIterationsChange)=\"$any(step).maxIterations = $event; onNestedStepChange(step, i)\"\n (eventTypeChange)=\"$any(step).eventType = $event; onNestedStepChange(step, i)\"\n (parameterChange)=\"onNestedStepChange(step, i)\"\n (selectionChange)=\"$any(step).selected = $event; onNestedStepChange(step, i)\"\n (loadMoreDataProfiles)=\"loadMoreDataProfiles.emit($event)\"\n (searchDataProfiles)=\"searchDataProfiles.emit($event)\"\n (dndDropInZone)=\"dndDropInZone.emit($event)\"\n (clickAction)=\"clickAction.emit($event)\"\n (editInDepth)=\"editInDepth.emit($event)\"\n (addStepBetweenClick)=\"addStepBetweenClick.emit($event)\">\n </cqa-test-case-details-renderer>\n </div>\n </div>\n\n <!-- END Marker (centered label) -->\n <div class=\"cqa-grid cqa-w-full cqa-place-items-center cqa-gap-0 cqa-py-[8px] cqa-px-4 cqa-border-0 cqa-bg-[rgba(219,234,254,0.5)]\">\n <span class=\"cqa-text-center cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold cqa-whitespace-nowrap cqa-bg-transparent cqa-text-[#1C398E]\">{{ getEndLabel() }} : {{ getLoopMarkerEndStepDisplay() }}</span>\n </div>\n </ng-container>\n </div>\n</div>" }]
|
|
24813
24858
|
}], ctorParameters: function () { return [{ type: i1$1.FormBuilder }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { config: [{
|
|
24814
24859
|
type: Input
|
|
24815
24860
|
}], id: [{
|
|
@@ -24854,6 +24899,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
24854
24899
|
type: Input
|
|
24855
24900
|
}], naturalTextActionsOptions: [{
|
|
24856
24901
|
type: Input
|
|
24902
|
+
}], currentTestCaseId: [{
|
|
24903
|
+
type: Input
|
|
24857
24904
|
}], setConditionTemplateVariables: [{
|
|
24858
24905
|
type: Input
|
|
24859
24906
|
}], addStepBetweenAbove: [{
|
|
@@ -25177,7 +25224,7 @@ class TestCaseConditionStepComponent {
|
|
|
25177
25224
|
this.templateVariablesForm = this.fb.group({});
|
|
25178
25225
|
}
|
|
25179
25226
|
}
|
|
25180
|
-
buildElseIfBranch(index) {
|
|
25227
|
+
buildElseIfBranch(index, triggerBranchIndex = 0) {
|
|
25181
25228
|
// Initialize ELSE IF form with empty values or from existing ELSE IF branch if available
|
|
25182
25229
|
// Use getAllBranchesFlat to include chained nextBranch ELSE IFs
|
|
25183
25230
|
const elseIfBranches = this.getAllBranchesFlat().filter(b => b.type === 'else-if');
|
|
@@ -25191,13 +25238,22 @@ class TestCaseConditionStepComponent {
|
|
|
25191
25238
|
conditionRight: [right],
|
|
25192
25239
|
});
|
|
25193
25240
|
const templateVariablesForm = this.fb.group({});
|
|
25241
|
+
// Compute which branch ID this new ELSE IF should be inserted after
|
|
25242
|
+
const triggerBranch = this.branches && this.branches.length > triggerBranchIndex
|
|
25243
|
+
? this.branches[triggerBranchIndex]
|
|
25244
|
+
: null;
|
|
25245
|
+
const insertAfterBranchId = triggerBranch?.id != null
|
|
25246
|
+
? String(triggerBranch.id)
|
|
25247
|
+
: (this.config.id != null ? String(this.config.id) : undefined);
|
|
25194
25248
|
return {
|
|
25195
25249
|
id: `else-if-${Date.now()}-${Math.random()}`,
|
|
25196
25250
|
form,
|
|
25197
25251
|
selectedTemplate: null,
|
|
25198
25252
|
templateVariables: [],
|
|
25199
25253
|
templateVariablesForm,
|
|
25200
|
-
snapshot: { conditionLeft: left, conditionOperator: operator, conditionRight: right }
|
|
25254
|
+
snapshot: { conditionLeft: left, conditionOperator: operator, conditionRight: right },
|
|
25255
|
+
triggerBranchIndex,
|
|
25256
|
+
insertAfterBranchId,
|
|
25201
25257
|
};
|
|
25202
25258
|
}
|
|
25203
25259
|
buildOperatorSelectConfig() {
|
|
@@ -25396,8 +25452,9 @@ class TestCaseConditionStepComponent {
|
|
|
25396
25452
|
const configBranch = this.getBranchById(branchId);
|
|
25397
25453
|
const branchIndex = this.getBranchIndexById(branchId);
|
|
25398
25454
|
const isNewBranch = typeof branchId === 'string' && branchId.startsWith('else-if-');
|
|
25399
|
-
// Determine insertion point
|
|
25400
|
-
|
|
25455
|
+
// Determine insertion point: use the branch-specific id stored when the form was created,
|
|
25456
|
+
// falling back to the context-based helper for backward compatibility.
|
|
25457
|
+
const insertAfterBranchId = branch.insertAfterBranchId ?? this.getInsertAfterBranchId();
|
|
25401
25458
|
setTimeout(() => this.onEditInDepth(fullTemplate, configBranch ?? undefined, branchIndex >= 0 ? branchIndex : undefined, isNewBranch, branch, insertAfterBranchId), 100);
|
|
25402
25459
|
}
|
|
25403
25460
|
buildElseTemplateVariablesForm(branch) {
|
|
@@ -25430,11 +25487,20 @@ class TestCaseConditionStepComponent {
|
|
|
25430
25487
|
branch.templateVariablesForm.addControl(variable.name, new FormControl(defaultValue));
|
|
25431
25488
|
});
|
|
25432
25489
|
}
|
|
25433
|
-
onAddElse() {
|
|
25490
|
+
onAddElse(triggerBranchIndex = 0) {
|
|
25434
25491
|
// Add a new ELSE IF branch (UI row only; APIs are called when user clicks Apply)
|
|
25435
|
-
const newBranch = this.buildElseIfBranch();
|
|
25492
|
+
const newBranch = this.buildElseIfBranch(undefined, triggerBranchIndex);
|
|
25436
25493
|
this.elseIfBranches.push(newBranch);
|
|
25437
25494
|
}
|
|
25495
|
+
/** Returns the pending ELSE IF add-forms that belong after a specific branch row. */
|
|
25496
|
+
getElseIfBranchesForBranchIndex(branchIndex) {
|
|
25497
|
+
return this.elseIfBranches.filter(b => b.triggerBranchIndex === branchIndex);
|
|
25498
|
+
}
|
|
25499
|
+
/** True when the given elseIfBranch is the last pending one (determines where Cancel/Apply are shown). */
|
|
25500
|
+
isLastElseIfBranch(branchId) {
|
|
25501
|
+
return this.elseIfBranches.length > 0 &&
|
|
25502
|
+
this.elseIfBranches[this.elseIfBranches.length - 1].id === branchId;
|
|
25503
|
+
}
|
|
25438
25504
|
onAddElseBranch() {
|
|
25439
25505
|
// Emit so parent can call POST test_steps with conditionType CONDITION_ELSE
|
|
25440
25506
|
if (this.config) {
|
|
@@ -25719,6 +25785,34 @@ class TestCaseConditionStepComponent {
|
|
|
25719
25785
|
getEndBranchLabel(branch) {
|
|
25720
25786
|
return branch.type === 'if' ? 'END IF' : branch.type === 'else-if' ? 'END ELSE IF' : 'END ELSE';
|
|
25721
25787
|
}
|
|
25788
|
+
/** START branch marker: first nested step's step number in this branch. */
|
|
25789
|
+
getBranchMarkerStartStep(branch) {
|
|
25790
|
+
const steps = branch.nestedSteps;
|
|
25791
|
+
if (!steps?.length) {
|
|
25792
|
+
return String(this.stepNumber ?? '');
|
|
25793
|
+
}
|
|
25794
|
+
const first = steps[0];
|
|
25795
|
+
if (first?.stepNumber != null && first.stepNumber !== '') {
|
|
25796
|
+
return String(first.stepNumber);
|
|
25797
|
+
}
|
|
25798
|
+
return String(this.stepNumber ?? '');
|
|
25799
|
+
}
|
|
25800
|
+
/** END branch marker: last nested step's step number in this branch. */
|
|
25801
|
+
getBranchMarkerEndStep(branch) {
|
|
25802
|
+
const steps = branch.nestedSteps;
|
|
25803
|
+
if (!steps?.length) {
|
|
25804
|
+
return String(this.stepNumber ?? '');
|
|
25805
|
+
}
|
|
25806
|
+
const last = steps[steps.length - 1];
|
|
25807
|
+
if (last?.stepNumber != null && last.stepNumber !== '') {
|
|
25808
|
+
return String(last.stepNumber);
|
|
25809
|
+
}
|
|
25810
|
+
return String(this.stepNumber ?? '');
|
|
25811
|
+
}
|
|
25812
|
+
/** END CONDITION marker: this condition step's display number. */
|
|
25813
|
+
getEndConditionMarkerStepDisplay() {
|
|
25814
|
+
return String(this.stepNumber ?? '');
|
|
25815
|
+
}
|
|
25722
25816
|
/** Branch display number: full hierarchical number. IF = stepNumber (e.g. 2.1.50), ELSE IF = 2.1.51, ELSE = 2.1.52. */
|
|
25723
25817
|
getBranchDisplayNumber(branchIndex) {
|
|
25724
25818
|
if (branchIndex === 0) {
|
|
@@ -26164,13 +26258,13 @@ class TestCaseConditionStepComponent {
|
|
|
26164
26258
|
}
|
|
26165
26259
|
}
|
|
26166
26260
|
TestCaseConditionStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseConditionStepComponent, deps: [{ token: i1$1.FormBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
26167
|
-
TestCaseConditionStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestCaseConditionStepComponent, selector: "cqa-test-case-condition-step", inputs: { config: "config", id: "id", stepNumber: "stepNumber", index: "index", condition: "condition", branches: "branches", expanded: "expanded", isNested: "isNested", isInsideLoop: "isInsideLoop", isInsideStepGroup: "isInsideStepGroup", isReorder: "isReorder", editable: "editable", nestingLevel: "nestingLevel", selected: "selected", dataProfileOptions: "dataProfileOptions", hasMoreDataProfiles: "hasMoreDataProfiles", isLoadingDataProfiles: "isLoadingDataProfiles", naturalTextActionsOptions: "naturalTextActionsOptions", setConditionTemplateVariables: "setConditionTemplateVariables", addStepBetweenAbove: "addStepBetweenAbove", addStepBetweenBelow: "addStepBetweenBelow", addStepBetween: "addStepBetween" }, outputs: { toggleExpanded: "toggleExpanded", conditionChange: "conditionChange", branchStepChange: "branchStepChange", addStep: "addStep", addStepForLoop: "addStepForLoop", deleteStep: "deleteStep", addBranch: "addBranch", addElse: "addElse", deleteBranch: "deleteBranch", duplicate: "duplicate", delete: "delete", edit: "edit", moreOptions: "moreOptions", viewDetails: "viewDetails", editInDepth: "editInDepth", dndDropInZone: "dndDropInZone", loadMoreDataProfiles: "loadMoreDataProfiles", searchDataProfiles: "searchDataProfiles", stepUpdate: "stepUpdate", clickAction: "clickAction", addStepBetweenClick: "addStepBetweenClick", selectionChange: "selectionChange", openExternal: "openExternal" }, host: { classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "viewDetailsTrigger", first: true, predicate: ["viewDetailsTrigger"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div [class]=\"'cqa-flex cqa-flex-col cqa-border cqa-border-solid cqa-border-[#E5E7EB] ' + (isNested ? ' cqa-pl-[24px]' : '')\" style=\"min-height: 50px\">\n <!-- Inline Edit Mode: shown in first branch row below when user clicks Edit from branch row (top block hidden) -->\n <div *ngIf=\"false && isEditing\" class=\"cqa-py-2.5 cqa-px-4 cqa-flex cqa-flex-col cqa-gap-3\" (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\" style=\"min-height: 50px\">\n <!-- First Row: CONDITION tag, autocomplete, IF/ELSE indicators, Edit In depth, Cancel/Apply -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-justify-between\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-grow\">\n <!-- CONDITION Tag (orange) -->\n <span class=\"cqa-px-1.5 cqa-rounded-md cqa-text-[#EA580C] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-[#FFEDD5]\">\n CONDITION\n </span>\n\n <!-- First field: left operand (e.g. Usertype) - autocomplete with IF_CONDITION natural text actions -->\n <cqa-autocomplete\n *ngIf=\"editForm\"\n [options]=\"conditionLeftAutocompleteOptions\"\n [value]=\"conditionLeftDisplayValue\"\n (valueChange)=\"onEditFormFieldChange('conditionLeft', $event)\"\n (optionSelect)=\"onConditionLeftSelect($event)\"\n placeholder=\"Select Condition\"\n [fullWidth]=\"true\"\n class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-autocomplete>\n\n <!-- Second Row: Template Variables Section (shown when template is selected, inline before Edit In depth) -->\n <div *ngIf=\"selectedTemplate && templateVariables && templateVariables.length > 0\" class=\"cqa-flex cqa-flex-row cqa-flex-wrap cqa-gap-3\">\n <ng-container *ngFor=\"let variable of templateVariables\">\n <!-- Boolean variables with mat-slide-toggle -->\n <ng-container *ngIf=\"variable.type === 'boolean'\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700\">\n {{ variable.label }}\n </label>\n <mat-slide-toggle\n [checked]=\"templateVariablesForm.get(variable.name)?.value || variable.value || false\"\n (change)=\"templateVariablesForm.get(variable.name)?.setValue($event.checked)\"\n color=\"primary\">\n </mat-slide-toggle>\n </div>\n </ng-container>\n \n <!-- Non-boolean variables -->\n <ng-container *ngIf=\"variable.type !== 'boolean' && variable.name !== 'custom_code'\">\n <!-- Dropdown for select variables -->\n <ng-container *ngIf=\"variable.name === 'type' || variable.name === 'scrollTo' || variable.options\">\n <div class=\"cqa-flex cqa-flex-col\" style=\"min-width: 150px;\">\n <!-- <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n {{ variable.label }}\n </label> -->\n <cqa-dynamic-select \n [form]=\"templateVariablesForm\"\n [config]=\"getSelectConfigForVariable(variable, false)\">\n </cqa-dynamic-select>\n </div>\n </ng-container>\n <!-- Text Input for other variables -->\n <ng-container *ngIf=\"variable.name !== 'type' && variable.name !== 'scrollTo' && !variable.options\">\n <div class=\"cqa-flex cqa-flex-col\" style=\"min-width: 150px;\">\n <!-- <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n {{ variable.label }}\n </label> -->\n <cqa-custom-input\n [placeholder]=\"'Enter ' + variable.label\"\n [value]=\"templateVariablesForm.get(variable.name)?.value || variable.value || ''\"\n [fullWidth]=\"true\"\n (valueChange)=\"templateVariablesForm.get(variable.name)?.setValue($event)\">\n </cqa-custom-input>\n </div>\n </ng-container>\n </ng-container>\n </ng-container>\n </div>\n\n <!-- IF / ELSE indicators -->\n <span class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#DCFCE7] cqa-text-[#008236] cqa-border cqa-border-solid cqa-border-[#B9F8CF] cqa-flex cqa-items-center cqa-gap-1.5\">\n <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6.66634 2L2.99967 5.66667L1.33301 4\" stroke=\"#008236\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n IF\n </span>\n <!-- Add ELSE IF button - disabled when ELSE already exists -->\n <button\n type=\"button\"\n (click)=\"onAddElse()\"\n [disabled]=\"hasElseBranch\"\n class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-transition-colors\"\n [class.cqa-cursor-pointer]=\"!hasElseBranch\"\n [class.cqa-cursor-not-allowed]=\"hasElseBranch\"\n [class.cqa-opacity-60]=\"hasElseBranch\">\n Add ELSE IF\n </button>\n <!-- Add Else button - disabled when ELSE already exists -->\n <button\n type=\"button\"\n (click)=\"onAddElseBranch()\"\n [disabled]=\"hasElseBranch\"\n class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-transition-colors\"\n [class.cqa-cursor-pointer]=\"!hasElseBranch\"\n [class.cqa-cursor-not-allowed]=\"hasElseBranch\"\n [class.cqa-opacity-60]=\"hasElseBranch\">\n Add ELSE\n </button>\n\n <!-- Edit In depth link -->\n <a href=\"#\" (click)=\"onEditInDepth(); $event.preventDefault()\"\n class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-[2px] cqa-no-underline\">\n Edit In depth\n <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg>\n </a> \n </div>\n <!-- Cancel / Apply buttons - shown on IF row when no ELSE IF branches are present -->\n <div *ngIf=\"elseIfBranches.length === 0\" class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <cqa-button variant=\"outlined\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Cancel'\" (clicked)=\"onEditCancel()\"></cqa-button>\n <cqa-button variant=\"filled\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Apply'\" (clicked)=\"onEditApply()\"></cqa-button>\n </div>\n </div>\n \n \n </div>\n\n <!-- Step row: always visible (no template edit here; template edit only in branch row below). Has edit/delete. -->\n <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.padding-left.px]=\"getRowPaddingLeftPx()\"\n style=\"border-bottom: 1px solid #E5E7EB; min-height: 50px\">\n <!-- Checkbox/Drag Handle column - same structure as normal-step for alignment -->\n <div class=\"cqa-inline-flex cqa-items-center\">\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 (ngModelChange)=\"onSelectionChange($event)\"\n class=\"cqa-h-4 cqa-w-4 cqa-cursor-pointer cqa-transition-all cqa-appearance-none cqa-rounded shadow hover:cqa-shadow-md cqa-border cqa-border-solid cqa-border-slate-300 cqa-flex-shrink-0\"\n [class.cqa-bg-[#3F43EE]]=\"selected\"\n [class.cqa-border-[#3F43EE]]=\"selected\"\n id=\"check-condition\" />\n <span class=\"cqa-absolute cqa-text-white cqa-top-1/2 cqa-left-1/2 cqa--translate-x-1/2 cqa--translate-y-1/2 cqa-pointer-events-none cqa-flex cqa-items-center cqa-justify-center\"\n [class.cqa-opacity-0]=\"!selected\"\n [class.cqa-opacity-100]=\"selected\">\n <svg width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 3.125L4.5 8.625L2 6.125\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </span>\n </label>\n </div>\n <div *ngIf=\"isInsideStepGroup\" class=\"cqa-ml-1 cqa-mr-1 cqa-text-[#9CA3AF]\">\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 <!-- Expand/Collapse Icon -->\n <button type=\"button\" (click)=\"onToggleExpanded()\" class=\"cqa-p-0\">\n <svg [class.cqa-rotate-180]=\"!expanded\" class=\"cqa-transition-transform\" width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M12 10L8 6L4 10\" stroke=\"#6B7280\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button>\n\n <!-- IF/ELSE Icon -->\n <div><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 2V10\" stroke=\"#7B3306\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M12 6C13.1046 6 14 5.10457 14 4C14 2.89543 13.1046 2 12 2C10.8954 2 10 2.89543 10 4C10 5.10457 10.8954 6 12 6Z\"\n stroke=\"#7B3306\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M4 14C5.10457 14 6 13.1046 6 12C6 10.8954 5.10457 10 4 10C2.89543 10 2 10.8954 2 12C2 13.1046 2.89543 14 4 14Z\"\n stroke=\"#7B3306\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M12 6C12 7.5913 11.3679 9.11742 10.2426 10.2426C9.11742 11.3679 7.5913 12 6 12\" stroke=\"#7B3306\"\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg></div>\n\n <!-- IF/ELSE Label -->\n <span class=\"cqa-font-semibold cqa-text-[#7B3306] cqa-text-[12px] cqa-leading-none\">\n CONDITION\n </span>\n\n <!-- Step row: read-only (condition, summary, actions) when not editing step row -->\n <ng-container *ngIf=\"editContext !== 'stepRow'\">\n <!-- First condition text as plain text (no HTML) -->\n <div *ngIf=\"getConditionPlainText()\" class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-ml-2 cqa-flex-1 cqa-flex-wrap cqa-px-1 cqa-min-w-0\">\n <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px] cqa-truncate\">{{ getConditionPlainText() }}</span>\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-ml-auto cqa-flex-wrap cqa-px-1 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 <!-- Branch type badges: IF, ELSE IF (with count), ELSE -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-flex-shrink-0\">\n <span *ngFor=\"let badge of getBranchTypeBadges()\"\n [class]=\"'cqa-inline-flex cqa-items-center cqa-gap-1 cqa-px-2 cqa-py-0.5 cqa-rounded cqa-text-[10px] cqa-leading-[15px] cqa-font-medium ' + badge.badgeClass\">\n {{ badge.label }}\n <ng-container *ngIf=\"badge.count\">+{{ badge.count }}</ng-container>\n </span>\n </div>\n <div\n class=\"cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-rounded-lg cqa-py-0.5 cqa-px-2 cqa-text-[#0A0A0A] cqa-text-[12px] cqa-leading-[15px]\">\n {{ getStepsSummary() }}\n </div>\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 <a href=\"#\" (click)=\"onEditInDepth(); $event.preventDefault()\" class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-1 cqa-no-underline\">Edit In depth<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 </ng-container>\n\n <!-- Step row: edit mode (CONDITION, autocomplete, IF, Add ELSE IF, Add ELSE, Edit In depth, Cancel, Apply) when editContext === 'stepRow' -->\n <ng-container *ngIf=\"editContext === 'stepRow'\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-ml-2 cqa-flex-1 cqa-flex-wrap cqa-min-w-0\">\n <span class=\"cqa-px-1.5 cqa-rounded-md cqa-text-[#EA580C] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-[#FFEDD5]\">CONDITION</span>\n <cqa-autocomplete\n *ngIf=\"editForm\"\n [options]=\"conditionLeftAutocompleteOptions\"\n [value]=\"conditionLeftDisplayValue\"\n (valueChange)=\"onEditFormFieldChange('conditionLeft', $event)\"\n (optionSelect)=\"onConditionLeftSelect($event)\"\n placeholder=\"Select Condition\"\n [fullWidth]=\"true\"\n class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-autocomplete>\n <span class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#DCFCE7] cqa-text-[#008236] cqa-border cqa-border-solid cqa-border-[#B9F8CF] cqa-flex cqa-items-center cqa-gap-1.5\">IF</span>\n <button type=\"button\" (click)=\"onAddElse()\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-transition-colors cqa-cursor-pointer\">Add ELSE IF</button>\n <button type=\"button\" (click)=\"onAddElseBranch()\" [disabled]=\"hasElseBranch\" [attr.aria-disabled]=\"hasElseBranch\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-transition-colors\" [class.cqa-cursor-pointer]=\"!hasElseBranch\" [class.cqa-cursor-not-allowed]=\"hasElseBranch\" [class.cqa-opacity-60]=\"hasElseBranch\">Add ELSE</button>\n <a href=\"#\" (click)=\"onEditInDepth(); $event.preventDefault()\" class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-[2px] cqa-no-underline\">Edit In depth<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 </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-flex-shrink-0\">\n <cqa-button variant=\"outlined\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Cancel'\" (clicked)=\"onEditCancel()\"></cqa-button>\n <cqa-button variant=\"filled\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Apply'\" (clicked)=\"onEditApply()\"></cqa-button>\n </div>\n </ng-container>\n </div>\n\n <!-- ELSE IF Sections in Edit Mode - shown below step row when editing and has ELSE IF branches -->\n <ng-container *ngFor=\"let branch of elseIfBranches; let i = index\">\n <div *ngIf=\"isEditing\" class=\"cqa-py-2.5 cqa-px-1 cqa-flex cqa-flex-col cqa-gap-3 cqa-border-t cqa-border-solid cqa-border-[#E5E7EB]\">\n <!-- First Row: Remove ELSE IF button, autocomplete, Edit In depth, Cancel/Apply -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-justify-between\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-grow\">\n <!-- Remove ELSE IF button -->\n <button\n type=\"button\"\n (click)=\"onRemoveElse(branch.id)\"\n class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#F3F4F6] cqa-text-[#99A1AF] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-cursor-pointer hover:cqa-bg-[#E5E7EB] cqa-transition-colors\">\n Remove ELSE IF\n </button>\n\n <!-- ELSE IF autocomplete field: same as IF condition -->\n <cqa-autocomplete\n *ngIf=\"branch.form\"\n [options]=\"conditionLeftAutocompleteOptions\"\n [value]=\"branch.form.get('conditionLeft')?.value ?? ''\"\n (valueChange)=\"branch.form.get('conditionLeft')?.setValue($event)\"\n (optionSelect)=\"onElseConditionLeftSelect($event, branch.id)\"\n placeholder=\"Select Condition\"\n [fullWidth]=\"true\"\n [compact]=\"true\"\n class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-autocomplete>\n \n <!-- Second Row: ELSE IF Template Variables Section (shown when template is selected, inline before Edit In depth) -->\n <div *ngIf=\"branch.selectedTemplate && branch.templateVariables && branch.templateVariables.length > 0\" class=\"cqa-flex cqa-flex-row cqa-flex-wrap cqa-gap-3\">\n <ng-container *ngFor=\"let variable of branch.templateVariables\">\n <!-- Boolean variables with mat-slide-toggle -->\n <ng-container *ngIf=\"variable.type === 'boolean'\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <mat-slide-toggle\n [checked]=\"branch.templateVariablesForm.get(variable.name)?.value || variable.value || false\"\n (change)=\"branch.templateVariablesForm.get(variable.name)?.setValue($event.checked)\"\n color=\"primary\">\n </mat-slide-toggle>\n </div>\n </ng-container>\n \n <!-- Non-boolean variables -->\n <ng-container *ngIf=\"variable.type !== 'boolean' && variable.name !== 'custom_code'\">\n <ng-container *ngIf=\"variable.name === 'type' || variable.name === 'scrollTo' || variable.options\">\n <div class=\"cqa-flex cqa-flex-col\" style=\"min-width: 150px;\">\n <cqa-dynamic-select \n [form]=\"branch.templateVariablesForm\"\n [config]=\"getSelectConfigForVariable(variable, branch.id)\">\n </cqa-dynamic-select>\n </div>\n </ng-container>\n \n <ng-container *ngIf=\"variable.name !== 'type' && variable.name !== 'scrollTo' && !variable.options\">\n <div class=\"cqa-flex cqa-flex-col\" style=\"min-width: 150px;\">\n <cqa-custom-input\n [value]=\"branch.templateVariablesForm.get(variable.name)?.value || variable.value || ''\"\n (valueChange)=\"branch.templateVariablesForm.get(variable.name)?.setValue($event)\"\n [placeholder]=\"variable.label\">\n </cqa-custom-input>\n </div>\n </ng-container>\n </ng-container>\n </ng-container>\n </div>\n\n <!-- Edit In depth link: branch.id is a temporary UI-only id (not in saved branches),\n so pass isCreateMode=true with the branch object directly instead of looking it up -->\n <a href=\"#\" (click)=\"onEditInDepth(branch.selectedTemplate || undefined, null, undefined, true, branch, getInsertAfterBranchId()); $event.preventDefault()\"\n class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-[2px] cqa-no-underline\">\n Edit In depth\n <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg>\n </a>\n </div>\n <!-- Cancel / Apply buttons - shown in last ELSE IF row -->\n <div *ngIf=\"i === elseIfBranches.length - 1\" class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <cqa-button variant=\"outlined\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Cancel'\" (clicked)=\"onEditCancel()\"></cqa-button>\n <cqa-button variant=\"filled\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Apply'\" (clicked)=\"onEditApply()\"></cqa-button>\n </div>\n </div>\n </div>\n </ng-container>\n\n <!-- Expanded Content with Branches (shown when expanded or when editing so edit UI appears in first branch row) -->\n <div *ngIf=\"expanded || isEditing\" class=\"cqa-flex cqa-flex-col\">\n <!-- Branches (IF TRUE, ELSE IF, ELSE) -->\n <div *ngFor=\"let branch of branches; let branchIndex = index\" class=\"condition-branch-row cqa-flex cqa-flex-col\" [attr.data-branch-id]=\"branch?.id\">\n <!-- Edit mode (IF TRUE branch): shows CONDITION, autocomplete, IF, Add ELSE IF, Add ELSE, Edit In depth, Edit/Delete, Cancel/Apply -->\n <div\n *ngIf=\"editContext === 'branchRow' && branchIndex === 0 && editingBranchIndex === 0\"\n (click)=\"$event.stopPropagation()\"\n (mousedown)=\"$event.stopPropagation()\"\n [class]=\"'cqa-px-1 cqa-py-2.5 cqa-text-[12px] cqa-leading-[15px] cqa-flex cqa-items-center cqa-gap-3 cqa-justify-between cqa-flex-wrap ' + getBranchTextColor(branch) + ' ' + getBranchColorClass(branch)\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-grow cqa-flex-wrap cqa-min-w-0\">\n <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px] cqa-min-w-[32px] cqa-flex-shrink-0\">{{ getBranchDisplayNumber(branchIndex) }}</span>\n <span>{{ getBranchLabel(branch) }}</span>\n <span class=\"cqa-px-1.5 cqa-rounded-md cqa-text-[#EA580C] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-[#FFEDD5]\">CONDITION</span>\n <cqa-autocomplete\n *ngIf=\"editForm\"\n [options]=\"conditionLeftAutocompleteOptions\"\n [value]=\"conditionLeftDisplayValue\"\n (valueChange)=\"onEditFormFieldChange('conditionLeft', $event)\"\n (optionSelect)=\"onConditionLeftSelect($event)\"\n placeholder=\"Select Condition\"\n [fullWidth]=\"true\"\n class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-autocomplete>\n <span class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#DCFCE7] cqa-text-[#008236] cqa-border cqa-border-solid cqa-border-[#B9F8CF] cqa-flex cqa-items-center cqa-gap-1.5\">IF</span>\n <button type=\"button\" (click)=\"onAddElse(); $event.stopPropagation()\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-transition-colors cqa-cursor-pointer\">Add ELSE IF</button>\n <button type=\"button\" (click)=\"onAddElseBranch(); $event.stopPropagation()\" [disabled]=\"hasElseBranch\" [attr.aria-disabled]=\"hasElseBranch\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-transition-colors\" [class.cqa-cursor-pointer]=\"!hasElseBranch\" [class.cqa-cursor-not-allowed]=\"hasElseBranch\" [class.cqa-opacity-60]=\"hasElseBranch\">Add ELSE</button>\n <a href=\"#\" (click)=\"onEditInDepth(undefined, branch, 0); $event.preventDefault()\" class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-[2px] cqa-no-underline\">Edit In depth<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 </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-flex-shrink-0\">\n <cqa-button variant=\"outlined\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Cancel'\" (clicked)=\"onEditCancel()\"></cqa-button>\n <cqa-button variant=\"filled\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Apply'\" (clicked)=\"onEditApply()\"></cqa-button>\n </div>\n </div>\n <!-- Edit mode (ELSE IF branch): shows CONDITION, autocomplete, Add ELSE IF / Add ELSE, Edit In depth, Cancel/Apply -->\n <div\n *ngIf=\"editContext === 'branchRow' && branchIndex === editingBranchIndex && branch.type === 'else-if'\"\n (click)=\"$event.stopPropagation()\"\n (mousedown)=\"$event.stopPropagation()\"\n [class]=\"'cqa-px-1 cqa-py-2.5 cqa-text-[12px] cqa-leading-[15px] cqa-flex cqa-items-center cqa-gap-3 cqa-justify-between cqa-flex-wrap ' + getBranchTextColor(branch) + ' ' + getBranchColorClass(branch)\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-grow cqa-flex-wrap cqa-min-w-0\">\n <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px] cqa-min-w-[32px] cqa-flex-shrink-0\">{{ getBranchDisplayNumber(branchIndex) }}</span>\n <span>{{ getBranchLabel(branch) }}</span>\n <span class=\"cqa-px-1.5 cqa-rounded-md cqa-text-[#EA580C] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-[#FFEDD5]\">CONDITION</span>\n <!-- ELSE IF condition autocomplete: same options and value model as IF, but initialized from this branch's condition -->\n <cqa-autocomplete\n *ngIf=\"editForm\"\n [options]=\"conditionLeftAutocompleteOptions\"\n [value]=\"conditionLeftDisplayValue\"\n (valueChange)=\"onEditFormFieldChange('conditionLeft', $event)\"\n (optionSelect)=\"onConditionLeftSelect($event)\"\n placeholder=\"Select Condition\"\n [fullWidth]=\"true\"\n class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-autocomplete>\n <button type=\"button\" (click)=\"onAddElse(); $event.stopPropagation()\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-transition-colors cqa-cursor-pointer\">Add ELSE IF</button>\n <button type=\"button\" (click)=\"onAddElseBranch(); $event.stopPropagation()\" [disabled]=\"hasElseBranch\" [attr.aria-disabled]=\"hasElseBranch\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-transition-colors\" [class.cqa-cursor-pointer]=\"!hasElseBranch\" [class.cqa-cursor-not-allowed]=\"hasElseBranch\" [class.cqa-opacity-60]=\"hasElseBranch\">Add ELSE</button>\n <a href=\"#\" (click)=\"onEditInDepth(undefined, branch, branchIndex); $event.preventDefault()\" class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-[2px] cqa-no-underline\">Edit In depth<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 </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-flex-shrink-0\">\n <cqa-button variant=\"outlined\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Cancel'\" (clicked)=\"onEditCancel()\"></cqa-button>\n <cqa-button variant=\"filled\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Apply'\" (clicked)=\"onEditApply()\"></cqa-button>\n </div>\n </div>\n <!-- Branch Header (read-only): display when not editing this branch row. Order: branch content (left), then step-actions, then date (right, same as other steps). -->\n <div\n *ngIf=\"editContext !== 'branchRow' || branchIndex !== editingBranchIndex\"\n [class]=\"'cqa-px-4 cqa-py-2 cqa-text-[12px] cqa-leading-[15px] cqa-flex cqa-items-center cqa-gap-2 cqa-justify-between ' + getBranchTextColor(branch) + ' ' + getBranchColorClass(branch)\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-flex-grow cqa-flex-wrap cqa-min-w-0\">\n <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px] cqa-min-w-[32px] cqa-flex-shrink-0\">{{ getBranchDisplayNumber(branchIndex) }}</span>\n <span>{{ getBranchLabel(branch) }}</span>\n <span\n *ngIf=\"getBranchConditionDisplay(branch)\"\n [innerHTML]=\"getBranchConditionDisplay(branch) | cqaSafeHtml\"\n (click)=\"onConditionActionClick($event, branch)\"\n class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px] cqa-action-format\"></span>\n <ng-container *ngIf=\"getBranchEventDetailsForDisplay(branch).length > 0\">\n <span *ngFor=\"let item of getBranchEventDetailsForDisplay(branch)\" class=\"cqa-inline-flex cqa-items-center cqa-gap-1 cqa-py-0.5 cqa-px-2 cqa-rounded cqa-text-[12px] cqa-leading-[15px] cqa-bg-[#F3F4F6] cqa-text-[#374151] cqa-border cqa-border-solid cqa-border-[#E5E7EB]\" (click)=\"onConditionActionClick($event, branch)\">\n <span class=\"cqa-font-medium cqa-text-[#6B7280]\">{{ item.key }}:</span>\n <span class=\"cqa-text-[#111827]\">{{ item.value }}</span>\n </span>\n </ng-container>\n </div>\n <!-- Right section: step-actions then date (same order as other step types) -->\n <div *ngIf=\"editable && !isInsideStepGroup && !isReorder\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-1.5 cqa-pr-2 cqa-flex-shrink-0\">\n <button *ngIf=\"branchIndex === 0 || branch.type === 'else-if'\" type=\"button\" (click)=\"onEditFromBranchRow(branchIndex); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M7 11.6666H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M9.55208 2.1128C9.7843 1.88058 10.0993 1.75012 10.4277 1.75012C10.7561 1.75012 11.071 1.88058 11.3033 2.1128C11.5355 2.34502 11.6659 2.65998 11.6659 2.98838C11.6659 3.31679 11.5355 3.63175 11.3033 3.86397L4.29742 10.8704C4.15864 11.0092 3.9871 11.1107 3.79867 11.1656L2.12333 11.6544C2.07314 11.669 2.01993 11.6699 1.96928 11.6569C1.91863 11.6439 1.8724 11.6176 1.83543 11.5806C1.79846 11.5437 1.7721 11.4974 1.75913 11.4468C1.74615 11.3961 1.74703 11.3429 1.76167 11.2927L2.2505 9.61738C2.30546 9.42916 2.40698 9.25783 2.54567 9.11922L9.55208 2.1128Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </button>\n <button *ngIf=\"branchIndex === 0 || branch.type === 'else-if'\" type=\"button\" (click)=\"onEditFromBranchRow(branchIndex); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"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>\n </button>\n <button type=\"button\" (click)=\"branchIndex === 0 ? onDelete() : onDeleteBranch(branch); $event.stopPropagation()\" title=\"{{ branchIndex === 0 ? 'Delete step' : 'Delete branch' }}\" class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1.75 3.5H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11.0827 3.5V11.6667C11.0827 12.25 10.4993 12.8333 9.91602 12.8333H4.08268C3.49935 12.8333 2.91602 12.25 2.91602 11.6667V3.5\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.66602 3.49996V2.33329C4.66602 1.74996 5.24935 1.16663 5.83268 1.16663H8.16602C8.74935 1.16663 9.33268 1.74996 9.33268 2.33329V3.49996\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M5.83398 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M8.16602 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </button>\n </div>\n <span *ngIf=\"getBranchCreatedDate(branch)\" class=\"step-date cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px] cqa-flex-shrink-0 cqa-ml-auto\">{{ getBranchCreatedDate(branch) | date:'d MMM yyyy' }}</span>\n </div>\n\n <!-- START marker per branch: START IF, START ELSE IF, or START ELSE (centered with decorative lines) - only when branch has nested steps -->\n <div *ngIf=\"branch.nestedSteps?.length > 0\" class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-py-1 cqa-px-4\" style=\"border-top: 1px solid #E5E7EB;\">\n <span class=\"cqa-flex-1 cqa-self-stretch cqa-border-t cqa-border-dashed cqa-border-[#7B3306] cqa-opacity-40\" style=\"min-width: 20px;\"></span>\n <span class=\"cqa-text-[#7B3306] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-whitespace-nowrap\">{{ getStartBranchLabel(branch) }}</span>\n <span class=\"cqa-flex-1 cqa-self-stretch cqa-border-t cqa-border-dashed cqa-border-[#7B3306] cqa-opacity-40\" style=\"min-width: 20px;\"></span>\n </div>\n\n <!-- Branch Content (Nested Steps \u2013 renderer dispatches by step type, n-level nesting) -->\n <div *ngIf=\"!isReorder || isInsideStepGroup\" class=\"cqa-flex cqa-flex-col\">\n <cqa-test-case-details-renderer\n *ngFor=\"let step of branch.nestedSteps; let i = index\"\n [step]=\"step\"\n [index]=\"i\"\n [selected]=\"$any(step).selected\"\n [branch]=\"branch\"\n [isNested]=\"true\"\n [isInsideStepGroup]=\"isInsideStepGroup\"\n [isReorder]=\"isReorder\"\n [nestingLevel]=\"(nestingLevel || 0) + 1\"\n [addStepBetween]=\"addStepBetween\"\n [editable]=\"editable\"\n [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n (branchStepChange)=\"onBranchStepChange($event.branch, $event.step, $event.stepIndex)\"\n (addStepForBranch)=\"onAddStep($event.branch)\"\n (addStepForLoop)=\"onAddStepForLoop($event, branch)\"\n (deleteStepWithBranch)=\"onDeleteStep($event.branch, $event.stepIndex)\"\n (delete)=\"onNestedStepDelete($event)\"\n (toggleExpanded)=\"onNestedToggleExpanded($event, branch, step, i)\"\n (groupNameChange)=\"$any(step).groupName = $event; onBranchStepChange(branch, step, i)\"\n (descriptionChange)=\"$any(step).description = $event; onBranchStepChange(branch, step, i)\"\n (reusableChange)=\"$any(step).reusable = $event; onBranchStepChange(branch, step, i)\"\n (openExternal)=\"onNestedOpenExternal($event)\"\n (edit)=\"onNestedEdit($event)\"\n (link)=\"onBranchStepChange(branch, step, i)\"\n (duplicate)=\"onNestedDuplicate($event, step)\"\n (viewDetails)=\"viewDetails.emit($event)\"\n (conditionChange)=\"$any(step).condition = $event; onBranchStepChange(branch, step, i)\"\n (addBranch)=\"onNestedConditionAddBranch($any(step)); onBranchStepChange(branch, step, i)\"\n (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event); onBranchStepChange(branch, step, i)\"\n (testDataProfileChange)=\"$any(step).testDataProfile = $event; onBranchStepChange(branch, step, i)\"\n (startStepChange)=\"$any(step).startStep = $event; onBranchStepChange(branch, step, i)\"\n (endStepChange)=\"$any(step).endStep = $event; onBranchStepChange(branch, step, i)\"\n (maxIterationsChange)=\"$any(step).maxIterations = $event; onBranchStepChange(branch, step, i)\"\n (eventTypeChange)=\"$any(step).eventType = $event; onBranchStepChange(branch, step, i)\"\n (parameterChange)=\"onBranchStepChange(branch, step, i)\"\n (selectionChange)=\"$any(step).selected = $event; onBranchStepChange(branch, step, i)\"\n (loadMoreDataProfiles)=\"loadMoreDataProfiles.emit($event)\"\n (searchDataProfiles)=\"searchDataProfiles.emit($event)\"\n (stepUpdate)=\"stepUpdate.emit($event)\"\n (dndDropInZone)=\"dndDropInZone.emit($event)\"\n (clickAction)=\"onNestedClickAction($event)\"\n (editInDepth)=\"editInDepth.emit($event)\"\n (addStepBetweenClick)=\"addStepBetweenClick.emit($event)\"\n >\n </cqa-test-case-details-renderer>\n </div>\n <div *ngIf=\"isReorder && !isInsideStepGroup\" class=\"cqa-flex cqa-flex-col nested-step-drop-list\"\n [style.min-height.px]=\"branch.nestedSteps.length === 0 ? 52 : null\"\n [dndDropzone]=\"['step']\"\n dndEffectAllowed=\"move\"\n dndDragoverClass=\"dndDragover\"\n (dndDrop)=\"onDndDrop($event, branch)\">\n <div dndPlaceholderRef class=\"step-drag-placeholder-nested cqa-my-1 cqa-min-h-[50px] cqa-border-2 cqa-border-dashed cqa-border-[#3F43EE] cqa-rounded cqa-bg-[rgba(63,67,238,0.08)] cqa-flex cqa-items-center cqa-justify-center cqa-text-[#3F43EE] cqa-text-xs\">Drop here</div>\n <div *ngFor=\"let step of branch.nestedSteps; let i = index\" class=\"nested-step-drag-item\"\n [dndDraggable]=\"step\"\n dndEffectAllowed=\"move\"\n dndType=\"step\">\n <cqa-test-case-details-renderer\n [step]=\"step\"\n [index]=\"i\"\n [selected]=\"$any(step).selected\"\n [branch]=\"branch\"\n [isNested]=\"true\"\n [isInsideStepGroup]=\"isInsideStepGroup\"\n [isReorder]=\"isReorder\"\n [nestingLevel]=\"(nestingLevel || 0) + 1\"\n [addStepBetweenAbove]=\"addStepBetweenAbove\"\n [addStepBetweenBelow]=\"addStepBetweenBelow\"\n [addStepBetween]=\"addStepBetween\"\n [editable]=\"editable\"\n [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n (branchStepChange)=\"onBranchStepChange($event.branch, $event.step, $event.stepIndex)\"\n (addStepForBranch)=\"onAddStep($event.branch)\"\n (addStepForLoop)=\"onAddStepForLoop($event, branch)\"\n (deleteStepWithBranch)=\"onDeleteStep($event.branch, $event.stepIndex)\"\n (delete)=\"onNestedStepDelete($event)\"\n (toggleExpanded)=\"onNestedToggleExpanded($event, branch, step, i)\"\n (groupNameChange)=\"$any(step).groupName = $event; onBranchStepChange(branch, step, i)\"\n (descriptionChange)=\"$any(step).description = $event; onBranchStepChange(branch, step, i)\"\n (reusableChange)=\"$any(step).reusable = $event; onBranchStepChange(branch, step, i)\"\n (openExternal)=\"onNestedOpenExternal($event)\"\n (edit)=\"onNestedEdit($event)\"\n (link)=\"onBranchStepChange(branch, step, i)\"\n (duplicate)=\"onNestedDuplicate($event, step)\"\n (viewDetails)=\"viewDetails.emit($event)\"\n (conditionChange)=\"$any(step).condition = $event; onBranchStepChange(branch, step, i)\"\n (addBranch)=\"onNestedConditionAddBranch($any(step)); onBranchStepChange(branch, step, i)\"\n (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event); onBranchStepChange(branch, step, i)\"\n (testDataProfileChange)=\"$any(step).testDataProfile = $event; onBranchStepChange(branch, step, i)\"\n (startStepChange)=\"$any(step).startStep = $event; onBranchStepChange(branch, step, i)\"\n (endStepChange)=\"$any(step).endStep = $event; onBranchStepChange(branch, step, i)\"\n (maxIterationsChange)=\"$any(step).maxIterations = $event; onBranchStepChange(branch, step, i)\"\n (eventTypeChange)=\"$any(step).eventType = $event; onBranchStepChange(branch, step, i)\"\n (parameterChange)=\"onBranchStepChange(branch, step, i)\"\n (selectionChange)=\"$any(step).selected = $event; onBranchStepChange(branch, step, i)\"\n (loadMoreDataProfiles)=\"loadMoreDataProfiles.emit($event)\"\n (searchDataProfiles)=\"searchDataProfiles.emit($event)\"\n (stepUpdate)=\"stepUpdate.emit($event)\"\n (dndDropInZone)=\"dndDropInZone.emit($event)\"\n (clickAction)=\"onNestedClickAction($event)\"\n (editInDepth)=\"editInDepth.emit($event)\"\n (addStepBetweenClick)=\"addStepBetweenClick.emit($event)\"\n >\n </cqa-test-case-details-renderer>\n </div>\n </div>\n\n <!-- Empty branch (IF / ELSE IF / ELSE): show plus icon on hover when no steps, same as loop step.\n When rendered inside a step group or when reordering, hide this Add button entirely. -->\n <div *ngIf=\"branch.nestedSteps.length === 0 && editable && !isInsideStepGroup && !isReorder\" class=\"condition-branch-empty cqa-min-h-[52px] cqa-flex cqa-items-center cqa-justify-center cqa-pl-4 cqa-pr-4\">\n <button type=\"button\" (click)=\"onAddStep(branch); $event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\" [attr.title]=\"'Add step to ' + getBranchLabel(branch)\"\n class=\"condition-branch-empty-add\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect x=\"1\" y=\"1\" width=\"21.1822\" height=\"22\" rx=\"10.5911\" fill=\"white\" />\n <rect x=\"1\" y=\"1\" width=\"21.1822\" height=\"22\" rx=\"10.5911\" stroke=\"#3F43EE\" stroke-width=\"2\" />\n <path d=\"M8.5 12H15.5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M12 8.5V15.5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </button>\n </div>\n\n <!-- END marker per branch: END IF, END ELSE IF, or END ELSE - only when branch has nested steps -->\n <div *ngIf=\"branch.nestedSteps?.length > 0\" class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-py-1 cqa-px-4\" style=\"border-top: 1px solid #E5E7EB;\">\n <span class=\"cqa-flex-1 cqa-self-stretch cqa-border-t cqa-border-dashed cqa-border-[#7B3306] cqa-opacity-40\" style=\"min-width: 20px;\"></span>\n <span class=\"cqa-text-[#7B3306] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-whitespace-nowrap\">{{ getEndBranchLabel(branch) }}</span>\n <span class=\"cqa-flex-1 cqa-self-stretch cqa-border-t cqa-border-dashed cqa-border-[#7B3306] cqa-opacity-40\" style=\"min-width: 20px;\"></span>\n </div>\n </div>\n <!-- END CONDITION: final marker after all branches -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-py-1 cqa-px-4\" style=\"border-top: 1px solid #E5E7EB;\">\n <span class=\"cqa-flex-1 cqa-self-stretch cqa-border-t cqa-border-dashed cqa-border-[#7B3306] cqa-opacity-40\" style=\"min-width: 20px;\"></span>\n <span class=\"cqa-text-[#7B3306] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-whitespace-nowrap\">END CONDITION</span>\n <span class=\"cqa-flex-1 cqa-self-stretch cqa-border-t cqa-border-dashed cqa-border-[#7B3306] cqa-opacity-40\" style=\"min-width: 20px;\"></span>\n </div>\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", ".nested-step-drop-list:has(.step-drag-placeholder-nested:only-child){min-height:52px}.condition-branch-empty{opacity:1;transition:opacity .1s ease}.condition-branch-row:hover .step-actions{opacity:1}.condition-branch-empty-add{padding:0;background:transparent;border:0;cursor:pointer;color:#3f43ee;transition:opacity .15s ease}.condition-branch-empty-add:hover{opacity:.9}\n"], components: [{ type: AutocompleteComponent, selector: "cqa-autocomplete", inputs: ["placeholder", "options", "value", "disabled", "showClear", "ariaLabel", "autoFocus", "size", "fullWidth", "compact"], outputs: ["valueChange", "optionSelect", "cleared"] }, { type: i3$4.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: TestCaseDetailsRendererComponent, selector: "cqa-test-case-details-renderer", inputs: ["step", "index", "isNested", "isInsideLoop", "isInsideStepGroup", "nestingLevel", "branch", "isReorder", "selected", "isDuplicating", "addStepBetweenAbove", "addStepBetweenBelow", "addStepBetween", "editable", "dataProfileOptions", "hasMoreDataProfiles", "isLoadingDataProfiles", "naturalTextActionsOptions", "setConditionTemplateVariables"], outputs: ["nestedStepChange", "addStep", "deleteStep", "toggleExpanded", "groupNameChange", "descriptionChange", "reusableChange", "openExternal", "edit", "link", "duplicate", "delete", "viewDetails", "selectionChange", "conditionChange", "branchStepChange", "addStepForBranch", "addStepForLoop", "deleteStepWithBranch", "addBranch", "addElse", "deleteBranch", "testDataProfileChange", "startStepChange", "endStepChange", "maxIterationsChange", "eventTypeChange", "parameterChange", "clickAction", "dndDropInZone", "loadMoreDataProfiles", "searchDataProfiles", "stepUpdate", "addStepBetweenClick", "editInDepth"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i6$1.DndDropzoneDirective, selector: "[dndDropzone]", inputs: ["dndDropzone", "dndEffectAllowed", "dndAllowExternal", "dndHorizontal", "dndDragoverClass", "dndDropzoneDisabledClass", "dndDisableIf", "dndDisableDropIf"], outputs: ["dndDragover", "dndDrop"] }, { type: i6$1.DndPlaceholderRefDirective, selector: "[dndPlaceholderRef]" }, { type: i6$1.DndDraggableDirective, selector: "[dndDraggable]", inputs: ["dndDraggable", "dndEffectAllowed", "dndType", "dndDraggingClass", "dndDraggingSourceClass", "dndDraggableDisabledClass", "dndDragImageOffsetFunction", "dndDisableIf", "dndDisableDragIf"], outputs: ["dndStart", "dndDrag", "dndEnd", "dndMoved", "dndCopied", "dndLinked", "dndCanceled"] }], pipes: { "date": i2.DatePipe, "cqaSafeHtml": SafeHtmlPipe } });
|
|
26261
|
+
TestCaseConditionStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestCaseConditionStepComponent, selector: "cqa-test-case-condition-step", inputs: { config: "config", id: "id", stepNumber: "stepNumber", index: "index", condition: "condition", branches: "branches", expanded: "expanded", isNested: "isNested", isInsideLoop: "isInsideLoop", isInsideStepGroup: "isInsideStepGroup", isReorder: "isReorder", editable: "editable", nestingLevel: "nestingLevel", selected: "selected", dataProfileOptions: "dataProfileOptions", hasMoreDataProfiles: "hasMoreDataProfiles", isLoadingDataProfiles: "isLoadingDataProfiles", naturalTextActionsOptions: "naturalTextActionsOptions", currentTestCaseId: "currentTestCaseId", setConditionTemplateVariables: "setConditionTemplateVariables", addStepBetweenAbove: "addStepBetweenAbove", addStepBetweenBelow: "addStepBetweenBelow", addStepBetween: "addStepBetween" }, outputs: { toggleExpanded: "toggleExpanded", conditionChange: "conditionChange", branchStepChange: "branchStepChange", addStep: "addStep", addStepForLoop: "addStepForLoop", deleteStep: "deleteStep", addBranch: "addBranch", addElse: "addElse", deleteBranch: "deleteBranch", duplicate: "duplicate", delete: "delete", edit: "edit", moreOptions: "moreOptions", viewDetails: "viewDetails", editInDepth: "editInDepth", dndDropInZone: "dndDropInZone", loadMoreDataProfiles: "loadMoreDataProfiles", searchDataProfiles: "searchDataProfiles", stepUpdate: "stepUpdate", clickAction: "clickAction", addStepBetweenClick: "addStepBetweenClick", selectionChange: "selectionChange", openExternal: "openExternal" }, host: { classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "viewDetailsTrigger", first: true, predicate: ["viewDetailsTrigger"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col cqa-border cqa-border-solid cqa-border-[#E5E7EB]\" style=\"min-height: 50px\">\n <!-- Inline Edit Mode: shown in first branch row below when user clicks Edit from branch row (top block hidden) -->\n <div *ngIf=\"false && isEditing\" class=\"cqa-py-2.5 cqa-px-4 cqa-flex cqa-flex-col cqa-gap-3\" (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\" style=\"min-height: 50px\">\n <!-- First Row: CONDITION tag, autocomplete, IF/ELSE indicators, Edit In depth, Cancel/Apply -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-justify-between\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-grow\">\n <!-- CONDITION Tag (orange) -->\n <span class=\"cqa-px-1.5 cqa-rounded-md cqa-text-[#EA580C] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-[#FFEDD5]\">\n CONDITION\n </span>\n\n <!-- First field: left operand (e.g. Usertype) - autocomplete with IF_CONDITION natural text actions -->\n <cqa-autocomplete\n *ngIf=\"editForm\"\n [options]=\"conditionLeftAutocompleteOptions\"\n [value]=\"conditionLeftDisplayValue\"\n (valueChange)=\"onEditFormFieldChange('conditionLeft', $event)\"\n (optionSelect)=\"onConditionLeftSelect($event)\"\n placeholder=\"Select Condition\"\n [fullWidth]=\"true\"\n class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-autocomplete>\n\n <!-- Second Row: Template Variables Section (shown when template is selected, inline before Edit In depth) -->\n <div *ngIf=\"selectedTemplate && templateVariables && templateVariables.length > 0\" class=\"cqa-flex cqa-flex-row cqa-flex-wrap cqa-gap-3\">\n <ng-container *ngFor=\"let variable of templateVariables\">\n <!-- Boolean variables with mat-slide-toggle -->\n <ng-container *ngIf=\"variable.type === 'boolean'\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700\">\n {{ variable.label }}\n </label>\n <mat-slide-toggle\n [checked]=\"templateVariablesForm.get(variable.name)?.value || variable.value || false\"\n (change)=\"templateVariablesForm.get(variable.name)?.setValue($event.checked)\"\n color=\"primary\">\n </mat-slide-toggle>\n </div>\n </ng-container>\n \n <!-- Non-boolean variables -->\n <ng-container *ngIf=\"variable.type !== 'boolean' && variable.name !== 'custom_code'\">\n <!-- Dropdown for select variables -->\n <ng-container *ngIf=\"variable.name === 'type' || variable.name === 'scrollTo' || variable.options\">\n <div class=\"cqa-flex cqa-flex-col\" style=\"min-width: 150px;\">\n <!-- <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n {{ variable.label }}\n </label> -->\n <cqa-dynamic-select \n [form]=\"templateVariablesForm\"\n [config]=\"getSelectConfigForVariable(variable, false)\">\n </cqa-dynamic-select>\n </div>\n </ng-container>\n <!-- Text Input for other variables -->\n <ng-container *ngIf=\"variable.name !== 'type' && variable.name !== 'scrollTo' && !variable.options\">\n <div class=\"cqa-flex cqa-flex-col\" style=\"min-width: 150px;\">\n <!-- <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n {{ variable.label }}\n </label> -->\n <cqa-custom-input\n [placeholder]=\"'Enter ' + variable.label\"\n [value]=\"templateVariablesForm.get(variable.name)?.value || variable.value || ''\"\n [fullWidth]=\"true\"\n (valueChange)=\"templateVariablesForm.get(variable.name)?.setValue($event)\">\n </cqa-custom-input>\n </div>\n </ng-container>\n </ng-container>\n </ng-container>\n </div>\n\n <!-- IF / ELSE indicators -->\n <span class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#DCFCE7] cqa-text-[#008236] cqa-border cqa-border-solid cqa-border-[#B9F8CF] cqa-flex cqa-items-center cqa-gap-1.5\">\n <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6.66634 2L2.99967 5.66667L1.33301 4\" stroke=\"#008236\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n IF\n </span>\n <!-- Add ELSE IF button - disabled when ELSE already exists -->\n <button\n type=\"button\"\n (click)=\"onAddElse()\"\n [disabled]=\"hasElseBranch\"\n class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-transition-colors\"\n [class.cqa-cursor-pointer]=\"!hasElseBranch\"\n [class.cqa-cursor-not-allowed]=\"hasElseBranch\"\n [class.cqa-opacity-60]=\"hasElseBranch\">\n Add ELSE IF\n </button>\n <!-- Add Else button - disabled when ELSE already exists -->\n <button\n type=\"button\"\n (click)=\"onAddElseBranch()\"\n [disabled]=\"hasElseBranch\"\n class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-transition-colors\"\n [class.cqa-cursor-pointer]=\"!hasElseBranch\"\n [class.cqa-cursor-not-allowed]=\"hasElseBranch\"\n [class.cqa-opacity-60]=\"hasElseBranch\">\n Add ELSE\n </button>\n\n <!-- Edit In depth link -->\n <a href=\"#\" (click)=\"onEditInDepth(); $event.preventDefault()\"\n class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-[2px] cqa-no-underline\">\n Edit In depth\n <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg>\n </a> \n </div>\n <!-- Cancel / Apply buttons - shown on IF row when no ELSE IF branches are present -->\n <div *ngIf=\"elseIfBranches.length === 0\" class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <cqa-button variant=\"outlined\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Cancel'\" (clicked)=\"onEditCancel()\"></cqa-button>\n <cqa-button variant=\"filled\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Apply'\" (clicked)=\"onEditApply()\"></cqa-button>\n </div>\n </div>\n \n \n </div>\n\n <!-- Step row: always visible (no template edit here; template edit only in branch row below). Has edit/delete. -->\n <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.padding-left.px]=\"getRowPaddingLeftPx()\"\n [style.border-top]=\"isInsideStepGroup ? '1px solid #BEDBFF' : null\"\n style=\"border-bottom: 1px solid #E5E7EB; min-height: 50px\">\n <!-- Checkbox/Drag Handle column - same structure as normal-step for alignment -->\n <div *ngIf=\"!isInsideStepGroup\" class=\"cqa-inline-flex cqa-items-center\">\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 (ngModelChange)=\"onSelectionChange($event)\"\n class=\"cqa-h-4 cqa-w-4 cqa-cursor-pointer cqa-transition-all cqa-appearance-none cqa-rounded shadow hover:cqa-shadow-md cqa-border cqa-border-solid cqa-border-slate-300 cqa-flex-shrink-0\"\n [class.cqa-bg-[#3F43EE]]=\"selected\"\n [class.cqa-border-[#3F43EE]]=\"selected\"\n id=\"check-condition\" />\n <span class=\"cqa-absolute cqa-text-white cqa-top-1/2 cqa-left-1/2 cqa--translate-x-1/2 cqa--translate-y-1/2 cqa-pointer-events-none cqa-flex cqa-items-center cqa-justify-center\"\n [class.cqa-opacity-0]=\"!selected\"\n [class.cqa-opacity-100]=\"selected\">\n <svg width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 3.125L4.5 8.625L2 6.125\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </span>\n </label>\n </div>\n <!-- Lock: inside step row (same background/border as row when in group) -->\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 <!-- Expand/Collapse Icon -->\n <button type=\"button\" (click)=\"onToggleExpanded()\" class=\"cqa-p-0\">\n <svg [class.cqa-rotate-180]=\"!expanded\" class=\"cqa-transition-transform\" width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M12 10L8 6L4 10\" stroke=\"#6B7280\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button>\n\n <!-- IF/ELSE Icon -->\n <div><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 2V10\" stroke=\"#7B3306\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M12 6C13.1046 6 14 5.10457 14 4C14 2.89543 13.1046 2 12 2C10.8954 2 10 2.89543 10 4C10 5.10457 10.8954 6 12 6Z\"\n stroke=\"#7B3306\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M4 14C5.10457 14 6 13.1046 6 12C6 10.8954 5.10457 10 4 10C2.89543 10 2 10.8954 2 12C2 13.1046 2.89543 14 4 14Z\"\n stroke=\"#7B3306\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M12 6C12 7.5913 11.3679 9.11742 10.2426 10.2426C9.11742 11.3679 7.5913 12 6 12\" stroke=\"#7B3306\"\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg></div>\n\n <!-- IF/ELSE Label -->\n <span class=\"cqa-font-semibold cqa-text-[#7B3306] cqa-text-[12px] cqa-leading-none\">\n CONDITION\n </span>\n\n <!-- Step row: read-only (condition, summary, actions) when not editing step row -->\n <ng-container *ngIf=\"editContext !== 'stepRow'\">\n <!-- First condition text as plain text (no HTML) -->\n <div *ngIf=\"getConditionPlainText()\" class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-ml-2 cqa-flex-1 cqa-flex-wrap cqa-px-1 cqa-min-w-0\">\n <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px] cqa-truncate\">{{ getConditionPlainText() }}</span>\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-ml-auto cqa-flex-wrap cqa-px-1 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 <!-- Branch type badges: IF, ELSE IF (with count), ELSE -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-flex-shrink-0\">\n <span *ngFor=\"let badge of getBranchTypeBadges()\"\n [class]=\"'cqa-inline-flex cqa-items-center cqa-gap-1 cqa-px-2 cqa-py-0.5 cqa-rounded cqa-text-[10px] cqa-leading-[15px] cqa-font-medium ' + badge.badgeClass\">\n {{ badge.label }}\n <ng-container *ngIf=\"badge.count\">+{{ badge.count }}</ng-container>\n </span>\n </div>\n <div\n 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-font-semibold\">\n {{ getStepsSummary() }}\n </div>\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 <!-- 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 </ng-container>\n\n <!-- Step row: edit mode (CONDITION, autocomplete, IF, Add ELSE IF, Add ELSE, Edit In depth, Cancel, Apply) when editContext === 'stepRow' -->\n <ng-container *ngIf=\"editContext === 'stepRow'\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-ml-2 cqa-flex-1 cqa-flex-wrap cqa-min-w-0\">\n <span class=\"cqa-px-1.5 cqa-rounded-md cqa-text-[#EA580C] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-[#FFEDD5]\">CONDITION</span>\n <cqa-autocomplete\n *ngIf=\"editForm\"\n [options]=\"conditionLeftAutocompleteOptions\"\n [value]=\"conditionLeftDisplayValue\"\n (valueChange)=\"onEditFormFieldChange('conditionLeft', $event)\"\n (optionSelect)=\"onConditionLeftSelect($event)\"\n placeholder=\"Select Condition\"\n [fullWidth]=\"true\"\n class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-autocomplete>\n <span class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#DCFCE7] cqa-text-[#008236] cqa-border cqa-border-solid cqa-border-[#B9F8CF] cqa-flex cqa-items-center cqa-gap-1.5\">IF</span>\n <button type=\"button\" (click)=\"onAddElse(0)\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-transition-colors cqa-cursor-pointer\">Add ELSE IF</button>\n <button type=\"button\" (click)=\"onAddElseBranch()\" [disabled]=\"hasElseBranch\" [attr.aria-disabled]=\"hasElseBranch\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-transition-colors\" [class.cqa-cursor-pointer]=\"!hasElseBranch\" [class.cqa-cursor-not-allowed]=\"hasElseBranch\" [class.cqa-opacity-60]=\"hasElseBranch\">Add ELSE</button>\n <a href=\"#\" (click)=\"onEditInDepth(); $event.preventDefault()\" class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-[2px] cqa-no-underline\">Edit In depth<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 </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-flex-shrink-0\">\n <cqa-button variant=\"outlined\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Cancel'\" (clicked)=\"onEditCancel()\"></cqa-button>\n <cqa-button variant=\"filled\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Apply'\" (clicked)=\"onEditApply()\"></cqa-button>\n </div>\n </ng-container>\n </div>\n\n <!-- Expanded Content with Branches (shown when expanded or when editing so edit UI appears in first branch row) -->\n <div *ngIf=\"expanded || isEditing\" class=\"cqa-flex cqa-flex-col\">\n <!-- Branches (IF TRUE, ELSE IF, ELSE) -->\n <ng-container *ngFor=\"let branch of branches; let branchIndex = index\">\n <div class=\"condition-branch-row cqa-flex cqa-flex-col\" [attr.data-branch-id]=\"branch?.id\">\n <!-- Edit mode (IF TRUE branch): shows CONDITION, autocomplete, IF, Add ELSE IF, Add ELSE, Edit In depth, Edit/Delete, Cancel/Apply -->\n <div\n *ngIf=\"editContext === 'branchRow' && branchIndex === 0 && editingBranchIndex === 0\"\n (click)=\"$event.stopPropagation()\"\n (mousedown)=\"$event.stopPropagation()\"\n [class]=\"'cqa-px-4 cqa-py-2.5 cqa-text-[12px] cqa-leading-[15px] cqa-flex cqa-items-center cqa-gap-3 cqa-justify-between cqa-flex-wrap ' + getBranchTextColor(branch) + ' ' + getBranchColorClass(branch)\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-grow cqa-flex-wrap cqa-min-w-0\">\n <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px] cqa-min-w-[32px] cqa-flex-shrink-0\">{{ getBranchDisplayNumber(branchIndex) }}</span>\n <span>{{ getBranchLabel(branch) }}</span>\n <span class=\"cqa-px-1.5 cqa-rounded-md cqa-text-[#EA580C] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-[#FFEDD5]\">CONDITION</span>\n <cqa-autocomplete\n *ngIf=\"editForm\"\n [options]=\"conditionLeftAutocompleteOptions\"\n [value]=\"conditionLeftDisplayValue\"\n (valueChange)=\"onEditFormFieldChange('conditionLeft', $event)\"\n (optionSelect)=\"onConditionLeftSelect($event)\"\n placeholder=\"Select Condition\"\n [fullWidth]=\"true\"\n class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-autocomplete>\n <span class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#DCFCE7] cqa-text-[#008236] cqa-border cqa-border-solid cqa-border-[#B9F8CF] cqa-flex cqa-items-center cqa-gap-1.5\">IF</span>\n <button type=\"button\" (click)=\"onAddElse(0); $event.stopPropagation()\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-transition-colors cqa-cursor-pointer\">Add ELSE IF</button>\n <button type=\"button\" (click)=\"onAddElseBranch(); $event.stopPropagation()\" [disabled]=\"hasElseBranch\" [attr.aria-disabled]=\"hasElseBranch\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-transition-colors\" [class.cqa-cursor-pointer]=\"!hasElseBranch\" [class.cqa-cursor-not-allowed]=\"hasElseBranch\" [class.cqa-opacity-60]=\"hasElseBranch\">Add ELSE</button>\n <a href=\"#\" (click)=\"onEditInDepth(undefined, branch, 0); $event.preventDefault()\" class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-[2px] cqa-no-underline\">Edit In depth<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 </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-flex-shrink-0\">\n <cqa-button variant=\"outlined\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Cancel'\" (clicked)=\"onEditCancel()\"></cqa-button>\n <cqa-button variant=\"filled\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Apply'\" (clicked)=\"onEditApply()\"></cqa-button>\n </div>\n </div>\n <!-- Edit mode (ELSE IF branch): shows CONDITION, autocomplete, Add ELSE IF / Add ELSE, Edit In depth, Cancel/Apply -->\n <div\n *ngIf=\"editContext === 'branchRow' && branchIndex === editingBranchIndex && branch.type === 'else-if'\"\n (click)=\"$event.stopPropagation()\"\n (mousedown)=\"$event.stopPropagation()\"\n [class]=\"'cqa-px-4 cqa-py-2.5 cqa-text-[12px] cqa-leading-[15px] cqa-flex cqa-items-center cqa-gap-3 cqa-justify-between cqa-flex-wrap ' + getBranchTextColor(branch) + ' ' + getBranchColorClass(branch)\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-grow cqa-flex-wrap cqa-min-w-0\">\n <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px] cqa-min-w-[32px] cqa-flex-shrink-0\">{{ getBranchDisplayNumber(branchIndex) }}</span>\n <span>{{ getBranchLabel(branch) }}</span>\n <span class=\"cqa-px-1.5 cqa-rounded-md cqa-text-[#EA580C] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-[#FFEDD5]\">CONDITION</span>\n <!-- ELSE IF condition autocomplete: same options and value model as IF, but initialized from this branch's condition -->\n <cqa-autocomplete\n *ngIf=\"editForm\"\n [options]=\"conditionLeftAutocompleteOptions\"\n [value]=\"conditionLeftDisplayValue\"\n (valueChange)=\"onEditFormFieldChange('conditionLeft', $event)\"\n (optionSelect)=\"onConditionLeftSelect($event)\"\n placeholder=\"Select Condition\"\n [fullWidth]=\"true\"\n class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-autocomplete>\n <button type=\"button\" (click)=\"onAddElse(branchIndex); $event.stopPropagation()\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-transition-colors cqa-cursor-pointer\">Add ELSE IF</button>\n <button type=\"button\" (click)=\"onAddElseBranch(); $event.stopPropagation()\" [disabled]=\"hasElseBranch\" [attr.aria-disabled]=\"hasElseBranch\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-transition-colors\" [class.cqa-cursor-pointer]=\"!hasElseBranch\" [class.cqa-cursor-not-allowed]=\"hasElseBranch\" [class.cqa-opacity-60]=\"hasElseBranch\">Add ELSE</button>\n <a href=\"#\" (click)=\"onEditInDepth(undefined, branch, branchIndex); $event.preventDefault()\" class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-[2px] cqa-no-underline\">Edit In depth<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 </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-flex-shrink-0\">\n <cqa-button variant=\"outlined\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Cancel'\" (clicked)=\"onEditCancel()\"></cqa-button>\n <cqa-button variant=\"filled\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Apply'\" (clicked)=\"onEditApply()\"></cqa-button>\n </div>\n </div>\n <!-- Branch Header (read-only): display when not editing this branch row. Order: branch content (left), then step-actions, then date (right, same as other steps). -->\n <div\n *ngIf=\"editContext !== 'branchRow' || branchIndex !== editingBranchIndex\"\n [class]=\"'cqa-px-4 cqa-py-2 cqa-text-[12px] cqa-leading-[15px] cqa-flex cqa-items-center cqa-gap-2 cqa-justify-between ' + getBranchTextColor(branch) + ' ' + getBranchColorClass(branch)\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-flex-grow cqa-flex-wrap cqa-min-w-0\">\n <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px] cqa-min-w-[32px] cqa-flex-shrink-0\">{{ getBranchDisplayNumber(branchIndex) }}</span>\n <span>{{ getBranchLabel(branch) }}</span>\n <span\n *ngIf=\"getBranchConditionDisplay(branch)\"\n [innerHTML]=\"getBranchConditionDisplay(branch) | cqaSafeHtml\"\n (click)=\"onConditionActionClick($event, branch)\"\n class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px] cqa-action-format\"></span>\n <ng-container *ngIf=\"getBranchEventDetailsForDisplay(branch).length > 0\">\n <span *ngFor=\"let item of getBranchEventDetailsForDisplay(branch)\" class=\"cqa-inline-flex cqa-items-center cqa-gap-1 cqa-py-0.5 cqa-px-2 cqa-rounded cqa-text-[12px] cqa-leading-[15px] cqa-bg-[#F3F4F6] cqa-text-[#374151] cqa-border cqa-border-solid cqa-border-[#E5E7EB]\" (click)=\"onConditionActionClick($event, branch)\">\n <span class=\"cqa-font-medium cqa-text-[#6B7280]\">{{ item.key }}:</span>\n <span class=\"cqa-text-[#111827]\">{{ item.value }}</span>\n </span>\n </ng-container>\n </div>\n <!-- Right section: step-actions then date (same order as other step types) -->\n <div *ngIf=\"editable && !isInsideStepGroup && !isReorder\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-1.5 cqa-pr-2 cqa-flex-shrink-0\">\n <button *ngIf=\"branchIndex === 0 || branch.type === 'else-if'\" type=\"button\" (click)=\"onEditFromBranchRow(branchIndex); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M7 11.6666H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M9.55208 2.1128C9.7843 1.88058 10.0993 1.75012 10.4277 1.75012C10.7561 1.75012 11.071 1.88058 11.3033 2.1128C11.5355 2.34502 11.6659 2.65998 11.6659 2.98838C11.6659 3.31679 11.5355 3.63175 11.3033 3.86397L4.29742 10.8704C4.15864 11.0092 3.9871 11.1107 3.79867 11.1656L2.12333 11.6544C2.07314 11.669 2.01993 11.6699 1.96928 11.6569C1.91863 11.6439 1.8724 11.6176 1.83543 11.5806C1.79846 11.5437 1.7721 11.4974 1.75913 11.4468C1.74615 11.3961 1.74703 11.3429 1.76167 11.2927L2.2505 9.61738C2.30546 9.42916 2.40698 9.25783 2.54567 9.11922L9.55208 2.1128Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </button>\n <button *ngIf=\"branchIndex === 0 || branch.type === 'else-if'\" type=\"button\" (click)=\"onEditFromBranchRow(branchIndex); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"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>\n </button>\n <button type=\"button\" (click)=\"branchIndex === 0 ? onDelete() : onDeleteBranch(branch); $event.stopPropagation()\" title=\"{{ branchIndex === 0 ? 'Delete step' : 'Delete branch' }}\" class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1.75 3.5H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11.0827 3.5V11.6667C11.0827 12.25 10.4993 12.8333 9.91602 12.8333H4.08268C3.49935 12.8333 2.91602 12.25 2.91602 11.6667V3.5\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.66602 3.49996V2.33329C4.66602 1.74996 5.24935 1.16663 5.83268 1.16663H8.16602C8.74935 1.16663 9.33268 1.74996 9.33268 2.33329V3.49996\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M5.83398 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M8.16602 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </button>\n </div>\n <span *ngIf=\"getBranchCreatedDate(branch)\" class=\"step-date cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px] cqa-flex-shrink-0 cqa-ml-auto\">{{ getBranchCreatedDate(branch) | date:'d MMM yyyy' }}</span>\n </div>\n\n <!-- Empty branch inside a step group: no START/END markers -->\n <div\n *ngIf=\"branch.nestedSteps?.length === 0 && isInsideStepGroup\"\n class=\"cqa-grid cqa-w-full cqa-place-items-center cqa-gap-0 cqa-py-[8px] cqa-px-4 cqa-border-0 cqa-text-center cqa-text-[#1C398E] cqa-font-semibold cqa-text-[12px] cqa-leading-[15px] cqa-bg-[rgba(219,234,254,0.5)]\">\n No steps added\n </div>\n\n <!-- START marker per branch: START IF, START ELSE IF, or START ELSE - only when branch has nested steps -->\n <div *ngIf=\"branch.nestedSteps?.length > 0\" class=\"cqa-grid cqa-w-full cqa-place-items-center cqa-gap-0 cqa-py-[8px] cqa-px-4 cqa-border-0 cqa-bg-[rgba(219,234,254,0.5)]\">\n <span class=\"cqa-text-center cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold cqa-whitespace-nowrap cqa-bg-transparent cqa-text-[#1C398E]\">{{ getStartBranchLabel(branch) }} : {{ getBranchMarkerStartStep(branch) }}</span>\n </div>\n\n <!-- Branch Content (Nested Steps \u2013 renderer dispatches by step type, n-level nesting) -->\n <div *ngIf=\"!isReorder || isInsideStepGroup\" class=\"cqa-flex cqa-flex-col\">\n <cqa-test-case-details-renderer\n *ngFor=\"let step of branch.nestedSteps; let i = index\"\n [step]=\"step\"\n [index]=\"i\"\n [selected]=\"$any(step).selected\"\n [branch]=\"branch\"\n [isNested]=\"true\"\n [isInsideStepGroup]=\"isInsideStepGroup\"\n [isReorder]=\"isReorder\"\n [nestingLevel]=\"(nestingLevel || 0) + 1\"\n [addStepBetween]=\"addStepBetween\"\n [editable]=\"editable\"\n [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n [currentTestCaseId]=\"currentTestCaseId\"\n (branchStepChange)=\"onBranchStepChange($event.branch, $event.step, $event.stepIndex)\"\n (addStepForBranch)=\"onAddStep($event.branch)\"\n (addStepForLoop)=\"onAddStepForLoop($event, branch)\"\n (deleteStepWithBranch)=\"onDeleteStep($event.branch, $event.stepIndex)\"\n (delete)=\"onNestedStepDelete($event)\"\n (toggleExpanded)=\"onNestedToggleExpanded($event, branch, step, i)\"\n (groupNameChange)=\"$any(step).groupName = $event; onBranchStepChange(branch, step, i)\"\n (descriptionChange)=\"$any(step).description = $event; onBranchStepChange(branch, step, i)\"\n (reusableChange)=\"$any(step).reusable = $event; onBranchStepChange(branch, step, i)\"\n (openExternal)=\"onNestedOpenExternal($event)\"\n (edit)=\"onNestedEdit($event)\"\n (link)=\"onBranchStepChange(branch, step, i)\"\n (duplicate)=\"onNestedDuplicate($event, step)\"\n (viewDetails)=\"viewDetails.emit($event)\"\n (conditionChange)=\"$any(step).condition = $event; onBranchStepChange(branch, step, i)\"\n (addBranch)=\"onNestedConditionAddBranch($any(step)); onBranchStepChange(branch, step, i)\"\n (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event); onBranchStepChange(branch, step, i)\"\n (testDataProfileChange)=\"$any(step).testDataProfile = $event; onBranchStepChange(branch, step, i)\"\n (startStepChange)=\"$any(step).startStep = $event; onBranchStepChange(branch, step, i)\"\n (endStepChange)=\"$any(step).endStep = $event; onBranchStepChange(branch, step, i)\"\n (maxIterationsChange)=\"$any(step).maxIterations = $event; onBranchStepChange(branch, step, i)\"\n (eventTypeChange)=\"$any(step).eventType = $event; onBranchStepChange(branch, step, i)\"\n (parameterChange)=\"onBranchStepChange(branch, step, i)\"\n (selectionChange)=\"$any(step).selected = $event; onBranchStepChange(branch, step, i)\"\n (loadMoreDataProfiles)=\"loadMoreDataProfiles.emit($event)\"\n (searchDataProfiles)=\"searchDataProfiles.emit($event)\"\n (stepUpdate)=\"stepUpdate.emit($event)\"\n (dndDropInZone)=\"dndDropInZone.emit($event)\"\n (clickAction)=\"onNestedClickAction($event)\"\n (editInDepth)=\"editInDepth.emit($event)\"\n (addStepBetweenClick)=\"addStepBetweenClick.emit($event)\"\n >\n </cqa-test-case-details-renderer>\n </div>\n <div *ngIf=\"isReorder && !isInsideStepGroup\" class=\"cqa-flex cqa-flex-col nested-step-drop-list\"\n [style.min-height.px]=\"branch.nestedSteps.length === 0 ? 52 : null\"\n [dndDropzone]=\"['step']\"\n dndEffectAllowed=\"move\"\n dndDragoverClass=\"dndDragover\"\n (dndDrop)=\"onDndDrop($event, branch)\">\n <div dndPlaceholderRef class=\"step-drag-placeholder-nested cqa-my-1 cqa-min-h-[50px] cqa-border-2 cqa-border-dashed cqa-border-[#3F43EE] cqa-rounded cqa-bg-[rgba(63,67,238,0.08)] cqa-flex cqa-items-center cqa-justify-center cqa-text-[#3F43EE] cqa-text-xs\">Drop here</div>\n <div *ngFor=\"let step of branch.nestedSteps; let i = index\" class=\"nested-step-drag-item\"\n [dndDraggable]=\"step\"\n dndEffectAllowed=\"move\"\n dndType=\"step\">\n <cqa-test-case-details-renderer\n [step]=\"step\"\n [index]=\"i\"\n [selected]=\"$any(step).selected\"\n [branch]=\"branch\"\n [isNested]=\"true\"\n [isInsideStepGroup]=\"isInsideStepGroup\"\n [isReorder]=\"isReorder\"\n [nestingLevel]=\"(nestingLevel || 0) + 1\"\n [addStepBetweenAbove]=\"addStepBetweenAbove\"\n [addStepBetweenBelow]=\"addStepBetweenBelow\"\n [addStepBetween]=\"addStepBetween\"\n [editable]=\"editable\"\n [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n [currentTestCaseId]=\"currentTestCaseId\"\n (branchStepChange)=\"onBranchStepChange($event.branch, $event.step, $event.stepIndex)\"\n (addStepForBranch)=\"onAddStep($event.branch)\"\n (addStepForLoop)=\"onAddStepForLoop($event, branch)\"\n (deleteStepWithBranch)=\"onDeleteStep($event.branch, $event.stepIndex)\"\n (delete)=\"onNestedStepDelete($event)\"\n (toggleExpanded)=\"onNestedToggleExpanded($event, branch, step, i)\"\n (groupNameChange)=\"$any(step).groupName = $event; onBranchStepChange(branch, step, i)\"\n (descriptionChange)=\"$any(step).description = $event; onBranchStepChange(branch, step, i)\"\n (reusableChange)=\"$any(step).reusable = $event; onBranchStepChange(branch, step, i)\"\n (openExternal)=\"onNestedOpenExternal($event)\"\n (edit)=\"onNestedEdit($event)\"\n (link)=\"onBranchStepChange(branch, step, i)\"\n (duplicate)=\"onNestedDuplicate($event, step)\"\n (viewDetails)=\"viewDetails.emit($event)\"\n (conditionChange)=\"$any(step).condition = $event; onBranchStepChange(branch, step, i)\"\n (addBranch)=\"onNestedConditionAddBranch($any(step)); onBranchStepChange(branch, step, i)\"\n (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event); onBranchStepChange(branch, step, i)\"\n (testDataProfileChange)=\"$any(step).testDataProfile = $event; onBranchStepChange(branch, step, i)\"\n (startStepChange)=\"$any(step).startStep = $event; onBranchStepChange(branch, step, i)\"\n (endStepChange)=\"$any(step).endStep = $event; onBranchStepChange(branch, step, i)\"\n (maxIterationsChange)=\"$any(step).maxIterations = $event; onBranchStepChange(branch, step, i)\"\n (eventTypeChange)=\"$any(step).eventType = $event; onBranchStepChange(branch, step, i)\"\n (parameterChange)=\"onBranchStepChange(branch, step, i)\"\n (selectionChange)=\"$any(step).selected = $event; onBranchStepChange(branch, step, i)\"\n (loadMoreDataProfiles)=\"loadMoreDataProfiles.emit($event)\"\n (searchDataProfiles)=\"searchDataProfiles.emit($event)\"\n (stepUpdate)=\"stepUpdate.emit($event)\"\n (dndDropInZone)=\"dndDropInZone.emit($event)\"\n (clickAction)=\"onNestedClickAction($event)\"\n (editInDepth)=\"editInDepth.emit($event)\"\n (addStepBetweenClick)=\"addStepBetweenClick.emit($event)\"\n >\n </cqa-test-case-details-renderer>\n </div>\n </div>\n\n <!-- Empty branch (IF / ELSE IF / ELSE): show plus icon on hover when no steps, same as loop step.\n When rendered inside a step group or when reordering, hide this Add button entirely. -->\n <div *ngIf=\"branch.nestedSteps.length === 0 && editable && !isInsideStepGroup && !isReorder\" class=\"condition-branch-empty cqa-min-h-[52px] cqa-flex cqa-items-center cqa-justify-center cqa-pl-4 cqa-pr-4\">\n <button type=\"button\" (click)=\"onAddStep(branch); $event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\" [attr.title]=\"'Add step to ' + getBranchLabel(branch)\"\n class=\"condition-branch-empty-add\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect x=\"1\" y=\"1\" width=\"21.1822\" height=\"22\" rx=\"10.5911\" fill=\"white\" />\n <rect x=\"1\" y=\"1\" width=\"21.1822\" height=\"22\" rx=\"10.5911\" stroke=\"#3F43EE\" stroke-width=\"2\" />\n <path d=\"M8.5 12H15.5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M12 8.5V15.5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </button>\n </div>\n\n <!-- END marker per branch - only when branch has nested steps -->\n <div *ngIf=\"branch.nestedSteps?.length > 0\" class=\"cqa-grid cqa-w-full cqa-place-items-center cqa-gap-0 cqa-py-[8px] cqa-px-4 cqa-border-0 cqa-bg-[rgba(219,234,254,0.5)]\">\n <span class=\"cqa-text-center cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold cqa-whitespace-nowrap cqa-bg-transparent cqa-text-[#1C398E]\">{{ getEndBranchLabel(branch) }} : {{ getBranchMarkerEndStep(branch) }}</span>\n </div>\n </div>\n\n <!-- Inline ELSE IF add forms: shown at the end of the branch that triggered \"Add ELSE IF\" -->\n <ng-container *ngIf=\"isEditing\">\n <div *ngFor=\"let elseIfBranch of getElseIfBranchesForBranchIndex(branchIndex)\"\n class=\"cqa-py-2.5 cqa-px-1 cqa-flex cqa-flex-col cqa-gap-3 cqa-border-t cqa-border-solid cqa-border-[#E5E7EB]\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-justify-between\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-grow\">\n <!-- Remove ELSE IF button -->\n <button\n type=\"button\"\n (click)=\"onRemoveElse(elseIfBranch.id)\"\n class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#F3F4F6] cqa-text-[#99A1AF] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-cursor-pointer hover:cqa-bg-[#E5E7EB] cqa-transition-colors\">\n Remove ELSE IF\n </button>\n\n <!-- ELSE IF autocomplete field -->\n <cqa-autocomplete\n *ngIf=\"elseIfBranch.form\"\n [options]=\"conditionLeftAutocompleteOptions\"\n [value]=\"elseIfBranch.form.get('conditionLeft')?.value ?? ''\"\n (valueChange)=\"elseIfBranch.form.get('conditionLeft')?.setValue($event)\"\n (optionSelect)=\"onElseConditionLeftSelect($event, elseIfBranch.id)\"\n placeholder=\"Select Condition\"\n [fullWidth]=\"true\"\n [compact]=\"true\"\n class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-autocomplete>\n\n <!-- ELSE IF Template Variables Section -->\n <div *ngIf=\"elseIfBranch.selectedTemplate && elseIfBranch.templateVariables && elseIfBranch.templateVariables.length > 0\" class=\"cqa-flex cqa-flex-row cqa-flex-wrap cqa-gap-3\">\n <ng-container *ngFor=\"let variable of elseIfBranch.templateVariables\">\n <ng-container *ngIf=\"variable.type === 'boolean'\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <mat-slide-toggle\n [checked]=\"elseIfBranch.templateVariablesForm.get(variable.name)?.value || variable.value || false\"\n (change)=\"elseIfBranch.templateVariablesForm.get(variable.name)?.setValue($event.checked)\"\n color=\"primary\">\n </mat-slide-toggle>\n </div>\n </ng-container>\n <ng-container *ngIf=\"variable.type !== 'boolean' && variable.name !== 'custom_code'\">\n <ng-container *ngIf=\"variable.name === 'type' || variable.name === 'scrollTo' || variable.options\">\n <div class=\"cqa-flex cqa-flex-col\" style=\"min-width: 150px;\">\n <cqa-dynamic-select\n [form]=\"elseIfBranch.templateVariablesForm\"\n [config]=\"getSelectConfigForVariable(variable, elseIfBranch.id)\">\n </cqa-dynamic-select>\n </div>\n </ng-container>\n <ng-container *ngIf=\"variable.name !== 'type' && variable.name !== 'scrollTo' && !variable.options\">\n <div class=\"cqa-flex cqa-flex-col\" style=\"min-width: 150px;\">\n <cqa-custom-input\n [value]=\"elseIfBranch.templateVariablesForm.get(variable.name)?.value || variable.value || ''\"\n (valueChange)=\"elseIfBranch.templateVariablesForm.get(variable.name)?.setValue($event)\"\n [placeholder]=\"variable.label\">\n </cqa-custom-input>\n </div>\n </ng-container>\n </ng-container>\n </ng-container>\n </div>\n\n <!-- Edit In depth link -->\n <a href=\"#\" (click)=\"onEditInDepth(elseIfBranch.selectedTemplate || undefined, null, undefined, true, elseIfBranch, elseIfBranch.insertAfterBranchId); $event.preventDefault()\"\n class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-[2px] cqa-no-underline\">\n Edit In depth\n <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg>\n </a>\n </div>\n <!-- Cancel / Apply shown on the last pending ELSE IF form across all branches -->\n <div *ngIf=\"isLastElseIfBranch(elseIfBranch.id)\" class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <cqa-button variant=\"outlined\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Cancel'\" (clicked)=\"onEditCancel()\"></cqa-button>\n <cqa-button variant=\"filled\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Apply'\" (clicked)=\"onEditApply()\"></cqa-button>\n </div>\n </div>\n </div>\n </ng-container>\n </ng-container><!-- end branch ng-container -->\n <!-- END CONDITION: final marker after all branches -->\n <div class=\"cqa-grid cqa-w-full cqa-place-items-center cqa-gap-0 cqa-py-[8px] cqa-px-4 cqa-border-0 cqa-bg-[rgba(219,234,254,0.5)]\">\n <span class=\"cqa-text-center cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold cqa-whitespace-nowrap cqa-bg-transparent cqa-text-[#1C398E]\">END CONDITION : {{ getEndConditionMarkerStepDisplay() }}</span>\n </div>\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", ".nested-step-drop-list:has(.step-drag-placeholder-nested:only-child){min-height:52px}.condition-branch-empty{opacity:1;transition:opacity .1s ease}.condition-branch-row:hover .step-actions{opacity:1}.condition-branch-empty-add{padding:0;background:transparent;border:0;cursor:pointer;color:#3f43ee;transition:opacity .15s ease}.condition-branch-empty-add:hover{opacity:.9}\n"], components: [{ type: AutocompleteComponent, selector: "cqa-autocomplete", inputs: ["placeholder", "options", "value", "disabled", "showClear", "ariaLabel", "autoFocus", "size", "fullWidth", "compact"], outputs: ["valueChange", "optionSelect", "cleared"] }, { type: i3$4.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { type: DynamicSelectFieldComponent, selector: "cqa-dynamic-select", inputs: ["form", "config"], outputs: ["selectionChange", "selectClick", "searchChange", "loadMore", "addCustomValue"] }, { type: CustomInputComponent, selector: "cqa-custom-input", inputs: ["label", "type", "placeholder", "value", "disabled", "errors", "required", "ariaLabel", "size", "fullWidth", "maxLength", "showCharCount", "inputInlineStyle", "labelInlineStyle"], outputs: ["valueChange", "blurred", "focused", "enterPressed"] }, { type: ButtonComponent, selector: "cqa-button", inputs: ["variant", "btnSize", "disabled", "icon", "iconPosition", "fullWidth", "iconColor", "type", "text", "customClass", "inlineStyles", "tooltip", "tooltipPosition"], outputs: ["clicked"] }, { type: TestCaseDetailsRendererComponent, selector: "cqa-test-case-details-renderer", inputs: ["step", "index", "isNested", "isInsideLoop", "isInsideStepGroup", "nestingLevel", "branch", "isReorder", "selected", "isDuplicating", "addStepBetweenAbove", "addStepBetweenBelow", "addStepBetween", "editable", "currentTestCaseId", "dataProfileOptions", "hasMoreDataProfiles", "isLoadingDataProfiles", "naturalTextActionsOptions", "setConditionTemplateVariables"], outputs: ["nestedStepChange", "addStep", "deleteStep", "toggleExpanded", "groupNameChange", "descriptionChange", "reusableChange", "openExternal", "edit", "link", "duplicate", "delete", "viewDetails", "selectionChange", "conditionChange", "branchStepChange", "addStepForBranch", "addStepForLoop", "deleteStepWithBranch", "addBranch", "addElse", "deleteBranch", "testDataProfileChange", "startStepChange", "endStepChange", "maxIterationsChange", "eventTypeChange", "parameterChange", "clickAction", "dndDropInZone", "loadMoreDataProfiles", "searchDataProfiles", "stepUpdate", "addStepBetweenClick", "editInDepth"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i6$1.DndDropzoneDirective, selector: "[dndDropzone]", inputs: ["dndDropzone", "dndEffectAllowed", "dndAllowExternal", "dndHorizontal", "dndDragoverClass", "dndDropzoneDisabledClass", "dndDisableIf", "dndDisableDropIf"], outputs: ["dndDragover", "dndDrop"] }, { type: i6$1.DndPlaceholderRefDirective, selector: "[dndPlaceholderRef]" }, { type: i6$1.DndDraggableDirective, selector: "[dndDraggable]", inputs: ["dndDraggable", "dndEffectAllowed", "dndType", "dndDraggingClass", "dndDraggingSourceClass", "dndDraggableDisabledClass", "dndDragImageOffsetFunction", "dndDisableIf", "dndDisableDragIf"], outputs: ["dndStart", "dndDrag", "dndEnd", "dndMoved", "dndCopied", "dndLinked", "dndCanceled"] }], pipes: { "date": i2.DatePipe, "cqaSafeHtml": SafeHtmlPipe } });
|
|
26168
26262
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseConditionStepComponent, decorators: [{
|
|
26169
26263
|
type: Component,
|
|
26170
26264
|
args: [{ selector: 'cqa-test-case-condition-step', host: { class: 'cqa-ui-root' }, styles: [
|
|
26171
26265
|
STEP_ROW_ACTIONS_STYLES,
|
|
26172
26266
|
CONDITION_BRANCH_EMPTY_STYLES,
|
|
26173
|
-
], template: "<div [class]=\"'cqa-flex cqa-flex-col cqa-border cqa-border-solid cqa-border-[#E5E7EB] ' + (isNested ? ' cqa-pl-[24px]' : '')\" style=\"min-height: 50px\">\n <!-- Inline Edit Mode: shown in first branch row below when user clicks Edit from branch row (top block hidden) -->\n <div *ngIf=\"false && isEditing\" class=\"cqa-py-2.5 cqa-px-4 cqa-flex cqa-flex-col cqa-gap-3\" (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\" style=\"min-height: 50px\">\n <!-- First Row: CONDITION tag, autocomplete, IF/ELSE indicators, Edit In depth, Cancel/Apply -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-justify-between\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-grow\">\n <!-- CONDITION Tag (orange) -->\n <span class=\"cqa-px-1.5 cqa-rounded-md cqa-text-[#EA580C] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-[#FFEDD5]\">\n CONDITION\n </span>\n\n <!-- First field: left operand (e.g. Usertype) - autocomplete with IF_CONDITION natural text actions -->\n <cqa-autocomplete\n *ngIf=\"editForm\"\n [options]=\"conditionLeftAutocompleteOptions\"\n [value]=\"conditionLeftDisplayValue\"\n (valueChange)=\"onEditFormFieldChange('conditionLeft', $event)\"\n (optionSelect)=\"onConditionLeftSelect($event)\"\n placeholder=\"Select Condition\"\n [fullWidth]=\"true\"\n class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-autocomplete>\n\n <!-- Second Row: Template Variables Section (shown when template is selected, inline before Edit In depth) -->\n <div *ngIf=\"selectedTemplate && templateVariables && templateVariables.length > 0\" class=\"cqa-flex cqa-flex-row cqa-flex-wrap cqa-gap-3\">\n <ng-container *ngFor=\"let variable of templateVariables\">\n <!-- Boolean variables with mat-slide-toggle -->\n <ng-container *ngIf=\"variable.type === 'boolean'\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700\">\n {{ variable.label }}\n </label>\n <mat-slide-toggle\n [checked]=\"templateVariablesForm.get(variable.name)?.value || variable.value || false\"\n (change)=\"templateVariablesForm.get(variable.name)?.setValue($event.checked)\"\n color=\"primary\">\n </mat-slide-toggle>\n </div>\n </ng-container>\n \n <!-- Non-boolean variables -->\n <ng-container *ngIf=\"variable.type !== 'boolean' && variable.name !== 'custom_code'\">\n <!-- Dropdown for select variables -->\n <ng-container *ngIf=\"variable.name === 'type' || variable.name === 'scrollTo' || variable.options\">\n <div class=\"cqa-flex cqa-flex-col\" style=\"min-width: 150px;\">\n <!-- <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n {{ variable.label }}\n </label> -->\n <cqa-dynamic-select \n [form]=\"templateVariablesForm\"\n [config]=\"getSelectConfigForVariable(variable, false)\">\n </cqa-dynamic-select>\n </div>\n </ng-container>\n <!-- Text Input for other variables -->\n <ng-container *ngIf=\"variable.name !== 'type' && variable.name !== 'scrollTo' && !variable.options\">\n <div class=\"cqa-flex cqa-flex-col\" style=\"min-width: 150px;\">\n <!-- <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n {{ variable.label }}\n </label> -->\n <cqa-custom-input\n [placeholder]=\"'Enter ' + variable.label\"\n [value]=\"templateVariablesForm.get(variable.name)?.value || variable.value || ''\"\n [fullWidth]=\"true\"\n (valueChange)=\"templateVariablesForm.get(variable.name)?.setValue($event)\">\n </cqa-custom-input>\n </div>\n </ng-container>\n </ng-container>\n </ng-container>\n </div>\n\n <!-- IF / ELSE indicators -->\n <span class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#DCFCE7] cqa-text-[#008236] cqa-border cqa-border-solid cqa-border-[#B9F8CF] cqa-flex cqa-items-center cqa-gap-1.5\">\n <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6.66634 2L2.99967 5.66667L1.33301 4\" stroke=\"#008236\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n IF\n </span>\n <!-- Add ELSE IF button - disabled when ELSE already exists -->\n <button\n type=\"button\"\n (click)=\"onAddElse()\"\n [disabled]=\"hasElseBranch\"\n class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-transition-colors\"\n [class.cqa-cursor-pointer]=\"!hasElseBranch\"\n [class.cqa-cursor-not-allowed]=\"hasElseBranch\"\n [class.cqa-opacity-60]=\"hasElseBranch\">\n Add ELSE IF\n </button>\n <!-- Add Else button - disabled when ELSE already exists -->\n <button\n type=\"button\"\n (click)=\"onAddElseBranch()\"\n [disabled]=\"hasElseBranch\"\n class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-transition-colors\"\n [class.cqa-cursor-pointer]=\"!hasElseBranch\"\n [class.cqa-cursor-not-allowed]=\"hasElseBranch\"\n [class.cqa-opacity-60]=\"hasElseBranch\">\n Add ELSE\n </button>\n\n <!-- Edit In depth link -->\n <a href=\"#\" (click)=\"onEditInDepth(); $event.preventDefault()\"\n class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-[2px] cqa-no-underline\">\n Edit In depth\n <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg>\n </a> \n </div>\n <!-- Cancel / Apply buttons - shown on IF row when no ELSE IF branches are present -->\n <div *ngIf=\"elseIfBranches.length === 0\" class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <cqa-button variant=\"outlined\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Cancel'\" (clicked)=\"onEditCancel()\"></cqa-button>\n <cqa-button variant=\"filled\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Apply'\" (clicked)=\"onEditApply()\"></cqa-button>\n </div>\n </div>\n \n \n </div>\n\n <!-- Step row: always visible (no template edit here; template edit only in branch row below). Has edit/delete. -->\n <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.padding-left.px]=\"getRowPaddingLeftPx()\"\n style=\"border-bottom: 1px solid #E5E7EB; min-height: 50px\">\n <!-- Checkbox/Drag Handle column - same structure as normal-step for alignment -->\n <div class=\"cqa-inline-flex cqa-items-center\">\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 (ngModelChange)=\"onSelectionChange($event)\"\n class=\"cqa-h-4 cqa-w-4 cqa-cursor-pointer cqa-transition-all cqa-appearance-none cqa-rounded shadow hover:cqa-shadow-md cqa-border cqa-border-solid cqa-border-slate-300 cqa-flex-shrink-0\"\n [class.cqa-bg-[#3F43EE]]=\"selected\"\n [class.cqa-border-[#3F43EE]]=\"selected\"\n id=\"check-condition\" />\n <span class=\"cqa-absolute cqa-text-white cqa-top-1/2 cqa-left-1/2 cqa--translate-x-1/2 cqa--translate-y-1/2 cqa-pointer-events-none cqa-flex cqa-items-center cqa-justify-center\"\n [class.cqa-opacity-0]=\"!selected\"\n [class.cqa-opacity-100]=\"selected\">\n <svg width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 3.125L4.5 8.625L2 6.125\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </span>\n </label>\n </div>\n <div *ngIf=\"isInsideStepGroup\" class=\"cqa-ml-1 cqa-mr-1 cqa-text-[#9CA3AF]\">\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 <!-- Expand/Collapse Icon -->\n <button type=\"button\" (click)=\"onToggleExpanded()\" class=\"cqa-p-0\">\n <svg [class.cqa-rotate-180]=\"!expanded\" class=\"cqa-transition-transform\" width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M12 10L8 6L4 10\" stroke=\"#6B7280\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button>\n\n <!-- IF/ELSE Icon -->\n <div><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 2V10\" stroke=\"#7B3306\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M12 6C13.1046 6 14 5.10457 14 4C14 2.89543 13.1046 2 12 2C10.8954 2 10 2.89543 10 4C10 5.10457 10.8954 6 12 6Z\"\n stroke=\"#7B3306\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M4 14C5.10457 14 6 13.1046 6 12C6 10.8954 5.10457 10 4 10C2.89543 10 2 10.8954 2 12C2 13.1046 2.89543 14 4 14Z\"\n stroke=\"#7B3306\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M12 6C12 7.5913 11.3679 9.11742 10.2426 10.2426C9.11742 11.3679 7.5913 12 6 12\" stroke=\"#7B3306\"\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg></div>\n\n <!-- IF/ELSE Label -->\n <span class=\"cqa-font-semibold cqa-text-[#7B3306] cqa-text-[12px] cqa-leading-none\">\n CONDITION\n </span>\n\n <!-- Step row: read-only (condition, summary, actions) when not editing step row -->\n <ng-container *ngIf=\"editContext !== 'stepRow'\">\n <!-- First condition text as plain text (no HTML) -->\n <div *ngIf=\"getConditionPlainText()\" class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-ml-2 cqa-flex-1 cqa-flex-wrap cqa-px-1 cqa-min-w-0\">\n <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px] cqa-truncate\">{{ getConditionPlainText() }}</span>\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-ml-auto cqa-flex-wrap cqa-px-1 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 <!-- Branch type badges: IF, ELSE IF (with count), ELSE -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-flex-shrink-0\">\n <span *ngFor=\"let badge of getBranchTypeBadges()\"\n [class]=\"'cqa-inline-flex cqa-items-center cqa-gap-1 cqa-px-2 cqa-py-0.5 cqa-rounded cqa-text-[10px] cqa-leading-[15px] cqa-font-medium ' + badge.badgeClass\">\n {{ badge.label }}\n <ng-container *ngIf=\"badge.count\">+{{ badge.count }}</ng-container>\n </span>\n </div>\n <div\n class=\"cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-rounded-lg cqa-py-0.5 cqa-px-2 cqa-text-[#0A0A0A] cqa-text-[12px] cqa-leading-[15px]\">\n {{ getStepsSummary() }}\n </div>\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 <a href=\"#\" (click)=\"onEditInDepth(); $event.preventDefault()\" class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-1 cqa-no-underline\">Edit In depth<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 </ng-container>\n\n <!-- Step row: edit mode (CONDITION, autocomplete, IF, Add ELSE IF, Add ELSE, Edit In depth, Cancel, Apply) when editContext === 'stepRow' -->\n <ng-container *ngIf=\"editContext === 'stepRow'\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-ml-2 cqa-flex-1 cqa-flex-wrap cqa-min-w-0\">\n <span class=\"cqa-px-1.5 cqa-rounded-md cqa-text-[#EA580C] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-[#FFEDD5]\">CONDITION</span>\n <cqa-autocomplete\n *ngIf=\"editForm\"\n [options]=\"conditionLeftAutocompleteOptions\"\n [value]=\"conditionLeftDisplayValue\"\n (valueChange)=\"onEditFormFieldChange('conditionLeft', $event)\"\n (optionSelect)=\"onConditionLeftSelect($event)\"\n placeholder=\"Select Condition\"\n [fullWidth]=\"true\"\n class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-autocomplete>\n <span class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#DCFCE7] cqa-text-[#008236] cqa-border cqa-border-solid cqa-border-[#B9F8CF] cqa-flex cqa-items-center cqa-gap-1.5\">IF</span>\n <button type=\"button\" (click)=\"onAddElse()\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-transition-colors cqa-cursor-pointer\">Add ELSE IF</button>\n <button type=\"button\" (click)=\"onAddElseBranch()\" [disabled]=\"hasElseBranch\" [attr.aria-disabled]=\"hasElseBranch\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-transition-colors\" [class.cqa-cursor-pointer]=\"!hasElseBranch\" [class.cqa-cursor-not-allowed]=\"hasElseBranch\" [class.cqa-opacity-60]=\"hasElseBranch\">Add ELSE</button>\n <a href=\"#\" (click)=\"onEditInDepth(); $event.preventDefault()\" class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-[2px] cqa-no-underline\">Edit In depth<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 </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-flex-shrink-0\">\n <cqa-button variant=\"outlined\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Cancel'\" (clicked)=\"onEditCancel()\"></cqa-button>\n <cqa-button variant=\"filled\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Apply'\" (clicked)=\"onEditApply()\"></cqa-button>\n </div>\n </ng-container>\n </div>\n\n <!-- ELSE IF Sections in Edit Mode - shown below step row when editing and has ELSE IF branches -->\n <ng-container *ngFor=\"let branch of elseIfBranches; let i = index\">\n <div *ngIf=\"isEditing\" class=\"cqa-py-2.5 cqa-px-1 cqa-flex cqa-flex-col cqa-gap-3 cqa-border-t cqa-border-solid cqa-border-[#E5E7EB]\">\n <!-- First Row: Remove ELSE IF button, autocomplete, Edit In depth, Cancel/Apply -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-justify-between\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-grow\">\n <!-- Remove ELSE IF button -->\n <button\n type=\"button\"\n (click)=\"onRemoveElse(branch.id)\"\n class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#F3F4F6] cqa-text-[#99A1AF] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-cursor-pointer hover:cqa-bg-[#E5E7EB] cqa-transition-colors\">\n Remove ELSE IF\n </button>\n\n <!-- ELSE IF autocomplete field: same as IF condition -->\n <cqa-autocomplete\n *ngIf=\"branch.form\"\n [options]=\"conditionLeftAutocompleteOptions\"\n [value]=\"branch.form.get('conditionLeft')?.value ?? ''\"\n (valueChange)=\"branch.form.get('conditionLeft')?.setValue($event)\"\n (optionSelect)=\"onElseConditionLeftSelect($event, branch.id)\"\n placeholder=\"Select Condition\"\n [fullWidth]=\"true\"\n [compact]=\"true\"\n class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-autocomplete>\n \n <!-- Second Row: ELSE IF Template Variables Section (shown when template is selected, inline before Edit In depth) -->\n <div *ngIf=\"branch.selectedTemplate && branch.templateVariables && branch.templateVariables.length > 0\" class=\"cqa-flex cqa-flex-row cqa-flex-wrap cqa-gap-3\">\n <ng-container *ngFor=\"let variable of branch.templateVariables\">\n <!-- Boolean variables with mat-slide-toggle -->\n <ng-container *ngIf=\"variable.type === 'boolean'\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <mat-slide-toggle\n [checked]=\"branch.templateVariablesForm.get(variable.name)?.value || variable.value || false\"\n (change)=\"branch.templateVariablesForm.get(variable.name)?.setValue($event.checked)\"\n color=\"primary\">\n </mat-slide-toggle>\n </div>\n </ng-container>\n \n <!-- Non-boolean variables -->\n <ng-container *ngIf=\"variable.type !== 'boolean' && variable.name !== 'custom_code'\">\n <ng-container *ngIf=\"variable.name === 'type' || variable.name === 'scrollTo' || variable.options\">\n <div class=\"cqa-flex cqa-flex-col\" style=\"min-width: 150px;\">\n <cqa-dynamic-select \n [form]=\"branch.templateVariablesForm\"\n [config]=\"getSelectConfigForVariable(variable, branch.id)\">\n </cqa-dynamic-select>\n </div>\n </ng-container>\n \n <ng-container *ngIf=\"variable.name !== 'type' && variable.name !== 'scrollTo' && !variable.options\">\n <div class=\"cqa-flex cqa-flex-col\" style=\"min-width: 150px;\">\n <cqa-custom-input\n [value]=\"branch.templateVariablesForm.get(variable.name)?.value || variable.value || ''\"\n (valueChange)=\"branch.templateVariablesForm.get(variable.name)?.setValue($event)\"\n [placeholder]=\"variable.label\">\n </cqa-custom-input>\n </div>\n </ng-container>\n </ng-container>\n </ng-container>\n </div>\n\n <!-- Edit In depth link: branch.id is a temporary UI-only id (not in saved branches),\n so pass isCreateMode=true with the branch object directly instead of looking it up -->\n <a href=\"#\" (click)=\"onEditInDepth(branch.selectedTemplate || undefined, null, undefined, true, branch, getInsertAfterBranchId()); $event.preventDefault()\"\n class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-[2px] cqa-no-underline\">\n Edit In depth\n <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg>\n </a>\n </div>\n <!-- Cancel / Apply buttons - shown in last ELSE IF row -->\n <div *ngIf=\"i === elseIfBranches.length - 1\" class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <cqa-button variant=\"outlined\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Cancel'\" (clicked)=\"onEditCancel()\"></cqa-button>\n <cqa-button variant=\"filled\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Apply'\" (clicked)=\"onEditApply()\"></cqa-button>\n </div>\n </div>\n </div>\n </ng-container>\n\n <!-- Expanded Content with Branches (shown when expanded or when editing so edit UI appears in first branch row) -->\n <div *ngIf=\"expanded || isEditing\" class=\"cqa-flex cqa-flex-col\">\n <!-- Branches (IF TRUE, ELSE IF, ELSE) -->\n <div *ngFor=\"let branch of branches; let branchIndex = index\" class=\"condition-branch-row cqa-flex cqa-flex-col\" [attr.data-branch-id]=\"branch?.id\">\n <!-- Edit mode (IF TRUE branch): shows CONDITION, autocomplete, IF, Add ELSE IF, Add ELSE, Edit In depth, Edit/Delete, Cancel/Apply -->\n <div\n *ngIf=\"editContext === 'branchRow' && branchIndex === 0 && editingBranchIndex === 0\"\n (click)=\"$event.stopPropagation()\"\n (mousedown)=\"$event.stopPropagation()\"\n [class]=\"'cqa-px-1 cqa-py-2.5 cqa-text-[12px] cqa-leading-[15px] cqa-flex cqa-items-center cqa-gap-3 cqa-justify-between cqa-flex-wrap ' + getBranchTextColor(branch) + ' ' + getBranchColorClass(branch)\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-grow cqa-flex-wrap cqa-min-w-0\">\n <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px] cqa-min-w-[32px] cqa-flex-shrink-0\">{{ getBranchDisplayNumber(branchIndex) }}</span>\n <span>{{ getBranchLabel(branch) }}</span>\n <span class=\"cqa-px-1.5 cqa-rounded-md cqa-text-[#EA580C] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-[#FFEDD5]\">CONDITION</span>\n <cqa-autocomplete\n *ngIf=\"editForm\"\n [options]=\"conditionLeftAutocompleteOptions\"\n [value]=\"conditionLeftDisplayValue\"\n (valueChange)=\"onEditFormFieldChange('conditionLeft', $event)\"\n (optionSelect)=\"onConditionLeftSelect($event)\"\n placeholder=\"Select Condition\"\n [fullWidth]=\"true\"\n class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-autocomplete>\n <span class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#DCFCE7] cqa-text-[#008236] cqa-border cqa-border-solid cqa-border-[#B9F8CF] cqa-flex cqa-items-center cqa-gap-1.5\">IF</span>\n <button type=\"button\" (click)=\"onAddElse(); $event.stopPropagation()\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-transition-colors cqa-cursor-pointer\">Add ELSE IF</button>\n <button type=\"button\" (click)=\"onAddElseBranch(); $event.stopPropagation()\" [disabled]=\"hasElseBranch\" [attr.aria-disabled]=\"hasElseBranch\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-transition-colors\" [class.cqa-cursor-pointer]=\"!hasElseBranch\" [class.cqa-cursor-not-allowed]=\"hasElseBranch\" [class.cqa-opacity-60]=\"hasElseBranch\">Add ELSE</button>\n <a href=\"#\" (click)=\"onEditInDepth(undefined, branch, 0); $event.preventDefault()\" class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-[2px] cqa-no-underline\">Edit In depth<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 </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-flex-shrink-0\">\n <cqa-button variant=\"outlined\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Cancel'\" (clicked)=\"onEditCancel()\"></cqa-button>\n <cqa-button variant=\"filled\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Apply'\" (clicked)=\"onEditApply()\"></cqa-button>\n </div>\n </div>\n <!-- Edit mode (ELSE IF branch): shows CONDITION, autocomplete, Add ELSE IF / Add ELSE, Edit In depth, Cancel/Apply -->\n <div\n *ngIf=\"editContext === 'branchRow' && branchIndex === editingBranchIndex && branch.type === 'else-if'\"\n (click)=\"$event.stopPropagation()\"\n (mousedown)=\"$event.stopPropagation()\"\n [class]=\"'cqa-px-1 cqa-py-2.5 cqa-text-[12px] cqa-leading-[15px] cqa-flex cqa-items-center cqa-gap-3 cqa-justify-between cqa-flex-wrap ' + getBranchTextColor(branch) + ' ' + getBranchColorClass(branch)\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-grow cqa-flex-wrap cqa-min-w-0\">\n <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px] cqa-min-w-[32px] cqa-flex-shrink-0\">{{ getBranchDisplayNumber(branchIndex) }}</span>\n <span>{{ getBranchLabel(branch) }}</span>\n <span class=\"cqa-px-1.5 cqa-rounded-md cqa-text-[#EA580C] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-[#FFEDD5]\">CONDITION</span>\n <!-- ELSE IF condition autocomplete: same options and value model as IF, but initialized from this branch's condition -->\n <cqa-autocomplete\n *ngIf=\"editForm\"\n [options]=\"conditionLeftAutocompleteOptions\"\n [value]=\"conditionLeftDisplayValue\"\n (valueChange)=\"onEditFormFieldChange('conditionLeft', $event)\"\n (optionSelect)=\"onConditionLeftSelect($event)\"\n placeholder=\"Select Condition\"\n [fullWidth]=\"true\"\n class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-autocomplete>\n <button type=\"button\" (click)=\"onAddElse(); $event.stopPropagation()\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-transition-colors cqa-cursor-pointer\">Add ELSE IF</button>\n <button type=\"button\" (click)=\"onAddElseBranch(); $event.stopPropagation()\" [disabled]=\"hasElseBranch\" [attr.aria-disabled]=\"hasElseBranch\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-transition-colors\" [class.cqa-cursor-pointer]=\"!hasElseBranch\" [class.cqa-cursor-not-allowed]=\"hasElseBranch\" [class.cqa-opacity-60]=\"hasElseBranch\">Add ELSE</button>\n <a href=\"#\" (click)=\"onEditInDepth(undefined, branch, branchIndex); $event.preventDefault()\" class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-[2px] cqa-no-underline\">Edit In depth<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 </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-flex-shrink-0\">\n <cqa-button variant=\"outlined\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Cancel'\" (clicked)=\"onEditCancel()\"></cqa-button>\n <cqa-button variant=\"filled\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Apply'\" (clicked)=\"onEditApply()\"></cqa-button>\n </div>\n </div>\n <!-- Branch Header (read-only): display when not editing this branch row. Order: branch content (left), then step-actions, then date (right, same as other steps). -->\n <div\n *ngIf=\"editContext !== 'branchRow' || branchIndex !== editingBranchIndex\"\n [class]=\"'cqa-px-4 cqa-py-2 cqa-text-[12px] cqa-leading-[15px] cqa-flex cqa-items-center cqa-gap-2 cqa-justify-between ' + getBranchTextColor(branch) + ' ' + getBranchColorClass(branch)\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-flex-grow cqa-flex-wrap cqa-min-w-0\">\n <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px] cqa-min-w-[32px] cqa-flex-shrink-0\">{{ getBranchDisplayNumber(branchIndex) }}</span>\n <span>{{ getBranchLabel(branch) }}</span>\n <span\n *ngIf=\"getBranchConditionDisplay(branch)\"\n [innerHTML]=\"getBranchConditionDisplay(branch) | cqaSafeHtml\"\n (click)=\"onConditionActionClick($event, branch)\"\n class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px] cqa-action-format\"></span>\n <ng-container *ngIf=\"getBranchEventDetailsForDisplay(branch).length > 0\">\n <span *ngFor=\"let item of getBranchEventDetailsForDisplay(branch)\" class=\"cqa-inline-flex cqa-items-center cqa-gap-1 cqa-py-0.5 cqa-px-2 cqa-rounded cqa-text-[12px] cqa-leading-[15px] cqa-bg-[#F3F4F6] cqa-text-[#374151] cqa-border cqa-border-solid cqa-border-[#E5E7EB]\" (click)=\"onConditionActionClick($event, branch)\">\n <span class=\"cqa-font-medium cqa-text-[#6B7280]\">{{ item.key }}:</span>\n <span class=\"cqa-text-[#111827]\">{{ item.value }}</span>\n </span>\n </ng-container>\n </div>\n <!-- Right section: step-actions then date (same order as other step types) -->\n <div *ngIf=\"editable && !isInsideStepGroup && !isReorder\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-1.5 cqa-pr-2 cqa-flex-shrink-0\">\n <button *ngIf=\"branchIndex === 0 || branch.type === 'else-if'\" type=\"button\" (click)=\"onEditFromBranchRow(branchIndex); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M7 11.6666H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M9.55208 2.1128C9.7843 1.88058 10.0993 1.75012 10.4277 1.75012C10.7561 1.75012 11.071 1.88058 11.3033 2.1128C11.5355 2.34502 11.6659 2.65998 11.6659 2.98838C11.6659 3.31679 11.5355 3.63175 11.3033 3.86397L4.29742 10.8704C4.15864 11.0092 3.9871 11.1107 3.79867 11.1656L2.12333 11.6544C2.07314 11.669 2.01993 11.6699 1.96928 11.6569C1.91863 11.6439 1.8724 11.6176 1.83543 11.5806C1.79846 11.5437 1.7721 11.4974 1.75913 11.4468C1.74615 11.3961 1.74703 11.3429 1.76167 11.2927L2.2505 9.61738C2.30546 9.42916 2.40698 9.25783 2.54567 9.11922L9.55208 2.1128Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </button>\n <button *ngIf=\"branchIndex === 0 || branch.type === 'else-if'\" type=\"button\" (click)=\"onEditFromBranchRow(branchIndex); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"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>\n </button>\n <button type=\"button\" (click)=\"branchIndex === 0 ? onDelete() : onDeleteBranch(branch); $event.stopPropagation()\" title=\"{{ branchIndex === 0 ? 'Delete step' : 'Delete branch' }}\" class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1.75 3.5H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11.0827 3.5V11.6667C11.0827 12.25 10.4993 12.8333 9.91602 12.8333H4.08268C3.49935 12.8333 2.91602 12.25 2.91602 11.6667V3.5\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.66602 3.49996V2.33329C4.66602 1.74996 5.24935 1.16663 5.83268 1.16663H8.16602C8.74935 1.16663 9.33268 1.74996 9.33268 2.33329V3.49996\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M5.83398 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M8.16602 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </button>\n </div>\n <span *ngIf=\"getBranchCreatedDate(branch)\" class=\"step-date cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px] cqa-flex-shrink-0 cqa-ml-auto\">{{ getBranchCreatedDate(branch) | date:'d MMM yyyy' }}</span>\n </div>\n\n <!-- START marker per branch: START IF, START ELSE IF, or START ELSE (centered with decorative lines) - only when branch has nested steps -->\n <div *ngIf=\"branch.nestedSteps?.length > 0\" class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-py-1 cqa-px-4\" style=\"border-top: 1px solid #E5E7EB;\">\n <span class=\"cqa-flex-1 cqa-self-stretch cqa-border-t cqa-border-dashed cqa-border-[#7B3306] cqa-opacity-40\" style=\"min-width: 20px;\"></span>\n <span class=\"cqa-text-[#7B3306] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-whitespace-nowrap\">{{ getStartBranchLabel(branch) }}</span>\n <span class=\"cqa-flex-1 cqa-self-stretch cqa-border-t cqa-border-dashed cqa-border-[#7B3306] cqa-opacity-40\" style=\"min-width: 20px;\"></span>\n </div>\n\n <!-- Branch Content (Nested Steps \u2013 renderer dispatches by step type, n-level nesting) -->\n <div *ngIf=\"!isReorder || isInsideStepGroup\" class=\"cqa-flex cqa-flex-col\">\n <cqa-test-case-details-renderer\n *ngFor=\"let step of branch.nestedSteps; let i = index\"\n [step]=\"step\"\n [index]=\"i\"\n [selected]=\"$any(step).selected\"\n [branch]=\"branch\"\n [isNested]=\"true\"\n [isInsideStepGroup]=\"isInsideStepGroup\"\n [isReorder]=\"isReorder\"\n [nestingLevel]=\"(nestingLevel || 0) + 1\"\n [addStepBetween]=\"addStepBetween\"\n [editable]=\"editable\"\n [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n (branchStepChange)=\"onBranchStepChange($event.branch, $event.step, $event.stepIndex)\"\n (addStepForBranch)=\"onAddStep($event.branch)\"\n (addStepForLoop)=\"onAddStepForLoop($event, branch)\"\n (deleteStepWithBranch)=\"onDeleteStep($event.branch, $event.stepIndex)\"\n (delete)=\"onNestedStepDelete($event)\"\n (toggleExpanded)=\"onNestedToggleExpanded($event, branch, step, i)\"\n (groupNameChange)=\"$any(step).groupName = $event; onBranchStepChange(branch, step, i)\"\n (descriptionChange)=\"$any(step).description = $event; onBranchStepChange(branch, step, i)\"\n (reusableChange)=\"$any(step).reusable = $event; onBranchStepChange(branch, step, i)\"\n (openExternal)=\"onNestedOpenExternal($event)\"\n (edit)=\"onNestedEdit($event)\"\n (link)=\"onBranchStepChange(branch, step, i)\"\n (duplicate)=\"onNestedDuplicate($event, step)\"\n (viewDetails)=\"viewDetails.emit($event)\"\n (conditionChange)=\"$any(step).condition = $event; onBranchStepChange(branch, step, i)\"\n (addBranch)=\"onNestedConditionAddBranch($any(step)); onBranchStepChange(branch, step, i)\"\n (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event); onBranchStepChange(branch, step, i)\"\n (testDataProfileChange)=\"$any(step).testDataProfile = $event; onBranchStepChange(branch, step, i)\"\n (startStepChange)=\"$any(step).startStep = $event; onBranchStepChange(branch, step, i)\"\n (endStepChange)=\"$any(step).endStep = $event; onBranchStepChange(branch, step, i)\"\n (maxIterationsChange)=\"$any(step).maxIterations = $event; onBranchStepChange(branch, step, i)\"\n (eventTypeChange)=\"$any(step).eventType = $event; onBranchStepChange(branch, step, i)\"\n (parameterChange)=\"onBranchStepChange(branch, step, i)\"\n (selectionChange)=\"$any(step).selected = $event; onBranchStepChange(branch, step, i)\"\n (loadMoreDataProfiles)=\"loadMoreDataProfiles.emit($event)\"\n (searchDataProfiles)=\"searchDataProfiles.emit($event)\"\n (stepUpdate)=\"stepUpdate.emit($event)\"\n (dndDropInZone)=\"dndDropInZone.emit($event)\"\n (clickAction)=\"onNestedClickAction($event)\"\n (editInDepth)=\"editInDepth.emit($event)\"\n (addStepBetweenClick)=\"addStepBetweenClick.emit($event)\"\n >\n </cqa-test-case-details-renderer>\n </div>\n <div *ngIf=\"isReorder && !isInsideStepGroup\" class=\"cqa-flex cqa-flex-col nested-step-drop-list\"\n [style.min-height.px]=\"branch.nestedSteps.length === 0 ? 52 : null\"\n [dndDropzone]=\"['step']\"\n dndEffectAllowed=\"move\"\n dndDragoverClass=\"dndDragover\"\n (dndDrop)=\"onDndDrop($event, branch)\">\n <div dndPlaceholderRef class=\"step-drag-placeholder-nested cqa-my-1 cqa-min-h-[50px] cqa-border-2 cqa-border-dashed cqa-border-[#3F43EE] cqa-rounded cqa-bg-[rgba(63,67,238,0.08)] cqa-flex cqa-items-center cqa-justify-center cqa-text-[#3F43EE] cqa-text-xs\">Drop here</div>\n <div *ngFor=\"let step of branch.nestedSteps; let i = index\" class=\"nested-step-drag-item\"\n [dndDraggable]=\"step\"\n dndEffectAllowed=\"move\"\n dndType=\"step\">\n <cqa-test-case-details-renderer\n [step]=\"step\"\n [index]=\"i\"\n [selected]=\"$any(step).selected\"\n [branch]=\"branch\"\n [isNested]=\"true\"\n [isInsideStepGroup]=\"isInsideStepGroup\"\n [isReorder]=\"isReorder\"\n [nestingLevel]=\"(nestingLevel || 0) + 1\"\n [addStepBetweenAbove]=\"addStepBetweenAbove\"\n [addStepBetweenBelow]=\"addStepBetweenBelow\"\n [addStepBetween]=\"addStepBetween\"\n [editable]=\"editable\"\n [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n (branchStepChange)=\"onBranchStepChange($event.branch, $event.step, $event.stepIndex)\"\n (addStepForBranch)=\"onAddStep($event.branch)\"\n (addStepForLoop)=\"onAddStepForLoop($event, branch)\"\n (deleteStepWithBranch)=\"onDeleteStep($event.branch, $event.stepIndex)\"\n (delete)=\"onNestedStepDelete($event)\"\n (toggleExpanded)=\"onNestedToggleExpanded($event, branch, step, i)\"\n (groupNameChange)=\"$any(step).groupName = $event; onBranchStepChange(branch, step, i)\"\n (descriptionChange)=\"$any(step).description = $event; onBranchStepChange(branch, step, i)\"\n (reusableChange)=\"$any(step).reusable = $event; onBranchStepChange(branch, step, i)\"\n (openExternal)=\"onNestedOpenExternal($event)\"\n (edit)=\"onNestedEdit($event)\"\n (link)=\"onBranchStepChange(branch, step, i)\"\n (duplicate)=\"onNestedDuplicate($event, step)\"\n (viewDetails)=\"viewDetails.emit($event)\"\n (conditionChange)=\"$any(step).condition = $event; onBranchStepChange(branch, step, i)\"\n (addBranch)=\"onNestedConditionAddBranch($any(step)); onBranchStepChange(branch, step, i)\"\n (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event); onBranchStepChange(branch, step, i)\"\n (testDataProfileChange)=\"$any(step).testDataProfile = $event; onBranchStepChange(branch, step, i)\"\n (startStepChange)=\"$any(step).startStep = $event; onBranchStepChange(branch, step, i)\"\n (endStepChange)=\"$any(step).endStep = $event; onBranchStepChange(branch, step, i)\"\n (maxIterationsChange)=\"$any(step).maxIterations = $event; onBranchStepChange(branch, step, i)\"\n (eventTypeChange)=\"$any(step).eventType = $event; onBranchStepChange(branch, step, i)\"\n (parameterChange)=\"onBranchStepChange(branch, step, i)\"\n (selectionChange)=\"$any(step).selected = $event; onBranchStepChange(branch, step, i)\"\n (loadMoreDataProfiles)=\"loadMoreDataProfiles.emit($event)\"\n (searchDataProfiles)=\"searchDataProfiles.emit($event)\"\n (stepUpdate)=\"stepUpdate.emit($event)\"\n (dndDropInZone)=\"dndDropInZone.emit($event)\"\n (clickAction)=\"onNestedClickAction($event)\"\n (editInDepth)=\"editInDepth.emit($event)\"\n (addStepBetweenClick)=\"addStepBetweenClick.emit($event)\"\n >\n </cqa-test-case-details-renderer>\n </div>\n </div>\n\n <!-- Empty branch (IF / ELSE IF / ELSE): show plus icon on hover when no steps, same as loop step.\n When rendered inside a step group or when reordering, hide this Add button entirely. -->\n <div *ngIf=\"branch.nestedSteps.length === 0 && editable && !isInsideStepGroup && !isReorder\" class=\"condition-branch-empty cqa-min-h-[52px] cqa-flex cqa-items-center cqa-justify-center cqa-pl-4 cqa-pr-4\">\n <button type=\"button\" (click)=\"onAddStep(branch); $event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\" [attr.title]=\"'Add step to ' + getBranchLabel(branch)\"\n class=\"condition-branch-empty-add\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect x=\"1\" y=\"1\" width=\"21.1822\" height=\"22\" rx=\"10.5911\" fill=\"white\" />\n <rect x=\"1\" y=\"1\" width=\"21.1822\" height=\"22\" rx=\"10.5911\" stroke=\"#3F43EE\" stroke-width=\"2\" />\n <path d=\"M8.5 12H15.5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M12 8.5V15.5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </button>\n </div>\n\n <!-- END marker per branch: END IF, END ELSE IF, or END ELSE - only when branch has nested steps -->\n <div *ngIf=\"branch.nestedSteps?.length > 0\" class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-py-1 cqa-px-4\" style=\"border-top: 1px solid #E5E7EB;\">\n <span class=\"cqa-flex-1 cqa-self-stretch cqa-border-t cqa-border-dashed cqa-border-[#7B3306] cqa-opacity-40\" style=\"min-width: 20px;\"></span>\n <span class=\"cqa-text-[#7B3306] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-whitespace-nowrap\">{{ getEndBranchLabel(branch) }}</span>\n <span class=\"cqa-flex-1 cqa-self-stretch cqa-border-t cqa-border-dashed cqa-border-[#7B3306] cqa-opacity-40\" style=\"min-width: 20px;\"></span>\n </div>\n </div>\n <!-- END CONDITION: final marker after all branches -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-py-1 cqa-px-4\" style=\"border-top: 1px solid #E5E7EB;\">\n <span class=\"cqa-flex-1 cqa-self-stretch cqa-border-t cqa-border-dashed cqa-border-[#7B3306] cqa-opacity-40\" style=\"min-width: 20px;\"></span>\n <span class=\"cqa-text-[#7B3306] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-whitespace-nowrap\">END CONDITION</span>\n <span class=\"cqa-flex-1 cqa-self-stretch cqa-border-t cqa-border-dashed cqa-border-[#7B3306] cqa-opacity-40\" style=\"min-width: 20px;\"></span>\n </div>\n </div>\n</div>" }]
|
|
26267
|
+
], template: "<div class=\"cqa-flex cqa-flex-col cqa-border cqa-border-solid cqa-border-[#E5E7EB]\" style=\"min-height: 50px\">\n <!-- Inline Edit Mode: shown in first branch row below when user clicks Edit from branch row (top block hidden) -->\n <div *ngIf=\"false && isEditing\" class=\"cqa-py-2.5 cqa-px-4 cqa-flex cqa-flex-col cqa-gap-3\" (click)=\"$event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\" style=\"min-height: 50px\">\n <!-- First Row: CONDITION tag, autocomplete, IF/ELSE indicators, Edit In depth, Cancel/Apply -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-justify-between\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-grow\">\n <!-- CONDITION Tag (orange) -->\n <span class=\"cqa-px-1.5 cqa-rounded-md cqa-text-[#EA580C] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-[#FFEDD5]\">\n CONDITION\n </span>\n\n <!-- First field: left operand (e.g. Usertype) - autocomplete with IF_CONDITION natural text actions -->\n <cqa-autocomplete\n *ngIf=\"editForm\"\n [options]=\"conditionLeftAutocompleteOptions\"\n [value]=\"conditionLeftDisplayValue\"\n (valueChange)=\"onEditFormFieldChange('conditionLeft', $event)\"\n (optionSelect)=\"onConditionLeftSelect($event)\"\n placeholder=\"Select Condition\"\n [fullWidth]=\"true\"\n class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-autocomplete>\n\n <!-- Second Row: Template Variables Section (shown when template is selected, inline before Edit In depth) -->\n <div *ngIf=\"selectedTemplate && templateVariables && templateVariables.length > 0\" class=\"cqa-flex cqa-flex-row cqa-flex-wrap cqa-gap-3\">\n <ng-container *ngFor=\"let variable of templateVariables\">\n <!-- Boolean variables with mat-slide-toggle -->\n <ng-container *ngIf=\"variable.type === 'boolean'\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700\">\n {{ variable.label }}\n </label>\n <mat-slide-toggle\n [checked]=\"templateVariablesForm.get(variable.name)?.value || variable.value || false\"\n (change)=\"templateVariablesForm.get(variable.name)?.setValue($event.checked)\"\n color=\"primary\">\n </mat-slide-toggle>\n </div>\n </ng-container>\n \n <!-- Non-boolean variables -->\n <ng-container *ngIf=\"variable.type !== 'boolean' && variable.name !== 'custom_code'\">\n <!-- Dropdown for select variables -->\n <ng-container *ngIf=\"variable.name === 'type' || variable.name === 'scrollTo' || variable.options\">\n <div class=\"cqa-flex cqa-flex-col\" style=\"min-width: 150px;\">\n <!-- <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n {{ variable.label }}\n </label> -->\n <cqa-dynamic-select \n [form]=\"templateVariablesForm\"\n [config]=\"getSelectConfigForVariable(variable, false)\">\n </cqa-dynamic-select>\n </div>\n </ng-container>\n <!-- Text Input for other variables -->\n <ng-container *ngIf=\"variable.name !== 'type' && variable.name !== 'scrollTo' && !variable.options\">\n <div class=\"cqa-flex cqa-flex-col\" style=\"min-width: 150px;\">\n <!-- <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n {{ variable.label }}\n </label> -->\n <cqa-custom-input\n [placeholder]=\"'Enter ' + variable.label\"\n [value]=\"templateVariablesForm.get(variable.name)?.value || variable.value || ''\"\n [fullWidth]=\"true\"\n (valueChange)=\"templateVariablesForm.get(variable.name)?.setValue($event)\">\n </cqa-custom-input>\n </div>\n </ng-container>\n </ng-container>\n </ng-container>\n </div>\n\n <!-- IF / ELSE indicators -->\n <span class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#DCFCE7] cqa-text-[#008236] cqa-border cqa-border-solid cqa-border-[#B9F8CF] cqa-flex cqa-items-center cqa-gap-1.5\">\n <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6.66634 2L2.99967 5.66667L1.33301 4\" stroke=\"#008236\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n IF\n </span>\n <!-- Add ELSE IF button - disabled when ELSE already exists -->\n <button\n type=\"button\"\n (click)=\"onAddElse()\"\n [disabled]=\"hasElseBranch\"\n class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-transition-colors\"\n [class.cqa-cursor-pointer]=\"!hasElseBranch\"\n [class.cqa-cursor-not-allowed]=\"hasElseBranch\"\n [class.cqa-opacity-60]=\"hasElseBranch\">\n Add ELSE IF\n </button>\n <!-- Add Else button - disabled when ELSE already exists -->\n <button\n type=\"button\"\n (click)=\"onAddElseBranch()\"\n [disabled]=\"hasElseBranch\"\n class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-transition-colors\"\n [class.cqa-cursor-pointer]=\"!hasElseBranch\"\n [class.cqa-cursor-not-allowed]=\"hasElseBranch\"\n [class.cqa-opacity-60]=\"hasElseBranch\">\n Add ELSE\n </button>\n\n <!-- Edit In depth link -->\n <a href=\"#\" (click)=\"onEditInDepth(); $event.preventDefault()\"\n class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-[2px] cqa-no-underline\">\n Edit In depth\n <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg>\n </a> \n </div>\n <!-- Cancel / Apply buttons - shown on IF row when no ELSE IF branches are present -->\n <div *ngIf=\"elseIfBranches.length === 0\" class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <cqa-button variant=\"outlined\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Cancel'\" (clicked)=\"onEditCancel()\"></cqa-button>\n <cqa-button variant=\"filled\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Apply'\" (clicked)=\"onEditApply()\"></cqa-button>\n </div>\n </div>\n \n \n </div>\n\n <!-- Step row: always visible (no template edit here; template edit only in branch row below). Has edit/delete. -->\n <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.padding-left.px]=\"getRowPaddingLeftPx()\"\n [style.border-top]=\"isInsideStepGroup ? '1px solid #BEDBFF' : null\"\n style=\"border-bottom: 1px solid #E5E7EB; min-height: 50px\">\n <!-- Checkbox/Drag Handle column - same structure as normal-step for alignment -->\n <div *ngIf=\"!isInsideStepGroup\" class=\"cqa-inline-flex cqa-items-center\">\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 (ngModelChange)=\"onSelectionChange($event)\"\n class=\"cqa-h-4 cqa-w-4 cqa-cursor-pointer cqa-transition-all cqa-appearance-none cqa-rounded shadow hover:cqa-shadow-md cqa-border cqa-border-solid cqa-border-slate-300 cqa-flex-shrink-0\"\n [class.cqa-bg-[#3F43EE]]=\"selected\"\n [class.cqa-border-[#3F43EE]]=\"selected\"\n id=\"check-condition\" />\n <span class=\"cqa-absolute cqa-text-white cqa-top-1/2 cqa-left-1/2 cqa--translate-x-1/2 cqa--translate-y-1/2 cqa-pointer-events-none cqa-flex cqa-items-center cqa-justify-center\"\n [class.cqa-opacity-0]=\"!selected\"\n [class.cqa-opacity-100]=\"selected\">\n <svg width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 3.125L4.5 8.625L2 6.125\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </span>\n </label>\n </div>\n <!-- Lock: inside step row (same background/border as row when in group) -->\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 <!-- Expand/Collapse Icon -->\n <button type=\"button\" (click)=\"onToggleExpanded()\" class=\"cqa-p-0\">\n <svg [class.cqa-rotate-180]=\"!expanded\" class=\"cqa-transition-transform\" width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M12 10L8 6L4 10\" stroke=\"#6B7280\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button>\n\n <!-- IF/ELSE Icon -->\n <div><svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 2V10\" stroke=\"#7B3306\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M12 6C13.1046 6 14 5.10457 14 4C14 2.89543 13.1046 2 12 2C10.8954 2 10 2.89543 10 4C10 5.10457 10.8954 6 12 6Z\"\n stroke=\"#7B3306\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M4 14C5.10457 14 6 13.1046 6 12C6 10.8954 5.10457 10 4 10C2.89543 10 2 10.8954 2 12C2 13.1046 2.89543 14 4 14Z\"\n stroke=\"#7B3306\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M12 6C12 7.5913 11.3679 9.11742 10.2426 10.2426C9.11742 11.3679 7.5913 12 6 12\" stroke=\"#7B3306\"\n stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg></div>\n\n <!-- IF/ELSE Label -->\n <span class=\"cqa-font-semibold cqa-text-[#7B3306] cqa-text-[12px] cqa-leading-none\">\n CONDITION\n </span>\n\n <!-- Step row: read-only (condition, summary, actions) when not editing step row -->\n <ng-container *ngIf=\"editContext !== 'stepRow'\">\n <!-- First condition text as plain text (no HTML) -->\n <div *ngIf=\"getConditionPlainText()\" class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-ml-2 cqa-flex-1 cqa-flex-wrap cqa-px-1 cqa-min-w-0\">\n <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px] cqa-truncate\">{{ getConditionPlainText() }}</span>\n </div>\n\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-ml-auto cqa-flex-wrap cqa-px-1 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 <!-- Branch type badges: IF, ELSE IF (with count), ELSE -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-1.5 cqa-flex-shrink-0\">\n <span *ngFor=\"let badge of getBranchTypeBadges()\"\n [class]=\"'cqa-inline-flex cqa-items-center cqa-gap-1 cqa-px-2 cqa-py-0.5 cqa-rounded cqa-text-[10px] cqa-leading-[15px] cqa-font-medium ' + badge.badgeClass\">\n {{ badge.label }}\n <ng-container *ngIf=\"badge.count\">+{{ badge.count }}</ng-container>\n </span>\n </div>\n <div\n 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-font-semibold\">\n {{ getStepsSummary() }}\n </div>\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 <!-- 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 </ng-container>\n\n <!-- Step row: edit mode (CONDITION, autocomplete, IF, Add ELSE IF, Add ELSE, Edit In depth, Cancel, Apply) when editContext === 'stepRow' -->\n <ng-container *ngIf=\"editContext === 'stepRow'\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-ml-2 cqa-flex-1 cqa-flex-wrap cqa-min-w-0\">\n <span class=\"cqa-px-1.5 cqa-rounded-md cqa-text-[#EA580C] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-[#FFEDD5]\">CONDITION</span>\n <cqa-autocomplete\n *ngIf=\"editForm\"\n [options]=\"conditionLeftAutocompleteOptions\"\n [value]=\"conditionLeftDisplayValue\"\n (valueChange)=\"onEditFormFieldChange('conditionLeft', $event)\"\n (optionSelect)=\"onConditionLeftSelect($event)\"\n placeholder=\"Select Condition\"\n [fullWidth]=\"true\"\n class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-autocomplete>\n <span class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#DCFCE7] cqa-text-[#008236] cqa-border cqa-border-solid cqa-border-[#B9F8CF] cqa-flex cqa-items-center cqa-gap-1.5\">IF</span>\n <button type=\"button\" (click)=\"onAddElse(0)\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-transition-colors cqa-cursor-pointer\">Add ELSE IF</button>\n <button type=\"button\" (click)=\"onAddElseBranch()\" [disabled]=\"hasElseBranch\" [attr.aria-disabled]=\"hasElseBranch\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-transition-colors\" [class.cqa-cursor-pointer]=\"!hasElseBranch\" [class.cqa-cursor-not-allowed]=\"hasElseBranch\" [class.cqa-opacity-60]=\"hasElseBranch\">Add ELSE</button>\n <a href=\"#\" (click)=\"onEditInDepth(); $event.preventDefault()\" class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-[2px] cqa-no-underline\">Edit In depth<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 </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-flex-shrink-0\">\n <cqa-button variant=\"outlined\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Cancel'\" (clicked)=\"onEditCancel()\"></cqa-button>\n <cqa-button variant=\"filled\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Apply'\" (clicked)=\"onEditApply()\"></cqa-button>\n </div>\n </ng-container>\n </div>\n\n <!-- Expanded Content with Branches (shown when expanded or when editing so edit UI appears in first branch row) -->\n <div *ngIf=\"expanded || isEditing\" class=\"cqa-flex cqa-flex-col\">\n <!-- Branches (IF TRUE, ELSE IF, ELSE) -->\n <ng-container *ngFor=\"let branch of branches; let branchIndex = index\">\n <div class=\"condition-branch-row cqa-flex cqa-flex-col\" [attr.data-branch-id]=\"branch?.id\">\n <!-- Edit mode (IF TRUE branch): shows CONDITION, autocomplete, IF, Add ELSE IF, Add ELSE, Edit In depth, Edit/Delete, Cancel/Apply -->\n <div\n *ngIf=\"editContext === 'branchRow' && branchIndex === 0 && editingBranchIndex === 0\"\n (click)=\"$event.stopPropagation()\"\n (mousedown)=\"$event.stopPropagation()\"\n [class]=\"'cqa-px-4 cqa-py-2.5 cqa-text-[12px] cqa-leading-[15px] cqa-flex cqa-items-center cqa-gap-3 cqa-justify-between cqa-flex-wrap ' + getBranchTextColor(branch) + ' ' + getBranchColorClass(branch)\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-grow cqa-flex-wrap cqa-min-w-0\">\n <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px] cqa-min-w-[32px] cqa-flex-shrink-0\">{{ getBranchDisplayNumber(branchIndex) }}</span>\n <span>{{ getBranchLabel(branch) }}</span>\n <span class=\"cqa-px-1.5 cqa-rounded-md cqa-text-[#EA580C] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-[#FFEDD5]\">CONDITION</span>\n <cqa-autocomplete\n *ngIf=\"editForm\"\n [options]=\"conditionLeftAutocompleteOptions\"\n [value]=\"conditionLeftDisplayValue\"\n (valueChange)=\"onEditFormFieldChange('conditionLeft', $event)\"\n (optionSelect)=\"onConditionLeftSelect($event)\"\n placeholder=\"Select Condition\"\n [fullWidth]=\"true\"\n class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-autocomplete>\n <span class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#DCFCE7] cqa-text-[#008236] cqa-border cqa-border-solid cqa-border-[#B9F8CF] cqa-flex cqa-items-center cqa-gap-1.5\">IF</span>\n <button type=\"button\" (click)=\"onAddElse(0); $event.stopPropagation()\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-transition-colors cqa-cursor-pointer\">Add ELSE IF</button>\n <button type=\"button\" (click)=\"onAddElseBranch(); $event.stopPropagation()\" [disabled]=\"hasElseBranch\" [attr.aria-disabled]=\"hasElseBranch\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-transition-colors\" [class.cqa-cursor-pointer]=\"!hasElseBranch\" [class.cqa-cursor-not-allowed]=\"hasElseBranch\" [class.cqa-opacity-60]=\"hasElseBranch\">Add ELSE</button>\n <a href=\"#\" (click)=\"onEditInDepth(undefined, branch, 0); $event.preventDefault()\" class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-[2px] cqa-no-underline\">Edit In depth<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 </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-flex-shrink-0\">\n <cqa-button variant=\"outlined\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Cancel'\" (clicked)=\"onEditCancel()\"></cqa-button>\n <cqa-button variant=\"filled\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Apply'\" (clicked)=\"onEditApply()\"></cqa-button>\n </div>\n </div>\n <!-- Edit mode (ELSE IF branch): shows CONDITION, autocomplete, Add ELSE IF / Add ELSE, Edit In depth, Cancel/Apply -->\n <div\n *ngIf=\"editContext === 'branchRow' && branchIndex === editingBranchIndex && branch.type === 'else-if'\"\n (click)=\"$event.stopPropagation()\"\n (mousedown)=\"$event.stopPropagation()\"\n [class]=\"'cqa-px-4 cqa-py-2.5 cqa-text-[12px] cqa-leading-[15px] cqa-flex cqa-items-center cqa-gap-3 cqa-justify-between cqa-flex-wrap ' + getBranchTextColor(branch) + ' ' + getBranchColorClass(branch)\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-grow cqa-flex-wrap cqa-min-w-0\">\n <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px] cqa-min-w-[32px] cqa-flex-shrink-0\">{{ getBranchDisplayNumber(branchIndex) }}</span>\n <span>{{ getBranchLabel(branch) }}</span>\n <span class=\"cqa-px-1.5 cqa-rounded-md cqa-text-[#EA580C] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-[#FFEDD5]\">CONDITION</span>\n <!-- ELSE IF condition autocomplete: same options and value model as IF, but initialized from this branch's condition -->\n <cqa-autocomplete\n *ngIf=\"editForm\"\n [options]=\"conditionLeftAutocompleteOptions\"\n [value]=\"conditionLeftDisplayValue\"\n (valueChange)=\"onEditFormFieldChange('conditionLeft', $event)\"\n (optionSelect)=\"onConditionLeftSelect($event)\"\n placeholder=\"Select Condition\"\n [fullWidth]=\"true\"\n class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-autocomplete>\n <button type=\"button\" (click)=\"onAddElse(branchIndex); $event.stopPropagation()\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-transition-colors cqa-cursor-pointer\">Add ELSE IF</button>\n <button type=\"button\" (click)=\"onAddElseBranch(); $event.stopPropagation()\" [disabled]=\"hasElseBranch\" [attr.aria-disabled]=\"hasElseBranch\" class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-transition-colors\" [class.cqa-cursor-pointer]=\"!hasElseBranch\" [class.cqa-cursor-not-allowed]=\"hasElseBranch\" [class.cqa-opacity-60]=\"hasElseBranch\">Add ELSE</button>\n <a href=\"#\" (click)=\"onEditInDepth(undefined, branch, branchIndex); $event.preventDefault()\" class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-[2px] cqa-no-underline\">Edit In depth<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 </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-flex-shrink-0\">\n <cqa-button variant=\"outlined\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Cancel'\" (clicked)=\"onEditCancel()\"></cqa-button>\n <cqa-button variant=\"filled\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Apply'\" (clicked)=\"onEditApply()\"></cqa-button>\n </div>\n </div>\n <!-- Branch Header (read-only): display when not editing this branch row. Order: branch content (left), then step-actions, then date (right, same as other steps). -->\n <div\n *ngIf=\"editContext !== 'branchRow' || branchIndex !== editingBranchIndex\"\n [class]=\"'cqa-px-4 cqa-py-2 cqa-text-[12px] cqa-leading-[15px] cqa-flex cqa-items-center cqa-gap-2 cqa-justify-between ' + getBranchTextColor(branch) + ' ' + getBranchColorClass(branch)\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-flex-grow cqa-flex-wrap cqa-min-w-0\">\n <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px] cqa-min-w-[32px] cqa-flex-shrink-0\">{{ getBranchDisplayNumber(branchIndex) }}</span>\n <span>{{ getBranchLabel(branch) }}</span>\n <span\n *ngIf=\"getBranchConditionDisplay(branch)\"\n [innerHTML]=\"getBranchConditionDisplay(branch) | cqaSafeHtml\"\n (click)=\"onConditionActionClick($event, branch)\"\n class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px] cqa-action-format\"></span>\n <ng-container *ngIf=\"getBranchEventDetailsForDisplay(branch).length > 0\">\n <span *ngFor=\"let item of getBranchEventDetailsForDisplay(branch)\" class=\"cqa-inline-flex cqa-items-center cqa-gap-1 cqa-py-0.5 cqa-px-2 cqa-rounded cqa-text-[12px] cqa-leading-[15px] cqa-bg-[#F3F4F6] cqa-text-[#374151] cqa-border cqa-border-solid cqa-border-[#E5E7EB]\" (click)=\"onConditionActionClick($event, branch)\">\n <span class=\"cqa-font-medium cqa-text-[#6B7280]\">{{ item.key }}:</span>\n <span class=\"cqa-text-[#111827]\">{{ item.value }}</span>\n </span>\n </ng-container>\n </div>\n <!-- Right section: step-actions then date (same order as other step types) -->\n <div *ngIf=\"editable && !isInsideStepGroup && !isReorder\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-1.5 cqa-pr-2 cqa-flex-shrink-0\">\n <button *ngIf=\"branchIndex === 0 || branch.type === 'else-if'\" type=\"button\" (click)=\"onEditFromBranchRow(branchIndex); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M7 11.6666H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M9.55208 2.1128C9.7843 1.88058 10.0993 1.75012 10.4277 1.75012C10.7561 1.75012 11.071 1.88058 11.3033 2.1128C11.5355 2.34502 11.6659 2.65998 11.6659 2.98838C11.6659 3.31679 11.5355 3.63175 11.3033 3.86397L4.29742 10.8704C4.15864 11.0092 3.9871 11.1107 3.79867 11.1656L2.12333 11.6544C2.07314 11.669 2.01993 11.6699 1.96928 11.6569C1.91863 11.6439 1.8724 11.6176 1.83543 11.5806C1.79846 11.5437 1.7721 11.4974 1.75913 11.4468C1.74615 11.3961 1.74703 11.3429 1.76167 11.2927L2.2505 9.61738C2.30546 9.42916 2.40698 9.25783 2.54567 9.11922L9.55208 2.1128Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </button>\n <button *ngIf=\"branchIndex === 0 || branch.type === 'else-if'\" type=\"button\" (click)=\"onEditFromBranchRow(branchIndex); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"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>\n </button>\n <button type=\"button\" (click)=\"branchIndex === 0 ? onDelete() : onDeleteBranch(branch); $event.stopPropagation()\" title=\"{{ branchIndex === 0 ? 'Delete step' : 'Delete branch' }}\" class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1.75 3.5H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11.0827 3.5V11.6667C11.0827 12.25 10.4993 12.8333 9.91602 12.8333H4.08268C3.49935 12.8333 2.91602 12.25 2.91602 11.6667V3.5\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.66602 3.49996V2.33329C4.66602 1.74996 5.24935 1.16663 5.83268 1.16663H8.16602C8.74935 1.16663 9.33268 1.74996 9.33268 2.33329V3.49996\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M5.83398 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M8.16602 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </button>\n </div>\n <span *ngIf=\"getBranchCreatedDate(branch)\" class=\"step-date cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px] cqa-flex-shrink-0 cqa-ml-auto\">{{ getBranchCreatedDate(branch) | date:'d MMM yyyy' }}</span>\n </div>\n\n <!-- Empty branch inside a step group: no START/END markers -->\n <div\n *ngIf=\"branch.nestedSteps?.length === 0 && isInsideStepGroup\"\n class=\"cqa-grid cqa-w-full cqa-place-items-center cqa-gap-0 cqa-py-[8px] cqa-px-4 cqa-border-0 cqa-text-center cqa-text-[#1C398E] cqa-font-semibold cqa-text-[12px] cqa-leading-[15px] cqa-bg-[rgba(219,234,254,0.5)]\">\n No steps added\n </div>\n\n <!-- START marker per branch: START IF, START ELSE IF, or START ELSE - only when branch has nested steps -->\n <div *ngIf=\"branch.nestedSteps?.length > 0\" class=\"cqa-grid cqa-w-full cqa-place-items-center cqa-gap-0 cqa-py-[8px] cqa-px-4 cqa-border-0 cqa-bg-[rgba(219,234,254,0.5)]\">\n <span class=\"cqa-text-center cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold cqa-whitespace-nowrap cqa-bg-transparent cqa-text-[#1C398E]\">{{ getStartBranchLabel(branch) }} : {{ getBranchMarkerStartStep(branch) }}</span>\n </div>\n\n <!-- Branch Content (Nested Steps \u2013 renderer dispatches by step type, n-level nesting) -->\n <div *ngIf=\"!isReorder || isInsideStepGroup\" class=\"cqa-flex cqa-flex-col\">\n <cqa-test-case-details-renderer\n *ngFor=\"let step of branch.nestedSteps; let i = index\"\n [step]=\"step\"\n [index]=\"i\"\n [selected]=\"$any(step).selected\"\n [branch]=\"branch\"\n [isNested]=\"true\"\n [isInsideStepGroup]=\"isInsideStepGroup\"\n [isReorder]=\"isReorder\"\n [nestingLevel]=\"(nestingLevel || 0) + 1\"\n [addStepBetween]=\"addStepBetween\"\n [editable]=\"editable\"\n [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n [currentTestCaseId]=\"currentTestCaseId\"\n (branchStepChange)=\"onBranchStepChange($event.branch, $event.step, $event.stepIndex)\"\n (addStepForBranch)=\"onAddStep($event.branch)\"\n (addStepForLoop)=\"onAddStepForLoop($event, branch)\"\n (deleteStepWithBranch)=\"onDeleteStep($event.branch, $event.stepIndex)\"\n (delete)=\"onNestedStepDelete($event)\"\n (toggleExpanded)=\"onNestedToggleExpanded($event, branch, step, i)\"\n (groupNameChange)=\"$any(step).groupName = $event; onBranchStepChange(branch, step, i)\"\n (descriptionChange)=\"$any(step).description = $event; onBranchStepChange(branch, step, i)\"\n (reusableChange)=\"$any(step).reusable = $event; onBranchStepChange(branch, step, i)\"\n (openExternal)=\"onNestedOpenExternal($event)\"\n (edit)=\"onNestedEdit($event)\"\n (link)=\"onBranchStepChange(branch, step, i)\"\n (duplicate)=\"onNestedDuplicate($event, step)\"\n (viewDetails)=\"viewDetails.emit($event)\"\n (conditionChange)=\"$any(step).condition = $event; onBranchStepChange(branch, step, i)\"\n (addBranch)=\"onNestedConditionAddBranch($any(step)); onBranchStepChange(branch, step, i)\"\n (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event); onBranchStepChange(branch, step, i)\"\n (testDataProfileChange)=\"$any(step).testDataProfile = $event; onBranchStepChange(branch, step, i)\"\n (startStepChange)=\"$any(step).startStep = $event; onBranchStepChange(branch, step, i)\"\n (endStepChange)=\"$any(step).endStep = $event; onBranchStepChange(branch, step, i)\"\n (maxIterationsChange)=\"$any(step).maxIterations = $event; onBranchStepChange(branch, step, i)\"\n (eventTypeChange)=\"$any(step).eventType = $event; onBranchStepChange(branch, step, i)\"\n (parameterChange)=\"onBranchStepChange(branch, step, i)\"\n (selectionChange)=\"$any(step).selected = $event; onBranchStepChange(branch, step, i)\"\n (loadMoreDataProfiles)=\"loadMoreDataProfiles.emit($event)\"\n (searchDataProfiles)=\"searchDataProfiles.emit($event)\"\n (stepUpdate)=\"stepUpdate.emit($event)\"\n (dndDropInZone)=\"dndDropInZone.emit($event)\"\n (clickAction)=\"onNestedClickAction($event)\"\n (editInDepth)=\"editInDepth.emit($event)\"\n (addStepBetweenClick)=\"addStepBetweenClick.emit($event)\"\n >\n </cqa-test-case-details-renderer>\n </div>\n <div *ngIf=\"isReorder && !isInsideStepGroup\" class=\"cqa-flex cqa-flex-col nested-step-drop-list\"\n [style.min-height.px]=\"branch.nestedSteps.length === 0 ? 52 : null\"\n [dndDropzone]=\"['step']\"\n dndEffectAllowed=\"move\"\n dndDragoverClass=\"dndDragover\"\n (dndDrop)=\"onDndDrop($event, branch)\">\n <div dndPlaceholderRef class=\"step-drag-placeholder-nested cqa-my-1 cqa-min-h-[50px] cqa-border-2 cqa-border-dashed cqa-border-[#3F43EE] cqa-rounded cqa-bg-[rgba(63,67,238,0.08)] cqa-flex cqa-items-center cqa-justify-center cqa-text-[#3F43EE] cqa-text-xs\">Drop here</div>\n <div *ngFor=\"let step of branch.nestedSteps; let i = index\" class=\"nested-step-drag-item\"\n [dndDraggable]=\"step\"\n dndEffectAllowed=\"move\"\n dndType=\"step\">\n <cqa-test-case-details-renderer\n [step]=\"step\"\n [index]=\"i\"\n [selected]=\"$any(step).selected\"\n [branch]=\"branch\"\n [isNested]=\"true\"\n [isInsideStepGroup]=\"isInsideStepGroup\"\n [isReorder]=\"isReorder\"\n [nestingLevel]=\"(nestingLevel || 0) + 1\"\n [addStepBetweenAbove]=\"addStepBetweenAbove\"\n [addStepBetweenBelow]=\"addStepBetweenBelow\"\n [addStepBetween]=\"addStepBetween\"\n [editable]=\"editable\"\n [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n [currentTestCaseId]=\"currentTestCaseId\"\n (branchStepChange)=\"onBranchStepChange($event.branch, $event.step, $event.stepIndex)\"\n (addStepForBranch)=\"onAddStep($event.branch)\"\n (addStepForLoop)=\"onAddStepForLoop($event, branch)\"\n (deleteStepWithBranch)=\"onDeleteStep($event.branch, $event.stepIndex)\"\n (delete)=\"onNestedStepDelete($event)\"\n (toggleExpanded)=\"onNestedToggleExpanded($event, branch, step, i)\"\n (groupNameChange)=\"$any(step).groupName = $event; onBranchStepChange(branch, step, i)\"\n (descriptionChange)=\"$any(step).description = $event; onBranchStepChange(branch, step, i)\"\n (reusableChange)=\"$any(step).reusable = $event; onBranchStepChange(branch, step, i)\"\n (openExternal)=\"onNestedOpenExternal($event)\"\n (edit)=\"onNestedEdit($event)\"\n (link)=\"onBranchStepChange(branch, step, i)\"\n (duplicate)=\"onNestedDuplicate($event, step)\"\n (viewDetails)=\"viewDetails.emit($event)\"\n (conditionChange)=\"$any(step).condition = $event; onBranchStepChange(branch, step, i)\"\n (addBranch)=\"onNestedConditionAddBranch($any(step)); onBranchStepChange(branch, step, i)\"\n (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event); onBranchStepChange(branch, step, i)\"\n (testDataProfileChange)=\"$any(step).testDataProfile = $event; onBranchStepChange(branch, step, i)\"\n (startStepChange)=\"$any(step).startStep = $event; onBranchStepChange(branch, step, i)\"\n (endStepChange)=\"$any(step).endStep = $event; onBranchStepChange(branch, step, i)\"\n (maxIterationsChange)=\"$any(step).maxIterations = $event; onBranchStepChange(branch, step, i)\"\n (eventTypeChange)=\"$any(step).eventType = $event; onBranchStepChange(branch, step, i)\"\n (parameterChange)=\"onBranchStepChange(branch, step, i)\"\n (selectionChange)=\"$any(step).selected = $event; onBranchStepChange(branch, step, i)\"\n (loadMoreDataProfiles)=\"loadMoreDataProfiles.emit($event)\"\n (searchDataProfiles)=\"searchDataProfiles.emit($event)\"\n (stepUpdate)=\"stepUpdate.emit($event)\"\n (dndDropInZone)=\"dndDropInZone.emit($event)\"\n (clickAction)=\"onNestedClickAction($event)\"\n (editInDepth)=\"editInDepth.emit($event)\"\n (addStepBetweenClick)=\"addStepBetweenClick.emit($event)\"\n >\n </cqa-test-case-details-renderer>\n </div>\n </div>\n\n <!-- Empty branch (IF / ELSE IF / ELSE): show plus icon on hover when no steps, same as loop step.\n When rendered inside a step group or when reordering, hide this Add button entirely. -->\n <div *ngIf=\"branch.nestedSteps.length === 0 && editable && !isInsideStepGroup && !isReorder\" class=\"condition-branch-empty cqa-min-h-[52px] cqa-flex cqa-items-center cqa-justify-center cqa-pl-4 cqa-pr-4\">\n <button type=\"button\" (click)=\"onAddStep(branch); $event.stopPropagation()\" (mousedown)=\"$event.stopPropagation()\" [attr.title]=\"'Add step to ' + getBranchLabel(branch)\"\n class=\"condition-branch-empty-add\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect x=\"1\" y=\"1\" width=\"21.1822\" height=\"22\" rx=\"10.5911\" fill=\"white\" />\n <rect x=\"1\" y=\"1\" width=\"21.1822\" height=\"22\" rx=\"10.5911\" stroke=\"#3F43EE\" stroke-width=\"2\" />\n <path d=\"M8.5 12H15.5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M12 8.5V15.5\" stroke=\"#3F43EE\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </button>\n </div>\n\n <!-- END marker per branch - only when branch has nested steps -->\n <div *ngIf=\"branch.nestedSteps?.length > 0\" class=\"cqa-grid cqa-w-full cqa-place-items-center cqa-gap-0 cqa-py-[8px] cqa-px-4 cqa-border-0 cqa-bg-[rgba(219,234,254,0.5)]\">\n <span class=\"cqa-text-center cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold cqa-whitespace-nowrap cqa-bg-transparent cqa-text-[#1C398E]\">{{ getEndBranchLabel(branch) }} : {{ getBranchMarkerEndStep(branch) }}</span>\n </div>\n </div>\n\n <!-- Inline ELSE IF add forms: shown at the end of the branch that triggered \"Add ELSE IF\" -->\n <ng-container *ngIf=\"isEditing\">\n <div *ngFor=\"let elseIfBranch of getElseIfBranchesForBranchIndex(branchIndex)\"\n class=\"cqa-py-2.5 cqa-px-1 cqa-flex cqa-flex-col cqa-gap-3 cqa-border-t cqa-border-solid cqa-border-[#E5E7EB]\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-justify-between\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-grow\">\n <!-- Remove ELSE IF button -->\n <button\n type=\"button\"\n (click)=\"onRemoveElse(elseIfBranch.id)\"\n class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#F3F4F6] cqa-text-[#99A1AF] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-cursor-pointer hover:cqa-bg-[#E5E7EB] cqa-transition-colors\">\n Remove ELSE IF\n </button>\n\n <!-- ELSE IF autocomplete field -->\n <cqa-autocomplete\n *ngIf=\"elseIfBranch.form\"\n [options]=\"conditionLeftAutocompleteOptions\"\n [value]=\"elseIfBranch.form.get('conditionLeft')?.value ?? ''\"\n (valueChange)=\"elseIfBranch.form.get('conditionLeft')?.setValue($event)\"\n (optionSelect)=\"onElseConditionLeftSelect($event, elseIfBranch.id)\"\n placeholder=\"Select Condition\"\n [fullWidth]=\"true\"\n [compact]=\"true\"\n class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-autocomplete>\n\n <!-- ELSE IF Template Variables Section -->\n <div *ngIf=\"elseIfBranch.selectedTemplate && elseIfBranch.templateVariables && elseIfBranch.templateVariables.length > 0\" class=\"cqa-flex cqa-flex-row cqa-flex-wrap cqa-gap-3\">\n <ng-container *ngFor=\"let variable of elseIfBranch.templateVariables\">\n <ng-container *ngIf=\"variable.type === 'boolean'\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <mat-slide-toggle\n [checked]=\"elseIfBranch.templateVariablesForm.get(variable.name)?.value || variable.value || false\"\n (change)=\"elseIfBranch.templateVariablesForm.get(variable.name)?.setValue($event.checked)\"\n color=\"primary\">\n </mat-slide-toggle>\n </div>\n </ng-container>\n <ng-container *ngIf=\"variable.type !== 'boolean' && variable.name !== 'custom_code'\">\n <ng-container *ngIf=\"variable.name === 'type' || variable.name === 'scrollTo' || variable.options\">\n <div class=\"cqa-flex cqa-flex-col\" style=\"min-width: 150px;\">\n <cqa-dynamic-select\n [form]=\"elseIfBranch.templateVariablesForm\"\n [config]=\"getSelectConfigForVariable(variable, elseIfBranch.id)\">\n </cqa-dynamic-select>\n </div>\n </ng-container>\n <ng-container *ngIf=\"variable.name !== 'type' && variable.name !== 'scrollTo' && !variable.options\">\n <div class=\"cqa-flex cqa-flex-col\" style=\"min-width: 150px;\">\n <cqa-custom-input\n [value]=\"elseIfBranch.templateVariablesForm.get(variable.name)?.value || variable.value || ''\"\n (valueChange)=\"elseIfBranch.templateVariablesForm.get(variable.name)?.setValue($event)\"\n [placeholder]=\"variable.label\">\n </cqa-custom-input>\n </div>\n </ng-container>\n </ng-container>\n </ng-container>\n </div>\n\n <!-- Edit In depth link -->\n <a href=\"#\" (click)=\"onEditInDepth(elseIfBranch.selectedTemplate || undefined, null, undefined, true, elseIfBranch, elseIfBranch.insertAfterBranchId); $event.preventDefault()\"\n class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-[2px] cqa-no-underline\">\n Edit In depth\n <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg>\n </a>\n </div>\n <!-- Cancel / Apply shown on the last pending ELSE IF form across all branches -->\n <div *ngIf=\"isLastElseIfBranch(elseIfBranch.id)\" class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <cqa-button variant=\"outlined\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Cancel'\" (clicked)=\"onEditCancel()\"></cqa-button>\n <cqa-button variant=\"filled\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Apply'\" (clicked)=\"onEditApply()\"></cqa-button>\n </div>\n </div>\n </div>\n </ng-container>\n </ng-container><!-- end branch ng-container -->\n <!-- END CONDITION: final marker after all branches -->\n <div class=\"cqa-grid cqa-w-full cqa-place-items-center cqa-gap-0 cqa-py-[8px] cqa-px-4 cqa-border-0 cqa-bg-[rgba(219,234,254,0.5)]\">\n <span class=\"cqa-text-center cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold cqa-whitespace-nowrap cqa-bg-transparent cqa-text-[#1C398E]\">END CONDITION : {{ getEndConditionMarkerStepDisplay() }}</span>\n </div>\n </div>\n</div>" }]
|
|
26174
26268
|
}], ctorParameters: function () { return [{ type: i1$1.FormBuilder }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { config: [{
|
|
26175
26269
|
type: Input
|
|
26176
26270
|
}], id: [{
|
|
@@ -26207,6 +26301,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
26207
26301
|
type: Input
|
|
26208
26302
|
}], naturalTextActionsOptions: [{
|
|
26209
26303
|
type: Input
|
|
26304
|
+
}], currentTestCaseId: [{
|
|
26305
|
+
type: Input
|
|
26210
26306
|
}], setConditionTemplateVariables: [{
|
|
26211
26307
|
type: Input
|
|
26212
26308
|
}], addStepBetweenAbove: [{
|
|
@@ -26331,6 +26427,23 @@ class TestCaseStepGroupComponent {
|
|
|
26331
26427
|
const level = Number(this.nestingLevel) || 0;
|
|
26332
26428
|
return 16 + (level * 24);
|
|
26333
26429
|
}
|
|
26430
|
+
/**
|
|
26431
|
+
* When reusable, show a banner that nested steps must be edited in the step group's source test case—except when
|
|
26432
|
+
* the user is already on that test case (currentTestCaseId === stepGroupId).
|
|
26433
|
+
*/
|
|
26434
|
+
shouldShowReusableNestedEditBanner() {
|
|
26435
|
+
if (!this.reusable) {
|
|
26436
|
+
return false;
|
|
26437
|
+
}
|
|
26438
|
+
const sgId = this.config?.stepGroupId;
|
|
26439
|
+
if (sgId == null) {
|
|
26440
|
+
return true;
|
|
26441
|
+
}
|
|
26442
|
+
if (this.currentTestCaseId == null || this.currentTestCaseId === '') {
|
|
26443
|
+
return true;
|
|
26444
|
+
}
|
|
26445
|
+
return String(this.currentTestCaseId) !== String(sgId);
|
|
26446
|
+
}
|
|
26334
26447
|
onDndDrop(event) {
|
|
26335
26448
|
this.dndDropInZone.emit({ event, targetList: this.nestedSteps });
|
|
26336
26449
|
}
|
|
@@ -26444,6 +26557,30 @@ class TestCaseStepGroupComponent {
|
|
|
26444
26557
|
const end = tooLong ? count : endRaw;
|
|
26445
26558
|
return `Steps ${start}-${end} (${count} step${count !== 1 ? 's' : ''})`;
|
|
26446
26559
|
}
|
|
26560
|
+
/** START GROUP marker: first nested step's display step number (matches row numbering). */
|
|
26561
|
+
getStartGroupMarkerStepDisplay() {
|
|
26562
|
+
const steps = this.nestedSteps;
|
|
26563
|
+
if (!steps?.length) {
|
|
26564
|
+
return String(this.stepNumber ?? '');
|
|
26565
|
+
}
|
|
26566
|
+
const first = steps[0];
|
|
26567
|
+
if (first?.stepNumber != null && first.stepNumber !== '') {
|
|
26568
|
+
return String(first.stepNumber);
|
|
26569
|
+
}
|
|
26570
|
+
return String(this.stepNumber ?? '');
|
|
26571
|
+
}
|
|
26572
|
+
/** END GROUP marker: last nested step's display step number. */
|
|
26573
|
+
getEndGroupMarkerStepDisplay() {
|
|
26574
|
+
const steps = this.nestedSteps;
|
|
26575
|
+
if (!steps?.length) {
|
|
26576
|
+
return String(this.stepNumber ?? '');
|
|
26577
|
+
}
|
|
26578
|
+
const last = steps[steps.length - 1];
|
|
26579
|
+
if (last?.stepNumber != null && last.stepNumber !== '') {
|
|
26580
|
+
return String(last.stepNumber);
|
|
26581
|
+
}
|
|
26582
|
+
return String(this.stepNumber ?? '');
|
|
26583
|
+
}
|
|
26447
26584
|
onToggleExpanded() {
|
|
26448
26585
|
this.expanded = !this.expanded;
|
|
26449
26586
|
this.toggleExpanded.emit({ config: this.config, expanded: this.expanded });
|
|
@@ -26592,10 +26729,10 @@ class TestCaseStepGroupComponent {
|
|
|
26592
26729
|
/** Max length for start/end step number in summary; beyond this use local indices (1 to count). */
|
|
26593
26730
|
TestCaseStepGroupComponent.MAX_STEP_NUMBER_DISPLAY_LENGTH = 20;
|
|
26594
26731
|
TestCaseStepGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseStepGroupComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
26595
|
-
TestCaseStepGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestCaseStepGroupComponent, selector: "cqa-test-case-step-group", inputs: { config: "config", id: "id", stepNumber: "stepNumber", index: "index", groupName: "groupName", description: "description", reusable: "reusable", nestedSteps: "nestedSteps", expanded: "expanded", isNested: "isNested", isInsideLoop: "isInsideLoop", isInsideStepGroup: "isInsideStepGroup", isReorder: "isReorder", editable: "editable", nestingLevel: "nestingLevel", selected: "selected", isDuplicating: "isDuplicating", loading: "loading", dataProfileOptions: "dataProfileOptions", hasMoreDataProfiles: "hasMoreDataProfiles", isLoadingDataProfiles: "isLoadingDataProfiles", naturalTextActionsOptions: "naturalTextActionsOptions", addStepBetweenAbove: "addStepBetweenAbove", addStepBetweenBelow: "addStepBetweenBelow", addStepBetween: "addStepBetween" }, outputs: { toggleExpanded: "toggleExpanded", groupNameChange: "groupNameChange", descriptionChange: "descriptionChange", reusableChange: "reusableChange", nestedStepChange: "nestedStepChange", addStep: "addStep", deleteStep: "deleteStep", openExternal: "openExternal", edit: "edit", editInDepth: "editInDepth", link: "link", duplicate: "duplicate", delete: "delete", viewDetails: "viewDetails", dndDropInZone: "dndDropInZone", loadMoreDataProfiles: "loadMoreDataProfiles", searchDataProfiles: "searchDataProfiles", stepUpdate: "stepUpdate", addStepBetweenClick: "addStepBetweenClick", addStepForLoop: "addStepForLoop", selectionChange: "selectionChange", deleteBranch: "deleteBranch" }, host: { classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "viewDetailsTrigger", first: true, predicate: ["viewDetailsTrigger"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div [class]=\"'cqa-flex cqa-flex-col'\" style=\"border-bottom: 1px solid #E5E7EB;\">\n <!-- Step Group Header -->\n <div\n [class]=\"'step-row cqa-flex cqa-gap-3 cqa-items-center cqa-py-2 cqa-pr-4' + (config?.shouldSkip ? ' cqa-step-skipped' : '')\"\n [style.opacity]=\"config?.shouldSkip ? '0.6' : null\"\n [style.padding-left.px]=\"getRowPaddingLeftPx()\"\n style=\"min-height: 50px\">\n <div class=\"cqa-inline-flex cqa-items-center\">\n <!-- Drag Handle Icon (when isReorder is true and not inside step group - step groups 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 (ngModelChange)=\"onSelectionChange($event)\"\n class=\"cqa-h-4 cqa-w-4 cqa-cursor-pointer cqa-transition-all cqa-appearance-none cqa-rounded shadow hover:cqa-shadow-md cqa-border cqa-border-solid cqa-border-slate-300 cqa-flex-shrink-0\"\n [class.cqa-bg-[#3F43EE]]=\"selected\"\n [class.cqa-border-[#3F43EE]]=\"selected\"\n id=\"check-step-group\" />\n <span class=\"cqa-absolute cqa-text-white cqa-top-1/2 cqa-left-1/2 cqa--translate-x-1/2 cqa--translate-y-1/2 cqa-pointer-events-none cqa-flex cqa-items-center cqa-justify-center\"\n [class.cqa-opacity-0]=\"!selected\"\n [class.cqa-opacity-100]=\"selected\">\n <svg width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 3.125L4.5 8.625L2 6.125\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </span>\n </label>\n </div>\n <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px] cqa-min-w-[32px]\">{{ stepNumber }}</span>\n <!-- Expand/Collapse Icon -->\n <button type=\"button\" (click)=\"onToggleExpanded(); $event.stopPropagation()\" class=\"cqa-p-0\">\n <svg [class.cqa-rotate-180]=\"expanded\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6L8 10L12 6\" stroke=\"#6B7280\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button>\n\n <!-- Folder Icon -->\n <div>\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M15 15C15.3978 15 15.7794 14.842 16.0607 14.5607C16.342 14.2794 16.5 13.8978 16.5 13.5V6C16.5 5.60217 16.342 5.22064 16.0607 4.93934C15.7794 4.65804 15.3978 4.5 15 4.5H9.075C8.82413 4.50246 8.57666 4.44196 8.35523 4.32403C8.13379 4.20611 7.94547 4.03453 7.8075 3.825L7.2 2.925C7.06342 2.7176 6.87748 2.54736 6.65887 2.42955C6.44027 2.31174 6.19583 2.25004 5.9475 2.25H3C2.60218 2.25 2.22064 2.40804 1.93934 2.68934C1.65804 2.97064 1.5 3.35218 1.5 3.75V13.5C1.5 13.8978 1.65804 14.2794 1.93934 14.5607C2.22064 14.842 2.60218 15 3 15H15Z\"\n fill=\"#EFF6FF\" stroke=\"#60A5FA\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </div>\n\n <!-- Group Name and Description -->\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-gap-[2px]\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <!-- Group Name Input -->\n <p class=\"cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[18px] cqa-font-bold\">{{groupName}}</p>\n <!-- Reusable Tag -->\n <span *ngIf=\"reusable\"\n class=\"cqa-px-2 cqa-py-[1.5px] cqa-rounded-lg cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-[#D8D9FC] cqa-border cqa-border-solid cqa-border-[#8A8CF4]\">\n Reusable\n </span>\n </div>\n\n <!-- Description -->\n <p class=\"cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px]\">{{description}}</p>\n </div>\n\n <!-- Steps Summary and Action Icons -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 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 - placed first -->\n <div *ngIf=\"editable && !isReorder\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-1.5 cqa-pr-2\">\n\n <!-- Edit Icon -->\n <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M7 11.6666H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M9.55208 2.1128C9.7843 1.88058 10.0993 1.75012 10.4277 1.75012C10.7561 1.75012 11.071 1.88058 11.3033 2.1128C11.5355 2.34502 11.6659 2.65998 11.6659 2.98838C11.6659 3.31679 11.5355 3.63175 11.3033 3.86397L4.29742 10.8704C4.15864 11.0092 3.9871 11.1107 3.79867 11.1656L2.12333 11.6544C2.07314 11.669 2.01993 11.6699 1.96928 11.6569C1.91863 11.6439 1.8724 11.6176 1.83543 11.5806C1.79846 11.5437 1.7721 11.4974 1.75913 11.4468C1.74615 11.3961 1.74703 11.3429 1.76167 11.2927L2.2505 9.61738C2.30546 9.42916 2.40698 9.25783 2.54567 9.11922L9.55208 2.1128Z\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </button>\n <button type=\"button\" (click)=\"onSkipToggle(); $event.stopPropagation()\" [attr.title]=\"config?.shouldSkip ? 'Unskip step' : 'Skip step'\" [class.cqa-text-[#1447E6]]=\"config?.shouldSkip\" 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=\"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\n <!-- Link Icon -->\n <!-- <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <g clip-path=\"url(#clip0_609_26588)\">\n <path\n d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\"\n stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\"\n stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </g>\n <defs>\n <clipPath id=\"clip0_609_26588\">\n <rect width=\"14\" height=\"14\" fill=\"white\" />\n </clipPath>\n </defs>\n </svg>\n </button> -->\n\n <!-- Duplicate Icon -->\n <button\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\n d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n <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\n <!-- Delete Icon -->\n <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\" class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M1.75 3.5H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M11.0827 3.5V11.6667C11.0827 12.25 10.4993 12.8333 9.91602 12.8333H4.08268C3.49935 12.8333 2.91602 12.25 2.91602 11.6667V3.5\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M4.66602 3.49996V2.33329C4.66602 1.74996 5.24935 1.16663 5.83268 1.16663H8.16602C8.74935 1.16663 9.33268 1.74996 9.33268 2.33329V3.49996\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M5.83398 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M8.16602 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button>\n </div>\n\n <!-- External Link Icon -->\n <button type=\"button\" (click)=\"onOpenExternal(); $event.stopPropagation()\" title=\"Open in new tab\"\n class=\"cqa-p-0 cqa-text-[#99999E] hover:cqa-text-[#1447E6]\">\n <svg width=\"16\" height=\"17\" viewBox=\"0 0 16 17\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M12 8.66667V12.6667C12 13.0203 11.8595 13.3594 11.6095 13.6095C11.3594 13.8595 11.0203 14 10.6667 14H3.33333C2.97971 14 2.64057 13.8595 2.39052 13.6095C2.14048 13.3594 2 13.0203 2 12.6667V5.33333C2 4.97971 2.14048 4.64057 2.39052 4.39052C2.64057 4.14048 2.97971 4 3.33333 4H7.33333M10 2H14M14 2V6M14 2L6.66667 9.33333\"\n stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </button>\n\n <!-- Steps Summary (show loader when loading on expand) -->\n <span *ngIf=\"loading || config?.loading\" class=\"cqa-inline-flex cqa-items-center cqa-gap-1.5 cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-rounded-lg cqa-py-0.5 cqa-px-2 cqa-text-[#0A0A0A] cqa-text-[12px] cqa-leading-[15px]\">\n <span class=\"cqa-inline-block cqa-w-3 cqa-h-3 cqa-border-2 cqa-border-solid cqa-border-[#3F43EE] cqa-border-t-transparent cqa-rounded-full cqa-animate-spin\"></span>\n Loading...\n </span>\n <span *ngIf=\"!(loading || config?.loading) && hasSteps()\" class=\"cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-rounded-lg cqa-py-0.5 cqa-px-2 cqa-text-[#0A0A0A] cqa-text-[12px] cqa-leading-[15px]\">\n {{ getStepsSummary() }}\n </span>\n\n <!-- 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>\n\n <!-- Expanded Content with Nested Steps (indent so 14.1.1, 14.1.2 sit under 14.1) -->\n <div *ngIf=\"expanded\" class=\"cqa-flex cqa-flex-col\">\n <!-- START GROUP Marker (centered with decorative lines) - only when there are nested steps -->\n <div *ngIf=\"nestedSteps.length > 0\" class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-py-1 cqa-px-4 cqa-bg-[#D1C4E9]\" style=\"border-top: 1px solid #D1C4E9;\">\n <span class=\"cqa-flex-1 cqa-self-stretch cqa-border-t cqa-border-dashed cqa-border-white cqa-opacity-40\" style=\"min-width: 20px;\"></span>\n <span class=\"cqa-text-white cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-whitespace-nowrap\">START GROUP</span>\n <span class=\"cqa-flex-1 cqa-self-stretch cqa-border-t cqa-border-dashed cqa-border-white cqa-opacity-40\" style=\"min-width: 20px;\"></span>\n </div>\n <!-- Loading Indicator (only when there are no cached nested steps) -->\n <div *ngIf=\"loading && nestedSteps.length === 0\" class=\"cqa-flex cqa-items-center cqa-justify-center cqa-py-8 cqa-px-4\">\n <div class=\"cqa-flex cqa-flex-col cqa-items-center cqa-gap-3\">\n <!-- Spinner -->\n <svg class=\"cqa-animate-spin cqa-h-6 cqa-w-6 cqa-text-[#3F43EE]\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n <circle class=\"cqa-opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n <path class=\"cqa-opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n </svg>\n <span class=\"cqa-text-[#6B7280] cqa-text-sm\">Loading steps...</span>\n </div>\n </div>\n \n <!-- Nested Steps Content (keep visible even while refreshing) -->\n <div *ngIf=\"nestedSteps.length > 0\" class=\"cqa-flex cqa-flex-col\">\n <!-- Steps inside step groups cannot be reordered - always use non-dnd list (no drag handle/dropzone) -->\n <div class=\"cqa-flex cqa-flex-col\">\n <cqa-test-case-details-renderer\n *ngFor=\"let step of nestedSteps; let i = index\"\n [step]=\"step\"\n [index]=\"i\"\n [selected]=\"$any(step).selected\"\n [isNested]=\"true\"\n [isInsideStepGroup]=\"true\"\n [isReorder]=\"isReorder\"\n [nestingLevel]=\"nestingLevel + 1\"\n [addStepBetween]=\"false\"\n [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n (nestedStepChange)=\"onNestedStepChange($event.step, $event.index)\"\n (addStep)=\"onAddStep()\"\n (deleteStep)=\"onDeleteStep($event)\"\n (toggleExpanded)=\"onNestedToggleExpanded($event, step, i)\"\n (groupNameChange)=\"$any(step).groupName = $event; onNestedStepChange(step, i)\"\n (descriptionChange)=\"$any(step).description = $event; onNestedStepChange(step, i)\"\n (reusableChange)=\"$any(step).reusable = $event; onNestedStepChange(step, i)\"\n (openExternal)=\"onNestedOpenExternal($event)\"\n (edit)=\"onNestedEdit($event)\"\n (link)=\"onNestedStepChange(step, i)\"\n (duplicate)=\"onNestedDuplicate($event, step)\"\n (delete)=\"onDeleteStep($event, i)\"\n (viewDetails)=\"viewDetails.emit($event)\"\n (conditionChange)=\"$any(step).condition = $event; onNestedStepChange(step, i)\"\n (branchStepChange)=\"onNestedStepChange(step, i)\"\n (addBranch)=\"onNestedConditionAddBranch($any(step), i)\"\n (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event, i)\"\n (testDataProfileChange)=\"$any(step).testDataProfile = $event; onNestedStepChange(step, i)\"\n (startStepChange)=\"$any(step).startStep = $event; onNestedStepChange(step, i)\"\n (endStepChange)=\"$any(step).endStep = $event; onNestedStepChange(step, i)\"\n (maxIterationsChange)=\"$any(step).maxIterations = $event; onNestedStepChange(step, i)\"\n (eventTypeChange)=\"$any(step).eventType = $event; onNestedStepChange(step, i)\"\n (parameterChange)=\"onNestedStepChange(step, i)\"\n (selectionChange)=\"$any(step).selected = $event; onNestedStepChange(step, i)\"\n (loadMoreDataProfiles)=\"loadMoreDataProfiles.emit($event)\"\n (searchDataProfiles)=\"searchDataProfiles.emit($event)\"\n (stepUpdate)=\"stepUpdate.emit($event)\"\n (dndDropInZone)=\"dndDropInZone.emit($event)\"\n (addStepBetweenClick)=\"addStepBetweenClick.emit($event)\"\n (addStepForLoop)=\"addStepForLoop.emit($event)\"\n >\n </cqa-test-case-details-renderer>\n </div>\n <!-- Steps inside step groups cannot be reordered - dnd list never shown -->\n <div *ngIf=\"false\" class=\"cqa-flex cqa-flex-col nested-step-drop-list\"\n [dndDropzone]=\"['step']\"\n dndEffectAllowed=\"move\"\n dndDragoverClass=\"dndDragover\"\n (dndDrop)=\"onDndDrop($event)\">\n <div dndPlaceholderRef class=\"step-drag-placeholder-nested cqa-my-1 cqa-min-h-[50px] cqa-border-2 cqa-border-dashed cqa-border-[#3F43EE] cqa-rounded cqa-bg-[rgba(63,67,238,0.08)] cqa-flex cqa-items-center cqa-justify-center cqa-text-[#3F43EE] cqa-text-xs\">Drop here</div>\n <div *ngFor=\"let step of nestedSteps; let i = index\" class=\"nested-step-drag-item\"\n [dndDraggable]=\"step\"\n dndEffectAllowed=\"move\"\n dndType=\"step\">\n <cqa-test-case-details-renderer\n [step]=\"step\"\n [index]=\"i\"\n [selected]=\"$any(step).selected\"\n [isNested]=\"true\"\n [isInsideStepGroup]=\"true\"\n [isReorder]=\"isReorder\"\n [nestingLevel]=\"nestingLevel + 1\"\n [addStepBetween]=\"false\"\n [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n (nestedStepChange)=\"onNestedStepChange($event.step, $event.index)\"\n (addStep)=\"onAddStep()\"\n (deleteStep)=\"onDeleteStep($event)\"\n (toggleExpanded)=\"onNestedToggleExpanded($event, step, i)\"\n (groupNameChange)=\"$any(step).groupName = $event; onNestedStepChange(step, i)\"\n (descriptionChange)=\"$any(step).description = $event; onNestedStepChange(step, i)\"\n (reusableChange)=\"$any(step).reusable = $event; onNestedStepChange(step, i)\"\n (openExternal)=\"onNestedOpenExternal($event)\"\n (edit)=\"onNestedEdit($event)\"\n (link)=\"onNestedStepChange(step, i)\"\n (duplicate)=\"onNestedDuplicate($event, step)\"\n (delete)=\"onDeleteStep($event, i)\"\n (viewDetails)=\"viewDetails.emit($event)\"\n (conditionChange)=\"$any(step).condition = $event; onNestedStepChange(step, i)\"\n (branchStepChange)=\"onNestedStepChange(step, i)\"\n (addBranch)=\"onNestedConditionAddBranch($any(step), i)\"\n (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event, i)\"\n (testDataProfileChange)=\"$any(step).testDataProfile = $event; onNestedStepChange(step, i)\"\n (startStepChange)=\"$any(step).startStep = $event; onNestedStepChange(step, i)\"\n (endStepChange)=\"$any(step).endStep = $event; onNestedStepChange(step, i)\"\n (maxIterationsChange)=\"$any(step).maxIterations = $event; onNestedStepChange(step, i)\"\n (eventTypeChange)=\"$any(step).eventType = $event; onNestedStepChange(step, i)\"\n (parameterChange)=\"onNestedStepChange(step, i)\"\n (selectionChange)=\"$any(step).selected = $event; onNestedStepChange(step, i)\"\n (loadMoreDataProfiles)=\"loadMoreDataProfiles.emit($event)\"\n (searchDataProfiles)=\"searchDataProfiles.emit($event)\"\n (stepUpdate)=\"stepUpdate.emit($event)\"\n (dndDropInZone)=\"dndDropInZone.emit($event)\"\n (addStepBetweenClick)=\"addStepBetweenClick.emit($event)\"\n (addStepForLoop)=\"addStepForLoop.emit($event)\"\n >\n </cqa-test-case-details-renderer>\n </div>\n </div>\n\n <!-- END GROUP Marker (centered with decorative lines) - only when there are nested steps -->\n <div *ngIf=\"nestedSteps.length > 0\" class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-py-1 cqa-px-4 cqa-bg-[#D1C4E9]\" style=\"border-top: 1px solid #D1C4E9;\">\n <span class=\"cqa-flex-1 cqa-self-stretch cqa-border-t cqa-border-dashed cqa-border-white cqa-opacity-40\" style=\"min-width: 20px;\"></span>\n <span class=\"cqa-text-white cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-whitespace-nowrap\">END GROUP</span>\n <span class=\"cqa-flex-1 cqa-self-stretch cqa-border-t cqa-border-dashed cqa-border-white cqa-opacity-40\" style=\"min-width: 20px;\"></span>\n </div>\n </div>\n </div>\n</div>", styles: [".step-actions{opacity:0;transition:opacity .15s ease}.step-row:hover .step-actions{opacity:1}.step-row{vertical-align:middle;letter-spacing:normal}\n"], components: [{ type: TestCaseDetailsRendererComponent, selector: "cqa-test-case-details-renderer", inputs: ["step", "index", "isNested", "isInsideLoop", "isInsideStepGroup", "nestingLevel", "branch", "isReorder", "selected", "isDuplicating", "addStepBetweenAbove", "addStepBetweenBelow", "addStepBetween", "editable", "dataProfileOptions", "hasMoreDataProfiles", "isLoadingDataProfiles", "naturalTextActionsOptions", "setConditionTemplateVariables"], outputs: ["nestedStepChange", "addStep", "deleteStep", "toggleExpanded", "groupNameChange", "descriptionChange", "reusableChange", "openExternal", "edit", "link", "duplicate", "delete", "viewDetails", "selectionChange", "conditionChange", "branchStepChange", "addStepForBranch", "addStepForLoop", "deleteStepWithBranch", "addBranch", "addElse", "deleteBranch", "testDataProfileChange", "startStepChange", "endStepChange", "maxIterationsChange", "eventTypeChange", "parameterChange", "clickAction", "dndDropInZone", "loadMoreDataProfiles", "searchDataProfiles", "stepUpdate", "addStepBetweenClick", "editInDepth"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6$1.DndDropzoneDirective, selector: "[dndDropzone]", inputs: ["dndDropzone", "dndEffectAllowed", "dndAllowExternal", "dndHorizontal", "dndDragoverClass", "dndDropzoneDisabledClass", "dndDisableIf", "dndDisableDropIf"], outputs: ["dndDragover", "dndDrop"] }, { type: i6$1.DndPlaceholderRefDirective, selector: "[dndPlaceholderRef]" }, { type: i6$1.DndDraggableDirective, selector: "[dndDraggable]", inputs: ["dndDraggable", "dndEffectAllowed", "dndType", "dndDraggingClass", "dndDraggingSourceClass", "dndDraggableDisabledClass", "dndDragImageOffsetFunction", "dndDisableIf", "dndDisableDragIf"], outputs: ["dndStart", "dndDrag", "dndEnd", "dndMoved", "dndCopied", "dndLinked", "dndCanceled"] }], pipes: { "date": i2.DatePipe } });
|
|
26732
|
+
TestCaseStepGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestCaseStepGroupComponent, selector: "cqa-test-case-step-group", inputs: { config: "config", id: "id", stepNumber: "stepNumber", index: "index", groupName: "groupName", description: "description", reusable: "reusable", nestedSteps: "nestedSteps", expanded: "expanded", isNested: "isNested", isInsideLoop: "isInsideLoop", isInsideStepGroup: "isInsideStepGroup", isReorder: "isReorder", editable: "editable", nestingLevel: "nestingLevel", selected: "selected", isDuplicating: "isDuplicating", loading: "loading", dataProfileOptions: "dataProfileOptions", hasMoreDataProfiles: "hasMoreDataProfiles", isLoadingDataProfiles: "isLoadingDataProfiles", naturalTextActionsOptions: "naturalTextActionsOptions", currentTestCaseId: "currentTestCaseId", addStepBetweenAbove: "addStepBetweenAbove", addStepBetweenBelow: "addStepBetweenBelow", addStepBetween: "addStepBetween" }, outputs: { toggleExpanded: "toggleExpanded", groupNameChange: "groupNameChange", descriptionChange: "descriptionChange", reusableChange: "reusableChange", nestedStepChange: "nestedStepChange", addStep: "addStep", deleteStep: "deleteStep", openExternal: "openExternal", edit: "edit", editInDepth: "editInDepth", link: "link", duplicate: "duplicate", delete: "delete", viewDetails: "viewDetails", dndDropInZone: "dndDropInZone", loadMoreDataProfiles: "loadMoreDataProfiles", searchDataProfiles: "searchDataProfiles", stepUpdate: "stepUpdate", addStepBetweenClick: "addStepBetweenClick", addStepForLoop: "addStepForLoop", selectionChange: "selectionChange", deleteBranch: "deleteBranch" }, host: { classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "viewDetailsTrigger", first: true, predicate: ["viewDetailsTrigger"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div [class]=\"'cqa-flex cqa-flex-col'\" style=\"border-bottom: 1px solid #E5E7EB;\">\n <!-- Step Group Header -->\n <div\n [class]=\"'step-row cqa-flex cqa-gap-3 cqa-items-center cqa-py-2 cqa-pr-4' + (config?.shouldSkip ? ' cqa-step-skipped' : '')\"\n [style.opacity]=\"config?.shouldSkip ? '0.6' : null\"\n [style.padding-left.px]=\"getRowPaddingLeftPx()\"\n style=\"min-height: 50px; border-top: none;\">\n <div *ngIf=\"!isInsideStepGroup\" class=\"cqa-inline-flex cqa-items-center\">\n <!-- Drag Handle Icon (when isReorder is true and not inside step group - step groups inside step groups cannot be reordered) -->\n <div *ngIf=\"isReorder\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n </svg>\n </div>\n <!-- Checkbox (when isReorder is false and not inside step group - hide for steps inside step groups) -->\n <label *ngIf=\"editable && !isReorder\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative cqa-mr-2\">\n <input type=\"checkbox\"\n [ngModel]=\"selected\"\n (ngModelChange)=\"onSelectionChange($event)\"\n class=\"cqa-h-4 cqa-w-4 cqa-cursor-pointer cqa-transition-all cqa-appearance-none cqa-rounded shadow hover:cqa-shadow-md cqa-border cqa-border-solid cqa-border-slate-300 cqa-flex-shrink-0\"\n [class.cqa-bg-[#3F43EE]]=\"selected\"\n [class.cqa-border-[#3F43EE]]=\"selected\"\n id=\"check-step-group\" />\n <span class=\"cqa-absolute cqa-text-white cqa-top-1/2 cqa-left-1/2 cqa--translate-x-1/2 cqa--translate-y-1/2 cqa-pointer-events-none cqa-flex cqa-items-center cqa-justify-center\"\n [class.cqa-opacity-0]=\"!selected\"\n [class.cqa-opacity-100]=\"selected\">\n <svg width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 3.125L4.5 8.625L2 6.125\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </span>\n </label>\n </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 <!-- Expand/Collapse Icon -->\n <button type=\"button\" (click)=\"onToggleExpanded(); $event.stopPropagation()\" class=\"cqa-p-0\">\n <svg [class.cqa-rotate-180]=\"expanded\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6L8 10L12 6\" stroke=\"#6B7280\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button>\n\n <!-- Folder Icon -->\n <div>\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M15 15C15.3978 15 15.7794 14.842 16.0607 14.5607C16.342 14.2794 16.5 13.8978 16.5 13.5V6C16.5 5.60217 16.342 5.22064 16.0607 4.93934C15.7794 4.65804 15.3978 4.5 15 4.5H9.075C8.82413 4.50246 8.57666 4.44196 8.35523 4.32403C8.13379 4.20611 7.94547 4.03453 7.8075 3.825L7.2 2.925C7.06342 2.7176 6.87748 2.54736 6.65887 2.42955C6.44027 2.31174 6.19583 2.25004 5.9475 2.25H3C2.60218 2.25 2.22064 2.40804 1.93934 2.68934C1.65804 2.97064 1.5 3.35218 1.5 3.75V13.5C1.5 13.8978 1.65804 14.2794 1.93934 14.5607C2.22064 14.842 2.60218 15 3 15H15Z\"\n fill=\"#EFF6FF\" stroke=\"#60A5FA\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </div>\n\n <!-- Group Name and Description -->\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-gap-[2px]\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <!-- Group Name Input -->\n <p\n class=\"cqa-m-0 cqa-border-0 cqa-bg-transparent cqa-p-0 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[18px] !cqa-font-[600]\"\n [style.font-weight]=\"'600'\">{{groupName}}</p>\n <!-- Reusable Tag -->\n <span *ngIf=\"reusable\"\n class=\"cqa-px-2 cqa-py-[1.5px] cqa-rounded-lg cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-[#D8D9FC] cqa-border cqa-border-solid cqa-border-[#8A8CF4]\">\n Reusable\n </span>\n </div>\n\n <!-- Description -->\n <p class=\"cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px]\">{{description}}</p>\n </div>\n\n <!-- Steps Summary and Action Icons -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 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 - placed first -->\n <div *ngIf=\"editable && !isReorder && !isInsideStepGroup\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-1.5 cqa-pr-2\">\n\n <!-- Edit Icon -->\n <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M7 11.6666H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M9.55208 2.1128C9.7843 1.88058 10.0993 1.75012 10.4277 1.75012C10.7561 1.75012 11.071 1.88058 11.3033 2.1128C11.5355 2.34502 11.6659 2.65998 11.6659 2.98838C11.6659 3.31679 11.5355 3.63175 11.3033 3.86397L4.29742 10.8704C4.15864 11.0092 3.9871 11.1107 3.79867 11.1656L2.12333 11.6544C2.07314 11.669 2.01993 11.6699 1.96928 11.6569C1.91863 11.6439 1.8724 11.6176 1.83543 11.5806C1.79846 11.5437 1.7721 11.4974 1.75913 11.4468C1.74615 11.3961 1.74703 11.3429 1.76167 11.2927L2.2505 9.61738C2.30546 9.42916 2.40698 9.25783 2.54567 9.11922L9.55208 2.1128Z\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </button>\n <button type=\"button\" (click)=\"onSkipToggle(); $event.stopPropagation()\" [attr.title]=\"config?.shouldSkip ? 'Unskip step' : 'Skip step'\" [class.cqa-text-[#1447E6]]=\"config?.shouldSkip\" 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=\"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\n <!-- Link Icon -->\n <!-- <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <g clip-path=\"url(#clip0_609_26588)\">\n <path\n d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\"\n stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\"\n stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </g>\n <defs>\n <clipPath id=\"clip0_609_26588\">\n <rect width=\"14\" height=\"14\" fill=\"white\" />\n </clipPath>\n </defs>\n </svg>\n </button> -->\n\n <!-- Duplicate Icon -->\n <button\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\n d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n <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\n <!-- Delete Icon -->\n <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\" class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M1.75 3.5H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M11.0827 3.5V11.6667C11.0827 12.25 10.4993 12.8333 9.91602 12.8333H4.08268C3.49935 12.8333 2.91602 12.25 2.91602 11.6667V3.5\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M4.66602 3.49996V2.33329C4.66602 1.74996 5.24935 1.16663 5.83268 1.16663H8.16602C8.74935 1.16663 9.33268 1.74996 9.33268 2.33329V3.49996\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M5.83398 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M8.16602 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button>\n </div>\n\n <!-- External Link Icon -->\n <button *ngIf=\"!isInsideStepGroup\" type=\"button\" (click)=\"onOpenExternal(); $event.stopPropagation()\" title=\"Open in new tab\"\n class=\"cqa-p-0 cqa-text-[#99999E] hover:cqa-text-[#1447E6]\">\n <svg width=\"16\" height=\"17\" viewBox=\"0 0 16 17\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M12 8.66667V12.6667C12 13.0203 11.8595 13.3594 11.6095 13.6095C11.3594 13.8595 11.0203 14 10.6667 14H3.33333C2.97971 14 2.64057 13.8595 2.39052 13.6095C2.14048 13.3594 2 13.0203 2 12.6667V5.33333C2 4.97971 2.14048 4.64057 2.39052 4.39052C2.64057 4.14048 2.97971 4 3.33333 4H7.33333M10 2H14M14 2V6M14 2L6.66667 9.33333\"\n stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </button>\n\n <!-- Steps Summary (show loader when loading on expand) -->\n <span *ngIf=\"loading || config?.loading\" class=\"cqa-inline-flex cqa-items-center cqa-gap-1.5 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-font-semibold\">\n <span class=\"cqa-inline-block cqa-w-3 cqa-h-3 cqa-border-2 cqa-border-solid cqa-border-[#3F43EE] cqa-border-t-transparent cqa-rounded-full cqa-animate-spin\"></span>\n Loading...\n </span>\n <span *ngIf=\"!(loading || config?.loading) && hasSteps()\" 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-font-semibold\">\n {{ getStepsSummary() }}\n </span>\n\n <!-- View Details Link (show only if description is not empty) -->\n <a *ngIf=\"!isInsideStepGroup && 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>\n\n <!-- Expanded Content with Nested Steps (indent so 14.1.1, 14.1.2 sit under 14.1) -->\n <div *ngIf=\"expanded\" class=\"cqa-flex cqa-flex-col\">\n <!-- Reusable step groups: nested steps are not edited here \u2014 changes would affect every test that references this group -->\n <div\n *ngIf=\"shouldShowReusableNestedEditBanner()\"\n role=\"status\"\n aria-live=\"polite\"\n class=\"cqa-flex cqa-gap-2 cqa-items-start cqa-py-2 cqa-pr-4 cqa-bg-[#FFFBEB] cqa-border-b cqa-border-solid cqa-border-[#FDE68A]\"\n [style.padding-left.px]=\"getRowPaddingLeftPx()\">\n <span class=\"cqa-mt-0.5 cqa-flex-shrink-0 cqa-text-[#D97706]\" aria-hidden=\"true\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M8 1.33334C4.31999 1.33334 1.33334 4.31999 1.33334 8C1.33334 11.68 4.31999 14.6667 8 14.6667C11.68 14.6667 14.6667 11.68 14.6667 8C14.6667 4.31999 11.68 1.33334 8 1.33334ZM8.66667 11.3333H7.33334V10H8.66667V11.3333ZM8.66667 8.66667H7.33334V4.66667H8.66667V8.66667Z\" fill=\"currentColor\"/>\n </svg>\n </span>\n <div class=\"cqa-min-w-0 cqa-flex cqa-flex-col cqa-gap-1\">\n <p class=\"cqa-m-0 cqa-text-[11px] cqa-leading-[16px] cqa-text-[#92400E]\">\n <span class=\"cqa-font-semibold\">Reusable step group:</span>\n You can review nested steps here, but you cannot edit them in this test case. This group may be used in many tests\u2014edits must be made in the\n <span class=\"cqa-whitespace-nowrap\">step group's own test case</span>\n so changes stay in one place and apply everywhere this group is referenced.\n </p>\n <button\n type=\"button\"\n (click)=\"onOpenExternal(); $event.stopPropagation()\"\n class=\"cqa-self-start cqa-p-0 cqa-border-0 cqa-bg-transparent cqa-text-left cqa-text-[11px] cqa-font-semibold cqa-leading-[16px] cqa-text-[#3F43EE] hover:cqa-underline cqa-cursor-pointer\">\n Open step group test case to edit\n </button>\n </div>\n </div>\n <!-- START GROUP Marker (centered) - only when there are nested steps -->\n <div\n *ngIf=\"nestedSteps.length > 0\"\n class=\"cqa-grid cqa-w-full cqa-place-items-center cqa-gap-0 cqa-py-[8px] cqa-px-4 cqa-border-0 cqa-bg-[rgba(219,234,254,0.5)]\">\n <span class=\"cqa-text-center cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold cqa-whitespace-nowrap cqa-bg-transparent cqa-text-[#1C398E]\">Start Group : {{ getStartGroupMarkerStepDisplay() }}</span>\n </div>\n <!-- Loading Indicator (only when there are no cached nested steps) -->\n <div *ngIf=\"loading && nestedSteps.length === 0\" class=\"cqa-flex cqa-items-center cqa-justify-center cqa-py-8 cqa-px-4\">\n <div class=\"cqa-flex cqa-flex-col cqa-items-center cqa-gap-3\">\n <!-- Spinner -->\n <svg class=\"cqa-animate-spin cqa-h-6 cqa-w-6 cqa-text-[#3F43EE]\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n <circle class=\"cqa-opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n <path class=\"cqa-opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n </svg>\n <span class=\"cqa-text-[#6B7280] cqa-text-sm\">Loading steps...</span>\n </div>\n </div>\n\n <!-- Nested step group inside another group: empty body (no START/END markers) -->\n <div\n *ngIf=\"!loading && nestedSteps.length === 0 && isInsideStepGroup\"\n class=\"cqa-grid cqa-w-full cqa-place-items-center cqa-gap-0 cqa-py-[8px] cqa-px-4 cqa-border-0 cqa-text-center cqa-text-[#1C398E] cqa-font-semibold cqa-text-[12px] cqa-leading-[15px] cqa-bg-[rgba(219,234,254,0.5)]\">\n No steps added\n </div>\n \n <!-- Nested Steps Content (keep visible even while refreshing) -->\n <div *ngIf=\"nestedSteps.length > 0\" class=\"cqa-flex cqa-flex-col\">\n <!-- Steps inside step groups cannot be reordered - always use non-dnd list (no drag handle/dropzone) -->\n <div class=\"cqa-flex cqa-flex-col\">\n <cqa-test-case-details-renderer\n *ngFor=\"let step of nestedSteps; let i = index\"\n [step]=\"step\"\n [index]=\"i\"\n [selected]=\"$any(step).selected\"\n [isNested]=\"true\"\n [isInsideStepGroup]=\"true\"\n [isReorder]=\"isReorder\"\n [nestingLevel]=\"nestingLevel + 1\"\n [addStepBetween]=\"false\"\n [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n [currentTestCaseId]=\"currentTestCaseId\"\n (nestedStepChange)=\"onNestedStepChange($event.step, $event.index)\"\n (addStep)=\"onAddStep()\"\n (deleteStep)=\"onDeleteStep($event)\"\n (toggleExpanded)=\"onNestedToggleExpanded($event, step, i)\"\n (groupNameChange)=\"$any(step).groupName = $event; onNestedStepChange(step, i)\"\n (descriptionChange)=\"$any(step).description = $event; onNestedStepChange(step, i)\"\n (reusableChange)=\"$any(step).reusable = $event; onNestedStepChange(step, i)\"\n (openExternal)=\"onNestedOpenExternal($event)\"\n (edit)=\"onNestedEdit($event)\"\n (link)=\"onNestedStepChange(step, i)\"\n (duplicate)=\"onNestedDuplicate($event, step)\"\n (delete)=\"onDeleteStep($event, i)\"\n (viewDetails)=\"viewDetails.emit($event)\"\n (conditionChange)=\"$any(step).condition = $event; onNestedStepChange(step, i)\"\n (branchStepChange)=\"onNestedStepChange(step, i)\"\n (addBranch)=\"onNestedConditionAddBranch($any(step), i)\"\n (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event, i)\"\n (testDataProfileChange)=\"$any(step).testDataProfile = $event; onNestedStepChange(step, i)\"\n (startStepChange)=\"$any(step).startStep = $event; onNestedStepChange(step, i)\"\n (endStepChange)=\"$any(step).endStep = $event; onNestedStepChange(step, i)\"\n (maxIterationsChange)=\"$any(step).maxIterations = $event; onNestedStepChange(step, i)\"\n (eventTypeChange)=\"$any(step).eventType = $event; onNestedStepChange(step, i)\"\n (parameterChange)=\"onNestedStepChange(step, i)\"\n (selectionChange)=\"$any(step).selected = $event; onNestedStepChange(step, i)\"\n (loadMoreDataProfiles)=\"loadMoreDataProfiles.emit($event)\"\n (searchDataProfiles)=\"searchDataProfiles.emit($event)\"\n (stepUpdate)=\"stepUpdate.emit($event)\"\n (dndDropInZone)=\"dndDropInZone.emit($event)\"\n (addStepBetweenClick)=\"addStepBetweenClick.emit($event)\"\n (addStepForLoop)=\"addStepForLoop.emit($event)\"\n >\n </cqa-test-case-details-renderer>\n </div>\n <!-- Steps inside step groups cannot be reordered - dnd list never shown -->\n <div *ngIf=\"false\" class=\"cqa-flex cqa-flex-col nested-step-drop-list\"\n [dndDropzone]=\"['step']\"\n dndEffectAllowed=\"move\"\n dndDragoverClass=\"dndDragover\"\n (dndDrop)=\"onDndDrop($event)\">\n <div dndPlaceholderRef class=\"step-drag-placeholder-nested cqa-my-1 cqa-min-h-[50px] cqa-border-2 cqa-border-dashed cqa-border-[#3F43EE] cqa-rounded cqa-bg-[rgba(63,67,238,0.08)] cqa-flex cqa-items-center cqa-justify-center cqa-text-[#3F43EE] cqa-text-xs\">Drop here</div>\n <div *ngFor=\"let step of nestedSteps; let i = index\" class=\"nested-step-drag-item\"\n [dndDraggable]=\"step\"\n dndEffectAllowed=\"move\"\n dndType=\"step\">\n <cqa-test-case-details-renderer\n [step]=\"step\"\n [index]=\"i\"\n [selected]=\"$any(step).selected\"\n [isNested]=\"true\"\n [isInsideStepGroup]=\"true\"\n [isReorder]=\"isReorder\"\n [nestingLevel]=\"nestingLevel + 1\"\n [addStepBetween]=\"false\"\n [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n [currentTestCaseId]=\"currentTestCaseId\"\n (nestedStepChange)=\"onNestedStepChange($event.step, $event.index)\"\n (addStep)=\"onAddStep()\"\n (deleteStep)=\"onDeleteStep($event)\"\n (toggleExpanded)=\"onNestedToggleExpanded($event, step, i)\"\n (groupNameChange)=\"$any(step).groupName = $event; onNestedStepChange(step, i)\"\n (descriptionChange)=\"$any(step).description = $event; onNestedStepChange(step, i)\"\n (reusableChange)=\"$any(step).reusable = $event; onNestedStepChange(step, i)\"\n (openExternal)=\"onNestedOpenExternal($event)\"\n (edit)=\"onNestedEdit($event)\"\n (link)=\"onNestedStepChange(step, i)\"\n (duplicate)=\"onNestedDuplicate($event, step)\"\n (delete)=\"onDeleteStep($event, i)\"\n (viewDetails)=\"viewDetails.emit($event)\"\n (conditionChange)=\"$any(step).condition = $event; onNestedStepChange(step, i)\"\n (branchStepChange)=\"onNestedStepChange(step, i)\"\n (addBranch)=\"onNestedConditionAddBranch($any(step), i)\"\n (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event, i)\"\n (testDataProfileChange)=\"$any(step).testDataProfile = $event; onNestedStepChange(step, i)\"\n (startStepChange)=\"$any(step).startStep = $event; onNestedStepChange(step, i)\"\n (endStepChange)=\"$any(step).endStep = $event; onNestedStepChange(step, i)\"\n (maxIterationsChange)=\"$any(step).maxIterations = $event; onNestedStepChange(step, i)\"\n (eventTypeChange)=\"$any(step).eventType = $event; onNestedStepChange(step, i)\"\n (parameterChange)=\"onNestedStepChange(step, i)\"\n (selectionChange)=\"$any(step).selected = $event; onNestedStepChange(step, i)\"\n (loadMoreDataProfiles)=\"loadMoreDataProfiles.emit($event)\"\n (searchDataProfiles)=\"searchDataProfiles.emit($event)\"\n (stepUpdate)=\"stepUpdate.emit($event)\"\n (dndDropInZone)=\"dndDropInZone.emit($event)\"\n (addStepBetweenClick)=\"addStepBetweenClick.emit($event)\"\n (addStepForLoop)=\"addStepForLoop.emit($event)\"\n >\n </cqa-test-case-details-renderer>\n </div>\n </div>\n\n <!-- END GROUP Marker (centered) - only when there are nested steps -->\n <div\n *ngIf=\"nestedSteps.length > 0\"\n class=\"cqa-grid cqa-w-full cqa-place-items-center cqa-gap-0 cqa-py-[8px] cqa-px-4 cqa-border-0 cqa-bg-[rgba(219,234,254,0.5)]\">\n <span class=\"cqa-text-center cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold cqa-whitespace-nowrap cqa-bg-transparent cqa-text-[#1C398E]\">End Group : {{ getEndGroupMarkerStepDisplay() }}</span>\n </div>\n </div>\n </div>\n</div>", styles: [".step-actions{opacity:0;transition:opacity .15s ease}.step-row:hover .step-actions{opacity:1}.step-row{vertical-align:middle;letter-spacing:normal}\n"], components: [{ type: TestCaseDetailsRendererComponent, selector: "cqa-test-case-details-renderer", inputs: ["step", "index", "isNested", "isInsideLoop", "isInsideStepGroup", "nestingLevel", "branch", "isReorder", "selected", "isDuplicating", "addStepBetweenAbove", "addStepBetweenBelow", "addStepBetween", "editable", "currentTestCaseId", "dataProfileOptions", "hasMoreDataProfiles", "isLoadingDataProfiles", "naturalTextActionsOptions", "setConditionTemplateVariables"], outputs: ["nestedStepChange", "addStep", "deleteStep", "toggleExpanded", "groupNameChange", "descriptionChange", "reusableChange", "openExternal", "edit", "link", "duplicate", "delete", "viewDetails", "selectionChange", "conditionChange", "branchStepChange", "addStepForBranch", "addStepForLoop", "deleteStepWithBranch", "addBranch", "addElse", "deleteBranch", "testDataProfileChange", "startStepChange", "endStepChange", "maxIterationsChange", "eventTypeChange", "parameterChange", "clickAction", "dndDropInZone", "loadMoreDataProfiles", "searchDataProfiles", "stepUpdate", "addStepBetweenClick", "editInDepth"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6$1.DndDropzoneDirective, selector: "[dndDropzone]", inputs: ["dndDropzone", "dndEffectAllowed", "dndAllowExternal", "dndHorizontal", "dndDragoverClass", "dndDropzoneDisabledClass", "dndDisableIf", "dndDisableDropIf"], outputs: ["dndDragover", "dndDrop"] }, { type: i6$1.DndPlaceholderRefDirective, selector: "[dndPlaceholderRef]" }, { type: i6$1.DndDraggableDirective, selector: "[dndDraggable]", inputs: ["dndDraggable", "dndEffectAllowed", "dndType", "dndDraggingClass", "dndDraggingSourceClass", "dndDraggableDisabledClass", "dndDragImageOffsetFunction", "dndDisableIf", "dndDisableDragIf"], outputs: ["dndStart", "dndDrag", "dndEnd", "dndMoved", "dndCopied", "dndLinked", "dndCanceled"] }], pipes: { "date": i2.DatePipe } });
|
|
26596
26733
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseStepGroupComponent, decorators: [{
|
|
26597
26734
|
type: Component,
|
|
26598
|
-
args: [{ selector: 'cqa-test-case-step-group', host: { class: 'cqa-ui-root' }, styles: [STEP_ROW_ACTIONS_STYLES], template: "<div [class]=\"'cqa-flex cqa-flex-col'\" style=\"border-bottom: 1px solid #E5E7EB;\">\n <!-- Step Group Header -->\n <div\n [class]=\"'step-row cqa-flex cqa-gap-3 cqa-items-center cqa-py-2 cqa-pr-4' + (config?.shouldSkip ? ' cqa-step-skipped' : '')\"\n [style.opacity]=\"config?.shouldSkip ? '0.6' : null\"\n [style.padding-left.px]=\"getRowPaddingLeftPx()\"\n style=\"min-height: 50px\">\n <div class=\"cqa-inline-flex cqa-items-center\">\n <!-- Drag Handle Icon (when isReorder is true and not inside step group - step groups 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 (ngModelChange)=\"onSelectionChange($event)\"\n class=\"cqa-h-4 cqa-w-4 cqa-cursor-pointer cqa-transition-all cqa-appearance-none cqa-rounded shadow hover:cqa-shadow-md cqa-border cqa-border-solid cqa-border-slate-300 cqa-flex-shrink-0\"\n [class.cqa-bg-[#3F43EE]]=\"selected\"\n [class.cqa-border-[#3F43EE]]=\"selected\"\n id=\"check-step-group\" />\n <span class=\"cqa-absolute cqa-text-white cqa-top-1/2 cqa-left-1/2 cqa--translate-x-1/2 cqa--translate-y-1/2 cqa-pointer-events-none cqa-flex cqa-items-center cqa-justify-center\"\n [class.cqa-opacity-0]=\"!selected\"\n [class.cqa-opacity-100]=\"selected\">\n <svg width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 3.125L4.5 8.625L2 6.125\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </span>\n </label>\n </div>\n <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px] cqa-min-w-[32px]\">{{ stepNumber }}</span>\n <!-- Expand/Collapse Icon -->\n <button type=\"button\" (click)=\"onToggleExpanded(); $event.stopPropagation()\" class=\"cqa-p-0\">\n <svg [class.cqa-rotate-180]=\"expanded\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6L8 10L12 6\" stroke=\"#6B7280\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button>\n\n <!-- Folder Icon -->\n <div>\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M15 15C15.3978 15 15.7794 14.842 16.0607 14.5607C16.342 14.2794 16.5 13.8978 16.5 13.5V6C16.5 5.60217 16.342 5.22064 16.0607 4.93934C15.7794 4.65804 15.3978 4.5 15 4.5H9.075C8.82413 4.50246 8.57666 4.44196 8.35523 4.32403C8.13379 4.20611 7.94547 4.03453 7.8075 3.825L7.2 2.925C7.06342 2.7176 6.87748 2.54736 6.65887 2.42955C6.44027 2.31174 6.19583 2.25004 5.9475 2.25H3C2.60218 2.25 2.22064 2.40804 1.93934 2.68934C1.65804 2.97064 1.5 3.35218 1.5 3.75V13.5C1.5 13.8978 1.65804 14.2794 1.93934 14.5607C2.22064 14.842 2.60218 15 3 15H15Z\"\n fill=\"#EFF6FF\" stroke=\"#60A5FA\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </div>\n\n <!-- Group Name and Description -->\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-gap-[2px]\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <!-- Group Name Input -->\n <p class=\"cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[18px] cqa-font-bold\">{{groupName}}</p>\n <!-- Reusable Tag -->\n <span *ngIf=\"reusable\"\n class=\"cqa-px-2 cqa-py-[1.5px] cqa-rounded-lg cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-[#D8D9FC] cqa-border cqa-border-solid cqa-border-[#8A8CF4]\">\n Reusable\n </span>\n </div>\n\n <!-- Description -->\n <p class=\"cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px]\">{{description}}</p>\n </div>\n\n <!-- Steps Summary and Action Icons -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 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 - placed first -->\n <div *ngIf=\"editable && !isReorder\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-1.5 cqa-pr-2\">\n\n <!-- Edit Icon -->\n <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M7 11.6666H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M9.55208 2.1128C9.7843 1.88058 10.0993 1.75012 10.4277 1.75012C10.7561 1.75012 11.071 1.88058 11.3033 2.1128C11.5355 2.34502 11.6659 2.65998 11.6659 2.98838C11.6659 3.31679 11.5355 3.63175 11.3033 3.86397L4.29742 10.8704C4.15864 11.0092 3.9871 11.1107 3.79867 11.1656L2.12333 11.6544C2.07314 11.669 2.01993 11.6699 1.96928 11.6569C1.91863 11.6439 1.8724 11.6176 1.83543 11.5806C1.79846 11.5437 1.7721 11.4974 1.75913 11.4468C1.74615 11.3961 1.74703 11.3429 1.76167 11.2927L2.2505 9.61738C2.30546 9.42916 2.40698 9.25783 2.54567 9.11922L9.55208 2.1128Z\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </button>\n <button type=\"button\" (click)=\"onSkipToggle(); $event.stopPropagation()\" [attr.title]=\"config?.shouldSkip ? 'Unskip step' : 'Skip step'\" [class.cqa-text-[#1447E6]]=\"config?.shouldSkip\" 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=\"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\n <!-- Link Icon -->\n <!-- <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <g clip-path=\"url(#clip0_609_26588)\">\n <path\n d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\"\n stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\"\n stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </g>\n <defs>\n <clipPath id=\"clip0_609_26588\">\n <rect width=\"14\" height=\"14\" fill=\"white\" />\n </clipPath>\n </defs>\n </svg>\n </button> -->\n\n <!-- Duplicate Icon -->\n <button\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\n d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n <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\n <!-- Delete Icon -->\n <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\" class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M1.75 3.5H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M11.0827 3.5V11.6667C11.0827 12.25 10.4993 12.8333 9.91602 12.8333H4.08268C3.49935 12.8333 2.91602 12.25 2.91602 11.6667V3.5\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M4.66602 3.49996V2.33329C4.66602 1.74996 5.24935 1.16663 5.83268 1.16663H8.16602C8.74935 1.16663 9.33268 1.74996 9.33268 2.33329V3.49996\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M5.83398 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M8.16602 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button>\n </div>\n\n <!-- External Link Icon -->\n <button type=\"button\" (click)=\"onOpenExternal(); $event.stopPropagation()\" title=\"Open in new tab\"\n class=\"cqa-p-0 cqa-text-[#99999E] hover:cqa-text-[#1447E6]\">\n <svg width=\"16\" height=\"17\" viewBox=\"0 0 16 17\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M12 8.66667V12.6667C12 13.0203 11.8595 13.3594 11.6095 13.6095C11.3594 13.8595 11.0203 14 10.6667 14H3.33333C2.97971 14 2.64057 13.8595 2.39052 13.6095C2.14048 13.3594 2 13.0203 2 12.6667V5.33333C2 4.97971 2.14048 4.64057 2.39052 4.39052C2.64057 4.14048 2.97971 4 3.33333 4H7.33333M10 2H14M14 2V6M14 2L6.66667 9.33333\"\n stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </button>\n\n <!-- Steps Summary (show loader when loading on expand) -->\n <span *ngIf=\"loading || config?.loading\" class=\"cqa-inline-flex cqa-items-center cqa-gap-1.5 cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-rounded-lg cqa-py-0.5 cqa-px-2 cqa-text-[#0A0A0A] cqa-text-[12px] cqa-leading-[15px]\">\n <span class=\"cqa-inline-block cqa-w-3 cqa-h-3 cqa-border-2 cqa-border-solid cqa-border-[#3F43EE] cqa-border-t-transparent cqa-rounded-full cqa-animate-spin\"></span>\n Loading...\n </span>\n <span *ngIf=\"!(loading || config?.loading) && hasSteps()\" class=\"cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-rounded-lg cqa-py-0.5 cqa-px-2 cqa-text-[#0A0A0A] cqa-text-[12px] cqa-leading-[15px]\">\n {{ getStepsSummary() }}\n </span>\n\n <!-- 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>\n\n <!-- Expanded Content with Nested Steps (indent so 14.1.1, 14.1.2 sit under 14.1) -->\n <div *ngIf=\"expanded\" class=\"cqa-flex cqa-flex-col\">\n <!-- START GROUP Marker (centered with decorative lines) - only when there are nested steps -->\n <div *ngIf=\"nestedSteps.length > 0\" class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-py-1 cqa-px-4 cqa-bg-[#D1C4E9]\" style=\"border-top: 1px solid #D1C4E9;\">\n <span class=\"cqa-flex-1 cqa-self-stretch cqa-border-t cqa-border-dashed cqa-border-white cqa-opacity-40\" style=\"min-width: 20px;\"></span>\n <span class=\"cqa-text-white cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-whitespace-nowrap\">START GROUP</span>\n <span class=\"cqa-flex-1 cqa-self-stretch cqa-border-t cqa-border-dashed cqa-border-white cqa-opacity-40\" style=\"min-width: 20px;\"></span>\n </div>\n <!-- Loading Indicator (only when there are no cached nested steps) -->\n <div *ngIf=\"loading && nestedSteps.length === 0\" class=\"cqa-flex cqa-items-center cqa-justify-center cqa-py-8 cqa-px-4\">\n <div class=\"cqa-flex cqa-flex-col cqa-items-center cqa-gap-3\">\n <!-- Spinner -->\n <svg class=\"cqa-animate-spin cqa-h-6 cqa-w-6 cqa-text-[#3F43EE]\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n <circle class=\"cqa-opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n <path class=\"cqa-opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n </svg>\n <span class=\"cqa-text-[#6B7280] cqa-text-sm\">Loading steps...</span>\n </div>\n </div>\n \n <!-- Nested Steps Content (keep visible even while refreshing) -->\n <div *ngIf=\"nestedSteps.length > 0\" class=\"cqa-flex cqa-flex-col\">\n <!-- Steps inside step groups cannot be reordered - always use non-dnd list (no drag handle/dropzone) -->\n <div class=\"cqa-flex cqa-flex-col\">\n <cqa-test-case-details-renderer\n *ngFor=\"let step of nestedSteps; let i = index\"\n [step]=\"step\"\n [index]=\"i\"\n [selected]=\"$any(step).selected\"\n [isNested]=\"true\"\n [isInsideStepGroup]=\"true\"\n [isReorder]=\"isReorder\"\n [nestingLevel]=\"nestingLevel + 1\"\n [addStepBetween]=\"false\"\n [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n (nestedStepChange)=\"onNestedStepChange($event.step, $event.index)\"\n (addStep)=\"onAddStep()\"\n (deleteStep)=\"onDeleteStep($event)\"\n (toggleExpanded)=\"onNestedToggleExpanded($event, step, i)\"\n (groupNameChange)=\"$any(step).groupName = $event; onNestedStepChange(step, i)\"\n (descriptionChange)=\"$any(step).description = $event; onNestedStepChange(step, i)\"\n (reusableChange)=\"$any(step).reusable = $event; onNestedStepChange(step, i)\"\n (openExternal)=\"onNestedOpenExternal($event)\"\n (edit)=\"onNestedEdit($event)\"\n (link)=\"onNestedStepChange(step, i)\"\n (duplicate)=\"onNestedDuplicate($event, step)\"\n (delete)=\"onDeleteStep($event, i)\"\n (viewDetails)=\"viewDetails.emit($event)\"\n (conditionChange)=\"$any(step).condition = $event; onNestedStepChange(step, i)\"\n (branchStepChange)=\"onNestedStepChange(step, i)\"\n (addBranch)=\"onNestedConditionAddBranch($any(step), i)\"\n (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event, i)\"\n (testDataProfileChange)=\"$any(step).testDataProfile = $event; onNestedStepChange(step, i)\"\n (startStepChange)=\"$any(step).startStep = $event; onNestedStepChange(step, i)\"\n (endStepChange)=\"$any(step).endStep = $event; onNestedStepChange(step, i)\"\n (maxIterationsChange)=\"$any(step).maxIterations = $event; onNestedStepChange(step, i)\"\n (eventTypeChange)=\"$any(step).eventType = $event; onNestedStepChange(step, i)\"\n (parameterChange)=\"onNestedStepChange(step, i)\"\n (selectionChange)=\"$any(step).selected = $event; onNestedStepChange(step, i)\"\n (loadMoreDataProfiles)=\"loadMoreDataProfiles.emit($event)\"\n (searchDataProfiles)=\"searchDataProfiles.emit($event)\"\n (stepUpdate)=\"stepUpdate.emit($event)\"\n (dndDropInZone)=\"dndDropInZone.emit($event)\"\n (addStepBetweenClick)=\"addStepBetweenClick.emit($event)\"\n (addStepForLoop)=\"addStepForLoop.emit($event)\"\n >\n </cqa-test-case-details-renderer>\n </div>\n <!-- Steps inside step groups cannot be reordered - dnd list never shown -->\n <div *ngIf=\"false\" class=\"cqa-flex cqa-flex-col nested-step-drop-list\"\n [dndDropzone]=\"['step']\"\n dndEffectAllowed=\"move\"\n dndDragoverClass=\"dndDragover\"\n (dndDrop)=\"onDndDrop($event)\">\n <div dndPlaceholderRef class=\"step-drag-placeholder-nested cqa-my-1 cqa-min-h-[50px] cqa-border-2 cqa-border-dashed cqa-border-[#3F43EE] cqa-rounded cqa-bg-[rgba(63,67,238,0.08)] cqa-flex cqa-items-center cqa-justify-center cqa-text-[#3F43EE] cqa-text-xs\">Drop here</div>\n <div *ngFor=\"let step of nestedSteps; let i = index\" class=\"nested-step-drag-item\"\n [dndDraggable]=\"step\"\n dndEffectAllowed=\"move\"\n dndType=\"step\">\n <cqa-test-case-details-renderer\n [step]=\"step\"\n [index]=\"i\"\n [selected]=\"$any(step).selected\"\n [isNested]=\"true\"\n [isInsideStepGroup]=\"true\"\n [isReorder]=\"isReorder\"\n [nestingLevel]=\"nestingLevel + 1\"\n [addStepBetween]=\"false\"\n [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n (nestedStepChange)=\"onNestedStepChange($event.step, $event.index)\"\n (addStep)=\"onAddStep()\"\n (deleteStep)=\"onDeleteStep($event)\"\n (toggleExpanded)=\"onNestedToggleExpanded($event, step, i)\"\n (groupNameChange)=\"$any(step).groupName = $event; onNestedStepChange(step, i)\"\n (descriptionChange)=\"$any(step).description = $event; onNestedStepChange(step, i)\"\n (reusableChange)=\"$any(step).reusable = $event; onNestedStepChange(step, i)\"\n (openExternal)=\"onNestedOpenExternal($event)\"\n (edit)=\"onNestedEdit($event)\"\n (link)=\"onNestedStepChange(step, i)\"\n (duplicate)=\"onNestedDuplicate($event, step)\"\n (delete)=\"onDeleteStep($event, i)\"\n (viewDetails)=\"viewDetails.emit($event)\"\n (conditionChange)=\"$any(step).condition = $event; onNestedStepChange(step, i)\"\n (branchStepChange)=\"onNestedStepChange(step, i)\"\n (addBranch)=\"onNestedConditionAddBranch($any(step), i)\"\n (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event, i)\"\n (testDataProfileChange)=\"$any(step).testDataProfile = $event; onNestedStepChange(step, i)\"\n (startStepChange)=\"$any(step).startStep = $event; onNestedStepChange(step, i)\"\n (endStepChange)=\"$any(step).endStep = $event; onNestedStepChange(step, i)\"\n (maxIterationsChange)=\"$any(step).maxIterations = $event; onNestedStepChange(step, i)\"\n (eventTypeChange)=\"$any(step).eventType = $event; onNestedStepChange(step, i)\"\n (parameterChange)=\"onNestedStepChange(step, i)\"\n (selectionChange)=\"$any(step).selected = $event; onNestedStepChange(step, i)\"\n (loadMoreDataProfiles)=\"loadMoreDataProfiles.emit($event)\"\n (searchDataProfiles)=\"searchDataProfiles.emit($event)\"\n (stepUpdate)=\"stepUpdate.emit($event)\"\n (dndDropInZone)=\"dndDropInZone.emit($event)\"\n (addStepBetweenClick)=\"addStepBetweenClick.emit($event)\"\n (addStepForLoop)=\"addStepForLoop.emit($event)\"\n >\n </cqa-test-case-details-renderer>\n </div>\n </div>\n\n <!-- END GROUP Marker (centered with decorative lines) - only when there are nested steps -->\n <div *ngIf=\"nestedSteps.length > 0\" class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-py-1 cqa-px-4 cqa-bg-[#D1C4E9]\" style=\"border-top: 1px solid #D1C4E9;\">\n <span class=\"cqa-flex-1 cqa-self-stretch cqa-border-t cqa-border-dashed cqa-border-white cqa-opacity-40\" style=\"min-width: 20px;\"></span>\n <span class=\"cqa-text-white cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-whitespace-nowrap\">END GROUP</span>\n <span class=\"cqa-flex-1 cqa-self-stretch cqa-border-t cqa-border-dashed cqa-border-white cqa-opacity-40\" style=\"min-width: 20px;\"></span>\n </div>\n </div>\n </div>\n</div>" }]
|
|
26735
|
+
args: [{ selector: 'cqa-test-case-step-group', host: { class: 'cqa-ui-root' }, styles: [STEP_ROW_ACTIONS_STYLES], template: "<div [class]=\"'cqa-flex cqa-flex-col'\" style=\"border-bottom: 1px solid #E5E7EB;\">\n <!-- Step Group Header -->\n <div\n [class]=\"'step-row cqa-flex cqa-gap-3 cqa-items-center cqa-py-2 cqa-pr-4' + (config?.shouldSkip ? ' cqa-step-skipped' : '')\"\n [style.opacity]=\"config?.shouldSkip ? '0.6' : null\"\n [style.padding-left.px]=\"getRowPaddingLeftPx()\"\n style=\"min-height: 50px; border-top: none;\">\n <div *ngIf=\"!isInsideStepGroup\" class=\"cqa-inline-flex cqa-items-center\">\n <!-- Drag Handle Icon (when isReorder is true and not inside step group - step groups inside step groups cannot be reordered) -->\n <div *ngIf=\"isReorder\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n </svg>\n </div>\n <!-- Checkbox (when isReorder is false and not inside step group - hide for steps inside step groups) -->\n <label *ngIf=\"editable && !isReorder\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative cqa-mr-2\">\n <input type=\"checkbox\"\n [ngModel]=\"selected\"\n (ngModelChange)=\"onSelectionChange($event)\"\n class=\"cqa-h-4 cqa-w-4 cqa-cursor-pointer cqa-transition-all cqa-appearance-none cqa-rounded shadow hover:cqa-shadow-md cqa-border cqa-border-solid cqa-border-slate-300 cqa-flex-shrink-0\"\n [class.cqa-bg-[#3F43EE]]=\"selected\"\n [class.cqa-border-[#3F43EE]]=\"selected\"\n id=\"check-step-group\" />\n <span class=\"cqa-absolute cqa-text-white cqa-top-1/2 cqa-left-1/2 cqa--translate-x-1/2 cqa--translate-y-1/2 cqa-pointer-events-none cqa-flex cqa-items-center cqa-justify-center\"\n [class.cqa-opacity-0]=\"!selected\"\n [class.cqa-opacity-100]=\"selected\">\n <svg width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 3.125L4.5 8.625L2 6.125\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </span>\n </label>\n </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 <!-- Expand/Collapse Icon -->\n <button type=\"button\" (click)=\"onToggleExpanded(); $event.stopPropagation()\" class=\"cqa-p-0\">\n <svg [class.cqa-rotate-180]=\"expanded\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6L8 10L12 6\" stroke=\"#6B7280\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button>\n\n <!-- Folder Icon -->\n <div>\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M15 15C15.3978 15 15.7794 14.842 16.0607 14.5607C16.342 14.2794 16.5 13.8978 16.5 13.5V6C16.5 5.60217 16.342 5.22064 16.0607 4.93934C15.7794 4.65804 15.3978 4.5 15 4.5H9.075C8.82413 4.50246 8.57666 4.44196 8.35523 4.32403C8.13379 4.20611 7.94547 4.03453 7.8075 3.825L7.2 2.925C7.06342 2.7176 6.87748 2.54736 6.65887 2.42955C6.44027 2.31174 6.19583 2.25004 5.9475 2.25H3C2.60218 2.25 2.22064 2.40804 1.93934 2.68934C1.65804 2.97064 1.5 3.35218 1.5 3.75V13.5C1.5 13.8978 1.65804 14.2794 1.93934 14.5607C2.22064 14.842 2.60218 15 3 15H15Z\"\n fill=\"#EFF6FF\" stroke=\"#60A5FA\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </div>\n\n <!-- Group Name and Description -->\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-gap-[2px]\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <!-- Group Name Input -->\n <p\n class=\"cqa-m-0 cqa-border-0 cqa-bg-transparent cqa-p-0 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[18px] !cqa-font-[600]\"\n [style.font-weight]=\"'600'\">{{groupName}}</p>\n <!-- Reusable Tag -->\n <span *ngIf=\"reusable\"\n class=\"cqa-px-2 cqa-py-[1.5px] cqa-rounded-lg cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-[#D8D9FC] cqa-border cqa-border-solid cqa-border-[#8A8CF4]\">\n Reusable\n </span>\n </div>\n\n <!-- Description -->\n <p class=\"cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px]\">{{description}}</p>\n </div>\n\n <!-- Steps Summary and Action Icons -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 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 - placed first -->\n <div *ngIf=\"editable && !isReorder && !isInsideStepGroup\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-1.5 cqa-pr-2\">\n\n <!-- Edit Icon -->\n <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M7 11.6666H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M9.55208 2.1128C9.7843 1.88058 10.0993 1.75012 10.4277 1.75012C10.7561 1.75012 11.071 1.88058 11.3033 2.1128C11.5355 2.34502 11.6659 2.65998 11.6659 2.98838C11.6659 3.31679 11.5355 3.63175 11.3033 3.86397L4.29742 10.8704C4.15864 11.0092 3.9871 11.1107 3.79867 11.1656L2.12333 11.6544C2.07314 11.669 2.01993 11.6699 1.96928 11.6569C1.91863 11.6439 1.8724 11.6176 1.83543 11.5806C1.79846 11.5437 1.7721 11.4974 1.75913 11.4468C1.74615 11.3961 1.74703 11.3429 1.76167 11.2927L2.2505 9.61738C2.30546 9.42916 2.40698 9.25783 2.54567 9.11922L9.55208 2.1128Z\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </button>\n <button type=\"button\" (click)=\"onSkipToggle(); $event.stopPropagation()\" [attr.title]=\"config?.shouldSkip ? 'Unskip step' : 'Skip step'\" [class.cqa-text-[#1447E6]]=\"config?.shouldSkip\" 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=\"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\n <!-- Link Icon -->\n <!-- <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <g clip-path=\"url(#clip0_609_26588)\">\n <path\n d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\"\n stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\"\n stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </g>\n <defs>\n <clipPath id=\"clip0_609_26588\">\n <rect width=\"14\" height=\"14\" fill=\"white\" />\n </clipPath>\n </defs>\n </svg>\n </button> -->\n\n <!-- Duplicate Icon -->\n <button\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\n d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n <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\n <!-- Delete Icon -->\n <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\" class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M1.75 3.5H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M11.0827 3.5V11.6667C11.0827 12.25 10.4993 12.8333 9.91602 12.8333H4.08268C3.49935 12.8333 2.91602 12.25 2.91602 11.6667V3.5\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M4.66602 3.49996V2.33329C4.66602 1.74996 5.24935 1.16663 5.83268 1.16663H8.16602C8.74935 1.16663 9.33268 1.74996 9.33268 2.33329V3.49996\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M5.83398 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M8.16602 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button>\n </div>\n\n <!-- External Link Icon -->\n <button *ngIf=\"!isInsideStepGroup\" type=\"button\" (click)=\"onOpenExternal(); $event.stopPropagation()\" title=\"Open in new tab\"\n class=\"cqa-p-0 cqa-text-[#99999E] hover:cqa-text-[#1447E6]\">\n <svg width=\"16\" height=\"17\" viewBox=\"0 0 16 17\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M12 8.66667V12.6667C12 13.0203 11.8595 13.3594 11.6095 13.6095C11.3594 13.8595 11.0203 14 10.6667 14H3.33333C2.97971 14 2.64057 13.8595 2.39052 13.6095C2.14048 13.3594 2 13.0203 2 12.6667V5.33333C2 4.97971 2.14048 4.64057 2.39052 4.39052C2.64057 4.14048 2.97971 4 3.33333 4H7.33333M10 2H14M14 2V6M14 2L6.66667 9.33333\"\n stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </button>\n\n <!-- Steps Summary (show loader when loading on expand) -->\n <span *ngIf=\"loading || config?.loading\" class=\"cqa-inline-flex cqa-items-center cqa-gap-1.5 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-font-semibold\">\n <span class=\"cqa-inline-block cqa-w-3 cqa-h-3 cqa-border-2 cqa-border-solid cqa-border-[#3F43EE] cqa-border-t-transparent cqa-rounded-full cqa-animate-spin\"></span>\n Loading...\n </span>\n <span *ngIf=\"!(loading || config?.loading) && hasSteps()\" 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-font-semibold\">\n {{ getStepsSummary() }}\n </span>\n\n <!-- View Details Link (show only if description is not empty) -->\n <a *ngIf=\"!isInsideStepGroup && 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>\n\n <!-- Expanded Content with Nested Steps (indent so 14.1.1, 14.1.2 sit under 14.1) -->\n <div *ngIf=\"expanded\" class=\"cqa-flex cqa-flex-col\">\n <!-- Reusable step groups: nested steps are not edited here \u2014 changes would affect every test that references this group -->\n <div\n *ngIf=\"shouldShowReusableNestedEditBanner()\"\n role=\"status\"\n aria-live=\"polite\"\n class=\"cqa-flex cqa-gap-2 cqa-items-start cqa-py-2 cqa-pr-4 cqa-bg-[#FFFBEB] cqa-border-b cqa-border-solid cqa-border-[#FDE68A]\"\n [style.padding-left.px]=\"getRowPaddingLeftPx()\">\n <span class=\"cqa-mt-0.5 cqa-flex-shrink-0 cqa-text-[#D97706]\" aria-hidden=\"true\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M8 1.33334C4.31999 1.33334 1.33334 4.31999 1.33334 8C1.33334 11.68 4.31999 14.6667 8 14.6667C11.68 14.6667 14.6667 11.68 14.6667 8C14.6667 4.31999 11.68 1.33334 8 1.33334ZM8.66667 11.3333H7.33334V10H8.66667V11.3333ZM8.66667 8.66667H7.33334V4.66667H8.66667V8.66667Z\" fill=\"currentColor\"/>\n </svg>\n </span>\n <div class=\"cqa-min-w-0 cqa-flex cqa-flex-col cqa-gap-1\">\n <p class=\"cqa-m-0 cqa-text-[11px] cqa-leading-[16px] cqa-text-[#92400E]\">\n <span class=\"cqa-font-semibold\">Reusable step group:</span>\n You can review nested steps here, but you cannot edit them in this test case. This group may be used in many tests\u2014edits must be made in the\n <span class=\"cqa-whitespace-nowrap\">step group's own test case</span>\n so changes stay in one place and apply everywhere this group is referenced.\n </p>\n <button\n type=\"button\"\n (click)=\"onOpenExternal(); $event.stopPropagation()\"\n class=\"cqa-self-start cqa-p-0 cqa-border-0 cqa-bg-transparent cqa-text-left cqa-text-[11px] cqa-font-semibold cqa-leading-[16px] cqa-text-[#3F43EE] hover:cqa-underline cqa-cursor-pointer\">\n Open step group test case to edit\n </button>\n </div>\n </div>\n <!-- START GROUP Marker (centered) - only when there are nested steps -->\n <div\n *ngIf=\"nestedSteps.length > 0\"\n class=\"cqa-grid cqa-w-full cqa-place-items-center cqa-gap-0 cqa-py-[8px] cqa-px-4 cqa-border-0 cqa-bg-[rgba(219,234,254,0.5)]\">\n <span class=\"cqa-text-center cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold cqa-whitespace-nowrap cqa-bg-transparent cqa-text-[#1C398E]\">Start Group : {{ getStartGroupMarkerStepDisplay() }}</span>\n </div>\n <!-- Loading Indicator (only when there are no cached nested steps) -->\n <div *ngIf=\"loading && nestedSteps.length === 0\" class=\"cqa-flex cqa-items-center cqa-justify-center cqa-py-8 cqa-px-4\">\n <div class=\"cqa-flex cqa-flex-col cqa-items-center cqa-gap-3\">\n <!-- Spinner -->\n <svg class=\"cqa-animate-spin cqa-h-6 cqa-w-6 cqa-text-[#3F43EE]\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n <circle class=\"cqa-opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n <path class=\"cqa-opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n </svg>\n <span class=\"cqa-text-[#6B7280] cqa-text-sm\">Loading steps...</span>\n </div>\n </div>\n\n <!-- Nested step group inside another group: empty body (no START/END markers) -->\n <div\n *ngIf=\"!loading && nestedSteps.length === 0 && isInsideStepGroup\"\n class=\"cqa-grid cqa-w-full cqa-place-items-center cqa-gap-0 cqa-py-[8px] cqa-px-4 cqa-border-0 cqa-text-center cqa-text-[#1C398E] cqa-font-semibold cqa-text-[12px] cqa-leading-[15px] cqa-bg-[rgba(219,234,254,0.5)]\">\n No steps added\n </div>\n \n <!-- Nested Steps Content (keep visible even while refreshing) -->\n <div *ngIf=\"nestedSteps.length > 0\" class=\"cqa-flex cqa-flex-col\">\n <!-- Steps inside step groups cannot be reordered - always use non-dnd list (no drag handle/dropzone) -->\n <div class=\"cqa-flex cqa-flex-col\">\n <cqa-test-case-details-renderer\n *ngFor=\"let step of nestedSteps; let i = index\"\n [step]=\"step\"\n [index]=\"i\"\n [selected]=\"$any(step).selected\"\n [isNested]=\"true\"\n [isInsideStepGroup]=\"true\"\n [isReorder]=\"isReorder\"\n [nestingLevel]=\"nestingLevel + 1\"\n [addStepBetween]=\"false\"\n [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n [currentTestCaseId]=\"currentTestCaseId\"\n (nestedStepChange)=\"onNestedStepChange($event.step, $event.index)\"\n (addStep)=\"onAddStep()\"\n (deleteStep)=\"onDeleteStep($event)\"\n (toggleExpanded)=\"onNestedToggleExpanded($event, step, i)\"\n (groupNameChange)=\"$any(step).groupName = $event; onNestedStepChange(step, i)\"\n (descriptionChange)=\"$any(step).description = $event; onNestedStepChange(step, i)\"\n (reusableChange)=\"$any(step).reusable = $event; onNestedStepChange(step, i)\"\n (openExternal)=\"onNestedOpenExternal($event)\"\n (edit)=\"onNestedEdit($event)\"\n (link)=\"onNestedStepChange(step, i)\"\n (duplicate)=\"onNestedDuplicate($event, step)\"\n (delete)=\"onDeleteStep($event, i)\"\n (viewDetails)=\"viewDetails.emit($event)\"\n (conditionChange)=\"$any(step).condition = $event; onNestedStepChange(step, i)\"\n (branchStepChange)=\"onNestedStepChange(step, i)\"\n (addBranch)=\"onNestedConditionAddBranch($any(step), i)\"\n (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event, i)\"\n (testDataProfileChange)=\"$any(step).testDataProfile = $event; onNestedStepChange(step, i)\"\n (startStepChange)=\"$any(step).startStep = $event; onNestedStepChange(step, i)\"\n (endStepChange)=\"$any(step).endStep = $event; onNestedStepChange(step, i)\"\n (maxIterationsChange)=\"$any(step).maxIterations = $event; onNestedStepChange(step, i)\"\n (eventTypeChange)=\"$any(step).eventType = $event; onNestedStepChange(step, i)\"\n (parameterChange)=\"onNestedStepChange(step, i)\"\n (selectionChange)=\"$any(step).selected = $event; onNestedStepChange(step, i)\"\n (loadMoreDataProfiles)=\"loadMoreDataProfiles.emit($event)\"\n (searchDataProfiles)=\"searchDataProfiles.emit($event)\"\n (stepUpdate)=\"stepUpdate.emit($event)\"\n (dndDropInZone)=\"dndDropInZone.emit($event)\"\n (addStepBetweenClick)=\"addStepBetweenClick.emit($event)\"\n (addStepForLoop)=\"addStepForLoop.emit($event)\"\n >\n </cqa-test-case-details-renderer>\n </div>\n <!-- Steps inside step groups cannot be reordered - dnd list never shown -->\n <div *ngIf=\"false\" class=\"cqa-flex cqa-flex-col nested-step-drop-list\"\n [dndDropzone]=\"['step']\"\n dndEffectAllowed=\"move\"\n dndDragoverClass=\"dndDragover\"\n (dndDrop)=\"onDndDrop($event)\">\n <div dndPlaceholderRef class=\"step-drag-placeholder-nested cqa-my-1 cqa-min-h-[50px] cqa-border-2 cqa-border-dashed cqa-border-[#3F43EE] cqa-rounded cqa-bg-[rgba(63,67,238,0.08)] cqa-flex cqa-items-center cqa-justify-center cqa-text-[#3F43EE] cqa-text-xs\">Drop here</div>\n <div *ngFor=\"let step of nestedSteps; let i = index\" class=\"nested-step-drag-item\"\n [dndDraggable]=\"step\"\n dndEffectAllowed=\"move\"\n dndType=\"step\">\n <cqa-test-case-details-renderer\n [step]=\"step\"\n [index]=\"i\"\n [selected]=\"$any(step).selected\"\n [isNested]=\"true\"\n [isInsideStepGroup]=\"true\"\n [isReorder]=\"isReorder\"\n [nestingLevel]=\"nestingLevel + 1\"\n [addStepBetween]=\"false\"\n [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n [currentTestCaseId]=\"currentTestCaseId\"\n (nestedStepChange)=\"onNestedStepChange($event.step, $event.index)\"\n (addStep)=\"onAddStep()\"\n (deleteStep)=\"onDeleteStep($event)\"\n (toggleExpanded)=\"onNestedToggleExpanded($event, step, i)\"\n (groupNameChange)=\"$any(step).groupName = $event; onNestedStepChange(step, i)\"\n (descriptionChange)=\"$any(step).description = $event; onNestedStepChange(step, i)\"\n (reusableChange)=\"$any(step).reusable = $event; onNestedStepChange(step, i)\"\n (openExternal)=\"onNestedOpenExternal($event)\"\n (edit)=\"onNestedEdit($event)\"\n (link)=\"onNestedStepChange(step, i)\"\n (duplicate)=\"onNestedDuplicate($event, step)\"\n (delete)=\"onDeleteStep($event, i)\"\n (viewDetails)=\"viewDetails.emit($event)\"\n (conditionChange)=\"$any(step).condition = $event; onNestedStepChange(step, i)\"\n (branchStepChange)=\"onNestedStepChange(step, i)\"\n (addBranch)=\"onNestedConditionAddBranch($any(step), i)\"\n (deleteBranch)=\"onNestedConditionDeleteBranch($any(step), $event, i)\"\n (testDataProfileChange)=\"$any(step).testDataProfile = $event; onNestedStepChange(step, i)\"\n (startStepChange)=\"$any(step).startStep = $event; onNestedStepChange(step, i)\"\n (endStepChange)=\"$any(step).endStep = $event; onNestedStepChange(step, i)\"\n (maxIterationsChange)=\"$any(step).maxIterations = $event; onNestedStepChange(step, i)\"\n (eventTypeChange)=\"$any(step).eventType = $event; onNestedStepChange(step, i)\"\n (parameterChange)=\"onNestedStepChange(step, i)\"\n (selectionChange)=\"$any(step).selected = $event; onNestedStepChange(step, i)\"\n (loadMoreDataProfiles)=\"loadMoreDataProfiles.emit($event)\"\n (searchDataProfiles)=\"searchDataProfiles.emit($event)\"\n (stepUpdate)=\"stepUpdate.emit($event)\"\n (dndDropInZone)=\"dndDropInZone.emit($event)\"\n (addStepBetweenClick)=\"addStepBetweenClick.emit($event)\"\n (addStepForLoop)=\"addStepForLoop.emit($event)\"\n >\n </cqa-test-case-details-renderer>\n </div>\n </div>\n\n <!-- END GROUP Marker (centered) - only when there are nested steps -->\n <div\n *ngIf=\"nestedSteps.length > 0\"\n class=\"cqa-grid cqa-w-full cqa-place-items-center cqa-gap-0 cqa-py-[8px] cqa-px-4 cqa-border-0 cqa-bg-[rgba(219,234,254,0.5)]\">\n <span class=\"cqa-text-center cqa-text-[12px] cqa-leading-[15px] cqa-font-semibold cqa-whitespace-nowrap cqa-bg-transparent cqa-text-[#1C398E]\">End Group : {{ getEndGroupMarkerStepDisplay() }}</span>\n </div>\n </div>\n </div>\n</div>" }]
|
|
26599
26736
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { config: [{
|
|
26600
26737
|
type: Input
|
|
26601
26738
|
}], id: [{
|
|
@@ -26640,6 +26777,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
26640
26777
|
type: Input
|
|
26641
26778
|
}], naturalTextActionsOptions: [{
|
|
26642
26779
|
type: Input
|
|
26780
|
+
}], currentTestCaseId: [{
|
|
26781
|
+
type: Input
|
|
26643
26782
|
}], addStepBetweenAbove: [{
|
|
26644
26783
|
type: Input
|
|
26645
26784
|
}], addStepBetweenBelow: [{
|
|
@@ -26806,10 +26945,10 @@ class TestCaseApiStepComponent {
|
|
|
26806
26945
|
onSelectionChange(checked) { this.selected = checked; this.selectionChange.emit(checked); }
|
|
26807
26946
|
}
|
|
26808
26947
|
TestCaseApiStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseApiStepComponent, deps: [{ token: i1$7.OverlayContainer }], target: i0.ɵɵFactoryTarget.Component });
|
|
26809
|
-
TestCaseApiStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestCaseApiStepComponent, selector: "cqa-test-case-api-step", inputs: { config: "config", stepNumber: "stepNumber", method: "method", endpoint: "endpoint", description: "description", baseUrl: "baseUrl", headersCount: "headersCount", hasBody: "hasBody", saveTo: "saveTo", selected: "selected", disabled: "disabled", isNested: "isNested", isInsideLoop: "isInsideLoop", isInsideStepGroup: "isInsideStepGroup", expanded: "expanded", isReorder: "isReorder", editable: "editable", isDuplicating: "isDuplicating", environmentOptions: "environmentOptions", httpMethodOptions: "httpMethodOptions", headerNameOptions: "headerNameOptions" }, outputs: { edit: "edit", editInDepth: "editInDepth", link: "link", duplicate: "duplicate", delete: "delete", moreOptions: "moreOptions", viewDetails: "viewDetails", selectionChange: "selectionChange", toggleExpanded: "toggleExpanded", stepUpdate: "stepUpdate" }, host: { classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "editModalBackdropRef", first: true, predicate: ["editModalBackdrop"], descendants: true }], ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col\" style=\"border-top: 1px solid #E5E7EB; border-bottom: 1px solid #E5E7EB;\">\n <div\n [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 ' + (isInsideLoop && isInsideStepGroup ? 'cqa-pl-20 cqa-pr-4' : (isInsideLoop || isInsideStepGroup) ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4') + (config?.shouldSkip ? ' cqa-step-skipped' : '')\"\n [style.opacity]=\"config?.shouldSkip ? '0.6' : null\">\n <div 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\" [ngModel]=\"selected\" [disabled]=\"disabled\" (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\" [class.cqa-border-[#3F43EE]]=\"selected\" id=\"check\" />\n <span\n 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\" [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\">\n <path d=\"M10 3.125L4.5 8.625L2 6.125\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </span>\n </label>\n </div>\n <div *ngIf=\"isInsideStepGroup\" class=\"cqa-ml-1 cqa-mr-1 cqa-text-[#9CA3AF]\">\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=\"API\"\n class=\"cqa-w-8 cqa-h-8 cqa-rounded-lg cqa-flex cqa-items-center cqa-justify-center cqa-flex-shrink-0 cqa-bg-[#D1FAE5] cqa-text-[#059669]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4.08333 7H9.91667M9.91667 7L7.58333 4.66667M9.91667 7L7.58333 9.33333\" stroke=\"currentColor\"\n stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M7 12.8333C10.2217 12.8333 12.8333 10.2217 12.8333 7C12.8333 3.77834 10.2217 1.16667 7 1.16667C3.77834 1.16667 1.16667 3.77834 1.16667 7C1.16667 10.2217 3.77834 12.8333 7 12.8333Z\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </span>\n <div class=\"cqa-flex-grow cqa-flex cqa-flex-col cqa-gap-1\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px]\">{{ getDisplayText() }}</span>\n </div>\n <!-- Expanded details: light yellow box with summary, method, URL, headers, body, save to -->\n <div *ngIf=\"expanded\"\n [class]=\"'cqa-py-1 cqa-px-3 cqa-rounded-lg cqa-border cqa-border-solid cqa-bg-[#FEFCE8] cqa-border-[#FFF085]' + (isInsideLoop ? ' cqa-ml-10' : '')\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n <div *ngIf=\"description && description.trim() !== ''\" class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <span class=\"cqa-text-[#6B7280] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium\">Summary:</span>\n <span class=\"cqa-text-[#111827] cqa-text-[12px] cqa-leading-[15px]\">{{ description }}</span>\n </div>\n <div\n class=\"cqa-text-[#6B7280] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-flex-wrap cqa-items-center cqa-gap-8\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-3\">\n <span class=\"cqa-text-[#733E0A] cqa-text-[12px] cqa-leading-[15px] cqa-font-normal\">{{method }}</span>\n <span>{{ baseUrl || 'https://api.example.com' }}</span>\n </div>\n <span class=\"cqa-text-[#111827]\">{{ endpoint }}</span>\n <div class=\"cqa-flex cqa-items-center cqa-gap-3\">\n <span>Headers: {{ headersCount ?? 0 }}</span>\n <span>Body: {{ hasBody ? 'Yes' : 'No' }}</span>\n <span>Save to: {{ saveTo || '\u2014' }}</span>\n </div>\n </div>\n </div>\n </div>\n </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\"\n class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M7 11.6666H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M9.55208 2.1128C9.7843 1.88058 10.0993 1.75012 10.4277 1.75012C10.7561 1.75012 11.071 1.88058 11.3033 2.1128C11.5355 2.34502 11.6659 2.65998 11.6659 2.98838C11.6659 3.31679 11.5355 3.63175 11.3033 3.86397L4.29742 10.8704C4.15864 11.0092 3.9871 11.1107 3.79867 11.1656L2.12333 11.6544C2.07314 11.669 2.01993 11.6699 1.96928 11.6569C1.91863 11.6439 1.8724 11.6176 1.83543 11.5806C1.79846 11.5437 1.7721 11.4974 1.75913 11.4468C1.74615 11.3961 1.74703 11.3429 1.76167 11.2927L2.2505 9.61738C2.30546 9.42916 2.40698 9.25783 2.54567 9.11922L9.55208 2.1128Z\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </button>\n <button type=\"button\" (click)=\"onSkipToggle(); $event.stopPropagation()\" [attr.title]=\"config?.shouldSkip ? 'Unskip step' : 'Skip step'\" [class.cqa-text-[#1447E6]]=\"config?.shouldSkip\" 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=\"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\"\n class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\"\n stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\"\n stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button> -->\n <button\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\n d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n <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\"\n class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M1.75 3.5H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M11.0827 3.5V11.6667C11.0827 12.25 10.4993 12.8333 9.91602 12.8333H4.08268C3.49935 12.8333 2.91602 12.25 2.91602 11.6667V3.5\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M4.66602 3.49996V2.33329C4.66602 1.74996 5.24935 1.16663 5.83268 1.16663H8.16602C8.74935 1.16663 9.33268 1.74996 9.33268 2.33329V3.49996\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M5.83398 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M8.16602 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button>\n </div>\n <!-- View Details Link (show only if description is not empty) - after action buttons, before date -->\n <a *ngIf=\"description && description.trim() !== ''\" #viewDetailsTrigger href=\"#\" (click)=\"onViewDetails($event)\"\n class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-1 cqa-no-underline\">\n {{ expanded ? 'Hide Details' : 'View Details' }}\n <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <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\"/>\n </svg>\n </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</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"] }], pipes: { "date": i2.DatePipe } });
|
|
26948
|
+
TestCaseApiStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestCaseApiStepComponent, selector: "cqa-test-case-api-step", inputs: { config: "config", stepNumber: "stepNumber", method: "method", endpoint: "endpoint", description: "description", baseUrl: "baseUrl", headersCount: "headersCount", hasBody: "hasBody", saveTo: "saveTo", selected: "selected", disabled: "disabled", isNested: "isNested", isInsideLoop: "isInsideLoop", isInsideStepGroup: "isInsideStepGroup", expanded: "expanded", isReorder: "isReorder", editable: "editable", isDuplicating: "isDuplicating", environmentOptions: "environmentOptions", httpMethodOptions: "httpMethodOptions", headerNameOptions: "headerNameOptions" }, outputs: { edit: "edit", editInDepth: "editInDepth", link: "link", duplicate: "duplicate", delete: "delete", moreOptions: "moreOptions", viewDetails: "viewDetails", selectionChange: "selectionChange", toggleExpanded: "toggleExpanded", stepUpdate: "stepUpdate" }, host: { classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "editModalBackdropRef", first: true, predicate: ["editModalBackdrop"], descendants: true }], ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col\" style=\"border-top: 1px solid #E5E7EB; border-bottom: 1px solid #E5E7EB;\">\n <div\n [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 ' + (isInsideLoop && isInsideStepGroup ? 'cqa-pl-20 cqa-pr-4' : (isInsideLoop || isInsideStepGroup) ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4') + (config?.shouldSkip ? ' cqa-step-skipped' : '')\"\n [style.opacity]=\"config?.shouldSkip ? '0.6' : null\"\n [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\" [ngModel]=\"selected\" [disabled]=\"disabled\" (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\" [class.cqa-border-[#3F43EE]]=\"selected\" id=\"check\" />\n <span\n 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\" [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\">\n <path d=\"M10 3.125L4.5 8.625L2 6.125\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </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=\"API\"\n class=\"cqa-w-8 cqa-h-8 cqa-rounded-lg cqa-flex cqa-items-center cqa-justify-center cqa-flex-shrink-0 cqa-bg-[#D1FAE5] cqa-text-[#059669]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4.08333 7H9.91667M9.91667 7L7.58333 4.66667M9.91667 7L7.58333 9.33333\" stroke=\"currentColor\"\n stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M7 12.8333C10.2217 12.8333 12.8333 10.2217 12.8333 7C12.8333 3.77834 10.2217 1.16667 7 1.16667C3.77834 1.16667 1.16667 3.77834 1.16667 7C1.16667 10.2217 3.77834 12.8333 7 12.8333Z\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </span>\n <div class=\"cqa-flex-grow cqa-flex cqa-flex-col cqa-gap-1\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px]\">{{ getDisplayText() }}</span>\n </div>\n <!-- Expanded details: light yellow box with summary, method, URL, headers, body, save to -->\n <div *ngIf=\"expanded\"\n [class]=\"'cqa-py-1 cqa-px-3 cqa-rounded-lg cqa-border cqa-border-solid cqa-bg-[#FEFCE8] cqa-border-[#FFF085]' + (isInsideLoop ? ' cqa-ml-10' : '')\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n <div *ngIf=\"description && description.trim() !== ''\" class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <span class=\"cqa-text-[#6B7280] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium\">Summary:</span>\n <span class=\"cqa-text-[#111827] cqa-text-[12px] cqa-leading-[15px]\">{{ description }}</span>\n </div>\n <div\n class=\"cqa-text-[#6B7280] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-flex-wrap cqa-items-center cqa-gap-8\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-3\">\n <span class=\"cqa-text-[#733E0A] cqa-text-[12px] cqa-leading-[15px] cqa-font-normal\">{{method }}</span>\n <span>{{ baseUrl || 'https://api.example.com' }}</span>\n </div>\n <span class=\"cqa-text-[#111827]\">{{ endpoint }}</span>\n <div class=\"cqa-flex cqa-items-center cqa-gap-3\">\n <span>Headers: {{ headersCount ?? 0 }}</span>\n <span>Body: {{ hasBody ? 'Yes' : 'No' }}</span>\n <span>Save to: {{ saveTo || '\u2014' }}</span>\n </div>\n </div>\n </div>\n </div>\n </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\"\n class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M7 11.6666H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M9.55208 2.1128C9.7843 1.88058 10.0993 1.75012 10.4277 1.75012C10.7561 1.75012 11.071 1.88058 11.3033 2.1128C11.5355 2.34502 11.6659 2.65998 11.6659 2.98838C11.6659 3.31679 11.5355 3.63175 11.3033 3.86397L4.29742 10.8704C4.15864 11.0092 3.9871 11.1107 3.79867 11.1656L2.12333 11.6544C2.07314 11.669 2.01993 11.6699 1.96928 11.6569C1.91863 11.6439 1.8724 11.6176 1.83543 11.5806C1.79846 11.5437 1.7721 11.4974 1.75913 11.4468C1.74615 11.3961 1.74703 11.3429 1.76167 11.2927L2.2505 9.61738C2.30546 9.42916 2.40698 9.25783 2.54567 9.11922L9.55208 2.1128Z\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </button>\n <button type=\"button\" (click)=\"onSkipToggle(); $event.stopPropagation()\" [attr.title]=\"config?.shouldSkip ? 'Unskip step' : 'Skip step'\" [class.cqa-text-[#1447E6]]=\"config?.shouldSkip\" 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=\"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\"\n class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\"\n stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\"\n stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button> -->\n <button\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\n d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n <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\"\n class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M1.75 3.5H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M11.0827 3.5V11.6667C11.0827 12.25 10.4993 12.8333 9.91602 12.8333H4.08268C3.49935 12.8333 2.91602 12.25 2.91602 11.6667V3.5\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M4.66602 3.49996V2.33329C4.66602 1.74996 5.24935 1.16663 5.83268 1.16663H8.16602C8.74935 1.16663 9.33268 1.74996 9.33268 2.33329V3.49996\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M5.83398 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M8.16602 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button>\n </div>\n <!-- View Details Link (show only if description is not empty) - after action buttons, before date -->\n <a *ngIf=\"description && description.trim() !== ''\" #viewDetailsTrigger href=\"#\" (click)=\"onViewDetails($event)\"\n class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-1 cqa-no-underline\">\n {{ expanded ? 'Hide Details' : 'View Details' }}\n <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <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\"/>\n </svg>\n </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</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"] }], pipes: { "date": i2.DatePipe } });
|
|
26810
26949
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseApiStepComponent, decorators: [{
|
|
26811
26950
|
type: Component,
|
|
26812
|
-
args: [{ selector: 'cqa-test-case-api-step', host: { class: 'cqa-ui-root' }, styles: [STEP_ROW_ACTIONS_STYLES], template: "<div class=\"cqa-flex cqa-flex-col\" style=\"border-top: 1px solid #E5E7EB; border-bottom: 1px solid #E5E7EB;\">\n <div\n [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 ' + (isInsideLoop && isInsideStepGroup ? 'cqa-pl-20 cqa-pr-4' : (isInsideLoop || isInsideStepGroup) ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4') + (config?.shouldSkip ? ' cqa-step-skipped' : '')\"\n [style.opacity]=\"config?.shouldSkip ? '0.6' : null\">\n <div 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\" [ngModel]=\"selected\" [disabled]=\"disabled\" (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\" [class.cqa-border-[#3F43EE]]=\"selected\" id=\"check\" />\n <span\n 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\" [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\">\n <path d=\"M10 3.125L4.5 8.625L2 6.125\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </span>\n </label>\n </div>\n <div *ngIf=\"isInsideStepGroup\" class=\"cqa-ml-1 cqa-mr-1 cqa-text-[#9CA3AF]\">\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=\"API\"\n class=\"cqa-w-8 cqa-h-8 cqa-rounded-lg cqa-flex cqa-items-center cqa-justify-center cqa-flex-shrink-0 cqa-bg-[#D1FAE5] cqa-text-[#059669]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4.08333 7H9.91667M9.91667 7L7.58333 4.66667M9.91667 7L7.58333 9.33333\" stroke=\"currentColor\"\n stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M7 12.8333C10.2217 12.8333 12.8333 10.2217 12.8333 7C12.8333 3.77834 10.2217 1.16667 7 1.16667C3.77834 1.16667 1.16667 3.77834 1.16667 7C1.16667 10.2217 3.77834 12.8333 7 12.8333Z\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </span>\n <div class=\"cqa-flex-grow cqa-flex cqa-flex-col cqa-gap-1\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px]\">{{ getDisplayText() }}</span>\n </div>\n <!-- Expanded details: light yellow box with summary, method, URL, headers, body, save to -->\n <div *ngIf=\"expanded\"\n [class]=\"'cqa-py-1 cqa-px-3 cqa-rounded-lg cqa-border cqa-border-solid cqa-bg-[#FEFCE8] cqa-border-[#FFF085]' + (isInsideLoop ? ' cqa-ml-10' : '')\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n <div *ngIf=\"description && description.trim() !== ''\" class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <span class=\"cqa-text-[#6B7280] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium\">Summary:</span>\n <span class=\"cqa-text-[#111827] cqa-text-[12px] cqa-leading-[15px]\">{{ description }}</span>\n </div>\n <div\n class=\"cqa-text-[#6B7280] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-flex-wrap cqa-items-center cqa-gap-8\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-3\">\n <span class=\"cqa-text-[#733E0A] cqa-text-[12px] cqa-leading-[15px] cqa-font-normal\">{{method }}</span>\n <span>{{ baseUrl || 'https://api.example.com' }}</span>\n </div>\n <span class=\"cqa-text-[#111827]\">{{ endpoint }}</span>\n <div class=\"cqa-flex cqa-items-center cqa-gap-3\">\n <span>Headers: {{ headersCount ?? 0 }}</span>\n <span>Body: {{ hasBody ? 'Yes' : 'No' }}</span>\n <span>Save to: {{ saveTo || '\u2014' }}</span>\n </div>\n </div>\n </div>\n </div>\n </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\"\n class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M7 11.6666H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M9.55208 2.1128C9.7843 1.88058 10.0993 1.75012 10.4277 1.75012C10.7561 1.75012 11.071 1.88058 11.3033 2.1128C11.5355 2.34502 11.6659 2.65998 11.6659 2.98838C11.6659 3.31679 11.5355 3.63175 11.3033 3.86397L4.29742 10.8704C4.15864 11.0092 3.9871 11.1107 3.79867 11.1656L2.12333 11.6544C2.07314 11.669 2.01993 11.6699 1.96928 11.6569C1.91863 11.6439 1.8724 11.6176 1.83543 11.5806C1.79846 11.5437 1.7721 11.4974 1.75913 11.4468C1.74615 11.3961 1.74703 11.3429 1.76167 11.2927L2.2505 9.61738C2.30546 9.42916 2.40698 9.25783 2.54567 9.11922L9.55208 2.1128Z\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </button>\n <button type=\"button\" (click)=\"onSkipToggle(); $event.stopPropagation()\" [attr.title]=\"config?.shouldSkip ? 'Unskip step' : 'Skip step'\" [class.cqa-text-[#1447E6]]=\"config?.shouldSkip\" 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=\"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\"\n class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\"\n stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\"\n stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button> -->\n <button\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\n d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n <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\"\n class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M1.75 3.5H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M11.0827 3.5V11.6667C11.0827 12.25 10.4993 12.8333 9.91602 12.8333H4.08268C3.49935 12.8333 2.91602 12.25 2.91602 11.6667V3.5\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M4.66602 3.49996V2.33329C4.66602 1.74996 5.24935 1.16663 5.83268 1.16663H8.16602C8.74935 1.16663 9.33268 1.74996 9.33268 2.33329V3.49996\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M5.83398 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M8.16602 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button>\n </div>\n <!-- View Details Link (show only if description is not empty) - after action buttons, before date -->\n <a *ngIf=\"description && description.trim() !== ''\" #viewDetailsTrigger href=\"#\" (click)=\"onViewDetails($event)\"\n class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-1 cqa-no-underline\">\n {{ expanded ? 'Hide Details' : 'View Details' }}\n <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <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\"/>\n </svg>\n </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</div>" }]
|
|
26951
|
+
args: [{ selector: 'cqa-test-case-api-step', host: { class: 'cqa-ui-root' }, styles: [STEP_ROW_ACTIONS_STYLES], template: "<div class=\"cqa-flex cqa-flex-col\" style=\"border-top: 1px solid #E5E7EB; border-bottom: 1px solid #E5E7EB;\">\n <div\n [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 ' + (isInsideLoop && isInsideStepGroup ? 'cqa-pl-20 cqa-pr-4' : (isInsideLoop || isInsideStepGroup) ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4') + (config?.shouldSkip ? ' cqa-step-skipped' : '')\"\n [style.opacity]=\"config?.shouldSkip ? '0.6' : null\"\n [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\" [ngModel]=\"selected\" [disabled]=\"disabled\" (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\" [class.cqa-border-[#3F43EE]]=\"selected\" id=\"check\" />\n <span\n 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\" [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\">\n <path d=\"M10 3.125L4.5 8.625L2 6.125\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </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=\"API\"\n class=\"cqa-w-8 cqa-h-8 cqa-rounded-lg cqa-flex cqa-items-center cqa-justify-center cqa-flex-shrink-0 cqa-bg-[#D1FAE5] cqa-text-[#059669]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4.08333 7H9.91667M9.91667 7L7.58333 4.66667M9.91667 7L7.58333 9.33333\" stroke=\"currentColor\"\n stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M7 12.8333C10.2217 12.8333 12.8333 10.2217 12.8333 7C12.8333 3.77834 10.2217 1.16667 7 1.16667C3.77834 1.16667 1.16667 3.77834 1.16667 7C1.16667 10.2217 3.77834 12.8333 7 12.8333Z\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </span>\n <div class=\"cqa-flex-grow cqa-flex cqa-flex-col cqa-gap-1\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px]\">{{ getDisplayText() }}</span>\n </div>\n <!-- Expanded details: light yellow box with summary, method, URL, headers, body, save to -->\n <div *ngIf=\"expanded\"\n [class]=\"'cqa-py-1 cqa-px-3 cqa-rounded-lg cqa-border cqa-border-solid cqa-bg-[#FEFCE8] cqa-border-[#FFF085]' + (isInsideLoop ? ' cqa-ml-10' : '')\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n <div *ngIf=\"description && description.trim() !== ''\" class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <span class=\"cqa-text-[#6B7280] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium\">Summary:</span>\n <span class=\"cqa-text-[#111827] cqa-text-[12px] cqa-leading-[15px]\">{{ description }}</span>\n </div>\n <div\n class=\"cqa-text-[#6B7280] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-flex-wrap cqa-items-center cqa-gap-8\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-3\">\n <span class=\"cqa-text-[#733E0A] cqa-text-[12px] cqa-leading-[15px] cqa-font-normal\">{{method }}</span>\n <span>{{ baseUrl || 'https://api.example.com' }}</span>\n </div>\n <span class=\"cqa-text-[#111827]\">{{ endpoint }}</span>\n <div class=\"cqa-flex cqa-items-center cqa-gap-3\">\n <span>Headers: {{ headersCount ?? 0 }}</span>\n <span>Body: {{ hasBody ? 'Yes' : 'No' }}</span>\n <span>Save to: {{ saveTo || '\u2014' }}</span>\n </div>\n </div>\n </div>\n </div>\n </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\"\n class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M7 11.6666H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M9.55208 2.1128C9.7843 1.88058 10.0993 1.75012 10.4277 1.75012C10.7561 1.75012 11.071 1.88058 11.3033 2.1128C11.5355 2.34502 11.6659 2.65998 11.6659 2.98838C11.6659 3.31679 11.5355 3.63175 11.3033 3.86397L4.29742 10.8704C4.15864 11.0092 3.9871 11.1107 3.79867 11.1656L2.12333 11.6544C2.07314 11.669 2.01993 11.6699 1.96928 11.6569C1.91863 11.6439 1.8724 11.6176 1.83543 11.5806C1.79846 11.5437 1.7721 11.4974 1.75913 11.4468C1.74615 11.3961 1.74703 11.3429 1.76167 11.2927L2.2505 9.61738C2.30546 9.42916 2.40698 9.25783 2.54567 9.11922L9.55208 2.1128Z\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </button>\n <button type=\"button\" (click)=\"onSkipToggle(); $event.stopPropagation()\" [attr.title]=\"config?.shouldSkip ? 'Unskip step' : 'Skip step'\" [class.cqa-text-[#1447E6]]=\"config?.shouldSkip\" 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=\"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\"\n class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\"\n stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\"\n stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button> -->\n <button\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\n d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n <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\"\n class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M1.75 3.5H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M11.0827 3.5V11.6667C11.0827 12.25 10.4993 12.8333 9.91602 12.8333H4.08268C3.49935 12.8333 2.91602 12.25 2.91602 11.6667V3.5\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M4.66602 3.49996V2.33329C4.66602 1.74996 5.24935 1.16663 5.83268 1.16663H8.16602C8.74935 1.16663 9.33268 1.74996 9.33268 2.33329V3.49996\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M5.83398 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M8.16602 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button>\n </div>\n <!-- View Details Link (show only if description is not empty) - after action buttons, before date -->\n <a *ngIf=\"description && description.trim() !== ''\" #viewDetailsTrigger href=\"#\" (click)=\"onViewDetails($event)\"\n class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-1 cqa-no-underline\">\n {{ expanded ? 'Hide Details' : 'View Details' }}\n <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <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\"/>\n </svg>\n </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</div>" }]
|
|
26813
26952
|
}], ctorParameters: function () { return [{ type: i1$7.OverlayContainer }]; }, propDecorators: { editModalBackdropRef: [{
|
|
26814
26953
|
type: ViewChild,
|
|
26815
26954
|
args: ['editModalBackdrop']
|
|
@@ -26955,10 +27094,10 @@ class TestCaseDatabaseStepComponent {
|
|
|
26955
27094
|
onQueryChange(value) { this.query = value; this.queryChange.emit(value); }
|
|
26956
27095
|
}
|
|
26957
27096
|
TestCaseDatabaseStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseDatabaseStepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
26958
|
-
TestCaseDatabaseStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestCaseDatabaseStepComponent, selector: "cqa-test-case-database-step", inputs: { config: "config", stepNumber: "stepNumber", index: "index", query: "query", description: "description", databaseType: "databaseType", connectionName: "connectionName", saveTo: "saveTo", selected: "selected", disabled: "disabled", isNested: "isNested", isInsideStepGroup: "isInsideStepGroup", isInsideLoop: "isInsideLoop", expanded: "expanded", isReorder: "isReorder", editable: "editable", isDuplicating: "isDuplicating" }, outputs: { edit: "edit", editInDepth: "editInDepth", link: "link", duplicate: "duplicate", delete: "delete", viewDetails: "viewDetails", selectionChange: "selectionChange", toggleExpanded: "toggleExpanded", connectionNameChange: "connectionNameChange", queryChange: "queryChange", stepUpdate: "stepUpdate" }, host: { classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col\" style=\"border-top: 1px solid #E5E7EB; border-bottom: 1px solid #E5E7EB;\">\n <div\n [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 ' + (isInsideLoop && isInsideStepGroup ? 'cqa-pl-20 cqa-pr-4' : (isInsideLoop || isInsideStepGroup) ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4') + (config?.shouldSkip ? ' cqa-step-skipped' : '')\"\n [style.opacity]=\"config?.shouldSkip ? '0.6' : null\">\n <div 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\" [ngModel]=\"selected\" [disabled]=\"disabled\" (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\" [class.cqa-border-[#3F43EE]]=\"selected\" id=\"check\" />\n <span\n 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\" [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\">\n <path d=\"M10 3.125L4.5 8.625L2 6.125\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </span>\n </label>\n </div>\n <div *ngIf=\"isInsideStepGroup\" class=\"cqa-ml-1 cqa-mr-1 cqa-text-[#9CA3AF]\">\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=\"Database\"\n class=\"cqa-w-8 cqa-h-8 cqa-rounded-lg cqa-flex cqa-items-center cqa-justify-center cqa-flex-shrink-0 cqa-bg-[#CEFAFE] cqa-text-[#007595]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <ellipse cx=\"7\" cy=\"3.5\" rx=\"4.66667\" ry=\"1.75\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M2.33333 3.5V7C2.33333 7.96667 4.42333 8.75 7 8.75C9.57667 8.75 11.6667 7.96667 11.6667 7V3.5\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M2.33333 7V10.5C2.33333 11.4667 4.42333 12.25 7 12.25C9.57667 12.25 11.6667 11.4667 11.6667 10.5V7\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </span>\n <div class=\"cqa-flex-grow cqa-flex cqa-flex-col cqa-gap-1\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-justify-between\">\n <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px]\" [innerHTML]=\"query | cqaSafeHtml\">\n </span>\n <a *ngIf=\"description && description.trim() !== ''\" href=\"#\" (click)=\"onViewDetails($event)\"\n class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-2 cqa-no-underline\">{{\n expanded ? 'Hide Details' : 'View Details' }}<svg [class.cqa-rotate-90]=\"expanded\" width=\"8\" height=\"8\"\n viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\"\n fill=\"#3F43EE\" />\n </svg></a>\n </div>\n <!-- Expanded details: light cyan panel with Connection, Query (custom-input), Save to -->\n <div *ngIf=\"expanded\"\n [class]=\"'cqa-py-1 cqa-px-3 cqa-rounded-lg cqa-border cqa-border-solid cqa-bg-[#ECFEFF] cqa-border-[#A2F4FD]' + (isInsideLoop ? ' cqa-ml-10' : '')\">\n <div class=\"cqa-flex cqa-flex-wrap cqa-items-center cqa-gap-2 cqa-text-[12px] cqa-leading-[16px]\">\n <span class=\"cqa-text-[#104E64] cqa-font-semibold\">Connection:</span>\n <span class=\"text-[#111827]\">{{connectionName}}</span>\n <span class=\"cqa-py-1 cqa-px-2 cqa-rounded-[4px] cqa-border cqa-border-solid cqa-bg-[#fff] cqa-border-[#A2F4FD] cqa-text-[#111827] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium\">{{query}}</span>\n <span class=\"cqa-text-[#6B7280]\">Save to: {{ saveTo || '\u2014' }}</span>\n </div>\n </div>\n </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\"\n class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\"\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M7 11.6666H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M9.55208 2.1128C9.7843 1.88058 10.0993 1.75012 10.4277 1.75012C10.7561 1.75012 11.071 1.88058 11.3033 2.1128C11.5355 2.34502 11.6659 2.65998 11.6659 2.98838C11.6659 3.31679 11.5355 3.63175 11.3033 3.86397L4.29742 10.8704C4.15864 11.0092 3.9871 11.1107 3.79867 11.1656L2.12333 11.6544C2.07314 11.669 2.01993 11.6699 1.96928 11.6569C1.91863 11.6439 1.8724 11.6176 1.83543 11.5806C1.79846 11.5437 1.7721 11.4974 1.75913 11.4468C1.74615 11.3961 1.74703 11.3429 1.76167 11.2927L2.2505 9.61738C2.30546 9.42916 2.40698 9.25783 2.54567 9.11922L9.55208 2.1128Z\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg></button>\n <button type=\"button\" (click)=\"onSkipToggle(); $event.stopPropagation()\" [attr.title]=\"config?.shouldSkip ? 'Unskip step' : 'Skip step'\" [class.cqa-text-[#1447E6]]=\"config?.shouldSkip\" 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\"\n class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\"\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\"\n stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\"\n stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg></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 ><svg *ngIf=\"!isDuplicating\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\"\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg><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></button>\n <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\"\n class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\"\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M1.75 3.5H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M11.0827 3.5V11.6667C11.0827 12.25 10.4993 12.8333 9.91602 12.8333H4.08268C3.49935 12.8333 2.91602 12.25 2.91602 11.6667V3.5\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M4.66602 3.49996V2.33329C4.66602 1.74996 5.24935 1.16663 5.83268 1.16663H8.16602C8.74935 1.16663 9.33268 1.74996 9.33268 2.33329V3.49996\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M5.83398 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M8.16602 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg></button>\n </div>\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</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"] }], pipes: { "cqaSafeHtml": SafeHtmlPipe, "date": i2.DatePipe } });
|
|
27097
|
+
TestCaseDatabaseStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestCaseDatabaseStepComponent, selector: "cqa-test-case-database-step", inputs: { config: "config", stepNumber: "stepNumber", index: "index", query: "query", description: "description", databaseType: "databaseType", connectionName: "connectionName", saveTo: "saveTo", selected: "selected", disabled: "disabled", isNested: "isNested", isInsideStepGroup: "isInsideStepGroup", isInsideLoop: "isInsideLoop", expanded: "expanded", isReorder: "isReorder", editable: "editable", isDuplicating: "isDuplicating" }, outputs: { edit: "edit", editInDepth: "editInDepth", link: "link", duplicate: "duplicate", delete: "delete", viewDetails: "viewDetails", selectionChange: "selectionChange", toggleExpanded: "toggleExpanded", connectionNameChange: "connectionNameChange", queryChange: "queryChange", stepUpdate: "stepUpdate" }, host: { classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col\" style=\"border-top: 1px solid #E5E7EB; border-bottom: 1px solid #E5E7EB;\">\n <div\n [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 ' + (isInsideLoop && isInsideStepGroup ? 'cqa-pl-20 cqa-pr-4' : (isInsideLoop || isInsideStepGroup) ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4') + (config?.shouldSkip ? ' cqa-step-skipped' : '')\"\n [style.opacity]=\"config?.shouldSkip ? '0.6' : null\"\n [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\" [ngModel]=\"selected\" [disabled]=\"disabled\" (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\" [class.cqa-border-[#3F43EE]]=\"selected\" id=\"check\" />\n <span\n 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\" [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\">\n <path d=\"M10 3.125L4.5 8.625L2 6.125\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </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=\"Database\"\n class=\"cqa-w-8 cqa-h-8 cqa-rounded-lg cqa-flex cqa-items-center cqa-justify-center cqa-flex-shrink-0 cqa-bg-[#CEFAFE] cqa-text-[#007595]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <ellipse cx=\"7\" cy=\"3.5\" rx=\"4.66667\" ry=\"1.75\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M2.33333 3.5V7C2.33333 7.96667 4.42333 8.75 7 8.75C9.57667 8.75 11.6667 7.96667 11.6667 7V3.5\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M2.33333 7V10.5C2.33333 11.4667 4.42333 12.25 7 12.25C9.57667 12.25 11.6667 11.4667 11.6667 10.5V7\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </span>\n <div class=\"cqa-flex-grow cqa-flex cqa-flex-col cqa-gap-1\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-justify-between\">\n <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px]\" [innerHTML]=\"query | cqaSafeHtml\">\n </span>\n <a *ngIf=\"description && description.trim() !== ''\" href=\"#\" (click)=\"onViewDetails($event)\"\n class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-2 cqa-no-underline\">{{\n expanded ? 'Hide Details' : 'View Details' }}<svg [class.cqa-rotate-90]=\"expanded\" width=\"8\" height=\"8\"\n viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\"\n fill=\"#3F43EE\" />\n </svg></a>\n </div>\n <!-- Expanded details: light cyan panel with Connection, Query (custom-input), Save to -->\n <div *ngIf=\"expanded\"\n [class]=\"'cqa-py-1 cqa-px-3 cqa-rounded-lg cqa-border cqa-border-solid cqa-bg-[#ECFEFF] cqa-border-[#A2F4FD]' + (isInsideLoop ? ' cqa-ml-10' : '')\">\n <div class=\"cqa-flex cqa-flex-wrap cqa-items-center cqa-gap-2 cqa-text-[12px] cqa-leading-[16px]\">\n <span class=\"cqa-text-[#104E64] cqa-font-semibold\">Connection:</span>\n <span class=\"text-[#111827]\">{{connectionName}}</span>\n <span class=\"cqa-py-1 cqa-px-2 cqa-rounded-[4px] cqa-border cqa-border-solid cqa-bg-[#fff] cqa-border-[#A2F4FD] cqa-text-[#111827] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium\">{{query}}</span>\n <span class=\"cqa-text-[#6B7280]\">Save to: {{ saveTo || '\u2014' }}</span>\n </div>\n </div>\n </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\"\n class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\"\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M7 11.6666H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M9.55208 2.1128C9.7843 1.88058 10.0993 1.75012 10.4277 1.75012C10.7561 1.75012 11.071 1.88058 11.3033 2.1128C11.5355 2.34502 11.6659 2.65998 11.6659 2.98838C11.6659 3.31679 11.5355 3.63175 11.3033 3.86397L4.29742 10.8704C4.15864 11.0092 3.9871 11.1107 3.79867 11.1656L2.12333 11.6544C2.07314 11.669 2.01993 11.6699 1.96928 11.6569C1.91863 11.6439 1.8724 11.6176 1.83543 11.5806C1.79846 11.5437 1.7721 11.4974 1.75913 11.4468C1.74615 11.3961 1.74703 11.3429 1.76167 11.2927L2.2505 9.61738C2.30546 9.42916 2.40698 9.25783 2.54567 9.11922L9.55208 2.1128Z\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg></button>\n <button type=\"button\" (click)=\"onSkipToggle(); $event.stopPropagation()\" [attr.title]=\"config?.shouldSkip ? 'Unskip step' : 'Skip step'\" [class.cqa-text-[#1447E6]]=\"config?.shouldSkip\" 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\"\n class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\"\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\"\n stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\"\n stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg></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 ><svg *ngIf=\"!isDuplicating\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\"\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg><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></button>\n <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\"\n class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\"\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M1.75 3.5H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M11.0827 3.5V11.6667C11.0827 12.25 10.4993 12.8333 9.91602 12.8333H4.08268C3.49935 12.8333 2.91602 12.25 2.91602 11.6667V3.5\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M4.66602 3.49996V2.33329C4.66602 1.74996 5.24935 1.16663 5.83268 1.16663H8.16602C8.74935 1.16663 9.33268 1.74996 9.33268 2.33329V3.49996\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M5.83398 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M8.16602 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg></button>\n </div>\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</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"] }], pipes: { "cqaSafeHtml": SafeHtmlPipe, "date": i2.DatePipe } });
|
|
26959
27098
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseDatabaseStepComponent, decorators: [{
|
|
26960
27099
|
type: Component,
|
|
26961
|
-
args: [{ selector: 'cqa-test-case-database-step', host: { class: 'cqa-ui-root' }, styles: [STEP_ROW_ACTIONS_STYLES], template: "<div class=\"cqa-flex cqa-flex-col\" style=\"border-top: 1px solid #E5E7EB; border-bottom: 1px solid #E5E7EB;\">\n <div\n [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 ' + (isInsideLoop && isInsideStepGroup ? 'cqa-pl-20 cqa-pr-4' : (isInsideLoop || isInsideStepGroup) ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4') + (config?.shouldSkip ? ' cqa-step-skipped' : '')\"\n [style.opacity]=\"config?.shouldSkip ? '0.6' : null\">\n <div 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\" [ngModel]=\"selected\" [disabled]=\"disabled\" (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\" [class.cqa-border-[#3F43EE]]=\"selected\" id=\"check\" />\n <span\n 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\" [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\">\n <path d=\"M10 3.125L4.5 8.625L2 6.125\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </span>\n </label>\n </div>\n <div *ngIf=\"isInsideStepGroup\" class=\"cqa-ml-1 cqa-mr-1 cqa-text-[#9CA3AF]\">\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=\"Database\"\n class=\"cqa-w-8 cqa-h-8 cqa-rounded-lg cqa-flex cqa-items-center cqa-justify-center cqa-flex-shrink-0 cqa-bg-[#CEFAFE] cqa-text-[#007595]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <ellipse cx=\"7\" cy=\"3.5\" rx=\"4.66667\" ry=\"1.75\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M2.33333 3.5V7C2.33333 7.96667 4.42333 8.75 7 8.75C9.57667 8.75 11.6667 7.96667 11.6667 7V3.5\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M2.33333 7V10.5C2.33333 11.4667 4.42333 12.25 7 12.25C9.57667 12.25 11.6667 11.4667 11.6667 10.5V7\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </span>\n <div class=\"cqa-flex-grow cqa-flex cqa-flex-col cqa-gap-1\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-justify-between\">\n <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px]\" [innerHTML]=\"query | cqaSafeHtml\">\n </span>\n <a *ngIf=\"description && description.trim() !== ''\" href=\"#\" (click)=\"onViewDetails($event)\"\n class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-2 cqa-no-underline\">{{\n expanded ? 'Hide Details' : 'View Details' }}<svg [class.cqa-rotate-90]=\"expanded\" width=\"8\" height=\"8\"\n viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\"\n fill=\"#3F43EE\" />\n </svg></a>\n </div>\n <!-- Expanded details: light cyan panel with Connection, Query (custom-input), Save to -->\n <div *ngIf=\"expanded\"\n [class]=\"'cqa-py-1 cqa-px-3 cqa-rounded-lg cqa-border cqa-border-solid cqa-bg-[#ECFEFF] cqa-border-[#A2F4FD]' + (isInsideLoop ? ' cqa-ml-10' : '')\">\n <div class=\"cqa-flex cqa-flex-wrap cqa-items-center cqa-gap-2 cqa-text-[12px] cqa-leading-[16px]\">\n <span class=\"cqa-text-[#104E64] cqa-font-semibold\">Connection:</span>\n <span class=\"text-[#111827]\">{{connectionName}}</span>\n <span class=\"cqa-py-1 cqa-px-2 cqa-rounded-[4px] cqa-border cqa-border-solid cqa-bg-[#fff] cqa-border-[#A2F4FD] cqa-text-[#111827] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium\">{{query}}</span>\n <span class=\"cqa-text-[#6B7280]\">Save to: {{ saveTo || '\u2014' }}</span>\n </div>\n </div>\n </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\"\n class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\"\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M7 11.6666H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M9.55208 2.1128C9.7843 1.88058 10.0993 1.75012 10.4277 1.75012C10.7561 1.75012 11.071 1.88058 11.3033 2.1128C11.5355 2.34502 11.6659 2.65998 11.6659 2.98838C11.6659 3.31679 11.5355 3.63175 11.3033 3.86397L4.29742 10.8704C4.15864 11.0092 3.9871 11.1107 3.79867 11.1656L2.12333 11.6544C2.07314 11.669 2.01993 11.6699 1.96928 11.6569C1.91863 11.6439 1.8724 11.6176 1.83543 11.5806C1.79846 11.5437 1.7721 11.4974 1.75913 11.4468C1.74615 11.3961 1.74703 11.3429 1.76167 11.2927L2.2505 9.61738C2.30546 9.42916 2.40698 9.25783 2.54567 9.11922L9.55208 2.1128Z\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg></button>\n <button type=\"button\" (click)=\"onSkipToggle(); $event.stopPropagation()\" [attr.title]=\"config?.shouldSkip ? 'Unskip step' : 'Skip step'\" [class.cqa-text-[#1447E6]]=\"config?.shouldSkip\" 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\"\n class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\"\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\"\n stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\"\n stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg></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 ><svg *ngIf=\"!isDuplicating\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\"\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg><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></button>\n <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\"\n class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\"\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M1.75 3.5H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M11.0827 3.5V11.6667C11.0827 12.25 10.4993 12.8333 9.91602 12.8333H4.08268C3.49935 12.8333 2.91602 12.25 2.91602 11.6667V3.5\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M4.66602 3.49996V2.33329C4.66602 1.74996 5.24935 1.16663 5.83268 1.16663H8.16602C8.74935 1.16663 9.33268 1.74996 9.33268 2.33329V3.49996\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M5.83398 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M8.16602 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg></button>\n </div>\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</div>" }]
|
|
27100
|
+
args: [{ selector: 'cqa-test-case-database-step', host: { class: 'cqa-ui-root' }, styles: [STEP_ROW_ACTIONS_STYLES], template: "<div class=\"cqa-flex cqa-flex-col\" style=\"border-top: 1px solid #E5E7EB; border-bottom: 1px solid #E5E7EB;\">\n <div\n [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 ' + (isInsideLoop && isInsideStepGroup ? 'cqa-pl-20 cqa-pr-4' : (isInsideLoop || isInsideStepGroup) ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4') + (config?.shouldSkip ? ' cqa-step-skipped' : '')\"\n [style.opacity]=\"config?.shouldSkip ? '0.6' : null\"\n [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\" [ngModel]=\"selected\" [disabled]=\"disabled\" (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\" [class.cqa-border-[#3F43EE]]=\"selected\" id=\"check\" />\n <span\n 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\" [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\">\n <path d=\"M10 3.125L4.5 8.625L2 6.125\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </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=\"Database\"\n class=\"cqa-w-8 cqa-h-8 cqa-rounded-lg cqa-flex cqa-items-center cqa-justify-center cqa-flex-shrink-0 cqa-bg-[#CEFAFE] cqa-text-[#007595]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <ellipse cx=\"7\" cy=\"3.5\" rx=\"4.66667\" ry=\"1.75\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M2.33333 3.5V7C2.33333 7.96667 4.42333 8.75 7 8.75C9.57667 8.75 11.6667 7.96667 11.6667 7V3.5\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M2.33333 7V10.5C2.33333 11.4667 4.42333 12.25 7 12.25C9.57667 12.25 11.6667 11.4667 11.6667 10.5V7\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </span>\n <div class=\"cqa-flex-grow cqa-flex cqa-flex-col cqa-gap-1\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-justify-between\">\n <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px]\" [innerHTML]=\"query | cqaSafeHtml\">\n </span>\n <a *ngIf=\"description && description.trim() !== ''\" href=\"#\" (click)=\"onViewDetails($event)\"\n class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-2 cqa-no-underline\">{{\n expanded ? 'Hide Details' : 'View Details' }}<svg [class.cqa-rotate-90]=\"expanded\" width=\"8\" height=\"8\"\n viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\"\n fill=\"#3F43EE\" />\n </svg></a>\n </div>\n <!-- Expanded details: light cyan panel with Connection, Query (custom-input), Save to -->\n <div *ngIf=\"expanded\"\n [class]=\"'cqa-py-1 cqa-px-3 cqa-rounded-lg cqa-border cqa-border-solid cqa-bg-[#ECFEFF] cqa-border-[#A2F4FD]' + (isInsideLoop ? ' cqa-ml-10' : '')\">\n <div class=\"cqa-flex cqa-flex-wrap cqa-items-center cqa-gap-2 cqa-text-[12px] cqa-leading-[16px]\">\n <span class=\"cqa-text-[#104E64] cqa-font-semibold\">Connection:</span>\n <span class=\"text-[#111827]\">{{connectionName}}</span>\n <span class=\"cqa-py-1 cqa-px-2 cqa-rounded-[4px] cqa-border cqa-border-solid cqa-bg-[#fff] cqa-border-[#A2F4FD] cqa-text-[#111827] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium\">{{query}}</span>\n <span class=\"cqa-text-[#6B7280]\">Save to: {{ saveTo || '\u2014' }}</span>\n </div>\n </div>\n </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\"\n class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\"\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M7 11.6666H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M9.55208 2.1128C9.7843 1.88058 10.0993 1.75012 10.4277 1.75012C10.7561 1.75012 11.071 1.88058 11.3033 2.1128C11.5355 2.34502 11.6659 2.65998 11.6659 2.98838C11.6659 3.31679 11.5355 3.63175 11.3033 3.86397L4.29742 10.8704C4.15864 11.0092 3.9871 11.1107 3.79867 11.1656L2.12333 11.6544C2.07314 11.669 2.01993 11.6699 1.96928 11.6569C1.91863 11.6439 1.8724 11.6176 1.83543 11.5806C1.79846 11.5437 1.7721 11.4974 1.75913 11.4468C1.74615 11.3961 1.74703 11.3429 1.76167 11.2927L2.2505 9.61738C2.30546 9.42916 2.40698 9.25783 2.54567 9.11922L9.55208 2.1128Z\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg></button>\n <button type=\"button\" (click)=\"onSkipToggle(); $event.stopPropagation()\" [attr.title]=\"config?.shouldSkip ? 'Unskip step' : 'Skip step'\" [class.cqa-text-[#1447E6]]=\"config?.shouldSkip\" 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\"\n class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\"\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\"\n stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\"\n stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg></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 ><svg *ngIf=\"!isDuplicating\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\"\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg><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></button>\n <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\"\n class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\"\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M1.75 3.5H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M11.0827 3.5V11.6667C11.0827 12.25 10.4993 12.8333 9.91602 12.8333H4.08268C3.49935 12.8333 2.91602 12.25 2.91602 11.6667V3.5\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M4.66602 3.49996V2.33329C4.66602 1.74996 5.24935 1.16663 5.83268 1.16663H8.16602C8.74935 1.16663 9.33268 1.74996 9.33268 2.33329V3.49996\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M5.83398 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M8.16602 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg></button>\n </div>\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</div>" }]
|
|
26962
27101
|
}], propDecorators: { config: [{
|
|
26963
27102
|
type: Input
|
|
26964
27103
|
}], stepNumber: [{
|
|
@@ -27079,10 +27218,10 @@ class TestCaseAiAgentStepComponent {
|
|
|
27079
27218
|
onSelectionChange(checked) { this.selected = checked; this.selectionChange.emit(checked); }
|
|
27080
27219
|
}
|
|
27081
27220
|
TestCaseAiAgentStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseAiAgentStepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
27082
|
-
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", 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 ' + (isInsideLoop && isInsideStepGroup ? 'cqa-pl-20 cqa-pr-4' : (isInsideLoop || isInsideStepGroup) ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4') + (config?.shouldSkip ? ' cqa-step-skipped' : '')\" [style.opacity]=\"config?.shouldSkip ? '0.6' : null\" style=\"border-bottom: 1px solid #E5E7EB\">\n <div 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-ml-1 cqa-mr-1 cqa-text-[#9CA3AF]\">\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-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'\" [class.cqa-text-[#1447E6]]=\"config?.shouldSkip\" 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 } });
|
|
27221
|
+
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", 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 ' + (isInsideLoop && isInsideStepGroup ? 'cqa-pl-20 cqa-pr-4' : (isInsideLoop || isInsideStepGroup) ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4') + (config?.shouldSkip ? ' cqa-step-skipped' : '') \" [style.opacity]=\"config?.shouldSkip ? '0.6' : null\" [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-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'\" [class.cqa-text-[#1447E6]]=\"config?.shouldSkip\" 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 } });
|
|
27083
27222
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseAiAgentStepComponent, decorators: [{
|
|
27084
27223
|
type: Component,
|
|
27085
|
-
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 ' + (isInsideLoop && isInsideStepGroup ? 'cqa-pl-20 cqa-pr-4' : (isInsideLoop || isInsideStepGroup) ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4') + (config?.shouldSkip ? ' cqa-step-skipped' : '')\" [style.opacity]=\"config?.shouldSkip ? '0.6' : null\" style=\"border-bottom: 1px solid #E5E7EB\">\n <div 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-ml-1 cqa-mr-1 cqa-text-[#9CA3AF]\">\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-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'\" [class.cqa-text-[#1447E6]]=\"config?.shouldSkip\" 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" }]
|
|
27224
|
+
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 ' + (isInsideLoop && isInsideStepGroup ? 'cqa-pl-20 cqa-pr-4' : (isInsideLoop || isInsideStepGroup) ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4') + (config?.shouldSkip ? ' cqa-step-skipped' : '') \" [style.opacity]=\"config?.shouldSkip ? '0.6' : null\" [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-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'\" [class.cqa-text-[#1447E6]]=\"config?.shouldSkip\" 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" }]
|
|
27086
27225
|
}], ctorParameters: function () { return []; }, propDecorators: { config: [{
|
|
27087
27226
|
type: Input
|
|
27088
27227
|
}], stepNumber: [{
|
|
@@ -27203,10 +27342,10 @@ class TestCaseAiVerifyStepComponent {
|
|
|
27203
27342
|
}
|
|
27204
27343
|
}
|
|
27205
27344
|
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 });
|
|
27206
|
-
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" }, 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 ' + (isInsideLoop && isInsideStepGroup ? 'cqa-pl-20 cqa-pr-4' : (isInsideLoop || isInsideStepGroup) ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4') + (config?.shouldSkip ? ' cqa-step-skipped' : '')\" [style.opacity]=\"config?.shouldSkip ? '0.6' : null\" style=\"border-top: 1px solid #E5E7EB\">\n <div 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-ml-1 cqa-mr-1 cqa-text-[#9CA3AF]\">\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-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'\" [class.cqa-text-[#1447E6]]=\"config?.shouldSkip\" 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 } });
|
|
27345
|
+
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" }, 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 ' + (isInsideLoop && isInsideStepGroup ? 'cqa-pl-20 cqa-pr-4' : (isInsideLoop || isInsideStepGroup) ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4') + (config?.shouldSkip ? ' cqa-step-skipped' : '') \" [style.opacity]=\"config?.shouldSkip ? '0.6' : null\" [style.border-top]=\"isInsideStepGroup ? '1px solid #BEDBFF' : '1px solid #E5E7EB'\">\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-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'\" [class.cqa-text-[#1447E6]]=\"config?.shouldSkip\" 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 } });
|
|
27207
27346
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseAiVerifyStepComponent, decorators: [{
|
|
27208
27347
|
type: Component,
|
|
27209
|
-
args: [{ selector: 'cqa-test-case-ai-verify-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 ' + (isInsideLoop && isInsideStepGroup ? 'cqa-pl-20 cqa-pr-4' : (isInsideLoop || isInsideStepGroup) ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4') + (config?.shouldSkip ? ' cqa-step-skipped' : '')\" [style.opacity]=\"config?.shouldSkip ? '0.6' : null\" style=\"border-top: 1px solid #E5E7EB\">\n <div 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-ml-1 cqa-mr-1 cqa-text-[#9CA3AF]\">\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-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'\" [class.cqa-text-[#1447E6]]=\"config?.shouldSkip\" 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" }]
|
|
27348
|
+
args: [{ selector: 'cqa-test-case-ai-verify-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 ' + (isInsideLoop && isInsideStepGroup ? 'cqa-pl-20 cqa-pr-4' : (isInsideLoop || isInsideStepGroup) ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4') + (config?.shouldSkip ? ' cqa-step-skipped' : '') \" [style.opacity]=\"config?.shouldSkip ? '0.6' : null\" [style.border-top]=\"isInsideStepGroup ? '1px solid #BEDBFF' : '1px solid #E5E7EB'\">\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-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'\" [class.cqa-text-[#1447E6]]=\"config?.shouldSkip\" 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" }]
|
|
27210
27349
|
}], ctorParameters: function () { return [{ type: i1$2.DomSanitizer }]; }, propDecorators: { config: [{
|
|
27211
27350
|
type: Input
|
|
27212
27351
|
}], stepNumber: [{
|
|
@@ -27323,10 +27462,10 @@ class TestCaseUploadStepComponent {
|
|
|
27323
27462
|
onSelectionChange(checked) { this.selected = checked; this.selectionChange.emit(checked); }
|
|
27324
27463
|
}
|
|
27325
27464
|
TestCaseUploadStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseUploadStepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
27326
|
-
TestCaseUploadStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestCaseUploadStepComponent, selector: "cqa-test-case-upload-step", inputs: { config: "config", stepNumber: "stepNumber", index: "index", selector: "selector", fileName: "fileName", source: "source", sourcePath: "sourcePath", description: "description", selected: "selected", disabled: "disabled", isNested: "isNested", isInsideStepGroup: "isInsideStepGroup", isInsideLoop: "isInsideLoop", 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 ' + (isInsideLoop && isInsideStepGroup ? 'cqa-pl-20 cqa-pr-4' : (isInsideLoop || isInsideStepGroup) ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4') + (config?.shouldSkip ? ' cqa-step-skipped' : '')\" [style.opacity]=\"config?.shouldSkip ? '0.6' : null\" style=\"border-top: 1px solid #E5E7EB\">\n <div 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-ml-1 cqa-mr-1 cqa-text-[#9CA3AF]\">\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=\"Upload\" class=\"cqa-w-8 cqa-h-8 cqa-rounded-lg cqa-flex cqa-items-center cqa-justify-center cqa-flex-shrink-0 cqa-bg-[#DBEAFE] cqa-text-[#2563EB]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M12.25 8.75V11.0833C12.25 11.3928 12.1271 11.6895 11.9083 11.9083C11.6895 12.1271 11.3928 12.25 11.0833 12.25H2.91667C2.60725 12.25 2.3105 12.1271 2.09171 11.9083C1.87292 11.6895 1.75 11.3928 1.75 11.0833V8.75\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M9.91667 4.66667L7 1.75L4.08333 4.66667\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7 1.75V8.75\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </span>\n <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px]\">Upload file to</span>\n <span class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#2563EB] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#93C5FD] cqa-rounded cqa-bg-[#DBEAFE]\">{{ selector }}</span>\n <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px]\">File:</span>\n <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px]\">{{ fileName }}</span>\n <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px]\">Source:</span>\n <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px]\">{{ source }}</span>\n <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px]\">{{ sourcePath }}</span>\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'\" [class.cqa-text-[#1447E6]]=\"config?.shouldSkip\" 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=\"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 <!-- 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 } });
|
|
27465
|
+
TestCaseUploadStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestCaseUploadStepComponent, selector: "cqa-test-case-upload-step", inputs: { config: "config", stepNumber: "stepNumber", index: "index", selector: "selector", fileName: "fileName", source: "source", sourcePath: "sourcePath", description: "description", selected: "selected", disabled: "disabled", isNested: "isNested", isInsideStepGroup: "isInsideStepGroup", isInsideLoop: "isInsideLoop", 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 ' + (isInsideLoop && isInsideStepGroup ? 'cqa-pl-20 cqa-pr-4' : (isInsideLoop || isInsideStepGroup) ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4') + (config?.shouldSkip ? ' cqa-step-skipped' : '') \" [style.opacity]=\"config?.shouldSkip ? '0.6' : null\" [style.border-top]=\"isInsideStepGroup ? '1px solid #BEDBFF' : '1px solid #E5E7EB'\">\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=\"Upload\" class=\"cqa-w-8 cqa-h-8 cqa-rounded-lg cqa-flex cqa-items-center cqa-justify-center cqa-flex-shrink-0 cqa-bg-[#DBEAFE] cqa-text-[#2563EB]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M12.25 8.75V11.0833C12.25 11.3928 12.1271 11.6895 11.9083 11.9083C11.6895 12.1271 11.3928 12.25 11.0833 12.25H2.91667C2.60725 12.25 2.3105 12.1271 2.09171 11.9083C1.87292 11.6895 1.75 11.3928 1.75 11.0833V8.75\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M9.91667 4.66667L7 1.75L4.08333 4.66667\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7 1.75V8.75\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </span>\n <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px]\">Upload file to</span>\n <span class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#2563EB] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#93C5FD] cqa-rounded cqa-bg-[#DBEAFE]\">{{ selector }}</span>\n <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px]\">File:</span>\n <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px]\">{{ fileName }}</span>\n <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px]\">Source:</span>\n <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px]\">{{ source }}</span>\n <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px]\">{{ sourcePath }}</span>\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'\" [class.cqa-text-[#1447E6]]=\"config?.shouldSkip\" 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=\"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 <!-- 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 } });
|
|
27327
27466
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseUploadStepComponent, decorators: [{
|
|
27328
27467
|
type: Component,
|
|
27329
|
-
args: [{ selector: 'cqa-test-case-upload-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 ' + (isInsideLoop && isInsideStepGroup ? 'cqa-pl-20 cqa-pr-4' : (isInsideLoop || isInsideStepGroup) ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4') + (config?.shouldSkip ? ' cqa-step-skipped' : '')\" [style.opacity]=\"config?.shouldSkip ? '0.6' : null\" style=\"border-top: 1px solid #E5E7EB\">\n <div 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-ml-1 cqa-mr-1 cqa-text-[#9CA3AF]\">\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=\"Upload\" class=\"cqa-w-8 cqa-h-8 cqa-rounded-lg cqa-flex cqa-items-center cqa-justify-center cqa-flex-shrink-0 cqa-bg-[#DBEAFE] cqa-text-[#2563EB]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M12.25 8.75V11.0833C12.25 11.3928 12.1271 11.6895 11.9083 11.9083C11.6895 12.1271 11.3928 12.25 11.0833 12.25H2.91667C2.60725 12.25 2.3105 12.1271 2.09171 11.9083C1.87292 11.6895 1.75 11.3928 1.75 11.0833V8.75\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M9.91667 4.66667L7 1.75L4.08333 4.66667\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7 1.75V8.75\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </span>\n <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px]\">Upload file to</span>\n <span class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#2563EB] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#93C5FD] cqa-rounded cqa-bg-[#DBEAFE]\">{{ selector }}</span>\n <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px]\">File:</span>\n <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px]\">{{ fileName }}</span>\n <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px]\">Source:</span>\n <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px]\">{{ source }}</span>\n <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px]\">{{ sourcePath }}</span>\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'\" [class.cqa-text-[#1447E6]]=\"config?.shouldSkip\" 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=\"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 <!-- 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" }]
|
|
27468
|
+
args: [{ selector: 'cqa-test-case-upload-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 ' + (isInsideLoop && isInsideStepGroup ? 'cqa-pl-20 cqa-pr-4' : (isInsideLoop || isInsideStepGroup) ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4') + (config?.shouldSkip ? ' cqa-step-skipped' : '') \" [style.opacity]=\"config?.shouldSkip ? '0.6' : null\" [style.border-top]=\"isInsideStepGroup ? '1px solid #BEDBFF' : '1px solid #E5E7EB'\">\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=\"Upload\" class=\"cqa-w-8 cqa-h-8 cqa-rounded-lg cqa-flex cqa-items-center cqa-justify-center cqa-flex-shrink-0 cqa-bg-[#DBEAFE] cqa-text-[#2563EB]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M12.25 8.75V11.0833C12.25 11.3928 12.1271 11.6895 11.9083 11.9083C11.6895 12.1271 11.3928 12.25 11.0833 12.25H2.91667C2.60725 12.25 2.3105 12.1271 2.09171 11.9083C1.87292 11.6895 1.75 11.3928 1.75 11.0833V8.75\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M9.91667 4.66667L7 1.75L4.08333 4.66667\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7 1.75V8.75\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </span>\n <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px]\">Upload file to</span>\n <span class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#2563EB] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#93C5FD] cqa-rounded cqa-bg-[#DBEAFE]\">{{ selector }}</span>\n <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px]\">File:</span>\n <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px]\">{{ fileName }}</span>\n <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px]\">Source:</span>\n <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px]\">{{ source }}</span>\n <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px]\">{{ sourcePath }}</span>\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'\" [class.cqa-text-[#1447E6]]=\"config?.shouldSkip\" 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=\"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 <!-- 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" }]
|
|
27330
27469
|
}], ctorParameters: function () { return []; }, propDecorators: { config: [{
|
|
27331
27470
|
type: Input
|
|
27332
27471
|
}], stepNumber: [{
|
|
@@ -27452,10 +27591,10 @@ class TestCaseScreenshotStepComponent {
|
|
|
27452
27591
|
onSelectionChange(checked) { this.selected = checked; this.selectionChange.emit(checked); }
|
|
27453
27592
|
}
|
|
27454
27593
|
TestCaseScreenshotStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseScreenshotStepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
27455
|
-
TestCaseScreenshotStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestCaseScreenshotStepComponent, selector: "cqa-test-case-screenshot-step", inputs: { config: "config", stepNumber: "stepNumber", index: "index", name: "name", fullPage: "fullPage", selector: "selector", description: "description", selected: "selected", disabled: "disabled", isNested: "isNested", isInsideStepGroup: "isInsideStepGroup", isInsideLoop: "isInsideLoop", 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 ' + (isInsideLoop && isInsideStepGroup ? 'cqa-pl-20 cqa-pr-4' : (isInsideLoop || isInsideStepGroup) ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4') + (config?.shouldSkip ? ' cqa-step-skipped' : '')\" [style.opacity]=\"config?.shouldSkip ? '0.6' : null\" style=\"border-top: 1px solid #E5E7EB\">\n <div 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-ml-1 cqa-mr-1 cqa-text-[#9CA3AF]\">\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=\"Screenshot\" class=\"cqa-w-8 cqa-h-8 cqa-rounded-lg cqa-flex cqa-items-center cqa-justify-center cqa-flex-shrink-0 cqa-bg-[#FCE7F3] cqa-text-[#DB2777]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M11.0833 2.33333H2.91667C2.27233 2.33333 1.75 2.85567 1.75 3.5V10.5C1.75 11.1443 2.27233 11.6667 2.91667 11.6667H11.0833C11.7277 11.6667 12.25 11.1443 12.25 10.5V3.5C12.25 2.85567 11.7277 2.33333 11.0833 2.33333Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M5.25 5.83333C5.73325 5.83333 6.125 5.44158 6.125 4.95833C6.125 4.47508 5.73325 4.08333 5.25 4.08333C4.76675 4.08333 4.375 4.47508 4.375 4.95833C4.375 5.44158 4.76675 5.83333 5.25 5.83333Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M12.25 8.75L9.33333 5.83333L2.91667 11.6667\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </span>\n <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px]\">{{ getScreenshotDescription() }}</span>\n <span *ngIf=\"name\" class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#DB2777] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#F9A8D4] cqa-rounded cqa-bg-[#FCE7F3]\">{{ name }}</span>\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'\" [class.cqa-text-[#1447E6]]=\"config?.shouldSkip\" 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=\"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 <!-- 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 } });
|
|
27594
|
+
TestCaseScreenshotStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestCaseScreenshotStepComponent, selector: "cqa-test-case-screenshot-step", inputs: { config: "config", stepNumber: "stepNumber", index: "index", name: "name", fullPage: "fullPage", selector: "selector", description: "description", selected: "selected", disabled: "disabled", isNested: "isNested", isInsideStepGroup: "isInsideStepGroup", isInsideLoop: "isInsideLoop", 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 ' + (isInsideLoop && isInsideStepGroup ? 'cqa-pl-20 cqa-pr-4' : (isInsideLoop || isInsideStepGroup) ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4') + (config?.shouldSkip ? ' cqa-step-skipped' : '') \" [style.opacity]=\"config?.shouldSkip ? '0.6' : null\" [style.border-top]=\"isInsideStepGroup ? '1px solid #BEDBFF' : '1px solid #E5E7EB'\">\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=\"Screenshot\" class=\"cqa-w-8 cqa-h-8 cqa-rounded-lg cqa-flex cqa-items-center cqa-justify-center cqa-flex-shrink-0 cqa-bg-[#FCE7F3] cqa-text-[#DB2777]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M11.0833 2.33333H2.91667C2.27233 2.33333 1.75 2.85567 1.75 3.5V10.5C1.75 11.1443 2.27233 11.6667 2.91667 11.6667H11.0833C11.7277 11.6667 12.25 11.1443 12.25 10.5V3.5C12.25 2.85567 11.7277 2.33333 11.0833 2.33333Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M5.25 5.83333C5.73325 5.83333 6.125 5.44158 6.125 4.95833C6.125 4.47508 5.73325 4.08333 5.25 4.08333C4.76675 4.08333 4.375 4.47508 4.375 4.95833C4.375 5.44158 4.76675 5.83333 5.25 5.83333Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M12.25 8.75L9.33333 5.83333L2.91667 11.6667\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </span>\n <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px]\">{{ getScreenshotDescription() }}</span>\n <span *ngIf=\"name\" class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#DB2777] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#F9A8D4] cqa-rounded cqa-bg-[#FCE7F3]\">{{ name }}</span>\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'\" [class.cqa-text-[#1447E6]]=\"config?.shouldSkip\" 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=\"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 <!-- 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 } });
|
|
27456
27595
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseScreenshotStepComponent, decorators: [{
|
|
27457
27596
|
type: Component,
|
|
27458
|
-
args: [{ selector: 'cqa-test-case-screenshot-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 ' + (isInsideLoop && isInsideStepGroup ? 'cqa-pl-20 cqa-pr-4' : (isInsideLoop || isInsideStepGroup) ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4') + (config?.shouldSkip ? ' cqa-step-skipped' : '')\" [style.opacity]=\"config?.shouldSkip ? '0.6' : null\" style=\"border-top: 1px solid #E5E7EB\">\n <div 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-ml-1 cqa-mr-1 cqa-text-[#9CA3AF]\">\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=\"Screenshot\" class=\"cqa-w-8 cqa-h-8 cqa-rounded-lg cqa-flex cqa-items-center cqa-justify-center cqa-flex-shrink-0 cqa-bg-[#FCE7F3] cqa-text-[#DB2777]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M11.0833 2.33333H2.91667C2.27233 2.33333 1.75 2.85567 1.75 3.5V10.5C1.75 11.1443 2.27233 11.6667 2.91667 11.6667H11.0833C11.7277 11.6667 12.25 11.1443 12.25 10.5V3.5C12.25 2.85567 11.7277 2.33333 11.0833 2.33333Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M5.25 5.83333C5.73325 5.83333 6.125 5.44158 6.125 4.95833C6.125 4.47508 5.73325 4.08333 5.25 4.08333C4.76675 4.08333 4.375 4.47508 4.375 4.95833C4.375 5.44158 4.76675 5.83333 5.25 5.83333Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M12.25 8.75L9.33333 5.83333L2.91667 11.6667\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </span>\n <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px]\">{{ getScreenshotDescription() }}</span>\n <span *ngIf=\"name\" class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#DB2777] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#F9A8D4] cqa-rounded cqa-bg-[#FCE7F3]\">{{ name }}</span>\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'\" [class.cqa-text-[#1447E6]]=\"config?.shouldSkip\" 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=\"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 <!-- 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" }]
|
|
27597
|
+
args: [{ selector: 'cqa-test-case-screenshot-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 ' + (isInsideLoop && isInsideStepGroup ? 'cqa-pl-20 cqa-pr-4' : (isInsideLoop || isInsideStepGroup) ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4') + (config?.shouldSkip ? ' cqa-step-skipped' : '') \" [style.opacity]=\"config?.shouldSkip ? '0.6' : null\" [style.border-top]=\"isInsideStepGroup ? '1px solid #BEDBFF' : '1px solid #E5E7EB'\">\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=\"Screenshot\" class=\"cqa-w-8 cqa-h-8 cqa-rounded-lg cqa-flex cqa-items-center cqa-justify-center cqa-flex-shrink-0 cqa-bg-[#FCE7F3] cqa-text-[#DB2777]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M11.0833 2.33333H2.91667C2.27233 2.33333 1.75 2.85567 1.75 3.5V10.5C1.75 11.1443 2.27233 11.6667 2.91667 11.6667H11.0833C11.7277 11.6667 12.25 11.1443 12.25 10.5V3.5C12.25 2.85567 11.7277 2.33333 11.0833 2.33333Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M5.25 5.83333C5.73325 5.83333 6.125 5.44158 6.125 4.95833C6.125 4.47508 5.73325 4.08333 5.25 4.08333C4.76675 4.08333 4.375 4.47508 4.375 4.95833C4.375 5.44158 4.76675 5.83333 5.25 5.83333Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M12.25 8.75L9.33333 5.83333L2.91667 11.6667\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </span>\n <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px]\">{{ getScreenshotDescription() }}</span>\n <span *ngIf=\"name\" class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#DB2777] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#F9A8D4] cqa-rounded cqa-bg-[#FCE7F3]\">{{ name }}</span>\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'\" [class.cqa-text-[#1447E6]]=\"config?.shouldSkip\" 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=\"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 <!-- 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" }]
|
|
27459
27598
|
}], ctorParameters: function () { return []; }, propDecorators: { config: [{
|
|
27460
27599
|
type: Input
|
|
27461
27600
|
}], stepNumber: [{
|
|
@@ -27644,10 +27783,10 @@ class TestCaseScrollStepComponent {
|
|
|
27644
27783
|
}
|
|
27645
27784
|
}
|
|
27646
27785
|
TestCaseScrollStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseScrollStepComponent, deps: [{ token: i1$2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
|
|
27647
|
-
TestCaseScrollStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestCaseScrollStepComponent, selector: "cqa-test-case-scroll-step", inputs: { config: "config", stepNumber: "stepNumber", index: "index", selector: "selector", direction: "direction", description: "description", selected: "selected", disabled: "disabled", isNested: "isNested", isInsideStepGroup: "isInsideStepGroup", isInsideLoop: "isInsideLoop", expanded: "expanded", isReorder: "isReorder", editable: "editable", action: "action" }, outputs: { edit: "edit", editInDepth: "editInDepth", link: "link", duplicate: "duplicate", delete: "delete", viewDetails: "viewDetails", selectionChange: "selectionChange", toggleExpanded: "toggleExpanded", selectorChange: "selectorChange", directionChange: "directionChange", clickAction: "clickAction", stepUpdate: "stepUpdate" }, host: { classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "viewDetailsTrigger", first: true, predicate: ["viewDetailsTrigger"], descendants: true }], ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col\" style=\"border-bottom: 1px solid #E5E7EB;\">\n <div\n [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 ' + (isInsideLoop && isInsideStepGroup ? 'cqa-pl-20 cqa-pr-4' : (isInsideLoop || isInsideStepGroup) ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4') + (config?.shouldSkip ? ' cqa-step-skipped' : '')\"\n [style.opacity]=\"config?.shouldSkip ? '0.6' : null\">\n <div 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\" [ngModel]=\"selected\" [disabled]=\"disabled\" (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\" [class.cqa-border-[#3F43EE]]=\"selected\" id=\"check\" />\n <span\n 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\" [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\">\n <path d=\"M10 3.125L4.5 8.625L2 6.125\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </span>\n </label>\n </div>\n <div *ngIf=\"isInsideStepGroup\" class=\"cqa-ml-1 cqa-mr-1 cqa-text-[#9CA3AF]\">\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=\"Scroll\"\n class=\"cqa-w-8 cqa-h-8 cqa-rounded-lg cqa-flex cqa-items-center cqa-justify-center cqa-flex-shrink-0 cqa-bg-[#E0F2FE] cqa-text-[#0EA5E9]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M5.24935 1.75L2.91602 4.0775H4.66602V8.16667H5.83268V4.0775H7.58268L5.24935 1.75ZM9.33268 9.9225V5.83333H8.16602V9.9225H6.41602L8.74935 12.25L11.0827 9.9225H9.33268Z\" fill=\"currentColor\"/>\n </svg>\n </span>\n <div class=\"cqa-flex-grow cqa-flex cqa-flex-col cqa-gap-1\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-min-w-0\">\n <!-- Same action HTML as edit modal so wording matches; badges delegate to step-list clickAction (element/test-data modals) -->\n <span *ngIf=\"hasActionHtml()\"\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 [innerHTML]=\"getActionHtml()\"\n (click)=\"clickOnAction($event)\">\n </span>\n <span *ngIf=\"!hasActionHtml()\"\n class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px]\">\n {{ getDisplayText() }}\n </span>\n </div>\n <!-- Expanded details: light blue panel with Selector, Direction -->\n <div *ngIf=\"expanded\"\n [class]=\"'cqa-py-1 cqa-px-3 cqa-rounded-lg cqa-border cqa-border-solid cqa-bg-[#E3F2FD] cqa-border-[#90CAF9]' + (isInsideLoop && isInsideStepGroup ? ' cqa-ml-20' : (isInsideLoop || isInsideStepGroup) ? ' cqa-ml-10' : '')\">\n <div class=\"cqa-flex cqa-flex-wrap cqa-items-center cqa-gap-2 cqa-text-[12px] cqa-leading-[16px]\">\n <span class=\"cqa-text-[#0D47A1] cqa-font-semibold\">Selector:</span>\n <span class=\"cqa-py-1 cqa-px-2 cqa-rounded-[4px] cqa-border cqa-border-solid cqa-bg-[#fff] cqa-border-[#90CAF9] cqa-text-[#111827] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium\">{{selector}}</span>\n <span *ngIf=\"direction\" class=\"cqa-text-[#6B7280]\">Direction: {{ getDirectionLabel() }}</span>\n </div>\n </div>\n </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 <!-- Action Icons - 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\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\"\n class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\"\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M7 11.6666H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M9.55208 2.1128C9.7843 1.88058 10.0993 1.75012 10.4277 1.75012C10.7561 1.75012 11.071 1.88058 11.3033 2.1128C11.5355 2.34502 11.6659 2.65998 11.6659 2.98838C11.6659 3.31679 11.5355 3.63175 11.3033 3.86397L4.29742 10.8704C4.15864 11.0092 3.9871 11.1107 3.79867 11.1656L2.12333 11.6544C2.07314 11.669 2.01993 11.6699 1.96928 11.6569C1.91863 11.6439 1.8724 11.6176 1.83543 11.5806C1.79846 11.5437 1.7721 11.4974 1.75913 11.4468C1.74615 11.3961 1.74703 11.3429 1.76167 11.2927L2.2505 9.61738C2.30546 9.42916 2.40698 9.25783 2.54567 9.11922L9.55208 2.1128Z\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg></button>\n <button type=\"button\" (click)=\"onSkipToggle(); $event.stopPropagation()\" [attr.title]=\"config?.shouldSkip ? 'Unskip step' : 'Skip step'\" [class.cqa-text-[#1447E6]]=\"config?.shouldSkip\" 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\"\n class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\"\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\"\n stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\"\n stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg></button> -->\n <button type=\"button\" (click)=\"onDuplicate(); $event.stopPropagation()\" title=\"Duplicate\"\n class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\"\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg></button>\n <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\"\n class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\"\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M1.75 3.5H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M11.0827 3.5V11.6667C11.0827 12.25 10.4993 12.8333 9.91602 12.8333H4.08268C3.49935 12.8333 2.91602 12.25 2.91602 11.6667V3.5\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M4.66602 3.49996V2.33329C4.66602 1.74996 5.24935 1.16663 5.83268 1.16663H8.16602C8.74935 1.16663 9.33268 1.74996 9.33268 2.33329V3.49996\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M5.83398 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M8.16602 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg></button>\n </div>\n\n <!-- View Details Link (show only if description is not empty) -->\n <a *ngIf=\"description && description.trim() !== ''\" #viewDetailsTrigger href=\"#\" (click)=\"onViewDetails($event)\"\n class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-1 cqa-no-underline\">{{\n expanded ? 'Hide Details' : 'View Details' }}<svg [class.cqa-rotate-90]=\"expanded\" width=\"8\" height=\"8\"\n viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\"\n fill=\"#3F43EE\" />\n </svg></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>\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 } });
|
|
27786
|
+
TestCaseScrollStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestCaseScrollStepComponent, selector: "cqa-test-case-scroll-step", inputs: { config: "config", stepNumber: "stepNumber", index: "index", selector: "selector", direction: "direction", description: "description", selected: "selected", disabled: "disabled", isNested: "isNested", isInsideStepGroup: "isInsideStepGroup", isInsideLoop: "isInsideLoop", expanded: "expanded", isReorder: "isReorder", editable: "editable", action: "action" }, outputs: { edit: "edit", editInDepth: "editInDepth", link: "link", duplicate: "duplicate", delete: "delete", viewDetails: "viewDetails", selectionChange: "selectionChange", toggleExpanded: "toggleExpanded", selectorChange: "selectorChange", directionChange: "directionChange", clickAction: "clickAction", stepUpdate: "stepUpdate" }, host: { classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "viewDetailsTrigger", first: true, predicate: ["viewDetailsTrigger"], descendants: true }], ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col\" style=\"border-bottom: 1px solid #E5E7EB;\">\n <div\n [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 ' + (isInsideLoop && isInsideStepGroup ? 'cqa-pl-20 cqa-pr-4' : (isInsideLoop || isInsideStepGroup) ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4') + (config?.shouldSkip ? ' cqa-step-skipped' : '')\"\n [style.opacity]=\"config?.shouldSkip ? '0.6' : null\"\n [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\" [ngModel]=\"selected\" [disabled]=\"disabled\" (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\" [class.cqa-border-[#3F43EE]]=\"selected\" id=\"check\" />\n <span\n 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\" [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\">\n <path d=\"M10 3.125L4.5 8.625L2 6.125\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </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=\"Scroll\"\n class=\"cqa-w-8 cqa-h-8 cqa-rounded-lg cqa-flex cqa-items-center cqa-justify-center cqa-flex-shrink-0 cqa-bg-[#E0F2FE] cqa-text-[#0EA5E9]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M5.24935 1.75L2.91602 4.0775H4.66602V8.16667H5.83268V4.0775H7.58268L5.24935 1.75ZM9.33268 9.9225V5.83333H8.16602V9.9225H6.41602L8.74935 12.25L11.0827 9.9225H9.33268Z\" fill=\"currentColor\"/>\n </svg>\n </span>\n <div class=\"cqa-flex-grow cqa-flex cqa-flex-col cqa-gap-1\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-min-w-0\">\n <!-- Same action HTML as edit modal so wording matches; badges delegate to step-list clickAction (element/test-data modals) -->\n <span *ngIf=\"hasActionHtml()\"\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 [innerHTML]=\"getActionHtml()\"\n (click)=\"clickOnAction($event)\">\n </span>\n <span *ngIf=\"!hasActionHtml()\"\n class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px]\">\n {{ getDisplayText() }}\n </span>\n </div>\n <!-- Expanded details: light blue panel with Selector, Direction -->\n <div *ngIf=\"expanded\"\n [class]=\"'cqa-py-1 cqa-px-3 cqa-rounded-lg cqa-border cqa-border-solid cqa-bg-[#E3F2FD] cqa-border-[#90CAF9]' + (isInsideLoop && isInsideStepGroup ? ' cqa-ml-20' : (isInsideLoop || isInsideStepGroup) ? ' cqa-ml-10' : '')\">\n <div class=\"cqa-flex cqa-flex-wrap cqa-items-center cqa-gap-2 cqa-text-[12px] cqa-leading-[16px]\">\n <span class=\"cqa-text-[#0D47A1] cqa-font-semibold\">Selector:</span>\n <span class=\"cqa-py-1 cqa-px-2 cqa-rounded-[4px] cqa-border cqa-border-solid cqa-bg-[#fff] cqa-border-[#90CAF9] cqa-text-[#111827] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium\">{{selector}}</span>\n <span *ngIf=\"direction\" class=\"cqa-text-[#6B7280]\">Direction: {{ getDirectionLabel() }}</span>\n </div>\n </div>\n </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 <!-- Action Icons - 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\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\"\n class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\"\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M7 11.6666H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M9.55208 2.1128C9.7843 1.88058 10.0993 1.75012 10.4277 1.75012C10.7561 1.75012 11.071 1.88058 11.3033 2.1128C11.5355 2.34502 11.6659 2.65998 11.6659 2.98838C11.6659 3.31679 11.5355 3.63175 11.3033 3.86397L4.29742 10.8704C4.15864 11.0092 3.9871 11.1107 3.79867 11.1656L2.12333 11.6544C2.07314 11.669 2.01993 11.6699 1.96928 11.6569C1.91863 11.6439 1.8724 11.6176 1.83543 11.5806C1.79846 11.5437 1.7721 11.4974 1.75913 11.4468C1.74615 11.3961 1.74703 11.3429 1.76167 11.2927L2.2505 9.61738C2.30546 9.42916 2.40698 9.25783 2.54567 9.11922L9.55208 2.1128Z\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg></button>\n <button type=\"button\" (click)=\"onSkipToggle(); $event.stopPropagation()\" [attr.title]=\"config?.shouldSkip ? 'Unskip step' : 'Skip step'\" [class.cqa-text-[#1447E6]]=\"config?.shouldSkip\" 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\"\n class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\"\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\"\n stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\"\n stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg></button> -->\n <button type=\"button\" (click)=\"onDuplicate(); $event.stopPropagation()\" title=\"Duplicate\"\n class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\"\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg></button>\n <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\"\n class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\"\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M1.75 3.5H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M11.0827 3.5V11.6667C11.0827 12.25 10.4993 12.8333 9.91602 12.8333H4.08268C3.49935 12.8333 2.91602 12.25 2.91602 11.6667V3.5\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M4.66602 3.49996V2.33329C4.66602 1.74996 5.24935 1.16663 5.83268 1.16663H8.16602C8.74935 1.16663 9.33268 1.74996 9.33268 2.33329V3.49996\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M5.83398 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M8.16602 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg></button>\n </div>\n\n <!-- View Details Link (show only if description is not empty) -->\n <a *ngIf=\"description && description.trim() !== ''\" #viewDetailsTrigger href=\"#\" (click)=\"onViewDetails($event)\"\n class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-1 cqa-no-underline\">{{\n expanded ? 'Hide Details' : 'View Details' }}<svg [class.cqa-rotate-90]=\"expanded\" width=\"8\" height=\"8\"\n viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\"\n fill=\"#3F43EE\" />\n </svg></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>\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 } });
|
|
27648
27787
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseScrollStepComponent, decorators: [{
|
|
27649
27788
|
type: Component,
|
|
27650
|
-
args: [{ selector: 'cqa-test-case-scroll-step', host: { class: 'cqa-ui-root' }, styles: [STEP_ROW_ACTIONS_STYLES], template: "<div class=\"cqa-flex cqa-flex-col\" style=\"border-bottom: 1px solid #E5E7EB;\">\n <div\n [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 ' + (isInsideLoop && isInsideStepGroup ? 'cqa-pl-20 cqa-pr-4' : (isInsideLoop || isInsideStepGroup) ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4') + (config?.shouldSkip ? ' cqa-step-skipped' : '')\"\n [style.opacity]=\"config?.shouldSkip ? '0.6' : null\">\n <div 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\" [ngModel]=\"selected\" [disabled]=\"disabled\" (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\" [class.cqa-border-[#3F43EE]]=\"selected\" id=\"check\" />\n <span\n 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\" [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\">\n <path d=\"M10 3.125L4.5 8.625L2 6.125\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </span>\n </label>\n </div>\n <div *ngIf=\"isInsideStepGroup\" class=\"cqa-ml-1 cqa-mr-1 cqa-text-[#9CA3AF]\">\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=\"Scroll\"\n class=\"cqa-w-8 cqa-h-8 cqa-rounded-lg cqa-flex cqa-items-center cqa-justify-center cqa-flex-shrink-0 cqa-bg-[#E0F2FE] cqa-text-[#0EA5E9]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M5.24935 1.75L2.91602 4.0775H4.66602V8.16667H5.83268V4.0775H7.58268L5.24935 1.75ZM9.33268 9.9225V5.83333H8.16602V9.9225H6.41602L8.74935 12.25L11.0827 9.9225H9.33268Z\" fill=\"currentColor\"/>\n </svg>\n </span>\n <div class=\"cqa-flex-grow cqa-flex cqa-flex-col cqa-gap-1\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-min-w-0\">\n <!-- Same action HTML as edit modal so wording matches; badges delegate to step-list clickAction (element/test-data modals) -->\n <span *ngIf=\"hasActionHtml()\"\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 [innerHTML]=\"getActionHtml()\"\n (click)=\"clickOnAction($event)\">\n </span>\n <span *ngIf=\"!hasActionHtml()\"\n class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px]\">\n {{ getDisplayText() }}\n </span>\n </div>\n <!-- Expanded details: light blue panel with Selector, Direction -->\n <div *ngIf=\"expanded\"\n [class]=\"'cqa-py-1 cqa-px-3 cqa-rounded-lg cqa-border cqa-border-solid cqa-bg-[#E3F2FD] cqa-border-[#90CAF9]' + (isInsideLoop && isInsideStepGroup ? ' cqa-ml-20' : (isInsideLoop || isInsideStepGroup) ? ' cqa-ml-10' : '')\">\n <div class=\"cqa-flex cqa-flex-wrap cqa-items-center cqa-gap-2 cqa-text-[12px] cqa-leading-[16px]\">\n <span class=\"cqa-text-[#0D47A1] cqa-font-semibold\">Selector:</span>\n <span class=\"cqa-py-1 cqa-px-2 cqa-rounded-[4px] cqa-border cqa-border-solid cqa-bg-[#fff] cqa-border-[#90CAF9] cqa-text-[#111827] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium\">{{selector}}</span>\n <span *ngIf=\"direction\" class=\"cqa-text-[#6B7280]\">Direction: {{ getDirectionLabel() }}</span>\n </div>\n </div>\n </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 <!-- Action Icons - 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\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\"\n class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\"\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M7 11.6666H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M9.55208 2.1128C9.7843 1.88058 10.0993 1.75012 10.4277 1.75012C10.7561 1.75012 11.071 1.88058 11.3033 2.1128C11.5355 2.34502 11.6659 2.65998 11.6659 2.98838C11.6659 3.31679 11.5355 3.63175 11.3033 3.86397L4.29742 10.8704C4.15864 11.0092 3.9871 11.1107 3.79867 11.1656L2.12333 11.6544C2.07314 11.669 2.01993 11.6699 1.96928 11.6569C1.91863 11.6439 1.8724 11.6176 1.83543 11.5806C1.79846 11.5437 1.7721 11.4974 1.75913 11.4468C1.74615 11.3961 1.74703 11.3429 1.76167 11.2927L2.2505 9.61738C2.30546 9.42916 2.40698 9.25783 2.54567 9.11922L9.55208 2.1128Z\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg></button>\n <button type=\"button\" (click)=\"onSkipToggle(); $event.stopPropagation()\" [attr.title]=\"config?.shouldSkip ? 'Unskip step' : 'Skip step'\" [class.cqa-text-[#1447E6]]=\"config?.shouldSkip\" 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\"\n class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\"\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\"\n stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\"\n stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg></button> -->\n <button type=\"button\" (click)=\"onDuplicate(); $event.stopPropagation()\" title=\"Duplicate\"\n class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\"\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg></button>\n <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\"\n class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\"\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M1.75 3.5H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M11.0827 3.5V11.6667C11.0827 12.25 10.4993 12.8333 9.91602 12.8333H4.08268C3.49935 12.8333 2.91602 12.25 2.91602 11.6667V3.5\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M4.66602 3.49996V2.33329C4.66602 1.74996 5.24935 1.16663 5.83268 1.16663H8.16602C8.74935 1.16663 9.33268 1.74996 9.33268 2.33329V3.49996\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M5.83398 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M8.16602 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg></button>\n </div>\n\n <!-- View Details Link (show only if description is not empty) -->\n <a *ngIf=\"description && description.trim() !== ''\" #viewDetailsTrigger href=\"#\" (click)=\"onViewDetails($event)\"\n class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-1 cqa-no-underline\">{{\n expanded ? 'Hide Details' : 'View Details' }}<svg [class.cqa-rotate-90]=\"expanded\" width=\"8\" height=\"8\"\n viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\"\n fill=\"#3F43EE\" />\n </svg></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>\n</div>\n" }]
|
|
27789
|
+
args: [{ selector: 'cqa-test-case-scroll-step', host: { class: 'cqa-ui-root' }, styles: [STEP_ROW_ACTIONS_STYLES], template: "<div class=\"cqa-flex cqa-flex-col\" style=\"border-bottom: 1px solid #E5E7EB;\">\n <div\n [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 ' + (isInsideLoop && isInsideStepGroup ? 'cqa-pl-20 cqa-pr-4' : (isInsideLoop || isInsideStepGroup) ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4') + (config?.shouldSkip ? ' cqa-step-skipped' : '')\"\n [style.opacity]=\"config?.shouldSkip ? '0.6' : null\"\n [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\" [ngModel]=\"selected\" [disabled]=\"disabled\" (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\" [class.cqa-border-[#3F43EE]]=\"selected\" id=\"check\" />\n <span\n 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\" [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\">\n <path d=\"M10 3.125L4.5 8.625L2 6.125\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </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=\"Scroll\"\n class=\"cqa-w-8 cqa-h-8 cqa-rounded-lg cqa-flex cqa-items-center cqa-justify-center cqa-flex-shrink-0 cqa-bg-[#E0F2FE] cqa-text-[#0EA5E9]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M5.24935 1.75L2.91602 4.0775H4.66602V8.16667H5.83268V4.0775H7.58268L5.24935 1.75ZM9.33268 9.9225V5.83333H8.16602V9.9225H6.41602L8.74935 12.25L11.0827 9.9225H9.33268Z\" fill=\"currentColor\"/>\n </svg>\n </span>\n <div class=\"cqa-flex-grow cqa-flex cqa-flex-col cqa-gap-1\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-min-w-0\">\n <!-- Same action HTML as edit modal so wording matches; badges delegate to step-list clickAction (element/test-data modals) -->\n <span *ngIf=\"hasActionHtml()\"\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 [innerHTML]=\"getActionHtml()\"\n (click)=\"clickOnAction($event)\">\n </span>\n <span *ngIf=\"!hasActionHtml()\"\n class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px]\">\n {{ getDisplayText() }}\n </span>\n </div>\n <!-- Expanded details: light blue panel with Selector, Direction -->\n <div *ngIf=\"expanded\"\n [class]=\"'cqa-py-1 cqa-px-3 cqa-rounded-lg cqa-border cqa-border-solid cqa-bg-[#E3F2FD] cqa-border-[#90CAF9]' + (isInsideLoop && isInsideStepGroup ? ' cqa-ml-20' : (isInsideLoop || isInsideStepGroup) ? ' cqa-ml-10' : '')\">\n <div class=\"cqa-flex cqa-flex-wrap cqa-items-center cqa-gap-2 cqa-text-[12px] cqa-leading-[16px]\">\n <span class=\"cqa-text-[#0D47A1] cqa-font-semibold\">Selector:</span>\n <span class=\"cqa-py-1 cqa-px-2 cqa-rounded-[4px] cqa-border cqa-border-solid cqa-bg-[#fff] cqa-border-[#90CAF9] cqa-text-[#111827] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium\">{{selector}}</span>\n <span *ngIf=\"direction\" class=\"cqa-text-[#6B7280]\">Direction: {{ getDirectionLabel() }}</span>\n </div>\n </div>\n </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 <!-- Action Icons - 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\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\"\n class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\"\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M7 11.6666H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M9.55208 2.1128C9.7843 1.88058 10.0993 1.75012 10.4277 1.75012C10.7561 1.75012 11.071 1.88058 11.3033 2.1128C11.5355 2.34502 11.6659 2.65998 11.6659 2.98838C11.6659 3.31679 11.5355 3.63175 11.3033 3.86397L4.29742 10.8704C4.15864 11.0092 3.9871 11.1107 3.79867 11.1656L2.12333 11.6544C2.07314 11.669 2.01993 11.6699 1.96928 11.6569C1.91863 11.6439 1.8724 11.6176 1.83543 11.5806C1.79846 11.5437 1.7721 11.4974 1.75913 11.4468C1.74615 11.3961 1.74703 11.3429 1.76167 11.2927L2.2505 9.61738C2.30546 9.42916 2.40698 9.25783 2.54567 9.11922L9.55208 2.1128Z\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg></button>\n <button type=\"button\" (click)=\"onSkipToggle(); $event.stopPropagation()\" [attr.title]=\"config?.shouldSkip ? 'Unskip step' : 'Skip step'\" [class.cqa-text-[#1447E6]]=\"config?.shouldSkip\" 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\"\n class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\"\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\"\n stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\"\n stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg></button> -->\n <button type=\"button\" (click)=\"onDuplicate(); $event.stopPropagation()\" title=\"Duplicate\"\n class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\"\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg></button>\n <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\"\n class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\"\n fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M1.75 3.5H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M11.0827 3.5V11.6667C11.0827 12.25 10.4993 12.8333 9.91602 12.8333H4.08268C3.49935 12.8333 2.91602 12.25 2.91602 11.6667V3.5\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M4.66602 3.49996V2.33329C4.66602 1.74996 5.24935 1.16663 5.83268 1.16663H8.16602C8.74935 1.16663 9.33268 1.74996 9.33268 2.33329V3.49996\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M5.83398 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M8.16602 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg></button>\n </div>\n\n <!-- View Details Link (show only if description is not empty) -->\n <a *ngIf=\"description && description.trim() !== ''\" #viewDetailsTrigger href=\"#\" (click)=\"onViewDetails($event)\"\n class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-1 cqa-no-underline\">{{\n expanded ? 'Hide Details' : 'View Details' }}<svg [class.cqa-rotate-90]=\"expanded\" width=\"8\" height=\"8\"\n viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\"\n fill=\"#3F43EE\" />\n </svg></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>\n</div>\n" }]
|
|
27651
27790
|
}], ctorParameters: function () { return [{ type: i1$2.DomSanitizer }]; }, propDecorators: { config: [{
|
|
27652
27791
|
type: Input
|
|
27653
27792
|
}], stepNumber: [{
|
|
@@ -27778,10 +27917,10 @@ class TestCaseVerifyUrlStepComponent {
|
|
|
27778
27917
|
onSelectionChange(checked) { this.selected = checked; this.selectionChange.emit(checked); }
|
|
27779
27918
|
}
|
|
27780
27919
|
TestCaseVerifyUrlStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseVerifyUrlStepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
27781
|
-
TestCaseVerifyUrlStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestCaseVerifyUrlStepComponent, selector: "cqa-test-case-verify-url-step", inputs: { config: "config", stepNumber: "stepNumber", index: "index", action: "action", url: "url", selected: "selected", disabled: "disabled", isNested: "isNested", isInsideStepGroup: "isInsideStepGroup", isInsideLoop: "isInsideLoop", 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 ' + (isInsideLoop && isInsideStepGroup ? 'cqa-pl-20 cqa-pr-4' : (isInsideLoop || isInsideStepGroup) ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4') + (config?.shouldSkip ? ' cqa-step-skipped' : '')\" [style.opacity]=\"config?.shouldSkip ? '0.6' : null\" style=\"border-top: 1px solid #E5E7EB\">\n <div 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-ml-1 cqa-mr-1 cqa-text-[#9CA3AF]\">\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=\"Verify URL\" class=\"cqa-w-8 cqa-h-8 cqa-rounded-lg cqa-flex cqa-items-center cqa-justify-center cqa-flex-shrink-0 cqa-bg-[#FFE4E6] cqa-text-[#E11D48]\">\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.16667\" 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.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </span>\n <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px]\" [innerHTML]=\"getVerifyUrlDescription()\"></span>\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'\" [class.cqa-text-[#1447E6]]=\"config?.shouldSkip\" 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=\"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 <!-- 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 } });
|
|
27920
|
+
TestCaseVerifyUrlStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestCaseVerifyUrlStepComponent, selector: "cqa-test-case-verify-url-step", inputs: { config: "config", stepNumber: "stepNumber", index: "index", action: "action", url: "url", selected: "selected", disabled: "disabled", isNested: "isNested", isInsideStepGroup: "isInsideStepGroup", isInsideLoop: "isInsideLoop", 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 ' + (isInsideLoop && isInsideStepGroup ? 'cqa-pl-20 cqa-pr-4' : (isInsideLoop || isInsideStepGroup) ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4') + (config?.shouldSkip ? ' cqa-step-skipped' : '') \" [style.opacity]=\"config?.shouldSkip ? '0.6' : null\" [style.border-top]=\"isInsideStepGroup ? '1px solid #BEDBFF' : '1px solid #E5E7EB'\">\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=\"Verify URL\" class=\"cqa-w-8 cqa-h-8 cqa-rounded-lg cqa-flex cqa-items-center cqa-justify-center cqa-flex-shrink-0 cqa-bg-[#FFE4E6] cqa-text-[#E11D48]\">\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.16667\" 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.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </span>\n <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px]\" [innerHTML]=\"getVerifyUrlDescription()\"></span>\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'\" [class.cqa-text-[#1447E6]]=\"config?.shouldSkip\" 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=\"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 <!-- 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 } });
|
|
27782
27921
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseVerifyUrlStepComponent, decorators: [{
|
|
27783
27922
|
type: Component,
|
|
27784
|
-
args: [{ selector: 'cqa-test-case-verify-url-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 ' + (isInsideLoop && isInsideStepGroup ? 'cqa-pl-20 cqa-pr-4' : (isInsideLoop || isInsideStepGroup) ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4') + (config?.shouldSkip ? ' cqa-step-skipped' : '')\" [style.opacity]=\"config?.shouldSkip ? '0.6' : null\" style=\"border-top: 1px solid #E5E7EB\">\n <div 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-ml-1 cqa-mr-1 cqa-text-[#9CA3AF]\">\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=\"Verify URL\" class=\"cqa-w-8 cqa-h-8 cqa-rounded-lg cqa-flex cqa-items-center cqa-justify-center cqa-flex-shrink-0 cqa-bg-[#FFE4E6] cqa-text-[#E11D48]\">\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.16667\" 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.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </span>\n <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px]\" [innerHTML]=\"getVerifyUrlDescription()\"></span>\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'\" [class.cqa-text-[#1447E6]]=\"config?.shouldSkip\" 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=\"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 <!-- 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" }]
|
|
27923
|
+
args: [{ selector: 'cqa-test-case-verify-url-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 ' + (isInsideLoop && isInsideStepGroup ? 'cqa-pl-20 cqa-pr-4' : (isInsideLoop || isInsideStepGroup) ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4') + (config?.shouldSkip ? ' cqa-step-skipped' : '') \" [style.opacity]=\"config?.shouldSkip ? '0.6' : null\" [style.border-top]=\"isInsideStepGroup ? '1px solid #BEDBFF' : '1px solid #E5E7EB'\">\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=\"Verify URL\" class=\"cqa-w-8 cqa-h-8 cqa-rounded-lg cqa-flex cqa-items-center cqa-justify-center cqa-flex-shrink-0 cqa-bg-[#FFE4E6] cqa-text-[#E11D48]\">\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.16667\" 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.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </span>\n <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px]\" [innerHTML]=\"getVerifyUrlDescription()\"></span>\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'\" [class.cqa-text-[#1447E6]]=\"config?.shouldSkip\" 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=\"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 <!-- 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" }]
|
|
27785
27924
|
}], ctorParameters: function () { return []; }, propDecorators: { config: [{
|
|
27786
27925
|
type: Input
|
|
27787
27926
|
}], stepNumber: [{
|
|
@@ -27898,10 +28037,10 @@ class TestCaseRestoreSessionStepComponent {
|
|
|
27898
28037
|
onSelectionChange(checked) { this.selected = checked; this.selectionChange.emit(checked); }
|
|
27899
28038
|
}
|
|
27900
28039
|
TestCaseRestoreSessionStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseRestoreSessionStepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
27901
|
-
TestCaseRestoreSessionStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestCaseRestoreSessionStepComponent, selector: "cqa-test-case-restore-session-step", inputs: { config: "config", stepNumber: "stepNumber", index: "index", action: "action", selected: "selected", disabled: "disabled", isNested: "isNested", isInsideStepGroup: "isInsideStepGroup", isInsideLoop: "isInsideLoop", 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 ' + (isInsideLoop && isInsideStepGroup ? 'cqa-pl-20 cqa-pr-4' : (isInsideLoop || isInsideStepGroup) ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4') + (config?.shouldSkip ? ' cqa-step-skipped' : '')\" [style.opacity]=\"config?.shouldSkip ? '0.6' : null\" style=\"border-top: 1px solid #E5E7EB\">\n <div 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-ml-1 cqa-mr-1 cqa-text-[#9CA3AF]\">\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=\"Restore Session\" class=\"cqa-w-8 cqa-h-8 cqa-rounded-lg cqa-flex cqa-items-center cqa-justify-center cqa-flex-shrink-0 cqa-bg-[#FFEDD5] cqa-text-[#EA580C]\">\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 7C1.75 8.03835 2.05791 9.05339 2.63478 9.91674C3.21166 10.7801 4.0316 11.453 4.99091 11.8504C5.95022 12.2477 7.00582 12.3517 8.02422 12.1491C9.04262 11.9466 9.97808 11.4465 10.7123 10.7123C11.4465 9.97808 11.9466 9.04262 12.1491 8.02422C12.3517 7.00582 12.2477 5.95022 11.8504 4.99091C11.453 4.0316 10.7801 3.21166 9.91674 2.63478C9.05339 2.05791 8.03835 1.75 7 1.75C5.53231 1.75552 4.12357 2.32821 3.06833 3.34833L1.75 4.66667\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M1.75 1.75V4.66667H4.66667\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </span>\n <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px]\" [innerHTML]=\"getRestoreSessionDescription()\"></span>\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'\" [class.cqa-text-[#1447E6]]=\"config?.shouldSkip\" 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=\"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 <!-- 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 } });
|
|
28040
|
+
TestCaseRestoreSessionStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestCaseRestoreSessionStepComponent, selector: "cqa-test-case-restore-session-step", inputs: { config: "config", stepNumber: "stepNumber", index: "index", action: "action", selected: "selected", disabled: "disabled", isNested: "isNested", isInsideStepGroup: "isInsideStepGroup", isInsideLoop: "isInsideLoop", 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 ' + (isInsideLoop && isInsideStepGroup ? 'cqa-pl-20 cqa-pr-4' : (isInsideLoop || isInsideStepGroup) ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4') + (config?.shouldSkip ? ' cqa-step-skipped' : '') \" [style.opacity]=\"config?.shouldSkip ? '0.6' : null\" [style.border-top]=\"isInsideStepGroup ? '1px solid #BEDBFF' : '1px solid #E5E7EB'\">\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=\"Restore Session\" class=\"cqa-w-8 cqa-h-8 cqa-rounded-lg cqa-flex cqa-items-center cqa-justify-center cqa-flex-shrink-0 cqa-bg-[#FFEDD5] cqa-text-[#EA580C]\">\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 7C1.75 8.03835 2.05791 9.05339 2.63478 9.91674C3.21166 10.7801 4.0316 11.453 4.99091 11.8504C5.95022 12.2477 7.00582 12.3517 8.02422 12.1491C9.04262 11.9466 9.97808 11.4465 10.7123 10.7123C11.4465 9.97808 11.9466 9.04262 12.1491 8.02422C12.3517 7.00582 12.2477 5.95022 11.8504 4.99091C11.453 4.0316 10.7801 3.21166 9.91674 2.63478C9.05339 2.05791 8.03835 1.75 7 1.75C5.53231 1.75552 4.12357 2.32821 3.06833 3.34833L1.75 4.66667\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M1.75 1.75V4.66667H4.66667\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </span>\n <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px]\" [innerHTML]=\"getRestoreSessionDescription()\"></span>\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'\" [class.cqa-text-[#1447E6]]=\"config?.shouldSkip\" 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=\"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 <!-- 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 } });
|
|
27902
28041
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseRestoreSessionStepComponent, decorators: [{
|
|
27903
28042
|
type: Component,
|
|
27904
|
-
args: [{ selector: 'cqa-test-case-restore-session-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 ' + (isInsideLoop && isInsideStepGroup ? 'cqa-pl-20 cqa-pr-4' : (isInsideLoop || isInsideStepGroup) ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4') + (config?.shouldSkip ? ' cqa-step-skipped' : '')\" [style.opacity]=\"config?.shouldSkip ? '0.6' : null\" style=\"border-top: 1px solid #E5E7EB\">\n <div 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-ml-1 cqa-mr-1 cqa-text-[#9CA3AF]\">\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=\"Restore Session\" class=\"cqa-w-8 cqa-h-8 cqa-rounded-lg cqa-flex cqa-items-center cqa-justify-center cqa-flex-shrink-0 cqa-bg-[#FFEDD5] cqa-text-[#EA580C]\">\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 7C1.75 8.03835 2.05791 9.05339 2.63478 9.91674C3.21166 10.7801 4.0316 11.453 4.99091 11.8504C5.95022 12.2477 7.00582 12.3517 8.02422 12.1491C9.04262 11.9466 9.97808 11.4465 10.7123 10.7123C11.4465 9.97808 11.9466 9.04262 12.1491 8.02422C12.3517 7.00582 12.2477 5.95022 11.8504 4.99091C11.453 4.0316 10.7801 3.21166 9.91674 2.63478C9.05339 2.05791 8.03835 1.75 7 1.75C5.53231 1.75552 4.12357 2.32821 3.06833 3.34833L1.75 4.66667\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M1.75 1.75V4.66667H4.66667\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </span>\n <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px]\" [innerHTML]=\"getRestoreSessionDescription()\"></span>\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'\" [class.cqa-text-[#1447E6]]=\"config?.shouldSkip\" 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=\"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 <!-- 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" }]
|
|
28043
|
+
args: [{ selector: 'cqa-test-case-restore-session-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 ' + (isInsideLoop && isInsideStepGroup ? 'cqa-pl-20 cqa-pr-4' : (isInsideLoop || isInsideStepGroup) ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4') + (config?.shouldSkip ? ' cqa-step-skipped' : '') \" [style.opacity]=\"config?.shouldSkip ? '0.6' : null\" [style.border-top]=\"isInsideStepGroup ? '1px solid #BEDBFF' : '1px solid #E5E7EB'\">\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=\"Restore Session\" class=\"cqa-w-8 cqa-h-8 cqa-rounded-lg cqa-flex cqa-items-center cqa-justify-center cqa-flex-shrink-0 cqa-bg-[#FFEDD5] cqa-text-[#EA580C]\">\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 7C1.75 8.03835 2.05791 9.05339 2.63478 9.91674C3.21166 10.7801 4.0316 11.453 4.99091 11.8504C5.95022 12.2477 7.00582 12.3517 8.02422 12.1491C9.04262 11.9466 9.97808 11.4465 10.7123 10.7123C11.4465 9.97808 11.9466 9.04262 12.1491 8.02422C12.3517 7.00582 12.2477 5.95022 11.8504 4.99091C11.453 4.0316 10.7801 3.21166 9.91674 2.63478C9.05339 2.05791 8.03835 1.75 7 1.75C5.53231 1.75552 4.12357 2.32821 3.06833 3.34833L1.75 4.66667\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M1.75 1.75V4.66667H4.66667\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </span>\n <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px]\" [innerHTML]=\"getRestoreSessionDescription()\"></span>\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'\" [class.cqa-text-[#1447E6]]=\"config?.shouldSkip\" 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=\"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 <!-- 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" }]
|
|
27905
28044
|
}], ctorParameters: function () { return []; }, propDecorators: { config: [{
|
|
27906
28045
|
type: Input
|
|
27907
28046
|
}], stepNumber: [{
|
|
@@ -28019,10 +28158,10 @@ class TestCaseCustomCodeStepComponent {
|
|
|
28019
28158
|
onSelectionChange(checked) { this.selected = checked; this.selectionChange.emit(checked); }
|
|
28020
28159
|
}
|
|
28021
28160
|
TestCaseCustomCodeStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseCustomCodeStepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
28022
|
-
TestCaseCustomCodeStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestCaseCustomCodeStepComponent, selector: "cqa-test-case-custom-code-step", inputs: { config: "config", stepNumber: "stepNumber", index: "index", language: "language", code: "code", description: "description", selected: "selected", disabled: "disabled", isNested: "isNested", isInsideStepGroup: "isInsideStepGroup", isInsideLoop: "isInsideLoop", 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 ' + (isInsideLoop && isInsideStepGroup ? 'cqa-pl-20 cqa-pr-4' : (isInsideLoop || isInsideStepGroup) ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4') + (config?.shouldSkip ? ' cqa-step-skipped' : '')\" [style.opacity]=\"config?.shouldSkip ? '0.6' : null\" style=\"border-top: 1px solid #E5E7EB\">\n <div 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 </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-ml-1 cqa-mr-1 cqa-text-[#9CA3AF]\">\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=\"Custom Code\" class=\"cqa-w-8 cqa-h-8 cqa-rounded-lg cqa-flex cqa-items-center cqa-justify-center cqa-flex-shrink-0 cqa-bg-[#F3F4F6] cqa-text-[#374151]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M4.66667 4.08333L1.75 7L4.66667 9.91667\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M9.33333 4.08333L12.25 7L9.33333 9.91667\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M8.16667 1.75L5.83333 12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </span>\n <span class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#374151] cqa-text-[12px] cqa-leading-[15px] cqa-font-medium cqa-border cqa-border-solid cqa-border-[#D1D5DB] cqa-rounded cqa-bg-[#F9FAFB]\">{{ getLanguageLabel() }}</span>\n <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px] cqa-font-mono\">{{ getCodePreview() }}</span>\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'\" [class.cqa-text-[#1447E6]]=\"config?.shouldSkip\" 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 } });
|
|
28161
|
+
TestCaseCustomCodeStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestCaseCustomCodeStepComponent, selector: "cqa-test-case-custom-code-step", inputs: { config: "config", stepNumber: "stepNumber", index: "index", language: "language", code: "code", description: "description", selected: "selected", disabled: "disabled", isNested: "isNested", isInsideStepGroup: "isInsideStepGroup", isInsideLoop: "isInsideLoop", 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 ' + (isInsideLoop && isInsideStepGroup ? 'cqa-pl-20 cqa-pr-4' : (isInsideLoop || isInsideStepGroup) ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4') + (config?.shouldSkip ? ' cqa-step-skipped' : '') \" [style.opacity]=\"config?.shouldSkip ? '0.6' : null\" [style.border-top]=\"isInsideStepGroup ? '1px solid #BEDBFF' : '1px solid #E5E7EB'\">\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 </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=\"Custom Code\" class=\"cqa-w-8 cqa-h-8 cqa-rounded-lg cqa-flex cqa-items-center cqa-justify-center cqa-flex-shrink-0 cqa-bg-[#F3F4F6] cqa-text-[#374151]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M4.66667 4.08333L1.75 7L4.66667 9.91667\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M9.33333 4.08333L12.25 7L9.33333 9.91667\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M8.16667 1.75L5.83333 12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </span>\n <span class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#374151] cqa-text-[12px] cqa-leading-[15px] cqa-font-medium cqa-border cqa-border-solid cqa-border-[#D1D5DB] cqa-rounded cqa-bg-[#F9FAFB]\">{{ getLanguageLabel() }}</span>\n <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px] cqa-font-mono\">{{ getCodePreview() }}</span>\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'\" [class.cqa-text-[#1447E6]]=\"config?.shouldSkip\" 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 } });
|
|
28023
28162
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseCustomCodeStepComponent, decorators: [{
|
|
28024
28163
|
type: Component,
|
|
28025
|
-
args: [{ selector: 'cqa-test-case-custom-code-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 ' + (isInsideLoop && isInsideStepGroup ? 'cqa-pl-20 cqa-pr-4' : (isInsideLoop || isInsideStepGroup) ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4') + (config?.shouldSkip ? ' cqa-step-skipped' : '')\" [style.opacity]=\"config?.shouldSkip ? '0.6' : null\" style=\"border-top: 1px solid #E5E7EB\">\n <div 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 </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-ml-1 cqa-mr-1 cqa-text-[#9CA3AF]\">\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=\"Custom Code\" class=\"cqa-w-8 cqa-h-8 cqa-rounded-lg cqa-flex cqa-items-center cqa-justify-center cqa-flex-shrink-0 cqa-bg-[#F3F4F6] cqa-text-[#374151]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M4.66667 4.08333L1.75 7L4.66667 9.91667\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M9.33333 4.08333L12.25 7L9.33333 9.91667\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M8.16667 1.75L5.83333 12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </span>\n <span class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#374151] cqa-text-[12px] cqa-leading-[15px] cqa-font-medium cqa-border cqa-border-solid cqa-border-[#D1D5DB] cqa-rounded cqa-bg-[#F9FAFB]\">{{ getLanguageLabel() }}</span>\n <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px] cqa-font-mono\">{{ getCodePreview() }}</span>\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'\" [class.cqa-text-[#1447E6]]=\"config?.shouldSkip\" 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" }]
|
|
28164
|
+
args: [{ selector: 'cqa-test-case-custom-code-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 ' + (isInsideLoop && isInsideStepGroup ? 'cqa-pl-20 cqa-pr-4' : (isInsideLoop || isInsideStepGroup) ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4') + (config?.shouldSkip ? ' cqa-step-skipped' : '') \" [style.opacity]=\"config?.shouldSkip ? '0.6' : null\" [style.border-top]=\"isInsideStepGroup ? '1px solid #BEDBFF' : '1px solid #E5E7EB'\">\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 </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=\"Custom Code\" class=\"cqa-w-8 cqa-h-8 cqa-rounded-lg cqa-flex cqa-items-center cqa-justify-center cqa-flex-shrink-0 cqa-bg-[#F3F4F6] cqa-text-[#374151]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M4.66667 4.08333L1.75 7L4.66667 9.91667\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M9.33333 4.08333L12.25 7L9.33333 9.91667\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M8.16667 1.75L5.83333 12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </span>\n <span class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#374151] cqa-text-[12px] cqa-leading-[15px] cqa-font-medium cqa-border cqa-border-solid cqa-border-[#D1D5DB] cqa-rounded cqa-bg-[#F9FAFB]\">{{ getLanguageLabel() }}</span>\n <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px] cqa-font-mono\">{{ getCodePreview() }}</span>\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'\" [class.cqa-text-[#1447E6]]=\"config?.shouldSkip\" 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" }]
|
|
28026
28165
|
}], ctorParameters: function () { return []; }, propDecorators: { config: [{
|
|
28027
28166
|
type: Input
|
|
28028
28167
|
}], stepNumber: [{
|