@cqa-lib/cqa-ui 1.1.557-delta.11 → 1.1.557-delta.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2020/lib/test-case-details/api-edit-step/api-edit-step.component.mjs +6 -1
- package/esm2020/lib/test-case-details/api-step/api-step.component.mjs +14 -4
- package/esm2020/lib/test-case-details/test-case-step.models.mjs +1 -1
- package/fesm2015/cqa-lib-cqa-ui.mjs +18 -3
- package/fesm2015/cqa-lib-cqa-ui.mjs.map +1 -1
- package/fesm2020/cqa-lib-cqa-ui.mjs +18 -3
- package/fesm2020/cqa-lib-cqa-ui.mjs.map +1 -1
- package/lib/test-case-details/api-step/api-step.component.d.ts +4 -1
- package/lib/test-case-details/test-case-step.models.d.ts +4 -0
- package/package.json +1 -1
|
@@ -34466,6 +34466,9 @@ class TestCaseApiStepComponent {
|
|
|
34466
34466
|
constructor(overlayContainer) {
|
|
34467
34467
|
this.overlayContainer = overlayContainer;
|
|
34468
34468
|
this.method = 'GET';
|
|
34469
|
+
/** When 'graphql', the step row renders a "GraphQL" label instead of the HTTP
|
|
34470
|
+
* method. Falls back to 'rest' for any non-graphql value or when omitted. */
|
|
34471
|
+
this.apiType = 'rest';
|
|
34469
34472
|
this.endpoint = '';
|
|
34470
34473
|
this.selected = false;
|
|
34471
34474
|
this.disabled = false;
|
|
@@ -34497,6 +34500,7 @@ class TestCaseApiStepComponent {
|
|
|
34497
34500
|
if (this.config) {
|
|
34498
34501
|
this.stepNumber = this.config.stepNumber;
|
|
34499
34502
|
this.method = this.config.method;
|
|
34503
|
+
this.apiType = this.config.apiType === 'graphql' ? 'graphql' : 'rest';
|
|
34500
34504
|
this.endpoint = this.config.endpoint;
|
|
34501
34505
|
this.description = this.config.description;
|
|
34502
34506
|
this.baseUrl = this.config.baseUrl;
|
|
@@ -34509,7 +34513,11 @@ class TestCaseApiStepComponent {
|
|
|
34509
34513
|
}
|
|
34510
34514
|
}
|
|
34511
34515
|
getDisplayText() {
|
|
34512
|
-
|
|
34516
|
+
// GraphQL steps are POST-only internally; surface a "GraphQL" tag in the
|
|
34517
|
+
// collapsed row instead of the HTTP verb so the user isn't confused by
|
|
34518
|
+
// "GET" appearing on a step they configured as GraphQL.
|
|
34519
|
+
const label = this.apiType === 'graphql' ? 'GraphQL' : this.method;
|
|
34520
|
+
return [label, this.endpoint].join(' ');
|
|
34513
34521
|
}
|
|
34514
34522
|
onToggleExpanded() {
|
|
34515
34523
|
this.expanded = !this.expanded;
|
|
@@ -34578,10 +34586,10 @@ class TestCaseApiStepComponent {
|
|
|
34578
34586
|
onSelectionChange(checked) { this.selected = checked; this.selectionChange.emit(checked); }
|
|
34579
34587
|
}
|
|
34580
34588
|
TestCaseApiStepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseApiStepComponent, deps: [{ token: i1$6.OverlayContainer }], target: i0.ɵɵFactoryTarget.Component });
|
|
34581
|
-
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", nestingLevel: "nestingLevel", expanded: "expanded", isReorder: "isReorder", editable: "editable", isDuplicating: "isDuplicating", environmentOptions: "environmentOptions", httpMethodOptions: "httpMethodOptions", headerNameOptions: "headerNameOptions" }, outputs: { edit: "edit", editInDepth: "editInDepth", link: "link", duplicate: "duplicate", delete: "delete", moreOptions: "moreOptions", viewDetails: "viewDetails", selectionChange: "selectionChange", toggleExpanded: "toggleExpanded", stepUpdate: "stepUpdate" }, host: { classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "editModalBackdropRef", first: true, predicate: ["editModalBackdrop"], descendants: true }], ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col\" style=\"border-top: 1px solid #E5E7EB; border-bottom: 1px solid #E5E7EB;\">\n <div\n [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 cqa-pr-4' + (config?.shouldSkip ? ' cqa-step-skipped' : '')\"\n [style.opacity]=\"config?.shouldSkip ? '0.6' : null\"\n [style.padding-left.px]=\"getRowPaddingLeftPx()\"\n [style.border-top]=\"isInsideStepGroup ? '1px solid #BEDBFF' : null\">\n <div *ngIf=\"!isInsideStepGroup\" class=\"cqa-inline-flex cqa-items-center\">\n <!-- Drag Handle Icon (when isReorder is true and not inside step group - steps inside step groups cannot be reordered) -->\n <div *ngIf=\"isReorder && !isInsideStepGroup\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n </svg>\n </div>\n <!-- Checkbox (when isReorder is false and not inside step group - hide for steps inside step groups) -->\n <label *ngIf=\"editable && !isReorder && !isInsideStepGroup\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative cqa-mr-2\">\n <input type=\"checkbox\" [ngModel]=\"selected\" [disabled]=\"disabled\" (ngModelChange)=\"onSelectionChange($event)\"\n class=\"cqa-h-4 cqa-w-4 cqa-cursor-pointer cqa-transition-all cqa-appearance-none cqa-rounded shadow hover:cqa-shadow-md cqa-border cqa-border-solid cqa-border-slate-300 cqa-flex-shrink-0\"\n [class.cqa-bg-[#3F43EE]]=\"selected\" [class.cqa-border-[#3F43EE]]=\"selected\" id=\"check\" />\n <span\n class=\"cqa-absolute cqa-text-white cqa-top-1/2 cqa-left-1/2 cqa--translate-x-1/2 cqa--translate-y-1/2 cqa-pointer-events-none cqa-flex cqa-items-center cqa-justify-center\"\n [class.cqa-opacity-0]=\"!selected\" [class.cqa-opacity-100]=\"selected\">\n <svg width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M10 3.125L4.5 8.625L2 6.125\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </span>\n </label>\n </div>\n <div *ngIf=\"isInsideStepGroup\" class=\"cqa-flex cqa-flex-shrink-0 cqa-items-center cqa-pl-0 cqa-pr-1 cqa-text-[#9CA3AF]\" aria-hidden=\"true\" title=\"Step is inside a group\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M11.9998 5.66667H11.3332V4.33333C11.3332 2.49333 9.83984 1 7.99984 1C6.15984 1 4.6665 2.49333 4.6665 4.33333V5.66667H3.99984C3.2665 5.66667 2.6665 6.26667 2.6665 7V13.6667C2.6665 14.4 3.2665 15 3.99984 15H11.9998C12.7332 15 13.3332 14.4 13.3332 13.6667V7C13.3332 6.26667 12.7332 5.66667 11.9998 5.66667ZM5.99984 4.33333C5.99984 3.22667 6.89317 2.33333 7.99984 2.33333C9.1065 2.33333 9.99984 3.22667 9.99984 4.33333V5.66667H5.99984V4.33333ZM11.9998 13.6667H3.99984V7H11.9998V13.6667ZM7.99984 11.6667C8.73317 11.6667 9.33317 11.0667 9.33317 10.3333C9.33317 9.6 8.73317 9 7.99984 9C7.2665 9 6.6665 9.6 6.6665 10.3333C6.6665 11.0667 7.2665 11.6667 7.99984 11.6667Z\" fill=\"currentColor\"/>\n </svg>\n </div>\n <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px] cqa-min-w-[32px]\">{{ stepNumber }}</span>\n <span title=\"API\"\n class=\"cqa-w-8 cqa-h-8 cqa-rounded-lg cqa-flex cqa-items-center cqa-justify-center cqa-flex-shrink-0 cqa-bg-[#D1FAE5] cqa-text-[#059669]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4.08333 7H9.91667M9.91667 7L7.58333 4.66667M9.91667 7L7.58333 9.33333\" stroke=\"currentColor\"\n stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M7 12.8333C10.2217 12.8333 12.8333 10.2217 12.8333 7C12.8333 3.77834 10.2217 1.16667 7 1.16667C3.77834 1.16667 1.16667 3.77834 1.16667 7C1.16667 10.2217 3.77834 12.8333 7 12.8333Z\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </span>\n <div class=\"cqa-flex-grow cqa-flex cqa-flex-col cqa-gap-1\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px]\">{{ getDisplayText() }}</span>\n </div>\n <!-- Expanded details: light yellow box with summary, method, URL, headers, body, save to -->\n <div *ngIf=\"expanded\"\n [class]=\"'cqa-py-1 cqa-px-3 cqa-rounded-lg cqa-border cqa-border-solid cqa-bg-[#FEFCE8] cqa-border-[#FFF085]' + (isInsideLoop ? ' cqa-ml-10' : '')\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n <div *ngIf=\"description && description.trim() !== ''\" class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <span class=\"cqa-text-[#6B7280] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium\">Summary:</span>\n <span class=\"cqa-text-[#111827] cqa-text-[12px] cqa-leading-[15px]\">{{ description }}</span>\n </div>\n <div\n class=\"cqa-text-[#6B7280] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-flex-wrap cqa-items-center cqa-gap-8\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-3\">\n <span class=\"cqa-text-[#733E0A] cqa-text-[12px] cqa-leading-[15px] cqa-font-normal\">{{method }}</span>\n <span>{{ baseUrl || 'https://api.example.com' }}</span>\n </div>\n <span class=\"cqa-text-[#111827]\">{{ endpoint }}</span>\n <div class=\"cqa-flex cqa-items-center cqa-gap-3\">\n <span>Headers: {{ headersCount ?? 0 }}</span>\n <span>Body: {{ hasBody ? 'Yes' : 'No' }}</span>\n <span>Save to: {{ saveTo || '\u2014' }}</span>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-self-center\">\n <span *ngIf=\"config?.shouldSkip\" class=\"cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-rounded-lg cqa-py-0.5 cqa-px-2 cqa-text-[#0A0A0A] cqa-text-[12px] cqa-leading-[15px] cqa-flex-shrink-0\">Skipped</span>\n <div *ngIf=\"editable && !isInsideStepGroup && !isReorder\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-1.5 cqa-pr-2\">\n <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\"\n class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M7 11.6666H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M9.55208 2.1128C9.7843 1.88058 10.0993 1.75012 10.4277 1.75012C10.7561 1.75012 11.071 1.88058 11.3033 2.1128C11.5355 2.34502 11.6659 2.65998 11.6659 2.98838C11.6659 3.31679 11.5355 3.63175 11.3033 3.86397L4.29742 10.8704C4.15864 11.0092 3.9871 11.1107 3.79867 11.1656L2.12333 11.6544C2.07314 11.669 2.01993 11.6699 1.96928 11.6569C1.91863 11.6439 1.8724 11.6176 1.83543 11.5806C1.79846 11.5437 1.7721 11.4974 1.75913 11.4468C1.74615 11.3961 1.74703 11.3429 1.76167 11.2927L2.2505 9.61738C2.30546 9.42916 2.40698 9.25783 2.54567 9.11922L9.55208 2.1128Z\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </button>\n <button type=\"button\" (click)=\"onSkipToggle(); $event.stopPropagation()\" [attr.title]=\"config?.shouldSkip ? 'Unskip step' : 'Skip step'\" [style.color]=\"config?.shouldSkip ? '#1447E6' : null\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M8.25 8.75C9.2165 8.75 10 7.9665 10 7C10 6.0335 9.2165 5.25 8.25 5.25C7.2835 5.25 6.5 6.0335 6.5 7C6.5 7.9665 7.2835 8.75 8.25 8.75Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M8.75033 2.91663H5.25033C2.99516 2.91663 1.16699 4.7448 1.16699 6.99996C1.16699 9.25512 2.99516 11.0833 5.25033 11.0833H8.75033C11.0055 11.0833 12.8337 9.25512 12.8337 6.99996C12.8337 4.7448 11.0055 2.91663 8.75033 2.91663Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n <!-- <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\"\n class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\"\n stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\"\n stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button> -->\n <button\n type=\"button\"\n (click)=\"onDuplicate(); $event.stopPropagation()\"\n [disabled]=\"isDuplicating\"\n [attr.title]=\"isDuplicating ? 'Duplicating...' : 'Duplicate'\"\n class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6] disabled:cqa-opacity-60 disabled:cqa-cursor-not-allowed\"\n >\n <svg *ngIf=\"!isDuplicating\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n <svg *ngIf=\"isDuplicating\" width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-label=\"Duplicating\">\n <circle cx=\"8\" cy=\"8\" r=\"6\" stroke=\"currentColor\" stroke-opacity=\"0.2\" stroke-width=\"2\"></circle>\n <path d=\"M14 8A6 6 0 0 0 8 2\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\">\n <animateTransform attributeName=\"transform\" type=\"rotate\" from=\"0 8 8\" to=\"360 8 8\" dur=\"0.8s\" repeatCount=\"indefinite\"/>\n </path>\n </svg>\n </button>\n <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\"\n class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M1.75 3.5H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M11.0827 3.5V11.6667C11.0827 12.25 10.4993 12.8333 9.91602 12.8333H4.08268C3.49935 12.8333 2.91602 12.25 2.91602 11.6667V3.5\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M4.66602 3.49996V2.33329C4.66602 1.74996 5.24935 1.16663 5.83268 1.16663H8.16602C8.74935 1.16663 9.33268 1.74996 9.33268 2.33329V3.49996\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M5.83398 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M8.16602 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button>\n </div>\n <!-- View Details Link (show only if description is not empty) - after action buttons, before date -->\n <a *ngIf=\"description && description.trim() !== ''\" #viewDetailsTrigger href=\"#\" (click)=\"onViewDetails($event)\"\n class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-1 cqa-no-underline\">\n {{ expanded ? 'Hide Details' : 'View Details' }}\n <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/>\n </svg>\n </a>\n <!-- Created Date (from API) - last so aligned across all steps, format: 25 Feb 2026 -->\n <span *ngIf=\"config.createdDate\" class=\"step-date cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px] cqa-ml-auto cqa-flex-shrink-0\">\n {{ config.createdDate | date:'d MMM yyyy' }}\n </span>\n </div>\n </div>\n</div>", styles: [".step-actions{opacity:0;transition:opacity .15s ease}.step-row:hover .step-actions{opacity:1}.step-row{vertical-align:middle;letter-spacing:normal}\n"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "date": i2.DatePipe } });
|
|
34589
|
+
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", apiType: "apiType", endpoint: "endpoint", description: "description", baseUrl: "baseUrl", headersCount: "headersCount", hasBody: "hasBody", saveTo: "saveTo", selected: "selected", disabled: "disabled", isNested: "isNested", isInsideLoop: "isInsideLoop", isInsideStepGroup: "isInsideStepGroup", nestingLevel: "nestingLevel", expanded: "expanded", isReorder: "isReorder", editable: "editable", isDuplicating: "isDuplicating", environmentOptions: "environmentOptions", httpMethodOptions: "httpMethodOptions", headerNameOptions: "headerNameOptions" }, outputs: { edit: "edit", editInDepth: "editInDepth", link: "link", duplicate: "duplicate", delete: "delete", moreOptions: "moreOptions", viewDetails: "viewDetails", selectionChange: "selectionChange", toggleExpanded: "toggleExpanded", stepUpdate: "stepUpdate" }, host: { classAttribute: "cqa-ui-root" }, viewQueries: [{ propertyName: "editModalBackdropRef", first: true, predicate: ["editModalBackdrop"], descendants: true }], ngImport: i0, template: "<div class=\"cqa-flex cqa-flex-col\" style=\"border-top: 1px solid #E5E7EB; border-bottom: 1px solid #E5E7EB;\">\n <div\n [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 cqa-pr-4' + (config?.shouldSkip ? ' cqa-step-skipped' : '')\"\n [style.opacity]=\"config?.shouldSkip ? '0.6' : null\"\n [style.padding-left.px]=\"getRowPaddingLeftPx()\"\n [style.border-top]=\"isInsideStepGroup ? '1px solid #BEDBFF' : null\">\n <div *ngIf=\"!isInsideStepGroup\" class=\"cqa-inline-flex cqa-items-center\">\n <!-- Drag Handle Icon (when isReorder is true and not inside step group - steps inside step groups cannot be reordered) -->\n <div *ngIf=\"isReorder && !isInsideStepGroup\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n </svg>\n </div>\n <!-- Checkbox (when isReorder is false and not inside step group - hide for steps inside step groups) -->\n <label *ngIf=\"editable && !isReorder && !isInsideStepGroup\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative cqa-mr-2\">\n <input type=\"checkbox\" [ngModel]=\"selected\" [disabled]=\"disabled\" (ngModelChange)=\"onSelectionChange($event)\"\n class=\"cqa-h-4 cqa-w-4 cqa-cursor-pointer cqa-transition-all cqa-appearance-none cqa-rounded shadow hover:cqa-shadow-md cqa-border cqa-border-solid cqa-border-slate-300 cqa-flex-shrink-0\"\n [class.cqa-bg-[#3F43EE]]=\"selected\" [class.cqa-border-[#3F43EE]]=\"selected\" id=\"check\" />\n <span\n class=\"cqa-absolute cqa-text-white cqa-top-1/2 cqa-left-1/2 cqa--translate-x-1/2 cqa--translate-y-1/2 cqa-pointer-events-none cqa-flex cqa-items-center cqa-justify-center\"\n [class.cqa-opacity-0]=\"!selected\" [class.cqa-opacity-100]=\"selected\">\n <svg width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M10 3.125L4.5 8.625L2 6.125\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </span>\n </label>\n </div>\n <div *ngIf=\"isInsideStepGroup\" class=\"cqa-flex cqa-flex-shrink-0 cqa-items-center cqa-pl-0 cqa-pr-1 cqa-text-[#9CA3AF]\" aria-hidden=\"true\" title=\"Step is inside a group\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M11.9998 5.66667H11.3332V4.33333C11.3332 2.49333 9.83984 1 7.99984 1C6.15984 1 4.6665 2.49333 4.6665 4.33333V5.66667H3.99984C3.2665 5.66667 2.6665 6.26667 2.6665 7V13.6667C2.6665 14.4 3.2665 15 3.99984 15H11.9998C12.7332 15 13.3332 14.4 13.3332 13.6667V7C13.3332 6.26667 12.7332 5.66667 11.9998 5.66667ZM5.99984 4.33333C5.99984 3.22667 6.89317 2.33333 7.99984 2.33333C9.1065 2.33333 9.99984 3.22667 9.99984 4.33333V5.66667H5.99984V4.33333ZM11.9998 13.6667H3.99984V7H11.9998V13.6667ZM7.99984 11.6667C8.73317 11.6667 9.33317 11.0667 9.33317 10.3333C9.33317 9.6 8.73317 9 7.99984 9C7.2665 9 6.6665 9.6 6.6665 10.3333C6.6665 11.0667 7.2665 11.6667 7.99984 11.6667Z\" fill=\"currentColor\"/>\n </svg>\n </div>\n <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px] cqa-min-w-[32px]\">{{ stepNumber }}</span>\n <span title=\"API\"\n class=\"cqa-w-8 cqa-h-8 cqa-rounded-lg cqa-flex cqa-items-center cqa-justify-center cqa-flex-shrink-0 cqa-bg-[#D1FAE5] cqa-text-[#059669]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4.08333 7H9.91667M9.91667 7L7.58333 4.66667M9.91667 7L7.58333 9.33333\" stroke=\"currentColor\"\n stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M7 12.8333C10.2217 12.8333 12.8333 10.2217 12.8333 7C12.8333 3.77834 10.2217 1.16667 7 1.16667C3.77834 1.16667 1.16667 3.77834 1.16667 7C1.16667 10.2217 3.77834 12.8333 7 12.8333Z\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </span>\n <div class=\"cqa-flex-grow cqa-flex cqa-flex-col cqa-gap-1\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px]\">{{ getDisplayText() }}</span>\n </div>\n <!-- Expanded details: light yellow box with summary, method, URL, headers, body, save to -->\n <div *ngIf=\"expanded\"\n [class]=\"'cqa-py-1 cqa-px-3 cqa-rounded-lg cqa-border cqa-border-solid cqa-bg-[#FEFCE8] cqa-border-[#FFF085]' + (isInsideLoop ? ' cqa-ml-10' : '')\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n <div *ngIf=\"description && description.trim() !== ''\" class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <span class=\"cqa-text-[#6B7280] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium\">Summary:</span>\n <span class=\"cqa-text-[#111827] cqa-text-[12px] cqa-leading-[15px]\">{{ description }}</span>\n </div>\n <div\n class=\"cqa-text-[#6B7280] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-flex-wrap cqa-items-center cqa-gap-8\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-3\">\n <span class=\"cqa-text-[#733E0A] cqa-text-[12px] cqa-leading-[15px] cqa-font-normal\">{{ apiType === 'graphql' ? 'GraphQL' : method }}</span>\n <span>{{ baseUrl || 'https://api.example.com' }}</span>\n </div>\n <span class=\"cqa-text-[#111827]\">{{ endpoint }}</span>\n <div class=\"cqa-flex cqa-items-center cqa-gap-3\">\n <span>Headers: {{ headersCount ?? 0 }}</span>\n <span>Body: {{ hasBody ? 'Yes' : 'No' }}</span>\n <span>Save to: {{ saveTo || '\u2014' }}</span>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-self-center\">\n <span *ngIf=\"config?.shouldSkip\" class=\"cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-rounded-lg cqa-py-0.5 cqa-px-2 cqa-text-[#0A0A0A] cqa-text-[12px] cqa-leading-[15px] cqa-flex-shrink-0\">Skipped</span>\n <div *ngIf=\"editable && !isInsideStepGroup && !isReorder\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-1.5 cqa-pr-2\">\n <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\"\n class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M7 11.6666H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M9.55208 2.1128C9.7843 1.88058 10.0993 1.75012 10.4277 1.75012C10.7561 1.75012 11.071 1.88058 11.3033 2.1128C11.5355 2.34502 11.6659 2.65998 11.6659 2.98838C11.6659 3.31679 11.5355 3.63175 11.3033 3.86397L4.29742 10.8704C4.15864 11.0092 3.9871 11.1107 3.79867 11.1656L2.12333 11.6544C2.07314 11.669 2.01993 11.6699 1.96928 11.6569C1.91863 11.6439 1.8724 11.6176 1.83543 11.5806C1.79846 11.5437 1.7721 11.4974 1.75913 11.4468C1.74615 11.3961 1.74703 11.3429 1.76167 11.2927L2.2505 9.61738C2.30546 9.42916 2.40698 9.25783 2.54567 9.11922L9.55208 2.1128Z\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </button>\n <button type=\"button\" (click)=\"onSkipToggle(); $event.stopPropagation()\" [attr.title]=\"config?.shouldSkip ? 'Unskip step' : 'Skip step'\" [style.color]=\"config?.shouldSkip ? '#1447E6' : null\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M8.25 8.75C9.2165 8.75 10 7.9665 10 7C10 6.0335 9.2165 5.25 8.25 5.25C7.2835 5.25 6.5 6.0335 6.5 7C6.5 7.9665 7.2835 8.75 8.25 8.75Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M8.75033 2.91663H5.25033C2.99516 2.91663 1.16699 4.7448 1.16699 6.99996C1.16699 9.25512 2.99516 11.0833 5.25033 11.0833H8.75033C11.0055 11.0833 12.8337 9.25512 12.8337 6.99996C12.8337 4.7448 11.0055 2.91663 8.75033 2.91663Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n <!-- <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\"\n class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\"\n stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\"\n stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button> -->\n <button\n type=\"button\"\n (click)=\"onDuplicate(); $event.stopPropagation()\"\n [disabled]=\"isDuplicating\"\n [attr.title]=\"isDuplicating ? 'Duplicating...' : 'Duplicate'\"\n class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6] disabled:cqa-opacity-60 disabled:cqa-cursor-not-allowed\"\n >\n <svg *ngIf=\"!isDuplicating\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n <svg *ngIf=\"isDuplicating\" width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-label=\"Duplicating\">\n <circle cx=\"8\" cy=\"8\" r=\"6\" stroke=\"currentColor\" stroke-opacity=\"0.2\" stroke-width=\"2\"></circle>\n <path d=\"M14 8A6 6 0 0 0 8 2\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\">\n <animateTransform attributeName=\"transform\" type=\"rotate\" from=\"0 8 8\" to=\"360 8 8\" dur=\"0.8s\" repeatCount=\"indefinite\"/>\n </path>\n </svg>\n </button>\n <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\"\n class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M1.75 3.5H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M11.0827 3.5V11.6667C11.0827 12.25 10.4993 12.8333 9.91602 12.8333H4.08268C3.49935 12.8333 2.91602 12.25 2.91602 11.6667V3.5\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M4.66602 3.49996V2.33329C4.66602 1.74996 5.24935 1.16663 5.83268 1.16663H8.16602C8.74935 1.16663 9.33268 1.74996 9.33268 2.33329V3.49996\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M5.83398 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M8.16602 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button>\n </div>\n <!-- View Details Link (show only if description is not empty) - after action buttons, before date -->\n <a *ngIf=\"description && description.trim() !== ''\" #viewDetailsTrigger href=\"#\" (click)=\"onViewDetails($event)\"\n class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-1 cqa-no-underline\">\n {{ expanded ? 'Hide Details' : 'View Details' }}\n <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/>\n </svg>\n </a>\n <!-- Created Date (from API) - last so aligned across all steps, format: 25 Feb 2026 -->\n <span *ngIf=\"config.createdDate\" class=\"step-date cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px] cqa-ml-auto cqa-flex-shrink-0\">\n {{ config.createdDate | date:'d MMM yyyy' }}\n </span>\n </div>\n </div>\n</div>", styles: [".step-actions{opacity:0;transition:opacity .15s ease}.step-row:hover .step-actions{opacity:1}.step-row{vertical-align:middle;letter-spacing:normal}\n"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "date": i2.DatePipe } });
|
|
34582
34590
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TestCaseApiStepComponent, decorators: [{
|
|
34583
34591
|
type: Component,
|
|
34584
|
-
args: [{ selector: 'cqa-test-case-api-step', host: { class: 'cqa-ui-root' }, styles: [STEP_ROW_ACTIONS_STYLES], template: "<div class=\"cqa-flex cqa-flex-col\" style=\"border-top: 1px solid #E5E7EB; border-bottom: 1px solid #E5E7EB;\">\n <div\n [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 cqa-pr-4' + (config?.shouldSkip ? ' cqa-step-skipped' : '')\"\n [style.opacity]=\"config?.shouldSkip ? '0.6' : null\"\n [style.padding-left.px]=\"getRowPaddingLeftPx()\"\n [style.border-top]=\"isInsideStepGroup ? '1px solid #BEDBFF' : null\">\n <div *ngIf=\"!isInsideStepGroup\" class=\"cqa-inline-flex cqa-items-center\">\n <!-- Drag Handle Icon (when isReorder is true and not inside step group - steps inside step groups cannot be reordered) -->\n <div *ngIf=\"isReorder && !isInsideStepGroup\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n </svg>\n </div>\n <!-- Checkbox (when isReorder is false and not inside step group - hide for steps inside step groups) -->\n <label *ngIf=\"editable && !isReorder && !isInsideStepGroup\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative cqa-mr-2\">\n <input type=\"checkbox\" [ngModel]=\"selected\" [disabled]=\"disabled\" (ngModelChange)=\"onSelectionChange($event)\"\n class=\"cqa-h-4 cqa-w-4 cqa-cursor-pointer cqa-transition-all cqa-appearance-none cqa-rounded shadow hover:cqa-shadow-md cqa-border cqa-border-solid cqa-border-slate-300 cqa-flex-shrink-0\"\n [class.cqa-bg-[#3F43EE]]=\"selected\" [class.cqa-border-[#3F43EE]]=\"selected\" id=\"check\" />\n <span\n class=\"cqa-absolute cqa-text-white cqa-top-1/2 cqa-left-1/2 cqa--translate-x-1/2 cqa--translate-y-1/2 cqa-pointer-events-none cqa-flex cqa-items-center cqa-justify-center\"\n [class.cqa-opacity-0]=\"!selected\" [class.cqa-opacity-100]=\"selected\">\n <svg width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M10 3.125L4.5 8.625L2 6.125\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </span>\n </label>\n </div>\n <div *ngIf=\"isInsideStepGroup\" class=\"cqa-flex cqa-flex-shrink-0 cqa-items-center cqa-pl-0 cqa-pr-1 cqa-text-[#9CA3AF]\" aria-hidden=\"true\" title=\"Step is inside a group\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M11.9998 5.66667H11.3332V4.33333C11.3332 2.49333 9.83984 1 7.99984 1C6.15984 1 4.6665 2.49333 4.6665 4.33333V5.66667H3.99984C3.2665 5.66667 2.6665 6.26667 2.6665 7V13.6667C2.6665 14.4 3.2665 15 3.99984 15H11.9998C12.7332 15 13.3332 14.4 13.3332 13.6667V7C13.3332 6.26667 12.7332 5.66667 11.9998 5.66667ZM5.99984 4.33333C5.99984 3.22667 6.89317 2.33333 7.99984 2.33333C9.1065 2.33333 9.99984 3.22667 9.99984 4.33333V5.66667H5.99984V4.33333ZM11.9998 13.6667H3.99984V7H11.9998V13.6667ZM7.99984 11.6667C8.73317 11.6667 9.33317 11.0667 9.33317 10.3333C9.33317 9.6 8.73317 9 7.99984 9C7.2665 9 6.6665 9.6 6.6665 10.3333C6.6665 11.0667 7.2665 11.6667 7.99984 11.6667Z\" fill=\"currentColor\"/>\n </svg>\n </div>\n <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px] cqa-min-w-[32px]\">{{ stepNumber }}</span>\n <span title=\"API\"\n class=\"cqa-w-8 cqa-h-8 cqa-rounded-lg cqa-flex cqa-items-center cqa-justify-center cqa-flex-shrink-0 cqa-bg-[#D1FAE5] cqa-text-[#059669]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4.08333 7H9.91667M9.91667 7L7.58333 4.66667M9.91667 7L7.58333 9.33333\" stroke=\"currentColor\"\n stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M7 12.8333C10.2217 12.8333 12.8333 10.2217 12.8333 7C12.8333 3.77834 10.2217 1.16667 7 1.16667C3.77834 1.16667 1.16667 3.77834 1.16667 7C1.16667 10.2217 3.77834 12.8333 7 12.8333Z\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </span>\n <div class=\"cqa-flex-grow cqa-flex cqa-flex-col cqa-gap-1\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px]\">{{ getDisplayText() }}</span>\n </div>\n <!-- Expanded details: light yellow box with summary, method, URL, headers, body, save to -->\n <div *ngIf=\"expanded\"\n [class]=\"'cqa-py-1 cqa-px-3 cqa-rounded-lg cqa-border cqa-border-solid cqa-bg-[#FEFCE8] cqa-border-[#FFF085]' + (isInsideLoop ? ' cqa-ml-10' : '')\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n <div *ngIf=\"description && description.trim() !== ''\" class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <span class=\"cqa-text-[#6B7280] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium\">Summary:</span>\n <span class=\"cqa-text-[#111827] cqa-text-[12px] cqa-leading-[15px]\">{{ description }}</span>\n </div>\n <div\n class=\"cqa-text-[#6B7280] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-flex-wrap cqa-items-center cqa-gap-8\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-3\">\n <span class=\"cqa-text-[#733E0A] cqa-text-[12px] cqa-leading-[15px] cqa-font-normal\">{{method }}</span>\n <span>{{ baseUrl || 'https://api.example.com' }}</span>\n </div>\n <span class=\"cqa-text-[#111827]\">{{ endpoint }}</span>\n <div class=\"cqa-flex cqa-items-center cqa-gap-3\">\n <span>Headers: {{ headersCount ?? 0 }}</span>\n <span>Body: {{ hasBody ? 'Yes' : 'No' }}</span>\n <span>Save to: {{ saveTo || '\u2014' }}</span>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-self-center\">\n <span *ngIf=\"config?.shouldSkip\" class=\"cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-rounded-lg cqa-py-0.5 cqa-px-2 cqa-text-[#0A0A0A] cqa-text-[12px] cqa-leading-[15px] cqa-flex-shrink-0\">Skipped</span>\n <div *ngIf=\"editable && !isInsideStepGroup && !isReorder\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-1.5 cqa-pr-2\">\n <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\"\n class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M7 11.6666H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M9.55208 2.1128C9.7843 1.88058 10.0993 1.75012 10.4277 1.75012C10.7561 1.75012 11.071 1.88058 11.3033 2.1128C11.5355 2.34502 11.6659 2.65998 11.6659 2.98838C11.6659 3.31679 11.5355 3.63175 11.3033 3.86397L4.29742 10.8704C4.15864 11.0092 3.9871 11.1107 3.79867 11.1656L2.12333 11.6544C2.07314 11.669 2.01993 11.6699 1.96928 11.6569C1.91863 11.6439 1.8724 11.6176 1.83543 11.5806C1.79846 11.5437 1.7721 11.4974 1.75913 11.4468C1.74615 11.3961 1.74703 11.3429 1.76167 11.2927L2.2505 9.61738C2.30546 9.42916 2.40698 9.25783 2.54567 9.11922L9.55208 2.1128Z\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </button>\n <button type=\"button\" (click)=\"onSkipToggle(); $event.stopPropagation()\" [attr.title]=\"config?.shouldSkip ? 'Unskip step' : 'Skip step'\" [style.color]=\"config?.shouldSkip ? '#1447E6' : null\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M8.25 8.75C9.2165 8.75 10 7.9665 10 7C10 6.0335 9.2165 5.25 8.25 5.25C7.2835 5.25 6.5 6.0335 6.5 7C6.5 7.9665 7.2835 8.75 8.25 8.75Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M8.75033 2.91663H5.25033C2.99516 2.91663 1.16699 4.7448 1.16699 6.99996C1.16699 9.25512 2.99516 11.0833 5.25033 11.0833H8.75033C11.0055 11.0833 12.8337 9.25512 12.8337 6.99996C12.8337 4.7448 11.0055 2.91663 8.75033 2.91663Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n <!-- <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\"\n class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\"\n stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\"\n stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button> -->\n <button\n type=\"button\"\n (click)=\"onDuplicate(); $event.stopPropagation()\"\n [disabled]=\"isDuplicating\"\n [attr.title]=\"isDuplicating ? 'Duplicating...' : 'Duplicate'\"\n class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6] disabled:cqa-opacity-60 disabled:cqa-cursor-not-allowed\"\n >\n <svg *ngIf=\"!isDuplicating\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n <svg *ngIf=\"isDuplicating\" width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-label=\"Duplicating\">\n <circle cx=\"8\" cy=\"8\" r=\"6\" stroke=\"currentColor\" stroke-opacity=\"0.2\" stroke-width=\"2\"></circle>\n <path d=\"M14 8A6 6 0 0 0 8 2\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\">\n <animateTransform attributeName=\"transform\" type=\"rotate\" from=\"0 8 8\" to=\"360 8 8\" dur=\"0.8s\" repeatCount=\"indefinite\"/>\n </path>\n </svg>\n </button>\n <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\"\n class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M1.75 3.5H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M11.0827 3.5V11.6667C11.0827 12.25 10.4993 12.8333 9.91602 12.8333H4.08268C3.49935 12.8333 2.91602 12.25 2.91602 11.6667V3.5\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M4.66602 3.49996V2.33329C4.66602 1.74996 5.24935 1.16663 5.83268 1.16663H8.16602C8.74935 1.16663 9.33268 1.74996 9.33268 2.33329V3.49996\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M5.83398 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M8.16602 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button>\n </div>\n <!-- View Details Link (show only if description is not empty) - after action buttons, before date -->\n <a *ngIf=\"description && description.trim() !== ''\" #viewDetailsTrigger href=\"#\" (click)=\"onViewDetails($event)\"\n class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-1 cqa-no-underline\">\n {{ expanded ? 'Hide Details' : 'View Details' }}\n <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/>\n </svg>\n </a>\n <!-- Created Date (from API) - last so aligned across all steps, format: 25 Feb 2026 -->\n <span *ngIf=\"config.createdDate\" class=\"step-date cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px] cqa-ml-auto cqa-flex-shrink-0\">\n {{ config.createdDate | date:'d MMM yyyy' }}\n </span>\n </div>\n </div>\n</div>" }]
|
|
34592
|
+
args: [{ selector: 'cqa-test-case-api-step', host: { class: 'cqa-ui-root' }, styles: [STEP_ROW_ACTIONS_STYLES], template: "<div class=\"cqa-flex cqa-flex-col\" style=\"border-top: 1px solid #E5E7EB; border-bottom: 1px solid #E5E7EB;\">\n <div\n [class]=\"'step-row cqa-flex cqa-items-center cqa-gap-3 cqa-py-2 cqa-pr-4' + (config?.shouldSkip ? ' cqa-step-skipped' : '')\"\n [style.opacity]=\"config?.shouldSkip ? '0.6' : null\"\n [style.padding-left.px]=\"getRowPaddingLeftPx()\"\n [style.border-top]=\"isInsideStepGroup ? '1px solid #BEDBFF' : null\">\n <div *ngIf=\"!isInsideStepGroup\" class=\"cqa-inline-flex cqa-items-center\">\n <!-- Drag Handle Icon (when isReorder is true and not inside step group - steps inside step groups cannot be reordered) -->\n <div *ngIf=\"isReorder && !isInsideStepGroup\" class=\"cqa-mr-2 cqa-cursor-move cqa-text-[#6B7280] hover:cqa-text-[#111827]\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle cx=\"3\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"3\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"3\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"8\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"3\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"8\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n <circle cx=\"13\" cy=\"13\" r=\"1.5\" fill=\"currentColor\"/>\n </svg>\n </div>\n <!-- Checkbox (when isReorder is false and not inside step group - hide for steps inside step groups) -->\n <label *ngIf=\"editable && !isReorder && !isInsideStepGroup\" class=\"cqa-flex cqa-items-center cqa-cursor-pointer cqa-relative cqa-mr-2\">\n <input type=\"checkbox\" [ngModel]=\"selected\" [disabled]=\"disabled\" (ngModelChange)=\"onSelectionChange($event)\"\n class=\"cqa-h-4 cqa-w-4 cqa-cursor-pointer cqa-transition-all cqa-appearance-none cqa-rounded shadow hover:cqa-shadow-md cqa-border cqa-border-solid cqa-border-slate-300 cqa-flex-shrink-0\"\n [class.cqa-bg-[#3F43EE]]=\"selected\" [class.cqa-border-[#3F43EE]]=\"selected\" id=\"check\" />\n <span\n class=\"cqa-absolute cqa-text-white cqa-top-1/2 cqa-left-1/2 cqa--translate-x-1/2 cqa--translate-y-1/2 cqa-pointer-events-none cqa-flex cqa-items-center cqa-justify-center\"\n [class.cqa-opacity-0]=\"!selected\" [class.cqa-opacity-100]=\"selected\">\n <svg width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M10 3.125L4.5 8.625L2 6.125\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </span>\n </label>\n </div>\n <div *ngIf=\"isInsideStepGroup\" class=\"cqa-flex cqa-flex-shrink-0 cqa-items-center cqa-pl-0 cqa-pr-1 cqa-text-[#9CA3AF]\" aria-hidden=\"true\" title=\"Step is inside a group\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M11.9998 5.66667H11.3332V4.33333C11.3332 2.49333 9.83984 1 7.99984 1C6.15984 1 4.6665 2.49333 4.6665 4.33333V5.66667H3.99984C3.2665 5.66667 2.6665 6.26667 2.6665 7V13.6667C2.6665 14.4 3.2665 15 3.99984 15H11.9998C12.7332 15 13.3332 14.4 13.3332 13.6667V7C13.3332 6.26667 12.7332 5.66667 11.9998 5.66667ZM5.99984 4.33333C5.99984 3.22667 6.89317 2.33333 7.99984 2.33333C9.1065 2.33333 9.99984 3.22667 9.99984 4.33333V5.66667H5.99984V4.33333ZM11.9998 13.6667H3.99984V7H11.9998V13.6667ZM7.99984 11.6667C8.73317 11.6667 9.33317 11.0667 9.33317 10.3333C9.33317 9.6 8.73317 9 7.99984 9C7.2665 9 6.6665 9.6 6.6665 10.3333C6.6665 11.0667 7.2665 11.6667 7.99984 11.6667Z\" fill=\"currentColor\"/>\n </svg>\n </div>\n <span class=\"cqa-text-[#6B7280] cqa-text-[14px] cqa-leading-[18px] cqa-min-w-[32px]\">{{ stepNumber }}</span>\n <span title=\"API\"\n class=\"cqa-w-8 cqa-h-8 cqa-rounded-lg cqa-flex cqa-items-center cqa-justify-center cqa-flex-shrink-0 cqa-bg-[#D1FAE5] cqa-text-[#059669]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M4.08333 7H9.91667M9.91667 7L7.58333 4.66667M9.91667 7L7.58333 9.33333\" stroke=\"currentColor\"\n stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M7 12.8333C10.2217 12.8333 12.8333 10.2217 12.8333 7C12.8333 3.77834 10.2217 1.16667 7 1.16667C3.77834 1.16667 1.16667 3.77834 1.16667 7C1.16667 10.2217 3.77834 12.8333 7 12.8333Z\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </span>\n <div class=\"cqa-flex-grow cqa-flex cqa-flex-col cqa-gap-1\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <span class=\"cqa-text-[#111827] cqa-text-[14px] cqa-leading-[18px]\">{{ getDisplayText() }}</span>\n </div>\n <!-- Expanded details: light yellow box with summary, method, URL, headers, body, save to -->\n <div *ngIf=\"expanded\"\n [class]=\"'cqa-py-1 cqa-px-3 cqa-rounded-lg cqa-border cqa-border-solid cqa-bg-[#FEFCE8] cqa-border-[#FFF085]' + (isInsideLoop ? ' cqa-ml-10' : '')\">\n <div class=\"cqa-flex cqa-flex-col cqa-gap-1\">\n <div *ngIf=\"description && description.trim() !== ''\" class=\"cqa-flex cqa-items-center cqa-gap-2\">\n <span class=\"cqa-text-[#6B7280] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium\">Summary:</span>\n <span class=\"cqa-text-[#111827] cqa-text-[12px] cqa-leading-[15px]\">{{ description }}</span>\n </div>\n <div\n class=\"cqa-text-[#6B7280] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-flex-wrap cqa-items-center cqa-gap-8\">\n <div class=\"cqa-flex cqa-items-center cqa-gap-3\">\n <span class=\"cqa-text-[#733E0A] cqa-text-[12px] cqa-leading-[15px] cqa-font-normal\">{{ apiType === 'graphql' ? 'GraphQL' : method }}</span>\n <span>{{ baseUrl || 'https://api.example.com' }}</span>\n </div>\n <span class=\"cqa-text-[#111827]\">{{ endpoint }}</span>\n <div class=\"cqa-flex cqa-items-center cqa-gap-3\">\n <span>Headers: {{ headersCount ?? 0 }}</span>\n <span>Body: {{ hasBody ? 'Yes' : 'No' }}</span>\n <span>Save to: {{ saveTo || '\u2014' }}</span>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"cqa-flex cqa-items-center cqa-gap-2 cqa-self-center\">\n <span *ngIf=\"config?.shouldSkip\" class=\"cqa-border cqa-border-solid cqa-border-[#E5E5E5] cqa-rounded-lg cqa-py-0.5 cqa-px-2 cqa-text-[#0A0A0A] cqa-text-[12px] cqa-leading-[15px] cqa-flex-shrink-0\">Skipped</span>\n <div *ngIf=\"editable && !isInsideStepGroup && !isReorder\" class=\"step-actions cqa-flex cqa-items-center cqa-gap-1.5 cqa-pr-2\">\n <button type=\"button\" (click)=\"onEdit(); $event.stopPropagation()\" title=\"Edit\"\n class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M7 11.6666H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M9.55208 2.1128C9.7843 1.88058 10.0993 1.75012 10.4277 1.75012C10.7561 1.75012 11.071 1.88058 11.3033 2.1128C11.5355 2.34502 11.6659 2.65998 11.6659 2.98838C11.6659 3.31679 11.5355 3.63175 11.3033 3.86397L4.29742 10.8704C4.15864 11.0092 3.9871 11.1107 3.79867 11.1656L2.12333 11.6544C2.07314 11.669 2.01993 11.6699 1.96928 11.6569C1.91863 11.6439 1.8724 11.6176 1.83543 11.5806C1.79846 11.5437 1.7721 11.4974 1.75913 11.4468C1.74615 11.3961 1.74703 11.3429 1.76167 11.2927L2.2505 9.61738C2.30546 9.42916 2.40698 9.25783 2.54567 9.11922L9.55208 2.1128Z\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </button>\n <button type=\"button\" (click)=\"onSkipToggle(); $event.stopPropagation()\" [attr.title]=\"config?.shouldSkip ? 'Unskip step' : 'Skip step'\" [style.color]=\"config?.shouldSkip ? '#1447E6' : null\" class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M8.25 8.75C9.2165 8.75 10 7.9665 10 7C10 6.0335 9.2165 5.25 8.25 5.25C7.2835 5.25 6.5 6.0335 6.5 7C6.5 7.9665 7.2835 8.75 8.25 8.75Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M8.75033 2.91663H5.25033C2.99516 2.91663 1.16699 4.7448 1.16699 6.99996C1.16699 9.25512 2.99516 11.0833 5.25033 11.0833H8.75033C11.0055 11.0833 12.8337 9.25512 12.8337 6.99996C12.8337 4.7448 11.0055 2.91663 8.75033 2.91663Z\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n <!-- <button type=\"button\" (click)=\"onLink(); $event.stopPropagation()\" title=\"Link\"\n class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M5.00065 9.91671H3.66732C2.78326 9.91671 1.93542 9.60942 1.3103 9.06244C0.685174 8.51545 0.333984 7.77359 0.333984 7.00004C0.333984 6.22649 0.685174 5.48463 1.3103 4.93765C1.93542 4.39066 2.78326 4.08337 3.66732 4.08337H5.00065\"\n stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M9 4.08337H10.3333C11.2174 4.08337 12.0652 4.39066 12.6904 4.93765C13.3155 5.48463 13.6667 6.22649 13.6667 7.00004C13.6667 7.77359 13.3155 8.51545 12.6904 9.06244C12.0652 9.60942 11.2174 9.91671 10.3333 9.91671H9\"\n stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M4.33398 7H9.66732\" stroke=\"currentColor\" stroke-width=\"1.33333\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button> -->\n <button\n type=\"button\"\n (click)=\"onDuplicate(); $event.stopPropagation()\"\n [disabled]=\"isDuplicating\"\n [attr.title]=\"isDuplicating ? 'Duplicating...' : 'Duplicate'\"\n class=\"cqa-p-0 cqa-text-[#99A1Af] hover:cqa-text-[#1447E6] disabled:cqa-opacity-60 disabled:cqa-cursor-not-allowed\"\n >\n <svg *ngIf=\"!isDuplicating\" width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.666 4.66663H5.83268C5.18835 4.66663 4.66602 5.18896 4.66602 5.83329V11.6666C4.66602 12.311 5.18835 12.8333 5.83268 12.8333H11.666C12.3103 12.8333 12.8327 12.311 12.8327 11.6666V5.83329C12.8327 5.18896 12.3103 4.66663 11.666 4.66663Z\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M2.33268 9.33329C1.69102 9.33329 1.16602 8.80829 1.16602 8.16663V2.33329C1.16602 1.69163 1.69102 1.16663 2.33268 1.16663H8.16602C8.80768 1.16663 9.33268 1.69163 9.33268 2.33329\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n <svg *ngIf=\"isDuplicating\" width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-label=\"Duplicating\">\n <circle cx=\"8\" cy=\"8\" r=\"6\" stroke=\"currentColor\" stroke-opacity=\"0.2\" stroke-width=\"2\"></circle>\n <path d=\"M14 8A6 6 0 0 0 8 2\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\">\n <animateTransform attributeName=\"transform\" type=\"rotate\" from=\"0 8 8\" to=\"360 8 8\" dur=\"0.8s\" repeatCount=\"indefinite\"/>\n </path>\n </svg>\n </button>\n <button type=\"button\" (click)=\"onDelete(); $event.stopPropagation()\" title=\"Delete\"\n class=\"cqa-p-0 cqa-text-[#ff6467] hover:cqa-text-[#C63535]\">\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M1.75 3.5H12.25\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path\n d=\"M11.0827 3.5V11.6667C11.0827 12.25 10.4993 12.8333 9.91602 12.8333H4.08268C3.49935 12.8333 2.91602 12.25 2.91602 11.6667V3.5\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M4.66602 3.49996V2.33329C4.66602 1.74996 5.24935 1.16663 5.83268 1.16663H8.16602C8.74935 1.16663 9.33268 1.74996 9.33268 2.33329V3.49996\"\n stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path d=\"M5.83398 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n <path d=\"M8.16602 6.41663V9.91663\" stroke=\"currentColor\" stroke-width=\"1.16667\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button>\n </div>\n <!-- View Details Link (show only if description is not empty) - after action buttons, before date -->\n <a *ngIf=\"description && description.trim() !== ''\" #viewDetailsTrigger href=\"#\" (click)=\"onViewDetails($event)\"\n class=\"cqa-text-[#3F43EE] cqa-text-[10px] cqa-leading-[15px] cqa-font-medium cqa-flex cqa-items-center cqa-gap-1 cqa-no-underline\">\n {{ expanded ? 'Hide Details' : 'View Details' }}\n <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M2.03809 6.74329L2.62809 7.33329L5.96142 3.99996L2.62809 0.666626L2.03809 1.25663L4.78142 3.99996L2.03809 6.74329Z\" fill=\"#3F43EE\"/>\n </svg>\n </a>\n <!-- Created Date (from API) - last so aligned across all steps, format: 25 Feb 2026 -->\n <span *ngIf=\"config.createdDate\" class=\"step-date cqa-text-[#6B7280] cqa-text-[12px] cqa-leading-[15px] cqa-ml-auto cqa-flex-shrink-0\">\n {{ config.createdDate | date:'d MMM yyyy' }}\n </span>\n </div>\n </div>\n</div>" }]
|
|
34585
34593
|
}], ctorParameters: function () { return [{ type: i1$6.OverlayContainer }]; }, propDecorators: { editModalBackdropRef: [{
|
|
34586
34594
|
type: ViewChild,
|
|
34587
34595
|
args: ['editModalBackdrop']
|
|
@@ -34591,6 +34599,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
34591
34599
|
type: Input
|
|
34592
34600
|
}], method: [{
|
|
34593
34601
|
type: Input
|
|
34602
|
+
}], apiType: [{
|
|
34603
|
+
type: Input
|
|
34594
34604
|
}], endpoint: [{
|
|
34595
34605
|
type: Input
|
|
34596
34606
|
}], description: [{
|
|
@@ -38388,6 +38398,11 @@ class ApiEditStepComponent {
|
|
|
38388
38398
|
// Restore the target mode's saved state, or reset to a clean slate if the
|
|
38389
38399
|
// user has never visited that mode this session.
|
|
38390
38400
|
this.applyApiTypeSnapshot(this.snapshotByType[nextType]);
|
|
38401
|
+
// Drop any mode-specific overlay panel (import-cURL is REST-only, the
|
|
38402
|
+
// GraphQL operation picker is GraphQL-only). Without this reset, e.g. the
|
|
38403
|
+
// user could open import-cURL in REST, switch to GraphQL, and still see the
|
|
38404
|
+
// cURL pane — even though the textarea content no longer applies.
|
|
38405
|
+
this.bodyView = 'headers';
|
|
38391
38406
|
if (this.activeApiType === 'graphql') {
|
|
38392
38407
|
this.activePayloadTab = 'graphql';
|
|
38393
38408
|
// Re-validate variables on first switch — the textarea may already have content
|