@cqa-lib/cqa-ui 1.1.268 → 1.1.269

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (26) hide show
  1. package/esm2020/lib/autocomplete/autocomplete.component.mjs +3 -3
  2. package/esm2020/lib/test-case-details/ai-agent-step/ai-agent-step.component.mjs +3 -3
  3. package/esm2020/lib/test-case-details/ai-verify-step/ai-verify-step.component.mjs +3 -3
  4. package/esm2020/lib/test-case-details/api-step/api-step.component.mjs +3 -3
  5. package/esm2020/lib/test-case-details/condition-step/condition-step.component.mjs +29 -3
  6. package/esm2020/lib/test-case-details/custom-code-step/custom-code-step.component.mjs +3 -3
  7. package/esm2020/lib/test-case-details/database-step/database-step.component.mjs +3 -3
  8. package/esm2020/lib/test-case-details/delete-steps/delete-steps.component.mjs +8 -3
  9. package/esm2020/lib/test-case-details/loop-step/loop-step.component.mjs +34 -3
  10. package/esm2020/lib/test-case-details/normal-step/normal-step.component.mjs +3 -3
  11. package/esm2020/lib/test-case-details/restore-session-step/restore-session-step.component.mjs +3 -3
  12. package/esm2020/lib/test-case-details/screenshot-step/screenshot-step.component.mjs +3 -3
  13. package/esm2020/lib/test-case-details/scroll-step/scroll-step.component.mjs +3 -3
  14. package/esm2020/lib/test-case-details/step-group/step-group.component.mjs +61 -15
  15. package/esm2020/lib/test-case-details/upload-step/upload-step.component.mjs +3 -3
  16. package/esm2020/lib/test-case-details/verify-url-step/verify-url-step.component.mjs +3 -3
  17. package/fesm2015/cqa-lib-cqa-ui.mjs +158 -44
  18. package/fesm2015/cqa-lib-cqa-ui.mjs.map +1 -1
  19. package/fesm2020/cqa-lib-cqa-ui.mjs +152 -44
  20. package/fesm2020/cqa-lib-cqa-ui.mjs.map +1 -1
  21. package/lib/test-case-details/condition-step/condition-step.component.d.ts +4 -0
  22. package/lib/test-case-details/delete-steps/delete-steps.component.d.ts +5 -1
  23. package/lib/test-case-details/loop-step/loop-step.component.d.ts +6 -0
  24. package/lib/test-case-details/step-group/step-group.component.d.ts +15 -1
  25. package/package.json +1 -1
  26. package/styles.css +1 -1
package/fesm2020/cqa-lib-cqa-ui.mjs CHANGED
@@ -560,10 +560,10 @@ class AutocompleteComponent {
560
560
  }
561
561
  }
562
562
  AutocompleteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: AutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
563
- AutocompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: AutocompleteComponent, selector: "cqa-autocomplete", inputs: { placeholder: "placeholder", options: "options", value: "value", disabled: "disabled", showClear: "showClear", ariaLabel: "ariaLabel", autoFocus: "autoFocus", size: "size", fullWidth: "fullWidth" }, outputs: { valueChange: "valueChange", optionSelect: "optionSelect", cleared: "cleared" }, host: { listeners: { "document:keydown.escape": "onEscape()" }, classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div\n class=\"cqa-autocomplete-root cqa-relative\"\n [style.display]=\"fullWidth ? 'block' : 'inline-block'\"\n [style.width]=\"fullWidth ? '100%' : 'auto'\">\n <!-- Field: same styling as search bar -->\n <div\n class=\"cqa-inline-flex cqa-items-center cqa-gap-2 cqa-px-6 cqa-py-3 cqa-text-[14px] cqa-border cqa-border-solid cqa-border-gray-200 cqa-rounded-md cqa-bg-white cqa-shadow-sm cqa-transition-colors\"\n [ngClass]=\"[fullWidth ? 'cqa-w-full' : widthClasses[size]]\">\n <input\n type=\"text\"\n class=\"cqa-flex-1 cqa-min-w-0 cqa-border-none cqa-outline-none cqa-bg-transparent placeholder:cqa-text-gray-300 disabled:cqa-text-gray-400 disabled:cqa-cursor-not-allowed cqa-font-['SF_Pro_Text'] cqa-font-normal cqa-text-[12.3px] cqa-leading-none cqa-tracking-normal cqa-align-middle cqa-text-black-100\"\n [placeholder]=\"placeholder\"\n [value]=\"inputValue\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n [disabled]=\"disabled\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-expanded]=\"panelOpen\"\n aria-autocomplete=\"list\"\n aria-haspopup=\"listbox\"\n autocomplete=\"off\"\n autocapitalize=\"none\"\n spellcheck=\"false\"\n [attr.autofocus]=\"autoFocus ? '' : null\"\n />\n <button\n *ngIf=\"showClear && inputValue\"\n type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-p-0 cqa-w-4 cqa-h-4 cqa-border-0 cqa-bg-transparent cqa-cursor-pointer cqa-text-gray-500 cqa-hover:cqa-text-gray-700 disabled:cqa-text-gray-300 cqa-transition-colors cqa-leading-none\"\n (click)=\"clear()\"\n [disabled]=\"disabled\"\n aria-label=\"Clear\">\n <mat-icon\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-leading-none cqa-p-0\"\n [style.width.px]=\"16\"\n [style.height.px]=\"16\"\n [style.fontSize.px]=\"16\"\n [ngClass]=\"{ 'cqa-opacity-[0.38]': disabled }\">\n close\n </mat-icon>\n </button>\n </div>\n <!-- List box: below field, same width as field -->\n <ul\n *ngIf=\"panelOpen\"\n role=\"listbox\"\n class=\"cqa-autocomplete-list cqa-absolute cqa-left-0 cqa-right-0 cqa-top-full cqa-mt-1 cqa-py-1 cqa-border cqa-border-solid cqa-border-gray-200 cqa-rounded-md cqa-bg-white cqa-shadow-sm cqa-max-h-[240px] cqa-overflow-y-auto cqa-scrollbar-thin cqa-z-10 cqa-list-none cqa-m-0 cqa-p-0\"\n [class.cqa-w-full]=\"fullWidth\">\n <li\n *ngFor=\"let option of displayOptions; trackBy: trackByValue\"\n role=\"option\"\n (mousedown)=\"selectOption(option); $event.preventDefault()\"\n class=\"cqa-px-4 cqa-py-2 cqa-text-[12.3px] cqa-leading-none cqa-tracking-normal cqa-text-black-100 cqa-cursor-pointer cqa-font-['SF_Pro_Text'] hover:cqa-bg-gray-100 cqa-transition-colors\">\n {{ getOptionLabel(option) }}\n </li>\n <li\n *ngIf=\"displayOptions.length === 0\"\n class=\"cqa-px-4 cqa-py-3 cqa-text-[12.3px] cqa-text-gray-400 cqa-cursor-default\">\n No matches\n </li>\n </ul>\n</div>\n", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
563
+ AutocompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: AutocompleteComponent, selector: "cqa-autocomplete", inputs: { placeholder: "placeholder", options: "options", value: "value", disabled: "disabled", showClear: "showClear", ariaLabel: "ariaLabel", autoFocus: "autoFocus", size: "size", fullWidth: "fullWidth" }, outputs: { valueChange: "valueChange", optionSelect: "optionSelect", cleared: "cleared" }, host: { listeners: { "document:keydown.escape": "onEscape()" }, classAttribute: "cqa-ui-root" }, usesOnChanges: true, ngImport: i0, template: "<div\n class=\"cqa-autocomplete-root cqa-relative\"\n [style.display]=\"fullWidth ? 'block' : 'inline-block'\"\n [style.width]=\"fullWidth ? '100%' : 'auto'\">\n <!-- Field: same styling as search bar -->\n <div\n class=\"cqa-inline-flex cqa-items-center cqa-gap-2 cqa-px-6 cqa-py-3 cqa-text-[14px] cqa-border cqa-border-solid cqa-border-gray-200 cqa-rounded-md cqa-bg-white cqa-shadow-sm cqa-transition-colors\"\n [ngClass]=\"[fullWidth ? 'cqa-w-full' : widthClasses[size]]\">\n <input\n type=\"text\"\n class=\"cqa-flex-1 cqa-min-w-0 cqa-border-none cqa-outline-none cqa-bg-transparent placeholder:cqa-text-gray-300 disabled:cqa-text-gray-400 disabled:cqa-cursor-not-allowed cqa-font-['SF_Pro_Text'] cqa-font-normal cqa-text-[12.3px] cqa-leading-none cqa-tracking-normal cqa-align-middle cqa-text-black-100\"\n [placeholder]=\"placeholder\"\n [value]=\"inputValue\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n [disabled]=\"disabled\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-expanded]=\"panelOpen\"\n aria-autocomplete=\"list\"\n aria-haspopup=\"listbox\"\n autocomplete=\"off\"\n autocapitalize=\"none\"\n spellcheck=\"false\"\n [attr.autofocus]=\"autoFocus ? '' : null\"\n />\n <button\n *ngIf=\"showClear && inputValue\"\n type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-p-0 cqa-w-4 cqa-h-4 cqa-border-0 cqa-bg-transparent cqa-cursor-pointer cqa-text-gray-500 cqa-hover:cqa-text-gray-700 disabled:cqa-text-gray-300 cqa-transition-colors cqa-leading-none\"\n (click)=\"clear()\"\n [disabled]=\"disabled\"\n aria-label=\"Clear\">\n <mat-icon\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-leading-none cqa-p-0\"\n [style.width.px]=\"16\"\n [style.height.px]=\"16\"\n [style.fontSize.px]=\"16\"\n [ngClass]=\"{ 'cqa-opacity-[0.38]': disabled }\">\n close\n </mat-icon>\n </button>\n </div>\n <!-- List box: below field, same width as field -->\n <ul\n *ngIf=\"panelOpen\"\n role=\"listbox\"\n class=\"cqa-autocomplete-list cqa-absolute cqa-left-0 cqa-right-0 cqa-top-full cqa-mt-1 cqa-py-1 cqa-border cqa-border-solid cqa-border-gray-200 cqa-rounded-md cqa-bg-white cqa-shadow-sm cqa-max-h-[240px] cqa-overflow-y-auto cqa-scrollbar-thin cqa-z-[1100] cqa-list-none cqa-m-0 cqa-p-0\"\n [class.cqa-w-full]=\"fullWidth\">\n <li\n *ngFor=\"let option of displayOptions; trackBy: trackByValue\"\n role=\"option\"\n (mousedown)=\"selectOption(option); $event.preventDefault()\"\n class=\"cqa-px-4 cqa-py-2 cqa-text-[12.3px] cqa-leading-none cqa-tracking-normal cqa-text-black-100 cqa-cursor-pointer cqa-font-['SF_Pro_Text'] hover:cqa-bg-gray-100 cqa-transition-colors\">\n {{ getOptionLabel(option) }}\n </li>\n <li\n *ngIf=\"displayOptions.length === 0\"\n class=\"cqa-px-4 cqa-py-3 cqa-text-[12.3px] cqa-text-gray-400 cqa-cursor-default\">\n No matches\n </li>\n </ul>\n</div>\n", components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
564
564
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: AutocompleteComponent, decorators: [{
565
565
  type: Component,
566
- args: [{ selector: 'cqa-autocomplete', host: { class: 'cqa-ui-root' }, template: "<div\n class=\"cqa-autocomplete-root cqa-relative\"\n [style.display]=\"fullWidth ? 'block' : 'inline-block'\"\n [style.width]=\"fullWidth ? '100%' : 'auto'\">\n <!-- Field: same styling as search bar -->\n <div\n class=\"cqa-inline-flex cqa-items-center cqa-gap-2 cqa-px-6 cqa-py-3 cqa-text-[14px] cqa-border cqa-border-solid cqa-border-gray-200 cqa-rounded-md cqa-bg-white cqa-shadow-sm cqa-transition-colors\"\n [ngClass]=\"[fullWidth ? 'cqa-w-full' : widthClasses[size]]\">\n <input\n type=\"text\"\n class=\"cqa-flex-1 cqa-min-w-0 cqa-border-none cqa-outline-none cqa-bg-transparent placeholder:cqa-text-gray-300 disabled:cqa-text-gray-400 disabled:cqa-cursor-not-allowed cqa-font-['SF_Pro_Text'] cqa-font-normal cqa-text-[12.3px] cqa-leading-none cqa-tracking-normal cqa-align-middle cqa-text-black-100\"\n [placeholder]=\"placeholder\"\n [value]=\"inputValue\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n [disabled]=\"disabled\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-expanded]=\"panelOpen\"\n aria-autocomplete=\"list\"\n aria-haspopup=\"listbox\"\n autocomplete=\"off\"\n autocapitalize=\"none\"\n spellcheck=\"false\"\n [attr.autofocus]=\"autoFocus ? '' : null\"\n />\n <button\n *ngIf=\"showClear && inputValue\"\n type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-p-0 cqa-w-4 cqa-h-4 cqa-border-0 cqa-bg-transparent cqa-cursor-pointer cqa-text-gray-500 cqa-hover:cqa-text-gray-700 disabled:cqa-text-gray-300 cqa-transition-colors cqa-leading-none\"\n (click)=\"clear()\"\n [disabled]=\"disabled\"\n aria-label=\"Clear\">\n <mat-icon\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-leading-none cqa-p-0\"\n [style.width.px]=\"16\"\n [style.height.px]=\"16\"\n [style.fontSize.px]=\"16\"\n [ngClass]=\"{ 'cqa-opacity-[0.38]': disabled }\">\n close\n </mat-icon>\n </button>\n </div>\n <!-- List box: below field, same width as field -->\n <ul\n *ngIf=\"panelOpen\"\n role=\"listbox\"\n class=\"cqa-autocomplete-list cqa-absolute cqa-left-0 cqa-right-0 cqa-top-full cqa-mt-1 cqa-py-1 cqa-border cqa-border-solid cqa-border-gray-200 cqa-rounded-md cqa-bg-white cqa-shadow-sm cqa-max-h-[240px] cqa-overflow-y-auto cqa-scrollbar-thin cqa-z-10 cqa-list-none cqa-m-0 cqa-p-0\"\n [class.cqa-w-full]=\"fullWidth\">\n <li\n *ngFor=\"let option of displayOptions; trackBy: trackByValue\"\n role=\"option\"\n (mousedown)=\"selectOption(option); $event.preventDefault()\"\n class=\"cqa-px-4 cqa-py-2 cqa-text-[12.3px] cqa-leading-none cqa-tracking-normal cqa-text-black-100 cqa-cursor-pointer cqa-font-['SF_Pro_Text'] hover:cqa-bg-gray-100 cqa-transition-colors\">\n {{ getOptionLabel(option) }}\n </li>\n <li\n *ngIf=\"displayOptions.length === 0\"\n class=\"cqa-px-4 cqa-py-3 cqa-text-[12.3px] cqa-text-gray-400 cqa-cursor-default\">\n No matches\n </li>\n </ul>\n</div>\n" }]
566
+ args: [{ selector: 'cqa-autocomplete', host: { class: 'cqa-ui-root' }, template: "<div\n class=\"cqa-autocomplete-root cqa-relative\"\n [style.display]=\"fullWidth ? 'block' : 'inline-block'\"\n [style.width]=\"fullWidth ? '100%' : 'auto'\">\n <!-- Field: same styling as search bar -->\n <div\n class=\"cqa-inline-flex cqa-items-center cqa-gap-2 cqa-px-6 cqa-py-3 cqa-text-[14px] cqa-border cqa-border-solid cqa-border-gray-200 cqa-rounded-md cqa-bg-white cqa-shadow-sm cqa-transition-colors\"\n [ngClass]=\"[fullWidth ? 'cqa-w-full' : widthClasses[size]]\">\n <input\n type=\"text\"\n class=\"cqa-flex-1 cqa-min-w-0 cqa-border-none cqa-outline-none cqa-bg-transparent placeholder:cqa-text-gray-300 disabled:cqa-text-gray-400 disabled:cqa-cursor-not-allowed cqa-font-['SF_Pro_Text'] cqa-font-normal cqa-text-[12.3px] cqa-leading-none cqa-tracking-normal cqa-align-middle cqa-text-black-100\"\n [placeholder]=\"placeholder\"\n [value]=\"inputValue\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n [disabled]=\"disabled\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-expanded]=\"panelOpen\"\n aria-autocomplete=\"list\"\n aria-haspopup=\"listbox\"\n autocomplete=\"off\"\n autocapitalize=\"none\"\n spellcheck=\"false\"\n [attr.autofocus]=\"autoFocus ? '' : null\"\n />\n <button\n *ngIf=\"showClear && inputValue\"\n type=\"button\"\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-p-0 cqa-w-4 cqa-h-4 cqa-border-0 cqa-bg-transparent cqa-cursor-pointer cqa-text-gray-500 cqa-hover:cqa-text-gray-700 disabled:cqa-text-gray-300 cqa-transition-colors cqa-leading-none\"\n (click)=\"clear()\"\n [disabled]=\"disabled\"\n aria-label=\"Clear\">\n <mat-icon\n class=\"cqa-flex cqa-items-center cqa-justify-center cqa-leading-none cqa-p-0\"\n [style.width.px]=\"16\"\n [style.height.px]=\"16\"\n [style.fontSize.px]=\"16\"\n [ngClass]=\"{ 'cqa-opacity-[0.38]': disabled }\">\n close\n </mat-icon>\n </button>\n </div>\n <!-- List box: below field, same width as field -->\n <ul\n *ngIf=\"panelOpen\"\n role=\"listbox\"\n class=\"cqa-autocomplete-list cqa-absolute cqa-left-0 cqa-right-0 cqa-top-full cqa-mt-1 cqa-py-1 cqa-border cqa-border-solid cqa-border-gray-200 cqa-rounded-md cqa-bg-white cqa-shadow-sm cqa-max-h-[240px] cqa-overflow-y-auto cqa-scrollbar-thin cqa-z-[1100] cqa-list-none cqa-m-0 cqa-p-0\"\n [class.cqa-w-full]=\"fullWidth\">\n <li\n *ngFor=\"let option of displayOptions; trackBy: trackByValue\"\n role=\"option\"\n (mousedown)=\"selectOption(option); $event.preventDefault()\"\n class=\"cqa-px-4 cqa-py-2 cqa-text-[12.3px] cqa-leading-none cqa-tracking-normal cqa-text-black-100 cqa-cursor-pointer cqa-font-['SF_Pro_Text'] hover:cqa-bg-gray-100 cqa-transition-colors\">\n {{ getOptionLabel(option) }}\n </li>\n <li\n *ngIf=\"displayOptions.length === 0\"\n class=\"cqa-px-4 cqa-py-3 cqa-text-[12.3px] cqa-text-gray-400 cqa-cursor-default\">\n No matches\n </li>\n </ul>\n</div>\n" }]
567
567
  }], propDecorators: { placeholder: [{
568
568
  type: Input
569
569
  }], options: [{
@@ -20775,10 +20775,10 @@ class TestCaseNormalStepComponent {
20775
20775
  }
20776
20776
  }
20777
20777
  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 });
20778
- 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", action: "action", eventType: "eventType", parameters: "parameters", selected: "selected", disabled: "disabled", isNested: "isNested", isInsideLoop: "isInsideLoop", isInsideStepGroup: "isInsideStepGroup", isReorder: "isReorder", stepIndex: "stepIndex" }, outputs: { eventTypeChange: "eventTypeChange", parameterChange: "parameterChange", edit: "edit", editInDepth: "editInDepth", link: "link", duplicate: "duplicate", delete: "delete", moreOptions: "moreOptions", viewDetails: "viewDetails", selectionChange: "selectionChange", clickAction: "clickAction" }, 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 [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-[12.5px] ' + (isInsideLoop ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4')\" style=\"border-bottom: 1px solid #E5E7EB;\">\n\n <div class=\"cqa-inline-flex cqa-items-center\">\n <!-- Drag Handle Icon (when isReorder is true) - 9-dot grid (3x3) -->\n <div *ngIf=\"isReorder\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n </svg>\n </div>\n <!-- Checkbox (when isReorder is false) -->\n <label *ngIf=\"!isReorder\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative 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 <!-- Action Description -->\n <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px] cqa-action-format\" *ngIf=\"getActionDescription()\"\n [innerHTML]=\"getActionDescription()\" (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-3 cqa-ml-auto\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-3\">\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\">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) - before action icons, format: 25 Feb 2026 -->\n <span *ngIf=\"config.createdDate\" class=\"cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px]\">\n {{ config.createdDate | date:'d MMM yyyy' }}\n </span>\n <!-- Action Icons: Edit, Link, Duplicate, Delete (show on hover; hidden when step is inside step-group) -->\n <div *ngIf=\"!isInsideStepGroup\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-3 cqa-px-[7px]\">\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 type=\"button\" (click)=\"onDuplicate(); $event.stopPropagation()\" title=\"Duplicate\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path 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 </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 </div>\n </div>\n</div>", styles: [".step-actions{opacity:0;transition:opacity .15s ease}.step-row:hover .step-actions{opacity:1}\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 } });
20778
+ 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", action: "action", eventType: "eventType", parameters: "parameters", selected: "selected", disabled: "disabled", isNested: "isNested", isInsideLoop: "isInsideLoop", isInsideStepGroup: "isInsideStepGroup", isReorder: "isReorder", stepIndex: "stepIndex" }, outputs: { eventTypeChange: "eventTypeChange", parameterChange: "parameterChange", edit: "edit", editInDepth: "editInDepth", link: "link", duplicate: "duplicate", delete: "delete", moreOptions: "moreOptions", viewDetails: "viewDetails", selectionChange: "selectionChange", clickAction: "clickAction" }, 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 [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-[12.5px] ' + (isInsideLoop && isInsideStepGroup ? 'cqa-pl-20 cqa-pr-4' : (isInsideLoop || isInsideStepGroup) ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4')\" style=\"border-bottom: 1px solid #E5E7EB;\">\n\n <div class=\"cqa-inline-flex cqa-items-center\">\n <!-- Drag Handle Icon (when isReorder is true) - 9-dot grid (3x3) -->\n <div *ngIf=\"isReorder\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n </svg>\n </div>\n <!-- Checkbox (when isReorder is false) -->\n <label *ngIf=\"!isReorder\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative 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 <!-- Action Description -->\n <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px] cqa-action-format\" *ngIf=\"getActionDescription()\"\n [innerHTML]=\"getActionDescription()\" (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-3 cqa-ml-auto\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-3\">\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\">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) - before action icons, format: 25 Feb 2026 -->\n <span *ngIf=\"config.createdDate\" class=\"cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px]\">\n {{ config.createdDate | date:'d MMM yyyy' }}\n </span>\n <!-- Action Icons: Edit, Link, Duplicate, Delete (show on hover; hidden when step is inside step-group) -->\n <div *ngIf=\"!isInsideStepGroup\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-3 cqa-px-[7px]\">\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 type=\"button\" (click)=\"onDuplicate(); $event.stopPropagation()\" title=\"Duplicate\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path 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 </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 </div>\n </div>\n</div>", styles: [".step-actions{opacity:0;transition:opacity .15s ease}.step-row:hover .step-actions{opacity:1}\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 } });
20779
20779
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseNormalStepComponent, decorators: [{
20780
20780
  type: Component,
20781
- args: [{ selector: 'cqa-test-case-normal-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-[12.5px] ' + (isInsideLoop ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4')\" style=\"border-bottom: 1px solid #E5E7EB;\">\n\n <div class=\"cqa-inline-flex cqa-items-center\">\n <!-- Drag Handle Icon (when isReorder is true) - 9-dot grid (3x3) -->\n <div *ngIf=\"isReorder\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n </svg>\n </div>\n <!-- Checkbox (when isReorder is false) -->\n <label *ngIf=\"!isReorder\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative 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 <!-- Action Description -->\n <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px] cqa-action-format\" *ngIf=\"getActionDescription()\"\n [innerHTML]=\"getActionDescription()\" (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-3 cqa-ml-auto\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-3\">\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\">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) - before action icons, format: 25 Feb 2026 -->\n <span *ngIf=\"config.createdDate\" class=\"cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px]\">\n {{ config.createdDate | date:'d MMM yyyy' }}\n </span>\n <!-- Action Icons: Edit, Link, Duplicate, Delete (show on hover; hidden when step is inside step-group) -->\n <div *ngIf=\"!isInsideStepGroup\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-3 cqa-px-[7px]\">\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 type=\"button\" (click)=\"onDuplicate(); $event.stopPropagation()\" title=\"Duplicate\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path 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 </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 </div>\n </div>\n</div>" }]
20781
+ args: [{ selector: 'cqa-test-case-normal-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-[12.5px] ' + (isInsideLoop && isInsideStepGroup ? 'cqa-pl-20 cqa-pr-4' : (isInsideLoop || isInsideStepGroup) ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4')\" style=\"border-bottom: 1px solid #E5E7EB;\">\n\n <div class=\"cqa-inline-flex cqa-items-center\">\n <!-- Drag Handle Icon (when isReorder is true) - 9-dot grid (3x3) -->\n <div *ngIf=\"isReorder\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n </svg>\n </div>\n <!-- Checkbox (when isReorder is false) -->\n <label *ngIf=\"!isReorder\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative 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 <!-- Action Description -->\n <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px] cqa-action-format\" *ngIf=\"getActionDescription()\"\n [innerHTML]=\"getActionDescription()\" (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-3 cqa-ml-auto\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-3\">\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\">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) - before action icons, format: 25 Feb 2026 -->\n <span *ngIf=\"config.createdDate\" class=\"cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px]\">\n {{ config.createdDate | date:'d MMM yyyy' }}\n </span>\n <!-- Action Icons: Edit, Link, Duplicate, Delete (show on hover; hidden when step is inside step-group) -->\n <div *ngIf=\"!isInsideStepGroup\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-3 cqa-px-[7px]\">\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 type=\"button\" (click)=\"onDuplicate(); $event.stopPropagation()\" title=\"Duplicate\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path 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 </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 </div>\n </div>\n</div>" }]
20782
20782
  }], ctorParameters: function () { return [{ type: CustomEditStepService }, { type: ElementPopupService }, { type: TestDataModalService }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i1$2.DomSanitizer }]; }, propDecorators: { dropdownContainer: [{
20783
20783
  type: ViewChild,
20784
20784
  args: ['dropdownContainer', { static: false }]
@@ -21751,6 +21751,28 @@ class TestCaseLoopStepComponent {
21751
21751
  };
21752
21752
  });
21753
21753
  }
21754
+ /** Display value for while condition autocomplete: show natural text from option matching naturalTextActionId when available (including when form is empty on open), else form value. When user has selected a different option, show form value. */
21755
+ get whileConditionDisplayValue() {
21756
+ const configWithId = this.config;
21757
+ const formValue = this.editForm?.get('condition')?.value ?? '';
21758
+ const isFormHtml = formValue && (String(formValue).includes('<') || String(formValue).includes('>'));
21759
+ if (configWithId?.naturalTextActionId != null && this.naturalTextActionsOptions?.length) {
21760
+ const matchingOption = this.naturalTextActionsOptions.find((option) => String(option.id) === String(configWithId.naturalTextActionId));
21761
+ if (matchingOption) {
21762
+ const naturalText = matchingOption.naturalText ?? matchingOption.name ?? matchingOption.value ?? '';
21763
+ if (naturalText) {
21764
+ const naturalTextStr = String(naturalText);
21765
+ // Show selected: when form is empty (initial open), or form matches this option, or form has HTML. Only use form value when user picked a different option.
21766
+ if (!formValue || formValue === naturalTextStr || isFormHtml)
21767
+ return naturalTextStr;
21768
+ return formValue;
21769
+ }
21770
+ }
21771
+ }
21772
+ if (isFormHtml)
21773
+ return '';
21774
+ return formValue;
21775
+ }
21754
21776
  onConditionSelect(option) {
21755
21777
  this.editForm?.get('condition')?.setValue(option.value);
21756
21778
  const matchingTemplate = option.template;
@@ -22127,6 +22149,15 @@ class TestCaseLoopStepComponent {
22127
22149
  onAddStep() {
22128
22150
  this.addStep.emit();
22129
22151
  }
22152
+ /** Re-emit addStepForLoop from nested loop so N-level nesting works (empty-state add step). */
22153
+ onAddStepForLoopFromNested(event) {
22154
+ if (event?.loopStepConfig) {
22155
+ this.addStep.emit({ loopStepConfig: event.loopStepConfig });
22156
+ }
22157
+ else {
22158
+ this.addStep.emit();
22159
+ }
22160
+ }
22130
22161
  /** Called from empty-state plus only; same behaviour as add-step-between (parentId = loop step id, position = parent + 1). */
22131
22162
  onAddStepEmpty() {
22132
22163
  this.addStep.emit({ loopStepConfig: this.config });
@@ -22399,13 +22430,13 @@ class TestCaseLoopStepComponent {
22399
22430
  /** Default max for Loop Start / End when no profile selected (options 1..10) */
22400
22431
  TestCaseLoopStepComponent.DEFAULT_LOOP_OPTIONS_MAX = 10;
22401
22432
  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 });
22402
- TestCaseLoopStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestCaseLoopStepComponent, selector: "cqa-test-case-loop-step", inputs: { config: "config", id: "id", loopType: "loopType", stepNumber: "stepNumber", condition: "condition", maxIterations: "maxIterations", testDataProfile: "testDataProfile", startStep: "startStep", endStep: "endStep", nestedSteps: "nestedSteps", expanded: "expanded", isNested: "isNested", isInsideLoop: "isInsideLoop", isInsideStepGroup: "isInsideStepGroup", isReorder: "isReorder", selected: "selected", dataProfileOptions: "dataProfileOptions", hasMoreDataProfiles: "hasMoreDataProfiles", isLoadingDataProfiles: "isLoadingDataProfiles", naturalTextActionsOptions: "naturalTextActionsOptions", setConditionTemplateVariables: "setConditionTemplateVariables", addStepBetweenAbove: "addStepBetweenAbove", addStepBetweenBelow: "addStepBetweenBelow", addStepBetween: "addStepBetween" }, outputs: { toggleExpanded: "toggleExpanded", testDataProfileChange: "testDataProfileChange", startStepChange: "startStepChange", endStepChange: "endStepChange", conditionChange: "conditionChange", maxIterationsChange: "maxIterationsChange", nestedStepChange: "nestedStepChange", addStep: "addStep", deleteStep: "deleteStep", duplicate: "duplicate", delete: "delete", moreOptions: "moreOptions", viewDetails: "viewDetails", editInDepth: "editInDepth", edit: "edit", dndDropInZone: "dndDropInZone", loadMoreDataProfiles: "loadMoreDataProfiles", searchDataProfiles: "searchDataProfiles", stepUpdate: "stepUpdate", clickAction: "clickAction", addStepBetweenClick: "addStepBetweenClick", selectionChange: "selectionChange" }, 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\">\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]=\"editForm.get('condition')?.value ?? ''\"\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 (shown when template is selected, same as condition-step) -->\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 <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\">{{ variable.label }}</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 <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]=\"templateVariablesForm\"\n [config]=\"getSelectConfigForVariable(variable)\">\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 [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 </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 ' + (isInsideLoop ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4')\">\n <div 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 isReorder is false) -->\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 <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 Controls (only show Test Data profile / Start / End when values are set) -->\n <div *ngIf=\"loopType === 'for' && (hasTestDataProfile() || hasStartValue() || hasEndValue())\" class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-ml-2\">\n <!-- Test Data Profile Button -->\n <button *ngIf=\"hasTestDataProfile()\" type=\"button\" [class.cqa-bg-primary-100]=\"testDataProfile\" [class.cqa-text-primary]=\"testDataProfile\"\n class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\">\n {{ getTestDataProfileLabel() }}\n </button>\n\n <!-- Start Button -->\n <button *ngIf=\"hasStartValue()\" type=\"button\" [class.cqa-bg-primary-100]=\"startStep\" [class.cqa-text-primary]=\"startStep\"\n class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\">\n {{ getStartStepLabel() }}\n </button>\n\n <!-- End Button -->\n <button *ngIf=\"hasEndValue()\" type=\"button\" [class.cqa-bg-primary-100]=\"endStep\" [class.cqa-text-primary]=\"endStep\"\n class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\">\n {{ getEndStepLabel() }}\n </button>\n </div>\n\n <!-- While Loop Condition (only show if condition exists) -->\n <div *ngIf=\"isWhileLoop() && condition\" class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-ml-2 cqa-flex-1\">\n <span class=\"cqa-text-gray-700 cqa-text-sm\">\n While\n </span>\n <span class=\"cqa-text-gray-900 cqa-text-sm\" [innerHTML]=\"getConditionDisplay()\"></span>\n </div>\n\n <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 <!-- Created Date (from API) - before action icons, format: 25 Feb 2026 -->\n <span *ngIf=\"config.createdDate\" class=\"cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px]\">\n {{ config.createdDate | date:'d MMM yyyy' }}\n </span>\n <!-- Action Icons: Edit, Link, Duplicate, Delete (show on hover; hidden when inside step-group) -->\n <div *ngIf=\"!isInsideStepGroup\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-3 cqa-px-[7px]\">\n <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\"\n class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M7 11.6666H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M9.55208 2.1128C9.7843 1.88058 10.0993 1.75012 10.4277 1.75012C10.7561 1.75012 11.071 1.88058 11.3033 2.1128C11.5355 2.34502 11.6659 2.65998 11.6659 2.98838C11.6659 3.31679 11.5355 3.63175 11.3033 3.86397L4.29742 10.8704C4.15864 11.0092 3.9871 11.1107 3.79867 11.1656L2.12333 11.6544C2.07314 11.669 2.01993 11.6699 1.96928 11.6569C1.91863 11.6439 1.8724 11.6176 1.83543 11.5806C1.79846 11.5437 1.7721 11.4974 1.75913 11.4468C1.74615 11.3961 1.74703 11.3429 1.76167 11.2927L2.2505 9.61738C2.30546 9.42916 2.40698 9.25783 2.54567 9.11922L9.55208 2.1128Z\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </button>\n <!-- <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\"\n class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\"\n stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\"\n stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button> -->\n <button type=\"button\" (click)=\"onDuplicate(); $event.stopPropagation()\" title=\"Duplicate\"\n class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </button>\n <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\"\n class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M1.75 3.5H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M11.0827 3.5V11.6667C11.0827 12.25 10.4993 12.8333 9.91602 12.8333H4.08268C3.49935 12.8333 2.91602 12.25 2.91602 11.6667V3.5\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M4.66602 3.49996V2.33329C4.66602 1.74996 5.24935 1.16663 5.83268 1.16663H8.16602C8.74935 1.16663 9.33268 1.74996 9.33268 2.33329V3.49996\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M5.83398 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M8.16602 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button>\n </div>\n </div>\n </div>\n\n <!-- Expanded Content with Nested Steps (renderer dispatches by step type, n-level nesting) -->\n <div *ngIf=\"expanded\" class=\"cqa-flex cqa-flex-col\">\n <div *ngIf=\"!isReorder\" class=\"cqa-flex cqa-flex-col\">\n <cqa-test-case-details-renderer *ngFor=\"let step of nestedSteps; let i = index\" [step]=\"step\" [index]=\"i\"\n [selected]=\"$any(step).selected\"\n [isNested]=\"true\" [isInsideLoop]=\"true\" [isReorder]=\"isReorder\"\n [addStepBetween]=\"addStepBetween\"\n [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n (nestedStepChange)=\"onNestedStepChange($event.step, $event.index)\"\n (addStep)=\"onAddStep()\" (deleteStep)=\"onDeleteStep($event)\"\n (toggleExpanded)=\"onNestedToggleExpanded($event, step, i)\"\n (groupNameChange)=\"$any(step).groupName = $event; onNestedStepChange(step, i)\"\n (descriptionChange)=\"$any(step).description = $event; onNestedStepChange(step, i)\"\n (reusableChange)=\"$any(step).reusable = $event; onNestedStepChange(step, i)\"\n (openExternal)=\"onNestedStepChange(step, i)\" (edit)=\"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 [dndDropzone]=\"['step']\"\n dndEffectAllowed=\"move\"\n dndDragoverClass=\"dndDragover\"\n (dndDrop)=\"onDndDrop($event)\">\n <div dndPlaceholderRef class=\"step-drag-placeholder-nested cqa-my-1 cqa-min-h-[50px] cqa-border-2 cqa-border-dashed cqa-border-[#3F43EE] cqa-rounded cqa-bg-[rgba(63,67,238,0.08)] cqa-flex cqa-items-center cqa-justify-center cqa-text-[#3F43EE] cqa-text-xs\">Drop here</div>\n <div *ngFor=\"let step of nestedSteps; let i = index\" class=\"nested-step-drag-item\"\n [dndDraggable]=\"step\"\n dndEffectAllowed=\"move\"\n dndType=\"step\">\n <cqa-test-case-details-renderer [step]=\"step\" [index]=\"i\"\n [selected]=\"$any(step).selected\"\n [isNested]=\"true\" [isInsideLoop]=\"true\" [isReorder]=\"isReorder\"\n [addStepBetweenAbove]=\"addStepBetweenAbove\"\n [addStepBetweenBelow]=\"addStepBetweenBelow\"\n [addStepBetween]=\"addStepBetween\"\n [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n (nestedStepChange)=\"onNestedStepChange($event.step, $event.index)\"\n (addStep)=\"onAddStep()\" (deleteStep)=\"onDeleteStep($event)\"\n (toggleExpanded)=\"onNestedToggleExpanded($event, step, i)\"\n (groupNameChange)=\"$any(step).groupName = $event; onNestedStepChange(step, i)\"\n (descriptionChange)=\"$any(step).description = $event; onNestedStepChange(step, i)\"\n (reusableChange)=\"$any(step).reusable = $event; onNestedStepChange(step, i)\"\n (openExternal)=\"onNestedStepChange(step, i)\" (edit)=\"onNestedStepChange(step, i)\"\n (link)=\"onNestedStepChange(step, i)\" (duplicate)=\"onNestedStepChange(step, i)\" (delete)=\"onDeleteStep($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 <div *ngIf=\"nestedSteps.length === 0\" 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 -->\n <div\n [class]=\"'cqa-pl-4 cqa-py-1 cqa-bg-[#DBEAFE80] cqa-text-[#1C398E] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium'\"\n style=\"border-top: 1px solid #BEDBFF;\">\n {{ getEndLabel() }}\n </div>\n </div>\n</div>", styles: [".step-actions{opacity:0;transition:opacity .15s ease}.step-row:hover .step-actions{opacity:1}\n", ".loop-step-empty{opacity:0;transition:opacity .1s ease}.loop-step-row:hover .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"], 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"], outputs: ["valueChange", "optionSelect", "cleared"] }, { type: i4$2.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: 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", "branch", "isReorder", "selected", "addStepBetweenAbove", "addStepBetweenBelow", "addStepBetween", "dataProfileOptions", "hasMoreDataProfiles", "isLoadingDataProfiles", "naturalTextActionsOptions", "setConditionTemplateVariables"], outputs: ["nestedStepChange", "addStep", "deleteStep", "toggleExpanded", "groupNameChange", "descriptionChange", "reusableChange", "openExternal", "edit", "link", "duplicate", "delete", "viewDetails", "selectionChange", "conditionChange", "branchStepChange", "addStepForBranch", "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: i9.DndDropzoneDirective, selector: "[dndDropzone]", inputs: ["dndDropzone", "dndEffectAllowed", "dndAllowExternal", "dndHorizontal", "dndDragoverClass", "dndDropzoneDisabledClass", "dndDisableIf", "dndDisableDropIf"], outputs: ["dndDragover", "dndDrop"] }, { type: i9.DndPlaceholderRefDirective, selector: "[dndPlaceholderRef]" }, { type: i9.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 } });
22433
+ TestCaseLoopStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestCaseLoopStepComponent, selector: "cqa-test-case-loop-step", inputs: { config: "config", id: "id", loopType: "loopType", stepNumber: "stepNumber", condition: "condition", maxIterations: "maxIterations", testDataProfile: "testDataProfile", startStep: "startStep", endStep: "endStep", nestedSteps: "nestedSteps", expanded: "expanded", isNested: "isNested", isInsideLoop: "isInsideLoop", isInsideStepGroup: "isInsideStepGroup", isReorder: "isReorder", selected: "selected", dataProfileOptions: "dataProfileOptions", hasMoreDataProfiles: "hasMoreDataProfiles", isLoadingDataProfiles: "isLoadingDataProfiles", naturalTextActionsOptions: "naturalTextActionsOptions", setConditionTemplateVariables: "setConditionTemplateVariables", addStepBetweenAbove: "addStepBetweenAbove", addStepBetweenBelow: "addStepBetweenBelow", addStepBetween: "addStepBetween" }, outputs: { toggleExpanded: "toggleExpanded", testDataProfileChange: "testDataProfileChange", startStepChange: "startStepChange", endStepChange: "endStepChange", conditionChange: "conditionChange", maxIterationsChange: "maxIterationsChange", nestedStepChange: "nestedStepChange", addStep: "addStep", deleteStep: "deleteStep", duplicate: "duplicate", delete: "delete", moreOptions: "moreOptions", viewDetails: "viewDetails", editInDepth: "editInDepth", edit: "edit", dndDropInZone: "dndDropInZone", loadMoreDataProfiles: "loadMoreDataProfiles", searchDataProfiles: "searchDataProfiles", stepUpdate: "stepUpdate", clickAction: "clickAction", addStepBetweenClick: "addStepBetweenClick", selectionChange: "selectionChange" }, 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\">\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 (shown when template is selected, same as condition-step) -->\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 <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\">{{ variable.label }}</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 <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]=\"templateVariablesForm\"\n [config]=\"getSelectConfigForVariable(variable)\">\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 [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 </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 ' + (isInsideLoop && isInsideStepGroup ? 'cqa-pl-20 cqa-pr-4' : (isInsideLoop || isInsideStepGroup) ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4')\">\n <div 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 isReorder is false) -->\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 <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 Controls (only show Test Data profile / Start / End when values are set) -->\n <div *ngIf=\"loopType === 'for' && (hasTestDataProfile() || hasStartValue() || hasEndValue())\" class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-ml-2\">\n <!-- Test Data Profile Button -->\n <button *ngIf=\"hasTestDataProfile()\" type=\"button\" [class.cqa-bg-primary-100]=\"testDataProfile\" [class.cqa-text-primary]=\"testDataProfile\"\n class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\">\n {{ getTestDataProfileLabel() }}\n </button>\n\n <!-- Start Button -->\n <button *ngIf=\"hasStartValue()\" type=\"button\" [class.cqa-bg-primary-100]=\"startStep\" [class.cqa-text-primary]=\"startStep\"\n class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\">\n {{ getStartStepLabel() }}\n </button>\n\n <!-- End Button -->\n <button *ngIf=\"hasEndValue()\" type=\"button\" [class.cqa-bg-primary-100]=\"endStep\" [class.cqa-text-primary]=\"endStep\"\n class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\">\n {{ getEndStepLabel() }}\n </button>\n </div>\n\n <!-- While Loop Condition (only show if condition exists) -->\n <div *ngIf=\"isWhileLoop() && condition\" class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-ml-2 cqa-flex-1\">\n <span class=\"cqa-text-gray-700 cqa-text-sm\">\n While\n </span>\n <span class=\"cqa-text-gray-900 cqa-text-sm\" [innerHTML]=\"getConditionDisplay()\"></span>\n </div>\n\n <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 <!-- Created Date (from API) - before action icons, format: 25 Feb 2026 -->\n <span *ngIf=\"config.createdDate\" class=\"cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px]\">\n {{ config.createdDate | date:'d MMM yyyy' }}\n </span>\n <!-- Action Icons: Edit, Link, Duplicate, Delete (show on hover; hidden when inside step-group) -->\n <div *ngIf=\"!isInsideStepGroup\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-3 cqa-px-[7px]\">\n <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\"\n class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M7 11.6666H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M9.55208 2.1128C9.7843 1.88058 10.0993 1.75012 10.4277 1.75012C10.7561 1.75012 11.071 1.88058 11.3033 2.1128C11.5355 2.34502 11.6659 2.65998 11.6659 2.98838C11.6659 3.31679 11.5355 3.63175 11.3033 3.86397L4.29742 10.8704C4.15864 11.0092 3.9871 11.1107 3.79867 11.1656L2.12333 11.6544C2.07314 11.669 2.01993 11.6699 1.96928 11.6569C1.91863 11.6439 1.8724 11.6176 1.83543 11.5806C1.79846 11.5437 1.7721 11.4974 1.75913 11.4468C1.74615 11.3961 1.74703 11.3429 1.76167 11.2927L2.2505 9.61738C2.30546 9.42916 2.40698 9.25783 2.54567 9.11922L9.55208 2.1128Z\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </button>\n <!-- <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\"\n class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\"\n stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\"\n stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button> -->\n <button type=\"button\" (click)=\"onDuplicate(); $event.stopPropagation()\" title=\"Duplicate\"\n class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </button>\n <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\"\n class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M1.75 3.5H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M11.0827 3.5V11.6667C11.0827 12.25 10.4993 12.8333 9.91602 12.8333H4.08268C3.49935 12.8333 2.91602 12.25 2.91602 11.6667V3.5\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M4.66602 3.49996V2.33329C4.66602 1.74996 5.24935 1.16663 5.83268 1.16663H8.16602C8.74935 1.16663 9.33268 1.74996 9.33268 2.33329V3.49996\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M5.83398 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M8.16602 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button>\n </div>\n </div>\n </div>\n\n <!-- Expanded Content with Nested Steps (renderer dispatches by step type, n-level nesting) -->\n <div *ngIf=\"expanded\" class=\"cqa-flex cqa-flex-col\">\n <div *ngIf=\"!isReorder\" class=\"cqa-flex cqa-flex-col\">\n <cqa-test-case-details-renderer *ngFor=\"let step of nestedSteps; let i = index\" [step]=\"step\" [index]=\"i\"\n [selected]=\"$any(step).selected\"\n [isNested]=\"true\" [isInsideLoop]=\"true\" [isReorder]=\"isReorder\"\n [addStepBetween]=\"addStepBetween\"\n [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n (nestedStepChange)=\"onNestedStepChange($event.step, $event.index)\"\n (addStep)=\"onAddStep()\" (addStepForLoop)=\"onAddStepForLoopFromNested($event)\" (deleteStep)=\"onDeleteStep($event)\"\n (toggleExpanded)=\"onNestedToggleExpanded($event, step, i)\"\n (groupNameChange)=\"$any(step).groupName = $event; onNestedStepChange(step, i)\"\n (descriptionChange)=\"$any(step).description = $event; onNestedStepChange(step, i)\"\n (reusableChange)=\"$any(step).reusable = $event; onNestedStepChange(step, i)\"\n (openExternal)=\"onNestedStepChange(step, i)\" (edit)=\"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 [dndDropzone]=\"['step']\"\n dndEffectAllowed=\"move\"\n dndDragoverClass=\"dndDragover\"\n (dndDrop)=\"onDndDrop($event)\">\n <div dndPlaceholderRef class=\"step-drag-placeholder-nested cqa-my-1 cqa-min-h-[50px] cqa-border-2 cqa-border-dashed cqa-border-[#3F43EE] cqa-rounded cqa-bg-[rgba(63,67,238,0.08)] cqa-flex cqa-items-center cqa-justify-center cqa-text-[#3F43EE] cqa-text-xs\">Drop here</div>\n <div *ngFor=\"let step of nestedSteps; let i = index\" class=\"nested-step-drag-item\"\n [dndDraggable]=\"step\"\n dndEffectAllowed=\"move\"\n dndType=\"step\">\n <cqa-test-case-details-renderer [step]=\"step\" [index]=\"i\"\n [selected]=\"$any(step).selected\"\n [isNested]=\"true\" [isInsideLoop]=\"true\" [isReorder]=\"isReorder\"\n [addStepBetweenAbove]=\"addStepBetweenAbove\"\n [addStepBetweenBelow]=\"addStepBetweenBelow\"\n [addStepBetween]=\"addStepBetween\"\n [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n (nestedStepChange)=\"onNestedStepChange($event.step, $event.index)\"\n (addStep)=\"onAddStep()\" (addStepForLoop)=\"onAddStepForLoopFromNested($event)\" (deleteStep)=\"onDeleteStep($event)\"\n (toggleExpanded)=\"onNestedToggleExpanded($event, step, i)\"\n (groupNameChange)=\"$any(step).groupName = $event; onNestedStepChange(step, i)\"\n (descriptionChange)=\"$any(step).description = $event; onNestedStepChange(step, i)\"\n (reusableChange)=\"$any(step).reusable = $event; onNestedStepChange(step, i)\"\n (openExternal)=\"onNestedStepChange(step, i)\" (edit)=\"onNestedStepChange(step, i)\"\n (link)=\"onNestedStepChange(step, i)\" (duplicate)=\"onNestedStepChange(step, i)\" (delete)=\"onDeleteStep($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 <div *ngIf=\"nestedSteps.length === 0\" 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 -->\n <div\n [class]=\"'cqa-pl-4 cqa-py-1 cqa-bg-[#DBEAFE80] cqa-text-[#1C398E] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium'\"\n style=\"border-top: 1px solid #BEDBFF;\">\n {{ getEndLabel() }}\n </div>\n </div>\n</div>", styles: [".step-actions{opacity:0;transition:opacity .15s ease}.step-row:hover .step-actions{opacity:1}\n", ".loop-step-empty{opacity:0;transition:opacity .1s ease}.loop-step-row:hover .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"], 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"], outputs: ["valueChange", "optionSelect", "cleared"] }, { type: i4$2.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: 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", "branch", "isReorder", "selected", "addStepBetweenAbove", "addStepBetweenBelow", "addStepBetween", "dataProfileOptions", "hasMoreDataProfiles", "isLoadingDataProfiles", "naturalTextActionsOptions", "setConditionTemplateVariables"], outputs: ["nestedStepChange", "addStep", "deleteStep", "toggleExpanded", "groupNameChange", "descriptionChange", "reusableChange", "openExternal", "edit", "link", "duplicate", "delete", "viewDetails", "selectionChange", "conditionChange", "branchStepChange", "addStepForBranch", "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: i9.DndDropzoneDirective, selector: "[dndDropzone]", inputs: ["dndDropzone", "dndEffectAllowed", "dndAllowExternal", "dndHorizontal", "dndDragoverClass", "dndDropzoneDisabledClass", "dndDisableIf", "dndDisableDropIf"], outputs: ["dndDragover", "dndDrop"] }, { type: i9.DndPlaceholderRefDirective, selector: "[dndPlaceholderRef]" }, { type: i9.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 } });
22403
22434
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseLoopStepComponent, decorators: [{
22404
22435
  type: Component,
22405
22436
  args: [{ selector: 'cqa-test-case-loop-step', host: { class: 'cqa-ui-root' }, styles: [
22406
22437
  STEP_ROW_ACTIONS_STYLES,
22407
22438
  LOOP_STEP_EMPTY_STYLES,
22408
- ], 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\">\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]=\"editForm.get('condition')?.value ?? ''\"\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 (shown when template is selected, same as condition-step) -->\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 <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\">{{ variable.label }}</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 <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]=\"templateVariablesForm\"\n [config]=\"getSelectConfigForVariable(variable)\">\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 [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 </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 ' + (isInsideLoop ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4')\">\n <div 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 isReorder is false) -->\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 <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 Controls (only show Test Data profile / Start / End when values are set) -->\n <div *ngIf=\"loopType === 'for' && (hasTestDataProfile() || hasStartValue() || hasEndValue())\" class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-ml-2\">\n <!-- Test Data Profile Button -->\n <button *ngIf=\"hasTestDataProfile()\" type=\"button\" [class.cqa-bg-primary-100]=\"testDataProfile\" [class.cqa-text-primary]=\"testDataProfile\"\n class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\">\n {{ getTestDataProfileLabel() }}\n </button>\n\n <!-- Start Button -->\n <button *ngIf=\"hasStartValue()\" type=\"button\" [class.cqa-bg-primary-100]=\"startStep\" [class.cqa-text-primary]=\"startStep\"\n class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\">\n {{ getStartStepLabel() }}\n </button>\n\n <!-- End Button -->\n <button *ngIf=\"hasEndValue()\" type=\"button\" [class.cqa-bg-primary-100]=\"endStep\" [class.cqa-text-primary]=\"endStep\"\n class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\">\n {{ getEndStepLabel() }}\n </button>\n </div>\n\n <!-- While Loop Condition (only show if condition exists) -->\n <div *ngIf=\"isWhileLoop() && condition\" class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-ml-2 cqa-flex-1\">\n <span class=\"cqa-text-gray-700 cqa-text-sm\">\n While\n </span>\n <span class=\"cqa-text-gray-900 cqa-text-sm\" [innerHTML]=\"getConditionDisplay()\"></span>\n </div>\n\n <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 <!-- Created Date (from API) - before action icons, format: 25 Feb 2026 -->\n <span *ngIf=\"config.createdDate\" class=\"cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px]\">\n {{ config.createdDate | date:'d MMM yyyy' }}\n </span>\n <!-- Action Icons: Edit, Link, Duplicate, Delete (show on hover; hidden when inside step-group) -->\n <div *ngIf=\"!isInsideStepGroup\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-3 cqa-px-[7px]\">\n <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\"\n class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M7 11.6666H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M9.55208 2.1128C9.7843 1.88058 10.0993 1.75012 10.4277 1.75012C10.7561 1.75012 11.071 1.88058 11.3033 2.1128C11.5355 2.34502 11.6659 2.65998 11.6659 2.98838C11.6659 3.31679 11.5355 3.63175 11.3033 3.86397L4.29742 10.8704C4.15864 11.0092 3.9871 11.1107 3.79867 11.1656L2.12333 11.6544C2.07314 11.669 2.01993 11.6699 1.96928 11.6569C1.91863 11.6439 1.8724 11.6176 1.83543 11.5806C1.79846 11.5437 1.7721 11.4974 1.75913 11.4468C1.74615 11.3961 1.74703 11.3429 1.76167 11.2927L2.2505 9.61738C2.30546 9.42916 2.40698 9.25783 2.54567 9.11922L9.55208 2.1128Z\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </button>\n <!-- <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\"\n class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\"\n stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\"\n stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button> -->\n <button type=\"button\" (click)=\"onDuplicate(); $event.stopPropagation()\" title=\"Duplicate\"\n class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </button>\n <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\"\n class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M1.75 3.5H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M11.0827 3.5V11.6667C11.0827 12.25 10.4993 12.8333 9.91602 12.8333H4.08268C3.49935 12.8333 2.91602 12.25 2.91602 11.6667V3.5\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M4.66602 3.49996V2.33329C4.66602 1.74996 5.24935 1.16663 5.83268 1.16663H8.16602C8.74935 1.16663 9.33268 1.74996 9.33268 2.33329V3.49996\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M5.83398 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M8.16602 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button>\n </div>\n </div>\n </div>\n\n <!-- Expanded Content with Nested Steps (renderer dispatches by step type, n-level nesting) -->\n <div *ngIf=\"expanded\" class=\"cqa-flex cqa-flex-col\">\n <div *ngIf=\"!isReorder\" class=\"cqa-flex cqa-flex-col\">\n <cqa-test-case-details-renderer *ngFor=\"let step of nestedSteps; let i = index\" [step]=\"step\" [index]=\"i\"\n [selected]=\"$any(step).selected\"\n [isNested]=\"true\" [isInsideLoop]=\"true\" [isReorder]=\"isReorder\"\n [addStepBetween]=\"addStepBetween\"\n [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n (nestedStepChange)=\"onNestedStepChange($event.step, $event.index)\"\n (addStep)=\"onAddStep()\" (deleteStep)=\"onDeleteStep($event)\"\n (toggleExpanded)=\"onNestedToggleExpanded($event, step, i)\"\n (groupNameChange)=\"$any(step).groupName = $event; onNestedStepChange(step, i)\"\n (descriptionChange)=\"$any(step).description = $event; onNestedStepChange(step, i)\"\n (reusableChange)=\"$any(step).reusable = $event; onNestedStepChange(step, i)\"\n (openExternal)=\"onNestedStepChange(step, i)\" (edit)=\"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 [dndDropzone]=\"['step']\"\n dndEffectAllowed=\"move\"\n dndDragoverClass=\"dndDragover\"\n (dndDrop)=\"onDndDrop($event)\">\n <div dndPlaceholderRef class=\"step-drag-placeholder-nested cqa-my-1 cqa-min-h-[50px] cqa-border-2 cqa-border-dashed cqa-border-[#3F43EE] cqa-rounded cqa-bg-[rgba(63,67,238,0.08)] cqa-flex cqa-items-center cqa-justify-center cqa-text-[#3F43EE] cqa-text-xs\">Drop here</div>\n <div *ngFor=\"let step of nestedSteps; let i = index\" class=\"nested-step-drag-item\"\n [dndDraggable]=\"step\"\n dndEffectAllowed=\"move\"\n dndType=\"step\">\n <cqa-test-case-details-renderer [step]=\"step\" [index]=\"i\"\n [selected]=\"$any(step).selected\"\n [isNested]=\"true\" [isInsideLoop]=\"true\" [isReorder]=\"isReorder\"\n [addStepBetweenAbove]=\"addStepBetweenAbove\"\n [addStepBetweenBelow]=\"addStepBetweenBelow\"\n [addStepBetween]=\"addStepBetween\"\n [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n (nestedStepChange)=\"onNestedStepChange($event.step, $event.index)\"\n (addStep)=\"onAddStep()\" (deleteStep)=\"onDeleteStep($event)\"\n (toggleExpanded)=\"onNestedToggleExpanded($event, step, i)\"\n (groupNameChange)=\"$any(step).groupName = $event; onNestedStepChange(step, i)\"\n (descriptionChange)=\"$any(step).description = $event; onNestedStepChange(step, i)\"\n (reusableChange)=\"$any(step).reusable = $event; onNestedStepChange(step, i)\"\n (openExternal)=\"onNestedStepChange(step, i)\" (edit)=\"onNestedStepChange(step, i)\"\n (link)=\"onNestedStepChange(step, i)\" (duplicate)=\"onNestedStepChange(step, i)\" (delete)=\"onDeleteStep($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 <div *ngIf=\"nestedSteps.length === 0\" 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 -->\n <div\n [class]=\"'cqa-pl-4 cqa-py-1 cqa-bg-[#DBEAFE80] cqa-text-[#1C398E] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium'\"\n style=\"border-top: 1px solid #BEDBFF;\">\n {{ getEndLabel() }}\n </div>\n </div>\n</div>" }]
22439
+ ], 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\">\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 (shown when template is selected, same as condition-step) -->\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 <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\">{{ variable.label }}</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 <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]=\"templateVariablesForm\"\n [config]=\"getSelectConfigForVariable(variable)\">\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 [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 </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 ' + (isInsideLoop && isInsideStepGroup ? 'cqa-pl-20 cqa-pr-4' : (isInsideLoop || isInsideStepGroup) ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4')\">\n <div 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 isReorder is false) -->\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 <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 Controls (only show Test Data profile / Start / End when values are set) -->\n <div *ngIf=\"loopType === 'for' && (hasTestDataProfile() || hasStartValue() || hasEndValue())\" class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-ml-2\">\n <!-- Test Data Profile Button -->\n <button *ngIf=\"hasTestDataProfile()\" type=\"button\" [class.cqa-bg-primary-100]=\"testDataProfile\" [class.cqa-text-primary]=\"testDataProfile\"\n class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\">\n {{ getTestDataProfileLabel() }}\n </button>\n\n <!-- Start Button -->\n <button *ngIf=\"hasStartValue()\" type=\"button\" [class.cqa-bg-primary-100]=\"startStep\" [class.cqa-text-primary]=\"startStep\"\n class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\">\n {{ getStartStepLabel() }}\n </button>\n\n <!-- End Button -->\n <button *ngIf=\"hasEndValue()\" type=\"button\" [class.cqa-bg-primary-100]=\"endStep\" [class.cqa-text-primary]=\"endStep\"\n class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\">\n {{ getEndStepLabel() }}\n </button>\n </div>\n\n <!-- While Loop Condition (only show if condition exists) -->\n <div *ngIf=\"isWhileLoop() && condition\" class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-ml-2 cqa-flex-1\">\n <span class=\"cqa-text-gray-700 cqa-text-sm\">\n While\n </span>\n <span class=\"cqa-text-gray-900 cqa-text-sm\" [innerHTML]=\"getConditionDisplay()\"></span>\n </div>\n\n <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 <!-- Created Date (from API) - before action icons, format: 25 Feb 2026 -->\n <span *ngIf=\"config.createdDate\" class=\"cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px]\">\n {{ config.createdDate | date:'d MMM yyyy' }}\n </span>\n <!-- Action Icons: Edit, Link, Duplicate, Delete (show on hover; hidden when inside step-group) -->\n <div *ngIf=\"!isInsideStepGroup\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-3 cqa-px-[7px]\">\n <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\"\n class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M7 11.6666H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M9.55208 2.1128C9.7843 1.88058 10.0993 1.75012 10.4277 1.75012C10.7561 1.75012 11.071 1.88058 11.3033 2.1128C11.5355 2.34502 11.6659 2.65998 11.6659 2.98838C11.6659 3.31679 11.5355 3.63175 11.3033 3.86397L4.29742 10.8704C4.15864 11.0092 3.9871 11.1107 3.79867 11.1656L2.12333 11.6544C2.07314 11.669 2.01993 11.6699 1.96928 11.6569C1.91863 11.6439 1.8724 11.6176 1.83543 11.5806C1.79846 11.5437 1.7721 11.4974 1.75913 11.4468C1.74615 11.3961 1.74703 11.3429 1.76167 11.2927L2.2505 9.61738C2.30546 9.42916 2.40698 9.25783 2.54567 9.11922L9.55208 2.1128Z\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </button>\n <!-- <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\"\n class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\"\n stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\"\n stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button> -->\n <button type=\"button\" (click)=\"onDuplicate(); $event.stopPropagation()\" title=\"Duplicate\"\n class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </button>\n <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\"\n class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M1.75 3.5H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M11.0827 3.5V11.6667C11.0827 12.25 10.4993 12.8333 9.91602 12.8333H4.08268C3.49935 12.8333 2.91602 12.25 2.91602 11.6667V3.5\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M4.66602 3.49996V2.33329C4.66602 1.74996 5.24935 1.16663 5.83268 1.16663H8.16602C8.74935 1.16663 9.33268 1.74996 9.33268 2.33329V3.49996\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M5.83398 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M8.16602 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button>\n </div>\n </div>\n </div>\n\n <!-- Expanded Content with Nested Steps (renderer dispatches by step type, n-level nesting) -->\n <div *ngIf=\"expanded\" class=\"cqa-flex cqa-flex-col\">\n <div *ngIf=\"!isReorder\" class=\"cqa-flex cqa-flex-col\">\n <cqa-test-case-details-renderer *ngFor=\"let step of nestedSteps; let i = index\" [step]=\"step\" [index]=\"i\"\n [selected]=\"$any(step).selected\"\n [isNested]=\"true\" [isInsideLoop]=\"true\" [isReorder]=\"isReorder\"\n [addStepBetween]=\"addStepBetween\"\n [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n (nestedStepChange)=\"onNestedStepChange($event.step, $event.index)\"\n (addStep)=\"onAddStep()\" (addStepForLoop)=\"onAddStepForLoopFromNested($event)\" (deleteStep)=\"onDeleteStep($event)\"\n (toggleExpanded)=\"onNestedToggleExpanded($event, step, i)\"\n (groupNameChange)=\"$any(step).groupName = $event; onNestedStepChange(step, i)\"\n (descriptionChange)=\"$any(step).description = $event; onNestedStepChange(step, i)\"\n (reusableChange)=\"$any(step).reusable = $event; onNestedStepChange(step, i)\"\n (openExternal)=\"onNestedStepChange(step, i)\" (edit)=\"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 [dndDropzone]=\"['step']\"\n dndEffectAllowed=\"move\"\n dndDragoverClass=\"dndDragover\"\n (dndDrop)=\"onDndDrop($event)\">\n <div dndPlaceholderRef class=\"step-drag-placeholder-nested cqa-my-1 cqa-min-h-[50px] cqa-border-2 cqa-border-dashed cqa-border-[#3F43EE] cqa-rounded cqa-bg-[rgba(63,67,238,0.08)] cqa-flex cqa-items-center cqa-justify-center cqa-text-[#3F43EE] cqa-text-xs\">Drop here</div>\n <div *ngFor=\"let step of nestedSteps; let i = index\" class=\"nested-step-drag-item\"\n [dndDraggable]=\"step\"\n dndEffectAllowed=\"move\"\n dndType=\"step\">\n <cqa-test-case-details-renderer [step]=\"step\" [index]=\"i\"\n [selected]=\"$any(step).selected\"\n [isNested]=\"true\" [isInsideLoop]=\"true\" [isReorder]=\"isReorder\"\n [addStepBetweenAbove]=\"addStepBetweenAbove\"\n [addStepBetweenBelow]=\"addStepBetweenBelow\"\n [addStepBetween]=\"addStepBetween\"\n [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n (nestedStepChange)=\"onNestedStepChange($event.step, $event.index)\"\n (addStep)=\"onAddStep()\" (addStepForLoop)=\"onAddStepForLoopFromNested($event)\" (deleteStep)=\"onDeleteStep($event)\"\n (toggleExpanded)=\"onNestedToggleExpanded($event, step, i)\"\n (groupNameChange)=\"$any(step).groupName = $event; onNestedStepChange(step, i)\"\n (descriptionChange)=\"$any(step).description = $event; onNestedStepChange(step, i)\"\n (reusableChange)=\"$any(step).reusable = $event; onNestedStepChange(step, i)\"\n (openExternal)=\"onNestedStepChange(step, i)\" (edit)=\"onNestedStepChange(step, i)\"\n (link)=\"onNestedStepChange(step, i)\" (duplicate)=\"onNestedStepChange(step, i)\" (delete)=\"onDeleteStep($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 <div *ngIf=\"nestedSteps.length === 0\" 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 -->\n <div\n [class]=\"'cqa-pl-4 cqa-py-1 cqa-bg-[#DBEAFE80] cqa-text-[#1C398E] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium'\"\n style=\"border-top: 1px solid #BEDBFF;\">\n {{ getEndLabel() }}\n </div>\n </div>\n</div>" }]
22409
22440
  }], ctorParameters: function () { return [{ type: i1$1.FormBuilder }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { config: [{
22410
22441
  type: Input
22411
22442
  }], id: [{
@@ -22748,6 +22779,27 @@ class TestCaseConditionStepComponent {
22748
22779
  };
22749
22780
  });
22750
22781
  }
22782
+ /** Display value for IF condition autocomplete: show natural text from option matching naturalTextActionId when available (including when form is empty on open), else form value. */
22783
+ get conditionLeftDisplayValue() {
22784
+ const configWithId = this.config;
22785
+ const formValue = this.editForm?.get('conditionLeft')?.value ?? '';
22786
+ const isFormHtml = formValue && (String(formValue).includes('<') || String(formValue).includes('>'));
22787
+ if (configWithId?.naturalTextActionId != null && this.naturalTextActionsOptions?.length) {
22788
+ const matchingOption = this.naturalTextActionsOptions.find((option) => String(option.id) === String(configWithId.naturalTextActionId));
22789
+ if (matchingOption) {
22790
+ const naturalText = matchingOption.naturalText ?? matchingOption.name ?? matchingOption.value ?? '';
22791
+ if (naturalText) {
22792
+ const naturalTextStr = String(naturalText);
22793
+ if (!formValue || formValue === naturalTextStr || isFormHtml)
22794
+ return naturalTextStr;
22795
+ return formValue;
22796
+ }
22797
+ }
22798
+ }
22799
+ if (isFormHtml)
22800
+ return '';
22801
+ return formValue;
22802
+ }
22751
22803
  onConditionLeftSelect(option) {
22752
22804
  this.editForm?.get('conditionLeft')?.setValue(option.value);
22753
22805
  // Get template from option - option.template should contain the full NaturalTextActions object
@@ -23067,6 +23119,11 @@ class TestCaseConditionStepComponent {
23067
23119
  getBranchLabel(branch) {
23068
23120
  return branch.label || (branch.type === 'if' ? 'IF TRUE' : branch.type === 'else-if' ? 'ELSE IF' : 'ELSE');
23069
23121
  }
23122
+ /** Branch display number: condition step number + branch index (e.g. step 3 → branches 3, 4, 5 to match nested 3.1, 4.1, 5.1). */
23123
+ getBranchDisplayNumber(branchIndex) {
23124
+ const stepNum = typeof this.stepNumber === 'number' ? this.stepNumber : parseInt(String(this.stepNumber), 10) || 1;
23125
+ return stepNum + branchIndex;
23126
+ }
23070
23127
  getBranchColorClass(branch) {
23071
23128
  if (branch.type === 'if') {
23072
23129
  return 'cqa-bg-[#0DBD7D1A]';
@@ -23309,13 +23366,13 @@ class TestCaseConditionStepComponent {
23309
23366
  }
23310
23367
  }
23311
23368
  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 });
23312
- TestCaseConditionStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestCaseConditionStepComponent, selector: "cqa-test-case-condition-step", inputs: { config: "config", id: "id", stepNumber: "stepNumber", condition: "condition", branches: "branches", expanded: "expanded", isNested: "isNested", isInsideLoop: "isInsideLoop", isInsideStepGroup: "isInsideStepGroup", isReorder: "isReorder", selected: "selected", dataProfileOptions: "dataProfileOptions", hasMoreDataProfiles: "hasMoreDataProfiles", isLoadingDataProfiles: "isLoadingDataProfiles", naturalTextActionsOptions: "naturalTextActionsOptions", setConditionTemplateVariables: "setConditionTemplateVariables", addStepBetweenAbove: "addStepBetweenAbove", addStepBetweenBelow: "addStepBetweenBelow", addStepBetween: "addStepBetween" }, outputs: { toggleExpanded: "toggleExpanded", conditionChange: "conditionChange", branchStepChange: "branchStepChange", addStep: "addStep", 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" }, 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]' : '')\">\n <!-- Inline Edit Mode: stop propagation so dropdown/autocomplete interactions don't bubble and collapse the step -->\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 <!-- First Row: CONDITION tag, autocomplete, IF/ELSE indicators, Edit In depth, Cancel/Apply -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-justify-between\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-grow\">\n <!-- CONDITION Tag (orange) -->\n <span class=\"cqa-px-1.5 cqa-rounded-md cqa-text-[#EA580C] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-[#FFEDD5]\">\n CONDITION\n </span>\n\n <!-- First field: left operand (e.g. Usertype) - autocomplete with IF_CONDITION natural text actions -->\n <cqa-autocomplete\n *ngIf=\"editForm\"\n [options]=\"conditionLeftAutocompleteOptions\"\n [value]=\"editForm.get('conditionLeft')?.value ?? ''\"\n (valueChange)=\"onEditFormFieldChange('conditionLeft', $event)\"\n (optionSelect)=\"onConditionLeftSelect($event)\"\n placeholder=\"Select condition\"\n [fullWidth]=\"true\"\n class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-autocomplete>\n\n <!-- Second Row: Template Variables Section (shown when template is selected, inline before Edit In depth) -->\n <div *ngIf=\"selectedTemplate && templateVariables && templateVariables.length > 0\" class=\"cqa-flex cqa-flex-row cqa-flex-wrap cqa-gap-3\">\n <ng-container *ngFor=\"let variable of templateVariables\">\n <!-- Boolean variables with mat-slide-toggle -->\n <ng-container *ngIf=\"variable.type === 'boolean'\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700\">\n {{ variable.label }}\n </label>\n <mat-slide-toggle\n [checked]=\"templateVariablesForm.get(variable.name)?.value || variable.value || false\"\n (change)=\"templateVariablesForm.get(variable.name)?.setValue($event.checked)\"\n color=\"primary\">\n </mat-slide-toggle>\n </div>\n </ng-container>\n \n <!-- Non-boolean variables -->\n <ng-container *ngIf=\"variable.type !== 'boolean' && variable.name !== 'custom_code'\">\n <!-- Dropdown for select variables -->\n <ng-container *ngIf=\"variable.name === 'type' || variable.name === 'scrollTo' || variable.options\">\n <div class=\"cqa-flex cqa-flex-col\" style=\"min-width: 150px;\">\n <!-- <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n {{ variable.label }}\n </label> -->\n <cqa-dynamic-select \n [form]=\"templateVariablesForm\"\n [config]=\"getSelectConfigForVariable(variable, false)\">\n </cqa-dynamic-select>\n </div>\n </ng-container>\n <!-- Text Input for other variables -->\n <ng-container *ngIf=\"variable.name !== 'type' && variable.name !== 'scrollTo' && !variable.options\">\n <div class=\"cqa-flex cqa-flex-col\" style=\"min-width: 150px;\">\n <!-- <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n {{ variable.label }}\n </label> -->\n <cqa-custom-input\n [placeholder]=\"'Enter ' + variable.label\"\n [value]=\"templateVariablesForm.get(variable.name)?.value || variable.value || ''\"\n [fullWidth]=\"true\"\n (valueChange)=\"templateVariablesForm.get(variable.name)?.setValue($event)\">\n </cqa-custom-input>\n </div>\n </ng-container>\n </ng-container>\n </ng-container>\n </div>\n\n <!-- IF / ELSE indicators -->\n <span class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#DCFCE7] cqa-text-[#008236] cqa-border cqa-border-solid cqa-border-[#B9F8CF] cqa-flex cqa-items-center cqa-gap-1.5\">\n <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6.66634 2L2.99967 5.66667L1.33301 4\" stroke=\"#008236\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n IF\n </span>\n <!-- Add ELSE IF button - always visible -->\n <button\n type=\"button\"\n (click)=\"onAddElse()\"\n class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-cursor-pointer cqa-transition-colors\">\n Add ELSE IF\n </button>\n <!-- Add Else button - calls API to create CONDITION_ELSE step -->\n <button\n type=\"button\"\n (click)=\"onAddElseBranch()\"\n class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-cursor-pointer cqa-transition-colors\">\n Add ELSE\n </button>\n\n <!-- Edit In depth link -->\n <a href=\"#\" (click)=\"onEditInDepth(); $event.preventDefault()\"\n class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-[2px] cqa-no-underline\">\n Edit In depth\n <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg>\n </a> \n </div>\n <!-- Cancel / Apply buttons - shown on IF row when no ELSE IF branches are present -->\n <div *ngIf=\"elseIfBranches.length === 0\" class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <cqa-button variant=\"outlined\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Cancel'\" (clicked)=\"onEditCancel()\"></cqa-button>\n <cqa-button variant=\"filled\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Apply'\" (clicked)=\"onEditApply()\"></cqa-button>\n </div>\n </div>\n \n \n </div>\n\n <!-- ELSE IF Sections in Edit Mode - Loop through all ELSE IF branches -->\n <ng-container *ngFor=\"let branch of elseIfBranches; let i = index\">\n <div *ngIf=\"isEditing\" class=\"cqa-py-2.5 cqa-px-4 cqa-flex cqa-flex-col cqa-gap-3 cqa-border-t cqa-border-solid cqa-border-[#E5E7EB]\">\n <!-- First Row: Remove ELSE IF button, autocomplete, Edit In depth, Cancel/Apply -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-justify-between\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-grow\">\n <!-- Remove ELSE IF button -->\n <button\n type=\"button\"\n (click)=\"onRemoveElse(branch.id)\"\n class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#F3F4F6] cqa-text-[#99A1AF] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-cursor-pointer hover:cqa-bg-[#E5E7EB] cqa-transition-colors\">\n Remove ELSE IF\n </button>\n\n <!-- ELSE IF autocomplete field: same as IF condition -->\n <cqa-autocomplete\n *ngIf=\"branch.form\"\n [options]=\"conditionLeftAutocompleteOptions\"\n [value]=\"branch.form.get('conditionLeft')?.value ?? ''\"\n (valueChange)=\"branch.form.get('conditionLeft')?.setValue($event)\"\n (optionSelect)=\"onElseConditionLeftSelect($event, branch.id)\"\n placeholder=\"Select condition\"\n [fullWidth]=\"true\"\n class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-autocomplete>\n \n <!-- Second Row: ELSE IF Template Variables Section (shown when template is selected, inline before Edit In depth) -->\n <div *ngIf=\"branch.selectedTemplate && branch.templateVariables && branch.templateVariables.length > 0\" class=\"cqa-flex cqa-flex-row cqa-flex-wrap cqa-gap-3\">\n <ng-container *ngFor=\"let variable of branch.templateVariables\">\n <!-- Boolean variables with mat-slide-toggle -->\n <ng-container *ngIf=\"variable.type === 'boolean'\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <!-- <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700\">\n {{ variable.label }}\n </label> -->\n <mat-slide-toggle\n [checked]=\"branch.templateVariablesForm.get(variable.name)?.value || variable.value || false\"\n (change)=\"branch.templateVariablesForm.get(variable.name)?.setValue($event.checked)\"\n color=\"primary\">\n </mat-slide-toggle>\n </div>\n </ng-container>\n \n <!-- Non-boolean variables -->\n <ng-container *ngIf=\"variable.type !== 'boolean' && variable.name !== 'custom_code'\">\n <!-- Dropdown for select variables -->\n <ng-container *ngIf=\"variable.name === 'type' || variable.name === 'scrollTo' || variable.options\">\n <div class=\"cqa-flex cqa-flex-col\" style=\"min-width: 150px;\">\n <!-- <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n {{ variable.label }}\n </label> -->\n <cqa-dynamic-select \n [form]=\"branch.templateVariablesForm\"\n [config]=\"getSelectConfigForVariable(variable, branch.id)\">\n </cqa-dynamic-select>\n </div>\n </ng-container>\n \n <!-- Text Input for other variables -->\n <ng-container *ngIf=\"variable.name !== 'type' && variable.name !== 'scrollTo' && !variable.options\">\n <div class=\"cqa-flex cqa-flex-col\" style=\"min-width: 150px;\">\n <!-- <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n {{ variable.label }}\n </label> -->\n <cqa-custom-input\n [value]=\"branch.templateVariablesForm.get(variable.name)?.value || variable.value || ''\"\n (valueChange)=\"branch.templateVariablesForm.get(variable.name)?.setValue($event)\"\n [placeholder]=\"variable.label\">\n </cqa-custom-input>\n </div>\n </ng-container>\n </ng-container>\n </ng-container>\n </div>\n\n <!-- Edit In depth link -->\n <a href=\"#\" (click)=\"onEditInDepth(); $event.preventDefault()\"\n class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-[2px] cqa-no-underline\">\n Edit In depth\n <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg>\n </a>\n </div>\n <!-- Cancel / Apply buttons - shown in last ELSE IF row -->\n <div *ngIf=\"i === elseIfBranches.length - 1\" class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <cqa-button variant=\"outlined\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Cancel'\" (clicked)=\"onEditCancel()\"></cqa-button>\n <cqa-button variant=\"filled\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Apply'\" (clicked)=\"onEditApply()\"></cqa-button>\n </div>\n </div>\n </div>\n </ng-container>\n\n <!-- Condition Header (normal view when not editing) -->\n <div *ngIf=\"!isEditing\" [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 ' + (isInsideLoop ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4')\">\n <!-- Drag Handle Icon (when isReorder is true) -->\n <div class=\"cqa-inline-flex cqa-items-center\">\n <div *ngIf=\"isReorder\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n </svg>\n </div>\n <!-- Checkbox (when isReorder is false) -->\n <label *ngIf=\"!isReorder\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative 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 <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 IF / ELSE\n </span>\n\n <!-- Condition Input and event key-value details (exclude customEvent) -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-ml-2 cqa-flex-1 cqa-flex-wrap\">\n <span [innerHTML]=\"condition\"></span>\n <ng-container *ngIf=\"getEventDetailsForDisplay().length > 0\">\n <span *ngFor=\"let item of getEventDetailsForDisplay()\" 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]\">\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 <!-- <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px]\">\n If\n </span>\n <span\n class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\">.success-message</span>\n <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px]\">\n is visible\n </span> -->\n <!-- <input\n type=\"text\"\n [value]=\"condition\"\n (input)=\"onConditionChange($any($event.target).value)\"\n placeholder=\"element `.success-message` is visible\"\n class=\"cqa-px-3 cqa-py-1.5 cqa-rounded-lg cqa-border cqa-border-gray-300 cqa-bg-white cqa-text-gray-900 cqa-text-sm cqa-flex-1 cqa-max-w-md cqa-outline-none focus:cqa-ring-2 focus:cqa-ring-primary focus:cqa-ring-opacity-50\"\n /> -->\n </div>\n\n <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 <!-- Created Date (from API) - before action icons, format: 25 Feb 2026 -->\n <span *ngIf=\"config.createdDate\" class=\"cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px]\">\n {{ config.createdDate | date:'d MMM yyyy' }}\n </span>\n <!-- Action Icons: Edit, Link, Duplicate, Delete (show on hover; hidden when inside step-group) -->\n <div *ngIf=\"!isInsideStepGroup\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-3 cqa-px-[7px]\">\n <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M7 11.6666H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M9.55208 2.1128C9.7843 1.88058 10.0993 1.75012 10.4277 1.75012C10.7561 1.75012 11.071 1.88058 11.3033 2.1128C11.5355 2.34502 11.6659 2.65998 11.6659 2.98838C11.6659 3.31679 11.5355 3.63175 11.3033 3.86397L4.29742 10.8704C4.15864 11.0092 3.9871 11.1107 3.79867 11.1656L2.12333 11.6544C2.07314 11.669 2.01993 11.6699 1.96928 11.6569C1.91863 11.6439 1.8724 11.6176 1.83543 11.5806C1.79846 11.5437 1.7721 11.4974 1.75913 11.4468C1.74615 11.3961 1.74703 11.3429 1.76167 11.2927L2.2505 9.61738C2.30546 9.42916 2.40698 9.25783 2.54567 9.11922L9.55208 2.1128Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </button>\n <!-- <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </button> -->\n <!-- <button type=\"button\" (click)=\"onDuplicate(); $event.stopPropagation()\" title=\"Duplicate\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </button> -->\n <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\" class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1.75 3.5H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11.0827 3.5V11.6667C11.0827 12.25 10.4993 12.8333 9.91602 12.8333H4.08268C3.49935 12.8333 2.91602 12.25 2.91602 11.6667V3.5\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.66602 3.49996V2.33329C4.66602 1.74996 5.24935 1.16663 5.83268 1.16663H8.16602C8.74935 1.16663 9.33268 1.74996 9.33268 2.33329V3.49996\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M5.83398 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M8.16602 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </button>\n </div>\n </div>\n </div>\n\n <!-- Expanded Content with Branches -->\n <div *ngIf=\"expanded\" class=\"cqa-flex cqa-flex-col\">\n <!-- Branches (IF TRUE, ELSE IF, ELSE) -->\n <div *ngFor=\"let branch of branches; let branchIndex = index\" class=\"condition-branch-row cqa-flex cqa-flex-col\">\n <!-- Branch Header (2 = ELSE IF, 3 = ELSE; sub steps show 1.1, 2.1, 3.1 from step config) -->\n <div\n [class]=\"'cqa-px-4 cqa-py-2 cqa-text-[12px] cqa-leading-[15px] cqa-flex cqa-items-center cqa-gap-2 ' + getBranchTextColor(branch) + ' ' + getBranchColorClass(branch)\">\n <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px] cqa-min-w-[32px] cqa-flex-shrink-0\">{{ branchIndex + 1 }}</span>\n <span>{{ getBranchLabel(branch) }}</span>\n <span *ngIf=\"branch.action\" [innerHTML]=\"branch.action\" class=\"cqa-text-[#111827]\"></span>\n </div>\n\n <!-- Branch Content (Nested Steps \u2013 renderer dispatches by step type, n-level nesting) -->\n <div *ngIf=\"!isReorder\" class=\"cqa-flex cqa-flex-col\">\n <cqa-test-case-details-renderer\n *ngFor=\"let step of branch.nestedSteps; let i = index\"\n [step]=\"step\"\n [index]=\"i\"\n [selected]=\"$any(step).selected\"\n [branch]=\"branch\"\n [isNested]=\"true\"\n [isReorder]=\"isReorder\"\n [addStepBetween]=\"addStepBetween\"\n [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n (branchStepChange)=\"onBranchStepChange($event.branch, $event.step, $event.stepIndex)\"\n (addStepForBranch)=\"onAddStep($event.branch)\"\n (addStepForLoop)=\"onAddStepForLoop($event, branch)\"\n (deleteStepWithBranch)=\"onDeleteStep($event.branch, $event.stepIndex)\"\n (toggleExpanded)=\"onNestedToggleExpanded($event, branch, step, i)\"\n (groupNameChange)=\"$any(step).groupName = $event; onBranchStepChange(branch, step, i)\"\n (descriptionChange)=\"$any(step).description = $event; onBranchStepChange(branch, step, i)\"\n (reusableChange)=\"$any(step).reusable = $event; onBranchStepChange(branch, step, i)\"\n (openExternal)=\"onBranchStepChange(branch, step, i)\"\n (edit)=\"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)=\"clickAction.emit($event)\"\n (editInDepth)=\"editInDepth.emit($event)\"\n (addStepBetweenClick)=\"addStepBetweenClick.emit($event)\"\n >\n </cqa-test-case-details-renderer>\n </div>\n <div *ngIf=\"isReorder\" class=\"cqa-flex cqa-flex-col nested-step-drop-list\"\n [dndDropzone]=\"['step']\"\n dndEffectAllowed=\"move\"\n dndDragoverClass=\"dndDragover\"\n (dndDrop)=\"onDndDrop($event, branch)\">\n <div dndPlaceholderRef class=\"step-drag-placeholder-nested cqa-my-1 cqa-min-h-[50px] cqa-border-2 cqa-border-dashed cqa-border-[#3F43EE] cqa-rounded cqa-bg-[rgba(63,67,238,0.08)] cqa-flex cqa-items-center cqa-justify-center cqa-text-[#3F43EE] cqa-text-xs\">Drop here</div>\n <div *ngFor=\"let step of branch.nestedSteps; let i = index\" class=\"nested-step-drag-item\"\n [dndDraggable]=\"step\"\n dndEffectAllowed=\"move\"\n dndType=\"step\">\n <cqa-test-case-details-renderer\n [step]=\"step\"\n [index]=\"i\"\n [selected]=\"$any(step).selected\"\n [branch]=\"branch\"\n [isNested]=\"true\"\n [isReorder]=\"isReorder\"\n [addStepBetweenAbove]=\"addStepBetweenAbove\"\n [addStepBetweenBelow]=\"addStepBetweenBelow\"\n [addStepBetween]=\"addStepBetween\"\n [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n (branchStepChange)=\"onBranchStepChange($event.branch, $event.step, $event.stepIndex)\"\n (addStepForBranch)=\"onAddStep($event.branch)\"\n (addStepForLoop)=\"onAddStepForLoop($event, branch)\"\n (deleteStepWithBranch)=\"onDeleteStep($event.branch, $event.stepIndex)\"\n (toggleExpanded)=\"onNestedToggleExpanded($event, branch, step, i)\"\n (groupNameChange)=\"$any(step).groupName = $event; onBranchStepChange(branch, step, i)\"\n (descriptionChange)=\"$any(step).description = $event; onBranchStepChange(branch, step, i)\"\n (reusableChange)=\"$any(step).reusable = $event; onBranchStepChange(branch, step, i)\"\n (openExternal)=\"onBranchStepChange(branch, step, i)\"\n (edit)=\"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)=\"clickAction.emit($event)\"\n (editInDepth)=\"editInDepth.emit($event)\"\n (addStepBetweenClick)=\"addStepBetweenClick.emit($event)\"\n >\n </cqa-test-case-details-renderer>\n </div>\n </div>\n\n <!-- Empty branch (IF / ELSE IF / ELSE): show plus icon on hover when no steps, same as loop step -->\n <div *ngIf=\"branch.nestedSteps.length === 0\" 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()\" [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 </div>\n\n <!-- END IF Marker -->\n <div [class]=\"'cqa-pl-4 cqa-py-1 cqa-text-[#7B3306] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium'\" style=\"border-top: 1px solid #E5E7EB;\">\n END IF\n </div>\n </div>\n</div>", styles: [".step-actions{opacity:0;transition:opacity .15s ease}.step-row:hover .step-actions{opacity:1}\n", ".condition-branch-empty{opacity:0;transition:opacity .1s ease}.condition-branch-row:hover .condition-branch-empty{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"], outputs: ["valueChange", "optionSelect", "cleared"] }, { type: i4$2.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", "branch", "isReorder", "selected", "addStepBetweenAbove", "addStepBetweenBelow", "addStepBetween", "dataProfileOptions", "hasMoreDataProfiles", "isLoadingDataProfiles", "naturalTextActionsOptions", "setConditionTemplateVariables"], outputs: ["nestedStepChange", "addStep", "deleteStep", "toggleExpanded", "groupNameChange", "descriptionChange", "reusableChange", "openExternal", "edit", "link", "duplicate", "delete", "viewDetails", "selectionChange", "conditionChange", "branchStepChange", "addStepForBranch", "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: i9.DndDropzoneDirective, selector: "[dndDropzone]", inputs: ["dndDropzone", "dndEffectAllowed", "dndAllowExternal", "dndHorizontal", "dndDragoverClass", "dndDropzoneDisabledClass", "dndDisableIf", "dndDisableDropIf"], outputs: ["dndDragover", "dndDrop"] }, { type: i9.DndPlaceholderRefDirective, selector: "[dndPlaceholderRef]" }, { type: i9.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 } });
23369
+ TestCaseConditionStepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestCaseConditionStepComponent, selector: "cqa-test-case-condition-step", inputs: { config: "config", id: "id", stepNumber: "stepNumber", condition: "condition", branches: "branches", expanded: "expanded", isNested: "isNested", isInsideLoop: "isInsideLoop", isInsideStepGroup: "isInsideStepGroup", isReorder: "isReorder", selected: "selected", dataProfileOptions: "dataProfileOptions", hasMoreDataProfiles: "hasMoreDataProfiles", isLoadingDataProfiles: "isLoadingDataProfiles", naturalTextActionsOptions: "naturalTextActionsOptions", setConditionTemplateVariables: "setConditionTemplateVariables", addStepBetweenAbove: "addStepBetweenAbove", addStepBetweenBelow: "addStepBetweenBelow", addStepBetween: "addStepBetween" }, outputs: { toggleExpanded: "toggleExpanded", conditionChange: "conditionChange", branchStepChange: "branchStepChange", addStep: "addStep", 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" }, 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]' : '')\">\n <!-- Inline Edit Mode: stop propagation so dropdown/autocomplete interactions don't bubble and collapse the step -->\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 <!-- 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 - always visible -->\n <button\n type=\"button\"\n (click)=\"onAddElse()\"\n class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-cursor-pointer cqa-transition-colors\">\n Add ELSE IF\n </button>\n <!-- Add Else button - calls API to create CONDITION_ELSE step -->\n <button\n type=\"button\"\n (click)=\"onAddElseBranch()\"\n class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-cursor-pointer cqa-transition-colors\">\n Add ELSE\n </button>\n\n <!-- Edit In depth link -->\n <a href=\"#\" (click)=\"onEditInDepth(); $event.preventDefault()\"\n class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-[2px] cqa-no-underline\">\n Edit In depth\n <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg>\n </a> \n </div>\n <!-- Cancel / Apply buttons - shown on IF row when no ELSE IF branches are present -->\n <div *ngIf=\"elseIfBranches.length === 0\" class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <cqa-button variant=\"outlined\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Cancel'\" (clicked)=\"onEditCancel()\"></cqa-button>\n <cqa-button variant=\"filled\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Apply'\" (clicked)=\"onEditApply()\"></cqa-button>\n </div>\n </div>\n \n \n </div>\n\n <!-- ELSE IF Sections in Edit Mode - Loop through all ELSE IF branches -->\n <ng-container *ngFor=\"let branch of elseIfBranches; let i = index\">\n <div *ngIf=\"isEditing\" class=\"cqa-py-2.5 cqa-px-4 cqa-flex cqa-flex-col cqa-gap-3 cqa-border-t cqa-border-solid cqa-border-[#E5E7EB]\">\n <!-- First Row: Remove ELSE IF button, autocomplete, Edit In depth, Cancel/Apply -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-justify-between\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-grow\">\n <!-- Remove ELSE IF button -->\n <button\n type=\"button\"\n (click)=\"onRemoveElse(branch.id)\"\n class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#F3F4F6] cqa-text-[#99A1AF] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-cursor-pointer hover:cqa-bg-[#E5E7EB] cqa-transition-colors\">\n Remove ELSE IF\n </button>\n\n <!-- ELSE IF autocomplete field: same as IF condition -->\n <cqa-autocomplete\n *ngIf=\"branch.form\"\n [options]=\"conditionLeftAutocompleteOptions\"\n [value]=\"branch.form.get('conditionLeft')?.value ?? ''\"\n (valueChange)=\"branch.form.get('conditionLeft')?.setValue($event)\"\n (optionSelect)=\"onElseConditionLeftSelect($event, branch.id)\"\n placeholder=\"Select condition\"\n [fullWidth]=\"true\"\n class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-autocomplete>\n \n <!-- Second Row: ELSE IF Template Variables Section (shown when template is selected, inline before Edit In depth) -->\n <div *ngIf=\"branch.selectedTemplate && branch.templateVariables && branch.templateVariables.length > 0\" class=\"cqa-flex cqa-flex-row cqa-flex-wrap cqa-gap-3\">\n <ng-container *ngFor=\"let variable of branch.templateVariables\">\n <!-- Boolean variables with mat-slide-toggle -->\n <ng-container *ngIf=\"variable.type === 'boolean'\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <!-- <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700\">\n {{ variable.label }}\n </label> -->\n <mat-slide-toggle\n [checked]=\"branch.templateVariablesForm.get(variable.name)?.value || variable.value || false\"\n (change)=\"branch.templateVariablesForm.get(variable.name)?.setValue($event.checked)\"\n color=\"primary\">\n </mat-slide-toggle>\n </div>\n </ng-container>\n \n <!-- Non-boolean variables -->\n <ng-container *ngIf=\"variable.type !== 'boolean' && variable.name !== 'custom_code'\">\n <!-- Dropdown for select variables -->\n <ng-container *ngIf=\"variable.name === 'type' || variable.name === 'scrollTo' || variable.options\">\n <div class=\"cqa-flex cqa-flex-col\" style=\"min-width: 150px;\">\n <!-- <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n {{ variable.label }}\n </label> -->\n <cqa-dynamic-select \n [form]=\"branch.templateVariablesForm\"\n [config]=\"getSelectConfigForVariable(variable, branch.id)\">\n </cqa-dynamic-select>\n </div>\n </ng-container>\n \n <!-- Text Input for other variables -->\n <ng-container *ngIf=\"variable.name !== 'type' && variable.name !== 'scrollTo' && !variable.options\">\n <div class=\"cqa-flex cqa-flex-col\" style=\"min-width: 150px;\">\n <!-- <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n {{ variable.label }}\n </label> -->\n <cqa-custom-input\n [value]=\"branch.templateVariablesForm.get(variable.name)?.value || variable.value || ''\"\n (valueChange)=\"branch.templateVariablesForm.get(variable.name)?.setValue($event)\"\n [placeholder]=\"variable.label\">\n </cqa-custom-input>\n </div>\n </ng-container>\n </ng-container>\n </ng-container>\n </div>\n\n <!-- Edit In depth link -->\n <a href=\"#\" (click)=\"onEditInDepth(); $event.preventDefault()\"\n class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-[2px] cqa-no-underline\">\n Edit In depth\n <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg>\n </a>\n </div>\n <!-- Cancel / Apply buttons - shown in last ELSE IF row -->\n <div *ngIf=\"i === elseIfBranches.length - 1\" class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <cqa-button variant=\"outlined\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Cancel'\" (clicked)=\"onEditCancel()\"></cqa-button>\n <cqa-button variant=\"filled\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Apply'\" (clicked)=\"onEditApply()\"></cqa-button>\n </div>\n </div>\n </div>\n </ng-container>\n\n <!-- Condition Header (normal view when not editing) -->\n <div *ngIf=\"!isEditing\" [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 ' + (isInsideLoop && isInsideStepGroup ? 'cqa-pl-20 cqa-pr-4' : (isInsideLoop || isInsideStepGroup) ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4')\">\n <!-- Drag Handle Icon (when isReorder is true) -->\n <div class=\"cqa-inline-flex cqa-items-center\">\n <div *ngIf=\"isReorder\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n </svg>\n </div>\n <!-- Checkbox (when isReorder is false) -->\n <label *ngIf=\"!isReorder\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative 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 <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 IF / ELSE\n </span>\n\n <!-- Condition Input and event key-value details (exclude customEvent) -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-ml-2 cqa-flex-1 cqa-flex-wrap\">\n <span [innerHTML]=\"condition\"></span>\n <ng-container *ngIf=\"getEventDetailsForDisplay().length > 0\">\n <span *ngFor=\"let item of getEventDetailsForDisplay()\" 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]\">\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 <!-- <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px]\">\n If\n </span>\n <span\n class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\">.success-message</span>\n <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px]\">\n is visible\n </span> -->\n <!-- <input\n type=\"text\"\n [value]=\"condition\"\n (input)=\"onConditionChange($any($event.target).value)\"\n placeholder=\"element `.success-message` is visible\"\n class=\"cqa-px-3 cqa-py-1.5 cqa-rounded-lg cqa-border cqa-border-gray-300 cqa-bg-white cqa-text-gray-900 cqa-text-sm cqa-flex-1 cqa-max-w-md cqa-outline-none focus:cqa-ring-2 focus:cqa-ring-primary focus:cqa-ring-opacity-50\"\n /> -->\n </div>\n\n <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 <!-- Created Date (from API) - before action icons, format: 25 Feb 2026 -->\n <span *ngIf=\"config.createdDate\" class=\"cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px]\">\n {{ config.createdDate | date:'d MMM yyyy' }}\n </span>\n <!-- Action Icons: Edit, Link, Duplicate, Delete (show on hover; hidden when inside step-group) -->\n <div *ngIf=\"!isInsideStepGroup\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-3 cqa-px-[7px]\">\n <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M7 11.6666H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M9.55208 2.1128C9.7843 1.88058 10.0993 1.75012 10.4277 1.75012C10.7561 1.75012 11.071 1.88058 11.3033 2.1128C11.5355 2.34502 11.6659 2.65998 11.6659 2.98838C11.6659 3.31679 11.5355 3.63175 11.3033 3.86397L4.29742 10.8704C4.15864 11.0092 3.9871 11.1107 3.79867 11.1656L2.12333 11.6544C2.07314 11.669 2.01993 11.6699 1.96928 11.6569C1.91863 11.6439 1.8724 11.6176 1.83543 11.5806C1.79846 11.5437 1.7721 11.4974 1.75913 11.4468C1.74615 11.3961 1.74703 11.3429 1.76167 11.2927L2.2505 9.61738C2.30546 9.42916 2.40698 9.25783 2.54567 9.11922L9.55208 2.1128Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </button>\n <!-- <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </button> -->\n <!-- <button type=\"button\" (click)=\"onDuplicate(); $event.stopPropagation()\" title=\"Duplicate\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </button> -->\n <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\" class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1.75 3.5H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11.0827 3.5V11.6667C11.0827 12.25 10.4993 12.8333 9.91602 12.8333H4.08268C3.49935 12.8333 2.91602 12.25 2.91602 11.6667V3.5\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.66602 3.49996V2.33329C4.66602 1.74996 5.24935 1.16663 5.83268 1.16663H8.16602C8.74935 1.16663 9.33268 1.74996 9.33268 2.33329V3.49996\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M5.83398 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M8.16602 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </button>\n </div>\n </div>\n </div>\n\n <!-- Expanded Content with Branches -->\n <div *ngIf=\"expanded\" class=\"cqa-flex cqa-flex-col\">\n <!-- Branches (IF TRUE, ELSE IF, ELSE) -->\n <div *ngFor=\"let branch of branches; let branchIndex = index\" class=\"condition-branch-row cqa-flex cqa-flex-col\">\n <!-- Branch Header: display number = condition step number + branch index (e.g. step 3 \u2192 3, 4, 5 to match nested 3.1, 4.1, 5.1) -->\n <div\n [class]=\"'cqa-px-4 cqa-py-2 cqa-text-[12px] cqa-leading-[15px] cqa-flex cqa-items-center cqa-gap-2 ' + getBranchTextColor(branch) + ' ' + getBranchColorClass(branch)\">\n <span 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 *ngIf=\"branch.action\" [innerHTML]=\"branch.action\" class=\"cqa-text-[#111827]\"></span>\n </div>\n\n <!-- Branch Content (Nested Steps \u2013 renderer dispatches by step type, n-level nesting) -->\n <div *ngIf=\"!isReorder\" class=\"cqa-flex cqa-flex-col\">\n <cqa-test-case-details-renderer\n *ngFor=\"let step of branch.nestedSteps; let i = index\"\n [step]=\"step\"\n [index]=\"i\"\n [selected]=\"$any(step).selected\"\n [branch]=\"branch\"\n [isNested]=\"true\"\n [isReorder]=\"isReorder\"\n [addStepBetween]=\"addStepBetween\"\n [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n (branchStepChange)=\"onBranchStepChange($event.branch, $event.step, $event.stepIndex)\"\n (addStepForBranch)=\"onAddStep($event.branch)\"\n (addStepForLoop)=\"onAddStepForLoop($event, branch)\"\n (deleteStepWithBranch)=\"onDeleteStep($event.branch, $event.stepIndex)\"\n (toggleExpanded)=\"onNestedToggleExpanded($event, branch, step, i)\"\n (groupNameChange)=\"$any(step).groupName = $event; onBranchStepChange(branch, step, i)\"\n (descriptionChange)=\"$any(step).description = $event; onBranchStepChange(branch, step, i)\"\n (reusableChange)=\"$any(step).reusable = $event; onBranchStepChange(branch, step, i)\"\n (openExternal)=\"onBranchStepChange(branch, step, i)\"\n (edit)=\"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)=\"clickAction.emit($event)\"\n (editInDepth)=\"editInDepth.emit($event)\"\n (addStepBetweenClick)=\"addStepBetweenClick.emit($event)\"\n >\n </cqa-test-case-details-renderer>\n </div>\n <div *ngIf=\"isReorder\" class=\"cqa-flex cqa-flex-col nested-step-drop-list\"\n [dndDropzone]=\"['step']\"\n dndEffectAllowed=\"move\"\n dndDragoverClass=\"dndDragover\"\n (dndDrop)=\"onDndDrop($event, branch)\">\n <div dndPlaceholderRef class=\"step-drag-placeholder-nested cqa-my-1 cqa-min-h-[50px] cqa-border-2 cqa-border-dashed cqa-border-[#3F43EE] cqa-rounded cqa-bg-[rgba(63,67,238,0.08)] cqa-flex cqa-items-center cqa-justify-center cqa-text-[#3F43EE] cqa-text-xs\">Drop here</div>\n <div *ngFor=\"let step of branch.nestedSteps; let i = index\" class=\"nested-step-drag-item\"\n [dndDraggable]=\"step\"\n dndEffectAllowed=\"move\"\n dndType=\"step\">\n <cqa-test-case-details-renderer\n [step]=\"step\"\n [index]=\"i\"\n [selected]=\"$any(step).selected\"\n [branch]=\"branch\"\n [isNested]=\"true\"\n [isReorder]=\"isReorder\"\n [addStepBetweenAbove]=\"addStepBetweenAbove\"\n [addStepBetweenBelow]=\"addStepBetweenBelow\"\n [addStepBetween]=\"addStepBetween\"\n [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n (branchStepChange)=\"onBranchStepChange($event.branch, $event.step, $event.stepIndex)\"\n (addStepForBranch)=\"onAddStep($event.branch)\"\n (addStepForLoop)=\"onAddStepForLoop($event, branch)\"\n (deleteStepWithBranch)=\"onDeleteStep($event.branch, $event.stepIndex)\"\n (toggleExpanded)=\"onNestedToggleExpanded($event, branch, step, i)\"\n (groupNameChange)=\"$any(step).groupName = $event; onBranchStepChange(branch, step, i)\"\n (descriptionChange)=\"$any(step).description = $event; onBranchStepChange(branch, step, i)\"\n (reusableChange)=\"$any(step).reusable = $event; onBranchStepChange(branch, step, i)\"\n (openExternal)=\"onBranchStepChange(branch, step, i)\"\n (edit)=\"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)=\"clickAction.emit($event)\"\n (editInDepth)=\"editInDepth.emit($event)\"\n (addStepBetweenClick)=\"addStepBetweenClick.emit($event)\"\n >\n </cqa-test-case-details-renderer>\n </div>\n </div>\n\n <!-- Empty branch (IF / ELSE IF / ELSE): show plus icon on hover when no steps, same as loop step -->\n <div *ngIf=\"branch.nestedSteps.length === 0\" 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()\" [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 </div>\n\n <!-- END IF Marker -->\n <div [class]=\"'cqa-pl-4 cqa-py-1 cqa-text-[#7B3306] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium'\" style=\"border-top: 1px solid #E5E7EB;\">\n END IF\n </div>\n </div>\n</div>", styles: [".step-actions{opacity:0;transition:opacity .15s ease}.step-row:hover .step-actions{opacity:1}\n", ".condition-branch-empty{opacity:0;transition:opacity .1s ease}.condition-branch-row:hover .condition-branch-empty{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"], outputs: ["valueChange", "optionSelect", "cleared"] }, { type: i4$2.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", "branch", "isReorder", "selected", "addStepBetweenAbove", "addStepBetweenBelow", "addStepBetween", "dataProfileOptions", "hasMoreDataProfiles", "isLoadingDataProfiles", "naturalTextActionsOptions", "setConditionTemplateVariables"], outputs: ["nestedStepChange", "addStep", "deleteStep", "toggleExpanded", "groupNameChange", "descriptionChange", "reusableChange", "openExternal", "edit", "link", "duplicate", "delete", "viewDetails", "selectionChange", "conditionChange", "branchStepChange", "addStepForBranch", "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: i9.DndDropzoneDirective, selector: "[dndDropzone]", inputs: ["dndDropzone", "dndEffectAllowed", "dndAllowExternal", "dndHorizontal", "dndDragoverClass", "dndDropzoneDisabledClass", "dndDisableIf", "dndDisableDropIf"], outputs: ["dndDragover", "dndDrop"] }, { type: i9.DndPlaceholderRefDirective, selector: "[dndPlaceholderRef]" }, { type: i9.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 } });
23313
23370
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseConditionStepComponent, decorators: [{
23314
23371
  type: Component,
23315
23372
  args: [{ selector: 'cqa-test-case-condition-step', host: { class: 'cqa-ui-root' }, styles: [
23316
23373
  STEP_ROW_ACTIONS_STYLES,
23317
23374
  CONDITION_BRANCH_EMPTY_STYLES,
23318
- ], template: "<div [class]=\"'cqa-flex cqa-flex-col cqa-border cqa-border-solid cqa-border-[#E5E7EB] ' + (isNested ? ' cqa-pl-[24px]' : '')\">\n <!-- Inline Edit Mode: stop propagation so dropdown/autocomplete interactions don't bubble and collapse the step -->\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 <!-- First Row: CONDITION tag, autocomplete, IF/ELSE indicators, Edit In depth, Cancel/Apply -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-justify-between\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-grow\">\n <!-- CONDITION Tag (orange) -->\n <span class=\"cqa-px-1.5 cqa-rounded-md cqa-text-[#EA580C] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-[#FFEDD5]\">\n CONDITION\n </span>\n\n <!-- First field: left operand (e.g. Usertype) - autocomplete with IF_CONDITION natural text actions -->\n <cqa-autocomplete\n *ngIf=\"editForm\"\n [options]=\"conditionLeftAutocompleteOptions\"\n [value]=\"editForm.get('conditionLeft')?.value ?? ''\"\n (valueChange)=\"onEditFormFieldChange('conditionLeft', $event)\"\n (optionSelect)=\"onConditionLeftSelect($event)\"\n placeholder=\"Select condition\"\n [fullWidth]=\"true\"\n class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-autocomplete>\n\n <!-- Second Row: Template Variables Section (shown when template is selected, inline before Edit In depth) -->\n <div *ngIf=\"selectedTemplate && templateVariables && templateVariables.length > 0\" class=\"cqa-flex cqa-flex-row cqa-flex-wrap cqa-gap-3\">\n <ng-container *ngFor=\"let variable of templateVariables\">\n <!-- Boolean variables with mat-slide-toggle -->\n <ng-container *ngIf=\"variable.type === 'boolean'\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700\">\n {{ variable.label }}\n </label>\n <mat-slide-toggle\n [checked]=\"templateVariablesForm.get(variable.name)?.value || variable.value || false\"\n (change)=\"templateVariablesForm.get(variable.name)?.setValue($event.checked)\"\n color=\"primary\">\n </mat-slide-toggle>\n </div>\n </ng-container>\n \n <!-- Non-boolean variables -->\n <ng-container *ngIf=\"variable.type !== 'boolean' && variable.name !== 'custom_code'\">\n <!-- Dropdown for select variables -->\n <ng-container *ngIf=\"variable.name === 'type' || variable.name === 'scrollTo' || variable.options\">\n <div class=\"cqa-flex cqa-flex-col\" style=\"min-width: 150px;\">\n <!-- <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n {{ variable.label }}\n </label> -->\n <cqa-dynamic-select \n [form]=\"templateVariablesForm\"\n [config]=\"getSelectConfigForVariable(variable, false)\">\n </cqa-dynamic-select>\n </div>\n </ng-container>\n <!-- Text Input for other variables -->\n <ng-container *ngIf=\"variable.name !== 'type' && variable.name !== 'scrollTo' && !variable.options\">\n <div class=\"cqa-flex cqa-flex-col\" style=\"min-width: 150px;\">\n <!-- <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n {{ variable.label }}\n </label> -->\n <cqa-custom-input\n [placeholder]=\"'Enter ' + variable.label\"\n [value]=\"templateVariablesForm.get(variable.name)?.value || variable.value || ''\"\n [fullWidth]=\"true\"\n (valueChange)=\"templateVariablesForm.get(variable.name)?.setValue($event)\">\n </cqa-custom-input>\n </div>\n </ng-container>\n </ng-container>\n </ng-container>\n </div>\n\n <!-- IF / ELSE indicators -->\n <span class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#DCFCE7] cqa-text-[#008236] cqa-border cqa-border-solid cqa-border-[#B9F8CF] cqa-flex cqa-items-center cqa-gap-1.5\">\n <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6.66634 2L2.99967 5.66667L1.33301 4\" stroke=\"#008236\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n IF\n </span>\n <!-- Add ELSE IF button - always visible -->\n <button\n type=\"button\"\n (click)=\"onAddElse()\"\n class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-cursor-pointer cqa-transition-colors\">\n Add ELSE IF\n </button>\n <!-- Add Else button - calls API to create CONDITION_ELSE step -->\n <button\n type=\"button\"\n (click)=\"onAddElseBranch()\"\n class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-cursor-pointer cqa-transition-colors\">\n Add ELSE\n </button>\n\n <!-- Edit In depth link -->\n <a href=\"#\" (click)=\"onEditInDepth(); $event.preventDefault()\"\n class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-[2px] cqa-no-underline\">\n Edit In depth\n <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg>\n </a> \n </div>\n <!-- Cancel / Apply buttons - shown on IF row when no ELSE IF branches are present -->\n <div *ngIf=\"elseIfBranches.length === 0\" class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <cqa-button variant=\"outlined\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Cancel'\" (clicked)=\"onEditCancel()\"></cqa-button>\n <cqa-button variant=\"filled\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Apply'\" (clicked)=\"onEditApply()\"></cqa-button>\n </div>\n </div>\n \n \n </div>\n\n <!-- ELSE IF Sections in Edit Mode - Loop through all ELSE IF branches -->\n <ng-container *ngFor=\"let branch of elseIfBranches; let i = index\">\n <div *ngIf=\"isEditing\" class=\"cqa-py-2.5 cqa-px-4 cqa-flex cqa-flex-col cqa-gap-3 cqa-border-t cqa-border-solid cqa-border-[#E5E7EB]\">\n <!-- First Row: Remove ELSE IF button, autocomplete, Edit In depth, Cancel/Apply -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-justify-between\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-grow\">\n <!-- Remove ELSE IF button -->\n <button\n type=\"button\"\n (click)=\"onRemoveElse(branch.id)\"\n class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#F3F4F6] cqa-text-[#99A1AF] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-cursor-pointer hover:cqa-bg-[#E5E7EB] cqa-transition-colors\">\n Remove ELSE IF\n </button>\n\n <!-- ELSE IF autocomplete field: same as IF condition -->\n <cqa-autocomplete\n *ngIf=\"branch.form\"\n [options]=\"conditionLeftAutocompleteOptions\"\n [value]=\"branch.form.get('conditionLeft')?.value ?? ''\"\n (valueChange)=\"branch.form.get('conditionLeft')?.setValue($event)\"\n (optionSelect)=\"onElseConditionLeftSelect($event, branch.id)\"\n placeholder=\"Select condition\"\n [fullWidth]=\"true\"\n class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-autocomplete>\n \n <!-- Second Row: ELSE IF Template Variables Section (shown when template is selected, inline before Edit In depth) -->\n <div *ngIf=\"branch.selectedTemplate && branch.templateVariables && branch.templateVariables.length > 0\" class=\"cqa-flex cqa-flex-row cqa-flex-wrap cqa-gap-3\">\n <ng-container *ngFor=\"let variable of branch.templateVariables\">\n <!-- Boolean variables with mat-slide-toggle -->\n <ng-container *ngIf=\"variable.type === 'boolean'\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <!-- <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700\">\n {{ variable.label }}\n </label> -->\n <mat-slide-toggle\n [checked]=\"branch.templateVariablesForm.get(variable.name)?.value || variable.value || false\"\n (change)=\"branch.templateVariablesForm.get(variable.name)?.setValue($event.checked)\"\n color=\"primary\">\n </mat-slide-toggle>\n </div>\n </ng-container>\n \n <!-- Non-boolean variables -->\n <ng-container *ngIf=\"variable.type !== 'boolean' && variable.name !== 'custom_code'\">\n <!-- Dropdown for select variables -->\n <ng-container *ngIf=\"variable.name === 'type' || variable.name === 'scrollTo' || variable.options\">\n <div class=\"cqa-flex cqa-flex-col\" style=\"min-width: 150px;\">\n <!-- <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n {{ variable.label }}\n </label> -->\n <cqa-dynamic-select \n [form]=\"branch.templateVariablesForm\"\n [config]=\"getSelectConfigForVariable(variable, branch.id)\">\n </cqa-dynamic-select>\n </div>\n </ng-container>\n \n <!-- Text Input for other variables -->\n <ng-container *ngIf=\"variable.name !== 'type' && variable.name !== 'scrollTo' && !variable.options\">\n <div class=\"cqa-flex cqa-flex-col\" style=\"min-width: 150px;\">\n <!-- <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n {{ variable.label }}\n </label> -->\n <cqa-custom-input\n [value]=\"branch.templateVariablesForm.get(variable.name)?.value || variable.value || ''\"\n (valueChange)=\"branch.templateVariablesForm.get(variable.name)?.setValue($event)\"\n [placeholder]=\"variable.label\">\n </cqa-custom-input>\n </div>\n </ng-container>\n </ng-container>\n </ng-container>\n </div>\n\n <!-- Edit In depth link -->\n <a href=\"#\" (click)=\"onEditInDepth(); $event.preventDefault()\"\n class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-[2px] cqa-no-underline\">\n Edit In depth\n <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg>\n </a>\n </div>\n <!-- Cancel / Apply buttons - shown in last ELSE IF row -->\n <div *ngIf=\"i === elseIfBranches.length - 1\" class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <cqa-button variant=\"outlined\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Cancel'\" (clicked)=\"onEditCancel()\"></cqa-button>\n <cqa-button variant=\"filled\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Apply'\" (clicked)=\"onEditApply()\"></cqa-button>\n </div>\n </div>\n </div>\n </ng-container>\n\n <!-- Condition Header (normal view when not editing) -->\n <div *ngIf=\"!isEditing\" [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 ' + (isInsideLoop ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4')\">\n <!-- Drag Handle Icon (when isReorder is true) -->\n <div class=\"cqa-inline-flex cqa-items-center\">\n <div *ngIf=\"isReorder\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n </svg>\n </div>\n <!-- Checkbox (when isReorder is false) -->\n <label *ngIf=\"!isReorder\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative 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 <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 IF / ELSE\n </span>\n\n <!-- Condition Input and event key-value details (exclude customEvent) -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-ml-2 cqa-flex-1 cqa-flex-wrap\">\n <span [innerHTML]=\"condition\"></span>\n <ng-container *ngIf=\"getEventDetailsForDisplay().length > 0\">\n <span *ngFor=\"let item of getEventDetailsForDisplay()\" 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]\">\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 <!-- <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px]\">\n If\n </span>\n <span\n class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\">.success-message</span>\n <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px]\">\n is visible\n </span> -->\n <!-- <input\n type=\"text\"\n [value]=\"condition\"\n (input)=\"onConditionChange($any($event.target).value)\"\n placeholder=\"element `.success-message` is visible\"\n class=\"cqa-px-3 cqa-py-1.5 cqa-rounded-lg cqa-border cqa-border-gray-300 cqa-bg-white cqa-text-gray-900 cqa-text-sm cqa-flex-1 cqa-max-w-md cqa-outline-none focus:cqa-ring-2 focus:cqa-ring-primary focus:cqa-ring-opacity-50\"\n /> -->\n </div>\n\n <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 <!-- Created Date (from API) - before action icons, format: 25 Feb 2026 -->\n <span *ngIf=\"config.createdDate\" class=\"cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px]\">\n {{ config.createdDate | date:'d MMM yyyy' }}\n </span>\n <!-- Action Icons: Edit, Link, Duplicate, Delete (show on hover; hidden when inside step-group) -->\n <div *ngIf=\"!isInsideStepGroup\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-3 cqa-px-[7px]\">\n <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M7 11.6666H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M9.55208 2.1128C9.7843 1.88058 10.0993 1.75012 10.4277 1.75012C10.7561 1.75012 11.071 1.88058 11.3033 2.1128C11.5355 2.34502 11.6659 2.65998 11.6659 2.98838C11.6659 3.31679 11.5355 3.63175 11.3033 3.86397L4.29742 10.8704C4.15864 11.0092 3.9871 11.1107 3.79867 11.1656L2.12333 11.6544C2.07314 11.669 2.01993 11.6699 1.96928 11.6569C1.91863 11.6439 1.8724 11.6176 1.83543 11.5806C1.79846 11.5437 1.7721 11.4974 1.75913 11.4468C1.74615 11.3961 1.74703 11.3429 1.76167 11.2927L2.2505 9.61738C2.30546 9.42916 2.40698 9.25783 2.54567 9.11922L9.55208 2.1128Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </button>\n <!-- <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </button> -->\n <!-- <button type=\"button\" (click)=\"onDuplicate(); $event.stopPropagation()\" title=\"Duplicate\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </button> -->\n <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\" class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1.75 3.5H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11.0827 3.5V11.6667C11.0827 12.25 10.4993 12.8333 9.91602 12.8333H4.08268C3.49935 12.8333 2.91602 12.25 2.91602 11.6667V3.5\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.66602 3.49996V2.33329C4.66602 1.74996 5.24935 1.16663 5.83268 1.16663H8.16602C8.74935 1.16663 9.33268 1.74996 9.33268 2.33329V3.49996\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M5.83398 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M8.16602 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </button>\n </div>\n </div>\n </div>\n\n <!-- Expanded Content with Branches -->\n <div *ngIf=\"expanded\" class=\"cqa-flex cqa-flex-col\">\n <!-- Branches (IF TRUE, ELSE IF, ELSE) -->\n <div *ngFor=\"let branch of branches; let branchIndex = index\" class=\"condition-branch-row cqa-flex cqa-flex-col\">\n <!-- Branch Header (2 = ELSE IF, 3 = ELSE; sub steps show 1.1, 2.1, 3.1 from step config) -->\n <div\n [class]=\"'cqa-px-4 cqa-py-2 cqa-text-[12px] cqa-leading-[15px] cqa-flex cqa-items-center cqa-gap-2 ' + getBranchTextColor(branch) + ' ' + getBranchColorClass(branch)\">\n <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px] cqa-min-w-[32px] cqa-flex-shrink-0\">{{ branchIndex + 1 }}</span>\n <span>{{ getBranchLabel(branch) }}</span>\n <span *ngIf=\"branch.action\" [innerHTML]=\"branch.action\" class=\"cqa-text-[#111827]\"></span>\n </div>\n\n <!-- Branch Content (Nested Steps \u2013 renderer dispatches by step type, n-level nesting) -->\n <div *ngIf=\"!isReorder\" class=\"cqa-flex cqa-flex-col\">\n <cqa-test-case-details-renderer\n *ngFor=\"let step of branch.nestedSteps; let i = index\"\n [step]=\"step\"\n [index]=\"i\"\n [selected]=\"$any(step).selected\"\n [branch]=\"branch\"\n [isNested]=\"true\"\n [isReorder]=\"isReorder\"\n [addStepBetween]=\"addStepBetween\"\n [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n (branchStepChange)=\"onBranchStepChange($event.branch, $event.step, $event.stepIndex)\"\n (addStepForBranch)=\"onAddStep($event.branch)\"\n (addStepForLoop)=\"onAddStepForLoop($event, branch)\"\n (deleteStepWithBranch)=\"onDeleteStep($event.branch, $event.stepIndex)\"\n (toggleExpanded)=\"onNestedToggleExpanded($event, branch, step, i)\"\n (groupNameChange)=\"$any(step).groupName = $event; onBranchStepChange(branch, step, i)\"\n (descriptionChange)=\"$any(step).description = $event; onBranchStepChange(branch, step, i)\"\n (reusableChange)=\"$any(step).reusable = $event; onBranchStepChange(branch, step, i)\"\n (openExternal)=\"onBranchStepChange(branch, step, i)\"\n (edit)=\"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)=\"clickAction.emit($event)\"\n (editInDepth)=\"editInDepth.emit($event)\"\n (addStepBetweenClick)=\"addStepBetweenClick.emit($event)\"\n >\n </cqa-test-case-details-renderer>\n </div>\n <div *ngIf=\"isReorder\" class=\"cqa-flex cqa-flex-col nested-step-drop-list\"\n [dndDropzone]=\"['step']\"\n dndEffectAllowed=\"move\"\n dndDragoverClass=\"dndDragover\"\n (dndDrop)=\"onDndDrop($event, branch)\">\n <div dndPlaceholderRef class=\"step-drag-placeholder-nested cqa-my-1 cqa-min-h-[50px] cqa-border-2 cqa-border-dashed cqa-border-[#3F43EE] cqa-rounded cqa-bg-[rgba(63,67,238,0.08)] cqa-flex cqa-items-center cqa-justify-center cqa-text-[#3F43EE] cqa-text-xs\">Drop here</div>\n <div *ngFor=\"let step of branch.nestedSteps; let i = index\" class=\"nested-step-drag-item\"\n [dndDraggable]=\"step\"\n dndEffectAllowed=\"move\"\n dndType=\"step\">\n <cqa-test-case-details-renderer\n [step]=\"step\"\n [index]=\"i\"\n [selected]=\"$any(step).selected\"\n [branch]=\"branch\"\n [isNested]=\"true\"\n [isReorder]=\"isReorder\"\n [addStepBetweenAbove]=\"addStepBetweenAbove\"\n [addStepBetweenBelow]=\"addStepBetweenBelow\"\n [addStepBetween]=\"addStepBetween\"\n [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n (branchStepChange)=\"onBranchStepChange($event.branch, $event.step, $event.stepIndex)\"\n (addStepForBranch)=\"onAddStep($event.branch)\"\n (addStepForLoop)=\"onAddStepForLoop($event, branch)\"\n (deleteStepWithBranch)=\"onDeleteStep($event.branch, $event.stepIndex)\"\n (toggleExpanded)=\"onNestedToggleExpanded($event, branch, step, i)\"\n (groupNameChange)=\"$any(step).groupName = $event; onBranchStepChange(branch, step, i)\"\n (descriptionChange)=\"$any(step).description = $event; onBranchStepChange(branch, step, i)\"\n (reusableChange)=\"$any(step).reusable = $event; onBranchStepChange(branch, step, i)\"\n (openExternal)=\"onBranchStepChange(branch, step, i)\"\n (edit)=\"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)=\"clickAction.emit($event)\"\n (editInDepth)=\"editInDepth.emit($event)\"\n (addStepBetweenClick)=\"addStepBetweenClick.emit($event)\"\n >\n </cqa-test-case-details-renderer>\n </div>\n </div>\n\n <!-- Empty branch (IF / ELSE IF / ELSE): show plus icon on hover when no steps, same as loop step -->\n <div *ngIf=\"branch.nestedSteps.length === 0\" 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()\" [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 </div>\n\n <!-- END IF Marker -->\n <div [class]=\"'cqa-pl-4 cqa-py-1 cqa-text-[#7B3306] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium'\" style=\"border-top: 1px solid #E5E7EB;\">\n END IF\n </div>\n </div>\n</div>" }]
23375
+ ], template: "<div [class]=\"'cqa-flex cqa-flex-col cqa-border cqa-border-solid cqa-border-[#E5E7EB] ' + (isNested ? ' cqa-pl-[24px]' : '')\">\n <!-- Inline Edit Mode: stop propagation so dropdown/autocomplete interactions don't bubble and collapse the step -->\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 <!-- 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 - always visible -->\n <button\n type=\"button\"\n (click)=\"onAddElse()\"\n class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-cursor-pointer cqa-transition-colors\">\n Add ELSE IF\n </button>\n <!-- Add Else button - calls API to create CONDITION_ELSE step -->\n <button\n type=\"button\"\n (click)=\"onAddElseBranch()\"\n class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#fff9e9] cqa-text-[#E65100] cqa-border cqa-border-solid cqa-border-[#feecbd] cqa-flex cqa-items-center cqa-gap-1.5 cqa-cursor-pointer cqa-transition-colors\">\n Add ELSE\n </button>\n\n <!-- Edit In depth link -->\n <a href=\"#\" (click)=\"onEditInDepth(); $event.preventDefault()\"\n class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-[2px] cqa-no-underline\">\n Edit In depth\n <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg>\n </a> \n </div>\n <!-- Cancel / Apply buttons - shown on IF row when no ELSE IF branches are present -->\n <div *ngIf=\"elseIfBranches.length === 0\" class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <cqa-button variant=\"outlined\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Cancel'\" (clicked)=\"onEditCancel()\"></cqa-button>\n <cqa-button variant=\"filled\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Apply'\" (clicked)=\"onEditApply()\"></cqa-button>\n </div>\n </div>\n \n \n </div>\n\n <!-- ELSE IF Sections in Edit Mode - Loop through all ELSE IF branches -->\n <ng-container *ngFor=\"let branch of elseIfBranches; let i = index\">\n <div *ngIf=\"isEditing\" class=\"cqa-py-2.5 cqa-px-4 cqa-flex cqa-flex-col cqa-gap-3 cqa-border-t cqa-border-solid cqa-border-[#E5E7EB]\">\n <!-- First Row: Remove ELSE IF button, autocomplete, Edit In depth, Cancel/Apply -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-justify-between\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-flex-grow\">\n <!-- Remove ELSE IF button -->\n <button\n type=\"button\"\n (click)=\"onRemoveElse(branch.id)\"\n class=\"cqa-px-2 cqa-py-[2px] cqa-rounded-[4px] cqa-text-[8px] cqa-leading-[12px] cqa-bg-[#F3F4F6] cqa-text-[#99A1AF] cqa-border cqa-border-solid cqa-border-[#E5E7EB] cqa-cursor-pointer hover:cqa-bg-[#E5E7EB] cqa-transition-colors\">\n Remove ELSE IF\n </button>\n\n <!-- ELSE IF autocomplete field: same as IF condition -->\n <cqa-autocomplete\n *ngIf=\"branch.form\"\n [options]=\"conditionLeftAutocompleteOptions\"\n [value]=\"branch.form.get('conditionLeft')?.value ?? ''\"\n (valueChange)=\"branch.form.get('conditionLeft')?.setValue($event)\"\n (optionSelect)=\"onElseConditionLeftSelect($event, branch.id)\"\n placeholder=\"Select condition\"\n [fullWidth]=\"true\"\n class=\"cqa-w-full cqa-max-w-[216px]\"></cqa-autocomplete>\n \n <!-- Second Row: ELSE IF Template Variables Section (shown when template is selected, inline before Edit In depth) -->\n <div *ngIf=\"branch.selectedTemplate && branch.templateVariables && branch.templateVariables.length > 0\" class=\"cqa-flex cqa-flex-row cqa-flex-wrap cqa-gap-3\">\n <ng-container *ngFor=\"let variable of branch.templateVariables\">\n <!-- Boolean variables with mat-slide-toggle -->\n <ng-container *ngIf=\"variable.type === 'boolean'\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <!-- <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700\">\n {{ variable.label }}\n </label> -->\n <mat-slide-toggle\n [checked]=\"branch.templateVariablesForm.get(variable.name)?.value || variable.value || false\"\n (change)=\"branch.templateVariablesForm.get(variable.name)?.setValue($event.checked)\"\n color=\"primary\">\n </mat-slide-toggle>\n </div>\n </ng-container>\n \n <!-- Non-boolean variables -->\n <ng-container *ngIf=\"variable.type !== 'boolean' && variable.name !== 'custom_code'\">\n <!-- Dropdown for select variables -->\n <ng-container *ngIf=\"variable.name === 'type' || variable.name === 'scrollTo' || variable.options\">\n <div class=\"cqa-flex cqa-flex-col\" style=\"min-width: 150px;\">\n <!-- <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n {{ variable.label }}\n </label> -->\n <cqa-dynamic-select \n [form]=\"branch.templateVariablesForm\"\n [config]=\"getSelectConfigForVariable(variable, branch.id)\">\n </cqa-dynamic-select>\n </div>\n </ng-container>\n \n <!-- Text Input for other variables -->\n <ng-container *ngIf=\"variable.name !== 'type' && variable.name !== 'scrollTo' && !variable.options\">\n <div class=\"cqa-flex cqa-flex-col\" style=\"min-width: 150px;\">\n <!-- <label class=\"cqa-text-[12px] cqa-font-medium cqa-text-gray-700 cqa-mb-1\">\n {{ variable.label }}\n </label> -->\n <cqa-custom-input\n [value]=\"branch.templateVariablesForm.get(variable.name)?.value || variable.value || ''\"\n (valueChange)=\"branch.templateVariablesForm.get(variable.name)?.setValue($event)\"\n [placeholder]=\"variable.label\">\n </cqa-custom-input>\n </div>\n </ng-container>\n </ng-container>\n </ng-container>\n </div>\n\n <!-- Edit In depth link -->\n <a href=\"#\" (click)=\"onEditInDepth(); $event.preventDefault()\"\n class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-[2px] cqa-no-underline\">\n Edit In depth\n <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/></svg>\n </a>\n </div>\n <!-- Cancel / Apply buttons - shown in last ELSE IF row -->\n <div *ngIf=\"i === elseIfBranches.length - 1\" class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <cqa-button variant=\"outlined\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Cancel'\" (clicked)=\"onEditCancel()\"></cqa-button>\n <cqa-button variant=\"filled\" btnSize=\"lg\" [customClass]=\"'cqa-text-[14px] cqa-py-[9px]'\" [text]=\"'Apply'\" (clicked)=\"onEditApply()\"></cqa-button>\n </div>\n </div>\n </div>\n </ng-container>\n\n <!-- Condition Header (normal view when not editing) -->\n <div *ngIf=\"!isEditing\" [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 ' + (isInsideLoop && isInsideStepGroup ? 'cqa-pl-20 cqa-pr-4' : (isInsideLoop || isInsideStepGroup) ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4')\">\n <!-- Drag Handle Icon (when isReorder is true) -->\n <div class=\"cqa-inline-flex cqa-items-center\">\n <div *ngIf=\"isReorder\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n </svg>\n </div>\n <!-- Checkbox (when isReorder is false) -->\n <label *ngIf=\"!isReorder\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative 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 <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 IF / ELSE\n </span>\n\n <!-- Condition Input and event key-value details (exclude customEvent) -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-3 cqa-ml-2 cqa-flex-1 cqa-flex-wrap\">\n <span [innerHTML]=\"condition\"></span>\n <ng-container *ngIf=\"getEventDetailsForDisplay().length > 0\">\n <span *ngFor=\"let item of getEventDetailsForDisplay()\" 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]\">\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 <!-- <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px]\">\n If\n </span>\n <span\n class=\"cqa-py-0.5 cqa-px-2 cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[17px] cqa-font-semibold cqa-border cqa-border-solid cqa-border-[#8A8CF4] cqa-rounded cqa-bg-[#D8D9FC]\">.success-message</span>\n <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px]\">\n is visible\n </span> -->\n <!-- <input\n type=\"text\"\n [value]=\"condition\"\n (input)=\"onConditionChange($any($event.target).value)\"\n placeholder=\"element `.success-message` is visible\"\n class=\"cqa-px-3 cqa-py-1.5 cqa-rounded-lg cqa-border cqa-border-gray-300 cqa-bg-white cqa-text-gray-900 cqa-text-sm cqa-flex-1 cqa-max-w-md cqa-outline-none focus:cqa-ring-2 focus:cqa-ring-primary focus:cqa-ring-opacity-50\"\n /> -->\n </div>\n\n <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 <!-- Created Date (from API) - before action icons, format: 25 Feb 2026 -->\n <span *ngIf=\"config.createdDate\" class=\"cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px]\">\n {{ config.createdDate | date:'d MMM yyyy' }}\n </span>\n <!-- Action Icons: Edit, Link, Duplicate, Delete (show on hover; hidden when inside step-group) -->\n <div *ngIf=\"!isInsideStepGroup\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-3 cqa-px-[7px]\">\n <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M7 11.6666H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M9.55208 2.1128C9.7843 1.88058 10.0993 1.75012 10.4277 1.75012C10.7561 1.75012 11.071 1.88058 11.3033 2.1128C11.5355 2.34502 11.6659 2.65998 11.6659 2.98838C11.6659 3.31679 11.5355 3.63175 11.3033 3.86397L4.29742 10.8704C4.15864 11.0092 3.9871 11.1107 3.79867 11.1656L2.12333 11.6544C2.07314 11.669 2.01993 11.6699 1.96928 11.6569C1.91863 11.6439 1.8724 11.6176 1.83543 11.5806C1.79846 11.5437 1.7721 11.4974 1.75913 11.4468C1.74615 11.3961 1.74703 11.3429 1.76167 11.2927L2.2505 9.61738C2.30546 9.42916 2.40698 9.25783 2.54567 9.11922L9.55208 2.1128Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </button>\n <!-- <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </button> -->\n <!-- <button type=\"button\" (click)=\"onDuplicate(); $event.stopPropagation()\" title=\"Duplicate\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </button> -->\n <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\" class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1.75 3.5H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11.0827 3.5V11.6667C11.0827 12.25 10.4993 12.8333 9.91602 12.8333H4.08268C3.49935 12.8333 2.91602 12.25 2.91602 11.6667V3.5\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M4.66602 3.49996V2.33329C4.66602 1.74996 5.24935 1.16663 5.83268 1.16663H8.16602C8.74935 1.16663 9.33268 1.74996 9.33268 2.33329V3.49996\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M5.83398 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M8.16602 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </button>\n </div>\n </div>\n </div>\n\n <!-- Expanded Content with Branches -->\n <div *ngIf=\"expanded\" class=\"cqa-flex cqa-flex-col\">\n <!-- Branches (IF TRUE, ELSE IF, ELSE) -->\n <div *ngFor=\"let branch of branches; let branchIndex = index\" class=\"condition-branch-row cqa-flex cqa-flex-col\">\n <!-- Branch Header: display number = condition step number + branch index (e.g. step 3 \u2192 3, 4, 5 to match nested 3.1, 4.1, 5.1) -->\n <div\n [class]=\"'cqa-px-4 cqa-py-2 cqa-text-[12px] cqa-leading-[15px] cqa-flex cqa-items-center cqa-gap-2 ' + getBranchTextColor(branch) + ' ' + getBranchColorClass(branch)\">\n <span 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 *ngIf=\"branch.action\" [innerHTML]=\"branch.action\" class=\"cqa-text-[#111827]\"></span>\n </div>\n\n <!-- Branch Content (Nested Steps \u2013 renderer dispatches by step type, n-level nesting) -->\n <div *ngIf=\"!isReorder\" class=\"cqa-flex cqa-flex-col\">\n <cqa-test-case-details-renderer\n *ngFor=\"let step of branch.nestedSteps; let i = index\"\n [step]=\"step\"\n [index]=\"i\"\n [selected]=\"$any(step).selected\"\n [branch]=\"branch\"\n [isNested]=\"true\"\n [isReorder]=\"isReorder\"\n [addStepBetween]=\"addStepBetween\"\n [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n (branchStepChange)=\"onBranchStepChange($event.branch, $event.step, $event.stepIndex)\"\n (addStepForBranch)=\"onAddStep($event.branch)\"\n (addStepForLoop)=\"onAddStepForLoop($event, branch)\"\n (deleteStepWithBranch)=\"onDeleteStep($event.branch, $event.stepIndex)\"\n (toggleExpanded)=\"onNestedToggleExpanded($event, branch, step, i)\"\n (groupNameChange)=\"$any(step).groupName = $event; onBranchStepChange(branch, step, i)\"\n (descriptionChange)=\"$any(step).description = $event; onBranchStepChange(branch, step, i)\"\n (reusableChange)=\"$any(step).reusable = $event; onBranchStepChange(branch, step, i)\"\n (openExternal)=\"onBranchStepChange(branch, step, i)\"\n (edit)=\"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)=\"clickAction.emit($event)\"\n (editInDepth)=\"editInDepth.emit($event)\"\n (addStepBetweenClick)=\"addStepBetweenClick.emit($event)\"\n >\n </cqa-test-case-details-renderer>\n </div>\n <div *ngIf=\"isReorder\" class=\"cqa-flex cqa-flex-col nested-step-drop-list\"\n [dndDropzone]=\"['step']\"\n dndEffectAllowed=\"move\"\n dndDragoverClass=\"dndDragover\"\n (dndDrop)=\"onDndDrop($event, branch)\">\n <div dndPlaceholderRef class=\"step-drag-placeholder-nested cqa-my-1 cqa-min-h-[50px] cqa-border-2 cqa-border-dashed cqa-border-[#3F43EE] cqa-rounded cqa-bg-[rgba(63,67,238,0.08)] cqa-flex cqa-items-center cqa-justify-center cqa-text-[#3F43EE] cqa-text-xs\">Drop here</div>\n <div *ngFor=\"let step of branch.nestedSteps; let i = index\" class=\"nested-step-drag-item\"\n [dndDraggable]=\"step\"\n dndEffectAllowed=\"move\"\n dndType=\"step\">\n <cqa-test-case-details-renderer\n [step]=\"step\"\n [index]=\"i\"\n [selected]=\"$any(step).selected\"\n [branch]=\"branch\"\n [isNested]=\"true\"\n [isReorder]=\"isReorder\"\n [addStepBetweenAbove]=\"addStepBetweenAbove\"\n [addStepBetweenBelow]=\"addStepBetweenBelow\"\n [addStepBetween]=\"addStepBetween\"\n [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n (branchStepChange)=\"onBranchStepChange($event.branch, $event.step, $event.stepIndex)\"\n (addStepForBranch)=\"onAddStep($event.branch)\"\n (addStepForLoop)=\"onAddStepForLoop($event, branch)\"\n (deleteStepWithBranch)=\"onDeleteStep($event.branch, $event.stepIndex)\"\n (toggleExpanded)=\"onNestedToggleExpanded($event, branch, step, i)\"\n (groupNameChange)=\"$any(step).groupName = $event; onBranchStepChange(branch, step, i)\"\n (descriptionChange)=\"$any(step).description = $event; onBranchStepChange(branch, step, i)\"\n (reusableChange)=\"$any(step).reusable = $event; onBranchStepChange(branch, step, i)\"\n (openExternal)=\"onBranchStepChange(branch, step, i)\"\n (edit)=\"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)=\"clickAction.emit($event)\"\n (editInDepth)=\"editInDepth.emit($event)\"\n (addStepBetweenClick)=\"addStepBetweenClick.emit($event)\"\n >\n </cqa-test-case-details-renderer>\n </div>\n </div>\n\n <!-- Empty branch (IF / ELSE IF / ELSE): show plus icon on hover when no steps, same as loop step -->\n <div *ngIf=\"branch.nestedSteps.length === 0\" 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()\" [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 </div>\n\n <!-- END IF Marker -->\n <div [class]=\"'cqa-pl-4 cqa-py-1 cqa-text-[#7B3306] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium'\" style=\"border-top: 1px solid #E5E7EB;\">\n END IF\n </div>\n </div>\n</div>" }]
23319
23376
  }], ctorParameters: function () { return [{ type: i1$1.FormBuilder }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { config: [{
23320
23377
  type: Input
23321
23378
  }], id: [{
@@ -23411,6 +23468,7 @@ class TestCaseStepGroupComponent {
23411
23468
  this.expanded = true;
23412
23469
  this.isNested = false;
23413
23470
  this.isInsideLoop = false;
23471
+ this.isInsideStepGroup = false;
23414
23472
  this.isReorder = false;
23415
23473
  this.selected = false;
23416
23474
  this.loading = false;
@@ -23453,6 +23511,8 @@ class TestCaseStepGroupComponent {
23453
23511
  this.stepUpdate = new EventEmitter();
23454
23512
  /** Re-emit addStepBetweenClick from nested renderers */
23455
23513
  this.addStepBetweenClick = new EventEmitter();
23514
+ /** Re-emit addStepForLoop from nested loops so N-level nesting works (empty loop add step). */
23515
+ this.addStepForLoop = new EventEmitter();
23456
23516
  this.selectionChange = new EventEmitter();
23457
23517
  }
23458
23518
  onDndDrop(event) {
@@ -23482,17 +23542,25 @@ class TestCaseStepGroupComponent {
23482
23542
  }
23483
23543
  }
23484
23544
  ngDoCheck() {
23545
+ // Sync loading from config when mutated (e.g. eager-load sets config.loading = true)
23546
+ const configLoading = this.config?.loading;
23547
+ if (typeof configLoading === 'boolean' && this.loading !== configLoading) {
23548
+ this.loading = configLoading;
23549
+ this.cdr.markForCheck();
23550
+ }
23485
23551
  // Check for deep changes in config.nestedSteps (when mutated directly)
23486
23552
  if (this.config && this.config.nestedSteps !== undefined) {
23487
23553
  const currentNestedSteps = this.config.nestedSteps;
23488
23554
  const currentLength = currentNestedSteps.length;
23489
- // Detect if nestedSteps has changed (reference or length)
23490
- if (this.previousNestedStepsReference !== currentNestedSteps ||
23491
- this.previousNestedStepsLength !== currentLength) {
23555
+ // For nested step groups, avoid overwriting with empty when we already have steps
23556
+ // (parent re-fetch or sync can temporarily set config.nestedSteps to [] before async load completes)
23557
+ const shouldSync = this.previousNestedStepsReference !== currentNestedSteps ||
23558
+ this.previousNestedStepsLength !== currentLength;
23559
+ const wouldClearSteps = currentLength === 0 && this.nestedSteps.length > 0;
23560
+ if (shouldSync && !wouldClearSteps) {
23492
23561
  this.nestedSteps = currentNestedSteps;
23493
23562
  this.previousNestedStepsReference = currentNestedSteps;
23494
23563
  this.previousNestedStepsLength = currentLength;
23495
- // Manually trigger change detection if needed
23496
23564
  this.cdr.markForCheck();
23497
23565
  }
23498
23566
  }
@@ -23506,9 +23574,13 @@ class TestCaseStepGroupComponent {
23506
23574
  this.reusable = this.config.reusable || false;
23507
23575
  this.loading = this.config.loading || false;
23508
23576
  this.selected = this.config.selected || false;
23509
- // Update nestedSteps from config if available, otherwise use the input directly
23577
+ // Update nestedSteps from config if available; for nested step groups, don't overwrite
23578
+ // with empty when we already have steps (avoids "0 steps" flash when parent re-syncs)
23510
23579
  if (this.config.nestedSteps !== undefined) {
23511
- this.nestedSteps = this.config.nestedSteps;
23580
+ const configSteps = this.config.nestedSteps;
23581
+ if (configSteps.length > 0 || this.nestedSteps.length === 0) {
23582
+ this.nestedSteps = configSteps;
23583
+ }
23512
23584
  }
23513
23585
  else if (this.nestedSteps === undefined || this.nestedSteps.length === 0) {
23514
23586
  this.nestedSteps = [];
@@ -23520,15 +23592,40 @@ class TestCaseStepGroupComponent {
23520
23592
  this.nestedSteps = [];
23521
23593
  }
23522
23594
  }
23595
+ /** True when this step group has at least one child step (used to hide "0 steps" badge). */
23596
+ hasSteps() {
23597
+ const fromConfig = this.config?.nestedSteps;
23598
+ const fromInput = this.nestedSteps;
23599
+ const steps = (fromConfig?.length ?? 0) >= (fromInput?.length ?? 0)
23600
+ ? (fromConfig ?? fromInput)
23601
+ : (fromInput ?? fromConfig);
23602
+ return !!(steps && steps.length > 0);
23603
+ }
23604
+ /**
23605
+ * Step count is derived only from the child step array length.
23606
+ * Runs on every render (no expand/collapse dependency). Used for initial load and all nesting levels.
23607
+ * For deeply nested steps with long numbers, shows "Steps 1-N (N steps)" using local indices.
23608
+ */
23523
23609
  getStepsSummary() {
23524
- if (this.nestedSteps.length === 0) {
23610
+ const fromConfig = this.config?.nestedSteps;
23611
+ const fromInput = this.nestedSteps;
23612
+ const steps = (fromConfig?.length ?? 0) >= (fromInput?.length ?? 0)
23613
+ ? (fromConfig ?? fromInput)
23614
+ : (fromInput ?? fromConfig);
23615
+ if (!steps || steps.length === 0) {
23525
23616
  return '0 steps';
23526
23617
  }
23527
- const firstStep = this.nestedSteps[0];
23528
- const lastStep = this.nestedSteps[this.nestedSteps.length - 1];
23529
- const start = firstStep.stepNumber || 1;
23530
- const end = lastStep.stepNumber || this.nestedSteps.length;
23531
- const count = this.nestedSteps.length;
23618
+ const count = steps.length;
23619
+ const firstStep = steps[0];
23620
+ const lastStep = steps[steps.length - 1];
23621
+ const startRaw = firstStep.stepNumber ?? 1;
23622
+ const endRaw = lastStep.stepNumber ?? count;
23623
+ const startStr = String(startRaw);
23624
+ const endStr = String(endRaw);
23625
+ const tooLong = startStr.length > TestCaseStepGroupComponent.MAX_STEP_NUMBER_DISPLAY_LENGTH ||
23626
+ endStr.length > TestCaseStepGroupComponent.MAX_STEP_NUMBER_DISPLAY_LENGTH;
23627
+ const start = tooLong ? 1 : startRaw;
23628
+ const end = tooLong ? count : endRaw;
23532
23629
  return `Steps ${start}-${end} (${count} step${count !== 1 ? 's' : ''})`;
23533
23630
  }
23534
23631
  onToggleExpanded() {
@@ -23668,11 +23765,13 @@ class TestCaseStepGroupComponent {
23668
23765
  this.onNestedStepChange(nestedStep, index);
23669
23766
  }
23670
23767
  }
23768
+ /** Max length for start/end step number in summary; beyond this use local indices (1 to count). */
23769
+ TestCaseStepGroupComponent.MAX_STEP_NUMBER_DISPLAY_LENGTH = 20;
23671
23770
  TestCaseStepGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseStepGroupComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
23672
- TestCaseStepGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestCaseStepGroupComponent, selector: "cqa-test-case-step-group", inputs: { config: "config", id: "id", stepNumber: "stepNumber", groupName: "groupName", description: "description", reusable: "reusable", nestedSteps: "nestedSteps", expanded: "expanded", isNested: "isNested", isInsideLoop: "isInsideLoop", isReorder: "isReorder", selected: "selected", loading: "loading", dataProfileOptions: "dataProfileOptions", hasMoreDataProfiles: "hasMoreDataProfiles", isLoadingDataProfiles: "isLoadingDataProfiles", naturalTextActionsOptions: "naturalTextActionsOptions", addStepBetweenAbove: "addStepBetweenAbove", addStepBetweenBelow: "addStepBetweenBelow", addStepBetween: "addStepBetween" }, outputs: { toggleExpanded: "toggleExpanded", groupNameChange: "groupNameChange", descriptionChange: "descriptionChange", reusableChange: "reusableChange", nestedStepChange: "nestedStepChange", addStep: "addStep", deleteStep: "deleteStep", openExternal: "openExternal", edit: "edit", editInDepth: "editInDepth", link: "link", duplicate: "duplicate", delete: "delete", viewDetails: "viewDetails", dndDropInZone: "dndDropInZone", loadMoreDataProfiles: "loadMoreDataProfiles", searchDataProfiles: "searchDataProfiles", stepUpdate: "stepUpdate", addStepBetweenClick: "addStepBetweenClick", selectionChange: "selectionChange" }, 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 [class]=\"'step-row cqa-flex cqa-gap-3 cqa-items-center cqa-py-2 ' + (isInsideLoop ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4')\">\n <div 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 isReorder is false) -->\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-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()\" class=\"cqa-p-0\">\n <svg [class.cqa-rotate-180]=\"expanded\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6L8 10L12 6\" stroke=\"#6B7280\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button>\n\n <!-- Folder Icon -->\n <div>\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M15 15C15.3978 15 15.7794 14.842 16.0607 14.5607C16.342 14.2794 16.5 13.8978 16.5 13.5V6C16.5 5.60217 16.342 5.22064 16.0607 4.93934C15.7794 4.65804 15.3978 4.5 15 4.5H9.075C8.82413 4.50246 8.57666 4.44196 8.35523 4.32403C8.13379 4.20611 7.94547 4.03453 7.8075 3.825L7.2 2.925C7.06342 2.7176 6.87748 2.54736 6.65887 2.42955C6.44027 2.31174 6.19583 2.25004 5.9475 2.25H3C2.60218 2.25 2.22064 2.40804 1.93934 2.68934C1.65804 2.97064 1.5 3.35218 1.5 3.75V13.5C1.5 13.8978 1.65804 14.2794 1.93934 14.5607C2.22064 14.842 2.60218 15 3 15H15Z\"\n fill=\"#EFF6FF\" stroke=\"#60A5FA\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </div>\n\n <!-- Group Name and Description -->\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-gap-[2px]\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <!-- Group Name Input -->\n <p class=\"cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[18px] cqa-font-bold\">{{groupName}}</p>\n <!-- Reusable Tag -->\n <span *ngIf=\"reusable\"\n class=\"cqa-px-2 cqa-py-[1.5px] cqa-rounded-lg cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-[#D8D9FC] cqa-border cqa-border-solid cqa-border-[#8A8CF4]\">\n Reusable\n </span>\n </div>\n\n <!-- Description -->\n <p class=\"cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px]\">{{description}}</p>\n </div>\n\n <!-- Steps Summary and Action Icons -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n\n <!-- External Link Icon -->\n <button type=\"button\" (click)=\"onOpenExternal(); $event.stopPropagation()\" title=\"Open in new tab\"\n class=\"cqa-p-0 cqa-text-[#99999E] hover:cqa-text-[#1447E6]\">\n <svg width=\"16\" height=\"17\" viewBox=\"0 0 16 17\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M12 8.66667V12.6667C12 13.0203 11.8595 13.3594 11.6095 13.6095C11.3594 13.8595 11.0203 14 10.6667 14H3.33333C2.97971 14 2.64057 13.8595 2.39052 13.6095C2.14048 13.3594 2 13.0203 2 12.6667V5.33333C2 4.97971 2.14048 4.64057 2.39052 4.39052C2.64057 4.14048 2.97971 4 3.33333 4H7.33333M10 2H14M14 2V6M14 2L6.66667 9.33333\"\n stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </button>\n\n <!-- Steps Summary -->\n <span class=\"cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-rounded-lg cqa-py-0.5 cqa-px-2 cqa-text-[#0A0A0A] cqa-text-[12px] cqa-leading-[15px]\">\n {{ getStepsSummary() }}\n </span>\n\n <!-- 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 <!-- Created Date (from API) - before action icons, format: 25 Feb 2026 -->\n <span *ngIf=\"config.createdDate\" class=\"cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px]\">\n {{ config.createdDate | date:'d MMM yyyy' }}\n </span>\n <!-- Action Icons (show on hover, same as API step) -->\n <div class=\"step-actions cqa-flex cqa-items-center cqa-gap-[14px] cqa-ml-auto cqa-px-[7px]\">\n\n <!-- Edit Icon -->\n <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M7 11.6666H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M9.55208 2.1128C9.7843 1.88058 10.0993 1.75012 10.4277 1.75012C10.7561 1.75012 11.071 1.88058 11.3033 2.1128C11.5355 2.34502 11.6659 2.65998 11.6659 2.98838C11.6659 3.31679 11.5355 3.63175 11.3033 3.86397L4.29742 10.8704C4.15864 11.0092 3.9871 11.1107 3.79867 11.1656L2.12333 11.6544C2.07314 11.669 2.01993 11.6699 1.96928 11.6569C1.91863 11.6439 1.8724 11.6176 1.83543 11.5806C1.79846 11.5437 1.7721 11.4974 1.75913 11.4468C1.74615 11.3961 1.74703 11.3429 1.76167 11.2927L2.2505 9.61738C2.30546 9.42916 2.40698 9.25783 2.54567 9.11922L9.55208 2.1128Z\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </button>\n\n <!-- Link Icon -->\n <!-- <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <g clip-path=\"url(#clip0_609_26588)\">\n <path\n d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\"\n stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\"\n stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </g>\n <defs>\n <clipPath id=\"clip0_609_26588\">\n <rect width=\"14\" height=\"14\" fill=\"white\" />\n </clipPath>\n </defs>\n </svg>\n </button> -->\n\n <!-- Duplicate Icon -->\n <button type=\"button\" (click)=\"onDuplicate(); $event.stopPropagation()\" title=\"Duplicate\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </button>\n\n <!-- Delete Icon -->\n <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\" class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M1.75 3.5H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M11.0827 3.5V11.6667C11.0827 12.25 10.4993 12.8333 9.91602 12.8333H4.08268C3.49935 12.8333 2.91602 12.25 2.91602 11.6667V3.5\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M4.66602 3.49996V2.33329C4.66602 1.74996 5.24935 1.16663 5.83268 1.16663H8.16602C8.74935 1.16663 9.33268 1.74996 9.33268 2.33329V3.49996\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M5.83398 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M8.16602 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button>\n </div>\n </div>\n </div>\n\n <!-- Expanded Content with Nested Steps (renderer dispatches by step type, n-level nesting) -->\n <div *ngIf=\"expanded\" class=\"cqa-flex cqa-flex-col\">\n <!-- Loading Indicator -->\n <div *ngIf=\"loading\" class=\"cqa-flex cqa-items-center cqa-justify-center cqa-py-8 cqa-px-4\">\n <div class=\"cqa-flex cqa-flex-col cqa-items-center cqa-gap-3\">\n <!-- Spinner -->\n <svg class=\"cqa-animate-spin cqa-h-6 cqa-w-6 cqa-text-[#3F43EE]\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n <circle class=\"cqa-opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n <path class=\"cqa-opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n </svg>\n <span class=\"cqa-text-[#6B7280] cqa-text-sm\">Loading steps...</span>\n </div>\n </div>\n \n <!-- Nested Steps Content (only show when not loading) -->\n <div *ngIf=\"!loading\" class=\"cqa-flex cqa-flex-col\">\n <div class=\"cqa-flex cqa-flex-col\" *ngIf=\"!isReorder\">\n <cqa-test-case-details-renderer\n *ngFor=\"let step of nestedSteps; let i = index\"\n [step]=\"step\"\n [index]=\"i\"\n [selected]=\"$any(step).selected\"\n [isNested]=\"true\"\n [isInsideStepGroup]=\"true\"\n [isReorder]=\"isReorder\"\n [addStepBetween]=\"false\"\n [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n (nestedStepChange)=\"onNestedStepChange($event.step, $event.index)\"\n (addStep)=\"onAddStep()\"\n (deleteStep)=\"onDeleteStep($event)\"\n (toggleExpanded)=\"onNestedToggleExpanded($event, step, i)\"\n (groupNameChange)=\"$any(step).groupName = $event; onNestedStepChange(step, i)\"\n (descriptionChange)=\"$any(step).description = $event; onNestedStepChange(step, i)\"\n (reusableChange)=\"$any(step).reusable = $event; onNestedStepChange(step, i)\"\n (openExternal)=\"onNestedStepChange(step, i)\"\n (edit)=\"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 >\n </cqa-test-case-details-renderer>\n </div>\n <div *ngIf=\"isReorder\" class=\"cqa-flex cqa-flex-col nested-step-drop-list\"\n [dndDropzone]=\"['step']\"\n dndEffectAllowed=\"move\"\n dndDragoverClass=\"dndDragover\"\n (dndDrop)=\"onDndDrop($event)\">\n <div dndPlaceholderRef class=\"step-drag-placeholder-nested cqa-my-1 cqa-min-h-[50px] cqa-border-2 cqa-border-dashed cqa-border-[#3F43EE] cqa-rounded cqa-bg-[rgba(63,67,238,0.08)] cqa-flex cqa-items-center cqa-justify-center cqa-text-[#3F43EE] cqa-text-xs\">Drop here</div>\n <div *ngFor=\"let step of nestedSteps; let i = index\" class=\"nested-step-drag-item\"\n [dndDraggable]=\"step\"\n dndEffectAllowed=\"move\"\n dndType=\"step\">\n <cqa-test-case-details-renderer\n [step]=\"step\"\n [index]=\"i\"\n [selected]=\"$any(step).selected\"\n [isNested]=\"true\"\n [isInsideStepGroup]=\"true\"\n [isReorder]=\"isReorder\"\n [addStepBetween]=\"false\"\n [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n (nestedStepChange)=\"onNestedStepChange($event.step, $event.index)\"\n (addStep)=\"onAddStep()\"\n (deleteStep)=\"onDeleteStep($event)\"\n (toggleExpanded)=\"onNestedToggleExpanded($event, step, i)\"\n (groupNameChange)=\"$any(step).groupName = $event; onNestedStepChange(step, i)\"\n (descriptionChange)=\"$any(step).description = $event; onNestedStepChange(step, i)\"\n (reusableChange)=\"$any(step).reusable = $event; onNestedStepChange(step, i)\"\n (openExternal)=\"onNestedStepChange(step, i)\"\n (edit)=\"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 >\n </cqa-test-case-details-renderer>\n </div>\n </div>\n\n <!-- END GROUP Marker -->\n <div [class]=\"'cqa-pl-8 cqa-py-2 cqa-border-t cqa-border-[#D1C4E9] cqa-bg-[#D1C4E9]'\">\n <span class=\"cqa-font-bold cqa-text-white cqa-text-sm cqa-uppercase\">\n END GROUP\n </span>\n </div>\n </div>\n </div>\n</div>", styles: [".step-actions{opacity:0;transition:opacity .15s ease}.step-row:hover .step-actions{opacity:1}\n"], components: [{ type: TestCaseDetailsRendererComponent, selector: "cqa-test-case-details-renderer", inputs: ["step", "index", "isNested", "isInsideLoop", "isInsideStepGroup", "branch", "isReorder", "selected", "addStepBetweenAbove", "addStepBetweenBelow", "addStepBetween", "dataProfileOptions", "hasMoreDataProfiles", "isLoadingDataProfiles", "naturalTextActionsOptions", "setConditionTemplateVariables"], outputs: ["nestedStepChange", "addStep", "deleteStep", "toggleExpanded", "groupNameChange", "descriptionChange", "reusableChange", "openExternal", "edit", "link", "duplicate", "delete", "viewDetails", "selectionChange", "conditionChange", "branchStepChange", "addStepForBranch", "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: i9.DndDropzoneDirective, selector: "[dndDropzone]", inputs: ["dndDropzone", "dndEffectAllowed", "dndAllowExternal", "dndHorizontal", "dndDragoverClass", "dndDropzoneDisabledClass", "dndDisableIf", "dndDisableDropIf"], outputs: ["dndDragover", "dndDrop"] }, { type: i9.DndPlaceholderRefDirective, selector: "[dndPlaceholderRef]" }, { type: i9.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 } });
23771
+ TestCaseStepGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TestCaseStepGroupComponent, selector: "cqa-test-case-step-group", inputs: { config: "config", id: "id", stepNumber: "stepNumber", groupName: "groupName", description: "description", reusable: "reusable", nestedSteps: "nestedSteps", expanded: "expanded", isNested: "isNested", isInsideLoop: "isInsideLoop", isInsideStepGroup: "isInsideStepGroup", isReorder: "isReorder", selected: "selected", loading: "loading", dataProfileOptions: "dataProfileOptions", hasMoreDataProfiles: "hasMoreDataProfiles", isLoadingDataProfiles: "isLoadingDataProfiles", naturalTextActionsOptions: "naturalTextActionsOptions", addStepBetweenAbove: "addStepBetweenAbove", addStepBetweenBelow: "addStepBetweenBelow", addStepBetween: "addStepBetween" }, outputs: { toggleExpanded: "toggleExpanded", groupNameChange: "groupNameChange", descriptionChange: "descriptionChange", reusableChange: "reusableChange", nestedStepChange: "nestedStepChange", addStep: "addStep", deleteStep: "deleteStep", openExternal: "openExternal", edit: "edit", editInDepth: "editInDepth", link: "link", duplicate: "duplicate", delete: "delete", viewDetails: "viewDetails", dndDropInZone: "dndDropInZone", loadMoreDataProfiles: "loadMoreDataProfiles", searchDataProfiles: "searchDataProfiles", stepUpdate: "stepUpdate", addStepBetweenClick: "addStepBetweenClick", addStepForLoop: "addStepForLoop", selectionChange: "selectionChange" }, 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 [class]=\"'step-row cqa-flex cqa-gap-3 cqa-items-center cqa-py-2 ' + (isInsideLoop && isInsideStepGroup ? 'cqa-pl-20 cqa-pr-4' : (isInsideLoop || isInsideStepGroup) ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4')\">\n <div 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 isReorder is false) -->\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-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()\" class=\"cqa-p-0\">\n <svg [class.cqa-rotate-180]=\"expanded\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6L8 10L12 6\" stroke=\"#6B7280\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button>\n\n <!-- Folder Icon -->\n <div>\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M15 15C15.3978 15 15.7794 14.842 16.0607 14.5607C16.342 14.2794 16.5 13.8978 16.5 13.5V6C16.5 5.60217 16.342 5.22064 16.0607 4.93934C15.7794 4.65804 15.3978 4.5 15 4.5H9.075C8.82413 4.50246 8.57666 4.44196 8.35523 4.32403C8.13379 4.20611 7.94547 4.03453 7.8075 3.825L7.2 2.925C7.06342 2.7176 6.87748 2.54736 6.65887 2.42955C6.44027 2.31174 6.19583 2.25004 5.9475 2.25H3C2.60218 2.25 2.22064 2.40804 1.93934 2.68934C1.65804 2.97064 1.5 3.35218 1.5 3.75V13.5C1.5 13.8978 1.65804 14.2794 1.93934 14.5607C2.22064 14.842 2.60218 15 3 15H15Z\"\n fill=\"#EFF6FF\" stroke=\"#60A5FA\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </div>\n\n <!-- Group Name and Description -->\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-gap-[2px]\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <!-- Group Name Input -->\n <p class=\"cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[18px] cqa-font-bold\">{{groupName}}</p>\n <!-- Reusable Tag -->\n <span *ngIf=\"reusable\"\n class=\"cqa-px-2 cqa-py-[1.5px] cqa-rounded-lg cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-[#D8D9FC] cqa-border cqa-border-solid cqa-border-[#8A8CF4]\">\n Reusable\n </span>\n </div>\n\n <!-- Description -->\n <p class=\"cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px]\">{{description}}</p>\n </div>\n\n <!-- Steps Summary and Action Icons -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n\n <!-- External Link Icon -->\n <button type=\"button\" (click)=\"onOpenExternal(); $event.stopPropagation()\" title=\"Open in new tab\"\n class=\"cqa-p-0 cqa-text-[#99999E] hover:cqa-text-[#1447E6]\">\n <svg width=\"16\" height=\"17\" viewBox=\"0 0 16 17\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M12 8.66667V12.6667C12 13.0203 11.8595 13.3594 11.6095 13.6095C11.3594 13.8595 11.0203 14 10.6667 14H3.33333C2.97971 14 2.64057 13.8595 2.39052 13.6095C2.14048 13.3594 2 13.0203 2 12.6667V5.33333C2 4.97971 2.14048 4.64057 2.39052 4.39052C2.64057 4.14048 2.97971 4 3.33333 4H7.33333M10 2H14M14 2V6M14 2L6.66667 9.33333\"\n stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </button>\n\n <!-- Steps Summary (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-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 <!-- Created Date (from API) - before action icons, format: 25 Feb 2026 -->\n <span *ngIf=\"config.createdDate\" class=\"cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px]\">\n {{ config.createdDate | date:'d MMM yyyy' }}\n </span>\n <!-- Action Icons (show on hover, same as API step) -->\n <div class=\"step-actions cqa-flex cqa-items-center cqa-gap-[14px] cqa-ml-auto cqa-px-[7px]\">\n\n <!-- Edit Icon -->\n <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M7 11.6666H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M9.55208 2.1128C9.7843 1.88058 10.0993 1.75012 10.4277 1.75012C10.7561 1.75012 11.071 1.88058 11.3033 2.1128C11.5355 2.34502 11.6659 2.65998 11.6659 2.98838C11.6659 3.31679 11.5355 3.63175 11.3033 3.86397L4.29742 10.8704C4.15864 11.0092 3.9871 11.1107 3.79867 11.1656L2.12333 11.6544C2.07314 11.669 2.01993 11.6699 1.96928 11.6569C1.91863 11.6439 1.8724 11.6176 1.83543 11.5806C1.79846 11.5437 1.7721 11.4974 1.75913 11.4468C1.74615 11.3961 1.74703 11.3429 1.76167 11.2927L2.2505 9.61738C2.30546 9.42916 2.40698 9.25783 2.54567 9.11922L9.55208 2.1128Z\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </button>\n\n <!-- Link Icon -->\n <!-- <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <g clip-path=\"url(#clip0_609_26588)\">\n <path\n d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\"\n stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\"\n stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </g>\n <defs>\n <clipPath id=\"clip0_609_26588\">\n <rect width=\"14\" height=\"14\" fill=\"white\" />\n </clipPath>\n </defs>\n </svg>\n </button> -->\n\n <!-- Duplicate Icon -->\n <button type=\"button\" (click)=\"onDuplicate(); $event.stopPropagation()\" title=\"Duplicate\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </button>\n\n <!-- Delete Icon -->\n <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\" class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M1.75 3.5H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M11.0827 3.5V11.6667C11.0827 12.25 10.4993 12.8333 9.91602 12.8333H4.08268C3.49935 12.8333 2.91602 12.25 2.91602 11.6667V3.5\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M4.66602 3.49996V2.33329C4.66602 1.74996 5.24935 1.16663 5.83268 1.16663H8.16602C8.74935 1.16663 9.33268 1.74996 9.33268 2.33329V3.49996\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M5.83398 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M8.16602 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button>\n </div>\n </div>\n </div>\n\n <!-- Expanded Content with Nested Steps (indent so 14.1.1, 14.1.2 sit under 14.1) -->\n <div *ngIf=\"expanded\" [class]=\"'cqa-flex cqa-flex-col ' + (isInsideLoop && isInsideStepGroup ? 'cqa-pl-20' : (isInsideLoop || isInsideStepGroup) ? 'cqa-pl-10' : 'cqa-pl-10')\">\n <!-- Loading Indicator -->\n <div *ngIf=\"loading\" class=\"cqa-flex cqa-items-center cqa-justify-center cqa-py-8 cqa-px-4\">\n <div class=\"cqa-flex cqa-flex-col cqa-items-center cqa-gap-3\">\n <!-- Spinner -->\n <svg class=\"cqa-animate-spin cqa-h-6 cqa-w-6 cqa-text-[#3F43EE]\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n <circle class=\"cqa-opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n <path class=\"cqa-opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n </svg>\n <span class=\"cqa-text-[#6B7280] cqa-text-sm\">Loading steps...</span>\n </div>\n </div>\n \n <!-- Nested Steps Content (only show when not loading) -->\n <div *ngIf=\"!loading\" class=\"cqa-flex cqa-flex-col\">\n <div class=\"cqa-flex cqa-flex-col\" *ngIf=\"!isReorder\">\n <cqa-test-case-details-renderer\n *ngFor=\"let step of nestedSteps; let i = index\"\n [step]=\"step\"\n [index]=\"i\"\n [selected]=\"$any(step).selected\"\n [isNested]=\"true\"\n [isInsideStepGroup]=\"true\"\n [isReorder]=\"isReorder\"\n [addStepBetween]=\"false\"\n [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n (nestedStepChange)=\"onNestedStepChange($event.step, $event.index)\"\n (addStep)=\"onAddStep()\"\n (deleteStep)=\"onDeleteStep($event)\"\n (toggleExpanded)=\"onNestedToggleExpanded($event, step, i)\"\n (groupNameChange)=\"$any(step).groupName = $event; onNestedStepChange(step, i)\"\n (descriptionChange)=\"$any(step).description = $event; onNestedStepChange(step, i)\"\n (reusableChange)=\"$any(step).reusable = $event; onNestedStepChange(step, i)\"\n (openExternal)=\"onNestedStepChange(step, i)\"\n (edit)=\"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 *ngIf=\"isReorder\" class=\"cqa-flex cqa-flex-col nested-step-drop-list\"\n [dndDropzone]=\"['step']\"\n dndEffectAllowed=\"move\"\n dndDragoverClass=\"dndDragover\"\n (dndDrop)=\"onDndDrop($event)\">\n <div dndPlaceholderRef class=\"step-drag-placeholder-nested cqa-my-1 cqa-min-h-[50px] cqa-border-2 cqa-border-dashed cqa-border-[#3F43EE] cqa-rounded cqa-bg-[rgba(63,67,238,0.08)] cqa-flex cqa-items-center cqa-justify-center cqa-text-[#3F43EE] cqa-text-xs\">Drop here</div>\n <div *ngFor=\"let step of nestedSteps; let i = index\" class=\"nested-step-drag-item\"\n [dndDraggable]=\"step\"\n dndEffectAllowed=\"move\"\n dndType=\"step\">\n <cqa-test-case-details-renderer\n [step]=\"step\"\n [index]=\"i\"\n [selected]=\"$any(step).selected\"\n [isNested]=\"true\"\n [isInsideStepGroup]=\"true\"\n [isReorder]=\"isReorder\"\n [addStepBetween]=\"false\"\n [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n (nestedStepChange)=\"onNestedStepChange($event.step, $event.index)\"\n (addStep)=\"onAddStep()\"\n (deleteStep)=\"onDeleteStep($event)\"\n (toggleExpanded)=\"onNestedToggleExpanded($event, step, i)\"\n (groupNameChange)=\"$any(step).groupName = $event; onNestedStepChange(step, i)\"\n (descriptionChange)=\"$any(step).description = $event; onNestedStepChange(step, i)\"\n (reusableChange)=\"$any(step).reusable = $event; onNestedStepChange(step, i)\"\n (openExternal)=\"onNestedStepChange(step, i)\"\n (edit)=\"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 -->\n <div [class]=\"'cqa-pl-8 cqa-py-2 cqa-border-t cqa-border-[#D1C4E9] cqa-bg-[#D1C4E9]'\">\n <span class=\"cqa-font-bold cqa-text-white cqa-text-sm cqa-uppercase\">\n END GROUP\n </span>\n </div>\n </div>\n </div>\n</div>", styles: [".step-actions{opacity:0;transition:opacity .15s ease}.step-row:hover .step-actions{opacity:1}\n"], components: [{ type: TestCaseDetailsRendererComponent, selector: "cqa-test-case-details-renderer", inputs: ["step", "index", "isNested", "isInsideLoop", "isInsideStepGroup", "branch", "isReorder", "selected", "addStepBetweenAbove", "addStepBetweenBelow", "addStepBetween", "dataProfileOptions", "hasMoreDataProfiles", "isLoadingDataProfiles", "naturalTextActionsOptions", "setConditionTemplateVariables"], outputs: ["nestedStepChange", "addStep", "deleteStep", "toggleExpanded", "groupNameChange", "descriptionChange", "reusableChange", "openExternal", "edit", "link", "duplicate", "delete", "viewDetails", "selectionChange", "conditionChange", "branchStepChange", "addStepForBranch", "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: i9.DndDropzoneDirective, selector: "[dndDropzone]", inputs: ["dndDropzone", "dndEffectAllowed", "dndAllowExternal", "dndHorizontal", "dndDragoverClass", "dndDropzoneDisabledClass", "dndDisableIf", "dndDisableDropIf"], outputs: ["dndDragover", "dndDrop"] }, { type: i9.DndPlaceholderRefDirective, selector: "[dndPlaceholderRef]" }, { type: i9.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 } });
23673
23772
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseStepGroupComponent, decorators: [{
23674
23773
  type: Component,
23675
- 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 [class]=\"'step-row cqa-flex cqa-gap-3 cqa-items-center cqa-py-2 ' + (isInsideLoop ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4')\">\n <div 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 isReorder is false) -->\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-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()\" class=\"cqa-p-0\">\n <svg [class.cqa-rotate-180]=\"expanded\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6L8 10L12 6\" stroke=\"#6B7280\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button>\n\n <!-- Folder Icon -->\n <div>\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M15 15C15.3978 15 15.7794 14.842 16.0607 14.5607C16.342 14.2794 16.5 13.8978 16.5 13.5V6C16.5 5.60217 16.342 5.22064 16.0607 4.93934C15.7794 4.65804 15.3978 4.5 15 4.5H9.075C8.82413 4.50246 8.57666 4.44196 8.35523 4.32403C8.13379 4.20611 7.94547 4.03453 7.8075 3.825L7.2 2.925C7.06342 2.7176 6.87748 2.54736 6.65887 2.42955C6.44027 2.31174 6.19583 2.25004 5.9475 2.25H3C2.60218 2.25 2.22064 2.40804 1.93934 2.68934C1.65804 2.97064 1.5 3.35218 1.5 3.75V13.5C1.5 13.8978 1.65804 14.2794 1.93934 14.5607C2.22064 14.842 2.60218 15 3 15H15Z\"\n fill=\"#EFF6FF\" stroke=\"#60A5FA\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </div>\n\n <!-- Group Name and Description -->\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-gap-[2px]\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <!-- Group Name Input -->\n <p class=\"cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[18px] cqa-font-bold\">{{groupName}}</p>\n <!-- Reusable Tag -->\n <span *ngIf=\"reusable\"\n class=\"cqa-px-2 cqa-py-[1.5px] cqa-rounded-lg cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-[#D8D9FC] cqa-border cqa-border-solid cqa-border-[#8A8CF4]\">\n Reusable\n </span>\n </div>\n\n <!-- Description -->\n <p class=\"cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px]\">{{description}}</p>\n </div>\n\n <!-- Steps Summary and Action Icons -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n\n <!-- External Link Icon -->\n <button type=\"button\" (click)=\"onOpenExternal(); $event.stopPropagation()\" title=\"Open in new tab\"\n class=\"cqa-p-0 cqa-text-[#99999E] hover:cqa-text-[#1447E6]\">\n <svg width=\"16\" height=\"17\" viewBox=\"0 0 16 17\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M12 8.66667V12.6667C12 13.0203 11.8595 13.3594 11.6095 13.6095C11.3594 13.8595 11.0203 14 10.6667 14H3.33333C2.97971 14 2.64057 13.8595 2.39052 13.6095C2.14048 13.3594 2 13.0203 2 12.6667V5.33333C2 4.97971 2.14048 4.64057 2.39052 4.39052C2.64057 4.14048 2.97971 4 3.33333 4H7.33333M10 2H14M14 2V6M14 2L6.66667 9.33333\"\n stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </button>\n\n <!-- Steps Summary -->\n <span class=\"cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-rounded-lg cqa-py-0.5 cqa-px-2 cqa-text-[#0A0A0A] cqa-text-[12px] cqa-leading-[15px]\">\n {{ getStepsSummary() }}\n </span>\n\n <!-- 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 <!-- Created Date (from API) - before action icons, format: 25 Feb 2026 -->\n <span *ngIf=\"config.createdDate\" class=\"cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px]\">\n {{ config.createdDate | date:'d MMM yyyy' }}\n </span>\n <!-- Action Icons (show on hover, same as API step) -->\n <div class=\"step-actions cqa-flex cqa-items-center cqa-gap-[14px] cqa-ml-auto cqa-px-[7px]\">\n\n <!-- Edit Icon -->\n <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M7 11.6666H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M9.55208 2.1128C9.7843 1.88058 10.0993 1.75012 10.4277 1.75012C10.7561 1.75012 11.071 1.88058 11.3033 2.1128C11.5355 2.34502 11.6659 2.65998 11.6659 2.98838C11.6659 3.31679 11.5355 3.63175 11.3033 3.86397L4.29742 10.8704C4.15864 11.0092 3.9871 11.1107 3.79867 11.1656L2.12333 11.6544C2.07314 11.669 2.01993 11.6699 1.96928 11.6569C1.91863 11.6439 1.8724 11.6176 1.83543 11.5806C1.79846 11.5437 1.7721 11.4974 1.75913 11.4468C1.74615 11.3961 1.74703 11.3429 1.76167 11.2927L2.2505 9.61738C2.30546 9.42916 2.40698 9.25783 2.54567 9.11922L9.55208 2.1128Z\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </button>\n\n <!-- Link Icon -->\n <!-- <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <g clip-path=\"url(#clip0_609_26588)\">\n <path\n d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\"\n stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\"\n stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </g>\n <defs>\n <clipPath id=\"clip0_609_26588\">\n <rect width=\"14\" height=\"14\" fill=\"white\" />\n </clipPath>\n </defs>\n </svg>\n </button> -->\n\n <!-- Duplicate Icon -->\n <button type=\"button\" (click)=\"onDuplicate(); $event.stopPropagation()\" title=\"Duplicate\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </button>\n\n <!-- Delete Icon -->\n <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\" class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M1.75 3.5H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M11.0827 3.5V11.6667C11.0827 12.25 10.4993 12.8333 9.91602 12.8333H4.08268C3.49935 12.8333 2.91602 12.25 2.91602 11.6667V3.5\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M4.66602 3.49996V2.33329C4.66602 1.74996 5.24935 1.16663 5.83268 1.16663H8.16602C8.74935 1.16663 9.33268 1.74996 9.33268 2.33329V3.49996\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M5.83398 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M8.16602 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button>\n </div>\n </div>\n </div>\n\n <!-- Expanded Content with Nested Steps (renderer dispatches by step type, n-level nesting) -->\n <div *ngIf=\"expanded\" class=\"cqa-flex cqa-flex-col\">\n <!-- Loading Indicator -->\n <div *ngIf=\"loading\" class=\"cqa-flex cqa-items-center cqa-justify-center cqa-py-8 cqa-px-4\">\n <div class=\"cqa-flex cqa-flex-col cqa-items-center cqa-gap-3\">\n <!-- Spinner -->\n <svg class=\"cqa-animate-spin cqa-h-6 cqa-w-6 cqa-text-[#3F43EE]\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n <circle class=\"cqa-opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n <path class=\"cqa-opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n </svg>\n <span class=\"cqa-text-[#6B7280] cqa-text-sm\">Loading steps...</span>\n </div>\n </div>\n \n <!-- Nested Steps Content (only show when not loading) -->\n <div *ngIf=\"!loading\" class=\"cqa-flex cqa-flex-col\">\n <div class=\"cqa-flex cqa-flex-col\" *ngIf=\"!isReorder\">\n <cqa-test-case-details-renderer\n *ngFor=\"let step of nestedSteps; let i = index\"\n [step]=\"step\"\n [index]=\"i\"\n [selected]=\"$any(step).selected\"\n [isNested]=\"true\"\n [isInsideStepGroup]=\"true\"\n [isReorder]=\"isReorder\"\n [addStepBetween]=\"false\"\n [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n (nestedStepChange)=\"onNestedStepChange($event.step, $event.index)\"\n (addStep)=\"onAddStep()\"\n (deleteStep)=\"onDeleteStep($event)\"\n (toggleExpanded)=\"onNestedToggleExpanded($event, step, i)\"\n (groupNameChange)=\"$any(step).groupName = $event; onNestedStepChange(step, i)\"\n (descriptionChange)=\"$any(step).description = $event; onNestedStepChange(step, i)\"\n (reusableChange)=\"$any(step).reusable = $event; onNestedStepChange(step, i)\"\n (openExternal)=\"onNestedStepChange(step, i)\"\n (edit)=\"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 >\n </cqa-test-case-details-renderer>\n </div>\n <div *ngIf=\"isReorder\" class=\"cqa-flex cqa-flex-col nested-step-drop-list\"\n [dndDropzone]=\"['step']\"\n dndEffectAllowed=\"move\"\n dndDragoverClass=\"dndDragover\"\n (dndDrop)=\"onDndDrop($event)\">\n <div dndPlaceholderRef class=\"step-drag-placeholder-nested cqa-my-1 cqa-min-h-[50px] cqa-border-2 cqa-border-dashed cqa-border-[#3F43EE] cqa-rounded cqa-bg-[rgba(63,67,238,0.08)] cqa-flex cqa-items-center cqa-justify-center cqa-text-[#3F43EE] cqa-text-xs\">Drop here</div>\n <div *ngFor=\"let step of nestedSteps; let i = index\" class=\"nested-step-drag-item\"\n [dndDraggable]=\"step\"\n dndEffectAllowed=\"move\"\n dndType=\"step\">\n <cqa-test-case-details-renderer\n [step]=\"step\"\n [index]=\"i\"\n [selected]=\"$any(step).selected\"\n [isNested]=\"true\"\n [isInsideStepGroup]=\"true\"\n [isReorder]=\"isReorder\"\n [addStepBetween]=\"false\"\n [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n (nestedStepChange)=\"onNestedStepChange($event.step, $event.index)\"\n (addStep)=\"onAddStep()\"\n (deleteStep)=\"onDeleteStep($event)\"\n (toggleExpanded)=\"onNestedToggleExpanded($event, step, i)\"\n (groupNameChange)=\"$any(step).groupName = $event; onNestedStepChange(step, i)\"\n (descriptionChange)=\"$any(step).description = $event; onNestedStepChange(step, i)\"\n (reusableChange)=\"$any(step).reusable = $event; onNestedStepChange(step, i)\"\n (openExternal)=\"onNestedStepChange(step, i)\"\n (edit)=\"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 >\n </cqa-test-case-details-renderer>\n </div>\n </div>\n\n <!-- END GROUP Marker -->\n <div [class]=\"'cqa-pl-8 cqa-py-2 cqa-border-t cqa-border-[#D1C4E9] cqa-bg-[#D1C4E9]'\">\n <span class=\"cqa-font-bold cqa-text-white cqa-text-sm cqa-uppercase\">\n END GROUP\n </span>\n </div>\n </div>\n </div>\n</div>" }]
23774
+ 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 [class]=\"'step-row cqa-flex cqa-gap-3 cqa-items-center cqa-py-2 ' + (isInsideLoop && isInsideStepGroup ? 'cqa-pl-20 cqa-pr-4' : (isInsideLoop || isInsideStepGroup) ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4')\">\n <div 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 isReorder is false) -->\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-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()\" class=\"cqa-p-0\">\n <svg [class.cqa-rotate-180]=\"expanded\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4 6L8 10L12 6\" stroke=\"#6B7280\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button>\n\n <!-- Folder Icon -->\n <div>\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M15 15C15.3978 15 15.7794 14.842 16.0607 14.5607C16.342 14.2794 16.5 13.8978 16.5 13.5V6C16.5 5.60217 16.342 5.22064 16.0607 4.93934C15.7794 4.65804 15.3978 4.5 15 4.5H9.075C8.82413 4.50246 8.57666 4.44196 8.35523 4.32403C8.13379 4.20611 7.94547 4.03453 7.8075 3.825L7.2 2.925C7.06342 2.7176 6.87748 2.54736 6.65887 2.42955C6.44027 2.31174 6.19583 2.25004 5.9475 2.25H3C2.60218 2.25 2.22064 2.40804 1.93934 2.68934C1.65804 2.97064 1.5 3.35218 1.5 3.75V13.5C1.5 13.8978 1.65804 14.2794 1.93934 14.5607C2.22064 14.842 2.60218 15 3 15H15Z\"\n fill=\"#EFF6FF\" stroke=\"#60A5FA\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </div>\n\n <!-- Group Name and Description -->\n <div class=\"cqa-flex cqa-flex-col cqa-flex-1 cqa-gap-[2px]\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <!-- Group Name Input -->\n <p class=\"cqa-text-[#3F43EE] cqa-text-[14px] cqa-leading-[18px] cqa-font-bold\">{{groupName}}</p>\n <!-- Reusable Tag -->\n <span *ngIf=\"reusable\"\n class=\"cqa-px-2 cqa-py-[1.5px] cqa-rounded-lg cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-bg-[#D8D9FC] cqa-border cqa-border-solid cqa-border-[#8A8CF4]\">\n Reusable\n </span>\n </div>\n\n <!-- Description -->\n <p class=\"cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px]\">{{description}}</p>\n </div>\n\n <!-- Steps Summary and Action Icons -->\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n\n <!-- External Link Icon -->\n <button type=\"button\" (click)=\"onOpenExternal(); $event.stopPropagation()\" title=\"Open in new tab\"\n class=\"cqa-p-0 cqa-text-[#99999E] hover:cqa-text-[#1447E6]\">\n <svg width=\"16\" height=\"17\" viewBox=\"0 0 16 17\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M12 8.66667V12.6667C12 13.0203 11.8595 13.3594 11.6095 13.6095C11.3594 13.8595 11.0203 14 10.6667 14H3.33333C2.97971 14 2.64057 13.8595 2.39052 13.6095C2.14048 13.3594 2 13.0203 2 12.6667V5.33333C2 4.97971 2.14048 4.64057 2.39052 4.39052C2.64057 4.14048 2.97971 4 3.33333 4H7.33333M10 2H14M14 2V6M14 2L6.66667 9.33333\"\n stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </button>\n\n <!-- Steps Summary (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-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 <!-- Created Date (from API) - before action icons, format: 25 Feb 2026 -->\n <span *ngIf=\"config.createdDate\" class=\"cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px]\">\n {{ config.createdDate | date:'d MMM yyyy' }}\n </span>\n <!-- Action Icons (show on hover, same as API step) -->\n <div class=\"step-actions cqa-flex cqa-items-center cqa-gap-[14px] cqa-ml-auto cqa-px-[7px]\">\n\n <!-- Edit Icon -->\n <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M7 11.6666H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M9.55208 2.1128C9.7843 1.88058 10.0993 1.75012 10.4277 1.75012C10.7561 1.75012 11.071 1.88058 11.3033 2.1128C11.5355 2.34502 11.6659 2.65998 11.6659 2.98838C11.6659 3.31679 11.5355 3.63175 11.3033 3.86397L4.29742 10.8704C4.15864 11.0092 3.9871 11.1107 3.79867 11.1656L2.12333 11.6544C2.07314 11.669 2.01993 11.6699 1.96928 11.6569C1.91863 11.6439 1.8724 11.6176 1.83543 11.5806C1.79846 11.5437 1.7721 11.4974 1.75913 11.4468C1.74615 11.3961 1.74703 11.3429 1.76167 11.2927L2.2505 9.61738C2.30546 9.42916 2.40698 9.25783 2.54567 9.11922L9.55208 2.1128Z\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </button>\n\n <!-- Link Icon -->\n <!-- <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <g clip-path=\"url(#clip0_609_26588)\">\n <path\n d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\"\n stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\"\n stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </g>\n <defs>\n <clipPath id=\"clip0_609_26588\">\n <rect width=\"14\" height=\"14\" fill=\"white\" />\n </clipPath>\n </defs>\n </svg>\n </button> -->\n\n <!-- Duplicate Icon -->\n <button type=\"button\" (click)=\"onDuplicate(); $event.stopPropagation()\" title=\"Duplicate\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </button>\n\n <!-- Delete Icon -->\n <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\" class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M1.75 3.5H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M11.0827 3.5V11.6667C11.0827 12.25 10.4993 12.8333 9.91602 12.8333H4.08268C3.49935 12.8333 2.91602 12.25 2.91602 11.6667V3.5\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M4.66602 3.49996V2.33329C4.66602 1.74996 5.24935 1.16663 5.83268 1.16663H8.16602C8.74935 1.16663 9.33268 1.74996 9.33268 2.33329V3.49996\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M5.83398 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M8.16602 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button>\n </div>\n </div>\n </div>\n\n <!-- Expanded Content with Nested Steps (indent so 14.1.1, 14.1.2 sit under 14.1) -->\n <div *ngIf=\"expanded\" [class]=\"'cqa-flex cqa-flex-col ' + (isInsideLoop && isInsideStepGroup ? 'cqa-pl-20' : (isInsideLoop || isInsideStepGroup) ? 'cqa-pl-10' : 'cqa-pl-10')\">\n <!-- Loading Indicator -->\n <div *ngIf=\"loading\" class=\"cqa-flex cqa-items-center cqa-justify-center cqa-py-8 cqa-px-4\">\n <div class=\"cqa-flex cqa-flex-col cqa-items-center cqa-gap-3\">\n <!-- Spinner -->\n <svg class=\"cqa-animate-spin cqa-h-6 cqa-w-6 cqa-text-[#3F43EE]\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n <circle class=\"cqa-opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n <path class=\"cqa-opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n </svg>\n <span class=\"cqa-text-[#6B7280] cqa-text-sm\">Loading steps...</span>\n </div>\n </div>\n \n <!-- Nested Steps Content (only show when not loading) -->\n <div *ngIf=\"!loading\" class=\"cqa-flex cqa-flex-col\">\n <div class=\"cqa-flex cqa-flex-col\" *ngIf=\"!isReorder\">\n <cqa-test-case-details-renderer\n *ngFor=\"let step of nestedSteps; let i = index\"\n [step]=\"step\"\n [index]=\"i\"\n [selected]=\"$any(step).selected\"\n [isNested]=\"true\"\n [isInsideStepGroup]=\"true\"\n [isReorder]=\"isReorder\"\n [addStepBetween]=\"false\"\n [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n (nestedStepChange)=\"onNestedStepChange($event.step, $event.index)\"\n (addStep)=\"onAddStep()\"\n (deleteStep)=\"onDeleteStep($event)\"\n (toggleExpanded)=\"onNestedToggleExpanded($event, step, i)\"\n (groupNameChange)=\"$any(step).groupName = $event; onNestedStepChange(step, i)\"\n (descriptionChange)=\"$any(step).description = $event; onNestedStepChange(step, i)\"\n (reusableChange)=\"$any(step).reusable = $event; onNestedStepChange(step, i)\"\n (openExternal)=\"onNestedStepChange(step, i)\"\n (edit)=\"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 *ngIf=\"isReorder\" class=\"cqa-flex cqa-flex-col nested-step-drop-list\"\n [dndDropzone]=\"['step']\"\n dndEffectAllowed=\"move\"\n dndDragoverClass=\"dndDragover\"\n (dndDrop)=\"onDndDrop($event)\">\n <div dndPlaceholderRef class=\"step-drag-placeholder-nested cqa-my-1 cqa-min-h-[50px] cqa-border-2 cqa-border-dashed cqa-border-[#3F43EE] cqa-rounded cqa-bg-[rgba(63,67,238,0.08)] cqa-flex cqa-items-center cqa-justify-center cqa-text-[#3F43EE] cqa-text-xs\">Drop here</div>\n <div *ngFor=\"let step of nestedSteps; let i = index\" class=\"nested-step-drag-item\"\n [dndDraggable]=\"step\"\n dndEffectAllowed=\"move\"\n dndType=\"step\">\n <cqa-test-case-details-renderer\n [step]=\"step\"\n [index]=\"i\"\n [selected]=\"$any(step).selected\"\n [isNested]=\"true\"\n [isInsideStepGroup]=\"true\"\n [isReorder]=\"isReorder\"\n [addStepBetween]=\"false\"\n [dataProfileOptions]=\"dataProfileOptions\" [hasMoreDataProfiles]=\"hasMoreDataProfiles\" [isLoadingDataProfiles]=\"isLoadingDataProfiles\"\n [naturalTextActionsOptions]=\"naturalTextActionsOptions\"\n (nestedStepChange)=\"onNestedStepChange($event.step, $event.index)\"\n (addStep)=\"onAddStep()\"\n (deleteStep)=\"onDeleteStep($event)\"\n (toggleExpanded)=\"onNestedToggleExpanded($event, step, i)\"\n (groupNameChange)=\"$any(step).groupName = $event; onNestedStepChange(step, i)\"\n (descriptionChange)=\"$any(step).description = $event; onNestedStepChange(step, i)\"\n (reusableChange)=\"$any(step).reusable = $event; onNestedStepChange(step, i)\"\n (openExternal)=\"onNestedStepChange(step, i)\"\n (edit)=\"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 -->\n <div [class]=\"'cqa-pl-8 cqa-py-2 cqa-border-t cqa-border-[#D1C4E9] cqa-bg-[#D1C4E9]'\">\n <span class=\"cqa-font-bold cqa-text-white cqa-text-sm cqa-uppercase\">\n END GROUP\n </span>\n </div>\n </div>\n </div>\n</div>" }]
23676
23775
  }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { config: [{
23677
23776
  type: Input
23678
23777
  }], id: [{
@@ -23693,6 +23792,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
23693
23792
  type: Input
23694
23793
  }], isInsideLoop: [{
23695
23794
  type: Input
23795
+ }], isInsideStepGroup: [{
23796
+ type: Input
23696
23797
  }], isReorder: [{
23697
23798
  type: Input
23698
23799
  }], selected: [{
@@ -23754,6 +23855,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
23754
23855
  type: Output
23755
23856
  }], addStepBetweenClick: [{
23756
23857
  type: Output
23858
+ }], addStepForLoop: [{
23859
+ type: Output
23757
23860
  }], selectionChange: [{
23758
23861
  type: Output
23759
23862
  }] } });
@@ -23859,10 +23962,10 @@ class TestCaseApiStepComponent {
23859
23962
  onSelectionChange(checked) { this.selected = checked; this.selectionChange.emit(checked); }
23860
23963
  }
23861
23964
  TestCaseApiStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseApiStepComponent, deps: [{ token: i1$5.OverlayContainer }], target: i0.ɵɵFactoryTarget.Component });
23862
- 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", 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" }, 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;\">\n <div\n [class]=\"'step-row cqa-flex cqa-items-start cqa-gap-3 cqa-py-[12.5px] ' + (isInsideLoop ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4')\">\n <div class=\"cqa-inline-flex cqa-items-center\">\n <!-- Drag Handle Icon (when isReorder is true) - 9-dot grid (3x3) -->\n <div *ngIf=\"isReorder\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n </svg>\n </div>\n <!-- Checkbox (when isReorder is false) -->\n <label *ngIf=\"!isReorder\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative 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 <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 cqa-justify-between\">\n <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px]\">{{ getDisplayText() }}</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' }}\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 <!-- Expanded details: light yellow box with 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\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 class=\"cqa-flex cqa-items-center cqa-gap-3\">\n <!-- Created Date (from API) - before action icons, format: 25 Feb 2026 -->\n <span *ngIf=\"config.createdDate\" class=\"cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px]\">\n {{ config.createdDate | date:'d MMM yyyy' }}\n </span>\n <div *ngIf=\"!isInsideStepGroup\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-3 cqa-px-[7px]\">\n <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\"\n class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M7 11.6666H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M9.55208 2.1128C9.7843 1.88058 10.0993 1.75012 10.4277 1.75012C10.7561 1.75012 11.071 1.88058 11.3033 2.1128C11.5355 2.34502 11.6659 2.65998 11.6659 2.98838C11.6659 3.31679 11.5355 3.63175 11.3033 3.86397L4.29742 10.8704C4.15864 11.0092 3.9871 11.1107 3.79867 11.1656L2.12333 11.6544C2.07314 11.669 2.01993 11.6699 1.96928 11.6569C1.91863 11.6439 1.8724 11.6176 1.83543 11.5806C1.79846 11.5437 1.7721 11.4974 1.75913 11.4468C1.74615 11.3961 1.74703 11.3429 1.76167 11.2927L2.2505 9.61738C2.30546 9.42916 2.40698 9.25783 2.54567 9.11922L9.55208 2.1128Z\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </button>\n <!-- <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\"\n class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\"\n stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\"\n stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button> -->\n <button type=\"button\" (click)=\"onDuplicate(); $event.stopPropagation()\" title=\"Duplicate\"\n class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </button>\n <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\"\n class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M1.75 3.5H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M11.0827 3.5V11.6667C11.0827 12.25 10.4993 12.8333 9.91602 12.8333H4.08268C3.49935 12.8333 2.91602 12.25 2.91602 11.6667V3.5\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M4.66602 3.49996V2.33329C4.66602 1.74996 5.24935 1.16663 5.83268 1.16663H8.16602C8.74935 1.16663 9.33268 1.74996 9.33268 2.33329V3.49996\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M5.83398 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M8.16602 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button>\n </div>\n </div>\n </div>\n</div>", styles: [".step-actions{opacity:0;transition:opacity .15s ease}.step-row:hover .step-actions{opacity:1}\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 } });
23965
+ 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", 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" }, 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;\">\n <div\n [class]=\"'step-row cqa-flex cqa-items-start cqa-gap-3 cqa-py-[12.5px] ' + (isInsideLoop && isInsideStepGroup ? 'cqa-pl-20 cqa-pr-4' : (isInsideLoop || isInsideStepGroup) ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4')\">\n <div class=\"cqa-inline-flex cqa-items-center\">\n <!-- Drag Handle Icon (when isReorder is true) - 9-dot grid (3x3) -->\n <div *ngIf=\"isReorder\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n </svg>\n </div>\n <!-- Checkbox (when isReorder is false) -->\n <label *ngIf=\"!isReorder\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative 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 <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 cqa-justify-between\">\n <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px]\">{{ getDisplayText() }}</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' }}\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 <!-- Expanded details: light yellow box with 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\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 class=\"cqa-flex cqa-items-center cqa-gap-3\">\n <!-- Created Date (from API) - before action icons, format: 25 Feb 2026 -->\n <span *ngIf=\"config.createdDate\" class=\"cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px]\">\n {{ config.createdDate | date:'d MMM yyyy' }}\n </span>\n <div *ngIf=\"!isInsideStepGroup\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-3 cqa-px-[7px]\">\n <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\"\n class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M7 11.6666H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M9.55208 2.1128C9.7843 1.88058 10.0993 1.75012 10.4277 1.75012C10.7561 1.75012 11.071 1.88058 11.3033 2.1128C11.5355 2.34502 11.6659 2.65998 11.6659 2.98838C11.6659 3.31679 11.5355 3.63175 11.3033 3.86397L4.29742 10.8704C4.15864 11.0092 3.9871 11.1107 3.79867 11.1656L2.12333 11.6544C2.07314 11.669 2.01993 11.6699 1.96928 11.6569C1.91863 11.6439 1.8724 11.6176 1.83543 11.5806C1.79846 11.5437 1.7721 11.4974 1.75913 11.4468C1.74615 11.3961 1.74703 11.3429 1.76167 11.2927L2.2505 9.61738C2.30546 9.42916 2.40698 9.25783 2.54567 9.11922L9.55208 2.1128Z\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </button>\n <!-- <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\"\n class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\"\n stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\"\n stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button> -->\n <button type=\"button\" (click)=\"onDuplicate(); $event.stopPropagation()\" title=\"Duplicate\"\n class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </button>\n <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\"\n class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M1.75 3.5H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M11.0827 3.5V11.6667C11.0827 12.25 10.4993 12.8333 9.91602 12.8333H4.08268C3.49935 12.8333 2.91602 12.25 2.91602 11.6667V3.5\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M4.66602 3.49996V2.33329C4.66602 1.74996 5.24935 1.16663 5.83268 1.16663H8.16602C8.74935 1.16663 9.33268 1.74996 9.33268 2.33329V3.49996\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M5.83398 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M8.16602 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button>\n </div>\n </div>\n </div>\n</div>", styles: [".step-actions{opacity:0;transition:opacity .15s ease}.step-row:hover .step-actions{opacity:1}\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 } });
23863
23966
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseApiStepComponent, decorators: [{
23864
23967
  type: Component,
23865
- 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;\">\n <div\n [class]=\"'step-row cqa-flex cqa-items-start cqa-gap-3 cqa-py-[12.5px] ' + (isInsideLoop ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4')\">\n <div class=\"cqa-inline-flex cqa-items-center\">\n <!-- Drag Handle Icon (when isReorder is true) - 9-dot grid (3x3) -->\n <div *ngIf=\"isReorder\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n </svg>\n </div>\n <!-- Checkbox (when isReorder is false) -->\n <label *ngIf=\"!isReorder\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative 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 <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 cqa-justify-between\">\n <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px]\">{{ getDisplayText() }}</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' }}\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 <!-- Expanded details: light yellow box with 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\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 class=\"cqa-flex cqa-items-center cqa-gap-3\">\n <!-- Created Date (from API) - before action icons, format: 25 Feb 2026 -->\n <span *ngIf=\"config.createdDate\" class=\"cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px]\">\n {{ config.createdDate | date:'d MMM yyyy' }}\n </span>\n <div *ngIf=\"!isInsideStepGroup\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-3 cqa-px-[7px]\">\n <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\"\n class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M7 11.6666H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M9.55208 2.1128C9.7843 1.88058 10.0993 1.75012 10.4277 1.75012C10.7561 1.75012 11.071 1.88058 11.3033 2.1128C11.5355 2.34502 11.6659 2.65998 11.6659 2.98838C11.6659 3.31679 11.5355 3.63175 11.3033 3.86397L4.29742 10.8704C4.15864 11.0092 3.9871 11.1107 3.79867 11.1656L2.12333 11.6544C2.07314 11.669 2.01993 11.6699 1.96928 11.6569C1.91863 11.6439 1.8724 11.6176 1.83543 11.5806C1.79846 11.5437 1.7721 11.4974 1.75913 11.4468C1.74615 11.3961 1.74703 11.3429 1.76167 11.2927L2.2505 9.61738C2.30546 9.42916 2.40698 9.25783 2.54567 9.11922L9.55208 2.1128Z\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </button>\n <!-- <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\"\n class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\"\n stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\"\n stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button> -->\n <button type=\"button\" (click)=\"onDuplicate(); $event.stopPropagation()\" title=\"Duplicate\"\n class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </button>\n <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\"\n class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M1.75 3.5H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M11.0827 3.5V11.6667C11.0827 12.25 10.4993 12.8333 9.91602 12.8333H4.08268C3.49935 12.8333 2.91602 12.25 2.91602 11.6667V3.5\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M4.66602 3.49996V2.33329C4.66602 1.74996 5.24935 1.16663 5.83268 1.16663H8.16602C8.74935 1.16663 9.33268 1.74996 9.33268 2.33329V3.49996\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M5.83398 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M8.16602 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button>\n </div>\n </div>\n </div>\n</div>" }]
23968
+ 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;\">\n <div\n [class]=\"'step-row cqa-flex cqa-items-start cqa-gap-3 cqa-py-[12.5px] ' + (isInsideLoop && isInsideStepGroup ? 'cqa-pl-20 cqa-pr-4' : (isInsideLoop || isInsideStepGroup) ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4')\">\n <div class=\"cqa-inline-flex cqa-items-center\">\n <!-- Drag Handle Icon (when isReorder is true) - 9-dot grid (3x3) -->\n <div *ngIf=\"isReorder\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n </svg>\n </div>\n <!-- Checkbox (when isReorder is false) -->\n <label *ngIf=\"!isReorder\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative 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 <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 cqa-justify-between\">\n <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px]\">{{ getDisplayText() }}</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' }}\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 <!-- Expanded details: light yellow box with 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\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 class=\"cqa-flex cqa-items-center cqa-gap-3\">\n <!-- Created Date (from API) - before action icons, format: 25 Feb 2026 -->\n <span *ngIf=\"config.createdDate\" class=\"cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px]\">\n {{ config.createdDate | date:'d MMM yyyy' }}\n </span>\n <div *ngIf=\"!isInsideStepGroup\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-3 cqa-px-[7px]\">\n <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\"\n class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M7 11.6666H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M9.55208 2.1128C9.7843 1.88058 10.0993 1.75012 10.4277 1.75012C10.7561 1.75012 11.071 1.88058 11.3033 2.1128C11.5355 2.34502 11.6659 2.65998 11.6659 2.98838C11.6659 3.31679 11.5355 3.63175 11.3033 3.86397L4.29742 10.8704C4.15864 11.0092 3.9871 11.1107 3.79867 11.1656L2.12333 11.6544C2.07314 11.669 2.01993 11.6699 1.96928 11.6569C1.91863 11.6439 1.8724 11.6176 1.83543 11.5806C1.79846 11.5437 1.7721 11.4974 1.75913 11.4468C1.74615 11.3961 1.74703 11.3429 1.76167 11.2927L2.2505 9.61738C2.30546 9.42916 2.40698 9.25783 2.54567 9.11922L9.55208 2.1128Z\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </button>\n <!-- <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\"\n class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\"\n stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\"\n stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button> -->\n <button type=\"button\" (click)=\"onDuplicate(); $event.stopPropagation()\" title=\"Duplicate\"\n class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </button>\n <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\"\n class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M1.75 3.5H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M11.0827 3.5V11.6667C11.0827 12.25 10.4993 12.8333 9.91602 12.8333H4.08268C3.49935 12.8333 2.91602 12.25 2.91602 11.6667V3.5\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M4.66602 3.49996V2.33329C4.66602 1.74996 5.24935 1.16663 5.83268 1.16663H8.16602C8.74935 1.16663 9.33268 1.74996 9.33268 2.33329V3.49996\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M5.83398 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M8.16602 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button>\n </div>\n </div>\n </div>\n</div>" }]
23866
23969
  }], ctorParameters: function () { return [{ type: i1$5.OverlayContainer }]; }, propDecorators: { editModalBackdropRef: [{
23867
23970
  type: ViewChild,
23868
23971
  args: ['editModalBackdrop']
@@ -23990,10 +24093,10 @@ class TestCaseDatabaseStepComponent {
23990
24093
  onQueryChange(value) { this.query = value; this.queryChange.emit(value); }
23991
24094
  }
23992
24095
  TestCaseDatabaseStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseDatabaseStepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
23993
- 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", query: "query", description: "description", databaseType: "databaseType", connectionName: "connectionName", saveTo: "saveTo", selected: "selected", disabled: "disabled", isNested: "isNested", isInsideStepGroup: "isInsideStepGroup", isInsideLoop: "isInsideLoop", expanded: "expanded", isReorder: "isReorder" }, outputs: { edit: "edit", editInDepth: "editInDepth", link: "link", duplicate: "duplicate", delete: "delete", viewDetails: "viewDetails", selectionChange: "selectionChange", toggleExpanded: "toggleExpanded", connectionNameChange: "connectionNameChange", queryChange: "queryChange" }, host: { classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col\" style=\"border-top: 1px solid #E5E7EB;\">\n <div\n [class]=\"'step-row cqa-flex cqa-items-start cqa-gap-3 cqa-py-[12.5px] ' + (isInsideLoop ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4')\">\n <div class=\"cqa-inline-flex cqa-items-center\">\n <!-- Drag Handle Icon (when isReorder is true) - 9-dot grid (3x3) -->\n <div *ngIf=\"isReorder\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n </svg>\n </div>\n <!-- Checkbox (when isReorder is false) -->\n <label *ngIf=\"!isReorder\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative 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 <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]\">\n {{ query }}\n </span>\n <!-- Created Date (from API) -->\n <span *ngIf=\"config.createdDate\" class=\"cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px]\">\n {{ config.createdDate | date:'d MMM yyyy' }}\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-3\">\n <div *ngIf=\"!isInsideStepGroup\" 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]\"><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)=\"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 </div>\n </div>\n</div>", styles: [".step-actions{opacity:0;transition:opacity .15s ease}.step-row:hover .step-actions{opacity:1}\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 } });
24096
+ 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", query: "query", description: "description", databaseType: "databaseType", connectionName: "connectionName", saveTo: "saveTo", selected: "selected", disabled: "disabled", isNested: "isNested", isInsideStepGroup: "isInsideStepGroup", isInsideLoop: "isInsideLoop", expanded: "expanded", isReorder: "isReorder" }, outputs: { edit: "edit", editInDepth: "editInDepth", link: "link", duplicate: "duplicate", delete: "delete", viewDetails: "viewDetails", selectionChange: "selectionChange", toggleExpanded: "toggleExpanded", connectionNameChange: "connectionNameChange", queryChange: "queryChange" }, host: { classAttribute: "cqa-ui-root" }, ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col\" style=\"border-top: 1px solid #E5E7EB;\">\n <div\n [class]=\"'step-row cqa-flex cqa-items-start cqa-gap-3 cqa-py-[12.5px] ' + (isInsideLoop && isInsideStepGroup ? 'cqa-pl-20 cqa-pr-4' : (isInsideLoop || isInsideStepGroup) ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4')\">\n <div class=\"cqa-inline-flex cqa-items-center\">\n <!-- Drag Handle Icon (when isReorder is true) - 9-dot grid (3x3) -->\n <div *ngIf=\"isReorder\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n </svg>\n </div>\n <!-- Checkbox (when isReorder is false) -->\n <label *ngIf=\"!isReorder\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative 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 <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]\">\n {{ query }}\n </span>\n <!-- Created Date (from API) -->\n <span *ngIf=\"config.createdDate\" class=\"cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px]\">\n {{ config.createdDate | date:'d MMM yyyy' }}\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-3\">\n <div *ngIf=\"!isInsideStepGroup\" 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]\"><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)=\"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 </div>\n </div>\n</div>", styles: [".step-actions{opacity:0;transition:opacity .15s ease}.step-row:hover .step-actions{opacity:1}\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 } });
23994
24097
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseDatabaseStepComponent, decorators: [{
23995
24098
  type: Component,
23996
- 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;\">\n <div\n [class]=\"'step-row cqa-flex cqa-items-start cqa-gap-3 cqa-py-[12.5px] ' + (isInsideLoop ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4')\">\n <div class=\"cqa-inline-flex cqa-items-center\">\n <!-- Drag Handle Icon (when isReorder is true) - 9-dot grid (3x3) -->\n <div *ngIf=\"isReorder\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n </svg>\n </div>\n <!-- Checkbox (when isReorder is false) -->\n <label *ngIf=\"!isReorder\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative 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 <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]\">\n {{ query }}\n </span>\n <!-- Created Date (from API) -->\n <span *ngIf=\"config.createdDate\" class=\"cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px]\">\n {{ config.createdDate | date:'d MMM yyyy' }}\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-3\">\n <div *ngIf=\"!isInsideStepGroup\" 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]\"><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)=\"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 </div>\n </div>\n</div>" }]
24099
+ 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;\">\n <div\n [class]=\"'step-row cqa-flex cqa-items-start cqa-gap-3 cqa-py-[12.5px] ' + (isInsideLoop && isInsideStepGroup ? 'cqa-pl-20 cqa-pr-4' : (isInsideLoop || isInsideStepGroup) ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4')\">\n <div class=\"cqa-inline-flex cqa-items-center\">\n <!-- Drag Handle Icon (when isReorder is true) - 9-dot grid (3x3) -->\n <div *ngIf=\"isReorder\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n </svg>\n </div>\n <!-- Checkbox (when isReorder is false) -->\n <label *ngIf=\"!isReorder\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative 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 <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]\">\n {{ query }}\n </span>\n <!-- Created Date (from API) -->\n <span *ngIf=\"config.createdDate\" class=\"cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px]\">\n {{ config.createdDate | date:'d MMM yyyy' }}\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-3\">\n <div *ngIf=\"!isInsideStepGroup\" 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]\"><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)=\"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 </div>\n </div>\n</div>" }]
23997
24100
  }], propDecorators: { config: [{
23998
24101
  type: Input
23999
24102
  }], stepNumber: [{
@@ -24098,10 +24201,10 @@ class TestCaseAiAgentStepComponent {
24098
24201
  onSelectionChange(checked) { this.selected = checked; this.selectionChange.emit(checked); }
24099
24202
  }
24100
24203
  TestCaseAiAgentStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseAiAgentStepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
24101
- 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" }, outputs: { edit: "edit", editInDepth: "editInDepth", link: "link", duplicate: "duplicate", delete: "delete", moreOptions: "moreOptions", viewDetails: "viewDetails", selectionChange: "selectionChange" }, 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-[12.5px] ' + (isInsideLoop ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4')\" style=\"border-bottom: 1px solid #E5E7EB;\">\n <div class=\"cqa-inline-flex cqa-items-center\">\n <!-- Drag Handle Icon (when isReorder is true) - 9-dot grid (3x3) -->\n <div *ngIf=\"isReorder\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n </svg>\n </div>\n <!-- Checkbox (when isReorder is false) -->\n <label *ngIf=\"!isReorder\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative 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 <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px] cqa-min-w-[32px]\">{{ stepNumber }}</span>\n <span title=\"AI Agent\" class=\"cqa-w-8 cqa-h-8 cqa-rounded-lg cqa-flex cqa-items-center cqa-justify-center cqa-flex-shrink-0 cqa-bg-[#EDE9FE] cqa-text-[#7C3AED]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.797 9.04165C5.74492 8.83977 5.63969 8.65554 5.49227 8.50812C5.34485 8.3607 5.16062 8.25548 4.95875 8.2034L1.38 7.28057C1.31894 7.26324 1.2652 7.22646 1.22694 7.17583C1.18867 7.12519 1.16797 7.06345 1.16797 6.99998C1.16797 6.93651 1.18867 6.87478 1.22694 6.82414C1.2652 6.7735 1.31894 6.73673 1.38 6.7194L4.95875 5.79598C5.16055 5.74395 5.34473 5.63882 5.49215 5.49151C5.63956 5.34419 5.74483 5.16008 5.797 4.95832L6.71983 1.37957C6.73698 1.31827 6.77372 1.26427 6.82443 1.2258C6.87515 1.18733 6.93705 1.1665 7.0007 1.1665C7.06436 1.1665 7.12626 1.18733 7.17698 1.2258C7.22769 1.26427 7.26442 1.31827 7.28158 1.37957L8.20383 4.95832C8.25591 5.16019 8.36113 5.34442 8.50855 5.49184C8.65597 5.63926 8.8402 5.74449 9.04208 5.79657L12.6208 6.71882C12.6824 6.73579 12.7366 6.77249 12.7753 6.82328C12.814 6.87407 12.8349 6.93614 12.8349 6.99998C12.8349 7.06382 12.814 7.1259 12.7753 7.17669C12.7366 7.22748 12.6824 7.26417 12.6208 7.28115L9.04208 8.2034C8.8402 8.25548 8.65597 8.3607 8.50855 8.50812C8.36113 8.65554 8.25591 8.83977 8.20383 9.04165L7.281 12.6204C7.26384 12.6817 7.22711 12.7357 7.17639 12.7742C7.12568 12.8126 7.06377 12.8335 7.00012 12.8335C6.93647 12.8335 6.87456 12.8126 6.82385 12.7742C6.77314 12.7357 6.7364 12.6817 6.71925 12.6204L5.797 9.04165Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11.666 1.75V4.08333\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M12.8333 2.91663H10.5\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.33398 9.91663V11.0833\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.91667 10.5H1.75\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </span>\n <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px]\" [innerHtml]=\"instructions\"></span>\n <div class=\"cqa-flex-grow\"></div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-3\">\n <!-- Created Date (from API) -->\n <span *ngIf=\"config.createdDate\" class=\"cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px]\">\n {{ config.createdDate | date:'d MMM yyyy' }}\n </span>\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-2 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 <div *ngIf=\"!isInsideStepGroup\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-3 cqa-px-[7px]\">\n <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><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)=\"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 </div>\n</div>\n", styles: [".step-actions{opacity:0;transition:opacity .15s ease}.step-row:hover .step-actions{opacity:1}\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 } });
24204
+ 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" }, outputs: { edit: "edit", editInDepth: "editInDepth", link: "link", duplicate: "duplicate", delete: "delete", moreOptions: "moreOptions", viewDetails: "viewDetails", selectionChange: "selectionChange" }, 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-[12.5px] ' + (isInsideLoop && isInsideStepGroup ? 'cqa-pl-20 cqa-pr-4' : (isInsideLoop || isInsideStepGroup) ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4')\" style=\"border-bottom: 1px solid #E5E7EB;\">\n <div class=\"cqa-inline-flex cqa-items-center\">\n <!-- Drag Handle Icon (when isReorder is true) - 9-dot grid (3x3) -->\n <div *ngIf=\"isReorder\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n </svg>\n </div>\n <!-- Checkbox (when isReorder is false) -->\n <label *ngIf=\"!isReorder\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative 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 <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px] cqa-min-w-[32px]\">{{ stepNumber }}</span>\n <span title=\"AI Agent\" class=\"cqa-w-8 cqa-h-8 cqa-rounded-lg cqa-flex cqa-items-center cqa-justify-center cqa-flex-shrink-0 cqa-bg-[#EDE9FE] cqa-text-[#7C3AED]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.797 9.04165C5.74492 8.83977 5.63969 8.65554 5.49227 8.50812C5.34485 8.3607 5.16062 8.25548 4.95875 8.2034L1.38 7.28057C1.31894 7.26324 1.2652 7.22646 1.22694 7.17583C1.18867 7.12519 1.16797 7.06345 1.16797 6.99998C1.16797 6.93651 1.18867 6.87478 1.22694 6.82414C1.2652 6.7735 1.31894 6.73673 1.38 6.7194L4.95875 5.79598C5.16055 5.74395 5.34473 5.63882 5.49215 5.49151C5.63956 5.34419 5.74483 5.16008 5.797 4.95832L6.71983 1.37957C6.73698 1.31827 6.77372 1.26427 6.82443 1.2258C6.87515 1.18733 6.93705 1.1665 7.0007 1.1665C7.06436 1.1665 7.12626 1.18733 7.17698 1.2258C7.22769 1.26427 7.26442 1.31827 7.28158 1.37957L8.20383 4.95832C8.25591 5.16019 8.36113 5.34442 8.50855 5.49184C8.65597 5.63926 8.8402 5.74449 9.04208 5.79657L12.6208 6.71882C12.6824 6.73579 12.7366 6.77249 12.7753 6.82328C12.814 6.87407 12.8349 6.93614 12.8349 6.99998C12.8349 7.06382 12.814 7.1259 12.7753 7.17669C12.7366 7.22748 12.6824 7.26417 12.6208 7.28115L9.04208 8.2034C8.8402 8.25548 8.65597 8.3607 8.50855 8.50812C8.36113 8.65554 8.25591 8.83977 8.20383 9.04165L7.281 12.6204C7.26384 12.6817 7.22711 12.7357 7.17639 12.7742C7.12568 12.8126 7.06377 12.8335 7.00012 12.8335C6.93647 12.8335 6.87456 12.8126 6.82385 12.7742C6.77314 12.7357 6.7364 12.6817 6.71925 12.6204L5.797 9.04165Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11.666 1.75V4.08333\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M12.8333 2.91663H10.5\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.33398 9.91663V11.0833\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.91667 10.5H1.75\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </span>\n <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px]\" [innerHtml]=\"instructions\"></span>\n <div class=\"cqa-flex-grow\"></div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-3\">\n <!-- Created Date (from API) -->\n <span *ngIf=\"config.createdDate\" class=\"cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px]\">\n {{ config.createdDate | date:'d MMM yyyy' }}\n </span>\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-2 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 <div *ngIf=\"!isInsideStepGroup\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-3 cqa-px-[7px]\">\n <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><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)=\"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 </div>\n</div>\n", styles: [".step-actions{opacity:0;transition:opacity .15s ease}.step-row:hover .step-actions{opacity:1}\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 } });
24102
24205
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseAiAgentStepComponent, decorators: [{
24103
24206
  type: Component,
24104
- 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-[12.5px] ' + (isInsideLoop ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4')\" style=\"border-bottom: 1px solid #E5E7EB;\">\n <div class=\"cqa-inline-flex cqa-items-center\">\n <!-- Drag Handle Icon (when isReorder is true) - 9-dot grid (3x3) -->\n <div *ngIf=\"isReorder\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n </svg>\n </div>\n <!-- Checkbox (when isReorder is false) -->\n <label *ngIf=\"!isReorder\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative 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 <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px] cqa-min-w-[32px]\">{{ stepNumber }}</span>\n <span title=\"AI Agent\" class=\"cqa-w-8 cqa-h-8 cqa-rounded-lg cqa-flex cqa-items-center cqa-justify-center cqa-flex-shrink-0 cqa-bg-[#EDE9FE] cqa-text-[#7C3AED]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.797 9.04165C5.74492 8.83977 5.63969 8.65554 5.49227 8.50812C5.34485 8.3607 5.16062 8.25548 4.95875 8.2034L1.38 7.28057C1.31894 7.26324 1.2652 7.22646 1.22694 7.17583C1.18867 7.12519 1.16797 7.06345 1.16797 6.99998C1.16797 6.93651 1.18867 6.87478 1.22694 6.82414C1.2652 6.7735 1.31894 6.73673 1.38 6.7194L4.95875 5.79598C5.16055 5.74395 5.34473 5.63882 5.49215 5.49151C5.63956 5.34419 5.74483 5.16008 5.797 4.95832L6.71983 1.37957C6.73698 1.31827 6.77372 1.26427 6.82443 1.2258C6.87515 1.18733 6.93705 1.1665 7.0007 1.1665C7.06436 1.1665 7.12626 1.18733 7.17698 1.2258C7.22769 1.26427 7.26442 1.31827 7.28158 1.37957L8.20383 4.95832C8.25591 5.16019 8.36113 5.34442 8.50855 5.49184C8.65597 5.63926 8.8402 5.74449 9.04208 5.79657L12.6208 6.71882C12.6824 6.73579 12.7366 6.77249 12.7753 6.82328C12.814 6.87407 12.8349 6.93614 12.8349 6.99998C12.8349 7.06382 12.814 7.1259 12.7753 7.17669C12.7366 7.22748 12.6824 7.26417 12.6208 7.28115L9.04208 8.2034C8.8402 8.25548 8.65597 8.3607 8.50855 8.50812C8.36113 8.65554 8.25591 8.83977 8.20383 9.04165L7.281 12.6204C7.26384 12.6817 7.22711 12.7357 7.17639 12.7742C7.12568 12.8126 7.06377 12.8335 7.00012 12.8335C6.93647 12.8335 6.87456 12.8126 6.82385 12.7742C6.77314 12.7357 6.7364 12.6817 6.71925 12.6204L5.797 9.04165Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11.666 1.75V4.08333\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M12.8333 2.91663H10.5\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.33398 9.91663V11.0833\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.91667 10.5H1.75\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </span>\n <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px]\" [innerHtml]=\"instructions\"></span>\n <div class=\"cqa-flex-grow\"></div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-3\">\n <!-- Created Date (from API) -->\n <span *ngIf=\"config.createdDate\" class=\"cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px]\">\n {{ config.createdDate | date:'d MMM yyyy' }}\n </span>\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-2 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 <div *ngIf=\"!isInsideStepGroup\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-3 cqa-px-[7px]\">\n <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><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)=\"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 </div>\n</div>\n" }]
24207
+ 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-[12.5px] ' + (isInsideLoop && isInsideStepGroup ? 'cqa-pl-20 cqa-pr-4' : (isInsideLoop || isInsideStepGroup) ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4')\" style=\"border-bottom: 1px solid #E5E7EB;\">\n <div class=\"cqa-inline-flex cqa-items-center\">\n <!-- Drag Handle Icon (when isReorder is true) - 9-dot grid (3x3) -->\n <div *ngIf=\"isReorder\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n </svg>\n </div>\n <!-- Checkbox (when isReorder is false) -->\n <label *ngIf=\"!isReorder\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative 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 <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px] cqa-min-w-[32px]\">{{ stepNumber }}</span>\n <span title=\"AI Agent\" class=\"cqa-w-8 cqa-h-8 cqa-rounded-lg cqa-flex cqa-items-center cqa-justify-center cqa-flex-shrink-0 cqa-bg-[#EDE9FE] cqa-text-[#7C3AED]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.797 9.04165C5.74492 8.83977 5.63969 8.65554 5.49227 8.50812C5.34485 8.3607 5.16062 8.25548 4.95875 8.2034L1.38 7.28057C1.31894 7.26324 1.2652 7.22646 1.22694 7.17583C1.18867 7.12519 1.16797 7.06345 1.16797 6.99998C1.16797 6.93651 1.18867 6.87478 1.22694 6.82414C1.2652 6.7735 1.31894 6.73673 1.38 6.7194L4.95875 5.79598C5.16055 5.74395 5.34473 5.63882 5.49215 5.49151C5.63956 5.34419 5.74483 5.16008 5.797 4.95832L6.71983 1.37957C6.73698 1.31827 6.77372 1.26427 6.82443 1.2258C6.87515 1.18733 6.93705 1.1665 7.0007 1.1665C7.06436 1.1665 7.12626 1.18733 7.17698 1.2258C7.22769 1.26427 7.26442 1.31827 7.28158 1.37957L8.20383 4.95832C8.25591 5.16019 8.36113 5.34442 8.50855 5.49184C8.65597 5.63926 8.8402 5.74449 9.04208 5.79657L12.6208 6.71882C12.6824 6.73579 12.7366 6.77249 12.7753 6.82328C12.814 6.87407 12.8349 6.93614 12.8349 6.99998C12.8349 7.06382 12.814 7.1259 12.7753 7.17669C12.7366 7.22748 12.6824 7.26417 12.6208 7.28115L9.04208 8.2034C8.8402 8.25548 8.65597 8.3607 8.50855 8.50812C8.36113 8.65554 8.25591 8.83977 8.20383 9.04165L7.281 12.6204C7.26384 12.6817 7.22711 12.7357 7.17639 12.7742C7.12568 12.8126 7.06377 12.8335 7.00012 12.8335C6.93647 12.8335 6.87456 12.8126 6.82385 12.7742C6.77314 12.7357 6.7364 12.6817 6.71925 12.6204L5.797 9.04165Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11.666 1.75V4.08333\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M12.8333 2.91663H10.5\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.33398 9.91663V11.0833\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.91667 10.5H1.75\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </span>\n <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px]\" [innerHtml]=\"instructions\"></span>\n <div class=\"cqa-flex-grow\"></div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-3\">\n <!-- Created Date (from API) -->\n <span *ngIf=\"config.createdDate\" class=\"cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px]\">\n {{ config.createdDate | date:'d MMM yyyy' }}\n </span>\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-2 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 <div *ngIf=\"!isInsideStepGroup\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-3 cqa-px-[7px]\">\n <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><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)=\"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 </div>\n</div>\n" }]
24105
24208
  }], ctorParameters: function () { return []; }, propDecorators: { config: [{
24106
24209
  type: Input
24107
24210
  }], stepNumber: [{
@@ -24199,10 +24302,10 @@ class TestCaseAiVerifyStepComponent {
24199
24302
  onSelectionChange(checked) { this.selected = checked; this.selectionChange.emit(checked); }
24200
24303
  }
24201
24304
  TestCaseAiVerifyStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseAiVerifyStepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
24202
- 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", instructions: "instructions", description: "description", selected: "selected", disabled: "disabled", isNested: "isNested", isInsideStepGroup: "isInsideStepGroup", isInsideLoop: "isInsideLoop", isReorder: "isReorder" }, outputs: { edit: "edit", editInDepth: "editInDepth", link: "link", duplicate: "duplicate", delete: "delete", moreOptions: "moreOptions", viewDetails: "viewDetails", selectionChange: "selectionChange" }, 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-[12.5px] ' + (isInsideLoop ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4')\" style=\"border-bottom: 1px solid #E5E7EB;\">\n <div class=\"cqa-inline-flex cqa-items-center\">\n <!-- Drag Handle Icon (when isReorder is true) - 9-dot grid (3x3) -->\n <div *ngIf=\"isReorder\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n </svg>\n </div>\n <!-- Checkbox (when isReorder is false) -->\n <label *ngIf=\"!isReorder\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative 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 <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px] cqa-min-w-[32px]\">{{ stepNumber }}</span>\n <span title=\"AI Verify\" class=\"cqa-w-8 cqa-h-8 cqa-rounded-lg cqa-flex cqa-items-center cqa-justify-center cqa-flex-shrink-0 cqa-bg-[#F3E8FF] cqa-text-[#7E22CE]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.797 9.04165C5.74492 8.83977 5.63969 8.65554 5.49227 8.50812C5.34485 8.3607 5.16062 8.25548 4.95875 8.2034L1.38 7.28057C1.31894 7.26324 1.2652 7.22646 1.22694 7.17583C1.18867 7.12519 1.16797 7.06345 1.16797 6.99998C1.16797 6.93651 1.18867 6.87478 1.22694 6.82414C1.2652 6.7735 1.31894 6.73673 1.38 6.7194L4.95875 5.79598C5.16055 5.74395 5.34473 5.63882 5.49215 5.49151C5.63956 5.34419 5.74483 5.16008 5.797 4.95832L6.71983 1.37957C6.73698 1.31827 6.77372 1.26427 6.82443 1.2258C6.87515 1.18733 6.93705 1.1665 7.0007 1.1665C7.06436 1.1665 7.12626 1.18733 7.17698 1.2258C7.22769 1.26427 7.26442 1.31827 7.28158 1.37957L8.20383 4.95832C8.25591 5.16019 8.36113 5.34442 8.50855 5.49184C8.65597 5.63926 8.8402 5.74449 9.04208 5.79657L12.6208 6.71882C12.6824 6.73579 12.7366 6.77249 12.7753 6.82328C12.814 6.87407 12.8349 6.93614 12.8349 6.99998C12.8349 7.06382 12.814 7.1259 12.7753 7.17669C12.7366 7.22748 12.6824 7.26417 12.6208 7.28115L9.04208 8.2034C8.8402 8.25548 8.65597 8.3607 8.50855 8.50812C8.36113 8.65554 8.25591 8.83977 8.20383 9.04165L7.281 12.6204C7.26384 12.6817 7.22711 12.7357 7.17639 12.7742C7.12568 12.8126 7.06377 12.8335 7.00012 12.8335C6.93647 12.8335 6.87456 12.8126 6.82385 12.7742C6.77314 12.7357 6.7364 12.6817 6.71925 12.6204L5.797 9.04165Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11.666 1.75V4.08333\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M12.8333 2.91663H10.5\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.33398 9.91663V11.0833\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.91667 10.5H1.75\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </span>\n <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px]\" [innerHtml]=\"instructions\"></span>\n <div class=\"cqa-flex-grow\"></div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-3\">\n <!-- Created Date (from API) -->\n <span *ngIf=\"config.createdDate\" class=\"cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px]\">\n {{ config.createdDate | date:'d MMM yyyy' }}\n </span>\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-2 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 <div *ngIf=\"!isInsideStepGroup\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-3 cqa-px-[7px]\">\n <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><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)=\"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 </div>\n</div>\n", styles: [".step-actions{opacity:0;transition:opacity .15s ease}.step-row:hover .step-actions{opacity:1}\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 } });
24305
+ 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", instructions: "instructions", description: "description", selected: "selected", disabled: "disabled", isNested: "isNested", isInsideStepGroup: "isInsideStepGroup", isInsideLoop: "isInsideLoop", isReorder: "isReorder" }, outputs: { edit: "edit", editInDepth: "editInDepth", link: "link", duplicate: "duplicate", delete: "delete", moreOptions: "moreOptions", viewDetails: "viewDetails", selectionChange: "selectionChange" }, 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-[12.5px] ' + (isInsideLoop && isInsideStepGroup ? 'cqa-pl-20 cqa-pr-4' : (isInsideLoop || isInsideStepGroup) ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4')\" style=\"border-bottom: 1px solid #E5E7EB;\">\n <div class=\"cqa-inline-flex cqa-items-center\">\n <!-- Drag Handle Icon (when isReorder is true) - 9-dot grid (3x3) -->\n <div *ngIf=\"isReorder\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n </svg>\n </div>\n <!-- Checkbox (when isReorder is false) -->\n <label *ngIf=\"!isReorder\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative 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 <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px] cqa-min-w-[32px]\">{{ stepNumber }}</span>\n <span title=\"AI Verify\" class=\"cqa-w-8 cqa-h-8 cqa-rounded-lg cqa-flex cqa-items-center cqa-justify-center cqa-flex-shrink-0 cqa-bg-[#F3E8FF] cqa-text-[#7E22CE]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.797 9.04165C5.74492 8.83977 5.63969 8.65554 5.49227 8.50812C5.34485 8.3607 5.16062 8.25548 4.95875 8.2034L1.38 7.28057C1.31894 7.26324 1.2652 7.22646 1.22694 7.17583C1.18867 7.12519 1.16797 7.06345 1.16797 6.99998C1.16797 6.93651 1.18867 6.87478 1.22694 6.82414C1.2652 6.7735 1.31894 6.73673 1.38 6.7194L4.95875 5.79598C5.16055 5.74395 5.34473 5.63882 5.49215 5.49151C5.63956 5.34419 5.74483 5.16008 5.797 4.95832L6.71983 1.37957C6.73698 1.31827 6.77372 1.26427 6.82443 1.2258C6.87515 1.18733 6.93705 1.1665 7.0007 1.1665C7.06436 1.1665 7.12626 1.18733 7.17698 1.2258C7.22769 1.26427 7.26442 1.31827 7.28158 1.37957L8.20383 4.95832C8.25591 5.16019 8.36113 5.34442 8.50855 5.49184C8.65597 5.63926 8.8402 5.74449 9.04208 5.79657L12.6208 6.71882C12.6824 6.73579 12.7366 6.77249 12.7753 6.82328C12.814 6.87407 12.8349 6.93614 12.8349 6.99998C12.8349 7.06382 12.814 7.1259 12.7753 7.17669C12.7366 7.22748 12.6824 7.26417 12.6208 7.28115L9.04208 8.2034C8.8402 8.25548 8.65597 8.3607 8.50855 8.50812C8.36113 8.65554 8.25591 8.83977 8.20383 9.04165L7.281 12.6204C7.26384 12.6817 7.22711 12.7357 7.17639 12.7742C7.12568 12.8126 7.06377 12.8335 7.00012 12.8335C6.93647 12.8335 6.87456 12.8126 6.82385 12.7742C6.77314 12.7357 6.7364 12.6817 6.71925 12.6204L5.797 9.04165Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11.666 1.75V4.08333\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M12.8333 2.91663H10.5\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.33398 9.91663V11.0833\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.91667 10.5H1.75\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </span>\n <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px]\" [innerHtml]=\"instructions\"></span>\n <div class=\"cqa-flex-grow\"></div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-3\">\n <!-- Created Date (from API) -->\n <span *ngIf=\"config.createdDate\" class=\"cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px]\">\n {{ config.createdDate | date:'d MMM yyyy' }}\n </span>\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-2 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 <div *ngIf=\"!isInsideStepGroup\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-3 cqa-px-[7px]\">\n <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><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)=\"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 </div>\n</div>\n", styles: [".step-actions{opacity:0;transition:opacity .15s ease}.step-row:hover .step-actions{opacity:1}\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 } });
24203
24306
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseAiVerifyStepComponent, decorators: [{
24204
24307
  type: Component,
24205
- 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-[12.5px] ' + (isInsideLoop ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4')\" style=\"border-bottom: 1px solid #E5E7EB;\">\n <div class=\"cqa-inline-flex cqa-items-center\">\n <!-- Drag Handle Icon (when isReorder is true) - 9-dot grid (3x3) -->\n <div *ngIf=\"isReorder\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n </svg>\n </div>\n <!-- Checkbox (when isReorder is false) -->\n <label *ngIf=\"!isReorder\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative 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 <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px] cqa-min-w-[32px]\">{{ stepNumber }}</span>\n <span title=\"AI Verify\" class=\"cqa-w-8 cqa-h-8 cqa-rounded-lg cqa-flex cqa-items-center cqa-justify-center cqa-flex-shrink-0 cqa-bg-[#F3E8FF] cqa-text-[#7E22CE]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.797 9.04165C5.74492 8.83977 5.63969 8.65554 5.49227 8.50812C5.34485 8.3607 5.16062 8.25548 4.95875 8.2034L1.38 7.28057C1.31894 7.26324 1.2652 7.22646 1.22694 7.17583C1.18867 7.12519 1.16797 7.06345 1.16797 6.99998C1.16797 6.93651 1.18867 6.87478 1.22694 6.82414C1.2652 6.7735 1.31894 6.73673 1.38 6.7194L4.95875 5.79598C5.16055 5.74395 5.34473 5.63882 5.49215 5.49151C5.63956 5.34419 5.74483 5.16008 5.797 4.95832L6.71983 1.37957C6.73698 1.31827 6.77372 1.26427 6.82443 1.2258C6.87515 1.18733 6.93705 1.1665 7.0007 1.1665C7.06436 1.1665 7.12626 1.18733 7.17698 1.2258C7.22769 1.26427 7.26442 1.31827 7.28158 1.37957L8.20383 4.95832C8.25591 5.16019 8.36113 5.34442 8.50855 5.49184C8.65597 5.63926 8.8402 5.74449 9.04208 5.79657L12.6208 6.71882C12.6824 6.73579 12.7366 6.77249 12.7753 6.82328C12.814 6.87407 12.8349 6.93614 12.8349 6.99998C12.8349 7.06382 12.814 7.1259 12.7753 7.17669C12.7366 7.22748 12.6824 7.26417 12.6208 7.28115L9.04208 8.2034C8.8402 8.25548 8.65597 8.3607 8.50855 8.50812C8.36113 8.65554 8.25591 8.83977 8.20383 9.04165L7.281 12.6204C7.26384 12.6817 7.22711 12.7357 7.17639 12.7742C7.12568 12.8126 7.06377 12.8335 7.00012 12.8335C6.93647 12.8335 6.87456 12.8126 6.82385 12.7742C6.77314 12.7357 6.7364 12.6817 6.71925 12.6204L5.797 9.04165Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11.666 1.75V4.08333\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M12.8333 2.91663H10.5\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.33398 9.91663V11.0833\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.91667 10.5H1.75\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </span>\n <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px]\" [innerHtml]=\"instructions\"></span>\n <div class=\"cqa-flex-grow\"></div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-3\">\n <!-- Created Date (from API) -->\n <span *ngIf=\"config.createdDate\" class=\"cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px]\">\n {{ config.createdDate | date:'d MMM yyyy' }}\n </span>\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-2 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 <div *ngIf=\"!isInsideStepGroup\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-3 cqa-px-[7px]\">\n <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><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)=\"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 </div>\n</div>\n" }]
24308
+ 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-[12.5px] ' + (isInsideLoop && isInsideStepGroup ? 'cqa-pl-20 cqa-pr-4' : (isInsideLoop || isInsideStepGroup) ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4')\" style=\"border-bottom: 1px solid #E5E7EB;\">\n <div class=\"cqa-inline-flex cqa-items-center\">\n <!-- Drag Handle Icon (when isReorder is true) - 9-dot grid (3x3) -->\n <div *ngIf=\"isReorder\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n </svg>\n </div>\n <!-- Checkbox (when isReorder is false) -->\n <label *ngIf=\"!isReorder\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative 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 <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px] cqa-min-w-[32px]\">{{ stepNumber }}</span>\n <span title=\"AI Verify\" class=\"cqa-w-8 cqa-h-8 cqa-rounded-lg cqa-flex cqa-items-center cqa-justify-center cqa-flex-shrink-0 cqa-bg-[#F3E8FF] cqa-text-[#7E22CE]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.797 9.04165C5.74492 8.83977 5.63969 8.65554 5.49227 8.50812C5.34485 8.3607 5.16062 8.25548 4.95875 8.2034L1.38 7.28057C1.31894 7.26324 1.2652 7.22646 1.22694 7.17583C1.18867 7.12519 1.16797 7.06345 1.16797 6.99998C1.16797 6.93651 1.18867 6.87478 1.22694 6.82414C1.2652 6.7735 1.31894 6.73673 1.38 6.7194L4.95875 5.79598C5.16055 5.74395 5.34473 5.63882 5.49215 5.49151C5.63956 5.34419 5.74483 5.16008 5.797 4.95832L6.71983 1.37957C6.73698 1.31827 6.77372 1.26427 6.82443 1.2258C6.87515 1.18733 6.93705 1.1665 7.0007 1.1665C7.06436 1.1665 7.12626 1.18733 7.17698 1.2258C7.22769 1.26427 7.26442 1.31827 7.28158 1.37957L8.20383 4.95832C8.25591 5.16019 8.36113 5.34442 8.50855 5.49184C8.65597 5.63926 8.8402 5.74449 9.04208 5.79657L12.6208 6.71882C12.6824 6.73579 12.7366 6.77249 12.7753 6.82328C12.814 6.87407 12.8349 6.93614 12.8349 6.99998C12.8349 7.06382 12.814 7.1259 12.7753 7.17669C12.7366 7.22748 12.6824 7.26417 12.6208 7.28115L9.04208 8.2034C8.8402 8.25548 8.65597 8.3607 8.50855 8.50812C8.36113 8.65554 8.25591 8.83977 8.20383 9.04165L7.281 12.6204C7.26384 12.6817 7.22711 12.7357 7.17639 12.7742C7.12568 12.8126 7.06377 12.8335 7.00012 12.8335C6.93647 12.8335 6.87456 12.8126 6.82385 12.7742C6.77314 12.7357 6.7364 12.6817 6.71925 12.6204L5.797 9.04165Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M11.666 1.75V4.08333\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M12.8333 2.91663H10.5\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.33398 9.91663V11.0833\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M2.91667 10.5H1.75\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </span>\n <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px]\" [innerHtml]=\"instructions\"></span>\n <div class=\"cqa-flex-grow\"></div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-3\">\n <!-- Created Date (from API) -->\n <span *ngIf=\"config.createdDate\" class=\"cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px]\">\n {{ config.createdDate | date:'d MMM yyyy' }}\n </span>\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-2 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 <div *ngIf=\"!isInsideStepGroup\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-3 cqa-px-[7px]\">\n <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><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)=\"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 </div>\n</div>\n" }]
24206
24309
  }], ctorParameters: function () { return []; }, propDecorators: { config: [{
24207
24310
  type: Input
24208
24311
  }], stepNumber: [{
@@ -24306,10 +24409,10 @@ class TestCaseUploadStepComponent {
24306
24409
  onSelectionChange(checked) { this.selected = checked; this.selectionChange.emit(checked); }
24307
24410
  }
24308
24411
  TestCaseUploadStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseUploadStepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
24309
- 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", selector: "selector", fileName: "fileName", source: "source", sourcePath: "sourcePath", description: "description", selected: "selected", disabled: "disabled", isNested: "isNested", isInsideStepGroup: "isInsideStepGroup", isInsideLoop: "isInsideLoop", isReorder: "isReorder" }, outputs: { edit: "edit", editInDepth: "editInDepth", link: "link", duplicate: "duplicate", delete: "delete", moreOptions: "moreOptions", viewDetails: "viewDetails", selectionChange: "selectionChange" }, 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-[12.5px] ' + (isInsideLoop ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4')\" style=\"border-top: 1px solid #E5E7EB;\">\n <div class=\"cqa-inline-flex cqa-items-center\">\n <!-- Drag Handle Icon (when isReorder is true) - 9-dot grid (3x3) -->\n <div *ngIf=\"isReorder\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n </svg>\n </div>\n <!-- Checkbox (when isReorder is false) -->\n <label *ngIf=\"!isReorder\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative 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 <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-3\">\n <!-- Created Date (from API) -->\n <span *ngIf=\"config.createdDate\" class=\"cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px]\">\n {{ config.createdDate | date:'d MMM yyyy' }}\n </span>\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\">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 <div *ngIf=\"!isInsideStepGroup\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-3 cqa-px-[7px]\">\n <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><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)=\"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 </div>\n</div>\n", styles: [".step-actions{opacity:0;transition:opacity .15s ease}.step-row:hover .step-actions{opacity:1}\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 } });
24412
+ 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", selector: "selector", fileName: "fileName", source: "source", sourcePath: "sourcePath", description: "description", selected: "selected", disabled: "disabled", isNested: "isNested", isInsideStepGroup: "isInsideStepGroup", isInsideLoop: "isInsideLoop", isReorder: "isReorder" }, outputs: { edit: "edit", editInDepth: "editInDepth", link: "link", duplicate: "duplicate", delete: "delete", moreOptions: "moreOptions", viewDetails: "viewDetails", selectionChange: "selectionChange" }, 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-[12.5px] ' + (isInsideLoop && isInsideStepGroup ? 'cqa-pl-20 cqa-pr-4' : (isInsideLoop || isInsideStepGroup) ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4')\" style=\"border-top: 1px solid #E5E7EB;\">\n <div class=\"cqa-inline-flex cqa-items-center\">\n <!-- Drag Handle Icon (when isReorder is true) - 9-dot grid (3x3) -->\n <div *ngIf=\"isReorder\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n </svg>\n </div>\n <!-- Checkbox (when isReorder is false) -->\n <label *ngIf=\"!isReorder\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative 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 <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-3\">\n <!-- Created Date (from API) -->\n <span *ngIf=\"config.createdDate\" class=\"cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px]\">\n {{ config.createdDate | date:'d MMM yyyy' }}\n </span>\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\">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 <div *ngIf=\"!isInsideStepGroup\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-3 cqa-px-[7px]\">\n <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><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)=\"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 </div>\n</div>\n", styles: [".step-actions{opacity:0;transition:opacity .15s ease}.step-row:hover .step-actions{opacity:1}\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 } });
24310
24413
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseUploadStepComponent, decorators: [{
24311
24414
  type: Component,
24312
- 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-[12.5px] ' + (isInsideLoop ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4')\" style=\"border-top: 1px solid #E5E7EB;\">\n <div class=\"cqa-inline-flex cqa-items-center\">\n <!-- Drag Handle Icon (when isReorder is true) - 9-dot grid (3x3) -->\n <div *ngIf=\"isReorder\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n </svg>\n </div>\n <!-- Checkbox (when isReorder is false) -->\n <label *ngIf=\"!isReorder\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative 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 <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-3\">\n <!-- Created Date (from API) -->\n <span *ngIf=\"config.createdDate\" class=\"cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px]\">\n {{ config.createdDate | date:'d MMM yyyy' }}\n </span>\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\">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 <div *ngIf=\"!isInsideStepGroup\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-3 cqa-px-[7px]\">\n <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><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)=\"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 </div>\n</div>\n" }]
24415
+ 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-[12.5px] ' + (isInsideLoop && isInsideStepGroup ? 'cqa-pl-20 cqa-pr-4' : (isInsideLoop || isInsideStepGroup) ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4')\" style=\"border-top: 1px solid #E5E7EB;\">\n <div class=\"cqa-inline-flex cqa-items-center\">\n <!-- Drag Handle Icon (when isReorder is true) - 9-dot grid (3x3) -->\n <div *ngIf=\"isReorder\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n </svg>\n </div>\n <!-- Checkbox (when isReorder is false) -->\n <label *ngIf=\"!isReorder\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative 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 <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-3\">\n <!-- Created Date (from API) -->\n <span *ngIf=\"config.createdDate\" class=\"cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px]\">\n {{ config.createdDate | date:'d MMM yyyy' }}\n </span>\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\">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 <div *ngIf=\"!isInsideStepGroup\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-3 cqa-px-[7px]\">\n <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><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)=\"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 </div>\n</div>\n" }]
24313
24416
  }], ctorParameters: function () { return []; }, propDecorators: { config: [{
24314
24417
  type: Input
24315
24418
  }], stepNumber: [{
@@ -24422,10 +24525,10 @@ class TestCaseScreenshotStepComponent {
24422
24525
  onSelectionChange(checked) { this.selected = checked; this.selectionChange.emit(checked); }
24423
24526
  }
24424
24527
  TestCaseScreenshotStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseScreenshotStepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
24425
- 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", name: "name", fullPage: "fullPage", selector: "selector", description: "description", selected: "selected", disabled: "disabled", isNested: "isNested", isInsideStepGroup: "isInsideStepGroup", isInsideLoop: "isInsideLoop", isReorder: "isReorder" }, outputs: { edit: "edit", editInDepth: "editInDepth", link: "link", duplicate: "duplicate", delete: "delete", moreOptions: "moreOptions", viewDetails: "viewDetails", selectionChange: "selectionChange" }, 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-[12.5px] ' + (isInsideLoop ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4')\" style=\"border-top: 1px solid #E5E7EB;\">\n <div class=\"cqa-inline-flex cqa-items-center\">\n <!-- Drag Handle Icon (when isReorder is true) - 9-dot grid (3x3) -->\n <div *ngIf=\"isReorder\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n </svg>\n </div>\n <!-- Checkbox (when isReorder is false) -->\n <label *ngIf=\"!isReorder\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative 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 <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-3\">\n <!-- Created Date (from API) -->\n <span *ngIf=\"config.createdDate\" class=\"cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px]\">\n {{ config.createdDate | date:'d MMM yyyy' }}\n </span>\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\">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 <div *ngIf=\"!isInsideStepGroup\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-3 cqa-px-[7px]\">\n <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><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)=\"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 </div>\n</div>\n", styles: [".step-actions{opacity:0;transition:opacity .15s ease}.step-row:hover .step-actions{opacity:1}\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 } });
24528
+ 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", name: "name", fullPage: "fullPage", selector: "selector", description: "description", selected: "selected", disabled: "disabled", isNested: "isNested", isInsideStepGroup: "isInsideStepGroup", isInsideLoop: "isInsideLoop", isReorder: "isReorder" }, outputs: { edit: "edit", editInDepth: "editInDepth", link: "link", duplicate: "duplicate", delete: "delete", moreOptions: "moreOptions", viewDetails: "viewDetails", selectionChange: "selectionChange" }, 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-[12.5px] ' + (isInsideLoop && isInsideStepGroup ? 'cqa-pl-20 cqa-pr-4' : (isInsideLoop || isInsideStepGroup) ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4')\" style=\"border-top: 1px solid #E5E7EB;\">\n <div class=\"cqa-inline-flex cqa-items-center\">\n <!-- Drag Handle Icon (when isReorder is true) - 9-dot grid (3x3) -->\n <div *ngIf=\"isReorder\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n </svg>\n </div>\n <!-- Checkbox (when isReorder is false) -->\n <label *ngIf=\"!isReorder\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative 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 <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-3\">\n <!-- Created Date (from API) -->\n <span *ngIf=\"config.createdDate\" class=\"cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px]\">\n {{ config.createdDate | date:'d MMM yyyy' }}\n </span>\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\">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 <div *ngIf=\"!isInsideStepGroup\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-3 cqa-px-[7px]\">\n <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><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)=\"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 </div>\n</div>\n", styles: [".step-actions{opacity:0;transition:opacity .15s ease}.step-row:hover .step-actions{opacity:1}\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 } });
24426
24529
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseScreenshotStepComponent, decorators: [{
24427
24530
  type: Component,
24428
- 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-[12.5px] ' + (isInsideLoop ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4')\" style=\"border-top: 1px solid #E5E7EB;\">\n <div class=\"cqa-inline-flex cqa-items-center\">\n <!-- Drag Handle Icon (when isReorder is true) - 9-dot grid (3x3) -->\n <div *ngIf=\"isReorder\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n </svg>\n </div>\n <!-- Checkbox (when isReorder is false) -->\n <label *ngIf=\"!isReorder\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative 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 <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-3\">\n <!-- Created Date (from API) -->\n <span *ngIf=\"config.createdDate\" class=\"cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px]\">\n {{ config.createdDate | date:'d MMM yyyy' }}\n </span>\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\">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 <div *ngIf=\"!isInsideStepGroup\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-3 cqa-px-[7px]\">\n <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><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)=\"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 </div>\n</div>\n" }]
24531
+ 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-[12.5px] ' + (isInsideLoop && isInsideStepGroup ? 'cqa-pl-20 cqa-pr-4' : (isInsideLoop || isInsideStepGroup) ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4')\" style=\"border-top: 1px solid #E5E7EB;\">\n <div class=\"cqa-inline-flex cqa-items-center\">\n <!-- Drag Handle Icon (when isReorder is true) - 9-dot grid (3x3) -->\n <div *ngIf=\"isReorder\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n </svg>\n </div>\n <!-- Checkbox (when isReorder is false) -->\n <label *ngIf=\"!isReorder\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative 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 <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-3\">\n <!-- Created Date (from API) -->\n <span *ngIf=\"config.createdDate\" class=\"cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px]\">\n {{ config.createdDate | date:'d MMM yyyy' }}\n </span>\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\">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 <div *ngIf=\"!isInsideStepGroup\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-3 cqa-px-[7px]\">\n <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><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)=\"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 </div>\n</div>\n" }]
24429
24532
  }], ctorParameters: function () { return []; }, propDecorators: { config: [{
24430
24533
  type: Input
24431
24534
  }], stepNumber: [{
@@ -24545,10 +24648,10 @@ class TestCaseScrollStepComponent {
24545
24648
  }
24546
24649
  }
24547
24650
  TestCaseScrollStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseScrollStepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
24548
- 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", selector: "selector", direction: "direction", description: "description", selected: "selected", disabled: "disabled", isNested: "isNested", isInsideStepGroup: "isInsideStepGroup", isInsideLoop: "isInsideLoop", expanded: "expanded", isReorder: "isReorder" }, outputs: { edit: "edit", editInDepth: "editInDepth", link: "link", duplicate: "duplicate", delete: "delete", viewDetails: "viewDetails", selectionChange: "selectionChange", toggleExpanded: "toggleExpanded", selectorChange: "selectorChange", directionChange: "directionChange" }, 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-start cqa-gap-3 cqa-py-[12.5px] ' + (isInsideLoop ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4')\">\n <div class=\"cqa-inline-flex cqa-items-center\">\n <!-- Drag Handle Icon (when isReorder is true) - 9-dot grid (3x3) -->\n <div *ngIf=\"isReorder\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n </svg>\n </div>\n <!-- Checkbox (when isReorder is false) -->\n <label *ngIf=\"!isReorder\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative 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 <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\">\n <span 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 ? ' 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: {{ direction }}</span>\n </div>\n </div>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-3\">\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-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 <!-- Created Date (from API) - same position as other steps -->\n <span *ngIf=\"config.createdDate\" class=\"cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px]\">\n {{ config.createdDate | date:'d MMM yyyy' }}\n </span>\n <div *ngIf=\"!isInsideStepGroup\" 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]\"><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)=\"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 </div>\n </div>\n</div>\n", styles: [".step-actions{opacity:0;transition:opacity .15s ease}.step-row:hover .step-actions{opacity:1}\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 } });
24651
+ 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", selector: "selector", direction: "direction", description: "description", selected: "selected", disabled: "disabled", isNested: "isNested", isInsideStepGroup: "isInsideStepGroup", isInsideLoop: "isInsideLoop", expanded: "expanded", isReorder: "isReorder" }, outputs: { edit: "edit", editInDepth: "editInDepth", link: "link", duplicate: "duplicate", delete: "delete", viewDetails: "viewDetails", selectionChange: "selectionChange", toggleExpanded: "toggleExpanded", selectorChange: "selectorChange", directionChange: "directionChange" }, 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-start cqa-gap-3 cqa-py-[12.5px] ' + (isInsideLoop && isInsideStepGroup ? 'cqa-pl-20 cqa-pr-4' : (isInsideLoop || isInsideStepGroup) ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4')\">\n <div class=\"cqa-inline-flex cqa-items-center\">\n <!-- Drag Handle Icon (when isReorder is true) - 9-dot grid (3x3) -->\n <div *ngIf=\"isReorder\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n </svg>\n </div>\n <!-- Checkbox (when isReorder is false) -->\n <label *ngIf=\"!isReorder\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative 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 <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\">\n <span 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: {{ direction }}</span>\n </div>\n </div>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-3\">\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-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 <!-- Created Date (from API) - same position as other steps -->\n <span *ngIf=\"config.createdDate\" class=\"cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px]\">\n {{ config.createdDate | date:'d MMM yyyy' }}\n </span>\n <div *ngIf=\"!isInsideStepGroup\" 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]\"><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)=\"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 </div>\n </div>\n</div>\n", styles: [".step-actions{opacity:0;transition:opacity .15s ease}.step-row:hover .step-actions{opacity:1}\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 } });
24549
24652
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseScrollStepComponent, decorators: [{
24550
24653
  type: Component,
24551
- 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-start cqa-gap-3 cqa-py-[12.5px] ' + (isInsideLoop ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4')\">\n <div class=\"cqa-inline-flex cqa-items-center\">\n <!-- Drag Handle Icon (when isReorder is true) - 9-dot grid (3x3) -->\n <div *ngIf=\"isReorder\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n </svg>\n </div>\n <!-- Checkbox (when isReorder is false) -->\n <label *ngIf=\"!isReorder\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative 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 <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\">\n <span 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 ? ' 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: {{ direction }}</span>\n </div>\n </div>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-3\">\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-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 <!-- Created Date (from API) - same position as other steps -->\n <span *ngIf=\"config.createdDate\" class=\"cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px]\">\n {{ config.createdDate | date:'d MMM yyyy' }}\n </span>\n <div *ngIf=\"!isInsideStepGroup\" 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]\"><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)=\"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 </div>\n </div>\n</div>\n" }]
24654
+ 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-start cqa-gap-3 cqa-py-[12.5px] ' + (isInsideLoop && isInsideStepGroup ? 'cqa-pl-20 cqa-pr-4' : (isInsideLoop || isInsideStepGroup) ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4')\">\n <div class=\"cqa-inline-flex cqa-items-center\">\n <!-- Drag Handle Icon (when isReorder is true) - 9-dot grid (3x3) -->\n <div *ngIf=\"isReorder\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n </svg>\n </div>\n <!-- Checkbox (when isReorder is false) -->\n <label *ngIf=\"!isReorder\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative 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 <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\">\n <span 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: {{ direction }}</span>\n </div>\n </div>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-3\">\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-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 <!-- Created Date (from API) - same position as other steps -->\n <span *ngIf=\"config.createdDate\" class=\"cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px]\">\n {{ config.createdDate | date:'d MMM yyyy' }}\n </span>\n <div *ngIf=\"!isInsideStepGroup\" 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]\"><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)=\"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 </div>\n </div>\n</div>\n" }]
24552
24655
  }], ctorParameters: function () { return []; }, propDecorators: { config: [{
24553
24656
  type: Input
24554
24657
  }], stepNumber: [{
@@ -24662,10 +24765,10 @@ class TestCaseVerifyUrlStepComponent {
24662
24765
  onSelectionChange(checked) { this.selected = checked; this.selectionChange.emit(checked); }
24663
24766
  }
24664
24767
  TestCaseVerifyUrlStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseVerifyUrlStepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
24665
- 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", action: "action", url: "url", selected: "selected", disabled: "disabled", isNested: "isNested", isInsideStepGroup: "isInsideStepGroup", isInsideLoop: "isInsideLoop", isReorder: "isReorder" }, outputs: { edit: "edit", editInDepth: "editInDepth", link: "link", duplicate: "duplicate", delete: "delete", moreOptions: "moreOptions", viewDetails: "viewDetails", selectionChange: "selectionChange" }, 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-[12.5px] ' + (isInsideLoop ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4')\" style=\"border-top: 1px solid #E5E7EB;\">\n <div class=\"cqa-inline-flex cqa-items-center\">\n <!-- Drag Handle Icon (when isReorder is true) - 9-dot grid (3x3) -->\n <div *ngIf=\"isReorder\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n </svg>\n </div>\n <!-- Checkbox (when isReorder is false) -->\n <label *ngIf=\"!isReorder\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative 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 <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-3\">\n <!-- Created Date (from API) -->\n <span *ngIf=\"config.createdDate\" class=\"cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px]\">\n {{ config.createdDate | date:'d MMM yyyy' }}\n </span>\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\">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 <div *ngIf=\"!isInsideStepGroup\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-3 cqa-px-[7px]\">\n <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><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)=\"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 </div>\n</div>\n", styles: [".step-actions{opacity:0;transition:opacity .15s ease}.step-row:hover .step-actions{opacity:1}\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 } });
24768
+ 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", action: "action", url: "url", selected: "selected", disabled: "disabled", isNested: "isNested", isInsideStepGroup: "isInsideStepGroup", isInsideLoop: "isInsideLoop", isReorder: "isReorder" }, outputs: { edit: "edit", editInDepth: "editInDepth", link: "link", duplicate: "duplicate", delete: "delete", moreOptions: "moreOptions", viewDetails: "viewDetails", selectionChange: "selectionChange" }, 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-[12.5px] ' + (isInsideLoop && isInsideStepGroup ? 'cqa-pl-20 cqa-pr-4' : (isInsideLoop || isInsideStepGroup) ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4')\" style=\"border-top: 1px solid #E5E7EB;\">\n <div class=\"cqa-inline-flex cqa-items-center\">\n <!-- Drag Handle Icon (when isReorder is true) - 9-dot grid (3x3) -->\n <div *ngIf=\"isReorder\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n </svg>\n </div>\n <!-- Checkbox (when isReorder is false) -->\n <label *ngIf=\"!isReorder\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative 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 <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-3\">\n <!-- Created Date (from API) -->\n <span *ngIf=\"config.createdDate\" class=\"cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px]\">\n {{ config.createdDate | date:'d MMM yyyy' }}\n </span>\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\">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 <div *ngIf=\"!isInsideStepGroup\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-3 cqa-px-[7px]\">\n <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><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)=\"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 </div>\n</div>\n", styles: [".step-actions{opacity:0;transition:opacity .15s ease}.step-row:hover .step-actions{opacity:1}\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 } });
24666
24769
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseVerifyUrlStepComponent, decorators: [{
24667
24770
  type: Component,
24668
- 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-[12.5px] ' + (isInsideLoop ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4')\" style=\"border-top: 1px solid #E5E7EB;\">\n <div class=\"cqa-inline-flex cqa-items-center\">\n <!-- Drag Handle Icon (when isReorder is true) - 9-dot grid (3x3) -->\n <div *ngIf=\"isReorder\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n </svg>\n </div>\n <!-- Checkbox (when isReorder is false) -->\n <label *ngIf=\"!isReorder\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative 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 <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-3\">\n <!-- Created Date (from API) -->\n <span *ngIf=\"config.createdDate\" class=\"cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px]\">\n {{ config.createdDate | date:'d MMM yyyy' }}\n </span>\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\">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 <div *ngIf=\"!isInsideStepGroup\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-3 cqa-px-[7px]\">\n <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><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)=\"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 </div>\n</div>\n" }]
24771
+ 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-[12.5px] ' + (isInsideLoop && isInsideStepGroup ? 'cqa-pl-20 cqa-pr-4' : (isInsideLoop || isInsideStepGroup) ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4')\" style=\"border-top: 1px solid #E5E7EB;\">\n <div class=\"cqa-inline-flex cqa-items-center\">\n <!-- Drag Handle Icon (when isReorder is true) - 9-dot grid (3x3) -->\n <div *ngIf=\"isReorder\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n </svg>\n </div>\n <!-- Checkbox (when isReorder is false) -->\n <label *ngIf=\"!isReorder\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative 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 <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-3\">\n <!-- Created Date (from API) -->\n <span *ngIf=\"config.createdDate\" class=\"cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px]\">\n {{ config.createdDate | date:'d MMM yyyy' }}\n </span>\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\">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 <div *ngIf=\"!isInsideStepGroup\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-3 cqa-px-[7px]\">\n <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><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)=\"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 </div>\n</div>\n" }]
24669
24772
  }], ctorParameters: function () { return []; }, propDecorators: { config: [{
24670
24773
  type: Input
24671
24774
  }], stepNumber: [{
@@ -24769,10 +24872,10 @@ class TestCaseRestoreSessionStepComponent {
24769
24872
  onSelectionChange(checked) { this.selected = checked; this.selectionChange.emit(checked); }
24770
24873
  }
24771
24874
  TestCaseRestoreSessionStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseRestoreSessionStepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
24772
- 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", action: "action", selected: "selected", disabled: "disabled", isNested: "isNested", isInsideStepGroup: "isInsideStepGroup", isInsideLoop: "isInsideLoop", isReorder: "isReorder" }, outputs: { edit: "edit", editInDepth: "editInDepth", link: "link", duplicate: "duplicate", delete: "delete", moreOptions: "moreOptions", viewDetails: "viewDetails", selectionChange: "selectionChange" }, 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-[12.5px] ' + (isInsideLoop ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4')\" style=\"border-top: 1px solid #E5E7EB;\">\n <div class=\"cqa-inline-flex cqa-items-center\">\n <!-- Drag Handle Icon (when isReorder is true) - 9-dot grid (3x3) -->\n <div *ngIf=\"isReorder\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n </svg>\n </div>\n <!-- Checkbox (when isReorder is false) -->\n <label *ngIf=\"!isReorder\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative 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 <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-3\">\n <!-- Created Date (from API) -->\n <span *ngIf=\"config.createdDate\" class=\"cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px]\">\n {{ config.createdDate | date:'d MMM yyyy' }}\n </span>\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\">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 <div *ngIf=\"!isInsideStepGroup\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-3 cqa-px-[7px]\">\n <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><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)=\"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 </div>\n</div>\n", styles: [".step-actions{opacity:0;transition:opacity .15s ease}.step-row:hover .step-actions{opacity:1}\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 } });
24875
+ 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", action: "action", selected: "selected", disabled: "disabled", isNested: "isNested", isInsideStepGroup: "isInsideStepGroup", isInsideLoop: "isInsideLoop", isReorder: "isReorder" }, outputs: { edit: "edit", editInDepth: "editInDepth", link: "link", duplicate: "duplicate", delete: "delete", moreOptions: "moreOptions", viewDetails: "viewDetails", selectionChange: "selectionChange" }, 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-[12.5px] ' + (isInsideLoop && isInsideStepGroup ? 'cqa-pl-20 cqa-pr-4' : (isInsideLoop || isInsideStepGroup) ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4')\" style=\"border-top: 1px solid #E5E7EB;\">\n <div class=\"cqa-inline-flex cqa-items-center\">\n <!-- Drag Handle Icon (when isReorder is true) - 9-dot grid (3x3) -->\n <div *ngIf=\"isReorder\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n </svg>\n </div>\n <!-- Checkbox (when isReorder is false) -->\n <label *ngIf=\"!isReorder\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative 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 <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-3\">\n <!-- Created Date (from API) -->\n <span *ngIf=\"config.createdDate\" class=\"cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px]\">\n {{ config.createdDate | date:'d MMM yyyy' }}\n </span>\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\">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 <div *ngIf=\"!isInsideStepGroup\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-3 cqa-px-[7px]\">\n <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><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)=\"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 </div>\n</div>\n", styles: [".step-actions{opacity:0;transition:opacity .15s ease}.step-row:hover .step-actions{opacity:1}\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 } });
24773
24876
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseRestoreSessionStepComponent, decorators: [{
24774
24877
  type: Component,
24775
- 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-[12.5px] ' + (isInsideLoop ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4')\" style=\"border-top: 1px solid #E5E7EB;\">\n <div class=\"cqa-inline-flex cqa-items-center\">\n <!-- Drag Handle Icon (when isReorder is true) - 9-dot grid (3x3) -->\n <div *ngIf=\"isReorder\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n </svg>\n </div>\n <!-- Checkbox (when isReorder is false) -->\n <label *ngIf=\"!isReorder\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative 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 <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-3\">\n <!-- Created Date (from API) -->\n <span *ngIf=\"config.createdDate\" class=\"cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px]\">\n {{ config.createdDate | date:'d MMM yyyy' }}\n </span>\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\">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 <div *ngIf=\"!isInsideStepGroup\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-3 cqa-px-[7px]\">\n <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><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)=\"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 </div>\n</div>\n" }]
24878
+ 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-[12.5px] ' + (isInsideLoop && isInsideStepGroup ? 'cqa-pl-20 cqa-pr-4' : (isInsideLoop || isInsideStepGroup) ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4')\" style=\"border-top: 1px solid #E5E7EB;\">\n <div class=\"cqa-inline-flex cqa-items-center\">\n <!-- Drag Handle Icon (when isReorder is true) - 9-dot grid (3x3) -->\n <div *ngIf=\"isReorder\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n </svg>\n </div>\n <!-- Checkbox (when isReorder is false) -->\n <label *ngIf=\"!isReorder\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative 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 <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-3\">\n <!-- Created Date (from API) -->\n <span *ngIf=\"config.createdDate\" class=\"cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px]\">\n {{ config.createdDate | date:'d MMM yyyy' }}\n </span>\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\">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 <div *ngIf=\"!isInsideStepGroup\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-3 cqa-px-[7px]\">\n <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><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)=\"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 </div>\n</div>\n" }]
24776
24879
  }], ctorParameters: function () { return []; }, propDecorators: { config: [{
24777
24880
  type: Input
24778
24881
  }], stepNumber: [{
@@ -24877,10 +24980,10 @@ class TestCaseCustomCodeStepComponent {
24877
24980
  onSelectionChange(checked) { this.selected = checked; this.selectionChange.emit(checked); }
24878
24981
  }
24879
24982
  TestCaseCustomCodeStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseCustomCodeStepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
24880
- 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", language: "language", code: "code", description: "description", selected: "selected", disabled: "disabled", isNested: "isNested", isInsideStepGroup: "isInsideStepGroup", isInsideLoop: "isInsideLoop", isReorder: "isReorder" }, outputs: { edit: "edit", editInDepth: "editInDepth", link: "link", duplicate: "duplicate", delete: "delete", moreOptions: "moreOptions", viewDetails: "viewDetails", selectionChange: "selectionChange" }, 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-[12.5px] ' + (isInsideLoop ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4')\" style=\"border-top: 1px solid #E5E7EB;\">\n <div class=\"cqa-inline-flex cqa-items-center\">\n <!-- Drag Handle Icon (when isReorder is true) - 9-dot grid (3x3) -->\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 </svg>\n </div>\n <!-- Checkbox (when isReorder is false) -->\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 [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 <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-3\">\n <!-- Created Date (from API) -->\n <span *ngIf=\"config.createdDate\" class=\"cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px]\">\n {{ config.createdDate | date:'d MMM yyyy' }}\n </span>\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-2 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 <div *ngIf=\"!isInsideStepGroup\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-3 cqa-px-[7px]\">\n <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><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)=\"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 </div>\n</div>\n", styles: [".step-actions{opacity:0;transition:opacity .15s ease}.step-row:hover .step-actions{opacity:1}\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 } });
24983
+ 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", language: "language", code: "code", description: "description", selected: "selected", disabled: "disabled", isNested: "isNested", isInsideStepGroup: "isInsideStepGroup", isInsideLoop: "isInsideLoop", isReorder: "isReorder" }, outputs: { edit: "edit", editInDepth: "editInDepth", link: "link", duplicate: "duplicate", delete: "delete", moreOptions: "moreOptions", viewDetails: "viewDetails", selectionChange: "selectionChange" }, 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-[12.5px] ' + (isInsideLoop && isInsideStepGroup ? 'cqa-pl-20 cqa-pr-4' : (isInsideLoop || isInsideStepGroup) ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4')\" style=\"border-top: 1px solid #E5E7EB;\">\n <div class=\"cqa-inline-flex cqa-items-center\">\n <!-- Drag Handle Icon (when isReorder is true) - 9-dot grid (3x3) -->\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 </svg>\n </div>\n <!-- Checkbox (when isReorder is false) -->\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 [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 <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-3\">\n <!-- Created Date (from API) -->\n <span *ngIf=\"config.createdDate\" class=\"cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px]\">\n {{ config.createdDate | date:'d MMM yyyy' }}\n </span>\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-2 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 <div *ngIf=\"!isInsideStepGroup\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-3 cqa-px-[7px]\">\n <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><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)=\"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 </div>\n</div>\n", styles: [".step-actions{opacity:0;transition:opacity .15s ease}.step-row:hover .step-actions{opacity:1}\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 } });
24881
24984
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseCustomCodeStepComponent, decorators: [{
24882
24985
  type: Component,
24883
- 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-[12.5px] ' + (isInsideLoop ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4')\" style=\"border-top: 1px solid #E5E7EB;\">\n <div class=\"cqa-inline-flex cqa-items-center\">\n <!-- Drag Handle Icon (when isReorder is true) - 9-dot grid (3x3) -->\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 </svg>\n </div>\n <!-- Checkbox (when isReorder is false) -->\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 [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 <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-3\">\n <!-- Created Date (from API) -->\n <span *ngIf=\"config.createdDate\" class=\"cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px]\">\n {{ config.createdDate | date:'d MMM yyyy' }}\n </span>\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-2 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 <div *ngIf=\"!isInsideStepGroup\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-3 cqa-px-[7px]\">\n <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><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)=\"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 </div>\n</div>\n" }]
24986
+ 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-[12.5px] ' + (isInsideLoop && isInsideStepGroup ? 'cqa-pl-20 cqa-pr-4' : (isInsideLoop || isInsideStepGroup) ? 'cqa-pl-10 cqa-pr-4' : 'cqa-px-4')\" style=\"border-top: 1px solid #E5E7EB;\">\n <div class=\"cqa-inline-flex cqa-items-center\">\n <!-- Drag Handle Icon (when isReorder is true) - 9-dot grid (3x3) -->\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 </svg>\n </div>\n <!-- Checkbox (when isReorder is false) -->\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 [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 <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-3\">\n <!-- Created Date (from API) -->\n <span *ngIf=\"config.createdDate\" class=\"cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px]\">\n {{ config.createdDate | date:'d MMM yyyy' }}\n </span>\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-2 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 <div *ngIf=\"!isInsideStepGroup\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-3 cqa-px-[7px]\">\n <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\"><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)=\"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 </div>\n</div>\n" }]
24884
24987
  }], ctorParameters: function () { return []; }, propDecorators: { config: [{
24885
24988
  type: Input
24886
24989
  }], stepNumber: [{
@@ -25099,13 +25202,15 @@ class DeleteStepsComponent {
25099
25202
  this.contextLabel = '';
25100
25203
  /** Optional step images/screenshots map: stepId -> imageUrl */
25101
25204
  this.stepImages = new Map();
25205
+ /** Pre-computed display labels from host (e.g. ts-portal-ui), same order as stepsToDelete. */
25206
+ this.stepLabels = [];
25102
25207
  this.confirmDelete = new EventEmitter();
25103
25208
  this.cancelled = new EventEmitter();
25104
- // Initialize from dialog data if provided
25105
25209
  if (data) {
25106
25210
  this.stepsToDelete = data.stepsToDelete || [];
25107
25211
  this.contextLabel = data.contextLabel || '';
25108
25212
  this.stepImages = data.stepImages || new Map();
25213
+ this.stepLabels = data.stepLabels || [];
25109
25214
  }
25110
25215
  }
25111
25216
  get stepsCount() {
@@ -25118,8 +25223,11 @@ class DeleteStepsComponent {
25118
25223
  get selectedStepsSubtitle() {
25119
25224
  return `Selected (${this.stepsCount}) steps for deletion, are you sure you want to delete these steps?`;
25120
25225
  }
25121
- /** Display label for a step in the list (same pattern as create-step-group). */
25226
+ /** Display label: use stepLabels from host when provided, else compute from step. */
25122
25227
  getStepDisplayLabel(step, index) {
25228
+ if (this.stepLabels?.length > index && this.stepLabels[index] != null && this.stepLabels[index] !== '') {
25229
+ return this.stepLabels[index];
25230
+ }
25123
25231
  if (isNormalStepConfig(step)) {
25124
25232
  return this.getNormalStepLabel(step);
25125
25233
  }